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

Merge pull request #23 in TEA/dafa-web-monorepo from feature/TV-223 to develop

Browse Source 
Squashed commit of the following:

commit 47eae926c8e1564823e627ac12d487e11cc01a9c
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jun 17 15:38:41 2021 +0200

    TV-223 städ

commit fdc81d0c5eb9016a040d8806e124e5b3a22d9b9d
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jun 17 12:43:18 2021 +0200

    TV-223 städ

commit 39099436391bfbfd8ee2c9af91e94f81b53cc6b4
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jun 17 12:39:43 2021 +0200

    TV-223 Visa dölj personnumer - delad komponent. Ändringar efter code review

commit 0cd5173f6dd6915d30311a9a1c6141d84e00d6e9
Merge: 14f2b77 ba34b20
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Tue Jun 15 18:52:42 2021 +0200

    Merge branch 'develop' into feature/TV-223

    # Conflicts:
    #	apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.module.ts

commit 14f2b777c48831568bf9ff8b257f063250486da2
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Tue Jun 15 18:47:30 2021 +0200

    TV-223 tagit bort pipe

commit d011b97d87dd3b2cc336df45368200a64f17ed22
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Tue Jun 15 18:38:26 2021 +0200

    TV-223 Dölj visa text, ändrat till mer generell delad komponent

commit 7d4202c905e935e3aeda2bb9fb3f9e6232b855e2
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jun 10 16:47:59 2021 +0200

    TV-223 omvänt ikoner för vad som visas nu ist. för vad man vill ska visas

commit 77b628a2b77eb39673abefa5d0aa27a2ebe2cbcf
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jun 10 16:39:07 2021 +0200

    TV-223 css

commit 6148993314c4f0e4e1797aa220356c21ab986662
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jun 10 13:24:56 2021 +0200

    TV-223 .

commit f6723ba4959f072078f87d725d72662e4bd27d99
Merge: e71a3bd 48801a9
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jun 10 13:12:02 2021 +0200

    Merge branch 'develop' into feature/TV-223

commit e71a3bd8d071830b6bad2ea6648197dedb855615
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jun 10 13:07:40 2021 +0200

    TV-223 Visa-göm för personnummer. Delad komponent för dölj-visa text
This commit is contained in:
Cecilia Varnava
2021-06-17 15:40:25 +02:00
parent 13f6ce33b8
commit 1ff362fcd1
9 changed files with 201 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/dafa-web/src/app/data/enums/icon-type.enum.ts
View File

@@ -13,4 +13,6 @@ export enum IconType {
WARNING = 'warning',
APPROVED = 'approved',
X = 'x',
EYE = 'eye',
EYESLASH = 'eyeslash',
}

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

@@ -1,107 +1,112 @@
<dafa-logged-in-shell>
<section class="employee-card">
<digi-typography *ngIf="detailedEmployeeData$ | async as detailedEmployeeData; else loadingRef">
<h1>{{ detailedEmployeeData.fullName }}</h1>
<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,
perferendis commodi.
</p>
<section class="employee-card">
<digi-typography *ngIf="detailedEmployeeData$ | async as detailedEmployeeData; else loadingRef">
<h1>{{ detailedEmployeeData.fullName }}</h1>
<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,
perferendis commodi.
</p>
<div class="employee-card__contents">
<div class="employee-card__column">
<h2>Kontaktuppgifter</h2>
<div class="employee-card__contents">
<div class="employee-card__column">
<h2>Kontaktuppgifter</h2>
<dl>
<dt>Namn</dt>
<dd *ngIf="detailedEmployeeData.fullName; else emptyDD">{{ detailedEmployeeData.fullName }}</dd>
<dt>Personnummer</dt>
<dd *ngIf="detailedEmployeeData.ssn; else emptyDD">
<dafa-hide-text
symbols="********-****"
[changingText]="detailedEmployeeData.ssn"
ariaLabelType="personnummer"
></dafa-hide-text>
</dd>
</dl>
</div>
<dl>
<dt>Namn</dt>
<dd *ngIf="detailedEmployeeData.fullName; else emptyDD">{{ detailedEmployeeData.fullName }}</dd>
<dt>Personnummer</dt>
<dd *ngIf="detailedEmployeeData.ssn; else emptyDD">{{ detailedEmployeeData.ssn }}</dd>
</dl>
<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>
<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>
</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>
</li>
</ul>
<digi-button af-size="s" (afOnClick)="handleChangeEmployee()">Byt handledare</digi-button>
</ng-container>
<ng-template #noParticipantsInfo>
<p>Inga deltagare har kopplats till {{ detailedEmployeeData.fullName }}.</p>
</ng-template>
</digi-ng-layout-expansion-panel>
</div>
</div>
</digi-typography>
</section>
<div class="employee-card__column">
<h2>Uppgifter om arbete</h2>
<ng-template #loadingRef>
<digi-ng-skeleton-base [afCount]="3" afText="Laddar personalkortet"></digi-ng-skeleton-base>
</ng-template>
<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">
<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>
</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>
</li>
</ul>
<digi-button af-size="s" (afOnClick)="handleChangeEmployee()">Byt handledare</digi-button>
</ng-container>
<ng-template #noParticipantsInfo>
<p>Inga deltagare har kopplats till {{ detailedEmployeeData.fullName }}.</p>
</ng-template>
</digi-ng-layout-expansion-panel>
</div>
</div>
</digi-typography>
</section>
<ng-template #loadingRef>
<digi-ng-skeleton-base [afCount]="3" afText="Laddar personalkortet"></digi-ng-skeleton-base>
</ng-template>
<ng-template #emptyDD>
<dd>
<span aria-hidden="true">-</span>
<span class="dafa__a11y-sr-only">Info saknas</span>
</dd>
</ng-template>
<ng-template #emptyDD>
<dd>
<span aria-hidden="true">-</span>
<span class="dafa__a11y-sr-only">Info saknas</span>
</dd>
</ng-template>
</dafa-logged-in-shell>

2
apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.module.ts
View File

@@ -6,6 +6,7 @@ import { RouterModule } from '@angular/router';
import { LocalDatePipeModule } from '@dafa-shared/pipes/local-date/local-date.module';
import { EmployeeCardComponent } from './employee-card.component';
import { LoggedInShellModule } from '../../../../components/logged-in-shell/logged-in-shell.module';
import { HideTextModule } from '@dafa-shared/components/hide-text/hide-text.module';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -16,6 +17,7 @@ import { LoggedInShellModule } from '../../../../components/logged-in-shell/logg
DigiNgSkeletonBaseModule,
DigiNgLayoutExpansionPanelModule,
LocalDatePipeModule,
HideTextModule,
LoggedInShellModule
],
})

7
apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.html Normal file
View File

@@ -0,0 +1,7 @@
<span class="hide-text">
{{ transformedText }}
<button class="hide-text__button" type="button" [attr.aria-label]="ariaLabel" (click)="toggleText()">
<dafa-icon *ngIf="!hideText" [icon]="iconType.EYESLASH" size="l"></dafa-icon>
<dafa-icon *ngIf="hideText" [icon]="iconType.EYE" size="l"></dafa-icon>
</button>
</span>

19
apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.scss Normal file
View File

@@ -0,0 +1,19 @@
.hide-text {
display: flex;
align-items: center;
gap: var(--digi--layout--gutter);
&__button {
background-color: transparent;
color: var(--digi--typography--color--link);
font-size: var(--digi--typography--font-size--desktop--l);
border-width: 0;
width: 2rem;
display: flex;
align-items: center;
justify-content: center;
&:hover {
color: var(--digi--typography--color--link--active);
}
}
}

23
apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HideTextComponent } from './hide-text.component';
describe('HideTextComponent', () => {
let component: HideTextComponent;
let fixture: ComponentFixture<HideTextComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [HideTextComponent],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(HideTextComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

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

@@ -0,0 +1,30 @@
import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
import { IconType } from '@dafa-enums/icon-type.enum';
@Component({
selector: 'dafa-hide-text',
templateUrl: './hide-text.component.html',
styleUrls: ['./hide-text.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HideTextComponent {
@Input() changingText: string;
@Input() symbols: string;
@Input() ariaLabelType = 'text';
hideText: boolean = true;
iconType = IconType;
get transformedText(): string {
return this.hideText ? this.symbols : this.changingText;
}
toggleText(): void {
this.hideText = !this.hideText;
}
get ariaLabel(): string {
const buttonText = this.hideText ? 'Visa' : 'Dölj';
return `${buttonText} ${this.ariaLabelType}`;
}
}

12
apps/dafa-web/src/app/shared/components/hide-text/hide-text.module.ts Normal file
View File

@@ -0,0 +1,12 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { HideTextComponent } from './hide-text.component';
import { IconModule } from '@dafa-shared/components/icon/icon.module';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [HideTextComponent],
imports: [CommonModule, IconModule],
exports: [HideTextComponent],
})
export class HideTextModule {}

2
apps/dafa-web/src/app/shared/components/icon/icon.component.html
View File

@@ -42,5 +42,7 @@
></digi-icon-exclamation-triangle>
<digi-icon-check-circle-reg *ngSwitchCase="iconType.APPROVED" [ngClass]="iconClass"></digi-icon-check-circle-reg>
<digi-icon-x *ngSwitchCase="iconType.X" [ngClass]="iconClass"></digi-icon-x>
<digi-icon-eye *ngSwitchCase="iconType.EYE" [ngClass]="iconClass"></digi-icon-eye>
<digi-icon-eye-slash *ngSwitchCase="iconType.EYESLASH" [ngClass]="iconClass"></digi-icon-eye-slash>
</ng-container>
</ng-template>