@capytale/meta-player 0.8.3 → 0.9.0

package/src/features/navbar/navbarSlice.ts

@@ -1,79 +1,79 @@
-import type { PayloadAction } from "@reduxjs/toolkit";
-import { createAppSlice } from "../../app/createAppSlice";
-import { Callback, useFileUpload } from "use-file-upload";
-export type QuickAction =
-  | {
-      type: "action";
-      title: string;
-      icon: string;
-      action: () => void;
-    }
-  | {
-      type: "file-upload";
-      accept?: string;
-      title: string;
-      icon: string;
-      action: (file: {
-        source: URL;
-        name: string;
-        size: number;
-        file: File;
-      }) => void;
-    };
-
-export function usePerformQuickAction() {
-  const [_, selectFile] = useFileUpload();
-  return (action: QuickAction) => {
-    if (action.type === "action") {
-      action.action();
-    } else if (action.type === "file-upload") {
-      selectFile(
-        { accept: action.accept, multiple: false },
-        action.action as Callback,
-      );
-    }
-  };
-}
-
-export interface NavbarState {
-  quickActions: QuickAction[];
-  sidebarActions: QuickAction[];
-}
-
-const initialState: NavbarState = {
-  quickActions: [],
-  sidebarActions: [],
-};
-
-// If you are not using async thunks you can use the standalone `createSlice`.
-export const navbarSlice = createAppSlice({
-  name: "navbar",
-  // `createSlice` will infer the state type from the `initialState` argument
-  initialState,
-  // The `reducers` field lets us define reducers and generate associated actions
-  reducers: (create) => ({
-    setQuickActions: create.reducer(
-      (state, action: PayloadAction<QuickAction[]>) => {
-        state.quickActions = action.payload;
-      },
-    ),
-    setSidebarActions: create.reducer(
-      (state, action: PayloadAction<QuickAction[]>) => {
-        state.sidebarActions = action.payload;
-      },
-    ),
-  }),
-  // You can define your selectors here. These selectors receive the slice
-  // state as their first argument.
-  selectors: {
-    selectQuickActions: (navbar) => navbar.quickActions,
-    selectSidebarActions: (navbar) => navbar.sidebarActions,
-  },
-});
-
-// Action creators are generated for each case reducer function.
-export const { setQuickActions, setSidebarActions } = navbarSlice.actions;
-
-// Selectors returned by `slice.selectors` take the root state as their first argument.
-export const { selectQuickActions, selectSidebarActions } =
-  navbarSlice.selectors;
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { createAppSlice } from "../../app/createAppSlice";
+import { Callback, useFileUpload } from "use-file-upload";
+export type QuickAction =
+  | {
+      type: "action";
+      title: string;
+      icon: string;
+      action: () => void;
+    }
+  | {
+      type: "file-upload";
+      accept?: string;
+      title: string;
+      icon: string;
+      action: (file: {
+        source: URL;
+        name: string;
+        size: number;
+        file: File;
+      }) => void;
+    };
+
+export function usePerformQuickAction() {
+  const [_, selectFile] = useFileUpload();
+  return (action: QuickAction) => {
+    if (action.type === "action") {
+      action.action();
+    } else if (action.type === "file-upload") {
+      selectFile(
+        { accept: action.accept, multiple: false },
+        action.action as Callback,
+      );
+    }
+  };
+}
+
+export interface NavbarState {
+  quickActions: QuickAction[];
+  sidebarActions: QuickAction[];
+}
+
+const initialState: NavbarState = {
+  quickActions: [],
+  sidebarActions: [],
+};
+
+// If you are not using async thunks you can use the standalone `createSlice`.
+export const navbarSlice = createAppSlice({
+  name: "navbar",
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState,
+  // The `reducers` field lets us define reducers and generate associated actions
+  reducers: (create) => ({
+    setQuickActions: create.reducer(
+      (state, action: PayloadAction<QuickAction[]>) => {
+        state.quickActions = action.payload;
+      },
+    ),
+    setSidebarActions: create.reducer(
+      (state, action: PayloadAction<QuickAction[]>) => {
+        state.sidebarActions = action.payload;
+      },
+    ),
+  }),
+  // You can define your selectors here. These selectors receive the slice
+  // state as their first argument.
+  selectors: {
+    selectQuickActions: (navbar) => navbar.quickActions,
+    selectSidebarActions: (navbar) => navbar.sidebarActions,
+  },
+});
+
+// Action creators are generated for each case reducer function.
+export const { setQuickActions, setSidebarActions } = navbarSlice.actions;
+
+// Selectors returned by `slice.selectors` take the root state as their first argument.
+export const { selectQuickActions, selectSidebarActions } =
+  navbarSlice.selectors;

package/src/features/navbar/review-navbar/GradingNav.tsx

@@ -1,128 +1,128 @@
-import { useState, useEffect, useMemo, useCallback } from "react";
-import evalApi from "@capytale/activity.js/backend/capytale/evaluation";
-import { Dropdown } from "primereact/dropdown";
-
-import { useAppSelector } from "../../../app/hooks";
-import {
-  selectActivityInfo,
-  selectActivityNid,
-  selectMode,
-  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 activityInfo = useAppSelector(selectActivityInfo);
-  const [studentList, setStudentList] = useState<SaInfo[]>([]);
-  const nid = useAppSelector(selectNid) as number;
-  const mode = useAppSelector(selectMode);
-  const activityNid = useAppSelector(selectActivityNid) as number;
-  useEffect(() => {
-    evalApi.listSa(activityNid).then((j) => {
-      setStudentList(j);
-    });
-  }, []);
-
-  const goToStudent = useCallback(
-    (snid: string | number) => {
-      const redir = new URL(window.location.href);
-      redir.searchParams.set("id", snid.toString());
-      redir.searchParams.set("mode", mode);
-      location.href = redir.toString();
-    },
-    [mode],
-  );
-
-  const handlePrev = useCallback(() => {
-    if (studentList == null) return;
-    const i = studentList.findIndex((el) => (el.nid as number) == nid);
-    if (i <= 0) return;
-    goToStudent(studentList[i - 1].nid);
-  }, [studentList, nid, goToStudent]);
-
-  const handleNext = useCallback(() => {
-    if (studentList == null) return;
-    const i = studentList.findIndex((el) => el.nid == nid);
-    if (i < 0 || i >= studentList.length - 1) return;
-    goToStudent(studentList[i + 1].nid);
-  }, [studentList, nid, goToStudent]);
-
-  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 <span>{studentNameFromInfo(activityInfo.studentInfo)}</span>;
-  }
-
-  const firstNid = studentList[0].nid as number;
-  const lastNid = studentList[Object.keys(studentList).length - 1]
-    .nid as number;
-
-  return (
-    <div className="p-inputgroup flex-1">
-      <Button
-        aria-label="Passer à la copie précédente"
-        size="small"
-        icon="pi pi-chevron-left"
-        severity="secondary"
-        onClick={handlePrev}
-        tooltip="Copie précédente"
-        tooltipOptions={{
-          position: "left",
-        }}
-        disabled={nid == firstNid}
-        outlined
-      />
-      <Dropdown
-        aria-label="Sélectionner une copie"
-        value={nid}
-        options={options}
-        filter
-        onChange={(e) => {
-          goToStudent(e.value);
-        }}
-      />
-      <Button
-        aria-label="Passer à la copie suivante"
-        size="small"
-        icon="pi pi-chevron-right"
-        severity="secondary"
-        onClick={handleNext}
-        tooltip="Copie suivante"
-        tooltipOptions={{
-          position: "right",
-        }}
-        disabled={nid == lastNid}
-        outlined
-      />
-    </div>
-  );
-};
-
-export default GradingNav;
+import { useState, useEffect, useMemo, useCallback } from "react";
+import evalApi from "@capytale/activity.js/backend/capytale/evaluation";
+import { Dropdown } from "primereact/dropdown";
+
+import { useAppSelector } from "../../../app/hooks";
+import {
+  selectActivityInfo,
+  selectActivityNid,
+  selectMode,
+  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 activityInfo = useAppSelector(selectActivityInfo);
+  const [studentList, setStudentList] = useState<SaInfo[]>([]);
+  const nid = useAppSelector(selectNid) as number;
+  const mode = useAppSelector(selectMode);
+  const activityNid = useAppSelector(selectActivityNid) as number;
+  useEffect(() => {
+    evalApi.listSa(activityNid).then((j) => {
+      setStudentList(j);
+    });
+  }, []);
+
+  const goToStudent = useCallback(
+    (snid: string | number) => {
+      const redir = new URL(window.location.href);
+      redir.searchParams.set("id", snid.toString());
+      redir.searchParams.set("mode", mode);
+      location.href = redir.toString();
+    },
+    [mode],
+  );
+
+  const handlePrev = useCallback(() => {
+    if (studentList == null) return;
+    const i = studentList.findIndex((el) => (el.nid as number) == nid);
+    if (i <= 0) return;
+    goToStudent(studentList[i - 1].nid);
+  }, [studentList, nid, goToStudent]);
+
+  const handleNext = useCallback(() => {
+    if (studentList == null) return;
+    const i = studentList.findIndex((el) => el.nid == nid);
+    if (i < 0 || i >= studentList.length - 1) return;
+    goToStudent(studentList[i + 1].nid);
+  }, [studentList, nid, goToStudent]);
+
+  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 <span>{studentNameFromInfo(activityInfo.studentInfo)}</span>;
+  }
+
+  const firstNid = studentList[0].nid as number;
+  const lastNid = studentList[Object.keys(studentList).length - 1]
+    .nid as number;
+
+  return (
+    <div className="p-inputgroup flex-1">
+      <Button
+        aria-label="Passer à la copie précédente"
+        size="small"
+        icon="pi pi-chevron-left"
+        severity="secondary"
+        onClick={handlePrev}
+        tooltip="Copie précédente"
+        tooltipOptions={{
+          position: "left",
+        }}
+        disabled={nid == firstNid}
+        outlined
+      />
+      <Dropdown
+        aria-label="Sélectionner une copie"
+        value={nid}
+        options={options}
+        filter
+        onChange={(e) => {
+          goToStudent(e.value);
+        }}
+      />
+      <Button
+        aria-label="Passer à la copie suivante"
+        size="small"
+        icon="pi pi-chevron-right"
+        severity="secondary"
+        onClick={handleNext}
+        tooltip="Copie suivante"
+        tooltipOptions={{
+          position: "right",
+        }}
+        disabled={nid == lastNid}
+        outlined
+      />
+    </div>
+  );
+};
+
+export default GradingNav;

package/src/features/navbar/review-navbar/index.tsx

@@ -1,18 +1,18 @@
-import { FC } from "react";
-import GradingNav from "./GradingNav";
-
-import styles from "./style.module.scss";
-
-const ReviewNavbar: FC = () => {
-  return (
-    <div className={styles.reviewNavbar}>
-      <div aria-label="Indicateur de mode correction">Mode correction</div>
-      <div>
-        <GradingNav />
-      </div>
-      <div></div>
-    </div>
-  );
-};
-
-export default ReviewNavbar;
+import { FC } from "react";
+import GradingNav from "./GradingNav";
+
+import styles from "./style.module.scss";
+
+const ReviewNavbar: FC = () => {
+  return (
+    <div className={styles.reviewNavbar}>
+      <div aria-label="Indicateur de mode correction">Mode correction</div>
+      <div>
+        <GradingNav />
+      </div>
+      <div></div>
+    </div>
+  );
+};
+
+export default ReviewNavbar;

package/src/features/navbar/review-navbar/style.module.scss

@@ -1,22 +1,22 @@
-.reviewNavbar {
-  color-scheme: dark;
-  background-color: var(--surface-500);
-  --review-navbar-text-color: rgba(255, 255, 255, 0.95);
-  color: var(--review-navbar-text-color);
-  padding: 4px 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  & :global(.p-button-secondary) {
-    border-color: var(--review-navbar-text-color);
-    color: var(--review-navbar-text-color);
-  }
-  & :global(.p-dropdown) {
-    border-color: var(--review-navbar-text-color);
-    border-left-width: 0;
-    border-right-width: 0;
-  }
-  :global(.dark-theme) & {
-    background-color: var(--surface-100);
-  }
-}
+.reviewNavbar {
+  color-scheme: dark;
+  background-color: var(--surface-500);
+  --review-navbar-text-color: rgba(255, 255, 255, 0.95);
+  color: var(--review-navbar-text-color);
+  padding: 4px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  & :global(.p-button-secondary) {
+    border-color: var(--review-navbar-text-color);
+    color: var(--review-navbar-text-color);
+  }
+  & :global(.p-dropdown) {
+    border-color: var(--review-navbar-text-color);
+    border-left-width: 0;
+    border-right-width: 0;
+  }
+  :global(.dark-theme) & {
+    background-color: var(--surface-100);
+  }
+}

package/src/features/navbar/sidebars/ActivitySidebarActions.tsx

@@ -1,57 +1,57 @@
-import { FC, useEffect } from "react";
-import { useAppDispatch, useAppSelector } from "../../../app/hooks";
-import {
-  QuickAction,
-  selectSidebarActions,
-  setSidebarActions,
-  usePerformQuickAction,
-} from "../navbarSlice";
-import { Button } from "primereact/button";
-import settings from "../../../settings";
-
-const ActivitySidebarActions: FC<{}> = () => {
-  const sidebarActions = useAppSelector(selectSidebarActions);
-  const performQuickAction = usePerformQuickAction();
-  return (
-    <>
-      {sidebarActions.map((action) => (
-        <Button
-          aria-label={action.title}
-          key={action.title}
-          severity="secondary"
-          size="small"
-          icon={action.icon}
-          onClick={() => {
-            performQuickAction(action);
-          }}
-          outlined
-          label={action.title}
-          tooltipOptions={{
-            position: "left",
-            showDelay: settings.TOOLTIP_SHOW_DELAY,
-          }}
-        />
-      ))}
-    </>
-  );
-};
-
-type ActivitySidebarActionsSetterProps = {
-  actions: QuickAction[];
-};
-
-export const ActivitySidebarActionsSetter: FC<
-  ActivitySidebarActionsSetterProps
-> = (props) => {
-  const dispatch = useAppDispatch();
-  useEffect(() => {
-    dispatch(setSidebarActions(props.actions));
-    return () => {
-      dispatch(setSidebarActions([]));
-    };
-  }, [props.actions]);
-
-  return <></>;
-};
-
-export default ActivitySidebarActions;
+import { FC, useEffect } from "react";
+import { useAppDispatch, useAppSelector } from "../../../app/hooks";
+import {
+  QuickAction,
+  selectSidebarActions,
+  setSidebarActions,
+  usePerformQuickAction,
+} from "../navbarSlice";
+import { Button } from "primereact/button";
+import settings from "../../../settings";
+
+const ActivitySidebarActions: FC<{}> = () => {
+  const sidebarActions = useAppSelector(selectSidebarActions);
+  const performQuickAction = usePerformQuickAction();
+  return (
+    <>
+      {sidebarActions.map((action) => (
+        <Button
+          aria-label={action.title}
+          key={action.title}
+          severity="secondary"
+          size="small"
+          icon={action.icon}
+          onClick={() => {
+            performQuickAction(action);
+          }}
+          outlined
+          label={action.title}
+          tooltipOptions={{
+            position: "left",
+            showDelay: settings.TOOLTIP_SHOW_DELAY,
+          }}
+        />
+      ))}
+    </>
+  );
+};
+
+type ActivitySidebarActionsSetterProps = {
+  actions: QuickAction[];
+};
+
+export const ActivitySidebarActionsSetter: FC<
+  ActivitySidebarActionsSetterProps
+> = (props) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setSidebarActions(props.actions));
+    return () => {
+      dispatch(setSidebarActions([]));
+    };
+  }, [props.actions]);
+
+  return <></>;
+};
+
+export default ActivitySidebarActions;