From d611391bea3f18de5a8fe2fe32ca06c7627a6f66 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Sun, 22 Dec 2024 17:18:47 +0100
Subject: [PATCH] recipe context actions

---
 cookbook/serializer.py                        |  2 +-
 vue3/src/apps/tandoor/Tandoor.vue             | 47 +++++++-----
 vue3/src/components/buttons/BtnCopy.vue       |  3 +-
 .../dialogs/AddToShoppingDialog.vue           | 11 +++
 .../components/dialogs/RecipeShareDialog.vue  | 76 +++++++++++++++++++
 vue3/src/components/display/RecipeCard.vue    | 62 +++++++++------
 vue3/src/components/display/RecipeImage.vue   |  5 +-
 .../components/inputs/RecipeContextMenu.vue   | 37 +++++----
 vue3/src/openapi/models/RecipeOverview.ts     | 13 +++-
 9 files changed, 192 insertions(+), 64 deletions(-)
 create mode 100644 vue3/src/components/dialogs/AddToShoppingDialog.vue
 create mode 100644 vue3/src/components/dialogs/RecipeShareDialog.vue

diff --git a/cookbook/serializer.py b/cookbook/serializer.py
index 9fd4e133b..c8350f095 100644
--- a/cookbook/serializer.py
+++ b/cookbook/serializer.py
@@ -963,9 +963,9 @@ class RecipeOverviewSerializer(RecipeBaseSerializer):
     keywords = KeywordLabelSerializer(many=True, read_only=True)
     new = serializers.SerializerMethodField('is_recipe_new', read_only=True)
     recent = serializers.CharField(read_only=True)
-
     rating = CustomDecimalField(required=False, allow_null=True, read_only=True)
     last_cooked = serializers.DateTimeField(required=False, allow_null=True, read_only=True)
+    created_by = UserSerializer(read_only=True)
 
     def create(self, validated_data):
         pass
diff --git a/vue3/src/apps/tandoor/Tandoor.vue b/vue3/src/apps/tandoor/Tandoor.vue
index 1b36b005f..80cadca71 100644
--- a/vue3/src/apps/tandoor/Tandoor.vue
+++ b/vue3/src/apps/tandoor/Tandoor.vue
@@ -44,13 +44,13 @@
                         <!--                        <v-list-item><template #prepend><v-icon icon="fa-solid fa-question"></v-icon></template>Help</v-list-item>-->
                         <template v-if="spaces.length > 1">
                             <v-divider></v-divider>
-                            <v-list-subheader>{{ $t('YourSpaces')}}</v-list-subheader>
+                            <v-list-subheader>{{ $t('YourSpaces') }}</v-list-subheader>
                             <v-list-item v-for="s in spaces" :key="s.id" @click="useUserPreferenceStore().switchSpace(s)">
                                 <template #prepend>
                                     <v-icon icon="fa-solid fa-circle-dot" v-if="s.id == useUserPreferenceStore().activeSpace.id"></v-icon>
                                     <v-icon icon="fa-solid fa-circle" v-else></v-icon>
                                 </template>
-                                {{ s.name}}
+                                {{ s.name }}
                             </v-list-item>
                         </template>
 
@@ -90,29 +90,34 @@
         </v-main>
 
         <v-navigation-drawer v-if="lgAndUp">
-            <v-list-item :to="{ name: 'view_settings', params: {} }">
-                <template #prepend>
-                    <v-avatar color="primary">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}</v-avatar>
-                </template>
-                <v-list-item-title>{{ useUserPreferenceStore().userSettings.user.displayName }}</v-list-item-title>
-                <v-list-item-subtitle>{{ useUserPreferenceStore().activeSpace.name }}</v-list-item-subtitle>
-            </v-list-item>
-            <v-divider></v-divider>
-            <v-list-item prepend-icon="fas fa-book" title="Home" :to="{ name: 'view_home', params: {} }"></v-list-item>
-            <v-list-item prepend-icon="fas fa-calendar-alt" :title="$t('Meal_Plan')" :to="{ name: 'view_mealplan', params: {} }"></v-list-item>
-            <v-list-item prepend-icon="fas fa-shopping-cart" :title="$t('Shopping_list')" :to="{ name: 'view_shopping', params: {} }"></v-list-item>
-            <v-list-item prepend-icon="fas fa-globe" :title="$t('Import')" :to="{ name: 'RecipeImportPage', params: {} }"></v-list-item>
-            <v-list-item prepend-icon="fa-solid fa-folder-tree" :title="$t('Database')" :to="{ name: 'ModelListPage', params: {model: 'food'} }"></v-list-item>
+            <v-list nav>
+                <v-list-item :to="{ name: 'view_settings', params: {} }">
+                    <template #prepend>
+                        <v-avatar color="primary">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}</v-avatar>
+                    </template>
+                    <v-list-item-title>{{ useUserPreferenceStore().userSettings.user.displayName }}</v-list-item-title>
+                    <v-list-item-subtitle>{{ useUserPreferenceStore().activeSpace.name }}</v-list-item-subtitle>
+                </v-list-item>
+                <v-divider></v-divider>
+                <v-list-item prepend-icon="fas fa-book" title="Home" :to="{ name: 'view_home', params: {} }"></v-list-item>
+                <v-list-item prepend-icon="fas fa-calendar-alt" :title="$t('Meal_Plan')" :to="{ name: 'view_mealplan', params: {} }"></v-list-item>
+                <v-list-item prepend-icon="fas fa-shopping-cart" :title="$t('Shopping_list')" :to="{ name: 'view_shopping', params: {} }"></v-list-item>
+                <v-list-item prepend-icon="fas fa-globe" :title="$t('Import')" :to="{ name: 'RecipeImportPage', params: {} }"></v-list-item>
+                <v-list-item prepend-icon="fa-solid fa-folder-tree" :title="$t('Database')" :to="{ name: 'ModelListPage', params: {model: 'food'} }"></v-list-item>
+
+                <navigation-drawer-context-menu></navigation-drawer-context-menu>
+            </v-list>
 
-            <navigation-drawer-context-menu></navigation-drawer-context-menu>
 
             <template #append>
-                <v-list-item prepend-icon="fas fa-sliders" :title="$t('Settings')" :to="{ name: 'view_settings', params: {} }"></v-list-item>
-                <v-list-item prepend-icon="fa-solid fa-heart" href="https://tandoor.dev" target="_blank">
-                    Tandoor {{ useUserPreferenceStore().serverSettings.version }}
-                </v-list-item>
+                <v-list nav>
+                    <v-list-item prepend-icon="fas fa-sliders" :title="$t('Settings')" :to="{ name: 'view_settings', params: {} }"></v-list-item>
+                    <v-list-item prepend-icon="fa-solid fa-heart" href="https://tandoor.dev" target="_blank">
+                        Tandoor {{ useUserPreferenceStore().serverSettings.version }}
+                    </v-list-item>
+                </v-list>
             </template>
-            <!-- TODO link -->
+
         </v-navigation-drawer>
 
         <v-bottom-navigation grow v-if="!lgAndUp">
diff --git a/vue3/src/components/buttons/BtnCopy.vue b/vue3/src/components/buttons/BtnCopy.vue
index f7c0b87c2..b3b88c474 100644
--- a/vue3/src/components/buttons/BtnCopy.vue
+++ b/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'},
 
 })
 
diff --git a/vue3/src/components/dialogs/AddToShoppingDialog.vue b/vue3/src/components/dialogs/AddToShoppingDialog.vue
new file mode 100644
index 000000000..b802c0a96
--- /dev/null
+++ b/vue3/src/components/dialogs/AddToShoppingDialog.vue
@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/vue3/src/components/dialogs/RecipeShareDialog.vue b/vue3/src/components/dialogs/RecipeShareDialog.vue
new file mode 100644
index 000000000..534ec618a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/vue3/src/components/display/RecipeCard.vue b/vue3/src/components/display/RecipeCard.vue
index 30939e366..ffee78de8 100644
--- a/vue3/src/components/display/RecipeCard.vue
+++ b/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>
diff --git a/vue3/src/components/display/RecipeImage.vue b/vue3/src/components/display/RecipeImage.vue
index 4f66fc63c..d6d309ce1 100644
--- a/vue3/src/components/display/RecipeImage.vue
+++ b/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(() => {
diff --git a/vue3/src/components/inputs/RecipeContextMenu.vue b/vue3/src/components/inputs/RecipeContextMenu.vue
index 4683ea3d6..f4663c31f 100644
--- a/vue3/src/components/inputs/RecipeContextMenu.vue
+++ b/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>
diff --git a/vue3/src/openapi/models/RecipeOverview.ts b/vue3/src/openapi/models/RecipeOverview.ts
index 0db14fff3..50a1c1f68 100644
--- a/vue3/src/openapi/models/RecipeOverview.ts
+++ b/vue3/src/openapi/models/RecipeOverview.ts
@@ -13,6 +13,13 @@
  */
 
 import { mapValues } from '../runtime';
+import type { User } from './User';
+import {
+    UserFromJSON,
+    UserFromJSONTyped,
+    UserToJSON,
+    UserToJSONTyped,
+} from './User';
 import type { KeywordLabel } from './KeywordLabel';
 import {
     KeywordLabelFromJSON,
@@ -71,10 +78,10 @@ export interface RecipeOverview {
     readonly waitingTime: number;
     /**
      * 
-     * @type {number}
+     * @type {User}
      * @memberof RecipeOverview
      */
-    readonly createdBy: number;
+    readonly createdBy: User;
     /**
      * 
      * @type {Date}
@@ -170,7 +177,7 @@ export function RecipeOverviewFromJSONTyped(json: any, ignoreDiscriminator: bool
         'keywords': ((json['keywords'] as Array<any>).map(KeywordLabelFromJSON)),
         'workingTime': json['working_time'],
         'waitingTime': json['waiting_time'],
-        'createdBy': json['created_by'],
+        'createdBy': UserFromJSON(json['created_by']),
         'createdAt': (new Date(json['created_at'])),
         'updatedAt': (new Date(json['updated_at'])),
         'internal': json['internal'],