feat update pages

src/app/app.module.ts

@@ -49,6 +49,10 @@ import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
 import { TranslateHttpLoader } from "@ngx-translate/http-loader";
 import { HelferDetailPage } from "./pages/helfer/helfer-detail/helfer-detail.page";
 import { HelferAddPage } from "./pages/helfer/helfer-add/helfer-add.page";
+import { ClubMemberListPage } from "./pages/club-member-list/club-member-list.page";
+import { TeamMemberListPage } from "./pages/team-member-list/team-member-list.page";
+import { ClubAdminListPage } from "./pages/club-admin-list/club-admin-list.page";
+import { TeamAdminListPage } from "./pages/team-admin-list/team-admin-list.page";
 
 @NgModule({
   declarations: [
@@ -69,7 +73,12 @@ import { HelferAddPage } from "./pages/helfer/helfer-add/helfer-add.page";
 
     OnboardingPage,
     ClubPage,
+    ClubMemberListPage,
+    ClubAdminListPage,
+
     TeamPage,
+    TeamMemberListPage,
+    TeamAdminListPage
   ],
   imports: [
     BrowserModule,

src/app/pages/club-admin-list/club-admin-list-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ClubAdminListPage } from './club-admin-list.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ClubAdminListPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ClubAdminListPageRoutingModule {}

src/app/pages/club-admin-list/club-admin-list.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ClubAdminListPageRoutingModule } from './club-admin-list-routing.module';
+
+import { ClubAdminListPage } from './club-admin-list.page';
+import { TranslateModule } from '@ngx-translate/core';
+
+@NgModule({
+  imports: [
+    TranslateModule,
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ClubAdminListPageRoutingModule
+  ],
+  declarations: [ClubAdminListPage]
+})
+export class ClubAdminListPageModule {}

src/app/pages/club-admin-list/club-admin-list.page.html

@@ -0,0 +1,47 @@
+<ng-container *ngIf="club$ | async as club">
+  <ion-header [translucent]="true">
+    <ion-toolbar>
+      <ion-buttons slot="secondary">
+        <ion-button *ngIf="!allowEdit" (click)="edit()"
+          >{{"common.edit" | translate}}</ion-button
+        >
+        <ion-button *ngIf="allowEdit" (click)="edit()"
+          >{{"common.cancel" | translate}}</ion-button
+        >
+      </ion-buttons>
+      <ion-title>Club Details</ion-title>
+      <ion-buttons slot="primary">
+        <ion-button (click)="close()"
+          >{{"common.close" | translate}}</ion-button
+        >
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content [fullscreen]="true">
+    <ion-header collapse="condense">
+      <ion-toolbar>
+        <ion-title size="large">Club Admins</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-list [inset]="true">
+      <ion-list-header>
+        <ion-label> {{"common.admins" | translate}} </ion-label>
+      </ion-list-header>
+      <ion-item *ngFor="let member of club['clubAdmins']" detail="true">
+        <ion-avatar slot="start">
+          <img src="{{member?.profilePicture}}" />
+        </ion-avatar>
+        <ion-label class="ion-text-wrap" (click)="openMember(member)"
+          >{{member.firstName}} {{member.lastName}}</ion-label
+        >
+      </ion-item>
+    </ion-list>
+
+
+  </ion-content>
+</ng-container>
+<ng-template #noRequests>
+  <!-- You can put any placeholder or message here if needed when there are no requests -->
+</ng-template>

src/app/pages/club-admin-list/club-admin-list.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ClubAdminListPage } from './club-admin-list.page';
+
+describe('ClubAdminListPage', () => {
+  let component: ClubAdminListPage;
+  let fixture: ComponentFixture<ClubAdminListPage>;
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(ClubAdminListPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/club-admin-list/club-admin-list.page.ts

@@ -0,0 +1,223 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { AlertController, ModalController, NavParams, ToastController } from '@ionic/angular';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable, catchError, combineLatest, forkJoin, lastValueFrom, map, of, startWith, switchMap, take, tap } from 'rxjs';
+import { AuthService } from 'src/app/services/auth.service';
+import { FirebaseService } from 'src/app/services/firebase.service';
+import { UserProfileService } from 'src/app/services/firebase/user-profile.service';
+import { MemberPage } from '../member/member.page';
+import { Profile } from 'src/app/models/user';
+import { User } from 'firebase/auth';
+
+@Component({
+  selector: 'app-club-admin-list',
+  templateUrl: './club-admin-list.page.html',
+  styleUrls: ['./club-admin-list.page.scss'],
+})
+export class ClubAdminListPage implements OnInit {
+  @Input("club") club: any;
+  club$: Observable<any>;
+
+  user$: Observable<User>;
+  user: User;
+
+  allowEdit: boolean = false;
+
+  constructor(
+    private readonly modalCtrl: ModalController,
+    public navParams: NavParams,
+    private readonly alertCtrl: AlertController,
+    private readonly toastCtrl: ToastController,
+    private readonly userProfileService: UserProfileService,
+    private readonly fbService: FirebaseService,
+    private readonly authService: AuthService,
+    private translate: TranslateService
+  ) { }
+
+  ngOnInit() {
+
+    this.club = this.navParams.get("club");
+
+    this.club$ = of(this.club);
+    this.club$ = this.getClub(this.club.id);
+
+
+  }
+  edit() {
+    if (this.allowEdit) {
+      this.allowEdit = false;
+    } else {
+      this.allowEdit = true;
+    }
+  }
+
+  getClub(clubId: string) {
+    const calculateAge = (dateOfBirth) => {
+      // console.log("DoB: " + JSON.stringify(dateOfBirth));
+      const birthday = new Date(dateOfBirth.seconds * 1000);
+      const ageDifMs = Date.now() - birthday.getTime();
+      const ageDate = new Date(ageDifMs); // miliseconds from epoch
+      return Math.abs(ageDate.getUTCFullYear() - 1970);
+    };
+
+    return this.authService.getUser$().pipe(
+      take(1),
+      tap((user) => {
+        this.user = user;
+        if (!user) throw new Error("User not found");
+      }),
+      switchMap(() => this.fbService.getClubRef(clubId)),
+      switchMap((club) => {
+        if (!club) return of(null);
+        return combineLatest({
+          //clubMembers: this.fbService.getClubMemberRefs(clubId),
+          clubAdmins: this.fbService.getClubAdminRefs(clubId),
+          //clubRequests: this.fbService.getClubRequestRefs(clubId),
+        }).pipe(
+          switchMap(({ 
+            // clubMembers,
+             clubAdmins, 
+            // clubRequests
+             }) => {
+            /*const memberProfiles$ = clubMembers.map((member) =>
+              this.userProfileService.getUserProfileById(member.id).pipe(
+                take(1),
+                catchError(() =>
+                  of({ ...member, firstName: "Unknown", lastName: "Unknown" })
+                )
+              )
+            );*/
+          const adminProfiles$ = clubAdmins.map((admin) =>
+              this.userProfileService.getUserProfileById(admin.id).pipe(
+                take(1),
+                catchError(() =>
+                  of({ ...admin, firstName: "Unknown", lastName: "Unknown" })
+                )
+              )
+            );
+            /*  const clubRequests$ = clubRequests.map((request) =>
+              this.userProfileService.getUserProfileById(request.id).pipe(
+                take(1),
+                catchError(() =>
+                  of({ ...request, firstName: "Unknown", lastName: "Unknown" })
+                )
+              )
+            );*/
+            return forkJoin({
+              // clubMembers: forkJoin(memberProfiles$).pipe(startWith([])),
+              clubAdmins: forkJoin(adminProfiles$).pipe(startWith([])),
+              // clubRequests: forkJoin(clubRequests$).pipe(startWith([])),
+            }).pipe(
+              map(({ 
+                // clubMembers, 
+               clubAdmins, 
+              //  clubRequests
+               }) => ({
+                /*clubMembers: clubMembers.filter(
+                  (member) => member !== undefined
+                ), // Filter out undefined*/
+                clubAdmins: clubAdmins.filter((admin) => admin !== undefined), // Filter out undefined
+                /*clubRequests: clubRequests.filter(
+                  (request) => request !== undefined
+                ), // Filter out undefined*/
+              }))
+            );
+          }),
+          map(({ 
+          //  clubMembers, 
+            clubAdmins, 
+          //  clubRequests
+           }) => {
+
+            /*const ages = clubMembers
+              .map((member) =>
+                member.hasOwnProperty("dateOfBirth")
+                  ? calculateAge(member.dateOfBirth)
+                  : 0
+              )
+              .filter((age) => age > 0); // Filter out invalid or 'Unknown' ages
+            // console.log(ages);
+
+            const averageAge =
+              ages.length > 0
+                ? ages.reduce((a, b) => a + b, 0) / ages.length
+                : 0; // Calculate average or set to 0 if no valid ages
+            */
+            return {
+              ...club,
+              // averageAge: averageAge.toFixed(1), // Keep two decimal places
+             // clubMembers,
+             clubAdmins,
+            //  clubRequests,
+            };
+          })
+        );
+      }),
+      catchError((err) => {
+        this.toastActionError(err);
+        console.error("Error in getClubWithMembersAndAdmins:", err);
+        return of(null);
+      })
+    );
+  }
+
+  async openMember(member: Profile) {
+    console.log("openMember");
+    const modal = await this.modalCtrl.create({
+      component: MemberPage,
+      presentingElement: await this.modalCtrl.getTop(),
+      canDismiss: true,
+      showBackdrop: true,
+      componentProps: {
+        data: member,
+      },
+    });
+    modal.present();
+
+    const { data, role } = await modal.onWillDismiss();
+
+    if (role === "confirm") {
+    }
+  }
+
+
+  async toastActionSaved() {
+    const toast = await this.toastCtrl.create({
+      message: await lastValueFrom(this.translate.get("common.success__saved")),
+      duration: 1500,
+      position: "bottom",
+      color: "success",
+    });
+
+    await toast.present();
+  }
+
+  async toastActionCanceled() {
+    const toast = await this.toastCtrl.create({
+      message: await lastValueFrom(this.translate.get("club.action__canceled")),
+      duration: 1500,
+      position: "bottom",
+      color: "danger",
+    });
+    await toast.present();
+  }
+
+  async toastActionError(error) {
+    const toast = await this.toastCtrl.create({
+      message: error.message,
+      duration: 2000,
+      position: "bottom",
+      color: "danger",
+    });
+
+    await toast.present();
+  }
+
+  async close() {
+    return await this.modalCtrl.dismiss(null, "close");
+  }
+
+  async confirm() {
+    return await this.modalCtrl.dismiss(this.club, "confirm");
+  }
+}

src/app/pages/club-member-list/club-member-list-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ClubMemberListPage } from './club-member-list.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ClubMemberListPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ClubMemberListPageRoutingModule {}

src/app/pages/club-member-list/club-member-list.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ClubMemberListPageRoutingModule } from './club-member-list-routing.module';
+
+import { ClubMemberListPage } from './club-member-list.page';
+import { TranslateModule } from '@ngx-translate/core';
+
+@NgModule({
+  imports: [
+    TranslateModule,
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ClubMemberListPageRoutingModule
+  ],
+  declarations: [ClubMemberListPage]
+})
+export class ClubMemberListPageModule {}