description template toc reordering fixes

This commit is contained in:
Sofia Papacharalampous 2024-05-17 17:46:08 +03:00
parent 9dc8ed5a53
commit a13d1a4000
2 changed files with 30 additions and 21 deletions

View File

@ -54,10 +54,10 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements
this.dragSubscriptions.push( this.dragSubscriptions.push(
dragulaService.drag(this.DRAG_GROUP).subscribe(({ el }) => { dragulaService.drag(this.DRAG_GROUP).subscribe(({ el }) => {
this._dragStartedAt = new Date().getTime(); this._dragStartedAt = new Date().getTime();
// console.log('drag fired'); // console.log('drag fired');
this.isDragging = true; this.isDragging = true;
this.draggingItemId = (el.id as string).replace(this.DRAGULA_ITEM_ID_PREFIX, ''); this.draggingItemId = (el.id as string).replace(this.DRAGULA_ITEM_ID_PREFIX, '');
}) })
); );
@ -65,18 +65,23 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements
dragulaService.drop(this.DRAG_GROUP).subscribe(({ el, target, source, sibling }) => { dragulaService.drop(this.DRAG_GROUP).subscribe(({ el, target, source, sibling }) => {
if (this._dragStartedAt) { if (this._dragStartedAt) {
const timeNow = new Date().getTime(); const timeNow = new Date().getTime();
if (timeNow - this._dragStartedAt > this.VALID_DROP_TIME) { if (timeNow - this._dragStartedAt > this.VALID_DROP_TIME) {
// console.log('timenow: ', timeNow); // console.log('timenow: ', timeNow);
// console.log('timestarted', this._dragStartedAt); // console.log('timestarted', this._dragStartedAt);
this._dragStartedAt = null; this._dragStartedAt = null;
} else { } else {
const message = this.language.instant('DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.TABLE-OF-CONTENTS.ERROR-MESSAGES.GENERIC-GRAD-AND-DROP-ERROR');
this.notifyUser(message);
this.dataNeedsRefresh.emit();// even though the data is not changed the TABLE DRAG may has changed this.dataNeedsRefresh.emit();// even though the data is not changed the TABLE DRAG may has changed
dragulaService.find(this.DRAG_GROUP).drake.cancel(true);
return; return;
} }
} else { } else {
const message = this.language.instant('DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.TABLE-OF-CONTENTS.ERROR-MESSAGES.GENERIC-GRAD-AND-DROP-ERROR');
this.notifyUser(message);
this.dataNeedsRefresh.emit();// even though the data is not changed the TABLE DRAG may has changed this.dataNeedsRefresh.emit();// even though the data is not changed the TABLE DRAG may has changed
dragulaService.find(this.DRAG_GROUP).drake.cancel(true);
return; return;
} }
@ -86,19 +91,21 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements
if (!(elementId && targetId && sourceId)) { if (!(elementId && targetId && sourceId)) {
console.info('Elements do not have an id'); const message = this.language.instant('DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.TABLE-OF-CONTENTS.ERROR-MESSAGES.GENERIC-GRAD-AND-DROP-ERROR');
this.notifyUser(message);
this.dataNeedsRefresh.emit(); this.dataNeedsRefresh.emit();
dragulaService.find(this.DRAG_GROUP).drake.cancel(true);
return; return;
} }
const element: ToCEntry = this._findTocEntryById(elementId, this.links); const element: ToCEntry = this._findTocEntryById(elementId, this.links);
const targetContainer: ToCEntry = this._findTocEntryById(targetId, this.links); const targetContainer: ToCEntry = this._findTocEntryById(targetId, this.links);
const sourceContainer: ToCEntry = this._findTocEntryById(sourceId, this.links); const sourceContainer: ToCEntry = this._findTocEntryById(sourceId, this.links);
if (!(element && (targetContainer || ((element.type === ToCEntryType.Page) && (targetId === this.ROOT_ID))) && (sourceContainer || ((element.type === ToCEntryType.Page) && (sourceId === this.ROOT_ID))))) { if (!(element && (targetContainer || ((element.type === ToCEntryType.Page) && (targetId === this.ROOT_ID))) && (sourceContainer || ((element.type === ToCEntryType.Page) && (sourceId === this.ROOT_ID))))) {
// console.info('Could not find elements'); const message = this.language.instant('DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.TABLE-OF-CONTENTS.ERROR-MESSAGES.GENERIC-GRAD-AND-DROP-ERROR');
this.notifyUser(message);
this.dataNeedsRefresh.emit(); this.dataNeedsRefresh.emit();
//TODO: angular update //drake.cancel(true); dragulaService.find(this.DRAG_GROUP).drake.cancel(true);
return; return;
} }
@ -259,13 +266,14 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements
} else if (targetContainer.type === ToCEntryType.Page) { } else if (targetContainer.type === ToCEntryType.Page) {
const rootform = targetContainer.form.root; const rootform = targetContainer.form;
// const rootform = targetContainer.form.root;
const sectionForm = element.form; const sectionForm = element.form;
const parentSections = sectionForm.parent as UntypedFormArray; const parentSections = sectionForm.parent as UntypedFormArray;
let parentIndex = -1; let parentIndex = -1;
parentSections.controls.forEach((section, i) => { parentSections.controls.forEach((section, i) => {
if (section.get('id').value === elementId) { if (section.get('id')?.value === elementId) {
parentIndex = i parentIndex = i
} }
}) })
@ -278,10 +286,10 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements
} }
//update parent sections ordinal //update parent sections ordinal
parentSections.controls.filter(section => section.get('ordinal').value >= sectionForm.get('ordinal').value).forEach(section => { parentSections.controls.filter(section => section.get('ordinal')?.value >= sectionForm.get('ordinal')?.value).forEach(section => {
const ordinal = section.get('ordinal'); const ordinal = section.get('ordinal');
const updatedOrdinalVal = ordinal.value ? ordinal.value - 1 : 0; const updatedOrdinalVal = ordinal?.value ? ordinal?.value - 1 : 0;
ordinal.setValue(updatedOrdinalVal); ordinal?.setValue(updatedOrdinalVal);
}) })
parentSections.removeAt(parentIndex); parentSections.removeAt(parentIndex);
@ -301,18 +309,18 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements
let indx = -1; let indx = -1;
targetContainer.subEntries.forEach((e, i) => { targetContainer.subEntries.forEach((e, i) => {
if (e.form.get('id').value === siblingId) { if (e.form.get('id')?.value === siblingId) {
indx = i; indx = i;
position = e.form.get('ordinal').value; position = e.form.get('ordinal')?.value;
} }
}); });
if (indx >= 0) { if (indx >= 0) {
// e.form.get('ordinal').setValue(i+1); // e.form.get('ordinal').setValue(i+1);
targetContainer.subEntries.filter(e => e.form.get('ordinal').value >= position).forEach(e => { targetContainer.subEntries.filter(e => e.form?.get('ordinal').value >= position).forEach(e => {
const ordinal = e.form.get('ordinal'); const ordinal = e.form.get('ordinal');
const updatedOrdinalVal = ordinal.value + 1; const updatedOrdinalVal = ordinal?.value + 1;
ordinal.setValue(updatedOrdinalVal); ordinal?.setValue(updatedOrdinalVal);
}); });
} }
@ -320,8 +328,8 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements
console.info('No sibling found'); console.info('No sibling found');
} }
sectionForm.get('ordinal').setValue(position); sectionForm.get('ordinal')?.setValue(position);
sectionForm.get('page').setValue(targetContainer.id); sectionForm.get('page')?.setValue(targetContainer.id);
targetSectionsArray.push(sectionForm); targetSectionsArray.push(sectionForm);
} else { } else {

View File

@ -545,6 +545,7 @@
}, },
"TABLE-OF-CONTENTS": { "TABLE-OF-CONTENTS": {
"ERROR-MESSAGES": { "ERROR-MESSAGES": {
"GENERIC-GRAD-AND-DROP-ERROR": "Invalid action.",
"FIELDSET-MUST-HAVE-PARENT-SECTION": "Question can only be child of section.", "FIELDSET-MUST-HAVE-PARENT-SECTION": "Question can only be child of section.",
"INPUT-SECTION-SAME-LEVEL": "Cannot have question and section on the same level.", "INPUT-SECTION-SAME-LEVEL": "Cannot have question and section on the same level.",
"DRAG-NOT-SUPPORTED": "Drag n drop of section not supported to target container.", "DRAG-NOT-SUPPORTED": "Drag n drop of section not supported to target container.",