From caed89f0ae64217602a2832bbf2b5df9b66c0999 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 25 Apr 2021 13:44:50 +0300 Subject: destroyed -> unmounted --- src/components/timeago/timeago.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/timeago/timeago.vue') diff --git a/src/components/timeago/timeago.vue b/src/components/timeago/timeago.vue index 55a2dd94..bed29020 100644 --- a/src/components/timeago/timeago.vue +++ b/src/components/timeago/timeago.vue @@ -31,7 +31,7 @@ export default { created () { this.refreshRelativeTimeObject() }, - destroyed () { + unmounted () { clearTimeout(this.interval) }, methods: { -- cgit v1.2.3-70-g09d2 From c17de10d3a823a550e503bbdc4d9bd180e359cd1 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Tue, 7 Jun 2022 20:22:03 -0400 Subject: Delegate relativeTime plural rules to vue-i18n --- src/components/timeago/timeago.vue | 2 +- src/services/date_utils/date_utils.js | 16 +++++++--------- 2 files changed, 8 insertions(+), 10 deletions(-) (limited to 'src/components/timeago/timeago.vue') diff --git a/src/components/timeago/timeago.vue b/src/components/timeago/timeago.vue index bed29020..2b487dfd 100644 --- a/src/components/timeago/timeago.vue +++ b/src/components/timeago/timeago.vue @@ -3,7 +3,7 @@ :datetime="time" :title="localeDateString" > - {{ $t(relativeTime.key, [relativeTime.num]) }} + {{ $tc(relativeTime.key, relativeTime.num, [relativeTime.num]) }} diff --git a/src/services/date_utils/date_utils.js b/src/services/date_utils/date_utils.js index 32e13bca..677c184c 100644 --- a/src/services/date_utils/date_utils.js +++ b/src/services/date_utils/date_utils.js @@ -10,31 +10,29 @@ export const relativeTime = (date, nowThreshold = 1) => { if (typeof date === 'string') date = Date.parse(date) const round = Date.now() > date ? Math.floor : Math.ceil const d = Math.abs(Date.now() - date) - let r = { num: round(d / YEAR), key: 'time.years' } + let r = { num: round(d / YEAR), key: 'time.unit.years' } if (d < nowThreshold * SECOND) { r.num = 0 r.key = 'time.now' } else if (d < MINUTE) { r.num = round(d / SECOND) - r.key = 'time.seconds' + r.key = 'time.unit.seconds' } else if (d < HOUR) { r.num = round(d / MINUTE) - r.key = 'time.minutes' + r.key = 'time.unit.minutes' } else if (d < DAY) { r.num = round(d / HOUR) - r.key = 'time.hours' + r.key = 'time.unit.hours' } else if (d < WEEK) { r.num = round(d / DAY) - r.key = 'time.days' + r.key = 'time.unit.days' } else if (d < MONTH) { r.num = round(d / WEEK) - r.key = 'time.weeks' + r.key = 'time.unit.weeks' } else if (d < YEAR) { r.num = round(d / MONTH) - r.key = 'time.months' + r.key = 'time.unit.months' } - // Remove plural form when singular - if (r.num === 1) r.key = r.key.slice(0, -1) return r } -- cgit v1.2.3-70-g09d2 From b70d50407cef26926635b1b47131c01e597fcfc6 Mon Sep 17 00:00:00 2001 From: Sean King Date: Mon, 1 Aug 2022 21:25:08 -0600 Subject: Refresh the relative time object for a Timeago component if the time changes --- src/components/timeago/timeago.vue | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'src/components/timeago/timeago.vue') diff --git a/src/components/timeago/timeago.vue b/src/components/timeago/timeago.vue index 2b487dfd..fce9605b 100644 --- a/src/components/timeago/timeago.vue +++ b/src/components/timeago/timeago.vue @@ -34,6 +34,13 @@ export default { unmounted () { clearTimeout(this.interval) }, + watch: { + time (newVal, oldVal) { + if (oldVal !== newVal) { + this.refreshRelativeTimeObject() + } + } + }, methods: { refreshRelativeTimeObject () { const nowThreshold = typeof this.nowThreshold === 'number' ? this.nowThreshold : 1 -- cgit v1.2.3-70-g09d2 From 04e62df377fdd2ea563f58dcd23ea8048fc1c140 Mon Sep 17 00:00:00 2001 From: Sean King Date: Tue, 2 Aug 2022 23:19:25 -0600 Subject: Allow for template inside Timeago component that shows unless the time string is 'just now' --- src/components/status/status.vue | 16 ++++++---------- src/components/timeago/timeago.vue | 26 ++++++++++++++++++-------- 2 files changed, 24 insertions(+), 18 deletions(-) (limited to 'src/components/timeago/timeago.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 5ddb94b4..8036ddf4 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -336,16 +336,12 @@ tag="span" > diff --git a/src/components/timeago/timeago.vue b/src/components/timeago/timeago.vue index fce9605b..b5f49515 100644 --- a/src/components/timeago/timeago.vue +++ b/src/components/timeago/timeago.vue @@ -3,7 +3,7 @@ :datetime="time" :title="localeDateString" > - {{ $tc(relativeTime.key, relativeTime.num, [relativeTime.num]) }} + {{ relativeTimeString }} @@ -13,7 +13,7 @@ import localeService from 'src/services/locale/locale.service.js' export default { name: 'Timeago', - props: ['time', 'autoUpdate', 'longFormat', 'nowThreshold'], + props: ['time', 'autoUpdate', 'longFormat', 'nowThreshold', 'templateKey'], data () { return { relativeTime: { key: 'time.now', num: 0 }, @@ -26,21 +26,31 @@ export default { return typeof this.time === 'string' ? new Date(Date.parse(this.time)).toLocaleString(browserLocale) : this.time.toLocaleString(browserLocale) + }, + relativeTimeString () { + const timeString = this.$i18n.tc(this.relativeTime.key, this.relativeTime.num, [this.relativeTime.num]) + + if (typeof this.templateKey === 'string' && this.relativeTime.key !== 'time.now') { + return this.$i18n.t(this.templateKey, [timeString]) + } + + return timeString } }, - created () { - this.refreshRelativeTimeObject() - }, - unmounted () { - clearTimeout(this.interval) - }, watch: { time (newVal, oldVal) { if (oldVal !== newVal) { + clearTimeout(this.interval) this.refreshRelativeTimeObject() } } }, + created () { + this.refreshRelativeTimeObject() + }, + unmounted () { + clearTimeout(this.interval) + }, methods: { refreshRelativeTimeObject () { const nowThreshold = typeof this.nowThreshold === 'number' ? this.nowThreshold : 1 -- cgit v1.2.3-70-g09d2