113 lines
3.6 KiB
TypeScript
113 lines
3.6 KiB
TypeScript
import { View, Text, ScrollView } from "react-native";
|
|
import { Badge, IconButton } from "react-native-paper";
|
|
import { useState } from "react";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
|
|
import { TodoDetailsModal } from "@/components/features/todos/TodoDetailsModal";
|
|
import { Todo } from "@/store/models/Todo.model";
|
|
import { PriorityIndicator } from "@/components/ui/PriorityIndicator";
|
|
import { SizeEnum } from "@/constants/sizeEnum";
|
|
import { TodoStatusColors } from "@/constants/todoStatusEnum";
|
|
import { formatDateMDY, formatTime } from "@/utils/dateUtils";
|
|
|
|
interface MobileAdminTodoTableProps {
|
|
todos: Todo[];
|
|
onEdit: (todo: Todo) => void;
|
|
onDelete: (todo: Todo) => void;
|
|
}
|
|
|
|
export const MobileAdminTodosTable = ({
|
|
todos,
|
|
onEdit,
|
|
onDelete,
|
|
}: MobileAdminTodoTableProps) => {
|
|
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 (
|
|
<View className="flex-1">
|
|
<ScrollView
|
|
className="flex-1"
|
|
contentContainerStyle={{ paddingBottom: 16 }}
|
|
>
|
|
{todos.map((todo) => {
|
|
const taskPreview =
|
|
todo.task && todo.task.length > 50
|
|
? `${todo.task.slice(0, 50)}...`
|
|
: todo.task;
|
|
return (
|
|
<View
|
|
key={todo.id}
|
|
className="mb-3 p-4 bg-white rounded-md shadow-sm"
|
|
>
|
|
<View className="flex-row justify-between items-center mb-3">
|
|
<View className="mr-2">
|
|
<Badge
|
|
size={16}
|
|
style={{ backgroundColor: TodoStatusColors[todo.status] }}
|
|
/>
|
|
</View>
|
|
<Text className="font-bold flex-1 flex-wrap" numberOfLines={0}>
|
|
{todo.title}
|
|
</Text>
|
|
<View className="ml-2 flex-row items-center">
|
|
<PriorityIndicator
|
|
priority={todo.priority}
|
|
size={SizeEnum.Small}
|
|
/>
|
|
</View>
|
|
</View>
|
|
<View className="flex-row items-center mb-2">
|
|
<Ionicons name="calendar-outline" size={14} color="#6b7280" />
|
|
<Text className="text-xs text-gray-500 ml-1">
|
|
{`${formatDateMDY(todo.createdAt)} ${formatTime(
|
|
todo.createdAt
|
|
)}`}
|
|
</Text>
|
|
</View>
|
|
<Text className="text-sm mb-3 text-gray-600" numberOfLines={0}>
|
|
{taskPreview}
|
|
</Text>
|
|
<View className="flex-row justify-end border-t border-gray-200 pt-3">
|
|
<IconButton
|
|
icon="eye-outline"
|
|
size={20}
|
|
onPress={() => openDetails(todo)}
|
|
/>
|
|
<IconButton
|
|
icon="pencil-outline"
|
|
size={20}
|
|
onPress={() => {
|
|
onEdit(todo);
|
|
}}
|
|
/>
|
|
<IconButton
|
|
icon="delete-outline"
|
|
size={20}
|
|
onPress={() => {
|
|
onDelete(todo);
|
|
}}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
})}
|
|
</ScrollView>
|
|
{selectedTodo && (
|
|
<TodoDetailsModal
|
|
visible={detailsOpen}
|
|
todo={selectedTodo}
|
|
onClose={closeDetails}
|
|
/>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|