From 91eeb1d8dc7f50a429ef2cd988c16be732225acb Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date: Tue, 21 Sep 2021 07:02:05 +0200
Subject: [PATCH] =?UTF-8?q?feat(employee):=20Utf=C3=B6rande=20verksamheter?=
 =?UTF-8?q?=20select=20is=20now=20wrapping=20long=20text=20instead=20of=20?=
 =?UTF-8?q?ellipsis.=20Also=20when=20toggling=20the=20"Alla=20utf=C3=B6ran?=
 =?UTF-8?q?de=20verksamheter"=20checkbox=20the=20select=20is=20resetted.?=
 =?UTF-8?q?=20(TV-620)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Squashed commit of the following:

commit 93d305948a5b5570882f1bbcafcef539105f7da5
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Sep 20 13:45:35 2021 +0200

    Updated utförande verksamheter to make the text visible with large texts
---
 .../edit-employee-form.component.ts           |  6 ++--
 .../expanded-tree-node.component.html         |  9 +++--
 .../expanded-tree-node.component.scss         | 34 ++++++++-----------
 .../utforande-verksamheter.service.ts         | 14 ++++----
 4 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.ts b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.ts
index 849270d..0edb3a6 100644
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.ts
@@ -102,8 +102,7 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
             this.utforandeVerksamheterFormControlName,
             this.utforandeVerksamheterService.getTreeNodeDataFromUtforandeVerksamheter(
               this.availableUtforandeVerksamheter,
-              this.employee?.utforandeVerksamheter,
-              this.employee?.allaUtforandeVerksamheter
+              this.employee?.utforandeVerksamheter
             ),
           ],
         ])
@@ -174,8 +173,7 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
         utforandeVerksamheter: new FormControl(
           this.utforandeVerksamheterService.getTreeNodeDataFromUtforandeVerksamheter(
             this.availableUtforandeVerksamheter,
-            this.employee?.utforandeVerksamheter,
-            this.employee?.allaUtforandeVerksamheter
+            this.employee?.utforandeVerksamheter
           ),
           []
         ),
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 4028756..49b38fd 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
@@ -80,12 +80,11 @@
       [attr.aria-controls]="'expansion-panel-'+node.uuid"
       (click)="onSetExpandedChild(parentNode, node)"
     >
-      <span class="expanded-tree-node__child-node-expansion-btn__text">{{node.label}}</span>
       <span
-        class="expanded-tree-node__child-node-expansion-btn__has-selection-dot"
-        *ngIf="hasSelectedDescendant(node)"
-        aria-hidden="true"
-      ></span>
+        class="expanded-tree-node__child-node-expansion-btn__text"
+        [ngClass]="{'expanded-tree-node__child-node-expansion-btn__text--selected': hasSelectedDescendant(node)}"
+        >{{node.label}}</span
+      >
       <digi-icon-arrow-right class="expanded-tree-node__child-node-expansion-btn__icon"></digi-icon-arrow-right>
     </button>
     <div
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 2a3ed63..19a12ff 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
@@ -42,9 +42,6 @@
       h5,
       h6 {
         max-width: 100%;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
       }
     }
   }
@@ -74,7 +71,7 @@
   }
 
   &__child-node-expansion-btn {
-    display: inline-flex;
+    display: flex;
     padding: 0.3125rem 0.9375rem;
     justify-content: space-between;
     width: 100%;
@@ -83,10 +80,8 @@
     border-width: 0;
     background-color: transparent;
     align-items: center;
-    white-space: nowrap;
     font-size: var(--digi--typography--font-size--s);
-    text-align: center;
-    position: relative;
+    gap: var(--digi--layout--gutter--s);
 
     &:hover,
     &:focus {
@@ -104,21 +99,22 @@
     }
 
     &__text {
+      display: flex;
+      align-items: center;
       text-align: left;
+      position: relative;
       flex-grow: 1;
-      margin-right: $digi--layout--gutter--s;
-      display: block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
+      padding-right: 1.2em;
 
-    &__has-selection-dot {
-      width: 1rem;
-      height: 1rem;
-      border-radius: 50%;
-      background-color: var(--digi--ui--color--success);
-      margin-right: $digi--layout--gutter--s;
+      &--selected::after {
+        content: '';
+        width: 1em;
+        height: 1em;
+        border-radius: 100%;
+        background-color: var(--digi--ui--color--success);
+        position: absolute;
+        right: 0;
+      }
     }
 
     &__icon {
diff --git a/apps/mina-sidor-fa/src/app/shared/services/utforande-verksamheter/utforande-verksamheter.service.ts b/apps/mina-sidor-fa/src/app/shared/services/utforande-verksamheter/utforande-verksamheter.service.ts
index 08f1f25..25b1e6b 100644
--- a/apps/mina-sidor-fa/src/app/shared/services/utforande-verksamheter/utforande-verksamheter.service.ts
+++ b/apps/mina-sidor-fa/src/app/shared/services/utforande-verksamheter/utforande-verksamheter.service.ts
@@ -41,8 +41,7 @@ export class UtforandeVerksamheterService {
 
   getTreeNodeDataFromUtforandeVerksamheter(
     availableUtforandeVerksamhetList: UtforandeVerksamhet[],
-    selectedUtforandeVerksamhetList: EmployeeUtforandeVerksamhet[],
-    selectAll = false
+    selectedUtforandeVerksamhetList: EmployeeUtforandeVerksamhet[]
   ): TreeNode | null {
     let treeNode: TreeNode | null = null;
 
@@ -66,17 +65,18 @@ export class UtforandeVerksamheterService {
           const utforandeVerksahmetTreeNode: TreeNode = {
             label: utforandeVerksamhet.name,
             toggleAllChildrenLabel: 'Välj alla adresser',
-            isSelected:
-              selectAll || this.isSelectedUtforandeVerksamhet(utforandeVerksamhet, selectedUtforandeVerksamhetList),
+            isSelected: this.isSelectedUtforandeVerksamhet(utforandeVerksamhet, selectedUtforandeVerksamhetList),
             value: utforandeVerksamhet,
             childItemType: 'Adresser',
             children: utforandeVerksamhet.adresser
               ? utforandeVerksamhet.adresser.map(adress => {
                   return {
                     label: adress.name,
-                    isSelected:
-                      selectAll ||
-                      this.isSelectedUtforandeAdress(utforandeVerksamhet.id, adress, selectedUtforandeVerksamhetList),
+                    isSelected: this.isSelectedUtforandeAdress(
+                      utforandeVerksamhet.id,
+                      adress,
+                      selectedUtforandeVerksamhetList
+                    ),
                     value: adress,
                   };
                 })