Useful description for the job

Intro

AEGEE is one of the largest multidisciplinary student/youth organisations in Europe. It counts around 13000 members across cities of Europe and beyond. Its main purpose is to connect these young people and empower them mainly on two topics:

• To take active participation to important matters e.g. politics (through organising conferences and forums for discussion)
• To understand cultural differences and strengthen the European concept of "united through diversity" (through intercultural exchanges, called "summer universities")

As a result, AEGEE organises various types of events that members can apply to. The types of event are listed here briefly but are beyond the scope of this document:

• Network meeting (NWM)
• Summer university (SU)
• New year events (NYE)

These events are managed by the "oms-events" microservice, which API can be found here: https://omsevents.docs.apiary.io/

The structure of AEGEE

AEGEE is an umbrella organisation and it is composed by its member organisations ("Antennas" operating on the "local level") active in cities of Europe, e.g. AEGEE-Lviv (Ukraine). These member organisations are run by a board (elected yearly), who take care of the recruitment of "common members". As managers of the local organisation, or antenna, board members have more privileges over the members. These include the possibility of assigning or removing a membership to a member, i.e. to 'acknowledge' that a member has paid the membership fee to the antenna and therefore is a member of the local.

On the international side ("European level"), AEGEE is made by European bodies called "Comite directeur" (the international board), commissions, committees, and working groups. The definition of the permissions of which body over which other body is beyond the scope of this project.

The memberships are managed by the 'oms-core-elixir' microservice, which API can be found here: https://omscoreelixir.docs.apiary.io

Job description/purpose

The purpose of this job is to create a web front-end using Vue that is able to consume the API mentioned above. As the project is simply an API-consumer, it was thought to use the following framework (or a similar one): https://github.com/vue-bulma/vue-admin. Similar one could be used if a similar, Vue, easy-to-use (for the sake of maintainability from AEGEE's side) can be found. For now this is proposed because of the example page (see below) and how it fits with the intended end result.

The mock-ups for the front-end can be found here (balsamiq mockups) .

Notice that the end result - at least for the dashboard - would like to be something of these lines: https://admin.vuebulma.com/#/.

Pages information

Generic info

Running the frontend

The frontend should run as a docker container such that it can be integrated into our environment. A base boilerplate can be found here: https://github.com/AEGEE/oms-frontend-vue. It is not mandatory to use that boilerplate, only to package the application with Docker.

Mock-ups importance

Notice that the mockup is mainly indicative: If a menubar is not centered, is probably because I screwed something, please always double-check with me. As I have little visual taste, please let me know if you would like to propose an improvement on the layout.

Tooltips

Every page should always have the possibility to show a tooltip, which contains a message coming from a message queue (currently, this queue is not implemented. Just find some open API that send message at some random interval, e.g. a tweet from a "good morning"/"inspirational quote" bot)

Colours and visual identity

Please see this issue that contains some files made for the purpose of using the colour palette of AEGEE-Europe: https://oms-project.atlassian.net/browse/CORE-30. FYI if needed, here's the colour palette: (To be attached as file)

Permissions for the pages

Everything (also pages "outside" the web app, i.e. the portal and the discounts) should be behind login (use SSO). 

The front end should know when to visualise a page and when the user does not have permission to perform an action.

Permissions are described here: https://oms-project.atlassian.net/wiki/spaces/OMSCORE/pages/178716673/Permission+system

Menus

The entries of the side menu, as well as the entries of the lower menu, should be scriptable through a yml/json file that describes entry-URL-icon-category (for CSS purpose)

Page-specific information

Portal

The portal should just be what is already existing, see live example of the portal at aegee.i3anaan.nl (find source code at https://github.com/AEGEE/AEGEEPortal). We just want it re-written in Vue, with an extra: the entries of the portal should be scriptable through a yml/json file that describes entry-URL-icon-category (for CSS purpose).

Discounts

The discounts page should just be what is already existing, see live example of the portal at aegee.org/discounts (find source code at https://github.com/AEGEE/oms-static/tree/master/src/public/static). We just want it re-written in Vue, with an extra: the entries of the portal should be scriptable through a yml/json file that describes entry-URL-icon-category (for CSS purpose).

Dashboard

The entries of the dashboard are as per the mockup: the information that must be displayed at-a-glance are a user's next events as well as next available events. Additional information shall be displayed below such as RSS from the website (right box), or a box with currently unclear content lol (the middle one). Possibly just make it visualise the weather forecast of the next event using open weather API, until a better use can be found. The left box is only visualised if the logged-in user is a board member (see permissions), and it shows a list of members that are awaiting approval to become member of the antenna (e.g. if a board member of AEGEE-Lviv logs in, they will see a list of people who applied to become member of AEGEE-Lviv).

Note on the dashboard and the mock-ups:

Notice that the mockup is mainly indicative and that the generic idea is that more 'boxes' could be added. As I have little visual taste, please let me know if you would like to propose an improvement. Possibly, if dashboard can be scriptable like the AEGEE portal (yml -> vue), it would be a good solution. In any case, the end result should be a dashboard similar to https://admin.vuebulma.com/ as per above.

Bodies

To see the live page, go to http://oms.aegee.org/bodies (ask me the login). The end-result will be just a nice improvement on this page.

The idea behind this page is to list all possible bodies of AEGEE (a body is either an antenna or an European body such as a commission). Once a particular body is clicked, the user can see a description of this body, its logo, as well as who is member of this body. The member can also request to join the body if the body allows it (how? As per the api, it seems that anyone joins whatever they want)

Events

To see the live page, go to (missing!). Existing angular.js code can be found here: https://github.com/AEGEE/oms-events-frontend

The events page will visualise a timeline of what events will be available in the next 2 months. They can be filtered to events which application period is still open, or events to which I have applied.