Custom list header (#1529)

Signed-off-by: Dvinyanin Alexandr <dvinyanin.alexandr@gmail.com>

plugins/board-resources/src/components/KanbanPanelEmpty.svelte

@@ -41,6 +41,7 @@
       icon={IconAdd}
       label={board.string.NewList}
       justify={'left'}
+      kind={'transparent'}
       on:click={() => {
         isAdding = true
       }}

plugins/board-resources/src/components/KanbanView.svelte

@@ -26,6 +26,7 @@
   import AddCard from './add-card/AddCard.svelte'
   import KanbanCard from './KanbanCard.svelte'
   import KanbanPanelEmpty from './KanbanPanelEmpty.svelte'
+  import ListHeader from './ListHeader.svelte'
 
   export let _class: Ref<Class<Card>>
   export let space: Ref<SpaceWithStates>
@@ -45,7 +46,7 @@
   $: if (kanban !== undefined) {
     statesQuery.query(
       task.class.State,
-      { space: kanban.space },
+      { space: kanban.space, isArchived: { $nin: [true] } },
       (result) => {
         states = result
       },
@@ -132,6 +133,10 @@
     />
   </svelte:fragment>
 
+  <svelte:fragment slot="header" let:state>
+    <ListHeader {state}/>
+  </svelte:fragment>
+
   <svelte:fragment slot="afterCard" let:space={targetSpace} let:state={targetState}>
     <AddCard space={targetSpace} state={targetState} />
   </svelte:fragment>

plugins/board-resources/src/components/ListHeader.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { Button, getPlatformColor, IconEdit, showPopup } from '@anticrm/ui'
+    import { State } from '@anticrm/task'
+    import { getElementPopupAlignment } from '../utils/PopupUtils'
+    import ListInlineActions from './editor/ListInlineActions.svelte'
+    export let state: State
+
+    let ref: HTMLElement
+
+    function onArchive () {
+        showPopup(
+            ListInlineActions,
+            { value: state },
+            getElementPopupAlignment(ref, { h: 'right', v: 'bottom' })
+        )
+    }
+</script>
+
+<div class="flex-col h-16">
+    <div class="h-2 border-radius-1" style="background-color: {getPlatformColor(state.color)}" />
+    <div class="flex-between h-full font-medium pr-2 pl-4" bind:this={ref}>
+        <span class="lines-limit-2">{state.title}</span>
+        <Button icon={IconEdit} kind="transparent" on:click={onArchive} />
+    </div>
+</div>

plugins/board-resources/src/components/editor/ListInlineActions.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { getClient } from '@anticrm/presentation'
+  import { State } from '@anticrm/task'
+  import { Button } from '@anticrm/ui'
+  import board from '../../plugin'
+
+  export let value: State
+
+  const client = getClient()
+</script>
+
+{#if value && !value.isArchived}
+  <div class="flex-col flex-gap-1">
+    <Button
+      icon={board.icon.Card}
+      label={board.string.ToArchive}
+      kind="no-border"
+      justify="left"
+      on:click={async () => {
+        client.update(value, { isArchived: true })
+      }} />
+  </div>
+{/if}