mamweb/vue_frontend/src/components/UlohaVzorakNode.vue

<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-->
				<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>

<script>
import axios from 'axios'

export default {
	name: 'UlohaVzorakNode',
	data: () => {
		return {
			isResult: false,
			searchQuery: '',
			searchResults: [],
			selected: null,
			selected_id: null,
			editorShow: false,
		}
	},
	props: {
		item: Object,
		create: 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.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!");
			console.log(this.item);
		}
	},
	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;}
			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;
				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
			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;
		}
	}
}
</script>

<style scoped>
.upravit {
	margin-top:-40px;
}
</style>