refactor(north): use signal inputs in file-table

OptimistikSAS · Jan 6, 2025 · e92acaf · e92acaf
1 parent 4494a28
commit e92acaf
Show file tree

Hide file tree

Showing 14 changed files with 297 additions and 218 deletions.
diff --git a/frontend/src/app/north/explore-cache/archive-files/archive-files.component.html b/frontend/src/app/north/explore-cache/archive-files/archive-files.component.html
@@ -1,7 +1,7 @@
 @if (fileTablePages.totalElements) {
   <div class="d-flex flex-row-reverse">
     <div [class]="fileTablePages.totalPages > 1 ? 'ms-2' : ''">
-      <oib-pagination [page]="fileTablePages" (pageChanged)="fileTable()?.changePage($event)" />
+      <oib-pagination [page]="fileTablePages" (pageChanged)="page.set($event)" />
     </div>
   </div>
 }
@@ -32,7 +32,14 @@
   </ng-template>
 
   @if (archiveFiles.length !== 0) {
-    <oib-file-table #fileTable [actions]="['view', 'retry', 'remove']" (itemAction)="onItemAction($event)" [files]="archiveFiles" />
+    <oib-file-table
+      #fileTable
+      [actions]="['view', 'retry', 'remove']"
+      [files]="archiveFiles"
+      [pageNumber]="page()"
+      (itemAction)="onItemAction($event)"
+      (selectedFiles)="selectedFiles.set($event)"
+    />
   } @else {
     <div>
       <div class="mb-3 oib-grey-container" translate="north.cache-settings.archive-files-none"></div>

diff --git a/frontend/src/app/north/explore-cache/archive-files/archive-files.component.ts b/frontend/src/app/north/explore-cache/archive-files/archive-files.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, inject, viewChild, input } from '@angular/core';
+import { Component, OnInit, inject, input, signal } from '@angular/core';
 import { TranslateDirective } from '@ngx-translate/core';
 import { formDirectives } from '../../../shared/form-directives';
 import { NorthConnectorService } from '../../../services/north-connector.service';
@@ -23,8 +23,9 @@ export class ArchiveFilesComponent implements OnInit {
 
   readonly northConnector = input<NorthConnectorDTO<NorthSettings> | null>(null);
   archiveFiles: Array<NorthCacheFiles> = [];
-  readonly fileTable = viewChild<FileTableComponent>('fileTable');
+  readonly page = signal(0);
   fileTablePages = emptyPage<FileTableData>();
+  readonly selectedFiles = signal<Array<FileTableData>>([]);
 
   ngOnInit() {
     this.northConnectorService.getCacheArchiveFiles(this.northConnector()!.id).subscribe(archiveFiles => {
@@ -56,11 +57,6 @@ export class ArchiveFilesComponent implements OnInit {
   refreshArchiveFiles() {
     this.northConnectorService.getCacheArchiveFiles(this.northConnector()!.id).subscribe(archiveFiles => {
       this.archiveFiles = archiveFiles;
-      const fileTable = this.fileTable();
-      if (fileTable) {
-        fileTable.refreshTable(archiveFiles);
-        this.fileTablePages = fileTable.pages;
-      }
     });
   }
 
@@ -90,6 +86,6 @@ export class ArchiveFilesComponent implements OnInit {
   }
 
   private getCheckedFiles(): Array<string> {
-    return this.archiveFiles.filter(file => this.fileTable()?.checkboxByFiles.get(file.filename)).map(file => file.filename);
+    return this.selectedFiles().map(file => file.filename);
   }
 }
diff --git a/frontend/src/app/north/explore-cache/cache-files/cache-files.component.html b/frontend/src/app/north/explore-cache/cache-files/cache-files.component.html
@@ -1,7 +1,7 @@
 @if (fileTablePages.totalElements) {
   <div class="d-flex flex-row-reverse">
     <div [class]="fileTablePages.totalPages > 1 ? 'ms-2' : ''">
-      <oib-pagination [page]="fileTablePages" (pageChanged)="fileTable()?.changePage($event)" />
+      <oib-pagination [page]="fileTablePages" (pageChanged)="page.set($event)" />
     </div>
   </div>
 }
@@ -32,7 +32,14 @@
   </ng-template>
 
   @if (cacheFiles.length !== 0) {
-    <oib-file-table #fileTable [actions]="['view', 'archive', 'remove']" (itemAction)="onItemAction($event)" [files]="cacheFiles" />
+    <oib-file-table
+      #fileTable
+      [actions]="['view', 'archive', 'remove']"
+      [files]="cacheFiles"
+      [pageNumber]="page()"
+      (itemAction)="onItemAction($event)"
+      (selectedFiles)="selectedFiles.set($event)"
+    />
   } @else {
     <div>
       <div class="mb-3 oib-grey-container" translate="north.cache-settings.cache-files-none"></div>

diff --git a/frontend/src/app/north/explore-cache/cache-files/cache-files.component.ts b/frontend/src/app/north/explore-cache/cache-files/cache-files.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, inject, viewChild, input } from '@angular/core';
+import { Component, OnInit, inject, input, signal } from '@angular/core';
 import { TranslateDirective } from '@ngx-translate/core';
 import { formDirectives } from '../../../shared/form-directives';
 import { NorthConnectorService } from '../../../services/north-connector.service';
@@ -23,8 +23,9 @@ export class CacheFilesComponent implements OnInit {
 
   readonly northConnector = input<NorthConnectorDTO<NorthSettings> | null>(null);
   cacheFiles: Array<NorthCacheFiles> = [];
-  readonly fileTable = viewChild<FileTableComponent>('fileTable');
+  readonly page = signal(0);
   fileTablePages = emptyPage<FileTableData>();
+  readonly selectedFiles = signal<Array<FileTableData>>([]);
 
   ngOnInit() {
     this.northConnectorService.getCacheFiles(this.northConnector()!.id).subscribe(cacheFiles => {
@@ -56,11 +57,6 @@ export class CacheFilesComponent implements OnInit {
   refreshCacheFiles() {
     this.northConnectorService.getCacheFiles(this.northConnector()!.id).subscribe(cacheFiles => {
       this.cacheFiles = cacheFiles;
-      const fileTable = this.fileTable();
-      if (fileTable) {
-        fileTable.refreshTable(cacheFiles);
-        this.fileTablePages = fileTable.pages;
-      }
     });
   }
 
@@ -90,6 +86,6 @@ export class CacheFilesComponent implements OnInit {
   }
 
   private getCheckedFiles(): Array<string> {
-    return this.cacheFiles.filter(file => this.fileTable()?.checkboxByFiles.get(file.filename)).map(file => file.filename);
+    return this.selectedFiles().map(file => file.filename);
   }
 }
diff --git a/frontend/src/app/north/explore-cache/cache-values/cache-values.component.html b/frontend/src/app/north/explore-cache/cache-values/cache-values.component.html
@@ -1,7 +1,7 @@
 @if (valueTablePages.totalElements) {
   <div class="d-flex flex-row-reverse">
     <div [class]="valueTablePages.totalPages > 1 ? 'ms-2' : ''">
-      <oib-pagination [page]="valueTablePages" (pageChanged)="valueTable()?.changePage($event)" />
+      <oib-pagination [page]="valueTablePages" (pageChanged)="page.set($event)" />
     </div>
   </div>
 }
@@ -25,7 +25,7 @@
   </ng-template>
 
   @if (cacheValues.length !== 0) {
-    <oib-file-table #valueTable [actions]="[]" [files]="cacheValues" />
+    <oib-file-table #valueTable [files]="cacheValues" [pageNumber]="page()" (selectedFiles)="selectedFiles.set($event)" />
   } @else {
     <div>
       <div class="mb-3 oib-grey-container" translate="north.cache-settings.cache-values-none"></div>

diff --git a/frontend/src/app/north/explore-cache/cache-values/cache-values.component.ts b/frontend/src/app/north/explore-cache/cache-values/cache-values.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, inject, viewChild, input } from '@angular/core';
+import { Component, OnInit, inject, input, signal } from '@angular/core';
 import { TranslateDirective } from '@ngx-translate/core';
 import { formDirectives } from '../../../shared/form-directives';
 import { NorthConnectorService } from '../../../services/north-connector.service';
@@ -20,8 +20,9 @@ export class CacheValuesComponent implements OnInit {
 
   readonly northConnector = input<NorthConnectorDTO<NorthSettings> | null>(null);
   cacheValues: Array<NorthCacheFiles> = [];
-  readonly valueTable = viewChild<FileTableComponent>('valueTable');
   valueTablePages = emptyPage<FileTableData>();
+  readonly page = signal(0);
+  readonly selectedFiles = signal<Array<FileTableData>>([]);
 
   ngOnInit() {
     this.northConnectorService.getCacheValues(this.northConnector()!.id).subscribe(cacheFiles => {
@@ -31,7 +32,7 @@ export class CacheValuesComponent implements OnInit {
   }
 
   removeCacheValues() {
-    const files = this.cacheValues.filter(file => this.valueTable()?.checkboxByFiles.get(file.filename)).map(file => file.filename);
+    const files = this.selectedFiles().map(file => file.filename);
     this.northConnectorService.removeCacheValues(this.northConnector()!.id, files).subscribe(() => {
       this.refreshCacheValues();
     });
@@ -40,11 +41,6 @@ export class CacheValuesComponent implements OnInit {
   refreshCacheValues() {
     this.northConnectorService.getCacheValues(this.northConnector()!.id).subscribe(cacheFiles => {
       this.cacheValues = cacheFiles;
-      const valueTable = this.valueTable();
-      if (valueTable) {
-        valueTable.refreshTable(cacheFiles);
-        this.valueTablePages = valueTable.pages;
-      }
     });
   }
 }
diff --git a/frontend/src/app/north/explore-cache/error-files/error-files.component.html b/frontend/src/app/north/explore-cache/error-files/error-files.component.html
@@ -1,7 +1,7 @@
 @if (fileTablePages) {
   <div class="d-flex flex-row-reverse">
     <div [class]="fileTablePages.totalPages > 1 ? 'ms-2' : ''">
-      <oib-pagination [page]="fileTablePages" (pageChanged)="fileTable()?.changePage($event)" />
+      <oib-pagination [page]="fileTablePages" (pageChanged)="page.set($event)" />
     </div>
   </div>
 }
@@ -32,7 +32,14 @@
   </ng-template>
 
   @if (errorFiles.length !== 0) {
-    <oib-file-table #fileTable [actions]="['view', 'retry', 'remove']" (itemAction)="onItemAction($event)" [files]="errorFiles" />
+    <oib-file-table
+      #fileTable
+      [actions]="['view', 'retry', 'remove']"
+      [files]="errorFiles"
+      [pageNumber]="page()"
+      (itemAction)="onItemAction($event)"
+      (selectedFiles)="selectedFiles.set($event)"
+    />
   } @else {
     <div>
       <div class="mb-3 oib-grey-container" translate="north.cache-settings.error-files-none"></div>

diff --git a/frontend/src/app/north/explore-cache/error-files/error-files.component.ts b/frontend/src/app/north/explore-cache/error-files/error-files.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, inject, viewChild, input } from '@angular/core';
+import { Component, OnInit, inject, input, signal } from '@angular/core';
 import { TranslateDirective } from '@ngx-translate/core';
 import { formDirectives } from '../../../shared/form-directives';
 import { NorthConnectorService } from '../../../services/north-connector.service';
@@ -23,8 +23,9 @@ export class ErrorFilesComponent implements OnInit {
 
   readonly northConnector = input<NorthConnectorDTO<NorthSettings> | null>(null);
   errorFiles: Array<NorthCacheFiles> = [];
-  readonly fileTable = viewChild<FileTableComponent>('fileTable');
   fileTablePages = emptyPage<FileTableData>();
+  readonly page = signal(0);
+  readonly selectedFiles = signal<Array<FileTableData>>([]);
 
   ngOnInit() {
     this.northConnectorService.getCacheErrorFiles(this.northConnector()!.id).subscribe(errorFiles => {
@@ -56,11 +57,6 @@ export class ErrorFilesComponent implements OnInit {
   refreshErrorFiles() {
     this.northConnectorService.getCacheErrorFiles(this.northConnector()!.id).subscribe(errorFiles => {
       this.errorFiles = errorFiles;
-      const fileTable = this.fileTable();
-      if (fileTable) {
-        fileTable.refreshTable(errorFiles);
-        this.fileTablePages = fileTable.pages;
-      }
     });
   }
 
@@ -90,6 +86,6 @@ export class ErrorFilesComponent implements OnInit {
   }
 
   private getCheckedFiles(): Array<string> {
-    return this.errorFiles.filter(file => this.fileTable()?.checkboxByFiles.get(file.filename)).map(file => file.filename);
+    return this.selectedFiles().map(file => file.filename);
   }
 }
diff --git a/frontend/src/app/north/explore-cache/error-values/error-values.component.html b/frontend/src/app/north/explore-cache/error-values/error-values.component.html
@@ -1,7 +1,7 @@
 @if (fileTablePages) {
   <div class="d-flex flex-row-reverse">
     <div [class]="fileTablePages.totalPages > 1 ? 'ms-2' : ''">
-      <oib-pagination [page]="fileTablePages" (pageChanged)="fileTable()?.changePage($event)" />
+      <oib-pagination [page]="fileTablePages" (pageChanged)="page.set($event)" />
     </div>
   </div>
 }
@@ -32,7 +32,7 @@
   </ng-template>
 
   @if (errorValues.length !== 0) {
-    <oib-file-table #fileTable [files]="errorValues" />
+    <oib-file-table #fileTable [files]="errorValues" [pageNumber]="page()" (selectedFiles)="selectedFiles.set($event)" />
   } @else {
     <div>
       <div class="mb-3 oib-grey-container" translate="north.cache-settings.error-values-none"></div>

diff --git a/frontend/src/app/north/explore-cache/error-values/error-values.component.ts b/frontend/src/app/north/explore-cache/error-values/error-values.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, inject, viewChild, input } from '@angular/core';
+import { Component, OnInit, inject, input, signal } from '@angular/core';
 import { TranslateDirective } from '@ngx-translate/core';
 import { formDirectives } from '../../../shared/form-directives';
 import { NorthConnectorService } from '../../../services/north-connector.service';
@@ -21,8 +21,9 @@ export class ErrorValuesComponent implements OnInit {
 
   readonly northConnector = input<NorthConnectorDTO<NorthSettings> | null>(null);
   errorValues: Array<NorthCacheFiles> = [];
-  readonly fileTable = viewChild<FileTableComponent>('fileTable');
   fileTablePages = emptyPage<FileTableData>();
+  readonly page = signal(0);
+  readonly selectedFiles = signal<Array<FileTableData>>([]);
 
   ngOnInit() {
     this.northConnectorService.getCacheErrorValues(this.northConnector()!.id).subscribe(errorValues => {
@@ -32,14 +33,14 @@ export class ErrorValuesComponent implements OnInit {
   }
 
   retryErrorValues() {
-    const files = this.errorValues.filter(file => this.fileTable()?.checkboxByFiles.get(file.filename)).map(file => file.filename);
+    const files = this.selectedFiles().map(file => file.filename);
     this.northConnectorService.retryCacheErrorValues(this.northConnector()!.id, files).subscribe(() => {
       this.refreshErrorValues();
     });
   }
 
   removeErrorValues() {
-    const files = this.errorValues.filter(file => this.fileTable()?.checkboxByFiles.get(file.filename)).map(file => file.filename);
+    const files = this.selectedFiles().map(file => file.filename);
     this.northConnectorService.removeCacheErrorValues(this.northConnector()!.id, files).subscribe(() => {
       this.refreshErrorValues();
     });
@@ -48,11 +49,6 @@ export class ErrorValuesComponent implements OnInit {
   refreshErrorValues() {
     this.northConnectorService.getCacheErrorValues(this.northConnector()!.id).subscribe(errorValues => {
       this.errorValues = errorValues;
-      const fileTable = this.fileTable();
-      if (fileTable) {
-        fileTable.refreshTable(errorValues);
-        this.fileTablePages = fileTable.pages;
-      }
     });
   }
 }