Team Pages

[peppy]

The design of the Team Pages is almost identical to Profile Pages. The top section is split into 3 columns: Basic Info, Team Performance, and Team Achievements.

Administrators should be able to change basic infos such as Cover, Banner and Basic Info on the fly.

The lower sections are similar to Profiles pages; additional details about the team. There should be a “Me!” like section titled “About Us” where admin have access to.

The 3 graphic banners in the 3rd column is will display unlocked special Team Achievements.

Team Members page will show all the admin and members of the team.

As admin, a remove button should appear when hovered on an avatar. To add more members, just simply click the plus button and the following dialog box will appear.

The content will scroll within the box if there’s more than 3 users.

Promoting/demoting members can be done by simply dragging the user’s avatar.

Should there be new features in the future, additional button should appear at the bottom. The buttons in the examples are just an example on how it will look like.

This bounty will start with implementation of the "team members" page, as it is the easiest place to start. You are welcome to design and implement the other sections as we go, with or without back-end connections depending on how confident you are with creating a database schema for it.

This time around, we'll be providing technical information required for implementation as we go, rather than fleshing this out in the initial post itself. Please show interest and we will work through it in this issue or in #osu-web on slack

Bounty offered: 500 upwards, depending on implementation quality.

[aleen42]

Would you mind join me to complete this page?

[peppy]

not sure who you're talking to!

[aleen42]

@peppy sorry, and I want to join the development of this page

[5aji]

@peppy: I'll take a stab at it.

[peppy]

keep us updated with your progress :)

[5aji]

Not sure if it warrants a new controller or if it should extend CommunityController. I am going for the latter option, but if it is preferred otherwise let me know and I can change them EDIT: Yeah looking at CommunityController and now I understand.

[peppy]

It should DEFINITELY have its own controller.

[5aji]

I ninja'd but forgot to post my edit, makes a lot of sense now.

[5aji]

So I'm sketching out the tables, and I don't know how you would like it to be implemented. Here are some options:

1. Have table 'teams' containing a team id, name, rank, page data, etc. Have separate table 'team_members' listing a user id and a team id, along with if the user is an admin of the team. Limitations: must search through all team members to find members of a certain team. Can only be member of one team.
2. Extend table 'teams' from above to contain arrays of members. Solves problems of having to filter through all team members, but now is a limited array with finite length. Also would simplify editing of user permissions.
3. Something else entirely that I haven't thought of yet. If you have any suggestions, let me know.

Also, when working on the actual team page, looking at the profile page for a template I saw on line 25 of profile-page/headers.coffee coverUrl: props.user.cover.url. Where does this come from? I ran a project-wide search and could not find anything like it. It isn't a property of either User or UserProfileCustomization. Where is this property defined?

[LiquidPL]

coverUrl: props.user.cover.url

Check UserTransformer.php and the template for the profile page.

The user data is serialized into JSON by the transformer and inserted into a script in the template, so the coffeescript rendering the profile page can access it.

[5aji]

Alright, sorry for the lack of response, been quite busy with school and finals coming up. An update:

I extended the User model to create a team_id column. Although this fixes the the previous problems, I don't know if I want to add a 'team_is_admin' column because it could potentially be exploited. I probably will do so for now just to avoid having conflicting standards.

My main question is, should I create a new table for team stats, or should a compilation be made on demand? I don't know how much load we can have on the server, so a separate table would allow for limited updates of the scores but would result in lagging updates. I also don't know how the backend updates, so maybe it could be attached to the user, and if the user has a team, update the stats for that team only. I wouldn't know how to implement that right now, but if that's what's preferred then I will take a closer look.

[5aji]

Finished the main UI, now just some backend cleanup and it should be good. Still unsure how the backend should be implemented. Right now editing works but doesn't save because I need to add that. I am open to any suggestions on how the model should be implemented to make things up to spec.

Also, how is avatar data stored? Is the feature implemented in the database, and if so, how can I set it? (even just modifying the tables is fine). It's a pain to have to keep track of these things as they move around to make sure data is sticking.

[peppy]

best to push and link what you have done so far, so we can check over it. it sounds like you aren't using react, which is something you ill need to use.

[5aji]

Oh, I'm using react. JQuery ui for the sortable drag and drop (saw it used in the profile page). EDIT: See #528

[5aji]

How would I go about searching for a user(s)? I assume you don't want the list of users to show up until after a search query is entered.

[5aji]

It seems I am running out of time here. Probably not a good idea to start a month before finals :P. I don't know if I can keep working on things more now that I'm done with school (pushing 50 day limit right now), but if anyone else wants to finish it up, let me know and I will pass things off.

[peppy]

@kschamplin19 this is the correct place to discuss the teams page. i'll get you an updated psd later today (cc @arflyte).

also you should jump on discord.

[Nugamus420]

@peppy Can we please have a limit of members in a team so we don't have 2 big teams where everyone joins