fix: table filter reset

refactor: table search position
DatepollSystems · Jul 5, 2024 · e595e3e · e595e3e
1 parent ac4654c
commit e595e3e
Show file tree

Hide file tree

Showing 15 changed files with 112 additions and 82 deletions.
diff --git a/src/app/home/_admin/dead-letters/dead-letters.component.ts b/src/app/home/_admin/dead-letters/dead-letters.component.ts
@@ -33,24 +33,22 @@ import {DeadLettersService} from './dead-letters.service';
             {{ 'DELETE' | transloco }}
           </button>
         </div>
-      </scrollable-toolbar>
 
-      <form>
-        <div class="input-group">
-          <input class="form-control ml-2" type="text" [formControl]="filter.control" [placeholder]="'SEARCH' | transloco" />
+        <div class="input-group action-search">
+          <input class="form-control form-control-sm" type="text" [formControl]="filter.control" [placeholder]="'SEARCH' | transloco" />
           @if (filter.isActive()) {
             <button
               class="btn btn-outline-secondary"
               type="button"
               placement="bottom"
               [ngbTooltip]="'CLEAR' | transloco"
-              (mousedown)="filter.reset()"
+              (click)="filter.reset()"
             >
               <bi name="x-circle-fill" />
             </button>
           }
         </div>
-      </form>
+      </scrollable-toolbar>
 
       @if (table.dataSource(); as dataSource) {
         <div class="table-responsive">

diff --git a/src/app/home/_admin/system-notifications/system-notifications.component.ts b/src/app/home/_admin/system-notifications/system-notifications.component.ts
@@ -40,24 +40,22 @@ import {SystemNotificationsService} from './_services/system-notifications.servi
             {{ 'DELETE' | transloco }}
           </button>
         </div>
-      </scrollable-toolbar>
 
-      <form>
-        <div class="input-group">
-          <input class="form-control ml-2" type="text" [formControl]="filter.control" [placeholder]="'SEARCH' | transloco" />
+        <div class="input-group action-search">
+          <input class="form-control form-control-sm" type="text" [formControl]="filter.control" [placeholder]="'SEARCH' | transloco" />
           @if (filter.isActive()) {
             <button
               class="btn btn-outline-secondary"
               type="button"
               placement="bottom"
               [ngbTooltip]="'CLEAR' | transloco"
-              (mousedown)="filter.reset()"
+              (click)="filter.reset()"
             >
               <bi name="x-circle-fill" />
             </button>
           }
         </div>
-      </form>
+      </scrollable-toolbar>
 
       @if (table.dataSource(); as dataSource) {
         <div class="table-responsive">

diff --git a/src/app/home/_admin/users/users.component.ts b/src/app/home/_admin/users/users.component.ts
@@ -27,24 +27,22 @@ import {UsersService} from './services/users.service';
             {{ 'ADD_2' | transloco }}</a
           >
         </div>
-      </scrollable-toolbar>
 
-      <form>
-        <div class="input-group">
-          <input class="form-control ml-2" type="text" [formControl]="filter.control" [placeholder]="'SEARCH' | transloco" />
+        <div class="input-group action-search">
+          <input class="form-control form-control-sm" type="text" [formControl]="filter.control" [placeholder]="'SEARCH' | transloco" />
           @if (filter.isActive()) {
             <button
               class="btn btn-outline-secondary"
               type="button"
               placement="bottom"
               [ngbTooltip]="'CLEAR' | transloco"
-              (mousedown)="filter.reset()"
+              (click)="filter.reset()"
             >
               <bi name="x-circle-fill" />
             </button>
           }
         </div>
-      </form>
+      </scrollable-toolbar>
 
       @if (table.dataSource(); as dataSource) {
         <div class="table-responsive">

diff --git a/src/app/home/_layout/_components/switcher.component.ts b/src/app/home/_layout/_components/switcher.component.ts
@@ -1,6 +1,6 @@
 import {Component, effect, inject, input, signal} from '@angular/core';
 import {toSignal} from '@angular/core/rxjs-interop';
-import {NonNullableFormBuilder, ReactiveFormsModule, Validators} from '@angular/forms';
+import {FormControl, NonNullableFormBuilder, ReactiveFormsModule, Validators} from '@angular/forms';
 import {RedirectService} from '@home-shared/services/redirect.service';
 import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
 import {AppProgressBarComponent} from '@shared/ui/loading/app-progress-bar.component';
@@ -23,9 +23,12 @@ import {SelectedOrganisationService} from '../../organisations/_services/selecte
       }
 
       <div class="d-flex gap-4 flex-column flex-lg-row">
-        @if (allOrganisations(); as organisations) {
+        @if (filteredOrganisations(); as organisations) {
           <div class="w-100">
             <h2>Organisation</h2>
+
+            <input class="form-control" placeholder="Suche..." type="text" [formControl]="organisationFilter" />
+
             <div class="list-group list-group-checkable d-grid gap-2 border-0 w-100 mt-2">
               @for (organisation of organisations; track organisation.id) {
                 <input
@@ -52,8 +55,11 @@ import {SelectedOrganisationService} from '../../organisations/_services/selecte
         }
         <div class="w-100">
           <h2>Event / Location</h2>
+
+          <input class="form-control" placeholder="Suche..." type="text" [formControl]="eventFilter" />
+
           @if (form.controls.organisationId.value) {
-            @if (allEvents(); as events) {
+            @if (filteredEvents(); as events) {
               <div class="list-group list-group-checkable d-grid gap-2 border-0 w-100 mt-2">
                 @for (event of events; track event.id) {
                   <input
@@ -125,6 +131,18 @@ export class SwitcherComponent {
 
   allOrganisations = toSignal(inject(OrganisationsService).getAll$());
 
+  organisationFilter = new FormControl('');
+  filteredOrganisations = derivedFrom(
+    [
+      this.allOrganisations,
+      this.organisationFilter.valueChanges.pipe(
+        map((it) => it?.toLowerCase() ?? ''),
+        startWith(''),
+      ),
+    ],
+    map(([allOrganisations, filter]) => allOrganisations?.filter((it) => it.name.toLowerCase().includes(filter)) ?? []),
+  );
+
   form = inject(NonNullableFormBuilder).group({
     organisationId: [undefined as unknown as number, [Validators.required]],
     eventId: [undefined as unknown as number, [Validators.required]],
@@ -153,6 +171,18 @@ export class SwitcherComponent {
     ),
   );
 
+  eventFilter = new FormControl('');
+  filteredEvents = derivedFrom(
+    [
+      this.allEvents,
+      this.eventFilter.valueChanges.pipe(
+        map((it) => it?.toLowerCase() ?? ''),
+        startWith(''),
+      ),
+    ],
+    map(([allEvents, filter]) => allEvents?.filter((it) => it.name.toLowerCase().includes(filter)) ?? []),
+  );
+
   constructor() {
     effect(() => {
       const organisation = this.selectedOrganisation();

diff --git a/src/app/home/_shared/list/inject-table-filter.ts b/src/app/home/_shared/list/inject-table-filter.ts
@@ -11,7 +11,7 @@ export function injectTableFilter() {
     startWith(''),
   );
   const value = toSignal(value$, {requireSync: true});
-  const isActive = computed(() => value.length > 0);
+  const isActive = computed(() => value().length > 0);
 
   return {
     control,

diff --git a/src/app/home/events/events.component.ts b/src/app/home/events/events.component.ts
@@ -43,24 +43,22 @@ import {EventsService} from './_services/events.service';
             {{ 'DELETE' | transloco }}
           </button>
         </div>
-      </scrollable-toolbar>
 
-      <form>
-        <div class="input-group">
-          <input class="form-control ml-2" type="text" [formControl]="filter.control" [placeholder]="'SEARCH' | transloco" />
+        <div class="input-group action-search">
+          <input class="form-control form-control-sm" type="text" [formControl]="filter.control" [placeholder]="'SEARCH' | transloco" />
           @if (filter.isActive()) {
             <button
               class="btn btn-outline-secondary"
               type="button"
               placement="bottom"
               [ngbTooltip]="'CLEAR' | transloco"
-              (mousedown)="filter.reset()"
+              (click)="filter.reset()"
             >
               <bi name="x-circle-fill" />
             </button>
           }
         </div>
-      </form>
+      </scrollable-toolbar>
 
       @if (table.dataSource(); as dataSource) {
         <div class="table-responsive">

diff --git a/src/app/home/organisations/organisations.component.ts b/src/app/home/organisations/organisations.component.ts
@@ -41,11 +41,9 @@ import {OrganisationsService} from './_services/organisations.service';
             {{ 'DELETE' | transloco }}
           </button>
         </div>
-      </scrollable-toolbar>
 
-      <form>
-        <div class="input-group">
-          <input class="form-control ml-2" type="text" [formControl]="filter.control" [placeholder]="'SEARCH' | transloco" />
+        <div class="input-group action-search">
+          <input class="form-control form-control-sm" type="text" [formControl]="filter.control" [placeholder]="'SEARCH' | transloco" />
           @if (filter.isActive()) {
             <button
               class="btn btn-outline-secondary"
@@ -58,7 +56,7 @@ import {OrganisationsService} from './_services/organisations.service';
             </button>
           }
         </div>
-      </form>
+      </scrollable-toolbar>
 
       @if (table.dataSource(); as dataSource) {
         <div class="table-responsive">

diff --git a/src/app/home/printers/printers.component.ts b/src/app/home/printers/printers.component.ts
@@ -51,11 +51,9 @@ import {PrinterBatchUpdateDto, PrintersBatchUpdateModal} from './printers-batch-
             {{ 'HOME_PRINTER_BATCH_UPDATE' | transloco }}
           </button>
         </div>
-      </scrollable-toolbar>
 
-      <form>
-        <div class="input-group">
-          <input class="form-control ml-2" type="text" [formControl]="filter.control" [placeholder]="'SEARCH' | transloco" />
+        <div class="input-group action-search">
+          <input class="form-control form-control-sm" type="text" [formControl]="filter.control" [placeholder]="'SEARCH' | transloco" />
           @if (filter.isActive()) {
             <button
               class="btn btn-outline-secondary"
@@ -68,7 +66,7 @@ import {PrinterBatchUpdateDto, PrintersBatchUpdateModal} from './printers-batch-
             </button>
           }
         </div>
-      </form>
+      </scrollable-toolbar>
 
       @if (table.dataSource(); as dataSource) {
         <div class="table-responsive">

diff --git a/src/app/home/products/product-groups.component.ts b/src/app/home/products/product-groups.component.ts
@@ -44,31 +44,30 @@ import {ProductGroupsService} from './_services/product-groups.service';
             {{ 'DELETE' | transloco }}
           </button>
         </div>
-        <app-order-mode-switch [orderMode]="order.isOrdering()" (orderModeChange)="order.setIsOrdering($event)" />
 
-        <app-reset-order-button
-          [isOrdering]="order.isOrdering()"
-          [disabled]="!order.hasCustomPositionSet()"
-          (resetOrder)="order.resetOrder()"
-        />
-      </scrollable-toolbar>
-
-      <form>
-        <div class="input-group">
-          <input class="form-control ml-2" type="text" [formControl]="filter.control" [placeholder]="'SEARCH' | transloco" />
+        <div class="input-group action-search">
+          <input class="form-control form-control-sm" type="text" [formControl]="filter.control" [placeholder]="'SEARCH' | transloco" />
           @if (filter.isActive()) {
             <button
               class="btn btn-outline-secondary"
               type="button"
               placement="bottom"
               [ngbTooltip]="'CLEAR' | transloco"
-              (mousedown)="filter.reset()"
+              (click)="filter.reset()"
             >
               <bi name="x-circle-fill" />
             </button>
           }
         </div>
-      </form>
+
+        <app-order-mode-switch [orderMode]="order.isOrdering()" (orderModeChange)="order.setIsOrdering($event)" />
+
+        <app-reset-order-button
+          [isOrdering]="order.isOrdering()"
+          [disabled]="!order.hasCustomPositionSet()"
+          (resetOrder)="order.resetOrder()"
+        />
+      </scrollable-toolbar>
 
       @if (table.dataSource(); as dataSource) {
         <div class="table-responsive">

diff --git a/src/app/home/products/products.component.ts b/src/app/home/products/products.component.ts
@@ -83,7 +83,24 @@ import {ProductsService} from './_services/products.service';
             <bi name="pencil-square" />
             {{ 'HOME_PROD_GROUP' | transloco }} {{ 'EDIT' | transloco | lowercase }}</a
           >
+        }
+
+        <div class="input-group action-search">
+          <input class="form-control form-control-sm" type="text" [formControl]="filter.control" [placeholder]="'SEARCH' | transloco" />
+          @if (filter.isActive()) {
+            <button
+              class="btn btn-outline-secondary"
+              type="button"
+              placement="bottom"
+              [ngbTooltip]="'CLEAR' | transloco"
+              (click)="filter.reset()"
+            >
+              <bi name="x-circle-fill" />
+            </button>
+          }
+        </div>
 
+        @if (activeId() !== 'all') {
           <app-order-mode-switch [orderMode]="order.isOrdering()" (orderModeChange)="order.setIsOrdering($event)" />
 
           <app-reset-order-button

diff --git a/src/app/home/tables/table-groups.component.ts b/src/app/home/tables/table-groups.component.ts
@@ -45,18 +45,8 @@ import {TableGroupsService} from './_services/table-groups.service';
           </button>
         </div>
 
-        <app-order-mode-switch [orderMode]="order.isOrdering()" (orderModeChange)="order.setIsOrdering($event)" />
-
-        <app-reset-order-button
-          [isOrdering]="order.isOrdering()"
-          [disabled]="!order.hasCustomPositionSet()"
-          (resetOrder)="order.resetOrder()"
-        />
-      </scrollable-toolbar>
-
-      <form>
-        <div class="input-group">
-          <input class="form-control ml-2" type="text" [formControl]="filter.control" [placeholder]="'SEARCH' | transloco" />
+        <div class="input-group action-search">
+          <input class="form-control form-control-sm" type="text" [formControl]="filter.control" [placeholder]="'SEARCH' | transloco" />
           @if (filter.isActive()) {
             <button
               class="btn btn-outline-secondary"
@@ -69,7 +59,15 @@ import {TableGroupsService} from './_services/table-groups.service';
             </button>
           }
         </div>
-      </form>
+
+        <app-order-mode-switch [orderMode]="order.isOrdering()" (orderModeChange)="order.setIsOrdering($event)" />
+
+        <app-reset-order-button
+          [isOrdering]="order.isOrdering()"
+          [disabled]="!order.hasCustomPositionSet()"
+          (resetOrder)="order.resetOrder()"
+        />
+      </scrollable-toolbar>
 
       @if (table.dataSource(); as dataSource) {
         <div class="table-responsive">

diff --git a/src/app/home/tables/tables.component.ts b/src/app/home/tables/tables.component.ts
@@ -50,11 +50,9 @@ import {TablesPrintQrCodesModal} from './tables-print-qr-codes.modal';
             {{ 'PRINT' | transloco }}
           </button>
         </div>
-      </scrollable-toolbar>
 
-      <form>
-        <div class="input-group">
-          <input class="form-control ml-2" type="text" [formControl]="filter.control" [placeholder]="'SEARCH' | transloco" />
+        <div class="input-group action-search">
+          <input class="form-control form-control-sm" type="text" [formControl]="filter.control" [placeholder]="'SEARCH' | transloco" />
           @if (filter.isActive()) {
             <button
               class="btn btn-outline-secondary"
@@ -67,7 +65,7 @@ import {TablesPrintQrCodesModal} from './tables-print-qr-codes.modal';
             </button>
           }
         </div>
-      </form>
+      </scrollable-toolbar>
 
       <div class="table-responsive">
         <table ngb-table ngb-sort [hover]="true" [dataSource]="table.dataSource()">