adding reodering of choices beginning

src/app/features/administration/form/form.component.html

@@ -64,14 +64,21 @@
 		</div>
 
 		<div *ngIf="'false' === allowSeveralHours" class="identical-dates">
-			<div *ngFor="let time of timeList; index as id" class="time-choice">
+			<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
-				<label for="timeChoices_{{ id }}">
+				<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>
-					<i class="fa fa-clock-o" aria-hidden="true"></i>
+					<label for="timeChoices_{{ id }}">
-				</label>
+						<i class="fa fa-clock-o" aria-hidden="true"></i>
-				<input [(ngModel)]="time.literal" name="timeChoices_{{ id }}" type="text" id="timeChoices_{{ id }}" />
+					</label>
-				<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
+					<input
-					<i class="fa fa-times" aria-hidden="true"></i>
+						[(ngModel)]="time.literal"
-				</button>
+						name="timeChoices_{{ id }}"
+						type="text"
+						id="timeChoices_{{ id }}"
+					/>
+					<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
+						<i class="fa fa-times" aria-hidden="true"></i>
+					</button>
+				</div>
 			</div>
 		</div>
 		<hr />

src/app/features/administration/form/form.component.scss

@@ -27,4 +27,52 @@
 			margin-right: 0;
 		}
 	}
+
+	.example-list {
+		width: 500px;
+		max-width: 100%;
+		border: solid 1px #ccc;
+		min-height: 60px;
+		display: block;
+		background: white;
+		border-radius: 4px;
+		overflow: hidden;
+	}
+
+	.example-box {
+		padding: 20px 10px;
+		border-bottom: solid 1px #ccc;
+		color: rgba(0, 0, 0, 0.87);
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		box-sizing: border-box;
+		cursor: move;
+		background: white;
+		font-size: 14px;
+	}
+
+	.cdk-drag-preview {
+		box-sizing: border-box;
+		border-radius: 4px;
+		box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+			0 3px 14px 2px rgba(0, 0, 0, 0.12);
+	}
+
+	.cdk-drag-placeholder {
+		opacity: 0;
+	}
+
+	.cdk-drag-animating {
+		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+	}
+
+	.example-box:last-child {
+		border: none;
+	}
+
+	.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+	}
 }

src/app/features/administration/form/form.component.ts

@@ -8,6 +8,7 @@ import { PollService } from '../../../core/services/poll.service';
 import { DateUtilities } from '../../old-stuff/config/DateUtilities';
 import { DOCUMENT } from '@angular/common';
 import { DateChoice, otherDefaultDates } from '../../old-stuff/config/defaultConfigs';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 
 @Component({
 	selector: 'app-admin-form',
@@ -40,7 +41,9 @@ export class FormComponent implements OnInit {
 		private apiService: ApiService,
 		@Inject(DOCUMENT) private document: any
 	) {}
-
+	drop(event: CdkDragDrop<string[]>) {
+		// moveItemInArray(this.choices, event.previousIndex, event.currentIndex);
+	}
 	get choices(): FormArray {
 		return this.form.get('choices') as FormArray;
 	}
@@ -172,6 +175,7 @@ export class FormComponent implements OnInit {
 			areResultsPublic: true,
 			expiracyNumberOfDays: 60,
 		});
+		this.automaticSlug();
 	}
 
 	askInitFormDefault(): void {