@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
159 lines (158 loc) • 13.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const dnd_1 = require("@hello-pangea/dnd");
const react_1 = require("react");
const material_1 = require("@mui/material");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const constants_1 = require("../constants");
const LessonRow_1 = tslib_1.__importDefault(require("./LessonRow"));
const AddButton_1 = tslib_1.__importDefault(require("./AddButton"));
const MenuRow_1 = tslib_1.__importDefault(require("../MenuRow"));
const react_intl_1 = require("react-intl");
const FieldName_1 = tslib_1.__importDefault(require("./FieldName"));
const utils_1 = require("@selfcommunity/utils");
const Errors_1 = require("../../../constants/Errors");
const notistack_1 = require("notistack");
const LessonReleaseMenu_1 = tslib_1.__importDefault(require("../../LessonReleaseMenu"));
const types_1 = require("@selfcommunity/types");
const api_services_1 = require("@selfcommunity/api-services");
const types_2 = require("../types");
const hooks_1 = require("../hooks");
const classes = {
tableBodyIconWrapper: `${constants_1.PREFIX}-table-body-icon-wrapper`,
tableBodyAccordion: `${constants_1.PREFIX}-table-body-accordion`,
actionsWrapper: `${constants_1.PREFIX}-actions-wrapper`,
tableBodyCollapseWrapper: `${constants_1.PREFIX}-table-body-collapse-wrapper`,
cellWidth: `${constants_1.PREFIX}-cell-width`,
cellAlignRight: `${constants_1.PREFIX}-cell-align-right`,
cellAlignCenter: `${constants_1.PREFIX}-cell-align-center`,
cellPadding: `${constants_1.PREFIX}-cell-padding`
};
function SectionRow(props, ref) {
// PROPS
const { course, provider, section, isNewRow, handleManageSection, handleOpenDialog } = props;
// STATES
const [expand, setExpand] = (0, react_1.useState)(true);
const [editMode, setEditMode] = (0, react_1.useState)(false);
const [lessons, setLessons] = (0, react_1.useState)([]);
// REFS
const innerRef = (0, react_1.useRef)(null);
// HOOKS
const { isDisabled } = (0, hooks_1.useIsDisabled)();
const intl = (0, react_intl_1.useIntl)();
const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
// EFFECTS
(0, react_1.useEffect)(() => {
if (section.lessons) {
setLessons(section.lessons);
}
}, [section]);
// MEMOS
const isNewLocalRow = (0, react_1.useMemo)(() => { var _a; return lessons.length > ((_a = section.lessons) === null || _a === void 0 ? void 0 : _a.length); }, [lessons, section]);
// FUNCTIONS
const getLesson = (0, react_1.useCallback)((id, type = types_1.SCCourseLessonTypologyType.LESSON) => {
return {
id,
type,
name: intl.formatMessage({ id: 'ui.editCourse.tab.lessons.table.newLesson', defaultMessage: 'ui.editCourse.tab.lessons.table.newLesson' }, { num: id })
};
}, []);
const handleExpandAccordion = (0, react_1.useCallback)(() => setExpand((prev) => !prev), [setExpand]);
const handleDragEnd = (0, react_1.useCallback)((e) => {
if (!e.destination || e.destination.index === e.source.index) {
return;
}
const tempLessons = Array.from(section.lessons);
const [sourceData] = tempLessons.splice(e.source.index, 1);
tempLessons.splice(e.destination.index, 0, sourceData);
const tempSection = Object.assign(Object.assign({}, section), { lessons: tempLessons });
const data = {
lessons_order: tempLessons.map((tempLesson) => tempLesson.id)
};
api_services_1.CourseService.patchCourseSection(course.id, section.id, data)
.then(() => {
handleManageSection(tempSection, types_2.ActionLessonType.UPDATE);
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, section, handleManageSection]);
const handleAddTempLesson = (0, react_1.useCallback)(() => {
setLessons((prevLessons) => ((prevLessons === null || prevLessons === void 0 ? void 0 : prevLessons.length) > 0 ? [...prevLessons, getLesson(prevLessons.length + 1)] : [getLesson(1)]));
}, [setLessons, getLesson]);
const handleAbleEditMode = (0, react_1.useCallback)(() => setTimeout(() => setEditMode(true)), [setEditMode]);
const handleDisableEditMode = (0, react_1.useCallback)(() => setEditMode(false), [setEditMode]);
const handleDeleteSection = (0, react_1.useCallback)((deleteSection) => {
api_services_1.CourseService.deleteCourseSection(course.id, deleteSection.id)
.then(() => {
var _a;
const tempSection = Object.assign(Object.assign({}, deleteSection), { num_lessons: ((_a = deleteSection.lessons) === null || _a === void 0 ? void 0 : _a.length) || 0 });
handleManageSection(tempSection, types_2.ActionLessonType.DELETE);
enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.snackbar.delete", defaultMessage: "ui.editCourse.tab.lessons.table.snackbar.delete" }), {
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, handleManageSection]);
const handleManageLesson = (0, react_1.useCallback)((lesson, type, newRow) => {
switch (type) {
case types_2.ActionLessonType.ADD: {
const tempSection = Object.assign(Object.assign({}, section), { lessons: section.lessons ? [...section.lessons, lesson] : [lesson] });
handleManageSection(tempSection, types_2.ActionLessonType.ADD_UPDATE);
break;
}
case types_2.ActionLessonType.RENAME: {
const tempSection = Object.assign(Object.assign({}, section), { lessons: section.lessons.map((prevLesson) => {
if (prevLesson.id === lesson.id) {
return Object.assign(Object.assign({}, prevLesson), { name: lesson.name });
}
return prevLesson;
}) });
handleManageSection(tempSection, types_2.ActionLessonType.RENAME_UPDATE);
break;
}
case types_2.ActionLessonType.DELETE: {
const tempSection = Object.assign(Object.assign({}, section), { lessons: section.lessons.filter((prevLesson) => prevLesson.id !== lesson.id) });
handleManageSection(tempSection, types_2.ActionLessonType.DELETE_UPDATE, newRow);
break;
}
case types_2.ActionLessonType.UPDATE: {
const tempSection = Object.assign(Object.assign({}, section), { lessons: section.lessons.map((prevLesson) => {
if (prevLesson.id === lesson.id) {
return Object.assign(Object.assign({}, prevLesson), { status: lesson.status });
}
return prevLesson;
}) });
handleManageSection(tempSection, types_2.ActionLessonType.UPDATE_UPDATE);
}
}
}, [section, handleManageSection]);
(0, react_1.useImperativeHandle)(ref, () => ({
handleDeleteSection: (deleteSection) => handleDeleteSection(deleteSection),
handleDeleteLesson: (deleteSection, deleteLesson) => innerRef.current.handleDeleteLesson(deleteSection, deleteLesson)
}), [handleDeleteSection]);
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.TableRow, Object.assign({}, provider.draggableProps, { ref: provider.innerRef, className: classes.tableBodyAccordion }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, provider.dragHandleProps, { className: (0, classnames_1.default)(classes.cellWidth, classes.cellPadding) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tableBodyIconWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "expand row", size: "small", onClick: handleExpandAccordion }, { children: expand ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_less" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) })), (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "disabled" }, { children: "drag" }))] })) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(FieldName_1.default, { endpoint: {
url: () => isNewRow
? api_services_1.Endpoints.CreateCourseSection.url({ id: course.id })
: api_services_1.Endpoints.PatchCourseSection.url({ id: course.id, section_id: section.id }),
method: isNewRow ? api_services_1.Endpoints.CreateCourseSection.method : api_services_1.Endpoints.PatchCourseSection.method
}, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), course.type !== types_1.SCCourseTypologyType.SELF && ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: (0, jsx_runtime_1.jsx)(LessonReleaseMenu_1.default, { course: course, section: section }) }))), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignRight }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(AddButton_1.default, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "outlined", disabled: isDisabled }), (0, jsx_runtime_1.jsxs)(MenuRow_1.default, Object.assign({ disabled: isDisabled }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: () => handleOpenDialog({ row: types_2.RowType.SECTION, section }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.tableBodyCollapseWrapper, colSpan: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: expand, timeout: "auto", unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(material_1.Table, { children: (0, jsx_runtime_1.jsx)(dnd_1.Droppable, Object.assign({ droppableId: "droppable-2" }, { children: (outerProvider) => ((0, jsx_runtime_1.jsxs)(material_1.TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { children: [lessons.map((lesson, 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)(LessonRow_1.default, { provider: innerProvider, course: course, section: section, lesson: lesson, isNewRow: isNewLocalRow && i + 1 === array.length, handleManageLesson: handleManageLesson, handleOpenDialog: () => handleOpenDialog({ row: types_2.RowType.LESSON, section, lesson }), ref: innerRef }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })) })) })] }));
}
exports.default = (0, react_1.memo)((0, react_1.forwardRef)(SectionRow));