opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-07-28 17:53:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement setting modal

Browse Source
This commit is contained in:
steven
2023-03-24 15:58:08 +08:00
parent f2c4e33be4
commit 0218a9c065
8 changed files with 164 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/ConnectionSidebar.tsx
View File

@ -6,9 +6,11 @@ import { Connection } from "@/types";
import Icon from "./Icon";
import EngineIcon from "./EngineIcon";
import CreateConnectionModal from "./CreateConnectionModal";
import SettingModal from "./SettingModal";
interface State {
showCreateConnectionModal: boolean;
showSettingModal: boolean;
}
const ConnectionSidebar = () => {
@ -16,6 +18,7 @@ const ConnectionSidebar = () => {
const chatStore = useChatStore();
const [state, setState] = useState<State>({
showCreateConnectionModal: false,
showSettingModal: false,
});
const connectionList = connectionStore.connectionList;
const currentConnectionCtx = connectionStore.currentConnectionCtx;
@ -24,12 +27,6 @@ const ConnectionSidebar = () => {
(chat) => chat.connectionId === currentConnectionCtx?.connection.id && chat.databaseName === currentConnectionCtx?.database?.name
);
useEffect(() => {
if (connectionList.length > 0) {
handleConnectionSelect(connectionList[0]);
}
}, []);
const toggleCreateConnectionModal = (show = true) => {
setState({
...state,
@ -37,6 +34,13 @@ const ConnectionSidebar = () => {
});
};
const toggleSettingModal = (show = true) => {
setState({
...state,
showSettingModal: show,
});
};
const handleConnectionSelect = async (connection: Connection) => {
const databaseList = await connectionStore.getOrFetchDatabaseList(connection);
connectionStore.setCurrentConnectionCtx({
@ -86,6 +90,13 @@ const ConnectionSidebar = () => {
</button>
</div>
<div className="w-full flex flex-col justify-end items-center">
<button
className="tooltip tooltip-right w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100"
data-tip="Setting"
onClick={() => toggleSettingModal(true)}
>
<Icon.Io.IoMdSettings className="text-gray-600 w-6 h-auto" />
</button>
<a
className="tooltip tooltip-right w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100"
href="https://github.com/bytebase/sqlchat"
@ -98,7 +109,7 @@ const ConnectionSidebar = () => {
</div>
<div className={`w-64 h-full overflow-y-auto bg-gray-100 px-4 pt-2 ${databaseList.length === 0 && "!pt-4"}`}>
{databaseList.length > 0 && (
<div className="w-full sticky top-0 bg-gray-100 z-1">
<div className="w-full sticky top-0 bg-gray-100 z-1 mb-4">
<p className="text-sm leading-6 mb-1 text-gray-500">Select your database:</p>
<select
className="w-full select select-bordered"
@ -143,6 +154,8 @@ const ConnectionSidebar = () => {
<CreateConnectionModal show={state.showCreateConnectionModal} close={() => toggleCreateConnectionModal(false)} />,
document.body
)}
{createPortal(<SettingModal show={state.showSettingModal} close={() => toggleSettingModal(false)} />, document.body)}
</>
);
};