time list display manually

Signed-off-by: tykayn <15d65f2f-0b14-4f70-bf34-e130180ed62b@users.tedomum.net>

src/app/features/administration/form/date/list/day/day-list.component.html

@@ -1,13 +1,7 @@
 <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" cdkDrag [ngClass]="{ 'day-weekend': isWeekendDay(choice.date_input) }">
+			<div class="date-choice" [ngClass]="{ 'day-weekend': isWeekendDay(choice.date_input) }">
 				<div class="top">
 					<label class="pull-left" for="dateChoices_{{ id }}">
 						{{ 'dates.element' | translate }} {{ id + 1 }}
@@ -22,24 +16,17 @@
 						type="date"
 					/>
 				</div>
-				<hr />
+
 				<div class="bottom">
-					<div class="button delete-date is-block" (click)="dateChoices.splice(id, 1)">
-						<img class="icon" aria-hidden="true" src="assets/icons/trash.svg" />
-						{{ 'dates.remove' | translate }}
-					</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>
+				<hr />
+				<div class="button delete-date is-block" (click)="dateChoices.splice(id, 1)">
+					<img class="icon" aria-hidden="true" src="assets/icons/trash.svg" />
+					{{ 'dates.remove' | translate }}
+				</div>
 			</div>
 		</div>
 		<div class="add_date">

src/app/features/administration/form/date/list/day/day-list.component.scss

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

src/app/features/administration/form/date/list/time/time-list.component.html

@@ -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">
-		<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 }}
-			<i class="fa fa-arrows-v" aria-hidden="true"></i>
 		</label>
+
 		<input
-			class="time-list-item"
+			class="time-list-item input is-fullwidth"
 			[(ngModel)]="time.literal"
 			name="timeChoices_{{ id }}"
 			(keyup.arrowDown)="focusOnNextField(id)"
@@ -16,8 +16,8 @@
 			type="text"
 			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>
 	</div>
 </div>

src/app/features/administration/form/date/list/time/time-list.component.scss

@@ -1,9 +1,24 @@
-:host {
+.time-list-container {
 	margin-top: 0.5em;
+	padding-left: 1rem;
 	.icon {
 		margin-right: 1ch;
 	}
+
 	.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;
 	}
 }

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

@@ -19,18 +19,20 @@
 		</button>
 
 		<!--			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
 				[(ngModel)]="pollService.calendar"
 				firstDayOfWeek="1"
 				selectionMode="multiple"
 				inputId="multiple"
-				showButtonBar="true"
+				[showButtonBar]="true"
 				[locale]="'calendar_widget' | translate"
-				[disabledDates]="pollService.disabled_dates"
+				[minDate]="minDate"
 				[inline]="true"
 				[showWeek]="false"
-			></p-calendar>
+				(onMonthChange)="(onMonthChangeCustom)"
+			>
+			</p-calendar>
 		</div>
 
 		<div class="text-date-list" *ngIf="!pollService.mode_calendar">

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

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

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

@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 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 { Title } from '@angular/platform-browser';
 
@@ -15,8 +15,17 @@ export class StepThreeComponent implements OnInit {
 	@Input()
 	form: any;
 	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) {
+		this.hideBackButton = this.areWeOnCurrentMonth();
+
 		this.pollService.step_current = 3;
 		this.step_max = this.pollService.step_max;
 		this.titleService.setTitle(
@@ -44,4 +53,8 @@ export class StepThreeComponent implements OnInit {
 		this.convertDateInputs();
 		this.pollService.mode_calendar = !this.pollService.mode_calendar;
 	}
+
+	private areWeOnCurrentMonth() {
+		return true;
+	}
 }

src/assets/i18n/en.json

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

src/assets/i18n/fr.json

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

src/styles/partials/_forms.scss

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