From e4506fef0ed3ece7702d677d4a82c87e8e7616a4 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Wed, 26 Jul 2023 21:34:41 +0200
Subject: [PATCH] feat(frontend): Add an output format (#1939)

* feat(frontend): Add an output format

* feat(frontend): Fix build
---
 .../components/inputs/AppDateInput.svelte     | 25 ++++++++++++++++++-
 .../apps/editor/component/components.ts       |  5 ++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte
index 2abba3e5cd..99bd773708 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte
@@ -21,6 +21,7 @@
 	let minValue: string = ''
 	let maxValue: string = ''
 	let defaultValue: string | undefined = undefined
+	let format: string | undefined = undefined
 
 	let value: string | undefined = undefined
 
@@ -36,7 +37,28 @@
 
 	$: handleDefault(defaultValue)
 
-	$: outputs?.result.set(value)
+	function formatDate(dateString: string, format: string = 'DD.MM.YYYY') {
+		const date = new Date(dateString)
+
+		if (format === '') {
+			format = 'DD.MM.YYYY'
+		}
+
+		const padZero = (num: number) => (num < 10 ? '0' + num : num.toString())
+
+		const formatTokens = {
+			YYYY: date.getFullYear(),
+			MM: padZero(date.getMonth() + 1),
+			DD: padZero(date.getDate()),
+			hh: padZero(date.getHours()),
+			mm: padZero(date.getMinutes()),
+			ss: padZero(date.getSeconds())
+		}
+
+		return format.replace(/YYYY|MM|DD|hh|mm|ss/g, (match) => formatTokens[match])
+	}
+
+	$: value && outputs?.result.set(formatDate(value, format))
 
 	function handleDefault(defaultValue: string | undefined) {
 		value = defaultValue
@@ -48,6 +70,7 @@
 <InputValue {id} input={configuration.minDate} bind:value={minValue} />
 <InputValue {id} input={configuration.maxDate} bind:value={maxValue} />
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+<InputValue {id} input={configuration.outputFormat} bind:value={format} />
 
 <InitializeComponent {id} />
 
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 9b28074ba6..915b1ea86d 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -1785,6 +1785,11 @@ Hello \${ctx.username}
 					type: 'static',
 					value: undefined,
 					fieldType: 'date'
+				},
+				outputFormat: {
+					type: 'static',
+					value: undefined,
+					fieldType: 'text'
 				}
 			}
 		}