Moved code into src folder. Added build for component library.
This commit is contained in:
Mike Cao
157
src/components/pages/console/TestConsole.js
Normal file
157
src/components/pages/console/TestConsole.js
Normal file
@@ -0,0 +1,157 @@
|
||||
import WebsiteSelect from 'components/input/WebsiteSelect';
|
||||
import Page from 'components/layout/Page';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import EventsChart from 'components/metrics/EventsChart';
|
||||
import WebsiteChart from 'components/pages/websites/WebsiteChart';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
import Script from 'next/script';
|
||||
import { Button, Column, Row } from 'react-basics';
|
||||
import styles from './TestConsole.module.css';
|
||||
|
||||
export function TestConsole() {
|
||||
const { get, useQuery } = useApi();
|
||||
const { data, isLoading, error } = useQuery(['websites:me'], () => get('/me/websites'));
|
||||
const router = useRouter();
|
||||
const {
|
||||
basePath,
|
||||
query: { id },
|
||||
} = router;
|
||||
|
||||
function handleChange(value) {
|
||||
router.push(`/console/${value}`);
|
||||
}
|
||||
|
||||
function handleClick() {
|
||||
window.umami.track({ url: '/page-view', referrer: 'https://www.google.com' });
|
||||
window.umami.track('track-event-no-data');
|
||||
window.umami.track('track-event-with-data', {
|
||||
test: 'test-data',
|
||||
boolean: true,
|
||||
booleanError: 'true',
|
||||
time: new Date(),
|
||||
number: 1,
|
||||
number2: Math.random() * 100,
|
||||
time2: new Date().toISOString(),
|
||||
nested: {
|
||||
test: 'test-data',
|
||||
number: 1,
|
||||
object: {
|
||||
test: 'test-data',
|
||||
},
|
||||
},
|
||||
array: [1, 2, 3],
|
||||
});
|
||||
}
|
||||
|
||||
function handleIdentifyClick() {
|
||||
window.umami.identify({
|
||||
userId: 123,
|
||||
name: 'brian',
|
||||
number: Math.random() * 100,
|
||||
test: 'test-data',
|
||||
boolean: true,
|
||||
booleanError: 'true',
|
||||
time: new Date(),
|
||||
time2: new Date().toISOString(),
|
||||
nested: {
|
||||
test: 'test-data',
|
||||
number: 1,
|
||||
object: {
|
||||
test: 'test-data',
|
||||
},
|
||||
},
|
||||
array: [1, 2, 3],
|
||||
});
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const [websiteId] = id || [];
|
||||
const website = data?.data.find(({ id }) => websiteId === id);
|
||||
|
||||
return (
|
||||
<Page loading={isLoading} error={error}>
|
||||
<Head>
|
||||
<title>{website ? `${website.name} | Umami Console` : 'Umami Console'}</title>
|
||||
</Head>
|
||||
<PageHeader title="Test console">
|
||||
<WebsiteSelect websiteId={website?.id} onSelect={handleChange} />
|
||||
</PageHeader>
|
||||
{website && (
|
||||
<>
|
||||
<Script
|
||||
async
|
||||
data-website-id={website.id}
|
||||
src={`${basePath}/script.js`}
|
||||
data-cache="true"
|
||||
/>
|
||||
<Row className={styles.test}>
|
||||
<Column xs="4">
|
||||
<div className={styles.header}>Page links</div>
|
||||
<div>
|
||||
<Link href={`/console/${websiteId}/page/1/?q=abc`}>page one</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link href={`/console/${websiteId}/page/2/?q=123 `}>page two</Link>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://www.google.com" data-umami-event="external-link-direct">
|
||||
external link (direct)
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://www.google.com"
|
||||
data-umami-event="external-link-tab"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
external link (tab)
|
||||
</a>
|
||||
</div>
|
||||
</Column>
|
||||
<Column xs="4">
|
||||
<div className={styles.header}>Click events</div>
|
||||
<Button id="send-event-button" data-umami-event="button-click" variant="action">
|
||||
Send event
|
||||
</Button>
|
||||
<p />
|
||||
<Button
|
||||
id="send-event-data-button"
|
||||
data-umami-event="button-click"
|
||||
data-umami-event-name="bob"
|
||||
data-umami-event-id="123"
|
||||
variant="action"
|
||||
>
|
||||
Send event with data
|
||||
</Button>
|
||||
</Column>
|
||||
<Column xs="4">
|
||||
<div className={styles.header}>Javascript events</div>
|
||||
<Button id="manual-button" variant="action" onClick={handleClick}>
|
||||
Run script
|
||||
</Button>
|
||||
<p />
|
||||
<Button id="manual-button" variant="action" onClick={handleIdentifyClick}>
|
||||
Run identify
|
||||
</Button>
|
||||
</Column>
|
||||
</Row>
|
||||
<Row>
|
||||
<Column>
|
||||
<WebsiteChart websiteId={website.id} />
|
||||
<EventsChart websiteId={website.id} />
|
||||
</Column>
|
||||
</Row>
|
||||
</>
|
||||
)}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
export default TestConsole;
|
||||
11
src/components/pages/console/TestConsole.module.css
Normal file
11
src/components/pages/console/TestConsole.module.css
Normal file
@@ -0,0 +1,11 @@
|
||||
.test {
|
||||
border: 1px solid var(--base400);
|
||||
border-radius: 5px;
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin: 20px 0;
|
||||
}
|
||||
71
src/components/pages/dashboard/Dashboard.js
Normal file
71
src/components/pages/dashboard/Dashboard.js
Normal file
@@ -0,0 +1,71 @@
|
||||
import { useState } from 'react';
|
||||
import { Button, Icon, Icons, Text, Flexbox } from 'react-basics';
|
||||
import Link from 'next/link';
|
||||
import Page from 'components/layout/Page';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import WebsiteChartList from 'components/pages/websites/WebsiteChartList';
|
||||
import DashboardSettingsButton from 'components/pages/dashboard/DashboardSettingsButton';
|
||||
import DashboardEdit from 'components/pages/dashboard/DashboardEdit';
|
||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useDashboard from 'store/dashboard';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import useLocale from 'components/hooks/useLocale';
|
||||
|
||||
export function Dashboard() {
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const dashboard = useDashboard();
|
||||
const { showCharts, limit, editing } = dashboard;
|
||||
const [max, setMax] = useState(limit);
|
||||
const { get, useQuery } = useApi();
|
||||
const { data, isLoading, error } = useQuery(['websites'], () =>
|
||||
get('/websites', { includeTeams: 1 }),
|
||||
);
|
||||
const hasData = data && data?.data.length !== 0;
|
||||
|
||||
const { dir } = useLocale();
|
||||
|
||||
function handleMore() {
|
||||
setMax(max + limit);
|
||||
}
|
||||
|
||||
return (
|
||||
<Page loading={isLoading} error={error}>
|
||||
<PageHeader title={formatMessage(labels.dashboard)}>
|
||||
{!editing && hasData && <DashboardSettingsButton />}
|
||||
</PageHeader>
|
||||
{!hasData && (
|
||||
<EmptyPlaceholder message={formatMessage(messages.noWebsitesConfigured)}>
|
||||
<Link href="/settings/websites">
|
||||
<Button>
|
||||
<Icon rotate={dir === 'rtl' ? 180 : 0}>
|
||||
<Icons.ArrowRight />
|
||||
</Icon>
|
||||
<Text>{formatMessage(messages.goToSettings)}</Text>
|
||||
</Button>
|
||||
</Link>
|
||||
</EmptyPlaceholder>
|
||||
)}
|
||||
{hasData && (
|
||||
<>
|
||||
{editing && <DashboardEdit websites={data?.data} />}
|
||||
{!editing && (
|
||||
<WebsiteChartList websites={data?.data} showCharts={showCharts} limit={max} />
|
||||
)}
|
||||
{max < data.length && (
|
||||
<Flexbox justifyContent="center">
|
||||
<Button onClick={handleMore}>
|
||||
<Icon rotate={dir === 'rtl' ? 180 : 0}>
|
||||
<Icons.More />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.more)}</Text>
|
||||
</Button>
|
||||
</Flexbox>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
export default Dashboard;
|
||||
102
src/components/pages/dashboard/DashboardEdit.js
Normal file
102
src/components/pages/dashboard/DashboardEdit.js
Normal file
@@ -0,0 +1,102 @@
|
||||
import { useState, useMemo } from 'react';
|
||||
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
|
||||
import classNames from 'classnames';
|
||||
import { Button } from 'react-basics';
|
||||
import { firstBy } from 'thenby';
|
||||
import useDashboard, { saveDashboard } from 'store/dashboard';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import styles from './DashboardEdit.module.css';
|
||||
|
||||
const dragId = 'dashboard-website-ordering';
|
||||
|
||||
export function DashboardEdit({ websites }) {
|
||||
const settings = useDashboard();
|
||||
const { websiteOrder } = settings;
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const [order, setOrder] = useState(websiteOrder || []);
|
||||
|
||||
const ordered = useMemo(
|
||||
() =>
|
||||
websites
|
||||
.map(website => ({ ...website, order: order.indexOf(website.id) }))
|
||||
.sort(firstBy('order')),
|
||||
[websites, order],
|
||||
);
|
||||
|
||||
function handleWebsiteDrag({ destination, source }) {
|
||||
if (!destination || destination.index === source.index) return;
|
||||
|
||||
const orderedWebsites = [...ordered];
|
||||
const [removed] = orderedWebsites.splice(source.index, 1);
|
||||
orderedWebsites.splice(destination.index, 0, removed);
|
||||
|
||||
setOrder(orderedWebsites.map(website => website?.id || 0));
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
saveDashboard({
|
||||
editing: false,
|
||||
websiteOrder: order,
|
||||
});
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
saveDashboard({ editing: false, websiteOrder });
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
setOrder([]);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.buttons}>
|
||||
<Button onClick={handleSave} variant="action" size="small">
|
||||
{formatMessage(labels.save)}
|
||||
</Button>
|
||||
<Button onClick={handleCancel} size="small">
|
||||
{formatMessage(labels.cancel)}
|
||||
</Button>
|
||||
<Button onClick={handleReset} size="small">
|
||||
{formatMessage(labels.reset)}
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles.dragActive}>
|
||||
<DragDropContext onDragEnd={handleWebsiteDrag}>
|
||||
<Droppable droppableId={dragId}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
{...provided.droppableProps}
|
||||
ref={provided.innerRef}
|
||||
style={{ marginBottom: snapshot.isDraggingOver ? 260 : null }}
|
||||
>
|
||||
{ordered.map(({ id, name, domain }, index) => (
|
||||
<Draggable key={id} draggableId={`${dragId}-${id}`} index={index}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
className={classNames(styles.item, {
|
||||
[styles.active]: snapshot.isDragging,
|
||||
})}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
<div className={styles.text}>
|
||||
<h1>{name}</h1>
|
||||
<h2>{domain}</h2>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardEdit;
|
||||
40
src/components/pages/dashboard/DashboardEdit.module.css
Normal file
40
src/components/pages/dashboard/DashboardEdit.module.css
Normal file
@@ -0,0 +1,40 @@
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.item h1 {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.item h2 {
|
||||
font-size: 14px;
|
||||
color: var(--base700);
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--base400);
|
||||
background: var(--base50);
|
||||
}
|
||||
|
||||
.active .text {
|
||||
border-color: var(--base600);
|
||||
box-shadow: 4px 4px 4px var(--base100);
|
||||
}
|
||||
|
||||
.dragActive {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.dragActive:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
36
src/components/pages/dashboard/DashboardSettingsButton.js
Normal file
36
src/components/pages/dashboard/DashboardSettingsButton.js
Normal file
@@ -0,0 +1,36 @@
|
||||
import { TooltipPopup, Icon, Text, Flexbox, Button } from 'react-basics';
|
||||
import Icons from 'components/icons';
|
||||
import { saveDashboard } from 'store/dashboard';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
export function DashboardSettingsButton() {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
const handleToggleCharts = () => {
|
||||
saveDashboard(state => ({ showCharts: !state.showCharts }));
|
||||
};
|
||||
|
||||
const handleEdit = () => {
|
||||
saveDashboard({ editing: true });
|
||||
};
|
||||
|
||||
return (
|
||||
<Flexbox gap={10}>
|
||||
<TooltipPopup label={formatMessage(labels.toggleCharts)} position="bottom">
|
||||
<Button onClick={handleToggleCharts}>
|
||||
<Icon>
|
||||
<Icons.BarChart />
|
||||
</Icon>
|
||||
</Button>
|
||||
</TooltipPopup>
|
||||
<Button onClick={handleEdit}>
|
||||
<Icon>
|
||||
<Icons.Edit />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.edit)}</Text>
|
||||
</Button>
|
||||
</Flexbox>
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardSettingsButton;
|
||||
@@ -0,0 +1,5 @@
|
||||
.buttonGroup {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
59
src/components/pages/event-data/EventDataMetricsBar.js
Normal file
59
src/components/pages/event-data/EventDataMetricsBar.js
Normal file
@@ -0,0 +1,59 @@
|
||||
import { Column, Row } from 'react-basics';
|
||||
import { useApi, useDateRange } from 'components/hooks';
|
||||
import MetricCard from 'components/metrics/MetricCard';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
|
||||
import MetricsBar from 'components/metrics/MetricsBar';
|
||||
import styles from './EventDataMetricsBar.module.css';
|
||||
|
||||
export function EventDataMetricsBar({ websiteId }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { get, useQuery } = useApi();
|
||||
const [dateRange] = useDateRange(websiteId);
|
||||
const { startDate, endDate, modified } = dateRange;
|
||||
|
||||
const { data, error, isLoading, isFetched } = useQuery(
|
||||
['event-data:stats', { websiteId, startDate, endDate, modified }],
|
||||
() =>
|
||||
get(`/event-data/stats`, {
|
||||
websiteId,
|
||||
startAt: +startDate,
|
||||
endAt: +endDate,
|
||||
}),
|
||||
);
|
||||
|
||||
return (
|
||||
<Row className={styles.row}>
|
||||
<Column defaultSize={12} xl={8}>
|
||||
<MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
|
||||
{!error && isFetched && (
|
||||
<>
|
||||
<MetricCard
|
||||
className={styles.card}
|
||||
label={formatMessage(labels.events)}
|
||||
value={data?.events}
|
||||
/>
|
||||
<MetricCard
|
||||
className={styles.card}
|
||||
label={formatMessage(labels.fields)}
|
||||
value={data?.fields}
|
||||
/>
|
||||
<MetricCard
|
||||
className={styles.card}
|
||||
label={formatMessage(labels.totalRecords)}
|
||||
value={data?.records}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</MetricsBar>
|
||||
</Column>
|
||||
<Column defaultSize={12} xl={4}>
|
||||
<div className={styles.actions}>
|
||||
<WebsiteDateFilter websiteId={websiteId} />
|
||||
</div>
|
||||
</Column>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
export default EventDataMetricsBar;
|
||||
@@ -0,0 +1,46 @@
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
min-height: 90px;
|
||||
margin-bottom: 20px;
|
||||
background: var(--base50);
|
||||
z-index: var(--z-index-above);
|
||||
}
|
||||
|
||||
.metrics {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
min-height: 110px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card {
|
||||
justify-self: flex-start;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.card {
|
||||
flex-basis: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
37
src/components/pages/event-data/EventDataTable.js
Normal file
37
src/components/pages/event-data/EventDataTable.js
Normal file
@@ -0,0 +1,37 @@
|
||||
import Link from 'next/link';
|
||||
import { GridTable, GridColumn } from 'react-basics';
|
||||
import { useMessages, usePageQuery } from 'components/hooks';
|
||||
import Empty from 'components/common/Empty';
|
||||
import { DATA_TYPES } from 'lib/constants';
|
||||
|
||||
export function EventDataTable({ data = [] }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { resolveUrl } = usePageQuery();
|
||||
|
||||
if (data.length === 0) {
|
||||
return <Empty />;
|
||||
}
|
||||
|
||||
return (
|
||||
<GridTable data={data}>
|
||||
<GridColumn name="eventName" label={formatMessage(labels.event)}>
|
||||
{row => (
|
||||
<Link href={resolveUrl({ event: row.eventName })} shallow={true}>
|
||||
{row.eventName}
|
||||
</Link>
|
||||
)}
|
||||
</GridColumn>
|
||||
<GridColumn name="fieldName" label={formatMessage(labels.field)}>
|
||||
{row => row.fieldName}
|
||||
</GridColumn>
|
||||
<GridColumn name="dataType" label={formatMessage(labels.type)}>
|
||||
{row => DATA_TYPES[row.dataType]}
|
||||
</GridColumn>
|
||||
<GridColumn name="total" label={formatMessage(labels.totalRecords)}>
|
||||
{({ total }) => total.toLocaleString()}
|
||||
</GridColumn>
|
||||
</GridTable>
|
||||
);
|
||||
}
|
||||
|
||||
export default EventDataTable;
|
||||
49
src/components/pages/event-data/EventDataValueTable.js
Normal file
49
src/components/pages/event-data/EventDataValueTable.js
Normal file
@@ -0,0 +1,49 @@
|
||||
import { GridTable, GridColumn, Button, Icon, Text } from 'react-basics';
|
||||
import { useMessages, usePageQuery } from 'components/hooks';
|
||||
import Link from 'next/link';
|
||||
import Icons from 'components/icons';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import Empty from 'components/common/Empty';
|
||||
import { DATA_TYPES } from 'lib/constants';
|
||||
|
||||
export function EventDataValueTable({ data = [], event }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { resolveUrl } = usePageQuery();
|
||||
|
||||
const Title = () => {
|
||||
return (
|
||||
<>
|
||||
<Link href={resolveUrl({ event: undefined })}>
|
||||
<Button>
|
||||
<Icon rotate={180}>
|
||||
<Icons.ArrowRight />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.back)}</Text>
|
||||
</Button>
|
||||
</Link>
|
||||
<Text>{event}</Text>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader title={<Title />} />
|
||||
{data.length <= 0 && <Empty />}
|
||||
{data.length > 0 && (
|
||||
<GridTable data={data}>
|
||||
<GridColumn name="fieldName" label={formatMessage(labels.field)} />
|
||||
<GridColumn name="dataType" label={formatMessage(labels.type)}>
|
||||
{row => DATA_TYPES[row.dataType]}
|
||||
</GridColumn>
|
||||
<GridColumn name="fieldValue" label={formatMessage(labels.value)} />
|
||||
<GridColumn name="total" label={formatMessage(labels.totalRecords)} width="200px">
|
||||
{({ total }) => total.toLocaleString()}
|
||||
</GridColumn>
|
||||
</GridTable>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default EventDataValueTable;
|
||||
64
src/components/pages/login/LoginForm.js
Normal file
64
src/components/pages/login/LoginForm.js
Normal file
@@ -0,0 +1,64 @@
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import {
|
||||
Form,
|
||||
FormRow,
|
||||
FormInput,
|
||||
FormButtons,
|
||||
TextField,
|
||||
PasswordField,
|
||||
SubmitButton,
|
||||
Icon,
|
||||
} from 'react-basics';
|
||||
import { useRouter } from 'next/router';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import { setUser } from 'store/app';
|
||||
import { setClientAuthToken } from 'lib/client';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import Logo from 'assets/logo.svg';
|
||||
import styles from './LoginForm.module.css';
|
||||
|
||||
export function LoginForm() {
|
||||
const { formatMessage, labels, getMessage } = useMessages();
|
||||
const router = useRouter();
|
||||
const { post } = useApi();
|
||||
const { mutate, error, isLoading } = useMutation(data => post('/auth/login', data));
|
||||
|
||||
const handleSubmit = async data => {
|
||||
mutate(data, {
|
||||
onSuccess: async ({ token, user }) => {
|
||||
setClientAuthToken(token);
|
||||
setUser(user);
|
||||
|
||||
await router.push('/dashboard');
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.login}>
|
||||
<Icon className={styles.icon} size="xl">
|
||||
<Logo />
|
||||
</Icon>
|
||||
<div className={styles.title}>umami</div>
|
||||
<Form className={styles.form} onSubmit={handleSubmit} error={getMessage(error)}>
|
||||
<FormRow label={formatMessage(labels.username)}>
|
||||
<FormInput name="username" rules={{ required: formatMessage(labels.required) }}>
|
||||
<TextField autoComplete="off" />
|
||||
</FormInput>
|
||||
</FormRow>
|
||||
<FormRow label={formatMessage(labels.password)}>
|
||||
<FormInput name="password" rules={{ required: formatMessage(labels.required) }}>
|
||||
<PasswordField />
|
||||
</FormInput>
|
||||
</FormRow>
|
||||
<FormButtons>
|
||||
<SubmitButton className={styles.button} variant="primary" disabled={isLoading}>
|
||||
{formatMessage(labels.login)}
|
||||
</SubmitButton>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LoginForm;
|
||||
33
src/components/pages/login/LoginForm.module.css
Normal file
33
src/components/pages/login/LoginForm.module.css
Normal file
@@ -0,0 +1,33 @@
|
||||
.login {
|
||||
width: 400px;
|
||||
margin: auto;
|
||||
transform: translateY(-25%);
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.button {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
18
src/components/pages/login/LoginLayout.js
Normal file
18
src/components/pages/login/LoginLayout.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import Head from 'next/head';
|
||||
import useLocale from 'components/hooks/useLocale';
|
||||
import styles from './LoginLayout.module.css';
|
||||
|
||||
export function LoginLayout({ children }) {
|
||||
const { dir } = useLocale();
|
||||
|
||||
return (
|
||||
<div className={styles.layout} dir={dir}>
|
||||
<Head>
|
||||
<title>{`Login | umami`}</title>
|
||||
</Head>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LoginLayout;
|
||||
8
src/components/pages/login/LoginLayout.module.css
Normal file
8
src/components/pages/login/LoginLayout.module.css
Normal file
@@ -0,0 +1,8 @@
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
background: var(--base75);
|
||||
}
|
||||
36
src/components/pages/realtime/RealtimeCountries.js
Normal file
36
src/components/pages/realtime/RealtimeCountries.js
Normal file
@@ -0,0 +1,36 @@
|
||||
import { useCallback } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import DataTable from 'components/metrics/DataTable';
|
||||
import useLocale from 'components/hooks/useLocale';
|
||||
import useCountryNames from 'components/hooks/useCountryNames';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import classNames from 'classnames';
|
||||
import styles from './RealtimeCountries.module.css';
|
||||
|
||||
export function RealtimeCountries({ data }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { locale } = useLocale();
|
||||
const countryNames = useCountryNames(locale);
|
||||
const { basePath } = useRouter();
|
||||
|
||||
const renderCountryName = useCallback(
|
||||
({ x: code }) => (
|
||||
<span className={classNames(locale, styles.row)}>
|
||||
<img src={`${basePath}/images/flags/${code?.toLowerCase() || 'xx'}.png`} alt={code} />
|
||||
{countryNames[code]}
|
||||
</span>
|
||||
),
|
||||
[countryNames, locale, basePath],
|
||||
);
|
||||
|
||||
return (
|
||||
<DataTable
|
||||
title={formatMessage(labels.countries)}
|
||||
metric={formatMessage(labels.visitors)}
|
||||
data={data}
|
||||
renderLabel={renderCountryName}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default RealtimeCountries;
|
||||
@@ -0,0 +1,5 @@
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
41
src/components/pages/realtime/RealtimeHeader.js
Normal file
41
src/components/pages/realtime/RealtimeHeader.js
Normal file
@@ -0,0 +1,41 @@
|
||||
import MetricCard from 'components/metrics/MetricCard';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import styles from './RealtimeHeader.module.css';
|
||||
|
||||
export function RealtimeHeader({ data = {} }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { pageviews, visitors, events, countries } = data;
|
||||
|
||||
return (
|
||||
<div className={styles.header}>
|
||||
<div className={styles.metrics}>
|
||||
<MetricCard
|
||||
className={styles.card}
|
||||
label={formatMessage(labels.views)}
|
||||
value={pageviews?.length}
|
||||
hideComparison
|
||||
/>
|
||||
<MetricCard
|
||||
className={styles.card}
|
||||
label={formatMessage(labels.visitors)}
|
||||
value={visitors?.length}
|
||||
hideComparison
|
||||
/>
|
||||
<MetricCard
|
||||
className={styles.card}
|
||||
label={formatMessage(labels.events)}
|
||||
value={events?.length}
|
||||
hideComparison
|
||||
/>
|
||||
<MetricCard
|
||||
className={styles.card}
|
||||
label={formatMessage(labels.countries)}
|
||||
value={countries?.length}
|
||||
hideComparison
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RealtimeHeader;
|
||||
21
src/components/pages/realtime/RealtimeHeader.module.css
Normal file
21
src/components/pages/realtime/RealtimeHeader.module.css
Normal file
@@ -0,0 +1,21 @@
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.metrics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card {
|
||||
justify-self: flex-start;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.card {
|
||||
flex-basis: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
31
src/components/pages/realtime/RealtimeHome.js
Normal file
31
src/components/pages/realtime/RealtimeHome.js
Normal file
@@ -0,0 +1,31 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import Page from 'components/layout/Page';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
export function RealtimeHome() {
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { get, useQuery } = useApi();
|
||||
const router = useRouter();
|
||||
const { data, isLoading, error } = useQuery(['websites:me'], () => get('/me/websites'));
|
||||
|
||||
useEffect(() => {
|
||||
if (data?.length) {
|
||||
router.push(`realtime/${data[0].id}`);
|
||||
}
|
||||
}, [data, router]);
|
||||
|
||||
return (
|
||||
<Page loading={isLoading || data?.length > 0} error={error}>
|
||||
<PageHeader title={formatMessage(labels.realtime)} />
|
||||
{data?.length === 0 && (
|
||||
<EmptyPlaceholder message={formatMessage(messages.noWebsitesConfigured)} />
|
||||
)}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
export default RealtimeHome;
|
||||
158
src/components/pages/realtime/RealtimeLog.js
Normal file
158
src/components/pages/realtime/RealtimeLog.js
Normal file
@@ -0,0 +1,158 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { StatusLight, Icon, Text } from 'react-basics';
|
||||
import { FixedSizeList } from 'react-window';
|
||||
import firstBy from 'thenby';
|
||||
import FilterButtons from 'components/common/FilterButtons';
|
||||
import Empty from 'components/common/Empty';
|
||||
import useLocale from 'components/hooks/useLocale';
|
||||
import useCountryNames from 'components/hooks/useCountryNames';
|
||||
import { BROWSERS } from 'lib/constants';
|
||||
import { stringToColor } from 'lib/format';
|
||||
import { formatDate } from 'lib/date';
|
||||
import { safeDecodeURI } from 'next-basics';
|
||||
import Icons from 'components/icons';
|
||||
import styles from './RealtimeLog.module.css';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
const TYPE_ALL = 'all';
|
||||
const TYPE_PAGEVIEW = 'pageview';
|
||||
const TYPE_SESSION = 'session';
|
||||
const TYPE_EVENT = 'event';
|
||||
|
||||
const icons = {
|
||||
[TYPE_PAGEVIEW]: <Icons.Eye />,
|
||||
[TYPE_SESSION]: <Icons.Visitor />,
|
||||
[TYPE_EVENT]: <Icons.Bolt />,
|
||||
};
|
||||
|
||||
export function RealtimeLog({ data, websiteDomain }) {
|
||||
const { formatMessage, labels, messages, FormattedMessage } = useMessages();
|
||||
const { locale } = useLocale();
|
||||
const countryNames = useCountryNames(locale);
|
||||
const [filter, setFilter] = useState(TYPE_ALL);
|
||||
|
||||
const buttons = [
|
||||
{
|
||||
label: formatMessage(labels.all),
|
||||
key: TYPE_ALL,
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.views),
|
||||
key: TYPE_PAGEVIEW,
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.visitors),
|
||||
key: TYPE_SESSION,
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.events),
|
||||
key: TYPE_EVENT,
|
||||
},
|
||||
];
|
||||
|
||||
const getTime = ({ createdAt }) => formatDate(new Date(createdAt), 'pp', locale);
|
||||
|
||||
const getColor = ({ id, sessionId }) => stringToColor(sessionId || id);
|
||||
|
||||
const getIcon = ({ __type }) => icons[__type];
|
||||
|
||||
const getDetail = log => {
|
||||
const { __type, eventName, urlPath: url, browser, os, country, device } = log;
|
||||
|
||||
if (__type === TYPE_EVENT) {
|
||||
return (
|
||||
<FormattedMessage
|
||||
{...messages.eventLog}
|
||||
values={{
|
||||
event: <b>{eventName || formatMessage(labels.unknown)}</b>,
|
||||
url: (
|
||||
<a
|
||||
href={`//${websiteDomain}${url}`}
|
||||
className={styles.link}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
{url}
|
||||
</a>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (__type === TYPE_PAGEVIEW) {
|
||||
return (
|
||||
<a
|
||||
href={`//${websiteDomain}${url}`}
|
||||
className={styles.link}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
{safeDecodeURI(url)}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
if (__type === TYPE_SESSION) {
|
||||
return (
|
||||
<FormattedMessage
|
||||
{...messages.visitorLog}
|
||||
values={{
|
||||
country: <b>{countryNames[country] || formatMessage(labels.unknown)}</b>,
|
||||
browser: <b>{BROWSERS[browser]}</b>,
|
||||
os: <b>{os}</b>,
|
||||
device: <b>{formatMessage(labels[device] || labels.unknown)}</b>,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const Row = ({ index, style }) => {
|
||||
const row = logs[index];
|
||||
return (
|
||||
<div className={styles.row} style={style}>
|
||||
<div>
|
||||
<StatusLight color={getColor(row)} />
|
||||
</div>
|
||||
<div className={styles.time}>{getTime(row)}</div>
|
||||
<div className={styles.detail}>
|
||||
<Icon className={styles.icon}>{getIcon(row)}</Icon>
|
||||
<Text>{getDetail(row)}</Text>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const logs = useMemo(() => {
|
||||
if (!data) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const { pageviews, visitors, events } = data;
|
||||
const logs = [...pageviews, ...visitors, ...events].sort(firstBy('createdAt', -1));
|
||||
|
||||
if (filter !== TYPE_ALL) {
|
||||
return logs.filter(({ __type }) => __type === filter);
|
||||
}
|
||||
|
||||
return logs;
|
||||
}, [data, filter]);
|
||||
|
||||
return (
|
||||
<div className={styles.table}>
|
||||
<FilterButtons items={buttons} selectedKey={filter} onSelect={setFilter} />
|
||||
<div className={styles.header}>{formatMessage(labels.activityLog)}</div>
|
||||
<div className={styles.body}>
|
||||
{logs?.length === 0 && <Empty />}
|
||||
{logs?.length > 0 && (
|
||||
<FixedSizeList height={500} itemCount={logs.length} itemSize={50}>
|
||||
{Row}
|
||||
</FixedSizeList>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RealtimeLog;
|
||||
69
src/components/pages/realtime/RealtimeLog.module.css
Normal file
69
src/components/pages/realtime/RealtimeLog.module.css
Normal file
@@ -0,0 +1,69 @@
|
||||
.table {
|
||||
font-size: var(--font-size-sm);
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: var(--font-size-md);
|
||||
line-height: 40px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid var(--base300);
|
||||
}
|
||||
|
||||
.body {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.time {
|
||||
min-width: 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.website {
|
||||
text-align: right;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.detail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
gap: 10px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail > span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.row .link {
|
||||
color: var(--base900);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.row .link:hover {
|
||||
color: var(--primary400);
|
||||
}
|
||||
117
src/components/pages/realtime/RealtimePage.js
Normal file
117
src/components/pages/realtime/RealtimePage.js
Normal file
@@ -0,0 +1,117 @@
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { subMinutes, startOfMinute } from 'date-fns';
|
||||
import firstBy from 'thenby';
|
||||
import { GridRow, GridColumn } from 'components/layout/Grid';
|
||||
import Page from 'components/layout/Page';
|
||||
import RealtimeChart from 'components/metrics/RealtimeChart';
|
||||
import WorldMap from 'components/common/WorldMap';
|
||||
import RealtimeLog from 'components/pages/realtime/RealtimeLog';
|
||||
import RealtimeHeader from 'components/pages/realtime/RealtimeHeader';
|
||||
import RealtimeUrls from 'components/pages/realtime/RealtimeUrls';
|
||||
import RealtimeCountries from 'components/pages/realtime/RealtimeCountries';
|
||||
import WebsiteHeader from 'components/pages/websites/WebsiteHeader';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import { percentFilter } from 'lib/filters';
|
||||
import { REALTIME_RANGE, REALTIME_INTERVAL } from 'lib/constants';
|
||||
import styles from './RealtimePage.module.css';
|
||||
import { useWebsite } from 'components/hooks';
|
||||
|
||||
function mergeData(state = [], data = [], time) {
|
||||
const ids = state.map(({ __id }) => __id);
|
||||
return state
|
||||
.concat(data.filter(({ __id }) => !ids.includes(__id)))
|
||||
.filter(({ timestamp }) => timestamp >= time);
|
||||
}
|
||||
|
||||
export function RealtimePage({ websiteId }) {
|
||||
const [currentData, setCurrentData] = useState();
|
||||
const { get, useQuery } = useApi();
|
||||
const { data: website } = useWebsite(websiteId);
|
||||
const { data, isLoading, error } = useQuery(
|
||||
['realtime', websiteId],
|
||||
() => get(`/realtime/${websiteId}`, { startAt: currentData?.timestamp || 0 }),
|
||||
{
|
||||
enabled: !!(websiteId && website),
|
||||
refetchInterval: REALTIME_INTERVAL,
|
||||
cache: false,
|
||||
},
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
const date = subMinutes(startOfMinute(new Date()), REALTIME_RANGE);
|
||||
const time = date.getTime();
|
||||
|
||||
setCurrentData(state => ({
|
||||
pageviews: mergeData(state?.pageviews, data.pageviews, time),
|
||||
sessions: mergeData(state?.sessions, data.sessions, time),
|
||||
events: mergeData(state?.events, data.events, time),
|
||||
timestamp: data.timestamp,
|
||||
}));
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
const realtimeData = useMemo(() => {
|
||||
if (!currentData) {
|
||||
return { pageviews: [], sessions: [], events: [], countries: [], visitors: [] };
|
||||
}
|
||||
|
||||
currentData.countries = percentFilter(
|
||||
currentData.sessions
|
||||
.reduce((arr, data) => {
|
||||
if (!arr.find(({ id }) => id === data.id)) {
|
||||
return arr.concat(data);
|
||||
}
|
||||
return arr;
|
||||
}, [])
|
||||
.reduce((arr, { country }) => {
|
||||
if (country) {
|
||||
const row = arr.find(({ x }) => x === country);
|
||||
|
||||
if (!row) {
|
||||
arr.push({ x: country, y: 1 });
|
||||
} else {
|
||||
row.y += 1;
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
}, [])
|
||||
.sort(firstBy('y', -1)),
|
||||
);
|
||||
|
||||
currentData.visitors = currentData.sessions.reduce((arr, val) => {
|
||||
if (!arr.find(({ id }) => id === val.id)) {
|
||||
return arr.concat(val);
|
||||
}
|
||||
return arr;
|
||||
}, []);
|
||||
|
||||
return currentData;
|
||||
}, [currentData]);
|
||||
|
||||
return (
|
||||
<Page loading={isLoading} error={error}>
|
||||
<WebsiteHeader websiteId={websiteId} />
|
||||
<RealtimeHeader websiteId={websiteId} data={currentData} />
|
||||
<RealtimeChart className={styles.chart} data={realtimeData} unit="minute" />
|
||||
<GridRow>
|
||||
<GridColumn xs={12} sm={12} md={12} lg={4} xl={4}>
|
||||
<RealtimeUrls websiteId={websiteId} websiteDomain={website?.domain} data={realtimeData} />
|
||||
</GridColumn>
|
||||
<GridColumn xs={12} sm={12} md={12} lg={8} xl={8}>
|
||||
<RealtimeLog websiteId={websiteId} websiteDomain={website?.domain} data={realtimeData} />
|
||||
</GridColumn>
|
||||
</GridRow>
|
||||
<GridRow>
|
||||
<GridColumn xs={12} lg={4}>
|
||||
<RealtimeCountries data={realtimeData?.countries} />
|
||||
</GridColumn>
|
||||
<GridColumn xs={12} lg={8}>
|
||||
<WorldMap data={realtimeData?.countries} />
|
||||
</GridColumn>
|
||||
</GridRow>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
export default RealtimePage;
|
||||
16
src/components/pages/realtime/RealtimePage.module.css
Normal file
16
src/components/pages/realtime/RealtimePage.module.css
Normal file
@@ -0,0 +1,16 @@
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.chart {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
background: var(--base50);
|
||||
border-bottom: 1px solid var(--base300);
|
||||
z-index: var(--z-index-overlay);
|
||||
padding: 10px 0;
|
||||
}
|
||||
104
src/components/pages/realtime/RealtimeUrls.js
Normal file
104
src/components/pages/realtime/RealtimeUrls.js
Normal file
@@ -0,0 +1,104 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { ButtonGroup, Button, Flexbox } from 'react-basics';
|
||||
import firstBy from 'thenby';
|
||||
import { percentFilter } from 'lib/filters';
|
||||
import DataTable from 'components/metrics/DataTable';
|
||||
import { FILTER_PAGES, FILTER_REFERRERS } from 'lib/constants';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
export function RealtimeUrls({ websiteDomain, data = {} }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { pageviews } = data;
|
||||
const [filter, setFilter] = useState(FILTER_REFERRERS);
|
||||
const limit = 15;
|
||||
|
||||
const buttons = [
|
||||
{
|
||||
label: formatMessage(labels.referrers),
|
||||
key: FILTER_REFERRERS,
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.pages),
|
||||
key: FILTER_PAGES,
|
||||
},
|
||||
];
|
||||
|
||||
const renderLink = ({ x }) => {
|
||||
const domain = x.startsWith('/') ? websiteDomain : '';
|
||||
return (
|
||||
<a href={`//${domain}${x}`} target="_blank" rel="noreferrer noopener">
|
||||
{x}
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
const [referrers = [], pages = []] = useMemo(() => {
|
||||
if (pageviews) {
|
||||
const referrers = percentFilter(
|
||||
pageviews
|
||||
.reduce((arr, { referrerDomain }) => {
|
||||
if (referrerDomain) {
|
||||
const row = arr.find(({ x }) => x === referrerDomain);
|
||||
|
||||
if (!row) {
|
||||
arr.push({ x: referrerDomain, y: 1 });
|
||||
} else {
|
||||
row.y += 1;
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
}, [])
|
||||
.sort(firstBy('y', -1))
|
||||
.slice(0, limit),
|
||||
);
|
||||
|
||||
const pages = percentFilter(
|
||||
pageviews
|
||||
.reduce((arr, { urlPath }) => {
|
||||
const row = arr.find(({ x }) => x === urlPath);
|
||||
|
||||
if (!row) {
|
||||
arr.push({ x: urlPath, y: 1 });
|
||||
} else {
|
||||
row.y += 1;
|
||||
}
|
||||
return arr;
|
||||
}, [])
|
||||
.sort(firstBy('y', -1))
|
||||
.slice(0, limit),
|
||||
);
|
||||
|
||||
return [referrers, pages];
|
||||
}
|
||||
|
||||
return [];
|
||||
}, [pageviews]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flexbox justifyContent="center">
|
||||
<ButtonGroup items={buttons} selectedKey={filter} onSelect={setFilter}>
|
||||
{({ key, label }) => <Button key={key}>{label}</Button>}
|
||||
</ButtonGroup>
|
||||
</Flexbox>
|
||||
{filter === FILTER_REFERRERS && (
|
||||
<DataTable
|
||||
title={formatMessage(labels.referrers)}
|
||||
metric={formatMessage(labels.views)}
|
||||
renderLabel={renderLink}
|
||||
data={referrers}
|
||||
/>
|
||||
)}
|
||||
{filter === FILTER_PAGES && (
|
||||
<DataTable
|
||||
title={formatMessage(labels.pages)}
|
||||
metric={formatMessage(labels.views)}
|
||||
renderLabel={renderLink}
|
||||
data={pages}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default RealtimeUrls;
|
||||
55
src/components/pages/reports/BaseParameters.js
Normal file
55
src/components/pages/reports/BaseParameters.js
Normal file
@@ -0,0 +1,55 @@
|
||||
import { FormRow } from 'react-basics';
|
||||
import DateFilter from 'components/input/DateFilter';
|
||||
import WebsiteSelect from 'components/input/WebsiteSelect';
|
||||
import { parseDateRange } from 'lib/date';
|
||||
import { useContext } from 'react';
|
||||
import { ReportContext } from './Report';
|
||||
import { useMessages } from 'components/hooks';
|
||||
|
||||
export function BaseParameters({
|
||||
showWebsiteSelect = true,
|
||||
allowWebsiteSelect = true,
|
||||
showDateSelect = true,
|
||||
allowDateSelect = true,
|
||||
}) {
|
||||
const { report, updateReport } = useContext(ReportContext);
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
const { parameters } = report || {};
|
||||
const { websiteId, dateRange } = parameters || {};
|
||||
const { value, startDate, endDate } = dateRange || {};
|
||||
|
||||
const handleWebsiteSelect = websiteId => {
|
||||
updateReport({ websiteId, parameters: { websiteId } });
|
||||
};
|
||||
|
||||
const handleDateChange = value => {
|
||||
updateReport({ parameters: { dateRange: { ...parseDateRange(value) } } });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{showWebsiteSelect && (
|
||||
<FormRow label={formatMessage(labels.website)}>
|
||||
{allowWebsiteSelect && (
|
||||
<WebsiteSelect websiteId={websiteId} onSelect={handleWebsiteSelect} />
|
||||
)}
|
||||
</FormRow>
|
||||
)}
|
||||
{showDateSelect && (
|
||||
<FormRow label={formatMessage(labels.dateRange)}>
|
||||
{allowDateSelect && (
|
||||
<DateFilter
|
||||
value={value}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
onChange={handleDateChange}
|
||||
/>
|
||||
)}
|
||||
</FormRow>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default BaseParameters;
|
||||
44
src/components/pages/reports/FieldAddForm.js
Normal file
44
src/components/pages/reports/FieldAddForm.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import { useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { REPORT_PARAMETERS } from 'lib/constants';
|
||||
import PopupForm from './PopupForm';
|
||||
import FieldSelectForm from './FieldSelectForm';
|
||||
import FieldAggregateForm from './FieldAggregateForm';
|
||||
import FieldFilterForm from './FieldFilterForm';
|
||||
import styles from './FieldAddForm.module.css';
|
||||
|
||||
export function FieldAddForm({ fields = [], group, element, onAdd, onClose }) {
|
||||
const [selected, setSelected] = useState();
|
||||
|
||||
const handleSelect = value => {
|
||||
const { type } = value;
|
||||
|
||||
if (group === REPORT_PARAMETERS.groups || type === 'array' || type === 'boolean') {
|
||||
value.value = group === REPORT_PARAMETERS.groups ? '' : 'total';
|
||||
handleSave(value);
|
||||
return;
|
||||
}
|
||||
|
||||
setSelected(value);
|
||||
};
|
||||
|
||||
const handleSave = value => {
|
||||
onAdd(group, value);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return createPortal(
|
||||
<PopupForm className={styles.popup} element={element} onClose={onClose}>
|
||||
{!selected && <FieldSelectForm fields={fields} onSelect={handleSelect} />}
|
||||
{selected && group === REPORT_PARAMETERS.fields && (
|
||||
<FieldAggregateForm {...selected} onSelect={handleSave} />
|
||||
)}
|
||||
{selected && group === REPORT_PARAMETERS.filters && (
|
||||
<FieldFilterForm {...selected} onSelect={handleSave} />
|
||||
)}
|
||||
</PopupForm>,
|
||||
document.body,
|
||||
);
|
||||
}
|
||||
|
||||
export default FieldAddForm;
|
||||
38
src/components/pages/reports/FieldAddForm.module.css
Normal file
38
src/components/pages/reports/FieldAddForm.module.css
Normal file
@@ -0,0 +1,38 @@
|
||||
.menu {
|
||||
width: 360px;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background: var(--base75);
|
||||
}
|
||||
|
||||
.type {
|
||||
color: var(--font-color300);
|
||||
}
|
||||
|
||||
.selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.popup {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.filter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
min-width: 60px;
|
||||
}
|
||||
45
src/components/pages/reports/FieldAggregateForm.js
Normal file
45
src/components/pages/reports/FieldAggregateForm.js
Normal file
@@ -0,0 +1,45 @@
|
||||
import { Form, FormRow, Menu, Item } from 'react-basics';
|
||||
import { useMessages } from 'components/hooks';
|
||||
|
||||
export default function FieldAggregateForm({ name, type, onSelect }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
const options = {
|
||||
number: [
|
||||
{ label: formatMessage(labels.sum), value: 'sum' },
|
||||
{ label: formatMessage(labels.average), value: 'average' },
|
||||
{ label: formatMessage(labels.min), value: 'min' },
|
||||
{ label: formatMessage(labels.max), value: 'max' },
|
||||
],
|
||||
date: [
|
||||
{ label: formatMessage(labels.min), value: 'min' },
|
||||
{ label: formatMessage(labels.max), value: 'max' },
|
||||
],
|
||||
string: [
|
||||
{ label: formatMessage(labels.total), value: 'total' },
|
||||
{ label: formatMessage(labels.unique), value: 'unique' },
|
||||
],
|
||||
uuid: [
|
||||
{ label: formatMessage(labels.total), value: 'total' },
|
||||
{ label: formatMessage(labels.unique), value: 'unique' },
|
||||
],
|
||||
};
|
||||
|
||||
const items = options[type];
|
||||
|
||||
const handleSelect = value => {
|
||||
onSelect({ name, type, value });
|
||||
};
|
||||
|
||||
return (
|
||||
<Form>
|
||||
<FormRow label={name}>
|
||||
<Menu onSelect={handleSelect}>
|
||||
{items.map(({ label, value }) => {
|
||||
return <Item key={value}>{label}</Item>;
|
||||
})}
|
||||
</Menu>
|
||||
</FormRow>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
60
src/components/pages/reports/FieldFilterForm.js
Normal file
60
src/components/pages/reports/FieldFilterForm.js
Normal file
@@ -0,0 +1,60 @@
|
||||
import { useState } from 'react';
|
||||
import { Form, FormRow, Item, Flexbox, Dropdown, Button } from 'react-basics';
|
||||
import { useMessages, useFilters, useFormat } from 'components/hooks';
|
||||
import styles from './FieldFilterForm.module.css';
|
||||
|
||||
export default function FieldFilterForm({ name, label, type, values, onSelect }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const [filter, setFilter] = useState('eq');
|
||||
const [value, setValue] = useState();
|
||||
const { getFilters } = useFilters();
|
||||
const { formatValue } = useFormat();
|
||||
const filters = getFilters(type);
|
||||
|
||||
const renderFilterValue = value => {
|
||||
return filters.find(f => f.value === value)?.label;
|
||||
};
|
||||
|
||||
const renderValue = value => {
|
||||
return formatValue(value, name);
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
onSelect({ name, type, filter, value });
|
||||
};
|
||||
|
||||
return (
|
||||
<Form>
|
||||
<FormRow label={label} className={styles.filter}>
|
||||
<Flexbox gap={10}>
|
||||
<Dropdown
|
||||
className={styles.dropdown}
|
||||
items={filters}
|
||||
value={filter}
|
||||
renderValue={renderFilterValue}
|
||||
onChange={setFilter}
|
||||
>
|
||||
{({ value, label }) => {
|
||||
return <Item key={value}>{label}</Item>;
|
||||
}}
|
||||
</Dropdown>
|
||||
<Dropdown
|
||||
className={styles.dropdown}
|
||||
menuProps={{ className: styles.menu }}
|
||||
items={values}
|
||||
value={value}
|
||||
renderValue={renderValue}
|
||||
onChange={setValue}
|
||||
>
|
||||
{value => {
|
||||
return <Item key={value}>{formatValue(value, name)}</Item>;
|
||||
}}
|
||||
</Dropdown>
|
||||
</Flexbox>
|
||||
<Button variant="primary" onClick={handleAdd} disabled={!filter || !value}>
|
||||
{formatMessage(labels.add)}
|
||||
</Button>
|
||||
</FormRow>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
22
src/components/pages/reports/FieldFilterForm.module.css
Normal file
22
src/components/pages/reports/FieldFilterForm.module.css
Normal file
@@ -0,0 +1,22 @@
|
||||
.selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.popup {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.filter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
min-width: 360px;
|
||||
max-height: 300px;
|
||||
}
|
||||
24
src/components/pages/reports/FieldSelectForm.js
Normal file
24
src/components/pages/reports/FieldSelectForm.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import { Menu, Item, Form, FormRow } from 'react-basics';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import styles from './FieldSelectForm.module.css';
|
||||
|
||||
export default function FieldSelectForm({ items, onSelect, showType = true }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
return (
|
||||
<Form>
|
||||
<FormRow label={formatMessage(labels.fields)}>
|
||||
<Menu className={styles.menu} onSelect={key => onSelect(items[key])}>
|
||||
{items.map(({ name, label, type }, index) => {
|
||||
return (
|
||||
<Item key={index} className={styles.item}>
|
||||
<div>{label || name}</div>
|
||||
{showType && type && <div className={styles.type}>{type}</div>}
|
||||
</Item>
|
||||
);
|
||||
})}
|
||||
</Menu>
|
||||
</FormRow>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
20
src/components/pages/reports/FieldSelectForm.module.css
Normal file
20
src/components/pages/reports/FieldSelectForm.module.css
Normal file
@@ -0,0 +1,20 @@
|
||||
.menu {
|
||||
width: 360px;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background: var(--base75);
|
||||
}
|
||||
|
||||
.type {
|
||||
color: var(--font-color300);
|
||||
}
|
||||
42
src/components/pages/reports/FilterSelectForm.js
Normal file
42
src/components/pages/reports/FilterSelectForm.js
Normal file
@@ -0,0 +1,42 @@
|
||||
import { useState } from 'react';
|
||||
import FieldSelectForm from './FieldSelectForm';
|
||||
import FieldFilterForm from './FieldFilterForm';
|
||||
import { useApi } from 'components/hooks';
|
||||
import { Loading } from 'react-basics';
|
||||
|
||||
function useValues(websiteId, type) {
|
||||
const { get, useQuery } = useApi();
|
||||
const { data, error, isLoading } = useQuery(
|
||||
['websites:values', websiteId, type],
|
||||
() =>
|
||||
get(`/websites/${websiteId}/values`, {
|
||||
type,
|
||||
}),
|
||||
{ enabled: !!(websiteId && type) },
|
||||
);
|
||||
|
||||
return { data, error, isLoading };
|
||||
}
|
||||
|
||||
export default function FilterSelectForm({ websiteId, items, onSelect }) {
|
||||
const [field, setField] = useState();
|
||||
const { data, isLoading } = useValues(websiteId, field?.name);
|
||||
|
||||
if (!field) {
|
||||
return <FieldSelectForm items={items} onSelect={setField} showType={false} />;
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <Loading position="center" icon="dots" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<FieldFilterForm
|
||||
name={field?.name}
|
||||
label={field?.label}
|
||||
type={field?.type}
|
||||
values={data}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
);
|
||||
}
|
||||
33
src/components/pages/reports/ParameterList.js
Normal file
33
src/components/pages/reports/ParameterList.js
Normal file
@@ -0,0 +1,33 @@
|
||||
import { Icon, TooltipPopup } from 'react-basics';
|
||||
import Icons from 'components/icons';
|
||||
import Empty from 'components/common/Empty';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import styles from './ParameterList.module.css';
|
||||
|
||||
export function ParameterList({ items = [], children, onRemove }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
return (
|
||||
<div className={styles.list}>
|
||||
{!items.length && <Empty message={formatMessage(labels.none)} />}
|
||||
{items.map((item, index) => {
|
||||
return (
|
||||
<div key={index} className={styles.item}>
|
||||
{typeof children === 'function' ? children(item) : item}
|
||||
<TooltipPopup
|
||||
className={styles.icon}
|
||||
label={formatMessage(labels.remove)}
|
||||
position="right"
|
||||
>
|
||||
<Icon onClick={onRemove.bind(null, index)}>
|
||||
<Icons.Close />
|
||||
</Icon>
|
||||
</TooltipPopup>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ParameterList;
|
||||
21
src/components/pages/reports/ParameterList.module.css
Normal file
21
src/components/pages/reports/ParameterList.module.css
Normal file
@@ -0,0 +1,21 @@
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--base400);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 1px 1px 1px var(--base400);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
align-self: center;
|
||||
}
|
||||
16
src/components/pages/reports/PopupForm.js
Normal file
16
src/components/pages/reports/PopupForm.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import classNames from 'classnames';
|
||||
import styles from './PopupForm.module.css';
|
||||
|
||||
export function PopupForm({ className, style, children }) {
|
||||
return (
|
||||
<div
|
||||
className={classNames(styles.form, className)}
|
||||
style={style}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PopupForm;
|
||||
10
src/components/pages/reports/PopupForm.module.css
Normal file
10
src/components/pages/reports/PopupForm.module.css
Normal file
@@ -0,0 +1,10 @@
|
||||
.form {
|
||||
position: absolute;
|
||||
background: var(--base50);
|
||||
min-width: 300px;
|
||||
padding: 20px;
|
||||
border: 1px solid var(--base400);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
22
src/components/pages/reports/Report.js
Normal file
22
src/components/pages/reports/Report.js
Normal file
@@ -0,0 +1,22 @@
|
||||
import { createContext } from 'react';
|
||||
import Page from 'components/layout/Page';
|
||||
import styles from './reports.module.css';
|
||||
import { useReport } from 'components/hooks';
|
||||
|
||||
export const ReportContext = createContext(null);
|
||||
|
||||
export function Report({ reportId, defaultParameters, children, ...props }) {
|
||||
const report = useReport(reportId, defaultParameters);
|
||||
|
||||
//console.log({ report });
|
||||
|
||||
return (
|
||||
<ReportContext.Provider value={{ ...report }}>
|
||||
<Page {...props} className={styles.container}>
|
||||
{children}
|
||||
</Page>
|
||||
</ReportContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export default Report;
|
||||
7
src/components/pages/reports/ReportBody.js
Normal file
7
src/components/pages/reports/ReportBody.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import styles from './reports.module.css';
|
||||
|
||||
export function ReportBody({ children }) {
|
||||
return <div className={styles.body}>{children}</div>;
|
||||
}
|
||||
|
||||
export default ReportBody;
|
||||
17
src/components/pages/reports/ReportDetails.js
Normal file
17
src/components/pages/reports/ReportDetails.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import FunnelReport from './funnel/FunnelReport';
|
||||
import EventDataReport from './event-data/EventDataReport';
|
||||
import InsightsReport from './insights/InsightsReport';
|
||||
import RetentionReport from './retention/RetentionReport';
|
||||
|
||||
const reports = {
|
||||
funnel: FunnelReport,
|
||||
'event-data': EventDataReport,
|
||||
insights: InsightsReport,
|
||||
retention: RetentionReport,
|
||||
};
|
||||
|
||||
export default function ReportDetails({ reportId, reportType }) {
|
||||
const Report = reports[reportType];
|
||||
|
||||
return <Report reportId={reportId} />;
|
||||
}
|
||||
89
src/components/pages/reports/ReportHeader.js
Normal file
89
src/components/pages/reports/ReportHeader.js
Normal file
@@ -0,0 +1,89 @@
|
||||
import { useContext } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import { Icon, LoadingButton, InlineEditField, useToasts } from 'react-basics';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import { useMessages, useApi } from 'components/hooks';
|
||||
import { ReportContext } from './Report';
|
||||
import styles from './ReportHeader.module.css';
|
||||
import reportStyles from './reports.module.css';
|
||||
|
||||
export function ReportHeader({ icon }) {
|
||||
const { report, updateReport } = useContext(ReportContext);
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { showToast } = useToasts();
|
||||
const { post, useMutation } = useApi();
|
||||
const router = useRouter();
|
||||
const { mutate: create, isLoading: isCreating } = useMutation(data => post(`/reports`, data));
|
||||
const { mutate: update, isLoading: isUpdating } = useMutation(data =>
|
||||
post(`/reports/${data.id}`, data),
|
||||
);
|
||||
|
||||
const { name, description, parameters } = report || {};
|
||||
const { websiteId, dateRange } = parameters || {};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!report.id) {
|
||||
create(report, {
|
||||
onSuccess: async ({ id }) => {
|
||||
showToast({ message: formatMessage(messages.saved), variant: 'success' });
|
||||
router.push(`/reports/${id}`, null, { shallow: true });
|
||||
},
|
||||
});
|
||||
} else {
|
||||
update(report, {
|
||||
onSuccess: async () => {
|
||||
showToast({ message: formatMessage(messages.saved), variant: 'success' });
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleNameChange = name => {
|
||||
updateReport({ name: name || 'Untitled' });
|
||||
};
|
||||
|
||||
const handleDescriptionChange = description => {
|
||||
updateReport({ description });
|
||||
};
|
||||
|
||||
const Title = () => {
|
||||
return (
|
||||
<>
|
||||
<Icon size="lg">{icon}</Icon>
|
||||
<InlineEditField
|
||||
key={name}
|
||||
name="name"
|
||||
value={name}
|
||||
placeholder={formatMessage(labels.untitled)}
|
||||
onCommit={handleNameChange}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={reportStyles.header}>
|
||||
<PageHeader title={<Title />}>
|
||||
<LoadingButton
|
||||
variant="primary"
|
||||
loading={isCreating || isUpdating}
|
||||
disabled={!websiteId || !dateRange?.value || !name}
|
||||
onClick={handleSave}
|
||||
>
|
||||
{formatMessage(labels.save)}
|
||||
</LoadingButton>
|
||||
</PageHeader>
|
||||
<div className={styles.description}>
|
||||
<InlineEditField
|
||||
key={description}
|
||||
name="description"
|
||||
value={description}
|
||||
placeholder={`+ ${formatMessage(labels.addDescription)}`}
|
||||
onCommit={handleDescriptionChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ReportHeader;
|
||||
3
src/components/pages/reports/ReportHeader.module.css
Normal file
3
src/components/pages/reports/ReportHeader.module.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.description {
|
||||
color: var(--font-color300);
|
||||
}
|
||||
7
src/components/pages/reports/ReportMenu.js
Normal file
7
src/components/pages/reports/ReportMenu.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import styles from './reports.module.css';
|
||||
|
||||
export function ReportMenu({ children }) {
|
||||
return <div className={styles.menu}>{children}</div>;
|
||||
}
|
||||
|
||||
export default ReportMenu;
|
||||
71
src/components/pages/reports/ReportTemplates.js
Normal file
71
src/components/pages/reports/ReportTemplates.js
Normal file
@@ -0,0 +1,71 @@
|
||||
import Link from 'next/link';
|
||||
import { Button, Icons, Text, Icon } from 'react-basics';
|
||||
import Page from 'components/layout/Page';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import Funnel from 'assets/funnel.svg';
|
||||
import Lightbulb from 'assets/lightbulb.svg';
|
||||
import Magnet from 'assets/magnet.svg';
|
||||
import styles from './ReportTemplates.module.css';
|
||||
import { useMessages } from 'components/hooks';
|
||||
|
||||
function ReportItem({ title, description, url, icon }) {
|
||||
return (
|
||||
<div className={styles.report}>
|
||||
<div className={styles.title}>
|
||||
<Icon size="lg">{icon}</Icon>
|
||||
<Text>{title}</Text>
|
||||
</div>
|
||||
<div className={styles.description}>{description}</div>
|
||||
<div className={styles.buttons}>
|
||||
<Link href={url}>
|
||||
<Button variant="primary">
|
||||
<Icon>
|
||||
<Icons.Plus />
|
||||
</Icon>
|
||||
<Text>Create</Text>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ReportTemplates({ showHeader = true }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
const reports = [
|
||||
{
|
||||
title: formatMessage(labels.insights),
|
||||
description: 'Dive deeper into your data by using segments and filters.',
|
||||
url: '/reports/insights',
|
||||
icon: <Lightbulb />,
|
||||
},
|
||||
{
|
||||
title: formatMessage(labels.funnel),
|
||||
description: 'Understand the conversion and drop-off rate of users.',
|
||||
url: '/reports/funnel',
|
||||
icon: <Funnel />,
|
||||
},
|
||||
{
|
||||
title: formatMessage(labels.retention),
|
||||
description: 'Measure you website stickiness by tracking how often users return.',
|
||||
url: '/reports/retention',
|
||||
icon: <Magnet />,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Page>
|
||||
{showHeader && <PageHeader title={formatMessage(labels.reports)} />}
|
||||
<div className={styles.reports}>
|
||||
{reports.map(({ title, description, url, icon }) => {
|
||||
return (
|
||||
<ReportItem key={title} icon={icon} title={title} description={description} url={url} />
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
export default ReportTemplates;
|
||||
32
src/components/pages/reports/ReportTemplates.module.css
Normal file
32
src/components/pages/reports/ReportTemplates.module.css
Normal file
@@ -0,0 +1,32 @@
|
||||
.reports {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.report {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
border: 1px solid var(--base500);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.description {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
55
src/components/pages/reports/ReportsPage.js
Normal file
55
src/components/pages/reports/ReportsPage.js
Normal file
@@ -0,0 +1,55 @@
|
||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||
import Page from 'components/layout/Page';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import { useMessages, useReports } from 'components/hooks';
|
||||
import Link from 'next/link';
|
||||
import { Button, Icon, Icons, Text } from 'react-basics';
|
||||
import ReportsTable from './ReportsTable';
|
||||
|
||||
export function ReportsPage() {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const {
|
||||
reports,
|
||||
error,
|
||||
isLoading,
|
||||
deleteReport,
|
||||
filter,
|
||||
handleFilterChange,
|
||||
handlePageChange,
|
||||
handlePageSizeChange,
|
||||
} = useReports();
|
||||
|
||||
const hasData = (reports && reports?.data.length !== 0) || filter;
|
||||
|
||||
return (
|
||||
<Page loading={isLoading} error={error}>
|
||||
<PageHeader title={formatMessage(labels.reports)}>
|
||||
<Link href="/reports/create">
|
||||
<Button variant="primary">
|
||||
<Icon>
|
||||
<Icons.Plus />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.createReport)}</Text>
|
||||
</Button>
|
||||
</Link>
|
||||
</PageHeader>
|
||||
|
||||
{hasData && (
|
||||
<ReportsTable
|
||||
data={reports}
|
||||
showSearch={true}
|
||||
showPaging={true}
|
||||
onFilterChange={handleFilterChange}
|
||||
onPageChange={handlePageChange}
|
||||
onPageSizeChange={handlePageSizeChange}
|
||||
onDelete={deleteReport}
|
||||
filterValue={filter}
|
||||
showDomain={true}
|
||||
/>
|
||||
)}
|
||||
{!hasData && <EmptyPlaceholder />}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
export default ReportsPage;
|
||||
86
src/components/pages/reports/ReportsTable.js
Normal file
86
src/components/pages/reports/ReportsTable.js
Normal file
@@ -0,0 +1,86 @@
|
||||
import ConfirmDeleteForm from 'components/common/ConfirmDeleteForm';
|
||||
import LinkButton from 'components/common/LinkButton';
|
||||
import SettingsTable from 'components/common/SettingsTable';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import useUser from 'components/hooks/useUser';
|
||||
import { useState } from 'react';
|
||||
import { Button, Flexbox, Icon, Icons, Modal, Text } from 'react-basics';
|
||||
|
||||
export function ReportsTable({
|
||||
data = [],
|
||||
onDelete = () => {},
|
||||
filterValue,
|
||||
onFilterChange,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
showDomain,
|
||||
}) {
|
||||
const [report, setReport] = useState(null);
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { user } = useUser();
|
||||
|
||||
const domainColumn = [
|
||||
{
|
||||
name: 'domain',
|
||||
label: formatMessage(labels.domain),
|
||||
},
|
||||
];
|
||||
|
||||
const columns = [
|
||||
{ name: 'name', label: formatMessage(labels.name) },
|
||||
{ name: 'description', label: formatMessage(labels.description) },
|
||||
{ name: 'type', label: formatMessage(labels.type) },
|
||||
...(showDomain ? domainColumn : []),
|
||||
{ name: 'action', label: ' ' },
|
||||
];
|
||||
|
||||
const handleConfirm = () => {
|
||||
onDelete(report.id);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
showSearch={true}
|
||||
showPaging={true}
|
||||
onFilterChange={onFilterChange}
|
||||
onPageChange={onPageChange}
|
||||
onPageSizeChange={onPageSizeChange}
|
||||
filterValue={filterValue}
|
||||
>
|
||||
{row => {
|
||||
const { id, userId: reportOwnerId, website } = row;
|
||||
if (showDomain) {
|
||||
row.domain = website.domain;
|
||||
}
|
||||
|
||||
return (
|
||||
<Flexbox gap={10}>
|
||||
<LinkButton href={`/reports/${id}`}>{formatMessage(labels.view)}</LinkButton>
|
||||
{!showDomain || user.id === reportOwnerId || user.id === website?.userId}
|
||||
<Button onClick={() => setReport(row)}>
|
||||
<Icon>
|
||||
<Icons.Trash />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.delete)}</Text>
|
||||
</Button>
|
||||
</Flexbox>
|
||||
);
|
||||
}}
|
||||
</SettingsTable>
|
||||
{report && (
|
||||
<Modal>
|
||||
<ConfirmDeleteForm
|
||||
name={report.name}
|
||||
onConfirm={handleConfirm}
|
||||
onClose={() => setReport(null)}
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ReportsTable;
|
||||
145
src/components/pages/reports/event-data/EventDataParameters.js
Normal file
145
src/components/pages/reports/event-data/EventDataParameters.js
Normal file
@@ -0,0 +1,145 @@
|
||||
import { useContext, useRef } from 'react';
|
||||
import { useApi, useMessages } from 'components/hooks';
|
||||
import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics';
|
||||
import { ReportContext } from 'components/pages/reports/Report';
|
||||
import Empty from 'components/common/Empty';
|
||||
import { DATA_TYPES, REPORT_PARAMETERS } from 'lib/constants';
|
||||
import Icons from 'components/icons';
|
||||
import FieldAddForm from '../FieldAddForm';
|
||||
import BaseParameters from '../BaseParameters';
|
||||
import ParameterList from '../ParameterList';
|
||||
import styles from './EventDataParameters.module.css';
|
||||
|
||||
function useFields(websiteId, startDate, endDate) {
|
||||
const { get, useQuery } = useApi();
|
||||
const { data, error, isLoading } = useQuery(
|
||||
['fields', websiteId, startDate, endDate],
|
||||
() =>
|
||||
get('/reports/event-data', {
|
||||
websiteId,
|
||||
startAt: +startDate,
|
||||
endAt: +endDate,
|
||||
}),
|
||||
{ enabled: !!(websiteId && startDate && endDate) },
|
||||
);
|
||||
|
||||
return { data, error, isLoading };
|
||||
}
|
||||
|
||||
export function EventDataParameters() {
|
||||
const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const ref = useRef(null);
|
||||
const { parameters } = report || {};
|
||||
const { websiteId, dateRange, fields, filters, groups } = parameters || {};
|
||||
const { startDate, endDate } = dateRange || {};
|
||||
const queryEnabled = websiteId && dateRange && fields?.length;
|
||||
const { data, error } = useFields(websiteId, startDate, endDate);
|
||||
const parametersSelected = websiteId && startDate && endDate;
|
||||
const hasData = data?.length !== 0;
|
||||
|
||||
const parameterGroups = [
|
||||
{ label: formatMessage(labels.fields), group: REPORT_PARAMETERS.fields },
|
||||
{ label: formatMessage(labels.filters), group: REPORT_PARAMETERS.filters },
|
||||
];
|
||||
|
||||
const parameterData = {
|
||||
fields,
|
||||
filters,
|
||||
groups,
|
||||
};
|
||||
|
||||
const handleSubmit = values => {
|
||||
runReport(values);
|
||||
};
|
||||
|
||||
const handleAdd = (group, value) => {
|
||||
const data = parameterData[group];
|
||||
|
||||
if (!data.find(({ name }) => name === value.name)) {
|
||||
updateReport({ parameters: { [group]: data.concat(value) } });
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemove = (group, index) => {
|
||||
const data = [...parameterData[group]];
|
||||
data.splice(index, 1);
|
||||
updateReport({ parameters: { [group]: data } });
|
||||
};
|
||||
|
||||
const AddButton = ({ group }) => {
|
||||
return (
|
||||
<PopupTrigger>
|
||||
<Icon>
|
||||
<Icons.Plus />
|
||||
</Icon>
|
||||
<Popup position="bottom" alignment="start">
|
||||
{(close, element) => {
|
||||
return (
|
||||
<FieldAddForm
|
||||
fields={data.map(({ eventKey, eventDataType }) => ({
|
||||
name: eventKey,
|
||||
type: DATA_TYPES[eventDataType],
|
||||
}))}
|
||||
group={group}
|
||||
element={element}
|
||||
onAdd={handleAdd}
|
||||
onClose={close}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</Popup>
|
||||
</PopupTrigger>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form ref={ref} values={parameters} error={error} onSubmit={handleSubmit}>
|
||||
<BaseParameters />
|
||||
{!hasData && <Empty message={formatMessage(messages.noEventData)} />}
|
||||
{parametersSelected &&
|
||||
hasData &&
|
||||
parameterGroups.map(({ label, group }) => {
|
||||
return (
|
||||
<FormRow
|
||||
key={label}
|
||||
label={label}
|
||||
action={<AddButton group={group} onAdd={handleAdd} />}
|
||||
>
|
||||
<ParameterList
|
||||
items={parameterData[group]}
|
||||
onRemove={index => handleRemove(group, index)}
|
||||
>
|
||||
{({ name, value }) => {
|
||||
return (
|
||||
<div className={styles.parameter}>
|
||||
{group === REPORT_PARAMETERS.fields && (
|
||||
<>
|
||||
<div>{name}</div>
|
||||
<div className={styles.op}>{value}</div>
|
||||
</>
|
||||
)}
|
||||
{group === REPORT_PARAMETERS.filters && (
|
||||
<>
|
||||
<div>{name}</div>
|
||||
<div className={styles.op}>{value[0]}</div>
|
||||
<div>{value[1]}</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</ParameterList>
|
||||
</FormRow>
|
||||
);
|
||||
})}
|
||||
<FormButtons>
|
||||
<SubmitButton variant="primary" disabled={!queryEnabled} loading={isRunning}>
|
||||
{formatMessage(labels.runQuery)}
|
||||
</SubmitButton>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default EventDataParameters;
|
||||
@@ -0,0 +1,12 @@
|
||||
.parameter {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.op {
|
||||
font-weight: bold;
|
||||
}
|
||||
26
src/components/pages/reports/event-data/EventDataReport.js
Normal file
26
src/components/pages/reports/event-data/EventDataReport.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import Report from '../Report';
|
||||
import ReportHeader from '../ReportHeader';
|
||||
import ReportMenu from '../ReportMenu';
|
||||
import ReportBody from '../ReportBody';
|
||||
import EventDataParameters from './EventDataParameters';
|
||||
import EventDataTable from './EventDataTable';
|
||||
import Nodes from 'assets/nodes.svg';
|
||||
|
||||
const defaultParameters = {
|
||||
type: 'event-data',
|
||||
parameters: { fields: [], filters: [] },
|
||||
};
|
||||
|
||||
export default function EventDataReport({ reportId }) {
|
||||
return (
|
||||
<Report reportId={reportId} defaultParameters={defaultParameters}>
|
||||
<ReportHeader icon={<Nodes />} />
|
||||
<ReportMenu>
|
||||
<EventDataParameters />
|
||||
</ReportMenu>
|
||||
<ReportBody>
|
||||
<EventDataTable />
|
||||
</ReportBody>
|
||||
</Report>
|
||||
);
|
||||
}
|
||||
19
src/components/pages/reports/event-data/EventDataTable.js
Normal file
19
src/components/pages/reports/event-data/EventDataTable.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import { useContext } from 'react';
|
||||
import { GridTable, GridColumn } from 'react-basics';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import { ReportContext } from '../Report';
|
||||
|
||||
export function EventDataTable() {
|
||||
const { report } = useContext(ReportContext);
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
return (
|
||||
<GridTable data={report?.data || []}>
|
||||
<GridColumn name="field" label={formatMessage(labels.field)} />
|
||||
<GridColumn name="value" label={formatMessage(labels.value)} />
|
||||
<GridColumn name="total" label={formatMessage(labels.total)} />
|
||||
</GridTable>
|
||||
);
|
||||
}
|
||||
|
||||
export default EventDataTable;
|
||||
74
src/components/pages/reports/funnel/FunnelChart.js
Normal file
74
src/components/pages/reports/funnel/FunnelChart.js
Normal file
@@ -0,0 +1,74 @@
|
||||
import { useCallback, useContext, useMemo } from 'react';
|
||||
import { Loading, StatusLight } from 'react-basics';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import useTheme from 'components/hooks/useTheme';
|
||||
import BarChart from 'components/metrics/BarChart';
|
||||
import { formatLongNumber } from 'lib/format';
|
||||
import styles from './FunnelChart.module.css';
|
||||
import { ReportContext } from '../Report';
|
||||
|
||||
export function FunnelChart({ className, loading }) {
|
||||
const { report } = useContext(ReportContext);
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { colors } = useTheme();
|
||||
|
||||
const { parameters, data } = report || {};
|
||||
|
||||
const renderXLabel = useCallback(
|
||||
(label, index) => {
|
||||
return parameters.urls[index];
|
||||
},
|
||||
[parameters],
|
||||
);
|
||||
|
||||
const renderTooltipPopup = useCallback((setTooltipPopup, model) => {
|
||||
const { opacity, labelColors, dataPoints } = model.tooltip;
|
||||
|
||||
if (!dataPoints?.length || !opacity) {
|
||||
setTooltipPopup(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setTooltipPopup(
|
||||
<>
|
||||
<div>
|
||||
{formatLongNumber(dataPoints[0].raw.y)} {formatMessage(labels.visitors)}
|
||||
</div>
|
||||
<div>
|
||||
<StatusLight color={labelColors?.[0]?.backgroundColor}>
|
||||
{formatLongNumber(dataPoints[0].raw.z)}% {formatMessage(labels.dropoff)}
|
||||
</StatusLight>
|
||||
</div>
|
||||
</>,
|
||||
);
|
||||
}, []);
|
||||
|
||||
const datasets = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
label: formatMessage(labels.uniqueVisitors),
|
||||
data: data,
|
||||
borderWidth: 1,
|
||||
...colors.chart.visitors,
|
||||
},
|
||||
];
|
||||
}, [data, colors, formatMessage, labels]);
|
||||
|
||||
if (loading) {
|
||||
return <Loading icon="dots" className={styles.loading} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<BarChart
|
||||
className={className}
|
||||
datasets={datasets}
|
||||
unit="day"
|
||||
loading={loading}
|
||||
renderXLabel={renderXLabel}
|
||||
renderTooltipPopup={renderTooltipPopup}
|
||||
XAxisType="category"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default FunnelChart;
|
||||
@@ -0,0 +1,3 @@
|
||||
.loading {
|
||||
height: 300px;
|
||||
}
|
||||
91
src/components/pages/reports/funnel/FunnelParameters.js
Normal file
91
src/components/pages/reports/funnel/FunnelParameters.js
Normal file
@@ -0,0 +1,91 @@
|
||||
import { useContext, useRef } from 'react';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import {
|
||||
Icon,
|
||||
Form,
|
||||
FormButtons,
|
||||
FormInput,
|
||||
FormRow,
|
||||
PopupTrigger,
|
||||
Popup,
|
||||
SubmitButton,
|
||||
TextField,
|
||||
} from 'react-basics';
|
||||
import Icons from 'components/icons';
|
||||
import UrlAddForm from './UrlAddForm';
|
||||
import { ReportContext } from 'components/pages/reports/Report';
|
||||
import BaseParameters from '../BaseParameters';
|
||||
import ParameterList from '../ParameterList';
|
||||
import PopupForm from '../PopupForm';
|
||||
|
||||
export function FunnelParameters() {
|
||||
const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const ref = useRef(null);
|
||||
|
||||
const { parameters } = report || {};
|
||||
const { websiteId, dateRange, urls } = parameters || {};
|
||||
const queryDisabled = !websiteId || !dateRange || urls?.length < 2;
|
||||
|
||||
const handleSubmit = (data, e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
if (!queryDisabled) {
|
||||
runReport(data);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddUrl = url => {
|
||||
updateReport({ parameters: { urls: parameters.urls.concat(url) } });
|
||||
};
|
||||
|
||||
const handleRemoveUrl = (index, e) => {
|
||||
e.stopPropagation();
|
||||
const urls = [...parameters.urls];
|
||||
urls.splice(index, 1);
|
||||
updateReport({ parameters: { urls } });
|
||||
};
|
||||
|
||||
const AddUrlButton = () => {
|
||||
return (
|
||||
<PopupTrigger>
|
||||
<Icon>
|
||||
<Icons.Plus />
|
||||
</Icon>
|
||||
<Popup position="bottom" alignment="start">
|
||||
{(close, element) => {
|
||||
return (
|
||||
<PopupForm element={element} onClose={close}>
|
||||
<UrlAddForm onAdd={handleAddUrl} />
|
||||
</PopupForm>
|
||||
);
|
||||
}}
|
||||
</Popup>
|
||||
</PopupTrigger>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form ref={ref} values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
|
||||
<BaseParameters />
|
||||
<FormRow label={formatMessage(labels.window)}>
|
||||
<FormInput
|
||||
name="window"
|
||||
rules={{ required: formatMessage(labels.required), pattern: /[0-9]+/ }}
|
||||
>
|
||||
<TextField autoComplete="off" />
|
||||
</FormInput>
|
||||
</FormRow>
|
||||
<FormRow label={formatMessage(labels.urls)} action={<AddUrlButton />}>
|
||||
<ParameterList items={urls} onRemove={handleRemoveUrl} />
|
||||
</FormRow>
|
||||
<FormButtons>
|
||||
<SubmitButton variant="primary" disabled={queryDisabled} loading={isRunning}>
|
||||
{formatMessage(labels.runQuery)}
|
||||
</SubmitButton>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default FunnelParameters;
|
||||
29
src/components/pages/reports/funnel/FunnelReport.js
Normal file
29
src/components/pages/reports/funnel/FunnelReport.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import FunnelChart from './FunnelChart';
|
||||
import FunnelTable from './FunnelTable';
|
||||
import FunnelParameters from './FunnelParameters';
|
||||
import Report from '../Report';
|
||||
import ReportHeader from '../ReportHeader';
|
||||
import ReportMenu from '../ReportMenu';
|
||||
import ReportBody from '../ReportBody';
|
||||
import Funnel from 'assets/funnel.svg';
|
||||
import { REPORT_TYPES } from 'lib/constants';
|
||||
|
||||
const defaultParameters = {
|
||||
type: REPORT_TYPES.funnel,
|
||||
parameters: { window: 60, urls: [] },
|
||||
};
|
||||
|
||||
export default function FunnelReport({ reportId }) {
|
||||
return (
|
||||
<Report reportId={reportId} defaultParameters={defaultParameters}>
|
||||
<ReportHeader icon={<Funnel />} />
|
||||
<ReportMenu>
|
||||
<FunnelParameters />
|
||||
</ReportMenu>
|
||||
<ReportBody>
|
||||
<FunnelChart />
|
||||
<FunnelTable />
|
||||
</ReportBody>
|
||||
</Report>
|
||||
);
|
||||
}
|
||||
10
src/components/pages/reports/funnel/FunnelReport.module.css
Normal file
10
src/components/pages/reports/funnel/FunnelReport.module.css
Normal file
@@ -0,0 +1,10 @@
|
||||
.filters {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
border: 1px solid var(--base400);
|
||||
border-radius: var(--border-radius);
|
||||
line-height: 32px;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
19
src/components/pages/reports/funnel/FunnelTable.js
Normal file
19
src/components/pages/reports/funnel/FunnelTable.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import { useContext } from 'react';
|
||||
import DataTable from 'components/metrics/DataTable';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import { ReportContext } from '../Report';
|
||||
|
||||
export function FunnelTable() {
|
||||
const { report } = useContext(ReportContext);
|
||||
const { formatMessage, labels } = useMessages();
|
||||
return (
|
||||
<DataTable
|
||||
data={report?.data}
|
||||
title={formatMessage(labels.url)}
|
||||
metric={formatMessage(labels.visitors)}
|
||||
showPercentage={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default FunnelTable;
|
||||
47
src/components/pages/reports/funnel/UrlAddForm.js
Normal file
47
src/components/pages/reports/funnel/UrlAddForm.js
Normal file
@@ -0,0 +1,47 @@
|
||||
import { useState } from 'react';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import { Button, Form, FormRow, TextField, Flexbox } from 'react-basics';
|
||||
import styles from './UrlAddForm.module.css';
|
||||
|
||||
export function UrlAddForm({ defaultValue = '', onAdd }) {
|
||||
const [url, setUrl] = useState(defaultValue);
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
const handleSave = () => {
|
||||
onAdd(url);
|
||||
setUrl('');
|
||||
};
|
||||
|
||||
const handleChange = e => {
|
||||
setUrl(e.target.value);
|
||||
};
|
||||
|
||||
const handleKeyDown = e => {
|
||||
if (e.key === 'Enter') {
|
||||
e.stopPropagation();
|
||||
handleSave();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Form>
|
||||
<FormRow label={formatMessage(labels.url)}>
|
||||
<Flexbox gap={10}>
|
||||
<TextField
|
||||
className={styles.input}
|
||||
value={url}
|
||||
onChange={handleChange}
|
||||
autoFocus={true}
|
||||
autoComplete="off"
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
<Button variant="primary" onClick={handleSave}>
|
||||
{formatMessage(labels.add)}
|
||||
</Button>
|
||||
</Flexbox>
|
||||
</FormRow>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default UrlAddForm;
|
||||
14
src/components/pages/reports/funnel/UrlAddForm.module.css
Normal file
14
src/components/pages/reports/funnel/UrlAddForm.module.css
Normal file
@@ -0,0 +1,14 @@
|
||||
.form {
|
||||
position: absolute;
|
||||
background: var(--base50);
|
||||
width: 300px;
|
||||
padding: 30px;
|
||||
margin-top: 10px;
|
||||
border: 1px solid var(--base400);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
}
|
||||
148
src/components/pages/reports/insights/InsightsParameters.js
Normal file
148
src/components/pages/reports/insights/InsightsParameters.js
Normal file
@@ -0,0 +1,148 @@
|
||||
import { useContext, useRef } from 'react';
|
||||
import { useFormat, useMessages, useFilters } from 'components/hooks';
|
||||
import {
|
||||
Form,
|
||||
FormRow,
|
||||
FormButtons,
|
||||
SubmitButton,
|
||||
PopupTrigger,
|
||||
Icon,
|
||||
Popup,
|
||||
TooltipPopup,
|
||||
} from 'react-basics';
|
||||
import { ReportContext } from 'components/pages/reports/Report';
|
||||
import Icons from 'components/icons';
|
||||
import BaseParameters from '../BaseParameters';
|
||||
import ParameterList from '../ParameterList';
|
||||
import styles from './InsightsParameters.module.css';
|
||||
import PopupForm from '../PopupForm';
|
||||
import FilterSelectForm from '../FilterSelectForm';
|
||||
import FieldSelectForm from '../FieldSelectForm';
|
||||
|
||||
export function InsightsParameters() {
|
||||
const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { formatValue } = useFormat();
|
||||
const { filterLabels } = useFilters();
|
||||
const ref = useRef(null);
|
||||
const { parameters } = report || {};
|
||||
const { websiteId, dateRange, fields, filters } = parameters || {};
|
||||
const { startDate, endDate } = dateRange || {};
|
||||
const parametersSelected = websiteId && startDate && endDate;
|
||||
const queryEnabled = websiteId && dateRange && (fields?.length || filters?.length);
|
||||
|
||||
const fieldOptions = [
|
||||
{ name: 'url', type: 'string', label: formatMessage(labels.url) },
|
||||
{ name: 'title', type: 'string', label: formatMessage(labels.pageTitle) },
|
||||
{ name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
|
||||
{ name: 'query', type: 'string', label: formatMessage(labels.query) },
|
||||
{ name: 'browser', type: 'string', label: formatMessage(labels.browser) },
|
||||
{ name: 'os', type: 'string', label: formatMessage(labels.os) },
|
||||
{ name: 'device', type: 'string', label: formatMessage(labels.device) },
|
||||
{ name: 'country', type: 'string', label: formatMessage(labels.country) },
|
||||
{ name: 'region', type: 'string', label: formatMessage(labels.region) },
|
||||
{ name: 'city', type: 'string', label: formatMessage(labels.city) },
|
||||
];
|
||||
|
||||
const parameterGroups = [
|
||||
{ id: 'fields', label: formatMessage(labels.fields) },
|
||||
{ id: 'filters', label: formatMessage(labels.filters) },
|
||||
];
|
||||
|
||||
const parameterData = {
|
||||
fields,
|
||||
filters,
|
||||
};
|
||||
|
||||
const handleSubmit = values => {
|
||||
runReport(values);
|
||||
};
|
||||
|
||||
const handleAdd = (id, value) => {
|
||||
const data = parameterData[id];
|
||||
|
||||
if (!data.find(({ name }) => name === value.name)) {
|
||||
updateReport({ parameters: { [id]: data.concat(value) } });
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemove = (id, index) => {
|
||||
const data = [...parameterData[id]];
|
||||
data.splice(index, 1);
|
||||
updateReport({ parameters: { [id]: data } });
|
||||
};
|
||||
|
||||
const AddButton = ({ id }) => {
|
||||
return (
|
||||
<PopupTrigger>
|
||||
<TooltipPopup label={formatMessage(labels.add)} position="top">
|
||||
<Icon>
|
||||
<Icons.Plus />
|
||||
</Icon>
|
||||
</TooltipPopup>
|
||||
<Popup position="bottom" alignment="start" className={styles.popup}>
|
||||
{close => {
|
||||
return (
|
||||
<PopupForm onClose={close}>
|
||||
{id === 'fields' && (
|
||||
<FieldSelectForm
|
||||
items={fieldOptions}
|
||||
onSelect={handleAdd.bind(null, id)}
|
||||
showType={false}
|
||||
/>
|
||||
)}
|
||||
{id === 'filters' && (
|
||||
<FilterSelectForm
|
||||
websiteId={websiteId}
|
||||
items={fieldOptions}
|
||||
onSelect={handleAdd.bind(null, id)}
|
||||
/>
|
||||
)}
|
||||
</PopupForm>
|
||||
);
|
||||
}}
|
||||
</Popup>
|
||||
</PopupTrigger>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form ref={ref} values={parameters} onSubmit={handleSubmit}>
|
||||
<BaseParameters />
|
||||
{parametersSelected &&
|
||||
parameterGroups.map(({ id, label }) => {
|
||||
return (
|
||||
<FormRow key={label} label={label} action={<AddButton id={id} onAdd={handleAdd} />}>
|
||||
<ParameterList items={parameterData[id]} onRemove={index => handleRemove(id, index)}>
|
||||
{({ name, filter, value }) => {
|
||||
return (
|
||||
<div className={styles.parameter}>
|
||||
{id === 'fields' && (
|
||||
<>
|
||||
<div>{fieldOptions.find(f => f.name === name)?.label}</div>
|
||||
</>
|
||||
)}
|
||||
{id === 'filters' && (
|
||||
<>
|
||||
<div>{fieldOptions.find(f => f.name === name)?.label}</div>
|
||||
<div className={styles.op}>{filterLabels[filter]}</div>
|
||||
<div>{formatValue(value, name)}</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</ParameterList>
|
||||
</FormRow>
|
||||
);
|
||||
})}
|
||||
<FormButtons>
|
||||
<SubmitButton variant="primary" disabled={!queryEnabled} loading={isRunning}>
|
||||
{formatMessage(labels.runQuery)}
|
||||
</SubmitButton>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default InsightsParameters;
|
||||
@@ -0,0 +1,17 @@
|
||||
.parameter {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.op {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.popup {
|
||||
margin-top: -10px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
27
src/components/pages/reports/insights/InsightsReport.js
Normal file
27
src/components/pages/reports/insights/InsightsReport.js
Normal file
@@ -0,0 +1,27 @@
|
||||
import Report from '../Report';
|
||||
import ReportHeader from '../ReportHeader';
|
||||
import ReportMenu from '../ReportMenu';
|
||||
import ReportBody from '../ReportBody';
|
||||
import InsightsParameters from './InsightsParameters';
|
||||
import InsightsTable from './InsightsTable';
|
||||
import Lightbulb from 'assets/lightbulb.svg';
|
||||
import { REPORT_TYPES } from 'lib/constants';
|
||||
|
||||
const defaultParameters = {
|
||||
type: REPORT_TYPES.insights,
|
||||
parameters: { fields: [], filters: [] },
|
||||
};
|
||||
|
||||
export default function InsightsReport({ reportId }) {
|
||||
return (
|
||||
<Report reportId={reportId} defaultParameters={defaultParameters}>
|
||||
<ReportHeader icon={<Lightbulb />} />
|
||||
<ReportMenu>
|
||||
<InsightsParameters />
|
||||
</ReportMenu>
|
||||
<ReportBody>
|
||||
<InsightsTable />
|
||||
</ReportBody>
|
||||
</Report>
|
||||
);
|
||||
}
|
||||
49
src/components/pages/reports/insights/InsightsTable.js
Normal file
49
src/components/pages/reports/insights/InsightsTable.js
Normal file
@@ -0,0 +1,49 @@
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import { GridTable, GridColumn } from 'react-basics';
|
||||
import { useFormat, useMessages } from 'components/hooks';
|
||||
import { ReportContext } from '../Report';
|
||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||
|
||||
export function InsightsTable() {
|
||||
const [fields, setFields] = useState();
|
||||
const { report } = useContext(ReportContext);
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { formatValue } = useFormat();
|
||||
|
||||
useEffect(
|
||||
() => {
|
||||
setFields(report?.parameters?.fields);
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[report?.data],
|
||||
);
|
||||
|
||||
if (!fields || !report?.parameters) {
|
||||
return <EmptyPlaceholder />;
|
||||
}
|
||||
|
||||
return (
|
||||
<GridTable data={report?.data || []}>
|
||||
{fields.map(({ name, label }) => {
|
||||
return (
|
||||
<GridColumn key={name} name={name} label={label}>
|
||||
{row => formatValue(row[name], name)}
|
||||
</GridColumn>
|
||||
);
|
||||
})}
|
||||
<GridColumn
|
||||
name="visitors"
|
||||
label={formatMessage(labels.visitors)}
|
||||
width="100px"
|
||||
alignment="end"
|
||||
>
|
||||
{row => row.visitors.toLocaleString()}
|
||||
</GridColumn>
|
||||
<GridColumn name="views" label={formatMessage(labels.views)} width="100px" alignment="end">
|
||||
{row => row.views.toLocaleString()}
|
||||
</GridColumn>
|
||||
</GridTable>
|
||||
);
|
||||
}
|
||||
|
||||
export default InsightsTable;
|
||||
25
src/components/pages/reports/reports.module.css
Normal file
25
src/components/pages/reports/reports.module.css
Normal file
@@ -0,0 +1,25 @@
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-rows: max-content 1fr;
|
||||
grid-template-columns: max-content 1fr;
|
||||
}
|
||||
|
||||
.header {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 3;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 300px;
|
||||
padding-right: 20px;
|
||||
border-right: 1px solid var(--base300);
|
||||
grid-row: 2/3;
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding-left: 20px;
|
||||
grid-row: 2/3;
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { useContext, useRef } from 'react';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import { Form, FormButtons, FormRow, SubmitButton } from 'react-basics';
|
||||
import { ReportContext } from 'components/pages/reports/Report';
|
||||
import { MonthSelect } from 'components/input/MonthSelect';
|
||||
import BaseParameters from '../BaseParameters';
|
||||
import { parseDateRange } from 'lib/date';
|
||||
|
||||
export function RetentionParameters() {
|
||||
const { report, runReport, isRunning, updateReport } = useContext(ReportContext);
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const ref = useRef(null);
|
||||
|
||||
const { parameters } = report || {};
|
||||
const { websiteId, dateRange } = parameters || {};
|
||||
const { startDate } = dateRange || {};
|
||||
const queryDisabled = !websiteId || !dateRange;
|
||||
|
||||
const handleSubmit = (data, e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
if (!queryDisabled) {
|
||||
runReport(data);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDateChange = value => {
|
||||
updateReport({ parameters: { dateRange: { ...parseDateRange(value) } } });
|
||||
};
|
||||
|
||||
return (
|
||||
<Form ref={ref} values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
|
||||
<BaseParameters showDateSelect={false} />
|
||||
<FormRow label={formatMessage(labels.date)}>
|
||||
<MonthSelect date={startDate} onChange={handleDateChange} />
|
||||
</FormRow>
|
||||
<FormButtons>
|
||||
<SubmitButton variant="primary" disabled={queryDisabled} loading={isRunning}>
|
||||
{formatMessage(labels.runQuery)}
|
||||
</SubmitButton>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default RetentionParameters;
|
||||
33
src/components/pages/reports/retention/RetentionReport.js
Normal file
33
src/components/pages/reports/retention/RetentionReport.js
Normal file
@@ -0,0 +1,33 @@
|
||||
import RetentionTable from './RetentionTable';
|
||||
import RetentionParameters from './RetentionParameters';
|
||||
import Report from '../Report';
|
||||
import ReportHeader from '../ReportHeader';
|
||||
import ReportMenu from '../ReportMenu';
|
||||
import ReportBody from '../ReportBody';
|
||||
import Magnet from 'assets/magnet.svg';
|
||||
import { REPORT_TYPES } from 'lib/constants';
|
||||
import { parseDateRange } from 'lib/date';
|
||||
import { endOfMonth, startOfMonth } from 'date-fns';
|
||||
|
||||
const defaultParameters = {
|
||||
type: REPORT_TYPES.retention,
|
||||
parameters: {
|
||||
dateRange: parseDateRange(
|
||||
`range:${startOfMonth(new Date()).getTime()}:${endOfMonth(new Date()).getTime()}`,
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export default function RetentionReport({ reportId }) {
|
||||
return (
|
||||
<Report reportId={reportId} defaultParameters={defaultParameters}>
|
||||
<ReportHeader icon={<Magnet />} />
|
||||
<ReportMenu>
|
||||
<RetentionParameters />
|
||||
</ReportMenu>
|
||||
<ReportBody>
|
||||
<RetentionTable />
|
||||
</ReportBody>
|
||||
</Report>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
.filters {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
border: 1px solid var(--base400);
|
||||
border-radius: var(--border-radius);
|
||||
line-height: 32px;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
78
src/components/pages/reports/retention/RetentionTable.js
Normal file
78
src/components/pages/reports/retention/RetentionTable.js
Normal file
@@ -0,0 +1,78 @@
|
||||
import { useContext } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { ReportContext } from '../Report';
|
||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import { formatDate } from 'lib/date';
|
||||
import styles from './RetentionTable.module.css';
|
||||
|
||||
export function RetentionTable() {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { report } = useContext(ReportContext);
|
||||
const { data } = report || {};
|
||||
|
||||
if (!data) {
|
||||
return <EmptyPlaceholder />;
|
||||
}
|
||||
|
||||
const days = [1, 2, 3, 4, 5, 6, 7, 14, 21, 28];
|
||||
|
||||
const rows = data.reduce((arr, row) => {
|
||||
const { date, visitors, day } = row;
|
||||
if (day === 0) {
|
||||
return arr.concat({
|
||||
date,
|
||||
visitors,
|
||||
records: days
|
||||
.reduce((arr, day) => {
|
||||
arr[day] = data.find(x => x.date === date && x.day === day);
|
||||
return arr;
|
||||
}, [])
|
||||
.filter(n => n),
|
||||
});
|
||||
}
|
||||
return arr;
|
||||
}, []);
|
||||
|
||||
const totalDays = rows.length;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.table}>
|
||||
<div className={classNames(styles.row, styles.header)}>
|
||||
<div className={styles.date}>{formatMessage(labels.date)}</div>
|
||||
<div className={styles.visitors}>{formatMessage(labels.visitors)}</div>
|
||||
{days.map(n => (
|
||||
<div key={n} className={styles.day}>
|
||||
{formatMessage(labels.day)} {n}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{rows.map(({ date, visitors, records }, rowIndex) => {
|
||||
return (
|
||||
<div key={rowIndex} className={styles.row}>
|
||||
<div className={styles.date}>{formatDate(`${date} 00:00:00`, 'PP')}</div>
|
||||
<div className={styles.visitors}>{visitors}</div>
|
||||
{days.map(day => {
|
||||
if (totalDays - rowIndex < day) {
|
||||
return null;
|
||||
}
|
||||
const percentage = records[day]?.percentage;
|
||||
return (
|
||||
<div
|
||||
key={day}
|
||||
className={classNames(styles.cell, { [styles.empty]: !percentage })}
|
||||
>
|
||||
{percentage ? `${percentage.toFixed(2)}%` : ''}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default RetentionTable;
|
||||
@@ -0,0 +1,52 @@
|
||||
.table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: var(--blue200);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.visitors {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.day {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.empty {
|
||||
background: var(--blue100);
|
||||
}
|
||||
28
src/components/pages/settings/profile/DateRangeSetting.js
Normal file
28
src/components/pages/settings/profile/DateRangeSetting.js
Normal file
@@ -0,0 +1,28 @@
|
||||
import DateFilter from 'components/input/DateFilter';
|
||||
import { Button, Flexbox } from 'react-basics';
|
||||
import useDateRange from 'components/hooks/useDateRange';
|
||||
import { DEFAULT_DATE_RANGE } from 'lib/constants';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
export function DateRangeSetting() {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const [dateRange, setDateRange] = useDateRange();
|
||||
const { value } = dateRange;
|
||||
|
||||
const handleChange = value => setDateRange(value);
|
||||
const handleReset = () => setDateRange(DEFAULT_DATE_RANGE);
|
||||
|
||||
return (
|
||||
<Flexbox gap={10}>
|
||||
<DateFilter
|
||||
value={value}
|
||||
startDate={dateRange.startDate}
|
||||
endDate={dateRange.endDate}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<Button onClick={handleReset}>{formatMessage(labels.reset)}</Button>
|
||||
</Flexbox>
|
||||
);
|
||||
}
|
||||
|
||||
export default DateRangeSetting;
|
||||
32
src/components/pages/settings/profile/LanguageSetting.js
Normal file
32
src/components/pages/settings/profile/LanguageSetting.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import { Button, Dropdown, Item, Flexbox } from 'react-basics';
|
||||
import useLocale from 'components/hooks/useLocale';
|
||||
import { DEFAULT_LOCALE } from 'lib/constants';
|
||||
import { languages } from 'lib/lang';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
export function LanguageSetting() {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { locale, saveLocale } = useLocale();
|
||||
const options = Object.keys(languages);
|
||||
|
||||
const handleReset = () => saveLocale(DEFAULT_LOCALE);
|
||||
|
||||
const renderValue = value => languages[value].label;
|
||||
|
||||
return (
|
||||
<Flexbox gap={10}>
|
||||
<Dropdown
|
||||
items={options}
|
||||
value={locale}
|
||||
renderValue={renderValue}
|
||||
onChange={saveLocale}
|
||||
menuProps={{ style: { height: 300, width: 300 } }}
|
||||
>
|
||||
{item => <Item key={item}>{languages[item].label}</Item>}
|
||||
</Dropdown>
|
||||
<Button onClick={handleReset}>{formatMessage(labels.reset)}</Button>
|
||||
</Flexbox>
|
||||
);
|
||||
}
|
||||
|
||||
export default LanguageSetting;
|
||||
@@ -0,0 +1,31 @@
|
||||
import { Button, Icon, Text, useToasts, ModalTrigger, Modal } from 'react-basics';
|
||||
import PasswordEditForm from 'components/pages/settings/profile/PasswordEditForm';
|
||||
import Icons from 'components/icons';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
export function PasswordChangeButton() {
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { showToast } = useToasts();
|
||||
|
||||
const handleSave = () => {
|
||||
showToast({ message: formatMessage(messages.saved), variant: 'success' });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ModalTrigger>
|
||||
<Button>
|
||||
<Icon>
|
||||
<Icons.Lock />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.changePassword)}</Text>
|
||||
</Button>
|
||||
<Modal title={formatMessage(labels.changePassword)}>
|
||||
{close => <PasswordEditForm onSave={handleSave} onClose={close} />}
|
||||
</Modal>
|
||||
</ModalTrigger>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default PasswordChangeButton;
|
||||
68
src/components/pages/settings/profile/PasswordEditForm.js
Normal file
68
src/components/pages/settings/profile/PasswordEditForm.js
Normal file
@@ -0,0 +1,68 @@
|
||||
import { useRef } from 'react';
|
||||
import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
export function PasswordEditForm({ onSave, onClose }) {
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { post, useMutation } = useApi();
|
||||
const { mutate, error, isLoading } = useMutation(data => post('/me/password', data));
|
||||
const ref = useRef(null);
|
||||
|
||||
const handleSubmit = async data => {
|
||||
mutate(data, {
|
||||
onSuccess: async () => {
|
||||
onSave();
|
||||
onClose();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const samePassword = value => {
|
||||
if (value !== ref?.current?.getValues('newPassword')) {
|
||||
return formatMessage(messages.noMatchPassword);
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
return (
|
||||
<Form ref={ref} onSubmit={handleSubmit} error={error}>
|
||||
<FormRow label={formatMessage(labels.currentPassword)}>
|
||||
<FormInput name="currentPassword" rules={{ required: 'Required' }}>
|
||||
<PasswordField autoComplete="current-password" />
|
||||
</FormInput>
|
||||
</FormRow>
|
||||
<FormRow label={formatMessage(labels.newPassword)}>
|
||||
<FormInput
|
||||
name="newPassword"
|
||||
rules={{
|
||||
required: 'Required',
|
||||
minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
|
||||
}}
|
||||
>
|
||||
<PasswordField autoComplete="new-password" />
|
||||
</FormInput>
|
||||
</FormRow>
|
||||
<FormRow label={formatMessage(labels.confirmPassword)}>
|
||||
<FormInput
|
||||
name="confirmPassword"
|
||||
rules={{
|
||||
required: formatMessage(labels.required),
|
||||
minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
|
||||
validate: samePassword,
|
||||
}}
|
||||
>
|
||||
<PasswordField autoComplete="confirm-password" />
|
||||
</FormInput>
|
||||
</FormRow>
|
||||
<FormButtons flex>
|
||||
<Button type="submit" variant="primary" disabled={isLoading}>
|
||||
{formatMessage(labels.save)}
|
||||
</Button>
|
||||
<Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default PasswordEditForm;
|
||||
62
src/components/pages/settings/profile/ProfileDetails.js
Normal file
62
src/components/pages/settings/profile/ProfileDetails.js
Normal file
@@ -0,0 +1,62 @@
|
||||
import { Form, FormRow } from 'react-basics';
|
||||
import TimezoneSetting from 'components/pages/settings/profile/TimezoneSetting';
|
||||
import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting';
|
||||
import LanguageSetting from 'components/pages/settings/profile/LanguageSetting';
|
||||
import ThemeSetting from 'components/pages/settings/profile/ThemeSetting';
|
||||
import PasswordChangeButton from './PasswordChangeButton';
|
||||
import useUser from 'components/hooks/useUser';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import useConfig from 'components/hooks/useConfig';
|
||||
import { ROLES } from 'lib/constants';
|
||||
|
||||
export function ProfileDetails() {
|
||||
const { user } = useUser();
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { cloudMode } = useConfig();
|
||||
|
||||
if (!user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { username, role } = user;
|
||||
|
||||
const renderRole = value => {
|
||||
if (value === ROLES.user) {
|
||||
return formatMessage(labels.user);
|
||||
}
|
||||
if (value === ROLES.admin) {
|
||||
return formatMessage(labels.admin);
|
||||
}
|
||||
if (value === ROLES.viewOnly) {
|
||||
return formatMessage(labels.viewOnly);
|
||||
}
|
||||
|
||||
return formatMessage(labels.unknown);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form>
|
||||
<FormRow label={formatMessage(labels.username)}>{username}</FormRow>
|
||||
<FormRow label={formatMessage(labels.role)}>{renderRole(role)}</FormRow>
|
||||
{!cloudMode && (
|
||||
<FormRow label={formatMessage(labels.password)}>
|
||||
<PasswordChangeButton />
|
||||
</FormRow>
|
||||
)}
|
||||
<FormRow label={formatMessage(labels.defaultDateRange)}>
|
||||
<DateRangeSetting />
|
||||
</FormRow>
|
||||
<FormRow label={formatMessage(labels.language)}>
|
||||
<LanguageSetting />
|
||||
</FormRow>
|
||||
<FormRow label={formatMessage(labels.timezone)}>
|
||||
<TimezoneSetting />
|
||||
</FormRow>
|
||||
<FormRow label={formatMessage(labels.theme)}>
|
||||
<ThemeSetting />
|
||||
</FormRow>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProfileDetails;
|
||||
17
src/components/pages/settings/profile/ProfileSettings.js
Normal file
17
src/components/pages/settings/profile/ProfileSettings.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import Page from 'components/layout/Page';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import ProfileDetails from './ProfileDetails';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
export function ProfileSettings() {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<PageHeader title={formatMessage(labels.profile)} />
|
||||
<ProfileDetails />
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProfileSettings;
|
||||
33
src/components/pages/settings/profile/ThemeSetting.js
Normal file
33
src/components/pages/settings/profile/ThemeSetting.js
Normal file
@@ -0,0 +1,33 @@
|
||||
import classNames from 'classnames';
|
||||
import { Button, Icon } from 'react-basics';
|
||||
import useTheme from 'components/hooks/useTheme';
|
||||
import Sun from 'assets/sun.svg';
|
||||
import Moon from 'assets/moon.svg';
|
||||
import styles from './ThemeSetting.module.css';
|
||||
|
||||
export function ThemeSetting() {
|
||||
const { theme, saveTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<div className={styles.buttons}>
|
||||
<Button
|
||||
className={classNames({ [styles.active]: theme === 'light' })}
|
||||
onClick={() => saveTheme('light')}
|
||||
>
|
||||
<Icon>
|
||||
<Sun />
|
||||
</Icon>
|
||||
</Button>
|
||||
<Button
|
||||
className={classNames({ [styles.active]: theme === 'dark' })}
|
||||
onClick={() => saveTheme('dark')}
|
||||
>
|
||||
<Icon>
|
||||
<Moon />
|
||||
</Icon>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ThemeSetting;
|
||||
@@ -0,0 +1,8 @@
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 2px solid var(--primary400);
|
||||
}
|
||||
30
src/components/pages/settings/profile/TimezoneSetting.js
Normal file
30
src/components/pages/settings/profile/TimezoneSetting.js
Normal file
@@ -0,0 +1,30 @@
|
||||
import { Dropdown, Item, Button, Flexbox } from 'react-basics';
|
||||
import { listTimeZones } from 'timezone-support';
|
||||
import useTimezone from 'components/hooks/useTimezone';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import { getTimezone } from 'lib/date';
|
||||
|
||||
export function TimezoneSetting() {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const [timezone, saveTimezone] = useTimezone();
|
||||
const options = listTimeZones();
|
||||
|
||||
const handleReset = () => saveTimezone(getTimezone());
|
||||
|
||||
return (
|
||||
<Flexbox gap={10}>
|
||||
<Dropdown
|
||||
items={options}
|
||||
value={timezone}
|
||||
onChange={saveTimezone}
|
||||
style={{ flex: 1 }}
|
||||
menuProps={{ style: { height: 300 } }}
|
||||
>
|
||||
{item => <Item key={item}>{item}</Item>}
|
||||
</Dropdown>
|
||||
<Button onClick={handleReset}>{formatMessage(labels.reset)}</Button>
|
||||
</Flexbox>
|
||||
);
|
||||
}
|
||||
|
||||
export default TimezoneSetting;
|
||||
48
src/components/pages/settings/teams/TeamAddForm.js
Normal file
48
src/components/pages/settings/teams/TeamAddForm.js
Normal file
@@ -0,0 +1,48 @@
|
||||
import { useRef } from 'react';
|
||||
import {
|
||||
Form,
|
||||
FormRow,
|
||||
FormInput,
|
||||
FormButtons,
|
||||
TextField,
|
||||
Button,
|
||||
SubmitButton,
|
||||
} from 'react-basics';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
export function TeamAddForm({ onSave, onClose }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { post, useMutation } = useApi();
|
||||
const { mutate, error, isLoading } = useMutation(data => post('/teams', data));
|
||||
const ref = useRef(null);
|
||||
|
||||
const handleSubmit = async data => {
|
||||
mutate(data, {
|
||||
onSuccess: async () => {
|
||||
onSave();
|
||||
onClose();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form ref={ref} onSubmit={handleSubmit} error={error}>
|
||||
<FormRow label={formatMessage(labels.name)}>
|
||||
<FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
|
||||
<TextField autoComplete="off" />
|
||||
</FormInput>
|
||||
</FormRow>
|
||||
<FormButtons flex>
|
||||
<SubmitButton variant="primary" disabled={isLoading}>
|
||||
{formatMessage(labels.save)}
|
||||
</SubmitButton>
|
||||
<Button disabled={isLoading} onClick={onClose}>
|
||||
{formatMessage(labels.cancel)}
|
||||
</Button>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamAddForm;
|
||||
67
src/components/pages/settings/teams/TeamAddWebsiteForm.js
Normal file
67
src/components/pages/settings/teams/TeamAddWebsiteForm.js
Normal file
@@ -0,0 +1,67 @@
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import { useRef, useState } from 'react';
|
||||
import { Button, Dropdown, Form, FormButtons, FormRow, Item, SubmitButton } from 'react-basics';
|
||||
import WebsiteTags from './WebsiteTags';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
export function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { get, post, useQuery, useMutation } = useApi();
|
||||
const { mutate, error } = useMutation(data => post(`/teams/${teamId}/websites`, data));
|
||||
const { data: websites } = useQuery(['websites'], () => get('/websites'));
|
||||
const [newWebsites, setNewWebsites] = useState([]);
|
||||
const formRef = useRef();
|
||||
|
||||
const hasData = websites && websites.data.length > 0;
|
||||
|
||||
const handleSubmit = () => {
|
||||
mutate(
|
||||
{ websiteIds: newWebsites },
|
||||
{
|
||||
onSuccess: async () => {
|
||||
onSave();
|
||||
onClose();
|
||||
},
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
const handleAddWebsite = value => {
|
||||
if (!newWebsites.some(a => a === value)) {
|
||||
const nextValue = [...newWebsites];
|
||||
|
||||
nextValue.push(value);
|
||||
|
||||
setNewWebsites(nextValue);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveWebsite = value => {
|
||||
const newValue = newWebsites.filter(a => a !== value);
|
||||
|
||||
setNewWebsites(newValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{hasData && (
|
||||
<Form onSubmit={handleSubmit} error={error} ref={formRef}>
|
||||
<FormRow label={formatMessage(labels.websites)}>
|
||||
<Dropdown items={websites.data} onChange={handleAddWebsite} style={{ width: 300 }}>
|
||||
{({ id, name }) => <Item key={id}>{name}</Item>}
|
||||
</Dropdown>
|
||||
</FormRow>
|
||||
<WebsiteTags items={websites.data} websites={newWebsites} onClick={handleRemoveWebsite} />
|
||||
<FormButtons flex>
|
||||
<SubmitButton disabled={newWebsites && newWebsites.length === 0}>
|
||||
{formatMessage(labels.addWebsite)}
|
||||
</SubmitButton>
|
||||
<Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamAddWebsiteForm;
|
||||
34
src/components/pages/settings/teams/TeamDeleteForm.js
Normal file
34
src/components/pages/settings/teams/TeamDeleteForm.js
Normal file
@@ -0,0 +1,34 @@
|
||||
import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
export function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
|
||||
const { formatMessage, labels, messages, FormattedMessage } = useMessages();
|
||||
const { del, useMutation } = useApi();
|
||||
const { mutate, error, isLoading } = useMutation(data => del(`/teams/${teamId}`, data));
|
||||
|
||||
const handleSubmit = async data => {
|
||||
mutate(data, {
|
||||
onSuccess: async () => {
|
||||
onSave();
|
||||
onClose();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} error={error}>
|
||||
<p>
|
||||
<FormattedMessage {...messages.confirmDelete} values={{ target: <b>{teamName}</b> }} />
|
||||
</p>
|
||||
<FormButtons flex>
|
||||
<SubmitButton variant="danger" disabled={isLoading}>
|
||||
{formatMessage(labels.delete)}
|
||||
</SubmitButton>
|
||||
<Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamDeleteForm;
|
||||
73
src/components/pages/settings/teams/TeamEditForm.js
Normal file
73
src/components/pages/settings/teams/TeamEditForm.js
Normal file
@@ -0,0 +1,73 @@
|
||||
import {
|
||||
SubmitButton,
|
||||
Form,
|
||||
FormInput,
|
||||
FormRow,
|
||||
FormButtons,
|
||||
TextField,
|
||||
Button,
|
||||
Flexbox,
|
||||
} from 'react-basics';
|
||||
import { getRandomChars } from 'next-basics';
|
||||
import { useRef, useState } from 'react';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
const generateId = () => getRandomChars(16);
|
||||
|
||||
export function TeamEditForm({ teamId, data, onSave, readOnly }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { post, useMutation } = useApi();
|
||||
const { mutate, error } = useMutation(data => post(`/teams/${teamId}`, data));
|
||||
const ref = useRef(null);
|
||||
const [accessCode, setAccessCode] = useState(data.accessCode);
|
||||
|
||||
const handleSubmit = async data => {
|
||||
mutate(data, {
|
||||
onSuccess: async () => {
|
||||
ref.current.reset(data);
|
||||
onSave(data);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleRegenerate = () => {
|
||||
const code = generateId();
|
||||
ref.current.setValue('accessCode', code, {
|
||||
shouldValidate: true,
|
||||
shouldDirty: true,
|
||||
});
|
||||
setAccessCode(code);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form ref={ref} onSubmit={handleSubmit} error={error} values={data}>
|
||||
<FormRow label={formatMessage(labels.teamId)}>
|
||||
<TextField value={teamId} readOnly allowCopy />
|
||||
</FormRow>
|
||||
<FormRow label={formatMessage(labels.name)}>
|
||||
{!readOnly && (
|
||||
<FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
|
||||
<TextField />
|
||||
</FormInput>
|
||||
)}
|
||||
{readOnly && data.name}
|
||||
</FormRow>
|
||||
<FormRow label={formatMessage(labels.accessCode)}>
|
||||
<Flexbox gap={10}>
|
||||
<TextField value={accessCode} readOnly allowCopy />
|
||||
{!readOnly && (
|
||||
<Button onClick={handleRegenerate}>{formatMessage(labels.regenerate)}</Button>
|
||||
)}
|
||||
</Flexbox>
|
||||
</FormRow>
|
||||
{!readOnly && (
|
||||
<FormButtons>
|
||||
<SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
|
||||
</FormButtons>
|
||||
)}
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamEditForm;
|
||||
44
src/components/pages/settings/teams/TeamJoinForm.js
Normal file
44
src/components/pages/settings/teams/TeamJoinForm.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import { useRef } from 'react';
|
||||
import {
|
||||
Form,
|
||||
FormRow,
|
||||
FormInput,
|
||||
FormButtons,
|
||||
TextField,
|
||||
Button,
|
||||
SubmitButton,
|
||||
} from 'react-basics';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
export function TeamJoinForm({ onSave, onClose }) {
|
||||
const { formatMessage, labels, getMessage } = useMessages();
|
||||
const { post, useMutation } = useApi();
|
||||
const { mutate, error } = useMutation(data => post('/teams/join', data));
|
||||
const ref = useRef(null);
|
||||
|
||||
const handleSubmit = async data => {
|
||||
mutate(data, {
|
||||
onSuccess: async () => {
|
||||
onSave();
|
||||
onClose();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form ref={ref} onSubmit={handleSubmit} error={error && getMessage(error)}>
|
||||
<FormRow label={formatMessage(labels.accessCode)}>
|
||||
<FormInput name="accessCode" rules={{ required: formatMessage(labels.required) }}>
|
||||
<TextField autoComplete="off" />
|
||||
</FormInput>
|
||||
</FormRow>
|
||||
<FormButtons flex>
|
||||
<SubmitButton variant="primary">{formatMessage(labels.join)}</SubmitButton>
|
||||
<Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamJoinForm;
|
||||
37
src/components/pages/settings/teams/TeamLeaveForm.js
Normal file
37
src/components/pages/settings/teams/TeamLeaveForm.js
Normal file
@@ -0,0 +1,37 @@
|
||||
import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
export function TeamLeaveForm({ teamId, userId, teamName, onSave, onClose }) {
|
||||
const { formatMessage, labels, messages, FormattedMessage } = useMessages();
|
||||
const { del, useMutation } = useApi();
|
||||
const { mutate, error, isLoading } = useMutation(() => del(`/teams/${teamId}/users/${userId}`));
|
||||
|
||||
const handleSubmit = async () => {
|
||||
mutate(
|
||||
{},
|
||||
{
|
||||
onSuccess: async () => {
|
||||
onSave();
|
||||
onClose();
|
||||
},
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} error={error}>
|
||||
<p>
|
||||
<FormattedMessage {...messages.confirmDelete} values={{ target: <b>{teamName}</b> }} />
|
||||
</p>
|
||||
<FormButtons flex>
|
||||
<SubmitButton variant="danger" disabled={isLoading}>
|
||||
{formatMessage(labels.leave)}
|
||||
</SubmitButton>
|
||||
<Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamLeaveForm;
|
||||
@@ -0,0 +1,31 @@
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import { Icon, Icons, LoadingButton, Text } from 'react-basics';
|
||||
|
||||
export function TeamMemberRemoveButton({ teamId, userId, disabled, onSave }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { del, useMutation } = useApi();
|
||||
const { mutate, isLoading } = useMutation(() => del(`/teams/${teamId}/users/${userId}`));
|
||||
|
||||
const handleRemoveTeamMember = () => {
|
||||
mutate(
|
||||
{},
|
||||
{
|
||||
onSuccess: () => {
|
||||
onSave();
|
||||
},
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<LoadingButton onClick={() => handleRemoveTeamMember()} disabled={disabled} loading={isLoading}>
|
||||
<Icon>
|
||||
<Icons.Close />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.remove)}</Text>
|
||||
</LoadingButton>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamMemberRemoveButton;
|
||||
47
src/components/pages/settings/teams/TeamMembers.js
Normal file
47
src/components/pages/settings/teams/TeamMembers.js
Normal file
@@ -0,0 +1,47 @@
|
||||
import { Loading, useToasts } from 'react-basics';
|
||||
import TeamMembersTable from 'components/pages/settings/teams/TeamMembersTable';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import useApiFilter from 'components/hooks/useApiFilter';
|
||||
|
||||
export function TeamMembers({ teamId, readOnly }) {
|
||||
const { showToast } = useToasts();
|
||||
const { formatMessage, messages } = useMessages();
|
||||
const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
|
||||
useApiFilter();
|
||||
const { get, useQuery } = useApi();
|
||||
const { data, isLoading, refetch } = useQuery(
|
||||
['teams:users', teamId, filter, page, pageSize],
|
||||
() =>
|
||||
get(`/teams/${teamId}/users`, {
|
||||
filter,
|
||||
page,
|
||||
pageSize,
|
||||
}),
|
||||
);
|
||||
|
||||
if (isLoading) {
|
||||
return <Loading icon="dots" style={{ minHeight: 300 }} />;
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
await refetch();
|
||||
showToast({ message: formatMessage(messages.saved), variant: 'success' });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<TeamMembersTable
|
||||
onSave={handleSave}
|
||||
data={data}
|
||||
readOnly={readOnly}
|
||||
onFilterChange={handleFilterChange}
|
||||
onPageChange={handlePageChange}
|
||||
onPageSizeChange={handlePageSizeChange}
|
||||
filterValue={filter}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamMembers;
|
||||
65
src/components/pages/settings/teams/TeamMembersTable.js
Normal file
65
src/components/pages/settings/teams/TeamMembersTable.js
Normal file
@@ -0,0 +1,65 @@
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import useUser from 'components/hooks/useUser';
|
||||
import { ROLES } from 'lib/constants';
|
||||
import TeamMemberRemoveButton from './TeamMemberRemoveButton';
|
||||
import SettingsTable from 'components/common/SettingsTable';
|
||||
|
||||
export function TeamMembersTable({
|
||||
data = [],
|
||||
onSave,
|
||||
readOnly,
|
||||
filterValue,
|
||||
onFilterChange,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
}) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { user } = useUser();
|
||||
|
||||
const columns = [
|
||||
{ name: 'username', label: formatMessage(labels.username) },
|
||||
{ name: 'role', label: formatMessage(labels.role) },
|
||||
{ name: 'action', label: ' ' },
|
||||
];
|
||||
|
||||
const cellRender = (row, data, key) => {
|
||||
if (key === 'username') {
|
||||
return row?.username;
|
||||
}
|
||||
if (key === 'role') {
|
||||
return formatMessage(
|
||||
labels[Object.keys(ROLES).find(key => ROLES[key] === row.role) || labels.unknown],
|
||||
);
|
||||
}
|
||||
return data[key];
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingsTable
|
||||
data={data}
|
||||
columns={columns}
|
||||
cellRender={cellRender}
|
||||
showSearch={true}
|
||||
showPaging={true}
|
||||
onFilterChange={onFilterChange}
|
||||
onPageChange={onPageChange}
|
||||
onPageSizeChange={onPageSizeChange}
|
||||
filterValue={filterValue}
|
||||
>
|
||||
{row => {
|
||||
return (
|
||||
!readOnly && (
|
||||
<TeamMemberRemoveButton
|
||||
teamId={row.teamId}
|
||||
userId={row.id}
|
||||
disabled={user.id === row?.user?.id || row.role === ROLES.teamOwner}
|
||||
onSave={onSave}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}}
|
||||
</SettingsTable>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamMembersTable;
|
||||
71
src/components/pages/settings/teams/TeamSettings.js
Normal file
71
src/components/pages/settings/teams/TeamSettings.js
Normal file
@@ -0,0 +1,71 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Breadcrumbs, Item, Tabs, useToasts } from 'react-basics';
|
||||
import Link from 'next/link';
|
||||
import Page from 'components/layout/Page';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import { ROLES } from 'lib/constants';
|
||||
import useUser from 'components/hooks/useUser';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import TeamEditForm from './TeamEditForm';
|
||||
import TeamMembers from './TeamMembers';
|
||||
import TeamWebsites from './TeamWebsites';
|
||||
|
||||
export function TeamSettings({ teamId }) {
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { user } = useUser();
|
||||
const [values, setValues] = useState(null);
|
||||
const [tab, setTab] = useState('details');
|
||||
const { get, useQuery } = useApi();
|
||||
const { showToast } = useToasts();
|
||||
const { data, isLoading } = useQuery(
|
||||
['team', teamId],
|
||||
() => {
|
||||
if (teamId) {
|
||||
return get(`/teams/${teamId}`);
|
||||
}
|
||||
},
|
||||
{ cacheTime: 0 },
|
||||
);
|
||||
const canEdit = data?.teamUser?.find(
|
||||
({ userId, role }) => role === ROLES.teamOwner && userId === user.id,
|
||||
);
|
||||
|
||||
const handleSave = data => {
|
||||
showToast({ message: formatMessage(messages.saved), variant: 'success' });
|
||||
setValues(state => ({ ...state, ...data }));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
setValues(data);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<Page loading={isLoading || !values}>
|
||||
<PageHeader
|
||||
title={
|
||||
<Breadcrumbs>
|
||||
<Item>
|
||||
<Link href="/settings/teams">{formatMessage(labels.teams)}</Link>
|
||||
</Item>
|
||||
<Item>{values?.name}</Item>
|
||||
</Breadcrumbs>
|
||||
}
|
||||
/>
|
||||
<Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
|
||||
<Item key="details">{formatMessage(labels.details)}</Item>
|
||||
<Item key="members">{formatMessage(labels.members)}</Item>
|
||||
<Item key="websites">{formatMessage(labels.websites)}</Item>
|
||||
</Tabs>
|
||||
{tab === 'details' && (
|
||||
<TeamEditForm teamId={teamId} data={values} onSave={handleSave} readOnly={!canEdit} />
|
||||
)}
|
||||
{tab === 'members' && <TeamMembers teamId={teamId} readOnly={!canEdit} />}
|
||||
{tab === 'websites' && <TeamWebsites teamId={teamId} readOnly={!canEdit} />}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamSettings;
|
||||
@@ -0,0 +1,31 @@
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import { Icon, Icons, LoadingButton, Text } from 'react-basics';
|
||||
|
||||
export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { del, useMutation } = useApi();
|
||||
const { mutate, isLoading } = useMutation(() => del(`/teams/${teamId}/websites/${websiteId}`));
|
||||
|
||||
const handleRemoveTeamMember = () => {
|
||||
mutate(
|
||||
{},
|
||||
{
|
||||
onSuccess: () => {
|
||||
onSave();
|
||||
},
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<LoadingButton onClick={() => handleRemoveTeamMember()} loading={isLoading}>
|
||||
<Icon>
|
||||
<Icons.Close />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.remove)}</Text>
|
||||
</LoadingButton>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamWebsiteRemoveButton;
|
||||
76
src/components/pages/settings/teams/TeamWebsites.js
Normal file
76
src/components/pages/settings/teams/TeamWebsites.js
Normal file
@@ -0,0 +1,76 @@
|
||||
import {
|
||||
ActionForm,
|
||||
Button,
|
||||
Icon,
|
||||
Icons,
|
||||
Loading,
|
||||
Modal,
|
||||
ModalTrigger,
|
||||
Text,
|
||||
useToasts,
|
||||
} from 'react-basics';
|
||||
import TeamWebsitesTable from 'components/pages/settings/teams/TeamWebsitesTable';
|
||||
import TeamAddWebsiteForm from 'components/pages/settings/teams/TeamAddWebsiteForm';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import useApiFilter from 'components/hooks/useApiFilter';
|
||||
|
||||
export function TeamWebsites({ teamId }) {
|
||||
const { showToast } = useToasts();
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
|
||||
useApiFilter();
|
||||
const { get, useQuery } = useApi();
|
||||
const { data, isLoading, refetch } = useQuery(
|
||||
['teams:websites', teamId, filter, page, pageSize],
|
||||
() =>
|
||||
get(`/teams/${teamId}/websites`, {
|
||||
filter,
|
||||
page,
|
||||
pageSize,
|
||||
}),
|
||||
);
|
||||
const hasData = data && data.length !== 0;
|
||||
|
||||
if (isLoading) {
|
||||
return <Loading icon="dots" style={{ minHeight: 300 }} />;
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
await refetch();
|
||||
showToast({ message: formatMessage(messages.saved), variant: 'success' });
|
||||
};
|
||||
|
||||
const addButton = (
|
||||
<ModalTrigger>
|
||||
<Button variant="primary">
|
||||
<Icon>
|
||||
<Icons.Plus />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.addWebsite)}</Text>
|
||||
</Button>
|
||||
<Modal title={formatMessage(labels.addWebsite)}>
|
||||
{close => <TeamAddWebsiteForm teamId={teamId} onSave={handleSave} onClose={close} />}
|
||||
</Modal>
|
||||
</ModalTrigger>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ActionForm description={formatMessage(messages.teamWebsitesInfo)}>{addButton}</ActionForm>
|
||||
{hasData && (
|
||||
<TeamWebsitesTable
|
||||
teamId={teamId}
|
||||
data={data}
|
||||
onSave={handleSave}
|
||||
onFilterChange={handleFilterChange}
|
||||
onPageChange={handlePageChange}
|
||||
onPageSizeChange={handlePageSizeChange}
|
||||
filterValue={filter}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamWebsites;
|
||||
67
src/components/pages/settings/teams/TeamWebsitesTable.js
Normal file
67
src/components/pages/settings/teams/TeamWebsitesTable.js
Normal file
@@ -0,0 +1,67 @@
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import useUser from 'components/hooks/useUser';
|
||||
import Link from 'next/link';
|
||||
import { Button, Icon, Icons, Text } from 'react-basics';
|
||||
import TeamWebsiteRemoveButton from './TeamWebsiteRemoveButton';
|
||||
import SettingsTable from 'components/common/SettingsTable';
|
||||
import useConfig from 'components/hooks/useConfig';
|
||||
|
||||
export function TeamWebsitesTable({
|
||||
data = [],
|
||||
onSave,
|
||||
filterValue,
|
||||
onFilterChange,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
}) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { openExternal } = useConfig();
|
||||
|
||||
const { user } = useUser();
|
||||
const columns = [
|
||||
{ name: 'name', label: formatMessage(labels.name) },
|
||||
{ name: 'domain', label: formatMessage(labels.domain) },
|
||||
{ name: 'action', label: ' ' },
|
||||
];
|
||||
|
||||
return (
|
||||
<SettingsTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
showSearch={true}
|
||||
showPaging={true}
|
||||
onFilterChange={onFilterChange}
|
||||
onPageChange={onPageChange}
|
||||
onPageSizeChange={onPageSizeChange}
|
||||
filterValue={filterValue}
|
||||
>
|
||||
{row => {
|
||||
const { id: teamId, teamUser } = row.teamWebsite[0].team;
|
||||
const { id: websiteId, name, domain, userId } = row;
|
||||
const owner = teamUser[0];
|
||||
const canRemove = user.id === userId || user.id === owner.userId;
|
||||
|
||||
row.name = name;
|
||||
row.domain = domain;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Link href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
|
||||
<Button>
|
||||
<Icon>
|
||||
<Icons.External />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.view)}</Text>
|
||||
</Button>
|
||||
</Link>
|
||||
{canRemove && (
|
||||
<TeamWebsiteRemoveButton teamId={teamId} websiteId={websiteId} onSave={onSave} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</SettingsTable>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamWebsitesTable;
|
||||
116
src/components/pages/settings/teams/TeamsList.js
Normal file
116
src/components/pages/settings/teams/TeamsList.js
Normal file
@@ -0,0 +1,116 @@
|
||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||
import Icons from 'components/icons';
|
||||
import Page from 'components/layout/Page';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import TeamAddForm from 'components/pages/settings/teams/TeamAddForm';
|
||||
import TeamsTable from 'components/pages/settings/teams/TeamsTable';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import useUser from 'components/hooks/useUser';
|
||||
import { ROLES } from 'lib/constants';
|
||||
import { useState } from 'react';
|
||||
import { Button, Flexbox, Icon, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
|
||||
import TeamJoinForm from './TeamJoinForm';
|
||||
import useApiFilter from 'components/hooks/useApiFilter';
|
||||
|
||||
export default function TeamsList() {
|
||||
const { user } = useUser();
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
|
||||
useApiFilter();
|
||||
const [update, setUpdate] = useState(0);
|
||||
|
||||
const { get, useQuery } = useApi();
|
||||
const { data, isLoading, error } = useQuery(['teams', update, filter, page, pageSize], () => {
|
||||
return get(`/teams`, {
|
||||
filter,
|
||||
page,
|
||||
pageSize,
|
||||
});
|
||||
});
|
||||
|
||||
const hasData = data && data?.data.length !== 0;
|
||||
const isFiltered = filter;
|
||||
|
||||
const { showToast } = useToasts();
|
||||
|
||||
const handleSave = () => {
|
||||
setUpdate(state => state + 1);
|
||||
showToast({ message: formatMessage(messages.saved), variant: 'success' });
|
||||
};
|
||||
|
||||
const handleJoin = () => {
|
||||
setUpdate(state => state + 1);
|
||||
showToast({ message: formatMessage(messages.saved), variant: 'success' });
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
setUpdate(state => state + 1);
|
||||
showToast({ message: formatMessage(messages.saved), variant: 'success' });
|
||||
};
|
||||
|
||||
const joinButton = (
|
||||
<ModalTrigger>
|
||||
<Button variant="secondary">
|
||||
<Icon>
|
||||
<Icons.AddUser />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.joinTeam)}</Text>
|
||||
</Button>
|
||||
<Modal title={formatMessage(labels.joinTeam)}>
|
||||
{close => <TeamJoinForm onSave={handleJoin} onClose={close} />}
|
||||
</Modal>
|
||||
</ModalTrigger>
|
||||
);
|
||||
|
||||
const createButton = (
|
||||
<>
|
||||
{user.role !== ROLES.viewOnly && (
|
||||
<ModalTrigger>
|
||||
<Button variant="primary">
|
||||
<Icon>
|
||||
<Icons.Plus />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.createTeam)}</Text>
|
||||
</Button>
|
||||
<Modal title={formatMessage(labels.createTeam)}>
|
||||
{close => <TeamAddForm onSave={handleSave} onClose={close} />}
|
||||
</Modal>
|
||||
</ModalTrigger>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<Page loading={isLoading} error={error}>
|
||||
<PageHeader title={formatMessage(labels.teams)}>
|
||||
{(hasData || isFiltered) && (
|
||||
<Flexbox gap={10}>
|
||||
{joinButton}
|
||||
{createButton}
|
||||
</Flexbox>
|
||||
)}
|
||||
</PageHeader>
|
||||
|
||||
{(hasData || isFiltered) && (
|
||||
<TeamsTable
|
||||
data={data}
|
||||
onDelete={handleDelete}
|
||||
onFilterChange={handleFilterChange}
|
||||
onPageChange={handlePageChange}
|
||||
onPageSizeChange={handlePageSizeChange}
|
||||
filterValue={filter}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!hasData && !isFiltered && (
|
||||
<EmptyPlaceholder message={formatMessage(messages.noTeams)}>
|
||||
<Flexbox gap={10}>
|
||||
{joinButton}
|
||||
{createButton}
|
||||
</Flexbox>
|
||||
</EmptyPlaceholder>
|
||||
)}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
111
src/components/pages/settings/teams/TeamsTable.js
Normal file
111
src/components/pages/settings/teams/TeamsTable.js
Normal file
@@ -0,0 +1,111 @@
|
||||
import SettingsTable from 'components/common/SettingsTable';
|
||||
import useLocale from 'components/hooks/useLocale';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import useUser from 'components/hooks/useUser';
|
||||
import { ROLES } from 'lib/constants';
|
||||
import Link from 'next/link';
|
||||
import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
|
||||
import TeamDeleteForm from './TeamDeleteForm';
|
||||
import TeamLeaveForm from './TeamLeaveForm';
|
||||
|
||||
export function TeamsTable({
|
||||
data = { data: [] },
|
||||
onDelete,
|
||||
filterValue,
|
||||
onFilterChange,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
}) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { user } = useUser();
|
||||
const { dir } = useLocale();
|
||||
|
||||
const columns = [
|
||||
{ name: 'name', label: formatMessage(labels.name) },
|
||||
{ name: 'owner', label: formatMessage(labels.owner) },
|
||||
{ name: 'action', label: ' ' },
|
||||
];
|
||||
|
||||
const cellRender = (row, data, key) => {
|
||||
if (key === 'owner') {
|
||||
return row.teamUser.find(({ role }) => role === ROLES.teamOwner)?.user?.username;
|
||||
}
|
||||
return data[key];
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingsTable
|
||||
data={data}
|
||||
columns={columns}
|
||||
cellRender={cellRender}
|
||||
showSearch={true}
|
||||
showPaging={true}
|
||||
onFilterChange={onFilterChange}
|
||||
onPageChange={onPageChange}
|
||||
onPageSizeChange={onPageSizeChange}
|
||||
filterValue={filterValue}
|
||||
>
|
||||
{row => {
|
||||
const { id, teamUser } = row;
|
||||
const owner = teamUser.find(({ role }) => role === ROLES.teamOwner);
|
||||
const showDelete = user.id === owner?.userId;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Link href={`/settings/teams/${id}`}>
|
||||
<Button>
|
||||
<Icon>
|
||||
<Icons.Show />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.view)}</Text>
|
||||
</Button>
|
||||
</Link>
|
||||
{showDelete && (
|
||||
<ModalTrigger>
|
||||
<Button>
|
||||
<Icon>
|
||||
<Icons.Trash />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.delete)}</Text>
|
||||
</Button>
|
||||
<Modal title={formatMessage(labels.deleteTeam)}>
|
||||
{close => (
|
||||
<TeamDeleteForm
|
||||
teamId={row.id}
|
||||
teamName={row.name}
|
||||
onSave={onDelete}
|
||||
onClose={close}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
</ModalTrigger>
|
||||
)}
|
||||
{!showDelete && (
|
||||
<ModalTrigger>
|
||||
<Button>
|
||||
<Icon rotate={dir === 'rtl' ? 180 : 0}>
|
||||
<Icons.ArrowRight />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.leave)}</Text>
|
||||
</Button>
|
||||
<Modal title={formatMessage(labels.leaveTeam)}>
|
||||
{close => (
|
||||
<TeamLeaveForm
|
||||
teamId={id}
|
||||
userId={user.id}
|
||||
teamName={row.name}
|
||||
onSave={onDelete}
|
||||
onClose={close}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
</ModalTrigger>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</SettingsTable>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamsTable;
|
||||
31
src/components/pages/settings/teams/WebsiteTags.js
Normal file
31
src/components/pages/settings/teams/WebsiteTags.js
Normal file
@@ -0,0 +1,31 @@
|
||||
import { Button, Icon, Icons, Text } from 'react-basics';
|
||||
import styles from './WebsiteTags.module.css';
|
||||
|
||||
export function WebsiteTags({ items = [], websites = [], onClick }) {
|
||||
if (websites.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.filters}>
|
||||
{websites.map(websiteId => {
|
||||
const website = items.find(a => a.id === websiteId);
|
||||
|
||||
return (
|
||||
<div key={websiteId} className={styles.tag}>
|
||||
<Button onClick={() => onClick(websiteId)} variant="primary" size="sm">
|
||||
<Text>
|
||||
<b>{`${website.name}`}</b>
|
||||
</Text>
|
||||
<Icon>
|
||||
<Icons.Close />
|
||||
</Icon>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default WebsiteTags;
|
||||
11
src/components/pages/settings/teams/WebsiteTags.module.css
Normal file
11
src/components/pages/settings/teams/WebsiteTags.module.css
Normal file
@@ -0,0 +1,11 @@
|
||||
.filters {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.tag {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
27
src/components/pages/settings/users/UserAddButton.js
Normal file
27
src/components/pages/settings/users/UserAddButton.js
Normal file
@@ -0,0 +1,27 @@
|
||||
import { Button, Icon, Text, Modal, Icons, ModalTrigger } from 'react-basics';
|
||||
import UserAddForm from './UserAddForm';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
export function UserAddButton({ onSave }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
const handleSave = () => {
|
||||
onSave();
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalTrigger>
|
||||
<Button variant="primary">
|
||||
<Icon>
|
||||
<Icons.Plus />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.createUser)}</Text>
|
||||
</Button>
|
||||
<Modal title={formatMessage(labels.createUser)}>
|
||||
{close => <UserAddForm onSave={handleSave} onClose={close} />}
|
||||
</Modal>
|
||||
</ModalTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
export default UserAddButton;
|
||||
76
src/components/pages/settings/users/UserAddForm.js
Normal file
76
src/components/pages/settings/users/UserAddForm.js
Normal file
@@ -0,0 +1,76 @@
|
||||
import {
|
||||
Dropdown,
|
||||
Item,
|
||||
Form,
|
||||
FormRow,
|
||||
FormButtons,
|
||||
FormInput,
|
||||
TextField,
|
||||
PasswordField,
|
||||
SubmitButton,
|
||||
Button,
|
||||
} from 'react-basics';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import { ROLES } from 'lib/constants';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
export function UserAddForm({ onSave, onClose }) {
|
||||
const { post, useMutation } = useApi();
|
||||
const { mutate, error, isLoading } = useMutation(data => post(`/users`, data));
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
const handleSubmit = async data => {
|
||||
mutate(data, {
|
||||
onSuccess: async () => {
|
||||
onSave(data);
|
||||
onClose();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const renderValue = value => {
|
||||
if (value === ROLES.user) {
|
||||
return formatMessage(labels.user);
|
||||
}
|
||||
if (value === ROLES.admin) {
|
||||
return formatMessage(labels.admin);
|
||||
}
|
||||
if (value === ROLES.viewOnly) {
|
||||
return formatMessage(labels.viewOnly);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} error={error}>
|
||||
<FormRow label={formatMessage(labels.username)}>
|
||||
<FormInput name="username" rules={{ required: formatMessage(labels.required) }}>
|
||||
<TextField autoComplete="new-username" />
|
||||
</FormInput>
|
||||
</FormRow>
|
||||
<FormRow label={formatMessage(labels.password)}>
|
||||
<FormInput name="password" rules={{ required: formatMessage(labels.required) }}>
|
||||
<PasswordField autoComplete="new-password" />
|
||||
</FormInput>
|
||||
</FormRow>
|
||||
<FormRow label={formatMessage(labels.role)}>
|
||||
<FormInput name="role" rules={{ required: formatMessage(labels.required) }}>
|
||||
<Dropdown renderValue={renderValue}>
|
||||
<Item key={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</Item>
|
||||
<Item key={ROLES.user}>{formatMessage(labels.user)}</Item>
|
||||
<Item key={ROLES.admin}>{formatMessage(labels.admin)}</Item>
|
||||
</Dropdown>
|
||||
</FormInput>
|
||||
</FormRow>
|
||||
<FormButtons flex>
|
||||
<SubmitButton variant="primary" disabled={false}>
|
||||
{formatMessage(labels.save)}
|
||||
</SubmitButton>
|
||||
<Button disabled={isLoading} onClick={onClose}>
|
||||
{formatMessage(labels.cancel)}
|
||||
</Button>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default UserAddForm;
|
||||
37
src/components/pages/settings/users/UserDeleteForm.js
Normal file
37
src/components/pages/settings/users/UserDeleteForm.js
Normal file
@@ -0,0 +1,37 @@
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
export function UserDeleteForm({ userId, username, onSave, onClose }) {
|
||||
const { formatMessage, FormattedMessage, labels, messages } = useMessages();
|
||||
const { del } = useApi();
|
||||
const { mutate, error, isLoading } = useMutation(() => del(`/users/${userId}`));
|
||||
|
||||
const handleSubmit = async data => {
|
||||
mutate(data, {
|
||||
onSuccess: async () => {
|
||||
onSave();
|
||||
onClose();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} error={error}>
|
||||
<p>
|
||||
<FormattedMessage {...messages.confirmDelete} values={{ target: <b>{username}</b> }} />
|
||||
</p>
|
||||
<FormButtons flex>
|
||||
<SubmitButton variant="danger" disabled={isLoading}>
|
||||
{formatMessage(labels.delete)}
|
||||
</SubmitButton>
|
||||
<Button disabled={isLoading} onClick={onClose}>
|
||||
{formatMessage(labels.cancel)}
|
||||
</Button>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default UserDeleteForm;
|
||||
76
src/components/pages/settings/users/UserEditForm.js
Normal file
76
src/components/pages/settings/users/UserEditForm.js
Normal file
@@ -0,0 +1,76 @@
|
||||
import {
|
||||
Dropdown,
|
||||
Item,
|
||||
Form,
|
||||
FormRow,
|
||||
FormButtons,
|
||||
FormInput,
|
||||
TextField,
|
||||
SubmitButton,
|
||||
PasswordField,
|
||||
} from 'react-basics';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import { ROLES } from 'lib/constants';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
export function UserEditForm({ userId, data, onSave }) {
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { post, useMutation } = useApi();
|
||||
const { mutate, error } = useMutation(({ username, password, role }) =>
|
||||
post(`/users/${userId}`, { username, password, role }),
|
||||
);
|
||||
|
||||
const handleSubmit = async data => {
|
||||
mutate(data, {
|
||||
onSuccess: async () => {
|
||||
onSave(data);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const renderValue = value => {
|
||||
if (value === ROLES.user) {
|
||||
return formatMessage(labels.user);
|
||||
}
|
||||
if (value === ROLES.admin) {
|
||||
return formatMessage(labels.admin);
|
||||
}
|
||||
if (value === ROLES.viewOnly) {
|
||||
return formatMessage(labels.viewOnly);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} error={error} values={data} style={{ width: 300 }}>
|
||||
<FormRow label={formatMessage(labels.username)}>
|
||||
<FormInput name="username">
|
||||
<TextField />
|
||||
</FormInput>
|
||||
</FormRow>
|
||||
<FormRow label={formatMessage(labels.password)}>
|
||||
<FormInput
|
||||
name="password"
|
||||
rules={{
|
||||
minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
|
||||
}}
|
||||
>
|
||||
<PasswordField autoComplete="new-password" />
|
||||
</FormInput>
|
||||
</FormRow>
|
||||
<FormRow label={formatMessage(labels.role)}>
|
||||
<FormInput name="role" rules={{ required: formatMessage(labels.required) }}>
|
||||
<Dropdown renderValue={renderValue}>
|
||||
<Item key={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</Item>
|
||||
<Item key={ROLES.user}>{formatMessage(labels.user)}</Item>
|
||||
<Item key={ROLES.admin}>{formatMessage(labels.admin)}</Item>
|
||||
</Dropdown>
|
||||
</FormInput>
|
||||
</FormRow>
|
||||
<FormButtons>
|
||||
<SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default UserEditForm;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user