focalboard/webapp/src/components/cardDetail.tsx

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import {FormattedMessage, IntlShape, injectIntl} from 'react-intl'

import {BlockIcons} from '../blockIcons'
import {MutableCommentBlock} from '../blocks/commentBlock'
import {MutableTextBlock} from '../blocks/textBlock'
import {BoardTree} from '../viewModel/boardTree'
import {CardTree, MutableCardTree} from '../viewModel/cardTree'
import mutator from '../mutator'
import {OctoListener} from '../octoListener'
import {OctoUtils} from '../octoUtils'
import {PropertyMenu} from '../propertyMenu'
import {Utils} from '../utils'

import MenuWrapper from '../widgets/menuWrapper'
import Menu from '../widgets/menu'

import Button from './button'
import {Editable} from './editable'
import {MarkdownEditor} from './markdownEditor'
import ContentBlock from './contentBlock'
import Comment from './comment'

import './cardDetail.scss'

type Props = {
    boardTree: BoardTree
    cardId: string
    intl: IntlShape
}

type State = {
    cardTree?: CardTree
}

class CardDetail extends React.Component<Props, State> {
    private titleRef = React.createRef<Editable>()
    private cardListener?: OctoListener

    shouldComponentUpdate() {
        return true
    }

    constructor(props: Props) {
        super(props)
        this.state = {}
    }

    componentDidMount() {
        this.cardListener = new OctoListener()
        this.cardListener.open([this.props.cardId], async (blockId) => {
            Utils.log(`cardListener.onChanged: ${blockId}`)
            await cardTree.sync()
            this.setState({...this.state, cardTree})
        })
        const cardTree = new MutableCardTree(this.props.cardId)
        cardTree.sync().then(() => {
            this.setState({...this.state, cardTree})
            setTimeout(() => {
                if (this.titleRef.current) {
                    this.titleRef.current.focus()
                }
            }, 0)
        })
    }

    componentWillUnmount() {
        this.cardListener?.close()
        this.cardListener = undefined
    }

    render() {
        const {boardTree, intl} = this.props
        const {cardTree} = this.state
        const {board} = boardTree
        if (!cardTree) {
            return null
        }
        const {card, comments} = cardTree

        const newCommentRef = React.createRef<Editable>()
        const sendCommentButtonRef = React.createRef<HTMLDivElement>()
        let contentElements
        if (cardTree.contents.length > 0) {
            contentElements =
                (<div className='octo-content'>
                    {cardTree.contents.map((block) => (
                        <ContentBlock
                            key={block.id}
                            block={block}
                            cardId={card.id}
                            cardTree={cardTree}
                        />
                    ))}
                </div>)
        } else {
            contentElements = (<div className='octo-content'>
                <div className='octo-block octo-hover-container'>
                    <div className='octo-block-margin'/>
                    <MarkdownEditor
                        text=''
                        placeholderText='Add a description...'
                        onChanged={(text) => {
                            const block = new MutableTextBlock()
                            block.parentId = card.id
                            block.title = text
                            block.order = cardTree.contents.length * 1000
                            mutator.insertBlock(block, 'add card text')
                        }}
                    />
                </div>
            </div>)
        }

        const icon = card.icon

        // TODO: Replace this placeholder
        const username = 'John Smith'
        const userImageUrl = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="fill: rgb(192, 192, 192);"><rect width="100" height="100" /></svg>'

        return (
            <>
                <div className='CardDetail content'>
                    {icon &&
                        <MenuWrapper>
                            <div className='octo-button octo-icon octo-card-icon'>{icon}</div>
                            <Menu>
                                <Menu.Text
                                    id='random'
                                    name={intl.formatMessage({id: 'CardDetail.random-icon', defaultMessage: 'Random'})}
                                    onClick={() => mutator.changeIcon(card, BlockIcons.shared.randomIcon())}
                                />
                                <Menu.Text
                                    id='remove'
                                    name={intl.formatMessage({id: 'CardDetail.remove-icon', defaultMessage: 'Remove Icon'})}
                                    onClick={() => mutator.changeIcon(card, undefined, 'remove icon')}
                                />
                            </Menu>
                        </MenuWrapper>}
                    {!icon &&
                        <div className='octo-hovercontrols'>
                            <Button
                                onClick={() => {
                                    const newIcon = BlockIcons.shared.randomIcon()
                                    mutator.changeIcon(card, newIcon)
                            }}>
                                <FormattedMessage
                                    id='CardDetail.add-icon'
                                    defaultMessage='Add Icon'
                                />
                            </Button>
                        </div>}

                    <Editable
                        ref={this.titleRef}
                        className='title'
                        text={card.title}
                        placeholderText='Untitled'
                        onChanged={(text) => {
                            mutator.changeTitle(card, text)
                        }}
                    />

                    {/* Property list */}

                    <div className='octo-propertylist'>
                        {board.cardProperties.map((propertyTemplate) => {
                            return (
                                <div
                                    key={propertyTemplate.id}
                                    className='octo-propertyrow'
                                >
                                    <div
                                        className='octo-button octo-propertyname'
                                        onClick={(e) => {
                                            const menu = PropertyMenu.shared
                                            menu.property = propertyTemplate
                                            menu.onNameChanged = (propertyName) => {
                                                Utils.log('menu.onNameChanged')
                                                mutator.renameProperty(board, propertyTemplate.id, propertyName)
                                            }

                                            menu.onMenuClicked = async (command) => {
                                                switch (command) {
                                                case 'type-text':
                                                    await mutator.changePropertyType(board, propertyTemplate, 'text')
                                                    break
                                                case 'type-number':
                                                    await mutator.changePropertyType(board, propertyTemplate, 'number')
                                                    break
                                                case 'type-createdTime':
                                                    await mutator.changePropertyType(board, propertyTemplate, 'createdTime')
                                                    break
                                                case 'type-updatedTime':
                                                    await mutator.changePropertyType(board, propertyTemplate, 'updatedTime')
                                                    break
                                                case 'type-select':
                                                    await mutator.changePropertyType(board, propertyTemplate, 'select')
                                                    break
                                                case 'delete':
                                                    await mutator.deleteProperty(boardTree, propertyTemplate.id)
                                                    break
                                                default:
                                                    Utils.assertFailure(`Unhandled menu id: ${command}`)
                                                }
                                            }
                                            menu.showAtElement(e.target as HTMLElement)
                                        }}
                                    >{propertyTemplate.name}</div>
                                    {OctoUtils.propertyValueEditableElement(card, propertyTemplate)}
                                </div>
                            )
                        })}

                        <div
                            className='octo-button octo-propertyname'
                            style={{textAlign: 'left', width: '150px', color: 'rgba(55, 53, 37, 0.4)'}}
                            onClick={async () => {
                                // TODO: Show UI
                                await mutator.insertPropertyTemplate(boardTree)
                            }}
                        >+ Add a property</div>
                    </div>

                    {/* Comments */}

                    <hr/>
                    <div className='commentlist'>
                        {comments.map((comment) => (
                            <Comment
                                key={comment.id}
                                comment={comment}
                                userImageUrl={userImageUrl}
                                username={username}
                            />
                        ))}

                        {/* New comment */}

                        <div className='commentrow'>
                            <img
                                className='comment-avatar'
                                src={userImageUrl}
                            />
                            <Editable
                                ref={newCommentRef}
                                className='newcomment'
                                placeholderText={intl.formatMessage({id: 'CardDetail.new-comment-placeholder', defaultMessage: 'Add a comment...'})}
                                onChanged={(text) => { }}
                                onFocus={() => {
                                    sendCommentButtonRef.current.style.display = null
                                }}
                                onBlur={() => {
                                    if (!newCommentRef.current.text) {
                                        sendCommentButtonRef.current.style.display = 'none'
                                    }
                                }}
                                onKeyDown={(e) => {
                                    if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
                                        sendCommentButtonRef.current.click()
                                    }
                                }}
                            />

                            <div
                                ref={sendCommentButtonRef}
                                className='octo-button filled'
                                style={{display: 'none'}}
                                onClick={(e) => {
                                    const text = newCommentRef.current.text
                                    Utils.log(`Send comment: ${newCommentRef.current.text}`)
                                    this.sendComment(text)
                                    newCommentRef.current.text = undefined
                                    newCommentRef.current.blur()
                                }}
                            >Send</div>
                        </div>
                    </div>

                    <hr/>
                </div>

                {/* Content blocks */}

                <div className='CardDetail content fullwidth'>
                    {contentElements}
                </div>

                <div className='CardDetail content'>
                    <div className='octo-hoverpanel octo-hover-container'>
                        <MenuWrapper>
                            <div className='octo-button octo-hovercontrol octo-hover-item'>
                                <FormattedMessage
                                    id='CardDetail.add-content'
                                    defaultMessage='Add content'
                                />
                            </div>
                            <Menu>
                                <Menu.Text
                                    id='text'
                                    name={intl.formatMessage({id: 'CardDetail.text', defaultMessage: 'Text'})}
                                    onClick={() => {
                                        const block = new MutableTextBlock()
                                        block.parentId = card.id
                                        block.order = cardTree.contents.length * 1000
                                        mutator.insertBlock(block, 'add text')
                                    }}
                                />
                                <Menu.Text
                                    id='image'
                                    name={intl.formatMessage({id: 'CardDetail.image', defaultMessage: 'Image'})}
                                    onClick={() => Utils.selectLocalFile(
                                        (file) => mutator.createImageBlock(card.id, file, cardTree.contents.length * 1000),
                                        '.jpg,.jpeg,.png',
                                    )}
                                />

                            </Menu>
                        </MenuWrapper>
                    </div>
                </div>
            </>
        )
    }

    async sendComment(text: string) {
        const {cardId} = this.props

        Utils.assertValue(cardId)

        const block = new MutableCommentBlock({parentId: cardId, title: text})
        await mutator.insertBlock(block, 'add comment')
    }

    close() {
        PropertyMenu.shared.hide()
    }
}

export default injectIntl(CardDetail)