apps skeleton

packages/web/src/widgets/AppFilesList.svelte

@@ -0,0 +1,89 @@
+<script lang="ts" context="module">
+  const APP_LABELS = {
+    'command.sql': 'SQL commands',
+    'query.sql': 'SQL queries',
+  };
+</script>
+
+<script lang="ts">
+  import { createFreeTableModel } from 'dbgate-datalib';
+
+  import _ from 'lodash';
+
+  import AppObjectList from '../appobj/AppObjectList.svelte';
+  import * as appFileAppObject from '../appobj/AppFileAppObject.svelte';
+  import CloseSearchButton from '../elements/CloseSearchButton.svelte';
+  import DropDownButton from '../elements/DropDownButton.svelte';
+
+  import InlineButton from '../elements/InlineButton.svelte';
+
+  import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
+  import SearchInput from '../elements/SearchInput.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import InputTextModal from '../modals/InputTextModal.svelte';
+  import { showModal } from '../modals/modalTools';
+  import newQuery from '../query/newQuery';
+  import { currentApplication } from '../stores';
+  import { apiCall } from '../utility/api';
+  import { markArchiveFileAsDataSheet } from '../utility/archiveTools';
+  import { useAppFiles, useArchiveFolders } from '../utility/metadataLoaders';
+  import openNewTab from '../utility/openNewTab';
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+
+  let filter = '';
+
+  $: folder = $currentApplication;
+  $: files = useAppFiles({ folder });
+
+  const handleRefreshFiles = () => {
+    apiCall('apps/refresh-files', { folder });
+  };
+
+  function handleNewSqlFile(fileType, header) {
+    showModal(InputTextModal, {
+      value: '',
+      label: 'New file name',
+      header,
+      onConfirm: async file => {
+        newQuery({
+          title: file,
+          // @ts-ignore
+          savedFile: file + '.' + fileType,
+          savedFolder: 'app:' + $currentApplication,
+          savedFormat: 'text',
+          appFolder: $currentApplication,
+        });
+      },
+    });
+  }
+
+  function createAddMenu() {
+    return [
+      { text: 'New SQL command', onClick: () => handleNewSqlFile('command.sql', 'Create new SQL command') },
+      { text: 'New query view', onClick: () => handleNewSqlFile('query.sql', 'Create new SQL query') },
+    ];
+  }
+</script>
+
+<SearchBoxWrapper>
+  <SearchInput placeholder="Search application files" bind:value={filter} />
+
+  <CloseSearchButton bind:filter />
+  <DropDownButton icon="icon plus-thick" menu={createAddMenu} />
+  <InlineButton on:click={handleRefreshFiles} title="Refresh files of selected application">
+    <FontIcon icon="icon refresh" />
+  </InlineButton>
+</SearchBoxWrapper>
+<WidgetsInnerContainer>
+  <AppObjectList
+    list={($files || []).map(file => ({
+      fileName: file.name,
+      folderName: folder,
+      fileType: file.type,
+      fileLabel: file.label,
+    }))}
+    groupFunc={data => APP_LABELS[data.fileType] || 'App config'}
+    module={appFileAppObject}
+    {filter}
+  />
+</WidgetsInnerContainer>

packages/web/src/widgets/AppFolderList.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import AppObjectList from '../appobj/AppObjectList.svelte';
+  import * as appFolderAppObject from '../appobj/AppFolderAppObject.svelte';
+  import runCommand from '../commands/runCommand';
+  import CloseSearchButton from '../elements/CloseSearchButton.svelte';
+
+  import InlineButton from '../elements/InlineButton.svelte';
+
+  import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
+  import SearchInput from '../elements/SearchInput.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import { apiCall } from '../utility/api';
+  import { useAppFolders } from '../utility/metadataLoaders';
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+
+  let filter = '';
+
+  $: folders = useAppFolders();
+
+  const handleRefreshFolders = () => {
+    apiCall('apps/refresh-folders');
+  };
+</script>
+
+<SearchBoxWrapper>
+  <SearchInput placeholder="Search applications" bind:value={filter} />
+  <CloseSearchButton bind:filter />
+  <InlineButton on:click={() => runCommand('new.application')} title="Create new application">
+    <FontIcon icon="icon plus-thick" />
+  </InlineButton>
+  <InlineButton on:click={handleRefreshFolders} title="Refresh application list">
+    <FontIcon icon="icon refresh" />
+  </InlineButton>
+</SearchBoxWrapper>
+<WidgetsInnerContainer>
+  <AppObjectList list={_.sortBy($folders, 'name')} module={appFolderAppObject} {filter} />
+</WidgetsInnerContainer>

packages/web/src/widgets/AppWidget.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import AppFilesList from './AppFilesList.svelte';
+
+  import WidgetColumnBar from './WidgetColumnBar.svelte';
+  import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
+
+  import { useFavorites } from '../utility/metadataLoaders';
+  import AppFolderList from './AppFolderList.svelte';
+</script>
+
+<WidgetColumnBar>
+  <WidgetColumnBarItem title="Applications" name="apps" height="30%" storageName="appsWidget">
+    <AppFolderList />
+  </WidgetColumnBarItem>
+
+  <WidgetColumnBarItem title="Application files" name="files" storageName="appFilesWidget">
+    <AppFilesList />
+  </WidgetColumnBarItem>
+</WidgetColumnBar>

packages/web/src/widgets/WidgetContainer.svelte

@@ -6,6 +6,7 @@
   import PluginsWidget from './PluginsWidget.svelte';
   import CellDataWidget from './CellDataWidget.svelte';
   import HistoryWidget from './HistoryWidget.svelte';
+  import AppWidget from './AppWidget.svelte';
 </script>
 
 <DatabaseWidget hidden={$selectedWidget != 'database'} />
@@ -25,3 +26,6 @@
 {#if $selectedWidget == 'cell-data'}
   <CellDataWidget />
 {/if}
+{#if $selectedWidget == 'app'}
+  <AppWidget />
+{/if}

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -40,6 +40,11 @@
       name: 'cell-data',
       title: 'Selected cell data detail view',
     },
+    {
+      icon: 'icon app',
+      name: 'app',
+      title: 'Application layers',
+    },
     // {
     //   icon: 'icon settings',
     //   name: 'settings',