Added new Icons, Fixed Searchbox Autocomplete

2025-12-28 22:42:11 +01:00 · 2023-05-03 16:20:12 +02:00
parent b8d0153232
commit 11eca1e25a
10 changed files with 78 additions and 13 deletions
--- a/apps/isa-app/src/config/config.feature.json
+++ b/apps/isa-app/src/config/config.feature.json
@@ -263,6 +263,16 @@
                "name": "event-available",
                "data": "M438 830 296 688l58-58 84 84 168-168 58 58-226 226ZM200 976q-33 0-56.5-23.5T120 896V336q0-33 23.5-56.5T200 256h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840 336v560q0 33-23.5 56.5T760 976H200Zm0-80h560V496H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z",
                "viewBox": "0 96 960 960"
+            },
+            {
+                "name": "remove",
+                "data": "M200 606v-60h560v60H200Z",
+                "viewBox": "0 96 960 960"
+            },
+            {
+                "name": "add",
+                "data": "M450 856V606H200v-60h250V296h60v250h250v60H510v250h-60Z",
+                "viewBox": "0 96 960 960"
            }
        ],
        "aliases": [
--- a/apps/isa-app/src/config/config.json
+++ b/apps/isa-app/src/config/config.json
@@ -264,6 +264,16 @@
                "name": "event-available",
                "data": "M438 830 296 688l58-58 84 84 168-168 58 58-226 226ZM200 976q-33 0-56.5-23.5T120 896V336q0-33 23.5-56.5T200 256h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840 336v560q0 33-23.5 56.5T760 976H200Zm0-80h560V496H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z",
                "viewBox": "0 96 960 960"
+            },
+            {
+                "name": "remove",
+                "data": "M200 606v-60h560v60H200Z",
+                "viewBox": "0 96 960 960"
+            },
+            {
+                "name": "add",
+                "data": "M450 856V606H200v-60h250V296h60v250h250v60H510v250h-60Z",
+                "viewBox": "0 96 960 960"
            }
        ],
        "aliases": [
--- a/apps/isa-app/src/config/config.test.json
+++ b/apps/isa-app/src/config/config.test.json
@@ -264,6 +264,16 @@
                "name": "event-available",
                "data": "M438 830 296 688l58-58 84 84 168-168 58 58-226 226ZM200 976q-33 0-56.5-23.5T120 896V336q0-33 23.5-56.5T200 256h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840 336v560q0 33-23.5 56.5T760 976H200Zm0-80h560V496H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z",
                "viewBox": "0 96 960 960"
+            },
+            {
+                "name": "remove",
+                "data": "M200 606v-60h560v60H200Z",
+                "viewBox": "0 96 960 960"
+            },
+            {
+                "name": "add",
+                "data": "M450 856V606H200v-60h250V296h60v250h250v60H510v250h-60Z",
+                "viewBox": "0 96 960 960"
            }
        ],
        "aliases": [
--- a/apps/page/catalog/src/lib/article-search/article-search.component.ts
+++ b/apps/page/catalog/src/lib/article-search/article-search.component.ts
@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/
 import { ActivatedRoute } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { EnvironmentService } from '@core/environment';
-import { UiFilterAutocompleteProvider } from '@ui/filter';
 import { isEqual } from 'lodash';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { filter, first, map, takeUntil, withLatestFrom } from 'rxjs/operators';
@@ -10,6 +9,7 @@ import { ArticleSearchService } from './article-search.store';
 import { FocusSearchboxEvent } from './focus-searchbox.event';
 import { ArticleSearchMainAutocompleteProvider } from './providers';
 import { ProductCatalogNavigationService } from '@shared/services';
+import { FilterAutocompleteProvider } from 'apps/shared/components/filter/src/lib';

@Component({
  selector: 'page-article-search',
@@ -18,7 +18,7 @@ import { ProductCatalogNavigationService } from '@shared/services';
  providers: [
    FocusSearchboxEvent,
    {
-      provide: UiFilterAutocompleteProvider,
+      provide: FilterAutocompleteProvider,
      useClass: ArticleSearchMainAutocompleteProvider,
      multi: true,
    },
--- a/apps/page/catalog/src/lib/article-search/providers/article-search-main-autocomplete.provider.ts
+++ b/apps/page/catalog/src/lib/article-search/providers/article-search-main-autocomplete.provider.ts
@@ -1,18 +1,18 @@
 import { Injectable } from '@angular/core';
 import { DomainCatalogService } from '@domain/catalog';
-import { UiFilterAutocomplete, UiFilterAutocompleteProvider, UiInput } from '@ui/filter';
+import { FilterAutocomplete, FilterAutocompleteProvider, FilterInput } from 'apps/shared/components/filter/src/lib';
 import { Observable, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';

@Injectable()
-export class ArticleSearchMainAutocompleteProvider extends UiFilterAutocompleteProvider {
+export class ArticleSearchMainAutocompleteProvider extends FilterAutocompleteProvider {
  for = 'catalog';

  constructor(private domainCatalogSearch: DomainCatalogService) {
    super();
  }

-  complete(input: UiInput): Observable<UiFilterAutocomplete[]> {
+  complete(input: FilterInput): Observable<FilterAutocomplete[]> {
    const token = input?.parent?.parent?.getQueryToken();
    const filter = token?.filter;
    const type = Object.keys(token?.input).join(';');
--- a/apps/page/catalog/src/lib/article-search/search-main/search-main.component.ts
+++ b/apps/page/catalog/src/lib/article-search/search-main/search-main.component.ts
@@ -28,7 +28,7 @@ export class ArticleSearchMainComponent implements OnInit, OnDestroy {
  subscriptions = new Subscription();

  @ViewChild(FilterInputGroupMainComponent, { static: false })
-  uiInputGroupMain: FilterInputGroupMainComponent;
+  sharedFilterInputGroupMain: FilterInputGroupMainComponent;

  get isTablet() {
    return this._environment.isTablet();
@@ -92,7 +92,7 @@ export class ArticleSearchMainComponent implements OnInit, OnDestroy {
  }

  search(filter: Filter) {
-    this.uiInputGroupMain.cancelAutocomplete();
+    this.sharedFilterInputGroupMain.cancelAutocomplete();
    this.searchService.setFilter(filter);
    this.searchService.search({ clear: true });
  }
--- a/apps/page/catalog/src/lib/article-search/search-results/search-results.component.html
+++ b/apps/page/catalog/src/lib/article-search/search-results/search-results.component.html
@@ -1,4 +1,15 @@
 <div class="page-search-results__header bg-background-liste flex flex-col items-end pb-4">
+  <shared-filter-input-group-main
+    *ngIf="filter$ | async; let filter"
+    class="block mx-auto max-w-[37.5rem]"
+    [hint]="searchboxHint$ | async"
+    [loading]="fetching$ | async"
+    [inputGroup]="filter?.input | group: 'main'"
+    (search)="search(filter)"
+    [showDescription]="false"
+    [scanner]="true"
+  ></shared-filter-input-group-main>
+
  <a
    [class.active]="hasFilter$ | async"
    class="page-search-results__filter h-14 rounded-card font-bold px-5 mb-4 text-lg bg-cadet-blue flex flex-row flex-nowrap items-center justify-center"
--- a/apps/page/catalog/src/lib/article-search/search-results/search-results.component.ts
+++ b/apps/page/catalog/src/lib/article-search/search-results/search-results.component.ts
@@ -16,7 +16,7 @@ import { ArticleSearchService } from '../article-search.store';
 import { AddedToCartModalComponent } from './added-to-cart-modal/added-to-cart-modal.component';
 import { SearchResultItemComponent } from './search-result-item.component';
 import { ProductCatalogNavigationService } from '@shared/services';
-import { Filter } from 'apps/shared/components/filter/src/lib';
+import { Filter, FilterInputGroupMainComponent } from 'apps/shared/components/filter/src/lib';

@Component({
  selector: 'page-search-results',
@@ -29,6 +29,9 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy {
  @ViewChild('scrollContainer', { static: true })
  scrollContainer: CdkVirtualScrollViewport;

+  @ViewChild(FilterInputGroupMainComponent, { static: false })
+  sharedFilterInputGroupMain: FilterInputGroupMainComponent;
+
  results$ = this.searchService.items$;
  fetching$ = this.searchService.fetching$;
  hits$ = this.searchService.hits$;
@@ -37,6 +40,8 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy {

  selectedItemIds$ = this.searchService.selectedItemIds$;

+  searchboxHint$ = this.searchService.searchboxHint$;
+
  selectedItems$ = combineLatest([this.results$, this.selectedItemIds$]).pipe(
    map(([items, selectedItemIds]) => {
      return items?.filter((item) => selectedItemIds?.find((selectedItemId) => item.id === selectedItemId));
@@ -157,7 +162,12 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy {
    this.unselectAll();
  }

-  search() {
+  search(filter?: Filter) {
+    if (!!filter) {
+      this.sharedFilterInputGroupMain.cancelAutocomplete();
+      this.searchService.setFilter(filter);
+    }
+
    this.searchService.search({ clear: true });
  }

--- a/apps/page/catalog/src/lib/article-search/search-results/search-results.module.ts
+++ b/apps/page/catalog/src/lib/article-search/search-results/search-results.module.ts
@@ -15,7 +15,9 @@ import { SearchResultItemLoadingComponent } from './search-result-item-loading.c
 import { SearchResultItemComponent } from './search-result-item.component';
 import { ArticleSearchResultsComponent } from './search-results.component';
 import { SearchResultSelectedPipe } from './selected/search-result-selected.pipe';
-import { OrderByFilterModule } from 'apps/shared/components/filter/src/lib';
+import { FilterAutocompleteProvider, FilterNextModule, OrderByFilterModule } from 'apps/shared/components/filter/src/lib';
+import { FocusSearchboxEvent } from '../focus-searchbox.event';
+import { ArticleSearchMainAutocompleteProvider } from '../providers';

@NgModule({
  imports: [
@@ -30,6 +32,7 @@ import { OrderByFilterModule } from 'apps/shared/components/filter/src/lib';
    OrderByFilterModule,
    ScrollingModule,
    UiTooltipModule,
+    FilterNextModule,
  ],
  exports: [ArticleSearchResultsComponent, SearchResultItemComponent],
  declarations: [
@@ -40,6 +43,13 @@ import { OrderByFilterModule } from 'apps/shared/components/filter/src/lib';
    SearchResultSelectedPipe,
    AddedToCartModalComponent,
  ],
-  providers: [],
+  providers: [
+    FocusSearchboxEvent,
+    {
+      provide: FilterAutocompleteProvider,
+      useClass: ArticleSearchMainAutocompleteProvider,
+      multi: true,
+    },
+  ],
 })
 export class SearchResultsModule {}
--- a/apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.html
+++ b/apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.html
@@ -11,8 +11,12 @@
      <div class="grow">
        {{ input?.label }}
      </div>
-      <span class="w-[14px] h-[14px] flex items-center justify-center text-2xl text-[#596470]" *ngIf="activeInput !== input">+</span>
-      <span class="w-[14px] h-[14px] flex items-center justify-center text-2xl text-black" *ngIf="activeInput === input">-</span>
+      <span class="w-[14px] h-[14px] flex items-center justify-center text-2xl text-[#596470]" *ngIf="activeInput !== input"
+        ><ui-svg-icon icon="add"></ui-svg-icon
+      ></span>
+      <span class="w-[14px] h-[14px] flex items-center justify-center text-2xl text-black" *ngIf="activeInput === input"
+        ><ui-svg-icon class="mr-[1px]" icon="remove"></ui-svg-icon
+      ></span>
    </button>
  </div>
 </div>