From dc8407447c417eb876da484725be0fa452583a10 Mon Sep 17 00:00:00 2001
From: robin <robin@rnode.me>
Date: Mon, 21 Nov 2022 12:19:43 +0800
Subject: [PATCH 1/2] refactor(ui): remove obsolete code

---
 ui/src/pages/Admin/Interface/index.tsx | 126 -------------------------
 1 file changed, 126 deletions(-)

diff --git a/ui/src/pages/Admin/Interface/index.tsx b/ui/src/pages/Admin/Interface/index.tsx
index 6226c273..a401a7c5 100644
--- a/ui/src/pages/Admin/Interface/index.tsx
+++ b/ui/src/pages/Admin/Interface/index.tsx
@@ -75,19 +75,6 @@ const Interface: FC = () => {
     },
   });
 
-  // const onChange = (fieldName, fieldValue) => {
-  //   if (!formData[fieldName]) {
-  //     return;
-  //   }
-  //   const fieldData: FormDataType = {
-  //     [fieldName]: {
-  //       value: fieldValue,
-  //       isInvalid: false,
-  //       errorMsg: '',
-  //     },
-  //   };
-  //   setFormData({ ...formData, ...fieldData });
-  // };
   const uiSchema: UISchema = {
     theme: {
       'ui:widget': 'select',
@@ -211,119 +198,6 @@ const Interface: FC = () => {
         onSubmit={onSubmit}
         onChange={handleOnChange}
       />
-      {/* <Form noValidate onSubmit={onSubmit}>
-        <Form.Group controlId="logo" className="mb-3">
-          <Form.Label>{t('logo.label')}</Form.Label>
-          <Stack gap={2}>
-            <div
-              className="bg-light overflow-hidden"
-              style={{ width: '288px', height: '96px' }}>
-              {formData.logo.value ? (
-                <Image
-                  width="288"
-                  height="96"
-                  className="object-fit-contain"
-                  src={formData.logo.value}
-                />
-              ) : null}
-            </div>
-            <div className="d-inline-flex">
-              <UploadImg type="logo" upload={imgUpload} className="mb-2" />
-            </div>
-          </Stack>
-          <Form.Text as="div" className="text-muted">
-            <Trans i18nKey="admin.interface.logo.text">
-              You can upload your image or
-              <Button
-                variant="link"
-                size="sm"
-                className="p-0 mx-1"
-                onClick={(evt) => {
-                  evt.preventDefault();
-                  onChange('logo', '');
-                }}>
-                reset it
-              </Button>
-              to the site title text.
-            </Trans>
-          </Form.Text>
-          <Form.Control.Feedback type="invalid">
-            {formData.logo.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
-        <Form.Group controlId="theme" className="mb-3">
-          <Form.Label>{t('theme.label')}</Form.Label>
-          <Form.Select
-            value={formData.theme.value}
-            isInvalid={formData.theme.isInvalid}
-            onChange={(evt) => {
-              onChange('theme', evt.target.value);
-            }}>
-            {themes?.map((item) => {
-              return (
-                <option value={item.value} key={item.value}>
-                  {item.label}
-                </option>
-              );
-            })}
-          </Form.Select>
-          <Form.Text as="div">{t('theme.text')}</Form.Text>
-          <Form.Control.Feedback type="invalid">
-            {formData.theme.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
-        <Form.Group controlId="language" className="mb-3">
-          <Form.Label>{t('language.label')}</Form.Label>
-          <Form.Select
-            value={formData.language.value}
-            isInvalid={formData.language.isInvalid}
-            onChange={(evt) => {
-              onChange('language', evt.target.value);
-            }}>
-            {langs?.map((item) => {
-              return (
-                <option value={item.value} key={item.value}>
-                  {item.label}
-                </option>
-              );
-            })}
-          </Form.Select>
-          <Form.Text as="div">{t('language.text')}</Form.Text>
-          <Form.Control.Feedback type="invalid">
-            {formData.language.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
-        <Form.Group controlId="time-zone" className="mb-3">
-          <Form.Label>{t('time_zone.label')}</Form.Label>
-          <Form.Select
-            value={formData.time_zone.value}
-            isInvalid={formData.time_zone.isInvalid}
-            onChange={(evt) => {
-              onChange('time_zone', evt.target.value);
-            }}>
-            {TIMEZONES?.map((item) => {
-              return (
-                <optgroup label={item.label} key={item.label}>
-                  {item.options.map((option) => {
-                    return (
-                      <option value={option.value} key={option.value}>
-                        {option.label}
-                      </option>
-                    );
-                  })}
-                </optgroup>
-              );
-            })}
-          </Form.Select>
-          <Form.Text as="div">{t('time_zone.text')}</Form.Text>
-          <Form.Control.Feedback type="invalid">
-            {formData.time_zone.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
-        <Button variant="primary" type="submit">
-          {t('save', { keyPrefix: 'btns' })}
-        </Button>
-      </Form> */}
     </>
   );
 };

From 9caddd22b31573bfd6f267242a5b3ad1deb957cd Mon Sep 17 00:00:00 2001
From: robin <robin@rnode.me>
Date: Mon, 21 Nov 2022 12:21:37 +0800
Subject: [PATCH 2/2] fix(ui): Fixed the problem that select cannot be selected

---
 ui/src/components/SchemaForm/index.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/SchemaForm/index.tsx b/ui/src/components/SchemaForm/index.tsx
index e29be8e8..776d0b42 100644
--- a/ui/src/components/SchemaForm/index.tsx
+++ b/ui/src/components/SchemaForm/index.tsx
@@ -109,6 +109,17 @@ const SchemaForm: FC<IProps> = ({
     }
   };
 
+  const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    const data = {
+      ...formData,
+      [name]: { ...formData[name], value, isInvalid: false },
+    };
+    if (onChange instanceof Function) {
+      onChange(data);
+    }
+  };
+
   const handleSwitchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, checked } = e.target;
     const data = {
@@ -238,6 +249,9 @@ const SchemaForm: FC<IProps> = ({
               <Form.Label>{title}</Form.Label>
               <Form.Select
                 aria-label={description}
+                name={key}
+                value={formData[key]?.value}
+                onChange={handleSelectChange}
                 isInvalid={formData[key].isInvalid}>
                 {properties[key].enum?.map((item, index) => {
                   return (
@@ -314,7 +328,8 @@ const SchemaForm: FC<IProps> = ({
               <Form.Label>{title}</Form.Label>
               <TimeZonePicker
                 value={formData[key]?.value}
-                onChange={handleInputChange}
+                name={key}
+                onChange={handleSelectChange}
               />
               <Form.Control
                 name={key}