conversion inputs to components

This commit is contained in:
2024-08-02 20:14:07 +02:00
parent 29f88d610f
commit c9305749d2
28 changed files with 528 additions and 300 deletions

View File

@@ -84,18 +84,20 @@
</div>
@if (isProfessional){
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<!-- <div>
<label for="companyName" class="block text-sm font-medium text-gray-700">Company Name</label>
<input type="text" id="companyName" name="companyName" [(ngModel)]="user.companyName" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
</div>
<div>
</div> -->
<!-- <div>
<label for="description" class="block text-sm font-medium text-gray-700">Describe yourself</label>
<input type="text" id="description" name="description" [(ngModel)]="user.description" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
</div>
</div> -->
<app-validated-input label="Company Name" name="companyName" [(ngModel)]="user.companyName"></app-validated-input>
<app-validated-input label="Describe yourself" name="description" [(ngModel)]="user.description"></app-validated-input>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<!-- <div>
<label for="phoneNumber" class="block text-sm font-medium text-gray-700">Your Phone Number</label>
<input type="tel" id="phoneNumber" name="phoneNumber" [(ngModel)]="user.phoneNumber" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
</div>
@@ -106,21 +108,37 @@
<div>
<label for="companyLocation" class="block text-sm font-medium text-gray-700">Company Location</label>
<input type="text" id="companyLocation" name="companyLocation" [(ngModel)]="user.companyLocation" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
</div>
</div> -->
<app-validated-input label="Your Phone Number" name="phoneNumber" [(ngModel)]="user.phoneNumber"></app-validated-input>
<app-validated-input label="Company Website" name="companyWebsite" [(ngModel)]="user.companyWebsite"></app-validated-input>
<app-validated-input label="Company Location" name="companyLocation" [(ngModel)]="user.companyLocation"></app-validated-input>
</div>
<!-- <div>
<label for="companyOverview" class="block text-sm font-medium text-gray-700">Company Overview</label>
<quill-editor [(ngModel)]="user.companyOverview" name="companyOverview" [modules]="quillModules"></quill-editor>
</div> -->
<app-validated-quill label="Company Overview" name="companyOverview" [(ngModel)]="user.companyOverview" (ngModelChange)="test($event)"></app-validated-quill>
<div>
<label for="offeredServices" class="block text-sm font-medium text-gray-700">Services We Offer</label>
<quill-editor [(ngModel)]="user.offeredServices" name="offeredServices" [modules]="quillModules"></quill-editor>
<app-validated-quill label="Company Overview" name="companyOverview" [(ngModel)]="user.companyOverview"></app-validated-quill>
</div>
<div>
<!-- <label for="offeredServices" class="block text-sm font-medium text-gray-700">Services We Offer</label>
<quill-editor [(ngModel)]="user.offeredServices" name="offeredServices" [modules]="quillModules"></quill-editor> -->
<app-validated-quill label="Services We Offer" name="offeredServices" [(ngModel)]="user.offeredServices"></app-validated-quill>
</div>
<div>
<h3 class="text-lg font-medium text-gray-700 mb-2">Areas We Serve</h3>
<h3 class="text-lg font-medium text-gray-700 mb-2 relative w-fit">
Areas We Serve @if(getValidationMessage('areasServed')){
<div
[attr.data-tooltip-target]="tooltipTarget"
class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
>
!
</div>
<app-tooltip [id]="tooltipTarget" [text]="getValidationMessage('areasServed')"></app-tooltip>
}
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="state" class="block text-sm font-medium text-gray-700">State</label>