From dbcae8324bc9882cf2e9aa43a3357698658a6880 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Tue, 20 Oct 2020 13:25:36 +0200
Subject: [PATCH] allow for custom formats

---
 app/src/displays/datetime/datetime.vue | 19 ++++++++++++++++---
 app/src/displays/datetime/index.ts     | 21 +++++++++++++++++++++
 app/src/lang/en-US/displays.json       |  4 ++++
 app/src/lang/en-US/index.json          |  1 +
 4 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/app/src/displays/datetime/datetime.vue b/app/src/displays/datetime/datetime.vue
index 45e6946003..c1ab3a4408 100644
--- a/app/src/displays/datetime/datetime.vue
+++ b/app/src/displays/datetime/datetime.vue
@@ -20,6 +20,10 @@ export default defineComponent({
 			required: true,
 			validator: (val: string) => ['dateTime', 'date', 'time', 'timestamp'].includes(val),
 		},
+		format: {
+			type: String,
+			default: 'long',
+		},
 		relative: {
 			type: Boolean,
 			default: false,
@@ -57,9 +61,18 @@ export default defineComponent({
 						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'));
+					let format;
+					if (props.format === 'long') {
+						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'));
+					} else if (props.format === 'short') {
+						format = `${i18n.t('date-fns_date_short')} ${i18n.t('date-fns_time_short')}`;
+						if (props.type === 'date') format = String(i18n.t('date-fns_date_short'));
+						if (props.type === 'time') format = String(i18n.t('date-fns_time_short'));
+					} else {
+						format = props.format;
+					}
 
 					displayValue.value = await localizedFormat(newValue, format);
 				}
diff --git a/app/src/displays/datetime/index.ts b/app/src/displays/datetime/index.ts
index f615b5103c..64976abbc3 100644
--- a/app/src/displays/datetime/index.ts
+++ b/app/src/displays/datetime/index.ts
@@ -8,11 +8,32 @@ export default defineDisplay(({ i18n }) => ({
 	icon: 'query_builder',
 	handler: DisplayDateTime,
 	options: [
+		{
+			field: 'format',
+			name: i18n.t('displays.datetime.format'),
+			type: 'string',
+			meta: {
+				interface: 'dropdown',
+				width: 'half',
+				options: {
+					choices: [
+						{ text: i18n.t('displays.datetime.long'), value: 'long' },
+						{ text: i18n.t('displays.datetime.short'), value: 'short' },
+					],
+					allowOther: true,
+				},
+				note: i18n.t('displays.datetime.format_note'),
+			},
+			schema: {
+				default_value: 'long',
+			},
+		},
 		{
 			field: 'relative',
 			name: i18n.t('displays.datetime.relative'),
 			type: 'boolean',
 			meta: {
+				width: 'half',
 				interface: 'toggle',
 				options: {
 					label: i18n.t('displays.datetime.relative_label'),
diff --git a/app/src/lang/en-US/displays.json b/app/src/lang/en-US/displays.json
index 993d77656b..a875737be1 100644
--- a/app/src/lang/en-US/displays.json
+++ b/app/src/lang/en-US/displays.json
@@ -26,6 +26,10 @@
 		"datetime": {
 			"datetime": "Datetime",
 			"description": "Display values related to time",
+			"format": "Format",
+			"format_note": "The custom format accetps the __[Date Field Symbol Table](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table)__",
+			"long": "Long",
+			"short": "Short",
 			"relative": "Relative",
 			"relative_label": "Show relative time, eg: 5 minutes ago"
 		},
diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index ef5137abfc..8cd900318d 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -390,6 +390,7 @@
 	"date-fns_date": "PPP",
 	"date-fns_time": "h:mma",
 	"date-fns_date_short": "MMM d, u",
+	"date-fns_time_short": "hh:mm",
 	"date-fns_date_short_no_year": "MMM d",
 	"month": "Month",
 	"year": "Year",