Misc tweaks

- Updated SFCs per Vue Style Guide guidelines
- Added green gradient to header and off-white background color to body
- Changed DJS Consulting to Bit Badger Solutions in the docs

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
 

src/app/src/App.vue

@@ -31,6 +31,9 @@ export default {
 </script>
 
 <style>
+html, body {
+  background-color: whitesmoke;
+}
 body {
   padding-top: 60px;
 }
@@ -42,11 +45,13 @@ footer {
 footer p {
   margin: 0;
 }
-.mpj-page-title {
-  border-bottom: solid 1px lightgray;
-  margin-bottom: 20px;
-}
 .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/components/Answered.vue

@@ -3,8 +3,10 @@ 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')
+    p.mpj-request-text(v-for='req in requests' :key='req.requestId')
-      b-btn(@click='showFull(req.requestId)' size='sm' variant='outline-secondary')
+      b-btn(@click='showFull(req.requestId)'
+            size='sm'
+            variant='outline-secondary')
         icon(name='search')
         |  View Full Request
       |     {{ req.text }}  
@@ -24,6 +26,9 @@ import api from '@/api'
 
 export default {
   name: 'answered',
+  components: {
+    FullRequest
+  },
   data () {
     return {
       eventBus: new Vue(),
@@ -31,6 +36,11 @@ export default {
       loaded: false
     }
   },
+  computed: {
+    toast () {
+      return this.$parent.$refs.toast
+    }
+  },
   async mounted () {
     this.$Progress.start()
     try {
@@ -45,14 +55,6 @@ export default {
       this.loaded = true
     }
   },
-  components: {
-    FullRequest
-  },
-  computed: {
-    toast () {
-      return this.$parent.$refs.toast
-    }
-  },
   methods: {
     showFull (requestId) {
       this.eventBus.$emit('full', requestId)

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,8 @@ 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')
     full-request(:events='eventBus')
 </template>
 
@@ -32,17 +33,17 @@ import actions from '@/store/action-types'
 
 export default {
   name: 'journal',
-  data () {
-    return {
-      eventBus: new Vue()
-    }
-  },
   components: {
     EditRequest,
     FullRequest,
     NewRequest,
     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'
-      b-nav-item(v-if='isAuthenticated' to='/answered') Answered
+                 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,31 @@
 <template lang="pug">
 span
-  //- b-btn(@click='openDialog()' title='Edit' size='sm' variant='outline-secondary'): icon(name='pencil')
+  b-modal(v-model='editVisible'
-  b-modal(title='Edit Prayer Request'
+          header-bg-variant='mpj'
-          v-model='editVisible'
-          size='lg'
-          header-bg-variant='dark'
           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-form-group(label='Prayer Request'
-        b-textarea#request_text(v-model='form.requestText' :rows='10' @blur='trimText()' ref='toFocus')
+                   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-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
+      b-btn(variant='primary'
+            @click='saveRequest()') Save
       | &nbsp; &nbsp;
-      b-btn(variant='outline-secondary' @click='closeDialog()') Cancel
+      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'
+  b-modal(v-model='historyVisible'
-          v-model='historyVisible'
+          header-bg-variant='mpj'
-          size='lg'
-          header-bg-variant='dark'
           header-text-variant='light'
+          size='lg'
+          title='Prayer Request History'
           @shows='focusRequestText')
-    b-list-group(v-if='null !== full' flush)
+    b-list-group(v-if='null !== full'
-      full-request-history(v-for='item in full.history' :history='item' :key='item.asOf')
+                 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
@@ -50,4 +54,4 @@ export default {
     }
   }
 }
-</script>
+</script>

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'
+  b-modal(v-model='showNewVisible'
-          v-model='showNewVisible'
+          header-bg-variant='mpj'
-          size='lg'
-          header-bg-variant='dark'
           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-form-group(label='Prayer Request'
-        b-textarea#request_text(v-model='form.requestText' :rows='10' @blur='trimText()' ref='toFocus')
+                   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/RequestListItem.vue

@@ -1,7 +1,10 @@
 <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-body.p-0
         p.card-text.mpj-request-text.mb-1.px-3.pt-3
           | {{ request.text }}