Update full-width cell renderer

src/renderer/components/virtual-table/cells/full-width-disc-cell.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { ICellRendererParams } from '@ag-grid-community/core';
+import { Group } from '@mantine/core';
+import { RiCheckboxBlankLine, RiCheckboxLine } from 'react-icons/ri';
+import styled from 'styled-components';
+import { Button } from '/@/renderer/components/button';
+import { Paper } from '/@/renderer/components/paper';
+import { getNodesByDiscNumber, setNodeSelection } from '../utils';
+
+const Container = styled(Paper)`
+  padding: 0.5rem 1rem;
+  border: 1px solid transparent;
+`;
+
+export const FullWidthDiscCell = ({ node, data, api }: ICellRendererParams) => {
+  const [isSelected, setIsSelected] = useState(false);
+
+  const handleToggleDiscNodes = () => {
+    if (!data) return;
+    const discNumber = Number(node.data.id.split('-')[1]);
+    const nodes = getNodesByDiscNumber({ api, discNumber });
+
+    setNodeSelection({ isSelected: !isSelected, nodes });
+    setIsSelected((prev) => !prev);
+  };
+
+  return (
+    <Container>
+      <Group
+        position="apart"
+        w="100%"
+      >
+        <Button
+          compact
+          leftIcon={isSelected ? <RiCheckboxLine /> : <RiCheckboxBlankLine />}
+          size="md"
+          variant="subtle"
+          onClick={handleToggleDiscNodes}
+        >
+          {data.name}
+        </Button>
+      </Group>
+    </Container>
+  );
+};

src/renderer/components/virtual-table/index.tsx

@@ -37,6 +37,7 @@ export * from './table-config-dropdown';
 export * from './table-pagination';
 export * from './hooks/use-fixed-table-header';
 export * from './hooks/use-click-outside-deselect';
+export * from './utils';
 
 const TableWrapper = styled.div`
   display: flex;

src/renderer/components/virtual-table/utils.ts

@@ -0,0 +1,36 @@
+import { GridApi, RowNode } from '@ag-grid-community/core';
+
+export const getNodesByDiscNumber = (args: { api: GridApi; discNumber: number }) => {
+  const { api, discNumber } = args;
+
+  const nodes: RowNode<any>[] = [];
+  api.forEachNode((node) => {
+    if (node.data.discNumber === discNumber) nodes.push(node);
+  });
+
+  return nodes;
+};
+
+export const setNodeSelection = (args: {
+  deselectAll?: boolean;
+  isSelected: boolean;
+  nodes: RowNode<any>[];
+}) => {
+  const { nodes, isSelected } = args;
+
+  nodes.forEach((node) => {
+    node.setSelected(isSelected);
+  });
+};
+
+export const toggleNodeSelection = (args: { nodes: RowNode<any>[] }) => {
+  const { nodes } = args;
+
+  nodes.forEach((node) => {
+    if (node.isSelected()) {
+      node.setSelected(false);
+    } else {
+      node.setSelected(true);
+    }
+  });
+};