105 lines
3.3 KiB
TypeScript
105 lines
3.3 KiB
TypeScript
import { useState } from "react";
|
|
import { View, Text } from "react-native";
|
|
import { DataTable } from "react-native-paper";
|
|
|
|
import { Todo } from "@/store/models/Todo.model";
|
|
import { TableSortDirection } from "@/constants/tableSortDirectionEnum";
|
|
import { AdminTodoTableHeader } from "@/components/features/todos/AdminTodoTableHeader";
|
|
import { AdminTodoActions } from "@/components/features/todos/AdminTodoActions";
|
|
import { PriorityIndicator } from "@/components/ui/PriorityIndicator";
|
|
import { StatusTableItem } from "@/components/ui/StatusTableItem";
|
|
import { TodoDetailsModal } from "@/components/features/todos/TodoDetailsModal";
|
|
import { formatDateMDY, formatTime } from "@/utils/dateUtils";
|
|
|
|
interface DesktopAdminTodoTableProps {
|
|
todos: Todo[];
|
|
sortColumn: string | null;
|
|
sortDirection: TableSortDirection;
|
|
onSort: (column: string) => void;
|
|
onEdit: (todo: Todo) => void;
|
|
onDelete: (todo: Todo) => void;
|
|
}
|
|
|
|
export const DesktopAdminTodosTable = ({
|
|
todos,
|
|
sortColumn,
|
|
sortDirection,
|
|
onSort,
|
|
onEdit,
|
|
onDelete,
|
|
}: DesktopAdminTodoTableProps) => {
|
|
const [detailsOpen, setDetailsOpen] = useState(false);
|
|
const [selectedTodo, setSelectedTodo] = useState<Todo | null>(null);
|
|
|
|
const openDetails = (todo: Todo) => {
|
|
setSelectedTodo(todo);
|
|
setDetailsOpen(true);
|
|
};
|
|
|
|
const closeDetails = () => setDetailsOpen(false);
|
|
return (
|
|
<DataTable>
|
|
<AdminTodoTableHeader
|
|
sortColumn={sortColumn}
|
|
sortDirection={sortDirection}
|
|
onSort={onSort}
|
|
/>
|
|
|
|
{todos.map((todo) => (
|
|
<DataTable.Row key={todo.id}>
|
|
<DataTable.Cell>
|
|
<View className="flex-row items-center shrink px-1 py-1">
|
|
<Text onPress={() => openDetails(todo)} numberOfLines={10}>
|
|
{todo.title}
|
|
</Text>
|
|
</View>
|
|
</DataTable.Cell>
|
|
<DataTable.Cell>
|
|
<View className="flex-row items-center shrink px-1 py-1">
|
|
<Text numberOfLines={10}>
|
|
{todo.task && todo.task.length > 50
|
|
? `${todo.task.slice(0, 50)}...`
|
|
: todo.task}
|
|
</Text>
|
|
</View>
|
|
</DataTable.Cell>
|
|
<DataTable.Cell
|
|
style={{
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<StatusTableItem todoStatus={todo.status} />
|
|
</DataTable.Cell>
|
|
<DataTable.Cell
|
|
style={{
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<PriorityIndicator priority={todo.priority} />
|
|
</DataTable.Cell>
|
|
<DataTable.Cell style={{ justifyContent: "center" }}>
|
|
<Text className="px-1 py-1">{`${formatDateMDY(
|
|
todo.createdAt,
|
|
)} ${formatTime(todo.createdAt)}`}</Text>
|
|
</DataTable.Cell>
|
|
<DataTable.Cell style={{ justifyContent: "center" }}>
|
|
<AdminTodoActions
|
|
todo={todo}
|
|
onView={(t) => openDetails(t)}
|
|
onEdit={onEdit}
|
|
onDelete={onDelete}
|
|
/>
|
|
</DataTable.Cell>
|
|
</DataTable.Row>
|
|
))}
|
|
{selectedTodo && (
|
|
<TodoDetailsModal
|
|
visible={detailsOpen}
|
|
todo={selectedTodo}
|
|
onClose={closeDetails}
|
|
/>
|
|
)}
|
|
</DataTable>
|
|
);
|
|
};
|