Navigation entre élèves mode correction

src/features/activityData/activityDataSlice.ts

@@ -33,6 +33,7 @@ interface ActivityJSData {
   helpUrl: string;
   code: string;
   nid: number;
+  activityNid: number;
   accessTrMode: string;
   accessTimerange: TimeRange | null;
   studentInfo: StudentInfo | null;
@@ -64,6 +65,7 @@ const initialState: ActivityDataState = {
   helpUrl: "",
   code: "",
   nid: 0,
+  activityNid: 0,
   accessTrMode: "",
   accessTimerange: null,
   studentInfo: {
@@ -111,6 +113,8 @@ export const activityDataSlice = createAppSlice({
         state.friendlyType = action.payload.friendlyType;
         state.comments = action.payload.comments;
         state.grading = action.payload.grading;
+        state.nid = action.payload.nid;
+        state.activityNid = action.payload.activityNid;
       },
     ),
     setPlayerSettings: create.reducer(
@@ -165,6 +169,8 @@ export const activityDataSlice = createAppSlice({
     selectHasGradingOrComments: (data) => !!(data.grading || data.comments),
     selectSaveState: (data) => data.saveState,
     selectReturnUrl: (data) => data.returnUrl,
+    selectNid: (data) => data.nid,
+    selectActivityNid: (data) => data.activityNid,
     selectIcon: (data) => data.icon,
 
     selectCanChoosePedagoLayout: (data) =>
@@ -201,6 +207,8 @@ export const {
   selectHasGradingOrComments,
   selectSaveState,
   selectReturnUrl,
+  selectNid,
+  selectActivityNid,
   selectIcon,
 
   selectCanChoosePedagoLayout,

src/features/activityJS/ActivityJSProvider.tsx

@@ -41,6 +41,7 @@ export const ActivityJSProvider: FC<ActivityJSProviderProps> = (props) => {
         returnUrl: data.returnUrl,
         helpUrl: data.type.helpUrl,
         nid: data.activityBunch.mainNode.nid,
+        activityNid: data.activityBunch.activityNode.nid,
         code: data.activityBunch.code.value || "",
         accessTrMode: data.activityBunch.access_tr_mode.value || "",
         accessTimerange: data.activityBunch.access_timerange.value,

src/features/navbar/ActivityInfo.tsx

 import { useAppSelector } from "../../app/hooks";
 import {
-  StudentInfo,
   selectActivityInfo,
   selectIcon,
+  selectMode,
 } from "../activityData/activityDataSlice";
+import GradingNav from "./GradingNav";
+import { studentNameFromInfo } from "./student-utils";
 import styles from "./style.module.scss";
 
-function studentNameFromInfo(studentInfo: StudentInfo | null) {
-  if (!studentInfo || (!studentInfo.firstName && !studentInfo.lastName)) {
-    return null;
-  }
-  if (studentInfo.class) {
-    return `${studentInfo.firstName} ${studentInfo.lastName} (${studentInfo.class})`;
-  }
-  return `${studentInfo.firstName} ${studentInfo.lastName}`;
-}
-
 const ActivityInfo: React.FC = () => {
   const icon = useAppSelector(selectIcon);
+  const mode = useAppSelector(selectMode);
   const activityInfo = useAppSelector(selectActivityInfo);
   const studentName = studentNameFromInfo(activityInfo.studentInfo);
   return (
     <div className={styles.activityInfo}>
       <div className={styles.activityInfoText}>
         <div className={styles.activityInfoTitle}>{activityInfo.title}</div>
-        {studentName && (
+        {mode === "review" && <GradingNav />}
+        {mode !== "review" && studentName && (
           <div className={styles.activityInfoStudentName}>{studentName}</div>
         )}
       </div>

src/features/navbar/GradingNav.tsx

+import { useState, useEffect, useMemo } from "react";
+import evalApi from "@capytale/activity.js/backend/capytale/evaluation";
+import { Dropdown } from "primereact/dropdown";
+
+import { useAppSelector } from "../../app/hooks";
+import { selectActivityNid, selectNid } from "../activityData/activityDataSlice";
+import { studentNameFromInfo } from "./student-utils";
+
+import { SaInfo } from "@capytale/activity.js/activity/evaluation/evaluation";
+import { SelectItem, SelectItemOptionsType } from "primereact/selectitem";
+import { Button } from "primereact/button";
+
+const GradingNav: React.FC = () => {
+  const [studentList, setStudentList] = useState<SaInfo[]>([]);
+  const nid = useAppSelector(selectNid) as number;
+  const activityNid = useAppSelector(selectActivityNid) as number;
+  console.log("Le nid est : ", nid)
+  useEffect(() => {
+    evalApi.listSa(activityNid).then((j) => {
+      setStudentList(j);
+    });
+  }, []);
+
+  const handlePrev = () => {
+    if (studentList == null) return;
+    const i = studentList.findIndex(
+      // @ts-expect-error
+      (el) => (el.nid as number) == nid,
+    );
+    if (i <= 0) return;
+    const redir = new URL(window.location.href);
+    redir.searchParams.set("id", studentList[i - 1].nid);
+    location.href = redir.toString();
+  };
+  const handleNext = () => {
+    if (studentList == null) return;
+    const i = studentList.findIndex(
+      // @ts-expect-error
+      (el) => el.nid == nid,
+    );
+    if (i < 0 || i >= studentList.length - 1) return;
+    const redir = new URL(window.location.href);
+    redir.searchParams.set("id", studentList[i + 1].nid);
+    location.href = redir.toString();
+  };
+
+  function getWf(el: SaInfo) {
+    if (el.workflow == "100") return { icon: "pi pi-pencil", color: "blue" };
+    if (el.workflow == "200")
+      return { icon: "pi pi-envelope", color: "orange" };
+    if (el.workflow == "300")
+      return { icon: "pi pi-list-check", color: "green" };
+    throw new Error("Unknown workflow");
+  }
+
+  const options: SelectItemOptionsType = useMemo(() => {
+    return studentList.map((el) => {
+      const item: SelectItem = {
+        label:
+          studentNameFromInfo({
+            firstName: el.firstname,
+            lastName: el.lastname,
+            class: el.classe,
+          }) || undefined,
+        value: el.nid,
+        icon: getWf(el).icon,
+      };
+      return item;
+    });
+  }, [studentList]);
+
+  if (studentList.length === 0) {
+    return <Dropdown loading placeholder="Chargement..." />;
+  }
+
+  // @ts-expect-error
+  const firstNid = studentList[0].nid as number;
+  // @ts-expect-error
+  const lastNid = studentList[Object.keys(studentList).length - 1]
+    .nid as number;
+
+  return (
+    <div className="p-inputgroup flex-1">
+      {nid != firstNid && (
+        <Button
+          size="small"
+          icon="pi pi-chevron-left"
+          severity="secondary"
+          onClick={handlePrev}
+          tooltip="Copie précédente"
+          outlined
+        />
+      )}
+      <Dropdown
+        value={nid}
+        options={options}
+        filter
+        onChange={(e) => (window.location.href = "./?id=" + e.value)}
+      />
+      {nid != lastNid && (
+        <Button
+          size="small"
+          icon="pi pi-chevron-right"
+          severity="secondary"
+          onClick={handleNext}
+          tooltip="Copie suivante"
+          outlined
+        />
+      )}
+    </div>
+  );
+}
+
+export default GradingNav;
\ No newline at end of file

src/features/navbar/student-utils.ts

+import { StudentInfo } from "../activityData/activityDataSlice";
+
+export function studentNameFromInfo(studentInfo: StudentInfo | null) {
+  if (!studentInfo || (!studentInfo.firstName && !studentInfo.lastName)) {
+    return null;
+  }
+  if (studentInfo.class) {
+    return `${studentInfo.firstName} ${studentInfo.lastName} — ${studentInfo.class}`;
+  }
+  return `${studentInfo.firstName} ${studentInfo.lastName}`;
+}