Igor Kulikov
9 years ago
21 changed files with 725 additions and 24 deletions
@ -0,0 +1,474 @@ |
|||||
|
/* |
||||
|
* Copyright © 2016-2017 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
|
||||
|
import './entities-table-widget.scss'; |
||||
|
|
||||
|
/* eslint-disable import/no-unresolved, import/default */ |
||||
|
|
||||
|
import entitiesTableWidgetTemplate from './entities-table-widget.tpl.html'; |
||||
|
//import entityDetailsDialogTemplate from './entitiy-details-dialog.tpl.html';
|
||||
|
|
||||
|
/* eslint-enable import/no-unresolved, import/default */ |
||||
|
|
||||
|
import tinycolor from 'tinycolor2'; |
||||
|
import cssjs from '../../../vendor/css.js/css'; |
||||
|
|
||||
|
export default angular.module('thingsboard.widgets.entitiesTableWidget', []) |
||||
|
.directive('tbEntitiesTableWidget', EntitiesTableWidget) |
||||
|
.name; |
||||
|
|
||||
|
/*@ngInject*/ |
||||
|
function EntitiesTableWidget() { |
||||
|
return { |
||||
|
restrict: "E", |
||||
|
scope: true, |
||||
|
bindToController: { |
||||
|
tableId: '=', |
||||
|
ctx: '=' |
||||
|
}, |
||||
|
controller: EntitiesTableWidgetController, |
||||
|
controllerAs: 'vm', |
||||
|
templateUrl: entitiesTableWidgetTemplate |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
/*@ngInject*/ |
||||
|
function EntitiesTableWidgetController($element, $scope, $filter, $mdMedia, $translate, utils, types) { |
||||
|
var vm = this; |
||||
|
|
||||
|
vm.stylesInfo = {}; |
||||
|
vm.contentsInfo = {}; |
||||
|
vm.columnWidth = {}; |
||||
|
|
||||
|
vm.showData = true; |
||||
|
vm.hasData = false; |
||||
|
|
||||
|
vm.entities = []; |
||||
|
vm.entitiesCount = 0; |
||||
|
|
||||
|
vm.datasources = null; |
||||
|
vm.allEntities = null; |
||||
|
|
||||
|
vm.currentEntity = null; |
||||
|
|
||||
|
vm.displayEntityName = true; |
||||
|
vm.displayEntityType = true; |
||||
|
vm.displayActions = false; //TODO: Widget actions
|
||||
|
vm.displayPagination = true; |
||||
|
vm.defaultPageSize = 10; |
||||
|
vm.defaultSortOrder = 'entityName'; |
||||
|
|
||||
|
vm.query = { |
||||
|
order: vm.defaultSortOrder, |
||||
|
limit: vm.defaultPageSize, |
||||
|
page: 1, |
||||
|
search: null |
||||
|
}; |
||||
|
|
||||
|
vm.searchAction = { |
||||
|
name: 'action.search', |
||||
|
show: true, |
||||
|
onAction: function() { |
||||
|
vm.enterFilterMode(); |
||||
|
}, |
||||
|
icon: 'search' |
||||
|
}; |
||||
|
|
||||
|
vm.enterFilterMode = enterFilterMode; |
||||
|
vm.exitFilterMode = exitFilterMode; |
||||
|
vm.onReorder = onReorder; |
||||
|
vm.onPaginate = onPaginate; |
||||
|
vm.onRowClick = onRowClick; |
||||
|
vm.isCurrent = isCurrent; |
||||
|
|
||||
|
vm.cellStyle = cellStyle; |
||||
|
vm.cellContent = cellContent; |
||||
|
|
||||
|
$scope.$watch('vm.ctx', function() { |
||||
|
if (vm.ctx) { |
||||
|
vm.settings = vm.ctx.settings; |
||||
|
vm.widgetConfig = vm.ctx.widgetConfig; |
||||
|
vm.subscription = vm.ctx.defaultSubscription; |
||||
|
vm.datasources = vm.subscription.datasources; |
||||
|
initializeConfig(); |
||||
|
updateDatasources(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
$scope.$watch("vm.query.search", function(newVal, prevVal) { |
||||
|
if (!angular.equals(newVal, prevVal) && vm.query.search != null) { |
||||
|
updateEntities(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
$scope.$on('entities-table-data-updated', function(event, tableId) { |
||||
|
if (vm.tableId == tableId) { |
||||
|
if (vm.subscription) { |
||||
|
updateEntitiesData(vm.subscription.data); |
||||
|
updateEntities(); |
||||
|
$scope.$digest(); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
$scope.$watch(function() { return $mdMedia('gt-xs'); }, function(isGtXs) { |
||||
|
vm.isGtXs = isGtXs; |
||||
|
}); |
||||
|
|
||||
|
$scope.$watch(function() { return $mdMedia('gt-md'); }, function(isGtMd) { |
||||
|
vm.isGtMd = isGtMd; |
||||
|
if (vm.isGtMd) { |
||||
|
vm.limitOptions = [vm.defaultPageSize, vm.defaultPageSize*2, vm.defaultPageSize*3]; |
||||
|
} else { |
||||
|
vm.limitOptions = null; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
function initializeConfig() { |
||||
|
|
||||
|
vm.ctx.widgetActions = [ vm.searchAction ]; |
||||
|
|
||||
|
if (vm.settings.entitiesTitle && vm.settings.entitiesTitle.length) { |
||||
|
var translationId = types.translate.customTranslationsPrefix + vm.settings.entitiesTitle; |
||||
|
var translation = $translate.instant(translationId); |
||||
|
if (translation != translationId) { |
||||
|
vm.entitiesTitle = translation + ''; |
||||
|
} else { |
||||
|
vm.entitiesTitle = vm.settings.entitiesTitle; |
||||
|
} |
||||
|
} else { |
||||
|
vm.entitiesTitle = $translate.instant('entity.entities'); |
||||
|
} |
||||
|
|
||||
|
vm.ctx.widgetTitle = vm.entitiesTitle; |
||||
|
|
||||
|
vm.searchAction.show = angular.isDefined(vm.settings.enableSearch) ? vm.settings.enableSearch : true; |
||||
|
vm.displayEntityName = angular.isDefined(vm.settings.displayEntityName) ? vm.settings.displayEntityName : true; |
||||
|
vm.displayEntityType = angular.isDefined(vm.settings.displayEntityType) ? vm.settings.displayEntityType : true; |
||||
|
vm.displayPagination = angular.isDefined(vm.settings.displayPagination) ? vm.settings.displayPagination : true; |
||||
|
|
||||
|
var pageSize = vm.settings.defaultPageSize; |
||||
|
if (angular.isDefined(pageSize) && Number.isInteger(pageSize) && pageSize > 0) { |
||||
|
vm.defaultPageSize = pageSize; |
||||
|
} |
||||
|
|
||||
|
if (vm.settings.defaultSortOrder && vm.settings.defaultSortOrder.length) { |
||||
|
vm.defaultSortOrder = vm.settings.defaultSortOrder; |
||||
|
} |
||||
|
|
||||
|
vm.query.order = vm.defaultSortOrder; |
||||
|
vm.query.limit = vm.defaultPageSize; |
||||
|
if (vm.isGtMd) { |
||||
|
vm.limitOptions = [vm.defaultPageSize, vm.defaultPageSize*2, vm.defaultPageSize*3]; |
||||
|
} else { |
||||
|
vm.limitOptions = null; |
||||
|
} |
||||
|
|
||||
|
var origColor = vm.widgetConfig.color || 'rgba(0, 0, 0, 0.87)'; |
||||
|
var defaultColor = tinycolor(origColor); |
||||
|
var mdDark = defaultColor.setAlpha(0.87).toRgbString(); |
||||
|
var mdDarkSecondary = defaultColor.setAlpha(0.54).toRgbString(); |
||||
|
var mdDarkDisabled = defaultColor.setAlpha(0.26).toRgbString(); |
||||
|
//var mdDarkIcon = mdDarkSecondary;
|
||||
|
var mdDarkDivider = defaultColor.setAlpha(0.12).toRgbString(); |
||||
|
|
||||
|
var cssString = 'table.md-table th.md-column {\n'+ |
||||
|
'color: ' + mdDarkSecondary + ';\n'+ |
||||
|
'}\n'+ |
||||
|
'table.md-table th.md-column.md-checkbox-column md-checkbox:not(.md-checked) .md-icon {\n'+ |
||||
|
'border-color: ' + mdDarkSecondary + ';\n'+ |
||||
|
'}\n'+ |
||||
|
'table.md-table th.md-column md-icon.md-sort-icon {\n'+ |
||||
|
'color: ' + mdDarkDisabled + ';\n'+ |
||||
|
'}\n'+ |
||||
|
'table.md-table th.md-column.md-active, table.md-table th.md-column.md-active md-icon {\n'+ |
||||
|
'color: ' + mdDark + ';\n'+ |
||||
|
'}\n'+ |
||||
|
'table.md-table td.md-cell {\n'+ |
||||
|
'color: ' + mdDark + ';\n'+ |
||||
|
'border-top: 1px '+mdDarkDivider+' solid;\n'+ |
||||
|
'}\n'+ |
||||
|
'table.md-table td.md-cell.md-checkbox-cell md-checkbox:not(.md-checked) .md-icon {\n'+ |
||||
|
'border-color: ' + mdDarkSecondary + ';\n'+ |
||||
|
'}\n'+ |
||||
|
'table.md-table td.md-cell.md-placeholder {\n'+ |
||||
|
'color: ' + mdDarkDisabled + ';\n'+ |
||||
|
'}\n'+ |
||||
|
'table.md-table td.md-cell md-select > .md-select-value > span.md-select-icon {\n'+ |
||||
|
'color: ' + mdDarkSecondary + ';\n'+ |
||||
|
'}\n'+ |
||||
|
'.md-table-pagination {\n'+ |
||||
|
'color: ' + mdDarkSecondary + ';\n'+ |
||||
|
'border-top: 1px '+mdDarkDivider+' solid;\n'+ |
||||
|
'}\n'+ |
||||
|
'.md-table-pagination .buttons md-icon {\n'+ |
||||
|
'color: ' + mdDarkSecondary + ';\n'+ |
||||
|
'}\n'+ |
||||
|
'.md-table-pagination md-select:not([disabled]):focus .md-select-value {\n'+ |
||||
|
'color: ' + mdDarkSecondary + ';\n'+ |
||||
|
'}'; |
||||
|
|
||||
|
var cssParser = new cssjs(); |
||||
|
cssParser.testMode = false; |
||||
|
var namespace = 'entities-table-' + hashCode(cssString); |
||||
|
cssParser.cssPreviewNamespace = namespace; |
||||
|
cssParser.createStyleElement(namespace, cssString); |
||||
|
$element.addClass(namespace); |
||||
|
|
||||
|
function hashCode(str) { |
||||
|
var hash = 0; |
||||
|
var i, char; |
||||
|
if (str.length === 0) return hash; |
||||
|
for (i = 0; i < str.length; i++) { |
||||
|
char = str.charCodeAt(i); |
||||
|
hash = ((hash << 5) - hash) + char; |
||||
|
hash = hash & hash; |
||||
|
} |
||||
|
return hash; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function enterFilterMode () { |
||||
|
vm.query.search = ''; |
||||
|
vm.ctx.hideTitlePanel = true; |
||||
|
} |
||||
|
|
||||
|
function exitFilterMode () { |
||||
|
vm.query.search = null; |
||||
|
updateEntities(); |
||||
|
vm.ctx.hideTitlePanel = false; |
||||
|
} |
||||
|
|
||||
|
function onReorder () { |
||||
|
updateEntities(); |
||||
|
} |
||||
|
|
||||
|
function onPaginate () { |
||||
|
updateEntities(); |
||||
|
} |
||||
|
|
||||
|
function onRowClick($event, entity) { |
||||
|
if (vm.currentEntity != entity) { |
||||
|
vm.currentEntity = entity; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function isCurrent(entity) { |
||||
|
return (vm.currentEntity && entity && vm.currentEntity.id && entity.id) && |
||||
|
(vm.currentEntity.id.id === entity.id.id); |
||||
|
} |
||||
|
|
||||
|
function updateEntities() { |
||||
|
var result = $filter('orderBy')(vm.allEntities, vm.query.order); |
||||
|
if (vm.query.search != null) { |
||||
|
result = $filter('filter')(result, {$: vm.query.search}); |
||||
|
} |
||||
|
vm.entitiesCount = result.length; |
||||
|
|
||||
|
if (vm.displayPagination) { |
||||
|
var startIndex = vm.query.limit * (vm.query.page - 1); |
||||
|
vm.entities = result.slice(startIndex, startIndex + vm.query.limit); |
||||
|
} else { |
||||
|
vm.entities = result; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function cellStyle(entity, key) { |
||||
|
var style = {}; |
||||
|
if (entity && key) { |
||||
|
var styleInfo = vm.stylesInfo[key.label]; |
||||
|
var value = getEntityValue(entity, key); |
||||
|
if (styleInfo.useCellStyleFunction && styleInfo.cellStyleFunction) { |
||||
|
try { |
||||
|
style = styleInfo.cellStyleFunction(value); |
||||
|
} catch (e) { |
||||
|
style = {}; |
||||
|
} |
||||
|
} else { |
||||
|
style = defaultStyle(key, value); |
||||
|
} |
||||
|
} |
||||
|
if (!style.width) { |
||||
|
var columnWidth = vm.columnWidth[key.label]; |
||||
|
style.width = columnWidth; |
||||
|
} |
||||
|
return style; |
||||
|
} |
||||
|
|
||||
|
function cellContent(entity, key) { |
||||
|
var strContent = ''; |
||||
|
if (entity && key) { |
||||
|
var contentInfo = vm.contentsInfo[key.label]; |
||||
|
var value = getEntityValue(entity, key); |
||||
|
if (contentInfo.useCellContentFunction && contentInfo.cellContentFunction) { |
||||
|
if (angular.isDefined(value)) { |
||||
|
strContent = '' + value; |
||||
|
} |
||||
|
var content = strContent; |
||||
|
try { |
||||
|
content = contentInfo.cellContentFunction(value, entity, $filter); |
||||
|
} catch (e) { |
||||
|
content = strContent; |
||||
|
} |
||||
|
} else { |
||||
|
content = defaultContent(key, value); |
||||
|
} |
||||
|
return content; |
||||
|
} else { |
||||
|
return strContent; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function defaultContent(key, value) { |
||||
|
if (angular.isDefined(value)) { |
||||
|
return value; |
||||
|
} else { |
||||
|
return ''; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function defaultStyle(/*key, value*/) { |
||||
|
return {}; |
||||
|
} |
||||
|
|
||||
|
const getDescendantProp = (obj, path) => ( |
||||
|
path.split('.').reduce((acc, part) => acc && acc[part], obj) |
||||
|
); |
||||
|
|
||||
|
function getEntityValue(entity, key) { |
||||
|
return getDescendantProp(entity, key.name); |
||||
|
} |
||||
|
|
||||
|
function updateEntitiesData(data) { |
||||
|
if (vm.allEntities) { |
||||
|
for (var i=0;i<vm.allEntities.length;i++) { |
||||
|
var entity = vm.allEntities[i]; |
||||
|
for (var a=0;a<vm.dataKeys.length;a++) { |
||||
|
var dataKey = vm.dataKeys[a]; |
||||
|
var index = i * vm.dataKeys.length + a; |
||||
|
var keyData = data[index].data; |
||||
|
if (keyData && keyData.length && keyData[0].length > 1) { |
||||
|
var value = keyData[0][1]; |
||||
|
entity[dataKey.name] = value; |
||||
|
} else { |
||||
|
entity[dataKey.name] = ''; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function updateDatasources() { |
||||
|
|
||||
|
vm.stylesInfo = {}; |
||||
|
vm.contentsInfo = {}; |
||||
|
vm.columnWidth = {}; |
||||
|
vm.dataKeys = []; |
||||
|
vm.allEntities = []; |
||||
|
|
||||
|
var datasource; |
||||
|
var dataKey; |
||||
|
|
||||
|
datasource = vm.datasources[0]; |
||||
|
|
||||
|
vm.ctx.widgetTitle = utils.createLabelFromDatasource(datasource, vm.entitiesTitle); |
||||
|
|
||||
|
for (var d = 0; d < datasource.dataKeys.length; d++ ) { |
||||
|
dataKey = angular.copy(datasource.dataKeys[d]); |
||||
|
if (dataKey.type == types.dataKeyType.function) { |
||||
|
dataKey.name = dataKey.label; |
||||
|
} |
||||
|
vm.dataKeys.push(dataKey); |
||||
|
|
||||
|
var translationId = types.translate.customTranslationsPrefix + dataKey.label; |
||||
|
var translation = $translate.instant(translationId); |
||||
|
if (translation != translationId) { |
||||
|
dataKey.title = translation + ''; |
||||
|
} else { |
||||
|
dataKey.title = dataKey.label; |
||||
|
} |
||||
|
|
||||
|
var keySettings = dataKey.settings; |
||||
|
|
||||
|
var cellStyleFunction = null; |
||||
|
var useCellStyleFunction = false; |
||||
|
|
||||
|
if (keySettings.useCellStyleFunction === true) { |
||||
|
if (angular.isDefined(keySettings.cellStyleFunction) && keySettings.cellStyleFunction.length > 0) { |
||||
|
try { |
||||
|
cellStyleFunction = new Function('value', keySettings.cellStyleFunction); |
||||
|
useCellStyleFunction = true; |
||||
|
} catch (e) { |
||||
|
cellStyleFunction = null; |
||||
|
useCellStyleFunction = false; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
vm.stylesInfo[dataKey.label] = { |
||||
|
useCellStyleFunction: useCellStyleFunction, |
||||
|
cellStyleFunction: cellStyleFunction |
||||
|
}; |
||||
|
|
||||
|
var cellContentFunction = null; |
||||
|
var useCellContentFunction = false; |
||||
|
|
||||
|
if (keySettings.useCellContentFunction === true) { |
||||
|
if (angular.isDefined(keySettings.cellContentFunction) && keySettings.cellContentFunction.length > 0) { |
||||
|
try { |
||||
|
cellContentFunction = new Function('value, entity, filter', keySettings.cellContentFunction); |
||||
|
useCellContentFunction = true; |
||||
|
} catch (e) { |
||||
|
cellContentFunction = null; |
||||
|
useCellContentFunction = false; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
vm.contentsInfo[dataKey.label] = { |
||||
|
useCellContentFunction: useCellContentFunction, |
||||
|
cellContentFunction: cellContentFunction |
||||
|
}; |
||||
|
|
||||
|
var columnWidth = angular.isDefined(keySettings.columnWidth) ? keySettings.columnWidth : '0px'; |
||||
|
vm.columnWidth[dataKey.label] = columnWidth; |
||||
|
} |
||||
|
|
||||
|
for (var i=0;i<vm.datasources.length;i++) { |
||||
|
datasource = vm.datasources[i]; |
||||
|
var entity = { |
||||
|
id: {} |
||||
|
}; |
||||
|
entity.entityName = datasource.entityName; |
||||
|
if (datasource.entityId) { |
||||
|
entity.id.id = datasource.entityId; |
||||
|
} |
||||
|
if (datasource.entityType) { |
||||
|
entity.id.entityType = datasource.entityType; |
||||
|
entity.entityType = $translate.instant(types.entityTypeTranslations[datasource.entityType].type) + ''; |
||||
|
} else { |
||||
|
entity.entityType = ''; |
||||
|
} |
||||
|
for (d = 0; d < vm.dataKeys.length; d++) { |
||||
|
dataKey = vm.dataKeys[d]; |
||||
|
entity[dataKey.name] = ''; |
||||
|
} |
||||
|
vm.allEntities.push(entity); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,58 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2017 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
|
||||
|
.tb-has-timewindow { |
||||
|
.tb-entities-table { |
||||
|
md-toolbar { |
||||
|
min-height: 60px; |
||||
|
max-height: 60px; |
||||
|
&.md-table-toolbar { |
||||
|
.md-toolbar-tools { |
||||
|
max-height: 60px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tb-entities-table { |
||||
|
|
||||
|
md-toolbar { |
||||
|
min-height: 39px; |
||||
|
max-height: 39px; |
||||
|
&.md-table-toolbar { |
||||
|
.md-toolbar-tools { |
||||
|
max-height: 39px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.tb-data-table { |
||||
|
table.md-table, table.md-table.md-row-select { |
||||
|
tbody { |
||||
|
tr { |
||||
|
td { |
||||
|
&.tb-action-cell { |
||||
|
min-width: 36px; |
||||
|
max-width: 36px; |
||||
|
width: 36px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,86 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2017 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<div class="tb-absolute-fill tb-entities-table tb-data-table" layout="column"> |
||||
|
<div ng-show="vm.showData" flex class="tb-absolute-fill" layout="column"> |
||||
|
<md-toolbar class="md-table-toolbar md-default" ng-show="vm.query.search != null"> |
||||
|
<div class="md-toolbar-tools"> |
||||
|
<md-button class="md-icon-button" aria-label="{{ 'action.search' | translate }}"> |
||||
|
<md-icon aria-label="{{ 'action.search' | translate }}" class="material-icons">search</md-icon> |
||||
|
<md-tooltip md-direction="top"> |
||||
|
{{'entity.search' | translate}} |
||||
|
</md-tooltip> |
||||
|
</md-button> |
||||
|
<md-input-container flex> |
||||
|
<label> </label> |
||||
|
<input ng-model="vm.query.search" placeholder="{{'entity.search' | translate}}"/> |
||||
|
</md-input-container> |
||||
|
<md-button class="md-icon-button" aria-label="Close" ng-click="vm.exitFilterMode()"> |
||||
|
<md-icon aria-label="Close" class="material-icons">close</md-icon> |
||||
|
<md-tooltip md-direction="top"> |
||||
|
{{ 'action.close' | translate }} |
||||
|
</md-tooltip> |
||||
|
</md-button> |
||||
|
</div> |
||||
|
</md-toolbar> |
||||
|
<md-table-container flex> |
||||
|
<table md-table> |
||||
|
<thead md-head md-order="vm.query.order" md-on-reorder="vm.onReorder"> |
||||
|
<tr md-row> |
||||
|
<th md-column ng-if="vm.displayEntityName" md-order-by="entityName"><span translate>entity.entity-name</span></th> |
||||
|
<th md-column ng-if="vm.displayEntityType" md-order-by="entityType"><span translate>entity.entity-type</span></th> |
||||
|
<th md-column md-order-by="{{ key.name }}" ng-repeat="key in vm.dataKeys"><span>{{ key.title }}</span></th> |
||||
|
<th md-column ng-if="vm.displayActions"><span> </span></th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody md-body> |
||||
|
<tr ng-show="vm.entities.length" md-row md-select="entity" |
||||
|
md-select-id="id.id" md-auto-select="false" ng-repeat="entity in vm.entities" |
||||
|
ng-click="vm.onRowClick($event, entity)" ng-class="{'tb-current': vm.isCurrent(entity)}"> |
||||
|
<td md-cell flex ng-if="vm.displayEntityName">{{entity.entityName}}</td> |
||||
|
<td md-cell flex ng-if="vm.displayEntityType">{{entity.entityType}}</td> |
||||
|
<td md-cell flex ng-repeat="key in vm.dataKeys" |
||||
|
ng-style="vm.cellStyle(entity, key)" |
||||
|
ng-bind-html="vm.cellContent(entity, key)"> |
||||
|
</td> |
||||
|
<td md-cell ng-if="vm.displayActions" class="tb-action-cell"> |
||||
|
<!--md-button class="md-icon-button" aria-label="{{ 'entity.details' | translate }}" |
||||
|
ng-click="vm.openEntityDetails($event, entity)"> |
||||
|
<md-icon aria-label="{{ 'entity.details' | translate }}" class="material-icons">more_horiz</md-icon> |
||||
|
<md-tooltip md-direction="top"> |
||||
|
{{ 'entity.details' | translate }} |
||||
|
</md-tooltip> |
||||
|
</md-button--> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
<md-divider></md-divider> |
||||
|
<span ng-show="!vm.entities.length" |
||||
|
layout-align="center center" |
||||
|
class="no-data-found" translate>entity.no-entities-prompt</span> |
||||
|
</md-table-container> |
||||
|
<md-table-pagination ng-if="vm.displayPagination" md-boundary-links md-limit="vm.query.limit" md-limit-options="vm.limitOptions" |
||||
|
md-page="vm.query.page" md-total="{{vm.entitiesCount}}" |
||||
|
md-on-paginate="vm.onPaginate" md-page-select="vm.isGtMd"> |
||||
|
</md-table-pagination> |
||||
|
</div> |
||||
|
<span ng-show="!vm.showData" |
||||
|
layout-align="center center" |
||||
|
style="text-transform: uppercase; display: flex;" |
||||
|
class="tb-absolute-fill" translate>entity.no-data</span> |
||||
|
</div> |
||||
Loading…
Reference in new issue