Apply VnDmsList component and add docuware action

src/components/common/VnDmsList.vue

@@ -9,6 +9,7 @@ import FetchData from 'components/FetchData.vue';
 import VnDms from 'src/components/common/VnDms.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import { downloadFile } from 'src/composables/downloadFile';
+import { getUrlFindOne } from 'composables/getUrl';
 
 const route = useRoute();
 const quasar = useQuasar();
@@ -142,15 +143,17 @@ const columns = computed(() => [
         components: [
             {
                 component: QBtn,
+                name: 'download',
                 props: () => ({
                     icon: 'cloud_download',
                     flat: true,
                     color: 'primary',
                 }),
-                click: (prop) => downloadFile(prop.row.id),
+                click: (prop) => downloadFile(prop.row.id, prop.row.isDocuware),
             },
             {
                 component: QBtn,
+                name: 'edit',
                 props: () => ({
                     icon: 'edit',
                     flat: true,
@@ -160,6 +163,7 @@ const columns = computed(() => [
             },
             {
                 component: QBtn,
+                name: 'delete',
                 props: () => ({
                     icon: 'delete',
                     flat: true,
@@ -167,6 +171,16 @@ const columns = computed(() => [
                 }),
                 click: (prop) => deleteDms(prop.row.id),
             },
+            {
+                component: QBtn,
+                name: 'openDocuware',
+                props: () => ({
+                    icon: 'open_in_new',
+                    flat: true,
+                    color: 'primary',
+                }),
+                click: () => openDocuware(),
+            },
         ],
     },
 ]);
@@ -206,6 +220,16 @@ function parseDms(data) {
     }
     return data;
 }
+
+async function openDocuware() {
+    const url = await getUrlFindOne('WebClient', 'docuware');
+    if (url) window.open(url).focus();
+}
+
+function shouldRenderButton(buttonName, isDocuware = false) {
+    // Renderizar el botón si no se llama 'openDocuware' o (se llama 'openDocuware' y props.row.isDocuware = true)
+    return buttonName !== 'openDocuware' || (buttonName === 'openDocuware' && isDocuware);
+}
 </script>
 <template>
     <FetchData
@@ -243,6 +267,7 @@ function parseDms(data) {
                 <div class="flex justify-center" v-if="props.col.name == 'options'">
                     <div v-for="button of props.col.components" :key="button.id">
                         <component
+                            v-if="shouldRenderButton(button.name, props.row.isDocuware)"
                             :is="button.component"
                             v-bind="button.props(props)"
                             @click="button.click(props)"
@@ -272,6 +297,12 @@ function parseDms(data) {
                                     class="row"
                                 >
                                     <component
+                                        v-if="
+                                            shouldRenderButton(
+                                                button.name,
+                                                props.row.isDocuware
+                                            )
+                                        "
                                         :is="button.component"
                                         v-bind="button.props(col)"
                                         @click="button.click(col)"

src/composables/downloadFile.js

@@ -1,11 +1,12 @@
 import { useSession } from 'src/composables/useSession';
 import { getUrl } from './getUrl';
 
-const {getTokenMultimedia} = useSession();
+const { getTokenMultimedia } = useSession();
-const token =  getTokenMultimedia();
+const token = getTokenMultimedia();
 
-export async function downloadFile(dmsId) {
+export async function downloadFile(dmsId, isDocuware = false) {
     let appUrl = await getUrl('', 'lilium');
     appUrl = appUrl.replace('/#/', '');
-    window.open(`${appUrl}/api/dms/${dmsId}/downloadFile?access_token=${token}`);
+    const urlPath = isDocuware ? '/docuwareDownload' : '/downloadFile';
+    window.open(`${appUrl}/api/dms/${dmsId}${urlPath}?access_token=${token}`);
 }

src/composables/getUrl.js

@@ -1,4 +1,7 @@
 import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+const { notify } = useNotify();
 
 export async function getUrl(route, app = 'salix') {
     let url;
@@ -8,3 +11,24 @@ export async function getUrl(route, app = 'salix') {
     });
     return url;
 }
+
+export async function getUrlFindOne(route, app = 'salix') {
+    try {
+        const env = process.env.NODE_ENV;
+
+        const filter = {
+            where: { and: [{ appName: app }, { environment: env }] },
+        };
+
+        const { data } = await axios.get('Urls/findOne', {
+            params: { filter: JSON.stringify(filter) },
+        });
+
+        if (!data) return null;
+
+        return data.url + route;
+    } catch (err) {
+        notify('Direction not found', 'negative');
+        console.error('Error finding url: ', err);
+    }
+}

src/pages/Worker/Card/WorkerDms.vue

@@ -1,184 +1,11 @@
 <script setup>
-import { computed, ref, watch } from 'vue';
+import VnDmsList from 'src/components/common/VnDmsList.vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-
-import { useQuasar } from 'quasar';
-
-import { downloadFile } from 'src/composables/downloadFile';
-import { toDateHour } from 'src/filters';
-
-import FetchData from 'components/FetchData.vue';
-import WorkerDmsCreate from '../components/WorkerDmsCreate.vue';
-import WorkerDmsActions from '../components/WorkerDmsActions.vue';
-
-const { t } = useI18n();
-const quasar = useQuasar();
-const route = useRoute();
-
-const findOne = ref([]);
-const rows = ref([]);
-const workerDmsRef = ref(null);
-
-const filter = { where: { worker: route.params.id }, order: ['dmsFk DESC'], limit: 20 };
-const filterFindOne = { where: { code: 'hhrrData' } };
-
-const columns = computed(() => [
-    {
-        align: 'left',
-        field: 'dmsFk',
-        label: t('Id'),
-        name: 'id',
-    },
-    {
-        align: 'left',
-        field: 'hardCopyNumber',
-        label: t('Order'),
-        name: 'order',
-    },
-    {
-        align: 'left',
-        field: 'reference',
-        label: t('Reference'),
-        name: 'reference',
-    },
-    {
-        align: 'left',
-        field: 'description',
-        label: t('Description'),
-        name: 'description',
-    },
-    {
-        align: 'left',
-        field: 'hasFile',
-        label: t('Original'),
-        name: 'original',
-    },
-    {
-        align: 'left',
-        field: 'file',
-        label: t('File'),
-        name: 'file',
-    },
-    {
-        align: 'left',
-        field: 'created',
-        label: t('Created'),
-        name: 'created',
-        format: (value) => toDateHour(value),
-    },
-    {
-        align: 'right',
-        field: 'actions',
-        label: '',
-        name: 'actions',
-    },
-]);
-
-watch(
-    () => route.params.id,
-    (newValue) => {
-        filter.where.worker = newValue;
-        setData();
-    }
-);
-
-const setData = () => {
-    workerDmsRef.value.fetch();
-};
-
-const showWorkerDmsCreate = () => {
-    quasar.dialog({
-        component: WorkerDmsCreate,
-        componentProps: {
-            id: Number(route.params.id),
-            defaultDmsCode: findOne.value.code,
-            promise: setData,
-        },
-    });
-};
 </script>
-
 <template>
-    <FetchData
+    <VnDmsList
-        ref="workerDmsRef"
+        model="WorkerDms"
-        :filter="filter"
+        update-model="Workers"
-        @on-fetch="(data) => (rows = data)"
+        default-dms-code="hhrrData"
-        auto-load
+        filter="workerFk"
-        :url="`WorkerDms/${route.params.id}/filter`"
     />
-    <fetch-data
-        :filter="filterFindOne"
-        @on-fetch="(data) => (findOne = data)"
-        auto-load
-        url="DmsTypes/findOne"
-    />
-
-    <QPage class="column items-center q-pa-md">
-        <QTable
-            :columns="columns"
-            :pagination="{ rowsPerPage: 12 }"
-            :rows="rows"
-            class="full-width q-mt-md"
-            row-key="id"
-            v-if="rows?.length"
-        >
-            <template #body-cell-order="{ row }">
-                <QTd>
-                    <QChip class="chip-color" square v-if="row.hardCopyNumber">{{
-                        row.hardCopyNumber
-                    }}</QChip>
-                </QTd>
-            </template>
-
-            <template #body-cell-original="{ row }">
-                <QTd>
-                    <QCheckbox :model-value="row.hasFile === 1" disable />
-                </QTd>
-            </template>
-
-            <template #body-cell-file="{ row }">
-                <QTd>
-                    <QBtn @click.stop="downloadFile(row.dmsFk)" color="blue" flat no-caps>
-                        {{ row.file }}
-                    </QBtn>
-                </QTd>
-            </template>
-
-            <template #body-cell-actions="{ row }">
-                <QTd>
-                    <WorkerDmsActions :id="row.dmsFk" :promise="setData" />
-                </QTd>
-            </template>
-        </QTable>
-
-        <h5 class="flex justify-center color-vn-label" v-else>
-            {{ t('globals.noResults') }}
-        </h5>
-    </QPage>
-
-    <QPageSticky :offset="[18, 18]">
-        <QBtn @click.stop="showWorkerDmsCreate" color="primary" fab icon="add" />
-        <QTooltip>
-            {{ t('Upload file') }}
-        </QTooltip>
-    </QPageSticky>
 </template>
-
-<style scoped>
-.chip-color {
-    background-color: var(--vn-label-color);
-}
-</style>
-
-<i18n>
-es:
-    Id: Id
-    Order: Orden
-    Reference: Referencia
-    Description: Descripción
-    File: Archivo
-    Original: Original
-    Created: Fecha creación
-    Upload file: Subir fichero
-</i18n>

src/pages/Worker/components/WorkerDmsActions.vue

@@ -1,94 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-
-import { useQuasar } from 'quasar';
-
-import { downloadFile } from 'src/composables/downloadFile';
-
-import WorkerDmsDelete from 'src/pages/Worker/components/WorkerDmsDelete.vue';
-import WorkerDmsEdit from './WorkerDmsEdit.vue';
-
-const { t } = useI18n();
-const quasar = useQuasar();
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-    promise: {
-        type: Function,
-        required: true,
-    },
-});
-
-const setDownloadFile = () => downloadFile($props.id);
-
-const showWorkerDmsEdit = () => {
-    quasar.dialog({
-        component: WorkerDmsEdit,
-        componentProps: {
-            dmsId: $props.id,
-            promise: setData,
-        },
-    });
-};
-
-const showWorkerDmsDeleteDialog = () => {
-    quasar.dialog({
-        component: WorkerDmsDelete,
-        componentProps: {
-            id: $props.id,
-            promise: setData,
-        },
-    });
-};
-
-const setData = () => {
-    $props.promise();
-};
-</script>
-
-<template>
-    <div>
-        <QIcon
-            @click.stop="setDownloadFile"
-            color="primary"
-            name="cloud_download"
-            size="sm"
-        >
-            <QTooltip>
-                {{ t('actionFile', { action: t('globals.download') }) }}
-            </QTooltip>
-        </QIcon>
-        <QIcon
-            @click.stop="showWorkerDmsEdit"
-            class="q-ml-md"
-            color="primary"
-            name="edit"
-            size="sm"
-        >
-            <QTooltip>
-                {{ t('actionFile', { action: t('globals.edit') }) }}
-            </QTooltip>
-        </QIcon>
-        <QIcon
-            @click.stop="showWorkerDmsDeleteDialog"
-            class="q-ml-md"
-            color="primary"
-            name="delete"
-            size="sm"
-        >
-            <QTooltip>
-                {{ t('actionFile', { action: t('globals.remove') }) }}
-            </QTooltip>
-        </QIcon>
-    </div>
-</template>
-
-<i18n>
-en:
-    actionFile: '{action} file'
-es:
-    actionFile: '{action} fichero'
-</i18n>

src/pages/Worker/components/WorkerDmsCreate.vue

@@ -1,37 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-
-import VnDms from 'src/components/common/VnDms.vue';
-
-const { dialogRef } = useDialogPluginComponent();
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-    defaultDmsCode: {
-        type: String,
-        required: true,
-    },
-    promise: {
-        type: Function,
-        required: true,
-    },
-});
-
-const onDataSaved = async () => {
-    if ($props.promise) await $props.promise();
-};
-</script>
-
-<template>
-    <QDialog ref="dialogRef">
-        <VnDms
-            :default-dms-code="$props.defaultDmsCode"
-            :url="`Workers/${$props.id}/uploadFile`"
-            @on-data-saved="onDataSaved"
-            model="WorkerDmsCreate"
-        />
-    </QDialog>
-</template>

src/pages/Worker/components/WorkerDmsDelete.vue

@@ -1,82 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import { useDialogPluginComponent } from 'quasar';
-import axios from 'axios';
-
-import useNotify from 'src/composables/useNotify';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-    promise: {
-        type: Function,
-        required: true,
-    },
-});
-
-const { dialogRef } = useDialogPluginComponent();
-const { notify } = useNotify();
-const { t } = useI18n();
-
-const closeButton = ref(null);
-
-const isLoading = ref(false);
-
-const deleteDms = async () => {
-    isLoading.value = true;
-    try {
-        await axios.post(`WorkerDms/${$props.id}/removeFile`);
-        if ($props.promise) await $props.promise();
-        notify('globals.dataDeleted', 'positive');
-    } catch (error) {
-        notify(error.message, 'negative');
-    } finally {
-        closeButton.value.click();
-        isLoading.value = false;
-    }
-};
-</script>
-
-<template>
-    <QDialog ref="dialogRef">
-        <QCard class="q-pa-md q-mb-md">
-            <span ref="closeButton" class="row justify-end close-icon" v-close-popup>
-                <QIcon name="close" size="sm" />
-            </span>
-
-            <QCardSection>
-                <div class="mt-1 text-h6">{{ t('This file will be deleted') }}</div>
-                <div>{{ t('Are you sure you want to continue?') }}</div>
-            </QCardSection>
-
-            <QCardActions class="flex justify-end">
-                <QBtn
-                    :disabled="isLoading"
-                    :label="t('globals.cancel')"
-                    :loading="isLoading"
-                    class="q-mr-xl"
-                    color="primary"
-                    flat
-                    v-close-popup
-                />
-                <QBtn
-                    :disabled="isLoading"
-                    :label="t('globals.save')"
-                    :loading="isLoading"
-                    @click.stop="deleteDms"
-                    color="primary"
-                />
-            </QCardActions>
-        </QCard>
-    </QDialog>
-</template>
-
-<i18n>
-es:
-    This file will be deleted: Este fichero va a ser borrado
-    Are you sure you want to continue?: ¿Seguro que quieres continuar?
-</i18n>

src/pages/Worker/components/WorkerDmsEdit.vue

@@ -1,56 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-
-import { useDialogPluginComponent } from 'quasar';
-
-import FetchData from 'components/FetchData.vue';
-import VnDms from 'src/components/common/VnDms.vue';
-
-const { dialogRef } = useDialogPluginComponent();
-
-const $props = defineProps({
-    dmsId: {
-        type: Number,
-        required: true,
-    },
-    defaultDmsCode: {
-        type: String,
-        required: false,
-    },
-    promise: {
-        type: Function,
-        required: true,
-    },
-});
-
-const initialData = ref({
-    hasFile: true,
-    id: $props.dmsId,
-});
-
-const setCurrentDms = (data) => {
-    initialData.value.reference = data.reference;
-    initialData.value.companyFk = data.companyFk;
-    initialData.value.warehouseFk = data.warehouseFk;
-    initialData.value.dmsTypeFk = data.dmsTypeFk;
-    initialData.value.description = data.description;
-    initialData.value.hasFile = data.hasFile;
-};
-
-const onDataSaved = async () => {
-    if ($props.promise) await $props.promise();
-};
-</script>
-
-<template>
-    <fetch-data :url="`Dms/${$props.dmsId}`" @on-fetch="setCurrentDms" auto-load />
-
-    <QDialog ref="dialogRef">
-        <VnDms
-            :default-initialData-code="$props.defaultDmsCode"
-            @on-data-saved="onDataSaved"
-            model="WorkerDmsEdit"
-            :form-initial-data="initialData"
-        />
-    </QDialog>
-</template>