collection toolstrip

packages/web/src/datagrid/DataGrid.svelte

@@ -15,6 +15,7 @@
     id: 'dataGrid.switchToJson',
     category: 'Data grid',
     name: 'Switch to JSON',
+    icon: 'icon json',
     keyText: 'F4',
     testEnabled: () => getCurrentEditor()?.switchViewEnabled('json'),
     onClick: () => getCurrentEditor().switchToView('json'),

packages/web/src/icons/FontIcon.svelte

@@ -92,6 +92,7 @@
     'icon dots-horizontal': 'mdi mdi-dots-horizontal',
     'icon dots-vertical': 'mdi mdi-dots-vertical',
     'icon add': 'mdi mdi-plus-circle',
+    'icon json': 'mdi mdi-code-json',
 
     'icon run': 'mdi mdi-play',
     'icon chevron-down': 'mdi mdi-chevron-down',

packages/web/src/tabs/CollectionDataTab.svelte

@@ -51,6 +51,9 @@
   import _ from 'lodash';
   import { apiCall } from '../utility/api';
   import { getLocalStorage, setLocalStorage } from '../utility/storageCache';
+  import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
+  import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
+  import ToolStripExportButton, { createQuickExportHandlerRef } from '../buttons/ToolStripExportButton.svelte';
 
   export let tabid;
   export let conid;
@@ -137,24 +140,38 @@
   const collapsedLeftColumnStore = writable(getLocalStorage('collection_collapsedLeftColumn', false));
   setContext('collapsedLeftColumnStore', collapsedLeftColumnStore);
   $: setLocalStorage('collection_collapsedLeftColumn', $collapsedLeftColumnStore);
+
+  const quickExportHandlerRef = createQuickExportHandlerRef();
 </script>
 
-<DataGrid
-  bind:loadedRows
-  {...$$props}
-  config={$config}
-  setConfig={config.update}
-  cache={$cache}
-  setCache={cache.update}
-  changeSetState={$changeSetStore}
-  focusOnVisible
-  {display}
-  {changeSetStore}
-  {dispatchChangeSet}
-  gridCoreComponent={CollectionDataGridCore}
-  jsonViewComponent={CollectionJsonView}
-  isDynamicStructure
-  showMacros
-  macroCondition={macro => macro.type == 'transformValue'}
-  onRunMacro={handleRunMacro}
-/>
+<ToolStripContainer>
+  <DataGrid
+    bind:loadedRows
+    {...$$props}
+    config={$config}
+    setConfig={config.update}
+    cache={$cache}
+    setCache={cache.update}
+    changeSetState={$changeSetStore}
+    focusOnVisible
+    {display}
+    {changeSetStore}
+    {dispatchChangeSet}
+    gridCoreComponent={CollectionDataGridCore}
+    jsonViewComponent={CollectionJsonView}
+    isDynamicStructure
+    showMacros
+    macroCondition={macro => macro.type == 'transformValue'}
+    onRunMacro={handleRunMacro}
+  />
+  <svelte:fragment slot="toolstrip">
+    <ToolStripCommandButton command="dataGrid.refresh" hideDisabled />
+    <ToolStripCommandButton command="dataForm.refresh" hideDisabled />
+    <ToolStripCommandButton command="collectionTable.save" />
+    <ToolStripCommandButton command="dataGrid.insertNewRow" hideDisabled />
+    <ToolStripCommandButton command="dataGrid.deleteSelectedRows" hideDisabled />
+    <ToolStripCommandButton command="dataGrid.switchToJson" hideDisabled />
+    <ToolStripCommandButton command="dataGrid.switchToTable" hideDisabled />
+    <ToolStripExportButton {quickExportHandlerRef} />
+  </svelte:fragment>
+</ToolStripContainer>