mirror of
https://github.com/MarijnDoeve/TijdVoorDeTest.git
synced 2026-07-06 23:50:16 +02:00
feat: add bank question via modal + dirty modal guard
- Add question in question bank now opens a modal instead of navigating to a full-page form, consistent with the edit modal pattern - Modal closes are blocked by static backdrop once the user has made any change (input, checkbox, drag-reorder, sort, randomize, remove answer) - Dirty state resets when the modal is fully hidden
This commit is contained in:
@@ -45,6 +45,7 @@ export default class extends Controller {
|
||||
|
||||
removeItem(event) {
|
||||
event.target.closest('[data-collection-item]').remove();
|
||||
this._notifyChange();
|
||||
}
|
||||
|
||||
sortAlphabetically() {
|
||||
@@ -56,6 +57,7 @@ export default class extends Controller {
|
||||
});
|
||||
items.forEach(item => this.collectionTarget.appendChild(item));
|
||||
this._syncOrdering();
|
||||
this._notifyChange();
|
||||
}
|
||||
|
||||
randomize() {
|
||||
@@ -66,6 +68,11 @@ export default class extends Controller {
|
||||
}
|
||||
items.forEach(item => this.collectionTarget.appendChild(item));
|
||||
this._syncOrdering();
|
||||
this._notifyChange();
|
||||
}
|
||||
|
||||
_notifyChange() {
|
||||
this.element.dispatchEvent(new Event('change', {bubbles: true}));
|
||||
}
|
||||
|
||||
// — drag-and-drop —
|
||||
@@ -115,6 +122,7 @@ export default class extends Controller {
|
||||
const isBottom = e.clientY > rect.top + rect.height / 2;
|
||||
this.collectionTarget.insertBefore(this._dragging, isBottom ? el.nextSibling : el);
|
||||
this._syncOrdering();
|
||||
this._notifyChange();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -23,9 +23,29 @@ export default class extends Controller {
|
||||
const res = await fetch(url, {headers: {'X-Modal-Request': '1'}});
|
||||
this.modalBodyTarget.innerHTML = await res.text();
|
||||
this._moveFooter();
|
||||
this._bindDirty();
|
||||
this._bindForm(url);
|
||||
}
|
||||
|
||||
_bindDirty() {
|
||||
const modal = Modal.getOrCreateInstance(this.modalTarget);
|
||||
modal._config.backdrop = true;
|
||||
modal._config.keyboard = true;
|
||||
|
||||
const markDirty = () => {
|
||||
modal._config.backdrop = 'static';
|
||||
modal._config.keyboard = false;
|
||||
};
|
||||
|
||||
this.modalBodyTarget.addEventListener('input', markDirty, {once: true});
|
||||
this.modalBodyTarget.addEventListener('change', markDirty, {once: true});
|
||||
|
||||
this.modalTarget.addEventListener('hidden.bs.modal', () => {
|
||||
modal._config.backdrop = true;
|
||||
modal._config.keyboard = true;
|
||||
}, {once: true});
|
||||
}
|
||||
|
||||
_moveFooter() {
|
||||
if (!this.hasModalFooterTarget) return;
|
||||
const template = this.modalBodyTarget.querySelector('template[data-modal-footer]');
|
||||
|
||||
Reference in New Issue
Block a user