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 {DragDropModule} from '@angular/cdk/drag-drop';
|
||||
|
||||
|
||||
//matrial
|
||||
import {MatBadgeModule} from '@angular/material/badge';
|
||||
import { DatasetProfileEditorSectionFieldSetComponent } from './editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -102,7 +102,8 @@ import {MatBadgeModule} from '@angular/material/badge';
|
|||
DatasetProfileEditorCurrencyFieldComponent,
|
||||
DatasetProfileEditorValidatorFieldComponent,
|
||||
DatasetProfileTableOfContents,
|
||||
DatasetProfileTableOfContentsInternalSection
|
||||
DatasetProfileTableOfContentsInternalSection,
|
||||
DatasetProfileEditorSectionFieldSetComponent
|
||||
],
|
||||
entryComponents: [
|
||||
DialogConfirmationUploadDatasetProfiles
|
||||
|
|
|
|||
|
|
@ -58,53 +58,60 @@
|
|||
|
||||
<!-- MAIN CONTENT -->
|
||||
<div class="main-content-page">
|
||||
<div style="position: relative; padding: 3em 0em;" class="col-9">
|
||||
<div style="position: relative;" class="col-12">
|
||||
<!-- TITLE -->
|
||||
<div class="row">
|
||||
<div class="row fielset-header">
|
||||
<div class="col-auto d-flex">
|
||||
<div class="align-self-center">
|
||||
{{numbering}}
|
||||
</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">
|
||||
<input matInput type="text" placeholder="Title"
|
||||
[formControl]="this.form.get('title')">
|
||||
</mat-form-field>
|
||||
</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">
|
||||
<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 *ngIf="hasFocus">
|
||||
|
||||
<div class="row" *ngIf="showDescription">
|
||||
<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">
|
||||
<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="">
|
||||
<ng-container *ngFor="let field of form.get('fields')['controls']; let i=index" >
|
||||
<div class="row field-container bg-white" style="position: relative;" (click)="setTargetField(field)"
|
||||
[ngClass]="{'field-container-active': field.get('id').value === targetField?.get('id').value}">
|
||||
<div class="row bg-white" style="position: relative;" (click)="setTargetField(field)"
|
||||
>
|
||||
<!-- field-container -->
|
||||
<!-- [ngClass]="{'field-container-active': (field.get('id').value === targetField?.get('id').value) && hasFocus}" -->
|
||||
<!-- <div class="field-id-container">
|
||||
{{form.get('fields').get(''+i).get('id').value}} -->
|
||||
<!-- <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"
|
||||
[form]="form.get('fields').get(''+i)" [showOrdinal]="false"
|
||||
[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>
|
||||
|
||||
|
||||
</div>
|
||||
<hr *ngIf="hasFocus">
|
||||
</ng-container>
|
||||
<!--
|
||||
<div *ngIf="isComposite" class="row">
|
||||
|
|
@ -166,19 +175,19 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
<!-- ACTIONS LIST -->
|
||||
<div class="col-auto">
|
||||
|
||||
<!-- <div class="col-auto">
|
||||
<div class="row" class="actions-list bg-white">
|
||||
<mat-list role="list">
|
||||
<!-- INPUT TOOLS -->
|
||||
|
||||
<ng-container *ngIf="!viewOnly">
|
||||
<h3 matSubheader>Input tools</h3>
|
||||
<!-- Add new Input -->
|
||||
|
||||
<mat-list-item>
|
||||
<mat-icon matListIcon>folder</mat-icon>
|
||||
<span matLine (click)="addNewField()" style="cursor: pointer;" >Add Input</span>
|
||||
</mat-list-item>
|
||||
<!-- Visibility -->
|
||||
|
||||
<mat-list-item *ngIf="targetField">
|
||||
<mat-icon matListIcon [ngClass]="{'text-muted':!targetField.get('viewStyle').get('renderStyle').value}"
|
||||
>visibility_off</mat-icon>
|
||||
|
|
@ -189,58 +198,48 @@
|
|||
</mat-list-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Additional info and Extended -->
|
||||
|
||||
<mat-list-item>
|
||||
<!-- <mat-icon matListIcon>folder</mat-icon> -->
|
||||
|
||||
<mat-checkbox matLine [(ngModel)]="showExtendedDescription">
|
||||
Extended Description
|
||||
</mat-checkbox>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<!-- <mat-icon matListIcon>folder</mat-icon> -->
|
||||
|
||||
<mat-checkbox matLine [(ngModel)]="showAdditionalInfo">
|
||||
Additional Information
|
||||
</mat-checkbox>
|
||||
</mat-list-item>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- INPUT SETTINGS -->
|
||||
<h3 matSubheader>Input settings</h3>
|
||||
|
||||
<!-- multiplicity -->
|
||||
|
||||
<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">
|
||||
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-CHECKBOX' | translate}}
|
||||
</mat-checkbox>
|
||||
</mat-list-item>
|
||||
|
||||
<!-- Include Comment -->
|
||||
|
||||
<mat-list-item>
|
||||
<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}}
|
||||
</mat-checkbox>
|
||||
</mat-list-item>
|
||||
<!-- Required -->
|
||||
|
||||
<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>
|
||||
<!-- <span (click)="toggleRequired(targetField)"></span> -->
|
||||
|
||||
</mat-list-item>
|
||||
|
||||
|
||||
<!-- OTHER ACTIONS -->
|
||||
|
||||
<ng-container *ngIf="!viewOnly">
|
||||
<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-icon matListIcon>delete</mat-icon>
|
||||
<span matLine (click)="deleteTargetField()" style="cursor: pointer;">Delete</span>
|
||||
|
|
@ -248,10 +247,127 @@
|
|||
</ng-container>
|
||||
</mat-list>
|
||||
</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>
|
||||
<!--
|
||||
<span>Preview</span>
|
||||
|
|
|
|||
|
|
@ -58,5 +58,19 @@ $blue-color-light: #5cf7f2;
|
|||
}
|
||||
|
||||
.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 { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
|
||||
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({
|
||||
selector: 'app-dataset-profile-editor-composite-field-component',
|
||||
|
|
@ -23,7 +43,11 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
|
|||
@Input() viewOnly: boolean;
|
||||
|
||||
@Input() numbering: string;
|
||||
@Input() hasFocus: boolean = false;
|
||||
|
||||
|
||||
|
||||
showDescription: boolean = true;
|
||||
showAdditionalInfo: boolean = false;
|
||||
showExtendedDescription: boolean = false;
|
||||
|
||||
|
|
@ -32,15 +56,18 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
|
|||
// isMultiplicityEnabled = false;
|
||||
viewStyleEnum = DatasetProfileFieldViewStyle;
|
||||
|
||||
viewTypeEnum = ViewStyleType;
|
||||
|
||||
constructor(
|
||||
private dialog: MatDialog,
|
||||
private language: TranslateService,
|
||||
public enumUtils: EnumUtils
|
||||
) { }
|
||||
|
||||
ngOnChanges(){
|
||||
this.setTargetField(null);
|
||||
this.showExtendedDescription = !!this.form.get('extendedDescription').value;
|
||||
this.showAdditionalInfo = !!this.form.get('additionalInformation').value;
|
||||
// this.setTargetField(null);
|
||||
// this.showExtendedDescription = !!this.form.get('extendedDescription').value;
|
||||
// this.showAdditionalInfo = !!this.form.get('additionalInformation').value;
|
||||
}
|
||||
|
||||
get isMultiplicityEnabled(){
|
||||
|
|
@ -70,10 +97,10 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
|
|||
}
|
||||
|
||||
//SET UP TARGET FIELD
|
||||
if((this.form.get('fields') as FormArray).length>0){
|
||||
//get the first field in list
|
||||
this.targetField = (this.form.get('fields') as FormArray).at(0) as FormGroup;
|
||||
}
|
||||
// if((this.form.get('fields') as FormArray).length>0){
|
||||
// //get the first field in list
|
||||
// this.targetField = (this.form.get('fields') as FormArray).at(0) as FormGroup;
|
||||
// }
|
||||
|
||||
this.showExtendedDescription = !!this.form.get('extendedDescription').value;
|
||||
this.showAdditionalInfo = !!this.form.get('additionalInformation').value;
|
||||
|
|
@ -224,6 +251,10 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
deleteTargetField(){
|
||||
|
||||
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">
|
||||
|
||||
<!-- 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">
|
||||
<!-- <mat-form-field class="col">
|
||||
|
|
@ -169,7 +189,7 @@
|
|||
|
||||
<ng-container>
|
||||
<div class="row">
|
||||
<div class="col-12" *ngIf="expandView">
|
||||
<div class="col-12" *ngIf="expandView && previewForm">
|
||||
<span style="font-weight: bold">Preview</span>
|
||||
</div>
|
||||
<!-- <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 { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
|
||||
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 { DatasetsAutoCompleteFieldDataEditorModel } from '../../../admin/field-data/datasets-autocomplete-field-data-editor-mode';
|
||||
import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
|
||||
import { Guid } from '@common/types/guid';
|
||||
import { MatSlideToggleChange } from '@angular/material';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dataset-profile-editor-field-component',
|
||||
|
|
@ -54,6 +56,9 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
|
|||
|
||||
@Input() expandView: boolean = true;
|
||||
|
||||
|
||||
@Output() delete = new EventEmitter<void>();
|
||||
|
||||
constructor(
|
||||
public enumUtils: EnumUtils,
|
||||
public datasetProfileService: DatasetProfileService
|
||||
|
|
@ -324,11 +329,23 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
|
|||
// 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(){
|
||||
// const fieldEditorModel = new DatasetDescriptionFieldEditorModel();
|
||||
|
||||
|
|
@ -447,4 +464,41 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
|
|||
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 -->
|
||||
<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'
|
||||
| translate}}</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container> -->
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -118,106 +118,130 @@
|
|||
|
||||
<!-- TABLE -->
|
||||
<div class="col-3">
|
||||
<dataset-profile-table-of-contents class="toc-pane-container"
|
||||
[links]="toCEntries"
|
||||
(stepFound)="onStepFound($event)"
|
||||
(currentLinks)="getLinks($event)"
|
||||
(itemClick)="displayItem($event)"
|
||||
(newEntry)="addNewEntry($event)"
|
||||
(createEntry) = "addNewEntry($event)"
|
||||
(removeEntry)="onRemoveEntry($event)"
|
||||
[itemSelected]="selectedTocEntry"
|
||||
[viewOnly]="viewOnly"
|
||||
(dataNeedsRefresh)="onDataNeedsRefresh()">
|
||||
</dataset-profile-table-of-contents>
|
||||
|
||||
|
||||
<div class="row sticky-top" style="top : 2em">
|
||||
<dataset-profile-table-of-contents class="toc-pane-container col"
|
||||
[links]="toCEntries"
|
||||
(stepFound)="onStepFound($event)"
|
||||
(currentLinks)="getLinks($event)"
|
||||
(itemClick)="displayItem($event)"
|
||||
(newEntry)="addNewEntry($event)"
|
||||
(createEntry) = "addNewEntry($event)"
|
||||
(removeEntry)="onRemoveEntry($event)"
|
||||
[itemSelected]="selectedTocEntry"
|
||||
[viewOnly]="viewOnly"
|
||||
(dataNeedsRefresh)="onDataNeedsRefresh()">
|
||||
</dataset-profile-table-of-contents>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- DISPLAYER -->
|
||||
<div class="col">
|
||||
<div class="row content-displayer" *ngIf="selectedTocEntry">
|
||||
<div class="col ml-4">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col">
|
||||
<div class="row" *ngIf="selectedTocEntry">
|
||||
|
||||
<!-- PAGE INFO -->
|
||||
<div class="col-12" *ngIf="selectedTocEntry.type === tocEntryEnumValues.Page">
|
||||
<form [formGroup]="selectedTocEntry.form">
|
||||
<div class="row">
|
||||
<!-- PAGE NAME -->
|
||||
<div class="col">
|
||||
<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>
|
||||
<mat-form-field>
|
||||
<input type="text" matInput formControlName="title">
|
||||
</mat-form-field>
|
||||
<!-- PAGE INFO -->
|
||||
<div class="col-12 content-displayer p-2" *ngIf="selectedTocEntry.type === tocEntryEnumValues.Page">
|
||||
<form [formGroup]="selectedTocEntry.form">
|
||||
<div class="row">
|
||||
<!-- PAGE NAME -->
|
||||
<div class="col">
|
||||
<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>
|
||||
<mat-form-field>
|
||||
<input type="text" matInput formControlName="title">
|
||||
</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>
|
||||
|
||||
<!-- PAGE ID -->
|
||||
<!-- <div class="col">
|
||||
<div class="heading">Page id *</div>
|
||||
<mat-form-field>
|
||||
<input type="text" matInput formControlName="id">
|
||||
</mat-form-field>
|
||||
<!-- <div class="row">
|
||||
<div class="col">
|
||||
<div class="heading">Ordinal *</div>
|
||||
<mat-form-field>
|
||||
<input type="text" matInput formControlName="ordinal">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <div class="row">
|
||||
<div class="col">
|
||||
<div class="heading">Ordinal *</div>
|
||||
<mat-form-field>
|
||||
<input type="text" matInput formControlName="ordinal">
|
||||
</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'"
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-12" *ngIf="(selectedTocEntry.type === tocEntryEnumValues.Section) || (selectedTocEntry.type === tocEntryEnumValues.FieldSet)" >
|
||||
<app-dataset-profile-editor-section-fieldset-component
|
||||
[tocentry]="selectedTocEntry"
|
||||
[viewOnly]="viewOnly"
|
||||
[numbering]="selectedTocEntry.numbering">
|
||||
</app-dataset-profile-editor-composite-field-component>
|
||||
<!-- </div> -->
|
||||
(selectedEntryId)="displayItem(_findTocEntryById($event, getTocEntries()))"
|
||||
(dataNeedsRefresh)="onDataNeedsRefresh()"
|
||||
>
|
||||
|
||||
</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'
|
||||
| translate}}</button></div> -->
|
||||
|
||||
</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 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>
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<mat-accordion class="col-12" [multi]="true">
|
||||
|
|
@ -300,11 +324,11 @@
|
|||
|
||||
</ng-container>
|
||||
|
||||
<div class="row">
|
||||
<!-- <div class="row">
|
||||
<button (click)="printForm()">
|
||||
console form
|
||||
</button>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="row">
|
||||
<button (click)="foo()">foo</button>
|
||||
</div> -->
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
padding: 0em;
|
||||
// padding-top: 0em;
|
||||
overflow: visible;
|
||||
min-height: 30em;
|
||||
// min-height: 30em;
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
|
@ -92,4 +92,15 @@
|
|||
background-color: #f7dd72;
|
||||
padding-left: 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 { HttpClient, HttpErrorResponse } from '@angular/common/http';
|
||||
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 { MatHorizontalStepper, MatStep } from '@angular/material/stepper';
|
||||
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
|
||||
|
|
@ -84,7 +84,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
private matomoService: MatomoService,
|
||||
private enumUtils: EnumUtils,
|
||||
private datasetWizardService: DatasetWizardService,
|
||||
private visibilityRulesService: VisibilityRulesService
|
||||
private visibilityRulesService: VisibilityRulesService,
|
||||
private fb: FormBuilder
|
||||
) {
|
||||
super();
|
||||
// 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 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;
|
||||
|
||||
|
|
@ -1215,5 +1216,47 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
|||
previewForm:FormGroup;
|
||||
onDataNeedsRefresh(){
|
||||
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> -->
|
||||
|
||||
<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"
|
||||
[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}}
|
||||
</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"
|
||||
matBadgeOverlap="false"
|
||||
[matBadgeHidden]="!((parentLink?.subEntriesType == tocEntryType.FieldSet) && !selectedItemInLinks) || itemSelected?.id == parentLink.id"
|
||||
|
|
@ -19,26 +19,49 @@
|
|||
matBadgeColor="accent"
|
||||
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')}"
|
||||
>
|
||||
<!-- {{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 : parentLink.id}} -->
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="col-auto" *ngIf="!viewOnly && (itemSelected?.id == parentLink?.id)">
|
||||
<span style="cursor: pointer;" (click)="deleteEntry(parentLink)"><mat-icon>delete</mat-icon></span>
|
||||
<div class="col-auto d-flex align-items-center" >
|
||||
<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>
|
||||
|
||||
<!-- When item is not selected then show only the pages (first level) -->
|
||||
<!-- <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}"
|
||||
*ngIf="(parentLink?.subEntriesType!= tocEntryType.FieldSet) || selectedItemInLinks || parentLink?.id === itemSelected?.id"
|
||||
[hidden]="!((parentLink?.subEntriesType!= tocEntryType.FieldSet) || selectedItemInLinks || parentLink?.id === itemSelected?.id || dragHoveringOver)"
|
||||
(cdkDropListDropped)="drop($event)"
|
||||
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"
|
||||
[ngClass]="{'mb-3': link.type === tocEntryType.Page}"
|
||||
cdkDrag
|
||||
|
|
@ -82,28 +105,33 @@
|
|||
[itemSelected] = "itemSelected"
|
||||
(createFooEntry)="createNewEntry($event)"
|
||||
[viewOnly]="viewOnly"
|
||||
(dataNeedsRefresh)="onDataNeedsRefresh()">
|
||||
(dataNeedsRefresh)="onDataNeedsRefresh()"
|
||||
[dropListGroup]="dropListGroup"
|
||||
[dragHoveringOver]="dragHoveringOver"
|
||||
[dropListStruct]="dropListStruct"
|
||||
[depth]="depth+1">
|
||||
</app-dataset-profile-table-of-contents-internal-section>
|
||||
|
||||
|
||||
|
||||
<!-- <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})">
|
||||
<mat-icon>add</mat-icon>
|
||||
<!-- <mat-icon>add</mat-icon> -->
|
||||
<ng-container [ngSwitch]="link.type">
|
||||
<ng-container *ngSwitchCase="tocEntryType.Section">
|
||||
Subsection
|
||||
Subsection +
|
||||
</ng-container>
|
||||
<!-- <ng-container *ngSwitchCase="tocEntryType.Page">
|
||||
Section
|
||||
</ng-container> -->
|
||||
<ng-container *ngSwitchCase="tocEntryType.FieldSet">
|
||||
Fieldset
|
||||
Field +
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
</button>
|
||||
<!-- <button (click)="showDroplists()">show droplist</button> -->
|
||||
</ng-container>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
|
@ -118,14 +146,16 @@
|
|||
|
||||
<!-- Give option to generate section -->
|
||||
<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>
|
||||
|
||||
|
||||
<!-- 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})">
|
||||
<mat-icon>add</mat-icon> Fieldset
|
||||
</button>
|
||||
<!-- <button *ngIf="parentLink.type == tocEntryType.Section" class="mat-button" style="padding-left: 0px;" (click)="createNewEntry({childType:tocEntryType.FieldSet,parent:parentLink})">
|
||||
|
||||
Field +
|
||||
</button> -->
|
||||
|
||||
|
||||
</div>
|
||||
|
|
@ -156,6 +186,9 @@
|
|||
<!-- Only for the page -->
|
||||
<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">
|
||||
<mat-icon>add</mat-icon> Section
|
||||
<!-- <mat-icon>add</mat-icon> -->
|
||||
Section +
|
||||
</button>
|
||||
<!-- <button (click)="showDroplists()">show droplist</button>
|
||||
<button (click)="showStructs()">structs</button> -->
|
||||
</div>
|
||||
|
|
@ -144,6 +144,7 @@
|
|||
|
||||
.cdk-drag-placeholder {
|
||||
opacity: 0;
|
||||
// background-color: black;
|
||||
}
|
||||
|
||||
.cdk-drag-animating {
|
||||
|
|
@ -156,4 +157,18 @@
|
|||
|
||||
.cdk-link-list.cdk-drop-list-dragging .link-box:not(.cdk-drag-placeholder) {
|
||||
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 { 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 { BaseComponent } from '@common/base/base.component';
|
||||
import { Foo, ToCEntry, ToCEntryType } from '../table-of-contents-entry';
|
||||
|
|
@ -27,6 +27,13 @@ export class DatasetProfileTableOfContentsInternalSection extends BaseComponent
|
|||
@Input() itemSelected: ToCEntry;
|
||||
|
||||
@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(
|
||||
@Inject(DOCUMENT) private _document: Document) {
|
||||
|
|
@ -35,14 +42,67 @@ export class DatasetProfileTableOfContentsInternalSection extends BaseComponent
|
|||
|
||||
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) {
|
||||
|
||||
}
|
||||
|
||||
// get grouListIds(){
|
||||
// return Array.from(this.dropListGroup);
|
||||
// }
|
||||
itemClicked(item: ToCEntry) {
|
||||
//leaf node
|
||||
this.itemClick.emit(item);
|
||||
|
|
@ -86,41 +146,48 @@ export class DatasetProfileTableOfContentsInternalSection extends BaseComponent
|
|||
return false;
|
||||
}
|
||||
|
||||
// appendAndGetDroplists(dropList: CdkDropList){
|
||||
// this.dropListGroup.push(dropList);
|
||||
// return this.dropListGroup;
|
||||
// }
|
||||
|
||||
drop(event: CdkDragDrop<string[]>) {
|
||||
if(!this.links || !this.links.length) return;
|
||||
// if(!this.links || !this.links.length) return;
|
||||
|
||||
|
||||
moveItemInArray(this.links, event.previousIndex, event.currentIndex);
|
||||
|
||||
let arrayToUpdate: FormArray = this.links[0].form.parent 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();
|
||||
});
|
||||
if(event.container === event.previousContainer){
|
||||
moveItemInArray(this.links, event.previousIndex, event.currentIndex);
|
||||
|
||||
let arrayToUpdate: FormArray = this.links[0].form.parent 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');
|
||||
}
|
||||
|
||||
this.dataNeedsRefresh.emit();
|
||||
// moveItemInArray(this.links, event.previousIndex, event.currentIndex);
|
||||
console.log(event.container.id);
|
||||
|
||||
// console.log('dropped');
|
||||
}
|
||||
|
||||
onDataNeedsRefresh(){
|
||||
|
|
|
|||
|
|
@ -9,10 +9,11 @@
|
|||
<app-dataset-profile-table-of-contents-internal-section [links]="links" (itemClick)="itemClicked($event)"
|
||||
(newEntry)="addNewEntry($event)" (removeEntry)="deleteEntry($event)"
|
||||
(createFooEntry)="createNewEntry($event)"
|
||||
[parentLink]="{ subEntriesType: tocEntryType.Page, subEntries : links }"
|
||||
[parentLink]="{ subEntriesType: tocEntryType.Page, subEntries : links , id: 'foo'}"
|
||||
[itemSelected]="itemSelected"
|
||||
[viewOnly]="viewOnly"
|
||||
(dataNeedsRefresh)="onDataNeedsRefresh()"
|
||||
[dropListGroup]="[]"
|
||||
></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">
|
||||
|
|
@ -40,4 +41,18 @@
|
|||
</ul>
|
||||
|
||||
</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>
|
||||
Loading…
Reference in New Issue