several small fixes to new components

vue/src/apps/FoodListView/FoodListView.vue

@@ -2,55 +2,51 @@
   <div id="app" style="margin-bottom: 4vh">
     <!-- v-if prevents component from loading before this_model has been assigned -->
     <generic-modal-form v-if="this_model"
-    :model="this_model"
+                        :model="this_model"
-    :action="this_action"
+                        :action="this_action"
-    :item1="this_item"
+                        :item1="this_item"
-    :item2="this_target"
+                        :item2="this_target"
-    :show="show_modal"
+                        :show="show_modal"
-    @finish-action="finishAction"/>
+                        @finish-action="finishAction"/>
     <generic-split-lists v-if="this_model"
-      :list_name="this_model.name"
+                         :list_name="this_model.name"
-      @reset="resetList"
+                         @reset="resetList"
-      @get-list="getItems"
+                         @get-list="getItems"
-      @item-action="startAction" 
+                         @item-action="startAction">
-    >
       <template v-slot:cards-left>
         <generic-horizontal-card
-          v-for="i in items_left" v-bind:key="i.id"
+            v-for="i in items_left" v-bind:key="i.id"
-          :item=i
+            :item=i
-          :item_type="this_model.name"
+            :item_type="this_model.name"
-          :draggable="true"
+            :draggable="true"
-          :merge="true"
+            :merge="true"
-          :move="true"
+            :move="true"
-          @item-action="startAction($event, 'left')" 
+            @item-action="startAction($event, 'left')">
-        >
+          <!-- foods can also be a recipe, show link to the recipe if it exists -->
-            <!-- foods can also be a recipe, show link to the recipe if it exists -->
+          <template v-slot:upper-right>
-            <template v-slot:upper-right>
+            <b-button v-if="i.recipe" v-b-tooltip.hover :title="i.recipe.name"
-              <b-button v-if="i.recipe" v-b-tooltip.hover :title="i.recipe.name" 
+                      class=" btn fas fa-book-open p-0 border-0" variant="link" :href="i.recipe.url"/>
-                class=" btn fas fa-book-open p-0 border-0" variant="link" :href="i.recipe.url"/>
+          </template>
-            </template>
         </generic-horizontal-card>
       </template>
       <template v-slot:cards-right>
         <generic-horizontal-card v-for="i in items_right" v-bind:key="i.id"
-          :item=i
+                                 :item=i
-          :item_type="this_model.name"
+                                 :item_type="this_model.name"
-          :draggable="true"
+                                 :draggable="true"
-          :merge="true"
+                                 :merge="true"
-          :move="true"
+                                 :move="true"
-          @item-action="startAction($event, 'right')" 
+                                 @item-action="startAction($event, 'right')">
-        >
           <!-- foods can also be a recipe, show link to the recipe if it exists -->
           <template v-slot:upper-right>
             <b-button v-if="i.recipe" v-b-tooltip.hover :title="i.recipe.name"
-              class=" btn fas fa-book-open p-0 border-0" variant="link" :href="i.recipe.url"/>
+                      class=" btn fas fa-book-open p-0 border-0" variant="link" :href="i.recipe.url"/>
           </template>
         </generic-horizontal-card>
       </template>
     </generic-split-lists>
 
 
-    
   </div>
 </template>
 
@@ -85,7 +81,7 @@ export default {
       this_action: undefined,
       this_item: {},
       this_target: {},
-      show_modal:false
+      show_modal: false
     }
   },
   mounted() {
@@ -93,14 +89,14 @@ export default {
   },
   methods: {
     // this.genericAPI inherited from ApiMixin
-    resetList: function(e) {
+    resetList: function (e) {
       if (e.column === 'left') {
         this.items_left = []
       } else if (e.column === 'right') {
         this.items_right = []
       }
     },
-    startAction: function(e, param) {
+    startAction: function (e, param) {
       let source = e?.source ?? {}
       let target = e?.target ?? undefined
       this.this_item = source
@@ -154,10 +150,10 @@ export default {
           break;
       }
     },
-    finishAction: function(e) {
+    finishAction: function (e) {
       let update = undefined
       if (e !== 'cancel') {
-        switch(this.this_action) {
+        switch (this.this_action) {
           case this.Actions.DELETE:
             this.deleteThis(this.this_item.id)
             break;
@@ -179,34 +175,34 @@ export default {
       }
       this.clearState()
     },
-    getItems: function(params, callback) {
+    getItems: function (params, callback) {
       let column = params?.column ?? 'left'
       // TODO: does this need to be a callback?
       this.genericAPI(this.this_model, this.Actions.LIST, params).then((result) => {
-        if (result.data.results.length){
+        if (result.data.results.length) {
-          if (column ==='left') {
+          if (column === 'left') {
             // if paginated results are in result.data.results otherwise just result.data
             this.items_left = this.items_left.concat(result.data?.results ?? result.data)
-          } else if (column ==='right') {
+          } else if (column === 'right') {
             this.items_right = this.items_right.concat(result.data?.results ?? result.data)
           }
           // are the total elements less than the length of the array? if so, stop loading
           // TODO: generalize this to handle results in result.data
-          callback(result.data.count > (column==="left" ? this.items_left.length : this.items_right.length))
+          callback(result.data.count > (column === "left" ? this.items_left.length : this.items_right.length))
         } else {
           callback(false) // stop loading
           console.log('no data returned')
         }
         // return true if total objects are still less than the length of the list
         // TODO this needs generalized to handle non-paginated data
-        callback(result.data.count < (column==="left" ? this.items_left.length : this.items_right.length)) 
+        callback(result.data.count < (column === "left" ? this.items_left.length : this.items_right.length))
 
       }).catch((err) => {
         console.log(err)
         StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH)
       })
     },
-    getThis: function(id, callback){
+    getThis: function (id, callback) {
       return this.genericAPI(this.this_model, this.Actions.FETCH, {'id': id})
     },
     saveThis: function (thisItem) {
@@ -273,7 +269,10 @@ export default {
         this.clearState()
         return
       }
-      this.genericAPI(this.this_model, this.Actions.MERGE, {'source': source_id, 'target': target_id}).then((result) => {
+      this.genericAPI(this.this_model, this.Actions.MERGE, {
+        'source': source_id,
+        'target': target_id
+      }).then((result) => {
         this.items_left = this.destroyCard(source_id, this.items_left)
         this.items_right = this.destroyCard(source_id, this.items_right)
         this.refreshThis(target_id)
@@ -286,7 +285,7 @@ export default {
       })
 
     },
-    getChildren: function(col, item){
+    getChildren: function (col, item) {
       let parent = {}
       let options = {
         'root': item.id,
@@ -304,7 +303,7 @@ export default {
         this.makeToast(this.$t('Error'), err.bodyText, 'danger')
       })
     },
-    getRecipes: function(col, food){
+    getRecipes: function (col, food) {
       let parent = {}
       // TODO: make this generic
       let options = {
@@ -324,13 +323,13 @@ export default {
         this.makeToast(this.$t('Error'), err.bodyText, 'danger')
       })
     },
-    refreshThis: function(id){
+    refreshThis: function (id) {
       this.getThis(id).then(result => {
         this.refreshCard(result.data, this.items_left)
         this.refreshCard({...result.data}, this.items_right)
       })
     },
-    deleteThis: function(id) {
+    deleteThis: function (id) {
       this.genericAPI(this.this_model, this.Actions.DELETE, {'id': id}).then((result) => {
         this.items_left = this.destroyCard(id, this.items_left)
         this.items_right = this.destroyCard(id, this.items_right)
@@ -340,7 +339,7 @@ export default {
         StandardToasts.makeStandardToast(StandardToasts.FAIL_DELETE)
       })
     },
-    clearState: function() {
+    clearState: function () {
       this.show_modal = false
       this.this_action = undefined
       this.this_item = undefined

vue/src/components/GenericHorizontalCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div row>
+  <div row style="margin: 4px">
     <b-card no-body d-flex flex-column :class="{'border border-primary' : over, 'shake': isError}"
       style="height: 10vh;" :style="{'cursor:grab' : draggable}"
       @dragover.prevent

vue/src/components/Modals/LookupInput.vue

@@ -12,6 +12,7 @@
           style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
           :placeholder="modelName">
         </generic-multiselect>
+        </b-form-group>
     </div>
 </template>