feat: Implement block and element removal functionality in DashboardEditor

- Added deleteDashBoardBlocksApi service to handle block deletion from the dashboard.
- Integrated block removal functionality in DashboardEditor, allowing users to delete blocks.
- Updated BlockEditor and ElementEditor components to include remove block and element handlers.
- Enhanced Zustand store to manage block and element states effectively.
- Updated exported types to accommodate new data structures for blocks and elements.

app/src/components/SimulationDashboard/DashboardEditor.tsx

@@ -18,6 +18,7 @@ import { handleBlockDragStart } from "./functions/block/handleBlockDragStart";
 
 import { getDashBoardBlocksApi } from "../../services/visulization/dashBoard/getDashBoardBlocks";
 import { upsetDashBoardBlocksApi } from "../../services/visulization/dashBoard/upsertDashBoardBlocks";
+import { deleteDashBoardBlocksApi } from "../../services/visulization/dashBoard/deleteDashBoardBlocks";
 
 const DashboardEditor: React.FC = () => {
     const { simulationDashBoardStore, versionStore } = useSceneContext();
@@ -43,6 +44,9 @@ const DashboardEditor: React.FC = () => {
         updateGraphTitle,
         updateGraphType,
         swapElements,
+        removeBlock,
+        removeElement,
+        getBlockById,
         subscribe,
     } = simulationDashBoardStore();
 
@@ -83,6 +87,7 @@ const DashboardEditor: React.FC = () => {
     useEffect(() => {
         if (!projectId || !selectedVersion) return;
         getDashBoardBlocksApi(projectId, selectedVersion.versionId).then((data) => {
+            console.log("data: ", data);
             if (data.data?.blocks) {
                 setBlocks(data.data.blocks);
             }
@@ -102,6 +107,7 @@ const DashboardEditor: React.FC = () => {
     useEffect(() => {
         const unsubscribe = subscribe(() => {
             if (!projectId || !selectedVersion) return;
+            console.log("blocks: ", blocks);
             updateBackend(blocks);
         });
 
@@ -374,6 +380,19 @@ const DashboardEditor: React.FC = () => {
                         updateBlockPosition={(blockId, position) => updateBlockPosition(blockId, position)}
                         updateBlockPositionType={(blockId, positionType) => updateBlockPositionType(blockId, positionType)}
                         updateBlockZIndex={(blockId, zIndex) => updateBlockZIndex(blockId, zIndex)}
+                        handleRemoveBlock={(blockId) => {
+                            const block = getBlockById(blockId);
+                            if (!block) return;
+                            deleteDashBoardBlocksApi({ projectId: projectId!, versionId: selectedVersion!.versionId, blocks: [block] }).then((data) => {
+                                if (data.blocks.length>0) {
+                                    data.blocks.forEach((updatedBlock: any) => {
+                                        if (updatedBlock.message === "Block deleted successfully") {
+                                            removeBlock(updatedBlock.blockUuid);
+                                        }
+                                    });
+                                }
+                            });
+                        }}
                     />
                 )}
                 {selectedElement && editMode && selectedBlock && currentElement && (
@@ -391,6 +410,7 @@ const DashboardEditor: React.FC = () => {
                         updateGraphData={(blockId, elementId, newData) => updateGraphData(blockId, elementId, newData)}
                         updateGraphTitle={(blockId, elementId, title) => updateGraphTitle(blockId, elementId, title)}
                         updateGraphType={(blockId, elementId, type) => updateGraphType(blockId, elementId, type)}
+                        handleRemoveElement={(blockId, elementId) => removeElement(blockId, elementId)}
                         setSwapSource={setSwapSource}
                         setShowSwapUI={setShowSwapUI}
                         dataModelManager={dataModelManager}