From 72dbab6b33b15a44592c79c738fe9833d9dde4cd Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 18 Sep 2024 11:01:33 +0700
Subject: [PATCH] refactor: add new components

---
 src/components/ShowAttachent.vue   | 84 ++++++++++++++++++++++++++++++
 src/components/TableComponents.vue | 82 +++++++++++++++++++++++++++++
 2 files changed, 166 insertions(+)
 create mode 100644 src/components/ShowAttachent.vue
 create mode 100644 src/components/TableComponents.vue

diff --git a/src/components/ShowAttachent.vue b/src/components/ShowAttachent.vue
new file mode 100644
index 00000000..7cee7f09
--- /dev/null
+++ b/src/components/ShowAttachent.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { VuePDF, usePDF } from '@tato30/vue-pdf';
+
+const props = withDefaults(
+  defineProps<{ url: string; file: File | undefined }>(),
+  {},
+);
+
+const scale = ref(1);
+const page = ref(1);
+const { pdf, pages } = usePDF(computed(() => props.url));
+</script>
+
+<template>
+  <div class="col full-height column no-wrap">
+    <div
+      class="surface-0 bordered row items-center justify-evenly q-pa-sm no-wrap"
+      style="height: 50px"
+    >
+      <q-btn
+        @click="page = page > 1 ? page - 1 : page"
+        class="btn-next"
+        icon="mdi-chevron-left"
+        unelevated
+        dense
+        id="btn-prev-page-top"
+      />
+
+      <div class="ellipsis">Page {{ page }} of {{ pages }}</div>
+
+      <q-btn
+        @click="scale = scale > 0.25 ? scale - 0.25 : scale"
+        flat
+        dense
+        round
+        size="12px"
+        icon="mdi-magnify-minus-outline"
+        class="app-text-dark"
+      >
+        <q-tooltip>{{ $t('zoomOut') }}</q-tooltip>
+      </q-btn>
+      <div>{{ scale * 100 }}%</div>
+
+      <q-btn
+        flat
+        dense
+        round
+        size="12px"
+        class="app-text-dark"
+        icon="mdi-magnify-plus-outline"
+        @click="scale = scale < 2 ? scale + 0.25 : scale"
+      >
+        <q-tooltip>{{ $t('general.zoomIn') }}</q-tooltip>
+      </q-btn>
+
+      <q-btn
+        @click="page = page < pages ? page + 1 : page"
+        class="btn-next"
+        icon="mdi-chevron-right"
+        unelevated
+        dense
+        id="btn-prev-page-top"
+      />
+    </div>
+
+    <div
+      class="flex flex-center surface-2 bordered-l bordered-r bordered-b full-height scroll"
+    >
+      <VuePDF
+        v-if="
+          url?.split('?').at(0)?.endsWith('.pdf') ||
+          file?.type === 'application/pdf'
+        "
+        class="q-py-md"
+        :pdf="pdf"
+        :page="page"
+        :scale="scale"
+      />
+
+      <q-img v-else class="q-py-md full-width" :src="url" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/TableComponents.vue b/src/components/TableComponents.vue
new file mode 100644
index 00000000..61a4897d
--- /dev/null
+++ b/src/components/TableComponents.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { QTableProps } from 'quasar';
+import KebabAction from 'components/shared/KebabAction.vue';
+
+const props = withDefaults(
+  defineProps<{
+    rows: QTableProps['rows'];
+    columns: QTableProps['columns'];
+    flat?: boolean;
+    bordered?: boolean;
+    grid?: boolean;
+    hideHeader?: boolean;
+    buttomDownload?: boolean;
+  }>(),
+  {
+    row: () => [],
+    column: () => [],
+    flat: false,
+    bordered: false,
+    grid: false,
+    hideHeader: false,
+    buttomDownload: false,
+  },
+);
+</script>
+
+<template>
+  <q-table v-bind="props" class="full-height">
+    <template v-slot:header="props">
+      <q-tr
+        :style="`background-color:hsla(var(--info-bg) / 0.07) `"
+        :props="props"
+      >
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span v-if="col.label === 'nameEmployee'">
+            {{ $t('fullname') }}
+          </span>
+
+          <span v-if="col.label !== ''">
+            {{ $t(col.label) }}
+          </span>
+        </q-th>
+      </q-tr>
+    </template>
+
+    <template v-slot:body-cell-action="props">
+      <q-td class="text-center">
+        <q-btn
+          icon="mdi-eye-outline"
+          size="sm"
+          dense
+          round
+          flat
+          @click.stop="$emit('view', props.row.index)"
+        />
+
+        <q-btn
+          v-if="buttomDownload"
+          icon="mdi-download-outline"
+          size="sm"
+          dense
+          round
+          flat
+          @click.stop="$emit('download', props.row)"
+        />
+
+        <KebabAction
+          :id-name="props.row.code"
+          :status="props.row.status"
+          @view="$emit('view', props.row)"
+          @edit="$emit('edit', props.row)"
+          @delete="$emit('delete', props.row)"
+          @change-status="$emit('toggleStatus', props.row)"
+        />
+      </q-td>
+
+      <slot name="dialog" :index="props.rowIndex" :row="props.row"></slot>
+    </template>
+  </q-table>
+</template>
+
+<style lang="less" scoped></style>