tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

hide time slices per day select, colors

This commit is contained in:
Tykayn 2021-11-30 18:01:18 +01:00 committed by tykayn
parent ab6cb0288d
commit f1403fe2a0
12 changed files with 76 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/core/services/poll.service.ts
View File

@ -140,7 +140,7 @@ export class PollService implements Resolve<Poll> {
hasMaxCountOfAnswers: [300, [Validators.required]],
useVoterUniqueLink: [false, [Validators.required]],
voterEmailList: ['', []],
hasSeveralHours: [false, []],
hasSeveralHours: [true, []],
hideResults: [false, []],
allowNewDateTime: [true, [Validators.required]],
});

99
src/app/features/administration/form/steps/step-four/step-four.component.html
View File

@ -2,61 +2,55 @@
<div class="min-height">
<app-stepper [step_current]="4" [step_max]="pollService.step_max"></app-stepper>
<app-errors-list [form]="pollService.form"></app-errors-list>
<h2 class="title is-2">
Choisissez les horaires
</h2>
<div
class="days-list-having-separated-time-slices rounded-block"
*ngFor="let dayChoice of pollService.dateChoiceList; index as day_id"
>
<div class="heading day-choice">
{{ dayChoice.date_object | date }}
<div class="custom-day-time-slices" *ngIf="environment.creation_display_hour_per_day">
<h2 class="title is-2">
Choisissez les horaires
</h2>
<div
class="days-list-having-separated-time-slices rounded-block"
*ngFor="let dayChoice of pollService.dateChoiceList; index as day_id"
>
<div class="heading day-choice">
{{ dayChoice.date_object | date }}
</div>
<section class="time-slice-list-of-a-day">
<div *ngFor="let timeSlice of dayChoice.timeSlices; index as id" class="time-choice padded">
<label for="dateChoices_{{ id }}"> Horaire / option {{ id + 1 }} </label>
<input
class="input is-fullwidth"
type="text"
id="dateChoices_{{ id }}"
[(ngModel)]="timeSlice.literal"
/>
<button class="button input is-full" (click)="pollService.timeList.splice(id, 1)">
<i class="fa fa-trash"></i> supprimer
</button>
</div>
<div class="add-time-choice">
<button (click)="addChoiceForDay(dayChoice)">
<i class="fa fa-plus"></i>
Ajouter horaire / option
</button>
</div>
</section>
</div>
<section class="time-slice-list-of-a-day">
<div *ngFor="let timeSlice of dayChoice.timeSlices; index as id" class="time-choice padded">
<label for="dateChoices_{{ id }}"> Horaire / option {{ id + 1 }} </label>
<input
class="input is-fullwidth"
type="text"
id="dateChoices_{{ id }}"
[(ngModel)]="timeSlice.literal"
/>
<button class="button input is-full" (click)="pollService.timeList.splice(id, 1)">
<i class="fa fa-trash"></i> supprimer
</button>
</div>
<div class="add-time-choice">
<button (click)="addChoiceForDay(dayChoice)">
<i class="fa fa-plus"></i>
Ajouter horaire / option
</button>
</div>
</section>
</div>
<section class="same-time-slices">
<button class="is-outlined is-primary" (click)="toggleHasSeveralHours()">
Appliquer le même horaire / option à toutes les dates
</button>
<section class="same-time-slices rounded-block" *ngIf="pollService.form.value.hasSeveralHours">
<!-- <button class="is-outlined is-primary" (click)="toggleHasSeveralHours()">-->
<!-- Appliquer le même horaire / option à toutes les dates-->
<!-- </button>-->
<section class="same-time-slices" *ngIf="pollService.form.value.hasSeveralHours">
<h3 class="title is-3">
Choisissez les horaires ou options à appliquer à toutes les dates
</h3>
<button
(click)="pollService.addTime()"
*ngIf="false == pollService.allowSeveralHours"
class="button is-primary is-block is-fullwidth"
id="add_time_button"
>
<i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.add_time' | translate }}
</button>
<section class="proposals">
<section class="proposals" *ngIf="environment.creation_display_proposals_time_slices">
<h3 class="title is-3">
Propositions de créneaux horaires
</h3>
<div class="time-slices-proposals rounded-block">
<div
class="button is-rounded"
@ -88,6 +82,15 @@
(pour chaque jour)
</span>
</div>
<button
(click)="pollService.addTime()"
*ngIf="false == pollService.allowSeveralHours"
class="button is-primary is-block is-fullwidth"
id="add_time_button"
>
<i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.add_time' | translate }}
</button>
<button class="is-primary button" (click)="applyTimeSlicesToDateChoices()">
Appliquer ces créneaux
</button>
@ -124,11 +127,7 @@
</button>
</div>
<div class="column">
<button
class="btn is-primary is-fullwidth"
[routerLink]="['/administration/step/5']"
[disabled]="!pollService.form.valid"
>
<button class="btn is-primary is-fullwidth" [routerLink]="['/administration/step/5']">
Suivant
</button>
</div>

5
src/app/features/administration/form/steps/step-four/step-four.component.ts
View File

@ -14,8 +14,9 @@ import { ToastService } from '../../../../../core/services/toast.service';
styleUrls: ['./step-four.component.scss'],
})
export class StepFourComponent implements OnInit {
urlPrefix: any;
advancedDisplayEnabled: boolean = environment.advanced_options_display;
public urlPrefix: any;
public environment = environment;
public advancedDisplayEnabled: boolean = environment.advanced_options_display;
@Input()
step_max: any;
@Input()

2
src/app/features/administration/form/steps/step-one/step-one.component.html
View File

@ -1,6 +1,6 @@
<div class="step step-container">
<form class="min-height" [formGroup]="pollService.form">
<app-stepper [step_current]="1" [step_max]="5"></app-stepper>
<app-stepper [step_current]="1" [step_max]="pollService.step_max"></app-stepper>
<section class="poll-title">
<h2 class="title is-2">
{{ 'creation.choose_title' | translate }}

4
src/app/features/administration/form/steps/step-one/step-one.component.ts
View File

@ -21,7 +21,9 @@ export class StepOneComponent implements OnInit {
@Inject(DOCUMENT) private document: any,
private router: Router,
private confirmationService: ConfirmationService
) {}
) {
this.step_max = this.pollService.step_max;
}
ngOnInit(): void {
this.pollService.step_current = 1;

6
src/app/features/administration/form/steps/step-six/step-six.component.html
View File

@ -22,11 +22,7 @@
</button>
</div>
<div class="column">
<button
class="btn is-primary is-fullwidth"
[routerLink]="['/administration/step/7']"
[disabled]="!pollService.form.valid"
>
<button class="btn is-primary is-fullwidth" [routerLink]="['/administration/step/7']">
Suivant
</button>
</div>

6
src/app/features/administration/form/steps/step-three/step-three.component.html
View File

@ -2,7 +2,11 @@
<app-stepper [step_current]="3" [step_max]="pollService.step_max"></app-stepper>
<app-errors-list [form]="pollService.form"></app-errors-list>
<!-- sélecteur d'interface-->
<button class="button" (click)="changeDateInputMode()" [ngClass]="{ 'is-primary': !pollService.mode_calendar }">
<button
class="button is-fullwidth"
(click)="changeDateInputMode()"
[ngClass]="{ 'is-primary': !pollService.mode_calendar }"
>
<span *ngIf="pollService.mode_calendar"> <i class="fa fa-pencil"></i> Saisir les dates manuellement </span>
<span *ngIf="!pollService.mode_calendar">
<i class="fa fa-calendar-o"></i> Saisir les dates dans le calendrier

12
src/app/features/administration/form/steps/step-two/step-two.component.html
View File

@ -1,7 +1,7 @@
<div class="step step-container form-field poll-kind">
<form action="#" [formGroup]="pollService.form">
<div class="min-height">
<app-stepper [step_current]="2" [step_max]="5"></app-stepper>
<app-stepper [step_current]="2" [step_max]="pollService.step_max"></app-stepper>
<app-errors-list [form]="pollService.form"></app-errors-list>
<h2 class="title is-2">
{{ 'creation.want' | translate }}
@ -11,7 +11,10 @@
<div class="column">
<div
class="button input-radio is-fullwidth"
[ngClass]="{ 'is-selected is-primary': pollService.form.controls.isAboutDate.value }"
[ngClass]="{
'is-selected has-background-primary has-text-white':
pollService.form.controls.isAboutDate.value
}"
(click)="pollService.form.controls.isAboutDate.setValue(true)"
>
<i class="fa fa-calendar"></i>
@ -24,7 +27,10 @@
<div class="column">
<div
class="button input-radio is-fullwidth"
[ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }"
[ngClass]="{
'is-selected has-background-primary has-text-white': !pollService.form.controls
.isAboutDate.value
}"
(click)="pollService.form.controls.isAboutDate.setValue(false)"
>
<i class="fa fa-list-ul"></i>

1
src/app/features/administration/form/steps/step-two/step-two.component.ts
View File

@ -40,6 +40,7 @@ export class StepTwoComponent implements OnInit {
) {
this.form = this.pollService.form;
this.pollService.step_current = 2;
this.step_max = this.pollService.step_max;
}
get choices(): FormArray {

2
src/app/shared/components/feedback/feedback.component.scss
View File

@ -1,5 +1,5 @@
:host {
position: fixed;
position: relative;
bottom: 4em;
left: 1em;
color: white;

1
src/environments/environment.ts
View File

@ -25,6 +25,7 @@ export const environment = {
autofill_participation: false,
autofill_default_timeslices: false,
creation_email_is_required: true,
creation_display_proposals_time_slices: false,
creation_display_admin_url: false,
creation_display_hour_per_day: false, // display or not the ability to choose time slices different per day
showDemoWarning: false,

2
src/styles/partials/_responsive.scss
View File

@ -1,7 +1,7 @@
// small screens
@media (min-width: 600px) {
.feedback-container {
position: fixed;
//position: fixed;
}
}
// wide screen like desktop