MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Admin Dataset Template Editor and Dataset profile editor UI improvemenets. 

[Admin Template Editor]:
* Add question underneath each question and in the table of contents
* "Make conditional question" changed position
* Small restyles in required toggler and question preview component
* Input icons update
* Scrolling on top of question

[Dataset Editor]:
* Show asterisk on required fields

Pt language updates
This commit is contained in:
Kristian Ntavidi 2021-06-16 15:52:39 +03:00
parent 1eb9aadaea
commit f4591549c2
21 changed files with 591 additions and 435 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html
View File

@ -76,7 +76,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
<div style="position: relative;" class="col-8"> <div style="position: relative;" class="col-12">
<ng-container *ngIf="hasFocus"> <ng-container *ngIf="hasFocus">
@ -116,9 +116,6 @@
</div> </div>
</ng-container> </ng-container>
</div> </div>
@ -128,7 +125,7 @@
<!-- FIELDS --> <!-- FIELDS -->
<div class="col"> <div class="col">
<div class=""> <div>
<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 bg-white" style="position: relative;" (click)="setTargetField(field)" <div class="row bg-white" style="position: relative;" (click)="setTargetField(field)"
> >
@ -183,15 +180,15 @@
<!-- PREVIEW --> <!-- PREVIEW -->
<div class="col-12" > <div class="col-12 previewer">
<div class="mb-1" *ngIf="hasFocus" class="d-flex" style="justify-content: space-between;"> <div *ngIf="hasFocus" class="d-flex mb-3" style="justify-content: space-between;">
<span style="font-weight: bold;">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.PREVIEW' | translate}}</span> <span style="font-weight: bold; font-style: italic;">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.PREVIEW' | translate}}</span>
<span [@fadeElement]="updatedClass" *ngIf="firstField?.get('viewStyle').get('renderStyle').value"> <span [@fadeElement]="updatedClass" *ngIf="firstField?.get('viewStyle').get('renderStyle').value">
<ng-container *ngIf="!previewDirty"> <ng-container *ngIf="!previewDirty">
Preview updated! {{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.STATUS.PREVIEW-UPDATED' | translate}}
</ng-container> </ng-container>
<ng-container *ngIf="previewDirty"> <ng-container *ngIf="previewDirty">
... caculating preview {{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.STATUS.CALCULATING-PREVIEW' | translate}}
</ng-container> </ng-container>
</span> </span>
</div> </div>
@ -208,6 +205,8 @@
</em> </em>
</div> </div>
</div>
<div class="col-12">
<hr *ngIf="hasFocus"> <hr *ngIf="hasFocus">
</div> </div>
</div> </div>
@ -222,8 +221,11 @@
<li class="list-inline-item" *ngIf="!viewOnly"> <li class="list-inline-item" *ngIf="!viewOnly">
<img src="/assets/images/editor/icons/add_input_set.svg" [matMenuTriggerFor]="inputmenu" style="width: 18px;transform: translateY(-1px);" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate" class="input_icon" alt="Add Input icon">
<span [matMenuTriggerFor]="inputmenu" class="inputMenuTrigger">
<img src="/assets/images/editor/icons/add_input.svg" style="width: 18px;transform: translateY(-1px);" class="input_icon" alt="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate"/>
<span class="fieldset-new-input-action">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate}}</span>
</span>
<!-- <mat-icon [matMenuTriggerFor]="inputmenu" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate">folder</mat-icon> --> <!-- <mat-icon [matMenuTriggerFor]="inputmenu" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate">folder</mat-icon> -->
<mat-menu #inputmenu="matMenu" [class]="'add_input_menu'"> <mat-menu #inputmenu="matMenu" [class]="'add_input_menu'">

21
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.scss
View File

@ -91,8 +91,29 @@ $blue-color-light: #5cf7f2;
color: #212121; color: #212121;
transform: translateY(3px); transform: translateY(3px);
} }
.mat-checkbox-frame{
border: 1px solid $blue-color ;
}
} }
.fieldset-new-input-action {
font-size: 0.8em;
font-weight: 400;
color: #212121;
display: inline-block;
transform: translateY(1px);
}
.inputMenuTrigger {
margin-bottom: 0.3rem;
display: inline-block;
}
.previewer{
background-color: #129d9811;
padding: 2em;
border: 1px solid #70707015;
border-radius: 4px;
}
.input_icon{ .input_icon{
width: 14px; width: 14px;

58
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html
View File

@ -1,19 +1,19 @@
<ng-container *ngIf="expandView"> <ng-container *ngIf="expandView">
<!-- ACTIONS PER FIELD --> <!-- ACTIONS PER FIELD -->
<div class="row justify-content-end mb-1 mt-1"> <div class="row justify-content-end mb-1 mt-3">
<div class="col-auto"> <div class="col-auto mr-2">
<ul class="list-unstyled list-inline d-flex align-items-center"> <ul class="list-unstyled list-inline d-flex align-items-center">
<li class="list-inline-item" > <li class="list-inline-item" >
<mat-slide-toggle class="field-toggler" [checked]="isRequired" (change)="toggleRequired($event)" labelPosition="before" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.MAKE-IT-REQUIRED' | translate" [disabled]="!viewType"> <mat-slide-toggle class="field-toggler" [checked]="isRequired" (change)="toggleRequired($event)" labelPosition="before" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.MAKE-IT-REQUIRED' | translate" [disabled]="!viewType">
{{'GENERAL.VALIDATION.REQUIRED' | translate}} {{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-slide-toggle> </mat-slide-toggle>
</li> </li>
<li class="list-inline-item" *ngIf="!viewOnly && viewType && canApplyVisibility"> <!-- <li class="list-inline-item" *ngIf="!viewOnly && viewType && canApplyVisibility">
<mat-icon style="cursor: pointer;" (click)="addNewRule()" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.ADD-VISIBILITY-RULE' | translate">visibility</mat-icon> <mat-icon style="cursor: pointer;" (click)="addNewRule()" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.ADD-VISIBILITY-RULE' | translate">visibility</mat-icon>
</li> </li> -->
<li class="list-inline-item" *ngIf="!viewOnly && viewType && canBeDeleted"> <li class="list-inline-item" *ngIf="!viewOnly && viewType && canBeDeleted" class="text-muted">
<mat-icon style="cursor: pointer;" (click)="onDelete()" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.DELETE-INPUT' | translate">delete</mat-icon> <mat-icon style="cursor: pointer; opacity: 0.7; transform:translateY(2px) translateX(10px) ;" (click)="onDelete()" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.DELETE-INPUT' | translate">delete</mat-icon>
</li> </li>
</ul> </ul>
@ -29,7 +29,7 @@
<mat-error *ngIf="this.form.get('id').hasError('pattern')">{{'GENERAL.VALIDATION.PATTERN-_' | translate}}</mat-error> <mat-error *ngIf="this.form.get('id').hasError('pattern')">{{'GENERAL.VALIDATION.PATTERN-_' | translate}}</mat-error>
</mat-form-field> --> </mat-form-field> -->
<mat-form-field class="col"> <mat-form-field class="col-6">
<!-- <mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [formControl]="this.form.get('viewStyle').get('renderStyle')" <!-- <mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [formControl]="this.form.get('viewStyle').get('renderStyle')"
required> required>
<mat-option [value]="viewStyleEnum.TextArea">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.TextArea)}}</mat-option> <mat-option [value]="viewStyleEnum.TextArea">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.TextArea)}}</mat-option>
@ -185,7 +185,7 @@
</mat-select> </mat-select>
</mat-form-field> --> </mat-form-field> -->
<mat-form-field class="col"> <mat-form-field class="col-6">
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.RDA-COMMON-STANDARDS' | translate}}</mat-label> <mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.RDA-COMMON-STANDARDS' | translate}}</mat-label>
<mat-select [formControl]="this.form.get('rdaCommonStandard')"> <mat-select [formControl]="this.form.get('rdaCommonStandard')">
<mat-option>--</mat-option> <mat-option>--</mat-option>
@ -196,13 +196,33 @@
</mat-form-field> </mat-form-field>
<!-- Default Value --> <!-- Default Value -->
<app-component-profile-editor-default-value-component *ngIf="form.get('viewStyle').get('renderStyle').value" class="col-12" <app-component-profile-editor-default-value-component *ngIf="form.get('viewStyle').get('renderStyle').value" class="col-6"
[viewStyle]="form.get('viewStyle').get('renderStyle').value" [form]="this.form.get('defaultValue').get('value')" [formArrayOptions]="form.get('data')?.get('options')" [viewStyle]="form.get('viewStyle').get('renderStyle').value" [form]="this.form.get('defaultValue').get('value')" [formArrayOptions]="form.get('data')?.get('options')"
[comboBoxType]="this.form.get('data')?.get('type')?.value" [internalDmpEntitiesType]="this.form.get('data')?.get('type')?.value" [comboBoxType]="this.form.get('data')?.get('type')?.value" [internalDmpEntitiesType]="this.form.get('data')?.get('type')?.value"
placeHolder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.DEFAULT-VALUE' | translate}}"> placeHolder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.DEFAULT-VALUE' | translate}}">
</app-component-profile-editor-default-value-component> </app-component-profile-editor-default-value-component>
<div class="col-12"></div>
<div class="col-auto mb-4 mt-2">
<div class="add-visibility-button" (click)="addNewRule()" *ngIf="!viewOnly && viewType && canApplyVisibility">
<img src="/assets/images/editor/icons/add_visibility_rule_2.svg" class="visibility-icon" alt="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.ADD-VISIBILITY-RULE' | translate">
<span>{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.ADD-VISIBILITY-RULE' | translate}}</span>
</div>
</div>
</div> </div>
<div class="row" *ngIf="this.form.get('viewStyle').get('renderStyle').value">
<ng-container *ngIf="form.get('visible').get('rules')?.value.length">
<h4 class="col-12" style="font-weight: bold">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.RULES-TITLE' | translate}}
</h4>
<app-dataset-profile-editor-rule-component class="col-12" [form]="form.get('visible').get('rules')" [viewStyleForCheck]="form.get('viewStyle').get('renderStyle').value"
[formArrayOptionsForCheck]="this.form.get('data')?.get('options')" [comboBoxTypeForCheck]="this.form.get('data')?.get('type')?.value"
[viewOnly]="viewOnly"
[formControlForCheck]="form"></app-dataset-profile-editor-rule-component>
<!-- <div class="col-12" *ngIf="!viewOnly">
<button mat-button class="full-width" (click)="addNewRule()" [disabled]="!form.get('viewStyle').get('renderStyle').value">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ACTIONS.ADD-RULE' | translate}}</button>
</div> -->
</ng-container>
</div>
<div class="row" [ngSwitch]="form.get('viewStyle').get('renderStyle').value" *ngIf="expandView"> <div class="row" [ngSwitch]="form.get('viewStyle').get('renderStyle').value" *ngIf="expandView">
<app-dataset-profile-editor-combo-box-field-component *ngSwitchCase="viewStyleEnum.ComboBox" class="col-12" [form]="form"></app-dataset-profile-editor-combo-box-field-component> <app-dataset-profile-editor-combo-box-field-component *ngSwitchCase="viewStyleEnum.ComboBox" class="col-12" [form]="form"></app-dataset-profile-editor-combo-box-field-component>
<app-dataset-profile-internal-dmp-entities-field-component *ngSwitchCase="viewStyleEnum.InternalDmpEntities" class="col-12" [form]="form"></app-dataset-profile-internal-dmp-entities-field-component> <app-dataset-profile-internal-dmp-entities-field-component *ngSwitchCase="viewStyleEnum.InternalDmpEntities" class="col-12" [form]="form"></app-dataset-profile-internal-dmp-entities-field-component>
@ -226,27 +246,7 @@
<app-dataset-profile-editor-currency-field-component *ngSwitchCase="viewStyleEnum.Currency" class="col-12" [form]="form"></app-dataset-profile-editor-currency-field-component> <app-dataset-profile-editor-currency-field-component *ngSwitchCase="viewStyleEnum.Currency" class="col-12" [form]="form"></app-dataset-profile-editor-currency-field-component>
<app-dataset-profile-editor-validator-field-component *ngSwitchCase="viewStyleEnum.Validation" class="col-12" [form]="form"></app-dataset-profile-editor-validator-field-component> <app-dataset-profile-editor-validator-field-component *ngSwitchCase="viewStyleEnum.Validation" class="col-12" [form]="form"></app-dataset-profile-editor-validator-field-component>
</div> </div>
<div class="row" *ngIf="this.form.get('viewStyle').get('renderStyle').value">
<ng-container *ngIf="form.get('visible').get('rules')?.value.length">
<h4 class="col-12" style="font-weight: bold">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.RULES-TITLE' | translate}}
</h4>
<app-dataset-profile-editor-rule-component class="col-12" [form]="form.get('visible').get('rules')" [viewStyleForCheck]="form.get('viewStyle').get('renderStyle').value"
[formArrayOptionsForCheck]="this.form.get('data')?.get('options')" [comboBoxTypeForCheck]="this.form.get('data')?.get('type')?.value"
[viewOnly]="viewOnly"
[formControlForCheck]="form"></app-dataset-profile-editor-rule-component>
<!-- <div class="col-12" *ngIf="!viewOnly">
<button mat-button class="full-width" (click)="addNewRule()" [disabled]="!form.get('viewStyle').get('renderStyle').value">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ACTIONS.ADD-RULE' | translate}}</button>
</div> -->
</ng-container>
<!-- <div class="row">
<button (click)="generatePreview()">Generate Preview</button>
</div> -->
</div>
</ng-container> </ng-container>

28
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.scss
View File

@ -29,6 +29,20 @@ li.list-inline-item{
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb { .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
background-color:#129D99 ; background-color:#129D99 ;
} }
.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
background-color:rgba(0,178,159,0.34);
}
.mat-slide-toggle-bar{
height: 11.93px;
width: 26.42px;
}
.mat-slide-toggle-thumb-container{
top: -3px;
}
.mat-slide-toggle-thumb{
width: 16px;
height: 16px;
}
} }
@ -36,3 +50,17 @@ li.list-inline-item{
width: 14px; width: 14px;
margin-right: 0.5em; margin-right: 0.5em;
} }
.visibility-icon{
width: 20px;
margin-right: 0.5em;
}
.add-visibility-button{
// display: flex;
// align-items: center;
width: auto;
cursor: pointer;
span{
font-weight: 400;
font-size: 0.8em;
}
}

33
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.html
View File

@ -3,9 +3,10 @@
<div class="col-12" > <div class="col-12" >
<div class="row"> <div class="row fieldset">
<!-- SECTION INFO --> <!-- SECTION INFO -->
<mat-card style="margin-bottom: 2em; padding: 2em;" class="col-9"> <div class="col-9 p-0" style="margin-bottom:2em;">
<mat-card style="padding: 2em;">
<mat-card-content> <mat-card-content>
<app-dataset-profile-editor-section-component <app-dataset-profile-editor-section-component
[form]="form" [form]="form"
@ -14,6 +15,13 @@
</app-dataset-profile-editor-section-component> </app-dataset-profile-editor-section-component>
</mat-card-content> </mat-card-content>
</mat-card> </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="col-2 col-xl-auto ml-4" *ngIf="!selectedFieldSetId && !viewOnly">
<div class="row bg-white actions-list"> <div class="row bg-white actions-list">
@ -38,8 +46,8 @@
<!-- FIELDSET INFO --> <!-- FIELDSET INFO -->
<div class="col-12" dragula="FIELDSETS" [(dragulaModel)]="form.get('fieldSets').controls"> <div class="col-12" dragula="FIELDSETS" [(dragulaModel)]="form.get('fieldSets').controls">
<div style="margin-bottom: 2em;" class="row" <div style="margin-bottom: 2em; position: relative;" class="row"
*ngFor="let fieldset of form.get('fieldSets')?.controls ; let i=index"[id]="idprefix+fieldset.get('id').value" *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"> <!-- <h4 style="font-weight: bold" class="col-12">
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.FIELDS-TITLE' | {{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.FIELDS-TITLE' |
@ -52,14 +60,16 @@
(click)="deleteFieldSet(selectedTocEntry.form, i);" [disabled]="viewOnly"> (click)="deleteFieldSet(selectedTocEntry.form, i);" [disabled]="viewOnly">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> --> </button> -->
<div [id]="idprefix+fieldset.get('id').value" style="position: absolute; top: -7em; visibility: hidden;">
<mat-card class="col-9" </div>
<div class="col-9 p-0 fieldset">
<mat-card
(click)="selectedFieldSetId = fieldset.get('id').value" (click)="selectedFieldSetId = fieldset.get('id').value"
[ngClass]="{'field-container-active': fieldset.get('id').value === selectedFieldSetId}"> [ngClass]="{'field-container-active': fieldset.get('id').value === selectedFieldSetId}">
<mat-card-content> <mat-card-content>
<mat-card-header *ngIf="(fieldset.get('id').value === selectedFieldSetId) && !viewOnly"> <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);" cdkDragHandle>drag_indicator</mat-icon> <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> </mat-card-header>
<app-dataset-profile-editor-composite-field-component [form]="fieldset" <app-dataset-profile-editor-composite-field-component [form]="fieldset"
[viewOnly]="viewOnly" [viewOnly]="viewOnly"
@ -68,10 +78,17 @@
</app-dataset-profile-editor-composite-field-component> </app-dataset-profile-editor-composite-field-component>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<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 class="col-2 col-xl-auto ml-4" *ngIf="selectedFieldSetId === fieldset.get('id').value &&(!viewOnly)"> <div class="col-2 col-xl-auto ml-4" *ngIf="selectedFieldSetId === fieldset.get('id').value &&(!viewOnly)">
<div class="row bg-white actions-list"> <div class="row bg-white actions-list stick-list">
<nav *ngIf="!viewOnly"> <nav *ngIf="!viewOnly">
<label class="action-list-label">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.GENERAL-TOOLS' | translate}}</label> <label class="action-list-label">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.GENERAL-TOOLS' | translate}}</label>
<ul class="list-unstyled"> <ul class="list-unstyled">

26
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.scss
View File

@ -9,9 +9,28 @@ $blue-color-light: #5cf7f2;
.fieldset-actions-list li{ .fieldset-actions-list li{
cursor: pointer; cursor: pointer;
} }
.fieldset{
.add-question{
cursor: pointer;
visibility: hidden;
transition-property: visibility;
transition-delay: 20ms;
transition-timing-function: ease;
transition-duration: 200ms;
}
}
.fieldset:hover{
.add-question{
visibility: visible;
}
}
.question-icon{
width: 20px;
}
.stick-list{
position: sticky;
top: 7em;
}
.actions-list{ .actions-list{
// border: 1px solid $blue-color; // border: 1px solid $blue-color;
// box-shadow: 0px 3px 12px #129D9999; // box-shadow: 0px 3px 12px #129D9999;
@ -20,6 +39,7 @@ $blue-color-light: #5cf7f2;
padding: 1em 0.9em; padding: 1em 0.9em;
padding-bottom: 3em; padding-bottom: 3em;
min-width: 166px; min-width: 166px;
box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
.mat-list-item-content{ .mat-list-item-content{
padding: 0px; padding: 0px;

43
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.ts
View File

@ -1,8 +1,11 @@
import { OnDestroy } from '@angular/core'; import { OnDestroy } from '@angular/core';
import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { FormArray, FormGroup } from '@angular/forms'; import { FormArray, FormGroup } from '@angular/forms';
import { Guid } from '@common/types/guid';
import { DragulaService } from 'ng2-dragula'; import { DragulaService } from 'ng2-dragula';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { FieldEditorModel } from '../../../admin/field-editor-model';
import { FieldSetEditorModel } from '../../../admin/field-set-editor-model';
import { ToCEntry, ToCEntryType } from '../../../table-of-contents/table-of-contents-entry'; import { ToCEntry, ToCEntryType } from '../../../table-of-contents/table-of-contents-entry';
@Component({ @Component({
@ -30,6 +33,7 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC
// @Output() fieldsetAdded = new EventEmitter<String>(); //returns the id of the fieldset added // @Output() fieldsetAdded = new EventEmitter<String>(); //returns the id of the fieldset added
idprefix = "id"; idprefix = "id";
readonly dragula_prefix = "dragulaid";
private subs = new Subscription(); private subs = new Subscription();
private FIELDSETS = 'FIELDSETS'; private FIELDSETS = 'FIELDSETS';
constructor( constructor(
@ -45,7 +49,7 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC
this.dragulaService.createGroup(this.FIELDSETS,{ this.dragulaService.createGroup(this.FIELDSETS,{
moves:(el, container, handle)=>{ moves:(el, container, handle)=>{
// if(this.viewOnly) return false; //uncomment if want to unable drag n drop in viewonly mode // if(this.viewOnly) return false; //uncomment if want to unable drag n drop in viewonly mode
if(el.id != (this.idprefix+this.tocentry.id)) return false; if(el.id != (this.dragula_prefix+this.tocentry.id)) return false;
if(handle.className && handle.classList.contains('handle')) return true; if(handle.className && handle.classList.contains('handle')) return true;
return false; return false;
} }
@ -145,7 +149,7 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC
setTimeout(() => { setTimeout(() => {
const el = this.myElement.nativeElement.querySelector("#"+this.idprefix+id); const el = this.myElement.nativeElement.querySelector("#"+this.idprefix+id);
if(el){ if(el){
el.scrollIntoView({behavior: "smooth", block:'end'}); el.scrollIntoView({behavior: "smooth", block:'start'});
} }
}, 700); }, 700);
} }
@ -155,10 +159,9 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC
setTimeout(() => { setTimeout(() => {
const el = this.myElement.nativeElement.querySelector('#topofcontainer'); const el = this.myElement.nativeElement.querySelector('#topofcontainer');
if(el){ if(el){
el.scrollIntoView({behavior:'smooth'}) el.scrollIntoView({behavior:'smooth', block:'end'})
} }
},200); },200);
} }
ngOnInit() { ngOnInit() {
@ -175,6 +178,38 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC
this.addNewFieldSet.emit(this.form); this.addNewFieldSet.emit(this.form);
} }
addFieldSetAfter(afterOrdinal: number, afterIndex: number):void{
const field: FieldEditorModel = new FieldEditorModel();
field.id = Guid.create().toString();
field.ordinal = 0;//first filed in the fields list
const fieldForm = field.buildForm();
//give fieldset id and ordinal
const fieldSet: FieldSetEditorModel = new FieldSetEditorModel();
const fieldSetId = Guid.create().toString();
fieldSet.id = fieldSetId;
fieldSet.ordinal = afterOrdinal < 0? 0 :afterOrdinal;
const parentArray = this.form.get('fieldSets') as FormArray;
parentArray.controls.forEach(fieldset=>{
const ordinalControl = fieldset.get('ordinal');
const ordinalValue = ordinalControl.value;
if(ordinalValue > afterOrdinal){
ordinalControl.setValue(ordinalValue +1);
}
});
const fieldsetForm = fieldSet.buildForm();
(fieldsetForm.get('fields') as FormArray).push(fieldForm);
const index = afterOrdinal < 0 ? 0: afterIndex +1;
parentArray.insert(index, fieldsetForm);
this.dataNeedsRefresh.emit();
setTimeout(() => {
this.selectedFieldSetId = fieldSetId;
}, 200);
}
private _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry{ private _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry{
if(!tocentries){ if(!tocentries){
return null; return null;

15
dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.html
View File

@ -135,7 +135,7 @@
<ng-container *ngIf="!isDragging"> <ng-container *ngIf="!isDragging">
<!-- <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) &&(link.type != tocEntryType.FieldSet)"> <ng-container *ngIf="selectedItemInLinks && (link.type != tocEntryType.Page) && isLast && (!viewOnly)">
<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">
@ -153,7 +153,8 @@
Section Section
</ng-container> --> </ng-container> -->
<ng-container *ngSwitchCase="tocEntryType.FieldSet"> <ng-container *ngSwitchCase="tocEntryType.FieldSet">
Field + <img src="/assets/images/editor/icons/add_input_set.svg" alt="" style="margin-left: 0.1em;" class="add-input-icon">
{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
</ng-container> </ng-container>
</ng-container> </ng-container>
@ -179,6 +180,12 @@
<div *ngIf="(!links && parentLink.type!= tocEntryType.FieldSet) && !viewOnly &&parentLink?.id == itemSelected?.id" class="docs-link mt-0"> <div *ngIf="(!links && parentLink.type!= tocEntryType.FieldSet) && !viewOnly &&parentLink?.id == itemSelected?.id" class="docs-link mt-0">
<div class="ml-3"> <div class="ml-3">
<!-- 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})">
<img src="/assets/images/editor/icons/add_input_set.svg" alt="" style="margin-left: -0.2em;" class="add-input-icon">
{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
</button>
<!-- 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> --> <!-- <mat-icon>add</mat-icon> -->
@ -193,11 +200,7 @@
</button> </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})">
Field +
</button> -->
</div> </div>

3
dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.scss
View File

@ -111,3 +111,6 @@ $yellow: #f7dd72;
font-weight: bold; font-weight: bold;
// color: red; // color: red;
} }
.add-input-icon{
width: 20px;
}

66
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
View File

@ -10,7 +10,7 @@
<i>{{this.form.get('extendedDescription').value}}</i> <i>{{this.form.get('extendedDescription').value}}</i>
</h5> </h5>
<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.FreeText" class="col-12"> <mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.FreeText" class="col-12">
<input matInput [formControl]="form.get('value')" placeholder="{{form.get('data').value.label}}" [required]="form.get('validationRequired').value"> <input matInput [formControl]="form.get('value')" placeholder="{{(form.get('data').value.label) + (form.get('validationRequired').value? ' *': '')}}" [required]="form.get('validationRequired').value">
<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
@ -18,12 +18,12 @@
<div class="row"> <div class="row">
<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.Autocomplete"> <mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.Autocomplete">
<ng-container *ngIf="form.get('data').value.multiAutoComplete"> <ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '')}}" [formControl]="form.get('value')"
[configuration]="multipleAutoCompleteConfiguration"> [configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)"> <ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '')}}" [formControl]="form.get('value')"
[configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value"> [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
@ -32,7 +32,7 @@
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint> <mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.WordList" class="col-md-12"> <mat-form-field *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.WordList" class="col-md-12">
<mat-select [formControl]="form.get('value')" placeholder="{{ form.get('data').value.label | translate }}" [required]="form.get('validationRequired').value" [multiple]="form.get('data').value.multiList"> <mat-select [formControl]="form.get('value')" placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [required]="form.get('validationRequired').value" [multiple]="form.get('data').value.multiList">
<mat-option *ngFor="let opt of form.get('data').value.options" [value]="opt.value">{{opt.label}} <mat-option *ngFor="let opt of form.get('data').value.options" [value]="opt.value">{{opt.label}}
</mat-option> </mat-option>
</mat-select> </mat-select>
@ -46,12 +46,12 @@
<div class="row"> <div class="row">
<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Researchers"> <mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Researchers">
<ng-container *ngIf="form.get('data').value.multiAutoComplete"> <ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
[configuration]="multipleAutoCompleteConfiguration"> [configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)"> <ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
[configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value"> [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
@ -61,12 +61,12 @@
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Datasets"> <mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Datasets">
<ng-container *ngIf="form.get('data').value.multiAutoComplete"> <ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
[configuration]="multipleAutoCompleteConfiguration"> [configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)"> <ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
[configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value"> [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
@ -76,12 +76,12 @@
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Dmps"> <mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Dmps">
<ng-container *ngIf="form.get('data').value.multiAutoComplete"> <ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
[configuration]="multipleAutoCompleteConfiguration"> [configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)"> <ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
[configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value"> [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
@ -99,7 +99,7 @@
<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.TextArea" class="col-12"> <mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.TextArea" class="col-12">
<textarea matInput class="text-area" [formControl]="form.get('value')" matTextareaAutosize matAutosizeMinRows="1" matAutosizeMaxRows="15" [required]="form.get('validationRequired').value" <textarea matInput class="text-area" [formControl]="form.get('value')" matTextareaAutosize matAutosizeMinRows="1" matAutosizeMaxRows="15" [required]="form.get('validationRequired').value"
placeholder="{{ form.get('data').value.label | translate }}"></textarea> placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}"></textarea>
<!-- <textarea matInput class="text-area" [formControl]="form.get('value')" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10" [required]="form.get('validationRequired').value" <!-- <textarea matInput class="text-area" [formControl]="form.get('value')" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10" [required]="form.get('validationRequired').value"
placeholder="{{ form.get('data').value.label | translate }}"></textarea> --> placeholder="{{ form.get('data').value.label | translate }}"></textarea> -->
<button mat-icon-button *ngIf="!form.get('value').disabled && form.get('value').value" matSuffix aria-label="Clear" (click)="this.form.patchValue({'value': ''})"> <button mat-icon-button *ngIf="!form.get('value').disabled && form.get('value').value" matSuffix aria-label="Clear" (click)="this.form.patchValue({'value': ''})">
@ -115,6 +115,7 @@
</mat-radio-group> </mat-radio-group>
<small class="text-danger d-block" *ngIf="form.get('value').hasError('required') && form.get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <small class="text-danger d-block" *ngIf="form.get('value').hasError('required') && form.get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</small> </small>
<small class="text-muted d-inline-block" *ngIf="(form.get('validationRequired').value) && !form.get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</small>
</div> </div>
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.RadioBox" class="col-12"> <div *ngSwitchCase="datasetProfileFieldViewStyleEnum.RadioBox" class="col-12">
@ -123,10 +124,11 @@
</mat-radio-group> </mat-radio-group>
<small class="text-danger d-block" *ngIf="form.get('value').hasError('required') && form.get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <small class="text-danger d-block" *ngIf="form.get('value').hasError('required') && form.get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</small> </small>
<small class="text-muted d-inline-block" *ngIf="(form.get('validationRequired').value) && !form.get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}} *</small>
</div> </div>
<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.DatePicker" class="col-12"> <mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.DatePicker" class="col-12">
<input matInput placeholder="{{ form.get('data').value.label | translate }}" class="table-input" [matDatepicker]="date" [required]="form.get('validationRequired').value" <input matInput placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" class="table-input" [matDatepicker]="date" [required]="form.get('validationRequired').value"
[formControl]="form.get('value')"> [formControl]="form.get('value')">
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
<mat-datepicker #date></mat-datepicker> <mat-datepicker #date></mat-datepicker>
@ -139,12 +141,12 @@
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<ng-container *ngIf="form.get('data').value.multiAutoComplete"> <ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
[configuration]="externalDatasetAutoCompleteConfiguration"> [configuration]="externalDatasetAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)"> <ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
[configuration]="externalDatasetAutoCompleteConfiguration" [required]="form.get('validationRequired').value"> [configuration]="externalDatasetAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
@ -159,12 +161,12 @@
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<ng-container *ngIf="form.get('data').value.multiAutoComplete"> <ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
[configuration]="dataRepositoriesAutoCompleteConfiguration"> [configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)"> <ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
[configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value"> [configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
@ -179,12 +181,12 @@
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<ng-container *ngIf="form.get('data').value.multiAutoComplete"> <ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
[configuration]="registriesAutoCompleteConfiguration"> [configuration]="registriesAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)"> <ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
[configuration]="registriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value"> [configuration]="registriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
@ -199,12 +201,12 @@
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<ng-container *ngIf="form.get('data').value.multiAutoComplete"> <ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
[configuration]="servicesAutoCompleteConfiguration"> [configuration]="servicesAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)"> <ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
[configuration]="servicesAutoCompleteConfiguration" [required]="form.get('validationRequired').value"> [configuration]="servicesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
@ -218,7 +220,7 @@
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Tags" class="col-12"> <div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Tags" class="col-12">
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<app-multiple-auto-complete [configuration]="tagsAutoCompleteConfiguration" [formControl]="form.get('value')" placeholder="{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}"></app-multiple-auto-complete> <app-multiple-auto-complete [configuration]="tagsAutoCompleteConfiguration" [formControl]="form.get('value')" placeholder="{{('DATASET-EDITOR.FIELDS.TAGS' | translate) + (form.get('validationRequired').value? ' *': '')}}"></app-multiple-auto-complete>
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
@ -231,12 +233,12 @@
</app-multiple-auto-complete> --> </app-multiple-auto-complete> -->
<ng-container *ngIf="form.get('data').value.multiAutoComplete"> <ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
[configuration]="researchersAutoCompleteConfiguration"> [configuration]="researchersAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)"> <ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
[configuration]="researchersAutoCompleteConfiguration" [required]="form.get('validationRequired').value"> [configuration]="researchersAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
@ -256,12 +258,12 @@
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint> --> <mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint> -->
<ng-container *ngIf="form.get('data').value.multiAutoComplete"> <ng-container *ngIf="form.get('data').value.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
[configuration]="organisationsAutoCompleteConfiguration"> [configuration]="organisationsAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)"> <ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
[configuration]="organisationsAutoCompleteConfiguration" [required]="form.get('validationRequired').value"> [configuration]="organisationsAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
@ -276,12 +278,12 @@
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.DatasetIdentifier" class="col-12"> <div *ngSwitchCase="datasetProfileFieldViewStyleEnum.DatasetIdentifier" class="col-12">
<div class="row" *ngIf="datasetIdInitialized"> <div class="row" *ngIf="datasetIdInitialized">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{form.get('data').value.label}}" [required]="form.get('validationRequired').value"> <input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{(form.get('data').value.label) + (form.get('validationRequired').value? ' *': '')}}" [required]="form.get('validationRequired').value">
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<mat-select class="col-md-12" [formControl]="getDatasetIdControl('type')" [placeholder]="'TYPES.DATASET-PROFILE-IDENTIFIER.IDENTIFIER-TYPE' | translate"> <mat-select class="col-md-12" [formControl]="getDatasetIdControl('type')" [placeholder]="('TYPES.DATASET-PROFILE-IDENTIFIER.IDENTIFIER-TYPE' | translate) + (form.get('validationRequired').value? ' *': '')">
<mat-option *ngFor="let type of datasetIdTypes" [value]="type.value"> <mat-option *ngFor="let type of datasetIdTypes" [value]="type.value">
{{ type.name }} {{ type.name }}
</mat-option> </mat-option>
@ -295,7 +297,7 @@
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Currency" class="col-12"> <div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Currency" class="col-12">
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" <app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
[configuration]="currencyAutoCompleteConfiguration" [required]="form.get('validationRequired').value"> [configuration]="currencyAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
</app-single-auto-complete> </app-single-auto-complete>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
@ -307,12 +309,12 @@
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Validation" class="col-12"> <div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Validation" class="col-12">
<div class="row"> <div class="row">
<mat-form-field class="col-md-4"> <mat-form-field class="col-md-4">
<input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{form.get('data').value.label}}" [required]="form.get('validationRequired').value"> <input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{(form.get('data').value.label) + (form.get('validationRequired').value? ' *': '')}}" [required]="form.get('validationRequired').value">
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-4"> <mat-form-field class="col-md-4">
<mat-select class="col-md-12" [formControl]="getDatasetIdControl('type')" [placeholder]="'TYPES.DATASET-PROFILE-VALIDATOR.REPOSITORIES-PLACEHOLDER' | translate"> <mat-select class="col-md-12" [formControl]="getDatasetIdControl('type')" [placeholder]="('TYPES.DATASET-PROFILE-VALIDATOR.REPOSITORIES-PLACEHOLDER' | translate) + (form.get('validationRequired').value? ' *': '')">
<mat-option *ngFor="let type of validationTypes" [value]="type.value"> <mat-option *ngFor="let type of validationTypes" [value]="type.value">
{{ type.name }} {{ type.name }}
</mat-option> </mat-option>

6
dmp-frontend/src/assets/i18n/de.json
View File

@ -461,6 +461,10 @@
}, },
"ACTIONS": { "ACTIONS": {
"ADD-RULE": "Add Visibility Rule +" "ADD-RULE": "Add Visibility Rule +"
},
"STATUS":{
"CALCULATING-PREVIEW":"... calculating preview",
"PREVIEW-UPDATED":"Preview updated!"
} }
}, },
"RULE": { "RULE": {
@ -522,7 +526,7 @@
"NOT-INITIALIZED": "Not initialized yet" "NOT-INITIALIZED": "Not initialized yet"
}, },
"FIELDSET": { "FIELDSET": {
"ADD-INPUT": "Add new input", "ADD-INPUT": "Add input",
"COMMENT-FIELD": "Comment field", "COMMENT-FIELD": "Comment field",
"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.", "INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.", "ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",

8
dmp-frontend/src/assets/i18n/en.json
View File

@ -461,6 +461,10 @@
}, },
"ACTIONS": { "ACTIONS": {
"ADD-RULE": "Add Visibility Rule +" "ADD-RULE": "Add Visibility Rule +"
},
"STATUS":{
"CALCULATING-PREVIEW":"... calculating preview",
"PREVIEW-UPDATED":"Preview updated!"
} }
}, },
"RULE": { "RULE": {
@ -516,13 +520,13 @@
"BACK-TO-TOP": "Back to top", "BACK-TO-TOP": "Back to top",
"FIELD": { "FIELD": {
"MAKE-IT-REQUIRED": "Make input required", "MAKE-IT-REQUIRED": "Make input required",
"ADD-VISIBILITY-RULE": "Add Conditional Question", "ADD-VISIBILITY-RULE": "Make Conditional Question",
"DELETE-INPUT": "Delete this input", "DELETE-INPUT": "Delete this input",
"PREVIEW": "Preview", "PREVIEW": "Preview",
"NOT-INITIALIZED": "Not initialized yet" "NOT-INITIALIZED": "Not initialized yet"
}, },
"FIELDSET": { "FIELDSET": {
"ADD-INPUT": "Add new input", "ADD-INPUT": "Add input",
"COMMENT-FIELD": "Comment field", "COMMENT-FIELD": "Comment field",
"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.", "INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.", "ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",

6
dmp-frontend/src/assets/i18n/es.json
View File

@ -461,6 +461,10 @@
}, },
"ACTIONS": { "ACTIONS": {
"ADD-RULE": "Añadir una regla de visibilidad +" "ADD-RULE": "Añadir una regla de visibilidad +"
},
"STATUS":{
"CALCULATING-PREVIEW":"... calculating preview",
"PREVIEW-UPDATED":"Preview updated!"
} }
}, },
"RULE": { "RULE": {
@ -522,7 +526,7 @@
"NOT-INITIALIZED": "Not initialized yet" "NOT-INITIALIZED": "Not initialized yet"
}, },
"FIELDSET": { "FIELDSET": {
"ADD-INPUT": "Add new input", "ADD-INPUT": "Add input",
"COMMENT-FIELD": "Comment field", "COMMENT-FIELD": "Comment field",
"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.", "INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.", "ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",

6
dmp-frontend/src/assets/i18n/gr.json
View File

@ -461,6 +461,10 @@
}, },
"ACTIONS": { "ACTIONS": {
"ADD-RULE": "Προσθήκη Κανονισμού Ορατότητας +" "ADD-RULE": "Προσθήκη Κανονισμού Ορατότητας +"
},
"STATUS":{
"CALCULATING-PREVIEW":"... calculating preview",
"PREVIEW-UPDATED":"Preview updated!"
} }
}, },
"RULE": { "RULE": {
@ -522,7 +526,7 @@
"NOT-INITIALIZED": "Not initialized yet" "NOT-INITIALIZED": "Not initialized yet"
}, },
"FIELDSET": { "FIELDSET": {
"ADD-INPUT": "Add new input", "ADD-INPUT": "Add input",
"COMMENT-FIELD": "Comment field", "COMMENT-FIELD": "Comment field",
"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.", "INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.", "ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",

606
dmp-frontend/src/assets/i18n/pt.json
View File

File diff suppressed because it is too large Load Diff

6
dmp-frontend/src/assets/i18n/sk.json
View File

@ -461,6 +461,10 @@
}, },
"ACTIONS": { "ACTIONS": {
"ADD-RULE": "Pridať pravidlo Dostupnosti +" "ADD-RULE": "Pridať pravidlo Dostupnosti +"
},
"STATUS":{
"CALCULATING-PREVIEW":"... calculating preview",
"PREVIEW-UPDATED":"Preview updated!"
} }
}, },
"RULE": { "RULE": {
@ -522,7 +526,7 @@
"NOT-INITIALIZED": "Not initialized yet" "NOT-INITIALIZED": "Not initialized yet"
}, },
"FIELDSET": { "FIELDSET": {
"ADD-INPUT": "Add new input", "ADD-INPUT": "Add input",
"COMMENT-FIELD": "Comment field", "COMMENT-FIELD": "Comment field",
"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.", "INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.", "ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",

6
dmp-frontend/src/assets/i18n/sr.json
View File

@ -461,6 +461,10 @@
}, },
"ACTIONS": { "ACTIONS": {
"ADD-RULE": "Dodajte pravilo vidljivosti +" "ADD-RULE": "Dodajte pravilo vidljivosti +"
},
"STATUS":{
"CALCULATING-PREVIEW":"... calculating preview",
"PREVIEW-UPDATED":"Preview updated!"
} }
}, },
"RULE": { "RULE": {
@ -522,7 +526,7 @@
"NOT-INITIALIZED": "Not initialized yet" "NOT-INITIALIZED": "Not initialized yet"
}, },
"FIELDSET": { "FIELDSET": {
"ADD-INPUT": "Add new input", "ADD-INPUT": "Add input",
"COMMENT-FIELD": "Comment field", "COMMENT-FIELD": "Comment field",
"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.", "INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.", "ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",

6
dmp-frontend/src/assets/i18n/tr.json
View File

@ -461,6 +461,10 @@
}, },
"ACTIONS": { "ACTIONS": {
"ADD-RULE": "Görünürlük Kuralı Ekle +" "ADD-RULE": "Görünürlük Kuralı Ekle +"
},
"STATUS":{
"CALCULATING-PREVIEW":"... calculating preview",
"PREVIEW-UPDATED":"Preview updated!"
} }
}, },
"RULE": { "RULE": {
@ -522,7 +526,7 @@
"NOT-INITIALIZED": "Not initialized yet" "NOT-INITIALIZED": "Not initialized yet"
}, },
"FIELDSET": { "FIELDSET": {
"ADD-INPUT": "Add new input", "ADD-INPUT": "Add input",
"COMMENT-FIELD": "Comment field", "COMMENT-FIELD": "Comment field",
"INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.", "INCLUDE-COMMENT-FIELD": "A comment field input is appended to the given question.",
"ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.", "ENABLE-MULTIPLICITY": "User may provide more than one answer to the given question.",

1
dmp-frontend/src/assets/images/editor/icons/add_input.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.33 17.21"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#129d99;}.cls-3{fill:#129d99;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Rectangle_2747" data-name="Rectangle 2747"><rect class="cls-1" width="20.33" height="17.21"/><rect class="cls-2" x="0.73" y="0.61" width="18.88" height="15.98"/></g><path id="ic_add_24px" data-name="ic add 24px" class="cls-3" d="M12.91,9.11H11v1.94H10V9.11H8v-1h2V6.16h1V8.11h1.95Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 542 B

11
dmp-frontend/src/assets/images/editor/icons/add_input_set.svg
View File

@ -1,10 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17.143" viewBox="0 0 20 17.143"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.16 17.04"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#129d99;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Rectangle_2747" data-name="Rectangle 2747"><rect class="cls-1" y="0.02" width="16.84" height="13.54"/><polyline class="cls-2" points="8.99 13.07 0.6 13.07 0.6 0.5 16.24 0.5 16.24 5.69"/></g><line class="cls-2" x1="16.24" y1="9.11" x2="16.24" y2="17.04"/><line class="cls-2" x1="20.16" y1="13.07" x2="12.33" y2="13.07"/></g></g></svg>
<g id="Group_11949" data-name="Group 11949" transform="translate(-1147 -554)">
<g id="Rectangle_2722" data-name="Rectangle 2722" transform="translate(1147 554)" fill="none" stroke="#129d99" stroke-width="2">
<rect width="16.191" height="13.333" rx="1" stroke="none"/>
<rect x="1" y="1" width="14.191" height="11.333" fill="none"/>
</g>
<rect id="Rectangle_2763" data-name="Rectangle 2763" width="12.381" height="12.381" transform="translate(1154.619 558.762)" fill="#fff"/>
<path id="ic_add_24px" d="M16.324,12.6H12.6v3.724H10.724V12.6H7V10.724h3.724V7H12.6v3.724h3.724Z" transform="translate(1150.579 554.719)" fill="#129d99"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 765 B

After

Width:  |  Height:  |  Size: 556 B

1
dmp-frontend/src/assets/images/editor/icons/add_visibility_rule_2.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.89 16.96"><defs><style>.cls-1{fill:#129d99;}.cls-2{fill:none;stroke:#129d99;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Group_11772" data-name="Group 11772"><path id="ic_visibility_24px" data-name="ic visibility 24px" class="cls-1" d="M14.45,4.94A5.6,5.6,0,0,0,9.23,8.5a5.61,5.61,0,0,0,10.45,0A5.61,5.61,0,0,0,14.45,4.94Zm0,5.94A2.38,2.38,0,1,1,16.83,8.5h0A2.37,2.37,0,0,1,14.45,10.88Zm0-3.8A1.43,1.43,0,1,0,15.88,8.5h0a1.42,1.42,0,0,0-1.42-1.42Z"/></g><line class="cls-2" x1="0.01" y1="0.5" x2="19.89" y2="0.5"/><line class="cls-2" x1="0.01" y1="5.82" x2="8.05" y2="5.82"/><line class="cls-2" x1="0.01" y1="11.14" x2="7.96" y2="11.14"/><line class="cls-2" y1="16.45" x2="19.89" y2="16.46"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 814 B