feat(organigram): redesign

.vscode/launch.json

@@ -10,7 +10,7 @@
       "request": "launch",
       "preLaunchTask": "build",
       // If you have changed target frameworks, make sure to update the program path.
-      "program": "${workspaceFolder}/Phonebook.Source.PeopleSoft/src/Phonebook.Source.PeopleSoft/bin/Debug/netcoreapp2.2/Phonebook.Source.PeopleSoft.dll",
+      "program": "${workspaceFolder}/Phonebook.Source.PeopleSoft/src/Phonebook.Source.PeopleSoft/bin/Debug/netcoreapp3.1/Phonebook.Source.PeopleSoft.dll",
       "args": [],
       "cwd": "${workspaceFolder}/Phonebook.Source.PeopleSoft/src/Phonebook.Source.PeopleSoft",
       "stopAtEntry": false,

Phonebook.Frontend/package.json

@@ -5,8 +5,8 @@
   "scripts": {
     "ng": "ng",
     "start": "npm run start:en",
-    "start:en": "concurrently -n mock-backend,assets,angular \"docker run --rm -p 8080:80 --name phonebook-source-mock -e ASPNETCORE_ENVIRONMENT=Development tsystemsmms/phonebook-build:source-peoplesoft\" \"docker run --rm -p 8081:80 --name phonebook-assets tsystemsmms/phonebook-build:assets\" \"ng serve --ssl --proxy-config proxy.conf.json --configuration en\"",
-    "start:de": "concurrently -n mock-backend,assets,angular \"docker run --rm -p 8080:80 --name phonebook-source-mock -e ASPNETCORE_ENVIRONMENT=Development tsystemsmms/phonebook-build:source-peoplesoft\" \"docker run --rm -p 8081:80 --name phonebook-assets tsystemsmms/phonebook-build:assets\" \"ng serve --ssl --proxy-config proxy.conf.json --configuration de\"",
+    "start:en": "concurrently -n mock-backend,assets,angular \"docker run --rm -p 8080:80 --name phonebook-source-mock -e ASPNETCORE_ENVIRONMENT=Development tsystemsmms/phonebook-source-peoplesoft\" \"docker run --rm -p 8081:80 --name phonebook-assets tsystemsmms/phonebook-build:assets\" \"ng serve --ssl --proxy-config proxy.conf.json --configuration en\"",
+    "start:de": "concurrently -n mock-backend,assets,angular \"docker run --rm -p 8080:80 --name phonebook-source-mock -e ASPNETCORE_ENVIRONMENT=Development tsystemsmms/phonebook-source-peoplesoft\" \"docker run --rm -p 8081:80 --name phonebook-assets tsystemsmms/phonebook-build:assets\" \"ng serve --ssl --proxy-config proxy.conf.json --configuration de\"",
     "start:debug": "ng serve --ssl --proxy-config=proxy.conf.json --configuration debug",
     "start-compose": "npm run compose-build && docker-compose run --rm --service-ports angular npm run start:en",
     "start-compose:debug": "npm run compose-build && docker-compose run --rm --service-ports angular npm run start:debug",

Phonebook.Frontend/proxy.conf.json

@@ -6,7 +6,7 @@
     "logLevel": "debug"
   },
   "/api/*": {
-    "target": "http://localhost:8080",
+    "target": "https://localhost:5001",
     "secure": false,
     "changeOrigin": true,
     "logLevel": "debug"

Phonebook.Frontend/src/app/modules/organigram/helpers.ts

@@ -0,0 +1,14 @@
+import { ParamMap } from '@angular/router';
+
+export class OrganigramHelpers {
+  public static getParamsAsArray(params: ParamMap, paramNames: string[]): string[] {
+    const paramArray: string[] = [];
+    paramNames.forEach((paramName) => {
+      const string = params.get(paramName);
+      if (string != null) {
+        paramArray.push(string);
+      }
+    });
+    return paramArray;
+  }
+}

Phonebook.Frontend/src/app/modules/organigram/node1/node1.component.html

@@ -0,0 +1,79 @@
+<mat-card class="pb-margin-20 node">
+  <mat-card-title>
+    <h1>
+      <mat-icon
+        [cdkCopyToClipboard]="getLink()"
+        (copied)="copiedToast($event)"
+        class="link pb-pointer"
+        >link</mat-icon
+      >
+      <span>{{ node?.id + ': ' + node?.name }}</span>
+    </h1>
+  </mat-card-title>
+  <mat-card-subtitle>
+    <div>
+      <span i18n="NodeComponent|Supervisor Property@@NodeComponentPropertySupervisor"
+        >{node?.supervisors.length, plural, =0 { No Supervisor } =1 { Supervisor: } other {
+        Supervisors: }}</span
+      >
+      <a *ngFor="let person of node?.supervisors" [routerLink]="['/user', person.Id]">
+        {{ person.Firstname + ' ' + person.Surname }}
+      </a>
+    </div>
+    <div>
+      <span i18n="NodeComponent|Assistant Property@@NodeComponentPropertyAssistant"
+        >{node?.assistents.length, plural, =0 { No Assistant } =1 { Assistant: } other { Assistants:
+        }}</span
+      >
+      <a *ngFor="let person of node?.assistents" [routerLink]="['/user', person.Id]">
+        {{ person.Firstname + ' ' + person.Surname }}
+      </a>
+    </div>
+  </mat-card-subtitle>
+  <mat-card-content>
+    <div class="persons">
+      <div *ngIf="node?.employees.length > 0">
+        <h2 i18n="NodeComponent|Employee Property@@NodeComponentPropertyEmployee"
+          >{node?.employees.length, plural, =0 { No Employees } =1 { Employee: } other { Employees:
+          }}</h2
+        >
+        <li *ngFor="let person of node?.employees">
+          <a [routerLink]="['/user', person.Id]">
+            {{ person.Firstname + ' ' + person.Surname }}
+          </a>
+        </li>
+      </div>
+      <div *ngIf="node?.learners.length > 0">
+        <h2 i18n="NodeComponent|Learners Property@@NodeComponentPropertyLearner"
+          >{node?.learners.length, plural, =0 { No Learners } =1 { Learner: } other { Learners:
+          }}</h2
+        >
+        <li *ngFor="let person of node?.learners">
+          <a [routerLink]="['/user', person.Id]">
+            {{ person.Firstname + ' ' + person.Surname }}
+          </a>
+        </li>
+      </div>
+    </div>
+    <div *ngIf="node?.children.length != 0">
+      <h2
+        i18n="NodeComponent|SubOrganization Unit Property@@NodeComponentPropertySubOrganizationUnit"
+        >Sub-Organization Unit:</h2
+      >
+      <div class="pb-flex-row pb-expand">
+        <mat-card
+          *ngFor="let child of node?.children"
+          class="pb-card pb-normal-shadow pb-margin-20 child-card"
+          (click)="navigateToChildNode(child)"
+          (keyup.enter)="navigateToChildNode(child)"
+          tabindex="0"
+        >
+          <mat-card-title>
+            <h2> {{ child.id + ': ' + child.name }} </h2>
+          </mat-card-title>
+          <mat-card-content> </mat-card-content>
+        </mat-card>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>

Phonebook.Frontend/src/app/modules/organigram/node1/node1.component.scss

@@ -0,0 +1,40 @@
+mat-card-title {
+  display: flex;
+
+  .link {
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  &:hover .link {
+    opacity: 1;
+  }
+}
+
+button {
+  margin-left: auto;
+}
+
+mat-card-subtitle,
+mat-card-content {
+  margin-left: 24px;
+}
+
+.persons {
+  display: flex;
+  flex-flow: row;
+  margin-bottom: 20px;
+  > div {
+    flex: 1;
+  }
+}
+
+.node {
+  margin-left: 40px;
+}
+
+.child-card {
+  width: 250px;
+  height: 70px;
+  padding: 16px 30px;
+}

Phonebook.Frontend/src/app/modules/organigram/node1/node1.component.ts

@@ -0,0 +1,101 @@
+import { Component, OnInit } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { RuntimeEnvironmentInterface } from 'src/environments/EnvironmentInterfaces';
+import { runtimeEnvironment } from 'src/environments/runtime-environment';
+import { OrganigramHelpers } from 'src/app/modules/organigram/helpers';
+import { OrganigramService, UnitTreeNode } from 'src/app/services/api/organigram.service';
+import { Navigate, RouterState } from '@ngxs/router-plugin';
+import { WindowRef } from 'src/app/services/windowRef.service';
+import { Store } from '@ngxs/store';
+
+@Component({
+  selector: 'app-node1',
+  templateUrl: './node1.component.html',
+  styleUrls: ['./node1.component.scss'],
+  host: { class: 'pb-height-expand' },
+})
+export class Node1Component implements OnInit {
+  public node: UnitTreeNode;
+  public runtimeEnvironment: RuntimeEnvironmentInterface = runtimeEnvironment;
+
+  constructor(
+    private route: ActivatedRoute,
+    private organigramService: OrganigramService,
+    private router: Router,
+    private windowRef: WindowRef,
+    private snackBar: MatSnackBar,
+    private store: Store
+  ) {}
+
+  public ngOnInit() {
+    this.route.paramMap.subscribe((params) => {
+      this.organigramService
+        .getNodeByPath(
+          OrganigramHelpers.getParamsAsArray(params, ['node1Id', 'node2Id', 'node3Id'])
+        )
+        .subscribe((node) => {
+          if (node == null) {
+            this.snackBar.open(
+              $localize`:NodeComponent|Error Message if Node does not exist.@@NodeComponentErrorNoNode:Organisation does not exist.`,
+              '',
+              { duration: 5000 }
+            );
+            this.router.navigate(['/organigram']);
+          } else {
+            this.node = node;
+          }
+        });
+    });
+  }
+
+  public getLink() {
+    return this.windowRef.getCurrentUrl();
+  }
+  public generatePath(withNode: boolean): string[] {
+    // Get the Path till the depth of the node
+    let path = this.getCurrentRouteAsArray().slice(0, this.node.depth + 1);
+    //
+    if (withNode) {
+      path = [...path, this.node.id];
+    }
+    return path;
+  }
+
+  public copiedToast(success: boolean) {
+    if (success) {
+      this.store.dispatch(new Navigate(this.generatePath(true)));
+      this.snackBar.open(
+        $localize`:NodeComponent|First part of the message displayed when copying a link to the node@@NodeComponentCopiedFirstPart:Link to` +
+          ' "' +
+          this.node.name +
+          '" ' +
+          $localize`:NodeComponent|Second part of the message displayed when copying a link to the node@@NodeComponentCopiedSecondPart:copied to clipboard!`,
+        '',
+        { duration: 2000 }
+      );
+    } else {
+      this.snackBar.open(
+        $localize`:GeneralErrorMessageCopy|Message displayed when copying something went wrong@@GeneralErrorMessageCopy:Couldn't copy to the clipboard, something went wrong. Try again.`,
+        '',
+        { duration: 2000 }
+      );
+    }
+  }
+
+  public navigateToChildNode(nodePath: UnitTreeNode) {
+    let tree = this.getCurrentRouteAsArray().slice(0, nodePath.depth + 1);
+    tree = [...tree, nodePath.id];
+    this.store.dispatch(new Navigate(tree));
+  }
+  public getCurrentRouteAsArray(): string[] {
+    const navState = this.store.selectSnapshot(RouterState.state);
+    return [
+      navState!.root.firstChild!.url[0].path,
+      ...navState!.root.firstChild!.firstChild!.firstChild!.url.map((obj) => {
+        return obj.path;
+      }),
+    ];
+  }
+}

Phonebook.Frontend/src/app/modules/organigram/organigram-routing.module.ts

@@ -1,15 +1,21 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { OrganigramComponent } from 'src/app/modules/organigram/pages/organigram/organigram.component';
+import { OrganigramOverviewComponent } from 'src/app/modules/organigram/overview/organigram-overview.component';
+import { Node1Component } from 'src/app/modules/organigram/node1/node1.component';
 
 const routes: Routes = [
-  { path: '', component: OrganigramComponent, pathMatch: 'full' },
-  { path: ':first', component: OrganigramComponent },
-  { path: ':first/:second', component: OrganigramComponent },
-  { path: ':first/:second/:third', component: OrganigramComponent },
-  { path: ':first/:second/:third/:fourth', component: OrganigramComponent },
-  { path: ':first/:second/:third/:fourth/:fifth', component: OrganigramComponent },
-  { path: ':first/:second/:third/:fourth/:fifth/:sixth', component: OrganigramComponent },
+  {
+    path: '',
+    component: OrganigramComponent,
+    children: [
+      { path: '', component: OrganigramOverviewComponent, pathMatch: 'full' },
+      { path: ':node1Id', component: Node1Component },
+      { path: ':node1Id/:node2Id', component: Node1Component },
+      { path: ':node1Id/:node2Id/:node3Id', component: Node1Component },
+    ],
+  },
+  { path: '**', redirectTo: '' },
 ];
 
 @NgModule({

Phonebook.Frontend/src/app/modules/organigram/organigram.module.ts

@@ -9,6 +9,10 @@ import { ClipboardModule } from '@angular/cdk/clipboard';
 import { OrganigramNodeComponent } from 'src/app/modules/organigram/components/organigram-node/organigram-node.component';
 import { OrganigramRoutingModule } from 'src/app/modules/organigram/organigram-routing.module';
 import { OrganigramComponent } from 'src/app/modules/organigram/pages/organigram/organigram.component';
+import { MaterialModule } from 'src/app/shared/material.module';
+import { OrganigramOverviewComponent } from 'src/app/modules/organigram/overview/organigram-overview.component';
+import { Node1Component } from 'src/app/modules/organigram/node1/node1.component';
+import { AddressModule } from 'src/app/shared/components/address/address.module';
 
 @NgModule({
   imports: [
@@ -20,8 +24,15 @@ import { OrganigramComponent } from 'src/app/modules/organigram/pages/organigram
     ClipboardModule,
     MatButtonModule,
     MatTooltipModule,
+    MaterialModule,
+    AddressModule,
+  ],
+  declarations: [
+    OrganigramComponent,
+    OrganigramNodeComponent,
+    OrganigramOverviewComponent,
+    Node1Component,
   ],
-  declarations: [OrganigramComponent, OrganigramNodeComponent],
   exports: [],
 })
 export class OrganigramModule {}

Phonebook.Frontend/src/app/modules/organigram/overview/organigram-overview.component.html

@@ -0,0 +1,16 @@
+<div class="pb-margin-20">
+  <div class="pb-flex-row pb-expand">
+    <mat-card
+      *ngFor="let node of nodes"
+      class="pb-card pb-normal-shadow pb-margin-20 overview-card"
+      (click)="navigateToFirstNode(node)"
+      (keyup.enter)="navigateToFirstNode(node)"
+      tabindex="0"
+    >
+      <mat-card-title>
+        <h2> {{ node.id + ': ' + node.name }} </h2>
+      </mat-card-title>
+      <mat-card-content> </mat-card-content>
+    </mat-card>
+  </div>
+</div>

Phonebook.Frontend/src/app/modules/organigram/overview/organigram-overview.component.scss

@@ -0,0 +1,5 @@
+.overview-card {
+  width: 250px;
+  height: 70px;
+  padding: 16px 30px;
+}

Phonebook.Frontend/src/app/modules/organigram/overview/organigram-overview.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { OrganigramService, UnitTreeNode } from 'src/app/services/api/organigram.service';
+import { OrganigramHelpers } from 'src/app/modules/organigram/helpers';
+import { Navigate, RouterState } from '@ngxs/router-plugin';
+import { Store } from '@ngxs/store';
+
+@Component({
+  selector: 'app-organigram-overview',
+  templateUrl: './organigram-overview.component.html',
+  styleUrls: ['./organigram-overview.component.scss'],
+})
+export class OrganigramOverviewComponent implements OnInit {
+  public nodes: UnitTreeNode[] = [];
+
+  constructor(
+    private organigramService: OrganigramService,
+    private router: Router,
+    private store: Store
+  ) {}
+
+  public ngOnInit() {
+    this.organigramService.getOrganigramTree().subscribe((organigram) => {
+      this.nodes = organigram;
+    });
+  }
+
+  public navigateToFirstNode(nodePath: UnitTreeNode) {
+    let tree = this.getCurrentRouteAsArray().slice(0, nodePath.depth + 1);
+    tree = [...tree, nodePath.id];
+    this.store.dispatch(new Navigate(tree));
+  }
+  public getCurrentRouteAsArray(): string[] {
+    const navState = this.store.selectSnapshot(RouterState.state);
+    return [
+      navState!.root.firstChild!.url[0].path,
+      ...navState!.root.firstChild!.firstChild!.firstChild!.url.map((obj) => {
+        return obj.path;
+      }),
+    ];
+  }
+}