Use httpResource

src/app/administration/administration.module.ts

@@ -11,7 +11,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { ToastrModule } from 'ngx-toastr';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { LoadingComponent } from './loading/loading.component';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TicketGroupsListComponent } from './ticket_groups/list/ticket_groups-list.component';
 import { TicketGroupsEditComponent } from './ticket_groups/edit/events-edit.component';
 import { TicketGroupsNewComponent } from './ticket_groups/new/ticket_groups-new.component';
@@ -46,6 +46,7 @@ import { DashboardEventOverviewComponent } from './dashboard/event-overview/dash
         FontAwesomeModule,
         BrowserAnimationsModule,
         ToastrModule.forRoot(),
+        FormsModule,
         ReactiveFormsModule,
         SharedModule,
     ]

src/app/administration/ticket_groups/edit/events-edit.component.html

@@ -2,6 +2,12 @@
   <h1>{{ showDetail ? 'Ticket group detail' : 'Edit ticket group' }}</h1>
 
   <p>This form doesn't work due to missing backend implentation.</p>
+  @if (ticketGroup.isLoading()) {
+    <p>Loading ticket group...</p>
+  }
+  @if (ticketGroup.error()) {
+    <p>{{ ticketGroupLoadErrorText() }}</p>
+  }
 
   <label for="name">Name</label>
   <input type="text" name="name" formControlName="name" required>

src/app/administration/ticket_groups/edit/events-edit.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, effect, inject, signal } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { TicketGroupService } from '../ticket_groups.service';
 import { ToastrService } from 'ngx-toastr';
@@ -18,15 +18,20 @@ export class TicketGroupsEditComponent {
   readonly #ticket_groupService = inject(TicketGroupService);
   readonly #eventService = inject(EventService);
   readonly #toastr = inject(ToastrService);
+  readonly #id = signal<string | null>(this.#route.snapshot.paramMap.get('id'));
+  readonly #ticketGroupResource = this.#ticket_groupService.ticketGroupByIdResource(() => this.#id());
+  #loadErrorShown = false;
+  #loadSuccessShown = false;
 
-  public id: string | null;
+  public readonly id = this.#id();
   public form = new FormGroup({
     name: new FormControl('', Validators.required),
     capacity: new FormControl(0, Validators.required),
     eventId: new FormControl(0, Validators.required),
   });
   public showDetail: boolean = false;
   protected readonly eventsResource = this.#eventService.events;
+  protected readonly ticketGroup = this.#ticketGroupResource;
 
   constructor() {
     // Check detail view
@@ -37,62 +42,70 @@ export class TicketGroupsEditComponent {
       // this.form.get('sumbit')?.disable();
     }
 
-    // Get ID from query
-    this.id = this.#route.snapshot.paramMap.get('id');
     if (this.id == null) {
       this.form.get('name')?.disable();
       this.form.get('capacity')?.disable();
+      this.form.get('eventId')?.disable();
       this.#toastr.error(
         'Cannot load',
         'Ticket group',
         {
           progressBar: true,
         }
       );
-      return
+      return;
     }
 
-    // Load ticket_group object from database
-    this.#ticket_groupService.getById(this.id).subscribe({
-      // Success
-      next: (ticket_group) => {
+    effect(() => {
+      const ticket_group = this.#ticketGroupResource.value();
+      if (!ticket_group) {
+        return;
+      }
+      if (!this.#loadSuccessShown) {
+        this.#loadSuccessShown = true;
         this.#toastr.info(
           'Loaded successfully.',
           'Ticket group',
           {
             progressBar: true
           }
-        )
-        this.form.setValue({
-          name: ticket_group.name,
-          capacity: ticket_group.capacity,
-          eventId: ticket_group.event_id,
-        });
-      },
-      // Error
-      error: (err) => {
-        this.form.get('name')?.disable();
-        this.form.get('capacity')?.disable();
-        this.form.get('eventId')?.disable();
-        this.#toastr.error(
-          err.message,
-          'Cannot load ticket group',
-          {
-            progressBar: true,
-          }
         );
-        return
       }
+      this.form.setValue({
+        name: ticket_group.name,
+        capacity: ticket_group.capacity,
+        eventId: ticket_group.event_id,
+      });
     });
-  }
 
-  ngOnInit(): void {
-    this.eventsResource.reload();
+    effect(() => {
+      const err = this.#ticketGroupResource.error();
+      if (!err || this.#loadErrorShown) {
+        return;
+      }
+      this.#loadErrorShown = true;
+      this.form.get('name')?.disable();
+      this.form.get('capacity')?.disable();
+      this.form.get('eventId')?.disable();
+      const msg = err instanceof Error ? err.message : String(err);
+      this.#toastr.error(
+        msg,
+        'Cannot load ticket group',
+        {
+          progressBar: true,
+        }
+      );
+      return;
+    });
   }
 
   public editTicketGroup() {
+    const id = this.#id();
+    if (!id) {
+      return;
+    }
     this.#ticket_groupService.update(
-      this.id || '',
+      id,
       {
         name: this.form.value.name || '',
         capacity: this.form.value.capacity || 0,
@@ -124,4 +137,15 @@ export class TicketGroupsEditComponent {
   protected events(): Array<Event> {
     return this.eventsResource.value();
   }
+
+  protected ticketGroupLoadErrorText(): string {
+    const err = this.ticketGroup.error();
+    if (!err) {
+      return '';
+    }
+    if (err instanceof Error) {
+      return err.message;
+    }
+    return String(err);
+  }
 }

src/app/administration/ticket_groups/list/ticket_groups-list.component.html

@@ -1,16 +1,16 @@
-@if (this.loadingState > 0) {
+@if (ticketGroups.isLoading()) {
 <app-loading></app-loading>
 }
 <div>
-  @if (this.errorLoading.enabled) {
+  @if (ticketGroups.error()) {
   <div class="error">
     <p>
       There's problem loading table.<br />
-      {{ this.errorLoading.text }}
+      {{ loadErrorText() }}
     </p>
   </div>
   }
-  @if (!this.errorLoading.enabled) {
+  @if (!ticketGroups.error()) {
   <table>
     <thead>
       <tr>
@@ -22,7 +22,7 @@
       </tr>
     </thead>
     <tbody>
-      @for (ticket_group of ticket_groups; track ticket_group) {
+      @for (ticket_group of ticketGroups.value(); track ticket_group) {
       <tr>
         <td>{{ ticket_group.name }}</td>
         <!-- so hidden column with IDs is second -->
@@ -53,4 +53,4 @@
     </tbody>
   </table>
   }
-</div>
+</div>

src/app/administration/ticket_groups/list/ticket_groups-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { TicketGroupService } from '../ticket_groups.service';
 import { TicketGroup } from '../ticket_groups.types';
 import { faPen, faTrash } from '@fortawesome/free-solid-svg-icons';
@@ -11,43 +11,17 @@ import { Router } from '@angular/router';
   styleUrls: ['./ticket_groups-list.component.scss'],
   standalone: false
 })
-export class TicketGroupsListComponent implements OnInit {
+export class TicketGroupsListComponent {
   readonly #ticket_groupService = inject(TicketGroupService);
   readonly #toastr = inject(ToastrService);
   readonly #router = inject(Router);
 
   protected readonly editIcon = faPen;
   protected readonly deleteIcon = faTrash;
-  public ticket_groups: TicketGroup[] = [];
-  public loadingState = 1;
-  public errorLoading = {
-    enabled: false,
-    text: '',
-  };
-
-  ngOnInit(): void {
-    this.#ticket_groupService.get().subscribe({
-      next: (ticket_groups) => {
-        this.ticket_groups = ticket_groups;
-        this.loadingState--;
-      },
-      error: (err) => {
-        console.error(err);
-        this.errorLoading.enabled = true;
-        this.errorLoading.text = err.message;
-        this.loadingState--;
-      },
-    });
-
-    this.#ticket_groupService.deleteAsObservable().subscribe(
-      (ticket_group) => {
-        this.ticket_groups.splice(this.ticket_groups.indexOf(ticket_group), 1);
-      }
-    );
-  }
+  protected readonly ticketGroups = this.#ticket_groupService.ticketGroups;
 
   public edit(ticket_group: TicketGroup) {
-    this.#router.navigate(['/ticket_groups/edit/' + ticket_group.id])
+    this.#router.navigate(['/ticket_groups/edit/' + ticket_group.id]);
   }
 
   public delete(ticket_group: TicketGroup) {
@@ -62,9 +36,9 @@ export class TicketGroupsListComponent implements OnInit {
       );
       return;
     }
-    this.#ticket_groupService.delete(ticket_group.id).subscribe(
-      (ticket_group) => {
-        if (!ticket_group) {
+    this.#ticket_groupService.delete(ticket_group.id).subscribe({
+      next: (deletedGroup) => {
+        if (!deletedGroup) {
           this.#toastr.error(
             `<div><b>Ticket group wasn't deleted!</b></div>`,
             '',
@@ -73,18 +47,28 @@ export class TicketGroupsListComponent implements OnInit {
               progressBar: true,
             }
           );
-          return
+          return;
         }
-        this.ticket_groups.splice(this.ticket_groups.indexOf(ticket_group), 1);
         this.#toastr.info(
-          `<b>Ticket group "${ticket_group.name}" deleted</b>`,
+          `<b>Ticket group "${deletedGroup.name}" deleted</b>`,
           '',
           {
             enableHtml: true,
             progressBar: true
           }
         );
       }
-    )
+    });
+  }
+
+  protected loadErrorText(): string {
+    const err = this.ticketGroups.error();
+    if (!err) {
+      return '';
+    }
+    if (err instanceof Error) {
+      return err.message;
+    }
+    return String(err);
   }
 }

src/app/administration/ticket_groups/new/ticket_groups-new.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, OnInit } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { TicketGroupService } from '../ticket_groups.service';
 import { ToastrService } from 'ngx-toastr';
@@ -12,7 +12,7 @@ import { Event } from '../../events/events.types';
     styleUrls: ['./ticket_groups-new.component.scss'],
     standalone: false
 })
-export class TicketGroupsNewComponent implements OnInit{
+export class TicketGroupsNewComponent {
   readonly #router = inject(Router);
   readonly #ticket_groupService = inject(TicketGroupService);
   readonly #eventService = inject(EventService);
@@ -25,10 +25,6 @@ export class TicketGroupsNewComponent implements OnInit{
   });
   protected readonly eventsResource = this.#eventService.events;
 
-  ngOnInit(): void {
-    this.eventsResource.reload();
-  }
-
   public newTicketGroup() {
     this.#ticket_groupService.create({
       name: this.form.value.name || '',