From dc5d6517b1a009ff12afcdef098ca988cd2a83d0 Mon Sep 17 00:00:00 2001
From: GOKULRAJ136 <110164849+GOKULRAJ136@users.noreply.github.com>
Date: Wed, 29 Nov 2023 10:57:16 +0530
Subject: [PATCH] MOSIP-30449 : Added Required Fields & Changed the Upload File
 Format

Signed-off-by: GOKULRAJ136 <110164849+GOKULRAJ136@users.noreply.github.com>
---
 .../create/create.component.css               | 205 ++++++++++++++----
 .../create/create.component.html              |  68 +++++-
 2 files changed, 215 insertions(+), 58 deletions(-)

diff --git a/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.css b/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.css
index 131222e1..dc182a28 100644
--- a/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.css
+++ b/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.css
@@ -1,51 +1,160 @@
 /* No CSS *//*# sourceMappingURL=create.component.css.map */
 
 .browseInput {
-  background: rgba(253, 81, 140, 1);
-  border: 1px solid rgba(253, 81, 140, 1);
-  color: white;
-  padding: 8px;
-  border-radius: 2px;
-  box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
-  margin-left: 6px;
-}
-
-.browseInput[disabled] {
-  border: 1px solid rgba(253, 81, 140, 0.35);
-  color: rgba(253, 81, 140, 0.35);
-}
-
-.custom-file-input{
-    display: inline-block;
-	overflow: hidden;
-    position: relative;
-    padding:10px;
-}
-.custom-file-input input[type="file"]{
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    filter: alpha(opacity=0);
-    zoom: 1;  /* Fix for IE7 */
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 999;
-}
-.custom-file-input input[type="text"]{
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42) ! important;
-    border: 0px;
-    height: 32px;
-    margin-left: 1px;
-    width: 22.5rem;
-}
-.custom-file-input input[type="text"].addredborder{
-    border-bottom: 1px solid #f44336 ! important;
-    border: 0px;
-    height: 32px;
-    margin-left: 1px;
-    width: 22.5rem;
-}
-.mat-form-field{
-	padding:10px;
-}
\ No newline at end of file
+    background: rgba(253, 81, 140, 1);
+    border: 1px solid rgba(253, 81, 140, 1);
+    color: white;
+    padding: 8px;
+    border-radius: 2px;
+    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
+    margin-left: 6px;
+  }
+  
+  .browseInput[disabled] {
+    border: 1px solid rgba(253, 81, 140, 0.35);
+    color: rgba(253, 81, 140, 0.35);
+  }
+  
+  .custom-file-input{
+      display: inline-block;
+      overflow: hidden;
+      position: relative;
+      padding:10px;
+  }
+  .custom-file-input input[type="file"]{
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      filter: alpha(opacity=0);
+      zoom: 1;  /* Fix for IE7 */
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 999;
+  }
+  .custom-file-input input[type="text"]{
+      border-bottom: 1px solid rgba(0, 0, 0, 0.42) ! important;
+      border: 0px;
+      height: 32px;
+      margin-left: 1px;
+      width: 22.5rem;
+  }
+  .custom-file-input input[type="text"].addredborder{
+      border-bottom: 1px solid #f44336 ! important;
+      border: 0px;
+      height: 32px;
+      margin-left: 1px;
+      width: 22.5rem;
+  }
+  .mat-form-field{
+      padding:10px;
+  }
+  .custom-file-input span{
+      display:inline;
+      position:absolute; 
+      padding-top: 9px;
+  }
+  
+  .fileuploadcontainer {
+     height: 105px;
+     padding: 2rem;
+     border: dashed 1px #FF4081;
+     background-color: #f1b5c9;
+     position: relative;
+     display: flex;
+     border-radius: 5px;
+     justify-content: center;
+     align-items: center;
+     overflow: hidden;
+     margin-left: 8px;
+     margin-top: 10px;
+     width:25%;
+  }
+  .fileuploadcontainer input {
+     opacity: 0;
+     position: absolute;
+     z-index: 2;
+     width: 100%;
+     height: 100%;
+     top: 0;
+     left: 0;
+  }
+   .fileuploadcontainer label {
+      color: #FF4081;
+      width: 148px;
+      height: 44px;
+      border-radius: 5px;
+      background: #FFFFFF;
+      padding: 10px;
+      border: 1px solid #CCCCCC;
+      /*display: flex;*/
+      font-size: 12px;
+      font-weight: 200;
+  }
+  .fileuploadcontainer h3 {
+     font-size: 16px;
+     color: #FF4081;
+     padding-left: 3px;
+     padding-top: 7px;
+     font-weight: 600;
+  }
+  
+  .fileover {
+     animation: shake 1s;
+     animation-iteration-count: infinite;
+  }
+  .files-list {
+     margin-top: 1.5rem;
+  }
+   .files-list .single-file {
+     display: flex;
+     padding: 0.5rem;
+     justify-content: space-between;
+     align-items: center;
+     border: dashed 1px #FF4081;
+     margin-bottom: 1rem;
+     display: flex;
+     flex-grow: 1;
+     margin-left: 8px;
+     width:25%;
+  }
+  .files-list .single-file .preview {
+     display: flex;
+     margin-left: 0.5rem;
+     cursor: pointer;
+     align-self: flex-end;
+  }
+   .files-list .single-file .delete {
+     display: flex;
+     margin-left: 0.5rem;
+     cursor: pointer;
+     align-self: flex-end;
+  }
+   .files-list .single-file .name {
+     font-size: 14px;
+     font-weight: 500;
+     color: #353f4a;
+     margin: 0;
+  }
+   .files-list .single-file .size {
+     font-size: 12px;
+     font-weight: 500;
+     color: #a4a4a4;
+     margin: 0;
+     margin-bottom: 0.25rem;
+  }
+   .files-list .single-file .info {
+     width: 100%;
+  }
+  
+  .preview-heading{
+    color: #505050;
+    font-weight: 600;
+  }
+  
+  .labelfileupload {
+    font-size: 12px;
+    font-weight: 500;
+    margin-left: 8px;
+    color: rgba(0, 0, 0, 0.54);
+  }
\ No newline at end of file
diff --git a/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.html b/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.html
index fad55451..79da511f 100644
--- a/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.html
+++ b/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.html
@@ -19,7 +19,7 @@ <h3>{{labelanddatas.title |translate}}</h3>
             <mat-form-field>
               <mat-label>{{labelanddatas.operation | translate }}</mat-label>
               <mat-select
-                formControlName="operation" id="operation"
+                formControlName="operation" id="operation" required
               >
                 <mat-option
                   *ngFor="let data of labelanddatas.operationCtrl"
@@ -30,13 +30,13 @@ <h3>{{labelanddatas.title |translate}}</h3>
                 </mat-option>
               </mat-select>
               <mat-error *ngIf="uploadForm.controls.operation.touched">
-                {{'genericerror.fieldValidation' | translate}}
+                {{"genericerror.fieldValidation" | translate}}
               </mat-error>
             </mat-form-field>
             <div style="width:100%;display:inline">
-              <mat-form-field style="width:98% !important;">              
+              <mat-form-field style="width:96% !important;">              
                 <mat-label>{{labelanddatas.tableName | translate }}</mat-label>
-                <mat-select formControlName="tableName" id="tableName" (selectionChange)="captureDropDownValue($event)" >
+                <mat-select formControlName="tableName" id="tableName" (selectionChange)="captureDropDownValue($event)" required>
                   <mat-option
                     *ngFor="let data of labelanddatas.tableNames"
                     [id]="data.id"
@@ -49,17 +49,65 @@ <h3>{{labelanddatas.title |translate}}</h3>
                   {{'genericerror.fieldValidation' | translate}}
                 </mat-error>              
               </mat-form-field>                
-              <mat-label style="width:2%" *ngIf="showDownloadBtn" (click)="downloadExcel()"><img src="assets/images/download.png" height="18px" width="18px" style="cursor:pointer;" /></mat-label>
+              <mat-label style="width:2%" *ngIf="showDownloadBtn" (click)="downloadCSV()"><img src="assets/images/download-csv.png" height="18px" width="18px" style="cursor:pointer;" /></mat-label>
+              <mat-label style="width:2%" *ngIf="showDownloadBtn" (click)="downloadExcel()"><img src="assets/images/download-excel.png" height="18px" width="18px" style="cursor:pointer;" /></mat-label>
             </div>
-            <div class="custom-file-input">    
+            <!-- <div class="custom-file-input">    
               <input type="button" *ngIf="buttonalignment === 'rtl'" value="{{labelanddatas.chooseFile | translate }}" class="browseInput">           
-              <input type="file" accept=".csv" #fileInput (click)="onFileClick($event)" (change)="onFileSelect($event)" placeholder="Upload file..." />
-              <input type="text" id="fileName"  formControlName="fileName" placeholder="{{labelanddatas.uploadFile | translate }}">
-              <input type="button" *ngIf="buttonalignment === 'ltr'" value="{{labelanddatas.chooseFile | translate }}" class="browseInput">
+              <input type="file" accept=".xlsx, .xls, .csv" id="fileInput" #fileInput (click)="$event.target.value=null" (change)="onFileSelect($event)" placeholder="Upload file...*" >
+              <input type="text" id="fileName"  formControlName="fileName" placeholder="{{labelanddatas.uploadFile | translate }}"  >
+              <span style="color:#ff0000;font-size:12px;left: 114px;" class="required-annotation">*</span>
+              <input type="button" *ngIf="buttonalignment === 'ltr'" value="{{labelanddatas.chooseFile | translate }}" class="browseInput"> 
               <mat-error *ngIf="fileNameError">
                 {{'genericerror.fieldValidation' | translate}}
               </mat-error>  
-            </div>                       
+            </div> -->     
+            <label class="labelfileupload">{{'uploadcertificate.uploadYourFile' | translate}} <span style="color:red;">*</span></label>
+              <div class="fileuploadcontainer" appDnd (fileDropped)="onFileDropped($event)" id="custom-file-input">
+              <input (click)="$event.target.value=null" type="file" accept=".xlsx, .xls, .csv" #fileInput id="fileInput" (change)="onFileSelect($event)"/>
+              <label style="margin-right: 1rem;display: flex;" for="fileInput">
+                <svg id="upload_icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24.042"
+                  viewBox="0 0 24 24.042">
+                  <g id="Group_13" data-name="Group 13" transform="translate(3 2.504)">
+                    <path id="Path_988" data-name="Path 988"
+                      d="M13,11.337l2.59,2.585L17,12.509,12,7.5,7,12.509l1.41,1.412L11,11.337v9.687h2Z"
+                      transform="translate(-3 -7.5)" fill="#FF4081" />
+                    <path id="Path_2004" data-name="Path 2004"
+                      d="M19,3v7.012H5V3H3v7.012a2.008,2.008,0,0,0,2,2H19a2.008,2.008,0,0,0,2-2V3Z"
+                      transform="translate(-3 6.517)" fill="#FF4081" />
+                  </g>
+                  <path id="Path_989" data-name="Path 989" d="M0,24.042H24V0H0Z" fill="none" />
+                </svg>
+                <span style="margin-top: 4px;padding-left: 5px; font-size: 14px; font-weight: 600;">{{'uploadcertificate.chooseFile' | translate}}</span>
+              </label>
+              </div>  
+              <div class="files-list">
+              <div class="single-file" *ngIf="uploadForm.controls.fileName.value">
+                <div class="file-icon" style="width: 50px">
+                  <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 58 58"
+                    style="enable-background:new 0 0 58 58;" xml:space="preserve">
+                    <polygon style="fill:#EDEADA;" points="51.5,14 37.5,0 6.5,0 6.5,58 51.5,58 " />
+                    <g>
+                      <path style="fill:#CEC9AE;"
+                        d="M16.5,23h25c0.552,0,1-0.447,1-1s-0.448-1-1-1h-25c-0.552,0-1,0.447-1,1S15.948,23,16.5,23z" />
+                      <path style="fill:#CEC9AE;"
+                        d="M16.5,15h10c0.552,0,1-0.447,1-1s-0.448-1-1-1h-10c-0.552,0-1,0.447-1,1S15.948,15,16.5,15z" />
+                      <path style="fill:#CEC9AE;"
+                        d="M41.5,29h-25c-0.552,0-1,0.447-1,1s0.448,1,1,1h25c0.552,0,1-0.447,1-1S42.052,29,41.5,29z" />
+                      <path style="fill:#CEC9AE;"
+                        d="M41.5,37h-25c-0.552,0-1,0.447-1,1s0.448,1,1,1h25c0.552,0,1-0.447,1-1S42.052,37,41.5,37z" />
+                      <path style="fill:#CEC9AE;"
+                        d="M41.5,45h-25c-0.552,0-1,0.447-1,1s0.448,1,1,1h25c0.552,0,1-0.447,1-1S42.052,45,41.5,45z" />
+                    </g>
+                    <polygon style="fill:#CEC9AE;" points="37.5,0 37.5,14 51.5,14 " />
+                  </svg>
+                </div>
+                <div class="info">
+                  <h4 class="name">{{uploadForm.controls.fileName.value}}</h4>
+                </div>
+              </div>
+            </div>                  
           </div> 
         </mat-card-content>
         <mat-card-actions class="action-buttons">