recipe context actions

vue3/src/components/buttons/BtnCopy.vue

@@ -1,6 +1,6 @@
 <template>
 
-    <v-btn  ref="copyBtn" :color="color" :size="size" :density="density" @click="clickCopy()">
+    <v-btn  ref="copyBtn" :color="color" :size="size" :density="density" @click="clickCopy()" :variant="variant">
         <v-icon icon="$copy"></v-icon>
         <v-tooltip v-model="showToolip" :target="btn" location="top">
             <v-icon icon="$copy"></v-icon>
@@ -22,6 +22,7 @@ const props = defineProps({
     color: {type: String, default: 'success'},
     size: {type: String, default: 'default'},
     density: {type: String, default: 'default'},
+    variant: {type: String, default: 'elevated'},
 
 })
 

vue3/src/components/dialogs/AddToShoppingDialog.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

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>

vue3/src/components/display/RecipeCard.vue

@@ -1,52 +1,70 @@
 <template>
-    <template v-if="!componentProps.loading">
-        <v-card :to="`/recipe/${componentProps.recipe.id}`" :style="{'height': componentProps.height}">
+    <template v-if="!props.loading">
+
+        <recipe-image :to="`/recipe/${props.recipe.id}`" :style="{'height': props.height}" :recipe="props.recipe" rounded="lg" class="mr-3 ml-3">
+
+        </recipe-image>
+        <div class="ml-3">
+            <div class="d-flex ">
+                <div class="flex-grow-1 ">
+                    <p class="font-weight-bold mt-2">{{ props.recipe.name }}</p>
+                </div>
+                <div class="mt-1">
+                    <!--                    <v-btn icon="fas fa-ellipsis-v" size="small" variant="plain"></v-btn>-->
+                    <recipe-context-menu :recipe="props.recipe" size="small"></recipe-context-menu>
+                </div>
+            </div>
+            <!--            <p class="text-disabled">{{ props.recipe.createdBy.displayName}}</p>-->
+        </div>
+
+
+        <v-card :to="`/recipe/${props.recipe.id}`" :style="{'height': props.height}" v-if="false">
             <v-tooltip
                 class="align-center justify-center"
                 location="top center" origin="overlap"
                 no-click-animation
-                :open-on-hover="componentProps.recipe.description != null && componentProps.recipe.description != ''"
+                :open-on-hover="props.recipe.description != null && props.recipe.description != ''"
                 contained
             >
                 <template v-slot:activator="{ props }">
                     <recipe-image
                         height="70%"
                         width="100%"
-                        :recipe="componentProps.recipe"
+                        :recipe="props.recipe"
                     >
 
                     </recipe-image>
 
-                    <v-divider class="p-0" v-if="componentProps.recipe.image == null"></v-divider>
+                    <v-divider class="p-0" v-if="props.recipe.image == null"></v-divider>
 
                 </template>
-                <div v-if="componentProps.recipe.description != null && componentProps.recipe.description != ''">
-                    {{ componentProps.recipe.description }}
+                <div v-if="props.recipe.description != null && props.recipe.description != ''">
+                    {{ props.recipe.description }}
                 </div>
             </v-tooltip>
             <v-card-item>
                 <div class="text-rows-2">
-                    <h3>{{ componentProps.recipe.name }}</h3>
+                    <h3>{{ props.recipe.name }}</h3>
                 </div>
                 <!-- TODO decide if context menu should be re-added (maybe make it a setting) -->
                 <!-- <recipe-context-menu class="float-end" :recipe="recipe"></recipe-context-menu>-->
             </v-card-item>
-<!--            <v-card-text>-->
-<!--                <div class="text-rows-2">-->
-<!--                    <keywords-component variant="outlined" :keywords="componentProps.recipe.keywords">-->
-<!--                        <template #prepend>-->
-<!--                            <v-chip class="mb-1 me-1" size="x-small" prepend-icon="far fa-clock" label variant="outlined" v-if="componentProps.recipe.workingTime != undefined && componentProps.recipe.workingTime > 0">-->
-<!--                                {{ recipe.workingTime! + recipe.waitingTime! }}-->
-<!--                            </v-chip>-->
-<!--                        </template>-->
-<!--                    </keywords-component>-->
-<!--                </div>-->
-<!--            </v-card-text>-->
+            <!--            <v-card-text>-->
+            <!--                <div class="text-rows-2">-->
+            <!--                    <keywords-component variant="outlined" :keywords="componentProps.recipe.keywords">-->
+            <!--                        <template #prepend>-->
+            <!--                            <v-chip class="mb-1 me-1" size="x-small" prepend-icon="far fa-clock" label variant="outlined" v-if="componentProps.recipe.workingTime != undefined && componentProps.recipe.workingTime > 0">-->
+            <!--                                {{ recipe.workingTime! + recipe.waitingTime! }}-->
+            <!--                            </v-chip>-->
+            <!--                        </template>-->
+            <!--                    </keywords-component>-->
+            <!--                </div>-->
+            <!--            </v-card-text>-->
 
         </v-card>
     </template>
     <template v-else>
-        <v-card :style="{'height': componentProps.height}">
+        <v-card :style="{'height': props.height}">
             <v-img src="../../assets/recipe_no_image.svg" cover height="60%"></v-img>
             <v-card-title>
                 <v-skeleton-loader type="heading"></v-skeleton-loader>
@@ -68,12 +86,12 @@ import {Recipe, RecipeOverview} from "@/openapi";
 import RecipeContextMenu from "@/components/inputs/RecipeContextMenu.vue";
 import RecipeImage from "@/components/display/RecipeImage.vue";
 
-const componentProps = defineProps({
+const props = defineProps({
     recipe: {type: {} as PropType<Recipe | RecipeOverview>, required: true,},
     loading: {type: Boolean, required: false},
     show_keywords: {type: Boolean, required: false},
     show_description: {type: Boolean, required: false},
-    height: {type: String, required: false, default: '25vh'},
+    height: {type: String, required: false, default: '15vh'},
 })
 
 </script>

vue3/src/components/display/RecipeImage.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-img :cover="cover" :style="{'height': height, 'width': width,}" :src="image" alt="Recipe Image">
+    <v-img :cover="cover" :style="{'height': height, 'width': width,}" style="background-color: #ffffff" :src="image" :alt="$t('Recipe_Image')" :rounded="props.rounded">
         <slot name="overlay">
 
         </slot>
@@ -16,7 +16,8 @@ const props = defineProps({
     recipe: {type: {} as PropType<Recipe | RecipeOverview | undefined>, required: false, default: undefined},
     height: {type: String},
     width: {type: String},
-    cover: {type: Boolean, default: true}
+    cover: {type: Boolean, default: true},
+    rounded: {type: Boolean as PropType<Boolean|String>, default: false},
 })
 
 const image = computed(() => {

vue3/src/components/inputs/RecipeContextMenu.vue

@@ -1,27 +1,36 @@
 <template>
+    <v-btn v-bind="props" icon="fa-solid fa-ellipsis-v" variant="plain" :size="props.size">
+        <v-icon icon="fa-solid fa-ellipsis-v"></v-icon>
+            <v-menu  activator="parent" close-on-content-click>
+                <v-list density="compact" class="pt-1 pb-1">
+                    <v-list-item :to="{ name: 'ModelEditPage', params: {model: 'recipe', id: recipe.id} }" prepend-icon="$edit">
+                        {{ $t('Edit') }}
+                    </v-list-item>
+                    <v-list-item prepend-icon="$mealplan" link>
+                        {{ $t('Add_to_Plan') }}
+                        <model-edit-dialog model="MealPlan" :itemDefaults="{recipe: recipe}"></model-edit-dialog>
+                    </v-list-item>
+                    <v-list-item prepend-icon="fa-solid fa-share-nodes" link>
+                        {{ $t('Share') }}
+                        <recipe-share-dialog :recipe="props.recipe"></recipe-share-dialog>
+                    </v-list-item>
+                </v-list>
+            </v-menu>
+    </v-btn>
 
-    <v-menu location="start">
-        <template v-slot:activator="{ props }">
-            <v-btn v-bind="props" icon="fas fa-ellipsis-v" variant="plain"></v-btn>
-        </template>
-
-        <v-list>
-            <v-list-item :to="{ name: 'ModelEditPage', params: {model: 'recipe', id: recipe.id} }" prepend-icon="fas fa-edit">
-                {{$t('Edit')}}
-            </v-list-item>
-        </v-list>
-    </v-menu>
 
 </template>
 
 <script setup lang="ts">
 import {PropType} from 'vue'
 import {Recipe, RecipeFlat, RecipeOverview} from "@/openapi";
-import {useRouter} from "vue-router";
+import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
+import RecipeShareDialog from "@/components/dialogs/RecipeShareDialog.vue";
+
 
-const router = useRouter()
 const props = defineProps({
-    recipe: {type: Object as PropType<Recipe | RecipeFlat | RecipeOverview>, required: true}
+    recipe: {type: Object as PropType<Recipe | RecipeFlat | RecipeOverview>, required: true},
+    size: {type: String, default: 'medium'},
 })
 
 </script>