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">
#app
navigation
#content.container
router-view
vue-progress-bar
footer
p.text-right: i myPrayerJournal v0.8.0
#app
navigation
#content.container
router-view
vue-progress-bar
footer
p.text-right: i myPrayerJournal v0.8.0
</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,15 +1,15 @@
<template lang="pug">
article
page-title(:title="title")
p(v-if="isLoadingJournal") journal is loading...
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" :request="request" :key="request.requestId")
article
page-title(:title="title")
p(v-if="isLoadingJournal") Loading your prayer journal...
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" :request="request" :key="request.requestId")
</template>
<script>
@ -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

@ -1,18 +1,20 @@
<template lang="pug">
article
page-title(title="Welcome!" hideOnPage="true")
p &nbsp;
p.
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
allow individuals to review their answered prayers.
p.
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
development progress.
article
page-title(title="Welcome!" hideOnPage="true")
p &nbsp;
p.
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
allow individuals to review their answered prayers.
p.
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
development progress.
</template>
<script>
'use strict'
import PageTitle from './PageTitle.vue'
export default {

View File

@ -1,15 +1,17 @@
<template lang="pug">
el-menu(theme="dark" mode="horizontal" class="mpj-top-nav" router=true)
el-menu-item(index="/")
span(style="font-weight:100;") my
span(style="font-weight:600;") Prayer
span(style="font-weight:700;") Journal
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="4"): a(@click.stop="logOn()") Log On
el-menu(theme="dark" mode="horizontal" class="mpj-top-nav" router=true)
el-menu-item(index="/")
span(style="font-weight:100;") my
span(style="font-weight:600;") Prayer
span(style="font-weight:700;") Journal
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="4"): a(@click.stop="logOn()") Log On
</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

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

View File

@ -1,18 +1,18 @@
<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
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>

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">
div
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='closeDialog()') Cancel
el-button(type='primary' @click='saveRequest()') Save
div
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='closeDialog()') Cancel
el-button(type='primary' @click='saveRequest()') Save
</template>
<script>
@ -43,4 +43,4 @@ export default {
}
}
}
</script>
</script>

View File

@ -1,12 +1,11 @@
<template lang="pug">
el-row.journal-request
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')
el-col(:span='16'): p {{ request.text }}
el-col(:span='4'): p {{ asOf }}
el-row.journal-request
el-col(:span='4'): p
el-button(icon='check' @click='markPrayed()' title='Pray')
edit-request(:request='request')
full-request(:request='request')
el-col(:span='16'): p {{ request.text }}
el-col(:span='4'): p {{ asOf }}
</template>
<script>
@ -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 */