Function SuppliersPanel

export default function SuppliersPanel() {
  const appContext = useAppContext();

  /**
   * Handles toggling a supplier's selection state.
   * Updates the application settings with the new list of selected suppliers.
   *
   * @param supplierName - The name of the supplier to toggle
   * @returns A callback function that handles the toggle action
   * @source
   */
  const handleToggle = (supplierName: string) => () => {
    // `suppliers` is optional on UserSettings; fall back to an empty list so
    // toggling works even before App.tsx's mount effect seeds the default
    // supplier set.
    const selectedSuppliers = appContext.userSettings.suppliers ?? [];
    const currentIndex = selectedSuppliers.indexOf(supplierName);
    const newChecked = [...selectedSuppliers];

    if (currentIndex === -1) {
      newChecked.push(supplierName);
    } else {
      newChecked.splice(currentIndex, 1);
    }

    appContext.setUserSettings({
      ...appContext.userSettings,
      suppliers: newChecked,
    });
  };

  const handleToggleAll = (e: ChangeEvent<HTMLInputElement>) => {
    console.log("handleToggleAll", e.target.checked);
    let newChecked: string[] = [];
    if (e.target.checked === true) {
      newChecked = [...SupplierFactory.supplierList()];
    }

    appContext.setUserSettings({
      ...appContext.userSettings,
      suppliers: newChecked,
    });
  };

  return (
    <List dense sx={{ width: "100%", bgcolor: "background.paper", color: "text.primary" }}>
      <ListItem>
        <ListItemText primary="Suppliers" />
        <Checkbox
          value="all"
          edge="end"
          onChange={handleToggleAll}
          checked={
            (appContext.userSettings.suppliers?.length ?? 0) ===
            SupplierFactory.supplierList().length
          }
          aria-labelledby="checkbox-list-secondary-label-all"
          size="small"
        />
      </ListItem>
      <Divider />
      {SupplierFactory.supplierList().map((supplierName) => {
        const labelId = `checkbox-list-secondary-label-${supplierName}`;
        return (
          <ListItem
            key={supplierName}
            secondaryAction={
              <Checkbox
                value={supplierName}
                edge="end"
                onChange={handleToggle(supplierName)}
                checked={appContext.userSettings.suppliers?.includes(supplierName) ?? false}
                aria-labelledby={labelId}
                size="small"
              />
            }
            disablePadding
          >
            <ListItemButton>
              <ListItemAvatar>
                <Avatar
                  alt={`Avatar n°${supplierName}`}
                  src={`/static/images/avatar/${supplierName}.png`}
                />
              </ListItemAvatar>
              <ListItemText id={labelId} primary={supplierName.replace(/^Supplier/, "")} />
            </ListItemButton>
          </ListItem>
        );
      })}
    </List>
  );
}
Copy