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

2021-03-31 15:31:27 +02:00
parent 9d82c91348
commit cb5cb8b486
28 changed files with 5220 additions and 49 deletions
@@ -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' },
@@ -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>
@@ -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);
+  }
 }
@@ -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;
-        this.path = url.split('/')[1].split('?')[0] || '';
+        const paths = this.router.url.split('/');
+
+        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 defaultClass;
+    return `dafa dafa--${this.path.length ? this.path : 'home'}`;
  }
 }
@@ -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],
@@ -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>
@@ -12,56 +12,37 @@
      </a>
    </li>
    <li class="sidebar__item">
-      <a
-        [routerLink]="['/mina-deltagare']"
-        [routerLinkActive]="['sidebar__link--active']"
-        [routerLinkActiveOptions]="{ exact: true }"
-        class="sidebar__link"
-      >
+      <a [routerLink]="['/administration']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
+        <dafa-icon class="sidebar__icon" [icon]="iconType.EDIT"></dafa-icon>
+        Administration
+      </a>
+    </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
-        [routerLink]="['/avrop']"
-        [routerLinkActive]="['sidebar__link--active']"
-        [routerLinkActiveOptions]="{ exact: true }"
-        class="sidebar__link"
-      >
+      <a [routerLink]="['/avrop']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
        <dafa-icon class="sidebar__icon" [icon]="iconType.CALENDAR"></dafa-icon>
        Avrop
      </a>
    </li>
    <li class="sidebar__item">
-      <a
-        [routerLink]="['/meddelanden']"
-        [routerLinkActive]="['sidebar__link--active']"
-        [routerLinkActiveOptions]="{ exact: true }"
-        class="sidebar__link"
-      >
+      <a [routerLink]="['/meddelanden']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
        <dafa-icon class="sidebar__icon" [icon]="iconType.ENVELOPE"></dafa-icon>
        Meddelanden
      </a>
    </li>
    <li class="sidebar__item">
-      <a
-        [routerLink]="['/statistik']"
-        [routerLinkActive]="['sidebar__link--active']"
-        [routerLinkActiveOptions]="{ exact: true }"
-        class="sidebar__link"
-      >
+      <a [routerLink]="['/statistik']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
        <dafa-icon class="sidebar__icon" [icon]="iconType.SOK_KANDIDAT"></dafa-icon>
        Statistik
      </a>
    </li>
    <li class="sidebar__item">
-      <a
-        [routerLink]="['/installningar']"
-        [routerLinkActive]="['sidebar__link--active']"
-        [routerLinkActiveOptions]="{ exact: true }"
-        class="sidebar__link"
-      >
+      <a [routerLink]="['/installningar']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
        <dafa-icon class="sidebar__icon" [icon]="iconType.SETTINGS"></dafa-icon>
        Inställningar
      </a>
@@ -7,4 +7,5 @@ export enum IconType {
  CALENDAR = 'calendar',
  ENVELOPE = 'envelope',
  SOK_KANDIDAT = 'sok-kandidat',
+  EDIT = 'edit',
 }
@@ -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;
+}
@@ -1,3 +1,4 @@
 export interface User {
  id: string;
+  name: string;
 }
@@ -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 {}
@@ -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();
+  });
+});
@@ -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 {}
@@ -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 {}
@@ -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>
@@ -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();
+  });
+});
@@ -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 {}
@@ -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 {}
@@ -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>
-  <digi-icon-users-solid *ngIf="icon === iconType.USERS" [ngClass]="iconClass"></digi-icon-users-solid>
-  <digi-icon-bell *ngIf="icon === iconType.BELL" [ngClass]="iconClass"></digi-icon-bell>
-  <digi-icon-calendar-alt *ngIf="icon === iconType.CALENDAR" [ngClass]="iconClass"></digi-icon-calendar-alt>
-  <digi-icon-envelope-filled *ngIf="icon === iconType.ENVELOPE" [ngClass]="iconClass"></digi-icon-envelope-filled>
-  <digi-icon-sokkandidat *ngIf="icon === iconType.SOK_KANDIDAT" [ngClass]="iconClass"></digi-icon-sokkandidat>
+  <ng-container [ngSwitch]="icon">
+    <digi-icon-user-alt *ngSwitchCase="iconType.USER" [ngClass]="iconClass"></digi-icon-user-alt>
+    <digi-icon-users-solid *ngSwitchCase="iconType.USERS" [ngClass]="iconClass"></digi-icon-users-solid>
+    <digi-icon-bell *ngSwitchCase="iconType.BELL" [ngClass]="iconClass"></digi-icon-bell>
+    <digi-icon-calendar-alt *ngSwitchCase="iconType.CALENDAR" [ngClass]="iconClass"></digi-icon-calendar-alt>
+    <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>