Skip to content

Commit

Permalink
feat: render tables and views in virutal list
Browse files Browse the repository at this point in the history
  • Loading branch information
invm committed Oct 12, 2024
1 parent b4f98a0 commit 2ff63a5
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 18 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
"tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store#v1",
"tauri-plugin-window-state-api": "github:tauri-apps/tauri-plugin-window-state#v1",
"tippy.js": "^6.3.7",
"virtua": "^0.34.2",
"zod": "^3.23.8"
},
"devDependencies": {
Expand Down
27 changes: 27 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

44 changes: 33 additions & 11 deletions src/components/Screens/Console/Sidebar/Sidebar.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import { TableColumnsCollapse } from './TableColumnsCollapse';
import { useAppSelector } from 'services/Context';
import { useContextMenu, Menu, animation, Item } from 'solid-contextmenu';
import { createSignal, For, Match, Show, Switch } from 'solid-js';
import { createMemo, createSignal, For, Match, Show, Switch } from 'solid-js';
import { t } from 'utils/i18n';
import { Function, Refresh, ShareNodes, Terminal } from 'components/UI/Icons';
import { invoke } from '@tauri-apps/api';
import { ResultSet } from 'interfaces';
import { ResultSet, Table } from 'interfaces';
import { newContentTab } from 'services/Connections';
import { getAnyCase } from 'utils/utils';
// @ts-ignore
import { VList } from 'virtua/solid';
import { createStore } from 'solid-js/store';

export const Sidebar = () => {
const {
Expand All @@ -22,6 +25,11 @@ export const Sidebar = () => {
},
} = useAppSelector();
const [loading, setLoading] = createSignal(false);
const [itemCollapseState, setItemCollapseState] = createStore<
Record<string, boolean>
>({});
const tables = createMemo(() => getSchemaEntity('tables'));
const views = createMemo(() => getSchemaEntity('views'));

const routine_menu = 'sidebar-routine-menu';
const trigger_menu = 'sidebar-trigger-menu';
Expand Down Expand Up @@ -232,32 +240,46 @@ export const Sidebar = () => {
</div>
<div class="overflow-y-auto h-full pb-10 pr-2">
<div class="text-xs font-bold py-1">{t('sidebar.tables')}</div>
<For each={getSchemaEntity('tables')}>
{(table) => (
<VList data={tables()} class="flex-1 bg-background">
{(table: Table) => (
<div class="min-w-full w-fit">
<TableColumnsCollapse
title={table.name}
entity="tables"
columns={table.columns}
refresh={refreshEntities}
open={itemCollapseState['t_' + table.name]}
onOpen={() =>
setItemCollapseState((state) => ({
...state,
['t_' + table.name]: !state['t_' + table.name],
}))
}
/>
</div>
)}
</For>
<Show when={getSchemaEntity('views').length > 0}>
</VList>
<Show when={views().length > 0}>
<div class="text-xs font-bold py-1">{t('sidebar.views')}</div>
<For each={getSchemaEntity('views')}>
{(table) => (
<VList data={views()} class="flex-1 bg-background">
{(view: Table) => (
<div class="min-w-full w-fit">
<TableColumnsCollapse
title={table.name}
title={view.name}
entity="views"
columns={table.columns}
columns={view.columns}
refresh={refreshEntities}
open={itemCollapseState['v_' + view.name]}
onOpen={() =>
setItemCollapseState((state) => ({
...state,
['v_' + view.name]: !state['v_' + view.name],
}))
}
/>
</div>
)}
</For>
</VList>
</Show>
<Menu id={routine_menu} animation={animation.fade} theme={'dark'}>
<Item
Expand Down
15 changes: 8 additions & 7 deletions src/components/Screens/Console/Sidebar/TableColumnsCollapse.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,13 @@ type TableColumnsCollapseProps = {
title: string;
columns: Column[];
refresh: () => Promise<void>
open: boolean;
onOpen: () => void;
};

const initModal = { visible: false, title: '', action: '' };

export const TableColumnsCollapse = (props: TableColumnsCollapseProps) => {
const [open, setOpen] = createSignal(false);
const [modal, setModal] = createSignal(initModal);

const {
Expand Down Expand Up @@ -185,7 +186,7 @@ export const TableColumnsCollapse = (props: TableColumnsCollapseProps) => {
</Item>
</Menu>
<div
onClick={() => setOpen(!open())}
onClick={props.onOpen}
class="cursor-pointer w-full flex items-center mt-1 hover:bg-base-100"
onContextMenu={(e) => {
hideAll();
Expand All @@ -194,7 +195,7 @@ export const TableColumnsCollapse = (props: TableColumnsCollapseProps) => {
>
<div class="pt-1 flex items-center">
<span class="collapse">
<label class={`swap text-6xl ${open() ? 'swap-active' : ''}`}>
<label class={`swap text-6xl ${props.open ? 'swap-active' : ''}`}>
<SwapChevronRight />
<SwapChevronDown />
</label>
Expand All @@ -217,12 +218,12 @@ export const TableColumnsCollapse = (props: TableColumnsCollapseProps) => {
<div
class="pl-4"
classList={{
'mb-2': open(),
'border-b-[1px]': open(),
'border-base-200': open(),
'mb-2': props.open,
'border-b-[1px]': props.open,
'border-base-200': props.open,
}}
>
<Show when={open()}>
<Show when={props.open}>
<For each={props.columns}>
{(column) => (
<div
Expand Down

0 comments on commit 2ff63a5

Please sign in to comment.