From 0a9f18fe664023e1783ccc9e6e04ecfc562b250d Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 17 Jul 2024 08:16:59 +0000
Subject: [PATCH] fix: 03 table scroll

---
 src/pages/03_customer-management/MainPage.vue | 699 +++++++++---------
 1 file changed, 342 insertions(+), 357 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 00c00437..ef1c4d41 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1816,6 +1816,7 @@ watch([inputSearch, currentStatus], async () => {
           :limits="[15, 80]"
           style="width: 100%"
           class="col"
+          after-class="overflow-hidden"
         >
           <template v-slot:before>
             <div
@@ -1857,7 +1858,7 @@ watch([inputSearch, currentStatus], async () => {
           </template>
 
           <template v-slot:after>
-            <div class="column full-height">
+            <div class="column full-height no-wrap">
               <!-- employer -->
               <template
                 v-if="
@@ -1873,45 +1874,338 @@ watch([inputSearch, currentStatus], async () => {
                 >
                   <NoData :not-found="!!inputSearch" />
                 </div>
+
                 <div
                   v-if="listCustomer.length !== 0"
-                  class="col q-pa-md scroll"
+                  class="col q-pa-md scroll full-width"
                 >
-                  <div class="row full-width customer-row">
-                    <q-table
-                      flat
-                      bordered
-                      :grid="modeView"
-                      :rows="listCustomer"
-                      :columns="columnsCustomer"
-                      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 class="surface-2" :props="props">
-                          <q-th
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
-                          >
-                            {{ $t(col.label) }}
-                          </q-th>
-                          <q-th auto-width />
-                        </q-tr>
-                      </template>
-
-                      <template v-slot:body="props">
-                        <q-tr
-                          :class="{
-                            'app-text-muted': props.row.status === 'INACTIVE',
-                            'status-active': props.row.status !== 'INACTIVE',
-                            'status-inactive': props.row.status === 'INACTIVE',
-                          }"
+                  <q-table
+                    flat
+                    bordered
+                    :grid="modeView"
+                    :rows="listCustomer"
+                    :columns="columnsCustomer"
+                    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 class="surface-2" :props="props">
+                        <q-th
+                          v-for="col in props.cols"
+                          :key="col.name"
                           :props="props"
-                          @click="
+                        >
+                          {{ $t(col.label) }}
+                        </q-th>
+                        <q-th auto-width />
+                      </q-tr>
+                    </template>
+
+                    <template v-slot:body="props">
+                      <q-tr
+                        :class="{
+                          'app-text-muted': props.row.status === 'INACTIVE',
+                          'status-active': props.row.status !== 'INACTIVE',
+                          'status-inactive': props.row.status === 'INACTIVE',
+                        }"
+                        :props="props"
+                        @click="
+                          () => {
+                            currentCustomerName = props.row.customerName;
+                            customerType = props.row.customerType;
+                            currentCustomerUrlImage = props.row.imageUrl;
+                            currentCustomerId = props.row.id;
+
+                            const { branch, ...payload } = props.row;
+                            currentCustomer = payload;
+                            isMainPage = false;
+                          }
+                        "
+                      >
+                        <q-td v-if="fieldSelected.includes('customerName')">
+                          <div class="row items-center">
+                            <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.imageUrl ?? '/no-profile.png'
+                                    "
+                                  >
+                                    <template #error>
+                                      <q-img src="/no-profile.png" />
+                                    </template>
+                                  </q-img>
+                                </q-avatar>
+
+                                <!-- <q-icon
+                                    size="md"
+                                    style="scale: 0.8"
+                                    :name="props.row.imageUrl"
+                                  /> -->
+                              </div>
+                            </div>
+                            <div class="col">
+                              <div class="col">
+                                {{ props.row.customerName || '-' }}
+                              </div>
+                              <div class="col app-text-muted">
+                                {{ props.row.customerNameEN || '-' }}
+                              </div>
+                            </div>
+                          </div>
+                        </q-td>
+                        <q-td v-if="fieldSelected.includes('type')">
+                          <span
+                            class="tags"
+                            :class="{
+                              [`tags__${props.row.customerType === 'CORP' ? 'purple' : 'green'}`]: true,
+                            }"
+                          >
+                            {{
+                              props.row.customerType === 'CORP'
+                                ? $t('customerLegalEntity')
+                                : $t('customerNaturalPerson')
+                            }}
+                          </span>
+                        </q-td>
+                        <q-td v-if="fieldSelected.includes('personName')">
+                          {{ props.row.personName }}
+                        </q-td>
+                        <q-td v-if="fieldSelected.includes('telephoneNo')">
+                          {{ props.row.branch[0].telephoneNo || '-' }}
+                        </q-td>
+                        <q-td v-if="fieldSelected.includes('branchEmail')">
+                          {{ props.row.branch[0].email || '-' }}
+                        </q-td>
+                        <q-td>
+                          <q-btn
+                            icon="mdi-eye-outline"
+                            :id="`btn-eye-${props.row.customerName}`"
+                            size="sm"
+                            dense
+                            round
+                            flat
+                            @click.stop="
+                              () => {
+                                const { branch, ...payload } = props.row;
+                                currentCustomer = payload;
+
+                                currentCustomerId = props.row.id;
+                                customerType = props.row.customerType;
+                                assignFormData(props.row.id);
+                                openDialogInputForm('INFO', props.row.id);
+                              }
+                            "
+                          />
+
+                          <q-btn
+                            icon="mdi-dots-vertical"
+                            :id="`btn-dots-${props.row.customerName}`"
+                            size="sm"
+                            dense
+                            round
+                            flat
+                            @click.stop
+                            :key="props.row.id"
+                          >
+                            <q-menu class="bordered">
+                              <q-list v-close-popup>
+                                <q-item
+                                  :id="`view-detail-btn-${props.row.name}-view`"
+                                  @click.stop="
+                                    () => {
+                                      const { branch, ...payload } = props.row;
+                                      currentCustomer = payload;
+
+                                      currentCustomerId = props.row.id;
+                                      customerType = props.row.customerType;
+                                      assignFormData(props.row.id);
+                                      openDialogInputForm('INFO', props.row.id);
+                                    }
+                                  "
+                                  v-close-popup
+                                  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`"
+                                  v-close-popup
+                                  clickable
+                                  dense
+                                  class="row q-py-sm"
+                                  style="white-space: nowrap"
+                                  @click="
+                                    () => {
+                                      if (!listCustomer) return;
+
+                                      customerType = props.row.customerType;
+                                      const { branch, ...payload } = props.row;
+                                      currentCustomer = payload;
+
+                                      currentCustomerId = props.row.id;
+
+                                      assignFormData(props.row.id);
+
+                                      infoDrawerEdit = true;
+                                      openDialogInputForm('INFO', props.row.id);
+                                    }
+                                  "
+                                >
+                                  <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
+                                  v-close-popup
+                                  :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="deleteCustomerById(props.row.id)"
+                                >
+                                  <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">
+                                      <q-toggle
+                                        :id="`view-detail-btn-${props.row.name}-status`"
+                                        dense
+                                        size="sm"
+                                        :label="
+                                          props.row.status !== 'INACTIVE'
+                                            ? $t('switchOnLabel')
+                                            : $t('switchOffLabel')
+                                        "
+                                        @click="
+                                          async () => {
+                                            toggleStatusCustomer(
+                                              props.row.id,
+                                              props.row.status === 'ACTIVE'
+                                                ? true
+                                                : false,
+                                            );
+                                          }
+                                        "
+                                        :model-value="
+                                          props.row.status !== 'INACTIVE'
+                                        "
+                                      />
+                                    </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-3">
+                        <PersonCard
+                          :field-selected="fieldSelected"
+                          history
+                          :data="{
+                            code: props.row.code,
+                            name:
+                              $i18n.locale === 'en-US'
+                                ? `${props.row.customerName} `.trim()
+                                : `${props.row.customerNameEN} `.trim(),
+                            img: props.row.imageUrl,
+                            male: undefined,
+                            female: undefined,
+                            detail: [
+                              {
+                                icon: 'mdi-cellphone',
+                                value: props.row.branch[0].telephoneNo,
+                              },
+                              {
+                                icon: 'mdi-account',
+                                value: props.row.personName,
+                              },
+                            ],
+                          }"
+                          :tag="[
+                            {
+                              color:
+                                {
+                                  CORP: 'purple',
+                                  PERS: 'green',
+                                }[props.row.customerType as string] || 'CORP',
+                              value: $t(
+                                props.row.customerType === 'CORP'
+                                  ? 'customerLegalEntity'
+                                  : 'customerNaturalPerson',
+                              ),
+                            },
+                          ]"
+                          :disabled="props.row.status === 'INACTIVE'"
+                          @history="openHistory(props.row.id)"
+                          @update-card="
+                            () => {
+                              if (!listCustomer) return;
+
+                              customerType = props.row.customerType;
+                              const { branch, ...payload } = props.row;
+                              currentCustomer = payload;
+
+                              currentCustomerId = props.row.id;
+
+                              assignFormData(props.row.id);
+
+                              infoDrawerEdit = true;
+                              openDialogInputForm('INFO', props.row.id);
+                            }
+                          "
+                          @enter-card="
                             () => {
                               currentCustomerName = props.row.customerName;
                               customerType = props.row.customerType;
@@ -1923,326 +2217,17 @@ watch([inputSearch, currentStatus], async () => {
                               isMainPage = false;
                             }
                           "
-                        >
-                          <q-td v-if="fieldSelected.includes('customerName')">
-                            <div class="row items-center">
-                              <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.imageUrl ?? '/no-profile.png'
-                                      "
-                                    >
-                                      <template #error>
-                                        <q-img src="/no-profile.png" />
-                                      </template>
-                                    </q-img>
-                                  </q-avatar>
-
-                                  <!-- <q-icon
-                                    size="md"
-                                    style="scale: 0.8"
-                                    :name="props.row.imageUrl"
-                                  /> -->
-                                </div>
-                              </div>
-                              <div class="col">
-                                <div class="col">
-                                  {{ props.row.customerName || '-' }}
-                                </div>
-                                <div class="col app-text-muted">
-                                  {{ props.row.customerNameEN || '-' }}
-                                </div>
-                              </div>
-                            </div>
-                          </q-td>
-                          <q-td v-if="fieldSelected.includes('type')">
-                            <span
-                              class="tags"
-                              :class="{
-                                [`tags__${props.row.customerType === 'CORP' ? 'purple' : 'green'}`]: true,
-                              }"
-                            >
-                              {{
-                                props.row.customerType === 'CORP'
-                                  ? $t('customerLegalEntity')
-                                  : $t('customerNaturalPerson')
-                              }}
-                            </span>
-                          </q-td>
-                          <q-td v-if="fieldSelected.includes('personName')">
-                            {{ props.row.personName }}
-                          </q-td>
-                          <q-td v-if="fieldSelected.includes('telephoneNo')">
-                            {{ props.row.branch[0].telephoneNo || '-' }}
-                          </q-td>
-                          <q-td v-if="fieldSelected.includes('branchEmail')">
-                            {{ props.row.branch[0].email || '-' }}
-                          </q-td>
-                          <q-td>
-                            <q-btn
-                              icon="mdi-eye-outline"
-                              :id="`btn-eye-${props.row.customerName}`"
-                              size="sm"
-                              dense
-                              round
-                              flat
-                              @click.stop="
-                                () => {
-                                  const { branch, ...payload } = props.row;
-                                  currentCustomer = payload;
-
-                                  currentCustomerId = props.row.id;
-                                  customerType = props.row.customerType;
-                                  assignFormData(props.row.id);
-                                  openDialogInputForm('INFO', props.row.id);
-                                }
-                              "
-                            />
-
-                            <q-btn
-                              icon="mdi-dots-vertical"
-                              :id="`btn-dots-${props.row.customerName}`"
-                              size="sm"
-                              dense
-                              round
-                              flat
-                              @click.stop
-                              :key="props.row.id"
-                            >
-                              <q-menu class="bordered">
-                                <q-list v-close-popup>
-                                  <q-item
-                                    :id="`view-detail-btn-${props.row.name}-view`"
-                                    @click.stop="
-                                      () => {
-                                        const { branch, ...payload } =
-                                          props.row;
-                                        currentCustomer = payload;
-
-                                        currentCustomerId = props.row.id;
-                                        customerType = props.row.customerType;
-                                        assignFormData(props.row.id);
-                                        openDialogInputForm(
-                                          'INFO',
-                                          props.row.id,
-                                        );
-                                      }
-                                    "
-                                    v-close-popup
-                                    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`"
-                                    v-close-popup
-                                    clickable
-                                    dense
-                                    class="row q-py-sm"
-                                    style="white-space: nowrap"
-                                    @click="
-                                      () => {
-                                        if (!listCustomer) return;
-
-                                        customerType = props.row.customerType;
-                                        const { branch, ...payload } =
-                                          props.row;
-                                        currentCustomer = payload;
-
-                                        currentCustomerId = props.row.id;
-
-                                        assignFormData(props.row.id);
-
-                                        infoDrawerEdit = true;
-                                        openDialogInputForm(
-                                          'INFO',
-                                          props.row.id,
-                                        );
-                                      }
-                                    "
-                                  >
-                                    <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
-                                    v-close-popup
-                                    :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="deleteCustomerById(props.row.id)"
-                                  >
-                                    <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">
-                                        <q-toggle
-                                          :id="`view-detail-btn-${props.row.name}-status`"
-                                          dense
-                                          size="sm"
-                                          :label="
-                                            props.row.status !== 'INACTIVE'
-                                              ? $t('switchOnLabel')
-                                              : $t('switchOffLabel')
-                                          "
-                                          @click="
-                                            async () => {
-                                              toggleStatusCustomer(
-                                                props.row.id,
-                                                props.row.status === 'ACTIVE'
-                                                  ? true
-                                                  : false,
-                                              );
-                                            }
-                                          "
-                                          :model-value="
-                                            props.row.status !== 'INACTIVE'
-                                          "
-                                        />
-                                      </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-3">
-                          <PersonCard
-                            :field-selected="fieldSelected"
-                            history
-                            :data="{
-                              code: props.row.code,
-                              name:
-                                $i18n.locale === 'en-US'
-                                  ? `${props.row.customerName} `.trim()
-                                  : `${props.row.customerNameEN} `.trim(),
-                              img: props.row.imageUrl,
-                              male: undefined,
-                              female: undefined,
-                              detail: [
-                                {
-                                  icon: 'mdi-cellphone',
-                                  value: props.row.branch[0].telephoneNo,
-                                },
-                                {
-                                  icon: 'mdi-account',
-                                  value: props.row.personName,
-                                },
-                              ],
-                            }"
-                            :tag="[
-                              {
-                                color:
-                                  {
-                                    CORP: 'purple',
-                                    PERS: 'green',
-                                  }[props.row.customerType as string] || 'CORP',
-                                value: $t(
-                                  props.row.customerType === 'CORP'
-                                    ? 'customerLegalEntity'
-                                    : 'customerNaturalPerson',
-                                ),
-                              },
-                            ]"
-                            :disabled="props.row.status === 'INACTIVE'"
-                            @history="openHistory(props.row.id)"
-                            @update-card="
-                              () => {
-                                if (!listCustomer) return;
-
-                                customerType = props.row.customerType;
-                                const { branch, ...payload } = props.row;
-                                currentCustomer = payload;
-
-                                currentCustomerId = props.row.id;
-
-                                assignFormData(props.row.id);
-
-                                infoDrawerEdit = true;
-                                openDialogInputForm('INFO', props.row.id);
-                              }
-                            "
-                            @enter-card="
-                              () => {
-                                currentCustomerName = props.row.customerName;
-                                customerType = props.row.customerType;
-                                currentCustomerUrlImage = props.row.imageUrl;
-                                currentCustomerId = props.row.id;
-
-                                const { branch, ...payload } = props.row;
-                                currentCustomer = payload;
-                                isMainPage = false;
-                              }
-                            "
-                            @delete-card="deleteCustomerById(props.row.id)"
-                            @toggle-status="
-                              toggleStatusCustomer(
-                                props.row.id,
-                                props.row.status === 'ACTIVE' ? true : false,
-                              )
-                            "
-                          />
-                        </div>
-                      </template>
-                    </q-table>
-                  </div>
+                          @delete-card="deleteCustomerById(props.row.id)"
+                          @toggle-status="
+                            toggleStatusCustomer(
+                              props.row.id,
+                              props.row.status === 'ACTIVE' ? true : false,
+                            )
+                          "
+                        />
+                      </div>
+                    </template>
+                  </q-table>
                 </div>
 
                 <div
@@ -2324,7 +2309,7 @@ watch([inputSearch, currentStatus], async () => {
                 </div>
 
                 <div
-                  class="col column justify-between q-px-md q-pt-md scroll"
+                  class="col full-width q-pa-md scroll"
                   v-if="listEmployee.length !== 0"
                 >
                   <q-table