EZQMS-1234: ability to relocate and reorder controlled documents within the space

models/controlled-documents/package.json

@@ -58,6 +58,7 @@
     "@hcengineering/chunter": "^0.6.20",
     "@hcengineering/text-editor": "^0.6.0",
     "@hcengineering/collaboration": "^0.6.0",
-    "@hcengineering/time": "^0.6.0"
+    "@hcengineering/time": "^0.6.0",
+    "@hcengineering/rank": "^0.6.4"
   }
 }

models/controlled-documents/src/migration.ts

@@ -4,21 +4,23 @@
 
 import attachment, { type Attachment } from '@hcengineering/attachment'
 import {
-  YXmlElement,
-  YXmlText,
+  loadCollabYdoc,
+  saveCollabYdoc,
   YAbstractType,
+  YXmlElement,
   yXmlElementClone,
-  loadCollabYdoc,
-  saveCollabYdoc
+  YXmlText
 } from '@hcengineering/collaboration'
 import {
   type ChangeControl,
   type ControlledDocument,
   createChangeControl,
   createDocumentTemplate,
   type DocumentCategory,
+  type DocumentMeta,
   documentsId,
-  DocumentState
+  DocumentState,
+  type ProjectMeta
 } from '@hcengineering/controlled-documents'
 import {
   type Class,
@@ -48,6 +50,7 @@ import { DOMAIN_ATTACHMENT } from '@hcengineering/model-attachment'
 import core from '@hcengineering/model-core'
 import tags from '@hcengineering/tags'
 
+import { makeRank } from '@hcengineering/rank'
 import documents, { DOMAIN_DOCUMENTS } from './index'
 
 async function createTemplatesSpace (tx: TxOperations): Promise<void> {
@@ -364,6 +367,42 @@ async function migrateDocSections (client: MigrationClient): Promise<void> {
   }
 }
 
+async function migrateProjectMetaRank (client: MigrationClient): Promise<void> {
+  const projectMeta = await client.find<ProjectMeta>(DOMAIN_DOCUMENTS, {
+    _class: documents.class.ProjectMeta,
+    rank: { $exists: false }
+  })
+
+  const docMeta = await client.find<DocumentMeta>(DOMAIN_DOCUMENTS, {
+    _class: documents.class.ProjectDocument,
+    _id: { $in: projectMeta.map((p) => p.meta) }
+  })
+
+  const docMetaById = new Map<Ref<DocumentMeta>, DocumentMeta>()
+  for (const doc of docMeta) {
+    docMetaById.set(doc._id, doc)
+  }
+
+  projectMeta.sort((a, b) => {
+    const docA = docMetaById.get(a.meta)
+    const docB = docMetaById.get(b.meta)
+    return (docA?.title ?? '').localeCompare(docB?.title ?? '', undefined, { numeric: true })
+  })
+
+  let rank = makeRank(undefined, undefined)
+  const operations: { filter: MigrationDocumentQuery<ProjectMeta>, update: MigrateUpdate<ProjectMeta> }[] = []
+
+  for (const doc of projectMeta) {
+    operations.push({
+      filter: { _id: doc._id },
+      update: { $set: { rank } }
+    })
+    rank = makeRank(rank, undefined)
+  }
+
+  await client.bulk(DOMAIN_DOCUMENTS, operations)
+}
+
 export const documentsOperation: MigrateOperation = {
   async migrate (client: MigrationClient): Promise<void> {
     await tryMigrate(client, documentsId, [
@@ -374,6 +413,10 @@ export const documentsOperation: MigrateOperation = {
       {
         state: 'migrateDocSections',
         func: migrateDocSections
+      },
+      {
+        state: 'migrateProjectMetaRank',
+        func: migrateProjectMetaRank
       }
     ])
   },

models/controlled-documents/src/types.ts

@@ -58,7 +58,8 @@ import {
   type Role,
   type TypedSpace,
   type Account,
-  type RolesAssignment
+  type RolesAssignment,
+  type Rank
 } from '@hcengineering/core'
 import {
   ArrOf,
@@ -181,6 +182,10 @@ export class TProjectMeta extends TDoc implements ProjectMeta {
 
   @Prop(Collection(documents.class.ProjectDocument), documents.string.Documents)
     documents!: CollectionSize<ProjectDocument>
+
+  @Index(IndexKind.Indexed)
+  @Hidden()
+    rank!: Rank
 }
 
 @Model(documents.class.ProjectDocument, core.class.AttachedDoc, DOMAIN_DOCUMENTS)

packages/ui/src/components/NavGroup.svelte

@@ -101,6 +101,7 @@
     {draggable}
     on:dragstart
     on:dragover
+    on:dragend
     on:drop
   >
     {#if isFold && !empty}

plugins/controlled-documents-resources/package.json

@@ -70,6 +70,7 @@
     "effector": "~22.8.7",
     "svelte": "^4.2.19",
     "slugify": "^1.6.6",
-    "fast-equals": "^5.0.1"
+    "fast-equals": "^5.0.1",
+    "@hcengineering/rank": "^0.6.4"
   }
 }

plugins/controlled-documents-resources/src/components/hierarchy/DocHierarchyLevel.svelte

@@ -27,7 +27,6 @@
     DocumentState
   } from '@hcengineering/controlled-documents'
   import { TreeItem } from '@hcengineering/view-resources'
-  import { compareDocs } from '../../utils'
 
   export let projectMeta: ProjectMeta[] = []
   export let childrenByParent: Record<Ref<DocumentMeta>, Array<ProjectMeta>>
@@ -36,13 +35,39 @@
   export let getMoreActions: ((obj: Doc, originalEvent?: MouseEvent) => Promise<Action[]>) | undefined = undefined
   export let collapsedPrefix: string = ''
 
+  export let onDragStart: ((e: DragEvent, object: Ref<DocumentMeta>) => void) | undefined = undefined
+  export let onDragOver: ((e: DragEvent, object: Ref<DocumentMeta>) => void) | undefined = undefined
+  export let onDragEnd: ((e: DragEvent, object: Ref<DocumentMeta>) => void) | undefined = undefined
+  export let onDrop: ((e: DragEvent, object: Ref<DocumentMeta>) => void) | undefined = undefined
+
+  export let draggedItem: Ref<DocumentMeta> | undefined = undefined
+  export let draggedOver: Ref<DocumentMeta> | undefined = undefined
+
+  import DropArea from './DropArea.svelte'
+
   const dispatch = createEventDispatcher()
   const currentUser = getCurrentAccount() as PersonAccount
   const currentPerson = currentUser.person
 
-  const docsQuery = createQuery()
   let docs: WithLookup<ProjectDocument>[] = []
 
+  function sortDocs (meta: ProjectMeta[]): void {
+    const metaById = new Map(meta.map((p) => [p._id, p]))
+    docs = docs.slice().sort((a, b) => {
+      const metaA = metaById.get(a.attachedTo)
+      const metaB = metaById.get(b.attachedTo)
+
+      if (metaA !== undefined && metaB !== undefined) {
+        return metaA.rank.localeCompare(metaB.rank)
+      }
+      return 0
+    })
+  }
+
+  $: sortDocs(projectMeta)
+
+  const docsQuery = createQuery()
+
   $: docsQuery.query(
     documents.class.ProjectDocument,
     {
@@ -79,12 +104,7 @@
         }
       }
 
-      docs.sort((a, b) => {
-        if (a.$lookup?.document !== undefined && b.$lookup?.document !== undefined) {
-          return compareDocs(a.$lookup.document, b.$lookup.document)
-        }
-        return 0
-      })
+      sortDocs(projectMeta)
     },
     {
       lookup: {
@@ -110,37 +130,62 @@
 
   {#if doc}
     {@const children = childrenByParent[doc.attachedTo] ?? []}
-    <TreeItem
-      _id={doc._id}
-      icon={documents.icon.Document}
-      iconProps={{
-        fill: 'currentColor'
-      }}
-      title={getDocumentName(doc)}
-      selected={selected === doc._id || selected === prjdoc._id}
-      isFold
-      empty={children.length === 0 || children === undefined}
-      actions={getMoreActions !== undefined ? () => getDocMoreActions(prjdoc) : undefined}
-      {level}
-      {collapsedPrefix}
-      shouldTooltip
-      on:click={() => {
-        dispatch('selected', prjdoc)
-      }}
-    >
-      <svelte:fragment slot="dropbox">
-        {#if children.length}
-          <svelte:self
-            projectMeta={children}
-            {childrenByParent}
-            {selected}
-            {collapsedPrefix}
-            {getMoreActions}
-            level={level + 1}
-            on:selected
-          />
-        {/if}
-      </svelte:fragment>
-    </TreeItem>
+    {@const isDraggedOver = draggedOver === doc.attachedTo}
+    <div class="flex-col relative">
+      {#if isDraggedOver}
+        <DropArea />
+      {/if}
+      <TreeItem
+        _id={doc._id}
+        icon={documents.icon.Document}
+        iconProps={{
+          fill: 'currentColor'
+        }}
+        title={getDocumentName(doc)}
+        selected={selected === doc._id || selected === prjdoc._id}
+        isFold
+        empty={children.length === 0 || children === undefined}
+        actions={getMoreActions !== undefined ? () => getDocMoreActions(prjdoc) : undefined}
+        {level}
+        {collapsedPrefix}
+        shouldTooltip
+        on:click={() => {
+          dispatch('selected', prjdoc)
+        }}
+        draggable={onDragStart !== undefined}
+        on:dragstart={(evt) => {
+          onDragStart?.(evt, doc.attachedTo)
+        }}
+        on:dragover={(evt) => {
+          onDragOver?.(evt, doc.attachedTo)
+        }}
+        on:dragend={(evt) => {
+          onDragEnd?.(evt, doc.attachedTo)
+        }}
+        on:drop={(evt) => {
+          onDrop?.(evt, doc.attachedTo)
+        }}
+      >
+        <svelte:fragment slot="dropbox">
+          {#if children.length}
+            <svelte:self
+              projectMeta={children}
+              {childrenByParent}
+              {selected}
+              {collapsedPrefix}
+              {getMoreActions}
+              level={level + 1}
+              {onDragStart}
+              {onDragOver}
+              {onDragEnd}
+              {onDrop}
+              {draggedItem}
+              {draggedOver}
+              on:selected
+            />
+          {/if}
+        </svelte:fragment>
+      </TreeItem>
+    </div>
   {/if}
 {/each}