Skip to content

Instantly share code, notes, and snippets.

@inherithandle

inherithandle/gist:e61a5ab2809581a5d36de08b4e4349f1

Created September 4, 2018 05:46
Show Gist options
  • Save inherithandle/e61a5ab2809581a5d36de08b4e4349f1 to your computer and use it in GitHub Desktop.
Save inherithandle/e61a5ab2809581a5d36de08b4e4349f1 to your computer and use it in GitHub Desktop.
Download ZIP
vue js not updated
Raw
gistfile1.txt
<html>
<head>
<title>Todo App</title>
<!-- <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'> -->
<link rel="stylesheet" href="/todo.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<template id="project">
<div class="project-container">
<p>
<label for="new-task">Add Project</label>
<input type="text" v-model="newTodo" @:click="addBtnClicked"><button>Add</button>
</p>
<h3>Project</h3>
<ul id="projects">
<li v-for="(project, index) in projects" v-bind:class="{'selected' : project.selected}" @click="liClicked(index, $event)">
<label v-if="!project.edited">{{project.projectName}}</label>
<input type="text" v-if="project.edited" v-model="project.newProjectName">
<button class="edit" @click="editBtnClicked(index)">Edit</button><button class="delete">Delete</button>
</li>
</ul>
</div>
</template>
<template id="todos">
<div class="todo-container">
<p>
<label for="new-task">Add Item</label>
<input id="new-task" type="text"><button>Add</button>
</p>
<h3>Things to do</h3>
<ul id="incomplete-tasks">
<li v-for="(todo, index) in todos">
<input type="checkbox">
<label>{{ todo.text }}</label>
<input type="text"><button class="edit">Edit</button>
<button class="delete">Delete</button>
</li>
</ul>
<h3>Completed</h3>
<ul id="completed-tasks">
<li><input type="checkbox" checked><label>See the Doctor</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
</ul>
</div>
</template>
<div class="root-container" id="root-container">
<h1>TODO LIST powered by SpringBoot</h1>
<h2>user : ${user.username}</h2>
<project v-on:project-selected="projectSelected" v-bind:projects="projects" v-on:edit-btn-clicked="editBtnClicked"></project>
<todos v-bind:current-index="currentIndex" v-bind:projects="projects"></todos>
</div>
<script type="text/javascript" src="/library/jQuery3.3.1.js"></script>
<script type="text/javascript" src="/library/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var data = {
items: [{ text: 'Bananas', checked: true }, { text: 'Apples', checked: false }],
title: 'My Shopping List',
newItem: ''
};
Vue.component("project", {
template: "#project",
props: ['projects'],
data : function() {
return {
newTodo : ''
}
},
methods : {
addBtnClicked : function () {
var newTodo;
newTodo = this.newTodo.trim();
if (newTodo === '') {
alert("todo name is required");
} else {
axios
.post('/rest/projects')
.then(response => {
var a = response;
});
}
},
liClicked : function (index, event) {
this.$emit('project-selected', index);
},
editBtnClicked : function (index) {
this.$emit('edit-btn-clicked', index);
}
}
});
Vue.component("todos", {
template: "#todos",
props: ['projects', 'currentIndex'],
data : function() {
return {
newTodo : ''
}
},
methods : {
liClicked : function (index, event) {
return null;
}
},
computed : {
todos : function() {
if (this.projects && this.projects[this.currentIndex] && this.projects[this.currentIndex].todos) {
return this.projects[this.currentIndex].todos;
} else {
return null;
}
}
}
});
new Vue({
el: '#root-container',
data: function() {
return {
projects: [],
currentIndex : 0
}
},
methods: {
addItem: function () { // to be removed...
return null;
},
projectSelected : function (index) {
var selectedProject = this.projects.find(e => {
return e.selected;
});
selectedProject.selected = false;
this.projects[index].selected = true;
this.currentIndex = index;
},
editBtnClicked : function (index) {
var promise = null;
if (this.projects[this.currentIndex].edited == true) {
if (this.projects[this.currentIndex].projectName !== this.projects[this.currentIndex].newProjectName) {
this.projects[this.currentIndex].projectName = this.projects[this.currentIndex].newProjectName;
promise = axios.put('/rest/project', this.projects[this.currentIndex]);
}
}
// TODO : refactor
if (promise != null) {
const self = this;
console.log('not null');
promise.then(response => {
console.log('edited soon');
console.log('edited before value');
console.log(self.projects[self.currentIndex].edited);
console.log('edited after value');
this.projects[this.currentIndex].edited = !(this.projects[this.currentIndex].edited);
console.log(self.projects[self.currentIndex].edited);
});
} else {
console.log('adsf');
this.projects[this.currentIndex].edited = !(this.projects[this.currentIndex].edited);
}
}
},
mounted : function () {
axios
.get('/rest/projects')
.then(response => {
console.log(response.data);
this.projects = response.data;
for (var i in this.projects) {
this.projects[i].newProjectName = this.projects[i].projectName;
this.projects[i].edited = false;
}
});
// TODO : put username into session storage if session storage is empty.
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment