feat(ui) - dashboard - wip
This commit is contained in:
Shekar Siri
parent
65b2b037e6
commit
3ae300f73e
5 changed files with 38 additions and 35 deletions
|
|
@ -50,7 +50,7 @@ const withObTab = routes.withObTab;
|
|||
|
||||
const DASHBOARD_PATH = routes.dashboard();
|
||||
const DASHBOARD_SELECT_PATH = routes.dashboardSelected();
|
||||
const DASHBOARD_METRICS_PATH = routes.dashboardMetrics();
|
||||
const DASHBOARD_METRICS_PATH = routes.dashboardMetricCreate();
|
||||
|
||||
// const WIDGET_PATAH = routes.dashboardMetric();
|
||||
const SESSIONS_PATH = routes.sessions();
|
||||
|
|
@ -186,8 +186,9 @@ class Router extends React.Component {
|
|||
<Redirect to={ routes.client(routes.CLIENT_TABS.SITES) } />
|
||||
}
|
||||
|
||||
{/* <Route index path={ withSiteId(DASHBOARD_METRICS_PATH, siteIdList) } component={ Dashboard } /> */}
|
||||
<Route index path={ withSiteId(DASHBOARD_SELECT_PATH, siteIdList) } component={ Dashboard } />
|
||||
<Route exact index path={ withSiteId(DASHBOARD_SELECT_PATH, siteIdList) } component={ Dashboard } />
|
||||
<Route exact index path={ withSiteId(DASHBOARD_METRICS_PATH, siteIdList) } component={ Dashboard } />
|
||||
|
||||
<Route index path={ withSiteId(DASHBOARD_PATH, siteIdList) } component={ Dashboard } />
|
||||
|
||||
{/* <Route exact strict path={ withSiteId(WIDGET_PATAH, siteIdList) } component={ Dashboard } />
|
||||
|
|
|
|||
|
|
@ -56,6 +56,9 @@ function NewDashboard(props) {
|
|||
</div>
|
||||
</div>
|
||||
</Route>
|
||||
<Route exact strict path={withSiteId(dashboardMetricCreate(dashboard.dashboardId), siteId)}>
|
||||
<WidgetView />
|
||||
</Route>
|
||||
{ dashboardId && (
|
||||
<>
|
||||
<Route exact strict path={withSiteId(dashboardSelected(dashboardId), siteId)}>
|
||||
|
|
@ -69,9 +72,8 @@ function NewDashboard(props) {
|
|||
</div>
|
||||
</Route>
|
||||
|
||||
{/* <Route exact strict path={withSiteId(dashboardMetricCreate(dashboard.dashboardId), siteId)}>
|
||||
<WidgetView />
|
||||
</Route>
|
||||
|
||||
{/*
|
||||
<Route exact strict path={withSiteId(dashboardMetricDetails(dashboard.dashboardId, metricId), siteId)}>
|
||||
<WidgetView />
|
||||
</Route> */}
|
||||
|
|
|
|||
|
|
@ -4,10 +4,16 @@ import cn from 'classnames';
|
|||
import { ItemMenu } from 'UI';
|
||||
import { useDrag, useDrop } from 'react-dnd';
|
||||
|
||||
function WidgetWrapper(props) {
|
||||
const { widget, index, moveListItem } = props;
|
||||
interface Props {
|
||||
className?: string;
|
||||
widget?: any;
|
||||
index?: number;
|
||||
moveListItem?: any;
|
||||
isPreview?: boolean;
|
||||
}
|
||||
function WidgetWrapper(props: Props) {
|
||||
const { widget = {}, index = 0, moveListItem = null, isPreview = false } = props;
|
||||
|
||||
// useDrag - the list item is draggable
|
||||
const [{ opacity, isDragging }, dragRef] = useDrag({
|
||||
type: 'item',
|
||||
item: { index },
|
||||
|
|
@ -15,41 +21,33 @@ function WidgetWrapper(props) {
|
|||
isDragging: monitor.isDragging(),
|
||||
opacity: monitor.isDragging() ? 0.5 : 1,
|
||||
}),
|
||||
}, [index]);
|
||||
|
||||
// useDrop - the list item is also a drop area
|
||||
const [spec, dropRef] = useDrop({
|
||||
});
|
||||
|
||||
const [{ isOver, canDrop }, dropRef] = useDrop({
|
||||
accept: 'item',
|
||||
|
||||
drop: (item: any) => {
|
||||
if (item.index === index) return;
|
||||
moveListItem(item.index, index);
|
||||
},
|
||||
// hover: (item: any, monitor: any) => {
|
||||
// const dragIndex = item.index
|
||||
// const hoverIndex = index
|
||||
// const hoverBoundingRect = ref.current?.getBoundingClientRect()
|
||||
// const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
|
||||
// const hoverActualY = monitor.getClientOffset().y - hoverBoundingRect.top
|
||||
|
||||
// // if dragging down, continue only when hover is smaller than middle Y
|
||||
// if (dragIndex < hoverIndex && hoverActualY < hoverMiddleY) return
|
||||
// // if dragging up, continue only when hover is bigger than middle Y
|
||||
// if (dragIndex > hoverIndex && hoverActualY > hoverMiddleY) return
|
||||
|
||||
// moveListItem(dragIndex, hoverIndex)
|
||||
// item.index = hoverIndex
|
||||
// },
|
||||
}, [])
|
||||
|
||||
console.log('spec', spec)
|
||||
collect: (monitor: any) => ({
|
||||
isOver: monitor.isOver(),
|
||||
canDrop: monitor.canDrop(),
|
||||
}),
|
||||
})
|
||||
|
||||
const ref: any = useRef(null)
|
||||
const dragDropRef: any = dragRef(dropRef(ref))
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn("border rounded bg-white", 'col-span-' + widget.colSpan)}
|
||||
style={{ userSelect: 'none', opacity }}
|
||||
className={cn("rounded bg-white", 'col-span-' + widget.colSpan, { 'border' : !isPreview })}
|
||||
style={{
|
||||
userSelect: 'none',
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
borderColor: canDrop && isOver ? '#394EFF' : '#EEE',
|
||||
}}
|
||||
ref={dragDropRef}
|
||||
>
|
||||
{/* <Link to={withSiteId(dashboardMetricDetails(dashboard.dashboardId, widget.widgetId), siteId)}> */}
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ function WidgetPreview(props: Props) {
|
|||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded border p-4">
|
||||
<WidgetWrapper widget={metric} />
|
||||
<WidgetWrapper widget={metric} isPreview={true} />
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
|
|
|
|||
|
|
@ -27,7 +27,9 @@ export default class ItemMenu extends React.PureComponent {
|
|||
}
|
||||
|
||||
toggleMenu = (e) => {
|
||||
e.stopPropagation();
|
||||
// e.preventDefault();
|
||||
// e.stopPropagation();
|
||||
console.log('toggleMenu', e);
|
||||
this.setState({ displayed: !this.state.displayed });
|
||||
}
|
||||
|
||||
|
|
@ -51,7 +53,7 @@ export default class ItemMenu extends React.PureComponent {
|
|||
className="w-10 h-10 cursor-pointer bg-white rounded-full flex items-center justify-center hover:bg-gray-lightest"
|
||||
onClick={ this.toggleMenu }
|
||||
role="button"
|
||||
tabIndex="-1"
|
||||
// tabIndex="-1"
|
||||
>
|
||||
<Icon name="ellipsis-v" size="16" />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue