feat: move blocks between categories

api/src/chat/repositories/block.repository.ts

@@ -89,12 +89,26 @@ export class BlockRepository extends BaseRepository<
       Block,
       'findOneAndUpdate'
     >,
-    _criteria: TFilterQuery<Block>,
+    criteria: TFilterQuery<Block>,
     _updates:
       | UpdateWithAggregationPipeline
       | UpdateQuery<Document<Block, any, any>>,
   ): Promise<void> {
     const updates: BlockUpdateDto = _updates?.['$set'];
+    if (updates?.category) {
+      const movedBlockId = criteria._id;
+
+      // Find and update blocks that reference the moved block
+      await this.model.updateMany(
+        { nextBlocks: movedBlockId },
+        { $pull: { nextBlocks: movedBlockId } },
+      );
+
+      await this.model.updateMany(
+        { attachedBlock: movedBlockId },
+        { $set: { attachedBlock: null } },
+      );
+    }
 
     this.checkDeprecatedAttachmentUrl(updates);
   }

frontend/public/locales/en/translation.json

@@ -106,7 +106,8 @@
     "no_label_found": "No label found",
     "code_is_required": "Language code is required",
     "text_is_required": "Text is required",
-    "invalid_file_type": "Invalid file type"
+    "invalid_file_type": "Invalid file type",
+    "select_category": "Select a flow"
   },
   "menu": {
     "terms": "Terms of Use",
@@ -505,6 +506,7 @@
     "rename": "Rename",
     "duplicate": "Duplicate",
     "remove": "Remove",
+    "move": "Move",
     "remove_permanently": "Remove",
     "restore": "Restore",
     "edit": "Edit",

frontend/public/locales/fr/translation.json

@@ -106,7 +106,8 @@
     "no_label_found": "Aucune étiquette trouvée",
     "code_is_required": "Le code est requis",
     "text_is_required": "Texte requis",
-    "invalid_file_type": "Type de fichier invalide"
+    "invalid_file_type": "Type de fichier invalide",
+    "select_category": "Sélectionner une catégorie"
   },
   "menu": {
     "terms": "Conditions d'utilisation",
@@ -506,6 +507,7 @@
     "rename": "Renommer",
     "duplicate": "Dupliquer",
     "remove": "Supprimer",
+    "move": "Déplacer",
     "remove_permanently": "Supprimer de façon permanente",
     "restore": "Restaurer",
     "edit": "Modifier",

frontend/src/app-components/dialogs/MoveDialog.tsx

@@ -0,0 +1,86 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  Grid,
+  MenuItem,
+  Select,
+} from "@mui/material";
+import { FC, useState } from "react";
+
+import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
+import { DialogControl } from "@/hooks/useDialog";
+import { useTranslate } from "@/hooks/useTranslate";
+import { ICategory } from "@/types/category.types";
+
+export interface MoveDialogProps extends DialogControl<string> {
+  categories: ICategory[];
+  callback?: (newCategoryId?: string) => Promise<void>;
+  openDialog: (data?: string) => void;
+}
+
+export const MoveDialog: FC<MoveDialogProps> = ({
+  open,
+  callback,
+  closeDialog,
+  categories,
+}: MoveDialogProps) => {
+  const { t } = useTranslate();
+  const [selectedCategoryId, setSelectedCategoryId] = useState<string>("");
+  const handleMove = async () => {
+    if (selectedCategoryId && callback) {
+      await callback(selectedCategoryId);
+      closeDialog();
+    }
+  };
+
+  return (
+    <Dialog open={open} fullWidth onClose={closeDialog}>
+      <DialogTitle onClose={closeDialog}>
+        {t("message.select_category")}
+      </DialogTitle>
+      <DialogContent>
+        <Grid container direction="column" gap={2}>
+          <Grid item>
+            <Select
+              value={selectedCategoryId}
+              onChange={(e) => setSelectedCategoryId(e.target.value as string)}
+              fullWidth
+              displayEmpty
+            >
+              <MenuItem value="" disabled>
+                {t("label.category")}
+              </MenuItem>
+              {categories.map((category) => (
+                <MenuItem key={category.id} value={category.id}>
+                  {category.label}
+                </MenuItem>
+              ))}
+            </Select>
+          </Grid>
+        </Grid>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          onClick={handleMove}
+          disabled={!selectedCategoryId}
+        >
+          {t("button.move")}
+        </Button>
+        <Button variant="outlined" onClick={closeDialog}>
+          {t("button.cancel")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

frontend/src/components/visual-editor/v2/Diagrams.tsx

@@ -11,6 +11,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
 import FitScreenIcon from "@mui/icons-material/FitScreen";
 import RestartAltIcon from "@mui/icons-material/RestartAlt";
+import MoveIcon from "@mui/icons-material/Swipe";
 import ZoomInIcon from "@mui/icons-material/ZoomIn";
 import ZoomOutIcon from "@mui/icons-material/ZoomOut";
 import {
@@ -36,9 +37,12 @@ import {
   useRef,
   useState,
 } from "react";
+import { useQueryClient } from "react-query";
 
 import { DeleteDialog } from "@/app-components/dialogs";
+import { MoveDialog } from "@/app-components/dialogs/MoveDialog";
 import { CategoryDialog } from "@/components/categories/CategoryDialog";
+import { isSameEntity } from "@/hooks/crud/helpers";
 import { useDelete, useDeleteFromCache } from "@/hooks/crud/useDelete";
 import { useFind } from "@/hooks/crud/useFind";
 import { useGetFromCache } from "@/hooks/crud/useGet";
@@ -47,7 +51,7 @@ import useDebouncedUpdate from "@/hooks/useDebouncedUpdate";
 import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
 import { useSearch } from "@/hooks/useSearch";
 import { useTranslate } from "@/hooks/useTranslate";
-import { EntityType, Format } from "@/services/types";
+import { EntityType, Format, QueryType } from "@/services/types";
 import { IBlock } from "@/types/block.types";
 import { ICategory } from "@/types/category.types";
 import { BlockPorts } from "@/types/visual-editor.types";
@@ -67,6 +71,7 @@ const Diagrams = () => {
   const [canvas, setCanvas] = useState<JSX.Element | undefined>();
   const [selectedBlockId, setSelectedBlockId] = useState<string | undefined>();
   const deleteDialogCtl = useDialog<string>(false);
+  const moveDialogCtl = useDialog<string[] | string>(false);
   const addCategoryDialogCtl = useDialog<ICategory>(false);
   const {
     buildDiagram,
@@ -144,6 +149,7 @@ const Diagrams = () => {
     },
     [selectedCategoryId, debouncedUpdateCategory],
   );
+  const queryClient = useQueryClient();
   const getBlockFromCache = useGetFromCache(EntityType.BLOCK);
   const updateCachedBlock = useUpdateCache(EntityType.BLOCK);
   const deleteCachedBlock = useDeleteFromCache(EntityType.BLOCK);
@@ -292,6 +298,7 @@ const Diagrams = () => {
       offsetUpdated: debouncedOffsetEvent,
     });
   }, [
+    selectedCategoryId,
     JSON.stringify(
       blocks.map((b) => {
         return { ...b, position: undefined, updatedAt: undefined };
@@ -316,6 +323,14 @@ const Diagrams = () => {
       deleteDialogCtl.openDialog(ids);
     }
   };
+  const handleMoveButton = () => {
+    const selectedEntities = engine?.getModel().getSelectedEntities().reverse();
+    const ids = selectedEntities?.map((model) => model.getID());
+
+    if (ids && selectedEntities) {
+      moveDialogCtl.openDialog(ids);
+    }
+  };
   const onDelete = async () => {
     const id = deleteDialogCtl?.data;
 
@@ -429,6 +444,54 @@ const Diagrams = () => {
       deleteDialogCtl.closeDialog();
     }
   };
+  const onMove = async (newCategoryId?: string) => {
+    if (!newCategoryId) {
+      return;
+    }
+
+    const ids = moveDialogCtl?.data;
+
+    if (ids) {
+      for (const blockId of ids) {
+        const block = getBlockFromCache(blockId);
+        const updatedNextBlocks = block?.nextBlocks?.filter((nextBlockId) =>
+          ids.includes(nextBlockId),
+        );
+        const updatedAttachedBlock = ids.includes(
+          block?.attachedBlock as string,
+        )
+          ? block?.attachedBlock
+          : null;
+
+        await updateBlock({
+          id: blockId,
+          params: {
+            category: newCategoryId,
+            nextBlocks: updatedNextBlocks,
+            attachedBlock: updatedAttachedBlock,
+          },
+        });
+      }
+
+      queryClient.removeQueries({
+        predicate: ({ queryKey }) => {
+          const [qType, qEntity, qId] = queryKey;
+
+          return (
+            (qType === QueryType.collection &&
+              isSameEntity(qEntity, EntityType.BLOCK) &&
+              qId === selectedCategoryId) ||
+            (isSameEntity(qEntity, EntityType.CATEGORY) &&
+              qId === selectedCategoryId)
+          );
+        },
+      });
+
+      setSelectedCategoryId(newCategoryId);
+      setSelectedBlockId(undefined);
+      moveDialogCtl.closeDialog();
+    }
+  };
 
   return (
     <div
@@ -462,6 +525,13 @@ const Diagrams = () => {
         <CategoryDialog {...getDisplayDialogs(addCategoryDialogCtl)} />
         <BlockDialog {...getDisplayDialogs(editDialogCtl)} />
         <DeleteDialog {...deleteDialogCtl} callback={onDelete} />
+        <MoveDialog
+          open={moveDialogCtl.open}
+          openDialog={moveDialogCtl.openDialog}
+          callback={onMove}
+          closeDialog={moveDialogCtl.closeDialog}
+          categories={categories}
+        />
         <Grid sx={{ bgcolor: "#fff", padding: "0" }}>
           <Grid
             sx={{
@@ -569,6 +639,15 @@ const Diagrams = () => {
               >
                 {t("button.edit")}
               </Button>
+              <Button
+                size="small"
+                variant="contained"
+                startIcon={<MoveIcon />}
+                onClick={handleMoveButton}
+                disabled={!selectedBlockId || selectedBlockId.length !== 24}
+              >
+                {t("button.move")}
+              </Button>
               <Button
                 sx={{}}
                 size="small"