@appcorp/fusion-storybook 0.1.87 → 0.1.89
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.
|
@@ -9,28 +9,268 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
9
9
|
import { EnhancedInput } from "@appcorp/shadcn/components/enhanced-input";
|
|
10
10
|
import { EnhancedCheckbox } from "@appcorp/shadcn/components/enhanced-checkbox";
|
|
11
11
|
import { EnhancedCombobox } from "@appcorp/shadcn/components/enhanced-combobox";
|
|
12
|
+
import { useDebounce } from "@react-pakistan/util-functions/hooks/use-debounce";
|
|
13
|
+
import { useEffect, useMemo, useState } from "react";
|
|
12
14
|
import { useCourseModule } from "./context";
|
|
13
15
|
import { getCachedSectionsSync } from "../section/cache";
|
|
14
|
-
import { getCachedTeachersSync } from "../teacher/cache";
|
|
16
|
+
import { getCachedTeachersSync, getCachedTeachers } from "../teacher/cache";
|
|
15
17
|
import { getCachedSubjectsSync } from "../subject/cache";
|
|
18
|
+
import { getCachedSections } from "../section/cache";
|
|
19
|
+
import { getCachedSubjects } from "../subject/cache";
|
|
20
|
+
import { getCachedWorkspaceSync } from "../workspace/cache";
|
|
16
21
|
import { useTranslations } from "next-intl";
|
|
17
22
|
export const CourseForm = () => {
|
|
23
|
+
var _a;
|
|
18
24
|
const t = useTranslations("course");
|
|
19
25
|
const { state, handleChange } = useCourseModule();
|
|
26
|
+
const workspace = getCachedWorkspaceSync();
|
|
27
|
+
const schoolId = ((_a = workspace === null || workspace === void 0 ? void 0 : workspace.school) === null || _a === void 0 ? void 0 : _a.id) || "";
|
|
20
28
|
const { code, enabled, errors, sectionId, subjectId, teacherId } = state;
|
|
21
|
-
|
|
29
|
+
const cachedSections = getCachedSectionsSync();
|
|
30
|
+
const cachedSubjects = getCachedSubjectsSync();
|
|
31
|
+
const cachedTeachers = getCachedTeachersSync();
|
|
32
|
+
const [sectionSearchQuery, setSectionSearchQuery] = useState("");
|
|
33
|
+
const [subjectSearchQuery, setSubjectSearchQuery] = useState("");
|
|
34
|
+
const [teacherSearchQuery, setTeacherSearchQuery] = useState("");
|
|
35
|
+
const [remoteSectionOptions, setRemoteSectionOptions] = useState(cachedSections.items.map((section) => {
|
|
36
|
+
var _a;
|
|
37
|
+
return ({
|
|
38
|
+
label: ((_a = section.class) === null || _a === void 0 ? void 0 : _a.code)
|
|
39
|
+
? `${section.class.code}-${section.name}`
|
|
40
|
+
: section.name,
|
|
41
|
+
value: section.id,
|
|
42
|
+
});
|
|
43
|
+
}));
|
|
44
|
+
const [remoteSubjectOptions, setRemoteSubjectOptions] = useState(cachedSubjects.items.map((subject) => ({
|
|
45
|
+
label: subject.name,
|
|
46
|
+
value: subject.id,
|
|
47
|
+
})));
|
|
48
|
+
const [remoteTeacherOptions, setRemoteTeacherOptions] = useState(cachedTeachers.items.map((teacher) => ({
|
|
49
|
+
label: `${teacher.firstName || ""} ${teacher.lastName || ""}`.trim() ||
|
|
50
|
+
teacher.teacherCode ||
|
|
51
|
+
teacher.id,
|
|
52
|
+
value: teacher.id,
|
|
53
|
+
})));
|
|
54
|
+
const [sectionOptionsLoading, setSectionOptionsLoading] = useState(false);
|
|
55
|
+
const [subjectOptionsLoading, setSubjectOptionsLoading] = useState(false);
|
|
56
|
+
const [teacherOptionsLoading, setTeacherOptionsLoading] = useState(false);
|
|
57
|
+
const debouncedSectionSearchQuery = useDebounce(sectionSearchQuery, 300);
|
|
58
|
+
const debouncedSubjectSearchQuery = useDebounce(subjectSearchQuery, 300);
|
|
59
|
+
const debouncedTeacherSearchQuery = useDebounce(teacherSearchQuery, 300);
|
|
60
|
+
const trimmedSectionSearchQuery = debouncedSectionSearchQuery.trim();
|
|
61
|
+
const trimmedSubjectSearchQuery = debouncedSubjectSearchQuery.trim();
|
|
62
|
+
const trimmedTeacherSearchQuery = debouncedTeacherSearchQuery.trim();
|
|
63
|
+
const sectionOptions = useMemo(() => cachedSections.items.map((section) => {
|
|
64
|
+
var _a;
|
|
65
|
+
return ({
|
|
66
|
+
label: ((_a = section.class) === null || _a === void 0 ? void 0 : _a.code)
|
|
67
|
+
? `${section.class.code}-${section.name}`
|
|
68
|
+
: section.name,
|
|
69
|
+
value: section.id,
|
|
70
|
+
});
|
|
71
|
+
}), [cachedSections.items]);
|
|
72
|
+
const subjectOptions = useMemo(() => cachedSubjects.items.map((subject) => ({
|
|
73
|
+
label: subject.name,
|
|
74
|
+
value: subject.id,
|
|
75
|
+
})), [cachedSubjects.items]);
|
|
76
|
+
const teacherOptions = useMemo(() => cachedTeachers.items.map((teacher) => ({
|
|
77
|
+
label: `${teacher.firstName || ""} ${teacher.lastName || ""}`.trim() ||
|
|
78
|
+
teacher.teacherCode ||
|
|
79
|
+
teacher.id,
|
|
80
|
+
value: teacher.id,
|
|
81
|
+
})), [cachedTeachers.items]);
|
|
82
|
+
const selectedSectionOption = useMemo(() => {
|
|
83
|
+
var _a;
|
|
84
|
+
const selectedSection = cachedSections.items.find((section) => section.id === sectionId);
|
|
85
|
+
return selectedSection
|
|
86
|
+
? [
|
|
87
|
+
{
|
|
88
|
+
label: ((_a = selectedSection.class) === null || _a === void 0 ? void 0 : _a.code)
|
|
89
|
+
? `${selectedSection.class.code}-${selectedSection.name}`
|
|
90
|
+
: selectedSection.name,
|
|
91
|
+
value: selectedSection.id,
|
|
92
|
+
},
|
|
93
|
+
]
|
|
94
|
+
: [];
|
|
95
|
+
}, [cachedSections.items, sectionId]);
|
|
96
|
+
const selectedSubjectOption = useMemo(() => {
|
|
97
|
+
const selectedSubject = cachedSubjects.items.find((subject) => subject.id === subjectId);
|
|
98
|
+
return selectedSubject
|
|
99
|
+
? [
|
|
100
|
+
{
|
|
101
|
+
label: selectedSubject.name,
|
|
102
|
+
value: selectedSubject.id,
|
|
103
|
+
},
|
|
104
|
+
]
|
|
105
|
+
: [];
|
|
106
|
+
}, [cachedSubjects.items, subjectId]);
|
|
107
|
+
const selectedTeacherOption = useMemo(() => {
|
|
108
|
+
const selectedTeacher = cachedTeachers.items.find((teacher) => teacher.id === teacherId);
|
|
109
|
+
return selectedTeacher
|
|
110
|
+
? [
|
|
111
|
+
{
|
|
112
|
+
label: `${selectedTeacher.firstName || ""} ${selectedTeacher.lastName || ""}`.trim() ||
|
|
113
|
+
selectedTeacher.teacherCode ||
|
|
114
|
+
selectedTeacher.id,
|
|
115
|
+
value: selectedTeacher.id,
|
|
116
|
+
},
|
|
117
|
+
]
|
|
118
|
+
: [];
|
|
119
|
+
}, [cachedTeachers.items, teacherId]);
|
|
120
|
+
const displayedSectionOptions = useMemo(() => {
|
|
121
|
+
const sourceOptions = trimmedSectionSearchQuery
|
|
122
|
+
? remoteSectionOptions
|
|
123
|
+
: sectionOptions;
|
|
124
|
+
const mergedOptions = [...selectedSectionOption, ...sourceOptions];
|
|
125
|
+
const uniqueOptions = new Map(mergedOptions.map((option) => [option.value, option]));
|
|
126
|
+
return [...uniqueOptions.values()];
|
|
127
|
+
}, [
|
|
128
|
+
remoteSectionOptions,
|
|
129
|
+
sectionOptions,
|
|
130
|
+
selectedSectionOption,
|
|
131
|
+
trimmedSectionSearchQuery,
|
|
132
|
+
]);
|
|
133
|
+
const displayedSubjectOptions = useMemo(() => {
|
|
134
|
+
const sourceOptions = trimmedSubjectSearchQuery
|
|
135
|
+
? remoteSubjectOptions
|
|
136
|
+
: subjectOptions;
|
|
137
|
+
const mergedOptions = [...selectedSubjectOption, ...sourceOptions];
|
|
138
|
+
const uniqueOptions = new Map(mergedOptions.map((option) => [option.value, option]));
|
|
139
|
+
return [...uniqueOptions.values()];
|
|
140
|
+
}, [
|
|
141
|
+
remoteSubjectOptions,
|
|
142
|
+
selectedSubjectOption,
|
|
143
|
+
subjectOptions,
|
|
144
|
+
trimmedSubjectSearchQuery,
|
|
145
|
+
]);
|
|
146
|
+
const displayedTeacherOptions = useMemo(() => {
|
|
147
|
+
const sourceOptions = trimmedTeacherSearchQuery
|
|
148
|
+
? remoteTeacherOptions
|
|
149
|
+
: teacherOptions;
|
|
150
|
+
const mergedOptions = [...selectedTeacherOption, ...sourceOptions];
|
|
151
|
+
const uniqueOptions = new Map(mergedOptions.map((option) => [option.value, option]));
|
|
152
|
+
return [...uniqueOptions.values()];
|
|
153
|
+
}, [
|
|
154
|
+
remoteTeacherOptions,
|
|
155
|
+
selectedTeacherOption,
|
|
156
|
+
teacherOptions,
|
|
157
|
+
trimmedTeacherSearchQuery,
|
|
158
|
+
]);
|
|
159
|
+
useEffect(() => {
|
|
160
|
+
if (!trimmedSectionSearchQuery || !schoolId)
|
|
161
|
+
return;
|
|
162
|
+
let isActive = true;
|
|
163
|
+
const fetchSections = async () => {
|
|
164
|
+
setSectionOptionsLoading(true);
|
|
165
|
+
try {
|
|
166
|
+
const { items } = await getCachedSections({
|
|
167
|
+
params: {
|
|
168
|
+
schoolId,
|
|
169
|
+
searchQuery: trimmedSectionSearchQuery,
|
|
170
|
+
},
|
|
171
|
+
});
|
|
172
|
+
if (!isActive)
|
|
173
|
+
return;
|
|
174
|
+
setRemoteSectionOptions((items || []).map((section) => {
|
|
22
175
|
var _a;
|
|
23
176
|
return ({
|
|
24
|
-
label: ((_a =
|
|
25
|
-
|
|
177
|
+
label: ((_a = section.class) === null || _a === void 0 ? void 0 : _a.code)
|
|
178
|
+
? `${section.class.code}-${section.name}`
|
|
179
|
+
: section.name,
|
|
180
|
+
value: section.id,
|
|
26
181
|
});
|
|
27
|
-
})
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
182
|
+
}));
|
|
183
|
+
}
|
|
184
|
+
catch (_a) {
|
|
185
|
+
if (!isActive)
|
|
186
|
+
return;
|
|
187
|
+
setRemoteSectionOptions([]);
|
|
188
|
+
}
|
|
189
|
+
finally {
|
|
190
|
+
if (isActive) {
|
|
191
|
+
setSectionOptionsLoading(false);
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
};
|
|
195
|
+
void fetchSections();
|
|
196
|
+
return () => {
|
|
197
|
+
isActive = false;
|
|
198
|
+
};
|
|
199
|
+
}, [schoolId, trimmedSectionSearchQuery]);
|
|
200
|
+
useEffect(() => {
|
|
201
|
+
if (!trimmedSubjectSearchQuery || !schoolId)
|
|
202
|
+
return;
|
|
203
|
+
let isActive = true;
|
|
204
|
+
const fetchSubjects = async () => {
|
|
205
|
+
setSubjectOptionsLoading(true);
|
|
206
|
+
try {
|
|
207
|
+
const { items } = await getCachedSubjects({
|
|
208
|
+
params: {
|
|
209
|
+
schoolId,
|
|
210
|
+
searchQuery: trimmedSubjectSearchQuery,
|
|
211
|
+
},
|
|
212
|
+
});
|
|
213
|
+
if (!isActive)
|
|
214
|
+
return;
|
|
215
|
+
setRemoteSubjectOptions((items || []).map((subject) => ({
|
|
216
|
+
label: subject.name,
|
|
217
|
+
value: subject.id,
|
|
218
|
+
})));
|
|
219
|
+
}
|
|
220
|
+
catch (_a) {
|
|
221
|
+
if (!isActive)
|
|
222
|
+
return;
|
|
223
|
+
setRemoteSubjectOptions([]);
|
|
224
|
+
}
|
|
225
|
+
finally {
|
|
226
|
+
if (isActive) {
|
|
227
|
+
setSubjectOptionsLoading(false);
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
};
|
|
231
|
+
void fetchSubjects();
|
|
232
|
+
return () => {
|
|
233
|
+
isActive = false;
|
|
234
|
+
};
|
|
235
|
+
}, [schoolId, trimmedSubjectSearchQuery]);
|
|
236
|
+
useEffect(() => {
|
|
237
|
+
if (!trimmedTeacherSearchQuery || !schoolId)
|
|
238
|
+
return;
|
|
239
|
+
let isActive = true;
|
|
240
|
+
const fetchTeachers = async () => {
|
|
241
|
+
setTeacherOptionsLoading(true);
|
|
242
|
+
try {
|
|
243
|
+
const { items } = await getCachedTeachers({
|
|
244
|
+
params: {
|
|
245
|
+
schoolId,
|
|
246
|
+
searchQuery: trimmedTeacherSearchQuery,
|
|
247
|
+
},
|
|
248
|
+
});
|
|
249
|
+
if (!isActive)
|
|
250
|
+
return;
|
|
251
|
+
setRemoteTeacherOptions((items || []).map((teacher) => ({
|
|
252
|
+
label: `${teacher.firstName || ""} ${teacher.lastName || ""}`.trim() ||
|
|
253
|
+
teacher.teacherCode ||
|
|
254
|
+
teacher.id,
|
|
255
|
+
value: teacher.id,
|
|
256
|
+
})));
|
|
257
|
+
}
|
|
258
|
+
catch (_a) {
|
|
259
|
+
if (!isActive)
|
|
260
|
+
return;
|
|
261
|
+
setRemoteTeacherOptions([]);
|
|
262
|
+
}
|
|
263
|
+
finally {
|
|
264
|
+
if (isActive) {
|
|
265
|
+
setTeacherOptionsLoading(false);
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
};
|
|
269
|
+
void fetchTeachers();
|
|
270
|
+
return () => {
|
|
271
|
+
isActive = false;
|
|
272
|
+
};
|
|
273
|
+
}, [schoolId, trimmedTeacherSearchQuery]);
|
|
274
|
+
console.log("CourseForm Render", teacherId, displayedTeacherOptions);
|
|
275
|
+
return (_jsxs("div", { className: "space-y-4", children: [_jsx(EnhancedInput, { error: errors.code, id: "code", info: t("courseCodeInfo"), label: t("courseCode"), onChange: (e) => handleChange("code", e.target.value), placeholder: t("courseCodePlaceholder"), required: true, value: code }), _jsx(EnhancedCombobox, { emptyText: t("noSectionFound"), error: errors.sectionId, id: "sectionId", info: t("sectionInfo"), label: t("section"), loading: sectionOptionsLoading && Boolean(trimmedSectionSearchQuery), onValueChange: (value) => handleChange("sectionId", value), onSearchChange: setSectionSearchQuery, options: displayedSectionOptions, placeholder: t("sectionPlaceholder"), required: true, searchPlaceholder: t("searchSections"), value: sectionId }), _jsx(EnhancedCombobox, { emptyText: t("noSubjectFound"), error: errors.subjectId, id: "subjectId", info: t("subjectInfo"), label: t("subject"), loading: subjectOptionsLoading && Boolean(trimmedSubjectSearchQuery), onValueChange: (value) => handleChange("subjectId", value), onSearchChange: setSubjectSearchQuery, options: displayedSubjectOptions, placeholder: t("subjectPlaceholder"), required: true, searchPlaceholder: t("searchSubjects"), value: subjectId }), _jsx(EnhancedCombobox, { emptyText: t("noTeacherFound"), error: errors.teacherId, id: "teacherId", info: t("teacherInfo"), label: t("teacher"), loading: teacherOptionsLoading && Boolean(trimmedTeacherSearchQuery), onValueChange: (value) => handleChange("teacherId", value), onSearchChange: setTeacherSearchQuery, options: displayedTeacherOptions, placeholder: t("teacherPlaceholder"), required: true, searchPlaceholder: t("searchTeachers"), value: teacherId }), _jsx(EnhancedCheckbox, { label: t("activeCourse"), defaultChecked: enabled, onCheckedChange: (checked) => handleChange("enabled", checked), info: t("toggleToEnableOrDisableCourse") })] }));
|
|
36
276
|
};
|
|
@@ -95,7 +95,7 @@ export const SectionForm = () => {
|
|
|
95
95
|
isActive = false;
|
|
96
96
|
};
|
|
97
97
|
}, [schoolId, trimmedClassSearchQuery]);
|
|
98
|
-
return (_jsxs("div", { className: "grid grid-cols-1 gap-4", children: [_jsx(EnhancedCombobox, { error: errors.classId, id: "classId", info: t("classInfo"), label: t("class"), loading: classOptionsLoading && Boolean(trimmedClassSearchQuery), onValueChange: (value) => handleChange("classId", value),
|
|
98
|
+
return (_jsxs("div", { className: "grid grid-cols-1 gap-4", children: [_jsx(EnhancedCombobox, { emptyText: t("noClassFound"), error: errors.classId, id: "classId", info: t("classInfo"), label: t("class"), loading: classOptionsLoading && Boolean(trimmedClassSearchQuery), onSearchChange: setClassSearchQuery, onValueChange: (value) => handleChange("classId", value), options: displayedClassOptions, required: true, searchPlaceholder: t("searchClasses"), value: classId }), _jsx(EnhancedInput, { error: errors.name, id: "name", info: t("sectionNameInfo"), label: t("sectionName"), onChange: (e) => handleChange("name", e.target.value), placeholder: t("sectionNamePlaceholder"), required: true, value: name }), _jsx(EnhancedInput, { error: errors.capacity, id: "capacity", info: t("capacityInfo"), label: t("capacity"), onChange: (e) => {
|
|
99
99
|
const value = e.target.value;
|
|
100
100
|
handleChange("capacity", value ? Number(value) : 0);
|
|
101
101
|
}, placeholder: t("capacityPlaceholder"), type: "number", value: (capacity === null || capacity === void 0 ? void 0 : capacity.toString()) || "" }), _jsx(EnhancedCheckbox, { label: t("activeSection"), defaultChecked: enabled, onCheckedChange: (checked) => handleChange("enabled", checked), info: t("toggleToActivateOrDeactivateSection") })] }));
|