closes #57

src/app/app.icons.ts

@@ -7,6 +7,7 @@ import {
   heroDocumentText,
   heroFaceFrown,
   heroFaceSmile,
+  heroFire,
   heroInformationCircle,
   heroMinus,
   heroPencil,
@@ -28,4 +29,5 @@ export const appIcons = {
   heroArrowPathRoundedSquare,
   heroArrowTopRightOnSquare,
   heroInformationCircle,
+  heroFire,
 };

src/app/shared/components/editor-base-table/editor-base-table.component.html

@@ -1 +0,0 @@
-<p>editor-base-table works!</p>

src/app/shared/components/editor-base-table/editor-base-table.component.ts

@@ -1,4 +1,6 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, inject, OnInit, signal } from '@angular/core';
+import { FilterChangedEvent, FilterModel } from 'ag-grid-community';
+import { LocalStorageService } from 'ngx-webstorage';
 import { HasIdentification, IModKit } from '../../../../interfaces';
 import { ModService } from '../../../services/mod.service';
 
@@ -7,17 +9,31 @@ import { ModService } from '../../../services/mod.service';
   templateUrl: './editor-base-table.component.html',
   styleUrl: './editor-base-table.component.scss',
 })
-export class EditorBaseTableComponent<T extends HasIdentification> {
+export class EditorBaseTableComponent<T extends HasIdentification>
+  implements OnInit
+{
+  private localStorage = inject(LocalStorageService);
   protected modService = inject(ModService);
 
   protected dataKey!: keyof Omit<IModKit, 'meta'>;
 
   protected defaultData = () => ({} as T);
 
+  protected tableFilterState = signal<FilterModel | undefined>(undefined);
+
   public isEditing = signal<boolean>(false);
   public oldData = signal<T | undefined>(undefined);
   public editingData = signal<T>(this.defaultData());
 
+  ngOnInit(): void {
+    const state = this.localStorage.retrieve(
+      `${this.dataKey}-tablefilters`
+    ) as FilterModel;
+    if (state) {
+      this.tableFilterState.set(state);
+    }
+  }
+
   public createNew() {
     this.isEditing.set(true);
     this.editingData.set(this.defaultData());
@@ -61,4 +77,13 @@ export class EditorBaseTableComponent<T extends HasIdentification> {
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   protected dataEdited(oldItem: T, newItem: T) {}
+
+  public filterChanged($event: FilterChangedEvent) {
+    this.tableFilterState.set($event.api.getFilterModel());
+
+    this.localStorage.store(
+      `${this.dataKey}-tablefilters`,
+      this.tableFilterState()
+    );
+  }
 }

src/app/shared/components/editor-view-table/editor-view-table.component.html

@@ -14,6 +14,7 @@
 } @else {
 <div>
   <ag-grid-angular class="ag-theme-quartz-dark -m-6" [rowHeight]="70" [rowData]="allData" [columnDefs]="tableColumns()"
-    [pagination]="true" [paginationPageSize]="20"></ag-grid-angular>
+    [pagination]="true" [paginationPageSize]="20" (filterChanged)="filterChanged.emit($event)"
+    (gridReady)="onInitialize($event)"></ag-grid-angular>
 </div>
-}
+}

src/app/shared/components/editor-view-table/editor-view-table.component.ts

@@ -1,5 +1,10 @@
 import { Component, input, output } from '@angular/core';
-import { ColDef } from 'ag-grid-community';
+import {
+  ColDef,
+  FilterChangedEvent,
+  FilterModel,
+  GridReadyEvent,
+} from 'ag-grid-community';
 
 @Component({
   selector: 'app-editor-view-table',
@@ -11,7 +16,13 @@ export class EditorViewTableComponent {
   public dataType = input<string>('');
   public tableColumns = input<ColDef[]>([]);
   public showImport = input<boolean>(false);
+  public defaultFilterState = input<FilterModel | undefined>();
 
   public create = output<void>();
   public import = output<void>();
+  public filterChanged = output<FilterChangedEvent>();
+
+  onInitialize($event: GridReadyEvent) {
+    $event.api.setFilterModel(this.defaultFilterState() ?? {});
+  }
 }

src/app/shared/components/header-buttons/header-buttons.component.html

@@ -10,4 +10,8 @@
     <ng-icon name="heroPlus"></ng-icon>
   </button>
   }
-</div>
+
+  <button class="ml-2 btn btn-sm btn-warning" (click)="resetTableFilters()" floatUi="Reset Filters">
+    <ng-icon name="heroFire"></ng-icon>
+  </button>
+</div>

src/app/shared/components/header-buttons/header-buttons.component.ts

@@ -25,4 +25,8 @@ export class HeaderButtonsComponent implements IHeaderAngularComp {
     this.params = params;
     return true;
   }
+
+  resetTableFilters() {
+    this.params.api.setFilterModel(null);
+  }
 }

src/app/tabs/items/items.component.html

@@ -1,7 +1,8 @@
 @let editing = isEditing();
 
 <app-editor-view-table [class.hidden]="editing" [dataType]="'items'" [tableColumns]="tableColumns"
-  [tableItems]="tableItems()" (create)="createNew()"></app-editor-view-table>
+  [tableItems]="tableItems()" (create)="createNew()" (filterChanged)="filterChanged($event)"
+  [defaultFilterState]="tableFilterState()"></app-editor-view-table>
 
 @if(editing) {
 <app-items-editor class="h-full w-full" [editing]="editingData()" (goBack)="cancelEditing()"

src/app/tabs/maps/maps.component.html

@@ -1,5 +1,6 @@
 <app-editor-view-table [dataType]="'maps'" [tableColumns]="tableColumns" [tableItems]="tableItems()" [showImport]="true"
-  (create)="createNewDialog()" (import)="importDialog()"></app-editor-view-table>
+  (create)="createNewDialog()" (import)="importDialog()" (filterChanged)="filterChanged($event)"
+  [defaultFilterState]="tableFilterState()"></app-editor-view-table>
 
 <input #mapUpload type="file" multiple (change)="importMaps($event)" accept="application/json" class="hidden" />
 

src/app/tabs/npcs/npcs.component.html

@@ -1,7 +1,8 @@
 @let editing = isEditing();
 
 <app-editor-view-table [class.hidden]="editing" [dataType]="'NPCs'" [tableColumns]="tableColumns"
-  [tableItems]="tableItems()" (create)="createNew()"></app-editor-view-table>
+  [tableItems]="tableItems()" (create)="createNew()" (filterChanged)="filterChanged($event)"
+  [defaultFilterState]="tableFilterState()"></app-editor-view-table>
 
 @if(editing) {
 <app-npcs-editor class="h-full w-full" [editing]="editingData()" (goBack)="cancelEditing()"

src/app/tabs/quests/quests.component.html

@@ -6,7 +6,8 @@
 </div>
 } @else {
 <app-editor-view-table [class.hidden]="editing" [dataType]="'quests'" [tableColumns]="tableColumns"
-  [tableItems]="tableItems()" (create)="createNew()"></app-editor-view-table>
+  [tableItems]="tableItems()" (create)="createNew()" (filterChanged)="filterChanged($event)"
+  [defaultFilterState]="tableFilterState()"></app-editor-view-table>
 }
 
 @if(editing) {

src/app/tabs/recipes/recipes.component.html

@@ -6,7 +6,8 @@
 </div>
 } @else {
 <app-editor-view-table [class.hidden]="editing" [dataType]="'recipes'" [tableColumns]="tableColumns"
-  [tableItems]="tableItems()" (create)="createNew()"></app-editor-view-table>
+  [tableItems]="tableItems()" (create)="createNew()" (filterChanged)="filterChanged($event)"
+  [defaultFilterState]="tableFilterState()"></app-editor-view-table>
 }
 
 @if(editing) {

src/app/tabs/spawners/spawners.component.html

@@ -6,7 +6,8 @@
 </div>
 } @else {
 <app-editor-view-table [class.hidden]="editing" [dataType]="'spawners'" [tableColumns]="tableColumns"
-  [tableItems]="tableItems()" (create)="createNew()"></app-editor-view-table>
+  [tableItems]="tableItems()" (create)="createNew()" (filterChanged)="filterChanged($event)"
+  [defaultFilterState]="tableFilterState()"></app-editor-view-table>
 }
 
 @if(editing) {