From 3c0136afd8eb9c7ec916677a561f79b311617e59 Mon Sep 17 00:00:00 2001
From: BerkieBb <82737367+BerkieBb@users.noreply.github.com>
Date: Mon, 11 Sep 2023 21:17:35 +0000
Subject: [PATCH] feat(web/input): returnString for date inputs (#411)

* feat(interface/input): useFormat field

* feat(interface/input): useFormat field

* feat(types/dialog): useFormat field

* feat(components/date): format date conversion

* tweak(components/date): forgot other data type

* chore(interface/input): more descriptive name

* chore(interface/input): more descriptive name

* chore(types/dialog): more descriptive name

* tweak(components/date): reset things

* feat(dialog/input): date conversion with returnString

* refactor(web/input): remove unnecessary state

---------

Co-authored-by: Luke <39926192+LukeWasTakenn@users.noreply.github.com>
---
 package/client/resource/interface/input.ts         |  1 +
 resource/interface/client/input.lua                |  1 +
 web/src/features/dialog/InputDialog.tsx            | 11 ++++++++++-
 web/src/features/dialog/components/fields/date.tsx |  6 ++----
 web/src/typings/dialog.ts                          |  1 +
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/package/client/resource/interface/input.ts b/package/client/resource/interface/input.ts
index a03ddbb..00895b4 100644
--- a/package/client/resource/interface/input.ts
+++ b/package/client/resource/interface/input.ts
@@ -29,6 +29,7 @@ interface InputDialogRowProps {
   step?: number;
   required?: boolean;
   format?: string;
+  returnString?: boolean;
   description?: string;
 }
 
diff --git a/resource/interface/client/input.lua b/resource/interface/client/input.lua
index 6b61f34..ace10f7 100644
--- a/resource/interface/client/input.lua
+++ b/resource/interface/client/input.lua
@@ -17,6 +17,7 @@ local input
 ---@field autosize? boolean
 ---@field required? boolean
 ---@field format? string
+---@field returnString? boolean
 ---@field clearable? string
 ---@field description? string
 
diff --git a/web/src/features/dialog/InputDialog.tsx b/web/src/features/dialog/InputDialog.tsx
index 8e204fc..580c5df 100644
--- a/web/src/features/dialog/InputDialog.tsx
+++ b/web/src/features/dialog/InputDialog.tsx
@@ -14,7 +14,8 @@ import ColorField from './components/fields/color';
 import DateField from './components/fields/date';
 import TextareaField from './components/fields/textarea';
 import TimeField from './components/fields/time';
-import type { InputProps } from '../../typings';
+import type { IDateInput, InputProps } from '../../typings';
+import dayjs from 'dayjs';
 
 export type FormValues = {
   test: {
@@ -80,6 +81,14 @@ const InputDialog: React.FC = () => {
   const onSubmit = form.handleSubmit(async (data) => {
     setVisible(false);
     const values: any[] = [];
+    for (let i = 0; i < fields.rows.length; i++) {
+      const row = fields.rows[i];
+
+      if ((row.type === 'date' || row.type === 'date-range') && row.returnString) {
+        if (!data.test[i]) continue;
+        data.test[i].value = dayjs(data.test[i].value).format(row.format || 'DD/MM/YYYY');
+      }
+    }
     Object.values(data.test).forEach((obj: { value: any }) => values.push(obj.value));
     await new Promise((resolve) => setTimeout(resolve, 200));
     form.reset();
diff --git a/web/src/features/dialog/components/fields/date.tsx b/web/src/features/dialog/components/fields/date.tsx
index ec05f9c..30dca2e 100644
--- a/web/src/features/dialog/components/fields/date.tsx
+++ b/web/src/features/dialog/components/fields/date.tsx
@@ -1,7 +1,7 @@
 import { IDateInput } from '../../../../typings/dialog';
 import { Control, useController } from 'react-hook-form';
 import { FormValues } from '../../InputDialog';
-import { DatePicker, DateRangePicker, TimeInput } from '@mantine/dates';
+import { DatePicker, DateRangePicker } from '@mantine/dates';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface Props {
@@ -51,9 +51,7 @@ const DateField: React.FC<Props> = (props) => {
           name={controller.field.name}
           ref={controller.field.ref}
           onBlur={controller.field.onBlur}
-          onChange={(dates) =>
-            controller.field.onChange(dates.map((date: Date | null) => (date ? date.getTime() : null)))
-          }
+          onChange={(dates) => controller.field.onChange(dates.map((date: Date | null) => date ? date.getTime() : null))}
           label={props.row.label}
           description={props.row.description}
           placeholder={props.row.format}
diff --git a/web/src/typings/dialog.ts b/web/src/typings/dialog.ts
index c90ec37..c535449 100644
--- a/web/src/typings/dialog.ts
+++ b/web/src/typings/dialog.ts
@@ -59,6 +59,7 @@ export interface IColorInput extends BaseField<'color', string> {
 export interface IDateInput
   extends Omit<BaseField<'date' | 'date-range', string | [string, string] | true>, 'placeholder'> {
   format?: string;
+  returnString?: boolean;
   clearable?: boolean;
   min?: string;
   max?: string;