Merge branch 'develop' into dev

src/components/ViewPDF.vue

@@ -3,7 +3,6 @@ import { ref, watch, computed, onUnmounted } from "vue";
 import { useQuasar } from "quasar";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import axios from "axios";
-import http from "@/plugins/http";
 import config from "@/app.config";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -29,9 +28,6 @@ const currentObjectUrl = ref<string | null>(null);
 // Computed properties for navigation
 const canGoPrevious = computed(() => page.value > 1);
 const canGoNext = computed(() => page.value < numOfPages.value);
-const pageInfo = computed(
-  () => `หน้าที่ ${page.value} จาก ${numOfPages.value}`
-);
 
 /**
  * Navigate to previous page
@@ -164,102 +160,57 @@ onUnmounted(() => {
     transition-show="slide-up"
     transition-hide="slide-down"
   >
-    <q-card>
-      <DialogHeader :tittle="`${title}`" :close="onClose" />
-
+    <q-card class="column full-height bg-grey-2">
+      <DialogHeader :tittle="title" :close="onClose" class="bg-white" />
       <q-separator />
 
-      <!-- PDF Content -->
+      <div
+        v-if="isLoadPDF"
+        class="bg-white q-py-xs q-px-md row justify-center items-center q-gutter-sm shadow-1"
+      >
+        <q-btn
+          flat
+          round
+          icon="mdi-chevron-left"
+          :disable="!canGoPrevious"
+          @click="goToPreviousPage"
+          color="primary"
+        />
+
+        <q-chip
+          outline
+          color="primary"
+          label-color="grey-9"
+          class="q-px-lg text-weight-bold"
+        >
+          หน้า {{ page }} / {{ numOfPages || "-" }}
+        </q-chip>
+
+        <q-btn
+          flat
+          round
+          icon="mdi-chevron-right"
+          :disable="!canGoNext"
+          @click="goToNextPage"
+          color="primary"
+        />
+      </div>
+
       <q-card-section
         v-if="isLoadPDF"
-        bordered
-        :class="
-          $q.screen.gt.xs
-            ? ['q-ma-xl', 'q-pa-xl', 'scroll']
-            : ['q-ma-xs', 'q-pa-xs', 'scroll']
-        "
+        class="col scroll q-pa-md flex flex-center"
       >
-        <!-- Top Navigation -->
-        <div class="pagination-controls">
-          <q-btn
-            class="nav-button"
-            flat
-            dense
-            :disable="!canGoPrevious"
-            @click="goToPreviousPage"
-          >
-            <q-icon name="mdi-chevron-left" />
-          </q-btn>
-
-          <span class="page-info">{{ pageInfo }}</span>
-
-          <q-btn
-            class="nav-button"
-            flat
-            dense
-            :disable="!canGoNext"
-            @click="goToNextPage"
-          >
-            <q-icon name="mdi-chevron-right" />
-          </q-btn>
-        </div>
-
-        <!-- PDF Viewer -->
-        <div class="pdf-container">
-          <VuePDF
-            ref="vuePDFRef"
-            :pdf="pdfSrc"
-            :page="page"
-            fit-parent
-            :scale="0.1"
-          />
-        </div>
-
-        <!-- Bottom Navigation -->
-        <div class="pagination-controls">
-          <q-btn
-            class="nav-button"
-            flat
-            dense
-            :disable="!canGoPrevious"
-            @click="goToPreviousPage"
-          >
-            <q-icon name="mdi-chevron-left" />
-          </q-btn>
-
-          <span class="page-info">{{ pageInfo }}</span>
-
-          <q-btn
-            class="nav-button"
-            flat
-            dense
-            :disable="!canGoNext"
-            @click="goToNextPage"
-          >
-            <q-icon name="mdi-chevron-right" />
-          </q-btn>
+        <div class="pdf-viewer-wrapper shadow-5">
+          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
         </div>
       </q-card-section>
 
-      <!-- Loading State -->
-      <q-card-section v-else>
-        <div class="full-width row flex-center text-accent q-gutter-sm">
-          <span
-            ><div
-              style="
-                height: 60vh;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-              "
-              class="text-grey-5"
-            >
-              <q-spinner color="primary" size="3em" :thickness="10" />
-            </div>
-          </span>
+      <q-card-section v-else class="col flex flex-center">
+        <div class="text-center">
+          <q-spinner color="primary" size="4em" :thickness="10" />
         </div>
       </q-card-section>
+
       <q-page-sticky position="bottom-right" :offset="[20, 20]">
         <q-btn
           fab
@@ -277,45 +228,23 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.pagination-controls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 0;
-}
-
-.nav-button {
-  color: #424242;
-  background-color: #f5f5f5;
-}
-
-.nav-button:hover {
-  background-color: #eeeeee;
-}
-
-.page-info {
-  font-size: 14px;
-  color: #424242;
-  font-weight: 500;
-}
-
-.pdf-container {
+/* สไตล์เพื่อให้ PDF ดูเหมือนวางบนโต๊ะ */
+.pdf-viewer-wrapper {
+  background-color: white;
   width: 100%;
-  margin: 16px 0;
+  max-width: 900px; /* จำกัดความกว้างเพื่อความสวยงามบนจอใหญ่ */
+  transition: all 0.3s ease;
 }
 
-.loading-container {
-  height: 60vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: #9e9e9e;
+/* ปรับแต่ง Scrollbar ให้ดูสะอาดตา */
+.scroll::-webkit-scrollbar {
+  width: 8px;
 }
-
-.loading-text {
-  color: #757575;
-  font-size: 16px;
-  margin: 0;
+.scroll::-webkit-scrollbar-thumb {
+  background: #bdbdbd;
+  border-radius: 4px;
+}
+.scroll::-webkit-scrollbar-thumb:hover {
+  background: #9e9e9e;
 }
 </style>