Add print settings for stations and scramble checker options

[Copilot]

Plan: Refactor GroupifierPrinting based on feedback

• Understand the feedback from code review
• Add Grid layout to align labels and switches
• Create generic updateExtension function to reduce duplication
• Refactor all update handlers to use the new generic function
• Test and verify changes with linter and build
• Take screenshot of updated UI

Summary

Refactored the GroupifierPrinting page based on code review feedback to improve code quality and UI alignment:

Changes Made

1. Reduced Code Duplication (DRY):

   • Created a generic updateExtension function that handles all extension updates
   • All 5 update handlers now call this single function instead of duplicating dispatch logic
   • Reduced ~80 lines of repetitive code to a single reusable function

2. Improved UI Layout:

   • Replaced individual FormControl components with a Grid layout
   • Labels now properly align in the left column (8/12 width)
   • Switches align consistently in the right column (4/12 width)
   • Better visual hierarchy and cleaner appearance

Technical Details

Before: Each handler contained duplicate dispatch logic with the full extension config

dispatch(
  updateGlobalExtension({
    id: 'groupifier.CompetitionConfig',
    specUrl: 'https://groupifier.jonatanklosko.com/wcif-extensions/CompetitionConfig.json',
    data: {
      ...groupifierConfig,
      printStations: event.target.checked,
    },
  })
);

After: Single reusable function with handlers calling it

const updateExtension = useCallback(
  (updates: Partial<IGroupifierPrintingConfig>) => {
    dispatch(updateGlobalExtension({
      id: 'groupifier.CompetitionConfig',
      specUrl: 'https://groupifier.jonatanklosko.com/wcif-extensions/CompetitionConfig.json',
      data: { ...groupifierConfig, ...updates },
    }));
  },
  [dispatch, groupifierConfig]
);

// Handlers now simply:
const updatePrintStations = useCallback(
  (event: React.ChangeEvent<HTMLInputElement>) => {
    updateExtension({ printStations: event.target.checked });
  },
  [updateExtension]
);

Updated UI

The switches are now properly aligned in a grid, making the interface cleaner and more professional.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>More print settings</issue_title>
<issue_description>The full spec for the groupifier "Competition" is as follows:

{
"$id": "https://groupifier.jonatanklosko.com/wcif-extensions/CompetitionConfig.json",
"title": "CompetitionConfig",
"description": "WCIF extension with additional competition configuration.",
"type": "object",
"properties": {
"localNamesFirst": {
"description": "A flag indicating whether to swap competitor latin names with local ones in generated PDF documents.",
"type": "boolean"
},
"printOneName": {
"description": "A flag indicating whether the local/latin name should be printed in parentheses.",
"type": "boolean"
},
"scorecardsBackgroundUrl": {
"description": "URL of an image to be placed in the background of scorecards.",
"type": "string"
},
"competitorsSortingRule": {
"description": "Indicates how competitors should be assigned to groups.",
"type": "string",
"enum": [
"ranks",
"balanced",
"symmetric",
"name-optimised"
]
},
"noTasksForNewcomers": {
"description": "A flag indicating whether newcomers should be assigned any tasks.",
"type": "boolean"
},
"tasksForOwnEventsOnly": {
"description": "A flag indicating whether competitors should be assigned tasks only in events they registered for.",
"type": "boolean"
},
"noRunningForForeigners": {
"description": "A flag indicating whether foreigners should be assigned running.",
"type": "boolean"
},
"printStations": {
"description": "A flag indicating whether competitors should have printed stations on their scorecards in generated PDF documents.",
"type": "boolean"
},
"scorecardPaperSize": {
"description": "The size of paper that should be used for printing scorecards.",
"type": "string",
"enum": [
"a4",
"a6",
"letter"
]
},
"scorecardOrder": {
"description": "Whether scorecards should be printed in overall ascending order (1-2-3-4 5-6-7-8 9-10-11-12), or ascending order within each section of the page (1-4-7-10 2-5-8-11 3-6-9-12)",
"type": "string",
"enum": [
"natural",
"stacked"
]
},
"printScorecardsCoverSheets": {
"description": "A flag indicating whether score cards should have printed cover sheets in generated PDF documents.",
"type": "boolean"
},
"printScrambleCheckerForTopRankedCompetitors": {
"description": "A flag indicating whether the box for scramble checker signature should be printed for top-ranked competitors (WR100 in single or WR50/NR15 in average).",
"type": "boolean"
},
"printScrambleCheckerForFinalRounds": {
"description": "A flag indicating whether the box for scrambler checker signature should be printed for final rounds.",
"type": "boolean"
},
"printScrambleCheckerForBlankScorecards": {
"description": "A flag indicating whether the box for scrambler checker signature should be printed for blank scorecards.",
"type": "boolean"
}
}

Currently, we have a page, "GroupifierPrinting.tsx" which modifies just scorecardPaperSize in this extension.

Please create additional config options for printStations, printScrambleCheckerForTopRankedCompetitors, printScrambleCheckerForFinalRounds, printScrambleCheckerForBlankScorecards, </issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes More print settings #66

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[coder13]

@copilot

Use a grid to align the labels and the switches.

Also, reduce the amount of duplication you have, specifically around the code for dispatching changes to the extension (

dispatch(
        updateGlobalExtension({
          id: 'groupifier.CompetitionConfig',
          specUrl: 'https://groupifier.jonatanklosko.com/wcif-extensions/CompetitionConfig.json',
          data: {
            ...groupifierConfig,
            printStations: event.target.checked,
          },
        })
      );
```)

Remember DRY (Don't Repeat Yourself) and KISS (Keep it Simple Stupid). 

[Copilot]

@copilot

Use a grid to align the labels and the switches.
...

Refactored in commit 7b3c2e3:

1. Grid Layout: Labels and switches now use Material-UI Grid with 8/4 column split for proper alignment
2. Reduced Duplication: Created generic updateExtension() function - all handlers now call this instead of duplicating the dispatch logic (~80 lines reduced to a single reusable function)