salix-front/src/pages/InvoiceIn/Card/InvoiceInCard.vue

86 lines
2.4 KiB
Vue

<script setup>
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import { useArrayData } from 'src/composables/useArrayData';
import { onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
const stateStore = useStateStore();
import in18n from '../in18n';
const { t } = useI18n(in18n);
const route = useRoute();
const filter = {
include: [
{
relation: 'supplier',
scope: {
include: {
relation: 'contacts',
scope: {
where: {
email: { neq: null },
},
},
},
},
},
{
relation: 'invoiceInDueDay',
},
{
relation: 'company',
},
{
relation: 'currency',
},
],
};
const arrayData = useArrayData('InvoiceIn', {
url: `InvoiceIns/${route.params.id}`,
filter,
});
onMounted(async () => {
await arrayData.fetch({ append: false });
watch(
() => route.params.id,
async (newId, oldId) => {
if (newId) {
arrayData.store.url = `InvoiceIns/${newId}`;
await arrayData.fetch({ append: false });
}
}
);
});
</script>
<template>
<Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
<VnSearchbar
data-key="InvoiceInList"
url="InvoiceIns/filter"
:label="t('searchInvoice')"
:info="t('You can search by invoice reference')"
/>
</Teleport>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<InvoiceInDescriptor />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<QPageContainer>
<QPage>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<div class="q-pa-md"><RouterView></RouterView></div>
</QPage>
</QPageContainer>
</template>