Extracting boardTemplateMenuItem into its own component
This commit is contained in:
Jesús Espino
parent
bb7e41ff35
commit
8222035f5b
2 changed files with 102 additions and 82 deletions
84
webapp/src/components/sidebar/boardTemplateMenuItem.tsx
Normal file
84
webapp/src/components/sidebar/boardTemplateMenuItem.tsx
Normal 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)
|
||||||
|
|
@ -17,6 +17,8 @@ import OptionsIcon from '../../widgets/icons/options'
|
||||||
import Menu from '../../widgets/menu'
|
import Menu from '../../widgets/menu'
|
||||||
import MenuWrapper from '../../widgets/menuWrapper'
|
import MenuWrapper from '../../widgets/menuWrapper'
|
||||||
|
|
||||||
|
import BoardTemplateMenuItem from './boardTemplateMenuItem'
|
||||||
|
|
||||||
import './sidebarAddBoardMenu.scss'
|
import './sidebarAddBoardMenu.scss'
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
|
@ -79,9 +81,23 @@ class SidebarAddBoardMenu extends React.Component<Props, State> {
|
||||||
<Menu.Separator/>
|
<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
|
<Menu.Text
|
||||||
id='empty-template'
|
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 () => {
|
private addBoardClicked = async () => {
|
||||||
const {showBoard, intl} = this.props
|
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 () => {
|
private addBoardTemplateClicked = async () => {
|
||||||
const {activeBoardId} = this.props
|
const {activeBoardId} = this.props
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue