teams: smoother calendar recursions (fixes #7858)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "myplanet": {
     "latest": "v0.21.40",
     "min": "v0.20.40"

src/app/meetups/add-meetups/meetups-add.component.html

@@ -53,8 +53,11 @@
           <mat-error><planet-form-error-messages [control]="meetupForm.controls.recurring"></planet-form-error-messages></mat-error>
         </mat-radio-group>
       </div>
-      <div *ngIf="meetupForm.controls.recurring.value==='weekly'" class="full-width">
-        <mat-checkbox (change)="onDayChange(day, $event.checked)" *ngFor="let day of days" class="margin-lr" [checked]="isClassDay(day)">{{day}}</mat-checkbox>
+      <div *ngIf="meetupForm.controls.recurring.value === 'weekly'" class="full-width">
+          <mat-checkbox (change)="onDayChange(day, $event.checked)" *ngFor="let day of days"  class="margin-lr" [checked]="meetupForm.controls.day.value.includes(day)"> {{ day }}</mat-checkbox>
+          <mat-error *ngIf="meetupForm.controls.day.hasError('noDaysSelected')">
+            <span i18n>Please select at least one day.</span>
+          </mat-error>
       </div>
       <ng-container *ngIf="meetupForm.controls.recurring.value==='weekly' || meetupForm.controls.recurring.value==='daily'">
         <mat-form-field>

src/app/meetups/add-meetups/meetups-add.component.ts

@@ -103,22 +103,24 @@ export class MeetupsAddComponent implements OnInit {
     }, {
       validators: CustomValidators.meetupTimeValidator()
     });
-  }
+}
 
-  onSubmit() {
-    if (!this.meetupForm.valid) {
-      showFormErrors(this.meetupForm.controls);
-      return;
-    }
-    this.meetupForm.value.startTime = this.changeTimeFormat(this.meetupForm.value.startTime);
-    this.meetupForm.value.endTime = this.changeTimeFormat(this.meetupForm.value.endTime);
-    const meetup = { ...this.meetupForm.value, link: this.link, sync: this.sync };
-    if (this.pageType === 'Update') {
+onSubmit() {
+  if (!this.meetupForm.valid) {
+    showFormErrors(this.meetupForm.controls);
+    return;
+  }
+  const dayFormArray = this.meetupForm.get('day') as FormArray;
+  dayFormArray.updateValueAndValidity();
+  this.meetupForm.value.startTime = this.changeTimeFormat(this.meetupForm.value.startTime);
+  this.meetupForm.value.endTime = this.changeTimeFormat(this.meetupForm.value.endTime);
+  const meetup = { ...this.meetupForm.value, link: this.link, sync: this.sync };
+  if (this.pageType === 'Update') {
       this.updateMeetup(meetup);
     } else {
       this.addMeetup(meetup);
-    }
   }
+}
 
   changeTimeFormat(time: string): string {
     if (time && time.length < 5) {
@@ -174,35 +176,50 @@ export class MeetupsAddComponent implements OnInit {
     }
   }
 
-  isClassDay(day) {
-    return this.meetupFrequency.includes(day) ? true : false;
-  }
-
   onDayChange(day: string, isChecked: boolean) {
     const dayFormArray = <FormArray>this.meetupForm.controls.day;
     if (isChecked) {
       // add to day array if checked
       dayFormArray.push(new FormControl(day));
     } else {
-      // remove from day array if unchecked
-      const index = dayFormArray.controls.findIndex(x => x.value === day);
-      dayFormArray.removeAt(index);
+        // remove from day array if unchecked
+        const index = dayFormArray.controls.findIndex(x => x.value === day);
+        if (index >= 0) {
+            dayFormArray.removeAt(index);
+        }
     }
-  }
+    dayFormArray.updateValueAndValidity();
+}
 
-  toggleDaily(val, showCheckbox) {
-    // empty the array
-    this.meetupForm.setControl('day', this.fb.array([]));
-    switch (val) {
+toggleDaily(val: string, showCheckbox: boolean) {
+  const dayFormArray = this.meetupForm.get('day') as FormArray;
+  dayFormArray.clear();
+  dayFormArray.clearValidators();
+
+  switch (val) {
+      // add all days to the array if the course is daily
       case 'daily':
-        // add all days to the array if the course is daily
-        this.meetupForm.setControl('day', this.fb.array(this.days));
-        break;
+          this.days.forEach((day) => {
+              dayFormArray.push(new FormControl(day));
+          });
+          break;
       case 'weekly':
-        this.meetupForm.setControl('day', this.fb.array(this.meetupFrequency));
-        break;
-    }
+          dayFormArray.setValidators(CustomValidators.atLeastOneDaySelected());
+          const startDate = this.meetupForm.controls.startDate.value;
+          if (startDate) {
+              const startDateObj = new Date(startDate);
+              const dayOfWeek = this.days[startDateObj.getDay()];
+              if (dayOfWeek) {
+                  dayFormArray.push(new FormControl(dayOfWeek));
+              }
+          }
+          break;
+
+      default:
+          break;
   }
+  dayFormArray.updateValueAndValidity();
+}
 
   meetupChangeNotifications(users, meetupInfo, meetupId) {
     return { docs: users.map((user) => ({

src/app/shared/calendar.component.ts

@@ -171,13 +171,16 @@ export class PlanetCalendarComponent implements OnInit, OnChanges {
   }
 
   openAddEventDialog(event) {
-    let meetup;
-    if (event?.start) {
-      meetup = {
-        startDate: event?.start,
-        endDate: this.adjustEndDate(event?.end)
-      };
+    const today = new Date();
+    const meetup = event?.start
+    ? {
+      startDate: event.start,
+      endDate: this.adjustEndDate(event.end),
     }
+  : {
+      startDate: today,
+      endDate: today,
+    };
     this.dialog.open(DialogsAddMeetupsComponent, {
       data: { meetup: meetup, link: this.link, sync: this.sync, onMeetupsChange: this.onMeetupsChange.bind(this), editable: this.editable }
     });

src/app/validators/custom-validators.ts

@@ -255,4 +255,15 @@ export class CustomValidators {
     });
   }
 
+  static atLeastOneDaySelected(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+        if (!control.parent) { return null; }
+        const recurringControl = control.parent.get('recurring');
+        if (!recurringControl || recurringControl.value !== 'weekly') {
+            return null;
+        }
+        const selectedDays = control.value;
+        return selectedDays && selectedDays.length > 0 ? null : { noDaysSelected: true };
+    };
+  }
 }