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

Extracting boardTemplateMenuItem into its own component

Browse Source
This commit is contained in:
Jesús Espino 2021-03-31 11:23:26 +02:00
parent bb7e41ff35
commit 8222035f5b
2 changed files with 102 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
webapp/src/components/sidebar/boardTemplateMenuItem.tsx Normal file
View File

@ -0,0 +1,84 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import {injectIntl, IntlShape} from 'react-intl'
import {Board} from '../../blocks/board'
import mutator from '../../mutator'
import IconButton from '../../widgets/buttons/iconButton'
import DeleteIcon from '../../widgets/icons/delete'
import EditIcon from '../../widgets/icons/edit'
import OptionsIcon from '../../widgets/icons/options'
import Menu from '../../widgets/menu'
import MenuWrapper from '../../widgets/menuWrapper'
type Props = {
boardTemplate: Board
isGlobal: boolean
showBoard: (id: string) => void
activeBoardId?: string
intl: IntlShape
}
const addBoardFromTemplate = async (intl: IntlShape, showBoard: (id: string) => void, boardTemplateId: string, activeBoardId?: string, global = false) => {
const oldBoardId = activeBoardId
const afterRedo = async (newBoardId) => {
showBoard(newBoardId)
}
const beforeUndo = async () => {
if (oldBoardId) {
showBoard(oldBoardId)
}
}
const asTemplate = false
const actionDescription = intl.formatMessage({id: 'Mutator.new-board-from-template', defaultMessage: 'new board from template'})
if (global) {
await mutator.duplicateFromRootBoard(boardTemplateId, actionDescription, asTemplate, afterRedo, beforeUndo)
} else {
await mutator.duplicateBoard(boardTemplateId, actionDescription, asTemplate, afterRedo, beforeUndo)
}
}
const BoardTemplateMenuItem = React.memo((props: Props) => {
const {intl, boardTemplate, isGlobal, activeBoardId} = props
const displayName = boardTemplate.title || intl.formatMessage({id: 'Sidebar.untitled', defaultMessage: 'Untitled'})
return (
<Menu.Text
key={boardTemplate.id}
id={boardTemplate.id}
name={displayName}
icon={<div className='Icon'>{boardTemplate.icon}</div>}
onClick={() => {
addBoardFromTemplate(intl, props.showBoard, boardTemplate.id, activeBoardId, isGlobal)
}}
rightIcon={!isGlobal &&
<MenuWrapper stopPropagationOnToggle={true}>
<IconButton icon={<OptionsIcon/>}/>
<Menu position='left'>
<Menu.Text
icon={<EditIcon/>}
id='edit'
name={intl.formatMessage({id: 'Sidebar.edit-template', defaultMessage: 'Edit'})}
onClick={() => {
props.showBoard(boardTemplate.id)
}}
/>
<Menu.Text
icon={<DeleteIcon/>}
id='delete'
name={intl.formatMessage({id: 'Sidebar.delete-template', defaultMessage: 'Delete'})}
onClick={async () => {
await mutator.deleteBlock(boardTemplate, 'delete board template')
}}
/>
</Menu>
</MenuWrapper>
}
/>
)
})
export default injectIntl(BoardTemplateMenuItem)

100
webapp/src/components/sidebar/sidebarAddBoardMenu.tsx
View File

@ -17,6 +17,8 @@ import OptionsIcon from '../../widgets/icons/options'
import Menu from '../../widgets/menu'
import MenuWrapper from '../../widgets/menuWrapper'
import BoardTemplateMenuItem from './boardTemplateMenuItem'
import './sidebarAddBoardMenu.scss'
type Props = {
@ -79,9 +81,23 @@ class SidebarAddBoardMenu extends React.Component<Props, State> {
<Menu.Separator/>
</>}
{workspaceTree.boardTemplates.map((boardTemplate) => this.renderBoardTemplate(boardTemplate))}
{workspaceTree.boardTemplates.map((boardTemplate) => (
<BoardTemplateMenuItem
boardTemplate={boardTemplate}
isGlobal={false}
showBoard={this.props.showBoard}
activeBoardId={this.props.activeBoardId}
/>
))}
{globalTemplateTree && globalTemplateTree.boardTemplates.map((boardTemplate) => this.renderBoardTemplate(boardTemplate, true))}
{globalTemplateTree && globalTemplateTree.boardTemplates.map((boardTemplate) => (
<BoardTemplateMenuItem
boardTemplate={boardTemplate}
isGlobal={true}
showBoard={this.props.showBoard}
activeBoardId={this.props.activeBoardId}
/>
))}
<Menu.Text
id='empty-template'
@ -101,50 +117,6 @@ class SidebarAddBoardMenu extends React.Component<Props, State> {
)
}
private renderBoardTemplate(boardTemplate: Board, isGlobal = false): JSX.Element {
const {intl} = this.props
const displayName = boardTemplate.title || intl.formatMessage({id: 'Sidebar.untitled', defaultMessage: 'Untitled'})
return (
<Menu.Text
key={boardTemplate.id}
id={boardTemplate.id}
name={displayName}
icon={<div className='Icon'>{boardTemplate.icon}</div>}
onClick={() => {
if (isGlobal) {
this.addBoardFromGlobalTemplate(boardTemplate.id)
} else {
this.addBoardFromTemplate(boardTemplate.id)
}
}}
rightIcon={!isGlobal &&
<MenuWrapper stopPropagationOnToggle={true}>
<IconButton icon={<OptionsIcon/>}/>
<Menu position='left'>
<Menu.Text
icon={<EditIcon/>}
id='edit'
name={intl.formatMessage({id: 'Sidebar.edit-template', defaultMessage: 'Edit'})}
onClick={() => {
this.props.showBoard(boardTemplate.id)
}}
/>
<Menu.Text
icon={<DeleteIcon/>}
id='delete'
name={intl.formatMessage({id: 'Sidebar.delete-template', defaultMessage: 'Delete'})}
onClick={async () => {
await mutator.deleteBlock(boardTemplate, 'delete board template')
}}
/>
</Menu>
</MenuWrapper>
}
/>
)
}
private addBoardClicked = async () => {
const {showBoard, intl} = this.props
@ -174,42 +146,6 @@ class SidebarAddBoardMenu extends React.Component<Props, State> {
)
}
private async addBoardFromGlobalTemplate(boardTemplateId: string) {
const oldBoardId = this.props.activeBoardId
await mutator.duplicateFromRootBoard(
boardTemplateId,
this.props.intl.formatMessage({id: 'Mutator.new-board-from-template', defaultMessage: 'new board from template'}),
false,
async (newBoardId) => {
this.props.showBoard(newBoardId)
},
async () => {
if (oldBoardId) {
this.props.showBoard(oldBoardId)
}
},
)
}
private async addBoardFromTemplate(boardTemplateId: string) {
const oldBoardId = this.props.activeBoardId
await mutator.duplicateBoard(
boardTemplateId,
this.props.intl.formatMessage({id: 'Mutator.new-board-from-template', defaultMessage: 'new board from template'}),
false,
async (newBoardId) => {
this.props.showBoard(newBoardId)
},
async () => {
if (oldBoardId) {
this.props.showBoard(oldBoardId)
}
},
)
}
private addBoardTemplateClicked = async () => {
const {activeBoardId} = this.props