Create new scenario (#1068)

* Add new button to scenario table * scenario form new values and support POST request * Make ScenarioResult not require for scenario uuid anymore
nens · Jun 3, 2022 · f77fcaf · f77fcaf
1 parent c76b317
commit f77fcaf
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 100 deletions.
diff --git a/src/components/TableStateContainer.tsx b/src/components/TableStateContainer.tsx
@@ -361,9 +361,9 @@ function TableStateContainer<TableRowType extends { uuid: string; checkboxChecke
         ) : (
           <div />
         )}
-        <div>
+        <div style={{ display: "flex" }}>
           {queryCheckBox ? (
-            <span
+            <div
               style={{
                 display: "flex",
                 alignItems: "center",
@@ -380,7 +380,7 @@ function TableStateContainer<TableRowType extends { uuid: string; checkboxChecke
                 }}
                 size={32}
               />
-            </span>
+            </div>
           ) : null}
           {customTableButton ? (
             <button

diff --git a/src/data_management/scenarios/scenarios/NewScenario.tsx b/src/data_management/scenarios/scenarios/NewScenario.tsx
@@ -0,0 +1,5 @@
+import ScenarioForm from "./ScenarioForm";
+
+export const NewScenario = () => {
+  return <ScenarioForm />
+};
diff --git a/src/data_management/scenarios/scenarios/ScenarioForm.tsx b/src/data_management/scenarios/scenarios/ScenarioForm.tsx
@@ -22,8 +22,8 @@ import threediIcon from "../../../images/[email protected]";
 import formStyles from "./../../../styles/Forms.module.css";
 
 interface Props {
-  currentRecord: Scenario;
-  selectedProject: Project | null;
+  currentRecord?: Scenario;
+  selectedProject?: Project | null;
 }
 interface PropsFromDispatch {
   addNotification: (message: string | number, timeout: number) => void;
@@ -51,7 +51,7 @@ const ScenarioForm: React.FC<Props & PropsFromDispatch & RouteComponentProps<Rou
   const organisations = useSelector(getOrganisations).available;
   const organisationsToSwitchTo = organisations.filter((org) => org.roles.includes("admin"));
 
-  const initialValues = {
+  const initialValues = currentRecord ? {
     name: currentRecord.name,
     uuid: currentRecord.uuid,
     description: currentRecord.description,
@@ -66,6 +66,21 @@ const ScenarioForm: React.FC<Props & PropsFromDispatch & RouteComponentProps<Rou
     organisation: currentRecord.organisation ? convertToSelectObject(currentRecord.organisation.uuid, currentRecord.organisation.name) : null,
     accessModifier: currentRecord.access_modifier,
     extraMetadata: JSON.stringify(currentRecord.extra_metadata),
+  } : {
+    name: null,
+    uuid: null,
+    description: null,
+    source: "3Di",
+    project: null,
+    simulationStart: null,
+    simulationEnd: null,
+    simulationIdentifier: null,
+    modelName: null,
+    modelIdentifier: null,
+    modelRevision: null,
+    organisation: selectedOrganisation ? convertToSelectObject(selectedOrganisation.uuid, selectedOrganisation.name) : null,
+    accessModifier: "Private",
+    extraMetadata: null,
   };
 
   const onSubmit = (values: Values) => {
@@ -85,23 +100,46 @@ const ScenarioForm: React.FC<Props & PropsFromDispatch & RouteComponentProps<Rou
       extra_metadata: values.extraMetadata ? JSON.parse(values.extraMetadata) : {},
     };
 
-    fetch(`/api/v4/scenarios/${currentRecord.uuid}/`, {
-      credentials: "same-origin",
-      method: "PATCH",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(body),
-    })
-      .then((data) => {
-        const status = data.status;
-        if (status === 200) {
-          props.addNotification("Success! Scenario updated", 2000);
-          props.history.push(navigationUrl);
-        } else {
-          props.addNotification(status, 2000);
-          console.error(data);
-        }
+    if (!currentRecord) {
+      fetch("/api/v4/scenarios/", {
+        credentials: "same-origin",
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
       })
-      .catch(console.error);
+        .then((response) => {
+          const status = response.status;
+          if (status === 201) {
+            props.addNotification("Success! New scenario created", 2000);
+            props.history.push(navigationUrl);
+          } else if (status === 403) {
+            props.addNotification("Not authorized", 2000);
+            console.error(response);
+          } else {
+            props.addNotification(status, 2000);
+            console.error(response);
+          }
+        })
+        .catch(console.error);
+    } else {
+      fetch(`/api/v4/scenarios/${currentRecord.uuid}/`, {
+        credentials: "same-origin",
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      })
+        .then((data) => {
+          const status = data.status;
+          if (status === 200) {
+            props.addNotification("Success! Scenario updated", 2000);
+            props.history.push(navigationUrl);
+          } else {
+            props.addNotification(status, 2000);
+            console.error(data);
+          }
+        })
+        .catch(console.error);
+    }
   };
 
   const {
@@ -247,7 +285,7 @@ const ScenarioForm: React.FC<Props & PropsFromDispatch & RouteComponentProps<Rou
         <span className={formStyles.FormFieldTitle}>2: Data</span>
         <ScenarioResult
           name={"results"}
-          uuid={currentRecord.uuid}
+          uuid={currentRecord ? currentRecord.uuid : undefined}
           formSubmitted={formSubmitted}
           onFocus={handleFocus}
           onBlur={handleBlur}

diff --git a/src/data_management/scenarios/scenarios/ScenarioTable.tsx b/src/data_management/scenarios/scenarios/ScenarioTable.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useSelector } from "react-redux";
-import { NavLink } from "react-router-dom";
+import { NavLink, RouteComponentProps } from "react-router-dom";
 import TableStateContainer from "../../../components/TableStateContainer";
 import TableActionButtons from "../../../components/TableActionButtons";
 import { ExplainSideColumn } from "../../../components/ExplainSideColumn";
@@ -33,7 +33,7 @@ const fetchRawDataWithOptions = (uuids: string[], fetchOptions: RequestInit) =>
   return Promise.all(fetches);
 };
 
-export const ScenarioTable = () => {
+export const ScenarioTable = (props: RouteComponentProps) => {
   const [rowsToBeDeleted, setRowsToBeDeleted] = useState<Scenario[]>([]);
   const [rowsWithRawDataToBeDeleted, setRowsWithRawDataToBeDeleted] = useState<Scenario[]>([]);
   const [resetTable, setResetTable] = useState<Function | null>(null);
@@ -197,6 +197,11 @@ export const ScenarioTable = () => {
     },
   ];
 
+  const handleNewClick = () => {
+    const { history } = props;
+    history.push(`${navigationUrl}/new`);
+  };
+
   return (
     <ExplainSideColumn
       imgUrl={threediIcon}
@@ -209,6 +214,7 @@ export const ScenarioTable = () => {
         gridTemplateColumns={"4fr 25fr 30fr 10fr 14fr 10fr 4fr"}
         columnDefinitions={columnDefinitions}
         baseUrl={`${baseUrl}?${projectUuid ? `project__uuid=${projectUuid}&` : ''}`}
+        newItemOnClick={handleNewClick}
         checkBoxActions={[
           {
             displayValue: "Change rights",

diff --git a/src/form/ScenarioResult.tsx b/src/form/ScenarioResult.tsx
@@ -30,7 +30,7 @@ interface Results {
 
 interface MyProps {
   name: string;
-  uuid: string;
+  uuid: string | undefined;
   formSubmitted?: boolean;
   onFocus?: (e: React.FocusEvent<HTMLButtonElement>) => void;
   onBlur?: () => void;
@@ -179,91 +179,93 @@ export const ScenarioResult: React.FC<MyProps> = (props) => {
 
   // useEffect to fetch different results of scenario
   useEffect(() => {
-    setRawResults({
-      isFetching: true,
-      scheduledForBulkDeletion: false,
-      results: [],
-    });
-    setBasicResults({
-      isFetching: true,
-      scheduledForBulkDeletion: false,
-      results: [],
-    });
-    setArrivalResults({
-      isFetching: true,
-      scheduledForBulkDeletion: false,
-      results: [],
-    });
-    setDamageResults({
-      isFetching: true,
-      scheduledForBulkDeletion: false,
-      results: [],
-    });
-
-    fetchScenarioRawResults(uuid).then((res) =>
+    if (uuid) {
       setRawResults({
-        isFetching: false,
+        isFetching: true,
         scheduledForBulkDeletion: false,
-        results: res.results.map((result: ScenarioResultApiResponse) => {
-          return {
-            id: result.id,
-            name: result.name,
-            scheduledForDeletion: false,
-            raster: result.raster,
-          };
-        }),
-      })
-    );
-
-    fetchScenarioBasicResults(uuid).then((res) =>
+        results: [],
+      });
       setBasicResults({
-        isFetching: false,
+        isFetching: true,
         scheduledForBulkDeletion: false,
-        results: res.results.map((result: ScenarioResultApiResponse) => {
-          return {
-            id: result.id,
-            name: result.name,
-            scheduledForDeletion: false,
-            raster: result.raster,
-          };
-        }),
-      })
-    );
-
-    fetchScenarioArrivalResults(uuid).then((res) =>
+        results: [],
+      });
       setArrivalResults({
-        isFetching: false,
+        isFetching: true,
         scheduledForBulkDeletion: false,
-        results: res.results.map((result: ScenarioResultApiResponse) => {
-          return {
-            id: result.id,
-            name: result.name,
-            scheduledForDeletion: false,
-            raster: result.raster,
-          };
-        }),
-      })
-    );
-
-    fetchScenarioDamageResults(uuid).then((res) =>
+        results: [],
+      });
       setDamageResults({
-        isFetching: false,
+        isFetching: true,
         scheduledForBulkDeletion: false,
-        results: res.results.map((result: ScenarioResultApiResponse) => {
-          return {
-            id: result.id,
-            name: result.name,
-            scheduledForDeletion: false,
-            raster: result.raster,
-          };
-        }),
-      })
-    );
+        results: [],
+      });
+
+      fetchScenarioRawResults(uuid).then((res) =>
+        setRawResults({
+          isFetching: false,
+          scheduledForBulkDeletion: false,
+          results: res.results.map((result: ScenarioResultApiResponse) => {
+            return {
+              id: result.id,
+              name: result.name,
+              scheduledForDeletion: false,
+              raster: result.raster,
+            };
+          }),
+        })
+      );
+
+      fetchScenarioBasicResults(uuid).then((res) =>
+        setBasicResults({
+          isFetching: false,
+          scheduledForBulkDeletion: false,
+          results: res.results.map((result: ScenarioResultApiResponse) => {
+            return {
+              id: result.id,
+              name: result.name,
+              scheduledForDeletion: false,
+              raster: result.raster,
+            };
+          }),
+        })
+      );
+
+      fetchScenarioArrivalResults(uuid).then((res) =>
+        setArrivalResults({
+          isFetching: false,
+          scheduledForBulkDeletion: false,
+          results: res.results.map((result: ScenarioResultApiResponse) => {
+            return {
+              id: result.id,
+              name: result.name,
+              scheduledForDeletion: false,
+              raster: result.raster,
+            };
+          }),
+        })
+      );
+
+      fetchScenarioDamageResults(uuid).then((res) =>
+        setDamageResults({
+          isFetching: false,
+          scheduledForBulkDeletion: false,
+          results: res.results.map((result: ScenarioResultApiResponse) => {
+            return {
+              id: result.id,
+              name: result.name,
+              scheduledForDeletion: false,
+              raster: result.raster,
+            };
+          }),
+        })
+      );
+    }
   }, [uuid]);
 
   // useEffect for deletion of selected results when form is submitted
   useEffect(() => {
-    if (formSubmitted === true) {
+    if (formSubmitted && uuid) {
       // Delete results in bulks
       if (rawResults.scheduledForBulkDeletion) deleteScenarioRawResults(uuid);
       if (basicResults.scheduledForBulkDeletion) deleteScenarioBasicResults(uuid);

diff --git a/src/home/Routes.tsx b/src/home/Routes.tsx
@@ -17,6 +17,7 @@ import { EditProject } from "../data_management/scenarios/projects/EditProject";
 import { NewProject } from "../data_management/scenarios/projects/NewProject";
 import { ScenarioTable } from "../data_management/scenarios/scenarios/ScenarioTable";
 import { EditScenario } from "../data_management/scenarios/scenarios/EditScenario";
+import { NewScenario } from "../data_management/scenarios/scenarios/NewScenario";
 import { EditWmsLayer } from "../data_management/wms_layers/EditWmsLayer";
 import { NewWmsLayer } from "../data_management/wms_layers/NewWmsLayer";
 import { TimeseriesTable } from "../data_management/timeseries/timeseries/TimeseriesTable";
@@ -56,7 +57,6 @@ import { GeoBlockTable } from "../data_management/geoblocks/GeoBlockTable";
 import { NewGeoBlock } from "../data_management/geoblocks/NewGeoBlock";
 import { EditGeoBlock } from "../data_management/geoblocks/EditGeoBlock";
 import SpinnerIfStandardSelectorsNotLoaded from "../components/SpinnerIfStandardSelectorsNotLoaded";
-// import { ViewContract } from '../contracts/ViewContract';
 
 const authenticatedRoutes = () => {
   return (
@@ -183,6 +183,11 @@ const authenticatedRoutes = () => {
           path="/management/data_management/scenarios/scenarios"
           component={ScenarioTable}
         />
+        <Route
+          exact
+          path="/management/data_management/scenarios/scenarios/new"
+          component={NewScenario}
+        />
         <Route
           exact
           path="/management/data_management/scenarios/scenarios/:uuid"