luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Allow sort by name (title) in menu

Browse source
This commit is contained in:
Chen-I Lim 2020-11-04 11:21:09 -08:00
parent d1ece53731
commit 0c9f0f0240
5 changed files with 27 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webapp/src/blocks/boardView.ts
View file

@ -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

9
webapp/src/components/tableComponent.tsx
View file

@ -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>

9
webapp/src/components/tableHeaderMenu.tsx
View file

@ -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'

12
webapp/src/components/viewHeader.tsx
View file

@ -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)

3
webapp/src/viewModel/boardTree.ts
View file

@ -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 || ''