From 82f6e7997b92e6757811483ce7fd576973f73389 Mon Sep 17 00:00:00 2001 From: DominikNoga Date: Mon, 29 Apr 2024 14:06:05 +0200 Subject: [PATCH] OAM-81: changed table UI to more user friendly --- .../_openlmis-table-container.scss | 30 ++++++++++--- .../openlmis-table.controller.js | 4 +- .../openlmis-table-sorting.service.js | 43 +++++++------------ .../openlmis-table-sorting.service.spec.js | 13 +----- 4 files changed, 44 insertions(+), 46 deletions(-) diff --git a/src/openlmis-table/_openlmis-table-container.scss b/src/openlmis-table/_openlmis-table-container.scss index 60edc92..2acb3c6 100644 --- a/src/openlmis-table/_openlmis-table-container.scss +++ b/src/openlmis-table/_openlmis-table-container.scss @@ -109,7 +109,7 @@ the current table sort order is recommended.* Styleguide 4.1 */ -@mixin sortedColumn { +@mixin sortableColumn { position: relative; padding-left: 2rem; @@ -122,6 +122,24 @@ Styleguide 4.1 } } +@mixin sortedColumnAsc { + @include sortableColumn(); + @include icon('sort-up'); + + &::before { + transform: translateY(.25rem); + } +} + +@mixin sortedColumnDesc { + @include sortableColumn(); + @include icon('sort-down'); + + &::before { + transform: translateY(-0.25rem); + } +} + .ps-container { overflow: hidden !important; } @@ -188,19 +206,21 @@ Styleguide 4.1 thead { tr { .header-sortable { + @include icon('sort'); + @include sortableColumn(); + &:hover { cursor: pointer; } } .sorted-ascending { - @include icon('arrow-up'); - @include sortedColumn(); + @include icon('sort-up'); + @include sortedColumnAsc(); } .sorted-descending { - @include icon('arrow-down'); - @include sortedColumn(); + @include sortedColumnDesc(); } } } diff --git a/src/openlmis-table/openlmis-table-component/openlmis-table.controller.js b/src/openlmis-table/openlmis-table-component/openlmis-table.controller.js index af4af94..18b6775 100644 --- a/src/openlmis-table/openlmis-table-component/openlmis-table.controller.js +++ b/src/openlmis-table/openlmis-table-component/openlmis-table.controller.js @@ -56,7 +56,9 @@ } function sortTable(chosenColumn) { - openlmisTableSortingService.sortTable(chosenColumn); + if (isColumnSortable(chosenColumn)) { + openlmisTableSortingService.sortTable(chosenColumn); + } } function isColumnSortable(selectedColumn) { diff --git a/src/openlmis-table/openlmis-table-component/services/openlmis-table-sorting-service/openlmis-table-sorting.service.js b/src/openlmis-table/openlmis-table-component/services/openlmis-table-sorting-service/openlmis-table-sorting.service.js index 35ed5d4..e2a27cd 100644 --- a/src/openlmis-table/openlmis-table-component/services/openlmis-table-sorting-service/openlmis-table-sorting.service.js +++ b/src/openlmis-table/openlmis-table-component/services/openlmis-table-sorting-service/openlmis-table-sorting.service.js @@ -27,9 +27,9 @@ .module('openlmis-table') .service('openlmisTableSortingService', openlmisTableSortingService); - openlmisTableSortingService.$inject = ['SORTING_SERVICE_CONSTANTS', '$state', '$stateParams', 'alertService']; + openlmisTableSortingService.$inject = ['SORTING_SERVICE_CONSTANTS', '$state', '$stateParams']; - function openlmisTableSortingService(SORTING_SERVICE_CONSTANTS, $state, $stateParams, alertService) { + function openlmisTableSortingService(SORTING_SERVICE_CONSTANTS, $state, $stateParams) { var EMPTY_SORTING_PROPERTIES = { isSortedBy: undefined, sortingOrder: '', @@ -55,31 +55,11 @@ * @param {Object} selectedColumn */ function sortTable(selectedColumn) { - if (isColumnSortable(selectedColumn)) { - var propertyPathParts = selectedColumn.propertyPath.split('.'); - if (isNestedProperty(propertyPathParts)) { - return; - } - - var propertyToOrder = propertyPathParts[0]; - var stateParams = JSON.parse(JSON.stringify($stateParams)); - setSortingProperties(propertyToOrder); - stateParams.sort = getSortingParamValue(propertyToOrder); - $state.go($state.current.name, stateParams); - } else { - alertService.info({ - title: 'column.notSortable.title', - message: 'column.notSortable.message' - }); - } - } - - function isNestedProperty(propertyPathParts) { - if (propertyPathParts.length > 1) { - alertService.error('sorting.error.nestedProperty.message'); - return true; - } - return false; + var propertyToOrder = selectedColumn.propertyPath; + var stateParams = angular.copy($stateParams); + setSortingProperties(propertyToOrder); + stateParams.sort = getSortingParamValue(propertyToOrder); + $state.go($state.current.name, stateParams); } function getSortingParamValue(propertyToOrder) { @@ -173,6 +153,11 @@ return propertyPath === sortingProperties.isSortedBy; } + function hasNestedProperties(column) { + var propertyPathParts = column.propertyPath.split('.'); + return propertyPathParts.length > 1; + } + /** * @ngdoc method * @methodOf openlmis-table:openlmisTableSortingService @@ -183,7 +168,9 @@ * @param {Object} column */ function isColumnSortable(column) { - return (column.sortable === undefined || column.sortable) && column.propertyPath !== undefined; + return (column.sortable === undefined || column.sortable) && + column.propertyPath !== undefined && + !hasNestedProperties(column); } } })(); diff --git a/src/openlmis-table/openlmis-table-component/services/openlmis-table-sorting-service/openlmis-table-sorting.service.spec.js b/src/openlmis-table/openlmis-table-component/services/openlmis-table-sorting-service/openlmis-table-sorting.service.spec.js index c4dba14..7594662 100755 --- a/src/openlmis-table/openlmis-table-component/services/openlmis-table-sorting-service/openlmis-table-sorting.service.spec.js +++ b/src/openlmis-table/openlmis-table-component/services/openlmis-table-sorting-service/openlmis-table-sorting.service.spec.js @@ -14,7 +14,7 @@ */ describe('openlmisTableSortingService', function() { - var openlmisTableSortingService, $state, $stateParams, alertService, SORTING_SERVICE_CONSTANTS; + var openlmisTableSortingService, $state, $stateParams, SORTING_SERVICE_CONSTANTS; var mockSelectedColumn, mockSelectedColumnNotSortable; @@ -25,7 +25,6 @@ describe('openlmisTableSortingService', function() { openlmisTableSortingService = $injector.get('openlmisTableSortingService'); $state = $injector.get('$state'); $stateParams = $injector.get('$stateParams'); - alertService = $injector.get('alertService'); SORTING_SERVICE_CONSTANTS = $injector.get('SORTING_SERVICE_CONSTANTS'); }); mockSelectedColumn = { @@ -50,16 +49,6 @@ describe('openlmisTableSortingService', function() { expect($stateParams.sort).toBeDefined(); expect($state.go).toHaveBeenCalled(); }); - - it('should display an alert if the column is not sortable', function() { - spyOn(alertService, 'info'); - openlmisTableSortingService.sortTable(mockSelectedColumnNotSortable); - - expect(alertService.info).toHaveBeenCalledWith({ - title: 'column.notSortable.title', - message: 'column.notSortable.message' - }); - }); }); describe('isColumnSortable', function() {