Merged PR 1854: refactor(searchbox): improve formatting and add showScannerButton getter

refactor(searchbox): improve formatting and add showScannerButton getter

Ref: #5001

apps/isa-app/src/shared/components/searchbox/searchbox.component.html

@@ -12,14 +12,24 @@
       (focus)="clearHint(); focused.emit(true)"
       (blur)="focused.emit(false)"
       (keyup)="onKeyup($event)"
-      (keyup.enter)="tracker.trackEvent({ action: 'keyup enter', name: 'search' })"
+      (keyup.enter)="
+        tracker.trackEvent({ action: 'keyup enter', name: 'search' })
+      "
       matomoTracker
       #tracker="matomo"
       matomoCategory="searchbox"
     />
-    <div *ngIf="showHint" class="searchbox-hint" (click)="focus()">{{ hint }}</div>
+    <div *ngIf="showHint" class="searchbox-hint" (click)="focus()">
+      {{ hint }}
+    </div>
   </div>
-  <button (click)="clear(); focus()" tabindex="-1" *ngIf="input.value" class="searchbox-clear-btn" type="button">
+  <button
+    (click)="clear(); focus()"
+    tabindex="-1"
+    *ngIf="input.value"
+    class="searchbox-clear-btn"
+    type="button"
+  >
     <shared-icon icon="close" [size]="32"></shared-icon>
   </button>
   <ng-container *ngIf="!loading">
@@ -27,7 +37,7 @@
       tabindex="0"
       class="searchbox-search-btn"
       type="button"
-      *ngIf="!canScan"
+      *ngIf="!showScannerButton"
       (click)="emitSearch()"
       [disabled]="completeValue !== query"
       matomoClickAction="click"
@@ -40,7 +50,7 @@
       tabindex="0"
       class="searchbox-scan-btn"
       type="button"
-      *ngIf="canScan"
+      *ngIf="showScannerButton"
       (click)="startScan()"
       matomoClickAction="open"
       matomoClickCategory="searchbox"

apps/isa-app/src/shared/components/searchbox/searchbox.component.ts

@@ -31,7 +31,11 @@ import { EnvironmentService } from '@core/environment';
   templateUrl: 'searchbox.component.html',
   styleUrls: ['searchbox.component.scss'],
   providers: [
-    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SearchboxComponent), multi: true },
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SearchboxComponent),
+      multi: true,
+    },
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
@@ -54,10 +58,10 @@ export class SearchboxComponent
   autocomplete: UiAutocompleteComponent;
 
   @Input()
-  focusAfterViewInit: boolean = true;
+  focusAfterViewInit = true;
 
   @Input()
-  placeholder: string = '';
+  placeholder = '';
 
   private _query = '';
 
@@ -90,7 +94,7 @@ export class SearchboxComponent
   scanner = false;
 
   @Input()
-  hint: string = '';
+  hint = '';
 
   @Input()
   autocompleteValueSelector: (item: any) => string = (item: any) => item;
@@ -113,6 +117,10 @@ export class SearchboxComponent
     return this.#env.isMobileDevice() && this.scanAdapterService?.isReady();
   }
 
+  get showScannerButton() {
+    return this.canScan && !this.query;
+  }
+
   get canClear() {
     return !!this.query;
   }
@@ -123,9 +131,9 @@ export class SearchboxComponent
 
   subscriptions = new Subscription();
 
-  onChange = (_: any) => {};
+  onChange?: (_: any) => void;
 
-  onTouched = () => {};
+  onTouched?: () => void;
 
   constructor(
     private cdr: ChangeDetectorRef,
@@ -186,12 +194,12 @@ export class SearchboxComponent
     }
   }
 
-  setQuery(query: string, emitEvent: boolean = true, complete?: boolean) {
+  setQuery(query: string, emitEvent = true, complete?: boolean) {
     this._query = query;
     if (emitEvent) {
       this.queryChange.emit(query);
-      this.onChange(query);
-      this.onTouched();
+      this.onChange?.(query);
+      this.onTouched?.();
     }
     if (complete) {
       this.completeValue = query;
@@ -227,7 +235,9 @@ export class SearchboxComponent
   handleArrowUpDownEvent(event: KeyboardEvent) {
     this.autocomplete?.handleKeyboardEvent(event);
     if (this.autocomplete?.activeItem) {
-      const query = this.autocompleteValueSelector(this.autocomplete.activeItem.item);
+      const query = this.autocompleteValueSelector(
+        this.autocomplete.activeItem.item,
+      );
       this.setQuery(query, false, false);
     }
   }