fix focus on hour of correct day

This commit is contained in:
Tykayn 2022-03-10 13:02:24 +01:00 committed by tykayn
parent a44100b7a0
commit ffeb21e8fe
2 changed files with 19 additions and 16 deletions

View File

@ -17,22 +17,26 @@
<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>
<label for="day_{{ day_id }}_dateChoices_{{ id }}">
{{ 'hours.element' | translate }} {{ id + 1 }}
</label>
<input class="input" type="text" id="dateChoices_{{ id }}" [(ngModel)]="timeSlice.literal" />
<input
class="input"
type="text"
id="day_{{ day_id }}_dateChoices_{{ id }}"
[(ngModel)]="timeSlice.literal"
/>
<button
[attr.aria-label]="'choices.delete' | translate"
class="has-no-border delete-hour has-background-trash has-background-icon-left is-filtered-icon-primary"
(click)="removeHour(dayChoice.timeSlices, id)"
>
<!-- {{ 'choices.delete' | translate }}-->
<!-- <img src="assets/icons/trash-2.svg" class="icon is-filtered-icon-primary" />-->
</button>
(click)="removeHour(day_id, dayChoice.timeSlices, id)"
></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)"
(click)="addChoiceForDay(day_id, dayChoice)"
>
{{ 'hours.add' | translate }}
</button>

View File

@ -51,9 +51,8 @@ export class StepFourComponent implements OnInit {
});
}
addChoiceForDay(dayChoice: DateChoice): void {
addChoiceForDay(day_id, dayChoice: DateChoice): void {
let lastDateChoice = this.pollService.dateChoiceList[this.pollService.dateChoiceList.length];
console.log('lastDateChoice', lastDateChoice);
let lastDateChoiceObject = this.dateUtilitiesService.addDaysToDate(
this.pollService.dateChoiceList.length,
new Date()
@ -70,11 +69,12 @@ export class StepFourComponent implements OnInit {
dayChoice.timeSlices.sort((a: any, b: any) => {
return a.date_object - b.date_object;
});
this.focusOnChoice(this.storageService.dateChoices.length - 1);
this.focusOnChoice(day_id, this.storageService.dateChoices.length - 1);
}
focusOnChoice(index): void {
const selector = '#dateChoices_' + index;
focusOnChoice(day_id, index): void {
this.cd.detectChanges();
const selector = '#day_' + day_id + '_dateChoices_' + index;
const elem = this.document.querySelector(selector);
if (elem) {
elem.focus();
@ -123,13 +123,12 @@ export class StepFourComponent implements OnInit {
}
}
removeHour(dayChoice, id: number) {
removeHour(day_id, dayChoice, id: number) {
dayChoice.splice(id, 1);
this.cd.detectChanges();
this.focusOnChoice(id - 1 < 0 ? 0 : id - 1);
this.focusOnChoice(day_id, id - 1 < 0 ? 0 : id - 1);
this.translate.get('success.deleted_option').subscribe((resp) => {
console.log('resp', resp);
this.toastService.display(`${resp}`);
});
}