From ee17697af89c76e4711c29d9511942955e1ddb96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20G=C3=A5rdebrink?= Date: Tue, 21 Sep 2021 16:54:16 +0200 Subject: [PATCH] Merge pull request #108 in TEA/mina-sidor-fa-web from feature/TV-623 to develop MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Squashed commit of the following: commit ca49a82df7d52c918ed3540bdca68d63c5c9a6bf Author: arbetsformedlingen_garcn Date: Tue Sep 21 12:24:13 2021 +0200 TV-623 Åtgärdat lintvarningar commit f493987d3213089b7e7f2e455635b5cf13361039 Merge: cf1fa71 2dd9d3d Author: arbetsformedlingen_garcn Date: Tue Sep 21 11:05:43 2021 +0200 Merge branch 'develop' into feature/TV-623 commit cf1fa71006576dd448b0b42c688cb43ddfff8080 Merge: acab6a9 91eeb1d Author: arbetsformedlingen_garcn Date: Tue Sep 21 09:40:24 2021 +0200 Merge branch 'develop' into feature/TV-623 commit acab6a95ffa43d59e86e387658f97cbc2d1b01cb Merge: b131d2f e120e50 Author: arbetsformedlingen_garcn Date: Mon Sep 20 17:39:07 2021 +0200 Merge branch 'develop' into feature/TV-623 commit b131d2fea3e1c7f3c5210d71c5258e8c14fec98d Author: arbetsformedlingen_garcn 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 Date: Mon Sep 20 14:08:46 2021 +0200 Merge branch 'develop' into feature/TV-623 commit dc6a4ad0f6629db2e001a8ffa7895026d2e1a1c0 Author: arbetsformedlingen_garcn Date: Mon Sep 20 13:36:24 2021 +0200 TV-623 adjusted switch commit bdd108b6621ca7bdef61d41d25db9ee6d35e1355 Author: arbetsformedlingen_garcn Date: Mon Sep 20 12:56:38 2021 +0200 TV-623 increased min-width of control commit a2b3d1c42fb287b45f3323a3475d02e667783c9e Author: arbetsformedlingen_garcn 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 Date: Mon Sep 20 12:16:37 2021 +0200 Merge branch 'develop' into feature/TV-623 commit 4ebafb57ef2e4bbbdcb924a1f92f0412257e11f1 Merge: af58d40 bfffed4 Author: arbetsformedlingen_garcn Date: Mon Sep 20 11:25:13 2021 +0200 Merge branch 'develop' into TV-623 commit af58d4009be592115dfcd3df20a1c3a1499d5eb4 Author: arbetsformedlingen_garcn Date: Mon Sep 20 11:24:23 2021 +0200 TV-623 --- .../edit-employee-form.component.html | 1 + .../edit-employee-form.component.ts | 17 +++++++++++++++-- .../src/app/pages/avrop/avrop.component.ts | 2 +- .../deltagare-card/deltagare-card.component.ts | 12 ++++++++++-- .../expanded-tree-node.component.html | 4 ++-- .../expanded-tree-node.component.scss | 9 --------- .../expanded-tree-node.component.ts | 4 ---- .../tree-nodes-selector-panel.component.html | 5 +++-- .../tree-nodes-selector-panel.component.scss | 2 +- .../tree-nodes-selector-panel.component.ts | 6 ++++++ .../tree-nodes-selector.component.html | 4 +++- .../tree-nodes-selector.component.ts | 18 ++++++++++++++++++ ...a-label-text-for-expansion-btn.pipe.spec.ts | 9 +++++++++ .../aria-label-text-for-expansion-btn.pipe.ts | 17 +++++++++++++++++ .../services/tree-nodes-selector.service.ts | 15 ++++++++++++--- .../tree-nodes-selector.module.ts | 3 ++- 16 files changed, 100 insertions(+), 28 deletions(-) create mode 100644 apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/pipes/aria-label-text-for-expansion-btn.pipe.spec.ts create mode 100644 apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/pipes/aria-label-text-for-expansion-btn.pipe.ts diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html index f2bf7b2..9e72199 100644 --- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html +++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html @@ -55,6 +55,7 @@

{ - 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 { diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.ts b/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.ts index 227df83..256e889 100644 --- a/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.ts +++ b/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.ts @@ -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'; diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.ts index e88fa12..b590b6a 100644 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.ts +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.ts @@ -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; diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.html b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.html index 49b38fd..00d98b0 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.html +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.html @@ -29,7 +29,7 @@ (afOnKeyup)="onFilterTextChanged($event, treeNodeModel)" >
- 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.
diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.scss b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.scss index 19a12ff..da46e3b 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.scss +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.scss @@ -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 { diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.ts b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.ts index d28e695..9793879 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.ts +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.ts @@ -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); } diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.html b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.html index e029298..21e05bd 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.html +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.html @@ -1,5 +1,5 @@ - +

{{headingText}}

@@ -20,6 +20,7 @@
{{confirmationButtonText}} diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.scss b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.scss index 2b650b7..1156d17 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.scss +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.scss @@ -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); diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.ts b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.ts index 0f07e3d..922011a 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.ts +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.ts @@ -18,6 +18,7 @@ export class TreeNodesSelectorPanelComponent implements OnInit { @Input() confirmationButtonText = 'Spara'; @Output() selectedChangesConfirmed = new EventEmitter(); @Output() closePanelRequested = new EventEmitter(); + @Output() focusControlToggleBtnRequested = new EventEmitter(); 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); } diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.html b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.html index ab00493..d8fb969 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.html +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.html @@ -1,11 +1,12 @@
-
+
diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.ts b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.ts index 87d9d22..3686f35 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.ts +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.ts @@ -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(); @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(); + } } diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/pipes/aria-label-text-for-expansion-btn.pipe.spec.ts b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/pipes/aria-label-text-for-expansion-btn.pipe.spec.ts new file mode 100644 index 0000000..c360906 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/pipes/aria-label-text-for-expansion-btn.pipe.spec.ts @@ -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(); + }); +}); diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/pipes/aria-label-text-for-expansion-btn.pipe.ts b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/pipes/aria-label-text-for-expansion-btn.pipe.ts new file mode 100644 index 0000000..d73be46 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/pipes/aria-label-text-for-expansion-btn.pipe.ts @@ -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 + ); + } +} diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/services/tree-nodes-selector.service.ts b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/services/tree-nodes-selector.service.ts index a093412..64ece57 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/services/tree-nodes-selector.service.ts +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/services/tree-nodes-selector.service.ts @@ -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 { diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/tree-nodes-selector.module.ts b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/tree-nodes-selector.module.ts index 54920ff..9f9ff63 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/tree-nodes-selector.module.ts +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/tree-nodes-selector.module.ts @@ -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],