watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-11 16:17:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Fixed share page. Updated data tables to be responsive.

Browse source
This commit is contained in:
Mike Cao 2023-10-12 16:13:14 -07:00
parent 92d16d8937
commit c18daf4845
17 changed files with 69 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/app/(main)/settings/teams/TeamsTable.js
View file

@ -3,16 +3,17 @@ import useMessages from 'components/hooks/useMessages';
import useUser from 'components/hooks/useUser';
import { ROLES } from 'lib/constants';
import Link from 'next/link';
import { Button, GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
import { Button, GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
import TeamDeleteButton from './TeamDeleteButton';
import TeamLeaveButton from './TeamLeaveButton';
export function TeamsTable({ data = [] }) {
const { formatMessage, labels } = useMessages();
const { user } = useUser();
const breakpoint = useBreakpoint();
return (
<GridTable data={data}>
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
<GridColumn name="name" label={formatMessage(labels.name)} />
<GridColumn name="owner" label={formatMessage(labels.owner)}>
{row => row.teamUser.find(({ role }) => role === ROLES.teamOwner)?.user?.username}

15
src/app/(main)/settings/users/UsersTable.js
View file

@ -1,4 +1,4 @@
import { Button, Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
import { formatDistance } from 'date-fns';
import Link from 'next/link';
import { ROLES } from 'lib/constants';
@ -9,22 +9,19 @@ import UserDeleteButton from './UserDeleteButton';
export function UsersTable({ data = [] }) {
const { formatMessage, labels } = useMessages();
const { dateLocale } = useLocale();
const breakpoint = useBreakpoint();
return (
<GridTable data={data}>
<GridColumn
name="username"
label={formatMessage(labels.username)}
width={'minmax(200px, 2fr)'}
/>
<GridColumn name="role" label={formatMessage(labels.role)}>
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
<GridColumn name="username" label={formatMessage(labels.username)} style={{ minWidth: 0 }} />
<GridColumn name="role" label={formatMessage(labels.role)} width={'120px'}>
{row =>
formatMessage(
labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown,
)
}
</GridColumn>
<GridColumn name="created" label={formatMessage(labels.created)}>
<GridColumn name="created" label={formatMessage(labels.created)} width={'100px'}>
{row =>
formatDistance(new Date(row.createdAt), new Date(), {
addSuffix: true,

5
src/app/(main)/settings/websites/WebsitesDataTable.tsx
View file

@ -6,7 +6,6 @@ import useApi from 'components/hooks/useApi';
import DataTable from 'components/common/DataTable';
import useFilterQuery from 'components/hooks/useFilterQuery';
import useCache from 'store/cache';
import { useBreakpoint } from 'react-basics';
export interface WebsitesDataTableProps {
allowEdit?: boolean;
@ -25,7 +24,7 @@ function useWebsites({ includeTeams, onlyTeams }) {
return useFilterQuery(
['websites', { includeTeams, onlyTeams, modified }],
params => {
(params: any) => {
return get(`/users/${user?.id}/websites`, {
includeTeams,
onlyTeams,
@ -46,7 +45,6 @@ export function WebsitesDataTable({
children,
}: WebsitesDataTableProps) {
const queryResult = useWebsites({ includeTeams, onlyTeams });
const breakpoint = useBreakpoint();
return (
<DataTable queryResult={queryResult}>
@ -57,7 +55,6 @@ export function WebsitesDataTable({
showActions={showActions}
allowEdit={allowEdit}
allowView={allowView}
cardMode={['xs', 'sm', 'md'].includes(breakpoint)}
>
{children}
</WebsitesTable>

6
src/app/(main)/settings/websites/WebsitesTable.js
View file

@ -1,5 +1,5 @@
import Link from 'next/link';
import { Button, Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
import useMessages from 'components/hooks/useMessages';
import useUser from 'components/hooks/useUser';
@ -9,14 +9,14 @@ export function WebsitesTable({
showActions,
allowEdit,
allowView,
cardMode,
children,
}) {
const { formatMessage, labels } = useMessages();
const { user } = useUser();
const breakpoint = useBreakpoint();
return (
<GridTable data={data} cardMode={cardMode}>
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
<GridColumn name="name" label={formatMessage(labels.name)} />
<GridColumn name="domain" label={formatMessage(labels.domain)} />
{showTeam && (