bizmatch-project/bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.html

<div class="container mx-auto p-4">
  <div class="bg-white rounded-lg shadow-md p-6">
    <h1 class="text-2xl font-semibold mb-6">Edit Listing</h1>
    @if (listing){
    <form #listingForm="ngForm" class="space-y-4">
      <div>
        <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"
          (ngModelChange)="changeListingCategory($event)"
          [(ngModel)]="listing.listingsCategory"
          name="listingsCategory"
        >
        </ng-select>
      </div>

      <!-- <div class="mb-4">
        <label for="title" class="block text-sm font-bold text-gray-700 mb-1">Title of Listing</label>
        <input type="text" id="title" [(ngModel)]="listing.title" name="title" class="w-full p-2 border border-gray-300 rounded-md" />
      </div> -->
      <div>
        <app-validated-input label="Title of Listing" name="title" [(ngModel)]="listing.title"></app-validated-input>
      </div>

      <div>
        <!-- <label for="description" class="block text-sm font-bold text-gray-700 mb-1">Description</label>
        <quill-editor [(ngModel)]="listing.description" name="description" [modules]="quillModules"></quill-editor> -->
        <app-validated-quill label="Description" name="description" [(ngModel)]="listing.description"></app-validated-quill>
      </div>

      <!-- <div>
        <label for="type" class="block text-sm font-bold text-gray-700 mb-1">Property Category</label>
        <ng-select [items]="typesOfCommercialProperty" bindLabel="name" bindValue="value" [(ngModel)]="listing.type" name="type"> </ng-select>
      </div> -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <app-validated-ng-select label="Property Category" name="type" [(ngModel)]="listing.type" [items]="typesOfCommercialProperty"></app-validated-ng-select>
        <app-validated-city label="Location" name="location" [(ngModel)]="listing.location"></app-validated-city>
      </div>

      <!-- <div class="flex mb-4 space-x-4">
        <div class="w-1/2">
          <label for="state" class="block text-sm font-bold text-gray-700 mb-1">State</label>
          <ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="listing.state" name="state"> </ng-select>
        </div>
        <div class="w-1/2">
          <label for="city" class="block text-sm font-bold text-gray-700 mb-1">City</label>
          <input type="text" id="city" [(ngModel)]="listing.city" name="city" class="w-full p-2 border border-gray-300 rounded-md" />
        </div>
      </div> -->
      <!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> -->
      <!-- <app-validated-ng-select label="State" name="state" [(ngModel)]="listing.location.state" [items]="selectOptions?.states"></app-validated-ng-select>
        <app-validated-input label="City" name="city" [(ngModel)]="listing.location.city"></app-validated-input> -->

      <!-- </div> -->

      <!-- <div class="flex mb-4 space-x-4">
        <div class="w-1/2">
          <label for="zipCode" class="block text-sm font-bold text-gray-700 mb-1">Zip Code</label>
          <input type="text" id="zipCode" [(ngModel)]="listing.zipCode" name="zipCode" class="w-full p-2 border border-gray-300 rounded-md" />
        </div>
        <div class="w-1/2">
          <label for="county" class="block text-sm font-bold text-gray-700 mb-1">County</label>
          <input type="text" id="county" [(ngModel)]="listing.county" name="county" class="w-full p-2 border border-gray-300 rounded-md" />
        </div>
      </div> -->
      <!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <app-validated-input label="Zip Code" name="zipCode" [(ngModel)]="listing.zipCode"></app-validated-input>
        <app-validated-input label="County" name="county" [(ngModel)]="listing.county"></app-validated-input>
      </div> -->

      <!-- <div class="mb-4">
        <label for="internals" class="block text-sm font-bold text-gray-700 mb-1">Internal Notes (Will not be shown on the listing, for your records only.)</label>
        <textarea id="internals" [(ngModel)]="listing.internals" name="internals" class="w-full p-2 border border-gray-300 rounded-md" rows="3"></textarea>
      </div> -->

      <!-- <div class="flex items-center mb-4"> -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- <div class="w-1/2">
          <label for="price" class="block text-sm font-bold text-gray-700 mb-1">Price</label>
          <input
            type="text"
            id="price"
            [(ngModel)]="listing.price"
            name="price"
            class="w-full p-2 border border-gray-300 rounded-md"
            [options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
            currencyMask
          />
        </div> -->
        <app-validated-price label="Price" name="price" [(ngModel)]="listing.price"></app-validated-price>
        <div class="flex justify-center">
          <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>
      </div>
      <!-- <div class="container mx-auto p-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          @for (image of listing.imageOrder; track listing.imageOrder) {
          <div class="relative aspect-video cursor-move">
            <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ image }}?_ts={{ ts }}" [alt]="image" class="w-full h-full object-cover rounded-lg shadow-md" />
            <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </div>
          </div>
          }
        </div>
      </div> -->
      <div class="container mx-auto pt-2">
        <!-- <div class="grid-container"> -->
        <!-- @for (image of listing.imageOrder; track image) {
          <div cdkDrag class="grid-item">
            <div class="image-box">
              <img [src]="getImageUrl(image)" [alt]="image" class="w-full h-full object-cover rounded-lg shadow-md" />
              <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </div>
            </div>
          </div>
          } -->
        <app-drag-drop-mixed [listing]="listing" [ts]="ts" (imageOrderChanged)="imageOrderChanged($event)" (imageToDelete)="deleteConfirm($event)"></app-drag-drop-mixed>
        <!-- </div> -->
      </div>

      <div class="bg-white px-4 pb-4 rounded-lg shadow">
        <h2 class="text-lg font-semibold mb-2">Property Pictures</h2>
        @if(mode === 'create'){
        <p class="text-sm text-gray-500 mb-4">(Pictures can be uploaded once the listing is posted initially)</p>
        } @if(mode !== 'create'){
        <button
          (click)="uploadPropertyPicture()"
          class="flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
        >
          <svg class="mr-2 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
          </svg>
          Upload
        </button>
        }
        <!-- <input type="file" #fileInput style="display: none" (change)="fileChangeEvent($event)" accept="image/*" /> -->
      </div>
      @if (mode==='create'){
      <button (click)="save()" class="bg-blue-500 text-white px-4 py-2 mt-3 rounded-md hover:bg-blue-600">Post Listing</button>
      } @else {
      <button (click)="save()" class="bg-blue-500 text-white px-4 py-2 mt-3 rounded-md hover:bg-blue-600">Update Listing</button>
      }
    </form>
    }
  </div>
</div>

<app-image-crop-and-upload [uploadParams]="uploadParams" (uploadFinished)="uploadFinished($event)"></app-image-crop-and-upload>
<app-confirmation></app-confirmation>