mirror of
https://github.com/hcengineering/platform.git
synced 2026-09-01 04:38:50 +02:00
85 lines
3.3 KiB
Svelte
85 lines
3.3 KiB
Svelte
<!--
|
|
// Copyright © 2024 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 { IntlString } from '@hcengineering/platform'
|
|
import type { Project } from '@hcengineering/tracker'
|
|
import type { ToDo } from '@hcengineering/time'
|
|
import type { ToDosMode } from '..'
|
|
import { AccordionItem, getPlatformColorDef, getPlatformColorForTextDef, themeStore } from '@hcengineering/ui'
|
|
import { IconWithEmoji, getClient } from '@hcengineering/presentation'
|
|
import { makeRank } from '@hcengineering/task'
|
|
import tracker from '@hcengineering/tracker'
|
|
import view from '@hcengineering/view'
|
|
import ToDoDraggable from './ToDoDraggable.svelte'
|
|
import ToDoElement from './ToDoElement.svelte'
|
|
import time from '../plugin'
|
|
import { dragging } from '../dragging'
|
|
|
|
export let todos: ToDo[]
|
|
export let project: Project | false | undefined = undefined
|
|
export let mode: ToDosMode
|
|
export let groupName: IntlString
|
|
|
|
const client = getClient()
|
|
|
|
let projectId: string | false
|
|
|
|
$: id = project === undefined ? groupName : `group:${groupName}_project:${project === false ? 'none' : project?._id}`
|
|
$: icon = project
|
|
? project.icon === view.ids.IconWithEmoji
|
|
? IconWithEmoji
|
|
: (project.icon ?? tracker.icon.Home)
|
|
: undefined
|
|
$: iconProps = project
|
|
? project.icon === view.ids.IconWithEmoji
|
|
? { icon: project.color }
|
|
: {
|
|
fill:
|
|
project.color !== undefined && typeof project.color !== 'string'
|
|
? getPlatformColorDef(project.color, $themeStore.dark).icon
|
|
: getPlatformColorForTextDef(project.name, $themeStore.dark).icon
|
|
}
|
|
: undefined
|
|
$: title = project ? project.name : undefined
|
|
$: label = title ? undefined : time.string.WithoutProject
|
|
$: projectId = project ? project._id : false
|
|
|
|
$: draggingItem = $dragging.item
|
|
$: draggingItemIndex = $dragging.itemIndex
|
|
|
|
async function handleDrop (event: CustomEvent<{ event: DragEvent, index: number }>): Promise<void> {
|
|
if (draggingItem === null || draggingItemIndex === null) return
|
|
|
|
const droppingIndex = event.detail.index
|
|
|
|
const [previousItem, nextItem] = [
|
|
todos[draggingItemIndex < droppingIndex ? droppingIndex : droppingIndex - 1],
|
|
todos[draggingItemIndex < droppingIndex ? droppingIndex + 1 : droppingIndex]
|
|
]
|
|
|
|
const newRank = makeRank(previousItem?.rank, nextItem?.rank)
|
|
await client.update(draggingItem, { rank: newRank })
|
|
}
|
|
</script>
|
|
|
|
<AccordionItem {id} {icon} {iconProps} {title} {label} size={'medium'} nested hiddenHeader={project === false}>
|
|
{#each todos as todo, index}
|
|
<ToDoDraggable {todo} {index} {groupName} {projectId} on:drop={handleDrop}>
|
|
<ToDoElement {todo} planned={mode !== 'unplanned'} />
|
|
</ToDoDraggable>
|
|
{/each}
|
|
</AccordionItem>
|