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;
}>();

defineEmits<{
  (e: 'view'): void;
  (e: 'edit'): void;
  (e: 'link'): void;
  (e: 'upload'): void;
  (e: 'delete'): void;
  (e: 'example'): void;
  (e: 'preview'): void;
}>();
</script>
<template>
  <div
    class="surface-1 rounded q-pa-xs quo-card bordered"
    :class="{ 'urgent-card': urgent }"
  >
    <!-- SEC: header -->
    <header class="row items-center no-wrap">
      <q-img src="/images/quotation-avatar-border.png" width="2rem" />

      <div class="column q-ml-sm relative-position" style="font-size: 12px">
        <span>
          {{ $t('general.itemNo', { msg: $t('quotation.title') }) }}
        </span>
        <span
          class="text-caption row items-center"
          :class="urgent ? 'code' : 'app-text-muted'"
        >
          {{ code }}
        </span>
      </div>
      <div v-if="urgent" class="tag q-px-xs q-ml-sm">
        <q-icon name="mdi-fire" size="12px" />
        <span>{{ $t('general.urgent2') }}</span>
      </div>

      <nav class="col text-right">
        <q-btn
          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
          use-upload
          @view="$emit('view')"
          @edit="$emit('edit')"
          @link="$emit('link')"
          @upload="$emit('upload')"
          @delete="$emit('delete')"
        />
      </nav>
    </header>

    <div class="ellipsis q-px-sm q-py-sm">
      {{ title || '-' }}
      <q-tooltip anchor="bottom start" self="top left">
        {{ title || '-' }}
      </q-tooltip>
    </div>

    <!-- SEC: body -->
    <section class="surface-1 rounded q-px-sm">
      <article class="row no-wrap q-py-sm items-center" style="font-size: 90%">
        <span class="app-text-muted q-pr-sm">{{ $t('general.status') }} :</span>
        <BadgeComponent :title="status" hsla-color="--blue-6-hsl" />
      </article>
      <q-separator />
      <article 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
            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 {
  background-color: hsla(var(--red-3-hsl) / 0.2) !important;
  border: 1px solid var(--red-6) !important;

  .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);
  }
}
</style>