TreeNodeEditor | funkcni pridavani textu

Lze pridavat TextNode a CastNode.
Ukazka, jak by se mohly dat pridat UlohaZadaniNode.

mamweb/routers.py

@@ -3,7 +3,8 @@ from seminar import viewsets as vs
 
 router = routers.DefaultRouter()
 
-router.register(r'ulohavzoraknode', vs.UlohaVzorakNodeViewSet)
+router.register(r'ulohavzoraknode', vs.UlohaVzorakNodeViewSet,basename='ulohavzoraknode')
 router.register(r'text', vs.TextViewSet)
 router.register(r'textnode', vs.TextNodeViewSet)
+router.register(r'castnode', vs.CastNodeViewSet)
 

seminar/views/views_rest.py

@@ -92,7 +92,12 @@ class TextNodeCreateSerializer(serializers.ModelSerializer):
 		refnode_id = validated_data.pop('refnode')
 		refnode = m.TreeNode.objects.get(pk=refnode_id)
 		text = m.Text.objects.create(**temp_text)
+		if where == 'syn':
 			node = treelib.create_child(refnode,m.TextNode,text=text)
+		elif where == 'za':
+			node = treelib.create_node_after(refnode,m.TextNode,text=text)
+		elif where == 'pred':
+			node = treelib.create_node_before(refnode,m.TextNode,text=text)
 		node.where = None
 		node.refnode = None
 		return node
@@ -108,6 +113,30 @@ class CastNodeSerializer(serializers.ModelSerializer):
 		fields = '__all__'
 		depth = DEFAULT_NODE_DEPTH
 
+class CastNodeCreateSerializer(serializers.ModelSerializer):
+	refnode = serializers.CharField()
+	where = serializers.CharField()
+
+	def create(self,validated_data):
+		temp_nadpis = validated_data.pop('nadpis')
+		where = validated_data.pop('where')
+		refnode_id = validated_data.pop('refnode')
+		refnode = m.TreeNode.objects.get(pk=refnode_id)
+		if where == 'syn':
+			node = treelib.create_child(refnode,m.CastNode,nadpis=temp_nadpis)
+		elif where == 'za':
+			node = treelib.create_node_after(refnode,m.CastNode,nadpis=temp_nadpis)
+		elif where == 'pred':
+			node = treelib.create_node_before(refnode,m.CastNode,nadpis=temp_nadpis)
+		node.where = None
+		node.refnode = None
+		return node
+
+	class Meta:
+		model = m.CastNode
+		fields = ('nadpis','where','refnode')
+		depth = DEFAULT_NODE_DEPTH
+
 class ReseniNodeSerializer(serializers.ModelSerializer):
 	class Meta:
 		model = m.ReseniNode

seminar/viewsets.py

@@ -58,3 +58,20 @@ class TextNodeViewSet(ReadWriteSerializerMixin,viewsets.ModelViewSet):
 	queryset = m.TextNode.objects.all()
 	read_serializer_class = views.TextNodeSerializer
 	write_serializer_class = views.TextNodeWriteSerializer
+	create_serializer_class = views.TextNodeCreateSerializer
+
+class CastNodeViewSet(ReadWriteSerializerMixin,viewsets.ModelViewSet):
+	queryset = m.CastNode.objects.all()
+	read_serializer_class = views.CastNodeSerializer
+	write_serializer_class = views.CastNodeSerializer
+	create_serializer_class = views.CastNodeCreateSerializer
+
+class UlohaVzorakNodeViewSet(viewsets.ModelViewSet):
+	serializer_class = views.UlohaVzorakNodeSerializer
+
+	def get_queryset(self):
+		queryset = m.UlohaVzorakNode.objects.all()
+		nazev = self.request.query_params.get('nazev',None)
+		if nazev is not None:
+			queryset = queryset.filter(nazev__contains=nazev)
+		return queryset

vue_frontend/src/App.vue

@@ -1,8 +1,8 @@
 <template>
-	<div v-if="loading">
+	<div id="app">
+		<div id="loading" v-if="loading">
 		Loading...
 		</div>
-	<div v-else id="app">
 		<!--pre>
 		{{item}}
 		</pre-->
@@ -24,6 +24,10 @@ export default {
 	}),
 	mounted: function() {
 		this.getArticles();
+		this.$root.$on('updateData',(arg) => {
+			console.log(arg);
+			this.getArticles();
+		});
 	},
 	methods: {
 		getArticles: function() {
@@ -32,12 +36,19 @@ export default {
 			.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>

vue_frontend/src/components/AddNewNode.vue

@@ -27,13 +27,18 @@ export default {
 	},
 	data: () => ({
 		selected: null,
-		cast: 'castnode',
 	}),
 	components: {
 		castNode,
 		textNode,
 		ulohaZadaniNode,
 		ulohaVzorakNode,
+	},
+	mounted: function() {
+		this.$root.$on('dataUpdated',(arg) => {
+			this.selected = null;
+			console.log('dataUpdated'+arg);
+		});
 	}
 }
 </script>

vue_frontend/src/components/CastNode.vue

@@ -3,7 +3,7 @@
 		<!--pre>CastNode {{item}} {{typeof(item)}}</pre-->
 		<div v-if="editorShow">
 			<input type="text" v-model="currentText" />
-			<button v-on:click="updateText">Uložit</button>
+			<button v-on:click="saveText">Uložit</button>
 			<button v-on:click="currentText = originalText;editorShow=!editorShow;">Zahodit úpravy</button>
 		</div>
 		<div v-else>
@@ -13,6 +13,8 @@
 </template>
 
 <script>
+import axios from 'axios'
+
 export default {
 	name: 'CastNode',
 	data: () => ({
@@ -24,6 +26,8 @@ export default {
 		item: Object,
 		editorShow: Boolean,
 		create: Boolean,
+		where: String,
+		refnode: Object
 	},
 	mounted: function() {
 		if (this.create){
@@ -35,16 +39,45 @@ export default {
 			this.currentText = this.item.node.nadpis;
 			this.originalText = this.item.node.nadpis;
 		}
+
 		//this.getText();
 	},
 	methods: {
-		updateText: function() {
-			console.log("Saving text");
+		saveText: function() {
+			console.log("Saving cast");
 			console.log(this.currentText);
-			// FIXME really save!
+			if (this.create){
+				console.log(this.refnode);
+				console.log(this.where);
+				axios.post('/api/castnode/',{
+					'nadpis': this.currentText,
+					'refnode': this.refnode.id,
+					'where': this.where
+				}).then(response => {
+					this.originalText = response.data.nadpis;
+					this.$root.$emit('updateData',"castNode create update");
+				})
+				.catch(e => {
+					console.log(e);
+					this.errors.push(e);
+				});
+			} else {
+				axios.put('/api/castnode/'+this.item.node.id+'/',{
+					'nadpis': this.currentText,
+					'id': this.item.node.id
+				}).then(response => {
+					this.originalText = response.data.nadpis;
+				})
+				.catch(e => {
+					console.log(e);
+					this.errors.push(e)
+				});
+				
+			}
+
 			this.editorShow = false;
 		}
-	}, 
+		}
 }
 </script>
 

vue_frontend/src/components/TextNode.vue

@@ -6,7 +6,7 @@
 		<!--pre>TextNode {{item}} {{typeof(item)}}</pre-->
 		<div v-if="editorShow">
 			<component v-bind:is="editorComponent" :editor="editor" v-model="currentText" :config="editorConfig"></component>
-			<button v-on:click="updateText">Uložit</button>
+			<button v-on:click="saveText">Uložit</button>
 			<button v-on:click="currentText = originalText;editorShow=!editorShow;">Zahodit úpravy</button>
 		</div>
 		<div v-else v-bind:class="changedObject">
@@ -81,7 +81,7 @@ export default {
 				})
 		},
 		
-		updateText: function() {
+		saveText: function() {
 			console.log("Saving text");
 			console.log(this.currentText);
 			if (this.create){
@@ -91,7 +91,11 @@ export default {
 					'text': { 'na_web': this.currentText},
 					'refnode': this.refnode.id,
 					'where': this.where
-				}).then(response => {this.originalText = response.data.text.na_web})
+				}).then(response => {
+					this.originalText = response.data.text.na_web;
+					this.loading = false;
+					this.$root.$emit('updateData',"textNode create update");
+					})
 				.catch(e => {
 					this.errors.push(e)
 				});
@@ -99,24 +103,16 @@ export default {
 				axios.put('/api/textnode/'+this.item.node.id+'/',{
 					'text': { 'na_web': this.currentText},
 					'id': this.item.node.id
-				}).then(response => {this.originalText = response.data.text.na_web})
+				}).then(response => {
+					this.originalText = response.data.text.na_web;
+				})
 				.catch(e => {
 					this.errors.push(e)
 				});
 				
 			}
-
-			// FIXME really save!
 			this.editorShow = false;
 		},
-		save: function() {
-			console.log(this.item);
-			if (this.create){
-				console.log(this.refnode);
-				console.log(this.where);
-			}
-
-		}
 	}
 }
 </script>

vue_frontend/src/components/TreeNode.vue

@@ -5,13 +5,14 @@
 		<pre>{{ item.node.polymorphic_ctype.model }}</pre>
 		<pre>{{ item }}</pre>
 	</div>
-	<component :is='item.node.polymorphic_ctype.model' :item='item'></component>
+	<component :is='item.node.polymorphic_ctype.model' :item='item' :key='item.node.id'></component>
 	<div v-if="item.children.length === 0">
 	<div v-if="item.appendable_children.length > 0">
 		<b>Vložit jako syna</b>
 		<addnewnode :types="item.appendable_siblings" :refnode="item.node" where="syn" /> 
 	</div>
 	</div>
+	<div class="children">
 		<div v-if="item.children.length > 0 && item.children[0].appendable_siblings.length > 0">
 			<b>Vložit před</b>
 			<addnewnode :types="item.children[0].appendable_siblings" :refnode="item.children[0].node" where="pred" /> 
@@ -29,6 +30,7 @@
 			</li>
 		</ul>
 	</div>
+	</div>
 </template>
 
 <script>
@@ -85,4 +87,9 @@ a {
 	border-color: "black";
 	margin: 5px;
 }
+.children {
+	border: 1px solid;
+	border-color: #ff0000;
+	margin: 5px;
+}
 </style>

vue_frontend/src/components/UlohaVzorakNode.vue

@@ -1,22 +1,68 @@
 <template>
 	<div class="ulohavzoraknode">
 		<!--pre>UlohaVzorakNode {{item}} {{typeof(item)}}</pre-->
-		<!--h5>Řešení {{item.node.uloha.cislo_zadani.poradi}}.{{ item.node.uloha.kod }}: {{ item.node.uloha.nazev }}</h5-->
+		<h5>Řešení {{item.node.uloha.cislo_zadani.poradi}}.{{ item.node.uloha.kod }}: {{ item.node.uloha.nazev }}</h5>
+		<button v-on:click="showSelect=!showSelect">Upravit</button>
+		<div v-if="showSelect">
+			<form class="searchForm" v-on:submit.prevent="submitSearch">
+				<input type="text" v-model="searchQuery" placeholder="Napište název" @keyup="submitSearch">
+			</form>
+			<div class="searchResult" v-show="isResult">
+				<ul>
+					<li v-for="res in searchResults" :key="res.id" v-on:click="setSelected(res)">{{res.nazev}}</li>
+				</ul>
+			</div>
+		</div>
 	</div>
 </template>
 
 <script>
+import axios from 'axios'
+
 export default {
 	name: 'UlohaVzorakNode',
+	data: () => {
+		return {
+			isResult: false,
+			searchQuery: '',
+			searchResults: [],
+			showSelect: false,
+			selected: null,
+			selected_id: null
+		}
+	},
 	props: {
 		item: Object,
-		create: Boolean
+		create: Boolean,
+		showSelect: Boolean,
 	},
 	mounted: function(){
 		if (this.item.node.uloha === null){
 			console.log("Uloha je null!");
 			console.log(this.item);
 		}
+		if (this.create){
+			this.showSelect = true;
+			console.log('Creating');
+		}
+	},
+	methods: {
+		submitSearch: function(){
+			if (this.searchQuery.length < 3) { return;}
+			var reqURL = "/api/ulohavzoraknode/?nazev="+this.searchQuery;
+			axios.get(reqURL).then( (response) => {
+				this.searchResults = response.data.results;
+				this.isResult = true;
+				console.log("Got:");
+				console.log(this.searchResults);
+			}).catch( (err) => { /* fail response msg */
+				console.log(err);
+			});
+		},
+		setSelected: function(res){
+			this.searchQuery = res.nazev
+			this.selected_id = res.id
+		}
 	}
 }
 </script>

vue_frontend/src/components/UlohaZadaniNode.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="ulohazadaninode">
 		<!--pre>UlohaZadaniNode {{item.node.uloha}} {{typeof(item)}}</pre-->
-		<!--h5>Zadání {{item.node.uloha.cislo_zadani.poradi}}.{{ item.node.uloha.kod }}: {{ item.node.uloha.nazev }}</h5-->
+		<h5>Zadání {{item.node.uloha.cislo_zadani.poradi}}.{{ item.node.uloha.kod }}: {{ item.node.uloha.nazev }}</h5>
 	</div>
 </template>