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

feat(start): Added role-based content on startpage. (TV-517)

Browse Source 
Squashed commit of the following:

commit 583b54ba97f0e0c02bd6665c76e95aabbb4c0bf1
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Sep 10 07:37:32 2021 +0200

    Updated role-check and added loader

commit 78cd4047b3ad1180c818adeaa29c5a2d567b386e
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 9 16:55:53 2021 +0200

    merged in develope, fixed template conflict (TV-517)

commit c5d295126f2e9826e95456e28deb276609cb56e3
Merge: 014fdb4 5f81d6f
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 9 16:54:26 2021 +0200

    merged in develope (TV-517)

commit 014fdb4af7df3c8bd8502ee617fce2bf2f0a49cd
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 9 16:49:59 2021 +0200

    simplified the code, mapped instead of subscribe (TV-517)

commit dbec3796596b6d3e5c483c68e1ffd628a872b1ca
Merge: 6ed17c3 2bca57c
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 9 15:13:44 2021 +0200

    Merge branch 'develop' into feature/TV-517

commit 6ed17c3a01b2261529a793413f455eecd3194fd2
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 9 15:13:07 2021 +0200

    fixed error after merge with develop (TV-517)

commit e7cd48905bcbff4df24676fd2f2ed5ba214f6e86
Merge: d283385 1938b94
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 9 14:53:46 2021 +0200

    Merge branch 'develop' into feature/TV-517

commit d283385408bc189bdb4884e397acf9653f54c6d4
Merge: 3ff31c9 7774477
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 9 14:22:09 2021 +0200

    Merge branch 'develop' into feature/TV-517

commit 3ff31c9596a45a32b28a01015d455fc97acd9cf7
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 9 14:19:51 2021 +0200

    added specific view for standard user (TV-517)

commit 9302f56f7cd9dfe66d70947ac62c8e1fde3cac86
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 9 12:01:08 2021 +0200

    added getters for user roles (TV-517)
This commit is contained in:
Erik Tiekstra
2021-09-10 07:39:03 +02:00
parent 5f81d6ff8e
commit 270d46eb17
5 changed files with 57 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
apps/mina-sidor-fa/src/app/pages/start/start.component.html
View File

@@ -1,42 +1,31 @@
<msfa-layout>
<section class="start">
<!-- User not logged in -->
<ng-container *ngIf="isStandardUser">
<digi-typography>
<h1>Välkommen {{ userFullName }}</h1>
<p>Det verkar som att du inte har fått din behörighet ännu, kontakta din administratör för att få tillgång till tjänsten.</p>
</digi-typography>
</ng-container>
<!-- User logged in -->
<ng-container *ngIf="!isStandardUser">
<digi-typography>
<h1>Välkommen {{ userFullName }}</h1>
<p>
Detta är Arbetsförmedlingens nya plattform för våra fristående aktörer,
här kommer du bland annat kunna sköta den dagliga kontakten med
arbetssökande och arbetsförmedlingen.
<br/><br/>
Vi kommer successivt att
implementera nytt innehåll, förbättringar och uppdateringar.
Målet är helt enkelt att underlätta ditt dagliga arbete!
</p>
</digi-typography>
<div class="start__wrapper">
<div class="start__notifications">
<digi-info-card af-heading="Nya deltagare" af-heading-level="h2" af-type="info">
<p>
Det har kommit in nya avrop med deltagare, länken nedan tar dig till fliken Nya deltagare. Du finner den
också i vänster menyn på sidan
</p>
<digi-ng-link-internal afText="Till nya deltagare" afRoute="/nya-deltagare"></digi-ng-link-internal>
</digi-info-card>
</div>
<div class="start__alerts"></div>
<div class="start__statistics"></div>
</div>
</ng-container>
</section>
<msfa-layout *ngIf="userRoles$ | async as userRoles; else loadingRef">
<digi-typography>
<section class="start">
<header class="start__header">
<h1>Välkommen {{ userFullName$ | async }}</h1>
<ng-container *ngIf="isAuthorizedUser(userRoles); else unauthorizedRef">
<p>
Detta är Arbetsförmedlingens nya plattform för våra fristående aktörer, här kommer du bland annat kunna
sköta den dagliga kontakten med arbetssökande och arbetsförmedlingen.
</p>
<p>
Vi kommer successivt att implementera nytt innehåll, förbättringar och uppdateringar. Målet är helt enkelt
att underlätta ditt dagliga arbete!
</p>
</ng-container>
<ng-template #unauthorizedRef>
<p>
Det verkar som att du inte har fått din behörighet ännu, kontakta din administratör för att få tillgång till
tjänsten.
</p>
</ng-template>
</header>
</section>
</digi-typography>
</msfa-layout>
<ng-template #loadingRef>
<div class="msfa__loading-wrapper msfa__loading-wrapper--full-screen">
<digi-icon-spinner class="msfa__spinner"></digi-icon-spinner>
</div>
</ng-template>

26
apps/mina-sidor-fa/src/app/pages/start/start.component.scss
View File

@@ -1,28 +1,2 @@
@import 'variables/gutters';
.start {
&__wrapper {
margin-top: $digi--layout--gutter--l;
display: grid;
grid-template-rows: auto;
grid-template-areas:
'header header'
'notifications alerts'
'statistics statistics ';
gap: $digi--layout--gutter--l;
}
&__notifications {
grid-area: notifications;
}
&__alerts {
grid-area: alerts;
display: flex;
flex-direction: column;
gap: var(--digi--layout--gutter);
}
&__statistics {
grid-area: statistics;
}
}

34
apps/mina-sidor-fa/src/app/pages/start/start.component.ts
View File

@@ -1,8 +1,7 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { UnsubscribeDirective } from '@msfa-directives/unsubscribe.directive';
import { RoleEnum } from '@msfa-enums/role.enum';
import { mapResponseToRoles, Role } from '@msfa-models/role.model';
import { Role } from '@msfa-models/role.model';
import { UserService } from '@msfa-services/api/user.service';
import { Observable } from 'rxjs';
import { filter, map } from 'rxjs/operators';
@Component({
@@ -11,27 +10,16 @@ import { filter, map } from 'rxjs/operators';
styleUrls: ['./start.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class StartComponent extends UnsubscribeDirective {
private _userName: string;
private _userRoles: Role[];
export class StartComponent {
userFullName$: Observable<string> = this.userService.user$.pipe(
filter(user => !!user),
map(userName => userName.fullName)
);
userRoles$: Observable<Role[]> = this.userService.userRoles$;
constructor(private userService: UserService) {
super();
super.unsubscribeOnDestroy(
this.userService.user$.pipe(
filter(user => !!user),
map(user => user)
).subscribe(user => {
this._userName = user.fullName;
this._userRoles = mapResponseToRoles(user.roles);
}));
}
constructor(private userService: UserService) {}
get isStandardUser(): boolean {
return this._userRoles?.some(role => role.type === RoleEnum.MSFA_Standard);
isAuthorizedUser(userRoles: Role[]): boolean {
return !!userRoles.length;
}
get userFullName(): string {
return this._userName;
}
}

4
apps/mina-sidor-fa/src/app/pages/start/start.module.ts
View File

@@ -1,6 +1,4 @@
import { DigiNgCardModule } from '@af/digi-ng/_card/card';
import { DigiNgLinkInternalModule } from '@af/digi-ng/_link/link-internal';
import { DigiNgNotificationAlertModule } from '@af/digi-ng/_notification/notification-alert';
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
@@ -15,8 +13,6 @@ import { StartComponent } from './start.component';
RouterModule.forChild([{ path: '', component: StartComponent }]),
LayoutModule,
DigiNgCardModule,
DigiNgNotificationAlertModule,
DigiNgLinkInternalModule,
],
})
export class StartModule {}

21
apps/mina-sidor-fa/src/styles/styles.scss
View File

@@ -4,10 +4,6 @@
@import 'mixins/link';
@keyframes spinning {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
@@ -73,9 +69,24 @@ dl {
font-size: 0.875rem !important;
}
&__loading-wrapper {
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
&--full-screen {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.5);
}
}
&__spinner {
display: inline-flex;
animation: spinning infinite 0.6s linear;
animation: spinning 1s linear infinite;
}
&__digi-icon {