98 lines
2.9 KiB
TypeScript
98 lines
2.9 KiB
TypeScript
import { View, Text } from "react-native";
|
|
import { Dialog, IconButton } from "react-native-paper";
|
|
|
|
import { DialogContainer } from "@/components/ui/DialogContainer";
|
|
import { Todo } from "@/store/models/Todo.model";
|
|
import { StatusTableItem } from "@/components/ui/StatusTableItem";
|
|
import { PriorityIndicator } from "@/components/ui/PriorityIndicator";
|
|
import { SizeEnum } from "@/constants/sizeEnum";
|
|
import { formatDate } from "@/utils/dateUtils";
|
|
import { TodoComments } from "@/components/features/todos/TodoComments";
|
|
import { useAppSelector } from "@/store/hooks";
|
|
import { selectIsMobile } from "@/store/screen/screenSizeSlice";
|
|
|
|
interface TodoDetailsModalProps {
|
|
visible: boolean;
|
|
todo: Todo;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export const TodoDetailsModal = ({
|
|
visible,
|
|
todo,
|
|
onClose,
|
|
}: TodoDetailsModalProps) => {
|
|
const isMobile = useAppSelector(selectIsMobile);
|
|
|
|
return (
|
|
<DialogContainer visible={visible} onDismiss={onClose}>
|
|
<Dialog.Title>
|
|
<View className="w-full flex-row items-center justify-between">
|
|
<View className="flex-1">
|
|
<Text className="pr-3">{todo.title}</Text>
|
|
</View>
|
|
|
|
<View
|
|
style={{
|
|
alignSelf: "flex-start",
|
|
alignItems: "center",
|
|
flexDirection: "row",
|
|
}}
|
|
>
|
|
<View className="flex-row items-center gap-2">
|
|
<StatusTableItem todoStatus={todo.status} />
|
|
<PriorityIndicator
|
|
priority={todo.priority}
|
|
size={SizeEnum.Small}
|
|
/>
|
|
</View>
|
|
|
|
<IconButton
|
|
icon="close"
|
|
size={20}
|
|
onPress={onClose}
|
|
accessibilityLabel="Close dialog"
|
|
style={{ margin: 0 }}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</Dialog.Title>
|
|
<Dialog.Content>
|
|
<View className={isMobile ? "flex-col" : "flex-row"}>
|
|
<View className={isMobile ? "w-full" : "w-1/2 pr-2"}>
|
|
<View className="mb-2">
|
|
<Text className="text-lg">Due: {formatDate(todo.dueDate)}</Text>
|
|
</View>
|
|
<Text className="text-base">{todo.task}</Text>
|
|
</View>
|
|
|
|
{isMobile ? (
|
|
<View
|
|
style={{
|
|
height: 2,
|
|
backgroundColor: "#000000",
|
|
marginVertical: 12,
|
|
borderRadius: 1,
|
|
}}
|
|
/>
|
|
) : (
|
|
<View
|
|
style={{
|
|
width: 2,
|
|
backgroundColor: "#000000",
|
|
marginHorizontal: 12,
|
|
alignSelf: "stretch",
|
|
borderRadius: 1,
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
<View className={isMobile ? "w-full mt-4" : "w-1/2 pl-4 pr-6"}>
|
|
<TodoComments todoId={todo.id} />
|
|
</View>
|
|
</View>
|
|
</Dialog.Content>
|
|
</DialogContainer>
|
|
);
|
|
};
|