summary collapse

lineupjs · Dec 14, 2018 · 7d82ac7 · 7d82ac7
1 parent 2b55c50
commit 7d82ac7
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 24 deletions.
diff --git a/src/provider/ADataProvider.ts b/src/provider/ADataProvider.ts
@@ -694,8 +694,20 @@ abstract class ADataProvider extends AEventDispatcher implements IDataProvider {
     this.fire([ADataProvider.EVENT_GROUP_AGGREGATION_CHANGED, ADataProvider.EVENT_DIRTY_VALUES, ADataProvider.EVENT_DIRTY], ranking, group, value);
   }
 
-  aggregateAllOf(ranking: Ranking, aggregateAll: boolean | number) {
-    const v = typeof aggregateAll === 'boolean' ? (aggregateAll ? 0 : -1) : aggregateAll;
+  aggregateAllOf(ranking: Ranking, aggregateAll: boolean | number | 'collapse' | 'expand' | 'expand_top') {
+    let v: number;
+    if (typeof aggregateAll === 'boolean') {
+      v = aggregateAll ? 0 : -1;
+    } else if (aggregateAll === 'collapse') {
+      v = 0;
+    } else if (aggregateAll === 'expand') {
+      v = -1;
+    } else if (aggregateAll === 'expand_top') {
+      v = this.showTopN;
+    } else {
+      v = aggregateAll;
+    }
+
     const groups = ranking.getGroups();
     for(const group of groups) {
       this.unaggregateParents(ranking, group);

diff --git a/src/provider/interfaces.ts b/src/provider/interfaces.ts
@@ -68,7 +68,7 @@ export interface IDataProvider extends AEventDispatcher {
 
   isAggregated(ranking: Ranking, group: IGroup): boolean;
 
-  aggregateAllOf(ranking: Ranking, aggregateAll: boolean | number): void;
+  aggregateAllOf(ranking: Ranking, aggregateAll: boolean | number | 'collapse' | 'expand' | 'expand_top'): void;
 
   getTopNAggregated(ranking: Ranking, group: IGroup): number;
 

diff --git a/src/renderer/AggregateGroupRenderer.ts b/src/renderer/AggregateGroupRenderer.ts
@@ -4,8 +4,6 @@ import Column from '../model/Column';
 import {AGGREGATE, CANVAS_HEIGHT, cssClass} from '../styles';
 import {default as IRenderContext, ICellRendererFactory} from './interfaces';
 
-const AGGREGATE_TO_TOP = 0;
-
 /** @internal */
 export default class AggregateGroupRenderer implements ICellRendererFactory {
   readonly title = 'Default';
@@ -35,7 +33,7 @@ export default class AggregateGroupRenderer implements ICellRendererFactory {
 
   createGroup(col: AggregateGroupColumn) {
     return {
-      template: `<div><div title="Expand Group"></div><div title="Show All | Show Top ${AGGREGATE_TO_TOP}"></div></div>`,
+      template: `<div><div title="Expand Group"></div><div title="Show All"></div></div>`,
       update(node: HTMLElement, group: IGroup, meta: IGroupMeta) {
         const toggleAggregate = <HTMLElement>node.firstElementChild!;
         const toggleMore = <HTMLElement>node.lastElementChild!;
@@ -73,27 +71,57 @@ export default class AggregateGroupRenderer implements ICellRendererFactory {
   }
 
   createSummary(col: AggregateGroupColumn, context: IRenderContext) {
-    const cdown = cssClass('icon-caret-down');
-    const cright = cssClass('icon-caret-right');
     return {
-      template: `<div title="(Un)Aggregate All" class="${cdown}"></div>`,
+      template: `<div><div title="Expand All Groups"></div><div title="Show All"></div></div>`,
       update: (node: HTMLElement) => {
-        const ranking = col.findMyRanker();
-        const right = Boolean(ranking && ranking.getGroups().every((g) => col.isAggregated(g) >= 0));
+        const ranking = col.findMyRanker()!;
+        const groups = ranking.getGroups();
 
-        node.classList.toggle(cdown, !right);
-        node.classList.toggle(cright, right);
+        const toggleAggregate = <HTMLElement>node.firstElementChild!;
+        const toggleMore = <HTMLElement>node.lastElementChild!;
 
-        node.onclick = (evt) => {
-          evt.stopPropagation();
+        const isGroupOnly = groups.every((g) => col.isAggregated(g) === 'collapse');
+        const meta: IGroupMeta = groups.length <= 1 ? null : (isGroupOnly ? 'first last' : 'first top');
+        const isTopX = meta === 'first top';
+        const isShowAll = !isGroupOnly && !isTopX;
+
+        node.dataset.meta = meta!;
+        if (isShowAll) {
+          // expanded
+          toggleAggregate.title = 'Collapse Group';
+          toggleMore.title = 'Show Top';
+        } else if (isGroupOnly) {
+          // collapse
+          toggleAggregate.title = 'Expand Group';
+          toggleMore.title = 'Show Top';
+        } else {
+          // show top
+          toggleAggregate.title = 'Collapse Group';
+          toggleMore.title = 'Show All';
+        }
+        toggleAggregate.onclick = function (event) {
+          event.preventDefault();
+          event.stopPropagation();
+          const ranking = col.findMyRanker();
+          if (!ranking || !context) {
+            return;
+          }
+
+          const meta = node.dataset.meta!;
+          node.dataset.meta = meta === 'first last' ? 'first top' : 'first last';
+          context.provider.aggregateAllOf(ranking, meta === 'first last' ? 'expand_top' : 'collapse');
+        };
+        toggleMore.onclick = function (event) {
+          event.preventDefault();
+          event.stopPropagation();
           const ranking = col.findMyRanker();
           if (!ranking || !context) {
             return;
           }
-          const aggregate = node.classList.contains(cdown);
-          node.classList.toggle(cdown, !aggregate);
-          node.classList.toggle(cright, aggregate);
-          context.provider.aggregateAllOf(ranking, aggregate ? AGGREGATE_TO_TOP : -1);
+
+          const meta = node.dataset.meta!;
+          node.dataset.meta = meta === 'first top' ? 'first' : 'first top';
+          context.provider.aggregateAllOf(ranking, meta === 'first top' ? 'expand' : 'expand_top');
         };
       }
     };

diff --git a/src/styles/renderer/_aggregate.scss b/src/styles/renderer/_aggregate.scss
@@ -1,7 +1,7 @@
 @import '../vars';
 @import '../icons/index';
 
-.#{$engine_css_prefix}-td.#{$lu_css_prefix}-renderer-aggregate {
+.#{$lu_css_prefix}-renderer-aggregate {
   text-align: center;
   overflow-x: unset;
 
@@ -41,8 +41,8 @@
     &::before {
       @include lu_icons();
 
-      content: $lu_icon_ellipsis_h;
-      transform: rotate(270);
+      content: $lu_icon_expand;
+      transform: rotate(-45deg);
       padding-right: $lu_aggregate_square_bracket_width;
     }
   }
@@ -63,6 +63,12 @@
   }
 }
 
+.#{$lu_css_prefix}-renderer-aggregate[data-meta='first'] {
+  > :last-child::before {
+    content: $lu_icon_compress;
+  }
+}
+
 // .#{$lu_css_prefix}-renderer-aggregate[data-meta=last] {
 //   &::after {
 //     border-bottom: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
@@ -89,7 +95,9 @@
 
 
 .#{$lu_css_prefix}-summary.#{$lu_css_prefix}-renderer-aggregate {
-  padding-right: $lu_aggregate_square_bracket_width;
-  cursor: pointer;
   font-size: medium;
+
+  > :last-child {
+    display: none;
+  }
 }