Spaces:
Sleeping
Sleeping
File size: 4,263 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 | // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useCallback} from 'react'
import {FormattedMessage} from 'react-intl'
import {IPropertyTemplate} from '../../blocks/board'
import {BoardView, ISortOption} from '../../blocks/boardView'
import {Constants} from '../../constants'
import {Card} from '../../blocks/card'
import mutator from '../../mutator'
import Button from '../../widgets/buttons/button'
import Menu from '../../widgets/menu'
import MenuWrapper from '../../widgets/menuWrapper'
import SortDownIcon from '../../widgets/icons/sortDown'
import SortUpIcon from '../../widgets/icons/sortUp'
type Props = {
properties: readonly IPropertyTemplate[]
activeView: BoardView
orderedCards: Card[]
}
const ViewHeaderSortMenu = (props: Props) => {
const {properties, activeView, orderedCards} = props
const hasSort = activeView.fields.sortOptions?.length > 0
const sortDisplayOptions = properties?.map((o) => ({id: o.id, name: o.name}))
sortDisplayOptions?.unshift({id: Constants.titleColumnId, name: 'Name'})
const sortChanged = useCallback((propertyId: string) => {
let newSortOptions: ISortOption[] = []
if (activeView.fields.sortOptions && activeView.fields.sortOptions[0] && activeView.fields.sortOptions[0].propertyId === propertyId) {
// Already sorting by name, so reverse it
newSortOptions = [
{propertyId, reversed: !activeView.fields.sortOptions[0].reversed},
]
} else {
newSortOptions = [
{propertyId, reversed: false},
]
}
mutator.changeViewSortOptions(activeView.boardId, activeView.id, activeView.fields.sortOptions, newSortOptions)
}, [activeView.id, activeView.fields.sortOptions])
const onManualSort = useCallback(() => {
// This sets the manual card order to the currently displayed order
// Note: Perform this as a single update to change both properties correctly
const newView = {...activeView, fields: {...activeView.fields}}
newView.fields.cardOrder = orderedCards.map((o) => o.id || '') || []
newView.fields.sortOptions = []
mutator.updateBlock(activeView.boardId, newView, activeView, 'reorder')
}, [activeView, orderedCards])
const onRevertSort = useCallback(() => {
mutator.changeViewSortOptions(activeView.boardId, activeView.id, activeView.fields.sortOptions, [])
}, [activeView.id, activeView.fields.sortOptions])
return (
<MenuWrapper>
<Button active={hasSort}>
<FormattedMessage
id='ViewHeader.sort'
defaultMessage='Sort'
/>
</Button>
<Menu>
{(activeView.fields.sortOptions?.length > 0) &&
<>
<Menu.Text
id='manual'
name='Manual'
onClick={onManualSort}
/>
<Menu.Text
id='revert'
name='Revert'
onClick={onRevertSort}
/>
<Menu.Separator/>
</>
}
{sortDisplayOptions?.map((option) => {
let rightIcon: JSX.Element | undefined
if (activeView.fields.sortOptions?.length > 0) {
const sortOption = activeView.fields.sortOptions[0]
if (sortOption.propertyId === option.id) {
rightIcon = sortOption.reversed ? <SortDownIcon/> : <SortUpIcon/>
}
}
return (
<Menu.Text
key={option.id}
id={option.id}
name={option.name}
rightIcon={rightIcon}
onClick={sortChanged}
/>
)
})}
</Menu>
</MenuWrapper>
)
}
export default React.memo(ViewHeaderSortMenu)
|