So the task for the evening is to allow the user to drill down into a selected repository from within the list repo’s page.
To start with a little UI tweak to capture the user clicking the card seems the sensible way to drill down into that clicked repo.
A new component and addition to the router is needed for this. Adding the router is simple as these pages don’t have authentication yet. Hooking up navigation is also a simple 1 line addition.
Angular has some easy to use functions in the router library, you can simply say what page you want to navigate to and also pass the query parameters you need. For now the only parameter we need to pass is the repository name as that’s all that is needed by the service to drill down into a specific repository.
In this new component ill just pop a simple materials table for now with some fixed headers and some simple check we have data logic. I will make this component more dynamic at a later date, for now its more for testing.
Now I have the table I can test that the flow is working correctly. I don’t need to many fields in this higher level view, at the moment I will use pull request id, author and title. This will be easy to add more at a later date. I will also need to style the table at a later date, that’s if I continue to use this type of table.
I did get a little stuck with this not showing any data. I forgot that for each style loops don’t await and the variable was not setting with data when the table rendered. It took me a while to work out why I didn’t have any data but once I realised my mistake a quick change to using some for in style loops worked nicely.
Checkout some of my previous progress If you missed it
- For the full list – https://greenchapel.dev/category/git-project/
- Adding a favourites option
- CodeCommit app – Market research
- Routing the app
- Checking the SDK works
- App Base UI Layout
- Starting of a new app
Categories: ezConsole
greenchapel.dev 
Leave a Reply