From 4e03df36282bd036975f83c5a9a3e233825376e6 Mon Sep 17 00:00:00 2001
From: Janik Endtner <endtner@puzzle.ch>
Date: Fri, 2 Feb 2024 08:36:20 +0100
Subject: [PATCH] #790 format

---
 .../invite-user-dialog.component.html         | 29 ++++--------
 .../invite-user-dialog.component.spec.ts      | 44 +++++++------------
 .../invite-user-dialog.component.ts           | 23 +++++-----
 .../new-user/new-user.component.html          | 10 ++++-
 .../new-user/new-user.component.scss          |  4 +-
 .../new-user/new-user.component.spec.ts       | 40 ++++++-----------
 .../new-user/new-user.component.ts            | 25 +++++------
 7 files changed, 72 insertions(+), 103 deletions(-)

diff --git a/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.html b/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.html
index 96ca11fd72..6278006215 100644
--- a/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.html
+++ b/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.html
@@ -1,8 +1,8 @@
 <section mat-dialog-title>
   <div class="d-flex justify-content-between align-items-center position-relative dialog-header mt-1">
-  <span class="title w-100 mb-2">
-    <span>Members einladen</span>
-  </span>
+    <span class="title w-100 mb-2">
+      <span>Members einladen</span>
+    </span>
   </div>
 </section>
 <mat-dialog-content>
@@ -14,16 +14,11 @@
         </div>
       }
       <div class="w-100 d-flex justify-content-start">
-        <button
-          (click)="addUser()"
-          class="px-0 mb-3 pe-2 align-new-icon"
-          color="primary"
-          mat-button
-        >
-      <span class="d-flex align-items-center fw-bold add-text">
-        <img alt="Add User button" class="add-cross-button" src="/assets/icons/new-icon.svg" />
-        Weiterer Member hinzufügen
-      </span>
+        <button (click)="addUser()" class="px-0 mb-3 pe-2 align-new-icon" color="primary" mat-button>
+          <span class="d-flex align-items-center fw-bold add-text">
+            <img alt="Add User button" class="add-cross-button" src="/assets/icons/new-icon.svg" />
+            Weiterer Member hinzufügen
+          </span>
         </button>
       </div>
     </form>
@@ -32,13 +27,7 @@
 <mat-dialog-actions>
   <div class="d-flex justify-content-between p-0 mt-2" mat-dialog-actions>
     <div class="d-flex p-0">
-      <button
-        color="primary"
-        [disabled]="form.invalid"
-        mat-flat-button
-        type="submit"
-        (click)="inviteUsers()"
-      >
+      <button color="primary" [disabled]="form.invalid" mat-flat-button type="submit" (click)="inviteUsers()">
         Einladen
       </button>
       <button color="primary" mat-button mat-dialog-close class="ms-2">Abbrechen</button>
diff --git a/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.spec.ts b/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.spec.ts
index 7c9dbd7579..394b706aaf 100644
--- a/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.spec.ts
+++ b/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.spec.ts
@@ -1,54 +1,44 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { InviteUserDialogComponent } from "./invite-user-dialog.component";
-import { MatDialogModule } from "@angular/material/dialog";
-import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import { NewUserComponent } from "../new-user/new-user.component";
-import { PuzzleIconComponent } from "../../shared/custom/puzzle-icon/puzzle-icon.component";
-import { PuzzleIconButtonComponent } from "../../shared/custom/puzzle-icon-button/puzzle-icon-button.component";
+import { InviteUserDialogComponent } from './invite-user-dialog.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NewUserComponent } from '../new-user/new-user.component';
+import { PuzzleIconComponent } from '../../shared/custom/puzzle-icon/puzzle-icon.component';
+import { PuzzleIconButtonComponent } from '../../shared/custom/puzzle-icon-button/puzzle-icon-button.component';
 
-describe("InviteUserDialogComponent", () => {
+describe('InviteUserDialogComponent', () => {
   let component: InviteUserDialogComponent;
   let fixture: ComponentFixture<InviteUserDialogComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
-        InviteUserDialogComponent,
-        NewUserComponent,
-        PuzzleIconComponent,
-        PuzzleIconButtonComponent
-      ],
-      imports: [
-        MatDialogModule,
-        FormsModule,
-        ReactiveFormsModule
-      ]
-    })
-      .compileComponents();
+      declarations: [InviteUserDialogComponent, NewUserComponent, PuzzleIconComponent, PuzzleIconButtonComponent],
+      imports: [MatDialogModule, FormsModule, ReactiveFormsModule],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(InviteUserDialogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
-  it("should create", () => {
+  it('should create', () => {
     expect(component).toBeTruthy();
   });
 
   it('addUser should add a user to the existing users', () => {
     component.addUser();
     expect(component.users.length).toBe(2);
-  })
+  });
 
   it('removeUser should remove given user from users array', () => {
-    const user1 = {firstname: 'user1', lastname: '1user', email: 'user1@user.ch'};
-    const user2 = {firstname: 'user2', lastname: '2user', email: 'user2@user.ch'};
-    const user3 = {firstname: 'user3', lastname: '3user', email: 'user3@user.ch'};
+    const user1 = { firstname: 'user1', lastname: '1user', email: 'user1@user.ch' };
+    const user2 = { firstname: 'user2', lastname: '2user', email: 'user2@user.ch' };
+    const user3 = { firstname: 'user3', lastname: '3user', email: 'user3@user.ch' };
     component.users = [user1, user2, user3];
 
     component.removeUser(user2);
 
     expect(component.users).toStrictEqual([user1, user3]);
-  })
+  });
 });
diff --git a/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.ts b/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.ts
index 0d30cb35a0..a292c22e0f 100644
--- a/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.ts
+++ b/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.ts
@@ -1,31 +1,28 @@
-import { Component, ViewChild } from "@angular/core";
-import { NewUser } from "../../shared/types/model/NewUser";
-import { NgForm } from "@angular/forms";
+import { Component, ViewChild } from '@angular/core';
+import { NewUser } from '../../shared/types/model/NewUser';
+import { NgForm } from '@angular/forms';
 
 @Component({
   selector: 'app-invite-user-dialog',
   templateUrl: './invite-user-dialog.component.html',
-  styleUrl: './invite-user-dialog.component.scss'
+  styleUrl: './invite-user-dialog.component.scss',
 })
 export class InviteUserDialogComponent {
-
   @ViewChild('form') form!: NgForm;
 
-  private readonly emptyUser = {firstname: '', lastname: '', email: ''};
+  private readonly emptyUser = { firstname: '', lastname: '', email: '' };
 
-  users: NewUser[] = [{...this.emptyUser}];
+  users: NewUser[] = [{ ...this.emptyUser }];
 
-  constructor() {
-  }
+  constructor() {}
 
-  inviteUsers() {
-  }
+  inviteUsers() {}
 
   addUser() {
-    this.users.push({...this.emptyUser});
+    this.users.push({ ...this.emptyUser });
   }
 
   removeUser(user: NewUser) {
-    this.users = this.users.filter(u => u !== user);
+    this.users = this.users.filter((u) => u !== user);
   }
 }
diff --git a/frontend/src/app/team-management/new-user/new-user.component.html b/frontend/src/app/team-management/new-user/new-user.component.html
index daa4a4cf49..613bfc28a4 100644
--- a/frontend/src/app/team-management/new-user/new-user.component.html
+++ b/frontend/src/app/team-management/new-user/new-user.component.html
@@ -13,7 +13,8 @@
         #firstName="ngModel"
         [(ngModel)]="user.firstname"
         [id]="'firstName-col_' + index"
-        [name]="'firstName-col_' + index" />
+        [name]="'firstName-col_' + index"
+      />
       @if (showError(firstName)) {
         <mat-error>
           @if (firstName.invalid) {
@@ -75,7 +76,12 @@
       @if (index === 0) {
         <label [for]="'delete-col_' + index">&nbsp;</label>
       }
-      <app-puzzle-icon-button (click)="remove()" [id]="'delete-col_' + index" icon="delete-icon.svg" alt="Remove User Icon"></app-puzzle-icon-button>
+      <app-puzzle-icon-button
+        (click)="remove()"
+        [id]="'delete-col_' + index"
+        icon="delete-icon.svg"
+        alt="Remove User Icon"
+      ></app-puzzle-icon-button>
     </div>
   </div>
 </div>
diff --git a/frontend/src/app/team-management/new-user/new-user.component.scss b/frontend/src/app/team-management/new-user/new-user.component.scss
index 5c5d371ae6..4d6c765c77 100644
--- a/frontend/src/app/team-management/new-user/new-user.component.scss
+++ b/frontend/src/app/team-management/new-user/new-user.component.scss
@@ -1,14 +1,14 @@
 :host {
   width: 100%;
   > div {
-    gap: .5rem;
+    gap: 0.5rem;
   }
 }
 .invite-col {
   flex: 1 0 0;
 
   label {
-    margin-bottom: .75rem;
+    margin-bottom: 0.75rem;
   }
 }
 .delete {
diff --git a/frontend/src/app/team-management/new-user/new-user.component.spec.ts b/frontend/src/app/team-management/new-user/new-user.component.spec.ts
index ee2250502a..e4b6eb2734 100644
--- a/frontend/src/app/team-management/new-user/new-user.component.spec.ts
+++ b/frontend/src/app/team-management/new-user/new-user.component.spec.ts
@@ -1,44 +1,32 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NewUserComponent } from "./new-user.component";
-import { FormsModule, NgForm, ReactiveFormsModule } from "@angular/forms";
-import { SharedModule } from "../../shared/shared.module";
-import { PuzzleIconButtonComponent } from "../../shared/custom/puzzle-icon-button/puzzle-icon-button.component";
-import { PuzzleIconComponent } from "../../shared/custom/puzzle-icon/puzzle-icon.component";
-import { CommonModule } from "@angular/common";
+import { NewUserComponent } from './new-user.component';
+import { FormsModule, NgForm, ReactiveFormsModule } from '@angular/forms';
+import { SharedModule } from '../../shared/shared.module';
+import { PuzzleIconButtonComponent } from '../../shared/custom/puzzle-icon-button/puzzle-icon-button.component';
+import { PuzzleIconComponent } from '../../shared/custom/puzzle-icon/puzzle-icon.component';
+import { CommonModule } from '@angular/common';
 
-describe("NewUserComponent", () => {
+describe('NewUserComponent', () => {
   let component: NewUserComponent;
   let fixture: ComponentFixture<NewUserComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
-        NewUserComponent,
-        PuzzleIconButtonComponent,
-        PuzzleIconComponent
-      ],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        SharedModule,
-        CommonModule
-      ],
-      providers: [
-        NgForm
-      ]
-    })
-      .compileComponents();
+      declarations: [NewUserComponent, PuzzleIconButtonComponent, PuzzleIconComponent],
+      imports: [FormsModule, ReactiveFormsModule, SharedModule, CommonModule],
+      providers: [NgForm],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(NewUserComponent);
     component = fixture.componentInstance;
 
-    component.user = {firstname: '', lastname: '', email: ''};
+    component.user = { firstname: '', lastname: '', email: '' };
 
     fixture.detectChanges();
   });
 
-  it("should create", () => {
+  it('should create', () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/frontend/src/app/team-management/new-user/new-user.component.ts b/frontend/src/app/team-management/new-user/new-user.component.ts
index 4c7c41009f..613b2412ed 100644
--- a/frontend/src/app/team-management/new-user/new-user.component.ts
+++ b/frontend/src/app/team-management/new-user/new-user.component.ts
@@ -5,27 +5,26 @@ import {
   EventEmitter,
   Input,
   Output,
-  ViewChild
-} from "@angular/core";
-import { NewUser } from "../../shared/types/model/NewUser";
-import { ControlContainer, NgForm, NgModel } from "@angular/forms";
+  ViewChild,
+} from '@angular/core';
+import { NewUser } from '../../shared/types/model/NewUser';
+import { ControlContainer, NgForm, NgModel } from '@angular/forms';
 
 @Component({
   selector: 'app-new-user',
   templateUrl: './new-user.component.html',
   styleUrl: './new-user.component.scss',
-  viewProviders: [{provide: ControlContainer, useExisting: NgForm}],
-  changeDetection: ChangeDetectionStrategy.Default
+  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+  changeDetection: ChangeDetectionStrategy.Default,
 })
-export class NewUserComponent implements AfterViewInit{
+export class NewUserComponent implements AfterViewInit {
+  randNr = Math.round(Math.random() * 10000);
 
-  randNr = Math.round(Math.random()*10000)
-
-  @Input({required: true})
+  @Input({ required: true })
   index!: number;
 
-  @Input({required: true})
-  user!: NewUser
+  @Input({ required: true })
+  user!: NewUser;
 
   @Output()
   removeUser: EventEmitter<void> = new EventEmitter<void>();
@@ -37,7 +36,7 @@ export class NewUserComponent implements AfterViewInit{
   }
 
   showError(firstName: NgModel) {
-    return firstName.invalid && (firstName.dirty || firstName.touched)
+    return firstName.invalid && (firstName.dirty || firstName.touched);
   }
 
   remove() {