List tasks feature (#4)

This PR contains the work done to implement the **List Tasks** feature, and to integrate it into the main content view of the app. Reviewed-on: rock-n-code/todos-app#4 Co-authored-by: Javier Cicchelli <javier@rock-n-code.com> Co-committed-by: Javier Cicchelli <javier@rock-n-code.com>
2026-02-10 15:31:52 +00:00
parent 0b8e5d8bd0
commit 2a3323b8e6
11 changed files with 679 additions and 45 deletions
@@ -0,0 +1,148 @@
+import SwiftUI
+
+extension TaskListView {
+
+    /// A view that displays a single editable todo task in a list.
+    ///
+    /// This view provides a comprehensive interface for viewing and editing task information,
+    /// including:
+    /// - A completion toggle using a circular checkbox design
+    /// - An editable title field with multi-line support
+    /// - An optional note field that appears when the task has notes
+    /// - A date picker for selecting the task's due date
+    ///
+    /// The view automatically adjusts its appearance based on completion state, dimming
+    /// completed tasks to provide visual feedback. All text fields support automatic
+    /// capitalization and keyboard correction for improved user experience.
+    struct Item: View {
+
+        // MARK: Properties
+
+        /// The todo task to display.
+        @Bindable
+        private var item: Todo
+
+        // MARK: Initializers
+
+        /// Creates a new task list item view for the specified todo.
+        ///
+        /// The item is wrapped in a `@Bindable` property wrapper to enable two-way
+        /// data binding for editing task properties directly within the view.
+        ///
+        /// - Parameter item: The todo task to display and edit.
+        init(_ item: Todo) {
+            _item = Bindable(item)
+        }
+
+        // MARK: Body
+
+        /// The content and behavior of the view.
+        ///
+        /// Renders an editable task list item with a completion toggle, title field,
+        /// optional note field, and date picker. The view's foreground color automatically
+        /// adjusts based on completion state, and changes animate smoothly.
+        var body: some View {
+            HStack(
+                alignment: .top,
+                spacing: 16
+            ) {
+                Toggle(
+                    "view.task-list-item.placeholder.completed",
+                    isOn: isCompleted
+                )
+                .toggleStyle(.completion)
+
+                VStack(
+                    alignment: .leading,
+                    spacing: 8
+                ) {
+                    TextField(
+                        "view.task-list-item.placeholder.title",
+                        text: $item.title,
+                        axis: .vertical
+                    )
+                    .font(.headline)
+
+                    if showNote {
+                        TextField(
+                            "view.task-list-item.placeholder.note",
+                            text: note,
+                            axis: .vertical
+                        )
+                        .font(.subheadline)
+                    }
+
+                    DatePicker(selection: $item.due, displayedComponents: .date) {
+                        Image(systemName: "calendar")
+                    }
+                    .frame(width: 160)
+                    .disabled(isCompleted.wrappedValue)
+                }
+                .autocapitalization(.sentences)
+                .autocorrectionDisabled(false)
+                .foregroundStyle(foregroundColor)
+                .keyboardType(.asciiCapable)
+            }
+            .animation(
+                .easeInOut,
+                value: item.completed
+            )
+        }
+    }
+
+}
+
+// MARK: - Helpers
+
+private extension TaskListView.Item {
+
+    // MARK: Bindings
+
+    var isCompleted: Binding<Bool> {
+        .init {
+            item.completed != nil
+        } set: {
+            item.completed = $0 ? .now : nil
+        }
+    }
+
+    var note: Binding<String> {
+        .init {
+            item.note ?? ""
+        } set: {
+            item.note = $0.isEmpty ? nil : $0
+        }
+    }
+
+    // MARK: Computed
+
+    var foregroundColor: Color {
+        item.completed == nil ? .primary : .secondary
+    }
+
+    var showNote: Bool {
+        guard let note = item.note else {
+            return false
+        }
+
+        return note.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty == false
+    }
+
+}
+
+// MARK: - Previews
+
+#Preview("Task list item") {
+    @Previewable
+    var todo: Todo = .init(
+        title: "Complete project documentation",
+        note: "Add detailed comments and README",
+        due: .now,
+        completed: nil
+    )
+
+    List {
+        TaskListView.Item(todo)
+    }
+    .listStyle(.grouped)
+}
@@ -0,0 +1,99 @@
+import SwiftData
+import SwiftUI
+
+/// A view that displays all todo tasks for a specific task group.
+///
+/// This view shows a filtered list of tasks based on the selected group (today, upcoming, past, or completed).
+/// The view uses a view model to separate business logic from presentation.
+struct TaskListView: View {
+    
+    // MARK: Properties
+    
+    /// Query to fetch todos filtered by the current group.
+    @Query
+    private var tasks: [Todo]
+    
+    /// The view model managing the business logic for this view.
+    @State
+    private var viewModel: ViewModel
+
+    // MARK: Initialization
+    
+    /// Creates a new task list view for a specific group.
+    /// - Parameter group: The todo group to display tasks for.
+    init(group: TodoGroup) {
+        _tasks = .init(FetchDescriptor<Todo>(group: group))
+        _viewModel = .init(initialValue: ViewModel(group: group))
+    }
+    
+    // MARK: Body
+    
+    /// The content and behavior of the view.
+    ///
+    /// Displays a list of tasks filtered by the current group.
+    var body: some View {
+        Group {
+            if tasks.isEmpty {
+                ContentUnavailableView(
+                    "view.task-list.content-unavailable.title",
+                    systemImage: "checkmark.circle"
+                )
+            } else {
+                List {
+                    ForEach(tasks) { todo in
+                        Item(todo)
+                    }
+                }
+                .listStyle(.grouped)
+            }
+        }
+        .navigationTitle(viewModel.navigationTitle)
+    }
+}
+
+// MARK: - Previews
+
+#Preview(
+    "Task list with empty tasks",
+    traits: .emptyContainer
+) {
+    NavigationStack {
+        TaskListView(group: .today)
+    }
+}
+
+#Preview(
+    "Task list - today",
+    traits: .sampleTasks
+) {
+    NavigationStack {
+        TaskListView(group: .today)
+    }
+}
+
+#Preview(
+    "Task list - upcoming",
+    traits: .sampleTasks
+) {
+    NavigationStack {
+        TaskListView(group: .upcoming)
+    }
+}
+
+#Preview(
+    "Task list - overdue",
+    traits: .sampleTasks
+) {
+    NavigationStack {
+        TaskListView(group: .overdue)
+    }
+}
+
+#Preview(
+    "Task list - completed",
+    traits: .sampleTasks
+) {
+    NavigationStack {
+        TaskListView(group: .completed)
+    }
+}