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';

const flowStore = useFlowStore();

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

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

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

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();
});

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, async () => {
  await fetchList();
});

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

<template>
  <div
    class="bordered surface-1 col column surface-2 rounded no-wrap"
    style="overflow: hidden"
  >
    <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-btn
          padding="10px 16px"
          icon="mdi-tune-vertical-variant"
          size="sm"
          :color="$q.dark.isActive ? 'dark' : 'white'"
          :text-color="$q.dark.isActive ? 'white' : 'dark'"
          class="bordered rounded q-ml-sm col-1"
          unelevated
        >
          <q-menu class="bordered">
            <q-list v-close-popup dense>
              <q-item
                clickable
                class="flex items-center"
                @click="currentStatus = 'All'"
              >
                {{ $t('all') }}
              </q-item>
              <q-item
                clickable
                class="flex items-center"
                @click="currentStatus = 'ACTIVE'"
              >
                {{ $t('statusACTIVE') }}
              </q-item>
              <q-item
                clickable
                class="flex items-center"
                @click="currentStatus = 'INACTIVE'"
              >
                {{ $t('statusINACTIVE') }}
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
      </div>
    </div>
    <div
      class="row q-pa-md q-col-gutter-md col scroll"
      :class="{
        'justify-center': totalBranch === 0,
        'items-center': totalBranch === 0,
      }"
    >
      <NoData v-if="totalBranch === 0" :not-found="!!inputSearch" />

      <div v-for="(br, i) in branch" :key="i" class="col-md-6 col-12">
        <BranchCardCustomer
          class="surface-1"
          :inactive="br.status === 'INACTIVE'"
          :color="customerType === 'CORP' ? 'corp' : 'pers'"
          :badgeField="['status']"
          :data="{
            customerBranchFormTab: br.branchNo,
            branchName: br.name,
            address:
              $i18n.locale === 'en-US'
                ? `${br.addressEN || ''} ${br.subDistrict?.nameEN || ''} ${br.district?.nameEN || ''} ${br.province?.nameEN || ''}`
                : `${br.address || ''} ${br.subDistrict?.name || ''} ${br.district?.name || ''} ${br.province?.name || ''}`,
            telephone: br.telephoneNo,
            businessTypePure: useOptionStore().mapOption(br.bussinessType),
            totalEmployee: br._count?.employee,
          }"
          @view-detail="$emit('viewDetail', br, i)"
        />
      </div>
    </div>

    <div class="row justify-between items-center q-px-md q-py-sm">
      <div class="app-text-muted col offset-md-4">
        {{
          $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>
  </div>
</template>

<style scoped>
.color__purple {
  background: hsl(var(--purple-11-hsl));
}

.color__green {
  background: hsl(var(--teal-9-hsl));
}
</style>