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

updated startpage from flex to grid, and other minor changes

Browse Source
This commit is contained in:
Zaid Abed Jaser
2021-04-28 16:59:03 +02:00
parent 0d848d9ef2
commit 9a947d65c7
13 changed files with 279 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.html
View File

@@ -8,8 +8,7 @@
</p> </p>
</digi-typography> </digi-typography>
<form [formGroup]="formGroup" (ngSubmit)="submitForm()"> <form [formGroup]="formGroup" (ngSubmit)="submitForm()">
<div class="create-account__block-ssn">
<div class="create-account__block">
<h2>Personuppgifter</h2> <h2>Personuppgifter</h2>
<div class="create-account__combined-inputs"> <div class="create-account__combined-inputs">
<digi-ng-form-input <digi-ng-form-input
@@ -22,13 +21,13 @@
></digi-ng-form-input> ></digi-ng-form-input>
</div> </div>
<digi-ng-form-input <digi-ng-form-input
class="create-account__input" class="create-account__input"
formControlName="lastName" formControlName="lastName"
afLabel="Efternamn" afLabel="Efternamn"
afInvalidMessage="Efternamn är obligatoriskt" afInvalidMessage="Efternamn är obligatoriskt"
[afDisableValidStyle]="true" [afDisableValidStyle]="true"
[afInvalid]="lastNameControl.invalid && lastNameControl.dirty" [afInvalid]="lastNameControl.invalid && lastNameControl.dirty"
></digi-ng-form-input> ></digi-ng-form-input>
<digi-ng-form-input <digi-ng-form-input
class="create-account__input" class="create-account__input"
formControlName="ssn" formControlName="ssn"
@@ -37,127 +36,82 @@
[afDisableValidStyle]="true" [afDisableValidStyle]="true"
[afInvalid]="ssnControl.invalid && ssnControl.dirty" [afInvalid]="ssnControl.invalid && ssnControl.dirty"
></digi-ng-form-input> ></digi-ng-form-input>
</div>
<div class="create-account__block-service">
<h2>Tjänst</h2> <h2>Tjänst</h2>
<digi-ng-form-select-base [afSelectItems]="list" style="display: block; width: 50%; margin-bottom: 50px;"></digi-ng-form-select-base> <digi-ng-form-select afPlaceholder=" " afLabel="Välj tjänst" formControlName="service" [afSelectItems]="list">
</digi-ng-form-select>
</div>
<div class="create-account__block-permissions">
<h2>Tilldela behörigheter</h2>
<h2 >Tilldela behörigheter</h2> <div class="assign-permissions">
<div class="assign-permissions">
<div class="assign-permissions__child"> <div class="assign-permissions__child">
<h3>Behörighet: administrera behörigheter</h3> <h3>Behörighet: administrera behörigheter</h3>
<digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection" style="margin-left: 20px;"> <digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection">
<p> <p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).
</p>
<a href="#">Tab to me</a> <a href="#">Tab to me</a>
</digi-ng-popover> </digi-ng-popover>
</div> </div>
<div> <div>
<digi-ng-form-checkbox-base <digi-ng-form-checkbox formControlName="permissions" afLabel="Välj administrera behörigheter">
formControlName = "permissions" </digi-ng-form-checkbox>
afLabel="Välj administrera behörigheter" </div>
>
</digi-ng-form-checkbox-base>
</div>
<div class="assign-permissions__child">
<div class="assign-permissions__child"> <h3>Behörighet: ta emot deltagare</h3>
<h3>Behörighet: ta emot deltagare</h3> <digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection">
<digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection" style="margin-left: 20px;"> <p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
<p>
Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).
</p>
<a href="#">Tab to me</a> <a href="#">Tab to me</a>
</digi-ng-popover> </digi-ng-popover>
</div> </div>
<div> <div>
<digi-ng-form-checkbox-base <digi-ng-form-checkbox formControlName="participant" afLabel="Välj ta emot deltagare"></digi-ng-form-checkbox>
afLabel="Välj ta emot deltagare"></digi-ng-form-checkbox-base> </div>
</div>
<div class="assign-permissions__child">
<div class="assign-permissions__child"> <h3>Behörighet: rapportering, planering och information om deltagare</h3>
<h3>Behörighet: rapportering, planering och information om deltagare</h3> <digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection">
<digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection" style="margin-left: 20px;"> <p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
<p>
Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).
</p>
<a href="#">Tab to me</a> <a href="#">Tab to me</a>
</digi-ng-popover> </digi-ng-popover>
</div> </div>
<div> <div>
<digi-ng-form-checkbox-base <digi-ng-form-checkbox
afLabel="Välj rapportering, planering och infomration om deltagare"> formControlName="infoParticipant"
</digi-ng-form-checkbox-base> afLabel="Välj rapportering, planering och infomration om deltagare"
</div> >
</digi-ng-form-checkbox>
</div>
<div class="assign-permissions__child"> <div class="assign-permissions__child">
<h3>Behörighet: administrera ordrar och fakturor</h3> <h3>Behörighet: administrera ordrar och fakturor</h3>
<digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection" style="margin-left: 20px;"> <digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection">
<p> <p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).
</p>
<a href="#">Tab to me</a> <a href="#">Tab to me</a>
</digi-ng-popover> </digi-ng-popover>
</div> </div>
<div> <div>
<digi-ng-form-checkbox-base <digi-ng-form-checkbox formControlName="orderBills" afLabel="Välj administrera ordrar och fakturor">
afLabel="Välj administrera ordrar och fakturor"> </digi-ng-form-checkbox>
</digi-ng-form-checkbox-base> </div>
</div> </div>
</div> </div>
</div>
<!-- <div class="create-account__block"> <div class="create-account__block-address">
<form class="search-address" (ngSubmit)="handleSearchSubmit()">
<h2>utförandeverksamheter</h2>
<digi-form-input-search
<h2>Bemanning av personal</h2> af-label-description="Sök på utförandeverksamheter"
(afOnInput)="handleSearchInput($event)"
<fieldset class="create-account__fieldset"> ></digi-form-input-search>
<legend>Planerad frånvaroperiod</legend> </form>
<div class="create-account__combined-inputs">
<digi-ng-form-datepicker
formControlName="outOfOfficeStart"
afLabel="Från"
[afMinDate]="todaysDate"
></digi-ng-form-datepicker>
<digi-ng-form-datepicker
formControlName="outOfOfficeEnd"
afLabel="Till"
[afMinDate]="todaysDate"
></digi-ng-form-datepicker>
</div>
<digi-button (afOnClick)="addOutOfOfficeDate()">Lägg till</digi-button>
<ul class="create-account__pending-out-of-office-list" *ngIf="pendingOutOfOfficeDates.length">
<li *ngFor="let date of pendingOutOfOfficeDates">
Från {{ date.start | localDate }} till {{ date.end | localDate }}
<digi-button af-variation="secondary" af-size="s" (afOnClick)="removeOutOfOfficeDate(date.id)">
<digi-icon-x slot="icon"></digi-icon-x>
<span>Ta bort</span>
</digi-button>
</li>
</ul>
</fieldset>
</div> </div>
-->
<form class="search-address" (ngSubmit)="handleSearchSubmit()"> <div class="create-account__footer">
<h2>utförandeverksamheter</h2> <digi-button (afOnClick)="handleSearchSubmit()" af-type="reset" af-variation="secondary">Avbryt</digi-button>
<digi-form-input-search
af-label-description="Sök på utförandeverksamheter"
(afOnInput)="handleSearchInput($event)"
></digi-form-input-search>
</form>
<div class="create-account__footer">
<digi-button af-type="reset" af-variation="secondary">Avbryt</digi-button>
<digi-button af-type="submit">Registrera konto</digi-button> <digi-button af-type="submit">Registrera konto</digi-button>
</div> </div>
</form> </form>

37
apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.scss
View File

@@ -1,7 +1,13 @@
@import 'mixins/list'; @import 'mixins/list';
.create-account { .create-account {
&__block { &__block-ssn {
max-width: var(--digi--typography--text--max-width);
}
&__block-service {
max-width: var(--digi--typography--text--max-width);
}
&__block-address {
max-width: var(--digi--typography--text--max-width); max-width: var(--digi--typography--text--max-width);
} }
@@ -57,27 +63,26 @@
} }
} }
.assign-permissions .assign-permissions {
{ &__child {
&__child{ &:first-child {
&:first-child
{
margin-top: 0px; margin-top: 0px;
} }
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 100px; height: 100px;
width: 100%; width: 100%;
align-items: center; align-items: center;
margin-right: 330px; margin-right: 330px;
margin-top: 80px; margin-top: 80px;
} }
} }
.search-address .search-address {
{
margin-top: 80px; margin-top: 80px;
width: 30%; width: 30%;
} }
digi-ng-popover {
margin-left: 20px;
}

37
apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.ts
View File

@@ -17,7 +17,6 @@ import { BehaviorSubject } from 'rxjs';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class CreateAccountComponent { export class CreateAccountComponent {
private _searchValue$ = new BehaviorSubject<string>(''); private _searchValue$ = new BehaviorSubject<string>('');
formGroup: FormGroup; formGroup: FormGroup;
@@ -25,19 +24,18 @@ export class CreateAccountComponent {
list: FormSelectBaseItem[] = [ list: FormSelectBaseItem[] = [
{ {
name:Service.STOM, name: Service.STOM,
value: '1' value: '1',
}, },
{ {
name: Service.KVL, name: Service.KVL,
value: '2' value: '2',
}, },
{ {
name: Service.KROM, name: Service.KROM,
value: '3' value: '3',
}, },
];
]
popoverOrientation: string; popoverOrientation: string;
popoverDirection: string; popoverDirection: string;
@@ -48,39 +46,40 @@ export class CreateAccountComponent {
lastName: this.formBuilder.control('', [RequiredValidator('Efternamn')]), lastName: this.formBuilder.control('', [RequiredValidator('Efternamn')]),
ssn: this.formBuilder.control('', [RequiredValidator('Personnummer'), SocialSecurityNumberValidator()]), ssn: this.formBuilder.control('', [RequiredValidator('Personnummer'), SocialSecurityNumberValidator()]),
staffId: this.formBuilder.control('', [RequiredValidator('Personal-ID')]), staffId: this.formBuilder.control('', [RequiredValidator('Personal-ID')]),
permissions: this.formBuilder.control(true), service: this.formBuilder.control(''),
permissions: this.formBuilder.control(false),
participant: this.formBuilder.control(false),
infoParticipant: this.formBuilder.control(false),
orderBills: this.formBuilder.control(false),
}); });
} }
handleSearchSubmit(): void { handleSearchSubmit(): void {
// skicka searchvalue till en service och filtrera console.log(this.formGroup.value);
// skicka searchvalue till en service och filtrera
} }
handleSearchInput($event: CustomEvent): void { handleSearchInput($event: CustomEvent): void {
this._searchValue$.next($event.detail.target.value); this._searchValue$.next($event.detail.target.value);
} }
get formselectItem(): FormSelectBaseItem[] get formselectItem(): FormSelectBaseItem[] {
{ return [
return [
{ {
name:Service.STOM, name: Service.STOM,
value: '1' value: '1',
}, },
{ {
name: Service.KVL, name: Service.KVL,
value: '2' value: '2',
}, },
{ {
name: Service.KROM, name: Service.KROM,
value: '3' value: '3',
}, },
]; ];
} }
get firstNameControl(): AbstractControl { get firstNameControl(): AbstractControl {
return this.formGroup.get('firstName'); return this.formGroup.get('firstName');
} }

16
apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.module.ts
View File

@@ -7,15 +7,9 @@ import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { LocalDatePipeModule } from '@dafa-shared/pipes/local-date/local-date.module'; import { LocalDatePipeModule } from '@dafa-shared/pipes/local-date/local-date.module';
import { CreateAccountComponent } from './create-account.component'; import { CreateAccountComponent } from './create-account.component';
import {DigiNgFormSelectBaseModule} from '@af/digi-ng/_form/form-select-base'; import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
import {DigiNgPopoverModule} from '@af/digi-ng/_popover/popover'; import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
import {DigiNgFormCheckboxBaseModule} from '@af/digi-ng/_form/form-checkbox-base'; import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
@NgModule({ @NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA], schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -28,9 +22,9 @@ import {DigiNgFormCheckboxBaseModule} from '@af/digi-ng/_form/form-checkbox-base
DigiNgFormInputModule, DigiNgFormInputModule,
DigiNgFormRadiobuttonGroupModule, DigiNgFormRadiobuttonGroupModule,
DigiNgFormDatepickerModule, DigiNgFormDatepickerModule,
DigiNgFormSelectBaseModule, DigiNgFormSelectModule,
DigiNgPopoverModule, DigiNgPopoverModule,
DigiNgFormCheckboxBaseModule DigiNgFormCheckboxModule,
], ],
}) })
export class CreateAccountModule {} export class CreateAccountModule {}

25
apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.html
View File

@@ -7,28 +7,21 @@
leo quis ante porttitor tincidunt. Nam tincidunt imperdiet tortor eu suscipit. Maecenas ut dui est. leo quis ante porttitor tincidunt. Nam tincidunt imperdiet tortor eu suscipit. Maecenas ut dui est.
</p> </p>
<div class="staff__cta-wrapper" > <div class="staff__cta-wrapper">
<digi-ng-link-button afText="Skapa nytt konto" afRoute="/administration/skapa-konto"></digi-ng-link-button> <digi-ng-link-button afText="Skapa nytt konto" afRoute="/administration/skapa-konto"></digi-ng-link-button>
</div> </div>
<h3>Personallista</h3> <h3>Personallista</h3>
<hr style="border: 1px solid #00005a;"> <hr />
<div class="staff__search-wrapper"> <form class="staff__search-wrapper" (ngSubmit)="handleSearchSubmit()">
<div class="staff__search-form"> <digi-form-input-search
<digi-form-input af-label="Sök kunder"
af-label-description="Sök på namn" af-label-description="Sök på namn eller ärendenummer"
(afOnInput)="handleSearchInput($event)" (afOnInput)="handleSearchInput($event)"
[afSize]="size" ></digi-form-input-search>
></digi-form-input> </form>
</div>
<div class="staff__search-button">
<digi-button class="search-address" (afOnClick)="handleSearchSubmit()">
Sök </digi-button >
</div>
</div>
<dafa-staff-list <dafa-staff-list
*ngIf="filteredStaff$ | async as staff; else loadingRef" *ngIf="filteredStaff$ | async as staff; else loadingRef"
[staff]="staff" [staff]="staff"

23
apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.scss
View File

@@ -1,10 +1,9 @@
@import 'variables/gutters';
.staff { .staff {
text-decoration: none; text-decoration: none;
&__cta-wrapper { &__cta-wrapper {
margin-top: var(--digi--layout--gutter); margin-top: var(--digi--layout--gutter);
} }
&__link { &__link {
@@ -12,23 +11,13 @@
align-items: center; align-items: center;
gap: var(--digi--layout--gutter--s); gap: var(--digi--layout--gutter--s);
} }
&__search-wrapper &__search-wrapper {
{
display: flex; display: flex;
}
&__search-form
{
max-width: var(--digi--typography--text--max-width); max-width: var(--digi--typography--text--max-width);
margin-top: $digi--layout--gutter--l;
margin-bottom: $digi--layout--gutter--xl;
} }
&__search-button hr {
{ border: 1px solid #00005a;
flex-direction: column;
margin-top: 46px;
} }
} }

7
apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.ts
View File

@@ -1,4 +1,3 @@
import { FormInputSize } from '@af/digi-ng/_form/form-input/form-input-size.enum';
import { ChangeDetectionStrategy, Component } from '@angular/core'; import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IconType } from '@dafa-enums/icon-type.enum'; import { IconType } from '@dafa-enums/icon-type.enum';
import { SortBy } from '@dafa-models/sort-by.model'; import { SortBy } from '@dafa-models/sort-by.model';
@@ -18,8 +17,6 @@ export class StaffComponent {
staffSortBy$: Observable<SortBy | null> = this.staffService.staffSortBy$; staffSortBy$: Observable<SortBy | null> = this.staffService.staffSortBy$;
iconType = IconType; iconType = IconType;
size: FormInputSize.M;
constructor(private staffService: StaffService) {} constructor(private staffService: StaffService) {}
get searchValue(): string { get searchValue(): string {
@@ -27,7 +24,7 @@ export class StaffComponent {
} }
handleSearchSubmit(): void { handleSearchSubmit(): void {
this.staffService.setSearchFilter(this.searchValue); this.staffService.setSearchFilter(this.searchValue);
} }
handleSearchInput($event: CustomEvent): void { handleSearchInput($event: CustomEvent): void {
@@ -37,6 +34,4 @@ export class StaffComponent {
handleStaffSort(key: keyof Staff): void { handleStaffSort(key: keyof Staff): void {
this.staffService.setStaffSortKey(key); this.staffService.setStaffSortKey(key);
} }
} }

8
apps/dafa-web/src/app/pages/administration/pages/staff/staff.module.ts
View File

@@ -5,8 +5,8 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { StaffListModule } from './components/staff-list/staff-list.module'; import { StaffListModule } from './components/staff-list/staff-list.module';
import { StaffComponent } from './staff.component'; import { StaffComponent } from './staff.component';
import {DigiNgLinkButtonModule} from '@af/digi-ng/_link/link-button'; import { DigiNgLinkButtonModule } from '@af/digi-ng/_link/link-button';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({ @NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA], schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -17,7 +17,9 @@ import {DigiNgLinkButtonModule} from '@af/digi-ng/_link/link-button';
DigiNgLinkInternalModule, DigiNgLinkInternalModule,
DigiNgSkeletonBaseModule, DigiNgSkeletonBaseModule,
StaffListModule, StaffListModule,
DigiNgLinkButtonModule DigiNgLinkButtonModule,
ReactiveFormsModule,
FormsModule,
], ],
}) })
export class StaffModule {} export class StaffModule {}

119
apps/dafa-web/src/app/pages/start/start.component.html
View File

@@ -1,48 +1,87 @@
<section class="start"> <section class="start">
<digi-typography>
<h1>Välkommen till DAFA 2.0</h1>
<p>Här finner du de senaste nyheterna om uppdateringar, notiser och mer.</p>
</digi-typography>
<div class="start__wrapper">
<div class="start__item-b">
<digi-ng-card
afHeading="Notiser"
[afHeadingLevel]="afHeadingLevel"
afLinkText="Deltagare"
afLinkHref="/mina-deltagare"
[afCardVariation]="afCardVariation"
>
<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-card>
</div>
<div> <div class="start__item-c">
<h1>Välkommen till DAFA 2.0</h1> <digi-ng-notification-alert
<p>Här finner du de senaste nyheterna om uppdateringar, notiser och mer.</p> [afVariation]="variation"
</div> [afSize]="notificationAlertSize"
afHeading="Viktig information"
<br> [afHeadingLevel]="afHeading"
>
<div class="start__wrapper"> <p>Large alert! Check the knobs section and play around!</p>
</digi-ng-notification-alert>
<div class="start__card-info"> <div class="start__item-c-alert">
<digi-ng-notification-alert
<div> [afVariation]="variation"
<digi-ng-card afHeading="Notiser" [afHeadingLevel]="afHeadingLevel" afLinkText="Deltagare" afLinkHref="/mina-deltagare" [afCardVariation]="afCardVariation"> [afSize]="notificationAlertSize"
<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> afCloseable="true"
</digi-ng-card> (afOnClose)="closed()"
afHeading="Viktig information"
</div> [afHeadingLevel]="afHeading"
<div class="start__card-info-notice"> >
<digi-ng-form-error-list afHeading="Viktig Information"> <p>Large alert! Check the knobs section and play around!</p>
</digi-ng-notification-alert>
</digi-ng-form-error-list> </div>
<br> </div>
<digi-ng-form-error-list afHeading="Viktig Information"> <div class="start__item-d">
<digi-ng-card afHeading="Statistik" [afHeadingLevel]="afHeadingLevel" [afCardVariation]="afCardVariation">
</digi-ng-form-error-list> <p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
</div> </digi-ng-card>
</div>
</div> <!--end of carf-info-->
<div class="start__statistics">
<div style="width: 100%; max-height: 100%;">
<digi-ng-card afHeading="Statistik" [afHeadingLevel]="afHeadingLevel" [afCardVariation]="afCardVariation">
<p><br><br><br><br><br><br><br><br><br><br><br><br>
</p>
</digi-ng-card>
</div> </div>
</div> <!-- <digi-typography>
<h1>Välkommen till DAFA 2.0</h1>
</div> <!--end of wrapper--> <p>Här finner du de senaste nyheterna om uppdateringar, notiser och mer.</p>
</digi-typography>
<div class="start__wrapper">
<div class="start__card-info">
<div>
<digi-ng-card
afHeading="Notiser"
[afHeadingLevel]="afHeadingLevel"
afLinkText="Deltagare"
afLinkHref="/mina-deltagare"
[afCardVariation]="afCardVariation"
>
<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-card>
</div>
<div class="start__card-info-notice">
<digi-ng-form-error-list afHeading="Viktig Information"> </digi-ng-form-error-list>
<digi-ng-form-error-list afHeading="Viktig Information"> </digi-ng-form-error-list>
</div>
</div>
<div class="start__statistics">
<div style="width: 100%; max-height: 100%">
<digi-ng-card afHeading="Statistik" [afHeadingLevel]="afHeadingLevel" [afCardVariation]="afCardVariation">
<p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
</digi-ng-card>
</div>
</div>
</div> -->
</section> </section>

55
apps/dafa-web/src/app/pages/start/start.component.scss
View File

@@ -1,30 +1,27 @@
.start .start {
{ &__wrapper {
&__wrapper display: grid;
{ grid-template-rows: auto;
display: flex; grid-template-areas:
flex-direction: column; 'header header '
'main sidebar'
'footer footer ';
} grid-gap: 50px;
}
&__card-info &__item-a {
{ grid-area: header;
}
flex-direction: row; &__item-b {
display: flex; grid-area: main;
}
&__item-c {
grid-area: sidebar;
} }
&__card-info-notice{ &__item-c-alert {
margin-left: 5%; visibility: visible;
} margin-top: 30px;
&__statistics{ }
display: flex; &__item-d {
flex-direction: row; grid-area: footer;
margin-top: 5%; }
}
} }

23
apps/dafa-web/src/app/pages/start/start.component.ts
View File

@@ -1,4 +1,9 @@
import { CardHeadingLevel, CardVariation } from '@af/digi-ng/_card/card'; import { CardHeadingLevel, CardVariation } from '@af/digi-ng/_card/card';
import {
NotificationAlertHeadingLevel,
NotificationAlertSize,
NotificationAlertVariation,
} from '@af/digi-ng/_notification/notification-alert';
import { ChangeDetectionStrategy, Component } from '@angular/core'; import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({ @Component({
@@ -8,12 +13,22 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class StartComponent { export class StartComponent {
afHeadingLevel: CardHeadingLevel = CardHeadingLevel.H3;
afCardVariation: CardVariation = CardVariation.INFO;
afHeadingLevel : CardHeadingLevel = CardHeadingLevel.H3; variation: NotificationAlertVariation = NotificationAlertVariation.INFO;
afCardVariation: CardVariation = CardVariation.INFO
notificationAlertSize: NotificationAlertSize = NotificationAlertSize.M;
afHeading: NotificationAlertHeadingLevel = NotificationAlertHeadingLevel.H3;
closed() {
var open = document.getElementsByClassName('start__item-c-alert');
for (let i = 0; i < open.length; i++) {
const slide = open[i] as HTMLElement;
if (slide.style.visibility == 'hidden') {
slide.style.visibility = 'visible';
} else slide.style.visibility = 'hidden';
}
}
} }

23
apps/dafa-web/src/app/pages/start/start.module.ts
View File

@@ -1,19 +1,20 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { StartComponent } from './start.component'; import { StartComponent } from './start.component';
import {DigiNgCardModule} from '@af/digi-ng/_card/card'; import { DigiNgCardModule } from '@af/digi-ng/_card/card';
import {DigiNgFormErrorListModule} from '@af/digi-ng/_form/form-error-list'; import { DigiNgFormErrorListModule } from '@af/digi-ng/_form/form-error-list';
import { DigiNgNotificationAlertModule } from '@af/digi-ng/_notification/notification-alert';
@NgModule({ @NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [StartComponent], declarations: [StartComponent],
imports: [CommonModule, RouterModule.forChild([{ path: '', component: StartComponent }]), imports: [
DigiNgCardModule, CommonModule,
DigiNgFormErrorListModule RouterModule.forChild([{ path: '', component: StartComponent }]),
], DigiNgCardModule,
DigiNgFormErrorListModule,
DigiNgNotificationAlertModule,
],
}) })
export class StartModule {} export class StartModule {}

2
package.json
View File

@@ -4,7 +4,7 @@
"license": "MIT", "license": "MIT",
"repository": "https://bitbucket.arbetsformedlingen.se/projects/TEA/repos/dafa-web-monorepo", "repository": "https://bitbucket.arbetsformedlingen.se/projects/TEA/repos/dafa-web-monorepo",
"engines": { "engines": {
"node": "16.0.0" "node": "14.16.1"
}, },
"scripts": { "scripts": {
"ng": "nx", "ng": "nx",