l-min-components 1.7.1514 → 1.7.1516

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/reportsComponents/hooks/useRreportUtils.jsx +35 -0
  3. package/src/components/reportsComponents/reportQuestions/components/modals/gradingModal.jsx +28 -30
  4. package/src/components/reportsComponents/reportQuestions/contants.jsx +2 -2
  5. package/src/components/reportsComponents/reportQuestions/index.jsx +144 -149
  6. package/src/components/reportsComponents/reportQuestions/style.jsx +16 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "l-min-components",
3
- "version": "1.7.1514",
3
+ "version": "1.7.1516",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "src/assets",
package/src/components/reportsComponents/hooks/useRreportUtils.jsx CHANGED
@@ -655,6 +655,40 @@ function toRGBA(rgbaString, alpha = 1) {
655
655
  const [r, g, b] = rgbaString.match(/\d+/g).map(Number);
656
656
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
657
657
  }
658
+
659
+ const getQuestionInfo = (question) => {
660
+ let type = "";
661
+ if (question?.type === "SOUND_PLAY") type = "sound-play";
662
+ else if (question?.question_data?.type === "DIALOGUE") {
663
+ if (
664
+ Object.values(question?.question_data?.dialogues_data || {})?.[0]
665
+ ?.type === "Scripted"
666
+ )
667
+ type = "dialogue-scripted";
668
+ else type = "dialogue-unscripted";
669
+ } else if (question?.question_data?.type === "WORD_PLAY") {
670
+ if (question?.question_data?.answer_format_data?.type === "Multiple Choice")
671
+ type = "word-play-multiple-choice";
672
+ else type = "word-play-text";
673
+ } else if (question?.type === "QUIZ") {
674
+ if (question?.question_data?.question_data?.type === "MultipleChoice")
675
+ type = "quiz-multiple-choice";
676
+ else if (question?.question_data?.question_data?.type === "UnScripted")
677
+ type = "quiz-unscripted";
678
+ else type = "quiz-scripted";
679
+ } else if (question?.type === "ESSAY") {
680
+ if (question?.question_data?.config?.type === "Scripted")
681
+ type = "essay-scripted";
682
+ else if (question?.question_data?.config?.type === "Written")
683
+ type = "essay-written";
684
+ else type = "essay-unscripted";
685
+ } else if (question?.question_data?.type === "READING") type = "reading";
686
+ else if (question?.type === "MATCH_PAIR") type = "match-pair";
687
+ else type = "";
688
+
689
+ return { type, data: question };
690
+ };
691
+
658
692
  const useReportUtils = () => {
659
693
  return {
660
694
  renderCorrectedSentence,
@@ -673,6 +707,7 @@ const useReportUtils = () => {
673
707
  getColor,
674
708
  grammarFindOperation,
675
709
  toRGBA,
710
+ getQuestionInfo,
676
711
  };
677
712
  };
678
713
 
package/src/components/reportsComponents/reportQuestions/components/modals/gradingModal.jsx CHANGED
@@ -44,36 +44,34 @@ const GradingModal = ({
44
44
  <TopSection>
45
45
  <h3>Instructor’s grading</h3>
46
46
  <ul className="check_wrapper">
47
- {!noAi && !showAIScore ? null : (
48
- <>
49
- {!noAi && (
50
- <li
51
- onClick={() => {
52
- setSelected("ai");
53
- }}
54
- >
55
- <Radio
56
- checked={selected === "ai"}
57
- defaultBorderColor={"#C6CCCC"}
58
- />
59
- Use AI grade
60
- </li>
61
- )}
62
- {noAi && (
63
- <li
64
- onClick={() => {
65
- setSelected("suggest");
66
- }}
67
- >
68
- <Radio
69
- checked={selected === "suggest"}
70
- defaultBorderColor={"#C6CCCC"}
71
- />
72
- Use system grade
73
- </li>
74
- )}
75
- </>
76
- )}
47
+ <>
48
+ {showAIScore && (
49
+ <li
50
+ onClick={() => {
51
+ setSelected("ai");
52
+ }}
53
+ >
54
+ <Radio
55
+ checked={selected === "ai"}
56
+ defaultBorderColor={"#C6CCCC"}
57
+ />
58
+ Use AI grade
59
+ </li>
60
+ )}
61
+ {noAi && (
62
+ <li
63
+ onClick={() => {
64
+ setSelected("suggest");
65
+ }}
66
+ >
67
+ <Radio
68
+ checked={selected === "suggest"}
69
+ defaultBorderColor={"#C6CCCC"}
70
+ />
71
+ Use system grade
72
+ </li>
73
+ )}
74
+ </>
77
75
 
78
76
  <li
79
77
  onClick={() => {
package/src/components/reportsComponents/reportQuestions/contants.jsx CHANGED
@@ -3,7 +3,7 @@ const data = {
3
3
  {
4
4
  label: "Sound play",
5
5
  value: "sound-play",
6
- ai_score_available: false,
6
+ ai_score_available: true,
7
7
  system_score: false,
8
8
  },
9
9
  {
@@ -24,7 +24,7 @@ const data = {
24
24
  label: "Essay",
25
25
  value: "essay-unscripted",
26
26
  type: "unscripted",
27
- ai_score_available: true,
27
+ ai_score_available: false,
28
28
  system_score: false,
29
29
  },
30
30
  {
package/src/components/reportsComponents/reportQuestions/index.jsx CHANGED
@@ -14,6 +14,8 @@ import {
14
14
  QuestionTitle,
15
15
  ScoreHeaderContainer,
16
16
  QuestionNav,
17
+ QuestionWrapper,
18
+ Loader,
17
19
  // QuestionFooter,
18
20
  } from "./style";
19
21
  import Comment from "./components/comment";
@@ -44,38 +46,6 @@ import { InfoIcon } from "lucide-react";
44
46
  import InfoIcon2 from "../fullAnalysis/icons/info";
45
47
  import { NavBack, NavForword } from "../fullAnalysis/icons/navArrow";
46
48
 
47
- const getQuestionInfo = (question) => {
48
- let type = "";
49
- if (question?.type === "SOUND_PLAY") type = "sound-play";
50
- else if (question?.question_data?.type === "DIALOGUE") {
51
- if (
52
- Object.values(question?.question_data?.dialogues_data || {})?.[0]
53
- ?.type === "Scripted"
54
- )
55
- type = "dialogue-scripted";
56
- else type = "dialogue-unscripted";
57
- } else if (question?.question_data?.type === "WORD_PLAY") {
58
- if (question?.question_data?.answer_format_data?.type === "Multiple Choice")
59
- type = "word-play-multiple-choice";
60
- else type = "word-play-text";
61
- } else if (question?.type === "QUIZ") {
62
- if (question?.question_data?.question_data?.type === "MultipleChoice")
63
- type = "quiz-multiple-choice";
64
- else if (question?.question_data?.question_data?.type === "UnScripted")
65
- type = "quiz-unscripted";
66
- else type = "quiz-scripted";
67
- } else if (question?.type === "ESSAY") {
68
- if (question?.question_data?.config?.type === "Scripted")
69
- type = "essay-scripted";
70
- else if (question?.question_data?.config?.type === "Written")
71
- type = "essay-written";
72
- else type = "essay-unscripted";
73
- } else if (question?.question_data?.type === "READING") type = "reading";
74
- else type = "match-pair";
75
-
76
- return { type, data: question };
77
- };
78
-
79
49
  /**
80
50
  * @param {Object} props
81
51
 
@@ -99,11 +69,20 @@ const ReportQuestions = ({
99
69
  questionActivityID,
100
70
  answerData,
101
71
  onSwitchQuestion,
72
+ loading,
102
73
  }) => {
103
- const findedQuestion = questions?.find(
74
+ const [questionList, setQuestionList] = useState([]);
75
+
76
+ useEffect(() => {
77
+ if (questions?.length) {
78
+ setQuestionList(questions);
79
+ }
80
+ }, [questions]);
81
+
82
+ const findedQuestion = questionList?.find(
104
83
  (question) => question?.question_activity_id === questionActivityID
105
84
  );
106
-
85
+ const { getQuestionInfo } = useReportUtils();
107
86
  const questionType = getQuestionInfo(findedQuestion)?.type;
108
87
 
109
88
  const [comment, setComment] = useState(null);
@@ -120,6 +99,7 @@ const ReportQuestions = ({
120
99
  const question = constants.questions.find(
121
100
  (question) => question.value === questionType
122
101
  );
102
+ console.log(question, questionType, answerData, "aaaa");
123
103
  const commentData = answerData?.answer?.comments;
124
104
  const hasAnswer = answerData?.answer?.data;
125
105
 
@@ -138,7 +118,7 @@ const ReportQuestions = ({
138
118
 
139
119
  setAIScore(answerData?.ai_score || 0);
140
120
  }
141
- }, [findedQuestion?.question_id]);
121
+ }, [findedQuestion?.question_id, questionActivityID, answerData]);
142
122
 
143
123
  const handleScore = async (value) => {
144
124
  if (!questionActivityID || !enterpriseId || !answerData?.answer?.session_id)
@@ -167,8 +147,8 @@ const ReportQuestions = ({
167
147
  );
168
148
  }
169
149
 
170
- const showAIScore = question.ai_score_available;
171
- const noAi = question.system_score;
150
+ const showAIScore = question?.ai_score_available;
151
+ const noAi = question?.system_score;
172
152
 
173
153
  /// navigating question
174
154
  const currentQuestionIndex = questions.findIndex(
@@ -178,11 +158,11 @@ const ReportQuestions = ({
178
158
  const nextId = questions?.[currentQuestionIndex + 1]?.question_activity_id;
179
159
 
180
160
  const handleNext = () => {
181
- if (nextId) onSwitchQuestion(nextId);
161
+ if (nextId) onSwitchQuestion?.(nextId);
182
162
  };
183
163
 
184
164
  const handlePrev = () => {
185
- if (prevId) onSwitchQuestion(prevId);
165
+ if (prevId) onSwitchQuestion?.(prevId);
186
166
  };
187
167
 
188
168
  return (
@@ -190,6 +170,7 @@ const ReportQuestions = ({
190
170
  {gradeQuestionData?.loading && <FullPageLoader fixed hasBackground />}
191
171
  {toggleGrade && (
192
172
  <GradingModal
173
+ key={questionActivityID}
193
174
  aiValue={formatNumber(AIScore)}
194
175
  suggestionValue={formatNumber(findedQuestion?.suggested_score || 0)}
195
176
  noAi={noAi}
@@ -214,20 +195,22 @@ const ReportQuestions = ({
214
195
  <Content>
215
196
  <ScoreHeaderContainer>
216
197
  <ScoreHeader>
217
- {!(noAi || accountType === "personal") && (
198
+ {showAIScore && accountType !== "personal" && (
218
199
  <ScoreBadge ai>
219
- AI score: <span>{formatNumber(AIScore)}%</span>
200
+ AI score:{" "}
201
+ <span> {loading ? "--" : formatNumber(AIScore) + "%"}</span>
220
202
  </ScoreBadge>
221
203
  )}
222
204
 
223
205
  <ScoreBadge>
224
- Instructor’s score: <span>{formatNumber(intructorScore)}%</span>
206
+ Instructor’s score:{" "}
207
+ <span>{loading ? "--" : formatNumber(intructorScore) + "%"}</span>
225
208
  </ScoreBadge>
226
209
 
227
210
  {(accountType === "instructor-personal" ||
228
211
  accountType === "instructor-affiliate") && (
229
212
  <button
230
- disabled={!hasAnswer && findedQuestion}
213
+ disabled={(!hasAnswer && findedQuestion) || loading}
231
214
  onClick={() => {
232
215
  setToggleGrade(true);
233
216
  }}
@@ -248,115 +231,127 @@ const ReportQuestions = ({
248
231
  </QuestionNav>
249
232
  </ScoreHeaderContainer>
250
233
  {/* {data && !hasAnswer && <ErrorHeader />} */}
251
- <QuestionContent>
252
- {findedQuestion && (
253
- <>
254
- {questionType === "essay-written" && (
255
- <EssayWritten
256
- data={findedQuestion}
257
- answerData={answerData}
258
- aiData={AiData}
259
- setToggle={setToggle}
260
- />
261
- )}
262
- {questionType === "essay-scripted" && (
263
- <EssayScripted
264
- data={findedQuestion}
265
- answerData={answerData}
266
- aiData={AiData}
267
- setToggle={setToggle}
268
- />
269
- )}
270
- {questionType === "essay-unscripted" && (
271
- <EssayUnscripted
272
- data={findedQuestion}
273
- answerData={answerData}
274
- aiData={AiData}
275
- setToggle={setToggle}
276
- />
277
- )}
278
- {questionType === "sound-play" && (
279
- <SoundPlay
280
- data={findedQuestion}
281
- answerData={answerData}
282
- aiData={AiData}
283
- setToggle={setToggle}
284
- />
285
- )}
286
- {questionType === "reading" && (
287
- <Reading
288
- data={findedQuestion}
289
- answerData={answerData}
290
- aiData={AiData}
291
- setToggle={setToggle}
292
- />
293
- )}
294
- {questionType === "word-play-text" && (
295
- <WordPlayText data={findedQuestion} answerData={answerData} />
296
- )}
297
- {questionType === "word-play-multiple-choice" && (
298
- <WordPlayMultipleChoice
299
- data={findedQuestion}
300
- answerData={answerData}
301
- />
302
- )}
303
- {questionType === "match-pair" && (
304
- <MatchPair data={findedQuestion} answerData={answerData} />
305
- )}
306
- {questionType === "quiz-scripted" && (
307
- <QuizScripted
308
- data={findedQuestion}
309
- answerData={answerData}
310
- aiData={AiData}
311
- setToggle={setToggle}
312
- />
313
- )}
314
- {questionType === "quiz-unscripted" && (
315
- <QuizUnscripted
316
- data={findedQuestion}
317
- answerData={answerData}
318
- aiData={AiData}
319
- setToggle={setToggle}
320
- />
321
- )}
322
- {questionType === "quiz-multiple-choice" && (
323
- <QuizMultipleChoice
324
- data={findedQuestion}
325
- answerData={answerData}
326
- />
327
- )}
328
234
 
329
- {questionType === "dialogue-scripted" && (
330
- <DialogueScripted
331
- data={findedQuestion}
332
- answerData={answerData}
333
- aiData={AiData}
334
- setToggle={setToggle}
335
- />
336
- )}
337
- {questionType === "dialogue-unscripted" && (
338
- <DialogueUnscripted
339
- data={findedQuestion}
340
- answerData={answerData}
341
- aiData={AiData}
342
- setToggle={setToggle}
343
- />
235
+ {loading ? (
236
+ <Loader>
237
+ <FullPageLoader isSectionLoader />
238
+ </Loader>
239
+ ) : (
240
+ <QuestionWrapper>
241
+ <QuestionContent>
242
+ {findedQuestion && (
243
+ <>
244
+ {questionType === "essay-written" && (
245
+ <EssayWritten
246
+ data={findedQuestion}
247
+ answerData={answerData}
248
+ aiData={AiData}
249
+ setToggle={setToggle}
250
+ />
251
+ )}
252
+ {questionType === "essay-scripted" && (
253
+ <EssayScripted
254
+ data={findedQuestion}
255
+ answerData={answerData}
256
+ aiData={AiData}
257
+ setToggle={setToggle}
258
+ />
259
+ )}
260
+ {questionType === "essay-unscripted" && (
261
+ <EssayUnscripted
262
+ data={findedQuestion}
263
+ answerData={answerData}
264
+ aiData={AiData}
265
+ setToggle={setToggle}
266
+ />
267
+ )}
268
+ {questionType === "sound-play" && (
269
+ <SoundPlay
270
+ data={findedQuestion}
271
+ answerData={answerData}
272
+ aiData={AiData}
273
+ setToggle={setToggle}
274
+ />
275
+ )}
276
+ {questionType === "reading" && (
277
+ <Reading
278
+ data={findedQuestion}
279
+ answerData={answerData}
280
+ aiData={AiData}
281
+ setToggle={setToggle}
282
+ />
283
+ )}
284
+ {questionType === "word-play-text" && (
285
+ <WordPlayText
286
+ data={findedQuestion}
287
+ answerData={answerData}
288
+ />
289
+ )}
290
+ {questionType === "word-play-multiple-choice" && (
291
+ <WordPlayMultipleChoice
292
+ data={findedQuestion}
293
+ answerData={answerData}
294
+ />
295
+ )}
296
+ {questionType === "match-pair" && (
297
+ <MatchPair data={findedQuestion} answerData={answerData} />
298
+ )}
299
+ {questionType === "quiz-scripted" && (
300
+ <QuizScripted
301
+ data={findedQuestion}
302
+ answerData={answerData}
303
+ aiData={AiData}
304
+ setToggle={setToggle}
305
+ />
306
+ )}
307
+ {questionType === "quiz-unscripted" && (
308
+ <QuizUnscripted
309
+ data={findedQuestion}
310
+ answerData={answerData}
311
+ aiData={AiData}
312
+ setToggle={setToggle}
313
+ />
314
+ )}
315
+ {questionType === "quiz-multiple-choice" && (
316
+ <QuizMultipleChoice
317
+ data={findedQuestion}
318
+ answerData={answerData}
319
+ />
320
+ )}
321
+
322
+ {questionType === "dialogue-scripted" && (
323
+ <DialogueScripted
324
+ data={findedQuestion}
325
+ answerData={answerData}
326
+ aiData={AiData}
327
+ setToggle={setToggle}
328
+ />
329
+ )}
330
+ {questionType === "dialogue-unscripted" && (
331
+ <DialogueUnscripted
332
+ data={findedQuestion}
333
+ answerData={answerData}
334
+ aiData={AiData}
335
+ setToggle={setToggle}
336
+ />
337
+ )}
338
+ </>
344
339
  )}
345
- </>
346
- )}
347
- </QuestionContent>
340
+ </QuestionContent>
348
341
 
349
- <Comment
350
- data={comment}
351
- testId={testId}
352
- setData={setComment}
353
- disabledAdd={!hasAnswer}
354
- questionActivityID={questionActivityID}
355
- editMode={
356
- accountType === "instructor-personal" ||
357
- accountType === "instructor-affiliate"
358
- }
359
- />
342
+ <Comment
343
+ data={comment}
344
+ testId={testId}
345
+ setData={setComment}
346
+ disabledAdd={!hasAnswer}
347
+ questionActivityID={questionActivityID}
348
+ editMode={
349
+ accountType === "instructor-personal" ||
350
+ accountType === "instructor-affiliate"
351
+ }
352
+ />
353
+ </QuestionWrapper>
354
+ )}
360
355
  {/* {(accountType === "instructor-personal" ||
361
356
  accountType === "instructor-affiliate") && (
362
357
  <QuestionFooter>
package/src/components/reportsComponents/reportQuestions/style.jsx CHANGED
@@ -13,6 +13,7 @@ export const Header = styled.div`
13
13
  align-items: center;
14
14
  cursor: pointer;
15
15
  gap: 16px;
16
+ height: 30px;
16
17
  h1 {
17
18
  font-size: 22px;
18
19
  font-weight: 700;
@@ -145,6 +146,21 @@ export const QuestionContent = styled.div`
145
146
  width: 100%;
146
147
  `;
147
148
 
149
+ export const QuestionWrapper = styled.div`
150
+ display: flex;
151
+ width: 100%;
152
+ flex-direction: column;
153
+ justify-content: space-between;
154
+ gap: 20px;
155
+ min-height: 330px;
156
+ `;
157
+
158
+ export const Loader = styled.div`
159
+ display: grid;
160
+ place-items: center;
161
+ min-height: 330px;
162
+ position: relative;
163
+ `;
148
164
  export const QuestionTitle = styled.h2`
149
165
  border-radius: 5px;
150
166
  background: rgba(254, 241, 203, 0.5);