feat: use search service to retrieve document from éain portal

EPFL-ENAC · Dec 18, 2024 · 1c7214d · 1c7214d
1 parent 5dbc7ad
commit 1c7214d
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 194 deletions.
diff --git a/backend/api/views/search.py b/backend/api/views/search.py
@@ -73,6 +73,14 @@ async def find(
     return indexService.search(query=queryDict, skip=skip, limit=limit)
 
 
+@router.get("/_doc", response_model=SearchResult, response_model_exclude_none=True)
+async def find(id: str = Query(None)) -> SearchResult:
+    """Search documents matching the Elasticsearch query"""
+    indexService = IndexService()
+    queryDict = {"query": {"term": {"_id": id}}}
+    return indexService.search(query=queryDict, skip=0, limit=1)
+
+
 @router.get("/", response_model=SearchResult, response_model_exclude_none=True)
 async def find(
     text: str = Query(None),

diff --git a/frontend/.eslintrc-auto-import.json b/frontend/.eslintrc-auto-import.json
@@ -106,7 +106,6 @@
     "useHome": true,
     "useSearch": true,
     "useSearchService": true,
-    "Service": true,
-    "useServices": true
+    "Service": true
   }
 }
diff --git a/frontend/src/auto-imports.d.ts b/frontend/src/auto-imports.d.ts
@@ -13,19 +13,19 @@ declare global {
   const $shallowRef: typeof import('vue/macros')['$shallowRef']
   const $toRef: typeof import('vue/macros')['$toRef']
   const EffectScope: typeof import('vue')['EffectScope']
-  const Service: typeof import('./stores/services')['Service']
+  const Service: (typeof import('./stores/services'))['Service']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const createPinia: typeof import('pinia')['createPinia']
-  const createPiniaClient: typeof import('feathers-pinia')['createPiniaClient']
+  const createPiniaClient: (typeof import('feathers-pinia'))['createPiniaClient']
   const customRef: typeof import('vue')['customRef']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
-  const defineGetters: typeof import('feathers-pinia')['defineGetters']
-  const defineSetters: typeof import('feathers-pinia')['defineSetters']
+  const defineGetters: (typeof import('feathers-pinia'))['defineGetters']
+  const defineSetters: (typeof import('feathers-pinia'))['defineSetters']
   const defineStore: typeof import('pinia')['defineStore']
-  const defineValues: typeof import('feathers-pinia')['defineValues']
+  const defineValues: (typeof import('feathers-pinia'))['defineValues']
   const effectScope: typeof import('vue')['effectScope']
   const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
@@ -77,24 +77,23 @@ declare global {
   const triggerRef: typeof import('vue')['triggerRef']
   const unref: typeof import('vue')['unref']
   const useAttrs: typeof import('vue')['useAttrs']
-  const useAuth: typeof import('feathers-pinia')['useAuth']
-  const useAuthStore: typeof import('./stores/auth')['useAuthStore']
-  const useCounterStore: typeof import('./stores/example-store')['useCounterStore']
+  const useAuth: (typeof import('feathers-pinia'))['useAuth']
+  const useAuthStore: (typeof import('./stores/auth'))['useAuthStore']
+  const useCounterStore: (typeof import('./stores/example-store'))['useCounterStore']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
-  const useDataStore: typeof import('feathers-pinia')['useDataStore']
-  const useFeathers: typeof import('./composables/feathers')['useFeathers']
-  const useFeathersService: typeof import('./composables/feathers')['useFeathersService']
+  const useDataStore: (typeof import('feathers-pinia'))['useDataStore']
+  const useFeathers: (typeof import('./composables/feathers'))['useFeathers']
+  const useFeathersService: (typeof import('./composables/feathers'))['useFeathersService']
   const useHome: typeof import('./stores/home')['useHome']
   const useI18n: typeof import('vue-i18n')['useI18n']
-  const useInstanceDefaults: typeof import('feathers-pinia')['useInstanceDefaults']
+  const useInstanceDefaults: (typeof import('feathers-pinia'))['useInstanceDefaults']
   const useLink: typeof import('vue-router')['useLink']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
-  const useSearch: typeof import('./stores/search')['useSearch']
+  const useSearch: (typeof import('./stores/search'))['useSearch']
   const useSearchService: typeof import('./stores/search')['useSearchService']
-  const useServiceInstance: typeof import('feathers-pinia')['useServiceInstance']
-  const useServices: typeof import('./stores/services')['useServices']
+  const useServiceInstance: (typeof import('feathers-pinia'))['useServiceInstance']
   const useSlots: typeof import('vue')['useSlots']
   const useTaxonomyStore: typeof import('./stores/taxonomies')['useTaxonomyStore']
   const watch: typeof import('vue')['watch']
@@ -121,7 +120,6 @@ declare module 'vue' {
     readonly $shallowRef: UnwrapRef<typeof import('vue/macros')['$shallowRef']>
     readonly $toRef: UnwrapRef<typeof import('vue/macros')['$toRef']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
-    readonly Service: UnwrapRef<typeof import('./stores/services')['Service']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
@@ -189,7 +187,6 @@ declare module 'vue' {
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
     readonly useSearchService: UnwrapRef<typeof import('./stores/search')['useSearchService']>
-    readonly useServices: UnwrapRef<typeof import('./stores/services')['useServices']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
     readonly useTaxonomyStore: UnwrapRef<typeof import('./stores/taxonomies')['useTaxonomyStore']>
     readonly watch: UnwrapRef<typeof import('vue')['watch']>
@@ -209,7 +206,6 @@ declare module '@vue/runtime-core' {
     readonly $shallowRef: UnwrapRef<typeof import('vue/macros')['$shallowRef']>
     readonly $toRef: UnwrapRef<typeof import('vue/macros')['$toRef']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
-    readonly Service: UnwrapRef<typeof import('./stores/services')['Service']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
@@ -277,7 +273,6 @@ declare module '@vue/runtime-core' {
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
     readonly useSearchService: UnwrapRef<typeof import('./stores/search')['useSearchService']>
-    readonly useServices: UnwrapRef<typeof import('./stores/services')['useServices']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
     readonly useTaxonomyStore: UnwrapRef<typeof import('./stores/taxonomies')['useTaxonomyStore']>
     readonly watch: UnwrapRef<typeof import('vue')['watch']>

diff --git a/frontend/src/components/MapResults.vue b/frontend/src/components/MapResults.vue
@@ -6,7 +6,7 @@
     <div class="col">
       <q-list separator>
         <template v-for="row in rows" :key="`${row.entity_type}:${row.id}`">
-          <q-item clickable v-ripple @click="onEntity(row)">
+          <q-item clickable v-ripple @click="onDocument(row)">
             <q-item-section>
               <q-item-label class="text-primary">{{
                 $t(row.entity_type)
@@ -15,7 +15,9 @@
               <div>
                 <tags-badges :document="row" />
               </div>
-              <q-item-label caption>{{ row.description }}</q-item-label>
+              <q-item-label caption>
+                <q-markdown :src="row.description" />
+              </q-item-label>
               <!-- <div v-if="getImageUrls(row).length">
                 <q-carousel animated v-model="slide" arrows navigation infinite>
                   <template
@@ -47,6 +49,7 @@ import MapView from 'src/components/MapView.vue';
 import TagsBadges from 'src/components/TagsBadges.vue';
 import { Document } from 'src/models';
 
+const router = useRouter();
 const searchService = useSearchService();
 
 const rows = computed(() => searchService.geoResults?.data || []);
@@ -60,7 +63,7 @@ const rows = computed(() => searchService.geoResults?.data || []);
 //   return images;
 // }
 
-function onEntity(row: Document) {
-  console.log('onEntity', row);
+function onDocument(row: Document) {
+  router.push({ name: 'doc', params: { id: `${row.entity_type}:${row.id}` } });
 }
 </script>
diff --git a/frontend/src/components/ResultsGrid.vue b/frontend/src/components/ResultsGrid.vue
@@ -3,18 +3,20 @@
     <div v-if="!loading" class="row q-col-gutter-lg">
       <template v-for="row in rows" :key="`${row.entity_type}:${row.id}`">
         <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
-          <q-card flat bordered class="q-ma-none" style="min-height: 300px">
+          <q-card flat bordered class="q-ma-none">
             <q-card-section
               class="q-pa-md"
               style="cursor: pointer"
-              @click="onEntity(row)"
+              @click="onDocument(row)"
             >
               <div class="text-primary">{{ $t(row.entity_type) }}</div>
               <div class="text-h5">{{ row.name }}</div>
               <div>
                 <tags-badges :document="row" />
               </div>
-              <div class="text-body2">{{ row.description }}</div>
+              <div class="text-body2">
+                <q-markdown :src="row.description" />
+              </div>
               <div v-if="getImageUrls(row).length">
                 <q-img
                   :src="getImageUrls(row)[0]"
@@ -58,8 +60,7 @@ function getImageUrls(row: Document) {
   return images;
 }
 
-function onEntity(row: Document) {
-  console.log('onEntity', row);
-  router.push({ name: row.entity_type, params: { id: row.id } });
+function onDocument(row: Document) {
+  router.push({ name: 'doc', params: { id: `${row.entity_type}:${row.id}` } });
 }
 </script>
diff --git a/frontend/src/pages/DocumentPage.vue b/frontend/src/pages/DocumentPage.vue
@@ -0,0 +1,71 @@
+<template>
+  <q-page class="q-pa-md bg-grey-2">
+    <div class="row">
+      <div class="col-12 col-md-3">
+        <q-markdown v-if="document" :src="document.external_links" />
+      </div>
+      <div class="col-12 col-md-6">
+        <div v-if="document">
+          <div class="text-primary text-uppercase">
+            {{ $t(document.entity_type) }}
+          </div>
+          <div class="text-h3">{{ document.name }}</div>
+          <div>
+            <tags-badges :document="document" />
+          </div>
+          <div class="text-body1">
+            <q-markdown :src="document.description" />
+          </div>
+          <div class="text-body1">
+            <q-markdown :src="document.article_top" />
+          </div>
+          <div v-if="document && getImageUrls().length">
+            <template v-for="url in getImageUrls()" :key="url">
+              <q-img :src="url" style="max-height: 100px; max-width: 100px" />
+            </template>
+          </div>
+          <div class="text-body1">
+            <q-markdown :src="document.article_bottom" />
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-3">
+        <q-markdown v-if="document" :src="document.side_note" />
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import { cdnUrl } from 'src/boot/api';
+import { Document } from 'src/models';
+import TagsBadges from 'src/components/TagsBadges.vue';
+
+const route = useRoute();
+const searchService = useSearchService();
+
+const document = ref<Document>();
+
+const document_id = computed(() => route.params.id as string);
+
+onMounted(updateDocument);
+
+watch(() => route.params.id, updateDocument);
+
+async function updateDocument() {
+  if (route.params.id) {
+    document.value = await searchService.getDocument(document_id.value);
+  }
+}
+
+function getImageUrls() {
+  if (!document.value) return [];
+  const images = document.value.files
+    ? document.value.files
+        .filter((fileRef) => fileRef.ref.mime_type?.startsWith('image'))
+        .map((fileRef) => `${cdnUrl}/${fileRef.ref.path}`)
+    : [];
+  console.log('getImageUrls', images);
+  return images;
+}
+</script>
diff --git a/frontend/src/pages/EntityPage.vue b/frontend/src/pages/EntityPage.vue
diff --git a/frontend/src/router/routes.ts b/frontend/src/router/routes.ts
@@ -13,7 +13,11 @@ const routes: RouteRecordRaw[] = [
       { path: 'about', component: () => import('pages/AboutPage.vue') },
       { path: 'search', component: () => import('pages/SearchPage.vue') },
       {
-        name: 'natural-resource',
+        name: 'doc',
+        path: 'doc/:id',
+        component: () => import('pages/DocumentPage.vue'),
+      },
+      {
         path: 'natural-resource/:id',
         component: () => import('pages/EntityPage.vue'),
       },

diff --git a/frontend/src/stores/search.ts b/frontend/src/stores/search.ts
@@ -49,6 +49,13 @@ export const useSearchService = defineStore('search', () => {
     selectedTerms.value = [];
   }
 
+  function getDocument(id: string) {
+    return api.get('/search/_doc', { params: { id } }).then((response) => {
+      const result = response.data;
+      return result.data?.length ? result.data[0] : undefined;
+    });
+  }
+
   function search(withLimit: number = limit.value) {
     searching.value = true;
     results.value = undefined;
@@ -103,5 +110,6 @@ export const useSearchService = defineStore('search', () => {
     limit,
     reset,
     search,
+    getDocument,
   };
 });