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

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon, MenuItem, Stack, TableCell, TableRow, Typography } from '@mui/material';
import classNames from 'classnames';
import { PREFIX } from '../constants';
import { forwardRef, memo, useCallback, useImperativeHandle, useState } from 'react';
import MenuRow from '../MenuRow';
import { FormattedMessage } from 'react-intl';
import FieldName from './FieldName';
import ChangeLessonStatus from './ChangeLessonStatus';
import { CourseService, Endpoints } from '@selfcommunity/api-services';
import { Logger } from '@selfcommunity/utils';
import { useSnackbar } from 'notistack';
import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
import { SCOPE_SC_UI } from '../../../constants/Errors';
import { ActionLessonType } from '../types';
import { useIsDisabled } from '../hooks';
import { getUrlLesson } from '../../../utils/course';
const classes = {
    cellWidth: `${PREFIX}-cell-width`,
    cellAlignRight: `${PREFIX}-cell-align-right`,
    cellPadding: `${PREFIX}-cell-padding`,
    tableBodyIconWrapper: `${PREFIX}-table-body-icon-wrapper`,
    actionsWrapper: `${PREFIX}-actions-wrapper`
};
function LessonRow(props, ref) {
    // PROPS
    const { provider, course, section, lesson, isNewRow, handleManageLesson, handleOpenDialog } = props;
    // STATES
    const [editMode, setEditMode] = useState(false);
    // CONTEXTS
    const scRoutingContext = useSCRouting();
    // HOOKS
    const { isDisabled } = useIsDisabled();
    const { enqueueSnackbar } = useSnackbar();
    // HANDLERS
    const handleAbleEditMode = useCallback(() => setTimeout(() => setEditMode(true)), [setEditMode]);
    const handleDisableEditMode = useCallback(() => setEditMode(false), [setEditMode]);
    const handleDeleteLesson = useCallback((deleteSection, deleteLesson) => {
        CourseService.deleteCourseLesson(course.id, deleteSection.id, deleteLesson.id)
            .then(() => {
            handleManageLesson(deleteLesson, ActionLessonType.DELETE);
            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.snackbar.delete", defaultMessage: "ui.editCourse.tab.lessons.table.snackbar.delete" }), {
                variant: 'success',
                autoHideDuration: 3000
            });
        })
            .catch((error) => {
            Logger.error(SCOPE_SC_UI, error);
            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
                variant: 'error',
                autoHideDuration: 3000
            });
        });
    }, [course, handleManageLesson]);
    useImperativeHandle(ref, () => ({
        handleDeleteLesson: (deleteSection, deleteLesson) => handleDeleteLesson(deleteSection, deleteLesson)
    }), [handleDeleteLesson]);
    return (_jsxs(TableRow, Object.assign({}, provider.draggableProps, { ref: provider.innerRef }, { children: [_jsx(TableCell, { width: "4%" }), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, provider.dragHandleProps, { className: classNames(classes.cellWidth, classes.cellPadding) }, { children: _jsx(Stack, Object.assign({ className: classes.tableBodyIconWrapper }, { children: _jsx(Icon, Object.assign({ color: "disabled" }, { children: "drag" })) })) })), _jsx(TableCell, { children: _jsx(FieldName, { endpoint: {
                        url: () => isNewRow
                            ? Endpoints.CreateCourseLesson.url({ id: course.id, section_id: section.id })
                            : Endpoints.PatchCourseLesson.url({ id: course.id, section_id: section.id, lesson_id: lesson.id }),
                        method: isNewRow ? Endpoints.CreateCourseLesson.method : Endpoints.PatchCourseLesson.method
                    }, row: lesson, isNewRow: isNewRow, handleManageRow: handleManageLesson, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), _jsx(TableCell, {}), _jsx(TableCell, Object.assign({ className: classes.cellAlignRight }, { children: _jsxs(Stack, Object.assign({ className: classes.actionsWrapper }, { children: [_jsx(ChangeLessonStatus, { course: course, section: section, lesson: lesson, onChange: handleManageLesson, disabled: isDisabled }), _jsxs(MenuRow, Object.assign({ disabled: isDisabled }, { children: [_jsx(MenuItem, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_EDIT_ROUTE_NAME, getUrlLesson(course, lesson, section)) }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.edit", defaultMessage: "ui.editCourse.tab.lessons.table.menu.edit" }) })) })), _jsx(MenuItem, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_PREVIEW_ROUTE_NAME, getUrlLesson(course, lesson, section)) }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.preview", defaultMessage: "ui.editCourse.tab.lessons.table.menu.preview" }) })) })), _jsx(MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), _jsx(MenuItem, Object.assign({ onClick: handleOpenDialog }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })));
}
export default memo(forwardRef(LessonRow));