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 {