edit json document

packages/web/src/jsonview/CollectionJsonRow.svelte

@@ -1,5 +1,25 @@
+<script lang="ts" context="module">
+  export function editJsonRowDocument(grider, rowIndex) {
+    const rowData = grider.getRowData(rowIndex);
+    showModal(EditJsonModal, {
+      json: rowData,
+      onSave: value => {
+        if (value._id != rowData._id) {
+          showModal(ErrorMessageModal, { message: '_id attribute cannot be changed' });
+          return false;
+        }
+        grider.setRowData(rowIndex, value);
+        return true;
+      },
+    });
+  }
+</script>
+
 <script lang="ts">
   import JSONTree from '../jsontree/JSONTree.svelte';
+  import EditJsonModal from '../modals/EditJsonModal.svelte';
+  import ErrorMessageModal from '../modals/ErrorMessageModal.svelte';
+  import { showModal } from '../modals/modalTools';
 
   export let rowIndex;
   export let grider;
@@ -7,12 +27,25 @@
 
   $: rowData = grider.getRowData(rowIndex);
   $: rowStatus = grider.getRowStatus(rowIndex);
+
+  function handleEditDocument() {
+    editJsonRowDocument(grider, rowIndex);
+  }
+
+  function createMenu() {
+    return [
+      ...commonMenu,
+      { text: 'Edit document', onClick: handleEditDocument },
+      { text: 'Delete document', onClick: () => grider.deleteRow(rowIndex) },
+      { text: 'Revert row changes', onClick: () => grider.revertRowChanges(rowIndex) },
+    ];
+  }
 </script>
 
 <JSONTree
   value={rowData}
   labelOverride="({rowIndex + 1}) "
-  menu={commonMenu}
+  menu={createMenu}
   isModified={rowStatus.status == 'updated'}
   isInserted={rowStatus.status == 'inserted'}
   isDeleted={rowStatus.status == 'deleted'}

packages/web/src/jsonview/CollectionJsonView.svelte

@@ -94,7 +94,7 @@
   </div>
   <div class="json">
     {#each _.range(0, grider.rowCount) as rowIndex}
-      <CollectionJsonRow {grider} {rowIndex} />
+      <CollectionJsonRow {grider} {rowIndex} {commonMenu} />
     {/each}
   </div>
 </div>