add recurring rules to event create form

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

@@ -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 input-bordered w-full" />
-                     [class.input-error]="endDate?.invalid && endDate?.touched" />
             </div>
           </div>
         }

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

@@ -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"
+        byDay: [null], // string
-        byMonthDay: [null], // number
+        byMonthDay: [null], // string
-        byMonth: [null], // number
+        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]);
+        frequency?.setValidators([Validators.required]);
-        recurringRule?.get('interval')?.setValidators([Validators.required, Validators.min(1)]);
+        interval?.setValidators([Validators.required, Validators.min(1)]);
-        recurringRule?.get('endDate')?.setValidators([Validators.required]);
       } else {
-        recurringRule?.get('frequency')?.clearValidators();
+        recurringRule?.reset();
-        recurringRule?.get('interval')?.clearValidators();
+        frequency?.clearValidators();
-        recurringRule?.get('endDate')?.clearValidators();
+        interval?.clearValidators();
       }
-      recurringRule?.get('frequency')?.updateValueAndValidity();
+      frequency?.updateValueAndValidity();
-      recurringRule?.get('interval')?.updateValueAndValidity();
+      interval?.updateValueAndValidity();
-      recurringRule?.get('endDate')?.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();
   }