salix-front/src/components/common/VnDms.vue

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';

import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';

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

const props = defineProps({
    model: {
        type: String,
        required: true,
    },
    defaultDmsCode: {
        type: String,
        required: true,
    },
});

const warehouses = ref();
const companies = ref();
const dmsTypes = ref();
const allowedContentTypes = ref();
const config = ref({});
const dms = ref({});

function onFileChange(files) {
    dms.value.hasFileAttached = !!files;
    dms.value.file = files?.name;
}

function parseDms(data) {
    const defaultDms = {};

    for (let prop in data) {
        if (prop.endsWith('Fk')) data[prop.replace('Fk', 'Id')] = data[prop];
    }
    console.log(data);
    dms.value = data;
}

function mapperDms(data) {
    const formData = new FormData();
    const { files } = data;
    if (files) formData.append(files?.name, files);
    console.log('data', data);
    delete data.files;

    const dms = {
        hasFile: false,
        hasFileAttached: false,
        reference: data.id,
        warehouseId: config.value.warehouseFk,
        companyId: config.value.companyFk,
        dmsTypeId: data.dmsTypeFk,
        description: 'ASD',
    };
    return [formData, { params: dms }];
}
</script>
<template>
    <FetchData url="Warehouses" @on-fetch="(data) => (warehouses = data)" auto-load />
    <FetchData url="Companies" @on-fetch="(data) => (companies = data)" auto-load />
    <FetchData url="DmsTypes" @on-fetch="(data) => (dmsTypes = data)" auto-load />
    <FetchData
        url="DmsContainers/allowedContentTypes"
        @on-fetch="(data) => (allowedContentTypes = data.join(','))"
        auto-load
    />
    <FetchData
        url="UserConfigs/getUserConfig"
        @on-fetch="(data) => (config = data)"
        auto-load
    />
    <FormModel
        :url="`Dms/${route.params.id}`"
        update-type="post"
        :url-update="`${props.model}/${route.params.id}/uploadFile`"
        @on-fetch="parseDms"
        model="dms"
        :auto-load="!!route.params.id"
        :mapper="mapperDms"
    >
        <template #form>
            <div class="q-gutter-y-ms">
                <VnRow>
                    <VnInput :label="t('Reference')" v-model="dms.reference" />
                    <VnSelectFilter
                        :label="t('globals.company')"
                        v-model="dms.companyFk"
                        :options="companies"
                        option-value="id"
                        option-label="code"
                        input-debounce="0"
                    />
                </VnRow>
                <VnRow>
                    <VnSelectFilter
                        :label="t('globals.warehouse')"
                        v-model="dms.warehouseFk"
                        :options="warehouses"
                        option-value="id"
                        option-label="name"
                        input-debounce="0"
                    />
                    <VnSelectFilter
                        :label="t('globals.type')"
                        v-model="dms.dmsTypeFk"
                        :options="dmsTypes"
                        option-value="id"
                        option-label="name"
                        input-debounce="0"
                    />
                </VnRow>
                <QInput
                    :label="t('globals.description')"
                    v-model="dms.description"
                    type="textarea"
                />
                {{ allowedContentTypes }}
                <QFile
                    :label="t('entry.buys.file')"
                    v-model="dms.files"
                    :multiple="false"
                    :accept="allowedContentTypes"
                    @update:model-value="onFileChange(dms.files)"
                    class="required"
                    :display-value="dms.file"
                >
                    <template #prepend>
                        <QIcon name="vn:attach" class="cursor-pointer">
                            <QTooltip>{{ t('Select a file') }}</QTooltip>
                        </QIcon>
                    </template>
                    <template #append>
                        <QIcon name="info" class="cursor-pointer">
                            <QTooltip>{{
                                t('contentTypesInfo', { allowedContentTypes })
                            }}</QTooltip>
                        </QIcon>
                    </template>
                </QFile>
                <QCheckbox
                    v-model="dms.hasFile"
                    :label="t('Generate identifier for original file')"
                />
            </div>
        </template>
    </FormModel>
</template>
<style scoped>
.q-gutter-y-ms {
    display: grid;
    row-gap: 20px;
}
</style>
<i18n>
en:
    contentTypesInfo: Allowed file types {allowedContentTypes}
es:
    contentTypesInfo: Tipos de archivo permitidos {allowedContentTypes}
    Generate identifier for original file: Generar identificador para archivo original
</i18n>