XofYItems is now in a separate component

acammies

2018-04-05 26aabce0fce8a38336e5c2ac4ce3232423e18505

XofYItems is now in a separate component

 src/assets/ic_check_box_black_24px.svg

File was deleted

 src/assets/ic_check_box_outline_blank_black_24px.svg

File was deleted

 src/assets/ic_flag_black_24px.svg

File was deleted

 src/assets/ic_flag_red_24px.xcf

Binary files differ

 src/assets/ic_flag_white_24px.svg

File was deleted

 src/assets/ic_share_black_24px.svg

File was deleted

 src/components/Header.vue

@@ -94,6 +94,7 @@
      margin-top: 13px;
      font-size: 1.4em;
      font-weight: 700;
      text-align: left;
    }
  }
}

 src/components/ListOfTodos.vue

@@ -9,18 +9,12 @@
      </div>
    </md-list>
    <!-- <XofYitems /> -->
    <div class="xofyDone">
      <span>{{sumDoneTodoItems(todos)}} out of {{this.todos.length}} done. </span>
      <button v-on:click="clearDoneTodos()">CLEAR DONE</button>
      <button v-on:click="clearTodos()">CLEAR ALL</button>
    </div>
  </div>
</template>


<script>
import TodoItem from "@/components/TodoItem.vue";
// import XofYitems from "@/components/XofYitems.vue";
import EventBus from "@/services/EventBus";
import { mapGetters } from "vuex";

@@ -36,31 +30,13 @@
  },
  created() {
    this.$store.dispatch("loadTodos");
  },
  methods: {
    // updateTodoList(todo) {
    //   this.todos.push(todo);
    // },
    sumDoneTodoItems(todos) {
      return todos.reduce(
        (result, tdItem) => (tdItem.completed ? result + 1 : result),
        0
      );
    },
    clearDoneTodos() {
      this.$store.dispatch("clearTodos");
    },
    clearTodos() {
      // NOTE - true = all todos
      this.$store.dispatch("clearTodos", true);
    }
  }
  }  
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.xofyDone {
  display: inline-block;
  display: inl ine-block;
}
</style>

 src/components/TodoItem.vue

@@ -1,26 +1,18 @@
<template>
  <div>
    <div class="itemCardAndFlag">

    <md-list-item
      @click="markCompleted"
      @click="markCompleted()"
      >
      <!-- 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"/> -->
      <checkbox v-model="todoItem.completed"/> 

      <span class="md-list-item-text" :class="{'strike-through': todoItem.completed}">{{ todoItem.title }}</span>
      <!-- find a nice way to utilise svg fill property without doing it inline -->
      <md-button 
        @click="markImportant"
        @click="markCompleted(); markImportant()"
        >
        <svg :class="{'red-flag': todoItem.important}" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" @click="markCompleted">
          <path d="M0 0h24v24H0z" fill="none"/>
          <path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"/>
        </svg>
        <!-- find a nice way to utilise svg fill property without doing it inline -->
        <svg :class="{'red-flag': todoItem.important}"  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>
      </md-button>
    </md-list-item>
    </div>
@@ -51,8 +43,9 @@
    },
    markImportant() {
      console.info("INFO - Mark todo as important ", this.todoItem.important);
      // this.todoItem.important = !this.todoItem.important;
      // TODO - FILL THIS OUT IN THE LAB EXERCISE

      // this.todoItem.important = !this.todoItem.important;
    }
  }
};

 src/components/XofYItems.vue

New file
@@ -0,0 +1,45 @@
<template>
    <div>
        <div class="xofyDone">
            <span>{{sumDoneTodoItems(todos)}} out of {{this.todos.length}} done. </span>
            <button v-on:click="clearDoneTodos()">CLEAR DONE</button>
            <button v-on:click="clearTodos()">CLEAR ALL</button>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "XofYItems",
  computed: {
    ...mapGetters(["todos"])
  },
  created() {
    this.$store.dispatch("loadTodos");
  },
  methods: {
    clearDoneTodos() {
      this.$store.dispatch("clearTodos");
    },
    clearTodos() {
      // NOTE - true = all todos
      this.$store.dispatch("clearTodos", true);
    },
    sumDoneTodoItems(todos) {
      return todos.reduce(
        (result, tdItem) => (tdItem.completed ? result + 1 : result),
        0
      );
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.xofyDone {
  display: inline-block;
}
</style>

 src/views/Todo.vue

@@ -9,6 +9,7 @@
      <md-card-content>
          <NewTodo placeholderMsg="Add a new todos here"/>
          <ListOfTodos todos="this.todos"/>
          <XofYItems/>
      </md-card-content>

      <div class="image-footer"> 
@@ -24,6 +25,7 @@
import Header from "@/components/Header.vue";
import NewTodo from "@/components/NewTodo.vue";
import ListOfTodos from "@/components/ListOfTodos.vue";
import XofYItems from "@/components/XofYItems.vue";
import EventBus from "@/services/EventBus";
import { mapMutations } from 'vuex'

@@ -32,7 +34,8 @@
  components: {
    Header,
    ListOfTodos,
    NewTodo
    NewTodo,
    XofYItems
  },
  methods: {
    ...mapMutations([