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

Extracting card detail properties in its own component

Browse source
This commit is contained in:
Jesús Espino 2021-03-29 12:27:55 +02:00
parent faf7e6d551
commit 3f695b4659
2 changed files with 86 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
webapp/src/components/cardDetail/cardDetail.tsx
View file

@ -5,7 +5,6 @@ import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
import {BlockIcons} from '../../blockIcons'
import {BlockTypes} from '../../blocks/block'
import {PropertyType} from '../../blocks/board'
import mutator from '../../mutator'
import {Utils} from '../../utils'
import {BoardTree} from '../../viewModel/boardTree'
@ -15,14 +14,13 @@ import Editable from '../../widgets/editable'
import EmojiIcon from '../../widgets/icons/emoji'
import Menu from '../../widgets/menu'
import MenuWrapper from '../../widgets/menuWrapper'
import PropertyMenu from '../../widgets/propertyMenu'
import BlockIconSelector from '../blockIconSelector'
import CommentsList from '../commentsList'
import {ContentHandler, contentRegistry} from '../content/contentRegistry'
import PropertyValueElement from '../propertyValueElement'
import CardDetailContents from './cardDetailContents'
import CardDetailProperties from './cardDetailProperties'
import './cardDetail.scss'
@ -120,55 +118,11 @@ class CardDetail extends React.Component<Props, State> {
{/* Property list */}
<div className='octo-propertylist'>
{board.cardProperties.map((propertyTemplate) => {
const propertyValue = card.properties[propertyTemplate.id]
return (
<div
key={propertyTemplate.id + '-' + propertyTemplate.type + '-' + propertyValue}
className='octo-propertyrow'
>
{this.props.readonly && <div className='octo-propertyname'>{propertyTemplate.name}</div>}
{!this.props.readonly &&
<MenuWrapper>
<div className='octo-propertyname'><Button>{propertyTemplate.name}</Button></div>
<PropertyMenu
propertyId={propertyTemplate.id}
propertyName={propertyTemplate.name}
propertyType={propertyTemplate.type}
onNameChanged={(newName: string) => mutator.renameProperty(board, propertyTemplate.id, newName)}
onTypeChanged={(newType: PropertyType) => mutator.changePropertyType(boardTree, propertyTemplate, newType)}
onDelete={(id: string) => mutator.deleteProperty(boardTree, id)}
/>
</MenuWrapper>
}
<PropertyValueElement
readOnly={this.props.readonly}
card={card}
boardTree={boardTree}
propertyTemplate={propertyTemplate}
emptyDisplayValue='Empty'
/>
</div>
)
})}
{!this.props.readonly &&
<div className='octo-propertyname add-property'>
<Button
onClick={async () => {
// TODO: Show UI
await mutator.insertPropertyTemplate(boardTree)
}}
>
<FormattedMessage
id='CardDetail.add-property'
defaultMessage='+ Add a property'
/>
</Button>
</div>
}
</div>
<CardDetailProperties
boardTree={this.props.boardTree}
cardTree={this.props.cardTree}
readonly={this.props.readonly}
/>
{/* Comments */}

80
webapp/src/components/cardDetail/cardDetailProperties.tsx Normal file
View file

@ -0,0 +1,80 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import {FormattedMessage} from 'react-intl'
import {PropertyType} from '../../blocks/board'
import mutator from '../../mutator'
import {BoardTree} from '../../viewModel/boardTree'
import {CardTree} from '../../viewModel/cardTree'
import Button from '../../widgets/buttons/button'
import MenuWrapper from '../../widgets/menuWrapper'
import PropertyMenu from '../../widgets/propertyMenu'
import PropertyValueElement from '../propertyValueElement'
type Props = {
boardTree: BoardTree
cardTree: CardTree
readonly: boolean
}
const CardDetailProperties = React.memo((props: Props) => {
const {boardTree, cardTree} = props
const {board} = boardTree
const {card} = cardTree
return (
<div className='octo-propertylist'>
{board.cardProperties.map((propertyTemplate) => {
const propertyValue = card.properties[propertyTemplate.id]
return (
<div
key={propertyTemplate.id + '-' + propertyTemplate.type + '-' + propertyValue}
className='octo-propertyrow'
>
{props.readonly && <div className='octo-propertyname'>{propertyTemplate.name}</div>}
{!props.readonly &&
<MenuWrapper>
<div className='octo-propertyname'><Button>{propertyTemplate.name}</Button></div>
<PropertyMenu
propertyId={propertyTemplate.id}
propertyName={propertyTemplate.name}
propertyType={propertyTemplate.type}
onNameChanged={(newName: string) => mutator.renameProperty(board, propertyTemplate.id, newName)}
onTypeChanged={(newType: PropertyType) => mutator.changePropertyType(boardTree, propertyTemplate, newType)}
onDelete={(id: string) => mutator.deleteProperty(boardTree, id)}
/>
</MenuWrapper>
}
<PropertyValueElement
readOnly={props.readonly}
card={card}
boardTree={boardTree}
propertyTemplate={propertyTemplate}
emptyDisplayValue='Empty'
/>
</div>
)
})}
{!props.readonly &&
<div className='octo-propertyname add-property'>
<Button
onClick={async () => {
// TODO: Show UI
await mutator.insertPropertyTemplate(boardTree)
}}
>
<FormattedMessage
id='CardDetail.add-property'
defaultMessage='+ Add a property'
/>
</Button>
</div>
}
</div>
)
})
export default CardDetailProperties