Repository: ignite Updated Branches: refs/heads/master cca10d0c5 -> c73894873
IGNITE-9509 Web Console: Refactored all ui-grid tables to single facade. Project: http://git-wip-us.apache.org/repos/asf/ignite/repo Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/c7389487 Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/c7389487 Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/c7389487 Branch: refs/heads/master Commit: c73894873d352ff5a520f3ac3a4075cf5aabc34d Parents: cca10d0 Author: Dmitriy Shabalin <[email protected]> Authored: Wed Sep 12 15:29:24 2018 +0700 Committer: Alexey Kuznetsov <[email protected]> Committed: Wed Sep 12 15:29:24 2018 +0700 ---------------------------------------------------------------------- .../components/bs-select-menu/strip.filter.js | 2 +- .../app/components/bs-select-menu/style.scss | 4 +- .../expose-ignite-form-field-control/index.js | 23 ---- .../app/components/grid-export/component.js | 7 +- .../components/grid-showing-rows/component.js | 2 +- .../components/grid-showing-rows/controller.js | 2 +- .../app/components/ignite-status/index.js | 22 +++ .../app/components/ignite-status/style.scss | 27 ++++ .../list-of-registered-users/controller.js | 2 +- .../list-of-registered-users/template.tpl.pug | 18 ++- .../components/pc-items-table/template.pug | 3 +- .../queries-notebooks-list/template.tpl.pug | 1 - .../app/components/ui-grid-filters/directive.js | 3 +- .../app/components/ui-grid/component.js | 10 +- .../app/components/ui-grid/controller.js | 136 +++++++++++++++---- .../app/components/ui-grid/decorator.js | 38 ++++++ .../frontend/app/components/ui-grid/index.js | 4 +- .../frontend/app/components/ui-grid/style.scss | 69 ++++++++-- .../app/components/ui-grid/template.pug | 30 +++- 19 files changed, 322 insertions(+), 81 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ignite/blob/c7389487/modules/web-console/frontend/app/components/bs-select-menu/strip.filter.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/bs-select-menu/strip.filter.js b/modules/web-console/frontend/app/components/bs-select-menu/strip.filter.js index 4dbe58b..f2a18e4 100644 --- a/modules/web-console/frontend/app/components/bs-select-menu/strip.filter.js +++ b/modules/web-console/frontend/app/components/bs-select-menu/strip.filter.js @@ -17,6 +17,6 @@ export default function() { return function(val) { - return val.replace(/(<\/?\w+>)/igm, ''); + return val ? val.replace(/(<\/?\w+>)/igm, '') : ''; }; } http://git-wip-us.apache.org/repos/asf/ignite/blob/c7389487/modules/web-console/frontend/app/components/bs-select-menu/style.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/bs-select-menu/style.scss b/modules/web-console/frontend/app/components/bs-select-menu/style.scss index bfa0063..ac3991b 100644 --- a/modules/web-console/frontend/app/components/bs-select-menu/style.scss +++ b/modules/web-console/frontend/app/components/bs-select-menu/style.scss @@ -48,9 +48,8 @@ } .bssm-item-text { - overflow: hidden; + overflow: visible; white-space: nowrap; - text-overflow: ellipsis; } &>li { @@ -63,6 +62,7 @@ padding-bottom: 9px; background-color: transparent; border-radius: 0; + padding-right: 30px; &:hover { background-color: #eeeeee; http://git-wip-us.apache.org/repos/asf/ignite/blob/c7389487/modules/web-console/frontend/app/components/expose-ignite-form-field-control/index.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/expose-ignite-form-field-control/index.js b/modules/web-console/frontend/app/components/expose-ignite-form-field-control/index.js deleted file mode 100644 index 9a22478..0000000 --- a/modules/web-console/frontend/app/components/expose-ignite-form-field-control/index.js +++ /dev/null @@ -1,23 +0,0 @@ -/* - * 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 {igniteFormField, exposeIgniteFormFieldControl} from './directives'; - -export default angular -.module('expose-ignite-form-field-control', []) -.directive('exposeIgniteFormFieldControl', exposeIgniteFormFieldControl); http://git-wip-us.apache.org/repos/asf/ignite/blob/c7389487/modules/web-console/frontend/app/components/grid-export/component.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/grid-export/component.js b/modules/web-console/frontend/app/components/grid-export/component.js index d312959..d8e9232 100644 --- a/modules/web-console/frontend/app/components/grid-export/component.js +++ b/modules/web-console/frontend/app/components/grid-export/component.js @@ -58,10 +58,13 @@ export default { const csvContent = this.uiGridExporterService.formatAsCsv(exportColumnHeaders, data, this.CSV.getSeparator()); - this.uiGridExporterService.downloadFile(this.gridApi.grid.options.exporterCsvFilename, csvContent, this.gridApi.grid.options.exporterOlderExcelCompatibility); + const csvFileName = this.fileName || 'export.csv'; + + this.uiGridExporterService.downloadFile(csvFileName, csvContent, this.gridApi.grid.options.exporterOlderExcelCompatibility); } }, bindings: { - gridApi: '<' + gridApi: '<', + fileName: '<' } }; http://git-wip-us.apache.org/repos/asf/ignite/blob/c7389487/modules/web-console/frontend/app/components/grid-showing-rows/component.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/grid-showing-rows/component.js b/modules/web-console/frontend/app/components/grid-showing-rows/component.js index 93fa1b1..19de9af 100644 --- a/modules/web-console/frontend/app/components/grid-showing-rows/component.js +++ b/modules/web-console/frontend/app/components/grid-showing-rows/component.js @@ -20,7 +20,7 @@ import controller from './controller.js'; export default { template: ` - <i>Showing: {{ $ctrl.count }} rows</i> + <i ng-pluralize count="$ctrl.count" when="{'one': 'Showing: 1 row', 'other': 'Showing: {} rows'}"></i> `, controller, bindings: { http://git-wip-us.apache.org/repos/asf/ignite/blob/c7389487/modules/web-console/frontend/app/components/grid-showing-rows/controller.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/grid-showing-rows/controller.js b/modules/web-console/frontend/app/components/grid-showing-rows/controller.js index cb5b496..67c407c 100644 --- a/modules/web-console/frontend/app/components/grid-showing-rows/controller.js +++ b/modules/web-console/frontend/app/components/grid-showing-rows/controller.js @@ -42,6 +42,6 @@ export default class { return; } - this.count = _.sumBy(this.gridApi.grid.rows, 'visible'); + this.count = _.sumBy(this.gridApi.grid.rows, (row) => Number(row.visible)); } } http://git-wip-us.apache.org/repos/asf/ignite/blob/c7389487/modules/web-console/frontend/app/components/ignite-status/index.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ignite-status/index.js b/modules/web-console/frontend/app/components/ignite-status/index.js new file mode 100644 index 0000000..a8520bc --- /dev/null +++ b/modules/web-console/frontend/app/components/ignite-status/index.js @@ -0,0 +1,22 @@ +/* + * 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 './style.scss'; + +export default angular + .module('ignite-console.ignite-status', []); http://git-wip-us.apache.org/repos/asf/ignite/blob/c7389487/modules/web-console/frontend/app/components/ignite-status/style.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ignite-status/style.scss b/modules/web-console/frontend/app/components/ignite-status/style.scss new file mode 100644 index 0000000..d2877fc --- /dev/null +++ b/modules/web-console/frontend/app/components/ignite-status/style.scss @@ -0,0 +1,27 @@ +/* + * 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 "../../../public/stylesheets/variables"; + +// Statuses coloring +.ignite-status__active { + color: $ignite-status-active !important; +} + +.ignite-status__inactive { + color: $ignite-status-inactive; +} http://git-wip-us.apache.org/repos/asf/ignite/blob/c7389487/modules/web-console/frontend/app/components/list-of-registered-users/controller.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/list-of-registered-users/controller.js b/modules/web-console/frontend/app/components/list-of-registered-users/controller.js index 53a5521..f8b2797 100644 --- a/modules/web-console/frontend/app/components/list-of-registered-users/controller.js +++ b/modules/web-console/frontend/app/components/list-of-registered-users/controller.js @@ -210,7 +210,7 @@ export default class IgniteListOfRegisteredUsersCtrl { const sdt = $ctrl.params.startDate; const edt = $ctrl.params.endDate; - $ctrl.gridOptions.exporterCsvFilename = `web_console_users_${dtFilter(sdt, 'yyyy_MM')}.csv`; + $ctrl.exporterCsvFilename = `web_console_users_${dtFilter(sdt, 'yyyy_MM')}.csv`; const startDate = Date.UTC(sdt.getFullYear(), sdt.getMonth(), 1); const endDate = Date.UTC(edt.getFullYear(), edt.getMonth() + 1, 1); http://git-wip-us.apache.org/repos/asf/ignite/blob/c7389487/modules/web-console/frontend/app/components/list-of-registered-users/template.tpl.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/list-of-registered-users/template.tpl.pug b/modules/web-console/frontend/app/components/list-of-registered-users/template.tpl.pug index 115ab62..d32b64d 100644 --- a/modules/web-console/frontend/app/components/list-of-registered-users/template.tpl.pug +++ b/modules/web-console/frontend/app/components/list-of-registered-users/template.tpl.pug @@ -17,15 +17,15 @@ include /app/helpers/jade/mixins ul.tabs.tabs--blue - li(role='presentation' ng-class='{ active: $ctrl.groupBy === "user" }') - a(ng-click='$ctrl.groupByUser()') + li(role='presentation' ng-class='{ active: $ctrl.groupBy === "user" }') + a(ng-click='$ctrl.groupByUser()') span Users span.badge.badge--blue(ng-hide='$ctrl.groupBy === "user"') | {{ $ctrl.gridOptions.data.length }} span.badge.badge--blue(ng-show='$ctrl.groupBy === "user"') | {{ $ctrl.filteredRows.length }} li(role='presentation' ng-class='{ active: $ctrl.groupBy === "company" }') - a(ng-click='$ctrl.groupByCompany()') + a(ng-click='$ctrl.groupByCompany()') span Companies span.badge.badge--blue {{ $ctrl.companies.length }} li(role='presentation' ng-class='{ active: $ctrl.groupBy === "country" }') @@ -57,7 +57,7 @@ ul.tabs.tabs--blue +form-field__datepicker({ label: 'Period: from', model: '$ctrl.params.startDate', - name: '"startDate"', + name: '"startDate"', maxdate: '$ctrl.params.endDate' }) .form-field--inline @@ -68,13 +68,19 @@ ul.tabs.tabs--blue mindate: '$ctrl.params.startDate' }) + grid-export(file-name='$ctrl.exporterCsvFilename' grid-api='$ctrl.gridApi') + +ignite-form-field-bsdropdown({ label: 'Actions', model: '$ctrl.action', name: 'action', disabled: '!$ctrl.selected.length', - required: false, options: '$ctrl.actionOptions' }) - .grid.ui-grid--ignite.ui-grid-disabled-group-selection(ui-grid='$ctrl.gridOptions' ui-grid-resize-columns ui-grid-selection ui-grid-exporter ui-grid-pinning ui-grid-grouping ui-grid-hovering) + .ignite-grid-table + .grid.ui-grid--ignite.ui-grid-disabled-group-selection(ui-grid='$ctrl.gridOptions' ui-grid-resize-columns ui-grid-selection ui-grid-exporter ui-grid-pinning ui-grid-grouping ui-grid-hovering) + + grid-no-data(grid-api='$ctrl.gridApi') + grid-no-data-filtered + | Nothing to display. Check your filters. http://git-wip-us.apache.org/repos/asf/ignite/blob/c7389487/modules/web-console/frontend/app/components/page-configure/components/pc-items-table/template.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-configure/components/pc-items-table/template.pug b/modules/web-console/frontend/app/components/page-configure/components/pc-items-table/template.pug index dbc7202..75c683f 100644 --- a/modules/web-console/frontend/app/components/page-configure/components/pc-items-table/template.pug +++ b/modules/web-console/frontend/app/components/page-configure/components/pc-items-table/template.pug @@ -30,7 +30,6 @@ include /app/helpers/jade/mixins label: 'Actions', name: 'action', disabled: '!$ctrl.gridAPI.selection.getSelectedCount()', - required: false, options: '$ctrl.actionsMenu' }) @@ -44,4 +43,4 @@ include /app/helpers/jade/mixins ) div(ng-transclude='footerSlot' ng-hide='$ctrl.showFilterNotification') - footer-slot(ng-if='$ctrl.showFilterNotification' style='font-style:italic') Nothing to display. Check your filters. \ No newline at end of file + footer-slot(ng-if='$ctrl.showFilterNotification' style='font-style:italic') Nothing to display. Check your filters. http://git-wip-us.apache.org/repos/asf/ignite/blob/c7389487/modules/web-console/frontend/app/components/page-queries/components/queries-notebooks-list/template.tpl.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-queries/components/queries-notebooks-list/template.tpl.pug b/modules/web-console/frontend/app/components/page-queries/components/queries-notebooks-list/template.tpl.pug index b5c5a7b..bbf6df7 100644 --- a/modules/web-console/frontend/app/components/page-queries/components/queries-notebooks-list/template.tpl.pug +++ b/modules/web-console/frontend/app/components/page-queries/components/queries-notebooks-list/template.tpl.pug @@ -37,7 +37,6 @@ page-queries-slot(slot-name="'queriesButtons'" ng-if="!$root.IgniteDemoMode") model: '$ctrl.action', name: 'action', disabled: '$ctrl.gridApi.selection.legacyGetSelectedRows().length === 0', - required: false, options: '$ctrl.actionOptions' }) http://git-wip-us.apache.org/repos/asf/ignite/blob/c7389487/modules/web-console/frontend/app/components/ui-grid-filters/directive.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ui-grid-filters/directive.js b/modules/web-console/frontend/app/components/ui-grid-filters/directive.js index c9b84af..e22530b 100644 --- a/modules/web-console/frontend/app/components/ui-grid-filters/directive.js +++ b/modules/web-console/frontend/app/components/ui-grid-filters/directive.js @@ -27,7 +27,8 @@ export default function uiGridFilters(uiGridConstants) { return; const applyMultiselectFilter = (cd) => { - cd.headerCellTemplate = template; + if (!cd.headerCellTemplate) + cd.headerCellTemplate = template; cd.filter = { type: uiGridConstants.filter.SELECT, http://git-wip-us.apache.org/repos/asf/ignite/blob/c7389487/modules/web-console/frontend/app/components/ui-grid/component.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ui-grid/component.js b/modules/web-console/frontend/app/components/ui-grid/component.js index 4c8a49f..f0c3b06 100644 --- a/modules/web-console/frontend/app/components/ui-grid/component.js +++ b/modules/web-console/frontend/app/components/ui-grid/component.js @@ -24,13 +24,21 @@ export default { controller, bindings: { gridApi: '=?', + gridTreeView: '<?', + gridGrouping: '<?', + gridThin: '<?', + gridHeight: '<?', + tabName: '<?', + tableTitle: '<?', // Input Events. items: '<', columnDefs: '<', - categories: '<', + categories: '<?', oneWaySelection: '<?', rowIdentityKey: '@?', + selectedRows: '<?', + selectedRowsId: '<?', // Output events. onSelectionChange: '&?' http://git-wip-us.apache.org/repos/asf/ignite/blob/c7389487/modules/web-console/frontend/app/components/ui-grid/controller.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ui-grid/controller.js b/modules/web-console/frontend/app/components/ui-grid/controller.js index 813bacb..a640604 100644 --- a/modules/web-console/frontend/app/components/ui-grid/controller.js +++ b/modules/web-console/frontend/app/components/ui-grid/controller.js @@ -23,6 +23,12 @@ export default class IgniteUiGrid { gridApi; /** @type */ + gridThin; + + /** @type */ + gridHeight; + + /** @type */ items; /** @type */ @@ -34,44 +40,72 @@ export default class IgniteUiGrid { /** @type */ onSelectionChange; - static $inject = ['$scope', '$element', 'gridUtil']; + /** @type */ + selectedRows; + + /** @type */ + selectedRowsId; + + /** @type */ + _selected; + + static $inject = ['$scope', '$element', '$timeout', 'gridUtil']; /** * @param {ng.IScope} $scope */ - constructor($scope, $element, gridUtil) { + constructor($scope, $element, $timeout, gridUtil) { this.$scope = $scope; this.$element = $element; + this.$timeout = $timeout; this.gridUtil = gridUtil; - this.selectedRows = []; this.rowIdentityKey = '_id'; + + this.rowHeight = 48; + this.headerRowHeight = 70; } $onInit() { this.SCROLLBAR_WIDTH = this.gridUtil.getScrollbarWidth(); + if (this.gridThin) { + this.rowHeight = 36; + this.headerRowHeight = 48; + } + this.grid = { data: this.items, columnDefs: this.columnDefs, categories: this.categories, + rowHeight: this.rowHeight, + headerRowHeight: this.headerRowHeight, columnVirtualizationThreshold: 30, - rowHeight: 48, - headerRowHeight: 70, enableColumnMenus: false, enableFullRowSelection: true, enableFiltering: true, enableRowHashing: false, fastWatch: true, showTreeExpandNoChildren: false, - multiSelect: true, - selectionRowHeaderWidth: 30, - exporterCsvFilename: `${_.camelCase([this.tabName, this.tableTitle])}.csv`, + modifierKeysToMultiSelect: true, + selectionRowHeaderWidth: 52, + exporterCsvColumnSeparator: ';', onRegisterApi: (api) => { this.gridApi = api; api.core.on.rowsVisibleChanged(this.$scope, () => { this.adjustHeight(); + + // Without property existence check non-set selectedRows or selectedRowsId + // binding might cause unwanted behavior, + // like unchecking rows during any items change, + // even if nothing really changed. + if (this._selected && this._selected.length && this.onSelectionChange) { + this.applyIncomingSelectionRows(this._selected); + + // Change selected rows if filter was changed. + this.onRowsSelectionChange([]); + } }); if (this.onSelectionChange) { @@ -83,6 +117,14 @@ export default class IgniteUiGrid { this.onRowsSelectionChange(rows, e); }); } + + api.core.on.filterChanged(this.$scope, (column) => { + this.onFilterChange(column); + }); + + this.$timeout(() => { + if (this.selectedRowsId) this.applyIncomingSelectionRowsId(this.selectedRowsId); + }); } }; @@ -94,44 +136,82 @@ export default class IgniteUiGrid { const hasChanged = (binding) => binding in changes && changes[binding].currentValue !== changes[binding].previousValue; - if (hasChanged('items') && this.grid) { + if (hasChanged('items') && this.grid) this.grid.data = changes.items.currentValue; - this.gridApi.grid.modifyRows(this.grid.data); - this.adjustHeight(); + if (hasChanged('selectedRows') && this.grid && this.grid.data && this.onSelectionChange) + this.applyIncomingSelectionRows(changes.selectedRows.currentValue); - if (this.onSelectionChange) - this.applyIncomingSelection(this.selectedRows); - } + if (hasChanged('selectedRowsId') && this.grid && this.grid.data) + this.applyIncomingSelectionRowsId(changes.selectedRowsId.currentValue); + + if (hasChanged('gridHeight') && this.grid) + this.adjustHeight(); } - applyIncomingSelection(selected = []) { + applyIncomingSelectionRows = (selected = []) => { this.gridApi.selection.clearSelectedRows({ ignore: true }); - const rows = this.grid.data.filter((r) => - selected.map((row) => - row[this.rowIdentityKey]).includes(r[this.rowIdentityKey])); + const visibleRows = this.gridApi.core.getVisibleRows(this.gridApi.grid) + .map(({ entity }) => entity); + + const rows = visibleRows.filter((r) => + selected.map((row) => row[this.rowIdentityKey]).includes(r[this.rowIdentityKey])); rows.forEach((r) => { this.gridApi.selection.selectRow(r, { ignore: true }); }); - } + }; + + applyIncomingSelectionRowsId = (selected = []) => { + if (this.onSelectionChange) { + this.gridApi.selection.clearSelectedRows({ ignore: true }); + + const visibleRows = this.gridApi.core.getVisibleRows(this.gridApi.grid) + .map(({ entity }) => entity); + + const rows = visibleRows.filter((r) => + selected.includes(r[this.rowIdentityKey])); + + rows.forEach((r) => { + this.gridApi.selection.selectRow(r, { ignore: true }); + }); + } + }; onRowsSelectionChange = debounce((rows, e = {}) => { - if (e.ignore) return; - this.selectedRows = this.gridApi.selection.legacyGetSelectedRows(); + if (e.ignore) + return; + + this._selected = this.gridApi.selection.legacyGetSelectedRows(); if (this.onSelectionChange) - this.onSelectionChange({ $event: this.selectedRows }); + this.onSelectionChange({ $event: this._selected }); + }); + + onFilterChange = debounce((column) => { + if (!this.gridApi.selection) + return; + + if (this.selectedRows && this.onSelectionChange) + this.applyIncomingSelectionRows(this.selectedRows); + + if (this.selectedRowsId) + this.applyIncomingSelectionRowsId(this.selectedRowsId); }); adjustHeight() { - const maxRowsToShow = this.maxRowsToShow || 5; - const headerBorder = 1; - const visibleRows = this.gridApi.core.getVisibleRows().length; - const header = this.grid.headerRowHeight + headerBorder; - const optionalScroll = (visibleRows ? this.gridUtil.getScrollbarWidth() : 0); - const height = Math.min(visibleRows, maxRowsToShow) * this.grid.rowHeight + header + optionalScroll; + let height = this.gridHeight; + + if (!height) { + const maxRowsToShow = this.maxRowsToShow || 5; + const headerBorder = 1; + const visibleRows = this.gridApi.core.getVisibleRows().length; + const header = this.grid.headerRowHeight + headerBorder; + const optionalScroll = (visibleRows ? this.gridUtil.getScrollbarWidth() : 0); + + height = Math.min(visibleRows, maxRowsToShow) * this.grid.rowHeight + header + optionalScroll; + } this.gridApi.grid.element.css('height', height + 'px'); this.gridApi.core.handleWindowResize(); http://git-wip-us.apache.org/repos/asf/ignite/blob/c7389487/modules/web-console/frontend/app/components/ui-grid/decorator.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ui-grid/decorator.js b/modules/web-console/frontend/app/components/ui-grid/decorator.js new file mode 100644 index 0000000..a82f702 --- /dev/null +++ b/modules/web-console/frontend/app/components/ui-grid/decorator.js @@ -0,0 +1,38 @@ +/* + * 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. + */ + +export default ['$delegate', 'uiGridSelectionService', ($delegate, uiGridSelectionService) => { + $delegate[0].require = ['^uiGrid', '?^igniteGridTable']; + $delegate[0].compile = () => ($scope, $el, $attr, [uiGridCtrl, igniteGridTable]) => { + const self = uiGridCtrl.grid; + + $delegate[0].link($scope, $el, $attr, uiGridCtrl); + + const mySelectButtonClick = (row, evt) => { + evt.stopPropagation(); + + if (evt.shiftKey) + uiGridSelectionService.shiftSelect(self, row, evt, self.options.multiSelect); + else + uiGridSelectionService.toggleRowSelection(self, row, evt, self.options.multiSelect, self.options.noUnselect); + }; + + if (igniteGridTable) + $scope.selectButtonClick = mySelectButtonClick; + }; + return $delegate; +}]; http://git-wip-us.apache.org/repos/asf/ignite/blob/c7389487/modules/web-console/frontend/app/components/ui-grid/index.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ui-grid/index.js b/modules/web-console/frontend/app/components/ui-grid/index.js index 9fc9c63..fce5268 100644 --- a/modules/web-console/frontend/app/components/ui-grid/index.js +++ b/modules/web-console/frontend/app/components/ui-grid/index.js @@ -17,7 +17,9 @@ import angular from 'angular'; import component from './component'; +import decorator from './decorator'; export default angular .module('ignite-console.ui-grid', []) - .component('igniteGridTable', component); + .component('igniteGridTable', component) + .decorator('uiGridSelectionRowHeaderButtonsDirective', decorator); http://git-wip-us.apache.org/repos/asf/ignite/blob/c7389487/modules/web-console/frontend/app/components/ui-grid/style.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ui-grid/style.scss b/modules/web-console/frontend/app/components/ui-grid/style.scss index d426070..dba5d35 100644 --- a/modules/web-console/frontend/app/components/ui-grid/style.scss +++ b/modules/web-console/frontend/app/components/ui-grid/style.scss @@ -15,10 +15,50 @@ * limitations under the License. */ +.ignite-grid-table, ignite-grid-table { @import 'public/stylesheets/variables'; - .ui-grid.ui-grid--ignite { + .ui-grid.ui-grid--ignite.ui-grid--thin { + // Start section row height. + .ui-grid-row { + height: 36px; + + .ui-grid-cell { + height: 100%; + } + } + + .ui-grid-cell .ui-grid-cell-contents { + padding: 8px 20px; + min-height: 35px; + max-height: 35px; + } + + // Set force header height. + // Fix hide border bottom of pinned column without data. + .ui-grid-header-canvas { + height: 48px; + } + } + + .ui-grid.ui-grid--ignite.ui-grid--thin-rows { + .ui-grid-row { + height: 36px !important; + + .ui-grid-cell { + height: 100% !important; + } + } + + .ui-grid-cell .ui-grid-cell-contents { + padding: 8px 20px !important; + min-height: 35px !important; + max-height: 35px !important; + } + } + + .ui-grid.ui-grid--ignite:not(.ui-grid--thin) { // Start section row height. .ui-grid-row { height: 48px; @@ -30,6 +70,8 @@ ignite-grid-table { .ui-grid-cell .ui-grid-cell-contents { padding: 14px 20px; + min-height: 47px; + max-height: 47px; } // Set force header height. @@ -39,19 +81,30 @@ ignite-grid-table { } [role="columnheader"] { - display: flex; - align-items: center; margin: 11px 0; } - .ui-grid-header--subcategories [role="columnheader"] { - margin: 0; - } - // Fix checkbox position. .ui-grid-header-cell .ui-grid-selection-row-header-buttons { margin-top: 12px; } + } + + .ui-grid.ui-grid--ignite { + .ui-grid-header .ui-grid-tree-base-row-header-buttons.ui-grid-icon-plus-squared, + .ui-grid-header .ui-grid-tree-base-row-header-buttons.ui-grid-icon-minus-squared { + top: 14px; + } + + [role="columnheader"] { + display: flex; + align-items: center; + } + + .ui-grid-header--subcategories [role="columnheader"] { + margin: 0; + background-color: white; + } // Removes unwanted box-shadow and border-right from checkboxes column .ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-render-container-left:before { @@ -108,4 +161,4 @@ ignite-grid-table { line-height: 16px; } } -} \ No newline at end of file +} http://git-wip-us.apache.org/repos/asf/ignite/blob/c7389487/modules/web-console/frontend/app/components/ui-grid/template.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ui-grid/template.pug b/modules/web-console/frontend/app/components/ui-grid/template.pug index 6965a4e..4a0f8b3 100644 --- a/modules/web-console/frontend/app/components/ui-grid/template.pug +++ b/modules/web-console/frontend/app/components/ui-grid/template.pug @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. -div(ng-if='::$ctrl.onSelectionChange') +div(ng-if='::$ctrl.gridTreeView') .grid.ui-grid--ignite( ui-grid='$ctrl.grid' ui-grid-resize-columns @@ -22,13 +22,39 @@ div(ng-if='::$ctrl.onSelectionChange') ui-grid-selection ui-grid-exporter ui-grid-pinning + ui-grid-tree-view + ng-class='{ "ui-grid--thin": $ctrl.gridThin }' ) -div(ng-if='::!$ctrl.onSelectionChange') +div(ng-if='::$ctrl.gridGrouping') + .grid.ui-grid--ignite( + ui-grid='$ctrl.grid' + ui-grid-resize-columns + ui-grid-filters + ui-grid-selection + ui-grid-exporter + ui-grid-pinning + ui-grid-grouping + ng-class='{ "ui-grid--thin": $ctrl.gridThin }' + ) + +div(ng-if='::(!$ctrl.gridGrouping && !$ctrl.gridTreeView && $ctrl.onSelectionChange)') + .grid.ui-grid--ignite( + ui-grid='$ctrl.grid' + ui-grid-resize-columns + ui-grid-filters + ui-grid-selection + ui-grid-exporter + ui-grid-pinning + ng-class='{ "ui-grid--thin": $ctrl.gridThin }' + ) + +div(ng-if='::(!$ctrl.gridGrouping && !$ctrl.gridTreeView && !$ctrl.onSelectionChange)') .grid.ui-grid--ignite( ui-grid='$ctrl.grid' ui-grid-resize-columns ui-grid-filters ui-grid-exporter ui-grid-pinning + ng-class='{ "ui-grid--thin": $ctrl.gridThin }' )
