hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-08 02:24:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

draggable form groups

Browse Source
This commit is contained in:
lotte
2019-12-09 16:33:52 +01:00
parent e9f002785a
commit fa40cac7e7
5 changed files with 56 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
View File

@@ -49,54 +49,13 @@
<ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: model"></ng-container>
<ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: model"></ng-container>
<!-- Should be *ngIf instead of class d-none, but that breaks the #componentViewContainer reference-->
<div [ngClass]="{'form-row': model.hasLanguages || hasRelationLookup, 'd-none': hasRelationLookup && model.value}">
<div [ngClass]="getClass('grid', 'control')">
<ng-container #componentViewContainer></ng-container>
<small *ngIf="hasHint && (!showErrorMessages || errorMessages.length === 0)"
class="text-muted" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
<div *ngIf="showErrorMessages" [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
<small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message | translate:model.validators }}</small>
</div>
</div>
<div *ngIf="model.languageCodes && model.languageCodes.length > 0" class="col-xs-2">
<select
#language="ngModel"
[disabled]="model.readOnly"
[(ngModel)]="model.language"
class="form-control"
(blur)="onBlur($event)"
(change)="onChangeLanguage($event)"
[ngModelOptions]="{standalone: true}"
required>
<option *ngFor="let lang of model.languageCodes" [value]="lang.code">{{lang.display}}</option>
</select>
</div>
<div *ngIf="hasRelationLookup" class="col-auto text-center">
<button class="btn btn-secondary"
type="submit"
ngbTooltip="{{'form.lookup-help' | translate}}"
placement="top"
(click)="openLookup(); $event.stopPropagation();">{{'form.lookup' | translate}}
</button>
</div>
</div>
<ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: model"></ng-container>
<ng-container *ngIf="hasRelationLookup && model.value && reorderable">
<ds-existing-metadata-list-element cdkDrag
[reoRel]="reorderable"
[submissionItem]="item"
[listId]="listId"
[metadataFields]="model.metadataFields"
[relationshipOptions]="model.relationship">
<ds-existing-metadata-list-element
[reoRel]="reorderable"
[submissionItem]="item"
[listId]="listId"
[metadataFields]="model.metadataFields"
[relationshipOptions]="model.relationship">
</ds-existing-metadata-list-element>
</ng-container>
<ng-content></ng-content>

30
src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
View File

@@ -228,9 +228,6 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
}
ngOnInit(): void {
if (this.model.type === 'ARRAY') {
console.log((this.model as DynamicRowArrayModel).get(1));
}
this.hasRelationLookup = hasValue(this.model.relationship);
if (this.hasRelationLookup) {
@@ -360,26 +357,6 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
modalComp.item = this.item;
}
// moveSelection(event: CdkDragDrop<Relationship>) {
// this.zone.runOutsideAngular(() => {
// moveItemInArray(this.reorderables, event.previousIndex, event.currentIndex);
// const reorderables = this.reorderables.map((reo: Reorderable, index: number) => {
// reo.oldIndex = reo.getPlace();
// reo.newIndex = index;
// return reo;
// }
// );
// return observableCombineLatest(reorderables.map((rel: ReorderableRelationship) => {
// if (rel.oldIndex !== rel.newIndex) {
// return this.relationshipService.updatePlace(rel);
// } else {
// return observableOf(undefined);
// }
// })
// ).pipe(getSucceededRemoteData()).subscribe();
// })
// }
/**
* Unsubscribe from all subscriptions
*/
@@ -388,11 +365,4 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
.filter((sub) => hasValue(sub))
.forEach((sub) => sub.unsubscribe());
}
/**
* Prevent unnecessary rerendering so fields don't lose focus
*/
trackReorderable(index, reorderable: Reorderable) {
return hasValue(reorderable) ? reorderable.getId() : undefined;
}
}

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

@@ -1,14 +1,13 @@
<ng-container [formGroup]="group">
<div [dynamicId]="bindId && model.id"
[formArrayName]="model.id"
[ngClass]="getClass('element', 'control')">
[ngClass]="getClass('element', 'control')" cdkDropList (cdkDropListDropped)="moveSelection($event)">
<div *ngFor="let groupModel of model.groups; let idx = index" role="group"
[formGroupName]="idx" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]"
cdkDropList (cdkDropListDropped)="test($event)">
[formGroupName]="idx" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]" cdkDrag>
<ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
<ds-dynamic-form-control-container cdkDrag *ngFor="let _model of groupModel.group"
<ds-dynamic-form-control-container *ngFor="let _model of groupModel.group"
[bindId]="false"
[context]="groupModel"
[group]="control.at(idx)"

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

@@ -1,18 +1,24 @@
import { Component, EventEmitter, Input, Output, QueryList } from '@angular/core';
import { Component, EventEmitter, Input, NgZone, Output, QueryList, SimpleChanges } from '@angular/core';
import { FormGroup } from '@angular/forms';
import {
DynamicFormArrayComponent,
DynamicFormArrayComponent, DynamicFormArrayGroupModel,
DynamicFormArrayModel,
DynamicFormControlCustomEvent, DynamicFormControlEvent,
DynamicFormLayout,
DynamicFormLayoutService,
DynamicFormLayoutService, DynamicFormService,
DynamicFormValidationService,
DynamicTemplateDirective
} from '@ng-dynamic-forms/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { Relationship } from '../../../../../../core/shared/item-relationships/relationship.model';
import { Reorderable, ReorderableRelationship } from '../../existing-metadata-list-element/existing-metadata-list-element.component';
import { combineLatest as observableCombineLatest, Observable, of as observableOf } from 'rxjs';
import { getSucceededRemoteData } from '../../../../../../core/shared/operators';
import { RelationshipService } from '../../../../../../core/data/relationship.service';
@Component({
selector: 'ds-dynamic-form-array',
templateUrl: './dynamic-form-array.component.html'
selector: 'ds-dynamic-form-array',
templateUrl: './dynamic-form-array.component.html'
})
export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
@@ -27,16 +33,35 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
@Output('dfChange') change: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
@Output('dfFocus') focus: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
@Output('ngbEvent') customEvent: EventEmitter<DynamicFormControlCustomEvent> = new EventEmitter();
/* tslint:enable:no-output-rename */
constructor(protected layoutService: DynamicFormLayoutService,
protected validationService: DynamicFormValidationService) {
protected validationService: DynamicFormValidationService,
protected relationshipService: RelationshipService,
protected zone: NgZone,
protected formService: DynamicFormService
) {
super(layoutService, validationService);
}
test(event) {
console.log(event);
moveSelection(event: CdkDragDrop<Relationship>) {
this.zone.runOutsideAngular(() => {
this.model.moveGroup(event.previousIndex,event.currentIndex - event.previousIndex);
this.model.groups.forEach(
(group: DynamicFormArrayGroupModel) => {
console.log(group.group[0]);
}
)
// return observableCombineLatest(reorderables.map((rel: ReorderableRelationship) => {
// if (rel.oldIndex !== rel.newIndex) {
// return this.relationshipService.updatePlace(rel);
// } else {
// return observableOf(undefined);
// }
// })
// ).pipe(getSucceededRemoteData()).subscribe();
})
}
}

16
src/app/shared/form/builder/parsers/field-parser.ts
View File

@@ -41,18 +41,18 @@ export abstract class FieldParser {
&& (this.configData.input.type !== 'tag')
&& (this.configData.input.type !== 'group')
) {
let hideHints = false;
let arrayCounter = 0;
let fieldArrayCounter = 0;
const config = {
id: uniqueId() + '_array',
label: this.configData.label,
initialCount: this.getInitArrayIndex(),
initialCount: this.getInitArrayIndex() + 1,
notRepeatable: !this.configData.repeatable || hasValue(this.configData.selectableRelationship),
required: isNotEmpty(this.configData.mandatory),
groupFactory: () => {
let model;
console.log(arrayCounter);
if ((arrayCounter === 0)) {
model = this.modelFactory();
arrayCounter++;
@@ -60,8 +60,13 @@ export abstract class FieldParser {
const fieldArrayOfValueLenght = this.getInitValueCount(arrayCounter - 1);
let fieldValue = null;
if (fieldArrayOfValueLenght > 0) {
fieldValue = this.getInitFieldValue(arrayCounter - 1, fieldArrayCounter++);
if (fieldArrayCounter === fieldArrayOfValueLenght) {
if (fieldArrayCounter === 0) {
fieldValue = '';
} else {
fieldValue = this.getInitFieldValue(arrayCounter - 1, fieldArrayCounter - 1);
}
fieldArrayCounter++;
if (fieldArrayCounter === fieldArrayOfValueLenght + 1) {
fieldArrayCounter = 0;
arrayCounter++;
}
@@ -72,6 +77,9 @@ export abstract class FieldParser {
if (model.hasLanguages) {
setLayout(model, 'grid', 'control', 'col');
}
if (hideHints) {
model.hint = undefined;
}
return [model];
}
} as DynamicRowArrayModelConfig;