noauth

src/packages/noauth/component/list/list.component.html

@@ -1,3 +1,38 @@
-<p>
+<div fxLayoutAlign="end" [style.margin]="'10px'" fxLayoutGap="10px">
-  list works!
+  <button mat-raised-button color="primary" (click)="handleAccept()" [disabled]="selected == null">Accept</button>
-</p>
+  <button mat-raised-button color="warn" (click)="handleDeny()" [disabled]="selected == null">Deny</button>
+</div>
+<div class="example-container mat-elevation-z8">
+  <mat-table #table [dataSource]="dataSource" matSort>
+
+
+    <ng-container matColumnDef="select">
+      <mat-header-cell *matHeaderCellDef></mat-header-cell>
+      <mat-cell *matCellDef="let row">
+          <mat-radio-button (change)="handleSelect(row)"></mat-radio-button>
+      </mat-cell>
+    </ng-container>
+
+
+    <ng-container matColumnDef="id">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.id}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="description">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Description </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.description}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="createDate">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Created At </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.createDate}} </mat-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+  </mat-table>
+
+  <mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = $event">
+  </mat-paginator>
+</div>

src/packages/noauth/component/list/list.component.ts

@@ -1,10 +1,11 @@
-import { Component, OnInit, AfterContentInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
-
+import { MatTableDataSource, MatSort } from '@angular/material';
+import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
 import { Router } from '@angular/router';
 import { Store } from '@ngrx/store';
-import * as NoAuthProbeStore from '../../store/noauth-probe';
+import * as ListStore from '../../store/noauth-probe';
-
+import { Domain } from '../../../domain/model';
-import { Domain } from 'packages/domain/model';
+import { NoAuthProbe } from '../../model';
 
 @Component({
   selector: 'of-noauth-list',
@@ -13,20 +14,50 @@ import { Domain } from 'packages/domain/model';
 })
 export class ListComponent implements OnInit, AfterContentInit {
 
+  selected: NoAuthProbe = null;
+
+  displayedColumns = ['select', 'id', 'description', 'createDate'];
+  dataSource: MatTableDataSource<NoAuthProbe>;
+  @ViewChild(MatSort) sort: MatSort;
+
   constructor(
     private router: Router,
-    private store: Store<NoAuthProbeStore.State>,
+    private store: Store<ListStore.State>
-
   ) { }
 
+  ngAfterContentInit() {
+    // const domain: Domain = {
+    //   id: 1,
+    // };
+    // this.store.dispatch(new ListStore.ReadAllByDomain(domain));
+
+    // temporary data
+    const data: NoAuthProbe[] = new Array();
+    for (let i = 0; i < 5; i++) {
+      const p: NoAuthProbe = {
+        id: i,
+        description: String('desc' + i),
+        createDate: new Date()
+      };
+      data.push(p);
+    }
+
+    this.dataSource = new MatTableDataSource(data);
+    this.dataSource.sort = this.sort;
+  }
+
   ngOnInit() {
   }
 
-  ngAfterContentInit() {
+  handleSelect(selected: NoAuthProbe) {
-    const domain: Domain = {
+    this.selected = selected;
-      id: 1,
-    };
-    this.store.dispatch(new NoAuthProbeStore.ReadAllByDomain(domain));
   }
 
+  handleAccept() {
+    console.log(this.selected.id + ' accept');
+  }
+
+  handleDeny() {
+    console.log(this.selected.id + ' deny');
+  }
 }

src/packages/noauth/noauth.module.ts

@@ -5,11 +5,13 @@ import { NoAuthProbeStoreModule } from './noauth-probe-store.module';
 
 import { COMPONENTS } from './component';
 import { SERVICES } from './service';
+import { MaterialModule } from 'app/commons/ui/material/material.module';
 
 @NgModule({
   imports: [
     CommonModule,
     NoAuthProbeStoreModule,
+    MaterialModule
   ],
   declarations: [
     COMPONENTS,