Conclusion of discussion

[BrianSo]

Account

The account will bind to event (#9). User have to register again for another event. For implementation, it still uses firebase built in auth. No account for the event organizer, but a password is needed for accessing the event admin page.

Flux architecture

Flux architecture (#17) is merged to the project (#40). Now components will uses $dispatch to update changes and receive changes directly from the props and data which are from vuex. More example will be provided later.

Firebase Schema

The user part is merged to member in the event as the account will bind to event. Please refer to #16.

Pages & Routes

There will be following pages in our app:

1. Home Page
2. Event Page
3. Event Admin Page
4. Team Page
5. Team Management Page
6. User Page
7. Login Page

Here are the expected content of each pages:

1. Home Page (/)

purposes

1. Allow user to input/select an event to enter
2. Allow event organizer to create an event

linkage to other page

1. Login Event - go to Login Page of that event
2. Create Event - popup to enter a password and then go to Event Management Page

components

1. EventSearch.vue purpose: Search Bar with suggestion upon user input
2. EventList.vue purpose: Display the most three recent events linkage: go to Event Page

2.Event Page (/event/:eventId)

purposes

1. Show event description
2. Allow user to view teams
3. Allow user to create team
4. Display user status

linkage to other page

1. Team List Click - go to Team Page
2. User Status Click - go to User page
3. Create Team - create a team with the name {creator}'s team and then go to Team Management Page

components

1. EventOverview.vue (also used in Event Admin Page) purpose: Display the data of the event, including name, description, max, min team size; display the statistic of the event, including number of teams, number of members
2. TeamList.vue (also used in Event Admin Page) purpose: Show all teams linkage: go to Team Page innerComponent: RadarChart.vue - display the team's overall skillset
3. TeamFilter.vue purpose: interface to filter teams, update filtering rules to state tree
4. BasicUserStatus.vue purpose: Show basic user status including user name, current team, etc. linkage: go to User Page
5. DeadlineCounter.vue purpose: Show event deadline status

3.Event Admin Page (/event/:eventId/admin)

purposes

1. Manage the event
2. Overview of the event

components

1. EventOverview.vue (also used in Event Page) purpose: Display the data of the event, including name, description, max, min team size; display the statistic of the event, including number of teams, number of members
2. EventModificationForm.vue purpose: Edit the event, including name, description, labels, max, min team size
3. TeamList.vue (also used in Event Page) purpose: Show all teams

4.Team Page (/event/:eventId/team/:teamId/)

purposes

1. View Team Members
2. View Team overall schedule & skillset
3. Request to join the team

linkages to other page

1. Manage - go to Team Manage Page, only visible to the leader
2. User Click - go to User Page to view the user

components

1. TeamOverview.vue purpose: Display team overview including name, description, leader name, number of members, skillset and schedules innerComponent: RaderChart.vue - display the team's overall skillset;
2. Schedule.vue purpose: Show team schedule
3. MemberList.vue purpose: Display all member linkage: go to User Page innerComponent: UserStatus.vue - display the user status
4. JoinRequest.vue purpose: Provide a join request form. Member can input a message.

5.Team Management Page (/event/:eventId/team/:teamId/manage)

purposes

1. Edit descriptions
2. Accept requests
3. Remove member

linkages to other page

1. View Request User - go to User Page

components

1. TeamOverviewEdit.vue purpose: edit team
2. MemberListEdit.vue purpose: remove member
3. RequestList.vue purpose: accept join requests

6.User Page (/event/:eventId/user/:userId/)

purposes

1. See public status
2. See requests status and manage - only visible to current user.

components

1. UserStatus.vue (also used in MemberList.vue) purpose: show public status innerComponent: RadarChart.vue - display the own skillset
2. RadarRating.vue purpose: edit radar rating
3. Schedule.vue purpose: show and edit schedule
4. MyRequests.vue purpose: view/cancel join requests

7.Login Page (/event/:eventId/login)

purposes

1. login to the event
2. signup for the event

linkage to other page

1. User Login - go to Event Page
2. User Signup - go to User Page
3. Admin Login - go to Event Admin Page

components

1. Auth.vue purpose: login and signup linkage: Event Page, Event Admin Page

Current design user manage their data with in User Page. It is not sure whether we will have User Management Page in the future.

[BrianSo]

@narwhlae @Ag47 @clementf2b @ttchiuaa @singspiel @leolo322 I created the corresponding cards Please assign yourself in Trello