to do list implemantion

shlomialon · shlomialon · commit d28372a711a4 · 2017-11-22T15:34:04.000+02:00
diff --git a/components/task-add.js b/components/task-add.js
@@ -0,0 +1,29 @@
+Vue.component('task-add', {
+    template: `
+<div>
+    <input v-on:keyup.enter="addToList" v-model="newItemText" type="text" placeholder="insert task to list.."/>
+    <button v-on:click="addToList">
+        Add Item
+    </button>
+</div>
+`,
+    data: function () {
+        return {
+            newItemText:""
+        }
+    },
+    props: ['items'],
+    methods: {
+        addToList: function () {
+            if (this.items.indexOf(this.newItem) >= 0) {
+            } else this.items.push({
+                text: this.newItemText,
+                activity: false,
+                id: this.items.length
+            });
+            this.newItem = {text: null};
+        },
+    },
+});
+
+
diff --git a/components/task-delete.js b/components/task-delete.js
@@ -0,0 +1,9 @@
+Vue.component('task-delete',{
+    template:`<button v-bind:style="{'background-color':'yellow'}" @click="removeItem" >Delete</button>`,
+    props: ['item'],
+    methods: {
+     removeItem:function () {
+         this.$emit("remove-item",this.item);
+     }
+    }
+});
diff --git a/components/task-details.js b/components/task-details.js
@@ -0,0 +1,20 @@
+Vue.component('task-details', {
+    template: `  
+  <div v-if="selectedItem">
+        <label  for="item-text">text:</label>
+        <input id="item-text" type=text v-model="selectedItem.text"/>
+        <button v-bind:style="{'background-color': selectedItem.activity ? '#4CAF50' : 'red'}" v-on:click="selectedItem.activity = !selectedItem.activity">{{selectedItem.activity}}</button>
+        <task-delete :item="selectedItem" v-on:remove-item="removeItem"></task-delete>
+    </div>
+`,
+    props: ['selectedItem'],
+    data: function () {
+        return {
+        }
+    },
+    methods: {
+        removeItem: function (item) {
+            this.$emit("remove-item",item);
+        }
+    }
+});
diff --git a/components/task-item.js b/components/task-item.js
@@ -0,0 +1,9 @@
+Vue.component("task-item",{
+   template:`  <div @click='selectItemEdit(item)' v-bind:style="{'text-decoration': item.activity ? 'line-through' : null}">{{item.text}} </div>` ,
+    props: ['item'],
+    methods:{
+        selectItemEdit: function (item) {
+            this.$emit('select-item', item);
+        },
+    }
+});
diff --git a/components/task-list.js b/components/task-list.js
@@ -0,0 +1,17 @@
+Vue.component('task-list', {
+    template: `
+<div>
+    <ul>
+        <li v-for="item in items">
+          <task-item :item="item" v-on:select-item="selectItemEdit"></task-item>
+        </li>
+    </ul>
+</div>
+`,
+    props: ['items','selectedItem'],
+    methods: {
+        selectItemEdit: function (item) {
+            this.$emit('select-item', item);
+        },
+    },
+});
diff --git a/todo.html b/todo.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+<div id="app">
+    <task-add :items="items"></task-add>
+    <task-list :items="items"  v-on:select-item="selectItem" v-on:remove-item="removeItem" :selected-item="selectedItem"></task-list>
+    <task-details :selected-item="selectedItem" v-on:remove-item="removeItem"></task-details>
+</div>
+
+<script src="https://unpkg.com/vue"></script>
+<script src="components/task-add.js"></script>
+<script src="components/task-list.js"></script>
+<script src="components/task-details.js"></script>
+<script src="components/task-delete.js"></script>
+<script src="components/task-item.js"></script>
+<script src="todo.js"></script>
+</body>
+</html>
diff --git a/todo.js b/todo.js
@@ -0,0 +1,25 @@
+var app = new Vue({
+    el: '#app',
+    data: {
+        items: [],
+        selectedItem: null,
+    },
+    methods : {
+        selectItem : function (item) {
+            console.log('selectItem: ', item);
+            this.selectedItem = item;
+        },
+        removeItem: function (itemToRemove) {
+            console.log('removeItem: ', itemToRemove);
+            var idx = this.items.map(function (item) {
+                return item.id;
+            }).indexOf(itemToRemove.id);
+
+            if (idx !== -1) {
+                this.items.splice(idx, 1);
+            }
+
+            this.selectedItem = null;
+        }
+    }
+});
