logitude-dashboard-library 3.2.6 → 3.2.7

package/dist/assets/styles/dl-dashboard.scss

@@ -786,6 +786,16 @@ $dark-grey: #717585;
         .p-column-title {
             font-weight: bold !important;
             font-size: 14px !important;
+
+            .pi {
+                font-size: 14px !important;
+            }
+        }
+
+        .header-content {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
         }
     }
 

package/dist/index.js

@@ -664,7 +664,7 @@ var TableChart = function TableChart(props) {
           var key = field.FieldCode;
           var valueType = field.DataTypeCode;
 
-          var _value = valueType && (valueType == "Date" || valueType == "DateTime") ? getDateTimeValue(item[key]) : valueType == "Boolean" ? getBooleanStringValue(item[key]) : item[key];
+          var _value = valueType && valueType == "Boolean" ? getBooleanStringValue(item[key]) : item[key];
 
           _tableRow[key] = isNullOrUndefined(_value) ? "" : _value;
         });
@@ -715,16 +715,19 @@ var TableChart = function TableChart(props) {
     return field ? field.Id : null;
   };
 
-  var sortTableData = function sortTableData(e) {
-    setSortField(e.sortField);
-    setSortOrder(e.sortOrder);
+  var sortTableData = function sortTableData(sortedField) {
+    setSortField(sortedField);
+
+    var _sortOrder = sortOrder == 1 ? -1 : sortOrder == -1 ? 1 : 1;
+
+    setSortOrder(_sortOrder);
     var _widget = props.customChartProps.widget;
     var dashboardAnalyticsService = new DashboardAnalyticsService();
     _widget.onChange = undefined;
     _widget.PageIndex = 0;
     _widget.PageSize = 100;
-    _widget.ScreenSortBy = getSortFieldIdBySortFieldCode(e.sortField);
-    _widget.ScreenSortDirection = e.sortOrder == 1 ? 'asc' : e.sortOrder == -1 ? 'desc' : null;
+    _widget.ScreenSortBy = getSortFieldIdBySortFieldCode(sortedField);
+    _widget.ScreenSortDirection = _sortOrder == 1 ? 'asc' : _sortOrder == -1 ? 'desc' : null;
     _widget.EntityId = !isNullOrUndefinedOrEmpty(_widget.RelatedToEntityId) ? _widget.RelatedToEntityId : _widget.EntityId;
     setIsTableLoading(true);
     dashboardAnalyticsService.getTableData(_widget).then(function (res) {
@@ -749,6 +752,47 @@ var TableChart = function TableChart(props) {
     return false;
   };
 
+  var cellTemplateBody = function cellTemplateBody(data, column) {
+    if (!column || !column.FieldCode) return "";
+    return column.DataTypeCode == "DateTime" || column.DataTypeCode == "Date" ? getDateTimeValue(data[column.FieldCode]) : data[column.FieldCode];
+  };
+
+  var headerTemplate = function headerTemplate(column) {
+    var sortClassIcon = "";
+
+    if (sortField != column.FieldCode) {
+      return React__default.createElement("div", {
+        onClick: function onClick() {
+          return sortTableData(column.FieldCode);
+        },
+        className: "header-content"
+      }, React__default.createElement("span", {
+        className: "p-column-title"
+      }, column.DisplayName), canSort() && React__default.createElement("span", {
+        className: "p-sortable-column-icon p-ml-2 pi pi-fw pi-sort-alt"
+      }));
+    }
+
+    if (sortOrder == 1) {
+      sortClassIcon = "p-sortable-column-icon p-ml-2 pi pi-fw pi-sort-amount-up-alt";
+    } else if (sortOrder == -1) {
+      sortClassIcon = "p-sortable-column-icon p-ml-2 pi pi-fw pi-sort-amount-down";
+    } else {
+      sortClassIcon = "p-sortable-column-icon p-ml-2 pi pi-fw pi-sort-alt";
+    }
+
+    return React__default.createElement("div", {
+      onClick: function onClick() {
+        return sortTableData(column.FieldCode);
+      },
+      className: "header-content"
+    }, React__default.createElement("span", {
+      className: "p-column-title"
+    }, column.DisplayName), canSort() && React__default.createElement("span", {
+      className: sortClassIcon
+    }));
+  };
+
   return isLoading ? React__default.createElement("div", {
     className: 'dl-full-hight dl-flex-content-center spinner-custome'
   }, React__default.createElement(progressspinner.ProgressSpinner, {
@@ -771,17 +815,17 @@ var TableChart = function TableChart(props) {
     className: "dl-tooltiptext"
   }, error))) : React__default.createElement(datatable.DataTable, {
     loading: isTableLoading,
-    sortField: sortField,
-    sortOrder: sortOrder,
-    onSort: sortTableData,
     value: tableData,
     responsiveLayout: "scroll"
   }, tableColumns.map(function (column$1, index) {
     return React__default.createElement(column.Column, {
-      sortable: canSort(),
       key: column$1.FieldCode + "_" + index,
-      field: column$1.FieldCode,
-      header: column$1.DisplayName
+      header: function header() {
+        return headerTemplate(column$1);
+      },
+      body: function body(data) {
+        return cellTemplateBody(data, column$1);
+      }
     });
   }));
 };