| /* |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you 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 angular from 'angular'; |
| import jssha from 'jssha'; |
| import brUtils from '../utils/general'; |
| import 'angular-multiple-transclusion'; |
| import template from './index.html'; |
| |
| const TEMPLATE_CONTAINER_URL = 'br/template/table/table.html'; |
| const MODULE_NAME = 'brooklyn.components.table'; |
| |
| angular.module(MODULE_NAME, ['angular-multiple-transclusion', brUtils]) |
| .directive('brTable', ['$log', brTableDirective]) |
| .directive('bindHtmlCompile', ['$compile', brBindHtmlCompile]) |
| .filter('deepFilter', ['$filter', '$parse', brDeepFilter]) |
| .run(['$templateCache', brTableRun]); |
| |
| export default MODULE_NAME; |
| |
| /** |
| * BASIC |
| * |
| * <br-table ng-model="data" columns="columns"> |
| * |
| * where for example `data = [ { name: "Babs", age: 20 }, { name: "Bob", age: 21 } ]` |
| * and `columns = [ { field: 'name' }, { header: 'Age', template: '{{ item.age }} years old' } ]` |
| * |
| * |
| * COMPLETE |
| * |
| * <br-table |
| * ng-model="..." column="..." // required, as above |
| * row-ui-state="app" row-ui-state-params="getUiStateParams" // ui-router state to redirect on row click, with function giving parameters |
| * col-width="100" // minimum size in px to require for underlying <table> columns (unless overridden) |
| * > |
| * |
| * Each column map entry may also include: |
| * field, // optional, if supplied it provides a default for header, template, orderBy, and id |
| * header, // required, unless field is specified in which case it provides a default value (with "camelCaseEXAMPLE" rendered as "Camel Case EXAMPLE") |
| * template, templateUrl, // exactly one of these is required, unless field is specified in which case `{{ item[field] }}` is a default value |
| * orderBy: 'name', // a field on the object to use for sorting; if omitted, and field is not set, the column is not sortable |
| * id: 'name', // a unique ID for the column, used for column-specific searching, and set as a class for styling; |
| * this ID is used in regexes so should not contain spaces or regex special characters (`.` or `(`); |
| * if omitted, `field` is used if specified, otherwise a `col-N` identifier is used (and column-specific searches are not offered as suggestions) |
| * tdClass: 'fancy-column', // a string to set as a class on the <td> items in this column; if omitted and `id` is explicit, that is used as a default; failing that no column-specific classes are set |
| * colspan: 3, // number of <table> columns to use for this logical column - useful to control relative widths as the <table> columns are all the same width |
| * width: 100, // width of the column in px; if used with colspan this applies to _one_ column and the colspan-1 others are an additional relative width |
| * hidden: false, // whether column is initially hidden |
| * |
| * |
| * WIDTHS |
| * |
| * The combo of colspan and width allows fine control over column widths, e.g.: |
| * |
| * [ { header: "A", width: 200, colspan: 2 }, { header: "B", colspan: 3 } ] |
| * will set up a table with 5 <table> columns, with A spanning 2 and B spanning 3. |
| * One of A's columns is fixed at 200px; the other 4 columns share equally the remaining width. |
| * So the table's minimum width is 200px, and at that size B will not be visible. |
| * At 300px, there is 100px "remaining" split among the four regular columns, so |
| * A gets 225px (a 200px column plus one regular column) and B gets 75x (three regular columns). |
| * At 600px, the two logical columns - A and B - are equally sized at 300px. |
| * Beyond this, column B is wider. |
| * |
| * If additionally `col-width="100"` is set on the `br-table`, then the table will start |
| * with minimum width 600px (possibly requiring horizontal scrolling to see in a small browser). |
| * Individual columns can be resized by a user subsequently. |
| * |
| * For convenience (and compatibility for tables before colspan support was added) |
| * if no column entries define a colspan, the table layout is auto, |
| * with any explicit `width` being respected and other columns based on content width. |
| * |
| * |
| * SEARCH |
| * |
| * When searching, phrases in double quotes "like this" search for that group of words with no spaces |
| * using angular case-insensitive containment (non-regex). |
| * Any remaining term of the form `key:value` where `key` is one of the column's `id` |
| * will do a regex search for that value in the respective column. |
| * All other terms are searched for as individual words using angular case-insensitive containment (non-regex). |
| * The angular (non-regex) search treats a leading `!` as negation, to search for entries _not_ containing the term. |
| */ |
| export function brTableDirective($log) { |
| return { |
| require: 'ngModel', |
| transclude: true, |
| restrict: 'E', |
| link: link, |
| controller: ['$templateCache', 'brUtilsGeneral', controller], |
| controllerAs: 'ctrl', |
| scope: true, |
| templateUrl: function(element, attrs) { |
| return attrs.templateUrl || TEMPLATE_CONTAINER_URL; |
| } |
| }; |
| |
| function link(scope, element, attrs, ngModelCtrl) { |
| scope.ctrl.rowUiState = attrs.rowUiState; |
| scope.ctrl.rowUiStateParams = scope.$eval(attrs.rowUiStateParams); |
| scope.ctrl.state = { |
| columns: scope.$eval(attrs.columns), |
| sorts: [], |
| search: '', |
| filters: {} |
| }; |
| |
| if (!(scope.ctrl.state.columns instanceof Array)) { |
| throw new Error('Field "columns" in table options must be of type "Array"'); |
| } |
| scope.ctrl.state.columnSpanCount = 0; |
| scope.ctrl.state.columnExplicitWidthCount = 0; |
| scope.ctrl.state.columnExplicitWidthSum = 0; |
| scope.ctrl.tableLayoutFixed = false; |
| scope.ctrl.state.columns.forEach((column, index) => { |
| if (!(column instanceof Object)) { |
| throw new Error(`Column with index "${index}" must be of type "Object"`); |
| } |
| let field = column.field; |
| if (!column.hasOwnProperty('header')) { |
| if (field) { |
| column.header = field.replace(/([a-z])([A-Z])/g, (_, a, A) => a+' '+A).replace(/^([a-z])(.*)/, (_, a, bc) => a.toUpperCase()+bc) |
| } else { |
| throw new Error(`Column with index ${index} does not has the required field "header"`); |
| } |
| } |
| if (!column.hasOwnProperty('template') && !column.hasOwnProperty('templateUrl')) { |
| if (field) { |
| column.template = `{{ item['${field}'] }}`; |
| } else { |
| throw new Error(`Column with index ${index} requires either "template" or "templateUrl" field`); |
| } |
| } |
| if (!column.hasOwnProperty('id')) { |
| if (field) { |
| column.id = field; |
| } else { |
| column.id = 'col-'+index; |
| column.idAutogenerated = true; |
| } |
| } else { |
| column.tdClass = column.tdClass || column.id; |
| } |
| if (!column.hasOwnProperty('orderBy') && field) { |
| column.orderBy = field; |
| } |
| |
| column.hidden = column.hidden || false; |
| |
| column.regex = new RegExp(`(?:\\s|^)${column.id}:(\\S*)(?:\\s|$)`, 'i') |
| |
| if (!column.idAutogenerated) { |
| column.idForTypeahead = column.id; |
| } |
| }); |
| |
| function recomputeSpanCount() { |
| // this should be recomputed when columns are hidden/shown |
| // without this, the "No results" message may be slightly too wide when columns are hidden |
| |
| var columnSpanCount = 0, |
| columnExplicitWidthCount = 0, |
| columnExplicitWidthSum = 0, |
| tableLayoutFixed = false; |
| |
| scope.ctrl.state.columns.forEach((column, index) => { |
| if (column.hidden) return; |
| columnSpanCount += (column.colspan || 1); |
| tableLayoutFixed |= column.colspan; |
| if (column.width) { |
| columnExplicitWidthCount ++; |
| columnExplicitWidthSum += column.width; |
| } |
| }); |
| |
| scope.ctrl.state.columnSpanCount = columnSpanCount; |
| scope.ctrl.state.columnExplicitWidthCount = columnExplicitWidthCount; |
| scope.ctrl.state.columnExplicitWidthSum = columnExplicitWidthSum; |
| scope.ctrl.tableLayoutFixed = tableLayoutFixed; |
| |
| if (attrs.colWidth) { |
| var minWidth = (scope.ctrl.state.columnExplicitWidthSum + |
| (scope.ctrl.state.columnSpanCount - scope.ctrl.state.columnExplicitWidthCount) * attrs.colWidth); |
| if (isNaN(parseFloat(minWidth)) || !isFinite(minWidth)) { |
| // not a valid number in the end: could install units-css library and do unit maths, but not worth it |
| $log.error(`Error computing column widths (got ${scope.ctrl.minWidth}): ensure no values have units`); |
| } else { |
| scope.ctrl.minWidth = minWidth + 'px'; |
| } |
| } |
| } |
| |
| recomputeSpanCount(); |
| |
| scope.hideColumn = (column,) => { |
| column.hidden = !column.hidden; |
| recomputeSpanCount(); |
| }; |
| |
| let sha = new jssha('SHA-512', 'TEXT'); |
| sha.update(scope.ctrl.rowUiState || ''); |
| sha.update(JSON.stringify(scope.ctrl.rowUiStateParams) || ''); |
| sha.update(JSON.stringify(scope.ctrl.state.columns) || ''); |
| let hash = sha.getHash('HEX'); |
| |
| if (sessionStorage) { |
| let state = sessionStorage.getItem(`${MODULE_NAME}.state.${hash}`); |
| if (state !== null) { |
| scope.ctrl.state = Object.assign(scope.ctrl.state, JSON.parse(state)); |
| scope.ctrl.state.columns.forEach(column => column.regex = new RegExp(`(?:\\s|^)${column.id}:(\\S*)(?:\\s|$)`, 'i')); |
| } |
| |
| scope.$watch('ctrl.state', (newValue, oldValue) => { |
| if (!angular.equals(newValue, oldValue)) { |
| sessionStorage.setItem(`${MODULE_NAME}.state.${hash}`, JSON.stringify(newValue)); |
| } |
| }, true); |
| } |
| |
| scope.$watchCollection('ctrl.items', function(value) { |
| ngModelCtrl.$setViewValue(value); |
| ngModelCtrl.$validate(); |
| }); |
| |
| ngModelCtrl.$render = function() { |
| if (!ngModelCtrl.$viewValue) { |
| ngModelCtrl.$viewValue = []; |
| } |
| scope.ctrl.items = ngModelCtrl.$viewValue; |
| }; |
| |
| scope.$applyAsync(() => { |
| element[0].querySelectorAll('th div').forEach(elm => { |
| angular.element(elm).data('initialWidth', elm.offsetWidth); |
| }); |
| element[0].querySelectorAll('span.column-resizer').forEach(elm => { |
| elm.ondragstart = function() { return false; }; |
| elm.addEventListener('mousedown', function(e) { |
| if (e.which === 1) { |
| // left mouse click |
| scope.ctrl.dragStart(e); |
| } |
| }, false); |
| }); |
| }); |
| |
| scope.$watch('ctrl.state.search', (newValue, oldValue) => { |
| if (newValue === oldValue) { |
| return; |
| } |
| let filters = {}; |
| let remaining = newValue; |
| let words = []; |
| // get any phrases in double quotes |
| let qw = /(?:\s|^)"([^"]*)"(?:\s|$)/; |
| var match; |
| while (match=qw.exec(remaining)) { |
| words.push(match[1]); |
| remaining = remaining.replace(qw, ' '); |
| } |
| // now get anything that matches column prefix |
| scope.ctrl.state.columns.forEach(column => { |
| if (column.hidden) { |
| return; |
| } |
| let matches = remaining.match(column.regex); |
| if (matches === null) { |
| return; |
| } |
| filters[column.id] = matches[1]; |
| remaining = remaining.replace(column.regex, ' '); |
| }); |
| // remaining items are split |
| remaining = remaining.trim(); |
| if (remaining.length > 0) { |
| words = words.concat(remaining.split(/\s+/)); |
| } |
| words = words.length==0 ? null : words.length==1 ? words[0] : words; |
| if (Object.keys(filters).length > 0) { |
| if (words) { |
| filters[''] = words; |
| } |
| } |
| scope.ctrl.state.filters = Object.keys(filters).length > 0 ? filters : words; |
| }); |
| } |
| |
| function findAncestor($el, tag) { |
| while ($el[0] && $el[0].tagName.toUpperCase() != tag.toUpperCase()) { |
| $el = $el.parent(); |
| }; |
| return $el; |
| } |
| |
| function controller($templateCache, brUtilsGeneral) { |
| this.getColumnTemplate = (id) => { |
| let column = this.state.columns.find(column => column.id === id); |
| return column.hasOwnProperty('templateUrl') ? $templateCache.get(column.templateUrl) : column.template; |
| }; |
| |
| this.dragStart = (e) => { |
| this.resizerTarget = angular.element(e.target); |
| this.thTarget = findAncestor(this.resizerTarget, 'th'); |
| this.tableTarget = findAncestor(this.thTarget, 'table'); |
| if (!this.tableTarget[0]) throw new Error('Resizer tag hierarchy not as expected; cannot drag'); |
| |
| this.tableWidth = this.tableTarget[0].offsetWidth; |
| if (this.tableTarget[0].style.minWidth != 0) { |
| // if a width is defined, we need to hardcode all column widths |
| // this.tableTarget.find('colgroup').children().forEach( |
| angular.forEach( this.tableTarget.find('thead').find("tr").children(), th => { th.width = th.offsetWidth; } ); |
| angular.forEach( this.tableTarget.find('colgroup').children(), col => { col.style.width = null; } ); |
| this.tableTarget[0].style.minWidth = 0; |
| } |
| this.width = this.thTarget[0].offsetWidth; |
| this.start = e.clientX; |
| |
| document.addEventListener('mouseup', this.dragEnd, false); |
| document.addEventListener('mousemove', this.dragging, false); |
| |
| this.resizerTarget.addClass('dragging'); |
| |
| // Disable highlighting while dragging |
| if (e.stopPropagation) e.stopPropagation(); |
| if (e.preventDefault) e.preventDefault(); |
| }; |
| this.dragging = (e) => { |
| // 23px wide is bare minimum given padding settings |
| // if user goes below this we could give some visual indication the column is being hidden |
| var newWidth = Math.max(this.width - this.start + e.clientX, 23); |
| this.thTarget[0].style['width'] = `${newWidth}px`; |
| this.tableTarget[0].style['width'] = `${this.tableWidth + newWidth - this.width}px`; |
| }; |
| this.dragEnd = (e) => { |
| document.removeEventListener('mouseup', this.dragEnd, false); |
| document.removeEventListener('mousemove', this.dragging, false); |
| this.resizerTarget.removeClass('dragging'); |
| }; |
| |
| this.sortBy = (orderBy) => { |
| let sort = '+'; |
| let currentOrderBy = this.getSortByFrom(orderBy); |
| let currentOrderByIndex = this.state.sorts.indexOf(currentOrderBy); |
| |
| if (currentOrderBy) { |
| let currentSort = this.getSortByDirectionFrom(orderBy); |
| if (currentSort === '-') { |
| this.state.sorts.splice(currentOrderByIndex, 1); |
| return; |
| } |
| if (currentSort === '+') { |
| sort = '-'; |
| } |
| this.state.sorts.splice(currentOrderByIndex, 1, `${sort}${orderBy}`); |
| } else { |
| this.state.sorts.push(`${sort}${orderBy}`); |
| } |
| }; |
| |
| this.getSortByFrom = (orderBy) => { |
| return this.state.sorts.find(sort => sort.substr(1) === orderBy); |
| }; |
| |
| this.getSortByDirectionFrom = (orderBy) => { |
| let sortBy = this.getSortByFrom(orderBy); |
| return sortBy ? sortBy.slice(0, 1) : ''; |
| }; |
| |
| this.suggestionFormatter = (input) => { |
| return brUtilsGeneral.isNonEmpty(input) ? `${input}:` : ''; |
| }; |
| } |
| } |
| |
| export function brBindHtmlCompile($compile) { |
| return { |
| restrict: 'A', |
| link: function (scope, element, attrs) { |
| scope.$watch(function () { |
| return scope.$eval(attrs.bindHtmlCompile); |
| }, function (value) { |
| element.html(value); |
| $compile(element.contents())(scope); |
| }); |
| } |
| }; |
| } |
| |
| export function brDeepFilter($filter, $parse) { |
| return function(input, opts) { |
| if (angular.isString(opts)) { |
| return $filter('filter')(input, opts); |
| } |
| if (angular.isArray(opts)) { |
| opts = { '': opts }; |
| } |
| if (angular.isObject(opts) && Object.keys(opts).length > 0) { |
| return input.filter(item => { |
| return Object.keys(opts).reduce((ret, key) => { |
| if (!ret) return false; |
| if (key == '') { |
| // empty key used for text search |
| let searchList = opts[key]; |
| if (!angular.isArray(searchList)) searchList = [ searchList ]; |
| return searchList.every( word => $filter('filter')([ item ], word).length ); |
| } |
| let value = $parse(key)(item); |
| if (!value) return false; |
| let vv = JSON.stringify(value); |
| if (vv[0]=='"') vv = vv.slice(1, vv.length - 1); |
| return new RegExp(opts[key], 'ig').test(vv); |
| }, true); |
| }); |
| } |
| return input; |
| }; |
| } |
| |
| export function brTableRun($templateCache) { |
| $templateCache.put(TEMPLATE_CONTAINER_URL, template); |
| } |
| |
