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

Extracting filterValue from filterComponent in the viewHeader

Browse source
This commit is contained in:
Jesús Espino 2021-04-09 18:20:19 +02:00
parent c065067a62
commit 5a56c40d36
3 changed files with 81 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
webapp/src/components/viewHeader/filterComponent.tsx
View file

@ -3,7 +3,6 @@
import React from 'react'
import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
import {IPropertyTemplate} from '../../blocks/board'
import {FilterClause, FilterCondition} from '../../blocks/filterClause'
import {FilterGroup} from '../../blocks/filterGroup'
import mutator from '../../mutator'
@ -16,6 +15,8 @@ import MenuWrapper from '../../widgets/menuWrapper'
import Modal from '../modal'
import FilterValue from './filterValue'
import './filterComponent.scss'
type Props = {
@ -117,9 +118,12 @@ class FilterComponent extends React.Component<Props> {
/>
</Menu>
</MenuWrapper>
{
template && this.filterValue(filter, template)
}
{template &&
<FilterValue
filter={filter}
template={template}
view={activeView}
/>}
<div className='octo-spacer'/>
<Button onClick={() => this.deleteClicked(filter)}>
<FormattedMessage
@ -143,56 +147,6 @@ class FilterComponent extends React.Component<Props> {
)
}
private filterValue(filter: FilterClause, template: IPropertyTemplate): JSX.Element | undefined {
const {boardTree} = this.props
const {activeView: view} = boardTree
if (filter.condition === 'includes' || filter.condition === 'notIncludes') {
let displayValue: string
if (filter.values.length > 0) {
displayValue = filter.values.map((id) => {
const option = template.options.find((o) => o.id === id)
return option?.value || '(Unknown)'
}).join(', ')
} else {
displayValue = '(empty)'
}
return (
<MenuWrapper>
<Button>{displayValue}</Button>
<Menu>
{template.options.map((o) => (
<Menu.Switch
key={o.id}
id={o.id}
name={o.value}
isOn={filter.values.includes(o.id)}
onClick={(optionId) => {
const filterIndex = view.filter.filters.indexOf(filter)
Utils.assert(filterIndex >= 0, "Can't find filter")
const filterGroup = new FilterGroup(view.filter)
const newFilter = filterGroup.filters[filterIndex] as FilterClause
Utils.assert(newFilter, `No filter at index ${filterIndex}`)
if (filter.values.includes(o.id)) {
newFilter.values = newFilter.values.filter((id) => id !== optionId)
mutator.changeViewFilter(view, filterGroup)
} else {
newFilter.values.push(optionId)
mutator.changeViewFilter(view, filterGroup)
}
}}
/>
))}
</Menu>
</MenuWrapper>
)
}
return undefined
}
private deleteClicked(filter: FilterClause) {
const {boardTree} = this.props
const {activeView: view} = boardTree

2
webapp/src/components/viewHeader/filterValue.scss Normal file
View file

@ -0,0 +1,2 @@
.FilterValue {
}

71
webapp/src/components/viewHeader/filterValue.tsx Normal file
View file

@ -0,0 +1,71 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import {IPropertyTemplate} from '../../blocks/board'
import {FilterClause} from '../../blocks/filterClause'
import {FilterGroup} from '../../blocks/filterGroup'
import {BoardView} from '../../blocks/boardView'
import mutator from '../../mutator'
import {Utils} from '../../utils'
import Button from '../../widgets/buttons/button'
import Menu from '../../widgets/menu'
import MenuWrapper from '../../widgets/menuWrapper'
import './filterValue.scss'
type Props = {
view: BoardView
filter: FilterClause
template: IPropertyTemplate
}
const filterValue = (props: Props): JSX.Element|null => {
const {filter, template, view} = props
if (filter.condition !== 'includes' && filter.condition !== 'notIncludes') {
return null
}
let displayValue: string
if (filter.values.length > 0) {
displayValue = filter.values.map((id) => {
const option = template.options.find((o) => o.id === id)
return option?.value || '(Unknown)'
}).join(', ')
} else {
displayValue = '(empty)'
}
return (
<MenuWrapper>
<Button>{displayValue}</Button>
<Menu>
{template.options.map((o) => (
<Menu.Switch
key={o.id}
id={o.id}
name={o.value}
isOn={filter.values.includes(o.id)}
onClick={(optionId) => {
const filterIndex = view.filter.filters.indexOf(filter)
Utils.assert(filterIndex >= 0, "Can't find filter")
const filterGroup = new FilterGroup(view.filter)
const newFilter = filterGroup.filters[filterIndex] as FilterClause
Utils.assert(newFilter, `No filter at index ${filterIndex}`)
if (filter.values.includes(o.id)) {
newFilter.values = newFilter.values.filter((id) => id !== optionId)
mutator.changeViewFilter(view, filterGroup)
} else {
newFilter.values.push(optionId)
mutator.changeViewFilter(view, filterGroup)
}
}}
/>
))}
</Menu>
</MenuWrapper>
)
}
export default filterValue