Make space toggle selected isValid cell

README.md

@@ -72,3 +72,11 @@ npm run format
 ```
 
 Linting rules: https://eslint.vuejs.org/rules
+
+
+### Gitlab Pipelines
+1. types are being checked on build
+1. formatting checked with prettier
+1. linting checked with eslint
+1. unit tests checked with vitest
+1. e2e wip with playwright

src/components/AgCellRenderer.vue

@@ -2,8 +2,6 @@
 import type { IHeaderParams } from "ag-grid-community";
 const props: any = defineProps<{ params: any; value?: any }>();
 const params = props.params as IHeaderParams & { value: boolean };
-
-console.log(params?.value);
 const hasValue = params?.value !== undefined;
 
 // const f = (evt: any) => console.log("focus");

src/components/AgTable.vue

@@ -22,7 +22,7 @@ const rows = [
   {
     make: "Porsche",
     model:
-      "Boxter BoxterBoxterBoxterBoxterBoxterBoxterBoxterBoxterBoxterBoxterBoxterBoxterBoxter",
+      "Boxter BoxterBoxter BoxterBoxterBoxterBoxterBoxter BoxterBoxterBoxterBoxterBoxterBoxter",
     price: 72000,
     isValid: false,
   },
@@ -52,8 +52,33 @@ const rowData: any = ref(rows);
 // const cellWasClicked = (evt: any) => {
 //   console.log("xxx cell was clicked", evt.value);
 // };
+
+// Hacky way to toggle by using up/down arrow:
+// - get focused cell
+// - check if space was pressed
+// - if so and if cell is isValid, toggle its value
+let focusedCell: any = null;
 const cellFocused = (evt: any) => {
-  console.log("xxx cell was focused", evt);
+  focusedCell = evt.api.getFocusedCell();
+};
+
+// todo: don't pass full object
+const toggleSelectedIsValid = (evt: any) => {
+  const row = evt.api.getDisplayedRowAtIndex(focusedCell.rowIndex);
+  const cellValue = evt.api.getValue(focusedCell.column, row);
+
+  const col = focusedCell.column.colId;
+  const rowIdx = row.rowIndex;
+
+  if (col === "isValid") {
+    row.setDataValue(col, !cellValue);
+  }
+};
+
+const onCellKeyPress = (evt: any) => {
+  if (evt.event.code === "Space") {
+    toggleSelectedIsValid(evt);
+  }
 };
 
 // should be ColDef[]
@@ -67,12 +92,18 @@ const columnDefs = ref([
     //   menuIcon: "fa-bars",
     // },
   },
-  { field: "model" },
+  {
+    field: "model",
+    // autoHeight with wrapText expand column. It loses virtualization for that column though
+    // autoHeight: true,
+    // wrapText: true,
+  },
   { field: "price", filter: "agNumberColumnFilter" },
   {
     field: "isValid",
     headerName: "custom is valid",
     cellRenderer: AgCellRenderer,
+
     // headerCheckboxSelection: true, // this is to select multiple rows, not mark the custom component
     // checkboxSelection: true,
     // showDisabledCheckboxes: true,
@@ -101,7 +132,6 @@ const onFilterChanged = (evt: any) => {
 
 const get = async () => {
   console.log("xxx GET call");
-
   const url = "https://www.ag-grid.com/example-assets/row-data.json";
   const response = await fetch(url);
   let remoteRowData = (await response.json()) as ICar[];
@@ -140,8 +170,9 @@ const multiSortkey = "ctrl";
         :onSortChanged="onSortChanged"
         :onFilterChanged="onFilterChanged"
         :onCellFocused="cellFocused"
+        :onCellKeyPress="onCellKeyPress"
         class="ag-theme-alpine"
-        style="height: 70vh"
+        style="height: 120vh"
         :columnDefs="columnDefs"
         :rowData="rowData"
         :defaultColDef="defaultColDef"