jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): fix dnd for different kinds of grids

Browse source
This commit is contained in:
sylenien 2022-09-20 15:24:47 +02:00 • committed by Delirium
parent 869fe83bec
commit 0e89885e5e
4 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
View file

@ -62,6 +62,7 @@ function DashboardWidgetGrid(props: Props) {
dashboardId={dashboardId}
siteId={siteId}
isWidget={true}
grid="vitals"
/>
</React.Fragment>
))}
@ -81,6 +82,7 @@ function DashboardWidgetGrid(props: Props) {
dashboardId={dashboardId}
siteId={siteId}
isWidget={true}
grid="other"
/>
</React.Fragment>
))}

10
frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
View file

@ -26,10 +26,11 @@ interface Props {
onClick?: () => void;
isWidget?: boolean;
hideName?: boolean;
grid?: string;
}
function WidgetWrapper(props: Props & RouteComponentProps) {
const { dashboardStore } = useStore();
const { isWidget = false, active = false, index = 0, moveListItem = null, isPreview = false, isTemplate = false, dashboardId, siteId } = props;
const { isWidget = false, active = false, index = 0, moveListItem = null, isPreview = false, isTemplate = false, siteId, grid = "" } = props;
const widget: any = props.widget;
const isTimeSeries = widget.metricType === 'timeseries';
const isPredefined = widget.metricType === 'predefined';
@ -37,7 +38,7 @@ function WidgetWrapper(props: Props & RouteComponentProps) {
const [{ isDragging }, dragRef] = useDrag({
type: 'item',
item: { index },
item: { index, grid },
collect: (monitor) => ({
isDragging: monitor.isDragging(),
opacity: monitor.isDragging() ? 0.5 : 1,
@ -47,9 +48,12 @@ function WidgetWrapper(props: Props & RouteComponentProps) {
const [{ isOver, canDrop }, dropRef] = useDrop({
accept: 'item',
drop: (item: any) => {
if (item.index === index) return;
if (item.index === index || (item.grid !== grid)) return;
moveListItem(item.index, index);
},
canDrop(item) {
return item.grid === grid
},
collect: (monitor: any) => ({
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),

2
frontend/app/mstore/dashboardStore.ts
View file

@ -185,7 +185,7 @@ export default class DashboardStore {
new Dashboard().fromJson(_dashboard)
);
} else {
toast.success("Dashboard updated successfully");
toast.success("Dashboard successfully updated ");
this.updateDashboard(
new Dashboard().fromJson(_dashboard)
);

2
frontend/app/mstore/types/dashboard.ts
View file

@ -123,7 +123,7 @@ export default class Dashboard {
dashboardService.saveWidget(this.dashboardId, widgetA),
dashboardService.saveWidget(this.dashboardId, widgetB)
]).then(() => {
toast.success("Dashboard updated successfully")
toast.success("Dashboard successfully updated")
resolve()
}).catch(() => {
toast.error("Error updating widget position")