Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

drag and drop time interval

Browse Source
This commit is contained in:
Tykayn 2021-02-09 12:10:10 +01:00 committed by tykayn
parent de679721d1
commit 7ca87e28b4
3 changed files with 111 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
src/app/features/administration/form/date-select/date-select.component.html
View File

@ -1,48 +1,47 @@
<div class="date-selection"> <div class="date-selection">
<!-- <form [formGroup]="form">--> <form [formGroup]="form">
<!-- interval--> <!-- interval-->
<button <button
(click)="showDateInterval = !showDateInterval" (click)="showDateInterval = !showDateInterval"
[ngClass]="{ active: showDateInterval }" [ngClass]="{ active: showDateInterval }"
class="btn btn--primary" class="btn btn--primary"
id="toggle_interval_button" id="toggle_interval_button"
> >
<i class="fa fa-clock-o" aria-hidden="true"></i> <i class="fa fa-clock-o" aria-hidden="true"></i>
<span> <span>
{{ 'dates.add_interval' | translate }} {{ 'dates.add_interval' | translate }}
</span> </span>
</button>
<fieldset *ngIf="showDateInterval" class="date-interval form-row is-boxed">
<h2>{{ 'dates.add_interval' | translate }}</h2>
<div class="columns">
<div class="column">
{{ 'dates.interval_propose' | translate }}
</div>
<div class="column">
<label for="start_interval" class="hidden">start</label>
<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />
</div>
</div>
<div class="columns">
<div class="column">
{{ 'dates.interval_span' | translate }}
</div>
<div class="column">
<label for="end_interval" class="hidden">end</label>
<input id="end_interval" formControlName="endDateInterval" type="date" />
</div>
</div>
<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
<i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.interval_button' | translate }}
{{ intervalDays }}
{{ 'dates.interval_button_dates' | translate }}
</button> </button>
</fieldset> <fieldset *ngIf="showDateInterval" class="date-interval form-row is-boxed">
<h2>{{ 'dates.add_interval' | translate }}</h2>
<!-- </form>--> <div class="columns">
<div class="column">
{{ 'dates.interval_propose' | translate }}
</div>
<div class="column">
<label for="start_interval" class="hidden">start</label>
<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />
</div>
</div>
<div class="columns">
<div class="column">
{{ 'dates.interval_span' | translate }}
</div>
<div class="column">
<label for="end_interval" class="hidden">end</label>
<input id="end_interval" formControlName="endDateInterval" type="date" />
</div>
</div>
<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
<i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.interval_button' | translate }}
{{ intervalDays }}
{{ 'dates.interval_button_dates' | translate }}
</button>
</fieldset>
</form>
<div class="dates-list"> <div class="dates-list">
<div class="range-container is-boxed"> <fieldset class="range-container is-boxed">
<div class="actions columns"> <div class="actions columns">
<div class="column"> <div class="column">
<button <button
@ -102,29 +101,40 @@
</span> </span>
<span class="count-dates-txt"> <span class="count-dates-txt">
{{ 'dates.count_time' | translate }} {{ 'dates.count_time' | translate }}
(pour chaque jour) (identique pour chaque jour)
</span> </span>
</div> </div>
<div *ngIf="!form.value.configuration.hasSeveralHours" class="identical-dates"> <div class="identical-dates" cdkDropListGroup>
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)"> <div
<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag> class="time-list"
<label for="timeChoices_{{ id }}"> cdkDropList
<i class="fa fa-clock-o" aria-hidden="true"></i> [cdkDropListData]="timeList"
</label> (cdkDropListDropped)="dropTimeItem($event)"
<input >
[(ngModel)]="time.literal" <div *ngFor="let time of timeList; index as time_id" class="time-choice" cdkDrag>
name="timeChoices_{{ id }}" <div class="columns">
type="text" <div class="column movable">
id="timeChoices_{{ id }}" <label [for]="'timeChoices_' + time_id">
/> <i class="fa fa-clock-o" aria-hidden="true"></i>
<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning"> </label>
<i class="fa fa-times" aria-hidden="true"></i> <input
</button> [(ngModel)]="time.literal"
name="timeChoices_{{ time_id }}"
type="text"
id="timeChoices_{{ time_id }}"
/>
</div>
<div class="column">
<button (click)="timeList.splice(time_id, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </fieldset>
<hr /> <hr />
<div class="main-box is-boxed"> <div class="main-box is-boxed">
@ -207,6 +217,7 @@
[(ngModel)]="dateCalendarEnum" [(ngModel)]="dateCalendarEnum"
[locale]="'calendar_widget' | translate" [locale]="'calendar_widget' | translate"
[inline]="true" [inline]="true"
[monthNavigator]="true"
[selectionMode]="selectionKind" [selectionMode]="selectionKind"
></p-calendar> ></p-calendar>
</div> </div>

22
src/app/features/administration/form/date-select/date-select.component.scss
View File

@ -10,4 +10,26 @@
padding: 1em; padding: 1em;
margin: 1em 0; 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;
}
} }

30
src/app/features/administration/form/date-select/date-select.component.ts
View File

@ -7,8 +7,8 @@ import { DateUtilities } from '../../../old-stuff/config/DateUtilities';
import { ApiService } from '../../../../core/services/api.service'; import { ApiService } from '../../../../core/services/api.service';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
import { DateChoice, otherDefaultDates } from '../../../old-stuff/config/defaultConfigs'; import { DateChoice, moreTimeOfDay, otherDefaultDates, TimeSlices } from '../../../old-stuff/config/defaultConfigs';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
@Component({ @Component({
@ -27,10 +27,10 @@ export class DateSelectComponent implements OnInit {
endDateInterval: string; endDateInterval: string;
intervalDays: any; intervalDays: any;
intervalDaysDefault = 7; intervalDaysDefault = 7;
dateList: any = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll dateList: DateChoice[] = 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 timeList: TimeSlices[] = moreTimeOfDay; // ranges of time expressed as strings
dateCalendarEnum: any = [new Date('02/09/2021')]; dateCalendarEnum: Date[] = [new Date('02/09/2021')];
selectionKind: string = 'range'; selectionKind = 'range';
constructor( constructor(
private fb: FormBuilder, private fb: FormBuilder,
@ -46,7 +46,7 @@ export class DateSelectComponent implements OnInit {
) {} ) {}
ngOnInit(): void { ngOnInit(): void {
this.setDefaultDatesForInterval(); // this.setDefaultDatesForInterval();
} }
get choices(): FormArray { get choices(): FormArray {
@ -122,8 +122,6 @@ export class DateSelectComponent implements OnInit {
addTime() { addTime() {
this.timeList.push({ this.timeList.push({
literal: '', literal: '',
timeList: [],
date_object: new Date(),
}); });
} }
@ -247,7 +245,17 @@ export class DateSelectComponent implements OnInit {
this.addChoice('abricot'); this.addChoice('abricot');
} }
drop(event: CdkDragDrop<string[]>) { dropTimeItem(event: any) {
moveItemInArray(this.form.value.choices, event.previousIndex, event.currentIndex); // 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
);
}
} }
} }