Adding request now totally works

Also:
- added progress bar, integrated with journal loading
- updated Vue app dependencies

src/app/src/App.vue

@@ -3,6 +3,7 @@
     navigation
     #content.container
       router-view
+      vue-progress-bar
     footer
       p.text-right: i myPrayerJournal v0.8.0
 </template>

src/app/src/components/Dashboard.vue

@@ -21,8 +21,8 @@ import actions from '@/store/action-types'
 
 export default {
   name: 'dashboard',
-  data () {
-    this.$store.dispatch(actions.LOAD_JOURNAL)
+  async data () {
+    this.$store.dispatch(actions.LOAD_JOURNAL, this.$Progress)
     return {}
   },
   components: {

src/app/src/components/request/RequestListItem.vue

@@ -1,7 +1,9 @@
 <template lang="pug">
-  div
-    p Id {{ request.requestId }} as of {{ request.asOf }}
-    p {{ request.text }}
+  el-row.journal-request(:id="request.requestId")
+    el-col(:span='4') Action buttons
+    el-col(:span='20')
+      p Id {{ request.requestId }} as of {{ request.asOf }}
+      p {{ request.text }}
 </template>
 
 <script>
@@ -10,6 +12,17 @@ export default {
   props: ['request'],
   data: function () {
     return {}
+  },
+  methods: {
+    markPrayed: function (requestId) {
+      // TODO: write function
+    }
   }
 }
 </script>
+
+<style>
+.journal-request {
+  border-bottom: dotted 1px lightgray;
+}
+</style>

src/app/src/main.js

@@ -2,6 +2,7 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import ElementUI from 'element-ui'
+import VueProgressBar from 'vue-progressbar'
 import 'element-ui/lib/theme-default/index.css'
 
 import App from './App'
@@ -12,6 +13,12 @@ Vue.config.productionTip = false
 
 Vue.use(ElementUI)
 
+Vue.use(VueProgressBar, {
+  color: 'rgb(143, 255, 199)',
+  failedColor: 'red',
+  height: '2px'
+})
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/app/src/store/index.js

@@ -60,8 +60,9 @@ export default new Vuex.Store({
     }
   },
   actions: {
-    async [actions.LOAD_JOURNAL] ({ commit }) {
+    async [actions.LOAD_JOURNAL] ({ commit }, progress) {
       commit(mutations.LOADED_JOURNAL, {})
+      progress.start()
       commit(mutations.LOADING_JOURNAL, true)
       api.setBearer(localStorage.getItem('id_token'))
       try {
@@ -71,12 +72,13 @@ export default new Vuex.Store({
         logError(err)
       } finally {
         commit(mutations.LOADING_JOURNAL, false)
+        progress.finish()
       }
     },
     async [actions.ADD_REQUEST] ({ commit }, requestText) {
       try {
         const newRequest = await api.addRequest(requestText)
-        commit(mutations.REQUEST_ADDED, newRequest)
+        commit(mutations.REQUEST_ADDED, newRequest.data)
       } catch (err) {
         logError(err)
       }