Some improvements to datatable: align headers right when property is …

…of type 'number' and alignment fixes.
TNOCS · Mar 17, 2017 · 204bd03 · 204bd03
1 parent 5016d10
commit 204bd03
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 26 deletions.
diff --git a/csComp/directives/DashboardDirectives/Dashboard/Dashboard.tpl.html b/csComp/directives/DashboardDirectives/Dashboard/Dashboard.tpl.html
@@ -26,7 +26,7 @@
             <li ng-repeat="widget in dashboard.widgets | filter:{position:'dashboard'}" id="{{widget.elementId}}-container" when-ready="vm.isReady(widget)" class="widget-parent"
                 ng-class="{widgethover : widget.hover}" ng-show="!(!vm.$mapService.isAdminExpert && widget.hideIfLeftPanel && vm.$layerService.visual.leftPanelVisible)">
                 <div class="widget-container widget-entrance" id="{{widget.elementId}}-parent" ng-class="{widgetShadow : widget.effectiveStyle.shadow === true}"
-                    ng-hide="widget.collapse" style="position:absolute" " ng-style="{ 'background' : widget.effectiveStyle.background,
+                    ng-hide="widget.collapse" style="position:absolute" ng-style="{ 'background' : widget.effectiveStyle.background,
                     'border-color':widget.effectiveStyle.borderColor, 'top':widget._top, 'bottom':widget._bottom, 'left':widget._left, 'z-index' : widget._zindex,
                     'right':widget._right, 'border-width':widget.effectiveStyle.borderWidth, 'border-radius':widget.effectiveStyle.borderRadius,
                     'width':widget._width, 'height':widget._height, 'opacity' : widget.effectiveStyle.opacity, 'padding':widget.padding} ">

diff --git a/csComp/directives/DataTable/DataTable.tpl.html b/csComp/directives/DataTable/DataTable.tpl.html
@@ -1,6 +1,6 @@
 <div class="data-table">
-    <div class="table-return" ng-click="vm.returnToMap()">
-        <div style="float:right" ng-click="vm.returnToMap()">
+    <div class="table-return">
+        <div class="pointer" style="float:right" ng-click="vm.returnToMap()">
             <!--<i class="fa fa-times pointer-cursor"></i>-->
             <i class="wodk-ico-kruis"></i>
         </div>
@@ -27,7 +27,7 @@ <h2 style="margin: 0px 16px 16px">
                         </span>
                     </div>
                 </div>
-                <div class="col-xs-7 col-sm-8 col-md-9">
+                <div class="col-xs-7 col-sm-8 col-md-9" style="padding-right: 0px;">
                     <!--Download to CSV option-->
                     <div class="datatable-top-row-height datatable-download datatable-download-large">
                         <div class="datatable-download-text">
@@ -58,14 +58,11 @@ <h2 style="margin: 0px 16px 16px">
                 </li>
             </ul>
             <!-- List of headers -->
-            <ul class="form-group datatable-grey datatable-padding-left" style="overflow-y: auto; overflow-x: hidden;" resize resize-y="220" ng-show="vm.selectedLayerId != vm.mapLabel">
+            <ul class="form-group datatable-grey datatable-padding-left" style="overflow-y: auto; overflow-x: hidden;" resize resize-y="236" ng-show="vm.selectedLayerId != vm.mapLabel">
                 <!-- PropertyTypes -->
                 <li ng-repeat="mi in vm.propertyTypes" class="list-unstyled wodk-checkbox" style="white-space: nowrap; text-overflow: ellipsis">
-                    <!--<label ng-class="{'datatable-propertytype-admin': !mi.visibleInCallOut}">
-                            <input type="checkbox" name="vm.selectedTitles[]" value="{{mi.title}}" data-ng-checked="vm.headers.indexOf(mi.title) > -1" data-ng-click="vm.toggleSelection(mi.title)">&nbsp;&nbsp;{{mi.title}}
-                        </label>-->
-                    <input type="checkbox" id="checkbox-{{$index}}" name="vm.selectedTitles[]" value="{{mi.title}}" data-ng-checked="vm.headers.indexOf(mi.title) > -1"
-                        data-ng-click="vm.toggleSelection(mi.title)" />
+                    <input type="checkbox" id="checkbox-{{$index}}" name="vm.selectedTitles[]" value="{{mi.title}}" data-ng-checked="vm.isHeaderSelected(mi.title)"
+                        data-ng-click="vm.toggleSelection(mi.title, mi.type)" />
                     <label for="checkbox-{{$index}}" ng-class="{'datatable-propertytype-admin': !mi.visibleInCallOut}"></label>
                     <div style="display: inline;padding: 0px 10px;">{{mi.title}}</div>
                 </li>
@@ -77,10 +74,10 @@ <h2 style="margin: 0px 16px 16px">
         <div class="col-xs-6 col-sm-8 col-md-9 col-lg-10">
 
             <!-- Data table -->
-            <table class="table table-striped table-condensed">
+            <table class="table table-condensed table-horiz-scroll">
                 <tr>
-                    <th data-ng-repeat="header in vm.headers track by $index">
-                        {{header}}&nbsp;
+                    <th class="no-border" data-ng-repeat="header in vm.headers track by $index" data-ng-class="{'text-right': header.type == 'number'}">
+                        {{header.value}}&nbsp;
                         <a class="black" data-ng-click="reverseSort = !reverseSort; vm.orderBy($index, reverseSort);"><i data-ng-class="vm.sortOrderClass($index, reverseSort)">&nbsp;&nbsp;</i></a>
                     </th>
                 </tr>

diff --git a/csComp/directives/DataTable/DataTableCtrl.ts b/csComp/directives/DataTable/DataTableCtrl.ts
@@ -29,7 +29,7 @@ module DataTable {
         public selectedLayerId: string;
         public layerOptions: Array<any> = [];
         public propertyTypes: Array<IPropertyType> = [];
-        public headers: Array<string> = [];
+        public headers: {value: string, type: 'number'|'other'}[];
         public sortingColumn: number;
         public rows: Array<Array<TableField>> = [];
         private mapFeatureTitle: string;
@@ -287,19 +287,22 @@ module DataTable {
             this.propertyTypes.push(csComp.Helpers.GeoExtensions.createPropertyType('Lon'));
 
             // Select the first couple of headers
-            const nmbrOfDefaultSelectedHeaders = 3;
+            const nmbrOfDefaultSelectedHeaders = 4;
             for (var i = 0; i < nmbrOfDefaultSelectedHeaders; i++) {
-                this.headers.push(titles[i]);
+                if (titles.length > i) {
+                    let pt = _.findWhere(this.propertyTypes, {'title': titles[i]});
+                    this.headers.push({value: titles[i], type: (pt.type === 'number' ? 'number' : 'other')});
+                }
             }
             this.rows = this.getRows();
         }
 
-        public toggleSelection(propertyTypeTitle: string) {
-            var idx = this.headers.indexOf(propertyTypeTitle);
+        public toggleSelection(propertyTypeTitle: string, propertyTypeType: string) {
+            var idx = _.pluck(this.headers, 'value').indexOf(propertyTypeTitle);
             if (idx > -1) { // is currently selected
                 this.headers.splice(idx, 1);
             } else { // is newly selected
-                this.headers.push(propertyTypeTitle);
+                this.headers.push({value: propertyTypeTitle, type: (propertyTypeType === 'number' ? 'number' : 'other')});
             }
             this.rows = this.getRows();
         }
@@ -323,7 +326,7 @@ module DataTable {
             var meta: Array<IPropertyType> = [this.headers.length];
             this.propertyTypes.forEach((mi: IPropertyType) => {
                 // Keep headers and mi in the right order
-                var index = this.headers.indexOf(mi.title);
+                var index = _.pluck(this.headers, 'value').indexOf(mi.title);
                 if (index >= 0) meta[index] = mi;
             });
             var props: Array<Array<TableField>> = [];
@@ -491,7 +494,7 @@ module DataTable {
                     this.selectAllText = translation;
                 });
                 this.propertyTypes.forEach((mi) => {
-                    var idx = this.headers.indexOf(mi.title);
+                    var idx = _.pluck(this.headers, 'value').indexOf(mi.title);
                     if (idx > -1) {
                         this.headers.splice(idx, 1);
                     }
@@ -502,15 +505,19 @@ module DataTable {
                     this.selectAllText = translation;
                 });
                 this.propertyTypes.forEach((mi) => {
-                    if (this.headers.indexOf(mi.title) <= -1) {
-                        this.headers.push(mi.title);
+                    if (_.pluck(this.headers, 'value').indexOf(mi.title) <= -1) {
+                        this.headers.push({value: mi.title, type: (mi.type === 'number' ? 'number' : 'other')});
                     }
                 });
                 this.rows = this.getRows();
             }
             this.selectAllBool = !this.selectAllBool;
         }
 
+        private isHeaderSelected(title: string) {
+           return _.pluck(this.headers, 'value').indexOf(title) > -1;
+        }
+
         private returnToMap() {
             let dashboard = this.$layerService.project.dashboards[0];
             this.$messageBusService.publish('dashboard-main', 'activated', dashboard);

diff --git a/csComp/includes/css/csStyles.scss b/csComp/includes/css/csStyles.scss
@@ -902,7 +902,7 @@ body,
     padding-left: 15px;
 }
 
-@media (min-width: 992px ) {
+@media (min-width: 768px ) {
     .datatable-download-large {
         display: inline-block!important;
     }
@@ -911,7 +911,7 @@ body,
     }
 }
 
-@media (max-width: 992px ) {
+@media (max-width: 768px ) {
     .datatable-download-large {
         display: none!important;
     }
@@ -954,7 +954,7 @@ body,
 }
 .table-return {
     width: 100%;
-    height: 50px;
+    height: 30px;
     padding: 0px 20px;
 }
 .legendTable {
@@ -3117,8 +3117,32 @@ input[type="checkbox"] {
 .csweb-tooltip-padding {
     padding: 8px;
     background: white;
+    box-shadow: 0px 0px 8px 0px rgba(16, 16, 16, 0.5);
+}
+
+.no-padding {
+    padding: 0;
 }
 
+.no-border {
+    border: none;
+}
+
+.table-condensed > tbody > tr > th {
+    padding: 8px 5px 16px;
+    border: none;
+    white-space: nowrap;
+}
+
+.table-condensed > tbody > tr > td {
+    border-bottom: 1px solid #ccc;
+}
+
+.table-horiz-scroll {
+    overflow-x: auto;
+    display: block;
+    width: 100%;
+}
 
 /* Overrule icons in menu */
 .mapIcon {

diff --git a/csComp/services/layer/LayerService.ts b/csComp/services/layer/LayerService.ts
@@ -2027,6 +2027,10 @@ module csComp.Services {
                         gs.colorScales[ptd.title] = ['purple', 'purple'];
                     }
 
+                    if (ptd && ptd.title) {
+                        gs.title = ptd.title;
+                    }
+
                     if (ft.style && ft.style.fillColor) {
                         gs.colors = ['white', '#FF5500'];
                     } else {