PR review fixes

Signed-off-by: Sergey Semenov <lvfx@ya.ru>
2026-09-29 04:55:03 +02:00 · 2022-04-11 16:43:55 +07:00
parent a1e557a9b9
commit 8be2dabd43
8 changed files with 217 additions and 12 deletions
@@ -22,7 +22,8 @@
  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>
  export let search: string
@@ -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>
@@ -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>
@@ -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>