baloise / pelan

UI for the coming staff-planing tool by Baloise Insurance

Pelan

Vue.js Application for quick and easy personnel-planning using a duty roster.

General

Made by E.Reutlinger. The development of this UI was part of his final project (IPA, Individuelle Praktische Arbeit) at the near end of his apprenticeship @Baloise.

Check out the IPA-Docs (docs/IPA) to get a detailed documentation about Pelan.

Details

• Made with VueJS
• API Repository here
• Demo-App here

Setup

1. Clone this Repo
2. Execute:

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev
# or use https://cli.vuejs.org
npm install -g @vue/cli
vu ui

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

pelan's Issues

PROD-Deployment

Optimize Page-Speed

The dashboard should be loaded as fast as possible

Month/Time selection

Users should be able to change the Month to be displayed

Plan-Settings (Edit Shifts and Times)

Admins should be able to edit the shifts and times to be available in the Plan.

• Time-Editor
• Shift-Editor

Font slightly wrong

Font of form elements of shift-editor is wrong and needs to be changed

Test for security vulnerabilities

All views should be tested for their security.
The following things should be tested:

• A3: XSS - Stored
• A3: XSS - Reflected
• A3: XSS - Dom-Based
• A7: Fehlerhafte Autorisierung auf Anwendungsebene.
• A8: Cross-Site-Request-Forgery (CSRF).
• A9: Nutzung von Komponenten mit bekannten Schwachstellen.
• A10: Ungeprüfte Um- und Weiterleitungen.

Create Error-Pages

Custom Error-Page for 401 and 404

Show User's shifts on Dashboard

The User should be able to see his today's shifts on the dashboard

Plan-Table appearance

Setup the plan table

• Show Shifts of all Users of the current Month
• Use the shifts colors for displaying
• Show all available Shifts
• Make the displayed Month selectable
• Add option to show/hide weekends

Plan-Data Reactivity

Plan-Data has to be reactive and very dynamic.
See: vuejs.org/v2/guide/reactivity.

• Work with async api requests.
• Dynamically re-render/load data.
• Push changes from Assign-Editor to store to trigger re-render in components.

(Is (kind of) connected to Issues #6 #10 #14 )

Re-enable security checks

Dear code owners and users of pelan,

we noticed that you had difficulties in patching security issues reported by github security check.
In order to avoid further notification spamming, we had to turn of the security checks for this repository.

If you, however, have the desire to keep this software issue free (which I encourage you to do), please go ahead and re-enable security checks by yourself in "GitHub Settings" -> "Options" -> "Data Services" -> "Security alerts".

Cheers & happy coding,
Rudi

Change Language

All Users should be able to change their Language in the Settings View

Vue / Webpack / Vuex

Configure Webpage to optimize page speed

Daytimes buggy

Don't behave like wanted when deleting.
(Removing wrong time from plan)

Application Supporter WANTED

Hi there, want to support this cool application within Baloise Helpdesk?
Add new features, fix old bugs.
Just comment on this issue 🥇

Edit Userdetails

Admins should be able to change Userdetails and their Group in the Settings View

Implement Multi-Team functionalities

Allow users to join different teams and change the current team.

UI Testing

Do the Defined Test-Cases and write down the results

Authentication

Handle Tokens received from the API and build the UI regarding the Users permissions

Set Assignments

Admins should be able to assign users with a time and shift to a specific date

PWA

Configure PWA to use the colors from the Design and Logos too.
Automate Page-Refresh on updates

Show notes of today on Dashboard

Dashboard should display the notes of the day

Create Support Informations

There should be a page showing Support information like e-Mail and Phone

Multilanguage

Configure i18n for later use in Views.
Setup two languages: DE&EN

Design

Configure Vuetify to use the correct Designs (Baloise).
Add Font's and the Drawer regarding the Users permissions

Routing / Views

Setup the vue-router and register all used Views.