feat(ui-hydro): add inflow structure form UI

webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/InflowStructure/index.tsx

@@ -0,0 +1,79 @@
+import { useOutletContext } from "react-router";
+import { StudyMetadata } from "../../../../../../../../common/types";
+import useAppSelector from "../../../../../../../../redux/hooks/useAppSelector";
+import { getCurrentAreaId } from "../../../../../../../../redux/selectors";
+import Form from "../../../../../../../common/Form";
+import {
+  InflowStructureFields,
+  getInflowStructureFields,
+  updatetInflowStructureFields,
+} from "./utils";
+import NumberFE from "../../../../../../../common/fieldEditors/NumberFE";
+import { SubmitHandlerPlus } from "../../../../../../../common/Form/types";
+import { Box } from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+function InflowStructure() {
+  const [t] = useTranslation();
+  const { study } = useOutletContext<{ study: StudyMetadata }>();
+  const areaId = useAppSelector(getCurrentAreaId);
+
+  ////////////////////////////////////////////////////////////////
+  // Event handlers
+  ////////////////////////////////////////////////////////////////
+
+  const handleSubmit = (data: SubmitHandlerPlus<InflowStructureFields>) => {
+    return updatetInflowStructureFields(study.id, areaId, data.values);
+  };
+
+  ////////////////////////////////////////////////////////////////
+  // JSX
+  ////////////////////////////////////////////////////////////////
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        width: 1,
+      }}
+    >
+      <Form
+        key={study.id + areaId}
+        config={{
+          defaultValues: () => getInflowStructureFields(study.id, areaId),
+        }}
+        onSubmit={handleSubmit}
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          py: 1,
+        }}
+        enableUndoRedo
+      >
+        {({ control }) => (
+          <NumberFE
+            label="Inter Monthly Correlation"
+            name="interMonthlyCorrelation"
+            control={control}
+            fullWidth
+            rules={{
+              min: {
+                value: 0,
+                message: t("form.field.minValue", { 0: 0 }),
+              },
+              max: {
+                value: 1,
+                message: t("form.field.maxValue", { 0: 1 }),
+              },
+            }}
+            inputProps={{ step: 0.1 }}
+          />
+        )}
+      </Form>
+    </Box>
+  );
+}
+
+export default InflowStructure;

webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/InflowStructure/utils.ts

@@ -0,0 +1,34 @@
+import { StudyMetadata } from "../../../../../../../../common/types";
+import client from "../../../../../../../../services/api/client";
+
+////////////////////////////////////////////////////////////////
+// Types
+////////////////////////////////////////////////////////////////
+
+export interface InflowStructureFields {
+  interMonthlyCorrelation: number;
+}
+
+////////////////////////////////////////////////////////////////
+// Utils
+////////////////////////////////////////////////////////////////
+
+function makeRequestURL(studyId: StudyMetadata["id"], areaId: string): string {
+  return `v1/studies/${studyId}/areas/${areaId}/hydro/inflowstructure`;
+}
+
+export async function getInflowStructureFields(
+  studyId: StudyMetadata["id"],
+  areaId: string,
+): Promise<InflowStructureFields> {
+  const res = await client.get(makeRequestURL(studyId, areaId));
+  return res.data;
+}
+
+export function updatetInflowStructureFields(
+  studyId: StudyMetadata["id"],
+  areaId: string,
+  values: InflowStructureFields,
+): Promise<void> {
+  return client.put(makeRequestURL(studyId, areaId), values);
+}