feat: As an user I want to have the necessary components available for correct layout

README.md

@@ -1,36 +1,40 @@
 # security-c4po
 
-## Chief Innovator
-* Daniel Mader
+### Chief Innovator
+> Daniel Mader
 
-## Project Leads
+### Project Leads
 * Andreas Falk
 * Christina Paule
 
-## Developers
+### Developers
 * Marcel Haag
+* Norman Schmidt
 * Stipe Knez
 
-## Technical Requirements
+### Technical Requirements
 * Docker / Docker-compose
 * OpenJDK 11
 * Node 14.15.1 / npm 6.14.8
 * MongoDB 4.4.6
 
-## Tools
+### Tools
 * mongoDB Compass
 * Postman
 
-## Conventions
+> Application Architecture
+![alt architecture](./wiki/SecurityC4PO_Architecture.png)
+
+> Data Structure
+![alt architecture](./wiki/SecurityC4PO_Data_Structure.png)
+
+### Conventions
 * Branch: `<initial>_c4po_<issuenumber>`
 * Commit: `feat: <What was implemented?>` or `fix: <What got fixed?>`
 
-## Development server
+### Development server
 Execute 'c4po.sh' and all services will run on a dev server.
 
-## Testuser Credentials:
+### Testuser Credentials:
 * Username: ttt
 * Password: Test1234!
-
-## Architecture
-![alt architecture](./wiki/SecurityC4PO_Architecture.png)

security-c4po-angular/src/app/app.component.html

@@ -10,5 +10,4 @@
       </div>
     </div>
   </nb-layout-column>
-
 </nb-layout>

security-c4po-angular/src/app/app.component.scss

@@ -1,9 +1,10 @@
 @import "../assets/@theme/styles/_variables.scss";
 
 .content-container {
+  width: 100%;
+  height: calc(100% - #{$header-height});
 
   .scrollable-content {
     overflow: auto;
   }
-
 }

security-c4po-angular/src/app/header/header.component.scss

@@ -1,4 +1,3 @@
-
 @import '~@nebular/theme/styles/global/breakpoints';
 @import "../../assets/@theme/styles/_variables.scss";
 

security-c4po-angular/src/app/pentest-overview/index.ts

@@ -0,0 +1,2 @@
+export {PentestOverviewModule} from './pentest-overview.module';
+export {PentestOverviewRoutingModule} from './pentest-overview-routing.module';

security-c4po-angular/src/app/pentest-overview/pentest-categories/pentest-categories.component.html

@@ -0,0 +1 @@
+<p>pentest-categories works!</p>

security-c4po-angular/src/app/pentest-overview/pentest-categories/pentest-categories.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PentestCategoriesComponent } from './pentest-categories.component';
+
+describe('PentestCategoriesComponent', () => {
+  let component: PentestCategoriesComponent;
+  let fixture: ComponentFixture<PentestCategoriesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PentestCategoriesComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PentestCategoriesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

security-c4po-angular/src/app/pentest-overview/pentest-categories/pentest-categories.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-pentest-categories',
+  templateUrl: './pentest-categories.component.html',
+  styleUrls: ['./pentest-categories.component.scss']
+})
+export class PentestCategoriesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

security-c4po-angular/src/app/pentest-overview/pentest-header/pentest-header.component.html

@@ -0,0 +1,3 @@
+<div>
+  <p>header for "{{selectedProjectTitle}}" works!</p>
+</div>

security-c4po-angular/src/app/pentest-overview/pentest-header/pentest-header.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PentestHeaderComponent } from './pentest-header.component';
+
+describe('PentestHeaderComponent', () => {
+  let component: PentestHeaderComponent;
+  let fixture: ComponentFixture<PentestHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PentestHeaderComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PentestHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

security-c4po-angular/src/app/pentest-overview/pentest-header/pentest-header.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-pentest-header',
+  templateUrl: './pentest-header.component.html',
+  styleUrls: ['./pentest-header.component.scss']
+})
+export class PentestHeaderComponent implements OnInit {
+
+  selectedProjectTitle: string = history?.state?.selectedProject ? history?.state?.selectedProject.title : '';
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

security-c4po-angular/src/app/pentest-overview/pentest-overview-routing.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RouterModule, Routes} from '@angular/router';
+import {ProjectComponent} from '../project-overview/project/project.component';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class PentestOverviewRoutingModule {
+}

security-c4po-angular/src/app/pentest-overview/pentest-overview.module.ts

@@ -0,0 +1,25 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {PentestHeaderComponent} from './pentest-header/pentest-header.component';
+import {PentestCategoriesComponent} from './pentest-categories/pentest-categories.component';
+import {PentestTableComponent} from './pentest-table/pentest-table.component';
+import {NbLayoutModule} from '@nebular/theme';
+
+@NgModule({
+  declarations: [
+    PentestHeaderComponent,
+    PentestCategoriesComponent,
+    PentestTableComponent
+  ],
+  exports: [
+    PentestHeaderComponent,
+    PentestCategoriesComponent,
+    PentestTableComponent
+  ],
+  imports: [
+    CommonModule,
+    NbLayoutModule
+  ]
+})
+export class PentestOverviewModule {
+}

security-c4po-angular/src/app/pentest-overview/pentest-table/pentest-table.component.html

@@ -0,0 +1 @@
+<p>pentest-table works!</p>

security-c4po-angular/src/app/pentest-overview/pentest-table/pentest-table.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PentestTableComponent } from './pentest-table.component';
+
+describe('PentestTableComponent', () => {
+  let component: PentestTableComponent;
+  let fixture: ComponentFixture<PentestTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PentestTableComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PentestTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

security-c4po-angular/src/app/pentest-overview/pentest-table/pentest-table.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-pentest-table',
+  templateUrl: './pentest-table.component.html',
+  styleUrls: ['./pentest-table.component.scss']
+})
+export class PentestTableComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

security-c4po-angular/src/app/project-overview/project/project.component.html

@@ -1,6 +1,23 @@
-<nb-layout>
-  <nb-layout-header>
-    <p>{{selectedProjectTitle}} works!</p>
-  </nb-layout-header>
-</nb-layout>
+<div fxFlex class="pentest-overview">
+  <nb-layout>
+    <nb-layout-header fxFlexAlign="center" class="header-column">
+      <app-pentest-header></app-pentest-header>
+    </nb-layout-header>
+
+    <nb-layout-column fxFlexFill fxLayout="row" fxLayoutGap="2rem">
+      <nb-card class="categories-column">
+        <nb-card-body>
+          <app-pentest-categories></app-pentest-categories>
+        </nb-card-body>
+      </nb-card>
+
+      <nb-card class="table-column">
+        <nb-card-body>
+          <app-pentest-table></app-pentest-table>
+        </nb-card-body>
+      </nb-card>
+    </nb-layout-column>
+  </nb-layout>
+</div>
+
 

security-c4po-angular/src/app/project-overview/project/project.component.scss

@@ -0,0 +1,22 @@
+@import '../../../assets/@theme/styles/themes';
+@import '../../../assets/@theme/styles/_variables.scss';
+
+.pentest-overview {
+  width: 100vw;
+  height: calc(100vh - #{$header-height});
+  overflow: hidden;
+
+  .header-column {
+    width: 100%
+  }
+
+  .categories-column {
+    width: 20%;
+    height: calc(100% - #{$pentest-header-height});
+  }
+
+  .table-column {
+    width: 80%;
+    height: calc(100% - #{$pentest-header-height});
+  }
+}

security-c4po-angular/src/app/project-overview/project/project.component.spec.ts

@@ -10,8 +10,9 @@ import {RouterTestingModule} from '@angular/router/testing';
 import {NgxsModule} from '@ngxs/store';
 import {SessionState} from '@shared/stores/session-state/session-state';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
-import {NbLayoutModule} from '@nebular/theme';
+import {NbCardModule, NbLayoutModule} from '@nebular/theme';
 import {KeycloakService} from 'keycloak-angular';
+import {PentestOverviewModule} from '../../pentest-overview';
 
 describe('ProjectComponent', () => {
   let component: ProjectComponent;
@@ -25,6 +26,8 @@ describe('ProjectComponent', () => {
       imports: [
         CommonModule,
         NbLayoutModule,
+        NbCardModule,
+        PentestOverviewModule,
         ThemeModule.forRoot(),
         TranslateModule.forRoot({
           loader: {

security-c4po-angular/src/app/project-overview/project/project.component.ts

@@ -7,8 +7,6 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ProjectComponent implements OnInit {
 
-  selectedProjectTitle: string = history?.state?.selectedProject ? history?.state?.selectedProject.title : '';
-
   constructor() { }
 
   ngOnInit(): void {

security-c4po-angular/src/app/project-overview/project/project.module.ts

@@ -7,6 +7,7 @@ import {FlexLayoutModule} from '@angular/flex-layout';
 import {TranslateModule} from '@ngx-translate/core';
 import {ProjectDialogModule} from '@shared/modules/project-dialog/project-dialog.module';
 import {ProjectRoutingModule} from './project-routing.module';
+import {PentestOverviewModule} from '../../pentest-overview';
 
 @NgModule({
   declarations: [
@@ -24,6 +25,7 @@ import {ProjectRoutingModule} from './project-routing.module';
     TranslateModule,
     FlexLayoutModule,
     ProjectDialogModule,
+    PentestOverviewModule
   ]
 })
 export class ProjectModule {

security-c4po-angular/src/assets/@theme/styles/_variables.scss

@@ -1 +1,2 @@
-$header-height: 4rem;
+$header-height: 10rem;
+$pentest-header-height: 8rem;

wiki/SecurityC4PO_Architecture.drawio

@@ -1 +0,0 @@
-<mxfile host="Electron" modified="2021-11-17T14:37:25.148Z" agent="5.0 (Macintosh; Intel Mac OS X 10_16_0) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/13.5.7 Chrome/83.0.4103.122 Electron/9.1.2 Safari/537.36" etag="s1AgPU1yGEcNQfB56VBf" version="13.5.7" type="device"><diagram id="4R89a1ChFzt5-WKvF59N" name="Page-1">3Vldd5s4EP01Pid9sA8gZPCjjZNsW+fYXW+ajzcZFKxGRj5C+KO/foURGBCuk9TOppuHRBrEwNx7Gc0oLeAtNtccLec3LMC0ZRnBpgWGLcsyAbDkn9SyzSw9F2SGkJNALdobpuQnVkZDWRMS4LiyUDBGBVlWjT6LIuyLig1xztbVZU+MVp+6RCHWDFMfUd16RwIxz6yu5eztf2ESztWTYR7eAuVrVSDxHAVsXTKByxbwOGMiGy02HqYpdjks2X1XB64W78VxJF5yg/sNrX7cRs4z9oB3m9iPj09hW3lZIZqoeNXLim0OwHpOBJ4ukZ/O15LkFhjMxYLKmSmHKF5msD+RDZaPGjwRSj1GGd/dDpzLfvfSkHb1JMwF3hwMwSyAkYLCbIEF38ol+Q05lkpL+XS9JwbayjYvk5IbkRJDWLjeAyYHCrNm/O5u2P0ajG/b3x+20ebLQqy8q7al4XfFWSRwFEjrRT8KE4r4p5bVpfJVBjMuR2E6si3D0JCWClmmQz+ZyT+DI8DPWBIFOBjNCgPyn0OeWseJoCTCyh4g/jyWbohIYTM6BqwarZ3VLCjS+Ghg7SBFANoVisyuzlFBY5kj91wU2RpFU+wnXAbu2ZNxf/JZZ+diuuQkCuVdA/l5NtDn2jb4X9JnO7UvrGf9x/RBjb7PgYwvRcMyJpyt5PbAGyj8irc+Zei5iT35o7EnX0VuKSlxBY+UJcFxIk+AullHHTag7jSgXlBxcth7Gux9X8icfkj0yYJmC8AgjZvIDXSEZphOWEwEYZFcMmNCsEVpQZ+SML0gWA1Sln0AXrGlGydKTjnvCmegwwy6OsrOuUDOa5xfbb9yK+mnZcxOkCiOiV/FCm+IuFcQpeOH0niYxu0UszRqN59NMCcyCszz9ZGM6L48eShPdq7gfrotX6z7OkhVzBLu4+P7qUA8xOJ4UsdBpXjTiS9XBk2FgbJxTJEgq2rJ10S3esKEERnZPmu6ZlVXtlV1kcWt7irXaDVHEFQdFek3d5QBoznaqa8I+zcEqdczLxNkLF9M/FqnL9CXU9WX+3qB/WHCgV2j45i25cLsdzU92cB4m4wcWNOj+84yAueTUZ7uOsAsZ7yOW855lZR3PON14GFNnj3lwQ+lSNOsliK2ab1Ng2av5qgu5nNrUK/7X7+3vseeeDRlWR9KILZRa/DenKRqRa9ZV9rpBDLedh9Hf/+zIBs2ir3l3Yxcjxta99fr41jtZb229uq4bkVqHQu+bzZ6aQH2sbIWqCUb+FZR2nYta9X72tOJMrm3f+Lr0VX3e9tpW850NmHN53FZ+xovUZQ3sOnBxXCQX5EPKl/U+90mFxc3LArZcPDpt7zI1sh0Dno4dD6ylc2dbNqtEx6SxNm5sQlP0yjC+i4I9FOsXlM/bp6gVWwUhp6t8gOOYQNXF7LtFiHHccPpB7SBnun+IG5M+H7ctNLj3PyAPvvG9//lAJf/Ag==</diagram></mxfile>