mtas-tv-frontend/src/app/admin/team-editor/team-editor.component.html

<div class="ui main container">
    <h1 class="ui dividing header">Team editor</h1>
    <form class="ui form" #teamEditorForm (ngSubmit)="saveTeam()">
        <div class="two fields">
            <div class="six wide field">
                <label for="team_name">Team name</label>
                <input id="team_name" type="text" name="team_name" [(ngModel)]="team.name">
            </div>
            <div class="six wide field">
                <label for="filter_id">Jira filter id</label>
                <input id="filter_id" type="number" name="filter_id" [(ngModel)]="team.filterId">
            </div>
        </div>
        <h5 class="ui header">1st column</h5>
        <div class="four fields">
            <div class="six wide field">
                <input type="text" name="column1_js"
                       placeholder="Jira column name" [(ngModel)]="team.backlogColumn.jiraStatusName">
            </div>
            <div class="four wide field">
                <input type="text" name="column1_l"
                       placeholder="Kanban board header" [(ngModel)]="team.backlogColumn.label">
            </div>
            <div class="two wide field">
                <input type="text" name="column1_wip"
                       placeholder="WIP limit" [(ngModel)]="team.backlogColumn.wipLimit">
            </div>
        </div>
        <h5 class="ui header">2nd column</h5>
        <div class="four fields">
            <div class="six wide field">
                <input type="text" name="column2_js"
                       placeholder="Jira column name" [(ngModel)]="team.inprogressColumn.jiraStatusName">
            </div>
            <div class="four wide field">
                <input type="text" name="column2_l"
                       placeholder="Kanban board header" [(ngModel)]="team.inprogressColumn.label">
            </div>
            <div class="two wide field">
                <input type="text" name="column2_wip"
                       placeholder="WIP limit" [(ngModel)]="team.inprogressColumn.wipLimit">
            </div>
        </div>
        <h5 class="ui header">3rd column</h5>
        <div class="four fields">
            <div class="six wide field">
                <input type="text" name="column3_js"
                       placeholder="Jira column name" [(ngModel)]="team.verificationColumn.jiraStatusName">
            </div>
            <div class="four wide field">
                <input type="text" name="column3_l"
                       placeholder="Kanban board header" [(ngModel)]="team.verificationColumn.label">
            </div>
            <div class="two wide field">
                <input type="text" name="column3_wip"
                       placeholder="WIP limit" [(ngModel)]="team.verificationColumn.wipLimit">
            </div>
        </div>
        <h5 class="ui header">4th column</h5>
        <div class="four fields">
            <div class="six wide field">
                <input type="text" name="column4_js"
                       placeholder="Jira column name" [(ngModel)]="team.doneColumn.jiraStatusName">
            </div>
            <div class="four wide field">
                <input type="text" name="column4_l"
                       placeholder="Kanban board header" [(ngModel)]="team.doneColumn.label">
            </div>
            <div class="two wide field">
                <input type="text" name="column4_wip"
                       placeholder="WIP limit" [(ngModel)]="team.doneColumn.wipLimit">
            </div>
        </div>

        <div class="six wide field">
            <label for="team_name"> </label>
            <div class="ui checkbox">
                <input type="checkbox" id="team_is_active" name="team_is_active"
                       [(ngModel)]="team.isActive">
                <label for="team_is_active">Active</label>
            </div>
        </div>

        <h4 class="ui dividing header">Team members</h4>
        <div class="three inline fields">
            <div class="two wide field">
                <button type="button" class="ui fluid button"
                        [class.positive]="canAddMember"
                        [class.disabled]="!canAddMember"
                        (keydown.enter)="handleEnter($event)"
                        (click)="addMember()">Add
                </button>
            </div>
            <div class="five wide field">
                <input type="text" #signumInput
                       name="member_signum"
                       placeholder="Signum"
                       (keydown.enter)="handleEnter($event)"
                       [(ngModel)]="member.signum">
            </div>
            <div class="nine wide field">
                <input type="text"
                       name="member_name"
                       placeholder="Display name"
                       (keydown.enter)="handleEnter($event)"
                       [(ngModel)]="member.name">
            </div>
        </div>
        <h4 class="ui dividing header"></h4>
        <table class="ui celled definition table" *ngIf="team.members.length">
            <thead>
            <tr>
                <th class="collapsing"></th>
                <th class="collapsing"><i class="large user outline icon"></i>Signum</th>
                <th><i class="large id card outline icon"></i>Display name</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let member of team.members">
                <td class="collapsing"><a title="Remove" (click)="removeMember(member.signum)"><i
                        class="large fitted red trash alternate outline icon"></i></a></td>
                <td class="collapsing">{{member.signum}}</td>
                <td>{{member.name}}</td>
            </tr>
            </tbody>
        </table>

        <button type="submit" class="ui button"
                [class.positive]="canSave"
                [class.disabled]="!canSave"><i class="save outline icon"></i>Save changes
        </button>
        <a class="ui button"
           [routerLink]="['/admin/teams']"><i class="left angle icon"></i>Back to teams list</a>
    </form>
</div>