@selfcommunity/react-ui 0.10.2-courses.197 → 0.10.2-courses.199

package/lib/cjs/components/CourseDashboard/Teacher/Comments.js

@@ -98,7 +98,7 @@ function Comments(props) {
                 map.set(name, [...map.get(name), comment]);
             }
         });
-        return Array.from(map.entries()).map(([name, comments]) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.outerWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: name })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.innerWrapper }, { children: [comments.map((comment) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { src: comment.created_by.avatar, alt: comment.created_by.username, className: classes.avatar }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: comment.created_by.username })), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedDate, { value: comment.created_at }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", component: "div", dangerouslySetInnerHTML: { __html: comment.html } })] })] }), comment.id))), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_PREVIEW_ROUTE_NAME, (0, course_1.getUrlLesson)(comments[0].extras.course, comments[0].extras.lesson, comments[0].extras.section)), size: "small", variant: "outlined", color: "inherit", className: classes.button }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label" }) })) }))] }))] }), name)));
+        return Array.from(map.entries()).map(([name, comments]) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.outerWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: name })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.innerWrapper }, { children: [comments.map((comment) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { src: comment.created_by.avatar, alt: comment.created_by.username, className: classes.avatar }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: comment.created_by.username })), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedDate, { value: comment.created_at }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", component: "div", dangerouslySetInnerHTML: { __html: comment.html } })] })] }), comment.id))), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME, (0, course_1.getUrlLesson)(comments[0].extras.course, comments[0].extras.lesson, comments[0].extras.section)), size: "small", variant: "outlined", color: "inherit", className: classes.button }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label" }) })) }))] }))] }), name)));
     }, [state.results]);
     if (!state.initialized) {
         return (0, jsx_runtime_1.jsx)(CommentsSkeleton, {});

package/lib/cjs/components/CourseDashboard/Teacher/Students.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { SCCourseType } from '@selfcommunity/types';
+import { CourseDashboardUsersParams } from '@selfcommunity/api-services';
 interface StudentsProps {
     course: SCCourseType;
-    endpointQueryParams?: Record<string, string | number>;
+    endpointQueryParams?: CourseDashboardUsersParams;
 }
 declare function Students(props: StudentsProps): JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Students>;

package/lib/cjs/components/CourseDashboard/Teacher/Students.js

@@ -63,6 +63,9 @@ function Students(props) {
             };
         }
     }, [scUserContext.user, _init]);
-    return ((0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: course_1.SCCourseUsersTableModeType.DASHBOARD, emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" }));
+    return ((0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { state: state, dispatch: dispatch, course: course, endpointSearch: {
+            url: () => api_services_1.Endpoints.GetCourseDashboardUsers.url({ id: course.id }),
+            method: api_services_1.Endpoints.GetCourseDashboardUsers.method
+        }, headerCells: headerCells, mode: course_1.SCCourseUsersTableModeType.DASHBOARD, emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" }));
 }
 exports.default = (0, react_1.memo)(Students);

package/lib/cjs/components/EditCourse/Requests.d.ts

@@ -1,9 +1,10 @@
 import { SyntheticEvent } from 'react';
 import { SCCourseType } from '@selfcommunity/types';
+import { BaseGetParams } from '@selfcommunity/api-services';
 import { SCCourseEditTabType } from '../../types/course';
 interface RequestsProps {
     course: SCCourseType;
-    endpointQueryParams?: Record<string, string | number>;
+    endpointQueryParams?: BaseGetParams;
     handleTabChange: (_e: SyntheticEvent, newTabValue: SCCourseEditTabType) => void;
 }
 declare function Requests(props: RequestsProps): JSX.Element;

package/lib/cjs/components/EditCourse/Requests.js

@@ -89,6 +89,9 @@ function Requests(props) {
             updatedUsers.current && pubsub_js_1.default.unsubscribe(updatedUsers.current);
         };
     }, [handleRejectUser]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.requests.title", defaultMessage: "ui.editCourse.tab.requests.title", values: { requestsNumber: state.results.length } }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.usersStatusWrapper }, { children: (0, jsx_runtime_1.jsx)(Status_1.default, { course: course, handleTabChange: handleTabChange }) })), (0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: course_1.SCCourseUsersTableModeType.REQUESTS, emptyStatusTitle: "ui.courseUsersTable.empty.requests.title" })] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.requests.title", defaultMessage: "ui.editCourse.tab.requests.title", values: { requestsNumber: state.results.length } }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.usersStatusWrapper }, { children: (0, jsx_runtime_1.jsx)(Status_1.default, { course: course, handleTabChange: handleTabChange }) })), (0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { state: state, dispatch: dispatch, course: course, endpointSearch: {
+                    url: () => api_services_1.Endpoints.GetCourseWaitingApproval.url({ id: course.id }),
+                    method: api_services_1.Endpoints.GetCourseWaitingApproval.method
+                }, headerCells: headerCells, mode: course_1.SCCourseUsersTableModeType.REQUESTS, emptyStatusTitle: "ui.courseUsersTable.empty.requests.title" })] }));
 }
 exports.default = (0, react_1.memo)(Requests);

package/lib/cjs/components/EditCourse/Users.js

@@ -6,6 +6,7 @@ const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
 const AddUsersButton_1 = tslib_1.__importDefault(require("../../shared/AddUsersButton"));
 const react_1 = require("react");
+const types_1 = require("@selfcommunity/types");
 const utils_1 = require("@selfcommunity/utils");
 const Errors_1 = require("../../constants/Errors");
 const notistack_1 = require("notistack");
@@ -43,7 +44,7 @@ function Users(props) {
     const { course, endpointQueryParams = {
         limit: 6,
         offset: Pagination_1.DEFAULT_PAGINATION_OFFSET,
-        statuses: JSON.stringify(['joined', 'manager', 'creator'])
+        statuses: JSON.stringify([types_1.SCCourseJoinStatusType.JOINED, types_1.SCCourseJoinStatusType.MANAGER, types_1.SCCourseJoinStatusType.CREATOR])
     }, handleTabChange } = props;
     // STATES
     const [state, dispatch] = (0, react_1.useReducer)(widget_1.dataWidgetReducer, {
@@ -129,6 +130,11 @@ function Users(props) {
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.users.title", defaultMessage: "ui.editCourse.tab.users.title", values: { usersNumber: state.count } }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.usersStatusWrapper }, { children: [(0, jsx_runtime_1.jsx)(Status_1.default, { course: course, handleTabChange: handleTabChange }), (0, jsx_runtime_1.jsx)(AddUsersButton_1.default, { label: "ui.editCourse.tab.users.addUsersButton.label", endpoint: {
                             url: () => api_services_1.Endpoints.GetCourseSuggestedUsers.url({ id: course.id }),
                             method: api_services_1.Endpoints.GetCourseSuggestedUsers.method
-                        }, onConfirm: handleConfirm })] })), (0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: course_1.SCCourseUsersTableModeType.EDIT, emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" })] }));
+                        }, onConfirm: handleConfirm })] })), (0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { state: state, dispatch: dispatch, course: course, endpointSearch: {
+                    url: () => api_services_1.Endpoints.GetCourseDashboardUsers.url({ id: course.id }),
+                    method: api_services_1.Endpoints.GetCourseDashboardUsers.method
+                }, endpointQueryParamsSearch: {
+                    statuses: JSON.stringify([types_1.SCCourseJoinStatusType.JOINED, types_1.SCCourseJoinStatusType.MANAGER, types_1.SCCourseJoinStatusType.CREATOR])
+                }, headerCells: headerCells, mode: course_1.SCCourseUsersTableModeType.EDIT, emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" })] }));
 }
 exports.default = (0, react_1.memo)(Users);

package/lib/cjs/components/Notification/Course/Course.js

@@ -70,12 +70,12 @@ function CourseNotification(props) {
                                 ? notificationObject.comment.lesson_name
                                 : notificationObject.course.name,
                             link: (...chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
-                                    ? react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME
+                                    ? react_core_1.SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME
                                     : react_core_1.SCRoutes.COURSE_ROUTE_NAME, notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
                                     ? formatLessonUrl(notificationObject)
                                     : notificationObject.course) }, { children: chunks })))
                         } })] }), footer: isToastTemplate ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "primary" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
-                                ? react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME
+                                ? react_core_1.SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME
                                 : react_core_1.SCRoutes.COURSE_ROUTE_NAME, notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
                                 ? formatLessonUrl(notificationObject)
                                 : notificationObject.course) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) })) }))] }))) : ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
@@ -91,12 +91,12 @@ function CourseNotification(props) {
                                     ? notificationObject.comment.lesson_name
                                     : notificationObject.course.name,
                                 link: (...chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
-                                        ? react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME
+                                        ? react_core_1.SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME
                                         : react_core_1.SCRoutes.COURSE_ROUTE_NAME, notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
                                         ? formatLessonUrl(notificationObject)
                                         : notificationObject.course) }, { children: chunks })))
-                            } }), notificationObject.type !== types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON && ((0, jsx_runtime_1.jsx)(Course_1.default, { course: notificationObject.course, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), template: types_2.SCCourseTemplateType.SNIPPET, elevation: 0 }))] }), actions: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: react_core_1.Link, to: scRoutingContext.url(notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
-                                ? react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME
+                            } }), notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", dangerouslySetInnerHTML: { __html: notificationObject.comment.html } })) : ((0, jsx_runtime_1.jsx)(Course_1.default, { course: notificationObject.course, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), template: types_2.SCCourseTemplateType.SNIPPET, elevation: 0 }))] }), actions: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: react_core_1.Link, to: scRoutingContext.url(notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                                ? react_core_1.SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME
                                 : react_core_1.SCRoutes.COURSE_ROUTE_NAME, notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
                                 ? formatLessonUrl(notificationObject)
                                 : notificationObject.course) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) }))] })) }, rest)), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));

package/lib/cjs/shared/CourseUsersTable/CourseUsersTable.d.ts

@@ -1,5 +1,6 @@
 import { Dispatch } from 'react';
 import { SCCourseType } from '@selfcommunity/types';
+import { EndpointType } from '@selfcommunity/api-services';
 import { SCCourseUsersTableModeType } from '../../types/course';
 type HeaderCellsType = {
     id?: string;
@@ -8,6 +9,8 @@ export interface CourseUsersTableProps {
     state: any;
     dispatch: Dispatch<any>;
     course: SCCourseType;
+    endpointSearch: EndpointType;
+    endpointQueryParamsSearch?: Record<string, string | number>;
     headerCells: HeaderCellsType[];
     mode: SCCourseUsersTableModeType;
     emptyStatusTitle: string;

package/lib/cjs/shared/CourseUsersTable/CourseUsersTable.js

@@ -26,6 +26,8 @@ const course_2 = require("../../types/course");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     search: `${constants_1.PREFIX}-search`,
+    endAdornmentWrapper: `${constants_1.PREFIX}-end-adornment-wrapper`,
+    searchButton: `${constants_1.PREFIX}-search-button`,
     avatarWrapper: `${constants_1.PREFIX}-avatar-wrapper`,
     progressWrapper: `${constants_1.PREFIX}-progress-wrapper`,
     progress: `${constants_1.PREFIX}-progress`,
@@ -36,19 +38,16 @@ const Root = (0, material_1.styled)(material_1.Box, {
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
-function filteredUsers(users, value) {
-    return users.filter((user) => (user.username || user.real_name).toLowerCase().includes(value.toLowerCase()));
-}
 function CourseUsersTable(inProps) {
     // PROPS
     const props = (0, material_1.useThemeProps)({
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { course, state, dispatch, headerCells, mode, emptyStatusTitle, emptyStatusDescription } = props;
+    const { state, dispatch, course, endpointSearch, endpointQueryParamsSearch = { statuses: JSON.stringify([types_1.SCCourseJoinStatusType.JOINED, types_1.SCCourseJoinStatusType.MANAGER]) }, headerCells, mode, emptyStatusTitle, emptyStatusDescription } = props;
     // STATES
     const [users, setUsers] = (0, react_1.useState)(null);
-    const [tempUsers, setTempUsers] = (0, react_1.useState)(null);
+    const [loadingSearch, setLoadingSearch] = (0, react_1.useState)(false);
     const [value, setValue] = (0, react_1.useState)('');
     const [dialog, setDialog] = (0, react_1.useState)(null);
     // REFS
@@ -62,23 +61,6 @@ function CourseUsersTable(inProps) {
         setUsers(state.results);
     }, [state.results, setUsers]);
     // HANDLERS
-    const handleChange = (0, react_1.useCallback)((e) => {
-        const _value = e.target.value;
-        if (_value.length > 0) {
-            if (!tempUsers) {
-                setTempUsers(users);
-                setUsers((prevUsers) => filteredUsers(prevUsers, _value));
-            }
-            else {
-                setUsers(filteredUsers(tempUsers, _value));
-            }
-        }
-        else {
-            setUsers(tempUsers);
-            setTempUsers(null);
-        }
-        setValue(_value);
-    }, [users, tempUsers, setValue]);
     const handleNext = (0, react_1.useCallback)(() => {
         dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
         api_services_1.http
@@ -107,6 +89,36 @@ function CourseUsersTable(inProps) {
         }
         handleOpenDialog(null);
     }, [dialog, handleOpenDialog]);
+    const handleSearchClear = (0, react_1.useCallback)(() => {
+        setUsers(state.results);
+        setValue('');
+    }, [setValue, setUsers, state.results]);
+    const handleChange = (0, react_1.useCallback)((e) => {
+        const _value = e.target.value;
+        if (_value.length === 0) {
+            handleSearchClear();
+        }
+        else {
+            setValue(_value);
+        }
+    }, [setValue, handleSearchClear]);
+    const handleSearchStart = (0, react_1.useCallback)(() => {
+        setLoadingSearch(true);
+        api_services_1.http
+            .request({
+            url: endpointSearch.url(),
+            method: endpointSearch.method,
+            params: Object.assign(Object.assign({}, endpointQueryParamsSearch), { search: value })
+        })
+            .then((res) => {
+            setUsers(res.data.results);
+            setLoadingSearch(false);
+        })
+            .catch((error) => {
+            dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+        });
+    }, [value, endpointSearch, setUsers, setLoadingSearch, dispatch]);
     if (!users) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
@@ -114,7 +126,8 @@ function CourseUsersTable(inProps) {
                     id: 'ui.courseUsersTable.searchBar.placeholder',
                     defaultMessage: 'ui.courseUsersTable.searchBar.placeholder'
                 }), InputProps: {
-                    startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) })))
+                    startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))),
+                    endAdornment: value.length > 0 ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.endAdornmentWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ color: "inherit", onClick: handleSearchClear }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })) })), (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ color: "primary", variant: "contained", onClick: handleSearchStart, loading: loadingSearch, disabled: loadingSearch, className: classes.searchButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) })) }))] }))) : undefined
                 }, value: value, onChange: handleChange, disabled: users.length === 0 && value.length === 0, fullWidth: true, className: classes.search }), (0, jsx_runtime_1.jsx)(material_1.TableContainer, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: headerCells.map((cell, i, array) => {
                                     if (i === array.length - 1) {
                                         return (0, jsx_runtime_1.jsx)(material_1.TableCell, { width: "14%" }, i);
@@ -123,6 +136,6 @@ function CourseUsersTable(inProps) {
                                 }) }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [users.length > 0 &&
                                     users.map((user, i) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.avatarWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: user.username, src: user.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: user.username }))] })) }), mode === course_1.SCCourseUsersTableModeType.DASHBOARD && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.progressWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.LinearProgress, { className: classes.progress, variant: "determinate", value: user.user_completion_rate }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: `${Math.round(user.user_completion_rate)}%` }))] })) })), mode === course_1.SCCourseUsersTableModeType.EDIT && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: user.join_status !== types_1.SCCourseJoinStatusType.CREATOR && scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(ChangeUsersStatus_1.default, { course: course, user: user })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.editCourse.tab.users.table.select.${user.join_status}`, defaultMessage: `ui.editCourse.tab.users.table.select.${user.join_status}` }) }))) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedDate, { value: mode === course_1.SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.joined_at || new Date() }) })) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedDate, { value: mode === course_1.SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.last_active_at || new Date() }) })) }), mode === course_1.SCCourseUsersTableModeType.EDIT &&
                                                 user.join_status !== types_1.SCCourseJoinStatusType.CREATOR &&
-                                                scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RemoveButton_1.default, { ref: ref, course: course, user: user, handleOpenDialog: handleOpenDialog }) })) : (mode === course_1.SCCourseUsersTableModeType.EDIT && (0, jsx_runtime_1.jsx)(material_1.TableCell, {})), mode === course_1.SCCourseUsersTableModeType.DASHBOARD && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(SeeProgressButton_1.default, { course: course, user: user }) })), mode === course_1.SCCourseUsersTableModeType.REQUESTS && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RequestButton_1.default, { ref: ref, course: course, user: user, handleOpenDialog: handleOpenDialog }) }))] }, i))), state.isLoadingNext && (0, jsx_runtime_1.jsx)(RowSkeleton_1.default, { editMode: mode !== course_1.SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: !state.next, className: classes.loadingButton, onClick: handleNext }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && value.length === 0 && (0, jsx_runtime_1.jsx)(EmptyStatus_1.default, { icon: "face", title: emptyStatusTitle, description: emptyStatusDescription }), dialog && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleConfirm })] })));
+                                                scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RemoveButton_1.default, { ref: ref, course: course, user: user, handleOpenDialog: handleOpenDialog }) })) : (mode === course_1.SCCourseUsersTableModeType.EDIT && (0, jsx_runtime_1.jsx)(material_1.TableCell, {})), mode === course_1.SCCourseUsersTableModeType.DASHBOARD && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(SeeProgressButton_1.default, { course: course, user: user }) })), mode === course_1.SCCourseUsersTableModeType.REQUESTS && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RequestButton_1.default, { ref: ref, course: course, user: user, handleOpenDialog: handleOpenDialog }) }))] }, i))), state.isLoadingNext && (0, jsx_runtime_1.jsx)(RowSkeleton_1.default, { editMode: mode !== course_1.SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: value.length > 0 || !state.next, className: classes.loadingButton, onClick: handleNext }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && ((0, jsx_runtime_1.jsx)(EmptyStatus_1.default, { icon: "face", title: value.length > 0 ? 'ui.courseUsersTable.empty.search.title' : emptyStatusTitle, description: value.length > 0 ? 'ui.courseUsersTable.empty.search.description' : emptyStatusDescription })), dialog && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleConfirm })] })));
 }
 exports.default = (0, react_1.memo)(CourseUsersTable);

package/lib/esm/components/CourseDashboard/Teacher/Comments.js

@@ -96,7 +96,7 @@ function Comments(props) {
                 map.set(name, [...map.get(name), comment]);
             }
         });
-        return Array.from(map.entries()).map(([name, comments]) => (_jsxs(Box, Object.assign({ className: classes.outerWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: name })), _jsx(Divider, {}), _jsxs(Stack, Object.assign({ className: classes.innerWrapper }, { children: [comments.map((comment) => (_jsxs(Stack, Object.assign({ className: classes.userWrapper }, { children: [_jsx(Avatar, { src: comment.created_by.avatar, alt: comment.created_by.username, className: classes.avatar }), _jsxs(Box, { children: [_jsxs(Stack, Object.assign({ className: classes.userInfo }, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: comment.created_by.username })), _jsx(Box, { className: classes.circle }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedDate, { value: comment.created_at }) }))] })), _jsx(Typography, { variant: "body1", component: "div", dangerouslySetInnerHTML: { __html: comment.html } })] })] }), comment.id))), _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_PREVIEW_ROUTE_NAME, getUrlLesson(comments[0].extras.course, comments[0].extras.lesson, comments[0].extras.section)), size: "small", variant: "outlined", color: "inherit", className: classes.button }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label" }) })) }))] }))] }), name)));
+        return Array.from(map.entries()).map(([name, comments]) => (_jsxs(Box, Object.assign({ className: classes.outerWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: name })), _jsx(Divider, {}), _jsxs(Stack, Object.assign({ className: classes.innerWrapper }, { children: [comments.map((comment) => (_jsxs(Stack, Object.assign({ className: classes.userWrapper }, { children: [_jsx(Avatar, { src: comment.created_by.avatar, alt: comment.created_by.username, className: classes.avatar }), _jsxs(Box, { children: [_jsxs(Stack, Object.assign({ className: classes.userInfo }, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: comment.created_by.username })), _jsx(Box, { className: classes.circle }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedDate, { value: comment.created_at }) }))] })), _jsx(Typography, { variant: "body1", component: "div", dangerouslySetInnerHTML: { __html: comment.html } })] })] }), comment.id))), _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME, getUrlLesson(comments[0].extras.course, comments[0].extras.lesson, comments[0].extras.section)), size: "small", variant: "outlined", color: "inherit", className: classes.button }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label" }) })) }))] }))] }), name)));
     }, [state.results]);
     if (!state.initialized) {
         return _jsx(CommentsSkeleton, {});

package/lib/esm/components/CourseDashboard/Teacher/Students.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { SCCourseType } from '@selfcommunity/types';
+import { CourseDashboardUsersParams } from '@selfcommunity/api-services';
 interface StudentsProps {
     course: SCCourseType;
-    endpointQueryParams?: Record<string, string | number>;
+    endpointQueryParams?: CourseDashboardUsersParams;
 }
 declare function Students(props: StudentsProps): JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Students>;

package/lib/esm/components/CourseDashboard/Teacher/Students.js

@@ -3,7 +3,7 @@ import { memo, useCallback, useEffect, useReducer } from 'react';
 import { SCOPE_SC_UI } from '../../../constants/Errors';
 import { CacheStrategies, Logger } from '@selfcommunity/utils';
 import CourseUsersTable from '../../../shared/CourseUsersTable';
-import { CourseService } from '@selfcommunity/api-services';
+import { CourseService, Endpoints } from '@selfcommunity/api-services';
 import { SCCache, useSCUser } from '@selfcommunity/react-core';
 import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../../utils/widget';
 import { DEFAULT_PAGINATION_OFFSET } from '../../../constants/Pagination';
@@ -60,6 +60,9 @@ function Students(props) {
             };
         }
     }, [scUserContext.user, _init]);
-    return (_jsx(CourseUsersTable, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: SCCourseUsersTableModeType.DASHBOARD, emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" }));
+    return (_jsx(CourseUsersTable, { state: state, dispatch: dispatch, course: course, endpointSearch: {
+            url: () => Endpoints.GetCourseDashboardUsers.url({ id: course.id }),
+            method: Endpoints.GetCourseDashboardUsers.method
+        }, headerCells: headerCells, mode: SCCourseUsersTableModeType.DASHBOARD, emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" }));
 }
 export default memo(Students);

package/lib/esm/components/EditCourse/Requests.d.ts

@@ -1,9 +1,10 @@
 import { SyntheticEvent } from 'react';
 import { SCCourseType } from '@selfcommunity/types';
+import { BaseGetParams } from '@selfcommunity/api-services';
 import { SCCourseEditTabType } from '../../types/course';
 interface RequestsProps {
     course: SCCourseType;
-    endpointQueryParams?: Record<string, string | number>;
+    endpointQueryParams?: BaseGetParams;
     handleTabChange: (_e: SyntheticEvent, newTabValue: SCCourseEditTabType) => void;
 }
 declare function Requests(props: RequestsProps): JSX.Element;

package/lib/esm/components/EditCourse/Requests.js

@@ -9,7 +9,7 @@ import CourseUsersTable from '../../shared/CourseUsersTable';
 import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
 import { SCCache, useSCUser } from '@selfcommunity/react-core';
 import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
-import { CourseService } from '@selfcommunity/api-services';
+import { CourseService, Endpoints } from '@selfcommunity/api-services';
 import { PREFIX } from './constants';
 import PubSub from 'pubsub-js';
 import { SCCourseEventType, SCTopicType } from '../../constants/PubSub';
@@ -86,6 +86,9 @@ function Requests(props) {
             updatedUsers.current && PubSub.unsubscribe(updatedUsers.current);
         };
     }, [handleRejectUser]);
-    return (_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.requests.title", defaultMessage: "ui.editCourse.tab.requests.title", values: { requestsNumber: state.results.length } }) })), _jsx(Stack, Object.assign({ className: classes.usersStatusWrapper }, { children: _jsx(Status, { course: course, handleTabChange: handleTabChange }) })), _jsx(CourseUsersTable, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: SCCourseUsersTableModeType.REQUESTS, emptyStatusTitle: "ui.courseUsersTable.empty.requests.title" })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.requests.title", defaultMessage: "ui.editCourse.tab.requests.title", values: { requestsNumber: state.results.length } }) })), _jsx(Stack, Object.assign({ className: classes.usersStatusWrapper }, { children: _jsx(Status, { course: course, handleTabChange: handleTabChange }) })), _jsx(CourseUsersTable, { state: state, dispatch: dispatch, course: course, endpointSearch: {
+                    url: () => Endpoints.GetCourseWaitingApproval.url({ id: course.id }),
+                    method: Endpoints.GetCourseWaitingApproval.method
+                }, headerCells: headerCells, mode: SCCourseUsersTableModeType.REQUESTS, emptyStatusTitle: "ui.courseUsersTable.empty.requests.title" })] }));
 }
 export default memo(Requests);

package/lib/esm/components/EditCourse/Users.js

@@ -3,6 +3,7 @@ import { Box, Stack, Typography } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import AddUsersButton from '../../shared/AddUsersButton';
 import { memo, useCallback, useEffect, useReducer, useRef } from 'react';
+import { SCCourseJoinStatusType } from '@selfcommunity/types';
 import { CacheStrategies, Logger } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { useSnackbar } from 'notistack';
@@ -40,7 +41,7 @@ function Users(props) {
     const { course, endpointQueryParams = {
         limit: 6,
         offset: DEFAULT_PAGINATION_OFFSET,
-        statuses: JSON.stringify(['joined', 'manager', 'creator'])
+        statuses: JSON.stringify([SCCourseJoinStatusType.JOINED, SCCourseJoinStatusType.MANAGER, SCCourseJoinStatusType.CREATOR])
     }, handleTabChange } = props;
     // STATES
     const [state, dispatch] = useReducer(dataWidgetReducer, {
@@ -126,6 +127,11 @@ function Users(props) {
     return (_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.users.title", defaultMessage: "ui.editCourse.tab.users.title", values: { usersNumber: state.count } }) })), _jsxs(Stack, Object.assign({ className: classes.usersStatusWrapper }, { children: [_jsx(Status, { course: course, handleTabChange: handleTabChange }), _jsx(AddUsersButton, { label: "ui.editCourse.tab.users.addUsersButton.label", endpoint: {
                             url: () => Endpoints.GetCourseSuggestedUsers.url({ id: course.id }),
                             method: Endpoints.GetCourseSuggestedUsers.method
-                        }, onConfirm: handleConfirm })] })), _jsx(CourseUsersTable, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: SCCourseUsersTableModeType.EDIT, emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" })] }));
+                        }, onConfirm: handleConfirm })] })), _jsx(CourseUsersTable, { state: state, dispatch: dispatch, course: course, endpointSearch: {
+                    url: () => Endpoints.GetCourseDashboardUsers.url({ id: course.id }),
+                    method: Endpoints.GetCourseDashboardUsers.method
+                }, endpointQueryParamsSearch: {
+                    statuses: JSON.stringify([SCCourseJoinStatusType.JOINED, SCCourseJoinStatusType.MANAGER, SCCourseJoinStatusType.CREATOR])
+                }, headerCells: headerCells, mode: SCCourseUsersTableModeType.EDIT, emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" })] }));
 }
 export default memo(Users);

package/lib/esm/components/Notification/Course/Course.js

@@ -68,12 +68,12 @@ export default function CourseNotification(props) {
                                 ? notificationObject.comment.lesson_name
                                 : notificationObject.course.name,
                             link: (...chunks) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
-                                    ? SCRoutes.COURSE_LESSON_ROUTE_NAME
+                                    ? SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME
                                     : SCRoutes.COURSE_ROUTE_NAME, notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
                                     ? formatLessonUrl(notificationObject)
                                     : notificationObject.course) }, { children: chunks })))
                         } })] }), footer: isToastTemplate ? (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
-                                ? SCRoutes.COURSE_LESSON_ROUTE_NAME
+                                ? SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME
                                 : SCRoutes.COURSE_ROUTE_NAME, notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
                                 ? formatLessonUrl(notificationObject)
                                 : notificationObject.course) }, { children: _jsx(FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) })) }))] }))) : (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
@@ -89,12 +89,12 @@ export default function CourseNotification(props) {
                                     ? notificationObject.comment.lesson_name
                                     : notificationObject.course.name,
                                 link: (...chunks) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
-                                        ? SCRoutes.COURSE_LESSON_ROUTE_NAME
+                                        ? SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME
                                         : SCRoutes.COURSE_ROUTE_NAME, notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
                                         ? formatLessonUrl(notificationObject)
                                         : notificationObject.course) }, { children: chunks })))
-                            } }), notificationObject.type !== SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON && (_jsx(CourseItem, { course: notificationObject.course, actions: _jsx(_Fragment, {}), template: SCCourseTemplateType.SNIPPET, elevation: 0 }))] }), actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: Link, to: scRoutingContext.url(notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
-                                ? SCRoutes.COURSE_LESSON_ROUTE_NAME
+                            } }), notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ? (_jsx(Typography, { variant: "body2", dangerouslySetInnerHTML: { __html: notificationObject.comment.html } })) : (_jsx(CourseItem, { course: notificationObject.course, actions: _jsx(_Fragment, {}), template: SCCourseTemplateType.SNIPPET, elevation: 0 }))] }), actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: Link, to: scRoutingContext.url(notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                                ? SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME
                                 : SCRoutes.COURSE_ROUTE_NAME, notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
                                 ? formatLessonUrl(notificationObject)
                                 : notificationObject.course) }, { children: _jsx(FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) }))] })) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));

package/lib/esm/shared/CourseUsersTable/CourseUsersTable.d.ts

@@ -1,5 +1,6 @@
 import { Dispatch } from 'react';
 import { SCCourseType } from '@selfcommunity/types';
+import { EndpointType } from '@selfcommunity/api-services';
 import { SCCourseUsersTableModeType } from '../../types/course';
 type HeaderCellsType = {
     id?: string;
@@ -8,6 +9,8 @@ export interface CourseUsersTableProps {
     state: any;
     dispatch: Dispatch<any>;
     course: SCCourseType;
+    endpointSearch: EndpointType;
+    endpointQueryParamsSearch?: Record<string, string | number>;
     headerCells: HeaderCellsType[];
     mode: SCCourseUsersTableModeType;
     emptyStatusTitle: string;

package/lib/esm/shared/CourseUsersTable/CourseUsersTable.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, Box, Icon, InputAdornment, LinearProgress, Stack, styled, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, useThemeProps } from '@mui/material';
+import { Avatar, Box, Icon, IconButton, InputAdornment, LinearProgress, Stack, styled, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, useThemeProps } from '@mui/material';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedDate, FormattedMessage, useIntl } from 'react-intl';
 import RowSkeleton from './RowSkeleton';
@@ -23,6 +23,8 @@ import { SCCourseEditTabType } from '../../types/course';
 const classes = {
     root: `${PREFIX}-root`,
     search: `${PREFIX}-search`,
+    endAdornmentWrapper: `${PREFIX}-end-adornment-wrapper`,
+    searchButton: `${PREFIX}-search-button`,
     avatarWrapper: `${PREFIX}-avatar-wrapper`,
     progressWrapper: `${PREFIX}-progress-wrapper`,
     progress: `${PREFIX}-progress`,
@@ -33,19 +35,16 @@ const Root = styled(Box, {
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
-function filteredUsers(users, value) {
-    return users.filter((user) => (user.username || user.real_name).toLowerCase().includes(value.toLowerCase()));
-}
 function CourseUsersTable(inProps) {
     // PROPS
     const props = useThemeProps({
         props: inProps,
         name: PREFIX
     });
-    const { course, state, dispatch, headerCells, mode, emptyStatusTitle, emptyStatusDescription } = props;
+    const { state, dispatch, course, endpointSearch, endpointQueryParamsSearch = { statuses: JSON.stringify([SCCourseJoinStatusType.JOINED, SCCourseJoinStatusType.MANAGER]) }, headerCells, mode, emptyStatusTitle, emptyStatusDescription } = props;
     // STATES
     const [users, setUsers] = useState(null);
-    const [tempUsers, setTempUsers] = useState(null);
+    const [loadingSearch, setLoadingSearch] = useState(false);
     const [value, setValue] = useState('');
     const [dialog, setDialog] = useState(null);
     // REFS
@@ -59,23 +58,6 @@ function CourseUsersTable(inProps) {
         setUsers(state.results);
     }, [state.results, setUsers]);
     // HANDLERS
-    const handleChange = useCallback((e) => {
-        const _value = e.target.value;
-        if (_value.length > 0) {
-            if (!tempUsers) {
-                setTempUsers(users);
-                setUsers((prevUsers) => filteredUsers(prevUsers, _value));
-            }
-            else {
-                setUsers(filteredUsers(tempUsers, _value));
-            }
-        }
-        else {
-            setUsers(tempUsers);
-            setTempUsers(null);
-        }
-        setValue(_value);
-    }, [users, tempUsers, setValue]);
     const handleNext = useCallback(() => {
         dispatch({ type: actionWidgetTypes.LOADING_NEXT });
         http
@@ -104,6 +86,36 @@ function CourseUsersTable(inProps) {
         }
         handleOpenDialog(null);
     }, [dialog, handleOpenDialog]);
+    const handleSearchClear = useCallback(() => {
+        setUsers(state.results);
+        setValue('');
+    }, [setValue, setUsers, state.results]);
+    const handleChange = useCallback((e) => {
+        const _value = e.target.value;
+        if (_value.length === 0) {
+            handleSearchClear();
+        }
+        else {
+            setValue(_value);
+        }
+    }, [setValue, handleSearchClear]);
+    const handleSearchStart = useCallback(() => {
+        setLoadingSearch(true);
+        http
+            .request({
+            url: endpointSearch.url(),
+            method: endpointSearch.method,
+            params: Object.assign(Object.assign({}, endpointQueryParamsSearch), { search: value })
+        })
+            .then((res) => {
+            setUsers(res.data.results);
+            setLoadingSearch(false);
+        })
+            .catch((error) => {
+            dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
+            Logger.error(SCOPE_SC_UI, error);
+        });
+    }, [value, endpointSearch, setUsers, setLoadingSearch, dispatch]);
     if (!users) {
         return _jsx(CourseUsersTableSkeleton, {});
     }
@@ -111,7 +123,8 @@ function CourseUsersTable(inProps) {
                     id: 'ui.courseUsersTable.searchBar.placeholder',
                     defaultMessage: 'ui.courseUsersTable.searchBar.placeholder'
                 }), InputProps: {
-                    startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "search" }) })))
+                    startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "search" }) }))),
+                    endAdornment: value.length > 0 ? (_jsxs(Stack, Object.assign({ className: classes.endAdornmentWrapper }, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, Object.assign({ color: "inherit", onClick: handleSearchClear }, { children: _jsx(Icon, { children: "close" }) })) })), _jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(LoadingButton, Object.assign({ color: "primary", variant: "contained", onClick: handleSearchStart, loading: loadingSearch, disabled: loadingSearch, className: classes.searchButton }, { children: _jsx(Icon, { children: "search" }) })) }))] }))) : undefined
                 }, value: value, onChange: handleChange, disabled: users.length === 0 && value.length === 0, fullWidth: true, className: classes.search }), _jsx(TableContainer, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsx(TableRow, { children: headerCells.map((cell, i, array) => {
                                     if (i === array.length - 1) {
                                         return _jsx(TableCell, { width: "14%" }, i);
@@ -120,6 +133,6 @@ function CourseUsersTable(inProps) {
                                 }) }) }), _jsxs(TableBody, { children: [users.length > 0 &&
                                     users.map((user, i) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.avatarWrapper }, { children: [_jsx(Avatar, { alt: user.username, src: user.avatar }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: user.username }))] })) }), mode === SCCourseUsersTableModeType.DASHBOARD && (_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.progressWrapper }, { children: [_jsx(LinearProgress, { className: classes.progress, variant: "determinate", value: user.user_completion_rate }), _jsx(Typography, Object.assign({ variant: "body1" }, { children: `${Math.round(user.user_completion_rate)}%` }))] })) })), mode === SCCourseUsersTableModeType.EDIT && (_jsx(TableCell, { children: user.join_status !== SCCourseJoinStatusType.CREATOR && scUserContext.user.id !== user.id ? (_jsx(ChangeUserStatus, { course: course, user: user })) : (_jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: `ui.editCourse.tab.users.table.select.${user.join_status}`, defaultMessage: `ui.editCourse.tab.users.table.select.${user.join_status}` }) }))) })), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedDate, { value: mode === SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.joined_at || new Date() }) })) }), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedDate, { value: mode === SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.last_active_at || new Date() }) })) }), mode === SCCourseUsersTableModeType.EDIT &&
                                                 user.join_status !== SCCourseJoinStatusType.CREATOR &&
-                                                scUserContext.user.id !== user.id ? (_jsx(TableCell, { children: _jsx(RemoveButton, { ref: ref, course: course, user: user, handleOpenDialog: handleOpenDialog }) })) : (mode === SCCourseUsersTableModeType.EDIT && _jsx(TableCell, {})), mode === SCCourseUsersTableModeType.DASHBOARD && (_jsx(TableCell, { children: _jsx(SeeProgressButton, { course: course, user: user }) })), mode === SCCourseUsersTableModeType.REQUESTS && (_jsx(TableCell, { children: _jsx(RequestButton, { ref: ref, course: course, user: user, handleOpenDialog: handleOpenDialog }) }))] }, i))), state.isLoadingNext && _jsx(RowSkeleton, { editMode: mode !== SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && (_jsx(LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: !state.next, className: classes.loadingButton, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && value.length === 0 && _jsx(EmptyStatus, { icon: "face", title: emptyStatusTitle, description: emptyStatusDescription }), dialog && _jsx(ConfirmDialog, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleConfirm })] })));
+                                                scUserContext.user.id !== user.id ? (_jsx(TableCell, { children: _jsx(RemoveButton, { ref: ref, course: course, user: user, handleOpenDialog: handleOpenDialog }) })) : (mode === SCCourseUsersTableModeType.EDIT && _jsx(TableCell, {})), mode === SCCourseUsersTableModeType.DASHBOARD && (_jsx(TableCell, { children: _jsx(SeeProgressButton, { course: course, user: user }) })), mode === SCCourseUsersTableModeType.REQUESTS && (_jsx(TableCell, { children: _jsx(RequestButton, { ref: ref, course: course, user: user, handleOpenDialog: handleOpenDialog }) }))] }, i))), state.isLoadingNext && _jsx(RowSkeleton, { editMode: mode !== SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && (_jsx(LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: value.length > 0 || !state.next, className: classes.loadingButton, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && (_jsx(EmptyStatus, { icon: "face", title: value.length > 0 ? 'ui.courseUsersTable.empty.search.title' : emptyStatusTitle, description: value.length > 0 ? 'ui.courseUsersTable.empty.search.description' : emptyStatusDescription })), dialog && _jsx(ConfirmDialog, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleConfirm })] })));
 }
 export default memo(CourseUsersTable);