updated startpage from flex to grid, and other minor changes

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

View File

@@ -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>

View File

@@ -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;
}

View File

@@ -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');
}

View File

@@ -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 {}

View File

@@ -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"

View File

@@ -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;
}
}

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 { 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);
}
}

View File

@@ -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 {}

View File

@@ -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>

View File

@@ -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;
}
}

View File

@@ -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';
}
}
}

View File

@@ -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 {}

View File

@@ -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",