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/select.ts
+++ b/src/components/shared/select/select.ts
@ -0,0 +1,94 @@
+import { QSelect } from 'quasar';
+import { Ref, watch } from 'vue';
+
+export type SelectProps<T extends (...args: any[]) => any> = {
+  params?: Parameters<T>[0];
+  creatable?: boolean;
+  label?: string;
+  placeholder?: string;
+  readonly?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  clearable?: boolean;
+  autoSelectOnSingle?: boolean;
+};
+
+export const createSelect = <T extends Record<string, any>>(
+  state: {
+    value: Ref<string | null | undefined>;
+    valueOption: Ref<T | undefined>;
+    selectOptions: Ref<T[]>;
+    getByValue: (id: string) => Promise<T | void> | T | void;
+    getList: (query?: string) => Promise<T[] | void> | T[] | void;
+  },
+  opts?: {
+    valueField?: keyof T;
+  },
+) => {
+  const { value, valueOption, selectOptions, getList, getByValue } = state;
+
+  const valueField = opts?.valueField || 'value';
+
+  let cache: T[];
+  let previousSearch = '';
+
+  watch(value, (v) => {
+    if (!v || (cache && cache.find((opt) => opt[valueField] === v))) return;
+    getSelectedOption();
+  });
+
+  async function getOptions(query?: string) {
+    if (cache && selectOptions.value.length > 0 && previousSearch === query) {
+      selectOptions.value = JSON.parse(JSON.stringify(cache));
+      return;
+    }
+    const ret = await getList(query);
+    if (ret) {
+      cache = ret;
+      selectOptions.value = JSON.parse(JSON.stringify(cache));
+      previousSearch = query || previousSearch;
+    }
+  }
+
+  async function setFirstValue() {
+    if (value.value) return;
+    const first = selectOptions.value.at(0);
+    if (first) value.value = first[valueField];
+  }
+
+  async function getSelectedOption() {
+    const currentValue = value.value;
+
+    if (!currentValue) return;
+    if (selectOptions.value.find((v) => v[valueField] === currentValue)) return;
+    if (valueOption.value && valueOption.value[valueField] === currentValue) {
+      return selectOptions.value.unshift(valueOption.value);
+    }
+
+    const ret = await getByValue(currentValue);
+
+    if (ret) {
+      selectOptions.value.unshift(ret);
+      valueOption.value = ret;
+    }
+  }
+
+  type QuasarSelectUpdate = (
+    callback: () => void,
+    afterFn?: ((ref: QSelect) => void) | undefined,
+  ) => void;
+
+  function filter(value: string, update: QuasarSelectUpdate) {
+    update(
+      () => getOptions(value),
+      (ref) => {
+        if (!!value && ref.options && ref.options.length > 0) {
+          ref.setOptionIndex(-1);
+          ref.moveOptionSelection(1, true);
+        }
+      },
+    );
+  }
+
+  return { getOptions, setFirstValue, getSelectedOption, filter };
+};