myPrayerJournal v2 #27

Merged
danieljsummers merged 27 commits from version-2 into master 2019-09-03 00:01:26 +00:00
8 changed files with 316 additions and 255 deletions
Showing only changes of commit 26a0da610d - Show all commits

View File

@ -102,13 +102,12 @@ export default {
} }
</script> </script>
<style> <style lang="sass">
html, body { html, body
/* background-color: whitesmoke; */ // background-color: whitesmoke;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
font-size: 1rem; font-size: 1rem
} /* // h1, h2, h3, h4, h5 {
h1, h2, h3, h4, h5 {
font-weight: 500; font-weight: 500;
margin-top: 0; margin-top: 0;
} }
@ -126,11 +125,10 @@ h4 {
} }
h5 { h5 {
font-size: 1.25rem; font-size: 1.25rem;
} */ }
p { p
margin-bottom: 0; margin-bottom: 0
} /* // input, textarea, select {
input, textarea, select {
border-radius: .25rem; border-radius: .25rem;
font-size: 1rem; font-size: 1rem;
} }
@ -187,11 +185,10 @@ a:link, a:visited {
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
.mpj-main-content { .mpj-main-content
max-width: 60rem; max-width: 60rem
margin: auto; margin: auto
} // .mpj-main-content-wide {
.mpj-main-content-wide {
margin: .5rem; margin: .5rem;
} }
@media screen and (max-width: 21rem) { @media screen and (max-width: 21rem) {
@ -199,10 +196,9 @@ a:hover {
margin: 0; margin: 0;
} }
} }
.mpj-request-text { .mpj-request-text
white-space: pre-line; white-space: pre-line
} // .mpj-request-list p {
.mpj-request-list p {
border-top: solid 1px lightgray; border-top: solid 1px lightgray;
} }
.mpj-request-list p:first-child { .mpj-request-list p:first-child {
@ -225,31 +221,24 @@ a:hover {
background-image: -webkit-linear-gradient(top, #050, whitesmoke); background-image: -webkit-linear-gradient(top, #050, whitesmoke);
background-image: -moz-linear-gradient(top, #050, whitesmoke); background-image: -moz-linear-gradient(top, #050, whitesmoke);
background-image: linear-gradient(to bottom, #050, whitesmoke); background-image: linear-gradient(to bottom, #050, whitesmoke);
} */
.mpj-text-center {
text-align: center;
} }
.mpj-text-nowrap { .mpj-text-center
white-space: nowrap; text-align: center
} .mpj-text-nowrap
.mpj-text-right { white-space: nowrap
text-align: right; .mpj-text-right
} text-align: right
.mpj-muted-text { .mpj-muted-text
color: rgba(0, 0, 0, .6); color: rgba(0, 0, 0, .6)
} .mpj-narrow
.mpj-narrow { max-width: 40rem
max-width: 40rem; margin: auto
margin: auto; .mpj-skinny
} max-width: 20rem
.mpj-skinny { margin: auto
max-width: 20rem; .mpj-full-width
margin: auto; width: 100%
} // .mpj-modal {
.mpj-full-width {
width: 100%;
} /*
.mpj-modal {
position: fixed; position: fixed;
z-index: 8; z-index: 8;
left: 0; left: 0;
@ -294,7 +283,6 @@ a:hover {
.material-icons { .material-icons {
vertical-align: middle; vertical-align: middle;
} */ } */
.md-progress-bar { .md-progress-bar
margin: 24px; margin: 24px
}
</style> </style>

View File

@ -2,18 +2,23 @@
article.mpj-main-content-wide(role='main') article.mpj-main-content-wide(role='main')
page-title(:title='title') page-title(:title='title')
p(v-if='isLoadingJournal') Loading your prayer journal... p(v-if='isLoadingJournal') Loading your prayer journal...
template(v-else)
md-empty-state(v-if='journal.length === 0'
md-icon='done_all'
md-label='No Requests to Show'
md-description='You have no requests to be shown; see the “Active” link above for snoozed/deferred requests, and the “Answered” link for answered requests')
md-button(:to="{ name: 'Journal' }").md-primary.md-raised Add a New Request
template(v-else) template(v-else)
.mpj-text-center .mpj-text-center
md-button(:to="{ name: 'EditRequest', params: { id: 'new' } }" md-button(:to="{ name: 'EditRequest', params: { id: 'new' } }"
role='button'). role='button').md-raised
#[md-icon add_box] Add a New Request md-icon add_box
= ' Add a New Request'
br br
.mpj-journal(v-if='journal.length > 0') .mpj-journal
request-card(v-for='request in journal' request-card(v-for='request in journal'
:key='request.requestId' :key='request.requestId'
:request='request') :request='request')
p.text-center(v-else): em.
No requests found; click the &ldquo;Add a New Request&rdquo; button to add one
notes-edit notes-edit
snooze-request snooze-request
</template> </template>

View File

@ -1,12 +1,16 @@
<template lang="pug"> <template lang="pug">
article.mpj-main-content(role='main') md-content(role='main').mpj-main-content
page-title(title='Active Requests') page-title(title='Active Requests'
div(v-if='loaded').mpj-request-list hide-on-page=true)
p.mpj-text-center(v-if='requests.length === 0'): em. template(v-if='loaded')
No active requests found; return to #[router-link(:to='{ name: "Journal" } ') your journal] md-empty-state(v-if='requests.length === 0'
request-list-item(v-for='req in requests' md-icon='sentiment_dissatisfied'
:key='req.requestId' md-label='No Active Requests'
:request='req') md-description='Your prayer journal has no active requests')
md-button(:to="{ name: 'Journal' }").md-primary.md-raised Return to your journal
request-list(v-if='requests.length !== 0'
title='Active Requests'
:requests='requests')
p(v-else) Loading journal... p(v-else) Loading journal...
</template> </template>
@ -15,7 +19,7 @@ article.mpj-main-content(role='main')
import { mapState } from 'vuex' import { mapState } from 'vuex'
import RequestListItem from '@/components/request/RequestListItem' import RequestList from '@/components/request/RequestList'
import actions from '@/store/action-types' import actions from '@/store/action-types'
@ -23,7 +27,7 @@ export default {
name: 'active-requests', name: 'active-requests',
inject: ['progress'], inject: ['progress'],
components: { components: {
RequestListItem RequestList
}, },
data () { data () {
return { return {

View File

@ -1,12 +1,15 @@
<template lang="pug"> <template lang="pug">
article.mpj-main-content(role='main') article.mpj-main-content(role='main')
page-title(title='Answered Requests') page-title(title='Answered Requests'
div(v-if='loaded').mpj-request-list hide-on-page=true)
p.text-center(v-if='requests.length === 0'): em. template(v-if='loaded')
No answered requests found; once you have marked one as &ldquo;Answered&rdquo;, it will appear here md-empty-state(v-if='requests.length === 0'
request-list-item(v-for='req in requests' md-icon='sentiment_dissatisfied'
:key='req.requestId' md-label='No Answered Requests'
:request='req') md-description='Your prayer journal has no answered requests; once you have marked one as “Answered”, it will appear here')
request-list(v-if='requests.length !== 0'
title='Answered Requests'
:requests='requests')
p(v-else) Loading answered requests... p(v-else) Loading answered requests...
</template> </template>
@ -15,7 +18,7 @@ article.mpj-main-content(role='main')
import api from '@/api' import api from '@/api'
import RequestListItem from '@/components/request/RequestListItem' import RequestList from '@/components/request/RequestList'
export default { export default {
name: 'answered-requests', name: 'answered-requests',
@ -24,7 +27,7 @@ export default {
'progress' 'progress'
], ],
components: { components: {
RequestListItem RequestList
}, },
data () { data () {
return { return {

View File

@ -0,0 +1,40 @@
<template lang="pug">
md-table(md-card)
md-table-toolbar
h1.md-title {{ title }}
md-table-row
md-table-head Actions
md-table-head Request
request-list-item(v-for='req in requests'
:key='req.requestId'
:request='req')
</template>
<script>
'use strict'
import RequestListItem from '@/components/request/RequestListItem'
export default {
name: 'request-list',
components: { RequestListItem },
props: {
title: {
type: String,
required: true
},
requests: {
type: Array,
required: true
}
},
data () {
return { }
},
created () {
this.$on('requestUnsnoozed', this.$parent.$emit('requestUnsnoozed'))
this.$on('requestNowShown', this.$parent.$emit('requestNowShown'))
}
}
</script>

View File

@ -1,31 +1,35 @@
<template lang="pug"> <template lang="pug">
md-table-row
md-table-cell.mpj-action-cell
md-button(@click='viewFull').md-icon-button.md-raised
md-icon description
md-tooltip(md-direction='top'
md-delay=250) View Full Request
template(v-if='!isAnswered')
md-button(@click='editRequest').md-icon-button.md-raised
md-icon edit
md-tooltip(md-direction='top'
md-delay=250) Edit Request
template(v-if='isSnoozed')
md-button(@click='cancelSnooze()').md-icon-button.md-raised
md-icon restore
md-tooltip(md-direction='top'
md-delay=250) Cancel Snooze
template(v-if='isPending')
md-button(@click='showNow()').md-icon-button.md-rasied
md-icon restore
md-tooltip(md-direction='top'
md-delay=250) Show Now
md-table-cell.mpj-request-cell
p.mpj-request-text p.mpj-request-text
| {{ request.text }} | {{ request.text }}
br
br
button(@click='viewFull'
title='View Full Request').
#[md-icon description] View Full Request
| &nbsp; &nbsp;
template(v-if='!isAnswered')
button(@click='editRequest'
title='Edit Request').
#[md-icon edit] Edit Request
| &nbsp; &nbsp;
template(v-if='isSnoozed')
button(@click='cancelSnooze()').
#[md-icon restore] Cancel Snooze
| &nbsp; &nbsp;
template(v-if='isPending')
button(@click='showNow()').
#[md-icon restore] Show Now
br(v-if='isSnoozed || isPending || isAnswered') br(v-if='isSnoozed || isPending || isAnswered')
small(v-if='isSnoozed').mpj-muted-text: em. small(v-if='isSnoozed').mpj-muted-text: em.
&nbsp; Snooze expires #[date-from-now(:value='request.snoozedUntil')] Snooze expires #[date-from-now(:value='request.snoozedUntil')]
small(v-if='isPending').mpj-muted-text: em. small(v-if='isPending').mpj-muted-text: em.
&nbsp; Request scheduled to reappear #[date-from-now(:value='request.showAfter')] Request scheduled to reappear #[date-from-now(:value='request.showAfter')]
small(v-if='isAnswered').mpj-muted-text: em. small(v-if='isAnswered').mpj-muted-text: em.
&nbsp; Answered #[date-from-now(:value='request.asOf')] Answered #[date-from-now(:value='request.asOf')]
</template> </template>
<script> <script>
@ -87,3 +91,14 @@ export default {
} }
} }
</script> </script>
<style lang="sass">
.mpj-action-cell
width: 1%
white-space: nowrap
vertical-align: top
.mpj-request-cell
vertical-align: top
p
margin-top: 0
</style>

View File

@ -4,6 +4,7 @@ md-dialog(:md-active.sync='snoozeVisible').mpj-skinny
md-content.mpj-dialog-content md-content.mpj-dialog-content
span.mpj-text-muted Until span.mpj-text-muted Until
md-datepicker(v-model='form.snoozedUntil' md-datepicker(v-model='form.snoozedUntil'
:md-disabled-dates='datesInPast'
md-immediately) md-immediately)
md-dialog-actions md-dialog-actions
md-button(:disabled='!isValid' md-button(:disabled='!isValid'
@ -33,6 +34,7 @@ export default {
data () { data () {
return { return {
snoozeVisible: false, snoozeVisible: false,
datesInPast: date => date < new Date(),
form: { form: {
requestId: '', requestId: '',
snoozedUntil: '' snoozedUntil: ''

View File

@ -1,12 +1,16 @@
<template lang="pug"> <template lang="pug">
article.mpj-main-content(role='main') article.mpj-main-content(role='main')
page-title(title='Snoozed Requests') page-title(title='Snoozed Requests'
div(v-if='loaded').mpj-request-list hide-on-page=true)
p.mpj-text-center(v-if='requests.length === 0'): em. template(v-if='loaded')
No snoozed requests found; return to #[router-link(:to='{ name: "Journal" } ') your journal] md-empty-state(v-if='requests.length === 0'
request-list-item(v-for='req in requests' md-icon='sentiment_dissatisfied'
:key='req.requestId' md-label='No Snoozed Requests'
:request='req') md-description='Your prayer journal has no snoozed requests')
md-button(:to="{ name: 'Journal' }").md-primary.md-raised Return to your journal
request-list(v-if='requests.length !== 0'
title='Snoozed Requests'
:requests='requests')
p(v-else) Loading journal... p(v-else) Loading journal...
</template> </template>
@ -17,13 +21,13 @@ import { mapState } from 'vuex'
import actions from '@/store/action-types' import actions from '@/store/action-types'
import RequestListItem from '@/components/request/RequestListItem' import RequestList from '@/components/request/RequestList'
export default { export default {
name: 'snoozed-requests', name: 'snoozed-requests',
inject: ['progress'], inject: ['progress'],
components: { components: {
RequestListItem RequestList
}, },
data () { data () {
return { return {