{{ recipe.name }}
+
+ {{ resolveDjangoUrl('api:recipe-detail', 5) }}
+
+
+
+
+
diff --git a/vue/src/utils/api.js b/vue/src/utils/api.js
index e69de29bb..7c431f9a8 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 f49f26e1b..000000000
--- 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 889e3c707..493e8f745 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 a56daaad8..bd4d042cf 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
+
+
+
+
+
+
+
+
+
+
+
+ , use
.\n\n 34 | \n 35 | \n 36 | {% trans 'Export' %}\n 38 | {% if recipe.internal %}\n"}
\ No newline at end of file