From 0c21e6c1c0a237cec4ef02a67323c3e00e073164 Mon Sep 17 00:00:00 2001
From: "Daniel J. Summers" <daniel.summers.2415@gmail.com>
Date: Sat, 18 Aug 2018 11:07:30 -0500
Subject: [PATCH] Unsnooze works; #20 is complete

also:
- wrapped up some other stylings
- snoozed requests still show in the journal; this logic will change with recurrence work, so that bug is deferred
---
 src/app/src/App.vue                           | 34 ++++++++++++++--
 src/app/src/components/Journal.vue            |  8 ++--
 .../src/components/request/ActiveRequests.vue | 15 +++----
 .../components/request/AnsweredRequests.vue   |  3 +-
 src/app/src/components/request/NotesEdit.vue  |  5 +--
 .../src/components/request/RequestCard.vue    |  8 +++-
 .../components/request/RequestListItem.vue    | 39 ++++++++++---------
 .../src/components/request/SnoozeRequest.vue  | 37 +++++++++---------
 .../components/request/SnoozedRequests.vue    | 15 +++----
 9 files changed, 93 insertions(+), 71 deletions(-)

diff --git a/src/app/src/App.vue b/src/app/src/App.vue
index c69faae..0b39c32 100644
--- a/src/app/src/App.vue
+++ b/src/app/src/App.vue
@@ -54,18 +54,40 @@ body {
 }
 h1, h2, h3, h4, h5 {
   font-weight: 500;
+  margin-top: 0;
+}
+h1 {
+  font-size: 2.5rem;
+}
+h2 {
+  font-size: 2rem;
+}
+h3 {
+  font-size: 1.75rem;
+}
+h4 {
+  font-size: 1.5rem;
+}
+h5 {
+  font-size: 1.25rem;
 }
 p {
   margin-bottom: 0;
 }
+input, textarea {
+  border-radius: .25rem;
+}
 button,
 a[role="button"] {
   border: solid 1px #050;
   border-radius: .5rem;
-  background-color: whitesmoke;
-}
-a[role="button"] {
+  background-color: rgb(235, 235, 235);
   padding: .25rem;
+  font-size: 1rem;
+}
+a[role="button"]:link,
+a[role="button"]:visited {
+  color: black;
 }
 button.primary,
 a[role="button"].primary {
@@ -149,6 +171,10 @@ a:hover {
   max-width: 40rem;
   margin: auto;
 }
+.mpj-skinny {
+  max-width: 20rem;
+  margin: auto;
+}
 .mpj-modal {
   position: fixed;
   z-index: 8;
@@ -182,7 +208,7 @@ a:hover {
   margin: -1rem -1rem .5rem;
   border-radius: .4rem;
 }
-.mpj-modal-content header h3 {
+.mpj-modal-content header h5 {
   color: white;
   margin: 0;
   padding: 1rem;
diff --git a/src/app/src/components/Journal.vue b/src/app/src/components/Journal.vue
index b6ccc46..db7129f 100644
--- a/src/app/src/components/Journal.vue
+++ b/src/app/src/components/Journal.vue
@@ -3,10 +3,10 @@ article.mpj-main-content-wide(role='main')
   page-title(:title='title')
   p(v-if='isLoadingJournal') Loading your prayer journal...
   template(v-else)
-    router-link(:to="{ name: 'EditRequest', params: { id: 'new' } }"
-                role='button')
-      md-icon(icon='add_box')
-      | &nbsp; Add a New Request
+    .mpj-text-center
+      router-link(:to="{ name: 'EditRequest', params: { id: 'new' } }"
+                  role='button').
+        #[md-icon(icon='add_box')] Add a New Request
     br
     .mpj-journal(v-if='journal.length > 0')
       request-card(v-for='request in journal'
diff --git a/src/app/src/components/request/ActiveRequests.vue b/src/app/src/components/request/ActiveRequests.vue
index 4f3025c..dba8ebc 100644
--- a/src/app/src/components/request/ActiveRequests.vue
+++ b/src/app/src/components/request/ActiveRequests.vue
@@ -6,7 +6,8 @@ article.mpj-main-content(role='main')
       No active requests found; return to #[router-link(:to='{ name: "Journal" } ') your journal]
     request-list-item(v-for='req in requests'
                       :key='req.requestId'
-                      :request='req')
+                      :request='req'
+                      :toast='toast')
   p(v-else) Loading journal...
 </template>
 
@@ -36,6 +37,9 @@ export default {
     },
     ...mapState(['journal', 'isLoadingJournal'])
   },
+  created () {
+    this.$on('requestSnoozed', this.ensureJournal)
+  },
   methods: {
     async ensureJournal () {
       if (!Array.isArray(this.journal)) {
@@ -45,15 +49,6 @@ export default {
       this.requests = this.journal
         .sort((a, b) => a.showAfter - b.showAfter)
       this.loaded = true
-    },
-    async cancelSnooze (requestId) {
-      await this.$store.dispatch(actions.SNOOZE_REQUEST, {
-        progress: this.$Progress,
-        requestId: requestId,
-        until: 0
-      })
-      this.toast.showToast('Request un-snoozed', { theme: 'success' })
-      this.ensureJournal()
     }
   },
   async mounted () {
diff --git a/src/app/src/components/request/AnsweredRequests.vue b/src/app/src/components/request/AnsweredRequests.vue
index dedca7f..260ffb9 100644
--- a/src/app/src/components/request/AnsweredRequests.vue
+++ b/src/app/src/components/request/AnsweredRequests.vue
@@ -6,7 +6,8 @@ article.mpj-main-content(role='main')
       No answered requests found; once you have marked one as &ldquo;Answered&rdquo;, it will appear here
     request-list-item(v-for='req in requests'
                       :key='req.requestId'
-                      :request='req')
+                      :request='req'
+                      :toast='toast')
   p(v-else) Loading answered requests...
 </template>
 
diff --git a/src/app/src/components/request/NotesEdit.vue b/src/app/src/components/request/NotesEdit.vue
index d73b182..278e0fa 100644
--- a/src/app/src/components/request/NotesEdit.vue
+++ b/src/app/src/components/request/NotesEdit.vue
@@ -1,9 +1,8 @@
 <template lang="pug">
-.mpj-modal(v-show='notesVisible'
-           @edit='openDialog()')
+.mpj-modal(v-show='notesVisible')
   .mpj-modal-content.mpj-narrow
     header.mpj-bg
-      h3 Add Notes to Prayer Request
+      h5 Add Notes to Prayer Request
     label(for='notes') Notes
     br
     textarea#notes(v-model='form.notes'
diff --git a/src/app/src/components/request/RequestCard.vue b/src/app/src/components/request/RequestCard.vue
index bb226b9..38795ca 100644
--- a/src/app/src/components/request/RequestCard.vue
+++ b/src/app/src/components/request/RequestCard.vue
@@ -28,7 +28,8 @@ export default {
   },
   computed: {
     shouldDisplay () {
-      return Date.now() >= this.request.showAfter
+      const now = Date.now()
+      return Math.max(now, this.request.showAfter, this.request.snoozedUntil) === now
     }
   },
   methods: {
@@ -77,7 +78,10 @@ export default {
 }
 .mpj-card-header button {
   margin: .25rem;
-  font-size: .8rem;
+  padding: 0 .25rem;
+}
+.mpj-card-header button .material-icons {
+  font-size: 1.3rem;
 }
 .mpj-request-card .card-text {
   margin-left: 1rem;
diff --git a/src/app/src/components/request/RequestListItem.vue b/src/app/src/components/request/RequestListItem.vue
index 6fa306d..8486c93 100644
--- a/src/app/src/components/request/RequestListItem.vue
+++ b/src/app/src/components/request/RequestListItem.vue
@@ -3,22 +3,18 @@ p.mpj-request-text
   | {{ request.text }}
   br
   br
-  router-link(:to="{ name: 'FullRequest', params: { id: request.requestId } }"
-              role='button'
-              title='View Full Request')
-    md-icon(icon='description')
-    = ' View Full Request'
-  | &nbsp;
-  router-link(v-if='!isAnswered'
-              :to="{ name: 'EditRequest', params: { id: request.requestId } }"
-              role='button'
-              title='Edit Request')
-    md-icon(icon='edit')
-    = ' Edit Request'
-  | &nbsp;
-  button(v-if='isSnoozed' @click='cancelSnooze()')
-    md-icon(icon='restore')
-    = ' Cancel Snooze'
+  button(@click='viewFull'
+         title='View Full Request').
+    #[md-icon(icon='description')] View Full Request
+  | &nbsp; &nbsp;
+  button(v-if='!isAnswered'
+         @click='editRequest'
+         title='Edit Request').
+    #[md-icon(icon='edit')] Edit Request
+  | &nbsp; &nbsp;
+  button(v-if='isSnoozed'
+         @click='cancelSnooze()').
+    #[md-icon(icon='restore')] Cancel Snooze
   br(v-if='isSnoozed || isAnswered')
   small(v-if='isSnoozed').mpj-muted-text: em.
     &nbsp; Snooze expires #[date-from-now(:value='request.snoozedUntil')]
@@ -34,7 +30,8 @@ import actions from '@/store/action-types'
 export default {
   name: 'request-list-item',
   props: {
-    request: { required: true }
+    request: { required: true },
+    toast: { required: true }
   },
   data () {
     return {}
@@ -58,7 +55,13 @@ export default {
         until: 0
       })
       this.toast.showToast('Request un-snoozed', { theme: 'success' })
-      // FIXME: communicate with the parent to refresh // this.ensureJournal()
+      this.$parent.$emit('requestUnsnoozed')
+    },
+    editRequest () {
+      this.$router.push({ name: 'EditRequest', params: { id: this.request.requestId } })
+    },
+    viewFull () {
+      this.$router.push({ name: 'FullRequest', params: { id: this.request.requestId } })
     }
   }
 }
diff --git a/src/app/src/components/request/SnoozeRequest.vue b/src/app/src/components/request/SnoozeRequest.vue
index b77fe02..aa2d9de 100644
--- a/src/app/src/components/request/SnoozeRequest.vue
+++ b/src/app/src/components/request/SnoozeRequest.vue
@@ -1,23 +1,22 @@
 <template lang="pug">
-b-modal(v-model='snoozeVisible'
-        header-bg-variant='mpj'
-        header-text-variant='light'
-        size='lg'
-        title='Snooze Prayer Request'
-        @edit='openDialog()')
-  b-form
-    b-form-group(label='Until'
-                 label-for='until')
-      b-input#until(type='date'
-                    v-model='form.snoozedUntil'
-                    autofocus)
-  div.w-100.text-right(slot='modal-footer')
-    b-btn(variant='primary'
-          :disabled='!isValid'
-          @click='snoozeRequest()') Snooze
-    | &nbsp; &nbsp;
-    b-btn(variant='outline-secondary'
-          @click='closeDialog()') Cancel
+.mpj-modal(v-show='snoozeVisible')
+  .mpj-modal-content.mpj-skinny
+    header.mpj-bg
+      h5 Snooze Prayer Request
+    p.mpj-text-center
+      label(for='until') Until
+      = ' '
+      input#until(type='date'
+                  v-model='form.snoozedUntil'
+                  autofocus)
+    br
+    .mpj-text-right
+      button.primary(:disabled='!isValid'
+                     @click='snoozeRequest()').
+        #[md-icon(icon='snooze')] Snooze
+      | &nbsp; &nbsp;
+      button(@click='closeDialog()').
+        #[md-icon(icon='undo')] Cancel
 </template>
 
 <script>
diff --git a/src/app/src/components/request/SnoozedRequests.vue b/src/app/src/components/request/SnoozedRequests.vue
index 711729b..bec1909 100644
--- a/src/app/src/components/request/SnoozedRequests.vue
+++ b/src/app/src/components/request/SnoozedRequests.vue
@@ -6,7 +6,8 @@ article.mpj-main-content(role='main')
       No snoozed requests found; return to #[router-link(:to='{ name: "Journal" } ') your journal]
     request-list-item(v-for='req in requests'
                       :key='req.requestId'
-                      :request='req')
+                      :request='req'
+                      :toast='toast')
   p(v-else) Loading journal...
 </template>
 
@@ -36,6 +37,9 @@ export default {
     },
     ...mapState(['journal', 'isLoadingJournal'])
   },
+  created () {
+    this.$on('requestUnsnoozed', this.ensureJournal)
+  },
   methods: {
     async ensureJournal () {
       if (!Array.isArray(this.journal)) {
@@ -46,15 +50,6 @@ export default {
         .filter(req => req.snoozedUntil > Date.now())
         .sort((a, b) => a.snoozedUntil - b.snoozedUntil)
       this.loaded = true
-    },
-    async cancelSnooze (requestId) {
-      await this.$store.dispatch(actions.SNOOZE_REQUEST, {
-        progress: this.$Progress,
-        requestId: requestId,
-        until: 0
-      })
-      this.toast.showToast('Request un-snoozed', { theme: 'success' })
-      this.ensureJournal()
     }
   },
   async mounted () {