salix-front/src/pages/Supplier/Card/SupplierSummary.vue

<script setup>
import { onMounted, ref, computed, onUpdated } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import CardSummary from 'components/ui/CardSummary.vue';
import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import { getUrl } from 'src/composables/getUrl';
import { useRole } from 'src/composables/useRole';

onUpdated(() => summaryRef.value.fetch());

const route = useRoute();
const roleState = useRole();
const { t } = useI18n();

const $props = defineProps({
    id: {
        type: Number,
        required: false,
        default: null,
    },
});

const entityId = computed(() => $props.id || route.params.id);

const summaryRef = ref();
const supplier = ref();
const supplierUrl = ref();

onMounted(async () => {
    await roleState.fetch();
    supplierUrl.value = (await getUrl('supplier/')) + entityId.value;
});

async function setData(data) {
    if (data) {
        supplier.value = data;
    }
}

const isAdministrative = computed(() => {
    return roleState.hasAny(['administrative']);
});
</script>

<template>
    <CardSummary
        ref="summaryRef"
        :url="`Suppliers/${entityId}/getSummary`"
        @on-fetch="(data) => setData(data)"
    >
        <template #header-left>
            <a v-if="isAdministrative" class="header link" :href="supplierUrl">
                <QIcon name="open_in_new" color="white" size="25px" />
            </a>
        </template>
        <template #header>
            <span>{{ supplier.name }} - {{ supplier.id }}</span>
        </template>

        <template #body>
            <QCard class="vn-one">
                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
                    {{ t('globals.summary.basicData') }}
                    <QIcon name="open_in_new" color="primary" />
                </a>
                <span v-else> {{ t('globals.summary.basicData') }}</span>
                <VnLv label="Id" :value="supplier.id" />
                <VnLv label="Alias" :value="supplier.nickname" />
                <VnLv :label="t('supplier.summary.responsible')">
                    <template #value>
                        <span class="link">
                            {{ supplier.worker?.user?.nickname || '-' }}
                            <WorkerDescriptorProxy
                                v-if="supplier.worker?.user?.id"
                                :id="supplier.worker?.user?.id"
                            />
                        </span>
                    </template>
                </VnLv>
                <VnLv :label="t('supplier.summary.notes')" class="q-mb-xs">
                    <template #value>
                        <span> {{ supplier.note || '-' }} </span>
                    </template>
                </VnLv>
                <VnLv :label="t('supplier.summary.notes')" class="q-mb-xs">
                    <template #value>
                        <span> {{ supplier.note || '-' }} </span>
                    </template>
                </VnLv>
                <VnLv :label="t('verified')" class="q-mb-xs">
                    <template #value>
                        <QCheckbox
                            v-model="supplier.isSerious"
                            dense
                            disable
                            class="full-width q-mb-xs"
                        />
                    </template>
                </VnLv>
                <VnLv :label="t('isActive')" class="q-mb-xs">
                    <template #value>
                        <QCheckbox
                            v-model="supplier.isActive"
                            dense
                            disable
                            class="full-width q-mb-xs"
                        />
                    </template>
                </VnLv>
            </QCard>
            <QCard class="vn-one">
                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
                    {{ t('supplier.summary.billingData') }}
                    <QIcon name="open_in_new" color="primary" />
                </a>
                <span v-else> {{ t('supplier.summary.billingData') }}</span>
                <VnLv
                    :label="t('supplier.summary.payMethod')"
                    :value="supplier.payMethod?.name || '-'"
                />
                <VnLv
                    :label="t('supplier.summary.payDeadline')"
                    :value="supplier.payDem?.payDem || '-'"
                />
                <VnLv :label="t('supplier.summary.payDay')" :value="supplier.payDay" />
                <VnLv :label="t('supplier.summary.account')" :value="supplier.account" />
            </QCard>
            <QCard class="vn-one">
                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
                    {{ t('supplier.summary.fiscalData') }}
                    <QIcon name="open_in_new" color="primary" />
                </a>
                <span v-else> {{ t('supplier.summary.fiscalData') }}</span>
                <VnLv
                    :label="t('supplier.summary.sageTaxType')"
                    :value="supplier.sageTaxType?.vat || '-'"
                />
                <VnLv
                    :label="t('supplier.summary.sageTransactionType')"
                    :value="supplier.sageTransactionType?.transaction || '-'"
                />
                <VnLv
                    :label="t('supplier.summary.sageWithholding')"
                    :value="supplier.sageWithholding?.withholding || '-'"
                />
                <VnLv
                    :label="t('supplier.summary.supplierActivity')"
                    :value="supplier.supplierActivity?.name || '-'"
                />
                <VnLv
                    :label="t('supplier.summary.healthRegister')"
                    :value="supplier.healthRegister"
                />
            </QCard>
            <QCard class="vn-one">
                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
                    {{ t('supplier.summary.fiscalAddress') }}
                    <QIcon name="open_in_new" color="primary" />
                </a>
                <span v-else> {{ t('supplier.summary.fiscalAddress') }}</span>
                <VnLv :label="t('supplier.summary.socialName')" :value="supplier.name" />
                <VnLv :label="t('supplier.summary.taxNumber')" :value="supplier.nif" />
                <VnLv :label="t('supplier.summary.street')" :value="supplier.street" />
                <VnLv :label="t('supplier.summary.city')" :value="supplier.city" />
                <VnLv
                    :label="t('supplier.summary.postCode')"
                    :value="supplier.postCode"
                />
                <VnLv
                    :label="t('supplier.summary.province')"
                    :value="supplier.province?.name || '-'"
                />
                <VnLv
                    :label="t('supplier.summary.country')"
                    :value="supplier.country?.country || '-'"
                />
            </QCard>
        </template>
    </CardSummary>
</template>
<style lang="scss" scoped></style>