[Angular] Signals to handle loggers filteredAndOrderedLoggers

jhipster · Feb 3, 2024 · 9586776 · 9586776
1 parent 3ddeaf3
commit 9586776
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.html.ejs b/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.html.ejs
@@ -16,7 +16,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-@defer (when loggers && !isLoading()) {
+@defer (when loggers() && !isLoading()) {
 <div class="table-responsive">
   <h2 id="logs-page-heading" <%= jhiPrefix %>Translate="logs.title" data-cy="logsPageHeading">__jhiTransformTranslate__('logs.title')</h2>
 
@@ -33,7 +33,7 @@
   </div>
 <%_ } _%>
 
-  <p <%= jhiPrefix %>Translate="logs.nbloggers" [translateValues]="{ total: loggers?.length }">__jhiTransformTranslate__('logs.nbloggers', { "total": "{{ loggers?.length }}" })</p>
+  <p <%= jhiPrefix %>Translate="logs.nbloggers" [translateValues]="{ total: loggers()?.length }">__jhiTransformTranslate__('logs.nbloggers', { "total": "{{ loggers()?.length }}" })</p>
 
   <span <%= jhiPrefix %>Translate="logs.filter">__jhiTransformTranslate__('logs.filter')</span>
   <input type="text" [(ngModel)]="filter" (ngModelChange)="filterAndSort()" class="form-control" />
@@ -47,7 +47,7 @@
     </thead>
 
     <tbody>
-    @for (logger of filteredAndOrderedLoggers; track $index) {
+    @for (logger of filteredAndOrderedLoggers(); track $index) {
       <tr>
         <td>
           <small>{{ logger.name | slice: 0:140 }}</small>

diff --git a/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.spec.ts.ejs b/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.spec.ts.ejs
@@ -74,7 +74,7 @@ describe('LogsComponent', () => {
 
       // THEN
       expect(service.findAll).toHaveBeenCalled();
-      expect(comp.loggers?.[0]).toEqual(expect.objectContaining(log));
+      expect(comp.loggers()?.[0]).toEqual(expect.objectContaining(log));
     });
   });
 
@@ -99,7 +99,7 @@ describe('LogsComponent', () => {
       // THEN
       expect(service.changeLevel).toHaveBeenCalled();
       expect(service.findAll).toHaveBeenCalled();
-      expect(comp.loggers?.[0]).toEqual(expect.objectContaining(log));
+      expect(comp.loggers()?.[0]).toEqual(expect.objectContaining(log));
     });
   });
 });
diff --git a/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.ts.ejs b/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.ts.ejs
@@ -38,8 +38,8 @@ import { GatewayRoutesService } from '../gateway/gateway-routes.service';
   imports: [SharedModule, FormsModule, SortDirective, SortByDirective],
 })
 export default class LogsComponent implements OnInit {
-  loggers?: Log[];
-  filteredAndOrderedLoggers?: Log[];
+  loggers = signal<Log[] | undefined>(undefined);
+  filteredAndOrderedLoggers = signal<Log[] | undefined>(undefined);
   isLoading = signal(false);
   filter = '';
   orderProp: keyof Log = 'name';
@@ -71,7 +71,7 @@ export default class LogsComponent implements OnInit {
 <%_ } _%>
 
   filterAndSort(): void {
-    this.filteredAndOrderedLoggers = this.loggers!.filter(
+    this.filteredAndOrderedLoggers.set(this.loggers()!.filter(
       logger => !this.filter || logger.name.toLowerCase().includes(this.filter.toLowerCase())
     ).sort((a, b) => {
       if (a[this.orderProp] < b[this.orderProp]) {
@@ -82,7 +82,7 @@ export default class LogsComponent implements OnInit {
         return a.name < b.name ? -1 : 1;
       }
       return 0;
-    });
+    }));
   }
 
   private findAndExtractLoggers(): void {
@@ -97,8 +97,8 @@ export default class LogsComponent implements OnInit {
       )
       .subscribe({
         next: (response: LoggersResponse) =>
-          (this.loggers = Object.entries(response.loggers).map(([key, logger]) => new Log(key, logger.effectiveLevel))),
-        error: () => (this.loggers = []),
+          (this.loggers.set(Object.entries(response.loggers).map(([key, logger]) => new Log(key, logger.effectiveLevel)))),
+        error: () => (this.loggers.set([])),
       });
   }