Implement a level edit page

src/app/api/client.service.ts

@@ -16,6 +16,7 @@ import {Contest} from "./types/contests/contest";
 import {Score} from "./types/levels/score";
 import { LevelRelations } from './types/levels/level-relations';
 import { Asset } from './types/asset';
+import { LevelUpdateRequest } from './types/levels/level-update-request';
 
 export const defaultPageSize: number = 40;
 
@@ -55,6 +56,18 @@ export class ClientService extends ApiImplementation {
   getLevelById(id: number) {
     return this.http.get<Level>(`/levels/id/${id}`);
   }
+
+  updateLevelById(id: number, data: LevelUpdateRequest, isCurator: boolean) {
+    return this.http.patch<Level>(`${isCurator ? '/admin' : ''}/levels/id/${id}`, data);
+  }
+
+  updateLevelIconById(id: number, hash: string, isCurator: boolean) {
+    return this.http.patch<Level>(`${isCurator ? '/admin' : ''}/levels/id/${id}`, {iconHash: hash});
+  }
+
+  deleteLevelById(id: number, isModerator: boolean) {
+    return this.http.delete<Level>(`${isModerator ? '/admin' : ''}/levels/id/${id}`);
+  }
 
   getScoresForLevel(id: number, scoreType: number, skip: number, count: number = defaultPageSize, params: Params | null = null) {
     return this.http.get<ListWithData<Score>>(`/scores/${id}/${scoreType}`, {params: this.setPageQuery(params, skip, count)});
@@ -135,6 +148,14 @@ export class ClientService extends ApiImplementation {
     return this.http.post<Response>(`/levels/id/${id}/setAsOverride`, null);
   }
 
+  teamPickLevel(id: number) {
+    return this.http.post<Response>(`/admin/levels/id/${id}/teamPick`, null);
+  }
+
+  unTeamPickLevel(id: number) {
+    return this.http.post<Response>(`/admin/levels/id/${id}/removeTeamPick`, null);
+  }
+
   uploadAsset(hash: string, data: ArrayBuffer) {
     return this.http.post<Asset>(`/assets/${hash}`, data);
   }

src/app/api/types/levels/level-update-request.ts

@@ -0,0 +1,10 @@
+import { GameVersion } from "../game-version";
+
+export interface LevelUpdateRequest {
+    title: string | undefined;
+    description: string | undefined;
+
+    gameVersion: GameVersion | undefined;
+    isReUpload: boolean | undefined;
+    originalPublisher: string | undefined;
+}

src/app/api/types/levels/level.ts

@@ -5,16 +5,20 @@ export interface Level {
     title: string;
     description: string;
     iconHash: string;
+    publisher: User | undefined;
+    originalPublisher: string | undefined;
+    isReUpload: boolean;
+    teamPicked: boolean;
+    dateTeamPicked: Date;
+    gameVersion: number;
+    score: number;
+    slotType: number;
     publishDate: Date;
     updateDate: Date;
+
     booRatings: number;
     yayRatings: number;
     hearts: number;
     totalPlays: number;
     uniquePlays: number;
-    publisher: User | undefined;
-    teamPicked: boolean;
-    gameVersion: number;
-    score: number;
-    slotType: number;
 }

src/app/api/types/users/user-roles.ts

@@ -0,0 +1,9 @@
+export enum UserRoles {
+    Admin = 127,
+    Moderator = 96,
+    Curator = 64,
+    Trusted = 1,
+    User = 0,
+    Restricted = -126,
+    Banned = 127,
+}

src/app/app.routes.ts

@@ -29,6 +29,12 @@ export const routes: Routes = [
     },
     ...alias("level/:id/:slug", "slot/:id/:slug"),
     ...alias("level/:id", "slot/:id",),
+    {
+        path: 'level/:id/:slug/edit',
+        loadComponent: () => import('./pages/level-edit/level-edit.component').then(x => x.LevelEditComponent),
+        data: {title: "Edit Level"},
+    },
+    ...alias("level/:id/:slug/edit", "slot/:id/:slug/edit"),
     {
         path: 'photos',
         loadComponent: () => import('./pages/photo-listing/photo-listing.component').then(x => x.PhotoListingComponent),

src/app/components/ui/dialog.component.ts

@@ -1,22 +1,27 @@
-import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {Component, ElementRef, OnDestroy, OnInit, Output, ViewChild, EventEmitter} from '@angular/core';
 
 @Component({
     selector: 'app-dialog',
     imports: [],
     template: `
-    <dialog #dialog class="backdrop:backdrop-brightness-50 text-foreground bg-red bg-opacity-0 overflow-y-clip" tabindex="-1">
+    <dialog (close)="close()" #dialog class="backdrop:backdrop-brightness-50 flex flex-row flex-grow text-foreground bg-container-background bg-opacity-0 overflow-y-clip" tabindex="-1">
       <ng-content></ng-content>
     </dialog>
   `,
     styles: ``
 })
 export class DialogComponent implements OnInit, OnDestroy {
   @ViewChild('dialog', { static: true }) dialog!: ElementRef<HTMLDialogElement>;
+  @Output() onDialogClose = new EventEmitter;
 
   ngOnInit(): void {
     this.dialog.nativeElement.showModal();
   }
 
+  close(): void {
+    this.onDialogClose.emit();
+  }
+
   ngOnDestroy(): void {
     this.dialog.nativeElement.close();
   }

src/app/components/ui/form/button.component.ts

@@ -10,24 +10,27 @@ import { NgClass } from "@angular/common";
         NgClass
     ],
     template: `
-    <button class="rounded px-4 py-1.5 hover:brightness-110 active:brightness-95 transition-[filter] disabled:grayscale" 
-      [ngClass]="color" [type]=type [disabled]="!enabled">
+    <button class="flex flex-row justify-center rounded px-4 py-1.5 hover:brightness-110 active:brightness-95 transition-[filter] disabled:grayscale" 
+      [ngClass]="color + ' ' + width" [type]=type [disabled]="!enabled">
       @if (icon) {
-        <fa-icon [icon]="icon" [ngClass]="text && text.length > 0 ? 'mr-1' : ''"></fa-icon>
+        <fa-icon class="right-1" [icon]="icon" [ngClass]="text && text.length > 0 ? 'mr-2' : ''"></fa-icon>
+      }
+      @if (text) {
+        <div class="flex flex-row flex-grow justify-center"> {{ text }} </div>
       }
-      {{ text }}
     </button>
     `
 })
 export class ButtonComponent {
   // metadata
-  @Input({required: true}) text: string = "Button";
+  @Input() text: string | undefined;
   @Input() icon: IconProp | undefined;
   @Input() color: string = "bg-secondary";
 
   @Input() type: "submit" | "reset" | "button" = "button";
 
   @Input() enabled: boolean = true;
+  @Input() width: string = "";
 
   // actions
   @Input() routerLink: any[] | string | null | undefined

src/app/components/ui/form/dropdown-menu.component.ts

@@ -0,0 +1,30 @@
+import {Component, Injectable, Input} from '@angular/core';
+import {ReactiveFormsModule} from "@angular/forms";
+import { NgClass } from "@angular/common";
+
+@Component({
+    selector: 'app-dropdown-menu',
+    imports: [
+    ReactiveFormsModule,
+    NgClass
+],
+    template: `
+        <div class="flex flex-row content-center space-x-1 group relative">
+            <ng-content select="[trigger]"></ng-content>
+            <div class="absolute z-1 flex flex-col gap-y-1.5 px-5 py-2.5 rounded bg-header-background
+                border-4 border-backdrop border-solid"
+                [ngClass]="(showMenu ? '' : 'hidden ') + offsets + ' w-' + width">
+                <ng-content select="[content]"></ng-content>
+            </div>
+        </div>
+    `
+})
+@Injectable({
+    providedIn: 'root'
+})
+export class DropdownMenuComponent {
+  @Input() offsets: string = ""
+  @Input({required: true}) width: number = 0;
+
+  @Input() showMenu: boolean = false;
+}

src/app/components/ui/form/radio-button.component.ts

@@ -7,11 +7,11 @@ import {FormGroup, ReactiveFormsModule} from "@angular/forms";
         ReactiveFormsModule
     ],
     template: `
-        <div [formGroup]="form" class="min-w-full flex flex-row content-center justify-start rounded-md px-2 py-1 hover-within:outline-2 hover-within:outline hover-within:outline-secondary-bright max-w-fit transition-[outline]">
-            <input type="radio" [id]=id [formControlName]="ctrlName" [name]="ctrlName" [value]=value class="outline-hidden bg-teritary placeholder:text-gentle placeholder:italic" [required]="required">
+        <div [formGroup]="form" class="cursor-pointer min-w-full flex flex-row content-center justify-start rounded-md px-2 py-1 hover-within:outline-2 hover-within:outline hover-within:outline-secondary-bright max-w-fit transition-[outline]">
+            <input type="radio" [id]=id [formControlName]="ctrlName" [name]="ctrlName" [value]=value class="cursor-pointer outline-hidden bg-teritary placeholder:text-gentle placeholder:italic" [required]="required">
 
             @if (label.length > 0) {
-                <label [for]=id class="text-base hyphens-manual ml-3">{{label}}</label>
+                <label [for]=id class="text-base hyphens-manual ml-3 cursor-pointer">{{label}}</label>
             }
         </div>
     `

src/app/components/ui/form/textarea.component.ts

@@ -6,16 +6,22 @@ import {FormGroup, ReactiveFormsModule} from "@angular/forms";
 @Component({
     selector: 'app-textarea',
     imports: [
-        FaIconComponent,
-        ReactiveFormsModule
-    ],
+    FaIconComponent,
+    ReactiveFormsModule
+],
     template: `
     @if (label.length > 0) {
       <label [for]=ctrlName class="text-sm">{{label}}</label>
     }
     <div [formGroup]="form" class="min-w-full flex group rounded-md px-4 py-1.5 bg-teritary focus-within:outline-2 focus-within:outline focus-within:outline-secondary-bright max-w-fit text-nowrap transition-[outline]">
-      <fa-icon [icon]="icon" class="text-gentle mr-2 group-focus-within:text-secondary-bright transition-colors"></fa-icon>
-      <textarea [id]=ctrlName [formControlName]="ctrlName" [placeholder]="placeholder" class="grow min-h-20 outline-hidden wrap-break-word bg-teritary placeholder:text-gentle placeholder:italic" [required]="required"></textarea>
+      <div class="flex flex-col align-center mr-2 gap-y-2">
+        <fa-icon [icon]="icon" class="flex flex-row justify-center mt-1 text-gentle group-focus-within:text-secondary-bright transition-colors"></fa-icon>
+        @if (showMaxLength == true) {
+          <p>{{maxLength - (form.get(ctrlName)?.value?.length ?? 0)}}</p>
+        }
+      </div>
+      <textarea [id]=ctrlName [formControlName]="ctrlName" [maxLength]="maxLength" [placeholder]="placeholder" [rows]="defRows"
+        class="grow min-w-10 min-h-20 outline-hidden wrap-break-word bg-teritary placeholder:text-gentle placeholder:italic" [required]="required"></textarea>
     </div>
     `
 })
@@ -28,4 +34,9 @@ export class TextAreaComponent {
   @Input({required: true}) ctrlName: string = "";
 
   @Input() required: boolean = true;
+
+  @Input() maxLength: number = 4096;
+  @Input() showMaxLength: boolean = false;
+
+  @Input() defRows: number = 4;
 }

src/app/components/ui/form/textbox.component.ts

@@ -7,16 +7,19 @@ import {FormGroup, ReactiveFormsModule} from "@angular/forms";
 @Component({
     selector: 'app-textbox',
     imports: [
-        FaIconComponent,
-        ReactiveFormsModule
-    ],
+    FaIconComponent,
+    ReactiveFormsModule,
+],
     template: `
     @if (label.length > 0) {
       <label [for]=ctrlName class="text-sm">{{label}}</label>
     }
     <div [formGroup]="form" class="min-w-full flex group rounded-full px-4 py-1.5 bg-teritary focus-within:outline-2 focus-within:outline focus-within:outline-secondary-bright max-w-fit text-nowrap transition-[outline]">
       <fa-icon [icon]="icon" class="text-gentle mr-2 group-focus-within:text-secondary-bright transition-colors"></fa-icon>
-      <input [type]="type" [id]=ctrlName [formControlName]="ctrlName" [placeholder]="placeholder" class="grow outline-hidden bg-teritary placeholder:text-gentle placeholder:italic" [required]="required">
+      <input [type]="type" [maxlength]="maxLength" [id]=ctrlName [formControlName]="ctrlName" [placeholder]="placeholder" class="grow outline-hidden bg-teritary placeholder:text-gentle placeholder:italic" [required]="required">
+      @if (showMaxLength == true) {
+        <p>{{maxLength - (form.get(ctrlName)?.value?.length ?? 0)}}</p>
+      }
     </div>
     `
 })
@@ -30,4 +33,7 @@ export class TextboxComponent {
 
   @Input() required: boolean = true;
   @Input() type: string = "text";
+
+  @Input() maxLength: number = 256;
+  @Input() showMaxLength: boolean = false;
 }

src/app/components/ui/layouts/fancy-header-buttons.component.ts

@@ -1,33 +1,29 @@
 import { Component, Input, TemplateRef, ViewChild, ViewContainerRef } from "@angular/core";
 import { ButtonComponent } from "../form/button.component";
-import { NgClass } from "@angular/common";
-import {faEllipsisV} from "@fortawesome/free-solid-svg-icons";
+import {faEllipsisV, faXmark} from "@fortawesome/free-solid-svg-icons";
+import { DropdownMenuComponent } from "../form/dropdown-menu.component";
 
 @Component({
     selector: 'app-fancy-header-buttons',
     imports: [
-        ButtonComponent,
-        NgClass
-    ],
+    ButtonComponent,
+    DropdownMenuComponent
+],
     template: `
         <ng-template #moreButtonTemplate>
             <app-button
-                text=""
-                [icon]="faEllipsisV"
+                width="w-11"
+                [icon]="showMenu ? faXmark : faEllipsisV"
                 color="bg-secondary"
                 (click)="moreButtonClick()"> 
             </app-button>
         </ng-template>
-
-        <div class="flex flex-row justify-end content-center space-x-1 min-w-56 group relative">
-            <div #firstButtonContainer></div>
-            <div #secondButtonContainer></div>
-            <div class="absolute z-1 flex flex-col gap-y-1.5 w-48 px-5 py-2.5 rounded bg-header-background
-                border-4 border-backdrop border-solid top-10 cursor-pointer"
-                [ngClass]="showMenu ? '' : 'hidden'">
-                <div #navItemsContainer>
-            </div>
-        </div>
+
+        <app-dropdown-menu class="flex flex-row justify-end" [showMenu]="showMenu" offsets="top-9 right-0" [width]="48">
+            <div trigger #firstButtonContainer></div>
+            <div trigger #secondButtonContainer></div>
+            <div content #navItemsContainer></div>
+        </app-dropdown-menu>
     `,
     styles: ``
 })
@@ -70,4 +66,5 @@ export class FancyHeaderButtonsComponent {
     }
 
     protected readonly faEllipsisV = faEllipsisV;
+    protected readonly faXmark = faXmark;
 }