CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

build: Use prettier for html

Browse Source 
Stop ignoring html files in prettier and fix existing issues.
This commit is contained in:
Ralph Hopman
2024-12-19 09:36:50 +01:00
committed by Adam Saghy
parent c5fc3925fb
commit 2ec9ba81d6
651 changed files with 28935 additions and 20624 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/clients/client-stepper/client-address-step/client-address-step.component.html
+36 -26
View File
@@ -1,19 +1,15 @@
<div class="mat-typography">
<h3>{{"labels.heading.Address" | translate}}</h3>
<h3>{{ 'labels.heading.Address' | translate }}</h3>
<div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
<button mat-raised-button color="primary" (click)="addAddress()">
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Add" | translate}}
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
</button>
</div>
<mat-accordion *ngIf="clientAddressData.length > 0">
<mat-expansion-panel *ngFor="let address of clientAddressData; index as i" class="address">
<mat-expansion-panel-header>
<mat-panel-title>
{{ getSelectedValue('addressTypeIdOptions', address.addressTypeId)?.name }}
</mat-panel-title>
@@ -21,49 +17,63 @@
<mat-panel-description>
{{ address.relationship }}
</mat-panel-description>
</mat-expansion-panel-header>
<mat-divider></mat-divider>
<div class="address-actions" fxLayout="row" fxLayoutAlign="flex-end center">
<button mat-button color="primary" (click)="editAddress(address,i)">
<button mat-button color="primary" (click)="editAddress(address, i)">
<fa-icon icon="edit"></fa-icon>
</button>
<button mat-button color="warn" (click)="deleteAddress(address,i)">
<button mat-button color="warn" (click)="deleteAddress(address, i)">
<fa-icon icon="trash"></fa-icon>
</button>
<mat-slide-toggle [checked]="address.isActive" (change)="toggleAddress(address)"></mat-slide-toggle>
</div>
<p>
<span *ngIf="isFieldEnabled('street')">{{"labels.inputs.Street" | translate}} : {{address.street}}<br /></span>
<span *ngIf="isFieldEnabled('addressLine1')">{{"labels.inputs.Address Line" | translate}} 1 : {{address.addressLine1}}<br /></span>
<span *ngIf="isFieldEnabled('addressLine2')">{{"labels.inputs.Address Line" | translate}} 2 : {{address.addressLine2}}<br /></span>
<span *ngIf="isFieldEnabled('addressLine3')">{{"labels.inputs.Address Line" | translate}} 3 : {{address.addressLine3}}<br /></span>
<span *ngIf="isFieldEnabled('townVillage')">{{"labels.inputs.Town / Village" | translate}} : {{address.townVillage}}<br /></span>
<span *ngIf="isFieldEnabled('city')">{{"labels.inputs.City" | translate}} : {{address.city}}<br /></span>
<span *ngIf="isFieldEnabled('stateProvinceId')">{{"labels.inputs.State / Province" | translate}} :
{{getSelectedValue('stateProvinceIdOptions',address.stateProvinceId)?.name}}<br /></span>
<span *ngIf="isFieldEnabled('countryId')">{{"labels.inputs.Country" | translate}} :
{{getSelectedValue('countryIdOptions',address.countryId)?.name}}<br /></span>
<span *ngIf="isFieldEnabled('postalCode')">{{"labels.inputs.Postal Code" | translate}} : {{address.postalCode}}<br /></span>
<span *ngIf="isFieldEnabled('isActive')">{{"labels.inputs.Active Status" | translate}} : {{address.isActive}}<br /></span>
<span *ngIf="isFieldEnabled('street')"
>{{ 'labels.inputs.Street' | translate }} : {{ address.street }}<br
/></span>
<span *ngIf="isFieldEnabled('addressLine1')"
>{{ 'labels.inputs.Address Line' | translate }} 1 : {{ address.addressLine1 }}<br
/></span>
<span *ngIf="isFieldEnabled('addressLine2')"
>{{ 'labels.inputs.Address Line' | translate }} 2 : {{ address.addressLine2 }}<br
/></span>
<span *ngIf="isFieldEnabled('addressLine3')"
>{{ 'labels.inputs.Address Line' | translate }} 3 : {{ address.addressLine3 }}<br
/></span>
<span *ngIf="isFieldEnabled('townVillage')"
>{{ 'labels.inputs.Town / Village' | translate }} : {{ address.townVillage }}<br
/></span>
<span *ngIf="isFieldEnabled('city')">{{ 'labels.inputs.City' | translate }} : {{ address.city }}<br /></span>
<span *ngIf="isFieldEnabled('stateProvinceId')"
>{{ 'labels.inputs.State / Province' | translate }} :
{{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name }}<br
/></span>
<span *ngIf="isFieldEnabled('countryId')"
>{{ 'labels.inputs.Country' | translate }} : {{ getSelectedValue('countryIdOptions', address.countryId)?.name
}}<br
/></span>
<span *ngIf="isFieldEnabled('postalCode')"
>{{ 'labels.inputs.Postal Code' | translate }} : {{ address.postalCode }}<br
/></span>
<span *ngIf="isFieldEnabled('isActive')"
>{{ 'labels.inputs.Active Status' | translate }} : {{ address.isActive }}<br
/></span>
</p>
</mat-expansion-panel>
</mat-accordion>
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
<button mat-raised-button matStepperPrevious>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{"labels.buttons.Previous" | translate}}
{{ 'labels.buttons.Previous' | translate }}
</button>
<button mat-raised-button matStepperNext>
{{"labels.buttons.Next" | translate}}
{{ 'labels.buttons.Next' | translate }}
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
</button>
</div>
</div>
src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.html
+36 -19
View File
@@ -1,51 +1,68 @@
<form [formGroup]="datatableForm">
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<div *ngFor="let datatableInput of datatableInputs" fxFlex="48%">
<mat-form-field fxFlex="100%" *ngIf="!isBoolean(datatableInput.columnDisplayType)">
<mat-label>{{ getInputName(datatableInput) }}</mat-label>
<mat-label>{{getInputName(datatableInput)}}</mat-label>
<mat-select *ngIf="isDropdown(datatableInput.columnDisplayType)" formControlName="{{datatableInput.controlName}}">
<mat-select
*ngIf="isDropdown(datatableInput.columnDisplayType)"
formControlName="{{ datatableInput.controlName }}"
>
<mat-option *ngFor="let code of datatableInput.columnValues" [value]="code.id">
{{ code.value }}
</mat-option>
</mat-select>
<input matInput type="number" *ngIf="isNumeric(datatableInput.columnDisplayType)"
formControlName="{{datatableInput.controlName}}">
<input
matInput
type="number"
*ngIf="isNumeric(datatableInput.columnDisplayType)"
formControlName="{{ datatableInput.controlName }}"
/>
<input matInput *ngIf="isString(datatableInput.columnDisplayType)"
formControlName="{{datatableInput.controlName}}">
<input
matInput
*ngIf="isString(datatableInput.columnDisplayType)"
formControlName="{{ datatableInput.controlName }}"
/>
<textarea matInput *ngIf="isText(datatableInput.columnDisplayType)"
formControlName="{{datatableInput.controlName}}"></textarea>
<textarea
matInput
*ngIf="isText(datatableInput.columnDisplayType)"
formControlName="{{ datatableInput.controlName }}"
></textarea>
<span *ngIf="isDate(datatableInput.columnDisplayType)" (click)="datePicker.open()">
<input matInput [matDatepicker]="datePicker" formControlName="{{datatableInput.controlName}}" class="date-picker">
<input
matInput
[matDatepicker]="datePicker"
formControlName="{{ datatableInput.controlName }}"
class="date-picker"
/>
<mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
<mat-datepicker #datePicker></mat-datepicker>
</span>
</mat-form-field>
<mat-checkbox *ngIf="isBoolean(datatableInput.columnDisplayType)" formControlName="{{datatableInput.controlName}}"
labelPosition="before" class="margin-v">
{{getInputName(datatableInput)}}
<mat-checkbox
*ngIf="isBoolean(datatableInput.columnDisplayType)"
formControlName="{{ datatableInput.controlName }}"
labelPosition="before"
class="margin-v"
>
{{ getInputName(datatableInput) }}
</mat-checkbox>
</div>
</div>
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
<button mat-raised-button matStepperPrevious disabled>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{"labels.buttons.Previous" | translate}}
{{ 'labels.buttons.Previous' | translate }}
</button>
<button mat-raised-button matStepperNext>
{{"labels.buttons.Next" | translate}}
{{ 'labels.buttons.Next' | translate }}
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
</button>
</div>
</form>
src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.html
+42 -33
View File
@@ -1,104 +1,113 @@
<h1 mat-dialog-title>{{ data.context }} {{"labels.heading.Family Member" | translate}}</h1>
<h1 mat-dialog-title>{{ data.context }} {{ 'labels.heading.Family Member' | translate }}</h1>
<form [formGroup]="familyMemberForm">
<div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutAlign="start center" fxLayoutGap="2%">
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.First Name" | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
<input formControlName="firstName" required matInput />
<mat-error *ngIf="familyMemberForm.controls.firstName.hasError('required')">
{{"labels.inputs.First Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
{{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Middle Name" | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
<input formControlName="middleName" matInput />
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Last Name" | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
<input formControlName="lastName" required matInput />
<mat-error *ngIf="familyMemberForm.controls.lastName.hasError('required')">
{{"labels.inputs.Last Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
{{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Qualification" | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Qualification' | translate }}</mat-label>
<input formControlName="qualification" matInput />
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Age" | translate}}</mat-label>
<input type="number" formControlName="age" matInput [min]="0"/>
<mat-label>{{ 'labels.inputs.Age' | translate }}</mat-label>
<input type="number" formControlName="age" matInput [min]="0" />
<mat-error *ngIf="familyMemberForm.controls.age.hasError('required')">
{{"labels.inputs.Age" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required and cannot be negative" | translate}}</strong>
{{ 'labels.inputs.Age' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required and cannot be negative' | translate }}</strong>
</mat-error>
</mat-form-field>
<mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="48%">{{"labels.inputs.Is Dependent" | translate}}?</mat-checkbox>
<mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="48%"
>{{ 'labels.inputs.Is Dependent' | translate }}?</mat-checkbox
>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Relationship" | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Relationship' | translate }}</mat-label>
<mat-select formControlName="relationshipId" required>
<mat-option *ngFor="let relation of data.options.relationshipIdOptions" [value]="relation.id">
{{ relation.name | translateKey:'catalogs' }}
{{ relation.name | translateKey: 'catalogs' }}
</mat-option>
</mat-select>
<mat-error *ngIf="familyMemberForm.controls.relationshipId.hasError('required')">
{{"labels.inputs.Relationship" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
{{ 'labels.inputs.Relationship' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Gender" | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
<mat-select formControlName="genderId" required>
<mat-option *ngFor="let gender of data.options.genderIdOptions" [value]="gender.id">
{{ gender.name | translateKey:'catalogs' }}
{{ gender.name | translateKey: 'catalogs' }}
</mat-option>
</mat-select>
<mat-error *ngIf="familyMemberForm.controls.genderId.hasError('required')">
{{"labels.inputs.Gender" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
{{ 'labels.inputs.Gender' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Profession" | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Profession' | translate }}</mat-label>
<mat-select formControlName="professionId">
<mat-option *ngFor="let profession of data.options.professionIdOptions" [value]="profession.id">
{{ profession.name | translateKey:'catalogs' }}
{{ profession.name | translateKey: 'catalogs' }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Marital Status" | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Marital Status' | translate }}</mat-label>
<mat-select formControlName="maritalStatusId">
<mat-option *ngFor="let maritalStatus of data.options.maritalStatusIdOptions"
[value]="maritalStatus.id">
{{ maritalStatus.name | translateKey:'catalogs' }}
<mat-option *ngFor="let maritalStatus of data.options.maritalStatusIdOptions" [value]="maritalStatus.id">
{{ maritalStatus.name | translateKey: 'catalogs' }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="98%" (click)="dueDatePicker.open()">
<mat-label>{{"labels.inputs.Date Of Birth" | translate}}</mat-label>
<input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker" required>
<mat-label>{{ 'labels.inputs.Date Of Birth' | translate }}</mat-label>
<input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker" required />
<mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
<mat-datepicker #dueDatePicker></mat-datepicker>
<mat-error *ngIf="familyMemberForm.controls.dateOfBirth.hasError('required')">
{{"labels.inputs.Date Of Birth" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
{{ 'labels.inputs.Date Of Birth' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
</div>
<mat-dialog-actions align="center">
<button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate}}</button>
<button mat-raised-button color="primary" [disabled]="!familyMemberForm.valid" [mat-dialog-close]="{ member: familyMember }">{{"labels.buttons.Confirm" | translate}}</button>
<button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
<button
mat-raised-button
color="primary"
[disabled]="!familyMemberForm.valid"
[mat-dialog-close]="{ member: familyMember }"
>
{{ 'labels.buttons.Confirm' | translate }}
</button>
</mat-dialog-actions>
</form>
src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html
+56 -58
View File
@@ -1,67 +1,65 @@
<div class="mat-typography">
<h3>{{ 'labels.heading.Family Members' | translate }}</h3>
<h3>{{"labels.heading.Family Members" | translate}}</h3>
<div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
<button mat-raised-button color="primary" (click)="addFamilyMember()">
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
</button>
</div>
<div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
<button mat-raised-button color="primary" (click)="addFamilyMember()">
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Add" | translate}}
</button>
</div>
<mat-accordion>
<mat-expansion-panel *ngFor="let member of clientFamilyMembers; index as i" class="family-member">
<mat-expansion-panel-header>
<mat-panel-title>
{{ member.firstName }} {{ member.middleName ? member.middleName + ' ' + member.lastName : member.lastName }}
</mat-panel-title>
<mat-accordion>
<mat-panel-description>
{{ member.relationship }}
</mat-panel-description>
</mat-expansion-panel-header>
<mat-expansion-panel *ngFor="let member of clientFamilyMembers;index as i" class="family-member">
<mat-divider></mat-divider>
<mat-expansion-panel-header>
<div class="family-member-actions" fxLayout="row" fxLayoutAlign="flex-end">
<button mat-button color="primary">
<fa-icon icon="edit" (click)="editFamilyMember(member, i)"></fa-icon>
</button>
<button mat-button color="warn" (click)="deleteFamilyMember(member.firstName, i)">
<fa-icon icon="trash"></fa-icon>
</button>
</div>
<mat-panel-title>
{{ member.firstName }} {{ member.middleName ? member.middleName + ' ' + member.lastName : member.lastName }}
</mat-panel-title>
<mat-panel-description>
{{member.relationship}}
</mat-panel-description>
</mat-expansion-panel-header>
<mat-divider></mat-divider>
<div class="family-member-actions" fxLayout="row" fxLayoutAlign="flex-end">
<button mat-button color="primary">
<fa-icon icon="edit" (click)="editFamilyMember(member, i)"></fa-icon>
</button>
<button mat-button color="warn" (click)="deleteFamilyMember(member.firstName,i)">
<fa-icon icon="trash"></fa-icon>
</button>
</div>
<p>
{{"labels.inputs.First Name" | translate}} : {{ member.firstName }}<br />
{{"labels.inputs.Middle Name" | translate}} : {{ member.middleName }}<br />
{{"labels.inputs.Last Name" | translate}} : {{ member.lastName }}<br />
{{"labels.inputs.Qualification" | translate}} : {{ member.qualification }}<br />
{{"labels.inputs.Relationship" | translate}} : {{ member.relationshipId | find:clientTemplate.familyMemberOptions.relationshipIdOptions:'id':'name' }}<br />
{{"labels.inputs.Age" | translate}} : {{ member.age }}<br />
{{"labels.inputs.Is Dependent" | translate}} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
{{"labels.inputs.Marital Status" | translate}} : {{ member.maritalStatusId | find:clientTemplate.familyMemberOptions.maritalStatusIdOptions:'id':'name' }}<br />
{{"labels.inputs.Gender" | translate}} : {{ member.genderId | find:clientTemplate.familyMemberOptions.genderIdOptions:'id':'name' }}<br />
{{"labels.inputs.Profession" | translate}} : {{member.professionId | find:clientTemplate.familyMemberOptions.professionIdOptions:'id':'name' }}<br />
{{"labels.inputs.Date Of Birth" | translate}} : {{member.dateOfBirth | dateFormat}}<br />
</p>
</mat-expansion-panel>
</mat-accordion>
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
<button mat-raised-button matStepperPrevious>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{"labels.buttons.Previous" | translate}}
</button>
<button mat-raised-button matStepperNext>
{{"labels.buttons.Next" | translate}}
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
</button>
</div>
<p>
{{ 'labels.inputs.First Name' | translate }} : {{ member.firstName }}<br />
{{ 'labels.inputs.Middle Name' | translate }} : {{ member.middleName }}<br />
{{ 'labels.inputs.Last Name' | translate }} : {{ member.lastName }}<br />
{{ 'labels.inputs.Qualification' | translate }} : {{ member.qualification }}<br />
{{ 'labels.inputs.Relationship' | translate }} :
{{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name'
}}<br />
{{ 'labels.inputs.Age' | translate }} : {{ member.age }}<br />
{{ 'labels.inputs.Is Dependent' | translate }} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
{{ 'labels.inputs.Marital Status' | translate }} :
{{ member.maritalStatusId | find: clientTemplate.familyMemberOptions.maritalStatusIdOptions : 'id' : 'name'
}}<br />
{{ 'labels.inputs.Gender' | translate }} :
{{ member.genderId | find: clientTemplate.familyMemberOptions.genderIdOptions : 'id' : 'name' }}<br />
{{ 'labels.inputs.Profession' | translate }} :
{{ member.professionId | find: clientTemplate.familyMemberOptions.professionIdOptions : 'id' : 'name' }}<br />
{{ 'labels.inputs.Date Of Birth' | translate }} : {{ member.dateOfBirth | dateFormat }}<br />
</p>
</mat-expansion-panel>
</mat-accordion>
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
<button mat-raised-button matStepperPrevious>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Previous' | translate }}
</button>
<button mat-raised-button matStepperNext>
{{ 'labels.buttons.Next' | translate }}
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
</button>
</div>
</div>
src/app/clients/client-stepper/client-general-step/client-general-step.component.html
+110 -63
View File
@@ -1,88 +1,104 @@
<form [formGroup]="createClientForm">
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
<mat-select required formControlName="officeId">
<mat-option *ngFor="let office of officeOptions" [value]="office.id">
{{ office.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="createClientForm.controls.officeId.hasError('required')">
{{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
{{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="23%">
<mat-label>{{"labels.inputs.Legal Form" | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Legal Form' | translate }}</mat-label>
<mat-select required formControlName="legalFormId">
<mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
{{ legalForm.value | translateKey:'inputs'}}
{{ legalForm.value | translateKey: 'inputs' }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="23%">
<mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
<input matInput formControlName="externalId">
<mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
<input matInput formControlName="externalId" />
</mat-form-field>
<mat-form-field *ngIf="createClientForm.contains('fullname')" fxFlex="48%">
<mat-label>{{ 'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Name', 'Entity Name']) | translate }}</mat-label>
<input matInput required formControlName="fullname">
<mat-label>{{
'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Name', 'Entity Name']) | translate
}}</mat-label>
<input matInput required formControlName="fullname" />
<mat-error *ngIf="createClientForm.controls.fullname.hasError('required')">
{{"labels.inputs.Client name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
{{ 'labels.inputs.Client name' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
<mat-error *ngIf="createClientForm.controls.fullname.hasError('pattern')">
{{"labels.inputs.Client name" | translate}} <strong>{{"labels.inputs.cannot" | translate}}</strong> {{"labels.commons.begin with a special character or number" | translate}}
{{ 'labels.inputs.Client name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
{{ 'labels.commons.begin with a special character or number' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field *ngIf="createClientForm.contains('firstname')" fxFlex="48%">
<mat-label>{{"labels.inputs.First Name" | translate}}</mat-label>
<input matInput required formControlName="firstname">
<mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
<input matInput required formControlName="firstname" />
<mat-error *ngIf="createClientForm.controls.firstname.hasError('required')">
{{"labels.inputs.Client first name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
{{ 'labels.inputs.Client first name' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
<mat-error *ngIf="createClientForm.controls.firstname.hasError('pattern')">
{{"labels.inputs.Client first name" | translate}} <strong>{{"labels.inputs.cannot" | translate}}</strong> {{"labels.commons.begin with a special character or number" | translate}}
{{ 'labels.inputs.Client first name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
{{ 'labels.commons.begin with a special character or number' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field *ngIf="createClientForm.contains('middlename')" fxFlex="48%">
<mat-label>{{"labels.inputs.Middle Name" | translate}}</mat-label>
<input matInput formControlName="middlename">
<mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
<input matInput formControlName="middlename" />
<mat-error *ngIf="createClientForm.controls.middlename.hasError('pattern')">
{{"labels.inputs.Client middle name" | translate}} <strong>{{"labels.inputs.cannot" | translate}}</strong> {{"labels.commons.begin with a special character or number" | translate}}
{{ 'labels.inputs.Client middle name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
{{ 'labels.commons.begin with a special character or number' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field *ngIf="createClientForm.contains('lastname')" fxFlex="48%">
<mat-label>{{"labels.inputs.Last Name" | translate}}</mat-label>
<input matInput required formControlName="lastname">
<mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
<input matInput required formControlName="lastname" />
<mat-error *ngIf="createClientForm.controls.lastname.hasError('required')">
{{"labels.inputs.Client last name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
{{ 'labels.inputs.Client last name' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
<mat-error *ngIf="createClientForm.controls.lastname.hasError('pattern')">
{{"labels.inputs.Client last name" | translate}} <strong>{{"labels.inputs.cannot" | translate}}</strong> {{"labels.commons.begin with a special character or number" | translate}}
{{ 'labels.inputs.Client last name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
{{ 'labels.commons.begin with a special character or number' | translate }}
</mat-error>
</mat-form-field>
<mat-divider></mat-divider>
<mat-form-field fxFlex="48%" (click)="dateOfBirthDatePicker.open()">
<mat-label>{{ 'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Date of Birth', 'Incorporation Date']) | translate }}</mat-label>
<input matInput [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" formControlName="dateOfBirth">
<mat-label>{{
'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Date of Birth', 'Incorporation Date'])
| translate
}}</mat-label>
<input matInput [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" formControlName="dateOfBirth" />
<mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
<mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
</mat-form-field>
<div fxFlex="100%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" formGroupName="clientNonPersonDetails"
*ngIf="createClientForm.contains('clientNonPersonDetails')">
<div
fxFlex="100%"
fxLayout="row wrap"
fxLayoutGap="2%"
fxLayout.lt-md="column"
formGroupName="clientNonPersonDetails"
*ngIf="createClientForm.contains('clientNonPersonDetails')"
>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Constitution" | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Constitution' | translate }}</mat-label>
<mat-select formControlName="constitutionId" required>
<mat-option *ngFor="let constitution of constitutionOptions" [value]="constitution.id">
{{ constitution.name }}
@@ -91,7 +107,7 @@
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Main Business Line" | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Main Business Line' | translate }}</mat-label>
<mat-select formControlName="mainBusinessLineId">
<mat-option *ngFor="let business of businessLineOptions" [value]="business.id">
{{ business.name }}
@@ -100,26 +116,31 @@
</mat-form-field>
<mat-form-field fxFlex="48%" (click)="incorpValidityTillDateDatePicker.open()">
<mat-label>{{"labels.inputs.Incorporation Validity Till Date" | translate}}</mat-label>
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="incorpValidityTillDateDatePicker" formControlName="incorpValidityTillDate">
<mat-label>{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</mat-label>
<input
matInput
[min]="minDate"
[max]="maxDate"
[matDatepicker]="incorpValidityTillDateDatePicker"
formControlName="incorpValidityTillDate"
/>
<mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>
<mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Incorporation Number" | translate}}</mat-label>
<input matInput formControlName="incorpNumber">
<mat-label>{{ 'labels.inputs.Incorporation Number' | translate }}</mat-label>
<input matInput formControlName="incorpNumber" />
</mat-form-field>
<mat-form-field fxFlex="98%">
<mat-label>{{"labels.inputs.Remarks" | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
<textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
</mat-form-field>
</div>
<mat-form-field *ngIf="createClientForm.value.legalFormId === 1" fxFlex="48%">
<mat-label>{{"labels.inputs.Gender" | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
<mat-select formControlName="genderId">
<mat-option *ngFor="let gender of genderOptions" [value]="gender.id">
{{ gender.name }}
@@ -128,7 +149,7 @@
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Staff" | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
<mat-select formControlName="staffId">
<mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
{{ staff.displayName }}
@@ -136,27 +157,33 @@
</mat-select>
</mat-form-field>
<mat-checkbox *ngIf="createClientForm.value.legalFormId === 1" fxFlex="48%" labelPosition="before" formControlName="isStaff" class="margin-v">
{{"labels.inputs.Is staff" | translate}}?
<mat-checkbox
*ngIf="createClientForm.value.legalFormId === 1"
fxFlex="48%"
labelPosition="before"
formControlName="isStaff"
class="margin-v"
>
{{ 'labels.inputs.Is staff' | translate }}?
</mat-checkbox>
<mat-divider fxFlex="98%"></mat-divider>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Mobile No" | translate}}</mat-label>
<input matInput type="number" formControlName="mobileNo">
<mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label>
<input matInput type="number" formControlName="mobileNo" />
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Email Address" | translate}}</mat-label>
<input matInput formControlName="emailAddress">
<mat-label>{{ 'labels.inputs.Email Address' | translate }}</mat-label>
<input matInput formControlName="emailAddress" />
<mat-error *ngIf="createClientForm.controls.emailAddress.errors?.email">
{{"error.Email not valid" | translate}}
{{ 'error.Email not valid' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Client Type" | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Client Type' | translate }}</mat-label>
<mat-select formControlName="clientTypeId">
<mat-option *ngFor="let clientType of clientTypeOptions" [value]="clientType.id">
{{ clientType.name }}
@@ -165,17 +192,27 @@
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Client Classification" | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Client Classification' | translate }}</mat-label>
<mat-select formControlName="clientClassificationId">
<mat-option *ngFor="let clientClassification of clientClassificationTypeOptions" [value]="clientClassification.id">
<mat-option
*ngFor="let clientClassification of clientClassificationTypeOptions"
[value]="clientClassification.id"
>
{{ clientClassification.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
<mat-label>{{"labels.inputs.Submitted On" | translate}}</mat-label>
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" formControlName="submittedOnDate" required>
<mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
<input
matInput
[min]="minDate"
[max]="maxDate"
[matDatepicker]="submittedOnDatePicker"
formControlName="submittedOnDate"
required
/>
<mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
<mat-datepicker #submittedOnDatePicker></mat-datepicker>
</mat-form-field>
@@ -183,47 +220,57 @@
<br />
<mat-checkbox fxFlex="48%" labelPosition="before" formControlName="active" class="margin-v">
{{"labels.inputs.Active" | translate}}?
{{ 'labels.inputs.Active' | translate }}?
</mat-checkbox>
<mat-form-field *ngIf="createClientForm.contains('activationDate')" fxFlex="48%" (click)="activatedOnDatePicker.open()">
<mat-label>{{"labels.inputs.Activation Date" | translate}}</mat-label>
<input matInput [min]="createClientForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
formControlName="activationDate">
<mat-form-field
*ngIf="createClientForm.contains('activationDate')"
fxFlex="48%"
(click)="activatedOnDatePicker.open()"
>
<mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
<input
matInput
[min]="createClientForm.value.submittedOnDate"
[max]="maxDate"
[matDatepicker]="activatedOnDatePicker"
required
formControlName="activationDate"
/>
<mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
<mat-datepicker #activatedOnDatePicker></mat-datepicker>
<mat-error *ngIf="createClientForm.controls.activationDate.hasError('required')">
{{"labels.inputs.Activation Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
{{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
<mat-checkbox fxFlex="48%" labelPosition="before" formControlName="addSavings" class="margin-v">
{{"labels.inputs.Open Savings Account" | translate}}?
{{ 'labels.inputs.Open Savings Account' | translate }}?
</mat-checkbox>
<mat-form-field *ngIf="createClientForm.contains('savingsProductId')" fxFlex="48%">
<mat-label>{{"labels.inputs.Savings Product" | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Savings Product' | translate }}</mat-label>
<mat-select required formControlName="savingsProductId">
<mat-option *ngFor="let product of savingProductOptions" [value]="product.id">
{{ product.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="createClientForm.controls.savingsProductId.hasError('required')">
{{"labels.inputs.Savings Product" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
{{ 'labels.inputs.Savings Product' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
</div>
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
<button mat-raised-button matStepperPrevious disabled>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{"labels.buttons.Previous" | translate}}
{{ 'labels.buttons.Previous' | translate }}
</button>
<button mat-raised-button matStepperNext>
{{"labels.buttons.Next" | translate}}
{{ 'labels.buttons.Next' | translate }}
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
</button>
</div>
</form>
src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html
+103 -85
View File
@@ -1,28 +1,30 @@
<div fxLayout="row wrap" fxLayout.lt-md="column">
<h3 class="mat-h3" fxFlexFill>{{"labels.heading.General" | translate}}</h3>
<h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.General' | translate }}</h3>
<mat-divider fxFlexFill></mat-divider>
<div fxFlexFill>
<span fxFlex="40%">{{"labels.inputs.name" | translate}}</span>
<span fxFlex="40%">{{ 'labels.inputs.name' | translate }}</span>
<span fxFlex="60%" *ngIf="client.legalFormId === 2">{{ client.fullname }}</span>
<span fxFlex="60%" *ngIf="client.legalFormId === 1">{{ client.firstname }} {{ client.middlename ? client.middlename + ' ' + client.lastname : client.lastname }}</span>
<span fxFlex="60%" *ngIf="client.legalFormId === 1"
>{{ client.firstname }}
{{ client.middlename ? client.middlename + ' ' + client.lastname : client.lastname }}</span
>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{"labels.inputs.Office" | translate}}</span>
<span fxFlex="60%">{{ client.officeId | find:clientTemplate.officeOptions:'id':'name' }}</span>
<span fxFlex="40%">{{ 'labels.inputs.Office' | translate }}</span>
<span fxFlex="60%">{{ client.officeId | find: clientTemplate.officeOptions : 'id' : 'name' }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{"labels.inputs.Legal Form" | translate}}</span>
<span fxFlex="60%">{{ client.legalFormId | find:clientTemplate.clientLegalFormOptions:'id':'value' }}</span>
<span fxFlex="40%">{{ 'labels.inputs.Legal Form' | translate }}</span>
<span fxFlex="60%">{{ client.legalFormId | find: clientTemplate.clientLegalFormOptions : 'id' : 'value' }}</span>
</div>
<div fxFlexFill *ngIf="client.staffId">
<span fxFlex="40%">{{"labels.inputs.Staff" | translate}}</span>
<span fxFlex="60%">{{ client.staffId | find:clientTemplate.staffOptions:'id':'displayName' }}</span>
<span fxFlex="40%">{{ 'labels.inputs.Staff' | translate }}</span>
<span fxFlex="60%">{{ client.staffId | find: clientTemplate.staffOptions : 'id' : 'displayName' }}</span>
</div>
<div fxFlexFill *ngIf="client.dateOfBirth">
@@ -31,195 +33,211 @@
</div>
<div fxFlexFill *ngIf="client.externalId">
<span fxFlex="40%">{{"labels.inputs.External Id" | translate}}</span>
<span fxFlex="40%">{{ 'labels.inputs.External Id' | translate }}</span>
<span fxFlex="60%">
<mifosx-external-identifier externalId="{{client.externalId}}"></mifosx-external-identifier>
<mifosx-external-identifier externalId="{{ client.externalId }}"></mifosx-external-identifier>
</span>
</div>
<div fxFlexFill *ngIf="client.mobileNo">
<span fxFlex="40%">{{"labels.inputs.Mobile No" | translate}}</span>
<span fxFlex="40%">{{ 'labels.inputs.Mobile No' | translate }}</span>
<span fxFlex="60%">{{ client.mobileNo }}</span>
</div>
<div fxFlexFill *ngIf="client.emailAddress">
<span fxFlex="40%">{{"labels.inputs.Email Address" | translate}}</span>
<span fxFlex="40%">{{ 'labels.inputs.Email Address' | translate }}</span>
<span fxFlex="60%">{{ client.emailAddress }}</span>
</div>
<div fxFlexFill *ngIf="client.clientTypeId">
<span fxFlex="40%">{{"labels.inputs.Client Type" | translate}}</span>
<span fxFlex="60%">{{ client.clientTypeId | find:clientTemplate.clientTypeOptions:'id':'name' }}</span>
<span fxFlex="40%">{{ 'labels.inputs.Client Type' | translate }}</span>
<span fxFlex="60%">{{ client.clientTypeId | find: clientTemplate.clientTypeOptions : 'id' : 'name' }}</span>
</div>
<div fxFlexFill *ngIf="client.clientClassificationId">
<span fxFlex="40%">{{"labels.inputs.Client Classification" | translate}}</span>
<span fxFlex="60%">{{ client.clientClassificationId | find:clientTemplate.clientClassificationOptions:'id':'name' }}</span>
<span fxFlex="40%">{{ 'labels.inputs.Client Classification' | translate }}</span>
<span fxFlex="60%">{{
client.clientClassificationId | find: clientTemplate.clientClassificationOptions : 'id' : 'name'
}}</span>
</div>
<div fxFlexFill *ngIf="client.savingsProductId">
<span fxFlex="40%">{{"labels.inputs.Savings Product" | translate}}</span>
<span fxFlex="60%">{{ client.savingsProductId | find:clientTemplate.savingProductOptions:'id':'name' }}</span>
<span fxFlex="40%">{{ 'labels.inputs.Savings Product' | translate }}</span>
<span fxFlex="60%">{{ client.savingsProductId | find: clientTemplate.savingProductOptions : 'id' : 'name' }}</span>
</div>
<div fxFlexFill *ngIf="client.submittedOnDate">
<span fxFlex="40%">{{"labels.inputs.Submitted On Date" | translate}}</span>
<span fxFlex="40%">{{ 'labels.inputs.Submitted On Date' | translate }}</span>
<span fxFlex="60%">{{ client.submittedOnDate | dateFormat }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{"labels.inputs.Active" | translate}}?</span>
<span fxFlex="40%">{{ 'labels.inputs.Active' | translate }}?</span>
<span fxFlex="60%">{{ client.active | yesNo }}</span>
</div>
<div fxFlexFill *ngIf="client.activationDate">
<span fxFlex="40%">{{"labels.inputs.Activation Date" | translate}}</span>
<span fxFlex="40%">{{ 'labels.inputs.Activation Date' | translate }}</span>
<span fxFlex="60%">{{ client.activationDate | dateFormat }}</span>
</div>
<ng-container *ngIf="client.legalFormId === 1">
<div fxFlexFill *ngIf="client.genderId">
<span fxFlex="40%">{{"labels.inputs.Gender" | translate}}</span>
<span fxFlex="60%">{{ client.genderId | find:clientTemplate.genderOptions:'id':'name' }}</span>
<span fxFlex="40%">{{ 'labels.inputs.Gender' | translate }}</span>
<span fxFlex="60%">{{ client.genderId | find: clientTemplate.genderOptions : 'id' : 'name' }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{"labels.inputs.Is staff" | translate}}?</span>
<span fxFlex="40%">{{ 'labels.inputs.Is staff' | translate }}?</span>
<span fxFlex="60%">{{ client.isStaff | yesNo }}</span>
</div>
</ng-container>
<ng-container *ngIf="client.legalFormId === 2">
<div fxFlexFill *ngIf="client.clientNonPersonDetails.incorpValidityTillDate">
<span fxFlex="40%">{{"labels.inputs.Incorporation Validity Till Date" | translate}}</span>
<span fxFlex="40%">{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</span>
<span fxFlex="60%">{{ client.clientNonPersonDetails.incorpValidityTillDate | dateFormat }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{"labels.inputs.Incorportation Number" | translate}}</span>
<span fxFlex="40%">{{ 'labels.inputs.Incorportation Number' | translate }}</span>
<span fxFlex="60%">{{ client.clientNonPersonDetails.incorpNumber || 'Not Provided' }}</span>
</div>
<div fxFlexFill *ngIf="client.clientNonPersonDetails.mainBusinessLineId">
<span fxFlex="40%">{{"labels.inputs.Main Business Line" | translate}}</span>
<span fxFlex="60%">{{ client.clientNonPersonDetails.mainBusinessLineId | find:clientTemplate.clientNonPersonMainBusinessLineOptions:'id':'name' }}</span>
<span fxFlex="40%">{{ 'labels.inputs.Main Business Line' | translate }}</span>
<span fxFlex="60%">{{
client.clientNonPersonDetails.mainBusinessLineId
| find: clientTemplate.clientNonPersonMainBusinessLineOptions : 'id' : 'name'
}}</span>
</div>
<div fxFlexFill *ngIf="client.clientNonPersonDetails.constitutionId">
<span fxFlex="40%">{{"labels.inputs.Constitution" | translate}}</span>
<span fxFlex="60%">{{ client.clientNonPersonDetails.constitutionId | find:clientTemplate.clientNonPersonConstitutionOptions:'id':'name'}}</span>
<span fxFlex="40%">{{ 'labels.inputs.Constitution' | translate }}</span>
<span fxFlex="60%">{{
client.clientNonPersonDetails.constitutionId
| find: clientTemplate.clientNonPersonConstitutionOptions : 'id' : 'name'
}}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{"labels.inputs.Remarks" | translate}}</span>
<span fxFlex="40%">{{ 'labels.inputs.Remarks' | translate }}</span>
<span fxFlex="60%">{{ client.clientNonPersonDetails.remarks || 'N/A' }}</span>
</div>
</ng-container>
<div fxFlexFill *ngIf="client.familyMembers.length" fxLayout="row wrap" fxLayout.lt-md="column" class="m-b-20">
<h3 class="mat-h3" fxFlexFill>{{"labels.heading.Family Members" | translate}}</h3>
<h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Family Members' | translate }}</h3>
<mat-divider fxFlexFill></mat-divider>
<mat-accordion fxFlexFill class="m-t-5">
<mat-expansion-panel *ngFor="let member of client.familyMembers" class="family-member">
<mat-expansion-panel-header>
<mat-panel-title>
{{ member.firstName }} {{ member.middleName ? member.middleName + ' ' + member.lastName : member.lastName }}
</mat-panel-title>
<mat-panel-description>
{{member.relationship}}
{{ member.relationship }}
</mat-panel-description>
</mat-expansion-panel-header>
<mat-divider></mat-divider>
<p>
{{"labels.inputs.First Name" | translate}} : {{ member.firstName }}<br />
{{"labels.inputs.Middle Name" | translate}} : {{ member.middleName }}<br />
{{"labels.inputs.Last Name" | translate}} : {{ member.lastName }}<br />
{{"labels.inputs.Qualification" | translate}} : {{ member.qualification }}<br />
{{"labels.inputs.Relationship" | translate}} : {{ member.relationshipId | find:clientTemplate.familyMemberOptions.relationshipIdOptions:'id':'name' }}<br />
{{"labels.inputs.Age" | translate}} : {{ member.age }}<br />
{{"labels.inputs.Is Dependent" | translate}} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
{{"labels.inputs.Marital Status" | translate}} : {{ member.maritalStatusId | find:clientTemplate.familyMemberOptions.maritalStatusIdOptions:'id':'name' }}<br />
{{"labels.inputs.Gender" | translate}} : {{ member.genderId | find:clientTemplate.familyMemberOptions.genderIdOptions:'id':'name' }}<br />
{{"labels.inputs.Profession" | translate}} : {{ member.professionId | find:clientTemplate.familyMemberOptions.professionIdOptions:'id':'name' }}<br />
{{"labels.inputs.Date Of Birth" | translate}} : {{ member.dateOfBirth | dateFormat }}<br />
{{ 'labels.inputs.First Name' | translate }} : {{ member.firstName }}<br />
{{ 'labels.inputs.Middle Name' | translate }} : {{ member.middleName }}<br />
{{ 'labels.inputs.Last Name' | translate }} : {{ member.lastName }}<br />
{{ 'labels.inputs.Qualification' | translate }} : {{ member.qualification }}<br />
{{ 'labels.inputs.Relationship' | translate }} :
{{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name'
}}<br />
{{ 'labels.inputs.Age' | translate }} : {{ member.age }}<br />
{{ 'labels.inputs.Is Dependent' | translate }} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
{{ 'labels.inputs.Marital Status' | translate }} :
{{ member.maritalStatusId | find: clientTemplate.familyMemberOptions.maritalStatusIdOptions : 'id' : 'name'
}}<br />
{{ 'labels.inputs.Gender' | translate }} :
{{ member.genderId | find: clientTemplate.familyMemberOptions.genderIdOptions : 'id' : 'name' }}<br />
{{ 'labels.inputs.Profession' | translate }} :
{{ member.professionId | find: clientTemplate.familyMemberOptions.professionIdOptions : 'id' : 'name' }}<br />
{{ 'labels.inputs.Date Of Birth' | translate }} : {{ member.dateOfBirth | dateFormat }}<br />
</p>
</mat-expansion-panel>
</mat-accordion>
</div>
<div fxFlexFill *ngIf="clientTemplate.isAddressEnabled && client.address && client.address.length" fxLayout="row wrap" fxLayout.lt-md="column">
<h3 class="mat-h3" fxFlexFill>{{"labels.heading.Address" | translate}}</h3>
<div
fxFlexFill
*ngIf="clientTemplate.isAddressEnabled && client.address && client.address.length"
fxLayout="row wrap"
fxLayout.lt-md="column"
>
<h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Address' | translate }}</h3>
<mat-divider fxFlexFill></mat-divider>
<mat-accordion fxFlexFill class="m-t-5">
<mat-expansion-panel *ngFor="let address of client.address" class="address">
<mat-expansion-panel-header>
<mat-panel-title>
{{ getSelectedValue('addressTypeIdOptions', address.addressTypeId)?.name }}
</mat-panel-title>
<mat-panel-description>
{{address.relationship}}
{{ address.relationship }}
</mat-panel-description>
</mat-expansion-panel-header>
<mat-divider></mat-divider>
<p>
<span *ngIf="isFieldEnabled('street')">{{"labels.inputs.Street" | translate}} : {{address.street}}<br /></span>
<span *ngIf="isFieldEnabled('addressLine1')">{{"labels.inputs.Address Line" | translate}} 1 : {{address.addressLine1}}<br /></span>
<span *ngIf="isFieldEnabled('addressLine2')">{{"labels.inputs.Address Line" | translate}} 2 : {{address.addressLine2}}<br /></span>
<span *ngIf="isFieldEnabled('addressLine3')">{{"labels.inputs.Address Line" | translate}} 3 : {{address.addressLine3}}<br /></span>
<span *ngIf="isFieldEnabled('townVillage')">{{"labels.inputs.Town / Village" | translate}} : {{address.townVillage}}<br /></span>
<span *ngIf="isFieldEnabled('city')">{{"labels.inputs.City" | translate}} : {{address.city}}<br /></span>
<span *ngIf="isFieldEnabled('stateProvinceId')">{{"labels.inputs.State / Province" | translate}} :
{{getSelectedValue('stateProvinceIdOptions',address.stateProvinceId)?.name}}<br /></span>
<span *ngIf="isFieldEnabled('countryId')">{{"labels.inputs.Country" | translate}} :
{{getSelectedValue('countryIdOptions',address.countryId)?.name}}<br /></span>
<span *ngIf="isFieldEnabled('postalCode')">{{"labels.inputs.Postal Code" | translate}} : {{address.postalCode}}<br /></span>
<span *ngIf="isFieldEnabled('isActive')">{{"labels.inputs.Active Status" | translate}} : {{address.isActive}}<br /></span>
<span *ngIf="isFieldEnabled('street')"
>{{ 'labels.inputs.Street' | translate }} : {{ address.street }}<br
/></span>
<span *ngIf="isFieldEnabled('addressLine1')"
>{{ 'labels.inputs.Address Line' | translate }} 1 : {{ address.addressLine1 }}<br
/></span>
<span *ngIf="isFieldEnabled('addressLine2')"
>{{ 'labels.inputs.Address Line' | translate }} 2 : {{ address.addressLine2 }}<br
/></span>
<span *ngIf="isFieldEnabled('addressLine3')"
>{{ 'labels.inputs.Address Line' | translate }} 3 : {{ address.addressLine3 }}<br
/></span>
<span *ngIf="isFieldEnabled('townVillage')"
>{{ 'labels.inputs.Town / Village' | translate }} : {{ address.townVillage }}<br
/></span>
<span *ngIf="isFieldEnabled('city')">{{ 'labels.inputs.City' | translate }} : {{ address.city }}<br /></span>
<span *ngIf="isFieldEnabled('stateProvinceId')"
>{{ 'labels.inputs.State / Province' | translate }} :
{{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name }}<br
/></span>
<span *ngIf="isFieldEnabled('countryId')"
>{{ 'labels.inputs.Country' | translate }} :
{{ getSelectedValue('countryIdOptions', address.countryId)?.name }}<br
/></span>
<span *ngIf="isFieldEnabled('postalCode')"
>{{ 'labels.inputs.Postal Code' | translate }} : {{ address.postalCode }}<br
/></span>
<span *ngIf="isFieldEnabled('isActive')"
>{{ 'labels.inputs.Active Status' | translate }} : {{ address.isActive }}<br
/></span>
</p>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
<button mat-raised-button matStepperPrevious>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{"labels.buttons.Previous" | translate}}
{{ 'labels.buttons.Previous' | translate }}
</button>
<button mat-raised-button [routerLink]="['../']">
{{"labels.buttons.Cancel" | translate}}
{{ 'labels.buttons.Cancel' | translate }}
</button>
<button mat-raised-button color="primary" (click)="submitEvent.emit()">
{{"labels.buttons.Submit" | translate}}
{{ 'labels.buttons.Submit' | translate }}
</button>
</div>