@capytale/meta-player 0.3.4 → 0.3.6

package/src/features/pedago/InstructionsEditor.tsx

@@ -2,14 +2,17 @@ import { useCapytaleRichTextEditor } from "@capytale/capytale-rich-text-editor";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import {
   selectInstructions,
+  selectInstructionsType,
   selectMode,
   setCanSaveInstructions,
+  setInstructionsType,
   setIsMPDirty,
   setLexicalInstructionsState,
 } from "../activityData/activityDataSlice";
 import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
 import { Toast } from "primereact/toast";
 import settings from "../../settings";
+import { Button } from "primereact/button";
 
 const InstructionsEditor: React.FC = forwardRef((_props, ref) => {
   const [Editor, getState, _canSave] = useCapytaleRichTextEditor();
@@ -31,6 +34,7 @@ const InstructionsEditor: React.FC = forwardRef((_props, ref) => {
       : undefined;
   }, [initialInstructions]);
   const initialStateOnChangeDone = useRef<boolean>(false);
+  const instructionsType = useAppSelector(selectInstructionsType);
 
   useImperativeHandle(ref, () => {
     return {
@@ -44,39 +48,52 @@ const InstructionsEditor: React.FC = forwardRef((_props, ref) => {
   return (
     <>
       <Toast position="bottom-right" ref={toast} />
-      <Editor
-        placeholderText="Écrivez la consigne ici..."
-        htmlInitialContent={htmlInitialContent}
-        initialEditorState={initialEditorState}
-        jsonSizeLimit={settings.STATEMENT_MAX_SIZE}
-        onChange={(editorState) => {
-          dispatch(setLexicalInstructionsState(editorState));
-          if (initialStateOnChangeDone.current) {
-            dispatch(setIsMPDirty(true));
-          } else {
-            initialStateOnChangeDone.current = true;
-          }
-        }}
-        onJsonSizeLimitExceeded={() => {
-          dispatch(setCanSaveInstructions(false));
-          toast.current!.show({
-            summary: "Erreur",
-            detail: `Le contenu de la consigne est trop volumineux. Veuillez le réduire avant de l'enregistrer.\nPeut-être avez-vous inséré une image trop volumineuse ?`,
-            severity: "error",
-            life: 10000,
-          });
-        }}
-        onJsonSizeLimitMet={() => {
-          dispatch(setCanSaveInstructions(true));
-          toast.current!.show({
-            summary: "Succès",
-            detail: `Le contenu de la consigne ne dépasse plus la taille limite.`,
-            severity: "success",
-            life: 4000,
-          });
-        }}
-        isEditable={isEditable}
-      />
+      <>
+        {instructionsType === "none" && (
+          <>
+            <p>Pas de consigne.</p>
+            <Button
+              label="Créer une consigne"
+              onClick={() => dispatch(setInstructionsType("rich"))}
+            />
+          </>
+        )}
+        {instructionsType === "rich" && (
+          <Editor
+            placeholderText="Écrivez la consigne ici..."
+            htmlInitialContent={htmlInitialContent}
+            initialEditorState={initialEditorState}
+            jsonSizeLimit={settings.STATEMENT_MAX_SIZE}
+            onChange={(editorState) => {
+              dispatch(setLexicalInstructionsState(editorState));
+              if (initialStateOnChangeDone.current) {
+                dispatch(setIsMPDirty(true));
+              } else {
+                initialStateOnChangeDone.current = true;
+              }
+            }}
+            onJsonSizeLimitExceeded={() => {
+              dispatch(setCanSaveInstructions(false));
+              toast.current!.show({
+                summary: "Erreur",
+                detail: `Le contenu de la consigne est trop volumineux. Veuillez le réduire avant de l'enregistrer.\nPeut-être avez-vous inséré une image trop volumineuse ?`,
+                severity: "error",
+                life: 10000,
+              });
+            }}
+            onJsonSizeLimitMet={() => {
+              dispatch(setCanSaveInstructions(true));
+              toast.current!.show({
+                summary: "Succès",
+                detail: `Le contenu de la consigne ne dépasse plus la taille limite.`,
+                severity: "success",
+                life: 4000,
+              });
+            }}
+            isEditable={isEditable}
+          />
+        )}
+      </>
     </>
   );
 });

package/src/features/pedago/PdfEditor.tsx

@@ -0,0 +1,91 @@
+import { FC, useEffect, useMemo } from "react";
+import { useDropzone } from "react-dropzone";
+import styles from "./style.module.scss";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import {
+  selectMode,
+  selectPdfInstructions,
+  setPdfInstructions,
+} from "../activityData/activityDataSlice";
+import { Button } from "primereact/button";
+
+export const PdfEditor: FC = () => {
+  const dispatch = useAppDispatch();
+  const {
+    getRootProps,
+    getInputProps,
+    isFocused,
+    isDragAccept,
+    isDragReject,
+    acceptedFiles,
+  } = useDropzone({
+    accept: {
+      "application/pdf": [".pdf"],
+    },
+  });
+  useEffect(() => {
+    if (acceptedFiles.length) {
+      dispatch(setPdfInstructions(acceptedFiles[0]));
+    }
+  }, [acceptedFiles]);
+  const mode = useAppSelector(selectMode);
+  const pdfInstructions = useAppSelector(selectPdfInstructions);
+  const pdfData = useMemo(
+    () => (pdfInstructions ? URL.createObjectURL(pdfInstructions) : null),
+    [pdfInstructions],
+  );
+  return (
+    <>
+      {pdfData && (
+        <div
+          style={{
+            width: "100%",
+            height: "100%",
+            position: "relative",
+            overflow: "hidden",
+          }}
+        >
+          <object
+            data={pdfData + "#?navpanes=0"}
+            type="application/pdf"
+            width="100%"
+            height="100%"
+          >
+            <p>
+              Votre navigateur ne supporte pas les PDFs, vous pouvez{" "}
+              <a href={pdfData}>télécharger le fichier</a> à la place.
+            </p>
+          </object>
+          <div className="meta-player-content-cover"></div>
+          {mode === "create" && (
+            <Button
+              label="Supprimer le PDF"
+              severity="danger"
+              icon="pi pi-trash"
+              className={styles.deleteButton}
+              onClick={() => dispatch(setPdfInstructions(null))}
+              style={{ position: "absolute", bottom: "20px", right: "20px" }}
+            />
+          )}
+        </div>
+      )}
+      {!pdfData && (
+        <div className={styles.dropzone} {...getRootProps()}>
+          <div
+            className={styles.dropzoneRectangle}
+            data-is-focused={isFocused}
+            data-is-drag-accept={isDragAccept}
+            data-is-drag-reject={isDragReject}
+          >
+            <input {...getInputProps()} />
+            <p>Déposez un PDF ici ou cliquez pour sélectionner un fichier...</p>
+            <i
+              className="pi pi-file-arrow-up"
+              style={{ fontSize: "2.5rem" }}
+            ></i>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};

package/src/features/pedago/PedagoCommands.tsx

@@ -0,0 +1,325 @@
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import {
+  selectHasGradingOrComments,
+  selectInstructionsType,
+  selectMode,
+  selectPdfInstructions,
+  selectSharedNotesType,
+  setInstructionsType,
+  setSharedNotesType,
+} from "../activityData/activityDataSlice";
+import {
+  PedagoTab,
+  selectIsGradingVisible,
+  selectOrientation,
+  selectPedagoTab,
+  setPedagoTab,
+  toggleIsGradingVisible,
+  toggleIsPedagoVisible,
+} from "../layout/layoutSlice";
+import styles from "./style.module.scss";
+import { Button } from "primereact/button";
+import settings from "../../settings";
+import { SelectButton } from "primereact/selectbutton";
+import { FC, useMemo } from "react";
+import { TabMenu } from "primereact/tabmenu";
+import { classNames } from "primereact/utils";
+
+export const PedagoCommands = () => {
+  const isHorizontal = useAppSelector(selectOrientation) === "horizontal";
+  return isHorizontal ? (
+    <HorizontalPedagoCommands />
+  ) : (
+    <VerticalPedagoCommands />
+  );
+};
+
+type DocumentSelectorHzItem = {
+  name: string;
+  value: PedagoTab;
+  tooltip: string;
+};
+
+type DocumentSelectorItem = DocumentSelectorHzItem & {
+  template: (item: any) => JSX.Element;
+};
+
+const HorizontalPedagoCommands = () => {
+  const mode = useAppSelector(selectMode);
+  const dispatch = useAppDispatch();
+  return (
+    <div className={styles.pedagoCommands}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          width: "100%",
+          paddingLeft: "4px",
+        }}
+      >
+        {(mode === "assignment" || mode === "review") && (
+          <ShowHideGradingButton />
+        )}
+        <div></div>
+        <Button
+          severity="secondary"
+          icon="pi pi-times"
+          rounded
+          text
+          aria-label="Masquer les consignes"
+          tooltip="Masquer les consignes"
+          tooltipOptions={{
+            position: "left",
+            showDelay: settings.TOOLTIP_SHOW_DELAY,
+          }}
+          onClick={() => dispatch(toggleIsPedagoVisible())}
+          style={{ flexShrink: 0 }}
+        />
+      </div>
+      <HorizontalDocumentSelector />
+    </div>
+  );
+};
+
+const DocumentSelectorItemActions: FC<{
+  item: DocumentSelectorHzItem;
+}> = ({ item }) => {
+  const mode = useAppSelector(selectMode);
+  const itemTemplate = (option: any) => {
+    return <i className={option.icon}></i>;
+  };
+
+  const instructionsType = useAppSelector(selectInstructionsType);
+  const sharedNotesType = useAppSelector(selectSharedNotesType);
+  const pdfInstructions = useAppSelector(selectPdfInstructions);
+  const dispatch = useAppDispatch();
+
+  return (
+    <>
+      {mode === "create" && (
+        <>
+          <div className={styles.pdfActions}>
+            {item.value === "pdf" && !pdfInstructions && (
+              <i className="pi pi-eye-slash"></i>
+            )}
+            {item.value === "pdf" && pdfInstructions && (
+              <i className="pi pi-file-pdf"></i>
+            )}
+          </div>
+          {item.value !== "pdf" && (
+            <SelectButton
+              className={styles.smallSelectButton}
+              value={
+                item.value === "instructions"
+                  ? instructionsType
+                  : sharedNotesType
+              }
+              onChange={(e) => {
+                if (item.value === "instructions") {
+                  dispatch(setInstructionsType(e.value));
+                } else {
+                  dispatch(setSharedNotesType(e.value));
+                }
+              }}
+              itemTemplate={itemTemplate}
+              optionLabel="value"
+              allowEmpty={false}
+              options={[
+                {
+                  label: "Éditeur riche",
+                  value: "rich",
+                  icon: "pi pi-pen-to-square",
+                },
+                {
+                  label: "Pas de consigne",
+                  value: "none",
+                  icon: "pi pi-eye-slash",
+                },
+              ]}
+              tooltip={item.tooltip}
+              tooltipOptions={{
+                position: "left",
+                showDelay: settings.TOOLTIP_SHOW_DELAY,
+              }}
+            />
+          )}
+        </>
+      )}
+    </>
+  );
+};
+
+const HorizontalDocumentSelector = () => {
+  const pedagoTab = useAppSelector(selectPedagoTab);
+  const instructionsType = useAppSelector(selectInstructionsType);
+  const mode = useAppSelector(selectMode);
+  // const pdfInstructions = useAppSelector(selectPdfInstructions);
+  const sharedNotesType = useAppSelector(selectSharedNotesType);
+  const dispatch = useAppDispatch();
+
+  const items: DocumentSelectorHzItem[] = useMemo(() => {
+    const allItems: DocumentSelectorHzItem[] = [];
+    if (mode === "create" || instructionsType !== "none") {
+      allItems.push({
+        name: "Consignes",
+        value: "instructions",
+        tooltip: "Activer/désactiver les consignes",
+      });
+    }
+    /* // Removed PDF for now
+    if (mode === "create" || pdfInstructions) {
+      allItems.push({
+        name: "PDF",
+        value: "pdf",
+        tooltip: "Activer/désactiver le PDF",
+      });
+    }
+    */
+    if (mode === "create" || sharedNotesType !== "none") {
+      allItems.push({
+        name: "Notes partagées",
+        value: "sharedNotes",
+        tooltip: "Activer/désactiver les notes partagées",
+      });
+    }
+    return allItems;
+  }, []);
+
+  return (
+    <div className={styles.pedagoHorizontalTabMenu}>
+      {items.map((item) => (
+        <div
+          className={styles.pedagoHorizontalTab}
+          onClick={() => dispatch(setPedagoTab(item.value))}
+          data-selected={item.value === pedagoTab}
+          key={item.value}
+        >
+          <span>{item.name}</span>
+          <DocumentSelectorItemActions item={item} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const VerticalPedagoCommands = () => {
+  const mode = useAppSelector(selectMode);
+  const dispatch = useAppDispatch();
+  return (
+    <div className={styles.pedagoCommands}>
+      <VerticalDocumentSelector />
+      <div className={styles.pedagoSeparator}></div>
+      {(mode === "assignment" || mode === "review") && (
+        <ShowHideGradingButton />
+      )}
+      <Button
+        severity="secondary"
+        icon="pi pi-times"
+        rounded
+        text
+        aria-label="Masquer les consignes"
+        tooltip="Masquer les consignes"
+        tooltipOptions={{
+          position: "left",
+          showDelay: settings.TOOLTIP_SHOW_DELAY,
+        }}
+        onClick={() => dispatch(toggleIsPedagoVisible())}
+        style={{ flexShrink: 0 }}
+      />
+    </div>
+  );
+};
+
+const VerticalDocumentSelector = () => {
+  const pedagoTab = useAppSelector(selectPedagoTab);
+  const instructionsType = useAppSelector(selectInstructionsType);
+  const mode = useAppSelector(selectMode);
+  // const pdfInstructions = useAppSelector(selectPdfInstructions);
+  const sharedNotesType = useAppSelector(selectSharedNotesType);
+  const dispatch = useAppDispatch();
+
+  const itemRenderer = (item: DocumentSelectorItem) => (
+    <a
+      className={classNames("p-menuitem-link", styles.pedagoTab)}
+      onClick={() => dispatch(setPedagoTab(item.value))}
+    >
+      <span>{item.name}</span>
+      <DocumentSelectorItemActions item={item} />
+    </a>
+  );
+
+  const items: DocumentSelectorItem[] = useMemo(() => {
+    const allItems: DocumentSelectorItem[] = [];
+    if (mode === "create" || instructionsType !== "none") {
+      allItems.push({
+        name: "Consignes",
+        value: "instructions",
+        tooltip: "Activer/désactiver les consignes",
+        template: (item: any) => itemRenderer(item),
+      });
+    }
+    /* // Removed PDF for now
+    if (mode === "create" || pdfInstructions) {
+      allItems.push({
+        name: "PDF",
+        value: "pdf",
+        tooltip: "Activer/désactiver le PDF",
+        template: (item: any) => itemRenderer(item),
+      });
+    }
+    */
+    if (mode === "create" || sharedNotesType !== "none") {
+      allItems.push({
+        name: "Notes partagées",
+        value: "sharedNotes",
+        tooltip: "Activer/désactiver les notes partagées",
+        template: (item: any) => itemRenderer(item),
+      });
+    }
+    return allItems;
+  }, []);
+  const activeIndex = useMemo(() => {
+    const index = items.findIndex((item) => item.value === pedagoTab);
+    return index;
+  }, [items, pedagoTab]);
+
+  return (
+    <TabMenu
+      className={styles.pedagoTabMenu}
+      model={items}
+      activeIndex={activeIndex}
+      onTabChange={(e) => {
+        dispatch(setPedagoTab(items[e.index].value));
+      }}
+    />
+  );
+};
+
+const ShowHideGradingButton: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const mode = useAppSelector(selectMode);
+  const hasGradingOrComments = useAppSelector(selectHasGradingOrComments);
+  const isGradingVisible = useAppSelector(selectIsGradingVisible);
+  const canShowGrading = hasGradingOrComments || mode === "review";
+
+  return (
+    <Button
+      size="small"
+      icon="pi pi-graduation-cap"
+      disabled={!canShowGrading}
+      severity={canShowGrading ? "info" : "secondary"}
+      aria-label="Afficher/Masquer la notation"
+      tooltip={canShowGrading ? "Afficher/Masquer la notation" : "Pas de note"}
+      tooltipOptions={{
+        position: "left",
+        showDelay: settings.TOOLTIP_SHOW_DELAY,
+        showOnDisabled: true,
+      }}
+      onClick={() => dispatch(toggleIsGradingVisible())}
+      style={{ flexShrink: 0 }}
+      outlined={!isGradingVisible || !canShowGrading}
+    />
+  );
+};

package/src/features/pedago/SharedNotesEditor.tsx

@@ -0,0 +1,145 @@
+import { useCapytaleRichTextEditor } from "@capytale/capytale-rich-text-editor";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import {
+  selectSharedNotesContent,
+  selectMode,
+  setCanSaveSharedNotes,
+  setIsMPDirty,
+  setLexicalSharedNotesState,
+  selectWorkflow,
+  selectSharedNotesType,
+  setSharedNotesType,
+} from "../activityData/activityDataSlice";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import { Toast } from "primereact/toast";
+import settings from "../../settings";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+
+const SharedNotesEditor: React.FC = forwardRef((_props, ref) => {
+  const [Editor, getState, _canSave] = useCapytaleRichTextEditor();
+  const dispatch = useAppDispatch();
+  const toast = useRef<Toast>(null);
+  const mode = useAppSelector(selectMode);
+  const workflow = useAppSelector(selectWorkflow);
+  const isEditable =
+    mode === "create" ||
+    (mode === "assignment" && workflow === "current") ||
+    mode === "review";
+  const initialEditorState = useAppSelector(selectSharedNotesContent);
+  const initialStateOnChangeDone = useRef<boolean>(false);
+  const sharedNotesType = useAppSelector(selectSharedNotesType);
+
+  const [helpDialogVisible, setHelpDialogVisible] = useState(false);
+
+  useImperativeHandle(ref, () => {
+    return {
+      save: async () => {
+        const state = await getState();
+        dispatch(setLexicalSharedNotesState(state.json));
+      },
+    };
+  });
+
+  return (
+    <>
+      <Toast position="bottom-right" ref={toast} />
+      <>
+        {sharedNotesType === "none" && (
+          <>
+            <p>Pas de notes partagées.</p>
+            <Button
+              label="Créer des notes partagées"
+              onClick={() => dispatch(setSharedNotesType("rich"))}
+            />
+            <div style={{ textAlign: "start", padding: "16px" }}>
+              <h3>Que sont les notes partagées ?</h3>
+              <p>
+                Les notes partagées permettent aux élèves de communiquer avec
+                leur enseignant. L'enseignant donne le contenu initial des notes
+                partagées, et les élèves peuvent le modifier, notamment pour
+                répondre à des questions, expliciter une démarche ou faire des
+                remarques sur leur travail. L'enseignant peut également modifier
+                les notes partagées pour répondre aux élèves.
+              </p>
+              <p>
+                Les notes partagées peuvent contenir du texte, des images, des
+                liens, etc., tout comme les consignes. La différence principale
+                avec les consignes est que les élèves peuvent modifier le
+                contenu des notes partagées. Elles sont un outil de
+                communication supplémentaire entre l'enseignant et les élèves.
+              </p>
+            </div>
+            <Button
+              severity="secondary"
+              size="small"
+              icon={"pi pi-question-circle"}
+              onClick={() => {
+                setHelpDialogVisible(true);
+              }}
+              outlined
+              label="En savoir plus"
+              style={{ marginBottom: "16px" }}
+            />
+            <Dialog
+              id="metaPlayerHelpDialog"
+              header="Documentation"
+              visible={helpDialogVisible}
+              onHide={() => setHelpDialogVisible(false)}
+              maximizable={true}
+            >
+              <iframe
+                src={
+                  "https://capytale2.ac-paris.fr/wiki/doku.php?id=notes_partagees"
+                }
+                style={{ width: "100%", height: "100%" }}
+                title="Documentation"
+              />
+            </Dialog>
+          </>
+        )}
+        {sharedNotesType === "rich" && (
+          <Editor
+            placeholderText={
+              mode === "create"
+                ? "Écrivez le contenu initial des notes partagées ici..."
+                : "Les notes partagées sont vides, vous pouvez les remplir ici..."
+            }
+            htmlInitialContent={initialEditorState ? undefined : ""}
+            initialEditorState={initialEditorState || undefined}
+            jsonSizeLimit={settings.STATEMENT_MAX_SIZE}
+            onChange={(editorState) => {
+              dispatch(setLexicalSharedNotesState(editorState));
+              if (initialStateOnChangeDone.current) {
+                dispatch(setIsMPDirty(true));
+              } else {
+                initialStateOnChangeDone.current = true;
+              }
+            }}
+            onJsonSizeLimitExceeded={() => {
+              dispatch(setCanSaveSharedNotes(false));
+              toast.current!.show({
+                summary: "Erreur",
+                detail: `Le contenu des notes partagées est trop volumineux. Veuillez le réduire avant de l'enregistrer.\nPeut-être avez-vous inséré une image trop volumineuse ?`,
+                severity: "error",
+                life: 10000,
+              });
+            }}
+            onJsonSizeLimitMet={() => {
+              dispatch(setCanSaveSharedNotes(true));
+              toast.current!.show({
+                summary: "Succès",
+                detail: `Le contenu des notes partagées ne dépasse plus la taille limite.`,
+                severity: "success",
+                life: 4000,
+              });
+            }}
+            isEditable={isEditable}
+          />
+        )}
+      </>
+    </>
+  );
+});
+
+export default SharedNotesEditor;