SortableList presenter prop (#2437)

Signed-off-by: Sergei Ogorelkov <sergei.ogorelkov@xored.com>

packages/ui/src/components/Component.svelte

@@ -35,7 +35,7 @@
     {/if}
   {:then Ctor}
     <ErrorBoundary>
-      <Ctor {...props} on:change on:close on:open on:click on:delete>
+      <Ctor {...props} on:change on:close on:open on:click on:delete on:action>
         {#if $$slots.default}
           <slot />
         {/if}

plugins/tags-resources/src/components/TagElementPresenter.svelte

@@ -13,12 +13,14 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { Asset } from '@hcengineering/platform'
   import { TagElement } from '@hcengineering/tags'
-  import { eventToHTMLElement, showPopup } from '@hcengineering/ui'
+  import { AnySvelteComponent, eventToHTMLElement, showPopup } from '@hcengineering/ui'
   import EditTagElement from './EditTagElement.svelte'
   import TagItem from './TagItem.svelte'
 
   export let value: TagElement
+  export let action: Asset | AnySvelteComponent | undefined = undefined
   export let edit: boolean = false
   export let keyTitle: string = ''
 </script>
@@ -31,9 +33,9 @@
         showPopup(EditTagElement, { value, keyTitle }, eventToHTMLElement(evt))
       }}
     >
-      <TagItem element={value} />
+      <TagItem element={value} {action} on:action />
     </div>
   {:else}
-    <TagItem element={value} />
+    <TagItem element={value} {action} on:action />
   {/if}
 {/if}

plugins/tags-resources/src/plugin.ts

@@ -19,7 +19,6 @@ import { Filter } from '@hcengineering/view'
 
 export default mergeIds(tagsId, tags, {
   component: {
-    TagElementPresenter: '' as AnyComponent,
     CategoryPresenter: '' as AnyComponent,
     TagElementCountPresenter: '' as AnyComponent
   },

plugins/tags/src/index.ts

@@ -106,7 +106,8 @@ const tagsPlugin = plugin(tagsId, {
     TagsCategoryBar: '' as AnyComponent,
     TagsAttributeEditor: '' as AnyComponent,
     TagsPresenter: '' as AnyComponent,
-    LabelsPresenter: '' as AnyComponent
+    LabelsPresenter: '' as AnyComponent,
+    TagElementPresenter: '' as AnyComponent
   },
   category: {
     NoCategory: '' as Ref<TagCategory>

plugins/view-resources/src/components/list/SortableList.svelte

@@ -17,7 +17,7 @@
   import { getResource, IntlString } from '@hcengineering/platform'
   import presentation, { createQuery, getClient } from '@hcengineering/presentation'
   import { calcRank, DocWithRank } from '@hcengineering/task'
-  import { Button, Component, IconAdd, Label, Loading } from '@hcengineering/ui'
+  import { AnyComponent, Button, Component, IconAdd, Label, Loading } from '@hcengineering/ui'
   import view, { AttributeModel, ObjectFactory } from '@hcengineering/view'
   import { flip } from 'svelte/animate'
   import { getObjectPresenter } from '../../utils'
@@ -26,7 +26,7 @@
   How to use:
   
   We must add presenter for the "_class" via "AttributePresenter" mixin
-  to be able display the rows list.
+  or pass it through "presenter" prop to be able display the rows list.
 
   To create a new items, we should add "ObjectFactory" mixin also.
 
@@ -39,6 +39,7 @@
   export let label: IntlString | undefined = undefined
   export let query: DocumentQuery<Doc> = {}
   export let queryOptions: FindOptions<Doc> | undefined = undefined
+  export let presenter: AnyComponent | undefined = undefined
   export let presenterProps: Record<string, any> = {}
   export let direction: 'row' | 'column' = 'column'
   export let flipDuration = 200
@@ -134,7 +135,7 @@
     hoveringIndex = null
   }
 
-  $: updateModel(_class, presenterProps)
+  $: !presenter && updateModel(_class, presenterProps)
   $: updateObjectFactory(_class)
   $: itemsQuery.query(_class, query, updateItems, { ...queryOptions, limit: Math.max(queryOptions?.limit ?? 0, 200) })
 
@@ -171,7 +172,7 @@
 
   {#if isLoading}
     <Loading />
-  {:else if model && items}
+  {:else if (presenter || model) && items}
     {@const isVertical = direction === 'column'}
     <div class="flex-gap-1" class:flex-col={isVertical} class:flex={!isVertical} class:flex-wrap={!isVertical}>
       {#each items as item, index (item._id)}
@@ -189,7 +190,11 @@
           on:drop={() => handleDrop(index)}
           on:dragend={resetDrag}
         >
+          {#if presenter}
+            <Component is={presenter} props={{ isDraggable, ...presenterProps, value: item }} />
+          {:else if model}
             <svelte:component this={model.presenter} {isDraggable} {...model.props ?? {}} value={item} />
+          {/if}
         </div>
       {/each}