#1250 Color Filter Button; #1248 Disable Buttons

apps/page/customer/src/lib/customer-search/customer-search.service.ts

@@ -20,13 +20,20 @@ export abstract class CustomerSearch implements OnInit, OnDestroy {
 
   private destroy$ = new Subject();
 
-  public filtersLoaded$ = new BehaviorSubject<boolean>(false);
+  filtersLoaded$ = new BehaviorSubject<boolean>(false);
 
-  public queryFilter$ = new BehaviorSubject<QueryFilter>({
+  queryFilter$ = new BehaviorSubject<QueryFilter>({
     query: '',
     filters: [],
   });
 
+  queryFilterEmpty$ = this.queryFilter$.pipe(
+    map((qf) => {
+      return !qf.query && Object.entries(this.getSelecteFiltersAsDictionary()).length === 0;
+    }),
+    tap(console.log.bind(window))
+  );
+
   get queryFilter() {
     return this.queryFilter$.value;
   }

apps/page/customer/src/lib/customer-search/search-filter/search-filter.component.html

@@ -9,7 +9,7 @@
     class="apply-filter"
     [class.loading]="search.searchState === 'fetching'"
     (click)="applyFilters()"
-    [disabled]="search.searchState === 'fetching'"
+    [disabled]="search.searchState === 'fetching' || search.queryFilterEmpty$ | async"
   >
     <span *ngIf="search.searchState !== 'fetching'">
       Filter anwenden

apps/page/customer/src/lib/customer-search/search-filter/search-filter.component.scss

@@ -12,6 +12,10 @@ button.apply-filter {
   min-width: 201px;
 }
 
+button.apply-filter:disabled {
+  @apply bg-inactive-customer;
+}
+
 button.apply-filter.loading {
   padding-top: 15px;
   padding-bottom: 17px;

apps/page/customer/src/lib/customer-search/shared/customer-searchbox/customer-searchbox.component.html

@@ -14,12 +14,7 @@
     <ui-searchbox-warning *ngIf="searchState === 'empty'">
       Keine Suchergebnisse
     </ui-searchbox-warning>
-    <button
-      *ngIf="queryControl?.value?.length"
-      type="reset"
-      uiSearchboxClearButton
-      (click)="queryControl.reset(); input.focus()"
-    >
+    <button *ngIf="queryControl?.value?.length" type="reset" uiSearchboxClearButton (click)="queryControl.reset(); input.focus()">
       <ui-icon icon="close" size="22px"></ui-icon>
     </button>
     <button
@@ -27,33 +22,16 @@
       type="submit"
       uiSearchboxSearchButton
       (click)="startSearch()"
-      [disabled]="searchState === 'fetching'"
+      [disabled]="searchState === 'fetching' || search.queryFilterEmpty$ | async"
     >
-      <ui-icon
-        class="spin"
-        *ngIf="searchState === 'fetching'"
-        icon="spinner"
-        size="32px"
-      ></ui-icon>
+      <ui-icon class="spin" *ngIf="searchState === 'fetching'" icon="spinner" size="32px"></ui-icon>
 
       <ng-container *ngIf="searchState !== 'fetching'">
-        <ui-icon
-          *ngIf="isMobile && !input?.value?.length"
-          icon="scan"
-          size="32px"
-        ></ui-icon>
-        <ui-icon
-          *ngIf="!isMobile || !!input?.value?.length"
-          icon="search"
-          size="24px"
-        ></ui-icon>
+        <ui-icon *ngIf="isMobile && !input?.value?.length" icon="scan" size="32px"></ui-icon>
+        <ui-icon *ngIf="!isMobile || !!input?.value?.length" icon="search" size="24px"></ui-icon>
       </ng-container>
     </button>
-    <ui-searchbox-autocomplete
-      uiClickOutside
-      (clicked)="autocomplete.close()"
-      #autocomplete
-    >
+    <ui-searchbox-autocomplete uiClickOutside (clicked)="autocomplete.close()" #autocomplete>
       <button
         uiSearchboxAutocompleteOption
         [value]="result?.display"

apps/ui/filter/src/lib/filter-group/components/select-filter/select-filter.component.scss

@@ -48,3 +48,7 @@
     transform: rotate(-90deg);
   }
 }
+
+.isa-btn {
+  @apply inline-flex text-inactive-customer;
+}

apps/ui/searchbox/src/lib/ui-searchbox.component.scss

@@ -40,6 +40,10 @@
   width: 60px;
 }
 
+.ui-searchbox-wrapper ::ng-deep [uiSearchboxSearchButton]:disabled {
+  @apply text-inactive-customer;
+}
+
 .ui-searchbox-wrapper ::ng-deep [uiSearchboxClearButton] {
   @apply mr-2;
   width: auto;