Skip to content

Commit

Permalink
MOSIP-30449 : Added Required Fields & Changed the Upload File Format
Browse files Browse the repository at this point in the history
  • Loading branch information
@GOKULRAJ136
GOKULRAJ136 committed Nov 29, 2023
1 parent 42a79eb commit 3cfd1a1
Show file tree
Hide file tree
Showing 2 changed files with 215 additions and 58 deletions.
205 changes: 157 additions & 48 deletions admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
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);
}
68 changes: 58 additions & 10 deletions admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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">
Expand Down

0 comments on commit 3cfd1a1

Please sign in to comment.