diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html
index 9b101d49..d567b80f 100644
--- a/src/app/features/administration/form/form.component.html
+++ b/src/app/features/administration/form/form.component.html
@@ -64,14 +64,21 @@
-
diff --git a/src/app/features/administration/form/form.component.scss b/src/app/features/administration/form/form.component.scss
index 460083a2..c64b7a4c 100644
--- a/src/app/features/administration/form/form.component.scss
+++ b/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);
+ }
}
diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts
index dae7ffea..5fc98f27 100644
--- a/src/app/features/administration/form/form.component.ts
+++ b/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
) {
+ // 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 {