Finished answered request layout (#9)

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)

src/app/src/components/Answered.vue

@@ -2,36 +2,29 @@
 article
   page-title(title='Answered Requests')
   p(v-if='!loaded') Loading answered requests...
-  div(v-if='loaded')
+  div(v-if='loaded').mpj-answered-list
     p.mpj-request-text(v-for='req in requests' :key='req.requestId')
-      b-btn(@click='showFull(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',
-  components: {
-    FullRequest
-  },
   data () {
     return {
-      eventBus: new Vue(),
       requests: [],
       loaded: false
     }
@@ -54,11 +47,15 @@ export default {
     } finally {
       this.loaded = true
     }
-  },
-  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/request/NotesEdit.vue

@@ -21,8 +21,8 @@ b-modal(v-model='notesVisible'
         small.text-muted: date-from-now(:value='note.asOf')
         br
         div.mpj-request-text {{ note.notes }}
-  div(v-if='noPriorNotes').text-center.text-muted There are no prior notes for this request
-  div(v-if='!priorNotesLoaded').text-center
+  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')

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

@@ -17,7 +17,7 @@ div
           = '(last activity '
           date-from-now(:value='request.asOf')
           | )
-    b-card(v-for='it in 3 - row.length')
+    b-card(v-for='it in 3 - row.length' key='-1')
   br
 </template>