jws-frontend/src/components/03_customer-management/CustomerInfoComponent.vue

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';

import useCustomerStore from 'src/stores/customer';
import useFlowStore from 'src/stores/flow';
import useOptionStore from 'src/stores/options';

import { Status } from 'src/stores/types';
import { CustomerBranch, CustomerType } from 'src/stores/customer/types';

import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue';
import PaginationComponent from 'src/components/PaginationComponent.vue';
import NoData from 'components/NoData.vue';
import { QTableProps } from 'quasar';

const flowStore = useFlowStore();

const userCustomer = useCustomerStore();
const { fetchListCustomeBranch } = userCustomer;

const inputSearch = ref<string>('');

const branch = defineModel<CustomerBranch[]>('branch');
const currentCustomerName = defineModel<string>('currentCustomerName');
const modeView = defineModel<boolean>('modeView');

const currentCustomerUrlImage = defineModel<string | null>(
  'currentCustomerUrlImage',
);

const currentStatus = ref<Status | 'All'>('All');
const totalBranch = ref(0);

const currentPageBranch = ref<number>(1);
const maxPageBranch = ref<number>(1);
const pageSizeBranch = ref<number>(30);

const prop = withDefaults(
  defineProps<{
    color?: 'purple' | 'green';

    customerId: string;
    customerType: CustomerType;
  }>(),
  {
    color: 'green',
  },
);

defineEmits<{
  (e: 'back'): void;
  (e: 'viewDetail', branch: CustomerBranch, index: number): void;
  (e: 'dialog'): void;
}>();

onMounted(async () => {
  await fetchList();
});

const columns = [
  {
    name: 'branchLabelName',
    align: 'left',
    label: 'office',
    field: 'name',
    sortable: true,
  },
  {
    name: 'branchLabelAddress',
    align: 'left',
    label: 'address',
    field: 'address',
    sortable: true,
  },
  {
    name: 'branchLabelTel',
    align: 'left',
    label: 'formDialogInputTelephone',
    field: 'telephoneNo',
  },
] satisfies QTableProps['columns'];

const fieldDisplay = ref<
  (
    | 'branchName'
    | 'customerBranchFormTab'
    | 'address'
    | 'telephone'
    | 'businessTypePure'
    | 'totalEmployee'
  )[]
>([
  'branchName',
  'customerBranchFormTab',
  'address',
  'telephone',
  'businessTypePure',
  'totalEmployee',
]);
const branchFieldSelected = ref<
  (
    | 'customerBranchFormTab'
    | 'branchName'
    | 'address'
    | 'telephone'
    | 'businessTypePure'
    | 'totalEmployee'
  )[]
>(fieldDisplay.value);

async function fetchList() {
  const result = await fetchListCustomeBranch({
    customerId: prop.customerId,
    query: !!inputSearch.value ? inputSearch.value : undefined,
    page: currentPageBranch.value,
    pageSize: pageSizeBranch.value,
    includeCustomer: true,
    status:
      currentStatus.value === 'All'
        ? undefined
        : currentStatus.value === 'ACTIVE'
          ? 'ACTIVE'
          : 'INACTIVE',
  });
  if (result) {
    totalBranch.value = result.total;
    maxPageBranch.value = Math.ceil(result.total / pageSizeBranch.value);
    branch.value = result.result;
  }
}

watch([inputSearch, currentStatus], async () => {
  await fetchList();
});
</script>

<template>
  <div
    class="row justify-between bordered-b surface-3 full-width no-wrap"
    style="z-index: 1"
  >
    <div class="row items-center col-12 col-sm">
      <q-btn
        round
        icon="mdi-arrow-left"
        flat
        dense
        @click="$emit('back')"
        class="q-mr-md"
      />

      <q-card-section
        class="q-pa-sm q-pt-md q-mr-md q-mb-sm"
        :class="{
          color__purple: customerType === 'CORP',
          color__green: customerType === 'PERS',
        }"
        style="border-radius: 0 0 40px 40px; position: relative"
      >
        <q-avatar no-padding size="50px">
          <img :src="currentCustomerUrlImage ?? '/no-profile.png'" />
        </q-avatar>
      </q-card-section>
      <div>
        <div>{{ currentCustomerName }}</div>
        <div class="row items-center">
          <i
            class="isax isax-frame5"
            style="font-size: 1rem; color: var(--stone-6)"
          />
          <div class="q-px-sm">
            {{ '10' }}
          </div>
          <q-icon name="mdi-home" size="16px" style="color: var(--stone-6)" />
          <div class="q-px-sm">
            {{ '2' }}
          </div>
        </div>
      </div>
    </div>

    <div
      class="row items-center justify-end q-px-md col-12 col-sm q-py-sm no-wrap"
    >
      <q-input
        lazy-rules="ondemand"
        outlined
        dense
        class="col-6"
        :label="$t('search')"
        :bg-color="$q.dark.isActive ? 'dark' : 'white'"
        v-model="inputSearch"
        debounce="500"
      >
        <template v-slot:prepend>
          <q-icon name="mdi-magnify" />
        </template>
      </q-input>

      <q-select
        lazy-rules="ondemand"
        id="select-status"
        for="select-status"
        v-model="currentStatus"
        outlined
        dense
        option-value="value"
        option-label="label"
        class="col q-pl-sm"
        map-options
        emit-value
        :hide-dropdown-icon="$q.screen.lt.sm"
        :options="[
          { label: $t('all'), value: 'All' },
          { label: $t('statusACTIVE'), value: 'ACTIVE' },
          { label: $t('statusINACTIVE'), value: 'INACTIVE' },
        ]"
      ></q-select>

      <q-btn-toggle
        id="btn-mode"
        v-model="modeView"
        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
            id="icon-mode-grid"
            name="mdi-view-grid-outline"
            size="16px"
            class="q-px-sm q-py-sm rounded"
            :style="{
              color: $q.dark.isActive
                ? modeView
                  ? '#C9D3DB'
                  : '#787B7C'
                : modeView
                  ? '#787B7C'
                  : '#C9D3DB',
            }"
          />
        </template>
        <template v-slot:list>
          <q-icon
            id="icon-mode-list"
            name="mdi-format-list-bulleted"
            class="q-px-sm q-py-xs rounded"
            size="16px"
            :style="{
              color: $q.dark.isActive
                ? modeView === true
                  ? '#C9D3DB'
                  : '#787B7C'
                : modeView === false
                  ? '#787B7C'
                  : '#C9D3DB',
            }"
          />
        </template>
      </q-btn-toggle>
    </div>
  </div>
  <div
    class="row q-pa-md col scroll full-width surface-2"
    :class="{
      'justify-center': totalBranch === 0,
      'items-center': totalBranch === 0,
    }"
  >
    <NoData v-if="totalBranch === 0" :not-found="!!inputSearch" />

    <div style="width: 100%" v-else>
      <q-table
        v-if="branch"
        flat
        class="full-width"
        bordered
        :rows-per-page-options="[0]"
        :rows="branch"
        :columns="columns"
        :grid="modeView"
        card-container-class="row q-col-gutter-md"
        row-key="name"
        hide-pagination
        :visible-columns="branchFieldSelected"
      >
        <template #header>
          <q-tr class="surface-3">
            <q-th
              v-for="(v, i) in fieldDisplay"
              :key="v"
              :class="{ 'text-left': i === 0 }"
            >
              {{ $t(v) }}
            </q-th>
            <q-th auto-width />
          </q-tr>
        </template>
        <template #body="props">
          <q-tr
            :class="{
              'app-text-muted': props.row.status === 'INACTIVE',
              'cursor-pointer': props.row._count.branch !== 0,
            }"
            :props="props"
            @click="$emit('viewDetail', props.row, props.rowIndex)"
          >
            <q-td v-if="branchFieldSelected.includes('branchName')">
              <div class="row items-center no-wrap">
                <div
                  :class="{
                    'status-active': props.row.status !== 'INACTIVE',
                    'status-inactive': props.row.status === 'INACTIVE',
                  }"
                  class="q-mr-md"
                  style="display: flex; margin-bottom: var(--size-2)"
                >
                  <div
                    class="branch-card__icon"
                    :class="{ 'branch-card__dark': $q.dark.isActive }"
                  >
                    <q-icon
                      size="md"
                      style="scale: 0.8"
                      name="mdi-office-building-outline"
                    />
                  </div>
                </div>
                <div class="col" style="min-width: fit-content">
                  <div class="col">
                    {{
                      $i18n.locale === 'en-US'
                        ? props.row.nameEN
                        : props.row.name
                    }}
                  </div>
                  <div class="col app-text-muted">
                    {{ props.row.code }}
                  </div>
                </div>
              </div>
            </q-td>
            <q-td
              v-if="branchFieldSelected.includes('customerBranchFormTab')"
              class="text-center"
            >
              {{ props.row.branchNo || '-' }}
            </q-td>
            <q-td
              v-if="branchFieldSelected.includes('address')"
              class="text-center"
            >
              {{
                $i18n.locale === 'en-US'
                  ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
                  : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`
              }}
            </q-td>
            <q-td
              v-if="branchFieldSelected.includes('telephone')"
              class="text-center"
            >
              {{ props.row.telephoneNo || '-' }}
            </q-td>
            <q-td
              v-if="branchFieldSelected.includes('businessTypePure')"
              class="text-center"
            >
              {{ useOptionStore().mapOption(props.row.bussinessType) || '-' }}
            </q-td>
            <q-td
              v-if="branchFieldSelected.includes('totalEmployee')"
              class="text-center"
            >
              {{ props.row._count?.employee }}
            </q-td>
            <q-td>
              <q-btn
                icon="mdi-eye-outline"
                :id="`btn-eye-${props.row.customerName}`"
                size="sm"
                dense
                round
                flat
                @click="$emit('viewDetail', props.row, props.rowIndex)"
              />
            </q-td>
          </q-tr>
        </template>
        <template #item="props">
          <div class="col-12 col-md-6">
            <BranchCardCustomer
              class="surface-1"
              :inactive="props.row.status === 'INACTIVE'"
              :color="customerType === 'CORP' ? 'corp' : 'pers'"
              :badgeField="['status']"
              :data="{
                customerBranchFormTab: props.row.branchNo,
                branchName: props.row.name,
                address:
                  $i18n.locale === 'en-US'
                    ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
                    : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
                telephone: props.row.telephoneNo,
                businessTypePure: useOptionStore().mapOption(
                  props.row.bussinessType,
                ),
                totalEmployee: props.row._count?.employee,
              }"
              :visible-columns="branchFieldSelected"
              @view-detail="$emit('viewDetail', props.row, props.rowIndex)"
            />
          </div>
        </template>
      </q-table>
    </div>
  </div>

  <div class="row justify-between items-center q-px-md q-py-sm surface-2">
    <div class="col"></div>
    <div class="app-text-muted col text-center">
      {{
        $t('recordsPage', {
          resultcurrentPage: branch?.length,
          total: totalBranch,
        })
      }}
    </div>
    <div class="col-4 flex justify-end">
      <PaginationComponent
        v-model:current-page="currentPageBranch"
        v-model:max-page="maxPageBranch"
        :fetch-data="
          async () => {
            await fetchList();
            flowStore.rotate();
          }
        "
      />
    </div>
  </div>
</template>

<style scoped>
.branch-card__icon {
  --_branch-card-bg: var(--pink-6-hsl);

  background-color: hsla(var(--_branch-card-bg) / 0.15);
  border-radius: 50%;
  padding: var(--size-1);
  position: relative;
  transform: rotate(45deg);

  &.branch-card__dark {
    --_branch-card-bg: var(--pink-5-hsl);
  }

  &::after {
    content: ' ';
    display: block;
    block-size: 0.5rem;
    aspect-ratio: 1;
    position: absolute;
    border-radius: 50%;
    right: -0.25rem;
    top: calc(50% - 0.25rem);
    bottom: calc(50% - 0.25rem);
    background-color: hsla(var(--_branch-status-color) / 1);
  }

  & :deep(.q-icon) {
    transform: rotate(-45deg);
    color: hsla(var(--_branch-card-bg) / 1);
  }
}
</style>