Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

yihe/fix-display #6

Merged
merged 1 commit into from
Mar 29, 2025
Merged

yihe/fix-display #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 62 additions & 0 deletions src/components/DBDisplay/FeatureTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -528,6 +528,68 @@ export default function FeatureTab(props: any) {
<span className="ml-3 flex-1 whitespace-nowrap">Export Query</span>
</a>
</li>
<br />
{/* ----------- 💙💙💙💙 Edit Tab (Build Tab) ------------------------- */}
<p className="text-slate-900 dark:text-[#f8f4eb]">Edit</p>
<hr />
{isSchema ? (
<li>
<a
onClick={() => {
props.openAddTableModal();
// if schemaStore is empty, initialize
if (!Object.keys(schemaStore).length) buildDatabase();
}}
id="addTable"
className="group flex cursor-pointer items-center rounded-lg p-2 text-sm font-normal text-gray-900 hover:text-yellow-500 hover:underline dark:text-[#f8f4eb] dark:hover:text-yellow-300 "
>
<AddTableIcon />
<span className="ml-3 flex-1 whitespace-nowrap">Add Table</span>
</a>
</li>
) : null}
{Object.keys(schemaStore).length ? (
<li>
<a
onClick={() => {
props.openDeleteTableModal();
}}
id="deleteTable"
className="group flex cursor-pointer items-center rounded-lg p-2 text-sm font-normal text-gray-900 hover:text-yellow-500 hover:underline dark:text-[#f8f4eb] dark:hover:text-yellow-300"
>
<DeleteTableIcon />
<span className="ml-3 flex-1 whitespace-nowrap">Delete Table</span>
</a>
</li>
) : null}
<li>
<a
onClick={clearCanvas}
className="group flex cursor-pointer items-center rounded-lg p-2 text-sm font-normal text-gray-900 hover:text-yellow-500 hover:underline dark:text-[#f8f4eb] dark:hover:text-yellow-300"
>
<DeleteIcon />
<span className="ml-3 flex-1 whitespace-nowrap">Clear Canvas</span>
</a>
</li>
{/* TODO: Add UNDO & REDO feature */}
<li>
<a
onClick={undoHandler}
className="group flex cursor-pointer items-center rounded-lg p-2 text-sm font-normal text-gray-900 hover:text-yellow-500 hover:underline dark:text-[#f8f4eb] dark:hover:text-yellow-300"
>
<UndoIcon />
<span className="ml-3 flex-1 whitespace-nowrap">Undo</span>
</a>
</li>
<li>
<a
onClick={redoHandler}
className="group flex cursor-pointer items-center rounded-lg p-2 text-sm font-normal text-gray-900 hover:text-yellow-500 hover:underline dark:text-[#f8f4eb] dark:hover:text-yellow-300"
>
<RedoIcon />
<span className="ml-3 flex-1 whitespace-nowrap">Redo</span>
</a>
</li>
<br />
{/* ----------- 💙💙💙💙 Test Tab -------------------------- */}
<p className="text-slate-900 dark:text-[#f8f4eb]">Test</p>
Expand Down
44 changes: 37 additions & 7 deletions src/pages/DBDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,17 @@ const DBDisplay: React.FC = () => {
const openAddTableModal = () => setInputModalState(true, 'table');
const openDeleteTableModal = () => setDeleteTableModalState(true);

// Zustand state management to handle authentication
const { user } = useCredentialsStore((state): any => state);
// useRef() create a reference to DOM elements
//create references for HTML elements
// mySideBarId is the reference to the sidebar
const mySideBarId: any = useRef();
// mainId is the reference to the main content
const mainId: any = useRef();
// any is not a good type to use, but it is used here to avoid TypeScript errors
// const mySideBarId = useRef<HTMLDivElement | null>(null);
// const mainId = useRef<HTMLDivElement | null>(null);

/**
* Future iterations may want to modify this to not run every time client(s) load
Expand All @@ -79,7 +86,7 @@ const DBDisplay: React.FC = () => {
const newURL =
window.location.protocol + '//' + window.location.host + window.location.pathname;
window.history.replaceState({}, document.title, newURL);

// send POST request to /api/oauth with code/state
fetch('/api/oauth', {
method: 'POST',
headers: {
Expand All @@ -88,12 +95,15 @@ const DBDisplay: React.FC = () => {
body: JSON.stringify({ code: code, state: state }),
})
.then((data) => {
// successful codes
if (data.status >= 200 && data.status < 300) {
// convert response to JSON
return data.json();
} else
throw new Error(`Continue with OAuth failed with status code: ${data.status}`);
})
.then((res) => {
// update the state with user data
setUser(res);
})
.catch((err) => {
Expand All @@ -110,19 +120,26 @@ const DBDisplay: React.FC = () => {
// const addTableButtonRef = useRef(null);
// }

// for the sidebar of Add table
/* Set the width of the side navigation to 400px and add a right margin of 400px */
const openNav = () => {
// expand the sidebar to 400px
mySideBarId.current.style.width = '400px';
mainId.current.style.marginRight = '400px';
// move the content to the left
// mainId.current.style.marginRight = '400px';
};

/* Set the width of the side navigation to 0, and a right margin of 50px */
const closeNav = () => {
// hide the sidebar
mySideBarId.current.style.width = '0';
mainId.current.style.marginRight = '50px';
// move the content to the right
// mainId.current.style.marginRight = '0';
};

// dbSpy 6.0: Update handleSidebar to allow opening/closing sidebar on Connect Database click
// the sidebar for database information will be opened after clicking the Connect Database button
// click it again or click close button to close the sidebar
function handleSidebar() {
if (sidebarDisplayState) {
setSidebarDisplayState();
Expand All @@ -135,30 +152,37 @@ const DBDisplay: React.FC = () => {

return (
<>
{/* flex: flexbox layout, h: height, 2: 8px, pr: padding to the right, 5: 20px */}
<div className="flex h-2 justify-end pr-5">
{user ? (
<>
<span className="text-black-200 inline-block pt-4 dark:text-white lg:mt-0">
{/* inline-block: behave like an inline element but allows width and height modifications */}
{/* pt: padding to top, dark:text-white: change text color to white in dark mode */}
{/* lg: large screens, mt-0: margin-top: 0, on lg mode */}
<span className="inline-block pt-4 text-black dark:text-white lg:mt-0">
{user.full_name}
</span>
{/* ml: margin left, mr: margin right, rounded-full: make the image circular, dark:invert: invert color in dark mode */}
<img
className="ml-2 mr-2 mt-4 inline-block h-[25] rounded-full dark:invert"
src={default_pfp}
/>
</>
) : (
<div className="flex justify-end">
{/* p: padding for all sides, text-base: default text size, leading-normal: normal line height */}
<NavLink
to="/login"
className="p-4 text-base font-bold leading-normal text-black dark:text-white"
>
<span>Login</span>
<img className="ml-3 mr-3 inline-block h-[20] dark:invert" src={login} />
<img className="ml-3 mr-3 inline-block h-[20px] dark:invert" src={login} />
</NavLink>
</div>
)}
</div>
<div id="DBDisplay" className=" transition-colors duration-500">
{/* shadow-2xl: strong box-shadow for depth, bg-gray-900: change background color */}
<div
ref={mySideBarId}
id="mySidenav"
Expand All @@ -172,8 +196,12 @@ const DBDisplay: React.FC = () => {
{editRefMode ? <AddReference /> : <></>}
</div>
{/* <!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page --> */}
{/* mx-auto: center the div horizontally, transition-colors: enable smooth color transitions, duration-500: set transition duration to 0.5s */}
<div ref={mainId} id="main" className="mx-auto transition-colors duration-500">
{/* <div>"Current Database Name:"</div> */}
{/* relative: positions relative to its normal location, right-[142px]: move 142px to left */}
{/* m-auto = margin: auto in CSS */}
{/* w-50%: set width to 50% of parent, flex-col: stack children vertically */}
{welcome ? (
<div className="canvas-ConnectToDatabase relative right-[142px] m-auto flex w-[50%] flex-col transition-colors duration-500 dark:text-[#f8f4eb]">
<h3 className="text-center">Welcome to dbSpy!</h3>
Expand All @@ -187,13 +215,15 @@ const DBDisplay: React.FC = () => {
// If isSchema state is true, render Show Data button and Flow component
<>
<Flow />
{/* rounded: rounded corner, px: padding horizontal, py: padding vertical */}
<button
id="showSchema"
className=" rounded bg-black px-4 py-2 font-bold text-white hover:bg-yellow-500"
className=" rounded bg-black px-4 py-2 font-bold text-white hover:bg-yellow-500 hover:text-black"
onClick={setTableMode}
>
Show data
</button>
{/* ml: add margin to the left*/}
<span id="text" className="ml-5 text-black dark:text-white">
Current Database: {dbName}
</span>
Expand All @@ -204,7 +234,7 @@ const DBDisplay: React.FC = () => {
<DataFlow />
<button
id="showSchema"
className="rounded bg-black px-4 py-2 font-bold text-white hover:bg-yellow-500"
className="hover: rounded bg-black px-4 py-2 font-bold text-black text-white hover:bg-yellow-500"
onClick={setTableMode}
>
Show Schema
Expand Down