Added Lazy load hierarchical example

Added Sql builder example
Bumped latest grid versions.

Author: flexicious

apps/graphql-apollo-react/components/RestaurantsDataGrid.tsx

@@ -1,90 +1,81 @@
 import { createColumn, FilterOperation, FilterPageSortArguments, FilterPageSortChangeReason, FilterPageSortLoadMode, ServerInfo } from "@euxdt/grid-core";
 import { createMultiSelectFilterOptions, createNumericRangeFilterOptions, createTextInputFilterOptions } from "@euxdt/grid-react";
-import { useEffect, useMemo, useReducer, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { client } from "../graphql/client/apollo-client";
 import { BusinessQuery } from "../graphql/client/queries/business";
 import { DataGrid } from "./DataGrid";
 
 
 export const RestaurantsDataGrid = () => {
     const [loading, setLoading] = useState<boolean>(true);
-    const [filterPageSortArgs, setFilterPageSortArgs] = useState<FilterPageSortArguments>();
-    const [serverInfo, dispatch] = useReducer( (state: ServerInfo, action: { type: "SET_SERVER_INFO";
-        payload: Partial<ServerInfo>;
-      }): ServerInfo => {
-        switch (action.type) {
-          case "SET_SERVER_INFO":
-            return { ...state, ...action.payload };
-          default:
-            return state;
-        }
-      }, {});
+    const [request, setRequest] = useState<FilterPageSortArguments>();
+    const [response, setResponse] = useState<ServerInfo>({});
 
     const uniqueIdentifierOptions = useMemo(() => ({
         useField: "business_id",
     }), []);
-    const filterValueColumns = useMemo(() => ["name", "city"], []);
-    const footerValueColumns = useMemo(() => ["inspection_count", "violation_count"], []);
+    const initialLoadDistinctValueColumns = useMemo(() => ["name", "city","TaxCode"], []);
     useEffect(() => {
-        setFilterPageSortArgs({
-            distinctValueColumns: filterValueColumns,
-            footerValueColumns,
+        //Initial load
+        setRequest({
+            distinctValueColumns: initialLoadDistinctValueColumns,
             filter: { children: [] },
             pagination: { pageSize: 100, currentPage: 1 },
+            reason: FilterPageSortChangeReason.InitialLoad,
         });
-    }, [filterValueColumns, footerValueColumns]);
+    }, [initialLoadDistinctValueColumns]);
     useEffect(() => {
-        if (!filterPageSortArgs) return;
+        if (!request) return;
         const getServerData = async (filterPageSortArgs: FilterPageSortArguments) => {
-            const { pagination } = filterPageSortArgs;
             setLoading(true);
             const response = await client.query({
                 query: BusinessQuery,
                 variables: {
                     args: filterPageSortArgs,
                 },
+            })
+            const result = response.data.businesses;
+            const newResponse = {...result};
+            setResponse(s=>{
+                //Merge the new response with the old response.
+                if (Object.keys(result.filterDistinctValues || {}).length > 0) {
+                    newResponse.filterDistinctValues = { ...s.filterDistinctValues, ...result.filterDistinctValues };
+                } else {
+                    delete newResponse.filterDistinctValues;
+                }
+                return {
+                    ...s,
+                    ...newResponse,
+                    pagination: {
+                        ...s.pagination,
+                        ...newResponse.pagination,
+                    },
+                };
             });
-            const newServerInfo: ServerInfo = {
-                currentPageData: response.data.businesses.rows,
-                pagination: {
-                    currentPage: pagination?.currentPage || 1,
-                    pageSize: pagination?.pageSize || 100,
-                    totalRecords: response.data.businesses.count || 0,
-                    totalPages: Math.ceil(response.data.businesses.count / (pagination?.pageSize || 100)),
-                },
-            };
-            if(Object.keys(response.data.businesses.filterDistinctValues || {}).length > 0) {
-                newServerInfo.filterDistinctValues = response.data.businesses.filterDistinctValues;
-            }
-            if(Object.keys(response.data.businesses.footerValues || {}).length > 0) {
-                newServerInfo.footerValues = response.data.businesses.footerValues;
-            }
-            dispatch({ type: "SET_SERVER_INFO", payload: newServerInfo });
-
             setLoading(false);
         };
-        getServerData(filterPageSortArgs);
-    }, [filterPageSortArgs]);
+        getServerData(request);
+    }, [request]);
 
 
     return (
         <DataGrid style={{height:"100%", }}
         gridOptions={{
-            dataProvider: serverInfo?.currentPageData,
+            dataProvider: response?.currentPageData,
             filterPageSortMode: FilterPageSortLoadMode.Server,
             enablePaging: true,
-            serverInfo,
+            serverInfo: response,
             toolbarOptions: {
                 enableGlobalSearch: false,
                 enableExcel:true,
                 enablePdf:true,
             },
             eventBus: {
                 onFilterPageSortChanged: (args: FilterPageSortArguments, reason: FilterPageSortChangeReason) => {
-                    setFilterPageSortArgs({
+                    setRequest({
                         ...args,
-                        distinctValueColumns: [],//don't need distinct values on subsequent calls, footers only need to be updated on filter change
-                        footerValueColumns: reason === FilterPageSortChangeReason.FilterChanged ? footerValueColumns : [],
+                        reason,
+                        distinctValueColumns: [],//don't need distinct values on subsequent calls
                     });
                 },
                 onExportPageRequested: async(args) => {
@@ -94,7 +85,7 @@ export const RestaurantsDataGrid = () => {
                             args,
                         },
                     });
-                    return response.data.businesses.rows;
+                    return response.data.businesses.currentPageData;
                 },
             },
             isLoading: loading,
@@ -111,6 +102,10 @@ export const RestaurantsDataGrid = () => {
                     ...createColumn("name", "string", "Name"),
                     filterOptions: createMultiSelectFilterOptions()
                 },
+                {
+                    ...createColumn("TaxCode", "string", "Tax Code"),
+                    filterOptions: createMultiSelectFilterOptions()
+                },
                 {
                     ...createColumn("inspection_count", "number", "Inspection Count"),
                     width: 100,
@@ -145,10 +140,6 @@ export const RestaurantsDataGrid = () => {
                     ...createColumn("longitude", "number", "Longitude"),
                     filterOptions: createNumericRangeFilterOptions(),
                 },
-                {
-                    ...createColumn("TaxCode", "string", "Tax Code"),
-                    filterOptions: createTextInputFilterOptions(FilterOperation.Wildcard),
-                },
                 {
                     ...createColumn("business_certificate", "number", "Business_certificate"),
                     filterOptions: createNumericRangeFilterOptions(),

apps/graphql-apollo-react/graphql/client/queries/business.ts

@@ -2,7 +2,7 @@ import {  gql } from 'apollo-server-micro';
 
 export const BusinessQuery = gql`query Query($args: FilterPageSortArguments) {
   businesses(args: $args) {
-    rows {
+    currentPageData {
       business_id
       name
       address
@@ -23,10 +23,14 @@ export const BusinessQuery = gql`query Query($args: FilterPageSortArguments) {
       violation_count
 
     }
-
+    pagination {
+      totalRecords
+      pageSize
+      currentPage
+      totalPages
+    }
     footerValues 
     filterDistinctValues
-    count
   }
 }
 `;

apps/graphql-apollo-react/graphql/resolvers/business.ts

@@ -1,51 +1,65 @@
-import { FilterPageSortArguments,ServerResponse,NameValue } from '@euxdt/grid-core'; 
-import { buildWhereClause, getRowsFromSqlite } from 'apps/graphql-apollo-react/shared/sql-builder';
+import { buildSqlWhereClause, FilterPageSortArguments, FilterPageSortChangeReason, NameValue, ServerInfo } from '@euxdt/grid-core';
+import { getRowsFromSqlite } from '@euxdt/grid-shared';
 import { Business } from 'apps/graphql-apollo-react/shared/types';
+const sqlite3 = require('sqlite3').verbose();
+const getDb = () => new sqlite3.Database('dbs/sf-restaurants.db');
 export const BusinessResolver = {
   Query: {
     businesses: async (
       _,
       { args }: { args: FilterPageSortArguments },
-    ) : Promise<ServerResponse<Business>> => {
-      const { filter, distinctValueColumns, footerValueColumns } = args;
+    ): Promise<ServerInfo> => {
+      const { filter, distinctValueColumns, pagination, reason } = args;
       const params = [];
       const noPagingParams = [];
-      const noPagingWhereClause = buildWhereClause( {filter}, noPagingParams, false );
+      const noPagingWhereClause = buildSqlWhereClause({ filter }, noPagingParams, false);
+      const footerValueColumns = ["inspection_count", "violation_count"];
       const countSelect = `select count(*) as count from businesses ${noPagingWhereClause}`;
-      const count = await getRowsFromSqlite(countSelect, params)
-      const businessQuery =  buildWhereClause(args,params);
-      console.log(businessQuery);
-      const businessSelect = `select businesses.*,
-      (select count(*) from inspections where inspections.business_id = businesses.business_id) as inspection_count,
-      (select count(*) from violations where violations.business_id = businesses.business_id) as violation_count
-       from businesses ${businessQuery}`;
-      const businesses = await getRowsFromSqlite<Business>(businessSelect,params);
+      const response: ServerInfo = {};
+      if (reason === FilterPageSortChangeReason.InitialLoad || reason === FilterPageSortChangeReason.FilterChanged) {
+        const count = await getRowsFromSqlite(getDb(), countSelect, params)
+        const totalRecords = (count[0] as any).count;
+        response.pagination = {
+          ...pagination,
+          totalRecords,
+          totalPages: Math.ceil(totalRecords / pagination.pageSize || 100),
+        }
+      }
+      if (reason === FilterPageSortChangeReason.InitialLoad || reason === FilterPageSortChangeReason.FilterChanged || reason === FilterPageSortChangeReason.SortChanged
+        || reason === FilterPageSortChangeReason.PageChanged || !reason) {
+        const businessQuery = buildSqlWhereClause(args, params);
+        console.log(businessQuery);
+        const businessSelect = `select businesses.*,
+        (select count(*) from inspections where inspections.business_id = businesses.business_id) as inspection_count,
+        (select count(*) from violations where violations.business_id = businesses.business_id) as violation_count
+        from businesses ${businessQuery}`;
+        const businesses = await getRowsFromSqlite<Business>(getDb(), businessSelect, params);
+        response.currentPageData = businesses;
+      }
+      if (reason === FilterPageSortChangeReason.InitialLoad || reason === FilterPageSortChangeReason.FilterChanged) {
 
-      const footerValues: Record<string, string> = {};
-      for(const column of footerValueColumns || []) {
-        const inspectionsQuery = `select count(*) as count from inspections left join businesses on inspections.business_id = businesses.business_id ${noPagingWhereClause}`;
-        const violationsQuery = `select count(*)  as count  from violations left join businesses on violations.business_id = businesses.business_id ${noPagingWhereClause}`;
-        const value = column === "inspection_count" ? await getRowsFromSqlite(inspectionsQuery,noPagingParams) :
-            await getRowsFromSqlite(violationsQuery,noPagingParams);
-        footerValues[column] = `Total: ${value[0]["count"]}`;
+        const footerValues: Record<string, string> = {};
+        for (const column of footerValueColumns || []) {
+          const inspectionsQuery = `select count(*) as count from inspections left join businesses on inspections.business_id = businesses.business_id ${noPagingWhereClause}`;
+          const violationsQuery = `select count(*)  as count  from violations left join businesses on violations.business_id = businesses.business_id ${noPagingWhereClause}`;
+          const value = column === "inspection_count" ? await getRowsFromSqlite(getDb(), inspectionsQuery, noPagingParams) :
+            await getRowsFromSqlite(getDb(), violationsQuery, noPagingParams);
+          footerValues[column] = `Total: ${value[0]["count"]}`;
+        }
+        response.footerValues = footerValues;
       }
+      if (reason === FilterPageSortChangeReason.InitialLoad) {
 
-      // const filterDistinctValues: Record<string, NameValue[]> =await distinctValueColumns?.reduce(async (obj, column) => {
-      //   const values = `select distinct ${column} from businesses ${noPagingWhereClause}`;
-      //   const dbValues = await getRowsFromSqlite(values);
-      //   obj[column] = dbValues.map((value: unknown) => ({name: (value as any)[column], value: (value as any)[column]}));
-      // }, {}) || {};
-      const filterDistinctValues: Record<string, NameValue[]> = {};
-      for(const column of distinctValueColumns || []) {
-        const values = `select distinct ${column} from businesses ${noPagingWhereClause}`;
-        const dbValues = await getRowsFromSqlite(values,noPagingParams);
-        filterDistinctValues[column] = dbValues.map((value: unknown) => ({name: (value as any)[column], value: (value as any)[column]}));
+        const filterDistinctValues: Record<string, NameValue[]> = {};
+        for (const column of distinctValueColumns || []) {
+          const values = `select distinct ${column} from businesses ${noPagingWhereClause}`;
+          const dbValues = await getRowsFromSqlite(getDb(), values, noPagingParams);
+          filterDistinctValues[column] = dbValues.map((value: unknown) => ({ name: (value as any)[column], value: (value as any)[column] }));
+        }
+        response.filterDistinctValues = filterDistinctValues;
       }
       return {
-        rows: businesses,
-        count: (count[0] as any).count,
-        footerValues,
-        filterDistinctValues
+        ...response,
       };
     },
   },

apps/graphql-apollo-react/graphql/schemas/business.ts

@@ -27,14 +27,20 @@ type NameValue {
   name: String!
   value: String!
 }
+type Pagination{
+  totalRecords: Int
+  pageSize: Int
+  currentPage: Int
+  totalPages: Int
+}
 
 
 type Query {
-  businesses(args: FilterPageSortArguments): ServerResponse!
+  businesses(args: FilterPageSortArguments): ServerInfo!
 }
-type ServerResponse {
-  rows: [Business!]!
-  count: Int!
+type ServerInfo {
+  currentPageData: [Business!]!
+  pagination: Pagination
   filterDistinctValues: JSON
   footerValues: JSON
 }
@@ -92,11 +98,12 @@ input ExpansionInput {
 
 input FilterPageSortArguments {
   distinctValueColumns: [String!]
-  footerValueColumns: [String!]
+  visibleColumns: [String!]
   filter: FilterInput
   pagination: PaginationRequestInput
   sorts: [SortInfoInput!]
   expansion: ExpansionInput
+  reason: String
 }
 
 type Query {

apps/graphql-apollo-react/shared/sql-builder.ts

@@ -13,7 +13,7 @@
     "incremental": true,
     "types": ["jest", "node"]
   },
-  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "next-env.d.ts"],
+  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "next-env.d.ts", "../../libs/grid-shared/src/lib/shared/sql-builder.ts"],
   "exclude": [
     "node_modules",
     "jest.config.ts",