Added my-account information and possibility to switch organizations

apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.html

@@ -2,23 +2,94 @@
   <digi-typography>
     <section class="my-account">
       <header class="my-account__header">
-        <h1>Mitt konto</h1>
-        <a class="my-account__logout" routerLink="/logga-ut">
-          <msfa-icon [icon]="IconType.LOGOUT"></msfa-icon>
-          Logga ut
-        </a>
+        <div class="my-account__heading-wrapper">
+          <h1>Mitt konto</h1>
+          <a class="my-account__logout" routerLink="/logga-ut">
+            <msfa-icon [icon]="IconType.LOGOUT"></msfa-icon>
+            Logga ut
+          </a>
+        </div>
+        <p>
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad nulla cumque pariatur quia eveniet, reprehenderit
+          voluptate dicta aspernatur ipsa quam, dolor reiciendis et dolores consectetur laborum voluptatem quis impedit
+          aliquam.
+        </p>
       </header>
+      <main class="my-account__contents" *ngIf="user$ | async as user; else loadingRef">
+        <div class="my-account__block">
+          <h2>Personuppgifter</h2>
+          <dl>
+            <dt>Förnamn</dt>
+            <dd>
+              <ng-container *ngIf="user.firstName; else emptyText">{{ user.firstName }}</ng-container>
+            </dd>
+            <dt>Efternamn</dt>
+            <dd>
+              <ng-container *ngIf="user.lastName; else emptyText">{{ user.lastName }}</ng-container>
+            </dd>
+            <dt>Personnummer</dt>
+            <dd>
+              <msfa-hide-text
+                *ngIf="user.ssn; else emptyText"
+                symbols="********-****"
+                [changingText]="user.ssn"
+                ariaLabelType="personnummer"
+              ></msfa-hide-text>
+            </dd>
+            <dt>E-postadress</dt>
+            <dd>
+              <a *ngIf="user.email; else emptyText" href="mailto:{{user.email}}">{{user.email}}</a>
+            </dd>
+          </dl>
+        </div>
 
-      <main *ngIf="user$ | async as user; else loadingRef">
-        <p>Här kan du se dina uppgifter.</p>
+        <div class="my-account__block" *ngIf="selectedOrganization$ | async as selectedOrganization">
+          <h2>Organisation</h2>
+          <p>
+            Du nuvarande organisation är: {{selectedOrganization.name}}, {{selectedOrganization.organizationNumber}}.
+          </p>
+          <ng-container *ngIf="otherOrganizations$ | async as otherOrganizations">
+            <p>Du tillhör flera organisationer. Du kan byta organisation i formuläret.</p>
 
-        <h2>Mina roller</h2>
-        <ul class="my-account__roles">
-          <li class="my-account__role" *ngFor="let role of user.roles">
-            <digi-icon-check-circle class="msfa__digi-icon my-account__authorization-icon"></digi-icon-check-circle>
-            {{role.name}}
-          </li>
-        </ul>
+            <msfa-organization-picker-form
+              [compact]="true"
+              [organizations]="organizations$ | async"
+              [selectedOrganization]="selectedOrganization"
+              label="Byt organisation"
+              submitText="Byt organisation"
+              (selectedOrganizationChanged)="loginWithOrganization($event)"
+            ></msfa-organization-picker-form>
+          </ng-container>
+        </div>
+
+        <div class="my-account__block">
+          <h2>Behörigheter</h2>
+          <p>Här kan du se dina behörigheter i systemet.</p>
+        </div>
+
+        <div class="my-account__block">
+          <h3>Roller</h3>
+          <p>
+            Här ser du dina specifika roller i systemet. Tänk på att rollen i systemet är begränsad till de utförande
+            verksamheter och adresser som användaren hör till. Användaren kan därför endast utföra uppgifter och se
+            information inom den/de utförande adresser som tilldelats användaren.
+            <msfa-roles-dialog></msfa-roles-dialog>.
+          </p>
+          <ul class="my-account__list">
+            <li class="my-account__list-item" *ngFor="let role of allRoles">
+              <digi-icon-check-circle
+                *ngIf="userHasRole(user.roles, role); else unauthorized"
+                class="msfa__digi-icon my-account__authorization-icon my-account__authorization-icon--authorized"
+              ></digi-icon-check-circle>
+              <ng-template #unauthorized>
+                <digi-icon-x-button
+                  class="msfa__digi-icon my-account__authorization-icon my-account__authorization-icon--unauthorized"
+                ></digi-icon-x-button>
+              </ng-template>
+              {{role.name}}
+            </li>
+          </ul>
+        </div>
       </main>
     </section>
   </digi-typography>
@@ -27,3 +98,8 @@
 <ng-template #loadingRef>
   <digi-ng-skeleton-base [afCount]="3" afText="Laddar kontoinformation"></digi-ng-skeleton-base>
 </ng-template>
+
+<ng-template #emptyText>
+  <span aria-hidden="true">-</span>
+  <span class="msfa__a11y-sr-only">Info saknas</span>
+</ng-template>

apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.scss

@@ -3,7 +3,7 @@
 @import 'variables/gutters';
 
 .my-account {
-  &__header {
+  &__heading-wrapper {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -13,20 +13,37 @@
     @include msfa__button('secondary');
   }
 
-  &__roles {
+  &__contents {
+    display: flex;
+    flex-direction: column;
+    gap: $digi--layout--gutter--l;
+    margin-top: $digi--layout--gutter--l;
+  }
+
+  &__block {
+    max-width: var(--digi--typography--text--max-width);
+  }
+
+  &__list {
     @include msfa__reset-list;
     display: flex;
     flex-direction: column;
     gap: $digi--layout--gutter--s;
   }
 
-  &__role {
+  &__list-item {
     display: flex;
     align-items: center;
     gap: $digi--layout--gutter--s;
   }
 
   &__authorization-icon {
-    color: var(--digi--ui--color--border--success);
+    &--authorized {
+      color: var(--digi--ui--color--border--success);
+    }
+
+    &--unauthorized {
+      color: var(--digi--ui--color--border--error);
+    }
   }
 }

apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.ts

@@ -1,8 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Router } from '@angular/router';
 import { IconType } from '@msfa-enums/icon-type.enum';
+import { Organization } from '@msfa-models/organization.model';
+import { Role } from '@msfa-models/role.model';
 import { User } from '@msfa-models/user.model';
 import { UserService } from '@msfa-services/api/user.service';
-import { Observable } from 'rxjs';
+import { RoleService } from '@msfa-services/role.service';
+import { combineLatest, Observable } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
 
 @Component({
   selector: 'msfa-my-account',
@@ -12,7 +17,27 @@ import { Observable } from 'rxjs';
 })
 export class MyAccountComponent {
   user$: Observable<User> = this.userService.user$;
+  selectedOrganization$: Observable<Organization> = this.userService.selectedOrganization$;
+  organizations$: Observable<Organization[]> = this.userService.organizations$;
+  otherOrganizations$: Observable<Organization[]> = combineLatest([
+    this.organizations$,
+    this.selectedOrganization$,
+  ]).pipe(
+    filter(([organizations, selectedOrganization]) => !!(organizations?.length && selectedOrganization)),
+    map(([organizations, selectedOrganization]) =>
+      organizations.filter(organization => organization.organizationNumber !== selectedOrganization.organizationNumber)
+    )
+  );
+  allRoles: Role[] = this.roleService.allRoles;
   readonly IconType = IconType;
 
-  constructor(private userService: UserService) {}
+  constructor(private userService: UserService, private roleService: RoleService, private router: Router) {}
+
+  userHasRole(userRoles: Role[], currentRole: Role): boolean {
+    return userRoles.some(role => role.type === currentRole.type);
+  }
+
+  loginWithOrganization(organization: Organization): void {
+    this.userService.setSelectedOrganization(organization);
+  }
 }

apps/mina-sidor-fa/src/app/pages/my-account/my-account.module.ts

@@ -4,6 +4,8 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { IconModule } from '@msfa-shared/components/icon/icon.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { OrganizationPickerFormModule } from '@msfa-shared/components/organization-picker-form/organization-picker-form.module';
+import { RolesDialogModule } from '@msfa-shared/components/roles-dialog/roles-dialog.module';
 import { MyAccountComponent } from './my-account.component';
 
 @NgModule({
@@ -15,6 +17,8 @@ import { MyAccountComponent } from './my-account.component';
     LayoutModule,
     IconModule,
     DigiNgSkeletonBaseModule,
+    OrganizationPickerFormModule,
+    RolesDialogModule,
   ],
 })
 export class MyAccountModule {}