Board: Refactor AddPanel with TextAreaEditor (#1720)

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

packages/kanban/src/components/Kanban.svelte

@@ -346,7 +346,7 @@
             </div>
           </div>
         {/each}
-        <slot name="additionalPanel" />
+        <slot name="afterPanel" />
       </div>
     </ScrollBox>
   </div>

packages/ui/src/index.ts

@@ -58,7 +58,7 @@ export { default as PopupMenu } from './components/PopupMenu.svelte'
 export { default as SelectPopup } from './components/SelectPopup.svelte'
 export { default as ColorPopup } from './components/ColorPopup.svelte'
 export { default as TextArea } from './components/TextArea.svelte'
-export { default as TextAreaEditor } from './components/TextAriaEditor.svelte'
+export { default as TextAreaEditor } from './components/TextAreaEditor.svelte'
 export { default as Section } from './components/Section.svelte'
 export { default as DatePickerPopup } from './components/calendar/DatePickerPopup.svelte'
 export { default as DatePicker } from './components/calendar/DatePicker.svelte'

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { Button, IconAdd, TextAreaEditor } from '@anticrm/ui'
+  import { createEventDispatcher } from 'svelte'
+  import board from '../plugin'
+
+  const dispatch = createEventDispatcher()
+
+  let isOpened = false
+  let value = ''
+
+  async function onAdd () {
+    if (!value) return
+    dispatch('add', value)
+    value = ''
+    isOpened = false
+  }
+</script>
+
+<div class="flex-col min-w-80 step-lr75">
+  {#if isOpened}
+    <TextAreaEditor
+      bind:value
+      placeholder={board.string.NewListPlaceholder}
+      submitLabel={board.string.AddList}
+      on:submit={onAdd}
+      on:cancel={() => {
+        isOpened = false
+      }}
+    />
+  {:else}
+    <Button
+      icon={IconAdd}
+      label={board.string.NewList}
+      justify={'left'}
+      kind={'transparent'}
+      on:click={() => {
+        isOpened = true
+      }}
+    />
+  {/if}
+</div>

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

@@ -1,69 +0,0 @@
-<script lang="ts">
-  import { ActionIcon, Button, EditBox, IconAdd, IconClose } from '@anticrm/ui'
-  import { createEventDispatcher } from 'svelte'
-  import board 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={board.string.NewListPlaceholder} focus={true} />
-    <div class="list-add-controls">
-      <Button
-        icon={IconAdd}
-        label={board.string.AddList}
-        justify={'left'}
-        on:click={() => {
-          onAdd()
-        }}
-      />
-      <ActionIcon
-        icon={IconClose}
-        size={'large'}
-        action={() => {
-          isAdding = false
-        }}
-      />
-    </div>
-  {:else}
-    <Button
-      icon={IconAdd}
-      label={board.string.NewList}
-      justify={'left'}
-      kind={'transparent'}
-      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: 0.125rem solid transparent;
-    border-radius: 0.25rem;
-  }
-  .list-add-controls {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin: 0.5rem 0 0 0;
-  }
-</style>

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

@@ -32,7 +32,7 @@
   import AddCard from './add-card/AddCard.svelte'
   import CardInlineActions from './editor/CardInlineActions.svelte'
   import KanbanCard from './KanbanCard.svelte'
-  import KanbanPanelEmpty from './KanbanPanelEmpty.svelte'
+  import AddPanel from './AddPanel.svelte'
   import ListHeader from './ListHeader.svelte'
 
   export let _class: Ref<Class<Card>>
@@ -135,8 +135,8 @@
     <KanbanCard object={castObject(object)} />
   </svelte:fragment>
 
-  <svelte:fragment slot="additionalPanel">
-    <KanbanPanelEmpty
+  <svelte:fragment slot="afterPanel">
+    <AddPanel
       on:add={(e) => {
         addItem(e.detail)
       }}