fixed some breaking changes due to dependency updates

recipes/urls.py

@@ -15,7 +15,6 @@ Including another URLconf
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
 from django.conf import settings
-from django.conf.urls import url
 from django.contrib import admin
 from django.urls import include, path, re_path
 from django.views.i18n import JavaScriptCatalog
@@ -35,7 +34,7 @@ urlpatterns = [
 ]
 
 if settings.ENABLE_METRICS:
-    urlpatterns += url('', include('django_prometheus.urls')),
+    urlpatterns += re_path('', include('django_prometheus.urls')),
 
 if settings.GUNICORN_MEDIA or settings.DEBUG:
     urlpatterns += re_path(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),

requirements.txt

@@ -1,4 +1,4 @@
-Django==3.2.13
+Django==4.0.4
 cryptography==37.0.2
 django-annoying==0.10.6
 django-autocomplete-light==3.9.4
@@ -27,7 +27,7 @@ beautifulsoup4==4.11.1
 microdata==0.8.0
 Jinja2==3.1.2
 django-webpack-loader==1.5.0
-django-js-reverse==0.9.1
+git+https://github.com/ierror/django-js-reverse@7cab78c4531780ab4b32033d5104ccd5be1a246a
 django-allauth==0.50.0
 recipe-scrapers==14.1.0
 django-scopes==1.2.0.post1

vue/package.json

@@ -9,7 +9,6 @@
   },
   "dependencies": {
     "@babel/eslint-parser": "^7.16.0",
-    "@kangc/v-md-editor": "^1.7.11",
     "@kevinfaguiar/vue-twemoji-picker": "^5.7.4",
     "@popperjs/core": "^2.11.2",
     "@riophae/vue-treeselect": "^0.4.0",
@@ -22,6 +21,7 @@
     "core-js": "^3.20.3",
     "html2pdf.js": "^0.10.1",
     "lodash": "^4.17.21",
+    "mavon-editor": "^2.10.4",
     "moment": "^2.29.1",
     "prismjs": "^1.27.0",
     "vue": "^2.6.14",
@@ -34,7 +34,7 @@
     "vue-multiselect": "^2.1.6",
     "vue-property-decorator": "^9.1.2",
     "vue-sanitize": "^0.2.2",
-    "vue-simple-calendar": "^5.0.1",
+    "vue-simple-calendar": "^6.0.4",
     "vue-template-compiler": "^2.6.14",
     "vue2-touch-events": "^3.2.2",
     "vuedraggable": "^2.24.3",
@@ -45,18 +45,18 @@
     "@kazupon/vue-i18n-loader": "^0.5.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.32.0",
-    "@vue/cli-plugin-babel": "~4.5.13",
+    "@vue/cli-plugin-babel": "^5.0.4",
     "@vue/cli-plugin-eslint": "~5.0.4",
-    "@vue/cli-plugin-pwa": "~4.5.13",
+    "@vue/cli-plugin-pwa": "^5.0.4",
-    "@vue/cli-plugin-typescript": "^4.5.15",
+    "@vue/cli-plugin-typescript": "^5.0.4",
-    "@vue/cli-service": "~4.5.15",
+    "@vue/cli-service": "^5.0.4",
     "@vue/compiler-sfc": "^3.2.29",
     "@vue/eslint-config-typescript": "^10.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.28.0",
     "eslint-plugin-vue": "^8.7.1",
-    "typescript": "~4.5.5",
+    "typescript": "~4.5.0",
-    "vue-cli-plugin-i18n": "^2.1.1",
+    "vue-cli-plugin-i18n": "^0.6.1",
     "webpack-bundle-tracker": "1.4.0",
     "workbox-expiration": "^6.3.0",
     "workbox-navigation-preload": "^6.0.2",
@@ -69,8 +69,7 @@
     "env": {
       "node": true
     },
-    "extends": [
+    "extends": [      "plugin:vue/vue3-essential",
-      "plugin:vue/vue3-essential",
       "eslint:recommended",
       "@vue/typescript"
     ],

vue/src/apps/MealPlanView/MealPlanView.vue

@@ -270,7 +270,7 @@ import draggable from "vuedraggable"
 import VueCookies from "vue-cookies"
 
 import {ApiMixin, StandardToasts, ResolveUrlMixin} from "@/utils/utils"
-import {CalendarView, CalendarMathMixin} from "vue-simple-calendar/src/components/bundle"
+import {CalendarView, CalendarMath} from "vue-simple-calendar"
 import {ApiApiFactory} from "@/utils/openapi/api"
 
 const {makeToast} = require("@/utils/utils")
@@ -293,7 +293,7 @@ export default {
         EmojiInput,
         draggable,
     },
-    mixins: [CalendarMathMixin, ApiMixin, ResolveUrlMixin],
+    mixins: [CalendarMath, ApiMixin, ResolveUrlMixin],
     data: function () {
         return {
             showDate: new Date(),

vue/src/apps/RecipeEditView/RecipeEditView.vue

@@ -370,7 +370,8 @@
                                                     <div v-for="(ingredient, index) in step.ingredients"
                                                          :key="ingredient.id">
                                                         <hr class="d-md-none"/>
-                                                        <div class="text-center" v-if="ingredient.original_text !== null">
+                                                        <div class="text-center"
+                                                             v-if="ingredient.original_text !== null">
                                                             <small class="text-muted"><i class="fas fa-globe"></i>
                                                                 {{ ingredient.original_text }}</small>
                                                         </div>
@@ -556,14 +557,9 @@
                             <div class="row pt-2" v-if="step.instruction_visible">
                                 <div class="col-md-12">
                                     <label :for="'id_instruction_' + step.id">{{ $t("Instructions") }}</label>
-                                    <v-md-editor
+                                    <mavon-editor v-model="step.instruction"
-                                        v-model="step.instruction"
+                                                  style="height: 40vh; z-index: auto" :id="'id_instruction_' + step.id" :language="'en'"
-                                        height="30vh"
+                                                  :toolbars="md_editor_toolbars"/>
-                                        left-toolbar="undo redo | h bold italic strikethrough quote | ul ol table hr | link image code"
-                                        right-toolbar="preview sync-scroll fullscreen"
-                                        :id="'id_instruction_' + step.id"
-                                        mode="edit"
-                                    ></v-md-editor>
 
                                     <!-- TODO markdown DOCS link and markdown editor -->
                                 </div>
@@ -684,22 +680,12 @@ import Multiselect from "vue-multiselect"
 import {ApiApiFactory} from "@/utils/openapi/api"
 import LoadingSpinner from "@/components/LoadingSpinner"
 
-import VueMarkdownEditor from "@kangc/v-md-editor"
-import "@kangc/v-md-editor/lib/style/base-editor.css"
-import vuepressTheme from "@kangc/v-md-editor/lib/theme/vuepress.js"
-import "@kangc/v-md-editor/lib/theme/style/vuepress.css"
-import Prism from "prismjs"
-
-VueMarkdownEditor.use(vuepressTheme, {
-    Prism,
-})
-
-import enUS from "@kangc/v-md-editor/lib/lang/en-US"
 import GenericModalForm from "@/components/Modals/GenericModalForm"
 
-VueMarkdownEditor.lang.use("en-US", enUS)
+import mavonEditor from 'mavon-editor'
-
+import 'mavon-editor/dist/css/index.css'
-Vue.use(VueMarkdownEditor)
+// use
+Vue.use(mavonEditor)
 
 Vue.use(BootstrapVue)
 
@@ -730,6 +716,35 @@ export default {
             step_for_file_create: undefined,
             additional_visible: false,
             create_food: undefined,
+            md_editor_toolbars: {
+                bold: true,
+                italic: true,
+                header: true,
+                underline: true,
+                strikethrough: true,
+                mark: true,
+                superscript: true,
+                subscript: true,
+                quote: true,
+                ol: true,
+                ul: true,
+                link: true,
+                imagelink: false,
+                code: true,
+                table: true,
+                fullscreen: true,
+                readmodel: true,
+                htmlcode: true,
+                help: true,
+                undo: true,
+                redo: true,
+                navigation: true,
+                alignleft: false,
+                aligncenter: false,
+                alignright: false,
+                subfield: true,
+                preview: true,
+            }
         }
     },
     computed: {
@@ -1034,7 +1049,7 @@ export default {
                     if (this.recipe !== undefined) {
                         for (let s of this.recipe.steps) {
                             for (let i of s.ingredients) {
-                                if (i.unit !== null && i.unit.id === undefined && !unique_units.includes(i.unit.name) ) {
+                                if (i.unit !== null && i.unit.id === undefined && !unique_units.includes(i.unit.name)) {
                                     this.units.push(i.unit)
                                 }
                             }

vue/vue.config.js

@@ -79,8 +79,8 @@ module.exports = {
             swDest: "../../templates/sw.js",
             manifestTransforms: [
                 (originalManifest) => {
-                    const result = originalManifest.map((entry) => new Object({ url: "static/vue/" + entry.url }))
+                    const result = originalManifest.map((entry) => new Object({url: "static/vue/" + entry.url}))
-                    return { manifest: result, warnings: [] }
+                    return {manifest: result, warnings: []}
                 },
             ],
         },
@@ -117,17 +117,20 @@ module.exports = {
         })
         */
 
-        config.plugin("BundleTracker").use(BundleTracker, [{ relativePath: true, path: "../vue/" }])
+        config.plugin("BundleTracker").use(BundleTracker, [{relativePath: true, path: "../vue/"}])
 
         config.resolve.alias.set("__STATIC__", "static")
 
         config.devServer
-            .public("http://localhost:8080")
             .host("localhost")
             .port(8080)
-            .hotOnly(true)
+            .set('hot', 'only')
-            .watchOptions({ poll: 500 })
+            .set('static', {watch: true})
+            // old webpack dev server v3 settings
+            //  .hotOnly(true)
+            //   .watchOptions({ poll: 500 })
+            //  .public("http://localhost:8080")
             .https(false)
-            .headers({ "Access-Control-Allow-Origin": ["*"] })
+            .headers({"Access-Control-Allow-Origin": ["*"]})
     },
 }