Add select all checkbox (#116)

* Add import button for JotForm in columns configurator

* init e2e import jotform

* Add Jotform import permission check and update filter options

* Refactor imports and add user permissions query

* Refactor import-jotform.spec.ts and add SelectionPage class

* Add importJotformCta element to SelectionPage

* feat(login-selection): if login with no  enought permissions show error message

* refactor tests

* Refactor import jotform functionality and handle form already connected

* chore: Update api

* test: Use correct playwright version

* feat: Use fixed device filter

* feat: Add gender filter

* feat: Add bughunting level filters

* rework: Refactor filters to checkboxfilter component

* Add form modal functionality and update import button behavior

* Add ImportSurveyModal component and update selectionSlice

* rework: Use specific types for filters

* chore: Fix types

* feat: Add exclude/include testers

* Add form inputs to the survey modal

* feat: Add age filters

* Disable testerId select in ImportSurveyModal and add test case for it

* feat: Add style

* wip(selection): Jotforms API queries to ImportSurveyModal

* feat: Add question filters

* feat: Use filtered items to check selected

* Fix pagination bug in useItems function

* Add SelectAllFirstDevicesCheckbox component to SelectionTable

* fix: Remove old component

* feat: Move checkbox to thead

---------

Co-authored-by: Iacopo Leardini <[email protected]>
Co-authored-by: sinatragianpaolo <[email protected]>

src/pages/campaigns/selection/SelectionTable/components/SelectAllFirstDevicesCheckbox.tsx

@@ -0,0 +1,46 @@
+import { Checkbox } from "@appquality/appquality-design-system";
+import { FC } from "react";
+import {
+  checkUserDevice,
+  clearSelectedDevice,
+} from "src/pages/campaigns/selection/selectionSlice";
+import { useAppDispatch } from "src/store";
+import useItems from "../../useItems";
+
+const SelectAllFirstDevicesCheckbox: FC<{ campaignId: string }> = ({
+  campaignId,
+}) => {
+  const dispatch = useAppDispatch();
+
+  const { data, isFetching } = useItems(campaignId, { withLimit: false });
+  if (isFetching || !data || !data.results) {
+    return null; // Return null instead of an object
+  }
+  const candidatedDevices = data.results.map((tester) => ({
+    testerId: tester.id.toString(),
+    deviceId: tester.devices.length > 0 ? tester.devices[0].id.toString() : "",
+  }));
+
+  return (
+    <Checkbox
+      name="selectAllFirstDevices"
+      id="selectAllFirstDevices"
+      onChange={(e) => {
+        dispatch(clearSelectedDevice());
+
+        if (e.target.checked) {
+          candidatedDevices.forEach((device) => {
+            dispatch(
+              checkUserDevice({
+                userId: device.testerId,
+                deviceId: device.deviceId,
+              })
+            );
+          });
+        }
+      }}
+    />
+  );
+};
+
+export default SelectAllFirstDevicesCheckbox;

src/pages/campaigns/selection/SelectionTable/index.tsx

@@ -4,13 +4,23 @@ import useTableRows from "src/pages/campaigns/selection/SelectionTable/useTableR
 import { changeTablePage } from "src/pages/campaigns/selection/selectionSlice";
 import { useAppDispatch, useAppSelector } from "src/store";
 import { StyledSelectionTable } from "./_style";
+import { useColumns } from "./useColumns";
 
 const SelectionTable: FC<{ id: string }> = ({ id }) => {
   const dispatch = useAppDispatch();
   const { rows, totalRows, isFetching, isLoading } = useTableRows(id);
-  const { devicesPerPage, currentPage, tableColumns } = useAppSelector(
-    (state) => state.selection
-  );
+  const columns = useColumns();
+  const {
+    devicesPerPage,
+    currentPage,
+    tableColumns: additionalColumns,
+  } = useAppSelector((state) => state.selection);
+  const tableColumns = [
+    columns[0],
+    ...additionalColumns,
+    ...columns.slice(1, columns.length - 1),
+    columns[columns.length - 1],
+  ];
   return (
     <StyledSelectionTable columns={tableColumns.length} isFetching={isFetching}>
       <Table

src/pages/campaigns/selection/SelectionTable/useColumns.tsx

@@ -0,0 +1,50 @@
+import { TableType } from "@appquality/appquality-design-system";
+import { useParams } from "react-router-dom";
+import SelectAllFirstDevicesCheckbox from "./components/SelectAllFirstDevicesCheckbox";
+
+export const useColumns: () => TableType.Column[] = () => {
+  const { id } = useParams<{ id: string }>();
+
+  return [
+    {
+      dataIndex: "nameId",
+      key: "nameId",
+      title: "Name ID",
+    },
+    {
+      dataIndex: "age",
+      key: "age",
+      title: "Age",
+    },
+    {
+      dataIndex: "gender",
+      key: "gender",
+      title: "Gender",
+    },
+    {
+      dataIndex: "bhlevel",
+      key: "bhlevel",
+      title: "BH Level",
+    },
+    {
+      dataIndex: "devices",
+      key: "devices",
+      title: "Devices",
+    },
+    {
+      dataIndex: "os",
+      key: "os",
+      title: "OS",
+    },
+    {
+      dataIndex: "actions",
+      key: "actions",
+      title: (
+        <SelectAllFirstDevicesCheckbox
+          data-testid="selectAllFirstDevices"
+          campaignId={id}
+        />
+      ),
+    },
+  ];
+};

src/pages/campaigns/selection/SelectionTable/useTableRows.tsx

@@ -4,7 +4,6 @@ import DeviceCheckbox from "src/pages/campaigns/selection/SelectionTable/compone
 import { useAppDispatch } from "src/store";
 import { setTableColumns } from "../selectionSlice";
 import useItems from "../useItems";
-import { columns } from "./columns";
 
 interface RowType extends TableType.Row {
   key: string;
@@ -24,7 +23,7 @@ const useTableRows = (id: string) => {
   const { data, isFetching, isLoading, error, totalRows } = useItems(id);
   useEffect(() => {
     if (data?.results) {
-      const newColumns = [...columns];
+      const newColumns: TableType.Column[] = [];
       data.results[0]?.questions?.forEach((q, i) => {
         if (q.title && q.id)
           newColumns.splice(1 + i, 0, {

src/pages/campaigns/selection/selectionSlice.ts

@@ -1,6 +1,5 @@
 import { TableType } from "@appquality/appquality-design-system";
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { columns } from "./SelectionTable/columns";
 
 type PartialRecord<K extends keyof any, T> = {
   [P in K]?: T;
@@ -43,7 +42,7 @@ export const initialState: SelectionState = {
   isFormModalOpen: false,
   isSurveyModalOpen: false,
   questionsId: [],
-  tableColumns: columns,
+  tableColumns: [],
   disableApplyFilters: true,
   filters: {},
 };

src/pages/campaigns/selection/useItems.tsx

@@ -14,7 +14,7 @@ const useItems = (id: string, options?: { withLimit: boolean }) => {
             start: devicesPerPage * (currentPage - 1),
             limit: devicesPerPage,
           }
-        : {}),
+        : { start: 0, limit: Number.MAX_SAFE_INTEGER }),
       ...(questionsId.length ? { fields: questionsId.join(",") } : {}),
       filterByInclude,
       filterByExclude,