TreeNode editor | moznost volit treenode id v url

seminar/urls.py

@@ -1,4 +1,4 @@
-from django.urls import path, include
+from django.urls import path, include, re_path
 from django.contrib.auth.decorators import user_passes_test
 from . import views, export
 from .utils import staff_member_required
@@ -120,7 +120,7 @@ urlpatterns = [
 	path('temp/add_solution', views.AddSolutionView.as_view(),name='seminar_vloz_reseni'),
 	path('temp/nahraj_reseni', views.NahrajReseniView.as_view(),name='seminar_nahraj_reseni'),
 
-	path('temp/vue',views.VueTestView.as_view(),name='vue_test_view'),
+	re_path(r'^temp/vue/.*$',views.VueTestView.as_view(),name='vue_test_view'),
 
 	path('', views.TitulniStranaView.as_view(), name='titulni_strana'),
 

vue_frontend/package.json

@@ -12,7 +12,8 @@
     "@ckeditor/ckeditor5-vue": "^1.0.1",
     "axios": "^0.19.2",
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-router": "^3.4.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.0",

vue_frontend/src/App.vue

@@ -1,58 +1,7 @@
 <template>
-	<div id="app">
+  <router-view id="app"/>
-		<div id="loading" v-if="loading">
-		Loading...
-		</div>
-		<!--pre>
-		{{item}}
-		</pre-->
-		<TreeNode :item="item"/>
-	</div>
 </template>
 
 <script>
-import TreeNode from './components/TreeNode.vue'
+export default { name: 'app' }
-import axios from 'axios'
-export default {
-	name: 'App',
-	components: {
-		TreeNode,
-	},
-	data: () => ({
-		loading: true,
-		item: null
-	}),
-	mounted: function() {
-		this.getArticles();
-		this.$root.$on('updateData',(arg) => {
-			console.log(arg);
-			this.getArticles();
-		});
-	},
-	methods: {
-		getArticles: function() {
-			this.loading = true;
-			axios.get('/treenode/1/json/')
-			.then((response) => {
-				this.item = response.data;
-				this.loading = false;
-				console.log('Data updated');
-				this.$root.$emit('dataUpdated',"dataUpdated");
-			})
-			.catch((err) => {
-				this.loading = false;
-				console.log(err);
-				})
-		}
-	},
-	events: {
-		updateData: function(){
-			this.getArticles()
-		}
-	}
-}
 </script>
-
-<style>
-@import '../../mamweb/static/css/mamweb.css';
-</style>

vue_frontend/src/components/TreeNodeRoot.vue

@@ -0,0 +1,62 @@
+<template>
+	<div id="app">
+		<div id="loading" v-if="loading">
+		Loading...
+		</div>
+		<!--pre>
+		{{item}}
+		</pre-->
+		<TreeNode :item="item"/>
+	</div>
+</template>
+
+<script>
+import TreeNode from './TreeNode.vue'
+import axios from 'axios'
+export default {
+	name: 'App',
+	components: {
+		TreeNode,
+	},
+	data: () => ({
+		loading: true,
+		item: null,
+		tnid: 1
+	}),
+	props:{
+		tnid: Number
+	},
+	mounted: function() {
+		this.getArticles();
+		this.$root.$on('updateData',(arg) => {
+			console.log(arg);
+			this.getArticles();
+		});
+	},
+	methods: {
+		getArticles: function() {
+			this.loading = true;
+			axios.get('/treenode/'+this.tnid+'/json/')
+			.then((response) => {
+				this.item = response.data;
+				this.loading = false;
+				console.log('Data updated');
+				this.$root.$emit('dataUpdated',"dataUpdated");
+			})
+			.catch((err) => {
+				this.loading = false;
+				console.log(err);
+				})
+		}
+	},
+	events: {
+		updateData: function(){
+			this.getArticles()
+		}
+	}
+}
+</script>
+
+<style>
+@import '../../../mamweb/static/css/mamweb.css';
+</style>

vue_frontend/src/main.js

@@ -1,10 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
 import CKEditor from '@ckeditor/ckeditor5-vue'
 
 Vue.config.productionTip = false
 Vue.use(CKEditor);
 
 new Vue({
-  render: h => h(App),
+	router,
+	render: h => h(App),
 }).$mount('#app')

vue_frontend/src/router/index.js

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import TreeNodeRoot from '../components/TreeNodeRoot.vue'
+
+Vue.use(Router)
+
+export default new Router({
+	mode: 'history',
+	linkActiveClass: 'active',
+	routes: [{
+		path: '/temp/vue',
+		name: 'treenodedefault',
+		props: {'tnid': 1},
+		component: TreeNodeRoot
+	}, {
+		path: '/temp/vue/:tnid',
+		name: 'treenode',
+		props: true,
+		component: TreeNodeRoot
+	},
+	]
+})
+

vue_frontend/yarn.lock

@@ -8122,6 +8122,11 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-router@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.3.tgz#fa93768616ee338aa174f160ac965167fa572ffa"
+  integrity sha512-BADg1mjGWX18Dpmy6bOGzGNnk7B/ZA0RxuA6qedY/YJwirMfKXIDzcccmHbQI0A6k5PzMdMloc0ElHfyOoX35A==
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"