From fa94cd194d194be4489c146eb424d67b8821832a Mon Sep 17 00:00:00 2001 From: Mountler Date: Wed, 11 Dec 2024 12:48:57 +0100 Subject: [PATCH] added completion button in modal for h5p elements --- CHANGELOG.md | 1 + .../ILearningElementModalPresenter.ts | 2 + .../LearningElementModal.tsx | 52 +++++++++++-------- .../LearningElementModalPresenter.ts | 8 +++ .../LearningElementModalViewModel.ts | 2 + .../ReactBaseComponents/StyledModal.tsx | 12 ++--- .../ReactRelated/ReactEntryPoint/App.css | 4 ++ ...reakTimeNotificationOverview.test.tsx.snap | 4 +- .../ColorPickerModal.test.tsx.snap | 8 +-- .../ControlsExplanationModal.test.tsx.snap | 4 +- 10 files changed, 60 insertions(+), 37 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5ed86b164..38fc61f14 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ The AdLer Engine uses [Semantic Versioning](http://semver.org/). - new icons for avatar creator categories and door icons in 2d - new 3d icons for doors - new 2d & 3d icon for previously known h5p element +- added completion button in modal for h5p elements ### Changed diff --git a/src/Components/Core/Presentation/React/LearningSpaceDisplay/LearningElementModal/ILearningElementModalPresenter.ts b/src/Components/Core/Presentation/React/LearningSpaceDisplay/LearningElementModal/ILearningElementModalPresenter.ts index 93a7faf2a..1c7f6096e 100644 --- a/src/Components/Core/Presentation/React/LearningSpaceDisplay/LearningElementModal/ILearningElementModalPresenter.ts +++ b/src/Components/Core/Presentation/React/LearningSpaceDisplay/LearningElementModal/ILearningElementModalPresenter.ts @@ -1,7 +1,9 @@ import LearningElementTO from "src/Components/Core/Application/DataTransferObjects/LearningElementTO"; import ILearningWorldAdapter from "src/Components/Core/Application/Ports/LearningWorldPort/ILearningWorldAdapter"; +import { ComponentID } from "src/Components/Core/Domain/Types/EntityTypes"; export default interface ILearningElementModalPresenter extends ILearningWorldAdapter { onLearningElementLoaded(elementTO: LearningElementTO): void; + onLearningElementScored(hasScored: boolean, elementID: ComponentID): void; } diff --git a/src/Components/Core/Presentation/React/LearningSpaceDisplay/LearningElementModal/LearningElementModal.tsx b/src/Components/Core/Presentation/React/LearningSpaceDisplay/LearningElementModal/LearningElementModal.tsx index ffd4feb85..329648de5 100644 --- a/src/Components/Core/Presentation/React/LearningSpaceDisplay/LearningElementModal/LearningElementModal.tsx +++ b/src/Components/Core/Presentation/React/LearningSpaceDisplay/LearningElementModal/LearningElementModal.tsx @@ -71,6 +71,34 @@ export default function LearningElementModal({ className }: AdLerUIComponent) { viewModel.type.Value === LearningElementTypes.video || viewModel.type.Value === LearningElementTypes.image || viewModel.type.Value === LearningElementTypes.pdf; + + const completionButton = () => { + return ( +
+ { + if ( + isPrimitive && + viewModel.type?.Value !== "h5p" && + viewModel.isScoreable?.Value === true + ) { + await controller.scoreLearningElement(); + } + controller.closeModal(); + controller.showBottomToolTip(); + }} + > + {translate("submitElement")} + +
+ ); + }; + return ( {createModalContent(viewModel, controller)} - {isPrimitive && ( -
- { - if ( - isPrimitive && - viewModel.type?.Value !== "h5p" && - viewModel.isScoreable?.Value === true - ) { - await controller.scoreLearningElement(); - } - controller.closeModal(); - controller.showBottomToolTip(); - }} - > - {translate("submitElement")} - -
- )} ); } diff --git a/src/Components/Core/Presentation/React/LearningSpaceDisplay/LearningElementModal/LearningElementModalPresenter.ts b/src/Components/Core/Presentation/React/LearningSpaceDisplay/LearningElementModal/LearningElementModalPresenter.ts index 3c81e84db..25bb9982e 100644 --- a/src/Components/Core/Presentation/React/LearningSpaceDisplay/LearningElementModal/LearningElementModalPresenter.ts +++ b/src/Components/Core/Presentation/React/LearningSpaceDisplay/LearningElementModal/LearningElementModalPresenter.ts @@ -1,6 +1,7 @@ import LearningElementTO from "src/Components/Core/Application/DataTransferObjects/LearningElementTO"; import ILearningElementModalPresenter from "./ILearningElementModalPresenter"; import LearningElementModalViewModel from "./LearningElementModalViewModel"; +import { ComponentID } from "src/Components/Core/Domain/Types/EntityTypes"; export default class LearningElementModalPresenter implements ILearningElementModalPresenter @@ -13,6 +14,7 @@ export default class LearningElementModalPresenter this.viewModel.name.Value = elementTO.name; this.viewModel.filePath.Value = elementTO.filePath ?? ""; this.viewModel.isScoreable.Value = elementTO.isScoreable; + this.viewModel.hasScored.Value = elementTO.hasScored; if (this.viewModel.isScoreable.Value) { this.viewModel.isVisible.Value = false; @@ -24,4 +26,10 @@ export default class LearningElementModalPresenter this.viewModel.isOpen.Value = true; } } + + onLearningElementScored(hasScored: boolean, elementID: ComponentID): void { + if (this.viewModel.id.Value === elementID) { + this.viewModel.hasScored.Value = hasScored; + } + } } diff --git a/src/Components/Core/Presentation/React/LearningSpaceDisplay/LearningElementModal/LearningElementModalViewModel.ts b/src/Components/Core/Presentation/React/LearningSpaceDisplay/LearningElementModal/LearningElementModalViewModel.ts index 2f7b84543..c067bb012 100644 --- a/src/Components/Core/Presentation/React/LearningSpaceDisplay/LearningElementModal/LearningElementModalViewModel.ts +++ b/src/Components/Core/Presentation/React/LearningSpaceDisplay/LearningElementModal/LearningElementModalViewModel.ts @@ -10,6 +10,8 @@ export default class LearningElementModalViewModel { isScoreable = new Observable(); isVisible = new Observable(true); + hasScored = new Observable(); + readonly openDelay: number = 1600; parentSpaceID = new Observable(); diff --git a/src/Components/Core/Presentation/React/ReactRelated/ReactBaseComponents/StyledModal.tsx b/src/Components/Core/Presentation/React/ReactRelated/ReactBaseComponents/StyledModal.tsx index 82b4b8a50..17c59fb37 100644 --- a/src/Components/Core/Presentation/React/ReactRelated/ReactBaseComponents/StyledModal.tsx +++ b/src/Components/Core/Presentation/React/ReactRelated/ReactBaseComponents/StyledModal.tsx @@ -12,7 +12,7 @@ type Props = Partial<{ title: string; canClose: boolean; onClose: () => void; - footer: string; + footer: JSX.Element; [x: string]: any; }>; @@ -59,7 +59,7 @@ export default function StyledModal({ onClick={(event) => { event.stopPropagation(); }} - className="z-50 p-2 rounded-lg bg-gradient-to-br from-adlerbggradientfrom to-adlerbggradientto max-w-[95%] max-h-[95%] overflow-hidden" + className="z-50 p-2 rounded-lg bg-gradient-to-br from-adlerbggradientfrom to-adlerbggradientto max-w-[95%] max-h-[95%] overflow-hidden flex flex-col" >
{title}
@@ -78,15 +78,11 @@ export default function StyledModal({ )}
{/*Content*/} -
+
{children}
{/*Optional Footer*/} - {hasFooter && ( -
-

{footer}

-
- )} + {hasFooter && <>{footer}}
diff --git a/src/Components/Core/Presentation/React/ReactRelated/ReactEntryPoint/App.css b/src/Components/Core/Presentation/React/ReactRelated/ReactEntryPoint/App.css index 41a6dceb3..a52b1a377 100644 --- a/src/Components/Core/Presentation/React/ReactRelated/ReactEntryPoint/App.css +++ b/src/Components/Core/Presentation/React/ReactRelated/ReactEntryPoint/App.css @@ -225,3 +225,7 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } + +.scrollGutter { + scrollbar-gutter: stable; +} diff --git a/src/Components/CoreTest/Presentation/React/GeneralComponents/BreakTimeNotificationOverview/__snapshots__/BreakTimeNotificationOverview.test.tsx.snap b/src/Components/CoreTest/Presentation/React/GeneralComponents/BreakTimeNotificationOverview/__snapshots__/BreakTimeNotificationOverview.test.tsx.snap index 57c8f27ce..dad934978 100644 --- a/src/Components/CoreTest/Presentation/React/GeneralComponents/BreakTimeNotificationOverview/__snapshots__/BreakTimeNotificationOverview.test.tsx.snap +++ b/src/Components/CoreTest/Presentation/React/GeneralComponents/BreakTimeNotificationOverview/__snapshots__/BreakTimeNotificationOverview.test.tsx.snap @@ -9,7 +9,7 @@ exports[`BreakTimeNotificationOverview should render 1`] = ` class="fixed top-0 bottom-0 left-0 right-0 flex items-center justify-center h-full bg-blacktrans" >