Merge pull request #1312 from hcengineering/feature-1264

Board: Add `Add Card` button

packages/kanban/src/components/Kanban.svelte

@@ -218,7 +218,7 @@
                 </div>
               </div>
             {/each}
-            <slot name="afterCard" {state} />
+            <slot name="afterCard" {space} {state} />
           </KanbanPanel>
         {/each}
         <slot name="additionalPanel" />

packages/ui/src/components/TextArea.svelte

@@ -16,17 +16,37 @@
 <script lang="ts">
   import type { IntlString } from '@anticrm/platform'
   import Label from './Label.svelte'
+  import { createEventDispatcher } from 'svelte'
+  import plugin from '../plugin'
+  import { translate } from '@anticrm/platform'
 
-  export let label: IntlString | undefined
-  export let width: string | undefined
-  export let height: string | undefined
-  export let value: string | undefined
-  export let placeholder: string | undefined
+  export let label: IntlString | undefined = undefined
+  export let width: string | undefined = undefined
+  export let height: string | undefined = undefined
+  export let value: string | undefined = undefined
+  export let placeholder: IntlString = plugin.string.EditBoxPlaceholder
+  export let placeholderParam: any | undefined = undefined
+  export let noFocusBorder: boolean = false
+
+  let input: HTMLTextAreaElement
+  let phTraslate: string = ''
+
+  $: translate(placeholder, placeholderParam ?? {}).then(res => { phTraslate = res })
+
+  export function focus() {
+    input.focus()
+  }
+
+  const dispatch = createEventDispatcher()
+
+  const onKeydown = (e: any) => {
+    dispatch('keydown', e)
+  }
 </script>
 
-<div class="textarea" style="{width ? `width: ${width}px;` : ''} {height ? `height: ${height}px;` : ''}">
+<div class="textarea" class:no-focus-border={noFocusBorder} style:width={width} style:height={height}>
   {#if label}<div class="label"><Label label={label} /></div>{/if}
-  <textarea bind:value {placeholder} />
+  <textarea bind:value bind:this={input} on:keydown={onKeydown} placeholder={phTraslate} />
 </div>
 
 <style lang="scss">
@@ -69,4 +89,15 @@
       }
     }
   }
+
+  .no-focus-border {
+    textarea {
+      font-weight: 500;
+      font-size: 1rem;
+
+      &:focus {
+        border-color: transparent;
+      }
+    }
+  }
 </style>

plugins/board-assets/lang/en.json

@@ -50,6 +50,9 @@
     "ShowDetails": "Show Details",
     "NewList": "Add another list",
     "AddList": "Add list",
-    "NewListPlaceholder": "Enter list title..."
+    "NewListPlaceholder": "Enter list title...",
+    "AddACard": "Add a card",
+    "AddCard": "Add card",
+    "CardTitlePlaceholder": "Enter a title for this card..."
   }
 }

plugins/board-assets/lang/ru.json

@@ -50,6 +50,9 @@
     "ShowDetails": "Показать",
     "NewList": "Добавить еще одну колонку",
     "AddList": "Добавить колонку",
-    "NewListPlaceholder": "Введите заголовок колонки..."
+    "NewListPlaceholder": "Введите заголовок колонки...",
+    "AddACard": "Добавить карточку",
+    "AddCard": "Добавить карточку",
+    "CardTitlePlaceholder": "Введите заголовок для этой карточки..."
   }
 }

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

@@ -22,6 +22,7 @@
   import task, { calcRank } from '@anticrm/task'
   import KanbanCard from './KanbanCard.svelte'
   import KanbanPanelEmpty from './KanbanPanelEmpty.svelte'
+  import AddCard from './add-card/AddCard.svelte'
   
   export let _class: Ref<Class<Card>>
   export let space: Ref<SpaceWithStates>
@@ -81,4 +82,8 @@
   <svelte:fragment slot='additionalPanel'>
     <KanbanPanelEmpty on:add={(e) => { addItem(e.detail) }} />
   </svelte:fragment>
+
+  <svelte:fragment slot="afterCard" let:space={targetSpace} let:state={targetState}>
+    <AddCard space={targetSpace} state={targetState}/>
+  </svelte:fragment>
 </KanbanUI>

plugins/board-resources/src/components/add-card/AddCard.svelte

@@ -0,0 +1,85 @@
+<!--
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import type { Card as BoardCard } from '@anticrm/board'
+  import board from '../../plugin'
+  import task, { calcRank } from '@anticrm/task'
+  import { AttachedData, generateId, Ref, SortingOrder, Space } from '@anticrm/core'
+  import { IconAdd, Button } from '@anticrm/ui'
+  import { getClient } from '@anticrm/presentation'
+  import AddCardEditor from './AddCardEditor.svelte'
+
+  export let space: Ref<Space>
+  export let state: any
+
+  const client = getClient()
+  let newCardId = generateId() as Ref<BoardCard>
+
+  async function addCard(title: string) {
+    const sequence = await client.findOne(task.class.Sequence, { attachedTo: board.class.Card })
+    if (sequence === undefined) {
+      throw new Error('sequence object not found')
+    }
+
+    const lastOne = await client.findOne(
+      board.class.Card,
+      { state: state._id },
+      { sort: { rank: SortingOrder.Descending } }
+    )
+    const incResult = await client.update(sequence, { $inc: { sequence: 1 } }, true)
+
+    const value: AttachedData<BoardCard> = {
+      state: state._id,
+      doneState: null,
+      number: (incResult as any).object.sequence,
+      title: title,
+      rank: calcRank(lastOne, undefined),
+      assignee: null,
+      description: '',
+      members: [],
+      location: ''
+    }
+
+    await client.addCollection(board.class.Card, space, space, board.class.Board, 'cards', value, newCardId)
+
+    newCardId = generateId() as Ref<BoardCard>
+  }
+
+  let isOpened = false
+
+  const onClose = () => {
+    isOpened = false
+  }
+
+  const onOpen = (e: any) => {
+    isOpened = true
+    e.preventDefault()
+  }
+</script>
+
+<div class="flex-col step-tb75">
+  {#if isOpened}
+    <AddCardEditor {onClose} onAdd={addCard} />
+  {:else}
+    <Button
+      icon={IconAdd}
+      label={board.string.AddACard}
+      kind="transparent"
+      width={'100%'}
+      justify={'left'}
+      on:click={onOpen}
+    />
+  {/if}
+</div>

plugins/board-resources/src/components/add-card/AddCardEditor.svelte

@@ -0,0 +1,75 @@
+<script lang='ts'>
+  import { Button, TextArea, ActionIcon, IconClose } from '@anticrm/ui'
+  import board from '../../plugin'
+
+  export let onClose: () => void
+  export let onAdd: (title: string) => Promise<void>
+
+  let title = ''
+  let inputRef: TextArea
+  let openedContainerRef: HTMLDivElement
+
+  async function addCard() {
+    if (!title) {
+      inputRef.focus()
+      return
+    }
+
+    await onAdd(title)
+    title = ''
+  }
+
+  async function onClickOutside(e: any) {
+    if (openedContainerRef && !openedContainerRef.contains(e.target) && !e.defaultPrevented) {
+      if (title) {
+        await onAdd(title)
+      }
+
+      onClose()
+    }
+  }
+
+  const onKeydown = (e: any) => {
+    if (e.detail.key !== 'Enter') {
+      return;
+    }
+
+    e.detail.preventDefault()
+    addCard()
+  };
+
+  $: if (inputRef && !title) {
+    inputRef.focus()
+  }
+</script>
+
+<svelte:window on:click={onClickOutside}/>
+<div bind:this={openedContainerRef}>
+    <div class="card-container">
+    <TextArea
+        placeholder={board.string.CardTitlePlaceholder}
+        bind:this={inputRef}
+        bind:value={title}
+        on:keydown={onKeydown}
+        noFocusBorder={true}
+    />
+    </div>
+    <div class="flex-row-center mt-3">
+    <Button label={board.string.AddCard} kind="no-border" on:click={addCard} />
+    <div class="ml-2" on:click={onClose}>
+        <ActionIcon icon={IconClose} size={'large'} action={onClose} />
+    </div>
+    </div>
+</div>
+
+<style lang="scss">
+  .card-container {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem 1rem;
+    background-color: var(--board-card-bg-color);
+    border: 1px solid var(--board-card-bg-color);
+    border-radius: 0.25rem;
+    user-select: none;
+  }
+</style>

plugins/board-resources/src/plugin.ts

@@ -71,7 +71,10 @@ export default mergeIds(boardId, board, {
     ShowDetails: '' as IntlString,
     NewList: '' as IntlString,
     AddList: '' as IntlString,
-    NewListPlaceholder: '' as IntlString
+    NewListPlaceholder: '' as IntlString,
+    AddACard: '' as IntlString,
+    AddCard: '' as IntlString,
+    CardTitlePlaceholder: '' as IntlString
   },
   component: {
     CreateCustomer: '' as AnyComponent,