expand all, collapse all commands

packages/web/src/formview/CollectionJsonRow.svelte

@@ -31,6 +31,9 @@
   export let rowIndex;
   export let grider;
 
+  export let expandAll = false;
+  let expandKey = 0;
+
   $: rowData = grider.getRowData(rowIndex);
   $: rowStatus = grider.getRowStatus(rowIndex);
 
@@ -43,18 +46,27 @@
     copyTextToClipboard(JSON.stringify(rowData, undefined, 2));
   }
 
+  function handleExpandDocument() {
+    expandAll = true;
+    expandKey += 1;
+  }
+
   registerMenu([
     { text: 'Copy JSON document', onClick: handleCopyJsonDocument },
     { text: 'Edit document', onClick: handleEditDocument },
     { text: 'Delete document', onClick: () => grider.deleteRow(rowIndex) },
     { text: 'Revert row changes', onClick: () => grider.revertRowChanges(rowIndex) },
+    { text: 'Expand document', onClick: handleExpandDocument },
   ]);
 </script>
 
-<JSONTree
+{#key expandKey}
+  <JSONTree
     value={rowData}
     labelOverride="({rowIndex + 1}) "
     isModified={rowStatus.status == 'updated'}
     isInserted={rowStatus.status == 'inserted'}
     isDeleted={rowStatus.status == 'deleted'}
-/>
+    {expandAll}
+  />
+{/key}

packages/web/src/formview/CollectionJsonView.svelte

@@ -1,5 +1,24 @@
 <script lang="ts" context="module">
   const getCurrentEditor = () => getActiveComponent('CollectionJsonView');
+
+  registerCommand({
+    id: 'collectionJsonView.expandAll',
+    category: 'Collection data',
+    name: 'Expand all',
+    isRelatedToTab: true,
+    icon: 'icon expand-all',
+    onClick: () => getCurrentEditor().handleExpandAll(),
+    testEnabled: () => getCurrentEditor() != null && !getCurrentEditor()?.isExpandedAll(),
+  });
+  registerCommand({
+    id: 'collectionJsonView.collapseAll',
+    category: 'Collection data',
+    name: 'Collapse all',
+    isRelatedToTab: true,
+    icon: 'icon collapse-all',
+    onClick: () => getCurrentEditor().handleCollapseAll(),
+    testEnabled: () => getCurrentEditor() != null && getCurrentEditor()?.isExpandedAll(),
+  });
 </script>
 
 <script lang="ts">
@@ -17,6 +36,7 @@
   import contextMenu, { getContextMenu, registerMenu } from '../utility/contextMenu';
   import CollectionJsonRow from './CollectionJsonRow.svelte';
   import { getIntSettingsValue } from '../settings/settingsTools';
+  import invalidateCommands from '../commands/invalidateCommands';
 
   export let conid;
   export let database;
@@ -32,6 +52,8 @@
 
   let isLoading = false;
   let loadedTime = null;
+  let expandAll = false;
+  let expandKey = 0;
 
   let loadedRows = [];
   let skip = 0;
@@ -61,6 +83,22 @@
   $: grider = new ChangeSetGrider(loadedRows, changeSetState, dispatchChangeSet, display);
 
   // $: console.log('GRIDER', grider);
+
+  export function handleExpandAll() {
+    expandAll = true;
+    expandKey += 1;
+    invalidateCommands();
+  }
+
+  export function handleCollapseAll() {
+    expandAll = false;
+    expandKey += 1;
+    invalidateCommands();
+  }
+
+  export function isExpandedAll() {
+    return expandAll;
+  }
 </script>
 
 <div class="wrapper" use:contextMenu={menu}>
@@ -68,9 +106,11 @@
     <Pager bind:skip bind:limit on:load={() => display.reload()} />
   </div>
   <div class="json">
+    {#key expandKey}
       {#each _.range(0, grider.rowCount) as rowIndex}
-      <CollectionJsonRow {grider} {rowIndex} />
+        <CollectionJsonRow {grider} {rowIndex} {expandAll} />
       {/each}
+    {/key}
   </div>
 </div>
 

packages/web/src/icons/FontIcon.svelte

@@ -204,6 +204,8 @@
     'icon type-unknown': 'mdi mdi-help-box',
 
     'icon at': 'mdi mdi-at',
+    'icon expand-all': 'mdi mdi-expand-all',
+    'icon collapse-all': 'mdi mdi-collapse-all',
 
     'img ok': 'mdi mdi-check-circle color-icon-green',
     'img ok-inv': 'mdi mdi-check-circle color-icon-inv-green',

packages/web/src/tabs/CollectionDataTab.svelte

@@ -216,5 +216,7 @@
     <ToolStripCommandButton command="dataGrid.switchToJson" hideDisabled />
     <ToolStripCommandButton command="dataGrid.switchToTable" hideDisabled />
     <ToolStripExportButton {quickExportHandlerRef} command="collectionDataGrid.export" />
+    <ToolStripCommandButton command="collectionJsonView.expandAll" hideDisabled />
+    <ToolStripCommandButton command="collectionJsonView.collapseAll" hideDisabled />
   </svelte:fragment>
 </ToolStripContainer>