I'm building SaaS and documenting the process. Day 10: finished all 4 meta lists for board settings page
This is the tenth episode in the reality show about the development SaaS app from scratch. The previous episodes:
Open SaaS development from scratch: why and what
Day 1: requirements and UI wireframes
Day 2: admin pages
Day 3: user pages
Day 4: database models, database update, and a couple of new wireframe pages
Day 5: started API and made changes to the database models
Day 6: created the admin board and new problems
Day 7: board settings page
Day 8: board settings page, more details and tabs
Day 9: board settings page, more tabs
Yesterday I finished working on all 4 tabs for the board settings page: Categories, Types, Statuses, Tags.
I put all of them into 4 different tables. But then I thought it could be normalized: I could put them into one table with adding an additional column like "entity_tab". I'm not sure if I want to change it now or later. Or, maybe, never :)
It took a little bit longer time than I planned - mostly because I forgot how to pass props to React child component properly. My problem was the props I had to pass was updated asynchronously, therefore, at the moment when subcomponent takes it, it would always be undefined. The fact there could be "bad" and "good" ways to implement it added the mess :)) But finally I found the solution, from this article:
Another problem was UI's functions. As you can see from the screenshot I wanted to provide a user with the opportunity to add, remove, and move up and down all items.
To make it possible I had to reorder indexes of items. And I wanted to send all items at once. The question was how to handle removing items? I created an additional list for removed items that I just iterate on the server-side and remove.
It took most of time and then just 5 minutes to generate the same component for the other 3 tabs.
You can see in action how it works now:
https://www.youtube.com/watch?v=BBrPbEUBcyI&list=PLlevWhQv-UWReBfP8JZpuLCxj-soUs7KI
Sorry for the quality, it's better but still not perfect. I'm working on it :)
Thanks!
Time spent: 4,5 hours
Total time spent so far: 22 hours
This comment was deleted 5 years ago.
Haha, thanks.