refactor: add options

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

@@ -16,13 +16,6 @@ const propertiesOption =
   );
 const formServiceProperties = defineModel<Attributes>('formServiceProperties');
 
-// const abilitys = ref<Record<AdditionalType, Ability[AdditionalType]>>({
-//   string: { phoneNumber: { length: 10 } },
-//   number: { comma: true, decimal: { point: 2 } },
-//   date: '2024-07-25',
-//   array: ['item1', 'item2'],
-// });
-
 const telMax = ref();
 const pointNum = ref();
 
@@ -80,13 +73,21 @@ function manageProperties(
         continue;
       }
 
-      if (ops.type === 'array' || ops.type === 'date') {
+      if (ops.type === 'date') {
         formServiceProperties.value?.additional.push({
           type: ops.type,
           fieldName: ops.value,
         });
       }
 
+      if (ops.type === 'array') {
+        formServiceProperties.value?.additional.push({
+          type: ops.type,
+          fieldName: ops.value,
+          options: [''],
+        });
+      }
+
       if (ops.type === 'string') {
         formServiceProperties.value?.additional.push({
           type: ops.type,
@@ -101,6 +102,7 @@ function manageProperties(
           type: ops.type,
           fieldName: ops.value,
           comma: false,
+          decimal: false,
           decimalPlace: 2,
         });
       }
@@ -117,13 +119,21 @@ function manageProperties(
     if (propertyIndex !== -1) {
       formServiceProperties.value.additional.splice(propertyIndex, 1);
     } else {
-      if (propertyType === 'array' || propertyType === 'date') {
+      if (propertyType === 'date') {
         formServiceProperties.value?.additional.push({
           type: propertyType,
           fieldName: property,
         });
       }
 
+      if (propertyType === 'array') {
+        formServiceProperties.value?.additional.push({
+          type: propertyType,
+          fieldName: property,
+          options: [''],
+        });
+      }
+
       if (propertyType === 'string') {
         formServiceProperties.value?.additional.push({
           type: propertyType,
@@ -138,6 +148,7 @@ function manageProperties(
           type: propertyType,
           fieldName: property,
           comma: false,
+          decimal: false,
           decimalPlace: 2,
         });
       }
@@ -169,13 +180,21 @@ function changeType(fieldName: string) {
 
   if (!idx) return;
 
-  if (defaultPropType === 'array' || defaultPropType === 'date') {
+  if (defaultPropType === 'date') {
     formServiceProperties.value?.additional.push({
       type: defaultPropType,
       fieldName,
     });
   }
 
+  if (defaultPropType === 'array') {
+    formServiceProperties.value?.additional.push({
+      type: defaultPropType,
+      fieldName,
+      options: [''],
+    });
+  }
+
   if (defaultPropType === 'string') {
     formServiceProperties.value?.additional.push({
       type: defaultPropType,
@@ -190,6 +209,7 @@ function changeType(fieldName: string) {
       type: defaultPropType,
       fieldName,
       comma: false,
+      decimal: false,
       decimalPlace: 2,
     });
   }
@@ -372,13 +392,21 @@ function confirmDelete(items: unknown[], index: number) {
             @update:model-value="
               (t: 'string' | 'number' | 'date' | 'array') => {
                 if (!formServiceProperties) return;
-                if (t === 'array' || t === 'date') {
+                if (t === 'date') {
                   formServiceProperties.additional[index] = {
                     type: t,
                     fieldName: p.fieldName,
                   };
                 }
 
+                if (t === 'array') {
+                  formServiceProperties.additional[index] = {
+                    type: t,
+                    fieldName: p.fieldName,
+                    options: [''],
+                  };
+                }
+
                 if (t === 'string') {
                   formServiceProperties.additional[index] = {
                     type: t,
@@ -393,6 +421,7 @@ function confirmDelete(items: unknown[], index: number) {
                     type: t,
                     fieldName: p.fieldName,
                     comma: false,
+                    decimal: false,
                     decimalPlace: 2,
                   };
                 }
@@ -473,17 +502,17 @@ function confirmDelete(items: unknown[], index: number) {
                 <div v-if="p.type === 'number'" class="q-gutter-y-sm">
                   <div class="row items-center">
                     <div class="col surface-3 rounded q-py-xs">
-                      <q-checkbox v-model="comma" size="xs" />
+                      <q-checkbox v-model="p.comma" size="xs" />
                       {{ $t('useComma') }}
                     </div>
                   </div>
                   <div class="row items-center">
                     <div class="col-7 surface-3 rounded q-mr-sm q-py-xs">
-                      <q-checkbox v-model="point" size="xs" />
+                      <q-checkbox v-model="p.decimal" size="xs" />
                       {{ $t('decimal') }}
                     </div>
                     <q-input
-                      v-model="pointNum"
+                      v-model="p.decimalPlace"
                       class="col"
                       dense
                       outlined
@@ -492,20 +521,51 @@ function confirmDelete(items: unknown[], index: number) {
                   </div>
                 </div>
 
-                <div
-                  v-if="p.type === 'array'"
-                  class="row items-center justify-between"
-                >
-                  <div class="col surface-3 rounded q-mr-sm q-py-xs">
-                    <q-checkbox v-model="selection" size="xs" />
-                    {{ $t('addSelection') }}
+                <div v-if="p.type === 'array'" class="q-gutter-y-sm">
+                  <div
+                    class="row items-center justify-between"
+                    v-for="(_, i) in p.options"
+                  >
+                    <div class="col rounded">
+                      <q-input
+                        v-model="p.options[i]"
+                        class="col"
+                        dense
+                        outlined
+                        :label="$t('selection')"
+                        :rules="[
+                          (val) => (!!val && i >= 1) || $t('pleaseInformation'),
+                        ]"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div class="col-1 q-pl-sm">
+                      <q-btn
+                        @click="
+                          () => {
+                            p.options.splice(i, 1);
+                          }
+                        "
+                        dense
+                        flat
+                        icon="mdi-trash-can-outline"
+                        class="bordered"
+                        text-color="negative"
+                        style="border-radius: 6px"
+                      />
+                    </div>
                   </div>
-                  <div class="col-1">
+                  <div class="row">
                     <q-btn
+                      @click="
+                        () => {
+                          p.options.push('');
+                        }
+                      "
                       dense
                       flat
                       icon="mdi-plus"
-                      class="bordered"
+                      class="bordered col-11"
                       text-color="grey"
                       style="border-radius: 6px"
                     />

src/stores/product-service/types.ts

@@ -80,6 +80,7 @@ type PropNumber = {
   type: 'number';
   fieldName: string;
   comma: boolean;
+  decimal: boolean;
   decimalPlace: number;
 };
 
@@ -91,6 +92,7 @@ type PropDate = {
 type PropOptions = {
   type: 'array';
   fieldName: string;
+  options: string[];
 };
 
 //  Product