draggable form array controls

This commit is contained in:
lotte
2019-12-09 13:51:14 +01:00
parent 6bba88019e
commit e9f002785a
5 changed files with 65 additions and 19 deletions

View File

@@ -1,4 +1,5 @@
import { Inject, Injectable } from '@angular/core';
import { deepClone } from 'fast-json-patch';
import { DSOResponseParsingService } from '../data/dso-response-parsing.service';
import { ResponseParsingService } from '../data/parsing.service';
@@ -91,7 +92,7 @@ export class SubmissionResponseParsingService extends BaseResponseParsingService
* @returns {RestResponse}
*/
parse(request: RestRequest, data: DSpaceRESTV2Response): RestResponse {
this.dsoParser.parse(request, data);
this.dsoParser.parse(deepClone(request), deepClone(data));
if (isNotEmpty(data.payload)
&& isNotEmpty(data.payload._links)
&& this.isSuccessStatus(data.statusCode)) {

View File

@@ -6,8 +6,51 @@
[for]="model.id"
[innerHTML]="(model.required && model.label) ? (model.label | translate) + ' *' : (model.label | translate)"
[ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></label>
<ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: model"></ng-container>
<!-- Should be *ngIf instead of class d-none, but that breaks the #componentViewContainer reference-->
<!-- 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 *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')">
@@ -59,17 +102,17 @@
<ng-content></ng-content>
<!-- <div *ngIf="hasRelationLookup" class="mt-3">-->
<!-- <ul class="list-unstyled" cdkDropList (cdkDropListDropped)="moveSelection($event)">-->
<!-- <ds-existing-metadata-list-element cdkDrag-->
<!-- *ngFor="let reorderable of reorderables; trackBy: trackReorderable"-->
<!-- [reoRel]="reorderable"-->
<!-- [submissionItem]="item"-->
<!-- [listId]="listId"-->
<!-- [metadataFields]="model.metadataFields"-->
<!-- [relationshipOptions]="model.relationship">-->
<!-- </ds-existing-metadata-list-element>-->
<!-- </ul>-->
<!-- </div>-->
<!-- <div *ngIf="hasRelationLookup" class="mt-3">-->
<!-- <ul class="list-unstyled" cdkDropList (cdkDropListDropped)="moveSelection($event)">-->
<!-- <ds-existing-metadata-list-element cdkDrag-->
<!-- *ngFor="let reorderable of reorderables; trackBy: trackReorderable"-->
<!-- [reoRel]="reorderable"-->
<!-- [submissionItem]="item"-->
<!-- [listId]="listId"-->
<!-- [metadataFields]="model.metadataFields"-->
<!-- [relationshipOptions]="model.relationship">-->
<!-- </ds-existing-metadata-list-element>-->
<!-- </ul>-->
<!-- </div>-->
</div>

View File

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

View File

@@ -35,4 +35,8 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
super(layoutService, validationService);
}
test(event) {
console.log(event);
}
}

View File

@@ -84,7 +84,6 @@ export class RelationshipEffects {
this.nameVariantUpdates[identifier] = nameVariant;
} else {
this.relationshipService.updateNameVariant(item1, item2, relationshipType, nameVariant)
.pipe(getSucceededRemoteData())
.subscribe();
}
}