119 lines
6.5 KiB
HTML
119 lines
6.5 KiB
HTML
<div class=" mt-2">
|
|
|
|
<form [formGroup]="adminuserForm" (ngSubmit)="onSubmit($event)" >
|
|
<div class="ml-2 grid md:grid-cols-2 gap-3 p-2">
|
|
<div class="">
|
|
<label for="lastname1">Surname<strong class="app-require">*</strong></label>
|
|
<input id="lastname1" pInputText formControlName="lastname" type="text"
|
|
[class]="getClassForRequire('inputfield w-full p-inputtext-sm','lastname')">
|
|
</div>
|
|
<div class="">
|
|
<label for="firstname">First Name<strong class="app-require">*</strong></label>
|
|
<input id="firstname" pInputText formControlName="firstname" type="text"
|
|
[class]="getClassForRequire('inputfield w-full p-inputtext-sm','firstname')">
|
|
</div>
|
|
<div class="">
|
|
<label class="flex w-full">Sex <strong class="app-require">*</strong></label>
|
|
<p-select [options]="sexList" optionLabel="name" optionValue="status" placeholder="Select Gender"
|
|
formControlName="sex"
|
|
[class]="getClassForRequire('inputfield w-full p-inputtext-sm','sex')"
|
|
class="w-full p-inputtext-sm mr-1"></p-select >
|
|
</div>
|
|
<div class="">
|
|
<label for="dob" class="flex w-full">DOB</label>
|
|
<p-datepicker ariaLabelledBy="dob" formControlName="dob" [iconDisplay]="'input'" [showIcon]="true" dateFormat="dd/mm/yy" ></p-datepicker>
|
|
</div>
|
|
<div class="">
|
|
<label for="login">Email</label>
|
|
<input id="login" [attr.disabled]="!isNew?true:null" pInputText formControlName="email"
|
|
type="text" class="inputfield w-full">
|
|
</div>
|
|
<div class="">
|
|
<label for="phone" class="w-full">Phone</label>
|
|
<input class="w-full" id="phone" pInputText formControlName="phone" type="text" >
|
|
</div>
|
|
<div class="">
|
|
<label class="flex w-full">Father</label>
|
|
<p-select [filter]="true" [showClear]="true" filterBy="name" [options]="fatherList" optionLabel="name" appendTo="body" optionValue="id" placeholder="Select Parent"
|
|
formControlName="fatherId" class="w-full p-inputtext-sm mr-1"></p-select >
|
|
</div>
|
|
<div class="">
|
|
<label class="flex w-full">Mother</label>
|
|
<p-select [options]="motherList" [showClear]="true" [filter]="true" filterBy="name" optionLabel="name" appendTo="body" optionValue="id" placeholder="Select Parent"
|
|
formControlName="motherId" class="w-full p-inputtext-sm mr-1"></p-select >
|
|
</div>
|
|
|
|
<div class="grid align-end">
|
|
<div class="p-field-checkbox">
|
|
<p-checkbox inputId="alive" formControlName="alive" [binary]="true"></p-checkbox>
|
|
<label for="alive" class="ml-2 w-full">Alive</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="field col-12 md:col-6 sm:col-8">
|
|
<div class="shadow-md rounded-xl border-gray-100 border-1 p-4">
|
|
@if (adminuserForm.value.image != "" && adminuserForm.value.image != null)
|
|
{
|
|
<div class="ml-6 file-upload">
|
|
<!--a href="{{hostsite}}/{{adminuserForm.value.image}}" target="_blank" class="text-blue-400">View Attachment
|
|
</a-->
|
|
<button pButton type="button" icon="pi pi-image"
|
|
class ="p-ripple p-button p-button-raised p-button-text p-button-warn p-component"
|
|
pTooltip="view Image" (click)="doViewImage(adminuserForm.value.image)"></button>
|
|
<button pButton type="button" icon="pi pi-times" pTooltip="remove attach file"
|
|
class="p-button-rounded p-button-text text-red-500 p-button-raised ml-2"
|
|
(click)="deleteFile()"></button>
|
|
</div>
|
|
}
|
|
@else
|
|
{
|
|
<div class="ml-6 ">
|
|
<input type="file" class="file-input" (change)="onFileSelected($event)" #fileUpload>
|
|
<div class="file-upload">
|
|
<label>{{ adminuserForm.value.image || "No attachment file uploaded yet."}}</label>
|
|
<button pButton type="button" icon="pi pi-paperclip"
|
|
class="p-button-rounded p-button-text p-button-raised ml-2" pTooltip="attach file"
|
|
(click)="fileUpload.click()"></button>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 w-full">
|
|
<p-button class="flex justify-end mr-2" icon="pi pi-user" [raised]="true" severity="info" label="Add Partner"
|
|
(onClick)="addPartner()"/>
|
|
<div class="shadow rounded mt-2 mb-2">
|
|
<p-table [value]="partners()">
|
|
<ng-template #header>
|
|
<tr>
|
|
<th>First Name</th>
|
|
<th>Last Name</th>
|
|
<th>Sex</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</ng-template>
|
|
<ng-template #body let-user>
|
|
<tr>
|
|
<td>{{ user.pfirstName }}</td>
|
|
<td>{{ user.plastName }}</td>
|
|
<td>{{ user.sex }}</td>
|
|
<td>
|
|
<button pButton type="button" icon="pi pi-times" class="p-button-rounded p-button-text p-button-danger"
|
|
(click)="onDeletePartner(user)"></button>
|
|
</td>
|
|
</tr>
|
|
</ng-template>
|
|
</p-table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end mr-2 mb-2 p-2">
|
|
<button pButton type="submit" class="p-button-sm mr-2" icon="pi pi-check" label="Save" [disabled]="isFieldsChange"></button>
|
|
<button pButton pRipple class="p-button-sm p-button-secondary" type="button" icon="pi pi-times" label="Cancel" (click)="cancel($event)"></button>
|
|
</div>
|
|
</form>
|
|
<!--pre>{{ adminuserForm.value|json}}</pre-->
|
|
</div> |