Fix after rebase

vue/src/components/ContextMenu/ContextMenu.vue

@@ -1,127 +1,118 @@
 <template>
-  <div
-      class="context-menu"
-      ref="popper"
-      v-show="isVisible"
-      tabindex="-1"
-      v-click-outside="close"
-      @contextmenu.capture.prevent>
-    <ul class="dropdown-menu" role="menu">
-      <slot :contextData="contextData" name="menu"/>
-    </ul>
-  </div>
+    <div class="context-menu" ref="popper" v-show="isVisible" tabindex="-1" v-click-outside="close" @contextmenu.capture.prevent>
+        <ul class="dropdown-menu" role="menu">
+            <slot :contextData="contextData" name="menu" />
+        </ul>
+    </div>
 </template>
 <script>
-import Popper from 'popper.js';
+import Popper from "popper.js"
 
 Popper.Defaults.modifiers.computeStyle.gpuAcceleration = false
-import ClickOutside from 'vue-click-outside'
+import ClickOutside from "vue-click-outside"
 
 export default {
-  name: "ContextMenu.vue",
-  props: {
-    boundariesElement: {
-      type: String,
-      default: 'body',
-    },
-  },
-  components: {},
-  data() {
-    return {
-      opened: false,
-      contextData: {},
-    };
-  },
-  directives: {
-    ClickOutside,
-  },
-  computed: {
-    isVisible() {
-      return this.opened;
-    },
-  },
-  methods: {
-    open(evt, contextData) {
-      this.opened = true;
-      this.contextData = contextData;
-
-      if (this.popper) {
-        this.popper.destroy();
-      }
-
-      this.popper = new Popper(this.referenceObject(evt), this.$refs.popper, {
-        placement: 'right-start',
-        modifiers: {
-          preventOverflow: {
-            boundariesElement: document.querySelector(this.boundariesElement),
-          },
+    name: "ContextMenu.vue",
+    props: {
+        boundariesElement: {
+            type: String,
+            default: "body",
         },
-      });
-      this.$nextTick(() => {
-        this.popper.scheduleUpdate();
-      });
-
     },
-    close() {
-      this.opened = false;
-      this.contextData = null;
-    },
-    referenceObject(evt) {
-      const left = evt.clientX;
-      const top = evt.clientY;
-      const right = left + 1;
-      const bottom = top + 1;
-      const clientWidth = 1;
-      const clientHeight = 1;
-
-      function getBoundingClientRect() {
+    components: {},
+    data() {
         return {
-          left,
-          top,
-          right,
-          bottom,
-        };
-      }
-
-      const obj = {
-        getBoundingClientRect,
-        clientWidth,
-        clientHeight,
-      };
-      return obj;
+            opened: false,
+            contextData: {},
+        }
     },
-  },
-  beforeUnmount() {
-    if (this.popper !== undefined) {
-      this.popper.destroy();
-    }
-  },
-};
+    directives: {
+        ClickOutside,
+    },
+    computed: {
+        isVisible() {
+            return this.opened
+        },
+    },
+    methods: {
+        open(evt, contextData) {
+            this.opened = true
+            this.contextData = contextData
 
+            if (this.popper) {
+                this.popper.destroy()
+            }
+
+            this.popper = new Popper(this.referenceObject(evt), this.$refs.popper, {
+                placement: "right-start",
+                modifiers: {
+                    preventOverflow: {
+                        boundariesElement: document.querySelector(this.boundariesElement),
+                    },
+                },
+            })
+            this.$nextTick(() => {
+                this.popper.scheduleUpdate()
+            })
+        },
+        close() {
+            this.opened = false
+            this.contextData = null
+        },
+        referenceObject(evt) {
+            const left = evt.clientX
+            const top = evt.clientY
+            const right = left + 1
+            const bottom = top + 1
+            const clientWidth = 1
+            const clientHeight = 1
+
+            function getBoundingClientRect() {
+                return {
+                    left,
+                    top,
+                    right,
+                    bottom,
+                }
+            }
+
+            const obj = {
+                getBoundingClientRect,
+                clientWidth,
+                clientHeight,
+            }
+            return obj
+        },
+    },
+    beforeUnmount() {
+        if (this.popper !== undefined) {
+            this.popper.destroy()
+        }
+    },
+}
 </script>
 
 <style scoped>
 .context-menu {
-  position: fixed;
-  z-index: 999;
-  overflow: hidden;
-  background: #fff;
-  border-radius: 4px;
-  box-shadow: 0 1px 4px 0 #eee;
+    position: fixed;
+    z-index: 999;
+    overflow: hidden;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0 1px 4px 0 #eee;
 }
 
 .context-menu:focus {
-  outline: none;
+    outline: none;
 }
 
 .context-menu ul {
-  padding: 0px;
-  margin: 0px;
+    padding: 0px;
+    margin: 0px;
 }
 
 .dropdown-menu {
-  display: block;
-  position: relative;
+    display: block;
+    position: relative;
 }
-
 </style>

vue/src/components/ContextMenu/ContextMenuItem.vue

@@ -1,16 +1,13 @@
 <template>
-  <li @click="$emit('click', $event)" role="presentation">
-    <slot/>
-  </li>
+    <li @click="$emit('click', $event)" role="presentation">
+        <slot />
+    </li>
 </template>
 
 <script>
 export default {
-  name: "ContextMenuItem.vue",
+    name: "ContextMenuItem.vue",
 }
 </script>
 
-<style scoped>
-
-</style>
-
+<style scoped></style>

vue/src/components/ContextMenu/ContextMenuSubmenu.vue

@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <div style="position: static;" class=" btn-group">
+            <div class="dropdown b-dropdown position-static">
+                <li @click="$refs.submenu.open($event)" role="presentation" class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret">
+                    <slot />
+                </li>
+            </div>
+        </div>
+        <ContextMenu ref="submenu">
+            <template #menu="{ contextData }">
+                <ContextMenuItem
+                    @click="
+                        $refs.menu.close()
+                        moveEntry(contextData)
+                    "
+                >
+                    <a class="dropdown-item p-2" href="#"><i class="fas fa-cubes"></i> submenu item</a>
+                </ContextMenuItem>
+            </template>
+        </ContextMenu>
+    </div>
+</template>
+
+<script>
+import ContextMenu from "@/components/ContextMenu/ContextMenu"
+import ContextMenuItem from "@/components/ContextMenu/ContextMenuItem"
+export default {
+    name: "ContextSubmenu.vue",
+    components: { ContextMenu, ContextMenuItem },
+}
+</script>
+
+<style scoped></style>

vue/src/components/ContextMenu/GenericContextMenu.vue

@@ -0,0 +1,42 @@
+<template>
+  <span>
+    <b-dropdown variant="link" toggle-class="text-decoration-none" right  no-caret style="boundary:window">
+      <template #button-content>
+          <i class="fas fa-ellipsis-v" ></i>
+      </template>
+      <b-dropdown-item v-on:click="$emit('item-action', 'edit')" v-if="show_edit">
+        <i class="fas fa-pencil-alt fa-fw"></i> {{ $t('Edit') }}
+      </b-dropdown-item>
+      
+      <b-dropdown-item v-on:click="$emit('item-action', 'delete')" v-if="show_delete">
+        <i class="fas fa-trash-alt fa-fw"></i> {{ $t('Delete') }}
+      </b-dropdown-item>
+
+      <b-dropdown-item v-on:click="$emit('item-action', 'move')" v-if="show_move">
+        <i class="fas fa-expand-arrows-alt fa-fw"></i> {{ $t('Move') }}
+      </b-dropdown-item>
+      
+      <b-dropdown-item v-if="show_merge" v-on:click="$emit('item-action', 'merge')">
+        <i class="fas fa-compress-arrows-alt fa-fw"></i> {{ $t('Merge') }}
+      </b-dropdown-item>
+
+      <b-dropdown-item v-if="show_merge" v-on:click="$emit('item-action', 'merge-automate')">
+        <i class="fas fa-robot fa-fw"></i> {{$t('Merge')}} & {{$t('Automate')}} <b-badge v-b-tooltip.hover :title="$t('warning_feature_beta')">BETA</b-badge>
+      </b-dropdown-item>
+
+    </b-dropdown>
+  </span>
+</template>
+
+<script>
+
+export default {
+  name: 'GenericContextMenu',
+  props: {
+    show_edit: {type: Boolean, default: true},
+    show_delete: {type: Boolean, default: true},
+    show_move: {type: Boolean, default: false},
+    show_merge: {type: Boolean, default: false},
+  }
+}
+</script>

vue/src/components/ContextMenu/ModelMenu.vue

@@ -0,0 +1,74 @@
+<template>
+  <!-- <b-button variant="link" size="sm" class="text-dark shadow-none"><i class="fas fa-chevron-down"></i></b-button> -->
+  <span>
+        <b-dropdown variant="link" toggle-class="text-decoration-none text-dark shadow-none" no-caret
+                    style="boundary:window">
+        <template #button-content>
+          <i class="fas fa-chevron-down"></i>
+        </template>
+        <b-dropdown-item :href="resolveDjangoUrl('list_food')">
+            <i class="fas fa-leaf fa-fw"></i> {{ Models['FOOD'].name }}
+        </b-dropdown-item>
+        
+        <b-dropdown-item :href="resolveDjangoUrl('list_keyword')">
+            <i class="fas fa-tags fa-fw"></i> {{ Models['KEYWORD'].name }}
+        </b-dropdown-item>
+
+        <b-dropdown-item :href="resolveDjangoUrl('list_unit')">
+            <i class="fas fa-balance-scale fa-fw"></i> {{ Models['UNIT'].name }}
+        </b-dropdown-item>
+        
+        <b-dropdown-item :href="resolveDjangoUrl('list_supermarket')">
+            <i class="fas fa-store-alt fa-fw"></i> {{ Models['SUPERMARKET'].name }}
+        </b-dropdown-item>
+
+        <b-dropdown-item :href="resolveDjangoUrl('list_supermarket_category')">
+            <i class="fas fa-cubes fa-fw"></i> {{ Models['SHOPPING_CATEGORY'].name }}
+        </b-dropdown-item>
+
+          <b-dropdown-item :href="resolveDjangoUrl('list_automation')">
+            <i class="fas fa-robot fa-fw"></i> {{ Models['AUTOMATION'].name }}
+          </b-dropdown-item>
+
+          <b-dropdown-item :href="resolveDjangoUrl('list_user_file')">
+            <i class="fas fa-file fa-fw"></i> {{ Models['USERFILE'].name }}
+          </b-dropdown-item>
+
+          <b-dropdown-item :href="resolveDjangoUrl('list_step')">
+            <i class="fas fa-puzzle-piece fa-fw"></i>{{ Models['STEP'].name }}
+          </b-dropdown-item>
+
+        </b-dropdown>
+    </span>
+</template>
+
+<script>
+
+import Vue from 'vue'
+import {BootstrapVue} from 'bootstrap-vue'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+import {Models} from "@/utils/models";
+import {ResolveUrlMixin} from "@/utils/utils";
+
+
+Vue.use(BootstrapVue)
+
+export default {
+  name: 'ModelMenu',
+  mixins: [ResolveUrlMixin],
+  data() {
+    return {
+      Models: Models
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    gotoURL: function (model) {
+      return
+    }
+  }
+}
+
+</script>

vue/src/components/ContextMenu/RecipeContextMenu.vue

@@ -0,0 +1,193 @@
+<template>
+  <div>
+
+    <div class="dropdown d-print-none">
+      <a class="btn shadow-none" href="javascript:void(0);" role="button" id="dropdownMenuLink"
+         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <i class="fas fa-ellipsis-v fa-lg"></i>
+      </a>
+
+      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
+
+        <a class="dropdown-item" :href="resolveDjangoUrl('edit_recipe', recipe.id)"><i
+            class="fas fa-pencil-alt fa-fw"></i> {{ $t('Edit') }}</a>
+
+        <a class="dropdown-item" :href="resolveDjangoUrl('edit_convert_recipe', recipe.id)" v-if="!recipe.internal"><i
+            class="fas fa-exchange-alt fa-fw"></i> {{ $t('convert_internal') }}</a>
+
+        <a href="javascript:void(0);">
+          <button class="dropdown-item" @click="$bvModal.show(`id_modal_add_book_${modal_id}`)">
+            <i class="fas fa-bookmark fa-fw"></i> {{ $t('Manage_Books') }}
+          </button>
+        </a>
+
+        <a class="dropdown-item" :href="`${resolveDjangoUrl('view_shopping') }?r=[${recipe.id},${servings_value}]`"
+           v-if="recipe.internal" target="_blank" rel="noopener noreferrer">
+          <i class="fas fa-shopping-cart fa-fw"></i> {{ $t('Add_to_Shopping') }}
+        </a>
+
+        <a class="dropdown-item" v-if="recipe.internal" @click="addToShopping" href="#">
+          <i class="fas fa-shopping-cart fa-fw"></i> New {{ $t('Add_to_Shopping') }}
+        </a>
+
+        <a class="dropdown-item" @click="createMealPlan" href="#"><i
+            class="fas fa-calendar fa-fw"></i> {{ $t('Add_to_Plan') }}
+        </a>
+
+        <a href="javascript:void(0);">
+          <button class="dropdown-item" @click="$bvModal.show(`id_modal_cook_log_${modal_id}`)"><i
+              class="fas fa-clipboard-list fa-fw"></i> {{ $t('Log_Cooking') }}
+          </button>
+        </a>
+
+        <a href="javascript:void(0);">
+          <button class="dropdown-item" onclick="window.print()"><i
+              class="fas fa-print fa-fw"></i> {{ $t('Print') }}
+          </button>
+        </a>
+
+        <a class="dropdown-item" :href="resolveDjangoUrl('view_export') + '?r=' + recipe.id" target="_blank"
+           rel="noopener noreferrer"><i class="fas fa-file-export fa-fw"></i> {{ $t('Export') }}</a>
+
+        <a href="javascript:void(0);">
+          <button class="dropdown-item" @click="createShareLink()" v-if="recipe.internal"><i
+              class="fas fa-share-alt fa-fw"></i> {{ $t('Share') }}
+          </button>
+        </a>
+      </div>
+
+
+    </div>
+
+    <cook-log :recipe="recipe" :modal_id="modal_id"></cook-log>
+    <add-recipe-to-book :recipe="recipe" :modal_id="modal_id"></add-recipe-to-book>
+
+    <b-modal :id="`modal-share-link_${modal_id}`" v-bind:title="$t('Share')" hide-footer>
+      <div class="row">
+        <div class="col col-md-12">
+          <label v-if="recipe_share_link !== undefined">{{ $t('Public share link') }}</label>
+          <input ref="share_link_ref" class="form-control" v-model="recipe_share_link"/>
+          <b-button class="mt-2 mb-3 d-none d-md-inline" variant="secondary"
+                    @click="$bvModal.hide(`modal-share-link_${modal_id}`)">{{ $t('Close') }}
+          </b-button>
+          <b-button class="mt-2 mb-3 ml-md-2" variant="primary" @click="copyShareLink()">{{ $t('Copy') }}</b-button>
+          <b-button class="mt-2 mb-3 ml-2 float-right" variant="success" @click="shareIntend()">{{ $t('Share') }} <i
+              class="fa fa-share-alt"></i></b-button>
+        </div>
+      </div>
+    </b-modal>
+
+    <meal-plan-edit-modal :entry="entryEditing" :entryEditing_initial_recipe="[recipe]"
+                          :entry-editing_initial_meal_type="[]" @save-entry="saveMealPlan"
+                          :modal_id="`modal-meal-plan_${modal_id}`" :allow_delete="false" :modal_title="$t('Create_Meal_Plan_Entry')"></meal-plan-edit-modal>
+    <shopping-modal :recipe="recipe" :servings="servings_value" :modal_id="modal_id"/>
+  </div>
+</template>
+
+<script>
+
+import {makeToast, resolveDjangoUrl, ResolveUrlMixin, StandardToasts} from "@/utils/utils";
+import CookLog from "@/components/CookLog";
+import axios from "axios";
+import AddRecipeToBook from "@/components/Modals/AddRecipeToBook";
+import MealPlanEditModal from "@/components/Modals/MealPlanEditModal";
+import ShoppingModal from "@/components/Modals/ShoppingModal";
+import moment from "moment";
+import Vue from "vue";
+import {ApiApiFactory} from "@/utils/openapi/api";
+
+Vue.prototype.moment = moment
+
+export default {
+  name: 'RecipeContextMenu',
+  mixins: [
+    ResolveUrlMixin
+  ],
+  components: {
+    AddRecipeToBook,
+    CookLog,
+    MealPlanEditModal,
+    ShoppingModal
+  },
+  data() {
+    return {
+      servings_value: 0,
+      recipe_share_link: undefined,
+      modal_id: this.recipe.id + Math.round(Math.random() * 100000),
+      options: {
+        entryEditing: {
+          date: null,
+          id: -1,
+          meal_type: null,
+          note: "",
+          note_markdown: "",
+          recipe: null,
+          servings: 1,
+          shared: [],
+          title: '',
+          title_placeholder: this.$t('Title'),
+        }
+      },
+      entryEditing: {},
+    }
+  },
+  props: {
+    recipe: Object,
+    servings: {
+      type: Number,
+      default: -1
+    }
+  },
+  mounted() {
+    this.servings_value = ((this.servings === -1) ? this.recipe.servings : this.servings)
+  },
+  methods: {
+    saveMealPlan: function (entry) {
+      entry.date = moment(entry.date).format("YYYY-MM-DD")
+
+      let apiClient = new ApiApiFactory()
+
+      apiClient.createMealPlan(entry).then(result => {
+        this.$bvModal.hide(`modal-meal-plan_${this.modal_id}`)
+        StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
+      }).catch(error => {
+        StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
+      })
+    },
+    createMealPlan(data) {
+      this.entryEditing = this.options.entryEditing
+      this.entryEditing.recipe = this.recipe
+      this.entryEditing.date = moment(new Date()).format('YYYY-MM-DD')
+      this.$bvModal.show(`modal-meal-plan_${this.modal_id}`)
+    },
+    createShareLink: function () {
+      axios.get(resolveDjangoUrl('api_share_link', this.recipe.id)).then(result => {
+        this.$bvModal.show(`modal-share-link_${this.modal_id}`)
+        this.recipe_share_link = result.data.link
+      }).catch(err => {
+
+        if (err.response.status === 403) {
+          makeToast(this.$t('Share'), this.$t('Sharing is not enabled for this space.'), 'danger')
+        }
+      })
+
+    },
+    copyShareLink: function () {
+      let share_input = this.$refs.share_link_ref;
+      share_input.select();
+      document.execCommand("copy");
+    },
+    shareIntend: function () {
+      let shareData = {
+        title: this.recipe.name,
+        text: `${this.$t('Check out this recipe: ')} ${this.recipe.name}`,
+        url: this.recipe_share_link
+      }
+      navigator.share(shareData)
+    },
+    addToShopping() {
+      this.$bvModal.show(`shopping_${this.modal_id}`)
+    },
+  }
+}
+</script>