docs(changeset): Updated selected cols bug

.changeset/loose-terms-march.md

@@ -0,0 +1,5 @@
+---
+'@warkypublic/oranguru': patch
+---
+
+Updated selected cols bug

src/Gridler/components/Computer.tsx

@@ -67,6 +67,7 @@ export const Computer = React.memo(() => {
     }
   );
 
+  //When values change, update selection
   useEffect(() => {
     const searchSelection = async () => {
       const page_data = getState('_page_data');
@@ -128,40 +129,12 @@ export const Computer = React.memo(() => {
     }
   }, [values]);
 
+  //Fire onChange when selection changes
   useEffect(() => {
     const onChange = getState('onChange');
     if (onChange && typeof onChange === 'function') {
-      const page_data = getState('_page_data');
+      const getGridSelectedRows = getState('getGridSelectedRows');
-      const pageSize = getState('pageSize');
+      const buffers = getGridSelectedRows();
-
-      const buffers = [];
-      if (_gridSelectionRows) {
-        for (const range of _gridSelectionRows) {
-          let buffer = undefined;
-
-          for (const p in page_data) {
-            for (const r in page_data[p]) {
-              const idx = Number(p) * pageSize + Number(r);
-              if (isNaN(idx)) {
-                continue;
-              }
-
-              if (Number(page_data[p][r]?._rownumber) === range + 1) {
-                buffer = page_data[p][r];
-                //console.log('Found row', range, idx, page_data[p][r]?._rownumber);
-                break;
-              } else if (idx === range + 1) {
-                buffer = page_data[p][r];
-                //console.log('Found row 2', range, idx, page_data[p][r]?._rownumber);
-                break;
-              }
-            }
-          }
-          if (buffer !== undefined) {
-            buffers.push(buffer);
-          }
-        }
-      }
 
       const _values = getState('values');
 
@@ -278,6 +251,7 @@ export const Computer = React.memo(() => {
     });
   }, [colOrder]);
 
+  //Initial Load
   useEffect(() => {
     if (!_glideref) {
       return;
@@ -291,11 +265,12 @@ export const Computer = React.memo(() => {
     });
   }, [ready, loadPage]);
 
+  //Logic to select first row on mount
   useEffect(() => {
     const _events = getState('_events');
     const loadPage = () => {
       const selectFirstRowOnMount = getState('selectFirstRowOnMount');
-      if (selectFirstRowOnMount) {
+      if (ready && selectFirstRowOnMount) {
         const scrollToRowKey = getState('scrollToRowKey');
         if (scrollToRowKey && scrollToRowKey >= 0) {
           return;
@@ -328,28 +303,28 @@ export const Computer = React.memo(() => {
     return () => {
       _events?.removeEventListener('loadPage', loadPage);
     };
-  }, []);
+  }, [ready]);
 
   /// logic to apply the selected row.
-  useEffect(() => {
+  // useEffect(() => {
-    const ready = getState('ready');
+  //   const ready = getState('ready');
-    const ref = getState('_glideref');
+  //   const ref = getState('_glideref');
-    const getRowIndexByKey = getState('getRowIndexByKey');
+  //   const getRowIndexByKey = getState('getRowIndexByKey');
 
-    if (scrollToRowKey && ref && ready) {
+  //   if (scrollToRowKey && ref && ready) {
-      getRowIndexByKey?.(scrollToRowKey).then((r) => {
+  //     getRowIndexByKey?.(scrollToRowKey).then((r) => {
-        if (r !== undefined) {
+  //       if (r !== undefined) {
-          //console.log('Scrolling to selected row:', scrollToRowKey, r);
+  //         //console.log('Scrolling to selected row:', scrollToRowKey, r);
-          ref.scrollTo(0, r);
+  //         ref.scrollTo(0, r);
-          getState('_events').dispatchEvent(
+  //         getState('_events').dispatchEvent(
-            new CustomEvent('scrollToRowKeyFound', {
+  //           new CustomEvent('scrollToRowKeyFound', {
-              detail: { rowNumber: r, scrollToRowKey: scrollToRowKey },
+  //             detail: { rowNumber: r, scrollToRowKey: scrollToRowKey },
-            })
+  //           })
-          );
+  //         );
-        }
+  //       }
-      });
+  //     });
-    }
+  //   }
-  }, [scrollToRowKey]);
+  // }, [scrollToRowKey]);
 
   useEffect(() => {
     const ready = getState('ready');

src/Gridler/components/GridlerStore.tsx

@@ -155,13 +155,14 @@ export interface GridlerState {
     selection: Rectangle,
     abortSignal: AbortSignal
   ) => CellArray | GetCellsThunk;
+  getGridSelectedRows: () => Array<any>;
   getRowBuffer: (row: number) => Record<string, any>;
   getRowIndexByKey: (key: number | string) => Promise<number | undefined>;
   getState: <K extends keyof GridlerStoreState>(key: K) => GridlerStoreState[K];
   hasLocalData: boolean;
   isEmpty: boolean;
-  loadingData?: boolean;
 
+  loadingData?: boolean;
   loadPage: (page: number, clearMode?: 'all' | 'page') => Promise<void>;
   mounted: boolean;
   onCellActivated: (cell: Item) => void;
@@ -278,6 +279,42 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
         return result as CellArray;
       };
     },
+    getGridSelectedRows: () => {
+      const state = get();
+      const buffers: Array<any> = [];
+      const page_data = state._page_data;
+      const pageSize = state.pageSize;
+
+      if (state._gridSelectionRows) {
+        for (const range of state._gridSelectionRows) {
+          let buffer = undefined;
+
+          for (const p in page_data) {
+            for (const r in page_data[p]) {
+              const idx = Number(p) * pageSize + Number(r);
+              if (isNaN(idx)) {
+                continue;
+              }
+
+              if (Number(page_data[p][r]?._rownumber) === range + 1) {
+                buffer = page_data[p][r];
+                //console.log('Found row', range, idx, page_data[p][r]?._rownumber);
+                break;
+              } else if (idx === range + 1) {
+                buffer = page_data[p][r];
+                //console.log('Found row 2', range, idx, page_data[p][r]?._rownumber);
+                break;
+              }
+            }
+          }
+          if (buffer !== undefined) {
+            buffers.push(buffer);
+          }
+        }
+      }
+      return buffers;
+    },
+
     getRowBuffer: (row: number) => {
       const state = get();
       //Handle local data
@@ -300,7 +337,6 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
 
       return rowData;
     },
-
     getRowIndexByKey: async (key: number | string) => {
       const state = get();
 
@@ -477,6 +513,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
       }
       return true;
     },
+
     onColumnResize: (
       column: GridColumn,
       newSize: number,
@@ -501,7 +538,6 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
         });
       }
     },
-
     onContextClick: (area: string, event: CellClickedEventArgs, col?: number, row?: number) => {
       const s = get();
       const coldef = s.renderColumns?.[col ?? -1];

src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx

@@ -77,6 +77,7 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
                 (f) =>
                   !f.disableFilter &&
                   !f.disableSearch &&
+                  !f.virtual &&
                   ((searchFields ?? []).length == 0 || searchFields?.includes(f.id))
               )
               ?.forEach((filter: any) => {
@@ -112,13 +113,6 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
             col_ids?.push(props.hotfields.join(','));
           }
 
-          if (ops && ops.length > 0) {
-            const optionHeaders = GoAPIHeaders(ops);
-            for (const oh in GoAPIHeaders(ops)) {
-              head.set(oh, optionHeaders[oh]);
-            }
-          }
-
           if (col_ids && col_ids.length > 0) {
             ops.push({
               type: 'select-fields',
@@ -126,6 +120,13 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
             });
           }
 
+          if (ops && ops.length > 0) {
+            const optionHeaders = GoAPIHeaders(ops);
+            for (const oh in GoAPIHeaders(ops)) {
+              head.set(oh, optionHeaders[oh]);
+            }
+          }
+
           const currentRequestIndex = _active_requests?.findIndex((f) => f.page === index) ?? -1;
           _active_requests?.forEach((r) => {
             if ((r.page >= 0 && r.page < index - 2) || (index >= 0 && r.page > index + 2)) {
@@ -262,7 +263,14 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
 
   //Reset the loaded pages to new rules
   useEffect(() => {
-    loadPage(0, 'all');
+    loadPage(0, 'all').then(() => {
+      const onChange = getState('onChange');
+      const getGridSelectedRows = getState('getGridSelectedRows');
+      if (onChange && typeof onChange === 'function') {
+        const buffers = getGridSelectedRows?.();
+        onChange(buffers);
+      }
+    });
   }, [JSON.stringify(props.options), props.filter, props.url, props.authtoken]);
 
   //Reset the function in the store.