How to create fully customizable sections with Binding text? - forms

Question

First of all, sorry for the title which is not precise at all, but I didn't know how else I could title this question. So:
1. What I want to achieve:
I want to create an interface where the user can add sections to input different fields, which are fully customizable by the user himself.
2. What I have done so far
I was able to create the interface, I can add new sections easily (structured with a "Section Name" on top and a TextField below) and they are customizable, but only in the TextField. They are also deletable, even though I had to do a complicated workaround since the Binding text of the TextField caused the app to crash because the index at which I was trying to remove the item resulted as "out of range". It's not the perfect workaround, but it works, and for now this is the most important thing. When I'll save these sections, I'll save them as an array of Dictionaries where every Dictionary has the section name and its value. However, there's still a few things I wasn't able to do:
3. What I haven't done yet
There are still 3 things that I couldn't do yet.
First of all, I'd like for the name of the section to be editable.
Secondly, I'd like to have the sections that the user adds displayed inside a Form and divided by Sections. As header, I'd like to have each different section name, and grouped inside all the related sections that share the same name.
Last but not least, I'd like to allow the user to add multiple TextFields to the same section. I have no idea how to handle this or even if it's possible.
4. Code:
ContentView:
import SwiftUI
struct ContentView: View {
#State var editSections = false
#State var arraySections : [SectionModel] = [SectionModel(name: "Prova", value: ""), SectionModel(name: "Prova 2", value: ""), SectionModel(name: "Prova", value: "")]
#State var showProgressView = false
#State var arraySectionsForDeleting = [SectionModel]()
#State var openSheetAdditionalSections = false
var body: some View {
Form {
if showProgressView == false {
if editSections == false {
ForEach(arraySections, id: \.id) { sect in
Section(header: Text(sect.name)) {
ForEach(arraySections, id: \.id) { sez in
if sez.name == sect.name {
SectionView(section: sez)
}
}
}
}
} else {
forEachViewSectionsForDeleting
}
if arraySections.count > 0 {
buttoneditSections
}
} else {
loadingView
}
Section {
addSections
}
}
.sheet(isPresented: $openSheetAdditionalSections, content: {
AdditionalSectionsSheet(closeSheet: $openSheetAdditionalSections, contView: self)
})
}
var forEachViewSectionsForDeleting : some View {
Section {
ForEach(arraySections, id: \.id) { sez in
HStack {
Text("\(sez.name) - \(sez.value)")
.foregroundColor(.black)
Spacer()
Button(action: {
showProgressView = true
let idx = arraySections.firstIndex(where: { $0.id == sez.id })
arraySectionsForDeleting.remove(at: idx!)
arraySections = []
arraySections = arraySectionsForDeleting
showProgressView = false
}, label: {
Image(systemName: "minus.circle")
.foregroundColor(.yellow)
}).buttonStyle(BorderlessButtonStyle())
}
}
}
}
var buttoneditSections : some View {
Button(action: {
editSections.toggle()
}, label: {
Text(editSections == true ? "Done" : "Edit Sections")
.foregroundColor(.yellow)
})
}
var forEachviewSezioniNonModifica : some View {
Section {
ForEach(arraySections, id: \.id) { sez in
Text(sez.name)
.foregroundColor(.black)
Text(sez.value)
.foregroundColor(.black)
}
}
}
var addSections : some View {
Button(action: {
openSheetAdditionalSections = true
}, label: {
HStack {
Text("Add sections")
.foregroundColor(.yellow)
Spacer()
Image(systemName: "plus.circle")
.foregroundColor(.yellow)
}
})
}
var loadingView : some View {
Section {
HStack {
Spacer()
ProgressView()
.progressViewStyle(CircularProgressViewStyle(tint: .black))
Spacer()
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
AddSectionSheet and SectionView:
import SwiftUI
struct AdditionalSectionsSheet: View {
#Binding var closeSheet : Bool
#Environment(\.colorScheme) var colorScheme
var contView : ContentView
#Environment(\.presentationMode) var mode: Binding<PresentationMode>
#GestureState private var dragOffset = CGSize.zero
var body: some View {
NavigationView {
Form {
buttonPhone
buttonUrl
buttonEmail
buttonAddress
}
.navigationBarTitle(Text("Add section"), displayMode: .inline)
.navigationBarBackButtonHidden(true)
.navigationBarItems(trailing: Button(action : {
closeSheet = false
}){
Text("Close")
.foregroundColor(.yellow)
})
}
}
var buttonPhone : some View {
Button(action: {
contView.editSections = false
contView.arraySections.append(SectionModel(name: "Phone", value: ""))
contView.showProgressView = true
closeSheet = false
}, label: {
HStack {
Text("Phone")
.foregroundColor(.black)
Spacer()
}
})
}
var buttonUrl : some View {
Button(action: {
contView.editSections = false
contView.arraySections.append(SectionModel(name: "URL", value: ""))
closeSheet = false
}, label: {
HStack {
Text("URL")
.foregroundColor(.black)
Spacer()
}
})
}
var buttonAddress : some View {
Button(action: {
contView.editSections = false
contView.arraySections.append(SectionModel(name: "Address", value: ""))
contView.showProgressView = true
closeSheet = false
}, label: {
HStack {
Text("Address")
.foregroundColor(.black)
Spacer()
}
})
}
var buttonEmail : some View {
Button(action: {
contView.editSections = false
contView.arraySections.append(SectionModel(name: "Email", value: ""))
contView.showProgressView = true
closeSheet = false
}, label: {
HStack {
Text("Email")
.foregroundColor(.black)
Spacer()
}
})
}
}
struct SectionView : View {
#Environment(\.colorScheme) var colorScheme
#ObservedObject var section : SectionModel
var body : some View {
Section {
Text(section.name)
.foregroundColor(.black)
TextField(section.name, text: self.$section.value)
.foregroundColor(.black)
}
}
}
SectionModel:
import SwiftUI
import Combine
class SectionModel : Codable, Identifiable, Equatable, ObservableObject, Comparable {
var id = UUID()
var name : String
var value : String
init(name: String, value: String) {
self.name = name
self.value = value
}
static func == (lhs: SectionModel, rhs: SectionModel) -> Bool {
true
}
static func < (lhs: SectionModel, rhs: SectionModel) -> Bool {
true
}
}
I hope I wrote things clear enough to be understood, thanks to everyone who will help!