Merge pull request #431 from EOEPCA/dev

Main update
EOEPCA · Aug 6, 2024 · 25df826 · 25df826
2 parents 70d0899 + 43db339
commit 25df826
Show file tree

Hide file tree

Showing 11 changed files with 8,178 additions and 3,115 deletions.
diff --git a/assets/variables.scss b/assets/variables.scss
@@ -1,10 +1,5 @@
 // Ref: https://github.com/nuxt-community/vuetify-module#customvariables
 
-@font-face {
-  font-family: "NotesESABold";
-  src: url("@/assets/notesesabol-webfont.ttf") format("truetype");
-}
-
 $body-font-family: "Arial", sans-serif;
 $heading-font-family: "NotesESABold";
 

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -95,7 +95,11 @@ export default {
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
-  css: ["@/assets/global.scss", "./static/css/materialdesignicons.min.css"],
+  css: [
+    "@/assets/global.scss",
+    "./static/css/materialdesignicons.min.css",
+    "./static/css/notesesabold.css",
+  ],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "open-science-catalog-frontend",
   "author": "EOX-A",
-  "version": "2.2.3",
+  "version": "2.2.9",
   "private": true,
   "scripts": {
     "dev": "nuxt",
@@ -16,8 +16,8 @@
     "test": "jest"
   },
   "dependencies": {
-    "@eox/itemfilter": "^0.11.2",
-    "@eox/map": "^0.11.0",
+    "@eox/itemfilter": "^1.0.1",
+    "@eox/map": "^1.11.1",
     "@nuxt/content": "^1.15.1",
     "@nuxtjs/auth-next": "5.0.0-1667386184.dfbbb54",
     "@nuxtjs/axios": "^5.13.6",

diff --git a/pages/metrics.vue b/pages/metrics.vue
@@ -31,6 +31,11 @@
     <v-row class="white flex-grow-0">
       <v-col cols="12">
         <eox-itemfilter
+          v-show="metrics"
+          inline-mode
+          :showResults.prop="false"
+          :filterProperties.prop="filterProperties"
+          :items.prop="items"
           class="row"
           style="position: relative; z-index: 5"
         ></eox-itemfilter>
@@ -164,6 +169,20 @@ export default {
     tableZoom: 1,
     showEmptyItems: false,
     filteredMetrics: {},
+    filterProperties: [
+      { id: "theme", key: "theme", title: "Theme" },
+      { id: "variable", key: "variable", title: "Variable" },
+      { id: "project", key: "project", title: "Project" },
+      { id: "mission", key: "eo-mission", title: "EO Mission" },
+      { id: "geometry", key: "geometry", type: "spatial", title: "Geometry" },
+      {
+        id: "search",
+        keys: ["title", "themes", "variable"],
+        title: "Freetext search",
+        placeholder: "Type something...",
+        type: "text",
+      },
+    ],
   }),
   watch: {
     aggregationProperty() {
@@ -185,71 +204,21 @@ export default {
   },
   async mounted() {
     const items = await this.retreiveProducts();
-    const itemFilter = document.querySelector("eox-itemfilter");
-    itemFilter.config = {
-      inlineMode: true,
-      titleProperty: "title",
-      filterProperties: [
-        { id: "theme", key: "theme", title: "Theme" },
-        { id: "variable", key: "variable", title: "Variable" },
-        { id: "project", key: "project", title: "Project" },
-        { id: "mission", key: "eo-mission", title: "EO Mission" },
-        // { key: "region" },
-        { id: "geometry", key: "geometry", type: "spatial", title: "Geometry" },
-        {
-          id: "search",
-          keys: ["title", "themes", "variable"],
-          title: "Freetext search",
-          type: "text",
-        },
-      ],
-      // enableSearch: true,
-      // enableHighlighting: true,
-      // aggregateResults: "osc:variables",
-      showResults: false,
-      // inlineMode: true,
-      // fuseConfig: {
-      //   keys: [
-      //     "title",
-      //     "theme",
-      //     "variable",
-      //     "project",
-      //     "description",
-      //     "eo-mission",
-      //     "region",
-      //   ],
-      //   // threshold: 0.4,
-      //   // distance: 100,
-      // },
-      onFilter: (items) => {
-        const metrics = this.createMetrics(items);
+    this.metrics = this.createMetrics(items);
+    this.items = items;
+    this.$nextTick(() => {
+      const itemFilter = document.querySelector("eox-itemfilter");
+      itemFilter.addEventListener("filter", (event) => {
+        const metrics = this.createMetrics(event.detail.results);
         if (this.showEmptyItems) {
           metrics[this.aggregationProperty] = {
             ...this.allAggregationItems,
             ...metrics[this.aggregationProperty],
           };
         }
         this.metrics = metrics;
-      },
-      // externalSearch: (input, filters) => {
-      //     const base = 'https://resource-catalogue.testing.opensciencedata.esa.int/collections/metadata:main/items?type=collection&f=json'
-      //     if (filters) {
-      //       let filterString = ''
-      //       Object.keys(filters).forEach((filter) => Object.entries(filters[filter]).forEach(([key, value]) => {
-      //         if (value) {
-      //           filterString += `${filter.replace('s', '')}:${key}`
-      //         }
-      //       }))
-      //       console.log(filterString)
-      //       return `${base}&q=${input}&filter=keywords%20ILIKE%20%27%${filterString}%%27`
-      //     } else {
-      //       return `${base}&q=${input}`
-      //     }
-      //   }
-    };
-    itemFilter.apply(items);
-    this.metrics = this.createMetrics(items);
-    this.items = items;
+      });
+    });
   },
   methods: {
     ...mapActions(["retreiveProducts"]),

diff --git a/pages/search.vue b/pages/search.vue
@@ -52,6 +52,10 @@
         <v-row style="overflow-y: auto; max-height: 100%">
           <v-col cols="12">
             <eox-itemfilter
+              v-show="results"
+              :filterProperties.prop="filterProperties"
+              :showResults.prop="false"
+              :items.prop="items"
               class="row mb-4 fill-height"
               style="position: relative; z-index: 1"
             >
@@ -122,82 +126,35 @@ export default {
     // years: [],
     items: null,
     results: null,
+    filterProperties: [
+      {
+        key: "geometry",
+        type: "spatial",
+        title: "Region",
+        expanded: true,
+      },
+      {
+        keys: ["title", "themes", "variable"],
+        title: "Freetext search",
+        placeholder: "Type something...",
+        type: "text",
+      },
+      { key: "theme" },
+      { key: "variable" },
+      { key: "project" },
+      { key: "eo-mission" },
+    ],
   }),
   async mounted() {
     const items = await this.retreiveProducts();
-    const itemFilter = document.querySelector("eox-itemfilter");
-    itemFilter.config = {
-      titleProperty: "title",
-      filterProperties: [
-        { key: "geometry", type: "spatial", title: "Region", expanded: true },
-        {
-          keys: ["title", "themes", "variable"],
-          title: "Search",
-          type: "text",
-        },
-        { key: "theme" },
-        { key: "variable" },
-        { key: "project" },
-        { key: "eo-mission" },
-        // { key: "region" },
-      ],
-      // enableSearch: true,
-      // enableHighlighting: true,
-      showResults: false,
-      // aggregateResults: "osc:variables",
-      // inlineMode: true,
-      // fuseConfig: {
-      //   includeScore: true,
-      //   keys: [
-      //     "title",
-      //     "theme",
-      //     "variable",
-      //     "project",
-      //     "description",
-      //     "eo-mission",
-      //     "region",
-      //   ],
-      //   // threshold: 0.4,
-      //   // distance: 100,
-      // },
-      onFilter: (items) => {
-        this.results = items;
-        // this.aggregateItems(items);
-      },
-      // externalSearch: (input, filters) => {
-      //   const base =
-      //     "https://resource-catalogue.staging.opensciencedata.esa.int/collections/metadata:main/items?type=collection&f=json";
-      //   if (filters) {
-      //     let filterString = "";
-      //     Object.keys(filters).forEach((filter) => {
-      //       if (filter !== "bbox") {
-      //         Object.entries(filters[filter])
-      //           .filter((k) => k[0] === "keys")
-      //           .forEach((filterItem) => {
-      //             Object.entries(filterItem[1]).forEach(([filterKey, filterValue]) => {
-      //               if (filterValue) {
-      //                 console.log(filter);
-      //                 console.log(filterKey);
-      //                 filterString += `${filter}:${filterKey.toLowerCase()}`;
-      //               }
-      //             });
-      //           });
-      //       }
-      //     });
-      //     return `${base}&q=${input}${
-      //       filterString.length > 0
-      //         ? `&filter=keywords%20ILIKE%20%27%${filterString}%%27`
-      //         : ""
-      //     }${filters.bbox?.bbox ? `&bbox=${filters.bbox.bbox}` : ""}`;
-      //   } else {
-      //     return `${base}&q=${input}`;
-      //   }
-      // },
-    };
-    itemFilter.apply(items);
-    // this.aggregateItems(items);
     this.items = items;
     this.results = items;
+    this.$nextTick(() => {
+      const itemFilter = document.querySelector("eox-itemfilter");
+      itemFilter.addEventListener("filter", (event) => {
+        this.results = event.detail.results;
+      });
+    });
   },
   methods: {
     ...mapActions(["retreiveProducts"]),

diff --git a/static/css/fonts/notesesabold/NotesESAbold.eot b/static/css/fonts/notesesabold/NotesESAbold.eot