This commit is contained in:
Andreas Knuth 2024-09-09 20:13:11 +02:00
parent 24ed50a48f
commit 17213ba4b0
2 changed files with 23 additions and 20 deletions

View File

@ -147,28 +147,31 @@
<app-tooltip [id]="tooltipTargetAreasServed" [text]="getValidationMessage('areasServed')"></app-tooltip>
}
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-6">
<label for="state" class="block text-sm font-medium text-gray-700">State</label>
</div>
<div>
<div class="col-span-5">
<label for="county" class="block text-sm font-medium text-gray-700">County</label>
</div>
</div>
@for (areasServed of user.areasServed; track areasServed; let i=$index){
<div class="grid grid-cols-1 md:grid-cols-2 md:gap-4 gap-1 mb-3 md:mb-1">
<div>
<div class="grid grid-cols-12 md:gap-4 gap-1 mb-3 md:mb-1">
<div class="col-span-6">
<ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="areasServed.state" (ngModelChange)="setState(i, $event)" name="state{{ i }}"> </ng-select>
</div>
<div>
<div class="col-span-5">
<!-- <input type="text" id="county{{ i }}" name="county{{ i }}" [(ngModel)]="areasServed.county" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" /> -->
<app-validated-county name="county{{ i }}" [(ngModel)]="areasServed.county" labelClasses="text-gray-900 font-medium" [state]="areasServed.state" [readonly]="!areasServed.state"></app-validated-county>
</div>
<div class="col-span-1">
<button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md h-[42px] w-8" (click)="removeArea(i)">-</button>
</div>
</div>
}
<div class="mt-2">
<button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2" (click)="addArea()">+</button>
<button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md" (click)="removeArea()">-</button>
<button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2 h-[42px] w-8" (click)="addArea()">+</button>
<span class="text-sm text-gray-500 ml-2">[Add more Areas or remove existing ones.]</span>
</div>
</div>
@ -185,20 +188,20 @@
<app-tooltip [id]="tooltipTargetLicensed" [text]="getValidationMessage('licensedIn')"></app-tooltip>
}
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-6">
<label for="state" class="block text-sm font-medium text-gray-700">State</label>
</div>
<div>
<div class="col-span-5">
<label for="county" class="block text-sm font-medium text-gray-700">License Number</label>
</div>
</div>
@for (licensedIn of user.licensedIn; track licensedIn; let i=$index){
<div class="grid grid-cols-1 md:grid-cols-2 md:gap-4 gap-1 mb-3 md:mb-1">
<div>
<div class="grid grid-cols-12 md:gap-4 gap-1 mb-3 md:mb-1">
<div class="col-span-6">
<ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="licensedIn.state" name="state{{ i }}"> </ng-select>
</div>
<div>
<div class="col-span-5">
<input
type="text"
id="licenseNumber{{ i }}"
@ -207,11 +210,11 @@
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
/>
</div>
<button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md h-[42px] w-8" (click)="removeLicence(i)">-</button>
</div>
}
<div class="mt-2">
<button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2" (click)="addLicence()">+</button>
<button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md" (click)="removeLicence()">-</button>
<button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2 h-[42px] w-8" (click)="addLicence()">+</button>
<span class="text-sm text-gray-500 ml-2">[Add more licenses or remove existing ones.]</span>
</div>
</div>

View File

@ -204,14 +204,14 @@ export class AccountComponent {
addLicence() {
this.user.licensedIn.push({ registerNo: '', state: '' });
}
removeLicence() {
this.user.licensedIn.splice(this.user.licensedIn.length - 1, 1);
removeLicence(index: number) {
this.user.licensedIn.splice(index, 1);
}
addArea() {
this.user.areasServed.push({ county: '', state: '' });
}
removeArea() {
this.user.areasServed.splice(this.user.areasServed.length - 1, 1);
removeArea(index: number) {
this.user.areasServed.splice(index, 1);
}
get isProfessional() {
return this.user.customerType === 'professional';