From c787107a4cbf62ffa8d394d8afc2944bd03a2568 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 3 Feb 2024 09:21:16 +0100
Subject: [PATCH] Improve click handling

---
 libs/ui/src/lib/assistant/assistant.html | 306 +++++++++++------------
 1 file changed, 153 insertions(+), 153 deletions(-)

diff --git a/libs/ui/src/lib/assistant/assistant.html b/libs/ui/src/lib/assistant/assistant.html
index 682d2227e..51070a642 100644
--- a/libs/ui/src/lib/assistant/assistant.html
+++ b/libs/ui/src/lib/assistant/assistant.html
@@ -1,169 +1,169 @@
-<div
-  [style.width]="deviceType === 'mobile' ? '85vw' : '30rem'"
-  (click)="$event.stopPropagation();"
-  (keydown.tab)="$event.stopPropagation()"
->
-  <div class="align-items-center d-flex search-container">
-    <ion-icon class="ml-2 mr-0" name="search-outline" />
-    <input
-      #search
-      autocomplete="off"
-      autocorrect="off"
-      class="border-0 p-2 w-100"
-      name="search"
-      type="text"
-      [formControl]="searchFormControl"
-      [placeholder]="placeholder"
-    />
-    <div
-      *ngIf="deviceType !== 'mobile' && !searchFormControl.value"
-      class="hot-key-hint mx-1 px-1"
-    >
-      /
-    </div>
-    <button
-      *ngIf="searchFormControl.value"
-      class="h-100 no-min-width px-3 rounded-0"
-      mat-button
-      (click)="initialize()"
-    >
-      <ion-icon class="m-0" name="close-circle-outline" />
-    </button>
-    <button
-      *ngIf="!searchFormControl.value"
-      class="h-100 no-min-width px-3 rounded-0"
-      mat-button
-      (click)="onCloseAssistant()"
-    >
-      <ion-icon class="m-0" name="close-outline" />
-    </button>
-  </div>
+<div (click)="$event.stopPropagation()">
   <div
-    *ngIf="isLoading || searchFormControl.value"
-    class="overflow-auto py-3 result-container"
+    [style.width]="deviceType === 'mobile' ? '85vw' : '30rem'"
+    (keydown.tab)="$event.stopPropagation()"
   >
-    <div>
-      <div class="h6 mb-1 px-2" i18n>Holdings</div>
-      <gf-assistant-list-item
-        *ngFor="let searchResultItem of searchResults?.holdings"
-        mode="holding"
-        [item]="searchResultItem"
-        (clicked)="onCloseAssistant()"
+    <div class="align-items-center d-flex search-container">
+      <ion-icon class="ml-2 mr-0" name="search-outline" />
+      <input
+        #search
+        autocomplete="off"
+        autocorrect="off"
+        class="border-0 p-2 w-100"
+        name="search"
+        type="text"
+        [formControl]="searchFormControl"
+        [placeholder]="placeholder"
       />
-      <ng-container *ngIf="searchResults?.holdings?.length === 0">
-        <ngx-skeleton-loader
-          *ngIf="isLoading"
-          animation="pulse"
-          class="mx-2"
-          [theme]="{
+      <div
+        *ngIf="deviceType !== 'mobile' && !searchFormControl.value"
+        class="hot-key-hint mx-1 px-1"
+      >
+        /
+      </div>
+      <button
+        *ngIf="searchFormControl.value"
+        class="h-100 no-min-width px-3 rounded-0"
+        mat-button
+        (click)="initialize()"
+      >
+        <ion-icon class="m-0" name="close-circle-outline" />
+      </button>
+      <button
+        *ngIf="!searchFormControl.value"
+        class="h-100 no-min-width px-3 rounded-0"
+        mat-button
+        (click)="onCloseAssistant()"
+      >
+        <ion-icon class="m-0" name="close-outline" />
+      </button>
+    </div>
+    <div
+      *ngIf="isLoading || searchFormControl.value"
+      class="overflow-auto py-3 result-container"
+    >
+      <div>
+        <div class="h6 mb-1 px-2" i18n>Holdings</div>
+        <gf-assistant-list-item
+          *ngFor="let searchResultItem of searchResults?.holdings"
+          mode="holding"
+          [item]="searchResultItem"
+          (clicked)="onCloseAssistant()"
+        />
+        <ng-container *ngIf="searchResults?.holdings?.length === 0">
+          <ngx-skeleton-loader
+            *ngIf="isLoading"
+            animation="pulse"
+            class="mx-2"
+            [theme]="{
             height: '1.5rem',
             width: '100%'
           }"
+          />
+          <div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div>
+        </ng-container>
+      </div>
+      <div *ngIf="hasPermissionToAccessAdminControl" class="mt-3">
+        <div class="h6 mb-1 px-2" i18n>Asset Profiles</div>
+        <gf-assistant-list-item
+          *ngFor="let searchResultItem of searchResults?.assetProfiles"
+          mode="assetProfile"
+          [item]="searchResultItem"
+          (clicked)="onCloseAssistant()"
         />
-        <div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div>
-      </ng-container>
-    </div>
-    <div *ngIf="hasPermissionToAccessAdminControl" class="mt-3">
-      <div class="h6 mb-1 px-2" i18n>Asset Profiles</div>
-      <gf-assistant-list-item
-        *ngFor="let searchResultItem of searchResults?.assetProfiles"
-        mode="assetProfile"
-        [item]="searchResultItem"
-        (clicked)="onCloseAssistant()"
-      />
-      <ng-container *ngIf="searchResults?.assetProfiles?.length === 0">
-        <ngx-skeleton-loader
-          *ngIf="isLoading"
-          animation="pulse"
-          class="mx-2"
-          [theme]="{
+        <ng-container *ngIf="searchResults?.assetProfiles?.length === 0">
+          <ngx-skeleton-loader
+            *ngIf="isLoading"
+            animation="pulse"
+            class="mx-2"
+            [theme]="{
             height: '1.5rem',
             width: '100%'
           }"
-        />
-        <div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div>
-      </ng-container>
+          />
+          <div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div>
+        </ng-container>
+      </div>
     </div>
   </div>
-</div>
-<form [formGroup]="filterForm">
-  <div
-    *ngIf="!(isLoading || searchFormControl.value) && user?.settings?.isExperimentalFeatures"
-    class="filter-container"
-  >
-    <div class="p-3">
-      <mat-form-field appearance="outline" class="w-100 without-hint">
-        <mat-label i18n>Date Range</mat-label>
-        <mat-select
-          [formControl]="dateRangeFormControl"
-          (selectionChange)="onChangeDateRange($event.value)"
-        >
-          @for (range of dateRangeOptions; track range) {
-          <mat-option [value]="range.value">{{ range.label }}</mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-    </div>
-    <mat-tab-group
-      animationDuration="0"
-      mat-align-tabs="start"
-      [mat-stretch-tabs]="false"
-      (click)="$event.stopPropagation();"
+  <form [formGroup]="filterForm">
+    <div
+      *ngIf="!(isLoading || searchFormControl.value) && user?.settings?.isExperimentalFeatures"
+      class="filter-container"
     >
-      <mat-tab>
-        <ng-template mat-tab-label
-          ><ion-icon name="albums-outline" /><span
-            class="d-none d-sm-block ml-2"
-            i18n
-            >Accounts</span
-          ></ng-template
-        >
-        <div class="p-3">
-          <mat-radio-group color="primary" formControlName="account">
-            <mat-radio-button class="d-flex flex-column" i18n [value]="null"
-              >No account</mat-radio-button
-            >
-            @for (account of accounts; track account.id) {
-            <mat-radio-button class="d-flex flex-column" [value]="account.id"
-              >{{ account.name }}</mat-radio-button
-            >
-            }
-          </mat-radio-group>
-        </div>
-      </mat-tab>
-      <mat-tab>
-        <ng-template mat-tab-label
-          ><ion-icon name="pricetag-outline" /><span
-            class="d-none d-sm-block ml-2"
-            i18n
-            >Tags</span
-          ></ng-template
-        >
-        <div class="p-3">
-          <mat-radio-group color="primary" formControlName="tag">
-            <mat-radio-button class="d-flex flex-column" i18n [value]="null"
-              >No tag</mat-radio-button
-            >
-            @for (tag of tags; track tag.id) {
-            <mat-radio-button class="d-flex flex-column" [value]="tag.id"
-              >{{ tag.name }}</mat-radio-button
-            >
+      <div class="p-3">
+        <mat-form-field appearance="outline" class="w-100 without-hint">
+          <mat-label i18n>Date Range</mat-label>
+          <mat-select
+            [formControl]="dateRangeFormControl"
+            (selectionChange)="onChangeDateRange($event.value)"
+          >
+            @for (range of dateRangeOptions; track range) {
+            <mat-option [value]="range.value">{{ range.label }}</mat-option>
             }
-          </mat-radio-group>
-        </div>
-      </mat-tab>
-    </mat-tab-group>
-    <div class="p-3">
-      <button
-        class="w-100"
-        color="primary"
-        i18n
-        mat-flat-button
-        [disabled]="!hasFilter(filterForm.value)"
-        (click)="onResetFilters()"
+          </mat-select>
+        </mat-form-field>
+      </div>
+      <mat-tab-group
+        animationDuration="0"
+        mat-align-tabs="start"
+        [mat-stretch-tabs]="false"
       >
-        Reset Filters
-      </button>
+        <mat-tab>
+          <ng-template mat-tab-label
+            ><ion-icon name="albums-outline" /><span
+              class="d-none d-sm-block ml-2"
+              i18n
+              >Accounts</span
+            ></ng-template
+          >
+          <div class="p-3">
+            <mat-radio-group color="primary" formControlName="account">
+              <mat-radio-button class="d-flex flex-column" i18n [value]="null"
+                >No account</mat-radio-button
+              >
+              @for (account of accounts; track account.id) {
+              <mat-radio-button class="d-flex flex-column" [value]="account.id"
+                >{{ account.name }}</mat-radio-button
+              >
+              }
+            </mat-radio-group>
+          </div>
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label
+            ><ion-icon name="pricetag-outline" /><span
+              class="d-none d-sm-block ml-2"
+              i18n
+              >Tags</span
+            ></ng-template
+          >
+          <div class="p-3">
+            <mat-radio-group color="primary" formControlName="tag">
+              <mat-radio-button class="d-flex flex-column" i18n [value]="null"
+                >No tag</mat-radio-button
+              >
+              @for (tag of tags; track tag.id) {
+              <mat-radio-button class="d-flex flex-column" [value]="tag.id"
+                >{{ tag.name }}</mat-radio-button
+              >
+              }
+            </mat-radio-group>
+          </div>
+        </mat-tab>
+      </mat-tab-group>
+      <div class="p-3">
+        <button
+          class="w-100"
+          color="primary"
+          i18n
+          mat-flat-button
+          [disabled]="!hasFilter(filterForm.value)"
+          (click)="onResetFilters()"
+        >
+          Reset Filters
+        </button>
+      </div>
     </div>
-  </div>
-</form>
+  </form>
+</div>