fix: add & move properties

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Option } from 'src/stores/options/types';
 import { ref, watch } from 'vue';
-import { Attributes } from 'src/stores/product-service/types';
+import { Attributes, AdditionalType } from 'src/stores/product-service/types';
 import NoData from '../NoData.vue';
 
 const propertiesOption = defineModel<Option[]>('propertiesOption');
@@ -55,12 +55,44 @@ defineEmits<{
   (e: 'addProperties'): void;
 }>();
 
-function addProperties() {
+function manageProperties(properties?: string) {
+  if (properties === 'all' && propertiesOption.value) {
+    if (
+      formServiceProperties.value?.additional.length ===
+      propertiesOption.value.length
+    ) {
+      formServiceProperties.value.additional = [];
+      return;
+    }
+    propertiesOption.value.forEach((ops) => {
+      const exists = formServiceProperties.value?.additional.some(
+        (prop) => prop.fieldName === ops.value,
+      );
+      if (!exists) {
         formServiceProperties.value?.additional.push({
-    fieldName: null,
+          fieldName: ops.value,
           type: null,
         });
       }
+    });
+    return;
+  }
+
+  if (formServiceProperties.value) {
+    const propertyIndex = formServiceProperties.value.additional.findIndex(
+      (prop) => prop.fieldName === properties,
+    );
+
+    if (propertyIndex !== -1) {
+      formServiceProperties.value.additional.splice(propertyIndex, 1);
+    } else {
+      formServiceProperties.value.additional.push({
+        fieldName: properties ?? null,
+        type: null,
+      });
+    }
+  }
+}
 
 function deleteItem(index: number) {
   if (!formServiceProperties.value) return;
@@ -77,19 +109,93 @@ function shouldShowItem(opt: Option) {
     return !!opt && !additionalFieldNames.has(opt.value);
   }
 }
+
+function swapItems(
+  arr: { fieldName: string | null; type: AdditionalType | null }[],
+  index1: number,
+  index2: number,
+) {
+  [arr[index1], arr[index2]] = [arr[index2], arr[index1]];
+}
+
+function moveItemUp(index: number) {
+  if (!formServiceProperties.value || index <= 0) return;
+  swapItems(formServiceProperties.value.additional, index, index - 1);
+}
+
+function moveItemDown(index: number) {
+  if (
+    !formServiceProperties.value ||
+    index >= formServiceProperties.value.additional.length - 1
+  )
+    return;
+  swapItems(formServiceProperties.value.additional, index, index + 1);
+}
 </script>
 <template>
   <div class="full-width column no-wrap" style="height: 30vw">
-    <div>
+    <div class="row">
-      <q-btn
+      <q-btn-dropdown
+        icon="mdi-plus"
         dense
         unelevated
-        class="q-px-sm q-mb-lg"
-        label="Properties"
-        icon="mdi-plus"
         color="primary"
-        @click="addProperties"
+        label="Properties"
+        class="q-px-sm q-mb-lg"
+      >
+        <q-list dense v-if="formServiceProperties && propertiesOption">
+          <q-item clickable @click="manageProperties('all')">
+            <div class="full-width flex items-center">
+              <q-icon
+                v-if="formServiceProperties.additional.length === 18"
+                name="mdi-checkbox-marked"
+                size="xs"
+                class="q-mr-sm"
+                color="primary"
               />
+              <q-icon
+                v-else
+                name="mdi-checkbox-blank-outline"
+                size="xs"
+                class="q-mr-sm"
+                style="color: hsl(var(--text-mute))"
+              />
+
+              เลือกทั้งหมด
+            </div>
+          </q-item>
+          <q-separator />
+          <q-item
+            v-for="(ops, index) in propertiesOption"
+            clickable
+            :key="index"
+            @click="manageProperties(ops.value)"
+          >
+            <div class="full-width flex items-center">
+              <q-icon
+                v-if="
+                  formServiceProperties &&
+                  formServiceProperties.additional.some(
+                    (add) => add.fieldName === ops.value,
+                  )
+                "
+                name="mdi-checkbox-marked"
+                size="xs"
+                color="primary"
+                class="q-mr-sm"
+              />
+              <q-icon
+                v-else
+                name="mdi-checkbox-blank-outline"
+                size="xs"
+                style="color: hsl(var(--text-mute))"
+                class="q-mr-sm"
+              />
+              {{ ops.label }}
+            </div>
+          </q-item>
+        </q-list>
+      </q-btn-dropdown>
     </div>
 
     <div
@@ -104,8 +210,8 @@ function shouldShowItem(opt: Option) {
         formServiceProperties?.additional &&
         formServiceProperties.additional.length > 0
       "
-      class="q-gutter-y-md"
     >
+      <transition-group tag="div" name="list" class="q-gutter-y-md">
         <div
           v-for="(p, index) in formServiceProperties.additional"
           :key="index"
@@ -113,24 +219,27 @@ function shouldShowItem(opt: Option) {
           :class="
             index === formServiceProperties.additional.length - 1 && 'q-mb-lg'
           "
+          :ref="`item-${index}`"
         >
           <q-btn
-          id="btn-swap-work-product"
+            id="btn-move-up-product"
             icon="mdi-arrow-up"
             dense
             flat
             round
             :disable="index === 0"
             style="color: hsl(var(--text-mute-2))"
+            @click="moveItemUp(index)"
           />
           <q-btn
-          id="btn-swap-work-product"
+            id="btn-move-down-product"
             icon="mdi-arrow-down"
             dense
             flat
             round
             :disable="index === formServiceProperties.additional.length - 1"
             style="color: hsl(var(--text-mute-2))"
+            @click="moveItemDown(index)"
           />
 
           <q-avatar
@@ -141,59 +250,7 @@ function shouldShowItem(opt: Option) {
             {{ index + 1 }}
           </q-avatar>
 
-        <!-- <q-select
+          <!-- type -->
-          dense
-          multiple
-          outlined
-          emit-value
-          map-options
-          hide-bottom-space
-          :display-value="
-            formServiceProperties.additional[index].fieldName ?? ''
-          "
-          class="col q-mr-md"
-          label="Properties Name"
-          :option-value="
-            (v) =>
-              p.fieldName !== null
-                ? {
-                    fieldName: v.value,
-                    type: null,
-                  }
-                : (p.fieldName = v.value)
-          "
-          :options="propertiesOption"
-          v-model="formServiceProperties.additional"
-        >
-          <template v-slot:before-options>
-            <q-item
-              class="row items-center col-12"
-              clickable
-              @click="selectAll = !selectAll"
-            >
-              <q-checkbox size="sm" class="q-pr-md" v-model="selectAll" />
-              เลือกทั้งหมด
-            </q-item>
-            <q-separator />
-          </template>
-
-          <template v-slot:option="scope">
-            <q-item
-              v-if="scope.opt"
-              v-bind="scope.itemProps"
-              class="row items-center col-12"
-            >
-              <q-checkbox
-                size="sm"
-                class="q-pr-md"
-                v-model="scope.selected"
-                v-bind="scope.itemProps"
-              />
-              {{ scope.opt.label }}
-            </q-item>
-          </template>
-        </q-select> -->
-
           <q-select
             dense
             outlined
@@ -356,6 +413,7 @@ function shouldShowItem(opt: Option) {
             @click="deleteItem(index)"
           />
         </div>
+      </transition-group>
     </div>
   </div>
 </template>
@@ -367,4 +425,8 @@ function shouldShowItem(opt: Option) {
   border-bottom-left-radius: var(--radius-2);
   border-bottom-right-radius: var(--radius-2);
 }
+
+// .list-move {
+//   transition: all 0.2s ease;
+// }
 </style>

src/stores/product-service/types.ts

@@ -48,7 +48,7 @@ export interface Attributes {
   }[];
 }
 
-type AdditionalType = 'string' | 'number' | 'date' | 'array';
+export type AdditionalType = 'string' | 'number' | 'date' | 'array';
 //  Product
 
 export interface ServiceById {