add filter for lazy load expired events #1127

frontend-admin/src/app/app.module.ts

@@ -34,7 +34,7 @@ export function HttpLoaderFactory(http: HttpClient) {
 @NgModule({
   declarations: [
     AppComponent,
-    MissingOrgComponent
+    MissingOrgComponent,
   ],
   imports: [
     BrowserModule,

frontend-admin/src/app/dashboard/dashboard.component.html

@@ -1,16 +1,19 @@
 <h1 translate="admin.dashboard.my-events"></h1>
-<button type="button" class="btn btn-primary"><svg-icon key="check" size="md"></svg-icon> Active</button>
-<button type="button" class="btn btn-outline-primary">Inactive</button>
-<h2>Active</h2>
-<ul>
-    <li *ngFor="let ev of activeEvents$ | async">
-        {{ev.displayName}} {{ev.formattedBegin}} {{ev.formattedEnd}}
-    </li>
-</ul>
-
-<h2>Expired</h2>
-<ul>
-    <li *ngFor="let ev of expiredEvents$ | async">
-        {{ev.displayName}} {{ev.formattedBegin}} {{ev.formattedEnd}}
-    </li>
-</ul>
+<app-filter-button text="Active" [checked]="activeFilter" (toggleFilter)="toggleActiveFilter($event)"></app-filter-button>
+<app-filter-button text="Inactive" [checked]="inactiveFilter"  (toggleFilter)="toggleInactiveFilter($event)"></app-filter-button>
+<ng-container *ngIf="activeFilter">
+    <h2>Active</h2>
+    <ul>
+        <li *ngFor="let ev of activeEvents$ | async">
+            {{ev.displayName}} {{ev.formattedBegin}} {{ev.formattedEnd}}
+        </li>
+    </ul>
+</ng-container>
+<ng-container *ngIf="inactiveFilter">
+    <h2>Expired</h2>
+    <ul>
+        <li *ngFor="let ev of expiredEvents$ | async">
+            {{ev.displayName}} {{ev.formattedBegin}} {{ev.formattedEnd}}
+        </li>
+    </ul>
+</ng-container>

frontend-admin/src/app/dashboard/dashboard.component.ts

@@ -12,13 +12,32 @@ export class DashboardComponent implements OnInit {
   public readonly organizationId: string;
   public activeEvents$: Observable<EventInfo[]> = of();
   public expiredEvents$: Observable<EventInfo[]> = of();
+  public activeFilter: boolean = true;
+  public inactiveFilter: boolean = false;
 
   constructor(route: ActivatedRoute, private readonly eventService: EventService) {
     this.organizationId = route.snapshot.paramMap.get('organizationId') as string;
   }
 
-  ngOnInit(): void {
-    this.activeEvents$ = this.eventService.getActiveEvents(this.organizationId);
-    this.expiredEvents$ = this.eventService.getExpiredEvents(this.organizationId);
+  public ngOnInit(): void {
+    this.activeEvents$ = this.eventService.getActiveEvents(this.organizationId); // default
+  }
+
+  public toggleActiveFilter(toggle: boolean): void {
+    this.activeFilter = toggle;
+    if (toggle) {
+      this.activeEvents$ = this.eventService.getActiveEvents(this.organizationId);
+    } else {
+      this.activeEvents$ = of();
+    }
+  }
+
+  public toggleInactiveFilter(toggle: boolean): void {
+    this.inactiveFilter = toggle;
+    if (toggle) {
+      this.expiredEvents$ = this.eventService.getExpiredEvents(this.organizationId);
+    } else {
+      this.expiredEvents$ = of();
+    }
   }
 }

frontend-admin/src/app/dashboard/dashboard.module.ts

@@ -8,11 +8,12 @@ import {CommonModule} from "@angular/common";
 import {EventService} from "../shared/event.service";
 import {OrganizationConfigurationComponent} from './organization-configuration/organization-configuration.component';
 import {provideSvgIconsConfig, SvgIconComponent} from '@ngneat/svg-icon';
-import { TranslateModule } from '@ngx-translate/core'
-import { ICON_CONFIG } from "../shared/icons";
-import { SubscriptionsComponent } from './subscriptions/subscriptions.component';
-import { OrganizationInfoComponent } from './organization-info/organization-info.component';
-import { GroupsComponent } from './groups/groups.component';
+import {TranslateModule} from '@ngx-translate/core'
+import {ICON_CONFIG} from "../shared/icons";
+import {SubscriptionsComponent} from './subscriptions/subscriptions.component';
+import {OrganizationInfoComponent} from './organization-info/organization-info.component';
+import {GroupsComponent} from './groups/groups.component';
+import {FilterButtonComponent} from "../shared/filter-button/filter-button.component";
 
 @NgModule({
   imports: [
@@ -28,6 +29,7 @@ import { GroupsComponent } from './groups/groups.component';
       { path: 'groups', component: GroupsComponent },
     ]),
     SvgIconComponent,
+    FilterButtonComponent,
   ],
   declarations: [
     DashboardComponent,

frontend-admin/src/app/shared/filter-button/filter-button.component.ts

@@ -0,0 +1,36 @@
+import { NgClass, NgIf } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { SvgIconComponent } from '@ngneat/svg-icon';
+
+@Component({
+  standalone: true,
+  imports: [SvgIconComponent, NgClass, NgIf],
+  selector: 'app-filter-button',
+  template: `
+  <button
+    type="button"
+    class="btn"
+    style="border-radius: 20px"
+    [ngClass]="{'btn-outline-primary': !checked, 'btn-primary': checked}"
+    (click)="onClick()"
+  >
+    <svg-icon key="check" size="md" *ngIf="checked"></svg-icon> {{text}}
+  </button>`,
+})
+export class FilterButtonComponent {
+
+  @Input()
+  public text?: string;
+
+  @Input()
+  public checked: boolean = false;
+
+  @Output()
+  public toggleFilter = new EventEmitter<boolean>();
+
+  constructor() { }
+
+  public onClick(): void {
+    this.toggleFilter.emit(!this.checked);
+  }
+}