working WIP

vue/src/components/GenericHorizontalCard.vue

@@ -11,7 +11,7 @@
       @drop="handleDragDrop($event)">
       <b-row no-gutters style="height:inherit;">  
         <b-col no-gutters md="3" style="height:inherit;">
-          <b-card-img-lazy style="object-fit: cover; height: 10vh;" :src="model_image" v-bind:alt="text.image_alt"></b-card-img-lazy>
+          <b-card-img-lazy style="object-fit: cover; height: 10vh;" :src="model_image" v-bind:alt="$t('Recipe_Image')"></b-card-img-lazy>
         </b-col>
         <b-col no-gutters md="9" style="height:inherit;">
             <b-card-body class="m-0 py-0" style="height:inherit;">
@@ -35,7 +35,6 @@
         </b-col>
         <div class="card-img-overlay justify-content-right h-25 m-0 p-0 text-right">
           <slot name="upper-right"></slot>
-          
           <generic-context-menu  class="p-0"
             :show_merge="merge"
             :show_move="move"
@@ -74,7 +73,7 @@
         </div>
       </div>
     </div>
-    <!-- this should be made a generic component, would also require mixin for functions that generate the popup  and put in parent container-->  
+    <!-- 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:999; cursor:pointer">
       <b-list-group-item v-if="move" action v-on:click="$emit('item-action',{'action': 'move', 'target': model, 'source': source}); closeMenu()">
         {{$t('Move')}}: {{$t('move_confirmation', {'child': source.name,'parent':model.name})}}
@@ -92,6 +91,7 @@
 </template>
 
 <script>
+import {ApiApiFactory} from "@/utils/openapi/api.ts";
 import GenericContextMenu from "@/components/GenericContextMenu";
 import RecipeCard from "@/components/RecipeCard";
 import { mixin as clickaway } from 'vue-clickaway';
@@ -113,6 +113,7 @@ export default {
     recipes: {type: String, default: 'recipes'},
     merge: {type: Boolean, default: false},
     move: {type: Boolean, default: false},
+    tree: {type: Boolean, default: false},
   },
   data() {
     return {
@@ -124,7 +125,6 @@ export default {
       source: {'id': undefined, 'name': undefined},
       target: {'id': undefined, 'name': undefined},
       text: {
-          'image_alt': '',
           'hide_children': '',
       }
     }
@@ -132,8 +132,7 @@ export default {
   mounted() {
     this.model_image = this.model?.image ?? window.IMAGE_PLACEHOLDER
     this.dragMenu = this.$refs.tooltip
-    this.text.image_alt = this.$t(this.model_name + '_Image'),
-    this.hide_children = this.$t('Hide_' + this.model_name)
+    this.text.hide_children = this.$t('Hide_' + this.model_name)
   },
   methods: {
     emitAction: function(m) {
@@ -199,7 +198,39 @@ export default {
     },
     closeMenu: function(){
       this.show_menu = false
+    },
+    deleteObject: function(id, model, callback) {
+      let apiClient = new ApiApiFactory()
+      let promise = apiClient['destroy' + model](id).then(() => {
+      }).catch((err) => {
+        console.log(err)
+        this.makeToast(this.$t('Error'), err.bodyText, 'danger')
+      })
+      callback(promise)
+    },
+    async listObjects(model, options) {
+      let apiClient = new ApiApiFactory()
+      let query = options?.query ?? ''
+      let page = options?.page ?? 1
+      let root = options?.root ?? undefined
+      let tree = options?.tree ?? undefined
+      let pageSize = options?.pageSize ?? 25
+
+      if (this.tree) {
+        if (query === '') {
+          query = undefined
+          root = 0
+        }
+        await apiClient.listFoods(query, root, tree, page, pageSize).then((result) => {
+          return result
+        })
+      } else {
+        await apiClient.listFoods(query, page, pageSize).then((result) => {
+          return result
+        })
+      }
     }
+
   }
 }
 </script>