Add Web Share api to ContextMenu.vue (#462)

* Add Web Share api to ContextMenu.vue. Copy to clipboard is the fallback

* Add Web Share api to ContextMenu.vue. Copy to clipboard is the fallback

* Add translation

frontend/src/components/Recipe/ContextMenu.vue

@@ -33,6 +33,7 @@
 <script>
 import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog.vue";
 import { api } from "@/api";
+import { utils } from "@/utils";
 export default {
   components: {
     ConfirmationDialog,
@@ -44,6 +45,9 @@ export default {
     menuIcon: {
       default: "mdi-dots-vertical",
     },
+    name: {
+      type: String,
+    },
   },
   computed: {
     loggedIn() {
@@ -64,8 +68,8 @@ export default {
           action: "print",
         },
         {
-          title: this.$t("general.link"),
-          icon: "mdi-content-copy",
+          title: this.$t("general.share"),
+          icon: "mdi-share-variant",
           color: "accent",
           action: "share",
         },
@@ -88,6 +92,9 @@ export default {
         ...this.defaultMenu,
       ];
     },
+    recipeText() {
+      return this.$t("recipe.share-recipe-message", [this.name]);
+    },
   },
   data() {
     return {
@@ -103,7 +110,15 @@ export default {
           this.$refs.deleteRecipieConfirm.open();
           break;
         case "share":
-          this.updateClipboard();
+            if (navigator.share){
+            navigator.share({
+              title: this.name,
+              text: this.recipeText,
+              url: this.recipeURL,
+            })
+            .then(() => console.log('Successful share'))
+            .catch((error) => console.log('WebShareAPI not supported', error))
+            } else this.updateClipboard();
           break;
         case "edit":
           this.$router.push(`/recipe/${this.slug}` + "?edit=true");
@@ -123,10 +138,10 @@ export default {
     updateClipboard() {
       const copyText = this.recipeURL;
       navigator.clipboard.writeText(copyText).then(
-        () => console.log("Copied", copyText),
-        () => console.log("Copied Failed", copyText)
-      );
+          () => { console.log("Copied to Clipboard", copyText);
+            utils.notify.success("Copied to Clipboard");},
+          () => console.log("Copied Failed", copyText));
     },
   },
-};
+}
 </script>

frontend/src/components/Recipe/MobileRecipeCard.vue

@@ -34,7 +34,11 @@
               :value="rating"
             ></v-rating>
             <v-spacer></v-spacer>
-            <ContextMenu :slug="slug" menu-icon="mdi-dots-horizontal" />
+            <ContextMenu
+                :slug="slug"
+                menu-icon="mdi-dots-horizontal"
+                :name="name"
+            />
           </div>
         </v-list-item-content>
       </v-list-item>

frontend/src/components/Recipe/RecipeCard.vue

@@ -27,7 +27,7 @@
         <Rating :value="rating" :name="name" :slug="slug" :small="true" />
         <v-spacer></v-spacer>
         <RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" :isCategory="false" />
-        <ContextMenu :slug="slug" />
+        <ContextMenu :slug="slug" :name="name"/>
       </v-card-actions>
     </v-card>
   </v-hover>