docs(changeset): Added selectFirstRowOnMount and fixed selection of first row

.changeset/sad-ideas-raise.md

@@ -0,0 +1,5 @@
+---
+'@warkypublic/oranguru': patch
+---
+
+Added selectFirstRowOnMount and fixed selection of first row

src/Gridler/components/Computer.tsx

@@ -245,6 +245,45 @@ export const Computer = React.memo(() => {
     loadPage(0);
   }, [ready, loadPage]);
 
+  useEffect(() => {
+    const _events = getState('_events');
+    const loadPage = () => {
+      const selectFirstRowOnMount = getState('selectFirstRowOnMount');
+      if (selectFirstRowOnMount) {
+        const selectedRow = getState('selectedRow');
+        if (selectedRow && selectedRow >= 0) {
+          return;
+        }
+        const keyField = getState('keyField') ?? 'id';
+        const page_data = getState('_page_data');
+        const firstBuffer = page_data?.[0]?.[0];
+        const firstRow = firstBuffer?.[keyField];
+
+        if (firstRow && firstRow > 0) {
+          const values = [
+            firstBuffer,
+            ...((getState('values') ?? []) as Array<Record<string, unknown>>),
+          ];
+
+          const onChange = getState('onChange');
+          console.log('Selecting first row:', firstRow, firstBuffer, values);
+          if (onChange) {
+            onChange(values);
+          } else {
+            setState('values', values);
+          }
+
+          setState('selectedRow', firstRow);
+        }
+      }
+    };
+
+    _events?.addEventListener('loadPage', loadPage);
+
+    return () => {
+      _events?.removeEventListener('loadPage', loadPage);
+    };
+  }, []);
   // console.log('Gridler:Debug:Computer', {
   //   colFilters,
   //   colOrder,

src/Gridler/components/GridlerStore.tsx

@@ -56,7 +56,6 @@ export type FilterOptionOperator =
   | 'startswith';
 
 export interface GridlerProps extends PropsWithChildren {
-  askAPIRowNumber?: (key: string) => Promise<number>;
   columns?: GridlerColumns;
 
   defaultSort?: Array<SortOption>;
@@ -99,13 +98,14 @@ export interface GridlerProps extends PropsWithChildren {
     top?: React.ReactNode;
   };
   selectedRow?: number;
+  selectFirstRowOnMount?: boolean;
   selectMode?: 'cell' | 'row';
   showMenu?: (id: string, options?: Partial<MantineBetterMenuInstance>) => void;
   title?: string;
   tooltipBarProps?: React.HTMLAttributes<HTMLDivElement>;
   total_rows?: number;
   uniqueid: string;
-  useAPIQuery?: (index: number) => Promise<Array<Record<string, any>>>;
+
   values?: Array<Record<string, any>>;
   width?: number | string;
 }
@@ -124,13 +124,14 @@ export interface GridlerState {
   _visiblePages: Rectangle;
 
   addError: (err: string, ...args: Array<any>) => void;
+  askAPIRowNumber?: (key: string) => Promise<number>;
   colFilters?: Array<FilterOption>;
   colOrder?: Record<string, number>;
   colSize?: Record<string, number>;
   colSort?: Array<SortOption>;
   data?: Array<any>;
-
   errors: Array<string>;
+
   focused?: boolean;
   get: () => GridlerState;
   getCellContent: (cell: Item) => GridCell;
@@ -140,8 +141,8 @@ export interface GridlerState {
   ) => CellArray | GetCellsThunk;
   getRowBuffer: (row: number) => Record<string, any>;
   getState: <K extends keyof GridlerStoreState>(key: K) => GridlerStoreState[K];
-
   hasLocalData: boolean;
+
   loadingData?: boolean;
   loadPage: (page: number, clearMode?: 'all' | 'page') => Promise<void>;
   mounted: boolean;
@@ -159,7 +160,6 @@ export interface GridlerState {
   onHeaderClicked: (colIndex: number, event: HeaderClickedEventArgs) => void;
   onHeaderMenuClick: (col: number, screenPosition: Rectangle) => void;
   onItemHovered: (args: GridMouseEventArgs) => void;
-
   onVisibleRegionChanged: (
     r: Rectangle,
     tx: number,
@@ -172,6 +172,7 @@ export interface GridlerState {
   ) => void;
 
   pageSize: number;
+
   ready: boolean;
   reload?: () => Promise<void>;
   renderColumns?: GridlerColumns;
@@ -184,6 +185,7 @@ export interface GridlerState {
     value: (current: GridlerStoreState[K]) => Partial<GridlerStoreState[K]>
   ) => Promise<void>;
   toCell: <TRowType extends Record<string, string>>(row: TRowType, col: number) => GridCell;
+  useAPIQuery?: (index: number) => Promise<Array<Record<string, any>>>;
 }
 
 export type GridlerStoreState = GridlerProps & GridlerState;
@@ -842,6 +844,11 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
 
         if (rowIndex > 0) {
           ref.scrollTo(0, rowIndex);
+          getState('_events').dispatchEvent(
+            new CustomEvent('selectedRowFound', {
+              detail: { rowNumber: rowIndex, selectedRow: selectedRow },
+            })
+          );
         } else if (typeof askAPIRowNumber === 'function') {
           askAPIRowNumber(String(selectedRow))
             .then((r) => {
@@ -868,6 +875,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
     return {
       ...props,
 
+      colSort: props.defaultSort ?? getState('colSort') ?? [],
       hideMenu: props.hideMenu ?? menus.hide,
       showMenu: props.showMenu ?? menus.show,
       total_rows: props.total_rows ?? getState('total_rows') ?? 0,

src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx

@@ -7,17 +7,19 @@ import { GoAPIHeaders, type GoAPIOperation } from '../../utils/golang-restapi-v2
 import { useGridlerStore } from '../GridlerStore';
 
 export interface GlidlerAPIAdaptorForGoLangv2Props<T = unknown> extends APIOptions {
+  filter?: string;
   initialData?: Array<T>;
   options?: Array<GoAPIOperation>;
 }
 
 function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForGoLangv2Props<T>) {
-  const [setStateFN, setState, getState, addError, mounted] = useGridlerStore((s) => [
+  const [setStateFN, setState, getState, addError, mounted, loadPage] = useGridlerStore((s) => [
     s.setStateFN,
     s.setState,
     s.getState,
     s.addError,
     s.mounted,
+    s.loadPage,
   ]);
 
   const useAPIQuery: (index: number) => Promise<any> = useCallback(
@@ -54,7 +56,9 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
                 }
               });
           }
-
+          if (props.filter && props.filter !== '') {
+            head.set('x-custom-sql-w-buildin-filter', props.filter);
+          }
           if (props.options && props.options.length > 0) {
             const optionHeaders = GoAPIHeaders(props.options);
             for (const oh in optionHeaders) {
@@ -116,7 +120,16 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
       setState('loadingData', false);
       return [];
     },
-    [getState, props.authtoken, props.url, props.options, setState, setStateFN, addError]
+    [
+      getState,
+      props.authtoken,
+      props.url,
+      props.filter,
+      props.options,
+      setState,
+      setStateFN,
+      addError,
+    ]
   );
 
   const askAPIRowNumber: (key: string) => Promise<number> = useCallback(
@@ -141,6 +154,10 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
             });
         }
 
+        if (props.filter && props.filter !== '') {
+          head.set('x-custom-sql-w-buildin-filter', props.filter);
+        }
+
         if (props.options && props.options.length > 0) {
           const optionHeaders = GoAPIHeaders(props.options);
           for (const oh in optionHeaders) {
@@ -165,13 +182,19 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
       }
       return [];
     },
-    [props.url, props.authtoken, props.options, getState, addError]
+    [props.url, props.authtoken, props.filter, props.options, getState, addError]
   );
 
+  //Reset the loaded pages to new rules
+  useEffect(() => {
+    loadPage(0, 'all');
+  }, [JSON.stringify(props.options), props.filter, props.url, props.authtoken]);
+
+  //Reset the function in the store.
   useEffect(() => {
     setState('useAPIQuery', useAPIQuery);
     setState('askAPIRowNumber', askAPIRowNumber);
-  }, [props.url, props.authtoken, props.options, mounted, setState]);
+  }, [props.url, props.authtoken, props.filter, props.options, mounted, setState]);
 
   return <></>;
 }

src/Gridler/stories/Examples.goapi.tsx

@@ -108,6 +108,7 @@ export const GridlerGoAPIExampleEventlog = () => {
         }}
         sections={{ ...sections, rightElementDisabled: false }}
         selectedRow={selectRow ? parseInt(selectRow, 10) : undefined}
+        selectFirstRowOnMount={true}
         selectMode="row"
         title="Go API Example"
         uniqueid="gridtest"