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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/lib/cjs/components/CourseDashboard/Teacher/Students.d.ts +2 -1
  2. package/lib/cjs/components/CourseDashboard/Teacher/Students.js +4 -1
  3. package/lib/cjs/components/EditCourse/Requests.d.ts +2 -1
  4. package/lib/cjs/components/EditCourse/Requests.js +4 -1
  5. package/lib/cjs/components/EditCourse/Users.js +8 -2
  6. package/lib/cjs/shared/CourseUsersTable/CourseUsersTable.d.ts +3 -0
  7. package/lib/cjs/shared/CourseUsersTable/CourseUsersTable.js +37 -24
  8. package/lib/esm/components/CourseDashboard/Teacher/Students.d.ts +2 -1
  9. package/lib/esm/components/CourseDashboard/Teacher/Students.js +5 -2
  10. package/lib/esm/components/EditCourse/Requests.d.ts +2 -1
  11. package/lib/esm/components/EditCourse/Requests.js +5 -2
  12. package/lib/esm/components/EditCourse/Users.js +8 -2
  13. package/lib/esm/shared/CourseUsersTable/CourseUsersTable.d.ts +3 -0
  14. package/lib/esm/shared/CourseUsersTable/CourseUsersTable.js +38 -25
  15. package/lib/umd/react-ui.js +1 -1
  16. package/package.json +8 -8
package/lib/cjs/components/CourseDashboard/Teacher/Students.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  /// <reference types="react" />
2
2
  import { SCCourseType } from '@selfcommunity/types';
3
+ import { CourseDashboardUsersParams } from '@selfcommunity/api-services';
3
4
  interface StudentsProps {
4
5
  course: SCCourseType;
5
- endpointQueryParams?: Record<string, string | number>;
6
+ endpointQueryParams?: CourseDashboardUsersParams;
6
7
  }
7
8
  declare function Students(props: StudentsProps): JSX.Element;
8
9
  declare const _default: import("react").MemoExoticComponent<typeof Students>;
package/lib/cjs/components/CourseDashboard/Teacher/Students.js CHANGED
@@ -63,6 +63,9 @@ function Students(props) {
63
63
  };
64
64
  }
65
65
  }, [scUserContext.user, _init]);
66
- 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" }));
66
+ return ((0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { state: state, dispatch: dispatch, course: course, endpointSearch: {
67
+ url: () => api_services_1.Endpoints.GetCourseDashboardUsers.url({ id: course.id }),
68
+ method: api_services_1.Endpoints.GetCourseDashboardUsers.method
69
+ }, headerCells: headerCells, mode: course_1.SCCourseUsersTableModeType.DASHBOARD, emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" }));
67
70
  }
68
71
  exports.default = (0, react_1.memo)(Students);
package/lib/cjs/components/EditCourse/Requests.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import { SyntheticEvent } from 'react';
2
2
  import { SCCourseType } from '@selfcommunity/types';
3
+ import { BaseGetParams } from '@selfcommunity/api-services';
3
4
  import { SCCourseEditTabType } from '../../types/course';
4
5
  interface RequestsProps {
5
6
  course: SCCourseType;
6
- endpointQueryParams?: Record<string, string | number>;
7
+ endpointQueryParams?: BaseGetParams;
7
8
  handleTabChange: (_e: SyntheticEvent, newTabValue: SCCourseEditTabType) => void;
8
9
  }
9
10
  declare function Requests(props: RequestsProps): JSX.Element;
package/lib/cjs/components/EditCourse/Requests.js CHANGED
@@ -89,6 +89,9 @@ function Requests(props) {
89
89
  updatedUsers.current && pubsub_js_1.default.unsubscribe(updatedUsers.current);
90
90
  };
91
91
  }, [handleRejectUser]);
92
- 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" })] }));
92
+ 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: {
93
+ url: () => api_services_1.Endpoints.GetCourseWaitingApproval.url({ id: course.id }),
94
+ method: api_services_1.Endpoints.GetCourseWaitingApproval.method
95
+ }, headerCells: headerCells, mode: course_1.SCCourseUsersTableModeType.REQUESTS, emptyStatusTitle: "ui.courseUsersTable.empty.requests.title" })] }));
93
96
  }
94
97
  exports.default = (0, react_1.memo)(Requests);
package/lib/cjs/components/EditCourse/Users.js CHANGED
@@ -6,6 +6,7 @@ const material_1 = require("@mui/material");
6
6
  const react_intl_1 = require("react-intl");
7
7
  const AddUsersButton_1 = tslib_1.__importDefault(require("../../shared/AddUsersButton"));
8
8
  const react_1 = require("react");
9
+ const types_1 = require("@selfcommunity/types");
9
10
  const utils_1 = require("@selfcommunity/utils");
10
11
  const Errors_1 = require("../../constants/Errors");
11
12
  const notistack_1 = require("notistack");
@@ -43,7 +44,7 @@ function Users(props) {
43
44
  const { course, endpointQueryParams = {
44
45
  limit: 6,
45
46
  offset: Pagination_1.DEFAULT_PAGINATION_OFFSET,
46
- statuses: JSON.stringify(['joined', 'manager', 'creator'])
47
+ statuses: JSON.stringify([types_1.SCCourseJoinStatusType.JOINED, types_1.SCCourseJoinStatusType.MANAGER, types_1.SCCourseJoinStatusType.CREATOR])
47
48
  }, handleTabChange } = props;
48
49
  // STATES
49
50
  const [state, dispatch] = (0, react_1.useReducer)(widget_1.dataWidgetReducer, {
@@ -129,6 +130,11 @@ function Users(props) {
129
130
  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: {
130
131
  url: () => api_services_1.Endpoints.GetCourseSuggestedUsers.url({ id: course.id }),
131
132
  method: api_services_1.Endpoints.GetCourseSuggestedUsers.method
132
- }, 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" })] }));
133
+ }, onConfirm: handleConfirm })] })), (0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { state: state, dispatch: dispatch, course: course, endpointSearch: {
134
+ url: () => api_services_1.Endpoints.GetCourseDashboardUsers.url({ id: course.id }),
135
+ method: api_services_1.Endpoints.GetCourseDashboardUsers.method
136
+ }, endpointQueryParamsSearch: {
137
+ statuses: JSON.stringify([types_1.SCCourseJoinStatusType.JOINED, types_1.SCCourseJoinStatusType.MANAGER, types_1.SCCourseJoinStatusType.CREATOR])
138
+ }, headerCells: headerCells, mode: course_1.SCCourseUsersTableModeType.EDIT, emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" })] }));
133
139
  }
134
140
  exports.default = (0, react_1.memo)(Users);
package/lib/cjs/shared/CourseUsersTable/CourseUsersTable.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Dispatch } from 'react';
2
2
  import { SCCourseType } from '@selfcommunity/types';
3
+ import { EndpointType } from '@selfcommunity/api-services';
3
4
  import { SCCourseUsersTableModeType } from '../../types/course';
4
5
  type HeaderCellsType = {
5
6
  id?: string;
@@ -8,6 +9,8 @@ export interface CourseUsersTableProps {
8
9
  state: any;
9
10
  dispatch: Dispatch<any>;
10
11
  course: SCCourseType;
12
+ endpointSearch: EndpointType;
13
+ endpointQueryParamsSearch?: Record<string, string | number>;
11
14
  headerCells: HeaderCellsType[];
12
15
  mode: SCCourseUsersTableModeType;
13
16
  emptyStatusTitle: string;
package/lib/cjs/shared/CourseUsersTable/CourseUsersTable.js CHANGED
@@ -26,6 +26,8 @@ const course_2 = require("../../types/course");
26
26
  const classes = {
27
27
  root: `${constants_1.PREFIX}-root`,
28
28
  search: `${constants_1.PREFIX}-search`,
29
+ endAdornmentWrapper: `${constants_1.PREFIX}-end-adornment-wrapper`,
30
+ searchButton: `${constants_1.PREFIX}-search-button`,
29
31
  avatarWrapper: `${constants_1.PREFIX}-avatar-wrapper`,
30
32
  progressWrapper: `${constants_1.PREFIX}-progress-wrapper`,
31
33
  progress: `${constants_1.PREFIX}-progress`,
@@ -36,19 +38,16 @@ const Root = (0, material_1.styled)(material_1.Box, {
36
38
  slot: 'Root',
37
39
  overridesResolver: (_props, styles) => styles.root
38
40
  })(() => ({}));
39
- function filteredUsers(users, value) {
40
- return users.filter((user) => (user.username || user.real_name).toLowerCase().includes(value.toLowerCase()));
41
- }
42
41
  function CourseUsersTable(inProps) {
43
42
  // PROPS
44
43
  const props = (0, material_1.useThemeProps)({
45
44
  props: inProps,
46
45
  name: constants_1.PREFIX
47
46
  });
48
- const { course, state, dispatch, headerCells, mode, emptyStatusTitle, emptyStatusDescription } = props;
47
+ const { state, dispatch, course, endpointSearch, endpointQueryParamsSearch = { statuses: JSON.stringify([types_1.SCCourseJoinStatusType.JOINED, types_1.SCCourseJoinStatusType.MANAGER]) }, headerCells, mode, emptyStatusTitle, emptyStatusDescription } = props;
49
48
  // STATES
50
49
  const [users, setUsers] = (0, react_1.useState)(null);
51
- const [tempUsers, setTempUsers] = (0, react_1.useState)(null);
50
+ const [loadingSearch, setLoadingSearch] = (0, react_1.useState)(false);
52
51
  const [value, setValue] = (0, react_1.useState)('');
53
52
  const [dialog, setDialog] = (0, react_1.useState)(null);
54
53
  // REFS
@@ -62,23 +61,6 @@ function CourseUsersTable(inProps) {
62
61
  setUsers(state.results);
63
62
  }, [state.results, setUsers]);
64
63
  // HANDLERS
65
- const handleChange = (0, react_1.useCallback)((e) => {
66
- const _value = e.target.value;
67
- if (_value.length > 0) {
68
- if (!tempUsers) {
69
- setTempUsers(users);
70
- setUsers((prevUsers) => filteredUsers(prevUsers, _value));
71
- }
72
- else {
73
- setUsers(filteredUsers(tempUsers, _value));
74
- }
75
- }
76
- else {
77
- setUsers(tempUsers);
78
- setTempUsers(null);
79
- }
80
- setValue(_value);
81
- }, [users, tempUsers, setValue]);
82
64
  const handleNext = (0, react_1.useCallback)(() => {
83
65
  dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
84
66
  api_services_1.http
@@ -107,6 +89,36 @@ function CourseUsersTable(inProps) {
107
89
  }
108
90
  handleOpenDialog(null);
109
91
  }, [dialog, handleOpenDialog]);
92
+ const handleSearchClear = (0, react_1.useCallback)(() => {
93
+ setUsers(state.results);
94
+ setValue('');
95
+ }, [setValue, setUsers, state.results]);
96
+ const handleChange = (0, react_1.useCallback)((e) => {
97
+ const _value = e.target.value;
98
+ if (_value.length === 0) {
99
+ handleSearchClear();
100
+ }
101
+ else {
102
+ setValue(_value);
103
+ }
104
+ }, [setValue, handleSearchClear]);
105
+ const handleSearchStart = (0, react_1.useCallback)(() => {
106
+ setLoadingSearch(true);
107
+ api_services_1.http
108
+ .request({
109
+ url: endpointSearch.url(),
110
+ method: endpointSearch.method,
111
+ params: Object.assign(Object.assign({}, endpointQueryParamsSearch), { search: value })
112
+ })
113
+ .then((res) => {
114
+ setUsers(res.data.results);
115
+ setLoadingSearch(false);
116
+ })
117
+ .catch((error) => {
118
+ dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
119
+ utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
120
+ });
121
+ }, [value, endpointSearch, setUsers, setLoadingSearch, dispatch]);
110
122
  if (!users) {
111
123
  return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
112
124
  }
@@ -114,7 +126,8 @@ function CourseUsersTable(inProps) {
114
126
  id: 'ui.courseUsersTable.searchBar.placeholder',
115
127
  defaultMessage: 'ui.courseUsersTable.searchBar.placeholder'
116
128
  }), InputProps: {
117
- startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) })))
129
+ startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))),
130
+ 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
118
131
  }, 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) => {
119
132
  if (i === array.length - 1) {
120
133
  return (0, jsx_runtime_1.jsx)(material_1.TableCell, { width: "14%" }, i);
@@ -123,6 +136,6 @@ function CourseUsersTable(inProps) {
123
136
  }) }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [users.length > 0 &&
124
137
  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 &&
125
138
  user.join_status !== types_1.SCCourseJoinStatusType.CREATOR &&
126
- 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 })] })));
139
+ 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 })] })));
127
140
  }
128
141
  exports.default = (0, react_1.memo)(CourseUsersTable);
package/lib/esm/components/CourseDashboard/Teacher/Students.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  /// <reference types="react" />
2
2
  import { SCCourseType } from '@selfcommunity/types';
3
+ import { CourseDashboardUsersParams } from '@selfcommunity/api-services';
3
4
  interface StudentsProps {
4
5
  course: SCCourseType;
5
- endpointQueryParams?: Record<string, string | number>;
6
+ endpointQueryParams?: CourseDashboardUsersParams;
6
7
  }
7
8
  declare function Students(props: StudentsProps): JSX.Element;
8
9
  declare const _default: import("react").MemoExoticComponent<typeof Students>;
package/lib/esm/components/CourseDashboard/Teacher/Students.js CHANGED
@@ -3,7 +3,7 @@ import { memo, useCallback, useEffect, useReducer } from 'react';
3
3
  import { SCOPE_SC_UI } from '../../../constants/Errors';
4
4
  import { CacheStrategies, Logger } from '@selfcommunity/utils';
5
5
  import CourseUsersTable from '../../../shared/CourseUsersTable';
6
- import { CourseService } from '@selfcommunity/api-services';
6
+ import { CourseService, Endpoints } from '@selfcommunity/api-services';
7
7
  import { SCCache, useSCUser } from '@selfcommunity/react-core';
8
8
  import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../../utils/widget';
9
9
  import { DEFAULT_PAGINATION_OFFSET } from '../../../constants/Pagination';
@@ -60,6 +60,9 @@ function Students(props) {
60
60
  };
61
61
  }
62
62
  }, [scUserContext.user, _init]);
63
- 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" }));
63
+ return (_jsx(CourseUsersTable, { state: state, dispatch: dispatch, course: course, endpointSearch: {
64
+ url: () => Endpoints.GetCourseDashboardUsers.url({ id: course.id }),
65
+ method: Endpoints.GetCourseDashboardUsers.method
66
+ }, headerCells: headerCells, mode: SCCourseUsersTableModeType.DASHBOARD, emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" }));
64
67
  }
65
68
  export default memo(Students);
package/lib/esm/components/EditCourse/Requests.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import { SyntheticEvent } from 'react';
2
2
  import { SCCourseType } from '@selfcommunity/types';
3
+ import { BaseGetParams } from '@selfcommunity/api-services';
3
4
  import { SCCourseEditTabType } from '../../types/course';
4
5
  interface RequestsProps {
5
6
  course: SCCourseType;
6
- endpointQueryParams?: Record<string, string | number>;
7
+ endpointQueryParams?: BaseGetParams;
7
8
  handleTabChange: (_e: SyntheticEvent, newTabValue: SCCourseEditTabType) => void;
8
9
  }
9
10
  declare function Requests(props: RequestsProps): JSX.Element;
package/lib/esm/components/EditCourse/Requests.js CHANGED
@@ -9,7 +9,7 @@ import CourseUsersTable from '../../shared/CourseUsersTable';
9
9
  import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
10
10
  import { SCCache, useSCUser } from '@selfcommunity/react-core';
11
11
  import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
12
- import { CourseService } from '@selfcommunity/api-services';
12
+ import { CourseService, Endpoints } from '@selfcommunity/api-services';
13
13
  import { PREFIX } from './constants';
14
14
  import PubSub from 'pubsub-js';
15
15
  import { SCCourseEventType, SCTopicType } from '../../constants/PubSub';
@@ -86,6 +86,9 @@ function Requests(props) {
86
86
  updatedUsers.current && PubSub.unsubscribe(updatedUsers.current);
87
87
  };
88
88
  }, [handleRejectUser]);
89
- 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" })] }));
89
+ 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: {
90
+ url: () => Endpoints.GetCourseWaitingApproval.url({ id: course.id }),
91
+ method: Endpoints.GetCourseWaitingApproval.method
92
+ }, headerCells: headerCells, mode: SCCourseUsersTableModeType.REQUESTS, emptyStatusTitle: "ui.courseUsersTable.empty.requests.title" })] }));
90
93
  }
91
94
  export default memo(Requests);
package/lib/esm/components/EditCourse/Users.js CHANGED
@@ -3,6 +3,7 @@ import { Box, Stack, Typography } from '@mui/material';
3
3
  import { FormattedMessage } from 'react-intl';
4
4
  import AddUsersButton from '../../shared/AddUsersButton';
5
5
  import { memo, useCallback, useEffect, useReducer, useRef } from 'react';
6
+ import { SCCourseJoinStatusType } from '@selfcommunity/types';
6
7
  import { CacheStrategies, Logger } from '@selfcommunity/utils';
7
8
  import { SCOPE_SC_UI } from '../../constants/Errors';
8
9
  import { useSnackbar } from 'notistack';
@@ -40,7 +41,7 @@ function Users(props) {
40
41
  const { course, endpointQueryParams = {
41
42
  limit: 6,
42
43
  offset: DEFAULT_PAGINATION_OFFSET,
43
- statuses: JSON.stringify(['joined', 'manager', 'creator'])
44
+ statuses: JSON.stringify([SCCourseJoinStatusType.JOINED, SCCourseJoinStatusType.MANAGER, SCCourseJoinStatusType.CREATOR])
44
45
  }, handleTabChange } = props;
45
46
  // STATES
46
47
  const [state, dispatch] = useReducer(dataWidgetReducer, {
@@ -126,6 +127,11 @@ function Users(props) {
126
127
  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: {
127
128
  url: () => Endpoints.GetCourseSuggestedUsers.url({ id: course.id }),
128
129
  method: Endpoints.GetCourseSuggestedUsers.method
129
- }, 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" })] }));
130
+ }, onConfirm: handleConfirm })] })), _jsx(CourseUsersTable, { state: state, dispatch: dispatch, course: course, endpointSearch: {
131
+ url: () => Endpoints.GetCourseDashboardUsers.url({ id: course.id }),
132
+ method: Endpoints.GetCourseDashboardUsers.method
133
+ }, endpointQueryParamsSearch: {
134
+ statuses: JSON.stringify([SCCourseJoinStatusType.JOINED, SCCourseJoinStatusType.MANAGER, SCCourseJoinStatusType.CREATOR])
135
+ }, headerCells: headerCells, mode: SCCourseUsersTableModeType.EDIT, emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" })] }));
130
136
  }
131
137
  export default memo(Users);
package/lib/esm/shared/CourseUsersTable/CourseUsersTable.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Dispatch } from 'react';
2
2
  import { SCCourseType } from '@selfcommunity/types';
3
+ import { EndpointType } from '@selfcommunity/api-services';
3
4
  import { SCCourseUsersTableModeType } from '../../types/course';
4
5
  type HeaderCellsType = {
5
6
  id?: string;
@@ -8,6 +9,8 @@ export interface CourseUsersTableProps {
8
9
  state: any;
9
10
  dispatch: Dispatch<any>;
10
11
  course: SCCourseType;
12
+ endpointSearch: EndpointType;
13
+ endpointQueryParamsSearch?: Record<string, string | number>;
11
14
  headerCells: HeaderCellsType[];
12
15
  mode: SCCourseUsersTableModeType;
13
16
  emptyStatusTitle: string;
package/lib/esm/shared/CourseUsersTable/CourseUsersTable.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Avatar, Box, Icon, InputAdornment, LinearProgress, Stack, styled, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, useThemeProps } from '@mui/material';
2
+ import { Avatar, Box, Icon, IconButton, InputAdornment, LinearProgress, Stack, styled, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, useThemeProps } from '@mui/material';
3
3
  import { memo, useCallback, useEffect, useRef, useState } from 'react';
4
4
  import { FormattedDate, FormattedMessage, useIntl } from 'react-intl';
5
5
  import RowSkeleton from './RowSkeleton';
@@ -23,6 +23,8 @@ import { SCCourseEditTabType } from '../../types/course';
23
23
  const classes = {
24
24
  root: `${PREFIX}-root`,
25
25
  search: `${PREFIX}-search`,
26
+ endAdornmentWrapper: `${PREFIX}-end-adornment-wrapper`,
27
+ searchButton: `${PREFIX}-search-button`,
26
28
  avatarWrapper: `${PREFIX}-avatar-wrapper`,
27
29
  progressWrapper: `${PREFIX}-progress-wrapper`,
28
30
  progress: `${PREFIX}-progress`,
@@ -33,19 +35,16 @@ const Root = styled(Box, {
33
35
  slot: 'Root',
34
36
  overridesResolver: (_props, styles) => styles.root
35
37
  })(() => ({}));
36
- function filteredUsers(users, value) {
37
- return users.filter((user) => (user.username || user.real_name).toLowerCase().includes(value.toLowerCase()));
38
- }
39
38
  function CourseUsersTable(inProps) {
40
39
  // PROPS
41
40
  const props = useThemeProps({
42
41
  props: inProps,
43
42
  name: PREFIX
44
43
  });
45
- const { course, state, dispatch, headerCells, mode, emptyStatusTitle, emptyStatusDescription } = props;
44
+ const { state, dispatch, course, endpointSearch, endpointQueryParamsSearch = { statuses: JSON.stringify([SCCourseJoinStatusType.JOINED, SCCourseJoinStatusType.MANAGER]) }, headerCells, mode, emptyStatusTitle, emptyStatusDescription } = props;
46
45
  // STATES
47
46
  const [users, setUsers] = useState(null);
48
- const [tempUsers, setTempUsers] = useState(null);
47
+ const [loadingSearch, setLoadingSearch] = useState(false);
49
48
  const [value, setValue] = useState('');
50
49
  const [dialog, setDialog] = useState(null);
51
50
  // REFS
@@ -59,23 +58,6 @@ function CourseUsersTable(inProps) {
59
58
  setUsers(state.results);
60
59
  }, [state.results, setUsers]);
61
60
  // HANDLERS
62
- const handleChange = useCallback((e) => {
63
- const _value = e.target.value;
64
- if (_value.length > 0) {
65
- if (!tempUsers) {
66
- setTempUsers(users);
67
- setUsers((prevUsers) => filteredUsers(prevUsers, _value));
68
- }
69
- else {
70
- setUsers(filteredUsers(tempUsers, _value));
71
- }
72
- }
73
- else {
74
- setUsers(tempUsers);
75
- setTempUsers(null);
76
- }
77
- setValue(_value);
78
- }, [users, tempUsers, setValue]);
79
61
  const handleNext = useCallback(() => {
80
62
  dispatch({ type: actionWidgetTypes.LOADING_NEXT });
81
63
  http
@@ -104,6 +86,36 @@ function CourseUsersTable(inProps) {
104
86
  }
105
87
  handleOpenDialog(null);
106
88
  }, [dialog, handleOpenDialog]);
89
+ const handleSearchClear = useCallback(() => {
90
+ setUsers(state.results);
91
+ setValue('');
92
+ }, [setValue, setUsers, state.results]);
93
+ const handleChange = useCallback((e) => {
94
+ const _value = e.target.value;
95
+ if (_value.length === 0) {
96
+ handleSearchClear();
97
+ }
98
+ else {
99
+ setValue(_value);
100
+ }
101
+ }, [setValue, handleSearchClear]);
102
+ const handleSearchStart = useCallback(() => {
103
+ setLoadingSearch(true);
104
+ http
105
+ .request({
106
+ url: endpointSearch.url(),
107
+ method: endpointSearch.method,
108
+ params: Object.assign(Object.assign({}, endpointQueryParamsSearch), { search: value })
109
+ })
110
+ .then((res) => {
111
+ setUsers(res.data.results);
112
+ setLoadingSearch(false);
113
+ })
114
+ .catch((error) => {
115
+ dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
116
+ Logger.error(SCOPE_SC_UI, error);
117
+ });
118
+ }, [value, endpointSearch, setUsers, setLoadingSearch, dispatch]);
107
119
  if (!users) {
108
120
  return _jsx(CourseUsersTableSkeleton, {});
109
121
  }
@@ -111,7 +123,8 @@ function CourseUsersTable(inProps) {
111
123
  id: 'ui.courseUsersTable.searchBar.placeholder',
112
124
  defaultMessage: 'ui.courseUsersTable.searchBar.placeholder'
113
125
  }), InputProps: {
114
- startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "search" }) })))
126
+ startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "search" }) }))),
127
+ 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
115
128
  }, 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) => {
116
129
  if (i === array.length - 1) {
117
130
  return _jsx(TableCell, { width: "14%" }, i);
@@ -120,6 +133,6 @@ function CourseUsersTable(inProps) {
120
133
  }) }) }), _jsxs(TableBody, { children: [users.length > 0 &&
121
134
  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 &&
122
135
  user.join_status !== SCCourseJoinStatusType.CREATOR &&
123
- 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 })] })));
136
+ 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 })] })));
124
137
  }
125
138
  export default memo(CourseUsersTable);