Merge remote-tracking branch 'origin/Development' into Development

dmp-backend/Dockerfile.CI

@@ -1,4 +1,4 @@
-FROM maven:3-jdk-8-alpine AS MAVEN_BUILD
+FROM maven:3-openjdk-11 AS MAVEN_BUILD
 
 COPY pom.xml /build/
 COPY data /build/data/
@@ -9,7 +9,7 @@ COPY web /build/web/
 WORKDIR /build/
 RUN mvn package
 
-FROM openjdk:8-jre-alpine
+FROM adoptopenjdk/openjdk11:alpine-jre
 WORKDIR /app
 COPY --from=MAVEN_BUILD /build/web/target/web-1.0-SNAPSHOT.jar /app/app.jar
-ENTRYPOINT ["java", "-Djava.security.egd=file:/dev/./urandom", "-Dspring.profiles.active=${PROF}", "-Dspring.config.location=/files/config/", "-jar","/app/app.jar"]
+ENTRYPOINT ["java", "-Djava.security.egd=file:/dev/./urandom", "-Dspring.profiles.active=${PROF}", "-Dspring.config.additional-location=/files/config/", "-jar","/app/app.jar"]

dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts

@@ -53,26 +53,27 @@ import { DatasetProfileTableOfContents } from './table-of-contents/table-of-cont
 import { DatasetProfileTableOfContentsInternalSection } from './table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section';
 import {HttpClientModule} from "@angular/common/http";
 import {AngularEditorModule} from "@kolkov/angular-editor";
+import {TransitionGroupModule} from "@app/ui/transition-group/transition-group.module";
 
 
 
 @NgModule({
-	imports: [
+  imports: [
-		CommonUiModule,
+    CommonUiModule,
-		CommonFormsModule,
+    CommonFormsModule,
-		FormattingModule,
+    FormattingModule,
-		DatasetProfileRoutingModule,
+    DatasetProfileRoutingModule,
-		ConfirmationDialogModule,
+    ConfirmationDialogModule,
-		NgxDropzoneModule,
+    NgxDropzoneModule,
-		FormProgressIndicationModule,
+    FormProgressIndicationModule,
-		DatasetModule,
+    DatasetModule,
-		AngularStickyThingsModule,
+    AngularStickyThingsModule,
-		DragDropModule,
+    DragDropModule,
-		MatBadgeModule,
+    MatBadgeModule,
-		DragulaModule,
+    DragulaModule,
-		AutoCompleteModule,
+    AutoCompleteModule,
-		HttpClientModule, AngularEditorModule,
+    HttpClientModule, AngularEditorModule, TransitionGroupModule,
-	],
+  ],
 	declarations: [
 		DatasetProfileListingComponent,
 		DatasetProfileCriteriaComponent,

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

@@ -1,4 +1,3 @@
-
 <!-- TO LINK -->
 <!-- <div class="row">
 	<h4 *ngIf="isComposite" class="col-auto titleStile">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.TITLE' | translate}}</h4>
@@ -119,30 +118,36 @@
 	<div class="row">
 
 		<!-- FIELDS -->
-		<div class="col-12" *ngIf="hasFocus" [@fade-in] >
+		<div #inputs transition-group class="col-12" *ngIf="hasFocus" [@fade-in]>
-
+			<div *ngFor="let field of fieldsArray.controls; let i=index;" class="row bg-white field-input mt-3" (click)="setTargetField(field)" transition-group-item>
-			<ng-container *ngFor="let field of form.get('fields')['controls']; let i=index" >
+				<!-- field-container -->
-				<div class="row bg-white" style="position: relative;" (click)="setTargetField(field)"
+				<!-- [ngClass]="{'field-container-active': (field.get('id').value === targetField?.get('id').value) && hasFocus}" -->
-					>
+				<!-- <div class="field-id-container">
-					<!-- field-container -->
+					{{form.get('fields').get(''+i).get('id').value}} -->
-					<!-- [ngClass]="{'field-container-active': (field.get('id').value === targetField?.get('id').value) && hasFocus}" -->
+					<!-- <button mat-mini-fab class="field-id-container-icon" (click)="DeleteField(i)">
-					<!-- <div class="field-id-container">
+						<mat-icon>delete</mat-icon>
-						{{form.get('fields').get(''+i).get('id').value}} -->
+					</button> -->
-						<!-- <button mat-mini-fab class="field-id-container-icon" (click)="DeleteField(i)">
+				<!-- </div> -->
-							<mat-icon>delete</mat-icon>
+				<!-- *ngIf="!isComposite" -->
-						</button> -->
+				<app-dataset-profile-editor-field-component class="col-12"
-					<!-- </div> -->
+					[form]="field" [showOrdinal]="false"
-					<!-- *ngIf="!isComposite" -->
+					[indexPath]="indexPath + 'f' + i" [viewOnly]="viewOnly"
-					<app-dataset-profile-editor-field-component class="col-12" 
+					[expandView]="hasFocus"
-						[form]="form.get('fields').get(''+i)" [showOrdinal]="false"
+					[canBeDeleted]="fieldsArray.length !=1"
-						[indexPath]="indexPath + 'f' + i" [viewOnly]="viewOnly"
+					(delete)="deleteField(i)">
-						[expandView]="hasFocus"
+					<div class="arrows mt-2">
-						[canBeDeleted]="form.get('fields')['controls'].length !=1"
+						<ul class="list-unstyled list-inline d-flex align-items-center">
-						(delete)="deleteField(i)">
+							<li *ngIf="canGoUp(i)" class="text-muted">
-					</app-dataset-profile-editor-field-component>
+								<mat-icon style="cursor: pointer;" (click)="move(i)" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.MOVE-UP' | translate">keyboard_arrow_up</mat-icon>
-				</div>
+							</li>
+							<li *ngIf="canGoDown(i)" class="text-muted">
+								<mat-icon style="cursor: pointer;" (click)="move(i, 'down')" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.MOVE-DOWN' | translate">keyboard_arrow_down</mat-icon>
+							</li>
+						</ul>
+					</div>
+				</app-dataset-profile-editor-field-component>
 				<hr>
-			</ng-container>
+			</div>
 <!--
 			<div *ngIf="isComposite" class="row">
 				<h4 class="col-12 titleStile">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.SUB-FIELDS-TITLE' | translate}}

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

@@ -134,6 +134,13 @@ $blue-color-light: #5cf7f2;
     font-style: italic;
 }
 
-// ::ng-deep .underline-line-field .mat-form-field-appearance-legacy .mat-form-field-wapper{
+.field-input {
-//     padding-bottom: 1.25em !important;
+	position: relative;
-// }
+}
+
+.field-input .arrows {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+}

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts

@@ -1,30 +1,56 @@
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import {Component, Input, OnChanges, OnInit, ViewChild} from '@angular/core';
-import { FormArray, FormControl, FormGroup} from '@angular/forms';
+import {AbstractControl, FormArray, FormControl, FormGroup} from '@angular/forms';
-import { FieldEditorModel } from '../../../admin/field-editor-model';
+import {FieldEditorModel} from '../../../admin/field-editor-model';
-import { Guid } from '@common/types/guid';
+import {Guid} from '@common/types/guid';
-import { RuleEditorModel } from '../../../admin/rule-editor-model';
+import {RuleEditorModel} from '../../../admin/rule-editor-model';
-import { ValidationType } from '@app/core/common/enum/validation-type';
+import {ValidationType} from '@app/core/common/enum/validation-type';
-import { MatCheckboxChange } from '@angular/material/checkbox';
+import {MatCheckboxChange} from '@angular/material/checkbox';
-import { DatasetDescriptionCompositeFieldEditorModel, DatasetDescriptionFieldEditorModel, DatasetDescriptionFormEditorModel, DatasetDescriptionSectionEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
+import {
-import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
+	DatasetDescriptionCompositeFieldEditorModel,
-import { MatDialog } from '@angular/material/dialog';
+	DatasetDescriptionFieldEditorModel,
-import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
+	DatasetDescriptionSectionEditorModel
-import { TranslateService } from '@ngx-translate/core';
+} from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
-import { ViewStyleType } from '../field/view-style-enum';
+import {DatasetProfileFieldViewStyle} from '@app/core/common/enum/dataset-profile-field-view-style';
-import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
+import {MatDialog} from '@angular/material/dialog';
-import { DatasetProfileService } from '@app/core/services/dataset-profile/dataset-profile.service';
+import {ConfirmationDialogComponent} from '@common/modules/confirmation-dialog/confirmation-dialog.component';
-import { EditorCustomValidators } from '../../custom-validators/editor-custom-validators';
+import {TranslateService} from '@ngx-translate/core';
-import { Field, FieldSet } from '@app/core/model/admin/dataset-profile/dataset-profile';
+import {ViewStyleType} from '../field/view-style-enum';
-import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
+import {EnumUtils} from '@app/core/services/utilities/enum-utils.service';
-import { DatasetProfileInternalDmpEntitiesType } from '@app/core/common/enum/dataset-profile-internal-dmp-entities-type';
+import {DatasetProfileService} from '@app/core/services/dataset-profile/dataset-profile.service';
-import { AutoCompleteFieldData, BooleanDecisionFieldData, CheckBoxFieldData, CurrencyFieldData, DataRepositoriesFieldData, DatasetIdentifierFieldData, DatePickerFieldData, DmpsAutoCompleteFieldData, ExternalDatasetsFieldData, FieldDataOption, FreeTextFieldData, OrganizationsFieldData, RadioBoxFieldData, RegistriesFieldData, ResearchersAutoCompleteFieldData, ServicesFieldData, TagsFieldData, TextAreaFieldData, ValidationFieldData, WordListFieldData } from '@app/core/model/dataset-profile-definition/field-data/field-data';
+import {EditorCustomValidators} from '../../custom-validators/editor-custom-validators';
-import { CompositeField } from '@app/core/model/dataset-profile-definition/composite-field';
+import {Field, FieldSet} from '@app/core/model/admin/dataset-profile/dataset-profile';
+import {DatasetProfileComboBoxType} from '@app/core/common/enum/dataset-profile-combo-box-type';
+import {DatasetProfileInternalDmpEntitiesType} from '@app/core/common/enum/dataset-profile-internal-dmp-entities-type';
+import {
+	AutoCompleteFieldData,
+	BooleanDecisionFieldData,
+	CheckBoxFieldData,
+	CurrencyFieldData,
+	DataRepositoriesFieldData,
+	DatasetIdentifierFieldData,
+	DatePickerFieldData,
+	DmpsAutoCompleteFieldData,
+	ExternalDatasetsFieldData,
+	FieldDataOption,
+	FreeTextFieldData,
+	OrganizationsFieldData,
+	RadioBoxFieldData,
+	RegistriesFieldData,
+	ResearchersAutoCompleteFieldData,
+	ServicesFieldData,
+	TagsFieldData,
+	TextAreaFieldData,
+	ValidationFieldData,
+	WordListFieldData
+} from '@app/core/model/dataset-profile-definition/field-data/field-data';
+import {CompositeField} from '@app/core/model/dataset-profile-definition/composite-field';
 import {Field as FieldDefinition} from '@app/core/model/dataset-profile-definition/field';
-import { Subject } from 'rxjs';
+import {Subject} from 'rxjs';
-import { debounceTime, delay, map, takeUntil, tap } from 'rxjs/operators';
+import {debounceTime, delay, map, takeUntil, tap} from 'rxjs/operators';
-import { GENERAL_ANIMATIONS } from '../../animations/animations';
+import {GENERAL_ANIMATIONS} from '../../animations/animations';
-import { BaseComponent } from '@common/base/base.component';
+import {BaseComponent} from '@common/base/base.component';
 import {AngularEditorConfig} from "@kolkov/angular-editor";
+import {TransitionGroupComponent} from "@app/ui/transition-group/transition-group.component";
 
 @Component({
 	selector: 'app-dataset-profile-editor-composite-field-component',
@@ -73,6 +99,7 @@ export class DatasetProfileEditorCompositeFieldComponent extends BaseComponent i
 
 	@Input() numbering: string;
 	@Input() hasFocus: boolean = false;
+	@ViewChild("inputs") inputs: TransitionGroupComponent;
 
 	showPreview: boolean  = true;
 	previewDirty: boolean = false;
@@ -104,6 +131,7 @@ export class DatasetProfileEditorCompositeFieldComponent extends BaseComponent i
 		// this.setTargetField(null);
 		// this.showExtendedDescription = !!this.form.get('extendedDescription').value;
 		// this.showAdditionalInfo = !!this.form.get('additionalInformation').value;
+		console.log(this.form.get('fields')['controls'])
 	}
 
 	get firstField(){
@@ -393,7 +421,7 @@ export class DatasetProfileEditorCompositeFieldComponent extends BaseComponent i
 
 		const fieldsForm = <FormArray>this.form.get('fields');
 		fieldsForm.removeAt(index);
-
+		this.inputs.init();
 		// calculate ordinals
 		fieldsForm.controls.forEach((field, idx)=>{
 			field.get('ordinal').setValue(idx);
@@ -446,15 +474,11 @@ export class DatasetProfileEditorCompositeFieldComponent extends BaseComponent i
 		// 	validationsControl.updateValueAndValidity();
 		// }
 	}
-	setTargetField(field:FormGroup){
+	setTargetField(field:AbstractControl){
-		this.targetField = field;
+		this.targetField = <FormGroup>field;
 	}
 
 
-	
-
-
-
 	deleteTargetField(){
 
 		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
@@ -874,6 +898,7 @@ export class DatasetProfileEditorCompositeFieldComponent extends BaseComponent i
 		}
 
 		(<FormArray>this.form.get('fields')).push(new FieldEditorModel().fromModel(field).buildForm());
+		this.inputs.init();
 		// fieldForm.get('viewStyle').get('renderStyle').updateValueAndValidity();
 		// fieldForm.get('data').updateValueAndValidity();
 
@@ -948,6 +973,37 @@ export class DatasetProfileEditorCompositeFieldComponent extends BaseComponent i
 
 		return {'width':width+'em'}
 	}
+
+	get fieldsArray(): FormArray {
+		if(this.form && this.form.get('fields')) {
+			return this.form.get('fields') as FormArray;
+		}
+		return null;
+	}
+
+	move(index, direction: "up" | "down" = "up") {
+		this.inputs.init();
+		if (direction === "up" && this.canGoUp(index)) {
+			let temp = this.fieldsArray.at(index);
+			this.fieldsArray.removeAt(index);
+			this.fieldsArray.insert(index-1, temp);
+		} else if (direction === "down" && this.canGoDown(index)) {
+			let temp = this.fieldsArray.at(index+1);
+			this.fieldsArray.removeAt(index+1);
+			this.fieldsArray.insert(index, temp);
+		}
+		this.fieldsArray.controls.forEach((field, index) => {
+			field.get('ordinal').setValue(index);
+		});
+	}
+
+	canGoUp(index: number): boolean {
+		return index > 0;
+	}
+
+	canGoDown(index: number): boolean {
+		return index < (this.fieldsArray.length - 1);
+	}
 }
 
 

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

@@ -1,8 +1,9 @@
 <ng-container *ngIf="expandView">
 
 	<!-- ACTIONS PER FIELD -->
-	<div class="row justify-content-end mb-1 mt-3">
+	<div class="row justify-content-end mb-1 mr-2">
-		<div class="col-auto mr-2">
+		<ng-content></ng-content>
+		<div class="col-auto">
 			<ul class="list-unstyled list-inline d-flex align-items-center">
 				<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">
@@ -12,7 +13,7 @@
 				<!-- <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>
 				</li> -->
-				<li class="list-inline-item" *ngIf="!viewOnly && viewType && canBeDeleted" class="text-muted">
+				<li class="text-muted" *ngIf="!viewOnly && viewType && canBeDeleted">
 					<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>
 			</ul>

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts

@@ -274,7 +274,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
 
 
 	private _formChangesSubscription:Subscription;
-	private _showPreview: boolean = false;;
+	private _showPreview: boolean = false;
 
 	//  get showPreview(): boolean{
 
@@ -801,12 +801,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
 	get isRequired(){
 		let validationsControl = this.form.get('validations') as FormControl;
 		let validations: Array<ValidationType> = validationsControl.value;
-
+		return validations.includes(ValidationType.Required);
-		if(validations.includes(ValidationType.Required)){
-			return true;
-		}
-		return false;
-
 	}
 
 

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.html

@@ -14,13 +14,12 @@
 
 <h6 *ngIf="form.get('description').value  && !isChild" class="col-12" [innerHTML]="form.get('description').value"></h6>
 
-<div class="col-12 mt-3 mb-3">
+<div *ngIf="form.get('extendedDescription').value  && !isChild" class="col-12 mt-3 mb-3">
 	<div *ngIf="!showExtendedDescription" (click)="showExtendedDescription = !showExtendedDescription">
 		<span class="more d-flex justify-content-center">{{'DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.VIEW-MORE' | translate}}</span>
 	</div>
 	<div *ngIf="showExtendedDescription">
-		<h6 *ngIf="form.get('extendedDescription').value  && !isChild" [innerHTML]="form.get('extendedDescription').value">
+		<h6 [innerHTML]="form.get('extendedDescription').value"></h6>
-		</h6>
 		<span class="more d-flex justify-content-center" (click)="showExtendedDescription = !showExtendedDescription">
 			{{'DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.VIEW-LESS' | translate}}
 		</span>

dmp-frontend/src/app/ui/transition-group/transition-group-item.directive.ts

@@ -0,0 +1,16 @@
+import {Directive, ElementRef} from "@angular/core";
+
+@Directive({
+  selector: '[transition-group-item]'
+})
+export class TransitionGroupItemDirective {
+  prevPos: any;
+  newPos: any;
+  el: HTMLElement;
+  moved: boolean;
+  moveCallback: any;
+  
+  constructor(elRef: ElementRef) {
+    this.el = elRef.nativeElement;
+  }
+}

dmp-frontend/src/app/ui/transition-group/transition-group.component.ts

@@ -0,0 +1,106 @@
+import {TransitionGroupItemDirective} from "./transition-group-item.directive";
+import {AfterViewInit, Component, ContentChildren, Input, OnDestroy, QueryList} from "@angular/core";
+import {Subscription} from "rxjs";
+import Timeout = NodeJS.Timeout;
+
+@Component({
+  selector: '[transition-group]',
+  template: '<ng-content></ng-content>'
+})
+export class TransitionGroupComponent implements AfterViewInit, OnDestroy {
+  @ContentChildren(TransitionGroupItemDirective) items: QueryList<TransitionGroupItemDirective>;
+  private subscription: Subscription;
+  private timeout: Timeout;
+
+  ngAfterViewInit() {
+    this.init();
+    this.subscription = this.items.changes.subscribe(items => {
+      items.forEach(item => item.prevPos = item.newPos || item.prevPos);
+      items.forEach(this.runCallback);
+      this.refreshPosition('newPos');
+      items.forEach(item => item.prevPos = item.prevPos || item.newPos); // for new items
+
+      const animate = () => {
+        items.forEach(this.applyTranslation);
+        this['_forceReflow'] = document.body.offsetHeight; // force reflow to put everything in position
+        this.items.forEach(this.runTransition.bind(this));
+      }
+
+      const willMoveSome = items.some((item) => {
+        const dx = item.prevPos.left - item.newPos.left;
+        const dy = item.prevPos.top - item.newPos.top;
+        return dx || dy;
+      });
+
+      if (willMoveSome) {
+        animate();
+      } else {
+        setTimeout(() => { // for removed items
+          this.refreshPosition('newPos');
+          animate();
+        }, 0);
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.clear();
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+
+  clear() {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+  }
+
+  init() {
+    this.clear();
+    this.refreshPosition('prevPos');
+    this.refreshPosition('newPos');
+  }
+
+  runCallback(item: TransitionGroupItemDirective) {
+    if (item.moveCallback) {
+      item.moveCallback();
+    }
+  }
+
+  runTransition(item: TransitionGroupItemDirective) {
+    if (!item.moved) {
+      return;
+    }
+    const cssClass = 'list-move';
+    let el = item.el;
+    let style: any = el.style;
+    el.classList.add(cssClass);
+    style.transform = style.WebkitTransform = style.transitionDuration = '';
+    el.addEventListener('transitionend', item.moveCallback = (e: any) => {
+      if (!e || /transform$/.test(e.propertyName)) {
+        el.removeEventListener('transitionend', item.moveCallback);
+        item.moveCallback = null;
+        el.classList.remove(cssClass);
+      }
+    });
+  }
+
+  refreshPosition(prop: string) {
+    this.items.forEach(item => {
+      item[prop] = item.el.getBoundingClientRect();
+    });
+  }
+
+  applyTranslation(item: TransitionGroupItemDirective) {
+    item.moved = false;
+    const dx = item.prevPos.left - item.newPos.left;
+    const dy = item.prevPos.top - item.newPos.top;
+    if (dx || dy) {
+      item.moved = true;
+      let style: any = item.el.style;
+      style.transform = style.WebkitTransform = 'translate(' + dx + 'px,' + dy + 'px)';
+      style.transitionDuration = '0s';
+    }
+  }
+}

dmp-frontend/src/app/ui/transition-group/transition-group.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {TransitionGroupItemDirective} from "./transition-group-item.directive";
+import {TransitionGroupComponent} from "./transition-group.component";
+
+@NgModule({
+	declarations: [TransitionGroupItemDirective, TransitionGroupComponent],
+	imports: [CommonModule],
+	exports: [TransitionGroupItemDirective, TransitionGroupComponent]
+})
+export class TransitionGroupModule {
+
+}

dmp-frontend/src/assets/i18n/de.json

@@ -533,7 +533,9 @@
 				"ADD-VISIBILITY-RULE": "Add Conditional Question",
 				"DELETE-INPUT": "Delete this input",
 				"PREVIEW": "Preview",
-				"NOT-INITIALIZED": "Not initialized yet"
+				"NOT-INITIALIZED": "Not initialized yet",
+				"MOVE-UP": "Move this input above",
+				"MOVE-DOWN": "Move this input below"
 			},
 			"FIELDSET": {
 				"ADD-INPUT": "Add input",

dmp-frontend/src/assets/i18n/en.json

@@ -533,7 +533,9 @@
 				"ADD-VISIBILITY-RULE": "Make Conditional Question",
 				"DELETE-INPUT": "Delete this input",
 				"PREVIEW": "Preview",
-				"NOT-INITIALIZED": "Not initialized yet"
+				"NOT-INITIALIZED": "Not initialized yet",
+				"MOVE-UP": "Move this input above",
+				"MOVE-DOWN": "Move this input below"
 			},
 			"FIELDSET": {
 				"ADD-INPUT": "Add input",

dmp-frontend/src/assets/i18n/es.json

@@ -533,7 +533,9 @@
 				"ADD-VISIBILITY-RULE": "Add Conditional Question",
 				"DELETE-INPUT": "Delete this input",
 				"PREVIEW": "Preview",
-				"NOT-INITIALIZED": "Not initialized yet"
+				"NOT-INITIALIZED": "Not initialized yet",
+				"MOVE-UP": "Move this input above",
+				"MOVE-DOWN": "Move this input below"
 			},
 			"FIELDSET": {
 				"ADD-INPUT": "Add input",

dmp-frontend/src/assets/i18n/gr.json

@@ -533,7 +533,9 @@
 				"ADD-VISIBILITY-RULE": "Add Conditional Question",
 				"DELETE-INPUT": "Delete this input",
 				"PREVIEW": "Preview",
-				"NOT-INITIALIZED": "Not initialized yet"
+				"NOT-INITIALIZED": "Not initialized yet",
+				"MOVE-UP": "Move this input above",
+				"MOVE-DOWN": "Move this input below"
 			},
 			"FIELDSET": {
 				"ADD-INPUT": "Add input",

dmp-frontend/src/assets/i18n/pt.json

@@ -533,7 +533,9 @@
 				"ADD-VISIBILITY-RULE": "Adione Questão Condicionada",
 				"DELETE-INPUT": "Eliminar este input",
 				"PREVIEW": "Pré-visualização",
-				"NOT-INITIALIZED": "Ainda não iniciado"
+				"NOT-INITIALIZED": "Ainda não iniciado",
+				"MOVE-UP": "Move this input above",
+				"MOVE-DOWN": "Move this input below"
 			},
 			"FIELDSET": {
 				"ADD-INPUT": "Adicionar novo input",

dmp-frontend/src/assets/i18n/sk.json

@@ -533,7 +533,9 @@
 				"ADD-VISIBILITY-RULE": "Add Conditional Question",
 				"DELETE-INPUT": "Delete this input",
 				"PREVIEW": "Preview",
-				"NOT-INITIALIZED": "Not initialized yet"
+				"NOT-INITIALIZED": "Not initialized yet",
+				"MOVE-UP": "Move this input above",
+				"MOVE-DOWN": "Move this input below"
 			},
 			"FIELDSET": {
 				"ADD-INPUT": "Add input",

dmp-frontend/src/assets/i18n/sr.json

@@ -533,7 +533,9 @@
 				"ADD-VISIBILITY-RULE": "Add Conditional Question",
 				"DELETE-INPUT": "Delete this input",
 				"PREVIEW": "Preview",
-				"NOT-INITIALIZED": "Not initialized yet"
+				"NOT-INITIALIZED": "Not initialized yet",
+				"MOVE-UP": "Move this input above",
+				"MOVE-DOWN": "Move this input below"
 			},
 			"FIELDSET": {
 				"ADD-INPUT": "Add input",

dmp-frontend/src/assets/i18n/tr.json

@@ -533,7 +533,9 @@
 				"ADD-VISIBILITY-RULE": "Add Conditional Question",
 				"DELETE-INPUT": "Delete this input",
 				"PREVIEW": "Preview",
-				"NOT-INITIALIZED": "Not initialized yet"
+				"NOT-INITIALIZED": "Not initialized yet",
+				"MOVE-UP": "Move this input above",
+				"MOVE-DOWN": "Move this input below"
 			},
 			"FIELDSET": {
 				"ADD-INPUT": "Add input",

dmp-frontend/src/styles.scss

@@ -296,3 +296,8 @@
 	border: 1px solid #f44336 !important;
 }
 // end of CSS for <angular-editor> (@kolkov/angular-editor)
+
+/* Transition Group */
+.list-move {
+	transition: transform 1s;
+}