updated startpage from flex to grid, and other minor changes
This commit is contained in:
@@ -8,8 +8,7 @@
|
||||
</p>
|
||||
</digi-typography>
|
||||
<form [formGroup]="formGroup" (ngSubmit)="submitForm()">
|
||||
|
||||
<div class="create-account__block">
|
||||
<div class="create-account__block-ssn">
|
||||
<h2>Personuppgifter</h2>
|
||||
<div class="create-account__combined-inputs">
|
||||
<digi-ng-form-input
|
||||
@@ -22,13 +21,13 @@
|
||||
></digi-ng-form-input>
|
||||
</div>
|
||||
<digi-ng-form-input
|
||||
class="create-account__input"
|
||||
formControlName="lastName"
|
||||
afLabel="Efternamn"
|
||||
afInvalidMessage="Efternamn är obligatoriskt"
|
||||
[afDisableValidStyle]="true"
|
||||
[afInvalid]="lastNameControl.invalid && lastNameControl.dirty"
|
||||
></digi-ng-form-input>
|
||||
class="create-account__input"
|
||||
formControlName="lastName"
|
||||
afLabel="Efternamn"
|
||||
afInvalidMessage="Efternamn är obligatoriskt"
|
||||
[afDisableValidStyle]="true"
|
||||
[afInvalid]="lastNameControl.invalid && lastNameControl.dirty"
|
||||
></digi-ng-form-input>
|
||||
<digi-ng-form-input
|
||||
class="create-account__input"
|
||||
formControlName="ssn"
|
||||
@@ -37,127 +36,82 @@
|
||||
[afDisableValidStyle]="true"
|
||||
[afInvalid]="ssnControl.invalid && ssnControl.dirty"
|
||||
></digi-ng-form-input>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="create-account__block-service">
|
||||
<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>
|
||||
|
||||
|
||||
<h2 >Tilldela behörigheter</h2>
|
||||
<div class="create-account__block-permissions">
|
||||
<h2>Tilldela behörigheter</h2>
|
||||
|
||||
<div class="assign-permissions">
|
||||
<div class="assign-permissions">
|
||||
<div class="assign-permissions__child">
|
||||
<h3>Behörighet: administrera behörigheter</h3>
|
||||
<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>
|
||||
<h3>Behörighet: administrera behörigheter</h3>
|
||||
<digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection">
|
||||
<p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
|
||||
<a href="#">Tab to me</a>
|
||||
</digi-ng-popover>
|
||||
</div>
|
||||
<div>
|
||||
<digi-ng-form-checkbox-base
|
||||
formControlName = "permissions"
|
||||
afLabel="Välj administrera behörigheter"
|
||||
>
|
||||
</digi-ng-form-checkbox-base>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="assign-permissions__child">
|
||||
<h3>Behörighet: ta emot deltagare</h3>
|
||||
<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>
|
||||
<a href="#">Tab to me</a>
|
||||
</digi-ng-popover>
|
||||
</div>
|
||||
<div>
|
||||
<digi-ng-form-checkbox-base
|
||||
afLabel="Välj ta emot deltagare"></digi-ng-form-checkbox-base>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="assign-permissions__child">
|
||||
<h3>Behörighet: rapportering, planering och information om deltagare</h3>
|
||||
<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>
|
||||
<a href="#">Tab to me</a>
|
||||
</digi-ng-popover>
|
||||
</div>
|
||||
<div>
|
||||
<digi-ng-form-checkbox-base
|
||||
afLabel="Välj rapportering, planering och infomration om deltagare">
|
||||
</digi-ng-form-checkbox-base>
|
||||
</div>
|
||||
|
||||
<div class="assign-permissions__child">
|
||||
<h3>Behörighet: administrera ordrar och fakturor</h3>
|
||||
<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>
|
||||
<a href="#">Tab to me</a>
|
||||
</digi-ng-popover>
|
||||
</div>
|
||||
<div>
|
||||
<digi-ng-form-checkbox-base
|
||||
afLabel="Välj administrera ordrar och fakturor">
|
||||
</digi-ng-form-checkbox-base>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="create-account__block">
|
||||
|
||||
|
||||
|
||||
<h2>Bemanning av personal</h2>
|
||||
|
||||
<fieldset class="create-account__fieldset">
|
||||
<legend>Planerad frånvaroperiod</legend>
|
||||
<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>
|
||||
<div>
|
||||
<digi-ng-form-checkbox formControlName="permissions" afLabel="Välj administrera behörigheter">
|
||||
</digi-ng-form-checkbox>
|
||||
</div>
|
||||
|
||||
<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 class="assign-permissions__child">
|
||||
<h3>Behörighet: ta emot deltagare</h3>
|
||||
<digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection">
|
||||
<p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
|
||||
<a href="#">Tab to me</a>
|
||||
</digi-ng-popover>
|
||||
</div>
|
||||
<div>
|
||||
<digi-ng-form-checkbox formControlName="participant" afLabel="Välj ta emot deltagare"></digi-ng-form-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="assign-permissions__child">
|
||||
<h3>Behörighet: rapportering, planering och information om deltagare</h3>
|
||||
<digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection">
|
||||
<p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
|
||||
<a href="#">Tab to me</a>
|
||||
</digi-ng-popover>
|
||||
</div>
|
||||
<div>
|
||||
<digi-ng-form-checkbox
|
||||
formControlName="infoParticipant"
|
||||
afLabel="Välj rapportering, planering och infomration om deltagare"
|
||||
>
|
||||
</digi-ng-form-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="assign-permissions__child">
|
||||
<h3>Behörighet: administrera ordrar och fakturor</h3>
|
||||
<digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection">
|
||||
<p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
|
||||
<a href="#">Tab to me</a>
|
||||
</digi-ng-popover>
|
||||
</div>
|
||||
<div>
|
||||
<digi-ng-form-checkbox formControlName="orderBills" afLabel="Välj administrera ordrar och fakturor">
|
||||
</digi-ng-form-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<form class="search-address" (ngSubmit)="handleSearchSubmit()">
|
||||
<h2>utförandeverksamheter</h2>
|
||||
<digi-form-input-search
|
||||
af-label-description="Sök på utförandeverksamheter"
|
||||
(afOnInput)="handleSearchInput($event)"
|
||||
></digi-form-input-search>
|
||||
</form>
|
||||
|
||||
<div class="create-account__block-address">
|
||||
<form class="search-address" (ngSubmit)="handleSearchSubmit()">
|
||||
<h2>utförandeverksamheter</h2>
|
||||
<digi-form-input-search
|
||||
af-label-description="Sök på utförandeverksamheter"
|
||||
(afOnInput)="handleSearchInput($event)"
|
||||
></digi-form-input-search>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="create-account__footer">
|
||||
<digi-button af-type="reset" af-variation="secondary">Avbryt</digi-button>
|
||||
<div class="create-account__footer">
|
||||
<digi-button (afOnClick)="handleSearchSubmit()" af-type="reset" af-variation="secondary">Avbryt</digi-button>
|
||||
<digi-button af-type="submit">Registrera konto</digi-button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,7 +1,13 @@
|
||||
@import 'mixins/list';
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
@@ -57,27 +63,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
.assign-permissions
|
||||
{
|
||||
&__child{
|
||||
&:first-child
|
||||
{
|
||||
.assign-permissions {
|
||||
&__child {
|
||||
&:first-child {
|
||||
margin-top: 0px;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
margin-right: 330px;
|
||||
margin-top: 80px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
margin-right: 330px;
|
||||
margin-top: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-address
|
||||
{
|
||||
.search-address {
|
||||
margin-top: 80px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
|
||||
digi-ng-popover {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
@@ -17,27 +17,25 @@ import { BehaviorSubject } from 'rxjs';
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class CreateAccountComponent {
|
||||
|
||||
private _searchValue$ = new BehaviorSubject<string>('');
|
||||
|
||||
formGroup: FormGroup;
|
||||
todaysDate = new Date();
|
||||
|
||||
|
||||
list: FormSelectBaseItem[] = [
|
||||
{
|
||||
name:Service.STOM,
|
||||
value: '1'
|
||||
name: Service.STOM,
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
name: Service.KVL,
|
||||
value: '2'
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
name: Service.KROM,
|
||||
value: '3'
|
||||
value: '3',
|
||||
},
|
||||
|
||||
]
|
||||
];
|
||||
|
||||
popoverOrientation: string;
|
||||
popoverDirection: string;
|
||||
@@ -48,39 +46,40 @@ export class CreateAccountComponent {
|
||||
lastName: this.formBuilder.control('', [RequiredValidator('Efternamn')]),
|
||||
ssn: this.formBuilder.control('', [RequiredValidator('Personnummer'), SocialSecurityNumberValidator()]),
|
||||
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 {
|
||||
// skicka searchvalue till en service och filtrera
|
||||
console.log(this.formGroup.value);
|
||||
// skicka searchvalue till en service och filtrera
|
||||
}
|
||||
|
||||
handleSearchInput($event: CustomEvent): void {
|
||||
this._searchValue$.next($event.detail.target.value);
|
||||
}
|
||||
|
||||
get formselectItem(): FormSelectBaseItem[]
|
||||
{
|
||||
return [
|
||||
|
||||
get formselectItem(): FormSelectBaseItem[] {
|
||||
return [
|
||||
{
|
||||
name:Service.STOM,
|
||||
value: '1'
|
||||
name: Service.STOM,
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
name: Service.KVL,
|
||||
value: '2'
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
name: Service.KROM,
|
||||
value: '3'
|
||||
value: '3',
|
||||
},
|
||||
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
get firstNameControl(): AbstractControl {
|
||||
return this.formGroup.get('firstName');
|
||||
}
|
||||
|
||||
@@ -7,15 +7,9 @@ import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { LocalDatePipeModule } from '@dafa-shared/pipes/local-date/local-date.module';
|
||||
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 {DigiNgFormCheckboxBaseModule} from '@af/digi-ng/_form/form-checkbox-base';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
|
||||
import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
|
||||
import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
|
||||
|
||||
@NgModule({
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
@@ -28,9 +22,9 @@ import {DigiNgFormCheckboxBaseModule} from '@af/digi-ng/_form/form-checkbox-base
|
||||
DigiNgFormInputModule,
|
||||
DigiNgFormRadiobuttonGroupModule,
|
||||
DigiNgFormDatepickerModule,
|
||||
DigiNgFormSelectBaseModule,
|
||||
DigiNgFormSelectModule,
|
||||
DigiNgPopoverModule,
|
||||
DigiNgFormCheckboxBaseModule
|
||||
DigiNgFormCheckboxModule,
|
||||
],
|
||||
})
|
||||
export class CreateAccountModule {}
|
||||
|
||||
@@ -7,28 +7,21 @@
|
||||
leo quis ante porttitor tincidunt. Nam tincidunt imperdiet tortor eu suscipit. Maecenas ut dui est.
|
||||
</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>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h3>Personallista</h3>
|
||||
<hr style="border: 1px solid #00005a;">
|
||||
<hr />
|
||||
|
||||
<div class="staff__search-wrapper">
|
||||
<div class="staff__search-form">
|
||||
<digi-form-input
|
||||
af-label-description="Sök på namn"
|
||||
<form class="staff__search-wrapper" (ngSubmit)="handleSearchSubmit()">
|
||||
<digi-form-input-search
|
||||
af-label="Sök kunder"
|
||||
af-label-description="Sök på namn eller ärendenummer"
|
||||
(afOnInput)="handleSearchInput($event)"
|
||||
[afSize]="size"
|
||||
></digi-form-input>
|
||||
</div>
|
||||
<div class="staff__search-button">
|
||||
<digi-button class="search-address" (afOnClick)="handleSearchSubmit()">
|
||||
Sök </digi-button >
|
||||
</div>
|
||||
</div>
|
||||
></digi-form-input-search>
|
||||
</form>
|
||||
|
||||
<dafa-staff-list
|
||||
*ngIf="filteredStaff$ | async as staff; else loadingRef"
|
||||
[staff]="staff"
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
.staff {
|
||||
@import 'variables/gutters';
|
||||
.staff {
|
||||
text-decoration: none;
|
||||
|
||||
|
||||
&__cta-wrapper {
|
||||
margin-top: var(--digi--layout--gutter);
|
||||
|
||||
|
||||
}
|
||||
|
||||
&__link {
|
||||
@@ -12,23 +11,13 @@
|
||||
align-items: center;
|
||||
gap: var(--digi--layout--gutter--s);
|
||||
}
|
||||
&__search-wrapper
|
||||
{
|
||||
&__search-wrapper {
|
||||
display: flex;
|
||||
|
||||
|
||||
}
|
||||
&__search-form
|
||||
{
|
||||
|
||||
max-width: var(--digi--typography--text--max-width);
|
||||
margin-top: $digi--layout--gutter--l;
|
||||
margin-bottom: $digi--layout--gutter--xl;
|
||||
}
|
||||
&__search-button
|
||||
{
|
||||
flex-direction: column;
|
||||
|
||||
margin-top: 46px;
|
||||
|
||||
|
||||
hr {
|
||||
border: 1px solid #00005a;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { FormInputSize } from '@af/digi-ng/_form/form-input/form-input-size.enum';
|
||||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||
import { IconType } from '@dafa-enums/icon-type.enum';
|
||||
import { SortBy } from '@dafa-models/sort-by.model';
|
||||
@@ -18,8 +17,6 @@ export class StaffComponent {
|
||||
staffSortBy$: Observable<SortBy | null> = this.staffService.staffSortBy$;
|
||||
iconType = IconType;
|
||||
|
||||
size: FormInputSize.M;
|
||||
|
||||
constructor(private staffService: StaffService) {}
|
||||
|
||||
get searchValue(): string {
|
||||
@@ -27,7 +24,7 @@ export class StaffComponent {
|
||||
}
|
||||
|
||||
handleSearchSubmit(): void {
|
||||
this.staffService.setSearchFilter(this.searchValue);
|
||||
this.staffService.setSearchFilter(this.searchValue);
|
||||
}
|
||||
|
||||
handleSearchInput($event: CustomEvent): void {
|
||||
@@ -37,6 +34,4 @@ export class StaffComponent {
|
||||
handleStaffSort(key: keyof Staff): void {
|
||||
this.staffService.setStaffSortKey(key);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -5,8 +5,8 @@ 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';
|
||||
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({
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
@@ -17,7 +17,9 @@ import {DigiNgLinkButtonModule} from '@af/digi-ng/_link/link-button';
|
||||
DigiNgLinkInternalModule,
|
||||
DigiNgSkeletonBaseModule,
|
||||
StaffListModule,
|
||||
DigiNgLinkButtonModule
|
||||
DigiNgLinkButtonModule,
|
||||
ReactiveFormsModule,
|
||||
FormsModule,
|
||||
],
|
||||
})
|
||||
export class StaffModule {}
|
||||
|
||||
@@ -1,48 +1,87 @@
|
||||
<section class="start">
|
||||
|
||||
<div>
|
||||
<h1>Välkommen till DAFA 2.0</h1>
|
||||
<p>Här finner du de senaste nyheterna om uppdateringar, notiser och mer.</p>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<br>
|
||||
|
||||
<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>
|
||||
<br>
|
||||
<digi-ng-form-error-list afHeading="Viktig Information">
|
||||
|
||||
</digi-ng-form-error-list>
|
||||
</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 class="start__item-c">
|
||||
<digi-ng-notification-alert
|
||||
[afVariation]="variation"
|
||||
[afSize]="notificationAlertSize"
|
||||
afHeading="Viktig information"
|
||||
[afHeadingLevel]="afHeading"
|
||||
>
|
||||
<p>Large alert! Check the knobs section and play around!</p>
|
||||
</digi-ng-notification-alert>
|
||||
<div class="start__item-c-alert">
|
||||
<digi-ng-notification-alert
|
||||
[afVariation]="variation"
|
||||
[afSize]="notificationAlertSize"
|
||||
afCloseable="true"
|
||||
(afOnClose)="closed()"
|
||||
afHeading="Viktig information"
|
||||
[afHeadingLevel]="afHeading"
|
||||
>
|
||||
<p>Large alert! Check the knobs section and play around!</p>
|
||||
</digi-ng-notification-alert>
|
||||
</div>
|
||||
</div>
|
||||
<div class="start__item-d">
|
||||
<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>
|
||||
|
||||
</div> <!--end of wrapper-->
|
||||
|
||||
<!-- <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__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>
|
||||
|
||||
@@ -1,30 +1,27 @@
|
||||
.start
|
||||
{
|
||||
&__wrapper
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
}
|
||||
|
||||
&__card-info
|
||||
{
|
||||
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
|
||||
|
||||
|
||||
}
|
||||
&__card-info-notice{
|
||||
margin-left: 5%;
|
||||
}
|
||||
&__statistics{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.start {
|
||||
&__wrapper {
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas:
|
||||
'header header '
|
||||
'main sidebar'
|
||||
'footer footer ';
|
||||
grid-gap: 50px;
|
||||
}
|
||||
&__item-a {
|
||||
grid-area: header;
|
||||
}
|
||||
&__item-b {
|
||||
grid-area: main;
|
||||
}
|
||||
&__item-c {
|
||||
grid-area: sidebar;
|
||||
}
|
||||
&__item-c-alert {
|
||||
visibility: visible;
|
||||
margin-top: 30px;
|
||||
}
|
||||
&__item-d {
|
||||
grid-area: footer;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
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';
|
||||
|
||||
@Component({
|
||||
@@ -8,12 +13,22 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
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';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,20 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { StartComponent } from './start.component';
|
||||
import {DigiNgCardModule} from '@af/digi-ng/_card/card';
|
||||
import {DigiNgFormErrorListModule} from '@af/digi-ng/_form/form-error-list';
|
||||
|
||||
|
||||
|
||||
|
||||
import { DigiNgCardModule } from '@af/digi-ng/_card/card';
|
||||
import { DigiNgFormErrorListModule } from '@af/digi-ng/_form/form-error-list';
|
||||
import { DigiNgNotificationAlertModule } from '@af/digi-ng/_notification/notification-alert';
|
||||
|
||||
@NgModule({
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
declarations: [StartComponent],
|
||||
imports: [CommonModule, RouterModule.forChild([{ path: '', component: StartComponent }]),
|
||||
DigiNgCardModule,
|
||||
DigiNgFormErrorListModule
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule.forChild([{ path: '', component: StartComponent }]),
|
||||
DigiNgCardModule,
|
||||
DigiNgFormErrorListModule,
|
||||
DigiNgNotificationAlertModule,
|
||||
],
|
||||
})
|
||||
export class StartModule {}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"license": "MIT",
|
||||
"repository": "https://bitbucket.arbetsformedlingen.se/projects/TEA/repos/dafa-web-monorepo",
|
||||
"engines": {
|
||||
"node": "16.0.0"
|
||||
"node": "14.16.1"
|
||||
},
|
||||
"scripts": {
|
||||
"ng": "nx",
|
||||
|
||||
Reference in New Issue
Block a user