diff --git a/src/components/DBDisplay/FeatureTab.tsx b/src/components/DBDisplay/FeatureTab.tsx index 9e2955f5..868ca77f 100644 --- a/src/components/DBDisplay/FeatureTab.tsx +++ b/src/components/DBDisplay/FeatureTab.tsx @@ -528,6 +528,68 @@ export default function FeatureTab(props: any) { Export Query +
+ {/* ----------- 💙💙💙💙 Edit Tab (Build Tab) ------------------------- */} +

Edit

+
+ {isSchema ? ( +
  • + { + 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 " + > + + Add Table + +
    • + ) : null} + {Object.keys(schemaStore).length ? ( +
  • + { + 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" + > + + Delete Table + +
    • + ) : null} +
  • + + + Clear Canvas + +
    • + {/* TODO: Add UNDO & REDO feature */} +
  • + + + Undo + +
    • +
  • + + + Redo + +

    • {/* ----------- 💙💙💙💙 Test Tab -------------------------- */}

    Test

    diff --git a/src/pages/DBDisplay.tsx b/src/pages/DBDisplay.tsx index b54023ee..543a006b 100644 --- a/src/pages/DBDisplay.tsx +++ b/src/pages/DBDisplay.tsx @@ -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(null); + // const mainId = useRef(null); /** * Future iterations may want to modify this to not run every time client(s) load @@ -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: { @@ -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) => { @@ -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(); @@ -135,12 +152,17 @@ const DBDisplay: React.FC = () => { return ( <> + {/* flex: flexbox layout, h: height, 2: 8px, pr: padding to the right, 5: 20px */}
    {user ? ( <> - + {/* 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 */} + {user.full_name} + {/* ml: margin left, mr: margin right, rounded-full: make the image circular, dark:invert: invert color in dark mode */} { ) : (
    + {/* p: padding for all sides, text-base: default text size, leading-normal: normal line height */} Login - +
    )}
    + {/* shadow-2xl: strong box-shadow for depth, bg-gray-900: change background color */}
    { {editRefMode ? : <>}
    {/* */} + {/* mx-auto: center the div horizontally, transition-colors: enable smooth color transitions, duration-500: set transition duration to 0.5s */}
    {/*
    "Current Database Name:"
    */} + {/* 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 ? (

    Welcome to dbSpy!

    @@ -187,13 +215,15 @@ const DBDisplay: React.FC = () => { // If isSchema state is true, render Show Data button and Flow component <> + {/* rounded: rounded corner, px: padding horizontal, py: padding vertical */} + {/* ml: add margin to the left*/} Current Database: {dbName} @@ -204,7 +234,7 @@ const DBDisplay: React.FC = () => {