cloud files WIP

packages/web/src/appobj/CloudContentAppObject.svelte

@@ -17,6 +17,7 @@
   import openNewTab from '../utility/openNewTab';
   import { showModal } from '../modals/modalTools';
   import ConfirmModal from '../modals/ConfirmModal.svelte';
+  import SavedFileAppObject from './SavedFileAppObject.svelte';
 
   export let data;
   export let passProps;
@@ -102,6 +103,19 @@
     on:dblclick
     on:expand
   />
+{:else if data.type == 'file'}
+  <SavedFileAppObject
+    {...$$restProps}
+    {passProps}
+    data={{
+      file: data.name,
+      folder: data.contentFolder,
+      folid: data.folid,
+      cntid: data.cntid,
+    }}
+    on:dblclick
+    on:expand
+  />
 {:else}
   <AppObjectCore
     {...$$restProps}

packages/web/src/appobj/SavedFileAppObject.svelte

@@ -247,10 +247,19 @@
   };
 
   async function openTab() {
-    const resp = await apiCall('files/load', { folder, file: data.file, format: handler.format });
+    let dataContent;
+    if (data.folid && data.cntid) {
+      const resp = await apiCall('cloud/get-content', {
+        folid: data.folid,
+        cntid: data.cntid,
+      });
+      dataContent = resp.content;
+    } else {
+      dataContent = await apiCall('files/load', { folder, file: data.file, format: handler.format });
+    }
 
-    const connProps: any = {};
     let tooltip = undefined;
+    const connProps: any = {};
 
     if (handler.currentConnection) {
       const connection = _.get($currentDatabase, 'connection') || {};
@@ -270,10 +279,12 @@
           savedFile: data.file,
           savedFolder: handler.folder,
           savedFormat: handler.format,
+          savedCloudFolderId: data.folid,
+          savedCloudContentId: data.cntid,
           ...connProps,
         },
       },
-      { editor: resp }
+      { editor: dataContent }
     );
   }
 </script>

packages/web/src/forms/FormCloudFolderSelect.svelte

@@ -6,14 +6,22 @@
   export let name;
   export let requiredRoleVariants = ['read', 'write', 'admin'];
 
+  export let prependFolders = [];
+
   const cloudContentList = useCloudContentList();
 
-  $: folderOptions = ($cloudContentList || [])
-    .filter(folder => requiredRoleVariants.find(role => folder.role == role))
-    .map(folder => ({
+  $: folderOptions = [
+    ...prependFolders.map(folder => ({
       value: folder.folid,
       label: folder.name,
-    }));
+    })),
+    ...($cloudContentList || [])
+      .filter(folder => requiredRoleVariants.find(role => folder.role == role))
+      .map(folder => ({
+        value: folder.folid,
+        label: folder.name,
+      })),
+  ];
 </script>
 
 <FormSelectField {...$$props} options={folderOptions} />

packages/web/src/modals/SaveFileModal.svelte

@@ -23,20 +23,42 @@
   export let filePath;
   export let onSave = undefined;
 
-  const values = writable({ name });
+  const values = writable({ name, cloudFolder: '__local' });
 
   const electron = getElectron();
 
   const handleSubmit = async e => {
-    const { name } = e.detail;
-    await apiCall('files/save', { folder, file: name, data, format });
-    closeCurrentModal();
-    if (onSave) {
-      onSave(name, {
-        savedFile: name,
-        savedFolder: folder,
-        savedFilePath: null,
+    const { name, cloudFolder } = e.detail;
+    if (cloudFolder === '__local') {
+      await apiCall('files/save', { folder, file: name, data, format });
+      closeCurrentModal();
+      if (onSave) {
+        onSave(name, {
+          savedFile: name,
+          savedFolder: folder,
+          savedFilePath: null,
+        });
+      }
+    } else {
+      const resp = await apiCall('cloud/save-file', {
+        folid: cloudFolder,
+        fileName: name,
+        data,
+        contentFolder: folder,
+        format,
       });
+      if (resp.cntid) {
+        closeCurrentModal();
+        if (onSave) {
+          onSave(name, {
+            savedFile: name,
+            savedFolder: folder,
+            savedFilePath: null,
+            savedCloudFolderId: cloudFolder,
+            savedCloudContentId: resp.cntid,
+          });
+        }
+      }
     }
   };
 
@@ -56,28 +78,6 @@
       });
     }
   };
-
-  const handleSaveToCloud = async folid => {
-    const resp = await apiCall('cloud/save-file', {
-      folid,
-      fileName: $values.name,
-      data,
-      contentFolder: folder,
-      format,
-    });
-    if (resp.cntid) {
-      closeCurrentModal();
-      if (onSave) {
-        onSave(name, {
-          savedFile: name,
-          savedFolder: folder,
-          savedFilePath: null,
-          savedCloudFolderId: folid,
-          savedCloudContentId: resp.cntid,
-        });
-      }
-    }
-  };
 </script>
 
 <FormProviderCore {values}>
@@ -86,10 +86,16 @@
     <FormTextField label="File name" name="name" focused />
     {#if $cloudSigninTokenHolder}
       <FormCloudFolderSelect
-        label="Choose local or cloud folder"
+        label="Choose cloud folder"
         name="cloudFolder"
         isNative
         requiredRoleVariants={['write', 'admin']}
+        prependFolders={[
+          {
+            folid: '__local',
+            name: "Local folder (don't store on cloud)",
+          },
+        ]}
       />
     {/if}
 

packages/web/src/widgets/PrivateCloudWidget.svelte

@@ -34,8 +34,7 @@
   import ConfirmModal from '../modals/ConfirmModal.svelte';
   import { showSnackbarInfo } from '../utility/snackbar';
 
-  let publicFilter = '';
-  let cloudFilter = '';
+  let filter = '';
   let domSqlObjectList = null;
 
   const cloudContentList = useCloudContentList();
@@ -205,8 +204,8 @@
     skip={!$cloudSigninTokenHolder}
   >
     <SearchBoxWrapper>
-      <SearchInput placeholder="Search cloud connections and files" bind:value={cloudFilter} />
-      <CloseSearchButton bind:filter={cloudFilter} />
+      <SearchInput placeholder="Search cloud connections and files" bind:value={filter} />
+      <CloseSearchButton bind:filter />
       <DropDownButton icon="icon plus-thick" menu={createAddMenu} />
       <InlineButton
         on:click={handleRefreshContent}
@@ -223,7 +222,7 @@
         emptyGroupNames={emptyCloudContent}
         groupFunc={data => data.folid}
         mapGroupTitle={folid => `${contentGroupMap[folid]?.name} - ${contentGroupMap[folid]?.role}`}
-        filter={publicFilter}
+        {filter}
         subItemsComponent={() => SubCloudItemsList}
         expandIconFunc={plusExpandIcon}
         isExpandable={data =>

packages/web/src/widgets/PublicCloudWidget.svelte

@@ -18,7 +18,7 @@
   import FontIcon from '../icons/FontIcon.svelte';
   import { apiCall } from '../utility/api';
   import _ from 'lodash';
-  let publicFilter = '';
+  let filter = '';
 
   const publicFiles = usePublicCloudFiles();
 
@@ -31,8 +31,8 @@
   <WidgetColumnBarItem title="Public Knowledge Base" name="publicCloud" storageName="publicCloudItems">
     <WidgetsInnerContainer>
       <SearchBoxWrapper>
-        <SearchInput placeholder="Search public files" bind:value={publicFilter} />
-        <CloseSearchButton bind:filter={publicFilter} />
+        <SearchInput placeholder="Search public files" bind:value={filter} />
+        <CloseSearchButton bind:filter />
         <InlineButton
           on:click={handleRefreshPublic}
           title="Refresh files"
@@ -46,7 +46,7 @@
         list={$publicFiles || []}
         module={publicCloudFileAppObject}
         groupFunc={data => data.folder || undefined}
-        filter={publicFilter}
+        {filter}
       />
     </WidgetsInnerContainer>
   </WidgetColumnBarItem>