Add player count to users component

src/client/public/manifest.webmanifest

@@ -1,8 +1,6 @@
 {
   "name": "Minigolf Freitag",
   "short_name": "Minigolf Freitag",
-  "theme_color": "#9e48d9",
-  "background_color": "#13276c",
   "display": "standalone",
   "scope": "./",
   "start_url": "./events",

src/client/src/app/components/users/user-dialog/user-dialog.component.ts

@@ -150,7 +150,7 @@ export class UserDialogComponent {
     );
   }
 
-  public open(user?: User) {
+  public edit(user: User) {
     this.userToUpdate.set(user);
     this.form.reset(
       user
@@ -169,6 +169,11 @@ export class UserDialogComponent {
     this.visible.set(true);
   }
 
+  public create(user: string) {
+    this.form.reset({ alias: user });
+    this.visible.set(true);
+  }
+
   protected onAddAvoid(user: User) {
     this.form.controls.preferences.controls.avoid.setValue([...this.avoid(), user.id]);
   }

src/client/src/app/components/users/users.component.html

@@ -26,7 +26,7 @@
       <p-button
         icon="i-[mdi--plus]"
         label="{{ translations.shared_add() }}"
-        (onClick)="dialog.open()"
+        (onClick)="dialog.create(filter()); filter.set('')"
       />
     </div>
     <div class="grow overflow-auto pb-4 pt-3">
@@ -42,7 +42,7 @@
               [rounded]="true"
               [text]="true"
               size="small"
-              (onClick)="dialog.open(user)"
+              (onClick)="dialog.edit(user)"
             />
             <p-button
               icon="i-[mdi--delete]"
@@ -54,6 +54,22 @@
             />
           </div>
         }
+        <div class="flex min-w-0 flex-row gap-0 rounded-b-lg bg-surface-100 p-3 pl-4">
+          <p class="m-0 flex min-w-0 grow items-center gap-2">
+            <span class="i-[mdi--crown]"></span> {{ translations.users_footer_admins() }}:
+            <span
+              class="inline-block rounded-full bg-primary pl-2 pr-2 text-center font-bold text-primary-text"
+              >{{ admins().length }}
+            </span>
+          </p>
+          <p class="m-0 flex min-w-0 grow items-center gap-2">
+            <span class="i-[mdi--account]"></span> {{ translations.users_footer_players() }}:
+            <span
+              class="inline-block rounded-full bg-primary pl-2 pr-2 text-center font-bold text-primary-text"
+              >{{ players().length }}
+            </span>
+          </p>
+        </div>
       </div>
     </div>
   </div>

src/client/src/app/components/users/users.component.ts

@@ -54,7 +54,19 @@ export class UsersComponent {
 
   protected readonly translations = inject(TranslateService).translations;
   protected readonly filter = signal('');
-  protected readonly users = computed(() => this.filterUsers(this._allUsers(), this.filter()));
+  protected readonly players = computed(() =>
+    this.filterUsers(
+      this._allUsers().filter(x => !x.roles.includes('admin')),
+      this.filter()
+    )
+  );
+  protected readonly admins = computed(() =>
+    this.filterUsers(
+      this._allUsers().filter(x => x.roles.includes('admin')),
+      this.filter()
+    )
+  );
+  protected readonly users = computed(() => this.admins().concat(this.players()));
   protected readonly isLoading = computed(() => isActionBusy(this._actionState()));
   protected readonly hasFailed = computed(() => hasActionFailed(this._actionState()));
 

src/client/src/app/i18n/de.json

@@ -170,6 +170,10 @@
       "title": "Benutzer löschen",
       "text": "Möchtest du den Benutzer \"{{alias}}\" wirklich löschen?"
     },
+    "footer": {
+      "players": "Spieler",
+      "admins": "Administratoren"
+    },
     "dialog": {
       "addHeader": "Benutzer hinzufügen",
       "editHeader": "Benutzer \"{{alias}}\" bearbeiten",

src/client/src/app/i18n/en.json

@@ -170,6 +170,10 @@
       "title": "Delete user",
       "text": "Are you sure you want to delete user \"{{alias}}\"?"
     },
+    "footer": {
+      "players": "Players",
+      "admins": "Admins"
+    },
     "dialog": {
       "addHeader": "Add user",
       "editHeader": "Edit user \"{{alias}}\"",

src/client/src/index.html

@@ -9,7 +9,6 @@
       content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
     />
     <link rel="manifest" href="manifest.webmanifest" />
-    <meta name="theme-color" content="var(--primary-color)" />
 
     <!-- Android  -->
     <meta name="mobile-web-app-capable" content="yes" />