Merge pull request #25072 from qmonmert/angcomponent

[Angular] Signals to handle allBeans beans propertySources

generators/angular/templates/src/main/webapp/app/admin/configuration/configuration.component.html.ejs

@@ -16,7 +16,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-@if (allBeans) {
+@if (allBeans()) {
 <div>
   <h2 id="configuration-page-heading" <%= jhiPrefix %>Translate="configuration.title" data-cy="configurationPageHeading">__jhiTransformTranslate__('configuration.title')</h2>
 
@@ -35,7 +35,7 @@
       </tr>
     </thead>
     <tbody>
-    @for (bean of beans; track $index) {
+    @for (bean of beans(); track $index) {
       <tr>
         <td>
           <span>{{ bean.prefix }}</span>
@@ -55,7 +55,7 @@
     </tbody>
   </table>
 
-  @for (propertySource of propertySources; track i; let i = $index) {
+  @for (propertySource of propertySources(); track i; let i = $index) {
   <div>
     <h4 [id]="'property-source-' + i">
       <span>{{ propertySource.name }}</span>

generators/angular/templates/src/main/webapp/app/admin/configuration/configuration.component.spec.ts.ejs

@@ -78,9 +78,9 @@ describe('ConfigurationComponent', () => {
       // THEN
       expect(service.getBeans).toHaveBeenCalled();
       expect(service.getPropertySources).toHaveBeenCalled();
-      expect(comp.allBeans).toEqual(beans);
-      expect(comp.beans).toEqual(beans);
-      expect(comp.propertySources).toEqual(propertySources);
+      expect(comp.allBeans()).toEqual(beans);
+      expect(comp.beans()).toEqual(beans);
+      expect(comp.propertySources()).toEqual(propertySources);
     });
   });
 });

generators/angular/templates/src/main/webapp/app/admin/configuration/configuration.component.ts.ejs

@@ -16,7 +16,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-import { Component, inject, OnInit } from '@angular/core';
+import { Component, inject, OnInit, signal } from '@angular/core';
 
 import SharedModule from 'app/shared/shared.module';
 import { FormsModule } from '@angular/forms';
@@ -31,28 +31,28 @@ import { Bean, PropertySource } from './configuration.model';
   imports: [SharedModule, FormsModule, SortDirective, SortByDirective],
 })
 export default class ConfigurationComponent implements OnInit {
-  allBeans!: Bean[];
-  beans: Bean[] = [];
+  allBeans = signal<Bean[] | undefined>(undefined);
+  beans = signal<Bean[]>([]);
   beansFilter = '';
   beansAscending = true;
-  propertySources: PropertySource[] = [];
+  propertySources = signal<PropertySource[]>([]);
 
   private configurationService = inject(ConfigurationService);
 
   ngOnInit(): void {
     this.configurationService.getBeans().subscribe(beans => {
-      this.allBeans = beans;
+      this.allBeans.set(beans);
       this.filterAndSortBeans();
     });
 
-    this.configurationService.getPropertySources().subscribe(propertySources => (this.propertySources = propertySources));
+    this.configurationService.getPropertySources().subscribe(propertySources => (this.propertySources.set(propertySources)));
   }
 
   filterAndSortBeans(): void {
     const beansAscendingValue = this.beansAscending ? -1 : 1;
     const beansAscendingValueReverse = this.beansAscending ? 1 : -1;
-    this.beans = this.allBeans
+    this.beans.set(this.allBeans()!
       .filter(bean => !this.beansFilter || bean.prefix.toLowerCase().includes(this.beansFilter.toLowerCase()))
-      .sort((a, b) => (a.prefix < b.prefix ? beansAscendingValue : beansAscendingValueReverse));
+      .sort((a, b) => (a.prefix < b.prefix ? beansAscendingValue : beansAscendingValueReverse)));
   }
 }