l-min-components 1.7.1515 → 1.7.1517

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 +2 -1
  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 +132 -113
  6. package/src/components/reportsComponents/reportQuestions/style.jsx +18 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "l-min-components",
3
- "version": "1.7.1515",
3
+ "version": "1.7.1517",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "src/assets",
package/src/components/reportsComponents/hooks/useRreportUtils.jsx CHANGED
@@ -683,7 +683,8 @@ const getQuestionInfo = (question) => {
683
683
  type = "essay-written";
684
684
  else type = "essay-unscripted";
685
685
  } else if (question?.question_data?.type === "READING") type = "reading";
686
- else type = "match-pair";
686
+ else if (question?.type === "MATCH_PAIR") type = "match-pair";
687
+ else type = "";
687
688
 
688
689
  return { type, data: question };
689
690
  };
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";
@@ -67,6 +69,7 @@ const ReportQuestions = ({
67
69
  questionActivityID,
68
70
  answerData,
69
71
  onSwitchQuestion,
72
+ loading,
70
73
  }) => {
71
74
  const [questionList, setQuestionList] = useState([]);
72
75
 
@@ -96,6 +99,7 @@ const ReportQuestions = ({
96
99
  const question = constants.questions.find(
97
100
  (question) => question.value === questionType
98
101
  );
102
+
99
103
  const commentData = answerData?.answer?.comments;
100
104
  const hasAnswer = answerData?.answer?.data;
101
105
 
@@ -114,7 +118,7 @@ const ReportQuestions = ({
114
118
 
115
119
  setAIScore(answerData?.ai_score || 0);
116
120
  }
117
- }, [findedQuestion?.question_id]);
121
+ }, [findedQuestion?.question_id, questionActivityID, answerData]);
118
122
 
119
123
  const handleScore = async (value) => {
120
124
  if (!questionActivityID || !enterpriseId || !answerData?.answer?.session_id)
@@ -143,8 +147,8 @@ const ReportQuestions = ({
143
147
  );
144
148
  }
145
149
 
146
- const showAIScore = question.ai_score_available;
147
- const noAi = question.system_score;
150
+ const showAIScore = question?.ai_score_available;
151
+ const noAi = question?.system_score;
148
152
 
149
153
  /// navigating question
150
154
  const currentQuestionIndex = questions.findIndex(
@@ -166,6 +170,7 @@ const ReportQuestions = ({
166
170
  {gradeQuestionData?.loading && <FullPageLoader fixed hasBackground />}
167
171
  {toggleGrade && (
168
172
  <GradingModal
173
+ key={questionActivityID}
169
174
  aiValue={formatNumber(AIScore)}
170
175
  suggestionValue={formatNumber(findedQuestion?.suggested_score || 0)}
171
176
  noAi={noAi}
@@ -190,20 +195,22 @@ const ReportQuestions = ({
190
195
  <Content>
191
196
  <ScoreHeaderContainer>
192
197
  <ScoreHeader>
193
- {!(noAi || accountType === "personal") && (
198
+ {showAIScore && accountType !== "personal" && (
194
199
  <ScoreBadge ai>
195
- AI score: <span>{formatNumber(AIScore)}%</span>
200
+ AI score:{" "}
201
+ <span> {loading ? "--" : formatNumber(AIScore) + "%"}</span>
196
202
  </ScoreBadge>
197
203
  )}
198
204
 
199
205
  <ScoreBadge>
200
- Instructor’s score: <span>{formatNumber(intructorScore)}%</span>
206
+ Instructor’s score:{" "}
207
+ <span>{loading ? "--" : formatNumber(intructorScore) + "%"}</span>
201
208
  </ScoreBadge>
202
209
 
203
210
  {(accountType === "instructor-personal" ||
204
211
  accountType === "instructor-affiliate") && (
205
212
  <button
206
- disabled={!hasAnswer && findedQuestion}
213
+ disabled={(!hasAnswer && findedQuestion) || loading}
207
214
  onClick={() => {
208
215
  setToggleGrade(true);
209
216
  }}
@@ -224,115 +231,127 @@ const ReportQuestions = ({
224
231
  </QuestionNav>
225
232
  </ScoreHeaderContainer>
226
233
  {/* {data && !hasAnswer && <ErrorHeader />} */}
227
- <QuestionContent>
228
- {findedQuestion && (
229
- <>
230
- {questionType === "essay-written" && (
231
- <EssayWritten
232
- data={findedQuestion}
233
- answerData={answerData}
234
- aiData={AiData}
235
- setToggle={setToggle}
236
- />
237
- )}
238
- {questionType === "essay-scripted" && (
239
- <EssayScripted
240
- data={findedQuestion}
241
- answerData={answerData}
242
- aiData={AiData}
243
- setToggle={setToggle}
244
- />
245
- )}
246
- {questionType === "essay-unscripted" && (
247
- <EssayUnscripted
248
- data={findedQuestion}
249
- answerData={answerData}
250
- aiData={AiData}
251
- setToggle={setToggle}
252
- />
253
- )}
254
- {questionType === "sound-play" && (
255
- <SoundPlay
256
- data={findedQuestion}
257
- answerData={answerData}
258
- aiData={AiData}
259
- setToggle={setToggle}
260
- />
261
- )}
262
- {questionType === "reading" && (
263
- <Reading
264
- data={findedQuestion}
265
- answerData={answerData}
266
- aiData={AiData}
267
- setToggle={setToggle}
268
- />
269
- )}
270
- {questionType === "word-play-text" && (
271
- <WordPlayText data={findedQuestion} answerData={answerData} />
272
- )}
273
- {questionType === "word-play-multiple-choice" && (
274
- <WordPlayMultipleChoice
275
- data={findedQuestion}
276
- answerData={answerData}
277
- />
278
- )}
279
- {questionType === "match-pair" && (
280
- <MatchPair data={findedQuestion} answerData={answerData} />
281
- )}
282
- {questionType === "quiz-scripted" && (
283
- <QuizScripted
284
- data={findedQuestion}
285
- answerData={answerData}
286
- aiData={AiData}
287
- setToggle={setToggle}
288
- />
289
- )}
290
- {questionType === "quiz-unscripted" && (
291
- <QuizUnscripted
292
- data={findedQuestion}
293
- answerData={answerData}
294
- aiData={AiData}
295
- setToggle={setToggle}
296
- />
297
- )}
298
- {questionType === "quiz-multiple-choice" && (
299
- <QuizMultipleChoice
300
- data={findedQuestion}
301
- answerData={answerData}
302
- />
303
- )}
304
234
 
305
- {questionType === "dialogue-scripted" && (
306
- <DialogueScripted
307
- data={findedQuestion}
308
- answerData={answerData}
309
- aiData={AiData}
310
- setToggle={setToggle}
311
- />
312
- )}
313
- {questionType === "dialogue-unscripted" && (
314
- <DialogueUnscripted
315
- data={findedQuestion}
316
- answerData={answerData}
317
- aiData={AiData}
318
- setToggle={setToggle}
319
- />
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
+ </>
320
339
  )}
321
- </>
322
- )}
323
- </QuestionContent>
340
+ </QuestionContent>
324
341
 
325
- <Comment
326
- data={comment}
327
- testId={testId}
328
- setData={setComment}
329
- disabledAdd={!hasAnswer}
330
- questionActivityID={questionActivityID}
331
- editMode={
332
- accountType === "instructor-personal" ||
333
- accountType === "instructor-affiliate"
334
- }
335
- />
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
+ )}
336
355
  {/* {(accountType === "instructor-personal" ||
337
356
  accountType === "instructor-affiliate") && (
338
357
  <QuestionFooter>
package/src/components/reportsComponents/reportQuestions/style.jsx CHANGED
@@ -13,6 +13,8 @@ export const Header = styled.div`
13
13
  align-items: center;
14
14
  cursor: pointer;
15
15
  gap: 16px;
16
+ height: 30px;
17
+ width: fit-content;
16
18
  h1 {
17
19
  font-size: 22px;
18
20
  font-weight: 700;
@@ -145,6 +147,22 @@ export const QuestionContent = styled.div`
145
147
  width: 100%;
146
148
  `;
147
149
 
150
+ export const QuestionWrapper = styled.div`
151
+ display: flex;
152
+ width: 100%;
153
+ flex-direction: column;
154
+ justify-content: space-between;
155
+ gap: 20px;
156
+ min-height: 330px;
157
+ `;
158
+
159
+ export const Loader = styled.div`
160
+ display: grid;
161
+ place-items: center;
162
+ min-height: 330px;
163
+ position: relative;
164
+ padding-bottom: 70px;
165
+ `;
148
166
  export const QuestionTitle = styled.h2`
149
167
  border-radius: 5px;
150
168
  background: rgba(254, 241, 203, 0.5);