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 } from 'src/stores/customer/types';

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

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

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

const prop = withDefaults(
  defineProps<{
    color?: 'purple' | 'green';
    customerId: string;
  }>(),
  {
    color: 'green',
  },
);

defineEmits<{
  (e: 'back'): void;
  (e: 'viewDetail'): void;
  (e: 'dialog'): void;
}>();

onMounted(async () => {
  const result = await fetchListById(prop.customerId);
  if (result) {
    currentCustomerName.value = result.customerName;
    currentCustomerUrlImage.value = result.imageUrl;
    branch.value = result.branch;
  }
});
</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 bg-green q-mr-md q-mb-sm"
          style="border-radius: 0 0 40px 40px; position: relative"
        >
          <q-avatar no-padding size="50px">
            <img
              :src="
                currentCustomerUrlImage ??
                'https://cdn.quasar.dev/img/avatar1.jpg'
              "
            />
          </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"
        ></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">
      <div v-for="(br, i) in branch" :key="i" class="col-4">
        <BranchCardCustomer :data="br" @view-detail="$emit('viewDetail')" />
      </div>
    </div>
  </AppBox>
</template>

<style scoped></style>