jws-frontend/src/components/05_quotation/QuotationCard.vue

<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';
import { formatNumberDecimal } from 'src/stores/utils';
import BadgeComponent from 'components/BadgeComponent.vue';
import KebabAction from '../shared/KebabAction.vue';
import MainButton from '../button/MainButton.vue';

defineProps<{
  title?: string;
  code?: string;
  amount?: number;
  status?: string;
  workerCount?: number;
  workerMax?: number;
  createdAt?: string;
  validUntil?: string;
  customerName?: string;
  reporter?: string;
  totalPrice?: number;
  urgent?: boolean;
  hidePreview?: boolean;
  badgeColor?: string;

  customData?: {
    label: string;
    value: string | number | unknown;
    slotName?: string;
  }[];
}>();

defineEmits<{
  (e: 'view'): void;
  (e: 'edit'): void;
  (e: 'link'): void;
  (e: 'upload'): void;
  (e: 'delete'): void;
  (e: 'example'): void;
  (e: 'preview'): void;
}>();

const rand = Math.random();
</script>
<template>
  <div
    class="surface-1 rounded q-pa-sm quo-card bordered"
    :class="{ 'urgent-card': urgent }"
    :style="{ '--animation-delay': rand + 's' }"
  >
    <!-- SEC: header -->
    <header class="row items-center no-wrap">
      <div v-if="urgent" class="q-mr-sm" style="font-size: 90%">
        <BadgeComponent
          icon="mdi-fire"
          :title="$t('general.urgent2')"
          hsla-color="--gray-1-hsl"
          hsla-background="--red-8-hsl"
          solid
        />
      </div>
      <div class="q-mr-sm" style="font-size: 90%">
        <BadgeComponent
          :title="status"
          :hsla-color="badgeColor || '--blue-6-hsl'"
          :border="urgent"
        />
      </div>

      <nav class="col text-right">
        <q-btn
          v-if="!hidePreview"
          flat
          dense
          rounded
          icon="mdi-play-box-outline"
          size="12px"
          :title="$t('preview.doc')"
          @click.stop="$emit('preview')"
        />
        <q-btn
          flat
          dense
          rounded
          icon="mdi-eye-outline"
          size="12px"
          :title="$t('general.viewDetail')"
          @click.stop="$emit('view')"
        />
        <KebabAction
          :idName="code"
          status="ACTIVE"
          hide-toggle
          @view="$emit('view')"
          @edit="$emit('edit')"
          @link="$emit('link')"
          @upload="$emit('upload')"
          @delete="$emit('delete')"
        />
      </nav>
    </header>

    <div class="ellipsis q-px-xs">
      <b>{{ title || '-' }}</b>
      <q-tooltip anchor="bottom start" self="top left">
        {{ title || '-' }}
      </q-tooltip>
    </div>
    <div class="ellipsis q-px-xs q-mb-sm app-text-muted" style="font-size: 80%">
      {{ code || '-' }}
      <q-tooltip anchor="bottom start" self="top left">
        {{ title || '-' }}
      </q-tooltip>
    </div>

    <!-- SEC: body -->
    <section
      class="rounded q-px-sm"
      :class="{
        'surface-1': urgent,
        'surface-2': !urgent,
      }"
    >
      <article
        class="q-py-sm"
        :class="{
          row: $q.screen.gt.sm,
          column: $q.screen.lt.sm,
        }"
        v-if="customData && customData?.length > 0"
      >
        <template v-for="cData in customData" :key="cData.label">
          <template v-if="cData.slotName">
            <slot :name="cData.slotName" :props="cData" />
          </template>
          <template v-else>
            <div class="col-4 app-text-muted q-pr-sm">
              {{ cData.label || '-' }}
            </div>
            <div class="col-8">{{ cData.value || '-' }}</div>
          </template>
        </template>
      </article>

      <article v-else class="row q-py-sm">
        <div class="col-4 app-text-muted q-pr-sm">
          {{ $t('quotation.customerName') }}
        </div>
        <div class="col-8">{{ customerName || '-' }}</div>
        <div class="col-4 app-text-muted q-pr-sm">
          {{ $t('quotation.actor') }}
        </div>
        <div class="col-8">{{ reporter || '-' }}</div>
        <div class="col-4 app-text-muted q-pr-sm">
          {{ $t('quotation.employee') }}
        </div>
        <div class="col-8">
          <BadgeComponent
            :hsla-color="badgeColor"
            icon="mdi-account-multiple-outline"
            :title="[workerCount, workerMax].join(' / ')"
          />
        </div>
        <div class="col-4 app-text-muted q-pr-sm">
          {{ $t('general.createdAt') }}
        </div>
        <div class="col-8">
          {{ createdAt }}
        </div>
        <div class="col-4 app-text-muted q-pr-sm">
          {{ $t('general.validUntil') }}
        </div>
        <div class="col-8">
          {{ validUntil }}
        </div>
        <div class="col-4 app-text-muted q-pr-sm">
          {{ $t('quotation.totalPrice') }}
        </div>
        <div class="col-8">
          {{ formatNumberDecimal(totalPrice || 0, 2) }}
        </div>
      </article>
    </section>
  </div>
</template>

<style scoped>
.badge-card {
  font-size: 12px;
  color: hsla(var(--gray-0-hsl) / 1);
  background: hsla(var(--_color) / 1);
}

.badge-card__fullAmountCash {
  --_color: var(--red-6-hsl);
}

.badge-card__installmentsCash {
  --_color: var(--blue-6-hsl);
}

.badge-card__fullAmountBill {
  --_color: var(--jungle-8-hsl);
}

.badge-card__installmentsBill {
  --_color: var(--purple-7-hsl);
}

.dark .badge-card__installmentsCash {
  --_color: var(--blue-10-hsl);
}

span {
  display: inline-block;
  /*new:*/
  line-height: 12px;
  height: 12px;
}

.urgent-card {
  --_color: var(--red-7-hsl);
  background-color: hsla(var(--red-7-hsl) / 0.07) !important;
  border: 0.5px solid var(--red-6) !important;
  animation: status 1s infinite;
  animation-delay: var(--animation-delay);

  .code {
    color: var(--red-6);
  }

  .tag {
    font-size: 12px;
    border-radius: var(--radius-2);
    background: hsl(var(--red-7-hsl));
    color: white;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(240, 62, 62, 1);
    -moz-box-shadow: 0px 0px 6px 0px rgba(240, 62, 62, 1);
    box-shadow: 0px 0px 6px 0px rgba(240, 62, 62, 1);
  }
}

@keyframes status {
  0% {
    box-shadow: 0x 0px 0px hsla(var(--_color) / 1);
  }
  50% {
    box-shadow: 0px 0px 1px 4px hsla(var(--_color) / 0.3);
  }
  100% {
    box-shadow: 0px 0px 4px 12px hsla(var(--_color) / 0);
  }
}
</style>