66 lines
3.0 KiB
HTML
66 lines
3.0 KiB
HTML
<div class="mat-typography">
|
|
<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>
|
|
|
|
<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-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>
|
|
</div>
|