From 18d0aca1ded7c0c6bac5a31b1faf3245e599a25d Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Mon, 27 Jan 2025 15:19:45 +0700
Subject: [PATCH] refactor: add new components

---
 src/components/shared/ToggleView.vue        |  51 +++++
 src/components/shared/table/TableWorker.vue | 220 ++++++++++++++++++++
 2 files changed, 271 insertions(+)
 create mode 100644 src/components/shared/ToggleView.vue
 create mode 100644 src/components/shared/table/TableWorker.vue

diff --git a/src/components/shared/ToggleView.vue b/src/components/shared/ToggleView.vue
new file mode 100644
index 00000000..fbe3f361
--- /dev/null
+++ b/src/components/shared/ToggleView.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const model = defineModel<boolean>('model');
+</script>
+
+<template>
+  <q-btn-toggle
+    id="btn-mode"
+    v-model="model"
+    dense
+    class="no-shadow bordered rounded surface-1 q-ml-sm"
+    :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+    size="xs"
+    :options="[
+      { value: true, slot: 'folder' },
+      { value: false, slot: 'list' },
+    ]"
+  >
+    <template v-slot:folder>
+      <q-icon
+        name="mdi-view-grid-outline"
+        size="16px"
+        class="q-px-sm q-py-xs rounded"
+        :style="{
+          color: $q.dark.isActive
+            ? model
+              ? '#C9D3DB '
+              : '#787B7C'
+            : model
+              ? '#787B7C'
+              : '#C9D3DB',
+        }"
+      />
+    </template>
+    <template v-slot:list>
+      <q-icon
+        name="mdi-format-list-bulleted"
+        class="q-px-sm q-py-xs rounded"
+        size="16px"
+        :style="{
+          color: $q.dark.isActive
+            ? model === false
+              ? '#C9D3DB'
+              : '#787B7C'
+            : model === false
+              ? '#787B7C'
+              : '#C9D3DB',
+        }"
+      />
+    </template>
+  </q-btn-toggle>
+</template>
diff --git a/src/components/shared/table/TableWorker.vue b/src/components/shared/table/TableWorker.vue
new file mode 100644
index 00000000..73d446ac
--- /dev/null
+++ b/src/components/shared/table/TableWorker.vue
@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+import { Lang } from 'src/utils/ui';
+
+import { QTableSlots, QTableColumn } from 'quasar';
+import { Employee } from 'src/stores/employee/types';
+
+import { calculateAge, dateFormatJS } from 'src/utils/datetime';
+import useOptionStore from 'stores/options';
+
+const selected = defineModel<Employee[]>('selected');
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+const { locale } = useI18n();
+const optionStore = useOptionStore();
+
+defineEmits<{
+  (e: 'create'): void;
+}>();
+
+type ExclusiveProps = {
+  grid?: boolean;
+  disabledWorkerId?: string[];
+  rows: Employee[];
+};
+
+const columns = [
+  {
+    name: '#check',
+    align: 'left',
+    label: '',
+    field: (_: any) => '#check',
+  },
+  {
+    name: 'order',
+    align: 'center',
+    label: 'general.order',
+    field: (e: Employee & { _index: number }) => e._index + 1,
+  },
+  {
+    name: 'foreignRefNo',
+    align: 'center',
+    label: 'quotation.foreignRefNo',
+    field: (v: Employee) =>
+      v.employeePassport !== undefined
+        ? v.employeePassport[0]?.number || '-'
+        : '-',
+  },
+  {
+    name: 'employeeName',
+    align: 'left',
+    label: 'quotation.employeeName',
+    field: (v: Employee) =>
+      locale.value === Lang.English
+        ? `${v.firstNameEN} ${v.lastNameEN}`
+        : `${v.firstName} ${v.lastName}`,
+  },
+  {
+    name: 'birthDate',
+    align: 'left',
+    label: 'general.birthDate',
+    field: (v: Employee) => dateFormatJS({ date: v.dateOfBirth }),
+  },
+  {
+    name: 'age',
+    align: 'left',
+    label: 'general.age',
+    field: (v: Employee) => calculateAge(v.dateOfBirth),
+  },
+  {
+    name: 'nationality',
+    align: 'left',
+    label: 'general.nationality',
+    field: (v: Employee) => optionStore.mapOption(v.nationality),
+  },
+  {
+    name: 'documentExpireDate',
+    align: 'left',
+    label: 'quotation.documentExpireDate',
+    field: (v: Employee) =>
+      v.employeePassport !== undefined &&
+      v.employeePassport[0]?.expireDate !== undefined
+        ? dateFormatJS({ date: v.employeePassport[0]?.expireDate })
+        : '-',
+  },
+] satisfies QTableColumn[];
+
+const props = defineProps<ExclusiveProps>();
+
+function getEmployeeImageUrl(item: Employee) {
+  if (item.selectedImage) {
+    return `${API_BASE_URL}/employee/${item.id}/image/${item.selectedImage}`;
+  }
+  // NOTE: static image
+  return `/images/employee-avatar-${item.gender}.png`;
+}
+
+function handleUpdate() {
+  if (selected.value?.length === 0) {
+    selected.value = props.rows?.filter(
+      (v) => !props.disabledWorkerId?.includes(v.id),
+    );
+  } else {
+    selected.value = [];
+  }
+}
+
+function selectedIndex(item: Employee) {
+  return selected.value?.findIndex((v) => v.id === item.id);
+}
+</script>
+<template>
+  <q-table
+    v-model:selected="selected"
+    :rows-per-page-options="[0]"
+    :rows="
+      rows.map((data, i) => ({
+        ...data,
+        _index: i,
+      }))
+    "
+    :grid
+    :columns
+    hide-bottom
+    bordered
+    flat
+    hide-pagination
+    selection="multiple"
+    card-container-class="q-col-gutter-sm"
+    class="full-width"
+    row-key="id"
+  >
+    <template v-slot:header="props">
+      <q-tr
+        style="background-color: hsla(var(--info-bg) / 0.07)"
+        :props="props"
+      >
+        <q-th v-for="col in columns" :key="col.name" :props="props">
+          <template v-if="!col.name.startsWith('#')">
+            {{ $t(col.label) }}
+          </template>
+          <template v-if="col.name === '#check'">
+            <q-checkbox
+              v-model="props.selected"
+              @update:model-value="(v) => handleUpdate()"
+              size="sm"
+            />
+          </template>
+        </q-th>
+      </q-tr>
+    </template>
+
+    <template
+      v-slot:body="props: {
+        row: Employee & { _index: number };
+      } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
+    >
+      <q-tr
+        :class="{
+          dark: $q.dark.isActive,
+          'selectable-item__disabled': disabledWorkerId?.some(
+            (id) => id === props.row.id,
+          ),
+        }"
+        class="text-center"
+      >
+        <q-td v-for="col in columns" :align="col.align" :key="col.name">
+          <!-- NOTE: custom column will starts with # -->
+          <template v-if="!col.name.startsWith('#')">
+            <q-avatar
+              v-if="col.name === 'employeeName'"
+              class="q-mr-sm"
+              size="md"
+            >
+              <q-img
+                :src="getEmployeeImageUrl(props.row)"
+                :ratio="1"
+                class="text-center"
+              />
+            </q-avatar>
+            <span>
+              {{
+                typeof col.field === 'string'
+                  ? props.row[col.field as keyof Employee]
+                  : col.field(props.row)
+              }}
+            </span>
+          </template>
+          <template
+            v-if="
+              col.name === '#check' &&
+              !disabledWorkerId?.some((id) => id === props.row.id)
+            "
+          >
+            <q-checkbox v-model="props.selected" size="sm" />
+          </template>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:item="props: { row: Employee; rowIndex: number }">
+      <slot
+        name="grid"
+        :index="props.rowIndex"
+        :item="{ ...props.row, _selectedIndex: selectedIndex(props.row) }"
+      />
+    </template>
+  </q-table>
+</template>
+
+<style scoped>
+.selectable-item__disabled {
+  filter: grayscale(1);
+  opacity: 0.5;
+
+  & :deep(*) {
+    cursor: not-allowed;
+  }
+}
+</style>