magnus/Notes
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases 4 Packages Wiki Activity

Move item in checklist

Browse source
This commit is contained in:
Magnus Åhall 2024-01-13 10:01:10 +01:00
parent d0f410323e
commit 44f5d92815
3 changed files with 125 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

73
static/js/checklist.mjs
View file

@ -16,8 +16,7 @@ export class ChecklistGroup {
let item = new ChecklistItem(itemData)
item.checklistGroup = this
return item
}
).sort(ChecklistItem.sort)
})
else
this[key] = data[key]
})
@ -92,6 +91,14 @@ export class ChecklistItem {
})
.catch(errCallback)
}//}}}
move(to, okCallback) {//{{{
window._app.current.request('/node/checklist_item/move', {
ChecklistItemID: this.ID,
AfterItemID: to.ID,
})
.then(okCallback)
.catch(_app.current.responseError)
}//}}}
}
export class Checklist extends Component {
@ -100,11 +107,14 @@ export class Checklist extends Component {
this.edit = signal(true)
this.dragItemSource = null
this.dragItemTarget = null
this.groupElements = {}
this.state = {
confirmDeletion: true,
}
window._checklist = this
}//}}}
render({ groups }, { confirmDeletion }) {//{{{
this.groupElements = {}
if (groups.length == 0)
return
@ -112,7 +122,10 @@ export class Checklist extends Component {
groups = []
groups.sort(ChecklistGroup.sort)
let groupElements = groups.map(group => html`<${ChecklistGroupElement} key="group-${group.ID}" ui=${this} group=${group} />`)
let groupElements = groups.map(group => {
this.groupElements[group.ID] = createRef()
return html`<${ChecklistGroupElement} ref=${this.groupElements[group.ID]} key="group-${group.ID}" ui=${this} group=${group} />`
})
let edit = 'edit-list-gray.svg'
let confirmDeletionEl = ''
@ -126,9 +139,9 @@ export class Checklist extends Component {
`
}
let addGroup = ()=>{
let addGroup = () => {
if (this.edit.value)
return html`<img src="/images/${_VERSION}/add-gray.svg" onclick=${()=>this.addGroup()} />`
return html`<img src="/images/${_VERSION}/add-gray.svg" onclick=${() => this.addGroup()} />`
}
return html`
@ -187,10 +200,12 @@ class ChecklistGroupElement extends Component {
this.label = createRef()
}//}}}
render({ ui, group }) {//{{{
let items = ({ ui, group }) =>
group.items.map(item => html`<${ChecklistItemElement} key="item-${item.ID}" ui=${ui} group=${this} item=${item} />`)
let items = ({ ui, group }) =>
group.items
.sort(ChecklistItem.sort)
.map(item => html`<${ChecklistItemElement} key="item-${item.ID}" ui=${ui} group=${this} item=${item} />`)
let label = ()=>html`<div class="label" style="cursor: pointer" ref=${this.label} onclick=${()=>this.editLabel()}>${group.Label}</div>`
let label = () => html`<div class="label" style="cursor: pointer" ref=${this.label} onclick=${() => this.editLabel()}>${group.Label}</div>`
return html`
<div class="checklist-group-container">
@ -266,7 +281,7 @@ class ChecklistItemElement extends Component {
this.label = createRef()
}//}}}
render({ ui, item }, { checked, dragTarget }) {//{{{
let checkbox = ()=>{
let checkbox = () => {
if (ui.edit.value)
return html`<label ref=${this.label} onclick=${() => this.editLabel()} style="cursor: pointer">${item.Label}</label>`
else
@ -284,9 +299,9 @@ class ChecklistItemElement extends Component {
`
}//}}}
componentDidMount() {//{{{
this.base.addEventListener('dragstart', ()=>this.dragStart())
this.base.addEventListener('dragend', ()=>this.dragEnd())
this.base.addEventListener('dragenter', evt=>this.dragEnter(evt))
this.base.addEventListener('dragstart', () => this.dragStart())
this.base.addEventListener('dragend', () => this.dragEnd())
this.base.addEventListener('dragenter', evt => this.dragEnter(evt))
}//}}}
update(checked) {//{{{
@ -348,11 +363,37 @@ class ChecklistItemElement extends Component {
this.props.ui.dragTarget(this)
}//}}}
dragEnd() {//{{{
console.log(
this.props.ui.dragItemSource.props.item.Label,
this.props.ui.dragItemTarget.props.item.Label,
)
let groups = this.props.ui.props.groups
let from = this.props.ui.dragItemSource.props.item
let to = this.props.ui.dragItemTarget.props.item
this.props.ui.dragReset()
if (from.ID == to.ID)
return
let fromGroup = groups.find(g => g.ID == from.GroupID)
let toGroup = groups.find(g => g.ID == to.GroupID)
from.Order = to.Order
from.GroupID = toGroup.ID
toGroup.items.forEach(i => {
if (i.ID == from.ID)
return
if (i.Order <= to.Order)
i.Order--
})
if (fromGroup.ID != toGroup.ID) {
fromGroup.items = fromGroup.items.filter(i => i.ID != from.ID)
toGroup.items.push(from)
}
this.props.ui.groupElements[fromGroup.ID].current.forceUpdate()
this.props.ui.groupElements[toGroup.ID].current.forceUpdate()
from.move(to, ()=>console.log('ok'))
}//}}}
}