Skip to content

Commit 480e12c

Browse files
VWoeltjenVWoeltjen
authored
Merge pull request nasa#986 from nasa/table-export-934
[Table] Add Export for table contents
2 parents 3480809 + 50bd233 commit 480e12c

File tree

17 files changed

+2768
-1867
lines changed

17 files changed

+2768
-1867
lines changed

‎platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json

Lines changed: 2646 additions & 1819 deletions
Large diffs are not rendered by default.

‎platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot

84 Bytes
Binary file not shown.

‎platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg

Lines changed: 1 addition & 0 deletions
Loading

‎platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf

84 Bytes
Binary file not shown.

‎platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff

84 Bytes
Binary file not shown.

‎platform/commonUI/general/res/sass/_mixins.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -348,7 +348,6 @@
348348
display: inline-block;
349349
font-family: 'symbolsfont';
350350
margin-left: $interiorMarginSm;
351-
vertical-align: top;
352351
}
353352

354353
@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {

‎platform/commonUI/general/res/sass/controls/_buttons.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,14 @@ $pad: $interiorMargin * $baseRatio;
9696
}
9797
}
9898

99+
&.t-export {
100+
&:before {
101+
@extend .ui-symbol;
102+
@extend .icon;
103+
content: '\e623';
104+
}
105+
}
106+
99107
.icon {
100108
font-size: 0.8rem;
101109
color: $colorKey;

‎platform/commonUI/general/res/sass/features/_imagery.scss

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,25 @@
11
.l-image-main-wrapper,
2-
.l-image-main,
3-
.l-image-main-controlbar,
42
.l-image-thumbs-wrapper {
53
@include absPosDefault(0, false);
64
}
75

86
/*************************************** MAIN LAYOUT */
97
.l-image-main-wrapper {
10-
//@include test();
118
@if $enableImageryThumbs == true {
129
bottom: $interiorMargin*2 + $imageThumbsWrapperH;
1310
}
1411
min-height: 100px;
1512
min-width: 150px;
1613
.l-image-main {
1714
background-color: $colorPlotBg;
18-
bottom: $imageMainControlBarH + $interiorMargin;
15+
margin-bottom: $interiorMargin;
1916
}
2017
.l-image-main-controlbar {
21-
top: auto;
22-
height: $imageMainControlBarH;
18+
&.l-flex-row { @include align-items(center); }
2319
}
2420
}
2521

2622
.l-image-thumbs-wrapper {
27-
//@include test(red);
2823
top: auto;
2924
height: $imageThumbsWrapperH;
3025
}
@@ -44,24 +39,17 @@
4439
background-repeat: no-repeat;
4540
}
4641

47-
.l-image-main {
48-
//cursor: crosshair;
49-
}
50-
5142
.l-image-main-controlbar {
52-
//@include test();
5343
font-size: 0.8em;
54-
line-height: $imageMainControlBarH;
44+
line-height: inherit;
5545
.left, .right {
5646
direction: rtl;
5747
overflow: hidden;
5848
}
5949
.left {
60-
//@include test(red);
6150
text-align: left;
6251
}
6352
.right {
64-
//@include test(green);
6553
z-index: 2;
6654
}
6755
.l-date,
@@ -71,7 +59,6 @@
7159
.l-mag {
7260
direction: ltr;
7361
display: inline-block;
74-
//white-space: nowrap;
7562
&:before {
7663
content: "\000049";
7764
}

‎platform/commonUI/general/res/sass/lists/_tabular.scss

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@
2424
height: 100%;
2525
}
2626

27+
.tabular-holder {
28+
@include absPosDefault();
29+
}
30+
2731
.tabular,
2832
table {
2933
box-sizing: border-box;
@@ -162,4 +166,41 @@ table {
162166
min-width: 150px;
163167
}
164168
}
169+
}
170+
171+
/********************************************************** SPECIFIC TABULAR VIEWS */
172+
.tabular-holder {
173+
&.t-exportable {
174+
$btnExportH: 25px;
175+
.l-view-section {
176+
top: $btnExportH + $interiorMargin;
177+
}
178+
}
179+
}
180+
181+
.child-frame {
182+
.tabular-holder {
183+
&.t-exportable {
184+
$btnExportH: $btnFrameH;
185+
.s-btn.t-export {
186+
@include trans-prop-nice(opacity, $dur: 50ms);
187+
opacity: 0;
188+
}
189+
.l-view-section {
190+
@include trans-prop-nice(top, $dur: 150ms, $delay: 50ms);
191+
top: 0;
192+
}
193+
&:hover {
194+
.s-btn.t-export {
195+
@include trans-prop-nice(opacity, 150ms, 100ms);
196+
opacity: 1;
197+
}
198+
.l-view-section {
199+
@include trans-prop-nice(top, $dur: 150ms);
200+
top: $btnExportH + $interiorMargin;
201+
}
202+
}
203+
}
204+
}
205+
165206
}

‎platform/commonUI/general/res/sass/user-environ/_frame.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@
5454
height: $ohH;
5555
line-height: $ohH;
5656
padding: 0 $interiorMargin;
57-
> span {
57+
> span,
58+
&:before {
5859
font-size: 0.65rem;
5960
}
6061
}

‎platform/features/imagery/res/templates/imagery.html

Lines changed: 13 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,42 @@
11
<div class="t-imagery" ng-controller="ImageryController as imagery">
2-
<div
3-
class="l-image-main-wrapper"
2+
<div class="l-image-main-wrapper l-flex-col"
43
ng-mouseenter="showLocalControls = true;"
5-
ng-mouseleave="showLocalControls = false;"
6-
>
4+
ng-mouseleave="showLocalControls = false;">
75
<div
86
class="l-local-controls s-local-controls"
9-
ng-show="false && showLocalControls"
10-
>
11-
<a
12-
class="s-btn"
7+
ng-show="false && showLocalControls">
8+
<a class="s-btn"
139
ng-click="plot.stepBackPanZoom()"
1410
ng-show="1"
1511
title="Restore previous pan/zoom">
1612
<span class="ui-symbol icon">&lt;</span>
1713
</a>
1814

19-
<a
20-
class="s-btn"
15+
<a class="s-btn"
2116
ng-click="plot.unzoom()"
2217
ng-show="1"
2318
title="Reset pan/zoom">
2419
<span class="ui-symbol icon">I</span>
2520
</a>
2621
</div>
2722

28-
<div
29-
class="l-image-main s-image-main"
23+
<div class="l-image-main s-image-main flex-elem grows"
3024
ng-class="{ paused: imagery.paused(), stale:false }"
31-
mct-background-image="imagery.getImageUrl()"
32-
>
25+
mct-background-image="imagery.getImageUrl()">
3326
</div>
3427

35-
<div class="l-image-main-controlbar l-flex-row">
28+
<div class="l-image-main-controlbar flex-elem l-flex-row">
3629
<div class="left flex-elem grows">
37-
<a
38-
class="s-btn show-thumbs sm hidden"
39-
ng-click="showThumbsBubble = (showThumbsBubble)? false:true"
40-
><span class="ui-symbol icon"></span></a>
30+
<a class="s-btn show-thumbs sm hidden"
31+
ng-click="showThumbsBubble = (showThumbsBubble)? false:true"><span class="ui-symbol icon"></span></a>
4132
<span class="l-timezone">{{imagery.getZone()}}</span>
4233
<span class="l-time">{{imagery.getTime()}}</span>
4334
<span class="l-date">{{imagery.getDate()}}</span>
4435
</div>
4536
<div class="right flex-elem">
46-
<a
47-
class="s-btn pause-play"
37+
<a class="s-btn pause-play"
4838
ng-click="imagery.paused(!imagery.paused())"
49-
ng-class="{ paused: imagery.paused() }"
50-
><span class="ui-symbol icon"></span></a>
39+
ng-class="{ paused: imagery.paused() }"><span class="ui-symbol icon"></span></a>
5140
<a href="{{imagery.getImageUrl()}}"
5241
ng-if="imagery.getImageUrl()"
5342
target="_blank"
@@ -58,8 +47,7 @@
5847
class="s-btn l-mag s-mag ui-symbol vsm"
5948
ng-click="clipped = false"
6049
ng-show="clipped === true"
61-
title="Not all of image is visible; click to reset."
62-
></a>
50+
title="Not all of image is visible; click to reset."></a>
6351
</div>
6452
</div>
6553
</div>

‎platform/features/table/res/templates/historical-table.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
headers="headers"
44
rows="rows"
55
enableFilter="true"
6-
enableSort="true">
6+
enableSort="true"
7+
class="tabular-holder t-exportable">
78
</mct-table>
89
</div>

‎platform/features/table/res/templates/mct-table.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
<a class="t-btn l-btn s-btn t-export"
2+
ng-click="exportAsCSV()"
3+
title="Export This View's Data">
4+
Export
5+
</a>
16
<div class="l-view-section scrolling" style="overflow: auto;" mct-resize="resize()">
27
<table class="sizing-table">
38
<tbody>

‎platform/features/table/res/templates/rt-table.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
rows="rows"
55
enableFilter="true"
66
enableSort="true"
7+
class="tabular-holder t-exportable"
78
auto-scroll="autoScroll">
89
</mct-table>
910
</div>

‎platform/features/table/src/controllers/MCTTableController.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ define(
1212
* @param element
1313
* @constructor
1414
*/
15-
function MCTTableController($scope, $timeout, element) {
15+
function MCTTableController($scope, $timeout, element, exportService) {
1616
var self = this;
1717

1818
this.$scope = $scope;
@@ -46,6 +46,16 @@ define(
4646

4747
setDefaults($scope);
4848

49+
$scope.exportAsCSV = function () {
50+
var headers = $scope.displayHeaders;
51+
exportService.exportCSV($scope.displayRows.map(function (row) {
52+
return headers.reduce(function (r, header) {
53+
r[header] = row[header].text;
54+
return r;
55+
}, {});
56+
}), { headers: headers });
57+
};
58+
4959
$scope.toggleSort = function (key) {
5060
if (!$scope.enableSort) {
5161
return;

‎platform/features/table/src/directives/MCTTable.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,13 @@ define(
8181
return {
8282
restrict: "E",
8383
template: TableTemplate,
84-
controller: ['$scope', '$timeout', '$element', MCTTableController],
84+
controller: [
85+
'$scope',
86+
'$timeout',
87+
'$element',
88+
'exportService',
89+
MCTTableController
90+
],
8591
scope: {
8692
headers: "=",
8793
rows: "=",

‎platform/features/table/test/controllers/MCTTableControllerSpec.js

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ define(
3232
mockScope,
3333
watches,
3434
mockTimeout,
35-
mockElement;
35+
mockElement,
36+
mockExportService;
3637

3738
function promise(value) {
3839
return {
@@ -67,11 +68,20 @@ define(
6768
offsetHeight: 1000
6869
};
6970

71+
mockExportService = jasmine.createSpyObj('exportService', [
72+
'exportCSV'
73+
]);
74+
7075
mockScope.displayHeaders = true;
7176
mockTimeout = jasmine.createSpy('$timeout');
7277
mockTimeout.andReturn(promise(undefined));
7378

74-
controller = new MCTTableController(mockScope, mockTimeout, mockElement);
79+
controller = new MCTTableController(
80+
mockScope,
81+
mockTimeout,
82+
mockElement,
83+
mockExportService
84+
);
7585
spyOn(controller, 'setVisibleRows').andCallThrough();
7686
});
7787

@@ -149,6 +159,22 @@ define(
149159
expect(controller.setVisibleRows).toHaveBeenCalled();
150160
});
151161

162+
it("can be exported as CSV", function () {
163+
controller.setRows(testRows);
164+
controller.setHeaders(Object.keys(testRows[0]));
165+
mockScope.exportAsCSV();
166+
expect(mockExportService.exportCSV)
167+
.toHaveBeenCalled();
168+
mockExportService.exportCSV.mostRecentCall.args[0]
169+
.forEach(function (row, i) {
170+
Object.keys(row).forEach(function (k) {
171+
expect(row[k]).toEqual(
172+
mockScope.displayRows[i][k].text
173+
);
174+
});
175+
});
176+
});
177+
152178
describe('sorting', function () {
153179
var sortedRows;
154180

0 commit comments

Comments
 (0)