Revize 4bd9d9f6

Re#7528 Menu items are highlighted with correct default, added 404 page

webapp/src/app/app-routing.module.ts

@@ -2 +2 @@
 import { Routes, RouterModule } from '@angular/router';
 import {EmployeesListComponent} from './employees/employees-list.component';
 import {DashboardComponent} from './dashboard/dashboard.component';
+import {PageNotFoundComponent} from './page-not-found/page-not-found.component';
 
 const routes: Routes = [
   { path: 'employees', component: EmployeesListComponent },
   { path: 'dashboard', component: DashboardComponent },
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
+  { path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({

webapp/src/app/app.module.ts

@@ -12 +12 @@
 import { EmployeesModule } from './employees/employees.module';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     MenuComponent,
-    HeaderComponent
+    HeaderComponent,
+    PageNotFoundComponent
   ],
   imports: [
     BrowserModule,

webapp/src/app/menu/menu-item.ts

@@ -1 @@
-export class MenuItem {
-  name: string;
-  routePath: string;
-}

webapp/src/app/menu/menu.component.ts

@@ -1 @@
-import { Component, OnInit } from '@angular/core';
-import { MenuItem } from './menu-item';
-
-const MENU_ITEMS: MenuItem[] = [
-  {name: 'Dashboard', routePath: 'dashboard'},
-  {name: 'Zaměstnanci', routePath: 'employees'},
-];
+import {Component, OnInit} from '@angular/core';
+import {MenuItem} from '../models/menu-item.model';
+import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
+import {MenuService} from '../services/util/menu.service';
 
 @Component({
   selector: 'app-menu',
   templateUrl: './menu.component.html',
-  styleUrls: ['./menu.component.sass']
+  styleUrls: ['./menu.component.sass'],
+  providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}]
 })
 export class MenuComponent implements OnInit {
   _menuItems: MenuItem[];
   private _selectedMenuItem: MenuItem;
 
-  constructor() {
-    this._menuItems = MENU_ITEMS;
+  constructor(private location: Location, private menuService: MenuService) {
   }
 
   ngOnInit() {
+    this.menuService.getMenuItems()
+      .subscribe((data: MenuItem[]) => {
+        this._menuItems = data;
+
+        this._selectedMenuItem = this._menuItems[0];
+        const path = this.location.path().split('/');
+        const endOfPath = path[path.length - 1];
+
+        for (const item of this._menuItems) {
+          if (item.routePath === endOfPath) {
+            this._selectedMenuItem = item;
+          }
+        }
+      });
   }
 
   onSelect(menuItem: MenuItem): void {

webapp/src/app/models/menu-item.model.ts

@@ +1 @@
+export class MenuItem {
+  name: string;
+  routePath: string;
+}

webapp/src/app/page-not-found/page-not-found.component.html

@@ +1 @@
+<div id="notfound">
+  <div class="notfound">
+    <div class="notfound-404">
+      <h1>404</h1>
+    </div>
+    <h2>We are sorry, Page not found!</h2>
+    <p>The page you are looking for might have been removed had its name changed or is temporarily unavailable.</p>
+    <a href="#">Back To Homepage</a>
+  </div>
+</div>
+
+<!-- This templates was made by Colorlib (https://colorlib.com) -->

webapp/src/app/page-not-found/page-not-found.component.sass

@@ +1 @@
+*
+  -webkit-box-sizing: border-box
+    box-sizing: border-box
+
+
+body
+  padding: 0
+  margin: 0
+
+
+#notfound
+  position: relative
+  height: 100vh
+
+
+#notfound .notfound
+  position: absolute
+  left: 50%
+  top: 50%
+  -webkit-transform: translate(-50%, -50%)
+    -ms-transform: translate(-50%, -50%)
+      transform: translate(-50%, -50%)
+
+
+.notfound
+  max-width: 920px
+  width: 100%
+  line-height: 1.4
+  text-align: center
+  padding-left: 15px
+  padding-right: 15px
+
+
+.notfound .notfound-404
+  position: absolute
+  height: 100px
+  top: 0
+  left: 50%
+  -webkit-transform: translateX(-50%)
+    -ms-transform: translateX(-50%)
+      transform: translateX(-50%)
+  z-index: -1
+
+
+.notfound .notfound-404 h1
+  font-family: 'Maven Pro', sans-serif
+  color: #ececec
+  font-weight: 900
+  font-size: 276px
+  margin: 0px
+  position: absolute
+  left: 50%
+  top: 50%
+  -webkit-transform: translate(-50%, -50%)
+    -ms-transform: translate(-50%, -50%)
+      transform: translate(-50%, -50%)
+
+
+.notfound h2
+  font-family: 'Maven Pro', sans-serif
+  font-size: 46px
+  color: #000
+  font-weight: 900
+  text-transform: uppercase
+  margin: 0px
+
+
+.notfound p
+  font-family: 'Maven Pro', sans-serif
+  font-size: 16px
+  color: #000
+  font-weight: 400
+  text-transform: uppercase
+  margin-top: 15px
+
+
+.notfound a
+  font-family: 'Maven Pro', sans-serif
+  font-size: 14px
+  text-decoration: none
+  text-transform: uppercase
+  background: #189cf0
+  display: inline-block
+  padding: 16px 38px
+  border: 2px solid transparent
+  border-radius: 40px
+  color: #fff
+  font-weight: 400
+  -webkit-transition: 0.2s all
+  transition: 0.2s all
+
+
+.notfound a:hover
+  background-color: #fff
+  border-color: #189cf0
+  color: #189cf0
+
+
+@media only screen and (max-width: 480px)
+  .notfound .notfound-404 h1
+    font-size: 162px
+
+  .notfound h2
+    font-size: 26px
+
+

webapp/src/app/page-not-found/page-not-found.component.ts

@@ +1 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-not-found',
+  templateUrl: './page-not-found.component.html',
+  styleUrls: ['./page-not-found.component.sass']
+})
+export class PageNotFoundComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

webapp/src/app/services/api/user.service.ts

@@ -24 +24 @@
    * Returns user profile if the user making this call
    * is logged as admin
    * UserProfile.notification might be returned as string instead of date
-   * @param id employee id
+   * @param id user profile id
    */
   getUserProfile(id: number) {
     return this.makeGetProfileApiCall(id.toString(), null);

webapp/src/app/services/util/menu.service.ts

@@ +1 @@
+import {Injectable} from '@angular/core';
+import {UserService} from '../api/user.service';
+import {UserProfile} from '../../models/user.model';
+import {MenuItem} from '../../models/menu-item.model';
+import {UserType} from '../../enums/common.enum';
+import {Observable, of} from 'rxjs';
+
+const MENU_ITEMS: MenuItem[] = [
+  {name: 'Zaměstnanci', routePath: 'employees'},
+  {name: 'Dashboard', routePath: 'dashboard'},
+];
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MenuService {
+
+  constructor(private userService: UserService) { }
+
+  getMenuItems() {
+    const menuItems: MenuItem[] = [];
+    menuItems.push({name: 'Dashboard', routePath: 'dashboard'});
+
+    return new Observable((observer) => {
+      this.userService.getLoggedUserProfile()
+        .subscribe((profile: UserProfile) => {
+          if (profile.role === UserType.EMPLOYER) {
+            menuItems.push({name: 'Zaměstnanci', routePath: 'employees'});
+          }
+
+          observer.next(menuItems);
+          observer.complete();
+        });
+    });
+  }
+}