From 565a60e63807dcdfbfc945a367db7d48934b9174 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Sun, 28 Feb 2021 21:16:08 +0100
Subject: [PATCH] app object list

---
 packages/web/public/global.css                |  4 ++
 packages/web/src/appobj/AppObjectCore.svelte  |  3 +-
 packages/web/src/appobj/AppObjectGroup.svelte | 37 ++++++++++++++++++
 packages/web/src/appobj/AppObjectList.svelte  | 31 +++++++++++++--
 .../web/src/appobj/AppObjectListItem.svelte   | 38 +++++++++++++++++--
 .../web/src/appobj/ConnectionAppObject.svelte |  6 ++-
 .../web/src/appobj/DatabaseAppObject.svelte   |  4 ++
 .../src/appobj/DatabaseObjectAppObject.svelte |  6 +++
 packages/web/src/icons/ExpandIcon.svelte      | 12 ++++++
 packages/web/src/icons/FontIcon.svelte        |  2 +-
 .../web/src/widgets/ConnectionList.svelte     |  2 +
 packages/web/src/widgets/SqlObjectList.svelte | 11 +++++-
 12 files changed, 142 insertions(+), 14 deletions(-)
 create mode 100644 packages/web/src/appobj/AppObjectGroup.svelte
 create mode 100644 packages/web/src/icons/ExpandIcon.svelte

diff --git a/packages/web/public/global.css b/packages/web/public/global.css
index d3679ddf..a5228d52 100644
--- a/packages/web/public/global.css
+++ b/packages/web/public/global.css
@@ -28,6 +28,10 @@ body {
   background-color: var(--theme-bg-2);
 }
 
+.icon-invisible {
+  visibility: hidden;
+}
+
 /* html, body {
 	position: relative;
 	width: 100%;
diff --git a/packages/web/src/appobj/AppObjectCore.svelte b/packages/web/src/appobj/AppObjectCore.svelte
index 2d29ded0..5f07d3cc 100644
--- a/packages/web/src/appobj/AppObjectCore.svelte
+++ b/packages/web/src/appobj/AppObjectCore.svelte
@@ -6,7 +6,6 @@
   export let title;
 
   export let isBold = false;
-  export let prefix = '';
   export let isBusy = false;
   export let statusIcon = undefined;
   export let statusTitle = undefined;
@@ -15,7 +14,7 @@
 </script>
 
 <div class="main" class:isBold draggable on:click use:contextMenu={menu}>
-  {prefix}
+  <slot name="prefix" />
   {#if isBusy}
     <FontIcon icon="icon loading" />
   {:else}
diff --git a/packages/web/src/appobj/AppObjectGroup.svelte b/packages/web/src/appobj/AppObjectGroup.svelte
new file mode 100644
index 00000000..9f71da4d
--- /dev/null
+++ b/packages/web/src/appobj/AppObjectGroup.svelte
@@ -0,0 +1,37 @@
+<script>
+  import AppObjectListItem from './AppObjectListItem.svelte';
+
+  export let group;
+  export let items;
+  export let module;
+
+  let isExpanded = true;
+
+  $: filtered = items.filter(x => x.isMatched);
+  $: countText = filtered.length < items.length ? `${filtered.length}/${items.length}` : `${items.length}`;
+</script>
+
+<div class="group" on:click={() => (isExpanded = !isExpanded)}>
+  {group}
+  {items && `(${countText})`}
+</div>
+
+{#if isExpanded}
+  {#each filtered as item (module.extractKey(item.data))}
+    <AppObjectListItem {module} data={item.data} on:objectClick />
+  {/each}
+{/if}
+
+<style>
+  .group {
+    user-select: none;
+    padding: 5px;
+    cursor: pointer;
+    white-space: nowrap;
+    font-weight: bold;
+  }
+
+  .group:hover {
+    background-color: var(--theme-bg-hover);
+  }
+</style>
diff --git a/packages/web/src/appobj/AppObjectList.svelte b/packages/web/src/appobj/AppObjectList.svelte
index af4f7e6b..27330750 100644
--- a/packages/web/src/appobj/AppObjectList.svelte
+++ b/packages/web/src/appobj/AppObjectList.svelte
@@ -1,10 +1,14 @@
-<script lang="ts">
+<script>
+  import _ from 'lodash';
+  import AppObjectGroup from './AppObjectGroup.svelte';
+
   import AppObjectListItem from './AppObjectListItem.svelte';
 
   export let list;
   export let module;
   export let subItemsComponent = undefined;
   export let expandOnClick = false;
+  export let isExpandable = undefined;
   export let filter;
 
   export let groupFunc = undefined;
@@ -14,8 +18,27 @@
     if (matcher && !matcher(filter)) return false;
     return true;
   });
+
+  $: listGrouped = groupFunc
+    ? _.compact(
+        (list || []).map(data => {
+          const matcher = module.createMatcher && module.createMatcher(data);
+          const isMatched = matcher && !matcher(filter) ? false : true;
+          const group = groupFunc(data);
+          return { group, data, isMatched };
+        })
+      )
+    : null;
+
+  $: groups = groupFunc ? _.groupBy(listGrouped, 'group') : null;
 </script>
 
-{#each filtered as data}
-  <AppObjectListItem {module} {subItemsComponent} {expandOnClick} {data} on:objectClick />
-{/each}
+{#if groupFunc}
+  {#each _.keys(groups) as group (group)}
+    <AppObjectGroup {group} {module} items={groups[group]} />
+  {/each}
+{:else}
+  {#each filtered as data (module.extractKey(data))}
+    <AppObjectListItem {module} {subItemsComponent} {expandOnClick} {data} {isExpandable} on:objectClick />
+  {/each}
+{/if}
diff --git a/packages/web/src/appobj/AppObjectListItem.svelte b/packages/web/src/appobj/AppObjectListItem.svelte
index 93871929..1521cb1c 100644
--- a/packages/web/src/appobj/AppObjectListItem.svelte
+++ b/packages/web/src/appobj/AppObjectListItem.svelte
@@ -1,20 +1,52 @@
 <script lang="ts">
+  import ExpandIcon from '../icons/ExpandIcon.svelte';
+  import { tick } from 'svelte';
+
   export let module;
   export let data;
   export let subItemsComponent;
   export let expandOnClick;
+  export let isExpandable = undefined;
 
   let isExpanded = false;
 
-  function handleExpand() {
+  async function handleExpand() {
     if (subItemsComponent && expandOnClick) {
+      await tick();
       isExpanded = !isExpanded;
     }
   }
+
+  $: expandable = data && isExpandable && isExpandable(data);
+
+  $: if (!expandable && isExpanded) isExpanded = false;
 </script>
 
-<svelte:component this={module.default} {data} on:click={handleExpand} />
+{#if subItemsComponent}
+  <svelte:component this={module.default} {data} on:click={handleExpand}>
+    <span class="expand-icon" slot="prefix">
+      {#if expandable}
+        <ExpandIcon {isExpanded} />
+      {:else}
+        <ExpandIcon isBlank />
+      {/if}
+    </span>
+  </svelte:component>
+{:else}
+  <svelte:component this={module.default} {data} on:click={handleExpand} />
+{/if}
 
 {#if isExpanded && subItemsComponent}
-  <svelte:component this={subItemsComponent} {data} />
+  <div class="subitems">
+    <svelte:component this={subItemsComponent} {data} />
+  </div>
 {/if}
+
+<style>
+  .expand-icon {
+    margin-right: 3px;
+  }
+  .subitems {
+    margin-left: 28px;
+  }
+</style>
diff --git a/packages/web/src/appobj/ConnectionAppObject.svelte b/packages/web/src/appobj/ConnectionAppObject.svelte
index 7dd1c4c1..c8773cc9 100644
--- a/packages/web/src/appobj/ConnectionAppObject.svelte
+++ b/packages/web/src/appobj/ConnectionAppObject.svelte
@@ -102,6 +102,8 @@
   statusTitle={statusTitle || engineStatusTitle}
   {extInfo}
   menu={getContextMenu(data, $openedConnections)}
-  on:click
   on:click={() => ($openedConnections = _.uniq([...$openedConnections, data._id]))}
-/>
+  on:click
+>
+  <slot name="prefix" slot="prefix" />
+</AppObjectCore>
diff --git a/packages/web/src/appobj/DatabaseAppObject.svelte b/packages/web/src/appobj/DatabaseAppObject.svelte
index 1e04fcef..3a1460f3 100644
--- a/packages/web/src/appobj/DatabaseAppObject.svelte
+++ b/packages/web/src/appobj/DatabaseAppObject.svelte
@@ -1,3 +1,7 @@
+<script lang="ts" context="module">
+  export const extractKey = props => props.name;
+</script>
+
 <script lang="ts">
   import _ from 'lodash';
 
diff --git a/packages/web/src/appobj/DatabaseObjectAppObject.svelte b/packages/web/src/appobj/DatabaseObjectAppObject.svelte
index b3d320d3..189a9fd7 100644
--- a/packages/web/src/appobj/DatabaseObjectAppObject.svelte
+++ b/packages/web/src/appobj/DatabaseObjectAppObject.svelte
@@ -1,8 +1,14 @@
+<script lang="ts" context="module">
+  export const extractKey = ({ schemaName, pureName }) => (schemaName ? `${schemaName}.${pureName}` : pureName);
+  export const createMatcher = ({ pureName }) => filter => filterName(filter, pureName);
+</script>
+
 <script lang="ts">
   import _ from 'lodash';
   import AppObjectCore from './AppObjectCore.svelte';
   import { currentDatabase, openedConnections } from '../stores';
   import openNewTab from '../utility/openNewTab';
+  import { filterName } from 'dbgate-datalib';
 
   export let commonProps;
   export let data;
diff --git a/packages/web/src/icons/ExpandIcon.svelte b/packages/web/src/icons/ExpandIcon.svelte
new file mode 100644
index 00000000..8f54ec2c
--- /dev/null
+++ b/packages/web/src/icons/ExpandIcon.svelte
@@ -0,0 +1,12 @@
+<script>
+  import FontIcon from './FontIcon.svelte';
+
+  export let isBlank = false;
+  export let isExpanded = false;
+</script>
+
+{#if isBlank}
+  <FontIcon icon="icon invisible-box" {...$$props} />
+{:else}
+  <FontIcon icon={isExpanded ? 'icon minus-box' : 'icon plus-box'} {...$$props} />
+{/if}
diff --git a/packages/web/src/icons/FontIcon.svelte b/packages/web/src/icons/FontIcon.svelte
index a815eb34..2ed5a29a 100644
--- a/packages/web/src/icons/FontIcon.svelte
+++ b/packages/web/src/icons/FontIcon.svelte
@@ -102,4 +102,4 @@
   };
 </script>
 
-<span class={iconNames[icon] || icon} {title} />
+<span class={iconNames[icon] || icon} {title} on:click />
diff --git a/packages/web/src/widgets/ConnectionList.svelte b/packages/web/src/widgets/ConnectionList.svelte
index 298301db..e0b94df6 100644
--- a/packages/web/src/widgets/ConnectionList.svelte
+++ b/packages/web/src/widgets/ConnectionList.svelte
@@ -8,6 +8,7 @@
   import AppObjectList from '../appobj/AppObjectList.svelte';
   import * as connectionAppObject from '../appobj/ConnectionAppObject.svelte';
   import SubDatabaseList from '../appobj/SubDatabaseList.svelte';
+  import { openedConnections } from '../stores';
 
   const connections = useConnectionList();
   const serverStatus = useServerStatus();
@@ -30,6 +31,7 @@
     module={connectionAppObject}
     subItemsComponent={SubDatabaseList}
     expandOnClick
+    isExpandable={data => $openedConnections.includes(data._id)}
     {filter}
   />
 </WidgetsInnerContainer>
diff --git a/packages/web/src/widgets/SqlObjectList.svelte b/packages/web/src/widgets/SqlObjectList.svelte
index 328fcb89..82303651 100644
--- a/packages/web/src/widgets/SqlObjectList.svelte
+++ b/packages/web/src/widgets/SqlObjectList.svelte
@@ -12,6 +12,8 @@
   export let conid;
   export let database;
 
+  let filter = '';
+
   $: objects = useDatabaseInfo({ conid, database });
   $: status = useDatabaseStatus({ conid, database });
 
@@ -26,9 +28,14 @@
 </script>
 
 <SearchBoxWrapper>
-  <SearchInput placeholder="Search connection" />
+  <SearchInput placeholder="Search connection" bind:value={filter} />
   <InlineButton>Refresh</InlineButton>
 </SearchBoxWrapper>
 <WidgetsInnerContainer>
-  <AppObjectList list={objectList.map(x => ({ ...x, conid, database }))} module={databaseObjectAppObject} />
+  <AppObjectList
+    list={objectList.map(x => ({ ...x, conid, database }))}
+    module={databaseObjectAppObject}
+    groupFunc={data => _.startCase(data.objectTypeField)}
+    {filter}
+  />
 </WidgetsInnerContainer>