popup to set all hours at once

src/app/core/services/poll.service.ts

@@ -21,6 +21,7 @@ import { DateUtilitiesService } from './date.utilities.service';
 import { Owner } from '../models/owner.model';
 import { Stack } from '../models/stack.model';
 import { Vote } from '../models/vote.model';
+import { defaultTimeOfDay } from '../../../../mocks/old-stuff/config/defaultConfigs';
 
 @Injectable({
 	providedIn: 'root',
@@ -34,7 +35,7 @@ export class PollService implements Resolve<Poll> {
 	public intervalDays: number = 1;
 	public intervalDaysDefault = 7;
 	public dateChoiceList: DateChoice[] = []; // sets of days as strings, config to set identical time for days in a special days poll
-	public timeList: TimeSlices[] = []; // ranges of time expressed as strings
+	public timeList: TimeSlices[] = [{ literal: '' }]; // ranges of time expressed as strings
 	public previousRouteName: string = '/administration';
 	public nextRouteName: string = '/administration/step/2';
 	public step_current: number = 1;

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

@@ -37,58 +37,8 @@
 				</section>
 			</div>
 		</div>
-		<section class="same-time-slices">
-			<section class="same-time-slices" *ngIf="pollService.form.value.hasSeveralHours">
-				<h2 class="title is-2">
-					{{ 'hours.title' | translate }}
-				</h2>
 
-				<section class="proposals" *ngIf="environment.creation_display_proposals_time_slices">
+		<div class="section copy-paste" *ngIf="environment.display_time_actions_more">
-					<div class="time-slices-proposals rounded-block">
-						<div
-							class="button is-rounded"
-							*ngFor="let text of timeSlicesProposals"
-							(click)="addPreselect(text.literal)"
-						>
-							{{ text.literal }}
-						</div>
-					</div>
-				</section>
-				<div *ngFor="let timeSlice of pollService.timeList; index as id" class="time-choice">
-					<label for="timeList_{{ id }}"> {{ 'hours.element' | translate }} {{ id + 1 }} </label>
-					<input
-						class="input is-fullwidth"
-						type="text"
-						id="timeList_{{ id }}"
-						(change)="applyTimeSlicesToDateChoices()"
-						[(ngModel)]="timeSlice.literal"
-					/>
-					<button class="button is-block" (click)="pollService.timeList.splice(id, 1)">
-						<i class="fa fa-trash"></i> {{ 'choices.delete' | translate }}
-					</button>
-				</div>
-				<div class="title" *ngIf="pollService.timeList.length">
-					<span class="count-dates">
-						{{ pollService.timeList.length }}
-					</span>
-					<span class="count-dates-txt">
-						{{ 'dates.count_time' | translate }}
-						<!--						(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>
-			</section>
-		</section>
-
-		<div class="section copy-paste">
 			<div class="actions">
 				<button
 					(click)="pollService.removeAllTimes()"
@@ -111,11 +61,106 @@
 			</div>
 		</div>
 	</div>
-	<p>
+	<button id="apply_same_hour" class="has-text-primary button is-fullwidth" (click)="openModal()">
 		{{ 'hours.apply_same' | translate }}
-	</p>
+	</button>
 </div>
+<!--	modale pour quitter la création-->
+<p-dialog
+	[modal]="true"
+	[(visible)]="display_same_hours_dialog"
+	[breakpoints]="{ '960px': '75vw' }"
+	[style]="{ width: '50vw' }"
+	[draggable]="false"
+	[showHeader]="false"
+	[resizable]="false"
+>
+	<ng-template pTemplate="titlebar">
+		<div class="columns">
+			<div class="column">
+				<h1 class="title">
+					{{ 'hours.modal.title' | translate }}
+				</h1>
+			</div>
+			<div class="column is-narrow">
+				<button
+					id="close_dialog"
+					class="button cancel-button-reject pull-right has-text-right"
+					(click)="closeModalAndFocusOnOpenModalButton()"
+				>
+					{{ 'SENTENCES.Close' | translate }} <img class="icon" aria-hidden="true" src="assets/icons/x.svg" />
+				</button>
+			</div>
+		</div>
 
+		<section class="same-time-slices">
+			<section class="same-time-slices">
+				<section class="proposals" *ngIf="environment.creation_display_proposals_time_slices">
+					<div class="time-slices-proposals">
+						<div
+							class="button is-rounded"
+							*ngFor="let text of timeSlicesProposals"
+							(click)="addPreselect(text.literal)"
+						>
+							{{ text.literal }}
+						</div>
+					</div>
+				</section>
+				<div *ngFor="let timeSlice of pollService.timeList; index as id" class="time-choice">
+					<label for="timeList_{{ id }}"> {{ 'hours.element' | translate }} {{ id + 1 }} </label>
+
+					<div class="columns">
+						<div class="column">
+							<input
+								class="input is-fullwidth"
+								type="text"
+								id="timeList_{{ id }}"
+								[(ngModel)]="timeSlice.literal"
+							/>
+						</div>
+						<div class="column is-narrow">
+							<button class="button is-block has-no-border" (click)="pollService.timeList.splice(id, 1)">
+								<i class="fa fa-trash"></i>
+							</button>
+						</div>
+					</div>
+				</div>
+				<div class="title" *ngIf="environment.display_count_timelist && pollService.timeList.length">
+					<span class="count-dates">
+						{{ pollService.timeList.length }}
+					</span>
+					<span class="count-dates-txt">
+						{{ 'dates.count_time' | translate }}
+					</span>
+				</div>
+				<button
+					(click)="pollService.addTime()"
+					*ngIf="false == pollService.allowSeveralHours"
+					class="button is-block is-fullwidth has-text-left has-no-border"
+					id="add_time_button"
+				>
+					<img class="icon" aria-hidden="true" src="assets/icons/plus-circle.svg" />
+					{{ 'dates.add_time' | translate }}
+				</button>
+			</section>
+		</section>
+	</ng-template>
+	<ng-template pTemplate="footer">
+		<div class="columns">
+			<div class="column has-no-padding">
+				<button
+					class="button is-primary is-fullwidth pull-right has-text-white"
+					(click)="applyTimeSlicesToDateChoices()"
+				>
+					{{ 'hours.modal.validate' | translate }}
+				</button>
+				<button class="button is-outlined pull-right" (click)="closeModalAndFocusOnOpenModalButton()">
+					{{ 'SENTENCES.Cancel' | translate }}
+				</button>
+			</div>
+		</div>
+	</ng-template>
+</p-dialog>
 <app-nav-steps
 	[next_step_number]="pollService.step_current + 1"
 	[previous_step_number]="pollService.step_current - 1"

src/app/features/administration/form/steps/step-four/step-four.component.scss

@@ -1,6 +1,22 @@
 @import '../../../../../../styles/variables';
 @import '../../../../../../styles/dev-utilities/helpers';
 
-.time-choice {
+.button {
-	@extend .rounded-block;
+	color: $primary_color;
+
+	.icon {
+		margin-right: 1rem;
+		fill: $primary_color;
+	}
+}
+
+#close_dialog {
+	border: 0;
+	color: $primary !important;
+
+	.icon {
+		margin-left: 1rem;
+		height: 1.5em;
+		width: 1.5em;
+	}
 }

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

@@ -1,4 +1,4 @@
-import { Component, Inject, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
 import { PollService } from '../../../../../core/services/poll.service';
 import { environment } from '../../../../../../environments/environment';
 import { Router } from '@angular/router';
@@ -22,11 +22,13 @@ export class StepFourComponent implements OnInit {
 	form: any;
 	showSameTimeSlices: boolean = false;
 	timeSlicesProposals: TimeSlices[] = timeSlicesProposals;
+	display_same_hours_dialog: boolean = false;
 
 	constructor(
 		private dateUtilitiesService: DateUtilitiesService,
 		private router: Router,
 		private toastService: ToastService,
+		private cd: ChangeDetectorRef,
 		@Inject(DOCUMENT) private document: any,
 		private storageService: StorageService,
 		public pollService: PollService
@@ -90,7 +92,32 @@ export class StepFourComponent implements OnInit {
 	applyTimeSlicesToDateChoices() {
 		let timeSlicesToApply = this.pollService.timeList;
 		this.pollService.dateChoiceList.forEach((elem) => {
-			return (elem.timeSlices = timeSlicesToApply);
+			return (elem.timeSlices = Object.create(timeSlicesToApply));
 		});
+		this.closeModalAndFocusOnOpenModalButton();
+	}
+
+	/**
+	 * on modal close, focus on the close button for accessibility
+	 */
+	closeModalAndFocusOnOpenModalButton() {
+		this.display_same_hours_dialog = false;
+		let buttonClose = this.document.querySelector('#apply_same_hour');
+		if (buttonClose) {
+			buttonClose.focus();
+		}
+	}
+
+	/**
+	 * open the modal to set the same timeslices to all days
+	 */
+	openModal() {
+		this.display_same_hours_dialog = true;
+		this.cd.detectChanges();
+		let buttonClose = this.document.querySelector('#close_dialog');
+		console.log('openModal', buttonClose);
+		if (buttonClose) {
+			buttonClose.focus();
+		}
 	}
 }

src/assets/i18n/FR.json

@@ -100,7 +100,7 @@
         "empty": "Aucune plage horaire",
         "reinit": "Réinitialiser",
         "modal": {
-            "title": "Choisissez les horaires ou options à appliquer à toutes les dates",
+            "title": "Choisissez les horaires à appliquer à toutes les dates",
             "validate": "Appliquer"
         }
     },

src/environments/environment.prod.ts

@@ -24,7 +24,7 @@ export const environment = {
 	autofill_participation: false,
 	autoSendNewPoll: false,
 	creation_display_admin_url: false,
-	creation_display_hour_per_day: false, // display or not the ability to choose time slices different per day
+	creation_display_hour_per_day: true, // display or not the ability to choose time slices different per day
 	creation_display_proposals_time_slices: false,
 	creation_email_is_required: true,
 	display_header_create_button: false,
@@ -89,4 +89,6 @@ export const environment = {
 	display_validation_errors: false,
 	propose_expire_input: false,
 	defaultLanguage: 'FR',
+	display_count_timelist: false,
+	display_time_actions_more: false,
 };

src/environments/environment.ts

@@ -25,7 +25,7 @@ export const environment = {
 	autofill_participation: false,
 	autoSendNewPoll: false,
 	creation_display_admin_url: false,
-	creation_display_hour_per_day: false, // display or not the ability to choose time slices different per day
+	creation_display_hour_per_day: true, // display or not the ability to choose time slices different per day
 	creation_display_proposals_time_slices: false,
 	creation_email_is_required: true,
 	display_header_create_button: false,
@@ -49,6 +49,8 @@ export const environment = {
 	display_validation_errors: false,
 	propose_expire_input: false,
 	defaultLanguage: 'FR',
+	display_count_timelist: false,
+	display_time_actions_more: false,
 };
 
 // Included with Angular CLI.