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

<script setup lang="ts">
import { ref } from 'vue';
import AppBox from 'components/app/AppBox.vue';
import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue';
import { onMounted } from 'vue';
import useCustomerStore from 'src/stores/customer';
import { CustomerBranch, CustomerType } from 'src/stores/customer/types';
import { watch } from 'vue';

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

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

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

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

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',
  },
);

const emit = defineEmits<{
  (e: 'back'): void;
  (e: 'viewDetail', branch: CustomerBranch[]): void;
  (e: 'dialog'): void;
}>();

async function searchBranch() {
  const resultList = await fetchListBranch({
    query: inputSearch.value,
    includeCustomer: true,
  });

  if (resultList) {
    branch.value = resultList.result;
  }
}

onMounted(async () => {
  const result = await fetchListBranch({
    customerId: prop.customerId,
    page: 1,
    pageSize: pageSizeBranch.value,
  });
  if (result) {
    currentCustomerName.value = 'dasd';
    maxPageBranch.value = Math.ceil(result.total / pageSizeBranch.value);
    branch.value = result.result;
  }
});

watch(currentPageBranch, async () => {
  const resultList = await fetchListBranch({
    customerId: prop.customerId,
    page: currentPageBranch.value,
    pageSize: pageSizeBranch.value,
  });

  if (resultList) {
    currentPageBranch.value = resultList.page;

    maxPageBranch.value = Math.ceil(resultList.total / pageSizeBranch.value);
    branch.value = resultList.result;
  }
});
</script>

<template>
  <AppBox no-padding bordered>
    <div class="row no-wrap justify-between bordered-b surface-2">
      <div class="row items-center">
        <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 q-pa-md">
        <q-btn
          id="btn-add-customer"
          dense
          unelevated
          :label="'+ ' + $t('formDialogTitleCreateSubBranch')"
          padding="4px 16px"
          @click="$emit('dialog')"
          style="background-color: var(--cyan-6); color: white"
        />
        <q-separator vertical inset class="q-mx-lg" />
        <q-input
          style="width: 250px"
          outlined
          dense
          :label="$t('search')"
          class="q-mr-lg"
          :bg-color="$q.dark.isActive ? 'dark' : 'white'"
          v-model="inputSearch"
          debounce="500"
          @update:model-value="searchBranch()"
        ></q-input>
        <q-btn
          icon="mdi-tune-vertical-variant"
          size="sm"
          :color="$q.dark.isActive ? 'dark' : 'white'"
          :text-color="$q.dark.isActive ? 'white' : 'dark'"
          class="bordered rounded"
          unelevated
        >
          <q-menu class="bordered">
            <q-list v-close-popup dense>
              <q-item
                clickable
                class="flex items-center"
                @click="console.log('test')"
              >
                {{ $t('all') }}
              </q-item>
              <q-item
                clickable
                class="flex items-center"
                @click="console.log('test')"
              >
                {{ $t('statusACTIVE') }}
              </q-item>
              <q-item
                clickable
                class="flex items-center"
                @click="console.log('test')"
              >
                {{ $t('statusINACTIVE') }}
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
      </div>
    </div>
    <div class="row q-pa-lg q-col-gutter-xl" style="min-height: 350px">
      <div v-for="(br, i) in branch" :key="i" class="col-4">
        <BranchCardCustomer
          :color="customerType"
          :badgeField="['status']"
          :data="{
            customerBranchFormTab: br.branchNo,
            branchName: br.name,
            address: br.address,
            telephone: br.telephoneNo,
            businessTypePure: br.bussinessType,
            status: 'ดำเนินการอยู่',
            totalEmployee: 0,
          }"
          @view-detail="emit('viewDetail', [br])"
        />
      </div>
    </div>

    <div class="row flex-center q-pb-md">
      <q-pagination
        v-model="currentPageBranch"
        :max="maxPageBranch"
        direction-links
        gutter="sm"
      />
    </div>
  </AppBox>
</template>

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

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