[CST-3782] possibility to configure the isDraggable feature to DynamicRowArrayModel

This commit is contained in:
Alessandro Martelli
2021-03-31 11:56:37 +02:00
parent d224333a1c
commit d47660b5c2
6 changed files with 22 additions and 3 deletions

View File

@@ -12,7 +12,7 @@
[ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]"
cdkDrag cdkDrag
cdkDragHandle cdkDragHandle
[cdkDragDisabled]="model.groups.length === 1"> [cdkDragDisabled]="dragDisabled">
<!-- Item content --> <!-- Item content -->
<div *cdkDragPreview> <div *cdkDragPreview>
<div class="alert alert-info"> <div class="alert alert-info">
@@ -20,7 +20,7 @@
</div> </div>
</div> </div>
<i class="drag-icon fas fa-grip-vertical fa-fw" [class.invisible]="model.groups.length === 1"></i> <i class="drag-icon fas fa-grip-vertical fa-fw" [class.invisible]="dragDisabled"></i>
<ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container> <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 *ngFor="let _model of groupModel.group"
[bindId]="false" [bindId]="false"

View File

@@ -14,6 +14,7 @@ import {
} from '@ng-dynamic-forms/core'; } from '@ng-dynamic-forms/core';
import { Relationship } from '../../../../../../core/shared/item-relationships/relationship.model'; import { Relationship } from '../../../../../../core/shared/item-relationships/relationship.model';
import { hasValue } from '../../../../../empty.util'; import { hasValue } from '../../../../../empty.util';
import { DynamicRowArrayModel } from '../ds-dynamic-row-array-model';
@Component({ @Component({
selector: 'ds-dynamic-form-array', selector: 'ds-dynamic-form-array',
@@ -25,7 +26,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
@Input() formLayout: DynamicFormLayout; @Input() formLayout: DynamicFormLayout;
@Input() group: FormGroup; @Input() group: FormGroup;
@Input() layout: DynamicFormControlLayout; @Input() layout: DynamicFormControlLayout;
@Input() model: DynamicFormArrayModel; @Input() model: DynamicRowArrayModel;// DynamicRow?
@Input() templates: QueryList<DynamicTemplateDirective> | undefined; @Input() templates: QueryList<DynamicTemplateDirective> | undefined;
/* tslint:disable:no-output-rename */ /* tslint:disable:no-output-rename */
@@ -70,4 +71,11 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
this.onChange($event); this.onChange($event);
} }
/**
* If the drag feature is disabled for this DynamicRowArrayModel.
*/
get dragDisabled(): boolean {
return this.model.groups.length === 1 || !this.model.isDraggable;
}
} }

View File

@@ -9,6 +9,7 @@ export interface DynamicRowArrayModelConfig extends DynamicFormArrayModelConfig
metadataKey: string; metadataKey: string;
metadataFields: string[]; metadataFields: string[];
hasSelectableMetadata: boolean; hasSelectableMetadata: boolean;
isDraggable: boolean;
} }
export class DynamicRowArrayModel extends DynamicFormArrayModel { export class DynamicRowArrayModel extends DynamicFormArrayModel {
@@ -19,6 +20,7 @@ export class DynamicRowArrayModel extends DynamicFormArrayModel {
@serializable() metadataKey: string; @serializable() metadataKey: string;
@serializable() metadataFields: string[]; @serializable() metadataFields: string[];
@serializable() hasSelectableMetadata: boolean; @serializable() hasSelectableMetadata: boolean;
@serializable() isDraggable: boolean;
isRowArray = true; isRowArray = true;
constructor(config: DynamicRowArrayModelConfig, layout?: DynamicFormControlLayout) { constructor(config: DynamicRowArrayModelConfig, layout?: DynamicFormControlLayout) {
@@ -30,5 +32,6 @@ export class DynamicRowArrayModel extends DynamicFormArrayModel {
this.metadataKey = config.metadataKey; this.metadataKey = config.metadataKey;
this.metadataFields = config.metadataFields; this.metadataFields = config.metadataFields;
this.hasSelectableMetadata = config.hasSelectableMetadata; this.hasSelectableMetadata = config.hasSelectableMetadata;
this.isDraggable = config.isDraggable;
} }
} }

View File

@@ -295,6 +295,7 @@ describe('FormBuilderService test suite', () => {
notRepeatable: false, notRepeatable: false,
relationshipConfig: undefined, relationshipConfig: undefined,
submissionId: '1234', submissionId: '1234',
isDraggable: true,
groupFactory: () => { groupFactory: () => {
return [ return [
new DynamicInputModel({ id: 'testFormRowArrayGroupInput' }) new DynamicInputModel({ id: 'testFormRowArrayGroupInput' })

View File

@@ -50,6 +50,11 @@ export abstract class FieldParser {
if (Array.isArray(this.configData.selectableMetadata) && this.configData.selectableMetadata.length === 1) { if (Array.isArray(this.configData.selectableMetadata) && this.configData.selectableMetadata.length === 1) {
metadataKey = this.configData.selectableMetadata[0].metadata; metadataKey = this.configData.selectableMetadata[0].metadata;
} }
let isDraggable = true;
if (this.configData.input.type === ParserType.Onebox && this.configData?.selectableMetadata?.length > 1) {
isDraggable = false;
}
const config = { const config = {
id: uniqueId() + '_array', id: uniqueId() + '_array',
label: this.configData.label, label: this.configData.label,
@@ -61,6 +66,7 @@ export abstract class FieldParser {
metadataKey, metadataKey,
metadataFields: this.getAllFieldIds(), metadataFields: this.getAllFieldIds(),
hasSelectableMetadata: isNotEmpty(this.configData.selectableMetadata), hasSelectableMetadata: isNotEmpty(this.configData.selectableMetadata),
isDraggable,
groupFactory: () => { groupFactory: () => {
let model; let model;
if ((arrayCounter === 0)) { if ((arrayCounter === 0)) {

View File

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