From 82de6c49e5fa5b836b01bf18c4ce6a9bcdd54716 Mon Sep 17 00:00:00 2001
From: donal <donalspring@gmail.com>
Date: Sun, 01 Apr 2018 02:41:19 +0200
Subject: [PATCH] WIP - adding the vuex state stuff
---
src/assets/header-splash.jpeg | 0
/dev/null | 10 ---
src/store/mutations.js | 23 +++++++
src/views/Catalog.vue | 21 ++++++-
src/views/Todo.vue | 19 +++++
package-lock.json | 24 ++++++-
src/main.js | 2
src/store/index.js | 20 ++++++
src/config/index.js | 3 +
src/store/actions.js | 30 ++++++++++
package.json | 1
src/components/Header.vue | 17 +----
12 files changed, 137 insertions(+), 33 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 462a4cc..d2c3d3d 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 8f13b89..e7e0928 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/header-splash.jpeg b/src/assets/header-splash.jpeg
new file mode 100644
index 0000000..012953e
--- /dev/null
+++ b/src/assets/header-splash.jpeg
Binary files differ
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 610414f..c627d58 100644
--- a/src/components/Header.vue
+++ b/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;
diff --git a/src/config/index.js b/src/config/index.js
new file mode 100644
index 0000000..60b697b
--- /dev/null
+++ b/src/config/index.js
@@ -0,0 +1,3 @@
+export default {
+ todoEndpoint: "http://localhost:9000/api/todos"
+};
diff --git a/src/main.js b/src/main.js
index 670967a..05e6b48 100644
--- a/src/main.js
+++ b/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
diff --git a/src/store.js b/src/store.js
deleted file mode 100644
index bb02ce2..0000000
--- a/src/store.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Vue from "vue";
-import Vuex from "vuex";
-
-Vue.use(Vuex);
-
-export default new Vuex.Store({
- state: {},
- mutations: {},
- actions: {}
-});
diff --git a/src/store/actions.js b/src/store/actions.js
new file mode 100644
index 0000000..665770f
--- /dev/null
+++ b/src/store/actions.js
@@ -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");
+ }
+};
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..6b17b56
--- /dev/null
+++ b/src/store/index.js
@@ -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
+});
\ No newline at end of file
diff --git a/src/store/mutations.js b/src/store/mutations.js
new file mode 100644
index 0000000..b2c1a79
--- /dev/null
+++ b/src/store/mutations.js
@@ -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');
+ }
+};
diff --git a/src/views/Catalog.vue b/src/views/Catalog.vue
index 1a55b1d..07d9112 100644
--- a/src/views/Catalog.vue
+++ b/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);
+
}
}
};
diff --git a/src/views/Todo.vue b/src/views/Todo.vue
index d2ba2db..77adae2 100644
--- a/src/views/Todo.vue
+++ b/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>
--
Gitblit v1.9.3