Added series index selection

frontend/src/Series/Index/Table/SeriesIndexRow.tsx

@@ -11,6 +11,7 @@ import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import ProgressBar from 'Components/ProgressBar';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
+import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
 import Column from 'Components/Table/Column';
 import TagListConnector from 'Components/TagListConnector';
 import { icons } from 'Helpers/Props';
@@ -32,10 +33,11 @@ interface SeriesIndexRowProps {
   seriesId: number;
   sortKey: string;
   columns: Column[];
+  isSelectMode: boolean;
 }
 
 function SeriesIndexRow(props: SeriesIndexRowProps) {
-  const { seriesId, columns } = props;
+  const { seriesId, columns, isSelectMode } = props;
 
   const {
     series,
@@ -82,6 +84,7 @@ function SeriesIndexRow(props: SeriesIndexRowProps) {
   const [hasBannerError, setHasBannerError] = useState(false);
   const [isEditSeriesModalOpen, setIsEditSeriesModalOpen] = useState(false);
   const [isDeleteSeriesModalOpen, setIsDeleteSeriesModalOpen] = useState(false);
+  const [selectState, selectDispatch] = useSelect();
 
   const onRefreshPress = useCallback(() => {
     dispatch(
@@ -130,8 +133,29 @@ function SeriesIndexRow(props: SeriesIndexRowProps) {
     // Mock handler to satisfy `onChange` being required for `CheckInput`.
   }, []);
 
+  const onSelectedChange = useCallback(
+    ({ id, value, shiftKey }) => {
+      selectDispatch({
+        type: SelectActionType.ToggleSelected,
+        id,
+        isSelected: value,
+        shiftKey,
+      });
+    },
+    [selectDispatch]
+  );
+
   return (
     <>
+      {isSelectMode ? (
+        <VirtualTableSelectCell
+          id={seriesId}
+          isSelected={selectState.selectedState[seriesId]}
+          isDisabled={false}
+          onSelectedChange={onSelectedChange}
+        />
+      ) : null}
+
       {columns.map((column) => {
         const { name, isVisible } = column;
 

frontend/src/Series/Index/Table/SeriesIndexTable.tsx

@@ -25,6 +25,7 @@ interface RowItemData {
   items: Series[];
   sortKey: string;
   columns: Column[];
+  isSelectMode: boolean;
 }
 
 interface SeriesIndexTableProps {
@@ -34,6 +35,7 @@ interface SeriesIndexTableProps {
   jumpToCharacter?: string;
   scrollTop?: number;
   scrollerRef: React.MutableRefObject<HTMLElement>;
+  isSelectMode: boolean;
   isSmallScreen: boolean;
 }
 
@@ -47,7 +49,7 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
   style,
   data,
 }) => {
-  const { items, sortKey, columns } = data;
+  const { items, sortKey, columns, isSelectMode } = data;
 
   if (index >= items.length) {
     return null;
@@ -67,6 +69,7 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
         seriesId={series.id}
         sortKey={sortKey}
         columns={columns}
+        isSelectMode={isSelectMode}
       />
     </div>
   );
@@ -82,6 +85,7 @@ function SeriesIndexTable(props: SeriesIndexTableProps) {
     sortKey,
     sortDirection,
     jumpToCharacter,
+    isSelectMode,
     isSmallScreen,
     scrollerRef,
   } = props;
@@ -177,6 +181,7 @@ function SeriesIndexTable(props: SeriesIndexTableProps) {
           columns={columns}
           sortKey={sortKey}
           sortDirection={sortDirection}
+          isSelectMode={isSelectMode}
         />
         <List<RowItemData>
           ref={listRef}
@@ -193,6 +198,7 @@ function SeriesIndexTable(props: SeriesIndexTableProps) {
             items,
             sortKey,
             columns,
+            isSelectMode,
           }}
         >
           {Row}

frontend/src/Series/Index/Table/SeriesIndexTableHeader.tsx

@@ -7,6 +7,7 @@ import Column from 'Components/Table/Column';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import VirtualTableHeader from 'Components/Table/VirtualTableHeader';
 import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
+import VirtualTableSelectAllHeaderCell from 'Components/Table/VirtualTableSelectAllHeaderCell';
 import { icons } from 'Helpers/Props';
 import SortDirection from 'Helpers/Props/SortDirection';
 import {
@@ -22,12 +23,13 @@ interface SeriesIndexTableHeaderProps {
   columns: Column[];
   sortKey?: string;
   sortDirection?: SortDirection;
+  isSelectMode: boolean;
 }
 
 function SeriesIndexTableHeader(props: SeriesIndexTableHeaderProps) {
-  const { showBanners, columns, sortKey, sortDirection } = props;
-
+  const { showBanners, columns, sortKey, sortDirection, isSelectMode } = props;
   const dispatch = useDispatch();
+  const [selectState, selectDispatch] = useSelect();
 
   const onSortPress = useCallback(
     (value) => {
@@ -43,8 +45,25 @@ function SeriesIndexTableHeader(props: SeriesIndexTableHeaderProps) {
     [dispatch]
   );
 
+  const onSelectAllChange = useCallback(
+    ({ value }) => {
+      selectDispatch({
+        type: value ? SelectActionType.SelectAll : SelectActionType.UnselectAll,
+      });
+    },
+    [selectDispatch]
+  );
+
   return (
     <VirtualTableHeader>
+      {isSelectMode ? (
+        <VirtualTableSelectAllHeaderCell
+          allSelected={selectState.allSelected}
+          allUnselected={selectState.allUnselected}
+          onSelectAllChange={onSelectAllChange}
+        />
+      ) : null}
+
       {columns.map((column) => {
         const { name, label, isSortable, isVisible } = column;