Editing request works

A "mark prayed" update uses the same fields, so we only have one "update
request" action now

src/app/src/api/index.js

@@ -32,14 +32,18 @@ export default {
   addRequest: requestText => http.post('request/', { requestText }),
 
   /**
-   * Mark a prayer request as having been prayed
-   * @param {string} requestId The Id of the request
+   * Update a prayer request
+   * @param request The request (should have requestId, status, and updateText properties)
    */
-  markPrayed: requestId => http.post(`request/${requestId}/history`, { status: 'Prayed', updateText: '' }),
+  updateRequest: request => http.post(`request/${request.requestId}/history`, {
+    status: request.status,
+    updateText: request.updateText
+  }),
 
   /**
-   * Get a prayer request
+   * Get a prayer request (journal-style; only latest update)
+   * @param {string} requestId The Id of the request to retrieve
    */
-  getPrayerRequest: requestId => http.get(`request/${requestId}`)
+  getRequest: requestId => http.get(`request/${requestId}`)
 
 }

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

@@ -0,0 +1,56 @@
+<template lang="pug">
+  span
+    el-button(icon='edit' @click='openDialog()' title='Edit')
+    el-dialog(title='Edit Prayer Request' :visible.sync='editVisible')
+      el-form(:model='form' :label-position='top')
+        el-form-item(label='Prayer Request')
+          el-input(type='textarea' v-model.trim='form.requestText' :rows='10')
+        el-form-item(label='Also Mark As')
+          el-radio-group(v-model='form.status')
+            el-radio-button(label='Updated') Updated
+            el-radio-button(label='Prayed') Prayed
+            el-radio-button(label='Answered') Answered
+      span.dialog-footer(slot='footer')
+        el-button(@click='closeDialog()') Cancel
+        el-button(type='primary' @click='saveRequest()') Save
+</template>
+
+<script>
+'use strict'
+
+import actions from '@/store/action-types'
+
+export default {
+  name: 'edit-request',
+  props: [ 'request' ],
+  data () {
+    return {
+      editVisible: false,
+      form: {
+        requestText: this.request.text,
+        status: 'Updated'
+      },
+      formLabelWidth: '120px'
+    }
+  },
+  methods: {
+    closeDialog () {
+      this.form.requestText = ''
+      this.form.status = 'Updated'
+      this.editVisible = false
+    },
+    openDialog () {
+      this.editVisible = true
+    },
+    async saveRequest () {
+      await this.$store.dispatch(actions.UPDATE_REQUEST, {
+        progress: this.$Progress,
+        requestId: this.request.requestId,
+        updateText: this.form.requestText,
+        status: this.form.status
+      })
+      this.editVisible = false
+    }
+  }
+}
+</script>

src/app/src/components/request/NewRequest.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
   div
-    el-button(@click='showNewVisible = true') Add a New Request
+    el-button(@click='openDialog()') Add a New Request
     el-dialog(title='Add a New Prayer Request' :visible.sync='showNewVisible')
       el-form(:model='form' :label-position='top')
         el-form-item(label='Prayer Request')
           el-input(type='textarea' v-model.trim='form.requestText' :rows='10')
       span.dialog-footer(slot='footer')
-        el-button(@click='showNewVisible = false') Cancel
+        el-button(@click='closeDialog()') Cancel
         el-button(type='primary' @click='saveRequest()') Save
 </template>
 
@@ -27,7 +27,14 @@ export default {
     }
   },
   methods: {
-    saveRequest: async function () {
+    closeDialog () {
+      this.form.requestText = ''
+      this.showNewVisible = false
+    },
+    openDialog () {
+      this.showNewVisible = true
+    },
+    async saveRequest () {
       await this.$store.dispatch(actions.ADD_REQUEST, {
         progress: this.$Progress,
         requestText: this.form.requestText

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

@@ -3,7 +3,7 @@
     el-col(:span='4')
       p
         el-button(icon='check' @click='markPrayed()' title='Pray')
-        el-button(icon='edit' @click='editRequest()' title='Edit')
+        edit-request(:request='request')
         el-button(icon='document' @click='viewHistory()' title='Show History')
     el-col(:span='16'): p {{ request.text }}
     el-col(:span='4'): p {{ asOf }}
@@ -14,26 +14,32 @@
 
 import moment from 'moment'
 
+import EditRequest from './EditRequest'
+
 import actions from '@/store/action-types'
 
 export default {
   name: 'request-list-item',
-  props: ['request'],
+  props: [ 'request' ],
   data () {
     return {}
   },
+  components: {
+    EditRequest
+  },
   methods: {
     markPrayed () {
-      this.$store.dispatch(actions.MARK_PRAYED, {
+      this.$store.dispatch(actions.UPDATE_REQUEST, {
         progress: this.$Progress,
-        requestId: this.request.requestId
+        requestId: this.request.requestId,
+        status: 'Prayed',
+        updateText: ''
       })
     }
   },
   computed: {
     asOf () {
-      // FIXME: why isn't this already a number?
-      return moment(parseInt(this.request.asOf)).fromNow()
+      return moment(this.request.asOf).fromNow()
     }
   }
 }

src/app/src/store/action-types.js

@@ -5,6 +5,6 @@ export default {
   ADD_REQUEST: 'add-request',
   /** Action to load the user's prayer journal */
   LOAD_JOURNAL: 'load-journal',
-  /** Action to mark a request as prayed */
-  MARK_PRAYED: 'mark-prayed'
+  /** Action to update a request */
+  UPDATE_REQUEST: 'update-request'
 }

src/app/src/store/index.js

@@ -92,11 +92,11 @@ export default new Vuex.Store({
         commit(mutations.LOADING_JOURNAL, false)
       }
     },
-    async [actions.MARK_PRAYED] ({ commit }, { progress, requestId }) {
+    async [actions.UPDATE_REQUEST] ({ commit }, { progress, requestId, status, updateText }) {
+      progress.start()
       try {
-        progress.start()
-        await api.markPrayed(requestId)
-        const request = await api.getPrayerRequest(requestId)
+        await api.updateRequest({ requestId, status, updateText })
+        const request = await api.getRequest(requestId)
         commit(mutations.REQUEST_UPDATED, request.data)
         progress.finish()
       } catch (err) {