fix: Diverse problems in the Organization section
This fixes a number of layout issues in the Organization section, replaces "Advanced Search" in the path by "Fund Mapping", adds a missing translation and fixes a broken link on the Organization page itself. FIXES: WEB-227, WEB-226, WEB-225, WEB-224
This commit is contained in:
Felix van Hove
@@ -1,190 +1,192 @@
|
||||
<mat-card class="container" *ngIf="!isCollapsed">
|
||||
<form [formGroup]="fundMappingForm" (ngSubmit)="submit()">
|
||||
<div class="layout-row-wrap gap-2percent responsive-column align-start-center">
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Loan Status' | translate }}</mat-label>
|
||||
<mat-select formControlName="loanStatus" multiple>
|
||||
<mat-option value="all">{{ 'labels.inputs.All' | translate }}</mat-option>
|
||||
<mat-option value="active">{{ 'labels.inputs.Active' | translate }}</mat-option>
|
||||
<mat-option value="closed">{{ 'labels.inputs.Overpaid' | translate }}</mat-option>
|
||||
<mat-option value="overpaid">{{ 'labels.inputs.Closed (obligations met)' | translate }}</mat-option>
|
||||
<mat-option value="writeoff">{{ 'labels.inputs.Closed (written-off)' | translate }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<span class="flex-48 hide-lt-md"></span>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Product' | translate }}</mat-label>
|
||||
<mat-select formControlName="loanProducts" multiple>
|
||||
<mat-option *ngFor="let product of advanceSearchTemplate.loanProducts" [value]="product.id">
|
||||
{{ product.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
||||
<mat-select formControlName="offices" multiple>
|
||||
<mat-option *ngFor="let office of advanceSearchTemplate.offices" [value]="office.id">
|
||||
{{ office.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Date Type' | translate }}</mat-label>
|
||||
<mat-select required formControlName="loanDateOption">
|
||||
<mat-option value="approvalDate">{{ 'labels.inputs.Approval Date' | translate }}</mat-option>
|
||||
<mat-option value="createdDate">{{ 'labels.inputs.Creation Date' | translate }}</mat-option>
|
||||
<mat-option value="disbursalDate">{{ 'labels.inputs.Disbursement Date' | translate }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-fill flex-31" (click)="fromDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="fromDatePicker"
|
||||
formControlName="loanFromDate"
|
||||
required
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #fromDatePicker></mat-datepicker>
|
||||
<mat-error *ngIf="fundMappingForm.controls.loanFromDate.hasError('required')">
|
||||
{{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-fill flex-31" (click)="toDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="toDatePicker"
|
||||
formControlName="loanToDate"
|
||||
required
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #toDatePicker></mat-datepicker>
|
||||
<mat-error *ngIf="fundMappingForm.controls.loanToDate.hasError('required')">
|
||||
{{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-checkbox
|
||||
labelPosition="before"
|
||||
formControlName="includeOutStandingAmountPercentage"
|
||||
class="margin-b flex-73"
|
||||
>
|
||||
{{ 'labels.inputs.Loan Outstanding Percentage' | translate }}
|
||||
</mat-checkbox>
|
||||
|
||||
<div
|
||||
*ngIf="fundMappingForm.value.includeOutStandingAmountPercentage"
|
||||
class="flex-fill layout-row-wrap gap-2percent layout-xs-column"
|
||||
>
|
||||
<mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentageCondition')" class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
|
||||
<mat-select required formControlName="outStandingAmountPercentageCondition">
|
||||
<mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
|
||||
<mat-option value="<="><=</mat-option>
|
||||
<mat-option value=">=">>=</mat-option>
|
||||
<mat-option value="<"><</mat-option>
|
||||
<mat-option value=">">></mat-option>
|
||||
<mat-option value="=">=</mat-option>
|
||||
<mat-card-content>
|
||||
<div class="layout-row-wrap gap-2percent responsive-column align-start-center">
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Loan Status' | translate }}</mat-label>
|
||||
<mat-select formControlName="loanStatus" multiple>
|
||||
<mat-option value="all">{{ 'labels.inputs.All' | translate }}</mat-option>
|
||||
<mat-option value="active">{{ 'labels.inputs.Active' | translate }}</mat-option>
|
||||
<mat-option value="closed">{{ 'labels.inputs.Overpaid' | translate }}</mat-option>
|
||||
<mat-option value="overpaid">{{ 'labels.inputs.Closed (obligations met)' | translate }}</mat-option>
|
||||
<mat-option value="writeoff">{{ 'labels.inputs.Closed (written-off)' | translate }}</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentageCondition.hasError('required')">
|
||||
{{ 'labels.inputs.Comparison Condition' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="fundMappingForm.contains('minOutStandingAmountPercentage')" class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
|
||||
<input type="number" matInput required formControlName="minOutStandingAmountPercentage" />
|
||||
<mat-error *ngIf="fundMappingForm.controls.minOutStandingAmountPercentage.hasError('required')">
|
||||
{{ 'labels.inputs.Minimum Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<span class="flex-48 hide-lt-md"></span>
|
||||
|
||||
<mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentage')" class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
|
||||
<input type="number" matInput required formControlName="outStandingAmountPercentage" />
|
||||
<mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentage.hasError('required')">
|
||||
{{ 'labels.inputs.Comparison Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="fundMappingForm.contains('maxOutStandingAmountPercentage')" class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
|
||||
<input type="number" matInput required formControlName="maxOutStandingAmountPercentage" />
|
||||
<mat-error *ngIf="fundMappingForm.controls.maxOutStandingAmountPercentage.hasError('required')">
|
||||
{{ 'labels.inputs.Maximum Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<mat-checkbox class="flex-73 margin-b" labelPosition="before" formControlName="includeOutstandingAmount">
|
||||
{{ 'labels.inputs.Loan Outstanding Amount' | translate }}
|
||||
</mat-checkbox>
|
||||
|
||||
<div
|
||||
*ngIf="fundMappingForm.value.includeOutstandingAmount"
|
||||
class="flex-fill layout-row-wrap gap-2percent responsive-column"
|
||||
>
|
||||
<mat-form-field *ngIf="fundMappingForm.contains('outstandingAmountCondition')" class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
|
||||
<mat-select required formControlName="outstandingAmountCondition">
|
||||
<mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
|
||||
<mat-option value="<="><=</mat-option>
|
||||
<mat-option value=">=">>=</mat-option>
|
||||
<mat-option value="<"><</mat-option>
|
||||
<mat-option value=">">></mat-option>
|
||||
<mat-option value="=">=</mat-option>
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Product' | translate }}</mat-label>
|
||||
<mat-select formControlName="loanProducts" multiple>
|
||||
<mat-option *ngFor="let product of advanceSearchTemplate.loanProducts" [value]="product.id">
|
||||
{{ product.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="fundMappingForm.controls.outstandingAmountCondition.hasError('required')">
|
||||
{{ 'labels.inputs.Comparison Condition' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
||||
<mat-select formControlName="offices" multiple>
|
||||
<mat-option *ngFor="let office of advanceSearchTemplate.offices" [value]="office.id">
|
||||
{{ office.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Date Type' | translate }}</mat-label>
|
||||
<mat-select required formControlName="loanDateOption">
|
||||
<mat-option value="approvalDate">{{ 'labels.inputs.Approval Date' | translate }}</mat-option>
|
||||
<mat-option value="createdDate">{{ 'labels.inputs.Creation Date' | translate }}</mat-option>
|
||||
<mat-option value="disbursalDate">{{ 'labels.inputs.Disbursement Date' | translate }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-31" (click)="fromDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="fromDatePicker"
|
||||
formControlName="loanFromDate"
|
||||
required
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #fromDatePicker></mat-datepicker>
|
||||
<mat-error *ngIf="fundMappingForm.controls.loanFromDate.hasError('required')">
|
||||
{{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="fundMappingForm.contains('minOutstandingAmount')" class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
|
||||
<input type="number" matInput required formControlName="minOutstandingAmount" />
|
||||
<mat-error *ngIf="fundMappingForm.controls.minOutstandingAmount.hasError('required')">
|
||||
{{ 'labels.inputs.Minimum Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<mat-form-field class="flex-31" (click)="toDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="toDatePicker"
|
||||
formControlName="loanToDate"
|
||||
required
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #toDatePicker></mat-datepicker>
|
||||
<mat-error *ngIf="fundMappingForm.controls.loanToDate.hasError('required')">
|
||||
{{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="fundMappingForm.contains('outstandingAmount')" class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
|
||||
<input type="number" matInput required formControlName="outstandingAmount" />
|
||||
<mat-error *ngIf="fundMappingForm.controls.outstandingAmount.hasError('required')">
|
||||
{{ 'labels.inputs.Comparison Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-checkbox
|
||||
labelPosition="before"
|
||||
formControlName="includeOutStandingAmountPercentage"
|
||||
class="margin-b flex-73"
|
||||
>
|
||||
{{ 'labels.inputs.Loan Outstanding Percentage' | translate }}
|
||||
</mat-checkbox>
|
||||
|
||||
<mat-form-field *ngIf="fundMappingForm.contains('maxOutstandingAmount')" class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
|
||||
<input type="number" matInput required formControlName="maxOutstandingAmount" />
|
||||
<mat-error *ngIf="fundMappingForm.controls.maxOutstandingAmount.hasError('required')">
|
||||
{{ 'labels.inputs.Maximum Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<div
|
||||
*ngIf="fundMappingForm.value.includeOutStandingAmountPercentage"
|
||||
class="flex-fill layout-row-wrap gap-2percent layout-xs-column"
|
||||
>
|
||||
<mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentageCondition')" class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
|
||||
<mat-select required formControlName="outStandingAmountPercentageCondition">
|
||||
<mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
|
||||
<mat-option value="<="><=</mat-option>
|
||||
<mat-option value=">=">>=</mat-option>
|
||||
<mat-option value="<"><</mat-option>
|
||||
<mat-option value=">">></mat-option>
|
||||
<mat-option value="=">=</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentageCondition.hasError('required')">
|
||||
{{ 'labels.inputs.Comparison Condition' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="fundMappingForm.contains('minOutStandingAmountPercentage')" class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
|
||||
<input type="number" matInput required formControlName="minOutStandingAmountPercentage" />
|
||||
<mat-error *ngIf="fundMappingForm.controls.minOutStandingAmountPercentage.hasError('required')">
|
||||
{{ 'labels.inputs.Minimum Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentage')" class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
|
||||
<input type="number" matInput required formControlName="outStandingAmountPercentage" />
|
||||
<mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentage.hasError('required')">
|
||||
{{ 'labels.inputs.Comparison Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="fundMappingForm.contains('maxOutStandingAmountPercentage')" class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
|
||||
<input type="number" matInput required formControlName="maxOutStandingAmountPercentage" />
|
||||
<mat-error *ngIf="fundMappingForm.controls.maxOutStandingAmountPercentage.hasError('required')">
|
||||
{{ 'labels.inputs.Maximum Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<mat-checkbox class="flex-73 margin-b" labelPosition="before" formControlName="includeOutstandingAmount">
|
||||
{{ 'labels.inputs.Loan Outstanding Amount' | translate }}
|
||||
</mat-checkbox>
|
||||
|
||||
<div
|
||||
*ngIf="fundMappingForm.value.includeOutstandingAmount"
|
||||
class="flex-fill layout-row-wrap gap-2percent responsive-column"
|
||||
>
|
||||
<mat-form-field *ngIf="fundMappingForm.contains('outstandingAmountCondition')" class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
|
||||
<mat-select required formControlName="outstandingAmountCondition">
|
||||
<mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
|
||||
<mat-option value="<="><=</mat-option>
|
||||
<mat-option value=">=">>=</mat-option>
|
||||
<mat-option value="<"><</mat-option>
|
||||
<mat-option value=">">></mat-option>
|
||||
<mat-option value="=">=</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="fundMappingForm.controls.outstandingAmountCondition.hasError('required')">
|
||||
{{ 'labels.inputs.Comparison Condition' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="fundMappingForm.contains('minOutstandingAmount')" class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
|
||||
<input type="number" matInput required formControlName="minOutstandingAmount" />
|
||||
<mat-error *ngIf="fundMappingForm.controls.minOutstandingAmount.hasError('required')">
|
||||
{{ 'labels.inputs.Minimum Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="fundMappingForm.contains('outstandingAmount')" class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
|
||||
<input type="number" matInput required formControlName="outstandingAmount" />
|
||||
<mat-error *ngIf="fundMappingForm.controls.outstandingAmount.hasError('required')">
|
||||
{{ 'labels.inputs.Comparison Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="fundMappingForm.contains('maxOutstandingAmount')" class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
|
||||
<input type="number" matInput required formControlName="maxOutstandingAmount" />
|
||||
<mat-error *ngIf="fundMappingForm.controls.maxOutstandingAmount.hasError('required')">
|
||||
{{ 'labels.inputs.Maximum Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
|
||||
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
|
||||
|
||||
Reference in New Issue
Block a user