xos-table component with minimal configuration
Change-Id: If1af35fcb30556c5ca34ffeb2b6e2b11fc87ffae
diff --git a/src/app/components/tables/table.component.html b/src/app/components/tables/table.component.html
new file mode 100644
index 0000000..d945ae7
--- /dev/null
+++ b/src/app/components/tables/table.component.html
@@ -0,0 +1,10 @@
+<table>
+ <tr>
+ <th *ngFor="let col of _config.columns">{{col.label}}</th>
+ </tr>
+ <tr *ngFor="let item of _data">
+ <td *ngFor="let col of _config.columns">
+ {{item[col.prop]}}
+ </td>
+ </tr>
+</table>
\ No newline at end of file
diff --git a/src/app/components/tables/table.component.ts b/src/app/components/tables/table.component.ts
new file mode 100644
index 0000000..7e62235
--- /dev/null
+++ b/src/app/components/tables/table.component.ts
@@ -0,0 +1,33 @@
+import { Observable } from 'rxjs/Rx';
+/// <reference path="../../../../typings/index.d.ts"/>
+import { IXosTableConfig } from './../../interfaces/xos-components/table.interface';
+import {Component, OnInit, Input} from '@angular/core';
+
+@Component({
+ selector: 'xos-table',
+ template: require('./table.component.html'),
+})
+export class XosTableComponent implements OnInit {
+
+ public _config;
+ public _data;
+
+ @Input() config: IXosTableConfig;
+ @Input() data: Observable<any>;
+
+
+ ngOnInit() {
+
+ if (!this.config) {
+ throw new Error('[XosTable]: You must pass a configuration');
+ }
+
+ this._config = this.config;
+ this.data.subscribe(
+ (items: any[]) => {
+ this._data = items;
+ }
+ );
+ }
+}
+
diff --git a/src/app/hello.html b/src/app/hello.html
index 4c639ca..3ed1088 100644
--- a/src/app/hello.html
+++ b/src/app/hello.html
@@ -4,6 +4,8 @@
<xos-logout></xos-logout>
+<xos-table [config]="cfg" [data]="data"></xos-table>
+
<div *ngFor="let slice of slices">
<b>{{slice.name}}</b>
<i>{{slice.backend_status}}</i>
diff --git a/src/app/hello.ts b/src/app/hello.ts
index fb51740..cd90d22 100644
--- a/src/app/hello.ts
+++ b/src/app/hello.ts
@@ -1,3 +1,5 @@
+import { Observable } from 'rxjs/Rx';
+import { IXosTableConfig } from './interfaces/xos-components/table.interface';
/// <reference path="../../typings/index.d.ts"/>
import {Component, OnInit} from '@angular/core';
import {StyleConfig} from './config/style.config';
@@ -14,6 +16,20 @@
// declare class properties
public hello: string;
public slices: ISlice[];
+ public data: Observable<any>;
+
+ public cfg: IXosTableConfig = {
+ columns: [
+ {
+ label: 'Name',
+ prop: 'name'
+ },
+ {
+ label: 'Default Isolation',
+ prop: 'default_isolation'
+ }
+ ]
+ };
constructor(
private sliceStore: SliceStore
@@ -24,15 +40,6 @@
ngOnInit() {
console.log('on init');
- this.sliceStore.query()
- .subscribe(
- (slices: ISlice[]) => {
- console.log(slices);
- this.slices = slices;
- },
- err => {
- console.warn(err);
- }
- );
+ this.data = this.sliceStore.query();
}
}
diff --git a/src/app/index.ts b/src/app/index.ts
index cc6e2bc..2648153 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -1,3 +1,4 @@
+import { XosTableComponent } from './components/tables/table.component';
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpModule} from '@angular/http';
@@ -33,6 +34,7 @@
HelloComponent,
LoginComponent,
LogoutComponent,
+ XosTableComponent,
ProtectedDirective
],
providers: [
diff --git a/src/app/interfaces/xos-components/table.interface.ts b/src/app/interfaces/xos-components/table.interface.ts
new file mode 100644
index 0000000..657c89d
--- /dev/null
+++ b/src/app/interfaces/xos-components/table.interface.ts
@@ -0,0 +1,18 @@
+export interface IXosTableConfigColumn {
+ label: string;
+ prop: string;
+}
+
+export interface IXosTableConfigActionCallback {
+ (item: string): void;
+}
+
+export interface IXosTableConfigAction {
+ label: string;
+ cb: IXosTableConfigActionCallback
+}
+
+export interface IXosTableConfig {
+ columns: IXosTableConfigColumn[];
+ actions?: IXosTableConfigAction[];
+}
\ No newline at end of file