24bdfe9cc6
- fetch existing addresses from api, - user can edit existing address - user can add new address
56 lines
2.5 KiB
HTML
56 lines
2.5 KiB
HTML
<details class="card p-0!" title="Click to add a new address">
|
|
<summary class="p-6">
|
|
<label for="currentAddress" class="font-medium text-gray-600 ml-2"
|
|
>{{isEditing() ? 'Update address' : 'Add new address'}}</label
|
|
>
|
|
</summary>
|
|
<form
|
|
[formGroup]="addressForm"
|
|
(ngSubmit)="submitForm()"
|
|
class="w-full flex flex-col gap-y-2 pt-0 p-4"
|
|
>
|
|
<fieldset class="flex space-x-4 w-full">
|
|
<fieldset class="fieldset w-full">
|
|
<legend class="fieldset-legend">First Name</legend>
|
|
<input type="text" formControlName="firstName" class="input" placeholder="Example: Jhon" />
|
|
<app-error fieldName="First name" [control]="addressForm.get('firstName')" />
|
|
</fieldset>
|
|
<fieldset class="fieldset w-full">
|
|
<legend class="fieldset-legend">Last Name</legend>
|
|
<input type="text" class="input" formControlName="lastName" placeholder="Example: Doe" />
|
|
<app-error fieldName="Last name" [control]="addressForm.get('lastName')" />
|
|
</fieldset>
|
|
</fieldset>
|
|
<fieldset class="fieldset w-full">
|
|
<legend class="fieldset-legend">Street Address</legend>
|
|
<input type="text" class="input" formControlName="street" placeholder="Your street address" />
|
|
<app-error fieldName="Street address" [control]="addressForm.get('street')" />
|
|
</fieldset>
|
|
<fieldset class="flex space-x-4 w-full">
|
|
<fieldset class="fieldset w-full">
|
|
<legend class="fieldset-legend">City</legend>
|
|
<input type="text" class="input" formControlName="city" placeholder="Your city" />
|
|
<app-error fieldName="City" [control]="addressForm.get('city')" />
|
|
</fieldset>
|
|
<fieldset class="fieldset w-full">
|
|
<legend class="fieldset-legend">State</legend>
|
|
<input type="text" class="input" formControlName="state" placeholder="State Name" />
|
|
<app-error fieldName="State" [control]="addressForm.get('state')" />
|
|
</fieldset>
|
|
<fieldset class="fieldset w-full">
|
|
<legend class="fieldset-legend">Pin Code</legend>
|
|
<input type="text" class="input" formControlName="pinCode" placeholder="7XX XX1" />
|
|
<app-error fieldName="Pin Code" [control]="addressForm.get('pinCode')" />
|
|
</fieldset>
|
|
</fieldset>
|
|
<div class="ml-auto flex space-x-4">
|
|
<button type="button" (click)="cancelEditing()" class="btn btn-ghost px-3 text-sm">
|
|
Cancel
|
|
</button>
|
|
<button class="btn btn-primary px-3 text-sm">
|
|
{{isEditing() ? 'Update this address' : 'Use this address'}}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</details>
|