add recurring rules to event create form

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

@@ -39,14 +39,14 @@
         </label></div>
 
         @if (isRecurring?.value) {
-          <h3>Ismétlődés</h3>
+          <div formGroupName="recurringRule" class="space-y-4 p-4 border border-base-300 rounded-lg">
+            <h3 class="text-lg font-semibold">Ismétlődés</h3>
 
-          <div  class="form-control"><label class="label"><span class="label-text">Gyakoriság</span></label>
+            <div class="form-control">
+              <label class="label"><span class="label-text">Gyakoriság</span></label>
               <select class="select w-full"
-                    formGroupName="recurringRule"
                       formControlName="frequency"
-                    [class.input-error]="frequency?.invalid && eventType?.touched"
+                      [class.select-error]="frequency?.invalid && frequency?.touched">
-            >
                 <option disabled selected>Válassz gyakoriságot</option>
                 @for (frequencyOption of frequencyOptions; track frequencyOption) {
                   <option [value]="frequencyOption.frequency">{{ frequencyOption.label }}</option>
@@ -54,6 +54,57 @@
               </select>
             </div>
 
+            <div class="form-control">
+              <label class="label"><span class="label-text">Intervallum</span></label>
+              <input type="number"
+                     formControlName="interval"
+                     class="input input-bordered w-full"
+                     [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" />
+            </div>
+          </div>
         }
 
         <div class="card-actions justify-end mt-6">

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,
@@ -68,21 +77,38 @@ export class CreateEventForm implements OnInit {
       description: [null],
       startTime: [null,Validators.required],
       endTime: [null,Validators.required],
-      is_recurring: [null],
+      is_recurring: [false],
       recurringRule: this.fb.group({
         frequency: [null] ,//'DAILY' | 'WEEKLY' | 'MONTHLY' | 'YEARLY';
         interval: [null] ,//number
         endDate: [null], // Date
         count: [null], // number
         byDay: [null], // string
-        byMonthDay: [null], // number
+        byMonthDay: [null], // string
-        byMonth: [null], // number
+        byMonth: [null], // string
 
       })
     });
   }
 
   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) {
+        frequency?.setValidators([Validators.required]);
+        interval?.setValidators([Validators.required, Validators.min(1)]);
+      } else {
+        recurringRule?.reset();
+        frequency?.clearValidators();
+        interval?.clearValidators();
+      }
+      frequency?.updateValueAndValidity();
+      interval?.updateValueAndValidity();
+    });
+
     of(this.id()).pipe(
       tap(id => {
         if (id) {
@@ -131,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();
@@ -139,6 +185,10 @@ export class CreateEventForm implements OnInit {
 
     const payload:  EventFormDTO|any = { ...this.form.value };
 
+    if (!payload.is_recurring) {
+      delete payload.recurringRule;
+    }
+
     for (const field of this.numericFields) {
       if (payload[field] != null && payload[field] !== '') {
         payload[field] = parseFloat(payload[field]);
@@ -182,9 +232,34 @@ export class CreateEventForm implements OnInit {
     return this.form.get('is_recurring');
   }
 
+  get recurringRule(){
+    return this.form.get('recurringRule');
+  }
+
   get frequency(){
     return this.form.get('recurringRule')?.get('frequency');
   }
+
+  get interval(){
+    return this.form.get('recurringRule')?.get('interval');
+  }
+
+  get endDate(){
+    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();
   }