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

Adding enable/disable of sorting

Browse source
This commit is contained in:
Jesús Espino 2021-04-08 09:55:16 +02:00
parent aeebe8480d
commit ccc31fe6c1
7 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
webapp/src/components/gallery/gallery.tsx
View file

@ -23,13 +23,13 @@ type Props = {
const Gallery = (props: Props): JSX.Element => {
const {boardTree} = props
const {cards} = boardTree
const {cards, activeView} = boardTree
const visiblePropertyTemplates = boardTree.board.cardProperties.filter((template) => boardTree.activeView.visiblePropertyIds.includes(template.id))
const [cardTrees, setCardTrees] = useState<{[key: string]: CardTree | undefined}>({})
const isManualSort = activeView.sortOptions.length < 1
const onDropToCard = (srcCard: Card, dstCard: Card) => {
Utils.log(`onDropToCard: ${dstCard.title}`)
const {activeView} = boardTree
const {selectedCardIds} = props
const draggedCardIds = Array.from(new Set(selectedCardIds).add(srcCard.id))
@ -88,6 +88,7 @@ const Gallery = (props: Props): JSX.Element => {
isSelected={props.selectedCardIds.includes(card.id)}
readonly={props.readonly}
onDrop={onDropToCard}
isManualSort={isManualSort}
/>
)
}

3
webapp/src/components/gallery/galleryCard.tsx
View file

@ -30,12 +30,13 @@ type Props = {
isSelected: boolean
intl: IntlShape
readonly: boolean
isManualSort: boolean
onDrop: (srcCard: Card, dstCard: Card) => void
}
const GalleryCard = React.memo((props: Props) => {
const {cardTree} = props
const [isDragging, isOver, cardRef] = useSortable('card', cardTree.card, props.onDrop)
const [isDragging, isOver, cardRef] = useSortable('card', cardTree.card, props.isManualSort, props.onDrop)
const visiblePropertyTemplates = props.visiblePropertyTemplates || []

1
webapp/src/components/kanban/kanban.tsx
View file

@ -130,6 +130,7 @@ class Kanban extends React.Component<Props, State> {
this.props.onCardClicked(e, card)
}}
onDrop={this.onDropToCard}
isManualSort={isManualSort}
/>
))}
{!this.props.readonly &&

3
webapp/src/components/kanban/kanbanCard.tsx
View file

@ -25,11 +25,12 @@ type Props = {
intl: IntlShape
readonly: boolean
onDrop: (srcCard: Card, dstCard: Card) => void
isManualSort: boolean
}
const KanbanCard = React.memo((props: Props) => {
const {card, intl} = props
const [isDragging, isOver, cardRef] = useSortable('card', card, props.onDrop)
const [isDragging, isOver, cardRef] = useSortable('card', card, props.isManualSort, props.onDrop)
const visiblePropertyTemplates = props.visiblePropertyTemplates || []
let className = props.isSelected ? 'KanbanCard selected' : 'KanbanCard'
if (isOver) {

3
webapp/src/components/table/tableHeader.tsx
View file

@ -28,7 +28,8 @@ type Props = {
}
const TableHeader = React.memo((props: Props): JSX.Element => {
const [isDragging, isOver, columnRef] = useSortable('column', props.template, props.onDrop)
const isManualSort = props.boardTree.activeView.sortOptions.length < 1
const [isDragging, isOver, columnRef] = useSortable('column', props.template, isManualSort, props.onDrop)
const columnWidth = (templateId: string): number => {
return Math.max(Constants.minColumnWidth, (props.boardTree.activeView.columnWidths[templateId] || 0) + props.offset)

9
webapp/src/components/table/tableRow.tsx
View file

@ -29,10 +29,14 @@ type Props = {
}
const TableRow = React.memo((props: Props) => {
const {boardTree, onSaveWithEnter} = props
const {board, activeView} = boardTree
const titleRef = useRef<Editable>(null)
const [title, setTitle] = useState(props.card.title)
const {card} = props
const [isDragging, isOver, cardRef] = useSortable('card', card, props.onDrop)
const isManualSort = activeView.sortOptions.length < 1
const [isDragging, isOver, cardRef] = useSortable('card', card, isManualSort, props.onDrop)
useEffect(() => {
if (props.focusOnMount) {
@ -47,9 +51,6 @@ const TableRow = React.memo((props: Props) => {
return Math.max(Constants.minColumnWidth, props.boardTree.activeView.columnWidths[templateId] || 0)
}
const {boardTree, onSaveWithEnter} = props
const {board, activeView} = boardTree
let className = props.isSelected ? 'TableRow octo-table-row selected' : 'TableRow octo-table-row'
if (isOver) {
className += ' dragover'

8
webapp/src/hooks/sortable.tsx
View file

@ -3,7 +3,7 @@
import React, {useRef} from 'react'
import {useDrag, useDrop} from 'react-dnd'
export default function useSortable(itemType: string, item: any, handler: (src: any, st: any) => void): [boolean, boolean, React.RefObject<HTMLDivElement>] {
export default function useSortable(itemType: string, item: any, enabled: boolean, handler: (src: any, st: any) => void): [boolean, boolean, React.RefObject<HTMLDivElement>] {
const ref = useRef<HTMLDivElement>(null)
const [{isDragging}, drag] = useDrag(() => ({
type: itemType,
@ -11,7 +11,8 @@ export default function useSortable(itemType: string, item: any, handler: (src:
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
}), [itemType, item])
canDrag: () => enabled,
}), [itemType, item, enabled])
const [{isOver}, drop] = useDrop(() => ({
accept: itemType,
collect: (monitor) => ({
@ -20,7 +21,8 @@ export default function useSortable(itemType: string, item: any, handler: (src:
drop: (dragItem: any) => {
handler(dragItem, item)
},
}), [item, handler])
canDrop: () => enabled,
}), [item, handler, enabled])
drop(drag(ref))
return [isDragging, isOver, ref]