Merge pull request #11 from ghazi-git/bulk-update

bulk-update

Author: ghazi-git

CHANGELOG.md

@@ -5,6 +5,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/).
 
 ## [Unreleased]
 
+### Added
+
+- Allow bulk updating the selected objects from the table.
+
 ## [1.1.2] - 2025-12-10
 
 ### Fixed

src/devtools/components/main-content/object-store-view/AddObjectsButton.tsx

@@ -1,6 +1,12 @@
 import { Schema, ValidationError, Validator } from "jsonschema";
 import { PrismEditor } from "prism-code-editor";
-import { createEffect, createSignal, onMount, Show, untrack } from "solid-js";
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  onMount,
+  Show,
+} from "solid-js";
 
 import UnstyledButton from "@/devtools/components/buttons/UnstyledButton";
 import DatatypeValidationCheckbox from "@/devtools/components/main-content/object-store-view/DatatypeValidationCheckbox";
@@ -17,7 +23,7 @@ import {
   parseJSONFromUser,
 } from "@/devtools/utils/json-editor";
 import {
-  NewObject,
+  SerializedObject,
   TableColumn,
   TableColumnValue,
   TableRow,
@@ -26,14 +32,20 @@ import {
 import styles from "./AddObjectsButton.module.css";
 
 export default function AddObjectsButton() {
-  const { createData } = useTableMutationContext();
+  const { tableMutationStore, createData } = useTableMutationContext();
   const { query, refetch } = useTableContext();
   const [validateDatatypes, setValidateDatatypes] = createSignal(true);
   const [error, setError] = createSignal<string[]>([]);
   let dialogRef!: HTMLDialogElement;
   let editorRef!: HTMLDivElement;
   let editor: PrismEditor;
 
+  const title = () => {
+    return tableMutationStore.selectedObjects.length > 0
+      ? "Edit Object(s)"
+      : "Add Objects";
+  };
+
   const onSaveClick = async () => {
     setError([]);
     const value = editor.value.trim();
@@ -53,7 +65,7 @@ export default function AddObjectsButton() {
     }
 
     if (!query.data?.columns?.length) {
-      const msg = `Unable to add any object due to inability to determine the object store key.`;
+      const msg = `Unable to save any object due to inability to determine the object store key.`;
       setError([msg]);
       return;
     }
@@ -69,7 +81,7 @@ export default function AddObjectsButton() {
       return;
     }
 
-    const newObjects = getNewObjects(parsedObj as TableRow[], cols);
+    const newObjects = serializeObjects(parsedObj as TableRow[], cols);
     try {
       await createData({
         requestID: generateRequestID(),
@@ -79,58 +91,61 @@ export default function AddObjectsButton() {
       });
       refetch();
       dialogRef.close();
-      editor.setOptions({ value: getSampleValue(cols) });
+      editor.setOptions({ value: editorData() });
     } catch (e) {
       const msg = e instanceof Error ? e.message : DATA_MUTATION_ERROR_MSG;
       setError([msg]);
     }
   };
 
   onMount(() => {
-    editor = createJSONEditor(
-      editorRef,
-      getSampleValue(query.data?.columns || []),
-    );
+    editor = createJSONEditor(editorRef, "");
   });
-  createEffect(() => {
+  const editorData = createMemo(() => {
+    const columns = query.data?.columns;
     const activeStore = query.data?.activeStore;
-    if (activeStore) {
-      const columns = untrack(() => query.data?.columns || []);
-      editor.setOptions({ value: getSampleValue(columns) });
-    } else {
-      editor.setOptions({ value: "" });
+
+    if (columns && tableMutationStore.selectedObjects.length > 0) {
+      return stringifyData(tableMutationStore.selectedObjects, columns);
+    } else if (columns && activeStore) {
+      const data = getSampleValue(columns);
+      return stringifyData(data, columns);
     }
+    return "";
+  });
+  createEffect(() => {
+    editor.setOptions({ value: editorData() });
   });
 
   return (
     <>
       <UnstyledButton
         class={styles["dialog-trigger"]}
         command="show-modal"
-        commandfor="add-objects-modal"
+        commandfor="add-edit-objects-modal"
       >
-        Add Objects
+        {title()}
       </UnstyledButton>
       <dialog
         ref={dialogRef}
-        id="add-objects-modal"
+        id="add-edit-objects-modal"
         class={styles.dialog}
         onClose={() => setError([])}
       >
         <header>
-          <h2>Add Objects</h2>
+          <h2>{title()}</h2>
           <UnstyledButton
             title="Close Modal"
             aria-label="Close Modal"
             command="close"
-            commandfor="add-objects-modal"
+            commandfor="add-edit-objects-modal"
           >
             <CloseIcon />
           </UnstyledButton>
         </header>
         <div ref={editorRef} />
         <div class={styles.hint}>
-          <div>The json value entered must be an array of objects.</div>
+          <div>The JSON value entered must be an array of objects.</div>
           <div>
             Use ctrl+M/ctrl+shift+M(Mac) to toggle the use of Tab for
             indentation.
@@ -150,7 +165,7 @@ export default function AddObjectsButton() {
           />
         </Show>
         <footer>
-          <UnstyledButton command="close" commandfor="add-objects-modal">
+          <UnstyledButton command="close" commandfor="add-edit-objects-modal">
             Cancel
           </UnstyledButton>
           <UnstyledButton
@@ -186,7 +201,22 @@ function getSampleValue(columns: TableColumn[]) {
     return [column.name, value] as [string, TableColumnValue];
   });
   const obj = Object.fromEntries(keyValuePairs);
-  return JSON.stringify([obj], null, 2);
+  return [obj];
+}
+
+function stringifyData(data: TableRow[], columns: TableColumn[]) {
+  // sort the data keys according to columns' order
+  const objects = data.map((row) => {
+    const keyValuePairs = columns.map((col) => [col.name, row[col.name]]);
+    return Object.fromEntries(keyValuePairs);
+  });
+
+  return JSON.stringify(
+    objects,
+    // replace undefined with null
+    (_, val) => (val === undefined ? null : val),
+    2,
+  );
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -238,10 +268,10 @@ function generateErrorMsg(error: ValidationError) {
   return `${error.property.replace("instance", "object")} ${error.message}`;
 }
 
-function getNewObjects(
+function serializeObjects(
   parsedObj: TableRow[],
   cols: TableColumn[],
-): NewObject[] {
+): SerializedObject[] {
   return parsedObj.map((row) => {
     return Object.entries(row).map(([colName, colValue]) => {
       const col = cols.find((col) => col.name === colName);

src/devtools/utils/inspected-window-data-create.ts

@@ -86,14 +86,14 @@ function insertObjects(
       const objStore = tx.objectStore(storeName);
       objects.forEach((obj) => {
         try {
-          const addRequest = objStore.add(obj);
-          addRequest.onerror = () => {
-            console.error("data-creation: add error", addRequest.error);
+          const putRequest = objStore.put(obj);
+          putRequest.onerror = () => {
+            console.error("data-creation: put error", putRequest.error);
             // better to just return the indexedDB error given that many things
             // can go wrong
-            // https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/add#exceptions
+            // https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/put#exceptions
             const msg =
-              addRequest.error?.message ??
+              putRequest.error?.message ??
               `Unable to insert the object=${JSON.stringify(obj)}.`;
             reject(new Error(msg));
           };

src/devtools/utils/types.ts

@@ -128,10 +128,10 @@ export interface DataCreationRequest {
   requestID: string;
   dbName: string;
   storeName: string;
-  objects: NewObject[];
+  objects: SerializedObject[];
 }
 
-export type NewObject = {
+export type SerializedObject = {
   name: string;
   value: JSONSerializable;
   datatype: TableColumnDatatype;