WIP - adding the vuex state stuff

donal

2018-04-01 82de6c49e5fa5b836b01bf18c4ce6a9bcdd54716

WIP - adding the vuex state stuff

 package-lock.json

@@ -1929,6 +1929,15 @@
      "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=",
      "dev": true
    },
    "axios": {
      "version": "0.18.0",
      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
      "requires": {
        "follow-redirects": "1.4.1",
        "is-buffer": "1.1.6"
      }
    },
    "babel-code-frame": {
      "version": "6.26.0",
      "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -4211,7 +4220,6 @@
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
      "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
      "dev": true,
      "requires": {
        "ms": "2.0.0"
      }
@@ -5857,6 +5865,14 @@
      "requires": {
        "inherits": "2.0.3",
        "readable-stream": "2.3.5"
      }
    },
    "follow-redirects": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.4.1.tgz",
      "integrity": "sha512-uxYePVPogtya1ktGnAAXOacnbIuRMB4dkvqeNz2qTtTQsuzSfbDolV+wMMKxAmCx0bLgAKLbBOkjItMbbkR1vg==",
      "requires": {
        "debug": "3.1.0"
      }
    },
    "for-in": {
@@ -7917,8 +7933,7 @@
    "is-buffer": {
      "version": "1.1.6",
      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
      "dev": true
      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
    },
    "is-builtin-module": {
      "version": "1.0.0",
@@ -9896,8 +9911,7 @@
    "ms": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
      "dev": true
      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
    },
    "multicast-dns": {
      "version": "6.2.3",

 package.json

@@ -10,6 +10,7 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "register-service-worker": "^1.0.0",
    "vue": "^2.5.13",
    "vue-material": "^1.0.0-beta-7",

 src/assets/header-splash.jpeg

 src/components/Header.vue

@@ -5,11 +5,8 @@
        <time class="clearfix">
            <span class="day">{{ date }}</span>
            <span class="dayofweek">{{ weekDay }}</span>
            <span class="month">{{ month }}, {{ year }}</span>
            <span class="dayofweek">{{ month }}, {{ year }}</span>
        </time>
        <div class="add-circle" @click="add">
            <i class="fa fa-plus"></i>
        </div>
    </div>
</template>

@@ -66,12 +63,10 @@
<style scoped lang="scss">
// https://github.com/tatthien/vue-todo/blob/master/src/sass/style.scss
@import "../scss/custom.scss";
// .clearfix {
//   overflow: auto;
//   zoom: 1;
// }

.todo-header {
  border-radius: 6px 6px 0 0;
  border-radius: 0px;
  // border-radius: 6px 6px 0 0;
  background: url($header_image) no-repeat;
  background-size: cover;
  padding: 55px 20px;
@@ -83,9 +78,7 @@
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.2); /* fallback for old browsers */
    //background: -webkit-linear-gradient(to left, rgba(85,98,112,0.5) , rgba(255,107,107,0.5)); /* Chrome 10-25, Safari 5.1-6 */
    //background: linear-gradient(to left, rgba(85,98,112,0.5) , rgba(255,107,107,0.5)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 6px 6px 0 0;
    // border-radius: 6px 6px 0 0;
  }
  time {
    color: white;

 src/config/index.js

New file
@@ -0,0 +1,3 @@
export default {
  todoEndpoint: "http://localhost:9000/api/todos"
};

 src/main.js

@@ -1,7 +1,7 @@
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import store from "@/store";
import "./registerServiceWorker";

// TODO - remove these in favour of importing SPECIFIC components as and when needed

 src/store.js

File was deleted

 src/store/actions.js

New file
@@ -0,0 +1,30 @@
import axios from "axios";
import config from "@/config";

export default {
  loadTodos({ commit }) {
    axios
      .get(config.todoEndpoint)
      .then(r => r.data)
      .then(todos => {
        commit("SET_TODOS", todos);
        commit("SET_LOADING", false);
      });
  },
  addTodo({ commit, state }) {
    if (!state.newTodo) {
      // do not add empty todos
      return;
    }
    const todo = {
      title: state.newTodo,
      completed: false
    };
    axios.post(config.todoEndpoint, todo).then(mongoTodo => {
      commit("ADD_TODO", mongoTodo);
    });
  },
  clearNewTodo({ commit }) {
    commit("CLEAR_NEW_TODO");
  }
};

 src/store/index.js

New file
@@ -0,0 +1,20 @@
import Vue from "vue";
import Vuex from "vuex";
import mutations from "./mutations";
import actions from "./actions";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    loading: true,
    todos: [],
    newTodo: ''
  },
  getters: {
    newTodo: state => state.newTodo,
    todos: state => state.todos
  },
  mutations: mutations,
  actions: actions
});

 src/store/mutations.js

New file
@@ -0,0 +1,23 @@
export default {
  SET_LOADING(state, bool) {
    state.loading = bool;
  },
  SET_TODOS(state, todos) {
    state.todos = todos;
  },
  SET_NEW_TODO(state, todo) {
    state.newTodo = todo;
  },
  ADD_TODO(state, todo) {
    console.log('INFO - add todo', todo);
    state.todos.push(todo);
  },
  REMOVE_TODO(state, todo) {
    var todos = state.todos;
    todos.splice(todos.indexOf(todo), 1);
  },
  CLEAR_NEW_TODO(state) {
    state.newTodo = '';
    console.log('INFO - clearing new todo');
  }
};

 src/views/Catalog.vue

@@ -4,7 +4,12 @@
    <NewTodo placeholderMsg="Add a new todo" @NEWTODOADDED="newTodoAdded"/>
    <TodoItem todoItem="Have a beers"/>
    <ListOfTodos todos="this.todos"/>

    <button @click=newTodoAdded>add todo</button>
    <button>getTodos</button>  
    <code>{{ allTodos }}</code>
  </div>

</template>

<script>
@@ -16,7 +21,6 @@

import EventBus from "@/services/EventBus";


export default {
  name: "Catalog",
  components: {
@@ -24,9 +28,20 @@
    TodoItem,
    ListOfTodos
  },
    // load todos on start
  created () {
    this.$store.dispatch('loadTodos')
  },
    // be able to get the data
  computed: {
    allTodos () {
      return this.$store.getters.todos
    },
  },
  methods: {
    newTodoAdded (e) {
      console.info('INFO - ', e)
    newTodoAdded(e) {
      console.info("INFO - ", e);
      
    }
  }
};

 src/views/Todo.vue

@@ -4,8 +4,11 @@
      <md-card-header class="remove-padding">
        <Header/>
      </md-card-header>

      <md-card-content>
        TODOS WILL GO HERE.
        Probs...
          <NewTodo placeholderMsg="Add a new todos here"/>
          <ListOfTodos todos="this.todos"/>
      </md-card-content>
    </md-card>
  </div>
@@ -13,13 +16,25 @@

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import Header from "@/components/Header.vue";
import NewTodo from "@/components/NewTodo.vue";
import ListOfTodos from "@/components/ListOfTodos.vue";
import EventBus from "@/services/EventBus";
import { mapMutations } from 'vuex'

export default {
  name: "Todo",
  components: {
    Header,
    ListOfTodos,
    NewTodo
  },
  methods: {
    ...mapMutations([
      'editTodo',
      'toggleTodo',
      'deleteTodo'
    ]),
  }
};
</script>