From a973ec3c60398cb16685a4f991c43ec4ee74c986 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Thu, 13 Jun 2024 18:07:05 +0200
Subject: [PATCH] perf(UI): views grouped in folders

---
 src/common/customizations/postgresql.ts       |  1 +
 src/common/interfaces/customizations.ts       |  1 +
 .../components/WorkspaceExploreBar.vue        |  3 +-
 .../WorkspaceExploreBarMiscFolderContext.vue  | 13 +++++
 .../components/WorkspaceExploreBarSchema.vue  | 58 ++++++++++++++++++-
 5 files changed, 74 insertions(+), 2 deletions(-)

diff --git a/src/common/customizations/postgresql.ts b/src/common/customizations/postgresql.ts
index 61d040a6..5098a1bc 100644
--- a/src/common/customizations/postgresql.ts
+++ b/src/common/customizations/postgresql.ts
@@ -31,6 +31,7 @@ export const customizations: Customizations = {
    schemas: true,
    tables: true,
    views: true,
+   materializedViews: true,
    triggers: true,
    triggerFunctions: true,
    routines: true,
diff --git a/src/common/interfaces/customizations.ts b/src/common/interfaces/customizations.ts
index 70b6be9c..404f6be1 100644
--- a/src/common/interfaces/customizations.ts
+++ b/src/common/interfaces/customizations.ts
@@ -28,6 +28,7 @@ export interface Customizations {
    schemas?: boolean;
    tables?: boolean;
    views?: boolean;
+   materializedViews?: boolean;
    triggers?: boolean;
    triggerFunctions?: boolean;
    routines?: boolean;
diff --git a/src/renderer/components/WorkspaceExploreBar.vue b/src/renderer/components/WorkspaceExploreBar.vue
index c8a4aa9a..219af6a4 100644
--- a/src/renderer/components/WorkspaceExploreBar.vue
+++ b/src/renderer/components/WorkspaceExploreBar.vue
@@ -141,10 +141,11 @@
          :selected-misc="selectedMisc"
          :selected-schema="selectedSchema"
          :context-event="miscContextEvent"
+         @open-create-view-tab="openCreateElementTab('view')"
          @open-create-trigger-tab="openCreateElementTab('trigger')"
+         @open-create-trigger-function-tab="openCreateElementTab('trigger-function')"
          @open-create-routine-tab="openCreateElementTab('routine')"
          @open-create-function-tab="openCreateElementTab('function')"
-         @open-create-trigger-function-tab="openCreateElementTab('trigger-function')"
          @open-create-scheduler-tab="openCreateElementTab('scheduler')"
          @close-context="closeMiscFolderContext"
          @reload="refresh"
diff --git a/src/renderer/components/WorkspaceExploreBarMiscFolderContext.vue b/src/renderer/components/WorkspaceExploreBarMiscFolderContext.vue
index 42d88259..5d3b9803 100644
--- a/src/renderer/components/WorkspaceExploreBarMiscFolderContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarMiscFolderContext.vue
@@ -3,6 +3,18 @@
       :context-event="props.contextEvent"
       @close-context="closeContext"
    >
+      <div
+         v-if="props.selectedMisc === 'view'"
+         class="context-element"
+         @click="emit('open-create-view-tab')"
+      >
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiTableCog"
+               :size="18"
+            /> {{ t('database.createNewView') }}</span>
+      </div>
       <div
          v-if="props.selectedMisc === 'trigger'"
          class="context-element"
@@ -81,6 +93,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits([
+   'open-create-view-tab',
    'open-create-trigger-tab',
    'open-create-routine-tab',
    'open-create-function-tab',
diff --git a/src/renderer/components/WorkspaceExploreBarSchema.vue b/src/renderer/components/WorkspaceExploreBarSchema.vue
index 31cfbef0..fc13dad6 100644
--- a/src/renderer/components/WorkspaceExploreBarSchema.vue
+++ b/src/renderer/components/WorkspaceExploreBarSchema.vue
@@ -67,6 +67,55 @@
             </ul>
          </div>
 
+         <div v-if="filteredViews.length" class="database-misc">
+            <details class="accordion">
+               <summary
+                  class="accordion-header misc-name"
+                  :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.trigger}"
+                  @contextmenu.prevent="showMiscFolderContext($event, 'view')"
+               >
+                  <BaseIcon
+                     class="misc-icon mr-1"
+                     icon-name="mdiFolderEye"
+                     :size="18"
+                  />
+                  <BaseIcon
+                     class="misc-icon open-folder mr-1"
+                     icon-name="mdiFolderOpen"
+                     :size="18"
+                  />
+                  {{ t('database.view', 2) }}
+               </summary>
+               <div class="accordion-body">
+                  <div>
+                     <ul class="menu menu-nav pt-0">
+                        <li
+                           v-for="view of filteredViews"
+                           :key="view.name"
+                           class="menu-item"
+                           :class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.view === view.name}"
+                           @mousedown.left="selectTable({schema: database.name, table: view})"
+                           @dblclick="openDataTab({schema: database.name, table: view})"
+                           @contextmenu.prevent="showTableContext($event, view)"
+                        >
+                           <a class="table-name">
+                              <div v-if="checkLoadingStatus(view.name, 'table')" class="icon loading mr-1" />
+                              <BaseIcon
+                                 v-else
+                                 class="table-icon mr-1"
+                                 icon-name="mdiTableEye"
+                                 :size="18"
+                                 :style="`min-width: 18px`"
+                              />
+                              <span v-html="highlightWord(view.name)" />
+                           </a>
+                        </li>
+                     </ul>
+                  </div>
+               </div>
+            </details>
+         </div>
+
          <div v-if="filteredTriggers.length && customizations.triggers" class="database-misc">
             <details class="accordion">
                <summary
@@ -380,7 +429,14 @@ const searchTerm = computed(() => {
 
 const filteredTables = computed(() => {
    if (props.searchMethod === 'elements')
-      return props.database.tables.filter(table => table.name.search(searchTerm.value) >= 0);
+      return props.database.tables.filter(table => table.name.search(searchTerm.value) >= 0 && table.type === 'table');
+   else
+      return props.database.tables;
+});
+
+const filteredViews = computed(() => {
+   if (props.searchMethod === 'elements')
+      return props.database.tables.filter(table => table.name.search(searchTerm.value) >= 0 && table.type === 'view');
    else
       return props.database.tables;
 });