meal plan refactor progress

- added paginated loading
- tab panes
- default meal type selection
- image placeholder
- drang and drop delete area

vue/src/components/GenericMultiselect.vue

@@ -38,12 +38,24 @@ export default {
   },
   props: {
     placeholder: {type: String, default: undefined},
-    model: {type: Object, default () {return {}}},
+    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 []}},
+    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'},
@@ -72,17 +84,33 @@ export default {
       }
       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);
-      
+      setTimeout(() => {
+        this.search('');
+      }, 750);
+
     }
   }
 }