SYNC: Merge pull request #9 from dbgate/feature/apps

packages/web/src/forms/TargetApplicationSelect.svelte

@@ -1,48 +1,78 @@
 <script lang="ts">
   import _ from 'lodash';
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, tick } from 'svelte';
 
   import SelectField from '../forms/SelectField.svelte';
   import { currentDatabase } from '../stores';
   import { filterAppsForDatabase } from '../utility/appTools';
-  import { useAppFolders, useUsedApps } from '../utility/metadataLoaders';
+  import { getConnectionInfo, useAllApps, useConnectionInfo, useDatabaseInfo } from '../utility/metadataLoaders';
+  import InlineButton from '../buttons/InlineButton.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import { showModal } from '../modals/modalTools';
+  import InputTextModal from '../modals/InputTextModal.svelte';
+  import { apiCall } from '../utility/api';
 
-  export let value = '#new';
-  export let disableInitialize = false;
+  export let value = '';
+  export let conid;
+  export let database;
 
   const dispatch = createEventDispatcher();
+  let selectFieldKey = 0;
 
-  $: appFolders = useAppFolders();
-  $: usedApps = useUsedApps();
+  $: dbInfo = useDatabaseInfo({ conid, database });
+  $: connectionInfo = useConnectionInfo({ conid });
 
-  $: {
-    if (!disableInitialize && value == '#new' && $currentDatabase) {
-      const filtered = filterAppsForDatabase($currentDatabase.connection, $currentDatabase.name, $usedApps || []);
-      const common = _.intersection(
-        ($appFolders || []).map(x => x.name),
-        filtered.map(x => x.name)
-      );
-      if (common.length > 0) {
-        value = common[0] as string;
+  $: allApps = useAllApps();
+  $: apps = filterAppsForDatabase($connectionInfo, database, $allApps || [], $dbInfo);
+
+  $: if (apps?.length == 1) {
+    value = apps[0].appid;
+    selectFieldKey++;
+    dispatch('change', value);
+  }
+
+  async function handleAddNewApplication() {
+    showModal(InputTextModal, {
+      header: 'New application',
+      label: 'Application name',
+      value: _.startCase(database),
+      onConfirm: async appName => {
+        const newAppId = await apiCall('apps/create-app-from-db', {
+          appName,
+          server: $connectionInfo?.server,
+          database,
+        });
+        await tick();
+        value = newAppId;
         dispatch('change', value);
-      }
-    }
+      },
+    });
   }
 </script>
 
-<SelectField
-  isNative
-  {...$$restProps}
-  {value}
-  on:change={e => {
-    value = e.detail;
-    dispatch('change', value);
-  }}
-  options={[
-    { label: '(New application linked to current DB)', value: '#new' },
-    ...($appFolders || []).map(app => ({
-      label: app.name,
-      value: app.name,
-    })),
-  ]}
-/>
+<div class="flex">
+  {#key selectFieldKey}
+    <SelectField
+      isNative
+      {...$$restProps}
+      {value}
+      on:change={e => {
+        value = e.detail;
+        dispatch('change', value);
+      }}
+      options={[
+        {
+          label: '(not selected)',
+          value: '',
+        },
+        ...(apps || []).map(app => ({
+          label: app.applicationName,
+          value: app.appid,
+        })),
+      ]}
+    />
+  {/key}
+  <InlineButton on:click={handleAddNewApplication} square>
+    <FontIcon icon="icon plus-thick" padLeft padRight />
+  </InlineButton>
+</div>