mirror of
https://github.com/kremalicious/umami.git
synced 2024-06-30 13:41:50 +02:00
Fixed share page. Updated data tables to be responsive.
This commit is contained in:
parent
92d16d8937
commit
c18daf4845
|
@ -3,16 +3,17 @@ import useMessages from 'components/hooks/useMessages';
|
||||||
import useUser from 'components/hooks/useUser';
|
import useUser from 'components/hooks/useUser';
|
||||||
import { ROLES } from 'lib/constants';
|
import { ROLES } from 'lib/constants';
|
||||||
import Link from 'next/link';
|
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 TeamDeleteButton from './TeamDeleteButton';
|
||||||
import TeamLeaveButton from './TeamLeaveButton';
|
import TeamLeaveButton from './TeamLeaveButton';
|
||||||
|
|
||||||
export function TeamsTable({ data = [] }) {
|
export function TeamsTable({ data = [] }) {
|
||||||
const { formatMessage, labels } = useMessages();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { user } = useUser();
|
const { user } = useUser();
|
||||||
|
const breakpoint = useBreakpoint();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<GridTable data={data}>
|
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
|
||||||
<GridColumn name="name" label={formatMessage(labels.name)} />
|
<GridColumn name="name" label={formatMessage(labels.name)} />
|
||||||
<GridColumn name="owner" label={formatMessage(labels.owner)}>
|
<GridColumn name="owner" label={formatMessage(labels.owner)}>
|
||||||
{row => row.teamUser.find(({ role }) => role === ROLES.teamOwner)?.user?.username}
|
{row => row.teamUser.find(({ role }) => role === ROLES.teamOwner)?.user?.username}
|
||||||
|
|
|
@ -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 { formatDistance } from 'date-fns';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { ROLES } from 'lib/constants';
|
import { ROLES } from 'lib/constants';
|
||||||
|
@ -9,22 +9,19 @@ import UserDeleteButton from './UserDeleteButton';
|
||||||
export function UsersTable({ data = [] }) {
|
export function UsersTable({ data = [] }) {
|
||||||
const { formatMessage, labels } = useMessages();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { dateLocale } = useLocale();
|
const { dateLocale } = useLocale();
|
||||||
|
const breakpoint = useBreakpoint();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<GridTable data={data}>
|
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
|
||||||
<GridColumn
|
<GridColumn name="username" label={formatMessage(labels.username)} style={{ minWidth: 0 }} />
|
||||||
name="username"
|
<GridColumn name="role" label={formatMessage(labels.role)} width={'120px'}>
|
||||||
label={formatMessage(labels.username)}
|
|
||||||
width={'minmax(200px, 2fr)'}
|
|
||||||
/>
|
|
||||||
<GridColumn name="role" label={formatMessage(labels.role)}>
|
|
||||||
{row =>
|
{row =>
|
||||||
formatMessage(
|
formatMessage(
|
||||||
labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown,
|
labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</GridColumn>
|
</GridColumn>
|
||||||
<GridColumn name="created" label={formatMessage(labels.created)}>
|
<GridColumn name="created" label={formatMessage(labels.created)} width={'100px'}>
|
||||||
{row =>
|
{row =>
|
||||||
formatDistance(new Date(row.createdAt), new Date(), {
|
formatDistance(new Date(row.createdAt), new Date(), {
|
||||||
addSuffix: true,
|
addSuffix: true,
|
||||||
|
|
|
@ -6,7 +6,6 @@ import useApi from 'components/hooks/useApi';
|
||||||
import DataTable from 'components/common/DataTable';
|
import DataTable from 'components/common/DataTable';
|
||||||
import useFilterQuery from 'components/hooks/useFilterQuery';
|
import useFilterQuery from 'components/hooks/useFilterQuery';
|
||||||
import useCache from 'store/cache';
|
import useCache from 'store/cache';
|
||||||
import { useBreakpoint } from 'react-basics';
|
|
||||||
|
|
||||||
export interface WebsitesDataTableProps {
|
export interface WebsitesDataTableProps {
|
||||||
allowEdit?: boolean;
|
allowEdit?: boolean;
|
||||||
|
@ -25,7 +24,7 @@ function useWebsites({ includeTeams, onlyTeams }) {
|
||||||
|
|
||||||
return useFilterQuery(
|
return useFilterQuery(
|
||||||
['websites', { includeTeams, onlyTeams, modified }],
|
['websites', { includeTeams, onlyTeams, modified }],
|
||||||
params => {
|
(params: any) => {
|
||||||
return get(`/users/${user?.id}/websites`, {
|
return get(`/users/${user?.id}/websites`, {
|
||||||
includeTeams,
|
includeTeams,
|
||||||
onlyTeams,
|
onlyTeams,
|
||||||
|
@ -46,7 +45,6 @@ export function WebsitesDataTable({
|
||||||
children,
|
children,
|
||||||
}: WebsitesDataTableProps) {
|
}: WebsitesDataTableProps) {
|
||||||
const queryResult = useWebsites({ includeTeams, onlyTeams });
|
const queryResult = useWebsites({ includeTeams, onlyTeams });
|
||||||
const breakpoint = useBreakpoint();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DataTable queryResult={queryResult}>
|
<DataTable queryResult={queryResult}>
|
||||||
|
@ -57,7 +55,6 @@ export function WebsitesDataTable({
|
||||||
showActions={showActions}
|
showActions={showActions}
|
||||||
allowEdit={allowEdit}
|
allowEdit={allowEdit}
|
||||||
allowView={allowView}
|
allowView={allowView}
|
||||||
cardMode={['xs', 'sm', 'md'].includes(breakpoint)}
|
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</WebsitesTable>
|
</WebsitesTable>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import Link from 'next/link';
|
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 useMessages from 'components/hooks/useMessages';
|
||||||
import useUser from 'components/hooks/useUser';
|
import useUser from 'components/hooks/useUser';
|
||||||
|
|
||||||
|
@ -9,14 +9,14 @@ export function WebsitesTable({
|
||||||
showActions,
|
showActions,
|
||||||
allowEdit,
|
allowEdit,
|
||||||
allowView,
|
allowView,
|
||||||
cardMode,
|
|
||||||
children,
|
children,
|
||||||
}) {
|
}) {
|
||||||
const { formatMessage, labels } = useMessages();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { user } = useUser();
|
const { user } = useUser();
|
||||||
|
const breakpoint = useBreakpoint();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<GridTable data={data} cardMode={cardMode}>
|
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
|
||||||
<GridColumn name="name" label={formatMessage(labels.name)} />
|
<GridColumn name="name" label={formatMessage(labels.name)} />
|
||||||
<GridColumn name="domain" label={formatMessage(labels.domain)} />
|
<GridColumn name="domain" label={formatMessage(labels.domain)} />
|
||||||
{showTeam && (
|
{showTeam && (
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
'use client';
|
||||||
import { CURRENT_VERSION, HOMEPAGE_URL } from 'lib/constants';
|
import { CURRENT_VERSION, HOMEPAGE_URL } from 'lib/constants';
|
||||||
import styles from './Footer.module.css';
|
import styles from './Footer.module.css';
|
||||||
|
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
.footer {
|
.footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
font-size: var(--font-size-sm);
|
font-size: var(--font-size-sm);
|
||||||
line-height: 30px;
|
height: 100px;
|
||||||
margin: 40px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer a {
|
.footer a {
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
'use client';
|
||||||
import { Icon, Text } from 'react-basics';
|
import { Icon, Text } from 'react-basics';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import LanguageButton from 'components/input/LanguageButton';
|
import LanguageButton from 'components/input/LanguageButton';
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
}
|
}
|
||||||
|
@ -38,10 +39,3 @@
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
.buttons,
|
|
||||||
.links {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,13 +1,25 @@
|
||||||
'use client';
|
'use client';
|
||||||
import WebsiteDetails from '../../(main)/websites/[id]/WebsiteDetails';
|
import WebsiteDetails from 'app/(main)/websites/[id]/WebsiteDetails';
|
||||||
import useShareToken from 'components/hooks/useShareToken';
|
import useShareToken from 'components/hooks/useShareToken';
|
||||||
|
import styles from './Share.module.css';
|
||||||
|
import Page from 'components/layout/Page';
|
||||||
|
import Header from './Header';
|
||||||
|
import Footer from './Footer';
|
||||||
|
|
||||||
export default function ({ shareId }) {
|
export default function Share({ shareId }) {
|
||||||
const shareToken = useShareToken(shareId);
|
const { shareToken, isLoading } = useShareToken(shareId);
|
||||||
|
|
||||||
if (!shareToken) {
|
if (isLoading || !shareToken) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
return <WebsiteDetails websiteId={shareToken.websiteId} />;
|
return (
|
||||||
|
<div className={styles.container}>
|
||||||
|
<Page>
|
||||||
|
<Header />
|
||||||
|
<WebsiteDetails websiteId={shareToken.websiteId} />
|
||||||
|
<Footer />
|
||||||
|
</Page>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
4
src/app/share/[...id]/Share.module.css
Normal file
4
src/app/share/[...id]/Share.module.css
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
.container {
|
||||||
|
flex: 1;
|
||||||
|
min-height: calc(100vh - 200px);
|
||||||
|
}
|
|
@ -1,5 +1,5 @@
|
||||||
import Share from './Share';
|
import Share from './Share';
|
||||||
|
|
||||||
export default function ({ params: { id } }) {
|
export default function ({ params: { id } }) {
|
||||||
return <Share shareId={id} />;
|
return <Share shareId={id[0]} />;
|
||||||
}
|
}
|
||||||
|
|
|
@ -30,6 +30,9 @@
|
||||||
min-height: 70px;
|
min-height: 70px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-width: min-content;
|
min-width: min-content;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.body > div > div > div {
|
.body > div > div > div {
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import { useEffect } from 'react';
|
|
||||||
import useStore, { setShareToken } from 'store/app';
|
import useStore, { setShareToken } from 'store/app';
|
||||||
import useApi from './useApi';
|
import useApi from './useApi';
|
||||||
|
|
||||||
|
@ -6,23 +5,16 @@ const selector = state => state.shareToken;
|
||||||
|
|
||||||
export function useShareToken(shareId) {
|
export function useShareToken(shareId) {
|
||||||
const shareToken = useStore(selector);
|
const shareToken = useStore(selector);
|
||||||
const { get } = useApi();
|
const { get, useQuery } = useApi();
|
||||||
|
const { isLoading, error } = useQuery(['share', shareId], async () => {
|
||||||
|
const data = await get(`/share/${shareId}`);
|
||||||
|
|
||||||
async function loadToken(id) {
|
|
||||||
const data = await get(`/share/${id}`);
|
|
||||||
|
|
||||||
if (data) {
|
|
||||||
setShareToken(data);
|
setShareToken(data);
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
return data;
|
||||||
if (shareId) {
|
});
|
||||||
loadToken(shareId);
|
|
||||||
}
|
|
||||||
}, [shareId]);
|
|
||||||
|
|
||||||
return shareToken;
|
return { shareToken, isLoading, error };
|
||||||
}
|
}
|
||||||
|
|
||||||
export default useShareToken;
|
export default useShareToken;
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
.menu {
|
.menu {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-flow: row wrap;
|
grid-template-columns: repeat(3, 1fr);
|
||||||
min-width: 640px;
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: var(--base50);
|
background: var(--base50);
|
||||||
z-index: var(--z-index-popup);
|
z-index: var(--z-index-popup);
|
||||||
|
@ -14,7 +13,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
min-width: calc(100% / 3);
|
min-width: 200px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
}
|
}
|
||||||
|
@ -32,3 +31,15 @@
|
||||||
.icon {
|
.icon {
|
||||||
color: var(--primary400);
|
color: var(--primary400);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 992px) {
|
||||||
|
.menu {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.menu {
|
||||||
|
transform: translateX(40px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
max-width: 1320px;
|
max-width: 1320px;
|
||||||
min-height: calc(100vh - 60px);
|
min-height: calc(100vh - 60px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
|
@ -15,6 +15,7 @@ import {
|
||||||
} from 'next-basics';
|
} from 'next-basics';
|
||||||
import { getUserByUsername } from 'queries';
|
import { getUserByUsername } from 'queries';
|
||||||
import * as yup from 'yup';
|
import * as yup from 'yup';
|
||||||
|
import { ROLES } from 'lib/constants';
|
||||||
|
|
||||||
const log = debug('umami:auth');
|
const log = debug('umami:auth');
|
||||||
|
|
||||||
|
@ -62,7 +63,7 @@ export default async (
|
||||||
|
|
||||||
return ok(res, {
|
return ok(res, {
|
||||||
token,
|
token,
|
||||||
user: { id, username, role, createdAt },
|
user: { id, username, role, createdAt, isAdmin: role === ROLES.admin },
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -7,6 +7,7 @@ import { pageInfo } from 'lib/schema';
|
||||||
import { NextApiResponse } from 'next';
|
import { NextApiResponse } from 'next';
|
||||||
import { badRequest, hashPassword, methodNotAllowed, ok, unauthorized } from 'next-basics';
|
import { badRequest, hashPassword, methodNotAllowed, ok, unauthorized } from 'next-basics';
|
||||||
import { createUser, getUserByUsername, getUsers } from 'queries';
|
import { createUser, getUserByUsername, getUsers } from 'queries';
|
||||||
|
import * as yup from 'yup';
|
||||||
|
|
||||||
export interface UsersRequestQuery extends SearchFilter {}
|
export interface UsersRequestQuery extends SearchFilter {}
|
||||||
export interface UsersRequestBody {
|
export interface UsersRequestBody {
|
||||||
|
@ -16,7 +17,6 @@ export interface UsersRequestBody {
|
||||||
role: Role;
|
role: Role;
|
||||||
}
|
}
|
||||||
|
|
||||||
import * as yup from 'yup';
|
|
||||||
const schema = {
|
const schema = {
|
||||||
GET: yup.object().shape({
|
GET: yup.object().shape({
|
||||||
...pageInfo,
|
...pageInfo,
|
||||||
|
|
Loading…
Reference in New Issue
Block a user