salix-front/src/pages/Customer/Card/CustomerDescriptor.vue

139 lines
5.1 KiB
Vue

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toCurrency } from 'src/filters';
import CardDescriptor from 'components/ui/CardDescriptor.vue';
const $props = defineProps({
id: {
type: Number,
required: false,
default: null,
},
});
const route = useRoute();
const { t } = useI18n();
const entityId = computed(() => {
return $props.id || route.params.id;
});
</script>
<template>
<card-descriptor module="Customer" :url="`Clients/${entityId}/getCard`">
<template #body="{ entity }">
<q-list>
<q-item v-if="entity.salesPersonUser">
<q-item-section>
<q-item-label caption>{{
t('customer.card.salesPerson')
}}</q-item-label>
<q-item-label>
{{ entity.salesPersonUser.name }}
</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label caption>
{{ t('customer.card.credit') }}
</q-item-label>
<q-item-label>
{{ toCurrency(entity.credit) }}
</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label caption>{{
t('customer.card.securedCredit')
}}</q-item-label>
<q-item-label>
{{ toCurrency(entity.creditInsurance) }}
</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section v-if="entity.payMethod">
<q-item-label caption>{{
t('customer.card.payMethod')
}}</q-item-label>
<q-item-label>
{{ entity.payMethod.name }}
</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label caption>{{ t('customer.card.debt') }}</q-item-label>
<q-item-label>
{{ toCurrency(entity.debt) }}
</q-item-label>
</q-item-section>
</q-item>
</q-list>
<q-card-actions class="q-gutter-md">
<q-icon
v-if="entity.isActive == false"
name="vn:disabled"
size="xs"
color="primary"
>
<q-tooltip>{{ t('customer.card.isDisabled') }}</q-tooltip>
</q-icon>
<q-icon
v-if="entity.isFreezed == true"
name="vn:frozen"
size="xs"
color="primary"
>
<q-tooltip>{{ t('customer.card.isFrozen') }}</q-tooltip>
</q-icon>
<q-icon
v-if="entity.debt > entity.credit"
name="vn:risk"
size="xs"
color="primary"
>
<q-tooltip>{{ t('customer.card.hasDebt') }}</q-tooltip>
</q-icon>
<q-icon
v-if="entity.isTaxDataChecked == false"
name="vn:no036"
size="xs"
color="primary"
>
<q-tooltip>{{ t('customer.card.notChecked') }}</q-tooltip>
</q-icon>
<q-icon
v-if="entity.account && entity.account.active == false"
name="vn:noweb"
size="xs"
color="primary"
>
<q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip>
</q-icon>
</q-card-actions>
<!-- <q-card-actions>
<q-btn size="md" icon="vn:ticket" color="primary">
<q-tooltip>Ticket list</q-tooltip>
</q-btn>
<q-btn size="md" icon="vn:invoice-out" color="primary">
<q-tooltip>Invoice Out list</q-tooltip>
</q-btn>
<q-btn size="md" icon="vn:basketadd" color="primary">
<q-tooltip>Order list</q-tooltip>
</q-btn>
<q-btn size="md" icon="face" color="primary">
<q-tooltip>View user</q-tooltip>
</q-btn>
<q-btn size="md" icon="expand_more" color="primary">
<q-tooltip>More options</q-tooltip>
</q-btn>
</q-card-actions> -->
</template>
</card-descriptor>
</template>