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"),
+          title: this.$t("general.share"),
-          icon: "mdi-content-copy",
+          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 to Clipboard", copyText);
-        () => console.log("Copied Failed", 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>

frontend/src/locales/messages/en-US.json

@@ -96,6 +96,7 @@
     "saturday": "Saturday",
     "save": "Save",
     "settings": "Settings",
+    "share": "Share",
     "shuffle": "Shuffle",
     "sort": "Sort",
     "sort-alphabetically": "Alphabetical",
@@ -214,6 +215,7 @@
     "ingredient": "Ingredient",
     "ingredients": "Ingredients",
     "instructions": "Instructions",
+    "share-recipe-message": "I wanted to share you my {0} recipe.",
     "key-name-required": "Key Name Required",
     "landscape-view-coming-soon": "Landscape View (Coming Soon)",
     "milligrams": "milligrams",
@@ -249,6 +251,7 @@
     "total-time": "Total Time",
     "unable-to-delete-recipe": "Unable to Delete Recipe",
     "view-recipe": "View Recipe"
+
   },
   "search": {
     "and": "and",