Merge pull request #1562 from ghiscoding/feat/collection-lazy

feat(filter): add `collectionLazy` callback to Column Filter

Author: ghiscoding

docs/README.md

@@ -1,5 +1,5 @@
 # Documentation
 
-The [`docs`](https://github.com/ghiscoding/Angular-Slickgrid/tree/master/docs) folder of Angular-Slickgrid is the one-stop-shop for all project related documentation. 
+The [`docs`](https://github.com/ghiscoding/Angular-Slickgrid/tree/master/docs) folder of Angular-Slickgrid is the one-stop-shop for all project related documentation.
 
-Feel free to contribution documentation fixes by editing any of the markdown files in the [`docs`](https://github.com/ghiscoding/Angular-Slickgrid/tree/master/docs) folder.
+Feel free to contribute documentation fixes by editing any of the markdown files in the [`docs`](https://github.com/ghiscoding/Angular-Slickgrid/tree/master/docs) folder.

docs/column-functionalities/editors/select-dropdown-editor.md

@@ -173,7 +173,7 @@ this.columnDefinitions = [
 ```
 
 ### Collection Watch
-Sometime you wish that whenever you change your filter collection, you'd like the filter to be updated, it won't do that by default but you could use `enableCollectionWatch` for that purpose to add collection observers and re-render the Filter DOM element whenever the collection changes. Also note that using `collectionAsync` will automatically watch for changes, so there's no need to enable this flag for that particular use case.
+Sometime you wish that whenever you make a change in your filter collection, you'd like the filter to be updated but it won't do that by default. You could use `enableCollectionWatch` for that purpose which will add a collection observers and re-render the Filter DOM element whenever the collection changes. Also note that using `collectionAsync` will automatically watch for changes, so there's no need to enable this flag for that particular use case.
 
 ```typescript
 this.columnDefinitions = [

docs/column-functionalities/filters/select-filter.md

@@ -6,15 +6,16 @@
 - [How to add Translation](#how-to-add-translation)
 - [How to filter empty values](#how-to-filter-empty-values)
 - Collection Options
-   - [Add Blank Entry](#collection-add-blank-entry)
-   - [Add Custom Entry at Beginning/End of Collection](#collection-add-custom-entry-at-the-beginningend-of-the-collection)
-   - [Custom Structure](#custom-structure-keylabel-pair)
-   - [Custom Structure with Translation](#custom-structure-with-translation)
-   - [Collection filterBy/sortBy](#collection-filterbysortby)
-   - [Collection Label Prefix/Suffix](#collection-label-prefixsuffix)
-   - [Collection Label Render HTML](#collection-label-render-html)
-   - [Collection Async Load](#collection-async-load)
-   - [Collection Watch](#collection-watch)
+  - [Add Blank Entry](#collection-add-blank-entry)
+  - [Add Custom Entry at Beginning/End of Collection](#collection-add-custom-entry-at-the-beginningend-of-the-collection)
+  - [Custom Structure](#custom-structure-keylabel-pair)
+  - [Custom Structure with Translation](#custom-structure-with-translation)
+  - [Collection filterBy/sortBy](#collection-filterbysortby)
+  - [Collection Label Prefix/Suffix](#collection-label-prefixsuffix)
+  - [Collection Label Render HTML](#collection-label-render-html)
+  - [Collection Async Load](#collection-async-load)
+  - [Collection Lazy Load](#collection-lazy-load)
+  - [Collection Watch](#collection-watch)
 - [`multiple-select.js` Options](#multiple-selectjs-options)
   - [Filter Options (`MultipleSelectOption` interface)](#filter-options-multipleselectoption-interface)
   - [Display shorter selected label text](#display-shorter-selected-label-text)
@@ -536,6 +537,24 @@ For example
   }
 ```
 
+### Collection Lazy Load
+In some cases, you might have a grid with a lot of columns and loading the collection only after opening the select dropdown (or never in some cases) might help speeding up the initial grid loading. So for that use case, defining a `collectionLazy` callback can help.
+
+#### Load the collection through an Http callback
+
+```ts
+this.columnDefinitions = [
+    {
+    id: 'prerequisites', name: 'Prerequisites', field: 'prerequisites',
+    filterable: true,
+    filter: {
+      collectionLazy: (col: Column) => this.http.fetch('api/data/pre-requisites'),
+      model: Filters.multipleSelect,
+    }
+  }
+];
+```
+
 ### Collection Watch
 We can enable the collection watch via the column filter `enableCollectionWatch` flag, or if you use a `collectionAsync` then this will be enabled by default. The collection watch will basically watch for any changes applied to the collection (any mutation changes like `push`, `pop`, `unshift`, ...) and will also watch for the `filter.collection` array replace, when any changes happens then it will re-render the Select Filter with the updated collection list.
 

package.json

@@ -52,13 +52,13 @@
   },
   "dependencies": {
     "@ngx-translate/core": "^15.0.0",
-    "@slickgrid-universal/common": "~5.13.4",
-    "@slickgrid-universal/custom-footer-component": "~5.13.4",
-    "@slickgrid-universal/empty-warning-component": "~5.13.4",
+    "@slickgrid-universal/common": "5.14.0",
+    "@slickgrid-universal/custom-footer-component": "5.14.0",
+    "@slickgrid-universal/empty-warning-component": "5.14.0",
     "@slickgrid-universal/event-pub-sub": "~5.13.0",
-    "@slickgrid-universal/pagination-component": "~5.13.4",
-    "@slickgrid-universal/row-detail-view-plugin": "~5.13.4",
-    "@slickgrid-universal/rxjs-observable": "~5.13.4",
+    "@slickgrid-universal/pagination-component": "5.14.0",
+    "@slickgrid-universal/row-detail-view-plugin": "5.14.0",
+    "@slickgrid-universal/rxjs-observable": "5.14.0",
     "dequal": "^2.0.3",
     "rxjs": "^7.8.2"
   },
@@ -98,12 +98,12 @@
     "@nx/vite": "^20.8.1",
     "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^10.0.1",
-    "@slickgrid-universal/composite-editor-component": "~5.13.4",
-    "@slickgrid-universal/custom-tooltip-plugin": "~5.13.4",
-    "@slickgrid-universal/excel-export": "~5.13.4",
-    "@slickgrid-universal/graphql": "~5.13.4",
-    "@slickgrid-universal/odata": "~5.13.4",
-    "@slickgrid-universal/text-export": "~5.13.4",
+    "@slickgrid-universal/composite-editor-component": "~5.14.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "~5.14.0",
+    "@slickgrid-universal/excel-export": "~5.14.0",
+    "@slickgrid-universal/graphql": "~5.14.0",
+    "@slickgrid-universal/odata": "~5.14.0",
+    "@slickgrid-universal/text-export": "~5.14.0",
     "@types/fnando__sparkline": "^0.3.7",
     "@types/node": "^22.15.2",
     "@types/sortablejs": "^1.15.8",

src/app/examples/grid-custom-tooltip.component.html

@@ -21,9 +21,14 @@ <h2>
   </h2>
   <div class="subtitle" [innerHTML]="subTitle"></div>
 
-  <div style="margin-bottom: 20px">
-    <label for="pinned-rows">Simulated Server Delay (ms): </label>
-    <input type="number" id="server-delay" data-test="server-delay" style="width: 60px" [(ngModel)]="serverApiDelay" />
+  <div class="row">
+    <div class="col" style="margin-bottom: 20px">
+      <label for="pinned-rows">Simulated Server Delay (ms): </label>
+      <input type="number" id="server-delay" data-test="server-delay" style="width: 60px" [(ngModel)]="serverApiDelay" />
+    </div>
+    <div class="alert alert-info is-narrow col" [ngClass]="!showLazyLoading ? 'invisible' : ''" data-test="alert-lazy">
+      Lazy loading collection...
+    </div>
   </div>
 
   <angular-slickgrid

src/app/examples/grid-custom-tooltip.component.ts

@@ -16,7 +16,7 @@ import {
   SlickGrid,
 } from '../modules/angular-slickgrid';
 
-const NB_ITEMS = 500;
+const NB_ITEMS = 1000;
 
 @Component({
   templateUrl: './grid-custom-tooltip.component.html',
@@ -41,6 +41,7 @@ export class GridCustomTooltipComponent implements OnInit {
   gridOptions!: GridOption;
   dataset!: any[];
   serverApiDelay = 500;
+  showLazyLoading = false;
   hideSubTitle = false;
 
   ngOnInit(): void {
@@ -309,12 +310,23 @@ export class GridCustomTooltipComponent implements OnInit {
           model: Editors.multipleSelect,
         },
         filter: {
-          // collectionAsync: fetch(URL_SAMPLE_COLLECTION_DATA),
-          collectionAsync: new Promise((resolve) => {
-            window.setTimeout(() => {
-              resolve(Array.from(Array(this.dataset.length).keys()).map((k) => ({ value: k, label: `Task ${k}` })));
+          // collectionAsync: fetch(SAMPLE_COLLECTION_DATA_URL),
+          // collectionAsync: new Promise((resolve) => {
+          //   window.setTimeout(() => {
+          //     resolve(Array.from(Array(dataset.value?.length).keys()).map((k) => ({ value: k, label: `Task ${k}` })));
+          //   });
+          // }),
+          collectionLazy: () => {
+            this.showLazyLoading = true;
+
+            return new Promise((resolve) => {
+              window.setTimeout(() => {
+                this.showLazyLoading = false;
+                resolve(Array.from(Array((this.dataset || []).length).keys()).map((k) => ({ value: k, label: `Task ${k}` })));
+              }, this.serverApiDelay);
             });
-          }),
+          },
+          // onInstantiated: (msSelect) => console.log('ms-select instance', msSelect),
           customStructure: {
             label: 'label',
             value: 'value',
@@ -323,6 +335,9 @@ export class GridCustomTooltipComponent implements OnInit {
           collectionOptions: {
             separatorBetweenTextLabels: ' ',
           },
+          filterOptions: {
+            minHeight: 70,
+          },
           model: Filters.multipleSelect,
           operator: OperatorType.inContains,
         },

src/styles.scss

@@ -34,6 +34,10 @@ $button-style-bg-color: #fff;
   display: none;
 }
 
+.invisible {
+  opacity: 0;
+}
+
 .btn-group-xs > .btn,
 .btn-xs {
   padding: 1px 5px;

test/cypress/e2e/example32.cy.ts

@@ -28,7 +28,7 @@ describe('Example 32 - Regular & Custom Tooltips', () => {
   });
 
   it('should change server delay to 10ms for faster testing', () => {
-    cy.get('[data-test="server-delay"]').type('{backspace}{backspace}{backspace}10');
+    cy.get('[data-test="server-delay"]').clear().type('50');
   });
 
   it('should mouse over 1st row checkbox column and NOT expect any tooltip to show since it is disabled on that column', () => {
@@ -83,7 +83,7 @@ describe('Example 32 - Regular & Custom Tooltips', () => {
   it('should mouse over Task 6 cell on "Start" column and expect a delayed tooltip opening via async process', () => {
     cy.get('.slick-custom-tooltip').should('not.exist');
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).as('start6-cell');
-    cy.get('@start6-cell').contains(/\d{4}-\d{1,2}-\d{1,2}$/); // use regexp to make sure it's a number
+    cy.get('@start6-cell').contains(/\d{4}-\d{2}-\d{2}$/); // use regexp to make sure it's a number
     cy.get('@start6-cell').trigger('mouseover');
 
     cy.wait(10);
@@ -211,11 +211,20 @@ describe('Example 32 - Regular & Custom Tooltips', () => {
     cy.get('@finish-filter').trigger('mouseout');
   });
 
+  it('should open PreRequisite dropdown and expect it be lazily loaded', () => {
+    cy.get('.slick-headerrow-columns .slick-headerrow-column:nth(10)').as('checkbox10-header');
+    cy.get('@checkbox10-header').click();
+    cy.get('[data-test="alert-lazy"]').should('be.visible');
+    cy.wait(50);
+    cy.get('@checkbox10-header').click();
+    cy.get('[data-test="alert-lazy"]').should('not.be.visible');
+  });
+
   it('should mouse over header-row (filter) Prerequisite column and expect to see tooltip of selected filter options', () => {
-    cy.get(`.slick-headerrow-columns .slick-headerrow-column:nth(10)`).as('checkbox10-header');
+    cy.get('.slick-headerrow-columns .slick-headerrow-column:nth(10)').as('checkbox10-header');
     cy.get('@checkbox10-header').trigger('mouseover');
 
-    cy.get('.filter-prerequisites .ms-choice span').contains('15 of 500 selected');
+    cy.get('.filter-prerequisites .ms-choice span').contains('15 of 1000 selected');
     cy.get('.slick-custom-tooltip').should('be.visible');
     cy.get('.slick-custom-tooltip').contains(
       'Task 1, Task 3, Task 5, Task 7, Task 9, Task 12, Task 15, Task 18, Task 21, Task 25, Task 28, Task 29, Task 30, Task 32, Task 34'
@@ -225,15 +234,15 @@ describe('Example 32 - Regular & Custom Tooltips', () => {
   });
 
   it('should mouse over header title on 1st column with checkbox and NOT expect any tooltip to show since it is disabled on that column', () => {
-    cy.get(`.slick-header-columns .slick-header-column:nth(0)`).as('checkbox-header');
+    cy.get('.slick-header-columns .slick-header-column:nth(0)').as('checkbox-header');
     cy.get('@checkbox-header').trigger('mouseover');
 
     cy.get('.slick-custom-tooltip').should('not.exist');
     cy.get('@checkbox-header').trigger('mouseout');
   });
 
   it('should mouse over header title on 2nd column with Title name and expect a tooltip to show rendered from an headerFormatter', () => {
-    cy.get(`.slick-header-columns .slick-header-column:nth(1)`).as('checkbox0-header');
+    cy.get('.slick-header-columns .slick-header-column:nth(1)').as('checkbox0-header');
     cy.get('@checkbox0-header').trigger('mouseover');
 
     cy.get('.slick-custom-tooltip').should('be.visible');
@@ -246,7 +255,7 @@ describe('Example 32 - Regular & Custom Tooltips', () => {
   });
 
   it('should mouse over header title on 2nd column with Finish name and NOT expect any tooltip to show since it is disabled on that column', () => {
-    cy.get(`.slick-header-columns .slick-header-column:nth(8)`).as('finish-header');
+    cy.get('.slick-header-columns .slick-header-column:nth(8)').as('finish-header');
     cy.get('@finish-header').trigger('mouseover');
 
     cy.get('.slick-custom-tooltip').should('not.exist');