Untitled

mail@pastecode.io avatar
unknown
plain_text
14 days ago
4.8 kB
1
Indexable
Never
<div class=" md:py-18 py-14 px-6 dark:bg-dark-footer rounded">

  <form [formGroup]="addOfferForm" (submit)="addOffer()" *ngIf="categories.length > 0">

    <!-- SHOULD BE A DROPDOWN -->

    <div class="lg:col-span-6 mb-5">

      <label

        for="idCategory"

        class="mb-2 inline-block text-neutral-500 dark:text-neutral-400">Select category</label>



      <select name="idCategory" id="idCategory" type="text"

              class=" cursor-pointer form-input dark:border-white/70 dark:text-white bg-transparent bg-clip-padding text-base font-normal text-surface

dark:bg-gray-800 dark:border-gray-700 text-gray-900"

              formControlName="idCategory">



        <option *ngFor="let category of categories;" [value]="category._id">{{ category.description }}</option>

      </select>

    </div>



    <div class="grid lg:grid-cols-12 lg:gap-6 mb-5">

      <div class="lg:col-span-6">

        <input name="place" id="place" type="text"

               class="form-input dark:border-white/70 dark:text-white bg-transparent bg-clip-padding text-base font-normal text-surface"

               placeholder="Place" formControlName="place">

      </div>



      <div class="lg:col-span-6">

        <input name="plageOffer" id="plageOffer" type="text"

               class="form-input dark:border-white/70 dark:text-white bg-transparent bg-clip-padding text-base font-normal text-surface"

               placeholder="Plage Offer"

               formControlName="plageOffer">

      </div>

    </div>



    <div class="mb-5">

      <input name="limitMax" id="limitMax" type="number"

             class="form-input dark:border-white/70 dark:text-white bg-transparent bg-clip-padding text-base font-normal text-surface"

             placeholder="Maximum limit"

             formControlName="limitMax">

    </div>



    <div class="mb-5">

      <textarea name="description" id="description"

                class="form-input dark:border-white/70 dark:text-white bg-transparent bg-clip-padding text-base font-normal text-surface textarea h-24"

                placeholder="Description" formControlName="description"></textarea>

    </div>



    <div class="flex gap-3 items-center mb-5">

      <div class="flex-1">

        <input formControlName="startDate" id="startDate"

               class="form-input dark:border-white/70 dark:text-white bg-transparent bg-clip-padding text-base font-normal text-surface"

               placeholder="Start date"

               [owlDateTimeTrigger]="startDate" [owlDateTime]="startDate">

        <owl-date-time [pickerType]="'calendar'" #startDate></owl-date-time>

      </div>



      <div class="flex-1">

        <input formControlName="endDate" id="endDate"

               class="form-input dark:border-white/70 dark:text-white bg-transparent bg-clip-padding text-base font-normal text-surface"

               placeholder="End date"

               [owlDateTimeTrigger]="endDate" [owlDateTime]="endDate">

        <owl-date-time [pickerType]="'calendar'" #endDate></owl-date-time>

      </div>

    </div>



    <div class="mb-5">

      <label

        for="imageUrl"

        class="mb-2 inline-block text-neutral-500 dark:text-neutral-400"

      >Select image</label>

      <input

        class=" form-input relative m-0 block w-full min-w-0 flex-auto cursor-pointer rounded border border-solid border-secondary-500 bg-transparent bg-clip-padding px-3 py-[0.32rem] text-base font-normal text-surface transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:me-3 file:cursor-pointer file:overflow-hidden file:rounded-none file:border-0 file:border-e file:border-solid file:border-inherit file:bg-transparent file:px-3  file:py-[0.32rem] file:text-surface focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none dark:border-white/70 dark:text-white  file:dark:text-white"

        type="file"

        (change)="onImageSelected($event)"

        id="imageUrl"

        name="imageUrl"/>

    </div>

    <button type="submit" id="submit" name="add"

            class="btn bg-orange-600 hover:bg-orange-700 border-orange-600 hover:border-orange-700 text-white rounded-md h-11 justify-center flex items-center">

      Add

    </button>

  </form>



  <div *ngIf="categories.length === 0">

    <div class="grid grid-cols-1 pb-8">

      <div class="flex justify-center gap-3 rounded bg-orange-100 dark:bg-orange-400 p-4">

        <span class="mdi mdi-cancel text-5xl text-slate-600 dark:text-slate-300"></span>

        <div>

          <p class="text-slate-600 text-lg font-bold dark:text-slate-300 max-w-xl mx-auto">No categories yet..</p>

          <p class="text-slate-600 dark:text-slate-300 max-w-xl mx-auto">Please add a category first.</p>

        </div>

      </div>

    </div>

  </div>



</div>



Leave a Comment