hazza/yel-dspace-angular
1
0
Fork 0
forked from hazza/dspace-angular
Code Pull Requests Activity

[CST-3782] Drag drop restored

Browse Source
This commit is contained in:
Alessandro Martelli
2021-02-17 17:57:29 +01:00
parent 151b02aeec
commit d208cf16fa
4 changed files with 49 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
View File

@@ -3,29 +3,37 @@
[formArrayName]="model.id" [formArrayName]="model.id"
[ngClass]="getClass('element', 'control')"> [ngClass]="getClass('element', 'control')">
<div *ngFor="let groupModel of model.groups; let idx = index" role="group" <!-- Draggable Container -->
[formGroupName]="idx" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]"> <div cdkDropList cdkDropListLockAxis="y" (cdkDropListDropped)="moveSelection($event)">
<!-- Draggable Items -->
<ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container> <div *ngFor="let groupModel of model.groups; let idx = index"
role="group"
<ds-dynamic-form-control-container *ngFor="let _model of groupModel.group" [formGroupName]="idx"
[bindId]="false" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]"
[formGroup]="group" cdkDrag cdkDragHandle>
[context]="groupModel" <!-- Item content -->
[group]="control.get([idx])" <i class="drag-icon fas fa-grip-vertical fa-fw"></i>
[hidden]="_model.hidden" <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
[layout]="formLayout" <ds-dynamic-form-control-container *ngFor="let _model of groupModel.group"
[model]="_model" [bindId]="false"
[templates]="templates" [formGroup]="group"
[ngClass]="[getClass('element', 'host', _model), getClass('grid', 'host', _model)]" [context]="groupModel"
(dfBlur)="onBlur($event)" [group]="control.get([idx])"
(dfChange)="onChange($event)" [hidden]="_model.hidden"
(dfFocus)="onFocus($event)" [layout]="formLayout"
(ngbEvent)="onCustomEvent($event, null, true)"></ds-dynamic-form-control-container> [model]="_model"
[templates]="templates"
<ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: groupModel"></ng-container> [ngClass]="[getClass('element', 'host', _model), getClass('grid', 'host', _model)]"
(dfBlur)="onBlur($event)"
(dfChange)="onChange($event)"
(dfFocus)="onFocus($event)"
(ngbEvent)="onCustomEvent($event, null, true)"></ds-dynamic-form-control-container>
<ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: groupModel"></ng-container>
</div> </div>
</div>
</div> </div>

12
src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts
View File

@@ -44,9 +44,15 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
} }
moveSelection(event: CdkDragDrop<Relationship>) { moveSelection(event: CdkDragDrop<Relationship>) {
// prevent propagating events generated releasing on the same position
if (event.previousIndex === event.currentIndex) {
return;
}
this.model.moveGroup(event.previousIndex, event.currentIndex - event.previousIndex); this.model.moveGroup(event.previousIndex, event.currentIndex - event.previousIndex);
const prevIndex = event.previousIndex - 1; const prevIndex = event.previousIndex;
const index = event.currentIndex - 1; const index = event.currentIndex;
if (hasValue(this.model.groups[index]) && hasValue((this.control as any).controls[index])) { if (hasValue(this.model.groups[index]) && hasValue((this.control as any).controls[index])) {
const $event = { const $event = {
@@ -59,7 +65,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
}; };
this.onChange($event); this.onChange($event);
} }
} }
update(event: any, index: number) { update(event: any, index: number) {

4
src/app/shared/form/form.component.spec.ts
View File

@@ -418,7 +418,7 @@ describe('FormComponent test suite', () => {
})); }));
it('should dispatch FormChangeAction when an item has been removed from an array', inject([FormBuilderService], (service: FormBuilderService) => { it('should dispatch FormChangeAction when an item has been removed from an array', inject([FormBuilderService], (service: FormBuilderService) => {
formComp.removeItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 1); formComp.removeItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 0);
expect(store.dispatch).toHaveBeenCalledWith(new FormChangeAction('testFormArray', service.getValueFromModel(formComp.formModel))); expect(store.dispatch).toHaveBeenCalledWith(new FormChangeAction('testFormArray', service.getValueFromModel(formComp.formModel)));
})); }));
@@ -426,7 +426,7 @@ describe('FormComponent test suite', () => {
it('should emit removeArrayItem Event when an item has been removed from an array', inject([FormBuilderService], (service: FormBuilderService) => { it('should emit removeArrayItem Event when an item has been removed from an array', inject([FormBuilderService], (service: FormBuilderService) => {
spyOn(formComp.removeArrayItem, 'emit'); spyOn(formComp.removeArrayItem, 'emit');
formComp.removeItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 1); formComp.removeItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 0);
expect(formComp.removeArrayItem.emit).toHaveBeenCalled(); expect(formComp.removeArrayItem.emit).toHaveBeenCalled();
})); }));

21
src/app/submission/sections/form/section-form.component.ts
View File

@@ -359,19 +359,16 @@ export class SubmissionSectionformComponent extends SectionModelComponent {
* the [[DynamicFormControlEvent]] emitted * the [[DynamicFormControlEvent]] emitted
*/ */
onChange(event: DynamicFormControlEvent): void { onChange(event: DynamicFormControlEvent): void {
// don't handle change events for things with an index < 0, those are template rows. this.formOperationsService.dispatchOperationsFromEvent(
if (hasNoValue(event.context) || hasNoValue(event.context.index) || event.context.index >= 0) { this.pathCombiner,
this.formOperationsService.dispatchOperationsFromEvent( event,
this.pathCombiner, this.previousValue,
event, this.hasStoredValue(this.formBuilderService.getId(event.model), this.formOperationsService.getArrayIndexFromEvent(event)));
this.previousValue, const metadata = this.formOperationsService.getFieldPathSegmentedFromChangeEvent(event);
this.hasStoredValue(this.formBuilderService.getId(event.model), this.formOperationsService.getArrayIndexFromEvent(event))); const value = this.formOperationsService.getFieldValueFromChangeEvent(event);
const metadata = this.formOperationsService.getFieldPathSegmentedFromChangeEvent(event);
const value = this.formOperationsService.getFieldValueFromChangeEvent(event);
if (environment.submission.autosave.metadata.indexOf(metadata) !== -1 && isNotEmpty(value)) { if (environment.submission.autosave.metadata.indexOf(metadata) !== -1 && isNotEmpty(value)) {
this.submissionService.dispatchSave(this.submissionId); this.submissionService.dispatchSave(this.submissionId);
}
} }
} }