inherithandle · September 4, 2018 05:46
diff --git a/gistfile1.txt b/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>
	<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>