Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added dublicate widget function

Browse Source
This commit is contained in:
Nalvazhuthi
2025-03-27 12:16:20 +05:30
parent a73c893040
commit f1a72e4afb
5 changed files with 103 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/src/components/ui/componets/AddButtons.tsx
View File

@@ -109,7 +109,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
};
// Update the selectedZone state
console.log('updatedZone: ', updatedZone);
console.log("updatedZone: ", updatedZone);
setSelectedZone(updatedZone);
} else {
// If the panel is not active, activate it
@@ -122,7 +122,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
};
// Update the selectedZone state
console.log('updatedZone: ', updatedZone);
console.log("updatedZone: ", updatedZone);
setSelectedZone(updatedZone);
}
};
@@ -148,8 +148,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
<div className="extra-Bs">
{/* Hide Panel */}
<div
className={`icon ${hiddenPanels.includes(side) ? "active" : ""
}`}
className={`icon ${
hiddenPanels.includes(side) ? "active" : ""
}`}
title={
hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
}
@@ -171,8 +172,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
{/* Lock/Unlock Panel */}
<div
className={`icon ${selectedZone.lockedPanels.includes(side) ? "active" : ""
}`}
className={`icon ${
selectedZone.lockedPanels.includes(side) ? "active" : ""
}`}
title={
selectedZone.lockedPanels.includes(side)
? "Unlock Panel"
@@ -180,7 +182,13 @@ const AddButtons: React.FC<ButtonsProps> = ({
}
onClick={() => toggleLockPanel(side)}
>
<LockIcon fill={selectedZone.lockedPanels.includes(side) ? "#ffffff" : "#1D1E21"} />
<LockIcon
fill={
selectedZone.lockedPanels.includes(side)
? "#ffffff"
: "#1D1E21"
}
/>
</div>
</div>
)}

156
app/src/components/ui/componets/DraggableWidget.tsx
View File

@@ -10,7 +10,7 @@ import {
DublicateIcon,
KebabIcon,
} from "../../icons/ExportCommonIcons";
import { useEffect, useRef } from "react";
import { useEffect, useRef, useState } from "react";
type Side = "top" | "bottom" | "left" | "right";
@@ -24,7 +24,7 @@ interface Widget {
export const DraggableWidget = ({
widget,
hiddenPanels, // Add this prop to track hidden panels
hiddenPanels,
index,
onReorder,
openKebabId,
@@ -49,111 +49,108 @@ export const DraggableWidget = ({
}>
>;
widget: any;
hiddenPanels: string[]; // Array of hidden panel names
hiddenPanels: string[];
index: number;
onReorder: (fromIndex: number, toIndex: number) => void;
openKebabId: string | null; // ID of the widget with an open kebab menu
setOpenKebabId: (id: string | null) => void; // Function to update the open kebab menu
openKebabId: string | null;
setOpenKebabId: (id: string | null) => void;
}) => {
const { selectedChartId, setSelectedChartId } = useWidgetStore();
const [panelDimensions, setPanelDimensions] = useState<{
[side in Side]?: { width: number; height: number };
}>({});
const handlePointerDown = () => {
if (selectedChartId?.id !== widget.id) {
setSelectedChartId(widget);
}
};
// Determine if the widget's panel is hidden
const isPanelHidden = hiddenPanels.includes(widget.panel);
const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
event.dataTransfer.setData("text/plain", index.toString()); // Store the index of the dragged widget
};
const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault(); // Allow drop
};
const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault(); // Allow drop
};
const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
const fromIndex = parseInt(event.dataTransfer.getData("text/plain"), 10); // Get the dragged widget's index
const toIndex = index; // The index of the widget where the drop occurred
if (fromIndex !== toIndex) {
onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
}
};
// Handle kebab icon click to toggle kebab options
const handleKebabClick = (event: React.MouseEvent<HTMLDivElement>) => {
event.stopPropagation(); // Prevent click from propagating to parent elements
if (openKebabId === widget.id) {
// If the current kebab is already open, close it
setOpenKebabId(null);
} else {
// Open the kebab for the clicked widget and close others
setOpenKebabId(widget.id);
}
};
const deleteSelectedChart = () => {
// Filter out the widget to be deleted
const updatedWidgets = selectedZone.widgets.filter(
(w: Widget) => w.id !== widget.id
);
// Update the selectedZone state
setSelectedZone((prevZone: any) => ({
...prevZone,
widgets: updatedWidgets, // Replace the widgets array with the updated one
widgets: updatedWidgets,
}));
// Close the kebab menu after deletion
setOpenKebabId(null);
};
const getCurrentWidgetCount = (panel: Side) =>
selectedZone.widgets.filter((w) => w.panel === panel).length;
const calculatePanelCapacity = (panel: Side) => {
const CHART_WIDTH = 150;
const CHART_HEIGHT = 150;
const FALLBACK_HORIZONTAL_CAPACITY = 5;
const FALLBACK_VERTICAL_CAPACITY = 3;
const dimensions = panelDimensions[panel];
if (!dimensions) {
return panel === "top" || panel === "bottom"
? FALLBACK_HORIZONTAL_CAPACITY
: FALLBACK_VERTICAL_CAPACITY;
}
return panel === "top" || panel === "bottom"
? Math.floor(dimensions.width / CHART_WIDTH)
: Math.floor(dimensions.height / CHART_HEIGHT);
};
const isPanelFull = (panel: Side) => {
const currentWidgetCount = getCurrentWidgetCount(panel);
const panelCapacity = calculatePanelCapacity(panel);
return currentWidgetCount >= panelCapacity;
};
const duplicateWidget = () => {
const duplicatedWidget: Widget = {
...widget,
id: `${widget.id}-copy-${Date.now()}`,
};
setSelectedZone((prevZone: any) => ({
...prevZone,
widgets: [...prevZone.widgets, duplicatedWidget],
}));
setOpenKebabId(null);
console.log("Duplicated widget with ID:", duplicatedWidget.id);
};
const handleKebabClick = (event: React.MouseEvent<HTMLDivElement>) => {
event.stopPropagation();
if (openKebabId === widget.id) {
setOpenKebabId(null);
} else {
setOpenKebabId(widget.id);
}
};
const widgetRef = useRef<HTMLDivElement | null>(null);
// Handle click outside to close the kebab menu
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
widgetRef.current &&
!widgetRef.current.contains(event.target as Node)
) {
setOpenKebabId(null); // Close the kebab menu if the click is outside
setOpenKebabId(null);
}
};
document.addEventListener("mousedown", handleClickOutside);
// Cleanup event listener on component unmount
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [setOpenKebabId]);
const duplicateWidget = () => {
// Create a copy of the current widget with a new unique ID
const duplicatedWidget: Widget = {
...widget,
id: `${widget.id}-copy-${Date.now()}`, // Generate a unique ID using a timestamp
};
// Add the duplicated widget to the selectedZone's widgets array
setSelectedZone((prevZone: any) => ({
...prevZone,
widgets: [...prevZone.widgets, duplicatedWidget],
}));
// Close the kebab menu after duplication
setOpenKebabId(null);
console.log("Duplicated widget with ID:", duplicatedWidget.id);
};
return (
<>
<div
@@ -163,13 +160,9 @@ export const DraggableWidget = ({
selectedChartId?.id === widget.id && "activeChart"
}`}
onPointerDown={handlePointerDown}
onDragStart={handleDragStart}
onDragEnter={handleDragEnter}
onDragOver={handleDragOver}
onDrop={handleDrop}
style={{
opacity: isPanelHidden ? 0 : 1, // Set opacity to 0 if the panel is hidden
pointerEvents: isPanelHidden ? "none" : "auto", // Disable interaction when hidden
opacity: isPanelHidden ? 0 : 1,
pointerEvents: isPanelHidden ? "none" : "auto",
}}
>
{/* Kebab Icon */}
@@ -179,11 +172,11 @@ export const DraggableWidget = ({
{/* Kebab Options */}
{openKebabId === widget.id && (
<div
className="kebab-options"
ref={widgetRef} // Attach the ref to the widget container
>
<div className="edit btn">
<div className="kebab-options" ref={widgetRef}>
<div
className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : ""}`}
onClick={isPanelFull(widget.panel) ? undefined : duplicateWidget}
>
<div className="icon">
<DublicateIcon />
</div>
@@ -234,15 +227,6 @@ export const DraggableWidget = ({
}}
/>
)}
{/* {widget.type === "radar" && (
<RadarGraphComponent
type={widget.type}
title={widget.title}
fontSize={widget.fontSize}
fontWeight={widget.fontWeight}
data={widget.data.measurements.map((item: any) => item.fields)}
/>
)} */}
{widget.type === "pie" && (
<PieGraphComponent
type={widget.type}

4
app/src/components/ui/componets/Panel.tsx
View File

@@ -48,6 +48,7 @@ const Panel: React.FC<PanelProps> = ({
const [panelDimensions, setPanelDimensions] = useState<{
[side in Side]?: { width: number; height: number };
}>({});
const [openKebabId, setOpenKebabId] = useState<string | null>(null);
const { isPlaying } = usePlayButtonStore();
@@ -131,6 +132,7 @@ const Panel: React.FC<PanelProps> = ({
: Math.floor(dimensions.height / CHART_HEIGHT);
};
// while dublicate check this and add
const addWidgetToPanel = (asset: any, panel: Side) => {
const newWidget = {
...asset,
@@ -195,8 +197,6 @@ const Panel: React.FC<PanelProps> = ({
});
};
const [openKebabId, setOpenKebabId] = useState<string | null>(null);
return (
<>
{selectedZone.activeSides.map((side) => (

4
app/src/styles/components/marketPlace/marketPlace.scss
View File

@@ -175,7 +175,9 @@
}
.vendor-icon {
display: flex;
align-items: center;
gap: 4px;
font-weight: #{$bold-weight};
font-size: $regular ;
}

18
app/src/styles/pages/realTimeViz.scss
View File

@@ -164,13 +164,14 @@
transition: all 0.3s ease;
border-radius: 6px;
overflow: visible !important;
z-index: $z-index-tools;
.panel-content {
position: relative;
height: 100%;
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
@@ -200,7 +201,7 @@
top: 0px;
right: 0px;
z-index: 10;
@include flex-center;
}
@@ -219,6 +220,8 @@
box-shadow: var(--box-shadow-medium);
.btn {
display: flex;
gap: 6px;
@@ -226,10 +229,9 @@
padding: 5px 10px;
color: var(--text-color);
.label {
&:hover {
&:hover {
.label {
color: var(--accent-color);
}
}
@@ -249,6 +251,12 @@
}
}
}
.btn-blur {
color: var(--text-disabled);
cursor: not-allowed;
pointer-events: none;
}
}
}