@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
197 lines (196 loc) • 13.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_intl_1 = require("react-intl");
const constants_1 = require("./constants");
const react_1 = require("react");
const dnd_1 = require("@hello-pangea/dnd");
const types_1 = require("@selfcommunity/types");
const api_services_1 = require("@selfcommunity/api-services");
const utils_1 = require("@selfcommunity/utils");
const Errors_1 = require("../../constants/Errors");
const notistack_1 = require("notistack");
const material_1 = require("@mui/material");
const Status_1 = tslib_1.__importDefault(require("./Status"));
const EmptyStatus_1 = tslib_1.__importDefault(require("../../shared/EmptyStatus"));
const AddButton_1 = tslib_1.__importDefault(require("./Lessons/AddButton"));
const SectionRow_1 = tslib_1.__importDefault(require("./Lessons/SectionRow"));
const types_2 = require("./types");
const hooks_1 = require("./hooks");
const ConfirmDialog_1 = tslib_1.__importDefault(require("../../shared/ConfirmDialog/ConfirmDialog"));
const CourseTypePopover_1 = tslib_1.__importDefault(require("../../shared/CourseTypePopover"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const classes = {
lessonTitle: `${constants_1.PREFIX}-lesson-title`,
lessonInfoWrapper: `${constants_1.PREFIX}-lesson-info-wrapper`,
lessonsInnerWrapper: `${constants_1.PREFIX}-lessons-inner-wrapper`,
lessonsSectionsWrapper: `${constants_1.PREFIX}-lessons-sections-wrapper`,
lessonsSections: `${constants_1.PREFIX}-lessons-sections`,
circle: `${constants_1.PREFIX}-circle`,
tableContainer: `${constants_1.PREFIX}-table-container`,
table: `${constants_1.PREFIX}-table`,
tableHeader: `${constants_1.PREFIX}-table-header`,
tableHeaderTypography: `${constants_1.PREFIX}-table-header-typography`,
tableBody: `${constants_1.PREFIX}-table-body`,
cellWidth: `${constants_1.PREFIX}-cell-width`,
cellAlignRight: `${constants_1.PREFIX}-cell-align-right`,
cellAlignCenter: `${constants_1.PREFIX}-cell-align-center`,
lessonEmptyStatus: `${constants_1.PREFIX}-lesson-empty-status`,
emptyStatusButton: `${constants_1.PREFIX}-empty-status-button`,
contrastColor: `${constants_1.PREFIX}-contrast-color`
};
function Lessons(props) {
// PROPS
const { course, setCourse, handleTabChange } = props;
// STATES
const [sections, setSections] = (0, react_1.useState)([]);
const [dialog, setDialog] = (0, react_1.useState)(null);
// REFS
const ref = (0, react_1.useRef)(null);
// HOOKS
const { isDisabled } = (0, hooks_1.useIsDisabled)();
const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
const intl = (0, react_intl_1.useIntl)();
// EFFECTS
(0, react_1.useEffect)(() => {
if (course.sections) {
setSections(course.sections);
}
}, [course]);
// MEMOS
const isNewRow = (0, react_1.useMemo)(() => { var _a; return sections.length > ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length); }, [course, sections]);
const headerCells = (0, react_1.useMemo)(() => [
{
className: undefined,
id: 'ui.editCourse.tab.lessons.table.header.lessonName'
},
...(course.type !== types_1.SCCourseTypologyType.SELF
? [
{
className: classes.cellAlignCenter,
id: 'ui.editCourse.tab.lessons.table.header.calendar'
}
]
: []),
{
className: classes.cellAlignRight,
id: 'ui.editCourse.tab.lessons.table.header.actions'
}
], [course]);
// FUNCTIONS
const getSection = (0, react_1.useCallback)((id) => {
return {
id,
name: intl.formatMessage({ id: 'ui.editCourse.tab.lessons.table.newSection', defaultMessage: 'ui.editCourse.tab.lessons.table.newSection' }, { num: id })
};
}, []);
// HANDLERS
const handleDragEnd = (0, react_1.useCallback)((e) => {
if (!e.destination || e.destination.index === e.source.index) {
return;
}
const tempSections = Array.from(course.sections);
const [sourceData] = tempSections.splice(e.source.index, 1);
tempSections.splice(e.destination.index, 0, sourceData);
const data = {
sections_order: tempSections.map((tempSection) => tempSection.id)
};
api_services_1.CourseService.patchCourse(course.id, data)
.then(() => {
setCourse(Object.assign(Object.assign({}, course), { sections: tempSections }));
enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.snackbar.save", defaultMessage: "ui.editCourse.tab.lessons.table.snackbar.save" }), {
variant: 'success',
autoHideDuration: 3000
});
})
.catch((error) => {
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
variant: 'error',
autoHideDuration: 3000
});
});
}, [course]);
const handleAddTempSection = (0, react_1.useCallback)(() => {
setSections((prevSections) => (prevSections.length > 0 ? [...prevSections, getSection(prevSections.length + 1)] : [getSection(1)]));
}, [setSections]);
const handleManageSection = (0, react_1.useCallback)((section, type, newRow = false) => {
switch (type) {
case types_2.ActionLessonType.ADD: {
const newSection = Object.assign(Object.assign({}, section), { lessons: [] });
setCourse(Object.assign(Object.assign({}, course), { num_sections: course.num_sections + 1, sections: [...course.sections, newSection] }));
break;
}
case types_2.ActionLessonType.RENAME:
setCourse(Object.assign(Object.assign({}, course), { sections: course.sections.map((prevSection) => {
if (prevSection.id === section.id) {
return Object.assign(Object.assign({}, prevSection), { name: section.name });
}
return prevSection;
}) }));
break;
case types_2.ActionLessonType.DELETE: {
if (newRow) {
setCourse(Object.assign(Object.assign({}, course), { sections: course.sections.filter((prevSection) => prevSection.id !== section.id) }));
}
else {
setCourse(Object.assign(Object.assign({}, course), { num_sections: course.num_sections - 1, num_lessons: course.num_lessons - section.num_lessons, sections: course.sections.filter((prevSection) => prevSection.id !== section.id) }));
}
break;
}
case types_2.ActionLessonType.UPDATE:
setCourse(Object.assign(Object.assign({}, course), { sections: course.sections.map((prevSection) => {
if (prevSection.id === section.id) {
return Object.assign(Object.assign({}, prevSection), { lessons: section.lessons });
}
return prevSection;
}) }));
break;
case type.endsWith(types_2.ActionLessonType.UPDATE) && type: {
if (newRow) {
setCourse(Object.assign(Object.assign({}, course), { sections: course.sections.map((prevSection) => {
if (prevSection.id === section.id) {
return section;
}
return prevSection;
}) }));
}
else {
let numLessons = course.num_lessons;
if (type === types_2.ActionLessonType.ADD_UPDATE) {
numLessons = course.num_lessons + 1;
}
else if (type === types_2.ActionLessonType.DELETE_UPDATE) {
numLessons = course.num_lessons - 1;
}
setCourse(Object.assign(Object.assign({}, course), { num_lessons: numLessons, sections: course.sections.map((prevSection) => {
if (prevSection.id === section.id) {
return section;
}
return prevSection;
}) }));
}
}
}
}, [course]);
const handleOpenDialog = (0, react_1.useCallback)((row) => {
setDialog(row);
}, [setDialog]);
const handleDeleteRow = (0, react_1.useCallback)(() => {
switch (dialog.row) {
case types_2.RowType.SECTION:
ref.current.handleDeleteSection(dialog.section);
break;
case types_2.RowType.LESSON:
ref.current.handleDeleteLesson(dialog.section, dialog.lesson);
}
handleOpenDialog(null);
}, [dialog, handleOpenDialog]);
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: {
sectionsNumber: course.num_sections
} }) })), (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: {
lessonsNumber: course.num_lessons
} }) }))] })), (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 })] })))] }));
}
exports.default = (0, react_1.memo)(Lessons);