Merge pull request #82 from OpenLMIS-Angola/OAM-81

OAM-81: changed table UI to more user friendly
OpenLMIS-Angola · May 7, 2024 · ad00205 · ad00205
2 parents 4c5fda1 + 82f6e79
commit ad00205
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 46 deletions.
diff --git 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
@@ -56,7 +56,9 @@
         }
 
         function sortTable(chosenColumn) {
-            openlmisTableSortingService.sortTable(chosenColumn);
+            if (isColumnSortable(chosenColumn)) {
+                openlmisTableSortingService.sortTable(chosenColumn);
+            }
         }
 
         function isColumnSortable(selectedColumn) {

diff --git a/...table-component/services/openlmis-table-sorting-service/openlmis-table-sorting.service.js b/...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/...-component/services/openlmis-table-sorting-service/openlmis-table-sorting.service.spec.js b/...-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() {