diff --git a/src/components/Dashboard/common/ObjectTableViewButton.jsx b/src/components/Dashboard/common/ObjectTableViewButton.jsx index 8fba4024..76941505 100644 --- a/src/components/Dashboard/common/ObjectTableViewButton.jsx +++ b/src/components/Dashboard/common/ObjectTableViewButton.jsx @@ -1,7 +1,16 @@ import PropTypes from 'prop-types' import { useContext, useMemo, useState } from 'react' import ObjectListViewContext from '../context/ObjectListViewContext' -import { Button, Divider, Flex, Modal, Popover, Radio, Select } from 'antd' +import { + Button, + Divider, + Flex, + Modal, + Popover, + Radio, + Select, + Typography +} from 'antd' import GridIcon from '../../Icons/GridIcon' import ListIcon from '../../Icons/ListIcon' import KanbanIcon from '../../Icons/KanbanIcon' @@ -10,11 +19,13 @@ import { getModelByName } from '../../../database/ObjectModels' import { getViewModeType, normalizeViewMode } from './viewModeUtils' const VIEW_MODE_OPTIONS = [ - { type: 'list', label: 'List', icon: }, - { type: 'cards', label: 'Cards', icon: }, - { type: 'kanban', label: 'Kanban', icon: } + { type: 'list', label: 'List' }, + { type: 'cards', label: 'Cards' }, + { type: 'kanban', label: 'Kanban' } ] +const { Text } = Typography + const ObjectTableViewButton = ({ objectType, viewMode: viewModeProp, @@ -38,6 +49,14 @@ const ObjectTableViewButton = ({ const hasKanbanOption = stateProperties.length > 0 const defaultCategoryProperty = stateProperties[0]?.name + const availableViewModes = useMemo( + () => + VIEW_MODE_OPTIONS.filter( + (option) => option.type !== 'kanban' || hasKanbanOption + ).map((option) => option.type), + [hasKanbanOption] + ) + const handleTypeChange = (nextType) => { if (nextType === 'kanban') { setViewMode({ @@ -63,6 +82,19 @@ const ObjectTableViewButton = ({ }) } + const { onClick: buttonOnClick, ...restButtonProps } = buttonProps + + const handleCycleView = (event) => { + buttonOnClick?.(event) + + const currentType = getViewModeType(normalizedViewMode) + const currentIndex = availableViewModes.indexOf(currentType) + const nextIndex = + currentIndex === -1 ? 0 : (currentIndex + 1) % availableViewModes.length + + handleTypeChange(availableViewModes[nextIndex]) + } + const activeIcon = normalizedViewMode.type === 'cards' ? ( @@ -86,14 +118,21 @@ const ObjectTableViewButton = ({ (option) => option.type !== 'kanban' || hasKanbanOption ).map((option) => ( - - {option.icon} - {option.label} + + {option.label} {option.type === 'kanban' && (