Fixed the layout of the tags screen when the number of tags is large.

msimms · Sep 27, 2023 · 71dff84 · 71dff84
1 parent 69c5abc
commit 71dff84
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 57 deletions.
diff --git a/View Models/StoredActivityVM.swift b/View Models/StoredActivityVM.swift
@@ -544,11 +544,17 @@ class StoredActivityVM : ObservableObject, Identifiable, Hashable, Equatable {
 	}
 
 	func createTag(tag: String) -> Bool {
-		return CreateTag(self.activityId, tag)
+		if CreateTag(self.activityId, tag) {
+			return ApiClient.shared.createTag(tag: tag, activityId: self.activityId)
+		}
+		return false
 	}
 
 	func deleteTag(tag: String) -> Bool {
-		return DeleteTag(self.activityId, tag)
+		if DeleteTag(self.activityId, tag) {
+			return ApiClient.shared.deleteTag(tag: tag, activityId: self.activityId)
+		}
+		return false
 	}
 
 	/// @brief Returns any tags that were applied to this activity.
@@ -579,14 +585,18 @@ class StoredActivityVM : ObservableObject, Identifiable, Hashable, Equatable {
 				let gearVM: GearVM = GearVM()
 				let shoes = gearVM.listShoes()
 				for shoe in shoes {
-					names.append(shoe.name)
+					if shoe.timeRetired.timeIntervalSince1970 == 0 {
+						names.append(shoe.name)
+					}
 				}
 			}
 			else {
 				let gearVM: GearVM = GearVM()
 				let bikes = gearVM.listBikes()
 				for bike in bikes {
-					names.append(bike.name)
+					if bike.timeRetired.timeIntervalSince1970 == 0 {
+						names.append(bike.name)
+					}
 				}
 			}
 		}

diff --git a/iPhone App/TagsView.swift b/iPhone App/TagsView.swift
@@ -10,75 +10,104 @@ struct TagsView: View {
 	@Environment(\.presentationMode) var presentation
 	@StateObject var activityVM: StoredActivityVM
 	@State private var newTag: String = ""
+	@State private var tagToDelete: String = ""
 	@State private var showingDeleteConfirmation: Bool = false
 
 	var body: some View {
-		VStack(alignment: .center) {
-			HStack() {
-				ForEach(self.activityVM.listTags(), id: \.self) { item in
-					Button(action: {
+		ScrollView() {
+			GeometryReader { geometry in
+				VStack() {
+					let tags = self.activityVM.listTags()
+					self.generateTagCloud(in: geometry, items: tags, handler: { tag in
+						self.tagToDelete = tag
 						self.showingDeleteConfirmation = true
-					}) {
-						HStack {
-							Text(item)
-							Image(systemName: "trash")
+					})
+					Text("Potential Tags")
+						.bold()
+						.padding()
+					let potentialTags = self.activityVM.listValidGearNames()
+					self.generateTagCloud(in: geometry, items: potentialTags, handler: { tag in
+						if self.activityVM.createTag(tag: tag) {
+							self.presentation.wrappedValue.dismiss()
 						}
+					})
+					Text("New Tag")
+						.bold()
+						.padding()
+					TextField("Tag", text: self.$newTag)
+						.foregroundColor(self.colorScheme == .dark ? .white : .black)
+						.background(self.colorScheme == .dark ? .black : .white)
+						.autocapitalization(.none)
+					Button {
+						if self.activityVM.createTag(tag: self.newTag) {
+							self.presentation.wrappedValue.dismiss()
+						}
+					} label: {
+						Text("Create a New Tag")
 					}
 					.padding()
 					.background(Color.gray)
 					.foregroundColor(.white)
 					.cornerRadius(10)
 					.buttonStyle(PlainButtonStyle())
-					.alert("Are you sure you want to delete this tag?", isPresented: self.$showingDeleteConfirmation) {
-						Button("Delete") {
-							if self.activityVM.deleteTag(tag: item) {
-								self.presentation.wrappedValue.dismiss()
-							}
-						}
-						Button("Cancel") {
+				}
+				.alert("Are you sure you want to delete this tag?", isPresented: self.$showingDeleteConfirmation) {
+					Button("Delete") {
+						if self.activityVM.deleteTag(tag: self.tagToDelete) {
+							self.presentation.wrappedValue.dismiss()
 						}
 					}
-					.foregroundColor(self.colorScheme == .dark ? .white : .black)
-					.help("Delete this activity")
-				}
-			}
-			Text("Potential Tags")
-				.bold()
-				.padding()
-			HStack() {
-				ForEach(self.activityVM.listValidGearNames(), id: \.self) { item in
-					Button {
-						let _ = self.activityVM.createTag(tag: item)
-					} label: {
-						Text(item)
+					Button("Cancel") {
 					}
-					.padding()
-					.background(Color.gray)
-					.foregroundColor(.white)
-					.cornerRadius(10)
-					.buttonStyle(PlainButtonStyle())
 				}
 			}
-			Text("New Tag")
-				.bold()
-				.padding()
-			TextField("Tag", text: self.$newTag)
-				.foregroundColor(self.colorScheme == .dark ? .white : .black)
-				.background(self.colorScheme == .dark ? .black : .white)
-				.autocapitalization(.none)
-			Button {
-				if self.activityVM.createTag(tag: self.newTag) {
-					self.presentation.wrappedValue.dismiss()
-				}
-			} label: {
-				Text("Create a New Tag")
+			.padding(10)
+		}
+	}
+
+	private func generateTagCloud(in g: GeometryProxy, items: Array<String>, handler: @escaping (_: String) -> ()) -> some View {
+		var width = CGFloat.zero
+		var height = CGFloat.zero
+
+		return ZStack(alignment: .topLeading) {
+			ForEach(items, id: \.self) { item in
+				self.generateTag(for: item, handler: handler)
+					.padding([.horizontal, .vertical], 4)
+					.alignmentGuide(.leading, computeValue: { d in
+						if (abs(width - d.width) > g.size.width)
+						{
+							width = 0
+							height -= d.height
+						}
+						let result = width
+						if item == items.last! {
+							width = 0
+						} else {
+							width -= d.width
+						}
+						return result
+					})
+					.alignmentGuide(.top, computeValue: {d in
+						let result = height
+						if item == items.last! {
+							height = 0
+						}
+						return result
+					})
 			}
-			.padding()
-			.background(Color.gray)
-			.foregroundColor(.white)
-			.cornerRadius(10)
-			.buttonStyle(PlainButtonStyle())
 		}
-		.padding(10)
-    }
+	}
+
+	private func generateTag(for text: String, handler: @escaping (_: String) -> ()) -> some View {
+		Button {
+			handler(text)
+		} label: {
+			Text(text)
+		}
+		.padding()
+		.background(Color.gray)
+		.foregroundColor(.white)
+		.cornerRadius(10)
+		.buttonStyle(PlainButtonStyle())
+	}
 }