Projects moved to material design

src/app/projects/projects.component.html

@@ -1,22 +1,32 @@
-<div class="container page">
-  <h1>Projects</h1>
-
-  <div class="row">
-    <table class="table table-inverse">
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let project of projects">
-          <td><a [routerLink]="['/server', server.id, 'project', project.project_id]">{{ project.name }}</a></td>
-          <td><button class="btn btn-outline-danger btn-sm" (click)="delete(project)">Remove</button></td>
-        </tr>
-      </tbody>
-
-    </table>
+<div class="content">
+  <div class="default-header">
+    <h1>Projects</h1>
   </div>
+  <div class="default-content">
 
+    <div class="example-container mat-elevation-z8">
+      <mat-table #table [dataSource]="dataSource">
+
+        <ng-container matColumnDef="name">
+          <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
+          <mat-cell *matCellDef="let row">
+            <button [routerLink]="['/server', server.id, 'project', row.project_id]" mat-button>{{row.name}}</button>
+          </mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="actions">
+          <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
+          <mat-cell *matCellDef="let row">
+            <button mat-icon-button (click)="delete(row)">
+              <mat-icon aria-label="Delete project">delete</mat-icon>
+            </button>
+          </mat-cell>
+        </ng-container>
+
+        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+      </mat-table>
+    </div>
+
+  </div>
 </div>

src/app/projects/projects.component.ts

@@ -5,6 +5,9 @@ import { Project } from "../models/project";
 import { ProjectService } from "../services/project.service";
 import { Server } from "../models/server";
 import { ServerService } from "../services/server.service";
+import {BehaviorSubject} from "rxjs/BehaviorSubject";
+import {DataSource} from "@angular/cdk/collections";
+import {Observable} from "rxjs/Observable";
 
 @Component({
   selector: 'app-projects',
@@ -13,11 +16,15 @@ import { ServerService } from "../services/server.service";
 })
 export class ProjectsComponent implements OnInit {
   server: Server;
-  projects: Project[] = [];
+  projectDatabase = new ProjectDatabase();
+  dataSource: ProjectDataSource;
+  displayedColumns = ['name', 'actions'];
 
   constructor(private route: ActivatedRoute,
               private serverService: ServerService,
-              private projectService: ProjectService) { }
+              private projectService: ProjectService) {
+    this.dataSource = new ProjectDataSource(this.projectDatabase);
+  }
 
   ngOnInit() {
     this.route.paramMap
@@ -27,22 +34,54 @@ export class ProjectsComponent implements OnInit {
       })
       .subscribe((server: Server) => {
         this.server = server;
-        this.reload();
-      });
-  }
-
-  reload() {
-    this.projectService
-      .list(this.server)
-      .subscribe((projects: Project[]) => {
-        this.projects = projects;
+        this.projectService
+          .list(this.server)
+          .subscribe((projects: Project[]) => {
+            this.projectDatabase.addProjects(projects);
+          });
       });
   }
 
   delete(project: Project) {
     this.projectService.delete(this.server, project.project_id).subscribe(() => {
-      this.reload();
+      this.projectDatabase.remove(project);
     });
   }
 
 }
+
+
+export class ProjectDatabase {
+  dataChange: BehaviorSubject<Project[]> = new BehaviorSubject<Project[]>([]);
+
+  get data(): Project[] {
+    return this.dataChange.value;
+  }
+
+  public addProjects(projects: Project[]) {
+    this.dataChange.next(projects);
+  }
+
+  public remove(project: Project) {
+    const index = this.data.indexOf(project);
+    if (index >= 0) {
+      this.data.splice(index, 1);
+      this.dataChange.next(this.data.slice());
+    }
+  }
+}
+
+export class ProjectDataSource extends DataSource<any> {
+  constructor(private projectDatabase: ProjectDatabase) {
+    super();
+  }
+
+  connect(): Observable<Project[]> {
+    return Observable.merge(this.projectDatabase.dataChange).map(() => {
+      return this.projectDatabase.data;
+    });
+  }
+
+  disconnect() {}
+
+}

src/app/servers/add-server-dialog.html

@@ -11,6 +11,6 @@
   </mat-form-field>
 </div>
 <div mat-dialog-actions>
-  <button mat-button (click)="onAddClick()" tabindex="2">Add</button>
-  <button mat-button (click)="onNoClick()" tabindex="-1">No Thanks</button>
+  <button mat-button (click)="onNoClick()" tabindex="-1" color="accent">No Thanks</button>
+  <button mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">Add</button>
 </div>

src/app/servers/servers.component.html

@@ -14,7 +14,7 @@
 
         <ng-container matColumnDef="name">
           <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
-          <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+          <mat-cell *matCellDef="let row"> <button [routerLink]="['/server', row.id, 'projects']" mat-button>{{row.name}}</button></mat-cell>
         </ng-container>
 
         <ng-container matColumnDef="ip">
@@ -29,14 +29,13 @@
 
         <ng-container matColumnDef="actions">
           <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
-          <mat-cell *matCellDef="let row">
+          <mat-cell *matCellDef="let row" style="text-align: right">
             <button mat-icon-button (click)="deleteServer(row)">
               <mat-icon aria-label="Remove server">delete</mat-icon>
             </button>
           </mat-cell>
         </ng-container>
 
-        >
         <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
         <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
       </mat-table>

src/app/servers/servers.component.ts

@@ -21,7 +21,6 @@ import 'rxjs/add/observable/fromEvent';
   styleUrls: ['./servers.component.css']
 })
 export class ServersComponent implements OnInit {
-  servers: Server[] = [];
   serverDatabase = new ServerDatabase();
   dataSource: ServerDataSource;
   displayedColumns = ['id', 'name', 'ip', 'port', 'actions'];