change(ui): dashboard back button
This commit is contained in:
Shekar Siri
parent
11453b80a2
commit
a62a19a38d
4 changed files with 116 additions and 115 deletions
|
|
@ -38,7 +38,8 @@ function SessionsBy(props: Props) {
|
|||
onClick(filters);
|
||||
};
|
||||
|
||||
const showMore = () => {
|
||||
const showMore = (e: any) => {
|
||||
e.stopPropagation();
|
||||
openModal(
|
||||
<CardSessionsByList list={data.values} onClickHandler={(e, item) => {
|
||||
closeModal();
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
import React from 'react';
|
||||
//import {Breadcrumb} from 'Shared/Breadcrumb';
|
||||
import BackButton from '../../../shared/Breadcrumb/BackButton';
|
||||
import {withSiteId} from 'App/routes';
|
||||
import {withRouter, RouteComponentProps} from 'react-router-dom';
|
||||
import {Button, PageTitle, confirm, Tooltip} from 'UI';
|
||||
import { withSiteId } from 'App/routes';
|
||||
import { withRouter, RouteComponentProps } from 'react-router-dom';
|
||||
import { Button, PageTitle, confirm, Tooltip } from 'UI';
|
||||
import SelectDateRange from 'Shared/SelectDateRange';
|
||||
import {useStore} from 'App/mstore';
|
||||
import {useModal} from 'App/components/Modal';
|
||||
import { useStore } from 'App/mstore';
|
||||
import { useModal } from 'App/components/Modal';
|
||||
import DashboardOptions from '../DashboardOptions';
|
||||
import withModal from 'App/components/Modal/withModal';
|
||||
import {observer} from 'mobx-react-lite';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import DashboardEditModal from '../DashboardEditModal';
|
||||
import CreateDashboardButton from "Components/Dashboard/components/CreateDashboardButton";
|
||||
import CreateCard from "Components/Dashboard/components/DashboardList/NewDashModal/CreateCard";
|
||||
import CreateCardButton from "Components/Dashboard/components/CreateCardButton";
|
||||
import CreateDashboardButton from 'Components/Dashboard/components/CreateDashboardButton';
|
||||
import CreateCard from 'Components/Dashboard/components/DashboardList/NewDashModal/CreateCard';
|
||||
import CreateCardButton from 'Components/Dashboard/components/CreateCardButton';
|
||||
|
||||
interface IProps {
|
||||
dashboardId: string;
|
||||
siteId: string;
|
||||
renderReport?: any;
|
||||
dashboardId: string;
|
||||
siteId: string;
|
||||
renderReport?: any;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -26,49 +26,49 @@ type Props = IProps & RouteComponentProps;
|
|||
const MAX_CARDS = 29;
|
||||
|
||||
function DashboardHeader(props: Props) {
|
||||
const {siteId, dashboardId} = props;
|
||||
const {dashboardStore} = useStore();
|
||||
const {showModal} = useModal();
|
||||
const [focusTitle, setFocusedInput] = React.useState(true);
|
||||
const [showEditModal, setShowEditModal] = React.useState(false);
|
||||
const period = dashboardStore.period;
|
||||
const { siteId, dashboardId } = props;
|
||||
const { dashboardStore } = useStore();
|
||||
const { showModal } = useModal();
|
||||
const [focusTitle, setFocusedInput] = React.useState(true);
|
||||
const [showEditModal, setShowEditModal] = React.useState(false);
|
||||
const period = dashboardStore.period;
|
||||
|
||||
const dashboard: any = dashboardStore.selectedDashboard;
|
||||
const canAddMore: boolean = dashboard?.widgets?.length <= MAX_CARDS;
|
||||
const dashboard: any = dashboardStore.selectedDashboard;
|
||||
const canAddMore: boolean = dashboard?.widgets?.length <= MAX_CARDS;
|
||||
|
||||
const onEdit = (isTitle: boolean) => {
|
||||
dashboardStore.initDashboard(dashboard);
|
||||
setFocusedInput(isTitle);
|
||||
setShowEditModal(true);
|
||||
};
|
||||
const onEdit = (isTitle: boolean) => {
|
||||
dashboardStore.initDashboard(dashboard);
|
||||
setFocusedInput(isTitle);
|
||||
setShowEditModal(true);
|
||||
};
|
||||
|
||||
const onDelete = async () => {
|
||||
if (
|
||||
await confirm({
|
||||
header: 'Delete Dashboard',
|
||||
confirmButton: 'Yes, delete',
|
||||
confirmation: `Are you sure you want to permanently delete this Dashboard?`,
|
||||
})
|
||||
) {
|
||||
dashboardStore.deleteDashboard(dashboard).then(() => {
|
||||
props.history.push(withSiteId(`/dashboard`, siteId));
|
||||
});
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<DashboardEditModal
|
||||
show={showEditModal}
|
||||
closeHandler={() => setShowEditModal(false)}
|
||||
focusTitle={focusTitle}
|
||||
/>
|
||||
|
||||
<div className="flex items-center mb-2 justify-between">
|
||||
<div className="flex items-center" style={{flex: 3}}>
|
||||
const onDelete = async () => {
|
||||
if (
|
||||
await confirm({
|
||||
header: 'Delete Dashboard',
|
||||
confirmButton: 'Yes, delete',
|
||||
confirmation: `Are you sure you want to permanently delete this Dashboard?`
|
||||
})
|
||||
) {
|
||||
dashboardStore.deleteDashboard(dashboard).then(() => {
|
||||
props.history.push(withSiteId(`/dashboard`, siteId));
|
||||
});
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<DashboardEditModal
|
||||
show={showEditModal}
|
||||
closeHandler={() => setShowEditModal(false)}
|
||||
focusTitle={focusTitle}
|
||||
/>
|
||||
|
||||
<BackButton siteId={siteId} />
|
||||
|
||||
{/* <Breadcrumb
|
||||
<div className="flex items-center mb-2 justify-between">
|
||||
<div className="flex items-center" style={{ flex: 3 }}>
|
||||
|
||||
<BackButton siteId={siteId} />
|
||||
|
||||
{/* <Breadcrumb
|
||||
items={[
|
||||
{
|
||||
label: 'Back',
|
||||
|
|
@ -78,59 +78,57 @@ function DashboardHeader(props: Props) {
|
|||
]}
|
||||
/> */}
|
||||
|
||||
|
||||
|
||||
<PageTitle
|
||||
title={
|
||||
// @ts-ignore
|
||||
<Tooltip delay={0} title="Double click to edit" placement='bottom'>
|
||||
{dashboard?.name}
|
||||
</Tooltip>
|
||||
}
|
||||
onDoubleClick={() => onEdit(true)}
|
||||
className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dashed hover:border-gray-medium cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2" style={{flex: 1, justifyContent: 'end'}}>
|
||||
<CreateCardButton disabled={canAddMore} />
|
||||
|
||||
<div
|
||||
className="flex items-center flex-shrink-0 justify-end dashboardDataPeriodSelector"
|
||||
style={{width: 'fit-content'}}
|
||||
>
|
||||
<SelectDateRange
|
||||
style={{width: '300px'}}
|
||||
period={period}
|
||||
onChange={(period: any) => dashboardStore.setPeriod(period)}
|
||||
right={true}
|
||||
isAnt={true}
|
||||
useButtonStyle={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center flex-shrink-0">
|
||||
<DashboardOptions
|
||||
editHandler={onEdit}
|
||||
deleteHandler={onDelete}
|
||||
renderReport={props.renderReport}
|
||||
isTitlePresent={!!dashboard?.description}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pb-4">
|
||||
{/* @ts-ignore */}
|
||||
<Tooltip arrow title="Double click to edit" placement='top' className="w-fit !block">
|
||||
<h2
|
||||
className="my-2 font-normal w-fit text-disabled-text border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer"
|
||||
onDoubleClick={() => onEdit(false)}
|
||||
>
|
||||
{/* {dashboard?.description || 'Describe the purpose of this dashboard'} */}
|
||||
</h2>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<PageTitle
|
||||
title={
|
||||
// @ts-ignore
|
||||
<Tooltip delay={0} title="Double click to edit" placement="bottom">
|
||||
{dashboard?.name}
|
||||
</Tooltip>
|
||||
}
|
||||
onDoubleClick={() => onEdit(true)}
|
||||
className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dashed hover:border-gray-medium cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
<div className="flex items-center gap-2" style={{ flex: 1, justifyContent: 'end' }}>
|
||||
<CreateCardButton disabled={canAddMore} />
|
||||
|
||||
<div
|
||||
className="flex items-center flex-shrink-0 justify-end dashboardDataPeriodSelector"
|
||||
style={{ width: 'fit-content' }}
|
||||
>
|
||||
<SelectDateRange
|
||||
style={{ width: '300px' }}
|
||||
period={period}
|
||||
onChange={(period: any) => dashboardStore.setPeriod(period)}
|
||||
right={true}
|
||||
isAnt={true}
|
||||
useButtonStyle={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center flex-shrink-0">
|
||||
<DashboardOptions
|
||||
editHandler={onEdit}
|
||||
deleteHandler={onDelete}
|
||||
renderReport={props.renderReport}
|
||||
isTitlePresent={!!dashboard?.description}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pb-4">
|
||||
{/* @ts-ignore */}
|
||||
<Tooltip arrow title="Double click to edit" placement="top" className="w-fit !block">
|
||||
<h2
|
||||
className="my-2 font-normal w-fit text-disabled-text border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer"
|
||||
onDoubleClick={() => onEdit(false)}
|
||||
>
|
||||
{/* {dashboard?.description || 'Describe the purpose of this dashboard'} */}
|
||||
</h2>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default withRouter(withModal(observer(DashboardHeader)));
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ function WidgetWrapperNew(props: Props & RouteComponentProps) {
|
|||
});
|
||||
|
||||
const onChartClick = () => {
|
||||
if (!isWidget || isPredefined) return;
|
||||
// if (!isWidget || isPredefined) return;
|
||||
props.history.push(
|
||||
withSiteId(dashboardMetricDetails(dashboard?.dashboardId, widget.metricId), siteId)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,18 +3,20 @@ import { Button } from 'antd';
|
|||
import { useHistory } from 'react-router-dom';
|
||||
import { LeftOutlined } from '@ant-design/icons';
|
||||
|
||||
function BackButton({ siteId }) {
|
||||
const history = useHistory();
|
||||
function BackButton() {
|
||||
const history = useHistory();
|
||||
const siteId = location.pathname.split('/')[1];
|
||||
|
||||
const handleBackClick = () => {
|
||||
history.goBack();
|
||||
};
|
||||
const handleBackClick = () => {
|
||||
console.log('siteId', siteId);
|
||||
history.push(`/${siteId}/dashboard`);
|
||||
};
|
||||
|
||||
return (
|
||||
<Button type="text" onClick={handleBackClick} icon={<LeftOutlined />} className='px-1 pe-2 me-2 gap-1' >
|
||||
Back
|
||||
</Button>
|
||||
);
|
||||
return (
|
||||
<Button type="text" onClick={handleBackClick} icon={<LeftOutlined />} className="px-1 pe-2 me-2 gap-1">
|
||||
Back
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
export default BackButton;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue