From 1ae5d5b603da060f99280c2b24625838852e0c08 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Wed, 29 Jan 2025 14:33:47 +0700
Subject: [PATCH] refactor: responsive

---
 src/components/shared/SelectZone.vue | 93 +++++++++++++++-------------
 1 file changed, 49 insertions(+), 44 deletions(-)

diff --git a/src/components/shared/SelectZone.vue b/src/components/shared/SelectZone.vue
index adcd8775..8dd9cc5f 100644
--- a/src/components/shared/SelectZone.vue
+++ b/src/components/shared/SelectZone.vue
@@ -11,7 +11,6 @@ const selectedItem = defineModel<unknown[]>('selectedItem', { default: [] });
 
 const props = withDefaults(
   defineProps<{
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     items: any;
     newItems?: any;
     color?: string;
@@ -78,7 +77,6 @@ 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"
@@ -86,64 +84,71 @@ function assignSelect(to: unknown[], from: unknown[]) {
     >
       <div class="col-12 col-md"><slot name="top"></slot></div>
 
-      <ToggleView v-model="viewMode" class="q-mr-sm full-height" />
+      <div class="row items-stretch col-12 col-md-4 no-wrap">
+        <ToggleView
+          v-model="viewMode"
+          class="q-mr-sm"
+          style="margin-left: 0; !important"
+        />
 
-      <q-input
-        for="input-search"
-        outlined
-        dense
-        :label="$t('general.search')"
-        class="col-12 col-md-3"
-        :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-        v-model="search"
-        debounce="300"
-      >
-        <template #prepend>
-          <q-icon name="mdi-magnify" />
-        </template>
-      </q-input>
+        <q-input
+          for="input-search"
+          outlined
+          dense
+          class="col"
+          :label="$t('general.search')"
+          :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+          v-model="search"
+          debounce="300"
+        >
+          <template #prepend>
+            <q-icon name="mdi-magnify" />
+          </template>
+        </q-input>
+      </div>
     </header>
     <slot name="tab"></slot>
 
     <section class="col q-ma-md">
       <div
         v-if="items.length > 0 || newItems.length > 0"
-        class="column"
+        class="column full-height relative-position"
         style="gap: var(--size-4)"
       >
-        <!-- NOTE: START - item -->
-        <div class="row q-col-gutter-md">
-          <TableProductAndService
-            v-model:selected="selectedItem"
-            :rows="items"
-            :grid="viewMode"
-            :type
-          >
-            <template #grid="{ item }">
-              <div :key="item.index" :class="`${itemClass}`">
-                <div
-                  class="rounded cursor-pointer relative-position"
-                  :style="`border: 1px solid ${
-                    item._selectedIndex !== -1 ? color : 'transparent'
-                  }`"
-                  @click="() => select(item)"
-                >
+        <div style="inset: 0" class="absolute scroll">
+          <!-- NOTE: START - item -->
+          <div class="row q-col-gutter-md">
+            <TableProductAndService
+              v-model:selected="selectedItem"
+              :rows="items"
+              :grid="viewMode"
+              :type
+            >
+              <template #grid="{ item }">
+                <div :key="item.index" :class="`${itemClass}`">
                   <div
-                    v-if="item._selectedIndex !== -1"
-                    class="badge absolute-top-right flex justify-center q-ma-sm"
-                    :style="`background-color: ${color}`"
+                    class="rounded cursor-pointer relative-position"
+                    :style="`border: 1px solid ${
+                      item._selectedIndex !== -1 ? color : 'transparent'
+                    }`"
+                    @click="() => select(item)"
                   >
-                    {{ item._selectedIndex + 1 }}
+                    <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>
-                  <slot name="data" :item="item"></slot>
                 </div>
-              </div>
-            </template>
-          </TableProductAndService>
+              </template>
+            </TableProductAndService>
+          </div>
         </div>
         <!-- NOTE: END - item -->
       </div>
-
       <div v-else class="flex justify-center full-height">
         <span class="col column items-center justify-center app-text-muted">
           <q-avatar style="background: var(--surface-0)" class="q-mb-md">