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

fixed to row fields

Browse Source
This commit is contained in:
lotte
2019-12-10 16:16:07 +01:00
parent b728463e56
commit cce9832037
9 changed files with 113 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -37,7 +37,7 @@
</select> </select>
</div> </div>
<div *ngIf="hasRelationLookup" class="col-auto text-center"> <div *ngIf="hasRelationLookup && context?.index < 1" class="col-auto text-center">
<button class="btn btn-secondary" <button class="btn btn-secondary"
type="submit" type="submit"
ngbTooltip="{{'form.lookup-help' | translate}}" ngbTooltip="{{'form.lookup-help' | translate}}"
@@ -59,19 +59,5 @@
</ds-existing-metadata-list-element> </ds-existing-metadata-list-element>
</ng-container> </ng-container>
<ng-content></ng-content> <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> </div>

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

@@ -227,6 +227,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
} }
ngOnInit(): void { ngOnInit(): void {
console.log(this.model);
this.hasRelationLookup = hasValue(this.model.relationship); this.hasRelationLookup = hasValue(this.model.relationship);
if (this.hasRelationLookup) { if (this.hasRelationLookup) {

3
src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html
View File

@@ -1,7 +1,4 @@
<li *ngIf="metadataRepresentation"> <li *ngIf="metadataRepresentation">
<button type="button" class="close float-left" aria-label="Move button" cdkDragHandle>
<i aria-hidden="true" class="fas fa-arrows-alt fa-xs"></i>
</button>
<button type="button" class="close float-left" aria-label="Close button" (click)="removeSelection()"> <button type="button" class="close float-left" aria-label="Close button" (click)="removeSelection()">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>

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

@@ -1,30 +1,42 @@
<ng-container [formGroup]="group"> <ng-container [formGroup]="group">
<div [dynamicId]="bindId && model.id" <div [dynamicId]="bindId && model.id"
[formArrayName]="model.id" [formArrayName]="model.id"
[ngClass]="getClass('element', 'control')" cdkDropList (cdkDropListDropped)="moveSelection($event)"> [ngClass]="getClass('element', 'control')">
<div role="group"
<div *ngFor="let groupModel of model.groups; let idx = index" role="group" formGroupName="0" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]">
[formGroupName]="idx" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]" cdkDrag> <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: model.groups[0]"></ng-container>
<ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container> <ng-container *ngTemplateOutlet="controlContainer; context: {$implicit: 0}"></ng-container>
<ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: model.groups[0]"></ng-container>
<ds-dynamic-form-control-container *ngFor="let _model of groupModel.group" </div>
[bindId]="false" <div cdkDropList cdkDropListLockAxis="y" (cdkDropListDropped)="moveSelection($event)">
[context]="groupModel" <div *ngFor="let groupModel of model.groups; let idx = index" role="group"
[group]="control.at(idx)" [formGroupName]="idx" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]" cdkDrag>
[hidden]="_model.hidden" <ng-container *ngIf="idx > 0">
[layout]="layout" <button type="button" class="close float-left" aria-label="Move button" cdkDragHandle>
[model]="_model" <i aria-hidden="true" class="fas fa-arrows-alt fa-xs"></i>
[templates]="templates" </button>
[ngClass]="[getClass('element', 'host', _model), getClass('grid', 'host', _model)]" <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
(dfBlur)="onBlur($event)" <ng-container *ngTemplateOutlet="controlContainer; context: {$implicit: idx}"></ng-container>
(dfChange)="onChange($event)" <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: groupModel"></ng-container>
(dfFocus)="onFocus($event)" </ng-container>
(ngbEvent)="onCustomEvent($event, null, true)"></ds-dynamic-form-control-container> </div>
<ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: groupModel"></ng-container>
</div> </div>
</div> </div>
</ng-container> </ng-container>
<ng-template #controlContainer let-idx>
<ds-dynamic-form-control-container *ngFor="let _model of model.groups[idx].group"
[bindId]="false"
[context]="model.groups[idx]"
[group]="control.at(idx)"
[hidden]="_model.hidden"
[layout]="layout"
[model]="_model"
[templates]="templates"
[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-template>

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

@@ -69,6 +69,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple
} }
ngOnInit(): void { ngOnInit(): void {
console.log(this.model);
this.submissionObjectService this.submissionObjectService
.findById(this.model.submissionId).pipe( .findById(this.model.submissionId).pipe(
getSucceededRemoteData(), getSucceededRemoteData(),

3
src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model.ts
View File

@@ -4,12 +4,14 @@ export interface DynamicRowArrayModelConfig extends DynamicFormArrayModelConfig
notRepeatable: boolean; notRepeatable: boolean;
required: boolean; required: boolean;
submissionId: string; submissionId: string;
hasRelationship: boolean;
} }
export class DynamicRowArrayModel extends DynamicFormArrayModel { export class DynamicRowArrayModel extends DynamicFormArrayModel {
@serializable() notRepeatable = false; @serializable() notRepeatable = false;
@serializable() required = false; @serializable() required = false;
@serializable() submissionId: string; @serializable() submissionId: string;
@serializable() hasRelationship: boolean;
isRowArray = true; isRowArray = true;
constructor(config: DynamicRowArrayModelConfig, layout?: DynamicFormControlLayout) { constructor(config: DynamicRowArrayModelConfig, layout?: DynamicFormControlLayout) {
@@ -17,5 +19,6 @@ export class DynamicRowArrayModel extends DynamicFormArrayModel {
this.notRepeatable = config.notRepeatable; this.notRepeatable = config.notRepeatable;
this.required = config.required; this.required = config.required;
this.submissionId = config.submissionId; this.submissionId = config.submissionId;
this.hasRelationship = config.hasRelationship;
} }
} }

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

@@ -48,7 +48,8 @@ export abstract class FieldParser {
id: uniqueId() + '_array', id: uniqueId() + '_array',
label: this.configData.label, label: this.configData.label,
initialCount: this.getInitArrayIndex() + 1, initialCount: this.getInitArrayIndex() + 1,
notRepeatable: !this.configData.repeatable || hasValue(this.configData.selectableRelationship), notRepeatable: !this.configData.repeatable,
hasRelationship: isNotEmpty(this.configData.selectableRelationship),
required: isNotEmpty(this.configData.mandatory), required: isNotEmpty(this.configData.mandatory),
submissionId: this.submissionId, submissionId: this.submissionId,
groupFactory: () => { groupFactory: () => {
@@ -79,7 +80,7 @@ export abstract class FieldParser {
} }
} }
setLayout(model, 'element', 'host', 'col'); setLayout(model, 'element', 'host', 'col');
if (model.hasLanguages) { if (model.hasLanguages|| isNotEmpty(model.relationship)) {
setLayout(model, 'grid', 'control', 'col'); setLayout(model, 'grid', 'control', 'col');
} }
return [model]; return [model];
@@ -193,7 +194,7 @@ export abstract class FieldParser {
} }
} }
protected initModel(id?: string, label = true, setErrors = true) { protected initModel(id?: string, label = true, setErrors = true, hint = true) {
const controlModel = Object.create(null); const controlModel = Object.create(null);
@@ -218,11 +219,11 @@ export abstract class FieldParser {
// Set label // Set label
this.setLabel(controlModel, label); this.setLabel(controlModel, label);
if (hint) {
controlModel.hint = this.configData.hints;
}
controlModel.placeholder = this.configData.label; controlModel.placeholder = this.configData.label;
controlModel.hint = this.configData.hints;
if (this.configData.mandatory && setErrors) { if (this.configData.mandatory && setErrors) {
this.markAsRequired(controlModel); this.markAsRequired(controlModel);
} }

117
src/app/shared/form/form.component.html
View File

@@ -1,62 +1,71 @@
<div class="container-fluid"> <div class="container-fluid">
<form class="form-horizontal" [formGroup]="formGroup"> <form class="form-horizontal" [formGroup]="formGroup">
<ds-dynamic-form <ds-dynamic-form
[formId]="formId" [formId]="formId"
[formGroup]="formGroup" [formGroup]="formGroup"
[formModel]="formModel" [formModel]="formModel"
[formLayout]="formLayout" [formLayout]="formLayout"
(change)="$event.stopPropagation();" (change)="$event.stopPropagation();"
(dfBlur)="onBlur($event)" (dfBlur)="onBlur($event)"
(dfChange)="onChange($event)" (dfChange)="onChange($event)"
(dfFocus)="onFocus($event)"> (dfFocus)="onFocus($event)">
<ng-template modelType="ARRAY" let-group let-index="index" let-context="context"> <ng-template modelType="ARRAY" let-group let-index="index" let-context="context">
<ng-container *ngIf="!context.hasRelationship">
<!--Array with repeatable items-->
<div *ngIf="!context.notRepeatable"
class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
<div class="btn-group" role="group" aria-label="Add and remove button">
<button type="button" class="btn btn-secondary"
[disabled]="isItemReadOnly(context, index)"
(click)="insertItem($event, group.context, group.index + 1)">
<i class="fas fa-plus" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-secondary"
(click)="removeItem($event, context, index)"
[disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
<i class="fas fa-trash" aria-hidden="true"></i>
</button>
</div>
</div>
<!--Array with repeatable items--> <!--Array with non repeatable items - Only delete button-->
<div *ngIf="!context.notRepeatable" <div *ngIf="context.notRepeatable && group.context.groups.length > 1"
class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end"> class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
<div class="btn-group" role="group" aria-label="Add and remove button"> <div class="btn-group" role="group" aria-label="Remove button">
<button type="button" class="btn btn-secondary" <button type="button" class="btn btn-secondary"
[disabled]="isItemReadOnly(context, index)" (click)="removeItem($event, context, index)"
(click)="insertItem($event, group.context, group.index + 1)"> [disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
<i class="fas fa-plus" aria-hidden="true"></i> <i class="fas fa-trash" aria-hidden="true"></i>
</button> </button>
<button type="button" class="btn btn-secondary" </div>
(click)="removeItem($event, context, index)" </div>
[disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)"> </ng-container>
<i class="fas fa-trash" aria-hidden="true"></i>
</button> <div *ngIf="!context.notRepeatable && context.hasRelationship && index < 1" class="col-auto text-center">
</div> <button type="button" class="btn btn-secondary"
[disabled]="isItemReadOnly(context, index)"
(click)="insertItem($event, group.context, group.index + 1)">
{{'form.add' | translate}}
</button>
</div>
</ng-template>
</ds-dynamic-form>
<div *ngIf="displaySubmit">
<hr>
<div class="form-group row">
<div class="col text-right">
<button type="reset" class="btn btn-default" (click)="reset()">{{'form.cancel' | translate}}</button>
<button type="submit" class="btn btn-primary" (click)="onSubmit()"
[disabled]="!(isValid() | async)">{{'form.submit' | translate}}
</button>
</div>
</div>
</div> </div>
<!--Array with non repeatable items - Only delete button--> </form>
<div *ngIf="context.notRepeatable && group.context.groups.length > 1"
class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
<div class="btn-group" role="group" aria-label="Remove button">
<button type="button" class="btn btn-secondary"
(click)="removeItem($event, context, index)"
[disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
<i class="fas fa-trash" aria-hidden="true"></i>
</button>
</div>
</div>
</ng-template>
</ds-dynamic-form>
<div *ngIf="displaySubmit">
<hr>
<div class="form-group row">
<div class="col text-right">
<button type="reset" class="btn btn-default" (click)="reset()">{{'form.cancel' | translate}}</button>
<button type="submit" class="btn btn-primary" (click)="onSubmit()"
[disabled]="!(isValid() | async)">{{'form.submit' | translate}}
</button>
</div>
</div>
</div>
</form>
</div> </div>

1
src/app/shared/mocks/mock-form-models.ts
View File

@@ -76,6 +76,7 @@ const rowArrayQualdropConfig = {
id: 'row_QUALDROP_GROUP', id: 'row_QUALDROP_GROUP',
initialCount: 1, initialCount: 1,
notRepeatable: true, notRepeatable: true,
hasRelationship: false,
groupFactory: () => { groupFactory: () => {
return [MockQualdropModel]; return [MockQualdropModel];
}, },