Find view: make changes to single documents from within the object editor

frontend/src/components/grid-items.svelte

@@ -57,7 +57,7 @@
     }
   }
 
-  function select(itemKey) {
+  function select(itemKey, index) {
     if (!canSelect) {
       return false;
     }
@@ -72,7 +72,7 @@
       else {
         activePath = [ ...path, itemKey ];
       }
-      dispatch('select', { level, itemKey });
+      dispatch('select', { level, itemKey, index });
     }
   }
 
@@ -88,9 +88,9 @@
     }
   }
 
-  function doubleClick(itemKey) {
+  function doubleClick(itemKey, index) {
     // toggleChildren(itemKey, false);
-    dispatch('trigger', { level, itemKey });
+    dispatch('trigger', { level, itemKey, index });
     childrenOpen[itemKey] = true;
   }
 
@@ -132,8 +132,8 @@
 
 {#each _items as item, index}
   <tr
-    on:click={() => select(item[key])}
-    on:dblclick={() => doubleClick(item[key])}
+    on:click={() => select(item[key], index)}
+    on:dblclick={() => doubleClick(item[key], index)}
     on:contextmenu|preventDefault={evt => showContextMenu(evt, item)}
     class:selectable={canSelect}
     class:selected={canSelect && !activePath[level + 1] && activePath.every(k => path.includes(k) || k === item[key]) && (activePath[level] === item[key])}

frontend/src/components/objecteditor.svelte

@@ -25,6 +25,7 @@
           return;
         }
         text = e.state.doc.toString();
+        dispatch('updated', { text });
       }),
     ],
   });

frontend/src/components/objectviewer.svelte

@@ -1,28 +1,20 @@
 <script>
-  import { jsonLooseParse } from '$lib/strings';
+  import { jsonLooseParse, looseJsonIsValid } from '$lib/strings';
   import { createEventDispatcher, onDestroy } from 'svelte';
   import Icon from './icon.svelte';
   import Modal from './modal.svelte';
   import ObjectEditor from './objecteditor.svelte';
+  import { EJSON } from 'bson';
 
   export let data;
   export let saveable = false;
+  export let successMessage = '';
 
   const dispatch = createEventDispatcher();
   let copySucceeded = false;
   let timeout;
-  let text = JSON.stringify(data, undefined, '\t');
-  let newData;
-  let invalid = false;
-
-  $: {
-    try {
-      newData = jsonLooseParse(text);
-    }
-    catch {
-      invalid = true;
-    }
-  }
+  let text = EJSON.stringify(data, undefined, '\t');
+  $: invalid = !looseJsonIsValid(text);
 
   async function copy() {
     await navigator.clipboard.writeText(text);
@@ -36,7 +28,7 @@
   }
 
   function save() {
-    dispatch('save', text);
+    dispatch('save', { text, originalData: data });
   }
 
   onDestroy(() => clearTimeout(timeout));
@@ -45,7 +37,7 @@
 {#if data}
   <Modal bind:show={data} contentPadding={false}>
     <div class="objectviewer">
-      <ObjectEditor {text} />
+      <ObjectEditor bind:text on:updated={() => successMessage = ''} />
     </div>
 
     <svelte:fragment slot="footer">
@@ -62,6 +54,10 @@
       <button class="btn secondary" on:click={copy}>
         <Icon name={copySucceeded ? 'check' : 'clipboard'} /> Copy
       </button>
+
+      {#if successMessage}
+        <span class="flash-green">{successMessage}</span>
+      {/if}
     </svelte:fragment>
   </Modal>
 {/if}
@@ -74,4 +70,8 @@
     align-items: stretch;
     height: 100%;
   }
+
+  .flash-green {
+    margin-left: 0.5rem;
+  }
 </style>