refactor: package workflow (#73)

* fix: service attributes type

* feat: select workflow component

* refactor: dialog properties => select work flow

* refactor: package => work new workflow step

* fix: useless  in future (service properties)

* fix: handle work undefine

---------

Co-authored-by: puriphatt <puriphat@frappet.com>

src/components/04_product-service/FormServiceWork.vue

@@ -1,17 +1,20 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { moveItemUp, moveItemDown, deleteItem, dialog } from 'stores/utils';
+import { nextTick, ref, watch } from 'vue';
+
+import { WorkflowTemplate } from 'src/stores/workflow-template/types';
+import { ServiceCreate, WorkItems } from 'stores/product-service/types';
 
 import NoData from 'components/NoData.vue';
 import WorkManagementComponent from './WorkManagementComponent.vue';
 import AddButton from '../button/AddButton.vue';
-import { ServiceCreate, WorkItems } from 'stores/product-service/types';
 import TreeView from '../shared/TreeView.vue';
-import { nextTick, ref, watch } from 'vue';
 
 const { t } = useI18n();
 
 const workItems = defineModel<WorkItems[]>('workItems', { default: [] });
+const workflow = defineModel<WorkflowTemplate>('workflow');
 
 const props = defineProps<{
   service?: ServiceCreate;
@@ -75,11 +78,20 @@ async function addWork() {
     id: '',
     name: '',
     attributes: {
-      workflowName: '',
+      workflowStep: workflow.value?.step
+        ? JSON.parse(
+            JSON.stringify(
+              workflow.value.step.map((step) => ({
+                name: step.name,
+                attributes: step.attributes,
+                productsId: [],
+              })),
+            ),
+          )
+        : [],
       additional: [],
       showTotalPrice: false,
-      stepProperties: [],
-      workflowId: '',
+      workflowId: workflow.value ? workflow.value.id : '',
     },
     product: [],
   });

src/components/04_product-service/ServiceProperties.vue

@@ -65,16 +65,16 @@ function manageProperties(
 ) {
   if (property === 'all' && propertiesOption.value) {
     if (
-      formServiceProperties.value.stepProperties[stepIndex].attributes
+      formServiceProperties.value.stepProperties[stepIndex].properties
         .length === propertiesOption.value.length
     ) {
-      formServiceProperties.value.stepProperties[stepIndex].attributes = [];
+      formServiceProperties.value.stepProperties[stepIndex].properties = [];
       return;
     }
 
     for (const ops of propertiesOption.value) {
       if (
-        formServiceProperties.value.stepProperties[stepIndex].attributes.some(
+        formServiceProperties.value.stepProperties[stepIndex].properties.some(
           (prop) => prop.fieldName === ops.value,
         )
       ) {
@@ -82,14 +82,14 @@ function manageProperties(
       }
 
       if (ops.type === 'date') {
-        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+        formServiceProperties.value.stepProperties[stepIndex].properties.push({
           type: ops.type,
           fieldName: ops.value,
         });
       }
 
       if (ops.type === 'array') {
-        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+        formServiceProperties.value.stepProperties[stepIndex].properties.push({
           type: ops.type,
           fieldName: ops.value,
           options: [],
@@ -97,7 +97,7 @@ function manageProperties(
       }
 
       if (ops.type === 'string') {
-        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+        formServiceProperties.value.stepProperties[stepIndex].properties.push({
           type: ops.type,
           fieldName: ops.value,
           isPhoneNumber: false,
@@ -106,7 +106,7 @@ function manageProperties(
       }
 
       if (ops.type === 'number') {
-        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+        formServiceProperties.value.stepProperties[stepIndex].properties.push({
           type: ops.type,
           fieldName: ops.value,
           comma: false,
@@ -118,26 +118,26 @@ function manageProperties(
     return;
   }
 
-  if (formServiceProperties.value.stepProperties[stepIndex].attributes) {
+  if (formServiceProperties.value.stepProperties[stepIndex].properties) {
     const propertyIndex = formServiceProperties.value.stepProperties[
       stepIndex
-    ].attributes.findIndex((prop) => prop.fieldName === property);
+    ].properties.findIndex((prop) => prop.fieldName === property);
 
     if (propertyIndex !== -1) {
-      formServiceProperties.value.stepProperties[stepIndex].attributes.splice(
+      formServiceProperties.value.stepProperties[stepIndex].properties.splice(
         propertyIndex,
         1,
       );
     } else {
       if (propertyType === 'date') {
-        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+        formServiceProperties.value.stepProperties[stepIndex].properties.push({
           type: propertyType,
           fieldName: property,
         });
       }
 
       if (propertyType === 'array') {
-        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+        formServiceProperties.value.stepProperties[stepIndex].properties.push({
           type: propertyType,
           fieldName: property,
           options: [],
@@ -145,7 +145,7 @@ function manageProperties(
       }
 
       if (propertyType === 'string') {
-        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+        formServiceProperties.value.stepProperties[stepIndex].properties.push({
           type: propertyType,
           fieldName: property,
           isPhoneNumber: false,
@@ -154,7 +154,7 @@ function manageProperties(
       }
 
       if (propertyType === 'number') {
-        formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+        formServiceProperties.value.stepProperties[stepIndex].properties.push({
           type: propertyType,
           fieldName: property,
           comma: false,
@@ -167,9 +167,9 @@ function manageProperties(
 }
 
 function shouldShowItem(opt: Option, stepIndex: number) {
-  if (formServiceProperties.value.stepProperties[stepIndex].attributes) {
+  if (formServiceProperties.value.stepProperties[stepIndex].properties) {
     const additionalFieldNames = new Set(
-      formServiceProperties.value.stepProperties[stepIndex].attributes.map(
+      formServiceProperties.value.stepProperties[stepIndex].properties.map(
         (o) => o.fieldName,
       ),
     );
@@ -188,19 +188,19 @@ function changeType(fieldName: string, stepIndex: number) {
 
   const idx = formServiceProperties.value.stepProperties[
     stepIndex
-  ].attributes.findIndex((v) => v.fieldName === fieldName);
+  ].properties.findIndex((v) => v.fieldName === fieldName);
 
   if (!idx) return;
 
   if (defaultPropType === 'date') {
-    formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+    formServiceProperties.value.stepProperties[stepIndex].properties.push({
       type: defaultPropType,
       fieldName,
     });
   }
 
   if (defaultPropType === 'array') {
-    formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+    formServiceProperties.value.stepProperties[stepIndex].properties.push({
       type: defaultPropType,
       fieldName,
       options: [],
@@ -208,7 +208,7 @@ function changeType(fieldName: string, stepIndex: number) {
   }
 
   if (defaultPropType === 'string') {
-    formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+    formServiceProperties.value.stepProperties[stepIndex].properties.push({
       type: defaultPropType,
       fieldName,
       isPhoneNumber: false,
@@ -217,7 +217,7 @@ function changeType(fieldName: string, stepIndex: number) {
   }
 
   if (defaultPropType === 'number') {
-    formServiceProperties.value.stepProperties[stepIndex].attributes.push({
+    formServiceProperties.value.stepProperties[stepIndex].properties.push({
       type: defaultPropType,
       fieldName,
       comma: false,
@@ -298,7 +298,7 @@ watch(
       formServiceProperties.value.stepProperties.push({
         id: s.id,
         productsId: [],
-        attributes: [],
+        properties: [],
       });
     });
   },
@@ -366,7 +366,7 @@ watch(
             <q-list
               dense
               v-if="
-                formServiceProperties?.stepProperties[stepIndex].attributes &&
+                formServiceProperties?.stepProperties[stepIndex].properties &&
                 propertiesOption
               "
             >
@@ -380,7 +380,7 @@ watch(
                   <q-icon
                     v-if="
                       formServiceProperties?.stepProperties[stepIndex]
-                        .attributes.length === propertiesOption.length
+                        .properties.length === propertiesOption.length
                     "
                     name="mdi-checkbox-marked"
                     size="xs"
@@ -412,7 +412,7 @@ watch(
                       formServiceProperties?.stepProperties[stepIndex] &&
                       formServiceProperties?.stepProperties[
                         stepIndex
-                      ].attributes.some((add) => add.fieldName === ops.value)
+                      ].properties.some((add) => add.fieldName === ops.value)
                     "
                     name="mdi-checkbox-marked"
                     size="xs"
@@ -443,19 +443,19 @@ watch(
           <div
             v-for="(p, index) in formServiceProperties?.stepProperties[
               stepIndex
-            ].attributes"
+            ].properties"
             :key="index"
             class="bordered surface-1 rounded q-py-sm q-px-md row items-start"
             :class="{
               'q-mt-md': index === 0,
               'q-mb-sm':
                 index !==
-                formServiceProperties.stepProperties[stepIndex].attributes
+                formServiceProperties.stepProperties[stepIndex].properties
                   .length -
                   1,
               'q-mb-md':
                 index ===
-                formServiceProperties.stepProperties[stepIndex].attributes
+                formServiceProperties.stepProperties[stepIndex].properties
                   .length -
                   1,
             }"
@@ -472,7 +472,7 @@ watch(
                 style="color: hsl(var(--text-mute-2))"
                 @click="
                   moveItemUp(
-                    formServiceProperties.stepProperties[stepIndex].attributes,
+                    formServiceProperties.stepProperties[stepIndex].properties,
                     index,
                   )
                 "
@@ -486,14 +486,14 @@ watch(
                 :size="$q.screen.xs ? 'xs' : ''"
                 :disable="
                   index ===
-                  formServiceProperties.stepProperties[stepIndex].attributes
+                  formServiceProperties.stepProperties[stepIndex].properties
                     .length -
                     1
                 "
                 style="color: hsl(var(--text-mute-2))"
                 @click="
                   moveItemDown(
-                    formServiceProperties.stepProperties[stepIndex].attributes,
+                    formServiceProperties.stepProperties[stepIndex].properties,
                     index,
                   )
                 "
@@ -552,13 +552,13 @@ watch(
                   (t: 'string' | 'number' | 'date' | 'array') => {
                     if (
                       !formServiceProperties.stepProperties[stepIndex]
-                        .attributes
+                        .properties
                     )
                       return;
                     if (t === 'date') {
                       formServiceProperties.stepProperties[
                         stepIndex
-                      ].attributes[index] = {
+                      ].properties[index] = {
                         type: t,
                         fieldName: p.fieldName,
                       };
@@ -567,7 +567,7 @@ watch(
                     if (t === 'array') {
                       formServiceProperties.stepProperties[
                         stepIndex
-                      ].attributes[index] = {
+                      ].properties[index] = {
                         type: t,
                         fieldName: p.fieldName,
                         options: [],
@@ -577,7 +577,7 @@ watch(
                     if (t === 'string') {
                       formServiceProperties.stepProperties[
                         stepIndex
-                      ].attributes[index] = {
+                      ].properties[index] = {
                         type: t,
                         fieldName: p.fieldName,
                         isPhoneNumber: false,
@@ -588,7 +588,7 @@ watch(
                     if (t === 'number') {
                       formServiceProperties.stepProperties[
                         stepIndex
-                      ].attributes[index] = {
+                      ].properties[index] = {
                         type: t,
                         fieldName: p.fieldName,
                         comma: false,
@@ -786,7 +786,7 @@ watch(
               class="q-ml-sm"
               @click="
                 confirmDelete(
-                  formServiceProperties.stepProperties[stepIndex].attributes,
+                  formServiceProperties.stepProperties[stepIndex].properties,
                   index,
                 )
               "

src/components/04_product-service/WorkManagementComponent.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { QSelect } from 'quasar';
 import { storeToRefs } from 'pinia';
 import { Icon } from '@iconify/vue';
 import { onMounted, ref, watch } from 'vue';
@@ -9,9 +8,7 @@ import useProductServiceStore from 'stores/product-service';
 import { formatNumberDecimal } from 'stores/utils';
 import { useWorkflowTemplate } from 'src/stores/workflow-template';
 import { Attributes, Product } from 'stores/product-service/types';
-import { WorkflowTemplate } from 'src/stores/workflow-template/types';
 
-import SelectInput from '../shared/SelectInput.vue';
 import NoData from '../NoData.vue';
 import { AddButton } from '../button';
 
@@ -23,7 +20,6 @@ const workflowStore = useWorkflowTemplate();
 const { fetchListOfWork } = productServiceStore;
 const { splitPay, workNameItems } = storeToRefs(productServiceStore);
 
-const { getWorkflowTemplateList } = workflowStore;
 const { data: workflowData } = storeToRefs(workflowStore);
 
 const props = withDefaults(
@@ -72,48 +68,6 @@ defineEmits<{
   (e: 'workProperties'): void;
 }>();
 
-function mapFlowName(id: string): string {
-  if (!id) return workName.value || '';
-  const targetFlow = workflowData.value.find((w) => w.id === id);
-  // workName.value = targetFlow?.name;
-  return targetFlow?.name || attributes.value.workflowName || '';
-}
-
-function mapStepName(id: string) {
-  const targetFlow = workflowData.value.find(
-    (w) => w.id === attributes.value.workflowId,
-  );
-  if (!targetFlow) return;
-  const name = targetFlow.step.find((s) => s.id === id)?.name;
-  return name || '-';
-}
-
-function selectFlow(workflow: WorkflowTemplate) {
-  workName.value = workflow.name;
-  attributes.value.workflowId = workflow.id;
-  attributes.value.workflowName = workflow.name;
-  attributes.value.stepProperties = workflow.step.map((s) => ({
-    id: s.id,
-    attributes: [],
-    productsId: [],
-  }));
-}
-
-async function filter(val: string, update: (...args: unknown[]) => void) {
-  update(
-    async () => {
-      await fetchWorkflowOption(val);
-    },
-
-    (ref: QSelect) => {
-      if (val !== '' && ref.options && ref.options?.length > 0) {
-        ref.setOptionIndex(-1);
-        ref.moveOptionSelection(1, true);
-      }
-    },
-  );
-}
-
 async function fetchWorkflowOption(val?: string) {
   const res = await workflowStore.getWorkflowTemplateList({
     query: val,
@@ -123,13 +77,12 @@ async function fetchWorkflowOption(val?: string) {
 }
 
 function toggleCheckProductInStep(id: string, stepIndex: number) {
-  const index =
-    attributes.value.stepProperties[stepIndex].productsId.indexOf(id);
+  const index = attributes.value.workflowStep[stepIndex].productsId.indexOf(id);
 
-  if (!attributes.value.stepProperties[stepIndex].productsId.includes(id)) {
-    attributes.value.stepProperties[stepIndex].productsId.push(id);
+  if (!attributes.value.workflowStep[stepIndex].productsId.includes(id)) {
+    attributes.value.workflowStep[stepIndex].productsId.push(id);
   } else {
-    attributes.value.stepProperties[stepIndex].productsId.splice(index, 1);
+    attributes.value.workflowStep[stepIndex].productsId.splice(index, 1);
   }
 }
 
@@ -160,7 +113,7 @@ watch(
   () => attributes.value.workflowId,
   () => {
     if (props.readonly) return;
-    attributes.value.stepProperties.forEach((s) => {
+    attributes.value.workflowStep.forEach((s) => {
       s.productsId = productItems.value.map((p) => p.id);
     });
   },
@@ -582,29 +535,33 @@ watch(
               </div>
             </template>
             <div class="q-py-md q-px-md full-width column">
-              <span
-                v-if="
-                  attributes.stepProperties?.length === 0 ||
-                  !attributes.stepProperties
-                "
-                class="app-text-muted"
-              >
-                {{ $t('flow.noProcessStep') }}
+              <span class="app-text-muted">
+                {{
+                  !attributes.workflowId
+                    ? $t('general.no', { msg: $t('flow.title') })
+                    : attributes.workflowStep?.length === 0
+                      ? $t('flow.noProcessStep')
+                      : attributes.workflowStep?.every(
+                            (s) => !s.attributes.properties?.length,
+                          )
+                        ? $t('productService.service.noPropertiesYet')
+                        : ''
+                }}
               </span>
 
               <template
-                v-for="(step, stepIndex) in attributes.stepProperties"
-                :key="step.id"
+                v-for="(step, stepIndex) in attributes.workflowStep"
+                :key="stepIndex"
               >
                 <span
                   v-if="
-                    attributes.stepProperties?.length > 0 &&
-                    step.attributes.length > 0
+                    attributes.workflowStep[stepIndex].attributes.properties
+                      .length > 0
                   "
                 >
                   <q-icon name="mdi-circle-medium" />
                   {{ $t('flow.stepNo', { msg: stepIndex + 1 }) }}:
-                  {{ mapStepName(step.id) }}
+                  {{ step.name }}
 
                   <!-- step att -->
                   <section
@@ -612,13 +569,13 @@ watch(
                   >
                     <div
                       v-if="
-                        attributes.stepProperties[stepIndex].attributes.length >
-                        0
+                        attributes.workflowStep[stepIndex].attributes.properties
+                          .length > 0
                       "
                       class="row q-gutter-sm"
                     >
                       <span
-                        v-for="(att, i) in step.attributes"
+                        v-for="(att, i) in step.attributes.properties"
                         :key="i"
                         class="surface-2 bordered rounded q-px-xs"
                       >
@@ -635,7 +592,7 @@ watch(
                     class="q-pt-sm q-pl-lg column"
                     :class="{
                       'q-pb-sm':
-                        stepIndex !== attributes.stepProperties.length - 1,
+                        stepIndex !== attributes.workflowStep.length - 1,
                     }"
                   >
                     <span class="app-text-muted-2 text-caption">
@@ -652,9 +609,10 @@ watch(
                     >
                       <div v-for="product in productItems" :key="product.id">
                         <q-checkbox
+                          v-if="attributes.workflowStep[stepIndex].productsId"
                           :disable="readonly"
                           :model-value="
-                            attributes.stepProperties[
+                            attributes.workflowStep[
                               stepIndex
                             ].productsId.includes(product.id)
                           "
@@ -675,18 +633,6 @@ watch(
                   </section>
                 </span>
               </template>
-
-              <span
-                v-if="
-                  attributes.workflowId &&
-                  attributes.stepProperties?.every(
-                    (s) => s.attributes.length === 0,
-                  )
-                "
-                class="app-text-muted"
-              >
-                {{ $t('productService.service.noPropertiesYet') }}
-              </span>
             </div>
           </q-expansion-item>
           <!-- <div class="q-py-md q-px-md full-width">

src/components/dialog/DialogProperties.vue

@@ -4,27 +4,41 @@ import { moveItemUp, moveItemDown, dialog, deleteItem } from 'stores/utils';
 import { useI18n } from 'vue-i18n';
 
 import useOptionStore from 'src/stores/options';
+import { useWorkflowTemplate } from 'src/stores/workflow-template';
 import { Option } from 'stores/options/types';
+import {
+  WorkFlowPayloadStep,
+  WorkflowTemplate,
+} from 'src/stores/workflow-template/types';
 
+import SelectFlow from '../shared/select/SelectFlow.vue';
 import NoData from '../NoData.vue';
 import DialogForm from '../DialogForm.vue';
-import { WorkFlowPayloadStep } from 'src/stores/workflow-template/types';
 
 const { t } = useI18n();
+const { getWorkflowTemplate } = useWorkflowTemplate();
 const optionStore = useOptionStore();
 
 const props = defineProps<{
   stepIndex?: number;
+
+  selectFlow?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'submit', currWorkflow: WorkflowTemplate): void;
 }>();
 
 const model = defineModel<boolean>({ required: true, default: false });
+const workflowId = defineModel<string>('workflowId', { default: '' });
 const dataStep = defineModel<WorkFlowPayloadStep[]>('dataStep', {
-  required: true,
   default: [],
 });
 
 const tempStep = ref<WorkFlowPayloadStep[]>([]);
+const tempWorkflowId = ref<string>('');
 const propertiesOption = ref();
+const currWorkflow = ref<WorkflowTemplate>();
 const typeOption = [
   {
     label: 'Text',
@@ -53,9 +67,13 @@ const typeOption = [
 ];
 
 function submit() {
+  workflowId.value = tempWorkflowId.value;
   dataStep.value = JSON.parse(JSON.stringify(tempStep.value));
-
   model.value = false;
+
+  if (props.selectFlow && currWorkflow.value) {
+    emit('submit', currWorkflow.value);
+  }
 }
 
 function close() {
@@ -241,12 +259,37 @@ function confirmDelete(items: unknown[], index: number) {
   });
 }
 
+function assignTemp() {
+  propertiesOption.value = optionStore.globalOption?.servicePropertiesField;
+
+  tempStep.value = JSON.parse(JSON.stringify(dataStep.value));
+  tempWorkflowId.value = workflowId.value;
+}
+
 watch(
   () => model.value,
   () => {
     if (model.value) {
-      propertiesOption.value = optionStore.globalOption?.servicePropertiesField;
-      tempStep.value = JSON.parse(JSON.stringify(dataStep.value));
+      assignTemp();
+    }
+  },
+);
+
+watch(
+  () => tempWorkflowId.value,
+  async (a, b) => {
+    if (props.selectFlow && a !== b && a) {
+      const ret = await getWorkflowTemplate(a);
+      if (ret) {
+        currWorkflow.value = ret;
+        tempStep.value =
+          ret.step.length > 0
+            ? ret.step.map((s) => ({
+                name: s.name,
+                attributes: s.attributes,
+              }))
+            : [];
+      }
     }
   },
 );
@@ -263,8 +306,41 @@ watch(
     :close="close"
   >
     <div class="column">
+      <div
+        v-if="selectFlow"
+        class="bordered-b surface-3 row items-center no-wrap q-py-sm"
+        :class="{
+          'q-px-lg': $q.screen.gt.sm,
+          'q-px-md': !$q.screen.gt.sm,
+        }"
+      >
+        {{ $t('flow.title') }}
+        <SelectFlow
+          style="width: 18vw"
+          class="q-ml-sm"
+          v-model:value="tempWorkflowId"
+          :label="$t('flow.title')"
+          simple
+        />
+      </div>
+
+      <template v-if="$slots.prepend">
+        <slot name="prepend"></slot>
+      </template>
+
+      <div
+        v-if="tempStep.length === 0"
+        class="row surface-1 rounded bordered items-center justify-center col"
+        :class="{
+          'q-ma-lg': $q.screen.gt.sm,
+          'q-ma-md': !$q.screen.gt.sm,
+        }"
+      >
+        <NoData :text="$t('general.no', { msg: $t('flow.processStep') })" />
+      </div>
+
       <section
-        v-for="(step, stepIndex) in dataStep"
+        v-for="(step, stepIndex) in tempStep"
         :key="stepIndex"
         class="column"
       >

src/components/shared/select/SelectFlow.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+import { createSelect, SelectProps } from './select';
+import SelectInput from '../SelectInput.vue';
+
+import { WorkflowTemplate } from 'src/stores/workflow-template/types';
+
+import { useWorkflowTemplate } from 'src/stores/workflow-template';
+
+type SelectOption = WorkflowTemplate;
+
+const value = defineModel<string | null | undefined>('value', {
+  required: true,
+});
+const valueOption = defineModel<SelectOption>('valueOption', {
+  required: false,
+});
+
+const selectOptions = ref<SelectOption[]>([]);
+
+const { getWorkflowTemplateList: getList, getWorkflowTemplate: getById } =
+  useWorkflowTemplate();
+
+defineEmits<{
+  (e: 'create'): void;
+  (e: 'updateValue', val: string): 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,
+        });
+        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
+    :label
+    :placeholder
+    :readonly
+    :disable="disabled"
+    :option="
+      selectOptions.map((v) => {
+        const ret = {
+          label: v.name,
+          value: v.id,
+        };
+        return ret;
+      })
+    "
+    :hide-selected="false"
+    :fill-input="false"
+    :rules="
+      required ? [(v: string) => !!v || $t('form.error.required')] : undefined
+    "
+    @filter="filter"
+    @update:model-value="(v) => $emit('updateValue', v as string)"
+  >
+    <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>