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

Merge branch 'main' of github.com:mattermost/mattermost-octo-tasks into main

Browse source
This commit is contained in:
Chen-I Lim 2020-10-26 10:54:41 -07:00
commit 17e802f9fb
4 changed files with 77 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,9 +13,9 @@ import {Utils} from '../utils'
import MenuWrapper from '../widgets/menuWrapper'
import Menu from '../widgets/menu'
import Editable from '../widgets/editable'
import Button from './button'
import {Editable} from './editable'
import {MarkdownEditor} from './markdownEditor'
import ContentBlock from './contentBlock'
import CommentsList from './commentsList'
@ -32,6 +32,7 @@ type Props = {
type State = {
cardTree?: CardTree
title: string
}
class CardDetail extends React.Component<Props, State> {
@ -44,7 +45,9 @@ class CardDetail extends React.Component<Props, State> {
constructor(props: Props) {
super(props)
this.state = {}
this.state = {
title: '',
}
}
componentDidMount() {
@ -52,11 +55,11 @@ class CardDetail extends React.Component<Props, State> {
this.cardListener.open([this.props.cardId], async (blockId) => {
Utils.log(`cardListener.onChanged: ${blockId}`)
await cardTree.sync()
this.setState({...this.state, cardTree})
this.setState({cardTree})
})
const cardTree = new MutableCardTree(this.props.cardId)
cardTree.sync().then(() => {
this.setState({...this.state, cardTree})
this.setState({cardTree, title: cardTree.card.title})
setTimeout(() => {
if (this.titleRef.current) {
this.titleRef.current.focus()
@ -79,8 +82,6 @@ class CardDetail extends React.Component<Props, State> {
}
const {card, comments} = cardTree
const newCommentRef = React.createRef<Editable>()
const sendCommentButtonRef = React.createRef<HTMLDivElement>()
let contentElements
if (cardTree.contents.length > 0) {
contentElements =
@ -151,10 +152,21 @@ class CardDetail extends React.Component<Props, State> {
<Editable
ref={this.titleRef}
className='title'
text={card.title}
value={this.state.title}
placeholderText='Untitled'
onChanged={(text) => {
mutator.changeTitle(card, text)
onChange={(title: string) => this.setState({title})}
onBlur={() => mutator.changeTitle(card, this.state.title)}
onFocus={() => this.titleRef.current.focus()}
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
e.stopPropagation()
this.setState({title: this.state.cardTree.card.title})
setTimeout(() => this.titleRef.current.blur(), 0)
} else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
e.stopPropagation()
mutator.changeTitle(card, this.state.title)
this.titleRef.current.blur()
}
}}
/>

36
webapp/src/components/propertyValueElement.tsx
View file

@ -8,8 +8,7 @@ import {IPropertyTemplate, IPropertyOption} from '../blocks/board'
import {OctoUtils} from '../octoUtils'
import mutator from '../mutator'
import {Editable} from './editable'
import Editable from '../widgets/editable'
import MenuWrapper from '../widgets/menuWrapper'
import Menu from '../widgets/menu'
@ -20,7 +19,19 @@ type Props = {
emptyDisplayValue: string
}
export default class PropertyValueElement extends React.Component<Props> {
type State = {
value: string
}
export default class PropertyValueElement extends React.Component<Props, State> {
private valueEditor = React.createRef<Editable>()
constructor(props: Props) {
super(props)
const propertyValue = props.card.properties[props.propertyTemplate.id]
this.state = {value: propertyValue}
}
shouldComponentUpdate(): boolean {
return true
}
@ -78,12 +89,23 @@ export default class PropertyValueElement extends React.Component<Props> {
if (!readOnly) {
return (
<Editable
key={propertyTemplate.id}
ref={this.valueEditor}
className='octo-propertyvalue'
placeholderText='Empty'
text={displayValue}
onChanged={(text) => {
mutator.changePropertyValue(card, propertyTemplate.id, text)
value={this.state.value}
onChange={(value) => this.setState({value})}
onBlur={() => mutator.changePropertyValue(card, propertyTemplate.id, this.state.value)}
onFocus={() => this.valueEditor.current.focus()}
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
e.stopPropagation()
this.setState({value: propertyValue})
setTimeout(() => this.valueEditor.current.blur(), 0)
} else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
e.stopPropagation()
mutator.changePropertyValue(card, propertyTemplate.id, this.state.value)
this.valueEditor.current.blur()
}
}}
/>
)

22
webapp/src/components/tableComponent.tsx
View file

@ -29,33 +29,19 @@ type Props = {
}
type State = {
isSearching: boolean
shownCard?: Card
viewMenu: boolean
showFilter: boolean
}
class TableComponent extends React.Component<Props, State> {
private draggedHeaderTemplate: IPropertyTemplate
private cardIdToRowMap = new Map<string, React.RefObject<TableRow>>()
private cardIdToFocusOnRender: string
private searchFieldRef = React.createRef<Editable>()
constructor(props: Props) {
super(props)
this.state = {isSearching: Boolean(this.props.boardTree?.getSearchText()), viewMenu: false, showFilter: false}
}
state: State = {}
shouldComponentUpdate(): boolean {
return true
}
componentDidUpdate(prevPros: Props, prevState: State): void {
if (this.state.isSearching && !prevState.isSearching) {
this.searchFieldRef.current.focus()
}
}
render(): JSX.Element {
const {boardTree, showView} = this.props
@ -225,12 +211,6 @@ class TableComponent extends React.Component<Props, State> {
)
}
private focusOnCardTitle(cardId: string): void {
const tableRowRef = this.cardIdToRowMap.get(cardId)
Utils.log(`focusOnCardTitle, ${tableRowRef?.current ?? 'undefined'}`)
tableRowRef?.current.focusOnTitle()
}
private addCard = async (show = false) => {
const {boardTree} = this.props

38
webapp/src/components/tableRow.tsx
View file

@ -6,8 +6,9 @@ import {BoardTree} from '../viewModel/boardTree'
import {Card} from '../blocks/card'
import mutator from '../mutator'
import Editable from '../widgets/editable'
import PropertyValueElement from './propertyValueElement'
import {Editable} from './editable'
import {CardDialog} from './cardDialog'
import RootPortal from './rootPortal'
@ -20,12 +21,17 @@ type Props = {
type State = {
showCard: boolean
title: string
}
class TableRow extends React.Component<Props, State> {
private titleRef = React.createRef<Editable>()
state = {
showCard: false,
constructor(props: Props) {
super(props)
this.state = {
showCard: false,
title: props.card.title,
}
}
shouldComponentUpdate(): boolean {
@ -44,7 +50,7 @@ class TableRow extends React.Component<Props, State> {
const openButonRef = React.createRef<HTMLDivElement>()
const element = (
return (
<div
className='octo-table-row'
key={card.id}
@ -66,12 +72,21 @@ class TableRow extends React.Component<Props, State> {
<div className='octo-icon'>{card.icon}</div>
<Editable
ref={this.titleRef}
text={card.title}
value={this.state.title}
placeholderText='Untitled'
onChanged={(text) => {
mutator.changeTitle(card, text)
}}
onKeyDown={(e) => {
onChange={(title: string) => this.setState({title})}
onBlur={() => mutator.changeTitle(card, this.state.title)}
onFocus={() => this.titleRef.current.focus()}
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
e.stopPropagation()
this.setState({title: card.title})
setTimeout(() => this.titleRef.current.blur(), 0)
} else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
e.stopPropagation()
mutator.changeTitle(card, this.state.title)
this.titleRef.current.blur()
}
onKeyDown(e)
}}
/>
@ -113,9 +128,8 @@ class TableRow extends React.Component<Props, State> {
/>
</div>)
})}
</div>)
return element
</div>
)
}
focusOnTitle(): void {