- add active filter facets

src/App.vue

@@ -19,12 +19,6 @@
             </a>
         </div>
 
-        <div class="content column is-half is-offset-6">
-            <span class="active-filter-items" v-for="(values, key, index) in activeFilterCategories" :key="index">
-                <active-facet-category :data="values" :categoryName="key"></active-facet-category>
-            </span>
-        </div>
-
         <vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
 
         <div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
@@ -56,6 +50,12 @@
                     <strong>{{ numFound }}</strong> results:
                 </div>
             </div>
+            <div v-else-if="results.length == 0">
+                <div class="resultheader">
+                    Your search yielded
+                    <strong> 0</strong> results:
+                </div>
+            </div>
 
             <!-- <div id="id-pro-sign-in" class="notification" style="">
                     <button
@@ -128,6 +128,11 @@
             </div>
 
             <div class="column is-8 results_column" style="padding-top: 1.2rem; padding-right: 0.5rem">
+                <div class="column" v-if="activeFilterCategories && Object.keys(activeFilterCategories).length > 0">
+                    <span class="active-filter-items" v-for="(values, key, index) in activeFilterCategories" :key="index">
+                        <active-facet-category v-bind:filterItems="values" :categoryName="key" @clearFacetCategory="onClearFacetCategory"></active-facet-category>
+                    </span>
+                </div>
                 <div class="results">
                     <!-- Results section -->
                     <vs-result v-bind:datasets="results"></vs-result>

src/app.ts

@@ -3,10 +3,11 @@ import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
 import VsInput from "./components/vs-input/vs-input.vue";
 import VsResult from "./components/vs-result/vs-result.vue";
 import FacetCategory from "./components/face-category/facet-category.vue";
+import ActiveFacetCategory from "./components/active-facet-category/active-facet-category.vue";
 import { SolrSettings } from "@/models/solr";
 import { DatasetService } from "./services/dataset.service";
 import { Suggestion } from "./models/dataset";
-import { SolrResponse, FacetFields, FacetItem, FacetResults } from "./models/headers";
+import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "./models/headers";
 import { ActiveFilterCategories } from "@/models/solr";
 
 @Options({
@@ -15,6 +16,7 @@ import { ActiveFilterCategories } from "@/models/solr";
         VsInput,
         VsResult,
         FacetCategory,
+        ActiveFacetCategory,
     },
 })
 export default class App extends Vue {
@@ -192,4 +194,52 @@ export default class App extends Vue {
             //   this.facets[prop] = facetValues;
         }
     }
+
+    onClearFacetCategory(categoryName: string): void {
+        // alert(categoryName);
+        delete this.activeFilterCategories[categoryName];
+
+        this.rdrAPI.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
+            (res: SolrResponse) => {
+                this.results = res.response.docs;
+                this.numFound = res.response.numFound;
+
+                // pagination
+                this.pagination["total"] = res.response.numFound;
+                this.pagination["per_page"] = res.responseHeader.params.rows;
+                this.pagination["current_page"] = 1;
+                this.pagination["data"] = res.response.docs;
+
+                const facet_fields: FacetFields = res.facets;
+                let prop: keyof typeof facet_fields;
+                for (prop in facet_fields) {
+                    const facetCategory: FacetInstance = facet_fields[prop];
+                    if (facetCategory.buckets) {
+                        const facetItems: Array<FacetItem> = facetCategory.buckets;
+
+                        const facetValues = facetItems.map((facetItem, index) => {
+                            let rObj: FacetItem;
+                            if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
+                                // console.log(facetValue + " is included")
+                                const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
+                                // console.log(indexOfFacetValue);
+                                rObj = this.facets[prop][indexOfFacetValue];
+                                rObj.count = facetItem.count;
+                                // rObj = new FacetItem(val, count);
+                                //if facet ccategory is reactivated category, deactivate all filter items
+                                if (prop == categoryName) {
+                                    rObj.active = false;
+                                }
+                            } else {
+                                rObj = new FacetItem(facetItem.val, facetItem.count);
+                            }
+                            return rObj;
+                        });
+                        this.facets[prop] = facetValues;
+                    }
+                }
+            },
+            (error: any) => this.errorHandler(error),
+        );
+    }
 }

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

@@ -0,0 +1,55 @@
+import { Options, Vue } from "vue-class-component";
+import { Prop, Emit } from "vue-property-decorator";
+
+@Options({
+    name: "ActiveFacetCategory",
+})
+export default class ActiveFacetCategory extends Vue {
+    bar = "";
+
+    @Prop([Array])
+    filterItems!: string[];
+
+    @Prop([String])
+    categoryName!: string;
+
+    // @Prop([String])
+    // alias;
+
+    get alias(): string {
+        return this.categoryName == "doctype" ? "datatype" : this.categoryName;
+    }
+
+    // get filterItems(): Array<string> {
+    //     return this.data;
+    // }
+
+    // get uncollapseLabelText() : string {
+    //     if (this.collapsed == true) {
+    //         // return myLabels.viewer.sidePanel.more; //"More results";
+    //         return "More results";
+    //     }
+    //     else {
+    //         // return myLabels.viewer.sidePanel.collapse; //"Collapse";
+    //         return "Collapse";
+    //     }
+    // }
+
+    // toggle = function (): void {
+    //     if (this.collapsed == true) {
+    //         this.collapsed = false;
+    //     }
+    //     else if (this.collapsed == false) {
+    //         this.collapsed = true;
+    //         //list.children("li:gt(4)").hide();
+    //     }
+    // }
+
+    @Emit("clearFacetCategory")
+    deactivateFacetCategory(): string {
+        // filterItem.Category = this.alias;
+        // filterItem.Active = true;
+        // this.$emit("clearFacetCategory", this.categoryName, this.alias);
+        return this.categoryName;
+    }
+}

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

@@ -0,0 +1,63 @@
+<template>
+    <div>
+        <input v-bind:id="alias" v-bind:name="alias" type="checkbox" checked="checked" @click.prevent="deactivateFacetCategory()" class="css-checkbox" />
+        <label v-bind:for="alias" class="css-label">
+            <span>{{ alias + ": " }}</span>
+            <a class="gbaterm" v-if="filterItems && filterItems.length > 0">{{ filterItems.join(", ") }}</a>
+        </label>
+    </div>
+</template>
+
+<script lang="ts">
+import ActiveFacetCategory from "./ActiveFacetCategory";
+export default ActiveFacetCategory;
+</script>
+
+<style scoped>
+th,
+td {
+    border-bottom: 0px solid #e1e1e1;
+}
+.gbaterm {
+    color: #0099cc;
+    border: 1px solid rgb(200, 210, 255);
+    padding: 4px;
+    background: rgb(220, 225, 255);
+    /* display: inline-block; */
+    margin: 1px 0 1px 0;
+    border-radius: 2px;
+}
+
+/* -------------------------------------
+CSS for Checkbox Type-1
+---------------------------------------- */
+input[type="checkbox"].css-checkbox {
+    position: absolute;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    width: 1px;
+    padding: 0;
+    border: 0;
+}
+
+input[type="checkbox"].css-checkbox + label.css-label {
+    padding-left: 25px;
+    /* height: 24px;
+    display: inline-block; */
+    line-height: 30px;
+    background-repeat: no-repeat;
+    font-size: 12px;
+    font-weight: bold;
+    vertical-align: middle;
+    cursor: pointer;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAAn1BMVEXMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzJycnLy8v////c3Nzn5+fp6en8/PzNzc3KysrOzs7l5eXGxsbR0dHa2trg4ODz8/PMzMzX19fw8PDd3d3m5ubu7u7y8vL7+/v09PTb29vk5OTY2NiyHSPoAAAAGXRSTlP0yb3mvngEyOd/6BbFrZrAlcoXt/Hp89A1KxYHDAAAAJBJREFUGNN1kEcOwzAMBJnee6Wo6p5e//+2BJIdCAq8lx3MgSAJ3cG44aU3HUHnEGQC7ZIYYw6GpTLvosiNxT40beOZSKDFVqU40cVTBjHJiOIE0TjFjpxnguiafVtbZW70yz1ioVJOsVxKcSJ6CClj/Tce65eoUU+lXpWauWN1mkaONjAPP7GA5WoNXra7/Qf12yWALFrgcgAAAABJRU5ErkJggg==");
+}
+
+input[type="checkbox"].css-checkbox:checked + label.css-label {
+    color: black;
+    /* opacity: 1; */
+    cursor: pointer;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAABGlBMVEUAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcz///8AmcwAl8sAmMsAmMwAlssAlcoAk8kAlsoAlMkMm80NnM0OnM4Pnc4Sns4SoNAAkskDl8sEl8sFmcwGm80AksgAkccAkch1x+R6yeV7yuWAzOaCzeZzx+MClssTns8Tn88TodAfpdIwq9VFtNlGtdpItdpKttpNt9tXvN5yx+ODzeaHz+eN0uiQ0+mX1uqY1uqd2Oui2u2w4O+x4O+04fC65PG75PHA5vPC5/PK6vTK6vXl9frm9frw+fzy+vz1+/33/P74/P78/v79/v8Cl8vxGPkTAAAAGHRSTlMCEB0+cHKNm6W5vL2+wMPP2ubn6On4+vtKR3RrAAAAy0lEQVR4Xl3M5XLDMBSEUSXlJinDXpEdZk6ZmZnp/V8jVxO7k/H3Yz1zJFmIsanEUNPjMTFKkSZFIkqLIsmrjdH8MVLxLrhbOt07SWsqHV1XJdG8o78u0PHqh5+4yagBrZ8DWNv/Ah5zAWl7xvYL3GdM8JCUPf1hvM36FBI1976Z2g36p9LuO1zHng7IHHwAD5dsrUpA5TvgKe9dAK+bckBy4/mlYJW9etvxw3/5xS3LJ7VtXqYUcVK6VcbtkpigSLMiPrO8OtTK3Egf1HcmSFPcuygAAAAASUVORK5CYII=");
+}
+</style>

src/components/vs-input/vs-input.ts

@@ -19,7 +19,7 @@ export default class VsInput extends Vue {
     readonly placeholder!: string;
 
     private display = "";
-    private value!: Suggestion;
+    private value!: Suggestion | string;
     private error = "";
     private results: Array<Dataset> = [];
     private loading = false;
@@ -119,6 +119,7 @@ export default class VsInput extends Vue {
     search(): string {
         this.results = [];
         // this.$emit("search", this.display)
+        this.value = this.display; //(obj["title_output"]) ? obj["title_output"] : obj.id
         return this.display;
     }
 
@@ -216,8 +217,8 @@ export default class VsInput extends Vue {
         //     return;
         // }
         this.value = obj; //(obj["title_output"]) ? obj["title_output"] : obj.id
-        // this.display = obj; // this.formatDisplay(obj)
+        this.display = obj.value; // this.formatDisplay(obj)
-        this.selectedDisplay = this.display;
+        // this.selectedDisplay = this.display;
 
         this.close();
         // this.$emit("update", this.value);
@@ -238,12 +239,12 @@ export default class VsInput extends Vue {
      *  Close the results list. If nothing was selected clear the search
      */
     close(): void {
-        if (!this.value || !this.selectedDisplay) {
+        if (!this.value) {
             this.clear();
         }
-        if (this.selectedDisplay !== this.display && this.value) {
+        // if (this.selectedDisplay !== this.display && this.value) {
-            this.display = this.selectedDisplay;
+        //     this.display = this.selectedDisplay;
-        }
+        // }
         this.results = [];
         this.error = "";
         //this.removeEventListener()