time list display manually

Signed-off-by: tykayn <15d65f2f-0b14-4f70-bf34-e130180ed62b@users.tedomum.net>
This commit is contained in:
tykayn 2022-02-15 12:11:21 +01:00
parent 7db8bf3f56
commit 1b53fe7bbf
10 changed files with 66 additions and 51 deletions

View File

@ -1,13 +1,7 @@
<div class="day-list-container"> <div class="day-list-container">
<div <div class="days-list" [ngClass]="{ 'colored-weekend-days': environment.enable_colored_weekend_days }">
class="days-list"
cdkDropList
[ngClass]="{ 'colored-weekend-days': environment.enable_colored_weekend_days }"
[cdkDropListData]="dateChoices"
(cdkDropListDropped)="dropDayItem($event)"
>
<div class="date-choice-container" *ngFor="let choice of dateChoices; index as id"> <div class="date-choice-container" *ngFor="let choice of dateChoices; index as id">
<div class="date-choice" cdkDrag [ngClass]="{ 'day-weekend': isWeekendDay(choice.date_input) }"> <div class="date-choice" [ngClass]="{ 'day-weekend': isWeekendDay(choice.date_input) }">
<div class="top"> <div class="top">
<label class="pull-left" for="dateChoices_{{ id }}"> <label class="pull-left" for="dateChoices_{{ id }}">
{{ 'dates.element' | translate }} {{ id + 1 }} {{ 'dates.element' | translate }} {{ id + 1 }}
@ -22,24 +16,17 @@
type="date" type="date"
/> />
</div> </div>
<hr />
<div class="bottom"> <div class="bottom">
<div *ngIf="hasSeveralHours" class="several-times">
<app-time-list [timeSlices]="choice.timeSlices" [prefix_choice_id]="id"></app-time-list>
</div>
</div>
<hr />
<div class="button delete-date is-block" (click)="dateChoices.splice(id, 1)"> <div class="button delete-date is-block" (click)="dateChoices.splice(id, 1)">
<img class="icon" aria-hidden="true" src="assets/icons/trash.svg" /> <img class="icon" aria-hidden="true" src="assets/icons/trash.svg" />
{{ 'dates.remove' | translate }} {{ 'dates.remove' | translate }}
</div> </div>
<div *ngIf="hasSeveralHours" class="several-times">
<br />
<app-time-list [timeSlices]="choice.timeSlices" [prefix_choice_id]="id"></app-time-list>
<!-- <div class="text-right">-->
<!-- <button (click)="addTimeToDate(choice, id)" class="button is-primary">-->
<!-- <i class="fa fa-plus"></i>-->
<!-- {{ 'dates.add_time' | translate }}-->
<!-- <i class="fa fa-clock-o"></i>-->
<!-- </button>-->
<!-- </div>-->
</div>
</div>
</div> </div>
</div> </div>
<div class="add_date"> <div class="add_date">

View File

@ -25,17 +25,6 @@
min-width: 9ch; min-width: 9ch;
} }
.icon {
margin-right: 1ch;
margin-left: 1ch;
display: inline-block;
}
.several-times {
padding-left: 2em;
width: 96.5%;
}
.date-choice { .date-choice {
margin-bottom: 0.5em; margin-bottom: 0.5em;
border-radius: 0.25em; border-radius: 0.25em;
@ -49,10 +38,6 @@
font-weight: 600; font-weight: 600;
} }
input {
margin-bottom: 1rem;
}
input, input,
.button { .button {
width: 100%; width: 100%;
@ -97,7 +82,6 @@
background: transparent; background: transparent;
text-align: left; text-align: left;
margin-right: 0; margin-right: 0;
margin-left: -2rem;
.fa, .fa,
.icon { .icon {

View File

@ -1,11 +1,11 @@
<div class="time-list-container" cdkDropList [cdkDropListData]="timeSlices" (cdkDropListDropped)="dropTimeItem($event)"> <div class="time-list-container">
<div *ngFor="let time of timeSlices; index as id" class="time-choice"> <div *ngFor="let time of timeSlices; index as id" class="time-choice">
<label class="icon button is-default" for="choice_{{ prefix_choice_id }}_timeChoices_{{ id }}"> <label class="label is-default" for="choice_{{ prefix_choice_id }}_timeChoices_{{ id }}">
{{ 'hours.element' | translate }} {{ id }} {{ 'hours.element' | translate }} {{ id }}
<i class="fa fa-arrows-v" aria-hidden="true"></i>
</label> </label>
<input <input
class="time-list-item" class="time-list-item input is-fullwidth"
[(ngModel)]="time.literal" [(ngModel)]="time.literal"
name="timeChoices_{{ id }}" name="timeChoices_{{ id }}"
(keyup.arrowDown)="focusOnNextField(id)" (keyup.arrowDown)="focusOnNextField(id)"
@ -16,8 +16,8 @@
type="text" type="text"
id="choice_{{ prefix_choice_id }}_timeChoices_{{ id }}" id="choice_{{ prefix_choice_id }}_timeChoices_{{ id }}"
/> />
<button (click)="removeTime(id)" class="btn btn-warning"> <button (click)="removeTime(id)" class="button remove-item">
<i class="fa fa-times" aria-hidden="true"></i> <img class="icon" src="assets/icons/x.svg" alt="{{ 'nav.remove' | translate }}" />
</button> </button>
</div> </div>
</div> </div>

View File

@ -1,9 +1,24 @@
:host { .time-list-container {
margin-top: 0.5em; margin-top: 0.5em;
padding-left: 1rem;
.icon { .icon {
margin-right: 1ch; margin-right: 1ch;
} }
.time-list-item { .time-list-item {
width: 80%; width: 60%;
margin-bottom: 1rem;
display: inline;
input {
margin-right: 1ch;
}
.button {
display: inline-block;
}
}
.remove-item {
height: 2.5rem;
margin-left: 1rem;
float: right;
} }
} }

View File

@ -19,18 +19,20 @@
</button> </button>
<!-- choix spécialement pour les dates--> <!-- choix spécialement pour les dates-->
<div class="calendar" *ngIf="pollService.mode_calendar"> <div class="calendar" *ngIf="pollService.mode_calendar" [ngClass]="{ 'hide-back-button': hideBackButton }">
<p-calendar <p-calendar
[(ngModel)]="pollService.calendar" [(ngModel)]="pollService.calendar"
firstDayOfWeek="1" firstDayOfWeek="1"
selectionMode="multiple" selectionMode="multiple"
inputId="multiple" inputId="multiple"
showButtonBar="true" [showButtonBar]="true"
[locale]="'calendar_widget' | translate" [locale]="'calendar_widget' | translate"
[disabledDates]="pollService.disabled_dates" [minDate]="minDate"
[inline]="true" [inline]="true"
[showWeek]="false" [showWeek]="false"
></p-calendar> (onMonthChange)="(onMonthChangeCustom)"
>
</p-calendar>
</div> </div>
<div class="text-date-list" *ngIf="!pollService.mode_calendar"> <div class="text-date-list" *ngIf="!pollService.mode_calendar">

View File

@ -4,9 +4,11 @@
.ui-datepicker table td.ui-datepicker-today > span.ui-state-active { .ui-datepicker table td.ui-datepicker-today > span.ui-state-active {
background-color: $primary-color !important; background-color: $primary-color !important;
} }
.calendar { .calendar {
margin-top: 1em; margin-top: 1em;
} }
.text-date-list { .text-date-list {
margin-top: 1em; margin-top: 1em;
} }
@ -14,11 +16,21 @@
.is-secondary { .is-secondary {
border-color: $primary-color; border-color: $primary-color;
color: $primary-color; color: $primary-color;
&:hover { &:hover {
background: $primary_color; background: $primary_color;
color: $white; color: $white;
} }
} }
.date-input-selector { .date-input-selector {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.hide-back-button {
p-calendar {
.p-datepicker-prev {
display: none !important;
}
}
}

View File

@ -1,6 +1,6 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { PollService } from '../../../../../core/services/poll.service'; import { PollService } from '../../../../../core/services/poll.service';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; import { CdkDragDrop } from '@angular/cdk/drag-drop';
import { environment } from '../../../../../../environments/environment'; import { environment } from '../../../../../../environments/environment';
import { Title } from '@angular/platform-browser'; import { Title } from '@angular/platform-browser';
@ -15,8 +15,17 @@ export class StepThreeComponent implements OnInit {
@Input() @Input()
form: any; form: any;
public environment = environment; public environment = environment;
minDate: any = new Date();
hideBackButton: boolean = true;
onMonthChangeCustom($event: any) {
// disable nav if new month is in past
console.log('$event', $event);
}
constructor(public pollService: PollService, private titleService: Title) { constructor(public pollService: PollService, private titleService: Title) {
this.hideBackButton = this.areWeOnCurrentMonth();
this.pollService.step_current = 3; this.pollService.step_current = 3;
this.step_max = this.pollService.step_max; this.step_max = this.pollService.step_max;
this.titleService.setTitle( this.titleService.setTitle(
@ -44,4 +53,8 @@ export class StepThreeComponent implements OnInit {
this.convertDateInputs(); this.convertDateInputs();
this.pollService.mode_calendar = !this.pollService.mode_calendar; this.pollService.mode_calendar = !this.pollService.mode_calendar;
} }
private areWeOnCurrentMonth() {
return true;
}
} }

View File

@ -19,6 +19,7 @@
"step": "Step", "step": "Step",
"on": "on", "on": "on",
"no_title": "(no title)", "no_title": "(no title)",
"remove": "Remove",
"save": "Save" "save": "Save"
}, },
"PAGE_NOT_FOUND": { "PAGE_NOT_FOUND": {

View File

@ -19,6 +19,7 @@
"on": "sur", "on": "sur",
"no_title": "(aucun titre)", "no_title": "(aucun titre)",
"next": "Suivant", "next": "Suivant",
"remove": "Supprimer",
"save": "Enregistrer" "save": "Enregistrer"
}, },
"PAGE_NOT_FOUND": { "PAGE_NOT_FOUND": {

View File

@ -67,7 +67,7 @@ input,
select, select,
textarea { textarea {
@extend .clickable; @extend .clickable;
margin-bottom: 2rem; margin-bottom: 1rem;
padding: 0.5rem; padding: 0.5rem;
&:active, &:active,