Add create new Kanban list panel (#1299)

Signed-off-by: Dvinyanin Alexandr <dvinyanin.alexandr@gmail.com>
This commit is contained in:
Alex 2022-04-07 21:52:04 +07:00 committed by GitHub
parent a53277f7aa
commit 6c35b112ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 99 additions and 4 deletions

View File

@ -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>

View File

@ -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",

View File

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

View File

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

View File

@ -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>

View File

@ -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 })

View File

@ -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,