106 lines
3.5 KiB
TypeScript
106 lines
3.5 KiB
TypeScript
import { router } from "expo-router";
|
|
import { View } from "react-native";
|
|
import { Avatar, DataTable, Text } from "react-native-paper";
|
|
|
|
import { CustomCheckbox } from "@/components/ui/CustomCheckbox";
|
|
import { User } from "@/store/models/User.model";
|
|
import { SizeEnum } from "@/constants/sizeEnum";
|
|
import { RiskIndicator } from "@/components/ui/RiskIndicator";
|
|
import { UserActions } from "@/components/features/users/UserActions";
|
|
import { UserTableHeader } from "@/components/features/users/UserTableHeader";
|
|
import { TableSortDirection } from "@/constants/tableSortDirectionEnum";
|
|
|
|
interface DesktopUserAccountsTableProps {
|
|
users: User[];
|
|
selectedUsers: string[];
|
|
sortColumn: string | null;
|
|
sortDirection: TableSortDirection;
|
|
onSort: (column: string) => void;
|
|
onSelectUser: (userId: string) => void;
|
|
onEdit: (user: User) => void;
|
|
onLock: (user: User) => void;
|
|
onDelete: (user: User) => void;
|
|
}
|
|
|
|
export const DesktopUserAccountsTable = ({
|
|
users,
|
|
selectedUsers,
|
|
sortColumn,
|
|
sortDirection,
|
|
onSort,
|
|
onSelectUser,
|
|
onEdit,
|
|
onLock,
|
|
onDelete,
|
|
}: DesktopUserAccountsTableProps) => {
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<DataTable>
|
|
<UserTableHeader
|
|
sortColumn={sortColumn}
|
|
sortDirection={sortDirection}
|
|
onSort={onSort}
|
|
/>
|
|
|
|
{users.map((user) => (
|
|
<DataTable.Row key={user.id}>
|
|
<DataTable.Cell>
|
|
<View className="flex-row items-center pr-2">
|
|
<View>
|
|
<CustomCheckbox
|
|
checked={selectedUsers.includes(user.id)}
|
|
onPress={() => onSelectUser(user.id)}
|
|
/>
|
|
</View>
|
|
{user.imageUrl ? (
|
|
<Avatar.Image
|
|
source={{ uri: user.imageUrl }}
|
|
size={28}
|
|
style={{ marginRight: 10, marginLeft: 10 }}
|
|
/>
|
|
) : (
|
|
<Avatar.Text
|
|
label={user.firstName.charAt(0) + user.lastName.charAt(0)}
|
|
size={28}
|
|
style={{ marginRight: 10, marginLeft: 10 }}
|
|
/>
|
|
)}
|
|
<View className="flex-row items-center shrink px-1 py-1">
|
|
<Text
|
|
numberOfLines={10}
|
|
onPress={() => router.push(`/accounts/users/${user.id}`)}
|
|
>
|
|
{user.firstName + " " + user.lastName}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</DataTable.Cell>
|
|
<DataTable.Cell style={{ justifyContent: "center" }}>
|
|
<RiskIndicator risk={user.riskStatus} size={SizeEnum.Moderate} />
|
|
</DataTable.Cell>
|
|
<DataTable.Cell>
|
|
<View className="flex-row items-center shrink px-1 py-1">
|
|
<Text numberOfLines={10}>{user.email}</Text>
|
|
</View>
|
|
</DataTable.Cell>
|
|
<DataTable.Cell>
|
|
<View className="flex-row items-center shrink px-1 py-1">
|
|
<Text numberOfLines={10}>{user.title}</Text>
|
|
</View>
|
|
</DataTable.Cell>
|
|
<DataTable.Cell style={{ justifyContent: "center", width: 100 }}>
|
|
<UserActions
|
|
user={user}
|
|
onView={(u) => router.push(`/accounts/users/${u.id}`)}
|
|
onEdit={onEdit}
|
|
onLock={onLock}
|
|
onDelete={onDelete}
|
|
/>
|
|
</DataTable.Cell>
|
|
</DataTable.Row>
|
|
))}
|
|
</DataTable>
|
|
</View>
|
|
);
|
|
};
|