hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-12-24 12:06:57 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Drag-n-Drop in EditStatuses (#200)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-09-17 14:23:37 +03:00 committed by GitHub
parent 035b4431fb
commit a1f3a3454f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 37 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
plugins/workbench-resources/src/components/EditStatuses.svelte
View File

@ -15,27 +15,52 @@
-->
<script lang="ts">
import type { Ref, Space, State } from '@anticrm/core'
import { Dialog } from '@anticrm/ui'
import { createQuery } from '@anticrm/presentation'
import type { Ref, Space, State } from '@anticrm/core'
import { Dialog } from '@anticrm/ui'
import { createQuery } from '@anticrm/presentation'
import core from '@anticrm/core'
import core from '@anticrm/core'
export let _id: Ref<Space>
export let _id: Ref<Space>
let states: State[] = []
const query = createQuery()
$: query.query(core.class.State, { machine: _id }, result => { states = result })
let states: State[] = []
const query = createQuery()
$: query.query(core.class.State, { machine: _id }, result => { states = result })
let selected: string | undefined = undefined
</script>
<Dialog label="Edit Statuses">
{#each states as state}
<div>{state.title}</div>
<div class="flex-center states" style="background-color: {state.color}" draggable={true}
on:dragover|preventDefault={() => {
console.log(`Dragging ${selected} over ${state._id} (${state.title})`)
}}
on:drop|preventDefault={() => {
console.log(`Drop ${selected} into ${state._id} (${state.title})`)
}}
on:dragstart={() => {
selected = state._id
console.log('Start dragging: ' + selected)
}}
on:dragend={() => {
console.log('End dragging: ' + selected)
selected = undefined
}}
>
{state.title}
</div>
{/each}
</Dialog>
<style lang="scss">
.states {
padding: .25rem .5rem;
color: #fff;
border-radius: .5rem;
user-select: none;
cursor: grabbing;
}
</style>