-
+
{recallToHeadline(question.headline, localSurvey, true, selectedLanguageCode)[
selectedLanguageCode
]
@@ -232,7 +235,7 @@ export const QuestionCard = ({
] ?? ""
)
: getTSurveyQuestionTypeEnumName(question.type, t)}
-
+
{!open && (
{question?.required
@@ -272,7 +275,7 @@ export const QuestionCard = ({
TSurveyQuestionTypeEnum.Ranking,
TSurveyQuestionTypeEnum.Matrix,
].includes(question.type) ? (
-
+
{t("environments.surveys.edit.caution_text")}
onAlertTrigger()}>{t("common.learn_more")}
@@ -457,7 +460,9 @@ export const QuestionCard = ({
) : null}
-
+
{openAdvanced ? (
) : (
@@ -473,6 +478,30 @@ export const QuestionCard = ({
question.type !== TSurveyQuestionTypeEnum.Rating &&
question.type !== TSurveyQuestionTypeEnum.CTA ? (
+ {questionIdx !== 0 && (
+
{
+ if (!question.backButtonLabel) return;
+ let translatedBackButtonLabel = {
+ ...question.backButtonLabel,
+ [selectedLanguageCode]: e.target.value,
+ };
+ updateEmptyButtonLabels("backButtonLabel", translatedBackButtonLabel, 0);
+ }}
+ />
+ )}
- {questionIdx !== 0 && (
- {
- if (!question.backButtonLabel) return;
- let translatedBackButtonLabel = {
- ...question.backButtonLabel,
- [selectedLanguageCode]: e.target.value,
- };
- updateEmptyButtonLabels("backButtonLabel", translatedBackButtonLabel, 0);
- }}
- />
- )}
+ {children}
+
+ ),
+}));
+
+// Mock SelectedRowSettings
+vi.mock("./selected-row-settings", () => ({
+ SelectedRowSettings: vi.fn(() => ),
+}));
+
+// Mock useTranslate
+vi.mock("@tolgee/react", () => ({
+ useTranslate: () => ({
+ t: (key) => key,
+ }),
+}));
+
+// Mock toast
+vi.mock("react-hot-toast", () => ({
+ default: {
+ success: vi.fn(),
+ error: vi.fn(),
+ },
+}));
+
+// Mock lucide-react icons
+vi.mock("lucide-react", async () => {
+ const actual = await vi.importActual("lucide-react");
+ return {
+ ...actual,
+ RefreshCcwIcon: vi.fn((props) => ),
+ SettingsIcon: vi.fn((props) => ),
+ MoveVerticalIcon: vi.fn((props) => ),
+ };
+});
+
+const mockTable = {
+ getFilteredSelectedRowModel: vi.fn(() => ({ rows: [] })),
+} as any;
+
+const mockDeleteRowsAction = vi.fn();
+const mockDeleteAction = vi.fn();
+const mockDownloadRowsAction = vi.fn();
+const mockRefreshContacts = vi.fn();
+const mockSetIsExpanded = vi.fn();
+const mockSetIsTableSettingsModalOpen = vi.fn();
+
+const defaultProps = {
+ setIsExpanded: mockSetIsExpanded,
+ setIsTableSettingsModalOpen: mockSetIsTableSettingsModalOpen,
+ isExpanded: false,
+ table: mockTable,
+ deleteRowsAction: mockDeleteRowsAction,
+ type: "response" as "response" | "contact",
+ deleteAction: mockDeleteAction,
+ downloadRowAction: mockDownloadRowsAction,
+ refreshContacts: mockRefreshContacts,
+};
+
describe("DataTableToolbar", () => {
afterEach(() => {
cleanup();
+ vi.clearAllMocks();
});
- test("renders selection settings when rows are selected", () => {
- const mockTable = {
- getFilteredSelectedRowModel: vi.fn().mockReturnValue({
- rows: [{ id: "row1" }, { id: "row2" }],
- }),
- };
-
- render(
-
- );
-
- // Check for the number of selected items instead of translation keys
- const selectionInfo = screen.getByText(/2/);
- expect(selectionInfo).toBeInTheDocument();
-
- // Look for the exact text that appears in the component (which is the translation key)
- expect(screen.getByText("common.select_all")).toBeInTheDocument();
- expect(screen.getByText("common.clear_selection")).toBeInTheDocument();
+ test("renders correctly with no selected rows", () => {
+ render();
+ expect(screen.queryByTestId("selected-row-settings")).not.toBeInTheDocument();
+ expect(screen.getByTestId("settings-icon")).toBeInTheDocument();
+ expect(screen.getByTestId("move-vertical-icon")).toBeInTheDocument();
+ expect(screen.queryByTestId("refresh-ccw-icon")).not.toBeInTheDocument();
});
- test("renders settings and expand buttons", () => {
- const mockTable = {
- getFilteredSelectedRowModel: vi.fn().mockReturnValue({
- rows: [],
- }),
- };
-
- render(
-
- );
-
- // Look for SVG elements by their class names instead of role
- const settingsIcon = document.querySelector(".lucide-settings");
- const expandIcon = document.querySelector(".lucide-move-vertical");
-
- expect(settingsIcon).toBeInTheDocument();
- expect(expandIcon).toBeInTheDocument();
+ test("renders SelectedRowSettings when rows are selected", () => {
+ const tableWithSelectedRows = {
+ getFilteredSelectedRowModel: vi.fn(() => ({ rows: [{ id: "1" }] })),
+ } as any;
+ render();
+ expect(screen.getByTestId("selected-row-settings")).toBeInTheDocument();
});
- test("calls setIsTableSettingsModalOpen when settings button is clicked", async () => {
- const user = userEvent.setup();
- const setIsTableSettingsModalOpen = vi.fn();
- const mockTable = {
- getFilteredSelectedRowModel: vi.fn().mockReturnValue({
- rows: [],
- }),
- };
-
- render(
-
+ test("renders refresh icon for contact type and calls refreshContacts on click", async () => {
+ mockRefreshContacts.mockResolvedValueOnce(undefined);
+ render();
+ const refreshIconContainer = screen.getByTestId("refresh-ccw-icon").parentElement;
+ expect(refreshIconContainer).toBeInTheDocument();
+ await userEvent.click(refreshIconContainer!);
+ expect(mockRefreshContacts).toHaveBeenCalledTimes(1);
+ expect(vi.mocked(toast.success)).toHaveBeenCalledWith(
+ "environments.contacts.contacts_table_refresh_success"
);
-
- // Find the settings button by class and click it
- const settingsIcon = document.querySelector(".lucide-settings");
- const settingsButton = settingsIcon?.closest("div");
-
- expect(settingsButton).toBeInTheDocument();
- if (settingsButton) {
- await user.click(settingsButton);
- expect(setIsTableSettingsModalOpen).toHaveBeenCalledWith(true);
- }
});
- test("calls setIsExpanded when expand button is clicked", async () => {
- const user = userEvent.setup();
- const setIsExpanded = vi.fn();
- const mockTable = {
- getFilteredSelectedRowModel: vi.fn().mockReturnValue({
- rows: [],
- }),
- };
-
- render(
-
- );
-
- // Find the expand button by class and click it
- const expandIcon = document.querySelector(".lucide-move-vertical");
- const expandButton = expandIcon?.closest("div");
-
- expect(expandButton).toBeInTheDocument();
- if (expandButton) {
- await user.click(expandButton);
- expect(setIsExpanded).toHaveBeenCalledWith(true);
- }
+ test("handles refreshContacts failure", async () => {
+ mockRefreshContacts.mockRejectedValueOnce(new Error("Refresh failed"));
+ render();
+ const refreshIconContainer = screen.getByTestId("refresh-ccw-icon").parentElement;
+ await userEvent.click(refreshIconContainer!);
+ expect(mockRefreshContacts).toHaveBeenCalledTimes(1);
+ expect(vi.mocked(toast.error)).toHaveBeenCalledWith("environments.contacts.contacts_table_refresh_error");
});
- test("shows refresh button and calls refreshContacts when type is contact", async () => {
- const user = userEvent.setup();
- const refreshContacts = vi.fn().mockResolvedValue(undefined);
- const mockTable = {
- getFilteredSelectedRowModel: vi.fn().mockReturnValue({
- rows: [],
- }),
- };
-
- render(
-
- );
-
- // Find the refresh button by class and click it
- const refreshIcon = document.querySelector(".lucide-refresh-ccw");
- const refreshButton = refreshIcon?.closest("div");
-
- expect(refreshButton).toBeInTheDocument();
- if (refreshButton) {
- await user.click(refreshButton);
- expect(refreshContacts).toHaveBeenCalled();
- expect(toast.success).toHaveBeenCalledWith("environments.contacts.contacts_table_refresh_success");
- }
+ test("does not render refresh icon for response type", () => {
+ render();
+ expect(screen.queryByTestId("refresh-ccw-icon")).not.toBeInTheDocument();
});
- test("shows error toast when refreshContacts fails", async () => {
- const user = userEvent.setup();
- const refreshContacts = vi.fn().mockRejectedValue(new Error("Failed to refresh"));
- const mockTable = {
- getFilteredSelectedRowModel: vi.fn().mockReturnValue({
- rows: [],
- }),
- };
+ test("calls setIsTableSettingsModalOpen when settings icon is clicked", async () => {
+ render();
+ const settingsIconContainer = screen.getByTestId("settings-icon").parentElement;
+ await userEvent.click(settingsIconContainer!);
+ expect(mockSetIsTableSettingsModalOpen).toHaveBeenCalledWith(true);
+ });
- render(
-
- );
+ test("calls setIsExpanded when move vertical icon is clicked (isExpanded false)", async () => {
+ render();
+ const moveIconContainer = screen.getByTestId("move-vertical-icon").parentElement;
+ const tooltip = moveIconContainer?.closest('[data-testid="tooltip-renderer"]');
+ expect(tooltip).toHaveAttribute("data-tooltip-content", "common.expand_rows");
+ await userEvent.click(moveIconContainer!);
+ expect(mockSetIsExpanded).toHaveBeenCalledWith(true);
+ });
- // Find the refresh button by class and click it
- const refreshIcon = document.querySelector(".lucide-refresh-ccw");
- const refreshButton = refreshIcon?.closest("div");
-
- expect(refreshButton).toBeInTheDocument();
- if (refreshButton) {
- await user.click(refreshButton);
- expect(refreshContacts).toHaveBeenCalled();
- expect(toast.error).toHaveBeenCalledWith("environments.contacts.contacts_table_refresh_error");
- }
+ test("calls setIsExpanded when move vertical icon is clicked (isExpanded true)", async () => {
+ render();
+ const moveIconContainer = screen.getByTestId("move-vertical-icon").parentElement;
+ const tooltip = moveIconContainer?.closest('[data-testid="tooltip-renderer"]');
+ expect(tooltip).toHaveAttribute("data-tooltip-content", "common.collapse_rows");
+ await userEvent.click(moveIconContainer!);
+ expect(mockSetIsExpanded).toHaveBeenCalledWith(false);
+ expect(moveIconContainer).toHaveClass("bg-black text-white");
});
});
diff --git a/apps/web/modules/ui/components/data-table/components/data-table-toolbar.tsx b/apps/web/modules/ui/components/data-table/components/data-table-toolbar.tsx
index f20a1a81da..6d0e3f3076 100644
--- a/apps/web/modules/ui/components/data-table/components/data-table-toolbar.tsx
+++ b/apps/web/modules/ui/components/data-table/components/data-table-toolbar.tsx
@@ -13,9 +13,10 @@ interface DataTableToolbarProps {
setIsExpanded: (isExpanded: boolean) => void;
isExpanded: boolean;
table: Table;
- deleteRows: (rowIds: string[]) => void;
+ deleteRowsAction: (rowIds: string[]) => void;
type: "response" | "contact";
deleteAction: (id: string) => Promise;
+ downloadRowsAction?: (rowIds: string[], format: string) => void;
refreshContacts?: () => Promise;
}
@@ -24,9 +25,10 @@ export const DataTableToolbar = ({
setIsTableSettingsModalOpen,
isExpanded,
table,
- deleteRows,
+ deleteRowsAction,
type,
deleteAction,
+ downloadRowsAction,
refreshContacts,
}: DataTableToolbarProps) => {
const { t } = useTranslate();
@@ -34,7 +36,13 @@ export const DataTableToolbar = ({
return (
{table.getFilteredSelectedRowModel().rows.length > 0 ? (
-
+
) : (
)}
diff --git a/apps/web/modules/ui/components/data-table/components/selected-row-settings.test.tsx b/apps/web/modules/ui/components/data-table/components/selected-row-settings.test.tsx
index 7604eded75..572ccf26df 100644
--- a/apps/web/modules/ui/components/data-table/components/selected-row-settings.test.tsx
+++ b/apps/web/modules/ui/components/data-table/components/selected-row-settings.test.tsx
@@ -1,192 +1,187 @@
-import { cleanup, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import toast from "react-hot-toast";
-import { afterEach, describe, expect, test, vi } from "vitest";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { toast } from "react-hot-toast";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
import { SelectedRowSettings } from "./selected-row-settings";
-// Mock the toast functions directly since they're causing issues
-vi.mock("react-hot-toast", () => ({
- default: {
- success: vi.fn(),
- error: vi.fn(),
- },
+// Mock translation
+vi.mock("@tolgee/react", () => ({
+ useTranslate: () => ({ t: (key: string) => key }),
}));
-// Instead of mocking @radix-ui/react-dialog, we'll test the component's behavior
-// by checking if the appropriate actions are performed after clicking the buttons
+// Mock DeleteDialog to reveal confirm button when open
+vi.mock("@/modules/ui/components/delete-dialog", () => ({
+ DeleteDialog: ({ open, onDelete }: any) =>
+ open ?
: null,
+}));
+
+// Mock dropdown-menu components to render their children
+vi.mock("@/modules/ui/components/dropdown-menu", () => ({
+ DropdownMenu: ({ children }: any) => <>{children},
+ DropdownMenuTrigger: ({ children }: any) => <>{children},
+ DropdownMenuContent: ({ children }: any) => <>{children},
+ DropdownMenuItem: ({ children, onClick }: any) =>
,
+}));
+
+// Mock Button
+vi.mock("@/modules/ui/components/button", () => ({
+ Button: ({ children, ...props }: any) =>
,
+}));
describe("SelectedRowSettings", () => {
+ const rows = [{ id: "r1" }, { id: "r2" }];
+ let table: any;
+ let deleteRowsAction: ReturnType
;
+ let deleteAction: ReturnType;
+ let downloadRowsAction: ReturnType;
+
+ beforeEach(() => {
+ table = {
+ getFilteredSelectedRowModel: () => ({ rows }),
+ toggleAllPageRowsSelected: vi.fn(),
+ };
+ deleteRowsAction = vi.fn();
+ deleteAction = vi.fn(() => Promise.resolve());
+ downloadRowsAction = vi.fn();
+
+ // Reset all toast mocks before each test
+ vi.mocked(toast.error).mockClear();
+ vi.mocked(toast.success).mockClear();
+ });
+
afterEach(() => {
- vi.resetAllMocks();
+ vi.clearAllMocks();
cleanup();
});
- test("renders correct number of selected rows for responses", () => {
- const mockTable = {
- getFilteredSelectedRowModel: vi.fn().mockReturnValue({
- rows: [{ id: "row1" }, { id: "row2" }],
- }),
- toggleAllPageRowsSelected: vi.fn(),
- };
-
+ test("renders selected count and handles select all/clear selection", () => {
render(
- );
-
- // We need to look for a text node that contains "2" but might have other text around it
- const selectionText = screen.getByText((content) => content.includes("2"));
- expect(selectionText).toBeInTheDocument();
-
- // Check that we have the correct number of common text items
- expect(screen.getByText("common.select_all")).toBeInTheDocument();
- expect(screen.getByText("common.clear_selection")).toBeInTheDocument();
- });
-
- test("renders correct number of selected rows for contacts", () => {
- const mockTable = {
- getFilteredSelectedRowModel: vi.fn().mockReturnValue({
- rows: [{ id: "contact1" }, { id: "contact2" }, { id: "contact3" }],
- }),
- toggleAllPageRowsSelected: vi.fn(),
- };
-
- render(
-
);
+ expect(screen.getByText("2 common.contacts common.selected")).toBeInTheDocument();
- // We need to look for a text node that contains "3" but might have other text around it
- const selectionText = screen.getByText((content) => content.includes("3"));
- expect(selectionText).toBeInTheDocument();
+ fireEvent.click(screen.getByText("common.select_all"));
+ expect(table.toggleAllPageRowsSelected).toHaveBeenCalledWith(true);
- // Check that the text contains contacts (using a function matcher)
- const textWithContacts = screen.getByText((content) => content.includes("common.contacts"));
- expect(textWithContacts).toBeInTheDocument();
+ fireEvent.click(screen.getByText("common.clear_selection"));
+ expect(table.toggleAllPageRowsSelected).toHaveBeenCalledWith(false);
});
- test("select all option calls toggleAllPageRowsSelected with true", async () => {
- const user = userEvent.setup();
- const toggleAllPageRowsSelectedMock = vi.fn();
- const mockTable = {
- getFilteredSelectedRowModel: vi.fn().mockReturnValue({
- rows: [{ id: "row1" }],
- }),
- toggleAllPageRowsSelected: toggleAllPageRowsSelectedMock,
- };
-
+ test("does not render download when downloadRows prop is undefined", () => {
render(
);
-
- await user.click(screen.getByText("common.select_all"));
- expect(toggleAllPageRowsSelectedMock).toHaveBeenCalledWith(true);
+ expect(screen.queryByText("common.download")).toBeNull();
});
- test("clear selection option calls toggleAllPageRowsSelected with false", async () => {
- const user = userEvent.setup();
- const toggleAllPageRowsSelectedMock = vi.fn();
- const mockTable = {
- getFilteredSelectedRowModel: vi.fn().mockReturnValue({
- rows: [{ id: "row1" }],
- }),
- toggleAllPageRowsSelected: toggleAllPageRowsSelectedMock,
- };
-
+ test("invokes downloadRows with correct formats", () => {
render(
);
+ fireEvent.click(screen.getByText("common.download"));
+ fireEvent.click(screen.getByText("environments.surveys.summary.selected_responses_csv"));
+ expect(downloadRowsAction).toHaveBeenCalledWith(["r1", "r2"], "csv");
- await user.click(screen.getByText("common.clear_selection"));
- expect(toggleAllPageRowsSelectedMock).toHaveBeenCalledWith(false);
+ fireEvent.click(screen.getByText("common.download"));
+ fireEvent.click(screen.getByText("environments.surveys.summary.selected_responses_excel"));
+ expect(downloadRowsAction).toHaveBeenCalledWith(["r1", "r2"], "xlsx");
});
- // For the tests that involve the modal dialog, we'll test the underlying functionality
- // directly by mocking the deleteAction and deleteRows functions
-
- test("deleteAction is called with the row ID when deleting", async () => {
- const deleteActionMock = vi.fn().mockResolvedValue(undefined);
- const deleteRowsMock = vi.fn();
-
- // Create a spy for the deleteRows function
- const mockTable = {
- getFilteredSelectedRowModel: vi.fn().mockReturnValue({
- rows: [{ id: "test-id-123" }],
- }),
- toggleAllPageRowsSelected: vi.fn(),
- };
-
- const { rerender } = render(
+ test("deletes rows successfully and shows success toast for contact", async () => {
+ deleteAction = vi.fn(() => Promise.resolve());
+ render(
);
-
- // Test that the component renders the trash icon button
- const trashIcon = document.querySelector(".lucide-trash2");
- expect(trashIcon).toBeInTheDocument();
-
- // Since we can't easily test the dialog interaction without mocking a lot of components,
- // we can test the core functionality by calling the handlers directly
-
- // We know that the deleteAction is called with the row ID
- await deleteActionMock("test-id-123");
- expect(deleteActionMock).toHaveBeenCalledWith("test-id-123");
-
- // We know that deleteRows is called with an array of row IDs
- deleteRowsMock(["test-id-123"]);
- expect(deleteRowsMock).toHaveBeenCalledWith(["test-id-123"]);
+ // open delete dialog
+ fireEvent.click(screen.getAllByText("common.delete")[0]);
+ fireEvent.click(screen.getByText("Confirm Delete"));
+ await waitFor(() => {
+ expect(deleteAction).toHaveBeenCalledTimes(2);
+ expect(deleteRowsAction).toHaveBeenCalledWith(["r1", "r2"]);
+ expect(toast.success).toHaveBeenCalledWith("common.table_items_deleted_successfully");
+ });
});
- test("toast.success is called on successful deletion", async () => {
- const deleteActionMock = vi.fn().mockResolvedValue(undefined);
-
- // We can test the toast directly
- await deleteActionMock();
-
- // In the component, after the deleteAction succeeds, it should call toast.success
- toast.success("common.table_items_deleted_successfully");
-
- // Verify that toast.success was called with the right message
- expect(toast.success).toHaveBeenCalledWith("common.table_items_deleted_successfully");
+ test("handles delete error and shows error toast for response", async () => {
+ deleteAction = vi.fn(() => Promise.reject(new Error("fail delete")));
+ render(
+
+ );
+ // open delete menu (trigger button)
+ const deleteTriggers = screen.getAllByText("common.delete");
+ fireEvent.click(deleteTriggers[0]);
+ fireEvent.click(screen.getByText("Confirm Delete"));
+ await waitFor(() => {
+ expect(toast.error).toHaveBeenCalledWith("fail delete");
+ });
});
- test("toast.error is called on deletion error", async () => {
- const errorMessage = "Failed to delete";
-
- // We can test the error path directly
- toast.error(errorMessage);
-
- // Verify that toast.error was called with the right message
- expect(toast.error).toHaveBeenCalledWith(errorMessage);
+ test("deletes rows successfully and shows success toast for response", async () => {
+ deleteAction = vi.fn(() => Promise.resolve());
+ render(
+
+ );
+ // open delete dialog
+ fireEvent.click(screen.getAllByText("common.delete")[0]);
+ fireEvent.click(screen.getByText("Confirm Delete"));
+ await waitFor(() => {
+ expect(deleteAction).toHaveBeenCalledTimes(2);
+ expect(deleteRowsAction).toHaveBeenCalledWith(["r1", "r2"]);
+ expect(toast.success).toHaveBeenCalledWith("common.table_items_deleted_successfully");
+ });
});
- test("toast.error is called with generic message on unknown error", async () => {
- // We can test the unknown error path directly
- toast.error("common.an_unknown_error_occurred_while_deleting_table_items");
-
- // Verify that toast.error was called with the generic message
- expect(toast.error).toHaveBeenCalledWith("common.an_unknown_error_occurred_while_deleting_table_items");
+ test("handles delete error for non-Error and shows generic error toast", async () => {
+ deleteAction = vi.fn(() => Promise.reject("fail nonerror")); // Changed from Error to string
+ render(
+
+ );
+ // open delete menu (trigger button)
+ const deleteTriggers = screen.getAllByText("common.delete");
+ fireEvent.click(deleteTriggers[0]);
+ fireEvent.click(screen.getByText("Confirm Delete"));
+ await waitFor(() => {
+ expect(toast.error).toHaveBeenCalledWith("common.an_unknown_error_occurred_while_deleting_table_items");
+ });
});
});
diff --git a/apps/web/modules/ui/components/data-table/components/selected-row-settings.tsx b/apps/web/modules/ui/components/data-table/components/selected-row-settings.tsx
index 5e6eaae999..6f8c9e7077 100644
--- a/apps/web/modules/ui/components/data-table/components/selected-row-settings.tsx
+++ b/apps/web/modules/ui/components/data-table/components/selected-row-settings.tsx
@@ -1,25 +1,34 @@
"use client";
import { capitalizeFirstLetter } from "@/lib/utils/strings";
+import { Button } from "@/modules/ui/components/button";
import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/modules/ui/components/dropdown-menu";
import { Table } from "@tanstack/react-table";
import { useTranslate } from "@tolgee/react";
-import { Trash2Icon } from "lucide-react";
+import { ArrowDownToLineIcon, Trash2Icon } from "lucide-react";
import { useCallback, useState } from "react";
import { toast } from "react-hot-toast";
interface SelectedRowSettingsProps {
table: Table;
- deleteRows: (rowId: string[]) => void;
+ deleteRowsAction: (rowId: string[]) => void;
type: "response" | "contact";
deleteAction: (id: string) => Promise;
+ downloadRowsAction?: (rowIds: string[], format: string) => void;
}
export const SelectedRowSettings = ({
table,
- deleteRows,
+ deleteRowsAction,
type,
deleteAction,
+ downloadRowsAction,
}: SelectedRowSettingsProps) => {
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
const [isDeleting, setIsDeleting] = useState(false);
@@ -40,13 +49,11 @@ export const SelectedRowSettings = ({
setIsDeleting(true);
const rowsToBeDeleted = table.getFilteredSelectedRowModel().rows.map((row) => row.id);
- if (type === "response") {
- await Promise.all(rowsToBeDeleted.map((responseId) => deleteAction(responseId)));
- } else if (type === "contact") {
- await Promise.all(rowsToBeDeleted.map((responseId) => deleteAction(responseId)));
+ if (type === "response" || type === "contact") {
+ await Promise.all(rowsToBeDeleted.map((rowId) => deleteAction(rowId)));
}
- deleteRows(rowsToBeDeleted);
+ deleteRowsAction(rowsToBeDeleted);
toast.success(t("common.table_items_deleted_successfully", { type: capitalizeFirstLetter(type) }));
} catch (error) {
if (error instanceof Error) {
@@ -64,34 +71,72 @@ export const SelectedRowSettings = ({
}
};
+ // Handle download selected rows
+ const handleDownloadSelectedRows = async (format: string) => {
+ const rowsToDownload = table.getFilteredSelectedRowModel().rows.map((row) => row.id);
+ if (downloadRowsAction && rowsToDownload.length > 0) {
+ downloadRowsAction(rowsToDownload, format);
+ }
+ };
+
// Helper component for the separator
const Separator = () => |
;
- // Helper component for selectable options
- const SelectableOption = ({ label, onClick }: { label: string; onClick: () => void }) => (
-
- {label}
-
- );
-
return (
-
-
- {selectedRowCount} {type === "response" ? t("common.responses") : t("common.contacts")}
- {t("common.selected")}
-
-
-
handleToggleAllRowsSelection(true)} />
-
- handleToggleAllRowsSelection(false)}
- />
-
- setIsDeleteDialogOpen(true)}>
-
+ <>
+
+
+ {selectedRowCount} {t(`common.${type}`)}s {t("common.selected")}
+
+
+
+
+
+
+ {downloadRowsAction && (
+
+
+
+
+
+ {
+ handleDownloadSelectedRows("csv");
+ }}>
+ {t("environments.surveys.summary.selected_responses_csv")}
+
+ {
+ handleDownloadSelectedRows("xlsx");
+ }}>
+ {t("environments.surveys.summary.selected_responses_excel")}
+
+
+
+ )}
+