refactor: edit list

src/components/shared/SelectZone.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { watch } from 'vue';
+import TableProductAndService from './table/TableProductAndService.vue';
+import ToggleView from './ToggleView.vue';
+import { ref } from 'vue';
+
+const viewMode = ref<boolean>(false);
 
 const search = defineModel<string>('search');
 const selectedItem = defineModel<unknown[]>('selectedItem', { default: [] });
@@ -15,6 +20,7 @@ const props = withDefaults(
     noPadding?: boolean;
     noItemsIcon?: string;
     noItemsLabel?: string;
+    type: 'service' | 'product';
   }>(),
   {
     items: () => [],
@@ -35,24 +41,24 @@ watch(search, () => {
   emit('search', search.value || '');
 });
 
-function select(item?: unknown, all?: boolean) {
+function select(item?: any, all?: boolean) {
   if (all) {
-    if (props.items.every((item) => selectedItem.value.includes(item))) {
+    if (selectedItem.value.length !== 0) {
-      selectedItem.value = selectedItem.value.filter(
+      selectedItem.value = [];
-        (item) => !props.items.includes(item),
-      );
     } else {
-      props.items.forEach((i) => {
+      props.items.forEach((i: any) => {
-        const productExists = selectedItem.value.some((item) => item === i);
+        const productExists = selectedItem.value.find(
+          (item: any) => item.id === i.id,
+        );
         if (!productExists) {
           selectedItem.value.push(i);
         }
       });
     }
   } else {
-    if (selectedItem.value.includes(item)) {
+    const findIdex = selectedItem.value.findIndex((v: any) => v.id === item.id);
-      const index = selectedItem.value.indexOf(item);
+    if (findIdex !== -1) {
-      selectedItem.value.splice(index, 1);
+      selectedItem.value.splice(findIdex, 1);
     } else selectedItem.value.push(item);
   }
 }
@@ -72,12 +78,16 @@ function assignSelect(to: unknown[], from: unknown[]) {
 }
 </script>
 <template>
+  {{ console.log(selectedItem) }}
   <section class="full-width column">
     <header
       class="row items-center q-px-md q-py-sm"
       :class="{ 'bordered surface-3 ': borderSearchSection }"
     >
       <div class="col-12 col-md"><slot name="top"></slot></div>
+
+      <ToggleView v-model="viewMode" class="q-mr-sm full-height" />
+
       <q-input
         for="input-search"
         outlined
@@ -103,48 +113,36 @@ function assignSelect(to: unknown[], from: unknown[]) {
       >
         <!-- NOTE: START - item -->
         <div class="row q-col-gutter-md">
-          <div v-for="(item, i) in items" :key="i" :class="`${itemClass}`">
+          <TableProductAndService
-            <div
+            v-model:selected="selectedItem"
-              class="rounded cursor-pointer relative-position"
+            :rows="items"
-              :style="`border: 1px solid ${selectedItem.includes(item) ? color : 'transparent'}`"
+            :grid="viewMode"
-              @click="() => select(item)"
+            :type
-            >
+          >
-              <div
+            <template #grid="{ item }">
-                v-if="selectedItem.includes(item)"
+              <div :key="item.index" :class="`${itemClass}`">
-                class="badge absolute-top-right flex justify-center q-ma-sm"
+                <div
-                :style="`background-color: ${color}`"
+                  class="rounded cursor-pointer relative-position"
-              >
+                  :style="`border: 1px solid ${
-                {{ selectedItem.indexOf(item) + 1 }}
+                    item._selectedIndex !== -1 ? color : 'transparent'
+                  }`"
+                  @click="() => select(item)"
+                >
+                  <div
+                    v-if="item._selectedIndex !== -1"
+                    class="badge absolute-top-right flex justify-center q-ma-sm"
+                    :style="`background-color: ${color}`"
+                  >
+                    {{ item._selectedIndex + 1 }}
+                  </div>
+                  <slot name="data" :item="item"></slot>
+                </div>
               </div>
-              <slot name="data" :item="item"></slot>
+            </template>
-            </div>
+          </TableProductAndService>
-          </div>
         </div>
         <!-- NOTE: END - item -->
-
-        <q-separator v-if="newItems.length !== 0" dark inset />
-
-        <!-- NOTE: START - newItem -->
-        <div v-if="newItems.length !== 0" class="row q-col-gutter-md">
-          <div v-for="(item, i) in newItems" :key="i" :class="`${itemClass}`">
-            <div
-              class="rounded cursor-pointer relative-position"
-              :style="`border: 1px solid ${selectedItem.includes(item) ? color : 'transparent'}`"
-              @click="() => select(item)"
-            >
-              <div
-                v-if="selectedItem.includes(item)"
-                class="badge absolute-top-right flex justify-center q-ma-sm"
-                :style="`background-color: ${color}`"
-              >
-                {{ selectedItem.indexOf(item) + 1 }}
-              </div>
-              <slot name="newData" :item="item"></slot>
-            </div>
-          </div>
-        </div>
       </div>
-      <!-- NOTE: END - newItem -->
 
       <div v-else class="flex justify-center full-height">
         <span class="col column items-center justify-center app-text-muted">

src/pages/05_quotation/QuotationFormProductSelect.vue

@@ -805,6 +805,7 @@ watch(
           border-search-section
           item-class="col-md-3 col-sm-6 col-12"
           v-model:selected-item="preSelectedItems"
+          :type="pageState.productServiceTab === '1' ? 'service' : 'product'"
           @search="
             (value) => {
               $emit(
@@ -926,9 +927,11 @@ watch(
 
           <template #data="{ item }">
             <TotalProductCardComponent
+              :key="item.index"
               :priceDisplay="priceDisplay"
               :title="item.name"
               :data="item"
+              no-Time-Img
             />
           </template>
         </SelectZone>