Spaces:
Running
Running
File size: 5,545 Bytes
13555f3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import {FormattedMessage, useIntl} from 'react-intl'
import {BoardGroup, IPropertyTemplate} from '../../blocks/board'
import {BoardView} from '../../blocks/boardView'
import mutator from '../../mutator'
import Button from '../../widgets/buttons/button'
import Menu from '../../widgets/menu'
import MenuWrapper from '../../widgets/menuWrapper'
import CheckIcon from '../../widgets/icons/check'
import HideIcon from '../../widgets/icons/hide'
import ShowIcon from '../../widgets/icons/show'
import {useAppSelector} from '../../store/hooks'
import {getCurrentViewCardsSortedFilteredAndGrouped} from '../../store/cards'
import {getVisibleAndHiddenGroups} from '../../boardUtils'
import propsRegistry from '../../properties'
type Props = {
properties: readonly IPropertyTemplate[]
activeView: BoardView
groupByProperty?: IPropertyTemplate
}
const ViewHeaderGroupByMenu = (props: Props) => {
const {properties, activeView, groupByProperty} = props
const intl = useIntl()
const cards = useAppSelector(getCurrentViewCardsSortedFilteredAndGrouped)
const {visible: visibleGroups, hidden: hiddenGroups} = getVisibleAndHiddenGroups(cards, activeView.fields.visibleOptionIds, activeView.fields.hiddenOptionIds, groupByProperty)
const emptyVisibleGroups = visibleGroups.filter((g) => !g.cards.length)
const emptyVisibleGroupsCount = emptyVisibleGroups.length
const hiddenGroupsCount = hiddenGroups.length
const handleToggleGroups = (show: boolean) => {
const getColumnIds = (groups: BoardGroup[]) => groups.map((g) => g.option.id)
if (show) {
const columnsToShow = getColumnIds(hiddenGroups)
mutator.unhideViewColumns(activeView.boardId, activeView, columnsToShow)
} else {
const columnsToHide = getColumnIds(emptyVisibleGroups)
mutator.hideViewColumns(activeView.boardId, activeView, columnsToHide)
}
}
return (
<MenuWrapper>
<Button>
<FormattedMessage
id='ViewHeader.group-by'
defaultMessage='Group by: {property}'
values={{
property: (
<span
style={{color: 'rgb(var(--center-channel-color-rgb))'}}
id='groupByLabel'
>
{groupByProperty?.name}
</span>
),
}}
/>
</Button>
<Menu>
{activeView.fields.viewType === 'table' && activeView.fields.groupById &&
<>
{emptyVisibleGroupsCount > 0 &&
<Menu.Text
key={'hideEmptyGroups'}
id={'hideEmptyGroups'}
name={intl.formatMessage({id: 'GroupBy.hideEmptyGroups', defaultMessage: 'Hide {count} empty groups'}, {count: emptyVisibleGroupsCount})}
rightIcon={<HideIcon/>}
onClick={() => handleToggleGroups(false)}
/>}
{hiddenGroupsCount > 0 &&
<Menu.Text
key={'showHiddenGroups'}
id={'showHiddenGroups'}
name={intl.formatMessage({id: 'GroupBy.showHiddenGroups', defaultMessage: 'Show {count} hidden groups'}, {count: hiddenGroupsCount})}
rightIcon={<ShowIcon/>}
onClick={() => handleToggleGroups(true)}
/>}
<Menu.Text
key={'ungroup'}
id={''}
name={intl.formatMessage({id: 'GroupBy.ungroup', defaultMessage: 'Ungroup'})}
rightIcon={activeView.fields.groupById === '' ? <CheckIcon/> : undefined}
onClick={(id) => {
if (activeView.fields.groupById === id) {
return
}
mutator.changeViewGroupById(activeView.boardId, activeView.id, activeView.fields.groupById, id)
}}
/>
<Menu.Separator/>
</>}
{properties?.filter((o: IPropertyTemplate) => propsRegistry.get(o.type).canGroup).map((option: IPropertyTemplate) => (
<Menu.Text
key={option.id}
id={option.id}
name={option.name}
rightIcon={groupByProperty?.id === option.id ? <CheckIcon/> : undefined}
onClick={(id) => {
if (activeView.fields.groupById === id) {
return
}
mutator.changeViewGroupById(activeView.boardId, activeView.id, activeView.fields.groupById, id)
}}
/>
))}
</Menu>
</MenuWrapper>
)
}
export default React.memo(ViewHeaderGroupByMenu)
|