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

166 lines
5.5 KiB
HTML

<app-stepper [step_current]="4" [step_max]="pollService.step_max"></app-stepper>
<div class="step">
<div class="min-height">
<app-errors-list [form]="pollService.form"></app-errors-list>
<div class="custom-day-time-slices" *ngIf="1">
<h1 class="title is-2">
{{ 'hours.title' | translate }}
</h1>
<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">
<label for="dateChoices_{{ id }}"> {{ 'hours.element' | translate }} {{ id + 1 }} </label>
<input class="input" type="text" id="dateChoices_{{ id }}" [(ngModel)]="timeSlice.literal" />
<button
[attr.aria-label]="'choices.delete' | translate"
class="has-no-border delete-hour"
(click)="dayChoice.timeSlices.splice(id, 1)"
>
<!-- {{ 'choices.delete' | translate }}-->
<img src="assets/icons/trash-2.svg" class="icon is-filtered-icon-primary" />
</button>
</div>
<div class="add-time-choice">
<button
class="has-text-primary has-no-border is-large-button has-text-left has-background-transparent has-background-plus has-background-icon-left is-filtered-icon-primary"
(click)="addChoiceForDay(dayChoice)"
>
{{ 'hours.add' | translate }}
</button>
</div>
</section>
</div>
</div>
<div class="section more-bulk-actions" *ngIf="environment.display_time_actions_more">
<div class="actions">
<button
(click)="pollService.removeAllTimes()"
*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
class="is-warning marged"
id="remove_time_button"
>
<i class="fa fa-trash" aria-hidden="true"></i>
{{ 'hours.empty' | translate }}
</button>
<button
(click)="pollService.resetTimes()"
*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
class="is-warning marged"
id="reset_time_button"
>
<i class="fa fa-refresh" aria-hidden="true"></i>
{{ 'hours.reinit' | translate }}
</button>
</div>
</div>
</div>
<button id="apply_same_hour" class="has-text-primary button is-fullwidth" (click)="openModal()">
{{ 'hours.apply_same' | translate }}
</button>
</div>
<!-- modale pour quitter la création-->
<p-dialog
[modal]="true"
[(visible)]="display_same_hours_dialog"
[breakpoints]="{ '960px': '454px' }"
[style]="{ width: '454px' }"
[draggable]="false"
[showHeader]="false"
[resizable]="false"
>
<ng-template pTemplate="titlebar">
<div class="columns">
<div class="column"></div>
<div class="column is-narrow">
<button
id="close_dialog"
class="button cancel-button-reject pull-right has-text-right has-no-border"
(click)="closeModalAndFocusOnOpenModalButton()"
>
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
</button>
</div>
</div>
<h1 class="title">
{{ 'hours.modal.title' | translate }}
</h1>
<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 time-slice-list-of-a-day"
>
<label for="timeList_{{ id }}"> {{ 'hours.element' | translate }} {{ id + 1 }} </label>
<input class="input" type="text" id="timeList_{{ id }}" [(ngModel)]="timeSlice.literal" />
<button
[attr.aria-label]="'choices.delete' | translate"
class="has-no-border delete-hour"
(click)="pollService.timeList.splice(id, 1)"
>
<!-- {{ 'choices.delete' | translate }}-->
<img src="assets/icons/trash-2.svg" class="icon is-filtered-icon-primary" />
</button>
</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>
<div class="add-time-choice">
<button
class="has-text-primary has-no-border is-large-button has-text-left has-background-transparent has-background-plus has-background-icon-left is-filtered-icon-primary"
(click)="pollService.addTime()"
id="add_time_button"
>
{{ 'hours.add' | translate }}
</button>
</div>
</section>
</section>
</ng-template>
<ng-template pTemplate="footer">
<div class="columns">
<div class="column has-no-padding time-slice-list-of-a-day">
<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"
></app-nav-steps>