save perspective to file

packages/web/src/tabs/PerspectiveTab.svelte

@@ -13,14 +13,24 @@
     onClick: () => getCurrentEditor().refresh(),
   });
 
+  registerFileCommands({
+    idPrefix: 'perspective',
+    category: 'Perspective',
+    getCurrentEditor,
+    folder: 'perspectives',
+    format: 'json',
+    fileExtension: 'perspective',
+
+    undoRedo: true,
+  });
+
   export const allowAddToFavorites = props => true;
 </script>
 
 <script lang="ts">
-  import { PerspectiveCache } from 'dbgate-datalib';
+  import { createPerspectiveConfig, PerspectiveCache } from 'dbgate-datalib';
 
   import PerspectiveView from '../perspectives/PerspectiveView.svelte';
-  import usePerspectiveConfig from '../utility/usePerspectiveConfig';
   import { writable } from 'svelte/store';
   import registerCommand from '../commands/registerCommand';
   import createActivator, { getActiveComponent } from '../utility/createActivator';
@@ -29,6 +39,12 @@
   import { findEngineDriver } from 'dbgate-tools';
   import { useConnectionInfo } from '../utility/metadataLoaders';
   import { extensions } from '../stores';
+  import invalidateCommands from '../commands/invalidateCommands';
+  import useEditorData from '../query/useEditorData';
+  import createUndoReducer from '../utility/createUndoReducer';
+  import { registerFileCommands } from '../commands/stdCommands';
+  import _ from 'lodash';
+  import ToolStripSaveButton from '../buttons/ToolStripSaveButton.svelte';
 
   export let tabid;
   export let conid;
@@ -41,7 +57,49 @@
   $: connection = useConnectionInfo({ conid });
   $: driver = findEngineDriver($connection, $extensions);
 
-  const config = usePerspectiveConfig(tabid);
+  $: setEditorData($modelState.value);
+
+  export function getTabId() {
+    return tabid;
+  }
+
+  export function getData() {
+    return $editorState.value || '';
+  }
+
+  export function canUndo() {
+    return $modelState.canUndo;
+  }
+
+  export function undo() {
+    dispatchModel({ type: 'undo' });
+    invalidateCommands();
+  }
+
+  export function canRedo() {
+    return $modelState.canRedo;
+  }
+
+  export function redo() {
+    dispatchModel({ type: 'redo' });
+    invalidateCommands();
+  }
+
+  const { editorState, editorValue, setEditorData } = useEditorData({
+    tabid,
+    onInitialData: value => {
+      dispatchModel({ type: 'reset', value });
+      invalidateCommands();
+    },
+  });
+
+  const [modelState, dispatchModel] = createUndoReducer(
+    createPerspectiveConfig({
+      schemaName,
+      pureName,
+    })
+  );
+
   const cache = new PerspectiveCache();
   const loadedCounts = writable({});
 
@@ -55,15 +113,20 @@
   <PerspectiveView
     {conid}
     {database}
-    {schemaName}
-    {pureName}
     {driver}
-    config={$config}
+    config={$modelState.value}
     setConfig={(value, reload) => {
       if (reload) {
         cache.clear();
       }
-      config.update(value);
+      dispatchModel({
+        type: 'compute',
+        // useMerge: skipUndoChain,
+        compute: v => (_.isFunction(value) ? value(v) : value),
+      });
+      invalidateCommands();
+
+      // config.update(value);
       // loadedCounts.set({});
     }}
     {cache}
@@ -73,5 +136,8 @@
   <svelte:fragment slot="toolstrip">
     <ToolStripCommandButton command="perspective.refresh" />
     <ToolStripCommandButton command="perspective.customJoin" />
+    <ToolStripSaveButton idPrefix="perspective" />
+    <ToolStripCommandButton command="perspective.undo" />
+    <ToolStripCommandButton command="perspective.redo" />
   </svelte:fragment>
 </ToolStripContainer>