Experiment

src/app/views/playground/playground.component.ts

@@ -0,0 +1,91 @@
+import {Component, OnInit} from '@angular/core';
+import {DataView} from 'primeng/dataview';
+import {Card as CardModel, CardService, CardType} from '../../openapi';
+import {catchError, of, Subject, switchMap} from 'rxjs';
+import {FormsModule} from '@angular/forms';
+import {NgClass, NgForOf} from '@angular/common';
+import {Tag} from 'primeng/tag';
+import {Button, ButtonDirective} from 'primeng/button';
+import {DataViewDirective} from '../../directives/data-view/data-view.directive';
+import {Card} from 'primeng/card';
+import {PrimeTemplate} from 'primeng/api';
+import {StyleClass} from 'primeng/styleclass';
+import {Paginator, PaginatorState} from 'primeng/paginator';
+import {SelectButton} from 'primeng/selectbutton';
+
+@Component({
+  selector: 'app-playground',
+  imports: [
+    DataView,
+    FormsModule,
+    NgClass,
+    Tag,
+    NgForOf,
+    ButtonDirective,
+    DataViewDirective,
+    Button,
+    Card,
+    PrimeTemplate,
+    StyleClass,
+    Paginator,
+    SelectButton
+  ],
+  templateUrl: './playground.component.html',
+  styleUrl: './playground.component.css'
+})
+export class PlaygroundComponent implements OnInit {
+  layout: 'grid' | 'list' = 'grid';
+  options = ['list', 'grid'];
+  cards: CardModel[] = [];
+  first: number = 0;
+  rows: number = 10;
+
+  constructor(private cardService: CardService) {
+  }
+
+  private pageSubject = new Subject<number>();
+
+  ngOnInit() {
+    this.pageSubject
+      .pipe(
+        switchMap(pageNumber => {
+          return this.cardService.getCards(undefined, pageNumber, 50).pipe(
+            catchError(error => {
+              console.log(`Error: ${error}`);
+
+              return of([]);
+            })
+          )
+        })
+      )
+      .subscribe(cards => {
+        this.cards = cards
+        console.log(this.cards)
+      })
+
+    this.pageSubject.next(0)
+  }
+
+  getSeverity(card: CardModel): "success" | "warn" {
+    return 'success';
+  }
+
+  getFormattedCardType(cardType: CardType): String {
+    switch (cardType) {
+      case "MONSTER":
+        return "Monster";
+      case "SPELL":
+        return "Spell";
+      case "TRAP":
+        return "Trap";
+      default:
+        return "N/A";
+    }
+  }
+
+  onPageChange(event: PaginatorState) {
+
+  }
+
+  protected readonly console = console;
+}