Conversion to cards (bootstrap) complete

Also:
- Multi-line requests now preserve line breaks (#7)
- Have one instance of vue-toast; access via $parent for main page
components, pass to child components

src/app/src/App.vue

@@ -4,6 +4,7 @@
   #content.container
     router-view
     vue-progress-bar
+    toast(ref='toast')
   footer
     p.text-right: i myPrayerJournal v0.8.1
 </template>
@@ -17,6 +18,14 @@ export default {
   name: 'app',
   components: {
     Navigation
+  },
+  mounted () {
+    this.$refs.toast.setOptions({ position: 'bottom right' })
+  },
+  computed: {
+    toast () {
+      return this.$refs.toast
+    }
   }
 }
 </script>

src/app/src/components/Journal.vue

@@ -1,21 +1,30 @@
 <template lang="pug">
 article
   page-title(:title='title')
-  toast(ref='toast')
   p(v-if='isLoadingJournal') Loading your prayer journal...
   template(v-if='!isLoadingJournal')
     new-request
     br
-    b-row
-      request-list-item(v-if='journal.length > 0' v-for='request in journal' :request='request' :key='request.requestId')
+    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 _ from 'lodash'
 
+import EditRequest from './request/EditRequest'
+import FullRequest from './request/FullRequest'
 import NewRequest from './request/NewRequest'
 import RequestListItem from './request/RequestListItem'
 
@@ -23,7 +32,14 @@ import actions from '@/store/action-types'
 
 export default {
   name: 'journal',
+  data () {
+    return {
+      eventBus: new Vue()
+    }
+  },
   components: {
+    EditRequest,
+    FullRequest,
     NewRequest,
     RequestListItem
   },
@@ -31,18 +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.$refs.toast.setOptions({ position: 'bottom right' })
-    this.$refs.toast.showToast(`Loaded ${this.journal.length} prayer requests`, { theme: 'success' })
+    this.toast.showToast(`Loaded ${this.journal.length} prayer requests`, { theme: 'success' })
   }
 }
-/*
-    b-row
-      b-col(cols='2'): strong Actions
-      b-col(cols='8'): strong Request
-      b-col(cols='2'): strong As Of
- */
 </script>

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

@@ -22,7 +22,6 @@ export default {
   data () {
     const dt = moment(this.value)
     return {
-      dt,
       fromNow: dt.fromNow(),
       actual: dt.format('LLLL'),
       intervalId: null
@@ -37,7 +36,7 @@ export default {
   },
   methods: {
     updateFromNow () {
-      let newFromNow = this.dt.fromNow()
+      let newFromNow = moment(this.value).fromNow()
       if (newFromNow !== this.fromNow) this.fromNow = newFromNow
     }
   },

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

@@ -1,11 +1,12 @@
 <template lang="pug">
 span
-  b-btn(@click='openDialog()' title='Edit' size='sm' variant='outline-secondary'): icon(name='pencil')
+  //- 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')
@@ -19,7 +20,6 @@ span
       b-btn(variant='primary' @click='saveRequest()') Save
       | &nbsp; &nbsp;
       b-btn(variant='outline-secondary' @click='closeDialog()') Cancel
-  toast(ref='toast')
 </template>
 
 <script>
@@ -30,23 +30,25 @@ import actions from '@/store/action-types'
 export default {
   name: 'edit-request',
   props: {
-    request: { required: true }
+    toast: { required: true },
+    events: { required: true }
   },
   data () {
     return {
       editVisible: false,
       form: {
-        requestText: this.request.text,
+        requestId: '',
+        requestText: '',
         status: 'Updated'
-      },
-      formLabelWidth: '120px'
+      }
     }
   },
-  mounted () {
-    this.$refs.toast.setOptions({ position: 'bottom right' })
+  created () {
+    this.events.$on('edit', this.openDialog)
   },
   methods: {
     closeDialog () {
+      this.form.requestId = ''
       this.form.requestText = ''
       this.form.status = 'Updated'
       this.editVisible = false
@@ -54,8 +56,11 @@ export default {
     focusRequestText (e) {
       this.$refs.toFocus.focus()
     },
-    openDialog () {
+    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()
@@ -63,17 +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.$refs.toast.showToast('Request updated and removed from active journal', { theme: 'success' })
+        this.toast.showToast('Request updated and removed from active journal', { theme: 'success' })
       } else {
-        this.$refs.toast.showToast('Request updated', { theme: 'success' })
+        this.toast.showToast('Request updated', { theme: 'success' })
       }
-      this.editVisible = false
+      this.closeDialog()
     }
   }
 }
-</script>
+</script>

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

@@ -23,7 +23,7 @@ import api from '@/api'
 export default {
   name: 'full-request',
   props: {
-    request: { required: true }
+    events: { required: true }
   },
   data () {
     return {
@@ -31,6 +31,9 @@ export default {
       full: null
     }
   },
+  created () {
+    this.events.$on('full', this.openDialog)
+  },
   components: {
     FullRequestHistory
   },
@@ -39,10 +42,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/RequestListItem.vue

@@ -1,74 +1,57 @@
 <template lang="pug">
-b-col(xs='12' sm='6' md='4')
-  b-card(border-variant='dark' no-body)
-    div.card-body.p-0
-      p.card-text.mb-1.px-3.pt-3
-        | {{ text }}
-      p.card-text.p-0.pr-1.text-right: small.text-muted: em
-        = '(last activity '
-        date-from-now(:value='request.asOf')
-        | )
-    //-
-      edit-request(:request='request')
-      full-request(:request='request')
-    b-card-footer.text-center.py-1.
-      #[b-btn(@click='markPrayed()' variant='outline-primary' title='Pray' size='sm'): icon(name='check')]
-      #[b-btn(variant='outline-secondary' title='Edit' size='sm'): icon(name='pencil')]
-      #[b-btn(variant='outline-secondary' title='Add Notes' size='sm'): icon(name='file-text-o')]
-      #[b-btn(variant='outline-secondary' title='View Full Request' size='sm'): icon(name='search')]
+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.request-card-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
-  toast(ref='toast')
 </template>
 
 <script>
 'use strict'
 
-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: { required: true }
-  },
-  components: {
-    EditRequest,
-    FullRequest
-  },
-  mounted () {
-    this.$refs.toast.setOptions({ position: 'bottom right' })
+    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.$refs.toast.showToast('Request marked as prayed', { theme: '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)
     }
   }
 }
-/*
-b-row.journal-request
-  b-col(cols='2'): p
-    b-btn(@click='markPrayed()' size='sm' variant='outline-primary' title='Pray'): icon(name='check')
-    edit-request(:request='request')
-    full-request(:request='request')
-  b-col(cols='8'): p {{ text }}
-  b-col(cols='2'): p: date-from-now(:value='request.asOf')
- */
 </script>
+
+<style>
+.request-card-text {
+  white-space: pre-line;
+}
+</style>