69 lines
2.8 KiB
HTML
69 lines
2.8 KiB
HTML
<div fxFlex="0 1 max-content" fxLayout="column" class="pentest-overview">
|
|
<nb-layout fxFlex>
|
|
<!--Header-->
|
|
<nb-layout-header class="pentest-overview-header">
|
|
<div fxLayout="row" fxLayoutGap="2rem" fxLayoutAlign="space-between center">
|
|
<!--Filter-->
|
|
<div fxLayout="row" fxLayoutGap="1rem" class="header-filer">
|
|
<!--Actions-->
|
|
<form class="project-filter-input">
|
|
<nb-form-field>
|
|
<fa-icon nbPrefix class="search-prefix-icon" [icon]="fa.faSearch"></fa-icon>
|
|
<input type="text"
|
|
fullWidth nbInput
|
|
class="search-field"
|
|
[formControl]="projectSearch"
|
|
placeholder="{{ 'project.filter.placeholder' | translate: this.allProjectsCount$?.getValue() }}"
|
|
status="basic"
|
|
shape="semi-round"
|
|
fieldSize="medium">
|
|
</nb-form-field>
|
|
</form>
|
|
<!--ToDo: Add dropdown to filter for specific state-->
|
|
<button nbButton
|
|
status="danger"
|
|
outline
|
|
size="medium"
|
|
shape="semi-round"
|
|
class="reset-filter-btn"
|
|
[disabled]="projectSearch.value === ''"
|
|
(click)="onClickResetFilter()">
|
|
<fa-icon [icon]="fa.faFilterCircleXmark" class="btn-icon"></fa-icon>
|
|
{{'global.action.reset' | translate}}
|
|
</button>
|
|
</div>
|
|
<!--Button-->
|
|
<div class="header-project-button">
|
|
<button nbButton hero
|
|
status="info"
|
|
size="medium"
|
|
shape="round"
|
|
class="add-project-button"
|
|
(click)="onClickAddProject()">
|
|
<fa-icon [icon]="fa.faPlus" class="btn-icon"></fa-icon>
|
|
{{'project.overview.add.project' | translate}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nb-layout-header>
|
|
<!--Column-->
|
|
<!--ToDo: Fix the column style for multiple projects in css-->
|
|
<nb-layout-column class="pentest-overview-column">
|
|
<div class="project-grid">
|
|
<div class="project" *ngFor="let project of projects$ | async">
|
|
<app-project-widget [project]="project"></app-project-widget>
|
|
</div>
|
|
</div>
|
|
<!--Error Text-->
|
|
<div *ngIf="projects$.getValue() == null || projects$.getValue().length === 0 && loading$.getValue() === false"
|
|
fxLayout="row" fxLayoutAlign="center center">
|
|
<p class="error-text">
|
|
{{'project.overview.no.projects' | translate}}
|
|
</p>
|
|
</div>
|
|
<!--Loading Spinner-->
|
|
<app-loading-spinner [isLoading$]="isLoading()" *ngIf="isLoading() | async"></app-loading-spinner>
|
|
</nb-layout-column>
|
|
</nb-layout>
|
|
</div>
|