mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
visual sections for date selection
This commit is contained in:
tykayn
parent
2edb828aa3
commit
de679721d1
@ -17,6 +17,7 @@ import { KindSelectComponent } from './form/kind-select/kind-select.component';
|
||||
import { BaseConfigComponent } from './form/base-config/base-config.component';
|
||||
import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.component';
|
||||
import { CalendarModule } from 'primeng';
|
||||
import { DragDropModule } from '@angular/cdk/drag-drop';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@ -40,6 +41,7 @@ import { CalendarModule } from 'primeng';
|
||||
FormsModule,
|
||||
TranslateModule.forChild({ extend: true }),
|
||||
DateValueAccessorModule,
|
||||
DragDropModule,
|
||||
],
|
||||
})
|
||||
export class AdministrationModule {}
|
||||
|
||||
@ -1,199 +1,215 @@
|
||||
<div class="date-selection">
|
||||
<!-- <form [formGroup]="form">-->
|
||||
<!-- interval-->
|
||||
|
||||
<!-- <section *ngIf="showDateInterval" class="date-interval form-row">-->
|
||||
<!-- <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>-->
|
||||
<!-- {{ 'dates.add_interval' | translate }}-->
|
||||
<!-- </button>-->
|
||||
<!-- <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>-->
|
||||
<!-- </section>-->
|
||||
<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 }}
|
||||
</button>
|
||||
</fieldset>
|
||||
|
||||
<!-- </form>-->
|
||||
<div class="dates-list">
|
||||
<div class="title">
|
||||
<span class="count-dates">
|
||||
{{ timeList.length }}
|
||||
</span>
|
||||
<span class="count-dates-txt">
|
||||
{{ 'dates.count_time' | translate }}
|
||||
(pour chaque jour)
|
||||
</span>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button
|
||||
class="btn"
|
||||
[class.is-primary]="form.value.configuration.hasSeveralHours"
|
||||
(click)="
|
||||
form.patchValue({ configuration: { hasSeveralHours: !form.value.configuration.hasSeveralHours } })
|
||||
"
|
||||
>
|
||||
<i class="fa fa-clock-o"></i>
|
||||
<div class="range-container is-boxed">
|
||||
<div class="actions columns">
|
||||
<div class="column">
|
||||
<button
|
||||
class="btn"
|
||||
[class.is-primary]="form.value.configuration.hasSeveralHours"
|
||||
(click)="
|
||||
form.patchValue({
|
||||
configuration: { hasSeveralHours: !form.value.configuration.hasSeveralHours }
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="fa fa-clock-o"></i>
|
||||
|
||||
<span> horaires différentes à chaque jour </span>
|
||||
</button>
|
||||
<button
|
||||
(click)="addTime()"
|
||||
*ngIf="!form.value.configuration.hasSeveralHours"
|
||||
class="btn btn--primary"
|
||||
id="add_time_button"
|
||||
>
|
||||
<i class="fa fa-plus" aria-hidden="true"></i>
|
||||
<span>
|
||||
{{ 'dates.add_time' | translate }}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
(click)="removeAllTimes()"
|
||||
*ngIf="'false' === allowSeveralHours"
|
||||
class="btn btn--warning"
|
||||
id="remove_time_button"
|
||||
>
|
||||
<i class="fa fa-trash" aria-hidden="true"></i>
|
||||
<span>
|
||||
Aucune plage horaire
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
(click)="resetTimes()"
|
||||
*ngIf="'false' === allowSeveralHours"
|
||||
class="btn btn--warning"
|
||||
id="reset_time_button"
|
||||
>
|
||||
<i class="fa fa-refresh" aria-hidden="true"></i>
|
||||
<span>
|
||||
réinitialiser
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- <div *ngIf="'false' === allowSeveralHours" 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>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<hr />
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<!-- ajouter une date-->
|
||||
<button class="btn btn--primary" (click)="addChoice()">
|
||||
{{ 'dates.add' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<span class="count-dates title">
|
||||
{{ dateList.length }}
|
||||
</span>
|
||||
<span>
|
||||
{{ 'dates.count_dates' | translate }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div *ngFor="let choice of dateList; index as id" class="date-choice">
|
||||
{{ id }})
|
||||
<input
|
||||
[(ngModel)]="choice.date_object"
|
||||
name="dateChoices_{{ id }}"
|
||||
id="dateChoices_{{ id }}"
|
||||
useValueAsDate
|
||||
type="date"
|
||||
/>
|
||||
<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
|
||||
<i class="fa fa-times" aria-hidden="true"></i>
|
||||
<span> horaires différentes à chaque jour </span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<button
|
||||
(click)="addTime()"
|
||||
*ngIf="form.value.configuration.hasSeveralHours"
|
||||
class="btn btn--primary"
|
||||
id="add_time_button"
|
||||
>
|
||||
<i class="fa fa-plus" aria-hidden="true"></i>
|
||||
<span>
|
||||
{{ 'dates.add_time' | translate }}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
(click)="addTimeToDate(choice, id)"
|
||||
*ngIf="'true' === allowSeveralHours"
|
||||
class="btn btn--primary"
|
||||
(click)="removeAllTimes()"
|
||||
*ngIf="form.value.configuration.hasSeveralHours"
|
||||
class="btn btn--warning"
|
||||
id="remove_time_button"
|
||||
>
|
||||
{{ 'dates.add_time' | translate }}
|
||||
<i class="fa fa-trash" aria-hidden="true"></i>
|
||||
<span>
|
||||
Aucune plage horaire
|
||||
</span>
|
||||
</button>
|
||||
<div *ngIf="'true' === allowSeveralHours" class="several-times">
|
||||
<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
|
||||
<button
|
||||
(click)="resetTimes()"
|
||||
*ngIf="form.value.configuration.hasSeveralHours"
|
||||
class="btn btn--warning"
|
||||
id="reset_time_button"
|
||||
>
|
||||
<i class="fa fa-refresh" aria-hidden="true"></i>
|
||||
<span>
|
||||
réinitialiser
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="range-time" *ngIf="form.value.configuration.hasSeveralHours">
|
||||
<div class="title">
|
||||
<span class="count-dates">
|
||||
{{ timeList.length }}
|
||||
</span>
|
||||
<span class="count-dates-txt">
|
||||
{{ 'dates.count_time' | translate }}
|
||||
(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)]="timeItem.literal"
|
||||
name="dateTime_{{ id }}_Choices_{{ idTime }}"
|
||||
id="dateTime_{{ id }}_Choices_{{ idTime }}"
|
||||
[(ngModel)]="time.literal"
|
||||
name="timeChoices_{{ id }}"
|
||||
type="text"
|
||||
id="timeChoices_{{ id }}"
|
||||
/>
|
||||
<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
|
||||
<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
|
||||
<i class="fa fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column calendar-column">
|
||||
<button class="btn" (click)="selectionKind = 'range'" [class.is-primary]="selectionKind == 'range'">
|
||||
plage de jours
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn"
|
||||
(click)="selectionKind = 'multiple'"
|
||||
[class.is-primary]="selectionKind == 'multiple'"
|
||||
>
|
||||
jours séparés
|
||||
</button>
|
||||
<button class="btn" (click)="setDefaultDatesForInterval()">
|
||||
réinitialiser</button
|
||||
><button class="btn" (click)="dateCalendarEnum = [today]">
|
||||
vider
|
||||
</button>
|
||||
<div class="text-center">
|
||||
<br />
|
||||
<p-calendar
|
||||
[(ngModel)]="dateCalendarEnum"
|
||||
[locale]="'calendar_widget' | translate"
|
||||
[inline]="true"
|
||||
[selectionMode]="selectionKind"
|
||||
></p-calendar>
|
||||
<hr />
|
||||
<div class="main-box is-boxed">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<!-- ajouter une date-->
|
||||
<button class="btn btn--primary" (click)="addChoice()">
|
||||
{{ 'dates.add' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<span class="count-dates title">
|
||||
{{ dateList.length }}
|
||||
</span>
|
||||
<span>
|
||||
{{ 'dates.count_dates' | translate }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<h2>Dates</h2>
|
||||
<div *ngFor="let choice of dateList; index as id" class="date-choice">
|
||||
{{ id }})
|
||||
<input
|
||||
[(ngModel)]="choice.date_object"
|
||||
name="dateChoices_{{ id }}"
|
||||
id="dateChoices_{{ id }}"
|
||||
useValueAsDate
|
||||
type="date"
|
||||
/>
|
||||
<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
|
||||
<i class="fa fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button
|
||||
(click)="addTimeToDate(choice, id)"
|
||||
*ngIf="form.value.configuration.hasSeveralHours"
|
||||
class="btn btn--primary"
|
||||
>
|
||||
{{ 'dates.add_time' | translate }}
|
||||
</button>
|
||||
<div *ngIf="form.value.configuration.hasSeveralHours" class="several-times">
|
||||
plage horaire distincte
|
||||
<br />
|
||||
<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
|
||||
<input
|
||||
[(ngModel)]="timeItem.literal"
|
||||
name="dateTime_{{ id }}_Choices_{{ idTime }}"
|
||||
id="dateTime_{{ id }}_Choices_{{ idTime }}"
|
||||
type="text"
|
||||
/>
|
||||
<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
|
||||
<i class="fa fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column calendar-column">
|
||||
<button class="btn" (click)="selectionKind = 'range'" [class.is-primary]="selectionKind == 'range'">
|
||||
plage de jours
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn"
|
||||
(click)="selectionKind = 'multiple'"
|
||||
[class.is-primary]="selectionKind == 'multiple'"
|
||||
>
|
||||
jours séparés
|
||||
</button>
|
||||
<button class="btn" (click)="setDefaultDatesForInterval()">
|
||||
réinitialiser</button
|
||||
><button class="btn" (click)="dateCalendarEnum = [today]">
|
||||
vider
|
||||
</button>
|
||||
<div class="text-center">
|
||||
<br />
|
||||
<p-calendar
|
||||
[(ngModel)]="dateCalendarEnum"
|
||||
[locale]="'calendar_widget' | translate"
|
||||
[inline]="true"
|
||||
[selectionMode]="selectionKind"
|
||||
></p-calendar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,4 +5,9 @@
|
||||
.btn + .btn {
|
||||
margin-left: 1em;
|
||||
}
|
||||
.is-boxed {
|
||||
border: 1px solid #ddd;
|
||||
padding: 1em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -83,7 +83,7 @@ export class FormComponent implements OnInit {
|
||||
allowComments: [true, [Validators.required]],
|
||||
password: [this.uuidService.getUUID(), [Validators.required]],
|
||||
dateCreated: [creationDate, [Validators.required]],
|
||||
hasSeveralHours: [false, [Validators.required]],
|
||||
hasSeveralHours: [true, [Validators.required]],
|
||||
hasMaxCountOfAnswers: [true, [Validators.required, Validators.min(1)]],
|
||||
}),
|
||||
startDateInterval: ['', [Validators.required]],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user