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

Extracting the comments list from the card

Browse source
This commit is contained in:
Jesús Espino 2020-10-25 15:52:46 +01:00
parent 3f2d130058
commit b8b2e21d01
2 changed files with 108 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -21,7 +21,7 @@ import Button from './button'
import {Editable} from './editable'
import {MarkdownEditor} from './markdownEditor'
import ContentBlock from './contentBlock'
import Comment from './comment'
import CommentsList from './commentsList'
import './cardDetail.scss'
@ -117,8 +117,6 @@ class CardDetail extends React.Component<Props, State> {
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 (
<>
@ -227,58 +225,10 @@ class CardDetail extends React.Component<Props, State> {
{/* 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>
<CommentsList
comments={comments}
cardId={card.id}
/>
<hr/>
</div>
@ -325,15 +275,6 @@ class CardDetail extends React.Component<Props, State> {
)
}
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()
}

103
webapp/src/components/commentsList.tsx Normal file
View file

@ -0,0 +1,103 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import {injectIntl, IntlShape, FormattedMessage} from 'react-intl'
import {MutableCommentBlock} from '../blocks/commentBlock'
import {IBlock} from '../blocks/block'
import {Utils} from '../utils'
import mutator from '../mutator'
import {Editable} from './editable'
import Comment from './comment'
type Props = {
comments: readonly IBlock[]
cardId: string
intl: IntlShape
}
class CommentsList extends React.Component<Props> {
newCommentRef = React.createRef<Editable>()
sendCommentButtonRef = React.createRef<HTMLDivElement>()
public shouldComponentUpdate() {
return true
}
private sendComment = (text: string) => {
const {cardId} = this.props
Utils.assertValue(cardId)
const block = new MutableCommentBlock({parentId: cardId, title: text})
mutator.insertBlock(block, 'add comment')
}
public render(): JSX.Element {
const {comments, intl} = this.props
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='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={this.newCommentRef}
className='newcomment'
placeholderText={intl.formatMessage({id: 'CardDetail.new-comment-placeholder', defaultMessage: 'Add a comment...'})}
onChanged={() => { }}
onFocus={() => {
this.sendCommentButtonRef.current.style.display = null
}}
onBlur={() => {
if (!this.newCommentRef.current?.text) {
this.sendCommentButtonRef.current.style.display = 'none'
}
}}
onKeyDown={(e: React.KeyboardEvent) => {
if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
this.sendCommentButtonRef.current.click()
}
}}
/>
<div
ref={this.sendCommentButtonRef}
className='octo-button filled'
style={{display: 'none'}}
onClick={() => {
const text = this.newCommentRef.current.text
Utils.log(`Send comment: ${this.newCommentRef.current.text}`)
this.sendComment(text)
this.newCommentRef.current.text = undefined
this.newCommentRef.current.blur()
}}
>
<FormattedMessage
id='CommentsList.send'
defaultMessage='Send'
/>
</div>
</div>
</div>
)
}
}
export default injectIntl(CommentsList)