From 0126ae9f8562819b54c73ff9bf2d626c011ada75 Mon Sep 17 00:00:00 2001
From: frankporras <francisco.porras-bernardez@geosphere.at>
Date: Mon, 26 Aug 2024 16:36:09 +0200
Subject: [PATCH] Datatype facet improved with user-friendly terms for the
 different types.

---
 .../ActiveFacetCategory.ts                    | 40 ++++++++++++++++++-
 .../active-facet-category.vue                 | 10 +++--
 src/components/face-category/FacetCategory.ts | 32 +++++++++++++--
 .../face-category/facet-category.vue          |  5 ++-
 src/services/dataset.service.ts               |  2 +-
 .../search-view/search-view-component.ts      |  6 +--
 .../search-view/search-view-component.vue     |  1 +
 7 files changed, 81 insertions(+), 15 deletions(-)

diff --git a/src/components/active-facet-category/ActiveFacetCategory.ts b/src/components/active-facet-category/ActiveFacetCategory.ts
index e349444..a1eed88 100644
--- a/src/components/active-facet-category/ActiveFacetCategory.ts
+++ b/src/components/active-facet-category/ActiveFacetCategory.ts
@@ -26,7 +26,7 @@ export default class ActiveFacetCategory extends Vue {
      * This will allow to display the customised terms "creator" and "keyword" instead of the values currently used in the OpenSearch index: "author" and "subjects"
      * TODO: This should be corrected directly in the index
      */
-    get alias(): string {
+    get categoryAlias(): string {
         // return this.categoryName == "doctype" ? "datatype" : this.categoryName;
         // console.log("getAlias!");
         switch (this.categoryName) {
@@ -35,12 +35,48 @@ export default class ActiveFacetCategory extends Vue {
             case "subjects":
                 return "keyword";
             case "doctype":
-                    return "datatype";
+                return "Data Type";
             default:
                 return this.categoryName;
         }
     }
 
+    /**
+     * The alias for the items inside the "doctype / Datatype" category will be set manually in order to show user-friendly terms instead of the predefined doctypes in the DB
+     * If the category alias is Data Type, the name of the items is set
+     * NOTE: This could be corrected directly in the index
+     */
+    filterItemsAlias(categoryAlias: string): string {
+        if (categoryAlias === "Data Type") {
+            // console.log("DataType");
+
+            const replacements = new Map<string, string>([
+                ["gis", "GIS"],
+                ["analysisdata", "Analysis Data"],
+                ["models", "Models"],
+                ["monitoring", "Monitoring"],
+                ["measurementdata", "Measurement Data"],
+                ["mixedtype", "Mixed Type"]
+            ]);
+
+            /**
+             * Iterate over the filterItems array using the map method to create a new array (updatedItems).
+             * For each item in the array, check if the item exists as a key in the replacements map.
+             * - If the item exists in the replacements map, replace it with the corresponding value from the map.
+             * - If the item does not exist in the replacements map, keep the original item unchanged.
+             * The map method returns a new array where each element is either the original item or its replacement.
+             *  */ 
+            const updatedItems = this.filterItems.map((item) =>
+                replacements.get(item) || item
+            );
+
+            return updatedItems.join(" | ");
+        }
+
+        // console.log("other categories");
+        return this.filterItems.join(" | ");
+    }
+
     // get filterItems(): Array<string> {
     //     return this.data;
     // }
diff --git a/src/components/active-facet-category/active-facet-category.vue b/src/components/active-facet-category/active-facet-category.vue
index 94df81f..ffd6734 100644
--- a/src/components/active-facet-category/active-facet-category.vue
+++ b/src/components/active-facet-category/active-facet-category.vue
@@ -1,9 +1,11 @@
 <template>
     <div>
-        <input v-bind:id="alias" v-bind:name="alias" type="checkbox" checked="checked" class="css-checkbox" @click.prevent="deactivateFacetCategory()" />
-        <label v-bind:for="alias" class="css-label">
-            <span>{{ alias + ": " }}</span>
-            <a v-if="filterItems && filterItems.length > 0" class="gsaterm">{{ filterItems.join(" | ") }}</a>
+        <input v-bind:id="categoryAlias" v-bind:name="categoryAlias" type="checkbox" checked="checked" class="css-checkbox" @click.prevent="deactivateFacetCategory()" />
+        <label v-bind:for="categoryAlias" class="css-label">
+            <span>{{ categoryAlias + ": " }}</span>
+            <!-- <a v-if="filterItems && filterItems.length > 0" class="gsaterm">{{ filterItems.join(" | ") }}</a> -->
+            <a v-if="filterItems && filterItems.length > 0" class="gsaterm">{{ filterItemsAlias(categoryAlias) }}</a>
+
         </label>
     </div>
 </template>
diff --git a/src/components/face-category/FacetCategory.ts b/src/components/face-category/FacetCategory.ts
index 4729410..af24c91 100644
--- a/src/components/face-category/FacetCategory.ts
+++ b/src/components/face-category/FacetCategory.ts
@@ -22,9 +22,9 @@ export default class FacetCategory extends Vue {
     /**
      * The alias for the Active facet box will be set depending on the name of the category. 
      * This will allow to display the customised terms "creator" and "keyword" instead of the values currently used in the OpenSearch index: "author" and "subjects"
-     * TODO: This should be corrected directly in the index
+     * NOTE: This should be corrected directly in the index
      */
-    get alias(): string {
+    get categoryAlias(): string {
         // console.log("filterName:", this.filterName);
         // return this.filterName == "datatype" ? "doctype" : this.filterName;
 
@@ -34,12 +34,38 @@ export default class FacetCategory extends Vue {
             case "subjects":
                 return "keyword";
             case "doctype":
-                    return "datatype";
+                    return "Data Type";
             default:
                 return this.filterName;
         }
     }
 
+    /**
+     * The alias for the items inside the "doctype / Datatype" category will be set manually in order to show user-friendly terms instead of the predefined doctypes in the DB
+     * NOTE: This could be corrected directly in the index
+     */
+    itemAlias(val: string): string {
+        // console.log("filterName:", this.filterName);
+        // return this.filterName == "datatype" ? "doctype" : this.filterName;
+
+        switch (val) {
+            case "gis":
+                return "GIS";
+            case "analysisdata":
+                return "Analysis Data";
+            case "models":
+                return "Models";
+            case "monitoring":
+                return "Monitoring";
+            case "measurementdata":
+                return "Measurement Data";
+            case "mixedtype":
+                return "Mixed Type";
+            default:
+                return val;
+        }
+    }
+
     // get filterItems(): Array<FilterItem> {
     //     return this.data;
     // }
diff --git a/src/components/face-category/facet-category.vue b/src/components/face-category/facet-category.vue
index a4c71dc..b7c5c1d 100644
--- a/src/components/face-category/facet-category.vue
+++ b/src/components/face-category/facet-category.vue
@@ -2,7 +2,7 @@
     <div class="card panel-default">
         <!-- <h3 class="panel-title filterViewModelName">{{ filterName }}</h3> -->
         <div class="panel-heading">
-            <h3 class="panel-title titlecase filterViewModelName">{{ alias }}</h3>
+            <h3 class="panel-title titlecase filterViewModelName">{{ categoryAlias }}</h3>
             <!-- <h3 class="panel-title titlecase filterViewModelName">{{ filterName }}</h3> -->
         </div>
         <div class="panel-body">
@@ -10,7 +10,8 @@
             <ul class="filter-items list-unstyled" v-bind:class="{ limited: facetItems.length > 1 && collapsed }">
                 <li v-for="(item, index) in facetItems" v-bind:key="index" class="list-group-item titlecase">
                     <!-- <span :class="item.Active ? 'disabled' : ''" @click.prevent="activateItem(item)">{{ item.val }} ({{ item.count }}) </span> -->
-                    <span v-bind:class="item.active ? 'disabled' : ''" @click.prevent="activateItem(item)">{{ item.val }} ({{ item.count }}) </span>
+                    <!-- <span v-bind:class="item.active ? 'disabled' : ''" @click.prevent="activateItem(item)">{{ item.val }} ({{ item.count }}) </span> -->
+                    <span v-bind:class="item.active ? 'disabled' : ''" @click.prevent="activateItem(item)">{{ itemAlias(item.val) }} ({{ item.count }}) </span>
                 </li>
             </ul>
             <!-- <ul class="overflowing" v-if="overflowing == true">
diff --git a/src/services/dataset.service.ts b/src/services/dataset.service.ts
index 7e4d688..f94071d 100644
--- a/src/services/dataset.service.ts
+++ b/src/services/dataset.service.ts
@@ -462,7 +462,7 @@ class DatasetService {
             }
         };
     
-        console.log("body:", body);
+        // console.log("body:", body);
 
         const stations = api.post<OpenSearchResponse>(base, body);
 
diff --git a/src/views/search-view/search-view-component.ts b/src/views/search-view/search-view-component.ts
index 1bd8c32..96e3fe4 100644
--- a/src/views/search-view/search-view-component.ts
+++ b/src/views/search-view/search-view-component.ts
@@ -159,7 +159,7 @@ export default class SearchViewComponent extends Vue {
         // console.log(res.hits.hits);
         // console.log(res.hits.total.value); console.log(res);
         // console.log("results:");
-        console.log(res);
+        // console.log(res);
         
         // for (const key in this.results) {
         //     if (Object.prototype.hasOwnProperty.call(this.results, key)) {
@@ -398,7 +398,7 @@ export default class SearchViewComponent extends Vue {
 
     // Method to clear facet category filter
     onClearFacetCategoryOPEN(categoryName: string): void {
-        // console.log("onClearFacetCategory");
+        console.log("onClearFacetCategory");
         delete this.activeFilterCategories[categoryName];
 
         // Trigger new search with updated filter
@@ -448,7 +448,7 @@ export default class SearchViewComponent extends Vue {
                 }
             },
             error: (error: string) => this.errorHandler(error),
-            complete: () => console.log("clear facet category completed"),
+            complete: () => console.log("Clear facet category completed"),
         });
     }
 
diff --git a/src/views/search-view/search-view-component.vue b/src/views/search-view/search-view-component.vue
index 1e24d44..5c89d87 100644
--- a/src/views/search-view/search-view-component.vue
+++ b/src/views/search-view/search-view-component.vue
@@ -31,6 +31,7 @@
             <div class="col col-8 column is-8 results_column" style="padding-top: 1.2rem; padding-right: 1rem; padding-left: 1rem">
                 <div v-if="activeFilterCategories && Object.keys(activeFilterCategories).length > 0" class="column">
                     <span v-for="(values, key, index) in activeFilterCategories" v-bind:key="index" class="active-filter-items">
+                        <!-- {{ values }} {{key}} {{index }} -->
                         <active-facet-category
                             v-bind:filterItems="values"
                             v-bind:categoryName="key"