selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-20 20:29:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

adapt pagination and fixes deletion

Browse Source
This commit is contained in:
Sara
2024-01-15 17:15:35 +01:00
parent 23b52a6d1f
commit 113938b9eb
4 changed files with 132 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
www/app/[domain]/browse/page.tsx
View File

@@ -4,6 +4,7 @@ import React, { useState } from "react";
import { GetTranscript } from "../../api"; import { GetTranscript } from "../../api";
import Pagination from "./pagination"; import Pagination from "./pagination";
import Link from "next/link"; import Link from "next/link";
import { FaGear } from "react-icons/fa6";
import { FaCheck, FaTrash, FaStar, FaMicrophone } from "react-icons/fa"; import { FaCheck, FaTrash, FaStar, FaMicrophone } from "react-icons/fa";
import { MdError } from "react-icons/md"; import { MdError } from "react-icons/md";
import useTranscriptList from "../transcripts/useTranscriptList"; import useTranscriptList from "../transcripts/useTranscriptList";
@@ -31,6 +32,7 @@ import {
PopoverHeader, PopoverHeader,
PopoverBody, PopoverBody,
PopoverFooter, PopoverFooter,
IconButton,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { PlusSquareIcon } from "@chakra-ui/icons"; import { PlusSquareIcon } from "@chakra-ui/icons";
// import { useFiefUserinfo } from "@fief/fief/nextjs/react"; // import { useFiefUserinfo } from "@fief/fief/nextjs/react";
@@ -39,7 +41,6 @@ export default function TranscriptBrowser() {
const [page, setPage] = useState<number>(1); const [page, setPage] = useState<number>(1);
const { loading, response, refetch } = useTranscriptList(page); const { loading, response, refetch } = useTranscriptList(page);
const [deletionLoading, setDeletionLoading] = useState(false); const [deletionLoading, setDeletionLoading] = useState(false);
const [deletedItems, setDeletedItems] = useState<string[]>([]);
const api = useApi(); const api = useApi();
const { setError } = useError(); const { setError } = useError();
@@ -67,18 +68,14 @@ export default function TranscriptBrowser() {
</Flex> </Flex>
); );
const prevent = (e: React.MouseEvent<HTMLDivElement>) => {
e.stopPropagation();
e.preventDefault();
};
const handleDeleteTranscript = (transcriptToDeleteId) => (e) => { const handleDeleteTranscript = (transcriptToDeleteId) => (e) => {
if (!deletionLoading) { e.stopPropagation();
if (api && !deletionLoading) {
setDeletionLoading(true);
api api
?.v1TranscriptDelete(transcriptToDeleteId) .v1TranscriptDelete(transcriptToDeleteId)
.then(() => { .then(() => {
setDeletionLoading(false); setDeletionLoading(false);
setDeletedItems([...deletedItems, transcriptToDeleteId]);
refetch(); refetch();
}) })
.catch((err) => { .catch((err) => {
@@ -101,7 +98,7 @@ export default function TranscriptBrowser() {
{/* <Heading>{user?.fields?.name}'s Meetings</Heading> */} {/* <Heading>{user?.fields?.name}'s Meetings</Heading> */}
<Heading>Your Meetings</Heading> <Heading>Your Meetings</Heading>
<Flex flexDir="row" align="center"> <Flex flexDir="row" align="center">
{loading && <Spinner></Spinner>} {loading || (deletionLoading && <Spinner></Spinner>)}
<Pagination <Pagination
page={page} page={page}
@@ -130,74 +127,73 @@ export default function TranscriptBrowser() {
overflowY={"scroll"} overflowY={"scroll"}
mb="4" mb="4"
> >
{response?.items {response?.items.map((item: GetTranscript) => (
.filter((item) => !deletedItems.includes(item.id)) <Card key={item.id}>
.map((item: GetTranscript) => ( <CardBody as={Link} href={`/transcripts/${item.id}`}>
<Card as={Link} key={item.id} href={`/transcripts/${item.id}`}> <Heading size="md">
<CardBody> {item.title || item.name || "Unamed Transcript"}
<Heading size="md">
{item.title || item.name || "Unamed Transcript"}
{item.status == "ended" && ( {item.status == "ended" && (
<Icon color="green" as={FaCheck} ml="2" /> <Icon color="green" as={FaCheck} ml="2" />
)} )}
{item.status == "error" && ( {item.status == "error" && (
<Icon color="red" as={MdError} ml="2" /> <Icon color="red.primary" as={MdError} ml="2" />
)} )}
{item.status == "idle" && ( {item.status == "idle" && (
<Icon color="yellow" as={FaStar} ml="2" /> <Icon color="yellow.500" as={FaStar} ml="2" />
)} )}
{item.status == "processing" && ( {item.status == "processing" && (
<Icon color="grey" as={FaMicrophone} ml="2" /> <Icon color="grey.primary" as={FaGear} ml="2" />
)} )}
{item.status == "recording" && ( {item.status == "recording" && (
<Icon color="blue" as={FaMicrophone} ml="2" /> <Icon color="blue.primary" as={FaMicrophone} ml="2" />
)} )}
</Heading> </Heading>
<Stack mt="6" spacing="3"> <Stack mt="6" spacing="3">
<Text fontSize="small"> <Text fontSize="small">
{new Date(item.created_at).toLocaleString("en-US")} {new Date(item.created_at).toLocaleString("en-US")}
{"\u00A0"}-{"\u00A0"} {"\u00A0"}-{"\u00A0"}
{formatTime(Math.floor(item.duration / 1000))} {formatTime(Math.floor(item.duration / 1000))}
</Text> </Text>
<Text>{item.short_summary}</Text> <Text>{item.short_summary}</Text>
</Stack> </Stack>
</CardBody> </CardBody>
{item.status !== "ended" && ( {item.status !== "ended" && (
<> <>
<Divider /> <Divider />
<CardFooter onClick={prevent}> <CardFooter>
<Popover> <Popover>
<PopoverTrigger> <PopoverTrigger>
<Button colorScheme="red" disabled={deletionLoading}> <IconButton
<Icon as={FaTrash}></Icon> colorScheme="red"
disabled={deletionLoading}
icon={<FaTrash />}
aria-label="Delete"
/>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>
Are you sure you want to delete {item.title} ?
</PopoverHeader>
<PopoverBody>This action is not reversible.</PopoverBody>
<PopoverFooter>
<Button
colorScheme="red"
onClick={handleDeleteTranscript(item.id)}
>
Confirm
</Button> </Button>
</PopoverTrigger> </PopoverFooter>
<PopoverContent> </PopoverContent>
<PopoverArrow /> </Popover>
<PopoverCloseButton /> </CardFooter>
<PopoverHeader> </>
Are you sure you want to delete {item.title} ? )}
</PopoverHeader> </Card>
<PopoverBody> ))}
This action is not reversible.
</PopoverBody>
<PopoverFooter>
<Button
colorScheme="red"
onClick={handleDeleteTranscript(item.id)}
>
Confirm
</Button>
</PopoverFooter>
</PopoverContent>
</Popover>
</CardFooter>
</>
)}
</Card>
))}
</Grid> </Grid>
</Flex> </Flex>
); );

49
www/app/[domain]/browse/pagination.tsx
View File

@@ -1,5 +1,5 @@
import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons"; import { Button, Flex, IconButton } from "@chakra-ui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
type PaginationProps = { type PaginationProps = {
page: number; page: number;
@@ -39,40 +39,41 @@ export default function Pagination(props: PaginationProps) {
setPage(newPage); setPage(newPage);
} }
}; };
return ( return (
<div className="flex justify-center space-x-4 my-4"> <Flex justify="center" align="center" gap="2" mx="2">
<button <IconButton
className={`w-10 h-10 rounded-full p-2 ${ isRound={true}
canGoPrevious ? "text-gray-500" : "text-gray-300" variant="text"
}`} color={!canGoPrevious ? "gray" : "dark"}
mb="1"
icon={<FaChevronLeft />}
onClick={() => handlePageChange(page - 1)} onClick={() => handlePageChange(page - 1)}
disabled={!canGoPrevious} disabled={!canGoPrevious}
> aria-label="Previous page"
<FontAwesomeIcon icon={faArrowLeft} className="h-5 w-auto" /> />
</button>
{pageNumbers.map((pageNumber) => ( {pageNumbers.map((pageNumber) => (
<button <Button
key={pageNumber} key={pageNumber}
className={`w-10 h-10 rounded-full p-2 border ${ variant="text"
page === pageNumber ? "border-gray-600" : "border-gray-300" color={page === pageNumber ? "gray" : "dark"}
} rounded`}
onClick={() => handlePageChange(pageNumber)} onClick={() => handlePageChange(pageNumber)}
disabled={page === pageNumber}
> >
{pageNumber} {pageNumber}
</button> </Button>
))} ))}
<button <IconButton
className={`w-10 h-10 rounded-full p-2 ${ isRound={true}
canGoNext ? "text-gray-500" : "text-gray-300" variant="text"
}`} color={!canGoNext ? "gray" : "dark"}
icon={<FaChevronRight />}
mb="1"
onClick={() => handlePageChange(page + 1)} onClick={() => handlePageChange(page + 1)}
disabled={!canGoNext} disabled={!canGoNext}
> aria-label="Next page"
<FontAwesomeIcon icon={faArrowRight} className="h-5 w-auto" /> />
</button> </Flex>
</div>
); );
} }

3
www/app/providers.tsx
View File

@@ -1,7 +1,8 @@
"use client"; "use client";
import { ChakraProvider } from "@chakra-ui/react"; import { ChakraProvider } from "@chakra-ui/react";
import theme from "./theme";
export function Providers({ children }: { children: React.ReactNode }) { export function Providers({ children }: { children: React.ReactNode }) {
return <ChakraProvider>{children}</ChakraProvider>; return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
} }

34
www/app/theme.ts Normal file
View File

@@ -0,0 +1,34 @@
// 1. Import `extendTheme`
import { extendTheme } from "@chakra-ui/react";
// 2. Call `extendTheme` and pass your custom values
const theme = extendTheme({
colors: {
blue: {
primary: "#3158E2",
500: "#3158E2",
light: "#B1CBFF",
200: "#B1CBFF",
dark: "#0E1B48",
900: "#0E1B48",
},
red: {
primary: "#DF7070",
500: "#DF7070",
light: "#FBD5D5",
200: "#FBD5D5",
},
gray: {
bg: "#F4F4F4",
100: "#F4F4F4",
light: "#D5D5D5",
200: "#D5D5D5",
primary: "#838383",
500: "#838383",
},
light: "#FFFFFF",
dark: "#0C0D0E",
},
});
export default theme;