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
-  value={rowData}
-  labelOverride="({rowIndex + 1}) "
-  isModified={rowStatus.status == 'updated'}
-  isInserted={rowStatus.status == 'inserted'}
-  isDeleted={rowStatus.status == 'deleted'}
-/>
+{#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">
-    {#each _.range(0, grider.rowCount) as rowIndex}
-      <CollectionJsonRow {grider} {rowIndex} />
-    {/each}
+    {#key expandKey}
+      {#each _.range(0, grider.rowCount) as rowIndex}
+        <CollectionJsonRow {grider} {rowIndex} {expandAll} />
+      {/each}
+    {/key}
   </div>
 </div>