S9 OR Tools basic scheduling

agiledancers-fe/src/app/shared/entity-editor.spec.ts

@@ -3,7 +3,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { of, throwError } from 'rxjs';
 import { SchoolApi } from '../core/school-api';
 import { EntityEditor } from './entity-editor';
-import { EditorTarget } from '../core/api-models';
+import { EditorTarget, Show } from '../core/api-models';
 
 describe('EntityEditor', () => {
   const api = { saveSchool: vi.fn(), saveGroup: vi.fn(), saveDancer: vi.fn(), saveShow: vi.fn() };
@@ -14,10 +14,11 @@ describe('EntityEditor', () => {
       providers: [{ provide: SchoolApi, useValue: api }],
     });
   });
-  function editor(target: EditorTarget) {
+  function editor(target: EditorTarget, shows: Show[] = []) {
     const fixture = TestBed.createComponent(EntityEditor);
     fixture.componentRef.setInput('target', target);
     fixture.componentRef.setInput('schoolId', 7);
+    fixture.componentRef.setInput('shows', shows);
     fixture.componentInstance.ngOnInit();
     return fixture.componentInstance;
   }
@@ -66,4 +67,107 @@ describe('EntityEditor', () => {
     expect(component.error()).toContain('niet bereikbaar');
     expect(component.busy()).toBe(false);
   });
+  const show: Show = {
+    id: 3,
+    name: 'Summer',
+    dayParts: [
+      { date: '2027-06-01', type: 'AFTERNOON', danceGroupIds: [4] },
+      { date: '2027-06-02', type: 'AFTERNOON', danceGroupIds: [4] },
+    ],
+    appearances: { REGULAR: 2, SELECTION: 2, PRE_SCHOOLER: 1, SHOW_CASE: 2, PRE_EDUCATION: 2 },
+  };
+
+  it('initializes defaults for every type and rejects duplicate dated dayparts and fractional counts', () => {
+    const component = editor({ kind: 'show' });
+    component.name = 'Show';
+    expect(component.validDetails()).toBe(true);
+    component.addPart();
+    component.dayParts[0].date = '2027-06-01';
+    component.addPart();
+    component.dayParts[1].date = '2027-06-02';
+    component.addPart();
+    component.dayParts[2].date = '2027-06-03';
+    expect(component.appearances).toEqual({
+      REGULAR: 2,
+      SELECTION: 2,
+      PRE_SCHOOLER: 1,
+      SHOW_CASE: 3,
+      PRE_EDUCATION: 3,
+    });
+    expect(component.validDetails()).toBe(true);
+    component.dayParts[2].date = '2027-06-02';
+    expect(component.validDetails()).toBe(false);
+    component.dayParts[2].date = '2027-06-03';
+    component.appearances.PRE_SCHOOLER = 1.5;
+    expect(component.validDetails()).toBe(false);
+  });
+
+  it('preserves saved counts and requires explicit correction when reducing to one daypart', () => {
+    const component = editor({ kind: 'show', value: show });
+    component.addPart();
+    component.dayParts[2].date = '2027-06-03';
+    expect(component.appearances.SHOW_CASE).toBe(2);
+    component.removePart(2);
+    component.removePart(1);
+    expect(component.appearances.REGULAR).toBe(2);
+    expect(component.validDetails()).toBe(false);
+    component.setSingleCounts();
+    expect(component.validDetails()).toBe(true);
+  });
+
+  it('allows cancelling an invalidating edit and skips warnings for name-only edits', async () => {
+    api.saveShow.mockReturnValue(of(show));
+    const confirm = vi.spyOn(window, 'confirm').mockReturnValue(false);
+    try {
+      const component = editor({ kind: 'show', value: show });
+      component.appearances.REGULAR = 1;
+      await component.save();
+      expect(confirm).toHaveBeenCalledWith(expect.stringContaining('Summer'));
+      expect(api.saveShow).not.toHaveBeenCalled();
+      component.appearances.REGULAR = 2;
+      confirm.mockClear();
+      component.name = 'Renamed';
+      await component.save();
+      expect(confirm).not.toHaveBeenCalled();
+      expect(api.saveShow).toHaveBeenCalledOnce();
+    } finally {
+      confirm.mockRestore();
+    }
+  });
+  it('names affected shows before adding a group and allows cancellation', async () => {
+    const confirm = vi.spyOn(window, 'confirm').mockReturnValue(false);
+    try {
+      const component = editor({ kind: 'group' }, [show]);
+      component.name = 'New group';
+      await component.save();
+      expect(confirm).toHaveBeenCalledWith(expect.stringContaining('Summer'));
+      expect(api.saveGroup).not.toHaveBeenCalled();
+    } finally {
+      confirm.mockRestore();
+    }
+  });
+
+  it('displays one disabled appearance field for every type with one daypart', async () => {
+    // jsdom does not implement native dialog opening.
+    const descriptor = Object.getOwnPropertyDescriptor(HTMLDialogElement.prototype, 'showModal');
+    Object.defineProperty(HTMLDialogElement.prototype, 'showModal', {
+      configurable: true,
+      value: () => undefined,
+    });
+    try {
+      const fixture = TestBed.createComponent(EntityEditor);
+      fixture.componentRef.setInput('target', { kind: 'show' });
+      fixture.componentInstance.addPart();
+      fixture.detectChanges();
+      await fixture.whenStable();
+      fixture.detectChanges();
+      const element = fixture.nativeElement as HTMLElement;
+      const inputs = Array.from(element.querySelectorAll<HTMLInputElement>('input[type="number"]'));
+      expect(inputs).toHaveLength(5);
+      expect(inputs.every((input) => input.disabled && input.value === '1')).toBe(true);
+    } finally {
+      if (descriptor) Object.defineProperty(HTMLDialogElement.prototype, 'showModal', descriptor);
+      else Reflect.deleteProperty(HTMLDialogElement.prototype, 'showModal');
+    }
+  });
 });

agiledancers-fe/src/app/shared/entity-editor.ts

@@ -1,7 +1,15 @@
 import { Component, inject, input, OnInit, output, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { firstValueFrom, Observable } from 'rxjs';
-import { EditorTarget, GROUP_STYLES, GROUP_TYPES, GroupStyle, GroupType } from '../core/api-models';
+import {
+  EditorTarget,
+  GROUP_STYLES,
+  GROUP_TYPES,
+  GroupStyle,
+  GroupType,
+  DayPart,
+  Show,
+} from '../core/api-models';
 import { SchoolApi } from '../core/school-api';
 import { apiError } from '../core/api-error';
 import { DialogFrame } from './dialog-frame';
@@ -89,11 +97,69 @@ import { DialogFrame } from './dialog-frame';
             /></label>
           }
           @if (target().kind === 'show') {
-            <label>Datum<input type="date" name="showDate" [(ngModel)]="date" required /></label>
-            <p class="form-hint">
-              De show krijgt automatisch een ochtend-, middag- en avonddeel. De groepsindeling volgt
-              later.
-            </p>
+            <fieldset>
+              <legend>Gedateerde dagdelen (maximaal zes)</legend>
+              @for (part of dayParts; track $index; let i = $index) {
+                <div class="form-grid">
+                  <label
+                    >Datum<input
+                      type="date"
+                      [name]="'partDate' + i"
+                      [(ngModel)]="part.date"
+                      required
+                  /></label>
+                  <label
+                    >Dagdeel<select [name]="'partType' + i" [(ngModel)]="part.type" required>
+                      <option value="MORNING">Ochtend</option>
+                      <option value="AFTERNOON">Middag</option>
+                      <option value="EVENING">Avond</option>
+                    </select></label
+                  >
+                  <button type="button" class="text-button" (click)="removePart(i)">
+                    Dagdeel verwijderen
+                  </button>
+                </div>
+              }
+              <button
+                type="button"
+                class="button secondary"
+                [disabled]="dayParts.length >= 6"
+                (click)="addPart()"
+              >
+                Dagdeel toevoegen
+              </button>
+            </fieldset>
+            @if (dayParts.length) {
+              <fieldset>
+                <legend>Optredens per groepstype</legend>
+                @for (option of types; track option.value) {
+                  <label
+                    >{{ option.label
+                    }}<input
+                      type="number"
+                      [name]="'count' + option.value"
+                      [ngModel]="dayParts.length === 1 ? 1 : appearances[option.value]"
+                      (ngModelChange)="appearances[option.value] = $event"
+                      required
+                      min="1"
+                      [max]="dayParts.length"
+                      step="1"
+                      [disabled]="dayParts.length === 1"
+                  /></label>
+                }
+                <p class="form-hint">
+                  Bestaande aantallen blijven behouden bij wijzigingen. Corrigeer te hoge aantallen
+                  vóór opslaan.
+                </p>
+                @if (dayParts.length === 1 && !validCounts()) {
+                  <button type="button" class="button secondary" (click)="setSingleCounts()">
+                    Alle aantallen op één zetten
+                  </button>
+                }
+              </fieldset>
+            } @else {
+              <p class="form-hint">Zonder dagdelen blijft deze show ongepland.</p>
+            }
           }
         }
         <div class="dialog-actions">
@@ -120,6 +186,7 @@ import { DialogFrame } from './dialog-frame';
 export class EntityEditor implements OnInit {
   readonly target = input.required<EditorTarget>();
   readonly schoolId = input<number>();
+  readonly shows = input<Show[]>([]);
   readonly closed = output<void>();
   readonly saved = output<void>();
   readonly busy = signal(false);
@@ -128,6 +195,9 @@ export class EntityEditor implements OnInit {
   readonly styles = GROUP_STYLES;
   readonly today = new Date().toLocaleDateString('en-CA');
   private readonly api = inject(SchoolApi);
+  dayParts: DayPart[] = [];
+  appearances: Partial<Record<GroupType, number>> = {};
+  private countsInitialized = false;
   name = '';
   date = '';
   type: GroupType = 'REGULAR';
@@ -151,9 +221,48 @@ export class EntityEditor implements OnInit {
     } else {
       this.name = target.value.name;
       if (target.kind === 'dancer') this.date = target.value.birthDate;
-      if (target.kind === 'show') this.date = target.value.date;
+      if (target.kind === 'show') {
+        this.dayParts = target.value.dayParts.map((p) => ({ ...p }));
+        this.appearances = { ...target.value.appearances };
+        this.countsInitialized = Object.keys(this.appearances).length > 0;
+      }
     }
   }
+  addPart(): void {
+    if (this.dayParts.length >= 6) return;
+    const previous = this.dayParts.length;
+    this.dayParts.push({ date: '', type: 'AFTERNOON', danceGroupIds: [] });
+    if (!this.countsInitialized) {
+      for (const { value } of this.types) {
+        const defaultCount = (n: number) =>
+          value === 'PRE_SCHOOLER'
+            ? 1
+            : value === 'SHOW_CASE' || value === 'PRE_EDUCATION'
+              ? n
+              : Math.min(2, n);
+        if (
+          this.appearances[value] === undefined ||
+          this.appearances[value] === defaultCount(previous)
+        )
+          this.appearances[value] = defaultCount(this.dayParts.length);
+      }
+    }
+  }
+  removePart(index: number): void {
+    this.dayParts.splice(index, 1);
+    if (!this.countsInitialized && !this.dayParts.length) this.appearances = {};
+  }
+  setSingleCounts(): void {
+    for (const option of this.types) this.appearances[option.value] = 1;
+  }
+  validCounts(): boolean {
+    return this.types.every(
+      (o) =>
+        Number.isInteger(this.appearances[o.value]) &&
+        this.appearances[o.value]! >= 1 &&
+        this.appearances[o.value]! <= this.dayParts.length,
+    );
+  }
   toggleStyle(style: GroupStyle, checked: boolean): void {
     this.selectedStyles = checked
       ? [...this.selectedStyles, style]
@@ -162,7 +271,13 @@ export class EntityEditor implements OnInit {
   validDetails(): boolean {
     if (!this.name.trim()) return false;
     if (this.target().kind === 'dancer') return !!this.date && this.date <= this.today;
-    if (this.target().kind === 'show') return !!this.date;
+    if (this.target().kind === 'show')
+      return (
+        this.dayParts.length <= 6 &&
+        this.dayParts.every((p) => !!p.date && !!p.type) &&
+        new Set(this.dayParts.map((p) => p.date + ':' + p.type)).size === this.dayParts.length &&
+        (!this.dayParts.length || this.validCounts())
+      );
     if (this.target().kind === 'group')
       return (
         this.startAge !== null &&
@@ -176,6 +291,28 @@ export class EntityEditor implements OnInit {
   }
   async save(): Promise<void> {
     if (this.busy() || !this.validDetails()) return;
+    const current = this.target();
+    let affected: Show[] = [];
+    if (current.kind === 'group' && (!current.value || current.value.type !== this.type))
+      affected = this.shows();
+    if (
+      current.kind === 'show' &&
+      current.value &&
+      (JSON.stringify(current.value.dayParts.map((p) => ({ date: p.date, type: p.type }))) !==
+        JSON.stringify(this.dayParts.map((p) => ({ date: p.date, type: p.type }))) ||
+        JSON.stringify(current.value.appearances) !== JSON.stringify(this.appearances))
+    )
+      affected = [current.value];
+    const names = affected
+      .filter((s) => s.dayParts.some((p) => p.danceGroupIds.length))
+      .map((s) => s.name);
+    if (
+      names.length &&
+      !window.confirm(
+        `Deze wijziging kan de planning ongeldig maken van: ${names.join(', ')}. Doorgaan?`,
+      )
+    )
+      return;
     this.busy.set(true);
     this.error.set('');
     const target = this.target();
@@ -207,7 +344,15 @@ export class EntityEditor implements OnInit {
         );
         break;
       case 'show':
-        request = this.api.saveShow(schoolId!, { name: this.name.trim(), date: this.date }, id);
+        request = this.api.saveShow(
+          schoolId!,
+          {
+            name: this.name.trim(),
+            dayParts: this.dayParts.map((p) => ({ date: p.date, type: p.type })),
+            appearances: this.appearances,
+          },
+          id,
+        );
         break;
     }
     try {