jws-frontend/src/pages/04_product-service/MainPage.vue

<script setup lang="ts">
import { ref } from 'vue';
import AppBox from 'components/app/AppBox.vue';
import ProductCardComponent from 'src/components/04_product-service/ProductCardComponent.vue';
import StatCard from 'components/StatCardComponent.vue';
import NewProductCardCompoent from 'components/04_product-service/NewProductCardComponent.vue';
const cardData = ref({
  title: 'งาน MCU',
  subtitle: 'G00000000001',
  color: 'var(--pink-6)',
  status: true,
  date: new Date(),
});

const stat = ref<
  {
    count: number;
    label: string;
    color: 'pink' | 'purple' | 'green';
  }[]
>([
  { count: 5, label: 'branchHQLabel', color: 'pink' },
  { count: 4, label: 'branchLabel', color: 'purple' },
  { count: 12, label: 'branchLabel', color: 'green' },
]);

const inputSearch = ref<string>('');
</script>

<template>
  <div class="column q-pb-lg">
    <div class="text-h6 text-weight-bold q-mb-md">กลุ่มสินค้าและบริการ</div>
    <AppBox bordered class="q-mb-md">
      <StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" />
    </AppBox>
    <AppBox bordered style="min-height: 80vh">
      <div class="row justify-between">
        <div class="text-h6 text-weight-bold q-mb-md">
          กลุ่มสินค้าและบริการทั้งหมด
        </div>
        <div class="row q-px-md q-pb-md">
          <q-input
            style="width: 250px"
            outlined
            dense
            :label="$t('search')"
            class="q-mr-lg"
            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
            v-model="inputSearch"
            debounce="500"
          ></q-input>
          <q-btn
            icon="mdi-tune-vertical-variant"
            size="sm"
            :color="$q.dark.isActive ? 'dark' : 'white'"
            :text-color="$q.dark.isActive ? 'white' : 'dark'"
            class="bordered rounded"
            unelevated
          >
            <q-menu class="bordered">
              <q-list v-close-popup dense>
                <q-item
                  clickable
                  class="flex items-center"
                  @click="console.log('test')"
                >
                  {{ $t('all') }}
                </q-item>
                <q-item
                  clickable
                  class="flex items-center"
                  @click="console.log('test')"
                >
                  {{ $t('statusACTIVE') }}
                </q-item>
                <q-item
                  clickable
                  class="flex items-center"
                  @click="console.log('test')"
                >
                  {{ $t('statusINACTIVE') }}
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </div>
      </div>
      <div class="row q-col-gutter-lg">
        <div class="col-3" v-for="i in 6" :key="i">
          <ProductCardComponent
            :title="cardData.title"
            :subtitle="cardData.subtitle"
            :date="cardData.date"
            :status="cardData.status"
            :color="cardData.color"
          />
        </div>
        <div class="col-3">
          <NewProductCardCompoent
            :label="'กลุ่มสินค้าและบริการ'"
            :isType="false"
          />
        </div>
      </div>
    </AppBox>
  </div>
</template>

<style scoped></style>