127 lines
6.1 KiB
HTML
127 lines
6.1 KiB
HTML
<div class="container mx-auto p-4">
|
|
<div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
|
|
<h1 class="text-2xl font-semibold mb-6">Edit Listing</h1>
|
|
@if(listing){
|
|
<form #listingForm="ngForm" class="space-y-4">
|
|
<div class="mb-4">
|
|
<label for="listingsCategory" class="block text-sm font-bold text-gray-700 mb-1">Listing category</label>
|
|
<ng-select
|
|
[readonly]="mode === 'edit'"
|
|
[items]="selectOptions?.listingCategories"
|
|
bindLabel="name"
|
|
bindValue="value"
|
|
[(ngModel)]="listing.listingsCategory"
|
|
(ngModelChange)="changeListingCategory($event)"
|
|
name="listingsCategory"
|
|
>
|
|
</ng-select>
|
|
</div>
|
|
|
|
<div>
|
|
<app-validated-input label="Title of Listing" name="title" [(ngModel)]="listing.title"></app-validated-input>
|
|
</div>
|
|
|
|
<div>
|
|
<app-validated-quill label="Description" name="description" [(ngModel)]="listing.description"></app-validated-quill>
|
|
</div>
|
|
|
|
<div>
|
|
<app-validated-ng-select label="Type of business" name="type" [(ngModel)]="listing.type" [items]="typesOfBusiness"></app-validated-ng-select>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<app-validated-location label="Location" name="location" [(ngModel)]="listing.location"></app-validated-location>
|
|
<app-validated-price label="Price" name="price" [(ngModel)]="listing.price"></app-validated-price>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<app-validated-price label="Sales Revenue" name="salesRevenue" [(ngModel)]="listing.salesRevenue"></app-validated-price>
|
|
<app-validated-price label="Cash Flow" name="cashFlow" [(ngModel)]="listing.cashFlow"></app-validated-price>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<app-validated-price label="Furniture, Fixtures / Equipment Value (FFE)" name="ffe" [(ngModel)]="listing.ffe"></app-validated-price>
|
|
<app-validated-price label="Inventory at Cost Value" name="inventory" [(ngModel)]="listing.inventory"></app-validated-price>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<app-validated-input label="Years established" name="established" [(ngModel)]="listing.established" mask="0000" kind="number"></app-validated-input>
|
|
<app-validated-input label="Employees" name="employees" [(ngModel)]="listing.employees" mask="0000" kind="number"></app-validated-input>
|
|
</div>
|
|
|
|
<div class="flex mb-4 space-x-4">
|
|
<div class="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
id="realEstateIncluded"
|
|
[(ngModel)]="listing.realEstateIncluded"
|
|
(ngModelChange)="onCheckboxChange('realEstateIncluded', $event)"
|
|
name="realEstateIncluded"
|
|
class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2"
|
|
/>
|
|
<label for="realEstateIncluded" class="text-sm font-bold text-gray-700">Real Estate Included</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
id="leasedLocation"
|
|
[(ngModel)]="listing.leasedLocation"
|
|
(ngModelChange)="onCheckboxChange('leasedLocation', $event)"
|
|
name="leasedLocation"
|
|
class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2"
|
|
/>
|
|
<label for="leasedLocation" class="text-sm font-bold text-gray-700">Leased Location</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
id="franchiseResale"
|
|
[(ngModel)]="listing.franchiseResale"
|
|
(ngModelChange)="onCheckboxChange('franchiseResale', $event)"
|
|
name="franchiseResale"
|
|
class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2"
|
|
/>
|
|
<label for="franchiseResale" class="text-sm font-bold text-gray-700">Franchise Re-Sale</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<app-validated-input label="Support & Training" name="supportAndTraining" [(ngModel)]="listing.supportAndTraining"></app-validated-input>
|
|
<app-validated-input label="Reason for Sale" name="reasonForSale" [(ngModel)]="listing.reasonForSale"></app-validated-input>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="brokerLicencing" class="block text-sm font-bold text-gray-700 mb-1">Broker Licensing (please maintain your license in your account)</label>
|
|
<ng-select [(ngModel)]="listing.brokerLicencing" name="brokerLicencing">
|
|
@for (licensedIn of listingUser?.licensedIn; track listingUser?.licensedIn) {
|
|
<ng-option [value]="licensedIn.registerNo">{{ licensedIn.state }} {{ licensedIn.registerNo }}</ng-option>
|
|
}
|
|
</ng-select>
|
|
</div>
|
|
<app-validated-input label="Internal Listing Number" name="internalListingNumber" [(ngModel)]="listing.internalListingNumber" kind="number" mask="00000000000000000000"></app-validated-input>
|
|
</div>
|
|
|
|
<div>
|
|
<app-validated-textarea label="Internal Notes (Will not be shown on the listing, for your records only.)" name="internals" [(ngModel)]="listing.internals"></app-validated-textarea>
|
|
</div>
|
|
|
|
<div class="flex items-center mb-4">
|
|
<label class="flex items-center cursor-pointer">
|
|
<div class="relative">
|
|
<input type="checkbox" [(ngModel)]="listing.draft" name="draft" class="hidden" />
|
|
<div class="toggle-bg block w-12 h-6 rounded-full bg-gray-600 transition"></div>
|
|
</div>
|
|
<div class="ml-3 text-gray-700 font-medium">Draft Mode (Will not be shown as public listing)</div>
|
|
</label>
|
|
</div>
|
|
@if (mode==='create'){
|
|
<button (click)="save()" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Post Listing</button>
|
|
} @else {
|
|
<button (click)="save()" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Update Listing</button>
|
|
}
|
|
</form>
|
|
}
|
|
</div>
|
|
</div>
|