mirror of
https://github.com/kremalicious/umami.git
synced 2024-12-24 18:26:20 +01:00
Merge branch 'dev' of https://github.com/umami-software/umami into dev
This commit is contained in:
commit
5997efc276
@ -13,18 +13,32 @@ export default function HamburgerButton() {
|
||||
const menuItems = [
|
||||
{
|
||||
label: formatMessage(labels.dashboard),
|
||||
value: '/dashboard',
|
||||
url: '/dashboard',
|
||||
},
|
||||
{ label: formatMessage(labels.realtime), value: '/realtime' },
|
||||
{ label: formatMessage(labels.realtime), url: '/realtime' },
|
||||
!cloudMode && {
|
||||
label: formatMessage(labels.settings),
|
||||
value: '/settings',
|
||||
url: '/settings',
|
||||
children: [
|
||||
{
|
||||
label: formatMessage(labels.websites),
|
||||
url: '/settings/websites',
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.teams),
|
||||
url: '/settings/teams',
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.users),
|
||||
url: '/settings/users',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.profile),
|
||||
value: '/settings/profile',
|
||||
url: '/settings/profile',
|
||||
},
|
||||
!cloudMode && { label: formatMessage(labels.logout), value: '/logout' },
|
||||
!cloudMode && { label: formatMessage(labels.logout), url: '/logout' },
|
||||
].filter(n => n);
|
||||
|
||||
const handleClick = () => setActive(state => !state);
|
||||
|
@ -1,17 +1,36 @@
|
||||
import classNames from 'classnames';
|
||||
import { useRouter } from 'next/router';
|
||||
import Link from 'next/link';
|
||||
import styles from './MobileMenu.module.css';
|
||||
|
||||
export default function MobileMenu({ items = [], onClose }) {
|
||||
const { pathname } = useRouter();
|
||||
|
||||
const Items = ({ items, className }) => (
|
||||
<div className={classNames(styles.items, className)}>
|
||||
{items.map(({ label, url, children }) => {
|
||||
const selected = pathname.startsWith(url);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Link
|
||||
key={url}
|
||||
href={url}
|
||||
className={classNames(styles.item, { [styles.selected]: selected })}
|
||||
onClick={onClose}
|
||||
>
|
||||
{label}
|
||||
</Link>
|
||||
{children && <Items items={children} className={styles.submenu} />}
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={classNames(styles.menu)}>
|
||||
<div className={styles.items}>
|
||||
{items.map(({ label, value }) => (
|
||||
<Link key={value} href={value} className={styles.item} onClick={onClose}>
|
||||
{label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<Items items={items} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -25,5 +25,15 @@
|
||||
}
|
||||
|
||||
a.item {
|
||||
color: var(--base600);
|
||||
}
|
||||
|
||||
a.item.selected,
|
||||
.submenu a.item.selected {
|
||||
color: var(--base900);
|
||||
}
|
||||
|
||||
.submenu a.item {
|
||||
color: var(--base600);
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
36
components/common/SettingsTable.js
Normal file
36
components/common/SettingsTable.js
Normal file
@ -0,0 +1,36 @@
|
||||
import { Table, TableHeader, TableBody, TableRow, TableCell, TableColumn } from 'react-basics';
|
||||
import styles from './SettingsTable.module.css';
|
||||
|
||||
export default function SettingsTable({ columns = [], data = [], children, cellRender }) {
|
||||
return (
|
||||
<Table columns={columns} rows={data}>
|
||||
<TableHeader className={styles.header}>
|
||||
{(column, index) => {
|
||||
return (
|
||||
<TableColumn key={index} className={styles.cell} style={columns[index].style}>
|
||||
{column.label}
|
||||
</TableColumn>
|
||||
);
|
||||
}}
|
||||
</TableHeader>
|
||||
<TableBody className={styles.body}>
|
||||
{(row, keys, rowIndex) => {
|
||||
row.action = children(row, keys, rowIndex);
|
||||
|
||||
return (
|
||||
<TableRow key={rowIndex} data={row} keys={keys} className={styles.row}>
|
||||
{(data, key, colIndex) => {
|
||||
return (
|
||||
<TableCell key={colIndex} className={styles.cell} style={columns[colIndex].style}>
|
||||
<label className={styles.label}>{columns[colIndex].label}</label>
|
||||
{cellRender ? cellRender(row, data, key, colIndex) : data[key]}
|
||||
</TableCell>
|
||||
);
|
||||
}}
|
||||
</TableRow>
|
||||
);
|
||||
}}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
}
|
44
components/common/SettingsTable.module.css
Normal file
44
components/common/SettingsTable.module.css
Normal file
@ -0,0 +1,44 @@
|
||||
.cell {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row .cell:last-child {
|
||||
gap: 10px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
.header .cell {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.row .cell {
|
||||
padding-left: 0;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.header .cell:last-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.row .cell:last-child {
|
||||
padding-left: 0;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
@ -49,6 +49,10 @@
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.links span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.links a:hover {
|
||||
color: var(--font-color100);
|
||||
border-bottom: 2px solid var(--primary400);
|
||||
|
@ -1,13 +1,9 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { useBreakpoint } from 'react-basics';
|
||||
import styles from './PageHeader.module.css';
|
||||
|
||||
export default function PageHeader({ title, children }) {
|
||||
const breakPoint = useBreakpoint();
|
||||
|
||||
return (
|
||||
<div className={classNames(styles.header, { [styles[breakPoint]]: true })}>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.title}>{title}</div>
|
||||
<div className={styles.actions}>{children}</div>
|
||||
</div>
|
||||
|
@ -22,10 +22,25 @@
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
gap: 20px;
|
||||
line-height: 50px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.xs .actions,
|
||||
.sm .actions {
|
||||
flex-basis: 100%;
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.header {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
flex-basis: 100%;
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
|
@ -20,16 +20,16 @@ export default function SettingsLayout({ children }) {
|
||||
{ key: 'profile', label: formatMessage(labels.profile), url: '/settings/profile' },
|
||||
].filter(n => n);
|
||||
|
||||
const getKey = () => items.find(({ url }) => pathname.startsWith(url))?.key;
|
||||
const getKey = () => items.find(({ url }) => pathname === url)?.key;
|
||||
|
||||
return (
|
||||
<Row className={classNames({ [styles.hideMenu]: cloudMode })}>
|
||||
<Row>
|
||||
{!cloudMode && (
|
||||
<Column className={styles.menu} defaultSize={12} md={3} lg={2} xl={2}>
|
||||
<Column className={styles.menu} defaultSize={12} md={4} lg={3} xl={2}>
|
||||
<SideNav items={items} shallow={true} selectedKey={getKey()} />
|
||||
</Column>
|
||||
)}
|
||||
<Column className={styles.content} defaultSize={12} md={9} lg={10} xl={10}>
|
||||
<Column className={styles.content} defaultSize={12} md={8} lg={9} xl={10}>
|
||||
{children}
|
||||
</Column>
|
||||
</Row>
|
||||
|
@ -8,6 +8,8 @@
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
.hideMenu .content {
|
||||
margin: 0 auto;
|
||||
@media only screen and (max-width: 768px) {
|
||||
.menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
@ -13,10 +13,3 @@
|
||||
padding: 0;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.menu {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
@ -11,7 +11,7 @@ function mapData(data) {
|
||||
data?.reduce((obj, { timestamp }) => {
|
||||
const t = startOfMinute(new Date(timestamp));
|
||||
if (t.getTime() > last) {
|
||||
obj = { t: format(t, 'yyyy-LL-dd HH:mm:00'), y: 1 };
|
||||
obj = { x: format(t, 'yyyy-LL-dd HH:mm:00'), y: 1 };
|
||||
arr.push(obj);
|
||||
last = t.getTime();
|
||||
} else {
|
||||
|
@ -12,7 +12,7 @@ export default function DateRangeSetting() {
|
||||
const handleReset = () => setDateRange(DEFAULT_DATE_RANGE);
|
||||
|
||||
return (
|
||||
<Flexbox width={400} gap={10}>
|
||||
<Flexbox gap={10}>
|
||||
<DateFilter value={value} startDate={startDate} endDate={endDate} />
|
||||
<Button onClick={handleReset}>{formatMessage(labels.reset)}</Button>
|
||||
</Flexbox>
|
||||
|
@ -14,7 +14,7 @@ export default function LanguageSetting() {
|
||||
const renderValue = value => languages[value].label;
|
||||
|
||||
return (
|
||||
<Flexbox width={400} gap={10}>
|
||||
<Flexbox gap={10}>
|
||||
<Dropdown
|
||||
items={options}
|
||||
value={locale}
|
||||
|
@ -12,12 +12,13 @@ export default function TimezoneSetting() {
|
||||
const handleReset = () => saveTimezone(getTimezone());
|
||||
|
||||
return (
|
||||
<Flexbox width={400} gap={10}>
|
||||
<Flexbox gap={10}>
|
||||
<Dropdown
|
||||
items={options}
|
||||
value={timezone}
|
||||
onChange={saveTimezone}
|
||||
menuProps={{ style: { height: 300, width: 300 } }}
|
||||
style={{ flex: 1 }}
|
||||
menuProps={{ style: { height: 300 } }}
|
||||
>
|
||||
{item => <Item key={item}>{item}</Item>}
|
||||
</Dropdown>
|
||||
|
@ -41,7 +41,7 @@ export default function TeamEditForm({ teamId, data, onSave, readOnly }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<Form ref={ref} onSubmit={handleSubmit} error={error} values={data} style={{ width: 600 }}>
|
||||
<Form ref={ref} onSubmit={handleSubmit} error={error} values={data}>
|
||||
<FormRow label={formatMessage(labels.teamId)}>
|
||||
<TextField value={teamId} readOnly allowCopy />
|
||||
</FormRow>
|
||||
|
@ -12,7 +12,7 @@ export default function TeamMembers({ teamId, readOnly }) {
|
||||
);
|
||||
|
||||
if (isLoading) {
|
||||
return <Loading icon="dots" position="block" />;
|
||||
return <Loading icon="dots" style={{ minHeight: 300 }} />;
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
|
@ -1,72 +1,45 @@
|
||||
import useMessages from 'hooks/useMessages';
|
||||
import useUser from 'hooks/useUser';
|
||||
import { ROLES } from 'lib/constants';
|
||||
import {
|
||||
Flexbox,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableColumn,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from 'react-basics';
|
||||
import TeamMemberRemoveButton from './TeamMemberRemoveButton';
|
||||
import SettingsTable from 'components/common/SettingsTable';
|
||||
|
||||
export default function TeamMembersTable({ data = [], onSave, readOnly }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { user } = useUser();
|
||||
|
||||
const columns = [
|
||||
{ name: 'username', label: formatMessage(labels.username), style: { flex: 2 } },
|
||||
{ name: 'role', label: formatMessage(labels.role), style: { flex: 1 } },
|
||||
{ name: 'action', label: '', style: { flex: 1 } },
|
||||
{ name: 'username', label: formatMessage(labels.username) },
|
||||
{ name: 'role', label: formatMessage(labels.role) },
|
||||
{ name: 'action', label: ' ' },
|
||||
];
|
||||
|
||||
return (
|
||||
<Table columns={columns} rows={data}>
|
||||
<TableHeader>
|
||||
{(column, index) => {
|
||||
return (
|
||||
<TableColumn key={index} style={{ ...column.style }}>
|
||||
{column.label}
|
||||
</TableColumn>
|
||||
);
|
||||
}}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{(row, keys, rowIndex) => {
|
||||
const rowData = {
|
||||
username: row?.user?.username,
|
||||
role: formatMessage(
|
||||
labels[Object.keys(ROLES).find(key => ROLES[key] === row.role) || labels.unknown],
|
||||
),
|
||||
action: !readOnly && (
|
||||
<Flexbox flex={1} justifyContent="end">
|
||||
<TeamMemberRemoveButton
|
||||
teamId={row.teamId}
|
||||
userId={row.userId}
|
||||
disabled={user.id === row?.user?.id || row.role === ROLES.teamOwner}
|
||||
onSave={onSave}
|
||||
></TeamMemberRemoveButton>
|
||||
</Flexbox>
|
||||
),
|
||||
};
|
||||
const cellRender = (row, data, key) => {
|
||||
if (key === 'username') {
|
||||
return row?.user?.username;
|
||||
}
|
||||
if (key === 'role') {
|
||||
return formatMessage(
|
||||
labels[Object.keys(ROLES).find(key => ROLES[key] === row.role) || labels.unknown],
|
||||
);
|
||||
}
|
||||
return data[key];
|
||||
};
|
||||
|
||||
return (
|
||||
<TableRow key={rowIndex} data={rowData} keys={keys}>
|
||||
{(data, key, colIndex) => {
|
||||
return (
|
||||
<TableCell key={colIndex} style={{ ...columns[colIndex]?.style }}>
|
||||
<Flexbox flex={1} alignItems="center">
|
||||
{data[key]}
|
||||
</Flexbox>
|
||||
</TableCell>
|
||||
);
|
||||
}}
|
||||
</TableRow>
|
||||
);
|
||||
}}
|
||||
</TableBody>
|
||||
</Table>
|
||||
return (
|
||||
<SettingsTable data={data} columns={columns} cellRender={cellRender}>
|
||||
{row => {
|
||||
return (
|
||||
!readOnly && (
|
||||
<TeamMemberRemoveButton
|
||||
teamId={row.teamId}
|
||||
userId={row.userId}
|
||||
disabled={user.id === row?.user?.id || row.role === ROLES.teamOwner}
|
||||
onSave={onSave}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}}
|
||||
</SettingsTable>
|
||||
);
|
||||
}
|
||||
|
@ -9,7 +9,6 @@ import {
|
||||
Text,
|
||||
useToast,
|
||||
} from 'react-basics';
|
||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||
import TeamWebsitesTable from 'components/pages/settings/teams/TeamWebsitesTable';
|
||||
import TeamAddWebsiteForm from 'components/pages/settings/teams/TeamAddWebsiteForm';
|
||||
import useApi from 'hooks/useApi';
|
||||
@ -25,7 +24,7 @@ export default function TeamWebsites({ teamId }) {
|
||||
const hasData = data && data.length !== 0;
|
||||
|
||||
if (isLoading) {
|
||||
return <Loading icon="dots" position="block" />;
|
||||
return <Loading icon="dots" style={{ minHeight: 300 }} />;
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
@ -50,15 +49,8 @@ export default function TeamWebsites({ teamId }) {
|
||||
return (
|
||||
<div>
|
||||
{toast}
|
||||
{hasData && (
|
||||
<ActionForm description={formatMessage(messages.teamWebsitesInfo)}>{addButton}</ActionForm>
|
||||
)}
|
||||
<ActionForm description={formatMessage(messages.teamWebsitesInfo)}>{addButton}</ActionForm>
|
||||
{hasData && <TeamWebsitesTable teamId={teamId} data={data} onSave={handleSave} />}
|
||||
{!hasData && (
|
||||
<EmptyPlaceholder message={formatMessage(messages.noTeamWebsites)}>
|
||||
{addButton}
|
||||
</EmptyPlaceholder>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -1,23 +1,14 @@
|
||||
import useMessages from 'hooks/useMessages';
|
||||
import useUser from 'hooks/useUser';
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
Button,
|
||||
Flexbox,
|
||||
Icon,
|
||||
Icons,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableColumn,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
Text,
|
||||
} from 'react-basics';
|
||||
import { Button, Icon, Icons, Text } from 'react-basics';
|
||||
import TeamWebsiteRemoveButton from './TeamWebsiteRemoveButton';
|
||||
import SettingsTable from 'components/common/SettingsTable';
|
||||
import useConfig from 'hooks/useConfig';
|
||||
|
||||
export default function TeamWebsitesTable({ data = [], onSave }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { openExternal } = useConfig();
|
||||
const { user } = useUser();
|
||||
const columns = [
|
||||
{ name: 'name', label: formatMessage(labels.name) },
|
||||
@ -26,62 +17,37 @@ export default function TeamWebsitesTable({ data = [], onSave }) {
|
||||
];
|
||||
|
||||
return (
|
||||
<Table columns={columns} rows={data}>
|
||||
<TableHeader>
|
||||
{(column, index) => {
|
||||
return (
|
||||
<TableColumn key={index} style={{ ...column.style }}>
|
||||
{column.label}
|
||||
</TableColumn>
|
||||
);
|
||||
}}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{(row, keys, rowIndex) => {
|
||||
const { teamId } = row;
|
||||
const { id: websiteId, name, domain, userId } = row.website;
|
||||
const { teamUser } = row.team;
|
||||
const owner = teamUser[0];
|
||||
const canRemove = user.id === userId || user.id === owner.userId;
|
||||
<SettingsTable columns={columns} data={data}>
|
||||
{row => {
|
||||
const { teamId } = row;
|
||||
const { id: websiteId, name, domain, userId } = row.website;
|
||||
const { teamUser } = row.team;
|
||||
const owner = teamUser[0];
|
||||
const canRemove = user.id === userId || user.id === owner.userId;
|
||||
|
||||
row.name = name;
|
||||
row.domain = domain;
|
||||
row.name = name;
|
||||
row.domain = domain;
|
||||
|
||||
row.action = (
|
||||
<Flexbox flex={1} justifyContent="end" gap={10}>
|
||||
<Link href={`/websites/${websiteId}`} target="_blank">
|
||||
<Button>
|
||||
<Icon>
|
||||
<Icons.External />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.view)}</Text>
|
||||
</Button>
|
||||
</Link>
|
||||
{canRemove && (
|
||||
<TeamWebsiteRemoveButton
|
||||
teamId={teamId}
|
||||
websiteId={websiteId}
|
||||
onSave={onSave}
|
||||
></TeamWebsiteRemoveButton>
|
||||
)}
|
||||
</Flexbox>
|
||||
);
|
||||
|
||||
return (
|
||||
<TableRow key={rowIndex} data={row} keys={keys}>
|
||||
{(data, key, colIndex) => {
|
||||
return (
|
||||
<TableCell key={colIndex} style={{ ...columns[colIndex]?.style }}>
|
||||
<Flexbox flex={1} alignItems="center">
|
||||
{data[key]}
|
||||
</Flexbox>
|
||||
</TableCell>
|
||||
);
|
||||
}}
|
||||
</TableRow>
|
||||
);
|
||||
}}
|
||||
</TableBody>
|
||||
</Table>
|
||||
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}
|
||||
></TeamWebsiteRemoveButton>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</SettingsTable>
|
||||
);
|
||||
}
|
||||
|
@ -1,126 +1,90 @@
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
Button,
|
||||
Flexbox,
|
||||
Icon,
|
||||
Icons,
|
||||
Modal,
|
||||
ModalTrigger,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableColumn,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
Text,
|
||||
} from 'react-basics';
|
||||
import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
|
||||
import TeamDeleteForm from './TeamDeleteForm';
|
||||
import TeamLeaveForm from './TeamLeaveForm';
|
||||
import useMessages from 'hooks/useMessages';
|
||||
import useUser from 'hooks/useUser';
|
||||
import { ROLES } from 'lib/constants';
|
||||
import SettingsTable from 'components/common/SettingsTable';
|
||||
|
||||
export default function TeamsTable({ data = [], onDelete }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { user } = useUser();
|
||||
|
||||
const columns = [
|
||||
{ name: 'name', label: formatMessage(labels.name), style: { flex: 2 } },
|
||||
{ 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 (
|
||||
<Table columns={columns} rows={data}>
|
||||
<TableHeader>
|
||||
{(column, index) => {
|
||||
return (
|
||||
<TableColumn key={index} style={{ ...column.style }}>
|
||||
{column.label}
|
||||
</TableColumn>
|
||||
);
|
||||
}}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{(row, keys, rowIndex) => {
|
||||
const { id, teamUser } = row;
|
||||
const owner = row.teamUser.find(({ role }) => role === ROLES.teamOwner);
|
||||
const showDelete = user.id === owner?.userId;
|
||||
const teamUserId = teamUser.find(a => a.userId === user.id).id;
|
||||
<SettingsTable data={data} columns={columns} cellRender={cellRender}>
|
||||
{row => {
|
||||
const { id, teamUser } = row;
|
||||
const owner = teamUser.find(({ role }) => role === ROLES.teamOwner);
|
||||
const showDelete = user.id === owner?.userId;
|
||||
|
||||
const rowData = {
|
||||
...row,
|
||||
owner: owner?.user?.username,
|
||||
action: (
|
||||
<Flexbox flex={1} gap={10} justifyContent="end">
|
||||
<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>
|
||||
<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>
|
||||
)}
|
||||
</Flexbox>
|
||||
),
|
||||
};
|
||||
|
||||
return (
|
||||
<TableRow key={rowIndex} data={rowData} keys={keys}>
|
||||
{(data, key, colIndex) => {
|
||||
return (
|
||||
<TableCell key={colIndex} style={{ ...columns[colIndex]?.style }}>
|
||||
<Flexbox flex={1} alignItems="center">
|
||||
{data[key]}
|
||||
</Flexbox>
|
||||
</TableCell>
|
||||
);
|
||||
}}
|
||||
</TableRow>
|
||||
);
|
||||
}}
|
||||
</TableBody>
|
||||
</Table>
|
||||
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>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
@ -12,7 +12,7 @@ export default function UserWebsites({ userId }) {
|
||||
const hasData = data && data.length !== 0;
|
||||
|
||||
if (isLoading) {
|
||||
return <Loading icon="dots" position="block" />;
|
||||
return <Loading icon="dots" style={{ minHeight: 300 }} />;
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -1,109 +1,71 @@
|
||||
import {
|
||||
Button,
|
||||
Text,
|
||||
Icon,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableColumn,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
Flexbox,
|
||||
Icons,
|
||||
ModalTrigger,
|
||||
Modal,
|
||||
} from 'react-basics';
|
||||
import { Button, Text, Icon, Icons, ModalTrigger, Modal } from 'react-basics';
|
||||
import { formatDistance } from 'date-fns';
|
||||
import Link from 'next/link';
|
||||
import useUser from 'hooks/useUser';
|
||||
import UserDeleteForm from './UserDeleteForm';
|
||||
import { ROLES } from 'lib/constants';
|
||||
import useMessages from 'hooks/useMessages';
|
||||
import SettingsTable from 'components/common/SettingsTable';
|
||||
|
||||
export default function UsersTable({ data = [], onDelete }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { user } = useUser();
|
||||
|
||||
const columns = [
|
||||
{ name: 'username', label: formatMessage(labels.username), style: { flex: 2 } },
|
||||
{ name: 'role', label: formatMessage(labels.role), style: { flex: 1 } },
|
||||
{ name: 'created', label: formatMessage(labels.created), style: { flex: 1 } },
|
||||
{ name: 'action', label: ' ', style: { flex: 2 } },
|
||||
{ name: 'username', label: formatMessage(labels.username), style: { flex: 1.5 } },
|
||||
{ name: 'role', label: formatMessage(labels.role) },
|
||||
{ name: 'created', label: formatMessage(labels.created) },
|
||||
{ name: 'action', label: ' ' },
|
||||
];
|
||||
|
||||
return (
|
||||
<Table columns={columns} rows={data}>
|
||||
<TableHeader>
|
||||
{(column, index) => {
|
||||
return (
|
||||
<TableColumn key={index} style={{ ...column.style }}>
|
||||
{column.label}
|
||||
</TableColumn>
|
||||
);
|
||||
}}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{(row, keys, rowIndex) => {
|
||||
const rowData = {
|
||||
...row,
|
||||
created: formatDistance(new Date(row.createdAt), new Date(), {
|
||||
addSuffix: true,
|
||||
}),
|
||||
role: formatMessage(
|
||||
labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown,
|
||||
),
|
||||
action: (
|
||||
<>
|
||||
<Link href={`/settings/users/${row.id}`}>
|
||||
<Button>
|
||||
<Icon>
|
||||
<Icons.Edit />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.edit)}</Text>
|
||||
</Button>
|
||||
</Link>
|
||||
<ModalTrigger disabled={row.id === user.id}>
|
||||
<Button disabled={row.id === user.id}>
|
||||
<Icon>
|
||||
<Icons.Trash />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.delete)}</Text>
|
||||
</Button>
|
||||
<Modal>
|
||||
{close => (
|
||||
<UserDeleteForm
|
||||
userId={row.id}
|
||||
username={row.username}
|
||||
onSave={onDelete}
|
||||
onClose={close}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
</ModalTrigger>
|
||||
</>
|
||||
),
|
||||
};
|
||||
const cellRender = (row, data, key) => {
|
||||
if (key === 'created') {
|
||||
return formatDistance(new Date(row.createdAt), new Date(), {
|
||||
addSuffix: true,
|
||||
});
|
||||
}
|
||||
if (key === 'role') {
|
||||
return formatMessage(
|
||||
labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown,
|
||||
);
|
||||
}
|
||||
return data[key];
|
||||
};
|
||||
|
||||
return (
|
||||
<TableRow key={rowIndex} data={rowData} keys={keys}>
|
||||
{(data, key, colIndex) => {
|
||||
return (
|
||||
<TableCell key={colIndex} style={{ ...columns[colIndex]?.style }}>
|
||||
<Flexbox
|
||||
flex={1}
|
||||
gap={10}
|
||||
alignItems="center"
|
||||
justifyContent={key === 'action' ? 'end' : undefined}
|
||||
>
|
||||
{data[key]}
|
||||
</Flexbox>
|
||||
</TableCell>
|
||||
);
|
||||
}}
|
||||
</TableRow>
|
||||
);
|
||||
}}
|
||||
</TableBody>
|
||||
</Table>
|
||||
return (
|
||||
<SettingsTable data={data} columns={columns} cellRender={cellRender}>
|
||||
{(row, keys, rowIndex) => {
|
||||
return (
|
||||
<>
|
||||
<Link href={`/settings/users/${row.id}`}>
|
||||
<Button>
|
||||
<Icon>
|
||||
<Icons.Edit />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.edit)}</Text>
|
||||
</Button>
|
||||
</Link>
|
||||
<ModalTrigger disabled={row.id === user.id}>
|
||||
<Button disabled={row.id === user.id}>
|
||||
<Icon>
|
||||
<Icons.Trash />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.delete)}</Text>
|
||||
</Button>
|
||||
<Modal>
|
||||
{close => (
|
||||
<UserDeleteForm
|
||||
userId={row.id}
|
||||
username={row.username}
|
||||
onSave={onDelete}
|
||||
onClose={close}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
</ModalTrigger>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</SettingsTable>
|
||||
);
|
||||
}
|
||||
|
@ -20,7 +20,7 @@ export default function WebsiteEditForm({ websiteId, data, onSave }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<Form ref={ref} onSubmit={handleSubmit} error={error} values={data} style={{ width: 600 }}>
|
||||
<Form ref={ref} onSubmit={handleSubmit} error={error} values={data}>
|
||||
<FormRow label={formatMessage(labels.websiteId)}>
|
||||
<TextField value={websiteId} readOnly allowCopy />
|
||||
</FormRow>
|
||||
|
@ -1,83 +1,45 @@
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableColumn,
|
||||
Button,
|
||||
Text,
|
||||
Icon,
|
||||
Icons,
|
||||
Flexbox,
|
||||
useBreakpoint,
|
||||
} from 'react-basics';
|
||||
import { Button, Text, Icon, Icons } from 'react-basics';
|
||||
import SettingsTable from 'components/common/SettingsTable';
|
||||
import useMessages from 'hooks/useMessages';
|
||||
import useConfig from 'hooks/useConfig';
|
||||
|
||||
export default function WebsitesTable({ data = [] }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { openExternal } = useConfig();
|
||||
const breakPoint = useBreakpoint();
|
||||
|
||||
const columns = [
|
||||
{ name: 'name', label: formatMessage(labels.name), style: { flex: 2 } },
|
||||
{ name: 'name', label: formatMessage(labels.name) },
|
||||
{ name: 'domain', label: formatMessage(labels.domain) },
|
||||
{ name: 'action', label: ' ', style: { flexBasis: '100%' } },
|
||||
{ name: 'action', label: ' ' },
|
||||
];
|
||||
|
||||
return (
|
||||
<Table columns={columns} rows={data}>
|
||||
<TableHeader>
|
||||
{(column, index) => {
|
||||
return (
|
||||
<TableColumn key={index} style={{ ...column.style }}>
|
||||
{column.label}
|
||||
</TableColumn>
|
||||
);
|
||||
}}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{(row, keys, rowIndex) => {
|
||||
const { id } = row;
|
||||
<SettingsTable columns={columns} data={data}>
|
||||
{row => {
|
||||
const { id } = row;
|
||||
|
||||
row.action = (
|
||||
<Flexbox flex={1} justifyContent="end" gap={10}>
|
||||
<Link href={`/settings/websites/${id}`}>
|
||||
<Button>
|
||||
<Icon>
|
||||
<Icons.Edit />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.edit)}</Text>
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={`/websites/${id}`} target={openExternal ? '_blank' : null}>
|
||||
<Button>
|
||||
<Icon>
|
||||
<Icons.External />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.view)}</Text>
|
||||
</Button>
|
||||
</Link>
|
||||
</Flexbox>
|
||||
);
|
||||
|
||||
return (
|
||||
<TableRow key={rowIndex} data={row} keys={keys}>
|
||||
{(data, key, colIndex) => {
|
||||
return (
|
||||
<TableCell key={colIndex} style={{ ...columns[colIndex]?.style }}>
|
||||
<Flexbox flex={1} alignItems="center">
|
||||
{data[key]}
|
||||
</Flexbox>
|
||||
</TableCell>
|
||||
);
|
||||
}}
|
||||
</TableRow>
|
||||
);
|
||||
}}
|
||||
</TableBody>
|
||||
</Table>
|
||||
return (
|
||||
<>
|
||||
<Link href={`/settings/websites/${id}`}>
|
||||
<Button>
|
||||
<Icon>
|
||||
<Icons.Edit />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.edit)}</Text>
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={`/websites/${id}`} target={openExternal ? '_blank' : null}>
|
||||
<Button>
|
||||
<Icon>
|
||||
<Icons.External />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.view)}</Text>
|
||||
</Button>
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</SettingsTable>
|
||||
);
|
||||
}
|
||||
|
13
components/pages/settings/websites/WebsitesTable.module.css
Normal file
13
components/pages/settings/websites/WebsitesTable.module.css
Normal file
@ -0,0 +1,13 @@
|
||||
@media screen and (max-width: 992px) {
|
||||
.row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.header .actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.actions {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
@ -140,4 +140,4 @@ CREATE TABLE `team_website` (
|
||||
) DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
|
||||
|
||||
-- AddSystemUser
|
||||
INSERT INTO "user" (user_id, username, role, password) VALUES ('41e2b680-648e-4b09-bcd7-3e2b10c06264' , 'admin', 'admin', '$2b$10$BUli0c.muyCW1ErNJc3jL.vFRFtFJWrT8/GcR4A.sUdCznaXiqFXa');
|
||||
INSERT INTO user (user_id, username, role, password) VALUES ('41e2b680-648e-4b09-bcd7-3e2b10c06264' , 'admin', 'admin', '$2b$10$BUli0c.muyCW1ErNJc3jL.vFRFtFJWrT8/GcR4A.sUdCznaXiqFXa');
|
@ -181,8 +181,8 @@ export function getDateArray(data, startDate, endDate, unit) {
|
||||
const n = diff(endDate, startDate) + 1;
|
||||
|
||||
function findData(date) {
|
||||
const d = data.find(({ x, t }) => {
|
||||
return normalize(getDateFromString(x || t)).getTime() === date.getTime();
|
||||
const d = data.find(({ x }) => {
|
||||
return normalize(getDateFromString(x)).getTime() === date.getTime();
|
||||
});
|
||||
|
||||
return d?.y || 0;
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "umami",
|
||||
"version": "2.0.0-beta.4",
|
||||
"version": "2.0.0-beta.5",
|
||||
"description": "A simple, fast, privacy-focused alternative to Google Analytics.",
|
||||
"author": "Mike Cao <mike@mikecao.com>",
|
||||
"license": "MIT",
|
||||
@ -94,7 +94,7 @@
|
||||
"node-fetch": "^3.2.8",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"react": "^18.2.0",
|
||||
"react-basics": "^0.75.0",
|
||||
"react-basics": "^0.77.0",
|
||||
"react-beautiful-dnd": "^13.1.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-intl": "^5.24.7",
|
||||
|
@ -23,6 +23,7 @@ export async function getUser(
|
||||
|
||||
export async function getUsers(): Promise<User[]> {
|
||||
return prisma.client.user.findMany({
|
||||
take: 100,
|
||||
where: {
|
||||
deletedAt: null,
|
||||
},
|
||||
|
@ -6727,10 +6727,10 @@ rc@^1.2.7:
|
||||
minimist "^1.2.0"
|
||||
strip-json-comments "~2.0.1"
|
||||
|
||||
react-basics@^0.75.0:
|
||||
version "0.75.0"
|
||||
resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.75.0.tgz#501ba7fae6e0659ec8f7e811a4303ef83bd57b13"
|
||||
integrity sha512-mDm+L/cw4LX4LylJW0MyV+YFxhZ0tMa/bCIs1QsApcRGvF4ahlB1rdwWn6/p01PVSHe7xS/55lSklp3b7IWOaw==
|
||||
react-basics@^0.77.0:
|
||||
version "0.77.0"
|
||||
resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.77.0.tgz#31d35b4db8119c699eeab24a7cab10a613b549f4"
|
||||
integrity sha512-L14dZqlg7P9m700OvND1fsdZA/vvLH3W0Ntw5Oyk2RxE47K6oMESSuPhDi1yC2QjDYwFdKzGSsgJGfWlc++Kww==
|
||||
dependencies:
|
||||
classnames "^2.3.1"
|
||||
date-fns "^2.29.3"
|
||||
|
Loading…
Reference in New Issue
Block a user