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

Refactor: Move sort menu to OctoUtils

Browse source
This commit is contained in:
Chen-I Lim 2020-10-12 09:32:36 -07:00
parent 187df20be7
commit 63c7763b41
3 changed files with 37 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/client/components/boardComponent.tsx
View file

@ -96,7 +96,7 @@ class BoardComponent extends React.Component<Props, State> {
Group by <span style={groupByStyle} id="groupByLabel">{boardTree.groupByProperty?.name}</span>
</div>
<div className={hasFilter ? "octo-button active" : "octo-button"} onClick={(e) => { this.filterClicked(e) }}>Filter</div>
<div className={hasSort ? "octo-button active" : "octo-button"} onClick={(e) => { this.sortClicked(e) }}>Sort</div>
<div className={hasSort ? "octo-button active" : "octo-button"} onClick={(e) => { OctoUtils.showSortMenu(e, mutator, boardTree) }}>Sort</div>
{this.state.isSearching
? <Editable
ref={this.searchFieldRef}
@ -275,38 +275,6 @@ class BoardComponent extends React.Component<Props, State> {
pageController.showFilter(e.target as HTMLElement)
}
private async sortClicked(e: React.MouseEvent) {
const { mutator, boardTree } = this.props
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)
}
private async optionsClicked(e: React.MouseEvent) {
const { boardTree } = this.props

34
src/client/components/tableComponent.tsx
View file

@ -90,7 +90,7 @@ class TableComponent extends React.Component<Props, State> {
<div className="octo-spacer"></div>
<div className="octo-button" onClick={(e) => { this.propertiesClicked(e) }}>Properties</div>
<div className={ hasFilter ? "octo-button active" : "octo-button"} onClick={(e) => { this.filterClicked(e) }}>Filter</div>
<div className={ hasSort ? "octo-button active" : "octo-button"} onClick={(e) => { this.sortClicked(e) }}>Sort</div>
<div className={ hasSort ? "octo-button active" : "octo-button"} onClick={(e) => { OctoUtils.showSortMenu(e, mutator, boardTree) }}>Sort</div>
{this.state.isSearching
? <Editable
ref={this.searchFieldRef}
@ -248,38 +248,6 @@ class TableComponent extends React.Component<Props, State> {
pageController.showFilter(e.target as HTMLElement)
}
private async sortClicked(e: React.MouseEvent) {
const { mutator, boardTree } = this.props
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)
}
private async optionsClicked(e: React.MouseEvent) {
const { boardTree } = this.props

39
src/client/octoUtils.tsx
View file

@ -1,7 +1,7 @@
import React from "react"
import { IPropertyTemplate } from "./board"
import { BoardTree } from "./boardTree"
import { BoardView } from "./boardView"
import { BoardView, ISortOption } from "./boardView"
import { Editable } from "./components/editable"
import { Menu, MenuOption } from "./menu"
import { Mutator } from "./mutator"
@ -143,7 +143,7 @@ class OctoUtils {
showMenu(e.target as HTMLElement)
}
} : undefined}
onFocus={mutator ? () => { Menu.shared.hide() } : undefined }
onFocus={mutator ? () => { Menu.shared.hide() } : undefined}
>
{finalDisplayValue}
</div>
@ -176,7 +176,7 @@ class OctoUtils {
if (index === 0) {
return block.order / 2
}
const previousBlock = blocks[index-1]
const previousBlock = blocks[index - 1]
return (block.order + previousBlock.order) / 2
}
@ -185,9 +185,40 @@ class OctoUtils {
if (index === blocks.length - 1) {
return block.order + 1000
}
const nextBlock = blocks[index+1]
const nextBlock = blocks[index + 1]
return (block.order + nextBlock.order) / 2
}
static showSortMenu(e: React.MouseEvent, mutator: Mutator, 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)
}
}
export { OctoUtils }