Skip to content

Commit

Permalink
#790 format
Browse files Browse the repository at this point in the history
  • Loading branch information
janikEndtner committed Feb 2, 2024
1 parent 87ca431 commit 4e03df3
Show file tree
Hide file tree
Showing 7 changed files with 72 additions and 103 deletions.
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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: '[email protected]'};
const user2 = {firstname: 'user2', lastname: '2user', email: '[email protected]'};
const user3 = {firstname: 'user3', lastname: '3user', email: '[email protected]'};
const user1 = { firstname: 'user1', lastname: '1user', email: '[email protected]' };
const user2 = { firstname: 'user2', lastname: '2user', email: '[email protected]' };
const user3 = { firstname: 'user3', lastname: '3user', email: '[email protected]' };
component.users = [user1, user2, user3];

component.removeUser(user2);

expect(component.users).toStrictEqual([user1, user3]);
})
});
});
Original file line number Diff line number Diff line change
@@ -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);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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>
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
Original file line number Diff line number Diff line change
@@ -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();
});
});
25 changes: 12 additions & 13 deletions frontend/src/app/team-management/new-user/new-user.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>();
Expand All @@ -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() {
Expand Down

0 comments on commit 4e03df3

Please sign in to comment.