133 lines
3.5 KiB
TypeScript
133 lines
3.5 KiB
TypeScript
import { View } from "react-native";
|
|
|
|
import { TableControls } from "@/components/shared/TableControls";
|
|
import { SelectionControls } from "@/components/features/users/SelectionControls";
|
|
import { RiskEnum, RiskLabels } from "@/constants/riskEnum";
|
|
import {
|
|
CombinedFilterMenu,
|
|
CombinedFilterSection,
|
|
} from "@/components/shared/filters/CombinedFilterMenu";
|
|
import {
|
|
SelectedFilterChips,
|
|
SelectedChip,
|
|
} from "@/components/shared/filters/SelectedFilterChips";
|
|
import { RiskIndicator } from "@/components/ui/RiskIndicator";
|
|
import { Button } from "@/components/ui/Button";
|
|
|
|
interface UserTableControlsProps {
|
|
searchQuery: string;
|
|
selectAll?: boolean;
|
|
selectedItems?: string[];
|
|
menuVisible: boolean;
|
|
menuAnchor: { x: number; y: number };
|
|
selectedRisks?: RiskEnum[];
|
|
onSearch: (query: string) => void;
|
|
onSelectAll: () => void;
|
|
onBulkDelete: () => void;
|
|
onMenuDismiss: () => void;
|
|
onItemsPerPageChange: (value: number) => void;
|
|
onSelectRisks: (risks: RiskEnum[]) => void;
|
|
itemsPerPage?: number;
|
|
onAddUser: () => void;
|
|
onAddingUser: boolean;
|
|
}
|
|
|
|
export const UserTableControls = ({
|
|
searchQuery,
|
|
selectAll = false,
|
|
selectedItems = [],
|
|
menuVisible,
|
|
menuAnchor,
|
|
selectedRisks = [],
|
|
onSearch,
|
|
onSelectAll,
|
|
onBulkDelete,
|
|
onMenuDismiss,
|
|
onItemsPerPageChange,
|
|
onSelectRisks,
|
|
itemsPerPage = 25,
|
|
onAddUser,
|
|
onAddingUser = false,
|
|
}: UserTableControlsProps) => {
|
|
const renderFilterComponent = () => {
|
|
const riskOptions = Object.values(RiskEnum).map((risk) => ({
|
|
value: risk,
|
|
label: RiskLabels[risk],
|
|
icon: <RiskIndicator risk={risk} />,
|
|
}));
|
|
|
|
const sections: CombinedFilterSection[] = [];
|
|
|
|
sections.push({
|
|
key: "risk",
|
|
title: "Risk",
|
|
options: riskOptions,
|
|
selected: selectedRisks,
|
|
onChange: (values) => onSelectRisks(values as RiskEnum[]),
|
|
});
|
|
|
|
return (
|
|
<CombinedFilterMenu
|
|
sections={sections}
|
|
showResetButton={true}
|
|
onResetAll={() => onSelectRisks([])}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const renderFilterChips = () => {
|
|
const chips: SelectedChip[] = selectedRisks.map((risk) => ({
|
|
key: `risk-${risk}`,
|
|
label: RiskLabels[risk],
|
|
onRemove: () =>
|
|
onSelectRisks(
|
|
selectedRisks.filter((selectedFilter) => selectedFilter !== risk)
|
|
),
|
|
}));
|
|
|
|
return chips.length > 0 ? <SelectedFilterChips chips={chips} /> : null;
|
|
};
|
|
|
|
const renderActionButtons = () => {
|
|
return (
|
|
<View className="flex-row items-center">
|
|
{onAddUser ? (
|
|
<View className="mr-2">
|
|
<Button
|
|
onPress={onAddUser}
|
|
disabled={onAddingUser}
|
|
icon="account-plus-outline"
|
|
buttonColor="#6750a4"
|
|
buttonTextColor="white"
|
|
>
|
|
Add User
|
|
</Button>
|
|
</View>
|
|
) : null}
|
|
<SelectionControls
|
|
selectAll={selectAll}
|
|
selectedUsers={selectedItems}
|
|
onSelectAll={onSelectAll}
|
|
onBulkDelete={onBulkDelete}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<TableControls
|
|
searchQuery={searchQuery}
|
|
menuVisible={menuVisible}
|
|
menuAnchor={menuAnchor}
|
|
searchPlaceholder="Search users"
|
|
onSearch={onSearch}
|
|
onMenuDismiss={onMenuDismiss}
|
|
onItemsPerPageChange={onItemsPerPageChange}
|
|
itemsPerPage={itemsPerPage}
|
|
renderFilterComponent={renderFilterComponent}
|
|
renderFilterChips={renderFilterChips}
|
|
renderActionButtons={renderActionButtons}
|
|
/>
|
|
);
|
|
};
|