@selfcommunity/react-ui 0.10.2-courses.200 → 0.10.2-courses.201
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.
|
@@ -51,15 +51,12 @@ function CourseUsersTable(inProps) {
|
|
|
51
51
|
const [value, setValue] = (0, react_1.useState)('');
|
|
52
52
|
const [dialog, setDialog] = (0, react_1.useState)(null);
|
|
53
53
|
// REFS
|
|
54
|
-
const
|
|
54
|
+
const buttonRef = (0, react_1.useRef)(null);
|
|
55
|
+
const inputRef = (0, react_1.useRef)(null);
|
|
55
56
|
// CONTEXTS
|
|
56
57
|
const scUserContext = (0, react_core_1.useSCUser)();
|
|
57
58
|
// INTL
|
|
58
59
|
const intl = (0, react_intl_1.useIntl)();
|
|
59
|
-
// EFFECTS
|
|
60
|
-
(0, react_1.useEffect)(() => {
|
|
61
|
-
setUsers(state.results);
|
|
62
|
-
}, [state.results, setUsers]);
|
|
63
60
|
// HANDLERS
|
|
64
61
|
const handleNext = (0, react_1.useCallback)(() => {
|
|
65
62
|
dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
|
|
@@ -82,10 +79,10 @@ function CourseUsersTable(inProps) {
|
|
|
82
79
|
const handleConfirm = (0, react_1.useCallback)(() => {
|
|
83
80
|
switch (dialog.tab) {
|
|
84
81
|
case course_2.SCCourseEditTabType.USERS:
|
|
85
|
-
|
|
82
|
+
buttonRef.current.handleManageUser(dialog.user);
|
|
86
83
|
break;
|
|
87
84
|
case course_2.SCCourseEditTabType.REQUESTS:
|
|
88
|
-
|
|
85
|
+
buttonRef.current.handleManageUser(dialog.request);
|
|
89
86
|
}
|
|
90
87
|
handleOpenDialog(null);
|
|
91
88
|
}, [dialog, handleOpenDialog]);
|
|
@@ -119,10 +116,27 @@ function CourseUsersTable(inProps) {
|
|
|
119
116
|
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
|
|
120
117
|
});
|
|
121
118
|
}, [value, endpointSearch, setUsers, setLoadingSearch, dispatch]);
|
|
119
|
+
const handleKeyUp = (0, react_1.useCallback)((e) => {
|
|
120
|
+
if (value.length > 0 && e.key === 'Enter') {
|
|
121
|
+
handleSearchStart();
|
|
122
|
+
}
|
|
123
|
+
}, [value, handleSearchStart]);
|
|
124
|
+
// EFFECTS
|
|
125
|
+
(0, react_1.useEffect)(() => {
|
|
126
|
+
setUsers(state.results);
|
|
127
|
+
}, [state.results, setUsers]);
|
|
128
|
+
(0, react_1.useEffect)(() => {
|
|
129
|
+
var _a;
|
|
130
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keyup', handleKeyUp);
|
|
131
|
+
return () => {
|
|
132
|
+
var _a;
|
|
133
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keyup', handleKeyUp);
|
|
134
|
+
};
|
|
135
|
+
}, [handleKeyUp]);
|
|
122
136
|
if (!users) {
|
|
123
137
|
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
|
|
124
138
|
}
|
|
125
|
-
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { placeholder: intl.formatMessage({
|
|
139
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { ref: inputRef, placeholder: intl.formatMessage({
|
|
126
140
|
id: 'ui.courseUsersTable.searchBar.placeholder',
|
|
127
141
|
defaultMessage: 'ui.courseUsersTable.searchBar.placeholder'
|
|
128
142
|
}), InputProps: {
|
|
@@ -136,6 +150,6 @@ function CourseUsersTable(inProps) {
|
|
|
136
150
|
}) }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [users.length > 0 &&
|
|
137
151
|
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 &&
|
|
138
152
|
user.join_status !== types_1.SCCourseJoinStatusType.CREATOR &&
|
|
139
|
-
scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RemoveButton_1.default, { ref:
|
|
153
|
+
scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RemoveButton_1.default, { ref: buttonRef, 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: buttonRef, 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 })] })));
|
|
140
154
|
}
|
|
141
155
|
exports.default = (0, react_1.memo)(CourseUsersTable);
|
|
@@ -48,15 +48,12 @@ function CourseUsersTable(inProps) {
|
|
|
48
48
|
const [value, setValue] = useState('');
|
|
49
49
|
const [dialog, setDialog] = useState(null);
|
|
50
50
|
// REFS
|
|
51
|
-
const
|
|
51
|
+
const buttonRef = useRef(null);
|
|
52
|
+
const inputRef = useRef(null);
|
|
52
53
|
// CONTEXTS
|
|
53
54
|
const scUserContext = useSCUser();
|
|
54
55
|
// INTL
|
|
55
56
|
const intl = useIntl();
|
|
56
|
-
// EFFECTS
|
|
57
|
-
useEffect(() => {
|
|
58
|
-
setUsers(state.results);
|
|
59
|
-
}, [state.results, setUsers]);
|
|
60
57
|
// HANDLERS
|
|
61
58
|
const handleNext = useCallback(() => {
|
|
62
59
|
dispatch({ type: actionWidgetTypes.LOADING_NEXT });
|
|
@@ -79,10 +76,10 @@ function CourseUsersTable(inProps) {
|
|
|
79
76
|
const handleConfirm = useCallback(() => {
|
|
80
77
|
switch (dialog.tab) {
|
|
81
78
|
case SCCourseEditTabType.USERS:
|
|
82
|
-
|
|
79
|
+
buttonRef.current.handleManageUser(dialog.user);
|
|
83
80
|
break;
|
|
84
81
|
case SCCourseEditTabType.REQUESTS:
|
|
85
|
-
|
|
82
|
+
buttonRef.current.handleManageUser(dialog.request);
|
|
86
83
|
}
|
|
87
84
|
handleOpenDialog(null);
|
|
88
85
|
}, [dialog, handleOpenDialog]);
|
|
@@ -116,10 +113,27 @@ function CourseUsersTable(inProps) {
|
|
|
116
113
|
Logger.error(SCOPE_SC_UI, error);
|
|
117
114
|
});
|
|
118
115
|
}, [value, endpointSearch, setUsers, setLoadingSearch, dispatch]);
|
|
116
|
+
const handleKeyUp = useCallback((e) => {
|
|
117
|
+
if (value.length > 0 && e.key === 'Enter') {
|
|
118
|
+
handleSearchStart();
|
|
119
|
+
}
|
|
120
|
+
}, [value, handleSearchStart]);
|
|
121
|
+
// EFFECTS
|
|
122
|
+
useEffect(() => {
|
|
123
|
+
setUsers(state.results);
|
|
124
|
+
}, [state.results, setUsers]);
|
|
125
|
+
useEffect(() => {
|
|
126
|
+
var _a;
|
|
127
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keyup', handleKeyUp);
|
|
128
|
+
return () => {
|
|
129
|
+
var _a;
|
|
130
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keyup', handleKeyUp);
|
|
131
|
+
};
|
|
132
|
+
}, [handleKeyUp]);
|
|
119
133
|
if (!users) {
|
|
120
134
|
return _jsx(CourseUsersTableSkeleton, {});
|
|
121
135
|
}
|
|
122
|
-
return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(TextField, { placeholder: intl.formatMessage({
|
|
136
|
+
return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(TextField, { ref: inputRef, placeholder: intl.formatMessage({
|
|
123
137
|
id: 'ui.courseUsersTable.searchBar.placeholder',
|
|
124
138
|
defaultMessage: 'ui.courseUsersTable.searchBar.placeholder'
|
|
125
139
|
}), InputProps: {
|
|
@@ -133,6 +147,6 @@ function CourseUsersTable(inProps) {
|
|
|
133
147
|
}) }) }), _jsxs(TableBody, { children: [users.length > 0 &&
|
|
134
148
|
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 &&
|
|
135
149
|
user.join_status !== SCCourseJoinStatusType.CREATOR &&
|
|
136
|
-
scUserContext.user.id !== user.id ? (_jsx(TableCell, { children: _jsx(RemoveButton, { ref:
|
|
150
|
+
scUserContext.user.id !== user.id ? (_jsx(TableCell, { children: _jsx(RemoveButton, { ref: buttonRef, 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: buttonRef, 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 })] })));
|
|
137
151
|
}
|
|
138
152
|
export default memo(CourseUsersTable);
|