From 1ca86967f7ab711885441baeed7f8df905b35992 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Wed, 12 Aug 2020 13:26:06 -0400
Subject: [PATCH] Add relative option to datetime display

---
 app/src/displays/datetime/datetime.vue | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/app/src/displays/datetime/datetime.vue b/app/src/displays/datetime/datetime.vue
index 14628b9b87..0e998052d5 100644
--- a/app/src/displays/datetime/datetime.vue
+++ b/app/src/displays/datetime/datetime.vue
@@ -4,7 +4,8 @@
 
 <script lang="ts">
 import { defineComponent, ref, watch, PropType } from '@vue/composition-api';
-import formatLocalized from '@/utils/localized-format';
+import localizedFormat from '@/utils/localized-format';
+import localizedFormatDistance from '@/utils/localized-format-distance';
 import i18n from '@/lang';
 import parseISO from 'date-fns/parseISO';
 
@@ -19,6 +20,10 @@ export default defineComponent({
 			required: true,
 			validator: (val: string) => ['datetime', 'date', 'time', 'timestamp'].includes(val),
 		},
+		relative: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props) {
 		const displayValue = ref<string | null>(null);
@@ -33,11 +38,17 @@ export default defineComponent({
 
 				const date = parseISO(props.value);
 
-				let format = `${i18n.t('date-fns_date')} ${i18n.t('date-fns_time')}`;
-				if (props.type === 'date') format = String(i18n.t('date-fns_date'));
-				if (props.type === 'time') format = String(i18n.t('date-fns_time'));
+				if (props.relative) {
+					displayValue.value = await localizedFormatDistance(date, new Date(), {
+						addSuffix: true,
+					});
+				} else {
+					let format = `${i18n.t('date-fns_date')} ${i18n.t('date-fns_time')}`;
+					if (props.type === 'date') format = String(i18n.t('date-fns_date'));
+					if (props.type === 'time') format = String(i18n.t('date-fns_time'));
 
-				displayValue.value = await formatLocalized(date, format);
+					displayValue.value = await localizedFormat(date, format);
+				}
 			},
 			{ immediate: true }
 		);