353 lines
15 KiB
HTML
353 lines
15 KiB
HTML
<div class="container">
|
|
<mat-card>
|
|
<form [formGroup]="editClientForm">
|
|
<mat-card-content>
|
|
<!-- First Row: Office, Legal Form, Account No, External ID -->
|
|
<div class="responsive-row">
|
|
<mat-form-field class="flex-24">
|
|
<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="editClientForm.controls.officeId.hasError('required')">
|
|
{{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
|
|
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="flex-24">
|
|
<mat-label>{{ 'labels.inputs.Legal Form' | translate }}</mat-label>
|
|
<mat-select formControlName="legalFormId">
|
|
<mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
|
|
{{ legalForm.value }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="flex-24">
|
|
<mat-label>{{ 'labels.inputs.Account No' | translate }}</mat-label>
|
|
<input
|
|
matInput
|
|
formControlName="accountNo"
|
|
placeholder="Account No"
|
|
title="Account No"
|
|
[placeholder]="'labels.inputs.Account No' | translate"
|
|
[title]="'labels.inputs.Account No' | translate"
|
|
/>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="flex-24">
|
|
<mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
|
|
<input
|
|
matInput
|
|
formControlName="externalId"
|
|
placeholder="External Id"
|
|
title="External Id"
|
|
[placeholder]="'labels.inputs.External Id' | translate"
|
|
[title]="'labels.inputs.External Id' | translate"
|
|
/>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<!-- Name fields section -->
|
|
<div class="responsive-row">
|
|
<mat-form-field *ngIf="editClientForm.contains('fullname')" class="flex-48">
|
|
<mat-label>{{
|
|
'labels.inputs.' + getDateLabel(legalFormId, ['Name', 'Entity Name']) | translate
|
|
}}</mat-label>
|
|
<input
|
|
matInput
|
|
required
|
|
formControlName="fullname"
|
|
placeholder="Full Name"
|
|
title="Full Name"
|
|
[placeholder]="'labels.inputs.' + getDateLabel(legalFormId, ['Name', 'Entity Name']) | translate"
|
|
[title]="'labels.inputs.' + getDateLabel(legalFormId, ['Name', 'Entity Name']) | translate"
|
|
/>
|
|
<mat-error *ngIf="editClientForm.controls.fullname.hasError('required')">
|
|
{{ 'labels.inputs.Client name' | translate }} {{ 'labels.commons.is' | translate }}
|
|
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field *ngIf="editClientForm.contains('firstname')" class="flex-32">
|
|
<mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
|
|
<input
|
|
matInput
|
|
required
|
|
formControlName="firstname"
|
|
placeholder="First Name"
|
|
title="First Name"
|
|
[placeholder]="'labels.inputs.First Name' | translate"
|
|
[title]="'labels.inputs.First Name' | translate"
|
|
/>
|
|
<mat-error *ngIf="editClientForm.controls.firstname.hasError('required')">
|
|
{{ 'labels.inputs.Client first name' | translate }} {{ 'labels.commons.is' | translate }}
|
|
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field *ngIf="editClientForm.contains('middlename')" class="flex-32">
|
|
<mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
|
|
<input
|
|
matInput
|
|
formControlName="middlename"
|
|
placeholder="Middle Name"
|
|
title="Middle Name"
|
|
[placeholder]="'labels.inputs.Middle Name' | translate"
|
|
[title]="'labels.inputs.Middle Name' | translate"
|
|
/>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field *ngIf="editClientForm.contains('lastname')" class="flex-32">
|
|
<mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
|
|
<input
|
|
matInput
|
|
required
|
|
formControlName="lastname"
|
|
placeholder="Last Name"
|
|
title="Last Name"
|
|
[placeholder]="'labels.inputs.Last Name' | translate"
|
|
[title]="'labels.inputs.Last Name' | translate"
|
|
/>
|
|
<mat-error *ngIf="editClientForm.controls.lastname.hasError('required')">
|
|
{{ 'labels.inputs.Client last name' | translate }} {{ 'labels.commons.is' | translate }}
|
|
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<mat-divider class="section-divider"></mat-divider>
|
|
|
|
<!-- Date of Birth and Gender Row -->
|
|
<div class="responsive-row">
|
|
<mat-form-field class="flex-48" (click)="dateOfBirthDatePicker.open()">
|
|
<mat-label>{{
|
|
'labels.inputs.' + getDateLabel(legalFormId, ['Date of Birth', 'Incorporation Date']) | translate
|
|
}}</mat-label>
|
|
<input
|
|
matInput
|
|
[max]="maxDate"
|
|
[matDatepicker]="dateOfBirthDatePicker"
|
|
formControlName="dateOfBirth"
|
|
placeholder="Date of Birth"
|
|
title="Date of Birth"
|
|
[placeholder]="
|
|
'labels.inputs.' + getDateLabel(legalFormId, ['Date of Birth', 'Incorporation Date']) | translate
|
|
"
|
|
[title]="
|
|
'labels.inputs.' + getDateLabel(legalFormId, ['Date of Birth', 'Incorporation Date']) | translate
|
|
"
|
|
/>
|
|
<mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
|
|
<mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field *ngIf="legalFormId === 1" class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
|
|
<mat-select formControlName="genderId">
|
|
<mat-option *ngFor="let gender of genderOptions" [value]="gender.id">
|
|
{{ gender.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<!-- Staff and Is Staff Row -->
|
|
<div class="responsive-row align-center">
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
|
|
<mat-select formControlName="staffId">
|
|
<mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
|
|
{{ staff.displayName }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-checkbox
|
|
*ngIf="legalFormId === 1"
|
|
class="flex-48 margin-v"
|
|
labelPosition="before"
|
|
formControlName="isStaff"
|
|
>
|
|
{{ 'labels.inputs.Is staff' | translate }}?
|
|
</mat-checkbox>
|
|
</div>
|
|
|
|
<div
|
|
class="flex-100 layout-row-wrap gap-2percent column-on-small"
|
|
formGroupName="clientNonPersonDetails"
|
|
*ngIf="editClientForm.contains('clientNonPersonDetails')"
|
|
>
|
|
<mat-form-field class="flex-48">
|
|
<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 }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="flex-48">
|
|
<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 }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="flex-48" (click)="incorpValidityTillDateDatePicker.open()">
|
|
<mat-label>{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</mat-label>
|
|
<input
|
|
placeholder="Incorporation Validity Till Date"
|
|
title="Incorporation Validity Till Date"
|
|
[placeholder]="'labels.inputs.Incorporation Validity Till Date' | translate"
|
|
[title]="'labels.inputs.Incorporation Validity Till Date' | translate"
|
|
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 class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Incorporation No' | translate }}</mat-label>
|
|
<input
|
|
matInput
|
|
formControlName="incorpNumber"
|
|
placeholder="Incorporation No"
|
|
title="Incorporation No"
|
|
[placeholder]="'labels.inputs.Incorporation No' | translate"
|
|
[title]="'labels.inputs.Incorporation No' | translate"
|
|
/>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="flex-98">
|
|
<mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
|
|
<textarea
|
|
matInput
|
|
formControlName="remarks"
|
|
cdkTextareaAutosize
|
|
cdkAutosizeMinRows="2"
|
|
placeholder="Remarks"
|
|
title="Remarks"
|
|
[placeholder]="'labels.inputs.Remarks' | translate"
|
|
[title]="'labels.inputs.Remarks' | translate"
|
|
></textarea>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<!-- Mobile No and Email Address Row -->
|
|
<div class="responsive-row">
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label>
|
|
<input
|
|
matInput
|
|
type="text"
|
|
formControlName="mobileNo"
|
|
placeholder="Mobile No"
|
|
title="Mobile No"
|
|
[placeholder]="'labels.inputs.Mobile No' | translate"
|
|
[title]="'labels.inputs.Mobile No' | translate"
|
|
/>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Email Address' | translate }}</mat-label>
|
|
<input
|
|
matInput
|
|
formControlName="emailAddress"
|
|
placeholder="Email Address"
|
|
title="Email Address"
|
|
[placeholder]="'labels.inputs.Email Address' | translate"
|
|
[title]="'labels.inputs.Email Address' | translate"
|
|
/>
|
|
<mat-error *ngIf="editClientForm.controls.emailAddress.errors?.email"> Email not valid </mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<!-- Client Type and Client Classification Row -->
|
|
<div class="responsive-row">
|
|
<mat-form-field class="flex-48">
|
|
<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 }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Client Classification' | translate }}</mat-label>
|
|
<mat-select formControlName="clientClassificationId">
|
|
<mat-option
|
|
*ngFor="let clientClassification of clientClassificationTypeOptions"
|
|
[value]="clientClassification.id"
|
|
>
|
|
{{ clientClassification.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<!-- Submitted On and Activated On Row -->
|
|
<div class="responsive-row">
|
|
<mat-form-field class="flex-48" (click)="submittedOnDatePicker.open()">
|
|
<mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
|
|
<input
|
|
placeholder="Submitted On"
|
|
title="Submitted On"
|
|
[placeholder]="'labels.inputs.Submitted On' | translate"
|
|
[title]="'labels.inputs.Submitted On' | translate"
|
|
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-error *ngIf="editClientForm.controls.submittedOnDate.hasError('required')">
|
|
{{ 'labels.inputs.Submitted Date' | translate }} {{ 'labels.commons.is' | translate }}
|
|
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="flex-48" (click)="activatedOnDatePicker.open()">
|
|
<mat-label>{{ 'labels.inputs.Activated On' | translate }}</mat-label>
|
|
<input
|
|
placeholder="Activated On"
|
|
title="Activated On"
|
|
[placeholder]="'labels.inputs.Activated On' | translate"
|
|
[title]="'labels.inputs.Activated On' | translate"
|
|
matInput
|
|
[min]="editClientForm.value.submittedOnDate"
|
|
[max]="maxDate"
|
|
[matDatepicker]="activatedOnDatePicker"
|
|
formControlName="activationDate"
|
|
/>
|
|
<mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
|
|
<mat-datepicker #activatedOnDatePicker></mat-datepicker>
|
|
</mat-form-field>
|
|
</div>
|
|
</mat-card-content>
|
|
|
|
<mat-card-actions class="button-container">
|
|
<button type="button" mat-raised-button [routerLink]="['../general']">
|
|
{{ 'labels.buttons.Cancel' | translate }}
|
|
</button>
|
|
<button type="submit" mat-raised-button color="primary" [disabled]="!editClientForm.valid" (click)="submit()">
|
|
{{ 'labels.buttons.Submit' | translate }}
|
|
</button>
|
|
</mat-card-actions>
|
|
</form>
|
|
</mat-card>
|
|
</div>
|