feat: enable admins to edit events from the player events routes (#149)

Closes: #146
MaSch0212 · Jul 20, 2024 · 0a9c16e · 0a9c16e
1 parent 847700c
commit 0a9c16e
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 47 deletions.
diff --git a/...src/app/components/player-events/player-event-details/player-event-details.component.html b/...src/app/components/player-events/player-event-details/player-event-details.component.html
@@ -1,12 +1,23 @@
 <div class="flex h-full w-full max-w-[40rem] flex-col gap-4">
-  @if (hasFailed() || isBusy() || event()) {
-    <p-button
-      [label]="translations.playerEvents_backToEvents()"
-      [text]="true"
-      icon="i-[mdi--arrow-left]"
-      [routerLink]="['..']"
-    />
-  }
+  <div class="flex flex-row items-center justify-between gap-2 empty:hidden">
+    @if (hasFailed() || isBusy() || event()) {
+      <p-button
+        [label]="translations.playerEvents_backToEvents()"
+        [text]="true"
+        icon="i-[mdi--arrow-left]"
+        [routerLink]="['..']"
+      />
+      @if (user()?.roles?.includes('admin') && event()) {
+        <p-button
+          [pTooltip]="translations.shared_edit()"
+          [text]="true"
+          [rounded]="true"
+          icon="i-[mdi--pencil]"
+          [routerLink]="['/manage', 'events', event()?.id]"
+        />
+      }
+    }
+  </div>
 
   @if (isBusy()) {
     <p-progressSpinner class="m-8 self-center" />

diff --git a/src/client/src/app/components/player-events/player-events.component.html b/src/client/src/app/components/player-events/player-events.component.html
@@ -19,23 +19,9 @@ <h1>{{ translations.playerEvents_greetings({ name: user.alias }) }}</h1>
     <h2 class="m-0">{{ translations.playerEvents_currentEvents() }}</h2>
     <div class="rounded-lg border-[1px] border-solid border-surface-d bg-surface-a">
       @for (event of currentEvents(); track event.id; let index = $index) {
-        <a
-          class="flex min-w-0 flex-row flex-wrap items-center justify-between gap-x-4 truncate border-0 border-solid border-surface-d px-4 py-2 leading-8 text-text-color no-underline hover:bg-surface-c"
-          [class.border-t-[1px]]="index > 0"
-          [routerLink]="[event.id]"
-          pRipple
-        >
-          <span class="font-semibold">{{
-            event.date | date: 'fullDate' : undefined : locale()
-          }}</span>
-          <span class="text-sm">
-            @if (getRegisteredTimeslotsCount(event); as timeslotCount) {
-              {{ translations.playerEvents_registered({ timeslots: timeslotCount }) }}
-            } @else {
-              {{ translations.playerEvents_notRegistered() }}
-            }
-          </span>
-        </a>
+        <ng-container
+          *ngTemplateOutlet="eventEntryTemplate; context: { $implicit: event, index: $index }"
+        ></ng-container>
       }
       @if (currentEvents().length === 0) {
         <div class="px-4 py-2 text-center leading-8">
@@ -46,24 +32,10 @@ <h2 class="m-0">{{ translations.playerEvents_currentEvents() }}</h2>
 
     <h2 class="m-0">{{ translations.playerEvents_pastEvents() }}</h2>
     <div class="rounded-lg border-[1px] border-solid border-surface-d bg-surface-a">
-      @for (event of pastEvents(); track event.id; let index = $index) {
-        <a
-          class="flex min-w-0 flex-row flex-wrap items-center justify-between gap-x-4 truncate border-0 border-solid border-surface-d px-4 py-2 leading-8 text-text-color no-underline hover:bg-surface-c"
-          [class.border-t-[1px]]="index > 0"
-          [routerLink]="[event.id]"
-          pRipple
-        >
-          <span class="font-semibold">{{
-            event.date | date: 'fullDate' : undefined : locale()
-          }}</span>
-          <span class="text-sm">
-            @if (getRegisteredTimeslotsCount(event); as timeslotCount) {
-              {{ translations.playerEvents_registered({ timeslots: timeslotCount }) }}
-            } @else {
-              {{ translations.playerEvents_notRegistered() }}
-            }
-          </span>
-        </a>
+      @for (event of pastEvents(); track event.id) {
+        <ng-container
+          *ngTemplateOutlet="eventEntryTemplate; context: { $implicit: event, index: $index }"
+        ></ng-container>
       }
       @if (pastEvents().length === 0) {
         <div class="px-4 py-2 text-center leading-8">
@@ -77,3 +49,35 @@ <h2 class="m-0">{{ translations.playerEvents_pastEvents() }}</h2>
     }
   </div>
 }
+
+<ng-template #eventEntryTemplate let-event let-index="index">
+  <a
+    class="flex min-w-0 flex-row flex-wrap items-center gap-x-4 truncate border-0 border-solid border-surface-d px-4 py-2 leading-8 text-text-color no-underline hover:bg-surface-c"
+    [class.border-t-[1px]]="index > 0"
+    [routerLink]="[event.id]"
+    pRipple
+  >
+    <span class="grow font-semibold">{{
+      event.date | date: 'fullDate' : undefined : locale()
+    }}</span>
+    <span class="text-sm">
+      @if (getRegisteredTimeslotsCount(event); as timeslotCount) {
+        {{ translations.playerEvents_registered({ timeslots: timeslotCount }) }}
+      } @else {
+        {{ translations.playerEvents_notRegistered() }}
+      }
+    </span>
+    @if (user()?.roles?.includes('admin')) {
+      <p-button
+        class="-mr-2"
+        icon="i-[mdi--pencil]"
+        [text]="true"
+        [rounded]="true"
+        size="small"
+        [pTooltip]="translations.shared_edit()"
+        [routerLink]="['/manage', 'events', event.id]"
+        (click)="$event.stopPropagation(); $event.preventDefault()"
+      />
+    }
+  </a>
+</ng-template>
diff --git a/src/client/src/app/components/player-events/player-events.component.ts b/src/client/src/app/components/player-events/player-events.component.ts
@@ -2,8 +2,10 @@ import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { RouterLink } from '@angular/router';
+import { ButtonModule } from 'primeng/button';
 import { MessagesModule } from 'primeng/messages';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import { TooltipModule } from 'primeng/tooltip';
 import { map, timer } from 'rxjs';
 
 import { hasActionFailed, isActionBusy } from '../../+state/action-state';
@@ -20,7 +22,14 @@ const dayMillis = 24 * 60 * 60 * 1000;
 @Component({
   selector: 'app-player-events',
   standalone: true,
-  imports: [CommonModule, MessagesModule, ProgressSpinnerModule, RouterLink],
+  imports: [
+    ButtonModule,
+    CommonModule,
+    MessagesModule,
+    ProgressSpinnerModule,
+    RouterLink,
+    TooltipModule,
+  ],
   templateUrl: './player-events.component.html',
   styleUrl: './player-events.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/src/client/src/app/components/users/user-dialog/user-dialog.component.html b/src/client/src/app/components/users/user-dialog/user-dialog.component.html
@@ -103,7 +103,7 @@ <h4 class="m-0 mb-2">{{ translations.users_dialog_roles_title() }}</h4>
         >
           <app-user-item [user]="user" class="min-w-0 grow" />
           <p-button
-            icon="i-[mdi--delete-outline]"
+            icon="i-[mdi--delete]"
             [rounded]="true"
             [text]="true"
             [disabled]="form.controls.preferences.controls.avoid.disabled"
@@ -136,7 +136,7 @@ <h4 class="m-0 mb-2">{{ translations.users_dialog_roles_title() }}</h4>
         >
           <app-user-item [user]="user" class="min-w-0 grow" />
           <p-button
-            icon="i-[mdi--delete-outline]"
+            icon="i-[mdi--delete]"
             [rounded]="true"
             [text]="true"
             [disabled]="form.controls.preferences.controls.avoid.disabled"

diff --git a/src/client/src/app/components/users/users.component.html b/src/client/src/app/components/users/users.component.html
@@ -47,7 +47,7 @@
               />
             }
             <p-button
-              icon="i-[mdi--pencil-outline]"
+              icon="i-[mdi--pencil]"
               [rounded]="true"
               [text]="true"
               size="small"