Merge pull request #189 from ramkumar-pacewisdom/review-flow

Review flow

projects/lib-shared-modules/src/lib/components/dialogs/dialog-popup/dialog-popup.component.html

@@ -11,7 +11,7 @@ <h2 class="text-white font-bold px-6">{{dialogueData?.header |translate}}</h2>
       </div>
     }
   }
-  <h3 class="text-sm font-bold p-4">{{dialogueData?.content |translate}}</h3>
+  <h3 class="text-sm font-bold p-4" *ngIf="dialogueData?.content">{{dialogueData?.content |translate}}</h3>
   @if(dialogueData.reportContent){
     <div class="pb-6 flex items-center">
       <mat-checkbox [(ngModel)]="reportContent"> Report content</mat-checkbox>
@@ -88,6 +88,7 @@ <h3 class="text-sm font-bold p-4">{{dialogueData?.content |translate}}</h3>
                 accept="png"
                 (change)="onFileSelected($event)"
                 class="hidden"
+                multiple
                 #fileInput
               />
               <button  type="button" class="flex justify-center items-center button border rounded bg-lightGreen text-sm text-white w-48 min-w-[192px] p-2"
@@ -96,8 +97,8 @@ <h3 class="text-sm font-bold p-4">{{dialogueData?.content |translate}}</h3>
                 <span>{{"UPLOAD_BUTTON" | translate}}</span>
               </button>
               <p class="text-xs flex items-center justify-center pt-1">{{ "UPLOAD_PNG_UPTO_50KB" | translate}}</p>
-              @if(selectedFile){
-                <p class="flex items-center justify-center text-red-500 text-xs pt-2">Selected File: {{ selectedFile.name }}</p>
+              @if(selectedFiles){
+                <p class="flex items-center justify-center text-red-500 text-xs pt-2">Selected File: {{ selectedFiles.name }}</p>
               }
               @if(errorMessage){
                 <p class="flex items-center justify-center text-red-500 text-xs pt-2">{{ errorMessage }}</p>
@@ -109,6 +110,10 @@ <h3 class="text-sm font-bold p-4">{{dialogueData?.content |translate}}</h3>
       </div>
     </div>
   }
+    <div class="m-3 flex justify-center">
+      <div  class=" w-[100%] sm:w-[80%]" #certificateContainer>
+      </div>
+    </div>
 
 </div>
 <div class="border-t"></div>

projects/lib-shared-modules/src/lib/components/dialogs/dialog-popup/dialog-popup.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, ElementRef, Inject, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatDialogModule,  MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
@@ -16,15 +16,27 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
   templateUrl: './dialog-popup.component.html',
   styleUrl: './dialog-popup.component.scss'
 })
-export class DialogPopupComponent {
+export class DialogPopupComponent implements OnInit {
   reportContent: boolean = false;
   title: string = '';
   errorMessage: string = '';
-  selectedFile: File | undefined;
+  selectedFiles: File | undefined;
+  @ViewChild('certificateContainer', { static: true }) certificateContainer: ElementRef | any;
 
   constructor(
-    public dialogRef: MatDialogRef<DialogPopupComponent>,
+    public dialogRef: MatDialogRef<DialogPopupComponent>, private renderer: Renderer2,
     @Inject(MAT_DIALOG_DATA)  public dialogueData: any) {
+      console.log(dialogueData)
+  }
+
+  ngOnInit(): void {
+    if(this.dialogueData.certificate) {
+      this.renderer.setProperty(
+        this.certificateContainer?.nativeElement,
+        'innerHTML',
+        this.dialogueData.certificate.nativeElement.innerHTML
+      );
+    }
   }
 
   onDragOver(event: DragEvent){
@@ -61,7 +73,7 @@ export class DialogPopupComponent {
       this.errorMessage = 'File size exceeds 50KB limit.';
       return;
     }
-    this.selectedFile = file;
+    this.selectedFiles = file;
     this.uploadFile(file);
   }
 
@@ -72,6 +84,7 @@ export class DialogPopupComponent {
   }
 
   onAttach() {
-    this.dialogRef.close({ file: this.selectedFile });
+    console.log(this.dialogueData)
+    this.dialogRef.close({ file: this.selectedFiles, additionalData: this.dialogueData});
   }
 }

projects/lib-shared-modules/src/lib/services/http-provider.service.ts

@@ -44,7 +44,7 @@ export class HttpProviderService {
     * Method to handle errors.
     * @param error : Error from API response
     */
-    private handleError(error: HttpErrorResponse): Observable<never> {
+    handleError(error: HttpErrorResponse): Observable<never> {
       let errorMessage = '';
       if (error.error instanceof ErrorEvent) {
         // Client-side error

projects/lib-shared-modules/src/lib/services/util/util.service.ts

@@ -52,6 +52,10 @@ export class UtilService {
     return this.httpService.post(config.url, config.payload)
   }
 
+  downloadFiles(url:string) {
+    return this.http.get(url, { responseType: 'text' })
+  }
+
   getCommentList(resourceId:string|number){
     const config = {
       url : `${this.Configuration.urlConFig.RESOURCE_URLS.COMMENT_LIST+"?resource_id="+resourceId}`,
@@ -74,14 +78,7 @@ export class UtilService {
       },
       "ref": "certificate"
     }
-    return this.httpService.post(this.Configuration.urlConFig.UPLOAD.SIGNED_URL,payload).pipe(
-      map((result: any) => {
-        return this.uploadSignedURL(file, result?.result?.certificate.files[0].url).subscribe(() => {
-          // this.imgData.isUploaded = true;
-          // this.createSession.myForm.value.image = result.result.filePath;
-          // this.onSubmit();
-        })
-      }))
+    return this.httpService.post(this.Configuration.urlConFig.UPLOAD.SIGNED_URL,payload);
   }
 
   uploadSignedURL(file: any, path: any) {

projects/self-creation-portal/src/assets/i18n/en.json

@@ -167,5 +167,6 @@
     "SIZE_SPECIFICATIION":"Size <= 50kb",
     "FILE_SPECIFICATION":"File type = PNG only",
     "FILE_SPECIFICATION_HEADER":"Make sure your file:",
-    "UPLOAD_PNG_UPTO_50KB":"upload PNG upto 50kb"
-}
+    "UPLOAD_PNG_UPTO_50KB":"upload PNG upto 50kb",
+    "VIEW_FULL_SCREEN":"View full screen"
+}