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';
import DrawerInfo from 'src/components/DrawerInfo.vue';
import BasicInformation from 'src/components/04_product-service/BasicInformation.vue';
import FormDialog from 'src/components/FormDialog.vue';
import { dialog } from 'src/stores/utils';

import useProductServiceStore from 'src/stores/product-service';
import {
  ProductGroup,
  ProductGroupCreate,
  ProductGroupUpdate,
} from 'src/stores/product-service/types';

const productServiceStore = useProductServiceStore();

const {
  fetchStatsProductGroup,
  fetchListProductService,
  createProductService,
  editProductService,
  deleteProductService,
} = productServiceStore;

import ItemCard from 'src/components/ItemCard.vue';
import TotalProductComponent from 'src/components/04_product-service/TotalProductComponent.vue';

const cardData = ref({
  title: 'งาน MCU',
  subtitle: 'G00000000001',
  color: 'var(--pink-6)',
  status: true,
  date: new Date(),
});

const cardTypeData = ref({
  title: 'บริการพิสูจน์สัญชาติ',
  subtitle: 'TG10000000001',
  color: 'var(--purple-11)',
  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' },
]);

import { useI18n } from 'vue-i18n';
import { onMounted } from 'vue';

const { t } = useI18n();

const inputSearch = ref<string>('');
const drawerInfo = ref<boolean>(false);
const isEdit = ref<boolean>(false);
const dialogInputForm = ref<boolean>(false);

const groupName = ref<string>('งาน MOU');
const dialogProductServiceType = ref<boolean>(false);
const dialogTotalProduct = ref<boolean>(false);
const productMode = ref<'group' | 'type' | 'service' | 'product'>('group');
const productGroup = ref<ProductGroup[]>();

const previousValue = ref();

const formData = ref<ProductGroupCreate>({
  remark: '',
  detail: '',
  name: '',
  code: '',
});

const currentId = ref<string>('');

async function submitType() {
  console.log(formData.value);
}

const itemCard = [
  {
    icon: 'mdi:server-network',
    text: 'บริการ',
    color: 'var(--orange-5)',
  },
  {
    icon: 'mdi:shopping',
    text: 'สินค้า',
    color: 'var(--green-9)',
  },
];

async function deleteProductById() {
  dialog({
    color: 'negative',
    icon: 'mdi-alert',
    title: t('deleteConfirmTitle'),
    actionText: t('ok'),
    persistent: true,
    message: t('deleteConfirmMessage'),
    action: async () => {
      if (productMode.value === 'type') {
        // Product Type
      } else {
        // Product Group
        await deleteProductService(currentId.value);
        await fetchListGroups();
      }
      console.log('deleted');
      drawerInfo.value = false;
    },
    cancel: () => {},
  });
}

function undoProductGroup() {
  console.log('dasd');

  formData.value = {
    remark: previousValue.value.remark,
    detail: previousValue.value.detail,
    name: previousValue.value.name,
    code: previousValue.value.code,
  };
  isEdit.value = false;
}

function assignFormData(data: ProductGroup) {
  previousValue.value = data;

  formData.value = {
    remark: data.remark,
    detail: data.detail,
    name: data.name,
    code: data.code,
  };
}

function clearForm() {
  formData.value = {
    remark: '',
    detail: '',
    name: '',
    code: '',
  };

  dialogInputForm.value = false;
}

async function submitGroup() {
  if (drawerInfo.value) {
    await editProductService(currentId.value, formData.value);
  } else {
    await createProductService(formData.value);
  }

  await fetchListGroups();
  clearForm();
}

async function fetchListGroups() {
  const res = await fetchListProductService();

  if (res) {
    productGroup.value = res;
  }
}

onMounted(async () => {
  await fetchListGroups();
});
</script>

<template>
  <div v class="column q-pb-lg">
    <div
      v-if="productMode === 'group'"
      class="text-h6 text-weight-bold q-mb-md"
    ></div>
    <div v-else-if="productMode === 'type'" class="row items-center q-mb-md">
      <q-btn
        round
        icon="mdi-arrow-left"
        flat
        dense
        @click="productMode = 'group'"
        class="q-mr-md"
      />
      <div class="text-h6 app-text-muted q-mr-sm hover-underline">
        {{ groupName }}
      </div>
      <div class="text-h6 app-text-muted q-mx-sm">/</div>
      <div class="text-h6 text-weight-bold">
        {{ $t('ProductAndServiceType') }}
      </div>
    </div>
    <div v-else-if="productMode === 'service'" class="row items-center q-mb-md">
      <q-btn
        round
        icon="mdi-arrow-left"
        flat
        dense
        @click="productMode = 'type'"
        class="q-mr-md"
      />
      <div class="text-h6 app-text-muted q-mr-sm hover-underline">
        {{ groupName }}
      </div>
      <div class="text-h6 app-text-muted q-mx-sm">/</div>
      <div class="text-h6 app-text-muted q-mr-sm hover-underline">
        {{ 'บริการพิสูจน์สัญชาติ' }}
      </div>
      <div class="text-h6 app-text-muted q-mx-sm">/</div>
      <div class="text-h6 text-weight-bold">
        {{ $t('mainProductTitle') }}
      </div>
    </div>

    <AppBox
      v-if="productMode === 'group' || productMode === 'type'"
      bordered
      class="q-mb-md"
    >
      <StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" />
    </AppBox>
    <AppBox
      v-if="productMode === 'group' || productMode === 'type'"
      bordered
      style="min-height: 80vh"
    >
      <div class="row justify-between">
        <div
          v-if="productMode === 'type'"
          class="text-h6 text-weight-bold q-mb-md"
        >
          {{ $t('ProductAndServiceType') }}
        </div>
        <div
          v-else-if="productMode === 'group'"
          class="text-h6 text-weight-bold q-mb-md"
        >
          {{ $t('ProductAndServiceAll') }}
        </div>
        <div
          v-if="productMode === 'group' || productMode === 'type'"
          class="row q-px-md q-pb-md"
        >
          <q-input
            style="width: 300px"
            outlined
            dense
            :label="$t('search')"
            class="q-mr-lg"
            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
            v-model="inputSearch"
            debounce="500"
          >
            <template v-slot:prepend>
              <q-icon name="mdi-magnify" />
            </template>
          </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="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
          v-for="(v, i) in productMode ? productGroup : productGroup"
          :key="i"
        >
          <ProductCardComponent
            v-if="productMode === 'type'"
            :title="cardTypeData.title"
            :subtitle="cardTypeData.subtitle"
            :date="cardTypeData.date"
            :status="v.status"
            :color="cardTypeData.color"
            @view-detail="
              () => {
                currentId = v.id;
                drawerInfo = true;
              }
            "
            @on-click="
              () => {
                currentId = v.id;
                productMode = 'service';
              }
            "
          />
          <ProductCardComponent
            v-else-if="productMode === 'group'"
            :title="v.name"
            :subtitle="v.code"
            :date="new Date(v.updatedAt)"
            :status="v.status"
            color="var(--pink-6)"
            @view-detail="
              () => {
                assignFormData(v);
                currentId = v.id;
                drawerInfo = true;
              }
            "
            @on-click="
              () => {
                currentId = v.id;
                productMode = 'type';
              }
            "
          />
        </div>
        <div
          :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
        >
          <NewProductCardCompoent
            v-if="productMode === 'type'"
            :label="$t('ProductAndServiceType')"
            :isType="true"
            @on-click="() => (dialogInputForm = true)"
          />
          <NewProductCardCompoent
            v-else-if="productMode === 'group'"
            :label="$t('ProductAndService')"
            :isType="false"
            @on-click="() => (dialogInputForm = true)"
          />
        </div>
      </div>
    </AppBox>
    <AppBox bordered v-else-if="productMode === 'service'" no-padding>
      <div
        class="row justify-center q-py-sm"
        style="background-color: var(--surface-2)"
      >
        <q-input
          style="width: 500px"
          outlined
          dense
          :label="$t('search')"
          class="q-mr-md"
          :bg-color="$q.dark.isActive ? 'dark' : 'white'"
          v-model="inputSearch"
          debounce="500"
        >
          <template v-slot:prepend>
            <q-icon name="mdi-magnify" />
          </template>
        </q-input>
        <q-btn
          icon="mdi-plus"
          :color="$q.dark.isActive ? 'dark' : 'white'"
          :text-color="$q.dark.isActive ? 'white' : 'dark'"
          class="bordered rounded q-px-sm"
          unelevated
          @click="dialogProductServiceType = true"
        />
        <div class="q-mx-lg">ปุ่มรวมสินค้าทั้งหมด >></div>
        <q-btn
          unelevated
          @click="dialogTotalProduct = true"
          class="bordered rounded q-px-sm"
          icon="mdi-plus"
          :color="$q.dark.isActive ? 'dark' : 'white'"
          :text-color="$q.dark.isActive ? 'white' : 'dark'"
          round
        />
      </div>
      <div class="flex justify-center items-center" style="min-height: 70vh">
        asdasdasd
      </div>
    </AppBox>
  </div>

  <FormDialog
    v-model:modal="dialogInputForm"
    noAddress
    :title="$t('customerEmployerAdd')"
    :submit="
      () => {
        submitGroup();
      }
    "
    :close="() => {}"
  >
    <template #information>
      <BasicInformation
        dense
        :isType="productMode === 'type'"
        v-model:remark="formData.remark"
        v-model:name="formData.name"
        v-model:detail="formData.detail"
      />
    </template>
  </FormDialog>

  <DrawerInfo
    ref="formDialogRef"
    v-model:drawerOpen="drawerInfo"
    :title="'test'"
    :undo="() => undoProductGroup()"
    :isEdit="isEdit"
    :editData="() => (isEdit = true)"
    :submit="() => (productMode === 'type' ? submitType() : submitGroup())"
    :delete-data="() => deleteProductById()"
    :close="() => (drawerInfo = false)"
  >
    <template #info>
      <AppBox class="q-ma-md" bordered>
        <BasicInformation
          dense
          :isType="productMode === 'type'"
          :readonly="!isEdit"
          v-model:remark="formData.remark"
          v-model:name="formData.name"
          v-model:code="formData.code"
          v-model:detail="formData.detail"
        />
      </AppBox>
    </template>
  </DrawerInfo>

  <FormDialog
    v-model:modal="dialogProductServiceType"
    :title="'สร้างสินค้าและบริการ'"
    no-footer
    no-app-box
    :max-width="80"
  >
    <template #body>
      <div class="row q-gutter-xl q-pa-sm">
        <ItemCard
          class="col"
          v-for="i in itemCard"
          changeColor
          :key="i.text"
          :icon="i.icon"
          :text="i.text"
          :color="i.color"
          @trigger="
            () => {
              dialogProductServiceType = false;
              console.log('test');
            }
          "
        />
      </div>
    </template>
  </FormDialog>

  <FormDialog
    v-model:modal="dialogTotalProduct"
    noAddress
    noAppBox
    title="รวมสินค้าทั้งหมด (2 ชิ้น)"
    :submit="
      () => {
        console.log('submit');
      }
    "
    :close="() => {}"
  >
    <TotalProductComponent />
  </FormDialog>
</template>

<style scoped>
.hover-underline:hover {
  cursor: pointer;
  text-decoration: underline;
}
</style>