mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
drag and drop time interval
This commit is contained in:
tykayn
parent
de679721d1
commit
7ca87e28b4
@ -1,48 +1,47 @@
|
||||
<div class="date-selection">
|
||||
<!-- <form [formGroup]="form">-->
|
||||
<!-- interval-->
|
||||
<button
|
||||
(click)="showDateInterval = !showDateInterval"
|
||||
[ngClass]="{ active: showDateInterval }"
|
||||
class="btn btn--primary"
|
||||
id="toggle_interval_button"
|
||||
>
|
||||
<i class="fa fa-clock-o" aria-hidden="true"></i>
|
||||
<span>
|
||||
{{ 'dates.add_interval' | translate }}
|
||||
</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 }}
|
||||
<form [formGroup]="form">
|
||||
<!-- interval-->
|
||||
<button
|
||||
(click)="showDateInterval = !showDateInterval"
|
||||
[ngClass]="{ active: showDateInterval }"
|
||||
class="btn btn--primary"
|
||||
id="toggle_interval_button"
|
||||
>
|
||||
<i class="fa fa-clock-o" aria-hidden="true"></i>
|
||||
<span>
|
||||
{{ 'dates.add_interval' | translate }}
|
||||
</span>
|
||||
</button>
|
||||
</fieldset>
|
||||
|
||||
<!-- </form>-->
|
||||
<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>
|
||||
</fieldset>
|
||||
</form>
|
||||
<div class="dates-list">
|
||||
<div class="range-container is-boxed">
|
||||
<fieldset class="range-container is-boxed">
|
||||
<div class="actions columns">
|
||||
<div class="column">
|
||||
<button
|
||||
@ -102,29 +101,40 @@
|
||||
</span>
|
||||
<span class="count-dates-txt">
|
||||
{{ 'dates.count_time' | translate }}
|
||||
(pour chaque jour)
|
||||
(identique pour chaque jour)
|
||||
</span>
|
||||
</div>
|
||||
<div *ngIf="!form.value.configuration.hasSeveralHours" class="identical-dates">
|
||||
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
|
||||
<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>
|
||||
<label for="timeChoices_{{ id }}">
|
||||
<i class="fa fa-clock-o" aria-hidden="true"></i>
|
||||
</label>
|
||||
<input
|
||||
[(ngModel)]="time.literal"
|
||||
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 class="identical-dates" cdkDropListGroup>
|
||||
<div
|
||||
class="time-list"
|
||||
cdkDropList
|
||||
[cdkDropListData]="timeList"
|
||||
(cdkDropListDropped)="dropTimeItem($event)"
|
||||
>
|
||||
<div *ngFor="let time of timeList; index as time_id" class="time-choice" cdkDrag>
|
||||
<div class="columns">
|
||||
<div class="column movable">
|
||||
<label [for]="'timeChoices_' + time_id">
|
||||
<i class="fa fa-clock-o" aria-hidden="true"></i>
|
||||
</label>
|
||||
<input
|
||||
[(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>
|
||||
</fieldset>
|
||||
|
||||
<hr />
|
||||
<div class="main-box is-boxed">
|
||||
@ -207,6 +217,7 @@
|
||||
[(ngModel)]="dateCalendarEnum"
|
||||
[locale]="'calendar_widget' | translate"
|
||||
[inline]="true"
|
||||
[monthNavigator]="true"
|
||||
[selectionMode]="selectionKind"
|
||||
></p-calendar>
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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<string[]>) {
|
||||
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
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user