tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

fix focus on hour of correct day

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/features/administration/form/steps/step-four/step-four.component.html
View File

@ -17,22 +17,26 @@
<section class="time-slice-list-of-a-day"> <section class="time-slice-list-of-a-day">
<div *ngFor="let timeSlice of dayChoice.timeSlices; index as id" class="time-choice"> <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 <button
[attr.aria-label]="'choices.delete' | translate" [attr.aria-label]="'choices.delete' | translate"
class="has-no-border delete-hour has-background-trash has-background-icon-left is-filtered-icon-primary" class="has-no-border delete-hour has-background-trash has-background-icon-left is-filtered-icon-primary"
(click)="removeHour(dayChoice.timeSlices, id)" (click)="removeHour(day_id, dayChoice.timeSlices, id)"
> ></button>
<!-- {{ 'choices.delete' | translate }}-->
<!-- <img src="assets/icons/trash-2.svg" class="icon is-filtered-icon-primary" />-->
</button>
</div> </div>
<div class="add-time-choice"> <div class="add-time-choice">
<button <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" 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 }} {{ 'hours.add' | translate }}
</button> </button>

15
src/app/features/administration/form/steps/step-four/step-four.component.ts
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]; let lastDateChoice = this.pollService.dateChoiceList[this.pollService.dateChoiceList.length];
console.log('lastDateChoice', lastDateChoice);
let lastDateChoiceObject = this.dateUtilitiesService.addDaysToDate( let lastDateChoiceObject = this.dateUtilitiesService.addDaysToDate(
this.pollService.dateChoiceList.length, this.pollService.dateChoiceList.length,
new Date() new Date()
@ -70,11 +69,12 @@ export class StepFourComponent implements OnInit {
dayChoice.timeSlices.sort((a: any, b: any) => { dayChoice.timeSlices.sort((a: any, b: any) => {
return a.date_object - b.date_object; 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 { focusOnChoice(day_id, index): void {
const selector = '#dateChoices_' + index; this.cd.detectChanges();
const selector = '#day_' + day_id + '_dateChoices_' + index;
const elem = this.document.querySelector(selector); const elem = this.document.querySelector(selector);
if (elem) { if (elem) {
elem.focus(); 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); dayChoice.splice(id, 1);
this.cd.detectChanges(); 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) => { this.translate.get('success.deleted_option').subscribe((resp) => {
console.log('resp', resp);
this.toastService.display(`${resp}`); this.toastService.display(`${resp}`);
}); });
} }