Tsk-1040: Support draft for DraggableList (#2898)

Signed-off-by: Anton Brechka <anton.brechka@xored.com>
This commit is contained in:
Anton Brechka 2023-04-06 17:54:57 +07:00 committed by GitHub
parent 921291ba24
commit b2a02668df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -15,17 +15,21 @@
<script lang="ts"> <script lang="ts">
import { flip } from 'svelte/animate' import { flip } from 'svelte/animate'
import { Doc } from '@hcengineering/core' import { Doc, DocData, Ref } from '@hcengineering/core'
import { IconMoreV } from '@hcengineering/ui' import { IconMoreV } from '@hcengineering/ui'
import { getClient } from '../utils' import { getClient } from '../utils'
type DocWithRank = Doc & { rank: string } type DocWithRank = Doc & { rank: string }
type DraftDoc = DocData<Doc> & { _id: Ref<Doc> }
type DraftDocWithRank = DocData<DocWithRank> & { _id: Ref<Doc> }
type ListType = Doc[] | DocWithRank[] | DraftDoc[] | DraftDocWithRank[]
export let objects: Doc[] | DocWithRank[] export let objects: ListType
export let handleMove: ((fromIndex: number, toIndex: number) => void) | undefined = undefined export let handleMove: ((fromIndex: number, toIndex: number) => void) | undefined = undefined
export let calcRank: (doc: DocWithRank, next: DocWithRank) => string export let calcRank: (doc: DocWithRank, next: DocWithRank) => string
export let showContextMenu: ((evt: MouseEvent, doc: Doc) => void) | undefined = undefined export let showContextMenu: ((evt: MouseEvent, doc: Doc) => void) | undefined = undefined
export let isDraft = false
const client = getClient() const client = getClient()
@ -47,10 +51,14 @@
} }
} }
function checkHasRank (objects: Doc[] | (Doc & { rank: string })[]): objects is (Doc & { rank: string })[] { function checkHasRank (objects: ListType): objects is DocWithRank[] {
return 'rank' in objects[0] return 'rank' in objects[0]
} }
function checkIsNotDraft (object: Doc | DocWithRank | DraftDoc | DraftDocWithRank): object is Doc | DocWithRank {
return !('_class' in object) && !isDraft
}
async function handleDrop (ev: DragEvent, toIndex: number) { async function handleDrop (ev: DragEvent, toIndex: number) {
if (ev.dataTransfer && draggingIndex !== null && toIndex !== draggingIndex) { if (ev.dataTransfer && draggingIndex !== null && toIndex !== draggingIndex) {
ev.dataTransfer.dropEffect = 'move' ev.dataTransfer.dropEffect = 'move'
@ -68,7 +76,12 @@
] ]
const object = objects[draggingIndex] const object = objects[draggingIndex]
await client.update(object, { rank: calcRank(prev, next) }) const newRank = calcRank(prev, next)
if (isDraft) {
object.rank = newRank
} else {
await client.update(object, { rank: newRank })
}
} }
resetDrag() resetDrag()
} }
@ -83,7 +96,7 @@
class:is-dragged-over-down={draggingIndex !== null && index > draggingIndex && index === hoveringIndex} class:is-dragged-over-down={draggingIndex !== null && index > draggingIndex && index === hoveringIndex}
class:drag-over-highlight={index === dragOverIndex} class:drag-over-highlight={index === dragOverIndex}
draggable={true} draggable={true}
on:contextmenu|preventDefault={(ev) => showContextMenu?.(ev, object)} on:contextmenu|preventDefault={(ev) => checkIsNotDraft(object) && showContextMenu?.(ev, object)}
on:dragstart={(ev) => handleDragStart(ev, index)} on:dragstart={(ev) => handleDragStart(ev, index)}
on:dragover|preventDefault={() => { on:dragover|preventDefault={() => {
dragOverIndex = index dragOverIndex = index