From 1ec6bd03e222ab62385b21f5c352086264bc33d3 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Thu, 15 Aug 2024 14:23:30 +0700
Subject: [PATCH] refactor: add components table

---
 .../03_customer-management/TableEmpoloyee.vue | 315 ++++++++++++++++++
 1 file changed, 315 insertions(+)
 create mode 100644 src/components/03_customer-management/TableEmpoloyee.vue

diff --git a/src/components/03_customer-management/TableEmpoloyee.vue b/src/components/03_customer-management/TableEmpoloyee.vue
new file mode 100644
index 00000000..6613b116
--- /dev/null
+++ b/src/components/03_customer-management/TableEmpoloyee.vue
@@ -0,0 +1,315 @@
+<script setup lang="ts">
+import { calculateAge, dateFormat } from 'src/utils/datetime';
+
+import PersonCard from 'components/shared/PersonCard.vue';
+
+const prop = withDefaults(
+  defineProps<{
+    gridView?: boolean;
+    listEmployee: any[];
+    columnsEmployee: any[];
+    fieldSelected: string[];
+  }>(),
+  {
+    gridView: false,
+  },
+);
+</script>
+
+<template>
+  <q-table
+    flat
+    bordered
+    :grid="gridView"
+    :rows="listEmployee"
+    :columns="columnsEmployee"
+    class="full-width"
+    card-container-class="q-col-gutter-md"
+    row-key="name"
+    :rows-per-page-options="[0]"
+    hide-pagination
+    :visible-columns="fieldSelected"
+  >
+    <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 !== ''">
+            {{ $t(col.label) }}
+          </span>
+        </q-th>
+      </q-tr>
+    </template>
+
+    <template v-slot:body="props">
+      <q-tr
+        :style="
+          props.rowIndex % 2 !== 0
+            ? $q.dark.isActive
+              ? 'background: hsl(var(--gray-11-hsl)/0.2)'
+              : `background: #f9fafc`
+            : ''
+        "
+        :class="{
+          'app-text-muted': props.row.status === 'INACTIVE',
+          'status-active': props.row.status !== 'INACTIVE',
+          'status-inactive': props.row.status === 'INACTIVE',
+        }"
+        :props="props"
+        :id="`row-table-${props.row.firstNameEN}`"
+        @click="
+          () => {
+            // employeeFormState.drawerModal = true;
+            // employeeFormStore.assignFormDataEmployee(
+            //   props.row.id,
+            // );
+            // $router.push(`/customer-management/${props.row.id}/branch`);
+            // openDialogInputForm('INFO', props.row.id);
+          }
+        "
+      >
+        <q-td v-if="fieldSelected.includes('firstName')">
+          <div class="row items-center" style="flex-wrap: nowrap">
+            <div
+              style="width: 50px; display: flex; margin-bottom: var(--size-2)"
+            >
+              <div class="branch-card__icon">
+                <q-avatar size="md">
+                  <q-img
+                    :src="
+                      props.row.profileImageUrl ?? '/images/employee-avatar.png'
+                    "
+                  >
+                    <template #error>
+                      <q-img src="/images/employee-avatar.png" />
+                    </template>
+                  </q-img>
+                </q-avatar>
+              </div>
+            </div>
+            <div class="col">
+              <div class="col">
+                {{ `${props.row.firstName} ${props.row.lastName}` || '-' }}
+
+                <q-icon
+                  class="q-pl-xs"
+                  :class="{
+                    'symbol-gender': props.row.gender,
+                    'symbol-gender__male': props.row.gender === 'male',
+                    'symbol-gender__female': props.row.gender === 'female',
+                  }"
+                  :name="`mdi-gender-${props.row.gender === 'male' ? 'male' : 'female'}`"
+                  width="24px"
+                />
+              </div>
+              <div class="col app-text-muted">
+                {{ `${props.row.firstNameEN} ${props.row.lastNameEN}` || '-' }}
+              </div>
+            </div>
+          </div>
+        </q-td>
+
+        <q-td v-if="fieldSelected.includes('formDialogInputNationality')">
+          {{ props.row.nationality || '-' }}
+        </q-td>
+
+        <q-td v-if="fieldSelected.includes('formDialogInputPassportNo')">
+          {{ props.row.passportNumber || '-' }}
+        </q-td>
+
+        <q-td v-if="fieldSelected.includes('formDialogInputAge')">
+          {{ calculateAge(props.row.dateOfBirth) }}
+        </q-td>
+
+        <q-td v-if="fieldSelected.includes('passportExpiryDate')">
+          {{ dateFormat(props.row.passportExpiryDate) }}
+        </q-td>
+
+        <q-td v-if="fieldSelected.includes('formDialogEmployeeNRCNo')">
+          {{ props.row.nrcNo || '-' }}
+        </q-td>
+
+        <q-td v-if="fieldSelected.includes('formDialogInputAge')">
+          <div class="row items-center" v-if="props.row.customerBranch">
+            <div class="col">
+              <div class="col">
+                {{ props.row.customerBranch.code }}
+              </div>
+              <div class="col app-text-muted">
+                {{
+                  $i18n.locale === 'en-US'
+                    ? `${props.row.customerBranch.nameEN}`
+                    : `${props.row.customerBranch.name}`
+                }}
+              </div>
+            </div>
+          </div>
+        </q-td>
+
+        <q-td v-if="fieldSelected.includes('type')">
+          <span class="tags tags__pink">
+            {{ $t('EMPLOYEE') }}
+          </span>
+        </q-td>
+        <q-td>
+          <q-btn
+            icon="mdi-eye-outline"
+            size="sm"
+            dense
+            round
+            flat
+            @click.stop="$emit('view', props.row)"
+          />
+
+          <q-btn
+            icon="mdi-dots-vertical"
+            :id="`btn-dots-${props.row.code}`"
+            size="sm"
+            dense
+            round
+            flat
+            @click.stop
+            :key="props.row.id"
+          >
+            <q-menu class="bordered">
+              <q-list v-close-popup>
+                <q-item
+                  v-close-popup
+                  :id="`view-detail-btn-${props.row.name}-view`"
+                  @click.stop="() => $emit('view', props.row)"
+                  clickable
+                  dense
+                  class="row q-py-sm"
+                  style="white-space: nowrap"
+                >
+                  <q-icon
+                    name="mdi-eye-outline"
+                    class="col-3"
+                    size="xs"
+                    style="color: hsl(var(--green-6-hsl))"
+                  />
+                  <span class="col-9 q-px-md flex items-center">
+                    {{ $t('viewDetail') }}
+                  </span>
+                </q-item>
+
+                <q-item
+                  :id="`view-detail-btn-${props.row.name}-edit`"
+                  clickable
+                  dense
+                  class="row q-py-sm"
+                  style="white-space: nowrap"
+                  @click="() => $emit('edit', props.row)"
+                >
+                  <q-icon
+                    name="mdi-pencil-outline"
+                    class="col-3"
+                    size="xs"
+                    style="color: hsl(var(--cyan-6-hsl))"
+                  />
+                  <span class="col-9 q-px-md flex items-center">
+                    {{ $t('edit') }}
+                  </span>
+                </q-item>
+                <q-item
+                  :id="`view-detail-btn-${props.row.name}-delete`"
+                  dense
+                  :clickable="props.row.status === 'CREATED'"
+                  class="row"
+                  :class="{
+                    'surface-3': props.row.status !== 'CREATED',
+                    'app-text-muted': props.row.status !== 'CREATED',
+                  }"
+                  style="white-space: nowrap"
+                  @click="() => $emit('delete', props.row)"
+                >
+                  <q-icon
+                    name="mdi-trash-can-outline"
+                    size="xs"
+                    class="col-3"
+                    :class="{
+                      'app-text-negative': props.row.status === 'CREATED',
+                    }"
+                  />
+                  <span class="col-9 q-px-md flex items-center">
+                    {{ $t('delete') }}
+                  </span>
+                </q-item>
+
+                <q-item dense>
+                  <q-item-section class="q-py-sm">
+                    <div class="q-pa-sm surface-2 rounded flex items-center">
+                      <ToggleButton
+                        :id="`view-detail-btn-${props.row.name}-status`"
+                        two-way
+                        :model-value="props.row.status !== 'INACTIVE'"
+                        @click="() => $emit('status', props.row)"
+                      />
+                      <span class="q-pl-md">
+                        {{
+                          props.row.status !== 'INACTIVE'
+                            ? $t('switchOnLabel')
+                            : $t('switchOffLabel')
+                        }}
+                      </span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+
+    <template v-slot:item="props">
+      <div class="col-12 col-md-3 col-sm-6">
+        <PersonCard
+          :id="`card-${props.row.firstNameEN}`"
+          :field-selected="fieldSelected"
+          history
+          :prefix-id="props.row.firstNameEN ?? props.rowIndex"
+          :data="{
+            code: props.row.code,
+            name:
+              $i18n.locale === 'en-US'
+                ? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
+                : `${props.row.firstName} ${props.row.lastName} `.trim(),
+            img: props.row.profileImageUrl || '/images/employee-avatar.png',
+            male: props.row.gender === 'male',
+            female: props.row.gender === 'female',
+            detail: [
+              {
+                icon: 'mdi-passport',
+                value: props.row.nationality,
+              },
+
+              {
+                icon: 'mdi-clock-outline',
+                value: props.row.dateOfBirth
+                  ? calculateAge(props.row.dateOfBirth) ?? ''
+                  : '',
+              },
+            ],
+          }"
+          :tag="[
+            {
+              color: 'pink',
+              value: $t('EMPLOYEE'),
+            },
+          ]"
+          :disabled="props.row.status === 'INACTIVE'"
+          @history="() => $emit('history', props.row)"
+          @update-card="() => $emit('edit', props.row)"
+          @enter-card="() => $emit('view', props.row)"
+          @delete-card="() => $emit('delete', props.row)"
+          @toggle-status="() => $emit('status', props.row)"
+        />
+      </div>
+    </template>
+  </q-table>
+</template>
+
+<style scoped lang="scss"></style>