card loading fixes

vue/src/components/Badges.vue

@@ -0,0 +1,40 @@
+<template>
+    <span>
+        <linked-recipe v-if="linkedRecipe"
+            :item="item"/>
+        <icon-badge v-if="Icon"
+            :item="item"/>
+    </span>
+</template>
+
+<script>
+import LinkedRecipe from "@/components/Badges/LinkedRecipe";
+import IconBadge from "@/components/Badges/Icon";
+
+export default {
+  name: 'CardBadges',
+  components: {LinkedRecipe, IconBadge},
+  props: {
+    item: {type: Object},
+    model: {type: Object}
+  },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  computed: {
+    linkedRecipe: function () {
+        return this.model?.badges?.linked_recipe ?? false
+    },
+    Icon: function () {
+        return this.model?.badges?.icon ?? false
+    }
+  },
+  watch: {
+  },
+  methods: {
+  }
+}
+</script>

vue/src/components/Badges/Icon.vue

@@ -0,0 +1,27 @@
+<template>
+  <span>
+    <b-button v-if="item.icon" class=" btn p-0 border-0" variant="link">
+        {{item.icon}}
+    </b-button>
+  </span>
+</template>
+
+<script>
+
+export default {
+  name: 'IconBadge',
+  props: {
+    item: {type: Object}
+  },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  watch: {
+  },
+  methods: {
+  }
+}
+</script>

vue/src/components/Badges/LinkedRecipe.vue

@@ -0,0 +1,26 @@
+<template>
+  <span>
+    <b-button v-if="item.recipe" v-b-tooltip.hover :title="item.recipe.name"
+                  class=" btn fas fa-book-open p-0 border-0" variant="link" :href="item.recipe.url"/>
+  </span>
+</template>
+
+<script>
+
+export default {
+  name: 'LinkedRecipeBadge',
+  props: {
+    item: {type: Object}
+  },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  watch: {
+  },
+  methods: {
+  }
+}
+</script>

vue/src/components/GenericContextMenu.vue

@@ -1,4 +1,5 @@
 <template>
+  <span>
     <b-dropdown variant="link" toggle-class="text-decoration-none" no-caret style="boundary:window">
       <template #button-content>
           <i class="fas fa-ellipsis-v" ></i>
@@ -20,6 +21,7 @@
       </b-dropdown-item>
 
     </b-dropdown>
+  </span>
 </template>
 
 <script>

vue/src/components/GenericHorizontalCard.vue

@@ -21,7 +21,7 @@
                     <div class="mt-auto mb-1 d-flex flex-row justify-content-end">
                       <div v-if="item[child_count]" class="mx-2 btn btn-link btn-sm" 
                         style="z-index: 800;" v-on:click="$emit('item-action',{'action':'get-children','source':item})">
-                          <div v-if="!item.show_children">{{ item[child_count] }} {{ item_type }}</div>
+                          <div v-if="!item.show_children">{{ item[child_count] }} {{ itemName }}</div>
                           <div v-else>{{ text.hide_children }}</div>
                       </div>
                       <div v-if="item[recipe_count]" class="mx-2 btn btn-link btn-sm" style="z-index: 800;"
@@ -34,10 +34,10 @@
             </b-card-body>
         </b-col>
         <div class="card-img-overlay justify-content-right h-25 m-0 p-0 text-right">
-          <slot name="upper-right"></slot>
+          <badges :item="item" :model="model"/>
           <generic-context-menu  class="p-0"
-            :show_merge="merge"
-            :show_move="move"
+            :show_merge="useMerge"
+            :show_move="useMove"
             @item-action="$emit('item-action', {'action': $event, 'source': item})">
           </generic-context-menu>
         </div>
@@ -49,15 +49,13 @@
         <generic-horizontal-card v-for="child in item[children]" v-bind:key="child.id"
           :draggable="draggable"
           :item="child"
-          :item_type="item_type"
+          :model="model"
           :title="title"
           :subtitle="subtitle"
           :child_count="child_count"
           :children="children"
           :recipe_count="recipe_count"
           :recipes="recipes"
-          :merge="merge"
-          :move="move"
           @item-action="$emit('item-action', $event)">
         </generic-horizontal-card>
       </div>
@@ -75,10 +73,10 @@
     </div>
     <!-- this should be made a generic component, would also require mixin for functions that generate the popup and put in parent container-->  
     <b-list-group ref="tooltip" variant="light" v-show="show_menu" v-on-clickaway="closeMenu" style="z-index:9999; cursor:pointer">
-      <b-list-group-item v-if="move" action v-on:click="$emit('item-action',{'action': 'move', 'target': item, 'source': source}); closeMenu()">
+      <b-list-group-item v-if="useMove" action v-on:click="$emit('item-action',{'action': 'move', 'target': item, 'source': source}); closeMenu()">
         <i class="fas fa-expand-arrows-alt fa-fw"></i> {{$t('Move')}}: {{$t('move_confirmation', {'child': source.name,'parent':item.name})}}
       </b-list-group-item>
-      <b-list-group-item v-if="merge" action v-on:click="$emit('item-action',{'action': 'merge', 'target': item, 'source': source}); closeMenu()">
+      <b-list-group-item v-if="useMerge" action v-on:click="$emit('item-action',{'action': 'merge', 'target': item, 'source': source}); closeMenu()">
         <i class="fas fa-compress-arrows-alt fa-fw"></i> {{$t('Merge')}}: {{ $t('merge_confirmation', {'source': source.name,'target':item.name}) }}
       </b-list-group-item>
       <b-list-group-item action v-on:click="closeMenu()">
@@ -92,27 +90,25 @@
 
 <script>
 import GenericContextMenu from "@/components/GenericContextMenu";
+import Badges from "@/components/Badges";
 import RecipeCard from "@/components/RecipeCard";
 import { mixin as clickaway } from 'vue-clickaway';
 import { createPopper } from '@popperjs/core';
 
 export default {
   name: "GenericHorizontalCard",
-  components: { GenericContextMenu, RecipeCard },
+  components: { GenericContextMenu, RecipeCard, Badges},
   mixins: [clickaway],
   props: {
-    item: Object,
-    item_type: {type: String, default: 'Blank Item Type'},  // TODO update translations to handle plural translations
+    item: {type: Object},
+    model: {type: Object},
     draggable: {type: Boolean, default: false},
-    title: {type: String, default: 'name'},
+    title: {type: String, default: 'name'},  // this and the following props can probably be moved to model.js and made computed values
     subtitle: {type: String, default: 'description'},
     child_count: {type: String, default: 'numchild'},
     children: {type: String, default: 'children'},
     recipe_count: {type: String, default: 'numrecipe'},
-    recipes: {type: String, default: 'recipes'},
-    move: {type: Boolean, default: false},
-    merge: {type: Boolean, default: false},
-    tree: {type: Boolean, default: false},
+    recipes: {type: String, default: 'recipes'}
   },
   data() {
     return {
@@ -131,7 +127,18 @@ export default {
   mounted() {
     this.item_image = this.item?.image ?? window.IMAGE_PLACEHOLDER
     this.dragMenu = this.$refs.tooltip
-    this.text.hide_children = this.$t('Hide_' + this.item_type)
+    this.text.hide_children = this.$t('Hide_' + this.itemName)
+  },
+  computed: {
+    itemName: function() {
+      return this.model?.name ?? "You Forgot To Set Model Name in model.js"
+    },
+    useMove: function() {
+      return this.model['move'] !== false
+    },
+    useMerge: function() {
+      return this.model['merge'] !== false
+    }
   },
   methods: {
     handleDragStart: function(e) {

vue/src/components/GenericMultiselect.vue

@@ -75,12 +75,7 @@ export default {
       })
     },
     selectionChanged: function () {
-      if (this.multiple) {
-        this.$emit('change', {var: this.parent_variable, val: this.selected_objects})
-      } else {
-        // if not multiple listener is expecting a single object, not an array
-        this.$emit('change', {var: this.parent_variable, val: this.selected_objects?.[0] ?? null})
-      }
+      this.$emit('change', {var: this.parent_variable, val: this.selected_objects})
       
     },
     addNew(e) {

vue/src/components/GenericSplitLists.vue

@@ -43,7 +43,7 @@
             <!-- search box -->
             <div class="col col-md">
               <b-input-group class="mt-3">
-                <b-input class="form-control" v-model="search_right" 
+                <b-input class="form-control" v-model="search_left" 
                         v-bind:placeholder="this.text.search"></b-input>
                 <b-input-group-append>
                   <b-button v-b-toggle.collapse_advanced variant="primary" class="shadow-none">
@@ -57,7 +57,7 @@
             <!-- split side search -->
             <div class="col col-md" v-if="show_split">
               <b-input-group class="mt-3">
-                <b-input class="form-control" v-model="search_left" 
+                <b-input class="form-control" v-model="search_right" 
                         v-bind:placeholder="this.text.search"></b-input>
               </b-input-group>
             </div>
@@ -123,6 +123,8 @@ export default {
       left_page: 0,
       right_state: undefined,
       left_state: undefined,
+      right_dirty: false,
+      left_dirty: false,
       right: +new Date(),
       left: +new Date(),
       text: {
@@ -139,12 +141,22 @@ export default {
     this.text.new = this.$t('New_' + this.list_name)
   },
   watch: {
-    search_right: _debounce(function() {
+    search_left: _debounce(function() {
+      if (this.left_dirty) {
+        //prevents running twice if search is reset
+        this.left_dirty = false
+        return
+      }
       this.left_page = 0
       this.$emit('reset', {'column':'left'})
       this.left += 1
     }, 700),
-    search_left: _debounce(function() {
+    search_right: _debounce(function(newVal, oldVal) {
+      if (this.right_dirty) {
+        //prevents running twice if search is reset
+        this.right_dirty = false
+        return
+      }
       this.right_page = 0
       this.$emit('reset', {'column':'right'})
       this.right += 1
@@ -174,20 +186,17 @@ export default {
   },
   methods: {
     resetSearch: function () {
-      if (this.search_right == '') {
+        this.right_dirty = true
+        this.search_right = ''
         this.right_page = 0
         this.right += 1
         this.$emit('reset', {'column':'right'})
-      } else {
-        this.search_right = ''
-      }
-      if (this.search_left == '') {
+
+        this.left_dirty = true
+        this.search_left = ''
         this.left_page = 0
         this.left += 1
         this.$emit('reset', {'column':'left'})
-      } else {
-        this.search_left = ''
-      }
     },
     infiniteHandler: function($state, col) { 
         let params = {

vue/src/components/Modals/CheckboxInput.vue

@@ -29,9 +29,6 @@ export default {
     },
   },
   methods: {
-      Button: function(e) {
-        this.$bvModal.show('modal')
-      }
   }
 }
 </script>

vue/src/components/Modals/LookupInput.vue

@@ -57,7 +57,7 @@ export default {
         return this.new_value
       } else if (!this.new_value) {
         return []
-      } else if (this.new_value.id) {
+      } else if (typeof(this.new_value) === 'object') {
         return [this.new_value]
       } else {
         return [{'id': -1, 'name': this.new_value}]
@@ -83,8 +83,6 @@ export default {
         console.log(err)
         StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
       })
-      this.show_modal = false
-      
     },
   }
 }

vue/src/components/Modals/TextInput.vue

@@ -37,9 +37,6 @@ export default {
     },
   },
   methods: {
-      Button: function(e) {
-        this.$bvModal.show('modal')
-      }
   }
 }
 </script>