Merge pull request #236 from GemeenteUtrecht/feature/fe-nav-bar

ZAC navigation

frontend/zac-ui/apps/zac-ui/src/app/app-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { HomeComponent } from './home/home.component';
+import { HomeComponent } from './components/home/home.component';
+import { ZaakDetailModule } from './components/zaak-detail/zaak-detail.module';
 
 const routes: Routes = [
   {
@@ -10,17 +11,17 @@ const routes: Routes = [
   },
   {
     path: 'kownsl',
-    loadChildren: () => import('./kownsl/kownsl.module')
+    loadChildren: () => import('./components/kownsl/kownsl.module')
       .then(m => m.KownslModule)
   },
   {
-    path: 'zaken/:bronorganisatie/:identificatie',
-    loadChildren: () => import('./zaak-detail/zaak-detail.module')
+    path: 'zaken',
+    loadChildren: () => import('./components/zaak-detail/zaak-detail.module')
       .then(m => m.ZaakDetailModule)
   },
   {
     path: 'zoeken',
-    loadChildren: () => import('./search/search.module')
+    loadChildren: () => import('./components/search/search.module')
       .then(m => m.SearchModule)
   },
 ];

frontend/zac-ui/apps/zac-ui/src/app/app.component.html

@@ -1,3 +1,13 @@
 <!--<gu-home></gu-home>-->
-<router-outlet></router-outlet>
+<div class="gu-dashboard">
+  <gu-sidenav [menuItems]="menuItems"
+              [bottomMenuItems]="bottomMenuItems"
+              [selectedParentMenu]="selectedMenu"
+              [logoUrl]="logoUrl"
+              [mobileLogoUrl]="mobileLogoUrl"
+              [currentUser]="currentUser"></gu-sidenav>
+  <div class="main-content-outer-wrapper">
+    <router-outlet></router-outlet>
+  </div>
+</div>
 

frontend/zac-ui/apps/zac-ui/src/app/app.component.scss

@@ -0,0 +1,27 @@
+@import 'base/grid/mixins';
+
+.gu-dashboard {
+  height: 100vh;
+  flex-direction: row;
+  background-color: white;
+  display: flex;
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+
+  }
+  gu-sidenav {
+    display: block;
+    position: static;
+    z-index: 1;
+    align-self: stretch;
+    @include media-breakpoint-down(md) {
+      position: sticky;
+      top: 0;
+    }
+  }
+  .main-content-outer-wrapper {
+    width: 100%;
+    z-index: 0;
+    overflow: auto;
+  }
+}

frontend/zac-ui/apps/zac-ui/src/app/app.component.ts

@@ -1,10 +1,49 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { menuItems, bottomMenuItems, MenuItem } from './constants/menu';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { filter, first, share } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { User } from '@gu/models';
+import { ApplicationHttpClient } from '@gu/services';
 
 @Component({
   selector: 'zac-ui-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'zac-ui';
+  logoUrl = 'assets/gemeente-utrecht-logo.svg';
+  mobileLogoUrl = 'assets/schild.png';
+  currentUser: string;
+
+  menuItems: MenuItem[] = menuItems;
+  bottomMenuItems: MenuItem[] = bottomMenuItems;
+  selectedMenu: string;
+
+  constructor(
+    private router: Router,
+    private http: ApplicationHttpClient
+  ) {
+  }
+
+  ngOnInit() {
+    this.router.events
+      .pipe(filter((event) => event instanceof NavigationEnd))
+      .subscribe((event: NavigationEnd) => {
+        const parentRoute = event.url.split('/')[1].split('?')[0]
+        this.selectedMenu = `${parentRoute}`;
+        window.scrollTo(0, 0);
+      });
+    this.getCurrentUser()
+      .pipe(first())
+      .subscribe(res => {
+        this.currentUser = `${res.firstName} ${res.lastName}`;
+      });
+  }
+
+  getCurrentUser(): Observable<User> {
+    const endpoint = encodeURI("/api/accounts/users/me");
+    return this.http.Get<User>(endpoint);
+  }
 }

frontend/zac-ui/apps/zac-ui/src/app/app.module.ts

@@ -10,10 +10,10 @@ import localeNL from '@angular/common/locales/nl';
 import { SharedUiComponentsModule } from '@gu/components';
 
 import { AppComponent } from './app.component';
-import { HomeComponent } from './home/home.component';
+import { HomeComponent } from './components/home/home.component';
 
-import { KownslModule } from './kownsl/kownsl.module';
-import { ZaakDetailModule } from './zaak-detail/zaak-detail.module';
+import { KownslModule } from './components/kownsl/kownsl.module';
+import { ZaakDetailModule } from './components/zaak-detail/zaak-detail.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 registerLocaleData(localeNL);

frontend/zac-ui/apps/zac-ui/src/app/components/home/home.component.html

@@ -0,0 +1,8 @@
+<div class="feature-container">
+  <div class="content-background">
+    <div class="content content--wide">
+      <h1>Overzicht</h1>
+    </div>
+  </div>
+</div>
+<!--<router-outlet></router-outlet>-->

frontend/zac-ui/apps/zac-ui/src/app/components/kownsl/kownsl.component.html

@@ -0,0 +1,2 @@
+<router-outlet></router-outlet>
+

frontend/zac-ui/apps/zac-ui/src/app/components/search/search.component.html

@@ -0,0 +1 @@
+<gu-features-search></gu-features-search>

frontend/zac-ui/apps/zac-ui/src/app/zaak-detail/zaak-detail-routing.module.ts → frontend/zac-ui/apps/zac-ui/src/app/components/zaak-detail/zaak-detail-routing.module.ts

@@ -5,6 +5,10 @@ import { ZaakDetailComponent } from './zaak-detail.component';
 const routes: Routes = [
   {
     path: '',
+    component: ZaakDetailComponent
+  },
+  {
+    path: ':bronorganisatie/:identificatie',
     component: ZaakDetailComponent,
   },
 ];

frontend/zac-ui/apps/zac-ui/src/app/components/zaak-detail/zaak-detail.component.html

@@ -0,0 +1,6 @@
+<!--<div class="layout">
+  <div class="container container&#45;&#45;max">
+    <gu-features-zaak-detail></gu-features-zaak-detail>
+  </div>
+</div>-->
+<gu-features-zaak-detail *ngIf="bronorganisatie && identificatie"></gu-features-zaak-detail>

frontend/zac-ui/apps/zac-ui/src/app/components/zaak-detail/zaak-detail.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'gu-zaak-detail',
+  templateUrl: './zaak-detail.component.html',
+  styleUrls: ['./zaak-detail.component.scss']
+})
+export class ZaakDetailComponent implements OnInit {
+  bronorganisatie: string;
+  identificatie: string;
+
+  constructor( private route: ActivatedRoute ) {}
+
+  ngOnInit(): void {
+    this.route.params.subscribe(params => {
+      this.bronorganisatie = params['bronorganisatie'];
+      this.identificatie = params['identificatie'];
+    });
+  }
+
+}

frontend/zac-ui/apps/zac-ui/src/app/constants/menu.ts

@@ -0,0 +1,44 @@
+import { MenuItem } from '@gu/models';
+
+const menuItems: MenuItem[] = [
+  {
+    icon: 'search',
+    label: 'Zoeken',
+    to: '/zoeken',
+    marginBottom: true,
+  },
+  {
+    icon: 'article',
+    label: 'Werkvoorraad',
+    to: '/kownsl',
+  },
+  {
+    icon: 'list',
+    label: 'Alle zaken',
+    to: '/zaken/002220647/ZAAK-2020-0000004839',
+  },
+];
+
+const bottomMenuItems: MenuItem[] = [
+  {
+    icon: 'login',
+    label: 'Inloggen',
+    to: '/accounts/login/?next=/ui/',
+    external: true
+  },
+  {
+    icon: 'admin_panel_settings',
+    label: 'Autorisatieprofielen',
+    to: '/accounts/auth-profiles/',
+    external: true,
+    // roles: [UserRole.Admin],
+  },
+  {
+    icon: 'admin',
+    label: 'Admin',
+    to: '/admin',
+    external: true
+    // roles: [UserRole.Admin],
+  },
+];
+export { MenuItem, menuItems, bottomMenuItems };

frontend/zac-ui/apps/zac-ui/src/index.html

@@ -6,7 +6,7 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="icon" type="image/x-icon" href="assets/schild.png" />
   </head>
   <body>
     <zac-ui-root></zac-ui-root>

frontend/zac-ui/libs/features/search/src/lib/search-form/search-form.component.html

@@ -1,5 +1,5 @@
 <gu-loading-indicator *ngIf="isLoading" overlayGrey></gu-loading-indicator>
-<h2 class="mb-4">Zoeken via zaakgegevens</h2>
+<h1 class="mb-5">Zoeken via zaakgegevens</h1>
 <form class="search-form" [formGroup]="searchForm">
   <div class="form-group">
     <div class="col-lg-4">

frontend/zac-ui/libs/shared/data-access/models/index.ts

@@ -2,6 +2,7 @@
 export * from './ui/table';
 export * from './ui/file-upload';
 export * from './ui/modal';
+export * from './ui/menu';
 
 // Accounts
 export * from './accounts/user';

frontend/zac-ui/libs/shared/data-access/models/ui/menu.ts

@@ -0,0 +1,9 @@
+export interface MenuItem {
+  id?: string;
+  icon?: string;
+  label: string;
+  to: string;
+  external?: boolean;
+  subs?: MenuItem[];
+  marginBottom?: boolean;
+}

frontend/zac-ui/libs/shared/ui/components/src/lib/components/sidenav/sidenav.component.html

@@ -0,0 +1,71 @@
+<div class="gu-sidenav">
+  <div class="backdrop"
+       [ngClass]="{
+         'expanded': expanded === true
+         }"
+       (click)="expanded = !expanded"
+  ></div>
+  <header class="navigation-header d-lg-none">
+    <div class="navbar-left">
+      <button class="hamburger" aria-label="Menuknop" (click)="expanded = !expanded">
+        <gu-icon>menu</gu-icon>
+      </button>
+    </div>
+    <div class="navbar-logo">
+      <span class="logo" [ngStyle]="{'background-image': 'url(' + mobileLogoUrl + ')'}"></span>
+    </div>
+    <div class="navbar-right">
+      <p class="p--nomargin d-none d-sm-block">{{currentUser}}</p>
+    </div>
+  </header>
+  <nav class="vertical-nav"
+       [ngClass]="{
+         'expanded': expanded === true
+         }">
+    <a class="mobile-menu-back menu-item menu-link d-lg-none" aria-label="Menuknop" (click)="expanded = !expanded">
+      <gu-icon fontSize="50">arrow_back</gu-icon>
+      Ga terug
+    </a>
+    <div class="logo">
+      <img [src]="logoUrl"/>
+    </div>
+    <div class="menu-container" *ngIf="menuItems">
+      <a *ngFor="let item of menuItems"
+         (click)="toggle()"
+         [routerLink]="!item.external ? [item.to] : null"
+         [href]="item.external ? item.to : null"
+         class="menu-item menu-link"
+         [ngClass]="{
+         'selected': selectedParentMenu === subtractParentRoute(item.to),
+         'mb-3': item.marginBottom === true
+         }">
+        <gu-icon>{{item.icon}}</gu-icon>{{item.label}}</a>
+      <div class="bottom-navigation">
+        <ng-container *ngFor="let bottomItem of bottomMenuItems">
+          <a *ngIf="bottomItem.external"
+             (click)="toggle()"
+             href="{{bottomItem.to}}"
+             class="menu-item menu-link"
+             [ngClass]="{
+             'selected': selectedParentMenu === subtractParentRoute(bottomItem.to),
+             'mb-3': bottomItem.marginBottom === true
+             }"
+          >
+            <gu-icon>{{bottomItem.icon}}</gu-icon>{{bottomItem.label}}
+          </a>
+          <a *ngIf="!bottomItem.external"
+             (click)="toggle()"
+             [routerLink]="!bottomItem.external ? [bottomItem.to] : null"
+             class="menu-item menu-link"
+             [ngClass]="{
+             'selected': selectedParentMenu === subtractParentRoute(bottomItem.to),
+             'mb-3': bottomItem.marginBottom === true
+             }"
+          >
+            <gu-icon>{{bottomItem.icon}}</gu-icon>{{bottomItem.label}}
+          </a>
+        </ng-container>
+      </div>
+    </div>
+  </nav>
+</div>