Update maxHeight of completion content (#969)

swisstopo · Jan 22, 2024 · 5f331fe · 5f331fe
2 parents c1ee702 + ea57306
commit 5f331fe
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 92 deletions.
diff --git a/src/client/src/commons/form/borehole/completion/backfill.js b/src/client/src/commons/form/borehole/completion/backfill.js
@@ -8,7 +8,7 @@ import {
   Tooltip,
   Typography,
 } from "@mui/material";
-import { AddButton } from "./styledComponents";
+import { AddButton, CompletionGrid } from "./styledComponents";
 import {
   getBackfills,
   addBackfill,
@@ -122,20 +122,7 @@ const Backfill = ({ isEditable, completionId }) => {
           )}
         </Stack>
       </Box>
-      <Grid
-        container
-        alignItems="stretch"
-        columnSpacing={{ xs: 2 }}
-        rowSpacing={{ xs: 2 }}
-        sx={{
-          width: "100%",
-          borderWidth: "1px",
-          borderColor: "black",
-          padding: "10px 10px 5px 10px",
-          marginBottom: "10px",
-          overflow: "auto",
-          maxHeight: "85vh",
-        }}>
+      <CompletionGrid>
         {displayedBackfills?.length > 0
           ? displayedBackfills
               ?.sort((a, b) => a.fromDepthM - b.fromDepthM)
@@ -198,7 +185,7 @@ const Backfill = ({ isEditable, completionId }) => {
                 </Typography>
               </Stack>
             )}
-      </Grid>
+      </CompletionGrid>
     </Stack>
   );
 };

diff --git a/src/client/src/commons/form/borehole/completion/casing.js b/src/client/src/commons/form/borehole/completion/casing.js
@@ -8,7 +8,7 @@ import {
   Tooltip,
   Typography,
 } from "@mui/material";
-import { AddButton } from "./styledComponents";
+import { AddButton, CompletionGrid } from "./styledComponents";
 import {
   getCasings,
   addCasing,
@@ -122,20 +122,7 @@ const Casing = ({ isEditable, completionId }) => {
           )}
         </Stack>
       </Box>
-      <Grid
-        container
-        alignItems="stretch"
-        columnSpacing={{ xs: 2 }}
-        rowSpacing={{ xs: 2 }}
-        sx={{
-          width: "100%",
-          borderWidth: "1px",
-          borderColor: "black",
-          padding: "10px 10px 5px 10px",
-          marginBottom: "10px",
-          overflow: "auto",
-          maxHeight: "85vh",
-        }}>
+      <CompletionGrid>
         {displayedCasings?.length > 0
           ? displayedCasings
               ?.sort((a, b) => a.fromDepthM - b.fromDepthM)
@@ -198,7 +185,7 @@ const Casing = ({ isEditable, completionId }) => {
                 </Typography>
               </Stack>
             )}
-      </Grid>
+      </CompletionGrid>
     </Stack>
   );
 };

diff --git a/src/client/src/commons/form/borehole/completion/completion.js b/src/client/src/commons/form/borehole/completion/completion.js
@@ -199,6 +199,7 @@ const Completion = props => {
           {isEditable && (
             <Tooltip title={t("add")}>
               <AddButton
+                sx={{ marginRight: "5px" }}
                 data-cy="add-completion-button"
                 onClick={addNewCompletion}>
                 {t("addCompletion")}

diff --git a/src/client/src/commons/form/borehole/completion/completionContent.js b/src/client/src/commons/form/borehole/completion/completionContent.js
@@ -29,51 +29,39 @@ const CompletionContent = ({ completion, isEditable }) => {
   };
 
   return (
-    <>
-      <Stack direction="column">
-        <Stack
-          direction="row"
-          justifyContent="space-between"
-          alignItems="center">
-          <CompletionTabs
-            value={state.index}
-            onChange={handleCompletionChanged}>
-            {tabTitels.map((item, index) => {
-              return (
-                <CompletionTab
-                  data-cy={"completion-content-header-tab-" + item.name}
-                  label={
-                    item.name === null || item.name === ""
-                      ? t("common:np")
-                      : item.name
-                  }
-                  key={index}
-                />
-              );
-            })}
-          </CompletionTabs>
-        </Stack>
-        <>
-          <CompletionBox>
-            {(state.index === 0 && (
-              <Casing completionId={completion.id} isEditable={isEditable} />
-            )) ||
-              (state.index === 1 && (
-                <Instrumentation
-                  completionId={completion.id}
-                  isEditable={isEditable}
-                />
-              )) ||
-              (state.index === 2 && (
-                <Backfill
-                  completionId={completion.id}
-                  isEditable={isEditable}
-                />
-              ))}
-          </CompletionBox>
-        </>
+    <Stack direction="column">
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <CompletionTabs value={state.index} onChange={handleCompletionChanged}>
+          {tabTitels.map((item, index) => {
+            return (
+              <CompletionTab
+                data-cy={"completion-content-header-tab-" + item.name}
+                label={
+                  item.name === null || item.name === ""
+                    ? t("common:np")
+                    : item.name
+                }
+                key={index}
+              />
+            );
+          })}
+        </CompletionTabs>
       </Stack>
-    </>
+      <CompletionBox>
+        {(state.index === 0 && (
+          <Casing completionId={completion.id} isEditable={isEditable} />
+        )) ||
+          (state.index === 1 && (
+            <Instrumentation
+              completionId={completion.id}
+              isEditable={isEditable}
+            />
+          )) ||
+          (state.index === 2 && (
+            <Backfill completionId={completion.id} isEditable={isEditable} />
+          ))}
+      </CompletionBox>
+    </Stack>
   );
 };
 

diff --git a/src/client/src/commons/form/borehole/completion/instrumentation.js b/src/client/src/commons/form/borehole/completion/instrumentation.js
@@ -8,7 +8,7 @@ import {
   Tooltip,
   Typography,
 } from "@mui/material";
-import { AddButton } from "./styledComponents";
+import { AddButton, CompletionGrid } from "./styledComponents";
 import {
   useInstrumentationMutations,
   useInstrumentations,
@@ -91,20 +91,7 @@ const Instrumentation = ({ isEditable, completionId }) => {
           )}
         </Stack>
       </Box>
-      <Grid
-        container
-        alignItems="stretch"
-        columnSpacing={{ xs: 2 }}
-        rowSpacing={{ xs: 2 }}
-        sx={{
-          width: "100%",
-          borderWidth: "1px",
-          borderColor: "black",
-          padding: "10px 10px 5px 10px",
-          marginBottom: "10px",
-          overflow: "auto",
-          maxHeight: "85vh",
-        }}>
+      <CompletionGrid>
         {displayedInstrumentations?.length > 0 ? (
           displayedInstrumentations
             ?.sort((a, b) => a.fromDepthM - b.fromDepthM)
@@ -158,7 +145,7 @@ const Instrumentation = ({ isEditable, completionId }) => {
             </Typography>
           </Stack>
         )}
-      </Grid>
+      </CompletionGrid>
     </Stack>
   );
 };

diff --git a/src/client/src/commons/form/borehole/completion/styledComponents.js b/src/client/src/commons/form/borehole/completion/styledComponents.js
@@ -2,6 +2,7 @@ import React, { forwardRef } from "react";
 import {
   Box,
   Button,
+  Grid,
   IconButton,
   Stack,
   Tabs,
@@ -68,6 +69,7 @@ export const BdmsButton = styled(Button)({
   textTransform: "none",
   color: "rgba(0, 0, 0, 0.8)",
   borderColor: "rgba(0, 0, 0, 0.8)",
+  marginBottom: "10px",
   "&:hover, &.Mui-focusVisible, &:active, &:focus, &:focus-visible": {
     borderColor: "rgba(0, 0, 0, 0.8)",
     backgroundColor: "rgba(0, 0, 0, 0.05)",
@@ -118,3 +120,27 @@ export const CompletionTab = styled(props => <Tab disableRipple {...props} />)(
     },
   }),
 );
+
+export const CompletionGrid = forwardRef((props, ref) => {
+  const StyledGrid = styled(Grid)(() => ({
+    width: "100%",
+    borderWidth: "1px",
+    borderColor: "black",
+    padding: "10px 10px 5px 10px",
+    marginBottom: "10px",
+    overflow: "auto",
+    maxHeight: "65vh",
+    alignItems: "stretch",
+  }));
+
+  return (
+    <StyledGrid
+      ref={ref}
+      {...props}
+      container
+      columnSpacing={{ xs: 2 }}
+      rowSpacing={{ xs: 2 }}>
+      {props.children}
+    </StyledGrid>
+  );
+});