initial TreeSearch component

vue/src/apps/RecipeSearchView/AdvancedTreeSelect.vue

@@ -1,22 +1,22 @@
 <template>
     <b-input-group class="mt-2">
         <treeselect
-            v-model="settings.search_keywords"
+            v-model="selected1"
-            :options="facets.Keywords"
+            :options="options"
             :load-options="loadChildren"
             :multiple="true"
             :flat="true"
             :auto-load-root-options="false"
             searchNested
-            :placeholder="$t('Keywords')"
+            :placeholder="placeholder"
             :normalizer="normalizer"
-            @input="refreshData(false)"
+            @input="change"
             style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
         />
         <b-input-group-append>
             <b-input-group-text>
-                <b-form-checkbox v-model="settings.search_keywords_or" name="check-button" @change="refreshData(false)" class="shadow-none" switch size="sm">
+                <b-form-checkbox v-model="or1" name="check-button" @change="orChange()" class="shadow-none" switch>
-                    <span class="text-uppercase" v-if="settings.search_keywords_or">{{ $t("or") }}</span>
+                    <span class="text-uppercase" v-if="or1">{{ $t("or") }}</span>
                     <span class="text-uppercase" v-else>{{ $t("and") }}</span>
                 </b-form-checkbox>
             </b-input-group-text>
@@ -25,31 +25,65 @@
 </template>
 
 <script>
+import { ApiMixin } from "@/utils/utils"
 import { Treeselect, LOAD_CHILDREN_OPTIONS } from "@riophae/vue-treeselect"
 import "@riophae/vue-treeselect/dist/vue-treeselect.css"
 
 export default {
     name: "AdvancedTreeSelect",
     props: {
-        selected: { type: Array },
+        initial_selected1: { type: Array },
+        initial_selected2: { type: Array },
+        initial_selected3: { type: Array },
+        placeholder: { type: String, default: "You forgot to set placeholder" },
+        options: { type: Array },
+        facet: { type: String, default: undefined },
     },
     components: { Treeselect },
     data() {
         return {
-            shopping: false,
+            selected1: [],
+            selected2: [],
+            selected3: [],
+            callbacks: [],
+            or1: true,
         }
     },
     mounted() {},
     computed: {},
-    watch: {},
+    watch: {
+        selected1: function (newVal, oldVal) {
+            console.log("test", newVal)
+            this.$emit("change", newVal)
+        },
+        options: function () {
+            this.callbacks.forEach((callback) => {
+                callback()
+            })
+        },
+    },
     methods: {
         loadChildren: function ({ action, parentNode, callback }) {
             if (action === LOAD_CHILDREN_OPTIONS) {
-                if (this.facets?.cache_key) {
+                this.callbacks.push(callback)
-                    this.getFacets(this.facets.cache_key, "keyword", parentNode.id).then(callback())
+                this.$emit("load-children", { type: "keyword", parent: parentNode.id })
-                }
             }
         },
+        normalizer(node) {
+            let count = node?.count ? " (" + node.count + ")" : ""
+            return {
+                id: node.id,
+                label: node.name + count,
+                children: node.children,
+                isDefaultExpanded: node.isDefaultExpanded,
+            }
+        },
+        orChange: function () {
+            console.log("changed!")
+        },
+        change: function (e) {
+            console.log(e)
+        },
     },
 }
 </script>

vue/src/apps/RecipeSearchView/RecipeSearchView.vue

@@ -147,6 +147,18 @@
                                             </b-input-group>
                                         </div>
                                     </div>
+                                    <div class="row">
+                                        <div class="col-12">
+                                            <AdvancedTreeSelect
+                                                :initial_selection1="settings.search_keywords"
+                                                :options="facets.Keywords"
+                                                facet="keyword"
+                                                :placeholder="$t('Keywords')"
+                                                @change="settings.search_keywords = $event"
+                                                @load-children="loadChildren($event)"
+                                            />
+                                        </div>
+                                    </div>
 
                                     <!-- foods filter -->
                                     <div class="row">
@@ -285,6 +297,7 @@ import GenericMultiselect from "@/components/GenericMultiselect"
 import { Treeselect, LOAD_CHILDREN_OPTIONS } from "@riophae/vue-treeselect" //TODO: delete
 import "@riophae/vue-treeselect/dist/vue-treeselect.css" //TODO: delete
 import RecipeSwitcher from "@/components/Buttons/RecipeSwitcher"
+import AdvancedTreeSelect from "@/apps/RecipeSearchView/AdvancedTreeSelect"
 
 Vue.use(VueCookies)
 Vue.use(BootstrapVue)
@@ -512,7 +525,6 @@ export default {
             this.search.pagination_page = page
             this.refreshData(false)
         },
-
         normalizer(node) {
             let count = node?.count ? " (" + node.count + ")" : ""
             return {