#705 extract search-team-management, add no-members message, sort mem…

…bers by first name

frontend/src/app/shared/types/model/UserTableEntry.ts

@@ -13,20 +13,21 @@ export interface UserTableEntry {
 export const convertFromUsers = (users: User[], teamId: number | null): UserTableEntry[] => {
   // make a deep copy to not modify original value
   const usersCopy = JSON.parse(JSON.stringify(users)) as User[];
+  let userTableEntries;
   if (!teamId) {
-    return usersCopy.map((u) => convertFromUser(u));
-  }
-  return (
-    usersCopy
+    userTableEntries = usersCopy.map((u) => convertFromUser(u));
+  } else {
+    userTableEntries = usersCopy
       // first we filter user teams based on selected team id
       .map((u) => {
         u.userTeamList = u.userTeamList.filter((ut) => ut.team.id === teamId);
         return u;
       })
       // we remove users without membership in selected team id
       .filter((u) => u.userTeamList.length)
-      .map((u) => convertFromUser(u))
-  );
+      .map((u) => convertFromUser(u));
+  }
+  return userTableEntries.sort((a, b) => a.firstname.localeCompare(b.firstname));
 };
 
 export const convertFromUser = (user: User): UserTableEntry => {

frontend/src/app/team-management/member-list/member-list.component.html

@@ -17,7 +17,11 @@ <h3 *ngIf="!selectedTeam">Alle Teams</h3>
     </div>
   </div>
 
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 okr-table">
+  <div class="pt-3 p-2" *ngIf="!dataSource.length">
+    <p>Keine Members</p>
+  </div>
+
+  <table *ngIf="dataSource.length" mat-table [dataSource]="dataSource" class="mat-elevation-z8 okr-table">
     <!--- Note that these columns can be defined in any order.
             The actual rendered columns are set as a property on the row definition" -->
 

frontend/src/app/team-management/search-team-management/search-team-management.component.html

@@ -0,0 +1,17 @@
+<form class="d-flex">
+  <mat-form-field
+    id="search-member-form-field"
+    class="bg-white header-form-field"
+    ngDefaultControl
+    subscriptSizing="dynamic"
+    appearance="outline"
+  >
+    <input matInput type="text" placeholder="Nach Team oder Member suchen" [attr.data-testId]="'teamManagementSearch'" />
+  </mat-form-field>
+  <button
+    class="bg-pz-dark-blue d-flex justify-content-center align-items-center search-button icon-button px-3 focus-outline"
+    type="submit"
+  >
+    <mat-icon aria-hidden="false" aria-label="Example home icon" fontIcon="search" class="text-white"></mat-icon>
+  </button>
+</form>

frontend/src/app/team-management/search-team-management/search-team-management.component.scss

@@ -0,0 +1,3 @@
+#search-member-form-field {
+  width: 100%;
+}

frontend/src/app/team-management/search-team-management/search-team-management.component.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-search-team-management',
+  templateUrl: './search-team-management.component.html',
+  styleUrl: './search-team-management.component.scss'
+})
+export class SearchTeamManagementComponent {
+
+}

frontend/src/app/team-management/team-management-banner/team-management-banner.component.html

@@ -5,27 +5,11 @@
     </div>
   </div>
   <div class="row second-line">
-    <div class="col-4">
+    <div class="col-12 col-md-5 col-lg-4">
       <h1>Teamverwaltung</h1>
     </div>
-    <div class="col-8">
-      <form class="d-flex" id="search-member">
-        <mat-form-field
-          id="objective-form-field"
-          class="bg-white header-form-field"
-          ngDefaultControl
-          subscriptSizing="dynamic"
-          appearance="outline"
-        >
-          <input matInput type="text" placeholder="Nach Team oder Member suchen" attr.data-testId="objectiveSearch" />
-        </mat-form-field>
-        <button
-          class="bg-pz-dark-blue d-flex justify-content-center align-items-center search-button icon-button px-3 focus-outline"
-          type="submit"
-        >
-          <mat-icon aria-hidden="false" aria-label="Example home icon" fontIcon="search" class="text-white"></mat-icon>
-        </button>
-      </form>
+    <div class="d-none d-md-flex col-md-7 col-lg-8">
+      <app-search-team-management></app-search-team-management>
       <button (click)="createTeam()" [attr.data-testId]="'add-team'" class="align-new-icon" color="primary" mat-button>
         <span class="d-flex align-items-center fw-bold add-text">
           <img alt="Add key-result button" class="add-cross-button" src="/assets/icons/new-icon.svg" />

frontend/src/app/team-management/team-management-banner/team-management-banner.component.scss

@@ -36,11 +36,12 @@
 
   #okr-tangram {
     position: absolute;
+    z-index: -1;
     top: 0;
     right: 0;
   }
 
-  #search-member {
+  app-search-team-management {
     width: 100%;
     max-width: 360px;
     margin-right: 2rem;

frontend/src/app/team-management/team-management.component.html

@@ -1,10 +1,10 @@
 <app-team-management-banner></app-team-management-banner>
 <div id="wrapper" class="container-fluid">
   <div class="row">
-    <div class="col-4">
+    <div class="col-12 col-md-4 d-none d-md-block">
       <app-team-list></app-team-list>
     </div>
-    <div class="col-8">
+    <div class="col-12 col-md-8">
       <app-member-list></app-member-list>
     </div>
   </div>

frontend/src/app/team-management/team-management.module.ts

@@ -18,6 +18,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
+import { SearchTeamManagementComponent } from './search-team-management/search-team-management.component';
 
 @NgModule({
   declarations: [
@@ -28,6 +29,7 @@ import { MatMenuModule } from '@angular/material/menu';
     MemberListComponent,
     RolesPipe,
     TeamsPipe,
+    SearchTeamManagementComponent,
   ],
   imports: [
     CommonModule,