From 5fd8831e8c3b79a3f878f18bd1993dd14bdaf6dd Mon Sep 17 00:00:00 2001 From: LiuLiu Date: Thu, 27 Feb 2025 14:29:18 -0800 Subject: [PATCH 1/5] wip --- .../components/CellButtons/AddRowButton.tsx | 48 +++++++++++++++++++ .../components/DataTable/Table/Row.tsx | 2 + 2 files changed, 50 insertions(+) create mode 100644 web/renderer/components/CellButtons/AddRowButton.tsx diff --git a/web/renderer/components/CellButtons/AddRowButton.tsx b/web/renderer/components/CellButtons/AddRowButton.tsx new file mode 100644 index 00000000..5aad7010 --- /dev/null +++ b/web/renderer/components/CellButtons/AddRowButton.tsx @@ -0,0 +1,48 @@ +import { useSqlEditorContext } from "@contexts/sqleditor"; +import css from "./index.module.css"; +import { useDataTableContext } from "@contexts/dataTable"; +import useSqlBuilder from "@hooks/useSqlBuilder"; +import { isUneditableDoltSystemTable } from "@lib/doltSystemTables"; +import { toPKColsMapQueryCols } from "./utils"; +import { ColumnForDataTableFragment, RowForDataTableFragment } from "@gen/graphql-types"; +import HideForNoWritesWrapper from "@components/util/HideForNoWritesWrapper"; +import { Button } from "@dolthub/react-components"; +import { ColumnValue } from "@hooks/useSqlBuilder/util"; +import { randomNum } from "@dolthub/web-utils"; + +type Props = { + row: RowForDataTableFragment; + columns: ColumnForDataTableFragment[]; + refName?: string; +}; + +export default function AddRowButton(props: Props) { + const { executeQuery, setEditorString } = useSqlEditorContext(); + const { params, columns } = useDataTableContext(); + const { tableName } = params; + const { insertIntoTable } = useSqlBuilder(); + + if (!tableName || isUneditableDoltSystemTable(tableName)) return null; + + const onClick = async () => { + const query = insertIntoTable( + tableName, + columns?.map(c => c.name) ?? [], + columns?.map(c =>{return {type:c.type,value:c.isPrimaryKey?randomNum(0,10000):`" "`}}) ?? [] + ); + setEditorString(query); + await executeQuery({ + ...params, + refName: props.refName ?? params.refName, + query, + }); + }; + + return ( + + + Add row + + + ); +} \ No newline at end of file diff --git a/web/renderer/components/DataTable/Table/Row.tsx b/web/renderer/components/DataTable/Table/Row.tsx index 5838bd7e..57e256fd 100644 --- a/web/renderer/components/DataTable/Table/Row.tsx +++ b/web/renderer/components/DataTable/Table/Row.tsx @@ -12,6 +12,7 @@ import { useState } from "react"; import Cell from "./Cell"; import css from "./index.module.css"; import { getDiffTypeClassnameForRow } from "./utils"; +import AddRowButton from "@components/CellButtons/AddRowButton"; type Props = { row: RowForDataTableFragment; @@ -41,6 +42,7 @@ export default function Row(props: Props) { > + )} From 408f15bd600f790d3f43ee184dfb34991cc4f407 Mon Sep 17 00:00:00 2001 From: LiuLiu Date: Thu, 27 Feb 2025 14:36:53 -0800 Subject: [PATCH 2/5] prettier --- .../components/CellButtons/AddRowButton.tsx | 68 +++++++++++-------- 1 file changed, 38 insertions(+), 30 deletions(-) diff --git a/web/renderer/components/CellButtons/AddRowButton.tsx b/web/renderer/components/CellButtons/AddRowButton.tsx index 5aad7010..8b6e3799 100644 --- a/web/renderer/components/CellButtons/AddRowButton.tsx +++ b/web/renderer/components/CellButtons/AddRowButton.tsx @@ -4,7 +4,10 @@ import { useDataTableContext } from "@contexts/dataTable"; import useSqlBuilder from "@hooks/useSqlBuilder"; import { isUneditableDoltSystemTable } from "@lib/doltSystemTables"; import { toPKColsMapQueryCols } from "./utils"; -import { ColumnForDataTableFragment, RowForDataTableFragment } from "@gen/graphql-types"; +import { + ColumnForDataTableFragment, + RowForDataTableFragment, +} from "@gen/graphql-types"; import HideForNoWritesWrapper from "@components/util/HideForNoWritesWrapper"; import { Button } from "@dolthub/react-components"; import { ColumnValue } from "@hooks/useSqlBuilder/util"; @@ -15,34 +18,39 @@ type Props = { columns: ColumnForDataTableFragment[]; refName?: string; }; - + export default function AddRowButton(props: Props) { - const { executeQuery, setEditorString } = useSqlEditorContext(); - const { params, columns } = useDataTableContext(); - const { tableName } = params; - const { insertIntoTable } = useSqlBuilder(); - - if (!tableName || isUneditableDoltSystemTable(tableName)) return null; - - const onClick = async () => { - const query = insertIntoTable( - tableName, - columns?.map(c => c.name) ?? [], - columns?.map(c =>{return {type:c.type,value:c.isPrimaryKey?randomNum(0,10000):`" "`}}) ?? [] - ); - setEditorString(query); - await executeQuery({ - ...params, - refName: props.refName ?? params.refName, - query, - }); - }; - - return ( - - - Add row - - + const { executeQuery, setEditorString } = useSqlEditorContext(); + const { params, columns } = useDataTableContext(); + const { tableName } = params; + const { insertIntoTable } = useSqlBuilder(); + + if (!tableName || isUneditableDoltSystemTable(tableName)) return null; + + const onClick = async () => { + const query = insertIntoTable( + tableName, + columns?.map(c => c.name) ?? [], + columns?.map(c => { + return { + type: c.type, + value: c.isPrimaryKey ? randomNum(0, 10000) : `" "`, + }; + }) ?? [], ); -} \ No newline at end of file + setEditorString(query); + await executeQuery({ + ...params, + refName: props.refName ?? params.refName, + query, + }); + }; + + return ( + + + Add row + + + ); +} From f1ff01c7790aea4a77982a75803b878702b45cdf Mon Sep 17 00:00:00 2001 From: LiuLiu Date: Fri, 28 Feb 2025 11:59:39 -0800 Subject: [PATCH 3/5] run query, refetch, refresh page --- .../components/CellButtons/AddRowButton.tsx | 43 ++++++++++--------- .../components/DataTable/Table/Row.tsx | 4 +- 2 files changed, 24 insertions(+), 23 deletions(-) diff --git a/web/renderer/components/CellButtons/AddRowButton.tsx b/web/renderer/components/CellButtons/AddRowButton.tsx index 8b6e3799..67f0b46f 100644 --- a/web/renderer/components/CellButtons/AddRowButton.tsx +++ b/web/renderer/components/CellButtons/AddRowButton.tsx @@ -1,30 +1,23 @@ -import { useSqlEditorContext } from "@contexts/sqleditor"; -import css from "./index.module.css"; import { useDataTableContext } from "@contexts/dataTable"; import useSqlBuilder from "@hooks/useSqlBuilder"; import { isUneditableDoltSystemTable } from "@lib/doltSystemTables"; -import { toPKColsMapQueryCols } from "./utils"; -import { - ColumnForDataTableFragment, - RowForDataTableFragment, -} from "@gen/graphql-types"; +import { useSqlSelectForSqlDataTableLazyQuery } from "@gen/graphql-types"; import HideForNoWritesWrapper from "@components/util/HideForNoWritesWrapper"; import { Button } from "@dolthub/react-components"; -import { ColumnValue } from "@hooks/useSqlBuilder/util"; import { randomNum } from "@dolthub/web-utils"; +import { table } from "@lib/urls"; +import { useRouter } from "next/router"; +import { refetchUpdateDatabaseQueriesCacheEvict } from "@lib/refetchQueries"; +import css from "./index.module.css"; -type Props = { - row: RowForDataTableFragment; - columns: ColumnForDataTableFragment[]; - refName?: string; -}; - -export default function AddRowButton(props: Props) { - const { executeQuery, setEditorString } = useSqlEditorContext(); +export default function AddRowButton() { const { params, columns } = useDataTableContext(); const { tableName } = params; const { insertIntoTable } = useSqlBuilder(); + const [insertRow] = useSqlSelectForSqlDataTableLazyQuery(); + const router = useRouter(); + if (!tableName || isUneditableDoltSystemTable(tableName)) return null; const onClick = async () => { @@ -38,12 +31,20 @@ export default function AddRowButton(props: Props) { }; }) ?? [], ); - setEditorString(query); - await executeQuery({ - ...params, - refName: props.refName ?? params.refName, - query, + const res = await insertRow({ + variables: { + databaseName: params.databaseName, + refName: params.refName, + queryString: query, + schemaName: params.schemaName, + }, + fetchPolicy: "no-cache", }); + await res.client + .refetchQueries(refetchUpdateDatabaseQueriesCacheEvict) + .catch(console.error); + const { href, as } = table({ ...params, tableName }); + router.push(href, as).catch(console.error); }; return ( diff --git a/web/renderer/components/DataTable/Table/Row.tsx b/web/renderer/components/DataTable/Table/Row.tsx index 57e256fd..f2613baf 100644 --- a/web/renderer/components/DataTable/Table/Row.tsx +++ b/web/renderer/components/DataTable/Table/Row.tsx @@ -9,10 +9,10 @@ import { import { ColumnStatus } from "@lib/tableTypes"; import cx from "classnames"; import { useState } from "react"; +import AddRowButton from "@components/CellButtons/AddRowButton"; import Cell from "./Cell"; import css from "./index.module.css"; import { getDiffTypeClassnameForRow } from "./utils"; -import AddRowButton from "@components/CellButtons/AddRowButton"; type Props = { row: RowForDataTableFragment; @@ -42,7 +42,7 @@ export default function Row(props: Props) { > - + )} From ad72cf62d54a0f570d0c45f383b4538bafd499ba Mon Sep 17 00:00:00 2001 From: LiuLiu Date: Fri, 28 Feb 2025 13:30:35 -0800 Subject: [PATCH 4/5] default row --- .../components/CellButtons/AddRowButton.tsx | 51 +++++++++++++++---- 1 file changed, 41 insertions(+), 10 deletions(-) diff --git a/web/renderer/components/CellButtons/AddRowButton.tsx b/web/renderer/components/CellButtons/AddRowButton.tsx index 67f0b46f..e00b3dee 100644 --- a/web/renderer/components/CellButtons/AddRowButton.tsx +++ b/web/renderer/components/CellButtons/AddRowButton.tsx @@ -1,35 +1,34 @@ import { useDataTableContext } from "@contexts/dataTable"; import useSqlBuilder from "@hooks/useSqlBuilder"; import { isUneditableDoltSystemTable } from "@lib/doltSystemTables"; -import { useSqlSelectForSqlDataTableLazyQuery } from "@gen/graphql-types"; +import { + ColumnForDataTableFragment, + useSqlSelectForSqlDataTableLazyQuery, +} from "@gen/graphql-types"; import HideForNoWritesWrapper from "@components/util/HideForNoWritesWrapper"; import { Button } from "@dolthub/react-components"; -import { randomNum } from "@dolthub/web-utils"; import { table } from "@lib/urls"; import { useRouter } from "next/router"; import { refetchUpdateDatabaseQueriesCacheEvict } from "@lib/refetchQueries"; import css from "./index.module.css"; export default function AddRowButton() { - const { params, columns } = useDataTableContext(); - const { tableName } = params; const { insertIntoTable } = useSqlBuilder(); const [insertRow] = useSqlSelectForSqlDataTableLazyQuery(); const router = useRouter(); + const { params, columns } = useDataTableContext(); + if (!columns) return null; + const { tableName } = params; if (!tableName || isUneditableDoltSystemTable(tableName)) return null; const onClick = async () => { + const emptyRow = generateEmptyRow(columns); const query = insertIntoTable( tableName, columns?.map(c => c.name) ?? [], - columns?.map(c => { - return { - type: c.type, - value: c.isPrimaryKey ? randomNum(0, 10000) : `" "`, - }; - }) ?? [], + emptyRow, ); const res = await insertRow({ variables: { @@ -55,3 +54,35 @@ export default function AddRowButton() { ); } + +function generateEmptyRow(columns: ColumnForDataTableFragment[]) { + const emptyRow = columns.map(column => { + const isNotNull = + column.constraints?.some(constraint => constraint.notNull) || false; + + if (isNotNull) { + // Handle non-null columns + switch (column.type.toLowerCase()) { + case "int": + case "integer": + case "bigint": + return { type: column.type, value: 0 }; // Default integer value + case "varchar": + case "text": + case "string": + return { type: column.type, value: "" }; // Empty string + case "datetime": + case "timestamp": + return { type: column.type, value: new Date().toISOString() }; // Current timestamp + case "boolean": + return { type: column.type, value: false }; // Default boolean value + default: + return { type: column.type, value: null }; // Fallback for unknown types + } + } else { + return { type: "null", value: null }; + } + }); + + return emptyRow; +} From 406d63de20f53919997e2815791706b16b5eade5 Mon Sep 17 00:00:00 2001 From: LiuLiu Date: Fri, 28 Feb 2025 13:44:32 -0800 Subject: [PATCH 5/5] lint --- web/renderer/components/CellButtons/AddRowButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/renderer/components/CellButtons/AddRowButton.tsx b/web/renderer/components/CellButtons/AddRowButton.tsx index e00b3dee..4b07bb22 100644 --- a/web/renderer/components/CellButtons/AddRowButton.tsx +++ b/web/renderer/components/CellButtons/AddRowButton.tsx @@ -27,7 +27,7 @@ export default function AddRowButton() { const emptyRow = generateEmptyRow(columns); const query = insertIntoTable( tableName, - columns?.map(c => c.name) ?? [], + columns.map(c => c.name), emptyRow, ); const res = await insertRow({