-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f088f69
commit 1093453
Showing
25 changed files
with
587 additions
and
150 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
44 changes: 44 additions & 0 deletions
44
apps/builder/components/results/SubmissionsTable/LoadingRows.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import { Checkbox, Flex, Skeleton } from '@chakra-ui/react' | ||
| import React from 'react' | ||
|
|
||
| type LoadingRowsProps = { | ||
| totalColumns: number | ||
| } | ||
|
|
||
| export const LoadingRows = ({ totalColumns }: LoadingRowsProps) => { | ||
| return ( | ||
| <> | ||
| {Array.from(Array(3)).map((row, idx) => ( | ||
| <Flex as="tr" key={idx}> | ||
| <Flex | ||
| key={idx} | ||
| py={2} | ||
| px={4} | ||
| border="1px" | ||
| as="td" | ||
| borderColor="gray.200" | ||
| flex="0" | ||
| > | ||
| <Checkbox isDisabled /> | ||
| </Flex> | ||
| {Array.from(Array(totalColumns)).map((cell, idx) => { | ||
| return ( | ||
| <Flex | ||
| key={idx} | ||
| py={2} | ||
| px={4} | ||
| border="1px" | ||
| as="td" | ||
| borderColor="gray.200" | ||
| flex="1" | ||
| align="center" | ||
| > | ||
| <Skeleton height="5px" w="full" /> | ||
| </Flex> | ||
| ) | ||
| })} | ||
| </Flex> | ||
| ))} | ||
| </> | ||
| ) | ||
| } |
116 changes: 92 additions & 24 deletions
116
apps/builder/components/results/SubmissionsTable/SubmissionsTable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,77 +1,145 @@ | ||
| /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
| /* eslint-disable react/jsx-key */ | ||
| import { Box, Flex } from '@chakra-ui/react' | ||
| import { Box, Checkbox, Flex } from '@chakra-ui/react' | ||
| import { Answer, Result } from 'bot-engine' | ||
| import { useTypebot } from 'contexts/TypebotContext' | ||
| import React from 'react' | ||
| import { useTable } from 'react-table' | ||
| import React, { useEffect } from 'react' | ||
| import { Hooks, useRowSelect, useTable } from 'react-table' | ||
| import { parseSubmissionsColumns } from 'services/publicTypebot' | ||
| import { parseDateToReadable } from 'services/results' | ||
| import { LoadingRows } from './LoadingRows' | ||
|
|
||
| // eslint-disable-next-line @typescript-eslint/ban-types | ||
| type SubmissionsTableProps = {} | ||
| type SubmissionsTableProps = { | ||
| results?: (Result & { answers: Answer[] })[] | ||
| onNewSelection: (selection: string[]) => void | ||
| } | ||
|
|
||
| export const SubmissionsTable = ({}: SubmissionsTableProps) => { | ||
| export const SubmissionsTable = ({ | ||
| results, | ||
| onNewSelection, | ||
| }: SubmissionsTableProps) => { | ||
| const { publishedTypebot } = useTypebot() | ||
| const columns: any = React.useMemo( | ||
| () => parseSubmissionsColumns(publishedTypebot), | ||
| [publishedTypebot] | ||
| ) | ||
| const data = React.useMemo(() => [], []) | ||
| const { getTableProps, headerGroups, rows, prepareRow, getTableBodyProps } = | ||
| useTable({ columns, data }) | ||
| const data = React.useMemo( | ||
| () => | ||
| (results ?? []).map((result) => ({ | ||
| createdAt: parseDateToReadable(result.createdAt), | ||
| ...result.answers.reduce( | ||
| (o, answer) => ({ ...o, [answer.blockId]: answer.content }), | ||
| {} | ||
| ), | ||
| })), | ||
| [results] | ||
| ) | ||
|
|
||
| const { | ||
| getTableProps, | ||
| headerGroups, | ||
| rows, | ||
| prepareRow, | ||
| getTableBodyProps, | ||
| selectedFlatRows, | ||
| } = useTable({ columns, data }, useRowSelect, checkboxColumnHook) as any | ||
|
|
||
| useEffect(() => { | ||
| onNewSelection(selectedFlatRows.map((row: any) => row.id)) | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [selectedFlatRows]) | ||
|
|
||
| return ( | ||
| <Flex overflowX="scroll" maxW="full" className="table-wrapper" rounded="md"> | ||
| <Box as="table" rounded="md" {...getTableProps()}> | ||
| <Box as="table" rounded="md" {...getTableProps()} w="full"> | ||
| <Box as="thead"> | ||
| {headerGroups.map((headerGroup) => { | ||
| {headerGroups.map((headerGroup: any) => { | ||
| return ( | ||
| <Box as="tr" {...headerGroup.getHeaderGroupProps()}> | ||
| {headerGroup.headers.map((column) => { | ||
| <Flex as="tr" {...headerGroup.getHeaderGroupProps()}> | ||
| {headerGroup.headers.map((column: any, idx: number) => { | ||
| return ( | ||
| <Box | ||
| <Flex | ||
| py={2} | ||
| px={4} | ||
| border="1px" | ||
| borderColor="gray.200" | ||
| as="th" | ||
| minW="200px" | ||
| color="gray.500" | ||
| fontWeight="normal" | ||
| textAlign="left" | ||
| minW={idx > 0 ? '200px' : 'unset'} | ||
| flex={idx > 0 ? '1' : '0'} | ||
| {...column.getHeaderProps()} | ||
| > | ||
| {column.render('Header')} | ||
| </Box> | ||
| </Flex> | ||
| ) | ||
| })} | ||
| </Box> | ||
| </Flex> | ||
| ) | ||
| })} | ||
| </Box> | ||
|
|
||
| <Box as="tbody" {...getTableBodyProps()}> | ||
| {rows.map((row) => { | ||
| {results === undefined && ( | ||
| <LoadingRows totalColumns={columns.length} /> | ||
| )} | ||
| {rows.map((row: any) => { | ||
| prepareRow(row) | ||
| return ( | ||
| <Box as="tr" {...row.getRowProps()}> | ||
| {row.cells.map((cell) => { | ||
| <Flex as="tr" {...row.getRowProps()}> | ||
| {row.cells.map((cell: any, idx: number) => { | ||
| return ( | ||
| <Box | ||
| <Flex | ||
| py={2} | ||
| px={4} | ||
| border="1px" | ||
| as="td" | ||
| minW="200px" | ||
| borderColor="gray.200" | ||
| minW={idx > 0 ? '200px' : 'unset'} | ||
| {...cell.getCellProps()} | ||
| flex={idx > 0 ? '1' : '0'} | ||
| > | ||
| {cell.render('Cell')} | ||
| </Box> | ||
| </Flex> | ||
| ) | ||
| })} | ||
| </Box> | ||
| </Flex> | ||
| ) | ||
| })} | ||
| </Box> | ||
| </Box> | ||
| </Flex> | ||
| ) | ||
| } | ||
|
|
||
| const checkboxColumnHook = (hooks: Hooks<any>) => { | ||
| hooks.visibleColumns.push((columns) => [ | ||
| { | ||
| id: 'selection', | ||
| Header: ({ getToggleAllRowsSelectedProps }: any) => ( | ||
| <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} /> | ||
| ), | ||
| Cell: ({ row }: any) => ( | ||
| <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} /> | ||
| ), | ||
| }, | ||
| ...columns, | ||
| ]) | ||
| } | ||
|
|
||
| const IndeterminateCheckbox = React.forwardRef( | ||
| ({ indeterminate, checked, ...rest }: any, ref) => { | ||
| const defaultRef = React.useRef() | ||
| const resolvedRef: any = ref || defaultRef | ||
|
|
||
| return ( | ||
| <Checkbox | ||
| ref={resolvedRef} | ||
| {...rest} | ||
| isIndeterminate={indeterminate} | ||
| isChecked={checked} | ||
| /> | ||
| ) | ||
| } | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,75 @@ | ||
| import { | ||
| Button, | ||
| HStack, | ||
| Stack, | ||
| Tag, | ||
| useToast, | ||
| Text, | ||
| Fade, | ||
| Flex, | ||
| } from '@chakra-ui/react' | ||
| import { DownloadIcon, TrashIcon } from 'assets/icons' | ||
| import { SubmissionsTable } from 'components/results/SubmissionsTable' | ||
| import React from 'react' | ||
| import React, { useMemo, useState } from 'react' | ||
| import { useResults } from 'services/results' | ||
|
|
||
| type Props = { typebotId: string; totalResults: number } | ||
| export const SubmissionsContent = ({ typebotId, totalResults }: Props) => { | ||
| const [lastResultId, setLastResultId] = useState<string>() | ||
| const [selectedIds, setSelectedIds] = useState<string[]>([]) | ||
|
|
||
| const toast = useToast({ | ||
| position: 'top-right', | ||
| status: 'error', | ||
| }) | ||
|
|
||
| const { results } = useResults({ | ||
| lastResultId, | ||
| typebotId, | ||
| onError: (err) => toast({ title: err.name, description: err.message }), | ||
| }) | ||
|
|
||
| const handleNewSelection = (newSelection: string[]) => { | ||
| if (newSelection.length === selectedIds.length) return | ||
| setSelectedIds(newSelection) | ||
| } | ||
|
|
||
| const totalSelected = useMemo( | ||
| () => | ||
| selectedIds.length === results?.length | ||
| ? totalResults | ||
| : selectedIds.length, | ||
| [results?.length, selectedIds.length, totalResults] | ||
| ) | ||
|
|
||
| export const SubmissionsContent = () => { | ||
| return ( | ||
| <> | ||
| <SubmissionsTable /> | ||
| </> | ||
| <Stack> | ||
| <Flex w="full" justifyContent="flex-end"> | ||
| <HStack> | ||
| <HStack as={Button} colorScheme="blue"> | ||
| <DownloadIcon /> | ||
| <Text>Export</Text> | ||
| <Fade in={totalSelected > 0} unmountOnExit> | ||
| <Tag colorScheme="blue" variant="subtle" size="sm"> | ||
| {totalSelected} | ||
| </Tag> | ||
| </Fade> | ||
| </HStack> | ||
| <Fade in={totalSelected > 0} unmountOnExit> | ||
| <HStack as={Button} colorScheme="red"> | ||
| <TrashIcon /> | ||
| <Text>Delete</Text> | ||
| {totalSelected > 0 && ( | ||
| <Tag colorScheme="red" variant="subtle" size="sm"> | ||
| {totalSelected} | ||
| </Tag> | ||
| )} | ||
| </HStack> | ||
| </Fade> | ||
| </HStack> | ||
| </Flex> | ||
|
|
||
| <SubmissionsTable results={results} onNewSelection={handleNewSelection} /> | ||
| </Stack> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.