Custom field order

plugins/card-resources/src/components/CardAttributes.svelte

@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import core, { Class, Doc, Ref } from '@hcengineering/core'
+  import core, { Class, Doc, Ref, toRank } from '@hcengineering/core'
   import {
     AttributeBarEditor,
     KeyedAttribute,
@@ -38,7 +38,13 @@
 
   function updateKeys (_class: Ref<Class<Doc>>, ignoreKeys: string[], to: Ref<Class<Doc>> | undefined): void {
     const filtredKeys = getFiltredKeys(hierarchy, _class, ignoreKeys, to)
-    keys = filtredKeys.filter((key) => !isCollectionAttr(hierarchy, key))
+    keys = filtredKeys
+      .filter((key) => !isCollectionAttr(hierarchy, key))
+      .sort((a, b) => {
+        const rankA = a.attr.rank ?? toRank(a.attr._id) ?? ''
+        const rankB = b.attr.rank ?? toRank(b.attr._id) ?? ''
+        return rankA.localeCompare(rankB)
+      })
   }
 
   $: updateKeys(_class, ignoreKeys, to)

plugins/setting-resources/package.json

@@ -63,6 +63,7 @@
     "@hcengineering/communication": "^0.7.0",
     "@hcengineering/chat": "^0.7.0",
     "@hcengineering/integration-client": "^0.7.0",
+    "@hcengineering/rank": "^0.7.17",
     "@hcengineering/rating": "^0.7.0"
   }
 }

plugins/setting-resources/src/components/ClassAttributeRow.svelte

@@ -16,15 +16,13 @@
   import core, { AnyAttribute, ArrOf, Doc, EnumOf, RefTo, Type } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
-  import { AnySvelteComponent, Icon, IconMoreV2, Label, IconOpenedArrow, tooltip } from '@hcengineering/ui'
-  import settings from '../plugin'
+  import { AnySvelteComponent, Icon, IconMoreV2, IconOpenedArrow, Label, tooltip } from '@hcengineering/ui'
   import view from '@hcengineering/view'
 
   export let attribute: AnyAttribute
   export let attributeType: IntlString | undefined = undefined
   export let selected: boolean = false
   export let hovered: boolean = false
-  export let clickMore: (event: MouseEvent) => Promise<void>
 
   export let attributeMapper:
   | {
@@ -50,8 +48,8 @@
   }
 </script>
 
-<button class="hulyTableAttr-content__row" class:hovered class:selected on:contextmenu on:click>
-  <button class="hulyTableAttr-content__row-dragMenu" on:click|stopPropagation={clickMore}>
+<button class="hulyTableAttr-content__row w-full" class:hovered class:selected on:contextmenu on:click>
+  <button class="hulyTableAttr-content__row-dragMenu">
     <IconMoreV2 size={'small'} />
   </button>
   {#if attribute.automationOnly === true}

plugins/setting-resources/src/components/ClassAttributes.svelte

@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import core, { AnyAttribute, Class, Doc, Ref, Space } from '@hcengineering/core'
+  import core, { AnyAttribute, Class, Doc, Ref, Space, toRank } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import {
@@ -81,7 +81,11 @@
     const cl = hierarchy.getClass(_class)
     const attributes = Array.from(
       hierarchy.getAllAttributes(_class, _class === ofClass ? core.class.Doc : cl.extends).values()
-    )
+    ).sort((a, b) => {
+      const rankA = a.rank ?? toRank(a._id) ?? ''
+      const rankB = b.rank ?? toRank(b._id) ?? ''
+      return rankA.localeCompare(rankB)
+    })
     return attributes
   }
 

plugins/setting-resources/src/components/ClassAttributesList.svelte

@@ -14,7 +14,18 @@
 -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import core, { AnyAttribute, ArrOf, AttachedDoc, Class, Collection, Doc, Ref, RefTo, Type } from '@hcengineering/core'
+  import core, {
+    AnyAttribute,
+    ArrOf,
+    AttachedDoc,
+    Class,
+    Collection,
+    Doc,
+    Rank,
+    Ref,
+    RefTo,
+    Type
+  } from '@hcengineering/core'
   import { IntlString, getResource } from '@hcengineering/platform'
   import presentation, { MessageBox, createQuery, getClient } from '@hcengineering/presentation'
   import {
@@ -26,9 +37,10 @@
     getEventPositionElement,
     showPopup
   } from '@hcengineering/ui'
-  import { getContextActions } from '@hcengineering/view-resources'
+  import { getContextActions, SortableList } from '@hcengineering/view-resources'
   import settings from '../plugin'
   import ClassAttributeRow from './ClassAttributeRow.svelte'
+  import { makeRank } from '@hcengineering/rank'
   import EditAttribute from './EditAttribute.svelte'
 
   export let _class: Ref<Class<Doc>>
@@ -52,7 +64,7 @@
   const classQuery = createQuery()
 
   let clazz: Class<Doc> | undefined
-  let hovered: number | null = null
+  let hovered: Ref<AnyAttribute> | null = null
 
   $: classQuery.query(core.class.Class, { _id: _class }, (res) => {
     clazz = res.shift()
@@ -63,7 +75,11 @@
     const cl = hierarchy.getClass(_class)
     const attributes = Array.from(
       hierarchy.getAllAttributes(_class, _class === ofClass && !notUseOfClass ? core.class.Doc : cl.extends).values()
-    )
+    ).sort((a, b) => {
+      const rankA = a.rank ?? toRank(a._id) ?? ''
+      const rankB = b.rank ?? toRank(b._id) ?? ''
+      return rankA.localeCompare(rankB)
+    })
     return attributes
   }
 
@@ -96,8 +112,8 @@
     )
   }
 
-  async function showMenu (ev: MouseEvent, attribute: AnyAttribute, row: number): Promise<void> {
-    hovered = row
+  async function showMenu (ev: MouseEvent, attribute: AnyAttribute): Promise<void> {
+    hovered = attribute._id
     const exist = (await client.findOne(attribute.attributeOf, { [attribute.name]: { $exists: true } })) !== undefined
     const actions: Action[] = [
       {
@@ -145,26 +161,38 @@
         return undefined
     }
   }
+
+  function toRank (str: string | undefined): Rank | undefined {
+    if (str === undefined) return
+    if (str.startsWith('0|')) {
+      return str
+    }
+    return '0|' + str.replaceAll(/[-:_]/g, '').toLowerCase()
+  }
+
+  async function moveHadler (e: CustomEvent<any>): Promise<void> {
+    const { item, prev, next } = e.detail
+    const rank = makeRank(prev?.rank ?? toRank(prev?._id), next?.rank ?? toRank(next?._id))
+    await client.update(item, { rank })
+  }
 </script>
 
-{#each attributes as attr, i}
-  {@const attrType = getAttrType(attr.type)}
-  <ClassAttributeRow
-    attribute={attr}
-    attributeType={attrType}
-    selected={selected && attr._id === selected._id}
-    hovered={hovered === i}
-    {attributeMapper}
-    clickMore={async (event) => {
-      event.preventDefault()
-      void showMenu(event, attr, i)
-    }}
-    on:contextmenu={async (event) => {
-      void showMenu(event, attr, i)
-    }}
-    on:click={async () => {
-      if (selected && selected._id === attr._id) dispatch('deselect')
-      else dispatch('select', attr)
-    }}
-  />
-{/each}
+<SortableList bind:items={attributes} on:move={moveHadler}>
+  <svelte:fragment slot="object" let:value={attr}>
+    {@const attrType = getAttrType(attr.type)}
+    <ClassAttributeRow
+      attribute={attr}
+      attributeType={attrType}
+      selected={selected && attr._id === selected._id}
+      hovered={hovered === attr._id}
+      {attributeMapper}
+      on:contextmenu={async (event) => {
+        void showMenu(event, attr)
+      }}
+      on:click={async () => {
+        if (selected && selected._id === attr._id) dispatch('deselect')
+        else dispatch('select', attr)
+      }}
+    />
+  </svelte:fragment>
+</SortableList>

plugins/view-resources/src/components/ClassAttributeBar.svelte

@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import core, { Class, Doc, Ref } from '@hcengineering/core'
+  import core, { Class, Doc, Rank, Ref, toRank } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
   import { AttributesBar, KeyedAttribute, createQuery, getAttribute, getClient } from '@hcengineering/presentation'
   import setting, { settingId } from '@hcengineering/setting'
@@ -38,7 +38,13 @@
 
   function updateKeys (_class: Ref<Class<Doc>>, ignoreKeys: string[], to: Ref<Class<Doc>> | undefined): void {
     const filtredKeys = getFiltredKeys(hierarchy, _class, ignoreKeys, to)
-    keys = filtredKeys.filter((key) => !isCollectionAttr(hierarchy, key) || allowedCollections.includes(key.key))
+    keys = filtredKeys
+      .filter((key) => !isCollectionAttr(hierarchy, key) || allowedCollections.includes(key.key))
+      .sort((a, b) => {
+        const rankA = a.attr.rank ?? toRank(a.attr._id) ?? ''
+        const rankB = b.attr.rank ?? toRank(b.attr._id) ?? ''
+        return rankA.localeCompare(rankB)
+      })
   }
 
   $: updateKeys(_class, ignoreKeys, to)

server-plugins/process-resources/src/functions.ts

@@ -473,7 +473,9 @@ export async function CreateCard (
   }
   const _id = generateId<Card>()
   const newContent =
-    content !== undefined ? await getContent(control, content, _id, _class as Ref<Class<Card>>) : undefined
+    content !== undefined && !isEmpty(content)
+      ? await getContent(control, content, _id, _class as Ref<Class<Card>>)
+      : content
   const data = {
     title,
     ...attrs