Moving table header name menu into the new menu system
This commit is contained in:
Jesús Espino
parent
2e0a8691f1
commit
f295c783f7
2 changed files with 107 additions and 94 deletions
|
|
@ -7,16 +7,18 @@ import {BlockIcons} from '../blockIcons'
|
|||
import {IPropertyTemplate} from '../blocks/board'
|
||||
import {Card, MutableCard} from '../blocks/card'
|
||||
import {BoardTree} from '../viewModel/boardTree'
|
||||
import {Menu as OldMenu} from '../menu'
|
||||
import mutator from '../mutator'
|
||||
import {Utils} from '../utils'
|
||||
|
||||
import MenuWrapper from '../widgets/menuWrapper'
|
||||
|
||||
import {CardDialog} from './cardDialog'
|
||||
import {Editable} from './editable'
|
||||
import RootPortal from './rootPortal'
|
||||
import {TableRow} from './tableRow'
|
||||
import ViewHeader from './viewHeader'
|
||||
import ViewTitle from './viewTitle'
|
||||
import TableHeaderMenu from './tableHeaderMenu'
|
||||
|
||||
type Props = {
|
||||
boardTree?: BoardTree
|
||||
|
|
@ -103,20 +105,24 @@ class TableComponent extends React.Component<Props, State> {
|
|||
>
|
||||
<div
|
||||
className='octo-table-cell title-cell'
|
||||
style={{overflow: 'unset'}}
|
||||
id='mainBoardHeader'
|
||||
>
|
||||
<div
|
||||
className='octo-label'
|
||||
style={{cursor: 'pointer'}}
|
||||
onClick={(e) => {
|
||||
this.headerClicked(e, '__name')
|
||||
}}
|
||||
>
|
||||
<FormattedMessage
|
||||
id='TableComponent.name'
|
||||
defaultMessage='Name'
|
||||
<MenuWrapper>
|
||||
<div
|
||||
className='octo-label'
|
||||
style={{cursor: 'pointer'}}
|
||||
>
|
||||
<FormattedMessage
|
||||
id='TableComponent.name'
|
||||
defaultMessage='Name'
|
||||
/>
|
||||
</div>
|
||||
<TableHeaderMenu
|
||||
boardTree={boardTree}
|
||||
templateId='__name'
|
||||
/>
|
||||
</div>
|
||||
</MenuWrapper>
|
||||
</div>
|
||||
|
||||
{board.cardProperties.
|
||||
|
|
@ -124,6 +130,7 @@ class TableComponent extends React.Component<Props, State> {
|
|||
map((template) =>
|
||||
(<div
|
||||
key={template.id}
|
||||
style={{overflow: 'unset'}}
|
||||
className='octo-table-cell'
|
||||
|
||||
draggable={true}
|
||||
|
|
@ -147,13 +154,16 @@ class TableComponent extends React.Component<Props, State> {
|
|||
e.preventDefault(); (e.target as HTMLElement).classList.remove('dragover'); this.onDropToColumn(template)
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className='octo-label'
|
||||
style={{cursor: 'pointer'}}
|
||||
onClick={(e) => {
|
||||
this.headerClicked(e, template.id)
|
||||
}}
|
||||
>{template.name}</div>
|
||||
<MenuWrapper>
|
||||
<div
|
||||
className='octo-label'
|
||||
style={{cursor: 'pointer'}}
|
||||
>{template.name}</div>
|
||||
<TableHeaderMenu
|
||||
boardTree={boardTree}
|
||||
templateId={template.id}
|
||||
/>
|
||||
</MenuWrapper>
|
||||
</div>),
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -213,81 +223,6 @@ class TableComponent extends React.Component<Props, State> {
|
|||
)
|
||||
}
|
||||
|
||||
private async headerClicked(e: React.MouseEvent<HTMLDivElement>, templateId: string) {
|
||||
const {boardTree} = this.props
|
||||
const {board} = boardTree
|
||||
const {activeView} = boardTree
|
||||
|
||||
const options = [
|
||||
{id: 'sortAscending', name: 'Sort ascending'},
|
||||
{id: 'sortDescending', name: 'Sort descending'},
|
||||
{id: 'insertLeft', name: 'Insert left'},
|
||||
{id: 'insertRight', name: 'Insert right'},
|
||||
]
|
||||
|
||||
if (templateId !== '__name') {
|
||||
options.push({id: 'hide', name: 'Hide'})
|
||||
options.push({id: 'duplicate', name: 'Duplicate'})
|
||||
options.push({id: 'delete', name: 'Delete'})
|
||||
}
|
||||
|
||||
OldMenu.shared.options = options
|
||||
OldMenu.shared.onMenuClicked = async (optionId: string, type?: string) => {
|
||||
switch (optionId) {
|
||||
case 'sortAscending': {
|
||||
const newSortOptions = [
|
||||
{propertyId: templateId, reversed: false},
|
||||
]
|
||||
await mutator.changeViewSortOptions(activeView, newSortOptions)
|
||||
break
|
||||
}
|
||||
case 'sortDescending': {
|
||||
const newSortOptions = [
|
||||
{propertyId: templateId, reversed: true},
|
||||
]
|
||||
await mutator.changeViewSortOptions(activeView, newSortOptions)
|
||||
break
|
||||
}
|
||||
case 'insertLeft': {
|
||||
if (templateId !== '__name') {
|
||||
const index = board.cardProperties.findIndex((o) => o.id === templateId)
|
||||
await mutator.insertPropertyTemplate(boardTree, index)
|
||||
} else {
|
||||
// TODO: Handle name column
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'insertRight': {
|
||||
if (templateId !== '__name') {
|
||||
const index = board.cardProperties.findIndex((o) => o.id === templateId) + 1
|
||||
await mutator.insertPropertyTemplate(boardTree, index)
|
||||
} else {
|
||||
// TODO: Handle name column
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'duplicate': {
|
||||
await mutator.duplicatePropertyTemplate(boardTree, templateId)
|
||||
break
|
||||
}
|
||||
case 'hide': {
|
||||
const newVisiblePropertyIds = activeView.visiblePropertyIds.filter((o) => o !== templateId)
|
||||
await mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds)
|
||||
break
|
||||
}
|
||||
case 'delete': {
|
||||
await mutator.deleteProperty(boardTree, templateId)
|
||||
break
|
||||
}
|
||||
default: {
|
||||
Utils.assertFailure(`Unexpected menu option: ${optionId}`)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
OldMenu.shared.showAtElement(e.target as HTMLElement)
|
||||
}
|
||||
|
||||
private focusOnCardTitle(cardId: string): void {
|
||||
const tableRowRef = this.cardIdToRowMap.get(cardId)
|
||||
Utils.log(`focusOnCardTitle, ${tableRowRef?.current ?? 'undefined'}`)
|
||||
|
|
|
|||
78
webapp/src/components/tableHeaderMenu.tsx
Normal file
78
webapp/src/components/tableHeaderMenu.tsx
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
//
|
||||
import React, {FC} from 'react'
|
||||
import {injectIntl, IntlShape} from 'react-intl'
|
||||
|
||||
import mutator from '../mutator'
|
||||
import {BoardTree} from '../viewModel/boardTree'
|
||||
import Menu from '../widgets/menu'
|
||||
|
||||
type Props = {
|
||||
templateId: string
|
||||
boardTree: BoardTree
|
||||
intl: IntlShape
|
||||
}
|
||||
|
||||
const TableHeaderMenu: FC<Props> = (props: Props): JSX.Element => {
|
||||
const {boardTree, templateId, intl} = props
|
||||
const {board, activeView} = boardTree
|
||||
return (
|
||||
<Menu>
|
||||
<Menu.Text
|
||||
id='sortAscending'
|
||||
name={intl.formatMessage({id: 'TableHeaderMenu.sort-ascending', defaultMessage: 'Sort ascending'})}
|
||||
onClick={() => mutator.changeViewSortOptions(activeView, [{propertyId: templateId, reversed: false}])}
|
||||
/>
|
||||
<Menu.Text
|
||||
id='sortDescending'
|
||||
name={intl.formatMessage({id: 'TableHeaderMenu.sort-descending', defaultMessage: 'Sort descending'})}
|
||||
onClick={() => mutator.changeViewSortOptions(activeView, [{propertyId: templateId, reversed: true}])}
|
||||
/>
|
||||
<Menu.Text
|
||||
id='insertLeft'
|
||||
name={intl.formatMessage({id: 'TableHeaderMenu.insert-left', defaultMessage: 'Insert left'})}
|
||||
onClick={() => {
|
||||
if (props.templateId === '__name') {
|
||||
// TODO: Handle name column
|
||||
} else {
|
||||
const index = board.cardProperties.findIndex((o) => o.id === templateId)
|
||||
mutator.insertPropertyTemplate(boardTree, index)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Menu.Text
|
||||
id='insertRight'
|
||||
name={intl.formatMessage({id: 'TableHeaderMenu.insert-right', defaultMessage: 'Insert right'})}
|
||||
onClick={() => {
|
||||
if (templateId === '__name') {
|
||||
// TODO: Handle name column
|
||||
} else {
|
||||
const index = board.cardProperties.findIndex((o) => o.id === templateId) + 1
|
||||
mutator.insertPropertyTemplate(boardTree, index)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{props.templateId !== '__name' &&
|
||||
<>
|
||||
<Menu.Text
|
||||
id='hide'
|
||||
name={intl.formatMessage({id: 'TableHeaderMenu.hide', defaultMessage: 'Hide'})}
|
||||
onClick={() => mutator.changeViewVisibleProperties(activeView, activeView.visiblePropertyIds.filter((o) => o !== templateId))}
|
||||
/>
|
||||
<Menu.Text
|
||||
id='duplicate'
|
||||
name={intl.formatMessage({id: 'TableHeaderMenu.duplicate', defaultMessage: 'Duplicate'})}
|
||||
onClick={() => mutator.duplicatePropertyTemplate(boardTree, templateId)}
|
||||
/>
|
||||
<Menu.Text
|
||||
id='delete'
|
||||
name={intl.formatMessage({id: 'TableHeaderMenu.delete', defaultMessage: 'Delete'})}
|
||||
onClick={() => mutator.deleteProperty(boardTree, templateId)}
|
||||
/>
|
||||
</>}
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
|
||||
export default injectIntl(TableHeaderMenu)
|
||||
Loading…
Reference in a new issue