@selfcommunity/react-ui/lib/cjs/components/EditCourse/Lessons/LessonRow.js

React UI Components to integrate a Community created with SelfCommunity Platform.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const constants_1 = require("../constants");
const react_1 = require("react");
const MenuRow_1 = tslib_1.__importDefault(require("../MenuRow"));
const react_intl_1 = require("react-intl");
const FieldName_1 = tslib_1.__importDefault(require("./FieldName"));
const ChangeLessonStatus_1 = tslib_1.__importDefault(require("./ChangeLessonStatus"));
const api_services_1 = require("@selfcommunity/api-services");
const utils_1 = require("@selfcommunity/utils");
const notistack_1 = require("notistack");
const react_core_1 = require("@selfcommunity/react-core");
const Errors_1 = require("../../../constants/Errors");
const types_1 = require("../types");
const hooks_1 = require("../hooks");
const course_1 = require("../../../utils/course");
const classes = {
    cellWidth: `${constants_1.PREFIX}-cell-width`,
    cellAlignRight: `${constants_1.PREFIX}-cell-align-right`,
    cellPadding: `${constants_1.PREFIX}-cell-padding`,
    tableBodyIconWrapper: `${constants_1.PREFIX}-table-body-icon-wrapper`,
    actionsWrapper: `${constants_1.PREFIX}-actions-wrapper`
};
function LessonRow(props, ref) {
    // PROPS
    const { provider, course, section, lesson, isNewRow, handleManageLesson, handleOpenDialog } = props;
    // STATES
    const [editMode, setEditMode] = (0, react_1.useState)(false);
    // CONTEXTS
    const scRoutingContext = (0, react_core_1.useSCRouting)();
    // HOOKS
    const { isDisabled } = (0, hooks_1.useIsDisabled)();
    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
    // HANDLERS
    const handleAbleEditMode = (0, react_1.useCallback)(() => setTimeout(() => setEditMode(true)), [setEditMode]);
    const handleDisableEditMode = (0, react_1.useCallback)(() => setEditMode(false), [setEditMode]);
    const handleDeleteLesson = (0, react_1.useCallback)((deleteSection, deleteLesson) => {
        api_services_1.CourseService.deleteCourseLesson(course.id, deleteSection.id, deleteLesson.id)
            .then(() => {
            handleManageLesson(deleteLesson, types_1.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, handleManageLesson]);
    (0, react_1.useImperativeHandle)(ref, () => ({
        handleDeleteLesson: (deleteSection, deleteLesson) => handleDeleteLesson(deleteSection, deleteLesson)
    }), [handleDeleteLesson]);
    return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, Object.assign({}, provider.draggableProps, { ref: provider.innerRef }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { width: "4%" }), (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.jsx)(material_1.Stack, Object.assign({ className: classes.tableBodyIconWrapper }, { children: (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.CreateCourseLesson.url({ id: course.id, section_id: section.id })
                            : api_services_1.Endpoints.PatchCourseLesson.url({ id: course.id, section_id: section.id, lesson_id: lesson.id }),
                        method: isNewRow ? api_services_1.Endpoints.CreateCourseLesson.method : api_services_1.Endpoints.PatchCourseLesson.method
                    }, row: lesson, isNewRow: isNewRow, handleManageRow: handleManageLesson, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, {}), (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)(ChangeLessonStatus_1.default, { course: course, section: section, lesson: lesson, onChange: handleManageLesson, 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({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_EDIT_ROUTE_NAME, (0, course_1.getUrlLesson)(course, lesson, 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.edit", defaultMessage: "ui.editCourse.tab.lessons.table.menu.edit" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_PREVIEW_ROUTE_NAME, (0, course_1.getUrlLesson)(course, lesson, 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.preview", defaultMessage: "ui.editCourse.tab.lessons.table.menu.preview" }) })) })), (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 }, { 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" }) })) }))] }))] })) }))] })));
}
exports.default = (0, react_1.memo)((0, react_1.forwardRef)(LessonRow));