refactor: by Value properties

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

@@ -2,18 +2,18 @@
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Option } from 'src/stores/options/types';
-import {
+import { Attributes } from 'src/stores/product-service/types';
-  AdditionalType,
-  Attributes,
-  Ability,
-} from 'src/stores/product-service/types';
 import { moveItemUp, moveItemDown, deleteItem, dialog } from 'src/stores/utils';
 
 import NoData from '../NoData.vue';
+import useOptionStore from 'src/stores/options';
 
 const { t } = useI18n();
 
-const propertiesOption = defineModel<Option[]>('propertiesOption');
+const propertiesOption =
+  defineModel<(Option & { type: Attributes['additional'][number]['type'] })[]>(
+    'propertiesOption',
+  );
 const formServiceProperties = defineModel<Attributes>('formServiceProperties');
 
 // const abilitys = ref<Record<AdditionalType, Ability[AdditionalType]>>({
@@ -23,15 +23,6 @@ const formServiceProperties = defineModel<Attributes>('formServiceProperties');
 //   array: ['item1', 'item2'],
 // });
 
-const abilitys = ref<Ability[]>([
-  {
-    string: { phoneNumber: { length: 10 } },
-    number: { comma: true, decimal: { point: 2 } },
-    date: '2024-07-25',
-    array: ['item1', 'item2'],
-  },
-]);
-
 const telMax = ref();
 const pointNum = ref();
 
@@ -67,8 +58,11 @@ const typeOption = ref([
   },
 ]);
 
-function manageProperties(properties?: string, type?: string | AdditionalType) {
+function manageProperties(
-  if (properties === 'all' && propertiesOption.value) {
+  property: string,
+  propertyType?: Attributes['additional'][number]['type'],
+) {
+  if (property === 'all' && propertiesOption.value) {
     if (
       formServiceProperties.value?.additional.length ===
       propertiesOption.value.length
@@ -76,32 +70,77 @@ function manageProperties(properties?: string, type?: string | AdditionalType) {
       formServiceProperties.value.additional = [];
       return;
     }
-    propertiesOption.value.forEach((ops) => {
+
-      const exists = formServiceProperties.value?.additional.some(
+    for (const ops of propertiesOption.value) {
-        (prop) => prop.fieldName === ops.value,
+      if (
-      );
+        formServiceProperties.value?.additional.some(
-      if (!exists) {
+          (prop) => prop.fieldName === ops.value,
+        )
+      ) {
+        continue;
+      }
+
+      if (ops.type === 'array' || ops.type === 'date') {
         formServiceProperties.value?.additional.push({
+          type: ops.type,
           fieldName: ops.value,
-          type: ops.type as AdditionalType,
         });
       }
-    });
+
+      if (ops.type === 'string') {
+        formServiceProperties.value?.additional.push({
+          type: ops.type,
+          fieldName: ops.value,
+          isPhoneNumber: false,
+          phoneNumberLength: 10,
+        });
+      }
+
+      if (ops.type === 'number') {
+        formServiceProperties.value?.additional.push({
+          type: ops.type,
+          fieldName: ops.value,
+          comma: false,
+          decimalPlace: 2,
+        });
+      }
+    }
+
     return;
   }
 
   if (formServiceProperties.value) {
     const propertyIndex = formServiceProperties.value.additional.findIndex(
-      (prop) => prop.fieldName === properties,
+      (prop) => prop.fieldName === property,
     );
 
     if (propertyIndex !== -1) {
       formServiceProperties.value.additional.splice(propertyIndex, 1);
     } else {
-      formServiceProperties.value.additional.push({
+      if (propertyType === 'array' || propertyType === 'date') {
-        fieldName: properties ?? null,
+        formServiceProperties.value?.additional.push({
-        type: type as AdditionalType,
+          type: propertyType,
-      });
+          fieldName: property,
+        });
+      }
+
+      if (propertyType === 'string') {
+        formServiceProperties.value?.additional.push({
+          type: propertyType,
+          fieldName: property,
+          isPhoneNumber: false,
+          phoneNumberLength: 10,
+        });
+      }
+
+      if (propertyType === 'number') {
+        formServiceProperties.value?.additional.push({
+          type: propertyType,
+          fieldName: property,
+          comma: false,
+          decimalPlace: 2,
+        });
+      }
     }
   }
 }
@@ -115,18 +154,45 @@ function shouldShowItem(opt: Option) {
   }
 }
 
-function changeType(val: string) {
+function changeType(fieldName: string) {
   if (!propertiesOption.value) return;
 
-  const newType = propertiesOption.value.find((op) => op.value === val)?.type;
+  const defaultPropType = propertiesOption.value.find(
-  if (!newType) return;
+    (op) => op.value === fieldName,
+  )?.type;
 
-  const additionalField = formServiceProperties.value?.additional.find(
+  if (!defaultPropType) return;
-    (l) => l.fieldName === val,
+
+  const idx = formServiceProperties.value?.additional.findIndex(
+    (v) => v.fieldName === fieldName,
   );
-  if (!additionalField) return;
 
-  additionalField.type = newType as AdditionalType;
+  if (!idx) return;
+
+  if (defaultPropType === 'array' || defaultPropType === 'date') {
+    formServiceProperties.value?.additional.push({
+      type: defaultPropType,
+      fieldName,
+    });
+  }
+
+  if (defaultPropType === 'string') {
+    formServiceProperties.value?.additional.push({
+      type: defaultPropType,
+      fieldName,
+      isPhoneNumber: false,
+      phoneNumberLength: 10,
+    });
+  }
+
+  if (defaultPropType === 'number') {
+    formServiceProperties.value?.additional.push({
+      type: defaultPropType,
+      fieldName,
+      comma: false,
+      decimalPlace: 2,
+    });
+  }
 }
 
 function confirmDelete(items: unknown[], index: number) {
@@ -142,17 +208,6 @@ function confirmDelete(items: unknown[], index: number) {
     cancel: () => {},
   });
 }
-
-// function addProperties() {
-//   formServiceProperties.value?.additional.forEach((item, i) => {
-//     if (!!formServiceProperties.value?.additional) {
-//       formServiceProperties.value.additional[i] = {
-//         ...item,
-//         ability: abilitys.value[i],
-//       };
-//     }
-//   });
-// }
 </script>
 <template>
   <div class="full-width column no-wrap">
@@ -314,6 +369,35 @@ function confirmDelete(items: unknown[], index: number) {
             hide-bottom-space
             :label="$t('type')"
             option-value="value"
+            @update:model-value="
+              (t: 'string' | 'number' | 'date' | 'array') => {
+                if (!formServiceProperties) return;
+                if (t === 'array' || t === 'date') {
+                  formServiceProperties.additional[index] = {
+                    type: t,
+                    fieldName: p.fieldName,
+                  };
+                }
+
+                if (t === 'string') {
+                  formServiceProperties.additional[index] = {
+                    type: t,
+                    fieldName: p.fieldName,
+                    isPhoneNumber: false,
+                    phoneNumberLength: 10,
+                  };
+                }
+
+                if (t === 'number') {
+                  formServiceProperties.additional[index] = {
+                    type: t,
+                    fieldName: p.fieldName,
+                    comma: false,
+                    decimalPlace: 2,
+                  };
+                }
+              }
+            "
             :options="typeOption"
             v-model="p.type"
           >
@@ -368,11 +452,16 @@ function confirmDelete(items: unknown[], index: number) {
                 <div v-if="p.type === 'string'" class="q-gutter-y-sm">
                   <div class="row items-center">
                     <div class="col-7 surface-3 rounded q-mr-sm q-py-xs">
-                      <q-checkbox v-model="tel" size="xs" />
+                      <q-checkbox
+                        v-if="p.type === 'string'"
+                        v-model="p.isPhoneNumber"
+                        size="xs"
+                      />
                       {{ $t('telephone') }}
                     </div>
                     <q-input
-                      v-model="telMax"
+                      v-if="p.type === 'string'"
+                      v-model="p.phoneNumberLength"
                       class="col"
                       dense
                       outlined