Add workgroup select to copy borehole

src/client/public/locale/de/common.json

@@ -376,6 +376,7 @@
   "section_name": "Sektionsname",
   "sections": "Sektionen",
   "selectAll": "Alle auswählen",
+  "selectWorkgroupToCreateCopy": "Wählen Sie eine Arbeitsgruppe aus, um eine Kopie zu erstellen.",
   "selectedCount": "{{count}} ausgewählt",
   "show": "{{what}} anzeigen",
   "showAll": "Alle anzeigen",

src/client/public/locale/en/common.json

@@ -377,6 +377,7 @@
   "section_name": "Section name",
   "sections": "Sections",
   "selectAll": "Select all",
+  "selectWorkgroupToCreateCopy": "Select a workgroup to create a copy.",
   "selectedCount": "{{count}} selected",
   "show": "Show {{what}}",
   "showAll": "Show all",

src/client/public/locale/fr/common.json

@@ -376,6 +376,7 @@
   "section_name": "Nom de la section",
   "sections": "Sections",
   "selectAll": "Tout sélectionner",
+  "selectWorkgroupToCreateCopy": "Sélectionnez le groupe de travail pour créer une copie.",
   "selectedCount": "{{count}} sélectionnés",
   "show": "Afficher {{what}}",
   "showAll": "Afficher tout",

src/client/public/locale/it/common.json

@@ -376,6 +376,7 @@
   "section_name": "Nome della sezione",
   "sections": "Sezioni",
   "selectAll": "Seleziona tutto",
+  "selectWorkgroupToCreateCopy": "Seleziona un gruppo di lavoro per creare una copia.",
   "selectedCount": "{{count}} selezionati",
   "show": "Mostra {{what}}",
   "showAll": "Mostra tutti",

src/client/src/components/buttons/buttons.tsx

@@ -3,7 +3,7 @@ import TranslationText from "../legacyComponents/translationText";
 import { Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import EditIcon from "../../assets/icons/edit.svg?react";
-import CopyIcon from "@mui/icons-material/ContentCopy";
+import CopyIcon from "../../assets/icons/copy.svg?react";
 import CloseIcon from "@mui/icons-material/Close";
 import SaveIcon from "@mui/icons-material/Save";
 import TrashIcon from "../../assets/icons/trash.svg?react";

src/client/src/components/prompt/prompt.tsx

@@ -4,21 +4,22 @@ import { PromptContext } from "./promptContext.js";
 import { BdmsButton } from "../buttons/buttons.tsx";
 
 export const Prompt = () => {
-  const { promptIsOpen, message, actions, closePrompt } = useContext(PromptContext);
+  const { promptIsOpen, message, actions, dialogContent, dialogWidth, closePrompt } = useContext(PromptContext);
   return (
     <Dialog
       open={promptIsOpen}
       data-cy="prompt"
       sx={{
         margin: "auto",
-        width: "326px",
+        width: dialogWidth ?? "326px",
         position: "absolute",
         "& .MuiDialog-paper": {
           p: 3,
         },
       }}>
       <DialogContent sx={{ p: 0 }}>
         <DialogContentText>{message}</DialogContentText>
+        {dialogContent && <div style={{ marginBottom: "16px" }}>{dialogContent}</div>}
       </DialogContent>
       <DialogActions sx={{ pr: 0, pb: 0, pt: 2 }}>
         <Stack direction="row" spacing={2}>

src/client/src/components/prompt/promptContext.tsx

@@ -1,21 +1,30 @@
-import { createContext, FC, useState } from "react";
+import { createContext, FC, ReactNode, useState } from "react";
 import { PromptAction, PromptContextInterface, PromptOptions, PromptProviderProps } from "./promptInterface";
 
 export const PromptContext = createContext<PromptContextInterface>({
   message: "",
   actions: [],
   promptIsOpen: false,
+  dialogContent: null,
+  dialogWidth: null,
   showPrompt: () => {},
   closePrompt: () => {},
 });
 
 export const PromptProvider: FC<PromptProviderProps> = ({ children }) => {
   const [prompt, setPrompt] = useState<PromptOptions>();
 
-  const showPrompt = (message: string, actions: PromptAction[]) => {
+  const showPrompt = (
+    message: string,
+    actions: PromptAction[],
+    dialogContent: ReactNode = null,
+    dialogWidth: string | null = null,
+  ) => {
     setPrompt({
       message: message,
       actions: actions,
+      dialogContent: dialogContent,
+      dialogWidth: dialogWidth,
     });
   };
 
@@ -29,6 +38,8 @@ export const PromptProvider: FC<PromptProviderProps> = ({ children }) => {
         promptIsOpen: prompt?.message != null,
         message: prompt?.message,
         actions: prompt?.actions,
+        dialogContent: prompt?.dialogContent,
+        dialogWidth: prompt?.dialogWidth ?? null,
         showPrompt,
         closePrompt,
       }}>

src/client/src/components/prompt/promptInterface.ts

@@ -15,13 +15,17 @@ export interface PromptAction {
 
 export interface PromptContextInterface {
   message?: string;
+  dialogContent?: ReactNode;
+  dialogWidth?: string | null;
   actions?: PromptAction[];
   promptIsOpen: boolean;
-  showPrompt: (message: string, actions: PromptAction[]) => void;
+  showPrompt: (message: string, actions: PromptAction[], dialogContent?: ReactNode, dialogWidth?: string) => void;
   closePrompt: () => void;
 }
 
 export interface PromptOptions {
   message: string;
   actions: PromptAction[];
+  dialogContent: ReactNode;
+  dialogWidth: string | null;
 }

src/client/src/pages/detail/form/borehole/geometryImport.jsx

@@ -21,7 +21,7 @@ import {
 } from "../../../../api/fetchApiV2.js";
 import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
 import { FormSelect } from "../../../../components/form/form.js";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import CopyIcon from "../../../../assets/icons/copy.svg?react";
 import { AlertContext } from "../../../../components/alert/alertContext.tsx";
 import { StackHalfWidth } from "../../../../components/styledComponents.js";
 import { DevTool } from "../../../../../hookformDevtools.ts";
@@ -97,7 +97,7 @@ const GeometryImport = ({ boreholeId }) => {
                             <InputAdornment position="end">
                               <Tooltip title={t("copyToClipboard")}>
                                 <IconButton onClick={() => navigator.clipboard.writeText(expectedCSVHeader)}>
-                                  <ContentCopyIcon />
+                                  <CopyIcon />
                                 </IconButton>
                               </Tooltip>
                             </InputAdornment>

src/client/src/pages/overview/boreholeTable/bottomBar.tsx

@@ -1,16 +1,18 @@
-import { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { Box, Button, Stack, Typography } from "@mui/material";
 import ArrowDownIcon from "../../../assets/icons/arrow_down.svg?react";
 import ArrowUpIcon from "../../../assets/icons/arrow_up.svg?react";
 import TrashIcon from "../../../assets/icons/trash.svg?react";
-
+import CopyIcon from "../../../assets/icons/copy.svg?react";
 import { BoreholeNumbersPreview } from "./boreholeNumbersPreview.tsx";
 import { useTranslation } from "react-i18next";
 import { theme } from "../../../AppTheme.ts";
-import { Boreholes } from "../../../api-lib/ReduxStateInterfaces.ts";
+import { Boreholes, ReduxRootState, User } from "../../../api-lib/ReduxStateInterfaces.ts";
 import { BulkEditButton, CopyButton, DeleteButton } from "../../../components/buttons/buttons.tsx";
 import { GridRowSelectionModel } from "@mui/x-data-grid";
 import { PromptContext } from "../../../components/prompt/promptContext.tsx";
+import WorkgroupSelect from "../sidePanelContent/commons/workgroupSelect.tsx";
+import { useSelector } from "react-redux";
 
 interface BottomBarProps {
   toggleBottomDrawer: (open: boolean) => void;
@@ -21,6 +23,8 @@ interface BottomBarProps {
   search: { filter: string };
   onDeleteMultiple: () => void;
   onCopyBorehole: () => void;
+  workgroup: number | null;
+  setWorkgroup: React.Dispatch<React.SetStateAction<number | null>>;
 }
 
 const BottomBar = ({
@@ -32,15 +36,44 @@ const BottomBar = ({
   search,
   onCopyBorehole,
   boreholes,
+  workgroup,
+  setWorkgroup,
 }: BottomBarProps) => {
   const { t } = useTranslation();
   const { showPrompt } = useContext(PromptContext);
+  const user: User = useSelector((state: ReduxRootState) => state.core_user);
+  const enabledWorkgroups = user.data.workgroups.filter(
+    w => w.disabled === null && !w.supplier && w.roles.includes("EDIT"),
+  );
+
+  function showCopyPromptForSelectedWorkgroup() {
+    showPrompt(
+      t("selectWorkgroupToCreateCopy"),
+      [
+        {
+          label: t("cancel"),
+        },
+        {
+          label: "copy",
+          icon: <CopyIcon />,
+          variant: "contained",
+          action: onCopy,
+        },
+      ],
+      <WorkgroupSelect workgroup={workgroup} enabledWorkgroups={enabledWorkgroups} setWorkgroup={setWorkgroup} />,
+      "400px",
+    );
+  }
+
+  useEffect(() => {
+    if (selectionModel.length > 0) showCopyPromptForSelectedWorkgroup();
+  }, [workgroup]);
 
   function bulkEditSelected() {
     multipleSelected(selectionModel, search.filter);
   }
 
-  function copySelected() {
+  function onCopy() {
     onCopyBorehole();
   }
 
@@ -76,7 +109,7 @@ const BottomBar = ({
               )
             }
           />
-          {selectionModel.length === 1 && <CopyButton onClick={copySelected} />}
+          {selectionModel.length === 1 && <CopyButton onClick={() => showCopyPromptForSelectedWorkgroup()} />}
           <BulkEditButton label={"bulkEditing"} onClick={bulkEditSelected} />
           <Typography variant="subtitle1"> {t("selectedCount", { count: selectionModel.length })}</Typography>
         </Stack>

src/client/src/pages/overview/boreholeTable/bottomBarContainer.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useContext, useEffect, useState } from "react";
-import { useSelector } from "react-redux";
 import { useHistory } from "react-router-dom";
 import { BoreholeTable } from "./boreholeTable.tsx";
 import BottomBar from "./bottomBar.tsx";
@@ -9,6 +8,7 @@ import { Boreholes, ReduxRootState, User } from "../../../api-lib/ReduxStateInte
 import { FilterContext } from "../sidePanelContent/filter/filterContext.tsx";
 import { deleteBoreholes } from "../../../api-lib";
 import { copyBorehole } from "../../../api/fetchApiV2";
+import { useSelector } from "react-redux";
 
 interface BottomBarContainerProps {
   boreholes: Boreholes;
@@ -34,6 +34,8 @@ const BottomBarContainer = ({
   onHover,
   rowToHighlight,
 }: BottomBarContainerProps) => {
+  const user: User = useSelector((state: ReduxRootState) => state.core_user);
+  const [workgroupId, setWorkgroupId] = useState<number | null>(user.data.workgroups[0]?.id);
   const [isBusy, setIsBusy] = useState(false);
   const [bottomDrawerOpen, setBottomDrawerOpen] = useState(false);
   const [paginationModel, setPaginationModel] = useState({
@@ -51,8 +53,6 @@ const BottomBarContainer = ({
 
   const history = useHistory();
 
-  const user: User = useSelector((state: ReduxRootState) => state.core_user);
-
   const reloadBoreholes = useCallback(() => {
     loadEditingBoreholes(
       paginationModel.page + 1, // MUI Datagrid pagination starts at 0, whereas server pagination starts at 1
@@ -70,8 +70,7 @@ const BottomBarContainer = ({
 
   const onCopyBorehole = async () => {
     setIsBusy(true);
-    const workgroup = user.data.workgroups.filter(w => w.disabled === null && !w.supplier && w.roles.includes("EDIT"));
-    const newBoreholeId = await copyBorehole(selectionModel, workgroup[0].id);
+    const newBoreholeId = await copyBorehole(selectionModel, workgroupId);
     setIsBusy(false);
     history.push(`/${newBoreholeId}/borehole`);
   };
@@ -100,6 +99,8 @@ const BottomBarContainer = ({
         onDeleteMultiple={onDeleteMultiple}
         search={search}
         boreholes={boreholes}
+        workgroup={workgroupId}
+        setWorkgroup={setWorkgroupId}
       />
       <BottomDrawer drawerOpen={bottomDrawerOpen}>
         <BoreholeTable