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

popup to set all hours at once

Browse Source
This commit is contained in:
Tykayn 2022-02-04 14:38:59 +01:00 committed by tykayn
parent d9042c1993
commit 2ba8e10524
7 changed files with 154 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;

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

@ -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"

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

@ -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;
}
}

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

@ -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();
}
}
}

2
src/assets/i18n/FR.json
View File

@ -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"
}
},

4
src/environments/environment.prod.ts
View File

@ -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,
};

4
src/environments/environment.ts
View File

@ -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.