[BUG FIX] [MER-3918] Simple Author and Advanced Author - Slider compo…

…nent - Setting intervals (#5240) * MER-3918 * Simple Authoring * Update SliderAuthor.tsx * Update SliderAuthor.tsx * Update SliderAuthor.tsx
Simon-Initiative · Nov 19, 2024 · 0bdabce · 0bdabce
1 parent 9b31efd
commit 0bdabce
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/assets/src/components/parts/janus-slider/SliderAuthor.tsx b/assets/src/components/parts/janus-slider/SliderAuthor.tsx
@@ -1,10 +1,11 @@
 import React, { CSSProperties, useEffect, useRef, useState } from 'react';
 import { AuthorPartComponentProps } from 'components/parts/types/parts';
+import { clone } from 'utils/common';
 import './Slider.scss';
 import { SliderModel } from './schema';
 
 const SliderAuthor: React.FC<AuthorPartComponentProps<SliderModel>> = (props) => {
-  const { id, model } = props;
+  const { id, model, onSaveConfigure } = props;
 
   const {
     z,
@@ -71,6 +72,18 @@ const SliderAuthor: React.FC<AuthorPartComponentProps<SliderModel>> = (props) =>
     if (snapInterval) {
       const options = [];
       const numberOfTicks = (maximum - minimum) / snapInterval;
+      const numberOfTicksThreshold = 100;
+      if (numberOfTicks > numberOfTicksThreshold) {
+        const modelClone = clone(model);
+        const snapIntervalThreshold = (maximum - minimum) / numberOfTicksThreshold;
+        // As per the requirement, Users cannot enter a value that divides the slider into more than 100 equal sections.
+        // if it goes beyond that, we need to calculate the snapIntervalThreshold between the min and max values
+        // and set the interval
+        modelClone.snapInterval = +snapIntervalThreshold.toFixed(2);
+        //we need to save the snapInterval so that the custom property is updated with adjusted values
+        onSaveConfigure({ id, snapshot: modelClone });
+        return;
+      }
       for (let i = 0; i <= numberOfTicks; i++) {
         options.push(<option value={i * snapInterval}></option>);
       }

diff --git a/assets/src/components/parts/janus-slider/authoring-entry.ts b/assets/src/components/parts/janus-slider/authoring-entry.ts
@@ -18,7 +18,7 @@ import {
 const manifest = require('./manifest.json');
 
 const observedAttributes: string[] = [...apiObservedAttributes];
-const customEvents: any = { ...apiCustomEvents };
+const customEvents: any = { ...apiCustomEvents, onSaveConfigure: 'saveconfigure' };
 
 register(SliderAuthor, manifest.authoring.element, observedAttributes, {
   customEvents,

diff --git a/assets/src/components/parts/janus-slider/schema.ts b/assets/src/components/parts/janus-slider/schema.ts
@@ -44,6 +44,7 @@ export const simpleSchema: JSONSchema7Object = {
   snapInterval: {
     title: 'Interval',
     type: 'number',
+    description: 'Value cannot be smaller than 1/100 of the range between the min and max values',
   },
 
   answer: correctOrRange.schema,
@@ -71,7 +72,7 @@ export const simpleUISchema = {
     classNames: 'col-span-6',
   },
   snapInterval: {
-    classNames: 'col-span-6',
+    classNames: 'col-span-12',
   },
   advancedFeedback: numericAdvancedFeedback.uiSchema,
 };
@@ -118,6 +119,7 @@ export const schema: JSONSchema7Object = {
   },
   snapInterval: {
     title: 'Interval',
+    description: 'Value cannot be smaller than 1/100 of the range between the min and max values',
     type: 'number',
   },
   enabled: {