Dataset Profile Editor. Fieldsets same level as Section Details. Show all fieldsets in one page collapsed.
This commit is contained in:
parent
3dde61a379
commit
a4db1973d3
|
@ -48,9 +48,9 @@ import { DatasetProfileTableOfContentsInternalSection } from './table-of-content
|
||||||
import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
|
import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
|
||||||
import {DragDropModule} from '@angular/cdk/drag-drop';
|
import {DragDropModule} from '@angular/cdk/drag-drop';
|
||||||
|
|
||||||
|
|
||||||
//matrial
|
//matrial
|
||||||
import {MatBadgeModule} from '@angular/material/badge';
|
import {MatBadgeModule} from '@angular/material/badge';
|
||||||
|
import { DatasetProfileEditorSectionFieldSetComponent } from './editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
@ -102,7 +102,8 @@ import {MatBadgeModule} from '@angular/material/badge';
|
||||||
DatasetProfileEditorCurrencyFieldComponent,
|
DatasetProfileEditorCurrencyFieldComponent,
|
||||||
DatasetProfileEditorValidatorFieldComponent,
|
DatasetProfileEditorValidatorFieldComponent,
|
||||||
DatasetProfileTableOfContents,
|
DatasetProfileTableOfContents,
|
||||||
DatasetProfileTableOfContentsInternalSection
|
DatasetProfileTableOfContentsInternalSection,
|
||||||
|
DatasetProfileEditorSectionFieldSetComponent
|
||||||
],
|
],
|
||||||
entryComponents: [
|
entryComponents: [
|
||||||
DialogConfirmationUploadDatasetProfiles
|
DialogConfirmationUploadDatasetProfiles
|
||||||
|
|
|
@ -58,53 +58,60 @@
|
||||||
|
|
||||||
<!-- MAIN CONTENT -->
|
<!-- MAIN CONTENT -->
|
||||||
<div class="main-content-page">
|
<div class="main-content-page">
|
||||||
<div style="position: relative; padding: 3em 0em;" class="col-9">
|
<div style="position: relative;" class="col-12">
|
||||||
<!-- TITLE -->
|
<!-- TITLE -->
|
||||||
<div class="row">
|
<div class="row fielset-header">
|
||||||
<div class="col-auto d-flex">
|
<div class="col-auto d-flex">
|
||||||
<div class="align-self-center">
|
<div class="align-self-center">
|
||||||
{{numbering}}
|
{{numbering}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <mat-form-field class="col-auto" appearance="none">
|
||||||
|
<input matInput type="text" [value]="numbering" disabled>
|
||||||
|
</mat-form-field> -->
|
||||||
<mat-form-field class="col" appearance="none">
|
<mat-form-field class="col" appearance="none">
|
||||||
<input matInput type="text" placeholder="Title"
|
<input matInput type="text" placeholder="Title"
|
||||||
[formControl]="this.form.get('title')">
|
[formControl]="this.form.get('title')">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<mat-form-field class="col" appearance="legacy">
|
|
||||||
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}"
|
|
||||||
[formControl]="this.form.get('description')">
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
<div class="row" *ngIf="showExtendedDescription">
|
|
||||||
<mat-form-field class="col" appearance="legacy">
|
|
||||||
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}"
|
|
||||||
[formControl]="this.form.get('extendedDescription')"/>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
<div class="row" *ngIf="showAdditionalInfo">
|
|
||||||
<mat-form-field class="col" appearance="legacy">
|
|
||||||
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}"
|
|
||||||
[formControl]="this.form.get('additionalInformation')"/>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
<ng-container *ngIf="hasFocus">
|
||||||
<mat-form-field *ngIf="isMultiplicityEnabled" class="col" appearance="legacy">
|
|
||||||
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MIN' | translate}}"
|
<div class="row" *ngIf="showDescription">
|
||||||
type="number" [formControl]="form.get('multiplicity').get('min')" required>
|
<mat-form-field class="col" appearance="legacy">
|
||||||
<mat-error *ngIf="form.get('multiplicity').get('min').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
|
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}"
|
||||||
</mat-error>
|
[formControl]="this.form.get('description')">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<mat-form-field *ngIf="isMultiplicityEnabled" class="col" appearance="legacy">
|
</div>
|
||||||
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MAX' | translate}}"
|
<div class="row" *ngIf="showExtendedDescription">
|
||||||
type="number" [formControl]="this.form.get('multiplicity').get('max')" required>
|
<mat-form-field class="col" appearance="legacy">
|
||||||
<mat-error *ngIf="form.get('multiplicity').get('max').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
|
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}"
|
||||||
</mat-error>
|
[formControl]="this.form.get('extendedDescription')"/>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row" *ngIf="showAdditionalInfo">
|
||||||
|
<mat-form-field class="col" appearance="legacy">
|
||||||
|
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}"
|
||||||
|
[formControl]="this.form.get('additionalInformation')"/>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<mat-form-field *ngIf="isMultiplicityEnabled" class="col" appearance="legacy">
|
||||||
|
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MIN' | translate}}"
|
||||||
|
type="number" [formControl]="form.get('multiplicity').get('min')" required>
|
||||||
|
<mat-error *ngIf="form.get('multiplicity').get('min').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
|
||||||
|
</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-form-field *ngIf="isMultiplicityEnabled" class="col" appearance="legacy">
|
||||||
|
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MAX' | translate}}"
|
||||||
|
type="number" [formControl]="this.form.get('multiplicity').get('max')" required>
|
||||||
|
<mat-error *ngIf="form.get('multiplicity').get('max').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
|
||||||
|
</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -119,8 +126,10 @@
|
||||||
|
|
||||||
<div class="">
|
<div class="">
|
||||||
<ng-container *ngFor="let field of form.get('fields')['controls']; let i=index" >
|
<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)"
|
<div class="row bg-white" style="position: relative;" (click)="setTargetField(field)"
|
||||||
[ngClass]="{'field-container-active': field.get('id').value === targetField?.get('id').value}">
|
>
|
||||||
|
<!-- field-container -->
|
||||||
|
<!-- [ngClass]="{'field-container-active': (field.get('id').value === targetField?.get('id').value) && hasFocus}" -->
|
||||||
<!-- <div class="field-id-container">
|
<!-- <div class="field-id-container">
|
||||||
{{form.get('fields').get(''+i).get('id').value}} -->
|
{{form.get('fields').get(''+i).get('id').value}} -->
|
||||||
<!-- <button mat-mini-fab class="field-id-container-icon" (click)="DeleteField(i)">
|
<!-- <button mat-mini-fab class="field-id-container-icon" (click)="DeleteField(i)">
|
||||||
|
@ -131,11 +140,11 @@
|
||||||
<app-dataset-profile-editor-field-component class="col-12"
|
<app-dataset-profile-editor-field-component class="col-12"
|
||||||
[form]="form.get('fields').get(''+i)" [showOrdinal]="false"
|
[form]="form.get('fields').get(''+i)" [showOrdinal]="false"
|
||||||
[indexPath]="indexPath + 'f' + i" [viewOnly]="viewOnly"
|
[indexPath]="indexPath + 'f' + i" [viewOnly]="viewOnly"
|
||||||
[expandView]="targetField?.get('id').value === field.get('id').value">
|
[expandView]="hasFocus"
|
||||||
|
(delete)="deleteField(i)">
|
||||||
</app-dataset-profile-editor-field-component>
|
</app-dataset-profile-editor-field-component>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<hr *ngIf="hasFocus">
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<!--
|
<!--
|
||||||
<div *ngIf="isComposite" class="row">
|
<div *ngIf="isComposite" class="row">
|
||||||
|
@ -166,19 +175,19 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- ACTIONS LIST -->
|
|
||||||
<div class="col-auto">
|
<!-- <div class="col-auto">
|
||||||
<div class="row" class="actions-list bg-white">
|
<div class="row" class="actions-list bg-white">
|
||||||
<mat-list role="list">
|
<mat-list role="list">
|
||||||
<!-- INPUT TOOLS -->
|
|
||||||
<ng-container *ngIf="!viewOnly">
|
<ng-container *ngIf="!viewOnly">
|
||||||
<h3 matSubheader>Input tools</h3>
|
<h3 matSubheader>Input tools</h3>
|
||||||
<!-- Add new Input -->
|
|
||||||
<mat-list-item>
|
<mat-list-item>
|
||||||
<mat-icon matListIcon>folder</mat-icon>
|
<mat-icon matListIcon>folder</mat-icon>
|
||||||
<span matLine (click)="addNewField()" style="cursor: pointer;" >Add Input</span>
|
<span matLine (click)="addNewField()" style="cursor: pointer;" >Add Input</span>
|
||||||
</mat-list-item>
|
</mat-list-item>
|
||||||
<!-- Visibility -->
|
|
||||||
<mat-list-item *ngIf="targetField">
|
<mat-list-item *ngIf="targetField">
|
||||||
<mat-icon matListIcon [ngClass]="{'text-muted':!targetField.get('viewStyle').get('renderStyle').value}"
|
<mat-icon matListIcon [ngClass]="{'text-muted':!targetField.get('viewStyle').get('renderStyle').value}"
|
||||||
>visibility_off</mat-icon>
|
>visibility_off</mat-icon>
|
||||||
|
@ -189,58 +198,48 @@
|
||||||
</mat-list-item>
|
</mat-list-item>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<!-- Additional info and Extended -->
|
|
||||||
<mat-list-item>
|
<mat-list-item>
|
||||||
<!-- <mat-icon matListIcon>folder</mat-icon> -->
|
|
||||||
<mat-checkbox matLine [(ngModel)]="showExtendedDescription">
|
<mat-checkbox matLine [(ngModel)]="showExtendedDescription">
|
||||||
Extended Description
|
Extended Description
|
||||||
</mat-checkbox>
|
</mat-checkbox>
|
||||||
</mat-list-item>
|
</mat-list-item>
|
||||||
<mat-list-item>
|
<mat-list-item>
|
||||||
<!-- <mat-icon matListIcon>folder</mat-icon> -->
|
|
||||||
<mat-checkbox matLine [(ngModel)]="showAdditionalInfo">
|
<mat-checkbox matLine [(ngModel)]="showAdditionalInfo">
|
||||||
Additional Information
|
Additional Information
|
||||||
</mat-checkbox>
|
</mat-checkbox>
|
||||||
</mat-list-item>
|
</mat-list-item>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- INPUT SETTINGS -->
|
|
||||||
<h3 matSubheader>Input settings</h3>
|
<h3 matSubheader>Input settings</h3>
|
||||||
|
|
||||||
<!-- multiplicity -->
|
|
||||||
<mat-list-item>
|
<mat-list-item>
|
||||||
<!-- <mat-icon matListIcon>folder</mat-icon> -->
|
|
||||||
<mat-checkbox matLine [checked]="isMultiplicityEnabled" (change)="onIsMultiplicityEnabledChange($event)" [disabled]="viewOnly ||!targetField?.get('viewStyle').get('renderStyle').value">
|
<mat-checkbox matLine [checked]="isMultiplicityEnabled" (change)="onIsMultiplicityEnabledChange($event)" [disabled]="viewOnly ||!targetField?.get('viewStyle').get('renderStyle').value">
|
||||||
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-CHECKBOX' | translate}}
|
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-CHECKBOX' | translate}}
|
||||||
</mat-checkbox>
|
</mat-checkbox>
|
||||||
</mat-list-item>
|
</mat-list-item>
|
||||||
|
|
||||||
<!-- Include Comment -->
|
|
||||||
<mat-list-item>
|
<mat-list-item>
|
||||||
<mat-checkbox matLine [formControl]="this.form.get('hasCommentField')" [disabled]="viewOnly ||!targetField?.get('viewStyle').get('renderStyle').value">
|
<mat-checkbox matLine [formControl]="this.form.get('hasCommentField')" [disabled]="viewOnly ||!targetField?.get('viewStyle').get('renderStyle').value">
|
||||||
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-CHECKBOX' | translate}}
|
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-CHECKBOX' | translate}}
|
||||||
</mat-checkbox>
|
</mat-checkbox>
|
||||||
</mat-list-item>
|
</mat-list-item>
|
||||||
<!-- Required -->
|
|
||||||
<mat-list-item *ngIf="targetField &&!( targetField?.get('viewStyle').get('renderStyle').value ==viewStyleEnum.CheckBox )">
|
<mat-list-item *ngIf="targetField &&!( targetField?.get('viewStyle').get('renderStyle').value ==viewStyleEnum.CheckBox )">
|
||||||
<!-- <mat-icon matListIcon>folder</mat-icon> -->
|
|
||||||
<mat-checkbox matLine [checked]="targetField.get('validations').value?.includes(validationTypeEnum.Required)" (change)="toggleRequired(targetField, $event)">Make it required</mat-checkbox>
|
<mat-checkbox matLine [checked]="targetField.get('validations').value?.includes(validationTypeEnum.Required)" (change)="toggleRequired(targetField, $event)">Make it required</mat-checkbox>
|
||||||
<!-- <span (click)="toggleRequired(targetField)"></span> -->
|
|
||||||
</mat-list-item>
|
</mat-list-item>
|
||||||
|
|
||||||
|
|
||||||
<!-- OTHER ACTIONS -->
|
|
||||||
<ng-container *ngIf="!viewOnly">
|
<ng-container *ngIf="!viewOnly">
|
||||||
<h3 matSubheader>Other actions</h3>
|
<h3 matSubheader>Other actions</h3>
|
||||||
<!-- <mat-list-item> -->
|
|
||||||
<!-- <mat-icon matListIcon>folder</mat-icon> -->
|
|
||||||
<!-- <mat-checkbox [(ngModel)]="isComposite" (ngModelChange)="onIsCompositeChange(isComposite)" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMPOSITE-CHECKBOX' | translate}}</mat-checkbox>
|
|
||||||
</mat-list-item> -->
|
|
||||||
<mat-list-item *ngIf="targetField && !viewOnly">
|
<mat-list-item *ngIf="targetField && !viewOnly">
|
||||||
<mat-icon matListIcon>delete</mat-icon>
|
<mat-icon matListIcon>delete</mat-icon>
|
||||||
<span matLine (click)="deleteTargetField()" style="cursor: pointer;">Delete</span>
|
<span matLine (click)="deleteTargetField()" style="cursor: pointer;">Delete</span>
|
||||||
|
@ -248,10 +247,127 @@
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</mat-list>
|
</mat-list>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<ng-container *ngIf="hasFocus">
|
||||||
|
<div class="row justify-content-end pt-2" >
|
||||||
|
<div class="col-auto">
|
||||||
|
<ul class="list-unstyled list-inline fieldset-actions-list d-flex align-items-center">
|
||||||
|
<!-- <li class="list-inline-item" (click)="addNewField()"><mat-icon>folder</mat-icon> <small>Add input</small></li> -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li class="list-inline-item">
|
||||||
|
<mat-icon [matMenuTriggerFor]="inputmenu" >folder</mat-icon>
|
||||||
|
<mat-menu #inputmenu="matMenu">
|
||||||
|
|
||||||
|
<!-- <button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.TextArea)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.TextArea)}}</button>
|
||||||
|
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.FreeText)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.FreeText)}}</button>
|
||||||
|
<mat-divider></mat-divider>
|
||||||
|
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.BooleanDecision)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.BooleanDecision)}}</button>
|
||||||
|
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.RadioBox)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.RadioBox)}}</button>
|
||||||
|
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Select)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Select)}}</button>
|
||||||
|
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.CheckBox)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.CheckBox)}}</button>
|
||||||
|
|
||||||
|
<mat-divider></mat-divider>
|
||||||
|
|
||||||
|
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.DatePicker)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DatePicker)}}</button>
|
||||||
|
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Currency)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Currency)}}</button>
|
||||||
|
|
||||||
|
<mat-divider></mat-divider>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Registries)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Registries)}}</button>
|
||||||
|
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Services)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Services)}}</button>
|
||||||
|
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Researchers)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Researchers)}}</button>
|
||||||
|
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Organizations)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Organizations)}}</button>
|
||||||
|
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.ExternalDatasets)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.ExternalDatasets)}}</button>
|
||||||
|
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.DataRepositories)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DataRepositories)}}</button>
|
||||||
|
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Other)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Other)}}</button>
|
||||||
|
|
||||||
|
|
||||||
|
<mat-divider></mat-divider>
|
||||||
|
|
||||||
|
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.InternalDmpEntities)">Internal DMPs</button>
|
||||||
|
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Tags)">Tags</button>
|
||||||
|
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.DatasetIdentifier)">Dataset Identifier</button>
|
||||||
|
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Validation)">Validation</button>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<mat-action-list>
|
||||||
|
|
||||||
|
<button mat-list-item (click)="addNewInput(viewTypeEnum.TextArea)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.TextArea)}}</button>
|
||||||
|
<button mat-list-item (click)="addNewInput(viewTypeEnum.FreeText)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.FreeText)}}</button>
|
||||||
|
<mat-divider></mat-divider>
|
||||||
|
<button mat-list-item (click)="addNewInput(viewTypeEnum.BooleanDecision)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.BooleanDecision)}}</button>
|
||||||
|
<button mat-list-item (click)="addNewInput(viewTypeEnum.RadioBox)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.RadioBox)}}</button>
|
||||||
|
<button mat-list-item (click)="addNewInput(viewTypeEnum.Select)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Select)}}</button>
|
||||||
|
<button mat-list-item (click)="addNewInput(viewTypeEnum.CheckBox)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.CheckBox)}}</button>
|
||||||
|
|
||||||
|
<mat-divider></mat-divider>
|
||||||
|
|
||||||
|
<button mat-list-item (click)="addNewInput(viewTypeEnum.DatePicker)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DatePicker)}}</button>
|
||||||
|
<button mat-list-item (click)="addNewInput(viewTypeEnum.Currency)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Currency)}}</button>
|
||||||
|
|
||||||
|
<mat-divider></mat-divider>
|
||||||
|
|
||||||
|
<button mat-list-item (click)="$event.stopPropagation();" style="font-style: italic;">APIs</button>
|
||||||
|
<mat-action-list class="ml-4">
|
||||||
|
<button mat-list-item (click)="addNewInput(viewTypeEnum.Registries)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Registries)}}</button>
|
||||||
|
<button mat-list-item (click)="addNewInput(viewTypeEnum.Services)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Services)}}</button>
|
||||||
|
<button mat-list-item (click)="addNewInput(viewTypeEnum.Researchers)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Researchers)}}</button>
|
||||||
|
<button mat-list-item (click)="addNewInput(viewTypeEnum.Organizations)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Organizations)}}</button>
|
||||||
|
<button mat-list-item (click)="addNewInput(viewTypeEnum.ExternalDatasets)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.ExternalDatasets)}}</button>
|
||||||
|
<button mat-list-item (click)="addNewInput(viewTypeEnum.DataRepositories)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DataRepositories)}}</button>
|
||||||
|
<button mat-list-item (click)="addNewInput(viewTypeEnum.Other)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Other)}}</button>
|
||||||
|
</mat-action-list>
|
||||||
|
|
||||||
|
<mat-divider></mat-divider>
|
||||||
|
<button mat-list-item (click)="$event.stopPropagation();" style="font-style: italic;">Argos Entities</button>
|
||||||
|
<mat-action-list class="ml-4">
|
||||||
|
<button mat-list-item (click)="addNewInput(viewTypeEnum.InternalDmpEntities)">Internal DMPs</button>
|
||||||
|
<button mat-list-item (click)="addNewInput(viewTypeEnum.Tags)">Tags</button>
|
||||||
|
<button mat-list-item (click)="addNewInput(viewTypeEnum.DatasetIdentifier)">Dataset Identifier</button>
|
||||||
|
<button mat-list-item (click)="addNewInput(viewTypeEnum.Validation)">Validation</button>
|
||||||
|
</mat-action-list>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</mat-action-list>
|
||||||
|
|
||||||
|
</mat-menu>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <li class="list-inline-item"><mat-icon>folder</mat-icon><small>CommentField</small></li> -->
|
||||||
|
<li class="list-inline-item">
|
||||||
|
<mat-checkbox [formControl]="this.form.get('hasCommentField')">Comment Field</mat-checkbox>
|
||||||
|
</li>
|
||||||
|
<li class="list-inline-item">
|
||||||
|
<mat-checkbox [checked]="isMultiplicityEnabled" (change)="onIsMultiplicityEnabledChange($event)">
|
||||||
|
multiplicity
|
||||||
|
</mat-checkbox>
|
||||||
|
</li>
|
||||||
|
<li class="list-inline-item">
|
||||||
|
<!-- <mat-icon>more_vert</mat-icon> -->
|
||||||
|
<mat-icon [matMenuTriggerFor]="menu" >more_vert</mat-icon>
|
||||||
|
<mat-menu #menu="matMenu">
|
||||||
|
<!-- TODO to check -->
|
||||||
|
<mat-checkbox class="mat-menu-item" (click)="$event.stopPropagation()" [(ngModel)]="showDescription">Description</mat-checkbox>
|
||||||
|
<mat-checkbox class="mat-menu-item" (click)="$event.stopPropagation()" [(ngModel)]="showExtendedDescription">Extended Description</mat-checkbox>
|
||||||
|
<mat-checkbox class="mat-menu-item" (click)="$event.stopPropagation()" [(ngModel)]="showAdditionalInfo">Additional Information</mat-checkbox>
|
||||||
|
</mat-menu>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!--
|
<!--
|
||||||
<span>Preview</span>
|
<span>Preview</span>
|
||||||
|
|
|
@ -58,5 +58,19 @@ $blue-color-light: #5cf7f2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content-page{
|
.main-content-page{
|
||||||
padding: 1.5em;
|
padding: 0em 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fielset-header{
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
// .numbering{
|
||||||
|
// padding: 0.5em 0em;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
.fieldset-actions-list{
|
||||||
|
margin: 0;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
|
@ -10,6 +10,26 @@ import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-prof
|
||||||
import { MatDialog } from '@angular/material';
|
import { MatDialog } from '@angular/material';
|
||||||
import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
|
import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
|
||||||
import { TranslateService } from '@ngx-translate/core';
|
import { TranslateService } from '@ngx-translate/core';
|
||||||
|
import { ViewStyleType } from '../field/view-style-enum';
|
||||||
|
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
|
||||||
|
import { BooleanDecisionFieldDataEditorModel } from '../../../admin/field-data/boolean-decision-field-data-editor-model';
|
||||||
|
import { CheckBoxFieldDataEditorModel } from '../../../admin/field-data/check-box-field-data-editor-model';
|
||||||
|
import { WordListFieldDataEditorModel } from '../../../admin/field-data/word-list-field-data-editor-model';
|
||||||
|
import { AutoCompleteFieldDataEditorModel } from '../../../admin/field-data/auto-complete-field-data-editor-model';
|
||||||
|
import { ResearchersAutoCompleteFieldDataEditorModel } from '../../../admin/field-data/researchers-auto-complete-field-data-editor-model';
|
||||||
|
import { FreeTextFieldDataEditorModel } from '../../../admin/field-data/free-text-field-data-editor-model';
|
||||||
|
import { RadioBoxFieldDataEditorModel } from '../../../admin/field-data/radio-box-field-data-editor-model';
|
||||||
|
import { TextAreaFieldDataEditorModel } from '../../../admin/field-data/text-area-field-data-editor-model';
|
||||||
|
import { DatePickerDataEditorModel } from '../../../admin/field-data/date-picker-data-editor-models';
|
||||||
|
import { ExternalDatasetsDataEditorModel } from '../../../admin/field-data/external-datasets-data-editor-models';
|
||||||
|
import { DataRepositoriesDataEditorModel } from '../../../admin/field-data/data-repositories-data-editor-models';
|
||||||
|
import { RegistriesDataEditorModel } from '../../../admin/field-data/registries-data-editor-models';
|
||||||
|
import { ServicesDataEditorModel } from '../../../admin/field-data/services-data-editor-models';
|
||||||
|
import { TagsDataEditorModel } from '../../../admin/field-data/tags-data-editor-models';
|
||||||
|
import { DatasetsAutoCompleteFieldDataEditorModel } from '../../../admin/field-data/datasets-autocomplete-field-data-editor-mode';
|
||||||
|
import { DatasetIdentifierDataEditorModel } from '../../../admin/field-data/dataset-identifier-data-editor-models';
|
||||||
|
import { CurrencyDataEditorModel } from '../../../admin/field-data/currency-data-editor-models';
|
||||||
|
import { ValidationDataEditorModel } from '../../../admin/field-data/validation-data-editor-models';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-dataset-profile-editor-composite-field-component',
|
selector: 'app-dataset-profile-editor-composite-field-component',
|
||||||
|
@ -23,7 +43,11 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
|
||||||
@Input() viewOnly: boolean;
|
@Input() viewOnly: boolean;
|
||||||
|
|
||||||
@Input() numbering: string;
|
@Input() numbering: string;
|
||||||
|
@Input() hasFocus: boolean = false;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
showDescription: boolean = true;
|
||||||
showAdditionalInfo: boolean = false;
|
showAdditionalInfo: boolean = false;
|
||||||
showExtendedDescription: boolean = false;
|
showExtendedDescription: boolean = false;
|
||||||
|
|
||||||
|
@ -32,15 +56,18 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
|
||||||
// isMultiplicityEnabled = false;
|
// isMultiplicityEnabled = false;
|
||||||
viewStyleEnum = DatasetProfileFieldViewStyle;
|
viewStyleEnum = DatasetProfileFieldViewStyle;
|
||||||
|
|
||||||
|
viewTypeEnum = ViewStyleType;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private dialog: MatDialog,
|
private dialog: MatDialog,
|
||||||
private language: TranslateService,
|
private language: TranslateService,
|
||||||
|
public enumUtils: EnumUtils
|
||||||
) { }
|
) { }
|
||||||
|
|
||||||
ngOnChanges(){
|
ngOnChanges(){
|
||||||
this.setTargetField(null);
|
// this.setTargetField(null);
|
||||||
this.showExtendedDescription = !!this.form.get('extendedDescription').value;
|
// this.showExtendedDescription = !!this.form.get('extendedDescription').value;
|
||||||
this.showAdditionalInfo = !!this.form.get('additionalInformation').value;
|
// this.showAdditionalInfo = !!this.form.get('additionalInformation').value;
|
||||||
}
|
}
|
||||||
|
|
||||||
get isMultiplicityEnabled(){
|
get isMultiplicityEnabled(){
|
||||||
|
@ -70,10 +97,10 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
|
||||||
}
|
}
|
||||||
|
|
||||||
//SET UP TARGET FIELD
|
//SET UP TARGET FIELD
|
||||||
if((this.form.get('fields') as FormArray).length>0){
|
// if((this.form.get('fields') as FormArray).length>0){
|
||||||
//get the first field in list
|
// //get the first field in list
|
||||||
this.targetField = (this.form.get('fields') as FormArray).at(0) as FormGroup;
|
// this.targetField = (this.form.get('fields') as FormArray).at(0) as FormGroup;
|
||||||
}
|
// }
|
||||||
|
|
||||||
this.showExtendedDescription = !!this.form.get('extendedDescription').value;
|
this.showExtendedDescription = !!this.form.get('extendedDescription').value;
|
||||||
this.showAdditionalInfo = !!this.form.get('additionalInformation').value;
|
this.showAdditionalInfo = !!this.form.get('additionalInformation').value;
|
||||||
|
@ -224,6 +251,10 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
deleteTargetField(){
|
deleteTargetField(){
|
||||||
|
|
||||||
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
|
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
|
||||||
|
@ -265,4 +296,130 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
deleteField(index: number){
|
||||||
|
|
||||||
|
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
|
||||||
|
restoreFocus: false,
|
||||||
|
data: {
|
||||||
|
message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
|
||||||
|
confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
|
||||||
|
cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
|
||||||
|
isDeleteConfirmation: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
dialogRef.afterClosed().subscribe(result => {
|
||||||
|
if (result) {
|
||||||
|
this.DeleteField(index);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
addNewInput(type: ViewStyleType){
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const field: FieldEditorModel = new FieldEditorModel();
|
||||||
|
field.id=Guid.create().toString();
|
||||||
|
|
||||||
|
field.ordinal = (this.form.get('fields') as FormArray).length;
|
||||||
|
|
||||||
|
const fieldForm = field.buildForm();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
if (fieldForm.get('data')) {
|
||||||
|
fieldForm.removeControl('data');
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (type) {
|
||||||
|
case this.viewTypeEnum.BooleanDecision:
|
||||||
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.BooleanDecision)
|
||||||
|
fieldForm.addControl('data', new BooleanDecisionFieldDataEditorModel().buildForm());
|
||||||
|
break;
|
||||||
|
case this.viewTypeEnum.CheckBox:
|
||||||
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.CheckBox)
|
||||||
|
fieldForm.addControl('data', new CheckBoxFieldDataEditorModel().buildForm());
|
||||||
|
break;
|
||||||
|
case this.viewTypeEnum.Select:
|
||||||
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
|
||||||
|
fieldForm.addControl('data', new WordListFieldDataEditorModel().buildForm());
|
||||||
|
break;
|
||||||
|
case this.viewTypeEnum.Other:
|
||||||
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
|
||||||
|
fieldForm.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE
|
||||||
|
break;
|
||||||
|
case this.viewTypeEnum.InternalDmpEntities:
|
||||||
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.InternalDmpEntities)
|
||||||
|
fieldForm.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());//TODO TO SEE
|
||||||
|
break;
|
||||||
|
case this.viewTypeEnum.FreeText:
|
||||||
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.FreeText)
|
||||||
|
fieldForm.addControl('data', new FreeTextFieldDataEditorModel().buildForm());
|
||||||
|
break;
|
||||||
|
case this.viewTypeEnum.RadioBox:
|
||||||
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.RadioBox)
|
||||||
|
fieldForm.addControl('data', new RadioBoxFieldDataEditorModel().buildForm());
|
||||||
|
break;
|
||||||
|
case this.viewTypeEnum.TextArea:
|
||||||
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.TextArea)
|
||||||
|
fieldForm.addControl('data', new TextAreaFieldDataEditorModel().buildForm());
|
||||||
|
break;
|
||||||
|
case this.viewTypeEnum.DatePicker:
|
||||||
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatePicker)
|
||||||
|
fieldForm.addControl('data', new DatePickerDataEditorModel().buildForm());
|
||||||
|
break;
|
||||||
|
case this.viewTypeEnum.ExternalDatasets:
|
||||||
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ExternalDatasets)
|
||||||
|
fieldForm.addControl('data', new ExternalDatasetsDataEditorModel().buildForm());
|
||||||
|
break;
|
||||||
|
case this.viewTypeEnum.DataRepositories:
|
||||||
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DataRepositories)
|
||||||
|
fieldForm.addControl('data', new DataRepositoriesDataEditorModel().buildForm());
|
||||||
|
break;
|
||||||
|
case this.viewTypeEnum.Registries:
|
||||||
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Registries)
|
||||||
|
fieldForm.addControl('data', new RegistriesDataEditorModel().buildForm());
|
||||||
|
break;
|
||||||
|
case this.viewTypeEnum.Services:
|
||||||
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Services)
|
||||||
|
fieldForm.addControl('data', new ServicesDataEditorModel().buildForm());
|
||||||
|
break;
|
||||||
|
case this.viewTypeEnum.Tags:
|
||||||
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Tags)
|
||||||
|
fieldForm.addControl('data', new TagsDataEditorModel().buildForm());
|
||||||
|
break;
|
||||||
|
case this.viewTypeEnum.Researchers:
|
||||||
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Researchers)
|
||||||
|
// this.form.addControl('data', new ResearchersDataEditorModel().buildForm()); //TODO TO ASK
|
||||||
|
fieldForm.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());
|
||||||
|
break;
|
||||||
|
case this.viewTypeEnum.Organizations:
|
||||||
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Organizations)
|
||||||
|
// this.form.addControl('data', new OrganizationsDataEditorModel().buildForm());
|
||||||
|
fieldForm.addControl('data', new DatasetsAutoCompleteFieldDataEditorModel().buildForm());
|
||||||
|
break;
|
||||||
|
case this.viewTypeEnum.DatasetIdentifier:
|
||||||
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatasetIdentifier)
|
||||||
|
fieldForm.addControl('data', new DatasetIdentifierDataEditorModel().buildForm());
|
||||||
|
break;
|
||||||
|
case this.viewTypeEnum.Currency:
|
||||||
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Currency)
|
||||||
|
fieldForm.addControl('data', new CurrencyDataEditorModel().buildForm());
|
||||||
|
break;
|
||||||
|
case this.viewTypeEnum.Validation:
|
||||||
|
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Validation)
|
||||||
|
fieldForm.addControl('data', new ValidationDataEditorModel().buildForm());
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
(<FormArray>this.form.get('fields')).push(fieldForm);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,25 @@
|
||||||
<ng-container *ngIf="expandView">
|
<ng-container *ngIf="expandView">
|
||||||
|
|
||||||
|
<!-- ACTIONS PER FIELD -->
|
||||||
|
<div class="row justify-content-end mb-1 mt-1">
|
||||||
|
<div class="col-auto">
|
||||||
|
<ul class="list-unstyled list-inline d-flex align-items-center">
|
||||||
|
<li class="list-inline-item">
|
||||||
|
<mat-slide-toggle [checked]="isRequired" (change)="toggleRequired($event)" labelPosition="before">
|
||||||
|
Required
|
||||||
|
</mat-slide-toggle>
|
||||||
|
</li>
|
||||||
|
<li class="list-inline-item">
|
||||||
|
<mat-icon style="cursor: pointer;" (click)="addNewRule()">visibility</mat-icon>
|
||||||
|
</li>
|
||||||
|
<li class="list-inline-item">
|
||||||
|
<mat-icon style="cursor: pointer;" (click)="onDelete()">delete</mat-icon>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<!-- <mat-form-field class="col">
|
<!-- <mat-form-field class="col">
|
||||||
|
@ -169,7 +189,7 @@
|
||||||
|
|
||||||
<ng-container>
|
<ng-container>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12" *ngIf="expandView">
|
<div class="col-12" *ngIf="expandView && previewForm">
|
||||||
<span style="font-weight: bold">Preview</span>
|
<span style="font-weight: bold">Preview</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="col-12">
|
<!-- <div class="col-12">
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
|
|
||||||
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
|
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
|
||||||
import { FormArray, FormControl, FormGroup } from '@angular/forms';
|
import { FormArray, FormControl, FormGroup } from '@angular/forms';
|
||||||
import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
|
import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
|
||||||
import { ValidationType } from '@app/core/common/enum/validation-type';
|
import { ValidationType } from '@app/core/common/enum/validation-type';
|
||||||
|
@ -33,6 +33,8 @@ import { ViewStyleType } from './view-style-enum';
|
||||||
import { AutoCompleteFieldDataEditorModel } from '../../../admin/field-data/auto-complete-field-data-editor-model';
|
import { AutoCompleteFieldDataEditorModel } from '../../../admin/field-data/auto-complete-field-data-editor-model';
|
||||||
import { DatasetsAutoCompleteFieldDataEditorModel } from '../../../admin/field-data/datasets-autocomplete-field-data-editor-mode';
|
import { DatasetsAutoCompleteFieldDataEditorModel } from '../../../admin/field-data/datasets-autocomplete-field-data-editor-mode';
|
||||||
import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
|
import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
|
||||||
|
import { Guid } from '@common/types/guid';
|
||||||
|
import { MatSlideToggleChange } from '@angular/material';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-dataset-profile-editor-field-component',
|
selector: 'app-dataset-profile-editor-field-component',
|
||||||
|
@ -54,6 +56,9 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
|
||||||
|
|
||||||
@Input() expandView: boolean = true;
|
@Input() expandView: boolean = true;
|
||||||
|
|
||||||
|
|
||||||
|
@Output() delete = new EventEmitter<void>();
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
public enumUtils: EnumUtils,
|
public enumUtils: EnumUtils,
|
||||||
public datasetProfileService: DatasetProfileService
|
public datasetProfileService: DatasetProfileService
|
||||||
|
@ -324,11 +329,23 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
|
||||||
// fieldEditorModel.data = new ResearchersAutoCompleteFieldDataEditorModel().buildForm().getRawValue();
|
// fieldEditorModel.data = new ResearchersAutoCompleteFieldDataEditorModel().buildForm().getRawValue();
|
||||||
// }
|
// }
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
this.previewForm = fieldEditorModel.buildForm();
|
const myTicket = Guid.create().toString();
|
||||||
});
|
this.validTicket = myTicket;
|
||||||
|
setTimeout(() => { //TODO
|
||||||
|
//user hasnt make any new change to inputs /show preview
|
||||||
|
if(myTicket === this.validTicket){
|
||||||
|
this.previewForm = fieldEditorModel.buildForm();
|
||||||
|
}
|
||||||
|
}, 600);
|
||||||
|
|
||||||
|
|
||||||
|
// setTimeout(() => {
|
||||||
|
// this.previewForm = fieldEditorModel.buildForm();
|
||||||
|
// });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
validTicket:string;
|
||||||
// generatePreview(){
|
// generatePreview(){
|
||||||
// const fieldEditorModel = new DatasetDescriptionFieldEditorModel();
|
// const fieldEditorModel = new DatasetDescriptionFieldEditorModel();
|
||||||
|
|
||||||
|
@ -447,4 +464,41 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
|
||||||
this.showPreview = true;
|
this.showPreview = true;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
toggleRequired(event:MatSlideToggleChange){
|
||||||
|
|
||||||
|
let validationsControl = this.form.get('validations') as FormControl;
|
||||||
|
let validations: Array<ValidationType> = validationsControl.value;
|
||||||
|
|
||||||
|
if(event.checked){
|
||||||
|
if(!validations.includes(ValidationType.Required)){//IS ALREADY REQUIRED
|
||||||
|
// validationsControl.setValue(validations.filter(validator=> validator != ValidationType.Required));
|
||||||
|
// validationsControl.updateValueAndValidity();
|
||||||
|
validations.push(ValidationType.Required);
|
||||||
|
// validationsControl.setValue(validations);
|
||||||
|
validationsControl.updateValueAndValidity();
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
validationsControl.setValue(validations.filter(validator=> validator != ValidationType.Required));
|
||||||
|
validationsControl.updateValueAndValidity();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
get isRequired(){
|
||||||
|
let validationsControl = this.form.get('validations') as FormControl;
|
||||||
|
let validations: Array<ValidationType> = validationsControl.value;
|
||||||
|
|
||||||
|
if(validations.includes(ValidationType.Required)){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onDelete(){
|
||||||
|
this.delete.emit();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,98 @@
|
||||||
|
<div class="row" id="main-container">
|
||||||
|
|
||||||
|
<!-- SECTION INFO -->
|
||||||
|
<mat-card style="margin-bottom: 2em;" class="col-12">
|
||||||
|
<mat-card-content>
|
||||||
|
<app-dataset-profile-editor-section-component
|
||||||
|
[form]="form"
|
||||||
|
[viewOnly]="viewOnly"
|
||||||
|
>
|
||||||
|
</app-dataset-profile-editor-section-component>
|
||||||
|
</mat-card-content>
|
||||||
|
</mat-card>
|
||||||
|
|
||||||
|
<!-- FIELDSET INFO -->
|
||||||
|
<div class="col-12 drop-list" cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListAutoScrollDisabled]="false">
|
||||||
|
|
||||||
|
<div style="margin-bottom: 2em;" class="row"
|
||||||
|
*ngFor="let fieldset of form.get('fieldSets')?.controls ; let i=index" cdkDrag [id]="fieldset.get('id').value"
|
||||||
|
[cdkDragDisabled]="!(fieldset.get('id').value === selectedFieldSetId)"
|
||||||
|
>
|
||||||
|
<!-- <h4 style="font-weight: bold" class="col-12">
|
||||||
|
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.FIELDS-TITLE' |
|
||||||
|
translate}}</h4> -->
|
||||||
|
<!-- <div class="col-12"> -->
|
||||||
|
|
||||||
|
<!-- <mat-card-title class="col">{{i + 1}}. {{getFieldTile(fieldControl, i)}}
|
||||||
|
</mat-card-title> -->
|
||||||
|
<!-- <button mat-icon-button type="button" class="deleteBtn col-auto"
|
||||||
|
(click)="deleteFieldSet(selectedTocEntry.form, i);" [disabled]="viewOnly">
|
||||||
|
<mat-icon>delete</mat-icon>
|
||||||
|
</button> -->
|
||||||
|
|
||||||
|
<mat-card class="col-12"
|
||||||
|
(click)="selectedFieldSetId = fieldset.get('id').value"
|
||||||
|
[ngClass]="{'field-container-active': fieldset.get('id').value === selectedFieldSetId}">
|
||||||
|
<mat-card-content>
|
||||||
|
|
||||||
|
<mat-card-header *ngIf="fieldset.get('id').value === selectedFieldSetId">
|
||||||
|
<mat-icon style="display:inline-block; margin: 0px auto; cursor: grab;transform: rotate(90deg);" cdkDragHandle>drag_indicator</mat-icon>
|
||||||
|
</mat-card-header>
|
||||||
|
<app-dataset-profile-editor-composite-field-component [form]="fieldset"
|
||||||
|
[viewOnly]="viewOnly"
|
||||||
|
[numbering]="numbering + '.'+ (i+1)"
|
||||||
|
[hasFocus]="fieldset.get('id').value === selectedFieldSetId">
|
||||||
|
</app-dataset-profile-editor-composite-field-component>
|
||||||
|
</mat-card-content>
|
||||||
|
</mat-card>
|
||||||
|
|
||||||
|
<!-- </div> -->
|
||||||
|
|
||||||
|
<!-- <div class="col-12"><button mat-button class="full-width" (click)="addField()"
|
||||||
|
[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-FIELD'
|
||||||
|
| translate}}</button></div> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- COPIA -->
|
||||||
|
<!-- <div class="row"> -->
|
||||||
|
|
||||||
|
<!-- SECTION INFO -->
|
||||||
|
<!-- <app-dataset-profile-editor-section-component class="col-12 content-displayer p-2" style="margin-bottom: 2em;"
|
||||||
|
[form]="selectedTocEntry.form"
|
||||||
|
[viewOnly]="viewOnly"
|
||||||
|
(fieldsetAdded)="displayItem(_findTocEntryById($event, getTocEntries())); onDataNeedsRefresh();">
|
||||||
|
</app-dataset-profile-editor-section-component> -->
|
||||||
|
|
||||||
|
<!-- FIELDSET INFO -->
|
||||||
|
<!-- <div class="col-12 content-displayer p-2" style="margin-bottom: 2em;"
|
||||||
|
*ngFor="let fieldset of selectedTocEntry.form.get('fieldSets')?.controls ; let i=index"> -->
|
||||||
|
<!-- <h4 style="font-weight: bold" class="col-12">
|
||||||
|
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.FIELDS-TITLE' |
|
||||||
|
translate}}</h4> -->
|
||||||
|
<!-- <div class="col-12"> -->
|
||||||
|
|
||||||
|
<!-- <mat-card-title class="col">{{i + 1}}. {{getFieldTile(fieldControl, i)}}
|
||||||
|
</mat-card-title> -->
|
||||||
|
<!-- <button mat-icon-button type="button" class="deleteBtn col-auto"
|
||||||
|
(click)="deleteFieldSet(selectedTocEntry.form, i);" [disabled]="viewOnly">
|
||||||
|
<mat-icon>delete</mat-icon>
|
||||||
|
</button> -->
|
||||||
|
|
||||||
|
<!-- <app-dataset-profile-editor-composite-field-component class="p-0" [form]="fieldset"
|
||||||
|
[indexPath]="'indexPath' + 'cf' + 'i'" [viewOnly]="viewOnly"
|
||||||
|
[numbering]="selectedTocEntry.numbering + '.'+ (i+1)">
|
||||||
|
</app-dataset-profile-editor-composite-field-component> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
|
||||||
|
<!-- <div class="col-12"><button mat-button class="full-width" (click)="addField()"
|
||||||
|
[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-FIELD'
|
||||||
|
| translate}}</button></div> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
<!-- </div> -->
|
|
@ -0,0 +1,43 @@
|
||||||
|
$blue-color : #129D99;
|
||||||
|
$blue-color-light: #5cf7f2;
|
||||||
|
|
||||||
|
|
||||||
|
.field-container-active{
|
||||||
|
border-radius: .3em;
|
||||||
|
border-left: 0.3em solid $blue-color;
|
||||||
|
}
|
||||||
|
.fieldset-actions-list li{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
//cdkDrag
|
||||||
|
|
||||||
|
.cdk-drag-preview {
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
|
||||||
|
0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||||
|
0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cdk-drag-placeholder {
|
||||||
|
opacity: 0;
|
||||||
|
// background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cdk-drag-animating {
|
||||||
|
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-box:last-child {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-list.cdk-drop-list-dragging {
|
||||||
|
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-container{
|
||||||
|
// max-height: 100vh;
|
||||||
|
// overflow: scroll;
|
||||||
|
}
|
|
@ -0,0 +1,184 @@
|
||||||
|
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
|
||||||
|
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
|
||||||
|
import { FormArray, FormGroup } from '@angular/forms';
|
||||||
|
import { FieldEditorModel } from '@app/ui/admin/dataset-profile/admin/field-editor-model';
|
||||||
|
import { FieldSetEditorModel } from '@app/ui/admin/dataset-profile/admin/field-set-editor-model';
|
||||||
|
import { SectionEditorModel } from '@app/ui/admin/dataset-profile/admin/section-editor-model';
|
||||||
|
import { BaseComponent } from '@common/base/base.component';
|
||||||
|
import { Guid } from '@common/types/guid';
|
||||||
|
import { takeUntil } from 'rxjs/operators';
|
||||||
|
import { ToCEntry, ToCEntryType } from '../../../table-of-contents/table-of-contents-entry';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-dataset-profile-editor-section-fieldset-component',
|
||||||
|
templateUrl: './dataset-profile-editor-section-fieldset.component.html',
|
||||||
|
styleUrls: ['./dataset-profile-editor-section-fieldset.component.scss']
|
||||||
|
})
|
||||||
|
|
||||||
|
export class DatasetProfileEditorSectionFieldSetComponent extends BaseComponent implements OnInit, OnChanges {
|
||||||
|
// @Input() form: FormGroup;
|
||||||
|
//@Input() dataModel: SectionEditorModel;
|
||||||
|
// @Input() indexPath: string;
|
||||||
|
@Input() viewOnly: boolean;
|
||||||
|
// @Input() numbering: string;
|
||||||
|
@Input() tocentry: ToCEntry;
|
||||||
|
|
||||||
|
@Output() selectedEntryId = new EventEmitter<string>();
|
||||||
|
@Output() dataNeedsRefresh = new EventEmitter<void> ();
|
||||||
|
|
||||||
|
// @Output() fieldsetAdded = new EventEmitter<String>(); //returns the id of the fieldset added
|
||||||
|
|
||||||
|
constructor() { super(); }
|
||||||
|
ngOnChanges(changes: SimpleChanges): void {
|
||||||
|
this.initialize();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
form;
|
||||||
|
numbering;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
private _selectedFieldSetId: string = null;
|
||||||
|
get selectedFieldSetId(){
|
||||||
|
return this._selectedFieldSetId;
|
||||||
|
}
|
||||||
|
set selectedFieldSetId(id: string){
|
||||||
|
|
||||||
|
if(id === this._selectedFieldSetId) return;
|
||||||
|
this._selectedFieldSetId = id;
|
||||||
|
this.selectedEntryId.emit(this._selectedFieldSetId);
|
||||||
|
}
|
||||||
|
|
||||||
|
private _findParentSection():FormGroup{
|
||||||
|
const parent = this.form.parent;
|
||||||
|
|
||||||
|
return parent;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
private initialize(){
|
||||||
|
if(this.tocentry.type === ToCEntryType.Section){
|
||||||
|
this.form = this.tocentry.form;
|
||||||
|
this.numbering = this.tocentry.numbering;
|
||||||
|
this._selectedFieldSetId = null;
|
||||||
|
}else if(this.tocentry.type === ToCEntryType.FieldSet){
|
||||||
|
this.form = this.tocentry.form.parent.parent;
|
||||||
|
const numberingArray = this.tocentry.numbering.split('.');
|
||||||
|
if(numberingArray.length){
|
||||||
|
numberingArray.splice(numberingArray.length-1);
|
||||||
|
this.numbering = numberingArray.join('.');
|
||||||
|
}
|
||||||
|
this.selectedFieldSetId = this.tocentry.id;
|
||||||
|
//scroll to fieldset
|
||||||
|
// setTimeout(() => {
|
||||||
|
// const element = document.getElementById(this.selectedFieldSetId);
|
||||||
|
// element.scrollTop = element.scrollHeight;
|
||||||
|
// }, 2000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
|
||||||
|
this.initialize();
|
||||||
|
|
||||||
|
|
||||||
|
//TODO
|
||||||
|
// this.form.root.get('pages').valueChanges
|
||||||
|
// .pipe(takeUntil(this._destroyed))
|
||||||
|
// .subscribe(x =>
|
||||||
|
// this.keepPageSelectionValid(x)
|
||||||
|
// );
|
||||||
|
}
|
||||||
|
|
||||||
|
drop(event: CdkDragDrop<string[]>) {
|
||||||
|
// if(!this.links || !this.links.length) return;
|
||||||
|
|
||||||
|
if(event.container === event.previousContainer){
|
||||||
|
// moveItemInArray(this.links, event.previousIndex, event.currentIndex);
|
||||||
|
|
||||||
|
let arrayToUpdate: FormArray = this.form.get('fieldSets') as FormArray;
|
||||||
|
// if(this.parentLink && this.parentLink.form){
|
||||||
|
// switch(this.parentLink.subEntriesType){
|
||||||
|
// case this.tocEntryType.Field:
|
||||||
|
// arrayToUpdate = (this.parentLink.form.get('fields') as FormArray);
|
||||||
|
// break;
|
||||||
|
// case this.tocEntryType.FieldSet:
|
||||||
|
// arrayToUpdate = (this.parentLink.form.get('fieldSets') as FormArray);
|
||||||
|
// break;
|
||||||
|
// case this.tocEntryType.Section:
|
||||||
|
// arrayToUpdate = (this.parentLink.form.get('sections') as FormArray);
|
||||||
|
// break
|
||||||
|
// }
|
||||||
|
|
||||||
|
// }
|
||||||
|
if(arrayToUpdate.controls){
|
||||||
|
moveItemInArray(arrayToUpdate.controls, event.previousIndex, event.currentIndex);
|
||||||
|
//update ordinality
|
||||||
|
arrayToUpdate.controls.forEach((element,idx ) => {
|
||||||
|
element.get('ordinal').setValue(idx);
|
||||||
|
element.updateValueAndValidity();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dataNeedsRefresh.emit();
|
||||||
|
}else{
|
||||||
|
console.log('not same container');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
// //this.dataModel.fieldSets.push(fieldSet);
|
||||||
|
// //}
|
||||||
|
// const fieldsetsArray = this.form.get('fieldSets') as FormArray;
|
||||||
|
// fieldsetsArray.push(fieldSet.buildForm());
|
||||||
|
|
||||||
|
// const fieldSetForm = fieldsetsArray.at(fieldsetsArray.length-1);
|
||||||
|
// //emit id inserted
|
||||||
|
// if(fieldSetForm){
|
||||||
|
// const id: string = fieldSetForm.get('id').value;
|
||||||
|
// this.fieldsetAdded.emit(id);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// addSectioninSection() {
|
||||||
|
// const section: SectionEditorModel = new SectionEditorModel();
|
||||||
|
// //this.dataModel.sections.push(section);
|
||||||
|
// (<FormArray>this.form.get('sections')).push(section.buildForm());
|
||||||
|
// }
|
||||||
|
|
||||||
|
// DeleteSectionInSection(index) {
|
||||||
|
// //this.dataModel.sections.splice(index, 1);
|
||||||
|
// (<FormArray>this.form.get('sections')).removeAt(index);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// deleteFieldSet(index) {
|
||||||
|
// //this.dataModel.fieldSets.splice(index, 1);
|
||||||
|
// (<FormArray>this.form.get('fieldSets')).removeAt(index);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// keepPageSelectionValid(pagesJson: Array<any>) {
|
||||||
|
// const selectedPage = this.form.get('page').value as String;
|
||||||
|
// // const pages: Array<PageEditorModel> = JsonSerializer.fromJSONArray(pagesJson, Page);
|
||||||
|
// if (pagesJson.find(elem => elem.id === selectedPage) === undefined) {
|
||||||
|
// this.form.get('page').reset();
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// getFieldTile(formGroup: FormGroup, index: number) {
|
||||||
|
// if (formGroup.get('title') && formGroup.get('title').value && formGroup.get('title').value.length > 0) { return formGroup.get('title').value; }
|
||||||
|
// return "Field " + (index + 1);
|
||||||
|
// }
|
||||||
|
}
|
|
@ -59,11 +59,11 @@
|
||||||
|
|
||||||
-->
|
-->
|
||||||
<!-- Able to add fieldsets if only the sections has no subsections -->
|
<!-- Able to add fieldsets if only the sections has no subsections -->
|
||||||
<ng-container *ngIf="form.get('sections').controls?.length == 0">
|
<!-- <ng-container *ngIf="form.get('sections').controls?.length == 0">
|
||||||
<div class="col-12"><button mat-button class="full-width" (click)="addField()" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-FIELD'
|
<div class="col-12"><button mat-button class="full-width" (click)="addField()" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-FIELD'
|
||||||
| translate}}</button>
|
| translate}}</button>
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</ng-container> -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -118,106 +118,130 @@
|
||||||
|
|
||||||
<!-- TABLE -->
|
<!-- TABLE -->
|
||||||
<div class="col-3">
|
<div class="col-3">
|
||||||
<dataset-profile-table-of-contents class="toc-pane-container"
|
|
||||||
[links]="toCEntries"
|
|
||||||
(stepFound)="onStepFound($event)"
|
<div class="row sticky-top" style="top : 2em">
|
||||||
(currentLinks)="getLinks($event)"
|
<dataset-profile-table-of-contents class="toc-pane-container col"
|
||||||
(itemClick)="displayItem($event)"
|
[links]="toCEntries"
|
||||||
(newEntry)="addNewEntry($event)"
|
(stepFound)="onStepFound($event)"
|
||||||
(createEntry) = "addNewEntry($event)"
|
(currentLinks)="getLinks($event)"
|
||||||
(removeEntry)="onRemoveEntry($event)"
|
(itemClick)="displayItem($event)"
|
||||||
[itemSelected]="selectedTocEntry"
|
(newEntry)="addNewEntry($event)"
|
||||||
[viewOnly]="viewOnly"
|
(createEntry) = "addNewEntry($event)"
|
||||||
(dataNeedsRefresh)="onDataNeedsRefresh()">
|
(removeEntry)="onRemoveEntry($event)"
|
||||||
</dataset-profile-table-of-contents>
|
[itemSelected]="selectedTocEntry"
|
||||||
|
[viewOnly]="viewOnly"
|
||||||
|
(dataNeedsRefresh)="onDataNeedsRefresh()">
|
||||||
|
</dataset-profile-table-of-contents>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- DISPLAYER -->
|
<!-- DISPLAYER -->
|
||||||
<div class="col">
|
<div class="col ml-4">
|
||||||
<div class="row content-displayer" *ngIf="selectedTocEntry">
|
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<div class="col">
|
||||||
|
<div class="row" *ngIf="selectedTocEntry">
|
||||||
|
|
||||||
<!-- PAGE INFO -->
|
<!-- PAGE INFO -->
|
||||||
<div class="col-12" *ngIf="selectedTocEntry.type === tocEntryEnumValues.Page">
|
<div class="col-12 content-displayer p-2" *ngIf="selectedTocEntry.type === tocEntryEnumValues.Page">
|
||||||
<form [formGroup]="selectedTocEntry.form">
|
<form [formGroup]="selectedTocEntry.form">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<!-- PAGE NAME -->
|
<!-- PAGE NAME -->
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="heading">{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME' | translate}} *</div>
|
<div class="heading">{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME' | translate}} *</div>
|
||||||
<div class="hint">{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME-HINT' | translate}}</div>
|
<div class="hint">{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME-HINT' | translate}}</div>
|
||||||
<mat-form-field>
|
<mat-form-field>
|
||||||
<input type="text" matInput formControlName="title">
|
<input type="text" matInput formControlName="title">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- PAGE ID -->
|
||||||
|
<!-- <div class="col">
|
||||||
|
<div class="heading">Page id *</div>
|
||||||
|
<mat-form-field>
|
||||||
|
<input type="text" matInput formControlName="id">
|
||||||
|
</mat-form-field>
|
||||||
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <div class="row">
|
||||||
<!-- PAGE ID -->
|
<div class="col">
|
||||||
<!-- <div class="col">
|
<div class="heading">Ordinal *</div>
|
||||||
<div class="heading">Page id *</div>
|
<mat-form-field>
|
||||||
<mat-form-field>
|
<input type="text" matInput formControlName="ordinal">
|
||||||
<input type="text" matInput formControlName="id">
|
</mat-form-field>
|
||||||
</mat-form-field>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</form>
|
||||||
<!-- <div class="row">
|
</div>
|
||||||
<div class="col">
|
|
||||||
<div class="heading">Ordinal *</div>
|
<div class="col-12" *ngIf="(selectedTocEntry.type === tocEntryEnumValues.Section) || (selectedTocEntry.type === tocEntryEnumValues.FieldSet)" >
|
||||||
<mat-form-field>
|
<app-dataset-profile-editor-section-fieldset-component
|
||||||
<input type="text" matInput formControlName="ordinal">
|
[tocentry]="selectedTocEntry"
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- SECTION INFO -->
|
|
||||||
<app-dataset-profile-editor-section-component class="col-12"
|
|
||||||
*ngIf="selectedTocEntry.type === tocEntryEnumValues.Section"
|
|
||||||
[form]="selectedTocEntry.form" [indexPath]="'tbd'" [viewOnly]="viewOnly"
|
|
||||||
(fieldsetAdded)="displayItem(_findTocEntryById($event, getTocEntries())); onDataNeedsRefresh();">
|
|
||||||
</app-dataset-profile-editor-section-component>
|
|
||||||
|
|
||||||
<!-- FIELDSET INFO -->
|
|
||||||
<div class="col-12" *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet">
|
|
||||||
<!-- <h4 style="font-weight: bold" class="col-12">
|
|
||||||
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.FIELDS-TITLE' |
|
|
||||||
translate}}</h4> -->
|
|
||||||
<!-- <div class="col-12"> -->
|
|
||||||
|
|
||||||
<!-- <mat-card-title class="col">{{i + 1}}. {{getFieldTile(fieldControl, i)}}
|
|
||||||
</mat-card-title> -->
|
|
||||||
<!-- <button mat-icon-button type="button" class="deleteBtn col-auto"
|
|
||||||
(click)="deleteFieldSet(selectedTocEntry.form, i);" [disabled]="viewOnly">
|
|
||||||
<mat-icon>delete</mat-icon>
|
|
||||||
</button> -->
|
|
||||||
|
|
||||||
<app-dataset-profile-editor-composite-field-component class="p-0"
|
|
||||||
[form]="selectedTocEntry.form" [indexPath]="'indexPath' + 'cf' + 'i'"
|
|
||||||
[viewOnly]="viewOnly"
|
[viewOnly]="viewOnly"
|
||||||
[numbering]="selectedTocEntry.numbering">
|
(selectedEntryId)="displayItem(_findTocEntryById($event, getTocEntries()))"
|
||||||
</app-dataset-profile-editor-composite-field-component>
|
(dataNeedsRefresh)="onDataNeedsRefresh()"
|
||||||
<!-- </div> -->
|
>
|
||||||
|
|
||||||
|
</app-dataset-profile-editor-section-fieldset-component>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- <div class="col-12"><button mat-button class="full-width" (click)="addField()"
|
|
||||||
[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-FIELD'
|
</div>
|
||||||
| translate}}</button></div> -->
|
|
||||||
|
<div class="content-displayer row justify-content-center" *ngIf="!numOfPages" style="min-height: 30em;">
|
||||||
|
<div class="col-auto align-self-center text-center">
|
||||||
|
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.NOTHING-HERE-HINT'| translate}}
|
||||||
|
<br>
|
||||||
|
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.START-CREATING-PAGE-START'| translate}}
|
||||||
|
|
||||||
|
<strong style="cursor: pointer;" (click)="addNewEntry({childType: tocEntryEnumValues.Page,parent: null})">
|
||||||
|
<em>
|
||||||
|
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.START-CREATING-PAGE-END'| translate}}
|
||||||
|
</em>
|
||||||
|
<mat-icon color="accent">add</mat-icon>
|
||||||
|
</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- TOOLBAR -->
|
||||||
|
<div class="col-auto"
|
||||||
|
*ngIf="((selectedTocEntry?.type == tocEntryEnumValues.Section)||(selectedTocEntry?.type == tocEntryEnumValues.FieldSet) )&&(selectedTocEntry?.subEntriesType != tocEntryEnumValues.Section)">
|
||||||
|
<div class="row" class="actions-list bg-white sticky-top" style="top: 2em;">
|
||||||
|
<mat-list role="list">
|
||||||
|
|
||||||
|
<ng-container *ngIf="!viewOnly">
|
||||||
|
<h3 matSubheader>General tools</h3>
|
||||||
|
|
||||||
|
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet">
|
||||||
|
<mat-icon matListIcon>folder</mat-icon>
|
||||||
|
<span matLine style="cursor: pointer;" (click)="addNewEntry({childType: tocEntryEnumValues.FieldSet,parent: {form: selectedTocEntry.form.parent.parent}})" >Add Input Set</span>
|
||||||
|
</mat-list-item>
|
||||||
|
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.Section ">
|
||||||
|
<mat-icon matListIcon>folder</mat-icon>
|
||||||
|
<span matLine style="cursor: pointer;" (click)="addNewEntry({childType: tocEntryEnumValues.FieldSet,parent: selectedTocEntry})" >Add Input Set</span>
|
||||||
|
</mat-list-item>
|
||||||
|
|
||||||
|
|
||||||
|
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet">
|
||||||
|
<mat-icon matListIcon>file_copy</mat-icon>
|
||||||
|
<span matLine style="cursor: pointer;" (click)="cloneFieldSet(selectedTocEntry.form)">Clone</span>
|
||||||
|
</mat-list-item>
|
||||||
|
|
||||||
|
<mat-list-item *ngIf="selectedTocEntry.type === tocEntryEnumValues.FieldSet">
|
||||||
|
<mat-icon matListIcon>delete</mat-icon>
|
||||||
|
<span matLine style="cursor: pointer;" (click)="onRemoveEntry(selectedTocEntry)">Delete</span>
|
||||||
|
</mat-list-item>
|
||||||
|
</ng-container>
|
||||||
|
</mat-list>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="content-displayer row justify-content-center" *ngIf="!numOfPages">
|
|
||||||
<div class="col-auto align-self-center text-center">
|
|
||||||
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.NOTHING-HERE-HINT'| translate}}
|
|
||||||
<br>
|
|
||||||
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.START-CREATING-PAGE-START'| translate}}
|
|
||||||
|
|
||||||
<strong style="cursor: pointer;" (click)="addNewEntry({childType: tocEntryEnumValues.Page,parent: null})">
|
|
||||||
<em>
|
|
||||||
{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.START-CREATING-PAGE-END'| translate}}
|
|
||||||
</em>
|
|
||||||
<mat-icon color="accent">add</mat-icon>
|
|
||||||
</strong>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
<mat-accordion class="col-12" [multi]="true">
|
<mat-accordion class="col-12" [multi]="true">
|
||||||
|
@ -300,11 +324,11 @@
|
||||||
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<div class="row">
|
<!-- <div class="row">
|
||||||
<button (click)="printForm()">
|
<button (click)="printForm()">
|
||||||
console form
|
console form
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div> -->
|
||||||
<!-- <div class="row">
|
<!-- <div class="row">
|
||||||
<button (click)="foo()">foo</button>
|
<button (click)="foo()">foo</button>
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
|
@ -25,7 +25,7 @@
|
||||||
padding: 0em;
|
padding: 0em;
|
||||||
// padding-top: 0em;
|
// padding-top: 0em;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
min-height: 30em;
|
// min-height: 30em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.heading {
|
.heading {
|
||||||
|
@ -92,4 +92,15 @@
|
||||||
background-color: #f7dd72;
|
background-color: #f7dd72;
|
||||||
padding-left: 2em;
|
padding-left: 2em;
|
||||||
padding-right: 2em;
|
padding-right: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$blue-color : #129D99;
|
||||||
|
$blue-color-light: #5cf7f2;
|
||||||
|
|
||||||
|
.actions-list{
|
||||||
|
border: 1px solid $blue-color;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
}
|
}
|
|
@ -2,7 +2,7 @@
|
||||||
import { of as observableOf, Observable } from 'rxjs';
|
import { of as observableOf, Observable } from 'rxjs';
|
||||||
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
|
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
|
||||||
import { AfterViewInit, Component, OnChanges, OnInit, QueryList, SimpleChanges, ViewChild } from '@angular/core';
|
import { AfterViewInit, Component, OnChanges, OnInit, QueryList, SimpleChanges, ViewChild } from '@angular/core';
|
||||||
import { Form, FormArray, FormControl, FormGroup } from '@angular/forms';
|
import { Form, FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
|
||||||
import { MatDialog } from '@angular/material/dialog';
|
import { MatDialog } from '@angular/material/dialog';
|
||||||
import { MatHorizontalStepper, MatStep } from '@angular/material/stepper';
|
import { MatHorizontalStepper, MatStep } from '@angular/material/stepper';
|
||||||
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
|
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
|
||||||
|
@ -84,7 +84,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
||||||
private matomoService: MatomoService,
|
private matomoService: MatomoService,
|
||||||
private enumUtils: EnumUtils,
|
private enumUtils: EnumUtils,
|
||||||
private datasetWizardService: DatasetWizardService,
|
private datasetWizardService: DatasetWizardService,
|
||||||
private visibilityRulesService: VisibilityRulesService
|
private visibilityRulesService: VisibilityRulesService,
|
||||||
|
private fb: FormBuilder
|
||||||
) {
|
) {
|
||||||
super();
|
super();
|
||||||
// this.profileID = route.snapshot.params['id'];
|
// this.profileID = route.snapshot.params['id'];
|
||||||
|
@ -747,7 +748,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
||||||
const parentArray = parent.form.get('fieldSets') as FormArray;
|
const parentArray = parent.form.get('fieldSets') as FormArray;
|
||||||
const addedFieldSet = parentArray.at(parentArray.length - 1);
|
const addedFieldSet = parentArray.at(parentArray.length - 1);
|
||||||
|
|
||||||
this.selectedTocEntry = this._findTocEntryById(addedFieldSet.get('id').value, this.getTocEntries());
|
// this.selectedTocEntry = this._findTocEntryById(addedFieldSet.get('id').value, this.getTocEntries());
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
|
@ -1215,5 +1216,47 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
||||||
previewForm:FormGroup;
|
previewForm:FormGroup;
|
||||||
onDataNeedsRefresh(){
|
onDataNeedsRefresh(){
|
||||||
this.refreshToCEntries();
|
this.refreshToCEntries();
|
||||||
|
}
|
||||||
|
|
||||||
|
cloneFieldSet(fieldset: FormGroup){
|
||||||
|
//TODO
|
||||||
|
const values = fieldset.getRawValue();
|
||||||
|
const parentArray = fieldset.parent as FormArray;
|
||||||
|
|
||||||
|
values.id = Guid.create().toString();
|
||||||
|
values.ordinal = parentArray.length;
|
||||||
|
|
||||||
|
values.fields.forEach(element => {
|
||||||
|
element.id = Guid.create().toString()
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const clonedModel = new FieldSetEditorModel().fromModel(values);
|
||||||
|
const clonedForm = clonedModel.buildForm();
|
||||||
|
parentArray.push(clonedForm);
|
||||||
|
|
||||||
|
|
||||||
|
this.refreshToCEntries();
|
||||||
|
|
||||||
|
|
||||||
|
// //create one field form fieldset
|
||||||
|
// const field: FieldEditorModel = new FieldEditorModel(); //to ask
|
||||||
|
// field.id = Guid.create().toString();
|
||||||
|
// 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();
|
||||||
|
// fieldSet.ordinal = (parent.form.get('fieldSets') as FormArray).length;
|
||||||
|
|
||||||
|
// (<FormArray>parent.form.get('fieldSets')).push(fieldSet.buildForm());
|
||||||
|
|
||||||
|
// // const parentArray = parent.form.get('fieldSets') as FormArray;
|
||||||
|
// const addedFieldSet = parentArray.at(parentArray.length - 1);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -3,7 +3,7 @@
|
||||||
<span class="mat-button" (click)="deleteEntry(parentLink)" *ngIf="itemSelected?.id == parentLink?.id"><mat-icon>delete</mat-icon></span>
|
<span class="mat-button" (click)="deleteEntry(parentLink)" *ngIf="itemSelected?.id == parentLink?.id"><mat-icon>delete</mat-icon></span>
|
||||||
</span> -->
|
</span> -->
|
||||||
|
|
||||||
<div class="table-item row" *ngIf="!(parentLink.type == undefined)">
|
<div class="table-item row align-items-center" *ngIf="!(parentLink.type == undefined)">
|
||||||
<div class="col link-info"
|
<div class="col link-info"
|
||||||
[ngStyle]="{'padding-top': (!((parentLink?.subEntriesType == tocEntryType.FieldSet) && !selectedItemInLinks) || itemSelected?.id == parentLink.id)? '0em': '.6em'}"
|
[ngStyle]="{'padding-top': (!((parentLink?.subEntriesType == tocEntryType.FieldSet) && !selectedItemInLinks) || itemSelected?.id == parentLink.id)? '0em': '.6em'}"
|
||||||
>
|
>
|
||||||
|
@ -11,7 +11,7 @@
|
||||||
{{parentLink?.numbering}} {{parentLink?.label? parentLink?.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
|
{{parentLink?.numbering}} {{parentLink?.label? parentLink?.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
|
||||||
</span> -->
|
</span> -->
|
||||||
|
|
||||||
<span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == parentLink?.id}" (click)="itemClicked(parentLink)"
|
<!-- <span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == parentLink?.id}" (click)="itemClicked(parentLink)"
|
||||||
[matBadge]="parentLink.subEntries?.length"
|
[matBadge]="parentLink.subEntries?.length"
|
||||||
matBadgeOverlap="false"
|
matBadgeOverlap="false"
|
||||||
[matBadgeHidden]="!((parentLink?.subEntriesType == tocEntryType.FieldSet) && !selectedItemInLinks) || itemSelected?.id == parentLink.id"
|
[matBadgeHidden]="!((parentLink?.subEntriesType == tocEntryType.FieldSet) && !selectedItemInLinks) || itemSelected?.id == parentLink.id"
|
||||||
|
@ -19,26 +19,49 @@
|
||||||
matBadgeColor="accent"
|
matBadgeColor="accent"
|
||||||
matBadgeSize="small"
|
matBadgeSize="small"
|
||||||
|
|
||||||
|
[ngStyle]="{'font-size' : (parentLink.type == tocEntryType.FieldSet? '.9rem':'1rem')}"
|
||||||
|
> -->
|
||||||
|
<span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == parentLink?.id}" (click)="itemClicked(parentLink)"
|
||||||
[ngStyle]="{'font-size' : (parentLink.type == tocEntryType.FieldSet? '.9rem':'1rem')}"
|
[ngStyle]="{'font-size' : (parentLink.type == tocEntryType.FieldSet? '.9rem':'1rem')}"
|
||||||
>
|
>
|
||||||
<!-- {{parentLink?.numbering}} {{parentLink?.label? parentLink?.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}} -->
|
<!-- {{parentLink?.numbering}} {{parentLink?.label? parentLink?.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}} -->
|
||||||
{{parentLink?.numbering}} {{parentLink?.form.get('title').value? parentLink?.form.get('title').value : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
|
{{parentLink?.numbering}} {{parentLink?.form.get('title').value? parentLink?.form.get('title').value : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
|
||||||
|
<!-- {{parentLink?.numbering}} {{parentLink?.form.get('title').value? parentLink?.form.get('title').value : parentLink.id}} -->
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto" *ngIf="!viewOnly && (itemSelected?.id == parentLink?.id)">
|
<div class="col-auto d-flex align-items-center" >
|
||||||
<span style="cursor: pointer;" (click)="deleteEntry(parentLink)"><mat-icon>delete</mat-icon></span>
|
<span class="badge-ball"
|
||||||
|
*ngIf="!(!((parentLink?.subEntriesType == tocEntryType.FieldSet) && !selectedItemInLinks) || itemSelected?.id == parentLink.id)">
|
||||||
|
{{parentLink.subEntries?.length}}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
|
||||||
|
<span style="cursor: pointer;" (click)="deleteEntry(parentLink)"
|
||||||
|
*ngIf="!viewOnly && (itemSelected?.id == parentLink?.id)"
|
||||||
|
>
|
||||||
|
<mat-icon>delete</mat-icon>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- When item is not selected then show only the pages (first level) -->
|
<!-- When item is not selected then show only the pages (first level) -->
|
||||||
<!-- <ng-container *ngIf="tocEntryIsChildOf(itemSelected,parentLink) || (!itemSelected && parentLink?.subEntriesType == tocEntryType.Page)"> -->
|
<!-- <ng-container *ngIf="tocEntryIsChildOf(itemSelected,parentLink) || (!itemSelected && parentLink?.subEntriesType == tocEntryType.Page)"> -->
|
||||||
<div cdkDropList class="ml-2" [ngClass]="{'border-left-active':itemSelected?.id == parentLink?.id, 'pl-1':itemSelected?.id == parentLink?.id}"
|
<div cdkDropList class="ml-2" [ngClass]="{'border-left-active':itemSelected?.id == parentLink?.id, 'pl-1':itemSelected?.id == parentLink?.id}"
|
||||||
*ngIf="(parentLink?.subEntriesType!= tocEntryType.FieldSet) || selectedItemInLinks || parentLink?.id === itemSelected?.id"
|
[hidden]="!((parentLink?.subEntriesType!= tocEntryType.FieldSet) || selectedItemInLinks || parentLink?.id === itemSelected?.id || dragHoveringOver)"
|
||||||
(cdkDropListDropped)="drop($event)"
|
(cdkDropListDropped)="drop($event)"
|
||||||
class="cdk-link-list"
|
class="cdk-link-list"
|
||||||
|
[cdkDropListSortingDisabled]="viewOnly"
|
||||||
|
[cdkDropListConnectedTo]="[]"
|
||||||
|
(cdkDropListEntered)="hoveroverEnter()"
|
||||||
|
(cdkDropListExited)="hoveroverLeft()"
|
||||||
|
(cdkDropListDropped)="hoveroverLeft()"
|
||||||
|
[id]="parentLink.id"
|
||||||
|
[cdkDropListData]="links"
|
||||||
>
|
>
|
||||||
|
|
||||||
|
|
||||||
<div *ngFor="let link of links; last as isLast"
|
<div *ngFor="let link of links; last as isLast"
|
||||||
[ngClass]="{'mb-3': link.type === tocEntryType.Page}"
|
[ngClass]="{'mb-3': link.type === tocEntryType.Page}"
|
||||||
cdkDrag
|
cdkDrag
|
||||||
|
@ -82,28 +105,33 @@
|
||||||
[itemSelected] = "itemSelected"
|
[itemSelected] = "itemSelected"
|
||||||
(createFooEntry)="createNewEntry($event)"
|
(createFooEntry)="createNewEntry($event)"
|
||||||
[viewOnly]="viewOnly"
|
[viewOnly]="viewOnly"
|
||||||
(dataNeedsRefresh)="onDataNeedsRefresh()">
|
(dataNeedsRefresh)="onDataNeedsRefresh()"
|
||||||
|
[dropListGroup]="dropListGroup"
|
||||||
|
[dragHoveringOver]="dragHoveringOver"
|
||||||
|
[dropListStruct]="dropListStruct"
|
||||||
|
[depth]="depth+1">
|
||||||
</app-dataset-profile-table-of-contents-internal-section>
|
</app-dataset-profile-table-of-contents-internal-section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- <div *ngIf="links && !viewOnly && !(parentLink?.subEntriesType == tocEntryType.Page) " > -->
|
<!-- <div *ngIf="links && !viewOnly && !(parentLink?.subEntriesType == tocEntryType.Page) " > -->
|
||||||
<ng-container *ngIf="selectedItemInLinks && (link.type != tocEntryType.Page) && isLast && (!viewOnly)">
|
<ng-container *ngIf="selectedItemInLinks && (link.type != tocEntryType.Page) && isLast && (!viewOnly) &&(link.type != tocEntryType.FieldSet)">
|
||||||
<button class="mat-button add-new-entry" style="padding-left: 0px;" (click)="createNewEntry({childType:link.type,parent:parentLink})">
|
<button class="mat-button add-new-entry" style="padding-left: 0px;" (click)="createNewEntry({childType:link.type,parent:parentLink})">
|
||||||
<mat-icon>add</mat-icon>
|
<!-- <mat-icon>add</mat-icon> -->
|
||||||
<ng-container [ngSwitch]="link.type">
|
<ng-container [ngSwitch]="link.type">
|
||||||
<ng-container *ngSwitchCase="tocEntryType.Section">
|
<ng-container *ngSwitchCase="tocEntryType.Section">
|
||||||
Subsection
|
Subsection +
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<!-- <ng-container *ngSwitchCase="tocEntryType.Page">
|
<!-- <ng-container *ngSwitchCase="tocEntryType.Page">
|
||||||
Section
|
Section
|
||||||
</ng-container> -->
|
</ng-container> -->
|
||||||
<ng-container *ngSwitchCase="tocEntryType.FieldSet">
|
<ng-container *ngSwitchCase="tocEntryType.FieldSet">
|
||||||
Fieldset
|
Field +
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</button>
|
</button>
|
||||||
|
<!-- <button (click)="showDroplists()">show droplist</button> -->
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<!-- </div> -->
|
<!-- </div> -->
|
||||||
</div>
|
</div>
|
||||||
|
@ -118,14 +146,16 @@
|
||||||
|
|
||||||
<!-- Give option to generate section -->
|
<!-- Give option to generate section -->
|
||||||
<button class="mat-button" style="padding-left: 0px; display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
|
<button class="mat-button" style="padding-left: 0px; display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
|
||||||
<mat-icon>add</mat-icon>Sebsection
|
<!-- <mat-icon>add</mat-icon> -->
|
||||||
|
Subsection +
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
||||||
<!-- Give option to generate fieldset (only if parent is section) -->
|
<!-- Give option to generate fieldset (only if parent is section) -->
|
||||||
<button *ngIf="parentLink.type == tocEntryType.Section" class="mat-button" style="padding-left: 0px;" (click)="createNewEntry({childType:tocEntryType.FieldSet,parent:parentLink})">
|
<!-- <button *ngIf="parentLink.type == tocEntryType.Section" class="mat-button" style="padding-left: 0px;" (click)="createNewEntry({childType:tocEntryType.FieldSet,parent:parentLink})">
|
||||||
<mat-icon>add</mat-icon> Fieldset
|
|
||||||
</button>
|
Field +
|
||||||
|
</button> -->
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -156,6 +186,9 @@
|
||||||
<!-- Only for the page -->
|
<!-- Only for the page -->
|
||||||
<div *ngIf="parentLink?.subEntriesType == tocEntryType.Page && !viewOnly">
|
<div *ngIf="parentLink?.subEntriesType == tocEntryType.Page && !viewOnly">
|
||||||
<button class="mat-button ml-3 mt-2" (click)="createNewEntry({childType:parentLink.subEntriesType,parent:parentLink})" style="padding-left:0px">
|
<button class="mat-button ml-3 mt-2" (click)="createNewEntry({childType:parentLink.subEntriesType,parent:parentLink})" style="padding-left:0px">
|
||||||
<mat-icon>add</mat-icon> Section
|
<!-- <mat-icon>add</mat-icon> -->
|
||||||
|
Section +
|
||||||
</button>
|
</button>
|
||||||
|
<!-- <button (click)="showDroplists()">show droplist</button>
|
||||||
|
<button (click)="showStructs()">structs</button> -->
|
||||||
</div>
|
</div>
|
|
@ -144,6 +144,7 @@
|
||||||
|
|
||||||
.cdk-drag-placeholder {
|
.cdk-drag-placeholder {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
// background-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cdk-drag-animating {
|
.cdk-drag-animating {
|
||||||
|
@ -156,4 +157,18 @@
|
||||||
|
|
||||||
.cdk-link-list.cdk-drop-list-dragging .link-box:not(.cdk-drag-placeholder) {
|
.cdk-link-list.cdk-drop-list-dragging .link-box:not(.cdk-drag-placeholder) {
|
||||||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$blue-color : #129D99;
|
||||||
|
$blue-color-light: #5cf7f2;
|
||||||
|
$yellow: #f7dd72;
|
||||||
|
.badge-ball{
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #FFF;
|
||||||
|
font-size: small;
|
||||||
|
font-weight: bold;
|
||||||
|
min-width: 2em;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
|
@ -1,6 +1,6 @@
|
||||||
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
|
import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
|
||||||
import { DOCUMENT } from '@angular/common';
|
import { DOCUMENT } from '@angular/common';
|
||||||
import { Component, EventEmitter, Inject, Input, OnInit, Output, SimpleChanges } from '@angular/core';
|
import { Component, EventEmitter, Inject, Input, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
|
||||||
import { FormArray } from '@angular/forms';
|
import { FormArray } from '@angular/forms';
|
||||||
import { BaseComponent } from '@common/base/base.component';
|
import { BaseComponent } from '@common/base/base.component';
|
||||||
import { Foo, ToCEntry, ToCEntryType } from '../table-of-contents-entry';
|
import { Foo, ToCEntry, ToCEntryType } from '../table-of-contents-entry';
|
||||||
|
@ -27,6 +27,13 @@ export class DatasetProfileTableOfContentsInternalSection extends BaseComponent
|
||||||
@Input() itemSelected: ToCEntry;
|
@Input() itemSelected: ToCEntry;
|
||||||
|
|
||||||
@Input() viewOnly: boolean;
|
@Input() viewOnly: boolean;
|
||||||
|
// @Input() dropListGroup: Set<string> = new Set<string>();
|
||||||
|
@Input() dropListGroup: string[];
|
||||||
|
|
||||||
|
@Input() dragHoveringOver: boolean = false;
|
||||||
|
@Input() depth: number = 0;
|
||||||
|
|
||||||
|
@Input() dropListStruct: { id: string, depth: number}[] = [];
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
@Inject(DOCUMENT) private _document: Document) {
|
@Inject(DOCUMENT) private _document: Document) {
|
||||||
|
@ -35,14 +42,67 @@ export class DatasetProfileTableOfContentsInternalSection extends BaseComponent
|
||||||
|
|
||||||
tocEntryType = ToCEntryType;
|
tocEntryType = ToCEntryType;
|
||||||
|
|
||||||
ngOnInit(): void {
|
showStructs(){
|
||||||
|
console.log(this.dropListStruct.sort(this.compareFn));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get orderedListGroup(){
|
||||||
|
return this.dropListStruct.sort(this.compareFn).map(element=> element.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
compareFn(a, b){
|
||||||
|
if(a.depth> b.depth) return -1;
|
||||||
|
if(a.depth< b.depth) return 1;
|
||||||
|
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
// if(this.parentLink.id && this.dropListGroup){
|
||||||
|
// if(!this.dropListGroup.includes(this.parentLink.id)){
|
||||||
|
// this.dropListGroup.unshift(this.parentLink.id);//TODO
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
this.dropListStruct.push({
|
||||||
|
id: this.parentLink.id,
|
||||||
|
depth: this.depth
|
||||||
|
});
|
||||||
|
|
||||||
|
// if(this.links){
|
||||||
|
// this.links.forEach(link=>{
|
||||||
|
// this.dropListGroup.push(link.id);
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// this.dropListGroup.add(this.parentLink.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
showDroplists(){
|
||||||
|
console.log(this.dropListGroup);
|
||||||
|
}
|
||||||
|
|
||||||
|
hoveroverEnter(){
|
||||||
|
// console.log('user hovering drag over', this.parentLink.id, this.parentLink.label);
|
||||||
|
this.dragHoveringOver = true;
|
||||||
|
}
|
||||||
|
hoveroverLeft(){
|
||||||
|
this.dragHoveringOver = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
fellowContainers(){
|
||||||
|
return this.dropListGroup.filter(dl=> dl != this.parentLink.id);
|
||||||
|
}
|
||||||
ngOnChanges(changes: SimpleChanges) {
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// get grouListIds(){
|
||||||
|
// return Array.from(this.dropListGroup);
|
||||||
|
// }
|
||||||
itemClicked(item: ToCEntry) {
|
itemClicked(item: ToCEntry) {
|
||||||
//leaf node
|
//leaf node
|
||||||
this.itemClick.emit(item);
|
this.itemClick.emit(item);
|
||||||
|
@ -86,41 +146,48 @@ export class DatasetProfileTableOfContentsInternalSection extends BaseComponent
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// appendAndGetDroplists(dropList: CdkDropList){
|
||||||
|
// this.dropListGroup.push(dropList);
|
||||||
|
// return this.dropListGroup;
|
||||||
|
// }
|
||||||
|
|
||||||
drop(event: CdkDragDrop<string[]>) {
|
drop(event: CdkDragDrop<string[]>) {
|
||||||
if(!this.links || !this.links.length) return;
|
// if(!this.links || !this.links.length) return;
|
||||||
|
|
||||||
|
if(event.container === event.previousContainer){
|
||||||
moveItemInArray(this.links, event.previousIndex, event.currentIndex);
|
moveItemInArray(this.links, event.previousIndex, event.currentIndex);
|
||||||
|
|
||||||
let arrayToUpdate: FormArray = this.links[0].form.parent as FormArray;
|
let arrayToUpdate: FormArray = this.links[0].form.parent as FormArray;
|
||||||
// if(this.parentLink && this.parentLink.form){
|
// if(this.parentLink && this.parentLink.form){
|
||||||
// switch(this.parentLink.subEntriesType){
|
// switch(this.parentLink.subEntriesType){
|
||||||
// case this.tocEntryType.Field:
|
// case this.tocEntryType.Field:
|
||||||
// arrayToUpdate = (this.parentLink.form.get('fields') as FormArray);
|
// arrayToUpdate = (this.parentLink.form.get('fields') as FormArray);
|
||||||
// break;
|
// break;
|
||||||
// case this.tocEntryType.FieldSet:
|
// case this.tocEntryType.FieldSet:
|
||||||
// arrayToUpdate = (this.parentLink.form.get('fieldSets') as FormArray);
|
// arrayToUpdate = (this.parentLink.form.get('fieldSets') as FormArray);
|
||||||
// break;
|
// break;
|
||||||
// case this.tocEntryType.Section:
|
// case this.tocEntryType.Section:
|
||||||
// arrayToUpdate = (this.parentLink.form.get('sections') as FormArray);
|
// arrayToUpdate = (this.parentLink.form.get('sections') as FormArray);
|
||||||
// break
|
// break
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// }
|
// }
|
||||||
if(arrayToUpdate.controls){
|
if(arrayToUpdate.controls){
|
||||||
moveItemInArray(arrayToUpdate.controls, event.previousIndex, event.currentIndex);
|
moveItemInArray(arrayToUpdate.controls, event.previousIndex, event.currentIndex);
|
||||||
//update ordinality
|
//update ordinality
|
||||||
arrayToUpdate.controls.forEach((element,idx ) => {
|
arrayToUpdate.controls.forEach((element,idx ) => {
|
||||||
element.get('ordinal').setValue(idx);
|
element.get('ordinal').setValue(idx);
|
||||||
element.updateValueAndValidity();
|
element.updateValueAndValidity();
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dataNeedsRefresh.emit();
|
||||||
|
}else{
|
||||||
|
console.log('not same container');
|
||||||
}
|
}
|
||||||
|
|
||||||
this.dataNeedsRefresh.emit();
|
console.log(event.container.id);
|
||||||
// moveItemInArray(this.links, event.previousIndex, event.currentIndex);
|
|
||||||
|
|
||||||
// console.log('dropped');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onDataNeedsRefresh(){
|
onDataNeedsRefresh(){
|
||||||
|
|
|
@ -9,10 +9,11 @@
|
||||||
<app-dataset-profile-table-of-contents-internal-section [links]="links" (itemClick)="itemClicked($event)"
|
<app-dataset-profile-table-of-contents-internal-section [links]="links" (itemClick)="itemClicked($event)"
|
||||||
(newEntry)="addNewEntry($event)" (removeEntry)="deleteEntry($event)"
|
(newEntry)="addNewEntry($event)" (removeEntry)="deleteEntry($event)"
|
||||||
(createFooEntry)="createNewEntry($event)"
|
(createFooEntry)="createNewEntry($event)"
|
||||||
[parentLink]="{ subEntriesType: tocEntryType.Page, subEntries : links }"
|
[parentLink]="{ subEntriesType: tocEntryType.Page, subEntries : links , id: 'foo'}"
|
||||||
[itemSelected]="itemSelected"
|
[itemSelected]="itemSelected"
|
||||||
[viewOnly]="viewOnly"
|
[viewOnly]="viewOnly"
|
||||||
(dataNeedsRefresh)="onDataNeedsRefresh()"
|
(dataNeedsRefresh)="onDataNeedsRefresh()"
|
||||||
|
[dropListGroup]="[]"
|
||||||
></app-dataset-profile-table-of-contents-internal-section>
|
></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 *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link);" class="docs-link mt-0">
|
||||||
|
@ -40,4 +41,18 @@
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div> -->
|
</div> -->
|
||||||
|
<!--
|
||||||
|
<button [matMenuTriggerFor]="animals">meny</button>
|
||||||
|
<mat-menu #animals="matMenu">
|
||||||
|
<button mat-menu-item >Vertebrates</button>
|
||||||
|
<button mat-menu-item [matMenuTriggerFor]="vertebrates">Invertebrates</button>
|
||||||
|
</mat-menu>
|
||||||
|
|
||||||
|
<mat-menu #vertebrates="matMenu">
|
||||||
|
<button mat-menu-item >Fishes</button>
|
||||||
|
<button mat-menu-item>Amphibians</button>
|
||||||
|
<button mat-menu-item >Reptiles</button>
|
||||||
|
<button mat-menu-item>Birds</button>
|
||||||
|
<button mat-menu-item>Mammals</button>
|
||||||
|
</mat-menu> -->
|
||||||
</div>
|
</div>
|
Loading…
Reference in New Issue