Wrote API calls for history updates

Also switched app pkg mgt to yarn

src/app/package.json

@@ -17,6 +17,7 @@
     "auth0-js": "^8.10.1",
     "axios": "^0.16.2",
     "element-ui": "^1.4.4",
+    "moment": "^2.18.1",
     "pug": "^2.0.0-rc.4",
     "vue": "^2.4.4",
     "vue-progressbar": "^0.7.3",

src/app/src/api/index.js

@@ -29,6 +29,12 @@ export default {
    * Add a new prayer request
    * @param {string} requestText The text of the request to be added
    */
-  addRequest: requestText => http.post('request/', { requestText })
+  addRequest: requestText => http.post('request/', { requestText }),
+
+  /**
+   * Mark a prayer request as having been prayed
+   * @param {string} requestId The Id of the request
+   */
+  markPrayed: requestId => http.post('request/${requestId}/history', { status: 'Prayed', updateText: '' })
 
 }

src/app/src/components/Dashboard.vue

@@ -5,6 +5,10 @@
     template(v-if="!isLoadingJournal")
       new-request
       p journal has {{ journal.length }} entries
+      el-row
+        el-col(:span='4'): strong Actions
+        el-col(:span='16'): strong Request
+        el-col(:span='4'): strong As Of
       request-list-item(v-for="request in journal" v-bind:request="request" v-bind:key="request.requestId")
 </template>
 

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

@@ -1,22 +1,34 @@
 <template lang="pug">
-  el-row.journal-request(:id="request.requestId")
-    el-col(:span='4') Action buttons
-    el-col(:span='20')
-      p Id {{ request.requestId }} as of {{ request.asOf }}
-      p {{ request.text }}
+  el-row.journal-request
+    el-col(:span='4')
+      p
+        el-button(icon='check' @click='markPrayed()' title='Pray')
+        el-button(icon='edit' @click='editRequest()' title='Edit')
+        el-button(icon='document' @click='viewHistory()' title='Show History')
+    el-col(:span='16'): p {{ request.text }}
+    el-col(:span='4'): p {{ asOf }}
 </template>
 
 <script>
+import moment from 'moment'
+
 export default {
   name: 'request-list-item',
   props: ['request'],
-  data: function () {
+  data () {
     return {}
   },
   methods: {
-    markPrayed: function (requestId) {
+    markPrayed () {
+      alert(`Marking ${this.request.requestId} prayed`)
       // TODO: write function
     }
+  },
+  computed: {
+    asOf () {
+      // FIXME: why isn't this already a number?
+      return moment(parseInt(this.request.asOf)).fromNow()
+    }
   }
 }
 </script>

src/app/src/main.js

@@ -14,9 +14,9 @@ Vue.config.productionTip = false
 Vue.use(ElementUI)
 
 Vue.use(VueProgressBar, {
-  color: 'rgb(143, 255, 199)',
+  color: 'rgb(32, 160, 255)',
   failedColor: 'red',
-  height: '2px'
+  height: '3px'
 })
 
 /* eslint-disable no-new */