diff --git a/apps/dafa-web/src/app/app.component.ts b/apps/dafa-web/src/app/app.component.ts index ce294b2..396a63d 100644 --- a/apps/dafa-web/src/app/app.component.ts +++ b/apps/dafa-web/src/app/app.component.ts @@ -2,6 +2,7 @@ import { NavigationBreadcrumbsItem } from '@af/digi-ng/_navigation/navigation-br import { ChangeDetectionStrategy, Component } from '@angular/core'; import { NavigationEnd, Router } from '@angular/router'; import { User } from '@dafa-models/user.model'; +import { mapPathToPageName } from '@dafa-utils/map-path-to-page-name.util'; import { BehaviorSubject } from 'rxjs'; import { filter } from 'rxjs/operators'; import { UnsubscribeDirective } from './directives/unsubscribe.directive'; @@ -41,7 +42,7 @@ export class AppComponent extends UnsubscribeDirective { ...[...paths] .filter(path => !!path) .map(path => ({ - text: `${path.charAt(0).toUpperCase()}${path.slice(1)}`, + text: mapPathToPageName(path), routerLink: paths.slice(0, paths.length - 1).join('/'), })), ]); diff --git a/apps/dafa-web/src/app/data/constants/navigation.ts b/apps/dafa-web/src/app/data/constants/navigation.ts new file mode 100644 index 0000000..a526647 --- /dev/null +++ b/apps/dafa-web/src/app/data/constants/navigation.ts @@ -0,0 +1,10 @@ +export const Navigation = { + administration: 'Administration', + 'skapa-konto': 'Skapa nytt konto', + personal: 'Personal', + 'mina-deltagare': 'Mina deltagare', + avrop: 'Avrop', + meddelanden: 'Meddelanden', + statistik: 'Statistik', + installningar: 'Inställningar', +}; diff --git a/apps/dafa-web/src/app/data/contants/.gitkeep b/apps/dafa-web/src/app/data/contants/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/apps/dafa-web/src/app/data/models/participant.model.ts b/apps/dafa-web/src/app/data/models/participant.model.ts index 7b634c7..a536361 100644 --- a/apps/dafa-web/src/app/data/models/participant.model.ts +++ b/apps/dafa-web/src/app/data/models/participant.model.ts @@ -2,7 +2,7 @@ import { ParticipantStatus } from '@dafa-enums/participant-status.enum'; import { Service } from '@dafa-enums/service.enum'; export interface Participant { - id: number; + id: string; firstName: string; lastName: string; status: ParticipantStatus; diff --git a/apps/dafa-web/src/app/data/models/sort-by.model.ts b/apps/dafa-web/src/app/data/models/sort-by.model.ts index 8463e9f..86ca23f 100644 --- a/apps/dafa-web/src/app/data/models/sort-by.model.ts +++ b/apps/dafa-web/src/app/data/models/sort-by.model.ts @@ -1,6 +1,7 @@ import { Participant } from './participant.model'; +import { Staff } from './staff.model'; export interface SortBy { - key: keyof Participant; + key: keyof Participant | keyof Staff; reverse: boolean; } diff --git a/apps/dafa-web/src/app/data/models/staff.model.ts b/apps/dafa-web/src/app/data/models/staff.model.ts index 7b634c7..ae8cd11 100644 --- a/apps/dafa-web/src/app/data/models/staff.model.ts +++ b/apps/dafa-web/src/app/data/models/staff.model.ts @@ -1,16 +1,10 @@ -import { ParticipantStatus } from '@dafa-enums/participant-status.enum'; -import { Service } from '@dafa-enums/service.enum'; - -export interface Participant { - id: number; +export interface Staff { + id: string; + staffId: string; firstName: string; lastName: string; - status: ParticipantStatus; - nextStep: string; - service: Service; - errandNumber: number; - startDate: Date; - endDate: Date; - handleBefore: Date; + kommun: string; + active: boolean; + service: string; fullName?: string; } diff --git a/apps/dafa-web/src/app/pages/administration/administration-routing.module.ts b/apps/dafa-web/src/app/pages/administration/administration-routing.module.ts index 78aa64d..da00e40 100644 --- a/apps/dafa-web/src/app/pages/administration/administration-routing.module.ts +++ b/apps/dafa-web/src/app/pages/administration/administration-routing.module.ts @@ -11,7 +11,7 @@ const routes: Routes = [ }, { path: 'personal', - loadChildren: () => import('./pages/staff-list/staff-list.module').then(m => m.StaffListModule), + loadChildren: () => import('./pages/staff/staff.module').then(m => m.StaffModule), }, { path: 'skapa-konto', diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.component.html b/apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.component.html deleted file mode 100644 index 7794f1f..0000000 --- a/apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.component.html +++ /dev/null @@ -1,14 +0,0 @@ -
- -

Personallista

-

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

- - Skapa nytt konto - - - -
diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.component.scss b/apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.component.ts b/apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.component.ts deleted file mode 100644 index af62183..0000000 --- a/apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { IconType } from '@dafa-enums/icon-type.enum'; - -@Component({ - selector: 'dafa-staff-list', - templateUrl: './staff-list.component.html', - styleUrls: ['./staff-list.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class StaffListComponent { - iconType = IconType; -} diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.html b/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.html new file mode 100644 index 0000000..9ab8442 --- /dev/null +++ b/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.html @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + +
{{ staff.firstName }} {{ staff.lastName }}{{ staff.staffId }}{{ staff.kommun }}{{ staff.active ? 'Ja' : 'Nej' }}{{ staff.service }}
+ + + diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.scss b/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.scss new file mode 100644 index 0000000..305fd90 --- /dev/null +++ b/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.scss @@ -0,0 +1,35 @@ +@import 'variables/gutters'; + +.staff-list { + &__column-head { + padding: 0; + } + + &__sort-button { + position: relative; + background-color: transparent; + border-width: 0; + width: 100%; + text-align: left; + padding: var(--digi--layout--gutter--s) $digi--layout--gutter--l var(--digi--layout--gutter--s) + var(--digi--layout--gutter); + margin: 0; + font-size: inherit; + font-weight: inherit; + display: flex; + align-items: center; + gap: var(--digi--layout--gutter); + cursor: pointer; + } + + &__sort-icon { + position: absolute; + display: inline-flex; + right: 0.5rem; + } + + &__pagination { + display: block; + margin-top: var(--digi--layout--gutter); + } +} diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.spec.ts b/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.spec.ts new file mode 100644 index 0000000..3116fd7 --- /dev/null +++ b/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.spec.ts @@ -0,0 +1,27 @@ +import { DigiNgTableModule } from '@af/digi-ng/_table/table'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; +import { StaffListComponent } from './staff-list.component'; + +describe('StaffListComponent', () => { + let component: StaffListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [StaffListComponent], + imports: [RouterTestingModule, DigiNgTableModule], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(StaffListComponent); + component = fixture.componentInstance; + component.staff = []; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.ts b/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.ts new file mode 100644 index 0000000..37e204d --- /dev/null +++ b/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.ts @@ -0,0 +1,47 @@ +import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; +import { SortBy } from '@dafa-models/sort-by.model'; +import { Staff } from '@dafa-models/staff.model'; +import { BehaviorSubject } from 'rxjs'; + +@Component({ + selector: 'dafa-staff-list', + templateUrl: './staff-list.component.html', + styleUrls: ['./staff-list.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class StaffListComponent { + @Input() staff: Staff[]; + @Input() sortBy: SortBy | null; + @Output() sorted = new EventEmitter(); + + private _currentPage$ = new BehaviorSubject(1); + private _staffPerPage = 10; + + get currentPage(): number { + return this._currentPage$.getValue(); + } + + get totalPages(): number { + return Math.ceil(this.staff.length / this._staffPerPage); + } + + get pagedStaff(): Staff[] { + return [...this.staff].slice(this.currentResultStart - 1, this.currentResultEnd - 1); + } + + get currentResultStart(): number { + return (this.currentPage - 1) * this._staffPerPage + 1; + } + + get currentResultEnd(): number { + return this.currentResultStart + this._staffPerPage; + } + + handleSort(key: keyof Staff): void { + this.sorted.emit(key); + } + + handlePagination(page: number): void { + this._currentPage$.next(page); + } +} diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.module.ts b/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.module.ts similarity index 56% rename from apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.module.ts rename to apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.module.ts index f5b96f6..bfc02fa 100644 --- a/apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.module.ts +++ b/apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.module.ts @@ -1,12 +1,12 @@ +import { DigiNgTableModule } from '@af/digi-ng/_table/table'; import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { IconModule } from '@dafa-shared/components/icon/icon.module'; import { StaffListComponent } from './staff-list.component'; @NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], declarations: [StaffListComponent], - imports: [CommonModule, RouterModule.forChild([{ path: '', component: StaffListComponent }]), IconModule], + imports: [CommonModule, DigiNgTableModule], + exports: [StaffListComponent], }) export class StaffListModule {} diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.html b/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.html new file mode 100644 index 0000000..6aca395 --- /dev/null +++ b/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.html @@ -0,0 +1,31 @@ +
+ +

Personal

+

+ 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. +

+ +
+ +
+ +

Personallista

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, officia perferendis? Excepturi animi rem culpa + facere, laboriosam vel, quia eos eligendi, cupiditate doloribus aspernatur unde nihil iste earum corrupti illo. +

+ + + + + + + +
diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.scss b/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.scss new file mode 100644 index 0000000..e445250 --- /dev/null +++ b/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.scss @@ -0,0 +1,11 @@ +.staff { + &__cta-wrapper { + margin-top: var(--digi--layout--gutter); + } + + &__link { + display: inline-flex; + align-items: center; + gap: var(--digi--layout--gutter--s); + } +} diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.component.spec.ts b/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.spec.ts similarity index 62% rename from apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.component.spec.ts rename to apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.spec.ts index 288f82f..46c5424 100644 --- a/apps/dafa-web/src/app/pages/administration/pages/staff-list/staff-list.component.spec.ts +++ b/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.spec.ts @@ -1,22 +1,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; -import { StaffListComponent } from './staff-list.component'; +import { StaffComponent } from './staff.component'; -describe('StaffListComponent', () => { - let component: StaffListComponent; - let fixture: ComponentFixture; +describe('StaffComponent', () => { + let component: StaffComponent; + let fixture: ComponentFixture; beforeEach( waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [StaffListComponent], + declarations: [StaffComponent], imports: [RouterTestingModule], }).compileComponents(); }) ); beforeEach(() => { - fixture = TestBed.createComponent(StaffListComponent); + fixture = TestBed.createComponent(StaffComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.ts b/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.ts new file mode 100644 index 0000000..6a64e09 --- /dev/null +++ b/apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.ts @@ -0,0 +1,37 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { IconType } from '@dafa-enums/icon-type.enum'; +import { SortBy } from '@dafa-models/sort-by.model'; +import { Staff } from '@dafa-models/staff.model'; +import { StaffService } from '@dafa-services/api/staff.service'; +import { BehaviorSubject, Observable } from 'rxjs'; + +@Component({ + selector: 'dafa-staff', + templateUrl: './staff.component.html', + styleUrls: ['./staff.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class StaffComponent { + private _searchValue$ = new BehaviorSubject(''); + filteredStaff$: Observable = this.staffService.filteredStaff$; + staffSortBy$: Observable = this.staffService.staffSortBy$; + iconType = IconType; + + constructor(private staffService: StaffService) {} + + get searchValue(): string { + return this._searchValue$.getValue(); + } + + handleSearchSubmit(): void { + this.staffService.setSearchFilter(this.searchValue); + } + + handleSearchInput($event: CustomEvent): void { + this._searchValue$.next($event.detail.target.value); + } + + handleStaffSort(key: keyof Staff): void { + this.staffService.setStaffSortKey(key); + } +} diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff/staff.module.ts b/apps/dafa-web/src/app/pages/administration/pages/staff/staff.module.ts new file mode 100644 index 0000000..77369cb --- /dev/null +++ b/apps/dafa-web/src/app/pages/administration/pages/staff/staff.module.ts @@ -0,0 +1,20 @@ +import { DigiNgLinkInternalModule } from '@af/digi-ng/_link/link-internal'; +import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base'; +import { CommonModule } from '@angular/common'; +import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { StaffListModule } from './components/staff-list/staff-list.module'; +import { StaffComponent } from './staff.component'; + +@NgModule({ + schemas: [CUSTOM_ELEMENTS_SCHEMA], + declarations: [StaffComponent], + imports: [ + CommonModule, + RouterModule.forChild([{ path: '', component: StaffComponent }]), + DigiNgLinkInternalModule, + DigiNgSkeletonBaseModule, + StaffListModule, + ], +}) +export class StaffModule {} diff --git a/apps/dafa-web/src/app/services/api/staff.service.ts b/apps/dafa-web/src/app/services/api/staff.service.ts new file mode 100644 index 0000000..0f791c2 --- /dev/null +++ b/apps/dafa-web/src/app/services/api/staff.service.ts @@ -0,0 +1,56 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { environment } from '@dafa-environment'; +import { SortBy } from '@dafa-models/sort-by.model'; +import { Staff } from '@dafa-models/staff.model'; +import { sort } from '@dafa-utils/sort.util'; +import { BehaviorSubject, combineLatest, Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; + +function filterStaff(staff: Staff[], searchFilter: string): Staff[] { + return staff.filter(person => { + const searchValueExistsInName = person.fullName.toLowerCase().includes(searchFilter.toLowerCase()); + + return searchValueExistsInName; + }); +} + +@Injectable({ + providedIn: 'root', +}) +export class StaffService { + private _allStaff$: Observable = this.httpClient.get(`${environment.apiBase}/staff`).pipe( + map(staff => + staff.map(person => ({ + ...person, + fullName: `${person.firstName} ${person.lastName}`, + })) + ) + ); + private _staffSortBy$ = new BehaviorSubject({ key: 'fullName', reverse: false }); + public staffSortBy$: Observable = this._staffSortBy$.asObservable(); + private _searchFilter$ = new BehaviorSubject(''); + public searchFilter$: Observable = this._searchFilter$.asObservable(); + + private _filteredStaff$: Observable = combineLatest([this._allStaff$, this._searchFilter$]).pipe( + map(([staff, searchFilter]) => filterStaff(staff, searchFilter)) + ); + + public filteredStaff$: Observable = combineLatest([this._filteredStaff$, this._staffSortBy$]).pipe( + map(([staff, sortBy]) => { + return sortBy ? sort(staff, sortBy) : staff; + }) + ); + + public setSearchFilter(value: string) { + this._searchFilter$.next(value); + } + + public setStaffSortKey(key: keyof Staff) { + const currentSortBy = this._staffSortBy$.getValue(); + const reverse = currentSortBy?.key === key ? !currentSortBy.reverse : false; + this._staffSortBy$.next({ key, reverse }); + } + + constructor(private httpClient: HttpClient) {} +} diff --git a/apps/dafa-web/src/app/utils/map-path-to-page-name.util.ts b/apps/dafa-web/src/app/utils/map-path-to-page-name.util.ts new file mode 100644 index 0000000..d249cd9 --- /dev/null +++ b/apps/dafa-web/src/app/utils/map-path-to-page-name.util.ts @@ -0,0 +1,5 @@ +import { Navigation } from '@dafa-constants/navigation'; + +export function mapPathToPageName(path: string): string { + return Navigation[path] || `${path.charAt(0).toUpperCase()}${path.slice(1)}`; +} diff --git a/apps/dafa-web/src/styles/styles.scss b/apps/dafa-web/src/styles/styles.scss index 18f1a0c..424a3ac 100644 --- a/apps/dafa-web/src/styles/styles.scss +++ b/apps/dafa-web/src/styles/styles.scss @@ -15,6 +15,7 @@ body { margin: 0; font-weight: var(--digi--typography--font-weight); + overflow: hidden; } button { diff --git a/mock-api/dafa-web/README.md b/mock-api/dafa-web/README.md index 5f88cce..cb4b500 100644 --- a/mock-api/dafa-web/README.md +++ b/mock-api/dafa-web/README.md @@ -7,3 +7,7 @@ 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. Navigate to [localhost:8000](localhost:8000) to see a quick explaination on which recources and routes are available inside the API. + +### Mock delayed response + +Run `npm run start:delay` to use the API with a delayed response. diff --git a/mock-api/dafa-web/package.json b/mock-api/dafa-web/package.json index c9622a0..f24c632 100644 --- a/mock-api/dafa-web/package.json +++ b/mock-api/dafa-web/package.json @@ -4,7 +4,8 @@ "description": "A mock api implementing all needed endpoints for dafa-web", "scripts": { "generate-api": "node ./scripts/generate-api.js", - "start": "npm run generate-api && json-server --watch api.json --port 8000 --routes routes.json" + "start": "npm run generate-api && json-server --watch api.json --port 8000 --routes routes.json", + "start:delay": "npm start -- --delay 500" }, "author": "Erik Tiekstra (erik.tiekstra@arbetsformedlingen.se)", "license": "MIT", diff --git a/mock-api/dafa-web/scripts/participants.js b/mock-api/dafa-web/scripts/participants.js index 93f3f16..fb91a35 100644 --- a/mock-api/dafa-web/scripts/participants.js +++ b/mock-api/dafa-web/scripts/participants.js @@ -10,9 +10,9 @@ const STEPS = ['Gemensam planering', 'Periodisk rapport', 'Resultatrapport', 'Sl function generateParticipants(amount = 10) { const participants = []; - for (let id = 1; id <= amount; ++id) { + for (let i = 1; i <= amount; ++i) { participants.push({ - id, + id: faker.random.uuid(), firstName: faker.name.firstName(), lastName: faker.name.lastName(), status: STATUSES[Math.floor(Math.random() * STATUSES.length)], diff --git a/mock-api/dafa-web/scripts/staff.js b/mock-api/dafa-web/scripts/staff.js index 42caad1..57f6bc7 100644 --- a/mock-api/dafa-web/scripts/staff.js +++ b/mock-api/dafa-web/scripts/staff.js @@ -11,9 +11,10 @@ const STATUSES = [true, false]; function generateStaff(amount = 10) { const staff = []; - for (let id = 1; id <= amount; ++id) { + for (let i = 1; i <= amount; ++i) { staff.push({ - id, + id: faker.random.uuid(), + staffId: faker.random.number(), firstName: faker.name.firstName(), lastName: faker.name.lastName(), kommun: KOMMUN[Math.floor(Math.random() * KOMMUN.length)].kommun,