arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Erik Tiekstra
2021-03-31 15:31:27 +02:00
committed by Erik Tiekstra
parent 9d82c91348
commit cb5cb8b486
28 changed files with 5220 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/dafa-web/src/app/app-routing.module.ts
View File

@@ -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' },

4
apps/dafa-web/src/app/app.component.html
View File

@@ -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>

5
apps/dafa-web/src/app/app.component.scss
View File

@@ -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);
}
}

35
apps/dafa-web/src/app/app.component.ts
View File

@@ -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'}`;
}
}

4
apps/dafa-web/src/app/app.module.ts
View File

@@ -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],

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

@@ -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>

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

@@ -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>

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

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

16
apps/dafa-web/src/app/data/models/staff.model.ts Normal file
View File

@@ -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
apps/dafa-web/src/app/data/models/user.model.ts
View File

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

22
apps/dafa-web/src/app/pages/administration/administration-routing.module.ts Normal file
View File

@@ -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
apps/dafa-web/src/app/pages/administration/administration.component.html Normal file
View File

0
apps/dafa-web/src/app/pages/administration/administration.component.scss Normal file
View File

27
apps/dafa-web/src/app/pages/administration/administration.component.spec.ts Normal file
View File

@@ -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();
});
});

9
apps/dafa-web/src/app/pages/administration/administration.component.ts Normal file
View File

@@ -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 {}

12
apps/dafa-web/src/app/pages/administration/administration.module.ts Normal file
View File

@@ -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 {}

10
apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.component.html Normal file
View File

@@ -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
apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.component.scss Normal file
View File

27
apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.component.spec.ts Normal file
View File

@@ -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();
});
});

9
apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.component.ts Normal file
View File

@@ -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 {}

11
apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.module.ts Normal file
View File

@@ -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 {}

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

@@ -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>