From 52baaca35ef72db1a146d3d38f0de19a849df44e Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 19 Jun 2024 10:55:07 +0000
Subject: [PATCH] fix: add & move properties

---
 .../04_product-service/ServiceProperties.vue  | 530 ++++++++++--------
 src/stores/product-service/types.ts           |   2 +-
 2 files changed, 297 insertions(+), 235 deletions(-)

diff --git a/src/components/04_product-service/ServiceProperties.vue b/src/components/04_product-service/ServiceProperties.vue
index 01be2bb8..7df9a48d 100644
--- a/src/components/04_product-service/ServiceProperties.vue
+++ b/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,11 +55,43 @@ defineEmits<{
   (e: 'addProperties'): void;
 }>();
 
-function addProperties() {
-  formServiceProperties.value?.additional.push({
-    fieldName: null,
-    type: null,
-  });
+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: 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) {
@@ -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>
-      <q-btn
+    <div class="row">
+      <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,258 +210,210 @@ function shouldShowItem(opt: Option) {
         formServiceProperties?.additional &&
         formServiceProperties.additional.length > 0
       "
-      class="q-gutter-y-md"
     >
-      <div
-        v-for="(p, index) in formServiceProperties.additional"
-        :key="index"
-        class="bordered surface-1 rounded q-py-sm q-px-md row items-start"
-        :class="
-          index === formServiceProperties.additional.length - 1 && 'q-mb-lg'
-        "
-      >
-        <q-btn
-          id="btn-swap-work-product"
-          icon="mdi-arrow-up"
-          dense
-          flat
-          round
-          :disable="index === 0"
-          style="color: hsl(var(--text-mute-2))"
-        />
-        <q-btn
-          id="btn-swap-work-product"
-          icon="mdi-arrow-down"
-          dense
-          flat
-          round
-          :disable="index === formServiceProperties.additional.length - 1"
-          style="color: hsl(var(--text-mute-2))"
-        />
-
-        <q-avatar
-          size="md"
-          class="q-mx-lg"
-          style="background-color: var(--surface-3)"
-        >
-          {{ index + 1 }}
-        </q-avatar>
-
-        <!-- <q-select
-          dense
-          multiple
-          outlined
-          emit-value
-          map-options
-          hide-bottom-space
-          :display-value="
-            formServiceProperties.additional[index].fieldName ?? ''
+      <transition-group tag="div" name="list" class="q-gutter-y-md">
+        <div
+          v-for="(p, index) in formServiceProperties.additional"
+          :key="index"
+          class="bordered surface-1 rounded q-py-sm q-px-md row items-start"
+          :class="
+            index === formServiceProperties.additional.length - 1 && 'q-mb-lg'
           "
-          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"
+          :ref="`item-${index}`"
         >
-          <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>
+          <q-btn
+            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-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)"
+          />
 
-          <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-avatar
+            size="md"
+            class="q-mx-lg"
+            style="background-color: var(--surface-3)"
+          >
+            {{ index + 1 }}
+          </q-avatar>
 
-        <q-select
-          dense
-          outlined
-          emit-value
-          map-options
-          hide-bottom-space
-          class="col q-mr-md"
-          label="Properties Name"
-          option-label="label"
-          option-value="value"
-          :options="propertiesOption"
-          v-model="p.fieldName"
-        >
-          <template v-slot:option="scope">
-            <q-item
-              v-if="scope.opt && shouldShowItem(scope.opt)"
-              v-bind="scope.itemProps"
-              class="row items-center col-12"
-            >
-              {{ scope.opt.label }}
-            </q-item>
-          </template>
-        </q-select>
-
-        <div class="col">
+          <!-- type -->
           <q-select
             dense
             outlined
             emit-value
             map-options
             hide-bottom-space
-            label="Type"
+            class="col q-mr-md"
+            label="Properties Name"
+            option-label="label"
             option-value="value"
-            :options="typeOption"
-            v-model="p.type"
+            :options="propertiesOption"
+            v-model="p.fieldName"
           >
             <template v-slot:option="scope">
               <q-item
-                v-if="scope.opt"
+                v-if="scope.opt && shouldShowItem(scope.opt)"
                 v-bind="scope.itemProps"
                 class="row items-center col-12"
               >
-                <q-avatar
-                  size="sm"
-                  class="q-mr-md"
-                  :style="`background-color: hsla(${scope.opt.color}/0.2)`"
-                >
-                  <q-icon
-                    size="20px"
-                    :name="scope.opt.icon"
-                    :style="`color: hsl(${scope.opt.color})`"
-                  />
-                </q-avatar>
                 {{ scope.opt.label }}
               </q-item>
             </template>
-
-            <template v-slot:selected-item="scope">
-              <div v-if="scope.opt" class="row items-center col-12">
-                <q-avatar
-                  size="xs"
-                  class="q-mr-sm"
-                  :style="`background-color: hsla(${scope.opt.color}/0.2)`"
-                >
-                  <q-icon
-                    size="14px"
-                    :name="scope.opt.icon"
-                    :style="`color: hsl(${scope.opt.color})`"
-                  />
-                </q-avatar>
-                {{ scope.opt.label }}
-              </div>
-            </template>
           </q-select>
 
-          <div
-            v-if="p.type === 'number'"
-            class="menu-border q-pt-md q-pb-sm"
-            style="margin-top: -20px"
-          >
-            <q-item>
-              <q-item-section class="column">
-                <span class="app-text-muted-2">เพิ่มเติม</span>
-                <div 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" />
-                      เบอร์โทร
-                    </div>
-                    <q-input
-                      v-model="telMax"
-                      class="col"
-                      dense
-                      outlined
-                      label="จำนวนหลัก"
+          <div class="col">
+            <q-select
+              dense
+              outlined
+              emit-value
+              map-options
+              hide-bottom-space
+              label="Type"
+              option-value="value"
+              :options="typeOption"
+              v-model="p.type"
+            >
+              <template v-slot:option="scope">
+                <q-item
+                  v-if="scope.opt"
+                  v-bind="scope.itemProps"
+                  class="row items-center col-12"
+                >
+                  <q-avatar
+                    size="sm"
+                    class="q-mr-md"
+                    :style="`background-color: hsla(${scope.opt.color}/0.2)`"
+                  >
+                    <q-icon
+                      size="20px"
+                      :name="scope.opt.icon"
+                      :style="`color: hsl(${scope.opt.color})`"
                     />
-                  </div>
+                  </q-avatar>
+                  {{ scope.opt.label }}
+                </q-item>
+              </template>
 
-                  <div class="row items-center">
+              <template v-slot:selected-item="scope">
+                <div v-if="scope.opt" class="row items-center col-12">
+                  <q-avatar
+                    size="xs"
+                    class="q-mr-sm"
+                    :style="`background-color: hsla(${scope.opt.color}/0.2)`"
+                  >
+                    <q-icon
+                      size="14px"
+                      :name="scope.opt.icon"
+                      :style="`color: hsl(${scope.opt.color})`"
+                    />
+                  </q-avatar>
+                  {{ scope.opt.label }}
+                </div>
+              </template>
+            </q-select>
+
+            <div
+              v-if="p.type === 'number'"
+              class="menu-border q-pt-md q-pb-sm"
+              style="margin-top: -20px"
+            >
+              <q-item>
+                <q-item-section class="column">
+                  <span class="app-text-muted-2">เพิ่มเติม</span>
+                  <div 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" />
+                        เบอร์โทร
+                      </div>
+                      <q-input
+                        v-model="telMax"
+                        class="col"
+                        dense
+                        outlined
+                        label="จำนวนหลัก"
+                      />
+                    </div>
+
+                    <div class="row items-center">
+                      <div class="col surface-3 rounded q-mr-sm q-py-xs">
+                        <q-checkbox v-model="comma" size="xs" />
+                        ใส่ comma
+                      </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" />
+                        ทศนิยม
+                      </div>
+                      <q-input
+                        v-model="pointNum"
+                        class="col"
+                        dense
+                        outlined
+                        label="ตำแหน่ง"
+                      />
+                    </div>
+                  </div>
+                </q-item-section>
+              </q-item>
+            </div>
+
+            <div
+              v-if="p.type === 'array'"
+              class="menu-border q-pt-md q-pb-sm"
+              style="margin-top: -20px"
+            >
+              <q-item>
+                <q-item-section class="column">
+                  <span class="app-text-muted-2">เพิ่มเติม</span>
+                  <div class="row items-center justify-between">
                     <div class="col surface-3 rounded q-mr-sm q-py-xs">
-                      <q-checkbox v-model="comma" size="xs" />
-                      ใส่ comma
+                      <q-checkbox v-model="tel" size="xs" />
+                      เพิ่ม list
+                    </div>
+                    <div class="col-1">
+                      <q-btn
+                        dense
+                        flat
+                        icon="mdi-plus"
+                        class="bordered"
+                        text-color="grey"
+                      />
                     </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" />
-                      ทศนิยม
-                    </div>
-                    <q-input
-                      v-model="pointNum"
-                      class="col"
-                      dense
-                      outlined
-                      label="ตำแหน่ง"
-                    />
-                  </div>
-                </div>
-              </q-item-section>
-            </q-item>
+                </q-item-section>
+              </q-item>
+            </div>
           </div>
 
-          <div
-            v-if="p.type === 'array'"
-            class="menu-border q-pt-md q-pb-sm"
-            style="margin-top: -20px"
-          >
-            <q-item>
-              <q-item-section class="column">
-                <span class="app-text-muted-2">เพิ่มเติม</span>
-                <div class="row items-center justify-between">
-                  <div class="col surface-3 rounded q-mr-sm q-py-xs">
-                    <q-checkbox v-model="tel" size="xs" />
-                    เพิ่ม list
-                  </div>
-                  <div class="col-1">
-                    <q-btn
-                      dense
-                      flat
-                      icon="mdi-plus"
-                      class="bordered"
-                      text-color="grey"
-                    />
-                  </div>
-                </div>
-              </q-item-section>
-            </q-item>
-          </div>
+          <q-btn
+            id="btn-delete-work-product"
+            icon="mdi-trash-can-outline"
+            dense
+            flat
+            round
+            color="negative"
+            class="q-ml-sm"
+            @click="deleteItem(index)"
+          />
         </div>
-
-        <q-btn
-          id="btn-delete-work-product"
-          icon="mdi-trash-can-outline"
-          dense
-          flat
-          round
-          color="negative"
-          class="q-ml-sm"
-          @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>
diff --git a/src/stores/product-service/types.ts b/src/stores/product-service/types.ts
index 8bd9deeb..051841b3 100644
--- a/src/stores/product-service/types.ts
+++ b/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 {