Adding preliminary (not-working) gallery manual sort

webapp/src/components/gallery/gallery.tsx

@@ -4,6 +4,8 @@ import React, {useState, useEffect} from 'react'
 import {FormattedMessage} from 'react-intl'
 
 import {Card} from '../../blocks/card'
+import mutator from '../../mutator'
+import {Utils} from '../../utils'
 import {BoardTree} from '../../viewModel/boardTree'
 import {CardTree, MutableCardTree} from '../../viewModel/cardTree'
 import useCardListener from '../../hooks/cardListener'
@@ -25,6 +27,26 @@ const Gallery = (props: Props): JSX.Element => {
     const visiblePropertyTemplates = boardTree.board.cardProperties.filter((template) => boardTree.activeView.visiblePropertyIds.includes(template.id))
     const [cardTrees, setCardTrees] = useState<{[key: string]: CardTree | undefined}>({})
 
+    const onDropToCard = async (srcCard: Card, dstCard: Card) => {
+        Utils.log(`onDropToCard: ${dstCard.title}`)
+        const {selectedCardIds} = props
+        const {activeView} = boardTree
+
+        const draggedCardIds = Array.from(new Set(selectedCardIds).add(srcCard.id))
+
+        const description = draggedCardIds.length > 1 ? `drag ${draggedCardIds.length} cards` : 'drag card'
+
+        // Update dstCard order
+        let cardOrder = [...activeView.cardOrder]
+        cardOrder = cardOrder.filter((id) => !draggedCardIds.includes(id))
+        const destIndex = cardOrder.indexOf(dstCard.id)
+        cardOrder.splice(destIndex, 0, ...draggedCardIds)
+
+        await mutator.performAsUndoGroup(async () => {
+            await mutator.changeViewCardOrder(activeView, cardOrder, description)
+        })
+    }
+
     useCardListener(
         cards.map((c) => c.id),
         async (blocks) => {
@@ -62,6 +84,7 @@ const Gallery = (props: Props): JSX.Element => {
                             visiblePropertyTemplates={visiblePropertyTemplates}
                             isSelected={props.selectedCardIds.includes(card.id)}
                             readonly={props.readonly}
+                            onDrop={onDropToCard}
                         />
                     )
                 }

webapp/src/components/gallery/galleryCard.tsx

@@ -1,7 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React from 'react'
+import React, {useRef} from 'react'
 import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
+import {useDrag, useDrop} from 'react-dnd'
 
 import {IPropertyTemplate} from '../../blocks/board'
 import {Card} from '../../blocks/card'
@@ -29,20 +30,46 @@ type Props = {
     isSelected: boolean
     intl: IntlShape
     readonly: boolean
+    onDrop: (srcCard: Card, dstCard: Card) => void
 }
 
 const GalleryCard = React.memo((props: Props) => {
     const {cardTree} = props
+    const cardRef = useRef<HTMLDivElement>(null)
+    const [{isDragging}, drag] = useDrag(() => ({
+        type: 'card',
+        item: cardTree.card,
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+    }), [cardTree])
+    const [{isOver}, drop] = useDrop(() => ({
+        accept: 'card',
+        collect: (monitor) => ({
+            isOver: monitor.isOver(),
+        }),
+        drop: (item: Card) => {
+            props.onDrop(item, cardTree.card)
+        },
+    }), [cardTree])
 
     const visiblePropertyTemplates = props.visiblePropertyTemplates || []
 
     let images: IContentBlock[] = []
     images = cardTree.contents.filter((content) => content.type === 'image')
+    let className = props.isSelected ? 'GalleryCard selected' : 'GalleryCard'
+    if (isOver) {
+        className += ' dragover'
+    }
+
+    drop(drag(cardRef))
 
     return (
         <div
-            className={`GalleryCard ${props.isSelected ? 'selected' : ''}`}
+            className={className}
             onClick={(e: React.MouseEvent) => props.onClick(e, cardTree.card)}
+            style={{opacity: isDragging ? 0.5 : 1}}
+            ref={cardRef}
         >
             {!props.readonly &&
                 <MenuWrapper