WIP - heading for flight commit before i go

donal

2018-03-23 a34f1d0a99d257c0a25418cd5cdcf65e74dfd07b

WIP - heading for flight commit before i go

 src/components/ListOfTodos.vue

New file
@@ -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>

 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 = ''
      }
  }

 src/components/TodoItem.vue

New file
@@ -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>

 src/components/TodoList.vue

File was deleted

 src/services/EventBus.js

New file
@@ -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;

 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>

 tests/unit/NewTodoList.spec.js

New file
@@ -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("");
  });

});