From 3d89ce5a8898b8b67cd3f2a7cde59ba106cf18d9 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Mon, 23 Dec 2024 14:08:19 +0700
Subject: [PATCH] refactor: use new select product group

#151
---
 .../shared/select/SelectProductGroup.vue      | 124 ++++++++++++++++++
 .../QuotationFormProductSelect.vue            |  46 ++-----
 2 files changed, 135 insertions(+), 35 deletions(-)
 create mode 100644 src/components/shared/select/SelectProductGroup.vue

diff --git a/src/components/shared/select/SelectProductGroup.vue b/src/components/shared/select/SelectProductGroup.vue
new file mode 100644
index 00000000..5a1dac62
--- /dev/null
+++ b/src/components/shared/select/SelectProductGroup.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+import { createSelect, SelectProps } from './select';
+import SelectInput from '../SelectInput.vue';
+
+import { ProductGroup } from 'stores/product-service/types';
+
+import useStore from 'stores/product-service';
+
+type SelectOption = ProductGroup;
+
+const value = defineModel<string | null | undefined>('value', {
+  required: true,
+});
+const valueOption = defineModel<SelectOption>('valueOption', {
+  required: false,
+});
+
+const selectOptions = ref<SelectOption[]>([]);
+
+const { fetchProductGroup: getList, fetchProductGroupById: getById } =
+  useStore();
+
+defineEmits<{
+  (e: 'create'): void;
+}>();
+
+type ExclusiveProps = {
+  selectFirstValue?: boolean;
+};
+
+const props = defineProps<SelectProps<typeof getList> & ExclusiveProps>();
+
+const { getOptions, setFirstValue, getSelectedOption, filter } =
+  createSelect<SelectOption>(
+    {
+      value,
+      valueOption,
+      selectOptions,
+      getList: async (query) => {
+        const ret = await getList({
+          query,
+          ...props.params,
+          activeOnly: true,
+        });
+        if (ret) return ret.result;
+      },
+      getByValue: async (id) => {
+        const ret = await getById(id);
+        if (ret) return ret;
+      },
+    },
+    { valueField: 'id' },
+  );
+
+onMounted(async () => {
+  await getOptions();
+
+  if (props.autoSelectOnSingle && selectOptions.value.length === 1) {
+    setFirstValue();
+  }
+
+  if (props.selectFirstValue) {
+    setDefaultValue();
+  } else await getSelectedOption();
+});
+
+function setDefaultValue() {
+  setFirstValue();
+}
+</script>
+<template>
+  <SelectInput
+    v-model="value"
+    incremental
+    option-label="code"
+    option-value="id"
+    :label
+    :placeholder
+    :readonly
+    :disable="disabled"
+    :option="selectOptions"
+    :hide-selected="false"
+    :fill-input="false"
+    :rules="[
+      (v: string) => !props.required || !!v || $t('form.error.required'),
+    ]"
+    @filter="filter"
+  >
+    <template #append v-if="clearable">
+      <q-icon
+        v-if="!readonly && value"
+        name="mdi-close-circle"
+        @click.stop="value = ''"
+        class="cursor-pointer clear-btn"
+      />
+    </template>
+
+    <template #option="{ scope }">
+      <q-item
+        v-if="scope.opt"
+        v-bind="scope.itemProps"
+        class="row items-center"
+      >
+        <q-item-section>
+          {{ scope.opt.name }}
+          <span class="app-text-muted text-caption">
+            {{ scope.opt.code }}
+          </span>
+        </q-item-section>
+      </q-item>
+    </template>
+
+    <template #selected-item="{ opt }">
+      <q-item-section v-if="opt">
+        {{ opt.name }}
+        <span class="app-text-muted text-caption">
+          {{ opt.code }}
+        </span>
+      </q-item-section>
+    </template>
+  </SelectInput>
+</template>
diff --git a/src/pages/05_quotation/QuotationFormProductSelect.vue b/src/pages/05_quotation/QuotationFormProductSelect.vue
index fabc1266..aae8ea66 100644
--- a/src/pages/05_quotation/QuotationFormProductSelect.vue
+++ b/src/pages/05_quotation/QuotationFormProductSelect.vue
@@ -7,6 +7,7 @@ import DialogForm from 'src/components/DialogForm.vue';
 import TreeView from 'src/components/shared/TreeView.vue';
 import SelectZone from 'src/components/shared/SelectZone.vue';
 import SelectInput from 'src/components/shared/SelectInput.vue';
+import SelectProductGroup from 'src/components/shared/select/SelectProductGroup.vue';
 import TotalProductCardComponent from 'src/components/04_product-service/TotalProductCardComponent.vue';
 import DeleteButton from 'src/components/button/DeleteButton.vue';
 import { isRoleInclude } from 'src/stores/utils';
@@ -839,8 +840,13 @@ watch(
           <template #top>
             <div class="row items-center app-text-muted">
               {{ $t('productService.group.title') }}
-              <SelectInput
+
+              <SelectProductGroup
+                class="q-pl-sm col-5"
                 id="product-group-select"
+                style="min-height: 50px"
+                clearable
+                v-model:value="selectedProductGroup"
                 :placeholder="
                   !selectedProductGroup
                     ? $t('general.select', {
@@ -848,40 +854,10 @@ watch(
                       })
                     : ''
                 "
-                v-model="selectedProductGroup"
-                clearable
-                optionLabel="name"
-                optionValue="id"
-                class="q-pl-sm col-5"
-                :fillInput="false"
-                :hide-selected="false"
-                :option="productGroup"
-                style="min-height: 50px"
-              >
-                <template #option="{ scope }">
-                  <q-item
-                    v-if="scope.opt"
-                    v-bind="scope.itemProps"
-                    class="row items-center"
-                  >
-                    <q-item-section>
-                      {{ scope.opt.name }}
-                      <span class="app-text-muted text-caption">
-                        {{ scope.opt.code }}
-                      </span>
-                    </q-item-section>
-                  </q-item>
-                </template>
-
-                <template #selected-item="{ scope }">
-                  <q-item-section v-if="scope.opt">
-                    {{ scope.opt.name }}
-                    <span class="app-text-muted text-caption">
-                      {{ scope.opt.code }}
-                    </span>
-                  </q-item-section>
-                </template>
-              </SelectInput>
+                :params="{
+                  activeOnly: true,
+                }"
+              />
             </div>
           </template>