Merge pull request #471 from SwethaKrish4/mydevelop

MOSIP-28468: Device Image field

src/app/app.constants.ts

@@ -49,7 +49,6 @@ export const SBI_CONTROLS = [
   'sbiPurpose',
   'deviceType',
   'deviceSubType',
-  'deviceImages',
   'sbiHash',
   'websiteUrl',
 ];

src/app/core/components/dialog/dialog.component.css

@@ -49,6 +49,31 @@ width: 300px;
 .saveBt {
     margin-left: 330px;
 }
+button[mat-raised-button] {
+  margin-top: 10px;
+}
+.preview {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 15px;
+}
+img {
+  max-width: 100px;
+  max-height: 100px;
+  margin: 5px;
+}
+.progressBar {
+  margin-top: 5px;
+}
+.maximumExceededMessage {
+  color: red;
+  margin-top: 5px;
+}
+.uploadButtonContainer {
+  position: relative;
+  float: right;
+  margin-top: 15px;
+}
 @media only screen and (max-width: 426px) {
     .fieldWrapper {
       width: 340px;

src/app/core/components/dialog/dialog.component.html

@@ -38,7 +38,7 @@ <h2 mat-dialog-title class="mat-dialog-title">{{"projectDashboard.title"|transla
     <form [formGroup]="projectForm" *ngIf="dataLoaded">
         <div class="formContainer">
             <span *ngIf="projectForm.controls['projectType']?.value == 'SBI'">
-                <div class="fieldWrapper">
+                <!-- <div class="fieldWrapper">
                     <span class="fieldLabel">
                         <mat-label>{{"viewProject.deviceImages"|translate}}
                         </mat-label>
@@ -55,7 +55,7 @@ <h2 mat-dialog-title class="mat-dialog-title">{{"projectDashboard.title"|transla
                             </mat-error>
                         </mat-form-field>
                     </span>
-                </div>
+                </div> -->
                 <div class="fieldWrapper">
                     <span class="fieldLabel">
                         <mat-label>{{"viewProject.sbiHash"|translate}}
@@ -143,4 +143,28 @@ <h2 mat-dialog-title class="mat-dialog-title">{{"projectDashboard.title"|transla
         </button>
     </div>
 </div>
-</div>
+<div *ngIf="input.case === 'UPLOAD_DEVICE_IMAGES'" class="uploadImg">
+    <h2 mat-dialog-title class="mat-dialog-title">Upload Device Images</h2>
+    <div mat-dialog-content>
+        <input type="file" accept="image/*" (change)="onFileSelect($event)" #fileInput hidden multiple>
+        <div *ngIf="selectedImages.length < 5">
+          <button mat-raised-button color="accent" (click)="fileInput.click()">Add Images</button>
+        </div>
+        <div *ngIf="selectedImages.length > 5">
+          <p class = "maximumExceededMessage">Maximum 5 images can be added.</p>
+        </div>
+        <div *ngFor="let image of selectedImages">
+          <p>{{ image.name }}</p>
+          <mat-progress-bar mode="determinate" [value]="progress" class="progressBar"></mat-progress-bar>
+        </div>
+        <div *ngIf="selectedImages.length > 0" class="uploadButtonContainer">
+          <button mat-flat-button color="accent" (click)="uploadImages()" class="uploadBt">Save</button>
+        </div>
+        <div *ngIf="selectedImages.length > 0" role="preview" class="preview">
+          <div *ngFor="let image of selectedImages">
+            <img [src]="getPreviewUrl(image)" alt="{{ image.name }}">
+          </div>
+        </div>
+    </div>   
+</div>
+</div>

src/app/core/components/dialog/dialog.component.ts

@@ -15,6 +15,7 @@ import Utils from 'src/app/app.utils';
 import { SbiProjectModel } from '../../models/sbi-project';
 import { AbisProjectModel } from '../../models/abis-project';
 import { SdkProjectModel } from '../../models/sdk-project';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-dialog',
@@ -33,14 +34,22 @@ export class DialogComponent implements OnInit {
   subscriptions: Subscription[] = [];
   resourceBundleJson: any = {};
   dataLoaded = false;
+  selectedImages: File[] = [];
+  progress = 0;
+  deviceImage1: string = '';
+  deviceImage2: string = '';
+  deviceImage3: string = '';
+  deviceImage4: string = '';
+  deviceImage5: string = '';
   constructor(
     private router: Router,
     private dialogRef: MatDialogRef<DialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: any,
     private dataService: DataService,
     private dialog: MatDialog,
     private translate: TranslateService,
-    private userProfileService: UserProfileService
+    private userProfileService: UserProfileService,
+    private sanitizer: DomSanitizer
   ) {
     dialogRef.disableClose = true;
 
@@ -85,13 +94,13 @@ export class DialogComponent implements OnInit {
         new FormControl({
           value: '',
           disabled:
-            controlId == 'deviceImages' || controlId == 'sbiHash' || controlId == 'websiteUrl' ? false : true,
+            controlId == 'sbiHash' || controlId == 'websiteUrl' ? false : true,
         })
       );
     });
     appConstants.SBI_CONTROLS.forEach((controlId) => {
       this.projectForm.controls[controlId].setValidators(Validators.required);
-      if (controlId == 'deviceImages' || controlId == 'sbiHash' || controlId == 'websiteUrl') {
+      if (controlId == 'sbiHash' || controlId == 'websiteUrl') {
         this.projectForm.controls[controlId].setValidators([
           Validators.required,
           this.toBeAddedPatternValidator,
@@ -226,9 +235,6 @@ export class DialogComponent implements OnInit {
       this.projectForm.controls['deviceSubType'].setValue(
         this.projectFormData.deviceSubType
       );
-      this.projectForm.controls['deviceImages'].setValue(
-        this.projectFormData.deviceImages
-      );
       this.projectForm.controls['sbiHash'].setValue(
         this.projectFormData.sbiHash
       );
@@ -316,7 +322,11 @@ export class DialogComponent implements OnInit {
           purpose: this.projectForm.controls['sbiPurpose'].value,
           deviceType: this.projectForm.controls['deviceType'].value,
           deviceSubType: this.projectForm.controls['deviceSubType'].value,
-          deviceImages: this.projectForm.controls['deviceImages'].value,
+          deviceImage1: this.deviceImage1,
+          deviceImage2: this.deviceImage2,
+          deviceImage3: this.deviceImage3,
+          deviceImage4: this.deviceImage4,
+          deviceImage5: this.deviceImage5,
           sbiHash: this.projectForm.controls['sbiHash'].value,
           websiteUrl: this.projectForm.controls['websiteUrl'].value,
         };
@@ -446,4 +456,46 @@ export class DialogComponent implements OnInit {
     this.dialogRef.close('');
     await this.router.navigate([`toolkit/project/${this.projectType}/${this.projectId}`]);
   }
+
+  onFileSelect(event: Event): void {
+    const files = (event.target as HTMLInputElement).files;
+    if (files) {
+      const images = Array.from(files).filter((file) => file.type.startsWith('image/'));
+      if (this.selectedImages.length + images.length <= 5) {
+        this.selectedImages.push(...images);
+      } else {
+        Utils.showErrorMessage(this.resourceBundleJson, '', this.dialog, 'More than five photos cannot be added');
+      }
+    }
+  }
+
+  async getProgress(image: File) {
+    this.progress = 0;
+    this.simulateSaveProgress();
+  }
+
+  simulateSaveProgress() {
+    const interval = setInterval(() => {
+      this.progress += 25;
+      if (this.progress >= 100) {
+        clearInterval(interval);
+      }
+    }, 500);
+  }
+
+  getSelectedImageNames(): string {
+    return this.selectedImages.map((image) => image.name).join(', ');
+  }
+
+  getPreviewUrl(image: File): SafeUrl {
+    return this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(image));
+  }
+
+  uploadImages() {
+    const fileNames: string[] = [];
+    for (let i = 0; i < this.selectedImages.length; i++) {
+      fileNames.push(this.selectedImages[i].name);
+    }
+    this.dialogRef.close(fileNames);
+  }
 }

src/app/core/models/sbi-project.ts

@@ -7,7 +7,11 @@ export class SbiProjectModel {
     public purpose: string,
     public deviceType: string,
     public deviceSubType: string,
-    public deviceImages: string,
+    public deviceImage1: string,
+    public deviceImage2: string,
+    public deviceImage3: string,
+    public deviceImage4: string,
+    public deviceImage5: string,
     public sbiHash: string,
     public websiteUrl: string
   ) {}

src/app/features/dashboard/projects-dashboard/projects-dashboard.component.ts

@@ -156,10 +156,9 @@ export class ProjectsDashboardComponent implements OnInit {
     }
     if (project.projectType == appConstants.SBI) {
       await this.getSbiProjectDetails(project.id);
-      const deviceImages = this.projectFormData.deviceImages;
       const sbiHash = this.projectFormData.sbiHash;
       const websiteUrl = this.projectFormData.websiteUrl;
-      if (deviceImages == 'To_Be_Added' || sbiHash == 'To_Be_Added' || websiteUrl == 'To_Be_Added') {
+      if (sbiHash == 'To_Be_Added' || websiteUrl == 'To_Be_Added') {
           await this.showUpdateProject(project.id, project.projectType);
       } else {
         await this.router.navigate([

src/app/features/project/add-project/add-project.component.html

@@ -347,18 +347,14 @@
                 </div>
                 <div class="deviceImgFieldWrapper">
                     <span class="fieldLabel">
-                        <mat-label>{{ "addProject.deviceImages" | translate }}
-                            <span class="required-annotation">*</span>
-                        </mat-label>
+                      <mat-label>{{ "addProject.deviceImages" | translate }}
+                        <span class="required-annotation">*</span>
+                      </mat-label>
                     </span>
                     <span class="deviceImgFieldContainer">
-                        <mat-form-field appearance="legacy" class="deviceImgFieldContainerBox">
-                            <mat-label>{{ "addProject.deviceImages" | translate }}</mat-label>
-                            <input matInput formControlName="deviceImages" #keyboardRef #input />
-                            <mat-error *ngIf="projectForm.controls['deviceImages'].hasError('required')">
-                                {{"addProject.deviceImagesIsRequired"|translate}}
-                            </mat-error>
-                        </mat-form-field>
+                      <button mat-flat-button color="accent" (click)="clickOnButton()" class="fileuploadbtn">
+                        {{"addProject.upload"|translate}}
+                      </button>
                     </span>
                 </div>
             </div>
@@ -585,7 +581,7 @@
         <mat-icon>home</mat-icon>
         {{"addProject.dashboard"|translate}}
     </button>
-    <button mat-flat-button color="accent" [disabled]="!projectForm.valid" (click)="saveProject()" class="add-button">
+    <button mat-flat-button color="accent" [disabled]="dataSubmitted" (click)="saveProject()" class="add-button">
         <mat-icon>save</mat-icon>
         {{"addProject.saveProject"|translate}}
     </button>

src/app/features/project/add-project/add-project.component.ts

@@ -15,6 +15,7 @@ import { UserProfileService } from 'src/app/core/services/user-profile.service';
 import { BreadcrumbService } from 'xng-breadcrumb';
 import { AbisProjectModel } from 'src/app/core/models/abis-project';
 import { AppConfigService } from 'src/app/app-config.service';
+import { DialogComponent } from 'src/app/core/components/dialog/dialog.component';
 
 @Component({
   selector: 'app-project',
@@ -35,6 +36,12 @@ export class AddProjectComponent implements OnInit {
   dataSubmitted = false;
   isAbisPartner = this.appConfigService.getConfig()['abisPartnerType'] == "ABIS_PARTNER" ? true : false;
   invalidPartnerType: string = '';
+  deviceImage1: any = null;
+  deviceImage2: any = null;
+  deviceImage3: any = null;
+  deviceImage4: any = null;
+  deviceImage5: any = null;
+
 
   constructor(
     public authService: AuthService,
@@ -210,7 +217,11 @@ export class AddProjectComponent implements OnInit {
           purpose: this.projectForm.controls['sbiPurpose'].value,
           deviceType: this.projectForm.controls['deviceType'].value,
           deviceSubType: this.projectForm.controls['deviceSubType'].value,
-          deviceImages: this.projectForm.controls['deviceImages'].value,
+          deviceImage1: this.deviceImage1,
+          deviceImage2: this.deviceImage2,
+          deviceImage3: this.deviceImage3,
+          deviceImage4: this.deviceImage4,
+          deviceImage5: this.deviceImage5,
           sbiHash: this.projectForm.controls['sbiHash'].value,
           websiteUrl: this.projectForm.controls['websiteUrl'].value
         };
@@ -371,4 +382,40 @@ export class AddProjectComponent implements OnInit {
   ngOnDestroy(): void {
     this.subscriptions.forEach((subscription) => subscription.unsubscribe());
   }
+
+  clickOnButton() {
+    this.allControls.forEach((controlId) => {
+      this.projectForm.controls[controlId].markAsTouched();
+    });
+    if (this.projectForm.valid) {
+      const dialogRef = this.dialog.open(DialogComponent, {
+        width: '80%',
+        data: {
+          case: "UPLOAD_DEVICE_IMAGES",
+        },
+      });
+
+      dialogRef.afterClosed().subscribe((fileNames: string[]) => {
+        if (fileNames && fileNames.length > 0) {
+          for (let i = 0 ; i < fileNames.length; i++) {
+            if (i == 0) {
+              this.deviceImage1 = fileNames[i];
+            }
+            if (i == 1) {
+              this.deviceImage2 = fileNames[i];
+            }
+            if (i == 2) {
+              this.deviceImage3 = fileNames[i];
+            }
+            if (i == 3) {
+              this.deviceImage4 = fileNames[i];
+            }
+            if (i == 4) {
+              this.deviceImage5 = fileNames[i];
+            }
+          }
+        }
+      });
+    }
+  }
 }

src/app/features/project/view-project/view-project.component.html

@@ -321,7 +321,7 @@
                                 </span>
                             </div>
                         </div>
-                        <div class="deviceImgFieldWrapper">
+                        <!-- <div class="deviceImgFieldWrapper">
                             <span class="fieldLabel">
                                 <mat-label>{{"viewProject.deviceImages"|translate}}
                                 </mat-label>
@@ -335,7 +335,7 @@
                                     </mat-error>
                                 </mat-form-field>
                             </span>
-                        </div>
+                        </div> -->
                     </span>
                     <span *ngIf="projectForm.controls['projectType']?.value == 'ABIS'">
                         <div class="rowContainer">

src/app/features/project/view-project/view-project.component.ts

@@ -261,9 +261,6 @@ export class ViewProjectComponent implements OnInit {
       this.projectForm.controls['deviceSubType'].setValue(
         this.projectFormData.deviceSubType
       );
-      this.projectForm.controls['deviceImages'].setValue(
-        this.projectFormData.deviceImages
-      );
       this.projectForm.controls['sbiHash'].setValue(
         this.projectFormData.sbiHash
       );

src/assets/i18n/ara.json

@@ -111,7 +111,8 @@
 		"sdkHash": "تجزئة SDK:",
 		"sdkHashIsRequired": "مطلوب تجزئة SDK",
 		"abisHash": "تجزئة ABIS:",
-		"abisHashIsRequired": "مطلوب تجزئة ABIS"
+		"abisHashIsRequired": "مطلوب تجزئة ABIS",
+		"upload": "رفع"
 	},
 	"addTestData": {
 		"name": "اسم",

src/assets/i18n/eng.json

@@ -111,7 +111,8 @@
 		"sdkHash": "SDK Hash:",
 		"sdkHashIsRequired": "SDK Hash is required",
 		"abisHash": "ABIS Hash:",
-		"abisHashIsRequired": "ABIS Hash is required"
+		"abisHashIsRequired": "ABIS Hash is required",
+		"upload": "Upload"
 	},
 	"addTestData": {
 		"name": "Name:",

src/assets/i18n/fra.json

@@ -111,7 +111,8 @@
 		"sdkHash": "Hachage SDK:",
 		"sdkHashIsRequired": "Le hachage SDK est requis",
 		"abisHash": "Hachage ABIS:",
-		"abisHashIsRequired": "Le hachage ABIS est requis"
+		"abisHashIsRequired": "Le hachage ABIS est requis",
+		"upload": "Télécharger"
 	},
 	"addTestData": {
 		"name": "Nom",