ui fixes

vue/src/components/AddRecipeToBook.vue

@@ -1,7 +1,7 @@
 <template>
 
   <div>
-    <b-modal class="modal" id="id_modal_add_book" :title="$t('Add_to_Book')" :ok-title="$t('Add')"
+    <b-modal class="modal" :id="`id_modal_add_book_${modal_id}`" :title="$t('Add_to_Book')" :ok-title="$t('Add')"
              :cancel-title="$t('Close')" @ok="addToBook()">
 
       <multiselect
@@ -42,6 +42,7 @@ export default {
   },
   props: {
     recipe: Object,
+    modal_id: Number
   },
   data() {
     return {

vue/src/components/CookLog.vue

@@ -1,7 +1,7 @@
 <template>
 
   <div>
-    <b-modal class="modal" id="id_modal_cook_log" :title="$t('Log_Recipe_Cooking')" :ok-title="$t('Save')"
+    <b-modal class="modal" :id="`id_modal_cook_log_${modal_id}`" :title="$t('Log_Recipe_Cooking')" :ok-title="$t('Save')"
              :cancel-title="$t('Close')" @ok="logCook()">
 
       <p>{{ $t('all_fields_optional') }}</p>
@@ -38,6 +38,7 @@ export default {
   name: 'CookLog',
   props: {
     recipe: Object,
+    modal_id: Number
   },
   data() {
     return {

vue/src/components/RecipeCard.vue

@@ -5,13 +5,13 @@
     <a :href="clickUrl()">
       <b-card-img-lazy style="height: 15vh; object-fit: cover" :src=recipe_image v-bind:alt="$t('Recipe_Image')"
                        top></b-card-img-lazy>
-
       <div class="card-img-overlay h-100 d-flex flex-column justify-content-right"
            style="float:right; text-align: right; padding-top: 10px; padding-right: 5px">
-        <recipe-context-menu :recipe="recipe" style="float:right" v-if="recipe !== null"></recipe-context-menu>
+        <a><recipe-context-menu :recipe="recipe" style="float:right" v-if="recipe !== null"></recipe-context-menu></a>
       </div>
     </a>
 
+
     <b-card-body>
       <h5><a :href="clickUrl()">
         <template v-if="recipe !== null">{{ recipe.name }}</template>
@@ -23,7 +23,10 @@
           {{ recipe.description }}
           <keywords :recipe="recipe" style="margin-top: 4px"></keywords>
           <b-badge pill variant="info" v-if="!recipe.internal">{{ $t('External') }}</b-badge>
-          <b-badge pill variant="success" v-if="Date.parse(recipe.created_at) > new Date(Date.now() - (7 * (1000 * 60 * 60 * 24)))">{{ $t('New') }}</b-badge>
+          <b-badge pill variant="success"
+                   v-if="Date.parse(recipe.created_at) > new Date(Date.now() - (7 * (1000 * 60 * 60 * 24)))">
+            {{ $t('New') }}
+          </b-badge>
         </template>
         <template v-else>{{ meal_plan.note }}</template>
       </b-card-text>

vue/src/components/RecipeContextMenu.vue

@@ -15,9 +15,11 @@
         <a class="dropdown-item" :href="resolveDjangoUrl('edit_convert_recipe', recipe.id)" v-if="!recipe.internal"><i
             class="fas fa-exchange-alt fa-fw"></i> {{ $t('convert_internal') }}</a>
 
-        <button class="dropdown-item" @click="$bvModal.show('id_modal_add_book')">
+        <a href="#">
+          <button class="dropdown-item" @click="$bvModal.show(`id_modal_add_book_${modal_id}`)">
             <i class="fas fa-bookmark fa-fw"></i> {{ $t('Add_to_Book') }}
           </button>
+        </a>
 
         <a class="dropdown-item" :href="`${resolveDjangoUrl('view_shopping') }?r=[${recipe.id},${servings_value}]`"
            v-if="recipe.internal" target="_blank" rel="noopener noreferrer">
@@ -29,10 +31,11 @@
             class="fas fa-calendar fa-fw"></i> {{ $t('Add_to_Plan') }}
         </a>
 
-
-        <button class="dropdown-item" @click="$bvModal.show('id_modal_cook_log')"><i
+        <a href="#">
+          <button class="dropdown-item" @click="$bvModal.show(`id_modal_cook_log_${modal_id}`)"><i
               class="fas fa-clipboard-list fa-fw"></i> {{ $t('Log_Cooking') }}
           </button>
+        </a>
 
         <button class="dropdown-item" onclick="window.print()"><i
             class="fas fa-print fa-fw"></i> {{ $t('Print') }}
@@ -41,34 +44,30 @@
         <a class="dropdown-item" :href="resolveDjangoUrl('view_export') + '?r=' + recipe.id" target="_blank"
            rel="noopener noreferrer"><i class="fas fa-file-export fa-fw"></i> {{ $t('Export') }}</a>
 
+        <a href="#">
           <button class="dropdown-item" @click="createShareLink()" v-if="recipe.internal"><i
               class="fas fa-share-alt fa-fw"></i> {{ $t('Share') }}
           </button>
+        </a>
       </div>
 
 
     </div>
 
-    <cook-log :recipe="recipe"></cook-log>
+    <cook-log :recipe="recipe" :modal_id="modal_id"></cook-log>
+    <add-recipe-to-book :recipe="recipe" :modal_id="modal_id"></add-recipe-to-book>
 
-    <b-modal id="modal-share-link" v-bind:title="$t('Share')" hide-footer>
+    <b-modal :id="`modal-share-link_${modal_id}`" v-bind:title="$t('Share')" hide-footer>
       <div class="row">
         <div class="col col-md-12">
-
-          <label v-if="recipe_share_link !== undefined">
-
-            {{ $t('Link') }}
+          <label v-if="recipe_share_link !== undefined">{{ $t('Link') }}</label>
           <input ref="share_link_ref" class="form-control" v-model="recipe_share_link"/>
+          <b-button class="mt-2 mb-3" variant="secondary" @click="$bvModal.hide(`modal-share-link_${modal_id}`)">{{ $t('Close') }}</b-button>
+          <b-button class="mt-2 mb-3 ml-2" variant="primary" @click="copyShareLink()">{{ $t('Copy') }}</b-button>
+          <a :href="`whatsapp://send?text=${recipe_share_link}`" data-action="share/whatsapp/share"><b-button class="mt-2 mb-3 ml-2" >Test</b-button></a>
+        </div>
+      </div>
 
-          </label>
-          <br/>
-          <br/>
-          <b-button variant="success" @click="copyShareLink()" style="margin-right: 1vh; ">{{ $t('Copy') }}</b-button>
-          <b-button @click="$bvModal.hide('modal-share-link')">{{ $t('Close') }}</b-button>
-          <br/>
-          <br/>
-        </div>
-      </div>
     </b-modal>
 
 
@@ -80,6 +79,7 @@
 import {makeToast, resolveDjangoUrl, ResolveUrlMixin} from "@/utils/utils";
 import CookLog from "@/components/CookLog";
 import axios from "axios";
+import AddRecipeToBook from "./AddRecipeToBook";
 
 export default {
   name: 'RecipeContextMenu',
@@ -87,12 +87,14 @@ export default {
     ResolveUrlMixin
   ],
   components: {
+    AddRecipeToBook,
     CookLog
   },
   data() {
     return {
       servings_value: 0,
-      recipe_share_link: undefined
+      recipe_share_link: undefined,
+      modal_id: this.recipe.id + Math.round(Math.random() * 100000)
     }
   },
   props: {
@@ -108,7 +110,7 @@ export default {
   methods: {
     createShareLink: function () {
       axios.get(resolveDjangoUrl('api_share_link', this.recipe.id)).then(result => {
-        this.$bvModal.show('modal-share-link')
+        this.$bvModal.show(`modal-share-link_${this.modal_id}`)
         this.recipe_share_link = result.data.link
       }).catch(err => {