Pop back to root in a split navigation

34 views Asked by At

I have this split navigation, with the menu on the left and the detail on the right, but the problem is that when I am inside the AddBuyerView inside the BuyersView and I click again on the buyer icon on the menu, I want it to pop back to root to the BuyersView but now it stays on the AddBuyersView

this is my ContentView with the NaviagtionSplitView

struct Option: Hashable{
    let title: String
    let imageName: String
}

struct ContentView: View {
    @State var currentOption : Option = .init(title: "Home", imageName: "house")
    // all the option in the navigation bar
    let options: [Option] = [
        .init(title: "Home", imageName: "house"),
        .init(title: "Buyers", imageName: "person.2.fill"),
        .init(title: "Sellers", imageName: "house.lodge"),
        .init(title: "Budget", imageName: "line.3.horizontal.decrease.circle"),
        .init(title: "Hot", imageName: "bookmark.circle")
    ]

    var body: some View {
        NavigationSplitView {
            ListView(
                options: options,
                currentSelection: $currentOption
            )
        } detail: {
                switch currentOption{
                case options[1]:
                    BuyersView()
                case options[2]:
                    SellersView()
                case options[3]:
                    BudgetView()
                case options[4]:
                    HotView()
                default:
                    MainView()
                }
        }
    }
}

this is my BuyersView

struct BuyersView: View {
    @StateObject var viewModel = BuyersViewModel()
    @State var path = NavigationPath()
    
    var body: some View {
        ZStack{
            NavigationStack(path: $path) {
                VStack{
                    CategoryView(categories: viewModel.fases, currentSelection: $viewModel.currentFase)
                    HStack{
                        Spacer()
                        NavigationLink("Add buyer", value: 0)
                            .padding()
                    }
                    List(viewModel.buyersCat){ buyer in
                        BuyerCellView(buyer: buyer)
                    }
                }
                .navigationDestination(for: Int.self) { _ in
                    AddBuyerView(path: $path, fases: viewModel.fases, medias: $viewModel.media)
                }.navigationDestination(for: Buyer.self) { buyer in
                    BuyerDetailView(buyer: buyer)
                }
            }.onChange(of: viewModel.currentFase, viewModel.filterFase)
            if (viewModel.isLoading) {
                LoadingView()
            }
        }.task {
            viewModel.getBuyers()
        }.alert(item: $viewModel.alertItem) { alertItem in
            Alert(title: alertItem.title, message: alertItem.message, dismissButton: alertItem.dismissButton)
        }
       
    }
}

and this is my AddBuyerView

struct AddBuyerView: View {
    @Binding var path : NavigationPath
    // the different fases from which to choose from
    let fases: [Category]
    @Binding var medias: [Media]
    
    @State var name: String = ""
    @State var email: String = ""
    @State var country: String = ""
    @State var phone: String = ""
    @State var second_phone: String = ""
    @State var budget: String = ""
    @State var fase: String = "Gesproken"
    @State var media: String = "eigen site"
    @State var timing: String = "1 tot 3 maanden"
    @State var wishes: String = ""
    @State var plans: String = ""
    @State var notitie: String = ""
    @State var hot: Bool = false
    
    
    // different possible timings
    var timings: [String] = [
        "1 tot 3 maanden",
        "3 tot 5 maanden",
        "6 tot 12 maanden",
        "langer dan 12 maanden"
    ]
    
    var body: some View {
        VStack{
            Text("Add a buyer")
                .font(.title)
                .padding()
            ScrollView(.vertical) {
                Form{
                    Section{
                        TextField("Name", text: $name)
                        TextField("Email", text: $email)
                        TextField("Country", text: $country)
                        TextField("Phone - number", text: $phone)
                        TextField("Second Phone - number", text: $second_phone)
                        TextField("Budget", text: $budget)
                        
                        HStack{
                            Picker("media", selection: $media) {
                                ForEach(medias){media in
                                    Text(media.title)
                                }
                            }
                        }
                        HStack{
                            Picker("timing", selection: $timing) {
                                ForEach(timings, id: \.self ){timing in
                                    Text(timing)
                                }
                            }
                        }
                        
                        
                        Picker("Fase", selection: $fase) {
                            ForEach(fases.dropFirst()){fase in
                                Text(fase.title).tag(fase.title)
                            }
                        }
                    }
                    
                    Section("Wishes"){
                        TextEditor(text: $wishes)
                            .frame(height: 80)
                            .cornerRadius(/*@START_MENU_TOKEN@*/3.0/*@END_MENU_TOKEN@*/)
                            .lineSpacing(5)
                        TextField("Plans", text: $plans)
                    }
                    .formStyle(.columns)
                    
                    Section("Notitie"){
                        TextEditor(text: $notitie)
                            .frame(height: 80)
                            .cornerRadius(/*@START_MENU_TOKEN@*/3.0/*@END_MENU_TOKEN@*/)
                            .lineSpacing(5)
                    }
                    .formStyle(.columns)
                    
                    Toggle("Hot", isOn: $hot)
                }
                .padding()
                
                Button("Save buyer") {
                    addBuyer()
                    path = NavigationPath()
                }
                .padding()
                
            }
        }
    }

When I click on the save changes button in the AddBuyerView it does pop back to root.

But as the path is only from the BuyersView, I don't know how to make this work

Thank you in advance for helping me

0

There are 0 answers