Feature/import export single recipe (#576)

* remove duplicate keys

* show context menu when not logged in

* remove console.log

* hide menu when printing

* add response to event

* add type definitions

* show context menu always

* add image name enums

* upload/download single recipe

* cleanup menu views+ localization

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/components/Recipe/ContextMenu.vue

@@ -18,6 +18,7 @@
       allow-overflow
       close-delay="125"
       open-on-hover
+      content-class="d-print-none"
     >
       <template v-slot:activator="{ on, attrs }">
         <v-btn :fab="fab" :small="fab" :color="color" :icon="!fab" dark v-bind="attrs" v-on="on" @click.prevent>
@@ -25,11 +26,7 @@
         </v-btn>
       </template>
       <v-list dense>
-        <v-list-item
-          v-for="(item, index) in loggedIn && cardMenu ? userMenu : defaultMenu"
-          :key="index"
-          @click="menuAction(item.action)"
-        >
+        <v-list-item v-for="(item, index) in displayedMenu" :key="index" @click="menuAction(item.action)">
           <v-list-item-icon>
             <v-icon v-text="item.icon" :color="item.color"></v-icon>
           </v-list-item-icon>
@@ -53,6 +50,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    showPrint: {
+      type: Boolean,
+      default: false,
+    },
     fab: {
       type: Boolean,
       default: false,
@@ -88,20 +89,28 @@ export default {
     recipeURL() {
       return `${this.baseURL}/recipe/${this.slug}`;
     },
+    printerMenu() {
+      return {
+        title: this.$t("general.print"),
+        icon: this.$globals.icons.printer,
+        color: "accent",
+        action: "print",
+      };
+    },
     defaultMenu() {
       return [
-        {
-          title: this.$t("general.print"),
-          icon: this.$globals.icons.printer,
-          color: "accent",
-          action: "print",
-        },
         {
           title: this.$t("general.share"),
           icon: this.$globals.icons.shareVariant,
           color: "accent",
           action: "share",
         },
+        {
+          title: this.$t("general.download"),
+          icon: this.$globals.icons.download,
+          color: "accent",
+          action: "download",
+        },
       ];
     },
     userMenu() {
@@ -118,9 +127,18 @@ export default {
           color: "accent",
           action: "edit",
         },
-        ...this.defaultMenu,
       ];
     },
+    displayedMenu() {
+      let menu = this.defaultMenu;
+      if (this.loggedIn && this.cardMenu) {
+        menu = [...this.userMenu, ...menu];
+      }
+      if (this.showPrint) {
+        menu = [this.printerMenu, ...menu];
+      }
+      return menu;
+    },
     recipeText() {
       return this.$t("recipe.share-recipe-message", [this.name]);
     },
@@ -159,6 +177,9 @@ export default {
         case "print":
           this.$router.push(`/recipe/${this.slug}` + "?print=true");
           break;
+        case "download":
+          window.open(`/api/recipes/${this.slug}/zip`);
+          break;
         default:
           break;
       }

frontend/src/components/Recipe/RecipePageActionMenu.vue

@@ -20,13 +20,23 @@
     <div v-if="!value" class="custom-btn-group ma-1">
       <v-tooltip bottom color="info">
         <template v-slot:activator="{ on, attrs }">
-          <v-btn fab small class="mx-1" color="info" v-bind="attrs" v-on="on" @click="$emit('input', true)">
+          <v-btn
+            v-if="loggedIn"
+            fab
+            small
+            class="mx-1"
+            color="info"
+            v-bind="attrs"
+            v-on="on"
+            @click="$emit('input', true)"
+          >
             <v-icon> {{ $globals.icons.edit }} </v-icon>
           </v-btn>
         </template>
         <span>{{ $t("general.edit") }}</span>
       </v-tooltip>
       <ContextMenu
+        show-print
         :menu-top="false"
         :slug="slug"
         :name="name"
@@ -74,6 +84,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    loggedIn: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {