long profile issues

HRM.UI/ClientApp/src/app/core-hr/core-hr.module.ts

@@ -36,6 +36,7 @@ import { LabelModule } from "@progress/kendo-angular-label";
 import { FloatingLabelModule } from "@progress/kendo-angular-label";
 import { IconsModule } from "@progress/kendo-angular-icons";
 import { UploadModule } from '@progress/kendo-angular-upload';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
 
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { TabViewModule } from 'primeng/tabview';
@@ -131,7 +132,8 @@ import { HallOfFameUploaderComponent } from './hall-of-fame-uploader/hall-of-fam
         LabelModule,
         PanelModule,
         CardManagemnetModule,
-        UploadModule
+        UploadModule,
+        ButtonsModule
     ],
     declarations: [
         NationalityComponent,

HRM.UI/ClientApp/src/app/core-hr/employee-profile/employee-profile.component.ts

@@ -399,7 +399,7 @@ export class EmployeeProfileComponent implements OnInit {
         }
         if (nextTab.header.toLowerCase() == 'attachments') {
             debugger;
-            this.employeeService.getEmployeeAttachments(this.selectedEmployee.employeeID)
+            this.employeeService.getEmployeeAttachments(this.selectedEmployee != undefined ? this.selectedEmployee.employeeID : this.employeeService.hrEmployee.id)
                 .subscribe(
                     (resp) => {
                         this.attachments = resp;

HRM.UI/ClientApp/src/app/core-hr/employee-profile/general/general.component.html

@@ -207,11 +207,20 @@
                             </div>
                             <div class="p-col-12 p-md-12 p-lg-8">
                                 <input [(ngModel)]="hrEmployee.drivingLicenceNo" formControlName="drivingLicenseNo"
-                                    id="txtDrivingLicenseNo" pInputText style="width: 84%" type="text"
+                                    id="txtDrivingLicenseNo" pInputText style="width: 100%" type="text"
                                     [readonly]="!active">
-                                <button class="k-button k-primary" kendoButton icon="k-i-attachment-45 k-i-clip-45"
+                                     <!-- style="width: 84%" -->
+                                <!-- <button class="k-button k-primary" kendoButton icon="k-i-attachment-45 k-i-clip-45"
                                     style="width: 15.5%; vertical-align: bottom; padding: 16px;" [disabled]="!active"
-                                    (click)="popUpAttachment('DLN')"></button>
+                                    (click)="popUpAttachment('DLN')"></button> -->
+                                <kendo-upload #uploadDL
+                                    [autoUpload]="false"
+                                    [multiple]="false"
+                                    [saveUrl]="'noop'"
+                                    [removeUrl]="'noop'"
+                                    (select)="selectFileDrivingLicense($event)"
+                                    style="width: 100%;">
+                                </kendo-upload>
                             </div>
                             <div class="p-col-12 p-md-12 p-lg-4">
                                 <label for="txtPassportNo">Height in centemeter</label>
@@ -239,10 +248,19 @@
                                 <label for="empSignaturePhotoId">Signature</label>
                             </div>
                             <div class="p-col-12 p-md-12 p-lg-8">
-                                <input id="empSignaturePhotoId" pInputText style="width:84%" type="text" [readonly]="true">
+                                <input id="empSignaturePhotoId" pInputText style="width:100%" type="text" [readonly]="true">
-                            <button class="k-button k-primary" kendoButton icon="k-i-attachment-45 k-i-clip-45"
+                                 <!-- style="width: 84%" -->
+                            <!-- <button class="k-button k-primary" kendoButton icon="k-i-attachment-45 k-i-clip-45"
                                 style="width: 15.5%; vertical-align: bottom; padding: 16px;" [disabled]="!active"
-                                (click)="popUpAttachment('Signature')"></button>
+                                (click)="popUpAttachment('Signature')"></button> -->
+                                <kendo-upload #uploadSig
+                                    [autoUpload]="false"
+                                    [multiple]="false"
+                                    [saveUrl]="'noop'"
+                                    [removeUrl]="'noop'"
+                                    (select)="selectSignature($event)"
+                                    style="width: 100%;">
+                                </kendo-upload>
                             </div>
                         </div>
 
@@ -256,25 +274,54 @@
                             </div>
                             <div class="p-col-12 p-md-12 p-lg-8">
                                 <input [(ngModel)]="hrEmployee.nationalID" formControlName="nationalId"
-                                    id="txtNationalId" pInputText style="width:84%" type="text">
+                                    id="txtNationalId" pInputText type="text" style="width:100%"> 
+                                    <!-- style="width:84%" -->
+
                                     <!--  [readonly]="!active" -->
-                                <button class="k-button k-primary" kendoButton icon="k-i-attachment-45 k-i-clip-45"
+                                <!-- <button class="k-button k-primary" kendoButton icon="k-i-attachment-45 k-i-clip-45"
                                     style="width: 15.5%; vertical-align: bottom; padding: 16px;"
-                                    (click)="popUpAttachment('NID')" [disabled]="!active"></button>
+                                    (click)="popUpAttachment('NID')" [disabled]="!active"></button> -->
+
+
                                 <!-- <input [(ngModel)]="NIDFiles" (change)="selectFileNationalId($event)" type="file" pInputText
                                     style="width: 100%;padding: 5px;margin:5px 0;"> -->
                                     <!-- <kendo-upload [saveUrl]="uploadSaveUrl" [removeUrl]="uploadRemoveUrl">
                                     </kendo-upload> -->
+
+
+                                    <!-- <kendo-upload
+                                        [autoUpload]="false"
+                                        [saveUrl]="'noop'"
+                                        [removeUrl]="'noop'"
+                                        (select)="onFileSelect($event)">
+                                        </kendo-upload> -->
+                                <kendo-upload #uploadNID
+                                    [autoUpload]="false"
+                                    [multiple]="false"
+                                    [saveUrl]="'noop'"
+                                    [removeUrl]="'noop'"
+                                    (select)="selectFileNationalId($event)"
+                                    style="width: 100%;">
+                                </kendo-upload>
                             </div>
                             <div class="p-col-12 p-md-12 p-lg-4">
                                 <label for="txtPassportNo">Passport No</label>
                             </div>
                             <div class="p-col-12 p-md-12 p-lg-8">
                                 <input [(ngModel)]="hrEmployee.passportNo" formControlName="passportNo"
-                                    id="txtPassportNo" pInputText style="width:84%;" type="text" [readonly]="!active">
+                                    id="txtPassportNo" pInputText style="width:100%;" type="text" [readonly]="!active">
-                                <button class="k-button k-primary" kendoButton icon="k-i-attachment-45 k-i-clip-45"
+                                     <!-- style="width:84%;" -->
+                                <!-- <button class="k-button k-primary" kendoButton icon="k-i-attachment-45 k-i-clip-45"
                                     style="width: 15.5%; vertical-align: bottom; padding: 16px;" [disabled]="!active"
-                                    (click)="popUpAttachment('PNo')"></button>
+                                    (click)="popUpAttachment('PNo')"></button> -->
+                                        <kendo-upload #uploadPassPort
+                                            [autoUpload]="false"
+                                            [multiple]="false"
+                                            [saveUrl]="'noop'"
+                                            [removeUrl]="'noop'"
+                                            (select)="selectPassport($event)"
+                                            style="width: 100%;">
+                                        </kendo-upload>
                             </div>
                             <div class="p-col-12 p-md-12 p-lg-4">
                                 <label for="txtSpouseNameBangla">Spouse Name Bangla</label>
@@ -319,10 +366,20 @@
                             </div>
                             <div class="p-col-12 p-md-12 p-lg-8">
                                 <input [(ngModel)]="hrEmployee.tinNo" formControlName="tin" id="txtTin" pInputText 
-                                    style="width:84%" type="text" [readonly]="!active">
+                                    type="text" [readonly]="!active" style="width:100%">
-                                <button class="k-button k-primary" kendoButton icon="k-i-attachment-45 k-i-clip-45"
+                                    <!-- style="width:84%" -->
+                                <!-- <button class="k-button k-primary" kendoButton icon="k-i-attachment-45 k-i-clip-45"
                                     style="width: 15.5%; vertical-align: bottom; padding: 16px;" [disabled]="!active"
-                                    (click)="popUpAttachment('TIN')"></button>
+                                    (click)="popUpAttachment('TIN')"></button> -->
+                                    
+                                        <kendo-upload #uploadTIN
+                                            [autoUpload]="false"
+                                            [multiple]="false"
+                                            [saveUrl]="'noop'"
+                                            [removeUrl]="'noop'"
+                                            (select)="selectFileTin($event)"
+                                            style="width: 100%;">
+                                        </kendo-upload>
                             </div>
                             <div class="p-col-12 p-md-12 p-lg-4">
                                 <label for="dtpPassportIssueDate">Passport Issue Date</label>

HRM.UI/ClientApp/src/app/core-hr/employee-profile/general/general.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { DataTransferService } from '../../../data.transfer.service';
 import { EmployeeServices } from '../../../_services/employee/employee.service';
@@ -35,6 +35,7 @@ import { Thana } from '../../thana/thana';
 import { CardManagemnetModule } from 'src/app/attendance/access-card-management/card-management.module';
 import { Observable, EMPTY } from 'rxjs';
 import { tap, finalize, catchError } from 'rxjs/operators';
+import { FileInfo, UploadComponent } from '@progress/kendo-angular-upload';
 
 @Component({
     selector: 'app-general',
@@ -55,6 +56,13 @@ import { tap, finalize, catchError } from 'rxjs/operators';
             border-radius: 5px;
             border: 1px solid #52527A;
         }
+
+        ::ng-deep .k-upload .k-actions, .k-upload .k-action-buttons, .k-upload .k-columnmenu-actions {
+            display: none;
+        }
+        ::ng-deep .k-upload .k-dropzone {
+            padding: 3px 3px;
+        }
     `]
 })
 /* general component*/
@@ -63,8 +71,19 @@ export class GeneralComponent implements OnInit {
 
     @Input() public set isActive(isActive: boolean) {
         this.active = isActive;
+        this.uploadDL.clearFiles();
+        this.uploadSig.clearFiles();
+        this.uploadNID.clearFiles();
+        this.uploadPassPort.clearFiles();
+        this.uploadTIN.clearFiles();
     }
 
+    @ViewChild('uploadDL') uploadDL: UploadComponent;
+    @ViewChild('uploadSig') uploadSig: UploadComponent;
+    @ViewChild('uploadNID') uploadNID: UploadComponent;
+    @ViewChild('uploadPassPort') uploadPassPort: UploadComponent;
+    @ViewChild('uploadTIN') uploadTIN: UploadComponent;
+
     active: boolean = false;
 
     NIDFiles: any;
@@ -72,9 +91,14 @@ export class GeneralComponent implements OnInit {
     DLfiles: any;
     Passfiles: any;
     Sigfiles: any;
-    selectedNidFiles: any;
+    // selectedNidFiles: any;
-    selectedTinFiles?: FileList;
+    // selectedTinFiles?: FileList;
-    selectedDlFiles: any;
+    // selectedDlFiles: any;
+    selectedNidFiles: File[] = [];
+    selectedTinFiles: File[] = [];
+    selectedDlFiles: File[] = [];
+    selectedPassportFiles: File[] = [];
+    selectedSignature: File[] = [];
     departmentPicker: DynamicPicker;
     gradePicker: DynamicPicker;
     religionPicker: DynamicPicker;
@@ -499,6 +523,26 @@ export class GeneralComponent implements OnInit {
                 if (this.selectedDlFiles !== null && this.selectedDlFiles !== undefined && this.selectedDlFiles.length > 0) {
                     this.saveFile(this.hrEmployee.id, this.selectedDlFiles, enumEmpFileUploadType.DrivingLicense);
                 }
+                if (this.selectedPassportFiles !== null && this.selectedPassportFiles !== undefined && this.selectedPassportFiles.length > 0) {
+                    this.saveFile(this.hrEmployee.id, this.selectedPassportFiles, enumEmpFileUploadType.passport);
+                }
+                if (this.selectedSignature !== null && this.selectedSignature !== undefined && this.selectedSignature.length > 0) {
+                    const file: File | null = this.selectedSignature[0];
+                    this.currentFile = file;
+                    this.employeeService.uploadEmpFile(this.currentFile, this.hrEmployee.id, this.hrEmployee.id, enumEmpFileUploadType.signature).subscribe(
+                        (resp: any) => {
+                            this.empSigneture = this.sanitizer.bypassSecurityTrustResourceUrl(`data:image/png;base64, ${resp.body}`);
+                            // console.log(resp.body);
+                            //this.Sigfiles = resp;// this.sanitizer.bypassSecurityTrustResourceUrl(`data:image/png;base64, ${resp.body}`);
+                        },
+                        (err: any) => {
+                            this.notificationService.showError(err.error);
+                            this.currentFile = undefined;
+                        }, () => {
+                            this.signaturePopUp = false;
+                            this.notificationService.showSuccess("Signature Uploaded Successfully!")
+                        });
+                }
             }
         );
     }
@@ -535,7 +579,8 @@ export class GeneralComponent implements OnInit {
     saveFile(feferenceID: number, selectedFiles: any, type: enumEmpFileUploadType) {
         debugger;
         if (selectedFiles != undefined && selectedFiles.length > 0) {
-            const file: File | null = selectedFiles.item(0);
+            // const file: File | null = selectedFiles.item(0);
+            const file: File | null = selectedFiles[0];
             this.currentFile = file;
             this.employeeService.uploadEmpFile(file, this.employeeService.hrEmployee.id, feferenceID, type).subscribe(
                 (resp: any) => {
@@ -558,6 +603,10 @@ export class GeneralComponent implements OnInit {
             this.selectedNidFiles = undefined;
             this.NIDFiles = undefined;
         }
+        if (type === enumEmpFileUploadType.passport) {
+            this.selectedPassportFiles = undefined;
+            this.Passfiles = undefined;
+        }
     }
     private getSavePersonalInfoObservable(): Observable<HrEmployee> | null {
         debugger;
@@ -903,75 +952,135 @@ export class GeneralComponent implements OnInit {
     }
 
 
-    selectFileTin(event: any): void {
+    // selectFileTin(event: any): void {
-        this.selectedTinFiles = event.target.files;
+    //     this.selectedTinFiles = event.target.files;
-        const file = this.selectedTinFiles.item(0);
+    //     const file = this.selectedTinFiles.item(0);
-        // if (file.size > 500000) {
+    //     // if (file.size > 500000) {
-        //     this.notificationService.showError('File size can not be more than 500kb');
+    //     //     this.notificationService.showError('File size can not be more than 500kb');
-        //     this.selectedTinFiles = undefined;
+    //     //     this.selectedTinFiles = undefined;
+    //     //     return;
+    //     // }
+    // }
+
+    // selectFileNationalId(event: any): void {
+    //     this.selectedNidFiles = event.target.files;
+    //     const file = this.selectedNidFiles.item(0);
+    //     // if (file.size > 500000) {
+    //     //     this.notificationService.showError('File size can not be more than 500kb');
+    //     //     this.selectedNidFiles = undefined;
+    //     //     return;
+    //     // }
+    // }
+
+    // selectFileDrivingLicense(event: any): void {
+    //     this.selectedDlFiles = event.target.files;
+    //     const file = this.selectedDlFiles.item(0);
+    //     // if (file.size > 500000) {
+    //     //     this.notificationService.showError('File size can not be more than 500kb');
+    //     //     this.selectedDlFiles = undefined;
+    //     //     return;
+    //     // }
+    // }
+    // selectPassport(event: any): void {
+    //     this.selectedDlFiles = event.target.files;
+    //     const file = this.selectedDlFiles.item(0);
+    //     // if (file.size > 500000) {
+    //     //     this.notificationService.showError('File size can not be more than 500kb');
+    //     //     this.selectedDlFiles = undefined;
+    //     //     return;
+    //     // }
+    // }
+
+    // selectSignature(event: any): void {
+    //     if (this.hrEmployee.id == 0) {
+    //         this.notificationService.showWarning('select an employee to change the profile picture');
     //         return;
     //     }
-    }
 
-    selectFileNationalId(event: any): void {
+    //     if (confirm('Are you sure change the signature picture? selected picture will be store in database as well as will be used as signature picture.') == false) {
-        this.selectedNidFiles = event.target.files;
-        const file = this.selectedNidFiles.item(0);
-        // if (file.size > 500000) {
-        //     this.notificationService.showError('File size can not be more than 500kb');
-        //     this.selectedNidFiles = undefined;
     //         return;
     //     }
-    }
 
-    selectFileDrivingLicense(event: any): void {
+    //     this.selectedFiles = event.target.files;
-        this.selectedDlFiles = event.target.files;
+
-        const file = this.selectedDlFiles.item(0);
+    //     if (this.selectedFiles.length > 0) {
-        // if (file.size > 500000) {
+    //         const file: File | null = this.selectedFiles.item(0);
-        //     this.notificationService.showError('File size can not be more than 500kb');
+    //         this.currentFile = file;
-        //     this.selectedDlFiles = undefined;
+    //         this.employeeService.uploadEmpFile(this.currentFile, this.hrEmployee.id, this.hrEmployee.id, enumEmpFileUploadType.signature).subscribe(
+    //             (resp: any) => {
+    //                 this.empSigneture = this.sanitizer.bypassSecurityTrustResourceUrl(`data:image/png;base64, ${resp.body}`);
+    //                 // console.log(resp.body);
+    //                 //this.Sigfiles = resp;// this.sanitizer.bypassSecurityTrustResourceUrl(`data:image/png;base64, ${resp.body}`);
+    //             },
+    //             (err: any) => {
+    //                 this.notificationService.showError(err.error);
+    //                 this.currentFile = undefined;
+    //             }, () => {
+    //                 this.signaturePopUp = false;
+    //                 this.notificationService.showSuccess("Signature Uploaded Successfully!")
+    //             });
+    //         this.selectedFiles = undefined;
+    //     }
+    // }
+
+    selectFileTin(event: { files: FileInfo[] }): void {
+        this.selectedTinFiles = event.files
+            .map(f => f.rawFile)
+            .filter((f): f is File => f instanceof File);
+        const file = this.selectedTinFiles[0];
+    }
+    selectFileNationalId(event: { files: FileInfo[] }): void {
+        debugger;
+        // Extract File[] from FileInfo[]
+        this.selectedNidFiles = event.files
+            .map(f => f.rawFile)
+            .filter((f): f is File => f instanceof File);
+        const file = this.selectedNidFiles[0];
+    }
+    selectFileDrivingLicense(event: { files: FileInfo[] }): void {
+        this.selectedDlFiles = event.files
+            .map(f => f.rawFile)
+            .filter((f): f is File => f instanceof File);
+        // const file = this.selectedDlFiles[0];
+    }
+    selectPassport(event: { files: FileInfo[] }): void {
+        this.selectedPassportFiles = event.files
+            .map(f => f.rawFile)
+            .filter((f): f is File => f instanceof File);
+        // const file = this.selectedPassportFiles[0];
+    }
+    selectSignature(event: { files: FileInfo[] }): void {
+        // if (this.hrEmployee.id == 0) {
+        //     this.notificationService.showWarning('select an employee to change the profile picture');
         //     return;
         // }
-    }
+
-    selectPassport(event: any): void {
+        // if (confirm('Are you sure change the signature picture? selected picture will be store in database as well as will be used as signature picture.') == false) {
-        this.selectedDlFiles = event.target.files;
-        const file = this.selectedDlFiles.item(0);
-        // if (file.size > 500000) {
-        //     this.notificationService.showError('File size can not be more than 500kb');
-        //     this.selectedDlFiles = undefined;
         //     return;
         // }
-    }
 
-    selectSignature(event: any): void {
+        this.selectedSignature = event.files
-        if (this.hrEmployee.id == 0) {
+            .map(f => f.rawFile)
-            this.notificationService.showWarning('select an employee to change the profile picture');
+            .filter((f): f is File => f instanceof File);;
-            return;
-        }
 
-        if (confirm('Are you sure change the signature picture? selected picture will be store in database as well as will be used as signature picture.') == false) {
+        // if (this.selectedSignature.length > 0) {
-            return;
+        //     const file: File | null = this.selectedSignature[0];
-        }
+        //     this.currentFile = file;
-
+        //     this.employeeService.uploadEmpFile(this.currentFile, this.hrEmployee.id, this.hrEmployee.id, enumEmpFileUploadType.signature).subscribe(
-        this.selectedFiles = event.target.files;
+        //         (resp: any) => {
-
+        //             this.empSigneture = this.sanitizer.bypassSecurityTrustResourceUrl(`data:image/png;base64, ${resp.body}`);
-        if (this.selectedFiles.length > 0) {
+        //             // console.log(resp.body);
-            const file: File | null = this.selectedFiles.item(0);
+        //             //this.Sigfiles = resp;// this.sanitizer.bypassSecurityTrustResourceUrl(`data:image/png;base64, ${resp.body}`);
-            this.currentFile = file;
+        //         },
-            this.employeeService.uploadEmpFile(this.currentFile, this.hrEmployee.id, this.hrEmployee.id, enumEmpFileUploadType.signature).subscribe(
+        //         (err: any) => {
-                (resp: any) => {
+        //             this.notificationService.showError(err.error);
-                    this.empSigneture = this.sanitizer.bypassSecurityTrustResourceUrl(`data:image/png;base64, ${resp.body}`);
+        //             this.currentFile = undefined;
-                    // console.log(resp.body);
+        //         }, () => {
-                    //this.Sigfiles = resp;// this.sanitizer.bypassSecurityTrustResourceUrl(`data:image/png;base64, ${resp.body}`);
+        //             this.signaturePopUp = false;
-                },
+        //             this.notificationService.showSuccess("Signature Uploaded Successfully!")
-                (err: any) => {
+        //         });
-                    this.notificationService.showError(err.error);
+        //     this.selectedFiles = undefined;
-                    this.currentFile = undefined;
+        // }
-                }, () => {
-                    this.signaturePopUp = false;
-                    this.notificationService.showSuccess("Signature Uploaded Successfully!")
-                });
-            this.selectedFiles = undefined;
-        }
     }
 
     changePassword() {
@@ -1035,6 +1144,4 @@ export class GeneralComponent implements OnInit {
         this.passnoPopUp = false;
         this.signaturePopUp = false;
     }
-    // uploadSaveUrl = "saveUrl"; // should represent an actual API endpoint
-    // uploadRemoveUrl = "removeUrl"; // should represent an actual API endpoint
 }