@capytale/meta-player 0.0.1

package/src/features/activityJS/saverSlice.ts

@@ -0,0 +1,58 @@
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { createAppSlice } from "../../app/createAppSlice";
+
+type CallbackType = () => void | Promise<void>;
+
+export type SaveCallback = {
+  name: string;
+  callback: CallbackType;
+};
+
+export interface SaverState {
+  beforeSave: { [key: string]: CallbackType };
+  afterSave: { [key: string]: CallbackType };
+}
+
+const initialState: SaverState = {
+  beforeSave: {},
+  afterSave: {},
+};
+
+// If you are not using async thunks you can use the standalone `createSlice`.
+export const saverSlice = createAppSlice({
+  name: "saver",
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState,
+  // The `reducers` field lets us define reducers and generate associated actions
+  reducers: (create) => ({
+    // Use the `PayloadAction` type to declare the contents of `action.payload`
+    addBeforeSave: create.reducer(
+      (state, action: PayloadAction<SaveCallback>) => {
+        state.beforeSave[action.payload.name] = action.payload.callback;
+      },
+    ),
+    addAfterSave: create.reducer(
+      (state, action: PayloadAction<SaveCallback>) => {
+        state.afterSave[action.payload.name] = action.payload.callback;
+      },
+    ),
+    removeBeforeSave: create.reducer((state, action: PayloadAction<string>) => {
+      delete state.beforeSave[action.payload];
+    }),
+    removeAfterSave: create.reducer((state, action: PayloadAction<string>) => {
+      delete state.afterSave[action.payload];
+    }),
+  }),
+  // You can define your selectors here. These selectors receive the slice
+  // state as their first argument.
+  selectors: {
+    selectBeforeSave: (saver) => saver.beforeSave,
+    selectAfterSave: (saver) => saver.afterSave,
+  },
+});
+
+// Action creators are generated for each case reducer function.
+export const { addBeforeSave, removeBeforeSave, addAfterSave, removeAfterSave } = saverSlice.actions;
+
+// Selectors returned by `slice.selectors` take the root state as their first argument.
+export const { selectBeforeSave, selectAfterSave } = saverSlice.selectors;

package/src/features/layout/layoutSlice.ts

@@ -0,0 +1,76 @@
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { createAppSlice } from "../../app/createAppSlice";
+
+export type Orientation = "horizontal" | "vertical";
+
+type PedagoTab = "instructions" | "answerSheet";
+
+export interface LayoutState {
+  orientation: Orientation;
+  isPedagoVisible: boolean;
+  isGradingVisible: boolean;
+  pedagoTab: PedagoTab;
+}
+
+const initialState: LayoutState = {
+  orientation: "horizontal",
+  isPedagoVisible: true,
+  isGradingVisible: true,
+  pedagoTab: "instructions",
+};
+
+// If you are not using async thunks you can use the standalone `createSlice`.
+export const layoutSlice = createAppSlice({
+  name: "layout",
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState,
+  // The `reducers` field lets us define reducers and generate associated actions
+  reducers: (create) => ({
+    toggleLayout: create.reducer((state) => {
+      // Redux Toolkit allows us to write "mutating" logic in reducers. It
+      // doesn't actually mutate the state because it uses the Immer library,
+      // which detects changes to a "draft state" and produces a brand new
+      // immutable state based off those changes
+      state.orientation =
+        state.orientation === "horizontal" ? "vertical" : "horizontal";
+    }),
+    // Use the `PayloadAction` type to declare the contents of `action.payload`
+    setLayout: create.reducer((state, action: PayloadAction<Orientation>) => {
+      state.orientation = action.payload;
+    }),
+    toggleIsPedagoVisible: create.reducer((state) => {
+      state.isPedagoVisible = !state.isPedagoVisible;
+    }),
+    toggleIsGradingVisible: create.reducer((state) => {
+      state.isGradingVisible = !state.isGradingVisible;
+    }),
+    setPedagoTab: create.reducer((state, action: PayloadAction<PedagoTab>) => {
+      state.pedagoTab = action.payload;
+    }),
+  }),
+  // You can define your selectors here. These selectors receive the slice
+  // state as their first argument.
+  selectors: {
+    selectOrientation: (layout) => layout.orientation,
+    selectIsPedagoVisible: (layout) => layout.isPedagoVisible,
+    selectIsGradingVisible: (layout) => layout.isGradingVisible,
+    selectPedagoTab: (layout) => layout.pedagoTab,
+  },
+});
+
+// Action creators are generated for each case reducer function.
+export const {
+  toggleLayout,
+  setLayout,
+  toggleIsPedagoVisible,
+  toggleIsGradingVisible,
+  setPedagoTab,
+} = layoutSlice.actions;
+
+// Selectors returned by `slice.selectors` take the root state as their first argument.
+export const {
+  selectOrientation,
+  selectIsPedagoVisible,
+  selectIsGradingVisible,
+  selectPedagoTab,
+} = layoutSlice.selectors;

package/src/features/navbar/ActivityInfo.tsx

@@ -0,0 +1,41 @@
+import { useAppSelector } from "../../app/hooks";
+import {
+  selectActivityInfo,
+  selectIcon,
+  selectMode,
+} from "../activityData/activityDataSlice";
+import { studentNameFromInfo } from "./student-utils";
+import styles from "./style.module.scss";
+
+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>
+        {mode === "assignment" && studentName && (
+          <div className={styles.activityInfoStudentName}>{studentName}</div>
+        )}
+        {mode === "create" && (
+          <div className={styles.activityInfoStudentName}>
+            Création d'activité
+          </div>
+        )}
+      </div>
+      {icon?.path && (
+        <img
+          className={styles.activityLogo}
+          src={icon.path}
+          style={{
+            backgroundColor: icon.style["background-color"],
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ActivityInfo;

package/src/features/navbar/ActivityMenu.tsx

@@ -0,0 +1,56 @@
+import { memo, useState } from "react";
+import styles from "./style.module.scss";
+
+import { Button } from "primereact/button";
+import { Sidebar } from "primereact/sidebar";
+import SidebarContent from "./SidebarContent";
+import settings from "../../settings";
+import ActivityQuickActions from "./ActivityQuickActions";
+import useFullscreen from "../../utils/useFullscreen";
+
+const ActivityMenu: React.FC = memo(() => {
+  const [settingsSidebarVisible, setSettingsSidebarVisible] = useState(false);
+  const [wantFullscreen, setWantFullscreen] = useState(false);
+  const isFullscreen = useFullscreen(wantFullscreen, () =>
+    setWantFullscreen(false),
+  );
+  return (
+    <div className={styles.activityMenu}>
+      <ActivityQuickActions />
+      <Button
+        severity="secondary"
+        size="small"
+        icon={isFullscreen ? "pi pi-expand" : "pi pi-expand" }
+        text
+        tooltip="Plein écran"
+        tooltipOptions={{
+          position: "bottom",
+          showDelay: settings.TOOLTIP_SHOW_DELAY,
+        }}
+        onClick={() => setWantFullscreen((prev) => !prev)}
+      />
+      <Button
+        severity="secondary"
+        size="small"
+        icon="pi pi-cog" // pi-ellipsis-v
+        outlined
+        tooltip="Paramètres"
+        tooltipOptions={{
+          position: "left",
+          showDelay: settings.TOOLTIP_SHOW_DELAY,
+        }}
+        onClick={() => setSettingsSidebarVisible(true)}
+      />
+      <Sidebar
+        header="Paramètres"
+        visible={settingsSidebarVisible}
+        position="right"
+        onHide={() => setSettingsSidebarVisible(false)}
+      >
+        <SidebarContent />
+      </Sidebar>
+    </div>
+  );
+});
+
+export default ActivityMenu;

package/src/features/navbar/ActivityQuickActions.tsx

@@ -0,0 +1,52 @@
+import { FC, useEffect } from "react";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import {
+  QuickAction,
+  selectQuickActions,
+  setQuickActions,
+} from "./navbarSlice";
+import { Button } from "primereact/button";
+import settings from "../../settings";
+
+const ActivityQuickActions: FC<{}> = () => {
+  const quickActions = useAppSelector(selectQuickActions);
+  return (
+    <>
+      {quickActions.map((action) => (
+        <Button
+          key={action.title}
+          severity="secondary"
+          size="small"
+          icon={action.icon}
+          onClick={action.action}
+          outlined
+          tooltip={action.title}
+          tooltipOptions={{
+            position: "bottom",
+            showDelay: settings.TOOLTIP_SHOW_DELAY,
+          }}
+        />
+      ))}
+    </>
+  );
+};
+
+type ActivityQuickActionsSetterProps = {
+  actions: QuickAction[];
+};
+
+export const ActivityQuickActionsSetter: FC<ActivityQuickActionsSetterProps> = (
+  props,
+) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setQuickActions(props.actions));
+    return () => {
+      dispatch(setQuickActions([]));
+    };
+  }, [props.actions]);
+
+  return <></>;
+};
+
+export default ActivityQuickActions;

package/src/features/navbar/ActivitySidebarActions.tsx

@@ -0,0 +1,52 @@
+import { FC, useEffect } from "react";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import {
+  QuickAction,
+  selectSidebarActions,
+  setSidebarActions,
+} from "./navbarSlice";
+import { Button } from "primereact/button";
+import settings from "../../settings";
+
+const ActivitySidebarActions: FC<{}> = () => {
+  const sidebarActions = useAppSelector(selectSidebarActions);
+  return (
+    <>
+      {sidebarActions.map((action) => (
+        <Button
+          key={action.title}
+          severity="secondary"
+          size="small"
+          icon={action.icon}
+          onClick={action.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;

package/src/features/navbar/CapytaleMenu.tsx

@@ -0,0 +1,183 @@
+import { Button } from "primereact/button";
+import { SplitButton } from "primereact/splitbutton";
+import { ConfirmDialog, confirmDialog } from "primereact/confirmdialog";
+
+import styles from "./style.module.scss";
+import { useMemo } from "react";
+import { useWindowSize } from "@uidotdev/usehooks";
+import { ML, XL } from "../../utils/breakpoints";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import {
+  selectIsDirty,
+  selectMode,
+  selectSaveState,
+  selectSharingInfo,
+  selectWorkflow,
+  setSaveState,
+  setWorkflow,
+} from "../activityData/activityDataSlice";
+import { copyToClipboard } from "../../utils/clipboard";
+import settings from "../../settings";
+import { wf } from "@capytale/activity.js/activity/field/workflow";
+
+const CapytaleMenu: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const sharingInfo = useAppSelector(selectSharingInfo);
+  const saveState = useAppSelector(selectSaveState);
+  const windowsSize = useWindowSize();
+  const mode = useAppSelector(selectMode);
+  const workflow = useAppSelector(selectWorkflow);
+  const isDirty = useAppSelector(selectIsDirty);
+  const isLarge = useMemo(
+    () => windowsSize.width && windowsSize.width >= XL,
+    [windowsSize.width],
+  );
+  const isQuiteSmall = useMemo(
+    () => windowsSize.width && windowsSize.width < ML,
+    [windowsSize.width],
+  );
+  const changeWorkflow = (value: wf) => {
+    dispatch(setWorkflow(value));
+    dispatch(setSaveState("should-save"));
+  };
+  const confirmFinishAssignment = () => {
+    confirmDialog({
+      message:
+        "Votre copie va être rendue et vous ne pourrez plus sauvegarder les modifications ultérieures.",
+      header: "Attention",
+      icon: "pi pi-exclamation-triangle",
+      defaultFocus: "accept",
+      acceptLabel: "Confirmer",
+      rejectLabel: "Annuler",
+      accept: () => changeWorkflow("finished"),
+    });
+  };
+  return (
+    <div className={styles.capytaleMenu}>
+      <Button
+        label={isQuiteSmall ? undefined : "Enregistrer"}
+        severity={isDirty ? "danger" : "warning"}
+        size="small"
+        icon="pi pi-save"
+        loading={saveState !== "idle"}
+        tooltip="Enregistrer l'activité"
+        tooltipOptions={{
+          position: "bottom",
+          showDelay: settings.TOOLTIP_SHOW_DELAY,
+        }}
+        onClick={() => {
+          dispatch(setSaveState("should-save"));
+        }}
+      />
+      {mode === "create" && (
+        <SplitButton
+          label={isLarge ? sharingInfo.code : undefined}
+          severity="secondary"
+          size="small"
+          icon="pi pi-share-alt"
+          outlined
+          buttonProps={{
+            tooltip: "Copier le code de partage",
+            tooltipOptions: {
+              position: "bottom",
+              showDelay: settings.TOOLTIP_SHOW_DELAY,
+            },
+          }}
+          onClick={() => {
+            copyToClipboard(sharingInfo.code);
+          }}
+          model={[
+            {
+              label: "Copier l'URL de partage",
+              icon: "pi pi-link",
+              command: () => {
+                copyToClipboard(sharingInfo.codeLink);
+              },
+            },
+          ]}
+        />
+      )}
+      {mode === "assignment" && workflow === "current" && (
+        <Button
+          outlined
+          label="Rendre"
+          icon="pi pi-envelope"
+          onClick={() => {
+            console.log("Hey");
+            confirmFinishAssignment();
+          }}
+        />
+      )}
+      {mode === "assignment" && workflow !== "current" && (
+        <Button
+          outlined
+          label={workflow === "finished" ? "Rendue" : "Corrigée"}
+          disabled
+          icon={
+            workflow === "finished" ? "pi pi-envelope" : "pi pi-check-square"
+          }
+          tooltip="Copie déjà rendue"
+        />
+      )}
+      {mode === "review" && (
+        <SplitButton
+          label={
+            workflow === "current"
+              ? "En cours"
+              : workflow === "finished"
+                ? "Rendue"
+                : "Corrigée"
+          }
+          severity="secondary"
+          size="small"
+          icon={
+            workflow === "current"
+              ? "pi pi-pencil"
+              : workflow === "finished"
+                ? "pi pi-envelope"
+                : "pi pi-check-square"
+          }
+          outlined
+          model={[
+            ...(workflow === "current"
+              ? []
+              : [
+                  {
+                    label: "Réautoriser la modification",
+                    icon: "pi pi-pencil",
+                    command: () => {
+                      changeWorkflow("current");
+                    },
+                  },
+                ]),
+            ...(workflow === "finished"
+              ? []
+              : [
+                  {
+                    label: "Marquer comme rendue",
+                    icon: "pi pi-envelope",
+                    command: () => {
+                      changeWorkflow("finished");
+                    },
+                  },
+                ]),
+            ...(workflow === "corrected"
+              ? []
+              : [
+                  {
+                    label: "Marquer comme corrigée",
+                    icon: "pi pi-check-square",
+                    command: () => {
+                      changeWorkflow("corrected");
+                    },
+                  },
+                ]),
+          ]}
+        />
+      )}
+      <ConfirmDialog />
+    </div>
+  );
+};
+
+export default CapytaleMenu;

package/src/features/navbar/GradingNav.tsx

@@ -0,0 +1,120 @@
+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,
+  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 [studentList, setStudentList] = useState<SaInfo[]>([]);
+  const nid = useAppSelector(selectNid) as number;
+  const mode = useAppSelector(selectMode);
+  const activityNid = useAppSelector(selectActivityNid) as number;
+  console.log("Le nid est : ", nid);
+  useEffect(() => {
+    evalApi.listSa(activityNid).then((j) => {
+      setStudentList(j);
+    });
+  }, []);
+
+  const goToStudent = (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();
+  };
+
+  const handlePrev = () => {
+    if (studentList == null) return;
+    const i = studentList.findIndex((el) => (el.nid as number) == nid);
+    if (i <= 0) return;
+    goToStudent(studentList[i - 1].nid);
+  };
+  const handleNext = () => {
+    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);
+  };
+
+  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..." />;
+  }
+
+  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
+        size="small"
+        icon="pi pi-chevron-left"
+        severity="secondary"
+        onClick={handlePrev}
+        tooltip="Copie précédente"
+        tooltipOptions={{
+          position: "left"
+        }}
+        disabled={nid == firstNid}
+        outlined
+      />
+      <Dropdown
+        value={nid}
+        options={options}
+        filter
+        onChange={(e) => {
+          goToStudent(e.value);
+        }}
+      />
+      <Button
+        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/ReviewNavbar.tsx

@@ -0,0 +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>Mode correction</div>
+      <div>
+        <GradingNav />
+      </div>
+      <div></div>
+    </div>
+  );
+};
+
+export default ReviewNavbar;