Unsnooze works; #20 is complete

also:
- wrapped up some other stylings
- snoozed requests still show in the journal; this logic will change with recurrence work, so that bug is deferred
This commit is contained in:
Daniel J. Summers 2018-08-18 11:07:30 -05:00
parent a6144f67ec
commit 0c21e6c1c0
9 changed files with 93 additions and 71 deletions

View File

@ -54,18 +54,40 @@ body {
} }
h1, h2, h3, h4, h5 { h1, h2, h3, h4, h5 {
font-weight: 500; font-weight: 500;
margin-top: 0;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1.5rem;
}
h5 {
font-size: 1.25rem;
} }
p { p {
margin-bottom: 0; margin-bottom: 0;
} }
input, textarea {
border-radius: .25rem;
}
button, button,
a[role="button"] { a[role="button"] {
border: solid 1px #050; border: solid 1px #050;
border-radius: .5rem; border-radius: .5rem;
background-color: whitesmoke; background-color: rgb(235, 235, 235);
}
a[role="button"] {
padding: .25rem; padding: .25rem;
font-size: 1rem;
}
a[role="button"]:link,
a[role="button"]:visited {
color: black;
} }
button.primary, button.primary,
a[role="button"].primary { a[role="button"].primary {
@ -149,6 +171,10 @@ a:hover {
max-width: 40rem; max-width: 40rem;
margin: auto; margin: auto;
} }
.mpj-skinny {
max-width: 20rem;
margin: auto;
}
.mpj-modal { .mpj-modal {
position: fixed; position: fixed;
z-index: 8; z-index: 8;
@ -182,7 +208,7 @@ a:hover {
margin: -1rem -1rem .5rem; margin: -1rem -1rem .5rem;
border-radius: .4rem; border-radius: .4rem;
} }
.mpj-modal-content header h3 { .mpj-modal-content header h5 {
color: white; color: white;
margin: 0; margin: 0;
padding: 1rem; padding: 1rem;

View File

@ -3,10 +3,10 @@ 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) template(v-else)
router-link(:to="{ name: 'EditRequest', params: { id: 'new' } }" .mpj-text-center
role='button') router-link(:to="{ name: 'EditRequest', params: { id: 'new' } }"
md-icon(icon='add_box') role='button').
|   Add a New Request #[md-icon(icon='add_box')] Add a New Request
br br
.mpj-journal(v-if='journal.length > 0') .mpj-journal(v-if='journal.length > 0')
request-card(v-for='request in journal' request-card(v-for='request in journal'

View File

@ -6,7 +6,8 @@ article.mpj-main-content(role='main')
No active requests found; return to #[router-link(:to='{ name: "Journal" } ') your journal] No active requests found; return to #[router-link(:to='{ name: "Journal" } ') your journal]
request-list-item(v-for='req in requests' request-list-item(v-for='req in requests'
:key='req.requestId' :key='req.requestId'
:request='req') :request='req'
:toast='toast')
p(v-else) Loading journal... p(v-else) Loading journal...
</template> </template>
@ -36,6 +37,9 @@ export default {
}, },
...mapState(['journal', 'isLoadingJournal']) ...mapState(['journal', 'isLoadingJournal'])
}, },
created () {
this.$on('requestSnoozed', this.ensureJournal)
},
methods: { methods: {
async ensureJournal () { async ensureJournal () {
if (!Array.isArray(this.journal)) { if (!Array.isArray(this.journal)) {
@ -45,15 +49,6 @@ export default {
this.requests = this.journal this.requests = this.journal
.sort((a, b) => a.showAfter - b.showAfter) .sort((a, b) => a.showAfter - b.showAfter)
this.loaded = true this.loaded = true
},
async cancelSnooze (requestId) {
await this.$store.dispatch(actions.SNOOZE_REQUEST, {
progress: this.$Progress,
requestId: requestId,
until: 0
})
this.toast.showToast('Request un-snoozed', { theme: 'success' })
this.ensureJournal()
} }
}, },
async mounted () { async mounted () {

View File

@ -6,7 +6,8 @@ article.mpj-main-content(role='main')
No answered requests found; once you have marked one as &ldquo;Answered&rdquo;, it will appear here No answered requests found; once you have marked one as &ldquo;Answered&rdquo;, it will appear here
request-list-item(v-for='req in requests' request-list-item(v-for='req in requests'
:key='req.requestId' :key='req.requestId'
:request='req') :request='req'
:toast='toast')
p(v-else) Loading answered requests... p(v-else) Loading answered requests...
</template> </template>

View File

@ -1,9 +1,8 @@
<template lang="pug"> <template lang="pug">
.mpj-modal(v-show='notesVisible' .mpj-modal(v-show='notesVisible')
@edit='openDialog()')
.mpj-modal-content.mpj-narrow .mpj-modal-content.mpj-narrow
header.mpj-bg header.mpj-bg
h3 Add Notes to Prayer Request h5 Add Notes to Prayer Request
label(for='notes') Notes label(for='notes') Notes
br br
textarea#notes(v-model='form.notes' textarea#notes(v-model='form.notes'

View File

@ -28,7 +28,8 @@ export default {
}, },
computed: { computed: {
shouldDisplay () { shouldDisplay () {
return Date.now() >= this.request.showAfter const now = Date.now()
return Math.max(now, this.request.showAfter, this.request.snoozedUntil) === now
} }
}, },
methods: { methods: {
@ -77,7 +78,10 @@ export default {
} }
.mpj-card-header button { .mpj-card-header button {
margin: .25rem; margin: .25rem;
font-size: .8rem; padding: 0 .25rem;
}
.mpj-card-header button .material-icons {
font-size: 1.3rem;
} }
.mpj-request-card .card-text { .mpj-request-card .card-text {
margin-left: 1rem; margin-left: 1rem;

View File

@ -3,22 +3,18 @@ p.mpj-request-text
| {{ request.text }} | {{ request.text }}
br br
br br
router-link(:to="{ name: 'FullRequest', params: { id: request.requestId } }" button(@click='viewFull'
role='button' title='View Full Request').
title='View Full Request') #[md-icon(icon='description')] View Full Request
md-icon(icon='description') | &nbsp; &nbsp;
= ' View Full Request' button(v-if='!isAnswered'
| &nbsp; @click='editRequest'
router-link(v-if='!isAnswered' title='Edit Request').
:to="{ name: 'EditRequest', params: { id: request.requestId } }" #[md-icon(icon='edit')] Edit Request
role='button' | &nbsp; &nbsp;
title='Edit Request') button(v-if='isSnoozed'
md-icon(icon='edit') @click='cancelSnooze()').
= ' Edit Request' #[md-icon(icon='restore')] Cancel Snooze
| &nbsp;
button(v-if='isSnoozed' @click='cancelSnooze()')
md-icon(icon='restore')
= ' Cancel Snooze'
br(v-if='isSnoozed || isAnswered') br(v-if='isSnoozed || 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')] &nbsp; Snooze expires #[date-from-now(:value='request.snoozedUntil')]
@ -34,7 +30,8 @@ import actions from '@/store/action-types'
export default { export default {
name: 'request-list-item', name: 'request-list-item',
props: { props: {
request: { required: true } request: { required: true },
toast: { required: true }
}, },
data () { data () {
return {} return {}
@ -58,7 +55,13 @@ export default {
until: 0 until: 0
}) })
this.toast.showToast('Request un-snoozed', { theme: 'success' }) this.toast.showToast('Request un-snoozed', { theme: 'success' })
// FIXME: communicate with the parent to refresh // this.ensureJournal() this.$parent.$emit('requestUnsnoozed')
},
editRequest () {
this.$router.push({ name: 'EditRequest', params: { id: this.request.requestId } })
},
viewFull () {
this.$router.push({ name: 'FullRequest', params: { id: this.request.requestId } })
} }
} }
} }

View File

@ -1,23 +1,22 @@
<template lang="pug"> <template lang="pug">
b-modal(v-model='snoozeVisible' .mpj-modal(v-show='snoozeVisible')
header-bg-variant='mpj' .mpj-modal-content.mpj-skinny
header-text-variant='light' header.mpj-bg
size='lg' h5 Snooze Prayer Request
title='Snooze Prayer Request' p.mpj-text-center
@edit='openDialog()') label(for='until') Until
b-form = ' '
b-form-group(label='Until' input#until(type='date'
label-for='until') v-model='form.snoozedUntil'
b-input#until(type='date' autofocus)
v-model='form.snoozedUntil' br
autofocus) .mpj-text-right
div.w-100.text-right(slot='modal-footer') button.primary(:disabled='!isValid'
b-btn(variant='primary' @click='snoozeRequest()').
:disabled='!isValid' #[md-icon(icon='snooze')] Snooze
@click='snoozeRequest()') Snooze | &nbsp; &nbsp;
| &nbsp; &nbsp; button(@click='closeDialog()').
b-btn(variant='outline-secondary' #[md-icon(icon='undo')] Cancel
@click='closeDialog()') Cancel
</template> </template>
<script> <script>

View File

@ -6,7 +6,8 @@ article.mpj-main-content(role='main')
No snoozed requests found; return to #[router-link(:to='{ name: "Journal" } ') your journal] No snoozed requests found; return to #[router-link(:to='{ name: "Journal" } ') your journal]
request-list-item(v-for='req in requests' request-list-item(v-for='req in requests'
:key='req.requestId' :key='req.requestId'
:request='req') :request='req'
:toast='toast')
p(v-else) Loading journal... p(v-else) Loading journal...
</template> </template>
@ -36,6 +37,9 @@ export default {
}, },
...mapState(['journal', 'isLoadingJournal']) ...mapState(['journal', 'isLoadingJournal'])
}, },
created () {
this.$on('requestUnsnoozed', this.ensureJournal)
},
methods: { methods: {
async ensureJournal () { async ensureJournal () {
if (!Array.isArray(this.journal)) { if (!Array.isArray(this.journal)) {
@ -46,15 +50,6 @@ export default {
.filter(req => req.snoozedUntil > Date.now()) .filter(req => req.snoozedUntil > Date.now())
.sort((a, b) => a.snoozedUntil - b.snoozedUntil) .sort((a, b) => a.snoozedUntil - b.snoozedUntil)
this.loaded = true this.loaded = true
},
async cancelSnooze (requestId) {
await this.$store.dispatch(actions.SNOOZE_REQUEST, {
progress: this.$Progress,
requestId: requestId,
until: 0
})
this.toast.showToast('Request un-snoozed', { theme: 'success' })
this.ensureJournal()
} }
}, },
async mounted () { async mounted () {