feat: improve config UI (#69)

* add first concept * completed configuration ui update * add button for testing email configuration * improve mobile layout * add migration * run formatter * delete unnecessary modal * remove unused comment
2022-12-30 14:40:23 +01:00
parent e5b50f855c
commit 5bc4f902f6
23 changed files with 429 additions and 284 deletions
--- a/frontend/src/components/admin/configuration/AdminConfigInput.tsx
+++ b/frontend/src/components/admin/configuration/AdminConfigInput.tsx
@@ -0,0 +1,76 @@
+import {
+  NumberInput,
+  PasswordInput,
+  Stack,
+  Switch,
+  Textarea,
+  TextInput,
+} from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { AdminConfig, UpdateConfig } from "../../../types/config.type";
+
+const AdminConfigInput = ({
+  configVariable,
+  updateConfigVariable,
+}: {
+  configVariable: AdminConfig;
+  updateConfigVariable: (variable: UpdateConfig) => void;
+}) => {
+  const form = useForm({
+    initialValues: {
+      stringValue: configVariable.value,
+      textValue: configVariable.value,
+      numberValue: parseInt(configVariable.value),
+      booleanValue: configVariable.value == "true",
+    },
+  });
+
+  const onValueChange = (configVariable: AdminConfig, value: any) => {
+    form.setFieldValue(`${configVariable.type}Value`, value);
+    updateConfigVariable({ key: configVariable.key, value: value });
+  };
+
+  return (
+    <Stack align="end">
+      {configVariable.type == "string" &&
+        (configVariable.obscured ? (
+          <PasswordInput
+            style={{ width: "100%" }}
+            onChange={(e) => onValueChange(configVariable, e.target.value)}
+            {...form.getInputProps("stringValue")}
+          />
+        ) : (
+          <TextInput
+            style={{ width: "100%" }}
+            {...form.getInputProps("stringValue")}
+            onChange={(e) => onValueChange(configVariable, e.target.value)}
+          />
+        ))}
+
+      {configVariable.type == "text" && (
+        <Textarea
+          style={{ width: "100%" }}
+          autosize
+          {...form.getInputProps("textValue")}
+          onChange={(e) => onValueChange(configVariable, e.target.value)}
+        />
+      )}
+      {configVariable.type == "number" && (
+        <NumberInput
+          {...form.getInputProps("numberValue")}
+          onChange={(number) => onValueChange(configVariable, number)}
+        />
+      )}
+      {configVariable.type == "boolean" && (
+        <>
+          <Switch
+            {...form.getInputProps("booleanValue", { type: "checkbox" })}
+            onChange={(e) => onValueChange(configVariable, e.target.checked)}
+          />
+        </>
+      )}
+    </Stack>
+  );
+};
+
+export default AdminConfigInput;