From 56b9a186d4625aef08f6a24c25a655b0b84969c9 Mon Sep 17 00:00:00 2001 From: Richard Toth Date: Sun, 24 May 2026 17:47:42 +0200 Subject: [PATCH] feat: list and remove umpires from tab 2 --- src/app/fullname-pipe.spec.ts | 8 ++ src/app/fullname-pipe.ts | 13 ++++ src/app/tab2/tab2.page.html | 92 +++++++++++++++++++++-- src/app/tab2/tab2.page.ts | 137 ++++++++++++++++++++++++++++++++-- src/app/tabs/tabs.page.html | 4 +- 5 files changed, 242 insertions(+), 12 deletions(-) create mode 100644 src/app/fullname-pipe.spec.ts create mode 100644 src/app/fullname-pipe.ts diff --git a/src/app/fullname-pipe.spec.ts b/src/app/fullname-pipe.spec.ts new file mode 100644 index 0000000..26270f1 --- /dev/null +++ b/src/app/fullname-pipe.spec.ts @@ -0,0 +1,8 @@ +import { FullnamePipe } from './fullname-pipe'; + +describe('FullnamePipePipe', () => { + it('create an instance', () => { + const pipe = new FullnamePipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/fullname-pipe.ts b/src/app/fullname-pipe.ts new file mode 100644 index 0000000..a57e9e5 --- /dev/null +++ b/src/app/fullname-pipe.ts @@ -0,0 +1,13 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { Umpire } from 'db'; + +@Pipe({ + name: 'fullname', + standalone: true +}) +export class FullnamePipe implements PipeTransform { + transform(value: Umpire, ...args: unknown[]): string { + // TODO: in case of multilang, change here + return value.lastName + ' ' + value.firstName; + } +} diff --git a/src/app/tab2/tab2.page.html b/src/app/tab2/tab2.page.html index 38b153e..d9dc70c 100644 --- a/src/app/tab2/tab2.page.html +++ b/src/app/tab2/tab2.page.html @@ -1,17 +1,99 @@ - - Tab 2 - + Játékvezetők + + + + Hozzáadás + + - Tab 2 + Játékvezetők - + + + + + @for (umpire of umpires(); track umpire.id) { + + {{ umpire | fullname }} + + + + + } @empty { + Nincsenek játékvezetők + } + + + + + + + + + + + Mégse + + Új játékvezető + + + Mentés + + + + + + + + + + + + + + + + + + @for (item of genders; track item.code) { + + {{item.label}} + + } + + + + + + diff --git a/src/app/tab2/tab2.page.ts b/src/app/tab2/tab2.page.ts index 559aad5..ae4bf39 100644 --- a/src/app/tab2/tab2.page.ts +++ b/src/app/tab2/tab2.page.ts @@ -1,15 +1,142 @@ -import { Component } from '@angular/core'; -import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone'; -import { ExploreContainerComponent } from '../explore-container/explore-container.component'; +import { Component, ViewChild } from '@angular/core'; +import { + IonHeader, + IonToolbar, + IonTitle, + IonContent, + IonButtons, + IonButton, + IonIcon, + IonModal, + IonItem, + IonInput, + IonSelect, + IonSelectOption, + IonList, + IonGrid, + IonRow, + IonCol, + IonLabel, + AlertController +} from '@ionic/angular/standalone'; +import { UmpireService } from '../services/umpire.service'; +import { Umpire } from 'db'; +import { addIcons } from 'ionicons'; +import { add, trash } from 'ionicons/icons'; +import { OverlayEventDetail } from '@ionic/core/components'; +import { FormsModule } from '@angular/forms'; +import { FullnamePipe } from '../fullname-pipe'; @Component({ selector: 'app-tab2', templateUrl: 'tab2.page.html', styleUrls: ['tab2.page.scss'], - imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent] + providers: [FullnamePipe], + imports: [ + IonLabel, + IonCol, + IonRow, + IonGrid, + IonInput, + IonItem, + IonModal, + IonIcon, + IonButton, + IonButtons, + IonHeader, + IonToolbar, + IonTitle, + IonContent, + FormsModule, + IonSelect, + IonSelectOption, + IonList, + FullnamePipe + ] }) export class Tab2Page { + @ViewChild(IonModal) modal!: IonModal; - constructor() {} + public readonly umpires = this.umpireService.umpires; + public lastName: string = ''; + public firstName: string = ''; + public country: string = ''; + public gender: string = ''; + + public genders = [ + { label: 'gender.male', code: 'M' }, + { label: 'gender.female', code: 'W' } + ]; + + constructor( + private umpireService: UmpireService, + private alertController: AlertController, + private fullnamePipe: FullnamePipe + ) { + addIcons({ add, trash }); + } + + public async onWillDismiss(event: CustomEvent) { + if (event.detail.role !== 'confirm') { + return; + } + + const newUmpire: Umpire = event.detail.data; + + await this.umpireService.create({ + firstName: newUmpire.firstName, + lastName: newUmpire.lastName, + country: newUmpire.country, + gender: newUmpire.gender + }); + } + + cancel() { + this.modal.dismiss(null, 'cancel'); + } + + confirm() { + this.modal.dismiss( + { + lastName: this.lastName, + firstName: this.firstName, + country: this.country, + gender: this.gender + }, + 'confirm' + ); + } + + isValidUmpire(): boolean { + return this.lastName !== '' && this.firstName !== ''; + } + + public async showDeleteConfirmation(umpire: Umpire) { + const alert = await this.alertController.create({ + header: 'Megerősítés', + subHeader: 'Biztos törlöd a következő játékvezetőt?', + message: this.fullnamePipe.transform(umpire), + buttons: [ + { + text: 'Nem', + role: 'cancel' + }, + { + text: 'Igen', + role: 'confirm', + handler: () => { + // TODO: also remove from first tab + this.removeUmpire(umpire); + } + } + ] + }); + + await alert.present(); + } + + private removeUmpire(umpire: Umpire): void { + this.umpireService.delete(umpire.id); + } } diff --git a/src/app/tabs/tabs.page.html b/src/app/tabs/tabs.page.html index 007cdb6..6b27a1a 100644 --- a/src/app/tabs/tabs.page.html +++ b/src/app/tabs/tabs.page.html @@ -2,12 +2,12 @@ - Tab 1 + Pályák - Tab 2 + Játékvezetők