Merge remote-tracking branch 'origin/master'

web/src/app/app-routing.module.ts

@@ -6,11 +6,13 @@ import {SettingsComponent} from './views/settings/settings.component';
 import {WizardComponent} from './views/wizard/wizard.component';
 import {AuthGuard} from "./auth/auth.guard";
 import {OidcCallbackGuard} from "./auth/oidc-callback.guard";
+import { RepositoryDetailComponent } from './views/repository-detail/repository-detail.component';
 
 
 const routes: Routes = [
   { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
   { path: 'repository', component: RepositoryComponent, canActivate: [AuthGuard] },
+  { path: 'repository/:id', component: RepositoryDetailComponent, canActivate: [AuthGuard] },
   { path: 'settings', component: SettingsComponent, canActivate: [AuthGuard] },
   { path: 'wizard', component: WizardComponent, canActivate: [AuthGuard] },
   { path: 'auth/oidc/callback', component: DashboardComponent, canActivate: [OidcCallbackGuard] },

web/src/app/app.module.ts

@@ -14,6 +14,8 @@ import { ListComponent } from './components/list/list.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { ListDirective } from './components/list/list.directive';
 import { AddgroupComponent } from './components/addgroup/addgroup.component';
+import { RepositoryDetailComponent } from './views/repository-detail/repository-detail.component';
+import { ListDetailsComponent } from './components/list-details/list-details.component';
 
 @NgModule({
   declarations: [
@@ -27,7 +29,9 @@ import { AddgroupComponent } from './components/addgroup/addgroup.component';
     GroupsComponent,
     ListComponent,
     ListDirective,
-    AddgroupComponent
+    AddgroupComponent,
+    RepositoryDetailComponent,
+    ListDetailsComponent
   ],
   imports: [
     BrowserModule,

web/src/app/auth/auth.guard.ts

@@ -37,7 +37,7 @@ export class AuthGuard implements CanActivate {
       scope: 'openid profile email',
       response_type: 'code',
       extraQueryParams: {
-        login_hint: 'oliver.seitz@harbour.rocks'
+        // login_hint: 'oliver.seitz@harbour.rocks'
       }
     });
 

web/src/app/components/list-details/list-details.component.html

@@ -0,0 +1 @@
+<p>list-details works!</p>

web/src/app/components/list-details/list-details.component.spec.ts

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

web/src/app/components/list-details/list-details.component.ts

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

web/src/app/components/list/list.component.html

@@ -1,4 +1,4 @@
-<div #expandable class="list">
+<div #expandable class="list" (click)="gotoDetails()" [style.cursor]="listData.details?'pointer':'default'">
     <div #colorblock class="list-colorblock" [class.list-colorblock--small]="groupHovered || isHovered || groupSmallColorBlock"></div>
     <div class="list-text" [class.list-text--open]="isHovered">
         {{listData.text}}

web/src/app/components/list/list.component.ts

@@ -3,6 +3,7 @@ import { ListModel } from 'src/app/models/list.model';
 import { ListDirective } from './list.directive';
 import { ListContentModel } from 'src/app/models/list-item';
 import { NavbarComponent } from '../navbar/navbar.component';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-list',
@@ -20,7 +21,7 @@ export class ListComponent implements OnInit {
   @ViewChild('colorblock') colorblock;
   @ViewChild(ListDirective, {static: true}) listHost: ListDirective;
 
-  constructor(private componentFactoryResolver: ComponentFactoryResolver) { 
+  constructor(private router: Router,private componentFactoryResolver: ComponentFactoryResolver) { 
   }
 
   ngOnInit(): void {
@@ -93,4 +94,9 @@ export class ListComponent implements OnInit {
     }, 0);
 
   }
+
+  gotoDetails() {
+    if(this.listData.details)
+    this.router.navigate(['/repository/', 0]);
+  }
 }

web/src/app/models/list-detail.model.ts

@@ -0,0 +1,6 @@
+import { GroupModel } from './group.model';
+
+export interface ListDetailsModel {
+    title: string;
+    group: GroupModel;
+}

web/src/app/models/list.model.ts

@@ -1,6 +1,8 @@
 import { ListContentModel } from './list-item';
+import { ListDetailsModel } from './list-detail.model';
 
 export interface ListModel {
     text: string;
     content?: ListContentModel;
+    details?: Array<ListDetailsModel>;
 }

web/src/app/views/repository-detail/repository-detail.component.html

@@ -0,0 +1,15 @@
+<div class="details">
+    <div class="header">
+        <div #headerText class="header-text" 
+        *ngFor="let item of repoDetails;let i = index"
+        (mouseenter)="onMouseEnter(headerText)"
+        (mouseleave)="onMouseLeave()"
+        (click)="onClick(headerText, i)">
+            {{item.title}}
+        </div>
+    </div>
+    <div #underscore class="header-underscore"></div>
+    <div #groupWrapper class="group-wrapper">
+        <app-groups [groupData]="getGroupData()"></app-groups>
+    </div>
+</div>

web/src/app/views/repository-detail/repository-detail.component.scss

@@ -0,0 +1,30 @@
+@import "../../../assets/colors.scss";
+
+.header {
+    display: flex;
+    flex-flow: row nowrap;
+    margin-bottom: 60px;
+    margin-left: 60px;
+    >*:not(:first-child) {
+        margin-left: 120px;
+    }
+
+    &-text{
+        text-decoration: none;
+        font-size: 22px;
+        color: $color-dark-grey;
+        cursor: pointer;
+    }
+
+    &-underscore {
+        height: 1px;
+        background: $color-dark-grey;
+        width: 200px;
+        position: absolute;
+        transition: all 0.35s;
+    }
+}
+
+.group-wrapper {
+    overflow-y: scroll;
+}

web/src/app/views/repository-detail/repository-detail.component.spec.ts

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

web/src/app/views/repository-detail/repository-detail.component.ts

@@ -0,0 +1,133 @@
+import { Component, OnInit, ViewChild, ViewChildren, QueryList, AfterViewInit, ElementRef } from '@angular/core';
+import { GroupModel } from 'src/app/models/group.model';
+import { ListDetailsModel } from 'src/app/models/list-detail.model';
+import { GroupsComponent } from 'src/app/components/groups/groups.component';
+
+@Component({
+  selector: 'app-repository-detail',
+  templateUrl: './repository-detail.component.html',
+  styleUrls: ['./repository-detail.component.scss']
+})
+export class RepositoryDetailComponent implements OnInit, AfterViewInit {
+  @ViewChildren('headerText') headerTexts:QueryList<ElementRef>;
+  @ViewChild('underscore') underscore: ElementRef;
+  @ViewChild('groupWrapper') groupWrapper: ElementRef;
+
+  groupEl: HTMLElement;
+  underscoreEl: HTMLElement;
+  activeHeadEl: HTMLElement;
+  currentGroupIndex = 0;
+  heightOffset = 7;
+
+  //INPUT IN FUTURE
+  public repoDetails: Array<ListDetailsModel>;
+
+  constructor() { 
+    const groupProperty:GroupModel = {
+      smallColorbox:true,
+      listItems:[
+        {text: "2.0.0-release1"},
+        {text: "1.3.1"},
+        {text: "1.2.4"},
+        {text: "1.2.3"},
+        {text: "1.2.2"},
+        {text: "1.2.1"},
+        {text: "1.1.4"},
+        {text: "1.1.3"},
+        {text: "1.1.2"},
+        {text: "1.1.1"},
+        {text: "1.0.1"}
+      ]
+    }
+    const groupImage:GroupModel = {
+      listItems:[
+        {text: "2.0.0-release1"},
+        {text: "1.3.1"},
+      ]
+    }
+    const groupBuilds:GroupModel = {
+      listItems:[
+        {text: "2.0.0-release1"},
+      ]
+    }
+
+    this.repoDetails = [
+      {title: "Properties", group: groupProperty},
+      {title: "Images", group: groupImage},
+      {title: "Builds", group: groupBuilds}
+    ]
+  }
+
+  ngOnInit(): void {
+  }
+
+  ngAfterViewInit(): void {
+    this.groupEl = this.groupWrapper.nativeElement;
+    this.activeHeadEl = this.headerTexts.toArray()[0].nativeElement;
+    this.underscoreEl = this.underscore.nativeElement;
+    this.resetUnderscore();
+
+    const offsetTop = this.groupEl.offsetTop;
+    const windowHeight = window.innerHeight;
+    const calculatedHeight = windowHeight - offsetTop;
+    console.log(calculatedHeight)
+
+    this.groupEl.style.height = calculatedHeight + "px";
+  }
+
+  resetUnderscore(): void {
+    const offsetTop = this.activeHeadEl.offsetTop;
+    const offsetLeft = this.activeHeadEl.offsetLeft;
+    const height = this.activeHeadEl.clientHeight;
+    const width = this.activeHeadEl.clientWidth;
+    const underscoreOffset = offsetTop + height + this.heightOffset;
+
+    this.underscoreEl.style.left = offsetLeft + "px";
+    this.underscoreEl.style.top = underscoreOffset + "px";
+    this.underscoreEl.style.width = width + "px";
+  }
+
+  expandUnderscore(targetEl: HTMLElement): void {
+    const currentLeft = this.underscoreEl.offsetLeft;
+    const currentWidth = this.underscoreEl.offsetWidth;
+    const targetLeft = targetEl.offsetLeft;
+    const targetWidth = targetEl.clientWidth;
+
+    let newLeft;
+    let newWidth;
+
+    if(targetLeft < currentLeft) {
+      newLeft = targetLeft < currentLeft? targetLeft : currentLeft;
+      newWidth = currentLeft - targetLeft + currentWidth;
+    } else {
+      newLeft = currentLeft;
+      newWidth = targetLeft - currentLeft + targetWidth;
+    }
+
+
+
+    this.underscoreEl.style.left = newLeft + "px";
+    this.underscoreEl.style.width = newWidth +"px";
+  }
+
+  onClick(headerEl: HTMLElement, index: number) {
+    this.activeHeadEl = headerEl;
+    this.resetUnderscore();
+    this.currentGroupIndex = index;
+  }
+
+  onMouseEnter(headerText: HTMLElement) {
+    this.expandUnderscore(headerText);
+  }
+
+
+  onMouseLeave() {
+    this.resetUnderscore();
+  }
+
+
+  getGroupData() {
+    return this.repoDetails[this.currentGroupIndex].group;
+  }
+
+}

web/src/app/views/repository/repository.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { GroupModel } from 'src/app/models/group.model';
 import { faShip } from '@fortawesome/free-solid-svg-icons';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-repository',
@@ -26,6 +27,7 @@ export class RepositoryComponent implements OnInit {
           },
           {
             text: "harbour-iam",
+            details: [{title:"properties", group: {listItems: [{text: "lol"}]}}],
           },
         ]
       },
@@ -49,5 +51,4 @@ export class RepositoryComponent implements OnInit {
 
   ngOnInit(): void {
   }
-
 }