From 24ed6a1cd2e012e3238b88cf85a448d332c6b5c9 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Tue, 12 Jan 2021 20:51:28 +0100
Subject: [PATCH] recipe stuff

---
 boot.sh                                  |  1 +
 cookbook/templates/javascript_urls.html  | 18 +++++++
 cookbook/templates/test.html             |  7 +++
 recipes/settings.py                      |  5 ++
 recipes/urls.py                          |  2 +
 requirements.txt                         |  1 +
 vue/src/apps/RecipeView/RecipeView.vue   | 27 ++++------
 vue/src/components/RecipeContextMenu.vue | 64 ++++++++++++++++++++++++
 vue/src/utils/api.js                     | 12 +++++
 vue/src/utils/django.js                  | 12 -----
 vue/src/utils/utils.js                   | 55 +++++++++++++++++++-
 vue/webpack-stats.json                   |  2 +-
 12 files changed, 175 insertions(+), 31 deletions(-)
 create mode 100644 cookbook/templates/javascript_urls.html
 create mode 100644 vue/src/components/RecipeContextMenu.vue
 delete mode 100644 vue/src/utils/django.js

diff --git a/boot.sh b/boot.sh
index d76fa75a..0d1d47d9 100644
--- a/boot.sh
+++ b/boot.sh
@@ -4,6 +4,7 @@ source venv/bin/activate
 echo "Updating database"
 python manage.py migrate
 python manage.py collectstatic --noinput
+python manage.py collectstatic_js_reverse
 echo "Done"
 
 chmod -R 755 /opt/recipes/mediafiles
diff --git a/cookbook/templates/javascript_urls.html b/cookbook/templates/javascript_urls.html
new file mode 100644
index 00000000..5eb1ca0a
--- /dev/null
+++ b/cookbook/templates/javascript_urls.html
@@ -0,0 +1,18 @@
+<!--
+As there is apparently no good way to pass django named URLs to Vue/Webpack we will pack the urls we need into
+this object and load it in all the templates where we load Vue apps
+
+Reason for not using other alternatives
+
+## django-js-reverse
+bad performance because the 25kb or so path file needs to be loaded before any other request can be made
+or all paths need to be printed in template which is apparently not recommended for CSP reasons (although this here
+might do the same)
+
+-->
+
+<script type="application/javascript">
+    window.DJANGO_URLS = {
+        'edit_storage'
+    }
+</script>
\ No newline at end of file
diff --git a/cookbook/templates/test.html b/cookbook/templates/test.html
index 79ceb0a6..8bf6d6e6 100644
--- a/cookbook/templates/test.html
+++ b/cookbook/templates/test.html
@@ -16,8 +16,15 @@
 {% block script %}
     <script src="{% url 'javascript-catalog' %}"></script>
 
+    {% if debug %}
+        <script src="{% url 'js_reverse' %}"></script>
+    {% else %}
+        <script src="{% static 'django_js_reverse/js/reverse.js' %}"></script>
+    {% endif %}
+
     <script type="application/javascript">
         window.RECIPE_ID = 5;
+
     </script>
 
     {% render_bundle 'chunk-vendors' %}
diff --git a/recipes/settings.py b/recipes/settings.py
index 4893cda5..1146fb2f 100644
--- a/recipes/settings.py
+++ b/recipes/settings.py
@@ -24,6 +24,10 @@ SECRET_KEY = os.getenv('SECRET_KEY') if os.getenv('SECRET_KEY') else 'INSECURE_S
 
 DEBUG = bool(int(os.getenv('DEBUG', True)))
 
+INTERNAL_IPS = [
+    '127.0.0.1',
+]
+
 # allow djangos wsgi server to server mediafiles
 GUNICORN_MEDIA = bool(int(os.getenv('GUNICORN_MEDIA', True)))
 
@@ -74,6 +78,7 @@ INSTALLED_APPS = [
     'rest_framework.authtoken',
     'django_cleanup.apps.CleanupConfig',
     'webpack_loader',
+    'django_js_reverse',
     'cookbook.apps.CookbookConfig',
 ]
 
diff --git a/recipes/urls.py b/recipes/urls.py
index d975d22c..26b54a96 100644
--- a/recipes/urls.py
+++ b/recipes/urls.py
@@ -20,6 +20,7 @@ from django.contrib import admin
 from django.urls import include, path
 from django.views.i18n import JavaScriptCatalog
 from django.views.static import serve
+from django_js_reverse import views as reverse_views
 
 urlpatterns = [
     path('', include('cookbook.urls')),
@@ -31,6 +32,7 @@ urlpatterns = [
         JavaScriptCatalog.as_view(domain='django'),
         name='javascript-catalog'
     ),
+    url(r'^jsreverse.json$', reverse_views.urls_js, name='js_reverse'),
 ]
 
 if settings.GUNICORN_MEDIA or settings.DEBUG:
diff --git a/requirements.txt b/requirements.txt
index ef3ba1dc..35fb9e72 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -29,3 +29,4 @@ microdata==0.7.1
 django-random-queryset==0.1.3
 Jinja2==2.11.2
 django-webpack-loader==0.7.0
+django-js-reverse==0.9.1
\ No newline at end of file
diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index cc991696..c7498866 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -1,6 +1,7 @@
 <template>
   <div id="app" v-if="!loading">
     <h1>{{ recipe.name }}</h1>
+    <recipe-context-menu v-bind:recipe="recipe"></recipe-context-menu>
 
     <img v-bind:src="recipe.image">
 
@@ -17,31 +18,23 @@ import {BootstrapVue} from 'bootstrap-vue'
 
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 
-import {makeToast} from "@/utils/utils.js";
-
-const _ = window.gettext
+import {apiLoadRecipe} from "@/utils/api";
 
 import Step from "@/components/Step";
+import RecipeContextMenu from "@/components/RecipeContextMenu";
+import {GettextMixin, ToastMixin} from "@/utils/utils";
 
 Vue.use(BootstrapVue)
 
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-const store = new Vuex.Store({
-  state: {
-    servings: 1
-  }
-})
-
-import {apiLoadRecipe} from "@/utils/django";
-
 export default {
   name: 'RecipeView',
-  store: store,
+  mixins: [
+    GettextMixin,
+    ToastMixin,
+  ],
   components: {
-    Step
+    Step,
+    RecipeContextMenu,
   },
   data() {
     return {
diff --git a/vue/src/components/RecipeContextMenu.vue b/vue/src/components/RecipeContextMenu.vue
new file mode 100644
index 00000000..5d61f63f
--- /dev/null
+++ b/vue/src/components/RecipeContextMenu.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    {{ resolveDjangoUrl('api:recipe-detail', 5) }}
+
+    <div class="col col-md-4 d-print-none" style="text-align: right">
+      <div class="dropdown">
+        <a class="btn shadow-none" href="#" role="button" id="dropdownMenuLink"
+           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <i class="fas fa-ellipsis-v"></i>
+        </a>
+
+        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
+          <a class="dropdown-item" :href="resolveDjangoUrl('edit_recipe', recipe.id)"><i
+              class="fas fa-pencil-alt fa-fw"></i> {{ _('Edit') }}</a>
+          <button class="dropdown-item" onclick="$('#bookmarkModal').modal({'show':true})">
+            <i class="fas fa-bookmark fa-fw"></i> {{ _('Add to Book') }}
+          </button>
+
+          <a class="dropdown-item" :href="recipe.name" v-if="true"> <!--TODO implement -->
+            <i class="fas fa-shopping-cart fa-fw"></i> {{ _('Add to Shopping') }} </a>
+
+          <a class="dropdown-item" :href="resolveDjangoUrl('new_meal_plan', recipe.id)"><i
+              class="fas fa-calendar fa-fw"></i> {{ _('Add to Plan') }}</a>
+
+          <!--
+          <button class="dropdown-item" :onclick="openCookLogModal(recipe.id)"><i
+              class="fas fa-clipboard-list fa-fw"></i> {{ _('Log Cooking') }}
+          </button>
+  -->
+          <button class="dropdown-item" onclick="window.print()"><i
+              class="fas fa-print fa-fw"></i> {{ _('Print') }}
+          </button>
+
+          <a class="dropdown-item" :href="resolveDjangoUrl('view_export', recipe.id)" target="_blank"
+             rel="noopener noreferrer"><i class="fas fa-file-export fa-fw"></i> {{ _('Export') }}</a>
+
+          <a class="dropdown-item" :href="resolveDjangoUrl('new_share_link', recipe.id)" target="_blank"
+             rel="noopener noreferrer" v-if="recipe.internal"><i class="fas fa-share-alt fa-fw"></i> {{
+              _('Share')
+            }}</a>
+        </div>
+
+
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+import {GettextMixin, ResolveUrlMixin} from "@/utils/utils";
+
+export default {
+  name: 'RecipeContextMenu',
+  mixins: [
+    ResolveUrlMixin,
+    GettextMixin
+  ],
+  props: {
+    recipe: Object,
+  }
+}
+</script>
diff --git a/vue/src/utils/api.js b/vue/src/utils/api.js
index e69de29b..7c431f9a 100644
--- a/vue/src/utils/api.js
+++ b/vue/src/utils/api.js
@@ -0,0 +1,12 @@
+import axios from "axios";
+import {makeToast} from "@/utils/utils";
+import {resolveDjangoUrl} from "@/utils/utils";
+
+export function apiLoadRecipe(recipe_id) {
+    return axios.get(resolveDjangoUrl('api:recipe-detail', recipe_id)).then((response) => {
+        return response.data
+    }).catch((err) => {
+        console.log(err)
+        makeToast('Error', 'There was an error loading a resource!', 'danger')
+    })
+}
diff --git a/vue/src/utils/django.js b/vue/src/utils/django.js
deleted file mode 100644
index f49f26e1..00000000
--- a/vue/src/utils/django.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import axios from "axios";
-import {makeToast} from "@/utils/utils";
-
-
-export function apiLoadRecipe(recipe_id) {
-    return axios.get(`/api/recipe/${recipe_id}`).then((response) => {
-        return response.data
-    }).catch((err) => {
-        console.log(err)
-        makeToast('Error', 'There was an error loading a resource!', 'danger')
-    })
-}
diff --git a/vue/src/utils/utils.js b/vue/src/utils/utils.js
index 889e3c70..493e8f74 100644
--- a/vue/src/utils/utils.js
+++ b/vue/src/utils/utils.js
@@ -1,4 +1,15 @@
-import { BToast } from 'bootstrap-vue'
+/*
+* Utility functions to call bootstrap toasts
+* */
+import {BToast} from 'bootstrap-vue'
+
+export const ToastMixin = {
+    methods: {
+        makeToast: function (title, message, variant = null) {
+            return makeToast(title, message, variant)
+        }
+    }
+}
 
 export function makeToast(title, message, variant = null) {
     let toaster = new BToast()
@@ -8,4 +19,46 @@ export function makeToast(title, message, variant = null) {
         toaster: 'b-toaster-top-center',
         solid: true
     })
+}
+
+/*
+* Utility functions to use djangos gettext
+* */
+
+export const GettextMixin = {
+    methods: {
+        /**
+         * uses djangos javascript gettext implementation to localize text
+         * @param {string} param string to translate
+         */
+        _: function (param) {
+            return djangoGettext(param)
+        }
+    }
+}
+
+export function djangoGettext(param) {
+    return window.gettext(param)
+}
+
+/*
+* Utility function to use djangos named urls
+* */
+
+// uses https://github.com/ierror/django-js-reverse#use-the-urls-in-javascript
+export const ResolveUrlMixin = {
+    methods: {
+        /**
+         * Returns path of a django named URL
+         * @param {string} url name of url
+         * @param {*} params tuple of params to pass to django named url
+         */
+        resolveDjangoUrl: function (url, params) {
+            return resolveDjangoUrl(url, params)
+        }
+    }
+}
+
+export function resolveDjangoUrl(url, params) {
+    return window.Urls[url](params)
 }
\ No newline at end of file
diff --git a/vue/webpack-stats.json b/vue/webpack-stats.json
index a56daaad..bd4d042c 100644
--- a/vue/webpack-stats.json
+++ b/vue/webpack-stats.json
@@ -1 +1 @@
-{"status":"done","publicPath":"http://localhost:8080/","error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\apps\\RecipeView\\RecipeView.vue\n  47:11  error  'root_element' is not defined  no-undef\n\n✖ 1 problem (1 error, 0 warnings)\n","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.85b0fba40931a99bbc77.hot-update.js","publicPath":"http://localhost:8080/recipe_view.85b0fba40931a99bbc77.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.85b0fba40931a99bbc77.hot-update.js"}]}}
\ No newline at end of file
+{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.298e10642301889fe8ed.hot-update.js","publicPath":"http://localhost:8080/recipe_view.298e10642301889fe8ed.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.298e10642301889fe8ed.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):\n(Emitted value instead of an instance of Error) \n\n  Errors compiling template:\n\n  href=\"{% url 'view_export' %}?r={{ recipe.pk }}\": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id=\"{{ val }}\">, use <div :id=\"val\">.\n\n  34 |        </button>\n  35 |  \n  36 |        <a class=\"dropdown-item\" href=\"{% url 'view_export' %}?r={{ recipe.pk }}\" target=\"_blank\"\n     |                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  37 |           rel=\"noopener noreferrer\"><i class=\"fas fa-file-export fa-fw\"></i> {% trans 'Export' %}</a>\n  38 |        {% if recipe.internal %}\n"}
\ No newline at end of file