From c8138e0438bb0a4d19a36180032d00c1d4ef9ea2 Mon Sep 17 00:00:00 2001
From: Alex <41288429+Dvinyanin@users.noreply.github.com>
Date: Thu, 12 May 2022 15:00:58 +0700
Subject: [PATCH] Board: Refactor AddPanel with TextAreaEditor (#1720)

Signed-off-by: Dvinyanin Alexandr <dvinyanin.alexandr@gmail.com>
---
 packages/kanban/src/components/Kanban.svelte  |  2 +-
 ...riaEditor.svelte => TextAreaEditor.svelte} |  0
 packages/ui/src/index.ts                      |  2 +-
 .../src/components/AddPanel.svelte            | 41 +++++++++++
 .../src/components/KanbanPanelEmpty.svelte    | 69 -------------------
 .../src/components/KanbanView.svelte          |  6 +-
 6 files changed, 46 insertions(+), 74 deletions(-)
 rename packages/ui/src/components/{TextAriaEditor.svelte => TextAreaEditor.svelte} (100%)
 create mode 100644 plugins/board-resources/src/components/AddPanel.svelte
 delete mode 100644 plugins/board-resources/src/components/KanbanPanelEmpty.svelte

diff --git a/packages/kanban/src/components/Kanban.svelte b/packages/kanban/src/components/Kanban.svelte
index 843c06a46f..2aa5646c68 100644
--- a/packages/kanban/src/components/Kanban.svelte
+++ b/packages/kanban/src/components/Kanban.svelte
@@ -346,7 +346,7 @@
             </div>
           </div>
         {/each}
-        <slot name="additionalPanel" />
+        <slot name="afterPanel" />
       </div>
     </ScrollBox>
   </div>
diff --git a/packages/ui/src/components/TextAriaEditor.svelte b/packages/ui/src/components/TextAreaEditor.svelte
similarity index 100%
rename from packages/ui/src/components/TextAriaEditor.svelte
rename to packages/ui/src/components/TextAreaEditor.svelte
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index e51a0f3a68..fddb1d6ea4 100644
--- a/packages/ui/src/index.ts
+++ b/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'
diff --git a/plugins/board-resources/src/components/AddPanel.svelte b/plugins/board-resources/src/components/AddPanel.svelte
new file mode 100644
index 0000000000..2a51391d5b
--- /dev/null
+++ b/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>
diff --git a/plugins/board-resources/src/components/KanbanPanelEmpty.svelte b/plugins/board-resources/src/components/KanbanPanelEmpty.svelte
deleted file mode 100644
index 5526688c1e..0000000000
--- a/plugins/board-resources/src/components/KanbanPanelEmpty.svelte
+++ /dev/null
@@ -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>
diff --git a/plugins/board-resources/src/components/KanbanView.svelte b/plugins/board-resources/src/components/KanbanView.svelte
index cf99d2e51a..15b1888acf 100644
--- a/plugins/board-resources/src/components/KanbanView.svelte
+++ b/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)
       }}