Sortable actions (#9888)

plugins/process-resources/src/components/settings/StatesInlineEditor.svelte

@@ -17,11 +17,11 @@
   import { translate } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
   import { Process, State } from '@hcengineering/process'
+  import { makeRank } from '@hcengineering/rank'
   import { Button, IconAdd, Label } from '@hcengineering/ui'
+  import { SortableDocList } from '@hcengineering/view-resources'
   import plugin from '../../plugin'
   import StateInlineEditor from './StateInlineEditor.svelte'
-  import { makeRank } from '@hcengineering/rank'
-  import { SortableList } from '@hcengineering/view-resources'
 
   export let process: Process
   export let states: State[]
@@ -49,11 +49,11 @@
   <div class="header w-full p-4">
     <Label label={plugin.string.States} />
   </div>
-  <SortableList _class={plugin.class.State} query={{ process: process._id }} isAddButtonHidden>
+  <SortableDocList _class={plugin.class.State} query={{ process: process._id }}>
     <svelte:fragment slot="object" let:value>
       <StateInlineEditor value={toState(value)} />
     </svelte:fragment>
-  </SortableList>
+  </SortableDocList>
   {#if !readonly}
     <Button kind={'ghost'} width={'100%'} icon={IconAdd} label={plugin.string.AddState} on:click={addState} />
   {/if}

plugins/process-resources/src/components/settings/TransitionEditor.svelte

@@ -41,6 +41,7 @@
   import Navigator from './Navigator.svelte'
   import TransitionPresenter from './TransitionPresenter.svelte'
   import TriggerPresenter from './TriggerPresenter.svelte'
+  import { SortableList } from '@hcengineering/view-resources'
 
   export let _id: Ref<Transition>
   export let visibleSecondNav: boolean = true
@@ -136,6 +137,11 @@
   function edit (): void {
     $settingsStore = { id: _id, component: AsideTransitionEditor, props: { process, transition: value } }
   }
+
+  async function moveHadler (): Promise<void> {
+    if (value === undefined) return
+    await client.update(value, { actions: value.actions })
+  }
 </script>
 
 <div class="hulyComponent-content__container columns">
@@ -169,20 +175,22 @@
               <div class="label w-full p-4">
                 <Label label={plugin.string.Actions} />
               </div>
-              {#each value.actions as action}
-                <Button
-                  justify="left"
-                  kind="ghost"
-                  width="100%"
-                  on:click={() => {
-                    editAction(action)
-                  }}
-                >
-                  <svelte:fragment slot="content">
-                    <ActionPresenter {action} {process} readonly={false} />
-                  </svelte:fragment>
-                </Button>
-              {/each}
+              <SortableList bind:items={value.actions} on:move={moveHadler}>
+                <svelte:fragment slot="object" let:value>
+                  <Button
+                    justify="left"
+                    kind="ghost"
+                    width="100%"
+                    on:click={() => {
+                      editAction(value)
+                    }}
+                  >
+                    <svelte:fragment slot="content">
+                      <ActionPresenter action={value} {process} readonly={false} />
+                    </svelte:fragment>
+                  </Button>
+                </svelte:fragment>
+              </SortableList>
               <Button
                 kind={'ghost'}
                 width={'100%'}

plugins/process-resources/src/components/settings/TransitionsInlineEditor.svelte

@@ -20,7 +20,7 @@
   import AddTransitionPopup from './AddTransitionPopup.svelte'
   import TransitionPresenter from './TransitionPresenter.svelte'
   import TriggerPresenter from './TriggerPresenter.svelte'
-  import { SortableList } from '@hcengineering/view-resources'
+  import { SortableDocList } from '@hcengineering/view-resources'
 
   export let process: Process
   export let readonly: boolean
@@ -47,7 +47,7 @@
   <div class="header w-full p-4">
     <Label label={plugin.string.Transitions} />
   </div>
-  <SortableList _class={plugin.class.Transition} query={{ process: process._id }} isAddButtonHidden>
+  <SortableDocList _class={plugin.class.Transition} query={{ process: process._id }}>
     <svelte:fragment slot="object" let:value>
       {@const transition = toTransition(value)}
       <Button
@@ -66,7 +66,7 @@
         </svelte:fragment>
       </Button>
     </svelte:fragment>
-  </SortableList>
+  </SortableDocList>
   {#if !readonly}
     <Button kind={'ghost'} width={'100%'} icon={IconAdd} label={plugin.string.AddTransition} on:click={addTransition} />
   {/if}