feat: Add player count to users component (#111)

looks like this:

![image](https://github.com/MaSch0212/minigolf-friday/assets/9435005/aab44313-89f7-46da-8bd0-26c50226754a)

it now will display the admin users on the top of the page and the
"normal" users below them. each "section" is alphabetically ordered.
also add the functionality to insert the search value directly to the
name entry of the "create new User" view.
With this, you can search for a user and if no result is found, just
click add user and the name will already be filled in.

Closes: #106

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" />