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

Merge pull request #108 in TEA/mina-sidor-fa-web from feature/TV-623 to develop

Browse Source 
Squashed commit of the following:

commit ca49a82df7d52c918ed3540bdca68d63c5c9a6bf
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Tue Sep 21 12:24:13 2021 +0200

    TV-623 Åtgärdat lintvarningar

commit f493987d3213089b7e7f2e455635b5cf13361039
Merge: cf1fa71 2dd9d3d
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Tue Sep 21 11:05:43 2021 +0200

    Merge branch 'develop' into feature/TV-623

commit cf1fa71006576dd448b0b42c688cb43ddfff8080
Merge: acab6a9 91eeb1d
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Tue Sep 21 09:40:24 2021 +0200

    Merge branch 'develop' into feature/TV-623

commit acab6a95ffa43d59e86e387658f97cbc2d1b01cb
Merge: b131d2f e120e50
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Mon Sep 20 17:39:07 2021 +0200

    Merge branch 'develop' into feature/TV-623

commit b131d2fea3e1c7f3c5210d71c5258e8c14fec98d
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Mon Sep 20 17:38:06 2021 +0200

    TV-623 ensuring that changes are propagated to the form if the treeNodesSelector is closed by clicking outside of the control. Otherwise I imagine it would be quite annoying if you closed it by mistake..

commit 29537edfdbdda3382b5af8ffef8f971cbc2550c8
Merge: dc6a4ad 8da6899
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Mon Sep 20 14:08:46 2021 +0200

    Merge branch 'develop' into feature/TV-623

commit dc6a4ad0f6629db2e001a8ffa7895026d2e1a1c0
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Mon Sep 20 13:36:24 2021 +0200

    TV-623 adjusted switch

commit bdd108b6621ca7bdef61d41d25db9ee6d35e1355
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Mon Sep 20 12:56:38 2021 +0200

    TV-623 increased min-width of control

commit a2b3d1c42fb287b45f3323a3475d02e667783c9e
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Mon Sep 20 12:18:17 2021 +0200

    TV-623 fixed linting issue in deltagare-card..

commit 9895eb7c8792977cf7f5c743041c95878003890e
Merge: 4ebafb5 ffc5a46
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Mon Sep 20 12:16:37 2021 +0200

    Merge branch 'develop' into feature/TV-623

commit 4ebafb57ef2e4bbbdcb924a1f92f0412257e11f1
Merge: af58d40 bfffed4
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Mon Sep 20 11:25:13 2021 +0200

    Merge branch 'develop' into TV-623

commit af58d4009be592115dfcd3df20a1c3a1499d5eb4
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Mon Sep 20 11:24:23 2021 +0200

    TV-623
This commit is contained in:
Christian Gårdebrink
2021-09-21 16:54:16 +02:00
parent 90770dc677
commit ee17697af8
16 changed files with 100 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html
View File

@@ -55,6 +55,7 @@
</p>
<ng-container *ngIf="!isLoadingUtforandeVerksamheter else loadingUtforandeVerksamheterTemplate">
<digi-ng-form-checkbox
[afId]="selectAllUtforandeVerksamheterElementId"
class="edit-employee-form__choose-all-utforande-verksamheter"
[formControl]="selectAllUtforandeVerksamheterFormControl"
[afLabel]="'Välj alla utförande verksamheter och alla utförande adresser'"

17
apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.ts
View File

@@ -60,6 +60,7 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
readonly formUuid = uuid();
readonly emailElementId = `email-control-${this.formUuid}`;
readonly tjansterElementId = `tjanster-control-${this.formUuid}`;
readonly selectAllUtforandeVerksamheterElementId = `select-all-utforande-verksamheter-control-${this.formUuid}`;
readonly utforandeVerksamhetElementId = `utforande-verksamhet-control-${this.formUuid}`;
readonly firstValidationErrorLinkId = `validation-error-link-${this.formUuid}`;
@@ -206,7 +207,7 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
if (this.editEmployeeFormGroup.invalid) {
setTimeout(() => {
this.focusLinkElement('.error-list__validation-error-link a');
this.focusElement('.error-list__validation-error-link a');
});
return;
@@ -274,7 +275,7 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
return validationErrorLinks;
}
focusLinkElement(selector: string): void {
focusElement(selector: string): void {
let errorListElement: HTMLElement = null;
let linkElement: HTMLLinkElement = null;
@@ -302,9 +303,21 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
this.utforandeVerksamheterFormControl.value
);
if (hasSelectedAllLeafNodes === this.selectAllUtforandeVerksamheterFormControl.value) {
return;
}
this.editEmployeeFormGroup.patchValue(
Object.fromEntries([[this.selectAllUtforandeVerksamheterFormControlName, hasSelectedAllLeafNodes]])
);
if (!hasSelectedAllLeafNodes) {
return;
}
setTimeout(() => {
this.focusElement(`#${this.selectAllUtforandeVerksamheterElementId}`);
});
}
emitCloseError(): void {

2
apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.ts
View File

@@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Avrop, AvropCompact, AvropCompactData } from '@msfa-models/avrop.model';
import { AvropCompact, AvropCompactData } from '@msfa-models/avrop.model';
import { Handledare } from '@msfa-models/handledare.model';
import { AvropService } from '@msfa-services/avrop.service';
import { Observable } from 'rxjs';

12
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.ts
View File

@@ -69,10 +69,18 @@ export class DeltagareCardComponent {
switch (reportType) {
case 'planering':
this.reportsFormControl.valid ? void this.router.navigate(['/deltagare/planering', deltagareId]) : null;
if (this.reportsFormControl.valid) {
this.router.navigate(['/deltagare/planering', deltagareId]).catch(error => {
console.error(error);
});
}
break;
case 'avvikelse':
this.reportsFormControl.valid ? void this.router.navigate(['/deltagare/rapportera', deltagareId]) : null;
if (this.reportsFormControl.valid) {
this.router.navigate(['/deltagare/rapportera', deltagareId]).catch(error => {
console.error(error);
});
}
break;
default:
return;

4
apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.html
View File

@@ -29,7 +29,7 @@
(afOnKeyup)="onFilterTextChanged($event, treeNodeModel)"
></digi-form-input-search>
<div class="msfa__a11y-sr-only" [attr.id]="'filter-description-'+treeNodeModel.uuid">
Filtrera valbara alternativ där deras namn måste innehålla den angivna texten.
Filtrera valbara alternativ i listan nedan genom att ange en text som återfinns i deras namn.
</div>
</div>
<digi-form-checkbox
@@ -76,7 +76,7 @@
'expanded-tree-node__child-node-expansion-btn--active' : isExpanded
}"
[attr.aria-expanded]="isExpanded"
[attr.aria-label]="getAriaLabelTextForExpansionButton(parentNode, node)"
[attr.aria-label]="node | ariaLabelTextForExpansionBtn: parentNode: parentNode?.expandedChildUuid"
[attr.aria-controls]="'expansion-panel-'+node.uuid"
(click)="onSetExpandedChild(parentNode, node)"
>

9
apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.scss
View File

@@ -133,15 +133,6 @@
&--toggle-all {
margin: 1.25rem $digi--layout--gutter;
}
::ng-deep {
.digi-form-checkbox__label {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
&__child-node-expansion-panel {

4
apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.ts
View File

@@ -160,10 +160,6 @@ export class ExpandedTreeNodeComponent extends UnsubscribeDirective implements O
return this.treeNodesSelectorService.hasSelectedLeafNodeDescendant(treeNode);
}
getAriaLabelTextForExpansionButton(parentTreeNode: TreeNodeModel, treeNode: TreeNodeModel): string {
return this.treeNodesSelectorService.getAriaLabelTextForExpansionButton(parentTreeNode, treeNode);
}
getAriaLabelForToggleAllButton(treeNode: TreeNodeModel): string {
return this.treeNodesSelectorService.getAriaLabelForToggleAllButton(treeNode);
}

5
apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.html
View File

@@ -1,5 +1,5 @@
<digi-util-detect-focus-outside (afOnFocusOutside)="closePanel()">
<digi-util-keydown-handler (afOnEsc)="closePanel()">
<digi-util-keydown-handler (afOnEsc)="closePanelAndFocusControlToggleBtn()">
<section class="tree-nodes-selector-panel">
<header>
<h2 class="tree-nodes-selector-panel__heading">{{headingText}}</h2>
@@ -20,6 +20,7 @@
<div class="tree-nodes-selector-panel__content" *ngIf="pendingRootNode">
<div class="tree-nodes-selector-panel__tree">
<msfa-expanded-tree-node
[headingText]="pendingRootNode.label"
[treeNodeModel]="pendingRootNode"
[visibleChildren]="visibleChildren"
(selectedNodesChanged)="updateExpandedChildPanel($event)"
@@ -32,7 +33,7 @@
[attr.af-aria-label]="'Bekräftar dina val och stänger kontrollen'"
[attr.af-type]="'button'"
[attr.af-size]="ButtonSize.S"
(afOnClick)="closePanel()"
(afOnClick)="closePanelAndFocusControlToggleBtn()"
>
{{confirmationButtonText}}
</digi-button>

2
apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.scss
View File

@@ -7,7 +7,7 @@
.tree-nodes-selector-panel {
position: relative;
background-color: var(--digi--ui--color--background);
min-width: rem(710);
min-width: rem(760);
box-shadow: $msfa__shadow;
border-radius: var(--digi--ui--border--radius);

6
apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.ts
View File

@@ -18,6 +18,7 @@ export class TreeNodesSelectorPanelComponent implements OnInit {
@Input() confirmationButtonText = 'Spara';
@Output() selectedChangesConfirmed = new EventEmitter<TreeNodeModel>();
@Output() closePanelRequested = new EventEmitter<void>();
@Output() focusControlToggleBtnRequested = new EventEmitter<void>();
readonly ButtonSize = ButtonSize;
@@ -51,6 +52,11 @@ export class TreeNodesSelectorPanelComponent implements OnInit {
this.closePanelRequested.emit();
}
closePanelAndFocusControlToggleBtn(): void {
this.closePanel();
this.focusControlToggleBtnRequested.emit();
}
hasSelectedDescendant(treeNode: TreeNodeModel): boolean {
return this.treeNodesSelectorService.hasSelectedLeafNodeDescendant(treeNode);
}

4
apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.html
View File

@@ -1,11 +1,12 @@
<div class="tree-nodes-selector">
<div class="msfa__backdrop" *ngIf="displayPanel" (click)="closePanel()"></div>
<div class="msfa__backdrop" *ngIf="displayPanel" (click)="onClickOutsidePanel()"></div>
<div class="tree-nodes-selector__panel-wrapper">
<button
#togglePanelBtn
(click)="togglePanel()"
[attr.id]="buttonElementId"
[attr.aria-controls]="panelId"
[attr.aria-expanded]="displayPanel"
[ngClass]="{'tree-nodes-selector__toggle-panel-btn--invalid': isInvalid && showValidation}"
type="button"
class="tree-nodes-selector__toggle-panel-btn"
@@ -28,6 +29,7 @@
[confirmationButtonText]="confirmationButtonText"
(selectedChangesConfirmed)="updateTreeNodeSelectorWithSelectedChanges($event)"
(closePanelRequested)="closePanel()"
(focusControlToggleBtnRequested)="focusControlToggleBtn()"
>
</msfa-tree-nodes-selector-panel>
</div>

18
apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.ts
View File

@@ -13,6 +13,7 @@ import {
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { uuid } from '@msfa-utils/uuid';
import { TreeNode, TreeNodeModel, TreeNodesSelectorService } from '../../services/tree-nodes-selector.service';
import { TreeNodesSelectorPanelComponent } from '../tree-nodes-selector-panel/tree-nodes-selector-panel.component';
interface PropagateChangeFn {
(_: unknown): void;
@@ -45,6 +46,8 @@ export class TreeNodesSelectorComponent implements ControlValueAccessor {
@Output() selectedTreeNodesChanged = new EventEmitter<void>();
@ViewChild('togglePanelBtn') togglePanelBtn: ElementRef;
@ViewChild(TreeNodesSelectorPanelComponent)
private treeNodesSelectorPanel: TreeNodesSelectorPanelComponent;
rootNode: TreeNodeModel | null = null;
displayPanel = false;
@@ -91,7 +94,22 @@ export class TreeNodesSelectorComponent implements ControlValueAccessor {
this.displayPanel = false;
}
onClickOutsidePanel(): void {
if (!this.treeNodesSelectorPanel) {
this.closePanel();
return;
}
this.treeNodesSelectorPanel.closePanel();
}
togglePanel(): void {
this.displayPanel = !this.displayPanel;
}
focusControlToggleBtn(): void {
const togglePanelBtnElement = this.togglePanelBtn.nativeElement as HTMLElement;
togglePanelBtnElement.focus();
}
}

9
apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/pipes/aria-label-text-for-expansion-btn.pipe.spec.ts Normal file
View File

@@ -0,0 +1,9 @@
import { TreeNodesSelectorService } from '../services/tree-nodes-selector.service';
import { AriaLabelTextForExpansionBtnPipe } from './aria-label-text-for-expansion-btn.pipe';
describe('AriaLabelTextForExpansionBtnPipe', () => {
it('create an instance', () => {
const pipe = new AriaLabelTextForExpansionBtnPipe(new TreeNodesSelectorService());
expect(pipe).toBeTruthy();
});
});

17
apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/pipes/aria-label-text-for-expansion-btn.pipe.ts Normal file
View File

@@ -0,0 +1,17 @@
import { Pipe, PipeTransform } from '@angular/core';
import { TreeNodeModel, TreeNodesSelectorService } from '../services/tree-nodes-selector.service';
@Pipe({
name: 'ariaLabelTextForExpansionBtn',
})
export class AriaLabelTextForExpansionBtnPipe implements PipeTransform {
constructor(private treeNodesSelectorService: TreeNodesSelectorService) {}
transform(treeNode: TreeNodeModel, parentTreeNode: TreeNodeModel, expandedChildUuid: string): string {
return this.treeNodesSelectorService.getAriaLabelTextForExpansionButton(
parentTreeNode,
treeNode,
expandedChildUuid
);
}
}

15
apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/services/tree-nodes-selector.service.ts
View File

@@ -77,10 +77,19 @@ export class TreeNodesSelectorService {
);
}
getAriaLabelTextForExpansionButton(parentTreeNode: TreeNodeModel, treeNode: TreeNodeModel): string {
const isActiveNode = parentTreeNode && treeNode ? parentTreeNode.expandedChildUuid === treeNode.uuid : false;
/*
Taking expandedChildUuid as a seperate param despite being a property of the parent tree node
because there is no change detection for properties within objects.*/
getAriaLabelTextForExpansionButton(
parentTreeNode: TreeNodeModel,
treeNode: TreeNodeModel,
expandedChildUuid: string
): string {
const isActiveNode = parentTreeNode && treeNode ? expandedChildUuid === treeNode.uuid : false;
return `${isActiveNode ? 'Döljer' : 'Visar'} ${treeNode.grandChildrenItemType} för ${treeNode.label}`;
return `${isActiveNode ? 'Döljer' : 'Visar'} ${
parentTreeNode.grandChildrenItemType ? this.getCleanedText(parentTreeNode.grandChildrenItemType) : 'innehåll'
} för ${treeNode.label}`;
}
hasChildLeafNodes(node: TreeNode): boolean {

3
apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/tree-nodes-selector.module.ts
View File

@@ -4,9 +4,10 @@ import { TreeNodesSelectorPanelComponent } from './components/tree-nodes-selecto
import { TreeNodesSelectorComponent } from './components/tree-nodes-selector/tree-nodes-selector.component';
import { ExpandedTreeNodeComponent } from './components/expanded-tree-node/expanded-tree-node.component';
import { DigiNgTypographyDynamicHeadingModule } from '@af/digi-ng/_typography/typography-dynamic-heading';
import { AriaLabelTextForExpansionBtnPipe } from './pipes/aria-label-text-for-expansion-btn.pipe';
@NgModule({
declarations: [TreeNodesSelectorComponent, TreeNodesSelectorPanelComponent, ExpandedTreeNodeComponent],
declarations: [TreeNodesSelectorComponent, TreeNodesSelectorPanelComponent, ExpandedTreeNodeComponent, AriaLabelTextForExpansionBtnPipe],
imports: [CommonModule, DigiNgTypographyDynamicHeadingModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [TreeNodesSelectorComponent],