173 lines
9.0 KiB
HTML
173 lines
9.0 KiB
HTML
<div id="topofcontainer"></div>
|
|
<div class="row" [id]="idprefix+form.get('id').value">
|
|
|
|
|
|
<div class="col-12" >
|
|
<div class="row fieldset">
|
|
<!-- SECTION INFO -->
|
|
<div class="col-9 p-0" style="margin-bottom:2em;">
|
|
<mat-card style="padding: 2em;">
|
|
<mat-card-content>
|
|
<app-dataset-profile-editor-section-component
|
|
[form]="form"
|
|
[viewOnly]="viewOnly"
|
|
>
|
|
</app-dataset-profile-editor-section-component>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
<div class="row justify-content-center mt-4 mb-2">
|
|
<div class="col-auto add-question" (click)="addFieldSetAfter(-9999,0)" *ngIf="!viewOnly">
|
|
<img src="/assets/images/editor/icons/add_input_set.svg" class="question-icon mr-2" alt="Add Question icon">
|
|
<span>{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-2 col-xl-auto ml-4" *ngIf="!selectedFieldSetId && !viewOnly">
|
|
|
|
<div class="row bg-white actions-list">
|
|
<nav>
|
|
<label class="action-list-label">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.GENERAL-TOOLS' | translate}}</label>
|
|
<ul class="list-unstyled">
|
|
<li class="mli">
|
|
<div class="action-list-item" (click)="onAddFieldSet()">
|
|
<!-- <mat-icon class="action-list-icon">folder</mat-icon> -->
|
|
<img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon" alt="Add Question icon">
|
|
<span class="action-list-text" >{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- FIELDSET INFO -->
|
|
<div class="col-12" dragula="FIELDSETS" [(dragulaModel)]="form.get('fieldSets').controls">
|
|
|
|
<div style="margin-bottom: 2em; position: relative;" class="row fieldset"
|
|
*ngFor="let fieldset of form.get('fieldSets')?.controls ; let i=index" [id]="dragula_prefix+fieldset.get('id').value"
|
|
>
|
|
<!-- <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> -->
|
|
<div [id]="idprefix+fieldset.get('id').value" style="position: absolute; top: -7em; visibility: hidden;">
|
|
</div>
|
|
<div class="col-9 p-0">
|
|
<mat-card
|
|
(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) && !viewOnly">
|
|
<mat-icon class="handle" style="display:inline-block; margin: 0px auto; cursor: grab;transform: rotate(90deg); opacity: 0.3;" 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-2 col-xl-auto ml-4" *ngIf="selectedFieldSetId === fieldset.get('id').value &&(!viewOnly)">
|
|
|
|
<div class="row bg-white actions-list stick-list">
|
|
<nav *ngIf="!viewOnly">
|
|
<label class="action-list-label">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.GENERAL-TOOLS' | translate}}</label>
|
|
<ul class="list-unstyled">
|
|
<li class="mli">
|
|
<div class="action-list-item" (click)="onAddFieldSet()">
|
|
<!-- <mat-icon class="action-list-icon">folder</mat-icon> -->
|
|
<img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon" alt="Add Question icon">
|
|
<span class="action-list-text" >{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
|
|
</div>
|
|
</li>
|
|
|
|
|
|
<li class="mli">
|
|
<div class="action-list-item" (click)="onCloneFieldSet(fieldset)">
|
|
<!-- <mat-icon class="action-list-icon">file_copy</mat-icon> -->
|
|
<img src="/assets/images/editor/icons/clone.svg" class="input_icon" alt="Clone icon">
|
|
<span class="action-list-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.CLONE' | translate}}</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="mli">
|
|
<div class="action-list-item" (click)="onRemoveFieldSet(selectedFieldSetId)">
|
|
<mat-icon class="action-list-icon">delete</mat-icon>
|
|
<span class="action-list-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<div class="col-9">
|
|
<div class="row justify-content-center mt-4 mb-2">
|
|
<div class="col-auto add-question" (click)="addFieldSetAfter(fieldset.get('ordinal').value, i)" *ngIf="!viewOnly">
|
|
<img src="/assets/images/editor/icons/add_input_set.svg" class="question-icon mr-2" alt="Add Question icon">
|
|
<span>{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- </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> --> |