0
0
Fork 0

refactor(InvoiceInBasicData): use VnDms

This commit is contained in:
Alex Moreno 2024-11-04 13:02:39 +01:00
parent e26fdfe4a3
commit 08204aa5f0
4 changed files with 114 additions and 353 deletions

View File

@ -272,6 +272,7 @@ defineExpose({
hasChanges, hasChanges,
reset, reset,
fetch, fetch,
formData,
}); });
</script> </script>
<template> <template>

View File

@ -31,6 +31,10 @@ const $props = defineProps({
type: String, type: String,
default: null, default: null,
}, },
description: {
type: String,
default: null,
},
}); });
const warehouses = ref(); const warehouses = ref();
@ -43,7 +47,8 @@ const dms = ref({});
onMounted(() => { onMounted(() => {
defaultData(); defaultData();
if (!$props.formInitialData) if (!$props.formInitialData)
dms.value.description = t($props.model + 'Description', dms.value); dms.value.description =
$props.description ?? t($props.model + 'Description', dms.value);
}); });
function onFileChange(files) { function onFileChange(files) {
dms.value.hasFileAttached = !!files; dms.value.hasFileAttached = !!files;
@ -54,7 +59,6 @@ function mapperDms(data) {
const formData = new FormData(); const formData = new FormData();
const { files } = data; const { files } = data;
if (files) formData.append(files?.name, files); if (files) formData.append(files?.name, files);
delete data.files;
const dms = { const dms = {
hasFile: !!data.hasFile, hasFile: !!data.hasFile,
@ -78,6 +82,7 @@ async function save() {
const body = mapperDms(dms.value); const body = mapperDms(dms.value);
const response = await axios.post(getUrl(), body[0], body[1]); const response = await axios.post(getUrl(), body[0], body[1]);
emit('onDataSaved', body[1].params, response); emit('onDataSaved', body[1].params, response);
delete dms.value.files;
return response; return response;
} }

View File

@ -3,8 +3,6 @@ import { ref, computed } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import axios from 'axios';
import { useArrayData } from 'src/composables/useArrayData';
import { downloadFile } from 'src/composables/downloadFile'; import { downloadFile } from 'src/composables/downloadFile';
import FormModel from 'components/FormModel.vue'; import FormModel from 'components/FormModel.vue';
import VnSelect from 'src/components/common/VnSelect.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
@ -12,15 +10,15 @@ import FetchData from 'src/components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue'; import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import VnDms from 'src/components/common/VnDms.vue';
import VnConfirm from 'src/components/ui/VnConfirm.vue';
import axios from 'axios';
const quasar = useQuasar();
const { t } = useI18n(); const { t } = useI18n();
const dms = ref({});
const route = useRoute(); const route = useRoute();
const quasar = useQuasar();
const editDownloadDisabled = ref(false); const editDownloadDisabled = ref(false);
const arrayData = useArrayData();
const invoiceIn = computed(() => arrayData.store.data);
const userConfig = ref(null); const userConfig = ref(null);
const invoiceId = computed(() => +route.params.id); const invoiceId = computed(() => +route.params.id);
@ -36,98 +34,25 @@ const warehousesRef = ref();
const allowTypesRef = ref(); const allowTypesRef = ref();
const allowedContentTypes = ref([]); const allowedContentTypes = ref([]);
const sageWithholdings = ref([]); const sageWithholdings = ref([]);
const inputFileRef = ref(); const documentDialogRef = ref({});
const editDmsRef = ref(); const invoiceInRef = ref({});
const createDmsRef = ref();
async function checkFileExists(dmsId) { function deleteFile(dmsFk) {
if (!dmsId) return; quasar
try { .dialog({
await axios.get(`Dms/${dmsId}`, { fields: ['id'] }); component: VnConfirm,
editDownloadDisabled.value = false; componentProps: {
} catch (e) { title: t('globals.confirmDeletion'),
editDownloadDisabled.value = true; message: t('globals.confirmDeletionMessage'),
} },
} })
.onOk(async () => {
async function setEditDms(dmsId) { await axios.post(`dms/${dmsFk}/removeFile`);
const { data } = await axios.get(`Dms/${dmsId}`); invoiceInRef.value.formData.dmsFk = null;
dms.value = { invoiceInRef.value.formData.dms = undefined;
warehouseId: data.warehouseFk, invoiceInRef.value.hasChanges = true;
companyId: data.companyFk, invoiceInRef.value.save();
dmsTypeId: data.dmsTypeFk,
...data,
};
if (!allowedContentTypes.value.length) await allowTypesRef.value.fetch();
editDmsRef.value.show();
}
async function setCreateDms() {
const { data } = await axios.get('DmsTypes/findOne', {
where: { code: 'invoiceIn' },
});
dms.value = {
reference: invoiceIn.value.supplierRef,
warehouseId: userConfig.value.warehouseFk,
companyId: userConfig.value.companyFk,
dmsTypeId: data.id,
description: invoiceIn.value.supplier.name,
hasFile: true,
hasFileAttached: true,
files: null,
};
createDmsRef.value.show();
}
async function onSubmit() {
try {
const isEdit = !!dms.value.id;
const errors = {
companyId: `The company can't be empty`,
warehouseId: `The warehouse can't be empty`,
dmsTypeId: `The DMS Type can't be empty`,
description: `The description can't be empty`,
};
Object.keys(errors).forEach((key) => {
if (!dms.value[key]) throw Error(t(errors[key]));
}); });
if (!isEdit && !dms.value.files) throw Error(t(`The files can't be empty`));
const formData = new FormData();
if (dms.value.files) {
for (let i = 0; i < dms.value.files.length; i++)
formData.append(dms.value.files[i].name, dms.value.files[i]);
dms.value.hasFileAttached = true;
}
const url = isEdit ? `dms/${dms.value.id}/updateFile` : 'Dms/uploadFile';
const { data } = await axios.post(url, formData, {
params: dms.value,
});
if (data.length) invoiceIn.value.dmsFk = data[0].id;
if (!isEdit) {
createDmsRef.value.hide();
} else {
editDmsRef.value.hide();
}
quasar.notify({
message: t('globals.dataSaved'),
type: 'positive',
});
} catch (error) {
quasar.notify({
message: t(`${error.message}`),
type: 'negative',
});
}
} }
</script> </script>
<template> <template>
@ -181,10 +106,12 @@ async function onSubmit() {
@on-fetch="(data) => (sageWithholdings = data)" @on-fetch="(data) => (sageWithholdings = data)"
/> />
<FormModel <FormModel
ref="invoiceInRef"
model="InvoiceIn" model="InvoiceIn"
:go-to="`/invoice-in/${invoiceId}/vat`" :go-to="`/invoice-in/${invoiceId}/vat`"
auto-load
:url-update="`InvoiceIns/${invoiceId}/updateInvoiceIn`" :url-update="`InvoiceIns/${invoiceId}/updateInvoiceIn`"
@on-fetch="(data) => (documentDialogRef.supplierName = data.supplier.nickname)"
auto-load
> >
<template #form="{ data }"> <template #form="{ data }">
<VnRow> <VnRow>
@ -242,16 +169,18 @@ async function onSubmit() {
</QItem> </QItem>
</template> </template>
</VnSelect> </VnSelect>
<VnInput
:label="t('Document')" <div class="row no-wrap">
v-model="data.dmsFk" <VnInput
clearable :label="t('Document')"
clear-icon="close" v-model="data.dmsFk"
@update:model-value="checkFileExists(data.dmsFk)" clearable
> clear-icon="close"
<template #prepend> class="full-width"
:disable="true"
/>
<div v-if="data.dmsFk" class="row no-wrap q-pa-xs q-gutter-x-xs">
<QBtn <QBtn
v-if="data.dmsFk"
:class="{ :class="{
'no-pointer-events': editDownloadDisabled, 'no-pointer-events': editDownloadDisabled,
}" }"
@ -262,33 +191,51 @@ async function onSubmit() {
round round
@click="downloadFile(data.dmsFk)" @click="downloadFile(data.dmsFk)"
/> />
</template>
<template #append>
<QBtn <QBtn
:class="{ :class="{
'no-pointer-events': editDownloadDisabled, 'no-pointer-events': editDownloadDisabled,
}" }"
:disable="editDownloadDisabled" :disable="editDownloadDisabled"
v-if="data.dmsFk"
icon="edit" icon="edit"
round round
padding="xs" padding="xs"
@click="setEditDms(data.dmsFk)" @click="
() => {
documentDialogRef.show = true;
documentDialogRef.dms = data.dms;
}
"
> >
<QTooltip>{{ t('Edit document') }}</QTooltip> <QTooltip>{{ t('Edit document') }}</QTooltip>
</QBtn> </QBtn>
<QBtn <QBtn
v-else :class="{
icon="add_circle" 'no-pointer-events': editDownloadDisabled,
round }"
shortcut="+" :disable="editDownloadDisabled"
icon="delete"
:title="t('Delete file')"
padding="xs" padding="xs"
@click="setCreateDms()" round
> @click="deleteFile(data.dmsFk)"
<QTooltip>{{ t('Create document') }}</QTooltip> />
</QBtn> </div>
</template> <QBtn
</VnInput> v-else
icon="add_circle"
round
shortcut="+"
padding="xs"
@click="
() => {
documentDialogRef.show = true;
delete documentDialogRef.dms;
}
"
>
<QTooltip>{{ t('Create document') }}</QTooltip>
</QBtn>
</div>
</VnRow> </VnRow>
<VnRow> <VnRow>
<VnSelect <VnSelect
@ -319,237 +266,28 @@ async function onSubmit() {
</VnRow> </VnRow>
</template> </template>
</FormModel> </FormModel>
<QDialog ref="editDmsRef"> <QDialog v-model="documentDialogRef.show">
<QForm @submit="onSubmit()" class="all-pointer-events"> <VnDms
<QCard class="q-pa-sm"> model="dms"
<QCardSection class="row items-center q-pb-none"> default-dms-code="invoiceIn"
<span class="text-primary text-h6"> :form-initial-data="documentDialogRef.dms"
<QIcon name="edit" class="q-mr-xs" /> :url="
{{ t('Edit document') }} documentDialogRef.dms
</span> ? `Dms/${documentDialogRef.dms.id}/updateFile`
<QSpace /> : 'Dms/uploadFile'
<QBtn icon="close" flat round dense v-close-popup /> "
</QCardSection> :description="documentDialogRef.supplierName"
<QCardSection class="q-py-none"> @on-data-saved="
<QItem> (_, { data }) => {
<VnInput let dmsData = data;
class="full-width q-pa-xs" if (Array.isArray(data)) dmsData = data[0];
:label="t('Reference')" invoiceInRef.formData.dmsFk = dmsData.id;
v-model="dms.reference" invoiceInRef.formData.dms = dmsData;
clearable invoiceInRef.hasChanges = true;
clear-icon="close" invoiceInRef.save();
/> }
<VnSelect "
class="full-width q-pa-xs" />
:label="t('Company')"
v-model="dms.companyId"
:options="companies"
option-value="id"
option-label="code"
:required="true"
/>
</QItem>
<QItem>
<VnSelect
class="full-width q-pa-xs"
:label="t('Warehouse')"
v-model="dms.warehouseId"
:options="warehouses"
option-value="id"
option-label="name"
:required="true"
/>
<VnSelect
class="full-width q-pa-xs"
:label="t('Type')"
v-model="dms.dmsTypeId"
:options="dmsTypes"
option-value="id"
option-label="name"
:required="true"
/>
</QItem>
<QItem>
<VnInput
:label="t('Description')"
v-model="dms.description"
:required="true"
type="textarea"
class="full-width q-pa-xs"
size="lg"
autogrow
clearable
clear-icon="close"
/>
</QItem>
<QItem>
<QFile
ref="inputFileRef"
class="full-width q-pa-xs"
:label="t('File')"
v-model="dms.files"
multiple
:accept="allowedContentTypes.join(',')"
clearable
clear-icon="close"
>
<template #append>
<QBtn
icon="attach_file_add"
flat
round
padding="xs"
@click="inputFileRef.pickFiles()"
>
<QTooltip>
{{ t('globals.selectFile') }}
</QTooltip>
</QBtn>
<QBtn icon="info" flat round padding="xs">
<QTooltip max-width="30rem">
{{
`${t(
'Allowed content types'
)}: ${allowedContentTypes.join(', ')}`
}}
</QTooltip>
</QBtn>
</template>
</QFile>
</QItem>
<QItem>
<QCheckbox
:label="t('Generate identifier for original file')"
v-model="dms.hasFile"
/>
</QItem>
</QCardSection>
<QCardActions class="justify-end">
<QBtn
flat
:label="t('globals.close')"
color="primary"
v-close-popup
/>
<QBtn :label="t('globals.save')" color="primary" @click="onSubmit" />
</QCardActions>
</QCard>
</QForm>
</QDialog>
<QDialog ref="createDmsRef">
<QForm @submit="onSubmit()" class="all-pointer-events">
<QCard class="q-pa-sm">
<QCardSection class="row items-center q-pb-none">
<span class="text-primary text-h6">
<QIcon name="edit" class="q-mr-xs" />
{{ t('Create document') }}
</span>
<QSpace />
<QBtn icon="close" flat round dense v-close-popup />
</QCardSection>
<QCardSection class="q-pb-none">
<QItem>
<VnInput
class="full-width q-pa-xs"
:label="t('Reference')"
v-model="dms.reference"
/>
<VnSelect
class="full-width q-pa-xs"
:label="`${t('Company')}*`"
v-model="dms.companyId"
:options="companies"
option-value="id"
option-label="code"
:required="true"
/>
</QItem>
<QItem>
<VnSelect
class="full-width q-pa-xs"
:label="`${t('Warehouse')}*`"
v-model="dms.warehouseId"
:options="warehouses"
option-value="id"
option-label="name"
:required="true"
/>
<VnSelect
class="full-width q-pa-xs"
:label="`${t('Type')}*`"
v-model="dms.dmsTypeId"
:options="dmsTypes"
option-value="id"
option-label="name"
:required="true"
/>
</QItem>
<QItem>
<VnInput
class="full-width q-pa-xs"
type="textarea"
size="lg"
autogrow
:label="`${t('Description')}*`"
v-model="dms.description"
clearable
clear-icon="close"
:rules="[(val) => val.length || t('Required field')]"
/>
</QItem>
<QItem>
<QFile
ref="inputFileRef"
class="full-width q-pa-xs"
:label="t('File')"
v-model="dms.files"
multiple
:accept="allowedContentTypes.join(',')"
clearable
clear-icon="close"
>
<template #append>
<QBtn
icon="attach_file_add"
flat
round
padding="xs"
@click="inputFileRef.pickFiles()"
>
<QTooltip>
{{ t('globals.selectFile') }}
</QTooltip>
</QBtn>
<QBtn icon="info" flat round padding="xs">
<QTooltip max-width="30rem">
{{
`${t(
'Allowed content types'
)}: ${allowedContentTypes.join(', ')}`
}}
</QTooltip>
</QBtn>
</template>
</QFile>
</QItem>
<QItem>
<QCheckbox
:label="t('Generate identifier for original file')"
v-model="dms.hasFile"
/>
</QItem>
</QCardSection>
<QCardActions align="right">
<QBtn
flat
:label="t('globals.close')"
color="primary"
v-close-popup
/>
<QBtn :label="t('globals.save')" color="primary" @click="onSubmit" />
</QCardActions>
</QCard>
</QForm>
</QDialog> </QDialog>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -20,6 +20,23 @@ const filter = {
{ relation: 'invoiceInDueDay' }, { relation: 'invoiceInDueDay' },
{ relation: 'company' }, { relation: 'company' },
{ relation: 'currency' }, { relation: 'currency' },
{
relation: 'dms',
scope: {
fields: [
'dmsTypeFk',
'reference',
'hardCopyNumber',
'workerFk',
'description',
'hasFile',
'file',
'created',
'companyFk',
'warehouseFk',
],
},
},
], ],
}; };