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

fix(layout): Implemented loader in multiple places and added organization picker to default layout. (TV-758)

Browse Source 
Squashed commit of the following:

commit bf4f3ea3ce6a612b03be078917203cc7f7c4f2f7
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Tue Oct 12 20:42:05 2021 +0200

    Implemented loader in mulitple places and added organization-picker to default layout
This commit is contained in:
Erik Tiekstra
2021-10-13 11:03:40 +02:00
parent 7ebdf104d1
commit ccf3eb5458
10 changed files with 84 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.component.html
View File

@@ -1,7 +1,7 @@
<msfa-layout> <msfa-layout>
<digi-typography> <digi-typography>
<section class="deltagare-card" *ngIf="activeTab$ | async as activeTab"> <section class="deltagare-card" *ngIf="activeTab$ | async as activeTab">
<ng-container *ngIf="contactInformation$ | async as contactInformation"> <ng-container *ngIf="contactInformation$ | async as contactInformation; else skeletonRef">
<header class="deltagare-card__header"> <header class="deltagare-card__header">
<msfa-back-link [route]="['/deltagare']">Tillbaka till deltagarlistan</msfa-back-link> <msfa-back-link [route]="['/deltagare']">Tillbaka till deltagarlistan</msfa-back-link>
<h1>{{contactInformation.fullName }}</h1> <h1>{{contactInformation.fullName }}</h1>
@@ -79,6 +79,10 @@
</digi-typography> </digi-typography>
</msfa-layout> </msfa-layout>
<ng-template #skeletonRef>
<digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagarinformation"></digi-ng-skeleton-base>
</ng-template>
<ng-template #loadingRef> <ng-template #loadingRef>
<msfa-loader type="padded"></msfa-loader> <msfa-loader type="padded"></msfa-loader>
</ng-template> </ng-template>

4
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.module.ts
View File

@@ -2,6 +2,7 @@ import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
import { DigiNgLayoutExpansionPanelModule } from '@af/digi-ng/_layout/layout-expansion-panel'; import { DigiNgLayoutExpansionPanelModule } from '@af/digi-ng/_layout/layout-expansion-panel';
import { DigiNgLinkButtonModule } from '@af/digi-ng/_link/link-button'; import { DigiNgLinkButtonModule } from '@af/digi-ng/_link/link-button';
import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover'; import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
@@ -13,9 +14,9 @@ import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
import { LoaderModule } from '@msfa-shared/components/loader/loader.module'; import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
import { DeltagareTabExperiencesComponent } from './components/deltagare-tab-experiences/deltagare-tab-experiences.component'; import { DeltagareTabExperiencesComponent } from './components/deltagare-tab-experiences/deltagare-tab-experiences.component';
import { DeltagareTabPersonalInformationComponent } from './components/deltagare-tab-personal-information/deltagare-tab-personal-information.component'; import { DeltagareTabPersonalInformationComponent } from './components/deltagare-tab-personal-information/deltagare-tab-personal-information.component';
import { ReportsListModule } from './components/deltagare-tab-reports/components/reports-list/reports-list.module';
import { DeltagareTabReportsComponent } from './components/deltagare-tab-reports/deltagare-tab-reports.component'; import { DeltagareTabReportsComponent } from './components/deltagare-tab-reports/deltagare-tab-reports.component';
import { DeltagareTabSensitiveInformationComponent } from './components/deltagare-tab-sensitive-information/deltagare-tab-sensitive-information.component'; import { DeltagareTabSensitiveInformationComponent } from './components/deltagare-tab-sensitive-information/deltagare-tab-sensitive-information.component';
import { ReportsListModule } from './components/deltagare-tab-reports/components/reports-list/reports-list.module';
import { DeltagareCardComponent } from './deltagare-card.component'; import { DeltagareCardComponent } from './deltagare-card.component';
import { DeltagareCardService } from './deltagare-card.service'; import { DeltagareCardService } from './deltagare-card.service';
@@ -42,6 +43,7 @@ import { DeltagareCardService } from './deltagare-card.service';
DigiNgPopoverModule, DigiNgPopoverModule,
DigiNgLinkButtonModule, DigiNgLinkButtonModule,
DigiNgFormSelectModule, DigiNgFormSelectModule,
DigiNgSkeletonBaseModule,
], ],
providers: [DeltagareCardService], providers: [DeltagareCardService],
exports: [DeltagareCardComponent], exports: [DeltagareCardComponent],

2
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/deltagare-list.component.html
View File

@@ -32,7 +32,7 @@
</msfa-layout> </msfa-layout>
<ng-template #loadingRef> <ng-template #loadingRef>
<digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagare"></digi-ng-skeleton-base> <digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagarlista"></digi-ng-skeleton-base>
</ng-template> </ng-template>
<ng-template #noDeltagare> <ng-template #noDeltagare>

32
apps/mina-sidor-fa/src/app/pages/organization-picker/organization-picker.component.html
View File

@@ -1,14 +1,20 @@
<div class="organization-picker"> <msfa-layout>
<digi-typography> <ng-container *ngIf="organizations$ | async as organizations; else loadingRef">
<h1>Välj organisation</h1> <digi-typography>
<p>Du tillhör flera organisationer. Välj vilken organisation du vill arbeta med idag.</p> <section class="organization-picker" *ngIf="organizations.length !== 1">
</digi-typography> <header>
<ng-container *ngIf="organizations$ | async as organizations"> <h1>Välj organisation</h1>
<msfa-organization-picker-form <p>Du tillhör flera organisationer. Välj vilken organisation du vill arbeta med idag.</p>
class="organization-picker__form" </header>
*ngIf="organizations.length !== 1" <msfa-organization-picker-form
[organizations]="organizations" [organizations]="organizations"
(selectedOrganizationChanged)="loginWithOrganization($event)" (selectedOrganizationChanged)="loginWithOrganization($event)"
></msfa-organization-picker-form> ></msfa-organization-picker-form>
</section>
</digi-typography>
</ng-container> </ng-container>
</div> </msfa-layout>
<ng-template #loadingRef>
<msfa-loader type="full-blank-screen"></msfa-loader>
</ng-template>

11
apps/mina-sidor-fa/src/app/pages/organization-picker/organization-picker.component.scss
View File

@@ -1,11 +1,8 @@
@import 'variables/gutters'; @import 'variables/gutters';
.organization-picker { .organization-picker {
margin: 6rem 6rem; max-width: var(--digi--typography--text--max-width);
max-width: 560px; display: flex;
flex-direction: column;
&__form { gap: $digi--layout--gutter--xl;
display: block;
margin-top: $digi--layout--gutter--xl;
}
} }

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

@@ -1,12 +1,14 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
import { OrganizationPickerFormModule } from '@msfa-shared/components/organization-picker-form/organization-picker-form.module'; import { OrganizationPickerFormModule } from '@msfa-shared/components/organization-picker-form/organization-picker-form.module';
import { OrganizationPickerRoutingModule } from './organization-picker-routing.module'; import { OrganizationPickerRoutingModule } from './organization-picker-routing.module';
import { OrganizationPickerComponent } from './organization-picker.component'; import { OrganizationPickerComponent } from './organization-picker.component';
@NgModule({ @NgModule({
declarations: [OrganizationPickerComponent], declarations: [OrganizationPickerComponent],
imports: [CommonModule, OrganizationPickerRoutingModule, OrganizationPickerFormModule], imports: [CommonModule, LayoutModule, OrganizationPickerRoutingModule, OrganizationPickerFormModule, LoaderModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA], schemas: [CUSTOM_ELEMENTS_SCHEMA],
}) })
export class OrganizationPickerModule {} export class OrganizationPickerModule {}

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

@@ -1,38 +1,40 @@
<msfa-layout [showBreadCrumbs]="false" *ngIf="userRoles$ | async as userRoles; else loadingRef"> <msfa-layout [showBreadCrumbs]="false">
<digi-typography> <ng-container *ngIf="userRoles$ | async as userRoles; else loadingRef">
<section class="start"> <digi-typography>
<header class="start__header"> <section class="start">
<div class="start__image-wrapper"> <header class="start__header">
<digi-media-image <div class="start__image-wrapper">
af-src="/assets/images/start_1280w.jpg" <digi-media-image
af-srcset=" af-src="/assets/images/start_1280w.jpg"
assets/images/start_600w.jpg 800w, af-srcset="
assets/images/start_800w.jpg 1050w, assets/images/start_600w.jpg 800w,
assets/images/start_1000w.jpg 1200w assets/images/start_800w.jpg 1050w,
" assets/images/start_1000w.jpg 1200w
af-alt="En kvinna som tittar i kameran" "
af-width="1000" af-alt="En kvinna som tittar i kameran"
af-height="465" af-width="1000"
></digi-media-image> af-height="465"
<h1 class="start__heading">Välkommen {{ userFullName$ | async }}</h1> ></digi-media-image>
</div> <h1 class="start__heading">Välkommen {{ userFullName$ | async }}</h1>
<ng-container *ngIf="isAuthorizedUser(userRoles); else unauthorizedRef"> </div>
<p> <ng-container *ngIf="isAuthorizedUser(userRoles); else unauthorizedRef">
Detta är Arbetsförmedlingens nya plattform för fristående aktörer. Här kommer du bland annat kunna sköta den <p>
dagliga kontakten med arbetssökande och Arbetsförmedlingen. Vi kommer successivt att implementera nytt Detta är Arbetsförmedlingens nya plattform för fristående aktörer. Här kommer du bland annat kunna sköta
innehåll, förbättringar och uppdateringar. den dagliga kontakten med arbetssökande och Arbetsförmedlingen. Vi kommer successivt att implementera nytt
</p> innehåll, förbättringar och uppdateringar.
<p>Målet är helt enkelt att underlätta ditt dagliga arbete!</p> </p>
</ng-container> <p>Målet är helt enkelt att underlätta ditt dagliga arbete!</p>
<ng-template #unauthorizedRef> </ng-container>
<p> <ng-template #unauthorizedRef>
Det verkar som att du inte har fått din behörighet ännu, kontakta din administratör för att få tillgång till <p>
tjänsten. Det verkar som att du inte har fått din behörighet ännu, kontakta din administratör för att få tillgång
</p> till tjänsten.
</ng-template> </p>
</header> </ng-template>
</section> </header>
</digi-typography> </section>
</digi-typography>
</ng-container>
</msfa-layout> </msfa-layout>
<ng-template #loadingRef> <ng-template #loadingRef>

4
apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.scss
View File

@@ -25,6 +25,10 @@
@include msfa__backdrop($msfa__z-index-backdrop); @include msfa__backdrop($msfa__z-index-backdrop);
} }
&--full-blank-screen {
@include msfa__backdrop($msfa__z-index-backdrop, true, true);
}
&__spinner { &__spinner {
display: inline-flex; display: inline-flex;
animation: spinning 1s linear infinite; animation: spinning 1s linear infinite;

1
apps/mina-sidor-fa/src/app/shared/enums/loader-type.enum.ts
View File

@@ -1,5 +1,6 @@
export enum LoaderType { export enum LoaderType {
FULL_SCREEN = 'fullscreen', FULL_SCREEN = 'fullscreen',
FULL_BLANK_SCREEN = 'full-blank-screen',
ABSOLUTE = 'absolute', ABSOLUTE = 'absolute',
PADDED = 'padded', PADDED = 'padded',
} }

9
apps/mina-sidor-fa/src/styles/mixins/_backdrop.scss
View File

@@ -1,12 +1,17 @@
@import 'variables/z-index'; @import 'variables/z-index';
@mixin msfa__backdrop($zIndex: $msfa__z-index-default, $fullScreen: true) { @mixin msfa__backdrop($zIndex: $msfa__z-index-default, $fullScreen: true, $opaqueBackground: false) {
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: $zIndex; z-index: $zIndex;
background-color: rgba(255, 255, 255, 0.4);
@if $opaqueBackground {
background-color: var(--digi--ui--color--background);
} @else {
background-color: rgba(255, 255, 255, 0.4);
}
@if $fullScreen { @if $fullScreen {
position: fixed; position: fixed;