Facet filtering modified:

- Author and Subjects substituted by Creator and Keyword
- Facet labels now separated by "|" instead of comma

src/components/active-facet-category/ActiveFacetCategory.ts

@@ -21,8 +21,22 @@ export default class ActiveFacetCategory extends Vue {
     // @Prop([String])
     // alias;
 
+    /**
+     * 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
+     */
     get alias(): string {
-        return this.categoryName == "doctype" ? "datatype" : this.categoryName;
+        // return this.categoryName == "doctype" ? "datatype" : this.categoryName;
+        // console.log("getAlias!");
+        switch (this.categoryName) {
+            case "author":
+                return "creator";
+            case "subjects":
+                return "keyword";
+            default:
+                return this.categoryName;
+        }
     }
 
     // get filterItems(): Array<string> {

src/components/active-facet-category/active-facet-category.vue

@@ -3,7 +3,7 @@
         <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="gbaterm">{{ filterItems.join(", ") }}</a>
+            <a v-if="filterItems && filterItems.length > 0" class="gsaterm">{{ filterItems.join(" | ") }}</a>
         </label>
     </div>
 </template>
@@ -18,7 +18,7 @@ th,
 td {
     border-bottom: 0px solid #e1e1e1;
 }
-.gbaterm {
+.gsaterm {
     color: #0099cc;
     border: 1px solid rgb(200, 210, 255);
     padding: 4px;

src/components/face-category/FacetCategory.ts

@@ -19,9 +19,23 @@ export default class FacetCategory extends Vue {
     })
     filterName!: string;
 
+    /**
+     * 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
+     */
     get alias(): string {
         // console.log("filterName:", this.filterName);
-        return this.filterName == "datatype" ? "doctype" : this.filterName;
+        // return this.filterName == "datatype" ? "doctype" : this.filterName;
+
+        switch (this.filterName) {
+            case "author":
+                return "creator";
+            case "subjects":
+                return "keyword";
+            default:
+                return this.filterName;
+        }
     }
 
     // get filterItems(): Array<FilterItem> {
@@ -54,8 +68,9 @@ export default class FacetCategory extends Vue {
 
     @Emit("filter")
     activateItem(filterItem: FacetItem): FacetItem {
-        // console.log("ActivateItem");
-        filterItem.category = this.alias;
+        console.log("Emit: ActivateItem");
+        // filterItem.category = this.alias;
+        filterItem.category = this.filterName;
         filterItem.active = true;
         // this.$emit("filter", filterItem);
         return filterItem;

src/components/face-category/facet-category.vue

@@ -2,7 +2,8 @@
     <div class="card panel-default">
         <!-- <h3 class="panel-title filterViewModelName">{{ filterName }}</h3> -->
         <div class="panel-heading">
-            <h3 class="panel-title titlecase filterViewModelName">{{ filterName }}</h3>
+            <h3 class="panel-title titlecase filterViewModelName">{{ alias }}</h3>
+            <!-- <h3 class="panel-title titlecase filterViewModelName">{{ filterName }}</h3> -->
         </div>
         <div class="panel-body">
             <!-- e.g.language -->