mirror of
https://github.com/umami-software/umami.git
synced 2026-02-11 08:07:12 +01:00
More refactoring.
This commit is contained in:
Mike Cao
parent
5f15ad0807
commit
02a1438cfe
41 changed files with 196 additions and 721 deletions
|
|
@ -1,8 +1,7 @@
|
|||
import { Button, Column, Loading, Row } from 'react-basics';
|
||||
import { Button, Column, Row, Dropdown, Item } from 'react-basics';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
import DropDown from 'components/common/DropDown';
|
||||
import Page from 'components/layout/Page';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import EventsChart from 'components/metrics/EventsChart';
|
||||
|
|
@ -12,29 +11,14 @@ import styles from './TestConsole.module.css';
|
|||
|
||||
export default function TestConsole() {
|
||||
const { get, useQuery } = useApi();
|
||||
const { data, isLoading } = useQuery(['websites:test-console'], () =>
|
||||
get('/websites?include_all=true'),
|
||||
);
|
||||
const { data, isLoading, error } = useQuery(['websites:test-console'], () => get('/websites'));
|
||||
const router = useRouter();
|
||||
const {
|
||||
basePath,
|
||||
query: { id },
|
||||
} = router;
|
||||
const websiteId = id?.[0];
|
||||
|
||||
if (isLoading) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const options = data.map(({ name, id }) => ({ label: name, value: id }));
|
||||
const website = data.find(({ id }) => websiteId === id);
|
||||
const selectedValue = options.find(({ value }) => value === website?.id)?.value;
|
||||
|
||||
function handleSelect(value) {
|
||||
function handleChange(value) {
|
||||
router.push(`/console/${value}`);
|
||||
}
|
||||
|
||||
|
|
@ -45,8 +29,15 @@ export default function TestConsole() {
|
|||
window.umami.trackEvent('track-event-with-data', { test: 'test-data', time: Date.now() });
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const websiteId = id?.[0];
|
||||
const website = data.find(({ id }) => websiteId === id);
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Page loading={isLoading} error={error}>
|
||||
<Head>
|
||||
{typeof window !== 'undefined' && website && (
|
||||
<script
|
||||
|
|
@ -58,19 +49,22 @@ export default function TestConsole() {
|
|||
/>
|
||||
)}
|
||||
</Head>
|
||||
<PageHeader>
|
||||
<div>Test Console</div>
|
||||
<DropDown
|
||||
value={selectedValue || 'Select website'}
|
||||
options={options}
|
||||
onChange={handleSelect}
|
||||
/>
|
||||
<PageHeader title="Test console">
|
||||
<Dropdown
|
||||
items={data}
|
||||
renderValue={() => website?.name || 'Select website'}
|
||||
value={website?.id}
|
||||
onChange={handleChange}
|
||||
style={{ width: 300 }}
|
||||
>
|
||||
{({ id, name }) => <Item key={id}>{name}</Item>}
|
||||
</Dropdown>
|
||||
</PageHeader>
|
||||
{website && (
|
||||
<>
|
||||
<Row className={styles.test}>
|
||||
<Column xs="4">
|
||||
<PageHeader>Page links</PageHeader>
|
||||
<div className={styles.header}>Page links</div>
|
||||
<div>
|
||||
<Link href={`/console/${websiteId}?page=1`}>
|
||||
<a>page one</a>
|
||||
|
|
@ -95,13 +89,13 @@ export default function TestConsole() {
|
|||
</div>
|
||||
</Column>
|
||||
<Column xs="4">
|
||||
<PageHeader>CSS events</PageHeader>
|
||||
<div className={styles.header}>CSS events</div>
|
||||
<Button id="primary-button" className="umami--click--button-click" variant="action">
|
||||
Send event
|
||||
</Button>
|
||||
</Column>
|
||||
<Column xs="4">
|
||||
<PageHeader>Javascript events</PageHeader>
|
||||
<div className={styles.header}>Javascript events</div>
|
||||
<Button id="manual-button" variant="action" onClick={handleClick}>
|
||||
Run script
|
||||
</Button>
|
||||
|
|
@ -109,13 +103,14 @@ export default function TestConsole() {
|
|||
</Row>
|
||||
<Row>
|
||||
<Column>
|
||||
<div className={styles.header}>Statistics</div>
|
||||
<WebsiteChart
|
||||
websiteId={website.id}
|
||||
title={website.name}
|
||||
domain={website.domain}
|
||||
showLink
|
||||
/>
|
||||
<PageHeader>Events</PageHeader>
|
||||
<div className={styles.header}>Events</div>
|
||||
<EventsChart websiteId={website.id} />
|
||||
</Column>
|
||||
</Row>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@
|
|||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useIntl } from 'react-intl';
|
||||
import { Button, Icon, Text, useToast, ModalTrigger, Modal } from 'react-basics';
|
||||
import PasswordEditForm from 'components/pages/settings/profile/PasswordEditForm';
|
||||
import { Lock } from 'components/icons';
|
||||
import Icons from 'components/icons';
|
||||
import { labels, messages } from 'components/messages';
|
||||
|
||||
export default function PasswordChangeButton() {
|
||||
|
|
@ -18,7 +18,7 @@ export default function PasswordChangeButton() {
|
|||
<ModalTrigger modalProps={{ title: formatMessage(labels.changePassword) }}>
|
||||
<Button>
|
||||
<Icon>
|
||||
<Lock />
|
||||
<Icons.Lock />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.changePassword)}</Text>
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -21,15 +21,15 @@ export default function ProfileDetails() {
|
|||
<Form>
|
||||
<FormRow label={formatMessage(labels.username)}>{username}</FormRow>
|
||||
<FormRow label={formatMessage(labels.role)}>{role}</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.dateRange)}>
|
||||
<DateRangeSetting />
|
||||
</FormRow>
|
||||
<FormRow label={formatMessage(labels.theme)}>
|
||||
<ThemeSetting />
|
||||
</FormRow>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export default function TeamEditForm({ teamId, data, onSave }) {
|
|||
};
|
||||
|
||||
return (
|
||||
<Form ref={ref} onSubmit={handleSubmit} error={error} values={data}>
|
||||
<Form ref={ref} onSubmit={handleSubmit} error={error} values={data} style={{ width: 600 }}>
|
||||
<FormRow label={formatMessage(labels.teamId)}>
|
||||
<TextField value={teamId} readOnly allowCopy />
|
||||
</FormRow>
|
||||
|
|
|
|||
|
|
@ -14,14 +14,16 @@ import {
|
|||
import { useIntl } from 'react-intl';
|
||||
import { ROLES } from 'lib/constants';
|
||||
import { labels } from 'components/messages';
|
||||
import useUser from 'hooks/useUser';
|
||||
|
||||
export default function TeamMembersTable({ data = [] }) {
|
||||
const { formatMessage } = useIntl();
|
||||
const { user } = useUser();
|
||||
|
||||
const columns = [
|
||||
{ name: 'username', label: formatMessage(labels.username), style: { flex: 4 } },
|
||||
{ name: 'role', label: formatMessage(labels.role) },
|
||||
{ name: 'action', label: '' },
|
||||
{ name: 'username', label: formatMessage(labels.username), style: { flex: 2 } },
|
||||
{ name: 'role', label: formatMessage(labels.role), style: { flex: 1 } },
|
||||
{ name: 'action', label: '', style: { flex: 1 } },
|
||||
];
|
||||
|
||||
return (
|
||||
|
|
@ -43,14 +45,14 @@ export default function TeamMembersTable({ data = [] }) {
|
|||
labels[Object.keys(ROLES).find(key => ROLES[key] === row.role) || labels.unknown],
|
||||
),
|
||||
action: (
|
||||
<div>
|
||||
<Button>
|
||||
<Flexbox flex={1} justifyContent="end">
|
||||
<Button disabled={user.id === row?.user?.id}>
|
||||
<Icon>
|
||||
<Icons.Close />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.remove)}</Text>
|
||||
</Button>
|
||||
</div>
|
||||
</Flexbox>
|
||||
),
|
||||
};
|
||||
|
||||
|
|
@ -59,11 +61,7 @@ export default function TeamMembersTable({ data = [] }) {
|
|||
{(data, key, colIndex) => {
|
||||
return (
|
||||
<TableCell key={colIndex} style={{ ...columns[colIndex]?.style }}>
|
||||
<Flexbox
|
||||
flex={1}
|
||||
alignItems="center"
|
||||
justifyContent={key === 'action' ? 'end' : undefined}
|
||||
>
|
||||
<Flexbox flex={1} alignItems="center">
|
||||
{data[key]}
|
||||
</Flexbox>
|
||||
</TableCell>
|
||||
|
|
|
|||
|
|
@ -7,23 +7,20 @@ import {
|
|||
TableCell,
|
||||
TableColumn,
|
||||
Button,
|
||||
Text,
|
||||
Icon,
|
||||
Icons,
|
||||
Flexbox,
|
||||
} from 'react-basics';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
const messages = defineMessages({
|
||||
name: { id: 'label.name', defaultMessage: 'Name' },
|
||||
domain: { id: 'label.domain', defaultMessage: 'Domain' },
|
||||
});
|
||||
import { useIntl } from 'react-intl';
|
||||
import { labels } from 'components/messages';
|
||||
|
||||
export default function WebsitesTable({ data = [] }) {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
const columns = [
|
||||
{ name: 'name', label: formatMessage(messages.name), style: { flex: 2 } },
|
||||
{ name: 'domain', label: formatMessage(messages.domain) },
|
||||
{ name: 'name', label: formatMessage(labels.name), style: { flex: 2 } },
|
||||
{ name: 'domain', label: formatMessage(labels.domain) },
|
||||
{ name: 'action', label: ' ' },
|
||||
];
|
||||
|
||||
|
|
@ -50,7 +47,7 @@ export default function WebsitesTable({ data = [] }) {
|
|||
<Icon>
|
||||
<Icons.ArrowRight />
|
||||
</Icon>
|
||||
Settings
|
||||
<Text>Settings</Text>
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
|
|
@ -60,7 +57,7 @@ export default function WebsitesTable({ data = [] }) {
|
|||
<Icon>
|
||||
<Icons.External />
|
||||
</Icon>
|
||||
View
|
||||
<Text>View</Text>
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import Arrow from 'assets/arrow-right.svg';
|
||||
import { Icons } from 'react-basics';
|
||||
import classNames from 'classnames';
|
||||
import Link from 'components/common/Link';
|
||||
import WorldMap from 'components/common/WorldMap';
|
||||
|
|
@ -67,7 +67,12 @@ export default function WebsiteDetails({ websiteId }) {
|
|||
|
||||
const BackButton = () => (
|
||||
<div key="back-button" className={classNames(styles.backButton, 'col-12')}>
|
||||
<Link key="back-button" href={resolve({ view: undefined })} icon={<Arrow />} sizes="small">
|
||||
<Link
|
||||
key="back-button"
|
||||
href={resolve({ view: undefined })}
|
||||
icon={<Icons.ArrowRight />}
|
||||
sizes="small"
|
||||
>
|
||||
<FormattedMessage id="label.back" defaultMessage="Back" />
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue