From 1b90047b1b385b8dca11e8b4f3ca71ef388675d7 Mon Sep 17 00:00:00 2001 From: mahathiryali Date: Fri, 8 Nov 2024 21:25:23 -0800 Subject: [PATCH] demo code version --- package-lock.json | 8 ++-- package.json | 2 +- src/SemesterHome.css | 3 ++ src/components/AddClass/addclass.css | 4 -- src/components/AddDegree/AddDegree.css | 4 ++ src/components/AddDegree/AddDegree.tsx | 5 ++- src/components/CustomClass/custom-class.tsx | 8 ++++ src/components/SemesterBlock/index.tsx | 40 +++++++++++++++-- .../SemesterBlock/semesterblock.css | 43 +++++++++++++++++++ src/components/SetUpPage/setup.css | 16 +++++-- yarn.lock | 8 ++-- 11 files changed, 120 insertions(+), 21 deletions(-) create mode 100644 src/components/CustomClass/custom-class.tsx diff --git a/package-lock.json b/package-lock.json index 8a76fda..22a7c3f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.27.0", - "react-select": "^5.8.1", + "react-select": "^5.8.2", "styled-components": "^6.1.13" }, "devDependencies": { @@ -4130,9 +4130,9 @@ } }, "node_modules/react-select": { - "version": "5.8.1", - "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.1.tgz", - "integrity": "sha512-RT1CJmuc+ejqm5MPgzyZujqDskdvB9a9ZqrdnVLsvAHjJ3Tj0hELnLeVPQlmYdVKCdCpxanepl6z7R5KhXhWzg==", + "version": "5.8.2", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.2.tgz", + "integrity": "sha512-a/LkOckoI62710gGPQSQqUp7A10fGbH/ya3/IR49qaq3XoBvwymgD5mJgtiHxBDsutyEQfdKNycWVh8Cg8UCjw==", "dependencies": { "@babel/runtime": "^7.12.0", "@emotion/cache": "^11.4.0", diff --git a/package.json b/package.json index 75dd4fc..5047286 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.27.0", - "react-select": "^5.8.1", + "react-select": "^5.8.2", "styled-components": "^6.1.13" }, "devDependencies": { diff --git a/src/SemesterHome.css b/src/SemesterHome.css index aff4d43..3547ff8 100644 --- a/src/SemesterHome.css +++ b/src/SemesterHome.css @@ -1,3 +1,6 @@ +/* .body { + display: block !important; +} */ .content { display: flex; flex: 1; diff --git a/src/components/AddClass/addclass.css b/src/components/AddClass/addclass.css index efc84b0..2c09c17 100644 --- a/src/components/AddClass/addclass.css +++ b/src/components/AddClass/addclass.css @@ -13,10 +13,6 @@ body { background-color: white !important; } - /* .searchContent { - background-color: white; - color: black; -} */ .searchBar { background-color: white; diff --git a/src/components/AddDegree/AddDegree.css b/src/components/AddDegree/AddDegree.css index ccf8da9..81b563a 100644 --- a/src/components/AddDegree/AddDegree.css +++ b/src/components/AddDegree/AddDegree.css @@ -7,6 +7,10 @@ width: 500px; flex-direction: column; gap: var(--L, 32px); + align-items: flex-start; + justify-content: center; + align-self: stretch; + margin-left: 450px; } @media (max-width: 600px) { .container { diff --git a/src/components/AddDegree/AddDegree.tsx b/src/components/AddDegree/AddDegree.tsx index e7916a9..8e464e5 100644 --- a/src/components/AddDegree/AddDegree.tsx +++ b/src/components/AddDegree/AddDegree.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react'; import {useNavigate} from 'react-router-dom'; +import { useLocation } from 'react-router-dom'; import Select from 'react-select' import { Separator, Flex } from "@radix-ui/themes"; import MAJORS from './majors.json'; @@ -20,6 +21,8 @@ type AddDegreeProps = { export default function AddDegree({ isMajor }: AddDegreeProps) { const navigate = useNavigate(); + const location = useLocation(); + const { startYear, gradYear, summerCheck } = location.state || {}; const optionType = isMajor ? "Major" : "Minor"; const [selectedDegree, setSelectedDegree] = useState(null); const [selectedDegreeList, setSelectedDegreeList] = useState([]); @@ -41,7 +44,7 @@ export default function AddDegree({ isMajor }: AddDegreeProps) { }; const handleConfirmClick = () => { - navigate('/next', { state : { } }) + navigate('/next', { state : { startYear, gradYear, summerCheck } }) }; const DegreeSelect = () => ( diff --git a/src/components/CustomClass/custom-class.tsx b/src/components/CustomClass/custom-class.tsx new file mode 100644 index 0000000..ace952f --- /dev/null +++ b/src/components/CustomClass/custom-class.tsx @@ -0,0 +1,8 @@ + +function CustomClass() { + return ( + <> + ) +} + +export default CustomClass; \ No newline at end of file diff --git a/src/components/SemesterBlock/index.tsx b/src/components/SemesterBlock/index.tsx index 344be42..75a16c6 100644 --- a/src/components/SemesterBlock/index.tsx +++ b/src/components/SemesterBlock/index.tsx @@ -3,6 +3,9 @@ import React, { useState } from 'react'; import { Button } from "@radix-ui/themes"; import "./semesterblock.css" import AddClass from "../AddClass/AddClass"; +import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; +import { DotsHorizontalIcon, TrashIcon, FileTextIcon } from '@radix-ui/react-icons'; + interface SemesterYearProps { selectedYear: number | string; @@ -16,15 +19,19 @@ interface SemesterYearProps { }; function SemesterBlock({ selectedYear, selectedSemester }: SemesterYearProps) { - const [classList, setClassList] = useState([]); const [isAddClassOpen, setIsAddClassOpen] = useState(false); const [selectedClasses, setSelectedClasses] = useState([]); const [totalUnits, setTotalUnits] = useState(0); - const handleDeleteClass = (name: string) => { - setClassList(classList.filter((className) => className !== name)); + const handleDeleteClass = (indexToDelete: number) => { + const deletedClassUnits = selectedClasses[indexToDelete].units; + setSelectedClasses((prevClasses) => + prevClasses.filter((_, index) => index !== indexToDelete) + ); + setTotalUnits((prevTotalUnits) => prevTotalUnits - deletedClassUnits); }; + const handleEditClass = () => {}; const addClass = (cls: ClassType) => { setSelectedClasses((prevClasses) => [...prevClasses, cls]); @@ -43,6 +50,33 @@ function SemesterBlock({ selectedYear, selectedSemester }: SemesterYearProps) { {/*
*/} {selectedClasses.map((cls, index) => (
+ + + + + + {/* Dropdown Menu Content */} + + + Edit Course Details + + handleDeleteClass(index)} + > + Delete Class + + +

{cls.name}

{cls.units} Units

diff --git a/src/components/SemesterBlock/semesterblock.css b/src/components/SemesterBlock/semesterblock.css index e485cc1..c3e5ba7 100644 --- a/src/components/SemesterBlock/semesterblock.css +++ b/src/components/SemesterBlock/semesterblock.css @@ -30,6 +30,10 @@ } + .classContainer:hover { + background-color: #e0e0e0; /* Grayer background on hover */ + } + .classTitle { color: var(--Primary-Text, #000); align-items: flex-start; @@ -96,3 +100,42 @@ align-items: flex-start; } + +.three-dot-menu { + border-radius: var(--XXS, 4px); + background: var(--White, #FFF); + /* highdrop */ + box-shadow: 0px 8px 12px 0px rgba(60, 66, 87, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.30); + padding: var(--XS, 8px); +} + +.dropDownBtn { + width: 32px; + height: 16px; + position: absolute; + opacity: 0; + /* position: absolute; + top: 8px; + right: 8px; */ + /* background: none; + border: none; + font-size: 20px; + color: #666; */ + cursor: pointer; + /* opacity: 0; Initially hidden + transition: opacity 0.3s; */ +} + + +.classContainer:hover .dropDownBtn { + opacity: 1; +} + +.menu-item { + cursor: pointer; +} + +.menu-item:hover { + background-color: #bfdbfe; +} + diff --git a/src/components/SetUpPage/setup.css b/src/components/SetUpPage/setup.css index 39e7483..9e2856b 100644 --- a/src/components/SetUpPage/setup.css +++ b/src/components/SetUpPage/setup.css @@ -1,8 +1,16 @@ +.radix-themes { + display: flex !important; + justify-content: center; + align-items: center; + place-items: center; +} .setup-container { - width: 500px; - /* flex-direction: column; - gap: var(--L, 32px); */ + width: 420px; + margin-left: 500px; background-color: white !important; + display: flex; + justify-content: center !important; + align-items: center !important; } @media (max-width: 600px) { .container { @@ -12,11 +20,11 @@ body { background-color: white; + /* display: inline !important; */ } .setup { color: var(--Primary-Text, #000); - /* Web UI/Heading/Heading Medium */ font-family: "Inter Variable"; font-size: 20px; font-style: normal; diff --git a/yarn.lock b/yarn.lock index b8f9a22..c36f44e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2288,10 +2288,10 @@ react-router@6.27.0: dependencies: "@remix-run/router" "1.20.0" -react-select@^5.8.1: - version "5.8.1" - resolved "https://registry.npmjs.org/react-select/-/react-select-5.8.1.tgz" - integrity sha512-RT1CJmuc+ejqm5MPgzyZujqDskdvB9a9ZqrdnVLsvAHjJ3Tj0hELnLeVPQlmYdVKCdCpxanepl6z7R5KhXhWzg== +react-select@^5.8.2: + version "5.8.2" + resolved "https://registry.npmjs.org/react-select/-/react-select-5.8.2.tgz" + integrity sha512-a/LkOckoI62710gGPQSQqUp7A10fGbH/ya3/IR49qaq3XoBvwymgD5mJgtiHxBDsutyEQfdKNycWVh8Cg8UCjw== dependencies: "@babel/runtime" "^7.12.0" "@emotion/cache" "^11.4.0"