tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

visual sections for date selection

Browse Source
This commit is contained in:
Tykayn 2021-02-09 11:27:01 +01:00 committed by tykayn
parent 2edb828aa3
commit de679721d1
4 changed files with 199 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/features/administration/administration.module.ts
View File

@ -17,6 +17,7 @@ import { KindSelectComponent } from './form/kind-select/kind-select.component';
import { BaseConfigComponent } from './form/base-config/base-config.component'; import { BaseConfigComponent } from './form/base-config/base-config.component';
import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.component'; import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.component';
import { CalendarModule } from 'primeng'; import { CalendarModule } from 'primeng';
import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -40,6 +41,7 @@ import { CalendarModule } from 'primeng';
FormsModule, FormsModule,
TranslateModule.forChild({ extend: true }), TranslateModule.forChild({ extend: true }),
DateValueAccessorModule, DateValueAccessorModule,
DragDropModule,
], ],
}) })
export class AdministrationModule {} export class AdministrationModule {}

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

@ -1,199 +1,215 @@
<div class="date-selection"> <div class="date-selection">
<!-- <form [formGroup]="form">--> <!-- <form [formGroup]="form">-->
<!-- interval--> <!-- interval-->
<button
<!-- <section *ngIf="showDateInterval" class="date-interval form-row">--> (click)="showDateInterval = !showDateInterval"
<!-- <button--> [ngClass]="{ active: showDateInterval }"
<!-- (click)="showDateInterval = !showDateInterval"--> class="btn btn--primary"
<!-- [ngClass]="{ active: showDateInterval }"--> id="toggle_interval_button"
<!-- class="btn btn&#45;&#45;primary"--> >
<!-- id="toggle_interval_button"--> <i class="fa fa-clock-o" aria-hidden="true"></i>
<!-- >--> <span>
<!-- <i class="fa fa-clock-o" aria-hidden="true"></i>--> {{ 'dates.add_interval' | translate }}
<!-- {{ 'dates.add_interval' | translate }}--> </span>
<!-- </button>--> </button>
<!-- <h2>{{ 'dates.add_interval' | translate }}</h2>--> <fieldset *ngIf="showDateInterval" class="date-interval form-row is-boxed">
<!-- <div class="columns">--> <h2>{{ 'dates.add_interval' | translate }}</h2>
<!-- <div class="column">--> <div class="columns">
<!-- {{ 'dates.interval_propose' | translate }}--> <div class="column">
<!-- </div>--> {{ 'dates.interval_propose' | translate }}
<!-- <div class="column">--> </div>
<!-- <label for="start_interval" class="hidden">start</label>--> <div class="column">
<!-- <input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />--> <label for="start_interval" class="hidden">start</label>
<!-- </div>--> <input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />
<!-- </div>--> </div>
<!-- <div class="columns">--> </div>
<!-- <div class="column">--> <div class="columns">
<!-- {{ 'dates.interval_span' | translate }}--> <div class="column">
<!-- </div>--> {{ 'dates.interval_span' | translate }}
<!-- <div class="column">--> </div>
<!-- <label for="end_interval" class="hidden">end</label>--> <div class="column">
<!-- <input id="end_interval" formControlName="endDateInterval" type="date" />--> <label for="end_interval" class="hidden">end</label>
<!-- </div>--> <input id="end_interval" formControlName="endDateInterval" type="date" />
<!-- </div>--> </div>
<!-- <button (click)="addIntervalOfDates()" class="btn btn-block btn&#45;&#45;primary">--> </div>
<!-- <i class="fa fa-plus" aria-hidden="true"></i>--> <button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
<!-- {{ 'dates.interval_button' | translate }}--> <i class="fa fa-plus" aria-hidden="true"></i>
<!-- {{ intervalDays }}--> {{ 'dates.interval_button' | translate }}
<!-- {{ 'dates.interval_button_dates' | translate }}--> {{ intervalDays }}
<!-- </button>--> {{ 'dates.interval_button_dates' | translate }}
<!-- </section>--> </button>
</fieldset>
<!-- </form>--> <!-- </form>-->
<div class="dates-list"> <div class="dates-list">
<div class="title"> <div class="range-container is-boxed">
<span class="count-dates"> <div class="actions columns">
{{ timeList.length }} <div class="column">
</span> <button
<span class="count-dates-txt"> class="btn"
{{ 'dates.count_time' | translate }} [class.is-primary]="form.value.configuration.hasSeveralHours"
(pour chaque jour) (click)="
</span> form.patchValue({
</div> configuration: { hasSeveralHours: !form.value.configuration.hasSeveralHours }
<div class="actions"> })
<button "
class="btn" >
[class.is-primary]="form.value.configuration.hasSeveralHours" <i class="fa fa-clock-o"></i>
(click)="
form.patchValue({ configuration: { hasSeveralHours: !form.value.configuration.hasSeveralHours } })
"
>
<i class="fa fa-clock-o"></i>
<span> horaires différentes à chaque jour </span> <span> horaires différentes à chaque jour </span>
</button> </button>
<button </div>
(click)="addTime()" <div class="column">
*ngIf="!form.value.configuration.hasSeveralHours" <button
class="btn btn--primary" (click)="addTime()"
id="add_time_button" *ngIf="form.value.configuration.hasSeveralHours"
> class="btn btn--primary"
<i class="fa fa-plus" aria-hidden="true"></i> id="add_time_button"
<span> >
{{ 'dates.add_time' | translate }} <i class="fa fa-plus" aria-hidden="true"></i>
</span> <span>
</button> {{ 'dates.add_time' | translate }}
<button </span>
(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>
</button> </button>
<button <button
(click)="addTimeToDate(choice, id)" (click)="removeAllTimes()"
*ngIf="'true' === allowSeveralHours" *ngIf="form.value.configuration.hasSeveralHours"
class="btn btn--primary" 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> </button>
<div *ngIf="'true' === allowSeveralHours" class="several-times"> <button
<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice"> (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 <input
[(ngModel)]="timeItem.literal" [(ngModel)]="time.literal"
name="dateTime_{{ id }}_Choices_{{ idTime }}" name="timeChoices_{{ id }}"
id="dateTime_{{ id }}_Choices_{{ idTime }}"
type="text" 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> <i class="fa fa-times" aria-hidden="true"></i>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="column calendar-column"> </div>
<button class="btn" (click)="selectionKind = 'range'" [class.is-primary]="selectionKind == 'range'">
plage de jours
</button>
<button <hr />
class="btn" <div class="main-box is-boxed">
(click)="selectionKind = 'multiple'" <div class="columns">
[class.is-primary]="selectionKind == 'multiple'" <div class="column">
> <!-- ajouter une date-->
jours séparés <button class="btn btn--primary" (click)="addChoice()">
</button> {{ 'dates.add' | translate }}
<button class="btn" (click)="setDefaultDatesForInterval()"> </button>
réinitialiser</button </div>
><button class="btn" (click)="dateCalendarEnum = [today]"> <div class="column">
vider <span class="count-dates title">
</button> {{ dateList.length }}
<div class="text-center"> </span>
<br /> <span>
<p-calendar {{ 'dates.count_dates' | translate }}
[(ngModel)]="dateCalendarEnum" </span>
[locale]="'calendar_widget' | translate" </div>
[inline]="true" </div>
[selectionMode]="selectionKind"
></p-calendar> <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> </div>
</div> </div>

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

@ -5,4 +5,9 @@
.btn + .btn { .btn + .btn {
margin-left: 1em; margin-left: 1em;
} }
.is-boxed {
border: 1px solid #ddd;
padding: 1em;
margin: 1em 0;
}
} }

2
src/app/features/administration/form/form.component.ts
View File

@ -83,7 +83,7 @@ export class FormComponent implements OnInit {
allowComments: [true, [Validators.required]], allowComments: [true, [Validators.required]],
password: [this.uuidService.getUUID(), [Validators.required]], password: [this.uuidService.getUUID(), [Validators.required]],
dateCreated: [creationDate, [Validators.required]], dateCreated: [creationDate, [Validators.required]],
hasSeveralHours: [false, [Validators.required]], hasSeveralHours: [true, [Validators.required]],
hasMaxCountOfAnswers: [true, [Validators.required, Validators.min(1)]], hasMaxCountOfAnswers: [true, [Validators.required, Validators.min(1)]],
}), }),
startDateInterval: ['', [Validators.required]], startDateInterval: ['', [Validators.required]],