recipe context actions

vue3/src/components/dialogs/RecipeShareDialog.vue

@@ -0,0 +1,76 @@
+<template>
+    <v-dialog max-width="600px" activator="parent" v-model="dialog">
+        <v-card>
+            <v-closable-card-title :title="$t('Share')" :sub-title="recipe.name" v-model="dialog"></v-closable-card-title>
+            <v-card-text>
+                <v-text-field :label="$t('Link')" v-model="shareLink.link" :loading="loading">
+                    <template #append-inner>
+                        <btn-copy :copy-value="shareLink.link" color="" variant="plain"></btn-copy>
+                    </template>
+                </v-text-field>
+
+            </v-card-text>
+            <v-card-actions>
+                <v-btn class="float-right" @click="dialog = false">{{$t('Close')}}</v-btn>
+                <v-btn class="float-right" color="success" prepend-icon="fa-solid fa-share-nodes" @click="shareIntend()">{{$t('Share')}}</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script setup lang="ts">
+
+import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
+import {onMounted, PropType, ref} from "vue";
+import {ApiApi, Recipe, RecipeFlat, RecipeOverview, ShareLink} from "@/openapi";
+import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
+import BtnCopy from "@/components/buttons/BtnCopy.vue";
+import {useI18n} from "vue-i18n";
+
+const props = defineProps({
+    recipe: {type:  Object as PropType<Recipe | RecipeFlat | RecipeOverview>, required: true}
+})
+
+const {t} = useI18n()
+
+const dialog = ref(false)
+const loading = ref(false)
+const shareLink = ref({} as ShareLink)
+
+onMounted(() => {
+    generateShareLink()
+})
+
+/**
+ * request api to generate share link
+ */
+function generateShareLink(){
+    let api = new ApiApi()
+    loading.value = true
+
+    api.apiShareLinkRetrieve({id: props.recipe.id!}).then(r => {
+        shareLink.value = r
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
+    }).finally(() => {
+        loading.value = false
+    })
+}
+
+/**
+ * trigger navigator share event
+ */
+function shareIntend() {
+    let shareData = {
+        title: props.recipe.name,
+        text: `${t("Check out this recipe: ")} ${props.recipe.name}`,
+        url: shareLink.value.link,
+    }
+    navigator.share(shareData)
+}
+
+</script>
+
+<style scoped>
+
+</style>