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

Merge pull request #21 in TEA/dafa-web-monorepo from TV-224-Adjust-content to develop

Browse Source 
Squashed commit of the following:

commit 4936f815552be48f52bf4ea3a570487d7dabee5a
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Wed Jun 23 16:21:41 2021 +0200

    TV-224 Removed misplaced comma from angular.json

commit c723d368d5d3f0b3909798e16ab553bdfcc47441
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Wed Jun 23 15:11:10 2021 +0200

    TV-224 Edit button adjusted

commit 306dbe6dbd1ae0254e2ddae35b849c3b94914c7b
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Wed Jun 23 14:41:38 2021 +0200

    TV-224 Button properties digified

commit d031a3ca0fed14d00ea68437132f3cc64b3e4b74
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Wed Jun 23 14:30:02 2021 +0200

    TV-224 korrigerade redigera-knappen

commit 21409f2a6d0ce58f5deb98c5f1c25e5da91f7219
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Wed Jun 23 13:49:19 2021 +0200

    TV-224 Colors fixed

commit 9f19ac770fb99431c2e407a37ae3899446279b3b
Merge: 2ed7842 f7081d8
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Mon Jun 21 14:15:27 2021 +0200

    TV-224 Merged develop and resolved conflicts

commit 2ed7842e1a463bef9396f3131f2721522214618b
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Mon Jun 21 09:24:32 2021 +0200

    TV-224 Adapted emptylisttemplate and deleted some scss classes

commit d7d505fc920b4509b3d10eb5effbd5889bed35ad
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Fri Jun 18 20:24:20 2021 +0200

    TV-224 More variables, refactored buttons

commit 10142c6bfb951c942d530f86f4a1dc4648981339
Merge: 1e00f91 2a6ad74
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Wed Jun 16 15:09:28 2021 +0200

    TV-224 merge conflicts resolved

commit 2a6ad74fb252cfe4a4d48a08574a2d26840e13bf
Merge: 2750657 13f6ce3
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Jun 16 13:18:23 2021 +0200

    Merged develop and resolved conflicts

commit 1e00f91a5c0021a7c54bcd771cd737db19e86aaa
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Tue Jun 15 14:00:27 2021 +0200

    TV-224 Fixed comments made small adjustments

commit 275065782cf94e339bddc5af9c18bd834cbc62e9
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Mon Jun 14 09:53:49 2021 +0200

    TV-224

commit fef2a920c8d9d70121b08941a14f09938c03d2e0
Merge: 1d44b15 48801a9
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Wed Jun 9 15:52:04 2021 +0200

    TV-224 Merge conflicts resolved

commit 1d44b15d7052898ab000a427381e6e2503f6c498
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Wed Jun 9 14:53:15 2021 +0200

    TV-224 Minor adjustments

commit 733102d686548e25c4b0cc82b78cb8b43beffbc4
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Tue Jun 8 18:37:41 2021 +0200

    TV-224 BEM adaption finished

commit 293be94d9060a6c275fd80a657d5d8b8a3d8cf81
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Tue Jun 8 17:49:03 2021 +0200

    TV-224 More adaptions to BEM

commit 318a2bb117196a4aa9bc29fbb18ca86ef1965eac
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Tue Jun 8 15:20:54 2021 +0200

    TV-224 Small correction

commit 42d32012a1fd1e0ad3d0f19df54408f3f8a18b68
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Tue Jun 8 15:03:25 2021 +0200

    TV-224 Prettier

commit 116e47b19907493cf6849b5b33cdda8044250259
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Tue Jun 8 14:14:37 2021 +0200

    TV-224 Buttons as mixins adjust scss

commit 8daaa08b1ed812bba548c77a907d8c14bfc5dfec
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Mon Jun 7 15:16:53 2021 +0200

    TV-224-Adjust content Small fix

... and 6 more commits
This commit is contained in:
Björn Ahlén
2021-06-24 09:07:38 +02:00
parent 4afe9b589b
commit 6f97f51c3b
9 changed files with 152 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/dafa-web/src/app/data/models/employee.model.ts
View File

@@ -10,8 +10,8 @@ export interface Employee {
fullName?: string;
ssn: string;
organizations: Organization[];
authorizations: Authorization[];
services: Service[];
authorizations: Authorization[];
createdAt?: number;
}

101
apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.html
View File

@@ -1,7 +1,13 @@
<dafa-logged-in-shell>
<section class="employee-card">
<digi-typography *ngIf="detailedEmployeeData$ | async as detailedEmployeeData; else loadingRef">
<div class="employee-card__editcontainer">
<h1>{{ detailedEmployeeData.fullName }}</h1>
<span class="employee-card__editbutton">
<a href="./administration/skapa-konto">Redigera</a>
</span>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus accusantium sit, reprehenderit, esse suscipit
quis similique harum est eum eveniet aspernatur delectus magni asperiores porro aliquam voluptate! Architecto,
@@ -27,83 +33,58 @@
</div>
<div class="employee-card__column">
<h2>Uppgifter om arbete</h2>
<dl>
<dt>Behörigheter</dt>
<ng-container *ngIf="detailedEmployeeData.authorizations.length; else emptyDD">
<dd *ngFor="let authorization of detailedEmployeeData.authorizations">{{ authorization.name }}</dd>
</ng-container>
<dt>Tjänster</dt>
<h2>Tjänst</h2>
<ul class="employee-card__list">
<ng-container *ngIf="detailedEmployeeData.services.length; else emptyDD">
<dd *ngFor="let service of detailedEmployeeData.services">{{ service.name }}</dd>
</ng-container>
</dl>
</div>
<div class="employee-card__column">
<h2>Utförande verksamheter</h2>
<ul *ngIf="detailedEmployeeData.organizations?.length" class="employee-card__organizations">
<li *ngFor="let organization of detailedEmployeeData.organizations" class="employee-card__organization">
<h3>{{ organization.name }}</h3>
<dl>
<dt>KA-nummer</dt>
<dd>{{ organization.kaNumber }}</dd>
<dt>Adress</dt>
<dd>{{ organization.address.street }} {{ organization.address.houseNumber }}</dd>
<dd>{{ organization.address.postalCode }} {{ organization.address.city }}</dd>
</dl>
<li class="employee-card__column--listitem" *ngFor="let service of detailedEmployeeData.services">
{{ service.name }}
</li>
</ng-container>
</ul>
</div>
<div class="employee-card__column">
<digi-ng-layout-expansion-panel>
<h3 style="margin-bottom: 0" data-slot-trigger>
Tilldelade deltagare ({{ detailedEmployeeData.participants?.length || 0 }})
</h3>
<ng-container *ngIf="detailedEmployeeData.participants?.length; else noParticipantsInfo">
<ul class="employee-card__participants">
<li *ngIf="detailedEmployeeData.participants.length > 1" class="employee-card__participant">
<digi-form-checkbox
af-variation="primary"
af-label="Välj alla"
af-value="all"
[afChecked]="pendingSelectedParticipants.length"
[afIndeterminate]="pendingSelectedParticipants.length !== detailedEmployeeData.participants.length"
(afOnChange)="
handleChangeAllParticipants(detailedEmployeeData.participants, $event.detail.target.checked)
"
></digi-form-checkbox>
</li>
<li *ngFor="let participant of detailedEmployeeData.participants" class="employee-card__participant">
<digi-form-checkbox
af-variation="primary"
[afLabel]="participant.fullName"
[afValue]="participant.id"
[afChecked]="pendingSelectedParticipants.includes(participant.id)"
(afOnChange)="handleChangeParticipant(participant.id, $event.detail.target.checked)"
></digi-form-checkbox>
<div class="employee-card__organizations">
<h2>Utförande verksamheter och utförande adresser</h2>
<ul class="employee-card__list" *ngIf="detailedEmployeeData.organizations?.length">
<li class="employee-card__list" *ngFor="let organization of detailedEmployeeData.organizations">
{{ organization.name }}
<ul>
<li class="employee-card__listitem--indent">
{{ organization.address.street }} {{ organization.address.postalCode }}
{{ organization.address.houseNumber }} {{ organization.address.city }}
</li>
</ul>
<digi-button af-size="s" (afOnClick)="handleChangeEmployee()">Byt handledare</digi-button>
</li>
</ul>
</div>
<div class="employee-card__column">
<h2>Behörigheter</h2>
<ul class="employee-card__list">
<ng-container *ngIf="detailedEmployeeData.authorizations.length; else emptyDD">
<li *ngFor="let authorization of detailedEmployeeData.authorizations">{{ authorization.name }}</li>
</ng-container>
<ng-template #noParticipantsInfo>
<p>Inga deltagare har kopplats till {{ detailedEmployeeData.fullName }}.</p>
</ng-template>
</digi-ng-layout-expansion-panel>
</ul>
</div>
</div>
<p></p>
</digi-typography>
<div class="employee-card__footer">
<span class="employee-card__secondarybutton">
<a href="./administration/personal">Tillbaka till personallistan</a>
</span>
<span class="employee-card__primarybutton">
<a href="./administration/skapa-konto">Skapa nytt konto</a>
</span>
</div>
</section>
<ng-template #loadingRef>
<digi-ng-skeleton-base [afCount]="3" afText="Laddar personalkortet"></digi-ng-skeleton-base>
</ng-template>
<ng-template #emptyDD>
<ng-template #emptyDD class="employee-card__list">
<dd>
<span aria-hidden="true">-</span>
<span class="dafa__a11y-sr-only">Info saknas</span>

96
apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.scss
View File

@@ -1,4 +1,6 @@
@import 'variables/gutters';
@import 'variables/colors';
@import 'mixins/buttons';
@import 'mixins/list';
.employee-card {
@@ -6,10 +8,16 @@
display: flex;
flex-direction: column;
gap: $digi--layout--gutter--xl $digi--layout--gutter--l;
h2 {
margin-top: 0;
}
&__editcontainer {
display: flex;
justify-content: space-between;
align-items: center;
}
&__h2 {
margin-top: 0;
}
&__column {
@@ -17,52 +25,68 @@
max-width: var(--digi--typography--text--max-width);
}
dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5rem 2rem;
&__organizations {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
dt,
dd {
&__footer {
margin-top: 5rem;
}
//LISTS
&__list {
@include dafa__reset-list;
}
&__listitem--indent {
@include dafa__reset-list;
margin-left: 1rem;
}
&__description {
margin-left: 0.1rem;
grid-column: 1;
}
&__term {
margin: 0;
}
dt {
grid-column: 1;
font-weight: var(--digi--typography--font-weight--semibold);
}
dd {
grid-column: 2;
}
//BUTTONS
&__organizations {
@include dafa__reset-list;
display: flex;
flex-direction: column;
gap: 1rem;
}
&__organization {
border: 1px solid #333;
padding: var(--digi--layout--gutter);
h3 {
margin-top: 0;
&__primarybutton {
a {
@include dafa_buttontemplate(
$dafa-button--background--primary,
$dafa-button--text--primary,
$dafa-button--hover--primary
);
}
}
&__participants {
@include dafa__reset-list;
margin: var(--digi--layout--gutter) 0;
&__secondarybutton {
a {
@include dafa_buttontemplate(
$dafa-button--background--secondary,
$dafa-button--text--secondary,
$dafa-button--hover--secondary
);
}
}
&__participant {
padding: var(--digi--layout--gutter--s) var(--digi--layout--gutter--xs);
&:nth-child(even) {
background-color: var(--digi--ui--color--background--tertiary);
&__editbutton {
a {
@include dafa_buttontemplate(
$dafa-button--background--secondary,
$dafa-button--text--secondary,
$dafa-button--hover--secondary
);
width: var(--digi-button--width);
}
}
}

3
apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.ts
View File

@@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ChangeDetectionStrategy, Component} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Employee } from '@dafa-models/employee.model';
import { Participant } from '@dafa-models/participant.model';
@@ -26,6 +26,7 @@ export class EmployeeCardComponent {
return this._pendingSelectedParticipants$.getValue();
}
handleChangeEmployee(): void {
console.log('change employee: ', this.pendingSelectedParticipants);
}

4
apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.ts
View File

@@ -9,7 +9,7 @@ import { EmployeeService } from '@dafa-services/api/employee.service';
import { ServiceService } from '@dafa-services/api/service.service';
import { SocialSecurityNumberValidator } from '@dafa-utils/validators/social-security-number.validator';
import { RequiredValidator } from '@dafa-validators/required.validator';
import { BehaviorSubject, Observable } from 'rxjs';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
@@ -24,7 +24,7 @@ export class EmployeeFormComponent {
servicesSelectItems$: Observable<FormSelectBaseItem[]> = this.services$.pipe(
map(services => services.map(({ name, id }) => ({ name, value: id })))
);
toggleDialog: boolean = false;
toggleDialog = false;
modalAuthInfo: any = {'name': 'Test Behörighetsnamn'};
formGroup: FormGroup = this.formBuilder.group({

2
apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.ts
View File

@@ -12,7 +12,7 @@ export class HideTextComponent {
@Input() symbols: string;
@Input() ariaLabelType = 'text';
hideText: boolean = true;
hideText = true;
iconType = IconType;
get transformedText(): string {

31
apps/dafa-web/src/styles/mixins/_buttons.scss Normal file
View File

@@ -0,0 +1,31 @@
@import './variables/colors';
//Button properties
$dafa-button--padding: var(--digi-button--padding);
$dafa-button--margin: 0.5rem;
$dafa-button--border-radius: var(--digi-button--border-radius);
$dafa-button--transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
$dafa-button--border: var(--digi-button--border);
$dafa-button--text-decoration: none;
$dafa-button--font-weight: var(--digi-button--font-weight);
$dafa-button--font-font-size: var(--digi-button--font-size);
//A basic link button
@mixin dafa_buttontemplate($backgroundcolor, $textcolor, $hovercolor) {
background: $backgroundcolor;
padding: $dafa-button--padding;
margin: $dafa-button--margin;
border-radius: $dafa-button--border-radius;
transition: $dafa-button--transition;
border: $dafa-button--border;
text-decoration: none;
font-weight: $dafa-button--font-weight;
font-size: $dafa-button--font-font-size;
color: $textcolor;
&:hover {
background: $hovercolor;
}
}

5
apps/dafa-web/src/styles/mixins/_list.scss
View File

@@ -1,5 +1,8 @@
@mixin dafa__reset-list {
list-style: none;
list-style-type: none;
padding: 0;
margin: 0;
}

9
apps/dafa-web/src/styles/variables/_colors.scss
View File

@@ -1,6 +1,15 @@
@import '~@digi/styles/src/ui/variables/ui__variables';
@import '~@digi/core/dist/collection/components/_button/button/button.css';
// AF DIGI Variables
$digi--ui--color--primary-light: lighten($digi--ui--color--primary, 10%);
$digi--ui--color--primary: $digi--ui--color--stratos;
// Local variables
$dafa-button--background--primary: var(--digi-button--background);
$dafa-button--text--primary: var(--digi--typography--color--text--light);
$dafa-button--hover--primary: var(--digi-button--background--hover);
$dafa-button--background--secondary: var(--digi-button--background--secondary);
$dafa-button--text--secondary: var(--digi--ui--color--primary);
$dafa-button--hover--secondary: var(--digi-button--background--secondary--hover);