From 7ca87e28b44887138b0b8b05bde47cca9024d990 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Tue, 9 Feb 2021 12:10:10 +0100 Subject: [PATCH] drag and drop time interval --- .../date-select/date-select.component.html | 129 ++++++++++-------- .../date-select/date-select.component.scss | 22 +++ .../form/date-select/date-select.component.ts | 30 ++-- 3 files changed, 111 insertions(+), 70 deletions(-) diff --git a/src/app/features/administration/form/date-select/date-select.component.html b/src/app/features/administration/form/date-select/date-select.component.html index 1b4716bf..978c5a1b 100644 --- a/src/app/features/administration/form/date-select/date-select.component.html +++ b/src/app/features/administration/form/date-select/date-select.component.html @@ -1,48 +1,47 @@
- - - -
-

{{ 'dates.add_interval' | translate }}

-
-
- {{ 'dates.interval_propose' | translate }} -
-
- - -
-
-
-
- {{ 'dates.interval_span' | translate }} -
-
- - -
-
- -
- - +
+

{{ 'dates.add_interval' | translate }}

+
+
+ {{ 'dates.interval_propose' | translate }} +
+
+ + +
+
+
+
+ {{ 'dates.interval_span' | translate }} +
+
+ + +
+
+ +
+
-
+
-
-
-
- - - +
+
+
+
+
+ + +
+
+ +
+
-
+
@@ -207,6 +217,7 @@ [(ngModel)]="dateCalendarEnum" [locale]="'calendar_widget' | translate" [inline]="true" + [monthNavigator]="true" [selectionMode]="selectionKind" >
diff --git a/src/app/features/administration/form/date-select/date-select.component.scss b/src/app/features/administration/form/date-select/date-select.component.scss index 9dc786a0..3038c94b 100644 --- a/src/app/features/administration/form/date-select/date-select.component.scss +++ b/src/app/features/administration/form/date-select/date-select.component.scss @@ -10,4 +10,26 @@ padding: 1em; margin: 1em 0; } + + .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); + border: 2px solid #ccc; + } + + .cdk-drag-placeholder { + * { + opacity: 0; + } + background: #ccc; + } + + .cdk-drag-animating { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); + } + .movable { + cursor: move; + } } diff --git a/src/app/features/administration/form/date-select/date-select.component.ts b/src/app/features/administration/form/date-select/date-select.component.ts index f23cbc4c..e92cd427 100644 --- a/src/app/features/administration/form/date-select/date-select.component.ts +++ b/src/app/features/administration/form/date-select/date-select.component.ts @@ -7,8 +7,8 @@ import { DateUtilities } from '../../../old-stuff/config/DateUtilities'; import { ApiService } from '../../../../core/services/api.service'; import { Router } from '@angular/router'; import { DOCUMENT } from '@angular/common'; -import { DateChoice, otherDefaultDates } from '../../../old-stuff/config/defaultConfigs'; -import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; +import { DateChoice, moreTimeOfDay, otherDefaultDates, TimeSlices } from '../../../old-stuff/config/defaultConfigs'; +import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop'; import { TranslateService } from '@ngx-translate/core'; @Component({ @@ -27,10 +27,10 @@ export class DateSelectComponent implements OnInit { endDateInterval: string; intervalDays: any; intervalDaysDefault = 7; - dateList: any = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll - timeList: DateChoice[] = otherDefaultDates; // ranges of time expressed as strings - dateCalendarEnum: any = [new Date('02/09/2021')]; - selectionKind: string = 'range'; + dateList: DateChoice[] = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll + timeList: TimeSlices[] = moreTimeOfDay; // ranges of time expressed as strings + dateCalendarEnum: Date[] = [new Date('02/09/2021')]; + selectionKind = 'range'; constructor( private fb: FormBuilder, @@ -46,7 +46,7 @@ export class DateSelectComponent implements OnInit { ) {} ngOnInit(): void { - this.setDefaultDatesForInterval(); + // this.setDefaultDatesForInterval(); } get choices(): FormArray { @@ -122,8 +122,6 @@ export class DateSelectComponent implements OnInit { addTime() { this.timeList.push({ literal: '', - timeList: [], - date_object: new Date(), }); } @@ -247,7 +245,17 @@ export class DateSelectComponent implements OnInit { this.addChoice('abricot'); } - drop(event: CdkDragDrop) { - moveItemInArray(this.form.value.choices, event.previousIndex, event.currentIndex); + dropTimeItem(event: any) { + // moveItemInArray(this.timeList, event.previousIndex, event.currentIndex); + if (event.previousContainer === event.container) { + moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); + } else { + transferArrayItem( + event.previousContainer.data, + event.container.data, + event.previousIndex, + event.currentIndex + ); + } } }