watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-07 22:27:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Updated settings components.

Browse source
This commit is contained in:
Mike Cao 2023-01-20 17:12:53 -08:00
parent 1d9c3133f0
commit 91af593ff5
31 changed files with 805 additions and 494 deletions
Download patch file Download diff file Expand all files Collapse all files

125
components/pages/settings/users/UsersTable.js
View file

@ -1,11 +1,6 @@
import { useQuery } from '@tanstack/react-query';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import { formatDistance } from 'date-fns';
import useApi from 'hooks/useApi';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import {
Button,
Text,
Icon,
Table,
TableBody,
@ -14,84 +9,66 @@ import {
TableHeader,
TableRow,
} from 'react-basics';
import { formatDistance } from 'date-fns';
import Link from 'next/link';
import { Edit } from 'components/icons';
import styles from './UsersTable.module.css';
const defaultColumns = [
const columns = [
{ name: 'username', label: 'Username', style: { flex: 2 } },
{ name: 'role', label: 'Role', style: { flex: 2 } },
{ name: 'created', label: 'Created' },
{ name: 'action', label: ' ' },
];
export default function UsersTable({ columns = defaultColumns, onLoading, onAddKeyClick }) {
const [values, setValues] = useState(null);
const { get } = useApi();
const { data, isLoading, error } = useQuery(['user'], () => get(`/users`));
const hasData = data && data.length !== 0;
useEffect(() => {
if (data) {
setValues(data);
onLoading({ data, isLoading, error });
}
}, [onLoading, data, isLoading, error]);
export default function UsersTable({ data = [] }) {
return (
<>
{hasData && (
<Table className={styles.table} columns={columns} rows={values}>
<TableHeader>
{(column, index) => {
return (
<TableColumn key={index} className={styles.header} style={{ ...column.style }}>
{column.label}
</TableColumn>
);
}}
</TableHeader>
<TableBody>
{(row, keys, rowIndex) => {
row.created = formatDistance(new Date(row.createdAt), new Date(), {
addSuffix: true,
});
<Table className={styles.table} columns={columns} rows={data}>
<TableHeader>
{(column, index) => {
return (
<TableColumn key={index} className={styles.header} style={{ ...column.style }}>
{column.label}
</TableColumn>
);
}}
</TableHeader>
<TableBody>
{(row, keys, rowIndex) => {
row.created = formatDistance(new Date(row.createdAt), new Date(), {
addSuffix: true,
});
row.action = (
<div className={styles.actions}>
<Link href={`/settings/users/${row.id}`}>
<Button>
<Icon icon="arrow-right" />
Settings
</Button>
</Link>
</div>
);
row.action = (
<div className={styles.actions}>
<Link href={`/settings/users/${row.id}`}>
<Button>
<Icon>
<Edit />
</Icon>
<Text>Edit</Text>
</Button>
</Link>
</div>
);
return (
<TableRow key={rowIndex} data={row} keys={keys}>
{(data, key, colIndex) => {
return (
<TableCell
key={colIndex}
className={styles.cell}
style={{ ...columns[colIndex]?.style }}
>
{data[key]}
</TableCell>
);
}}
</TableRow>
);
}}
</TableBody>
</Table>
)}
{!hasData && (
<EmptyPlaceholder className={styles.empty} msg="You don't have any Users.">
<Button variant="primary" onClick={onAddKeyClick}>
<Icon icon="plus" /> Create User
</Button>
</EmptyPlaceholder>
)}
</>
return (
<TableRow key={rowIndex} data={row} keys={keys}>
{(data, key, colIndex) => {
return (
<TableCell
key={colIndex}
className={styles.cell}
style={{ ...columns[colIndex]?.style }}
>
{data[key]}
</TableCell>
);
}}
</TableRow>
);
}}
</TableBody>
</Table>
);
}