feat(sai-editor): make the timed-actionlist linkable

libs/shared/base-abstract-classes/src/components/editors/select-complex-key.component.ts

@@ -1,7 +1,7 @@
-import { ComplexKeyHandlerService } from '../../service/handlers/complex-key.handler.service';
-import { TableRow, WIKI_BASE_URL } from '@keira/shared/constants';
-import { DTCFG } from '@keira/shared/config';
 import { ChangeDetectorRef, inject } from '@angular/core';
+import { DTCFG } from '@keira/shared/config';
+import { TableRow, WIKI_BASE_URL } from '@keira/shared/constants';
+import { ComplexKeyHandlerService } from '../../service/handlers/complex-key.handler.service';
 import { SearchService } from '../../service/select/search.service';
 
 /* istanbul ignore next */ // TODO: fix coverage
@@ -14,7 +14,8 @@ export abstract class SelectComplexKeyComponent<T extends TableRow> {
 
   private readonly changeDetectorRef = inject(ChangeDetectorRef);
 
-  onSelect(event: { selected: Array<Partial<T>> }) {
+  onSelect(event: { selected: Array<Partial<T>> }): void {
+    console.log('### event', event);
     this.handlerService.select(false, event.selected[0]);
   }
 

libs/shared/sai-editor/src/timed-actionlist/timed-actionlist.component.html

@@ -1,10 +1,12 @@
 <ngx-datatable
-  class="bootstrap table table-striped text-center"
+  class="bootstrap table table-striped text-center datatable-select"
   [rows]="timedActionlists$ | async"
   [headerHeight]="DTCFG.headerHeight"
   [footerHeight]="DTCFG.footerHeight"
   [columnMode]="DTCFG.columnMode"
   [rowHeight]="DTCFG.rowHeight"
+  [selectionType]="DTCFG.selectionType"
+  (select)="onSelect($event)"
 >
   <ngx-datatable-column [minWidth]="100" [maxWidth]="100" name="entryorguid" prop="entryorguid"></ngx-datatable-column>
   <ngx-datatable-column [minWidth]="50" [maxWidth]="60" name="id" prop="id"></ngx-datatable-column>

libs/shared/sai-editor/src/timed-actionlist/timed-actionlist.component.ts

@@ -1,33 +1,39 @@
 import { ChangeDetectionStrategy, Component, inject, Input, OnChanges } from '@angular/core';
-import { DTCFG } from '@keira/shared/config';
 
-import { SmartScripts } from '@keira/shared/acore-world-model';
-import { Observable } from 'rxjs';
 import { AsyncPipe } from '@angular/common';
-import { NgxDatatableModule } from '@siemens/ngx-datatable';
+import { SmartScripts } from '@keira/shared/acore-world-model';
+import { SelectComplexKeyComponent } from '@keira/shared/base-abstract-classes';
 import { MysqlQueryService } from '@keira/shared/db-layer';
+import { SaiSearchService } from '@keira/shared/selectors';
+import { NgxDatatableModule } from '@siemens/ngx-datatable';
+import { Observable } from 'rxjs';
+import { SaiHandlerService } from '../sai-handler.service';
 
 @Component({
   selector: 'keira-timed-actionlist',
   templateUrl: './timed-actionlist.component.html',
-  styleUrls: ['./timed-actionlist.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [NgxDatatableModule, AsyncPipe],
 })
-export class TimedActionlistComponent implements OnChanges {
+export class TimedActionlistComponent extends SelectComplexKeyComponent<SmartScripts> implements OnChanges {
   @Input({ required: true }) creatureId!: string | number;
 
   private readonly queryService = inject(MysqlQueryService);
-
-  readonly DTCFG = DTCFG;
+  protected override readonly handlerService = inject(SaiHandlerService);
+  readonly selectService = inject(SaiSearchService);
 
   private _timedActionLists$!: Observable<SmartScripts[]>;
   get timedActionlists$(): Observable<SmartScripts[]> {
     return this._timedActionLists$;
   }
 
-  ngOnChanges() {
+  ngOnChanges(): void {
     this._timedActionLists$ = this.queryService.getTimedActionlists(this.creatureId);
   }
+
+  override onSelect(event: { selected: SmartScripts[] }): void {
+    console.log('### event 2', event);
+    this.handlerService.select(false, event.selected[0], `Timed Actionlist ID ${event.selected[0].entryorguid}`);
+  }
 }