m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-12-24 18:26:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

Added SettingsTable.

Browse Source
This commit is contained in:
Mike Cao 2023-04-12 13:40:19 -07:00
parent f84e41e198
commit e2fcd40c2b
19 changed files with 335 additions and 300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/common/HamburgerButton.js
View File

@ -19,6 +19,20 @@ export default function HamburgerButton() {
!cloudMode && { !cloudMode && {
label: formatMessage(labels.settings), label: formatMessage(labels.settings),
value: '/settings', value: '/settings',
children: [
{
label: formatMessage(labels.websites),
value: '/settings/websites',
},
{
label: formatMessage(labels.teams),
value: '/settings/teams',
},
{
label: formatMessage(labels.users),
value: '/settings/users',
},
],
}, },
{ {
label: formatMessage(labels.profile), label: formatMessage(labels.profile),

33
components/common/MobileMenu.js
View File

@ -1,17 +1,36 @@
import classNames from 'classnames'; import classNames from 'classnames';
import { useRouter } from 'next/router';
import Link from 'next/link'; import Link from 'next/link';
import styles from './MobileMenu.module.css'; import styles from './MobileMenu.module.css';
export default function MobileMenu({ items = [], onClose }) { export default function MobileMenu({ items = [], onClose }) {
const { pathname } = useRouter();
const Items = ({ items, className }) => (
<div className={classNames(styles.items, className)}>
{items.map(({ label, value, children }) => {
const selected = pathname === value;
return (
<>
<Link
key={value}
href={value}
className={classNames(styles.item, { [styles.selected]: selected })}
onClick={onClose}
>
{label}
</Link>
{children && <Items items={children} className={styles.submenu} />}
</>
);
})}
</div>
);
return ( return (
<div className={classNames(styles.menu)}> <div className={classNames(styles.menu)}>
<div className={styles.items}> <Items items={items} />
{items.map(({ label, value }) => (
<Link key={value} href={value} className={styles.item} onClick={onClose}>
{label}
</Link>
))}
</div>
</div> </div>
); );
} }

10
components/common/MobileMenu.module.css
View File

@ -25,5 +25,15 @@
} }
a.item { a.item {
color: var(--base600);
}
a.item.selected,
.submenu a.item.selected {
color: var(--base900); color: var(--base900);
} }
.submenu a.item {
color: var(--base600);
margin-left: 40px;
}

36
components/common/SettingsTable.js Normal file
View 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>
);
}

40
components/common/SettingsTable.module.css Normal file
View File

@ -0,0 +1,40 @@
.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%;
}
}

4
components/layout/NavBar.module.css
View File

@ -49,6 +49,10 @@
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
} }
.links span {
white-space: nowrap;
}
.links a:hover { .links a:hover {
color: var(--font-color100); color: var(--font-color100);
border-bottom: 2px solid var(--primary400); border-bottom: 2px solid var(--primary400);

6
components/layout/PageHeader.js
View File

@ -1,13 +1,9 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import { useBreakpoint } from 'react-basics';
import styles from './PageHeader.module.css'; import styles from './PageHeader.module.css';
export default function PageHeader({ title, children }) { export default function PageHeader({ title, children }) {
const breakPoint = useBreakpoint();
return ( return (
<div className={classNames(styles.header, { [styles[breakPoint]]: true })}> <div className={styles.header}>
<div className={styles.title}>{title}</div> <div className={styles.title}>{title}</div>
<div className={styles.actions}>{children}</div> <div className={styles.actions}>{children}</div>
</div> </div>

25
components/layout/PageHeader.module.css
View File

@ -16,6 +16,10 @@
color: var(--base900); color: var(--base900);
} }
.header > div {
line-height: 60px;
}
.title { .title {
display: flex; display: flex;
align-items: center; align-items: center;
@ -25,7 +29,22 @@
line-height: 50px; line-height: 50px;
} }
.xs .actions, .actions {
.sm .actions { display: flex;
flex-basis: 100%; 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;
}
} }

8
components/layout/SettingsLayout.js
View File

@ -20,16 +20,16 @@ export default function SettingsLayout({ children }) {
{ key: 'profile', label: formatMessage(labels.profile), url: '/settings/profile' }, { key: 'profile', label: formatMessage(labels.profile), url: '/settings/profile' },
].filter(n => n); ].filter(n => n);
const getKey = () => items.find(({ url }) => pathname.startsWith(url))?.key; const getKey = () => items.find(({ url }) => pathname === url)?.key;
return ( return (
<Row className={classNames({ [styles.hideMenu]: cloudMode })}> <Row>
{!cloudMode && ( {!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()} /> <SideNav items={items} shallow={true} selectedKey={getKey()} />
</Column> </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} {children}
</Column> </Column>
</Row> </Row>

6
components/layout/SettingsLayout.module.css
View File

@ -8,6 +8,8 @@
min-height: 50vh; min-height: 50vh;
} }
.hideMenu .content { @media only screen and (max-width: 768px) {
margin: 0 auto; .menu {
display: none;
}
} }

7
components/layout/SideNav.module.css
View File

@ -13,10 +13,3 @@
padding: 0; padding: 0;
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
@media only screen and (max-width: 768px) {
.menu {
flex-direction: row;
flex-wrap: wrap;
}
}

176
components/pages/settings/teams/TeamsTable.js
View File

@ -1,126 +1,90 @@
import Link from 'next/link'; import Link from 'next/link';
import { import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
Button,
Flexbox,
Icon,
Icons,
Modal,
ModalTrigger,
Table,
TableBody,
TableCell,
TableColumn,
TableHeader,
TableRow,
Text,
} from 'react-basics';
import TeamDeleteForm from './TeamDeleteForm'; import TeamDeleteForm from './TeamDeleteForm';
import TeamLeaveForm from './TeamLeaveForm'; import TeamLeaveForm from './TeamLeaveForm';
import useMessages from 'hooks/useMessages'; import useMessages from 'hooks/useMessages';
import useUser from 'hooks/useUser'; import useUser from 'hooks/useUser';
import { ROLES } from 'lib/constants'; import { ROLES } from 'lib/constants';
import SettingsTable from 'components/common/SettingsTable';
export default function TeamsTable({ data = [], onDelete }) { export default function TeamsTable({ data = [], onDelete }) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { user } = useUser(); const { user } = useUser();
const columns = [ const columns = [
{ name: 'name', label: formatMessage(labels.name), style: { flex: 2 } }, { name: 'name', label: formatMessage(labels.name) },
{ name: 'owner', label: formatMessage(labels.owner) }, { name: 'owner', label: formatMessage(labels.owner) },
{ name: 'action', label: ' ' }, { 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 ( return (
<Table columns={columns} rows={data}> <SettingsTable data={data} columns={columns} cellRender={cellRender}>
<TableHeader> {row => {
{(column, index) => { const { id, teamUser } = row;
return ( const owner = teamUser.find(({ role }) => role === ROLES.teamOwner);
<TableColumn key={index} style={{ ...column.style }}> const showDelete = user.id === owner?.userId;
{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;
const rowData = { return (
...row, <>
owner: owner?.user?.username, <Link href={`/settings/teams/${id}`}>
action: ( <Button>
<Flexbox flex={1} gap={10} justifyContent="end"> <Icon>
<Link href={`/settings/teams/${id}`}> <Icons.Show />
<Button> </Icon>
<Icon> <Text>{formatMessage(labels.view)}</Text>
<Icons.Show /> </Button>
</Icon> </Link>
<Text>{formatMessage(labels.view)}</Text> {showDelete && (
</Button> <ModalTrigger>
</Link> <Button>
{showDelete && ( <Icon>
<ModalTrigger> <Icons.Trash />
<Button> </Icon>
<Icon> <Text>{formatMessage(labels.delete)}</Text>
<Icons.Trash /> </Button>
</Icon> <Modal title={formatMessage(labels.deleteTeam)}>
<Text>{formatMessage(labels.delete)}</Text> {close => (
</Button> <TeamDeleteForm
<Modal title={formatMessage(labels.deleteTeam)}> teamId={row.id}
{close => ( teamName={row.name}
<TeamDeleteForm onSave={onDelete}
teamId={row.id} onClose={close}
teamName={row.name} />
onSave={onDelete} )}
onClose={close} </Modal>
/> </ModalTrigger>
)} )}
</Modal> {!showDelete && (
</ModalTrigger> <ModalTrigger>
)} <Button>
{!showDelete && ( <Icon>
<ModalTrigger> <Icons.ArrowRight />
<Button> </Icon>
<Icon> <Text>{formatMessage(labels.leave)}</Text>
<Icons.ArrowRight /> </Button>
</Icon> <Modal title={formatMessage(labels.leaveTeam)}>
<Text>{formatMessage(labels.leave)}</Text> {close => (
</Button> <TeamLeaveForm
<Modal title={formatMessage(labels.leaveTeam)}> teamId={id}
{close => ( userId={user.id}
<TeamLeaveForm teamName={row.name}
teamId={id} onSave={onDelete}
userId={user.id} onClose={close}
teamName={row.name} />
onSave={onDelete} )}
onClose={close} </Modal>
/> </ModalTrigger>
)} )}
</Modal> </>
</ModalTrigger> );
)} }}
</Flexbox> </SettingsTable>
),
};
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>
); );
} }

146
components/pages/settings/users/UsersTable.js
View File

@ -1,109 +1,71 @@
import { import { Button, Text, Icon, Icons, ModalTrigger, Modal } from 'react-basics';
Button,
Text,
Icon,
Table,
TableBody,
TableCell,
TableColumn,
TableHeader,
TableRow,
Flexbox,
Icons,
ModalTrigger,
Modal,
} from 'react-basics';
import { formatDistance } from 'date-fns'; import { formatDistance } from 'date-fns';
import Link from 'next/link'; import Link from 'next/link';
import useUser from 'hooks/useUser'; import useUser from 'hooks/useUser';
import UserDeleteForm from './UserDeleteForm'; import UserDeleteForm from './UserDeleteForm';
import { ROLES } from 'lib/constants'; import { ROLES } from 'lib/constants';
import useMessages from 'hooks/useMessages'; import useMessages from 'hooks/useMessages';
import SettingsTable from 'components/common/SettingsTable';
export default function UsersTable({ data = [], onDelete }) { export default function UsersTable({ data = [], onDelete }) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { user } = useUser(); const { user } = useUser();
const columns = [ const columns = [
{ name: 'username', label: formatMessage(labels.username), style: { flex: 2 } }, { name: 'username', label: formatMessage(labels.username), style: { flex: 1.5 } },
{ name: 'role', label: formatMessage(labels.role), style: { flex: 1 } }, { name: 'role', label: formatMessage(labels.role) },
{ name: 'created', label: formatMessage(labels.created), style: { flex: 1 } }, { name: 'created', label: formatMessage(labels.created) },
{ name: 'action', label: ' ', style: { flex: 2 } }, { name: 'action', label: ' ' },
]; ];
return ( const cellRender = (row, data, key) => {
<Table columns={columns} rows={data}> if (key === 'created') {
<TableHeader> return formatDistance(new Date(row.createdAt), new Date(), {
{(column, index) => { addSuffix: true,
return ( });
<TableColumn key={index} style={{ ...column.style }}> }
{column.label} if (key === 'role') {
</TableColumn> return formatMessage(
); labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown,
}} );
</TableHeader> }
<TableBody> return data[key];
{(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>
</>
),
};
return ( return (
<TableRow key={rowIndex} data={rowData} keys={keys}> <SettingsTable data={data} columns={columns} cellRender={cellRender}>
{(data, key, colIndex) => { {(row, keys, rowIndex) => {
return ( return (
<TableCell key={colIndex} style={{ ...columns[colIndex]?.style }}> <>
<Flexbox <Link href={`/settings/users/${row.id}`}>
flex={1} <Button>
gap={10} <Icon>
alignItems="center" <Icons.Edit />
justifyContent={key === 'action' ? 'end' : undefined} </Icon>
> <Text>{formatMessage(labels.edit)}</Text>
{data[key]} </Button>
</Flexbox> </Link>
</TableCell> <ModalTrigger disabled={row.id === user.id}>
); <Button disabled={row.id === user.id}>
}} <Icon>
</TableRow> <Icons.Trash />
); </Icon>
}} <Text>{formatMessage(labels.delete)}</Text>
</TableBody> </Button>
</Table> <Modal>
{close => (
<UserDeleteForm
userId={row.id}
username={row.username}
onSave={onDelete}
onClose={close}
/>
)}
</Modal>
</ModalTrigger>
</>
);
}}
</SettingsTable>
); );
} }

96
components/pages/settings/websites/WebsitesTable.js
View File

@ -1,83 +1,45 @@
import Link from 'next/link'; import Link from 'next/link';
import { import { Button, Text, Icon, Icons } from 'react-basics';
Table, import SettingsTable from 'components/common/SettingsTable';
TableHeader,
TableBody,
TableRow,
TableCell,
TableColumn,
Button,
Text,
Icon,
Icons,
Flexbox,
useBreakpoint,
} from 'react-basics';
import useMessages from 'hooks/useMessages'; import useMessages from 'hooks/useMessages';
import useConfig from 'hooks/useConfig'; import useConfig from 'hooks/useConfig';
export default function WebsitesTable({ data = [] }) { export default function WebsitesTable({ data = [] }) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { openExternal } = useConfig(); const { openExternal } = useConfig();
const breakPoint = useBreakpoint();
const columns = [ const columns = [
{ name: 'name', label: formatMessage(labels.name), style: { flex: 2 } }, { name: 'name', label: formatMessage(labels.name) },
{ name: 'domain', label: formatMessage(labels.domain) }, { name: 'domain', label: formatMessage(labels.domain) },
{ name: 'action', label: ' ', style: { flexBasis: '100%' } }, { name: 'action', label: ' ' },
]; ];
return ( return (
<Table columns={columns} rows={data}> <SettingsTable columns={columns} data={data}>
<TableHeader> {row => {
{(column, index) => { const { id } = row;
return (
<TableColumn key={index} style={{ ...column.style }}>
{column.label}
</TableColumn>
);
}}
</TableHeader>
<TableBody>
{(row, keys, rowIndex) => {
const { id } = row;
row.action = ( return (
<Flexbox flex={1} justifyContent="end" gap={10}> <>
<Link href={`/settings/websites/${id}`}> <Link href={`/settings/websites/${id}`}>
<Button> <Button>
<Icon> <Icon>
<Icons.Edit /> <Icons.Edit />
</Icon> </Icon>
<Text>{formatMessage(labels.edit)}</Text> <Text>{formatMessage(labels.edit)}</Text>
</Button> </Button>
</Link> </Link>
<Link href={`/websites/${id}`} target={openExternal ? '_blank' : null}> <Link href={`/websites/${id}`} target={openExternal ? '_blank' : null}>
<Button> <Button>
<Icon> <Icon>
<Icons.External /> <Icons.External />
</Icon> </Icon>
<Text>{formatMessage(labels.view)}</Text> <Text>{formatMessage(labels.view)}</Text>
</Button> </Button>
</Link> </Link>
</Flexbox> </>
); );
}}
return ( </SettingsTable>
<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>
); );
} }

13
components/pages/settings/websites/WebsitesTable.module.css Normal file
View File

@ -0,0 +1,13 @@
@media screen and (max-width: 992px) {
.row {
flex-wrap: wrap;
}
.header .actions {
display: none;
}
.actions {
flex-basis: 100%;
}
}

4
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "umami", "name": "umami",
"version": "2.0.0-beta.4", "version": "2.0.0-beta.5",
"description": "A simple, fast, privacy-focused alternative to Google Analytics.", "description": "A simple, fast, privacy-focused alternative to Google Analytics.",
"author": "Mike Cao <mike@mikecao.com>", "author": "Mike Cao <mike@mikecao.com>",
"license": "MIT", "license": "MIT",
@ -94,7 +94,7 @@
"node-fetch": "^3.2.8", "node-fetch": "^3.2.8",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"react": "^18.2.0", "react": "^18.2.0",
"react-basics": "^0.75.0", "react-basics": "^0.76.0",
"react-beautiful-dnd": "^13.1.0", "react-beautiful-dnd": "^13.1.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-intl": "^5.24.7", "react-intl": "^5.24.7",

2
pages/api/config.ts
View File

@ -16,7 +16,7 @@ export default async (req: NextApiRequest, res: NextApiResponse<ConfigResponse>)
trackerScriptName: process.env.TRACKER_SCRIPT_NAME, trackerScriptName: process.env.TRACKER_SCRIPT_NAME,
updatesDisabled: !!process.env.DISABLE_UPDATES, updatesDisabled: !!process.env.DISABLE_UPDATES,
telemetryDisabled: !!process.env.DISABLE_TELEMETRY, telemetryDisabled: !!process.env.DISABLE_TELEMETRY,
cloudMode: !!process.env.CLOUD_MODE, cloudMode: false, //!!process.env.CLOUD_MODE,
}); });
} }

1
queries/admin/user.ts
View File

@ -23,6 +23,7 @@ export async function getUser(
export async function getUsers(): Promise<User[]> { export async function getUsers(): Promise<User[]> {
return prisma.client.user.findMany({ return prisma.client.user.findMany({
take: 100,
where: { where: {
deletedAt: null, deletedAt: null,
}, },

8
yarn.lock
View File

@ -6727,10 +6727,10 @@ rc@^1.2.7:
minimist "^1.2.0" minimist "^1.2.0"
strip-json-comments "~2.0.1" strip-json-comments "~2.0.1"
react-basics@^0.75.0: react-basics@^0.76.0:
version "0.75.0" version "0.76.0"
resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.75.0.tgz#501ba7fae6e0659ec8f7e811a4303ef83bd57b13" resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.76.0.tgz#7369ba68409388f458a2ecf73a86603884fc0711"
integrity sha512-mDm+L/cw4LX4LylJW0MyV+YFxhZ0tMa/bCIs1QsApcRGvF4ahlB1rdwWn6/p01PVSHe7xS/55lSklp3b7IWOaw== integrity sha512-RRtudldMecbuT/ap1giy6OdNc1t8gfGdyfXDTy4x99PWN9kvfS8MU11cfyQif8F0C6v9wKFu2taxklQQarE+mw==
dependencies: dependencies:
classnames "^2.3.1" classnames "^2.3.1"
date-fns "^2.29.3" date-fns "^2.29.3"