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

@@ -1,14 +1,16 @@
 <template lang="pug">
-  #app
+#app
-    navigation
+  navigation
-    #content.container
+  #content.container
-      router-view
+    router-view
-      vue-progress-bar
+    vue-progress-bar
-    footer
+  footer
-      p.text-right: i myPrayerJournal v0.8.0
+    p.text-right: i myPrayerJournal v0.8.0
 </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,15 +1,15 @@
 <template lang="pug">
-  article
+article
-    page-title(:title="title")
+  page-title(:title="title")
-    p(v-if="isLoadingJournal") journal is loading...
+  p(v-if="isLoadingJournal") Loading your prayer journal...
-    template(v-if="!isLoadingJournal")
+  template(v-if="!isLoadingJournal")
-      new-request
+    new-request
-      p journal has {{ journal.length }} entries
+    p journal has {{ journal.length }} entries
-      el-row
+    el-row
-        el-col(:span='4'): strong Actions
+      el-col(:span='4'): strong Actions
-        el-col(:span='16'): strong Request
+      el-col(:span='16'): strong Request
-        el-col(:span='4'): strong As Of
+      el-col(:span='4'): strong As Of
-      request-list-item(v-for="request in journal" :request="request" :key="request.requestId")
+    request-list-item(v-for="request in journal" :request="request" :key="request.requestId")
 </template>
 
 <script>
@@ -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

@@ -1,18 +1,20 @@
 <template lang="pug">
-  article
+article
-    page-title(title="Welcome!" hideOnPage="true")
+  page-title(title="Welcome!" hideOnPage="true")
-    p &nbsp;
+  p &nbsp;
-    p.
+  p.
-      myPrayerJournal is a place where individuals can record their prayer requests, record that they prayed for them,
+    myPrayerJournal is a place where individuals can record their prayer requests, record that they prayed for them,
-      update them as God moves in the situation, and record a final answer received on that request.&nbsp; It will also
+    update them as God moves in the situation, and record a final answer received on that request.&nbsp; It will also
-      allow individuals to review their answered prayers.
+    allow individuals to review their answered prayers.
-    p.
+  p.
-      This site is currently in very limited alpha, as it is being developed with a core group of test users.&nbsp; If
+    This site is currently in very limited alpha, as it is being developed with a core group of test users.&nbsp; If
-      this is something in which you are interested, check back around mid-November 2017 for an update on the
+    this is something in which you are interested, check back around mid-November 2017 for an update on the
-      development progress.
+    development progress.
 </template>
 
 <script>
+'use strict'
+
 import PageTitle from './PageTitle.vue'
 
 export default {

src/app/src/components/Navigation.vue

@@ -1,15 +1,17 @@
 <template lang="pug">
-  el-menu(theme="dark" mode="horizontal" class="mpj-top-nav" router=true)
+el-menu(theme="dark" mode="horizontal" class="mpj-top-nav" router=true)
-    el-menu-item(index="/")
+  el-menu-item(index="/")
-      span(style="font-weight:100;") my
+    span(style="font-weight:100;") my
-      span(style="font-weight:600;") Prayer
+    span(style="font-weight:600;") Prayer
-      span(style="font-weight:700;") Journal
+    span(style="font-weight:700;") Journal
-    el-menu-item(v-if="isAuthenticated" index="/dashboard") Dashboard
+  el-menu-item(v-if="isAuthenticated" index="/dashboard") Dashboard
-    el-menu-item(v-if="isAuthenticated" index="3"): a(@click.stop="logOff()") Log Off
+  el-menu-item(v-if="isAuthenticated" index="3"): a(@click.stop="logOff()") Log Off
-    el-menu-item(v-if="!isAuthenticated" index="4"): a(@click.stop="logOn()") Log On
+  el-menu-item(v-if="!isAuthenticated" index="4"): a(@click.stop="logOn()") Log On
 </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/PageTitle.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
-  h2.mpj-page-title(v-if="!hideOnPage" v-html="title")
+h2.mpj-page-title(v-if="!hideOnPage" v-html="title")
 </template>
 
 <script>
 export default {
   name: 'page-title',
-  props: ['title', 'hideOnPage'],
+  props: [ 'title', 'hideOnPage' ],
   created () {
     document.title = `${this.title} « myPrayerJournal`
   },

src/app/src/components/request/EditRequest.vue

@@ -1,18 +1,18 @@
 <template lang="pug">
-  span
+span
-    el-button(icon='edit' @click='openDialog()' title='Edit')
+  el-button(icon='edit' @click='openDialog()' title='Edit')
-    el-dialog(title='Edit Prayer Request' :visible.sync='editVisible')
+  el-dialog(title='Edit Prayer Request' :visible.sync='editVisible')
-      el-form(:model='form' :label-position='top')
+    el-form(:model='form' :label-position='top')
-        el-form-item(label='Prayer Request')
+      el-form-item(label='Prayer Request')
-          el-input(type='textarea' v-model.trim='form.requestText' :rows='10')
+        el-input(type='textarea' v-model.trim='form.requestText' :rows='10')
-        el-form-item(label='Also Mark As')
+      el-form-item(label='Also Mark As')
-          el-radio-group(v-model='form.status')
+        el-radio-group(v-model='form.status')
-            el-radio-button(label='Updated') Updated
+          el-radio-button(label='Updated') Updated
-            el-radio-button(label='Prayed') Prayed
+          el-radio-button(label='Prayed') Prayed
-            el-radio-button(label='Answered') Answered
+          el-radio-button(label='Answered') Answered
-      span.dialog-footer(slot='footer')
+    span.dialog-footer(slot='footer')
-        el-button(@click='closeDialog()') Cancel
+      el-button(@click='closeDialog()') Cancel
-        el-button(type='primary' @click='saveRequest()') Save
+      el-button(type='primary' @click='saveRequest()') Save
 </template>
 
 <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/NewRequest.vue

@@ -1,13 +1,13 @@
 <template lang="pug">
-  div
+div
-    el-button(@click='openDialog()') Add a New Request
+  el-button(@click='openDialog()') Add a New Request
-    el-dialog(title='Add a New Prayer Request' :visible.sync='showNewVisible')
+  el-dialog(title='Add a New Prayer Request' :visible.sync='showNewVisible')
-      el-form(:model='form' :label-position='top')
+    el-form(:model='form' :label-position='top')
-        el-form-item(label='Prayer Request')
+      el-form-item(label='Prayer Request')
-          el-input(type='textarea' v-model.trim='form.requestText' :rows='10')
+        el-input(type='textarea' v-model.trim='form.requestText' :rows='10')
-      span.dialog-footer(slot='footer')
+    span.dialog-footer(slot='footer')
-        el-button(@click='closeDialog()') Cancel
+      el-button(@click='closeDialog()') Cancel
-        el-button(type='primary' @click='saveRequest()') Save
+      el-button(type='primary' @click='saveRequest()') Save
 </template>
 
 <script>

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

@@ -1,12 +1,11 @@
 <template lang="pug">
-  el-row.journal-request
+el-row.journal-request
-    el-col(:span='4')
+  el-col(:span='4'): p
-      p
+    el-button(icon='check' @click='markPrayed()' title='Pray')
-        el-button(icon='check' @click='markPrayed()' title='Pray')
+    edit-request(:request='request')
-        edit-request(:request='request')
+    full-request(:request='request')
-        el-button(icon='document' @click='viewHistory()' title='Show History')
+  el-col(:span='16'): p {{ request.text }}
-    el-col(:span='16'): p {{ request.text }}
+  el-col(:span='4'): p {{ asOf }}
-    el-col(:span='4'): p {{ asOf }}
 </template>
 
 <script>
@@ -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 */