diff --git a/webapp/src/blocks/boardView.ts b/webapp/src/blocks/boardView.ts index 545846da3..789fb55b9 100644 --- a/webapp/src/blocks/boardView.ts +++ b/webapp/src/blocks/boardView.ts @@ -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 diff --git a/webapp/src/components/tableComponent.tsx b/webapp/src/components/tableComponent.tsx index 58caf4bf6..88a7782e9 100644 --- a/webapp/src/components/tableComponent.tsx +++ b/webapp/src/components/tableComponent.tsx @@ -64,6 +64,12 @@ class TableComponent extends React.Component { const {board, cards, activeView} = boardTree const titleRef = React.createRef() + let titleSortIcon = undefined + const titleSortOption = activeView.sortOptions.find(o => o.propertyId === Constants.titleColumnId) + if (titleSortOption) { + titleSortIcon = titleSortOption.reversed ? : + } + this.cardIdToRowMap.clear() return ( @@ -115,10 +121,11 @@ class TableComponent extends React.Component { id='TableComponent.name' defaultMessage='Name' /> + {titleSortIcon} diff --git a/webapp/src/components/tableHeaderMenu.tsx b/webapp/src/components/tableHeaderMenu.tsx index 5d73bc637..d135fc531 100644 --- a/webapp/src/components/tableHeaderMenu.tsx +++ b/webapp/src/components/tableHeaderMenu.tsx @@ -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): 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): 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 && <> { } - {boardTree.board.cardProperties.map((option: IPropertyTemplate) => ( + {this.sortDisplayOptions().map((option) => ( { ) } + + 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) diff --git a/webapp/src/viewModel/boardTree.ts b/webapp/src/viewModel/boardTree.ts index ea8dbd7b6..e4263b7bd 100644 --- a/webapp/src/viewModel/boardTree.ts +++ b/webapp/src/viewModel/boardTree.ts @@ -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 || ''