Merge pull request #590 from lineupjs/sgratzl/clearselection

feat: add clear button to selection column
lineupjs · Aug 2, 2022 · e7983e5 · e7983e5
2 parents b57f4d2 + 6df7099
commit e7983e5
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 11 deletions.
diff --git a/src/model/SelectionColumn.ts b/src/model/SelectionColumn.ts
@@ -61,7 +61,7 @@ export declare function filterChanged_SEC(previous: Set<number> | null, current:
  * a checkbox column for selections
  */
 @SupportType()
-@toolbar('sort', 'sortBy', 'group', 'groupBy', 'invertSelection', 'filterSelection')
+@toolbar('sort', 'sortBy', 'group', 'groupBy', 'clearSelection', 'invertSelection', 'filterSelection')
 @Category('support')
 export default class SelectionColumn extends ValueColumn<boolean> {
   static readonly EVENT_FILTER_CHANGED = 'filterChanged';

diff --git a/src/styles/header/_toolbar.scss b/src/styles/header/_toolbar.scss
@@ -134,6 +134,10 @@
   content: $lu_icon_toggle_left;
 }
 
+.#{$lu_css_prefix}-action-clear-selection::before {
+  content: $lu_icon_times;
+}
+
 .#{$lu_css_prefix}-action-invert-selection::before {
   content: $lu_icon_check_square_o;
 }

diff --git a/src/styles/panel/_index.scss b/src/styles/panel/_index.scss
@@ -23,7 +23,8 @@
   }
 }
 
-.#{$lu_css_prefix}-stats-reset {
+.#{$lu_css_prefix}-stats-reset,
+.#{$lu_css_prefix}-stats-clear-selection {
   padding: 2px;
   font-style: normal;
   display: unset;

diff --git a/src/ui/panel/SidePanel.ts b/src/ui/panel/SidePanel.ts
@@ -355,12 +355,18 @@ export default class SidePanel {
     }
     const stats = this.node.querySelector<HTMLElement>(`.${cssClass('stats')}`);
     const s = this.data.getSelection();
+    const clearSelection =
+      s.length === 0
+        ? ''
+        : `<i class="${cssClass('action')} ${cssClass('action-clear-selection')} ${cssClass(
+            'stats-clear-selection'
+          )}" title="Clear selection"><span class="${cssClass('aria')}" aria-hidden="true">Clear Selection</span></i>`;
     const r = this.data.getFirstRanking();
     const f = format(',d');
     const visible = r ? r.getGroups().reduce((a, b) => a + b.order.length, 0) : 0;
     const total = this.data.getTotalNumberOfRows();
     stats.innerHTML = `Showing <strong>${f(visible)}</strong> of ${f(total)} items${
-      s.length > 0 ? `; <span>${f(s.length)} selected</span>` : ''
+      s.length > 0 ? `; <span>${f(s.length)} selected ${clearSelection}</span>` : ''
     }${
       visible < total
         ? ` <i class="${cssClass('action')} ${cssClass('action-filter')} ${cssClass(
@@ -370,14 +376,22 @@ export default class SidePanel {
     }`;
 
     const resetButton = stats.querySelector<HTMLElement>(`.${cssClass('stats-reset')}`);
-    if (!resetButton) {
-      return;
+    if (resetButton) {
+      resetButton.onclick = (evt) => {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.data.clearFilters();
+      };
+    }
+
+    const clearButton = stats.querySelector<HTMLElement>(`.${cssClass('stats-clear-selection')}`);
+    if (clearButton) {
+      clearButton.onclick = (evt) => {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.data.setSelection([]);
+      };
     }
-    resetButton.onclick = (evt) => {
-      evt.preventDefault();
-      evt.stopPropagation();
-      this.data.clearFilters();
-    };
   }
 
   destroy() {

diff --git a/src/ui/toolbar.ts b/src/ui/toolbar.ts
@@ -293,6 +293,7 @@ export const toolbarActions: { [key: string]: IToolbarAction } = {
     featureLevel: 'basic',
   }),
   filterSelection: uiDialog('Filter …', SelectionFilterDialog, (ctx) => [ctx], {
+    order: 8,
     mode: 'menu+shortcut',
     featureCategory: 'ranking',
     featureLevel: 'basic',
@@ -357,6 +358,17 @@ export const toolbarActions: { [key: string]: IToolbarAction } = {
     },
     { featureCategory: 'model', featureLevel: 'advanced' }
   ),
+  clearSelection: ui(
+    'Clear Selection',
+    (_col, _evt, ctx, level) => {
+      ctx.dialogManager.removeAboveLevel(level - 1); // close itself
+      const s = ctx.provider.getSelection();
+      if (s.length > 0) {
+        ctx.provider.setSelection([]);
+      }
+    },
+    { featureCategory: 'model', featureLevel: 'advanced', order: 11 }
+  ),
   invertSelection: ui(
     'Invert Selection',
     (col, _evt, ctx, level) => {
@@ -371,7 +383,7 @@ export const toolbarActions: { [key: string]: IToolbarAction } = {
       const others = order.filter((d) => !ss.has(d));
       ctx.provider.setSelection(others);
     },
-    { featureCategory: 'model', featureLevel: 'advanced' }
+    { featureCategory: 'model', featureLevel: 'advanced', order: 10 }
   ),
 };