Allow sort by name (title) in menu

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

webapp/src/components/tableComponent.tsx

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

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

webapp/src/components/viewHeader.tsx

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

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