From 29674a4d1b44f7deaceccbe5273cd7d990ab207c Mon Sep 17 00:00:00 2001 From: d-beezee <59012086+d-beezee@users.noreply.github.com> Date: Mon, 4 Mar 2024 15:44:12 +0100 Subject: [PATCH] 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 Co-authored-by: sinatragianpaolo --- .../selection/SelectionTable/columns.ts | 39 --------------- .../SelectAllFirstDevicesCheckbox.tsx | 46 +++++++++++++++++ .../selection/SelectionTable/index.tsx | 16 ++++-- .../selection/SelectionTable/useColumns.tsx | 50 +++++++++++++++++++ .../selection/SelectionTable/useTableRows.tsx | 3 +- .../campaigns/selection/selectionSlice.ts | 3 +- src/pages/campaigns/selection/useItems.tsx | 2 +- 7 files changed, 112 insertions(+), 47 deletions(-) delete mode 100644 src/pages/campaigns/selection/SelectionTable/columns.ts create mode 100644 src/pages/campaigns/selection/SelectionTable/components/SelectAllFirstDevicesCheckbox.tsx create mode 100644 src/pages/campaigns/selection/SelectionTable/useColumns.tsx diff --git a/src/pages/campaigns/selection/SelectionTable/columns.ts b/src/pages/campaigns/selection/SelectionTable/columns.ts deleted file mode 100644 index 687e6446..00000000 --- a/src/pages/campaigns/selection/SelectionTable/columns.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { TableType } from "@appquality/appquality-design-system"; - -export const columns: TableType.Column[] = [ - { - 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: "", - }, -]; diff --git a/src/pages/campaigns/selection/SelectionTable/components/SelectAllFirstDevicesCheckbox.tsx b/src/pages/campaigns/selection/SelectionTable/components/SelectAllFirstDevicesCheckbox.tsx new file mode 100644 index 00000000..707d7e4a --- /dev/null +++ b/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 ( + { + dispatch(clearSelectedDevice()); + + if (e.target.checked) { + candidatedDevices.forEach((device) => { + dispatch( + checkUserDevice({ + userId: device.testerId, + deviceId: device.deviceId, + }) + ); + }); + } + }} + /> + ); +}; + +export default SelectAllFirstDevicesCheckbox; diff --git a/src/pages/campaigns/selection/SelectionTable/index.tsx b/src/pages/campaigns/selection/SelectionTable/index.tsx index 46daf10e..c9ac28ae 100644 --- a/src/pages/campaigns/selection/SelectionTable/index.tsx +++ b/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 ( 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: ( + + ), + }, + ]; +}; diff --git a/src/pages/campaigns/selection/SelectionTable/useTableRows.tsx b/src/pages/campaigns/selection/SelectionTable/useTableRows.tsx index fcc310f2..4be703bc 100644 --- a/src/pages/campaigns/selection/SelectionTable/useTableRows.tsx +++ b/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, { diff --git a/src/pages/campaigns/selection/selectionSlice.ts b/src/pages/campaigns/selection/selectionSlice.ts index b2a3e371..ebf5fa2f 100644 --- a/src/pages/campaigns/selection/selectionSlice.ts +++ b/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 = { [P in K]?: T; @@ -43,7 +42,7 @@ export const initialState: SelectionState = { isFormModalOpen: false, isSurveyModalOpen: false, questionsId: [], - tableColumns: columns, + tableColumns: [], disableApplyFilters: true, filters: {}, }; diff --git a/src/pages/campaigns/selection/useItems.tsx b/src/pages/campaigns/selection/useItems.tsx index af2ba560..c4a67683 100644 --- a/src/pages/campaigns/selection/useItems.tsx +++ b/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,