popup to set all hours at once
This commit is contained in:
tykayn
parent
d9042c1993
commit
2ba8e10524
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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="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="section copy-paste" *ngIf="environment.display_time_actions_more">
|
||||
<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"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,22 @@
|
|||
@import '../../../../../../styles/variables';
|
||||
@import '../../../../../../styles/dev-utilities/helpers';
|
||||
|
||||
.time-choice {
|
||||
@extend .rounded-block;
|
||||
.button {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Reference in New Issue