change on description-template-editor ui for easier reordering

dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.html

@@ -27,6 +27,7 @@
 			</div>
 		</div>
 	</div>
+	<ng-container *ngIf="!reorderingMode">
 		<div style="position: relative;" class="col-12" *ngIf="hasFocus" [@fade-in]>
 			<div *ngIf="showDescription" class="mb-4">
 				<h5 style="font-weight: bold" class="row">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}</h5>
@@ -268,4 +269,5 @@
 				</div>
 			</div>
 		</ng-container>
+	</ng-container>
 </div>

dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.ts

@@ -50,6 +50,7 @@ export class DescriptionTemplateEditorCompositeFieldComponent extends BaseCompon
 
 	@Input() numbering: string;
 	@Input() hasFocus: boolean = false;
+	@Input() reorderingMode: boolean = false;
 	@ViewChild("inputs") inputs: TransitionGroupComponent;
 	@Input() validationErrorModel: ValidationErrorModel;
 	@Input() validationRootPath: string;
@@ -483,9 +484,6 @@ export class DescriptionTemplateEditorCompositeFieldComponent extends BaseCompon
 
 	}
 
-
-
-
 	addNewInput(type: DescriptionTemplateFieldType) {
 
 		const fieldsArray = this.form.get('fields') as UntypedFormArray;

dmp-frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.html

@@ -49,18 +49,18 @@
 		<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">
-			<div [id]="idprefix+fieldset.get('id').value" style="position: absolute; top: -7em; visibility: hidden;">
+			<div [id]="idprefix+fieldset.get('id').value" style="position: absolute; top: -13.5em; 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-card-header *ngIf="(fieldset.get('id').value === selectedFieldSetId) && !viewOnly && reorderingMode">
 							<mat-icon class="handle"
 								style="display:inline-block; margin: 0px auto; cursor: grab;transform: rotate(90deg); opacity: 0.3;">drag_indicator</mat-icon>
 						</mat-card-header>
-						<app-description-template-editor-composite-field-component [form]="fieldset"
+						<app-description-template-editor-composite-field-component [reorderingMode]="reorderingMode" [form]="fieldset"
 							[viewOnly]="viewOnly" [numbering]="numbering + '.'+ (i+1)"
 							[hasFocus]="fieldset.get('id').value === selectedFieldSetId"
 							[datasetProfileId]="datasetProfileId"
@@ -107,6 +107,20 @@
 										translate}}</span>
 								</div>
 							</li>
+							<li *ngIf="!reorderingMode" class="mli" (click)="enableReordering()">
+								<div class="action-list-item">
+										<mat-icon class="action-list-icon">unfold_more</mat-icon>
+										<span class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.REORDER-QUESTION' |
+											translate}}</span>
+								</div>
+							</li>
+							<li *ngIf="reorderingMode" class="mli" (click)="exitReordering()">
+								<div class="action-list-item">
+									<mat-icon class="action-list-icon">unfold_more</mat-icon>
+									<span class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.EXIT-REORDERING-MODE' |
+										translate}}</span>
+								</div>
+							</li>
 						</ul>
 					</nav>
 				</div>

dmp-frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.ts

@@ -33,6 +33,7 @@ export class DescriptionTemplateEditorSectionFieldSetComponent implements OnInit
 
 
 	idprefix = "id";
+	reorderingMode = false;
 	readonly dragula_prefix = "dragulaid";
 	private subs = new Subscription();
 	private FIELDSETS = 'FIELDSETS';
@@ -228,6 +229,16 @@ export class DescriptionTemplateEditorSectionFieldSetComponent implements OnInit
 		}, 200);
 	}
 
+	enableReordering(): void {
+		this.reorderingMode = true;
+		this.scroller.next(this.selectedFieldSetId);
+	}
+
+	exitReordering(): void {
+		this.reorderingMode = false;
+		this.scroller.next(this.selectedFieldSetId);
+	}
+
 	private _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry {
 		if (!tocentries) {
 			return null;

dmp-frontend/src/app/ui/description/listing/description-listing.component.ts

@@ -331,7 +331,6 @@ export class DescriptionListingComponent extends BaseComponent implements OnInit
 
 	public restartTour(): void {
 		this.setDashboardTourDmpText();
-		console.log('lalala');
 		this.setDashboardTourDescriptionText();
 		console.log(this.dashboardTour);
 		this.guidedTourService.startTour(this.dashboardTour);

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

@@ -557,7 +557,9 @@
 				"GENERAL-TOOLS": "Questions tools",
 				"NEW-INPUT-SET": "Add Question",
 				"CLONE": "Clone",
-				"DELETE": "Delete"
+				"DELETE": "Delete",
+				"REORDER-QUESTION": "Reorder",
+				"EXIT-REORDERING-MODE": "I am done reordering"
 			}
 		},
 		"ACTIONS": {