From a34f1d0a99d257c0a25418cd5cdcf65e74dfd07b Mon Sep 17 00:00:00 2001
From: donal <donalspring@gmail.com>
Date: Fri, 23 Mar 2018 18:00:19 +0100
Subject: [PATCH] WIP - heading for flight commit before i go
---
src/components/ListOfTodos.vue | 59 ++++++++++++++
/dev/null | 30 -------
src/views/Catalog.vue | 18 ++++
src/components/NewTodo.vue | 8 +
tests/unit/NewTodoList.spec.js | 21 +++++
src/components/TodoItem.vue | 48 ++++++++++++
src/services/EventBus.js | 6 +
7 files changed, 157 insertions(+), 33 deletions(-)
diff --git a/src/components/ListOfTodos.vue b/src/components/ListOfTodos.vue
new file mode 100644
index 0000000..fd84ca9
--- /dev/null
+++ b/src/components/ListOfTodos.vue
@@ -0,0 +1,59 @@
+<template>
+ <md-list>
+ <!-- TODO - change to an actual KEY when i connect to the DB -->
+ <div v-for="item in todos" :key="item.id" >
+ <TodoItem
+ :todoItem=item
+ ></TodoItem>
+ </div>
+ </md-list>
+</template>
+
+
+<script>
+import TodoItem from "@/components/TodoItem.vue";
+import EventBus from "@/services/EventBus"
+export default {
+ name: "ListOfTodos",
+ props: {
+
+ },
+ components: {
+ TodoItem
+ },
+ data () {
+ return {
+ todos: [{
+ msg: 'Have a poop',
+ id: '123',
+ complete: false
+ },{
+ msg: 'Learn Vue JS',
+ id: '132',
+ complete: false
+ },{
+ msg: 'Love DevOps',
+ id: '321',
+ complete: false
+ }]
+ }
+ },
+ created () {
+ const self = this
+ EventBus.$on('NEWTODOADDED', function (todo) {
+ console.info('INFO - NEWTODOADDED received ', todo)
+ self.todos.push(todo);
+ });
+ },
+ methods: {
+ updateTodoList(todo) {
+ this.todos.push(todo);
+ }
+ }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+</style>
diff --git a/src/components/NewTodo.vue b/src/components/NewTodo.vue
index 3192f6b..da2ad43 100644
--- a/src/components/NewTodo.vue
+++ b/src/components/NewTodo.vue
@@ -8,6 +8,8 @@
</md-field>
</template>
<script>
+import EventBus from "@/services/EventBus"
+
export default {
name: "NewTodo",
props: {
@@ -22,7 +24,11 @@
newTodoAdded (e) {
this.newTodo = e.target.value
console.info('INFO - ', this.newTodo)
- this.$emit('NEW_TODO_ADDED', { message: this.newTodo })
+ EventBus.$emit('NEWTODOADDED', {
+ completed: false,
+ msg: this.newTodo,
+ id: Math.floor(1 + (9999 - 1) * Math.random())
+ })
this.newTodo = ''
}
}
diff --git a/src/components/TodoItem.vue b/src/components/TodoItem.vue
new file mode 100644
index 0000000..6c2081e
--- /dev/null
+++ b/src/components/TodoItem.vue
@@ -0,0 +1,48 @@
+<template>
+ <div>
+ <md-list-item
+ @click="markDone"
+ >
+ <md-checkbox :value="isActive" />
+ <span class="md-list-item-text" :class="{'strike-through': isActive}">{{ todoItem.msg }}</span>
+ </md-list-item>
+ </div>
+</template>
+<script>
+export default {
+ name: "TodoItem",
+ props: {
+ // type any object ;)
+ todoItem: {}
+ },
+ data () {
+ return {
+ isActive: false
+ }
+ },
+ methods: {
+ markDone () {
+ // set to greyed out / true false
+ this.isActive = !this.isActive;
+ console.info('INFO - ', this.todoItem , this.isActive)
+ }
+ }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.md-list {
+ width: 320px;
+ max-width: 100%;
+ height: 400px;
+ display: inline-block;
+ overflow: auto;
+ border: 1px solid rgba(#000, .12);
+ vertical-align: top;
+}
+
+.strike-through {
+ text-decoration: line-through;
+}
+</style>
diff --git a/src/components/TodoList.vue b/src/components/TodoList.vue
deleted file mode 100644
index c0daae7..0000000
--- a/src/components/TodoList.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
- <ul>
- <li v-for="item in items" :key="item">
- {{ item.message }}
- </li>
- </ul>
-</template>
-
-<script>
-export default {
- name: "TodoList",
- props: {
- item: [
- { message: "todo list" }
- ]
- }
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-ul {
- list-style-type: none;
- padding: 0;
-}
-li {
- display: inline-block;
- margin: 0 10px;
-}
-</style>
diff --git a/src/services/EventBus.js b/src/services/EventBus.js
new file mode 100644
index 0000000..19128bf
--- /dev/null
+++ b/src/services/EventBus.js
@@ -0,0 +1,6 @@
+// Worlds smallest event bus ;)
+// https://alligator.io/vuejs/global-event-bus/
+
+import Vue from "vue";
+const EventBus = new Vue();
+export default EventBus;
diff --git a/src/views/Catalog.vue b/src/views/Catalog.vue
index f6c95e9..1a55b1d 100644
--- a/src/views/Catalog.vue
+++ b/src/views/Catalog.vue
@@ -1,7 +1,9 @@
<template>
<div class="home">
<img src="../assets/logo.png">
- <NewTodo placeholderMsg="Add a new todo"/>
+ <NewTodo placeholderMsg="Add a new todo" @NEWTODOADDED="newTodoAdded"/>
+ <TodoItem todoItem="Have a beers"/>
+ <ListOfTodos todos="this.todos"/>
</div>
</template>
@@ -9,11 +11,23 @@
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import NewTodo from "@/components/NewTodo.vue";
+import TodoItem from "@/components/TodoItem.vue";
+import ListOfTodos from "@/components/ListOfTodos.vue";
+
+import EventBus from "@/services/EventBus";
+
export default {
name: "Catalog",
components: {
- NewTodo
+ NewTodo,
+ TodoItem,
+ ListOfTodos
+ },
+ methods: {
+ newTodoAdded (e) {
+ console.info('INFO - ', e)
+ }
}
};
</script>
diff --git a/tests/unit/NewTodoList.spec.js b/tests/unit/NewTodoList.spec.js
new file mode 100644
index 0000000..18a6264
--- /dev/null
+++ b/tests/unit/NewTodoList.spec.js
@@ -0,0 +1,21 @@
+import { shallow } from "@vue/test-utils";
+import NewTodo from "@/components/NewTodo.vue";
+// import { expect } from 'chai'
+
+import * as all from "../unit/setup.js";
+
+describe("NewTodo.vue", () => {
+ it("renders props.placeholderMsg when passed", () => {
+ const msg = "Add a Todo";
+ const wrapper = shallow(NewTodo, {
+ propsData: { placeholderMsg: msg }
+ });
+ expect(wrapper.vm._props.placeholderMsg).toMatch(msg);
+ });
+
+ it("renders newTodo as empty string", () => {
+ const wrapper = shallow(NewTodo, {});
+ expect(wrapper.vm.newTodo).toMatch("");
+ });
+
+});
--
Gitblit v1.9.3