@dcrackel/hematournamentui 1.0.712 → 1.0.714

package/src/stories/Templates/EventManagement/Bracket/BracketStoryAssignments.js

@@ -0,0 +1,93 @@
+const getBoutId = bout => bout.DEBoutId ?? bout.BoutId;
+const getStatus = bout => String(bout.Status || '').toLowerCase();
+const hasFencer = person => Number(person?.PersonId) > 0 && String(person.DisplayName || '').toUpperCase() !== 'BYE';
+const isScheduledBout = bout => getStatus(bout) === 'scheduled';
+const isFinishedOrActiveBout = bout => ['active', 'completed'].includes(getStatus(bout));
+const isPowerOfTwo = value => value > 0 && Number.isInteger(Math.log2(value));
+const sortBouts = (first, second) => Number(getBoutId(first)) - Number(getBoutId(second));
+
+const getPlannedRoundSize = bout => {
+  const label = String(bout.RoundLabel || '');
+  if (/^Quarterfinals?$/i.test(label)) return 8;
+  if (/^Semifinals?$/i.test(label)) return 4;
+  const size = Number(label.match(/^Table of (\d+)$/i)?.[1] || 0);
+  return size >= 4 ? size : 0;
+};
+
+const groupPlannedRounds = bouts => {
+  const rounds = new Map();
+  for (const bout of bouts) {
+    const size = getPlannedRoundSize(bout);
+    if (!size || getBoutId(bout) == null) continue;
+    if (!rounds.has(size)) rounds.set(size, []);
+    rounds.get(size).push(bout);
+  }
+  return [...rounds].sort(([first], [second]) => second - first);
+};
+
+const isOpeningBye = (bout, isOpeningRound) => {
+  if (getStatus(bout) === 'bye') return true;
+  return isOpeningRound && ![bout.Person1, bout.Person2].every(hasFencer);
+};
+
+const createStationQuotas = (boutCount, stationLoads, keepBracketSections) => {
+  const stationCount = stationLoads.length;
+  const groupSize = Math.floor(boutCount / stationCount);
+  const largerGroupCount = boutCount % stationCount;
+  const stationOrder = stationLoads.map((load, index) => ({ load, index }));
+  if (!keepBracketSections)
+    stationOrder.sort((first, second) => first.load - second.load || first.index - second.index);
+  const largerGroups = new Set(stationOrder.slice(0, largerGroupCount).map(station => station.index));
+  return stationLoads.map((_, index) => groupSize + Number(largerGroups.has(index)));
+};
+
+const getStationIndex = (boutIndex, quotas) => {
+  let groupEnd = 0;
+  return quotas.findIndex(quota => {
+    groupEnd += quota;
+    return boutIndex < groupEnd;
+  });
+};
+
+const createRoundAssignments = ({ bouts, stations, stationLoads, isOpeningRound }) => {
+  const roundBouts = [...bouts].sort(sortBouts);
+  const keepBracketSections = isPowerOfTwo(stations.length);
+  const partitionBouts = keepBracketSections
+    ? roundBouts
+    : roundBouts.filter(bout => !isOpeningBye(bout, isOpeningRound));
+  const quotas = createStationQuotas(partitionBouts.length, stationLoads, keepBracketSections);
+  const nextStationLoads = [...stationLoads];
+  const assignments = partitionBouts.flatMap((bout, index) => {
+    if (isOpeningBye(bout, isOpeningRound)) return [];
+    const stationIndex = getStationIndex(index, quotas);
+    nextStationLoads[stationIndex]++;
+    if (!isScheduledBout(bout)) return [];
+    return [{ DEBoutId: getBoutId(bout), RingId: stations[stationIndex].RingId }];
+  });
+  return { assignments, stationLoads: nextStationLoads };
+};
+
+// Story parent simulation: coverage includes semifinals; the final stays shared.
+export const distributeStoryAssignments = ({ bouts = [], stations = [], previousAssignments = [] } = {}) => {
+  const protectedBoutIds = new Set(bouts.filter(isFinishedOrActiveBout).map(bout => String(getBoutId(bout))));
+  const protectedAssignments = previousAssignments.filter(assignment =>
+    protectedBoutIds.has(String(assignment.DEBoutId))
+  );
+  const availableStations = stations.filter(station => station?.RingId != null && station.Director?.PersonId != null);
+  if (!availableStations.length) return protectedAssignments.map(assignment => ({ ...assignment }));
+  const rounds = groupPlannedRounds(bouts);
+  const openingRoundSize = rounds[0]?.[0];
+  let stationLoads = availableStations.map(() => 0);
+  const assignments = [];
+  for (const [size, roundBouts] of rounds) {
+    const coverage = createRoundAssignments({
+      bouts: roundBouts,
+      stations: availableStations,
+      stationLoads,
+      isOpeningRound: size === openingRoundSize
+    });
+    assignments.push(...coverage.assignments);
+    stationLoads = coverage.stationLoads;
+  }
+  return [...assignments, ...protectedAssignments.map(assignment => ({ ...assignment }))];
+};

package/src/stories/Templates/EventManagement/Bracket/BracketStoryAssignments.test.js

@@ -0,0 +1,152 @@
+import { describe, expect, it } from 'vitest';
+import { activateStoryBout, canStoryDirectorDirectBout } from './BracketStoryHarness.js';
+import { distributeStoryAssignments } from './BracketStoryAssignments.js';
+
+const stations = Array.from({ length: 6 }, (_, index) => ({ RingId: index + 1, Director: { PersonId: index + 101 } }));
+const createPerson = PersonId => ({ PersonId, DisplayName: PersonId ? 'Fencer ' + PersonId : 'BYE' });
+const createBracket = () => {
+  const bouts = [];
+  for (let size = 64; size >= 2; size /= 2) {
+    for (let index = 0; index < size / 2; index++) {
+      const id = bouts.length + 1;
+      bouts.push({
+        BoutId: id + 1000,
+        DEBoutId: id,
+        RoundLabel: size >= 8 ? 'Table of ' + size : { 4: 'Semifinal', 2: 'Final' }[size],
+        Status: 'Scheduled',
+        Person1: createPerson(size === 64 ? index * 2 + 1 : 0),
+        Person2: createPerson(size === 64 ? index * 2 + 2 : 0)
+      });
+    }
+  }
+  return bouts;
+};
+const getRingIds = (assignments, bouts) => {
+  const ringByBout = new Map(assignments.map(assignment => [assignment.DEBoutId, assignment.RingId]));
+  return bouts.map(bout => ringByBout.get(bout.DEBoutId));
+};
+const countAssignments = (assignments, count) =>
+  stations
+    .slice(0, count)
+    .map(station => assignments.filter(assignment => assignment.RingId === station.RingId).length);
+
+describe('Bracket story section coverage', () => {
+  it.each([2, 4])('keeps exact early bracket sections and includes semifinals with %i directors', count => {
+    const bouts = createBracket();
+    const original = structuredClone(bouts);
+    const assignments = distributeStoryAssignments({ bouts, stations: stations.slice(0, count) });
+    expect(assignments).toHaveLength(62);
+    for (const size of [64, 32, 16, 8]) {
+      const round = bouts.filter(bout => bout.RoundLabel === 'Table of ' + size);
+      expect(getRingIds(assignments, round)).toEqual(
+        round.map((_, index) => Math.floor(index / (round.length / count)) + 1)
+      );
+    }
+    expect(bouts).toEqual(original);
+  });
+
+  it.each([
+    [3, [11, 11, 10]],
+    [5, [7, 7, 6, 6, 6]],
+    [6, [6, 6, 5, 5, 5, 5]]
+  ])('balances contiguous groups and total workload with %i directors', (count, openingCounts) => {
+    const bouts = createBracket();
+    const assignments = distributeStoryAssignments({ bouts, stations: stations.slice(0, count) });
+    expect(
+      countAssignments(
+        assignments.filter(assignment => assignment.DEBoutId <= 32),
+        count
+      )
+    ).toEqual(openingCounts);
+    const totals = countAssignments(assignments, count);
+    expect(totals.reduce((sum, total) => sum + total, 0)).toBe(62);
+    expect(Math.max(...totals) - Math.min(...totals)).toBeLessThanOrEqual(1);
+    for (const size of [64, 32, 16, 8]) {
+      const ringIds = getRingIds(
+        assignments,
+        bouts.filter(bout => bout.RoundLabel === 'Table of ' + size)
+      );
+      expect(ringIds).toEqual([...ringIds].sort((first, second) => first - second));
+    }
+  });
+
+  it('ignores opening BYEs as work while planning unresolved later bouts', () => {
+    const bouts = createBracket();
+    for (const index of [0, 7, 18]) bouts[index].Person2 = createPerson(0);
+    const assignments = distributeStoryAssignments({ bouts, stations: stations.slice(0, 3) });
+    expect(assignments).toHaveLength(59);
+    expect(
+      countAssignments(
+        assignments.filter(assignment => assignment.DEBoutId <= 32),
+        3
+      )
+    ).toEqual([10, 10, 9]);
+    expect(countAssignments(assignments, 3)).toEqual([20, 20, 19]);
+    expect(getRingIds(assignments, [bouts[0], bouts[7], bouts[18]])).toEqual([undefined, undefined, undefined]);
+    expect(
+      getRingIds(
+        assignments,
+        bouts.filter(bout => bout.RoundLabel === 'Table of 8')
+      )
+    ).not.toContain(undefined);
+  });
+
+  it('keeps halves and quarters aligned even when opening BYEs make workloads uneven', () => {
+    const bouts = createBracket();
+    bouts[0].Person2 = createPerson(0);
+    bouts[1].Person2 = createPerson(0);
+    const assignments = distributeStoryAssignments({ bouts, stations: stations.slice(0, 2) });
+    expect(getRingIds(assignments, [bouts[15], bouts[16]])).toEqual([1, 2]);
+    expect(countAssignments(assignments, 2)).toEqual([29, 31]);
+  });
+
+  it('assigns semifinals while leaving finals, placement, and consolation shared', () => {
+    const bouts = createBracket();
+    bouts.push(
+      ...['Third Place', 'Consolation Round 8', 'Grand Final'].map((RoundLabel, index) => ({
+        ...bouts.at(-1),
+        BoutId: 2000 + index,
+        DEBoutId: 100 + index,
+        RoundLabel
+      }))
+    );
+    const assignments = distributeStoryAssignments({ bouts, stations });
+    const shared = bouts.filter(bout => !bout.RoundLabel.startsWith('Table of') && bout.RoundLabel !== 'Semifinal');
+    expect(
+      getRingIds(
+        assignments,
+        bouts.filter(bout => bout.RoundLabel === 'Semifinal')
+      )
+    ).not.toContain(undefined);
+    expect(getRingIds(assignments, shared)).toEqual(shared.map(() => undefined));
+    const final = {
+      ...bouts.find(bout => bout.RoundLabel === 'Final'),
+      Person1: createPerson(1),
+      Person2: createPerson(2)
+    };
+    const freshDirector = { Director: { PersonId: 999, DisplayName: 'Fresh Director' } };
+    expect(canStoryDirectorDirectBout(final, 999)).toBe(true);
+    expect(activateStoryBout(final, freshDirector)).toMatchObject({
+      RefereeId: 999,
+      RefName: 'Fresh Director',
+      Status: 'Active'
+    });
+  });
+
+  it('redistributes scheduled coverage after adding a director while preserving active and completed plans', () => {
+    const bouts = createBracket();
+    const previousAssignments = distributeStoryAssignments({ bouts, stations: stations.slice(0, 2) });
+    bouts[14].Status = 'Active';
+    bouts[15].Status = 'Completed';
+    const assignments = distributeStoryAssignments({ bouts, stations: stations.slice(0, 4), previousAssignments });
+    expect(getRingIds(assignments, [bouts[14], bouts[15]])).toEqual([1, 1]);
+    expect(getRingIds(assignments, [bouts[8], bouts[16], bouts[24]])).toEqual([2, 3, 4]);
+    expect(new Set(assignments.map(assignment => assignment.DEBoutId)).size).toBe(assignments.length);
+  });
+
+  it('handles no bouts, no stations, and invalid stations without creating assignments', () => {
+    expect(distributeStoryAssignments()).toEqual([]);
+    expect(distributeStoryAssignments({ bouts: createBracket(), stations: [null, {}, { RingId: 1 }] })).toEqual([]);
+    expect(distributeStoryAssignments({ bouts: [], stations })).toEqual([]);
+  });
+});

package/src/stories/Templates/EventManagement/Bracket/BracketStoryHarness.js

@@ -1,39 +1,39 @@
-const STORY_DIRECTOR = {
-  PersonId: -1,
-  DisplayName: 'Story Director'
-};
-
-const isSameBout = (bout, selectedBout) => String(bout.BoutId) === String(selectedBout.BoutId);
-const isActiveBout = bout => String(bout?.Status || '').toLowerCase() === 'active';
-const hasSameIdentity = (firstId, secondId) => String(firstId ?? '') === String(secondId ?? '');
-
-export const cloneStoryBouts = bouts => (bouts || []).map(bout => ({ ...bout }));
-
-export const canStoryDirectorDirectBout = (bout, directorId) =>
-  !isActiveBout(bout) || hasSameIdentity(bout.RefereeId, directorId);
-
-export const getStoryDirectorId = station => station?.Director?.PersonId ?? STORY_DIRECTOR.PersonId;
-
-export const activateStoryBout = (bout, station = null) => {
-  const director = station?.Director || STORY_DIRECTOR;
-
-  return {
-    ...bout,
-    Status: 'Active',
-    RefereeId: director.PersonId,
-    RefName: director.DisplayName,
-    RingName: station?.RingName || bout.RingName || 'DE Bracket',
-    TimerStatus: bout.TimerStatus || 'stopped',
-    TimeLeft: Number(bout.TimeLeft) > 0 ? Number(bout.TimeLeft) : 180
-  };
-};
-
-export const clearStoryBoutChrome = bout => ({
-  ...bout,
-  RingName: '',
-  TimerStatus: 'stopped',
-  TimeLeft: 0
-});
-
-export const replaceStoryBout = (bouts, selectedBout) =>
-  bouts.map(bout => (isSameBout(bout, selectedBout) ? { ...selectedBout } : bout));
+const STORY_DIRECTOR = {
+  PersonId: -1,
+  DisplayName: 'Story Director'
+};
+
+const isSameBout = (bout, selectedBout) => String(bout.BoutId) === String(selectedBout.BoutId);
+const isActiveBout = bout => String(bout?.Status || '').toLowerCase() === 'active';
+const hasSameIdentity = (firstId, secondId) => String(firstId ?? '') === String(secondId ?? '');
+
+export const cloneStoryBouts = bouts => (bouts || []).map(bout => ({ ...bout }));
+
+export const canStoryDirectorDirectBout = (bout, directorId) =>
+  !isActiveBout(bout) || hasSameIdentity(bout.RefereeId, directorId);
+
+export const getStoryDirectorId = station => station?.Director?.PersonId ?? STORY_DIRECTOR.PersonId;
+
+export const activateStoryBout = (bout, station = null) => {
+  const director = station?.Director || STORY_DIRECTOR;
+
+  return {
+    ...bout,
+    Status: 'Active',
+    RefereeId: director.PersonId,
+    RefName: director.DisplayName,
+    RingName: station?.RingName || bout.RingName || 'DE Bracket',
+    TimerStatus: bout.TimerStatus || 'stopped',
+    TimeLeft: Number(bout.TimeLeft) > 0 ? Number(bout.TimeLeft) : 180
+  };
+};
+
+export const clearStoryBoutChrome = bout => ({
+  ...bout,
+  RingName: '',
+  TimerStatus: 'stopped',
+  TimeLeft: 0
+});
+
+export const replaceStoryBout = (bouts, selectedBout) =>
+  bouts.map(bout => (isSameBout(bout, selectedBout) ? { ...selectedBout } : bout));

package/src/stories/Templates/EventManagement/Bracket/BracketStoryHarness.test.js

@@ -1,79 +1,79 @@
-import { describe, expect, it } from 'vitest';
-import {
-  activateStoryBout,
-  canStoryDirectorDirectBout,
-  clearStoryBoutChrome,
-  replaceStoryBout
-} from './BracketStoryHarness';
-
-describe('Bracket story parent simulation', () => {
-  it('returns an Active parent-owned bout without mutating the selected bout', () => {
-    const scheduledBout = { BoutId: 42, Status: 'Scheduled', TimeLeft: 0, Score1: 2, Score2: 1 };
-
-    const activeBout = activateStoryBout(scheduledBout);
-
-    expect(activeBout).toMatchObject({
-      Status: 'Active',
-      RefereeId: -1,
-      RefName: 'Story Director',
-      RingName: 'DE Bracket',
-      TimerStatus: 'stopped',
-      TimeLeft: 180,
-      Score1: 2,
-      Score2: 1
-    });
-    expect(scheduledBout).toEqual({ BoutId: 42, Status: 'Scheduled', TimeLeft: 0, Score1: 2, Score2: 1 });
-  });
-
-  it('replaces only the selected bout in the story-owned collection', () => {
-    const bouts = [
-      { BoutId: 41, Status: 'Scheduled' },
-      { BoutId: 42, Status: 'Scheduled' }
-    ];
-    const activeBout = { BoutId: 42, Status: 'Active' };
-
-    expect(replaceStoryBout(bouts, activeBout)).toEqual([bouts[0], activeBout]);
-  });
-
-  it('uses the viewer station when the story simulates pulling a scheduled bout', () => {
-    const scheduledBout = { BoutId: 42, Status: 'Scheduled' };
-    const station = {
-      RingName: 'Ring 1',
-      Director: { PersonId: 1001, DisplayName: 'Alex Morgan' }
-    };
-
-    expect(activateStoryBout(scheduledBout, station)).toMatchObject({
-      Status: 'Active',
-      RefereeId: 1001,
-      RefName: 'Alex Morgan',
-      RingName: 'Ring 1'
-    });
-    expect(scheduledBout).toEqual({ BoutId: 42, Status: 'Scheduled' });
-  });
-
-  it('allows scheduled bouts to move but protects an Active bout owned by another director', () => {
-    expect(canStoryDirectorDirectBout({ Status: 'Scheduled', RefereeId: 2002 }, 1001)).toBe(true);
-    expect(canStoryDirectorDirectBout({ Status: 'Active', RefereeId: 2002 }, 1001)).toBe(false);
-    expect(canStoryDirectorDirectBout({ Status: 'Active', RefereeId: 1001 }, '1001')).toBe(true);
-  });
-
-  it('clears story-only ring and timer fields without resetting status or scores', () => {
-    const activeBout = {
-      BoutId: 42,
-      Status: 'Active',
-      Score1: 5,
-      Score2: 4,
-      RingName: 'Ring 3',
-      TimerStatus: 'running',
-      TimeLeft: 72
-    };
-
-    expect(clearStoryBoutChrome(activeBout)).toEqual({
-      ...activeBout,
-      RingName: '',
-      TimerStatus: 'stopped',
-      TimeLeft: 0
-    });
-    expect(activeBout).toMatchObject({ Status: 'Active', Score1: 5, Score2: 4 });
-  });
-});
+import { describe, expect, it } from 'vitest';
+import {
+  activateStoryBout,
+  canStoryDirectorDirectBout,
+  clearStoryBoutChrome,
+  replaceStoryBout
+} from './BracketStoryHarness';
+
+describe('Bracket story parent simulation', () => {
+  it('returns an Active parent-owned bout without mutating the selected bout', () => {
+    const scheduledBout = { BoutId: 42, Status: 'Scheduled', TimeLeft: 0, Score1: 2, Score2: 1 };
+
+    const activeBout = activateStoryBout(scheduledBout);
+
+    expect(activeBout).toMatchObject({
+      Status: 'Active',
+      RefereeId: -1,
+      RefName: 'Story Director',
+      RingName: 'DE Bracket',
+      TimerStatus: 'stopped',
+      TimeLeft: 180,
+      Score1: 2,
+      Score2: 1
+    });
+    expect(scheduledBout).toEqual({ BoutId: 42, Status: 'Scheduled', TimeLeft: 0, Score1: 2, Score2: 1 });
+  });
+
+  it('replaces only the selected bout in the story-owned collection', () => {
+    const bouts = [
+      { BoutId: 41, Status: 'Scheduled' },
+      { BoutId: 42, Status: 'Scheduled' }
+    ];
+    const activeBout = { BoutId: 42, Status: 'Active' };
+
+    expect(replaceStoryBout(bouts, activeBout)).toEqual([bouts[0], activeBout]);
+  });
+
+  it('uses the viewer station when the story simulates pulling a scheduled bout', () => {
+    const scheduledBout = { BoutId: 42, Status: 'Scheduled' };
+    const station = {
+      RingName: 'Ring 1',
+      Director: { PersonId: 1001, DisplayName: 'Alex Morgan' }
+    };
+
+    expect(activateStoryBout(scheduledBout, station)).toMatchObject({
+      Status: 'Active',
+      RefereeId: 1001,
+      RefName: 'Alex Morgan',
+      RingName: 'Ring 1'
+    });
+    expect(scheduledBout).toEqual({ BoutId: 42, Status: 'Scheduled' });
+  });
+
+  it('allows scheduled bouts to move but protects an Active bout owned by another director', () => {
+    expect(canStoryDirectorDirectBout({ Status: 'Scheduled', RefereeId: 2002 }, 1001)).toBe(true);
+    expect(canStoryDirectorDirectBout({ Status: 'Active', RefereeId: 2002 }, 1001)).toBe(false);
+    expect(canStoryDirectorDirectBout({ Status: 'Active', RefereeId: 1001 }, '1001')).toBe(true);
+  });
+
+  it('clears story-only ring and timer fields without resetting status or scores', () => {
+    const activeBout = {
+      BoutId: 42,
+      Status: 'Active',
+      Score1: 5,
+      Score2: 4,
+      RingName: 'Ring 3',
+      TimerStatus: 'running',
+      TimeLeft: 72
+    };
+
+    expect(clearStoryBoutChrome(activeBout)).toEqual({
+      ...activeBout,
+      RingName: '',
+      TimerStatus: 'stopped',
+      TimeLeft: 0
+    });
+    expect(activeBout).toMatchObject({ Status: 'Active', Score1: 5, Score2: 4 });
+  });
+});

package/src/stories/Templates/EventManagement/EditEventInfo/EditEventInfo.stories.js

@@ -1,93 +1,93 @@
-import { ref } from 'vue';
-import editConfig from './EditEventInfo.vue';
-import singleEventMock from '../../../../mocks/singleEventMock.js';
-import eventRules from '../../../../mocks/eventRules.js';
-import getAllWeapons from '../../../../mocks/getAllWeapons.js';
-
-export default {
-  title: 'Templates/EventManagement/EditEventInfo',
-  component: editConfig,
-  tags: ['autodocs'],
-  args: {
-    event: singleEventMock,
-    weapons: getAllWeapons,
-    rules: eventRules,
-    userLevel: 'admin'
-  },
-  argTypes: {
-    editMode: { control: 'boolean' },
-    step: { control: { type: 'number', min: 1, max: 5 } },
-    saving: { control: 'boolean' },
-    saveError: { control: 'text' },
-    saveNotice: { control: 'text' },
-    event: { control: 'object' },
-    weapons: { control: 'object' },
-    rules: { control: 'object' },
-    userLevel: { control: 'text' }
-  }
-};
-
-export const Default = {
-  args: {
-    event: singleEventMock,
-    weapons: getAllWeapons,
-    rules: eventRules,
-    userLevel: 'admin'
-  }
-};
-
-export const NewEvent = {
-  args: {
-    event: {
-      Absent: 0,
-      Date: new Date().toISOString().split('T')[0],
-      EventName: '',
-      Flights: 1,
-      NumberOfPools: 2,
-      NumberOfRings: 2,
-      PoolSize: 0,
-      Present: 0,
-      StartTime: '12:00:00',
-      Status: 'planning',
-      TournamentId: 10
-    },
-    weapons: getAllWeapons,
-    rules: [],
-    userLevel: 'admin'
-  }
-};
-
-export const EditWithStepSaves = {
-  args: { ...Default.args, editMode: true, step: 1 },
-  render: args => ({
-    components: { Editor: editConfig },
-    setup() {
-      const event = ref(JSON.parse(JSON.stringify(args.event)));
-      const step = ref(args.step);
-      const saving = ref(false);
-      const notice = ref('');
-      const saveStep = async request => {
-        saving.value = true;
-        await new Promise(resolve => setTimeout(resolve, 500));
-        event.value = request.event;
-        step.value = Math.min(request.step + 1, 5);
-        notice.value = 'Changes saved.';
-        saving.value = false;
-      };
-      const clearNotice = dirty => {
-        if (dirty) notice.value = '';
-      };
-      return { args, event, step, saving, notice, saveStep, clearNotice };
-    },
-    template:
-      '<Editor v-bind="args" :rules="args.rules" :weapons="args.weapons" :event="event" :step="step" :saving="saving" :saveNotice="notice" @save:step="saveStep" @navigate:step="step = $event" @update:dirty="clearNotice" />'
-  })
-};
-
-export const SavingStep = {
-  args: { ...Default.args, editMode: true, step: 2, saving: true }
-};
-
-export const StepSaveFailed = {
-  args: { ...Default.args, editMode: true, step: 2, saveError: 'Changes could not be saved. Please try again.' }
-};
+import { ref } from 'vue';
+import editConfig from './EditEventInfo.vue';
+import singleEventMock from '../../../../mocks/singleEventMock.js';
+import eventRules from '../../../../mocks/eventRules.js';
+import getAllWeapons from '../../../../mocks/getAllWeapons.js';
+
+export default {
+  title: 'Templates/EventManagement/EditEventInfo',
+  component: editConfig,
+  tags: ['autodocs'],
+  args: {
+    event: singleEventMock,
+    weapons: getAllWeapons,
+    rules: eventRules,
+    userLevel: 'admin'
+  },
+  argTypes: {
+    editMode: { control: 'boolean' },
+    step: { control: { type: 'number', min: 1, max: 5 } },
+    saving: { control: 'boolean' },
+    saveError: { control: 'text' },
+    saveNotice: { control: 'text' },
+    event: { control: 'object' },
+    weapons: { control: 'object' },
+    rules: { control: 'object' },
+    userLevel: { control: 'text' }
+  }
+};
+
+export const Default = {
+  args: {
+    event: singleEventMock,
+    weapons: getAllWeapons,
+    rules: eventRules,
+    userLevel: 'admin'
+  }
+};
+
+export const NewEvent = {
+  args: {
+    event: {
+      Absent: 0,
+      Date: new Date().toISOString().split('T')[0],
+      EventName: '',
+      Flights: 1,
+      NumberOfPools: 2,
+      NumberOfRings: 2,
+      PoolSize: 0,
+      Present: 0,
+      StartTime: '12:00:00',
+      Status: 'planning',
+      TournamentId: 10
+    },
+    weapons: getAllWeapons,
+    rules: [],
+    userLevel: 'admin'
+  }
+};
+
+export const EditWithStepSaves = {
+  args: { ...Default.args, editMode: true, step: 1 },
+  render: args => ({
+    components: { Editor: editConfig },
+    setup() {
+      const event = ref(JSON.parse(JSON.stringify(args.event)));
+      const step = ref(args.step);
+      const saving = ref(false);
+      const notice = ref('');
+      const saveStep = async request => {
+        saving.value = true;
+        await new Promise(resolve => setTimeout(resolve, 500));
+        event.value = request.event;
+        step.value = Math.min(request.step + 1, 5);
+        notice.value = 'Changes saved.';
+        saving.value = false;
+      };
+      const clearNotice = dirty => {
+        if (dirty) notice.value = '';
+      };
+      return { args, event, step, saving, notice, saveStep, clearNotice };
+    },
+    template:
+      '<Editor v-bind="args" :rules="args.rules" :weapons="args.weapons" :event="event" :step="step" :saving="saving" :saveNotice="notice" @save:step="saveStep" @navigate:step="step = $event" @update:dirty="clearNotice" />'
+  })
+};
+
+export const SavingStep = {
+  args: { ...Default.args, editMode: true, step: 2, saving: true }
+};
+
+export const StepSaveFailed = {
+  args: { ...Default.args, editMode: true, step: 2, saveError: 'Changes could not be saved. Please try again.' }
+};