| | |
| | | computed: { |
| | | ...mapGetters(["todos"]) |
| | | }, |
| | | // 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; |
| | | // const self = this; |
| | | this.$store.dispatch("loadTodos"); |
| | | |
| | | // EventBus.$on("NEWTODOADDED", function(todo) { |
| | | // console.info("INFO - NEWTODOADDED received ", todo); |
| | | // self.todos.push(todo); |
| | |
| | | // }, |
| | | sumDoneTodoItems(todos) { |
| | | return todos.reduce( |
| | | (result, tdItem) => (tdItem.complete ? result + 1 : result), |
| | | (result, tdItem) => (tdItem.completed ? result + 1 : result), |
| | | 0 |
| | | ); |
| | | }, |
| | |
| | | <!-- 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.complete"/> |
| | | <checkbox v-model="todoItem.completed"/> |
| | | |
| | | <span class="md-list-item-text" :class="{'strike-through': todoItem.complete}">{{ todoItem.title }}</span> |
| | | <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" |
| | |
| | | methods: { |
| | | markDone() { |
| | | // Delete me below even if it works DEMO PURPOSE ONLY |
| | | this.todoItem.complete = !this.todoItem.complete; |
| | | this.todoItem.completed = !this.todoItem.completed; |
| | | // debugger; |
| | | // this.$store.dispatch("setNewTodo", this.todoItem); |
| | | // this.$store.dispatch("updateTodo", this.todoItem); |
| | |
| | | // Do we need to add a new action/mutation to change todo.x? |
| | | // this.$store.dispatch("setNewTodo", this.newTodo) |
| | | |
| | | console.info("INFO - ", this.todoItem, this.todoItem.complete); |
| | | console.info("INFO - ", this.todoItem, this.todoItem.completed); |
| | | }, |
| | | markImportant() { |
| | | this.todoItem.important = !this.todoItem.important; |
| | |
| | | import axios from "axios"; |
| | | import config from "@/config"; |
| | | |
| | | const dummyData = [ |
| | | { |
| | | title: "Learn awesome things about Labs", |
| | | completed: false, |
| | | important: false |
| | | }, |
| | | { |
| | | title: "Learn about my friend Jenkins", |
| | | completed: true, |
| | | important: false |
| | | }, |
| | | { |
| | | title: "Have a poop", |
| | | completed: false, |
| | | important: true |
| | | } |
| | | ]; |
| | | export default { |
| | | loadTodos({ commit }) { |
| | | axios |
| | |
| | | .then(todos => { |
| | | commit("SET_TODOS", todos); |
| | | commit("SET_LOADING", false); |
| | | }).catch(err => { |
| | | if (err) { |
| | | console.info("INFO - setting dummy data because of ", err) |
| | | commit("SET_TODOS", dummyData); |
| | | commit("SET_LOADING", false); |
| | | } |
| | | }); |
| | | }, |
| | | addTodo({ commit, state }) { |
| | |
| | | // do not add empty todos |
| | | return; |
| | | } |
| | | debugger |
| | | // debugger |
| | | const todo = { |
| | | title: state.newTodo, |
| | | complete: false, |
| | | important: false, |
| | | id: Math.floor(1 + (9999 - 1) * Math.random()) |
| | | completed: false, |
| | | important: false |
| | | }; |
| | | axios.post(config.todoEndpoint, todo).then(mongoTodo => { |
| | | commit("ADD_TODO", mongoTodo.data); |
| | |
| | | }, |
| | | setNewTodo ({ commit }, todo) { |
| | | // debugger |
| | | commit('SET_NEW_TODO', todo) |
| | | commit("SET_NEW_TODO", todo); |
| | | }, |
| | | updateTodo({ commit,state }, todo) { |
| | | // const todo = state.newTodo |
| | | debugger |
| | | // debugger; |
| | | const foundIndex = state.todos.findIndex(obj => obj.id === todo.id); |
| | | state.todos[foundIndex] = todo; |
| | | const newUpdatedArray = state.todos |
| | | commit("UPDATE_TODO", newUpdatedArray) |
| | | const newUpdatedArray = state.todos; |
| | | commit("UPDATE_TODO", newUpdatedArray); |
| | | }, |
| | | clearNewTodo({ commit }) { |
| | | commit("CLEAR_NEW_TODO"); |
| | | }, |
| | | clearAllTodos({ commit }) { |
| | | commit("CLEAR_ALL_TODOS") |
| | | commit("CLEAR_ALL_TODOS"); |
| | | }, |
| | | clearAllDoneTodos({ commit }) { |
| | | commit("CLEAR_ALL_DONE_TODOS") |
| | | }, |
| | | commit("CLEAR_ALL_DONE_TODOS"); |
| | | } |
| | | }; |
| | |
| | | export default new Vuex.Store({ |
| | | state: { |
| | | loading: true, |
| | | todos: [ |
| | | { |
| | | title: "Have a sandwich", |
| | | id: "123", |
| | | complete: true, |
| | | important: true |
| | | }, |
| | | { |
| | | title: "Learn VueJS", |
| | | id: "1234", |
| | | complete: true, |
| | | important: false |
| | | }, |
| | | { |
| | | title: "EnableEnablement", |
| | | id: "1235", |
| | | complete: false, |
| | | important: true |
| | | }, |
| | | { |
| | | title: "Have a poop", |
| | | id: "1236", |
| | | complete: false, |
| | | important: false |
| | | } |
| | | ], |
| | | todos: [], |
| | | newTodo: "" |
| | | }, |
| | | getters: { |
| | |
| | | export default { |
| | | SET_LOADING(state, bool) { |
| | | console.log('INFO - Setting loading wheel'); |
| | | state.loading = bool; |
| | | }, |
| | | SET_TODOS(state, todos) { |
| | | console.log('INFO - Setting todos'); |
| | | state.todos = todos; |
| | | }, |
| | | SET_NEW_TODO(state, todo) { |
| | | // debugger |
| | | console.log('INFO - Setting new todo'); |
| | | state.newTodo = todo; |
| | | }, |
| | | ADD_TODO(state, todo) { |
| | | console.log('INFO - add todo', todo); |
| | | console.log('INFO - Add todo', todo); |
| | | state.todos.push(todo); |
| | | }, |
| | | REMOVE_TODO(state, todo) { |
| | | console.log('INFO - Removing todo'); |
| | | var todos = state.todos; |
| | | todos.splice(todos.indexOf(todo), 1); |
| | | }, |
| | | CLEAR_NEW_TODO(state) { |
| | | console.log('INFO - Clearing new todo'); |
| | | state.newTodo = ''; |
| | | console.log('INFO - clearing new todo'); |
| | | }, |
| | | CLEAR_ALL_DONE_TODOS(state) { |
| | | state.todos = state.todos.filter(obj => obj.complete === false); |
| | | console.log('INFO - Clearing all done todos'); |
| | | state.todos = state.todos.filter(obj => obj.completed === false); |
| | | }, |
| | | CLEAR_ALL_TODOS(state) { |
| | | state.todos = [ |
| | | // { title: "", id: "0", complete: false, important: false } |
| | | ]; |
| | | console.log('INFO - clearing all todos'); |
| | | console.log('INFO - Clearing all todos'); |
| | | state.todos = []; |
| | | }, |
| | | UPDATE_TODO(state, updatedTodos) { |
| | | debugger |
| | | console.log('INFO - Update a todo'); |
| | | // state.todos.map((obj => ((obj.id !== todo.id )|| todo))); |
| | | // const foundIndex = state.todos.findIndex(obj => (obj.id === todo.id )); |
| | | // state.todos[foundIndex] = todo; |
| | |
| | | // don't do this, maybe google instead |
| | | |
| | | |
| | | console.log('INFO - update a todo'); |
| | | // state.todos.find(eachTodo => eachTodo.id === todo.id) |
| | | // arr1.map(obj => arr2.find(o => o.id === obj.id) || obj); |
| | | |