jws-frontend/src/pages/08_request-list/ProductExpansion.vue

<script setup lang="ts">
import { baseUrl } from 'src/stores/utils';

import BadgeComponent from 'src/components/BadgeComponent.vue';

import { ProductRelation, PayCondition } from 'src/stores/quotations/types';
import { Step, RequestWorkStatus } from 'src/stores/request-list/types';

const workStatus = [
  RequestWorkStatus.Ready,
  RequestWorkStatus.Waiting,
  RequestWorkStatus.InProgress,
  RequestWorkStatus.Validate,
  RequestWorkStatus.Ended,
  RequestWorkStatus.Completed,
];

defineEmits<{
  (
    e: 'changeStatus',
    v: { step?: Step; requestWorkStatus: RequestWorkStatus },
  ): void;
}>();

defineProps<{
  product: ProductRelation;
  name: string;
  code: string;
  status?: Step;
  imgUrl?: string;
  installmentInfo?: {
    total: number;
    paid?: number;
  };
  installmentNo?: number;
  paySuccess: boolean;
  payCondition: PayCondition;
  readonly?: boolean;
}>();

// NOTE: Function
</script>
<template>
  <q-expansion-item
    dense
    :class="{ 'status-unpaid': !paySuccess }"
    class="overflow-hidden"
    switch-toggle-side
    style="border-radius: var(--radius-2)"
    expand-icon="mdi-chevron-down-circle"
    header-class="surface-1"
  >
    <template v-slot:header>
      <header class="row items-center q-py-sm no-wrap full-width">
        <div
          class="img-frame rounded q-mr-md"
          :class="{ dark: $q.dark.isActive }"
          style="width: 50px; height: 50px"
        >
          <q-img
            :src="`${baseUrl}${imgUrl}`"
            style="object-fit: cover; width: 100%; height: 100%"
          >
            <template #error>
              <span
                class="flex items-center justify-center full-height full-width"
              >
                <q-img src="/shop-image.png" style="width: 80%"></q-img>
              </span>
            </template>
          </q-img>
        </div>

        <div class="row col">
          <span class="row items-center col-12 no-wrap">
            <span class="ellipsis-2-lines">
              {{ product?.name || name }}
            </span>
          </span>
          <div class="rounded q-px-xs app-text-muted surface-3">
            {{ product?.code || code }}
          </div>
        </div>

        <div class="q-ml-auto q-gutter-y-xs">
          <div class="justify-end flex">
            <q-btn-dropdown
              :disable="
                readonly ||
                status?.workStatus === 'Waiting' ||
                status?.workStatus === 'InProgress'
              "
              dense
              unelevated
              :label="
                $q.screen.lt.sm
                  ? undefined
                  : !paySuccess
                    ? $t('general.unavailable')
                    : $t(
                        `requestList.status.work.${status?.workStatus ?? RequestWorkStatus.Pending}`,
                      )
              "
              class="text-capitalize text-weight-regular product-status rounded"
              :class="{
                disable:
                  $q.screen.gt.xs &&
                  (readonly ||
                    status?.workStatus === RequestWorkStatus.Waiting ||
                    status?.workStatus === RequestWorkStatus.InProgress),
                pending:
                  $q.screen.gt.xs &&
                  !readonly &&
                  (!status?.workStatus ||
                    status?.workStatus === RequestWorkStatus.Pending ||
                    status?.workStatus === RequestWorkStatus.Ready),
                progress:
                  $q.screen.gt.xs &&
                  !readonly &&
                  status?.workStatus === RequestWorkStatus.Validate,
                complete:
                  $q.screen.gt.xs &&
                  !readonly &&
                  (status?.workStatus === RequestWorkStatus.Ended ||
                    status?.workStatus === RequestWorkStatus.Completed),
                canceled:
                  $q.screen.gt.xs &&
                  !readonly &&
                  status?.workStatus === RequestWorkStatus.Canceled,
              }"
              :style="
                readonly ||
                status?.workStatus === RequestWorkStatus.Waiting ||
                status?.workStatus === RequestWorkStatus.InProgress
                  ? `opacity: 30% !important`
                  : ''
              "
              :menu-offset="[0, 8]"
              dropdown-icon="mdi-chevron-down"
              content-class="bordered rounded"
              @click.stop
            >
              <q-list dense>
                <q-item
                  v-for="(value, index) in workStatus"
                  :key="index"
                  clickable
                  v-close-popup
                  @click="
                    $emit('changeStatus', {
                      step: status,
                      requestWorkStatus: workStatus[index],
                    })
                  "
                >
                  {{ $t(`requestList.status.work.${value}`) }}
                </q-item>
              </q-list>
            </q-btn-dropdown>
          </div>
          <div class="text-caption">
            <span
              class="q-pr-xs"
              style="border-right: 1px solid #ccc"
              v-if="$q.screen.gt.xs"
            >
              {{ $t('general.status') }}
            </span>

            <span
              class="q-pl-xs product-status-text"
              :class="{
                pending:
                  !status?.workStatus ||
                  status.workStatus === RequestWorkStatus.Pending ||
                  status.workStatus === RequestWorkStatus.Ready,
                wait: status?.workStatus === 'Waiting',
                progress:
                  status?.workStatus === RequestWorkStatus.InProgress ||
                  status?.workStatus === RequestWorkStatus.Validate,
                complete:
                  status?.workStatus === RequestWorkStatus.Ended ||
                  status?.workStatus === RequestWorkStatus.Completed,
                canceled:
                  $q.screen.gt.xs &&
                  status?.workStatus === RequestWorkStatus.Canceled,
              }"
            >
              {{
                !paySuccess
                  ? `${$t(`quotation.payCondition.${payCondition}`)} ${payCondition.includes('Split') ? `${installmentNo}/${installmentInfo?.total} ` : ''}`
                  : $t(
                      `requestList.status.work.${status?.workStatus ?? 'Pending'}`,
                    )
              }}
            </span>
          </div>
        </div>
      </header>
    </template>

    <slot :product="product"></slot>
  </q-expansion-item>
</template>
<style scoped>
.status-unpaid {
  opacity: 0.5;
  filter: grayscale(90%);
  pointer-events: none;
}

:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
  color: hsl(var(--text-mute));
}

:deep(
    i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
  ) {
  color: var(--brand-1);
}

:deep(
    .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.surface-1
      .q-focus-helper
  ) {
  visibility: hidden;
}

.img-frame {
  overflow: hidden;
  background: hsla(var(--teal-10-hsl) / 0.15);
  &.dark {
    background: hsla(var(--teal-8-hls) / 0.15);
  }
}

.product-status {
  padding-left: 8px;
  border-radius: 20px;
  color: hsl(var(--_color));
  background: hsla(var(--_color) / 0.15);
  &.disable {
    --_color: var(--stone-7-hsl);
  }
  &.pending {
    --_color: var(--yellow-6-hsl);
  }
  &.wait {
    --_color: var(--blue-6-hsl);
  }
  &.progress {
    --_color: var(--orange-5-hsl);
  }
  &.complete {
    --_color: var(--green-5-hsl);
  }
  &.canceled {
    --_color: var(--red-5-hsl);
  }
}

.product-status-text {
  color: hsl(var(--_color));

  &.pending {
    --_color: var(--yellow-6-hsl);
  }
  &.wait {
    --_color: var(--blue-6-hsl);
  }
  &.progress {
    --_color: var(--orange-5-hsl);
  }
  &.complete {
    --_color: var(--green-5-hsl);
  }
  &.canceled {
    --_color: var(--red-5-hsl);
  }
}
</style>