119 lines
3.0 KiB
TypeScript
119 lines
3.0 KiB
TypeScript
import {
|
|
Popover,
|
|
PopoverTrigger,
|
|
PopoverContent,
|
|
PopoverBody,
|
|
Stack,
|
|
IconButton,
|
|
Portal,
|
|
Button,
|
|
Text,
|
|
HStack,
|
|
useDisclosure,
|
|
} from '@chakra-ui/react'
|
|
import {
|
|
ChevronRightIcon,
|
|
DownloadIcon,
|
|
ListIcon,
|
|
MoreHorizontalIcon,
|
|
} from '@/components/icons'
|
|
import { ResultHeaderCell } from '@typebot.io/schemas'
|
|
import React, { useState } from 'react'
|
|
import { ColumnSettings } from './ColumnSettings'
|
|
import { ExportAllResultsModal } from './ExportAllResultsModal'
|
|
|
|
type Props = {
|
|
resultHeader: ResultHeaderCell[]
|
|
columnVisibility: { [key: string]: boolean }
|
|
columnOrder: string[]
|
|
onColumnOrderChange: (columnOrder: string[]) => void
|
|
setColumnVisibility: (columnVisibility: { [key: string]: boolean }) => void
|
|
}
|
|
|
|
export const TableSettingsButton = (props: Props) => {
|
|
const { isOpen, onOpen, onClose } = useDisclosure()
|
|
return (
|
|
<>
|
|
<Popover isLazy placement="bottom-end">
|
|
<PopoverTrigger>
|
|
<IconButton
|
|
size="sm"
|
|
aria-label="Open table settings"
|
|
icon={<MoreHorizontalIcon />}
|
|
/>
|
|
</PopoverTrigger>
|
|
<Portal>
|
|
<PopoverContent w="300px">
|
|
<TableSettingsMenu {...props} onExportAllClick={onOpen} />
|
|
</PopoverContent>
|
|
</Portal>
|
|
</Popover>
|
|
<ExportAllResultsModal onClose={onClose} isOpen={isOpen} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
const TableSettingsMenu = ({
|
|
resultHeader,
|
|
columnVisibility,
|
|
setColumnVisibility,
|
|
columnOrder,
|
|
onColumnOrderChange,
|
|
onExportAllClick,
|
|
}: Props & { onExportAllClick: () => void }) => {
|
|
const [selectedMenu, setSelectedMenu] = useState<
|
|
'export' | 'columnSettings' | null
|
|
>(null)
|
|
|
|
switch (selectedMenu) {
|
|
case 'columnSettings':
|
|
return (
|
|
<PopoverBody
|
|
as={Stack}
|
|
spacing="4"
|
|
p="4"
|
|
maxH="450px"
|
|
overflowY="scroll"
|
|
>
|
|
<ColumnSettings
|
|
resultHeader={resultHeader}
|
|
columnVisibility={columnVisibility}
|
|
setColumnVisibility={setColumnVisibility}
|
|
columnOrder={columnOrder}
|
|
onColumnOrderChange={onColumnOrderChange}
|
|
/>
|
|
</PopoverBody>
|
|
)
|
|
default:
|
|
return (
|
|
<PopoverBody as={Stack} p="0" spacing="0">
|
|
<Button
|
|
onClick={() => setSelectedMenu('columnSettings')}
|
|
variant="ghost"
|
|
borderBottomRadius={0}
|
|
justifyContent="space-between"
|
|
>
|
|
<HStack>
|
|
<ListIcon />
|
|
<Text>Column settings</Text>
|
|
</HStack>
|
|
|
|
<ChevronRightIcon color="gray.400" />
|
|
</Button>
|
|
noOfLines={1}
|
|
<Button
|
|
onClick={onExportAllClick}
|
|
variant="ghost"
|
|
borderTopRadius={0}
|
|
justifyContent="space-between"
|
|
>
|
|
<HStack>
|
|
<DownloadIcon />
|
|
<Text>Export all</Text>
|
|
</HStack>
|
|
</Button>
|
|
</PopoverBody>
|
|
)
|
|
}
|
|
}
|