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

Commit

Permalink
Merge pull request #125 from slashbaseide/develop
Browse files Browse the repository at this point in the history 
v0.9.2
  • Loading branch information
@paraswaykole
paraswaykole authored May 14, 2023
2 parents 1089569 + dbb904e commit 616111d
Show file tree
Hide file tree
Showing 24 changed files with 448 additions and 215 deletions.
2 changes: 1 addition & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ __debug_bin
*.dll
*.so
*.dylib

*.syso
# Test binary, built with `go test -c`
*.test

Expand Down
16 changes: 8 additions & 8 deletions frontend/desktop/src/components/dbfragments/jsontable/jsontable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ type JsonTablePropType = {
mName: string,
isInteractive: boolean,
showHeader?: boolean,
onRefresh:()=> void,
onRefresh: () => void,
onFilterChanged: (newFilter: string[] | undefined) => void,
onSortChanged: (newSort: string[] | undefined) => void,
}

const JsonTable = ({ queryData, dbConnection, mName, isInteractive, showHeader, onFilterChanged, onSortChanged ,onRefresh}: JsonTablePropType) => {
const JsonTable = ({ queryData, dbConnection, mName, isInteractive, showHeader, onFilterChanged, onSortChanged, onRefresh }: JsonTablePropType) => {

const dispatch = useAppDispatch()

Expand Down Expand Up @@ -171,17 +171,17 @@ const JsonTable = ({ queryData, dbConnection, mName, isInteractive, showHeader,
</div>
</div>
{isInteractive && !isEditing && <React.Fragment>
<div className="column is-3 is-flex is-justify-content-flex-end">
<button className="button is-primary" onClick={() => { setIsEditing(true) }}>
<div className="column is-3 gap-3 is-flex is-justify-content-flex-end">
<button className="button is-secondary mgr-medium" onClick={onRefresh}>
<span className="icon is-small">
<i className="fas fa-pen" />
<i className="fas fa-refresh" />
</span>
</button>
<button className="button is-primary" onClick={onRefresh}>
&nbsp;&nbsp;
<button className="button is-primary" onClick={() => { setIsEditing(true) }}>
<span className="icon is-small">
<i className="fas fa-refresh" />
<i className="fas fa-pen" />
</span>
Refresh
</button>
</div>
</React.Fragment>}
Expand Down
18 changes: 3 additions & 15 deletions frontend/desktop/src/components/layouts/footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,29 +27,17 @@ const Footer = () => {
navigate(Constants.APP_PATHS.SETTINGS_SUPPORT.path)
}

const refreshDataModels = () => {
dispatch(resetDBDataModels())
dispatch(getDBDataModels({ dbConnId: dbConnection!.id }))
}

return (
<footer className={styles.footer}>
<div>
{showStatus && isDBConnected !== undefined &&
(<button className={styles.button + " is-small"}>
<span className="icon is-small">
{!isDBConnected && <i className="far fa-circle" />}
{isDBConnected && <i className="fas fa-circle" />}
</span>
<span>{(isDBConnected !== undefined && isDBConnected) ? "connected" : "not connected"}</span>
</button>)
}
{showStatus && isDBConnected === true &&
(<button className={styles.button + " is-small"} onClick={refreshDataModels}>
<span className="icon is-small">
<i className="fas fa-sync" />
{!isDBConnected && <i className="fa-solid fa-circle-exclamation" style={{ color: "#ff0000" }} />}
{isDBConnected && <i className="fas fa-circle" style={{ color: "#11ff00" }} />}
</span>
<span>refresh data models</span>
<span>{(isDBConnected !== undefined && isDBConnected) ? " connected" : " not connected"}</span>
</button>)
}
</div>
Expand Down
91 changes: 90 additions & 1 deletion frontend/desktop/src/components/layouts/header.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,109 @@
border-radius: 8px;
transition: all .2s;
margin-right: 5px;
transition: background-color 100ms linear;
.btnMsg {
font-size: 12px;
display: none;
}
}
.btn:hover {
background: #000000;
transition-duration: 0ms;
.btnMsg {
display: inline;
}

}
.btn.home{
z-index: 2;
margin-right: 1px;
border-radius: 0px;
position: relative;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
&:after{

content: '';
position: absolute;
border-style: solid;
border-left-width:8px;
margin-left:1px;
top: -1%;
left: 100%;
border-color: #363636;
border-top-color: transparent;
border-top-width:20px;
border-bottom-color: transparent;
border-bottom-width: 20px;
border-right-color: transparent;
transition: border-color 110ms linear;

}
&:hover::after{
border-left-color: #000000;
transition-duration: 1ms;
}
}
.bread{
padding-left: 20px;
z-index: 1;
border-radius: 1px;
position: relative;
&:after{
content: '';
position: absolute;
border-style: solid;
border-left-width:8px;
margin-left:0.5px;

top: -1%;
left: 100%;
border-color: #363636;
border-top-color: transparent;
border-top-width:20px;
border-bottom-color: transparent;
border-bottom-width: 20px;
border-right-color: transparent;
transition: border-color 110ms linear;
}
&:before{

content: '';
position:absolute;
border-style: solid;
border-left-width: 8px;
top: -1;
left: -0.5px;
border-color: #262626;
border-top-color: transparent;
border-bottom-color: transparent;
border-top-width:20px;
border-bottom-width: 20px;
border-right-color: transparent;
transition: border-color 110ms linear;
}
&:hover::after{
z-index: 3;
border-left-color: #000000;
transition-duration: 1ms;
}
}
.dbBread{
padding-left: 20px;
margin-left:-5px;
z-index: 0;
}
.breadEnds{
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
&:after{
all:initial;
}
}
}
.headerCenter{
height: 40px;
height: 40px;
}
.headerMenu {
display: flex;
Expand Down
133 changes: 97 additions & 36 deletions frontend/desktop/src/components/layouts/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,11 @@ import { DBConnection, Project } from '../../data/models'
import { useAppDispatch, useAppSelector } from '../../redux/hooks'
import { selectIsShowingSidebar, setIsShowingSidebar } from '../../redux/configSlice'
import { selectProjects } from '../../redux/projectsSlice'
import { selectDBConnection } from '../../redux/dbConnectionSlice'
import { selectAllDBConnections } from '../../redux/allDBConnectionsSlice'
import { selectDBConnection, getDBDataModels, resetDBDataModels } from '../../redux/dbConnectionSlice'
import utils from '../../lib/utils'
import { Tooltip } from 'react-tooltip'
import 'react-tooltip/dist/react-tooltip.css'

const Header = () => {

Expand All @@ -19,17 +22,15 @@ const Header = () => {
const dispatch = useAppDispatch()

const projects: Project[] = useAppSelector(selectProjects)
const dbConnections: DBConnection[] = useAppSelector(selectAllDBConnections)
const currentDBConnection: DBConnection | undefined = useAppSelector(selectDBConnection)
const isShowingSidebar: boolean = useAppSelector(selectIsShowingSidebar)


const [isShowingDropDown, setIsShowingDropDown] = useState(false)
const [isShowingNavDropDown, setIsShowingNavDropDown] = useState(false)
const [isShowingDBDropDown, setIsShowingDBDropdown] = useState(false)

const options = [
{ value: 'home', label: 'Home', path: Constants.APP_PATHS.HOME.path },
...projects.map((x: Project) => ({ value: x.id, label: x.name, path: Constants.APP_PATHS.PROJECT.path.replace('[id]', x.id) }))
]

const onNavigate = (option: {
value: string;
Expand All @@ -44,54 +45,114 @@ const Header = () => {
dispatch(setIsShowingSidebar(!isShowingSidebar))
}

let currentOption = 'home'
let currentProjectOption: String | undefined = undefined;
let currentDBOption: string | undefined = undefined;
if (location.pathname.startsWith('/project'))
currentOption = String(params.id)
currentProjectOption = String(params.id)
else if (location.pathname.startsWith('/db')) {
if (currentDBConnection)
currentOption = currentDBConnection?.projectId
currentProjectOption = currentDBConnection?.projectId
currentDBOption = currentDBConnection?.id
}

const projectOptions = [

...projects.map((x: Project) => ({ value: x.id, label: x.name, path: Constants.APP_PATHS.PROJECT.path.replace('[id]', x.id) }))
]
const dbOptions = [
...dbConnections.filter((x: DBConnection) => (x.projectId === currentProjectOption)).map((x: DBConnection) => ({ value: x.id, label: x.name, path: Constants.APP_PATHS.DB.path.replace('[id]', x.id) }))
]

const refreshDataModels = () => {
dispatch(resetDBDataModels())
dispatch(getDBDataModels({ dbConnId: currentDBConnection!.id }))
}

return (
<header className={styles.header}>
<div className={styles.leftBtns}>
{!isShowingSidebar && <button className={"button is-dark " + [styles.btn].join(' ')} onClick={toggleSidebar}>
{!isShowingSidebar ? (<button className={"button is-dark " + [styles.btn].join(' ')} onClick={toggleSidebar}>
<i className="fas fa-bars" />
</button>) : (<button className={"button is-dark " + [styles.btn].join(' ')} onClick={toggleSidebar}>
<i className="fas fa-bars" />
</button>}
</button>)}
<Link to={Constants.APP_PATHS.HOME.path}>
<button className={"button is-dark " + [styles.btn].join(' ')}>
<button className={`button is-dark ` + [styles.btn, currentProjectOption !== undefined ? styles.home : ''].join(' ')}>
<span className="icon">
<i className={`fas fa-home`} />
</span>
</button>
</Link>
</div>
<div className={styles.headerCenter}>
<div className={`dropdown${isShowingNavDropDown ? ' is-active' : ''}`}>
<div className="dropdown-trigger">
<button className={"button is-dark " + styles.btn} aria-haspopup="true" aria-controls="dropdown-menu" onClick={() => { setIsShowingNavDropDown(!isShowingNavDropDown) }}>
<span>{options.find(x => x.value === currentOption)?.label}</span>
<span className="icon is-small">
<i className="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<OutsideClickHandler onOutsideClick={() => { setIsShowingNavDropDown(false) }}>
<div className="dropdown-menu" id="dropdown-menu" role="menu">
<div className="dropdown-content">
{options.map((x) => {
return (
<React.Fragment key={x.value}>
<a onClick={() => { onNavigate(x) }} className={`dropdown-item${x.value === currentOption ? ' is-active' : ''}`}>
{x.label}
</a>
{x.value === 'home' && <hr className="dropdown-divider" />}
</React.Fragment>
)
})}
<div className={styles.headerCenter}>
{currentProjectOption !== undefined && <div className={`dropdown${isShowingNavDropDown ? ' is-active' : ''}`}>
<div className={`dropdown-trigger`}>
<button className={"button is-dark " + [styles.btn, styles.bread, currentDBOption === undefined ? styles.breadEnds : ''].join(' ')} aria-haspopup="true" aria-controls="dropdown-menu" onClick={() => { setIsShowingNavDropDown(!isShowingNavDropDown) }}>
<span className='icon'>
<i className="fas fa-folder" aria-hidden="true"></i>
</span>
<span>{projectOptions.find(x => x.value === currentProjectOption)?.label}</span>
<span className="icon">
<i className="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<OutsideClickHandler onOutsideClick={() => { setIsShowingNavDropDown(false) }}>
<div className="dropdown-menu" id="dropdown-menu" role="menu">
<div className="dropdown-content">
{projectOptions.map((x) => {
return (
<React.Fragment key={x.value}>
<a onClick={() => { onNavigate(x) }} className={`dropdown-item${x.value === currentProjectOption ? ' is-active' : ''}`}>
{x.label}
</a>
{x.value === 'home' && <hr className="dropdown-divider" />}
</React.Fragment>
)
})}
</div>
</div>
</OutsideClickHandler>
</div>}
{currentProjectOption !== undefined && currentDBOption !== undefined && <div className={`dropdown${isShowingDBDropDown ? ' is-active' : ''}`}>
<div className={`dropdown-trigger`}>
<button className={"button is-dark " + [styles.btn, styles.bread, styles.dbBread, styles.breadEnds].join(' ')} aria-haspopup="true" aria-controls="dropdown-menu" onClick={() => { setIsShowingDBDropdown(!isShowingDBDropDown) }}>
<span className='icon'>
<i className="fas fa-database" aria-hidden="true"></i>
</span>
<span>{dbOptions.find(x => x.value === currentDBOption)?.label}</span>
<span className="icon">
<i className="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
</OutsideClickHandler>
<OutsideClickHandler onOutsideClick={() => { setIsShowingDBDropdown(false) }}>
<div className="dropdown-menu" id="dropdown-menu" role="menu">
<div className="dropdown-content">
{dbOptions.map((x) => {
return (
<React.Fragment key={x.value}>
<a onClick={() => { onNavigate(x) }} className={`dropdown-item${x.value === currentDBOption ? ' is-active' : ''}`}>
{x.label}
</a>
{x.value === 'home' && <hr className="dropdown-divider" />}
</React.Fragment>
)
})}
</div>
</div>
</OutsideClickHandler>
{currentDBOption !== undefined &&
<div>
<button id="refreshBtn" data-tooltip-content="Refresh data models" className={" button is-dark is-small" + [styles.btn].join(' ')} onClick={refreshDataModels} >
<span className="icon is-small">
<i className="fas fa-sync" />
</span>
</button>
<Tooltip anchorId="refreshBtn" />
</div>
}
</div>
}
</div>
</div>
<div className={styles.headerMenu}>
Expand Down
Loading

0 comments on commit 616111d

Please sign in to comment.