From a6f0f257f060c2e0be139a5e17a8f68cc9bfde4a Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 1 Jul 2021 20:02:32 +0800
Subject: ...

---
 FrontEnd/TODO.md                                   |  2 +-
 .../src/views/common/dailog/OperationDialog.tsx    | 44 +++++++++++++++++++---
 2 files changed, 40 insertions(+), 6 deletions(-)

(limited to 'FrontEnd')

diff --git a/FrontEnd/TODO.md b/FrontEnd/TODO.md
index b407128e..53e9750e 100644
--- a/FrontEnd/TODO.md
+++ b/FrontEnd/TODO.md
@@ -6,5 +6,5 @@
 - [x] Improve buttons.
 - [x] Improve icon buttons.
 - [ ] Login page.
-- [ ] Alert.
+- [x] Alert.
 - [x] Move prefix `tl` to `cru`.
diff --git a/FrontEnd/src/views/common/dailog/OperationDialog.tsx b/FrontEnd/src/views/common/dailog/OperationDialog.tsx
index 083d60da..6bc846dd 100644
--- a/FrontEnd/src/views/common/dailog/OperationDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/OperationDialog.tsx
@@ -51,6 +51,7 @@ export interface OperationDialogBoolInput {
   type: "bool";
   label: I18nText;
   initValue?: boolean;
+  helperText?: string;
 }
 
 export interface OperationDialogSelectInputOption {
@@ -77,6 +78,7 @@ export interface OperationDialogDateTimeInput {
   type: "datetime";
   label?: I18nText;
   initValue?: string;
+  helperText?: string;
 }
 
 export type OperationDialogInput =
@@ -330,7 +332,13 @@ const OperationDialog = <
               );
             } else if (item.type === "bool") {
               return (
-                <div key={index}>
+                <div
+                  key={index}
+                  className={classNames(
+                    "cru-operation-dialog-group",
+                    error != null ? "error" : null
+                  )}
+                >
                   <input
                     type="checkbox"
                     checked={value as boolean}
@@ -339,7 +347,19 @@ const OperationDialog = <
                     }}
                     disabled={process}
                   />
-                  <label>{convertI18nText(item.label, t)}</label>
+                  <label className="cru-operation-dialog-inline-label">
+                    {convertI18nText(item.label, t)}
+                  </label>
+                  {error != null && (
+                    <div className="cru-operation-dialog-error-text">
+                      {error}
+                    </div>
+                  )}
+                  {item.helperText && (
+                    <div className="cru-operation-dialog-helper-text">
+                      {t(item.helperText)}
+                    </div>
+                  )}
                 </div>
               );
             } else if (item.type === "select") {
@@ -374,7 +394,13 @@ const OperationDialog = <
               );
             } else if (item.type === "color") {
               return (
-                <div key={index}>
+                <div
+                  key={index}
+                  className={classNames(
+                    "cru-operation-dialog-group",
+                    error != null ? "error" : null
+                  )}
+                >
                   {item.canBeNull ? (
                     <input
                       type="checkbox"
@@ -403,9 +429,17 @@ const OperationDialog = <
               );
             } else if (item.type === "datetime") {
               return (
-                <div key={index}>
+                <div
+                  key={index}
+                  className={classNames(
+                    "cru-operation-dialog-group",
+                    error != null ? "error" : null
+                  )}
+                >
                   {item.label && (
-                    <label>{convertI18nText(item.label, t)}</label>
+                    <label className="cru-operation-dialog-label">
+                      {convertI18nText(item.label, t)}
+                    </label>
                   )}
                   <input
                     type="datetime-local"
-- 
cgit v1.2.3