change(ui): new card with modal options
This commit is contained in:
Shekar Siri
parent
c9c5e68283
commit
86d47b595d
5 changed files with 47 additions and 40 deletions
|
|
@ -4,14 +4,14 @@ import MetricTypeList from '../MetricTypeList';
|
|||
|
||||
interface Props {
|
||||
siteId: string;
|
||||
dashboardId: string;
|
||||
dashboardId?: string;
|
||||
}
|
||||
function AddCardModal(props: Props) {
|
||||
return (
|
||||
<>
|
||||
<Modal.Header title="Add Card" />
|
||||
<Modal.Content className="px-3 pb-6">
|
||||
<MetricTypeList siteId={props.siteId} dashboardId={parseInt(props.dashboardId)} />
|
||||
<MetricTypeList siteId={props.siteId} dashboardId={parseInt(props.dashboardId as string)} />
|
||||
</Modal.Content>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,20 +4,21 @@ import MetricsLibraryModal from '../MetricsLibraryModal';
|
|||
import MetricTypeItem, { MetricType } from '../MetricTypeItem/MetricTypeItem';
|
||||
import { TYPES, LIBRARY, INSIGHTS } from 'App/constants/card';
|
||||
import { withRouter, RouteComponentProps } from 'react-router-dom';
|
||||
import { dashboardMetricCreate, withSiteId } from 'App/routes';
|
||||
import { dashboardMetricCreate, metricCreate, withSiteId } from 'App/routes';
|
||||
import { useStore } from 'App/mstore';
|
||||
import { connect } from 'react-redux';
|
||||
import { ENTERPRISE_REQUEIRED } from 'App/constants';
|
||||
|
||||
interface Props extends RouteComponentProps {
|
||||
dashboardId: number;
|
||||
dashboardId?: number;
|
||||
siteId: string;
|
||||
isEnterprise: boolean;
|
||||
}
|
||||
|
||||
function MetricTypeList(props: Props) {
|
||||
const { dashboardId, siteId, history, isEnterprise } = props;
|
||||
const { metricStore } = useStore();
|
||||
const { hideModal } = useModal();
|
||||
const { showModal, hideModal } = useModal();
|
||||
|
||||
const list = React.useMemo(() => {
|
||||
return TYPES.map((metric: MetricType) => {
|
||||
|
|
@ -25,12 +26,15 @@ function MetricTypeList(props: Props) {
|
|||
return {
|
||||
...metric,
|
||||
disabled: metric.slug === INSIGHTS && !isEnterprise,
|
||||
tooltipTitle: disabled ? ENTERPRISE_REQUEIRED : '',
|
||||
tooltipTitle: disabled ? ENTERPRISE_REQUEIRED : ''
|
||||
};
|
||||
});
|
||||
}, []);
|
||||
|
||||
const { showModal } = useModal();
|
||||
if (!dashboardId) {
|
||||
list.shift();
|
||||
}
|
||||
|
||||
const onClick = ({ slug }: MetricType) => {
|
||||
hideModal();
|
||||
if (slug === LIBRARY) {
|
||||
|
|
@ -39,16 +43,16 @@ function MetricTypeList(props: Props) {
|
|||
width: 800,
|
||||
onClose: () => {
|
||||
metricStore.updateKey('metricsSearch', '');
|
||||
},
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// TODO redirect to card builder with metricType query param
|
||||
const path = withSiteId(dashboardMetricCreate(dashboardId + ''), siteId);
|
||||
const path = dashboardId ? withSiteId(dashboardMetricCreate(dashboardId + ''), siteId) :
|
||||
withSiteId(metricCreate(), siteId);
|
||||
const queryString = new URLSearchParams({ type: slug }).toString();
|
||||
history.push({
|
||||
pathname: path,
|
||||
search: `?${queryString}`,
|
||||
search: `?${queryString}`
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -62,5 +66,5 @@ function MetricTypeList(props: Props) {
|
|||
}
|
||||
|
||||
export default connect((state: any) => ({
|
||||
isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
|
||||
isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee'
|
||||
}))(withRouter(MetricTypeList));
|
||||
|
|
|
|||
|
|
@ -1,45 +1,48 @@
|
|||
import React from 'react';
|
||||
import { Icon, PageTitle, Button, Link, Toggler } from 'UI';
|
||||
import { PageTitle, Button, Link, Toggler } from 'UI';
|
||||
import MetricsSearch from '../MetricsSearch';
|
||||
import Select from 'Shared/Select';
|
||||
import { useStore } from 'App/mstore';
|
||||
import { observer, useObserver } from 'mobx-react-lite';
|
||||
import { DROPDOWN_OPTIONS } from 'App/constants/card';
|
||||
import AddCardModal from 'Components/Dashboard/components/AddCardModal';
|
||||
import { useModal } from 'Components/Modal';
|
||||
|
||||
function MetricViewHeader() {
|
||||
function MetricViewHeader({ siteId }: { siteId: string }) {
|
||||
const { metricStore } = useStore();
|
||||
const filter = metricStore.filter;
|
||||
const { showModal } = useModal();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between px-6">
|
||||
<div className="flex items-baseline mr-3">
|
||||
<PageTitle title="Cards" className="" />
|
||||
<div className='flex items-center justify-between px-6'>
|
||||
<div className='flex items-baseline mr-3'>
|
||||
<PageTitle title='Cards' className='' />
|
||||
</div>
|
||||
<div className="ml-auto flex items-center">
|
||||
<Link to={'/metrics/create'}>
|
||||
<Button variant="primary">New Card</Button>
|
||||
</Link>
|
||||
<div className="ml-4 w-1/4" style={{ minWidth: 300 }}>
|
||||
<div className='ml-auto flex items-center'>
|
||||
<Button variant='primary'
|
||||
onClick={() => showModal(<AddCardModal siteId={siteId} />, { right: true })}
|
||||
>New Card</Button>
|
||||
<div className='ml-4 w-1/4' style={{ minWidth: 300 }}>
|
||||
<MetricsSearch />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-y px-6 py-1 mt-2 flex items-center w-full justify-between">
|
||||
<div className="items-center flex gap-4">
|
||||
|
||||
<div className='border-y px-6 py-1 mt-2 flex items-center w-full justify-between'>
|
||||
<div className='items-center flex gap-4'>
|
||||
<Toggler
|
||||
label="My Cards"
|
||||
label='My Cards'
|
||||
checked={filter.showMine}
|
||||
name="test"
|
||||
className="font-medium mr-2"
|
||||
name='test'
|
||||
className='font-medium mr-2'
|
||||
onChange={() =>
|
||||
metricStore.updateKey('filter', { ...filter, showMine: !filter.showMine })
|
||||
}
|
||||
/>
|
||||
<Select
|
||||
options={[{ label: 'All Types', value: 'all' }, ...DROPDOWN_OPTIONS]}
|
||||
name="type"
|
||||
name='type'
|
||||
defaultValue={filter.type}
|
||||
onChange={({ value }) =>
|
||||
metricStore.updateKey('filter', { ...filter, type: value.value })
|
||||
|
|
@ -56,19 +59,19 @@ function MetricViewHeader() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className='flex items-center'>
|
||||
<ListViewToggler />
|
||||
|
||||
<Select
|
||||
options={[
|
||||
{ label: 'Newest', value: 'desc' },
|
||||
{ label: 'Oldest', value: 'asc' },
|
||||
{ label: 'Oldest', value: 'asc' }
|
||||
]}
|
||||
name="sort"
|
||||
name='sort'
|
||||
defaultValue={metricStore.sort.by}
|
||||
onChange={({ value }) => metricStore.updateKey('sort', { by: value.value })}
|
||||
plain={true}
|
||||
className="ml-4"
|
||||
className='ml-4'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -83,13 +86,13 @@ function DashboardDropdown({ onChange, plain = false }: { plain?: boolean; onCha
|
|||
const dashboardOptions = dashboardStore.dashboards.map((i: any) => ({
|
||||
key: i.id,
|
||||
label: i.name,
|
||||
value: i.dashboardId,
|
||||
value: i.dashboardId
|
||||
}));
|
||||
|
||||
return (
|
||||
<Select
|
||||
isSearchable={true}
|
||||
placeholder="Filter by Dashboard"
|
||||
placeholder='Filter by Dashboard'
|
||||
plain={plain}
|
||||
options={dashboardOptions}
|
||||
value={metricStore.filter.dashboard}
|
||||
|
|
@ -103,16 +106,16 @@ function ListViewToggler({}) {
|
|||
const { metricStore } = useStore();
|
||||
const listView = useObserver(() => metricStore.listView);
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<div className='flex items-center'>
|
||||
<Button
|
||||
icon="list-alt"
|
||||
icon='list-alt'
|
||||
variant={listView ? 'text-primary' : 'text'}
|
||||
onClick={() => metricStore.updateKey('listView', true)}
|
||||
>
|
||||
List
|
||||
</Button>
|
||||
<Button
|
||||
icon="grid"
|
||||
icon='grid'
|
||||
variant={!listView ? 'text-primary' : 'text'}
|
||||
onClick={() => metricStore.updateKey('listView', false)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { observer } from 'mobx-react-lite';
|
|||
import FooterContent from './FooterContent';
|
||||
|
||||
interface Props {
|
||||
dashboardId: number;
|
||||
dashboardId?: number;
|
||||
siteId: string;
|
||||
}
|
||||
function MetricsLibraryModal(props: Props) {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ interface Props {
|
|||
function MetricsView({ siteId }: Props) {
|
||||
return useObserver(() => (
|
||||
<div style={{ maxWidth: '1300px', margin: 'auto' }} className="bg-white rounded pt-4 border">
|
||||
<MetricViewHeader />
|
||||
<MetricViewHeader siteId={siteId} />
|
||||
<MetricsList siteId={siteId} />
|
||||
</div>
|
||||
));
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue