feat: no data component + product and service ui (tab)

src/components/NoData.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps<{
+  size?: number;
+}>();
+</script>
+<template>
+  <div>
+    <q-img
+      src="no-data.png"
+      :style="{
+        height: size ? `${size}px` : '120px',
+        width: size ? `${size + 2}px` : '123px',
+      }"
+    />
+    <div class="app-text-muted text-center">{{ $t('noData') }}</div>
+  </div>
+</template>

src/pages/04_product-service/MainPage.vue

@@ -12,6 +12,7 @@ import TooltipComponent from 'components/TooltipComponent.vue';
 import ButtonAddComponent from 'src/components/ButtonAddCompoent.vue';
 
 import { Status } from 'src/stores/types';
+import NoData from 'components/NoData.vue';
 
 import { dialog } from 'src/stores/utils';
 
@@ -65,7 +66,7 @@ const dialogTotalProduct = ref<boolean>(false);
 const productMode = ref<'group' | 'type' | 'service' | 'product'>('group');
 const productGroup = ref<Product[]>();
 const productType = ref<Product[]>();
-
+const productAndServiceTab = ref<string>('all');
 const previousValue = ref();
 
 const formData = ref<ProductCreate>({
@@ -495,14 +496,80 @@ watch(currentStatus, async () => {});
         </div>
       </AppBox>
       <AppBox bordered v-else-if="productMode === 'service'" no-padding>
+        <div class="row justify-between q-px-md">
+          <q-tabs v-model="productAndServiceTab" dense>
+            <q-tab name="all">
               <div
-          class="row justify-center q-py-sm"
+                class="row"
-          style="background-color: var(--surface-2)"
+                :class="
+                  productAndServiceTab === 'all'
+                    ? 'text-bold'
+                    : 'app-text-muted'
+                "
               >
+                ทั้งหมด
+                <q-badge
+                  class="rounded q-ml-sm"
+                  :class="
+                    productAndServiceTab === 'all' ? '' : 'app-text-muted'
+                  "
+                  :color="productAndServiceTab === 'all' ? 'primary' : ''"
+                  style="background-color: var(--surface-3)"
+                  label="2"
+                />
+              </div>
+            </q-tab>
+
+            <q-tab name="product">
+              <div
+                class="row"
+                :class="
+                  productAndServiceTab === 'product'
+                    ? 'text-bold'
+                    : 'app-text-muted'
+                "
+              >
+                ทั้งหมด
+                <q-badge
+                  class="rounded q-ml-sm"
+                  :class="
+                    productAndServiceTab === 'product' ? '' : 'app-text-muted'
+                  "
+                  :color="productAndServiceTab === 'product' ? 'primary' : ''"
+                  style="background-color: var(--surface-3)"
+                  label="2"
+                />
+              </div>
+            </q-tab>
+            <q-tab name="service">
+              <div
+                class="row"
+                :class="
+                  productAndServiceTab === 'service'
+                    ? 'text-bold'
+                    : 'app-text-muted'
+                "
+              >
+                ทั้งหมด
+                <q-badge
+                  class="rounded q-ml-sm"
+                  :class="
+                    productAndServiceTab === 'service' ? '' : 'app-text-muted'
+                  "
+                  :color="productAndServiceTab === 'service' ? 'primary' : ''"
+                  style="background-color: var(--surface-3)"
+                  label="2"
+                />
+              </div>
+            </q-tab>
+          </q-tabs>
+
+          <div class="row q-pt-sm q-mb-sm">
             <q-input
-            style="width: 500px"
+              style="width: 300px"
               outlined
               dense
+              unelavated
               :label="$t('search')"
               class="q-mr-md"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
@@ -513,27 +580,48 @@ watch(currentStatus, async () => {});
                 <q-icon name="mdi-magnify" />
               </template>
             </q-input>
+
             <q-btn
-            icon="mdi-plus"
+              icon="mdi-tune-vertical-variant"
+              size="sm"
               :color="$q.dark.isActive ? 'dark' : 'white'"
               :text-color="$q.dark.isActive ? 'white' : 'dark'"
-            class="bordered rounded q-px-sm"
+              class="bordered rounded q-py-sm"
               unelevated
-            @click="dialogProductServiceType = true"
+            >
-          />
+              <q-menu class="bordered">
-          <div class="q-mx-lg">ปุ่มรวมสินค้าทั้งหมด >></div>
+                <q-list v-close-popup dense>
-          <q-btn
+                  <q-item
-            unelevated
+                    clickable
-            @click="dialogTotalProduct = true"
+                    class="flex items-center"
-            class="bordered rounded q-px-sm"
+                    @click="console.log('test')"
-            icon="mdi-plus"
+                  >
-            :color="$q.dark.isActive ? 'dark' : 'white'"
+                    {{ $t('all') }}
-            :text-color="$q.dark.isActive ? 'white' : 'dark'"
+                  </q-item>
-            round
+                  <q-item
-          />
+                    clickable
+                    class="flex items-center"
+                    @click="console.log('test')"
+                  >
+                    {{ $t('statusACTIVE') }}
+                  </q-item>
+                  <q-item
+                    clickable
+                    class="flex items-center"
+                    @click="console.log('test')"
+                  >
+                    {{ $t('statusINACTIVE') }}
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
           </div>
-        <div class="flex justify-center items-center" style="min-height: 70vh">
+        </div>
-          asdasdasd
+        <div
+          class="flex justify-center items-center"
+          style="min-height: 70vh; background-color: var(--surface-2)"
+        >
+          <NoData />
         </div>
       </AppBox>
     </div>