WIP

vue/src/apps/ShoppingListView/ShoppingListView.vue

@@ -920,7 +920,7 @@ export default {
                 makeToast(this.$t("Warning"), this.$t("NoCategory"), "warning")
             }
 
-            // TODO make decision - should inheritance always be turned off when category set manually or give user a choice at front-end or make it a setting?
+            // TODO make decision - should inheritance always be set manually or give user a choice at front-end or make it a setting?
             let food = this.items.filter((x) => x.food.id == item?.[0]?.food.id ?? item.food.id)[0].food
             food.supermarket_category = this.shopping_categories.filter((x) => x?.id === this.shopcat)?.[0]
             this.updateFood(food, "supermarket_category")

vue/src/components/GenericMultiselect.vue

@@ -1,123 +1,123 @@
 <template>
-  <multiselect
+    <multiselect
-      v-model="selected_objects"
+        v-model="selected_objects"
-      :options="objects"
+        :options="objects"
-      :close-on-select="true"
+        :close-on-select="true"
-      :clear-on-select="true"
+        :clear-on-select="true"
-      :hide-selected="multiple"
+        :hide-selected="multiple"
-      :preserve-search="true"
+        :preserve-search="true"
-      :placeholder="lookupPlaceholder"
+        :placeholder="lookupPlaceholder"
-      :label="label"
+        :label="label"
-      track-by="id"
+        track-by="id"
-      :multiple="multiple"
+        :multiple="multiple"
-      :taggable="allow_create"
+        :taggable="allow_create"
-      :tag-placeholder="create_placeholder"
+        :tag-placeholder="create_placeholder"
-      :loading="loading"
+        :loading="loading"
-      @search-change="search"
+        @search-change="search"
-      @input="selectionChanged"
+        @input="selectionChanged"
-      @tag="addNew">
+        @tag="addNew"
-  </multiselect>
+    >
+    </multiselect>
 </template>
 
 <script>
-
+import Multiselect from "vue-multiselect"
-import Multiselect from 'vue-multiselect'
+import { ApiMixin } from "@/utils/utils"
-import {ApiMixin} from "@/utils/utils";
 
 export default {
-  name: "GenericMultiselect",
+    name: "GenericMultiselect",
-  components: {Multiselect},
+    components: { Multiselect },
-  mixins: [ApiMixin],
+    mixins: [ApiMixin],
-  data() {
+    data() {
-    return {
+        return {
-      // this.Models and this.Actions inherited from ApiMixin
+            // this.Models and this.Actions inherited from ApiMixin
-      loading: false,
+            loading: false,
-      objects: [],
+            objects: [],
-      selected_objects: [],
+            selected_objects: [],
-    }
-  },
-  props: {
-    placeholder: {type: String, default: undefined},
-    model: {
-      type: Object, default() {
-        return {}
-      }
-    },
-    label: {type: String, default: 'name'},
-    parent_variable: {type: String, default: undefined},
-    limit: {type: Number, default: 10,},
-    sticky_options: {
-      type: Array, default() {
-        return []
-      }
-    },
-    initial_selection: {
-      type: Array, default() {
-        return []
-      }
-    },
-    multiple: {type: Boolean, default: true},
-    allow_create: {type: Boolean, default: false}, // TODO: this will create option to add new drop-downs
-    create_placeholder: {type: String, default: 'You Forgot to Add a Tag Placeholder'},
-  },
-  watch: {
-    initial_selection: function (newVal, oldVal) { // watch it
-      this.selected_objects = newVal
-    },
-  },
-  mounted() {
-    this.search('')
-    this.selected_objects = this.initial_selection
-  },
-  computed: {
-    lookupPlaceholder() {
-      return this.placeholder || this.model.name || this.$t('Search')
-    },
-  },
-  methods: {
-    // this.genericAPI inherited from ApiMixin
-    search: function (query) {
-      let options = {
-        'page': 1,
-        'pageSize': 10,
-        'query': query
-      }
-      this.genericAPI(this.model, this.Actions.LIST, options).then((result) => {
-        this.objects = this.sticky_options.concat(result.data?.results ?? result.data)
-        if (this.selected_objects.length === 0 && this.initial_selection.length === 0 && this.objects.length > 0) {
-          this.objects.forEach((item) => {
-            if ("default" in item) {
-              if (item.default) {
-                if(this.multiple) {
-                  this.selected_objects = [item]
-                } else {
-                  this.selected_objects = item
-                }
-                this.selectionChanged()
-              }
-            }
-          })
         }
-      })
     },
-    selectionChanged: function () {
+    props: {
-      this.$emit('change', {var: this.parent_variable, val: this.selected_objects})
+        placeholder: { type: String, default: undefined },
-
+        model: {
+            type: Object,
+            default() {
+                return {}
+            },
+        },
+        label: { type: String, default: "name" },
+        parent_variable: { type: String, default: undefined },
+        limit: { type: Number, default: 10 },
+        sticky_options: {
+            type: Array,
+            default() {
+                return []
+            },
+        },
+        initial_selection: {
+            type: Array,
+            default() {
+                return []
+            },
+        },
+        multiple: { type: Boolean, default: true },
+        allow_create: { type: Boolean, default: false },
+        create_placeholder: { type: String, default: "You Forgot to Add a Tag Placeholder" },
+    },
+    watch: {
+        initial_selection: function (newVal, oldVal) {
+            // watch it
+            this.selected_objects = newVal
+        },
+    },
+    mounted() {
+        this.search("")
+        this.selected_objects = this.initial_selection
+    },
+    computed: {
+        lookupPlaceholder() {
+            return this.placeholder || this.model.name || this.$t("Search")
+        },
+    },
+    methods: {
+        // this.genericAPI inherited from ApiMixin
+        search: function (query) {
+            let options = {
+                page: 1,
+                pageSize: 10,
+                query: query,
+            }
+            this.genericAPI(this.model, this.Actions.LIST, options).then((result) => {
+                this.objects = this.sticky_options.concat(result.data?.results ?? result.data)
+                if (this.selected_objects.length === 0 && this.initial_selection.length === 0 && this.objects.length > 0) {
+                    this.objects.forEach((item) => {
+                        if ("default" in item) {
+                            if (item.default) {
+                                if (this.multiple) {
+                                    this.selected_objects = [item]
+                                } else {
+                                    this.selected_objects = item
+                                }
+                                this.selectionChanged()
+                            }
+                        }
+                    })
+                }
+            })
+        },
+        selectionChanged: function () {
+            this.$emit("change", { var: this.parent_variable, val: this.selected_objects })
+        },
+        addNew(e) {
+            this.$emit("new", e)
+            // could refactor as Promise - seems unecessary
+            setTimeout(() => {
+                this.search("")
+            }, 750)
+        },
     },
-    addNew(e) {
-      this.$emit('new', e)
-      // could refactor as Promise - seems unecessary
-      setTimeout(() => {
-        this.search('');
-      }, 750);
-
-    }
-  }
 }
 </script>
 
 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
 
-<style scoped>
+<style scoped></style>
-
-</style>