Updated dox for #9; version bump

Also:
- rearranged API calls to be in alphabetical order (except the bearer
stuff at the top)
- modified the API base URL and Auth0 renewal URLs to be derived from
the browser's location (localhost / prod both work now with no change)

docs/index.md

@@ -1,6 +1,8 @@
+# Documentation
+
 ## 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._
+_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 Bit Badger Solutions sites have their data backed up. Throughout this document, current gotchas will be called out with italic text, like this notice._
 
 ## Finding the Site
 
@@ -26,16 +28,18 @@ The first button for each request has a checkmark icon; clicking this button wil
 
 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.
 
+## Adding Notes
+
+The third button for each request has an icon that looks like a piece of paper with writing; this lets you record notes about the request. If there is something you want to record that doesn't change the text of the request, this is the place to do it. For example, you may be praying for a long-term health issue, and that person tells you that their status is the same; or, you may want to record something God said to you while you were praying for that request.
+
 ## 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.)_
+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 at the bottom of each request, with the magnifying glass and the words "Show Full Request", link to a page that shows that request's complete history and notes, along with a few statistics about that request. The history and notes are listed from most recent to least recent; if you want to read it chronologically, just press the "End" key on your keyboard and read it from the bottom up.
 
 ## Known Issues
 
 See [the GitHub issues list](https://github.com/danieljsummers/myPrayerJournal/issues) for the most up-to-date list.
-
-- _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,10 +1,10 @@
 {
   "name": "my-prayer-journal-api",
   "private": true,
-  "version": "0.8.2",
+  "version": "0.8.5",
   "description": "Server API for myPrayerJournal",
   "main": "index.js",
-  "author": "Daniel J. Summers <daniel@djs-consulting.com>",
+  "author": "Daniel J. Summers <daniel@bitbadger.solutions>",
   "license": "MIT",
   "dependencies": {
     "chalk": "^2.1.0",

src/api/src/db/ddl.js

@@ -46,6 +46,17 @@ const ddl = [
         PRIMARY KEY ("requestId", "asOf"));
       COMMENT ON TABLE mpj.history IS 'Request update history'`
   },
+  {
+    name: 'note Table',
+    check: tableSql('note'),
+    fix: `
+      CREATE TABLE mpj.note (
+        "requestId" varchar(25) NOT NULL REFERENCES mpj.request,
+        "asOf" bigint NOT NULL,
+        "notes" text NOT NULL,
+        PRIMARY KEY ("requestId", "asOf"));
+      COMMENT ON TABLE mpj.note IS 'Notes regarding a request'`
+  },
   {
     name: 'request.userId Index',
     check: indexSql('request', 'idx_request_userId'),

src/api/src/db/request.js

@@ -18,21 +18,41 @@ const requestNotFound = {
 }
 
 export default function (pool) {
+  
+  /**
+   * Retrieve basic information about a single request
+   * @param {string} requestId The Id of the request to retrieve
+   * @param {string} userId The Id of the user to whom the request belongs
+   */
+  let retrieveRequest = (requestId, userId) =>
+    pool.query(`
+      SELECT "requestId", "enteredOn"
+        FROM mpj.request
+      WHERE "requestId" = $1
+        AND "userId" = $2`,
+      [ requestId, userId ])
+  
   return {
     /**
      * Add a history entry for this request
-     * @param {string} requestId The Id of the request
+     * @param {string} userId The Id of the user to whom this request belongs
+     * @param {string} requestId The Id of the request to which the update applies
      * @param {string} status The status for this history entry
      * @param {string} updateText The updated text for the request (pass blank if no update)
+     * @return {number} 404 if the request is not found or does not belong to the given user, 204 if successful
      */
-    addHistory: async (requestId, status, updateText) => {
-      const asOf = Date.now()
+    addHistory: async (userId, requestId, status, updateText) => {
+      const req = retrieveRequest(requestId, userId)
+      if (req.rowCount === 0) {
+        return 404
+      }
       await pool.query(`
         INSERT INTO mpj.history
           ("requestId", "asOf", "status", "text")
         VALUES
           ($1, $2, $3, NULLIF($4, ''))`,
-      [ requestId, asOf, status, updateText ])
+        [ requestId, Date.now(), status, updateText ])
+      return 204
     },
 
     /**
@@ -68,6 +88,27 @@ export default function (pool) {
       })
     },
 
+    /**
+     * Add a note about a prayer request
+     * @param {string} userId The Id of the user to whom the request belongs
+     * @param {string} requestId The Id of the request to which the note applies
+     * @param {string} note The notes to add
+     * @return {number} 404 if the request is not found or does not belong to the given user, 204 if successful
+     */
+    addNote: async (userId, requestId, note) => {
+      const req = retrieveRequest(requestId, userId)
+      if (req.rowCount === 0) {
+        return 404
+      }
+      await pool.query(`
+        INSERT INTO mpj.note
+          ("requestId", "asOf", "notes")
+        VALUES
+          ($1, $2, $3)`,
+        [ requestId, Date.now(), note ])
+      return 204
+    },
+
     /**
      * 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
@@ -101,12 +142,7 @@ export default function (pool) {
      * @return The request, or a request-like object indicating that the request was not found
      */
     fullById: async (userId, requestId) => {
-      const reqResults = await pool.query(`
-        SELECT "requestId", "enteredOn"
-          FROM mpj.request
-         WHERE "requestId" = $1
-           AND "userId" = $2`,
-        [ requestId, userId ])
+      const reqResults = await retrieveRequest(requestId, userId)
       if (0 === reqResults.rowCount) {
         return requestNotFound
       }
@@ -126,7 +162,27 @@ export default function (pool) {
      * @param {string} userId The Id of the user
      * @return The requests that make up the current journal
      */
-    journal: async userId => (await pool.query(`${journalSql} ORDER BY "asOf"`, [ userId ])).rows
+    journal: async userId => (await pool.query(`${journalSql} ORDER BY "asOf"`, [ userId ])).rows,
+
+    /**
+     * Get the notes for a request, most recent first
+     * @param {string} userId The Id of the user to whom the request belongs
+     * @param {string} requestId The Id of the request whose notes should be retrieved
+     * @return The notes for the request
+     */
+    notesById: async (userId, requestId) => {
+      const reqResults = await retrieveRequest(requestId, userId)
+      if (0 === reqResults.rowCount) {
+        return requestNotFound
+      }
+      const notes = await pool.query(`
+        SELECT "asOf", "notes"
+          FROM mpj.note
+         WHERE "requestId" = $1
+         ORDER BY "asOf" DESC`,
+        [ requestId ])
+      return notes.rows
+    }
     
   }
 }

src/api/src/routes/request.js

@@ -16,8 +16,13 @@ export default function (checkJwt) {
     // Add a request history entry (prayed, updated, answered, etc.)
     .post('/:id/history', checkJwt, async (ctx, next) => {
       const body = ctx.request.body
-      await db.request.addHistory(ctx.params.id, body.status, body.updateText)
-      ctx.response.status = 204
+      ctx.response.status = await db.request.addHistory(ctx.state.user.sub, ctx.params.id, body.status, body.updateText)
+      await next()
+    })
+    // Add a note to a request
+    .post('/:id/note', checkJwt, async (ctx, next) => {
+      const body = ctx.request.body
+      ctx.response.status = await db.request.addNote(ctx.state.user.sub, ctx.params.id, body.notes)
       await next()
     })
     // Get a journal-style request by its Id
@@ -40,6 +45,30 @@ export default function (checkJwt) {
       }
       await next()
     })
+    // Get the notes for a request
+    .get('/:id/notes', checkJwt, async (ctx, next) => {
+      const notes = await db.request.notesById(ctx.state.user.sub, ctx.params.id)
+      if (notes.text && 'Not Found' === notes.text) {
+        ctx.response.status = 404
+      } else {
+        ctx.body = notes
+        ctx.response.status = 200
+      }
+      await next()
+    })
+    // Get a complete request; equivalent to full + notes
+    .get('/:id/complete', checkJwt, async (ctx, next) => {
+      const req = await db.request.fullById(ctx.state.user.sub, ctx.params.id)
+      if ('Not Found' === req.text) {
+        ctx.response.status = 404
+      } else {
+        ctx.response.status = 200
+        req.notes = await db.request.notesById(ctx.state.user.sub, ctx.params.id)
+        ctx.body = req
+      }
+      await next()
+    })
+    // Get all answered requests
     .get('/answered', checkJwt, async (ctx, next) => {
       ctx.body = await db.request.answered(ctx.state.user.sub)
       ctx.response.status = 200

src/app/package.json

@@ -1,8 +1,8 @@
 {
   "name": "my-prayer-journal",
-  "version": "0.8.2",
+  "version": "0.8.5",
   "description": "myPrayerJournal - Front End",
-  "author": "Daniel J. Summers <daniel@djs-consulting.com>",
+  "author": "Daniel J. Summers <daniel@bitbadger.solutions>",
   "private": true,
   "scripts": {
     "dev": "node build/dev-server.js",

src/app/src/App.vue

@@ -6,7 +6,10 @@
     vue-progress-bar
     toast(ref='toast')
   footer
-    p.text-right: i myPrayerJournal v0.8.2
+    p.text-right.text-muted: i.
+      myPrayerJournal v{{ version }} •
+      #[a(href='https://github.com/danieljsummers/myprayerjournal') Developed] and hosted by
+      #[a(href='https://bitbadger.solutions') Bit Badger Solutions]
 </template>
 
 <script>
@@ -14,11 +17,16 @@
 
 import Navigation from './components/Navigation.vue'
 
+import { version } from '../package.json'
+
 export default {
   name: 'app',
   components: {
     Navigation
   },
+  data () {
+    return { version }
+  },
   mounted () {
     this.$refs.toast.setOptions({ position: 'bottom right' })
   },
@@ -31,6 +39,9 @@ export default {
 </script>
 
 <style>
+html, body {
+  background-color: whitesmoke;
+}
 body {
   padding-top: 60px;
 }
@@ -42,11 +53,16 @@ footer {
 footer p {
   margin: 0;
 }
-.mpj-page-title {
-  border-bottom: solid 1px lightgray;
-  margin-bottom: 20px;
+a:link, a:visited {
+  color: #050;
 }
 .mpj-request-text {
   white-space: pre-line;
 }
+.bg-mpj {
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#050), to(whitesmoke));
+  background-image: -webkit-linear-gradient(top, #050, whitesmoke);
+  background-image: -moz-linear-gradient(top, #050, whitesmoke);
+  background-image: linear-gradient(to bottom, #050, whitesmoke);
+}
 </style>

src/app/src/api/index.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 
 const http = axios.create({
-  baseURL: 'http://localhost:3000/api/'
+  baseURL: `${location.protocol}//${location.host}/api/`
 })
 
 /**
@@ -21,9 +21,11 @@ export default {
   removeBearer: () => delete http.defaults.headers.common['authorization'],
 
   /**
-   * Get all prayer requests and their most recent updates
+   * Add a note for a prayer request
+   * @param {string} requestId The Id of the request to which the note applies
+   * @param {string} notes The notes to be added
    */
-  journal: () => http.get('journal/'),
+  addNote: (requestId, notes) => http.post(`request/${requestId}/note`, { notes }),
 
   /**
    * Add a new prayer request
@@ -32,19 +34,9 @@ export default {
   addRequest: requestText => http.post('request/', { requestText }),
 
   /**
-   * Update a prayer request
-   * @param request The request (should have requestId, status, and updateText properties)
+   * Get all answered requests, along with the text they had when it was answered
    */
-  updateRequest: request => http.post(`request/${request.requestId}/history`, {
-    status: request.status,
-    updateText: request.updateText
-  }),
-
-  /**
-   * 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}`),
+  getAnsweredRequests: () => http.get('request/answered'),
 
   /**
    * Get a prayer request (full; includes all history)
@@ -53,8 +45,34 @@ export default {
   getFullRequest: requestId => http.get(`request/${requestId}/full`),
 
   /**
-   * Get all answered requests, along with the text they had when it was answered
+   * Get past notes for a prayer request
+   * @param {string} requestId The Id of the request for which notes should be retrieved
    */
-  getAnsweredRequests: () => http.get('request/answered')
+  getNotes: requestId => http.get(`request/${requestId}/notes`),
+
+  /**
+   * 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}`),
+
+  /**
+   * Get a complete request; equivalent of "full" and "notes" combined
+   */
+  getRequestComplete: requestId => http.get(`request/${requestId}/complete`),
+
+  /**
+   * Get all prayer requests and their most recent updates
+   */
+  journal: () => http.get('journal/'),
+
+  /**
+   * Update a prayer request
+   * @param request The request (should have requestId, status, and updateText properties)
+   */
+  updateRequest: request => http.post(`request/${request.requestId}/history`, {
+    status: request.status,
+    updateText: request.updateText
+  })
 
 }

src/app/src/auth/AuthService.js

@@ -5,6 +5,8 @@ import auth0 from 'auth0-js'
 import AUTH_CONFIG from './auth0-variables'
 import mutations from '@/store/mutation-types'
 
+var tokenRenewalTimeout
+
 export default class AuthService {
 
   constructor () {
@@ -17,7 +19,7 @@ export default class AuthService {
   auth0 = new auth0.WebAuth({
     domain: AUTH_CONFIG.domain,
     clientID: AUTH_CONFIG.clientId,
-    redirectUri: AUTH_CONFIG.callbackUrl,
+    redirectUri: AUTH_CONFIG.appDomain + AUTH_CONFIG.callbackUrl,
     audience: `https://${AUTH_CONFIG.domain}/userinfo`,
     responseType: 'token id_token',
     scope: 'openid profile email'
@@ -78,6 +80,16 @@ export default class AuthService {
       })
   }
 
+  scheduleRenewal () {
+    let expiresAt = JSON.parse(localStorage.getItem('expires_at'))
+    let delay = expiresAt - Date.now()
+    if (delay > 0) {
+      tokenRenewalTimeout = setTimeout(() => {
+        this.renewToken()
+      }, delay)
+    }
+  }
+
   setSession (authResult) {
     // Set the time that the access token will expire at
     let expiresAt = JSON.stringify(
@@ -86,10 +98,30 @@ export default class AuthService {
     localStorage.setItem('access_token', authResult.accessToken)
     localStorage.setItem('id_token', authResult.idToken)
     localStorage.setItem('expires_at', expiresAt)
+    this.scheduleRenewal()
+  }
+
+  renewToken () {
+    console.log('attempting renewal...')
+    this.auth0.renewAuth(
+      {
+        audience: `https://${AUTH_CONFIG.domain}/userinfo`,
+        redirectUri: `${AUTH_CONFIG.appDomain}/static/silent.html`,
+        usePostMessage: true
+      },
+      (err, result) => {
+        if (err) {
+          console.log(err)
+        } else {
+          this.setSession(result)
+        }
+      }
+    )
   }
 
   logout (store, router) {
     // Clear access token and ID token from local storage
+    clearTimeout(tokenRenewalTimeout)
     localStorage.removeItem('access_token')
     localStorage.removeItem('id_token')
     localStorage.removeItem('expires_at')

src/app/src/components/Answered.vue

@@ -2,35 +2,38 @@
 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')
+  div(v-if='loaded').mpj-answered-list
+    p.mpj-request-text(v-for='req in requests' :key='req.requestId')
+      | {{ req.text }}
+      br
+      br
+      b-btn(:to='{ name: "AnsweredDetail", params: { id: req.requestId }}'
+            size='sm'
+            variant='outline-secondary')
         icon(name='search')
-        |  View Full Request
-      |     {{ req.text }}  
+        = ' View Full Request'
       small.text-muted: em.
-        (Answered #[date-from-now(:value='req.asOf')])
-  full-request(:events='eventBus')
+          Answered #[date-from-now(:value='req.asOf')]
 </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
     }
   },
+  computed: {
+    toast () {
+      return this.$parent.$refs.toast
+    }
+  },
   async mounted () {
     this.$Progress.start()
     try {
@@ -44,19 +47,15 @@ export default {
     } finally {
       this.loaded = true
     }
-  },
-  components: {
-    FullRequest
-  },
-  computed: {
-    toast () {
-      return this.$parent.$refs.toast
-    }
-  },
-  methods: {
-    showFull (requestId) {
-      this.eventBus.$emit('full', requestId)
-    }
   }
 }
 </script>
+
+<style>
+.mpj-answered-list p {
+  border-top: solid 1px lightgray;
+}
+.mpj-answered-list p:first-child {
+  border-top: none;
+}
+</style>

src/app/src/components/AnsweredDetail.vue

@@ -0,0 +1,81 @@
+<template lang="pug">
+article
+  page-title(title='Answered Request')
+  p(v-if='!request') Loading request...
+  template(v-if='request')
+    p.
+      Answered {{ formatDate(answered) }} (#[date-from-now(:value='answered')]) &nbsp;
+      #[small: em.text-muted prayed {{ prayedCount }} times, open {{ openDays }} days]
+    p.mpj-request-text {{ lastText }}
+    b-table(small hover :fields='fields' :items='log')
+      template(slot='action' scope='data') {{ data.item.status }} on {{ formatDate(data.item.asOf) }}
+</template>
+
+<script>
+'use strict'
+
+import moment from 'moment'
+
+import api from '@/api'
+
+const asOfDesc = (a, b) => b.asOf - a.asOf
+
+export default {
+  name: 'answer-detail',
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      request: null,
+      fields: [
+        { key: 'action', label: 'Action' },
+        { key: 'text', label: 'Update / Notes' }
+      ]
+    }
+  },
+  computed: {
+    answered () {
+      return this.request.history.find(hist => hist.status === 'Answered').asOf
+    },
+    lastText () {
+      return this.request.history
+        .filter(hist => hist.text > '')
+        .sort(asOfDesc)[0].text
+    },
+    log () {
+      return this.request.notes
+        .map(note => ({ asOf: note.asOf, text: note.notes, status: 'Notes' }))
+        .concat(this.request.history)
+        .sort(asOfDesc)
+        .slice(1)
+    },
+    openDays () {
+      return Math.floor(
+        (this.answered - this.request.history.find(hist => hist.status === 'Created').asOf) / 1000 / 60 / 60 / 24)
+    },
+    prayedCount () {
+      return this.request.history.filter(hist => hist.status === 'Prayed').length
+    }
+  },
+  async mounted () {
+    this.$Progress.start()
+    try {
+      const req = await api.getRequestComplete(this.id)
+      this.request = req.data
+      this.$Progress.finish()
+    } catch (e) {
+      console.log(e)
+      this.$Progress.fail()
+    }
+  },
+  methods: {
+    formatDate (asOf) {
+      return moment(asOf).format('LL')
+    }
+  }
+}
+</script>

src/app/src/components/Home.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
 article
-  page-title(title='Welcome!' hideOnPage='true')
+  page-title(title='Welcome!'
+             hideOnPage='true')
   p &nbsp;
   p.
     myPrayerJournal is a place where individuals can record their prayer requests, record that they prayed for them,

src/app/src/components/Journal.vue

@@ -12,7 +12,10 @@ article
                       :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' )
+    edit-request(:events='eventBus'
+                 :toast='toast')
+    notes-edit(:events='eventBus'
+               :toast='toast')
     full-request(:events='eventBus')
 </template>
 
@@ -26,23 +29,25 @@ import chunk from 'lodash/chunk'
 import EditRequest from './request/EditRequest'
 import FullRequest from './request/FullRequest'
 import NewRequest from './request/NewRequest'
+import NotesEdit from './request/NotesEdit'
 import RequestListItem from './request/RequestListItem'
 
 import actions from '@/store/action-types'
 
 export default {
   name: 'journal',
-  data () {
-    return {
-      eventBus: new Vue()
-    }
-  },
   components: {
     EditRequest,
     FullRequest,
     NewRequest,
+    NotesEdit,
     RequestListItem
   },
+  data () {
+    return {
+      eventBus: new Vue()
+    }
+  },
   computed: {
     title () {
       return `${this.user.given_name}'s Prayer Journal`

src/app/src/components/Navigation.vue

@@ -1,5 +1,8 @@
 <template lang="pug">
-b-navbar(toggleable='sm' type='dark' variant='mpj' fixed='top')
+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
@@ -7,11 +10,15 @@ b-navbar(toggleable='sm' type='dark' variant='mpj' fixed='top')
     span(style='font-weight:700;') Journal
   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'
+                 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
+      b-nav-item(href='https://danieljsummers.github.io/myPrayerJournal/'
+                 target='_blank'
+                 @click.stop='') Docs
 </template>
 
 <script>
@@ -27,6 +34,9 @@ export default {
       auth0: new AuthService()
     }
   },
+  computed: {
+    ...mapState([ 'isAuthenticated' ])
+  },
   methods: {
     logOn () {
       this.auth0.login()
@@ -34,15 +44,6 @@ export default {
     logOff () {
       this.auth0.logout(this.$store, this.$router)
     }
-  },
-  computed: {
-    ...mapState([ 'isAuthenticated' ])
   }
 }
 </script>
-
-<style>
-.bg-mpj {
-  background-color: #1e7e34 !important;
-}
-</style>

src/app/src/components/common/PageTitle.vue

@@ -1,5 +1,6 @@
 <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>
@@ -15,13 +16,20 @@ export default {
       default: false
     }
   },
-  created () {
-    document.title = `${this.title} « myPrayerJournal`
-  },
   watch: {
     title () {
       document.title = `${this.title} « myPrayerJournal`
     }
+  },
+  created () {
+    document.title = `${this.title} « myPrayerJournal`
   }
 }
 </script>
+
+<style scoped>
+.mpj-page-title {
+  border-bottom: solid 1px lightgray;
+  margin-bottom: 20px;
+}
+</style>

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

@@ -1,25 +1,30 @@
 <template lang="pug">
-span
-  //- 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
+b-modal(v-model='editVisible'
+        header-bg-variant='mpj'
+        header-text-variant='light'
+        size='lg'
+        title='Edit Prayer Request'
+        @edit='openDialog()'
+        @shows='focusRequestText')
+  b-form
+    b-form-group(label='Prayer Request'
+                 label-for='request_text')
+      b-textarea#request_text(ref='toFocus'
+                              v-model='form.requestText'
+                              :rows='10'
+                              @blur='trimText()')
+    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>

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

@@ -1,15 +1,19 @@
 <template lang="pug">
 span
-  b-modal(title='Prayer Request History'
-          v-model='historyVisible'
-          size='lg'
-          header-bg-variant='dark'
+  b-modal(v-model='historyVisible'
+          header-bg-variant='mpj'
           header-text-variant='light'
+          size='lg'
+          title='Prayer Request History'
           @shows='focusRequestText')
-    b-list-group(v-if='null !== full' flush)
-      full-request-history(v-for='item in full.history' :history='item' :key='item.asOf')
+    b-list-group(v-if='null !== full'
+                 flush)
+      full-request-history(v-for='item in full.history'
+                           :key='item.asOf'
+                           :history='item')
     div.w-100.text-right(slot='modal-footer')
-      b-btn(variant='primary' @click='closeDialog()') Close
+      b-btn(variant='primary'
+            @click='closeDialog()') Close
 </template>
 
 <script>
@@ -21,6 +25,9 @@ import api from '@/api'
 
 export default {
   name: 'full-request',
+  components: {
+    FullRequestHistory
+  },
   props: {
     events: { required: true }
   },
@@ -33,9 +40,6 @@ export default {
   created () {
     this.events.$on('full', this.openDialog)
   },
-  components: {
-    FullRequestHistory
-  },
   methods: {
     closeDialog () {
       this.full = null

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

@@ -1,7 +1,9 @@
 <template lang="pug">
 b-list-group-item
-  | {{ history.status }} {{ asOf }}
-  span(v-if='0 < history.text.length') &nbsp;&raquo; {{ history.text }}
+  | {{ history.status }}
+  |
+  small.text-muted {{ asOf }}
+  div(v-if='hasText').mpj-request-text {{ history.text }}
 </template>
 
 <script>
@@ -17,6 +19,9 @@ export default {
   computed: {
     asOf () {
       return moment(this.history.asOf).fromNow()
+    },
+    hasText () {
+      return this.history.text.length > 0
     }
   }
 }

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

@@ -3,19 +3,25 @@ div
   b-btn(@click='openDialog()' size='sm' variant='primary')
     icon(name='plus')
     |   Add a New Request
-  b-modal(title='Add a New Prayer Request'
-          v-model='showNewVisible'
-          size='lg'
-          header-bg-variant='dark'
+  b-modal(v-model='showNewVisible'
+          header-bg-variant='mpj'
           header-text-variant='light'
+          size='lg'
+          title='Add a New Prayer Request'
           @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')
+      b-form-group(label='Prayer Request'
+                   label-for='request_text')
+        b-textarea#request_text(ref='toFocus'
+                                v-model='form.requestText'
+                                :rows='10'
+                                @blur='trimText()')
     div.w-100.text-right(slot='modal-footer')
-      b-btn(variant='primary' @click='saveRequest()') Save
+      b-btn(variant='primary'
+            @click='saveRequest()') Save
       |    
-      b-btn(variant='outline-secondary' @click='closeDialog()') Cancel
+      b-btn(variant='outline-secondary'
+            @click='closeDialog()') Cancel
   toast(ref='toast')
 </template>
 

src/app/src/components/request/NotesEdit.vue

@@ -0,0 +1,116 @@
+<template lang="pug">
+b-modal(v-model='notesVisible'
+        header-bg-variant='mpj'
+        header-text-variant='light'
+        size='lg'
+        title='Add Notes to Prayer Request'
+        @edit='openDialog()'
+        @shows='focusNotes')
+  b-form
+    b-form-group(label='Notes'
+                 label-for='notes')
+      b-textarea#notes(ref='toFocus'
+                       v-model='form.notes'
+                       :rows='10'
+                       @blur='trimText()')
+  div(v-if='hasPriorNotes')
+    p.text-center: strong Prior Notes for This Request
+    b-list-group(flush)
+      b-list-group-item(v-for='note in priorNotes'
+                        :key='note.asOf')
+        small.text-muted: date-from-now(:value='note.asOf')
+        br
+        div.mpj-request-text {{ note.notes }}
+  div(v-else-if='noPriorNotes').text-center.text-muted There are no prior notes for this request
+  div(v-else).text-center
+    b-btn(variant='outline-secondary'
+          @click='loadNotes()') Load Prior Notes
+  div.w-100.text-right(slot='modal-footer')
+    b-btn(variant='primary'
+          @click='saveNotes()') Save
+    | &nbsp; &nbsp;
+    b-btn(variant='outline-secondary'
+          @click='closeDialog()') Cancel
+</template>
+
+<script>
+'use strict'
+
+import api from '@/api'
+
+export default {
+  name: 'notes-edit',
+  props: {
+    toast: { required: true },
+    events: { required: true }
+  },
+  data () {
+    return {
+      notesVisible: false,
+      form: {
+        requestId: '',
+        notes: ''
+      },
+      priorNotes: [],
+      priorNotesLoaded: false
+    }
+  },
+  computed: {
+    hasPriorNotes () {
+      return this.priorNotesLoaded && this.priorNotes.length > 0
+    },
+    noPriorNotes () {
+      return this.priorNotesLoaded && this.priorNotes.length === 0
+    }
+  },
+  created () {
+    this.events.$on('notes', this.openDialog)
+  },
+  methods: {
+    closeDialog () {
+      this.form.requestId = ''
+      this.form.notes = ''
+      this.priorNotes = []
+      this.priorNotesLoaded = false
+      this.notesVisible = false
+    },
+    focusNotes (e) {
+      this.$refs.toFocus.focus()
+    },
+    async loadNotes () {
+      this.$Progress.start()
+      try {
+        const notes = await api.getNotes(this.form.requestId)
+        this.priorNotes = notes.data
+        console.log(this.priorNotes)
+        this.$Progress.finish()
+      } catch (e) {
+        console.error(e)
+        this.$Progress.fail()
+      } finally {
+        this.priorNotesLoaded = true
+      }
+    },
+    openDialog (request) {
+      this.form.requestId = request.requestId
+      this.notesVisible = true
+      this.focusNotes(null)
+    },
+    async saveNotes () {
+      this.$Progress.start()
+      try {
+        await api.addNote(this.form.requestId, this.form.notes)
+        this.$Progress.finish()
+        this.toast.showToast('Added notes', { theme: 'success' })
+        this.closeDialog()
+      } catch (e) {
+        console.error(e)
+        this.$Progress.fail()
+      }
+    },
+    trimText () {
+      this.form.notes = this.form.notes.trim()
+    }
+  }
+}
+</script>

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

@@ -1,7 +1,15 @@
 <template lang="pug">
 div
   b-card-group.w-100(deck)
-    b-card(v-for='(request, idx) in row' border-variant='dark' no-body)
+    b-card(v-for='(request, idx) in row'
+           :key='request.requestId'
+           border-variant='dark'
+           no-body)
+      b-card-header.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(@click.stop='showNotes(request)' 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-body.p-0
         p.card-text.mpj-request-text.mb-1.px-3.pt-3
           | {{ request.text }}
@@ -9,12 +17,7 @@ div
           = '(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')
+    b-card(v-for='it in 3 - row.length' key='-1')
   br
 </template>
 
@@ -45,6 +48,9 @@ export default {
     },
     showFull (idx) {
       this.events.$emit('full', this.row[idx].requestId)
+    },
+    showNotes (request) {
+      this.events.$emit('notes', request)
     }
   }
 }

src/app/src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 
 import Answered from '@/components/Answered'
+import AnsweredDetail from '@/components/AnsweredDetail'
 import Home from '@/components/Home'
 import Journal from '@/components/Journal'
 import LogOn from '@/components/user/LogOn'
@@ -11,9 +12,31 @@ Vue.use(Router)
 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 }
+    {
+      path: '/',
+      name: 'Home',
+      component: Home
+    },
+    {
+      path: '/answered/:id',
+      name: 'AnsweredDetail',
+      component: AnsweredDetail,
+      props: true
+    },
+    {
+      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

@@ -34,6 +34,7 @@ export default new Vuex.Store({
   state: {
     user: JSON.parse(localStorage.getItem('user_profile') || '{}'),
     isAuthenticated: (() => {
+      this.auth0.scheduleRenewal()
       if (this.auth0.isAuthenticated()) {
         api.setBearer(localStorage.getItem('id_token'))
       }

src/app/static/silent.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="https://cdn.auth0.com/js/auth0/8.9/auth0.min.js"></script>
+  <script>
+    var webAuth = new auth0.WebAuth({
+      domain: 'djs-consulting.auth0.com',
+      clientID: 'Of2s0RQCQ3mt3dwIkOBY5h85J9sXbF2n',
+      scope: 'openid profile email',
+      responseType: 'token id_token',
+      redirectUri: location.protocol + '//' + location.host + '/static/silent.html'
+    })
+  </script>
+  <script>
+    webAuth.parseHash(window.location.hash, function (err, response) {
+      parent.postMessage(err || response, location.protocol + '//' + location.host);
+    })
+  </script>
+</head>
+<body></body>
+</html>