show changeset in json view

packages/web/src/celldata/JsonCellView.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import _ from 'lodash';
   import ErrorInfo from '../elements/ErrorInfo.svelte';
-  import JsonTree from '../jsontree/JSONTree.svelte';
+  import JSONTree from '../jsontree/JSONTree.svelte';
 
   export let selection;
   export let showWholeRow = false;
@@ -31,7 +31,7 @@
 {:else}
   <div class="outer">
     <div class="inner">
-      <JsonTree value={json} />
+      <JSONTree value={json} expanded />
     </div>
   </div>
 {/if}

packages/web/src/datagrid/ChangeSetGrider.ts

@@ -33,9 +33,9 @@ export default class ChangeSetGrider extends Grider {
     public changeSetState,
     public dispatchChangeSet,
     public display: GridDisplay,
-    public macro: MacroDefinition,
-    public macroArgs: {},
-    public selectedCells: MacroSelectedCell[]
+    public macro: MacroDefinition = null,
+    public macroArgs: {} = {},
+    public selectedCells: MacroSelectedCell[] = []
   ) {
     super();
     this.changeSet = changeSetState && changeSetState.value;

packages/web/src/jsontree/ErrorNode.svelte

@@ -1,6 +1,5 @@
 <script>
   import { getContext, setContext } from 'svelte';
-  import contextKey from './context';
   import JSONArrow from './JSONArrow.svelte';
   import JSONNode from './JSONNode.svelte';
   import JSONKey from './JSONKey.svelte';
@@ -10,8 +9,8 @@
 
   $: stack = value.stack.split('\n');
 
-  const context = getContext(contextKey);
-  setContext(contextKey, { ...context, colon: ':' })
+  const context = getContext('json-tree-context-key');
+  setContext('json-tree-context-key', { ...context, colon: ':' })
 
   $: if (!isParentExpanded) {
     expanded = false;

packages/web/src/jsontree/JSONNested.svelte

@@ -1,6 +1,5 @@
 <script>
   import { getContext, setContext } from 'svelte';
-  import contextKey from './context';
   import JSONArrow from './JSONArrow.svelte';
   import JSONNode from './JSONNode.svelte';
   import JSONKey from './JSONKey.svelte';
@@ -12,8 +11,8 @@
   export let getPreviewValue = getValue;
   export let expanded = false, expandable = true;
 
-  const context = getContext(contextKey);
-  setContext(contextKey, { ...context, colon })
+  const context = getContext('json-tree-context-key');
+  setContext('json-tree-context-key', { ...context, colon })
 
   $: slicedKeys = expanded ? keys: previewKeys.slice(0, 5);
 

packages/web/src/jsontree/JSONNode.svelte

@@ -8,11 +8,13 @@
   import ErrorNode from './ErrorNode.svelte';
   import objType from './objType';
 
-  export let key,
-    value,
-    isParentExpanded,
-    isParentArray,
-    expanded = false;
+  export let key;
+  export let value;
+  export let isParentExpanded;
+  export let isParentArray;
+  export let expanded = false;
+  export let labelOverride = null;
+
   $: nodeType = objType(value);
   $: componentType = getComponent(nodeType);
   $: valueGetter = getValueGetter(nodeType);
@@ -75,4 +77,5 @@
   {nodeType}
   {valueGetter}
   {expanded}
+  {labelOverride}
 />

packages/web/src/jsontree/JSONObjectNode.svelte

@@ -3,6 +3,7 @@
 
   export let key, value, isParentExpanded, isParentArray, nodeType;
   export let expanded = false;
+  export let labelOverride = null;
 
   $: keys = Object.getOwnPropertyNames(value);
 
@@ -10,6 +11,7 @@
     return value[key];
   }
 </script>
+
 <JSONNested
   {key}
   {expanded}
@@ -18,7 +20,7 @@
   {keys}
   previewKeys={keys}
   {getValue}
-  label="{nodeType} "
+  label={labelOverride || `${nodeType} `}
   bracketOpen={'{'}
   bracketClose={'}'}
-/>
+/>

packages/web/src/jsontree/JSONTree.svelte

@@ -1,16 +1,23 @@
-<script>
+<script lang="ts">
   import JSONNode from './JSONNode.svelte';
   import { setContext } from 'svelte';
-  import contextKey from './context';
+  import contextMenu from '../utility/contextMenu';
 
-  setContext(contextKey, {});
+  setContext('json-tree-context-key', {});
 
   export let key = '';
   export let value;
+  export let expanded = false;
+  export let labelOverride = null;
+  export let menu;
+
+  export let isDeleted;
+  export let isInserted;
+  export let isModified;
 </script>
 
-<ul>
-  <JSONNode {key} {value} isParentExpanded={true} isParentArray={false} expanded={true} />
+<ul use:contextMenu={menu} class:isDeleted class:isInserted class:isModified>
+  <JSONNode {key} {value} isParentExpanded={true} isParentArray={false} {expanded} {labelOverride} />
 </ul>
 
 <style>
@@ -35,10 +42,23 @@
     line-height: var(--li-line-height);
     display: var(--li-display, list-item);
     list-style: none;
+    white-space: nowrap;
   }
   ul,
   ul :global(ul) {
     padding: 0;
     margin: 0;
   }
+  ul.isDeleted {
+    background: var(--theme-bg-volcano);
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEElEQVQImWNgIAX8x4KJBAD+agT8INXz9wAAAABJRU5ErkJggg==');
+    background-repeat: repeat-x;
+    background-position: 50% 50%;
+  }
+  ul.isModified {
+    background: var(--theme-bg-gold);
+  }
+  ul.isInserted {
+    background: var(--theme-bg-green);
+  }
 </style>

packages/web/src/jsontree/JSONValueNode.svelte

@@ -1,12 +1,11 @@
 <script>
   import { getContext } from 'svelte';
-  import contextKey from './context';
 
   import JSONKey from './JSONKey.svelte';
 
   export let key, value, valueGetter = null, isParentExpanded, isParentArray, nodeType;
 
-  const { colon } = getContext(contextKey);
+  const { colon } = getContext('json-tree-context-key');
 </script>
 <style>
   li {

packages/web/src/jsontree/context.js

@@ -1 +0,0 @@
-export default {};

packages/web/src/jsonview/CollectionJsonRow.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import JSONTree from '../jsontree/JSONTree.svelte';
+
+  export let rowIndex;
+  export let grider;
+  export let commonMenu;
+
+  $: rowData = grider.getRowData(rowIndex);
+  $: rowStatus = grider.getRowStatus(rowIndex);
+</script>
+
+<JSONTree
+  value={rowData}
+  labelOverride="({rowIndex + 1}) "
+  menu={commonMenu}
+  isModified={rowStatus.status == 'updated'}
+  isInserted={rowStatus.status == 'inserted'}
+  isDeleted={rowStatus.status == 'deleted'}
+/>

packages/web/src/jsonview/CollectionJsonView.svelte

@@ -14,21 +14,21 @@
 </script>
 
 <script lang="ts">
+  import _ from 'lodash';
+
   import { getContext, onMount } from 'svelte';
   import { get_current_component } from 'svelte/internal';
   import invalidateCommands from '../commands/invalidateCommands';
   import registerCommand from '../commands/registerCommand';
+  import ChangeSetGrider from '../datagrid/ChangeSetGrider';
 
   import { loadCollectionDataPage } from '../datagrid/CollectionDataGridCore.svelte';
-  import InlineButton from '../elements/InlineButton.svelte';
   import LoadingInfo from '../elements/LoadingInfo.svelte';
   import Pager from '../elements/Pager.svelte';
-  import TextField from '../forms/TextField.svelte';
-  import FontIcon from '../icons/FontIcon.svelte';
 
-  import JSONTree from '../jsontree/JSONTree.svelte';
   import { getActiveTabId } from '../stores';
   import contextMenu from '../utility/contextMenu';
+  import CollectionJsonRow from './CollectionJsonRow.svelte';
 
   export let conid;
   export let database;
@@ -36,6 +36,9 @@
   export let display;
   export let setConfig;
 
+  export let changeSetState;
+  export let dispatchChangeSet;
+
   const instance = get_current_component();
   const tabVisible: any = getContext('tabVisible');
   const tabid = getContext('tabid');
@@ -43,7 +46,7 @@
   let isLoading = false;
   let loadedTime = null;
 
-  export let loadedRows = null;
+  export let loadedRows = [];
   let skip = 0;
   let limit = 50;
 
@@ -78,17 +81,21 @@
     invalidateCommands();
   });
 
-  function createMenu() {
-    return [{ command: 'dataJson.switchToTable' }];
-  }
+  const commonMenu = [{ command: 'dataJson.switchToTable' }];
+
+  $: grider = new ChangeSetGrider(loadedRows, changeSetState, dispatchChangeSet, display);
+
+  $: console.log('GRIDER', grider);
 </script>
 
-<div class="flexcol flex1">
+<div class="flexcol flex1" use:contextMenu={commonMenu}>
   <div class="toolbar">
     <Pager bind:skip bind:limit on:load={() => display.reload()} />
   </div>
-  <div class="json" use:contextMenu={createMenu}>
-    <JSONTree value={loadedRows} />
+  <div class="json">
+    {#each _.range(0, grider.rowCount) as rowIndex}
+      <CollectionJsonRow {grider} {rowIndex} />
+    {/each}
   </div>
 </div>
 

packages/web/src/modals/EditJsonModal.svelte

@@ -0,0 +1,42 @@
+<script>
+  import FormStyledButton from '../elements/FormStyledButton.svelte';
+  import FormProvider from '../forms/FormProvider.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import AceEditor from '../query/AceEditor.svelte';
+
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let onSave;
+  export let value;
+</script>
+
+<FormProvider>
+  <ModalBase {...$$restProps}>
+    <div slot="header">Edit JSON value</div>
+
+    <div class="editor">
+      <AceEditor mode="json" bind:value />
+    </div>
+
+    <div slot="footer">
+      <FormSubmit
+        value="Save"
+        on:click={() => {
+          if (onSave(value)) {
+            closeCurrentModal();
+          }
+        }}
+      />
+      <FormStyledButton type="button" value="Close" onClick={closeCurrentModal} />
+    </div>
+  </ModalBase>
+</FormProvider>
+
+<style>
+  .editor {
+    position: relative;
+    height: 30vh;
+    width: 40vw;
+  }
+</style>