73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import Modal from 'App/components/Modal/Modal';
|
|
import React, { useEffect, useMemo, useState } from 'react';
|
|
import MetricsList from '../MetricsList';
|
|
import { Button } from 'UI';
|
|
import { useModal } from 'App/components/Modal';
|
|
import { useStore } from 'App/mstore';
|
|
import { observer, useObserver } from 'mobx-react-lite';
|
|
|
|
interface Props {
|
|
dashboardId: number;
|
|
siteId: string;
|
|
}
|
|
function MetricsLibraryModal(props: Props) {
|
|
const { metricStore } = useStore();
|
|
const { siteId, dashboardId } = props;
|
|
const [selectedList, setSelectedList] = useState([]);
|
|
|
|
useEffect(() => {
|
|
metricStore.updateKey('listView', true);
|
|
}, []);
|
|
|
|
const onSelectionChange = (list: any) => {
|
|
setSelectedList(list);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Modal.Header title="Cards Library" />
|
|
<Modal.Content className="p-4 pb-20">
|
|
<div className="border">
|
|
<MetricsList siteId={siteId} onSelectionChange={onSelectionChange} />
|
|
</div>
|
|
</Modal.Content>
|
|
<Modal.Footer>
|
|
<SelectedContent dashboardId={dashboardId} selected={selectedList} />
|
|
</Modal.Footer>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default observer(MetricsLibraryModal);
|
|
|
|
function SelectedContent({ dashboardId, selected }: any) {
|
|
const { hideModal } = useModal();
|
|
const { metricStore, dashboardStore } = useStore();
|
|
const total = useObserver(() => metricStore.sortedWidgets.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>
|
|
);
|
|
}
|