Skip to content
This repository was archived by the owner on Apr 28, 2024. It is now read-only.

Commit 488fae7

Browse files
paraswaykoleparaswaykole
committed
db sidebar tab design updated
1 parent 2990c4a commit 488fae7

File tree

1 file changed

+97
-55
lines changed

1 file changed

+97
-55
lines changed

‎frontend/src/components/layouts/sidebars/dbsidebar.tsx

Lines changed: 97 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,26 @@
11
import styles from '../sidebar.module.scss'
2-
import React from 'react'
2+
import React, { useState } from 'react'
33
import { DBConnType, TabType } from "../../../data/defaults"
44
import { DBConnection, DBDataModel, DBQuery } from "../../../data/models"
55
import { selectDBConnection, selectDBDQueries, selectDBDataModels } from "../../../redux/dbConnectionSlice"
66
import { useAppDispatch, useAppSelector } from "../../../redux/hooks"
77
import { createTab } from "../../../redux/tabsSlice"
88

9+
enum DBSidebarTabType {
10+
DATABASE = "DATABASE",
11+
QUERIES = "QUERIES",
12+
TOOLBOX = "TOOLBOX"
13+
}
14+
915

1016
type DatabaseSidebarPropType = {}
1117

1218
const DatabaseSidebar = (_: DatabaseSidebarPropType) => {
1319

1420
const dispatch = useAppDispatch()
1521

22+
const [currentSidebarTab, setCurrentSidebarTab] = useState<DBSidebarTabType>(DBSidebarTabType.DATABASE)
23+
1624
const dbConnection: DBConnection | undefined = useAppSelector(selectDBConnection)
1725
const dbDataModels: DBDataModel[] = useAppSelector(selectDBDataModels)
1826
const dbQueries: DBQuery[] = useAppSelector(selectDBDQueries)
@@ -33,67 +41,101 @@ const DatabaseSidebar = (_: DatabaseSidebarPropType) => {
3341
dispatch(createTab({ dbConnId: dbConnection!.id, tabType: TabType.GENSQL, metadata: {} }))
3442
}
3543

44+
const switchSidebarTab = (tabType: DBSidebarTabType) => {
45+
setCurrentSidebarTab(tabType)
46+
}
47+
3648

3749
return (
3850
<React.Fragment>
39-
<p className="menu-label">
40-
Data Models
41-
</p>
42-
<ul className={"menu-list " + styles.menuList}>
43-
{dbDataModels.map((dataModel: DBDataModel) => {
44-
const label = dbConnection!.type === DBConnType.POSTGRES ? `${dataModel.schemaName}.${dataModel.name}` : `${dataModel.name}`
45-
return (
46-
<li key={dataModel.schemaName + dataModel.name}>
47-
<a onClick={() => openDataTab(dataModel.schemaName ?? "", dataModel.name)}>
48-
{label}
51+
<div className="tabs is-centered">
52+
<ul>
53+
<li className={currentSidebarTab === DBSidebarTabType.DATABASE ? "is-active" : ""} onClick={() => { switchSidebarTab(DBSidebarTabType.DATABASE) }}>
54+
<a>
55+
<span className="icon is-small"><i className="fas fa-database" aria-hidden="true"></i></span>
56+
</a>
57+
</li>
58+
<li className={currentSidebarTab === DBSidebarTabType.QUERIES ? "is-active" : ""} onClick={() => { switchSidebarTab(DBSidebarTabType.QUERIES) }}>
59+
<a>
60+
<span className="icon is-small"><i className="fas fa-file" aria-hidden="true"></i></span>
61+
</a>
62+
</li>
63+
<li className={currentSidebarTab === DBSidebarTabType.TOOLBOX ? "is-active" : ""} onClick={() => { switchSidebarTab(DBSidebarTabType.TOOLBOX) }}>
64+
<a>
65+
<span className="icon is-small"><i className="fas fa-toolbox" aria-hidden="true"></i></span>
66+
</a>
67+
</li>
68+
</ul>
69+
</div>
70+
{currentSidebarTab === DBSidebarTabType.DATABASE &&
71+
<React.Fragment>
72+
<p className="menu-label">
73+
Data Models
74+
</p>
75+
<ul className={"menu-list " + styles.menuList}>
76+
{dbDataModels.map((dataModel: DBDataModel) => {
77+
const label = dbConnection!.type === DBConnType.POSTGRES ? `${dataModel.schemaName}.${dataModel.name}` : `${dataModel.name}`
78+
return (
79+
<li key={dataModel.schemaName + dataModel.name}>
80+
<a onClick={() => openDataTab(dataModel.schemaName ?? "", dataModel.name)}>
81+
{label}
82+
</a>
83+
</li>
84+
)
85+
})}
86+
</ul>
87+
</React.Fragment>
88+
}
89+
{currentSidebarTab === DBSidebarTabType.QUERIES &&
90+
<React.Fragment>
91+
<p className="menu-label">
92+
Queries
93+
</p>
94+
<ul className={"menu-list " + styles.menuList}>
95+
{dbQueries.map((dbQuery: DBQuery) => {
96+
return (
97+
<li key={dbQuery.id}>
98+
<a onClick={() => openQueryTab(dbQuery.id)}>
99+
{dbQuery.name}
100+
</a>
101+
</li>
102+
)
103+
})}
104+
<li>
105+
<a onClick={() => openQueryTab("new")}>
106+
<span className="icon">
107+
<i className="fas fa-plus-circle"></i>
108+
</span>
109+
&nbsp;New Query
110+
</a>
111+
</li>
112+
</ul>
113+
</React.Fragment>}
114+
{currentSidebarTab === DBSidebarTabType.TOOLBOX &&
115+
<React.Fragment>
116+
<p className="menu-label">
117+
Toolbox
118+
</p>
119+
<ul className={"menu-list " + styles.menuList}>
120+
<li>
121+
<a onClick={() => openConsoleTab()}>
122+
<span className="icon">
123+
<i className="fas fa-terminal"></i>
124+
</span>
125+
&nbsp;Console
49126
</a>
50127
</li>
51-
)
52-
})}
53-
</ul>
54-
<p className="menu-label">
55-
Queries
56-
</p>
57-
<ul className={"menu-list " + styles.menuList}>
58-
{dbQueries.map((dbQuery: DBQuery) => {
59-
return (
60-
<li key={dbQuery.id}>
61-
<a onClick={() => openQueryTab(dbQuery.id)}>
62-
{dbQuery.name}
128+
<li>
129+
<a onClick={() => openGenerateSQLTab()}>
130+
<span className="icon">
131+
<i className="fas fa-magic"></i>
132+
</span>
133+
&nbsp;Generate SQL
63134
</a>
64135
</li>
65-
)
66-
})}
67-
<li>
68-
<a onClick={() => openQueryTab("new")}>
69-
<span className="icon">
70-
<i className="fas fa-plus-circle"></i>
71-
</span>
72-
&nbsp;New Query
73-
</a>
74-
</li>
75-
</ul>
76-
<p className="menu-label">
77-
Toolbox
78-
</p>
79-
<ul className={"menu-list " + styles.menuList}>
80-
<li>
81-
<a onClick={() => openConsoleTab()}>
82-
<span className="icon">
83-
<i className="fas fa-terminal"></i>
84-
</span>
85-
&nbsp;Console
86-
</a>
87-
</li>
88-
<li>
89-
<a onClick={() => openGenerateSQLTab()}>
90-
<span className="icon">
91-
<i className="fas fa-magic"></i>
92-
</span>
93-
&nbsp;Generate SQL
94-
</a>
95-
</li>
96-
</ul>
136+
</ul>
137+
</React.Fragment>
138+
}
97139
</React.Fragment>
98140
)
99141

0 commit comments

Comments
 (0)