nitesh
63ab9643ce
Files restored from dev during the demo-backup merge were missing the standard license header (dev's copies predate that fix, which had only been applied on the demo line previously). Also fixed pre-existing lint debt surfaced by the edit: wrong component selector prefix and constructor-injection pattern in client-family-member-child-dialog.
111 lines
4.7 KiB
HTML
111 lines
4.7 KiB
HTML
<!--
|
|
Copyright since 2025 Mifos Initiative
|
|
|
|
This Source Code Form is subject to the terms of the Mozilla Public
|
|
License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
-->
|
|
|
|
<div class="fm-dialog">
|
|
<div class="fm-dialog__header" style="display: flex; align-items: center; gap: 8px">
|
|
<mat-icon class="fm-dialog__icon">people</mat-icon>
|
|
<span style="font-weight: 500; font-size: 18px">CHILDREN</span>
|
|
</div>
|
|
|
|
<mat-dialog-content>
|
|
<form [formGroup]="childrenForm">
|
|
<div formArrayName="children" style="margin-top: 12px; background: #fff; padding: 12px">
|
|
@for (child of children.controls; track $index) {
|
|
<div
|
|
[formGroupName]="$index"
|
|
style="
|
|
position: relative;
|
|
padding: 24px 16px 16px;
|
|
margin-top: 16px;
|
|
margin-bottom: 24px;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
"
|
|
>
|
|
<div class="fm-grid">
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Child Full Name*</mat-label>
|
|
<input matInput formControlName="fullName" required placeholder="Child Full Name*" />
|
|
</mat-form-field>
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Gender*</mat-label>
|
|
<mat-select formControlName="genderId" required>
|
|
@for (g of genderIdOptions; track g.id) {
|
|
<mat-option [value]="g.id">{{ g.name }}</mat-option>
|
|
}
|
|
</mat-select>
|
|
</mat-form-field>
|
|
<mat-form-field appearance="outline" (click)="childDobPicker.open()">
|
|
<mat-label>Date of Birth</mat-label>
|
|
<input matInput [max]="maxDate" [matDatepicker]="childDobPicker" formControlName="dateOfBirth" />
|
|
<mat-datepicker-toggle matSuffix [for]="childDobPicker"></mat-datepicker-toggle>
|
|
<mat-datepicker #childDobPicker></mat-datepicker>
|
|
</mat-form-field>
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Nationality</mat-label>
|
|
<mat-select formControlName="nationality">
|
|
<mat-option value="INDIAN">Indian</mat-option>
|
|
<mat-option value="NRI">NRI</mat-option>
|
|
<mat-option value="FOREIGN_NATIONAL">Foreign National</mat-option>
|
|
<mat-option value="OTHER">Other</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Aadhaar Number (Optional)</mat-label>
|
|
<input
|
|
matInput
|
|
formControlName="aadhaarNumber"
|
|
maxlength="12"
|
|
placeholder="12-digit Aadhaar"
|
|
(keypress)="$event.charCode >= 48 && $event.charCode <= 57 ? true : $event.preventDefault()"
|
|
/>
|
|
</mat-form-field>
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>PAN Number (Optional)</mat-label>
|
|
<input
|
|
matInput
|
|
formControlName="panNumber"
|
|
maxlength="10"
|
|
placeholder="ABCDE1234F"
|
|
style="text-transform: uppercase"
|
|
(input)="
|
|
$any(children.at($index))
|
|
.get('panNumber')
|
|
?.setValue($any($event.target).value.toUpperCase(), { emitEvent: false })
|
|
"
|
|
/>
|
|
@if (
|
|
$any(children.at($index)).get('panNumber')?.hasError('pattern') &&
|
|
$any(children.at($index)).get('panNumber')?.touched
|
|
) {
|
|
<mat-error>Invalid PAN format</mat-error>
|
|
}
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
@if ($index < children.controls.length - 1) {
|
|
<div style="border-bottom: 1px dashed #ccc; margin-bottom: 16px"></div>
|
|
}
|
|
}
|
|
<div style="border-bottom: 1px dashed #ccc; margin-bottom: 16px"></div>
|
|
<button mat-stroked-button type="button" color="primary" (click)="addChild()">
|
|
<mat-icon>add</mat-icon> Add Another Child
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</mat-dialog-content>
|
|
|
|
<mat-dialog-actions align="end">
|
|
<button mat-stroked-button mat-dialog-close type="button">Cancel</button>
|
|
<button mat-flat-button color="primary" type="button" [disabled]="childrenForm.invalid" (click)="submit()">
|
|
Add Member
|
|
</button>
|
|
</mat-dialog-actions>
|
|
</div>
|