@capytale/meta-player 0.9.7 → 0.9.9

package/src/features/navbar/capytale-menu/CountdownAndSaveButton.tsx

@@ -1,115 +1,124 @@
-import { FC, useMemo, useState } from "react";
-import Countdown from "./Countdown";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import { ML } from "../../../utils/breakpoints";
-import { useAppDispatch, useAppSelector } from "../../../app/hooks";
-import {
-  selectHasEvaluations,
-  selectIsDirty,
-  selectMode,
-  selectPreventEditIfHasEvaluations,
-  selectSaveState,
-  selectShowSaveButton,
-  setSaveState,
-} from "../../activityData/activityDataSlice";
-import { useWindowSize } from "@uidotdev/usehooks";
-import { selectShowSaveForStudents } from "../../layout/layoutSlice";
-import settings from "../../../settings";
-
-const CountdownAndSaveButton: FC = () => {
-  const dispatch = useAppDispatch();
-  const saveState = useAppSelector(selectSaveState);
-  const windowsSize = useWindowSize();
-  const isQuiteSmall = useMemo(
-    () => windowsSize.width && windowsSize.width < ML,
-    [windowsSize.width],
-  );
-  const isDirty = useAppSelector(selectIsDirty);
-  const preventEditIfHasEvaluations = useAppSelector(
-    selectPreventEditIfHasEvaluations,
-  );
-  const hasEvaluations = useAppSelector(selectHasEvaluations);
-
-  const mode = useAppSelector(selectMode);
-  const showSaveButton = useAppSelector(selectShowSaveButton);
-  const showSaveForStudents = useAppSelector(selectShowSaveForStudents);
-  const hasSaveButton = useMemo(
-    () => showSaveButton && !(mode === "assignment" && !showSaveForStudents),
-    [showSaveButton, mode, showSaveForStudents],
-  );
-
-  const [editForbiddenDialogVisible, setEditForbiddenDialogVisible] =
-    useState(false);
-
-  if (mode === "create" && hasEvaluations && preventEditIfHasEvaluations) {
-    return (
-      <>
-        <Button
-          label={isQuiteSmall ? undefined : "Modification interdite"}
-          aria-label="Modification interdite"
-          severity="danger"
-          size="small"
-          icon="pi pi-save"
-          loading={saveState !== "idle"}
-          onClick={() => {
-            setEditForbiddenDialogVisible(true);
-          }}
-          tooltip={"Évaluations déjà attribuées"}
-          tooltipOptions={{
-            position: "bottom",
-            showDelay: settings.TOOLTIP_SHOW_DELAY,
-            showOnDisabled: true,
-          }}
-        />
-        <Dialog
-          header="Modification interdite"
-          visible={editForbiddenDialogVisible}
-          onHide={() => {
-            if (!editForbiddenDialogVisible) return;
-            setEditForbiddenDialogVisible(false);
-          }}
-          style={{ maxWidth: "35rem" }}
-        >
-          <p className="m-0">
-            Vous avez déjà donné des évaluations à vos élèves. Ce type
-            d'activité ne supporte pas la modification dans ce cas car cela
-            rendrait les résultats des élèves incohérents.
-          </p>
-          <p className="m-0 mt-1">
-            Si vous souhaitez modifier cette activité, vous pouvez la clôner et
-            modifier la copie, que vous pouvez ensuite proposer à vos élèves.
-          </p>
-        </Dialog>
-      </>
-    );
-  }
-
-  return (
-    <>
-      <Countdown />
-      {hasSaveButton && (
-        <Button
-          label={isQuiteSmall ? undefined : "Enregistrer"}
-          aria-label="Enregistrer"
-          disabled={!isDirty}
-          severity={"warning"}
-          size="small"
-          icon="pi pi-save"
-          loading={saveState !== "idle"}
-          onClick={() => {
-            dispatch(setSaveState("should-save"));
-          }} /**
-        tooltip={isDirty ? "Enregistrer l'activité" : "Rien à enregistrer"}
-        tooltipOptions={{
-          position: "bottom",
-          showDelay: settings.TOOLTIP_SHOW_DELAY,
-          showOnDisabled: true,
-        }} */
-        />
-      )}
-    </>
-  );
-};
-
-export default CountdownAndSaveButton;
+import { FC, useMemo, useState } from "react";
+import Countdown from "./Countdown";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { ML } from "../../../utils/breakpoints";
+import { useAppDispatch, useAppSelector } from "../../../app/hooks";
+import {
+  selectHasEvaluations,
+  selectIsDirty,
+  selectMode,
+  selectPreventEditIfHasEvaluations,
+  selectSaveState,
+  selectShowSaveButton,
+  setSaveState,
+} from "../../activityData/activityDataSlice";
+import { useWindowSize } from "@uidotdev/usehooks";
+import { selectShowSaveForStudents } from "../../layout/layoutSlice";
+import settings from "../../../settings";
+import useRemainingTimeMs from "./useRemainingTimeMs";
+
+const CountdownAndSaveButton: FC = () => {
+  const dispatch = useAppDispatch();
+  const saveState = useAppSelector(selectSaveState);
+  const windowsSize = useWindowSize();
+  const isQuiteSmall = useMemo(
+    () => windowsSize.width && windowsSize.width < ML,
+    [windowsSize.width],
+  );
+  const isDirty = useAppSelector(selectIsDirty);
+  const preventEditIfHasEvaluations = useAppSelector(
+    selectPreventEditIfHasEvaluations,
+  );
+  const hasEvaluations = useAppSelector(selectHasEvaluations);
+
+  const mode = useAppSelector(selectMode);
+  const showSaveButton = useAppSelector(selectShowSaveButton);
+  const showSaveForStudents = useAppSelector(selectShowSaveForStudents);
+  const hasSaveButton = useMemo(
+    () => showSaveButton && !(mode === "assignment" && !showSaveForStudents),
+    [showSaveButton, mode, showSaveForStudents],
+  );
+
+  const remainingTimeMs = useRemainingTimeMs();
+  const timeOver = useMemo(
+    () => remainingTimeMs !== null && remainingTimeMs <= 0,
+    [remainingTimeMs],
+  );
+
+  const [editForbiddenDialogVisible, setEditForbiddenDialogVisible] =
+    useState(false);
+
+  if (mode === "create" && hasEvaluations && preventEditIfHasEvaluations) {
+    return (
+      <>
+        <Button
+          label={isQuiteSmall ? undefined : "Modification interdite"}
+          aria-label="Modification interdite"
+          severity="danger"
+          size="small"
+          icon="pi pi-save"
+          loading={saveState !== "idle"}
+          onClick={() => {
+            setEditForbiddenDialogVisible(true);
+          }}
+          tooltip={"Évaluations déjà attribuées"}
+          tooltipOptions={{
+            position: "bottom",
+            showDelay: settings.TOOLTIP_SHOW_DELAY,
+            showOnDisabled: true,
+          }}
+        />
+        <Dialog
+          header="Modification interdite"
+          visible={editForbiddenDialogVisible}
+          onHide={() => {
+            if (!editForbiddenDialogVisible) return;
+            setEditForbiddenDialogVisible(false);
+          }}
+          style={{ maxWidth: "35rem" }}
+        >
+          <p className="m-0">
+            Vous avez déjà donné des évaluations à vos élèves. Ce type
+            d'activité ne supporte pas la modification dans ce cas car cela
+            rendrait les résultats des élèves incohérents.
+          </p>
+          <p className="m-0 mt-1">
+            Si vous souhaitez modifier cette activité, vous pouvez la clôner et
+            modifier la copie, que vous pouvez ensuite proposer à vos élèves.
+          </p>
+        </Dialog>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Countdown />
+      {hasSaveButton && (
+        <Button
+          label={
+            isQuiteSmall ? undefined : timeOver ? "Temps écoulé" : "Enregistrer"
+          }
+          aria-label="Enregistrer"
+          disabled={!isDirty || timeOver}
+          severity={timeOver ? "danger" : "warning"}
+          size="small"
+          icon="pi pi-save"
+          loading={saveState !== "idle"}
+          onClick={() => {
+            dispatch(setSaveState("should-save"));
+          }} /**
+        tooltip={isDirty ? "Enregistrer l'activité" : "Rien à enregistrer"}
+        tooltipOptions={{
+          position: "bottom",
+          showDelay: settings.TOOLTIP_SHOW_DELAY,
+          showOnDisabled: true,
+        }} */
+        />
+      )}
+    </>
+  );
+};
+
+export default CountdownAndSaveButton;