Having fun project to build

Sorry I don’t know why the photo posted is rotated 180 deg @appledev team maybe can answer the photo on my phone looks ok ….

Hi Everyone, below is the TimeKeyinRow, I trying to find some way to make it shorter, but this is the start of my project above, I know there are something to do with loop Button but I want to implement some code behind and looping a button will create same iteration which I want to avoid in order to collect the time of different project in the same day to make it 8h and remove option when user spend more than 8h as explain in my drawing ``` import SwiftUI

struct TimeKeyInRow: View {

@Binding var isSet: Bool
var project: Project

var body: some View {
    HStack {
        Text(project.shortname)
        Spacer(minLength:20)
        Button {
            isSet.toggle()
            print(".5h")
        } label: {
            Label("Toggle Favorite", systemImage: isSet ? "circle.fill" : "circle")
                .labelStyle(.iconOnly)
                .foregroundStyle(isSet ? .blue : .blue)
                .padding(10)
                .tag(".5h")
        }
        
        Button {
            isSet.toggle()
            print("1h")
        } label: {
            Label("Toggle Favorite", systemImage: isSet ? "circle.fill" : "circle")
                .labelStyle(.iconOnly)
                .foregroundStyle(isSet ? .blue : .blue)
                .padding(10)
                .tag("1h")
        }
        
        Button {
            isSet.toggle()
            print("2h")
        } label: {
            Label("Toggle Favorite", systemImage: isSet ? "circle.fill" : "circle")
                .labelStyle(.iconOnly)
                .foregroundStyle(isSet ? .blue : .blue)
                .padding(10)
                .tag("2h")
        }
       
        Button {
            isSet.toggle()
            print("3h")
        } label: {
            Label("Toggle Favorite", systemImage: isSet ? "circle.fill" : "circle")
                .labelStyle(.iconOnly)
                .foregroundStyle(isSet ? .blue : .blue)
                .padding(10)
                .tag("3h")
        }
        Button {
            isSet.toggle()
            print("4h")
        } label: {
            Label("Toggle Favorite", systemImage: isSet ? "circle.fill" : "circle")
                .labelStyle(.iconOnly)
                .foregroundStyle(isSet ? .blue : .blue)
                .padding(10)
                .tag("4")
        }
       
        Spacer(minLength: 20)
        Text("\(project.leftPMtime)")
    }
}

}

#Preview { let projects = ModelData().projects return Group { TimeKeyInRow(isSet: .constant(false), project: projects[2]) } }

Here is the photo head up.

As for helping, please explain simply and clearly what you don't know how to achieve. It is not so clear now.

here is my code so far :

//
//  TimeKeyInRow.swift
//  MyPmV1
//
//  Created by Sebastien BENAVIDES on 9/2/24.
//

import SwiftUI

struct TimeKeyInRow: View {
    
    @Binding var isSet: Bool
    var projectshortname: String
    var timeleft: Int
    
    var body: some View {
        HStack {
            Text(projectshortname)
            Spacer(minLength:50)
            Button {
                isSet.toggle()
                print(".5h")
            } label: {
                Label("Toggle .5h", systemImage: isSet ? "circle.fill" : "circle")
                    .labelStyle(.iconOnly)
                    .foregroundStyle(isSet ? .blue : .blue)
                    .padding(4)
                    .tag(".5h")
            }
            
            Button {
                isSet.toggle()
                print("1h")
            } label: {
                Label("Toggle 1h", systemImage: isSet ? "circle.fill" : "circle")
                    .labelStyle(.iconOnly)
                    .foregroundStyle(isSet ? .blue : .blue)
                    .padding(4)
                    .tag("1h")
            }
            
            Button {
                isSet.toggle()
                print("2h")
            } label: {
                Label("Toggle 2h", systemImage: isSet ? "circle.fill" : "circle")
                    .labelStyle(.iconOnly)
                    .foregroundStyle(isSet ? .blue : .blue)
                    .padding(4)
                    .tag("2h")
            }
           
            Button {
                isSet.toggle()
                print("3h")
            } label: {
                Label("Toggle 3h", systemImage: isSet ? "circle.fill" : "circle")
                    .labelStyle(.iconOnly)
                    .foregroundStyle(isSet ? .blue : .blue)
                    .padding(4)
                    .tag("3h")
            }
            Button {
                isSet.toggle()
                print("4h")
            } label: {
                Label("Toggle 4h", systemImage: isSet ? "circle.fill" : "circle")
                    .labelStyle(.iconOnly)
                    .foregroundStyle(isSet ? .blue : .blue)
                    .padding(4)
                    .tag("4")
            }
           
            
            Text("\(timeleft)").padding()
                
        }
    }
}

#Preview {
    let projects = ModelData().projects
    return Group {
        TimeKeyInRow(isSet: .constant(false), projectshortname: projects[2].shortname, timeleft: projects[2].leftPMtime)
    }
}

and this is the row combine swift file

//
//  TimeKeyinList.swift
//  MyPmV1
//
//  Created by Sebastien BENAVIDES on 9/2/24.
//

import SwiftUI

struct TimeKeyinList: View {
    @Environment(ModelData.self) var modelData
    
    @State private var hideTeco = false

    
    var filteredProjects: [Project] {
        // If TECO and favorite are active then I would only see favourite and not TECO projects
        modelData.projects.filter { project in
            !project.isTeco
        }}
    var body: some View {
        VStack {
            HStack {
                Text("TIME KEY_IN")
                    .font(.title)
                    .multilineTextAlignment(.leading)
                .bold()
                Spacer()
                Text("8h")
                    .font(.title)
                    .multilineTextAlignment(.leading)
                .bold()
                
            }.padding()
                
            
            
            
            List {
                
                ForEach (filteredProjects)  { project in
                    
                    TimeKeyInRow(isSet: .constant(true), projectshortname: project.shortname, timeleft: project.leftPMtime)
                        .listStyle(.inset)
                }
                Divider()
                TimeKeyInRow(isSet: .constant(true), projectshortname: "TRAINING", timeleft: 0)
                TimeKeyInRow(isSet: .constant(true), projectshortname: "MEETING", timeleft: 0)
                TimeKeyInRow(isSet: .constant(true), projectshortname: "NON ALLOCATED", timeleft: 0)
                TimeKeyInRow(isSet: .constant(true), projectshortname: "HOLIDAY", timeleft: 0)
                
                
            }
            .listStyle(.inset)
        }
    }
}

#Preview {
    TimeKeyinList()
        .environment(ModelData())
}


result is far here because here my few issues :
I cannot click my button ( point 1) therefore cannot count the time , and the timing is not aligned 

hi @Claude31 , I have created the following 3 files :```

//
//  HourButton.swift
//  MyPmV1
//
//  Created by Sebastien BENAVIDES on 9/2/24.
//

import SwiftUI

struct HourButton: View {
    var isSet: Bool
    var taghour: String
    var body: some View {
        Button {
            
            print(taghour)
               } label: {
                   Label("Toggle \(taghour)", systemImage: isSet ? "circle.fill" : "circle")
                   
                       .labelStyle(.iconOnly)
                       .foregroundStyle(isSet ? .blue : .gray)
                   
               }
        
    }
}

#Preview {
    HourButton(isSet: false, taghour: "1h")
}

this is my second file

//
//  TimeKeyInRow.swift
//  MyPmV1
//
//  Created by Sebastien BENAVIDES on 9/2/24.
//

import SwiftUI

struct TimeKeyInRow: View {
    @Binding var isSet: Bool
    var projectshortname: String
    var timeleft: Int
    
    var body: some View {
        
        HStack {
            Text(projectshortname)
            Spacer(minLength:30)
            HourButton(isSet: isSet, taghour: "0.5h").tag("0.5h")
            HourButton(isSet: isSet, taghour: "1h").tag("1h")
            HourButton(isSet: isSet, taghour: "2h").tag("2h")
            HourButton(isSet: isSet, taghour: "3h").tag("3h")
            HourButton(isSet: isSet, taghour: "4h").tag("4h")
            
            Text("\(timeleft)").padding()
                
        }
    }
}

#Preview {
    let projects = ModelData().projects
return
    TimeKeyInRow(isSet: .constant(true),projectshortname: projects[2].shortname, timeleft: projects[2].leftPMtime)
    
    
}

this is my 3rd file which is crashing

//
//  TimeKeyinList.swift
//  MyPmV1
//
//  Created by Sebastien BENAVIDES on 9/2/24.
//

import SwiftUI

struct TimeKeyinList: View {
    @Environment(ModelData.self) var modelData
    let projects = ModelData().projects
    @Binding var isSet: Bool
    @State private var hideTeco = false

    
    var filteredProjects: [Project] {
        // If TECO and favorite are active then I would only see favourite and not TECO projects
        modelData.projects.filter { project in
            !project.isTeco
        }}
    var body: some View {
        VStack {
            HStack {
                Text("TIME KEY_IN")
                    .font(.title)
                    .multilineTextAlignment(.leading)
                .bold()
                Spacer()
                Text("8h")
                    .font(.title)
                    .multilineTextAlignment(.leading)
                .bold()
                
            }.padding()
                
            
            
            
            List {
                HStack(alignment: .top) {
                    Text("Project Name")
                        .frame(width: 80, height: 25)
                        .font(.caption)
                        .multilineTextAlignment(.center)
                        .lineLimit(8)
                        .allowsTightening(/*@START_MENU_TOKEN@*/true/*@END_MENU_TOKEN@*/)
                        .multilineTextAlignment(.center)
                        .bold()
                    Spacer(minLength:30)
               
                    Text("0.5h")
                        .font(.footnote)
                    
            
                        
                    
                    Text("1h")
                        .font(.footnote)
                        .padding(/*@START_MENU_TOKEN@*/EdgeInsets()/*@END_MENU_TOKEN@*/)
                    
                    Text("2h")
                        .font(.footnote)
                        .padding(/*@START_MENU_TOKEN@*/EdgeInsets()/*@END_MENU_TOKEN@*/)
                    Text("3h")
                        .font(.footnote)
                        .padding(/*@START_MENU_TOKEN@*/EdgeInsets()/*@END_MENU_TOKEN@*/)
                    Text("4h")
                        .font(.footnote)
                        .padding(/*@START_MENU_TOKEN@*/EdgeInsets()/*@END_MENU_TOKEN@*/)
                    
                                
                               
                
                    
                    
                    Text("Time Left")
                        .frame(width: 60, height: 25)
                        .font(.caption)
                        .multilineTextAlignment(.center)
                        .lineLimit(8)
                        .allowsTightening(/*@START_MENU_TOKEN@*/true/*@END_MENU_TOKEN@*/)
                        .multilineTextAlignment(.center)
                        .bold()
                        
                }
                ForEach (filteredProjects)  { project in
                    
                    TimeKeyInRow( isSet: $isSet, projectshortname: project.shortname, timeleft: project.leftPMtime)
                }
                Divider()

                TimeKeyInRow(isSet: $isSet, projectshortname: "TRAINING", timeleft: 0)
                TimeKeyInRow(isSet: $isSet, projectshortname: "MEETING", timeleft: 0)
                TimeKeyInRow(isSet: $isSet, projectshortname: "NON ALLOCATED", timeleft:0)
                TimeKeyInRow(isSet: $isSet, projectshortname: "HOLIDAY", timeleft:0)
                
                
            }
            .listStyle(.inset)
            DatePicker(selection: /*@START_MENU_TOKEN@*/.constant(Date())/*@END_MENU_TOKEN@*/, label: { /*@START_MENU_TOKEN@*/Text("Date")/*@END_MENU_TOKEN@*/ })
            }
        }
    }

#Preview {
    TimeKeyinList( isSet: .constant(false))
}

@Claude31 thanks it's all because of you appreacite your long term support

Hi All issues is because I was not implementing a special ID to each of the button for every single one but to the full row creation. This was due to two specific thing, first one I did not implement UUID or id to each button, but even after implementing this special ID for each button I realised that creating a list was a mistake too {} hope this post can help many new or skilled persons and once again thanks to Claude to help me make it happen @Claude31