Skip to content

Commit 9afda94

Browse files
TruitesecheTruiteseche
committed
Merge branch 'working' into dev-channel
2 parents 969ad6f + 1a3fa07 commit 9afda94

File tree

11 files changed

+98
-40
lines changed

11 files changed

+98
-40
lines changed

‎src/App.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1849,7 +1849,7 @@ export default function App() {
18491849
path: "dashboard",
18501850
},
18511851
{
1852-
element: <Dashboard fetchUserGrades={fetchUserGrades} grades={grades} activeAccount={activeAccount} isLoggedIn={isLoggedIn} useUserData={useUserData} sortGrades={sortGrades} />,
1852+
element: <Dashboard fetchUserGrades={fetchUserGrades} grades={grades} fetchHomeworks={fetchHomeworks} activeAccount={activeAccount} isLoggedIn={isLoggedIn} useUserData={useUserData} sortGrades={sortGrades} />,
18531853
path: ":userId/dashboard"
18541854
},
18551855
{

‎src/components/app/Dashboard/Dashboard.jsx

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,27 @@ import {
1010
WindowContent
1111
} from "../../generic/Window";
1212
import LastGrades from "./LastGrades";
13+
import Notebook from "../Homeworks/Notebook";
14+
import BottomSheet from "../../generic/PopUps/BottomSheet";
15+
import EncodedHTMLDiv from "../../generic/CustomDivs/EncodedHTMLDiv";
1316

1417
import "./Dashboard.css";
1518

16-
export default function Dashboard({ fetchUserGrades, grades, activeAccount, isLoggedIn, useUserData, sortGrades }) {
19+
export default function Dashboard({ fetchUserGrades, grades, fetchHomeworks, activeAccount, isLoggedIn, useUserData, sortGrades }) {
1720
const navigate = useNavigate();
1821
const userData = useUserData();
1922

23+
const [bottomSheetSession, setBottomSheetSession] = useState({})
2024
const sortedGrades = userData.get("sortedGrades");
25+
const homeworks = useUserData("sortedHomeworks");
26+
27+
const hashParameters = location.hash.split(";")
2128

2229
// Behavior
2330
useEffect(() => {
2431
document.title = "Accueil • Ecole Directe Plus";
2532
}, [])
26-
33+
2734
useEffect(() => {
2835
const controller = new AbortController();
2936
if (isLoggedIn) {
@@ -39,6 +46,27 @@ export default function Dashboard({ fetchUserGrades, grades, activeAccount, isLo
3946
}
4047
}, [grades, isLoggedIn, activeAccount]);
4148

49+
useEffect(() => {
50+
const controller = new AbortController();
51+
if (isLoggedIn) {
52+
if (homeworks.get() === undefined) {
53+
fetchHomeworks(controller);
54+
}
55+
}
56+
57+
return () => {
58+
controller.abort();
59+
}
60+
}, [homeworks.get(), isLoggedIn, activeAccount]);
61+
62+
useEffect(() => {
63+
if (hashParameters.length > 2 && !bottomSheetSession.id) {
64+
navigate(`${hashParameters[0]};${hashParameters[1]}`)
65+
} else if (hashParameters.length < 3 && bottomSheetSession.id) {
66+
setBottomSheetSession({})
67+
}
68+
}, [location.hash])
69+
4270
// JSX DISCODO
4371
return (
4472
<div id="dashboard">
@@ -55,23 +83,23 @@ export default function Dashboard({ fetchUserGrades, grades, activeAccount, isLo
5583
5684
</WindowContent>
5785
</Window> */}
58-
86+
5987
<Window WIP={true}>
6088
<WindowHeader onClick={() => navigate("../homeworks")}>
6189
<h2>Prochains contrôles</h2>
6290
</WindowHeader>
6391
<WindowContent>
64-
92+
6593
</WindowContent>
6694
</Window>
6795
</WindowsLayout>
6896

69-
<Window WIP={true} growthFactor={1.5}>
97+
<Window growthFactor={1.7}>
7098
<WindowHeader onClick={() => navigate("../homeworks")}>
7199
<h2>Cahier de texte</h2>
72100
</WindowHeader>
73101
<WindowContent>
74-
102+
<Notebook setBottomSheetSession={setBottomSheetSession} hideDateController={true} />
75103
</WindowContent>
76104
</Window>
77105
</WindowsLayout>
@@ -81,12 +109,15 @@ export default function Dashboard({ fetchUserGrades, grades, activeAccount, isLo
81109
<h2>Emploi du temps</h2>
82110
</WindowHeader>
83111
<WindowContent>
84-
112+
85113
</WindowContent>
86114
</Window>
87115
</WindowsLayout>
88116
</WindowsLayout>
89117
</WindowsContainer>
118+
{bottomSheetSession.id && <BottomSheet heading="Contenu de séance" onClose={() => { navigate(`#${bottomSheetSession.day};${bottomSheetSession.id}`); setBottomSheetSession({}) }}>
119+
<EncodedHTMLDiv>{bottomSheetSession.content}</EncodedHTMLDiv>
120+
</BottomSheet>}
90121
</div>
91122
)
92123
}

‎src/components/app/Header/AccountSelector.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export default function AccountSelector({ accountsList, activeAccount, setActive
6666

6767
const handleKeyDown = (event) => {
6868
if (event.key === "Escape") {
69-
setIsOpen(false);
69+
setIsOpen(false);
7070
}
7171
}
7272

‎src/components/app/Homeworks/DetailedTask.css

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
.detailed-task {
22
display: flex;
33
flex-direction: column;
4-
gap: 5px
4+
gap: 5px;
5+
flex-shrink: 0;
56
}
67

78
.task-header {
@@ -18,8 +19,8 @@
1819
.task-header .check-box input[type="checkbox"] {
1920
border-color: rgba(var(--text-color-alt), .6);
2021
}
21-
.task-header .check-box:is(:hover, :focus-visible) input[type="checkbox"]:not(:checked) {
22-
border-color: rgba(var(--text-color-alt), 1);
22+
.task-header .check-box:is(:hover, :focus-within) input[type="checkbox"]:not(:checked) {
23+
border-color: rgba(var(--text-color-alt), 1) !important;
2324
}
2425
.task-header .check-box input[type="checkbox"]:checked {
2526
background-color: rgba(var(--text-color-alt), .1);
@@ -70,6 +71,9 @@
7071
}
7172

7273
/* change task content items appearance */
74+
.detailed-task .task-content a {
75+
word-break: break-word;
76+
}
7377
.detailed-task .task-content a:is(:hover, :focus-visible) {
7478
opacity: .8;
7579
}
@@ -100,7 +104,7 @@
100104

101105
.task-footer .task-footer-button.disabled {
102106
pointer-events: none;
103-
opacity: 0.7;
107+
filter: brightness(0.6);
104108
}
105109
.task-footer .task-footer-button:is(:hover, :focus-visible) {
106110
background-color: rgb(var(--background-color-3));

‎src/components/app/Homeworks/DetailedTask.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import EncodedHTMLDiv from "../../generic/CustomDivs/EncodedHTMLDiv"
44
import CheckBox from "../../generic/UserInputs/CheckBox"
55
import { AppContext } from "../../../App"
66
import { applyZoom } from "../../../utils/zoom";
7-
import { Link, useNavigate } from "react-router-dom"
7+
import { Link } from "react-router-dom"
88

99
import "./DetailedTask.css"
1010
import PatchNotesIcon from "../../graphics/PatchNotesIcon"
@@ -46,7 +46,7 @@ export default function DetailedTask({ task, userHomeworks, day, taskIndex, setB
4646
return () => {
4747
controller.abort();
4848
}
49-
}, [])
49+
}, [day, task]);
5050

5151
function completedTaskAnimation() {
5252
const bounds = taskCheckboxRef.current.getBoundingClientRect();
@@ -98,7 +98,7 @@ export default function DetailedTask({ task, userHomeworks, day, taskIndex, setB
9898
id: task.id,
9999
content: task.sessionContent,
100100
})
101-
}} to={`#${day};${task.id};s`} className={`task-footer-button ${supposedNoSessionContent.includes(task.sessionContent) ? "disabled" : ""}`}><PatchNotesIcon className="session-content-icon" />Contenu de séance</Link>
101+
}} 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>
102102
<div className={`task-footer-button ${task.sessionContentFiles.length === 0 ? "disabled" : ""}`}><DownloadIcon className="download-icon" />Fichiers</div>
103103
</div>
104104
</div>

‎src/components/app/Homeworks/Homeworks.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

22
import { useContext, useEffect, useState } from "react";
3+
import { useNavigate, useLocation } from "react-router-dom";
34

45
import {
56
WindowsContainer,
@@ -11,12 +12,11 @@ import {
1112

1213
import { AppContext } from "../../../App";
1314
import Notebook from "./Notebook";
14-
import { useNavigate, useLocation } from "react-router-dom";
15-
16-
import "./Homeworks.css";
1715
import BottomSheet from "../../generic/PopUps/BottomSheet";
1816
import EncodedHTMLDiv from "../../generic/CustomDivs/EncodedHTMLDiv";
1917

18+
import "./Homeworks.css";
19+
2020

2121
export default function Homeworks({ isLoggedIn, activeAccount, fetchHomeworks }) {
2222
// States
@@ -69,7 +69,7 @@ export default function Homeworks({ isLoggedIn, activeAccount, fetchHomeworks })
6969

7070
</WindowContent>
7171
</Window>
72-
<Window growthFactor={1.2}>
72+
<Window growthFactor={1.2} WIP={true}>
7373
<WindowHeader>
7474
<h2>Calendrier</h2>
7575
</WindowHeader>

‎src/components/app/Homeworks/Notebook.css

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,23 +88,28 @@
8888
}
8989

9090
.notebook-day {
91-
min-width: min(300px, 100%);
91+
flex-shrink: 0;
92+
width: min(300px, 100%);
9293
max-height: 100%;
9394
background: rgb(var(--background-color-2));
9495
border-radius: 25px;
9596
box-shadow: var(--box-shadow-element);
9697
filter: brightness(.9);
9798
opacity: .8;
9899
scroll-snap-align: center;
99-
cursor: pointer;
100+
cursor: grab;
100101
transition: .2s;
101102

102103
display: flex;
103104
flex-flow: column nowrap;
104105
}
105106

107+
.notebook-day:active {
108+
cursor: grabbing;
109+
}
110+
106111
.notebook-day.selected {
107-
min-width: min(600px, 100%);
112+
width: min(600px, 100%);
108113
filter: brightness(1.05);
109114
opacity: 1;
110115
}
@@ -123,6 +128,10 @@
123128
background: rgb(var(--background-color-3));
124129
}
125130

131+
#dashboard .notebook-day .notebook-day-header {
132+
height: 3em;
133+
}
134+
126135
.notebook-day .notebook-day-header .progress-circle {
127136
height: 100%;
128137
margin: 5px;
@@ -159,6 +168,7 @@
159168
background-color: rgb(var(--border-color-contrast));
160169
border: none;
161170
transform: translateY(-1.5px);
171+
flex-shrink: 0;
162172
}
163173
.detailed-task-separator {
164174
transform: none;

‎src/components/app/Homeworks/Notebook.jsx

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { applyZoom } from "../../../utils/zoom";
1212
import DetailedTask from "./DetailedTask";
1313
import { canScroll } from "../../../utils/DOM";
1414

15-
export default function Notebook({ setBottomSheetSession }) {
15+
export default function Notebook({ setBottomSheetSession, hideDateController = false }) {
1616
const { actualDisplayTheme, useUserData, useUserSettings } = useContext(AppContext);
1717
const settings = useUserSettings();
1818
const userHomeworks = useUserData("sortedHomeworks");
@@ -60,7 +60,7 @@ export default function Notebook({ setBottomSheetSession }) {
6060
}
6161

6262
function navigateToDate(newDate, cleanup = false) {
63-
navigate(`#${newDate};${(cleanup && location.hash.split(";")[1]) || ""}${location.hash.split(";").length === 3 ? ";" + location.hash.split(";")[2] : ""}`);
63+
navigate(`#${newDate};${(cleanup && location.hash.split(";")[1]) || ""}${location.hash.split(";").length === 3 ? ";" + location.hash.split(";")[2] : ""}`, { replace: true });
6464
}
6565

6666
function nearestHomeworkDate(dir = 1, date) {
@@ -105,10 +105,10 @@ export default function Notebook({ setBottomSheetSession }) {
105105
if (!oldSelectedElementBounds) {
106106
return;
107107
}
108-
108+
109109
const bounds = element.getBoundingClientRect();
110110
const containerBounds = notebookContainerRef.current.getBoundingClientRect();
111-
notebookContainerRef.current.scrollTo(bounds.x - containerBounds.x + Math.min(600, containerBounds.width)/2 * (oldSelectedElementBounds.x >= bounds.x) + notebookContainerRef.current.scrollLeft - containerBounds.width/2, 0)
111+
notebookContainerRef.current.scrollTo(bounds.x - containerBounds.x + Math.min(600, containerBounds.width) / 2 * (oldSelectedElementBounds.x >= bounds.x) + notebookContainerRef.current.scrollLeft - containerBounds.width / 2, 0)
112112

113113
}
114114

@@ -280,17 +280,20 @@ export default function Notebook({ setBottomSheetSession }) {
280280
}, [isMouseOverTasksContainer, isMouseIntoScrollableContainer, tasksContainersRefs.current])
281281

282282
return <>
283-
<div className="date-selector">
284-
<span onClick={() => navigateToDate(nearestHomeworkDate(-1, selectedDate))} tabIndex={0} ><DropDownArrow /></span>
285-
<time dateTime={selectedDate || null} className="selected-date">{(new Date(selectedDate)).toLocaleDateString() == "Invalid Date" ? "AAAA-MM-JJ" : (new Date(selectedDate)).toLocaleDateString()}</time>
286-
<span onClick={() => navigateToDate(nearestHomeworkDate(1, selectedDate))} tabIndex={0} ><DropDownArrow /></span>
287-
</div>
283+
{!hideDateController
284+
? <div className="date-selector">
285+
<span onClick={() => navigateToDate(nearestHomeworkDate(-1, selectedDate))} tabIndex={0} ><DropDownArrow /></span>
286+
<time dateTime={selectedDate || null} className="selected-date">{(new Date(selectedDate)).toLocaleDateString() == "Invalid Date" ? "AAAA-MM-JJ" : (new Date(selectedDate)).toLocaleDateString()}</time>
287+
<span onClick={() => navigateToDate(nearestHomeworkDate(1, selectedDate))} tabIndex={0} ><DropDownArrow /></span>
288+
</div>
289+
: null
290+
}
288291
<div className={`notebook-container ${hasMouseMoved ? "mouse-moved" : ""}`} ref={notebookContainerRef}>
289292
{homeworks
290293
? Object.keys(homeworks).sort().map((el, index) => {
291294
const progression = homeworks[el].filter((task) => task.isDone).length / homeworks[el].length
292295
const elDate = new Date(el)
293-
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}>
296+
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}>
294297
<div className="notebook-day-header">
295298
<svg className={`progress-circle ${progression === 1 ? "filled" : ""}`} viewBox="0 0 100 100" >
296299
<circle cx="50" cy="50" r="40" />

‎src/components/app/Homeworks/Task.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@
55
border-radius: 10px;
66
transition: .1s;
77
text-decoration: none;
8+
flex-shrink: 0;
89
display: flex;
910
align-items: stretch;
1011
justify-content: space-between;
12+
outline: none;
1113
overflow: hidden;
1214
}
1315

@@ -37,6 +39,7 @@
3739
background-color: rgb(var(--background-color-3));
3840
border-right: 3px solid rgb(var(--background-color-3));;
3941
justify-content: center;
42+
flex-shrink: 0;
4043
}
4144

4245
.task .check-box :is(input, input:checked) {
@@ -61,7 +64,7 @@
6164
transition: .1s !important;
6265
}
6366

64-
.task .check-box:is(:hover, :focus-visible) input {
67+
.task .check-box:is(:hover, :focus-within) input {
6568
opacity: .25;
6669
}
6770

‎src/components/app/Homeworks/Task.jsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,16 +49,24 @@ export default function Task({ day, task, taskIndex, userHomeworks, ...props })
4949
}
5050

5151
function handleTaskClick(event) {
52-
event.stopPropagation()
52+
if (event) {
53+
event.stopPropagation();
54+
}
5355
const notebookContainer = document.getElementsByClassName("notebook-container")[0];
5456
if (!isMouseInCheckBoxRef.current && !notebookContainer.classList.contains("mouse-moved")) {
55-
navigate(`#${day};${task.id}${location.hash.split(";").length === 3 ? ";" + location.hash.split(";")[2] : ""}`);
57+
navigate(`#${day};${task.id}${location.hash.split(";").length === 3 ? ";" + location.hash.split(";")[2] : ""}`, { replace: true });
58+
}
59+
}
60+
61+
const handleKeyDown = (event) => {
62+
if (event.key === "Enter" || event.key === " ") {
63+
handleTaskClick()
5664
}
5765
}
5866

5967
return (
6068
task?.id
61-
? <div className={`task ${task.isDone ? "done" : ""}`} id={"task-" + task.id} onClick={handleTaskClick} {...props} >
69+
? <div className={`task ${task.isDone ? "done" : ""}`} id={"task-" + task.id} onClick={handleTaskClick} onKeyDown={handleKeyDown} tabIndex={0} {...props} >
6270
<CheckBox id={"task-cb-" + task.id} ref={taskCheckboxRef} onChange={() => { checkTask(day, task, taskIndex) }} checked={task.isDone} onMouseEnter={() => isMouseInCheckBoxRef.current = true} onMouseLeave={() => isMouseInCheckBoxRef.current = false} />
6371
<div className="task-title">
6472
<h4>
@@ -67,7 +75,6 @@ export default function Task({ day, task, taskIndex, userHomeworks, ...props })
6775
</h4>
6876
{task.addDate && <span className="add-date">Donné le {(new Date(task.addDate)).toLocaleDateString()}</span>}
6977
{task.isInterrogation && <span className="interrogation-alert">évaluation</span>}
70-
7178
</div>
7279
</div>
7380
: <ContentLoader

0 commit comments

Comments
 (0)