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

<script setup lang="ts">
import { dateFormat } from 'src/utils/datetime';
import { Status } from 'stores/types';
import KebabAction from '../shared/KebabAction.vue';
withDefaults(
  defineProps<{
    title?: string;
    subtitle?: string;
    color?: string;
    status?: Status;
    date?: Date;
    isType?: boolean;
    id?: string;
    isDisabled?: boolean;
    noAction?: boolean;
    countType?: number;
    countProduct?: number;
    countService?: number;
    action?: boolean;
  }>(),
  {
    color: 'var(--brand-1)',
  },
);
</script>

<template>
  <div
    :id="`enter-${title}`"
    class="full-width rounded q-pa-sm"
    @click="
      () => {
        $emit('onClick');
      }
    "
    :class="{
      'hover-card': !isDisabled,
    }"
    :style="`border: 1px solid hsla(var(--gray-7-hsl) / ${isDisabled ? 0.1 : 0.3})`"
  >
    <div
      class="relative-position rounded q-pb-lg"
      :style="`background-color:hsla(${color}/.2)`"
    >
      <div class="row justify-between items-center">
        <q-avatar
          round
          icon="mdi-folder"
          size="48px"
          class="q-my-md q-ml-md"
          :class="{ 'disabled-card': isDisabled }"
          :style="`color:hsl(${color});background-color:var(--surface-1) `"
        />

        <KebabAction
          :id-name="id"
          :status="status"
          class="absolute-top-right"
          v-if="action"
          @view="$emit('viewCard')"
          @edit="$emit('updateCard')"
          @delete="$emit('deleteCard')"
          @change-status="$emit('toggleStatus', id)"
        />
      </div>

      <div class="q-px-md" :class="{ 'disabled-card': isDisabled }">
        <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>{{ countType }}</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>{{ countService }}</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>{{ countProduct }}</div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="q-pt-lg q-pb-sm row justify-between"
      :class="{ 'disabled-card': isDisabled }"
    >
      <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('viewCard');
          }
        "
        unelevated
        class="q-px-sm text-capitalize"
        :label="$t('general.detail')"
        style="
          background-color: hsla(var(--blue-5-hsl) / 0.1);
          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);
}

.disabled-card {
  opacity: 0.4;

  cursor: pointer;
}
</style>