@cuemath/leap 3.5.30-as6 → 3.5.30-as7
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.
- package/dist/features/timeline/monthly-report/comps/goals/goals-card/goals-card.js +45 -36
- package/dist/features/timeline/monthly-report/comps/goals/goals-card/goals-card.js.map +1 -1
- package/dist/features/timeline/monthly-timeline/monthly-timeline.js +1 -1
- package/dist/features/timeline/monthly-timeline/monthly-timeline.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,53 +1,62 @@
|
|
|
1
1
|
import { jsxs as e, jsx as r, Fragment as h } from "react/jsx-runtime";
|
|
2
|
-
import { memo as
|
|
3
|
-
import { GOAL_CATEGORY_CONFIG as
|
|
4
|
-
import { ProgressBarContainer as
|
|
5
|
-
import
|
|
6
|
-
import
|
|
2
|
+
import { memo as F, useState as H, useMemo as O, useCallback as W } from "react";
|
|
3
|
+
import { GOAL_CATEGORY_CONFIG as j, calculateProgress as w } from "../goals-constants.js";
|
|
4
|
+
import { ProgressBarContainer as y, TagContainer as E, ChaptersContainer as V } from "./goals-card-styled.js";
|
|
5
|
+
import t from "../../../../../ui/text/text.js";
|
|
6
|
+
import l from "../../../../../ui/layout/flex-view.js";
|
|
7
7
|
import C from "../../../../../ui/separator/separator.js";
|
|
8
8
|
import Y from "../../../../../ui/image/image.js";
|
|
9
9
|
import G from "../../../../../ui/buttons/clickable/clickable.js";
|
|
10
10
|
import B from "./goal-chapter-card.js";
|
|
11
11
|
import q from "../../../../../ui/linear-progress-bar/linear-progress-bar.js";
|
|
12
|
-
const z = ({ category: L, milestone: T, isExpended:
|
|
13
|
-
const [d, k] =
|
|
12
|
+
const z = ({ category: L, milestone: T, isExpended: o = !1 }) => {
|
|
13
|
+
const [d, k] = H(!1), {
|
|
14
14
|
milestone_name: v,
|
|
15
15
|
user_chapters: p,
|
|
16
|
-
progress_stat:
|
|
16
|
+
progress_stat: P,
|
|
17
17
|
previous_progress_stat: n
|
|
18
|
-
} = T, { completed:
|
|
19
|
-
k((
|
|
18
|
+
} = T, { completed: I, total: a } = P, { completed: $, total: u } = n ?? {}, c = w(I, a), f = n && $ && u ? w($, u) : 0, i = c - f, g = !!(n && i > 0 && a === a), S = !!(n && i <= 0 && a !== a), b = c === 100, K = Math.round(c), x = Math.round(i), _ = p.length, D = p.slice(0, 2), m = Math.max(0, _ - 2), M = d ? p.slice(2) : [], N = m > 0, s = O(() => j[L], []), A = s.icon, X = W(() => {
|
|
19
|
+
k((R) => !R);
|
|
20
20
|
}, []);
|
|
21
|
-
return /* @__PURE__ */ e(
|
|
21
|
+
return /* @__PURE__ */ e(l, { children: [
|
|
22
22
|
/* @__PURE__ */ e(
|
|
23
|
-
|
|
23
|
+
l,
|
|
24
24
|
{
|
|
25
25
|
$position: "relative",
|
|
26
|
-
$background:
|
|
27
|
-
$borderColor:
|
|
26
|
+
$background: s.backgroundColor,
|
|
27
|
+
$borderColor: o ? "WHITE_5" : void 0,
|
|
28
28
|
$gutterX: 1,
|
|
29
29
|
$gapX: 1,
|
|
30
|
-
$height:
|
|
30
|
+
$height: o ? "auto" : 72,
|
|
31
31
|
children: [
|
|
32
|
-
/* @__PURE__ */ e(
|
|
33
|
-
A && /* @__PURE__ */ r(
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
32
|
+
/* @__PURE__ */ e(l, { $flexDirection: "row", $flexGapX: o ? 1 : 0.5, children: [
|
|
33
|
+
A && /* @__PURE__ */ r(
|
|
34
|
+
Y,
|
|
35
|
+
{
|
|
36
|
+
src: A,
|
|
37
|
+
withLoader: !0,
|
|
38
|
+
width: o ? 40 : 32,
|
|
39
|
+
height: o ? 40 : 32,
|
|
40
|
+
alt: s.label
|
|
41
|
+
}
|
|
42
|
+
),
|
|
43
|
+
/* @__PURE__ */ e(l, { children: [
|
|
44
|
+
o && /* @__PURE__ */ e(h, { children: [
|
|
45
|
+
/* @__PURE__ */ r(t, { $renderAs: "ac5", $color: s.labelColor, children: s.label }),
|
|
37
46
|
/* @__PURE__ */ r(C, { heightX: 0.25 })
|
|
38
47
|
] }),
|
|
39
|
-
/* @__PURE__ */ r(
|
|
40
|
-
/* @__PURE__ */ r(C, { heightX:
|
|
41
|
-
/* @__PURE__ */ e(
|
|
42
|
-
/* @__PURE__ */ r(
|
|
43
|
-
g && !b && /* @__PURE__ */ e(
|
|
48
|
+
/* @__PURE__ */ r(t, { $renderAs: "ab2", $color: "BLACK_1", children: v }),
|
|
49
|
+
/* @__PURE__ */ r(C, { heightX: o ? 0.5 : 0.125 }),
|
|
50
|
+
/* @__PURE__ */ e(l, { $flexDirection: "row", $alignItems: "center", $flexGapX: 0.25, children: [
|
|
51
|
+
/* @__PURE__ */ r(t, { $renderAs: "ab3", $color: "BLACK_T_60", children: b ? "Completed" : `${K}% complete` }),
|
|
52
|
+
g && !b && /* @__PURE__ */ e(t, { $renderAs: "ab3", $color: "GREEN_6", children: [
|
|
44
53
|
"(+",
|
|
45
|
-
|
|
54
|
+
x,
|
|
46
55
|
"%)"
|
|
47
56
|
] })
|
|
48
57
|
] })
|
|
49
58
|
] }),
|
|
50
|
-
/* @__PURE__ */ r(
|
|
59
|
+
/* @__PURE__ */ r(y, { children: /* @__PURE__ */ r(
|
|
51
60
|
q,
|
|
52
61
|
{
|
|
53
62
|
percentage: g ? f : c,
|
|
@@ -59,14 +68,14 @@ const z = ({ category: L, milestone: T, isExpended: s = !1 }) => {
|
|
|
59
68
|
}
|
|
60
69
|
) })
|
|
61
70
|
] }),
|
|
62
|
-
|
|
71
|
+
S && /* @__PURE__ */ e(h, { children: [
|
|
63
72
|
/* @__PURE__ */ r(C, { heightX: 0.875 }),
|
|
64
|
-
/* @__PURE__ */ r(
|
|
73
|
+
/* @__PURE__ */ r(E, { $gapX: 0.5, $gutterX: 1, $background: s.tagColor, children: /* @__PURE__ */ r(t, { $renderAs: "ub3", $color: "BLACK_1", children: "Learning plan was modified — progress updated accordingly." }) })
|
|
65
74
|
] })
|
|
66
75
|
]
|
|
67
76
|
}
|
|
68
77
|
),
|
|
69
|
-
|
|
78
|
+
o && _ > 0 && /* @__PURE__ */ e(
|
|
70
79
|
V,
|
|
71
80
|
{
|
|
72
81
|
$gapX: 1,
|
|
@@ -75,13 +84,13 @@ const z = ({ category: L, milestone: T, isExpended: s = !1 }) => {
|
|
|
75
84
|
$borderColor: "WHITE_5",
|
|
76
85
|
children: [
|
|
77
86
|
/* @__PURE__ */ r(B, { chapters: D }),
|
|
78
|
-
|
|
79
|
-
!d && /* @__PURE__ */ r(
|
|
87
|
+
N && /* @__PURE__ */ e(h, { children: [
|
|
88
|
+
!d && /* @__PURE__ */ r(l, { $gutterX: 4.5, children: /* @__PURE__ */ r(
|
|
80
89
|
G,
|
|
81
90
|
{
|
|
82
91
|
onClick: X,
|
|
83
92
|
label: `+${m} chapters`,
|
|
84
|
-
children: /* @__PURE__ */ e(
|
|
93
|
+
children: /* @__PURE__ */ e(t, { $renderAs: "ub3-bold", $color: "BLACK_1", children: [
|
|
85
94
|
"+",
|
|
86
95
|
m,
|
|
87
96
|
" chapters"
|
|
@@ -89,15 +98,15 @@ const z = ({ category: L, milestone: T, isExpended: s = !1 }) => {
|
|
|
89
98
|
}
|
|
90
99
|
) }),
|
|
91
100
|
d && /* @__PURE__ */ e(h, { children: [
|
|
92
|
-
/* @__PURE__ */ r(B, { chapters:
|
|
93
|
-
/* @__PURE__ */ r(
|
|
101
|
+
/* @__PURE__ */ r(B, { chapters: M }),
|
|
102
|
+
/* @__PURE__ */ r(l, { $gutterX: 4.5, children: /* @__PURE__ */ r(G, { onClick: X, label: "Show less", children: /* @__PURE__ */ r(t, { $renderAs: "ub3-bold", $color: "BLACK_1", children: "Show less" }) }) })
|
|
94
103
|
] })
|
|
95
104
|
] })
|
|
96
105
|
]
|
|
97
106
|
}
|
|
98
107
|
)
|
|
99
108
|
] });
|
|
100
|
-
}, nr =
|
|
109
|
+
}, nr = F(z);
|
|
101
110
|
export {
|
|
102
111
|
nr as default
|
|
103
112
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"goals-card.js","sources":["../../../../../../../src/features/timeline/monthly-report/comps/goals/goals-card/goals-card.tsx"],"sourcesContent":["import { type FC, memo, useCallback, useMemo, useState } from 'react';\n\nimport { type IGoalsCardProps } from '../goals-types';\nimport { calculateProgress, GOAL_CATEGORY_CONFIG } from '../goals-constants';\nimport * as Styled from './goals-card-styled';\nimport Text from '../../../../../ui/text/text';\nimport FlexView from '../../../../../ui/layout/flex-view';\nimport Separator from '../../../../../ui/separator/separator';\nimport Image from '../../../../../ui/image/image';\nimport Clickable from '../../../../../ui/buttons/clickable/clickable';\nimport GoalsCardChapters from './goal-chapter-card';\nimport LinearProgressBar from '../../../../../ui/linear-progress-bar/linear-progress-bar';\n\nconst GoalsCard: FC<IGoalsCardProps> = ({ category, milestone, isExpended = false }) => {\n const [showAllChapters, setShowAllChapters] = useState(false);\n const {\n milestone_name: milestoneName,\n user_chapters: userChapters,\n progress_stat: progressStat,\n previous_progress_stat: prevProgressStat,\n } = milestone;\n const { completed, total } = progressStat;\n const { completed: prevCompleted, total: prevTotal } = prevProgressStat ?? {};\n const currentProgress = calculateProgress(completed, total);\n const previousProgress =\n prevProgressStat && prevCompleted && prevTotal\n ? calculateProgress(prevCompleted, prevTotal)\n : 0;\n\n const progressDifference = currentProgress - previousProgress;\n const showIndicator = Boolean(prevProgressStat && progressDifference > 0 && total === total);\n const showTag = Boolean(prevProgressStat && progressDifference <= 0 && total !== total);\n const isCompleted = currentProgress === 100;\n const roundedProgress = Math.round(currentProgress);\n const roundedDifference = Math.round(progressDifference);\n\n const totalChapters = userChapters.length;\n const visibleChapters = userChapters.slice(0, 2);\n const remainingChapters = Math.max(0, totalChapters - 2);\n const hiddenChapters = showAllChapters ? userChapters.slice(2) : [];\n const hasRemainingChapters = remainingChapters > 0;\n\n const categoryConfig = useMemo(() => GOAL_CATEGORY_CONFIG[category], []);\n const icon = categoryConfig.icon;\n\n const handleToggleChapters = useCallback(() => {\n setShowAllChapters(prev => !prev);\n }, []);\n\n return (\n <FlexView>\n <FlexView\n $position=\"relative\"\n $background={categoryConfig.backgroundColor}\n $borderColor={isExpended ? 'WHITE_5' : undefined}\n $gutterX={1}\n $gapX={1}\n $height={isExpended ? 'auto' : 72}\n >\n <FlexView $flexDirection=\"row\" $flexGapX={0.5}>\n {icon && (\n <Image src={icon} withLoader width={32} height={32} alt={categoryConfig.label} />\n )}\n <FlexView>\n {isExpended && (\n <>\n <Text $renderAs=\"ac5\" $color={categoryConfig.labelColor}>\n {categoryConfig.label}\n </Text>\n <Separator heightX={0.25} />\n </>\n )}\n <Text $renderAs=\"ab2\" $color=\"BLACK_1\">\n {milestoneName}\n </Text>\n <Separator heightX={isExpended ? 0.5 : 0.125} />\n <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGapX={0.25}>\n <Text $renderAs=\"ab3\" $color=\"BLACK_T_60\">\n {isCompleted ? 'Completed' : `${roundedProgress}% complete`}\n </Text>\n {showIndicator && !isCompleted && (\n <Text $renderAs=\"ab3\" $color=\"GREEN_6\">\n (+{roundedDifference}%)\n </Text>\n )}\n </FlexView>\n </FlexView>\n <Styled.ProgressBarContainer>\n <LinearProgressBar\n percentage={showIndicator ? previousProgress : currentProgress}\n delta={showIndicator ? progressDifference : 0}\n height={4}\n backgroundColor=\"WHITE_5\"\n fillColor=\"BLACK_1\"\n deltaProgressColor=\"GREEN_5\"\n />\n </Styled.ProgressBarContainer>\n </FlexView>\n {showTag && (\n <>\n <Separator heightX={0.875} />\n <Styled.TagContainer $gapX={0.5} $gutterX={1} $background={categoryConfig.tagColor}>\n <Text $renderAs=\"ub3\" $color=\"BLACK_1\">\n Learning plan was modified — progress updated accordingly.\n </Text>\n </Styled.TagContainer>\n </>\n )}\n </FlexView>\n {isExpended && totalChapters > 0 && (\n <Styled.ChaptersContainer\n $gapX={1}\n $flexDirection=\"column\"\n $flexGapX={1.25}\n $borderColor=\"WHITE_5\"\n >\n <GoalsCardChapters chapters={visibleChapters} />\n {hasRemainingChapters && (\n <>\n {!showAllChapters && (\n <FlexView $gutterX={4.5}>\n <Clickable\n onClick={handleToggleChapters}\n label={`+${remainingChapters} chapters`}\n >\n <Text $renderAs=\"ub3-bold\" $color=\"BLACK_1\">\n +{remainingChapters} chapters\n </Text>\n </Clickable>\n </FlexView>\n )}\n {showAllChapters && (\n <>\n <GoalsCardChapters chapters={hiddenChapters} />\n <FlexView $gutterX={4.5}>\n <Clickable onClick={handleToggleChapters} label=\"Show less\">\n <Text $renderAs=\"ub3-bold\" $color=\"BLACK_1\">\n Show less\n </Text>\n </Clickable>\n </FlexView>\n </>\n )}\n </>\n )}\n </Styled.ChaptersContainer>\n )}\n </FlexView>\n );\n};\n\nexport default memo(GoalsCard);\n"],"names":["GoalsCard","category","milestone","isExpended","showAllChapters","setShowAllChapters","useState","milestoneName","userChapters","progressStat","prevProgressStat","completed","total","prevCompleted","prevTotal","currentProgress","calculateProgress","previousProgress","progressDifference","showIndicator","showTag","isCompleted","roundedProgress","roundedDifference","totalChapters","visibleChapters","remainingChapters","hiddenChapters","hasRemainingChapters","categoryConfig","useMemo","GOAL_CATEGORY_CONFIG","icon","handleToggleChapters","useCallback","prev","FlexView","jsxs","jsx","Image","Fragment","Text","Separator","Styled.ProgressBarContainer","LinearProgressBar","Styled.TagContainer","Styled.ChaptersContainer","GoalsCardChapters","Clickable","GoalsCard$1","memo"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"goals-card.js","sources":["../../../../../../../src/features/timeline/monthly-report/comps/goals/goals-card/goals-card.tsx"],"sourcesContent":["import { type FC, memo, useCallback, useMemo, useState } from 'react';\n\nimport { type IGoalsCardProps } from '../goals-types';\nimport { calculateProgress, GOAL_CATEGORY_CONFIG } from '../goals-constants';\nimport * as Styled from './goals-card-styled';\nimport Text from '../../../../../ui/text/text';\nimport FlexView from '../../../../../ui/layout/flex-view';\nimport Separator from '../../../../../ui/separator/separator';\nimport Image from '../../../../../ui/image/image';\nimport Clickable from '../../../../../ui/buttons/clickable/clickable';\nimport GoalsCardChapters from './goal-chapter-card';\nimport LinearProgressBar from '../../../../../ui/linear-progress-bar/linear-progress-bar';\n\nconst GoalsCard: FC<IGoalsCardProps> = ({ category, milestone, isExpended = false }) => {\n const [showAllChapters, setShowAllChapters] = useState(false);\n const {\n milestone_name: milestoneName,\n user_chapters: userChapters,\n progress_stat: progressStat,\n previous_progress_stat: prevProgressStat,\n } = milestone;\n const { completed, total } = progressStat;\n const { completed: prevCompleted, total: prevTotal } = prevProgressStat ?? {};\n const currentProgress = calculateProgress(completed, total);\n const previousProgress =\n prevProgressStat && prevCompleted && prevTotal\n ? calculateProgress(prevCompleted, prevTotal)\n : 0;\n\n const progressDifference = currentProgress - previousProgress;\n const showIndicator = Boolean(prevProgressStat && progressDifference > 0 && total === total);\n const showTag = Boolean(prevProgressStat && progressDifference <= 0 && total !== total);\n const isCompleted = currentProgress === 100;\n const roundedProgress = Math.round(currentProgress);\n const roundedDifference = Math.round(progressDifference);\n\n const totalChapters = userChapters.length;\n const visibleChapters = userChapters.slice(0, 2);\n const remainingChapters = Math.max(0, totalChapters - 2);\n const hiddenChapters = showAllChapters ? userChapters.slice(2) : [];\n const hasRemainingChapters = remainingChapters > 0;\n\n const categoryConfig = useMemo(() => GOAL_CATEGORY_CONFIG[category], []);\n const icon = categoryConfig.icon;\n\n const handleToggleChapters = useCallback(() => {\n setShowAllChapters(prev => !prev);\n }, []);\n\n return (\n <FlexView>\n <FlexView\n $position=\"relative\"\n $background={categoryConfig.backgroundColor}\n $borderColor={isExpended ? 'WHITE_5' : undefined}\n $gutterX={1}\n $gapX={1}\n $height={isExpended ? 'auto' : 72}\n >\n <FlexView $flexDirection=\"row\" $flexGapX={isExpended ? 1 : 0.5}>\n {icon && (\n <Image\n src={icon}\n withLoader\n width={isExpended ? 40 : 32}\n height={isExpended ? 40 : 32}\n alt={categoryConfig.label}\n />\n )}\n <FlexView>\n {isExpended && (\n <>\n <Text $renderAs=\"ac5\" $color={categoryConfig.labelColor}>\n {categoryConfig.label}\n </Text>\n <Separator heightX={0.25} />\n </>\n )}\n <Text $renderAs=\"ab2\" $color=\"BLACK_1\">\n {milestoneName}\n </Text>\n <Separator heightX={isExpended ? 0.5 : 0.125} />\n <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGapX={0.25}>\n <Text $renderAs=\"ab3\" $color=\"BLACK_T_60\">\n {isCompleted ? 'Completed' : `${roundedProgress}% complete`}\n </Text>\n {showIndicator && !isCompleted && (\n <Text $renderAs=\"ab3\" $color=\"GREEN_6\">\n (+{roundedDifference}%)\n </Text>\n )}\n </FlexView>\n </FlexView>\n <Styled.ProgressBarContainer>\n <LinearProgressBar\n percentage={showIndicator ? previousProgress : currentProgress}\n delta={showIndicator ? progressDifference : 0}\n height={4}\n backgroundColor=\"WHITE_5\"\n fillColor=\"BLACK_1\"\n deltaProgressColor=\"GREEN_5\"\n />\n </Styled.ProgressBarContainer>\n </FlexView>\n {showTag && (\n <>\n <Separator heightX={0.875} />\n <Styled.TagContainer $gapX={0.5} $gutterX={1} $background={categoryConfig.tagColor}>\n <Text $renderAs=\"ub3\" $color=\"BLACK_1\">\n Learning plan was modified — progress updated accordingly.\n </Text>\n </Styled.TagContainer>\n </>\n )}\n </FlexView>\n {isExpended && totalChapters > 0 && (\n <Styled.ChaptersContainer\n $gapX={1}\n $flexDirection=\"column\"\n $flexGapX={1.25}\n $borderColor=\"WHITE_5\"\n >\n <GoalsCardChapters chapters={visibleChapters} />\n {hasRemainingChapters && (\n <>\n {!showAllChapters && (\n <FlexView $gutterX={4.5}>\n <Clickable\n onClick={handleToggleChapters}\n label={`+${remainingChapters} chapters`}\n >\n <Text $renderAs=\"ub3-bold\" $color=\"BLACK_1\">\n +{remainingChapters} chapters\n </Text>\n </Clickable>\n </FlexView>\n )}\n {showAllChapters && (\n <>\n <GoalsCardChapters chapters={hiddenChapters} />\n <FlexView $gutterX={4.5}>\n <Clickable onClick={handleToggleChapters} label=\"Show less\">\n <Text $renderAs=\"ub3-bold\" $color=\"BLACK_1\">\n Show less\n </Text>\n </Clickable>\n </FlexView>\n </>\n )}\n </>\n )}\n </Styled.ChaptersContainer>\n )}\n </FlexView>\n );\n};\n\nexport default memo(GoalsCard);\n"],"names":["GoalsCard","category","milestone","isExpended","showAllChapters","setShowAllChapters","useState","milestoneName","userChapters","progressStat","prevProgressStat","completed","total","prevCompleted","prevTotal","currentProgress","calculateProgress","previousProgress","progressDifference","showIndicator","showTag","isCompleted","roundedProgress","roundedDifference","totalChapters","visibleChapters","remainingChapters","hiddenChapters","hasRemainingChapters","categoryConfig","useMemo","GOAL_CATEGORY_CONFIG","icon","handleToggleChapters","useCallback","prev","FlexView","jsxs","jsx","Image","Fragment","Text","Separator","Styled.ProgressBarContainer","LinearProgressBar","Styled.TagContainer","Styled.ChaptersContainer","GoalsCardChapters","Clickable","GoalsCard$1","memo"],"mappings":"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"}
|
|
@@ -33,7 +33,7 @@ const _ = ({
|
|
|
33
33
|
const a = $ === 0, u = r.month === 12, s = !a && u, h = F[r.year];
|
|
34
34
|
return /* @__PURE__ */ l(t, { $width: "100%", children: [
|
|
35
35
|
!a && !s && /* @__PURE__ */ e(c, { heightX: 2 }),
|
|
36
|
-
s && h && /* @__PURE__ */ e(M, { $marginBottom: -
|
|
36
|
+
s && h && /* @__PURE__ */ e(M, { $marginBottom: -122, children: /* @__PURE__ */ e(E, { src: h, alt: r.year.toString(), height: "248px" }) }),
|
|
37
37
|
/* @__PURE__ */ l(t, { $gutterX: 1, children: [
|
|
38
38
|
/* @__PURE__ */ e(D, { $renderAs: "ac4", $color: "BLACK_T_60", children: X[r.month - 1] }),
|
|
39
39
|
/* @__PURE__ */ e(c, { heightX: 1 }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"monthly-timeline.js","sources":["../../../../src/features/timeline/monthly-timeline/monthly-timeline.tsx"],"sourcesContent":["import { type FC, memo, useCallback, useEffect } from 'react';\n\nimport { type IMonthlyTimelineProps } from './monthly-timeline-types';\nimport { useMonthlyTimelineGet } from './api/use-monthly-timeline-get';\nimport MonthlyTimelineView from './monthly-timeline-view';\nimport AppLoader from '../../ui/loader/app-loader/app-loader';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport Image from '../../ui/image/image';\nimport Separator from '../../ui/separator/separator';\nimport { monthNames, yearImages } from './constants';\nimport Error from '../../ui/error/error';\nimport * as Styled from './monthly-timeline-styled';\n\nconst MonthlyTimeline: FC<IMonthlyTimelineProps> = ({\n userType,\n studentId,\n courseStreams,\n onReportClick,\n}) => {\n const {\n get: getTimeline,\n data: timelineData,\n isProcessing,\n isProcessingFailed,\n } = useMonthlyTimelineGet();\n\n const fetchData = useCallback(() => {\n getTimeline(studentId, {\n course_stream: userType === 'TEACHER' ? courseStreams : [],\n timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,\n });\n }, [getTimeline, studentId]);\n\n useEffect(() => {\n fetchData();\n }, [fetchData]);\n\n if (isProcessing || !timelineData) {\n return <AppLoader height=\"100dvh\" />;\n }\n\n if (isProcessingFailed) {\n return (\n <FlexView $flex={1} $alignItems=\"center\" $justifyContent=\"center\">\n <Error onTryAgain={fetchData} />\n </FlexView>\n );\n }\n\n return (\n <FlexView $gapX={2}>\n {timelineData.map((item, index) => {\n const isFirstItem = index === 0;\n const isDecember = item.month === 12;\n const showYearImage = !isFirstItem && isDecember;\n const yearImage = yearImages[item.year];\n\n return (\n <FlexView key={`${item.month}-${item.year}`} $width=\"100%\">\n {!isFirstItem && !showYearImage && <Separator heightX={2} />}\n {showYearImage && yearImage && (\n <Styled.ImageContainer $marginBottom={-
|
|
1
|
+
{"version":3,"file":"monthly-timeline.js","sources":["../../../../src/features/timeline/monthly-timeline/monthly-timeline.tsx"],"sourcesContent":["import { type FC, memo, useCallback, useEffect } from 'react';\n\nimport { type IMonthlyTimelineProps } from './monthly-timeline-types';\nimport { useMonthlyTimelineGet } from './api/use-monthly-timeline-get';\nimport MonthlyTimelineView from './monthly-timeline-view';\nimport AppLoader from '../../ui/loader/app-loader/app-loader';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport Image from '../../ui/image/image';\nimport Separator from '../../ui/separator/separator';\nimport { monthNames, yearImages } from './constants';\nimport Error from '../../ui/error/error';\nimport * as Styled from './monthly-timeline-styled';\n\nconst MonthlyTimeline: FC<IMonthlyTimelineProps> = ({\n userType,\n studentId,\n courseStreams,\n onReportClick,\n}) => {\n const {\n get: getTimeline,\n data: timelineData,\n isProcessing,\n isProcessingFailed,\n } = useMonthlyTimelineGet();\n\n const fetchData = useCallback(() => {\n getTimeline(studentId, {\n course_stream: userType === 'TEACHER' ? courseStreams : [],\n timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,\n });\n }, [getTimeline, studentId]);\n\n useEffect(() => {\n fetchData();\n }, [fetchData]);\n\n if (isProcessing || !timelineData) {\n return <AppLoader height=\"100dvh\" />;\n }\n\n if (isProcessingFailed) {\n return (\n <FlexView $flex={1} $alignItems=\"center\" $justifyContent=\"center\">\n <Error onTryAgain={fetchData} />\n </FlexView>\n );\n }\n\n return (\n <FlexView $gapX={2}>\n {timelineData.map((item, index) => {\n const isFirstItem = index === 0;\n const isDecember = item.month === 12;\n const showYearImage = !isFirstItem && isDecember;\n const yearImage = yearImages[item.year];\n\n return (\n <FlexView key={`${item.month}-${item.year}`} $width=\"100%\">\n {!isFirstItem && !showYearImage && <Separator heightX={2} />}\n {showYearImage && yearImage && (\n <Styled.ImageContainer $marginBottom={-122}>\n <Image src={yearImage} alt={item.year.toString()} height=\"248px\" />\n </Styled.ImageContainer>\n )}\n <FlexView $gutterX={1}>\n <Text $renderAs=\"ac4\" $color=\"BLACK_T_60\">\n {monthNames[item.month - 1]}\n </Text>\n <Separator heightX={1} />\n <MonthlyTimelineView\n reports={item.reports}\n month={item.month}\n year={item.year}\n onReportClick={onReportClick}\n />\n </FlexView>\n </FlexView>\n );\n })}\n </FlexView>\n );\n};\n\nexport default memo(MonthlyTimeline);\n"],"names":["MonthlyTimeline","userType","studentId","courseStreams","onReportClick","getTimeline","timelineData","isProcessing","isProcessingFailed","useMonthlyTimelineGet","fetchData","useCallback","useEffect","jsx","AppLoader","FlexView","Error","item","index","isFirstItem","isDecember","showYearImage","yearImage","yearImages","jsxs","Separator","Styled.ImageContainer","Image","Text","monthNames","MonthlyTimelineView","monthlyTimeline","memo"],"mappings":";;;;;;;;;;;;AAcA,MAAMA,IAA6C,CAAC;AAAA,EAClD,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AACF,MAAM;AACE,QAAA;AAAA,IACJ,KAAKC;AAAA,IACL,MAAMC;AAAA,IACN,cAAAC;AAAA,IACA,oBAAAC;AAAA,MACEC,EAAsB,GAEpBC,IAAYC,EAAY,MAAM;AAClC,IAAAN,EAAYH,GAAW;AAAA,MACrB,eAAeD,MAAa,YAAYE,IAAgB,CAAC;AAAA,MACzD,UAAU,KAAK,iBAAiB,gBAAkB,EAAA;AAAA,IAAA,CACnD;AAAA,EAAA,GACA,CAACE,GAAaH,CAAS,CAAC;AAMvB,SAJJU,EAAU,MAAM;AACJ,IAAAF;EAAA,GACT,CAACA,CAAS,CAAC,GAEVH,KAAgB,CAACD,IACZ,gBAAAO,EAACC,GAAU,EAAA,QAAO,SAAS,CAAA,IAGhCN,IAEC,gBAAAK,EAAAE,GAAA,EAAS,OAAO,GAAG,aAAY,UAAS,iBAAgB,UACvD,UAAC,gBAAAF,EAAAG,GAAA,EAAM,YAAYN,EAAA,CAAW,EAChC,CAAA,IAKF,gBAAAG,EAACE,KAAS,OAAO,GACd,YAAa,IAAI,CAACE,GAAMC,MAAU;AACjC,UAAMC,IAAcD,MAAU,GACxBE,IAAaH,EAAK,UAAU,IAC5BI,IAAgB,CAACF,KAAeC,GAChCE,IAAYC,EAAWN,EAAK,IAAI;AAGpC,WAAA,gBAAAO,EAACT,GAA4C,EAAA,QAAO,QACjD,UAAA;AAAA,MAAA,CAACI,KAAe,CAACE,KAAkB,gBAAAR,EAAAY,GAAA,EAAU,SAAS,GAAG;AAAA,MACzDJ,KAAiBC,KAChB,gBAAAT,EAACa,GAAA,EAAsB,eAAe,MACpC,UAAA,gBAAAb,EAACc,KAAM,KAAKL,GAAW,KAAKL,EAAK,KAAK,YAAY,QAAO,QAAQ,CAAA,GACnE;AAAA,MAEF,gBAAAO,EAACT,GAAS,EAAA,UAAU,GAClB,UAAA;AAAA,QAAC,gBAAAF,EAAAe,GAAA,EAAK,WAAU,OAAM,QAAO,cAC1B,UAAWC,EAAAZ,EAAK,QAAQ,CAAC,EAC5B,CAAA;AAAA,QACA,gBAAAJ,EAACY,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,QACvB,gBAAAZ;AAAA,UAACiB;AAAA,UAAA;AAAA,YACC,SAASb,EAAK;AAAA,YACd,OAAOA,EAAK;AAAA,YACZ,MAAMA,EAAK;AAAA,YACX,eAAAb;AAAA,UAAA;AAAA,QACF;AAAA,MAAA,GACF;AAAA,IAAA,KAlBa,GAAGa,EAAK,KAAK,IAAIA,EAAK,IAAI,EAmBzC;AAAA,EAEH,CAAA,EACH,CAAA;AAEJ,GAEec,IAAAC,EAAKhC,CAAe;"}
|