GSoC@CHAOSS — Weeks 7&8

These two weeks were filled with pages of Lucidchart and hours on building storybook components. Yes, thats right, I finally got to tackle the UI for Sorting Hat! UI is rarely one of my favorite pieces to tackle when it comes to fullstack but I couldnt wait to get my hands on the Sorting Hat tool.

Week 7

This week was tricky, I had to travel for my visa appointments which were on Tuesday and Thursday and the entire week was spent in a hotel (with bad wifi). I had initially planned to do my mockups on lucidchart but seeing the lack of internet, I rolled up my sleeves and got working on the storybook components in my local env directly.

I had to create a set of views — to view teams in organizations, to add teams to organizations, to have a new section for unaffiliated groups(teams that dont belong to any organizations), to add users to teams, to view the team of a user in an organization and so on.

Here’s a sneak peek at what I have been working on:

The new expanded org view:

Viewing the teams in an org

Here’s the issue for the wireframes — https://github.com/chaoss/grimoirelab-sortinghat/issues/567 if you want to take a look.

Week 8

This week, we finalized on most of the UI wireframes so I could finally get working on the UI. I spent some timelooking at v-treeview, which is a Vue component that allows the UI to have a hierarchical view of data. It would fit really well for my teams information and I played around with it for a while.

With the UI design almost completely finalized, I started coding. I was able to get a teams modal up and running but I realized that I hadnt really included a way in my GraphQL API to fetch the top level teams of an organization. My mentors had suggested I go back to the API layer and work on recursively resolving teams and their subteams and I thought that idea might help me solve my current issue.

I am still in the process of figuring out the next steps on how to get this to work, so I’ll keep y’all posted!

Until then,