initial Vue components

vue/src/apps/FoodListView/FoodListView.vue

@@ -0,0 +1,614 @@
+<template>
+  <div id="app" style="margin-bottom: 4vh">
+
+    <div class="row">
+      <div class="col-md-2 d-none d-md-block">
+
+      </div>
+      <div class="col-xl-8 col-12">
+        <div class="container-fluid d-flex flex-column flex-grow-1" :class="{'vh-100' : show_split}">
+          <!-- expanded options box -->
+          <div class="row flex-shrink-0">
+            <div class="col col-md-12">
+              <b-collapse id="collapse_advanced" class="mt-2" v-model="advanced_visible">
+                <div class="card">
+                  <div class="card-body">
+                    <div class="row">
+                      <div class="col-md-3" style="margin-top: 1vh">
+                          <div class="btn btn-primary btn-block text-uppercase" @click="startAction({'action':'new'})">
+                            {{ this.$t('New_Food') }}
+                          </div>
+                      </div>
+
+                      <div class="col-md-3" style="margin-top: 1vh">
+                        <button class="btn btn-primary btn-block text-uppercase" @click="resetSearch">
+                          {{ this.$t('Reset_Search') }}
+                        </button>
+                      </div>
+                      <div class="col-md-3" style="position: relative; margin-top: 1vh">
+                        <b-form-checkbox v-model="show_split" name="check-button"
+                                        class="shadow-none"
+                                        style="position:relative;top: 50%;  transform: translateY(-50%);" switch>
+                          {{ this.$t('show_split_screen') }}
+                        </b-form-checkbox>
+                      </div>
+                    </div>
+
+                  </div>
+                </div>
+              </b-collapse>
+            </div>
+          </div>
+
+          <div class="row flex-shrink-0">
+            <!-- search box -->
+            <div class="col col-md">
+              <b-input-group class="mt-3">
+                <b-input class="form-control" v-model="search_input" 
+                        v-bind:placeholder="this.$t('Search')"></b-input>
+                <b-input-group-append>
+                  <b-button v-b-toggle.collapse_advanced variant="primary" class="shadow-none">
+                    <i class="fas fa-caret-down" v-if="!advanced_visible"></i>
+                    <i class="fas fa-caret-up"  v-if="advanced_visible"></i>
+                  </b-button>
+                </b-input-group-append>
+              </b-input-group>
+            </div>
+
+            <!-- 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_input2" 
+                        v-bind:placeholder="this.$t('Search')"></b-input>
+              </b-input-group>
+            </div>
+          </div>
+
+          <!-- only show scollbars in split mode, but this doesn't interact well with infinite scroll, maybe a different componenet? -->
+          <div class="row" :class="{'overflow-hidden' : show_split}" style="margin-top: 2vh">
+            <div class="col col-md" :class="{'mh-100 overflow-auto' : show_split}">
+              <food-card 
+                v-for="f in foods"
+                v-bind:key="f.id"
+                :food="f" 
+                :draggable="true"
+                @item-action="startAction($event, 'left')" 
+              ></food-card>
+              <infinite-loading
+                :identifier='left' 
+                @infinite="infiniteHandler($event, 'left')" 
+                spinner="waveDots">
+              </infinite-loading>
+            </div>
+            <!-- right side keyword cards -->
+            <div class="col col-md mh-100 overflow-auto " v-if="show_split">
+              <food-card 
+                v-for="f in foods2"
+                v-bind:key="f.id"
+                :food="f" 
+                draggable="true"
+                @item-action="startAction($event, 'right')"
+              ></food-card>
+              <infinite-loading  
+                :identifier='right' 
+                @infinite="infiniteHandler($event, 'right')" 
+                spinner="waveDots">
+              </infinite-loading>
+            </div>
+          </div>
+        </div>
+
+
+      </div>
+      <div class="col-md-2 d-none d-md-block">
+
+      </div>
+    </div>
+    
+    <!-- TODO Modals can probably be made generic and moved to component -->
+    <!-- edit modal -->
+    <b-modal class="modal" 
+      :id="'id_modal_keyword_edit'"
+      @shown="prepareEmoji"
+      :title="this.$t('Edit_Keyword')" 
+      :ok-title="this.$t('Save')"
+      :cancel-title="this.$t('Cancel')" 
+      @ok="saveKeyword">
+      <form>
+        <label for="id_keyword_name_edit">{{ this.$t('Name') }}</label>
+        <input class="form-control" type="text" id="id_keyword_name_edit" v-model="this_item.name">
+        <label for="id_keyword_description_edit">{{ this.$t('Description') }}</label>
+        <input class="form-control" type="text" id="id_keyword_description_edit" v-model="this_item.description">
+        <label for="id_keyword_icon_edit">{{ this.$t('Icon') }}</label>
+        <twemoji-textarea 
+          id="id_keyword_icon_edit"
+          ref="_edit"
+          :emojiData="emojiDataAll" 
+          :emojiGroups="emojiGroups"
+          triggerType="hover" 
+          recentEmojisFeat="true"
+          recentEmojisStorage="local"
+          @contentChanged="setIcon"
+           />
+      </form>
+    </b-modal>
+    <!-- delete modal -->
+    <b-modal class="modal" 
+      :id="'id_modal_keyword_delete'"
+      :title="this.$t('Delete_Keyword')" 
+      :ok-title="this.$t('Delete')"
+      :cancel-title="this.$t('Cancel')" 
+      @ok="delKeyword(this_item.id)">
+      {{this.$t("delete_confimation", {'kw': this_item.name})}} {{this_item.name}}
+    </b-modal>
+    <!-- move modal -->
+    <b-modal class="modal" 
+      :id="'id_modal_keyword_move'"
+      :title="this.$t('Move_Keyword')" 
+      :ok-title="this.$t('Move')"
+      :cancel-title="this.$t('Cancel')" 
+      @ok="moveKeyword(this_item.id, this_item.target.id)">
+      {{ this.$t("move_selection", {'child': this_item.name}) }}
+      <generic-multiselect 
+        @change="this_item.target=$event.val"
+        label="name"
+        search_function="listKeywords" 
+        :multiple="false"
+        :sticky_options="[{'id': 0,'name': $t('Root')}]"
+        :tree_api="true"
+        style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
+        :placeholder="this.$t('Search')">
+      </generic-multiselect>
+    </b-modal>
+    <!-- merge modal -->
+    <b-modal class="modal" 
+      :id="'id_modal_keyword_merge'"
+      :title="this.$t('Merge_Keyword')" 
+      :ok-title="this.$t('Merge')"
+      :cancel-title="this.$t('Cancel')" 
+      @ok="mergeKeyword(this_item.id, this_item.target.id)">
+      {{ this.$t("merge_selection", {'source': this_item.name, 'type': this.$t('keyword')}) }}
+      <generic-multiselect 
+        @change="this_item.target=$event.val"
+        label="name"
+        search_function="listKeywords" 
+        :multiple="false"
+        :tree_api="true"
+        style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
+        :placeholder="this.$t('Search')">
+      </generic-multiselect>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+
+import axios from "axios";
+axios.defaults.xsrfCookieName = 'csrftoken'
+axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
+
+import Vue from 'vue'
+import {BootstrapVue} from 'bootstrap-vue'
+
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+import _debounce from 'lodash/debounce'
+
+import {ResolveUrlMixin} from "@/utils/utils";
+
+import {ApiApiFactory} from "@/utils/openapi/api.ts";
+import FoodCard from "@/components/FoodCard";
+import GenericMultiselect from "@/components/GenericMultiselect";
+import InfiniteLoading from 'vue-infinite-loading';
+
+// would move with modals if made generic
+import {TwemojiTextarea} from '@kevinfaguiar/vue-twemoji-picker';
+// TODO add localization
+import EmojiAllData from '@kevinfaguiar/vue-twemoji-picker/emoji-data/en/emoji-all-groups.json';
+import EmojiGroups from '@kevinfaguiar/vue-twemoji-picker/emoji-data/emoji-groups.json';
+// end move with generic modals
+
+Vue.use(BootstrapVue)
+
+export default {
+  name: 'FoodListView',
+  mixins: [ResolveUrlMixin],
+  components: {TwemojiTextarea, FoodCard, GenericMultiselect, InfiniteLoading},
+  computed: {
+    // move with generic modals
+    emojiDataAll() {
+      return EmojiAllData;
+    },
+    emojiGroups() {
+      return EmojiGroups;
+    }
+    // end move with generic modals
+  },
+  data() {
+    return {
+      foods: [],
+      foods2: [],
+      show_split: false,
+      search_input: '',
+      search_input2: '',
+      advanced_visible: false,
+      right_page: 0,
+      right: +new Date(),
+      isDirtyRight: false,
+      left_page: 0,
+      left: +new Date(),
+      isDirtyLeft: false,
+      this_item: {
+        'id': -1,
+        'name': '',
+        'description': '',
+        'icon': '',
+        'target': {
+          'id': -1,
+          'name': ''
+        },
+      },
+    }
+  },
+  watch: {
+    search_input: _debounce(function() {
+      this.left_page = 0
+      this.foods = []
+      this.left += 1
+    }, 700),
+    search_input2: _debounce(function() {
+      this.right_page = 0
+      this.foods2 = []
+      this.right += 1
+    }, 700)
+  },
+  methods: {
+    makeToast: function (title, message, variant = null) {
+        //TODO remove duplicate function in favor of central one
+        this.$bvToast.toast(message, {
+            title: title,
+            variant: variant,
+            toaster: 'b-toaster-top-center',
+            solid: true
+        })
+    },
+    resetSearch: function () {
+      if (this.search_input !== '') {
+        this.search_input = ''
+      } else {
+        this.left_page = 0
+        this.foods =  []
+        this.left += 1
+      }
+      if (this.search_input2 !== '') {
+        this.search_input2 = ''
+      } else {
+        this.right_page = 0
+        this.foods2 = []
+        this.right += 1
+      }
+      
+    },
+    // TODO should model actions be included with the context menu?  the card? a seperate mixin avaible to all?
+    startAction: function(e, col) {
+      let target = e.target || null
+      let source = e.source || null
+
+      if (e.action == 'delete') {
+        this.this_item = source
+        this.$bvModal.show('id_modal_keyword_delete')
+      } else if (e.action == 'new') {
+        this.this_item = {}
+        this.$bvModal.show('id_modal_keyword_edit')
+      } else if (e.action  == 'edit') {
+        this.this_item = source
+        this.$bvModal.show('id_modal_keyword_edit')
+      } else if (e.action  === 'move') {
+        this.this_item = source
+        if (target == null) {
+          this.$bvModal.show('id_modal_keyword_move')
+        } else {
+          this.moveKeyword(source.id, target.id)
+        }
+      } else if (e.action  === 'merge') {
+        this.this_item = source
+        if (target == null) {
+          this.$bvModal.show('id_modal_keyword_merge')
+        } else {
+          this.mergeKeyword(e.source.id, e.target.id)
+        }
+      } else if (e.action === 'get-children') {
+        if (source.expanded) {
+          Vue.set(source, 'expanded', false)
+        } else {
+          this.this_item = source
+          this.getChildren(col, source)
+        }
+      } else if (e.action === 'get-recipes') {
+        if (source.show_recipes) {
+          Vue.set(source, 'show_recipes', false)
+        } else {
+          this.this_item = source
+          this.getRecipes(col, source)
+        }
+      }
+
+    },
+    saveFood: function () {
+      let apiClient = new ApiApiFactory()
+      let food = {
+        name: this.this_item.name,
+        description: this.this_item.description,
+        icon: this.this_item.icon,
+      }
+      if (!this.this_item.id) { // if there is no item id assume its a new item
+        apiClient.createFood(food).then(result => {
+          // place all new foods at the top of the list - could sort instead
+          this.foods = [result.data].concat(this.foods)
+          // this creates a deep copy to make sure that columns stay independent
+          if (this.show_split){
+            this.foods2 = [JSON.parse(JSON.stringify(result.data))].concat(this.foods2)
+          } else {
+            this.foods2 = []
+          }
+          this.this_item={}
+        }).catch((err) => {
+          console.log(err)
+          this.this_item = {}
+        })
+      } else {
+        apiClient.partialUpdateFood(this.this_item.id, food).then(result => {
+          this.refreshCard(this.this_item.id)
+          this.this_item={}
+        }).catch((err) => {
+          console.log(err)
+          this.this_item = {}
+        })
+      }
+    },
+    delFood: function (id) {
+      let apiClient = new ApiApiFactory()
+      
+      apiClient.destroyFood(id).then(response => {
+        this.destroyCard(id)
+      }).catch((err) => {
+        console.log(err)
+        this.this_item = {}
+      })
+      
+    },
+    moveFood: function (source_id, target_id) {
+      let apiClient = new ApiApiFactory()
+      apiClient.moveFood(String(source_id), String(target_id)).then(result => {
+        if (target_id === 0) {
+          let food = this.findFood(this.foods, source_id) || this.findFood(this.foods2, source_id)
+          food.parent = null
+
+          if (this.show_split){
+            this.destroyCard(source_id) // order matters, destroy old card before adding it back in at root
+            
+            this.foods = [food].concat(this.foods)
+            this.foods2 = [JSON.parse(JSON.stringify(food))].concat(this.foods2)
+          } else {
+            this.destroyCard(source_id)
+            this.foods = [food].concat(this.foods)
+            this.foods2 = []
+          }
+        } else {
+          this.destroyCard(source_id)
+          this.refreshCard(target_id)
+        }
+        
+      }).catch((err) => {
+        // TODO none of the error checking works because the openapi generated functions don't throw an error?  
+        // or i'm capturing it incorrectly
+        console.log(err)
+        this.makeToast(this.$t('Error'), err.bodyText, 'danger')
+      })
+    },
+    mergeFood: function (source_id, target_id) {
+      let apiClient = new ApiApiFactory()
+      apiClient.mergeFood(String(source_id), String(target_id)).then(result => {
+        this.destroyCard(source_id)
+        this.refreshCard(target_id)
+      }).catch((err) => {
+        console.log('Error', err)
+        this.makeToast(this.$t('Error'), err.bodyText, 'danger')
+      })
+    },
+    // TODO: DRY the listFood functions (refresh, get children, infinityHandler ) can probably all be consolidated into a single function
+    getChildren: function(col, food){
+      let apiClient = new ApiApiFactory()
+      let parent = {}
+      let query = undefined
+      let page = undefined
+      let root = food.id
+      let tree = undefined
+      let pageSize = 200
+
+      apiClient.listFoods(query, root, tree, page, pageSize).then(result => {
+        if (col == 'left') {
+          parent = this.findFood(this.keywords, food.id)
+        } else if (col == 'right'){
+          parent = this.findFood(this.keywords2, food.id)
+        }
+        if (parent) {
+          Vue.set(parent, 'children', result.data.results)
+          Vue.set(parent, 'expanded', true)
+          Vue.set(parent, 'show_recipes', false)
+        }
+        
+      }).catch((err) => {
+        console.log(err)
+        this.makeToast(this.$t('Error'), err.bodyText, 'danger')
+      })
+    },
+    getRecipes: function(col, food){
+      let apiClient = new ApiApiFactory()
+      let parent = {}
+      let pageSize = 200
+      console.log(apiClient.listRecipes)
+
+      apiClient.listRecipes(
+          undefined, undefined, String(food.id), undefined, undefined, undefined,
+          undefined, undefined, undefined, undefined, undefined, pageSize, undefined
+        ).then(result => {
+        if (col == 'left') {
+          parent = this.findFood(this.foods, food.id)
+        } else if (col == 'right'){
+          parent = this.findFood(this.foods2, food.id)
+        }
+        if (parent) {
+          Vue.set(parent, 'recipes', result.data.results)
+          Vue.set(parent, 'show_recipes', true)
+          Vue.set(parent, 'expanded', false)
+        }
+        
+      }).catch((err) => {
+        console.log(err)
+        this.makeToast(this.$t('Error'), err.bodyText, 'danger')
+      })
+    },
+    refreshCard: function(id){
+      let target = {}
+      let apiClient = new ApiApiFactory()
+      let idx = undefined
+      let idx2 = undefined
+      apiClient.retrieveFood(id).then(result => {
+        target = this.findFood(this.foods, id) || this.findFood(this.foods2, id)
+        
+        if (target.parent) {
+          let parent = this.findFood(this.foods, target.parent)
+          let parent2 = this.findFood(this.foods2, target.parent)
+
+          if (parent) {
+            if (parent.expanded){
+              idx = parent.children.indexOf(parent.children.find(kw => kw.id === target.id))
+              Vue.set(parent.children, idx, result.data)
+            }
+          }
+          if (parent2){
+            if (parent2.expanded){
+              idx2 = parent2.children.indexOf(parent2.children.find(kw => kw.id === target.id))
+              // deep copy to force columns to be indepedent
+              Vue.set(parent2.children, idx2, JSON.parse(JSON.stringify(result.data)))
+            }
+          }
+        } else {
+          idx = this.foods.indexOf(this.foods.find(food => food.id === target.id))
+          idx2 = this.foods2.indexOf(this.foods2.find(food => food.id === target.id))
+          Vue.set(this.foods, idx, result.data)
+          Vue.set(this.foods2, idx2, JSON.parse(JSON.stringify(result.data)))
+        }
+        
+      })
+    },
+    findFood: function(food_list, id){
+      if (food_list.length == 0) {
+        return false
+      }
+      let food = food_list.filter(fd => fd.id == id)
+      if (food.length == 1) {
+        return food[0]
+      } else if (food.length == 0) {
+        for (const f of food_list.filter(fd => fd.expanded == true)) {
+          food = this.findFood(f.children, id)
+          if (food) {
+            return food
+          }
+        }
+        
+      } else {
+        console.log('something terrible happened')
+      }
+    },
+    // this would move with modals with mixin?
+    prepareEmoji: function() {
+      this.$refs._edit.addText(this.this_item.icon || ''); 
+      this.$refs._edit.blur()
+      document.getElementById('btn-emoji-default').disabled = true;
+    },
+    // this would move with modals with mixin?
+    setIcon: function(icon) {
+      this.this_item.icon = icon
+    },
+    infiniteHandler: function($state, col) {
+      let apiClient = new ApiApiFactory()
+      let query = (col==='left') ? this.search_input : this.search_input2
+      let page = (col==='left') ? this.left_page + 1 : this.right_page + 1 
+      let root = undefined
+      let tree = undefined
+      let pageSize = undefined
+
+      if (query === '') {
+        query = undefined
+        root = 0
+      }
+
+      apiClient.listFoods(query, root, tree, page, pageSize).then(result => {
+        if (result.data.results.length){
+          if (col ==='left') {
+            this.left_page+=1
+            this.foods = this.foods.concat(result.data.results)
+            $state.loaded();
+            if (this.foods.length >= result.data.count) {
+              $state.complete();
+            }
+          } else if (col ==='right') {
+            this.right_page+=1
+            this.foods2 = this.foods2.concat(result.data.results)
+            $state.loaded();
+            if (this.foods2.length >= result.data.count) {
+              $state.complete();
+            }
+          }
+        } else {
+          console.log('no data returned')
+          $state.complete();
+        }
+      }).catch((err) => {
+        console.log(err)
+        this.makeToast(this.$t('Error'), err.bodyText, 'danger')
+        $state.complete();
+      })
+    },
+    destroyCard: function(id) {
+      let fd = this.findFood(this.foods, id)
+      let fd2 = this.findFood(this.foods2, id)
+      let p_id = undefined
+      if (fd) {
+        p_id = fd.parent
+      } else if (fd2) {
+        p_id = fd2.parent
+      }
+
+      if (p_id) {
+        let parent = this.findFood(this.foods, p_id)
+        let parent2 = this.findFood(this.v2, p_id)
+        if (parent){
+          Vue.set(parent, 'numchild', parent.numchild - 1)
+          if (parent.expanded) {
+            let idx = parent.children.indexOf(parent.children.find(kw => kw.id === id))
+            Vue.delete(parent.children, idx)
+          }
+        }
+        if (parent2){
+          Vue.set(parent2, 'numchild', parent2.numchild - 1)
+          if (parent2.expanded) {
+            let idx = parent2.children.indexOf(parent2.children.find(kw => kw.id === id))
+            Vue.delete(parent2.children, idx)
+          }
+        }
+      }
+      this.foods = this.foods.filter(kw => kw.id != id)
+      this.foods2 = this.foods2.filter(kw => kw.id != id)
+    }
+  }
+}
+
+</script>
+
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
+
+<style>
+
+</style>

vue/src/apps/FoodListView/main.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './FoodListView'
+import i18n from '@/i18n'
+
+Vue.config.productionTip = false
+
+new Vue({
+    i18n,
+    render: h => h(App),
+}).$mount('#app')

vue/src/apps/KeywordListView/KeywordListView.vue

@@ -368,7 +368,6 @@ export default {
     },
     delKeyword: function (id) {
       let apiClient = new ApiApiFactory()
-      let p_id = null
       
       apiClient.destroyKeyword(id).then(response => {
         this.destroyCard(id)

vue/src/apps/RecipeSearchView/RecipeSearchView.vue

@@ -159,11 +159,15 @@
                   <div class="row">
                     <div class="col-12">
                       <b-input-group class="mt-2">
-                        <generic-multiselect @change="genericSelectChanged" parent_variable="search_foods"
+                        <!-- <generic-multiselect @change="genericSelectChanged" parent_variable="search_foods"
                                              :initial_selection="settings.search_foods"
                                              search_function="listFoods" label="name"
                                              style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
-                                             v-bind:placeholder="$t('Ingredients')" :limit="20"></generic-multiselect>
+                                             v-bind:placeholder="$t('Ingredients')"></generic-multiselect> -->
+                        <treeselect v-model="settings.search_foods" :options="facets.Foods" :flat="true"
+                                    searchNested multiple :placeholder="$t('Ingredients')"  :normalizer="normalizer"
+                                    @input="refreshData(false)"
+                                    style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"/>
                         <b-input-group-append>
                           <b-input-group-text>
                             <b-form-checkbox v-model="settings.search_foods_or" name="check-button"
@@ -376,9 +380,7 @@ export default {
       apiClient.listRecipes(
           this.settings.search_input,
           this.settings.search_keywords,
-          this.settings.search_foods.map(function (A) {
-            return A["id"];
-          }),
+          this.settings.search_foods,
           this.settings.search_books.map(function (A) {
             return A["id"];
           }),

vue/src/components/FoodCard.vue

@@ -0,0 +1,215 @@
+<template>
+  <div row>
+    <b-card no-body d-flex flex-column :class="{'border border-primary' : over, 'shake': isError}"
+      refs="foodCard" 
+      style="height: 10vh;" :style="{'cursor:grab' : draggable}"
+      @dragover.prevent
+      @dragenter.prevent
+      :draggable="draggable"
+      @dragstart="handleDragStart($event)"
+      @dragenter="handleDragEnter($event)"
+      @dragleave="handleDragLeave($event)"
+      @drop="handleDragDrop($event)">
+      <b-row no-gutters style="height:inherit;">  
+        <b-col no-gutters md="3" style="justify-content: center; height:inherit;">
+          <b-card-img-lazy style="object-fit: cover; height: 10vh;" :src="food_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;">
+              <b-card-text class=" h-100 my-0 d-flex flex-column" style="text-overflow: ellipsis">
+                    <h5 class="m-0 mt-1 text-truncate">{{ food.name }}</h5>
+                    <div class= "m-0 text-truncate">{{ food.description }}</div>
+                    <div class="mt-auto mb-1 d-flex flex-row justify-content-end">
+                      <div v-if="food.numchild !=0" class="mx-2 btn btn-link btn-sm" 
+                        style="z-index: 800;" v-on:click="$emit('item-action',{'action':'get-children','source':food})">
+                          <div v-if="!food.expanded">{{food.numchild}} {{$t('Foods')}}</div>
+                          <div v-else>{{$t('Hide Foods')}}</div>
+                      </div>
+                      <div class="mx-2 btn btn-link btn-sm" style="z-index: 800;"
+                        v-on:click="$emit('item-action',{'action':'get-recipes','source':food})">
+                        <div v-if="!food.show_recipes">{{food.numrecipe}} {{$t('Recipes')}}</div>
+                        <div v-else>{{$t('Hide Recipes')}}</div>
+                      </div>
+                    </div>
+              </b-card-text>
+            </b-card-body>
+        </b-col>
+        <div class="card-img-overlay h-100 d-flex flex-column justify-content-right"
+              style="float:right; text-align: right; padding-top: 10px; padding-right: 5px">
+          <generic-context-menu style="float:right" 
+            :show_merge="true"
+            :show_move="true"
+            @item-action="$emit('item-action', {'action': $event, 'source': food})">
+          </generic-context-menu>
+        </div>
+      </b-row> 
+    </b-card>
+    <!-- recursively add child foods -->
+    <div class="row" v-if="food.expanded">
+      <div class="col-md-11 offset-md-1">
+        <food-card v-for="child in food.children" 
+          :food="child"
+          v-bind:key="child.id"
+          draggable="true"
+          @item-action="$emit('item-action', $event)">
+        </food-card>
+      </div>
+    </div>
+    <!-- conditionally view recipes -->
+    <div class="row" v-if="food.show_recipes">
+      <div class="col-md-11 offset-md-1">
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 1rem;">
+          <recipe-card v-for="r in food.recipes" 
+            v-bind:key="r.id"
+            :recipe="r">
+          </recipe-card>
+        </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-->  
+    <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 action v-on:click="$emit('item-action',{'action': 'move', 'target': food, 'source': source}); closeMenu()">
+        {{$t('Move')}}: {{$t('move_confirmation', {'child': source.name,'parent':food.name})}}
+      </b-list-group-item>
+      <b-list-group-item action v-on:click="$emit('item-action',{'action': 'merge', 'target': food, 'source': source}); closeMenu()">
+        {{$t('Merge')}}: {{ $t('merge_confirmation', {'source': source.name,'target':food.name}) }}
+      </b-list-group-item>
+      <b-list-group-item action v-on:click="closeMenu()">
+        {{$t('Cancel')}}
+      </b-list-group-item>
+      <!-- TODO add to shopping list -->
+      <!-- TODO add to and/or manage pantry -->
+    </b-list-group>
+  </div>
+</template>
+
+<script>
+import GenericContextMenu from "@/components/GenericContextMenu";
+import RecipeCard from "@/components/RecipeCard";
+import { mixin as clickaway } from 'vue-clickaway';
+import { createPopper } from '@popperjs/core';
+
+export default {
+  name: "FoodCard",
+  components: { GenericContextMenu, RecipeCard },
+  mixins: [clickaway],
+  props: {
+    food: Object,
+    draggable: {type: Boolean, default: false}
+  },
+  data() {
+    return {
+      food_image: '',
+      over: false,
+      show_menu: false,
+      dragMenu: undefined,
+      isError: false,
+      source: {},
+      target: {}
+    }
+  },
+  mounted() {
+    if (this.food == null || this.food.image == null) {
+      this.food_image = window.IMAGE_PLACEHOLDER
+    } else {
+      this.food_image = this.food.image
+    }
+    this.dragMenu = this.$refs.tooltip
+  },
+  methods: {
+    handleDragStart: function(e) {
+      this.isError = false
+      e.dataTransfer.setData('source', JSON.stringify(this.food))
+    },
+    handleDragEnter: function(e) {
+      if (!e.currentTarget.contains(e.relatedTarget) && e.relatedTarget != null) {
+        this.over = true
+      }
+    },
+    handleDragLeave: function(e) {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        this.over = false
+      }
+    },
+    handleDragDrop: function(e) {
+      let source = JSON.parse(e.dataTransfer.getData('source'))
+      if (source.id != this.food.id){
+        this.source = source
+        let menuLocation = {getBoundingClientRect: this.generateLocation(e.pageX, e.pageY),}
+        this.show_menu = true
+        let popper = createPopper(
+          menuLocation, 
+          this.dragMenu, 
+          {
+            placement: 'bottom-start',
+            modifiers: [
+                {
+                  name: 'preventOverflow',
+                  options: {
+                    rootBoundary: 'document',
+                  },
+                },
+                {
+                  name: 'flip',
+                  options: {
+                    fallbackPlacements: ['bottom-end', 'top-start', 'top-end', 'left-start', 'right-start'],
+                    rootBoundary: 'document',
+                  },
+                },
+            ],
+        })
+        popper.update()
+        this.over = false
+        this.$emit({'action': 'drop', 'target': this.food, 'source': this.source})
+      } else {
+        this.isError = true
+      }
+    },
+    generateLocation: function (x = 0, y = 0) {
+      return () => ({
+        width: 0,
+        height: 0,
+        top: y,
+        right: x,
+        bottom: y,
+        left: x,
+      });
+    },
+    closeMenu: function(){
+      this.show_menu = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.shake {
+  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+@keyframes shake {
+  10%,
+  90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+
+  20%,
+  80% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  30%,
+  50%,
+  70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  40%,
+  60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
+</style>