Merge pull request #1579 from josehernandezfintecheandomx/enhancement/file_uploads

Apply filter in the file uploads
This commit is contained in:
Adam Saghy
2022-11-25 15:46:23 +01:00
committed by GitHub
9 changed files with 49 additions and 35 deletions
@@ -1,11 +1,11 @@
<div class="container mat-typography" style="padding-bottom: 20px;"> <div class="container mat-typography">
<div class="mat-elevation-z2 surveyCont"> <div class="mat-elevation-z2 surveyCont">
<div class="surveySelect" fxLayout="row"> <div class="surveySelect" fxLayout="row">
<mat-label class="nameLabel">Survey Name</mat-label> <mat-label class="nameLabel">Survey Name</mat-label>
<mat-select class="surveyOption" (selectionChange)="onSurveyChange($event)"> <mat-select (selectionChange)="onSurveyChange($event)">
<mat-option *ngFor="let surveyData of allSurveyData" [value]="surveyData"> <mat-option *ngFor="let surveyData of allSurveyData" [value]="surveyData">
{{surveyData.name}} {{surveyData.name}}
</mat-option> </mat-option>
@@ -52,7 +52,7 @@
</div> </div>
<button mat-raised-button class="button-cancel" color="danger" [routerLink]="['../']">Cancel</button> <button mat-raised-button class="button-cancel" color="danger" [routerLink]="['../../general']">Cancel</button>
<button mat-raised-button class="button-submit" color="primary" (click)=submit()>Submit</button> <button mat-raised-button class="button-submit" color="primary" (click)=submit()>Submit</button>
</div> </div>
@@ -2,11 +2,11 @@
<div> <div>
<mifosx-file-upload flex="60%" (change)="onFileSelect($event)"></mifosx-file-upload> <mifosx-file-upload flex="60%" (change)="onFileSelect($event)" acceptFilter=".png,.jpeg,.jpg"></mifosx-file-upload>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-raised-button mat-dialog-close>Cancel</button> <button mat-raised-button mat-dialog-close>Cancel</button>
<button mat-raised-button color="primary" [disabled]="!image" [mat-dialog-close]="image">Confirm</button> <button mat-raised-button color="primary" [disabled]="!image" [mat-dialog-close]="image">Confirm</button>
</mat-dialog-actions> </mat-dialog-actions>
</div> </div>
@@ -2,11 +2,11 @@
<div> <div>
<mifosx-file-upload flex="60%" (change)="onFileSelect($event)"></mifosx-file-upload> <mifosx-file-upload flex="60%" (change)="onFileSelect($event)" acceptFilter=".png,.jpeg,.jpg"></mifosx-file-upload>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-raised-button mat-dialog-close>Cancel</button> <button mat-raised-button mat-dialog-close>Cancel</button>
<button mat-raised-button color="primary" [disabled]="!signature" [mat-dialog-close]="signature">Confirm</button> <button mat-raised-button color="primary" [disabled]="!signature" [mat-dialog-close]="signature">Confirm</button>
</mat-dialog-actions> </mat-dialog-actions>
</div> </div>
@@ -192,13 +192,15 @@
<h4 fxFlex="98%" class="mat-h4">Moratorium</h4> <h4 fxFlex="98%" class="mat-h4">Moratorium</h4>
<mat-checkbox fxFlex="23%" labelPosition="before" formControlName="graceOnPrincipalPayment" class="margin-v"> <mat-form-field fxFlex="48%">
On Principal Payment <mat-label>Grace on principal payment</mat-label>
</mat-checkbox> <input type="number" matInput formControlName="graceOnPrincipalPayment">
</mat-form-field>
<mat-checkbox fxFlex="23%" labelPosition="before" formControlName="graceOnInterestPayment" class="margin-v"> <mat-form-field fxFlex="48%">
On Interest Payment <mat-label>Grace on interest payment</mat-label>
</mat-checkbox> <input type="number" matInput formControlName="graceOnInterestPayment">
</mat-form-field>
<mat-checkbox fxFlex="23%" labelPosition="before" formControlName="graceOnArrearsAgeing" class="margin-v"> <mat-checkbox fxFlex="23%" labelPosition="before" formControlName="graceOnArrearsAgeing" class="margin-v">
On Arreas Aging On Arreas Aging
@@ -5,11 +5,11 @@
<mat-card fxLayout="column" fxLayoutGap="2%" fxFlex="50%"> <mat-card fxLayout="column" fxLayoutGap="2%" fxFlex="50%">
<h3><strong>{{bulkImport.name}} Template</strong></h3> <h3><strong>{{bulkImport.name}} Template</strong></h3>
<form [formGroup]="bulkImportForm"> <form [formGroup]="bulkImportForm">
<mat-card-content> <mat-card-content>
<div *ngIf="bulkImport.formFields >= 1"> <div *ngIf="bulkImport.formFields >= 1">
<mat-form-field fxFlex> <mat-form-field fxFlex>
<mat-label>Office</mat-label> <mat-label>Office</mat-label>
@@ -20,7 +20,7 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>
<div *ngIf="bulkImport.formFields >= 2"> <div *ngIf="bulkImport.formFields >= 2">
<mat-form-field fxFlex> <mat-form-field fxFlex>
<mat-label>Staff</mat-label> <mat-label>Staff</mat-label>
@@ -31,7 +31,7 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>
<div *ngIf="bulkImport.formFields === 3"> <div *ngIf="bulkImport.formFields === 3">
<mat-form-field fxFlex> <mat-form-field fxFlex>
<mat-label>Legal Form</mat-label> <mat-label>Legal Form</mat-label>
@@ -41,26 +41,26 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>
</mat-card-content> </mat-card-content>
</form> </form>
<div fxFlex="13%"> <div fxFlex="13%">
<button mat-raised-button color="primary" (click)="downloadTemplate()" *mifosxHasPermission="bulkImport.permission"> <button mat-raised-button color="primary" (click)="downloadTemplate()" *mifosxHasPermission="bulkImport.permission">
<i class="fa fa-download"></i>&nbsp;&nbsp;Download <i class="fa fa-download"></i>&nbsp;&nbsp;Download
</button> </button>
</div> </div>
</mat-card> </mat-card>
<mat-card fxLayout="column" fxLayoutGap="2%" fxFlex="50%"> <mat-card fxLayout="column" fxLayoutGap="2%" fxFlex="50%">
<h3><strong>{{bulkImport.name}}</strong></h3> <h3><strong>{{bulkImport.name}}</strong></h3>
<h4>Select Excel File</h4> <h4>Select Excel File</h4>
<mifosx-file-upload flex="75%" (change)="onFileSelect($event)"></mifosx-file-upload> <mifosx-file-upload flex="75%" (change)="onFileSelect($event)" acceptFilter=".xls,.xlsx"></mifosx-file-upload>
<mat-hint *ngIf="bulkImport.name === 'Clients'">Please retain the value Entity/Person in the filename.</mat-hint> <mat-hint *ngIf="bulkImport.name === 'Clients'">Please retain the value Entity/Person in the filename.</mat-hint>
@@ -71,7 +71,7 @@
</div> </div>
<div *ngIf="bulkImport.formFields >= 2" fxFlex class="cover"></div> <div *ngIf="bulkImport.formFields >= 2" fxFlex class="cover"></div>
</mat-card> </mat-card>
</div> </div>
@@ -146,5 +146,5 @@
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator> <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
</mat-card> </mat-card>
</div> </div>
@@ -27,7 +27,8 @@
<div fxLayout="row wrap" class="content"> <div fxLayout="row wrap" class="content">
<div fxFlex="100%" class="header"> <div fxFlex="100%" class="header">
<fa-icon icon="circle" size="lg" matTooltip="{{ user.status }}" matTooltipPosition="above"></fa-icon>&nbsp;&nbsp; <fa-icon icon="circle" size="lg" matTooltip="{{ user.status }}" matTooltipPosition="above"></fa-icon>
&nbsp;&nbsp;
ID: {{ user.id }} ID: {{ user.id }}
</div> </div>
@@ -115,6 +116,9 @@
</mat-card-content> </mat-card-content>
<mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
<button type="button" color="primary" mat-raised-button [routerLink]="['../../']">Back</button>
</mat-card-actions>
</mat-card> </mat-card>
</div> </div>
@@ -14,4 +14,4 @@
</div> </div>
<input type="file" #uploadFile (change)="onFileSelect($event)" [style.display]="'none'"> <input type="file" #uploadFile accept="{{acceptFilter}}" (change)="onFileSelect($event)" [style.display]="'none'">
@@ -1,5 +1,5 @@
/** Angular Imports */ /** Angular Imports */
import { Component, Input, Output, EventEmitter } from '@angular/core'; import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
/** /**
* Custom file upload component based on angular material. * Custom file upload component based on angular material.
@@ -9,15 +9,23 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
templateUrl: './file-upload.component.html', templateUrl: './file-upload.component.html',
styleUrls: ['./file-upload.component.scss'] styleUrls: ['./file-upload.component.scss']
}) })
export class FileUploadComponent { export class FileUploadComponent implements OnInit {
/** Form field flex dimension */ /** Form field flex dimension */
@Input() flex: any; @Input() flex: any;
@Input() acceptFilter: string;
/** Selected file name */ /** Selected file name */
fileName: File; fileName: File;
constructor() { } constructor() { }
ngOnInit() {
if (!this.acceptFilter) {
this.acceptFilter = '.xls,.xlsx,.pdf,.doc,.docx,.png,.jpeg,.jpg';
}
}
/** /**
* Sets the file name. * Sets the file name.
* @param {any} event File input change event. * @param {any} event File input change event.
@@ -39,14 +39,14 @@
<div fxLayoutGap="2%" fxFlex="22%" class="options-wrapper"> <div fxLayoutGap="2%" fxFlex="22%" class="options-wrapper">
<span *ngIf="isEditInProgress && (dateIndex == 0)"> <span *ngIf="isEditInProgress && (dateIndex == 0)">
<button mat-stroked-button color="primary" [disabled]="businessDateForm.pristine" (click)="submit()" <button mat-raised-button color="primary" [disabled]="businessDateForm.pristine" (click)="submit()"
*mifosxHasPermission="'UPDATE_BUSINESSDATE'"> *mifosxHasPermission="'UPDATE_BUSINESSDATE'">
Submit Submit
</button> </button>
<button mat-raised-button (click)="editInProgressToggle(0)">
Cancel
</button>
</span> </span>
<button mat-button *ngIf="isEditInProgress && (dateIndex == 0)" (click)="editInProgressToggle(0)">
Cancel
</button>
<button type="button" color="primary" *ngIf="!isEditInProgress" mat-icon-button matTooltip="Edit the Business Date" <button type="button" color="primary" *ngIf="!isEditInProgress" mat-icon-button matTooltip="Edit the Business Date"
matTooltipPosition="above" (click)="editInProgressToggle(0)"> matTooltipPosition="above" (click)="editInProgressToggle(0)">
<fa-icon icon="edit" size="lg"></fa-icon> <fa-icon icon="edit" size="lg"></fa-icon>