Merge branch 'working' into dev-channel

src/App.jsx

@@ -1849,7 +1849,7 @@ export default function App() {
                             path: "dashboard",
                         },
                         {
-                            element: <Dashboard fetchUserGrades={fetchUserGrades} grades={grades} activeAccount={activeAccount} isLoggedIn={isLoggedIn} useUserData={useUserData} sortGrades={sortGrades} />,
+                            element: <Dashboard fetchUserGrades={fetchUserGrades} grades={grades} fetchHomeworks={fetchHomeworks} activeAccount={activeAccount} isLoggedIn={isLoggedIn} useUserData={useUserData} sortGrades={sortGrades} />,
                             path: ":userId/dashboard"
                         },
                         {

src/components/app/Dashboard/Dashboard.jsx

@@ -10,20 +10,27 @@ import {
     WindowContent
 } from "../../generic/Window";
 import LastGrades from "./LastGrades";
+import Notebook from "../Homeworks/Notebook";
+import BottomSheet from "../../generic/PopUps/BottomSheet";
+import EncodedHTMLDiv from "../../generic/CustomDivs/EncodedHTMLDiv";
 
 import "./Dashboard.css";
 
-export default function Dashboard({ fetchUserGrades, grades, activeAccount, isLoggedIn, useUserData, sortGrades }) {
+export default function Dashboard({ fetchUserGrades, grades, fetchHomeworks, activeAccount, isLoggedIn, useUserData, sortGrades }) {
     const navigate = useNavigate();
     const userData = useUserData();
 
+    const [bottomSheetSession, setBottomSheetSession] = useState({})
     const sortedGrades = userData.get("sortedGrades");
+    const homeworks = useUserData("sortedHomeworks");
+
+    const hashParameters = location.hash.split(";")
 
     // Behavior
     useEffect(() => {
         document.title = "Accueil • Ecole Directe Plus";
     }, [])
-    
+
     useEffect(() => {
         const controller = new AbortController();
         if (isLoggedIn) {
@@ -39,6 +46,27 @@ export default function Dashboard({ fetchUserGrades, grades, activeAccount, isLo
         }
     }, [grades, isLoggedIn, activeAccount]);
 
+    useEffect(() => {
+        const controller = new AbortController();
+        if (isLoggedIn) {
+            if (homeworks.get() === undefined) {
+                fetchHomeworks(controller);
+            }
+        }
+
+        return () => {
+            controller.abort();
+        }
+    }, [homeworks.get(), isLoggedIn, activeAccount]);
+
+    useEffect(() => {
+        if (hashParameters.length > 2 && !bottomSheetSession.id) {
+            navigate(`${hashParameters[0]};${hashParameters[1]}`)
+        } else if (hashParameters.length < 3 && bottomSheetSession.id) {
+            setBottomSheetSession({})
+        }
+    }, [location.hash])
+
     // JSX DISCODO
     return (
         <div id="dashboard">
@@ -55,23 +83,23 @@ export default function Dashboard({ fetchUserGrades, grades, activeAccount, isLo
                                     
                                 </WindowContent>
                             </Window> */}
-                            
+
                             <Window WIP={true}>
                                 <WindowHeader onClick={() => navigate("../homeworks")}>
                                     <h2>Prochains contrôles</h2>
                                 </WindowHeader>
                                 <WindowContent>
-                                    
+
                                 </WindowContent>
                             </Window>
                         </WindowsLayout>
 
-                        <Window WIP={true} growthFactor={1.5}>
+                        <Window growthFactor={1.7}>
                             <WindowHeader onClick={() => navigate("../homeworks")}>
                                 <h2>Cahier de texte</h2>
                             </WindowHeader>
                             <WindowContent>
-
+                                <Notebook setBottomSheetSession={setBottomSheetSession} hideDateController={true} />
                             </WindowContent>
                         </Window>
                     </WindowsLayout>
@@ -81,12 +109,15 @@ export default function Dashboard({ fetchUserGrades, grades, activeAccount, isLo
                                 <h2>Emploi du temps</h2>
                             </WindowHeader>
                             <WindowContent>
-                                
+
                             </WindowContent>
                         </Window>
                     </WindowsLayout>
                 </WindowsLayout>
             </WindowsContainer>
+            {bottomSheetSession.id && <BottomSheet heading="Contenu de séance" onClose={() => { navigate(`#${bottomSheetSession.day};${bottomSheetSession.id}`); setBottomSheetSession({}) }}>
+                <EncodedHTMLDiv>{bottomSheetSession.content}</EncodedHTMLDiv>
+            </BottomSheet>}
         </div>
     )
 }

src/components/app/Header/AccountSelector.jsx

@@ -66,7 +66,7 @@ export default function AccountSelector({ accountsList, activeAccount, setActive
 
         const handleKeyDown = (event) => {
             if (event.key === "Escape") {
-                setIsOpen(false);                
+                setIsOpen(false);
             }
         }
 

src/components/app/Homeworks/DetailedTask.css

@@ -1,7 +1,8 @@
 .detailed-task {
     display: flex;
     flex-direction: column;
-    gap: 5px
+    gap: 5px;
+    flex-shrink: 0;
 }
 
 .task-header {
@@ -18,8 +19,8 @@
 .task-header .check-box input[type="checkbox"] {
     border-color: rgba(var(--text-color-alt), .6);
 }
-.task-header .check-box:is(:hover, :focus-visible) input[type="checkbox"]:not(:checked) {
-    border-color: rgba(var(--text-color-alt), 1);
+.task-header .check-box:is(:hover, :focus-within) input[type="checkbox"]:not(:checked) {
+    border-color: rgba(var(--text-color-alt), 1) !important;
 }
 .task-header .check-box input[type="checkbox"]:checked {
     background-color: rgba(var(--text-color-alt), .1);
@@ -70,6 +71,9 @@
 }
 
 /* change task content items appearance */
+.detailed-task .task-content a {
+    word-break: break-word;
+}
 .detailed-task .task-content a:is(:hover, :focus-visible) {
     opacity: .8;
 }
@@ -100,7 +104,7 @@
 
 .task-footer .task-footer-button.disabled {
     pointer-events: none;
-    opacity: 0.7;
+    filter: brightness(0.6);
 }
 .task-footer .task-footer-button:is(:hover, :focus-visible) {
     background-color: rgb(var(--background-color-3));

src/components/app/Homeworks/DetailedTask.jsx

@@ -4,7 +4,7 @@ import EncodedHTMLDiv from "../../generic/CustomDivs/EncodedHTMLDiv"
 import CheckBox from "../../generic/UserInputs/CheckBox"
 import { AppContext } from "../../../App"
 import { applyZoom } from "../../../utils/zoom";
-import { Link, useNavigate } from "react-router-dom"
+import { Link } from "react-router-dom"
 
 import "./DetailedTask.css"
 import PatchNotesIcon from "../../graphics/PatchNotesIcon"
@@ -46,7 +46,7 @@ export default function DetailedTask({ task, userHomeworks, day, taskIndex, setB
         return () => {
             controller.abort();
         }
-    }, [])
+    }, [day, task]);
 
     function completedTaskAnimation() {
         const bounds = taskCheckboxRef.current.getBoundingClientRect();
@@ -98,7 +98,7 @@ export default function DetailedTask({ task, userHomeworks, day, taskIndex, setB
                         id: task.id,
                         content: task.sessionContent,
                     })
-                }} to={`#${day};${task.id};s`} className={`task-footer-button ${supposedNoSessionContent.includes(task.sessionContent) ? "disabled" : ""}`}><PatchNotesIcon className="session-content-icon" />Contenu de séance</Link>
+                }} to={`#${day};${task.id};s`} replace={true} className={`task-footer-button ${supposedNoSessionContent.includes(task.sessionContent) ? "disabled" : ""}`}><PatchNotesIcon className="session-content-icon" />Contenu de séance</Link>
                 <div className={`task-footer-button ${task.sessionContentFiles.length === 0 ? "disabled" : ""}`}><DownloadIcon className="download-icon" />Fichiers</div>
             </div>
         </div>

src/components/app/Homeworks/Homeworks.jsx

@@ -1,5 +1,6 @@
 
 import { useContext, useEffect, useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
 
 import {
     WindowsContainer,
@@ -11,12 +12,11 @@ import {
 
 import { AppContext } from "../../../App";
 import Notebook from "./Notebook";
-import { useNavigate, useLocation } from "react-router-dom";
-
-import "./Homeworks.css";
 import BottomSheet from "../../generic/PopUps/BottomSheet";
 import EncodedHTMLDiv from "../../generic/CustomDivs/EncodedHTMLDiv";
 
+import "./Homeworks.css";
+
 
 export default function Homeworks({ isLoggedIn, activeAccount, fetchHomeworks }) {
     // States
@@ -69,7 +69,7 @@ export default function Homeworks({ isLoggedIn, activeAccount, fetchHomeworks })
 
                             </WindowContent>
                         </Window>
-                        <Window growthFactor={1.2}>
+                        <Window growthFactor={1.2} WIP={true}>
                             <WindowHeader>
                                 <h2>Calendrier</h2>
                             </WindowHeader>

src/components/app/Homeworks/Notebook.css

@@ -88,23 +88,28 @@
 }
 
 .notebook-day {
-    min-width: min(300px, 100%);
+    flex-shrink: 0;
+    width: min(300px, 100%);
     max-height: 100%;
     background: rgb(var(--background-color-2));
     border-radius: 25px;
     box-shadow: var(--box-shadow-element);
     filter: brightness(.9);
     opacity: .8;
     scroll-snap-align: center;
-    cursor: pointer;
+    cursor: grab;
     transition: .2s;
 
     display: flex;
     flex-flow: column nowrap;
 }
 
+.notebook-day:active {
+    cursor: grabbing;
+}
+
 .notebook-day.selected {
-    min-width: min(600px, 100%);
+    width: min(600px, 100%);
     filter: brightness(1.05);
     opacity: 1;
 }
@@ -123,6 +128,10 @@
     background: rgb(var(--background-color-3));
 }
 
+#dashboard .notebook-day .notebook-day-header {
+    height: 3em;
+}
+
 .notebook-day .notebook-day-header .progress-circle {
     height: 100%;
     margin: 5px;
@@ -159,6 +168,7 @@
     background-color: rgb(var(--border-color-contrast));
     border: none;
     transform: translateY(-1.5px);
+    flex-shrink: 0;
 }
 .detailed-task-separator {
     transform: none;

src/components/app/Homeworks/Notebook.jsx

@@ -12,7 +12,7 @@ import { applyZoom } from "../../../utils/zoom";
 import DetailedTask from "./DetailedTask";
 import { canScroll } from "../../../utils/DOM";
 
-export default function Notebook({ setBottomSheetSession }) {
+export default function Notebook({ setBottomSheetSession, hideDateController = false }) {
     const { actualDisplayTheme, useUserData, useUserSettings } = useContext(AppContext);
     const settings = useUserSettings();
     const userHomeworks = useUserData("sortedHomeworks");
@@ -60,7 +60,7 @@ export default function Notebook({ setBottomSheetSession }) {
     }
 
     function navigateToDate(newDate, cleanup = false) {
-        navigate(`#${newDate};${(cleanup && location.hash.split(";")[1]) || ""}${location.hash.split(";").length === 3 ? ";" + location.hash.split(";")[2] : ""}`);
+        navigate(`#${newDate};${(cleanup && location.hash.split(";")[1]) || ""}${location.hash.split(";").length === 3 ? ";" + location.hash.split(";")[2] : ""}`, { replace: true });
     }
 
     function nearestHomeworkDate(dir = 1, date) {
@@ -105,10 +105,10 @@ export default function Notebook({ setBottomSheetSession }) {
         if (!oldSelectedElementBounds) {
             return;
         }
-        
+
         const bounds = element.getBoundingClientRect();
         const containerBounds = notebookContainerRef.current.getBoundingClientRect();
-        notebookContainerRef.current.scrollTo(bounds.x - containerBounds.x + Math.min(600, containerBounds.width)/2 * (oldSelectedElementBounds.x >= bounds.x) + notebookContainerRef.current.scrollLeft - containerBounds.width/2, 0)
+        notebookContainerRef.current.scrollTo(bounds.x - containerBounds.x + Math.min(600, containerBounds.width) / 2 * (oldSelectedElementBounds.x >= bounds.x) + notebookContainerRef.current.scrollLeft - containerBounds.width / 2, 0)
 
     }
 
@@ -280,17 +280,20 @@ export default function Notebook({ setBottomSheetSession }) {
     }, [isMouseOverTasksContainer, isMouseIntoScrollableContainer, tasksContainersRefs.current])
 
     return <>
-        <div className="date-selector">
-            <span onClick={() => navigateToDate(nearestHomeworkDate(-1, selectedDate))} tabIndex={0} ><DropDownArrow /></span>
-            <time dateTime={selectedDate || null} className="selected-date">{(new Date(selectedDate)).toLocaleDateString() == "Invalid Date" ? "AAAA-MM-JJ" : (new Date(selectedDate)).toLocaleDateString()}</time>
-            <span onClick={() => navigateToDate(nearestHomeworkDate(1, selectedDate))} tabIndex={0} ><DropDownArrow /></span>
-        </div>
+        {!hideDateController
+            ? <div className="date-selector">
+                <span onClick={() => navigateToDate(nearestHomeworkDate(-1, selectedDate))} tabIndex={0} ><DropDownArrow /></span>
+                <time dateTime={selectedDate || null} className="selected-date">{(new Date(selectedDate)).toLocaleDateString() == "Invalid Date" ? "AAAA-MM-JJ" : (new Date(selectedDate)).toLocaleDateString()}</time>
+                <span onClick={() => navigateToDate(nearestHomeworkDate(1, selectedDate))} tabIndex={0} ><DropDownArrow /></span>
+            </div>
+            : null
+        }
         <div className={`notebook-container ${hasMouseMoved ? "mouse-moved" : ""}`} ref={notebookContainerRef}>
             {homeworks
                 ? Object.keys(homeworks).sort().map((el, index) => {
                     const progression = homeworks[el].filter((task) => task.isDone).length / homeworks[el].length
                     const elDate = new Date(el)
-                    return <div className={`notebook-day ${selectedDate === el ? "selected" : ""}`} onClick={() => !hasMouseMoved && navigate(`#${el};${(selectedDate === el ? location.hash.split(";")[1] : homeworks[el][0].id)}${location.hash.split(";").length === 3 ? ";" + location.hash.split(";")[2] : ""}`)} key={el} id={el} ref={selectedDate === el ? anchorElement : null}>
+                    return <div className={`notebook-day ${selectedDate === el ? "selected" : ""}`} onClick={() => !hasMouseMoved && navigate(`#${el};${(selectedDate === el ? location.hash.split(";")[1] : homeworks[el][0].id)}${location.hash.split(";").length === 3 ? ";" + location.hash.split(";")[2] : ""}`, { replace: true })} key={el} id={el} ref={selectedDate === el ? anchorElement : null}>
                         <div className="notebook-day-header">
                             <svg className={`progress-circle ${progression === 1 ? "filled" : ""}`} viewBox="0 0 100 100" >
                                 <circle cx="50" cy="50" r="40" />

src/components/app/Homeworks/Task.css

@@ -5,9 +5,11 @@
     border-radius: 10px;
     transition: .1s;
     text-decoration: none;
+    flex-shrink: 0;
     display: flex;
     align-items: stretch;
     justify-content: space-between;
+    outline: none;
     overflow: hidden;
 }
 
@@ -37,6 +39,7 @@
     background-color: rgb(var(--background-color-3));
     border-right: 3px solid rgb(var(--background-color-3));;
     justify-content: center;
+    flex-shrink: 0;
 }
 
 .task .check-box :is(input, input:checked) {
@@ -61,7 +64,7 @@
     transition: .1s !important;
 }
 
-.task .check-box:is(:hover, :focus-visible) input {
+.task .check-box:is(:hover, :focus-within) input {
     opacity: .25;
 }
 

src/components/app/Homeworks/Task.jsx

@@ -49,16 +49,24 @@ export default function Task({ day, task, taskIndex, userHomeworks, ...props })
     }
 
     function handleTaskClick(event) {
-        event.stopPropagation()
+        if (event) {
+            event.stopPropagation();
+        }
         const notebookContainer = document.getElementsByClassName("notebook-container")[0];
         if (!isMouseInCheckBoxRef.current && !notebookContainer.classList.contains("mouse-moved")) {
-            navigate(`#${day};${task.id}${location.hash.split(";").length === 3 ? ";" + location.hash.split(";")[2] : ""}`);
+            navigate(`#${day};${task.id}${location.hash.split(";").length === 3 ? ";" + location.hash.split(";")[2] : ""}`, { replace: true });
+        }
+    }
+
+    const handleKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            handleTaskClick()
         }
     }
 
     return (
         task?.id
-            ? <div className={`task ${task.isDone ? "done" : ""}`} id={"task-" + task.id} onClick={handleTaskClick} {...props} >
+            ? <div className={`task ${task.isDone ? "done" : ""}`} id={"task-" + task.id} onClick={handleTaskClick} onKeyDown={handleKeyDown} tabIndex={0} {...props} >
                 <CheckBox id={"task-cb-" + task.id} ref={taskCheckboxRef} onChange={() => { checkTask(day, task, taskIndex) }} checked={task.isDone} onMouseEnter={() => isMouseInCheckBoxRef.current = true} onMouseLeave={() => isMouseInCheckBoxRef.current = false} />
                 <div className="task-title">
                     <h4>
@@ -67,7 +75,6 @@ export default function Task({ day, task, taskIndex, userHomeworks, ...props })
                     </h4>
                     {task.addDate && <span className="add-date">Donné le {(new Date(task.addDate)).toLocaleDateString()}</span>}
                     {task.isInterrogation && <span className="interrogation-alert">évaluation</span>}
-
                 </div>
             </div>
             : <ContentLoader