Merge pull request #23 in TEA/dafa-web-monorepo from feature/TV-223 to develop
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: 14f2b77ba34b20Author: 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: e71a3bd48801a9Author: 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
@@ -13,4 +13,6 @@ export enum IconType {
|
|||||||
WARNING = 'warning',
|
WARNING = 'warning',
|
||||||
APPROVED = 'approved',
|
APPROVED = 'approved',
|
||||||
X = 'x',
|
X = 'x',
|
||||||
|
EYE = 'eye',
|
||||||
|
EYESLASH = 'eyeslash',
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,107 +1,112 @@
|
|||||||
<dafa-logged-in-shell>
|
<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">
|
<div class="employee-card__contents">
|
||||||
<digi-typography *ngIf="detailedEmployeeData$ | async as detailedEmployeeData; else loadingRef">
|
<div class="employee-card__column">
|
||||||
<h1>{{ detailedEmployeeData.fullName }}</h1>
|
<h2>Kontaktuppgifter</h2>
|
||||||
<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">
|
<dl>
|
||||||
<div class="employee-card__column">
|
<dt>Namn</dt>
|
||||||
<h2>Kontaktuppgifter</h2>
|
<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>
|
<div class="employee-card__column">
|
||||||
<dt>Namn</dt>
|
<h2>Uppgifter om arbete</h2>
|
||||||
<dd *ngIf="detailedEmployeeData.fullName; else emptyDD">{{ detailedEmployeeData.fullName }}</dd>
|
|
||||||
<dt>Personnummer</dt>
|
<dl>
|
||||||
<dd *ngIf="detailedEmployeeData.ssn; else emptyDD">{{ detailedEmployeeData.ssn }}</dd>
|
<dt>Behörigheter</dt>
|
||||||
</dl>
|
<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>
|
</div>
|
||||||
|
</digi-typography>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="employee-card__column">
|
<ng-template #loadingRef>
|
||||||
<h2>Uppgifter om arbete</h2>
|
<digi-ng-skeleton-base [afCount]="3" afText="Laddar personalkortet"></digi-ng-skeleton-base>
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
<dl>
|
<ng-template #emptyDD>
|
||||||
<dt>Behörigheter</dt>
|
<dd>
|
||||||
<ng-container *ngIf="detailedEmployeeData.authorizations.length; else emptyDD">
|
<span aria-hidden="true">-</span>
|
||||||
<dd *ngFor="let authorization of detailedEmployeeData.authorizations">{{ authorization.name }}</dd>
|
<span class="dafa__a11y-sr-only">Info saknas</span>
|
||||||
</ng-container>
|
</dd>
|
||||||
<dt>Tjänster</dt>
|
</ng-template>
|
||||||
<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>
|
|
||||||
</dafa-logged-in-shell>
|
</dafa-logged-in-shell>
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import { RouterModule } from '@angular/router';
|
|||||||
import { LocalDatePipeModule } from '@dafa-shared/pipes/local-date/local-date.module';
|
import { LocalDatePipeModule } from '@dafa-shared/pipes/local-date/local-date.module';
|
||||||
import { EmployeeCardComponent } from './employee-card.component';
|
import { EmployeeCardComponent } from './employee-card.component';
|
||||||
import { LoggedInShellModule } from '../../../../components/logged-in-shell/logged-in-shell.module';
|
import { LoggedInShellModule } from '../../../../components/logged-in-shell/logged-in-shell.module';
|
||||||
|
import { HideTextModule } from '@dafa-shared/components/hide-text/hide-text.module';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||||
@@ -16,6 +17,7 @@ import { LoggedInShellModule } from '../../../../components/logged-in-shell/logg
|
|||||||
DigiNgSkeletonBaseModule,
|
DigiNgSkeletonBaseModule,
|
||||||
DigiNgLayoutExpansionPanelModule,
|
DigiNgLayoutExpansionPanelModule,
|
||||||
LocalDatePipeModule,
|
LocalDatePipeModule,
|
||||||
|
HideTextModule,
|
||||||
LoggedInShellModule
|
LoggedInShellModule
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -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}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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 {}
|
||||||
@@ -42,5 +42,7 @@
|
|||||||
></digi-icon-exclamation-triangle>
|
></digi-icon-exclamation-triangle>
|
||||||
<digi-icon-check-circle-reg *ngSwitchCase="iconType.APPROVED" [ngClass]="iconClass"></digi-icon-check-circle-reg>
|
<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-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-container>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
|||||||
Reference in New Issue
Block a user