Fix style of workgroup select and bulkedit form after changing textfi… (

#1601)
swisstopo · Oct 22, 2024 · 6d5493d · 6d5493d
2 parents 320ea36 + 3e025ec
commit 6d5493d
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 20 deletions.
diff --git a/src/client/src/components/legacyComponents/bulkedit/bulkEditForm.tsx b/src/client/src/components/legacyComponents/bulkedit/bulkEditForm.tsx
@@ -149,13 +149,12 @@ export const BulkEditForm = ({ selected, loadBoreholes }: BulkEditFormProps) =>
 
   const renderInput = useCallback(
     (field: BulkEditFormField) => {
-      if (field.type === FormValueType.Workgroup) return;
       if (field.type === FormValueType.Domain) {
         return (
           <FormDomainSelect
             canReset={false}
             fieldName={field.api ?? field.fieldName}
-            label={field.fieldName}
+            label=""
             schemaName={field?.domain ?? field.api ?? field.fieldName}
             onUpdate={e => {
               onFieldValueChange(field, e);
@@ -169,25 +168,35 @@ export const BulkEditForm = ({ selected, loadBoreholes }: BulkEditFormProps) =>
           <FormBooleanSelect
             canReset={false}
             fieldName={field.api ?? field.fieldName}
-            label={field.fieldName}
+            label=""
             onUpdate={e => {
               onFieldValueChange(field, e);
             }}
           />
         );
       }
+      if (field.fieldName === FormValueType.Workgroup) {
+        return (
+          <WorkgroupSelect
+            workgroupId={workgroupId}
+            enabledWorkgroups={enabledWorkgroups}
+            setWorkgroupId={setWorkgroupId}
+            hideLabel={true}
+          />
+        );
+      }
       return (
         <FormInput
           fieldName={field.api ?? field.fieldName}
-          label={field.fieldName}
+          label=""
           type={field.type}
           onUpdate={e => {
             onFieldValueChange(field, e);
           }}
         />
       );
     },
-    [onFieldValueChange],
+    [onFieldValueChange, workgroupId, enabledWorkgroups],
   );
 
   return (
@@ -235,18 +244,9 @@ export const BulkEditForm = ({ selected, loadBoreholes }: BulkEditFormProps) =>
                         </Typography>
                       </Stack>
                     </AccordionSummary>
-                    <AccordionDetails sx={{ pl: 5, pr: 3 }}>
+                    <AccordionDetails sx={{ pl: 5, pr: 3, mt: -4 }}>
                       <StackFullWidth>
-                        <>
-                          {renderInput(field)}
-                          {field.fieldName === FormValueType.Workgroup && (
-                            <WorkgroupSelect
-                              workgroupId={workgroupId}
-                              enabledWorkgroups={enabledWorkgroups}
-                              setWorkgroupId={setWorkgroupId}
-                            />
-                          )}
-                        </>
+                        <>{renderInput(field)}</>
                       </StackFullWidth>
                     </AccordionDetails>
                   </Accordion>

diff --git a/src/client/src/pages/overview/boreholeTable/bottomBar.tsx b/src/client/src/pages/overview/boreholeTable/bottomBar.tsx
@@ -63,7 +63,7 @@ const BottomBar = ({
           workgroupId={workgroup}
           enabledWorkgroups={enabledWorkgroups}
           setWorkgroupId={setWorkgroup}
-          sx={{ pt: 4, pb: 3 }}
+          sx={{ pt: 6, pb: 3 }}
         />,
       );
     }

diff --git a/src/client/src/pages/overview/sidePanelContent/commons/actionsInterfaces.ts b/src/client/src/pages/overview/sidePanelContent/commons/actionsInterfaces.ts
@@ -12,6 +12,7 @@ export interface WorkgroupSelectProps {
   workgroupId: number | null;
   enabledWorkgroups: Workgroup[];
   setWorkgroupId: React.Dispatch<React.SetStateAction<number | null>>;
+  hideLabel?: boolean;
   sx?: SxProps;
 }
 

diff --git a/src/client/src/pages/overview/sidePanelContent/commons/workgroupSelect.tsx b/src/client/src/pages/overview/sidePanelContent/commons/workgroupSelect.tsx
@@ -3,11 +3,11 @@ import { Box, FormControl, InputLabel, MenuItem, Select } from "@mui/material/";
 import { theme } from "../../../../AppTheme.ts";
 import { WorkgroupSelectProps } from "./actionsInterfaces.ts";
 
-const WorkgroupSelect = ({ workgroupId, enabledWorkgroups, setWorkgroupId, sx }: WorkgroupSelectProps) => {
+const WorkgroupSelect = ({ workgroupId, enabledWorkgroups, setWorkgroupId, sx, hideLabel }: WorkgroupSelectProps) => {
   const { t } = useTranslation();
   return (
     <>
-      <Box sx={{ ...sx, backgroundColor: theme.palette.background.default }}>
+      <Box sx={{ pt: 2, backgroundColor: theme.palette.background.default, ...sx }}>
         {(() => {
           const wg = enabledWorkgroups;
           if (wg === undefined) {
@@ -27,7 +27,7 @@ const WorkgroupSelect = ({ workgroupId, enabledWorkgroups, setWorkgroupId, sx }:
             }));
           return (
             <FormControl variant="outlined" sx={{ width: "100%" }}>
-              <InputLabel id="workgroup-label">{t("workgroup")}</InputLabel>
+              {!hideLabel && <InputLabel id="workgroup-label">{t("workgroup")}</InputLabel>}
               <Select
                 size="small"
                 label={t("workgroup")}