Finish up the month/year picker.

This is mostly complete. It would be nice to have a way of remembering what was selected on view disappear and reappar, and then also have a "now" button to go back to the current month.

ydnab/Assets.xcassets/bgActive.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "1.000",
+          "green" : "0.838",
+          "red" : "0.462"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0.575",
+          "green" : "0.329",
+          "red" : "0.000"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ydnab/Assets.xcassets/bgInactive.colorset/Contents.json

@@ -0,0 +1,28 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "platform" : "ios",
+        "reference" : "systemGray6Color"
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "platform" : "ios",
+        "reference" : "systemGray6Color"
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ydnab/BudgetView.swift

@@ -46,6 +46,7 @@ struct BudgetSectionCell: View {
 
 struct YearAndMonthPicker: View {
     @Binding var month: Int
+    @Binding var monthName: String
     @Binding var year: Int
     @State var locale: Locale
 
@@ -55,55 +56,72 @@ struct YearAndMonthPicker: View {
         return c.monthSymbols
     }
 
+    var columns: [GridItem] = [
+        GridItem(spacing: 8),
+        GridItem(spacing: 8),
+        GridItem(spacing: 8)
+    ]
+
     var body: some View {
         VStack {
             HStack {
-                Button(action: { print(self) }) {
+                Button(action: { year -= 1 }) {
                     Image(systemName: "chevron.backward.square")
                         .imageScale(.large)
                 }
                 Spacer()
-                Text("\(year)").bold()
+                Text(String(year)).bold()
                 Spacer()
-                Button(action: {}) {
+                Button(action: { year += 1 }) {
                     Image(systemName: "chevron.forward.square")
                         .imageScale(.large)
                 }
             }
 
-//            GridStack(rows: 4, columns: 3) { row, col in
-//                Button(monthNames[row+col], action: { month = row+col+1 })
-//            }
-
-//            ScrollView(.horizontal) {
-                LazyHGrid(rows: [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())], alignment: .top, spacing: nil, pinnedViews: []) {
-                    ForEach(0..<monthNames.count) { i in
-                        Button(monthNames[i], action: { month = i+1 }).padding(40)
+            GeometryReader { geometry in
+                LazyVGrid(columns: columns, spacing: 4) {
+                    ForEach(monthNames.indices) { i in
+                        Button(action: {
+                                month = i
+                                monthName = monthNames[i]
+                        }, label: {
+                            Text(monthNames[i])
+                                .frame(minWidth: geometry.size.width / 3,
+                                       idealWidth: geometry.size.width / 3,
+                                       maxWidth: geometry.size.width / 3,
+                                       minHeight: geometry.size.height / 4,
+                                       idealHeight: geometry.size.height / 4,
+                                       maxHeight: geometry.size.height / 4,
+                                       alignment: .center)
+                        })
+                        .background(month == i ? Color("bgActive") : Color("bgInactive"))
+                        .foregroundColor(month == i ? Color.white : Color("AccentColor"))
                     }
-//                }
+                }
             }
         }
-        .padding(.bottom, 11)
+        .padding(.bottom, 22)
     }
 }
 
 struct BudgetViewSummary: View {
     @Binding var budget: BudgetInfo
     @Binding var month: Int
+    @Binding var monthName: String
     @Binding var year: Int
 
-    @State private var showMonthPicker: Bool = true
+    @State private var showMonthPicker: Bool = false
 
     var body: some View {
         VStack {
             HStack {
-                Button("\(month)", action: { withAnimation() { showMonthPicker.toggle() } } )
+                Button("\(monthName) \(String(year))", action: { withAnimation() { showMonthPicker.toggle() } } )
                 Spacer()
             }
             .padding(.vertical, 11)
 
             if showMonthPicker {
-                YearAndMonthPicker(month: $month, year: $year, locale: Locale(identifier: budget.localeIdentifier))
+                YearAndMonthPicker(month: $month, monthName: $monthName, year: $year, locale: Locale(identifier: budget.localeIdentifier))
             }
 
             HStack {
@@ -120,10 +138,22 @@ struct BudgetView: View {
     @State var budget: BudgetInfo
     @Binding var currentBudgetId: UUID?
     @State private var month: Int = 0
-    @State private var year: Int = 0
+    @State private var monthName: String
+    @State private var year: Int = Calendar(identifier: .gregorian).component(.year, from: Date())
 
     @AppStorage("lastLoadedBudgetId") private var lastLoadedBudgetId = ""
 
+    init(budget: BudgetInfo, currentBudgetId: Binding<UUID?>) {
+        _budget = .init(initialValue: budget)
+        _currentBudgetId = currentBudgetId
+        var cal = Calendar(identifier: .gregorian)
+        cal.locale = Locale(identifier: self._budget.wrappedValue.localeIdentifier)
+        let now = Date()
+        _month = .init(initialValue: cal.component(.month, from: now))
+        _monthName = .init(initialValue: cal.monthSymbols[self._month.wrappedValue])
+        _year = .init(initialValue: cal.component(.year, from: now))
+    }
+
     func formatAmount(_ amount: NSNumber) -> String? {
         let f = NumberFormatter()
         f.locale = Locale(identifier: budget.localeIdentifier)
@@ -133,7 +163,7 @@ struct BudgetView: View {
 
     var body: some View {
         VStack {
-            BudgetViewSummary(budget: $budget, month: $month, year: $year)
+            BudgetViewSummary(budget: $budget, month: $month, monthName: $monthName, year: $year)
                 .padding([.leading, .trailing], 16)
 
             List {
@@ -210,6 +240,7 @@ struct BudgetView_Previews: PreviewProvider {
                        currentBudgetId: $currentBudgetId)
         }
         .preferredColorScheme(.light)
+
         //.environment(\.layoutDirection, .rightToLeft)
     }
 }

ydnab/BudgetsListView.swift

@@ -71,6 +71,7 @@ struct BudgetsListView: View {
 
             Text(currentBudgetId?.uuidString ?? "--")
         }
+        .listStyle(PlainListStyle())
         .navigationTitle("Budgets")
         .toolbar {
             #if os(iOS)
@@ -88,11 +89,11 @@ struct BudgetsListView: View {
     }
 }
 
-//struct BudgetsListView_Previews: PreviewProvider {
-//    static var previews: some View {
-//        NavigationView {
-//            BudgetsListView()
-//        }
-//    }
-//}
+struct BudgetsListView_Previews: PreviewProvider {
+    static var previews: some View {
+        NavigationView {
+            BudgetsListView(currentBudgetId: UUID())
+        }
+    }
+}