Merge pull request #106 from Sohith-code/cbrelease-4.8.20-custom-registration-sohith

Added api to upload logo and designation changes

Author: sureshece16

project/ws/app/src/lib/head/ui-admin-table/create-organisation/create-organisation.component.ts

@@ -5,16 +5,14 @@ import * as _ from 'lodash'
 import { CreateMDOService } from '../../../routes/home/services/create-mdo.services'
 import { ActivatedRoute } from '@angular/router'
 import { LoaderService } from '../../../routes/home/services/loader.service'
+import { IUploadedLogoresponse } from '../interface/interfaces'
 @Component({
   selector: 'ws-app-create-organisation',
   templateUrl: './create-organisation.component.html',
   styleUrls: ['./create-organisation.component.scss']
 })
 export class CreateOrganisationComponent implements OnInit, OnDestroy {
 
-  //#region (global variables)
-
-  //#region (input and output)
   @Input() rowData: any
   @Input() dropdownList: {
     statesList: any[],
@@ -26,7 +24,6 @@ export class CreateOrganisationComponent implements OnInit, OnDestroy {
   @Input() openMode: string = ''
   @Output() buttonClick = new EventEmitter()
   @Output() organizationCreated = new EventEmitter<any>()
-  //#endregion
 
   organisationForm!: FormGroup
   statesList: any = []
@@ -40,6 +37,8 @@ export class CreateOrganisationComponent implements OnInit, OnDestroy {
   filteredStates: any[] = []
   filteredMinistry: any[] = []
   heirarchyObject: any
+  selectedLogoFile: any
+  uploadedLogoResponse!: IUploadedLogoresponse
   constructor(
     private formBuilder: FormBuilder,
     private snackBar: MatSnackBar,
@@ -51,7 +50,6 @@ export class CreateOrganisationComponent implements OnInit, OnDestroy {
     this.addOverflowHidden()
   }
 
-  //#region (ng onint)
   ngOnInit(): void {
     this.loggedInUserId = _.get(this.activatedRoute, 'snapshot.parent.data.configService.userProfile.userId')
     this.initialization()
@@ -128,9 +126,6 @@ export class CreateOrganisationComponent implements OnInit, OnDestroy {
       })
     }
   }
-  //#endregion
-
-  //#region (UI interaction lick click)
 
   get getCategory() {
     return this.organisationForm.controls.category.value
@@ -153,7 +148,7 @@ export class CreateOrganisationComponent implements OnInit, OnDestroy {
       isTenant: true,
       requestedBy: this.loggedInUserId,
 
-      logo: this.selectedLogo,
+      logo: this.uploadedLogoResponse?.qrcodepath || "",
       description: this.controls['description'].value,
       parentMapId: this.heirarchyObject?.parentMapId || "",
       sbRootOrgId: this.heirarchyObject?.sbRootOrgId || "",
@@ -173,7 +168,7 @@ export class CreateOrganisationComponent implements OnInit, OnDestroy {
       next: (response: any) => {
         if (response.result) {
           this.organizationCreated.emit(payload)
-          this.snackBar.open('Organization successfully created.', 'Close', { panelClass: ['success'] })
+          this.snackBar.open('Organization successfully created.', 'X', { panelClass: ['success'] })
           this.closeNaveBar()
           this.loaderService.changeLoad.next(false)
           this.isLoading = false
@@ -194,15 +189,15 @@ export class CreateOrganisationComponent implements OnInit, OnDestroy {
       // organisationSubType: this.heirarchyObject.sbOrgSubType,
       organisationSubType: "board",
       orgId: this.rowData.id,
-      logo: request.logo,
+      logo: this.uploadedLogoResponse?.qrcodepath || this.rowData.logo,
       description: request.description
     }
 
     this.createMDOService.updateOrganization(payload).subscribe({
       next: (response: any) => {
         if (response.result) {
           this.organizationCreated.emit(payload)
-          this.snackBar.open('Organization successfully updated.', 'Close', { panelClass: ['success'] })
+          this.snackBar.open('Organization successfully updated.', 'X', { panelClass: ['success'] })
           this.closeNaveBar()
           this.loaderService.changeLoad.next(false)
           this.isLoading = false
@@ -219,28 +214,22 @@ export class CreateOrganisationComponent implements OnInit, OnDestroy {
   uploadLogo(event: Event) {
     const input = event.target as HTMLInputElement
     if (input.files?.length) {
-      const selectedFile = input.files[0]
-      this.selectedLogoName = selectedFile.name
+      this.selectedLogoFile = input.files[0]
+      this.selectedLogoName = this.selectedLogoFile.name
       const maxFileSize = this.maxFileSize * 1024
 
-      if (!this.validFileTypes.includes(selectedFile.type)) {
-        this.snackBar.open('Invalid file type', 'Close', { panelClass: ['error'] })
+      if (!this.validFileTypes.includes(this.selectedLogoFile.type)) {
+        this.snackBar.open('Invalid file type', 'X', { panelClass: ['error'] })
         return
       }
 
-      if (selectedFile.size > maxFileSize) {
-        this.snackBar.open(`File size exceeds ${this.maxFileSize} KB. Please select a smaller file.`, 'Close', { panelClass: ['error'] })
+      if (this.selectedLogoFile.size > maxFileSize) {
+        this.snackBar.open(`File size exceeds ${this.maxFileSize} KB. Please select a smaller file.`, 'X', { panelClass: ['error'] })
         return
       }
-
-      const reader = new FileReader()
-      reader.onload = () => {
-        this.selectedLogo = reader.result
-      }
-      reader.readAsDataURL(selectedFile)
+      this.uploadOrganizationLogo()
     }
   }
-  //#endregion
 
   addOverflowHidden() {
     document.body.classList.add('overflow-hidden')
@@ -268,4 +257,19 @@ export class CreateOrganisationComponent implements OnInit, OnDestroy {
 
   }
 
+  uploadOrganizationLogo() {
+    const formData = new FormData()
+    formData.append('file', this.selectedLogoFile)
+    this.createMDOService.uploadOrganizationLogo(formData).subscribe({
+      next: (response: any) => {
+        if (response.result) {
+          this.uploadedLogoResponse = response.result
+          this.selectedLogo = this.uploadedLogoResponse.qrcodepath
+        }
+      },
+      error: () => {
+        this.snackBar.open(`Couldn't upload the logo, Please try again`, 'X', { panelClass: ['error'] })
+      }
+    })
+  }
 }

project/ws/app/src/lib/head/ui-admin-table/custom-self-registration/custom-self-registration.component.html

@@ -7,7 +7,7 @@
           <mat-icon class="closeIcon" (click)="closeNaveBar()">close</mat-icon>
         </div>
 
-        <div class="px-5 pt-6 mb-24">
+        <div class="px-5 pt-6 mb-24 relative">
           <ng-container>
             <form [formGroup]="selfRegistrationForm">
               <!-- <div class="flex items-center justify-between ">
@@ -36,7 +36,7 @@
               </div> -->
 
               <ng-container *ngIf="!initialData.QRGenerated">
-                <div class="flex justify-center items-center flex-column gap-6">
+                <div class="flex justify-center items-center flex-column gap-6 center-position">
                   <!-- <button mat-flat-button class="mat-btn-flat" [disabled]="selfRegistrationForm.invalid || isLoading"
                     (click)="generateQRCodeLink()">Generate</button> -->
 
@@ -47,15 +47,15 @@
               </ng-container>
 
               <ng-container *ngIf="initialData.QRGenerated">
-                <div class="flex justify-center items-center mb-4">
+                <!-- <div class="flex justify-center items-center mb-4">
                   <button mat-stroked-button class="mat-btn-outline"
                     [disabled]="selfRegistrationForm.invalid || isLoading" (click)="generateQRCodeLink()">Publish New
                     Link </button>
-                </div>
-
+                </div> -->
+                <!--
                 <p class="text-xs note-text">Note: Publishing a new URL will automatically expire the old one. Please
                   use the new URL for custom
-                  user registrations.</p>
+                  user registrations.</p> -->
 
                 <div class="wrapper-card p-4 rounded-lg">
                   <div class="flex justify-between">
@@ -65,9 +65,8 @@
                         [href]="customRegistrationLinks.registrationLink"
                         target="_blank">{{customRegistrationLinks.registrationLink}}</a>
                     </div>
-                    <div class="badge"
-                      [ngClass]="checkRegistrationStatus(this.initialData.endDateRegistration) ? 'active':'in-active'">
-                      {{checkRegistrationStatus(this.initialData.endDateRegistration) ?
+                    <div class="badge " [ngClass]="checkRegistrationStatus() ? 'active':'in-active'">
+                      {{checkRegistrationStatus() ?
                       'Active': 'None'}}</div>
                   </div>
 
@@ -137,17 +136,11 @@
           </ng-container>
         </div>
 
-        <div class="right-sidenav-footer flex items-center justify-end gap-4 items-center px-5 pt-3 pb-5 bg-white">
-          <!-- <ng-container *ngIf="!initialData.QRGenerated">
-            <button mat-flat-button class="mat-btn-outline" (click)="closeNaveBar()">Cancel</button>
-            <button mat-flat-button class="mat-btn-flat" [disabled]="!initialData?.QRGenerated">{{initialData?.openMode
-              === 'edit' ? 'Update' : 'Add'}}</button>
-          </ng-container> -->
-          <ng-container *ngIf="initialData.QRGenerated">
+        <ng-container *ngIf="initialData.QRGenerated">
+          <div class="right-sidenav-footer flex items-center justify-end gap-4 items-center px-5 pt-3 pb-5 bg-white">
             <button mat-flat-button class="mat-btn-flat" (click)="closeNaveBar()">Close</button>
-          </ng-container>
-
-        </div>
+          </div>
+        </ng-container>
       </div>
     </div>
   </mat-sidenav-content>

project/ws/app/src/lib/head/ui-admin-table/custom-self-registration/custom-self-registration.component.scss

@@ -97,6 +97,7 @@
     color: #1d8923;
     background: #1d892329;
   }
+
   &.in-active {
     color: #00000099;
     background: #00000029;
@@ -118,9 +119,11 @@
   white-space: normal;
 }
 
-// .mat-btn-outline.active-button {
-//   background: #1b4ca1 !important;
-//   span {
-//     color: #fff !important;
-//   }
-// }
+.center-position {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+
+}

project/ws/app/src/lib/head/ui-admin-table/custom-self-registration/custom-self-registration.component.ts

@@ -61,12 +61,13 @@ export class CustomSelfRegistrationComponent implements OnInit, OnDestroy {
     }
   }
 
-  checkRegistrationStatus(endDateRegistration: string): boolean {
-    if (!endDateRegistration) return true
+  checkRegistrationStatus(): boolean {
+    // if (!endDateRegistration) return true
 
-    const endDate = new Date(endDateRegistration)
-    const today = new Date()
-    return today <= endDate
+    // const endDate = new Date(endDateRegistration)
+    // const today = new Date()
+    // return today <= endDate
+    return true
   }
 
   closeNaveBar() {

project/ws/app/src/lib/head/ui-admin-table/directory-list/directory-table.component.html

@@ -71,7 +71,7 @@
                                     <button mat-menu-item (click)="editOrganization(row)">Edit</button>
                                     <button mat-menu-item (click)="goToRoute('users', row)">Users</button>
                                     <button mat-menu-item (click)="goToRoute('rolesandaccess', row)">Roles &
-                                        Permissions</button>
+                                        Access</button>
                                     <button mat-menu-item (click)="goToRoute('mentormanage', row)">Mentor
                                         Management</button>
                                     <button mat-menu-item (click)="goToRoute('designation_master', row)">Manage

project/ws/app/src/lib/head/ui-admin-table/directory-list/directory-table.component.ts

@@ -271,7 +271,7 @@ export class UIDirectoryTableComponent implements OnInit, AfterViewInit, OnChang
     this.dialogRef.afterClosed().subscribe((result: any) => {
       if (result && result.hasOwnProperty('reviewImporting') && !result.reviewImporting) {
         this.customSelfRegistration = true
-        this.selfRegistrationData.title = 'Custom Self Registration_DAE'
+        this.selfRegistrationData.title = 'Custom Self Registration'
         this.selfRegistrationData.QRGenerated = false
         this.selfRegistrationData.openMode = 'edit'
         this.selfRegistrationData.orgId = row.id

project/ws/app/src/lib/head/ui-admin-table/interface/interfaces.ts

@@ -29,4 +29,10 @@ export interface ITableData {
 export interface CustomRegistrationQRCodeResponse {
   registrationLink: string,
   qrRegistrationLink: string
+}
+
+export interface IUploadedLogoresponse {
+  name: string
+  url: string
+  qrcodepath: string
 }

project/ws/app/src/lib/routes/create-mdo/routes/designation/components/designations/designations.component.html

@@ -93,5 +93,6 @@
 </ng-container>
 
 <ng-container *ngIf="isImportDesignation">
-  <ws-app-import-designation (closeComponent)="removeImportDesignationComp($event)"></ws-app-import-designation>
+  <ws-app-import-designation (closeComponent)="removeImportDesignationComp($event)"
+    [loader]="showLoader"></ws-app-import-designation>
 </ng-container>

project/ws/app/src/lib/routes/create-mdo/routes/designation/components/designations/designations.component.ts

@@ -31,7 +31,7 @@ export class DesignationsComponent implements OnInit {
   designationsList: any = []
   filteredDesignationsList: any = []
   tableData!: ITableData
-  showLoader = false
+  showLoader = true
   actionMenuItem: {
     name: string,
     icon: string,
@@ -114,6 +114,9 @@ export class DesignationsComponent implements OnInit {
       } else {
         this.createFreamwork()
       }
+      if (this.goToImportMaster) {
+        this.isImportDesignation = true
+      }
 
     })
     // this.getFrameworkInfo('0140788510336040962_odcs')
@@ -152,9 +155,9 @@ export class DesignationsComponent implements OnInit {
           this.showCreateLoader = false
           this.frameworkDetails = _.get(res, 'result.framework')
           this.designationsService.setFrameWorkInfo(this.frameworkDetails)
-          if (this.goToImportMaster) {
-            this.isImportDesignation = true
-          }
+          // if (this.goToImportMaster) {
+          //   this.isImportDesignation = true
+          // }
           this.getOrganisations()
         },
         error: () => {

project/ws/app/src/lib/routes/create-mdo/routes/designation/components/import-designation/import-designation.component.html

@@ -71,13 +71,20 @@
             </div>
           </div>
         </ng-container>
-        <ng-container *ngIf="igotDesignationsList.length === 0">
+        <ng-container *ngIf="igotDesignationsList.length === 0 && !loader">
           <div class=" w-full flex justify-center items-center">
             <div class="my-8 mx-4">
               <p>No designations found</p>
             </div>
           </div>
         </ng-container>
+        <ng-container *ngIf="loader">
+          <div class=" w-full flex justify-center items-center">
+            <div class="my-8 mx-4">
+              <mat-spinner class="display-inline-block mb-5" [diameter]="50" [strokeWidth]="3"></mat-spinner>
+            </div>
+          </div>
+        </ng-container>
       </div>
       <div class="flex flex-row justify-center">
         <mat-paginator [length]="deisgnationsCount" [pageSize]="pageSize" [pageSizeOptions]="[20,30,40]"