Active request page (#16)

Also: - refactored snoozed and answered list pages to use a common list format - reworked the URLs to make them more consistent - eliminated current "full" API endpoint, and renamed existing "complete" endpoint to "full"
2018-08-17 22:12:14 -05:00
parent d3aff4a110
commit e351fe5b56
16 changed files with 261 additions and 245 deletions
@@ -1,86 +0,0 @@
-<template lang="pug">
-article.mpj-main-content(role='main')
-  page-title(title='Answered Request')
-  template(v-if='request')
-    p.
-      Answered {{ formatDate(answered) }} (#[date-from-now(:value='answered')]) &nbsp;
-      #[small: em.mpj-muted-text prayed {{ prayedCount }} times, open {{ openDays }} days]
-    p.mpj-request-text {{ lastText }}
-    br
-    table.mpj-request-log
-      thead
-        tr
-          th Action
-          th Update / Notes
-      tbody
-        tr(v-for='item in log' :key='item.asOf')
-          td {{ item.status }} on #[span.mpj-text-nowrap {{ formatDate(item.asOf) }}]
-          td(v-if='item.text').mpj-request-text {{ item.text.fields[0] }}
-          td(v-else) &nbsp;
-  p(v-else) Loading request...
-</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
-    }
-  },
-  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.fields[0]
-    },
-    log () {
-      return (this.request.notes || [])
-        .map(note => ({ asOf: note.asOf, text: { case: 'Some', fields: [ 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>
@@ -67,5 +67,6 @@ export default {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
+  align-items: flex-start;
 }
 </style>
@@ -8,11 +8,14 @@ nav.mpj-top-nav.mpj-bg(role='menubar')
  router-link(v-if='isAuthenticated'
              :to="{ name: 'Journal' }"
              role='menuitem') Journal
+  router-link(v-if='isAuthenticated'
+              :to="{ name: 'ActiveRequests' }"
+              role='menuitem') Active
  router-link(v-if='hasSnoozed'
-              :to="{ name: 'Snoozed' }"
+              :to="{ name: 'SnoozedRequests' }"
              role='menuitem') Snoozed
  router-link(v-if='isAuthenticated'
-              :to="{ name: 'Answered' }"
+              :to="{ name: 'AnsweredRequests' }"
              role='menuitem') Answered
  a(v-if='isAuthenticated'
    href='#'
@@ -0,0 +1,63 @@
+<template lang="pug">
+article.mpj-main-content(role='main')
+  page-title(title='Active Requests')
+  div(v-if='loaded').mpj-request-list
+    p.mpj-text-center(v-if='requests.length === 0'): em.
+      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')
+  p(v-else) Loading journal...
+</template>
+
+<script>
+'use strict'
+
+import { mapState } from 'vuex'
+
+import RequestListItem from '@/components/request/RequestListItem'
+
+import actions from '@/store/action-types'
+
+export default {
+  name: 'active-requests',
+  components: {
+    RequestListItem
+  },
+  data () {
+    return {
+      requests: [],
+      loaded: false
+    }
+  },
+  computed: {
+    toast () {
+      return this.$parent.$refs.toast
+    },
+    ...mapState(['journal', 'isLoadingJournal'])
+  },
+  methods: {
+    async ensureJournal () {
+      if (!Array.isArray(this.journal)) {
+        this.loaded = false
+        await this.$store.dispatch(actions.LOAD_JOURNAL, this.$Progress)
+      }
+      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 () {
+    await this.ensureJournal()
+  }
+}
+</script>
@@ -1,30 +1,27 @@
 <template lang="pug">
 article.mpj-main-content(role='main')
  page-title(title='Answered Requests')
-  div(v-if='loaded').mpj-answered-list
+  div(v-if='loaded').mpj-request-list
    p.text-center(v-if='requests.length === 0'): em.
      No answered requests found; once you have marked one as &ldquo;Answered&rdquo;, it will appear here
-    p.mpj-request-text(v-for='req in requests' :key='req.requestId')
-      | {{ req.text }}
-      br
-      br
-      router-link(:to='{ name: "AnsweredDetail", params: { id: req.requestId }}'
-                  role='button'
-                  title='View Full Request')
-        md-icon(icon='description')
-        = ' View Full Request'
-      small.mpj-muted-text: em.
-        &nbsp; Answered #[date-from-now(:value='req.asOf')]
+    request-list-item(v-for='req in requests'
+                      :key='req.requestId'
+                      :request='req')
  p(v-else) Loading answered requests...
 </template>

 <script>
-'use static'
+'use strict'

 import api from '@/api'

+import RequestListItem from '@/components/request/RequestListItem'
+
 export default {
-  name: 'answered',
+  name: 'answered-requests',
+  components: {
+    RequestListItem
+  },
  data () {
    return {
      requests: [],
@@ -52,12 +49,3 @@ export default {
  }
 }
 </script>
-
-<style>
-.mpj-answered-list p {
-  border-top: solid 1px lightgray;
-}
-.mpj-answered-list p:first-child {
-  border-top: none;
-}
-</style>
@@ -1,56 +1,89 @@
 <template lang="pug">
-span
-  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'
-                           :key='item.asOf'
-                           :history='item')
-    div.w-100.text-right(slot='modal-footer')
-      b-btn(variant='primary'
-            @click='closeDialog()') Close
+article.mpj-main-content(role='main')
+  page-title(title='Full Prayer Request')
+  template(v-if='request')
+    p
+      span(v-if='isAnswered') Answered {{ formatDate(answered) }} (#[date-from-now(:value='answered')]) &nbsp;
+      small: em.mpj-muted-text prayed {{ prayedCount }} times, open {{ openDays }} days
+    p.mpj-request-text {{ lastText }}
+    br
+    table.mpj-request-log
+      thead
+        tr
+          th Action
+          th Update / Notes
+      tbody
+        tr(v-for='item in log' :key='item.asOf')
+          td {{ item.status }} on #[span.mpj-text-nowrap {{ formatDate(item.asOf) }}]
+          td(v-if='item.text').mpj-request-text {{ item.text.fields[0] }}
+          td(v-else) &nbsp;
+  p(v-else) Loading request...
 </template>

 <script>
 'use strict'

-import FullRequestHistory from './FullRequestHistory'
+import moment from 'moment'

 import api from '@/api'

+const asOfDesc = (a, b) => b.asOf - a.asOf
+
 export default {
  name: 'full-request',
-  components: {
-    FullRequestHistory
-  },
  props: {
-    events: { required: true }
+    id: {
+      type: String,
+      required: true
+    }
  },
  data () {
    return {
-      historyVisible: false,
-      full: null
+      request: null
    }
  },
-  created () {
-    this.events.$on('full', this.openDialog)
+  computed: {
+    answered () {
+      return this.request.history.find(hist => hist.status === 'Answered').asOf
+    },
+    isAnswered () {
+      return this.request.history.filter(hist => hist.status === 'Answered').length > 0
+    },
+    lastText () {
+      return this.request.history
+        .filter(hist => hist.text)
+        .sort(asOfDesc)[0].text.fields[0]
+    },
+    log () {
+      return (this.request.notes || [])
+        .map(note => ({ asOf: note.asOf, text: { case: 'Some', fields: [ note.notes ] }, status: 'Notes' }))
+        .concat(this.request.history)
+        .sort(asOfDesc)
+        .slice(1)
+    },
+    openDays () {
+      const asOf = this.isAnswered ? this.answered : Date.now()
+      return Math.floor(
+        (asOf - 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.getFullRequest(this.id)
+      this.request = req.data
+      this.$Progress.finish()
+    } catch (e) {
+      console.log(e)
+      this.$Progress.fail()
+    }
  },
  methods: {
-    closeDialog () {
-      this.full = null
-      this.historyVisible = false
-    },
-    async openDialog (requestId) {
-      this.historyVisible = true
-      this.$Progress.start()
-      const req = await api.getFullRequest(requestId)
-      this.full = req.data
-      this.$Progress.finish()
+    formatDate (asOf) {
+      return moment(asOf).format('LL')
    }
  }
 }
@@ -1,28 +0,0 @@
-<template lang="pug">
-b-list-group-item
-  | {{ history.status }}
-  |
-  small.text-muted(:title='actualDate') {{ asOf }}
-  div(v-if='history.text').mpj-request-text {{ history.text.fields[0] }}
-</template>
-
-<script>
-'use strict'
-
-import moment from 'moment'
-
-export default {
-  name: 'full-request-history',
-  props: {
-    history: { required: true }
-  },
-  computed: {
-    asOf () {
-      return moment(this.history.asOf).fromNow()
-    },
-    actualDate () {
-      return moment(this.history.asOf).format('LLLL')
-    }
-  }
-}
-</script>
@@ -0,0 +1,65 @@
+<template lang="pug">
+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'
+  br(v-if='isSnoozed || isAnswered')
+  small(v-if='isSnoozed').mpj-muted-text: em.
+    &nbsp; Snooze expires #[date-from-now(:value='request.snoozedUntil')]
+  small(v-if='isAnswered').mpj-muted-text: em.
+    &nbsp; Answered #[date-from-now(:value='request.asOf')]
+</template>
+
+<script>
+'use strict'
+
+import actions from '@/store/action-types'
+
+export default {
+  name: 'request-list-item',
+  props: {
+    request: { required: true }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    answered () {
+      return this.request.history.find(hist => hist.status === 'Answered').asOf
+    },
+    isAnswered () {
+      return this.request.lastStatus === 'Answered'
+    },
+    isSnoozed () {
+      return this.request.snoozedUntil > Date.now()
+    }
+  },
+  methods: {
+    async cancelSnooze () {
+      await this.$store.dispatch(actions.SNOOZE_REQUEST, {
+        progress: this.$Progress,
+        requestId: this.request.requestId,
+        until: 0
+      })
+      this.toast.showToast('Request un-snoozed', { theme: 'success' })
+      // FIXME: communicate with the parent to refresh // this.ensureJournal()
+    }
+  }
+}
+</script>
@@ -1,30 +1,29 @@
 <template lang="pug">
 article.mpj-main-content(role='main')
  page-title(title='Snoozed Requests')
-  div(v-if='loaded').mpj-snoozed-list
+  div(v-if='loaded').mpj-request-list
    p.mpj-text-center(v-if='requests.length === 0'): em.
      No snoozed requests found; return to #[router-link(:to='{ name: "Journal" } ') your journal]
-    p.mpj-request-text(v-for='req in requests' :key='req.requestId')
-      | {{ req.text }}
-      br
-      br
-      button(@click='cancelSnooze(req.requestId)')
-        md-icon(icon='restore')
-        = ' Cancel Snooze'
-      small.mpj-muted-text: em.
-        &nbsp; Snooze expires #[date-from-now(:value='req.snoozedUntil')]
+    request-list-item(v-for='req in requests'
+                      :key='req.requestId'
+                      :request='req')
  p(v-else) Loading journal...
 </template>

 <script>
-'use static'
+'use strict'

 import { mapState } from 'vuex'

 import actions from '@/store/action-types'

+import RequestListItem from '@/components/request/RequestListItem'
+
 export default {
-  name: 'answered',
+  name: 'snoozed-requests',
+  components: {
+    RequestListItem
+  },
  data () {
    return {
      requests: [],
@@ -63,12 +62,3 @@ export default {
  }
 }
 </script>
-
-<style>
-.mpj-snoozed-list p {
-  border-top: solid 1px lightgray;
-}
-.mpj-snoozed-list p:first-child {
-  border-top: none;
-}
-</style>