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' && (
}
+ icon={
+
+ }
disabled={normalizedViewMode.type !== 'kanban'}
onClick={(event) => {
event.preventDefault()
@@ -111,8 +150,14 @@ const ObjectTableViewButton = ({
}
placement='bottomLeft'
arrow={false}
+ trigger='hover'
>
-
+