edit json document

packages/datalib/src/ChangeSet.ts

@@ -78,7 +78,6 @@ export function setChangeSetValue(
   definition: ChangeSetFieldDefinition,
   value: string
 ): ChangeSet {
-  console.log('SET', changeSet, definition, value);
   if (!changeSet || !definition) return changeSet;
   let [fieldName, existingItem] = findExistingChangeSetItem(changeSet, definition);
   if (fieldName == 'deletes') {
@@ -119,6 +118,43 @@ export function setChangeSetValue(
   };
 }
 
+export function setChangeSetRowData(changeSet: ChangeSet, definition: ChangeSetRowDefinition, document: any): ChangeSet {
+  if (!changeSet || !definition) return changeSet;
+  let [fieldName, existingItem] = findExistingChangeSetItem(changeSet, definition);
+  if (fieldName == 'deletes') {
+    changeSet = revertChangeSetRowChanges(changeSet, definition);
+    [fieldName, existingItem] = findExistingChangeSetItem(changeSet, definition);
+  }
+  if (existingItem) {
+    return {
+      ...changeSet,
+      [fieldName]: changeSet[fieldName].map(item =>
+        item == existingItem
+          ? {
+              ...item,
+              fields: {},
+              document,
+            }
+          : item
+      ),
+    };
+  }
+
+  return {
+    ...changeSet,
+    [fieldName]: [
+      ...changeSet[fieldName],
+      {
+        pureName: definition.pureName,
+        schemaName: definition.schemaName,
+        condition: definition.condition,
+        insertedRowIndex: definition.insertedRowIndex,
+        document,
+      },
+    ],
+  };
+}
+
 // export function batchUpdateChangeSet(
 //   changeSet: ChangeSet,
 //   rowDefinitions: ChangeSetRowDefinition[],

packages/web/src/datagrid/ChangeSetGrider.ts

@@ -11,11 +11,23 @@ import {
   MacroSelectedCell,
   revertChangeSetRowChanges,
   setChangeSetValue,
+  setChangeSetRowData,
   compileMacroFunction,
   runMacroOnValue,
 } from 'dbgate-datalib';
 import Grider, { GriderRowStatus } from './Grider';
 
+function getRowFromItem(row, matchedChangeSetItem) {
+  return matchedChangeSetItem.document
+    ? {
+        ...matchedChangeSetItem.document,
+        ...matchedChangeSetItem.fields,
+      }
+    : {
+        ...row,
+        ...matchedChangeSetItem.fields,
+      };
+}
 export default class ChangeSetGrider extends Grider {
   public insertedRows: any[];
   public changeSet: ChangeSet;
@@ -71,7 +83,7 @@ export default class ChangeSetGrider extends Grider {
     const rowDefinition = this.display?.getChangeSetRow(row, insertedRowIndex);
     const [matchedField, matchedChangeSetItem] = findExistingChangeSetItem(this.changeSet, rowDefinition);
     const rowUpdated = matchedChangeSetItem
-      ? { ...row, ...matchedChangeSetItem.fields }
+      ? getRowFromItem(row, matchedChangeSetItem)
       : this.compiledMacroFunc
       ? { ...row }
       : row;
@@ -143,6 +155,12 @@ export default class ChangeSetGrider extends Grider {
     this.applyModification(chs => setChangeSetValue(chs, definition, value));
   }
 
+  setRowData(index: number, document: any) {
+    const row = this.getRowSource(index);
+    const definition = this.display.getChangeSetRow(row, this.getInsertedRowIndex(index));
+    this.applyModification(chs => setChangeSetRowData(chs, definition, document));
+  }
+
   deleteRow(index: number) {
     this.requireRowCache(index);
     this.applyModification(chs => deleteChangeSetRows(chs, this.rowDefinitionsCache[index]));

packages/web/src/datagrid/DataGridCore.svelte

@@ -140,6 +140,14 @@
     onClick: () => getCurrentDataGrid().switchToJson(),
   });
 
+  registerCommand({
+    id: 'dataGrid.editJsonDocument',
+    category: 'Data grid',
+    name: 'Edit row as JSON document',
+    testEnabled: () => getCurrentDataGrid()?.editJsonEnabled(),
+    onClick: () => getCurrentDataGrid().editJsonDocument(),
+  });
+
   registerCommand({
     id: 'dataGrid.filterSelected',
     category: 'Data grid',
@@ -256,6 +264,7 @@
   import ErrorInfo from '../elements/ErrorInfo.svelte';
   import { dataGridRowHeight } from './DataGridRowHeightMeter.svelte';
   import FormStyledButton from '../elements/FormStyledButton.svelte';
+  import { editJsonRowDocument } from '../jsonview/CollectionJsonRow.svelte';
 
   export let onLoadNextData = undefined;
   export let grider = undefined;
@@ -274,7 +283,7 @@
   export let onOpenQuery = null;
   export let onOpenActiveChart = null;
   export let formViewAvailable = false;
-  export let jsonViewAvailable=false;
+  export let jsonViewAvailable = false;
   export let errorMessage = undefined;
 
   export let isLoadedAll;
@@ -502,6 +511,15 @@
     );
   }
 
+  export function editJsonEnabled() {
+    return grider.editable && isDynamicStructure && _.uniq(selectedCells.map(x => x[0])).length == 1;
+  }
+
+  export function editJsonDocument() {
+    const rowIndex = selectedCells[0][0];
+    editJsonRowDocument(grider, rowIndex);
+  }
+
   // export function getGeneralAllowSave() {
   //   return generalAllowSave;
   // }
@@ -1029,6 +1047,7 @@
       { command: 'dataGrid.export' },
       { command: 'dataGrid.switchToForm' },
       { command: 'dataGrid.switchToJson' },
+      { command: 'dataGrid.editJsonDocument' },
       { divider: true },
       { command: 'dataGrid.save' },
       { command: 'dataGrid.revertRowChanges' },

packages/web/src/forms/FormElectronFileSelectorRaw.svelte

@@ -24,6 +24,6 @@
 </script>
 
 <div class="flex">
-  <TextField {...$$restProps} value={$values[name]} onClick={handleBrowse} readOnly {disabled} />
+  <TextField {...$$restProps} value={$values[name]} on:click={handleBrowse} readOnly {disabled} />
   <InlineButton on:click={handleBrowse} {disabled}>Browse</InlineButton>
 </div>

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>

packages/web/src/modals/ConfirmNoSqlModal.svelte

@@ -27,7 +27,7 @@
           onConfirm();
         }}
       />
-      <FormStyledButton type="button" value="Close" onClick={closeCurrentModal} />
+      <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
     </div>
   </ModalBase>
 </FormProvider>

packages/web/src/modals/ConfirmSqlModal.svelte

@@ -28,7 +28,7 @@
           onConfirm();
         }}
       />
-      <FormStyledButton type="button" value="Close" onClick={closeCurrentModal} />
+      <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
     </div>
   </ModalBase>
 </FormProvider>

packages/web/src/modals/EditJsonModal.svelte

@@ -1,14 +1,23 @@
 <script>
+  import { onMount } from 'svelte';
+
   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 ErrorMessageModal from './ErrorMessageModal.svelte';
 
   import ModalBase from './ModalBase.svelte';
-  import { closeCurrentModal } from './modalTools';
+  import { closeCurrentModal, showModal } from './modalTools';
 
   export let onSave;
-  export let value;
+  export let json;
+
+  let value;
+
+  onMount(() => {
+    value = JSON.stringify(json, undefined, 2);
+  });
 </script>
 
 <FormProvider>
@@ -23,12 +32,18 @@
       <FormSubmit
         value="Save"
         on:click={() => {
-          if (onSave(value)) {
+          try {
+            const parsed = JSON.parse(value);
+            if (onSave(parsed)) {
               closeCurrentModal();
             }
+          } catch (err) {
+            showModal(ErrorMessageModal, { message: err.message });
+            return;
+          }
         }}
       />
-      <FormStyledButton type="button" value="Close" onClick={closeCurrentModal} />
+      <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
     </div>
   </ModalBase>
 </FormProvider>

packages/web/src/modals/ErrorMessageModal.svelte

@@ -23,7 +23,7 @@
     </div>
 
     <div slot="footer">
-      <FormStyledButton type="button" value="Close" onClick={closeCurrentModal} />
+      <FormSubmit value="Close" on:click={closeCurrentModal} />
     </div>
   </ModalBase>
 </FormProvider>

packages/web/src/modals/InsertJoinModal.svelte

@@ -169,12 +169,12 @@
   <svelte:fragment slot="footer">
     <FormStyledButton
       value="OK"
-      onClick={() => {
+      on:click={() => {
         closeCurrentModal();
         onInsert(sqlPreview);
       }}
     />
-    <FormStyledButton type="button" value="Close" onClick={closeCurrentModal} />
+    <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
   </svelte:fragment>
 </ModalBase>