From 4188569908e57aee9b938e976b670779dd7fd733 Mon Sep 17 00:00:00 2001 From: Jon Date: Thu, 25 Jul 2024 10:03:20 +0200 Subject: [PATCH 1/4] feat: refs #7500 added VnImg to show files --- src/components/common/VnDmsList.vue | 33 +++++++++++++++++++++-------- src/components/ui/VnImg.vue | 11 +++++++++- 2 files changed, 34 insertions(+), 10 deletions(-) diff --git a/src/components/common/VnDmsList.vue b/src/components/common/VnDmsList.vue index c42de6690c..08c4e4aa4f 100644 --- a/src/components/common/VnDmsList.vue +++ b/src/components/common/VnDmsList.vue @@ -5,12 +5,14 @@ import { useRoute } from 'vue-router'; import { useQuasar, QCheckbox, QBtn, QInput } from 'quasar'; import axios from 'axios'; +import VnUserLink from '../ui/VnUserLink.vue'; +import { downloadFile } from 'src/composables/downloadFile'; +import VnImg from 'components/ui/VnImg.vue'; import VnPaginate from 'components/ui/VnPaginate.vue'; import VnDms from 'src/components/common/VnDms.vue'; import VnConfirm from 'components/ui/VnConfirm.vue'; import VnInputDate from 'components/common/VnInputDate.vue'; -import VnUserLink from '../ui/VnUserLink.vue'; -import { downloadFile } from 'src/composables/downloadFile'; +import { useSession } from 'src/composables/useSession'; const route = useRoute(); const quasar = useQuasar(); @@ -18,6 +20,7 @@ const { t } = useI18n(); const rows = ref(); const dmsRef = ref(); const formDialog = ref({}); +const token = useSession().getTokenMultimedia(); const $props = defineProps({ model: { @@ -89,6 +92,25 @@ const dmsFilter = { }; const columns = computed(() => [ + { + align: 'left', + field: 'file', + label: t('globals.file'), + name: 'file', + component: VnImg, + props: (prop) => ({ + storage: 'dms', + collection: null, + size: null, + token: prop.token, + url: + 'api/dms/' + + prop.row.file.split('.')[0] + + '/downloadFile?access_token=' + + token, + class: 'rounded', + }), + }, { align: 'left', field: 'id', @@ -141,13 +163,6 @@ const columns = computed(() => [ 'model-value': Boolean(prop.value), }), }, - { - align: 'left', - field: 'file', - label: t('globals.file'), - name: 'file', - component: 'span', - }, { align: 'left', field: 'worker', diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue index 985c9cc53d..fc54bddf5d 100644 --- a/src/components/ui/VnImg.vue +++ b/src/components/ui/VnImg.vue @@ -24,6 +24,11 @@ const $props = defineProps({ type: Number, required: true, }, + url: { + type: String, + required: false, + default: null, + }, }); const show = ref(false); const token = useSession().getTokenMultimedia(); @@ -31,9 +36,13 @@ const timeStamp = ref(`timestamp=${Date.now()}`); import noImage from '/no-user.png'; import { useRole } from 'src/composables/useRole'; const url = computed(() => { + if ($props.url) return $props.url; const isEmployee = useRole().isEmployee(); + const _url = [$props.storage, $props.collection, $props.size, $props.id] + .filter((prop) => prop) + .join('/'); return isEmployee - ? `/api/${$props.storage}/${$props.collection}/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp.value}` + ? `/api/${_url}/download?access_token=${token}&${timeStamp.value}` : noImage; }); const reload = () => { From 76a7f8a1b3366d5f5c7f61e7283073c8c6069a65 Mon Sep 17 00:00:00 2001 From: Jon Date: Mon, 2 Sep 2024 12:09:48 +0200 Subject: [PATCH 2/4] refactor: refs #7500 refactor vnimg when storage is dms --- src/components/common/VnDmsList.vue | 8 ++------ src/components/ui/VnImg.vue | 15 +++++---------- 2 files changed, 7 insertions(+), 16 deletions(-) diff --git a/src/components/common/VnDmsList.vue b/src/components/common/VnDmsList.vue index 08c4e4aa4f..c0e8ac43b9 100644 --- a/src/components/common/VnDmsList.vue +++ b/src/components/common/VnDmsList.vue @@ -102,12 +102,8 @@ const columns = computed(() => [ storage: 'dms', collection: null, size: null, - token: prop.token, - url: - 'api/dms/' + - prop.row.file.split('.')[0] + - '/downloadFile?access_token=' + - token, + id: prop.row.file.split('.')[0], + token: token, class: 'rounded', }), }, diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue index 2e690ffe13..19ac8ce7fb 100644 --- a/src/components/ui/VnImg.vue +++ b/src/components/ui/VnImg.vue @@ -12,10 +12,12 @@ const $props = defineProps({ collection: { type: String, default: 'catalog', + required: false, }, resolution: { type: String, default: '200x200', + required: false, }, zoomResolution: { type: String, @@ -29,27 +31,20 @@ const $props = defineProps({ type: Number, required: true, }, - url: { - type: String, - required: false, - default: null, - }, }); const show = ref(false); const token = useSession().getTokenMultimedia(); const timeStamp = ref(`timestamp=${Date.now()}`); -if ($props.url) return $props.url; const isEmployee = useRole().isEmployee(); -const _url = [$props.storage, $props.collection, $props.size, $props.id] - .filter((prop) => prop) - .join('/'); const getUrl = (zoom = false) => { const curResolution = zoom ? $props.zoomResolution || $props.resolution : $props.resolution; + if ($props.storage === 'dms') + return `/api/${$props.storage}/${$props.id}/downloadFile?access_token=${token}`; return isEmployee - ? `/api/${_url}/download?access_token=${token}&${timeStamp.value}` + ? `/api/${$props.storage}/${$props.collection}/${curResolution}/${$props.id}/download?access_token=${token}&${timeStamp.value}` : noImage; }; const reload = () => { From e5056c45c0c15e056e89b773a85cfddd24bce221 Mon Sep 17 00:00:00 2001 From: Jon Date: Thu, 12 Sep 2024 12:31:00 +0200 Subject: [PATCH 3/4] fix: refs #7500 fixed showing images wrongly --- src/components/common/VnDmsList.vue | 28 +++++++++++++++------------- src/components/ui/VnImg.vue | 3 +-- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/src/components/common/VnDmsList.vue b/src/components/common/VnDmsList.vue index c0e8ac43b9..ea19bf25da 100644 --- a/src/components/common/VnDmsList.vue +++ b/src/components/common/VnDmsList.vue @@ -93,19 +93,21 @@ const dmsFilter = { const columns = computed(() => [ { - align: 'left', - field: 'file', - label: t('globals.file'), + label: '', name: 'file', + align: 'left', component: VnImg, - props: (prop) => ({ - storage: 'dms', - collection: null, - size: null, - id: prop.row.file.split('.')[0], - token: token, - class: 'rounded', - }), + props: (prop) => { + return { + storage: 'dms', + collection: null, + resolution: null, + id: prop.row.file.split('.')[0], + token: token, + class: 'rounded', + ratio: 1, + }; + }, }, { align: 'left', @@ -397,10 +399,10 @@ defineExpose({