feat(expo): add task detail screen with create/edit/delete
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Arthur Belleville
parent
03cd92719c
commit
956f97b19f
2 changed files with 348 additions and 0 deletions
343
xtablo-expo/app/(app)/task/[id].tsx
Normal file
343
xtablo-expo/app/(app)/task/[id].tsx
Normal file
|
|
@ -0,0 +1,343 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
SafeAreaView,
|
||||
Alert,
|
||||
Platform,
|
||||
} from "react-native";
|
||||
import { useLocalSearchParams, router } from "expo-router";
|
||||
import { ArrowLeft, User, Layers, Calendar } from "lucide-react-native";
|
||||
import DateTimePicker from "@react-native-community/datetimepicker";
|
||||
import { useThemeColor } from "@/hooks/useThemeColor";
|
||||
import { useColorScheme } from "@/hooks/useColorScheme";
|
||||
import { useTasksByTablo, useCreateTask, useUpdateTask, useDeleteTask } from "@/hooks/tasks";
|
||||
import { useTabloEtapes } from "@/hooks/etapes";
|
||||
import { useTabloMembers } from "@/hooks/members";
|
||||
import { TaskStatus, TASK_STATUSES } from "@/types/tasks.types";
|
||||
import StatusControl from "@/components/tasks/StatusControl";
|
||||
import AssigneePicker from "@/components/tasks/AssigneePicker";
|
||||
import EtapePicker from "@/components/tasks/EtapePicker";
|
||||
|
||||
export default function TaskDetailScreen() {
|
||||
const { id, tabloId } = useLocalSearchParams<{ id: string; tabloId: string }>();
|
||||
const isCreateMode = id === "new";
|
||||
|
||||
const colorScheme = useColorScheme();
|
||||
const isDark = colorScheme === "dark";
|
||||
const bgColor = useThemeColor({ light: "#f8fafc", dark: "#111827" }, "background");
|
||||
const textColor = useThemeColor({ light: "#1f2937", dark: "#f9fafb" }, "text");
|
||||
const headerBg = useThemeColor({ light: "#ffffff", dark: "#1f2937" }, "background");
|
||||
const inputBg = useThemeColor({ light: "#f1f5f9", dark: "#374151" }, "background");
|
||||
const borderColor = isDark ? "#374151" : "#e5e7eb";
|
||||
const subtextColor = useThemeColor({ light: "#6b7280", dark: "#9ca3af" }, "text");
|
||||
|
||||
// Data
|
||||
const { data: tasks } = useTasksByTablo(tabloId);
|
||||
const { data: etapes } = useTabloEtapes(tabloId);
|
||||
const { data: members } = useTabloMembers(tabloId);
|
||||
const existingTask = isCreateMode ? null : tasks?.find((t) => t.id === id);
|
||||
|
||||
// Form state
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [status, setStatus] = useState<TaskStatus>("todo");
|
||||
const [assigneeId, setAssigneeId] = useState<string | null>(null);
|
||||
const [parentTaskId, setParentTaskId] = useState<string | null>(null);
|
||||
const [dueDate, setDueDate] = useState<Date | null>(null);
|
||||
const [showDatePicker, setShowDatePicker] = useState(false);
|
||||
|
||||
// Picker visibility
|
||||
const [assigneePickerVisible, setAssigneePickerVisible] = useState(false);
|
||||
const [etapePickerVisible, setEtapePickerVisible] = useState(false);
|
||||
|
||||
// Mutations
|
||||
const { mutate: createTask, isPending: isCreating } = useCreateTask();
|
||||
const { mutate: updateTask, isPending: isUpdating } = useUpdateTask();
|
||||
const { mutate: deleteTask, isPending: isDeleting } = useDeleteTask();
|
||||
const isPending = isCreating || isUpdating || isDeleting;
|
||||
|
||||
// Populate form for edit mode
|
||||
useEffect(() => {
|
||||
if (existingTask) {
|
||||
setTitle(existingTask.title);
|
||||
setDescription(existingTask.description ?? "");
|
||||
setStatus(existingTask.status);
|
||||
setAssigneeId(existingTask.assignee_id);
|
||||
setParentTaskId(existingTask.parent_task_id);
|
||||
setDueDate(existingTask.due_date ? new Date(existingTask.due_date) : null);
|
||||
}
|
||||
}, [existingTask]);
|
||||
|
||||
const handleSave = () => {
|
||||
if (!title.trim() || !tabloId) return;
|
||||
|
||||
const dueDateStr = dueDate
|
||||
? `${dueDate.getFullYear()}-${String(dueDate.getMonth() + 1).padStart(2, "0")}-${String(dueDate.getDate()).padStart(2, "0")}`
|
||||
: null;
|
||||
|
||||
if (isCreateMode) {
|
||||
createTask(
|
||||
{
|
||||
tablo_id: tabloId,
|
||||
title: title.trim(),
|
||||
description: description.trim() || null,
|
||||
status,
|
||||
assignee_id: assigneeId,
|
||||
parent_task_id: parentTaskId,
|
||||
due_date: dueDateStr,
|
||||
},
|
||||
{ onSuccess: () => router.back() }
|
||||
);
|
||||
} else {
|
||||
updateTask(
|
||||
{
|
||||
id: id!,
|
||||
tabloId: tabloId!,
|
||||
title: title.trim(),
|
||||
description: description.trim() || null,
|
||||
status,
|
||||
assignee_id: assigneeId,
|
||||
parent_task_id: parentTaskId,
|
||||
due_date: dueDateStr,
|
||||
},
|
||||
{ onSuccess: () => router.back() }
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
Alert.alert("Supprimer la tâche", "Cette action est irréversible.", [
|
||||
{ text: "Annuler", style: "cancel" },
|
||||
{
|
||||
text: "Supprimer",
|
||||
style: "destructive",
|
||||
onPress: () => {
|
||||
deleteTask({ id: id!, tabloId: tabloId! }, { onSuccess: () => router.back() });
|
||||
},
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
// Derived display values
|
||||
const assigneeName = members?.find((m) => m.id === assigneeId)?.name ?? "Non assigné";
|
||||
const etapeName = etapes?.find((e) => e.id === parentTaskId)?.title ?? "Sans Étape";
|
||||
const dueDateDisplay = dueDate
|
||||
? dueDate.toLocaleDateString("fr-FR", { day: "numeric", month: "long", year: "numeric" })
|
||||
: "Aucune";
|
||||
|
||||
return (
|
||||
<SafeAreaView style={[styles.container, { backgroundColor: bgColor }]}>
|
||||
{/* Header */}
|
||||
<View style={[styles.header, { backgroundColor: headerBg, borderBottomColor: borderColor }]}>
|
||||
<TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
|
||||
<ArrowLeft size={22} color={textColor} />
|
||||
</TouchableOpacity>
|
||||
<Text style={[styles.headerTitle, { color: textColor }]}>
|
||||
{isCreateMode ? "Nouvelle tâche" : "Modifier la tâche"}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.form} keyboardShouldPersistTaps="handled">
|
||||
{/* Title */}
|
||||
<Text style={[styles.label, { color: textColor }]}>Titre</Text>
|
||||
<TextInput
|
||||
style={[styles.input, { backgroundColor: inputBg, color: textColor }]}
|
||||
value={title}
|
||||
onChangeText={setTitle}
|
||||
placeholder="Titre de la tâche"
|
||||
placeholderTextColor="#9ca3af"
|
||||
autoFocus={isCreateMode}
|
||||
/>
|
||||
|
||||
{/* Description */}
|
||||
<Text style={[styles.label, { color: textColor }]}>Description</Text>
|
||||
<TextInput
|
||||
style={[styles.input, styles.textArea, { backgroundColor: inputBg, color: textColor }]}
|
||||
value={description}
|
||||
onChangeText={setDescription}
|
||||
placeholder="Description (optionnel)"
|
||||
placeholderTextColor="#9ca3af"
|
||||
multiline
|
||||
numberOfLines={4}
|
||||
/>
|
||||
|
||||
{/* Status */}
|
||||
<Text style={[styles.label, { color: textColor }]}>Statut</Text>
|
||||
<StatusControl value={status} onChange={setStatus} />
|
||||
|
||||
{/* Assignee */}
|
||||
<Text style={[styles.label, { color: textColor }]}>Assigné à</Text>
|
||||
<TouchableOpacity
|
||||
style={[styles.pickerButton, { backgroundColor: inputBg }]}
|
||||
onPress={() => setAssigneePickerVisible(true)}
|
||||
>
|
||||
<User size={16} color={subtextColor} />
|
||||
<Text style={[styles.pickerText, { color: assigneeId ? textColor : subtextColor }]}>
|
||||
{assigneeName}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Etape */}
|
||||
<Text style={[styles.label, { color: textColor }]}>Étape</Text>
|
||||
<TouchableOpacity
|
||||
style={[styles.pickerButton, { backgroundColor: inputBg }]}
|
||||
onPress={() => setEtapePickerVisible(true)}
|
||||
>
|
||||
<Layers size={16} color={subtextColor} />
|
||||
<Text style={[styles.pickerText, { color: parentTaskId ? textColor : subtextColor }]}>
|
||||
{etapeName}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Due date */}
|
||||
<Text style={[styles.label, { color: textColor }]}>Date limite</Text>
|
||||
<TouchableOpacity
|
||||
style={[styles.pickerButton, { backgroundColor: inputBg }]}
|
||||
onPress={() => setShowDatePicker(true)}
|
||||
>
|
||||
<Calendar size={16} color={subtextColor} />
|
||||
<Text style={[styles.pickerText, { color: dueDate ? textColor : subtextColor }]}>
|
||||
{dueDateDisplay}
|
||||
</Text>
|
||||
{dueDate && (
|
||||
<TouchableOpacity onPress={() => setDueDate(null)}>
|
||||
<Text style={{ color: "#ef4444", fontSize: 13 }}>Retirer</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
{showDatePicker && (
|
||||
<DateTimePicker
|
||||
value={dueDate ?? new Date()}
|
||||
mode="date"
|
||||
display={Platform.OS === "ios" ? "spinner" : "default"}
|
||||
onChange={(event, date) => {
|
||||
setShowDatePicker(Platform.OS !== "ios");
|
||||
if (date) setDueDate(date);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Save button */}
|
||||
<TouchableOpacity
|
||||
style={[styles.saveButton, !title.trim() && styles.saveButtonDisabled]}
|
||||
onPress={handleSave}
|
||||
disabled={!title.trim() || isPending}
|
||||
>
|
||||
<Text style={styles.saveButtonText}>
|
||||
{isPending ? "..." : isCreateMode ? "Créer" : "Enregistrer"}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Delete button (edit mode only) */}
|
||||
{!isCreateMode && (
|
||||
<TouchableOpacity style={styles.deleteButton} onPress={handleDelete} disabled={isPending}>
|
||||
<Text style={styles.deleteButtonText}>Supprimer la tâche</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
<View style={{ height: 40 }} />
|
||||
</ScrollView>
|
||||
|
||||
{/* Pickers */}
|
||||
<AssigneePicker
|
||||
visible={assigneePickerVisible}
|
||||
onClose={() => setAssigneePickerVisible(false)}
|
||||
members={members ?? []}
|
||||
selectedId={assigneeId}
|
||||
onSelect={setAssigneeId}
|
||||
/>
|
||||
<EtapePicker
|
||||
visible={etapePickerVisible}
|
||||
onClose={() => setEtapePickerVisible(false)}
|
||||
etapes={etapes ?? []}
|
||||
selectedId={parentTaskId}
|
||||
onSelect={setParentTaskId}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 14,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
gap: 10,
|
||||
},
|
||||
backButton: {
|
||||
padding: 4,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: "700",
|
||||
},
|
||||
form: {
|
||||
flex: 1,
|
||||
padding: 16,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
marginTop: 16,
|
||||
marginBottom: 6,
|
||||
},
|
||||
input: {
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 12,
|
||||
fontSize: 15,
|
||||
},
|
||||
textArea: {
|
||||
minHeight: 100,
|
||||
textAlignVertical: "top",
|
||||
},
|
||||
pickerButton: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 12,
|
||||
gap: 10,
|
||||
},
|
||||
pickerText: {
|
||||
flex: 1,
|
||||
fontSize: 15,
|
||||
},
|
||||
saveButton: {
|
||||
backgroundColor: "#3b82f6",
|
||||
borderRadius: 12,
|
||||
paddingVertical: 14,
|
||||
alignItems: "center",
|
||||
marginTop: 24,
|
||||
},
|
||||
saveButtonDisabled: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
saveButtonText: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
fontWeight: "700",
|
||||
},
|
||||
deleteButton: {
|
||||
borderRadius: 12,
|
||||
paddingVertical: 14,
|
||||
alignItems: "center",
|
||||
marginTop: 12,
|
||||
},
|
||||
deleteButtonText: {
|
||||
color: "#ef4444",
|
||||
fontSize: 15,
|
||||
fontWeight: "600",
|
||||
},
|
||||
});
|
||||
5
xtablo-expo/app/(app)/task/_layout.tsx
Normal file
5
xtablo-expo/app/(app)/task/_layout.tsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { Stack } from "expo-router";
|
||||
|
||||
export default function TaskLayout() {
|
||||
return <Stack screenOptions={{ headerShown: false }} />;
|
||||
}
|
||||
Loading…
Reference in a new issue