refactor: table search position

DatepollSystems · Jul 5, 2024 · 3dfe087 · 3dfe087
1 parent cc35409
commit 3dfe087
Show file tree

Hide file tree

Showing 16 changed files with 97 additions and 186 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
@@ -3,7 +3,7 @@ import {ChangeDetectionStrategy, Component, inject, viewChild} from '@angular/co
 import {ReactiveFormsModule} from '@angular/forms';
 import {RouterLink} from '@angular/router';
 import {ScrollableToolbarComponent} from '@home-shared/components/scrollable-toolbar.component';
-import {injectTable, injectTableDelete, injectTableFilter, injectTableSelect} from '@home-shared/list';
+import {injectTable, injectTableDelete, injectTableFilter, injectTableSelect, ListFilterComponent} from '@home-shared/list';
 import {TranslocoPipe} from '@jsverse/transloco';
 
 import {NgbTooltipModule} from '@ng-bootstrap/ng-bootstrap';
@@ -34,20 +34,7 @@ import {DeadLettersService} from './dead-letters.service';
           </button>
         </div>
 
-        <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>
+        <app-list-filter [filter]="filter" />
       </scrollable-toolbar>
 
       @if (table.dataSource(); as dataSource) {
@@ -149,6 +136,7 @@ import {DeadLettersService} from './dead-letters.service';
     ScrollableToolbarComponent,
     AppProgressBarComponent,
     StopPropagationDirective,
+    ListFilterComponent,
   ],
 })
 export class DeadLettersComponent {

diff --git a/src/app/home/_admin/system-notifications/system-notifications.component.ts b/src/app/home/_admin/system-notifications/system-notifications.component.ts
@@ -3,7 +3,7 @@ import {ChangeDetectionStrategy, Component, inject, viewChild} from '@angular/co
 import {ReactiveFormsModule} from '@angular/forms';
 import {RouterLink} from '@angular/router';
 import {ScrollableToolbarComponent} from '@home-shared/components/scrollable-toolbar.component';
-import {injectTable, injectTableDelete, injectTableFilter, injectTableSelect} from '@home-shared/list';
+import {injectTable, injectTableDelete, injectTableFilter, injectTableSelect, ListFilterComponent} from '@home-shared/list';
 import {AppActivatedPipe} from '@home-shared/pipes/app-activated.pipe';
 import {TranslocoPipe} from '@jsverse/transloco';
 
@@ -41,20 +41,7 @@ import {SystemNotificationsService} from './_services/system-notifications.servi
           </button>
         </div>
 
-        <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>
+        <app-list-filter [filter]="filter" />
       </scrollable-toolbar>
 
       @if (table.dataSource(); as dataSource) {
@@ -161,6 +148,7 @@ import {SystemNotificationsService} from './_services/system-notifications.servi
     AppActivatedPipe,
     AppProgressBarComponent,
     StopPropagationDirective,
+    ListFilterComponent,
   ],
 })
 export class SystemNotificationsComponent {

diff --git a/src/app/home/_admin/users/users.component.ts b/src/app/home/_admin/users/users.component.ts
@@ -3,7 +3,7 @@ import {ReactiveFormsModule} from '@angular/forms';
 import {RouterLink} from '@angular/router';
 
 import {ScrollableToolbarComponent} from '@home-shared/components/scrollable-toolbar.component';
-import {injectTable, injectTableDelete, injectTableFilter} from '@home-shared/list';
+import {injectTable, injectTableDelete, injectTableFilter, ListFilterComponent} from '@home-shared/list';
 import {AppActivatedPipe} from '@home-shared/pipes/app-activated.pipe';
 import {NgbTooltipModule} from '@ng-bootstrap/ng-bootstrap';
 import {TranslocoPipe} from '@jsverse/transloco';
@@ -28,20 +28,7 @@ import {UsersService} from './services/users.service';
           >
         </div>
 
-        <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>
+        <app-list-filter [filter]="filter" />
       </scrollable-toolbar>
 
       @if (table.dataSource(); as dataSource) {
@@ -120,6 +107,7 @@ import {UsersService} from './services/users.service';
     ScrollableToolbarComponent,
     AppActivatedPipe,
     AppProgressBarComponent,
+    ListFilterComponent,
   ],
 })
 export class UsersComponent {

diff --git a/src/app/home/_shared/list/index.ts b/src/app/home/_shared/list/index.ts
@@ -4,4 +4,5 @@ export * from './inject-table-delete';
 export * from './inject-table-filter';
 export * from './inject-table-order';
 export * from './inject-table-select';
+export * from './list-filter.component';
 export * from './list-order-styles';
diff --git a/src/app/home/_shared/list/list-filter.component.ts b/src/app/home/_shared/list/list-filter.component.ts
@@ -0,0 +1,37 @@
+import {Component, input} from '@angular/core';
+import {BiComponent} from 'dfx-bootstrap-icons';
+import {ReactiveFormsModule} from '@angular/forms';
+import {TranslocoPipe} from '@jsverse/transloco';
+import {injectTableFilter} from '@home-shared/list/inject-table-filter';
+import {NgbTooltip} from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  template: `
+    <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-sm btn-outline-secondary"
+          type="button"
+          placement="bottom"
+          [ngbTooltip]="'CLEAR' | transloco"
+          (click)="filter().reset()"
+        >
+          <bi name="x-circle-fill" />
+        </button>
+      }
+    </div>
+  `,
+  styles: `
+    .action-search {
+      min-width: 200px;
+      max-width: 250px;
+    }
+  `,
+  selector: 'app-list-filter',
+  imports: [BiComponent, ReactiveFormsModule, TranslocoPipe, NgbTooltip],
+  standalone: true,
+})
+export class ListFilterComponent {
+  filter = input.required<ReturnType<typeof injectTableFilter>>();
+}
diff --git a/src/app/home/events/events.component.ts b/src/app/home/events/events.component.ts
@@ -4,7 +4,7 @@ import {toObservable} from '@angular/core/rxjs-interop';
 import {ReactiveFormsModule} from '@angular/forms';
 import {RouterLink} from '@angular/router';
 import {ActionDropdownComponent} from '@home-shared/components/action-dropdown.component';
-import {injectTable, injectTableDelete, injectTableFilter, injectTableSelect} from '@home-shared/list';
+import {injectTable, injectTableDelete, injectTableFilter, injectTableSelect, ListFilterComponent} from '@home-shared/list';
 import {mapName} from '@home-shared/name-map';
 import {TranslocoPipe} from '@jsverse/transloco';
 
@@ -44,20 +44,7 @@ import {EventsService} from './_services/events.service';
           </button>
         </div>
 
-        <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>
+        <app-list-filter [filter]="filter" />
       </scrollable-toolbar>
 
       @if (table.dataSource(); as dataSource) {
@@ -168,6 +155,7 @@ import {EventsService} from './_services/events.service';
     ActionDropdownComponent,
     NgbDropdownItem,
     StopPropagationDirective,
+    ListFilterComponent,
   ],
   standalone: true,
 })

diff --git a/src/app/home/organisations/organisations.component.ts b/src/app/home/organisations/organisations.component.ts
@@ -3,7 +3,7 @@ import {Component, inject, viewChild} from '@angular/core';
 import {ReactiveFormsModule} from '@angular/forms';
 import {RouterLink} from '@angular/router';
 import {ActionDropdownComponent} from '@home-shared/components/action-dropdown.component';
-import {injectTable, injectTableDelete, injectTableFilter, injectTableSelect} from '@home-shared/list';
+import {injectTable, injectTableDelete, injectTableFilter, injectTableSelect, ListFilterComponent} from '@home-shared/list';
 import {mapName} from '@home-shared/name-map';
 import {TranslocoPipe} from '@jsverse/transloco';
 
@@ -42,20 +42,7 @@ import {OrganisationsService} from './_services/organisations.service';
           </button>
         </div>
 
-        <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>
+        <app-list-filter [filter]="filter" />
       </scrollable-toolbar>
 
       @if (table.dataSource(); as dataSource) {
@@ -163,6 +150,7 @@ import {OrganisationsService} from './_services/organisations.service';
     ActionDropdownComponent,
     NgbDropdownItem,
     StopPropagationDirective,
+    ListFilterComponent,
   ],
 })
 export class OrganisationsComponent {

diff --git a/src/app/home/printers/printers.component.ts b/src/app/home/printers/printers.component.ts
@@ -4,7 +4,7 @@ import {RouterLink} from '@angular/router';
 import {ActionDropdownComponent} from '@home-shared/components/action-dropdown.component';
 
 import {ScrollableToolbarComponent} from '@home-shared/components/scrollable-toolbar.component';
-import {injectTable, injectTableDelete, injectTableFilter, injectTableSelect} from '@home-shared/list';
+import {injectTable, injectTableDelete, injectTableFilter, injectTableSelect, ListFilterComponent} from '@home-shared/list';
 import {mapName} from '@home-shared/name-map';
 import {TranslocoPipe} from '@jsverse/transloco';
 import {NgbDropdownItem, NgbModal, NgbTooltip} from '@ng-bootstrap/ng-bootstrap';
@@ -52,20 +52,7 @@ import {PrinterBatchUpdateDto, PrintersBatchUpdateModal} from './printers-batch-
           </button>
         </div>
 
-        <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>
+        <app-list-filter [filter]="filter" />
       </scrollable-toolbar>
 
       @if (table.dataSource(); as dataSource) {
@@ -174,6 +161,7 @@ import {PrinterBatchUpdateDto, PrintersBatchUpdateModal} from './printers-batch-
     ActionDropdownComponent,
     NgbDropdownItem,
     StopPropagationDirective,
+    ListFilterComponent,
   ],
 })
 export class PrintersComponent {

diff --git a/src/app/home/products/product-groups.component.ts b/src/app/home/products/product-groups.component.ts
@@ -4,7 +4,14 @@ import {ReactiveFormsModule} from '@angular/forms';
 import {RouterLink} from '@angular/router';
 import {ActionDropdownComponent} from '@home-shared/components/action-dropdown.component';
 import {AppResetOrderButtonComponent} from '@home-shared/components/button/app-reset-order-button.component';
-import {injectTable, injectTableDelete, injectTableFilter, injectTableOrder, injectTableSelect} from '@home-shared/list';
+import {
+  injectTable,
+  injectTableDelete,
+  injectTableFilter,
+  injectTableOrder,
+  injectTableSelect,
+  ListFilterComponent,
+} from '@home-shared/list';
 import {listOrderStyles} from '@home-shared/list/list-order-styles';
 import {mapName} from '@home-shared/name-map';
 import {TranslocoPipe} from '@jsverse/transloco';
@@ -45,20 +52,7 @@ import {ProductGroupsService} from './_services/product-groups.service';
           </button>
         </div>
 
-        <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>
+        <app-list-filter [filter]="filter" />
 
         <app-order-mode-switch [orderMode]="order.isOrdering()" (orderModeChange)="order.setIsOrdering($event)" />
 
@@ -214,6 +208,7 @@ import {ProductGroupsService} from './_services/product-groups.service';
     NgbDropdownItem,
     StopPropagationDirective,
     AppResetOrderButtonComponent,
+    ListFilterComponent,
   ],
 })
 export class ProductGroupsComponent {

diff --git a/src/app/home/products/products.component.ts b/src/app/home/products/products.component.ts
@@ -14,6 +14,7 @@ import {
   injectTableFilter,
   injectTableOrder,
   injectTableSelect,
+  ListFilterComponent,
   listOrderStyles,
   removeGroup,
 } from '@home-shared/list';
@@ -85,20 +86,7 @@ import {ProductsService} from './_services/products.service';
           >
         }
 
-        <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>
+        <app-list-filter [filter]="filter" />
 
         @if (activeId() !== 'all') {
           <app-order-mode-switch [orderMode]="order.isOrdering()" (orderModeChange)="order.setIsOrdering($event)" />
@@ -304,6 +292,7 @@ import {ProductsService} from './_services/products.service';
     StopPropagationDirective,
     AppOrderModeSwitchComponent,
     AppResetOrderButtonComponent,
+    ListFilterComponent,
   ],
 })
 export class ProductsComponent {