Added more data to mock-api and multiple sub-pages

apps/dafa-web/src/app/app-routing.module.ts

@@ -7,6 +7,11 @@ const routes: Routes = [
     data: { title: '' },
     loadChildren: () => import('./pages/start/start.module').then(m => m.StartModule),
   },
+  {
+    path: 'administration',
+    data: { title: 'Administration' },
+    loadChildren: () => import('./pages/administration/administration.module').then(m => m.AdministrationModule),
+  },
   {
     path: 'mina-deltagare',
     data: { title: 'Mina deltagare' },

apps/dafa-web/src/app/app.component.html

@@ -7,6 +7,10 @@
 
   <dafa-sidebar class="dafa__sidebar"></dafa-sidebar>
   <main id="dafa-main-content" class="dafa__content">
+    <digi-ng-navigation-breadcrumbs
+      class="dafa__breadcrumbs"
+      [afItems]="breadcrumbsItems"
+    ></digi-ng-navigation-breadcrumbs>
     <router-outlet></router-outlet>
   </main>
 </div>

apps/dafa-web/src/app/app.component.scss

@@ -32,4 +32,9 @@
     padding: var(--digi--layout--gutter) $digi--layout--gutter--l $digi--layout--gutter--xxl;
     overflow-y: auto;
   }
+
+  &__breadcrumbs {
+    display: block;
+    margin-bottom: var(--digi--layout--gutter);
+  }
 }

apps/dafa-web/src/app/app.component.ts

@@ -1,6 +1,8 @@
+import { NavigationBreadcrumbsItem } from '@af/digi-ng/_navigation/navigation-breadcrumbs';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { User } from '@dafa-models/user.model';
+import { BehaviorSubject } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { UnsubscribeDirective } from './directives/unsubscribe.directive';
 
@@ -13,22 +15,43 @@ import { UnsubscribeDirective } from './directives/unsubscribe.directive';
 export class AppComponent extends UnsubscribeDirective {
   path = '';
   user: User = {
-    id: 'Fake user',
+    id: 'fake-user',
+    name: 'Fake user',
   };
 
+  private startBreadcrumb: NavigationBreadcrumbsItem = {
+    text: 'Start',
+    routerLink: '/',
+  };
+
+  private _breadcrumbsItems$ = new BehaviorSubject<NavigationBreadcrumbsItem[]>([this.startBreadcrumb]);
+
+  get breadcrumbsItems(): NavigationBreadcrumbsItem[] {
+    return this._breadcrumbsItems$.getValue();
+  }
+
   constructor(private router: Router) {
     super();
     super.unsubscribeOnDestroy(
       this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
-        const url = this.router.url;
+        const paths = this.router.url.split('/');
-        this.path = url.split('/')[1].split('?')[0] || '';
+
+        this._breadcrumbsItems$.next([
+          this.startBreadcrumb,
+          ...[...paths]
+            .filter(path => !!path)
+            .map(path => ({
+              text: `${path.charAt(0).toUpperCase()}${path.slice(1)}`,
+              routerLink: paths.slice(0, paths.length - 1).join('/'),
+            })),
+        ]);
+
+        this.path = paths[1].split('?')[0] || '';
       })
     );
   }
 
   get appClass(): string {
-    let defaultClass = `dafa dafa--${this.path.length ? this.path : 'home'}`;
+    return `dafa dafa--${this.path.length ? this.path : 'home'}`;
-
-    return defaultClass;
   }
 }

apps/dafa-web/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
+import { DigiNgNavigationBreadcrumbsModule } from '@af/digi-ng/_navigation/navigation-breadcrumbs';
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -17,7 +17,7 @@ import { SkipToContentModule } from './components/skip-to-content/skip-to-conten
     SkipToContentModule,
     NavigationModule,
     SidebarModule,
-    DigiNgTypographyBaseModule,
+    DigiNgNavigationBreadcrumbsModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

apps/dafa-web/src/app/components/navigation/navigation.component.html

@@ -19,7 +19,7 @@
     <li class="navigation__item" *ngIf="user">
       <div class="navigation__no-link">
         <dafa-icon [icon]="iconType.USER" size="l"></dafa-icon>
-        <span class="navigation__text">{{ user.id }}</span>
+        <span class="navigation__text">{{ user.name }}</span>
       </div>
     </li>
   </ul>

apps/dafa-web/src/app/components/sidebar/sidebar.component.html

@@ -12,56 +12,37 @@
       </a>
     </li>
     <li class="sidebar__item">
-      <a
+      <a [routerLink]="['/administration']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
-        [routerLink]="['/mina-deltagare']"
+        <dafa-icon class="sidebar__icon" [icon]="iconType.EDIT"></dafa-icon>
-        [routerLinkActive]="['sidebar__link--active']"
+        Administration
-        [routerLinkActiveOptions]="{ exact: true }"
+      </a>
-        class="sidebar__link"
+    </li>
-      >
+    <li class="sidebar__item">
+      <a [routerLink]="['/mina-deltagare']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
         <dafa-icon class="sidebar__icon" [icon]="iconType.USERS"></dafa-icon>
         Mina deltagare
       </a>
     </li>
     <li class="sidebar__item">
-      <a
+      <a [routerLink]="['/avrop']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
-        [routerLink]="['/avrop']"
-        [routerLinkActive]="['sidebar__link--active']"
-        [routerLinkActiveOptions]="{ exact: true }"
-        class="sidebar__link"
-      >
         <dafa-icon class="sidebar__icon" [icon]="iconType.CALENDAR"></dafa-icon>
         Avrop
       </a>
     </li>
     <li class="sidebar__item">
-      <a
+      <a [routerLink]="['/meddelanden']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
-        [routerLink]="['/meddelanden']"
-        [routerLinkActive]="['sidebar__link--active']"
-        [routerLinkActiveOptions]="{ exact: true }"
-        class="sidebar__link"
-      >
         <dafa-icon class="sidebar__icon" [icon]="iconType.ENVELOPE"></dafa-icon>
         Meddelanden
       </a>
     </li>
     <li class="sidebar__item">
-      <a
+      <a [routerLink]="['/statistik']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
-        [routerLink]="['/statistik']"
-        [routerLinkActive]="['sidebar__link--active']"
-        [routerLinkActiveOptions]="{ exact: true }"
-        class="sidebar__link"
-      >
         <dafa-icon class="sidebar__icon" [icon]="iconType.SOK_KANDIDAT"></dafa-icon>
         Statistik
       </a>
     </li>
     <li class="sidebar__item">
-      <a
+      <a [routerLink]="['/installningar']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
-        [routerLink]="['/installningar']"
-        [routerLinkActive]="['sidebar__link--active']"
-        [routerLinkActiveOptions]="{ exact: true }"
-        class="sidebar__link"
-      >
         <dafa-icon class="sidebar__icon" [icon]="iconType.SETTINGS"></dafa-icon>
         Inställningar
       </a>

apps/dafa-web/src/app/data/enums/icon-type.enum.ts

@@ -7,4 +7,5 @@ export enum IconType {
   CALENDAR = 'calendar',
   ENVELOPE = 'envelope',
   SOK_KANDIDAT = 'sok-kandidat',
+  EDIT = 'edit',
 }

apps/dafa-web/src/app/data/models/staff.model.ts

@@ -0,0 +1,16 @@
+import { ParticipantStatus } from '@dafa-enums/participant-status.enum';
+import { Service } from '@dafa-enums/service.enum';
+
+export interface Participant {
+  id: number;
+  firstName: string;
+  lastName: string;
+  status: ParticipantStatus;
+  nextStep: string;
+  service: Service;
+  errandNumber: number;
+  startDate: Date;
+  endDate: Date;
+  handleBefore: Date;
+  fullName?: string;
+}

apps/dafa-web/src/app/data/models/user.model.ts

@@ -1,3 +1,4 @@
 export interface User {
   id: string;
+  name: string;
 }

apps/dafa-web/src/app/pages/administration/administration-routing.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AdministrationComponent } from './administration.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AdministrationComponent,
+    redirectTo: 'personal',
+    pathMatch: 'full',
+  },
+  {
+    path: 'personal',
+    loadChildren: () => import('./pages/staff-list/staff-list.module').then(m => m.StaffListModule),
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AdministrationRoutingModule {}

apps/dafa-web/src/app/pages/administration/administration.component.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AdministrationComponent } from './administration.component';
+
+describe('AdministrationComponent', () => {
+  let component: AdministrationComponent;
+  let fixture: ComponentFixture<AdministrationComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [AdministrationComponent],
+        imports: [RouterTestingModule],
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AdministrationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/dafa-web/src/app/pages/administration/administration.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'dafa-administration',
+  templateUrl: './administration.component.html',
+  styleUrls: ['./administration.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AdministrationComponent {}

apps/dafa-web/src/app/pages/administration/administration.module.ts

@@ -0,0 +1,12 @@
+import { DigiNgLinkInternalModule } from '@af/digi-ng/_link/link-internal';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { AdministrationRoutingModule } from './administration-routing.module';
+import { AdministrationComponent } from './administration.component';
+
+@NgModule({
+  declarations: [AdministrationComponent],
+  imports: [CommonModule, AdministrationRoutingModule, RouterModule, DigiNgLinkInternalModule],
+})
+export class AdministrationModule {}

apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.component.html

@@ -0,0 +1,10 @@
+<section class="staff-list">
+  <digi-typography>
+    <h1>Personallista</h1>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam magna neque, interdum vel massa eget, condimentum
+      rutrum velit. Sed vitae ullamcorper sem. Aliquam malesuada nunc sed purus mollis scelerisque. Curabitur bibendum
+      leo quis ante porttitor tincidunt. Nam tincidunt imperdiet tortor eu suscipit. Maecenas ut dui est.
+    </p>
+  </digi-typography>
+</section>

apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.component.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { StaffListComponent } from './staff-list.component';
+
+describe('StaffListComponent', () => {
+  let component: StaffListComponent;
+  let fixture: ComponentFixture<StaffListComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [StaffListComponent],
+        imports: [RouterTestingModule],
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StaffListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'dafa-staff-list',
+  templateUrl: './staff-list.component.html',
+  styleUrls: ['./staff-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StaffListComponent {}

apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { StaffListComponent } from './staff-list.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [StaffListComponent],
+  imports: [CommonModule, RouterModule.forChild([{ path: '', component: StaffListComponent }])],
+})
+export class StaffListModule {}

apps/dafa-web/src/app/shared/components/icon/icon.component.html

@@ -20,10 +20,13 @@
 </digi-ng-icon-custom>
 
 <ng-template #DigiNgIcon>
-  <digi-icon-user-alt *ngIf="icon === iconType.USER" [ngClass]="iconClass"></digi-icon-user-alt>
+  <ng-container [ngSwitch]="icon">
-  <digi-icon-users-solid *ngIf="icon === iconType.USERS" [ngClass]="iconClass"></digi-icon-users-solid>
+    <digi-icon-user-alt *ngSwitchCase="iconType.USER" [ngClass]="iconClass"></digi-icon-user-alt>
-  <digi-icon-bell *ngIf="icon === iconType.BELL" [ngClass]="iconClass"></digi-icon-bell>
+    <digi-icon-users-solid *ngSwitchCase="iconType.USERS" [ngClass]="iconClass"></digi-icon-users-solid>
-  <digi-icon-calendar-alt *ngIf="icon === iconType.CALENDAR" [ngClass]="iconClass"></digi-icon-calendar-alt>
+    <digi-icon-bell *ngSwitchCase="iconType.BELL" [ngClass]="iconClass"></digi-icon-bell>
-  <digi-icon-envelope-filled *ngIf="icon === iconType.ENVELOPE" [ngClass]="iconClass"></digi-icon-envelope-filled>
+    <digi-icon-calendar-alt *ngSwitchCase="iconType.CALENDAR" [ngClass]="iconClass"></digi-icon-calendar-alt>
-  <digi-icon-sokkandidat *ngIf="icon === iconType.SOK_KANDIDAT" [ngClass]="iconClass"></digi-icon-sokkandidat>
+    <digi-icon-envelope-filled *ngSwitchCase="iconType.ENVELOPE" [ngClass]="iconClass"></digi-icon-envelope-filled>
+    <digi-icon-sokkandidat *ngSwitchCase="iconType.SOK_KANDIDAT" [ngClass]="iconClass"></digi-icon-sokkandidat>
+    <digi-icon-edit *ngSwitchCase="iconType.EDIT" [ngClass]="iconClass"></digi-icon-edit>
+  </ng-container>
 </ng-template>

mock-api/dafa-web/README.md

@@ -6,4 +6,4 @@ Run `npm install` to install all dependencies.
 
 ## Get the mock-api up and running
 
-Run `npm start` and navigate to `localhost:8000` to see a simple overview of the API.
+Run `npm start` and navigate to `localhost:8000` to see a simple overview of the API. Navigate to [localhost:8000](localhost:8000) to see a quick explaination on which recources and routes are available inside the API.

mock-api/dafa-web/scripts/generate-api.js

@@ -1,8 +1,14 @@
 import fs from 'fs';
+import kommuner from './kommuner.js';
 import participants from './participants.js';
+import services from './services.js';
+import staff from './staff.js';
 
 const apiData = {
   participants: participants.generate(50),
+  services: services.generate(),
+  staff: staff.generate(50),
+  kommuner: kommuner.generate(),
 };
 
 fs.writeFileSync('api.json', JSON.stringify(apiData, null, '\t'));

mock-api/dafa-web/scripts/participants.js

@@ -1,21 +1,22 @@
 import faker from 'faker';
+import services from './services.js';
 
 faker.locale = 'sv';
 
-const AVAILABLE_SERVICES = ['KROM', 'STOM', 'KVL'];
+const SERVICES = services.generate();
 const STATUSES = ['active', 'follow-up'];
 const STEPS = ['Gemensam planering', 'Periodisk rapport', 'Resultatrapport', 'Slutrapport'];
 
 function generateParticipants(amount = 10) {
   const participants = [];
 
-  for (let id = 0; id <= amount; ++id) {
+  for (let id = 1; id <= amount; ++id) {
     participants.push({
       id,
       firstName: faker.name.firstName(),
       lastName: faker.name.lastName(),
       status: STATUSES[Math.floor(Math.random() * STATUSES.length)],
-      service: AVAILABLE_SERVICES[Math.floor(Math.random() * AVAILABLE_SERVICES.length)],
+      service: SERVICES[Math.floor(Math.random() * SERVICES.length)].name,
       nextStep: STEPS[Math.floor(Math.random() * STEPS.length)],
       errandNumber: faker.random.number({ min: 100000, max: 999999 }),
       startDate: faker.date.recent(),

mock-api/dafa-web/scripts/services.js

@@ -0,0 +1,28 @@
+function generateServices() {
+  return [
+    {
+      id: 1,
+      name: 'KROM',
+    },
+    {
+      id: 2,
+      name: 'STOM',
+    },
+    {
+      id: 3,
+      name: 'KVL',
+    },
+    {
+      id: 4,
+      name: 'YSM',
+    },
+    {
+      id: 5,
+      name: 'AUB',
+    },
+  ];
+}
+
+export default {
+  generate: generateServices,
+};

mock-api/dafa-web/scripts/staff.js

@@ -0,0 +1,30 @@
+import faker from 'faker';
+import kommuner from './kommuner.js';
+import services from './services.js';
+
+faker.locale = 'sv';
+
+const SERVICES = services.generate();
+const KOMMUN = kommuner.generate();
+const STATUSES = [true, false];
+
+function generateStaff(amount = 10) {
+  const staff = [];
+
+  for (let id = 1; id <= amount; ++id) {
+    staff.push({
+      id,
+      firstName: faker.name.firstName(),
+      lastName: faker.name.lastName(),
+      kommun: KOMMUN[Math.floor(Math.random() * KOMMUN.length)].kommun,
+      active: STATUSES[Math.floor(Math.random() * STATUSES.length)],
+      service: SERVICES[Math.floor(Math.random() * SERVICES.length)].name,
+    });
+  }
+
+  return staff;
+}
+
+export default {
+  generate: generateStaff,
+};