refactor: api select value (#69)

* feat: add file * fix: wrong type * feat: select customer component * fixup! feat: select customer component * fix: char case * refactor: fn alias * chore: add space * feat: accept fetch parameter * refactor: naming * feat: add emit event create * fix: add suffix to add text * feat: add before options slot for select input comp * fix: error when label not found * fix: value type * feat: add required param * fix: wording * refactor: fix customer * feat: use new select component * chore: add note * feat: add decoration for select with creatable * feat: emit event * feat: close popup on click * feat: adjust alignment * feat: add readonly params * feat: add select branch option * feat: use new select component * feat: add disabled params * feat: adjust internal search and select * refactor: props type * feat: use new select component * feat: add lib for select component * refactor: use factory function instead * refactor: merge two lines of code * refactor: move watch inside * refactor: fix value not in list check * chore: cleanup * fix: remove test page size * chore: remove unused * feat: use new select component * fix: typo * fix: error * refactor: extract type * refactor: change ref var to normal var * refactor: force overwrite params to prevent error on render * feat: add clearable parameter * feat: make clearable
2024-11-12 11:56:14 +07:00 · 2024-11-12 11:56:14 +07:00 · d414685fe7
commit d414685fe7
parent a227744131
13 changed files with 500 additions and 319 deletions
--- a/src/components/shared/select/SelectCustomer.vue
+++ b/src/components/shared/select/SelectCustomer.vue
@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+import { createSelect, SelectProps } from './select';
+import SelectInput from '../SelectInput.vue';
+import SelectCustomerItem from './SelectCustomerItem.vue';
+
+import { Customer, CustomerBranch } from 'src/stores/customer/types';
+
+import useStore from 'src/stores/customer';
+
+type SelectOption = CustomerBranch & { customer: Customer };
+
+const value = defineModel<string | null | undefined>('value', {
+  required: true,
+});
+const valueOption = defineModel<SelectOption>('valueOption', {
+  required: false,
+});
+
+const selectOptions = ref<SelectOption[]>([]);
+
+const {
+  fetchListCustomerBranch: getList,
+  fetchListCustomerBranchById: getById,
+} = useStore();
+
+defineEmits<{
+  (e: 'create'): void;
+}>();
+
+type ExclusiveProps = {
+  simple?: 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,
+          includeCustomer: 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();
+  }
+
+  await getSelectedOption();
+});
+</script>
+<template>
+  <SelectInput
+    v-model="value"
+    option-value="id"
+    incremental
+    :label
+    :placeholder
+    :readonly
+    :disable="disabled"
+    :option="selectOptions"
+    :hide-selected="false"
+    :fill-input="false"
+    :rules="[(v: string) => !!v || $t('form.error.required')]"
+    @filter="filter"
+  >
+    <template #selected-item="{ opt }">
+      <SelectCustomerItem
+        v-if="typeof opt === 'object'"
+        :data="opt"
+        :simple
+        single-line
+      />
+    </template>
+
+    <template #before-options v-if="creatable">
+      <q-item clickable v-close-popup @click.stop="$emit('create')">
+        <q-item-section>
+          <b class="row items-center">
+            <q-icon
+              name="mdi-plus-circle-outline"
+              class="q-mr-sm"
+              style="color: hsl(var(--positive-bg))"
+            />
+            {{ $t('general.add', { text: $t('quotation.newCustomer') }) }}
+          </b>
+        </q-item-section>
+      </q-item>
+
+      <q-separator class="q-mx-sm" />
+    </template>
+
+    <template #option="{ opt, scope }">
+      <q-item v-bind="scope.itemProps">
+        <SelectCustomerItem :data="opt" :simple />
+      </q-item>
+
+      <q-separator class="q-mx-sm" />
+    </template>
+
+    <template #append v-if="clearable">
+      <q-icon
+        v-if="!readonly && value"
+        name="mdi-close-circle"
+        @click.stop="value = ''"
+        class="cursor-pointer clear-btn"
+      />
+    </template>
+  </SelectInput>
+</template>