Dataset profile editor. Ui fixes. mat-stepper header fix and preview fixes.

This commit is contained in:
Kristian Ntavidi 2021-02-18 17:13:56 +02:00
parent a8074f6239
commit 96ebf7c0d0
12 changed files with 289 additions and 226 deletions

View File

@ -46,7 +46,7 @@ import { ParseStatus } from './listing/pipe/parse-status.pipe';
import { DatasetProfileTableOfContents } from './table-of-contents/table-of-contents';
import { DatasetProfileTableOfContentsInternalSection } from './table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section';
import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
import {DragDropModule} from '@angular/cdk/drag-drop';
@NgModule({
imports: [
CommonUiModule,
@ -57,7 +57,8 @@ import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/vi
NgxDropzoneModule,
FormProgressIndicationModule,
DatasetModule,
AngularStickyThingsModule
AngularStickyThingsModule,
DragDropModule
],
declarations: [
DatasetProfileListingComponent,

View File

@ -118,8 +118,8 @@
<div class="col">
<div class="">
<ng-container *ngFor="let field of form.get('fields')['controls']; let i=index">
<div class="row field-container" style="position: relative;" (click)="setTargetField(field)"
<ng-container *ngFor="let field of form.get('fields')['controls']; let i=index" >
<div class="row field-container bg-white" style="position: relative;" (click)="setTargetField(field)"
[ngClass]="{'field-container-active': field.get('id').value === targetField?.get('id').value}">
<div class="field-id-container">
{{form.get('fields').get(''+i).get('id').value}}
@ -238,10 +238,10 @@
<app-form-composite-field [form]="previewForm" *ngIf="previewForm">
</app-form-composite-field> -->
<!--
Current FORM: {{this.form.value |json}}
<br>
Target: {{this.targetField?.value |json}}
Target: {{this.targetField?.value |json}} -->

View File

@ -146,11 +146,22 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
addNewField() {
const field: FieldEditorModel = new FieldEditorModel();
field.id=Guid.create().toString();
field.ordinal = (this.form.get('fields') as FormArray).length;
(<FormArray>this.form.get('fields')).push(field.buildForm());
}
DeleteField(index) {
(<FormArray>this.form.get('fields')).removeAt(index);
const fieldsForm = <FormArray>this.form.get('fields');
fieldsForm.removeAt(index);
// calculate ordinals
fieldsForm.controls.forEach((field, idx)=>{
field.get('ordinal').setValue(idx);
field.updateValueAndValidity();
})
}
getFieldTile(formGroup: FormGroup, index: number) {

View File

@ -1,169 +1,169 @@
<ng-container *ngIf="expandView">
<div class="row">
<!-- <mat-form-field class="col">
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.ID' | translate}}" type="text" [formControl]="this.form.get('id')"
required>
<mat-error *ngIf="this.form.get('id').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="this.form.get('id').hasError('pattern')">{{'GENERAL.VALIDATION.PATTERN-_' | translate}}</mat-error>
</mat-form-field> -->
<div class="row">
<!-- <mat-form-field class="col">
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.ID' | translate}}" type="text" [formControl]="this.form.get('id')"
required>
<mat-error *ngIf="this.form.get('id').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="this.form.get('id').hasError('pattern')">{{'GENERAL.VALIDATION.PATTERN-_' | translate}}</mat-error>
</mat-form-field> -->
<mat-form-field class="col">
<!-- <mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [formControl]="this.form.get('viewStyle').get('renderStyle')"
required>
<mat-option [value]="viewStyleEnum.TextArea">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.TextArea)}}</mat-option>
<mat-option [value]="viewStyleEnum.FreeText">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.FreeText)}}</mat-option>
<mat-divider></mat-divider>
<mat-option [value]="viewStyleEnum.BooleanDecision">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.BooleanDecision)}}</mat-option>
<mat-option [value]="viewStyleEnum.RadioBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.RadioBox)}}</mat-option>
<mat-option [value]="viewStyleEnum.CheckBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.CheckBox)}}</mat-option>
<mat-option [value]="viewStyleEnum.ComboBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.ComboBox)}}</mat-option>
<mat-divider></mat-divider>
<mat-option [value]="viewStyleEnum.DatePicker">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.DatePicker)}}</mat-option>
<mat-option [value]="viewStyleEnum.Currency">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Currency)}}</mat-option>
<mat-form-field class="col">
<!-- <mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [formControl]="this.form.get('viewStyle').get('renderStyle')"
required>
<mat-option [value]="viewStyleEnum.TextArea">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.TextArea)}}</mat-option>
<mat-option [value]="viewStyleEnum.FreeText">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.FreeText)}}</mat-option>
<mat-divider></mat-divider>
<mat-option [value]="viewStyleEnum.BooleanDecision">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.BooleanDecision)}}</mat-option>
<mat-option [value]="viewStyleEnum.RadioBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.RadioBox)}}</mat-option>
<mat-option [value]="viewStyleEnum.CheckBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.CheckBox)}}</mat-option>
<mat-option [value]="viewStyleEnum.ComboBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.ComboBox)}}</mat-option>
<mat-divider></mat-divider>
<mat-option [value]="viewStyleEnum.DatePicker">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.DatePicker)}}</mat-option>
<mat-option [value]="viewStyleEnum.Currency">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Currency)}}</mat-option>
<mat-divider></mat-divider>
<mat-divider></mat-divider>
<mat-optgroup label="APIs">
<mat-option [value]="viewStyleEnum.Registries">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Registries)}}</mat-option>
<mat-option [value]="viewStyleEnum.Services">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Services)}}</mat-option>
<mat-option [value]="viewStyleEnum.Researchers">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Researchers)}}</mat-option>
<mat-option [value]="viewStyleEnum.Organizations">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Organizations)}}</mat-option>
<mat-option [value]="viewStyleEnum.ExternalDatasets">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.ExternalDatasets)}}</mat-option>
<mat-option [value]="viewStyleEnum.DataRepositories">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.DataRepositories)}}</mat-option>
</mat-optgroup>
<mat-divider></mat-divider>
<mat-optgroup label="Argos Entities">
<mat-option [value]="viewStyleEnum.InternalDmpEntities">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.InternalDmpEntities)}}</mat-option>
<mat-option [value]="viewStyleEnum.Tags">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Tags)}}</mat-option>
<mat-option [value]="viewStyleEnum.DatasetIdentifier">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.DatasetIdentifier)}}</mat-option>
<mat-option [value]="viewStyleEnum.Validation">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Validation)}}</mat-option>
</mat-optgroup>
<mat-optgroup label="APIs">
<mat-option [value]="viewStyleEnum.Registries">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Registries)}}</mat-option>
<mat-option [value]="viewStyleEnum.Services">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Services)}}</mat-option>
<mat-option [value]="viewStyleEnum.Researchers">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Researchers)}}</mat-option>
<mat-option [value]="viewStyleEnum.Organizations">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Organizations)}}</mat-option>
<mat-option [value]="viewStyleEnum.ExternalDatasets">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.ExternalDatasets)}}</mat-option>
<mat-option [value]="viewStyleEnum.DataRepositories">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.DataRepositories)}}</mat-option>
</mat-optgroup>
<mat-divider></mat-divider>
<mat-optgroup label="Argos Entities">
<mat-option [value]="viewStyleEnum.InternalDmpEntities">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.InternalDmpEntities)}}</mat-option>
<mat-option [value]="viewStyleEnum.Tags">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Tags)}}</mat-option>
<mat-option [value]="viewStyleEnum.DatasetIdentifier">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.DatasetIdentifier)}}</mat-option>
<mat-option [value]="viewStyleEnum.Validation">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Validation)}}</mat-option>
</mat-optgroup>
</mat-select> -->
</mat-select> -->
<!-- NEW VERSION -->
<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [(value)]="viewType" (selectionChange)="onInputTypeChange()"
[disabled]="viewOnly"
required>
<mat-option [value]="viewTypeEnum.TextArea">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.TextArea)}}</mat-option>
<mat-option [value]="viewTypeEnum.FreeText">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.FreeText)}}</mat-option>
<mat-divider></mat-divider>
<mat-option [value]="viewTypeEnum.BooleanDecision">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.BooleanDecision)}}</mat-option>
<mat-option [value]="viewTypeEnum.RadioBox">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.RadioBox)}}</mat-option>
<mat-option [value]="viewTypeEnum.Select">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Select)}}</mat-option>
<mat-option [value]="viewTypeEnum.CheckBox">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.CheckBox)}}</mat-option>
<!-- TO DO -->
<mat-divider></mat-divider>
<mat-option [value]="viewTypeEnum.DatePicker">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DatePicker)}}</mat-option>
<mat-option [value]="viewTypeEnum.Currency">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Currency)}}</mat-option>
<!-- NEW VERSION -->
<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [(value)]="viewType" (selectionChange)="onInputTypeChange()"
[disabled]="viewOnly"
required>
<mat-option [value]="viewTypeEnum.TextArea">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.TextArea)}}</mat-option>
<mat-option [value]="viewTypeEnum.FreeText">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.FreeText)}}</mat-option>
<mat-divider></mat-divider>
<mat-option [value]="viewTypeEnum.BooleanDecision">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.BooleanDecision)}}</mat-option>
<mat-option [value]="viewTypeEnum.RadioBox">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.RadioBox)}}</mat-option>
<mat-option [value]="viewTypeEnum.Select">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Select)}}</mat-option>
<mat-option [value]="viewTypeEnum.CheckBox">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.CheckBox)}}</mat-option>
<!-- TODO -->
<mat-divider></mat-divider>
<mat-option [value]="viewTypeEnum.DatePicker">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DatePicker)}}</mat-option>
<mat-option [value]="viewTypeEnum.Currency">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Currency)}}</mat-option>
<mat-divider></mat-divider>
<!-- APIS -->
<mat-divider></mat-divider>
<!-- APIS -->
<mat-optgroup label="APIs">
<mat-option [value]="viewTypeEnum.Registries">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Registries)}}</mat-option>
<mat-option [value]="viewTypeEnum.Services">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Services)}}</mat-option>
<mat-option [value]="viewTypeEnum.Researchers">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Researchers)}}</mat-option>
<mat-option [value]="viewTypeEnum.Organizations">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Organizations)}}</mat-option>
<mat-option [value]="viewTypeEnum.ExternalDatasets">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.ExternalDatasets)}}</mat-option>
<mat-option [value]="viewTypeEnum.DataRepositories">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DataRepositories)}}</mat-option>
<mat-option [value]="viewTypeEnum.Other">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Other)}}</mat-option>
</mat-optgroup>
<!-- TODO -->
<mat-divider></mat-divider>
<mat-optgroup label="Argos Entities">
<mat-option [value]="viewTypeEnum.InternalDmpEntities">Internal DMPs</mat-option>
<mat-option [value]="viewTypeEnum.Tags">Tags</mat-option>
<mat-option [value]="viewTypeEnum.DatasetIdentifier">Dataset Identifier</mat-option>
<mat-option [value]="viewTypeEnum.Validation">Validation</mat-option>
</mat-optgroup>
<mat-optgroup label="APIs">
<mat-option [value]="viewTypeEnum.Registries">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Registries)}}</mat-option>
<mat-option [value]="viewTypeEnum.Services">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Services)}}</mat-option>
<mat-option [value]="viewTypeEnum.Researchers">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Researchers)}}</mat-option>
<mat-option [value]="viewTypeEnum.Organizations">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Organizations)}}</mat-option>
<mat-option [value]="viewTypeEnum.ExternalDatasets">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.ExternalDatasets)}}</mat-option>
<mat-option [value]="viewTypeEnum.DataRepositories">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DataRepositories)}}</mat-option>
<mat-option [value]="viewTypeEnum.Other">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Other)}}</mat-option>
</mat-optgroup>
<!-- TODO -->
<mat-divider></mat-divider>
<mat-optgroup label="Argos Entities">
<mat-option [value]="viewTypeEnum.InternalDmpEntities">Internal DMPs</mat-option>
<mat-option [value]="viewTypeEnum.Tags">Tags</mat-option>
<mat-option [value]="viewTypeEnum.DatasetIdentifier">Dataset Identifier</mat-option>
<mat-option [value]="viewTypeEnum.Validation">Validation</mat-option>
</mat-optgroup>
</mat-select>
<mat-error *ngIf="this.form.get('viewStyle').get('renderStyle').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</mat-select>
<mat-error *ngIf="this.form.get('viewStyle').get('renderStyle').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<!-- Combo Box -->
<mat-form-field *ngIf="showOrdinal" class="col">
<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.ORDER' | translate}}" [formControl]="this.form.get('ordinal')" required>
</mat-form-field>
<!-- Combo Box -->
<mat-form-field *ngIf="showOrdinal" class="col">
<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.ORDER' | translate}}" [formControl]="this.form.get('ordinal')" required>
</mat-form-field>
<!-- Validation -->
<!-- <mat-form-field class="col" *ngIf="!(defaulValueRequired(form.get('viewStyle').get('renderStyle').value))">
<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VALIDATION' | translate}}" [formControl]="this.form.get('validations')"
multiple>
<mat-option [value]="validationTypeEnum.Required">{{enumUtils.toDatasetProfileFieldValidationTypeString(validationTypeEnum.Required)}}</mat-option>
</mat-select>
</mat-form-field> -->
<!-- Validation -->
<!-- <mat-form-field class="col" *ngIf="!(defaulValueRequired(form.get('viewStyle').get('renderStyle').value))">
<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VALIDATION' | translate}}" [formControl]="this.form.get('validations')"
multiple>
<mat-option [value]="validationTypeEnum.Required">{{enumUtils.toDatasetProfileFieldValidationTypeString(validationTypeEnum.Required)}}</mat-option>
</mat-select>
</mat-form-field> -->
<mat-form-field class="col">
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.RDA-COMMON-STANDARDS' | translate}}</mat-label>
<mat-select [formControl]="this.form.get('rdaCommonStandard')">
<mat-option>--</mat-option>
<mat-option *ngFor="let property of datasetProfileService.getRDACommonStandards()" [value]="property">
{{property}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="col">
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.RDA-COMMON-STANDARDS' | translate}}</mat-label>
<mat-select [formControl]="this.form.get('rdaCommonStandard')">
<mat-option>--</mat-option>
<mat-option *ngFor="let property of datasetProfileService.getRDACommonStandards()" [value]="property">
{{property}}
</mat-option>
</mat-select>
</mat-form-field>
<!-- Default Value -->
<app-component-profile-editor-default-value-component *ngIf="form.get('viewStyle').get('renderStyle').value" class="col-12"
[viewStyle]="form.get('viewStyle').get('renderStyle').value" [form]="this.form.get('defaultValue').get('value')" [formArrayOptions]="form.get('data')?.get('options')"
[comboBoxType]="this.form.get('data')?.get('type')?.value" [internalDmpEntitiesType]="this.form.get('data')?.get('type')?.value"
placeHolder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.DEFAULT-VALUE' | translate}}" [required]="defaulValueRequired(form.get('viewStyle').get('renderStyle').value)">
</app-component-profile-editor-default-value-component>
<!-- Default Value -->
<app-component-profile-editor-default-value-component *ngIf="form.get('viewStyle').get('renderStyle').value" class="col-12"
[viewStyle]="form.get('viewStyle').get('renderStyle').value" [form]="this.form.get('defaultValue').get('value')" [formArrayOptions]="form.get('data')?.get('options')"
[comboBoxType]="this.form.get('data')?.get('type')?.value" [internalDmpEntitiesType]="this.form.get('data')?.get('type')?.value"
placeHolder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.DEFAULT-VALUE' | translate}}" [required]="defaulValueRequired(form.get('viewStyle').get('renderStyle').value)">
</app-component-profile-editor-default-value-component>
</div>
<div class="row" [ngSwitch]="form.get('viewStyle').get('renderStyle').value" *ngIf="expandView">
<app-dataset-profile-editor-combo-box-field-component *ngSwitchCase="viewStyleEnum.ComboBox" class="col-12" [form]="form"></app-dataset-profile-editor-combo-box-field-component>
<app-dataset-profile-internal-dmp-entities-field-component *ngSwitchCase="viewStyleEnum.InternalDmpEntities" class="col-12" [form]="form"></app-dataset-profile-internal-dmp-entities-field-component>
<app-dataset-profile-editor-radio-box-field-component *ngSwitchCase="viewStyleEnum.RadioBox" class="col-12" [form]="form"></app-dataset-profile-editor-radio-box-field-component>
<app-dataset-profile-editor-free-text-field-component *ngSwitchCase="viewStyleEnum.FreeText" class="col-12" [form]="form"></app-dataset-profile-editor-free-text-field-component>
<app-dataset-profile-editor-text-area-field-component *ngSwitchCase="viewStyleEnum.TextArea" class="col-12" [form]="form"></app-dataset-profile-editor-text-area-field-component>
<app-dataset-profile-editor-date-picker-field-component *ngSwitchCase="viewStyleEnum.DatePicker" class="col-12" [form]="form"></app-dataset-profile-editor-date-picker-field-component>
</div>
<div class="row" [ngSwitch]="form.get('viewStyle').get('renderStyle').value" *ngIf="expandView">
<app-dataset-profile-editor-combo-box-field-component *ngSwitchCase="viewStyleEnum.ComboBox" class="col-12" [form]="form"></app-dataset-profile-editor-combo-box-field-component>
<app-dataset-profile-internal-dmp-entities-field-component *ngSwitchCase="viewStyleEnum.InternalDmpEntities" class="col-12" [form]="form"></app-dataset-profile-internal-dmp-entities-field-component>
<app-dataset-profile-editor-radio-box-field-component *ngSwitchCase="viewStyleEnum.RadioBox" class="col-12" [form]="form"></app-dataset-profile-editor-radio-box-field-component>
<app-dataset-profile-editor-free-text-field-component *ngSwitchCase="viewStyleEnum.FreeText" class="col-12" [form]="form"></app-dataset-profile-editor-free-text-field-component>
<app-dataset-profile-editor-text-area-field-component *ngSwitchCase="viewStyleEnum.TextArea" class="col-12" [form]="form"></app-dataset-profile-editor-text-area-field-component>
<app-dataset-profile-editor-date-picker-field-component *ngSwitchCase="viewStyleEnum.DatePicker" class="col-12" [form]="form"></app-dataset-profile-editor-date-picker-field-component>
<app-dataset-profile-editor-boolean-decision-field-component *ngSwitchCase="viewStyleEnum.BooleanDecision" class="col-12"
[form]="form"></app-dataset-profile-editor-boolean-decision-field-component>
<app-dataset-profile-editor-checkbox-field-component *ngSwitchCase="viewStyleEnum.CheckBox" class="col-12" [form]="form"></app-dataset-profile-editor-checkbox-field-component>
<app-dataset-profile-editor-boolean-decision-field-component *ngSwitchCase="viewStyleEnum.BooleanDecision" class="col-12"
[form]="form"></app-dataset-profile-editor-boolean-decision-field-component>
<app-dataset-profile-editor-checkbox-field-component *ngSwitchCase="viewStyleEnum.CheckBox" class="col-12" [form]="form"></app-dataset-profile-editor-checkbox-field-component>
<app-dataset-profile-editor-external-datasets-field-component *ngSwitchCase="viewStyleEnum.ExternalDatasets" class="col-12" [form]="form"></app-dataset-profile-editor-external-datasets-field-component>
<app-dataset-profile-editor-data-repositories-field-component *ngSwitchCase="viewStyleEnum.DataRepositories" class="col-12" [form]="form"></app-dataset-profile-editor-data-repositories-field-component>
<app-dataset-profile-editor-registries-field-component *ngSwitchCase="viewStyleEnum.Registries" class="col-12" [form]="form"></app-dataset-profile-editor-registries-field-component>
<app-dataset-profile-editor-services-field-component *ngSwitchCase="viewStyleEnum.Services" class="col-12" [form]="form"></app-dataset-profile-editor-services-field-component>
<app-dataset-profile-editor-tags-field-component *ngSwitchCase="viewStyleEnum.Tags" class="col-12" [form]="form"></app-dataset-profile-editor-tags-field-component>
<app-dataset-profile-editor-researchers-field-component *ngSwitchCase="viewStyleEnum.Researchers" class="col-12" [form]="form"></app-dataset-profile-editor-researchers-field-component>
<app-dataset-profile-editor-organizations-field-component *ngSwitchCase="viewStyleEnum.Organizations" class="col-12" [form]="form"></app-dataset-profile-editor-organizations-field-component>
<app-dataset-profile-editor-dataset-identifier-field-component *ngSwitchCase="viewStyleEnum.DatasetIdentifier" class="col-12" [form]="form"></app-dataset-profile-editor-dataset-identifier-field-component>
<app-dataset-profile-editor-currency-field-component *ngSwitchCase="viewStyleEnum.Currency" class="col-12" [form]="form"></app-dataset-profile-editor-currency-field-component>
<app-dataset-profile-editor-validator-field-component *ngSwitchCase="viewStyleEnum.Validation" class="col-12" [form]="form"></app-dataset-profile-editor-validator-field-component>
</div>
<div class="row" *ngIf="this.form.get('viewStyle').get('renderStyle').value">
<app-dataset-profile-editor-external-datasets-field-component *ngSwitchCase="viewStyleEnum.ExternalDatasets" class="col-12" [form]="form"></app-dataset-profile-editor-external-datasets-field-component>
<app-dataset-profile-editor-data-repositories-field-component *ngSwitchCase="viewStyleEnum.DataRepositories" class="col-12" [form]="form"></app-dataset-profile-editor-data-repositories-field-component>
<app-dataset-profile-editor-registries-field-component *ngSwitchCase="viewStyleEnum.Registries" class="col-12" [form]="form"></app-dataset-profile-editor-registries-field-component>
<app-dataset-profile-editor-services-field-component *ngSwitchCase="viewStyleEnum.Services" class="col-12" [form]="form"></app-dataset-profile-editor-services-field-component>
<app-dataset-profile-editor-tags-field-component *ngSwitchCase="viewStyleEnum.Tags" class="col-12" [form]="form"></app-dataset-profile-editor-tags-field-component>
<app-dataset-profile-editor-researchers-field-component *ngSwitchCase="viewStyleEnum.Researchers" class="col-12" [form]="form"></app-dataset-profile-editor-researchers-field-component>
<app-dataset-profile-editor-organizations-field-component *ngSwitchCase="viewStyleEnum.Organizations" class="col-12" [form]="form"></app-dataset-profile-editor-organizations-field-component>
<app-dataset-profile-editor-dataset-identifier-field-component *ngSwitchCase="viewStyleEnum.DatasetIdentifier" class="col-12" [form]="form"></app-dataset-profile-editor-dataset-identifier-field-component>
<app-dataset-profile-editor-currency-field-component *ngSwitchCase="viewStyleEnum.Currency" class="col-12" [form]="form"></app-dataset-profile-editor-currency-field-component>
<app-dataset-profile-editor-validator-field-component *ngSwitchCase="viewStyleEnum.Validation" class="col-12" [form]="form"></app-dataset-profile-editor-validator-field-component>
</div>
<div class="row" *ngIf="this.form.get('viewStyle').get('renderStyle').value">
<ng-container *ngIf="form.get('visible').get('rules')?.value.length">
<h4 class="col-12" style="font-weight: bold">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.RULES-TITLE' | translate}}
</h4>
<app-dataset-profile-editor-rule-component class="col-12" [form]="form.get('visible').get('rules')" [viewStyleForCheck]="form.get('viewStyle').get('renderStyle').value"
[formArrayOptionsForCheck]="this.form.get('data')?.get('options')" [comboBoxTypeForCheck]="this.form.get('data')?.get('type')?.value"
[viewOnly]="viewOnly"
[formControlForCheck]="form"></app-dataset-profile-editor-rule-component>
<!-- <div class="col-12" *ngIf="!viewOnly">
<button mat-button class="full-width" (click)="addNewRule()" [disabled]="!form.get('viewStyle').get('renderStyle').value">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ACTIONS.ADD-RULE' | translate}}</button>
<ng-container *ngIf="form.get('visible').get('rules')?.value.length">
<h4 class="col-12" style="font-weight: bold">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.RULES-TITLE' | translate}}
</h4>
<app-dataset-profile-editor-rule-component class="col-12" [form]="form.get('visible').get('rules')" [viewStyleForCheck]="form.get('viewStyle').get('renderStyle').value"
[formArrayOptionsForCheck]="this.form.get('data')?.get('options')" [comboBoxTypeForCheck]="this.form.get('data')?.get('type')?.value"
[viewOnly]="viewOnly"
[formControlForCheck]="form"></app-dataset-profile-editor-rule-component>
<!-- <div class="col-12" *ngIf="!viewOnly">
<button mat-button class="full-width" (click)="addNewRule()" [disabled]="!form.get('viewStyle').get('renderStyle').value">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ACTIONS.ADD-RULE' | translate}}</button>
</div> -->
</ng-container>
<!-- <div class="row">
<button (click)="generatePreview()">Generate Preview</button>
</div> -->
</ng-container>
<!-- <div class="row">
<button (click)="generatePreview()">Generate Preview</button>
</div> -->
</div>
</div>
</ng-container>

View File

@ -1,13 +1,18 @@
<div class="row" *ngFor="let ruleFormGroup of form['controls'] let i=index;" [formGroup]="ruleFormGroup">
<span class="col-auto">{{i + 1}}</span>
<span class="col-auto align-self-center">{{i + 1}}</span>
<span class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}</span>
<!-- <span class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}</span> -->
<!-- Value -->
<app-component-profile-editor-default-value-component class="col" [viewStyle]="viewStyleForCheck" [form]="ruleFormGroup.get('value')"
<!-- <app-component-profile-editor-default-value-component class="col" [viewStyle]="viewStyleForCheck" [form]="ruleFormGroup.get('value')"
[formArrayOptions]="formArrayOptionsForCheck" [comboBoxType]="comboBoxTypeForCheck" placeHolder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RULES-VALUE' | translate}}"
required="true"></app-component-profile-editor-default-value-component> -->
<app-component-profile-editor-default-value-component class="col align-self-center" [viewStyle]="viewStyleForCheck" [form]="ruleFormGroup.get('value')"
[formArrayOptions]="formArrayOptionsForCheck" [comboBoxType]="comboBoxTypeForCheck" placeHolder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}"
required="true"></app-component-profile-editor-default-value-component>
<span class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-THEN'| translate}}</span>
<!-- <span class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-THEN'| translate}}</span> -->
<!-- Field Or Section ID -->
<!-- <mat-form-field class="col-auto">
@ -18,8 +23,8 @@
-->
<!-- SELECTION -->
<mat-form-field class="col-auto">
<mat-label>Pick one</mat-label>
<mat-form-field class="col align-self-center">
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-THEN'| translate}}</mat-label>
<mat-select formControlName="target" required>
<!-- SHOW SECTIONS -->
<mat-optgroup label="Sections">
@ -65,7 +70,7 @@
<mat-error>{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<div class="col-auto"><button mat-icon-button type="button" (click)="deleteRule(i);" [disabled]="viewOnly">
<div class="col-auto align-self-center"><button mat-icon-button type="button" (click)="deleteRule(i);" [disabled]="viewOnly">
<mat-icon>delete</mat-icon>
</button>
</div>

View File

@ -30,7 +30,7 @@ export class DatasetProfileEditorRuleComponent implements OnInit{
ngOnInit(): void {
this.options = this.getOptions();
// TODO TO SEE IF THE COMPONENT IS NOT DESTROYED AND THE FORM UPDATES
this.sectionOptions = [];
this.fieldOptions = [];

View File

@ -23,17 +23,22 @@ export class DatasetProfileEditorSectionComponent extends BaseComponent implemen
constructor() { super(); }
ngOnInit() {
this.form.root.get('pages').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x =>
this.keepPageSelectionValid(x)
);
//TODO
// this.form.root.get('pages').valueChanges
// .pipe(takeUntil(this._destroyed))
// .subscribe(x =>
// this.keepPageSelectionValid(x)
// );
}
addField() {
const fieldSet: FieldSetEditorModel = new FieldSetEditorModel();
fieldSet.ordinal = (this.form.get('fieldSets') as FormArray).length;
const field: FieldEditorModel = new FieldEditorModel();
field.id = Guid.create().toString();
field.ordinal = 0;//first field in fields
fieldSet.fields.push(field);
// if (this.dataModel.fieldSets) {
fieldSet.id = Guid.create().toString();

View File

@ -29,7 +29,7 @@
<div class="col-7 bg-white" style="overflow: hidden; padding: 0px" id="progress-container">
<div id="progress" [ngStyle]="progressStyle"></div>
<div class="row p-1">
<div class="col text-center" *ngFor="let step of steps; index as idx">
<div class="col text-center align-self-center" *ngFor="let step of steps; index as idx">
<span (click)="stepper.selectedIndex=idx" style="cursor: pointer">
{{step.label}}
</span>
@ -259,7 +259,7 @@
<ng-container *ngIf="false">
<ng-container *ngIf="true">
<div class="d-flex">
<!-- SAVE BUTTON -->
@ -299,11 +299,11 @@
</ng-container>
<div class="row">
<!-- <div class="row">
<button (click)="printForm()">
console form
</button>
</div>
</div> -->
<!-- <div class="row">
<button (click)="foo()">foo</button>
</div> -->

View File

@ -16,6 +16,7 @@
.stepper{
background-color: transparent;
min-height: 500px;
}
.content-displayer{
background-color: #fff;

View File

@ -178,12 +178,13 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
// this.addSection();
// this.addPage();
this.visibilityRulesService.buildVisibilityRules([],this.form);
setTimeout(() => {
this.steps = this.stepper.steps;
});
}
});
setTimeout(() => {
this.steps = this.stepper.steps;
});
}
prepareForm() {
@ -201,6 +202,15 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
// });
});
this.form.updateValueAndValidity();
setTimeout(() => {
this.steps = this.stepper.steps;
});
//SHOW THE FIRST PAGE
const tocentries = this.getTocEntries();
if(tocentries && tocentries.length){
this.selectedTocEntry = tocentries[0];
}
//this.getPreview();
@ -674,6 +684,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
section.id = Guid.create().toString();
let sectionsArray:FormArray;
//TODO CHECK FOR FORM.ROOT ERROR
if (parent.type === ToCEntryType.Page) {
//FIRST LEVEL SECTION
@ -709,8 +720,9 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
//create one field form fieldset
const field: FieldEditorModel = new FieldEditorModel(); //to ask
field.id = Guid.create().toString();
field.ordinal = fieldSet.fields.length;
field.ordinal = 0;//first filed in the fields list
fieldSet.fields.push(field);
// field.ordinal = fieldSet.fields.length-1;
//give fieldset id and ordinal
fieldSet.id = Guid.create().toString();
@ -1016,7 +1028,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
//first level is always pages
model.pages = toCentries.map(entry=>{
model.pages = toCentries.map((entry,idx)=>{
if( !(entry.type == ToCEntryType.Page)){
return null;
}
@ -1034,17 +1046,17 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
sectionModel.description = section.form.get('description').value;
sectionModel.page = entry.form.get('ordinal').value;
sectionModel.title = section.label;
sectionModel.numbering = section.numbering;
sectionModel.numbering = (idx+1).toString();
if(section.subEntriesType == ToCEntryType.Section){
sectionModel.sections = this._buildSectionsRecursively(section.subEntries);
sectionModel.sections = this._buildSectionsRecursively(section.subEntries, sectionModel.numbering);
}else{
sectionModel.compositeFields = this._buildFormFields(section.subEntries)
sectionModel.compositeFields = this._buildFormFields(section.subEntries, sectionModel.numbering)
}
return sectionModel;
})
});
};
return pageModel;
@ -1080,7 +1092,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
}
visibilityRules:Rule[];
private _buildSectionsRecursively( tocentries: ToCEntry[]): DatasetDescriptionSectionEditorModel[]{
private _buildSectionsRecursively( tocentries: ToCEntry[], parentNumbering:string): DatasetDescriptionSectionEditorModel[]{
if(!tocentries) return null;
@ -1088,7 +1100,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
const result: Array<DatasetDescriptionSectionEditorModel> = [];
tocentries.forEach(tocentry=>{
tocentries.forEach((tocentry, idx)=>{
const sectionModel = new DatasetDescriptionSectionEditorModel();
sectionModel.id = tocentry.id;
@ -1096,13 +1108,14 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
sectionModel.description = tocentry.form.get('description').value;
// sectionModel.page = entry.form.get('ordinal').value;
sectionModel.title = tocentry.label;
sectionModel.numbering = tocentry.numbering;
// sectionModel.numbering = tocentry.numbering;
sectionModel.numbering = parentNumbering+"."+(idx+1);;
if(tocentry.subEntriesType == ToCEntryType.Section){
sectionModel.sections = this._buildSectionsRecursively(tocentry.subEntries);
sectionModel.sections = this._buildSectionsRecursively(tocentry.subEntries, sectionModel.numbering);
}else{
sectionModel.compositeFields = this._buildFormFields(tocentry.subEntries);
sectionModel.compositeFields = this._buildFormFields(tocentry.subEntries, sectionModel.numbering);
}
result.push(sectionModel);
@ -1111,12 +1124,12 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
return result;
}
private _buildFormFields(tocentries: ToCEntry[]):DatasetDescriptionCompositeFieldEditorModel[]{
private _buildFormFields(tocentries: ToCEntry[], parentNumbering: string):DatasetDescriptionCompositeFieldEditorModel[]{
if(!tocentries) return null;
const fieldsets:DatasetDescriptionCompositeFieldEditorModel[] = [];
tocentries.forEach(fs=>{
tocentries.forEach((fs, idx)=>{
const fieldset = new DatasetDescriptionCompositeFieldEditorModel();
@ -1126,7 +1139,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
fieldset.multiplicity = fs.form.get('multiplicity').value;
fieldset.additionalInformation = fs.form.get('additionalInformation').value;
fieldset.ordinal = fs.form.get('ordinal').value;
fieldset.numbering = fs.numbering;
// fieldset.numbering = fs.numbering;
fieldset.numbering = parentNumbering+"."+(idx+1);
fieldset.hasCommentField = fs.form.get('hasCommentField').value;
fieldset.title = fs.label;
// fieldset.fields = (fs.form.get('fields') as FormArray).getRawValue();
@ -1139,6 +1153,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
fieldModel.viewStyle = (field.get('viewStyle') as FormGroup).getRawValue();
// fieldModel.defaultValue = (field.get('defaultValue') as FormGroup).getRawValue();
fieldModel.value = (field.get('defaultValue') as FormGroup).get('value').value;
fieldModel.defaultValue = fieldModel.value;
fieldModel.page = field.get('page').value;
fieldModel.validations = field.get('validations').value;

View File

@ -16,48 +16,53 @@
<!-- When item is not selected then show only the pages (first level) -->
<!-- <ng-container *ngIf="tocEntryIsChildOf(itemSelected,parentLink) || (!itemSelected && parentLink?.subEntriesType == tocEntryType.Page)"> -->
<div *ngFor="let link of links" class="docs-link mt-0" [ngClass]="{'border-left':itemSelected?.id == parentLink?.id}">
<!-- <div class="link-name"> -->
<!-- <div class="table-item row">
<div class="col link-info">
<span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == link.id}" (click)="itemClicked(link)" >
{{link.numbering}} {{link.label? link.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
</span>
<div cdkDropList>
<ng-container *ngFor="let link of links">
<div class="docs-link mt-0" [ngClass]="{'border-left':itemSelected?.id == parentLink?.id}">
<!-- <div class="link-name"> -->
<!-- <div class="table-item row">
<div class="col link-info">
<span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == link.id}" (click)="itemClicked(link)" >
{{link.numbering}} {{link.label? link.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
</span>
</div>
<div class="table-item-actions col-auto" *ngIf="!viewOnly">
<button class="mat-button" (click)="deleteEntry(link)"><mat-icon>delete</mat-icon></button>
</div>
</div> -->
<!-- For dev purposes -->
<!-- <ng-container [ngSwitch]="link.type">
<div *ngSwitchCase="tocEntryType.FieldSet">
<span style="background-color: yellow;"> Fieldset</span>
</div>
<div *ngSwitchCase="tocEntryType.Page">
<span style="background-color: lightblue;"> Page</span>
</div>
<div *ngSwitchCase="tocEntryType.Section">
<span style="background-color: lightgreen;"> Section</span>
</div>
</ng-container> -->
<!-- </div> -->
<!-- <button cdkDragHandle>drab</button> -->
<div class="ml-2">
<app-dataset-profile-table-of-contents-internal-section
[links]="link.subEntries"
(itemClick)="itemClicked($event)"
(removeEntry)="deleteEntry($event)"
[parentLink]="link"
[itemSelected] = "itemSelected"
(createFooEntry)="createNewEntry($event)"
[viewOnly]="viewOnly">
</app-dataset-profile-table-of-contents-internal-section>
</div>
<div class="table-item-actions col-auto" *ngIf="!viewOnly">
<button class="mat-button" (click)="deleteEntry(link)"><mat-icon>delete</mat-icon></button>
</div>
</div> -->
<!-- For dev purposes -->
<!-- <ng-container [ngSwitch]="link.type">
<div *ngSwitchCase="tocEntryType.FieldSet">
<span style="background-color: yellow;"> Fieldset</span>
</div>
<div *ngSwitchCase="tocEntryType.Page">
<span style="background-color: lightblue;"> Page</span>
</div>
<div *ngSwitchCase="tocEntryType.Section">
<span style="background-color: lightgreen;"> Section</span>
</div>
</ng-container> -->
<!-- </div> -->
<div class="ml-2" >
<app-dataset-profile-table-of-contents-internal-section
[links]="link.subEntries"
(itemClick)="itemClicked($event)"
(removeEntry)="deleteEntry($event)"
[parentLink]="link"
[itemSelected] = "itemSelected"
(createFooEntry)="createNewEntry($event)"
[viewOnly]="viewOnly">
</app-dataset-profile-table-of-contents-internal-section>
</div>
</div><!-- END OF LOOP-->
</div><!-- END OF LOOP-->
</ng-container>
</div>
<!-- BUILD SUBENTRIES IF THEY DONT EXIST -- CURRENT ITEM DOES HAVE CHILDREN -->
<div *ngIf="(!links && parentLink.type!= tocEntryType.FieldSet) && !viewOnly &&parentLink?.id == itemSelected?.id" class="docs-link mt-0">
<div class="ml-2">

View File

@ -11,7 +11,8 @@
(createFooEntry)="createNewEntry($event)"
[parentLink]="{ subEntriesType: tocEntryType.Page, subEntries : links }"
[itemSelected]="itemSelected"
[viewOnly]="viewOnly"></app-dataset-profile-table-of-contents-internal-section>
[viewOnly]="viewOnly"
></app-dataset-profile-table-of-contents-internal-section>
<!-- <span *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link);" class="docs-link mt-0">
<span class="link-name" (click)="itemClicked(link)"><span>{{link.label}}</span></span>
@ -19,4 +20,23 @@
</span> -->
<!-- </nav> -->
</div>
<!--
<div class="bg-warning">
<ul cdkDropList >
<li cdkDrag>Item2</li>
<li cdkDrag>
<ul cdkDropList>
<li cdkDrag> subitem1</li>
<li cdkDrag> subitem2</li>
<li cdkDrag> subitem3</li>
<li cdkDrag> subitem4</li>
</ul>
</li>
<li cdkDrag>Item4</li>
<li cdkDrag>Item5</li>
</ul>
</div> -->
</div>