Added "date from now" component (#4)

Also moved page title component to new "common" component directory
This commit is contained in:
Daniel J. Summers 2017-09-25 22:34:25 -05:00
parent 51ec649e7f
commit 3a0ac7ce97
6 changed files with 72 additions and 7 deletions

View File

@ -1,6 +1,6 @@
<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,
@ -15,7 +15,7 @@ article
<script> <script>
'use strict' 'use strict'
import PageTitle from './PageTitle.vue' import PageTitle from './common/PageTitle.vue'
export default { export default {
name: 'home', name: 'home',

View File

@ -17,7 +17,7 @@ article
import { mapState } from 'vuex' import { mapState } from 'vuex'
import PageTitle from './PageTitle' import PageTitle from './common/PageTitle'
import NewRequest from './request/NewRequest' import NewRequest from './request/NewRequest'
import RequestListItem from './request/RequestListItem' import RequestListItem from './request/RequestListItem'

View File

@ -0,0 +1,45 @@
<script>
'use strict'
import moment from 'moment'
export default {
name: 'date-from-now',
props: {
tag: {
type: String,
default: 'span'
},
value: {
type: Number,
default: 0
},
interval: {
type: Number,
default: 10000
}
},
data () {
return {
fromNow: moment(this.value).fromNow(),
intervalId: null
}
},
mounted () {
this.intervalId = setInterval(this.updateFromNow, this.interval)
this.$watch('value', this.updateFromNow)
},
beforeDestroy () {
clearInterval(this.intervalId)
},
methods: {
updateFromNow () {
let newFromNow = moment(this.value).fromNow()
if (newFromNow !== this.fromNow) this.fromNow = newFromNow
}
},
render (createElement) {
return createElement(this.tag, this.fromNow)
}
}
</script>

View File

@ -1,11 +1,20 @@
<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: {
type: String,
required: true
},
hideOnPage: {
type: Boolean,
default: false
}
},
created () { created () {
document.title = `${this.title} « myPrayerJournal` document.title = `${this.title} « myPrayerJournal`
}, },

View File

@ -5,7 +5,7 @@ el-row.journal-request
edit-request(:request='request') edit-request(:request='request')
full-request(:request='request') full-request(:request='request')
el-col(:span='16'): p {{ text }} el-col(:span='16'): p {{ text }}
el-col(:span='4'): p {{ asOf }} el-col(:span='4'): p: date-from-now(:value='request.asOf')
</template> </template>
<script> <script>
@ -13,6 +13,7 @@ el-row.journal-request
import moment from 'moment' import moment from 'moment'
import DateFromNow from '../common/DateFromNow'
import EditRequest from './EditRequest' import EditRequest from './EditRequest'
import FullRequest from './FullRequest' import FullRequest from './FullRequest'
@ -21,7 +22,11 @@ import actions from '@/store/action-types'
export default { export default {
name: 'request-list-item', name: 'request-list-item',
props: [ 'request' ], props: [ 'request' ],
data () {
return { interval: null }
},
components: { components: {
DateFromNow,
EditRequest, EditRequest,
FullRequest FullRequest
}, },

View File

@ -1,14 +1,20 @@
<template lang="pug"> <template lang="pug">
p Logging you on... article
pageTitle(title='Logging On')
p Logging you on...
</template> </template>
<script> <script>
'use strict' 'use strict'
import PageTitle from '../common/PageTitle'
import AuthService from '@/auth/AuthService' import AuthService from '@/auth/AuthService'
export default { export default {
name: 'log-on', name: 'log-on',
components: {
PageTitle
},
created () { created () {
this.$Progress.start() this.$Progress.start()
new AuthService().handleAuthentication(this.$store, this.$router) new AuthService().handleAuthentication(this.$store, this.$router)