Skip to content

Commit 1735bd3

Browse files
kevinhinterlongkevinhinterlong
authored
Update: Column config reordering, sorting ability (#1280)
- adds metadata to columns indicating whether or not they support sorting, (e.g. false for fili dimensions) - update table with column metadata for sorting
1 parent 4acceb3 commit 1735bd3

File tree

55 files changed

+1218
-1167
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+1218
-1167
lines changed

‎packages/app/config/dependency-lint.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ module.exports = {
44
allowedVersions: {
55
'ember-test-waiters': '1.2.0 || 1.1.1',
66
'ember-truth-helpers': '2.1.0 || 3.0.0',
7-
'ember-get-config': '0.2.4 || 0.3.0'
8-
}
7+
'ember-get-config': '0.2.4 || 0.3.0',
8+
'ember-destroyable-polyfill': '2.0.2 || 2.0.3',
9+
},
910
};

‎packages/core/addon/components/navi-visualizations/table.ts

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export type Args = {
5151
export type TableColumn = {
5252
fragment: ColumnFragment;
5353
attributes: TableColumnAttributes;
54-
sortDirection?: TableSortDirection;
54+
sortDirection: TableSortDirection | null;
5555
columnId: string;
5656
};
5757

@@ -201,11 +201,17 @@ export default class Table extends Component<Args> {
201201
get columns(): TableColumn[] {
202202
const { columnAttributes } = this.args.options;
203203
return this.request.columns.map((column) => {
204-
const sort = this.request.sorts.find((sort) => sort.canonicalName === column.canonicalName);
204+
let sortDirection: TableColumn['sortDirection'];
205+
if (column.columnMetadata.isSortable) {
206+
const sort = this.request.sorts.find((sort) => sort.canonicalName === column.canonicalName);
207+
sortDirection = sort?.direction || <const>'none';
208+
} else {
209+
sortDirection = null;
210+
}
205211
return {
206212
fragment: column,
207213
attributes: columnAttributes[column.cid] || {},
208-
sortDirection: sort?.direction || 'none',
214+
sortDirection,
209215
columnId: column.cid,
210216
};
211217
});
@@ -263,7 +269,10 @@ export default class Table extends Component<Args> {
263269
*/
264270
@action
265271
headerClicked(column: TableColumn): void {
266-
// TODO: Validate that the column clicked supports sorting
272+
if (!column.fragment.columnMetadata.isSortable) {
273+
return;
274+
}
275+
267276
const { type } = column.fragment;
268277
const sort = this.request.sorts.find((sort) => sort.canonicalName === column.fragment.canonicalName);
269278
const sortDirection = (sort?.direction || 'none') as TableSortDirection;

‎packages/core/addon/models/bard-request-v2/fragments/column.ts

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
/**
2-
* Copyright 2020, Yahoo Holdings Inc.
2+
* Copyright 2021, Yahoo Holdings Inc.
33
* Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms.
44
*/
55
import attr from 'ember-data/attr';
66
import BaseFragment from './base';
7-
import { Column } from 'navi-data/adapters/facts/interface';
7+
import { Column, SortDirection } from 'navi-data/adapters/facts/interface';
88
import { nanoid } from 'nanoid';
99
import { inject as service } from '@ember/service';
1010
import { computed } from '@ember/object';
11-
import NaviFormatterService from 'navi-data/services/navi-formatter';
12-
import { ColumnType } from 'navi-data/models/metadata/column';
11+
//@ts-ignore
12+
import { fragmentOwner } from 'ember-data-model-fragments/attributes';
13+
import type NaviFormatterService from 'navi-data/services/navi-formatter';
14+
import type { ColumnType } from 'navi-data/models/metadata/column';
15+
import type RequestFragment from 'navi-core/models/bard-request-v2/request';
1316

1417
/**
1518
* @augments {BaseFragment}
@@ -23,9 +26,19 @@ export default class ColumnFragment<T extends ColumnType = ColumnType> extends B
2326

2427
@service naviFormatter!: NaviFormatterService;
2528

29+
@fragmentOwner() request?: RequestFragment;
30+
2631
@computed('alias', 'parameters', 'columnMetadata')
2732
get displayName(): string {
2833
const { alias, parameters, columnMetadata } = this;
2934
return this.naviFormatter.formatColumnName(columnMetadata, parameters, alias);
3035
}
36+
37+
@computed('request.sorts.@each.direction')
38+
get sortedDirection(): SortDirection | null {
39+
const sorts = this.request?.sorts || [];
40+
41+
const sort = sorts.find(({ canonicalName }) => canonicalName === this.canonicalName);
42+
return sort?.direction || null;
43+
}
3144
}

‎packages/core/addon/models/bard-request-v2/request.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -352,6 +352,9 @@ export default class RequestFragment extends Fragment.extend(Validations) implem
352352
* @param index - the index to move the selected column
353353
*/
354354
reorderColumn(column: ColumnFragment, index: number) {
355+
if (this.columns.objectAt(index) === column) {
356+
return;
357+
}
355358
this.columns.removeFragment(column);
356359
this.columns.insertAt(index, column);
357360
}

‎packages/core/addon/templates/components/table-renderer-vertical-collection.hbs

Lines changed: 34 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,41 @@
11
{{!-- Copyright 2020, Yahoo Holdings Inc. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. --}}
22
<div class={{this.tableHeadersClass}}>
33
{{#unless @isEditingMode}}
4-
<SortableGroup
5-
class="table-header-row-vc table-header-row-vc--view"
6-
@direction="x"
7-
@model={{readonly @columns}}
8-
@onChange={{@updateColumnOrder}}
9-
as |group|
10-
>
11-
{{#each group.model as |column|}}
12-
<group.item
13-
class="table-header-cell {{column.fragment.type}}"
14-
@model={{readonly column}}
15-
@click={{fn @headerClicked column}}
16-
@onDragStart={{set this "isDragged" true}}
17-
@onDragStop={{set this "isDragged" false}}
18-
@isDraggingDisabled={{@isDraggingDisabled}}
19-
>
20-
<span
21-
class="table-header-cell__title {{if column.fragment.alias "table-header-cell__title--custom-name"}}"
22-
title="Drag column header to reorder"
4+
{{#let "table-renderer-vc" as |groupName|}}
5+
<ol class="table-header-row-vc table-header-row-vc--view" {{sortable-group groupName=groupName onChange=@updateColumnOrder direction="x"}}>
6+
{{#each @columns as |column|}}
7+
<li
8+
class="table-header-cell {{column.fragment.type}}"
9+
data-name={{column.fragment.canonicalName}}
10+
role="button"
11+
{{sortable-handle}}
12+
{{on "click" (fn @headerClicked column)}}
13+
{{sortable-item groupName=groupName model=column isDraggingDisabled=@isDraggingDisabled onDragStart=(set this "isDragged" true) onDragStop=(set this "isDragged" false)}}
2314
>
24-
{{column.fragment.displayName}}
25-
</span>
26-
{{#if column.sortDirection}}
27-
<NaviTableSortIcon
28-
class="table-header-cell__icon"
29-
@direction={{readonly column.sortDirection}}
30-
/>
31-
{{else}}
32-
<EmberTooltip
33-
@text={{"Column cannot be sorted."}}
34-
@showOn={{"click"}}
35-
@hideOn={{"mousedown mouseleave"}}
36-
@duration={{2000}}
37-
@enableLazyRendering={{true}}
38-
/>
39-
{{/if}}
40-
</group.item>
41-
{{/each}}
42-
</SortableGroup>
15+
<span
16+
class="table-header-cell__title {{if column.fragment.alias "table-header-cell__title--custom-name"}}"
17+
title="Drag column header to reorder"
18+
>
19+
{{column.fragment.displayName}}
20+
</span>
21+
{{#if column.sortDirection}}
22+
<NaviTableSortIcon
23+
class="table-header-cell__icon"
24+
@direction={{readonly column.sortDirection}}
25+
/>
26+
{{else}}
27+
<EmberTooltip
28+
@text={{"Column cannot be sorted."}}
29+
@showOn={{"click"}}
30+
@hideOn={{"mousedown mouseleave"}}
31+
@duration={{2000}}
32+
@enableLazyRendering={{true}}
33+
/>
34+
{{/if}}
35+
</li>
36+
{{/each}}
37+
</ol>
38+
{{/let}}
4339
{{/unless}}
4440
</div>
4541
<div class="{{this.tableWrapperClass}}">

‎packages/core/addon/templates/components/table-renderer.hbs

Lines changed: 34 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -20,43 +20,41 @@
2020
{{/each}}
2121
</div>
2222
{{else}}
23-
<SortableGroup
24-
class="table-header-row"
25-
@model={{readonly @columns}}
26-
@direction="x"
27-
@onChange={{@updateColumnOrder}}
28-
as | group |
29-
>
30-
{{#each group.model as |column|}}
31-
<group.item
32-
class={{concat "table-header-cell " column.fragment.type}}
33-
@model={{readonly column}}
34-
@click={{fn @headerClicked column}}
35-
@isDraggingDisabled={{@isDraggingDisabled}}
36-
>
37-
<span
38-
class="table-header-cell__title {{if column.fragment.alias "table-header-cell__title--custom-name"}}"
39-
title="Drag column header to reorder"
23+
{{#let "table-renderer" as |groupName|}}
24+
<ol class="table-header-row" {{sortable-group groupName=groupName onChange=@updateColumnOrder direction="x"}}>
25+
{{#each @columns as |column|}}
26+
<li
27+
class="table-header-cell {{column.fragment.type}}"
28+
role="button"
29+
{{on "click" (fn @headerClicked column)}}
30+
{{sortable-item groupName=groupName model=column isDraggingDisabled=@isDraggingDisabled}}
31+
data-name={{column.fragment.canonicalName}}
4032
>
41-
{{column.fragment.displayName}}
42-
</span>
43-
{{#if column.sortDirection}}
44-
<NaviTableSortIcon
45-
class="table-header-cell__icon"
46-
@direction={{readonly column.sortDirection}}
47-
/>
48-
{{else}}
49-
<EmberTooltip
50-
@text={{"Column cannot be sorted."}}
51-
@showOn={{"click"}}
52-
@hideOn={{"mousedown mouseleave"}}
53-
@duration={{2000}}
54-
@enableLazyRendering={{true}}
55-
/>
56-
{{/if}}
57-
</group.item>
58-
{{/each}}
59-
</SortableGroup>
33+
<span
34+
class="table-header-cell__title {{if column.fragment.alias "table-header-cell__title--custom-name"}}"
35+
title="Drag column header to reorder"
36+
{{sortable-handle}}
37+
>
38+
{{column.fragment.displayName}}
39+
</span>
40+
{{#if column.sortDirection}}
41+
<NaviTableSortIcon
42+
class="table-header-cell__icon"
43+
@direction={{readonly column.sortDirection}}
44+
/>
45+
{{else}}
46+
<EmberTooltip
47+
@text={{"Column cannot be sorted."}}
48+
@showOn={{"click"}}
49+
@hideOn={{"mousedown mouseleave"}}
50+
@duration={{2000}}
51+
@enableLazyRendering={{true}}
52+
/>
53+
{{/if}}
54+
</li>
55+
{{/each}}
56+
</ol>
57+
{{/let}}
6058
{{/if}}
6159

6260
<div class="table-body">

0 commit comments

Comments
 (0)