View full request works

Also:
- moved setup stuff out of the `data` function and into the `created`
function
- standardized Vue component coding styles
- reworded transition text on log on and journal loading templates

src/app/src/App.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script>
+'use strict'
+
 import Navigation from './components/Navigation.vue'
 
 export default {

src/app/src/api/index.js

@@ -44,6 +44,12 @@ export default {
    * Get a prayer request (journal-style; only latest update)
    * @param {string} requestId The Id of the request to retrieve
    */
-  getRequest: requestId => http.get(`request/${requestId}`)
+  getRequest: requestId => http.get(`request/${requestId}`),
+
+  /**
+   * Get a prayer request (full; includes all history)
+   * @param {string} requestId The Id of the request to retrieve
+   */
+  getFullRequest: requestId => http.get(`request/${requestId}/full`)
 
 }

src/app/src/components/Dashboard.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 article
   page-title(:title="title")
-    p(v-if="isLoadingJournal") journal is loading...
+  p(v-if="isLoadingJournal") Loading your prayer journal...
   template(v-if="!isLoadingJournal")
     new-request
     p journal has {{ journal.length }} entries
@@ -25,10 +25,6 @@ import actions from '@/store/action-types'
 
 export default {
   name: 'dashboard',
-  async data () {
-    this.$store.dispatch(actions.LOAD_JOURNAL, this.$Progress)
-    return {}
-  },
   components: {
     PageTitle,
     NewRequest,
@@ -39,6 +35,9 @@ export default {
       return `${this.user.given_name}'s Dashboard`
     },
     ...mapState(['user', 'journal', 'isLoadingJournal'])
+  },
+  async created () {
+    await this.$store.dispatch(actions.LOAD_JOURNAL, this.$Progress)
   }
 }
 </script>

src/app/src/components/Home.vue

@@ -13,6 +13,8 @@
 </template>
 
 <script>
+'use strict'
+
 import PageTitle from './PageTitle.vue'
 
 export default {

src/app/src/components/Navigation.vue

@@ -10,6 +10,8 @@
 </template>
 
 <script>
+'use strict'
+
 import { mapState } from 'vuex'
 import AuthService from '@/auth/AuthService'
 
@@ -28,7 +30,9 @@ export default {
       this.auth0.logout(this.$store, this.$router)
     }
   },
-  computed: mapState(['isAuthenticated'])
+  computed: {
+    ...mapState([ 'isAuthenticated' ])
+  }
 }
 </script>
 

src/app/src/components/request/FullRequest.vue

@@ -0,0 +1,44 @@
+<template lang="pug">
+span
+  el-button(icon='document' @click='openDialog()' title='Show History')
+  el-dialog(title='Prayer Request History' :visible.sync='historyVisible')
+    span(v-if='null !== full')
+      full-request-history(v-for='item in full.history' :history='item' :key='item.asOf')
+    span.dialog-footer(slot='footer')
+      el-button(type='primary' @click='closeDialog()') Close
+</template>
+
+<script>
+'use strict'
+
+import FullRequestHistory from './FullRequestHistory'
+
+import api from '@/api'
+
+export default {
+  name: 'full-request',
+  props: [ 'request' ],
+  data () {
+    return {
+      historyVisible: false,
+      full: null
+    }
+  },
+  components: {
+    FullRequestHistory
+  },
+  methods: {
+    closeDialog () {
+      this.full = null
+      this.historyVisible = false
+    },
+    async openDialog () {
+      this.historyVisible = true
+      this.$Progress.start()
+      const req = await api.getFullRequest(this.request.requestId)
+      this.full = req.data
+      this.$Progress.finish()
+    }
+  }
+}
+</script>

src/app/src/components/request/FullRequestHistory.vue

@@ -0,0 +1,21 @@
+<template lang="pug">
+p.journal-request
+  | {{ history.status }} {{ asOf }}
+  span(v-if='0 < history.text.length') &nbsp;&raquo; {{ history.text }}
+</template>
+
+<script>
+'use strict'
+
+import moment from 'moment'
+
+export default {
+  name: 'full-request-history',
+  props: [ 'history' ],
+  computed: {
+    asOf () {
+      return moment(this.history.asOf).fromNow()
+    }
+  }
+}
+</script>

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

@@ -1,10 +1,9 @@
 <template lang="pug">
 el-row.journal-request
-    el-col(:span='4')
+  el-col(:span='4'): p
-      p
     el-button(icon='check' @click='markPrayed()' title='Pray')
     edit-request(:request='request')
-        el-button(icon='document' @click='viewHistory()' title='Show History')
+    full-request(:request='request')
   el-col(:span='16'): p {{ request.text }}
   el-col(:span='4'): p {{ asOf }}
 </template>
@@ -15,21 +14,20 @@
 import moment from 'moment'
 
 import EditRequest from './EditRequest'
+import FullRequest from './FullRequest'
 
 import actions from '@/store/action-types'
 
 export default {
   name: 'request-list-item',
   props: [ 'request' ],
-  data () {
-    return {}
-  },
   components: {
-    EditRequest
+    EditRequest,
+    FullRequest
   },
   methods: {
-    markPrayed () {
+    async markPrayed () {
-      this.$store.dispatch(actions.UPDATE_REQUEST, {
+      await this.$store.dispatch(actions.UPDATE_REQUEST, {
         progress: this.$Progress,
         requestId: this.request.requestId,
         status: 'Prayed',

src/app/src/components/user/LogOn.vue

@@ -1,15 +1,18 @@
-<template>
+<template lang="pug">
-  <p>hang tight...</p>
+p Logging you on...
 </template>
 
 <script>
+'use strict'
+
 import AuthService from '@/auth/AuthService'
 
 export default {
   name: 'log-on',
-  data () {
+  created () {
+    this.$Progress.start()
     new AuthService().handleAuthentication(this.$store, this.$router)
-    return {}
+    // Auth service redirects to dashboard, which restarts the progress bar
   }
 }
 </script>

src/app/src/main.js

@@ -16,7 +16,12 @@ Vue.use(ElementUI)
 Vue.use(VueProgressBar, {
   color: 'rgb(32, 160, 255)',
   failedColor: 'red',
-  height: '3px'
+  height: '5px',
+  transition: {
+    speed: '0.2s',
+    opacity: '0.6s',
+    termination: 1000
+  }
 })
 
 /* eslint-disable no-new */