Prep for 0.8.2 release

- Adds ability to view answered requests (#3)
- Fixes multi-line request display (#7)
- Docs updated for 0.8.2

README.md

@@ -4,4 +4,4 @@ Journaling has a long history; it helps people remember what happened, and the a
 
 This is borne of out of a personal desire I had to have something that would help me with my prayer life. When it's time to pray, it's not really time to use an app, so the design goal here is to keep it simple and unobtrusive. It will also help eliminate some of the downsides to a paper prayer journal, like not remembering whether you've prayed for a request, or running out of room to write another update on one.
 
-It is still a work-in-progress (WIP). It will eventually be hosted at <https://prayerjournal.me>, and will be available for public use.
+It is still a work-in-progress (WIP), but is available for public preview at <https://prayerjournal.me>.

docs/index.md

@@ -1,34 +1,41 @@
-# Caveats
+## Caveats
 
 _myPrayerJournal is currently alpha software. There likely will be errors, the way things work may change, and parts of the application are unfinished or need polish. I **will** do my best to not lose any data, though; it is backed up the way other DJS Consulting sites have their data backed up. Throughout this document, current gotchas will be called out with italic text, like this notice._
 
-# Finding the Site
+## Finding the Site
 
 The application is at <https://prayerjournal.me>.
 
-# Signing Up
+## Signing Up
 
 myPrayerJournal uses login services using Google or Microsoft accounts. The only information the application stores in its database is your user Id token it receives from these services, so there are no permissions you should have to accept from these provider other than establishing that you can log on with that account. Because of this, you'll want to pick the same one each time; the tokens between the two accounts are different, even if you use the same e-mail address to log on to both.
 
-# Adding a Request
+## Your Prayer Journal
 
-To add a request, click the "Add a New Request" button in your "Journal". Then, enter the text of the request as you see fit; there is no right or wrong way, and you are the only person who will see the text you enter. When you save the request, it will go to the bottom of the list of requests.
+Your current requests will be presented in three columns (or one, if you're using a mobile phone). Each request is in its own card, and the buttons at the bottom of each card apply to that request. The last line of each request also tells you how long it has been since anything has been done on that request. Any time you see something like "a few minutes ago," you can hover over that to see the actual date/time the action was taken.
 
-# Praying for Requests
+## Adding a Request
 
-The first button for each request has a checkmark icon; clicking this button will mark the request as "Prayed" and move it to the bottom of the list. This allows you, if you're praying through your requests, to start at the top (with the request that it's been the longest since you've prayed) and click the button as you pray; when the request goes to the bottom of the list, the next will move up to the top.
+To add a request, click the "Add a New Request" button at the top of your journal. Then, enter the text of the request as you see fit; there is no right or wrong way, and you are the only person who will see the text you enter. When you save the request, it will go to the bottom of the list of requests.
 
-# Editing Requests
+## Praying for Requests
 
-The second button for each request has a pencil icon. This allows you to edit the text of the request, pretty much the same way you entered it; it starts with the current text, and you can add to it, modify it, or completely replace it. By default, updates will go in with an "Updated" status; you have the option to also mark this update as "Prayed" or "Answered." Answered requests will drop off the journal list. _(There is currently no way to see answered requests once they have been answered; this functionality is planned soon.)_
+The first button for each request has a checkmark icon; clicking this button will mark the request as "Prayed" and move it to the bottom of the list. This allows you, if you're praying through your requests, to start at the top left (with the request that it's been the longest since you've prayed) and click the button as you pray; when the request goes to the bottom of the list, the next-least-recently-prayed request will take the top spot.
 
-# Viewing a Request and Its History
+## Editing Requests
 
-myPrayerJournal tracks all of the actions related to a request; the third button, with the document icon, will show you the entire history, including the text as it changed, and all the times "Prayed" was recorded.
+The second button for each request has a pencil icon. This allows you to edit the text of the request, pretty much the same way you entered it; it starts with the current text, and you can add to it, modify it, or completely replace it. By default, updates will go in with an "Updated" status; you have the option to also mark this update as "Prayed" or "Answered." Answered requests will drop off the journal list.
 
-# Known Issues
+## Viewing a Request and Its History
+
+myPrayerJournal tracks all of the actions related to a request; the fourth button, with the magnifying glass icon, will show you the entire history, including the text as it changed, and all the times "Prayed" was recorded.
+
+## Answered Requests
+
+Next to "Journal" on the top navigation is the word "Answered." This page lists all answered requests, from most recent to least recent, along with the text of the request at the time it was marked as answered. It will also show you when it was marked answered. The button with the magnifying class at the words "Show Full Request" behave the same way as the paragraph immediately preceding this describes. _(This will likely change before a 0.9.x release, but this gives at least some way to find and review answered requests.)_
+
+## Known Issues
 
 See [the GitHub issues list](https://github.com/danieljsummers/myPrayerJournal/issues) for the most up-to-date list.
 
-- _There is no way to view "Answered" requests; the absence of this functionality is a big reason this is still considered alpha. Going back through requests to see how God has answered them is an encouraging benefit of taking the time to journal._
 - _If you try to do something an get an error notification instead of a green checkmark, try logging off and logging back on again. The site currently doesn't check to see if your session has expired, but the server with which it's communicating does._

src/api/package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-prayer-journal-api",
   "private": true,
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "Server API for myPrayerJournal",
   "main": "index.js",
   "author": "Daniel J. Summers <daniel@djs-consulting.com>",

src/api/src/db/request.js

@@ -68,6 +68,18 @@ export default function (pool) {
       })
     },
 
+    /**
+     * Get all answered requests with their text as of the "Answered" status
+     * @param {string} userId The Id of the user for whom requests should be retrieved
+     * @return All requests
+     */
+    answered: async (userId) => 
+      (await pool.query(`${currentRequestSql}
+        WHERE "userId" = $1
+          AND "lastStatus" = 'Answered'
+        ORDER BY "asOf" DESC`,
+        [ userId ])).rows,
+
     /**
      * Get the "current" version of a request by its Id
      * @param {string} requestId The Id of the request to retrieve

src/api/src/routes/request.js

@@ -40,12 +40,11 @@ export default function (checkJwt) {
       }
       await next()
     })
-    // Get the least-recently-updated request (used for the "pray through the journal" feature)
-    .get('/:id/oldest', checkJwt, async (ctx, next) => {
-      ctx.body = await db.request.oldest(ctx.state.user.sub)
+    .get('/answered', checkJwt, async (ctx, next) => {
+      ctx.body = await db.request.answered(ctx.state.user.sub)
+      ctx.response.status = 200
       await next()
     })
-  
 
   return router
 }

src/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-prayer-journal",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "myPrayerJournal - Front End",
   "author": "Daniel J. Summers <daniel@djs-consulting.com>",
   "private": true,
@@ -16,12 +16,14 @@
   "dependencies": {
     "auth0-js": "^8.10.1",
     "axios": "^0.16.2",
-    "element-ui": "^1.4.4",
+    "bootstrap-vue": "^1.0.0-beta.9",
     "moment": "^2.18.1",
     "pug": "^2.0.0-rc.4",
     "vue": "^2.4.4",
+    "vue-awesome": "^2.3.3",
     "vue-progressbar": "^0.7.3",
     "vue-router": "^2.6.0",
+    "vue-toast": "^3.1.0",
     "vuex": "^2.4.0"
   },
   "devDependencies": {

src/app/src/App.vue

@@ -4,8 +4,9 @@
   #content.container
     router-view
     vue-progress-bar
+    toast(ref='toast')
   footer
-    p.text-right: i myPrayerJournal v0.8.1
+    p.text-right: i myPrayerJournal v0.8.2
 </template>
 
 <script>
@@ -17,49 +18,35 @@ export default {
   name: 'app',
   components: {
     Navigation
+  },
+  mounted () {
+    this.$refs.toast.setOptions({ position: 'bottom right' })
+  },
+  computed: {
+    toast () {
+      return this.$refs.toast
+    }
   }
 }
 </script>
 
 <style>
-@import url('../node_modules/element-ui/lib/theme-default/index.css');
 body {
-  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue", Arial, sans-serif;
   padding-top: 60px;
-  margin: 0;
-}
-#content {
-  padding: 0 10px;
 }
 footer {
   border-top: solid 1px lightgray;
   margin-top: 1rem;
   padding: 0 1rem;
-
 }
 footer p {
   margin: 0;
 }
-.text-right {
-  text-align: right;
-}
-.material-icons.md-18 {
-  font-size: 18px;
-}
-.material-icons.md-24 {
-  font-size: 24px;
-}
-.material-icons.md-36 {
-  font-size: 36px;
-}
-.material-icons.md-48 {
-  font-size: 48px;
-}
-.material-icons {
-  vertical-align: middle;
-}
 .mpj-page-title {
   border-bottom: solid 1px lightgray;
   margin-bottom: 20px;
 }
+.mpj-request-text {
+  white-space: pre-line;
+}
 </style>

src/app/src/api/index.js

@@ -50,6 +50,11 @@ export default {
    * 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`)
+  getFullRequest: requestId => http.get(`request/${requestId}/full`),
+
+  /**
+   * Get all answered requests, along with the text they had when it was answered
+   */
+  getAnsweredRequests: () => http.get('request/answered')
 
 }

src/app/src/components/Answered.vue

@@ -0,0 +1,62 @@
+<template lang="pug">
+article
+  page-title(title='Answered Requests')
+  p(v-if='!loaded') Loading answered requests...
+  div(v-if='loaded')
+    p.mpj-request-text(v-for='req in requests')
+      b-btn(@click='showFull(req.requestId)' size='sm' variant='outline-secondary')
+        icon(name='search')
+        | &nbsp;View Full Request
+      | &nbsp; &nbsp; {{ req.text }} &nbsp;
+      small.text-muted: em.
+        (Answered #[date-from-now(:value='req.asOf')])
+  full-request(:events='eventBus')
+</template>
+
+<script>
+'use static'
+
+import Vue from 'vue'
+
+import FullRequest from './request/FullRequest'
+
+import api from '@/api'
+
+export default {
+  name: 'answered',
+  data () {
+    return {
+      eventBus: new Vue(),
+      requests: [],
+      loaded: false
+    }
+  },
+  async mounted () {
+    this.$Progress.start()
+    try {
+      const reqs = await api.getAnsweredRequests()
+      this.requests = reqs.data
+      this.$Progress.finish()
+    } catch (err) {
+      console.error(err)
+      this.toast.showToast('Error loading requests; check console for details', { theme: 'danger' })
+      this.$Progress.fail()
+    } finally {
+      this.loaded = true
+    }
+  },
+  components: {
+    FullRequest
+  },
+  computed: {
+    toast () {
+      return this.$parent.$refs.toast
+    }
+  },
+  methods: {
+    showFull (requestId) {
+      this.eventBus.$emit('full', requestId)
+    }
+  }
+}
+</script>

src/app/src/components/Home.vue

@@ -15,12 +15,7 @@ article
 <script>
 'use strict'
 
-import PageTitle from './common/PageTitle.vue'
-
 export default {
-  name: 'home',
-  components: {
-    PageTitle
-  }
+  name: 'home'
 }
 </script>

src/app/src/components/Journal.vue

@@ -4,20 +4,27 @@ article
   p(v-if='isLoadingJournal') Loading your prayer journal...
   template(v-if='!isLoadingJournal')
     new-request
-    el-row
-      el-col(:span='4'): strong Actions
-      el-col(:span='16'): strong Request
-      el-col(:span='4'): strong As Of
-    request-list-item(v-if='journal.length > 0' v-for='request in journal' :request='request' :key='request.requestId')
+    br
+    request-list-item(v-if='journal.length > 0'
+                      v-for='row in journalCardRows'
+                      :row='row'
+                      :events='eventBus'
+                      :toast='toast'
+                      :key='row[0].requestId')
     p.text-center(v-if='journal.length === 0'): em No requests found; click the "Add a New Request" button to add one
+    edit-request(:events='eventBus' :toast='toast' )
+    full-request(:events='eventBus')
 </template>
 
 <script>
 'use strict'
 
+import Vue from 'vue'
 import { mapState } from 'vuex'
+import chunk from 'lodash/chunk'
 
-import PageTitle from './common/PageTitle'
+import EditRequest from './request/EditRequest'
+import FullRequest from './request/FullRequest'
 import NewRequest from './request/NewRequest'
 import RequestListItem from './request/RequestListItem'
 
@@ -25,8 +32,14 @@ import actions from '@/store/action-types'
 
 export default {
   name: 'journal',
+  data () {
+    return {
+      eventBus: new Vue()
+    }
+  },
   components: {
-    PageTitle,
+    EditRequest,
+    FullRequest,
     NewRequest,
     RequestListItem
   },
@@ -34,14 +47,17 @@ export default {
     title () {
       return `${this.user.given_name}'s Prayer Journal`
     },
+    journalCardRows () {
+      return chunk(this.journal, 3)
+    },
+    toast () {
+      return this.$parent.$refs.toast
+    },
     ...mapState(['user', 'journal', 'isLoadingJournal'])
   },
   async created () {
     await this.$store.dispatch(actions.LOAD_JOURNAL, this.$Progress)
-    this.$message({
-      message: `Loaded ${this.journal.length} prayer requests`,
-      type: 'success'
-    })
+    this.toast.showToast(`Loaded ${this.journal.length} prayer requests`, { theme: 'success' })
   }
 }
 </script>

src/app/src/components/Navigation.vue

@@ -1,13 +1,17 @@
 <template lang="pug">
-el-menu(theme='dark' mode='horizontal' class='mpj-top-nav' router='true')
-  el-menu-item(index='/')
+b-navbar(toggleable='sm' type='dark' variant='mpj' fixed='top')
+  b-nav-toggle(target='nav_collapse')
+  b-navbar-brand(to='/')
     span(style='font-weight:100;') my
     span(style='font-weight:600;') Prayer
     span(style='font-weight:700;') Journal
-  el-menu-item(v-if='isAuthenticated' index='/journal') Journal
-  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(index='5'): a(href='https://danieljsummers.github.io/myPrayerJournal/' target='_blank' @click.stop='') Docs
+  b-collapse#nav_collapse(is-nav)
+    b-nav(is-nav-bar)
+      b-nav-item(v-if='isAuthenticated' to='/journal') Journal
+      b-nav-item(v-if='isAuthenticated' to='/answered') Answered
+      b-nav-item(v-if='isAuthenticated'): a(@click.stop='logOff()') Log Off
+      b-nav-item(v-if='!isAuthenticated'): a(@click.stop='logOn()') Log On
+      b-nav-item(href='https://danieljsummers.github.io/myPrayerJournal/' target='_blank' @click.stop='') Docs
 </template>
 
 <script>
@@ -38,13 +42,7 @@ export default {
 </script>
 
 <style>
-.mpj-top-nav {
-  position: fixed;
-  top: 0px;
-  width: 100%;
-}
-.mpj-top-nav a:link,
-.mpj-top-nav a:visited {
-  text-decoration: none;
+.bg-mpj {
+  background-color: #1e7e34 !important;
 }
 </style>

src/app/src/components/common/DateFromNow.vue

@@ -20,8 +20,10 @@ export default {
     }
   },
   data () {
+    const dt = moment(this.value)
     return {
-      fromNow: moment(this.value).fromNow(),
+      fromNow: dt.fromNow(),
+      actual: dt.format('LLLL'),
       intervalId: null
     }
   },
@@ -39,7 +41,12 @@ export default {
     }
   },
   render (createElement) {
-    return createElement(this.tag, this.fromNow)
+    return createElement(this.tag, {
+      domProps: {
+        title: this.actual,
+        innerText: this.fromNow
+      }
+    })
   }
 }
 </script>

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

@@ -1,18 +1,25 @@
 <template lang="pug">
 span
-  el-button(icon='edit' @click='openDialog()' title='Edit')
-  el-dialog(title='Edit Prayer Request' :visible.sync='editVisible')
-    el-form(:model='form' :label-position='top')
-      el-form-item(label='Prayer Request')
-        el-input(type='textarea' v-model='form.requestText' :rows='10' @blur="trimText()")
-      el-form-item(label='Also Mark As')
-        el-radio-group(v-model='form.status')
-          el-radio-button(label='Updated') Updated
-          el-radio-button(label='Prayed') Prayed
-          el-radio-button(label='Answered') Answered
-    span.dialog-footer(slot='footer')
-      el-button(@click='closeDialog()') Cancel
-      el-button(type='primary' @click='saveRequest()') Save
+  //- b-btn(@click='openDialog()' title='Edit' size='sm' variant='outline-secondary'): icon(name='pencil')
+  b-modal(title='Edit Prayer Request'
+          v-model='editVisible'
+          size='lg'
+          header-bg-variant='dark'
+          header-text-variant='light'
+          @edit='openDialog()'
+          @shows='focusRequestText')
+    b-form
+      b-form-group(label='Prayer Request' label-for='request_text')
+        b-textarea#request_text(v-model='form.requestText' :rows='10' @blur='trimText()' ref='toFocus')
+      b-form-group(label='Also Mark As')
+        b-radio-group(v-model='form.status' buttons)
+          b-radio(value='Updated') Updated
+          b-radio(value='Prayed') Prayed
+          b-radio(value='Answered') Answered
+    div.w-100.text-right(slot='modal-footer')
+      b-btn(variant='primary' @click='saveRequest()') Save
+      | &nbsp; &nbsp;
+      b-btn(variant='outline-secondary' @click='closeDialog()') Cancel
 </template>
 
 <script>
@@ -22,25 +29,38 @@ import actions from '@/store/action-types'
 
 export default {
   name: 'edit-request',
-  props: [ 'request' ],
+  props: {
+    toast: { required: true },
+    events: { required: true }
+  },
   data () {
     return {
       editVisible: false,
       form: {
-        requestText: this.request.text,
+        requestId: '',
+        requestText: '',
         status: 'Updated'
-      },
-      formLabelWidth: '120px'
+      }
     }
   },
+  created () {
+    this.events.$on('edit', this.openDialog)
+  },
   methods: {
     closeDialog () {
+      this.form.requestId = ''
       this.form.requestText = ''
       this.form.status = 'Updated'
       this.editVisible = false
     },
-    openDialog () {
+    focusRequestText (e) {
+      this.$refs.toFocus.focus()
+    },
+    openDialog (request) {
+      this.form.requestId = request.requestId
+      this.form.requestText = request.text
       this.editVisible = true
+      this.focusRequestText(null)
     },
     trimText () {
       this.form.requestText = this.form.requestText.trim()
@@ -48,23 +68,17 @@ export default {
     async saveRequest () {
       await this.$store.dispatch(actions.UPDATE_REQUEST, {
         progress: this.$Progress,
-        requestId: this.request.requestId,
+        requestId: this.form.requestId,
         updateText: this.form.requestText,
         status: this.form.status
       })
       if (this.form.status === 'Answered') {
-        this.$message({
-          message: 'Request updated and removed from active journal',
-          type: 'success'
-        })
+        this.toast.showToast('Request updated and removed from active journal', { theme: 'success' })
       } else {
-        this.$message({
-          message: 'Request updated',
-          type: 'success'
-        })
+        this.toast.showToast('Request updated', { theme: 'success' })
       }
-      this.editVisible = false
+      this.closeDialog()
     }
   }
 }
-</script>
+</script>

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

@@ -1,11 +1,15 @@
 <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')
+  b-modal(title='Prayer Request History'
+          v-model='historyVisible'
+          size='lg'
+          header-bg-variant='dark'
+          header-text-variant='light'
+          @shows='focusRequestText')
+    b-list-group(v-if='null !== full' flush)
       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
+    div.w-100.text-right(slot='modal-footer')
+      b-btn(variant='primary' @click='closeDialog()') Close
 </template>
 
 <script>
@@ -17,13 +21,18 @@ import api from '@/api'
 
 export default {
   name: 'full-request',
-  props: [ 'request' ],
+  props: {
+    events: { required: true }
+  },
   data () {
     return {
       historyVisible: false,
       full: null
     }
   },
+  created () {
+    this.events.$on('full', this.openDialog)
+  },
   components: {
     FullRequestHistory
   },
@@ -32,10 +41,10 @@ export default {
       this.full = null
       this.historyVisible = false
     },
-    async openDialog () {
+    async openDialog (requestId) {
       this.historyVisible = true
       this.$Progress.start()
-      const req = await api.getFullRequest(this.request.requestId)
+      const req = await api.getFullRequest(requestId)
       this.full = req.data
       this.$Progress.finish()
     }

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

@@ -1,5 +1,5 @@
 <template lang="pug">
-p.journal-request
+b-list-group-item
   | {{ history.status }} {{ asOf }}
   span(v-if='0 < history.text.length') &nbsp;&raquo; {{ history.text }}
 </template>
@@ -11,7 +11,9 @@ import moment from 'moment'
 
 export default {
   name: 'full-request-history',
-  props: [ 'history' ],
+  props: {
+    history: { required: true }
+  },
   computed: {
     asOf () {
       return moment(this.history.asOf).fromNow()

src/app/src/components/request/NewRequest.vue

@@ -1,13 +1,22 @@
 <template lang="pug">
 div
-  el-button(icon='plus' @click='openDialog()') Add a New Request
-  el-dialog(title='Add a New Prayer Request' :visible.sync='showNewVisible')
-    el-form(:model='form' :label-position='top')
-      el-form-item(label='Prayer Request')
-        el-input(type='textarea' v-model='form.requestText' :rows='10' @blur='trimText()')
-    span.dialog-footer(slot='footer')
-      el-button(@click='closeDialog()') Cancel
-      el-button(type='primary' @click='saveRequest()') Save
+  b-btn(@click='openDialog()' size='sm' variant='primary')
+    icon(name='plus')
+    | &nbsp; Add a New Request
+  b-modal(title='Add a New Prayer Request'
+          v-model='showNewVisible'
+          size='lg'
+          header-bg-variant='dark'
+          header-text-variant='light'
+          @shown='focusRequestText')
+    b-form
+      b-form-group(label='Prayer Request' label-for='request_text')
+        b-textarea#request_text(v-model='form.requestText' :rows='10' @blur='trimText()' ref='toFocus')
+    div.w-100.text-right(slot='modal-footer')
+      b-btn(variant='primary' @click='saveRequest()') Save
+      | &nbsp; &nbsp;
+      b-btn(variant='outline-secondary' @click='closeDialog()') Cancel
+  toast(ref='toast')
 </template>
 
 <script>
@@ -26,11 +35,17 @@ export default {
       formLabelWidth: '120px'
     }
   },
+  mounted () {
+    this.$refs.toast.setOptions({ position: 'bottom right' })
+  },
   methods: {
     closeDialog () {
       this.form.requestText = ''
       this.showNewVisible = false
     },
+    focusRequestText (e) {
+      this.$refs.toFocus.focus()
+    },
     openDialog () {
       this.showNewVisible = true
     },
@@ -42,10 +57,7 @@ export default {
         progress: this.$Progress,
         requestText: this.form.requestText
       })
-      this.$message({
-        message: 'New prayer request added',
-        type: 'success'
-      })
+      this.$refs.toast.showToast('New prayer request added', { theme: 'success' })
       this.closeDialog()
     }
   }

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

@@ -1,62 +1,51 @@
 <template lang="pug">
-el-row.journal-request
-  el-col(:span='4'): p
-    el-button(icon='check' @click='markPrayed()' title='Pray')
-    edit-request(:request='request')
-    full-request(:request='request')
-  el-col(:span='16'): p {{ text }}
-  el-col(:span='4'): p: date-from-now(:value='request.asOf')
+div
+  b-card-group.w-100(deck)
+    b-card(v-for='(request, idx) in row' border-variant='dark' no-body)
+      b-card-body.p-0
+        p.card-text.mpj-request-text.mb-1.px-3.pt-3
+          | {{ request.text }}
+        p.card-text.p-0.pr-1.text-right: small.text-muted: em
+          = '(last activity '
+          date-from-now(:value='request.asOf')
+          | )
+      b-card-footer.text-center.py-1.
+        #[b-btn(@click='markPrayed(idx)' variant='outline-primary' title='Pray' size='sm'): icon(name='check')]
+        #[b-btn(@click.stop='showEdit(request)' variant='outline-secondary' title='Edit' size='sm'): icon(name='pencil')]
+        #[b-btn(disabled variant='outline-secondary' title='Add Notes' size='sm'): icon(name='file-text-o')]
+        #[b-btn(@click.stop='showFull(idx)' variant='outline-secondary' title='View Full Request' size='sm'): icon(name='search')]
+    b-card(v-for='it in 3 - row.length')
+  br
 </template>
 
 <script>
 'use strict'
 
-import moment from 'moment'
-
-import DateFromNow from '../common/DateFromNow'
-import EditRequest from './EditRequest'
-import FullRequest from './FullRequest'
-
 import actions from '@/store/action-types'
 
 export default {
   name: 'request-list-item',
-  props: [ 'request' ],
-  data () {
-    return { interval: null }
-  },
-  components: {
-    DateFromNow,
-    EditRequest,
-    FullRequest
+  props: {
+    row: { required: true },
+    toast: { required: true },
+    events: { required: true }
   },
   methods: {
-    async markPrayed () {
+    async markPrayed (idx) {
       await this.$store.dispatch(actions.UPDATE_REQUEST, {
         progress: this.$Progress,
-        requestId: this.request.requestId,
+        requestId: this.row[idx].requestId,
         status: 'Prayed',
         updateText: ''
       })
-      this.$message({
-        message: 'Request marked as prayed',
-        type: 'success'
-      })
-    }
-  },
-  computed: {
-    asOf () {
-      return moment(this.request.asOf).fromNow()
+      this.toast.showToast('Request marked as prayed', { theme: 'success' })
     },
-    text () {
-      return this.request.text.split('\n').join('<br>')
+    showEdit (request) {
+      this.events.$emit('edit', request)
+    },
+    showFull (idx) {
+      this.events.$emit('full', this.row[idx].requestId)
     }
   }
 }
 </script>
-
-<style>
-.journal-request {
-  border-bottom: dotted 1px lightgray;
-}
-</style>

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

@@ -7,14 +7,10 @@ article
 <script>
 'use strict'
 
-import PageTitle from '../common/PageTitle'
 import AuthService from '@/auth/AuthService'
 
 export default {
   name: 'log-on',
-  components: {
-    PageTitle
-  },
   created () {
     this.$Progress.start()
     new AuthService().handleAuthentication(this.$store, this.$router)

src/app/src/main.js

@@ -1,20 +1,33 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
-import ElementUI from 'element-ui'
+import BootstrapVue from 'bootstrap-vue'
+import Icon from 'vue-awesome/components/Icon'
 import VueProgressBar from 'vue-progressbar'
-import 'element-ui/lib/theme-default/index.css'
+import VueToast from 'vue-toast'
+
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+import 'bootstrap/dist/css/bootstrap.css'
+import 'vue-toast/dist/vue-toast.min.css'
+
+// Only import the icons we need; the whole set is ~500K!
+import 'vue-awesome/icons/check'
+import 'vue-awesome/icons/file-text-o'
+import 'vue-awesome/icons/pencil'
+import 'vue-awesome/icons/plus'
+import 'vue-awesome/icons/search'
 
 import App from './App'
 import router from './router'
 import store from './store'
+import DateFromNow from './components/common/DateFromNow'
+import PageTitle from './components/common/PageTitle'
 
 Vue.config.productionTip = false
 
-Vue.use(ElementUI)
-
+Vue.use(BootstrapVue)
 Vue.use(VueProgressBar, {
-  color: 'rgb(32, 160, 255)',
+  color: 'yellow',
   failedColor: 'red',
   height: '5px',
   transition: {
@@ -24,6 +37,11 @@ Vue.use(VueProgressBar, {
   }
 })
 
+Vue.component('icon', Icon)
+Vue.component('date-from-now', DateFromNow)
+Vue.component('page-title', PageTitle)
+Vue.component('toast', VueToast)
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/app/src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 
+import Answered from '@/components/Answered'
 import Home from '@/components/Home'
 import Journal from '@/components/Journal'
 import LogOn from '@/components/user/LogOn'
@@ -11,6 +12,7 @@ export default new Router({
   mode: 'history',
   routes: [
     { path: '/', name: 'Home', component: Home },
+    { path: '/answered', name: 'Answered', component: Answered },
     { path: '/journal', name: 'Journal', component: Journal },
     { path: '/user/log-on', name: 'LogOn', component: LogOn }
   ]

src/app/src/store/index.js

@@ -33,7 +33,12 @@ const logError = function (error) {
 export default new Vuex.Store({
   state: {
     user: JSON.parse(localStorage.getItem('user_profile') || '{}'),
-    isAuthenticated: this.auth0.isAuthenticated(),
+    isAuthenticated: (() => {
+      if (this.auth0.isAuthenticated()) {
+        api.setBearer(localStorage.getItem('id_token'))
+      }
+      return this.auth0.isAuthenticated()
+    })(),
     journal: {},
     isLoadingJournal: false
   },

src/app/yarn.lock

@@ -241,10 +241,6 @@ async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
 
-async-validator@1.6.9:
-  version "1.6.9"
-  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.6.9.tgz#a8309daa8b83421cdbd4628e026d6abb25192d34"
-
 async@1.x, async@^1.4.0:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
@@ -480,10 +476,6 @@ babel-helper-replace-supers@^6.24.1:
     babel-traverse "^6.24.1"
     babel-types "^6.24.1"
 
-babel-helper-vue-jsx-merge-props@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.2.tgz#aceb1c373588279e2755ea1cfd35c22394fd33f8"
-
 babel-helpers@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.24.1.tgz#3471de9caec388e5c850e597e58a26ddf37602b2"
@@ -1001,6 +993,16 @@ boom@5.x.x:
   dependencies:
     hoek "4.x.x"
 
+bootstrap-vue@^1.0.0-beta.9:
+  version "1.0.0-beta.9"
+  resolved "https://registry.yarnpkg.com/bootstrap-vue/-/bootstrap-vue-1.0.0-beta.9.tgz#4e0bc5bcb95a90dc3bec7124ea3ddf5cc4c6ffa6"
+  dependencies:
+    bootstrap "^4.0.0-beta"
+
+bootstrap@^4.0.0-beta:
+  version "4.0.0-beta"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0-beta.tgz#dc5928175d2e71310bc668cf9e05a907211b72a6"
+
 brace-expansion@^1.0.0, brace-expansion@^1.1.7:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
@@ -1792,10 +1794,6 @@ deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
 
-deepmerge@^1.2.0:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
-
 defined@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
@@ -1986,15 +1984,6 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.18:
   version "1.3.21"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.21.tgz#a967ebdcfe8ed0083fc244d1894022a8e8113ea2"
 
-element-ui@^1.4.4:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-1.4.4.tgz#cbcb0bf36d06b7e9c8cefdb4514d2d0a50a4a6db"
-  dependencies:
-    async-validator "1.6.9"
-    babel-helper-vue-jsx-merge-props "^2.0.0"
-    deepmerge "^1.2.0"
-    throttle-debounce "^1.0.1"
-
 elliptic@^6.0.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
@@ -5937,10 +5926,6 @@ text-table@^0.2.0, text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
 
-throttle-debounce@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.0.1.tgz#dad0fe130f9daf3719fdea33dc36a8e6ba7f30b5"
-
 throttleit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"
@@ -6208,6 +6193,10 @@ void-elements@^2.0.0, void-elements@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
+vue-awesome@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/vue-awesome/-/vue-awesome-2.3.3.tgz#e83f976fe5c7f86d207c24ca33731bdc6e9906a9"
+
 vue-hot-reload-api@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.1.0.tgz#9ca58a6e0df9078554ce1708688b6578754d86de"
@@ -6256,6 +6245,10 @@ vue-template-es2015-compiler@^1.2.2:
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.5.3.tgz#22787de4e37ebd9339b74223bc467d1adee30545"
 
+vue-toast@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/vue-toast/-/vue-toast-3.1.0.tgz#19eb4c8150faf5c31c12f8b897a955d1ac0b5e9e"
+
 vue@^2.4.4:
   version "2.4.4"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.4.4.tgz#ea9550b96a71465fd2b8b17b61673b3561861789"