create table or collection from object list

packages/web/src/commands/stdCommands.ts

@@ -115,7 +115,7 @@ registerCommand({
 registerCommand({
   id: 'new.table',
   category: 'New',
-  icon: 'img table',
+  icon: 'icon table',
   name: 'Table',
   toolbar: true,
   toolbarName: 'New table',
@@ -147,6 +147,41 @@ registerCommand({
   },
 });
 
+registerCommand({
+  id: 'new.collection',
+  category: 'New',
+  icon: 'icon table',
+  name: 'Collection',
+  toolbar: true,
+  toolbarName: 'New collection',
+  testEnabled: () => {
+    const driver = findEngineDriver(get(currentDatabase)?.connection, getExtensions());
+    return !!get(currentDatabase) && driver?.dialect?.nosql;
+  },
+  onClick: async () => {
+    const $currentDatabase = get(currentDatabase);
+    const connection = _.get($currentDatabase, 'connection') || {};
+    const database = _.get($currentDatabase, 'name');
+
+    const dbid = { conid: connection._id, database };
+
+    showModal(InputTextModal, {
+      value: '',
+      label: 'New collection name',
+      header: 'Create collection',
+      onConfirm: async newCollection => {
+        await axiosInstance.request({
+          url: 'database-connections/run-script',
+          method: 'post',
+          params: dbid,
+          data: { sql: `db.createCollection('${newCollection}')` },
+        });
+        axiosInstance.post('database-connections/sync-model', dbid);
+      },
+    });
+  },
+});
+
 registerCommand({
   id: 'new.markdown',
   category: 'New',

packages/web/src/elements/CloseSearchButton.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  import InlineButton from './InlineButton.svelte';
+
+  export let filter;
+</script>
+
+{#if filter}
+  <InlineButton on:click={() => (filter = '')} title="Clear filter">
+    <FontIcon icon="icon close" />
+  </InlineButton>
+{/if}

packages/web/src/elements/InlineButton.svelte

@@ -2,6 +2,7 @@
   export let disabled = false;
   export let square = false;
   export let narrow = false;
+  export let title = null;
 
   let domButton;
 
@@ -10,7 +11,7 @@
   }
 </script>
 
-<div class="outer buttonLike" class:disabled class:square class:narrow on:click bind:this={domButton}>
+<div class="outer buttonLike" {title} class:disabled class:square class:narrow on:click bind:this={domButton}>
   <div class="inner">
     <slot />
   </div>

packages/web/src/icons/FontIcon.svelte

@@ -38,6 +38,7 @@
     'icon filter': 'mdi mdi-filter',
     'icon filter-off': 'mdi mdi-filter-off',
     'icon reload': 'mdi mdi-reload',
+    'icon refresh': 'mdi mdi-refresh',
     'icon undo': 'mdi mdi-undo',
     'icon redo': 'mdi mdi-redo',
     'icon save': 'mdi mdi-content-save',
@@ -78,6 +79,7 @@
     'icon checkbox-marked': 'mdi mdi-checkbox-marked-outline',
     'icon dots-horizontal': 'mdi mdi-dots-horizontal',
     'icon dots-vertical': 'mdi mdi-dots-vertical',
+    'icon add': 'mdi mdi-plus-circle',
 
     'icon run': 'mdi mdi-play',
     'icon chevron-down': 'mdi mdi-chevron-down',

packages/web/src/widgets/ConnectionList.svelte

@@ -14,6 +14,8 @@
   import runCommand from '../commands/runCommand';
   import getConnectionLabel from '../utility/getConnectionLabel';
   import { useConnectionColorFactory } from '../utility/useConnectionColor';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import CloseSearchButton from '../elements/CloseSearchButton.svelte';
 
   const connections = useConnectionList();
   const serverStatus = useServerStatus();
@@ -36,7 +38,13 @@
 
 <SearchBoxWrapper>
   <SearchInput placeholder="Search connection or database" bind:value={filter} />
-  <InlineButton on:click={handleRefreshConnections}>Refresh</InlineButton>
+  <CloseSearchButton bind:filter />
+  <InlineButton on:click={() => runCommand('new.connection')} title="Add new connection">
+    <FontIcon icon="img add" />
+  </InlineButton>
+  <InlineButton on:click={handleRefreshConnections} title="Refresh connection list">
+    <FontIcon icon="icon refresh" />
+  </InlineButton>
 </SearchBoxWrapper>
 <WidgetsInnerContainer>
   <AppObjectList

packages/web/src/widgets/SqlObjectList.svelte

@@ -16,7 +16,7 @@
   import InlineButton from '../elements/InlineButton.svelte';
   import SearchInput from '../elements/SearchInput.svelte';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
-  import { useDatabaseInfo, useDatabaseStatus } from '../utility/metadataLoaders';
+  import { useConnectionInfo, useDatabaseInfo, useDatabaseStatus } from '../utility/metadataLoaders';
   import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
   import AppObjectList from '../appobj/AppObjectList.svelte';
   import _ from 'lodash';
@@ -27,6 +27,11 @@
   import axiosInstance from '../utility/axiosInstance';
   import LoadingInfo from '../elements/LoadingInfo.svelte';
   import { getObjectTypeFieldLabel } from '../utility/common';
+  import DropDownButton from '../elements/DropDownButton.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import CloseSearchButton from '../elements/CloseSearchButton.svelte';
+  import { findEngineDriver } from 'dbgate-tools';
+  import { extensions } from '../stores';
 
   export let conid;
   export let database;
@@ -36,6 +41,9 @@
   $: objects = useDatabaseInfo({ conid, database });
   $: status = useDatabaseStatus({ conid, database });
 
+  $: connection = useConnectionInfo({ conid });
+  $: driver = findEngineDriver($connection, $extensions);
+
   // $: console.log('OBJECTS', $objects);
 
   $: objectList = _.flatten(
@@ -54,6 +62,14 @@
   const handleRefreshDatabase = () => {
     axiosInstance.post('database-connections/refresh', { conid, database });
   };
+
+  function createAddMenu() {
+    if (driver?.dialect?.nosql) {
+      return [{ label: 'New collection', command: 'new.collection' }];
+    } else {
+      return [{ label: 'New table', command: 'new.table' }];
+    }
+  }
 </script>
 
 {#if $status && $status.name == 'error'}
@@ -72,7 +88,11 @@
 {:else}
   <SearchBoxWrapper>
     <SearchInput placeholder="Search tables or objects" bind:value={filter} />
-    <InlineButton on:click={handleRefreshDatabase}>Refresh</InlineButton>
+    <CloseSearchButton bind:filter />
+    <DropDownButton icon="img add" menu={createAddMenu} />
+    <InlineButton on:click={handleRefreshDatabase} title="Refresh database connection and object list">
+      <FontIcon icon="icon refresh" />
+    </InlineButton>
   </SearchBoxWrapper>
   <WidgetsInnerContainer>
     {#if ($status && ($status.name == 'pending' || $status.name == 'checkStructure' || $status.name == 'loadStructure') && $objects) || !$objects}