l-min-components 1.7.1405 → 1.7.1407

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.7.1405",
+  "version": "1.7.1407",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/reportsComponents/fullAnalysis/components/InlineClampedText.jsx

@@ -1,78 +1,51 @@
-import React, { useState } from "react";
-import Truncate from "react-truncate";
+import React, { useState, useRef, useEffect } from "react";
 import styled from "styled-components";
 
 const InlineClampedText = ({ text }) => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const [truncated, setTruncated] = useState(false);
+  const [isClamped, setIsClamped] = useState(false);
+  const textRef = useRef(null);
+
+  useEffect(() => {
+    const el = textRef.current;
+    if (el) {
+      // Check if the text is clamped by comparing scrollHeight and offsetHeight
+      setIsClamped(el.scrollHeight > el.offsetHeight);
+    }
+  }, [text]);
 
   return (
     <Container>
-      {!isExpanded ? (
-        <Truncate
-          lines={2}
-          ellipsis={
-            truncated ? (
-              <>
-                ...{" "}
-                <span
-                  onClick={() => setIsExpanded(true)}
-                  style={{
-                    cursor: "pointer",
-                    color: "#00C2C2",
-                    fontSize: "14px",
-                  }}
-                >
-                  See more
-                </span>
-              </>
-            ) : (
-              ""
-            )
-          }
-          onTruncate={(trunc) => setTruncated(trunc)}
-        >
-          <span
-            style={{
-              color: "#4A4D4D",
-              fontSize: "14px",
-            }}
-          >
-            {text}
-          </span>
-        </Truncate>
-      ) : (
-        <>
-          <span
-            style={{
-              color: "#4A4D4D",
-              fontSize: "14px",
-            }}
-          >
-            {text}
-          </span>{" "}
-          {truncated && (
-            <span
-              onClick={() => setIsExpanded(false)}
-              style={{
-                cursor: "pointer",
-                color: "#00C2C2",
-                fontSize: "14px",
-              }}
-            >
-              Show less
-            </span>
-          )}
-        </>
+      <TextWrapper isExpanded={isExpanded} ref={textRef}>
+        {text}
+      </TextWrapper>
+      {isClamped && (
+        <Toggle onClick={() => setIsExpanded(!isExpanded)}>
+          {isExpanded ? "Show less" : "See more"}
+        </Toggle>
       )}
     </Container>
   );
 };
 
 const Container = styled.div`
-  span {
-    font-size: 14px !important;
-  }
+  font-size: 14px;
+  color: #4a4d4d;
+`;
+
+const TextWrapper = styled.div`
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: ${(props) => (props.isExpanded ? "unset" : 2)};
+  -webkit-box-orient: vertical;
+  white-space: normal;
+`;
+
+const Toggle = styled.span`
+  color: #00c2c2;
+  font-size: 14px;
+  cursor: pointer;
+  margin-left: 5px;
 `;
 
 export default InlineClampedText;

package/src/components/reportsComponents/fullAnalysis/components/SpeechAnalysis.jsx

@@ -17,7 +17,7 @@ import PenIcon from "../icons/pen";
 import Mircophone from "../icons/mircophone";
 import { Se, Tr } from "react-flags-select";
 import Table from "./table";
-import TranslateDropdown from "./translateDropdown";
+// import TranslateDropdown from "./translateDropdown";
 import { Progress } from "rsuite";
 import ClarityItem from "./ClarityItem";
 import InlineClampedText from "./InlineClampedText";
@@ -119,7 +119,7 @@ const SpeechAnalysis = ({ Aidata }) => {
                   <span>Grade</span>
                   <div className="space-between">
                     <span>Feedback</span>
-                    <TranslateDropdown />
+                    {/* <TranslateDropdown /> */}
                   </div>
                 </div>
                 <div className="table_row">
@@ -157,6 +157,7 @@ const SpeechAnalysis = ({ Aidata }) => {
                               </div>
                             </div>
                             <InlineClampedText
+                              key={item?.id}
                               text={item?.["Phoneme Feedback"] || ""}
                             />
                           </div>
@@ -289,7 +290,7 @@ const SpeechAnalysis = ({ Aidata }) => {
 
                   <div className="space-between">
                     <span>Feedback</span>
-                    <TranslateDropdown />
+                    {/* <TranslateDropdown /> */}
                   </div>
                 </div>
                 <div className="table_row">
@@ -305,7 +306,10 @@ const SpeechAnalysis = ({ Aidata }) => {
                         {item?.score} {item?.total ? `of ${item?.total}` : ""}
                       </p>
                       <p>
-                        <InlineClampedText text={item?.feedback || ""} />
+                        <InlineClampedText
+                          key={item?.title}
+                          text={item?.feedback || ""}
+                        />
                       </p>
                     </div>
                   ))}

package/src/components/reportsComponents/fullAnalysis/index.jsx

@@ -20,7 +20,6 @@ import Grammar from "./components/Grammar";
 
 const FullAnalysis = ({ data, onClose }) => {
   const { setRightLayout, setCenterLayoutStyle } = useContext(OutletContext);
-  const [selected, setSelected] = useState(null);
 
   // const colors = [
   //   { main: "#009999", sub: "#E6F9F9" },
@@ -32,10 +31,11 @@ const FullAnalysis = ({ data, onClose }) => {
     label: item?.label,
     value: item?.id,
   }));
+  const [selected, setSelected] = useState(tabs?.[0]?.value || "");
 
   useEffect(() => {
     if (tabs?.length) {
-      setSelected(tabs?.[0]?.value);
+      setSelected(tabs[0].value);
     }
   }, [tabs?.length]);
 
@@ -127,25 +127,28 @@ const FullAnalysis = ({ data, onClose }) => {
               </p>
             </ProgressCircleSection>
             <ul>
-              {data?.models?.map((model) => (
-                <li key={model?.id}>
-                  <p>{`${model?.label} point`}</p>
-                  <div style={{ backgroundColor: model?.bgColor }}>
-                    <span style={{ color: model?.primaryColor }}>
-                      {model?.score || 0}%
-                    </span>
-                    <Progress.Line
-                      percent={model?.score || 0}
-                      strokeWidth={4}
-                      trailWidth={4}
-                      strokeColor={model?.primaryColor}
-                      trailColor={"#fff"}
-                      showInfo={false}
-                      style={{ width: "100%" }}
-                    />
-                  </div>
-                </li>
-              ))}
+              {data?.models?.map((model) => {
+                if (model?.id === "logic_evaluation") return null;
+                return (
+                  <li key={model?.id}>
+                    <p>{`${model?.label} point`}</p>
+                    <div style={{ backgroundColor: model?.bgColor }}>
+                      <span style={{ color: model?.primaryColor }}>
+                        {model?.score || 0}%
+                      </span>
+                      <Progress.Line
+                        percent={model?.score || 0}
+                        strokeWidth={4}
+                        trailWidth={4}
+                        strokeColor={model?.primaryColor}
+                        trailColor={"#fff"}
+                        showInfo={false}
+                        style={{ width: "100%" }}
+                      />
+                    </div>
+                  </li>
+                );
+              })}
             </ul>
           </ProgressSidebar>
           {selectedModel?.id === "speech_analysis" && (
@@ -159,7 +162,9 @@ const FullAnalysis = ({ data, onClose }) => {
           )}
         </Sidebar>
         <MainSection>
-          <Tabs options={tabs} selected={selected} onChange={setSelected} />
+          {tabs?.length > 0 && (
+            <Tabs options={tabs} selected={selected} onChange={setSelected} />
+          )}
           {selectedModel?.id === "logic_evaluation" && (
             <Evaluation Aidata={selectedModel} />
           )}

package/src/components/reportsComponents/reportQuestions/api/index.jsx

@@ -0,0 +1,114 @@
+import useAxios from "axios-hooks";
+
+const useApi = () => {
+  const [{ ...addCommentData }, addComment] = useAxios(
+    {
+      method: "POST",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleAddComment = async (
+    question_activity_id,
+    test_id,
+    data,
+    enterprise_id
+  ) => {
+    try {
+      const url = enterprise_id
+        ? `/learn/v1/instructor/${enterprise_id}/tests/${test_id}/add_comment/${question_activity_id}/`
+        : `/learn/v1/instructor/tests/${test_id}/add_comment/${question_activity_id}/`;
+      return await addComment({
+        url,
+        data,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  const [{ ...gradeQuestionData }, gradeQuestion] = useAxios(
+    {
+      method: "POST",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleGradeQuestion = async (
+    question_activity_id,
+    session_id,
+    data,
+    enterprise_id
+  ) => {
+    try {
+      const url = enterprise_id
+        ? `/learn/v1/instructor/${enterprise_id}/tests/${question_activity_id}/submit_score/${session_id}/`
+        : `/learn/v1/instructor/tests/${question_activity_id}/submit_score/${session_id}/`;
+      return await gradeQuestion({
+        url,
+        data: {
+          ...data,
+        },
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  const [{ ...deleteCommentData }, deleteComment] = useAxios(
+    {
+      method: "POST",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleDeleteComment = async (
+    question_activity_id,
+    test_id,
+    index,
+    enterprise_id
+  ) => {
+    try {
+      const url = enterprise_id
+        ? `/learn/v1/instructor/${enterprise_id}/tests/${test_id}/delete_comment/${question_activity_id}/?index=${index}`
+        : `/learn/v1/instructor/tests/${test_id}/delete_comment/${question_activity_id}/?index=${index}`;
+      return await deleteComment({
+        url,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const [{ ...uploadData }, upload] = useAxios(
+    {
+      method: "POST",
+    },
+    { manual: true }
+  );
+
+  const handleUpload = async (data) => {
+    return await upload({
+      url: "/media/v1/instructor/files/",
+      data,
+    });
+  };
+
+  return {
+    addCommentData,
+    handleAddComment,
+    handleGradeQuestion,
+    gradeQuestionData,
+    deleteCommentData,
+    handleDeleteComment,
+    handleUpload,
+    uploadData,
+  };
+};
+
+export default useApi;

package/src/components/reportsComponents/reportQuestions/components/comment.jsx

@@ -16,22 +16,38 @@ import DeleteIcon from "../../../../assets/svg/delete-icon";
 import moment from "moment";
 import ResponseAudio from "./responseAudio";
 import DeleteModal from "./modals/deleteModal";
-import { AudioWaveComponent, OutletContext, useAudioPlayer } from "../../..";
+import {
+  AudioWaveComponent,
+  FullPageLoader,
+  OutletContext,
+  useAudioPlayer,
+} from "../../..";
 import { CloseIcon } from "../../../header/assets/svg/close";
 import classNames from "classnames";
 import { useRecorder } from "react-microphone-recorder";
 import PlayIcon from "../../../../assets/svg/playIcon";
 import styled from "styled-components";
 import { FaPause } from "react-icons/fa";
+import useApi from "../api";
 /**
  * @param {Object} props
  * @param {boolean} props.editMode
  * @returns {React.ReactNode}
  */
-const Comment = ({ editMode = false, data, accountType }) => {
+const Comment = ({ editMode = false, data, testId, questionData, setData }) => {
   const { affiliateAccount } = useContext(OutletContext);
   const [toggleDelete, setToggleDelete] = useState(false);
   const [showForm, setShowForm] = useState(null);
+  const [value, setValue] = useState("");
+  const {
+    handleAddComment,
+    addCommentData,
+    handleDeleteComment,
+    deleteCommentData,
+    handleUpload,
+    uploadData,
+  } = useApi();
+  const enterpriseId = affiliateAccount?.id;
 
   const {
     startRecording,
@@ -41,7 +57,6 @@ const Comment = ({ editMode = false, data, accountType }) => {
     resetRecording,
     recordingState,
   } = useRecorder();
-  console.log(data);
 
   if (!editMode && !data) return;
 
@@ -50,10 +65,76 @@ const Comment = ({ editMode = false, data, accountType }) => {
     { text: "Audio", icon: AudioIcon },
   ];
 
+  const handleComment = async () => {
+    if (!enterpriseId || !testId || !questionData?.question_activity_id) return;
+
+    if (showForm === "Text") {
+      const data = { data: { data: { type: "text", text: value } } };
+      const res = await handleAddComment(
+        questionData?.question_activity_id,
+        testId,
+        data,
+        enterpriseId
+      );
+      if (res?.data) {
+        const comment = res?.data?.data?.answer?.comments?.[0];
+        setData(comment);
+        setShowForm(null);
+        setValue("");
+      }
+    } else {
+      const formData = new FormData();
+      formData.append("upload", audioFile);
+      const resMedia = await handleUpload(formData);
+      const media = resMedia?.data?.results?.[0];
+      if (media) {
+        const data = { data: { data: { type: "audio", audio: media } } };
+        const res = await handleAddComment(
+          questionData?.question_activity_id,
+          testId,
+          data,
+          enterpriseId
+        );
+        if (res?.data) {
+          const comment = res?.data?.data?.answer?.comments?.[0];
+          setData(comment);
+          setShowForm(null);
+          resetRecording();
+        }
+      }
+    }
+  };
+
+  const disabled = showForm === "Text" ? !value : !audioFile;
+
+  const handleDelete = async () => {
+    if (!enterpriseId || !testId || !questionData?.question_activity_id) return;
+
+    const res = await handleDeleteComment(
+      questionData?.question_activity_id,
+      testId,
+      0,
+      enterpriseId
+    );
+
+    if (res?.data) {
+      setData(null);
+      setToggleDelete(false);
+      setValue("");
+      setShowForm(null);
+    }
+  };
+
+  console.log(data);
+
   return (
     <CommentContainer>
+      {(addCommentData?.loading ||
+        deleteCommentData?.loading ||
+        uploadData?.loading) && <FullPageLoader fixed hasBackground />}
       {toggleDelete && (
         <DeleteModal
+          onClick={handleDelete}
           close={() => {
             setToggleDelete(false);
           }}
@@ -126,7 +207,13 @@ const Comment = ({ editMode = false, data, accountType }) => {
               <>
                 <CommentContentForm>
                   {showForm === "Text" && (
-                    <textarea placeholder="Input comment here" />
+                    <textarea
+                      placeholder="Input comment here"
+                      value={value}
+                      onChange={(e) => {
+                        setValue(e?.target?.value);
+                      }}
+                    />
                   )}
                   {showForm === "Audio" && (
                     <AudioRecordPlayer
@@ -161,7 +248,13 @@ const Comment = ({ editMode = false, data, accountType }) => {
                       </li>
                     ))}
                   </ul>
-                  <button className="sm-btn">Send</button>
+                  <button
+                    className="sm-btn"
+                    disabled={disabled}
+                    onClick={handleComment}
+                  >
+                    Send
+                  </button>
                 </CommentContentAction>
               </>
             )}

package/src/components/reportsComponents/reportQuestions/components/modals/gradingModal.jsx

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import Radio from "../radio";
 import ButtonComponent from "../../../../button";
 
-const GradingModal = ({ aiValue, onClose }) => {
+const GradingModal = ({ aiValue, onClose, setScore }) => {
   const [selected, setSelected] = useState("manually");
   const [value, setValue] = useState("");
 
@@ -12,8 +12,18 @@ const GradingModal = ({ aiValue, onClose }) => {
     setValue("");
   }, [selected]);
 
+  const numberValue = Number(value || 0);
+  const disable = selected === "manually" && (numberValue > 100 || !value);
+
   const isNumbter = typeof aiValue === "number";
 
+  const handleSetValue = () => {
+    setScore?.({
+      score_method: selected === "manually" ? "MANUAL" : "AI",
+      score: selected === "manually" ? numberValue : aiValue,
+    });
+  };
+
   return (
     <Container>
       <Wrapper>
@@ -66,7 +76,11 @@ const GradingModal = ({ aiValue, onClose }) => {
               )}
             </div>
           </TopSection>
-          <ButtonComponent text="Save score" />
+          <ButtonComponent
+            text="Save score"
+            disabled={disable}
+            onClick={handleSetValue}
+          />
         </Content>
       </Wrapper>
     </Container>

package/src/components/reportsComponents/reportQuestions/components/style/comment.style.jsx

@@ -30,6 +30,10 @@ export const CommentContainer = styled.div`
     border: none;
     outline: none;
     cursor: pointer;
+    &:disabled {
+      background: #c6cccc;
+      box-shadow: none;
+    }
   }
 `;
 

package/src/components/reportsComponents/reportQuestions/contants.jsx

@@ -248,8 +248,8 @@ const essayUnscripted = {
 };
 
 const soundPlay = {
-  question_id: 3104,
-  question_activity_id: 8398,
+  question_id: 3078,
+  question_activity_id: 8384,
   position_index: 0,
   title: "Say the sentence",
   type: "SOUND_PLAY",
@@ -265,36 +265,42 @@ const soundPlay = {
     instruction: "Say the sentence",
   },
   answer: {
-    session_id: "e0b8fb0cc6a0413e8a48af124c402965",
+    session_id: "17c9403e6b2c4761a06bf1ac22fffaf2",
     attempt_index: 1,
     token_claimed: 0,
     score: null,
     marked: false,
     expire_at: null,
-    created_at: "2025-07-12T11:31:29.582953Z",
+    created_at: "2025-07-09T11:28:33.281076Z",
     grading_date: null,
     data: {
       type: "SOUND_PLAY",
-      session_id: "67de7580ce91451",
-      submited_datetime: "2025-07-09T16:23:04.549143Z",
+      session_id: "b269deece28047f",
+      submited_datetime: "2025-07-09T09:57:10.44195Z",
       audio: {
-        id: "c08f8475036344abbba8c0c6daa1f14f",
-        url: "https://dev-117782726-api.learngual.com/media/v1/files/c08f8475036344abbba8c0c6daa1f14f/stream/",
+        id: "1c06b5d866054d9fba5d67d14eeff436",
+        url: "https://dev-117782726-api.learngual.com/media/v1/files/1c06b5d866054d9fba5d67d14eeff436/stream/",
         stream_url: null,
         mimetype: "audio/mpeg",
-        size: 29795.0,
-        created_at: "2025-07-12T11:31:27.031742Z",
-        updated_at: "2025-07-13T17:15:13.37607Z",
+        size: 54500.0,
+        created_at: "2025-07-09T11:28:23.930419Z",
+        updated_at: "2025-07-14T06:00:38.441656Z",
         uploaded_media_url: null,
         convertion_status: "DONE",
       },
     },
-    comments: null,
+    comments: [],
   },
-  score: 0,
-  ai_score: 10.0,
-  grading_data: {},
-  grade_method: "MANUAL",
+  score: 100.0,
+  ai_score: 100.0,
+  grading_data: {
+    base_url: "https://dev-117782726-api.learngual.com/",
+    grader_id: "e4b92c77e5",
+    session_id: "17c9403e6b2c4761a06bf1ac22fffaf2",
+    score: 100.0,
+    grade_method: "AI",
+  },
+  grade_method: "AI",
   suggested_score: null,
 };
 

package/src/components/reportsComponents/reportQuestions/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import constants, {
   aiWordSample,
   sampleResponse,
@@ -37,6 +37,9 @@ import DialogueUnscripted from "./questions/dialogueUnscripted";
 import GradingModal from "./components/modals/gradingModal";
 import classNames from "classnames";
 import FullAnalysis from "../fullAnalysis";
+import useApi from "./api";
+import FullPageLoader from "../../fullPageLoader";
+import { OutletContext } from "../..";
 
 /**
  * @param {Object} props
@@ -52,10 +55,15 @@ const ReportQuestions = ({
   data,
   AiData,
   onClose,
+  testId,
 }) => {
   const [comment, setComment] = useState(null);
+  const [intructorScore, setInstructorScore] = useState(0);
   const [toggleGrade, setToggleGrade] = useState(false);
   const [toggle, setToggle] = useState(null);
+  const { affiliateAccount } = useContext(OutletContext);
+  const enterpriseId = affiliateAccount?.id;
+  const { handleGradeQuestion, gradeQuestionData } = useApi();
   const question = constants.questions.find(
     (question) => question.value === questionType
   );
@@ -63,7 +71,32 @@ const ReportQuestions = ({
 
   useEffect(() => {
     if (commentData?.length) setComment(commentData?.[0]);
-  }, [commentData]);
+  }, [commentData, data?.question_id]);
+
+  useEffect(() => {
+    if (data?.question_id) {
+      setInstructorScore(data?.score);
+    }
+  }, [data?.question_id]);
+
+  const handleScore = async (value) => {
+    if (
+      !data?.question_activity_id ||
+      !enterpriseId ||
+      !data?.answer?.session_id
+    )
+      return;
+    const res = await handleGradeQuestion(
+      data?.question_activity_id,
+      data?.answer?.session_id,
+      value,
+      enterpriseId
+    );
+    if (res?.data) {
+      setInstructorScore(value?.score);
+      setToggleGrade(false);
+    }
+  };
 
   if (toggle) {
     return (
@@ -75,10 +108,14 @@ const ReportQuestions = ({
       />
     );
   }
+
   return (
     <Container>
+      {gradeQuestionData?.loading && <FullPageLoader fixed hasBackground />}
       {toggleGrade && (
         <GradingModal
+          aiValue={data?.ai_score}
+          setScore={handleScore}
           onClose={() => {
             setToggleGrade(false);
           }}
@@ -96,7 +133,7 @@ const ReportQuestions = ({
         <ScoreHeader>
           {accountType === "personal" ? (
             <ScoreBadge>
-              Instructor’s score: <span>{parseInt(data?.score || 0)}%</span>
+              Instructor’s score: <span>{parseInt(intructorScore || 0)}%</span>
             </ScoreBadge>
           ) : (
             <>
@@ -121,7 +158,8 @@ const ReportQuestions = ({
                     accountType === "instructor-affiliate"
                   }
                 >
-                  Instructor’s score: <span>{parseInt(data?.score || 0)}%</span>
+                  Instructor’s score:{" "}
+                  <span>{parseInt(intructorScore || 0)}%</span>
                 </ScoreBadge>
                 {(accountType === "instructor-personal" ||
                   accountType === "instructor-affiliate") && (
@@ -158,7 +196,11 @@ const ReportQuestions = ({
                 />
               )}
               {questionType === "essay-unscripted" && (
-                <EssayUnscripted data={data} aiData={AiData} />
+                <EssayUnscripted
+                  data={data}
+                  aiData={AiData}
+                  setToggle={setToggle}
+                />
               )}
               {questionType === "sound-play" && (
                 <SoundPlay data={data} aiData={AiData} setToggle={setToggle} />
@@ -211,6 +253,9 @@ const ReportQuestions = ({
 
         <Comment
           data={comment}
+          testId={testId}
+          questionData={data}
+          setData={setComment}
           editMode={
             accountType === "instructor-personal" ||
             accountType === "instructor-affiliate"
@@ -219,7 +264,7 @@ const ReportQuestions = ({
         {(accountType === "instructor-personal" ||
           accountType === "instructor-affiliate") && (
           <QuestionFooter>
-            <ButtonComponent text="Save" />
+            <ButtonComponent text="Save" onClick={onClose} />
           </QuestionFooter>
         )}
       </Content>