sql object list

packages/web/src/widgets/ErrorInfo.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let message;
+  export let icon = 'img error';
+  export let isSmall = false;
+</script>
+
+{#if isSmall}
+  <div class="container-small">
+    <FontIcon {icon} />
+    {message}
+  </div>
+{:else}
+  <div class="container">
+    <div class="icon">
+      <FontIcon {icon} />
+    </div>
+    {message}
+  </div>
+{/if}
+
+<style>
+  .container {
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+  }
+  .icon {
+    font-size: 20pt;
+    margin: 10px;
+  }
+
+  .container-small {
+    display: flex;
+    margin-right: 10px;
+  }
+</style>

packages/web/src/widgets/InlineButton.svelte

@@ -3,7 +3,7 @@
   export let square = false;
 </script>
 
-<div class="outer buttonLike" class:disabled class:square>
+<div class="outer buttonLike" class:disabled class:square on:click>
   <div class="inner">
     <slot />
   </div>
@@ -33,11 +33,15 @@
   }
 
   .outer:hover:not(.disabled) {
-    border: 1px solid var(--bg-1);
+    border: 1px solid var(--theme-font-1);
+  }
+
+  .outer:active:not(.disabled) {
     background: linear-gradient(to bottom, var(--bg-2) 5%, var(--bg-1) 100%);
     background-color: var(--bg-2);
   }
 
+
   .inner {
     margin: auto;
     flex: 1;

packages/web/src/widgets/LoadingInfo.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let message;
+  export let wrapper = false;
+</script>
+
+{#if wrapper}
+  <div class="wrapper">
+    <div class="box">
+      <div class="container">
+        <div class="spinner">
+          <FontIcon icon="icon loading" />
+        </div>
+        {message}
+      </div>
+    </div>
+  </div>
+{:else}
+  <div class="container">
+    <div class="spinner">
+      <FontIcon icon="icon loading" />
+    </div>
+    {message}
+  </div>
+{/if}
+
+<style>
+  .container {
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+  }
+
+  .spinner {
+    font-size: 20pt;
+    margin: 10px;
+  }
+  .wrapper {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+  .box {
+    background-color: var(--thme-bg-2);
+    padding: 10px;
+    border: 1px solid gray;
+  }
+</style>

packages/web/src/widgets/SqlObjectList.svelte

@@ -9,6 +9,9 @@
   import * as databaseObjectAppObject from '../appobj/DatabaseObjectAppObject.svelte';
   import SubColumnParamList from '../appobj/SubColumnParamList.svelte';
   import { chevronExpandIcon } from '../icons/expandIcons';
+  import ErrorInfo from './ErrorInfo.svelte';
+  import axios from '../utility/axios';
+import LoadingInfo from './LoadingInfo.svelte';
 
   export let conid;
   export let database;
@@ -26,20 +29,43 @@
       )
     )
   );
+
+  const handleRefreshDatabase = () => {
+    axios.post('database-connections/refresh', { conid, database });
+  };
 </script>
 
-<SearchBoxWrapper>
-  <SearchInput placeholder="Search tables or objects" bind:value={filter} />
-  <InlineButton>Refresh</InlineButton>
-</SearchBoxWrapper>
-<WidgetsInnerContainer>
-  <AppObjectList
-    list={objectList.map(x => ({ ...x, conid, database }))}
-    module={databaseObjectAppObject}
-    groupFunc={data => _.startCase(data.objectTypeField)}
-    subItemsComponent={SubColumnParamList}
-    isExpandable={data => data.objectTypeField == 'tables' || data.objectTypeField == 'views'}
-    expandIconFunc={chevronExpandIcon}
-    {filter}
-  />
-</WidgetsInnerContainer>
+{#if $status && $status.name == 'error'}
+  <WidgetsInnerContainer>
+    <ErrorInfo message={$status.message} icon="img error" />
+    <InlineButton on:click={handleRefreshDatabase}>Refresh</InlineButton>
+  </WidgetsInnerContainer>
+{:else if objectList.length == 0 && $status && $status.name != 'pending' && $objects}
+  <WidgetsInnerContainer>
+    <ErrorInfo
+      message={`Database ${database} is empty or structure is not loaded, press Refresh button to reload structure`}
+      icon="img alert"
+    />
+    <InlineButton on:click={handleRefreshDatabase}>Refresh</InlineButton>
+  </WidgetsInnerContainer>
+{:else}
+  <SearchBoxWrapper>
+    <SearchInput placeholder="Search tables or objects" bind:value={filter} />
+    <InlineButton on:click={handleRefreshDatabase}>Refresh</InlineButton>
+  </SearchBoxWrapper>
+  <WidgetsInnerContainer>
+    {#if ($status && $status.name == 'pending' && $objects) || !$objects}
+      <LoadingInfo message="Loading database structure" />
+    {:else}
+      <AppObjectList
+        list={objectList.map(x => ({ ...x, conid, database }))}
+        module={databaseObjectAppObject}
+        groupFunc={data => _.startCase(data.objectTypeField)}
+        subItemsComponent={SubColumnParamList}
+        isExpandable={data => data.objectTypeField == 'tables' || data.objectTypeField == 'views'}
+        expandIconFunc={chevronExpandIcon}
+        {filter}
+      />
+    {/if}
+  </WidgetsInnerContainer>
+{/if}

packages/web/src/widgets/SqlObjectListWrapper.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import _ from 'lodash';
   import { currentDatabase } from '../stores';
+import ErrorInfo from './ErrorInfo.svelte';
   import SqlObjectList from './SqlObjectList.svelte';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
 
@@ -11,5 +12,7 @@
 {#if conid && database}
   <SqlObjectList {conid} {database} />
 {:else}
-  <WidgetsInnerContainer>Database not selected</WidgetsInnerContainer>
+  <WidgetsInnerContainer>
+    <ErrorInfo message="Database not selected" icon="img alert" />
+  </WidgetsInnerContainer>
 {/if}