@capytale/meta-player 0.0.1

package/src/features/activityData/activityDataSlice.ts

@@ -0,0 +1,250 @@
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { createAppSlice } from "../../app/createAppSlice";
+import { ActivityMode } from "@capytale/activity.js/activity/activitySession";
+import { TimeRange } from "@capytale/activity.js/common/field";
+import { InitialEditorStateType } from "@capytale/capytale-rich-text-editor";
+import {
+  MetaPlayerOptions,
+  defaultMetaPlayerOptions,
+} from "./metaPlayerOptions";
+import { wf } from "@capytale/activity.js/activity/field/workflow";
+
+export type StudentInfo = {
+  firstName: string;
+  lastName: string;
+  class: string;
+};
+
+export type Instructions = {
+  value: InitialEditorStateType | null;
+  htmlValue: string | null;
+  format: "html" | "markdown" | "lexical";
+};
+
+export type Icon = {
+  path: string;
+  style: any;
+};
+
+interface ActivityJSData {
+  title: string;
+  mode: ActivityMode;
+  isDirty: boolean;
+  returnUrl: string;
+  helpUrl: string;
+  code: string;
+  nid: number;
+  activityNid: number;
+  accessTrMode: string;
+  accessTimerange: TimeRange | null;
+  studentInfo: StudentInfo | null;
+  instructions: Instructions | null;
+  answerSheetContent: InitialEditorStateType | null;
+  codeLink: string;
+  icon: Icon | null;
+  friendlyType: string;
+  comments: string | null;
+  grading: string | null;
+  workflow: wf | null | undefined;
+}
+
+type SaveState = "idle" | "should-save" | "saving";
+
+interface UIState {
+  canSaveInstructions: boolean;
+  canSaveAnswerSheet: boolean;
+  saveState: SaveState;
+}
+
+export interface ActivityDataState
+  extends ActivityJSData,
+    MetaPlayerOptions,
+    UIState {}
+
+const initialState: ActivityDataState = {
+  title: "",
+  mode: "view",
+  isDirty: false,
+  returnUrl: "",
+  helpUrl: "",
+  code: "",
+  nid: 0,
+  activityNid: 0,
+  accessTrMode: "",
+  accessTimerange: null,
+  studentInfo: {
+    firstName: "",
+    lastName: "",
+    class: "",
+  },
+  instructions: null,
+  answerSheetContent: null,
+  codeLink: "",
+  icon: null,
+  friendlyType: "",
+  comments: null,
+  grading: null,
+  workflow: null,
+
+  ...defaultMetaPlayerOptions,
+
+  canSaveInstructions: true,
+  canSaveAnswerSheet: true,
+  saveState: "idle",
+};
+
+// If you are not using async thunks you can use the standalone `createSlice`.
+export const activityDataSlice = createAppSlice({
+  name: "activityData",
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState,
+  // The `reducers` field lets us define reducers and generate associated actions
+  reducers: (create) => ({
+    toRemove: create.reducer((state) => {
+      state.hasInstructions = false;
+    }),
+    // Use the `PayloadAction` type to declare the contents of `action.payload`
+    setActivityJSData: create.reducer(
+      (state, action: PayloadAction<ActivityJSData>) => {
+        state.title = action.payload.title;
+        state.mode = action.payload.mode;
+        state.returnUrl = action.payload.returnUrl;
+        state.helpUrl = action.payload.helpUrl;
+        state.code = action.payload.code;
+        state.accessTrMode = action.payload.accessTrMode;
+        state.accessTimerange = action.payload.accessTimerange;
+        state.studentInfo = action.payload.studentInfo;
+        state.instructions = action.payload.instructions;
+        state.codeLink = action.payload.codeLink;
+        state.icon = action.payload.icon;
+        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;
+        state.workflow = action.payload.workflow;
+      },
+    ),
+    setPlayerSettings: create.reducer(
+      (state, action: PayloadAction<MetaPlayerOptions>) => {
+        state.hasInstructions = action.payload.hasInstructions;
+        state.pedagoLayout = action.payload.pedagoLayout;
+        state.supportsLightTheme = action.payload.supportsLightTheme;
+        state.supportsDarkTheme = action.payload.supportsDarkTheme;
+      },
+    ),
+    setCanSaveInstructions: create.reducer(
+      (state, action: PayloadAction<boolean>) => {
+        state.canSaveInstructions = action.payload;
+      },
+    ),
+    setCanSaveAnswerSheet: create.reducer(
+      (state, action: PayloadAction<boolean>) => {
+        state.canSaveAnswerSheet = action.payload;
+      },
+    ),
+    setLexicalInstructionsState: create.reducer(
+      (state, action: PayloadAction<InitialEditorStateType>) => {
+        state.instructions = {
+          format: "lexical",
+          value: action.payload,
+          htmlValue: null,
+        };
+      },
+    ),
+    setLexicalAnswerSheetState: create.reducer(
+      (state, action: PayloadAction<InitialEditorStateType>) => {
+        state.answerSheetContent = action.payload;
+      },
+    ),
+    setSaveState: create.reducer((state, action: PayloadAction<SaveState>) => {
+      state.saveState = action.payload;
+    }),
+    setGrading: create.reducer((state, action: PayloadAction<string>) => {
+      state.grading = action.payload;
+    }),
+    setComments: create.reducer((state, action: PayloadAction<string>) => {
+      state.comments = action.payload;
+    }),
+    setWorkflow: create.reducer((state, action: PayloadAction<wf>) => {
+      state.workflow = action.payload;
+    }),
+    setIsDirty: create.reducer((state, action: PayloadAction<boolean>) => {
+      state.isDirty = action.payload;
+    }),
+  }),
+  // You can define your selectors here. These selectors receive the slice
+  // state as their first argument.
+  selectors: {
+    selectMode: (data) => data.mode,
+    selectActivityInfo: (data) => ({
+      title: data.title,
+      studentInfo: data.studentInfo,
+    }),
+    selectSharingInfo: (data) => ({
+      code: data.code,
+      codeLink: data.codeLink,
+    }),
+    selectInstructions: (data) => data.instructions,
+    selectAnswerSheetContent: (data) => data.answerSheetContent,
+    selectComments: (data) => data.comments,
+    selectGrading: (data) => data.grading,
+    selectHasInstructions: (data) => data.hasInstructions,
+    selectPedagoLayout: (data) => data.pedagoLayout,
+    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,
+    selectWorkflow: (data) => data.workflow,
+    selectIsDirty: (data) => data.isDirty,
+
+    selectCanChoosePedagoLayout: (data) =>
+      data.pedagoLayout === "default-horizontal" ||
+      data.pedagoLayout === "default-vertical",
+
+    selectCanChooseTheme: (data) =>
+      data.supportsDarkTheme && data.supportsLightTheme,
+  },
+});
+
+// Action creators are generated for each case reducer function.
+export const {
+  toRemove,
+  setActivityJSData,
+  setPlayerSettings,
+  setCanSaveInstructions,
+  setCanSaveAnswerSheet,
+  setLexicalInstructionsState,
+  setLexicalAnswerSheetState,
+  setSaveState,
+  setGrading,
+  setComments,
+  setWorkflow,
+  setIsDirty,
+} = activityDataSlice.actions;
+
+// Selectors returned by `slice.selectors` take the root state as their first argument.
+export const {
+  selectMode,
+  selectActivityInfo,
+  selectSharingInfo,
+  selectInstructions,
+  selectAnswerSheetContent,
+  selectComments,
+  selectGrading,
+  selectHasInstructions,
+  selectPedagoLayout,
+  selectHasGradingOrComments,
+  selectSaveState,
+  selectReturnUrl,
+  selectNid,
+  selectActivityNid,
+  selectIcon,
+  selectWorkflow,
+  selectIsDirty,
+
+  selectCanChoosePedagoLayout,
+  selectCanChooseTheme,
+} = activityDataSlice.selectors;

package/src/features/activityData/metaPlayerOptions.ts

@@ -0,0 +1,17 @@
+export type MetaPlayerOptions = {
+  hasInstructions: boolean;
+  pedagoLayout:
+    | "horizontal"
+    | "vertical"
+    | "default-horizontal"
+    | "default-vertical";
+  supportsLightTheme: boolean;
+  supportsDarkTheme: boolean;
+};
+
+export const defaultMetaPlayerOptions: MetaPlayerOptions = {
+  hasInstructions: true,
+  pedagoLayout: "default-horizontal",
+  supportsLightTheme: true,
+  supportsDarkTheme: false,
+};

package/src/features/activityJS/ActivityJSProvider.tsx

@@ -0,0 +1,110 @@
+import {
+  FC,
+  PropsWithChildren,
+  ReactNode,
+  createContext,
+  useContext,
+  useState,
+} from "react";
+
+import {
+  ActivitySessionLoaderReturnValue,
+  LoadOptions,
+  useActivitySessionLoader,
+} from "./hooks";
+import { getIdFromUrl } from "../../utils/activity";
+import { useAppDispatch } from "../../app/hooks";
+import ActivitySession from "@capytale/activity.js/activity/activitySession";
+import { setActivityJSData } from "../activityData/activityDataSlice";
+
+const ActivityJSContext = createContext<ActivitySessionLoaderReturnValue>({
+  state: "loading",
+  activitySession: null,
+});
+
+type ActivityJSProviderProps = PropsWithChildren<{
+  options?: LoadOptions;
+  loadingFallback?: ReactNode;
+}>;
+
+export const ActivityJSProvider: FC<ActivityJSProviderProps> = (props) => {
+  const [loaded, setLoaded] = useState(false);
+  const activityId = getIdFromUrl();
+  const dispatch = useAppDispatch();
+
+  const callback = (data: ActivitySession) => {
+    //@ts-expect-error
+    window.capy = data;
+    
+    const ab = data.activityBunch;
+    /*
+    console.log("Test accès");
+    console.log(ab.assignmentNode?.answer_sheet.value);
+    console.log(ab.activityNode.answer_sheet.value);
+    */
+    /*
+    const answerSheetContent = 
+    ab.assignmentNode?.answer_sheet.value ||
+    ab.activityNode.answer_sheet.value ||
+    null;
+    */
+    const answerSheetContent = null;
+    dispatch(
+      setActivityJSData({
+        title: ab.title.value || "",
+        mode: data.mode,
+        isDirty: false,
+        returnUrl: data.returnUrl,
+        helpUrl: data.type.helpUrl,
+        nid: ab.mainNode.nid,
+        activityNid: ab.activityNode.nid,
+        code: ab.code.value || "",
+        accessTrMode: ab.access_tr_mode.value || "",
+        accessTimerange: ab.access_timerange.value,
+        studentInfo: data.student
+          ? {
+              firstName: data.student.prenom || "",
+              lastName: data.student.nom || "",
+              class: data.student.classe || "",
+            }
+          : null,
+        instructions: ab.instructions.value.lexical
+          ? {
+              value: ab.instructions.value.lexical,
+              htmlValue: ab.instructions.value.html,
+              format: "lexical",
+            }
+          : {
+              value: null,
+              htmlValue: ab.instructions.value.html,
+              format: "html",
+            },
+        answerSheetContent: answerSheetContent,
+        codeLink: data.codeLink || "",
+        icon: data.icon || null,
+        friendlyType: data.friendlyType,
+        comments: ab.assignmentNode?.comments.value || null,
+        grading: ab.assignmentNode?.grading.value || null,
+        workflow: ab.assignmentNode?.workflow,
+      }),
+    );
+    setLoaded(true);
+  };
+
+  if (!activityId) {
+    throw new Error("No activity id found in the URL");
+  }
+  const value = useActivitySessionLoader(activityId, props.options, callback);
+  if (!loaded) {
+    return <>{props.loadingFallback}</>;
+  }
+  return (
+    <ActivityJSContext.Provider value={value}>
+      {props.children}
+    </ActivityJSContext.Provider>
+  );
+};
+
+export const useActivityJS = () => {
+  return useContext(ActivityJSContext);
+};

package/src/features/activityJS/AfterSaveAction.tsx

@@ -0,0 +1,23 @@
+import { FC, useEffect } from "react";
+import {
+  SaveCallback,
+  addAfterSave,
+  removeAfterSave,
+} from "./saverSlice";
+import { useAppDispatch } from "../../app/hooks";
+
+type AfterSaveActionProps = SaveCallback;
+
+const AfterSaveAction: FC<AfterSaveActionProps> = (props) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(addAfterSave(props));
+    return () => {
+      // Remove the callback when the component is unmounted
+      dispatch(removeAfterSave(props.name));
+    };
+  }, [props]);
+  return null;
+};
+
+export default AfterSaveAction;

package/src/features/activityJS/BeforeSaveAction.tsx

@@ -0,0 +1,23 @@
+import { FC, useEffect } from "react";
+import {
+  SaveCallback,
+  addBeforeSave,
+  removeBeforeSave,
+} from "./saverSlice";
+import { useAppDispatch } from "../../app/hooks";
+
+type BeforeSaveActionProps = SaveCallback;
+
+const BeforeSaveAction: FC<BeforeSaveActionProps> = (props) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(addBeforeSave(props));
+    return () => {
+      // Remove the callback when the component is unmounted
+      dispatch(removeBeforeSave(props.name));
+    };
+  }, [props]);
+  return null;
+};
+
+export default BeforeSaveAction;

package/src/features/activityJS/Saver.tsx

@@ -0,0 +1,147 @@
+import { FC, useEffect, useRef } from "react";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import {
+  selectAnswerSheetContent,
+  selectComments,
+  selectGrading,
+  selectInstructions,
+  selectSaveState,
+  selectWorkflow,
+  setSaveState,
+} from "../activityData/activityDataSlice";
+import { useActivityJS } from "./ActivityJSProvider";
+import { Toast } from "primereact/toast";
+import { selectBeforeSave, selectAfterSave } from "./saverSlice";
+
+const Saver: FC<{}> = () => {
+  const dispatch = useAppDispatch();
+  const activityJs = useActivityJS();
+  const instructions = useAppSelector(selectInstructions);
+  const answerSheetContent = useAppSelector(selectAnswerSheetContent);
+  const comments = useAppSelector(selectComments);
+  const grading = useAppSelector(selectGrading);
+  const beforeSave = useAppSelector(selectBeforeSave);
+  const afterSave = useAppSelector(selectAfterSave);
+  const workflow = useAppSelector(selectWorkflow);
+
+  const toast = useRef<Toast>(null);
+
+  const executePrepareSave = () => {};
+  const save = async () => {
+    if (!activityJs.activitySession) {
+      throw new Error("No activity session to save");
+    }
+    for (const callback of Object.values(beforeSave)) {
+      try {
+        const v = callback();
+        if (v instanceof Promise) {
+          await v;
+        }
+      } catch (e) {
+        console.error("Error in beforeSave callback", e);
+        dispatch(setSaveState("idle"));
+        toast.current!.show({
+          summary: "Erreur : enregistrement annulé",
+          detail: (e as any).toString(),
+          severity: "error",
+          life: 10000,
+        });
+        return;
+      }
+    }
+    const ab = activityJs.activitySession.activityBunch;
+    if (activityJs.activitySession.mode === "create") {
+      ab.instructions.value = {
+        lexical:
+          instructions?.format === "lexical"
+            ? typeof instructions.value === "string"
+              ? instructions.value
+              : JSON.stringify(instructions.value)
+            : null,
+        html:
+          instructions?.format === "lexical"
+            ? instructions.htmlValue
+            : (instructions?.value as string),
+      };
+      /*
+      ab.activityNode.answer_sheet.value =
+        typeof answerSheetContent === "string"
+          ? answerSheetContent
+          : JSON.stringify(answerSheetContent);
+      */
+    }
+    if (activityJs.activitySession.mode === "review") {
+      ab.assignmentNode!.comments.value = comments || "";
+      ab.assignmentNode!.grading.value = grading || "";
+    }
+    if (
+      activityJs.activitySession.mode === "review" ||
+      activityJs.activitySession.mode === "assignment"
+    ) {
+      ab.assignmentNode!.answer_sheet.value =
+        typeof answerSheetContent === "string"
+          ? answerSheetContent
+          : JSON.stringify(answerSheetContent);
+    }
+    if (
+      activityJs.activitySession.mode === "assignment" ||
+      activityJs.activitySession.mode === "review"
+    ) {
+      console.log("Workflow:", workflow);
+      ab.assignmentNode!.workflow = workflow!;
+    }
+    try {
+      const saveData = await ab.save();
+      console.log("Save return data", saveData);
+      dispatch(setSaveState("idle"));
+      toast.current!.show({
+        summary: "Sauvegarde réussie",
+        detail: "L'activité a bien été enregistrée.",
+        severity: "success",
+        life: 2000,
+      });
+      for (const callback of Object.values(afterSave)) {
+        try {
+          const v = callback();
+          if (v instanceof Promise) {
+            await v;
+          }
+        } catch (e) {
+          console.error("Error in afterSave callback", e);
+          dispatch(setSaveState("idle"));
+          toast.current!.show({
+            summary: "Erreur après sauvegarde",
+            detail: (e as any).toString(),
+            severity: "error",
+            life: 10000,
+          });
+        }
+      }
+    } catch (error: any) {
+      console.error("Error saving", error);
+      dispatch(setSaveState("idle"));
+      toast.current!.show({
+        summary: "Erreur lors de l'enregistrement",
+        detail: error.toString(),
+        severity: "error",
+        life: 10000,
+      });
+    }
+  };
+
+  const saveState = useAppSelector(selectSaveState);
+  useEffect(() => {
+    if (saveState === "should-save") {
+      dispatch(setSaveState("saving"));
+      executePrepareSave();
+      save();
+    }
+  }, [saveState]);
+  return (
+    <>
+      <Toast position="bottom-right" ref={toast} />
+    </>
+  );
+};
+
+export default Saver;

package/src/features/activityJS/hooks.ts

@@ -0,0 +1,93 @@
+import { useEffect, useState, useRef } from "react";
+
+import { autoLoad } from "@capytale/activity.js";
+
+import type ActivitySession from "@capytale/activity.js/activity/activitySession/uni";
+
+import type { ActivityBunchOptions as LoadOptions } from "@capytale/activity.js/activity/activityBunch/uni/backend";
+
+export type { LoadOptions };
+
+export type ActivitySessionLoaderReturnValue = {
+  state: "loading" | "loaded" | "error";
+  activitySession: ActivitySession | null;
+  error?: any;
+};
+
+/**
+ * Un hook pour utiliser activity.js
+ * Charge une activité de façon réactive.
+ *
+ * @param id id de l'activité à charger
+ * @param loadOptions les options de chargement
+ * @param callback une callback appelée avec l'activité chargée
+ * @returns un objet contenant l'état de chargement de l'activité et l'activité dès qu'elle est chargée
+ */
+
+export function useActivitySessionLoader(
+  id: number,
+  loadOptions?: LoadOptions,
+  callback?: (activitySession: ActivitySession) => void,
+): ActivitySessionLoaderReturnValue {
+  const callbackW = useHandlerWrapper(callback);
+  const [state, setState] = useState<ActivitySessionLoaderReturnValue>({
+    state: "loading",
+    activitySession: null,
+  });
+  useEffect(() => {
+    let cancelled = false;
+    autoLoad(loadOptions)
+      .then((data) => {
+        if (cancelled) return;
+        callbackW(data);
+        setState({
+          state: "loaded",
+          activitySession: data,
+        });
+        (window as any).capy = data;
+      })
+      .catch((error) => {
+        if (cancelled) return;
+        setState({
+          state: "error",
+          activitySession: null,
+          error,
+        });
+      });
+    return () => {
+      cancelled = true;
+      setState({
+        state: "loading",
+        activitySession: null,
+      });
+    };
+  }, [id, loadOptions?.binaryDataType, loadOptions?.readOnly]);
+  return state;
+}
+
+/**
+ * Si un handler est passé en props à un composant, il peut changer. Il n'y a pas trop de raison mais
+ * rien ne l'interdit.
+ * Si un useEffect invoque ce handler, il faudrait que le handler figure dans les dépendances du useEffect.
+ * Du coup, si le handler change, le useEffect est ré-exécuté.
+ * Ce hook crée un wrapper immuable autour du handler passé en props. Ce wrapper ne change jamais et n'a donc
+ * pas besoin de figurer dans les dépendances du useEffect.
+ *
+ * @param handler
+ */
+export function useHandlerWrapper<H extends () => any>(
+  handler?: H,
+): () => ReturnType<H> | void;
+export function useHandlerWrapper<H extends (...args: any[]) => any>(
+  handler?: H,
+): (...p: Parameters<H>) => ReturnType<H> | void;
+export function useHandlerWrapper<H extends (...args: any[]) => any>(
+  handler?: H,
+): (...p: Parameters<H>) => ReturnType<H> | void {
+  const handlerRef = useRef<H>();
+  handlerRef.current = handler;
+  return useRef((...p: Parameters<H>) => {
+    if (null == handlerRef.current) return;
+    return handlerRef.current(...p);
+  }).current;
+}