ui fix for year handlers

Author: Shreya Agrawal

client/src/screens/browse/components/year-info/confirmDialog.jsx

@@ -30,7 +30,7 @@ const ConfirmDialog = ({
     confirmText = "Confirm",
     cancelText = "Cancel",
 }) => {
-    const [submitEnabled, setSubmitEnabled] = useState(true);
+    const [submitEnabled, setSubmitEnabled] = useState(false);
     if (!show) return null;
 
     return (
@@ -50,7 +50,11 @@ const ConfirmDialog = ({
                         name="section"
                         className="select_section"
                         value={yearName}
-                        onChange={(e) => onYearNameChange(e.target.value)}
+                        onChange={(e) => {
+                            if (e.target.value) setSubmitEnabled(true);
+                            else setSubmitEnabled(false);
+                            onYearNameChange(e.target.value);
+                        }}
                     >
                         <option value="" disabled>
                             Select year

client/src/screens/browse/components/year-info/index.jsx

@@ -28,6 +28,8 @@ const YearInfo = ({
     const handleConfirmAddYear = async () => {
         const yearName = newYearName.trim();
 
+        if(!yearName) return;
+        console.log(yearName);
         if (!courseCode) {
             toast.error("No course selected.");
             return;
@@ -94,7 +96,11 @@ const YearInfo = ({
                                         key={idx}
                                     >
                                         {year.name}
-                                        <div className="delete" onClick={handleDeleteYear}></div>
+                                        <div 
+                                            className="delete" 
+                                            onClick={handleDeleteYear}
+                                            title="Delete Year"
+                                        ></div>
 
                                     </span>
                                     <ConfirmDelDialog
@@ -112,7 +118,7 @@ const YearInfo = ({
                         <div>
                             <div className="">
                                 <span className="" onClick={handleAddYear}>
-                                    <span className="text">Add Year</span>
+                                    <span className="text">New Year</span>
                                 </span>
                             </div>
                             <ConfirmDialog

client/src/screens/browse/components/year-info/year-options.js

@@ -1,8 +1,10 @@
 const presentYears=[];
 const options=[];
-const currYear=new Date().getFullYear();
+const currentDate = new Date();
+const currentMonth = currentDate.getMonth() + 1; // getMonth() returns 0-11, so add 1 for 1-12
+const acadYear = (currentMonth >= 1 && currentMonth <= 5) ? currentDate.getFullYear() - 1 : currentDate.getFullYear();
 for(let i=0;i<5;i++){
-    let yr=(currYear-i).toString();
+    let yr=(acadYear-i).toString();
     if(!presentYears.includes(yr))
         options.push(yr);
 }

client/src/screens/browse/styles.scss

@@ -55,16 +55,57 @@
                 font-size: 1.2rem;
             }
             .year{
+                cursor: pointer;
                 padding: 10px 20px;
                 font-size: 1.14rem;
+                position: relative;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
                 &.selected{
                     color: #000;
                     background-color: #fff;
                     .delete{
-                        background-color: red;
-                        height:15px;
-                        width: 15px;
-                        border-radius: 50%;
+                        background: url(./components/browsefolder/Delete.svg), none;
+                        
+                        position: absolute;
+                        top: 50%;
+                        right: 10px;
+                        transform: translateY(-50%);
+                        width: 16px;
+                        height: 16px;
+                        background-size: contain;
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        cursor: pointer;
+                        opacity: 0;
+                        transition: opacity 0.2s ease-in-out;
+                        z-index: 3;
+                        border-radius: 2px;
+                    }
+                }
+                &.selected:hover .delete{opacity: 1;}
+            }
+            &.add-year {
+                border-top: 1px solid #333;
+                margin-top: 10px;
+                padding: 10px 20px;
+                
+                span {
+                    color: #888;
+                    font-size: 0.9rem;
+                    cursor: pointer;
+                    transition: color 0.2s ease-in-out;
+                    
+                    &:hover {
+                        color: #bbb;
+                    }
+                    
+                    .text {
+                        &::before {
+                            content: "+ ";
+                            margin-right: 4px;
+                        }
                     }
                 }
             }