mirror of
https://github.com/mattermost/focalboard.git
synced 2024-12-24 13:43:12 +02:00
Allow sort by name (title) in menu
This commit is contained in:
parent
d1ece53731
commit
0c9f0f0240
@ -6,7 +6,7 @@ import {FilterGroup} from '../filterGroup'
|
||||
import {MutableBlock} from './block'
|
||||
|
||||
type IViewType = 'board' | 'table' // | 'calendar' | 'list' | 'gallery'
|
||||
type ISortOption = { propertyId: '__name' | string, reversed: boolean }
|
||||
type ISortOption = { propertyId: '__title' | string, reversed: boolean }
|
||||
|
||||
interface BoardView extends IBlock {
|
||||
readonly viewType: IViewType
|
||||
|
@ -64,6 +64,12 @@ class TableComponent extends React.Component<Props, State> {
|
||||
const {board, cards, activeView} = boardTree
|
||||
const titleRef = React.createRef<HTMLDivElement>()
|
||||
|
||||
let titleSortIcon = undefined
|
||||
const titleSortOption = activeView.sortOptions.find(o => o.propertyId === Constants.titleColumnId)
|
||||
if (titleSortOption) {
|
||||
titleSortIcon = titleSortOption.reversed ? <SortUpIcon /> : <SortDownIcon />
|
||||
}
|
||||
|
||||
this.cardIdToRowMap.clear()
|
||||
|
||||
return (
|
||||
@ -115,10 +121,11 @@ class TableComponent extends React.Component<Props, State> {
|
||||
id='TableComponent.name'
|
||||
defaultMessage='Name'
|
||||
/>
|
||||
{titleSortIcon}
|
||||
</div>
|
||||
<TableHeaderMenu
|
||||
boardTree={boardTree}
|
||||
templateId='__name'
|
||||
templateId={Constants.titleColumnId}
|
||||
/>
|
||||
</MenuWrapper>
|
||||
|
||||
|
@ -3,6 +3,7 @@
|
||||
//
|
||||
import React, {FC} from 'react'
|
||||
import {injectIntl, IntlShape} from 'react-intl'
|
||||
import { Constants } from '../constants'
|
||||
|
||||
import mutator from '../mutator'
|
||||
import {BoardTree} from '../viewModel/boardTree'
|
||||
@ -33,7 +34,7 @@ const TableHeaderMenu: FC<Props> = (props: Props): JSX.Element => {
|
||||
id='insertLeft'
|
||||
name={intl.formatMessage({id: 'TableHeaderMenu.insert-left', defaultMessage: 'Insert left'})}
|
||||
onClick={() => {
|
||||
if (props.templateId === '__name') {
|
||||
if (props.templateId === Constants.titleColumnId) {
|
||||
// TODO: Handle name column
|
||||
} else {
|
||||
const index = board.cardProperties.findIndex((o) => o.id === templateId)
|
||||
@ -45,15 +46,15 @@ const TableHeaderMenu: FC<Props> = (props: Props): JSX.Element => {
|
||||
id='insertRight'
|
||||
name={intl.formatMessage({id: 'TableHeaderMenu.insert-right', defaultMessage: 'Insert right'})}
|
||||
onClick={() => {
|
||||
if (templateId === '__name') {
|
||||
// TODO: Handle name column
|
||||
if (templateId === Constants.titleColumnId) {
|
||||
// TODO: Handle title column
|
||||
} else {
|
||||
const index = board.cardProperties.findIndex((o) => o.id === templateId) + 1
|
||||
mutator.insertPropertyTemplate(boardTree, index)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{props.templateId !== '__name' &&
|
||||
{props.templateId !== Constants.titleColumnId &&
|
||||
<>
|
||||
<Menu.Text
|
||||
id='hide'
|
||||
|
@ -30,6 +30,7 @@ import FilterComponent from './filterComponent'
|
||||
|
||||
import './viewHeader.scss'
|
||||
import {sendFlashMessage} from './flashMessages'
|
||||
import { Constants } from '../constants'
|
||||
|
||||
type Props = {
|
||||
boardTree?: BoardTree
|
||||
@ -264,7 +265,7 @@ class ViewHeader extends React.Component<Props, State> {
|
||||
</>
|
||||
}
|
||||
|
||||
{boardTree.board.cardProperties.map((option: IPropertyTemplate) => (
|
||||
{this.sortDisplayOptions().map((option) => (
|
||||
<Menu.Text
|
||||
key={option.id}
|
||||
id={option.id}
|
||||
@ -368,6 +369,15 @@ class ViewHeader extends React.Component<Props, State> {
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
private sortDisplayOptions() {
|
||||
const {boardTree} = this.props
|
||||
|
||||
const options = boardTree.board.cardProperties.map((o) => ({id: o.id, name: o.name}))
|
||||
options.unshift({id: Constants.titleColumnId, name: 'Name'})
|
||||
|
||||
return options
|
||||
}
|
||||
}
|
||||
|
||||
export default injectIntl(ViewHeader)
|
||||
|
@ -4,6 +4,7 @@ import {Board, IPropertyOption, IPropertyTemplate, MutableBoard} from '../blocks
|
||||
import {BoardView, MutableBoardView} from '../blocks/boardView'
|
||||
import {Card, MutableCard} from '../blocks/card'
|
||||
import {CardFilter} from '../cardFilter'
|
||||
import { Constants } from '../constants'
|
||||
import octoClient from '../octoClient'
|
||||
import {IBlock, IMutableBlock} from '../blocks/block'
|
||||
import {OctoUtils} from '../octoUtils'
|
||||
@ -269,7 +270,7 @@ class MutableBoardTree implements BoardTree {
|
||||
sortedCards = cards.sort((a, b) => this.defaultOrder(a, b))
|
||||
} else {
|
||||
sortOptions.forEach((sortOption) => {
|
||||
if (sortOption.propertyId === '__name') {
|
||||
if (sortOption.propertyId === Constants.titleColumnId) {
|
||||
Utils.log('Sort by name')
|
||||
sortedCards = cards.sort((a, b) => {
|
||||
const aValue = a.title || ''
|
||||
|
Loading…
Reference in New Issue
Block a user