Cleaned up TTS Filters. Fixed the service when updating a filter.

src/app/shared/services/redeemable-action.service.ts

@@ -10,7 +10,7 @@ import EventService from './EventService';
 export default class RedeemableActionService {
   private readonly client = inject(HermesClientService);
   private readonly events = inject(EventService);
-  private data: RedeemableAction[] = []
+  private data: RedeemableAction[] = [];
   private loaded = false;
   create$: Observable<any> | undefined;
   update$: Observable<any> | undefined;
@@ -22,7 +22,7 @@ export default class RedeemableActionService {
     this.update$ = this.client.filterByRequestType('update_redeemable_action');
     this.delete$ = this.client.filterByRequestType('delete_redeemable_action');
 
-    this.create$?.subscribe(d =>  {this.data.push(d.data); console.log('action service add:', d.data) });
+    this.create$?.subscribe(d => this.data.push(d.data));
     this.update$?.subscribe(d => {
       const action = this.data.find(r => r.name == d.data.name);
       if (action) {

src/app/shared/services/tts-filter.service.ts

@@ -1,6 +1,6 @@
 import { inject, Injectable } from '@angular/core';
 import { HermesClientService } from '../../hermes-client.service';
-import { first, map, Observable, of } from 'rxjs';
+import { map, Observable, of } from 'rxjs';
 import EventService from './EventService';
 import { Filter } from '../models/filter';
 
@@ -25,9 +25,9 @@ export default class TtsFilterService {
     this.update$?.subscribe(d => {
       const filter = this.data.find(r => r.id == d.data.id);
       if (filter) {
-        filter.search = d.data.action_name;
+        filter.search = d.data.search;
-        filter.replace = d.data.redemption_id;
+        filter.replace = d.data.replace;
-        filter.flag = d.data.order;
+        filter.flag = d.data.flag;
       }
     });
     this.delete$?.subscribe(d => this.data = this.data.filter(r => r.id != d.request.data.id));

src/app/tts-filters/filter-item-edit/filter-item-edit.component.html

@@ -54,12 +54,12 @@
   <mat-card-actions>
     <button mat-button
             class="neutral"
-            (click)="onCancelClick()"
+            (click)="cancel()"
             [disabled]="waitForResponse">
       <mat-icon>cancel</mat-icon> Cancel</button>
     <button mat-button
             class="confirm"
-            (click)="onSaveClick()"
+            (click)="save()"
             [disabled]="!forms.dirty || forms.invalid || waitForResponse">
       <mat-icon>save</mat-icon>Save</button>
   </mat-card-actions>

src/app/tts-filters/filter-item-edit/filter-item-edit.component.ts

@@ -29,9 +29,8 @@ import { MatIconModule } from '@angular/material/icon';
 })
 export class FilterItemEditComponent {
   private readonly client = inject(HermesClientService);
-
   private readonly dialogRef = inject(MatDialogRef<FilterItemEditComponent>);
-  readonly data = inject<Filter>(MAT_DIALOG_DATA);
+  private readonly data = inject<Filter>(MAT_DIALOG_DATA);
 
   readonly regexOptions = [
     {
@@ -52,8 +51,8 @@ export class FilterItemEditComponent {
     },
   ];
 
-  readonly searchControl = new FormControl(this.data.search, [Validators.required]);
+  readonly searchControl = new FormControl<string>(this.data.search, [Validators.required]);
-  readonly replaceControl = new FormControl(this.data.replace);
+  readonly replaceControl = new FormControl<string>(this.data.replace);
   readonly flagControl = new FormControl<string[]>(this.optionsSelected);
   readonly forms = new FormGroup({
     search: this.searchControl,
@@ -70,7 +69,7 @@ export class FilterItemEditComponent {
     return this.regexOptions.filter(o => (flag & o.flag) > 0).map(o => o.name);
   }
 
-  onSaveClick(): void {
+  save(): void {
     if (!this.forms.dirty || this.forms.invalid || this.waitForResponse)
       return;
 
@@ -110,7 +109,7 @@ export class FilterItemEditComponent {
     }
   }
 
-  onCancelClick(): void {
+  cancel(): void {
     this.dialogRef.close();
   }
 

src/app/tts-filters/filter-item/filter-item.component.html

@@ -1,12 +1,12 @@
 <ul>
   <li>
     <span>
-      {{item.search}}
+      {{item().search}}
     </span>
   </li>
   <li>
     <span>
-      {{item.replace}}
+      {{item().replace}}
     </span>
   </li>
   <li>
@@ -14,7 +14,7 @@
       <button mat-menu-item
               (click)="openDialog()">Edit</button>
       <button mat-menu-item
-              (click)="onDelete.emit(item)">Delete</button>
+              (click)="delete()">Delete</button>
     </mat-menu>
 
     <button mat-icon-button

src/app/tts-filters/filter-item/filter-item.component.ts

@@ -1,5 +1,5 @@
-import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
+import { Component, inject, input } from '@angular/core';
-import { Filter, FilterFlag } from '../../shared/models/filter';
+import { Filter } from '../../shared/models/filter';
 import { MatCardModule } from '@angular/material/card';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatIconModule } from '@angular/material/icon';
@@ -11,36 +11,28 @@ import { HermesClientService } from '../../hermes-client.service';
 @Component({
   selector: 'tts-filter-item',
   standalone: true,
-  imports: [MatButtonModule, MatCardModule, MatMenuModule, MatIconModule],
+  imports: [
+    MatButtonModule,
+    MatCardModule,
+    MatMenuModule,
+    MatIconModule
+  ],
   templateUrl: './filter-item.component.html',
   styleUrl: './filter-item.component.scss'
 })
-export class FilterItemComponent implements OnInit {
+export class FilterItemComponent {
-  @Input() item: Filter = { id: "", user_id: "", search: "", replace: "", flag: FilterFlag.None };
+  item = input.required<Filter>();
-  @Output() onDelete = new EventEmitter<Filter>();
-  readonly client = inject(HermesClientService);
-  readonly dialog = inject(MatDialog);
-  private loaded = false;
 
+  private readonly client = inject(HermesClientService);
+  private readonly dialog = inject(MatDialog);
 
-  ngOnInit(): void {
+  delete() {
-    this.loaded = true;
+    this.client.deleteTTSFilter(this.item().id);
   }
 
   openDialog(): void {
-    if (!this.loaded)
+    this.dialog.open(FilterItemEditComponent, {
-      return;
+      data: { id: this.item().id, search: this.item().search, replace: this.item().replace, flag: this.item().flag },
-
-    const dialogRef = this.dialog.open(FilterItemEditComponent, {
-      data: { id: this.item.id, search: this.item.search, replace: this.item.replace, flag: this.item.flag },
-    });
-
-    dialogRef.afterClosed().subscribe((result: Filter) => {
-      if (result) {
-        this.item.search = result.search;
-        this.item.replace = result.replace;
-        this.item.flag = result.flag;
-      }
     });
   }
 }

src/app/tts-filters/filter-list/filter-list.component.html

@@ -7,10 +7,9 @@
         <li></li>
       </ul>
     </li>
-    @for (filter of filters; track $index) {
+    @for (filter of filters(); track $index) {
     <li>
-      <tts-filter-item [item]="filter"
+      <tts-filter-item [item]="filter" />
-                       (onDelete)="deleteFilter($event)" />
     </li>
     }
   </ul>

src/app/tts-filters/filter-list/filter-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, Input } from '@angular/core';
+import { Component, inject, input, Input } from '@angular/core';
 import { FilterItemComponent } from '../filter-item/filter-item.component';
 import { Filter } from '../../shared/models/filter';
 import { HermesClientService } from '../../hermes-client.service';
@@ -11,10 +11,7 @@ import { HermesClientService } from '../../hermes-client.service';
   styleUrl: './filter-list.component.scss'
 })
 export class FilterListComponent {
-  @Input() filters: Filter[] = [];
+  private readonly client = inject(HermesClientService);
-  client = inject(HermesClientService);
 
-  deleteFilter(e: any): void {
+  filters = input.required<Filter[]>();
-    this.client.deleteTTSFilter(e.id);
-  }
 }

src/app/tts-filters/filters/filters.component.ts

@@ -1,11 +1,9 @@
-import { Component, inject, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, inject, OnDestroy } from '@angular/core';
 import { FilterListComponent } from "../filter-list/filter-list.component";
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { HermesClientService } from '../../hermes-client.service';
 import { Filter, FilterFlag } from '../../shared/models/filter';
-import { isPlatformBrowser } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
-import { ActivatedRoute, Router } from '@angular/router';
 import { FilterItemEditComponent } from '../filter-item-edit/filter-item-edit.component';
 import { MatDialog } from '@angular/material/dialog';
 import TtsFilterService from '../../shared/services/tts-filter.service';
@@ -14,84 +12,37 @@ import { Subscription } from 'rxjs';
 @Component({
   selector: 'filters',
   standalone: true,
-  imports: [FilterListComponent, MatButtonModule, MatIconModule],
+  imports: [
+    FilterListComponent,
+    MatButtonModule,
+    MatIconModule
+  ],
   templateUrl: './filters.component.html',
   styleUrl: './filters.component.scss'
 })
-export class FiltersComponent implements OnInit, OnDestroy {
+export class FiltersComponent implements OnDestroy {
   private readonly filterService = inject(TtsFilterService);
   private readonly route = inject(ActivatedRoute);
-  private readonly subscriptions: Subscription[] = [];
+  private readonly subscriptions: (Subscription | undefined)[] = [];
-  private isBrowser: boolean;
+
   readonly dialog = inject(MatDialog);
-  items: Filter[];
+
+  items: Filter[] = [];
 
 
-  constructor(private client: HermesClientService, private router: Router, @Inject(PLATFORM_ID) private platformId: Object) {
+  constructor() {
-    this.isBrowser = isPlatformBrowser(this.platformId);
+    this.route.data.subscribe(data => this.items = data['filters'] || []);
-    this.items = [];
 
-    this.route.data.subscribe(data => {
+    this.subscriptions.push(this.filterService.delete$?.subscribe(d => this.items = this.items.filter(a => a.id != d.request.data.id)));
-      if (!data['filters'])
-        return;
-
-      this.items = [...data['filters']];
-    });
-    let subscription = this.filterService.create$?.subscribe(d => {
-      if (d.error || d.request.nounce != null && d.request.nounce.startsWith(this.client.session_id))
-        return;
-
-      this.items.push(d.data);
-    });
-    if (subscription)
-      this.subscriptions.push(subscription);
-
-    subscription = this.filterService.update$?.subscribe(d => {
-      if (d.error || d.request.nounce != null && d.request.nounce.startsWith(this.client.session_id))
-        return;
-
-      const filter = this.items.find(f => f.id == d.data.id);
-      if (filter) {
-        filter.search = d.data.search;
-        filter.replace = d.data.replace;
-        filter.flag = d.data.flag || 0;
-      }
-    });
-    if (subscription)
-      this.subscriptions.push(subscription);
-
-    subscription = this.filterService.delete$?.subscribe(d => {
-      if (d.error)
-        return;
-
-      this.items = this.items.filter(a => a.id != d.request.data.id);
-    });
-    if (subscription)
-      this.subscriptions.push(subscription);
-  }
-
-  ngOnInit(): void {
-    if (!this.isBrowser)
-      return;
-
-    if (!this.client.logged_in) {
-      this.router.navigate(["tts-login"]);
-      return;
-    }
   }
 
   ngOnDestroy() {
-    this.subscriptions.forEach(s => s.unsubscribe());
+    this.subscriptions.filter(s => !!s).forEach(s => s.unsubscribe());
   }
 
   openDialog(): void {
-    const dialogRef = this.dialog.open(FilterItemEditComponent, {
+    this.dialog.open(FilterItemEditComponent, {
       data: { id: '', user_id: '', search: '', replace: '', flag: FilterFlag.None },
     });
-
-    dialogRef.afterClosed().subscribe((result: Filter) => {
-      if (result)
-        this.items.push(result);
-    });
   }
 }