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; fullName?: string;
ssn: string; ssn: string;
organizations: Organization[]; organizations: Organization[];
authorizations: Authorization[];
services: Service[]; services: Service[];
authorizations: Authorization[];
createdAt?: number; 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> <dafa-logged-in-shell>
<section class="employee-card"> <section class="employee-card">
<digi-typography *ngIf="detailedEmployeeData$ | async as detailedEmployeeData; else loadingRef"> <digi-typography *ngIf="detailedEmployeeData$ | async as detailedEmployeeData; else loadingRef">
<div class="employee-card__editcontainer">
<h1>{{ detailedEmployeeData.fullName }}</h1> <h1>{{ detailedEmployeeData.fullName }}</h1>
<span class="employee-card__editbutton">
<a href="./administration/skapa-konto">Redigera</a>
</span>
</div>
<p> <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus accusantium sit, reprehenderit, esse suscipit 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, quis similique harum est eum eveniet aspernatur delectus magni asperiores porro aliquam voluptate! Architecto,
@@ -27,83 +33,58 @@
</div> </div>
<div class="employee-card__column"> <div class="employee-card__column">
<h2>Uppgifter om arbete</h2> <h2>Tjänst</h2>
<ul class="employee-card__list">
<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>
<ng-container *ngIf="detailedEmployeeData.services.length; else emptyDD"> <ng-container *ngIf="detailedEmployeeData.services.length; else emptyDD">
<dd *ngFor="let service of detailedEmployeeData.services">{{ service.name }}</dd> <li class="employee-card__column--listitem" *ngFor="let service of detailedEmployeeData.services">
</ng-container> {{ service.name }}
</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> </li>
</ng-container>
</ul> </ul>
</div> </div>
<div class="employee-card__column"> <div class="employee-card__organizations">
<digi-ng-layout-expansion-panel> <h2>Utförande verksamheter och utförande adresser</h2>
<h3 style="margin-bottom: 0" data-slot-trigger> <ul class="employee-card__list" *ngIf="detailedEmployeeData.organizations?.length">
Tilldelade deltagare ({{ detailedEmployeeData.participants?.length || 0 }}) <li class="employee-card__list" *ngFor="let organization of detailedEmployeeData.organizations">
</h3> {{ organization.name }}
<ng-container *ngIf="detailedEmployeeData.participants?.length; else noParticipantsInfo"> <ul>
<ul class="employee-card__participants"> <li class="employee-card__listitem--indent">
<li *ngIf="detailedEmployeeData.participants.length > 1" class="employee-card__participant"> {{ organization.address.street }} {{ organization.address.postalCode }}
<digi-form-checkbox {{ organization.address.houseNumber }} {{ organization.address.city }}
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>
</li> </li>
</ul> </ul>
</li>
<digi-button af-size="s" (afOnClick)="handleChangeEmployee()">Byt handledare</digi-button> </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-container>
<ng-template #noParticipantsInfo> </ul>
<p>Inga deltagare har kopplats till {{ detailedEmployeeData.fullName }}.</p>
</ng-template>
</digi-ng-layout-expansion-panel>
</div> </div>
</div> </div>
<p></p>
</digi-typography> </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> </section>
<ng-template #loadingRef> <ng-template #loadingRef>
<digi-ng-skeleton-base [afCount]="3" afText="Laddar personalkortet"></digi-ng-skeleton-base> <digi-ng-skeleton-base [afCount]="3" afText="Laddar personalkortet"></digi-ng-skeleton-base>
</ng-template> </ng-template>
<ng-template #emptyDD> <ng-template #emptyDD class="employee-card__list">
<dd> <dd>
<span aria-hidden="true">-</span> <span aria-hidden="true">-</span>
<span class="dafa__a11y-sr-only">Info saknas</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/gutters';
@import 'variables/colors';
@import 'mixins/buttons';
@import 'mixins/list'; @import 'mixins/list';
.employee-card { .employee-card {
@@ -6,10 +8,16 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $digi--layout--gutter--xl $digi--layout--gutter--l; 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 { &__column {
@@ -17,52 +25,68 @@
max-width: var(--digi--typography--text--max-width); max-width: var(--digi--typography--text--max-width);
} }
dl { &__organizations {
display: grid; display: flex;
grid-template-columns: auto 1fr; flex-direction: column;
gap: 0.5rem 2rem; gap: 1.25rem;
} }
dt, &__footer {
dd { 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; margin: 0;
}
dt {
grid-column: 1; grid-column: 1;
font-weight: var(--digi--typography--font-weight--semibold); font-weight: var(--digi--typography--font-weight--semibold);
} }
dd { //BUTTONS
grid-column: 2;
}
&__organizations { &__primarybutton {
@include dafa__reset-list; a {
display: flex; @include dafa_buttontemplate(
flex-direction: column; $dafa-button--background--primary,
gap: 1rem; $dafa-button--text--primary,
} $dafa-button--hover--primary
);
&__organization {
border: 1px solid #333;
padding: var(--digi--layout--gutter);
h3 {
margin-top: 0;
} }
} }
&__participants { &__secondarybutton {
@include dafa__reset-list; a {
margin: var(--digi--layout--gutter) 0; @include dafa_buttontemplate(
$dafa-button--background--secondary,
$dafa-button--text--secondary,
$dafa-button--hover--secondary
);
}
} }
&__participant { &__editbutton {
padding: var(--digi--layout--gutter--s) var(--digi--layout--gutter--xs); a {
@include dafa_buttontemplate(
&:nth-child(even) { $dafa-button--background--secondary,
background-color: var(--digi--ui--color--background--tertiary); $dafa-button--text--secondary,
$dafa-button--hover--secondary
);
width: var(--digi-button--width);
} }
} }
} }

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

@@ -26,6 +26,7 @@ export class EmployeeCardComponent {
return this._pendingSelectedParticipants$.getValue(); return this._pendingSelectedParticipants$.getValue();
} }
handleChangeEmployee(): void { handleChangeEmployee(): void {
console.log('change employee: ', this.pendingSelectedParticipants); 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 { ServiceService } from '@dafa-services/api/service.service';
import { SocialSecurityNumberValidator } from '@dafa-utils/validators/social-security-number.validator'; import { SocialSecurityNumberValidator } from '@dafa-utils/validators/social-security-number.validator';
import { RequiredValidator } from '@dafa-validators/required.validator'; import { RequiredValidator } from '@dafa-validators/required.validator';
import { BehaviorSubject, Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { map } from 'rxjs/operators'; import { map } from 'rxjs/operators';
@Component({ @Component({
@@ -24,7 +24,7 @@ export class EmployeeFormComponent {
servicesSelectItems$: Observable<FormSelectBaseItem[]> = this.services$.pipe( servicesSelectItems$: Observable<FormSelectBaseItem[]> = this.services$.pipe(
map(services => services.map(({ name, id }) => ({ name, value: id }))) map(services => services.map(({ name, id }) => ({ name, value: id })))
); );
toggleDialog: boolean = false; toggleDialog = false;
modalAuthInfo: any = {'name': 'Test Behörighetsnamn'}; modalAuthInfo: any = {'name': 'Test Behörighetsnamn'};
formGroup: FormGroup = this.formBuilder.group({ 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() symbols: string;
@Input() ariaLabelType = 'text'; @Input() ariaLabelType = 'text';
hideText: boolean = true; hideText = true;
iconType = IconType; iconType = IconType;
get transformedText(): string { 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 { @mixin dafa__reset-list {
list-style: none; list-style-type: none;
padding: 0; padding: 0;
margin: 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/styles/src/ui/variables/ui__variables';
@import '~@digi/core/dist/collection/components/_button/button/button.css';
// AF DIGI Variables // AF DIGI Variables
$digi--ui--color--primary-light: lighten($digi--ui--color--primary, 10%); $digi--ui--color--primary-light: lighten($digi--ui--color--primary, 10%);
$digi--ui--color--primary: $digi--ui--color--stratos;
// Local variables // 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);