From a4387155e795d813153cf4ba39bbb634e95193af Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Mon, 1 Mar 2021 18:26:01 +0100
Subject: [PATCH] expand icon simplified

---
 packages/web/src/appobj/AppObjectCore.svelte  | 17 +++++++++-
 .../web/src/appobj/AppObjectListItem.svelte   | 34 +++++++++----------
 .../web/src/appobj/ConnectionAppObject.svelte |  7 ++--
 .../web/src/appobj/DatabaseAppObject.svelte   |  3 +-
 .../src/appobj/DatabaseObjectAppObject.svelte |  3 +-
 packages/web/src/icons/ExpandIcon.svelte      | 12 -------
 packages/web/src/icons/expandIcons.ts         |  7 ++++
 7 files changed, 44 insertions(+), 39 deletions(-)
 delete mode 100644 packages/web/src/icons/ExpandIcon.svelte
 create mode 100644 packages/web/src/icons/expandIcons.ts

diff --git a/packages/web/src/appobj/AppObjectCore.svelte b/packages/web/src/appobj/AppObjectCore.svelte
index 5f07d3cc0..9df508d9d 100644
--- a/packages/web/src/appobj/AppObjectCore.svelte
+++ b/packages/web/src/appobj/AppObjectCore.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
   import FontIcon from '../icons/FontIcon.svelte';
   import contextMenu from '../utility/contextMenu';
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
 
   export let icon;
   export let title;
@@ -11,10 +14,19 @@
   export let statusTitle = undefined;
   export let extInfo = undefined;
   export let menu = undefined;
+  export let expandIcon = undefined;
+
+  function handleExpand() {
+    dispatch('expand');
+  }
 </script>
 
 <div class="main" class:isBold draggable on:click use:contextMenu={menu}>
-  <slot name="prefix" />
+  {#if expandIcon}
+    <span class="expand-icon" on:click={handleExpand}>
+      <FontIcon icon={expandIcon} />
+    </span>
+  {/if}
   {#if isBusy}
     <FontIcon icon="icon loading" />
   {:else}
@@ -55,4 +67,7 @@
     margin-left: 5px;
     color: var(--theme-font-3);
   }
+  .expand-icon {
+    margin-right: 3px;
+  }
 </style>
diff --git a/packages/web/src/appobj/AppObjectListItem.svelte b/packages/web/src/appobj/AppObjectListItem.svelte
index 1521cb1c6..904d77333 100644
--- a/packages/web/src/appobj/AppObjectListItem.svelte
+++ b/packages/web/src/appobj/AppObjectListItem.svelte
@@ -1,12 +1,21 @@
+<script lang="ts" context="module">
+  function getExpandIcon(expandable, subItemsComponent, isExpanded, expandIconFunc) {
+    if (!subItemsComponent) return null;
+    if (!expandable) return 'icon invisible-box';
+    return expandIconFunc(isExpanded);
+  }
+</script>
+
 <script lang="ts">
-  import ExpandIcon from '../icons/ExpandIcon.svelte';
   import { tick } from 'svelte';
+  import { plusExpandIcon } from '../icons/expandIcons';
 
   export let module;
   export let data;
   export let subItemsComponent;
   export let expandOnClick;
   export let isExpandable = undefined;
+  export let expandIconFunc = plusExpandIcon;
 
   let isExpanded = false;
 
@@ -22,19 +31,13 @@
   $: if (!expandable && isExpanded) isExpanded = false;
 </script>
 
-{#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}
+<svelte:component
+  this={module.default}
+  {data}
+  on:click={handleExpand}
+  on:expand={handleExpand}
+  expandIcon={getExpandIcon(expandable, subItemsComponent, isExpanded, expandIconFunc)}
+/>
 
 {#if isExpanded && subItemsComponent}
   <div class="subitems">
@@ -43,9 +46,6 @@
 {/if}
 
 <style>
-  .expand-icon {
-    margin-right: 3px;
-  }
   .subitems {
     margin-left: 28px;
   }
diff --git a/packages/web/src/appobj/ConnectionAppObject.svelte b/packages/web/src/appobj/ConnectionAppObject.svelte
index c8773cc9e..84c19d608 100644
--- a/packages/web/src/appobj/ConnectionAppObject.svelte
+++ b/packages/web/src/appobj/ConnectionAppObject.svelte
@@ -38,7 +38,6 @@
   import axios from '../utility/axios';
   import { filterName } from 'dbgate-datalib';
 
-  export let commonProps;
   export let data;
 
   let statusIcon = null;
@@ -94,7 +93,7 @@
 </script>
 
 <AppObjectCore
-  {...commonProps}
+  {...$$restProps}
   title={data.displayName || data.server}
   icon="img server"
   isBold={_.get($currentDatabase, 'connection._id') == data._id}
@@ -104,6 +103,4 @@
   menu={getContextMenu(data, $openedConnections)}
   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 3a1460f39..136b1dcd7 100644
--- a/packages/web/src/appobj/DatabaseAppObject.svelte
+++ b/packages/web/src/appobj/DatabaseAppObject.svelte
@@ -10,11 +10,10 @@
   import AppObjectCore from './AppObjectCore.svelte';
 
   export let data;
-  export let commonProps;
 </script>
 
 <AppObjectCore
-  {...commonProps}
+  {...$$restProps}
   {data}
   title={data.name}
   icon="img database"
diff --git a/packages/web/src/appobj/DatabaseObjectAppObject.svelte b/packages/web/src/appobj/DatabaseObjectAppObject.svelte
index 189a9fd74..802f4e4b6 100644
--- a/packages/web/src/appobj/DatabaseObjectAppObject.svelte
+++ b/packages/web/src/appobj/DatabaseObjectAppObject.svelte
@@ -10,7 +10,6 @@
   import openNewTab from '../utility/openNewTab';
   import { filterName } from 'dbgate-datalib';
 
-  export let commonProps;
   export let data;
 
   const icons = {
@@ -38,7 +37,7 @@
 </script>
 
 <AppObjectCore
-  {...commonProps}
+  {...$$restProps}
   {data}
   title={data.schemaName ? `${data.schemaName}.${data.pureName}` : data.pureName}
   icon={icons[data.objectTypeField]}
diff --git a/packages/web/src/icons/ExpandIcon.svelte b/packages/web/src/icons/ExpandIcon.svelte
deleted file mode 100644
index 8f54ec2c0..000000000
--- a/packages/web/src/icons/ExpandIcon.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<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/expandIcons.ts b/packages/web/src/icons/expandIcons.ts
new file mode 100644
index 000000000..3e98f7ceb
--- /dev/null
+++ b/packages/web/src/icons/expandIcons.ts
@@ -0,0 +1,7 @@
+export function plusExpandIcon(isExpanded) {
+  return isExpanded ? 'icon minus-box' : 'icon plus-box';
+}
+
+export function chevronExpandIcon(isExpanded) {
+  return isExpanded ? 'icon chevron-down' : 'icon chevron-right';
+}