style for adding time

src/app/core/models/dateChoice.model.ts

@@ -0,0 +1,9 @@
+export interface DateChoice {
+	literal: string;
+	timeSlices: TimeSlices[];
+	date_object: Date;
+}
+
+export interface TimeSlices {
+	literal: string;
+}

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

@@ -45,6 +45,7 @@
 				<input
 					[(ngModel)]="choice.date_object"
 					(keyup)="keyOnChoice($event, id)"
+					class="date-choice-item"
 					name="dateChoices_{{ id }}"
 					id="dateChoices_{{ id }}"
 					useValueAsDate
@@ -53,12 +54,18 @@
 				<button (click)="dateChoices.splice(id, 1)" class="btn btn-warning">
 					<i class="fa fa-times" aria-hidden="true"></i>
 				</button>
-				<button (click)="addTimeToDate(choice, id)" *ngIf="hasSeveralHours" class="btn btn--primary">
-					{{ 'dates.add_time' | translate }}
-				</button>
+				<br />
+
 				<div *ngIf="hasSeveralHours" class="several-times">
 					<br />
-					<app-time-list [timeSlices]="choice.timeSlices"></app-time-list>
+					<app-time-list [timeSlices]="choice.timeSlices" [prefix_choice_id]="id"></app-time-list>
+					<div class="text-right">
+						<button (click)="addTimeToDate(choice, id)" class="btn btn--primary">
+							<i class="fa fa-plus"></i>
+							<!--							{{ 'dates.add_time' | translate }}-->
+							<i class="fa fa-clock-o"></i>
+						</button>
+					</div>
 				</div>
 			</div>
 		</div>

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

@@ -6,8 +6,12 @@
 }
 .icon {
 	margin-right: 1ch;
+	margin-left: 1ch;
 	display: inline-block;
 }
 .several-times {
 	padding-left: 2em;
 }
+.date-choice-item {
+	width: 75%;
+}

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

@@ -1,12 +1,12 @@
 import { ChangeDetectorRef, Component, Inject, Input } from '@angular/core';
 import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
-import { DateChoice } from '../../../../../../../../mocks/old-stuff/config/defaultConfigs';
 import { DOCUMENT } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ToastService } from '../../../../../../core/services/toast.service';
 import { StorageService } from '../../../../../../core/services/storage.service';
 import { MatDialog } from '@angular/material/dialog';
 import { ShortcutsHelpComponent } from '../../../../../shared/components/ui/shortcuts-help/shortcuts-help.component';
+import { DateChoice } from '../../../../../../core/models/dateChoice.model';
 
 @Component({
 	selector: 'app-day-list',
@@ -64,19 +64,21 @@ export class DayListComponent {
 	 * @param choice DateChoice
 	 * @param id number
 	 */
-	addTimeToDate(choice: DateChoice, id: number) {
+	addTimeToDate(choice: DateChoice, id: number): void {
 		if (!choice.timeSlices) {
 			choice.timeSlices = [];
 		}
 		choice.timeSlices.push({
 			literal: '',
 		});
-		const selector =
-			'[ng-reflect-choice_label="dateTime_' + id + '_ dateList_' + (choice.timeSlices.length - 1) + '"]';
+		// focus on created field
 		this.cd.detectChanges();
-		const elem = this.document.querySelector(selector);
-		if (elem) {
-			elem.focus();
+		const selector = '#choice_' + id + '_timeChoices_' + (choice.timeSlices.length - 1);
+		const firstField = this.document.querySelector(selector);
+		if (firstField) {
+			firstField.focus();
+		} else {
+			console.log('no last time choice found');
 		}
 	}
 

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

@@ -1,16 +1,21 @@
 <div class="time-list-container" cdkDropList [cdkDropListData]="timeSlices" (cdkDropListDropped)="dropTimeItem($event)">
 	<div *ngFor="let time of timeSlices; index as id" class="time-choice" cdkDrag>
-		<label class="icon button is-default" for="timeChoices_{{ id }}">
+		<label class="icon button is-default" for="choice_{{ prefix_choice_id }}_timeChoices_{{ id }}">
 			<i class="fa fa-arrows-v" aria-hidden="true"></i>
 		</label>
 		<input
 			class="time-list-item"
 			[(ngModel)]="time.literal"
 			name="timeChoices_{{ id }}"
+			(keyup.arrowDown)="focusOnNextField(id)"
+			(keyup.arrowUp)="focusOnFieldNumber(id - 1)"
+			(keyup.arrowLeft)="removeTimeIfEmpty(time.literal, id)"
+			(keyup.alt.d)="removeTime(id)"
+			(blur)="removeTimeIfEmpty(time.literal, id)"
 			type="text"
-			id="timeChoices_{{ id }}"
+			id="choice_{{ prefix_choice_id }}_timeChoices_{{ id }}"
 		/>
-		<button (click)="timeSlices.splice(id, 1)" class="btn btn-warning">
+		<button (click)="removeTime(id)" class="btn btn-warning">
 			<i class="fa fa-times" aria-hidden="true"></i>
 		</button>
 	</div>

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

@@ -1,6 +1,8 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { TimeSlices } from '../../../../../../../../mocks/old-stuff/config/defaultConfigs';
+import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
+
 import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { DOCUMENT } from '@angular/common';
+import { TimeSlices } from '../../../../../../core/models/dateChoice.model';
 
 @Component({
 	selector: 'app-time-list',
@@ -10,7 +12,10 @@ import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 export class TimeListComponent implements OnInit {
 	@Input()
 	public timeSlices: TimeSlices[];
-	constructor() {}
+	@Input()
+	public prefix_choice_id = '';
+
+	constructor(@Inject(DOCUMENT) private document: any, private cd: ChangeDetectorRef) {}
 
 	ngOnInit(): void {}
 
@@ -27,4 +32,52 @@ export class TimeListComponent implements OnInit {
 			);
 		}
 	}
+
+	removeTime(id: number) {
+		this.timeSlices.splice(id, 1);
+		this.focusOnLastField();
+	}
+
+	focusOnFieldNumber(fieldId: number) {
+		console.log('focus on fieldId', fieldId);
+		const selector = '#choice_' + this.prefix_choice_id + '_timeChoices_' + fieldId;
+		const firstField = this.document.querySelector(selector);
+		if (firstField) {
+			console.log('found', firstField);
+			firstField.focus();
+		}
+		return firstField;
+	}
+
+	focusOnNextField(currentId: number) {
+		const fieldFound = this.focusOnFieldNumber(currentId + 1);
+		if (!fieldFound) {
+			console.log('pas trouvé de field avec id', currentId + 1);
+			this.createNewField();
+		}
+	}
+
+	focusOnLastField() {
+		this.cd.detectChanges();
+		if (!this.focusOnFieldNumber(this.timeSlices.length - 1)) {
+			console.log('no last time choice found');
+			this.createNewField();
+			this.focusOnLastField();
+		}
+	}
+
+	removeTimeIfEmpty(timeLiteral, id) {
+		if (timeLiteral === '') {
+			this.removeTime(id);
+			this.focusOnFieldNumber(0);
+		}
+	}
+
+	createNewField() {
+		// create new field
+		this.timeSlices.push({
+			literal: '',
+		});
+		this.cd.detectChanges();
+	}
 }

src/styles/partials/_forms.scss

@@ -133,9 +133,9 @@ mat-checkbox {
 
 .cdk-drag {
 	cursor: pointer;
-	border-left: 3px white solid;
+	//border-left: 3px white solid;
 	&:hover {
-		border-left: 3px #ccc solid;
+		background: #fefefe;
 	}
 }
 .admin-form {
@@ -191,7 +191,7 @@ mat-checkbox {
 	padding: 1em;
 	height: 4em;
 	width: 100%;
-	background: white;
+	background: $primary;
 }
 
 .cdk-drag-animating {
@@ -219,9 +219,6 @@ mat-checkbox {
 	border-left: $success 3px solid;
 	padding-left: 1em;
 }
-.btn {
-	margin: 0.5em;
-}
 
 .bar-nav-admin {
 	//position:fixed;

src/styles/partials/_typo.scss

@@ -31,3 +31,10 @@ h4 {
 .nobold {
 	font-weight: normal;
 }
+
+.text-right {
+	text-align: right;
+}
+.text-center {
+	text-align: center;
+}