<h1>Accountmanagement</h1>
<button class="add" (click)="onAddEmployee()">Add Employee</button>
<table>
  <tr>
    <th>Username</th>
    <th>E-Mail</th>
    <th>Discord</th>
    <th>First Name</th>
    <th>Gitlab</th>
    <th>Redmine</th>
    <th>Gameserver</th>
    <th>Docu-Server</th>
  </tr>
  <tr *ngFor="let member of employees">
    <td>{{member.getUsername()}}</td>
    <td>{{member.getEmails()[0].address}}</td>
    <td>{{member.getDiscordUser()}}</td>
    <td>{{member.getFirstName()}}</td>
    <td>
      <a href="{{member.getGitlabLink()}}" target="_blank">{{member.getRankById(member.getGitlabRank())}}</a>
    </td>
    <td>
      <a href="{{member.getRedmineLink()}}" target="_blank">{{member.getRankById(member.getRedmineRank())}}</a>
    </td>
    <td>{{member.getRankById(member.getGameServerRank())}}</td>
    <td>{{member.getRankById(member.getDocuServerRank())}}</td>
  </tr>
</table>
<div class="overlay" *ngIf="showOverlay"></div>
<br>
<br>
<div class="interface" *ngIf="showOverlay">
  <employee-dialog [employee]="employees[index]" (end)="onEnd($event)"></employee-dialog>
</div>

import { Component, AfterViewInit } from '@angular/core';
import { Employee } from '../../Dataclasses/Employee';
import { EmployeeDialog } from './EmployeeDialog/EmployeeDialog';

@Component({
    selector: 'employee-list',
    templateUrl: 'EmployeeList.html',
    styleUrls: ["EmployeeList.css"]
})
export class EmployeeList {
    employees: Employee[] = [];
    index: number;
    showOverlay: boolean = false; //if the overlay and popup is shown
    constructor() {
        //intitialize employees (from DB)
    }

    ngAfterViewInit() {
        this.employees.push(new Employee());
    }

    onAddEmployee(): void {
        this.showOverlay = true;
        this.employees.push(new Employee());
        this.index = this.employees.length - 1;
    }

    onEnd(empl: Employee) {
        this.employees[this.index] = empl;
        this.showOverlay = false;
        let member = this.employees[0]
        member.getGitlabLink()

    }
}