change(ui) - dashboard cards limit
This commit is contained in:
Shekar Siri
Taha Yassine Kraiem
parent
8bcd63a879
commit
10f2ff9864
5 changed files with 71 additions and 53 deletions
|
|
@ -1,9 +1,8 @@
|
|||
import React from 'react';
|
||||
import { Tooltip } from 'react-tippy';
|
||||
import Breadcrumb from 'Shared/Breadcrumb';
|
||||
import { withSiteId } from 'App/routes';
|
||||
import { withRouter, RouteComponentProps } from 'react-router-dom';
|
||||
import { Button, PageTitle, confirm } from 'UI';
|
||||
import { Button, PageTitle, confirm, Tooltip } from 'UI';
|
||||
import SelectDateRange from 'Shared/SelectDateRange';
|
||||
import { useStore } from 'App/mstore';
|
||||
import { useModal } from 'App/components/Modal';
|
||||
|
|
@ -20,7 +19,7 @@ interface IProps {
|
|||
}
|
||||
|
||||
type Props = IProps & RouteComponentProps;
|
||||
|
||||
const MAX_CARDS = 30
|
||||
function DashboardHeader(props: Props) {
|
||||
const { siteId, dashboardId } = props;
|
||||
const { dashboardStore } = useStore();
|
||||
|
|
@ -30,6 +29,7 @@ function DashboardHeader(props: Props) {
|
|||
const period = dashboardStore.period;
|
||||
|
||||
const dashboard: any = dashboardStore.selectedDashboard;
|
||||
const canAddMore: boolean = dashboard?.widgets?.length <= MAX_CARDS;
|
||||
|
||||
const onEdit = (isTitle: boolean) => {
|
||||
dashboardStore.initDashboard(dashboard);
|
||||
|
|
@ -80,16 +80,19 @@ function DashboardHeader(props: Props) {
|
|||
/>
|
||||
</div>
|
||||
<div className="flex items-center" style={{ flex: 1, justifyContent: 'end' }}>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() =>
|
||||
showModal(<AddCardModal dashboardId={dashboardId} siteId={siteId} />, { right: true })
|
||||
}
|
||||
icon="plus"
|
||||
iconSize={24}
|
||||
>
|
||||
Add Card
|
||||
</Button>
|
||||
<Tooltip delay={0} disabled={canAddMore} title="The number of cards in one dashboard is limited to 30.">
|
||||
<Button
|
||||
disabled={!canAddMore}
|
||||
variant="primary"
|
||||
onClick={() =>
|
||||
showModal(<AddCardModal dashboardId={dashboardId} siteId={siteId} />, { right: true })
|
||||
}
|
||||
icon="plus"
|
||||
iconSize={24}
|
||||
>
|
||||
Add Card
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<div className="mx-4"></div>
|
||||
<div
|
||||
className="flex items-center flex-shrink-0 justify-end"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
import { useModal } from 'App/components/Modal';
|
||||
import { useStore } from 'App/mstore';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import React, { useMemo } from 'react';
|
||||
import { Button } from 'UI';
|
||||
|
||||
function FooterContent({ dashboardId, selected }: any) {
|
||||
const { hideModal } = useModal();
|
||||
const { metricStore, dashboardStore } = useStore();
|
||||
const dashboard = useMemo(() => dashboardStore.getDashboard(dashboardId), [dashboardId]);
|
||||
|
||||
const existingCardIds = useMemo(() => dashboard?.widgets?.map(i => parseInt(i.metricId)), [dashboard]);
|
||||
const total = useMemo(() => metricStore.filteredCards.filter(i => !existingCardIds?.includes(parseInt(i.metricId))).length, [metricStore.filteredCards]);
|
||||
|
||||
const addSelectedToDashboard = () => {
|
||||
if (!dashboard || !dashboard.dashboardId) return;
|
||||
dashboardStore.addWidgetToDashboard(dashboard, selected).then(() => {
|
||||
hideModal();
|
||||
dashboardStore.fetch(dashboard.dashboardId!);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center rounded border bg-gray-light-shade justify-between p-3">
|
||||
<div>
|
||||
Selected <span className="font-medium">{selected.length}</span> of{' '}
|
||||
<span className="font-medium">{total}</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Button variant="text-primary" className="mr-2" onClick={hideModal}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button disabled={selected.length === 0} variant="primary" onClick={addSelectedToDashboard}>
|
||||
Add Selected to Dashboard
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default observer(FooterContent);
|
||||
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
import Modal from 'App/components/Modal/Modal';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import MetricsList from '../MetricsList';
|
||||
import { Button, Icon } from 'UI';
|
||||
import { useModal } from 'App/components/Modal';
|
||||
import { Icon } from 'UI';
|
||||
import { useStore } from 'App/mstore';
|
||||
import { observer, useObserver } from 'mobx-react-lite';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import FooterContent from './FooterContent';
|
||||
|
||||
interface Props {
|
||||
dashboardId: number;
|
||||
|
|
@ -50,7 +50,7 @@ function MetricsLibraryModal(props: Props) {
|
|||
</div>
|
||||
</Modal.Content>
|
||||
<Modal.Footer>
|
||||
<SelectedContent dashboardId={dashboardId} selected={selectedList} />
|
||||
<FooterContent dashboardId={dashboardId} selected={selectedList} />
|
||||
</Modal.Footer>
|
||||
</>
|
||||
);
|
||||
|
|
@ -71,35 +71,3 @@ function MetricSearch({ onChange }: any) {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SelectedContent({ dashboardId, selected }: any) {
|
||||
const { hideModal } = useModal();
|
||||
const { metricStore, dashboardStore } = useStore();
|
||||
const total = useObserver(() => metricStore.metrics.length);
|
||||
const dashboard = useMemo(() => dashboardStore.getDashboard(dashboardId), [dashboardId]);
|
||||
|
||||
const addSelectedToDashboard = () => {
|
||||
if (!dashboard || !dashboard.dashboardId) return;
|
||||
dashboardStore.addWidgetToDashboard(dashboard, selected).then(() => {
|
||||
hideModal();
|
||||
dashboardStore.fetch(dashboard.dashboardId);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center rounded border bg-gray-light-shade justify-between p-3">
|
||||
<div>
|
||||
Selected <span className="font-medium">{selected.length}</span> of{' '}
|
||||
<span className="font-medium">{total}</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Button variant="text-primary" className="mr-2" onClick={hideModal}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button disabled={selected.length === 0} variant="primary" onClick={addSelectedToDashboard}>
|
||||
Add Selected to Dashboard
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ interface Props {
|
|||
toggleAll?: (e: any) => void;
|
||||
disableSelection?: boolean;
|
||||
allSelected?: boolean
|
||||
existingCardIds?: number[];
|
||||
}
|
||||
function ListView(props: Props) {
|
||||
const { siteId, list, selectedList, toggleSelection, disableSelection = false, allSelected = false } = props;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { observer, useObserver } from 'mobx-react-lite';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { NoContent, Pagination } from 'UI';
|
||||
import { useStore } from 'App/mstore';
|
||||
import { sliceListPerPage } from 'App/utils';
|
||||
|
|
@ -14,11 +14,14 @@ function MetricsList({
|
|||
siteId: string;
|
||||
onSelectionChange?: (selected: any[]) => void;
|
||||
}) {
|
||||
const { metricStore } = useStore();
|
||||
const cards = metricStore.filteredCards;
|
||||
const { metricStore, dashboardStore } = useStore();
|
||||
const metricsSearch = metricStore.metricsSearch;
|
||||
const listView = useObserver(() => metricStore.listView);
|
||||
const [selectedMetrics, setSelectedMetrics] = useState<any>([]);
|
||||
|
||||
const dashboard = dashboardStore.selectedDashboard;
|
||||
const existingCardIds = useMemo(() => dashboard?.widgets?.map(i => parseInt(i.metricId)), [dashboard]);
|
||||
const cards = useMemo(() => metricStore.filteredCards.filter(i => !existingCardIds?.includes(parseInt(i.metricId))), [metricStore.filteredCards]);
|
||||
|
||||
useEffect(() => {
|
||||
metricStore.fetchList();
|
||||
|
|
@ -63,6 +66,7 @@ function MetricsList({
|
|||
siteId={siteId}
|
||||
list={sliceListPerPage(cards, metricStore.page - 1, metricStore.pageSize)}
|
||||
selectedList={selectedMetrics}
|
||||
existingCardIds={existingCardIds}
|
||||
toggleSelection={toggleMetricSelection}
|
||||
allSelected={cards.length === selectedMetrics.length}
|
||||
toggleAll={({ target: { checked, name } }) =>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue