💄 UI Enhancements

AboTracker.xcodeproj/project.pbxproj

@@ -12,6 +12,7 @@
 		D40CCAE42C2DC5AA007C4A9F /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = D40CCAE32C2DC5AA007C4A9F /* Assets.xcassets */; };
 		D40CCAE82C2DC5AA007C4A9F /* Preview Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = D40CCAE72C2DC5AA007C4A9F /* Preview Assets.xcassets */; };
 		D40CCAEF2C2DC5D8007C4A9F /* Subscription.swift in Sources */ = {isa = PBXBuildFile; fileRef = D40CCAEE2C2DC5D8007C4A9F /* Subscription.swift */; };
+		D40CCAF32C2EE305007C4A9F /* AddSubscriptionView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D40CCAF22C2EE304007C4A9F /* AddSubscriptionView.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -22,6 +23,7 @@
 		D40CCAE52C2DC5AA007C4A9F /* AboTracker.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = AboTracker.entitlements; sourceTree = "<group>"; };
 		D40CCAE72C2DC5AA007C4A9F /* Preview Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = "Preview Assets.xcassets"; sourceTree = "<group>"; };
 		D40CCAEE2C2DC5D8007C4A9F /* Subscription.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Subscription.swift; sourceTree = "<group>"; };
+		D40CCAF22C2EE304007C4A9F /* AddSubscriptionView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AddSubscriptionView.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -55,6 +57,7 @@
 			isa = PBXGroup;
 			children = (
 				D40CCADF2C2DC5A9007C4A9F /* AboTrackerApp.swift */,
+				D40CCAF22C2EE304007C4A9F /* AddSubscriptionView.swift */,
 				D40CCAE12C2DC5A9007C4A9F /* ContentView.swift */,
 				D40CCAE32C2DC5AA007C4A9F /* Assets.xcassets */,
 				D40CCAE52C2DC5AA007C4A9F /* AboTracker.entitlements */,
@@ -143,6 +146,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				D40CCAEF2C2DC5D8007C4A9F /* Subscription.swift in Sources */,
+				D40CCAF32C2EE305007C4A9F /* AddSubscriptionView.swift in Sources */,
 				D40CCAE22C2DC5A9007C4A9F /* ContentView.swift in Sources */,
 				D40CCAE02C2DC5A9007C4A9F /* AboTrackerApp.swift in Sources */,
 			);

AboTracker/AddSubscriptionView.swift

@@ -0,0 +1,62 @@
+import SwiftUI
+
+struct AddSubscriptionView: View {
+    @Environment(\.presentationMode) var presentationMode
+    @Binding var subs: [Subscription]
+    
+    @State private var name: String = ""
+    @State private var payments: [Payment] = [Payment(amount: 0, intervall: .monthly)]
+    
+    var body: some View {
+        NavigationView {
+            Form {
+                Section(header: Text("Subscription Name")) {
+                    TextField("Name", text: $name)
+                }
+                
+                ForEach($payments) { $payment in
+                    Section(header: Text("Payment")) {
+                        HStack {
+                            TextField("Amount", value: $payment.amount, formatter: NumberFormatter())
+                            Spacer()
+                            Text("\(Currency.euro.description)")
+                        }
+                        Picker("Intervall", selection: $payment.intervall) {
+                            Text("Weekly").tag(PaymentIntervall.weekly)
+                            Text("Monthly").tag(PaymentIntervall.monthly)
+                            Text("Quarter").tag(PaymentIntervall.quarter)
+                            Text("Yearly").tag(PaymentIntervall.yearly)
+                        }
+                        .pickerStyle(SegmentedPickerStyle())
+                    }
+                }
+                .onDelete(perform: deletePayment)
+                
+                Section {
+                    Button("Add Payment") {
+                        let newPayment = Payment(amount: 0, intervall: .monthly)
+                        payments.append(newPayment)
+                    }
+                }
+                
+                Section {
+                    Button("Add Subscription") {
+                        let newSubscription = Subscription(name: name, payments: payments)
+                        subs.append(newSubscription)
+                        presentationMode.wrappedValue.dismiss()
+                    }
+                }
+            }
+            .navigationTitle("Add Subscription")
+            #if os(iOS)
+            .navigationBarItems(trailing: Button("Cancel") {
+                presentationMode.wrappedValue.dismiss()
+            })
+            #endif
+        }
+    }
+    
+    func deletePayment(at offsets: IndexSet) {
+        payments.remove(atOffsets: offsets)
+    }
+}

AboTracker/ContentView.swift

@@ -10,8 +10,8 @@ struct ContentView: View {
     var body: some View {
         NavigationView {
             Form {
-                Section(header: Text("Subscriptions")) {
+                ForEach(subs) { sub in
-                    ForEach(subs) { sub in
+                    Section {
                         VStack(alignment: .leading, spacing: 8) {
                             Text(sub.name)
                                 .font(.headline)
@@ -27,10 +27,10 @@ struct ContentView: View {
                         }
                         .padding(.vertical, 8)
                     }
-                    .onDelete(perform: deleteSubscription)
                 }
+                .onDelete(perform: deleteSubscription)
                 
-                Section {
+                Section(header: Text("Totals")) {
                     HStack {
                         Text("Monthly Total")
                         Spacer()
@@ -38,19 +38,30 @@ struct ContentView: View {
                             .foregroundColor(.gray)
                     }
                 }
-                
-                Section {
-                    Button("Add a Subscription") {
-                        showAddSubscriptionSheet.toggle()
-                    }
-                }
             }
             .navigationTitle("Subscriptions")
-            .navigationBarItems(leading: EditButton(), trailing: Button(action: {
+            .toolbar {
-                showAddSubscriptionSheet.toggle()
+                #if os(iOS)
-            }) {
+                ToolbarItem(placement: .navigationBarLeading) {
-                Image(systemName: "plus")
+                    EditButton()
-            })
+                }
+                ToolbarItem(placement: .navigationBarTrailing) {
+                    Button(action: {
+                        showAddSubscriptionSheet.toggle()
+                    }) {
+                        Image(systemName: "plus")
+                    }
+                }
+                #elseif os(macOS)
+                ToolbarItem(placement: .primaryAction) {
+                    Button(action: {
+                        showAddSubscriptionSheet.toggle()
+                    }) {
+                        Image(systemName: "plus")
+                    }
+                }
+                #endif
+            }
             .sheet(isPresented: $showAddSubscriptionSheet) {
                 AddSubscriptionView(subs: $subs)
             }
@@ -70,54 +81,6 @@ struct ContentView: View {
     }
 }
 
-struct AddSubscriptionView: View {
-    @Environment(\.presentationMode) var presentationMode
-    @Binding var subs: [Subscription]
-    
-    @State private var name: String = ""
-    @State private var amount: String = ""
-    @State private var intervall: PaymentIntervall = .monthly
-    
-    var body: some View {
-        NavigationView {
-            Form {
-                Section(header: Text("Subscription Name")) {
-                    TextField("Name", text: $name)
-                }
-                
-                Section(header: Text("Amount")) {
-                    TextField("Amount", text: $amount)
-                        .keyboardType(.decimalPad)
-                }
-                
-                Section(header: Text("Intervall")) {
-                    Picker("Intervall", selection: $intervall) {
-                        Text("Weekly").tag(PaymentIntervall.weekly)
-                        Text("Monthly").tag(PaymentIntervall.monthly)
-                        Text("Quarter").tag(PaymentIntervall.quarter)
-                        Text("Yearly").tag(PaymentIntervall.yearly)
-                    }
-                    .pickerStyle(SegmentedPickerStyle())
-                }
-                
-                Section {
-                    Button("Add Subscription") {
-                        if let amount = Float(amount) {
-                            let newSubscription = Subscription(name: name, payments: [Payment(amount: amount, intervall: intervall)])
-                            subs.append(newSubscription)
-                            presentationMode.wrappedValue.dismiss()
-                        }
-                    }
-                }
-            }
-            .navigationTitle("Add Subscription")
-            .navigationBarItems(trailing: Button("Cancel") {
-                presentationMode.wrappedValue.dismiss()
-            })
-        }
-    }
-}
-
 #Preview {
     ContentView()
 }