Fix/apps page (#797)

* fix: missing initial value on release dropdown * fix: disable clearable select * fix: use only selected signal to bind in template * fix: initial load * fix: pagination and inital load of appServers * fix: simplify component with childstate see: https://youtu.be/aKxcIQMWSNU * fix: remove unused code * chore: improve naming * fix: tests for required signals --------- Co-authored-by: Max Burri <[email protected]>
liimaorg · Nov 19, 2024 · f2f2cf4 · f2f2cf4
1 parent 5f53fff
commit f2f2cf4
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 33 deletions.
diff --git a/AMW_angular/io/src/app/apps/apps-filter/apps-filter.component.html b/AMW_angular/io/src/app/apps/apps-filter/apps-filter.component.html
@@ -13,11 +13,11 @@
       <label class="form-label">Release</label>
       <ng-select
         id="selectRelease"
-        [ngModel]="upcoming()"
-        (ngModelChange)="selected.set($event)"
-        placeholder="Select release"
+        [clearable]="false"
+        [ngModel]="selection().selected()"
+        (change)="selection().selected.set($event)"
       >
-        @for (release of releases; track release.id) {
+        @for (release of selection().releases; track release.id) {
         <ng-option [value]="release.id">{{ release.name }}</ng-option>
         }
       </ng-select>

diff --git a/AMW_angular/io/src/app/apps/apps-filter/apps-filter.component.spec.ts b/AMW_angular/io/src/app/apps/apps-filter/apps-filter.component.spec.ts
@@ -1,6 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AppsFilterComponent } from './apps-filter.component';
+import { InputSignal, signal } from '@angular/core';
+import { Release } from '../../settings/releases/release';
 
 describe('AppsFilterComponent', () => {
   let component: AppsFilterComponent;
@@ -13,6 +15,8 @@ describe('AppsFilterComponent', () => {
 
     fixture = TestBed.createComponent(AppsFilterComponent);
     component = fixture.componentInstance;
+    component.releases = signal<Release[]>([]) as unknown as InputSignal<Release[]>;
+    component.upcoming = signal<number>(0) as unknown as InputSignal<number>;
     fixture.detectChanges();
   });
 

diff --git a/AMW_angular/io/src/app/apps/apps-filter/apps-filter.component.ts b/AMW_angular/io/src/app/apps/apps-filter/apps-filter.component.ts
@@ -1,30 +1,33 @@
-import { ChangeDetectionStrategy, Component, computed, input, Input, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core';
 
 import { NgSelectModule } from '@ng-select/ng-select';
 import { Release } from '../../settings/releases/release';
 import { FormsModule } from '@angular/forms';
-import { Output, EventEmitter } from '@angular/core';
 import { ButtonComponent } from '../../shared/button/button.component';
-import { IconComponent } from '../../shared/icon/icon.component';
 
 @Component({
   selector: 'app-apps-filter',
   standalone: true,
-  imports: [FormsModule, NgSelectModule, ButtonComponent, IconComponent],
+  imports: [FormsModule, NgSelectModule, ButtonComponent],
   templateUrl: './apps-filter.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppsFilterComponent {
-  @Input() releases: Release[];
+  releases = input.required<Release[]>();
+  upcoming = input.required<number>();
 
-  upcoming = input<number>();
-  selected = signal<number>(this.upcoming());
+  selection = computed(() => {
+    return {
+      releases: this.releases(),
+      selected: signal(this.upcoming()),
+    };
+  });
 
-  @Output() filterEvent = new EventEmitter<{ filter: string; releaseId: number }>();
+  appName = signal<string>('');
 
-  appName: string;
+  filterEvent = output<{ filter: string; releaseId: number }>();
 
   search() {
-    this.filterEvent.emit({ filter: this.appName, releaseId: this.selected() });
+    this.filterEvent.emit({ filter: this.appName(), releaseId: this.selection().selected() });
   }
 }
diff --git a/AMW_angular/io/src/app/apps/apps.component.html b/AMW_angular/io/src/app/apps/apps.component.html
@@ -42,8 +42,8 @@
           <div class="card-footer py-1">
             <div class="row bg-light align-items-center">
               <app-pagination
-                [currentPage]="currentPage"
-                [lastPage]="lastPage"
+                [currentPage]="currentPage()"
+                [lastPage]="lastPage()"
                 (doSetMax)="setMaxResultsPerPage($event)"
                 (doSetOffset)="setNewOffset($event)"
               >

diff --git a/AMW_angular/io/src/app/apps/apps.component.ts b/AMW_angular/io/src/app/apps/apps.component.ts
@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, computed, inject, OnInit, Signal } from '@angular/core';
-import { BehaviorSubject, Subject } from 'rxjs';
+import { ChangeDetectionStrategy, Component, computed, inject, OnDestroy, OnInit, Signal } from '@angular/core';
+import { BehaviorSubject, skip, Subject, take } from 'rxjs';
 import { LoadingIndicatorComponent } from '../shared/elements/loading-indicator.component';
 import { AsyncPipe } from '@angular/common';
 import { IconComponent } from '../shared/icon/icon.component';
@@ -16,12 +16,13 @@ import { AppsServersListComponent } from './apps-servers-list/apps-servers-list.
 import { PaginationComponent } from '../shared/pagination/pagination.component';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { AppServerAddComponent } from './app-server-add/app-server-add.component';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { AppAddComponent } from './app-add/app-add.component';
 import { ResourceService } from '../resource/resource.service';
 import { Resource } from '../resource/resource';
 import { AppCreate } from './app-create';
 import { ButtonComponent } from '../shared/button/button.component';
+import { offset } from '@popperjs/core';
 
 @Component({
   selector: 'app-apps',
@@ -39,7 +40,7 @@ import { ButtonComponent } from '../shared/button/button.component';
   templateUrl: './apps.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppsComponent implements OnInit {
+export class AppsComponent implements OnInit, OnDestroy {
   private appsService = inject(AppsService);
   private authService = inject(AuthService);
   private modalService = inject(NgbModal);
@@ -48,6 +49,7 @@ export class AppsComponent implements OnInit {
   private toastService = inject(ToastService);
 
   upcomingRelease: Signal<Release> = toSignal(this.releaseService.getUpcomingRelease());
+
   releases: Signal<Release[]> = toSignal(this.releaseService.getReleases(0, 50), { initialValue: [] as Release[] });
   appServerGroups = toSignal(this.resourceService.getByType('APPLICATIONSERVER'), {
     initialValue: [] as Resource[],
@@ -63,9 +65,6 @@ export class AppsComponent implements OnInit {
 
   isLoading = false;
 
-  currentPage: number;
-  lastPage: number;
-
   permissions = computed(() => {
     if (this.authService.restrictions().length > 0) {
       return {
@@ -78,18 +77,22 @@ export class AppsComponent implements OnInit {
     }
   });
 
+  currentPage = computed(() => Math.floor(this.offset() / this.maxResults()) + 1);
+  lastPage = computed(() => Math.ceil(this.count() / this.maxResults()));
+
+  constructor() {
+    toObservable(this.upcomingRelease)
+      .pipe(takeUntil(this.destroy$), skip(1), take(1))
+      .subscribe((release) => {
+        this.releaseId.set(release.id);
+        this.appsService.refreshData();
+      });
+  }
+
   ngOnInit(): void {
     this.error$.pipe(takeUntil(this.destroy$)).subscribe((msg) => {
       msg !== '' ? this.toastService.error(msg) : null;
     });
-    this.isLoading = true;
-    this.setPagination();
-    this.isLoading = false;
-  }
-
-  private setPagination() {
-    this.currentPage = Math.floor(this.offset() / this.maxResults()) + 1;
-    this.lastPage = Math.ceil(this.count() / this.maxResults());
   }
 
   addApp() {
@@ -145,13 +148,11 @@ export class AppsComponent implements OnInit {
     this.maxResults.set(max);
     this.offset.set(0);
     this.appsService.refreshData();
-    this.setPagination();
   }
 
   setNewOffset(offset: number) {
     this.offset.set(offset);
     this.appsService.refreshData();
-    this.setPagination();
   }
 
   updateFilter(values: { filter: string; releaseId: number }) {
@@ -169,4 +170,8 @@ export class AppsComponent implements OnInit {
       this.appsService.refreshData();
     }
   }
+
+  ngOnDestroy(): void {
+    this.destroy$.next(undefined);
+  }
 }