- Pagination arrow color fixed according to page

- Data type showed in suggestions corrected according to user-friendly values

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">

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")) {
             /**

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>

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;
+        }
     }
 
     /**

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 !== "") {