From 46871846f9c7777a7dc1b84be7ace0b2fe886785 Mon Sep 17 00:00:00 2001 From: Tarun Eswar Date: Sat, 13 Jan 2024 15:46:27 -0500 Subject: [PATCH 1/2] Test --- src/components/Dashboard/Dashboard.js | 185 ++++++++++++++++++++++---- src/components/DataParse/DataParse.js | 4 +- 2 files changed, 160 insertions(+), 29 deletions(-) diff --git a/src/components/Dashboard/Dashboard.js b/src/components/Dashboard/Dashboard.js index e6d61d1..cded388 100644 --- a/src/components/Dashboard/Dashboard.js +++ b/src/components/Dashboard/Dashboard.js @@ -1,24 +1,61 @@ import { useState } from "react"; import { useNavigate } from "react-router"; import "./Dashboard.css"; -import { Button, Form, Layout, Menu, theme } from "antd"; +import { Button, ConfigProvider, Dropdown, Form, Input, Layout, Menu, Modal, Select, theme } from "antd"; -import { MenuFoldOutlined, MenuUnfoldOutlined, ApartmentOutlined, FileTextOutlined } from "@ant-design/icons"; + +import { MenuFoldOutlined, MenuUnfoldOutlined, ApartmentOutlined, FileTextOutlined, UserOutlined } from "@ant-design/icons"; import ReactFlow from 'reactflow'; import Flow from './Flow.js'; import RequirementsSidebar from './Requirements/Requirements.js'; -import Table from "../Table/Table.jsx" import 'reactflow/dist/style.css'; var data = require('./Courses.json'); - +const { Option } = Select; const { Header, Sider, Content } = Layout; +var data = require('./Courses.json'); function Dashboard() { const [collapsed, setCollapsed] = useState(false); + const handleClose = () => { + setSignup(false); + } + + let [first, setFirst] = useState(""); + let [last, setLast] = useState(""); + let [year, setYear] = useState(""); + let [major, setMajor] = useState(""); + + const items2 = [ + { + key: '1', + label: ( + + 1st menu item + + ), + }, + { + key: '2', + label: ( + + 2nd menu item + + ), + }, + { + key: '3', + label: ( + + 3rd menu item + + ), + }, + ]; + const initialNodes = [ { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } }, { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } }, @@ -28,6 +65,10 @@ function Dashboard() { let [edges, setEdges] = useState({}); + let [tab, setTab] = useState(0); + + let [signup, setSignup] = useState(true); + const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }]; @@ -185,34 +226,22 @@ function Dashboard() { const navigate = useNavigate(); - let [tab, setTab] = useState(1); - - let windowContent - if (tab == 1) { - windowContent = - - {/* */} - ; - } else { - windowContent = - } + let [q, setQ] = useState(1); return ( + <> +
{ - setTab(e.key); - }} theme="dark" mode="inline" defaultSelectedKeys={['1']} @@ -221,12 +250,26 @@ function Dashboard() { key: '1', icon: , label: 'Roadmap', + onClick: () => { + setTab(0); + } }, { key: '2', icon: , label: 'Tracking Sheet', + onClick: () => { + setTab(1); + } }, + { + key: '3', + icon: , + label: 'Profile', + onClick: () => { + setTab(2); + } + } ]} /> @@ -248,10 +291,98 @@ function Dashboard() { }} /> - {windowContent} + + { + tab == 0 ? : tab == 1 ?

Tracking Sheet

: + <>

Profile

+

First Name: {first}

+

Last Name: {last}

+

Year: {year}

+

Major: {major}

+ + } + + {/* */} + { }} /> + + +

Tell us a little bit about yourself to customize your roadmap experience!

+

+
+ + { setFirst(e.target.value) + }}> + + + { setLast(e.target.value) + }} + /> + + + + + + + + + + + + + + + + + ); } diff --git a/src/components/DataParse/DataParse.js b/src/components/DataParse/DataParse.js index be7945b..10bdba5 100644 --- a/src/components/DataParse/DataParse.js +++ b/src/components/DataParse/DataParse.js @@ -18,7 +18,7 @@ function DataParse({ course_code }) { for (let i = 0; i < data["Report_Entry"].length; i++) { // console.log(data["Report_Entry"][i]["Course_Title"].slice(0, data["Report_Entry"][i]["Course_Title"].indexOf(" - ")).trim()); console.log(data["Report_Entry"][i] && data["Report_Entry"][i]["Course_Title"].slice(0, data["Report_Entry"][i]["Course_Title"].indexOf(" - ")).trim(), course_code); - if (data["Report_Entry"][i] && data["Report_Entry"][i]["Course_Title"].slice(0, data["Report_Entry"][i]["Course_Title"].indexOf(" - ")).trim() == course_code.trim()) { + if (data["Report_Entry"][i] && data["Report_Entry"][i]["Course_Title"].slice(0, data["Report_Entry"][i]["Course_Title"].indexOf(" - ")).trim() == course_code.trim() && data["Report_Entry"][i].Instructors != "") { classComponents.push(); console.log("pushed"); } @@ -35,7 +35,7 @@ function DataParse({ course_code }) { ))} */}

- {arraything.length > 0 && setCurrentSlide(page)} />} + {arraything.length > 0 && setCurrentSlide(page)} />} ); } From e17658398b63ddc99eea2e0447626a66f309e35d Mon Sep 17 00:00:00 2001 From: Randy Huang Date: Sat, 13 Jan 2024 15:52:26 -0500 Subject: [PATCH 2/2] add table --- .gitignore | 2 + package.json | 5 +- src/components/Dashboard/Dashboard.js | 64 +++---- src/components/Table/Table.jsx | 230 +++++++++++++++++++------- 4 files changed, 209 insertions(+), 92 deletions(-) diff --git a/.gitignore b/.gitignore index 4d29575..7f9b422 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +*/package-lock.json \ No newline at end of file diff --git a/package.json b/package.json index f85e40e..2c0fe2b 100644 --- a/package.json +++ b/package.json @@ -4,11 +4,14 @@ "private": true, "dependencies": { "@ant-design/icons": "^5.2.6", + "@ant-design/pro-components": "^2.6.43", "@emotion/react": "^11.11.3", "@table-library/react-table-library": "^4.1.7", - "antd": "^5.12.8", + "antd": "^5.13.0", "dayjs": "^1.11.10", "elkjs": "^0.9.1", + "install": "^0.13.0", + "npm": "^10.3.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router": "^6.21.2", diff --git a/src/components/Dashboard/Dashboard.js b/src/components/Dashboard/Dashboard.js index 18fb385..4fb1104 100644 --- a/src/components/Dashboard/Dashboard.js +++ b/src/components/Dashboard/Dashboard.js @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import { useNavigate } from "react-router"; import "./Dashboard.css"; import { Button, Form, Layout, Menu, theme } from "antd"; @@ -8,31 +8,28 @@ import ReactFlow from 'reactflow'; import Flow from './Flow.js'; import RequirementsSidebar from './Requirements/Requirements.js'; import Table from "../Table/Table.jsx" - import 'reactflow/dist/style.css'; -var data = require('./courses.json'); +const data = require('./courses.json'); const { Header, Sider, Content } = Layout; +const initialNodes = [ + { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } }, + { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } }, +]; +const initialTabState = 1; function Dashboard() { const [collapsed, setCollapsed] = useState(false); - - const initialNodes = [ - { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } }, - { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } }, - ]; + const [windowContent, setWindowContent] = useState(<>); + let [tab, setTab] = useState(initialTabState); let [nodes, setNodes] = useState({}); - let [edges, setEdges] = useState({}); - - - const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }]; - let [department, setDepartment] = useState("Computer Science Department"); + const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }]; let tempCourses = []; let tempEdges = []; @@ -185,25 +182,27 @@ function Dashboard() { const navigate = useNavigate(); - let [tab, setTab] = useState(1); - let windowContent - if (tab == 1) { - windowContent = - - {/* */} - ; - } else { - windowContent =
- } + useEffect(() => { + if (tab === 1) { + // eslint-disable-next-line react-hooks/exhaustive-deps + setWindowContent( + + ); + } else { + setWindowContent(
) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [tab]) + return ( @@ -212,10 +211,11 @@ function Dashboard() { { setTab(e.key); + console.log('key', e.key) }} theme="dark" mode="inline" - defaultSelectedKeys={['1']} + defaultSelectedKeys={[`${initialTabState}`]} items={[ { key: '1', diff --git a/src/components/Table/Table.jsx b/src/components/Table/Table.jsx index 643bb58..2819da2 100644 --- a/src/components/Table/Table.jsx +++ b/src/components/Table/Table.jsx @@ -1,67 +1,179 @@ -import * as React from 'react'; -import { CompactTable } from '@table-library/react-table-library/compact'; -import { useTheme } from '@table-library/react-table-library/theme'; -import { getTheme } from '@table-library/react-table-library/baseline'; - -import data from '../DataParse/dummy.json' -import processData from './dataProcessor'; // Adjust the path based on your file structure - - -async function fetchData() { - try { - // Read the JSON file - const response = await fetch("./dummy.json"); - if (!response.ok) { - throw new Error(`Failed to fetch JSON: ${response.statusText}`); +import React, { useContext, useEffect, useRef, useState } from 'react'; +import { Button, Form, Input, Popconfirm, Table } from 'antd'; +const EditableContext = React.createContext(null); +const EditableRow = ({ index, ...props }) => { + const [form] = Form.useForm(); + return ( +
+ + + + + ); +}; +const EditableCell = ({ + title, + editable, + children, + dataIndex, + record, + handleSave, + ...restProps +}) => { + const [editing, setEditing] = useState(false); + const inputRef = useRef(null); + const form = useContext(EditableContext); + useEffect(() => { + if (editing) { + inputRef.current.focus(); + } + }, [editing]); + const toggleEdit = () => { + setEditing(!editing); + form.setFieldsValue({ + [dataIndex]: record[dataIndex], + }); + }; + const save = async () => { + try { + const values = await form.validateFields(); + toggleEdit(); + handleSave({ + ...record, + ...values, + }); + } catch (errInfo) { + console.log('Save failed:', errInfo); } - - const data = await response.json(); - processData(data); - } catch (error) { - console.error('Error:', error); + }; + let childNode = children; + if (editable) { + childNode = editing ? ( + + + + ) : ( +
+ {children} +
+ ); } -} -fetchData(); - -const nodes = [ - { - id: '0', - name: 'Shopping List', - deadline: new Date(2020, 1, 15), - type: 'TASK', - isComplete: true, - nodes: 3, - }, -]; - - -const key = 'Compact Table'; - -const Component = () => { - const data = { nodes }; - - const theme = useTheme(getTheme()); - - const COLUMNS = [ - { label: 'Task', renderCell: (item) => item.name }, + return ; +}; +const App = () => { + const [dataSource, setDataSource] = useState([ + { + key: '0', + name: 'Edward King 0', + age: '32', + address: 'London, Park Lane no. 0', + }, + { + key: '1', + name: 'Edward King 1', + age: '32', + address: 'London, Park Lane no. 1', + }, + ]); + const [count, setCount] = useState(2); + const handleDelete = (key) => { + const newData = dataSource.filter((item) => item.key !== key); + setDataSource(newData); + }; + const defaultColumns = [ { - label: 'Deadline', - renderCell: (item) => - item.deadline.toLocaleDateString('en-US', { - year: 'numeric', - month: '2-digit', - day: '2-digit', - }), + title: 'name', + dataIndex: 'name', + width: '30%', + editable: true, }, - { label: 'Type', renderCell: (item) => item.type }, { - label: 'Complete', - renderCell: (item) => item.isComplete.toString(), + title: 'age', + dataIndex: 'age', + }, + { + title: 'address', + dataIndex: 'address', + }, + { + title: 'operation', + dataIndex: 'operation', + render: (_, record) => + dataSource.length >= 1 ? ( + handleDelete(record.key)}> + Delete + + ) : null, }, - { label: 'Tasks', renderCell: (item) => item.nodes?.length }, ]; - - return ; + const handleAdd = () => { + const newData = { + key: count, + name: `Edward King ${count}`, + age: '32', + address: `London, Park Lane no. ${count}`, + }; + setDataSource([...dataSource, newData]); + setCount(count + 1); + }; + const handleSave = (row) => { + const newData = [...dataSource]; + const index = newData.findIndex((item) => row.key === item.key); + const item = newData[index]; + newData.splice(index, 1, { + ...item, + ...row, + }); + setDataSource(newData); + }; + const components = { + body: { + row: EditableRow, + cell: EditableCell, + }, + }; + const columns = defaultColumns.map((col) => { + if (!col.editable) { + return col; + } + return { + ...col, + onCell: (record) => ({ + record, + editable: col.editable, + dataIndex: col.dataIndex, + title: col.title, + handleSave, + }), + }; + }); + return ( +
+
{childNode}
'editable-row'} + bordered + dataSource={dataSource} + columns={columns} + /> + + ); }; - -export default Component; \ No newline at end of file +export default App; \ No newline at end of file