maade changes to readme added GIF

Author: ychiu5896

.DS_Store

@@ -5,4 +5,4 @@ node_modules/
 build/
 tmp/
 temp/
-.cert
+.cert/

.gitignore

@@ -2,17 +2,25 @@
 
 Below is a list of features and improvements to which you can contribute. If you have any additional ideas, please raise an issue or implement them as well!
 
-- Delete Table
-  - Add a command to delete a table from the canvas, making sure to implement checks to maintain data integrity
 - Logging needs a default settings list and direct reimport into live database.
-  - The SQL code to import has been placed into the DB_Schemas folder along with SQL Schema dumps. Also, log setting functionality is currently limited to Postgres databases and the code needs to be expanded to query and display log setting info from MySQL databases.
+  - The SQL code to import has been placed into the DB_Schemas folder along with SQL Schema dumps. Also, log setting functionality is currently limited to    Postgres databases and the code needs to be expanded to query and display log setting info from MySQL databases.
 - Db-schemas
   - The schemas are saved under db_schemas and is saved in the server. Have a way to delete the schemas on the server from the front end. It would also be convenient to add these schemas to a list of existing schemas and be able to pull these schemas to display for the user to avoid having to make a new connection to the same database multiple times.
-- Expand compatibility with other SQL database such as Oracle SQL, Microsoft SQL, IBM Db2, etc.
+- Complete the integration of SQLite as an optional database and expand compatibility with other SQL database such as IBM Db2, etc.
 - Add additional themes and graphical options to canvas and tables
 - Live query feedback so users can see what their changes to the canvas look like as queries.
+<<<<<<< HEAD
+- As the ability to manipulate data has been recently added, there are not as many safe guards to prevent users from performing actions that are not allowed for some databases.
+- Limiting the data types to only those possible for the the database the user is currently working on.
+- Adding Account specific functionality and the ability to save data to your account.
+- TypeORM has been implemented to connect to multiple databases but can be modified to further universal database functions
+=======
 - Create login feature to save multiple databases to user account and be able to load multiple past databases.
+>>>>>>> dev
 
 Known bugs/issues
 
 - Undo function will not revert the state of the canvas to the point where it is empty.
+- Attempting to change the name of a column while adding a foreign key will result in the page crashing and going all white. Changing the column name is currently disabled.
+- When creating a new foreign key on a column, if you click submit while there is no table selected, the display area will shrink to a very small square in the top left  corner of the page.
+- Exporting your query has been affected in the course of adding additional databases and needs to be reorganized

Contributors.md

@@ -21,14 +21,14 @@
 
 - Enhanced support for SQL databases with expanded options.
 - Introduction of visualized DATA tables for improved data analysis.
-- Full CRUD functionality enabling the addition, modification, and deletion of rows in DATA tables within the database.
-- Capability to remove tables as needed.
+- Robust CRUD functionality enabling the addition, modification, and deletion of rows in DATA tables within the database.
+- Capability to remove and add tables as needed.
 - Implementation of Google and GitHub OAuth log-ins for streamlined user authentication.
 
 
 ### Use Cases
 
-- Connecting to an existing remote PostgreSQL, MySQL,  MicroSoftSQL, OracleSQL, and SQLite3  database
+- Connecting to an existing remote PostgreSQL, MySQL, MicroSoftSQL, OracleSQL databases
   - Renders an ER diagram for SCHEMA and DATA of the existing database and provides an interface for users to both modify existing tables and create new tables. A log of changes is stored, and at any point, the user can generate a query containing the changes, such that they are reflected in the existing database.
 - Uploading your database's SQL file
   - Renders an ER diagram for the provided SQL file (db dump) and provides an interface for a user to both modify existing tables and create new tables. Changes are converted into the corresponding queries, which the user can view and execute on their own database outside of dbSpy.
@@ -45,25 +45,26 @@
 
 2. **ER Diagram Visuals:** Visualize the entity relationship diagram of a database with dynamic handle placement
 
-3. **Table Relationship Visuals** Relationships of individual tables are easily identified when clicking on a table.
+3. **Table Relationship Visuals** Relationships of individual tables are easily identified when clicking on a table
 
-4. **Schema Modification:** Easily modify a database's schema through a simple UI
+4. **Schema Modification:** Toggle between Schema and Data easily with a click of a button
+
+5. **Data/Schema Modification:** Easily modify a database's schema or data through a simple UI 
 
 5. **Guided Database Building:** Create a new database from scratch using entity relationship diagrams to ensure the integrity of the database
 
 6. **Database Undo/Redo:** Provides a history of edits for easier backtracking
 
 7. **Query Generator:** Query generator generates executable SQL queries
 
-8. **User Sessions:** Sign up/Log in securely with either Google OAuth or JWTs/Bcrypt
+8. **User Sessions:** Sign up/Log in securely with either Google/Github OAuth or JWTs/Bcrypt
 
-9. **Save/Load:** Store and reload recent database sessions through your user account *-CURRENTLY UNDER UPDATE*
+9. **Save/Load:** Store and reload past database sessions through your user account *-CURRENTLY UNDER UPDATE*
 
 10. **Dark Mode:** Visual settings to provide a more comfortable viewing experience in low-light environements
 
 ## <img src="images/Darkmode.png">
-## <img src="images/LandingPageDemo.gif">
-## <img src="images/MakingEditsDemo.gif">
+
 
 ### Getting started
 
@@ -94,6 +95,15 @@ PG_TEST_PW = <password string from PG_TEST_URL>
 ## test user with saved schema to test save/load functionality
 TEST_USER_EMAIL = <email string>
 TEST_USER_PW = <password string>
+
+GOOGLE_OAUTH_CLIENT_ID = <Google Oauth client id>
+GOOGLE_OAUTH_CLIENT_SECRET= <Google Oauth client id>
+GOOGLE_OAUTH_REDIRECT_URI = 'http://localhost:8080/display'
+
+GITHUB_OAUTH_CLIENT_ID = <Github Oauth client id>
+GITHUB_OAUTH_CLIENT_SECRET= <Github Oauth client id>
+GITHUB_OAUTH_REDIRECT_URI = 'http://localhost:8080/display'
+
 ```
 
 - Run the following below:
@@ -148,20 +158,26 @@ mkcert --version
 npm run cert:linux
 ```
 
+
+
+
 ---
 
 # How to Use
 
 ### Connecting to an existing database
 
-<img src="images/Existing%20Databse.png">
-
 1. Click on the "Connect Database" button under the Action section on the left side of the page. This will open a sidebar on the right side of the page.
 2. Select the database type from the dropdown.
 3. Input your database URI information OR database connection credentials and click on "Connect".
 4. Once the connection to your database is established, the canvas will render and generate the tables and their relationships.
+    * OracleSQL requires the download of the OCI - [here](https://www.oracle.com/cloud/free/)
+
+
+
+## <img src="images/LandingPageDemo.gif">
+
 
-<img src="images/withDataButton.png">
 
 ### Uploading your database's SQL file
 
@@ -175,30 +191,52 @@ npm run cert:linux
 
 ## Adding column(s) to a SCHEMA table or row(s) to a DATA table
 
-1. To add a new column/row in a table, click on the add icon on the top right of the table node. This will render a new column/row in the table in edit mode. The changes made in DATA table will be updated in your database.
+1. To add a new column/row in a table, click on the add/plus icon on the top right of the table node. 
+2. This will render a new column/row in the table in edit mode. 
+3. Add in the data you would like in each column/row. 
+4. Click on the confirm icon to save the column/row. 
+5. The changes made in DATA table will be updated in your database. 
+6. Click on the cancel icon to cancel the addition.
    <img src="images/Create%20tables.png">
    <img src="images/addRow.png">
 
-### Editing an existing column to a SCHEMA table or row to a DATA table
+
+### Editing an existing row of a DATA table
 
 1. Click on the edit icon of the specific column that you want to edit.
 2. You can make changes to column fields based on the selections provided.
 3. Click on the save icon to keep your changes.
 4. Click on the cancel icon to cancel your changes.
 
-## Deleting an column to a SCHEMA table or row to a DATA table
+### Deleting a column to a SCHEMA table or row of a DATA table
 
 1. Click on the delete icon of the specific column that you want to delete.
 2. Click on the confirm icon to delete the column.
 3. Click on the cancel icon to cancel the deletion.
 
+
+## <img src="images/MakingEditsDemo.gif">
+
+
 ### Adding a foreign key reference to a column
 
 1. While editing a column, if setting Foreign Key (FK) to "true", the Foreign Key Reference sidebar will appear on the right side of the screen.
 2. In the Foreign Key Reference sidebar, use the displayed dropdowns to create references between tables.
 3. Click save or cancel to proceed.
 4. Click on the save icon to keep your changes or click on the cancel icon to cancel your changes.
 
+### Adding a table to a database
+
+1. When on the display page, click the 'Add Table' icon after you have either connected to a database or clicked 'Build Database'.
+2. Fill in the required information about the first column of your table along with a name.
+3. If you would like to include additional columns, click the 'Add Column' button in the top right corner.
+3. Click confirm to create your table.
+
+### Deleting a table from a database
+
+1. After you have either connected to a database or started a new database, the 'Delete Table' icon will appear on the left side of the display page
+2. This will open a pop out with a list of tables from the database.
+3. Select which table that you would like to have removed, and confirm to have it deleted.
 
 ### Navigating the canvas
 
@@ -220,9 +258,9 @@ npm run cert:linux
 ---
 
 ### Credits/Contributors
-- Yichung Chiu • [LinkedIn] • [Github]
-- Joseph Tejeda • [LinkedIn] • [Github]
-- Stephen Havig • [LinkedIn] • [Github]
+- Yichung Chiu • [LinkedIn](https://www.linkedin.com/in/yichung-chiu-b14a94272/) • [Github](https://github.com/ychiu5896)
+- Joseph Tejeda • [LinkedIn](https://www.linkedin.com/in/atxjtejeda/) • [Github](https://github.com/JosephTejeda)
+- Stephen Havig • [LinkedIn](https://www.linkedin.com/in/stephen-havig-199340145/) • [Github](https://github.com/Stephen-Havig)
 - Das Kang • [LinkedIn](https://www.linkedin.com/in/das-kang/) • [Github](https://github.com/dahae0309)
 - Alexander Tu • [LinkedIn](https://www.linkedin.com/in/atu816/) • [Github](http://github.com/atu816)
 - Michael Costello • [LinkedIn](https://www.linkedin.com/in/mcostello-swe/) • [Github](https://github.com/neighbor-peace)

README.md

@@ -2,18 +2,12 @@ import { RequestHandler, Request, Response, NextFunction } from 'express';
 import { DataSource } from 'typeorm';
 
 
+// HELPER FUNCTIONS FOR THE HELPER FUNCTIONS
 
 const tableNameFormat = async (req: Request, dbDataSource: DataSource) => {
   const { db_type, username } = req.session;
   const { tableName } = req.body;
 
-  // let newTableName = '';
-  // if (tableName.substring(0, 7) === '.public') {
-  //   newTableName = tableName.slice(7)
-  // } else {
-  //   newTableName = tableName
-  // };
-
   let tableNameFormat = '';
   switch (db_type) {
     case 'oracle':
@@ -194,7 +188,7 @@ export const updateRow: RequestHandler = async (req: Request, _res: Response, ne
 
     await dbDataSource.destroy();
     console.log('Database has been disconnected');
-    return dbUpdatedRow; 
+    return dbUpdatedRow;
 
   } catch (err: unknown) {
     console.log('Error occurred in the updatedRow middleware: ', err);
@@ -209,49 +203,25 @@ export const updateRow: RequestHandler = async (req: Request, _res: Response, ne
 export const deleteRow: RequestHandler = async (req: Request, _res: Response, next: NextFunction,) => {
   const dbDataSource = await dbConnect(req);
   const { db_type } = req.session;
-  const { primaryKey, value, deletedRow } = req.body
+  const { value } = req.body
 
   try{
-    // let tableNameDelete = '';
-    // switch (db_type) {
-    //   case 'oracle':
-    //     tableNameDelete = `"${(username as string).toUpperCase()}"."${tableName}"`;
-    //     break;
-    //   case 'mssql':
-    //     const schemaName: {[SchemaName: string]: string}[] = await dbDataSource.query(`SELECT SCHEMA_NAME() AS SchemaName;`);
-    //     tableNameDelete = `${schemaName[0].SchemaName}.${tableName}`;
-    //     break;
-    //   default:
-    //     tableNameDelete = tableName;
-    //     break;
-    // };
-
     const tableNameDelete = await Promise.resolve(tableNameFormat(req, dbDataSource));
 
-    if (primaryKey){
-      // Deleting a row that has a PK 
-      await dbDataSource.query(`
-        DELETE FROM ${tableNameDelete} 
-        WHERE ${db_type === 'oracle' ? `"${primaryKey}"` : primaryKey} = ${db_type === 'oracle' || db_type === 'mysql' ? `'${value}'` : value}
-        `)
-
-    } else {
-      // Deleting a row that does NOT have a PK
-      const deleteEntries = Object.entries(deletedRow).filter(([_key, value]) => value !== null);
-      const deleteKeys = deleteEntries.map(([key, _value]) => key);
-      const deleteValues = deleteEntries.map(([_key, value]) => value);
-
-      let oracleKeyValueString = '';
-      for (let i = 0; i < deleteKeys.length; i++) {
-        oracleKeyValueString += `"${deleteKeys[i]}" = '${deleteValues[i]}'${i < deleteKeys.length - 1 ? ' AND ' : ''}`
-      };
-      const keyValueString = oracleKeyValueString.replace(/"/g, '');
+    const deleteEntries = Object.entries(value).filter(([_key, value]) => value !== null);
+    const deleteKeys = deleteEntries.map(([key, _value]) => key);
+    const deleteValues = deleteEntries.map(([_key, value]) => value);
 
-      await dbDataSource.query(`
-        DELETE FROM ${tableNameDelete} 
-        WHERE ${db_type === 'oracle' ? oracleKeyValueString : keyValueString }
-        `)
+    let oracleKeyValueString = '';
+    for (let i = 0; i < deleteKeys.length; i++) {
+      oracleKeyValueString += `"${deleteKeys[i]}" = '${deleteValues[i]}'${i < deleteKeys.length - 1 ? ' AND ' : ''}`
     };
+    const keyValueString = oracleKeyValueString.replace(/"/g, '');
+
+    await dbDataSource.query(`
+      DELETE FROM ${tableNameDelete} 
+      WHERE ${db_type === 'oracle' ? oracleKeyValueString : keyValueString }
+      `)
 
     dbDataSource.destroy();
     console.log('Database has been disconnected');
@@ -279,26 +249,33 @@ export const addNewDbColumn: RequestHandler = async (req: Request, _res: Respons
     console.log('tableNameAddColumn: ', tableNameAddColumn)
 
     let keyValueString: string = '';
-    let repeatingKeyValueString: string = '';
     let newColumnString: string = ''
 
     columnData.forEach((el: NewColumn) => {
-      if (db_type === 'mssql' || db_type === 'oracle') {
-        repeatingKeyValueString += `ALTER TABLE ${tableNameAddColumn} ADD "${el.name}" ${el.type === 'AUTO_INCREMENT' ? 'INT' : el.type}${el.isPrimary ? ' PRIMARY KEY' : ''}${el.isNullable ? '' : ' NOT NULL'}${el.defaultValue ? ` DEFAULT ${el.defaultValue}` : ''}${el.type === 'AUTO_INCREMENT' ? ' AUTO_INCREMENT' : ''}; `
-      } else {
+      if (db_type === 'mssql') {
+        keyValueString += `ALTER TABLE ${tableNameAddColumn} ADD "${el.name}" ${el.type === 'AUTO_INCREMENT' ? 'INT' : el.type}${el.isPrimary ? ' PRIMARY KEY' : ''}${el.isNullable ? '' : ' NOT NULL'}${el.defaultValue ? ` DEFAULT ${el.defaultValue}` : ''}${el.type === 'AUTO_INCREMENT' ? ' AUTO_INCREMENT' : ''}; `
+      } else if(db_type === 'oracle') {
+        let number: string = '';
+        if (el.type.includes('VARCHAR')) {
+          const regex = /\((\d+)\)/;
+          const match = el.type.match(regex)
+          number = (match as RegExpMatchArray)[1]
+        }
+        keyValueString += `ALTER TABLE ${tableNameAddColumn} ADD(${el.name} ${el.type.includes('VARCHAR') ? `VARCHAR2(${+number})` : el.type}${el.isPrimary ? ' PRIMARY KEY' : ''}${el.isNullable ? '' : ' NOT NULL'}${el.defaultValue ? ` DEFAULT ${el.defaultValue}` : ''}${el.type === 'AUTO_INCREMENT' ? ' AUTO_INCREMENT' : ''}))`
+     } else {
         keyValueString += `ADD${db_type === 'postgres' ? ' COLUMN' : '' } ${ db_type === 'mysql' ? `${el.name}` : `"${el.name}"`} ${el.type === 'AUTO_INCREMENT' ? 'INT' : el.type}${el.isPrimary ? ' PRIMARY KEY' : ''}${el.isNullable ? '' : ' NOT NULL'}${el.defaultValue ? ` DEFAULT ${el.defaultValue}` : ''}${el.type === 'AUTO_INCREMENT' ? ' AUTO_INCREMENT' : ''}, `
       };
     });
 
     if (db_type === 'mssql' || db_type === 'oracle') {
-      newColumnString = repeatingKeyValueString.slice(0, -1); 
+      newColumnString = keyValueString.slice(0, -1); 
     } else {
       newColumnString = keyValueString.slice(0, -2); 
-    }
+    };
 
-    if (db_type === 'mssql') {
+    if (db_type === 'mssql' || db_type === 'oracle') {
       const addedNewColumn: Promise<unknown> = await dbDataSource.query(`
-        ${repeatingKeyValueString}
+        ${newColumnString}
         `);
 
       await dbDataSource.destroy();
@@ -328,27 +305,24 @@ export const addNewDbColumn: RequestHandler = async (req: Request, _res: Respons
 
 export const updateDbColumn: RequestHandler = async (req: Request, _res: Response, next: NextFunction,) => {
   const dbDataSource = await dbConnect(req);
-  const { db_type, username } = req.session;
+  const { db_type } = req.session;
+  const { columnName, schemaData, columnData } = req.body;
 
   try{
-    const updateColumnData: {[key: string]: string } = req.body;
-
-    const schemaName = db_type === 'mssql' ? await dbDataSource.query(`SELECT SCHEMA_NAME() AS SchemaName;`) : '';
-
-    const slicedTableName = updateColumnData.tableName.slice(7, updateColumnData.tableName.length + 1);
-    const tableName: string = db_type === 'oracle' ? `"${(username as string).toUpperCase()}"."${slicedTableName}"` :
-      db_type === 'mssql' ? `${schemaName[0].SchemaName}.${slicedTableName}` : updateColumnData.tableName;
+    const tableNameUpdateColumn = await Promise.resolve(tableNameFormat(req, dbDataSource));
+    console.log('schemaData: ', schemaData)
+    console.log('columnData: ', columnData)
 
 
-    const updatedColumn: Promise<unknown> = await dbDataSource.query(`
-      ALTER TABLE ${tableName}
-      ${db_type === 'postgres' || db_type === 'microsoft' ? 'ALTER COLUMN' : 'MODIFY' } "${updateColumnData.columnName}" ${updateColumnData.dataType} ${db_type === 'postgres' ? updateColumnData.constraintName : null} ${updateColumnData.constraintExpression}
+      await dbDataSource.query(`
+      UPDATE ${tableNameUpdateColumn}
+      ${db_type === 'postgres' || db_type === 'microsoft' ? 'ALTER COLUMN' : 'MODIFY' } "${columnName}" ${db_type} ${ columnData.additional_constraint ? columnData.additional_constraint : ''};
       `);
 
     dbDataSource.destroy();
     console.log('Database has been disconnected');
-    console.log('addedForeignKey in helper: ', updatedColumn);
-    return updatedColumn;
+    // console.log('addedForeignKey in helper: ', updatedColumn);
+    // return updatedColumn;
 
   } catch (err: unknown) {
     console.log('Error occurred in the addedForeignKey middleware: ', err);
@@ -364,13 +338,13 @@ export const deleteColumn: RequestHandler = async (req: Request, _res: Response,
   const dbDataSource = await dbConnect(req)
   const { db_type } = req.session
   const { columnName } = req.body
-
+console.log('we are in the helper functions: ', req.body)
   try{  
     const columnTableNameDelete = await Promise.resolve(tableNameFormat(req, dbDataSource));
 
     const deletedColumn: Promise<unknown> = await dbDataSource.query(`
     ALTER TABLE ${columnTableNameDelete}
-    DROP${db_type !== 'mysql' ? ' COLUMN' : null} ${columnName}
+    DROP${db_type !== 'mysql' ? ' COLUMN' : ''} ${columnName}
     `)
 
     dbDataSource.destroy();