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

<div class="day-list-container">
	<div class="columns">
		<div class="column">
			<!--				ajouter une date-->
			<button class="btn btn--primary" (click)="addChoice()">
				{{ 'dates.add' | translate }}
			</button>
		</div>
		<div class="column">
			<span class="count-dates title">
				{{ dateChoices.length }}
			</span>
			<span>
				{{ 'dates.count_dates' | translate }}
			</span>
		</div>
	</div>

	<div
		class="columns days-list"
		cdkDropList
		[cdkDropListData]="dateChoices"
		(cdkDropListDropped)="dropDayItem($event)"
	>
		<div class="column">
			<h2>Dates</h2>
			<button class="btn button-help" mat-raised-button (click)="openSimple()">
				💁 Raccourcis
			</button>
			<app-shortcuts-help *ngIf="display"></app-shortcuts-help>
			<br />
			<br />
			<div
				*ngFor="let choice of dateChoices; index as id"
				class="date-choice padded"
				cdkDrag
				[ngClass]="{ 'day-weekend': isWeekendDay(choice.date_object) }"
			>
				<span class="button is-default">
					<i class="icon fa fa-arrows-v"></i>
					<span *ngIf="choice.date_object">
						{{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}
					</span>
				</span>
				<input
					[(ngModel)]="choice.date_object"
					(keyup)="keyOnChoice($event, id)"
					name="dateChoices_{{ id }}"
					id="dateChoices_{{ id }}"
					useValueAsDate
					type="date"
				/>
				<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>
				<div *ngIf="hasSeveralHours" class="several-times">
					<br />
					<app-time-list [timeSlices]="choice.timeSlices"></app-time-list>
				</div>
			</div>
		</div>
	</div>

	<br />
</div>