View full request works

Also:
- moved setup stuff out of the `data` function and into the `created`
function
- standardized Vue component coding styles
- reworded transition text on log on and journal loading templates
This commit is contained in:
Daniel J. Summers 2017-09-23 10:53:40 -05:00
parent 617ac31161
commit 8cb58cc2d3
13 changed files with 172 additions and 88 deletions

View File

@ -9,6 +9,8 @@
</template>
<script>
'use strict'
import Navigation from './components/Navigation.vue'
export default {

View File

@ -44,6 +44,12 @@ export default {
* Get a prayer request (journal-style; only latest update)
* @param {string} requestId The Id of the request to retrieve
*/
getRequest: requestId => http.get(`request/${requestId}`)
getRequest: requestId => http.get(`request/${requestId}`),
/**
* Get a prayer request (full; includes all history)
* @param {string} requestId The Id of the request to retrieve
*/
getFullRequest: requestId => http.get(`request/${requestId}/full`)
}

View File

@ -1,7 +1,7 @@
<template lang="pug">
article
page-title(:title="title")
p(v-if="isLoadingJournal") journal is loading...
p(v-if="isLoadingJournal") Loading your prayer journal...
template(v-if="!isLoadingJournal")
new-request
p journal has {{ journal.length }} entries
@ -25,10 +25,6 @@ import actions from '@/store/action-types'
export default {
name: 'dashboard',
async data () {
this.$store.dispatch(actions.LOAD_JOURNAL, this.$Progress)
return {}
},
components: {
PageTitle,
NewRequest,
@ -39,6 +35,9 @@ export default {
return `${this.user.given_name}'s Dashboard`
},
...mapState(['user', 'journal', 'isLoadingJournal'])
},
async created () {
await this.$store.dispatch(actions.LOAD_JOURNAL, this.$Progress)
}
}
</script>

View File

@ -13,6 +13,8 @@
</template>
<script>
'use strict'
import PageTitle from './PageTitle.vue'
export default {

View File

@ -10,6 +10,8 @@
</template>
<script>
'use strict'
import { mapState } from 'vuex'
import AuthService from '@/auth/AuthService'
@ -28,7 +30,9 @@ export default {
this.auth0.logout(this.$store, this.$router)
}
},
computed: mapState(['isAuthenticated'])
computed: {
...mapState([ 'isAuthenticated' ])
}
}
</script>

View File

@ -0,0 +1,44 @@
<template lang="pug">
span
el-button(icon='document' @click='openDialog()' title='Show History')
el-dialog(title='Prayer Request History' :visible.sync='historyVisible')
span(v-if='null !== full')
full-request-history(v-for='item in full.history' :history='item' :key='item.asOf')
span.dialog-footer(slot='footer')
el-button(type='primary' @click='closeDialog()') Close
</template>
<script>
'use strict'
import FullRequestHistory from './FullRequestHistory'
import api from '@/api'
export default {
name: 'full-request',
props: [ 'request' ],
data () {
return {
historyVisible: false,
full: null
}
},
components: {
FullRequestHistory
},
methods: {
closeDialog () {
this.full = null
this.historyVisible = false
},
async openDialog () {
this.historyVisible = true
this.$Progress.start()
const req = await api.getFullRequest(this.request.requestId)
this.full = req.data
this.$Progress.finish()
}
}
}
</script>

View File

@ -0,0 +1,21 @@
<template lang="pug">
p.journal-request
| {{ history.status }} {{ asOf }}
span(v-if='0 < history.text.length') &nbsp;&raquo; {{ history.text }}
</template>
<script>
'use strict'
import moment from 'moment'
export default {
name: 'full-request-history',
props: [ 'history' ],
computed: {
asOf () {
return moment(this.history.asOf).fromNow()
}
}
}
</script>

View File

@ -1,10 +1,9 @@
<template lang="pug">
el-row.journal-request
el-col(:span='4')
p
el-col(:span='4'): p
el-button(icon='check' @click='markPrayed()' title='Pray')
edit-request(:request='request')
el-button(icon='document' @click='viewHistory()' title='Show History')
full-request(:request='request')
el-col(:span='16'): p {{ request.text }}
el-col(:span='4'): p {{ asOf }}
</template>
@ -15,21 +14,20 @@
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' ],
data () {
return {}
},
components: {
EditRequest
EditRequest,
FullRequest
},
methods: {
markPrayed () {
this.$store.dispatch(actions.UPDATE_REQUEST, {
async markPrayed () {
await this.$store.dispatch(actions.UPDATE_REQUEST, {
progress: this.$Progress,
requestId: this.request.requestId,
status: 'Prayed',

View File

@ -1,15 +1,18 @@
<template>
<p>hang tight...</p>
<template lang="pug">
p Logging you on...
</template>
<script>
'use strict'
import AuthService from '@/auth/AuthService'
export default {
name: 'log-on',
data () {
created () {
this.$Progress.start()
new AuthService().handleAuthentication(this.$store, this.$router)
return {}
// Auth service redirects to dashboard, which restarts the progress bar
}
}
</script>

View File

@ -16,7 +16,12 @@ Vue.use(ElementUI)
Vue.use(VueProgressBar, {
color: 'rgb(32, 160, 255)',
failedColor: 'red',
height: '3px'
height: '5px',
transition: {
speed: '0.2s',
opacity: '0.6s',
termination: 1000
}
})
/* eslint-disable no-new */