added completion button in modal for h5p elements

ProjektAdLer · Dec 11, 2024 · fa94cd1 · fa94cd1
1 parent eff66fd
commit fa94cd1
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 37 deletions.
diff --git 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/...ntation/React/LearningSpaceDisplay/LearningElementModal/ILearningElementModalPresenter.ts b/...ntation/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/...ore/Presentation/React/LearningSpaceDisplay/LearningElementModal/LearningElementModal.tsx b/...ore/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 (
+      <div className="sticky bottom-0 grid mt-3 mb-2 justify-items-end">
+        <StyledButton
+          shape="freeFloatCenter"
+          disabled={
+            viewModel.type.Value === LearningElementTypes.h5p &&
+            !viewModel.hasScored.Value
+          }
+          onClick={async () => {
+            if (
+              isPrimitive &&
+              viewModel.type?.Value !== "h5p" &&
+              viewModel.isScoreable?.Value === true
+            ) {
+              await controller.scoreLearningElement();
+            }
+            controller.closeModal();
+            controller.showBottomToolTip();
+          }}
+        >
+          {translate("submitElement")}
+        </StyledButton>
+      </div>
+    );
+  };
+
   return (
     <StyledModal
       title={viewModel.name.Value}
@@ -79,35 +107,17 @@ export default function LearningElementModal({ className }: AdLerUIComponent) {
         controller.showBottomToolTip();
       }}
       smallCloseButton={isPrimitive}
+      hasFooter={true}
+      footer={completionButton()}
       showModal={isOpen}
       className={tailwindMerge(
         className,
-        "flex flex-col justify-center gap-2 p-2 m-3 rounded-lg",
+        "justify-center gap-2 p-2 m-3 rounded-lg",
         modalStyleByTypeMap[elementType as keyof typeof modalStyleByTypeMap],
       )}
       style={{ visibility: isVisible ? "visible" : "hidden" }}
     >
       {createModalContent(viewModel, controller)}
-      {isPrimitive && (
-        <div className="grid mt-2 mb-1 justify-items-end">
-          <StyledButton
-            shape="freeFloatCenter"
-            onClick={async () => {
-              if (
-                isPrimitive &&
-                viewModel.type?.Value !== "h5p" &&
-                viewModel.isScoreable?.Value === true
-              ) {
-                await controller.scoreLearningElement();
-              }
-              controller.closeModal();
-              controller.showBottomToolTip();
-            }}
-          >
-            {translate("submitElement")}
-          </StyledButton>
-        </div>
-      )}
     </StyledModal>
   );
 }
diff --git a/...entation/React/LearningSpaceDisplay/LearningElementModal/LearningElementModalPresenter.ts b/...entation/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/...entation/React/LearningSpaceDisplay/LearningElementModal/LearningElementModalViewModel.ts b/...entation/React/LearningSpaceDisplay/LearningElementModal/LearningElementModalViewModel.ts
@@ -10,6 +10,8 @@ export default class LearningElementModalViewModel {
   isScoreable = new Observable<boolean>();
   isVisible = new Observable<boolean>(true);
 
+  hasScored = new Observable<boolean>();
+
   readonly openDelay: number = 1600;
 
   parentSpaceID = new Observable<ComponentID>();

diff --git 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"
         >
           <div className="flex items-center justify-center w-full gap-2 p-1 pb-3 text-xl font-bold text-adlerdarkblue lg:roboto-black lg:text-2xl h-fit">
             <div className="w-full">{title}</div>
@@ -78,15 +78,11 @@ export default function StyledModal({
             )}
           </div>
           {/*Content*/}
-          <div className="px-1 overflow-auto rounded-lg font-regular h-fit">
+          <div className="px-1 overflow-auto rounded-lg font-regular h-fit scrollGutter">
             {children}
           </div>
           {/*Optional Footer*/}
-          {hasFooter && (
-            <div className="modal-footer ">
-              <p>{footer}</p>
-            </div>
-          )}
+          {hasFooter && <>{footer}</>}
         </div>
       </div>
     </StyledContainer>

diff --git 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/...s/BreakTimeNotificationOverview/__snapshots__/BreakTimeNotificationOverview.test.tsx.snap b/...s/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"
     >
       <div
-        class="z-50 p-2 rounded-lg bg-gradient-to-br from-adlerbggradientfrom to-adlerbggradientto max-w-[95%] max-h-[95%] overflow-hidden"
+        class="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"
       >
         <div
           class="flex items-center justify-center w-full gap-2 p-1 pb-3 text-xl font-bold text-adlerdarkblue lg:roboto-black lg:text-2xl h-fit"
@@ -30,7 +30,7 @@ exports[`BreakTimeNotificationOverview should render 1`] = `
           </button>
         </div>
         <div
-          class="px-1 overflow-auto rounded-lg font-regular h-fit"
+          class="px-1 overflow-auto rounded-lg font-regular h-fit scrollGutter"
         >
           <div
             class="text-md font-bold text-adlerdarkblue pl-1 overflow-y-auto max-h-[90vh] lg:max-h-[85vh]"

diff --git a/...entation/React/GeneralComponents/ColorPicker/__snapshots__/ColorPickerModal.test.tsx.snap b/...entation/React/GeneralComponents/ColorPicker/__snapshots__/ColorPickerModal.test.tsx.snap
@@ -14,7 +14,7 @@ Object {
             style="width: 50%;"
           >
             <div
-              class="z-50 p-2 rounded-lg bg-gradient-to-br from-adlerbggradientfrom to-adlerbggradientto max-w-[95%] max-h-[95%] overflow-hidden"
+              class="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"
             >
               <div
                 class="flex items-center justify-center w-full gap-2 p-1 pb-3 text-xl font-bold text-adlerdarkblue lg:roboto-black lg:text-2xl h-fit"
@@ -24,7 +24,7 @@ Object {
                 />
               </div>
               <div
-                class="px-1 overflow-auto rounded-lg font-regular h-fit"
+                class="px-1 overflow-auto rounded-lg font-regular h-fit scrollGutter"
               >
                 <div
                   class="inline-grid grid-cols-8 gap-2 row-span-8"
@@ -568,7 +568,7 @@ Object {
           style="width: 50%;"
         >
           <div
-            class="z-50 p-2 rounded-lg bg-gradient-to-br from-adlerbggradientfrom to-adlerbggradientto max-w-[95%] max-h-[95%] overflow-hidden"
+            class="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"
           >
             <div
               class="flex items-center justify-center w-full gap-2 p-1 pb-3 text-xl font-bold text-adlerdarkblue lg:roboto-black lg:text-2xl h-fit"
@@ -578,7 +578,7 @@ Object {
               />
             </div>
             <div
-              class="px-1 overflow-auto rounded-lg font-regular h-fit"
+              class="px-1 overflow-auto rounded-lg font-regular h-fit scrollGutter"
             >
               <div
                 class="inline-grid grid-cols-8 gap-2 row-span-8"

diff --git a/...lComponents/ControlsExplanationModal/__snapshots__/ControlsExplanationModal.test.tsx.snap b/...lComponents/ControlsExplanationModal/__snapshots__/ControlsExplanationModal.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`ControlsExplanationModal should render 1`] = `
       class="fixed top-0 bottom-0 left-0 right-0 flex items-center justify-center h-full bg-blacktrans"
     >
       <div
-        class="z-50 p-2 rounded-lg bg-gradient-to-br from-adlerbggradientfrom to-adlerbggradientto max-w-[95%] max-h-[95%] overflow-hidden"
+        class="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"
       >
         <div
           class="flex items-center justify-center w-full gap-2 p-1 pb-3 text-xl font-bold text-adlerdarkblue lg:roboto-black lg:text-2xl h-fit"
@@ -30,7 +30,7 @@ exports[`ControlsExplanationModal should render 1`] = `
           </button>
         </div>
         <div
-          class="px-1 overflow-auto rounded-lg font-regular h-fit"
+          class="px-1 overflow-auto rounded-lg font-regular h-fit scrollGutter"
         >
           <div
             class="portrait:max-w-[90vw] max-h-[80vh] max-w-6xl grid landscape:grid-rows-6 landscape:grid-flow-col portrait:grid-flow-row portrait:grid-cols-1 portrait:grid-rows-auto gap-x-8 landscape:gap-y-3 portrait:gap-6 pb-4 text-xs lg:text-sm"