ISA-Frontend/apps/page/pickup-shelf/src/lib/shared/pickup-shelf-details-header/pickup-shelf-details-header.component.html

<ng-container *ngIf="orderItem$ | async; let orderItem">
  <div class="grid grid-flow-row gap-px-2">
    <div class="bg-[#F5F7FA] flex flex-row justify-between items-center p-4 rounded-t">
      <div class="grid grid-flow-col gap-[0.4375rem] items-center" *ngIf="features$ | async; let features; else: featureLoading">
        <shared-icon *ngIf="features?.length > 0" [size]="24" icon="person"></shared-icon>
        <div class="grid grid-flow-col gap-2 items-center font-bold text-p2" *ngFor="let feature of features">
          {{ feature?.description }}
        </div>
      </div>

      <button
        [disabled]="editButtonDisabled$ | async"
        class="page-pickup-shelf-details-header__edit-cta bg-transparent text-brand font-bold border-none text-p1"
        *ngIf="editClick.observers.length"
        (click)="editClick.emit(orderItem)"
      >
        Bearbeiten
      </button>
    </div>

    <div class="page-pickup-shelf-details-header__details bg-white px-4 pt-4 pb-5">
      <div class="flex flex-row items-center" [class.mb-8]="!orderItem?.features?.paid && !isKulturpass">
        <page-pickup-shelf-details-header-nav-menu class="mr-2" [customer]="customer$ | async"></page-pickup-shelf-details-header-nav-menu>
        <h2 class="page-pickup-shelf-details-header__details-header items-center">
          <div class="text-h2">
            {{ orderItem?.organisation }}
            <ng-container *ngIf="!!orderItem?.organisation && (!!orderItem?.firstName || !!orderItem?.lastName)"> - </ng-container>
            {{ orderItem?.lastName }}
            {{ orderItem?.firstName }}
          </div>
          <div class="page-pickup-shelf-details-header__header-compartment text-h3">
            {{ orderItem?.compartmentCode }}{{ orderItem?.compartmentInfo && '_' + orderItem?.compartmentInfo }}
          </div>
        </h2>
      </div>

      <div class="page-pickup-shelf-details-header__paid-marker mt-[0.375rem]" *ngIf="orderItem?.features?.paid && !isKulturpass">
        <div class="font-bold flex flex-row items-center justify-center text-p2 text-[#26830C]">
          <shared-icon class="flex items-center justify-center mr-[0.375rem]" [size]="24" icon="credit-card"></shared-icon>
          {{ orderItem?.features?.paid }}
        </div>
      </div>
      <div class="page-pickup-shelf-details-header__paid-marker mt-[0.375rem] text-[#26830C]" *ngIf="isKulturpass">
        <svg class="fill-current mr-2" xmlns="http://www.w3.org/2000/svg" height="22" viewBox="0 -960 960 960" width="22">
          <path
            d="M880-740v520q0 24-18 42t-42 18H140q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h680q24 0 42 18t18 42ZM140-631h680v-109H140v109Zm0 129v282h680v-282H140Zm0 282v-520 520Z"
          />
        </svg>
        <strong> Bezahlt über KulturPass </strong>
      </div>

      <div class="page-pickup-shelf-details-header__details-wrapper -mt-3">
        <div class="flex flex-row page-pickup-shelf-details-header__buyer-number" data-detail-id="Kundennummer">
          <div class="min-w-[9rem]">Kundennummer</div>
          <div class="flex flex-row font-bold">{{ orderItem?.buyerNumber }}</div>
        </div>
        <div class="flex flex-row page-pickup-shelf-details-header__order-number" data-detail-id="VorgangId">
          <div class="min-w-[9rem]">Vorgang-ID</div>
          <div class="flex flex-row font-bold">{{ orderItem?.orderNumber }}</div>
        </div>
        <div class="flex flex-row page-pickup-shelf-details-header__order-date" data-detail-id="Bestelldatum">
          <div class="min-w-[9rem]">Bestelldatum</div>
          <div class="flex flex-row font-bold">{{ orderItem?.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
        </div>
        <div class="flex flex-row page-pickup-shelf-details-header__processing-status justify-between" data-detail-id="Status">
          <div class="min-w-[9rem]">Status</div>
          <div *ngIf="!(changeStatusLoader$ | async)" class="flex flex-row font-bold -mr-[0.125rem]">
            <span *ngIf="!(canEditStatus$ | async)">
              {{ orderItem?.processingStatus | processingStatus }}
            </span>
            <ng-container *ngIf="canEditStatus$ | async">
              <button
                class="cta-status-dropdown"
                [uiOverlayTrigger]="statusDropdown"
                [disabled]="changeStatusDisabled$ | async"
                #dropdown="uiOverlayTrigger"
              >
                <div class="mr-[0.375rem]">
                  {{ orderItem?.processingStatus | processingStatus }}
                </div>
                <shared-icon
                  [size]="24"
                  [class.rotate-0]="!dropdown.opened"
                  [class.-rotate-180]="dropdown.opened"
                  icon="arrow-drop-down"
                ></shared-icon>
              </button>
              <ui-dropdown #statusDropdown yPosition="below" xPosition="after" [xOffset]="8">
                <button uiDropdownItem *ngFor="let action of statusActions$ | async" (click)="handleActionClick(action)">
                  {{ action.label }}
                </button>
              </ui-dropdown>
            </ng-container>
          </div>
          <ui-spinner *ngIf="changeStatusLoader$ | async; let loader" class="flex flex-row font-bold loader" [show]="loader"></ui-spinner>
        </div>
        <div class="flex flex-row page-pickup-shelf-details-header__order-source" data-detail-id="Bestellkanal">
          <div class="min-w-[9rem]">Bestellkanal</div>
          <div class="flex flex-row font-bold">{{ order?.features?.orderSource }}</div>
        </div>
        <div
          class="flex flex-row page-pickup-shelf-details-header__change-date justify-between"
          [ngSwitch]="orderItem.processingStatus"
          data-detail-id="Geaendert"
        >
          <!-- orderType 1 === Abholung / Rücklage; orderType 2 === Versand / B2B-Versand; orderType 4 === Download (ist manchmal auch orderType 2) -->
          <ng-container *ngIf="orderItem.orderType === 1; else changeDate">
            <ng-container *ngSwitchCase="16">
              <ng-container *ngTemplateOutlet="vslLieferdatum"></ng-container>
            </ng-container>
            <ng-container *ngSwitchCase="8192">
              <ng-container *ngTemplateOutlet="vslLieferdatum"></ng-container>
            </ng-container>
            <ng-container *ngSwitchCase="128">
              <ng-container *ngTemplateOutlet="abholfrist"></ng-container>
            </ng-container>
          </ng-container>

          <ng-template #changeDate>
            <div class="min-w-[9rem]">Geändert</div>
            <div class="flex flex-row font-bold">{{ orderItem?.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
          </ng-template>
        </div>

        <div
          class="flex flex-row page-pickup-shelf-details-header__pick-up justify-between"
          data-detail-id="Wunschdatum"
          *ngIf="orderItem.orderType === 1 && (orderItem.processingStatus === 16 || orderItem.processingStatus === 8192)"
        >
          <ng-container *ngTemplateOutlet="preferredPickUpDate"></ng-container>
        </div>

        <div class="flex flex-col page-pickup-shelf-details-header__dig-and-notification">
          <div
            *ngIf="orderItem.orderType === 1"
            class="flex flex-row page-pickup-shelf-details-header__notification"
            data-detail-id="Benachrichtigung"
          >
            <div class="min-w-[9rem]">Benachrichtigung</div>
            <div class="flex flex-row font-bold">{{ (notificationsChannel$ | async | notificationsChannel) || '-' }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <ng-template #featureLoading>
    <div class="fetch-wrapper">
      <div class="fetching"></div>
      <div class="fetching"></div>
      <div class="fetching"></div>
    </div>
  </ng-template>

  <ng-template #abholfrist>
    <div class="min-w-[9rem]">Abholfrist</div>
    <div *ngIf="!(changeDateLoader$ | async)" class="flex flex-row font-bold">
      <button
        [uiOverlayTrigger]="deadlineDatepicker"
        #deadlineDatepickerTrigger="uiOverlayTrigger"
        [disabled]="!isKulturpass && (!!orderItem?.features?.paid || (changeDateDisabled$ | async))"
        class="cta-pickup-deadline"
      >
        <strong class="border-r border-[#AEB7C1] pr-4">
          {{ orderItem?.pickUpDeadline | date: 'dd.MM.yy' }}
        </strong>
        <shared-icon class="text-[#596470] ml-4" [size]="24" icon="isa-calendar"></shared-icon>
      </button>
      <ui-datepicker
        #deadlineDatepicker
        yPosition="below"
        xPosition="after"
        [xOffset]="8"
        [min]="minDateDatepicker"
        [disabledDaysOfWeek]="[0]"
        [selected]="orderItem?.pickUpDeadline"
        (save)="updatePickupDeadline($event)"
      >
      </ui-datepicker>
    </div>
    <ui-spinner *ngIf="changeDateLoader$ | async; let loader" class="flex flex-row font-bold loader" [show]="loader"></ui-spinner>
  </ng-template>

  <ng-template #preferredPickUpDate>
    <div class="min-w-[9rem]">Zurücklegen bis</div>
    <div *ngIf="!(changePreferredDateLoader$ | async)" class="flex flex-row font-bold">
      <button
        [uiOverlayTrigger]="preferredPickUpDatePicker"
        #preferredPickUpDatePickerTrigger="uiOverlayTrigger"
        [disabled]="(!isKulturpass && !!orderItem?.features?.paid) || (changeDateDisabled$ | async)"
        class="cta-pickup-preferred"
      >
        <strong class="border-r border-[#AEB7C1] pr-4" *ngIf="findLatestPreferredPickUpDate$ | async; let pickUpDate; else: selectTemplate">
          {{ pickUpDate | date: 'dd.MM.yy' }}
        </strong>
        <ng-template #selectTemplate>
          <strong class="border-r border-[#AEB7C1] pr-4">Auswählen</strong>
        </ng-template>
        <shared-icon class="text-[#596470] ml-4" [size]="24" icon="isa-calendar"></shared-icon>
      </button>
      <ui-datepicker
        #preferredPickUpDatePicker
        yPosition="below"
        xPosition="after"
        [xOffset]="8"
        [min]="minDateDatepicker"
        [disabledDaysOfWeek]="[0]"
        [selected]="(findLatestPreferredPickUpDate$ | async) || today"
        (save)="updatePreferredPickUpDate($event)"
      >
      </ui-datepicker>
    </div>
    <ui-spinner *ngIf="changePreferredDateLoader$ | async; let loader" class="flex flex-row font-bold loader" [show]="loader"> </ui-spinner>
  </ng-template>

  <ng-template #vslLieferdatum>
    <div class="min-w-[9rem]">vsl. Lieferdatum</div>
    <div *ngIf="!(changeDateLoader$ | async)" class="flex flex-row font-bold">
      <button
        class="cta-datepicker"
        [disabled]="changeDateDisabled$ | async"
        [uiOverlayTrigger]="uiDatepicker"
        #datepicker="uiOverlayTrigger"
      >
        <span class="border-r border-[#AEB7C1] pr-4">
          {{ orderItem?.estimatedShippingDate | date: 'dd.MM.yy' }}
        </span>
        <shared-icon class="text-[#596470] ml-4" [size]="24" icon="isa-calendar"></shared-icon>
      </button>
      <ui-datepicker
        #uiDatepicker
        yPosition="below"
        xPosition="after"
        [xOffset]="8"
        [min]="minDateDatepicker"
        [disabledDaysOfWeek]="[0]"
        [selected]="orderItem?.estimatedShippingDate"
        (save)="updateEstimatedShippingDate($event)"
      >
      </ui-datepicker>
    </div>
    <ui-spinner *ngIf="changeDateLoader$ | async; let loader" class="flex flex-row font-bold loader" [show]="loader"></ui-spinner>
  </ng-template>
</ng-container>