Enhance searchbox functionality

Improved the searchbox components to utilize environment service for mobile detection.

-  **Feature**: Integrated EnvironmentService for mobile device detection
- 🛠️ **Refactor**: Cleaned up provider definitions for better readability
- 🎨 **Style**: Reformatted code for consistency in style

#5001
This commit is contained in:
Lorenz Hilpert
2025-04-01 14:42:57 +02:00
parent 119bcd9df9
commit 858242c6dd
2 changed files with 28 additions and 6 deletions

View File

@@ -15,6 +15,7 @@ import {
HostListener,
forwardRef,
Optional,
inject,
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { UiAutocompleteComponent } from '@ui/autocomplete';
@@ -23,12 +24,15 @@ import { containsElement } from '@utils/common';
import { Subscription } from 'rxjs';
import { ScanAdapterService } from '@adapter/scan';
import { injectCancelSearch } from '@shared/services/cancel-subject';
import { EnvironmentService } from '@core/environment';
@Component({
selector: 'shared-searchbox',
templateUrl: 'searchbox.component.html',
styleUrls: ['searchbox.component.scss'],
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SearchboxComponent), multi: true }],
providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SearchboxComponent), multi: true },
],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false,
})
@@ -36,6 +40,8 @@ export class SearchboxComponent
extends UiFormControlDirective<any>
implements AfterViewInit, OnDestroy, AfterContentInit, ControlValueAccessor
{
#env = inject(EnvironmentService);
cancelSearch = injectCancelSearch({ optional: true });
disabled: boolean;
@@ -104,7 +110,7 @@ export class SearchboxComponent
}
get canScan() {
return !this.query && this.scanner && this.scanAdapterService?.isReady();
return this.#env.isMobileDevice() && this.scanAdapterService?.isReady();
}
get canClear() {
@@ -228,7 +234,10 @@ export class SearchboxComponent
@HostListener('window:click', ['$event'])
focusLost(event: MouseEvent) {
if (this.autocomplete?.opend && !containsElement(this.elementRef.nativeElement, event.target as Element)) {
if (
this.autocomplete?.opend &&
!containsElement(this.elementRef.nativeElement, event.target as Element)
) {
this.autocomplete?.close();
}
}

View File

@@ -15,6 +15,7 @@ import {
HostListener,
forwardRef,
Optional,
inject,
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { UiAutocompleteComponent } from '@ui/autocomplete';
@@ -23,12 +24,19 @@ import { Subscription } from 'rxjs';
import { ScanAdapterService } from '@adapter/scan';
import { injectCancelSearch } from '@shared/services/cancel-subject';
import { containsElement } from '@utils/common';
import { EnvironmentService } from '@core/environment';
@Component({
selector: 'ui-searchbox',
templateUrl: 'searchbox.component.html',
styleUrls: ['searchbox.component.scss'],
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => UiSearchboxNextComponent), multi: true }],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => UiSearchboxNextComponent),
multi: true,
},
],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false,
})
@@ -36,6 +44,8 @@ export class UiSearchboxNextComponent
extends UiFormControlDirective<any>
implements AfterViewInit, OnDestroy, AfterContentInit, ControlValueAccessor
{
#env = inject(EnvironmentService);
private readonly _cancelSearch = injectCancelSearch({ optional: true });
disabled: boolean;
@@ -107,7 +117,7 @@ export class UiSearchboxNextComponent
}
get canScan() {
return !this.query && this.scanner && this.scanAdapterService?.isReady();
return this.#env.isMobileDevice() && this.scanAdapterService?.isReady();
}
get canClear() {
@@ -232,7 +242,10 @@ export class UiSearchboxNextComponent
@HostListener('window:click', ['$event'])
focusLost(event: MouseEvent) {
if (this.autocomplete?.opend && !containsElement(this.elementRef.nativeElement, event.target as Element)) {
if (
this.autocomplete?.opend &&
!containsElement(this.elementRef.nativeElement, event.target as Element)
) {
this.autocomplete?.close();
}
}