From 889a059ca41a4d1227e080174e4ffa7417826a9b Mon Sep 17 00:00:00 2001
From: Camille Moussu <ca.noiray@gmail.com>
Date: Fri, 17 May 2024 16:43:48 +0400
Subject: [PATCH] [#8]fully functionning auth param

---
 .../authParamOptions/OptionRenderer.tsx       | 105 +++++--
 .../managerComponents/URLLoader.tsx           |   1 -
 src/dashboards/AuthParams.tsx                 | 260 +++++++++---------
 src/dashboards/Manager.tsx                    |   1 -
 src/features/config/configSlice.ts            |  43 +++
 5 files changed, 256 insertions(+), 154 deletions(-)

diff --git a/src/components/authParamOptions/OptionRenderer.tsx b/src/components/authParamOptions/OptionRenderer.tsx
index 03271ee..d907914 100644
--- a/src/components/authParamOptions/OptionRenderer.tsx
+++ b/src/components/authParamOptions/OptionRenderer.tsx
@@ -26,14 +26,17 @@ import {
   delChoiceParam,
   delCombOverParam,
   delCombParam,
+  delModuleOpt,
   newChoiceOverParam,
   newChoiceParam,
   newCombOverParam,
   newCombParam,
+  newModuleOpt,
   updateChoiceOverParam,
   updateChoiceParam,
   updateCombOverParam,
   updateCombParam,
+  updateModuleOpt,
   updateModuleParams,
 } from "../../features/config/configSlice";
 function updateComb(
@@ -161,6 +164,7 @@ function cmbModuleContainer(
               <tr>
                 <td>
                   <TextField
+                    size="small"
                     type="text"
                     placeholder={t(key)}
                     value={key}
@@ -308,6 +312,7 @@ function authChoiceContainer(data: Record<string, string>, dispatch: Function) {
                 <tr>
                   <td>
                     <TextField
+                      size="small"
                       type="text"
                       value={key}
                       onChange={(e) =>
@@ -398,6 +403,7 @@ function authChoiceContainer(data: Record<string, string>, dispatch: Function) {
                   </td>
                   <td>
                     <TextField
+                      size="small"
                       type="url"
                       value={url}
                       onChange={() =>
@@ -413,6 +419,7 @@ function authChoiceContainer(data: Record<string, string>, dispatch: Function) {
                   </td>
                   <td>
                     <TextField
+                      size="small"
                       type="text"
                       value={cond}
                       onChange={() =>
@@ -503,7 +510,9 @@ function RecursRender(
       case "int":
         return (
           <ul>
+            <strong className="title3">{t(el)}</strong>
             <TextField
+              size="small"
               type="number"
               onChange={(e) =>
                 dispatch(
@@ -521,7 +530,9 @@ function RecursRender(
       case "text":
         return (
           <ul>
+            <strong className="title3">{t(el)}</strong>
             <TextField
+              size="small"
               type="text"
               onChange={(e) =>
                 dispatch(
@@ -539,7 +550,9 @@ function RecursRender(
       case "PerlModule":
         return (
           <ul>
+            <strong className="title3">{t(el)}</strong>
             <TextField
+              size="small"
               type="text"
               onChange={(e) =>
                 dispatch(
@@ -557,7 +570,9 @@ function RecursRender(
       case "password":
         return (
           <ul>
+            <strong className="title3">{t(el)}</strong>
             <TextField
+              size="small"
               type="password"
               onChange={(e) =>
                 dispatch(
@@ -575,7 +590,9 @@ function RecursRender(
       case "intOrNull":
         return (
           <ul>
+            <strong className="title3">{t(el)}</strong>
             <TextField
+              size="small"
               type="number"
               onChange={(e) =>
                 dispatch(
@@ -591,14 +608,27 @@ function RecursRender(
           </ul>
         );
       case "authChoiceContainer":
-        return authChoiceContainer(
-          config[el as keyof llngConfig] as Record<string, string>,
-          dispatch
+        return (
+          <>
+            <strong className="title3">{t(el)}</strong>
+            {authChoiceContainer(
+              config[el as keyof llngConfig] as Record<string, string>,
+              dispatch
+            )}
+          </>
         );
       case "cmbModuleContainer":
-        return cmbModuleContainer(
-          config[el as keyof llngConfig] as Record<string, Record<string, any>>,
-          dispatch
+        return (
+          <>
+            <strong className="title3">{t(el)}</strong>{" "}
+            {cmbModuleContainer(
+              config[el as keyof llngConfig] as Record<
+                string,
+                Record<string, any>
+              >,
+              dispatch
+            )}
+          </>
         );
       case "select":
         return (
@@ -665,35 +695,53 @@ function RecursRender(
         );
       case "keyTextContainer":
         return (
-          <table id={el + "table"}>
-            <thead>
-              <tr>
-                <th>{t("keys")}</th>
-                <th>{t("values")}</th>
-                <th>
-                  <Button className="plus">
-                    <AddCircleIcon color="success" />
-                  </Button>
-                </th>
-              </tr>
-            </thead>
-            {TableVars(
-              el,
-              config[el as keyof llngConfig] as Record<string, string>,
-              el + "Table",
-              console.log,
-              console.log,
-              console.log
-            )}
-          </table>
+          <>
+            <strong className="title3">{t(el)}</strong>
+            <table id={el + "Table"}>
+              <thead>
+                <tr>
+                  <th>{t("keys")}</th>
+                  <th>{t("values")}</th>
+                  <th>
+                    <Button
+                      className="plus"
+                      onClick={() =>
+                        dispatch(newModuleOpt(el as keyof llngConfig))
+                      }
+                    >
+                      <AddCircleIcon color="success" />
+                    </Button>
+                  </th>
+                </tr>
+              </thead>
+              {TableVars(
+                el,
+                config[el as keyof llngConfig] as Record<string, string>,
+                el + "Table",
+                dispatch,
+                delModuleOpt,
+                updateModuleOpt
+              )}
+            </table>
+          </>
         );
       case "url":
         return (
           <ul>
+            <strong className="title3">{t(el)}</strong>
             <TextField
+              size="small"
               type="url"
               placeholder={t(el)}
               value={config[el as keyof llngConfig]}
+              onChange={(e) =>
+                dispatch(
+                  updateModuleParams({
+                    param: el as keyof llngConfig,
+                    value: String(e.target.value),
+                  })
+                )
+              }
             />
           </ul>
         );
@@ -726,6 +774,7 @@ function RecursRender(
               </RadioGroup>
             </FormControl>
             <TextField
+              size="small"
               type="url"
               value={config[el as keyof llngConfig]}
               onChange={(e) =>
@@ -761,7 +810,7 @@ export function OptionRenderer({ selected }: { selected: string }) {
   return (
     <div>
       <strong className="title2">{t(l)}</strong>
-      <div>
+      <div className="appDesc">
         {nodeSelected ? RecursRender(nodeSelected, config, 0, dispatch) : ""}
       </div>
     </div>
diff --git a/src/components/managerComponents/URLLoader.tsx b/src/components/managerComponents/URLLoader.tsx
index 809ebdd..5ff6ba1 100644
--- a/src/components/managerComponents/URLLoader.tsx
+++ b/src/components/managerComponents/URLLoader.tsx
@@ -33,7 +33,6 @@ export function URLLoader({
             setLoading(true);
             setError(false);
             const data = await getFromURL(url);
-            console.log(data);
             dispatch(
               loadFunction({
                 name: appName ? appName : "",
diff --git a/src/dashboards/AuthParams.tsx b/src/dashboards/AuthParams.tsx
index 7d71ea5..cae5997 100644
--- a/src/dashboards/AuthParams.tsx
+++ b/src/dashboards/AuthParams.tsx
@@ -5,12 +5,17 @@ import { useAppDispatch, useAppSelector } from "../app/hooks";
 import "./AuthParams.css";
 import { useState } from "react";
 import { OptionRenderer } from "../components/authParamOptions/OptionRenderer";
-import { updateAuthParams } from "../features/config/configSlice";
+import {
+  removeError,
+  setError,
+  updateAuthParams,
+} from "../features/config/configSlice";
 export function AuthParams() {
   const dispatch = useAppDispatch();
   const authChoiceModules = useAppSelector(
     (state) => state.config.data.config.authChoiceModules
   );
+  const config = useAppSelector((state) => state.config);
   const authModule = useAppSelector(
     (state) => state.config.data.config.authentication
   );
@@ -51,132 +56,139 @@ export function AuthParams() {
   ];
 
   const [optionSelected, setOptionSelected] = useState(authModule);
-
-  return (
-    <div>
+  try {
+    return (
       <div>
-        <strong className="title">{t("authParams")}</strong>
-      </div>
-      <div className="authOptionChoices">
-        <FormControl>
-          <InputLabel id="authenticationLabel">
-            {t("authentication")}
-          </InputLabel>
-          <Select
-            labelId="authenticationLabel"
-            label={t("authentication")}
-            size="small"
-            value={authModule}
-            defaultValue={attributes.authentication.default}
-            onChange={(e) =>
-              dispatch(
-                updateAuthParams({
-                  param: "authentication",
-                  value: String(e.target.value),
-                })
-              )
-            }
-          >
-            {attributes.authentication.select.map((el) => {
-              return (
-                <MenuItem key={el.k} value={el.k}>
-                  {t(el.v)}
-                </MenuItem>
-              );
-            })}
-          </Select>
-        </FormControl>
-        <FormControl>
-          <InputLabel id="userDBLabel">{t("userDB")}</InputLabel>
-          <Select
-            labelId="userDBLabel"
-            label={t("userDB")}
-            size="small"
-            value={userDB}
-            defaultValue={attributes.userDB.default}
-            onChange={(e) =>
-              dispatch(
-                updateAuthParams({
-                  param: "userDB",
-                  value: String(e.target.value),
-                })
-              )
-            }
-          >
-            {attributes.userDB.select.map((el) => {
-              return (
+        <div>
+          <strong className="title">{t("authParams")}</strong>
+        </div>
+        <div className="authOptionChoices">
+          <FormControl>
+            <InputLabel id="authenticationLabel">
+              {t("authentication")}
+            </InputLabel>
+            <Select
+              labelId="authenticationLabel"
+              label={t("authentication")}
+              size="small"
+              value={authModule}
+              defaultValue={attributes.authentication.default}
+              onChange={(e) =>
+                dispatch(
+                  updateAuthParams({
+                    param: "authentication",
+                    value: String(e.target.value),
+                  })
+                )
+              }
+            >
+              {attributes.authentication.select.map((el) => {
+                return (
+                  <MenuItem key={el.k} value={el.k}>
+                    {t(el.v)}
+                  </MenuItem>
+                );
+              })}
+            </Select>
+          </FormControl>
+          <FormControl>
+            <InputLabel id="userDBLabel">{t("userDB")}</InputLabel>
+            <Select
+              labelId="userDBLabel"
+              label={t("userDB")}
+              size="small"
+              value={userDB}
+              defaultValue={attributes.userDB.default}
+              onChange={(e) =>
+                dispatch(
+                  updateAuthParams({
+                    param: "userDB",
+                    value: String(e.target.value),
+                  })
+                )
+              }
+            >
+              {attributes.userDB.select.map((el) => {
+                return (
+                  <MenuItem key={el.k} value={el.k}>
+                    {t(el.v)}
+                  </MenuItem>
+                );
+              })}
+            </Select>
+          </FormControl>
+          <FormControl>
+            <InputLabel id="passwordDBLabel">{t("passwordDB")}</InputLabel>
+            <Select
+              labelId="passwordDBLabel"
+              label={t("passwordDB")}
+              size="small"
+              value={passwordDB}
+              defaultValue={attributes.passwordDB.default}
+              onChange={(e) =>
+                dispatch(
+                  updateAuthParams({
+                    param: "passwordDB",
+                    value: String(e.target.value),
+                  })
+                )
+              }
+            >
+              {attributes.passwordDB.select.map((el) => {
+                return (
+                  <MenuItem key={el.k} value={el.k}>
+                    {t(el.v)}
+                  </MenuItem>
+                );
+              })}
+            </Select>
+          </FormControl>
+          <FormControl>
+            <InputLabel id="registerDBLabel">{t("registerDB")}</InputLabel>
+            <Select
+              labelId="registerDBLabel"
+              label={t("registerDB")}
+              size="small"
+              value={registerDB}
+              defaultValue={attributes.registerDB.default}
+              onChange={(e) =>
+                dispatch(
+                  updateAuthParams({
+                    param: "registerDB",
+                    value: String(e.target.value),
+                  })
+                )
+              }
+            >
+              {attributes.registerDB.select.map((el) => (
                 <MenuItem key={el.k} value={el.k}>
                   {t(el.v)}
                 </MenuItem>
-              );
-            })}
-          </Select>
-        </FormControl>
-        <FormControl>
-          <InputLabel id="passwordDBLabel">{t("passwordDB")}</InputLabel>
-          <Select
-            labelId="passwordDBLabel"
-            label={t("passwordDB")}
-            size="small"
-            value={passwordDB}
-            defaultValue={attributes.passwordDB.default}
-            onChange={(e) =>
-              dispatch(
-                updateAuthParams({
-                  param: "passwordDB",
-                  value: String(e.target.value),
-                })
-              )
-            }
-          >
-            {attributes.passwordDB.select.map((el) => {
-              return (
-                <MenuItem key={el.k} value={el.k}>
-                  {t(el.v)}
-                </MenuItem>
-              );
-            })}
-          </Select>
-        </FormControl>
-        <FormControl>
-          <InputLabel id="registerDBLabel">{t("registerDB")}</InputLabel>
-          <Select
-            labelId="registerDBLabel"
-            label={t("registerDB")}
-            size="small"
-            value={registerDB}
-            defaultValue={attributes.registerDB.default}
-            onChange={(e) =>
-              dispatch(
-                updateAuthParams({
-                  param: "registerDB",
-                  value: String(e.target.value),
-                })
-              )
-            }
-          >
-            {attributes.registerDB.select.map((el) => (
-              <MenuItem key={el.k} value={el.k}>
-                {t(el.v)}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-      </div>
-      <div className="optionNavbar">
-        {allOptChoices.map((el) =>
-          selectedOptions.includes(el.k) && el.k !== "Same" ? (
-            <span key={el.k} onClick={() => setOptionSelected(el.k)}>
-              {el.v}
-            </span>
-          ) : (
-            <></>
-          )
-        )}
+              ))}
+            </Select>
+          </FormControl>
+        </div>
+        <div className="optionNavbar">
+          {allOptChoices.map((el) =>
+            selectedOptions.includes(el.k) && el.k !== "Same" ? (
+              <span key={el.k} onClick={() => setOptionSelected(el.k)}>
+                {el.v}
+              </span>
+            ) : (
+              <></>
+            )
+          )}
+        </div>
+        <div className="options">
+          <OptionRenderer selected={optionSelected ? optionSelected : ""} />
+        </div>
       </div>
-      <div className="options">
-        <OptionRenderer selected={optionSelected ? optionSelected : ""} />
-      </div>
-    </div>
-  );
+    );
+  } catch (e) {
+    if (e instanceof Error) {
+      dispatch(setError(`${e.name} : ${e.message}`));
+      dispatch(removeError());
+    }
+    return <div>{config.error.errorContent}</div>;
+  }
 }
diff --git a/src/dashboards/Manager.tsx b/src/dashboards/Manager.tsx
index 9d9f744..4c9f1ab 100644
--- a/src/dashboards/Manager.tsx
+++ b/src/dashboards/Manager.tsx
@@ -37,7 +37,6 @@ export default function Manager() {
   );
 
   useEffect(() => {
-    console.log(configNum, config.data.metadata.cfgNum);
     if (!configPresent) {
       setConfigPresent(true);
       dispatch(
diff --git a/src/features/config/configSlice.ts b/src/features/config/configSlice.ts
index 4ea373e..a2aff03 100644
--- a/src/features/config/configSlice.ts
+++ b/src/features/config/configSlice.ts
@@ -876,6 +876,46 @@ const configSlice = createSlice({
         }
       }
     },
+    newModuleOpt<K extends keyof llngConfig>(
+      state: {
+        data: { config: llngConfig; metadata: MetaData };
+      },
+      action: PayloadAction<K>
+    ) {
+      if (!state.data.config[action.payload]) {
+        state.data.config[action.payload] = {} as llngConfig[K];
+      }
+      if (typeof state.data.config[action.payload] === "object") {
+        (state.data.config[action.payload] as Record<string, string>)["new"] =
+          "";
+      }
+    },
+    updateModuleOpt<K extends keyof llngConfig>(
+      state: {
+        data: { config: llngConfig; metadata: MetaData };
+      },
+      action: PayloadAction<{ name: K; data: Record<string, string> }>
+    ) {
+      if (!state.data.config[action.payload.name]) {
+        state.data.config[action.payload.name] = {} as llngConfig[K];
+      }
+      state.data.config[action.payload.name] = action.payload
+        .data as llngConfig[K];
+    },
+    delModuleOpt<K extends keyof llngConfig>(
+      state: {
+        data: { config: llngConfig; metadata: MetaData };
+      },
+      action: PayloadAction<{ name: K; key: string }>
+    ) {
+      if (state.data.config[action.payload.name]) {
+        if (typeof state.data.config[action.payload.name] === "object") {
+          delete (
+            state.data.config[action.payload.name] as Record<string, string>
+          )[action.payload.key];
+        }
+      }
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -979,5 +1019,8 @@ export const {
   newChoiceOverParam,
   delChoiceOverParam,
   updateChoiceOverParam,
+  newModuleOpt,
+  delModuleOpt,
+  updateModuleOpt,
 } = configSlice.actions;
 export default configSlice.reducer;