feat: display images

EPFL-ENAC · Dec 19, 2024 · 5b1c38d · 5b1c38d
1 parent ba4a987
commit 5b1c38d
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 44 deletions.
diff --git a/frontend/src/components/DocumentPanel.vue b/frontend/src/components/DocumentPanel.vue
@@ -39,6 +39,7 @@
             <div class="text-body1">
               <q-markdown :src="document.article_top" />
             </div>
+
             <div v-if="document.files?.length" class="q-mt-xl q-mb-xl">
               <q-carousel
                 v-model="slide"
@@ -47,8 +48,7 @@
                 swipeable
                 control-color="primary"
                 padding
-                arrows
-                autoplay
+                :arrows="document.files?.length > 1"
                 infinite
                 height="500px"
                 class="bg-grey-2 text-grey-6"
@@ -71,7 +71,13 @@
                     :name="index"
                     class="column no-wrap flex-center"
                   >
-                    <q-icon name="style" size="56px" />
+                    <div class="text-uppercase">{{ $t('download') }}</div>
+                    <q-btn flat color="secondary" @click="onDownload(file)">
+                      <q-icon
+                        :name="isPDF(file) ? 'picture_as_pdf' : 'file_download'"
+                        size="100px"
+                      />
+                    </q-btn>
                     <div
                       v-if="file.legend"
                       class="absolute-bottom text-center a-legend"
@@ -136,8 +142,8 @@ export default defineComponent({
 <script setup lang="ts">
 import TagsBadges from 'src/components/TagsBadges.vue';
 import PhysicalParametersPanel from 'src/components/PhysicalParametersPanel.vue';
-import { cdnUrl } from 'src/boot/api';
 import { Document, FileItem } from 'src/models';
+import { toFileUrl, isImage, isPDF } from 'src/utils/files';
 
 const searchService = useSearchService();
 const router = useRouter();
@@ -151,26 +157,9 @@ const props = defineProps<Props>();
 const slide = ref(0);
 const relationSummaries = ref<Document[]>([]);
 
-onMounted(async () => {
-  console.log('mounted');
-  updateRelationSummaries();
-});
-
-watch(
-  () => props.document,
-  () => {
-    console.log('watch');
-    updateRelationSummaries();
-  },
-);
-
-function isImage(file: FileItem) {
-  return file.ref.mime_type.startsWith('image');
-}
+onMounted(updateRelationSummaries);
 
-function toFileUrl(file: FileItem) {
-  return `${cdnUrl}/${file.ref.path}`;
-}
+watch(() => props.document, updateRelationSummaries);
 
 function updateRelationSummaries() {
   if (!props.document?.relates_to) return;
@@ -193,4 +182,8 @@ function updateRelationSummaries() {
 function onDocument(row: Document) {
   router.push({ name: 'doc', params: { id: `${row.entity_type}:${row.id}` } });
 }
+
+function onDownload(file: FileItem) {
+  window.open(toFileUrl(file), '_blank');
+}
 </script>
diff --git a/frontend/src/components/MapResults.vue b/frontend/src/components/MapResults.vue
@@ -29,6 +29,12 @@
                 </q-carousel>
               </div> -->
             </q-item-section>
+            <q-item-section v-if="getImageUrls(row).length" avatar>
+              <q-img
+                :src="getImageUrls(row)[0]"
+                style="max-height: 100px; width: 150px"
+              />
+            </q-item-section>
           </q-item>
         </template>
       </q-list>
@@ -48,21 +54,13 @@ export default defineComponent({
 import MapView from 'src/components/MapView.vue';
 import TagsBadges from 'src/components/TagsBadges.vue';
 import { Document } from 'src/models';
+import { getImageUrls } from 'src/utils/files';
 
 const router = useRouter();
 const searchService = useSearchService();
 
 const rows = computed(() => searchService.geoResults?.data || []);
 
-// function getImageUrls(row: Document) {
-//   const images = row.files
-//     ? row.files
-//         .filter((fileRef) => fileRef.ref.mime_type?.startsWith('image'))
-//         .map((fileRef) => `${cdnUrl}/${fileRef.ref.path}`)
-//     : [];
-//   return images;
-// }
-
 function onDocument(row: Document) {
   router.push({ name: 'doc', params: { id: `${row.entity_type}:${row.id}` } });
 }

diff --git a/frontend/src/components/ResultsGrid.vue b/frontend/src/components/ResultsGrid.vue
@@ -20,7 +20,7 @@
               <div v-if="getImageUrls(row).length">
                 <q-img
                   :src="getImageUrls(row)[0]"
-                  style="max-height: 100px; max-width: 100px"
+                  style="max-height: 150px; max-width: 100%"
                 />
               </div>
             </q-card-section>
@@ -40,26 +40,16 @@ export default defineComponent({
 });
 </script>
 <script setup lang="ts">
-import { cdnUrl } from 'src/boot/api';
 import { Document } from 'src/models';
 import TagsBadges from 'src/components/TagsBadges.vue';
+import { getImageUrls } from 'src/utils/files';
 
 const searchService = useSearchService();
 const router = useRouter();
 
 const loading = computed(() => searchService.searching);
 const rows = computed(() => searchService.results?.data || []);
 
-function getImageUrls(row: Document) {
-  const images = row.files
-    ? row.files
-        .filter((fileRef) => fileRef.ref.mime_type?.startsWith('image'))
-        .map((fileRef) => `${cdnUrl}/${fileRef.ref.path}`)
-    : [];
-  console.log('getImageUrls', images);
-  return images;
-}
-
 function onDocument(row: Document) {
   router.push({ name: 'doc', params: { id: `${row.entity_type}:${row.id}` } });
 }

diff --git a/frontend/src/i18n/en/index.ts b/frontend/src/i18n/en/index.ts
@@ -48,4 +48,5 @@ export default {
   fire: 'Fire',
   reaction_to_fire: 'Reaction to fire',
   fire_resistance_class: 'Fire resistance class',
+  download: 'Download',
 };
diff --git a/frontend/src/utils/files.ts b/frontend/src/utils/files.ts
@@ -0,0 +1,23 @@
+import { cdnUrl } from 'src/boot/api';
+import { Document, FileItem } from 'src/models';
+
+export function getImageUrls(row: Document) {
+  const images = row.files
+    ? row.files
+        .filter((fileRef) => fileRef.ref.mime_type?.startsWith('image'))
+        .map((fileRef) => `${cdnUrl}/${fileRef.ref.path}`)
+    : [];
+  return images;
+}
+
+export function isImage(file: FileItem) {
+  return file.ref.mime_type.startsWith('image');
+}
+
+export function isPDF(file: FileItem) {
+  return file.ref.mime_type === 'application/pdf';
+}
+
+export function toFileUrl(file: FileItem) {
+  return `${cdnUrl}/${file.ref.path}`;
+}