rschneider/dvbooking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add recurring rules to event create form

Browse Source
This commit is contained in:
Schneider Roland 2025-11-26 08:05:26 +01:00
parent 9c1c2f6356
commit dad9f4fce1
2 changed files with 92 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
admin/src/app/features/calendar/components/create-event-form/create-event-form.html
View File

@ -62,12 +62,47 @@
[class.input-error]="interval?.invalid && interval?.touched" />
</div>
<div class="form-control">
<label class="label"><span class="label-text">Napok</span></label>
<div class="flex flex-wrap gap-4">
@for (day of weekDayOptions; track day.value) {
<label class="label cursor-pointer justify-start gap-2">
<input type="checkbox"
[value]="day.value"
[checked]="isDayChecked(day.value)"
(change)="onByDayChange($event)"
class="checkbox" />
<span class="label-text">{{ day.label }}</span>
</label>
}
</div>
</div>
<div class="form-control">
<label class="label"><span class="label-text">Hónap napja</span></label>
<input type="text"
formControlName="byMonthDay"
class="input input-bordered w-full" />
<div class="label">
<span class="label-text-alt">Vesszővel elválasztott lista (pl. 1,15,31)</span>
</div>
</div>
<div class="form-control">
<label class="label"><span class="label-text">Hónap</span></label>
<input type="text"
formControlName="byMonth"
class="input input-bordered w-full" />
<div class="label">
<span class="label-text-alt">Vesszővel elválasztott lista (pl. 1,2,3)</span>
</div>
</div>
<div class="form-control">
<label class="label"><span class="label-text">Ismétlődés vége</span></label>
<input type="date"
formControlName="endDate"
class="input input-bordered w-full"
[class.input-error]="endDate?.invalid && endDate?.touched" />
class="input input-bordered w-full" />
</div>
</div>
}

68
admin/src/app/features/calendar/components/create-event-form/create-event-form.ts
View File

@ -51,8 +51,17 @@ export class CreateEventForm implements OnInit {
frequency: 'YEARLY',
label: 'Éves'
}
]
];
weekDayOptions = [
{ value: 'MO', label: 'Hétfő' },
{ value: 'TU', label: 'Kedd' },
{ value: 'WE', label: 'Szerda' },
{ value: 'TH', label: 'Csütörtök' },
{ value: 'FR', label: 'Péntek' },
{ value: 'SA', label: 'Szombat' },
{ value: 'SU', label: 'Vasárnap' },
];
constructor(
private fb: FormBuilder,
@ -74,9 +83,9 @@ export class CreateEventForm implements OnInit {
interval: [null] ,//number
endDate: [null], // Date
count: [null], // number
byDay: [null], // string. e.g.: "MO,TU,WE,TH,FR"
byMonthDay: [null], // number
byMonth: [null], // number
byDay: [null], // string
byMonthDay: [null], // string
byMonth: [null], // string
})
});
@ -85,18 +94,19 @@ export class CreateEventForm implements OnInit {
ngOnInit(): void {
this.isRecurring?.valueChanges.subscribe(isRecurring => {
const recurringRule = this.form.get('recurringRule');
const frequency = recurringRule?.get('frequency');
const interval = recurringRule?.get('interval');
if (isRecurring) {
recurringRule?.get('frequency')?.setValidators([Validators.required]);
recurringRule?.get('interval')?.setValidators([Validators.required, Validators.min(1)]);
recurringRule?.get('endDate')?.setValidators([Validators.required]);
frequency?.setValidators([Validators.required]);
interval?.setValidators([Validators.required, Validators.min(1)]);
} else {
recurringRule?.get('frequency')?.clearValidators();
recurringRule?.get('interval')?.clearValidators();
recurringRule?.get('endDate')?.clearValidators();
recurringRule?.reset();
frequency?.clearValidators();
interval?.clearValidators();
}
recurringRule?.get('frequency')?.updateValueAndValidity();
recurringRule?.get('interval')?.updateValueAndValidity();
recurringRule?.get('endDate')?.updateValueAndValidity();
frequency?.updateValueAndValidity();
interval?.updateValueAndValidity();
});
of(this.id()).pipe(
@ -147,6 +157,26 @@ export class CreateEventForm implements OnInit {
});
}
onByDayChange(event: any) {
const target = event.target as HTMLInputElement;
const day = target.value;
const isChecked = target.checked;
let currentByDay: string[] = this.byDay?.value ? this.byDay.value.split(',') : [];
if (isChecked) {
currentByDay.push(day);
} else {
currentByDay = currentByDay.filter(d => d !== day);
}
this.byDay?.setValue(currentByDay.join(','));
}
isDayChecked(day: string): boolean {
return this.byDay?.value ? this.byDay.value.split(',').includes(day) : false;
}
onSubmit(): void {
if (this.form.invalid) {
this.form.markAllAsTouched();
@ -218,6 +248,18 @@ export class CreateEventForm implements OnInit {
return this.form.get('recurringRule')?.get('endDate');
}
get byDay() {
return this.form.get('recurringRule')?.get('byDay');
}
get byMonthDay() {
return this.form.get('recurringRule')?.get('byMonthDay');
}
get byMonth() {
return this.form.get('recurringRule')?.get('byMonth');
}
doReady(){
this.ready.emit();
}