mirror of
https://github.com/docmost/docmost.git
synced 2025-11-13 22:11:16 +10:00
unify recent changes component
This commit is contained in:
Philipinho
78
apps/client/src/components/common/recent-changes.tsx
Normal file
78
apps/client/src/components/common/recent-changes.tsx
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
import {
|
||||||
|
Text,
|
||||||
|
Group,
|
||||||
|
Stack,
|
||||||
|
UnstyledButton,
|
||||||
|
Divider,
|
||||||
|
Badge,
|
||||||
|
} from "@mantine/core";
|
||||||
|
import classes from "../../features/home/components/home.module.css";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
|
||||||
|
import { buildPageUrl } from "@/features/page/page.utils.ts";
|
||||||
|
import { formattedDate } from "@/lib/time.ts";
|
||||||
|
import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
|
||||||
|
import { IconFileDescription } from "@tabler/icons-react";
|
||||||
|
import { getSpaceUrl } from "@/lib/config.ts";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
spaceId?: string;
|
||||||
|
}
|
||||||
|
export default function RecentChanges({ spaceId }: Props) {
|
||||||
|
const { data: pages, isLoading, isError } = useRecentChangesQuery(spaceId);
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return <PageListSkeleton />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isError) {
|
||||||
|
return <Text>Failed to fetch recent pages</Text>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return pages && pages.items.length > 0 ? (
|
||||||
|
<div>
|
||||||
|
{pages.items.map((page) => (
|
||||||
|
<div key={page.id}>
|
||||||
|
<UnstyledButton
|
||||||
|
component={Link}
|
||||||
|
to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
|
||||||
|
className={classes.page}
|
||||||
|
p="xs"
|
||||||
|
>
|
||||||
|
<Group wrap="nowrap">
|
||||||
|
<Stack gap="xs" style={{ flex: 1 }}>
|
||||||
|
<Group wrap="nowrap">
|
||||||
|
{page.icon || <IconFileDescription size={18} />}
|
||||||
|
|
||||||
|
<Text fw={500} size="md" lineClamp={1}>
|
||||||
|
{page.title || "Untitled"}
|
||||||
|
</Text>
|
||||||
|
</Group>
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
{!spaceId && (
|
||||||
|
<Badge
|
||||||
|
color="blue"
|
||||||
|
variant="light"
|
||||||
|
component={Link}
|
||||||
|
to={getSpaceUrl(page.space.slug)}
|
||||||
|
>
|
||||||
|
{page.space.name}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Text c="dimmed" size="xs" fw={500}>
|
||||||
|
{formattedDate(page.updatedAt)}
|
||||||
|
</Text>
|
||||||
|
</Group>
|
||||||
|
</UnstyledButton>
|
||||||
|
<Divider />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Text size="md" ta="center">
|
||||||
|
No records to show
|
||||||
|
</Text>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import { Text, Tabs, Space } from "@mantine/core";
|
import { Text, Tabs, Space } from "@mantine/core";
|
||||||
import { IconClockHour3 } from "@tabler/icons-react";
|
import { IconClockHour3 } from "@tabler/icons-react";
|
||||||
import RecentChanges from "@/features/home/components/recent-changes";
|
import RecentChanges from "@/components/common/recent-changes.tsx";
|
||||||
|
|
||||||
export default function HomeTabs() {
|
export default function HomeTabs() {
|
||||||
return (
|
return (
|
||||||
@ -8,7 +8,7 @@ export default function HomeTabs() {
|
|||||||
<Tabs.List>
|
<Tabs.List>
|
||||||
<Tabs.Tab value="recent" leftSection={<IconClockHour3 size={18} />}>
|
<Tabs.Tab value="recent" leftSection={<IconClockHour3 size={18} />}>
|
||||||
<Text size="sm" fw={500}>
|
<Text size="sm" fw={500}>
|
||||||
Recent changes
|
Recently updated
|
||||||
</Text>
|
</Text>
|
||||||
</Tabs.Tab>
|
</Tabs.Tab>
|
||||||
</Tabs.List>
|
</Tabs.List>
|
||||||
|
|||||||
@ -1,73 +0,0 @@
|
|||||||
import {
|
|
||||||
Text,
|
|
||||||
Group,
|
|
||||||
Stack,
|
|
||||||
UnstyledButton,
|
|
||||||
Divider,
|
|
||||||
Badge,
|
|
||||||
} from "@mantine/core";
|
|
||||||
import classes from "./home.module.css";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
|
|
||||||
import { buildPageUrl } from "@/features/page/page.utils.ts";
|
|
||||||
import { formattedDate } from "@/lib/time.ts";
|
|
||||||
import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
|
|
||||||
import { IconFileDescription } from "@tabler/icons-react";
|
|
||||||
import { getSpaceUrl } from "@/lib/config.ts";
|
|
||||||
|
|
||||||
function RecentChanges() {
|
|
||||||
const { data, isLoading, isError } = useRecentChangesQuery();
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return <PageListSkeleton />;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isError) {
|
|
||||||
return <Text>Failed to fetch recent pages</Text>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
data && (
|
|
||||||
<div>
|
|
||||||
{data.items.map((page) => (
|
|
||||||
<div key={page.id}>
|
|
||||||
<UnstyledButton
|
|
||||||
component={Link}
|
|
||||||
to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
|
|
||||||
className={classes.page}
|
|
||||||
p="xs"
|
|
||||||
>
|
|
||||||
<Group wrap="nowrap">
|
|
||||||
<Stack gap="xs" style={{ flex: 1 }}>
|
|
||||||
<Group wrap="nowrap">
|
|
||||||
{page.icon || <IconFileDescription size={18} />}
|
|
||||||
|
|
||||||
<Text fw={500} size="md" lineClamp={1}>
|
|
||||||
{page.title || "Untitled"}
|
|
||||||
</Text>
|
|
||||||
</Group>
|
|
||||||
</Stack>
|
|
||||||
|
|
||||||
<Badge
|
|
||||||
color="blue"
|
|
||||||
variant="light"
|
|
||||||
component={Link}
|
|
||||||
to={getSpaceUrl(page.space.slug)}
|
|
||||||
>
|
|
||||||
{page.space.name}
|
|
||||||
</Badge>
|
|
||||||
|
|
||||||
<Text c="dimmed" size="xs" fw={500}>
|
|
||||||
{formattedDate(page.updatedAt)}
|
|
||||||
</Text>
|
|
||||||
</Group>
|
|
||||||
</UnstyledButton>
|
|
||||||
<Divider />
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RecentChanges;
|
|
||||||
@ -1,14 +1,19 @@
|
|||||||
import { Text, Tabs, Space } from "@mantine/core";
|
import { Text, Tabs, Space } from "@mantine/core";
|
||||||
import { IconClockHour3 } from "@tabler/icons-react";
|
import { IconClockHour3 } from "@tabler/icons-react";
|
||||||
import SpaceRecentChanges from "@/features/space/components/space-recent-changes.tsx";
|
import RecentChanges from "@/components/common/recent-changes.tsx";
|
||||||
|
import { useParams } from "react-router-dom";
|
||||||
|
import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
|
||||||
|
|
||||||
export default function SpaceHomeTabs() {
|
export default function SpaceHomeTabs() {
|
||||||
|
const { spaceSlug } = useParams();
|
||||||
|
const { data: space } = useGetSpaceBySlugQuery(spaceSlug);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tabs defaultValue="recent">
|
<Tabs defaultValue="recent">
|
||||||
<Tabs.List>
|
<Tabs.List>
|
||||||
<Tabs.Tab value="recent" leftSection={<IconClockHour3 size={18} />}>
|
<Tabs.Tab value="recent" leftSection={<IconClockHour3 size={18} />}>
|
||||||
<Text size="sm" fw={500}>
|
<Text size="sm" fw={500}>
|
||||||
Recent changes
|
Recently updated
|
||||||
</Text>
|
</Text>
|
||||||
</Tabs.Tab>
|
</Tabs.Tab>
|
||||||
</Tabs.List>
|
</Tabs.List>
|
||||||
@ -16,7 +21,7 @@ export default function SpaceHomeTabs() {
|
|||||||
<Space my="md" />
|
<Space my="md" />
|
||||||
|
|
||||||
<Tabs.Panel value="recent">
|
<Tabs.Panel value="recent">
|
||||||
<SpaceRecentChanges />
|
<RecentChanges spaceId={space?.id} />
|
||||||
</Tabs.Panel>
|
</Tabs.Panel>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,53 +0,0 @@
|
|||||||
import { Text, Group, Stack, UnstyledButton, Divider } from "@mantine/core";
|
|
||||||
import classes from "./space-home.module.css";
|
|
||||||
import { Link, useParams } from "react-router-dom";
|
|
||||||
import { buildPageUrl } from "@/features/page/page.utils.ts";
|
|
||||||
import { formattedDate } from "@/lib/time.ts";
|
|
||||||
import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
|
|
||||||
import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
|
|
||||||
|
|
||||||
function SpaceRecentChanges() {
|
|
||||||
const { spaceSlug } = useParams();
|
|
||||||
const { data: space } = useGetSpaceBySlugQuery(spaceSlug);
|
|
||||||
const { data, isLoading, isError } = useRecentChangesQuery(space?.id);
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return <></>;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isError) {
|
|
||||||
return <Text>Failed to fetch recent pages</Text>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
data && (
|
|
||||||
<div>
|
|
||||||
{data.items.map((page) => (
|
|
||||||
<div key={page.id}>
|
|
||||||
<UnstyledButton
|
|
||||||
component={Link}
|
|
||||||
to={buildPageUrl(space.slug, page.slugId, page.title)}
|
|
||||||
className={classes.page}
|
|
||||||
p="xs"
|
|
||||||
>
|
|
||||||
<Group wrap="nowrap">
|
|
||||||
<Stack gap="xs" style={{ flex: 1 }}>
|
|
||||||
<Text fw={500} size="sm" lineClamp={1}>
|
|
||||||
{page.title || "Untitled"}
|
|
||||||
</Text>
|
|
||||||
</Stack>
|
|
||||||
|
|
||||||
<Text c="dimmed" size="xs" fw={500}>
|
|
||||||
{formattedDate(page.updatedAt)}
|
|
||||||
</Text>
|
|
||||||
</Group>
|
|
||||||
</UnstyledButton>
|
|
||||||
<Divider />
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SpaceRecentChanges;
|
|
||||||
Reference in New Issue
Block a user