Add create new Kanban list panel (#1299)

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

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

@@ -17,10 +17,11 @@
 <script lang="ts">
   import { Card } from '@anticrm/board'
   import { Class, FindOptions, Ref, SortingOrder } from '@anticrm/core'
-  import { createQuery } from '@anticrm/presentation'
+  import { createQuery, getClient } from '@anticrm/presentation'
   import type { Kanban, SpaceWithStates, State } from '@anticrm/task'
+  import { calcRank } from '@anticrm/task'
   import task from '@anticrm/task'
-  import { Kanban as KanbanUI } from '@anticrm/task-resources'
+  import { Kanban as KanbanUI, KanbanPanelEmpty } from '@anticrm/task-resources'
   
   export let _class: Ref<Class<Card>>
   export let space: Ref<SpaceWithStates>
@@ -41,8 +42,25 @@
       }
     })
   }
+
+  const client = getClient()
+
+  async function addItem (title: any) {
+    const lastOne = await client.findOne(
+        task.class.State,
+        { space },
+        { sort: { rank: SortingOrder.Descending } }
+    )
+    await client.createDoc(task.class.State, space, {
+        title,
+        color: 9,
+        rank: calcRank(lastOne, undefined)
+    })
+  }
 </script>
 
 <KanbanUI {_class} {space} {search} {options} stateQuery={{ doneState: null }} states={states}>
-  // eslint-disable-next-line no-undef  
+  <svelte:fragment slot='additionalPanel'>
+    <KanbanPanelEmpty on:add={(e) => {addItem(e.detail)}} />
+  </svelte:fragment>
 </KanbanUI>

plugins/task-assets/lang/en.json

@@ -28,6 +28,9 @@
     "MarkAsDone": "Mark as done",
     "MarkAsUndone": "Mark as undone",
     "Kanban": "Kanban",
+    "NewList": "Add another list",
+    "AddList": "Add list",
+    "NewListPlaceholder": "Enter list title...",
     
     "ApplicationLabelTask": "Tasks",
     "Projects": "Projects",

plugins/task-assets/lang/ru.json

@@ -28,6 +28,9 @@
     "MarkAsDone": "Отметить выполненным",
     "MarkAsUndone": "Отметить невыполненным",
     "Kanban": "Канбан",
+    "NewList": "Добавить еще одну колонку",
+    "AddList": "Добавить колонку",
+    "NewListPlaceholder": "Введите заголовок колонки...",
     
     "ApplicationLabelTask": "Задачи",
     "Projects": "Проекты",

plugins/task-resources/src/components/kanban/Kanban.svelte

@@ -205,7 +205,7 @@
               {/each}
             </KanbanPanel>
           {/each}
-          <!-- <KanbanPanelEmpty label={'Add new column'} /> -->
+          <slot name="additionalPanel"/>
         </div>
       </ScrollBox>
     </div>

plugins/task-resources/src/components/kanban/KanbanPanelEmpty.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    import { IconAdd, Button, EditBox, ActionIcon, IconClose } from '@anticrm/ui'
+    import { createEventDispatcher } from 'svelte';
+    import tracker from '../../plugin';
+
+    const dispatch = createEventDispatcher()
+
+    let isAdding = false
+    let newPanelTitle = ''
+
+    async function onAdd () {
+        if (!newPanelTitle) return;
+        dispatch('add', newPanelTitle)
+        newPanelTitle = ''
+        isAdding = false
+    }
+</script>
+
+<div  class="panel-container step-lr75">
+    {#if isAdding}
+        <EditBox
+            bind:value={newPanelTitle}
+            maxWidth={'19rem'}
+            placeholder={tracker.string.NewListPlaceholder}
+            focus={true}
+        />
+        <div class="list-add-controls">
+            <Button
+                icon={IconAdd}
+                label={tracker.string.AddList}
+                justify={'left'}
+                on:click={() => { onAdd() }}
+            />
+            <ActionIcon
+                icon={IconClose}
+                size={'large'}
+                action={() => { isAdding = false }}
+            />
+        </div>
+    {:else}
+        <Button
+        icon={IconAdd}
+        label={tracker.string.NewList}
+        justify={'left'}
+        on:click={() => { isAdding = true }}
+        />
+    {/if}
+</div>
+
+<style lang="scss">
+    .panel-container {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        width: 20rem;
+        height: fit-content;
+        background-color: transparent;
+        border: .125rem solid transparent;
+        border-radius: .25rem;
+    }
+    .list-add-controls {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin: 0.5rem 0 0 0;
+    }
+</style>

plugins/task-resources/src/index.ts

@@ -44,6 +44,7 @@ import AssignedTasks from './components/AssignedTasks.svelte'
 import task from './plugin'
 
 export { default as Kanban } from './components/kanban/Kanban.svelte'
+export { default as KanbanPanelEmpty } from './components/kanban/KanbanPanelEmpty.svelte'
 
 async function createTask (object: Doc): Promise<void> {
   showPopup(CreateTask, { parent: object._id, space: object.space })

plugins/task-resources/src/plugin.ts

@@ -34,6 +34,9 @@ export default mergeIds(taskId, task, {
     TodoDescriptionPlaceholder: '' as IntlString,
     Todos: '' as IntlString,
     TodoName: '' as IntlString,
+    NewList: '' as IntlString,
+    AddList: '' as IntlString,
+    NewListPlaceholder: '' as IntlString,
 
     MakePrivate: '' as IntlString,
     MakePrivateDescription: '' as IntlString,