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

@ -1,14 +1,16 @@
<template lang="pug"> <template lang="pug">
#app #app
navigation navigation
#content.container #content.container
router-view router-view
vue-progress-bar vue-progress-bar
footer footer
p.text-right: i myPrayerJournal v0.8.0 p.text-right: i myPrayerJournal v0.8.0
</template> </template>
<script> <script>
'use strict'
import Navigation from './components/Navigation.vue' import Navigation from './components/Navigation.vue'
export default { export default {

View File

@ -44,6 +44,12 @@ export default {
* Get a prayer request (journal-style; only latest update) * Get a prayer request (journal-style; only latest update)
* @param {string} requestId The Id of the request to retrieve * @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,15 +1,15 @@
<template lang="pug"> <template lang="pug">
article article
page-title(:title="title") page-title(:title="title")
p(v-if="isLoadingJournal") journal is loading... p(v-if="isLoadingJournal") Loading your prayer journal...
template(v-if="!isLoadingJournal") template(v-if="!isLoadingJournal")
new-request new-request
p journal has {{ journal.length }} entries p journal has {{ journal.length }} entries
el-row el-row
el-col(:span='4'): strong Actions el-col(:span='4'): strong Actions
el-col(:span='16'): strong Request el-col(:span='16'): strong Request
el-col(:span='4'): strong As Of el-col(:span='4'): strong As Of
request-list-item(v-for="request in journal" :request="request" :key="request.requestId") request-list-item(v-for="request in journal" :request="request" :key="request.requestId")
</template> </template>
<script> <script>
@ -25,10 +25,6 @@ import actions from '@/store/action-types'
export default { export default {
name: 'dashboard', name: 'dashboard',
async data () {
this.$store.dispatch(actions.LOAD_JOURNAL, this.$Progress)
return {}
},
components: { components: {
PageTitle, PageTitle,
NewRequest, NewRequest,
@ -39,6 +35,9 @@ export default {
return `${this.user.given_name}'s Dashboard` return `${this.user.given_name}'s Dashboard`
}, },
...mapState(['user', 'journal', 'isLoadingJournal']) ...mapState(['user', 'journal', 'isLoadingJournal'])
},
async created () {
await this.$store.dispatch(actions.LOAD_JOURNAL, this.$Progress)
} }
} }
</script> </script>

View File

@ -1,18 +1,20 @@
<template lang="pug"> <template lang="pug">
article article
page-title(title="Welcome!" hideOnPage="true") page-title(title="Welcome!" hideOnPage="true")
p &nbsp; p &nbsp;
p. p.
myPrayerJournal is a place where individuals can record their prayer requests, record that they prayed for them, myPrayerJournal is a place where individuals can record their prayer requests, record that they prayed for them,
update them as God moves in the situation, and record a final answer received on that request.&nbsp; It will also update them as God moves in the situation, and record a final answer received on that request.&nbsp; It will also
allow individuals to review their answered prayers. allow individuals to review their answered prayers.
p. p.
This site is currently in very limited alpha, as it is being developed with a core group of test users.&nbsp; If This site is currently in very limited alpha, as it is being developed with a core group of test users.&nbsp; If
this is something in which you are interested, check back around mid-November 2017 for an update on the this is something in which you are interested, check back around mid-November 2017 for an update on the
development progress. development progress.
</template> </template>
<script> <script>
'use strict'
import PageTitle from './PageTitle.vue' import PageTitle from './PageTitle.vue'
export default { export default {

View File

@ -1,15 +1,17 @@
<template lang="pug"> <template lang="pug">
el-menu(theme="dark" mode="horizontal" class="mpj-top-nav" router=true) el-menu(theme="dark" mode="horizontal" class="mpj-top-nav" router=true)
el-menu-item(index="/") el-menu-item(index="/")
span(style="font-weight:100;") my span(style="font-weight:100;") my
span(style="font-weight:600;") Prayer span(style="font-weight:600;") Prayer
span(style="font-weight:700;") Journal span(style="font-weight:700;") Journal
el-menu-item(v-if="isAuthenticated" index="/dashboard") Dashboard el-menu-item(v-if="isAuthenticated" index="/dashboard") Dashboard
el-menu-item(v-if="isAuthenticated" index="3"): a(@click.stop="logOff()") Log Off el-menu-item(v-if="isAuthenticated" index="3"): a(@click.stop="logOff()") Log Off
el-menu-item(v-if="!isAuthenticated" index="4"): a(@click.stop="logOn()") Log On el-menu-item(v-if="!isAuthenticated" index="4"): a(@click.stop="logOn()") Log On
</template> </template>
<script> <script>
'use strict'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import AuthService from '@/auth/AuthService' import AuthService from '@/auth/AuthService'
@ -28,7 +30,9 @@ export default {
this.auth0.logout(this.$store, this.$router) this.auth0.logout(this.$store, this.$router)
} }
}, },
computed: mapState(['isAuthenticated']) computed: {
...mapState([ 'isAuthenticated' ])
}
} }
</script> </script>

View File

@ -1,11 +1,11 @@
<template lang="pug"> <template lang="pug">
h2.mpj-page-title(v-if="!hideOnPage" v-html="title") h2.mpj-page-title(v-if="!hideOnPage" v-html="title")
</template> </template>
<script> <script>
export default { export default {
name: 'page-title', name: 'page-title',
props: ['title', 'hideOnPage'], props: [ 'title', 'hideOnPage' ],
created () { created () {
document.title = `${this.title} « myPrayerJournal` document.title = `${this.title} « myPrayerJournal`
}, },

View File

@ -1,18 +1,18 @@
<template lang="pug"> <template lang="pug">
span span
el-button(icon='edit' @click='openDialog()' title='Edit') el-button(icon='edit' @click='openDialog()' title='Edit')
el-dialog(title='Edit Prayer Request' :visible.sync='editVisible') el-dialog(title='Edit Prayer Request' :visible.sync='editVisible')
el-form(:model='form' :label-position='top') el-form(:model='form' :label-position='top')
el-form-item(label='Prayer Request') el-form-item(label='Prayer Request')
el-input(type='textarea' v-model.trim='form.requestText' :rows='10') el-input(type='textarea' v-model.trim='form.requestText' :rows='10')
el-form-item(label='Also Mark As') el-form-item(label='Also Mark As')
el-radio-group(v-model='form.status') el-radio-group(v-model='form.status')
el-radio-button(label='Updated') Updated el-radio-button(label='Updated') Updated
el-radio-button(label='Prayed') Prayed el-radio-button(label='Prayed') Prayed
el-radio-button(label='Answered') Answered el-radio-button(label='Answered') Answered
span.dialog-footer(slot='footer') span.dialog-footer(slot='footer')
el-button(@click='closeDialog()') Cancel el-button(@click='closeDialog()') Cancel
el-button(type='primary' @click='saveRequest()') Save el-button(type='primary' @click='saveRequest()') Save
</template> </template>
<script> <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,13 +1,13 @@
<template lang="pug"> <template lang="pug">
div div
el-button(@click='openDialog()') Add a New Request el-button(@click='openDialog()') Add a New Request
el-dialog(title='Add a New Prayer Request' :visible.sync='showNewVisible') el-dialog(title='Add a New Prayer Request' :visible.sync='showNewVisible')
el-form(:model='form' :label-position='top') el-form(:model='form' :label-position='top')
el-form-item(label='Prayer Request') el-form-item(label='Prayer Request')
el-input(type='textarea' v-model.trim='form.requestText' :rows='10') el-input(type='textarea' v-model.trim='form.requestText' :rows='10')
span.dialog-footer(slot='footer') span.dialog-footer(slot='footer')
el-button(@click='closeDialog()') Cancel el-button(@click='closeDialog()') Cancel
el-button(type='primary' @click='saveRequest()') Save el-button(type='primary' @click='saveRequest()') Save
</template> </template>
<script> <script>
@ -43,4 +43,4 @@ export default {
} }
} }
} }
</script> </script>

View File

@ -1,12 +1,11 @@
<template lang="pug"> <template lang="pug">
el-row.journal-request el-row.journal-request
el-col(:span='4') el-col(:span='4'): p
p el-button(icon='check' @click='markPrayed()' title='Pray')
el-button(icon='check' @click='markPrayed()' title='Pray') edit-request(:request='request')
edit-request(:request='request') full-request(:request='request')
el-button(icon='document' @click='viewHistory()' title='Show History') el-col(:span='16'): p {{ request.text }}
el-col(:span='16'): p {{ request.text }} el-col(:span='4'): p {{ asOf }}
el-col(:span='4'): p {{ asOf }}
</template> </template>
<script> <script>
@ -15,21 +14,20 @@
import moment from 'moment' import moment from 'moment'
import EditRequest from './EditRequest' import EditRequest from './EditRequest'
import FullRequest from './FullRequest'
import actions from '@/store/action-types' import actions from '@/store/action-types'
export default { export default {
name: 'request-list-item', name: 'request-list-item',
props: [ 'request' ], props: [ 'request' ],
data () {
return {}
},
components: { components: {
EditRequest EditRequest,
FullRequest
}, },
methods: { methods: {
markPrayed () { async markPrayed () {
this.$store.dispatch(actions.UPDATE_REQUEST, { await this.$store.dispatch(actions.UPDATE_REQUEST, {
progress: this.$Progress, progress: this.$Progress,
requestId: this.request.requestId, requestId: this.request.requestId,
status: 'Prayed', status: 'Prayed',

View File

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

View File

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