fixed to row fields

2025-10-07 18:14:17 +00:00 · 2019-12-10 16:16:07 +01:00
parent b728463e56
commit cce9832037
9 changed files with 113 additions and 102 deletions
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
@@ -37,7 +37,7 @@
            </select>
        </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"
                    type="submit"
                    ngbTooltip="{{'form.lookup-help' | translate}}"
@@ -59,19 +59,5 @@
        </ds-existing-metadata-list-element>
    </ng-container>
    <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>

--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
@@ -227,6 +227,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
  }

  ngOnInit(): void {
+    console.log(this.model);
    this.hasRelationLookup = hasValue(this.model.relationship);
    if (this.hasRelationLookup) {

--- a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html
@@ -1,7 +1,4 @@
 <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()">
        <span aria-hidden="true">&times;</span>
    </button>
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
@@ -1,15 +1,34 @@
 <ng-container [formGroup]="group">
    <div [dynamicId]="bindId && model.id"
         [formArrayName]="model.id"
-         [ngClass]="getClass('element', 'control')" cdkDropList (cdkDropListDropped)="moveSelection($event)">
-
+         [ngClass]="getClass('element', 'control')">
+        <div role="group"
+             formGroupName="0" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]">
+            <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: model.groups[0]"></ng-container>
+            <ng-container *ngTemplateOutlet="controlContainer; context: {$implicit: 0}"></ng-container>
+            <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: model.groups[0]"></ng-container>
+        </div>
+        <div cdkDropList cdkDropListLockAxis="y" (cdkDropListDropped)="moveSelection($event)">
            <div *ngFor="let groupModel of model.groups; let idx = index" role="group"
                 [formGroupName]="idx" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]" cdkDrag>
+                <ng-container *ngIf="idx > 0">
+                    <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>
                    <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
+                    <ng-container *ngTemplateOutlet="controlContainer; context: {$implicit: idx}"></ng-container>
+                    <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: groupModel"></ng-container>
+                </ng-container>
+            </div>
+        </div>
+    </div>
+</ng-container>

-            <ds-dynamic-form-control-container  *ngFor="let _model of groupModel.group"
+
+<ng-template #controlContainer let-idx>
+    <ds-dynamic-form-control-container *ngFor="let _model of model.groups[idx].group"
                                       [bindId]="false"
-                                               [context]="groupModel"
+                                       [context]="model.groups[idx]"
                                       [group]="control.at(idx)"
                                       [hidden]="_model.hidden"
                                       [layout]="layout"
@@ -20,11 +39,4 @@
                                       (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>
-
-</ng-container>
+</ng-template>
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts
@@ -69,6 +69,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple
  }

  ngOnInit(): void {
+    console.log(this.model);
    this.submissionObjectService
      .findById(this.model.submissionId).pipe(
      getSucceededRemoteData(),
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model.ts
@@ -4,12 +4,14 @@ export interface DynamicRowArrayModelConfig extends DynamicFormArrayModelConfig
  notRepeatable: boolean;
  required: boolean;
  submissionId: string;
+  hasRelationship: boolean;
 }

 export class DynamicRowArrayModel extends DynamicFormArrayModel {
  @serializable() notRepeatable = false;
  @serializable() required = false;
  @serializable() submissionId: string;
+  @serializable() hasRelationship: boolean;
  isRowArray = true;

  constructor(config: DynamicRowArrayModelConfig, layout?: DynamicFormControlLayout) {
@@ -17,5 +19,6 @@ export class DynamicRowArrayModel extends DynamicFormArrayModel {
    this.notRepeatable = config.notRepeatable;
    this.required = config.required;
    this.submissionId = config.submissionId;
+    this.hasRelationship = config.hasRelationship;
  }
 }
--- a/src/app/shared/form/builder/parsers/field-parser.ts
+++ b/src/app/shared/form/builder/parsers/field-parser.ts
@@ -48,7 +48,8 @@ export abstract class FieldParser {
        id: uniqueId() + '_array',
        label: this.configData.label,
        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),
        submissionId: this.submissionId,
        groupFactory: () => {
@@ -79,7 +80,7 @@ export abstract class FieldParser {
            }
          }
          setLayout(model, 'element', 'host', 'col');
-          if (model.hasLanguages) {
+          if (model.hasLanguages|| isNotEmpty(model.relationship)) {
            setLayout(model, 'grid', 'control', 'col');
          }
          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);

@@ -218,10 +219,10 @@ export abstract class FieldParser {

    // Set label
    this.setLabel(controlModel, label);
-
-    controlModel.placeholder = this.configData.label;
-
+    if (hint) {
      controlModel.hint = this.configData.hints;
+    }
+    controlModel.placeholder = this.configData.label;

    if (this.configData.mandatory && setErrors) {
      this.markAsRequired(controlModel);
--- a/src/app/shared/form/form.component.html
+++ b/src/app/shared/form/form.component.html
@@ -12,7 +12,7 @@
                (dfFocus)="onFocus($event)">

            <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">
@@ -41,6 +41,15 @@
                            </button>
                        </div>
                    </div>
+                </ng-container>
+
+                <div *ngIf="!context.notRepeatable && context.hasRelationship && index < 1" class="col-auto text-center">
+                    <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>
--- a/src/app/shared/mocks/mock-form-models.ts
+++ b/src/app/shared/mocks/mock-form-models.ts
@@ -76,6 +76,7 @@ const rowArrayQualdropConfig = {
  id: 'row_QUALDROP_GROUP',
  initialCount: 1,
  notRepeatable: true,
+  hasRelationship: false,
  groupFactory: () => {
    return [MockQualdropModel];
  },