@selfcommunity/react-ui 0.10.2-courses.189 → 0.10.2-courses.190
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.
|
@@ -23,6 +23,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
|
23
23
|
const classes = {
|
|
24
24
|
lessonTitle: `${constants_1.PREFIX}-lesson-title`,
|
|
25
25
|
lessonInfoWrapper: `${constants_1.PREFIX}-lesson-info-wrapper`,
|
|
26
|
+
lessonsInnerWrapper: `${constants_1.PREFIX}-lessons-inner-wrapper`,
|
|
26
27
|
lessonsSectionsWrapper: `${constants_1.PREFIX}-lessons-sections-wrapper`,
|
|
27
28
|
lessonsSections: `${constants_1.PREFIX}-lessons-sections`,
|
|
28
29
|
circle: `${constants_1.PREFIX}-circle`,
|
|
@@ -181,10 +182,10 @@ function Lessons(props) {
|
|
|
181
182
|
}
|
|
182
183
|
handleOpenDialog(null);
|
|
183
184
|
}, [dialog, handleOpenDialog]);
|
|
184
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.lessonTitle, classes.contrastColor), variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons", defaultMessage: "ui.editCourse.tab.lessons" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonInfoWrapper }, { children: [(0, jsx_runtime_1.jsx)(CourseTypePopover_1.default, { course: course }), (0, jsx_runtime_1.jsx)(Status_1.default, { course: course, handleTabChange: handleTabChange })] })), sections.length === 0 && ((0, jsx_runtime_1.jsx)(EmptyStatus_1.default, { icon: "courses", title: "ui.editCourse.tab.lessons.table.empty.title", description: "ui.editCourse.tab.lessons.table.empty.description", actions: (0, jsx_runtime_1.jsx)(AddButton_1.default, { className: classes.emptyStatusButton, label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "inherit", variant: "outlined" }), className: classes.lessonEmptyStatus })), sections.length > 0 && ((0, jsx_runtime_1.jsxs)(
|
|
185
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.lessonTitle, classes.contrastColor), variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons", defaultMessage: "ui.editCourse.tab.lessons" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonInfoWrapper }, { children: [(0, jsx_runtime_1.jsx)(CourseTypePopover_1.default, { course: course }), (0, jsx_runtime_1.jsx)(Status_1.default, { course: course, handleTabChange: handleTabChange })] })), sections.length === 0 && ((0, jsx_runtime_1.jsx)(EmptyStatus_1.default, { icon: "courses", title: "ui.editCourse.tab.lessons.table.empty.title", description: "ui.editCourse.tab.lessons.table.empty.description", actions: (0, jsx_runtime_1.jsx)(AddButton_1.default, { className: classes.emptyStatusButton, label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "inherit", variant: "outlined" }), className: classes.lessonEmptyStatus })), sections.length > 0 && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.lessonsInnerWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonsSectionsWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonsSections }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.sections.title", defaultMessage: "ui.course.table.sections.title", values: {
|
|
185
186
|
sectionsNumber: course.num_sections
|
|
186
187
|
} }) })), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
|
|
187
188
|
lessonsNumber: course.num_lessons
|
|
188
|
-
} }) }))] })), (0, jsx_runtime_1.jsx)(AddButton_1.default, { label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "primary", variant: "contained", disabled: isDisabled })] })), (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ className: classes.tableContainer }, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, Object.assign({ className: classes.table }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, Object.assign({ className: classes.tableHeader }, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { className: classes.cellWidth }), headerCells.map((cell, i) => ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: cell.className }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.tableHeaderTypography, variant: "overline" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i)))] }) })), (0, jsx_runtime_1.jsx)(dnd_1.Droppable, Object.assign({ droppableId: "droppable-1" }, { children: (outerProvider) => ((0, jsx_runtime_1.jsxs)(material_1.TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { className: classes.tableBody }, { children: [sections.map((section, i, array) => ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => ((0, jsx_runtime_1.jsx)(SectionRow_1.default, { course: course, provider: innerProvider, section: section, isNewRow: isNewRow && i + 1 === array.length, handleManageSection: handleManageSection, handleOpenDialog: handleOpenDialog, ref: ref }, i)) }), i))), outerProvider.placeholder] }))) }))] })) })) })), dialog && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleDeleteRow })] }))] }));
|
|
189
|
+
} }) }))] })), (0, jsx_runtime_1.jsx)(AddButton_1.default, { label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "primary", variant: "contained", disabled: isDisabled })] })), (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ className: classes.tableContainer }, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, Object.assign({ className: classes.table }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, Object.assign({ className: classes.tableHeader }, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { className: classes.cellWidth }), headerCells.map((cell, i) => ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: cell.className }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.tableHeaderTypography, variant: "overline" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i)))] }) })), (0, jsx_runtime_1.jsx)(dnd_1.Droppable, Object.assign({ droppableId: "droppable-1" }, { children: (outerProvider) => ((0, jsx_runtime_1.jsxs)(material_1.TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { className: classes.tableBody }, { children: [sections.map((section, i, array) => ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => ((0, jsx_runtime_1.jsx)(SectionRow_1.default, { course: course, provider: innerProvider, section: section, isNewRow: isNewRow && i + 1 === array.length, handleManageSection: handleManageSection, handleOpenDialog: handleOpenDialog, ref: ref }, i)) }), i))), outerProvider.placeholder] }))) }))] })) })) })), dialog && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleDeleteRow })] })))] }));
|
|
189
190
|
}
|
|
190
191
|
exports.default = (0, react_1.memo)(Lessons);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { FormattedMessage, useIntl } from 'react-intl';
|
|
3
3
|
import { PREFIX } from './constants';
|
|
4
|
-
import {
|
|
4
|
+
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
5
5
|
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
|
|
6
6
|
import { CourseService } from '@selfcommunity/api-services';
|
|
7
7
|
import { Logger } from '@selfcommunity/utils';
|
|
@@ -20,6 +20,7 @@ import classNames from 'classnames';
|
|
|
20
20
|
const classes = {
|
|
21
21
|
lessonTitle: `${PREFIX}-lesson-title`,
|
|
22
22
|
lessonInfoWrapper: `${PREFIX}-lesson-info-wrapper`,
|
|
23
|
+
lessonsInnerWrapper: `${PREFIX}-lessons-inner-wrapper`,
|
|
23
24
|
lessonsSectionsWrapper: `${PREFIX}-lessons-sections-wrapper`,
|
|
24
25
|
lessonsSections: `${PREFIX}-lessons-sections`,
|
|
25
26
|
circle: `${PREFIX}-circle`,
|
|
@@ -178,10 +179,10 @@ function Lessons(props) {
|
|
|
178
179
|
}
|
|
179
180
|
handleOpenDialog(null);
|
|
180
181
|
}, [dialog, handleOpenDialog]);
|
|
181
|
-
return (_jsxs(Box, { children: [_jsx(Typography, Object.assign({ className: classNames(classes.lessonTitle, classes.contrastColor), variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons", defaultMessage: "ui.editCourse.tab.lessons" }) })), _jsxs(Stack, Object.assign({ className: classes.lessonInfoWrapper }, { children: [_jsx(CourseTypePopover, { course: course }), _jsx(Status, { course: course, handleTabChange: handleTabChange })] })), sections.length === 0 && (_jsx(EmptyStatus, { icon: "courses", title: "ui.editCourse.tab.lessons.table.empty.title", description: "ui.editCourse.tab.lessons.table.empty.description", actions: _jsx(AddButton, { className: classes.emptyStatusButton, label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "inherit", variant: "outlined" }), className: classes.lessonEmptyStatus })), sections.length > 0 && (_jsxs(
|
|
182
|
+
return (_jsxs(Box, { children: [_jsx(Typography, Object.assign({ className: classNames(classes.lessonTitle, classes.contrastColor), variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons", defaultMessage: "ui.editCourse.tab.lessons" }) })), _jsxs(Stack, Object.assign({ className: classes.lessonInfoWrapper }, { children: [_jsx(CourseTypePopover, { course: course }), _jsx(Status, { course: course, handleTabChange: handleTabChange })] })), sections.length === 0 && (_jsx(EmptyStatus, { icon: "courses", title: "ui.editCourse.tab.lessons.table.empty.title", description: "ui.editCourse.tab.lessons.table.empty.description", actions: _jsx(AddButton, { className: classes.emptyStatusButton, label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "inherit", variant: "outlined" }), className: classes.lessonEmptyStatus })), sections.length > 0 && (_jsxs(Box, Object.assign({ className: classes.lessonsInnerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.lessonsSectionsWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.lessonsSections }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.sections.title", defaultMessage: "ui.course.table.sections.title", values: {
|
|
182
183
|
sectionsNumber: course.num_sections
|
|
183
184
|
} }) })), _jsx(Box, { className: classes.circle }), _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
|
|
184
185
|
lessonsNumber: course.num_lessons
|
|
185
|
-
} }) }))] })), _jsx(AddButton, { label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "primary", variant: "contained", disabled: isDisabled })] })), _jsx(DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: _jsx(TableContainer, Object.assign({ className: classes.tableContainer }, { children: _jsxs(Table, Object.assign({ className: classes.table }, { children: [_jsx(TableHead, Object.assign({ className: classes.tableHeader }, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.cellWidth }), headerCells.map((cell, i) => (_jsx(TableCell, Object.assign({ className: cell.className }, { children: _jsx(Typography, Object.assign({ className: classes.tableHeaderTypography, variant: "overline" }, { children: _jsx(FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i)))] }) })), _jsx(Droppable, Object.assign({ droppableId: "droppable-1" }, { children: (outerProvider) => (_jsxs(TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { className: classes.tableBody }, { children: [sections.map((section, i, array) => (_jsx(Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => (_jsx(SectionRow, { course: course, provider: innerProvider, section: section, isNewRow: isNewRow && i + 1 === array.length, handleManageSection: handleManageSection, handleOpenDialog: handleOpenDialog, ref: ref }, i)) }), i))), outerProvider.placeholder] }))) }))] })) })) })), dialog && _jsx(ConfirmDialog, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleDeleteRow })] }))] }));
|
|
186
|
+
} }) }))] })), _jsx(AddButton, { label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "primary", variant: "contained", disabled: isDisabled })] })), _jsx(DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: _jsx(TableContainer, Object.assign({ className: classes.tableContainer }, { children: _jsxs(Table, Object.assign({ className: classes.table }, { children: [_jsx(TableHead, Object.assign({ className: classes.tableHeader }, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.cellWidth }), headerCells.map((cell, i) => (_jsx(TableCell, Object.assign({ className: cell.className }, { children: _jsx(Typography, Object.assign({ className: classes.tableHeaderTypography, variant: "overline" }, { children: _jsx(FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i)))] }) })), _jsx(Droppable, Object.assign({ droppableId: "droppable-1" }, { children: (outerProvider) => (_jsxs(TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { className: classes.tableBody }, { children: [sections.map((section, i, array) => (_jsx(Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => (_jsx(SectionRow, { course: course, provider: innerProvider, section: section, isNewRow: isNewRow && i + 1 === array.length, handleManageSection: handleManageSection, handleOpenDialog: handleOpenDialog, ref: ref }, i)) }), i))), outerProvider.placeholder] }))) }))] })) })) })), dialog && _jsx(ConfirmDialog, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleDeleteRow })] })))] }));
|
|
186
187
|
}
|
|
187
188
|
export default memo(Lessons);
|