mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-23 03:22:19 +03:00
Add create new Kanban list panel (#1299)
Signed-off-by: Dvinyanin Alexandr <dvinyanin.alexandr@gmail.com>
This commit is contained in:
parent
a53277f7aa
commit
6c35b112ae
@ -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>
|
||||
|
@ -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",
|
||||
|
@ -28,6 +28,9 @@
|
||||
"MarkAsDone": "Отметить выполненным",
|
||||
"MarkAsUndone": "Отметить невыполненным",
|
||||
"Kanban": "Канбан",
|
||||
"NewList": "Добавить еще одну колонку",
|
||||
"AddList": "Добавить колонку",
|
||||
"NewListPlaceholder": "Введите заголовок колонки...",
|
||||
|
||||
"ApplicationLabelTask": "Задачи",
|
||||
"Projects": "Проекты",
|
||||
|
@ -205,7 +205,7 @@
|
||||
{/each}
|
||||
</KanbanPanel>
|
||||
{/each}
|
||||
<!-- <KanbanPanelEmpty label={'Add new column'} /> -->
|
||||
<slot name="additionalPanel"/>
|
||||
</div>
|
||||
</ScrollBox>
|
||||
</div>
|
||||
|
@ -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>
|
@ -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 })
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user