From 9fb2dfc4bdeffdfcea3bea56a057883bcc0677e9 Mon Sep 17 00:00:00 2001
From: Denis Bykhov <bykhov.denis@gmail.com>
Date: Tue, 18 Apr 2023 14:19:12 +0600
Subject: [PATCH] Fix issue template (#3006)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
---
 .../templates/IssueTemplateChildList.svelte   | 27 ++++++++++---------
 .../templates/IssueTemplateChilds.svelte      | 22 ++++++++-------
 2 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte
index f3abb224fe..36b20bfe6d 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte
@@ -15,8 +15,8 @@
 <script lang="ts">
   import { Ref } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
-  import tracker, { IssueTemplateChild, Component, Sprint, Project } from '@hcengineering/tracker'
-  import { eventToHTMLElement, IconCircles, showPopup } from '@hcengineering/ui'
+  import tracker, { Component, Issue, IssueTemplateChild, Project, Sprint } from '@hcengineering/tracker'
+  import { IconCircles, eventToHTMLElement, showPopup } from '@hcengineering/ui'
   import { ActionContext, FixedColumn } from '@hcengineering/view-resources'
   import { createEventDispatcher } from 'svelte'
   import { flip } from 'svelte/animate'
@@ -32,7 +32,8 @@
 
   const dispatch = createEventDispatcher()
 
-  let draggingIndex: number | null = null
+  let dragId: Ref<Issue> | null = null
+  let dragIndex: number | null = null
   let hoveringIndex: number | null = null
 
   function openIssue (evt: MouseEvent, target: IssueTemplateChild) {
@@ -58,23 +59,25 @@
   }
 
   function resetDrag () {
-    draggingIndex = null
+    dragId = null
+    dragIndex = null
     hoveringIndex = null
   }
 
-  function handleDragStart (ev: DragEvent, index: number) {
+  function handleDragStart (ev: DragEvent, index: number, item: IssueTemplateChild) {
     if (ev.dataTransfer) {
       ev.dataTransfer.effectAllowed = 'move'
       ev.dataTransfer.dropEffect = 'move'
-      draggingIndex = index
+      dragIndex = index
+      dragId = item.id
     }
   }
 
   function handleDrop (ev: DragEvent, toIndex: number) {
-    if (ev.dataTransfer && draggingIndex !== null && toIndex !== draggingIndex) {
+    if (ev.dataTransfer && dragIndex !== null && toIndex !== dragIndex) {
       ev.dataTransfer.dropEffect = 'move'
 
-      dispatch('move', { fromIndex: draggingIndex, toIndex })
+      dispatch('move', { id: dragId, toIndex })
     }
 
     resetDrag()
@@ -107,13 +110,13 @@
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     class="flex-between row"
-    class:is-dragging={index === draggingIndex}
-    class:is-dragged-over-up={draggingIndex !== null && index < draggingIndex && index === hoveringIndex}
-    class:is-dragged-over-down={draggingIndex !== null && index > draggingIndex && index === hoveringIndex}
+    class:is-dragging={issue.id === dragId}
+    class:is-dragged-over-up={dragIndex !== null && index < dragIndex && index === hoveringIndex}
+    class:is-dragged-over-down={dragIndex !== null && index > dragIndex && index === hoveringIndex}
     animate:flip={{ duration: 400 }}
     draggable={true}
     on:click|self={(evt) => openIssue(evt, issue)}
-    on:dragstart={(ev) => handleDragStart(ev, index)}
+    on:dragstart={(ev) => handleDragStart(ev, index, issue)}
     on:dragover|preventDefault={() => false}
     on:dragenter={() => (hoveringIndex = index)}
     on:drop|preventDefault={(ev) => handleDrop(ev, index)}
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte
index 96b59cebe9..6b4a939030 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte
@@ -14,8 +14,8 @@
 -->
 <script lang="ts">
   import { Ref } from '@hcengineering/core'
-  import { IssueTemplateChild, Component, Sprint, Project } from '@hcengineering/tracker'
-  import { Button, closeTooltip, ExpandCollapse, IconAdd, Scroller } from '@hcengineering/ui'
+  import { Component, Issue, IssueTemplateChild, Project, Sprint } from '@hcengineering/tracker'
+  import { Button, ExpandCollapse, IconAdd, Scroller, closeTooltip } from '@hcengineering/ui'
   import { afterUpdate, createEventDispatcher } from 'svelte'
   import tracker from '../../plugin'
   import Collapsed from '../icons/Collapsed.svelte'
@@ -35,14 +35,17 @@
   let isCollapsed = false
   let isCreating = false
 
-  async function handleIssueSwap (ev: CustomEvent<{ fromIndex: number; toIndex: number }>) {
+  function handleIssueSwap (ev: CustomEvent<{ id: Ref<Issue>; toIndex: number }>) {
     if (children) {
-      const { fromIndex, toIndex } = ev.detail
-      const [fromIssue] = children.splice(fromIndex, 1)
-      const leftPart = children.slice(0, toIndex)
-      const rightPart = children.slice(toIndex)
-      children = [...leftPart, fromIssue, ...rightPart]
-      dispatch('update-issues', children)
+      const { id, toIndex } = ev.detail
+      const index = children.findIndex((p) => p.id === id)
+      if (index !== -1 && index !== toIndex) {
+        const [fromIssue] = children.splice(index, 1)
+        const leftPart = children.slice(0, toIndex)
+        const rightPart = children.slice(toIndex)
+        children = [...leftPart, fromIssue, ...rightPart]
+        dispatch('update-issues', children)
+      }
     }
   }
 
@@ -113,7 +116,6 @@
         if (children === undefined) {
           children = []
         }
-        children = [...children, evt.detail]
         dispatch('create-issue', evt.detail)
       }}
       on:changeContent