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

@@ -15,18 +15,18 @@
         :loading="loading"
         @search-change="search"
         @input="selectionChanged"
-      @tag="addNew">
+        @tag="addNew"
+    >
     </multiselect>
 </template>
 
 <script>
-
-import Multiselect from 'vue-multiselect'
-import {ApiMixin} from "@/utils/utils";
+import Multiselect from "vue-multiselect"
+import { ApiMixin } from "@/utils/utils"
 
 export default {
     name: "GenericMultiselect",
-  components: {Multiselect},
+    components: { Multiselect },
     mixins: [ApiMixin],
     data() {
         return {
@@ -37,50 +37,54 @@ export default {
         }
     },
     props: {
-    placeholder: {type: String, default: undefined},
+        placeholder: { type: String, default: undefined },
         model: {
-      type: Object, default() {
+            type: Object,
+            default() {
                 return {}
-      }
             },
-    label: {type: String, default: 'name'},
-    parent_variable: {type: String, default: undefined},
-    limit: {type: Number, default: 10,},
+        },
+        label: { type: String, default: "name" },
+        parent_variable: { type: String, default: undefined },
+        limit: { type: Number, default: 10 },
         sticky_options: {
-      type: Array, default() {
+            type: Array,
+            default() {
                 return []
-      }
+            },
         },
         initial_selection: {
-      type: Array, default() {
+            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'},
+        },
+        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
+        initial_selection: function (newVal, oldVal) {
+            // watch it
             this.selected_objects = newVal
         },
     },
     mounted() {
-    this.search('')
+        this.search("")
         this.selected_objects = this.initial_selection
     },
     computed: {
         lookupPlaceholder() {
-      return this.placeholder || this.model.name || this.$t('Search')
+            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
+                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)
@@ -88,7 +92,7 @@ export default {
                     this.objects.forEach((item) => {
                         if ("default" in item) {
                             if (item.default) {
-                if(this.multiple) {
+                                if (this.multiple) {
                                     this.selected_objects = [item]
                                 } else {
                                     this.selected_objects = item
@@ -101,23 +105,19 @@ export default {
             })
         },
         selectionChanged: function () {
-      this.$emit('change', {var: this.parent_variable, val: this.selected_objects})
-
+            this.$emit("change", { var: this.parent_variable, val: this.selected_objects })
         },
         addNew(e) {
-      this.$emit('new', e)
+            this.$emit("new", e)
             // could refactor as Promise - seems unecessary
             setTimeout(() => {
-        this.search('');
-      }, 750);
-
-    }
-  }
+                this.search("")
+            }, 750)
+        },
+    },
 }
 </script>
 
 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
 
-<style scoped>
-
-</style>
+<style scoped></style>