From 5a96a88121f3ecb846c5cd55c3f51624b4e21402 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 3 Jun 2021 23:20:22 +0800
Subject: feat: Add change post property dialog.

---
 FrontEnd/src/app/views/common/OperationDialog.tsx | 55 +++++++++++++++++++----
 1 file changed, 46 insertions(+), 9 deletions(-)

(limited to 'FrontEnd/src/app/views/common')

diff --git a/FrontEnd/src/app/views/common/OperationDialog.tsx b/FrontEnd/src/app/views/common/OperationDialog.tsx
index 40c14e9e..0ede42e5 100644
--- a/FrontEnd/src/app/views/common/OperationDialog.tsx
+++ b/FrontEnd/src/app/views/common/OperationDialog.tsx
@@ -66,11 +66,18 @@ export interface OperationDialogColorInput {
   canBeNull?: boolean;
 }
 
+export interface OperationDialogDateTimeInput {
+  type: "datetime";
+  label?: I18nText;
+  initValue?: string;
+}
+
 export type OperationDialogInput =
   | OperationDialogTextInput
   | OperationDialogBoolInput
   | OperationDialogSelectInput
-  | OperationDialogColorInput;
+  | OperationDialogColorInput
+  | OperationDialogDateTimeInput;
 
 type MapOperationInputInfoValueType<T> = T extends OperationDialogTextInput
   ? string
@@ -80,8 +87,20 @@ type MapOperationInputInfoValueType<T> = T extends OperationDialogTextInput
   ? string
   : T extends OperationDialogColorInput
   ? string | null
+  : T extends OperationDialogDateTimeInput
+  ? string
   : never;
 
+const defaultValueMap: {
+  [T in OperationDialogInput as T["type"]]: MapOperationInputInfoValueType<T>;
+} = {
+  bool: false,
+  color: null,
+  datetime: "",
+  select: "",
+  text: "",
+};
+
 type MapOperationInputInfoValueTypeList<
   Tuple extends readonly OperationDialogInput[]
 > = {
@@ -153,14 +172,9 @@ const OperationDialog = <
 
   const [values, setValues] = useState<ValueType[]>(
     inputScheme.map((i) => {
-      if (i.type === "bool") {
-        return i.initValue ?? false;
-      } else if (i.type === "text" || i.type === "select") {
-        return i.initValue ?? "";
-      } else if (i.type === "color") {
-        return i.initValue ?? null;
-      }
-      {
+      if (i.type in defaultValueMap) {
+        return i.initValue ?? defaultValueMap[i.type];
+      } else {
         throw new UiLogicError("Unknown input scheme.");
       }
     })
@@ -342,6 +356,29 @@ const OperationDialog = <
                   )}
                 </Form.Group>
               );
+            } else if (item.type === "datetime") {
+              return (
+                <Form.Group key={index}>
+                  {item.label && (
+                    <Form.Label>{convertI18nText(item.label, t)}</Form.Label>
+                  )}
+                  <Form.Control
+                    type="datetime-local"
+                    value={value as string}
+                    onChange={(e) => {
+                      const v = e.target.value;
+                      updateValue(index, v);
+                    }}
+                    isInvalid={error != null}
+                    disabled={process}
+                  />
+                  {error != null && (
+                    <Form.Control.Feedback type="invalid">
+                      {error}
+                    </Form.Control.Feedback>
+                  )}
+                </Form.Group>
+              );
             }
           })}
         </Modal.Body>
-- 
cgit v1.2.3