Show levels and photos on user pages

src/app/api/cached-list-with-data.ts

@@ -0,0 +1,5 @@
+import { ListWithData } from "./list-with-data";
+
+export interface CachedListWithData<TData> extends ListWithData<TData> {
+    totalLoads: number;
+}

src/app/api/client.service.ts

@@ -147,6 +147,10 @@ export class ClientService extends ApiImplementation {
     return this.http.get<ListWithData<Photo>>(`/photos`, {params: this.createPageQuery(skip, count)});
   }
 
+  getPhotosRelatedToUserUuid(userId: string, category: string, skip: number = 0, count: number = defaultPageSize) {
+    return this.http.get<ListWithData<Photo>>(`/photos/${category}/uuid/${userId}`, {params: this.createPageQuery(skip, count)});
+  }
+
   getContests() {
     return this.http.get<ListWithData<Contest>>("/contests");
   }

src/app/app.routes.ts

@@ -17,6 +17,11 @@ export const routes: Routes = [
         loadComponent: () => import('./pages/level-listing/level-listing.component').then(x => x.LevelListingComponent),
         data: {title: "Level Listing"}
     },
+    {
+        path: 'levels/:category/user/:username',
+        loadComponent: () => import('./pages/level-user-listing/level-user-listing.component').then(x => x.LevelUserListingComponent),
+        data: {title: "Levels Related To User"}
+    },
     {
         path: 'level/:id/:slug',
         loadComponent: () => import('./pages/level/level.component').then(x => x.LevelComponent),
@@ -46,9 +51,9 @@ export const routes: Routes = [
         data: {title: "Photos"},
     },
     {
-        path: 'photos',
-        loadComponent: () => import('./pages/photo-listing/photo-listing.component').then(x => x.PhotoListingComponent),
-        data: {title: "Photos"},
+        path: 'photos/:category/user/:username',
+        loadComponent: () => import('./pages/photo-user-listing/photo-user-listing.component').then(x => x.PhotoUserListingComponent),
+        data: {title: "Photos Related To User"},
     },
     {
         path: 'photo/:id',

src/app/components/ui/infinite-scroller.component.ts

@@ -42,7 +42,8 @@ export class InfiniteScrollerComponent implements AfterViewInit {
 
   nextPageIndex: number = this.pageSize + 1;
   total: number = 0;
-  totalLoads: number = 0;
+  @Input() totalLoads: number = 0;
+  @Output() incrementLoads = new EventEmitter;
 
   @Input({required: true}) set listInfo(listInfo: RefreshApiListInfo) {
     if(!listInfo) return;
@@ -56,6 +57,7 @@ export class InfiniteScrollerComponent implements AfterViewInit {
 
     this.loadData.emit(); // tell the parent to load more data
     this.totalLoads++;
+    this.incrementLoads.emit();
   }
 
   ngAfterViewInit(): void {

src/app/pages/level-user-listing/level-user-listing.component.html

@@ -0,0 +1,42 @@
+@if (user) {
+  <app-container-header>
+    <div class="flex flex-col gap-y-2 pb-4">
+      <div class="flex flex-row flex-wrap gap-x-3 align-center">
+        <app-page-title title="Levels "></app-page-title>
+        <app-dropdown-menu [showMenu]="showLevelDropdown" offsets="top-9 -left-5" [width]="56">
+          <app-button trigger
+              width="flex flex-shrink justify-evenly flex-grow w-42 text-nowrap"
+              [text]="getLevelSelectionText(filterForm.controls.selection.getRawValue()!)"
+              [icon]="showLevelDropdown ? faChevronUp : faChevronDown"
+              color="bg-secondary"
+              (click)="levelSelectionButtonClick()">
+          </app-button>
+          <div content>
+              <app-radio-button [label]="getLevelSelectionText(0)" [form]="filterForm" ctrlName="selection" id="l0" [value]='0' (click)="setLevelSelection(0)"></app-radio-button>
+              <app-radio-button [label]="getLevelSelectionText(1)" [form]="filterForm" ctrlName="selection" id="l1" [value]='1' (click)="setLevelSelection(1)"></app-radio-button>
+          </div>
+          </app-dropdown-menu>
+        <app-user-link class="content-center text-[20px]" [user]="user"></app-user-link>
+        <span class="content-center text-sm italic text-gentle text-base">({{this.listInfo.totalItems}} in total)</span>
+      </div>
+    </div>
+  </app-container-header>
+
+  @if (currentLevels.data.length > 0) {
+    <app-responsive-grid>
+      @for (level of this.currentLevels.data; track level.levelId) {
+        <app-container [tight]="true">
+          <app-level-preview [level]="level"></app-level-preview>
+        </app-container>
+      }
+    </app-responsive-grid>
+  }
+  @else if (currentLevels.listInfo.totalItems < 0) {
+    <p>Loading levels...</p>
+  }
+  @else {
+    <p>No levels yet...</p>
+  }
+
+  <app-infinite-scroller [isLoading]="this.isLoading" [listInfo]="this.listInfo" [totalLoads]="currentLevels.totalLoads" (incrementLoads)="incrementLoads()" (loadData)="loadData()"></app-infinite-scroller>
+}

src/app/pages/level-user-listing/level-user-listing.component.ts

@@ -0,0 +1,183 @@
+import {Component, Inject, PLATFORM_ID} from '@angular/core';
+import {ClientService, defaultPageSize} from "../../api/client.service";
+import {ActivatedRoute} from "@angular/router";
+import {PageTitleComponent} from "../../components/ui/text/page-title.component";
+import {ResponsiveGridComponent} from "../../components/ui/responsive-grid.component";
+import {Level} from "../../api/types/levels/level";
+import {LevelPreviewComponent} from "../../components/items/level-preview.component";
+import {ContainerComponent} from "../../components/ui/container.component";
+import {Scrollable} from "../../helpers/scrollable";
+import {defaultListInfo, RefreshApiListInfo} from "../../api/refresh-api-list-info";
+import {InfiniteScrollerComponent} from "../../components/ui/infinite-scroller.component";
+import { User } from '../../api/types/users/user';
+import { UserLinkComponent } from "../../components/ui/text/links/user-link.component";
+import { RadioButtonComponent } from "../../components/ui/form/radio-button.component";
+import { DropdownMenuComponent } from "../../components/ui/form/dropdown-menu.component";
+import { ButtonComponent } from "../../components/ui/form/button.component";
+import { ContainerHeaderComponent } from "../../components/ui/container-header.component";
+import { FormControl, FormGroup } from '@angular/forms';
+import { ListWithData } from '../../api/list-with-data';
+import { BannerService } from '../../banners/banner.service';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { isPlatformBrowser } from '@angular/common';
+import { RefreshApiError } from '../../api/refresh-api-error';
+import { CachedListWithData } from '../../api/cached-list-with-data';
+
+@Component({
+    selector: 'app-level-user-listing',
+    imports: [
+    PageTitleComponent,
+    ResponsiveGridComponent,
+    LevelPreviewComponent,
+    ContainerComponent,
+    InfiniteScrollerComponent,
+    UserLinkComponent,
+    RadioButtonComponent,
+    DropdownMenuComponent,
+    ButtonComponent,
+    ContainerHeaderComponent
+],
+    templateUrl: './level-user-listing.component.html'
+})
+export class LevelUserListingComponent implements Scrollable {
+  user: User | undefined;
+  levelsPublishedByUser: CachedListWithData<Level> | undefined;
+  levelsHeartedByUser: CachedListWithData<Level> | undefined;
+  currentLevels: CachedListWithData<Level> = {
+    data: [],
+    listInfo: defaultListInfo,
+    totalLoads: 0,
+  };
+
+  showLevelDropdown: boolean = false;
+  levelSelectionString: string = "";
+  filterForm = new FormGroup({
+    selection: new FormControl(-1)
+  });
+
+  protected readonly isBrowser: boolean;
+
+  constructor(private client: ClientService, protected banner: BannerService, private route: ActivatedRoute, @Inject(PLATFORM_ID) platformId: Object) {
+    route.params.subscribe(params => {
+      const username: string | undefined = params['username'];
+      const category: string | undefined = params['category'];
+
+      if (username != null) {
+        this.client.getUserByUsername(username).subscribe({
+          error: error => {
+            const apiError: RefreshApiError | undefined = error.error?.error;
+            this.banner.warn("Failed to get user", apiError == null ? error.message : apiError.message);
+          },
+          next: user => {
+            this.user = user;
+
+            if (category != null) {
+              this.levelSelectionString = category;
+              switch (category) {
+                case "byUser":
+                  this.setLevelSelection(0);
+                  break;
+                case "hearted":
+                  this.setLevelSelection(1);
+                  break;
+                default:
+                  this.banner.warn("Cannot get levels", "Selection '" + category + "' is unknown");
+                  return;
+              }
+            }
+          }
+        });
+      }
+    });
+
+    this.isBrowser = isPlatformBrowser(platformId);
+  }
+
+  levelSelectionButtonClick() {
+    this.showLevelDropdown = !this.showLevelDropdown;
+  }
+
+  getLevelSelectionText(selection: number): string {
+    switch (selection) {
+      case 0: return "Published by";
+      case 1: return "Hearted by";
+      default: return "Something by";
+    }
+  }
+
+  setLevelSelection(selection: number) {
+    if (this.user == null) return;
+
+    let previousSelection: number = this.filterForm.controls.selection.getRawValue()!;
+    if (selection === previousSelection) return;
+
+    switch (previousSelection) {
+      case 0:
+        this.levelsPublishedByUser = this.currentLevels;
+        break;
+      case 1:
+        this.levelsHeartedByUser = this.currentLevels;
+        break;
+    }
+
+    let cachedList: CachedListWithData<Level> | undefined;
+    switch (selection) {
+      case 0:
+        this.levelSelectionString = "byUser";
+        cachedList = this.levelsPublishedByUser;
+        break;
+      case 1:
+        this.levelSelectionString = "hearted";
+        cachedList = this.levelsHeartedByUser;
+        break;
+      default:
+        this.banner.warn("Cannot get levels", "Selection " + selection + " is unknown");
+        return;
+    }
+
+    this.filterForm.controls.selection.setValue(selection);
+    if(this.isBrowser) {
+      window.history.replaceState({}, '', `/levels/${this.levelSelectionString}/user/${this.user.username}`);
+    }
+
+    if (cachedList != null) {
+      this.currentLevels = cachedList;
+      return;
+    }
+
+    this.currentLevels = {
+      data: [],
+      listInfo: defaultListInfo,
+      totalLoads: 0,
+    };
+    this.currentLevels.totalLoads++;
+    this.loadData();
+  }
+
+  isLoading: boolean = false;
+  get listInfo() {return this.currentLevels.listInfo}
+
+  loadData(): void {
+    if(!this.user) return;
+
+    this.isLoading = true;
+    this.client.getLevelsInCategory(this.levelSelectionString, this.listInfo.nextPageIndex, defaultPageSize, {u: this.user.username}).subscribe({
+      error: error => {
+        const apiError: RefreshApiError | undefined = error.error?.error;
+        this.banner.warn("Failed to get levels", apiError == null ? error.message : apiError.message);
+      },
+      next: list => {
+        this.currentLevels.data = this.currentLevels.data.concat(list.data);
+        this.currentLevels.listInfo = list.listInfo;
+        this.isLoading = false;
+      }
+    });
+  }
+
+  incrementLoads() {
+    this.currentLevels.totalLoads++;
+  }
+
+  protected readonly faChevronDown = faChevronDown;
+  protected readonly faChevronUp = faChevronUp;
+}

src/app/pages/photo-user-listing/photo-user-listing.component.html

@@ -0,0 +1,42 @@
+@if (user) {
+  <app-container-header>
+    <div class="flex flex-col gap-y-2 pb-4">
+      <div class="flex flex-row flex-wrap gap-x-3 align-center">
+        <app-page-title title="Photos "></app-page-title>
+        <app-dropdown-menu [showMenu]="showPhotoDropdown" offsets="top-9" [width]="56">
+          <app-button trigger
+              width="flex flex-shrink justify-evenly flex-grow w-42 text-nowrap"
+              [text]="getPhotoSelectionText(filterForm.controls.selection.getRawValue()!)"
+              [icon]="showPhotoDropdown ? faChevronUp : faChevronDown"
+              color="bg-secondary"
+              (click)="photoSelectionButtonClick()">
+          </app-button>
+          <div content>
+              <app-radio-button [label]="getPhotoSelectionText(0)" [form]="filterForm" ctrlName="selection" id="p0" [value]='0' (click)="setPhotoSelection(0)"></app-radio-button>
+              <app-radio-button [label]="getPhotoSelectionText(1)" [form]="filterForm" ctrlName="selection" id="p1" [value]='1' (click)="setPhotoSelection(1)"></app-radio-button>
+          </div>
+          </app-dropdown-menu>
+        <app-user-link class="content-center text-[20px]" [user]="user"></app-user-link>
+        <span class="content-center text-sm italic text-gentle text-base">({{this.currentPhotos.listInfo.totalItems}} in total)</span>
+      </div>
+    </div>
+  </app-container-header>
+
+  @if (currentPhotos.data.length > 0) {
+    <app-responsive-grid>
+      @for (photo of this.currentPhotos.data; track photo.photoId) {
+        <app-container [tight]="true">
+          <app-photo [photo]="photo" [link]="true"></app-photo>
+        </app-container>
+      }
+    </app-responsive-grid>
+  }
+  @else if (currentPhotos.listInfo.totalItems < 0) {
+    <p>Loading photos...</p>
+  }
+  @else {
+    <p>No photos yet...</p>
+  }
+
+  <app-infinite-scroller [isLoading]="this.isLoading" [listInfo]="this.listInfo" [totalLoads]="currentPhotos.totalLoads" (incrementLoads)="incrementLoads()" (loadData)="loadData()"></app-infinite-scroller>
+}