New task feature (#2)
This PR contains the work done to implement the **New Task** feature, and to integrate it into the main context view of the app. Reviewed-on: rock-n-code/todos-app#2 Co-authored-by: Javier Cicchelli <javier@rock-n-code.com> Co-committed-by: Javier Cicchelli <javier@rock-n-code.com>
This commit was merged in pull request #2.
This commit is contained in:
@@ -5,7 +5,7 @@ import SwiftUI
|
||||
struct TodosApp: App {
|
||||
var sharedModelContainer: ModelContainer = {
|
||||
let schema = Schema([
|
||||
Item.self
|
||||
Todo.self
|
||||
])
|
||||
let modelConfiguration = ModelConfiguration(schema: schema, isStoredInMemoryOnly: false)
|
||||
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
import Foundation
|
||||
import SwiftData
|
||||
|
||||
@Model
|
||||
final class Item {
|
||||
var timestamp: Date
|
||||
|
||||
init(timestamp: Date) {
|
||||
self.timestamp = timestamp
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import Foundation
|
||||
import SwiftData
|
||||
|
||||
/// Represents a todo task created by a user.
|
||||
@Model
|
||||
final class Todo {
|
||||
|
||||
// MARK: Properties
|
||||
|
||||
/// A date when the todo was completed, if applicable.
|
||||
var completed: Date?
|
||||
|
||||
/// A date by which the todo should be completed.
|
||||
var due: Date
|
||||
|
||||
/// An optional note providing additional details about the todo task.
|
||||
var note: String?
|
||||
|
||||
/// The title of the todo task.
|
||||
var title: String
|
||||
|
||||
// MARK: Initializers
|
||||
|
||||
/// Creates a new todo item.
|
||||
/// - Parameters:
|
||||
/// - title: The title of the todo item.
|
||||
/// - note: An optional note providing additional details.
|
||||
/// - due: The date by which the todo should be completed.
|
||||
/// - completed: The date when the todo was completed, if applicable.
|
||||
init(
|
||||
title: String,
|
||||
note: String? = nil,
|
||||
due: Date,
|
||||
completed: Date? = nil
|
||||
) {
|
||||
self.completed = completed
|
||||
self.due = due
|
||||
self.note = note
|
||||
self.title = title
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import SwiftData
|
||||
import SwiftUI
|
||||
|
||||
extension ContentView {
|
||||
|
||||
/// View model for managing the logic for the content view.
|
||||
///
|
||||
/// This observable class encapsulates the state and business logic for the main content view.
|
||||
/// It follows the MVVM pattern to separate presentation logic from the view layer.
|
||||
///
|
||||
/// The view model manages:
|
||||
/// - Presentation state for the new task view within a sheet.
|
||||
@Observable
|
||||
class ViewModel {
|
||||
|
||||
// MARK: Properties
|
||||
|
||||
/// Whether the new task view should be shown.
|
||||
var newTaskShown: Bool
|
||||
|
||||
// MARK: Initialization
|
||||
|
||||
/// Initializes a new view model instance with default values.
|
||||
///
|
||||
/// The view model is initialized with:
|
||||
/// - New task view hidden
|
||||
init() {
|
||||
newTaskShown = false
|
||||
}
|
||||
|
||||
// MARK: Functions
|
||||
|
||||
/// Shows the new task view by setting the presentation state to true.
|
||||
func showNewTask() {
|
||||
newTaskShown = true
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import SwiftData
|
||||
import SwiftUI
|
||||
|
||||
extension NewTaskView {
|
||||
|
||||
/// View model for managing the logic for creating todo tasks.
|
||||
///
|
||||
/// This observable class encapsulates the state and business logic for creating new todo tasks.
|
||||
/// It follows the MVVM pattern to separate presentation logic from the view layer.
|
||||
///
|
||||
/// The view model manages:
|
||||
/// - User input for task title, note, and due date
|
||||
/// - Form validation (ensuring title is not empty)
|
||||
/// - Saving the todo to SwiftData model context
|
||||
@Observable
|
||||
class ViewModel {
|
||||
|
||||
// MARK: Properties
|
||||
|
||||
/// The title of the todo task.
|
||||
///
|
||||
/// This is a required field. The save button is disabled when this is empty.
|
||||
var title: String
|
||||
|
||||
/// A note providing additional details about the task, if required.
|
||||
///
|
||||
/// If left empty, the note will be stored as `nil` in the model.
|
||||
var note: String
|
||||
|
||||
/// The due date for the todo task.
|
||||
///
|
||||
/// Defaults to the current date when the view model is initialized.
|
||||
var due: Date
|
||||
|
||||
// MARK: Initialization
|
||||
|
||||
/// Initializes a new view model instance with default values.
|
||||
///
|
||||
/// The view model is initialized with:
|
||||
/// - Empty title
|
||||
/// - Empty note
|
||||
/// - Current date as due date
|
||||
init() {
|
||||
title = ""
|
||||
note = ""
|
||||
due = .init()
|
||||
}
|
||||
|
||||
// MARK: Computed
|
||||
|
||||
/// Whether the confirmation button should be enabled.
|
||||
///
|
||||
/// Returns `true` when the title is not empty after trimming whitespace, `false` otherwise.
|
||||
var canConfirm: Bool {
|
||||
!title.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty
|
||||
}
|
||||
|
||||
// MARK: Functions
|
||||
|
||||
/// Saves a new todo task to the SwiftData model context.
|
||||
///
|
||||
/// This function creates a new `Todo` instance with the current property values and inserts it into the provided model context.
|
||||
/// The title and note are trimmed of leading and trailing whitespace before saving.
|
||||
/// The `note` property value is only included if it's not empty after trimming.
|
||||
///
|
||||
/// - Parameter modelContext: The SwiftData model context to insert a new todo task.
|
||||
func save(to modelContext: ModelContext) {
|
||||
let trimmedTitle = title.trimmingCharacters(in: .whitespacesAndNewlines)
|
||||
let trimmedNote = note.trimmingCharacters(in: .whitespacesAndNewlines)
|
||||
|
||||
let todo = Todo(
|
||||
title: trimmedTitle,
|
||||
note: trimmedNote.isEmpty ? nil : trimmedNote,
|
||||
due: due
|
||||
)
|
||||
|
||||
modelContext.insert(todo)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -1,63 +1,52 @@
|
||||
import SwiftData
|
||||
import SwiftUI
|
||||
|
||||
/// The main content view of the app.
|
||||
///
|
||||
/// This view serves as the primary interface for managing todo tasks.
|
||||
///
|
||||
/// The view uses a dedicated view model (`ViewModel`) to manage state and business logic, following the MVVM pattern.
|
||||
/// User interactions are handled through the view model, maintaining separation of concerns.
|
||||
struct ContentView: View {
|
||||
|
||||
@Environment(\.modelContext)
|
||||
private var modelContext
|
||||
// MARK: Properties
|
||||
|
||||
@Query
|
||||
private var items: [Item]
|
||||
/// The view model managing the state and logic for this view.
|
||||
@State
|
||||
private var viewModel = ViewModel()
|
||||
|
||||
// MARK: Body
|
||||
|
||||
/// The content and behavior of the view.
|
||||
///
|
||||
/// Displays a navigation view containing:
|
||||
/// - A floating action button for adding new tasks
|
||||
///
|
||||
/// The view presents a sheet when `viewModel.newTaskShown` is true,
|
||||
/// allowing users to create new todo tasks.
|
||||
var body: some View {
|
||||
NavigationSplitView {
|
||||
List {
|
||||
ForEach(items) { item in
|
||||
NavigationLink {
|
||||
Text("Item at \(item.timestamp, format: Date.FormatStyle(date: .numeric, time: .standard))")
|
||||
} label: {
|
||||
Text(item.timestamp, format: Date.FormatStyle(date: .numeric, time: .standard))
|
||||
}
|
||||
}
|
||||
.onDelete(perform: deleteItems)
|
||||
}
|
||||
#if os(macOS)
|
||||
.navigationSplitViewColumnWidth(min: 180, ideal: 200)
|
||||
#endif
|
||||
.toolbar {
|
||||
#if os(iOS)
|
||||
ToolbarItem(placement: .navigationBarTrailing) {
|
||||
EditButton()
|
||||
}
|
||||
#endif
|
||||
ToolbarItem {
|
||||
Button(action: addItem) {
|
||||
Label("Add Item", systemImage: "plus")
|
||||
}
|
||||
}
|
||||
}
|
||||
} detail: {
|
||||
Text("Select an item")
|
||||
}
|
||||
}
|
||||
NavigationView {
|
||||
ZStack(alignment: .bottomTrailing) {
|
||||
List {}
|
||||
|
||||
private func addItem() {
|
||||
withAnimation {
|
||||
let newItem = Item(timestamp: Date())
|
||||
modelContext.insert(newItem)
|
||||
}
|
||||
}
|
||||
|
||||
private func deleteItems(offsets: IndexSet) {
|
||||
withAnimation {
|
||||
for index in offsets {
|
||||
modelContext.delete(items[index])
|
||||
Button(action: viewModel.showNewTask) {
|
||||
Image(systemName: "plus")
|
||||
.frame(width: 48, height: 48)
|
||||
.foregroundStyle(.white)
|
||||
}
|
||||
.glassEffect(.regular.tint(.blue.opacity(0.8)).interactive())
|
||||
.padding(.trailing, 20)
|
||||
}
|
||||
.navigationTitle("Todos")
|
||||
}
|
||||
.sheet(isPresented: $viewModel.newTaskShown) {
|
||||
NewTaskView()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Previews
|
||||
|
||||
#Preview {
|
||||
ContentView()
|
||||
.modelContainer(for: Item.self, inMemory: true)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
import SwiftData
|
||||
import SwiftUI
|
||||
|
||||
/// A view for creating new todo tasks.
|
||||
///
|
||||
/// This view provides a form interface for users to input todo task details including:
|
||||
/// - *Title* (required)
|
||||
/// - *Note* (optional)
|
||||
/// - *Due date* (required)
|
||||
///
|
||||
/// The view uses a dedicated view model (`ViewModel`) to manage state and business logic, following the MVVM pattern.
|
||||
/// When the user saves, the todo is inserted into the SwiftData model context and the view is dismissed afterwards.
|
||||
struct NewTaskView: View {
|
||||
|
||||
// MARK: Properties
|
||||
|
||||
/// Environment value for dismissing this view.
|
||||
@Environment(\.dismiss)
|
||||
private var dismiss
|
||||
|
||||
/// SwiftData model context for saving todo tasks.
|
||||
@Environment(\.modelContext)
|
||||
private var modelContext
|
||||
|
||||
/// The view model managing the state and logic for this view.
|
||||
@State
|
||||
private var viewModel: ViewModel
|
||||
|
||||
// MARK: Initialization
|
||||
|
||||
/// Initializes a new task view with a fresh view model instance.
|
||||
init() {
|
||||
_viewModel = State(initialValue: .init())
|
||||
}
|
||||
|
||||
// MARK: Body
|
||||
|
||||
/// The content and behavior of the view.
|
||||
///
|
||||
/// Displays a navigation stack containing a form with sections for:
|
||||
/// - Task details (title and note fields)
|
||||
/// - Due date picker with graphical style
|
||||
///
|
||||
/// The toolbar includes:
|
||||
/// - Cancel button to dismiss without saving
|
||||
/// - Confirm button to persist the todo and dismiss (disabled when title is empty)
|
||||
var body: some View {
|
||||
NavigationStack {
|
||||
Form {
|
||||
Section("view.new-task.section.task") {
|
||||
TextField(
|
||||
"view.new-task.placeholder.title",
|
||||
text: $viewModel.title
|
||||
)
|
||||
.autocapitalization(.none)
|
||||
.autocorrectionDisabled(false)
|
||||
.keyboardType(.asciiCapable)
|
||||
|
||||
TextField(
|
||||
"view.new-task.placeholder.note",
|
||||
text: $viewModel.note,
|
||||
axis: .vertical
|
||||
)
|
||||
.autocapitalization(.none)
|
||||
.autocorrectionDisabled(false)
|
||||
.keyboardType(.asciiCapable)
|
||||
.lineLimit(3 ... 6)
|
||||
}
|
||||
|
||||
Section("view.new-task.section.due-date") {
|
||||
DatePicker(
|
||||
"view.new-task.placeholder.due-date",
|
||||
selection: $viewModel.due,
|
||||
displayedComponents: [.date]
|
||||
)
|
||||
.datePickerStyle(.graphical)
|
||||
}
|
||||
}
|
||||
.navigationTitle("view.new-task.navigation.title")
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
.toolbar {
|
||||
ToolbarItem(placement: .cancellationAction) {
|
||||
Button(role: .cancel) {
|
||||
dismiss()
|
||||
}
|
||||
}
|
||||
ToolbarItem(placement: .confirmationAction) {
|
||||
Button(role: .confirm) {
|
||||
viewModel.save(to: modelContext)
|
||||
dismiss()
|
||||
}
|
||||
.disabled(!viewModel.canConfirm)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// MARK: - Previews
|
||||
|
||||
#Preview("New todo task") {
|
||||
NewTaskView()
|
||||
.modelContainer(for: Todo.self, inMemory: true)
|
||||
}
|
||||
Reference in New Issue
Block a user