Skip to content
Snippets Groups Projects
Commit a281df11 authored by Artur Carvalho's avatar Artur Carvalho
Browse files

Make space toggle selected isValid cell

parent 8ca86b51
No related branches found
No related tags found
1 merge request!1Add initial libraries
......@@ -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
......@@ -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");
......
......@@ -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"
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment