217 lines
11 KiB
HTML
217 lines
11 KiB
HTML
<!-- <div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
|
|
<div class="p-fluid flex flex-column lg:flex-row">
|
|
<menu-account></menu-account>
|
|
<p-toast></p-toast>
|
|
<div *ngIf="listing" class="surface-card p-5 shadow-2 border-round flex-auto">
|
|
<div class="text-900 font-semibold text-lg mt-3">{{ mode === 'create' ? 'New' : 'Edit' }} Listing</div>
|
|
<p-divider></p-divider>
|
|
<div class="flex gap-5 flex-column-reverse md:flex-row">
|
|
<div class="flex-auto p-fluid">
|
|
<div class="mb-4">
|
|
<label for="listingCategory" class="block font-medium text-900 mb-2">Listing category</label>
|
|
<p-dropdown
|
|
id="listingCategory"
|
|
[options]="selectOptions?.listingCategories"
|
|
[(ngModel)]="listing.listingsCategory"
|
|
optionLabel="name"
|
|
optionValue="value"
|
|
placeholder="Listing category"
|
|
[disabled]="mode === 'edit'"
|
|
[style]="{ width: '100%' }"
|
|
></p-dropdown>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="email" class="block font-medium text-900 mb-2">Title of Listing</label>
|
|
<input id="email" type="text" pInputText [(ngModel)]="listing.title" />
|
|
</div>
|
|
<div>
|
|
<div class="mb-4">
|
|
<label for="description" class="block font-medium text-900 mb-2">Description</label>
|
|
<p-editor [(ngModel)]="listing.description" [style]="{ height: '320px' }" [modules]="editorModules">
|
|
<ng-template pTemplate="header"></ng-template>
|
|
</p-editor>
|
|
</div>
|
|
</div>
|
|
@if (listing.listingsCategory==='business'){
|
|
<div class="mb-4">
|
|
<label for="type" class="block font-medium text-900 mb-2">Type of business</label>
|
|
<p-dropdown
|
|
id="type"
|
|
[options]="selectOptions?.typesOfBusiness"
|
|
[(ngModel)]="listing.type"
|
|
optionLabel="name"
|
|
optionValue="value"
|
|
[showClear]="true"
|
|
placeholder="Type of business"
|
|
[style]="{ width: '100%' }"
|
|
></p-dropdown>
|
|
</div>
|
|
} @if (listing.listingsCategory==='commercialProperty'){
|
|
<div class="mb-4">
|
|
<label for="type" class="block font-medium text-900 mb-2">Property Category</label>
|
|
<p-dropdown
|
|
id="type"
|
|
[options]="selectOptions?.typesOfCommercialProperty"
|
|
[(ngModel)]="listing.type"
|
|
optionLabel="name"
|
|
optionValue="value"
|
|
[showClear]="true"
|
|
placeholder="Property Category"
|
|
[style]="{ width: '100%' }"
|
|
></p-dropdown>
|
|
</div>
|
|
}
|
|
<div class="grid">
|
|
<div class="mb-4 col-12 md:col-6">
|
|
<label for="listingCategory" class="block font-medium text-900 mb-2">State</label>
|
|
<p-dropdown
|
|
id="listingCategory"
|
|
[options]="selectOptions?.states"
|
|
[(ngModel)]="listing.state"
|
|
optionLabel="name"
|
|
optionValue="value"
|
|
[showClear]="true"
|
|
placeholder="State"
|
|
[style]="{ width: '100%' }"
|
|
></p-dropdown>
|
|
</div>
|
|
<div class="mb-4 col-12 md:col-6">
|
|
<label for="listingCategory" class="block font-medium text-900 mb-2">City</label>
|
|
<p-autoComplete [(ngModel)]="listing.city" [suggestions]="suggestions" (completeMethod)="search($event)"></p-autoComplete>
|
|
</div>
|
|
</div>
|
|
@if (listing.listingsCategory==='commercialProperty'){
|
|
<div class="grid">
|
|
<div class="mb-4 col-12 md:col-6">
|
|
<label for="zipCode" class="block font-medium text-900 mb-2">Zip Code</label>
|
|
<input id="zipCode" type="text" pInputText [(ngModel)]="listing.zipCode" />
|
|
</div>
|
|
<div class="mb-4 col-12 md:col-6">
|
|
<label for="county" class="block font-medium text-900 mb-2">County</label>
|
|
<input id="county" type="text" pInputText [(ngModel)]="listing.county" />
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
<p-divider></p-divider>
|
|
<div class="flex gap-5 flex-column-reverse md:flex-row">
|
|
<div class="flex-auto p-fluid">
|
|
@if (listing.listingsCategory==='commercialProperty'){
|
|
<div class="grid">
|
|
<div class="mb-4 col-12 md:col-6">
|
|
<label for="price" class="block font-medium text-900 mb-2">Price</label>
|
|
<app-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price"></app-inputNumber>
|
|
</div>
|
|
<div class="mb-4 col-12 md:col-6">
|
|
<div class="flex flex-column align-items-center flex-or">
|
|
<span class="font-medium text-900 mb-2">Property Pictures</span>
|
|
<p-fileUpload
|
|
mode="basic"
|
|
chooseLabel="Upload"
|
|
[customUpload]="true"
|
|
name="file"
|
|
accept="image/*"
|
|
[maxFileSize]="maxFileSize"
|
|
(onSelect)="select($event)"
|
|
styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"
|
|
>
|
|
</p-fileUpload>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-2 border-1 surface-border border-round mb-4 image-container" cdkDropListGroup mixedCdkDragDrop (dropped)="onDrop($event)" cdkDropListOrientation="horizontal">
|
|
@for (image of propertyImages; track image) {
|
|
<span cdkDropList mixedCdkDropList>
|
|
<div cdkDrag mixedCdkDragSizeHelper class="image-wrap">
|
|
<img src="{{ environment.apiBaseUrl }}/property/{{ listing.id }}/{{ image.name }}" [alt]="image.name" class="shadow-2" cdkDrag />
|
|
<fa-icon [icon]="faTrash" (click)="deleteConfirm(image.name)"></fa-icon>
|
|
</div>
|
|
</span>
|
|
}
|
|
</div>
|
|
} @if (listing.listingsCategory==='business'){
|
|
<div class="grid">
|
|
<div class="mb-4 col-12 md:col-6">
|
|
<label for="price" class="block font-medium text-900 mb-2">Price</label>
|
|
<app-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price"></app-inputNumber>
|
|
</div>
|
|
<div class="mb-4 col-12 md:col-6">
|
|
<label for="salesRevenue" class="block font-medium text-900 mb-2">Sales Revenue</label>
|
|
<app-inputNumber mode="currency" currency="USD" inputId="salesRevenue" [(ngModel)]="listing.salesRevenue"></app-inputNumber>
|
|
</div>
|
|
</div>
|
|
<div class="grid">
|
|
<div class="mb-4 col-12 md:col-6">
|
|
<label for="cashFlow" class="block font-medium text-900 mb-2">Cash Flow</label>
|
|
<app-inputNumber mode="currency" currency="USD" inputId="cashFlow" [(ngModel)]="listing.cashFlow"></app-inputNumber>
|
|
</div>
|
|
</div>
|
|
<div class="grid">
|
|
<div class="mb-4 col-12 md:col-6">
|
|
<label for="employees" class="block font-medium text-900 mb-2">Years Established Since</label>
|
|
<app-inputNumber mode="decimal" inputId="established" [(ngModel)]="listing.established"></app-inputNumber>
|
|
</div>
|
|
<div class="mb-4 col-12 md:col-6">
|
|
<label for="employees" class="block font-medium text-900 mb-2">Employees</label>
|
|
<app-inputNumber mode="decimal" inputId="employees" [(ngModel)]="listing.employees"></app-inputNumber>
|
|
</div>
|
|
</div>
|
|
<div class="grid">
|
|
<div class="mb-4 col-12 md:col-4">
|
|
<p-checkbox [binary]="true" [(ngModel)]="listing.realEstateIncluded"></p-checkbox>
|
|
<span class="ml-2 text-900">Real Estate Included</span>
|
|
</div>
|
|
<div class="mb-4 col-12 md:col-4">
|
|
<p-checkbox [binary]="true" [(ngModel)]="listing.leasedLocation"></p-checkbox>
|
|
<span class="ml-2 text-900">Leased Location</span>
|
|
</div>
|
|
<div class="mb-4 col-12 md:col-4">
|
|
<p-checkbox [binary]="true" [(ngModel)]="listing.franchiseResale"></p-checkbox>
|
|
<span class="ml-2 text-900">Franchise Re-Sale</span>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="supportAndTraining" class="block font-medium text-900 mb-2">Support & Training</label>
|
|
<input id="supportAndTraining" type="text" pInputText [(ngModel)]="listing.supportAndTraining" />
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="reasonForSale" class="block font-medium text-900 mb-2">Reason for Sale</label>
|
|
<textarea id="reasonForSale" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="listing.reasonForSale"></textarea>
|
|
</div>
|
|
<div class="grid">
|
|
<div class="mb-4 col-12 md:col-6">
|
|
<label for="brokerLicensing" class="block font-medium text-900 mb-2">Broker Licensing</label>
|
|
<input id="brokerLicensing" type="text" pInputText [(ngModel)]="listing.brokerLicencing" />
|
|
</div>
|
|
<div class="mb-4 col-12 md:col-6">
|
|
<label for="internalListingNumber" class="block font-medium text-900 mb-2">Internal Listing Number</label>
|
|
<app-inputNumber mode="decimal" inputId="internalListingNumber" type="text" [(ngModel)]="listing.internalListingNumber"></app-inputNumber>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="internalListing" class="block font-medium text-900 mb-2">Internal Notes (Will not be shown on the listing, for your records only.)</label>
|
|
<input id="internalListing" type="text" pInputText [(ngModel)]="listing.internals" />
|
|
</div>
|
|
<div class="grid">
|
|
<div class="mb-4 col-12 md:col-6">
|
|
<p-inputSwitch inputId="draft" [(ngModel)]="listing.draft"></p-inputSwitch>
|
|
<span class="ml-2 text-900 absolute translate-y-5">Draft Mode (Will not be shown as public listing)</span>
|
|
</div>
|
|
</div>
|
|
}
|
|
<div>
|
|
@if (mode==='create'){
|
|
<button pButton pRipple label="Post Listing" class="w-auto" (click)="save()"></button>
|
|
} @else {
|
|
<button pButton pRipple label="Update Listing" class="w-auto" (click)="save()"></button>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p-toast></p-toast>
|
|
<p-confirmDialog></p-confirmDialog> -->
|