Merge pull request #82 from yeri918/main-dl

[main-dl to main] lint contextMenu.ts, gridStates.ts, keyShortcuts.ts
yeri918 · Nov 3, 2024 · 1b26c64 · 1b26c64
2 parents 2404c4e + 439e172
commit 1b26c64
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 139 deletions.
diff --git a/app/eslint.config.js b/app/eslint.config.js
@@ -2,6 +2,7 @@ import globals from "globals";
 import pluginJs from "@eslint/js";
 import tseslint from "typescript-eslint";
 import pluginReact from "eslint-plugin-react";
+import eslintConfigPrettier from "eslint-config-prettier";
 
 
 export default [
@@ -16,4 +17,5 @@ export default [
   pluginJs.configs.recommended,                     // default js rules
   ...tseslint.configs.recommended,                  // default ts rules
   pluginReact.configs.flat.recommended,
+  eslintConfigPrettier,
 ];
diff --git a/app/src/components/grid/lib/contextMenu.ts b/app/src/components/grid/lib/contextMenu.ts
@@ -1,28 +1,34 @@
-import { GridApi, Column } from "ag-grid-community";
 import { ContextMenuItem } from "../interface/GridInterface";
 import { ChartType } from "ag-grid-community";
+import {
+  GetContextMenuItemsParams,
+  GridApi,
+  Column,
+} from "@ag-grid-community/core";
 
 // region: Filters
 export const onFilterEqual = (
   gridApi: GridApi,
-  params: any,
+  params: GetContextMenuItemsParams,
 ): ContextMenuItem => {
   const menuItem: ContextMenuItem = {
     name: "Filter equal",
     action: () => {
-      let filterModel = gridApi.getFilterModel();
-
-      filterModel = filterModel === undefined ? {} : filterModel;
-      console.log("filter Model", filterModel);
-
+      // Get Required params
+      const filterModel = gridApi.getFilterModel() ?? {}; // if null, use {}.
       const selectedValue = params.value;
-      let filterColumn = params.column.getColId();
 
+      let filterColumn = params.column?.getColId();
       // Additional logic so that use can filter on the group columns.
       if (filterColumn === "ag-Grid-AutoColumn") {
         filterColumn = gridApi
           .getRowGroupColumns()
-          [params.node.level].getColDef().field;
+          [params.node?.level ?? 0].getColDef().field;
+      }
+
+      // Ensure filterColumn is not null or undefined
+      if (!filterColumn) {
+        return;
       }
 
       // Check the FilterType and create the filter model accordingly.
@@ -35,7 +41,7 @@ export const onFilterEqual = (
             // Switch based on Ag-Grid Filter Type
             switch (colDef.filter) {
               // agMultiColumnFilter
-              case "agNumberColumnFilter":
+              case "agNumberColumnFilter": {
                 const lowerBound = Math.round(selectedValue);
                 const upperBound = lowerBound + 1;
                 filterModel[filterColumn] = {
@@ -53,7 +59,8 @@ export const onFilterEqual = (
                   ],
                 };
                 break;
-              case "agMultiColumnFilter":
+              }
+              case "agMultiColumnFilter": {
                 filterModel[filterColumn] = {
                   filterType: "multi",
                   filterModels: [
@@ -65,13 +72,15 @@ export const onFilterEqual = (
                   ],
                 };
                 break;
-              case "agTextColumnFilter":
+              }
+              case "agTextColumnFilter": {
                 filterModel[filterColumn] = {
                   filter: selectedValue,
                   filterType: "text",
                   type: "equals",
                 };
                 break;
+              }
             }
           }
         }
@@ -84,10 +93,7 @@ export const onFilterEqual = (
   return menuItem;
 };
 
-export const onFilterReset = (
-  gridApi: GridApi,
-  params: any,
-): ContextMenuItem => {
+export const onFilterReset = (gridApi: GridApi): ContextMenuItem => {
   const menuItem: ContextMenuItem = {
     name: "Clear all filters",
     action: () => {
@@ -99,10 +105,7 @@ export const onFilterReset = (
 };
 
 // region: RowGroup
-export const onRowGroupCollapseAll = (
-  gridApi: GridApi,
-  params: any,
-): ContextMenuItem => {
+export const onRowGroupCollapseAll = (gridApi: GridApi): ContextMenuItem => {
   const menuItem: ContextMenuItem = {
     name: "Collapse all",
     action: () => {
@@ -112,14 +115,11 @@ export const onRowGroupCollapseAll = (
   return menuItem;
 };
 
-export const onRowGroupExpandOneLevel = (
-  gridApi: GridApi,
-  params: any,
-): ContextMenuItem => {
+export const onRowGroupExpandOneLevel = (gridApi: GridApi): ContextMenuItem => {
   const menuItem: ContextMenuItem = {
     name: "Expand one level",
     action: () => {
-      gridApi?.forEachNode((node: any) => {
+      gridApi?.forEachNode((node) => {
         if (node.level === 0) {
           node.setExpanded(true);
         } else {
@@ -135,18 +135,20 @@ export const onRowGroupExpandOneLevel = (
 // region: chargin
 export const onChartSelectedCells = (
   gridApi: GridApi,
-  params: any,
+  params: GetContextMenuItemsParams,
   chartType: ChartType = "line", // line, groupedColumn
 ): ContextMenuItem => {
   const menuItem: ContextMenuItem = {
     name: `Chart selected cells (${chartType})`,
     action: () => {
-      // Sanity Check, return null if failed.
-      if (params.column.getColDef().chartDataType === "category") {
-        return;
-      }
+      // Check cell ranges
       const cellRange = gridApi.getCellRanges();
-      if (cellRange === null) {
+      const chartDataType = params.column?.getColDef().chartDataType;
+      if (
+        cellRange === null ||
+        params === null ||
+        chartDataType === "category"
+      ) {
         return;
       }
 
@@ -174,8 +176,9 @@ export const onChartSelectedCells = (
               enabled: true,
               item: {
                 label: {
-                  formatter: (params: { itemId: any }) => {
+                  formatter: (params: { itemId: string }) => {
                     if (params) {
+                      console.log("hihi", params.itemId);
                       return params.itemId;
                     }
                     return "";

diff --git a/app/src/components/grid/lib/gridStates.ts b/app/src/components/grid/lib/gridStates.ts
@@ -1,41 +1,45 @@
 // ag-grid
-import {
-  GridPreDestroyedEvent,
-  GridApi,
-  GridState,
-  ColumnState,
-} from "ag-grid-community";
-
-// table Folder
+import { GridApi } from "@ag-grid-community/core";
 import db from "../../../duckDB";
 
+interface stateResult {
+  tableName: string;
+  userSaved: string;
+  state: string;
+  columnState: string;
+}
+
 export async function initStateTable() {
   const connection = await db.connect();
   const query = `
     CREATE TABLE IF NOT EXISTS grid_states_test (
-      table_name VARCHAR,
-      userSaved VARCHAR,  -- Added for Memory Store (MS) and Memory Recall (MV)
+      tableName VARCHAR,
+      userSaved VARCHAR,  
       state VARCHAR,
       columnState VARCHAR,
-      PRIMARY KEY (table_name, userSaved)
+      PRIMARY KEY (tableName, userSaved)
     );
   `;
   await connection.query(query);
   await connection.close();
 }
 
-export function fetchPreviousState(tableName: string, userSaved: string) {
+export function fetchPreviousState(
+  tableName: string,
+  userSaved: string,
+): Promise<stateResult[]> {
   return new Promise((resolve, reject) => {
     db.connect().then(async (connection) => {
       try {
         const query = `
-        SELECT table_name, state, columnState FROM grid_states_test
-        WHERE table_name = '${tableName}'
+        SELECT tableName, state, columnState FROM grid_states_test
+        WHERE tableName = '${tableName}'
           AND userSaved = '${userSaved}';
       `;
         const arrowResult = await connection.query(query);
-        const result = arrowResult.toArray().map((row) => row.toJSON());
-        console.log("initial state table displayed", result);
+        const result = arrowResult
+          .toArray()
+          .map((row) => row.toJSON()) as stateResult[];
 
         // Tempo Query Execute
         // const query2 = `
@@ -70,11 +74,10 @@ export function saveState(
       const query = `
       INSERT INTO grid_states_test
       VALUES ('${tableName}', '${userSaved}', '${stateString}', '${columnStateString}')
-      ON CONFLICT (table_name, userSaved) DO UPDATE SET state = EXCLUDED.state, columnState = EXCLUDED.columnState;
+      ON CONFLICT (tableName, userSaved) DO UPDATE SET state = EXCLUDED.state, columnState = EXCLUDED.columnState;
     `;
       await connection.query(query);
       await connection.close();
-      console.log("leudom inserted successfully");
     });
   }
 }
@@ -84,7 +87,7 @@ export async function applySavedState(
   tableName: string,
   userSaved: string,
 ) {
-  fetchPreviousState(tableName, userSaved).then(async (result: any) => {
+  fetchPreviousState(tableName, userSaved).then(async (result) => {
     if (result.length > 0 && gridApi !== null) {
       const gridState = JSON.parse(result[0].state);
       const columnState = JSON.parse(result[0].columnState);