fix: allow navigation to entities from disabled entity-select (#1256)

Co-authored-by: Simon <33730997+TheSlimvReal@users.noreply.github.com>

src/app/child-dev-project/children/child-block/child-block.component.html

@@ -3,11 +3,11 @@
   (mouseenter)="showTooltip()"
   (mouseleave)="hideTooltip()"
   (click)="showDetailsPage()"
-  [ngClass]="{ inactive: !entity.isActive, clickable: !linkDisabled }"
+  [ngClass]="{ inactive: !entity.isActive }"
   class="truncate-text"
 >
   <img [src]="entity.photo?.photo?.value" class="child-pic" i18n-alt="Alternative text for small picture" alt="Picture of a child"/>
-  <span class="underline-on-hover mat-body-1">{{ entity?.name }}</span>
+  <span class="mat-body-1">{{ entity?.name }}</span>
   <span style="font-size: x-small" *ngIf="entity?.projectNumber"
     > ({{ entity?.projectNumber }})</span
   >

src/app/child-dev-project/children/child-block/child-block.component.scss

@@ -29,7 +29,3 @@
 .inactive {
   color: grey;
 }
-
-.clickable {
-  cursor: pointer;
-}

src/app/child-dev-project/schools/school-block/school-block.component.html

@@ -1,4 +1,4 @@
 <span>
   <app-fa-dynamic-icon [icon]="icon" class="icon"></app-fa-dynamic-icon>
-  <span class="underline-on-hover">{{ entity?.name }}</span>
+  <span>{{ entity?.name }}</span>
 </span>

src/app/core/entity-components/entity-utils/entity-select/entity-select.component.html

@@ -22,7 +22,7 @@
       >
         <app-display-entity
           [entityToDisplay]="entity"
-          [linkDisabled]="true"
+          [linkDisabled]="formControl.enabled"
         ></app-display-entity>
         <fa-icon
           *ngIf="removable && formControl.enabled"

src/app/core/entity-components/entity-utils/entity-select/entity-select.component.scss

@@ -14,6 +14,6 @@
 }
 
 .remove-item {
-  margin: 0.15em;
+  margin-left: 0.5em;
   cursor: pointer;
 }

src/app/core/entity-components/entity-utils/view-components/display-entity/display-entity.component.html

@@ -1,15 +1,17 @@
-<ng-container
-  *ngIf="entityBlockComponent && entityToDisplay"
-  [appDynamicComponent]="{
-    component: entityBlockComponent,
-    config: {
-      entity: entityToDisplay,
-      linkDisabled: linkDisabled,
-      tooltipDisabled: true
-    }
-  }"
->
-</ng-container>
-<ng-container *ngIf="!entityBlockComponent">
-  {{ entityToDisplay?.toString() }}
-</ng-container>
+<span [ngClass]="{ clickable: !linkDisabled }">
+  <ng-container
+    *ngIf="entityBlockComponent && entityToDisplay"
+    [appDynamicComponent]="{
+      component: entityBlockComponent,
+      config: {
+        entity: entityToDisplay,
+        linkDisabled: linkDisabled,
+        tooltipDisabled: true
+      }
+    }"
+  >
+  </ng-container>
+  <ng-container *ngIf="!entityBlockComponent">
+    {{ entityToDisplay?.toString() }}
+  </ng-container>
+</span>

src/app/core/entity-components/entity-utils/view-components/display-entity/display-entity.component.scss

@@ -0,0 +1,7 @@
+
+.clickable {
+  cursor: pointer;
+}
+.clickable:hover {
+  text-decoration: underline;
+}

src/styles.scss

@@ -266,8 +266,3 @@ $standard-icon-size: 1.5em;
   border-left: $standard-margin-small solid;
   border-color: transparent;
 }
-
-.underline-on-hover:hover {
-  text-decoration: underline;
-  cursor: pointer;
-}