From 1c7214d75f2206e6c2eaabd1f01341cd10eaf755 Mon Sep 17 00:00:00 2001
From: ymarcon <yannick.marcon@epfl.ch>
Date: Wed, 18 Dec 2024 16:48:14 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20use=20search=20service=20to=20retrieve?=
 =?UTF-8?q?=20document=20from=20=C3=A9ain=20portal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/api/views/search.py             |  8 +++
 frontend/.eslintrc-auto-import.json     |  3 +-
 frontend/src/auto-imports.d.ts          | 33 ++++-----
 frontend/src/components/MapResults.vue  | 11 +--
 frontend/src/components/ResultsGrid.vue | 13 ++--
 frontend/src/pages/DocumentPage.vue     | 71 +++++++++++++++++++
 frontend/src/pages/EntityPage.vue       | 72 --------------------
 frontend/src/router/routes.ts           |  6 +-
 frontend/src/stores/search.ts           |  8 +++
 frontend/src/stores/services.ts         | 90 -------------------------
 10 files changed, 121 insertions(+), 194 deletions(-)
 create mode 100644 frontend/src/pages/DocumentPage.vue
 delete mode 100644 frontend/src/pages/EntityPage.vue
 delete mode 100644 frontend/src/stores/services.ts

diff --git a/backend/api/views/search.py b/backend/api/views/search.py
index 0615022..2b08f03 100644
--- 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
index f2d86f1..ad43420 100644
--- 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
index 1767aec..53eba6c 100644
--- 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
index 79d76e7..f96f7a1 100644
--- 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
index 1d7e441..0facbe6 100644
--- 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
new file mode 100644
index 0000000..e7db555
--- /dev/null
+++ 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
deleted file mode 100644
index 44572c3..0000000
--- a/frontend/src/pages/EntityPage.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <q-page class="q-pa-md bg-grey-2">
-    <div class="row">
-      <div class="col-12 col-md-3"></div>
-      <div class="col-12 col-md-6">
-        <div v-if="entity">
-          <div class="text-primary text-uppercase">{{ $t(entity_type) }}</div>
-          <div class="text-h3">{{ entity.name }}</div>
-
-          <div class="text-body1">{{ entity.description }}</div>
-          <div v-if="entity && getImageUrls(entity).length">
-            <template v-for="url in getImageUrls(entity)" :key="url">
-              <q-img :src="url" style="max-height: 100px; max-width: 100px" />
-            </template>
-          </div>
-          <pre>{{ entity }}</pre>
-        </div>
-      </div>
-      <div class="col-12 col-md-3"></div>
-    </div>
-  </q-page>
-</template>
-
-<script setup lang="ts">
-import { cdnUrl } from 'src/boot/api';
-import {
-  NaturalResource,
-  TechnicalConstruction,
-  BuildingMaterial,
-  Building,
-  Professional,
-  BuildingElement,
-} from 'src/models';
-
-const route = useRoute();
-const services = useServices();
-const entity = ref<
-  | NaturalResource
-  | TechnicalConstruction
-  | BuildingMaterial
-  | Building
-  | Professional
-  | BuildingElement
->();
-
-const entity_type = computed(() => route.name);
-
-let service = null;
-
-onMounted(updateEntity);
-
-watch(() => route.params.id, updateEntity);
-
-async function updateEntity() {
-  console.log('EntityPage: updateEntity');
-  if (route.name && route.params.id) {
-    service = services.make(route.name as string);
-    entity.value = await service.get(route.params.id as string);
-  }
-}
-
-function getImageUrls() {
-  if (!entity.value) return [];
-  const images = entity.value.files
-    ? entity.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/router/routes.ts b/frontend/src/router/routes.ts
index b2f4ed4..4854f86 100644
--- 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
index 7bb2852..d2ea4ae 100644
--- 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,
   };
 });
diff --git a/frontend/src/stores/services.ts b/frontend/src/stores/services.ts
deleted file mode 100644
index 89c2e85..0000000
--- a/frontend/src/stores/services.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { defineStore } from 'pinia';
-import { api } from 'src/boot/api';
-import {
-  NaturalResource,
-  TechnicalConstruction,
-  BuildingMaterial,
-  Building,
-  Professional,
-  BuildingElement,
-} from 'src/models';
-import { Query } from 'src/components/models';
-
-export class Service<
-  Type extends
-    | NaturalResource
-    | TechnicalConstruction
-    | BuildingMaterial
-    | Building
-    | Professional
-    | BuildingElement,
-> {
-  constructor(
-    public entityType: Type,
-    public entityName: string,
-  ) {}
-
-  async get(id: string): Promise<Type> {
-    return api.get(`/${this.entityName}/${id}`).then((res) => res.data);
-  }
-
-  async find(query: Query | undefined) {
-    const range = [query?.$skip || 0, query?.$limit || 10 - 1];
-    const sort = query?.$sort
-      ? [query?.$sort[0], query?.$sort[1] ? 'DESC' : 'ASC']
-      : ['id', 'ASC'];
-    return api
-      .get(`/${this.entityName}/`, {
-        params: {
-          select: query?.$select ? JSON.stringify(query?.$select) : undefined,
-          range: JSON.stringify(range),
-          sort: JSON.stringify(sort),
-          filter: JSON.stringify(query?.filter),
-        },
-      })
-      .then((res) => res.data);
-  }
-}
-
-export const useServices = defineStore('services', () => {
-  function make(
-    entityName: string,
-  ): Service<
-    | NaturalResource
-    | TechnicalConstruction
-    | BuildingMaterial
-    | Building
-    | Professional
-    | BuildingElement
-  > {
-    let entityType;
-    switch (entityName) {
-      case 'natural-resource':
-        entityType = {} as NaturalResource;
-        break;
-      case 'technical-construction':
-        entityType = {} as TechnicalConstruction;
-        break;
-      case 'building-material':
-        entityType = {} as BuildingMaterial;
-        break;
-      case 'building':
-        entityType = {} as Building;
-        break;
-      case 'professional':
-        entityType = {} as Professional;
-        break;
-      case 'building-element':
-        entityType = {} as BuildingElement;
-        break;
-    }
-    if (!entityType) {
-      throw new Error('Invalid entity name');
-    }
-    return new Service(entityType, entityName);
-  }
-
-  return {
-    make,
-  };
-});