Created first CRUD view
Change-Id: I3e7f3f36896921cce671c6a53e0155de9165eeb3
diff --git a/src/app/core/index.ts b/src/app/core/index.ts
index d0875b6..ee73f99 100644
--- a/src/app/core/index.ts
+++ b/src/app/core/index.ts
@@ -3,6 +3,7 @@
import {xosNav} from './nav/nav';
import routesConfig from './routes';
import {xosLogin} from './login/login';
+import {xosTable} from './table/table';
export const xosCore = 'xosCore';
@@ -12,4 +13,5 @@
.component('xosHeader', xosHeader)
.component('xosFooter', xosFooter)
.component('xosNav', xosNav)
- .component('xosLogin', xosLogin);
+ .component('xosLogin', xosLogin)
+ .component('xosTable', xosTable);
diff --git a/src/app/core/login/login.ts b/src/app/core/login/login.ts
index af46619..51dc7c9 100644
--- a/src/app/core/login/login.ts
+++ b/src/app/core/login/login.ts
@@ -16,8 +16,7 @@
password: password
})
.then(res => {
- console.log(res);
- this.$state.go('app');
+ this.$state.go('xos.dashboard');
})
.catch(e => console.error);
}
diff --git a/src/app/core/nav/nav.ts b/src/app/core/nav/nav.ts
index d90df10..82d9d64 100644
--- a/src/app/core/nav/nav.ts
+++ b/src/app/core/nav/nav.ts
@@ -1,6 +1,6 @@
import './nav.scss';
-interface INavItem {
+export interface INavItem {
label: string;
state: string;
}
diff --git a/src/app/core/table/table.html b/src/app/core/table/table.html
new file mode 100644
index 0000000..58a46e0
--- /dev/null
+++ b/src/app/core/table/table.html
@@ -0,0 +1,101 @@
+<!--<div ng-show="vm.data.length > 0 && vm.loader == false">-->
+ <div class="row" ng-if="vm.config.filter == 'fulltext'">
+ <div class="col-xs-12">
+ <input
+ class="form-control"
+ placeholder="Type to search.."
+ type="text"
+ ng-model="vm.query"/>
+ </div>
+ </div>
+ <table ng-class="vm.classes">
+ <thead>
+ <tr>
+ <th ng-repeat="col in vm.columns">
+ {{col.label}}
+ <span ng-if="vm.config.order">
+ <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = false">
+ <i class="glyphicon glyphicon-chevron-up"></i>
+ </a>
+ <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = true">
+ <i class="glyphicon glyphicon-chevron-down"></i>
+ </a>
+ </span>
+ </th>
+ <th ng-if="vm.config.actions">Actions:</th>
+ </tr>
+ </thead>
+ <tbody ng-if="vm.config.filter == 'field'">
+ <tr>
+ <td ng-repeat="col in vm.columns">
+ <input
+ ng-if="col.type !== 'boolean' && col.type !== 'array' && col.type !== 'object' && col.type !== 'custom'"
+ class="form-control"
+ placeholder="Type to search by {{col.label}}"
+ type="text"
+ ng-model="vm.query[col.prop]"/>
+ <select
+ ng-if="col.type === 'boolean'"
+ class="form-control"
+ ng-model="vm.query[col.prop]">
+ <option value="">-</option>
+ <option value="true">True</option>
+ <option value="false">False</option>
+ </select>
+ </td>
+ <td ng-if="vm.config.actions"></td>
+ </tr>
+ </tbody>
+ <tbody>
+ <tr ng-repeat="item in vm.data | filter:vm.query | orderBy:vm.orderBy:vm.reverse track by $index">
+ <td ng-repeat="col in vm.columns">
+ <span ng-if="!col.type || col.type === 'text'">{{item[col.prop]}}</span>
+ <span ng-if="col.type === 'boolean'">
+ <i class="glyphicon"
+ ng-class="{'glyphicon-ok': item[col.prop], 'glyphicon-remove': !item[col.prop]}">
+ </i>
+ </span>
+ <span ng-if="col.type === 'date'">
+ {{item[col.prop] | date:'H:mm MMM d, yyyy'}}
+ </span>
+ <span ng-if="col.type === 'array'">
+ {{item[col.prop] | arrayToList}}
+ </span>
+ <span ng-if="col.type === 'object'">
+ <dl class="dl-horizontal">
+ <span ng-repeat="(k,v) in item[col.prop]">
+ <dt>{{k}}</dt>
+ <dd>{{v}}</dd>
+ </span>
+ </dl>
+ </span>
+ <span ng-if="col.type === 'custom'">
+ {{col.formatter(item)}}
+ </span>
+ <span ng-if="col.type === 'icon'">
+ <i class="glyphicon glyphicon-{{col.formatter(item)}}">
+ </i>
+ </span>
+ </td>
+ <td ng-if="vm.config.actions">
+ <a href=""
+ ng-repeat="action in vm.config.actions"
+ ng-click="action.cb(item)"
+ title="{{action.label}}">
+ <i
+ class="glyphicon glyphicon-{{action.icon}}"
+ style="color: {{action.color}};"></i>
+ </a>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+<!--</div>-->
+<!--<div ng-show="(vm.data.length == 0 || !vm.data) && vm.loader == false">-->
+ <!--<xos-alert config="{type: 'info'}">-->
+ <!--No data to show.-->
+ <!--</xos-alert>-->
+<!--</div>-->
+<!--<div ng-show="vm.loader == true">-->
+ <!--<div class="loader"></div>-->
+<!--</div>-->
\ No newline at end of file
diff --git a/src/app/core/table/table.ts b/src/app/core/table/table.ts
new file mode 100644
index 0000000..43360c6
--- /dev/null
+++ b/src/app/core/table/table.ts
@@ -0,0 +1,88 @@
+// TODO fininsh to import all methods from https://github.com/opencord/ng-xos-lib/blob/master/src/ui_components/dumbComponents/table/table.component.js
+// TODO import tests
+
+import * as _ from 'lodash';
+
+interface IXosTableCgfOrder {
+ reverse: boolean;
+ field: string;
+}
+
+export interface IXosTableCfg {
+ columns: any[];
+ order: IXosTableCgfOrder; // | boolean;
+}
+
+class TableCtrl {
+ $inject = ['$onInit'];
+
+ public columns: any[];
+ public orderBy: string;
+ public reverse: boolean;
+
+ private data: any[];
+ private config: IXosTableCfg;
+
+
+ $onInit() {
+ if (!this.config) {
+ throw new Error('[xosTable] Please provide a configuration via the "config" attribute');
+ }
+
+ if (!this.config.columns) {
+ throw new Error('[xosTable] Please provide a columns list in the configuration');
+ }
+
+ // handle default ordering
+ if (this.config.order && angular.isObject(this.config.order)){
+ this.reverse = this.config.order.reverse || false;
+ this.orderBy = this.config.order.field || 'id';
+ }
+
+ // if columns with type 'custom' are provided
+ // check that a custom formatte3 is provided too
+ let customCols = _.filter(this.config.columns, {type: 'custom'});
+ if (angular.isArray(customCols) && customCols.length > 0) {
+ _.forEach(customCols, (col) => {
+ if (!col.formatter || !angular.isFunction(col.formatter)) {
+ throw new Error('[xosTable] You have provided a custom field type, a formatter function should provided too.');
+ }
+ });
+ }
+
+ // if columns with type 'icon' are provided
+ // check that a custom formatte3 is provided too
+ let iconCols = _.filter(this.config.columns, {type: 'icon'});
+ if (angular.isArray(iconCols) && iconCols.length > 0) {
+ _.forEach(iconCols, (col) => {
+ if (!col.formatter || !angular.isFunction(col.formatter)) {
+ throw new Error('[xosTable] You have provided an icon field type, a formatter function should provided too.');
+ }
+ });
+ }
+
+ // if a link property is passed,
+ // it should be a function
+ let linkedColumns = _.filter(this.config.columns, col => angular.isDefined(col.link));
+ if (angular.isArray(linkedColumns) && linkedColumns.length > 0) {
+ _.forEach(linkedColumns, (col) => {
+ if (!angular.isFunction(col.link)) {
+ throw new Error('[xosTable] The link property should be a function.');
+ }
+ });
+ }
+
+ this.columns = this.config.columns;
+
+ }
+}
+
+export const xosTable: angular.IComponentOptions = {
+ template: require('./table.html'),
+ controllerAs: 'vm',
+ controller: TableCtrl,
+ bindings: {
+ data: '=',
+ config: '='
+ }
+};