From 826c5b8c4e5f0b38aa218eac134a2b0c62feb629 Mon Sep 17 00:00:00 2001
From: frankporras <francisco.porras-bernardez@geosphere.at>
Date: Tue, 3 Sep 2024 12:53:02 +0200
Subject: [PATCH] - Pagination arrow color fixed according to page - Data type
 showed in suggestions corrected according to user-friendly values

---
 src/components/PaginationComponent.vue        |  7 ++++---
 .../ActiveFacetCategory.ts                    |  2 +-
 .../active-facet-category.vue                 |  2 +-
 src/components/vs-input/vs-input.ts           | 21 ++++++++++++++++++-
 .../search-view/search-view-component.ts      | 21 ++++++++++++++++++-
 5 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/src/components/PaginationComponent.vue b/src/components/PaginationComponent.vue
index c236e70..244eac8 100644
--- a/src/components/PaginationComponent.vue
+++ b/src/components/PaginationComponent.vue
@@ -104,7 +104,7 @@ const prevClick = () => {
                     <span v-if="props.data.currentPage <= 1" aria-disabled="true" aria-label="Previous">
                         <span
                             aria-disabled="true"
-                            class="bg-gray-300 cursor-not-allowed opacity-50 relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5"
+                            class="bg-gray-300 cursor-not-allowed opacity-30 relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5"
                             aria-hidden="true"
                         >
                             <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
@@ -147,7 +147,8 @@ const prevClick = () => {
                         </template>
                     </template> -->
 
-                    <!-- next button -->
+
+                    <!-- next button -----------------------------------------------------------------------------        -->
                     <!-- v-bind:href="nextPageLink" -->
                     <a
                         v-if="props.data.currentPage < props.data.lastPage"
@@ -168,7 +169,7 @@ const prevClick = () => {
                     <span v-else aria-disabled="true" aria-label="Next">
                         <span
                             aria-disabled="true"
-                            class="bg-gray-300 cursor-not-allowed relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5"
+                            class="opacity-30 bg-gray-300 cursor-not-allowed relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5"
                             aria-hidden="true"
                         >
                             <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
diff --git a/src/components/active-facet-category/ActiveFacetCategory.ts b/src/components/active-facet-category/ActiveFacetCategory.ts
index 02b3581..f5fdc77 100644
--- a/src/components/active-facet-category/ActiveFacetCategory.ts
+++ b/src/components/active-facet-category/ActiveFacetCategory.ts
@@ -57,7 +57,7 @@ export default class ActiveFacetCategory extends Vue {
      * 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 {
+    getFilterItemsAlias(categoryAlias: string): string {
         console.log(categoryAlias);
         if (categoryAlias === ("data type") || categoryAlias === ("language")) {
             /**
diff --git a/src/components/active-facet-category/active-facet-category.vue b/src/components/active-facet-category/active-facet-category.vue
index 3f18541..130ff01 100644
--- a/src/components/active-facet-category/active-facet-category.vue
+++ b/src/components/active-facet-category/active-facet-category.vue
@@ -4,7 +4,7 @@
         <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>
+            <a v-if="filterItems && filterItems.length > 0" class="gsaterm">{{ getFilterItemsAlias(categoryAlias) }}</a>
         </label>
     </div>
 </template>
diff --git a/src/components/vs-input/vs-input.ts b/src/components/vs-input/vs-input.ts
index d815ee9..822343a 100644
--- a/src/components/vs-input/vs-input.ts
+++ b/src/components/vs-input/vs-input.ts
@@ -193,7 +193,26 @@ export default class VsInput extends Vue {
         const sanitizedValue = DOMPurify.sanitize(result.highlight);
         // Replacing the predefined format for highlights given by OpenSearch from <em> emphasys to <b> bold
         const replacedValue = sanitizedValue.replace(/<em>/g, '<b>').replace(/<\/em>/g, '</b>');
-        return `${replacedValue} <em>| ${result.type}</em>`;
+        // return `${replacedValue} <em>| ${result.type}</em>`;
+        return `${replacedValue} <em>| ${this.getTypeAlias(result.type)}</em>`;
+    }
+
+    /**
+     * The alias for the result type will be set depending on the name of the type. 
+     * This will allow to display the customised terms instead of the values currently used in the OpenSearch index.
+     * TODO: This should be corrected directly in the index
+     */
+    getTypeAlias(type: string): string {
+        switch (type) {
+            case "author":
+                return "creator";
+            case "subjects":
+                return "keyword";
+            case "doctype":
+                return "data type";
+            default:
+                return type;
+        }
     }
 
     /**
diff --git a/src/views/search-view/search-view-component.ts b/src/views/search-view/search-view-component.ts
index 96e3fe4..d8e666c 100644
--- a/src/views/search-view/search-view-component.ts
+++ b/src/views/search-view/search-view-component.ts
@@ -74,12 +74,31 @@ export default class SearchViewComponent extends Vue {
         if (typeof this.searchTerm === "string") {
             return this.searchTerm;
         } else if (this.searchTerm instanceof Suggestion) {
-            return this.searchTerm.value + " (" + this.searchTerm.type + ")";
+            return this.searchTerm.value + " (" + this.getTypeAlias(this.searchTerm.type) + ")";
+            // return this.searchTerm.value + " (" + this.searchTerm.type + ")";
         } else {
             return "";
         }
     }
 
+    /**
+     * The alias for the search term type will be set depending on the name of the type. 
+     * This will allow to display the customised terms instead of the values currently used in the OpenSearch index.
+     * TODO: This should be corrected directly in the index
+     */
+    getTypeAlias(type: string): string {
+        switch (type) {
+            case "author":
+                return "creator";
+            case "subjects":
+                return "keyword";
+            case "doctype":
+                return "data type";
+            default:
+                return type;
+        }
+    }
+
     // Method to check if a search term is present
     hasSearchTerm(): boolean {
         if (typeof this.searchTerm === "string" && this.searchTerm !== "") {