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

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

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

<template>
  <div
    class="full-width rounded hover-card bordered q-pa-sm"
    @click="$emit('onClick')"
  >
    <div
      class="relative-position rounded q-pb-lg"
      :style="`background-color:hsla(${color}/0.1)`"
    >
      <div class="row justify-between items-center">
        <q-avatar
          round
          icon="mdi-folder"
          size="48px"
          class="q-my-md q-ml-md"
          :style="`color:hsl(${color});background-color:var(--surface-1)`"
        />

        <q-btn
          flat
          round
          padding="sm"
          class="absolute-top-right dots-btn"
          icon="mdi-dots-vertical"
          style="z-index: 99"
          size="sm"
          @click.stop=""
        >
          <q-menu class="bordered">
            <q-list v-close-popup>
              <q-item
                clickable
                dense
                class="row q-py-sm"
                style="white-space: nowrap"
                @click="$emit('viewCard')"
              >
                <q-icon
                  name="mdi-eye-outline"
                  class="col-3"
                  size="xs"
                  style="color: hsl(var(--green-6-hsl))"
                />
                <span class="col-9 q-px-md flex items-center">
                  {{ $t('viewDetail') }}
                </span>
              </q-item>
              <q-item
                dense
                clickable
                class="row q-py-sm"
                style="white-space: nowrap"
                @click="$emit('updateCard')"
                v-close-popup
              >
                <q-icon
                  name="mdi-pencil-outline"
                  class="col-3"
                  size="xs"
                  style="color: hsl(var(--cyan-6-hsl))"
                />
                <span class="col-9 q-px-md flex items-center">
                  {{ $t('edit') }}
                </span>
              </q-item>
              <q-item
                dense
                clickable
                @click="$emit('deleteCard')"
                v-close-popup
              >
                <q-icon
                  name="mdi-trash-can-outline"
                  size="xs"
                  class="col-3 app-text-negative"
                />
                <span class="col-9 q-px-md flex items-center">
                  {{ $t('delete') }}
                </span>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
      </div>

      <div class="q-px-md">
        <div class="text-subtitle1 text-bold">{{ title }}</div>
        <div class="text-subtitle3 app-text-muted">{{ subtitle }}</div>
        <div class="row q-gutter-md q-mt-sm">
          <div
            v-if="!isType"
            class="col-3 bordered row justify-between q-px-sm rounded no-wrap"
            style="border-radius: 5px"
          >
            <div><q-icon name="mdi-folder-table" /></div>
            <div>10</div>
          </div>
          <div
            class="col-3 bordered row justify-between q-px-sm rounded no-wrap"
            style="border-radius: 5px"
          >
            <div><q-icon name="mdi-server-network" /></div>
            <div>10</div>
          </div>
          <div
            class="col-3 bordered row justify-between q-px-sm rounded no-wrap"
            style="border-radius: 5px"
          >
            <div><q-icon name="mdi-shopping" /></div>
            <div>10</div>
          </div>
        </div>
      </div>
    </div>
    <div class="q-pt-lg q-pb-sm row justify-between">
      <div class="flex items-center">
        <q-icon
          size="xs"
          name="mdi-calendar-month"
          class="q-mr-sm rounded q-pa-xs"
          style="color: var(--stone-6); background-color: var(--surface-3)"
        />
        {{ dateFormat(date) }}
      </div>
      <q-btn
        @click.stop="$emit('viewDetail')"
        unelevated
        class="q-px-sm"
        :label="$t('detail')"
        style="background-color: var(--indigo-0); color: var(--blue-5)"
      >
        <q-icon
          size="xs"
          name="mdi-chevron-right"
          class="rounded"
          style="color: var(--blue-5)"
        />
      </q-btn>
    </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>