From f6ce35beb46dc22646be46bcf62f60230d000a14 Mon Sep 17 00:00:00 2001
From: Tomas 'Jethro' Pokorny <xtompok@gmail.com>
Date: Wed, 2 Dec 2020 01:42:15 +0100
Subject: [PATCH] TreeNodeEditor | funguje pridavani a editace vzoraku.

---
 seminar/views/views_rest.py                   | 51 +++++++++-
 seminar/viewsets.py                           |  6 +-
 vue_frontend/src/components/AddNewNode.vue    |  3 +-
 vue_frontend/src/components/TreeNode.vue      | 40 +++++---
 .../src/components/UlohaVzorakNode.vue        | 99 +++++++++++++++----
 5 files changed, 160 insertions(+), 39 deletions(-)

diff --git a/seminar/views/views_rest.py b/seminar/views/views_rest.py
index 4b748d26..9820c752 100644
--- a/seminar/views/views_rest.py
+++ b/seminar/views/views_rest.py
@@ -22,11 +22,6 @@ class UlohaSerializer(serializers.ModelSerializer):
 		model = m.Uloha
 		fields = '__all__'
 
-class UlohaVzorakNodeSerializer(serializers.ModelSerializer):
-	class Meta:
-		model = m.UlohaVzorakNode
-		fields = '__all__'
-		depth = DEFAULT_NODE_DEPTH
 	
 class RocnikNodeSerializer(serializers.ModelSerializer):
 	class Meta:
@@ -205,6 +200,52 @@ class UlohaZadaniNodeCreateSerializer(serializers.ModelSerializer):
 		fields = ('uloha','where','refnode')
 		depth = DEFAULT_NODE_DEPTH
 
+class UlohaVzorakNodeSerializer(serializers.ModelSerializer):
+	class Meta:
+		model = m.UlohaVzorakNode
+		fields = '__all__'
+		depth = DEFAULT_NODE_DEPTH
+	
+class UlohaVzorakNodeWriteSerializer(serializers.ModelSerializer):
+	uloha = serializers.PrimaryKeyRelatedField(queryset=m.Uloha.objects.all(), many=False, read_only=False)
+
+	class Meta:
+		model = m.UlohaVzorakNode
+		fields = ('id','uloha')
+		depth = DEFAULT_NODE_DEPTH
+	
+
+class UlohaVzorakNodeCreateSerializer(serializers.ModelSerializer):
+	uloha_id = serializers.IntegerField()
+	refnode = serializers.IntegerField()
+	where = serializers.CharField()
+
+	def create(self, validated_data):
+		uloha_id = validated_data.pop('uloha_id')
+		uloha = m.Uloha.objects.get(pk=uloha_id)
+		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.UlohaVzorakNode,uloha = uloha)
+		elif where == 'za':
+			node = treelib.create_node_after(refnode,m.UlohaVzorakNode,uloha = uloha)
+		elif where == 'pred':
+			node = treelib.create_node_before(refnode,m.UlohaVzorakNode,uloha = uloha)
+		node.refnode = None
+		node.where = None
+		node.uloha_id = None
+		
+		return node
+
+	class Meta:
+		model = m.UlohaVzorakNode
+		fields = ('refnode', 'uloha_id', 'where')
+		depth = DEFAULT_NODE_DEPTH
+
+
+
 
 class ReseniNodeSerializer(serializers.ModelSerializer):
 	class Meta:
diff --git a/seminar/viewsets.py b/seminar/viewsets.py
index 0f2eb472..a8779118 100644
--- a/seminar/viewsets.py
+++ b/seminar/viewsets.py
@@ -114,8 +114,10 @@ class CastNodeViewSet(PermissionMixin, ReadWriteSerializerMixin,viewsets.ModelVi
 		raise PermissionDenied('Nelze smazat CastNode, který má děti!')
 
 
-class UlohaVzorakNodeViewSet(PermissionMixin, viewsets.ModelViewSet):
-	serializer_class = views.UlohaVzorakNodeSerializer
+class UlohaVzorakNodeViewSet(PermissionMixin, ReadWriteSerializerMixin, viewsets.ModelViewSet):
+	read_serializer_class = views.UlohaVzorakNodeSerializer
+	write_serializer_class = views.UlohaVzorakNodeWriteSerializer
+	create_serializer_class = views.UlohaVzorakNodeCreateSerializer
 
 	def get_queryset(self):
 		queryset = m.UlohaVzorakNode.objects.all()
diff --git a/vue_frontend/src/components/AddNewNode.vue b/vue_frontend/src/components/AddNewNode.vue
index 0f4958ed..e2b4885a 100644
--- a/vue_frontend/src/components/AddNewNode.vue
+++ b/vue_frontend/src/components/AddNewNode.vue
@@ -6,7 +6,7 @@
 		<button v-if="types.includes('ulohaZadaniNode')" v-on:click="selected='ulohaZadaniNode'" :disabled="selected && selected !== 'ulohaZadaniNode'">Zadání úlohy</button>
 		<button v-if="types.includes('ulohaVzorakNode')" v-on:click="selected='ulohaVzorakNode'" :disabled="selected && selected !== 'ulohaVzorakNode'">Vzorák</button>
 		<div v-if="selected">
-			<component :is='selected' :item='null' :where="where" :refnode="refnode" create></component>
+			<component :is='selected' :item='null' :where="where" :refnode="refnode" :tema="tema" create></component>
 		</div>
 	</div>
 </template>
@@ -24,6 +24,7 @@ export default {
 		types: Array,
 		where: String,
 		refnode: Object,
+		tema: Object,
 	},
 	data: () => ({
 		selected: null,
diff --git a/vue_frontend/src/components/TreeNode.vue b/vue_frontend/src/components/TreeNode.vue
index 0d82b1a6..4c8e6b2a 100644
--- a/vue_frontend/src/components/TreeNode.vue
+++ b/vue_frontend/src/components/TreeNode.vue
@@ -1,16 +1,19 @@
 <template>
 
 	<div :class="editorMode ? 'treenode-org' : 'treenode'">
-	<!--b v-if="v_tematu">v tematu</b>
+	<!--b v-if="tema">v tematu</b>
 	<b v-if="visible">visible</b>
 	Force visible: {{String(force_visible)}}-->
 	<component :is='item.node.polymorphic_ctype.model' :item='item' :key='item.node.id'
+								:tema="temaOut"
 								:editorMode="editorMode"
 								:debugMode="debugMode"></component>
 
 
 	<button v-if="debugMode" v-on:click="debugShow = !debugShow" class="nodebug">Ladící data</button> <!-- bude tu nějaký if na class="nodebug", v debug módu bude tlačítko vidět, jinak ne -->
 	<div v-if="debugShow">
+		<pre>Tema: {{ tema }}</pre>
+		<pre>TemaOut: {{ temaOut }}</pre>
 		<pre>{{ item.node.polymorphic_ctype.model }}</pre>
 		<pre>{{ item }}</pre>
 	</div>
@@ -18,31 +21,31 @@
 	<div v-if="item.children.length === 0">
 		<div v-if="item.appendable_children.length > 0 && editorMode">
 			<b>Vložit jako syna: </b>
-			<addnewnode :types="item.appendable_children" :refnode="item.node" where="syn" />
+			<addnewnode :types="item.appendable_children" :refnode="item.node" :tema="temaOut" where="syn" />
 		</div>
 	</div>
 
 	<div v-else :class="editorMode ? 'children-org' : 'children'"> <!-- bude tu nějaký if na class="children" -->
 		<div v-if="item.children.length > 0 && item.children[0].appendable_siblings.length > 0 && editorMode">
 			<b>Vložit před: </b>
-			<addnewnode :types="item.children[0].appendable_siblings" :refnode="item.children[0].node" where="pred" /> 
+			<addnewnode :types="item.children[0].appendable_siblings" :refnode="item.children[0].node" :tema="temaOut" where="pred" /> 
 		</div>
 			<div v-if="item.node.polymorphic_ctype.model==='temavcislenode'">
 				<!--Children: {{String(showChildren)}}-->
 				<div v-for="(chld, index) in item.children" v-bind:key="chld.nazev" >
-					<!--Hide: {{hideNode(chld)}}, v tematu: {{v_tematu}}, force_visible: {{force_visible}}-->
+					<!--Hide: {{hideNode(chld)}}, v tematu: {{tema}}, force_visible: {{force_visible}}-->
 					<div v-if="!hideNode(chld)">
 						<div v-if="chld.node.polymorphic_ctype.model==='ulohazadaninode'">
 							<button v-if="showChildren" v-on:click="showChildren=!showChildren"> Schovat </button>
 							<button v-else v-on:click="showChildren=!showChildren"> Rozbalit </button>
-							<TreeNode :item="chld" :v_tematu="true"
+							<TreeNode :item="chld" :tema="temaOut"
 									:force_visible="showChildren"
 									:editorMode="editorMode"
 									:debugMode="debugMode">
 							</TreeNode>
 						</div>
 						<div v-else>
-							<TreeNode :item="chld" :v_tematu="true"
+							<TreeNode :item="chld" :tema="temaOut"
 									:force_visible="showChildren"
 									:editorMode="editorMode"
 									:debugMode="debugMode">
@@ -51,7 +54,7 @@
 						<div v-if="chld.appendable_siblings.length > 0 && editorMode" >
 							<b v-if="index < (item.children.length - 1)">Vložit mezi: </b>
 							<b v-else>Vložit za: </b>
-							<addnewnode :types="chld.appendable_siblings" :refnode="chld.node" where="za" /> 
+							<addnewnode :types="chld.appendable_siblings" :refnode="chld.node" :tema="temaOut" where="za" /> 
 						</div>
 					</div>
 				</div>
@@ -60,16 +63,16 @@
 			</div>
 			<div v-else>
 				<div v-for="(chld, index) in item.children" v-bind:key="chld.nazev" >
-					<div v-if="v_tematu && chld.node.polymorphic_ctype.model==='ulohazadaninode'">
+					<div v-if="tema !== null && chld.node.polymorphic_ctype.model==='ulohazadaninode'">
 						<div> Tady možná něco je </div>
-						<TreeNode :item="chld" :v_tematu="v_tematu"
+						<TreeNode :item="chld" :tema="temaOut"
 								:force_visible="force_visible"
 								:editorMode="editorMode"
 								:debugMode="debugMode">
 						</TreeNode>
 					</div>
 					<div v-else>
-						<TreeNode :item="chld" :v_tematu="v_tematu"
+						<TreeNode :item="chld" :tema="temaOut"
 								:force_visible="force_visible"
 								:editorMode="editorMode"
 								:debugMode="debugMode">
@@ -78,7 +81,7 @@
 					<div v-if="chld.appendable_siblings.length > 0 && editorMode" >
 						<b v-if="index < (item.children.length - 1)">Vložit mezi: </b>
 						<b v-else>Vložit za: </b>
-						<addnewnode :types="chld.appendable_siblings" :refnode="chld.node" where="za" /> 
+						<addnewnode :types="chld.appendable_siblings" :refnode="chld.node" :tema="temaOut" where="za" /> 
 					</div>
 				</div>
 			</div>
@@ -112,14 +115,15 @@ export default {
 	},
 	data: () => ({
 		debugShow: false,
-		showChildren: false
+		showChildren: false,
+		temaOut: null,
 	}),
 	computed: {
 	},
 	props: {
 		item: Object,
 		force_visible: Boolean,
-		v_tematu: Boolean,
+		tema: Object,
 		editorMode: Boolean,
 		debugMode: Boolean,
 	},
@@ -132,7 +136,17 @@ export default {
 				return false;
 			}
 			return true;
+		},
+	},
+	mounted: function(){
+		if (this.item.node.polymorphic_ctype.model === 'temavcislenode'){
+			this.temaOut = this.item.node.tema;
+			console.log(this.temaOut);
+		} else {
+			this.temaOut = this.tema;
 		}
+		
+
 	}
 }
 </script>
diff --git a/vue_frontend/src/components/UlohaVzorakNode.vue b/vue_frontend/src/components/UlohaVzorakNode.vue
index 35804198..9d388a4e 100644
--- a/vue_frontend/src/components/UlohaVzorakNode.vue
+++ b/vue_frontend/src/components/UlohaVzorakNode.vue
@@ -1,19 +1,23 @@
 <template>
 	<div class="ulohavzoraknode">
+		<template v-if="editorShow">
 		<!--pre>UlohaVzorakNode {{item}} {{typeof(item)}}</pre-->
 		<!--h5 v-if="!editorMode">Řešení {{item.node.uloha.cislo_zadani.poradi}}.{{ item.node.uloha.kod }}: {{ item.node.uloha.nazev }}</h5-->
-		<h5>Řešení!</h5>
-		<button v-if="editorMode" v-on:click="showSelect=!showSelect" class="upravit">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>
+				<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>
+				<button v-if="create" v-on:click="createNode">Vytvořit vzorák</button>
+				<button v-if="!create" v-on:click="saveNode">Uložit</button>
+		</template>
+		<template v-else>
+			<h5>Řešení {{item.node.uloha.cislo_zadani.poradi}}.{{item.node.uloha.kod}}: {{item.node.uloha.nazev}}</h5>
+			<button v-if="editorMode" v-on:click="editorShow = !editorShow">Upravit</button>
+		</template>
 	</div>
 </template>
 
@@ -27,21 +31,30 @@ export default {
 			isResult: false,
 			searchQuery: '',
 			searchResults: [],
-			showSelect: false,
 			selected: null,
-			selected_id: null
+			selected_id: null,
+			editorShow: false,
 		}
 	},
 	props: {
 		item: Object,
 		create: Boolean,
-		showSelect: Boolean,
 		editorMode: Boolean,
+		editorShow: Boolean,
+		tema: Object,
+		refnode: Object,
+		where: String,
 	},
 	mounted: function(){
+		axios.defaults.headers.common['X-CSRFToken'] = this.getCookie('csrftoken');
 		if (this.create){
-			this.showSelect = true;
-			console.log('Creating');
+			this.editorShow = true;
+			this.searchQuery = "";
+			this.selected_id = null;
+		} else {
+			this.searchQuery = this.item.node.uloha.nazev;
+			this.selected_id = this.item.node.uloha.id;
+			this.selected = this.item.node.uloha;
 		}
 		if (this.item !== null && this.item.node.uloha === null){
 			console.log("Uloha je null!");
@@ -49,9 +62,27 @@ export default {
 		}
 	},
 	methods: {
+		getCookie: function (name){
+			var cookieValue = null;
+			if (document.cookie && document.cookie != '') {
+				var cookies = document.cookie.split(';');
+				for (var i = 0; i < cookies.length; i++) {
+					var cookie = cookies[i].trim();
+					// Does this cookie string begin with the name we want?
+
+					if (cookie.substring(0, name.length + 1) == (name + '=')) {
+						cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+						break;
+					}
+				}
+			}
+			return cookieValue;
+		},
 		submitSearch: function(){
 			if (this.searchQuery.length < 3) { return;}
-			var reqURL = "/api/ulohavzoraknode/?nazev="+this.searchQuery;
+			let nazev = "nazev="+this.searchQuery+"&";
+			let nadproblem = "nadproblem="+this.tema.id+"&";
+			var reqURL = "/api/uloha/?"+nazev+nadproblem;
 			axios.get(reqURL).then( (response) => {
 				this.searchResults = response.data.results;
 				this.isResult = true;
@@ -64,6 +95,38 @@ export default {
 		setSelected: function(res){
 			this.searchQuery = res.nazev
 			this.selected_id = res.id
+			this.selected = res
+		},
+		createNode: function(){
+			console.log('Creating UlohaVzorakNode');
+			this.loading = true
+			axios.post('/api/ulohavzoraknode/',{
+				refnode: this.refnode.id,
+				where: this.where,
+				uloha_id: this.selected_id,
+			}).then(response => {
+				console.log(response.data);
+				this.loading=false;
+				this.$root.$emit('updateData',"ulohaZadaniNode create update");
+			}).catch( e => {
+				console.log(e);
+			});
+		},
+		saveNode: function(){
+			console.log('Saving UlohaVzorakNode');
+			this.loading = true
+			axios.put('/api/ulohavzoraknode/'+this.item.node.id+'/',{
+				id: this.item.node.id,
+				uloha: this.selected_id
+			}).then(response => {
+				console.log(response.data);
+				this.loading=false;
+				this.item.node = response.data;
+				this.$root.$emit('updateData',"ulohaZadaniNode save update");
+			}).catch( e => {
+				console.log(e);
+			});
+			this.editorShow = false;
 		}
 	}
 }