group page cleanup

src/main/angular/src/app/api/User/UserPublic.ts

@@ -16,4 +16,8 @@ export class UserPublic {
     );
   }
 
+  static compareName(a: UserPublic, b: UserPublic) {
+    return a.name.localeCompare(b.name);
+  }
+
 }

src/main/angular/src/app/api/group/Group.ts

@@ -15,6 +15,10 @@ export class Group {
     // -
   }
 
+  isOwner(user: UserPublic) {
+    return this.owner.publicUuid === user.publicUuid;
+  }
+
   static fromJson(json: any): Group {
     return new Group(
       validateString(json['uuid']),
@@ -31,5 +35,16 @@ export class Group {
     return a.created.getTime() - b.created.getTime();
   }
 
+  usersByNameOwnerFirst() {
+    return this.users.sort(this.compareOwnerFirstThenName);
+  }
+
+  private compareOwnerFirstThenName(a: UserPublic, b: UserPublic): number {
+    if (a.publicUuid === this.owner.publicUuid) {
+      return -1;
+    }
+    return UserPublic.compareName(a, b);
+  }
+
 }
 

src/main/angular/src/app/api/tools/Numbers/Numbers.ts

@@ -1,16 +1,12 @@
-import {UserPublic} from "../../User/UserPublic";
+import {validateString} from "../../common/validators";
-import {validateBoolean, validateDate, validateList, validateString} from "../../common/validators";
+import {Group} from "../../group/Group";
 
 export class Numbers {
 
   constructor(
     readonly uuid: string,
-    readonly title: string,
+    readonly name: string,
-    readonly owner: UserPublic,
+    readonly group: Group,
-    readonly created: Date,
-    readonly password: string,
-    readonly users: UserPublic[],
-    readonly initial: boolean,
   ) {
     // -
   }
@@ -18,12 +14,8 @@ export class Numbers {
   static fromJson(json: any): Numbers {
     return new Numbers(
       validateString(json['uuid']),
-      validateString(json['title']),
+      validateString(json['name']),
-      UserPublic.fromJson(json['owner']),
+      Group.fromJson(json['group']),
-      validateDate(json['created']),
-      validateString(json['password']),
-      validateList(json['users'], UserPublic.fromJson),
-      validateBoolean(json['initial']),
     );
   }
 

src/main/angular/src/app/pages/group/group/group.component.html

@@ -19,14 +19,10 @@
         <ng-container *ngIf="!userService.owns(group)"></ng-container>
       </td>
     </tr>
-    <tr>
-      <th>Besitzer</th>
-      <td class="user" (click)="userService.goto(group.owner)">{{ group.owner.name }}</td>
-    </tr>
     <tr>
       <th>Teilnehmer</th>
       <td>
-        <div class="user" *ngFor="let user of group.users" (click)="userService.goto(user)">{{ user.name }}</div>
+        <div class="user" [class.user_owner]="group.isOwner(user)" *ngFor="let user of group.usersByNameOwnerFirst()" (click)="userService.goto(user)">{{ user.name }}</div>
       </td>
     </tr>
   </table>
@@ -35,4 +31,5 @@
 <ng-container *ngIf="uuid && !group && accessDenied">
   <h1>Passwort</h1>
   <input type="text" [(ngModel)]="password" (keydown.enter)="join()">
+  <button (click)="join()">Beitreten</button>
 </ng-container>

src/main/angular/src/app/pages/group/group/group.component.less

@@ -1 +1,5 @@
 @import "../../../../common.less";
+
+th {
+  text-align: left;
+}

src/main/angular/src/app/pages/group/group/group.component.ts

@@ -2,10 +2,10 @@ import {Component, OnInit} from '@angular/core';
 import {DatePipe, NgForOf, NgIf} from "@angular/common";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {TextComponent} from "../../../shared/text/text.component";
-import {Numbers} from "../../../api/tools/Numbers/Numbers";
 import {ActivatedRoute, Router} from "@angular/router";
 import {GroupService} from "../../../api/group/GroupService";
 import {UserService} from "../../../api/User/user.service";
+import {Group} from "../../../api/group/Group";
 
 @Component({
   selector: 'app-group',
@@ -23,7 +23,7 @@ import {UserService} from "../../../api/User/user.service";
 })
 export class GroupComponent implements OnInit {
 
-  protected group: Numbers | null = null;
+  protected group: Group | null = null;
 
   protected uuid: string | null = null;
 
@@ -56,7 +56,7 @@ export class GroupComponent implements OnInit {
     });
   }
 
-  private setGroup(group: Numbers): void {
+  private setGroup(group: Group): void {
     this.group = group;
   }
 
@@ -66,11 +66,11 @@ export class GroupComponent implements OnInit {
     }
   }
 
-  protected changeTitle(group: Numbers, title: string) {
+  protected changeTitle(group: Group, title: string) {
     this.groupService.changeTitle(group, title, group => this.setGroup(group));
   }
 
-  protected changePassword(group: Numbers, password: string) {
+  protected changePassword(group: Group, password: string) {
     this.groupService.changePassword(group, password, group => this.setGroup(group));
   }
 

src/main/angular/src/user.less

@@ -1,10 +1,17 @@
 @import "./config.less";
 
 .user {
+  clear: left;
   float: left;
   padding: @halfSpace;
   background-color: lightskyblue;
   border-radius: @halfSpace;
+  margin-right: @halfSpace;
+  margin-bottom: @halfSpace;
+}
+
+.user_owner {
+  border: 1px solid black;
 }
 
 .user:hover {