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

Moving sort menu into the new menu system

Browse source
This commit is contained in:
Jesús Espino 2020-10-24 00:32:09 +02:00
parent 93bbc1343a
commit 5d1ce562f9
3 changed files with 67 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
webapp/src/components/boardComponent.tsx
View file

@ -2,8 +2,10 @@
// See LICENSE.txt for license information.
/* eslint-disable max-lines */
import React from 'react'
import {FormattedMessage} from 'react-intl'
import {Archiver} from '../archiver'
import {ISortOption} from '../blocks/boardView'
import {BlockIcons} from '../blockIcons'
import {IPropertyOption} from '../blocks/board'
import {Card, MutableCard} from '../blocks/card'
@ -13,7 +15,6 @@ import ViewMenu from '../components/viewMenu'
import {Constants} from '../constants'
import {Menu as OldMenu} from '../menu'
import mutator from '../mutator'
import {OctoUtils} from '../octoUtils'
import {Utils} from '../utils'
import Menu from '../widgets/menu'
import MenuWrapper from '../widgets/menuWrapper'
@ -219,12 +220,37 @@ class BoardComponent extends React.Component<Props, State> {
this.filterClicked(e)
}}
>Filter</div>
<div
className={hasSort ? 'octo-button active' : 'octo-button'}
onClick={(e) => {
OctoUtils.showSortMenu(e, boardTree)
}}
>Sort</div>
<MenuWrapper>
<div className={hasSort ? 'octo-button active' : 'octo-button'}>
<FormattedMessage
id='TableComponent.sort'
defaultMessage='Sort'
/>
</div>
<Menu>
{boardTree.board.cardProperties.map((option) => (
<Menu.Text
id={option.id}
name={option.name}
icon={(activeView.sortOptions[0]?.propertyId === option.id) ? activeView.sortOptions[0].reversed ? 'sortUp' : 'sortDown' : undefined}
onClick={(propertyId: string) => {
let newSortOptions: ISortOption[] = []
if (activeView.sortOptions[0] && activeView.sortOptions[0].propertyId === propertyId) {
// Already sorting by name, so reverse it
newSortOptions = [
{propertyId, reversed: !activeView.sortOptions[0].reversed},
]
} else {
newSortOptions = [
{propertyId, reversed: false},
]
}
mutator.changeViewSortOptions(activeView, newSortOptions)
}}
/>
))}
</Menu>
</MenuWrapper>
{this.state.isSearching ?
<Editable
ref={this.searchFieldRef}

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

@ -4,6 +4,7 @@ import React from 'react'
import {FormattedMessage} from 'react-intl'
import {Archiver} from '../archiver'
import {ISortOption} from '../blocks/boardView'
import {BlockIcons} from '../blockIcons'
import {IPropertyTemplate} from '../blocks/board'
import {Card, MutableCard} from '../blocks/card'
@ -12,7 +13,6 @@ import ViewMenu from '../components/viewMenu'
import {CsvExporter} from '../csvExporter'
import {Menu as OldMenu} from '../menu'
import mutator from '../mutator'
import {OctoUtils} from '../octoUtils'
import {Utils} from '../utils'
import Menu from '../widgets/menu'
import MenuWrapper from '../widgets/menuWrapper'
@ -207,17 +207,37 @@ class TableComponent extends React.Component<Props, State> {
defaultMessage='Filter'
/>
</div>
<div
className={hasSort ? 'octo-button active' : 'octo-button'}
onClick={(e) => {
OctoUtils.showSortMenu(e, boardTree)
}}
>
<FormattedMessage
id='TableComponent.sort'
defaultMessage='Sort'
/>
</div>
<MenuWrapper>
<div className={hasSort ? 'octo-button active' : 'octo-button'}>
<FormattedMessage
id='TableComponent.sort'
defaultMessage='Sort'
/>
</div>
<Menu>
{boardTree.board.cardProperties.map((option) => (
<Menu.Text
id={option.id}
name={option.name}
icon={(activeView.sortOptions[0]?.propertyId === option.id) ? activeView.sortOptions[0].reversed ? 'sortUp' : 'sortDown' : undefined}
onClick={(propertyId: string) => {
let newSortOptions: ISortOption[] = []
if (activeView.sortOptions[0] && activeView.sortOptions[0].propertyId === propertyId) {
// Already sorting by name, so reverse it
newSortOptions = [
{propertyId, reversed: !activeView.sortOptions[0].reversed},
]
} else {
newSortOptions = [
{propertyId, reversed: false},
]
}
mutator.changeViewSortOptions(activeView, newSortOptions)
}}
/>
))}
</Menu>
</MenuWrapper>
{this.state.isSearching &&
<FormattedMessage
id='TableComponent.search-text'

37
webapp/src/octoUtils.tsx
View file

@ -2,19 +2,17 @@
// See LICENSE.txt for license information.
import React from 'react'
import {MutableBlock} from './blocks/block'
import {IBlock, MutableBlock} from './blocks/block'
import {IPropertyTemplate, MutableBoard} from './blocks/board'
import {ISortOption, MutableBoardView} from './blocks/boardView'
import {MutableBoardView} from './blocks/boardView'
import {Card, MutableCard} from './blocks/card'
import {MutableCommentBlock} from './blocks/commentBlock'
import {MutableImageBlock} from './blocks/imageBlock'
import {IOrderedBlock} from './blocks/orderedBlock'
import {MutableTextBlock} from './blocks/textBlock'
import {BoardTree} from './viewModel/boardTree'
import {Editable} from './components/editable'
import {Menu} from './menu'
import mutator from './mutator'
import {IBlock} from './blocks/block'
import {Utils} from './utils'
class OctoUtils {
@ -154,37 +152,6 @@ class OctoUtils {
return (block.order + nextBlock.order) / 2
}
static showSortMenu(e: React.MouseEvent, boardTree: BoardTree) {
const {activeView} = boardTree
const {sortOptions} = activeView
const sortOption = sortOptions.length > 0 ? sortOptions[0] : undefined
const propertyTemplates = boardTree.board.cardProperties
Menu.shared.options = propertyTemplates.map((o) => {
return {
id: o.id,
name: o.name,
icon: (sortOption?.propertyId === o.id) ? sortOption.reversed ? 'sortUp' : 'sortDown' : undefined,
}
})
Menu.shared.onMenuClicked = async (propertyId: string) => {
let newSortOptions: ISortOption[] = []
if (sortOption && sortOption.propertyId === propertyId) {
// Already sorting by name, so reverse it
newSortOptions = [
{propertyId, reversed: !sortOption.reversed},
]
} else {
newSortOptions = [
{propertyId, reversed: false},
]
}
await mutator.changeViewSortOptions(activeView, newSortOptions)
}
Menu.shared.showAtElement(e.target as HTMLElement)
}
static hydrateBlock(block: IBlock): MutableBlock {
switch (block.type) {
case 'board': { return new MutableBoard(block) }