jws-frontend/src/components/04_product-service/ProductCardComponent.vue

<script setup lang="ts">
import AllAroundBtn from '../AllAroundBtn.vue';
import { dateFormat } from 'src/utils/datetime';
import { Status } from 'src/stores/types';

withDefaults(
  defineProps<{
    title?: string;
    subtitle?: string;
    color?: string;
    status?: Status;
    date?: Date;
  }>(),
  {
    color: 'var(--brand-1)',
  },
);
</script>

<template>
  <div
    class="full-width rounded hover-card"
    :style="`border:1px solid ${color}`"
    @click="$emit('onClick')"
  >
    <div class="q-pa-md row justify-between items-center">
      <q-btn
        round
        icon="mdi-folder"
        size="12px"
        flat
        :style="`color:${color};background-color:var(--surface-0)`"
      />
      <AllAroundBtn
        :label="'viewDetail'"
        :color="color"
        @view-detail="$emit('viewDetail')"
      />
    </div>
    <div class="q-px-md">
      <div class="text-subtitle1 text-bold">{{ title }}</div>
      <div class="text-subtitle3">{{ subtitle }}</div>
    </div>
    <div class="q-pa-md q-mt-lg sub-card">
      <div>
        <div class="row justify-between q-mb-sm">
          <div class="app-text-muted">{{ $t('status') }}</div>

          <q-badge
            v-if="status !== 'INACTIVE'"
            class="q-px-md q-py-xs rounded"
            style="background-color: var(--teal-0); color: var(--teal-6)"
          >
            {{ $t('statusACTIVE') }}
          </q-badge>
          <q-badge
            v-else
            text-color="orange"
            class="q-px-md q-py-xs rounded"
            style="background-color: var(--red-1); color: var(--orange-4)"
          >
            {{ $t('statusINACTIVE') }}
          </q-badge>
        </div>
        <div class="row justify-between">
          <div class="app-text-muted">{{ 'วันที่ล่าสุด' }}</div>
          <div>{{ dateFormat(date) }}</div>
        </div>
        <div></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.sub-card {
  background-color: var(--surface-0);
  border-radius: 0 0 var(--radius-2) var(--radius-2);
  font-size: 16px;
}

.hover-card:hover {
  cursor: pointer;
  opacity: 0.8;
  box-shadow: var(--shadow-3);
}
</style>