From 527c533958e14d5ab83b99c8d08b6a553cde1ec0 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Mon, 28 Dec 2020 12:32:21 +0100
Subject: [PATCH] improve performance of the toggle dropdown button

---
 .../toggleable-dropdown-button.component.html     | 14 +++++++++++---
 .../toggleable-dropdown-button.component.ts       | 15 +++++++--------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
index 5b58025d1..404ea9d4d 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
@@ -1,8 +1,16 @@
 <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-left-0 border-right-0 border-bottom" role="menuitem" (click)="toggleItem()">
   <div class="selected-icon mr-1">
-    <svg *ngIf="getSelectedIconName() !== ''" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-      <use attr.xlink:href="assets/bootstrap-icons.svg#{{getSelectedIconName()}}" />
-    </svg>
+    <ng-container *ngIf="isChecked()">
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
+        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
+      </svg>
+    </ng-container>
+    <ng-container *ngIf="isPartiallyChecked()">
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-dash" viewBox="0 0 16 16">
+        <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
+      </svg>
+    </ng-container>
+    
   </div>
   <div class="mr-1">
     <app-tag *ngIf="isTag; else displayName" [tag]="item" [clickable]="true" linkTitle="Filter by tag"></app-tag>
diff --git a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts
index 1d42b0946..f082dfe67 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts
@@ -40,13 +40,12 @@ export class ToggleableDropdownButtonComponent {
     this.toggle.emit()
   }
 
-  getSelectedIconName() {
-    if (this.state == ToggleableItemState.Selected) {
-      return "check"
-    } else if (this.state == ToggleableItemState.PartiallySelected) {
-      return "dash"
-    } else {
-      return ""
-    }
+  isChecked() {
+    return this.state == ToggleableItemState.Selected
   }
+
+  isPartiallyChecked() {
+    return this.state == ToggleableItemState.PartiallySelected
+  }
+
 }