using vuex store instead of global service bus

acammies

2018-04-03 3f23cc1ad4fadff42d4a6ceec0d0bd7b44895a3c

using vuex store instead of global service bus

 src/assets/ic_check_box_black_24px.svg

New file
@@ -0,0 +1,4 @@
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>

 src/assets/ic_check_box_outline_blank_black_24px.svg

New file
@@ -0,0 +1,4 @@
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
    <path d="M0 0h24v24H0z" fill="none"/>
</svg>

 src/assets/ic_flag_black_24px.svg

New file
@@ -0,0 +1,4 @@
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"/>
</svg>

 src/assets/ic_flag_red_24px.xcf

Binary files differ

 src/assets/ic_flag_white_24px.svg

New file
@@ -0,0 +1,4 @@
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"/>
</svg>

 src/assets/ic_share_black_24px.svg

New file
@@ -0,0 +1,4 @@
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
</svg>

 src/assets/insert-photo.svg

New file
@@ -0,0 +1,9 @@
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path d="M24 24H0V0h24v24z" id="a"/>
    </defs>
    <clipPath id="b">
        <use overflow="visible" xlink:href="#a"/>
    </clipPath>
    <path clip-path="url(#b)" d="M3 4V1h2v3h3v2H5v3H3V6H0V4h3zm3 6V7h3V4h7l1.83 2H21c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V10h3zm7 9c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-3.2-5c0 1.77 1.43 3.2 3.2 3.2s3.2-1.43 3.2-3.2-1.43-3.2-3.2-3.2-3.2 1.43-3.2 3.2z"/>
</svg>

 src/components/ListOfTodos.vue

@@ -6,44 +6,49 @@
        :todoItem=item
      ></TodoItem>
    </div>
    <span>x out of {{todos.length}} done</span>
  </md-list>
</template>


<script>
import TodoItem from "@/components/TodoItem.vue";
import EventBus from "@/services/EventBus"
import EventBus from "@/services/EventBus";
import { mapGetters } from 'vuex';
export default {
  name: "ListOfTodos",
  props: {

  },
  props: {},
  components: {
    TodoItem
  },
  data () {
    return {
      todos: [{
        title: 'Have a poop',
        id: '123',
        complete: false
      },{
        title: 'Learn Vue JS',
        id: '132',
        complete: false
      },{
        title: 'Love DevOps',
        id: '321',
        complete: false
      }]
    }
  computed: {
    ...mapGetters(
      ["todos"]
    )
  },
  created () {
    const self = this
    EventBus.$on('NEWTODOADDED', function (todo) {
      console.info('INFO - NEWTODOADDED received ', todo)
      self.todos.push(todo);
    });
  // data () {
  // return {
  //   todos: [{
  //     title: 'Have a poop',
  //     id: '123',
  //     complete: true
  //   },{
  //     title: 'Learn Vue JS',
  //     id: '132',
  //     complete: true
  //   },{
  //     title: '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) {

 src/components/NewTodo.vue

@@ -24,12 +24,15 @@
      newTodoAdded (e) {
          this.newTodo = e.target.value
          console.info('INFO - ', this.newTodo)
          EventBus.$emit('NEWTODOADDED', {
              completed: false, 
              title: this.newTodo,
              id: Math.floor(1 + (9999 - 1) * Math.random())
              })
          this.newTodo = ''
        //   EventBus.$emit('NEWTODOADDED', {
        //       completed: false, 
        //       title: this.newTodo,
        //       id: Math.floor(1 + (9999 - 1) * Math.random())
        //   })
          this.$store.dispatch("setNewTodo", this.newTodo)
          this.$store.dispatch("addTodo")
          this.$store.dispatch("clearNewTodo")
          this.newTodo = ''
      }
  }
};

 src/components/TodoItem.vue

@@ -1,16 +1,20 @@
<template>
  <div>
    <md-list-item>  
      <!-- Material design checkbox not working as not importing @angular/material anywhere -->
      <!-- <md-checkbox :v-model="isActive"/> -->
      <input type="checkbox" v-model="isActive" @click="markDone"/>
    <md-list-item
      @click="markDone"
      >
      <!-- TODO find a nice way of not calling markdone when clicking flag on card rather than calling "markDone" twice -->
      
      <!-- Material design checkbox not displaying, EDIT: Still can't figure out why it's not displaying -->
      <!-- <md-checkbox :v-model="isActive">x</md-checkbox> -->
      <input type="checkbox" v-model="todoItem.complete"/>

      <span class="md-list-item-text" :class="{'strike-through': isActive}" @click="markDone">{{ todoItem.title }}</span>
      <span class="md-list-item-text" :class="{'strike-through': todoItem.complete}">{{ todoItem.title }}</span>
      <!-- find a nice way to utilise svg fill property without doing it inline -->
      <md-button 
        @click="markImportant"
        >
        <svg :class="{'red-flag': isImportant}" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
        <svg :class="{'red-flag': isImportant}" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" @click="markDone">
          <path d="M0 0h24v24H0z" fill="none"/>
          <path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"/>
        </svg>
@@ -27,7 +31,7 @@
  },
  data() {
    return {
      isActive: false,
      // isActive: false,
      isImportant: false
    };
  },
@@ -56,10 +60,6 @@
  overflow: auto;
  border: 1px solid rgba(#000, 0.12);
  vertical-align: top;
}

.md-list-item {
  cursor: pointer;
}

.strike-through {

 src/main.js

@@ -7,6 +7,7 @@
// TODO - remove these in favour of importing SPECIFIC components as and when needed
import VueMaterial from "vue-material";
import "vue-material/dist/vue-material.min.css";

Vue.use(VueMaterial);

Vue.config.productionTip = false;

 src/store/actions.js

@@ -21,7 +21,8 @@
      completed: false
    };
    axios.post(config.todoEndpoint, todo).then(mongoTodo => {
      commit("ADD_TODO", mongoTodo);
      // debugger
      commit("ADD_TODO", mongoTodo.data);
    });
  },
  setNewTodo ({ commit }, todo) {

 src/store/index.js

@@ -8,8 +8,14 @@
export default new Vuex.Store({
  state: {
    loading: true,
    todos: [],
    newTodo: ''
    todos: [
      {
        title: "Have a poop",
        id: "123",
        complete: true
      }
    ],
    newTodo: ""
  },
  getters: {
    newTodo: state => state.newTodo,
@@ -17,4 +23,4 @@
  },
  mutations: mutations,
  actions: actions
});
});

 src/views/Todo.vue

@@ -42,26 +42,34 @@
      'toggleTodo',
      'deleteTodo'
    ]),
  }
  },
  // data () {
  //   return { todos: []}
  // },
  // computed: {
  //   todos () {
  //     return this.$store.getters.todos
  //   }
  // }
};
</script>

<style lang="scss" scoped>
  .remove-padding {
    padding: 0px
  }
  .md-card {
    width: 480px;
    margin: 4px;
    display: inline-block;
    vertical-align: top;
  }
  .image-footer {
    border-top: solid;
    margin-top: 1px;
  }
  .image-footer-logo {
    padding: 5px 0px 5px 0px;
    height: 55px;
  }
.remove-padding {
  padding: 0px;
}
.md-card {
  width: 480px;
  margin: 4px;
  display: inline-block;
  vertical-align: top;
}
.image-footer {
  border-top: solid;
  margin-top: 1px;
}
.image-footer-logo {
  padding: 5px 0px 5px 0px;
  height: 55px;
}
</style>

 yarn.lock

New file
Diff too large