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

Del: delete selected cards

Browse source
This commit is contained in:
Chen-I Lim 2020-10-28 14:13:43 -07:00
parent b7ea5e677b
commit 264ed20aa3
1 changed files with 53 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
webapp/src/components/boardComponent.tsx
View file

@ -39,7 +39,7 @@ type State = {
isSearching: boolean isSearching: boolean
shownCard?: Card shownCard?: Card
viewMenu: boolean viewMenu: boolean
selectedCards: Card[] selectedCardIds: string[]
showFilter: boolean showFilter: boolean
} }
@ -55,11 +55,17 @@ class BoardComponent extends React.Component<Props, State> {
} }
if (e.keyCode === 27) { if (e.keyCode === 27) {
if (this.state.selectedCards.length > 0) { if (this.state.selectedCardIds.length > 0) {
this.setState({selectedCards: []}) this.setState({selectedCardIds: []})
e.stopPropagation() e.stopPropagation()
} }
} }
if (e.keyCode === 8 || e.keyCode === 46) {
// Backspace or Del: Delete selected cards
this.deleteSelectedCards()
e.stopPropagation()
}
} }
componentDidMount(): void { componentDidMount(): void {
@ -75,7 +81,7 @@ class BoardComponent extends React.Component<Props, State> {
this.state = { this.state = {
isSearching: Boolean(this.props.boardTree?.getSearchText()), isSearching: Boolean(this.props.boardTree?.getSearchText()),
viewMenu: false, viewMenu: false,
selectedCards: [], selectedCardIds: [],
showFilter: false, showFilter: false,
} }
} }
@ -214,19 +220,20 @@ class BoardComponent extends React.Component<Props, State> {
} }
private renderCard(card: Card, visiblePropertyTemplates: IPropertyTemplate[]) { private renderCard(card: Card, visiblePropertyTemplates: IPropertyTemplate[]) {
const {activeView} = this.props.boardTree const {boardTree} = this.props
const {activeView} = boardTree
const isManualSort = activeView.sortOptions.length < 1 const isManualSort = activeView.sortOptions.length < 1
return ( return (
<BoardCard <BoardCard
card={card} card={card}
visiblePropertyTemplates={visiblePropertyTemplates} visiblePropertyTemplates={visiblePropertyTemplates}
key={card.id} key={card.id}
isSelected={this.state.selectedCards.includes(card)} isSelected={this.state.selectedCardIds.includes(card.id)}
onClick={(e) => { onClick={(e) => {
this.cardClicked(e, card) this.cardClicked(e, card)
}} }}
onDragStart={() => { onDragStart={() => {
this.draggedCards = this.state.selectedCards.includes(card) ? this.state.selectedCards : [card] this.draggedCards = this.state.selectedCardIds.includes(card.id) ? this.state.selectedCardIds.map((id) => boardTree.allCards.find(o => o.id === id)) : [card]
}} }}
onDragEnd={() => { onDragEnd={() => {
this.draggedCards = [] this.draggedCards = []
@ -454,8 +461,8 @@ class BoardComponent extends React.Component<Props, State> {
} }
private backgroundClicked(e: React.MouseEvent) { private backgroundClicked(e: React.MouseEvent) {
if (this.state.selectedCards.length > 0) { if (this.state.selectedCardIds.length > 0) {
this.setState({selectedCards: []}) this.setState({selectedCardIds: []})
e.stopPropagation() e.stopPropagation()
} }
} }
@ -490,32 +497,32 @@ class BoardComponent extends React.Component<Props, State> {
private cardClicked(e: React.MouseEvent, card: Card): void { private cardClicked(e: React.MouseEvent, card: Card): void {
if (e.shiftKey) { if (e.shiftKey) {
let selectedCards = this.state.selectedCards.slice() let selectedCardIds = this.state.selectedCardIds.slice()
if (selectedCards.length > 0 && (e.metaKey || e.ctrlKey)) { if (selectedCardIds.length > 0 && (e.metaKey || e.ctrlKey)) {
// Cmd+Shift+Click: Extend the selection // Cmd+Shift+Click: Extend the selection
const {boardTree} = this.props const {boardTree} = this.props
const orderedCards = boardTree.orderedCards() const orderedCardIds = boardTree.orderedCards().map((o) => o.id)
const lastCard = selectedCards[selectedCards.length-1] const lastCardId = selectedCardIds[selectedCardIds.length-1]
const srcIndex = orderedCards.indexOf(lastCard) const srcIndex = orderedCardIds.indexOf(lastCardId)
const destIndex = orderedCards.indexOf(card) const destIndex = orderedCardIds.indexOf(card.id)
const newCards = (srcIndex < destIndex) ? orderedCards.slice(srcIndex, destIndex+1) : orderedCards.slice(destIndex, srcIndex+1) const newCardIds = (srcIndex < destIndex) ? orderedCardIds.slice(srcIndex, destIndex+1) : orderedCardIds.slice(destIndex, srcIndex+1)
for (const newCard of newCards) { for (const newCardId of newCardIds) {
if (!selectedCards.includes(newCard)) { if (!selectedCardIds.includes(newCardId)) {
selectedCards.push(newCard) selectedCardIds.push(newCardId)
} }
} }
this.setState({selectedCards}) this.setState({selectedCardIds})
} else { } else {
// Shift+Click: add to selection // Shift+Click: add to selection
if (selectedCards.includes(card)) { if (selectedCardIds.includes(card.id)) {
selectedCards = selectedCards.filter((o) => o != card) selectedCardIds = selectedCardIds.filter((o) => o != card.id)
} else { } else {
selectedCards.push(card) selectedCardIds.push(card.id)
} }
this.setState({selectedCards}) this.setState({selectedCardIds})
} }
} else { } else {
this.setState({selectedCards: [], shownCard: card}) this.setState({selectedCardIds: [], shownCard: card})
} }
e.stopPropagation() e.stopPropagation()
@ -546,11 +553,12 @@ class BoardComponent extends React.Component<Props, State> {
if (draggedCards.length > 0) { if (draggedCards.length > 0) {
mutator.beginUndoGroup() mutator.beginUndoGroup()
const description = draggedCards.length > 1 ? `drag ${draggedCards.length} cards` : 'drag card'
for (const draggedCard of draggedCards) { for (const draggedCard of draggedCards) {
Utils.log(`ondrop. Card: ${draggedCard.title}, column: ${optionId}`) Utils.log(`ondrop. Card: ${draggedCard.title}, column: ${optionId}`)
const oldValue = draggedCard.properties[boardTree.groupByProperty.id] const oldValue = draggedCard.properties[boardTree.groupByProperty.id]
if (optionId !== oldValue) { if (optionId !== oldValue) {
await mutator.changePropertyValue(draggedCard, boardTree.groupByProperty.id, optionId, 'drag card') await mutator.changePropertyValue(draggedCard, boardTree.groupByProperty.id, optionId, description)
} }
} }
mutator.endUndoGroup() mutator.endUndoGroup()
@ -584,6 +592,7 @@ class BoardComponent extends React.Component<Props, State> {
mutator.beginUndoGroup() mutator.beginUndoGroup()
const description = draggedCards.length > 1 ? `drag ${draggedCards.length} cards` : 'drag card'
const cardOrder = boardTree.orderedCards().map((o) => o.id) const cardOrder = boardTree.orderedCards().map((o) => o.id)
for (const draggedCard of draggedCards) { for (const draggedCard of draggedCards) {
if (draggedCard.id === card.id) { if (draggedCard.id === card.id) {
@ -593,7 +602,7 @@ class BoardComponent extends React.Component<Props, State> {
Utils.log(`draggedCard: ${draggedCard.title}, column: ${optionId}`) Utils.log(`draggedCard: ${draggedCard.title}, column: ${optionId}`)
const oldOptionId = draggedCard.properties[boardTree.groupByProperty.id] const oldOptionId = draggedCard.properties[boardTree.groupByProperty.id]
if (optionId !== oldOptionId) { if (optionId !== oldOptionId) {
await mutator.changePropertyValue(draggedCard, boardTree.groupByProperty.id, optionId, 'drag card') await mutator.changePropertyValue(draggedCard, boardTree.groupByProperty.id, optionId, description)
} }
// Change sort position of card // Change sort position of card
@ -607,9 +616,25 @@ class BoardComponent extends React.Component<Props, State> {
cardOrder.splice(destIndex, 0, draggedCard.id) cardOrder.splice(destIndex, 0, draggedCard.id)
} }
await mutator.changeViewCardOrder(activeView, cardOrder) await mutator.changeViewCardOrder(activeView, cardOrder, description)
mutator.endUndoGroup() mutator.endUndoGroup()
} }
private async deleteSelectedCards() {
const {selectedCardIds} = this.state
if (selectedCardIds.length < 1) {
return
}
mutator.beginUndoGroup()
for (const cardId of selectedCardIds) {
const card = this.props.boardTree.allCards.find((o) => o.id === cardId)
mutator.deleteBlock(card, selectedCardIds.length > 1 ? `delete ${selectedCardIds.length} cards` : 'delete card')
}
mutator.endUndoGroup()
this.setState({selectedCardIds: []})
}
} }
export default injectIntl(BoardComponent) export default injectIntl(BoardComponent)