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 {
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 {
margin-bottom: 0;
}
input, textarea {
border-radius: .25rem;
}
button,
a[role="button"] {
border: solid 1px #050;
border-radius: .5rem;
background-color: whitesmoke;
}
a[role="button"] {
background-color: rgb(235, 235, 235);
padding: .25rem;
font-size: 1rem;
}
a[role="button"]:link,
a[role="button"]:visited {
color: black;
}
button.primary,
a[role="button"].primary {
@ -149,6 +171,10 @@ a:hover {
max-width: 40rem;
margin: auto;
}
.mpj-skinny {
max-width: 20rem;
margin: auto;
}
.mpj-modal {
position: fixed;
z-index: 8;
@ -182,7 +208,7 @@ a:hover {
margin: -1rem -1rem .5rem;
border-radius: .4rem;
}
.mpj-modal-content header h3 {
.mpj-modal-content header h5 {
color: white;
margin: 0;
padding: 1rem;

View File

@ -3,10 +3,10 @@ article.mpj-main-content-wide(role='main')
page-title(:title='title')
p(v-if='isLoadingJournal') Loading your prayer journal...
template(v-else)
router-link(:to="{ name: 'EditRequest', params: { id: 'new' } }"
role='button')
md-icon(icon='add_box')
|   Add a New Request
.mpj-text-center
router-link(:to="{ name: 'EditRequest', params: { id: 'new' } }"
role='button').
#[md-icon(icon='add_box')] Add a New Request
br
.mpj-journal(v-if='journal.length > 0')
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]
request-list-item(v-for='req in requests'
:key='req.requestId'
:request='req')
:request='req'
:toast='toast')
p(v-else) Loading journal...
</template>
@ -36,6 +37,9 @@ export default {
},
...mapState(['journal', 'isLoadingJournal'])
},
created () {
this.$on('requestSnoozed', this.ensureJournal)
},
methods: {
async ensureJournal () {
if (!Array.isArray(this.journal)) {
@ -45,15 +49,6 @@ export default {
this.requests = this.journal
.sort((a, b) => a.showAfter - b.showAfter)
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 () {

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
request-list-item(v-for='req in requests'
:key='req.requestId'
:request='req')
:request='req'
:toast='toast')
p(v-else) Loading answered requests...
</template>

View File

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

View File

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

View File

@ -3,22 +3,18 @@ p.mpj-request-text
| {{ request.text }}
br
br
router-link(:to="{ name: 'FullRequest', params: { id: request.requestId } }"
role='button'
title='View Full Request')
md-icon(icon='description')
= ' View Full Request'
| &nbsp;
router-link(v-if='!isAnswered'
:to="{ name: 'EditRequest', params: { id: request.requestId } }"
role='button'
title='Edit Request')
md-icon(icon='edit')
= ' Edit Request'
| &nbsp;
button(v-if='isSnoozed' @click='cancelSnooze()')
md-icon(icon='restore')
= ' Cancel Snooze'
button(@click='viewFull'
title='View Full Request').
#[md-icon(icon='description')] View Full Request
| &nbsp; &nbsp;
button(v-if='!isAnswered'
@click='editRequest'
title='Edit Request').
#[md-icon(icon='edit')] Edit Request
| &nbsp; &nbsp;
button(v-if='isSnoozed'
@click='cancelSnooze()').
#[md-icon(icon='restore')] Cancel Snooze
br(v-if='isSnoozed || isAnswered')
small(v-if='isSnoozed').mpj-muted-text: em.
&nbsp; Snooze expires #[date-from-now(:value='request.snoozedUntil')]
@ -34,7 +30,8 @@ import actions from '@/store/action-types'
export default {
name: 'request-list-item',
props: {
request: { required: true }
request: { required: true },
toast: { required: true }
},
data () {
return {}
@ -58,7 +55,13 @@ export default {
until: 0
})
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">
b-modal(v-model='snoozeVisible'
header-bg-variant='mpj'
header-text-variant='light'
size='lg'
title='Snooze Prayer Request'
@edit='openDialog()')
b-form
b-form-group(label='Until'
label-for='until')
b-input#until(type='date'
v-model='form.snoozedUntil'
autofocus)
div.w-100.text-right(slot='modal-footer')
b-btn(variant='primary'
:disabled='!isValid'
@click='snoozeRequest()') Snooze
| &nbsp; &nbsp;
b-btn(variant='outline-secondary'
@click='closeDialog()') Cancel
.mpj-modal(v-show='snoozeVisible')
.mpj-modal-content.mpj-skinny
header.mpj-bg
h5 Snooze Prayer Request
p.mpj-text-center
label(for='until') Until
= ' '
input#until(type='date'
v-model='form.snoozedUntil'
autofocus)
br
.mpj-text-right
button.primary(:disabled='!isValid'
@click='snoozeRequest()').
#[md-icon(icon='snooze')] Snooze
| &nbsp; &nbsp;
button(@click='closeDialog()').
#[md-icon(icon='undo')] Cancel
</template>
<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]
request-list-item(v-for='req in requests'
:key='req.requestId'
:request='req')
:request='req'
:toast='toast')
p(v-else) Loading journal...
</template>
@ -36,6 +37,9 @@ export default {
},
...mapState(['journal', 'isLoadingJournal'])
},
created () {
this.$on('requestUnsnoozed', this.ensureJournal)
},
methods: {
async ensureJournal () {
if (!Array.isArray(this.journal)) {
@ -46,15 +50,6 @@ export default {
.filter(req => req.snoozedUntil > Date.now())
.sort((a, b) => a.snoozedUntil - b.snoozedUntil)
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 () {