@capytale/meta-player 0.0.1

package/src/features/navbar/SidebarContent.tsx

@@ -0,0 +1,125 @@
+import { FC } from "react";
+
+import { Fieldset } from "primereact/fieldset";
+
+import { selectOrientation, setLayout } from "../layout/layoutSlice";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { RadioButton } from "primereact/radiobutton";
+
+import styles from "./style.module.scss";
+import {
+  selectThemeNameOrAuto,
+  setAutoSwitch,
+  switchToTheme,
+} from "../theming/themingSlice";
+import { selectSidebarActions } from "./navbarSlice";
+import ActivitySidebarActions from "./ActivitySidebarActions";
+import { classNames } from "primereact/utils";
+import {
+  selectCanChoosePedagoLayout,
+  selectCanChooseTheme,
+} from "../activityData/activityDataSlice";
+
+const SidebarContent: FC = () => {
+  const canChooseOrientation = useAppSelector(selectCanChoosePedagoLayout);
+  const canChooseTheme = useAppSelector(selectCanChooseTheme);
+  const orientation = useAppSelector(selectOrientation);
+  const themeName = useAppSelector(selectThemeNameOrAuto);
+  const sidebarActions = useAppSelector(selectSidebarActions);
+  const dispatch = useAppDispatch();
+  return (
+    <>
+      {sidebarActions.length > 0 && (
+        <Fieldset
+          legend="Actions"
+          className={classNames(
+            styles.sidebarFieldset,
+            styles.sidebarFieldsetButtons,
+          )}
+        >
+          <ActivitySidebarActions />
+        </Fieldset>
+      )}
+      {canChooseOrientation && (
+        <Fieldset legend="Disposition" className={styles.sidebarFieldset}>
+          <div className={styles.sidebarRadioButtons}>
+            <div className={styles.sidebarRadioGroup}>
+              <RadioButton
+                inputId="rb-horizontal"
+                name="horizontal"
+                value="horizontal"
+                onChange={(e) => dispatch(setLayout(e.value))}
+                checked={orientation === "horizontal"}
+              />
+              <label htmlFor="rb-horizontal" className="ml-2">
+                Horizontale
+              </label>
+            </div>
+            <div className={styles.sidebarRadioGroup}>
+              <RadioButton
+                inputId="rb-vertical"
+                name="vertical"
+                value="vertical"
+                onChange={(e) => dispatch(setLayout(e.value))}
+                checked={orientation === "vertical"}
+              />
+              <label htmlFor="rb-vertical" className="ml-2">
+                Verticale
+              </label>
+            </div>
+          </div>
+        </Fieldset>
+      )}
+      {canChooseTheme && (
+        <Fieldset legend="Thème" className={styles.sidebarFieldset}>
+          <div className={styles.sidebarRadioButtons}>
+            <div className={styles.sidebarRadioGroup}>
+              <RadioButton
+                inputId="rb-light"
+                name="light"
+                value="light"
+                onChange={(_e) => {
+                  dispatch(setAutoSwitch(false));
+                  dispatch(switchToTheme("light"));
+                }}
+                checked={themeName === "Clair"}
+              />
+              <label htmlFor="rb-light" className="ml-2">
+                Clair
+              </label>
+            </div>
+            <div className={styles.sidebarRadioGroup}>
+              <RadioButton
+                inputId="rb-dark"
+                name="dark"
+                value="dark"
+                onChange={(_e) => {
+                  dispatch(setAutoSwitch(false));
+                  dispatch(switchToTheme("dark"));
+                }}
+                checked={themeName === "Sombre"}
+              />
+              <label htmlFor="rb-dark" className="ml-2">
+                Sombre
+              </label>
+            </div>
+            <div className={styles.sidebarRadioGroup}>
+              <RadioButton
+                inputId="rb-auto"
+                name="auto"
+                value="auto"
+                onChange={(_e) => dispatch(setAutoSwitch(true))}
+                checked={themeName === "Système (auto)"}
+              />
+              <label htmlFor="rb-auto" className="ml-2">
+                Système (auto)
+              </label>
+            </div>
+          </div>
+        </Fieldset>
+      )}
+    </>
+  );
+};
+
+export default SidebarContent;

package/src/features/navbar/index.tsx

@@ -0,0 +1,33 @@
+import { MD } from "../../utils/breakpoints";
+import { useWindowSize } from "@uidotdev/usehooks";
+import ActivityInfo from "./ActivityInfo";
+import ActivityMenu from "./ActivityMenu";
+import CapytaleMenu from "./CapytaleMenu";
+import styles from "./style.module.scss";
+import { useMemo } from "react";
+import { useAppSelector } from "../../app/hooks";
+import { selectReturnUrl } from "../activityData/activityDataSlice";
+
+const Navbar: React.FC = () => {
+  const returnUrl = useAppSelector(selectReturnUrl);
+  const windowsSize = useWindowSize();
+  const isSmall = useMemo(
+    () => windowsSize.width && windowsSize.width < MD,
+    [windowsSize.width],
+  );
+  const logoText = isSmall ? "C" : "CAPYTALE";
+  return (
+    <div className={styles.navbar}>
+      <div className={styles.navbarContainer}>
+        <div className={styles.navbarLogo}>
+          <a href={returnUrl}>{logoText}</a>
+        </div>
+        <CapytaleMenu />
+        <ActivityInfo />
+        <ActivityMenu />
+      </div>
+    </div>
+  );
+};
+
+export default Navbar;

package/src/features/navbar/navbarSlice.ts

@@ -0,0 +1,51 @@
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { createAppSlice } from "../../app/createAppSlice";
+
+export type QuickAction = {
+  title: string;
+  icon: string;
+  action: () => void;
+};
+
+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/student-utils.ts

@@ -0,0 +1,11 @@
+import { StudentInfo } from "../activityData/activityDataSlice";
+
+export function studentNameFromInfo(studentInfo: StudentInfo | null) {
+  if (!studentInfo || (!studentInfo.firstName && !studentInfo.lastName)) {
+    return null;
+  }
+  if (studentInfo.class && studentInfo.class !== "enseignants") {
+    return `${studentInfo.firstName} ${studentInfo.lastName} — ${studentInfo.class}`;
+  }
+  return `${studentInfo.firstName} ${studentInfo.lastName}`;
+}

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

@@ -0,0 +1,162 @@
+.navbar {
+  --navbar-text-color: rgba(255, 255, 255, 0.95);
+  background-color: var(--surface-800);
+  display: flex;
+  align-items: center;
+  color: var(--navbar-text-color);
+  overflow: hidden;
+  color-scheme: dark;
+  :global(.dark-theme) & {
+    --navbar-text-color: var(--text-color);
+    background-color: var(--surface-50);
+  }
+  & :global(.p-button-outlined),
+  & :global(.p-button-text) {
+    color: var(--navbar-text-color);
+  }
+  & :global(.p-button-outlined) {
+    border-color: var(--navbar-text-color);
+  }
+  :global(.light-theme) & :global(.p-button.p-button-secondary:enabled:focus) {
+    box-shadow:
+      0 0 0 2px #1c2127,
+      0 0 0 4px rgba(255, 255, 255, 0.7),
+      0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  :global(.light-theme) & :global(.p-button.p-button-warning:enabled:focus) {
+    box-shadow:
+      0 0 0 2px #1c2127,
+      0 0 0 4px rgba(249, 115, 22, 0.7),
+      0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+}
+
+.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);
+  }
+}
+
+.navbarContainer {
+  height: 60px;
+  flex-grow: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  overflow: hidden;
+  & > * {
+    flex-shrink: 0;
+  }
+}
+
+.navbarLogo {
+  font-family: Ubuntu, Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  font-size: 24px;
+  letter-spacing: 2px;
+  height: 100%;
+  & > * {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 16px;
+    color: var(--navbar-text-color);
+    text-decoration: none;
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+}
+
+.capytaleMenu {
+  display: flex;
+  gap: 8px;
+}
+
+.activityInfo {
+  flex-shrink: 1;
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  gap: 12px;
+}
+
+.activityInfoText {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  & > * {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+}
+
+.activityInfoTitle {
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.activityLogo {
+  width: 35px;
+  height: 37px;
+  border-radius: 6px;
+  flex-shrink: 0;
+  @media only screen and (max-width: 992px) {
+    display: none;
+  }
+}
+
+.activityMenu {
+  padding-right: 16px;
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  align-items: center;
+}
+
+.sidebarFieldset {
+  margin-bottom: 8px;
+}
+
+.sidebarFieldsetButtons :global(.p-fieldset-content) {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.sidebarRadioButtons {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sidebarRadioGroup {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}

package/src/features/pedago/AnswerSheetEditor.tsx

@@ -0,0 +1,65 @@
+import { useCapytaleRichTextEditor } from "@capytale/capytale-rich-text-editor";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import {
+  selectAnswerSheetContent,
+  selectMode,
+  setCanSaveAnswerSheet,
+  setLexicalAnswerSheetState,
+} from "../activityData/activityDataSlice";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { Toast } from "primereact/toast";
+import settings from "../../settings";
+
+const AnswerSheetEditor: React.FC = forwardRef((_props, ref) => {
+  const [Editor, getState, _canSave] = useCapytaleRichTextEditor();
+  const dispatch = useAppDispatch();
+  const toast = useRef<Toast>(null);
+  const mode = useAppSelector(selectMode);
+  const isEditable =
+    mode === "create" || mode === "assignment" || mode === "review";
+  const initialEditorState = useAppSelector(selectAnswerSheetContent);
+
+  useImperativeHandle(ref, () => {
+    return {
+      save: async () => {
+        const state = await getState();
+        dispatch(setLexicalAnswerSheetState(state.json));
+      },
+    };
+  });
+
+  return (
+    <>
+      <Toast position="bottom-right" ref={toast} />
+      <Editor
+        placeholderText="Écrivez le contenu initial de la fiche réponse ici..."
+        initialEditorState={initialEditorState}
+        jsonSizeLimit={settings.STATEMENT_MAX_SIZE}
+        onChange={(editorState) => {
+          dispatch(setLexicalAnswerSheetState(editorState));
+        }}
+        onJsonSizeLimitExceeded={() => {
+          dispatch(setCanSaveAnswerSheet(false));
+          toast.current!.show({
+            summary: "Erreur",
+            detail: `Le contenu de la fiche réponse 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(setCanSaveAnswerSheet(true));
+          toast.current!.show({
+            summary: "Succès",
+            detail: `Le contenu de la fiche réponse ne dépasse plus la taille limite.`,
+            severity: "success",
+            life: 4000,
+          });
+        }}
+        isEditable={isEditable}
+      />
+    </>
+  );
+});
+
+export default AnswerSheetEditor;

package/src/features/pedago/InstructionsEditor.tsx

@@ -0,0 +1,82 @@
+import { useCapytaleRichTextEditor } from "@capytale/capytale-rich-text-editor";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import {
+  selectInstructions,
+  selectMode,
+  setCanSaveInstructions,
+  setLexicalInstructionsState,
+} from "../activityData/activityDataSlice";
+import {
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
+import { Toast } from "primereact/toast";
+import settings from "../../settings";
+
+const InstructionsEditor: React.FC = forwardRef((_props, ref) => {
+  const [Editor, getState, _canSave] = useCapytaleRichTextEditor();
+  const dispatch = useAppDispatch();
+  const toast = useRef<Toast>(null);
+  const mode = useAppSelector(selectMode);
+  const isEditable = mode === "create";
+  const initialInstructions = useAppSelector(selectInstructions);
+  const htmlInitialContent = useMemo(() => {
+    return initialInstructions?.format === "lexical"
+      ? undefined
+      : initialInstructions?.value === null
+        ? undefined
+        : (initialInstructions?.value as string) || ""; // HTML content in value
+  }, [initialInstructions]);
+  const initialEditorState = useMemo(() => {
+    return initialInstructions?.format === "lexical"
+      ? initialInstructions?.value
+      : undefined;
+  }, [initialInstructions]);
+
+  useImperativeHandle(ref, () => {
+    return {
+      save: async () => {
+        const state = await getState();
+        dispatch(setLexicalInstructionsState(state.json));
+      },
+    };
+  });
+
+  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));
+        }}
+        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}
+      />
+    </>
+  );
+});
+
+export default InstructionsEditor;