...`\nexport default function createWithBsPrefix(prefix, _temp) {\n var _ref = _temp === void 0 ? {} : _temp,\n _ref$displayName = _ref.displayName,\n displayName = _ref$displayName === void 0 ? pascalCase(prefix) : _ref$displayName,\n Component = _ref.Component,\n defaultProps = _ref.defaultProps;\n\n var BsComponent = React.forwardRef(function (_ref2, ref) {\n var className = _ref2.className,\n bsPrefix = _ref2.bsPrefix,\n _ref2$as = _ref2.as,\n Tag = _ref2$as === void 0 ? Component || 'div' : _ref2$as,\n props = _objectWithoutPropertiesLoose(_ref2, [\"className\", \"bsPrefix\", \"as\"]);\n\n var resolvedPrefix = useBootstrapPrefix(bsPrefix, prefix);\n return /*#__PURE__*/React.createElement(Tag, _extends({\n ref: ref,\n className: classNames(className, resolvedPrefix)\n }, props));\n });\n BsComponent.defaultProps = defaultProps;\n BsComponent.displayName = displayName;\n return BsComponent;\n}","import createWithBsPrefix from './createWithBsPrefix';\nexport default createWithBsPrefix('modal-body');","import React from 'react';\nvar ModalContext = React.createContext({\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onHide: function onHide() {}\n});\nexport default ModalContext;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React from 'react';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar ModalDialog = React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n className = _ref.className,\n centered = _ref.centered,\n size = _ref.size,\n children = _ref.children,\n scrollable = _ref.scrollable,\n props = _objectWithoutPropertiesLoose(_ref, [\"bsPrefix\", \"className\", \"centered\", \"size\", \"children\", \"scrollable\"]);\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'modal');\n var dialogClass = bsPrefix + \"-dialog\";\n return /*#__PURE__*/React.createElement(\"div\", _extends({}, props, {\n ref: ref,\n className: classNames(dialogClass, className, size && bsPrefix + \"-\" + size, centered && dialogClass + \"-centered\", scrollable && dialogClass + \"-scrollable\")\n }), /*#__PURE__*/React.createElement(\"div\", {\n className: bsPrefix + \"-content\"\n }, children));\n});\nModalDialog.displayName = 'ModalDialog';\nexport default ModalDialog;","import createWithBsPrefix from './createWithBsPrefix';\nexport default createWithBsPrefix('modal-footer');","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport classNames from 'classnames';\nvar propTypes = {\n label: PropTypes.string.isRequired,\n onClick: PropTypes.func\n};\nvar defaultProps = {\n label: 'Close'\n};\nvar CloseButton = React.forwardRef(function (_ref, ref) {\n var label = _ref.label,\n onClick = _ref.onClick,\n className = _ref.className,\n props = _objectWithoutPropertiesLoose(_ref, [\"label\", \"onClick\", \"className\"]);\n\n return /*#__PURE__*/React.createElement(\"button\", _extends({\n ref: ref,\n type: \"button\",\n className: classNames('close', className),\n onClick: onClick\n }, props), /*#__PURE__*/React.createElement(\"span\", {\n \"aria-hidden\": \"true\"\n }, \"\\xD7\"), /*#__PURE__*/React.createElement(\"span\", {\n className: \"sr-only\"\n }, label));\n});\nCloseButton.displayName = 'CloseButton';\nCloseButton.propTypes = propTypes;\nCloseButton.defaultProps = defaultProps;\nexport default CloseButton;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React, { useContext } from 'react';\nimport useEventCallback from '@restart/hooks/useEventCallback';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport CloseButton from './CloseButton';\nimport ModalContext from './ModalContext';\nvar defaultProps = {\n closeLabel: 'Close',\n closeButton: false\n};\nvar ModalHeader = React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n closeLabel = _ref.closeLabel,\n closeButton = _ref.closeButton,\n onHide = _ref.onHide,\n className = _ref.className,\n children = _ref.children,\n props = _objectWithoutPropertiesLoose(_ref, [\"bsPrefix\", \"closeLabel\", \"closeButton\", \"onHide\", \"className\", \"children\"]);\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'modal-header');\n var context = useContext(ModalContext);\n var handleClick = useEventCallback(function () {\n if (context) context.onHide();\n if (onHide) onHide();\n });\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n ref: ref\n }, props, {\n className: classNames(className, bsPrefix)\n }), children, closeButton && /*#__PURE__*/React.createElement(CloseButton, {\n label: closeLabel,\n onClick: handleClick\n }));\n});\nModalHeader.displayName = 'ModalHeader';\nModalHeader.defaultProps = defaultProps;\nexport default ModalHeader;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport React from 'react';\nimport classNames from 'classnames';\nexport default (function (className) {\n return React.forwardRef(function (p, ref) {\n return /*#__PURE__*/React.createElement(\"div\", _extends({}, p, {\n ref: ref,\n className: classNames(p.className, className)\n }));\n });\n});","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport addEventListener from 'dom-helpers/addEventListener';\nimport canUseDOM from 'dom-helpers/canUseDOM';\nimport ownerDocument from 'dom-helpers/ownerDocument';\nimport removeEventListener from 'dom-helpers/removeEventListener';\nimport getScrollbarSize from 'dom-helpers/scrollbarSize';\nimport useCallbackRef from '@restart/hooks/useCallbackRef';\nimport useEventCallback from '@restart/hooks/useEventCallback';\nimport useWillUnmount from '@restart/hooks/useWillUnmount';\nimport transitionEnd from 'dom-helpers/transitionEnd';\nimport React, { useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport BaseModal from 'react-overlays/Modal';\nimport warning from 'warning';\nimport BootstrapModalManager from './BootstrapModalManager';\nimport Fade from './Fade';\nimport ModalBody from './ModalBody';\nimport ModalContext from './ModalContext';\nimport ModalDialog from './ModalDialog';\nimport ModalFooter from './ModalFooter';\nimport ModalHeader from './ModalHeader';\nimport ModalTitle from './ModalTitle';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar manager;\nvar defaultProps = {\n show: false,\n backdrop: true,\n keyboard: true,\n autoFocus: true,\n enforceFocus: true,\n restoreFocus: true,\n animation: true,\n dialogAs: ModalDialog\n};\n/* eslint-disable no-use-before-define, react/no-multi-comp */\n\nfunction DialogTransition(props) {\n return /*#__PURE__*/React.createElement(Fade, props);\n}\n\nfunction BackdropTransition(props) {\n return /*#__PURE__*/React.createElement(Fade, props);\n}\n/* eslint-enable no-use-before-define */\n\n\nvar Modal = React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n className = _ref.className,\n style = _ref.style,\n dialogClassName = _ref.dialogClassName,\n children = _ref.children,\n Dialog = _ref.dialogAs,\n ariaLabelledby = _ref['aria-labelledby'],\n show = _ref.show,\n animation = _ref.animation,\n backdrop = _ref.backdrop,\n keyboard = _ref.keyboard,\n onEscapeKeyDown = _ref.onEscapeKeyDown,\n onShow = _ref.onShow,\n onHide = _ref.onHide,\n container = _ref.container,\n autoFocus = _ref.autoFocus,\n enforceFocus = _ref.enforceFocus,\n restoreFocus = _ref.restoreFocus,\n restoreFocusOptions = _ref.restoreFocusOptions,\n onEntered = _ref.onEntered,\n onExit = _ref.onExit,\n onExiting = _ref.onExiting,\n onEnter = _ref.onEnter,\n onEntering = _ref.onEntering,\n onExited = _ref.onExited,\n backdropClassName = _ref.backdropClassName,\n propsManager = _ref.manager,\n props = _objectWithoutPropertiesLoose(_ref, [\"bsPrefix\", \"className\", \"style\", \"dialogClassName\", \"children\", \"dialogAs\", \"aria-labelledby\", \"show\", \"animation\", \"backdrop\", \"keyboard\", \"onEscapeKeyDown\", \"onShow\", \"onHide\", \"container\", \"autoFocus\", \"enforceFocus\", \"restoreFocus\", \"restoreFocusOptions\", \"onEntered\", \"onExit\", \"onExiting\", \"onEnter\", \"onEntering\", \"onExited\", \"backdropClassName\", \"manager\"]);\n\n var _useState = useState({}),\n modalStyle = _useState[0],\n setStyle = _useState[1];\n\n var _useState2 = useState(false),\n animateStaticModal = _useState2[0],\n setAnimateStaticModal = _useState2[1];\n\n var waitingForMouseUpRef = useRef(false);\n var ignoreBackdropClickRef = useRef(false);\n var removeStaticModalAnimationRef = useRef(null); // TODO: what's this type\n\n var _useCallbackRef = useCallbackRef(),\n modal = _useCallbackRef[0],\n setModalRef = _useCallbackRef[1];\n\n var handleHide = useEventCallback(onHide);\n bsPrefix = useBootstrapPrefix(bsPrefix, 'modal');\n useImperativeHandle(ref, function () {\n return {\n get _modal() {\n process.env.NODE_ENV !== \"production\" ? warning(false, 'Accessing `_modal` is not supported and will be removed in a future release') : void 0;\n return modal;\n }\n\n };\n }, [modal]);\n var modalContext = useMemo(function () {\n return {\n onHide: handleHide\n };\n }, [handleHide]);\n\n function getModalManager() {\n if (propsManager) return propsManager;\n if (!manager) manager = new BootstrapModalManager();\n return manager;\n }\n\n function updateDialogStyle(node) {\n if (!canUseDOM) return;\n var containerIsOverflowing = getModalManager().isContainerOverflowing(modal);\n var modalIsOverflowing = node.scrollHeight > ownerDocument(node).documentElement.clientHeight;\n setStyle({\n paddingRight: containerIsOverflowing && !modalIsOverflowing ? getScrollbarSize() : undefined,\n paddingLeft: !containerIsOverflowing && modalIsOverflowing ? getScrollbarSize() : undefined\n });\n }\n\n var handleWindowResize = useEventCallback(function () {\n if (modal) {\n updateDialogStyle(modal.dialog);\n }\n });\n useWillUnmount(function () {\n removeEventListener(window, 'resize', handleWindowResize);\n\n if (removeStaticModalAnimationRef.current) {\n removeStaticModalAnimationRef.current();\n }\n }); // We prevent the modal from closing during a drag by detecting where the\n // the click originates from. If it starts in the modal and then ends outside\n // don't close.\n\n var handleDialogMouseDown = function handleDialogMouseDown() {\n waitingForMouseUpRef.current = true;\n };\n\n var handleMouseUp = function handleMouseUp(e) {\n if (waitingForMouseUpRef.current && modal && e.target === modal.dialog) {\n ignoreBackdropClickRef.current = true;\n }\n\n waitingForMouseUpRef.current = false;\n };\n\n var handleStaticModalAnimation = function handleStaticModalAnimation() {\n setAnimateStaticModal(true);\n removeStaticModalAnimationRef.current = transitionEnd(modal.dialog, function () {\n setAnimateStaticModal(false);\n });\n };\n\n var handleStaticBackdropClick = function handleStaticBackdropClick(e) {\n if (e.target !== e.currentTarget) {\n return;\n }\n\n handleStaticModalAnimation();\n };\n\n var handleClick = function handleClick(e) {\n if (backdrop === 'static') {\n handleStaticBackdropClick(e);\n return;\n }\n\n if (ignoreBackdropClickRef.current || e.target !== e.currentTarget) {\n ignoreBackdropClickRef.current = false;\n return;\n }\n\n onHide();\n };\n\n var handleEscapeKeyDown = function handleEscapeKeyDown(e) {\n if (!keyboard && backdrop === 'static') {\n // Call preventDefault to stop modal from closing in react-overlays,\n // then play our animation.\n e.preventDefault();\n handleStaticModalAnimation();\n } else if (keyboard && onEscapeKeyDown) {\n onEscapeKeyDown(e);\n }\n };\n\n var handleEnter = function handleEnter(node) {\n if (node) {\n node.style.display = 'block';\n updateDialogStyle(node);\n }\n\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n if (onEnter) onEnter.apply(void 0, [node].concat(args));\n };\n\n var handleExit = function handleExit(node) {\n if (removeStaticModalAnimationRef.current) {\n removeStaticModalAnimationRef.current();\n }\n\n for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {\n args[_key2 - 1] = arguments[_key2];\n }\n\n if (onExit) onExit.apply(void 0, [node].concat(args));\n };\n\n var handleEntering = function handleEntering(node) {\n for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {\n args[_key3 - 1] = arguments[_key3];\n }\n\n if (onEntering) onEntering.apply(void 0, [node].concat(args)); // FIXME: This should work even when animation is disabled.\n\n addEventListener(window, 'resize', handleWindowResize);\n };\n\n var handleExited = function handleExited(node) {\n if (node) node.style.display = ''; // RHL removes it sometimes\n\n for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {\n args[_key4 - 1] = arguments[_key4];\n }\n\n if (onExited) onExited.apply(void 0, args); // FIXME: This should work even when animation is disabled.\n\n removeEventListener(window, 'resize', handleWindowResize);\n };\n\n var renderBackdrop = useCallback(function (backdropProps) {\n return /*#__PURE__*/React.createElement(\"div\", _extends({}, backdropProps, {\n className: classNames(bsPrefix + \"-backdrop\", backdropClassName, !animation && 'show')\n }));\n }, [animation, backdropClassName, bsPrefix]);\n\n var baseModalStyle = _extends({}, style, {}, modalStyle); // Sets `display` always block when `animation` is false\n\n\n if (!animation) {\n baseModalStyle.display = 'block';\n }\n\n var renderDialog = function renderDialog(dialogProps) {\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n role: \"dialog\"\n }, dialogProps, {\n style: baseModalStyle,\n className: classNames(className, bsPrefix, animateStaticModal && bsPrefix + \"-static\"),\n onClick: backdrop ? handleClick : undefined,\n onMouseUp: handleMouseUp,\n \"aria-labelledby\": ariaLabelledby\n }), /*#__PURE__*/React.createElement(Dialog, _extends({}, props, {\n role: \"document\",\n onMouseDown: handleDialogMouseDown,\n className: dialogClassName\n }), children));\n };\n\n return /*#__PURE__*/React.createElement(ModalContext.Provider, {\n value: modalContext\n }, /*#__PURE__*/React.createElement(BaseModal, {\n show: show,\n ref: setModalRef,\n backdrop: backdrop,\n container: container,\n keyboard: true // Always set true - see handleEscapeKeyDown\n ,\n autoFocus: autoFocus,\n enforceFocus: enforceFocus,\n restoreFocus: restoreFocus,\n restoreFocusOptions: restoreFocusOptions,\n onEscapeKeyDown: handleEscapeKeyDown,\n onShow: onShow,\n onHide: onHide,\n onEnter: handleEnter,\n onEntering: handleEntering,\n onEntered: onEntered,\n onExit: handleExit,\n onExiting: onExiting,\n onExited: handleExited,\n manager: getModalManager(),\n containerClassName: bsPrefix + \"-open\",\n transition: animation ? DialogTransition : undefined,\n backdropTransition: animation ? BackdropTransition : undefined,\n renderBackdrop: renderBackdrop,\n renderDialog: renderDialog\n }));\n});\nModal.displayName = 'Modal';\nModal.defaultProps = defaultProps;\nModal.Body = ModalBody;\nModal.Header = ModalHeader;\nModal.Title = ModalTitle;\nModal.Footer = ModalFooter;\nModal.Dialog = ModalDialog;\nModal.TRANSITION_DURATION = 300;\nModal.BACKDROP_TRANSITION_DURATION = 150;\nexport default Modal;","import createWithBsPrefix from './createWithBsPrefix';\nimport divWithClassName from './divWithClassName';\nvar DivStyledAsH4 = divWithClassName('h4');\nexport default createWithBsPrefix('modal-title', {\n Component: DivStyledAsH4\n});","/**\n * Safe chained function\n *\n * Will only create a new function if needed,\n * otherwise will pass back existing functions or null.\n *\n * @param {function} functions to chain\n * @returns {function|null}\n */\nfunction createChainedFunction() {\n for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {\n funcs[_key] = arguments[_key];\n }\n\n return funcs.filter(function (f) {\n return f != null;\n }).reduce(function (acc, f) {\n if (typeof f !== 'function') {\n throw new Error('Invalid Argument Type, must only provide functions, undefined, or null.');\n }\n\n if (acc === null) return f;\n return function chainedFunction() {\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n // @ts-ignore\n acc.apply(this, args); // @ts-ignore\n\n f.apply(this, args);\n };\n }, null);\n}\n\nexport default createChainedFunction;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport React from 'react';\nimport createChainedFunction from './createChainedFunction';\n\nfunction isTrivialHref(href) {\n return !href || href.trim() === '#';\n}\n/**\n * There are situations due to browser quirks or Bootstrap CSS where\n * an anchor tag is needed, when semantically a button tag is the\n * better choice. SafeAnchor ensures that when an anchor is used like a\n * button its accessible. It also emulates input `disabled` behavior for\n * links, which is usually desirable for Buttons, NavItems, DropdownItems, etc.\n */\n\n\nvar SafeAnchor = React.forwardRef(function (_ref, ref) {\n var _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'a' : _ref$as,\n disabled = _ref.disabled,\n onKeyDown = _ref.onKeyDown,\n props = _objectWithoutPropertiesLoose(_ref, [\"as\", \"disabled\", \"onKeyDown\"]);\n\n var handleClick = function handleClick(event) {\n var href = props.href,\n onClick = props.onClick;\n\n if (disabled || isTrivialHref(href)) {\n event.preventDefault();\n }\n\n if (disabled) {\n event.stopPropagation();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n };\n\n var handleKeyDown = function handleKeyDown(event) {\n if (event.key === ' ') {\n event.preventDefault();\n handleClick(event);\n }\n };\n\n if (isTrivialHref(props.href)) {\n props.role = props.role || 'button'; // we want to make sure there is a href attribute on the node\n // otherwise, the cursor incorrectly styled (except with role='button')\n\n props.href = props.href || '#';\n }\n\n if (disabled) {\n props.tabIndex = -1;\n props['aria-disabled'] = true;\n }\n\n return /*#__PURE__*/React.createElement(Component, _extends({\n ref: ref\n }, props, {\n onClick: handleClick,\n onKeyDown: createChainedFunction(handleKeyDown, onKeyDown)\n }));\n});\nSafeAnchor.displayName = 'SafeAnchor';\nexport default SafeAnchor;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport classNames from 'classnames';\nimport React from 'react';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport SafeAnchor from './SafeAnchor';\nvar defaultProps = {\n variant: 'primary',\n active: false,\n disabled: false\n};\nvar Button = React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n variant = _ref.variant,\n size = _ref.size,\n active = _ref.active,\n className = _ref.className,\n block = _ref.block,\n type = _ref.type,\n as = _ref.as,\n props = _objectWithoutPropertiesLoose(_ref, [\"bsPrefix\", \"variant\", \"size\", \"active\", \"className\", \"block\", \"type\", \"as\"]);\n\n var prefix = useBootstrapPrefix(bsPrefix, 'btn');\n var classes = classNames(className, prefix, active && 'active', prefix + \"-\" + variant, block && prefix + \"-block\", size && prefix + \"-\" + size);\n\n if (props.href) {\n return /*#__PURE__*/React.createElement(SafeAnchor, _extends({}, props, {\n as: as,\n ref: ref,\n className: classNames(classes, props.disabled && 'disabled')\n }));\n }\n\n if (ref) {\n props.ref = ref;\n }\n\n if (type) {\n props.type = type;\n } else if (!as) {\n props.type = 'button';\n }\n\n var Component = as || 'button';\n return /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n className: classes\n }));\n});\nButton.displayName = 'Button';\nButton.defaultProps = defaultProps;\nexport default Button;","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { toast } from 'react-toastify';\r\nimport 'react-toastify/scss/main.scss';\r\nimport { randomId } from \"~src/utils\"\r\nimport { toastInit } from \"~src/utils\";\r\nimport { REQUEST_SUCCESS, FILL_ALL } from '~components/common/Constant/toast';\r\nimport {addSupportTicket} from '~src/api/teacherAPI';\r\nimport styles from \"~components/TeacherSupportModal.module.scss\"\r\nimport { Editor } from '@tinymce/tinymce-react';\r\nimport {uploadImageToServer} from '~src/api/optionAPI'\r\n\r\nconst imageUploadHandle = async (blobInfo, success, failure, progress) => {\r\n const blob = await blobInfo.blob();\r\n try {\r\n const res = await uploadImageToServer([blob]);\r\n res.Code === 1 && res.Data.length > 0 && success(`${res.Data[0].UrlIMG}`);\r\n //success('https://vcdn-ngoisao.vnecdn.net/2020/07/08/MRAT6138-JPG-2263-1594179677_r_460x0.jpg');\r\n } catch (error) {\r\n console.log(error?.message ?? error);\r\n }\r\n \r\n}\r\n\r\nconst editorOptions = {\r\n min_height: 300,\r\n id:randomId(),\r\n menubar: false,\r\n images_upload_handler: imageUploadHandle,\r\n images_reuse_filename: true,\r\n // toolbar: false,\r\n // menubar: false,\r\n inline: false,\r\n plugins: [\r\n 'autolink lists link image ',\r\n 'media table paste help wordcount',\r\n 'lists',\r\n 'autolink',\r\n 'paste',\r\n 'table',\r\n ],\r\n // quickbars_insert_toolbar: 'quicktable image table',\r\n // quickbars_selection_toolbar: 'bold italic underline | formatselect | blockquote quicklink',\r\n // contextmenu: 'undo redo | inserttable | cell row column deletetable | help',\r\n toolbar:\r\n 'undo redo | formatselect | bold italic backcolor | \\\r\n alignleft aligncenter alignright alignjustify | \\\r\n bullist numlist | removeformat | media image link',\r\n placeholder: 'Your content...',\r\n\r\n}\r\n\r\n\r\n\r\nconst initialState = {\r\n nguoigui: \"\",\r\n title: \"\",\r\n content: \"\",\r\n file: \"\",\r\n}\r\n\r\nconst TeacherSupportModal = ({refreshList}) => {\r\n const [state, setState] = React.useState(initialState);\r\n const [editorContent, setEditorContent] = React.useState('');\r\n const submitAlert = () => toast.warn(FILL_ALL, toastInit);\r\n\r\n \r\n\r\n const handleChange = (e) => {\r\n const target = e.target;\r\n const value = target.type === \"file\" ? target.files[0] : target.value;\r\n const key = target.getAttribute(\"name\");\r\n setState({\r\n ...state,\r\n [key]: value,\r\n })\r\n }\r\n\r\n const handleSubmit = async () => {\r\n if(state.title.length <= 0 || editorContent.length <= 0){ submitAlert(); return;}\r\n try {\r\n const res = await addSupportTicket({\r\n SupportTitle: state?.title ?? '',\r\n SupportContent: tinymce.html.Entities.encodeAllRaw(editorContent) || ''\r\n })\r\n if(res.Code === 1){\r\n toast.success('New ticket was created.');\r\n $('#md-teacher-support').fadeOut(500, function () {\r\n $('#md-teacher-support').modal('hide');\r\n });\r\n setEditorContent('');\r\n setState({...state, title:''});\r\n refreshList && refreshList();\r\n }\r\n res.Code !== 1 && toast.warning('Your paste text not correct format, please use clear format button in editor..');\r\n }catch (error) {\r\n console.log(error?.message ?? 'Submit ticket không thành công')\r\n }\r\n }\r\n\r\n const _handleEditorChange = (content, editor) => {\r\n setEditorContent(content);\r\n }\r\n\r\n React.useEffect(() => {\r\n let focusEvent = $(document).on('focusin', function(e) {\r\n if ($(e.target).closest(\".tox\").length) {\r\n e.stopImmediatePropagation();\r\n }\r\n });\r\n return () => {\r\n focusEvent.remove();\r\n }\r\n },[]);\r\n\r\n\r\n React.useEffect(() => {\r\n console.log(state);\r\n },[state]);\r\n\r\n return \r\n
\r\n
\r\n
\r\n
Create a new ticket
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n}\r\n\r\nexport default TeacherSupportModal;","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { randomId } from \"~src/utils\"\r\nimport TeacherSupportModal from \"~components/TeacherSupportModal\"\r\nimport { toast } from 'react-toastify';\r\nimport Skeleton from 'react-loading-skeleton';\r\nimport styles from \"~components/TeacherSupport/teacherSupport.module.scss\"\r\nimport { getTicketDetail, cancelTicketSupport } from '~src/api/teacherAPI';\r\nimport Moment from 'moment';\r\nimport {Modal, Button} from 'react-bootstrap'\r\nimport TinyEditor,{ imageUploadHandle } from '~components/common/TinyEditor';\r\nconst initialState = {\r\n author: 'Trương Văn Lam',\r\n location: 'Vietnam',\r\n avatar: null,\r\n title: 'Yêu cầu trả lương trước tết !!',\r\n content: `Greetings!
\r\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
\r\n Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
\r\n Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem.
Sincerely yours,
Mona Media Team
`,\r\n files: [\r\n {\r\n id: 1,\r\n name: 'Image 1',\r\n url: 'https://drive.google.com/drive/'\r\n },\r\n {\r\n id: 2,\r\n name: 'Image 2',\r\n url: 'https://drive.google.com/drive/'\r\n },\r\n ],\r\n date: '20/04/2020 10:30AM',\r\n}\r\n\r\n\r\nconst ModalConfirmCancel = ({show, hideConfirm, _onSubmit}) => {\r\n return (\r\n \r\n \r\n Warning !!
\r\n \r\n \r\n Do you want to cancel this ticket ?
\r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\n\r\nconst SupportDetail = ({ onClickBack, detailId, afterCancelSuccess }) => {\r\n const [state, setState] = React.useState(null);\r\n const [isLoading, setIsLoading] = React.useState(true);\r\n const [show, setShow] = React.useState(false);\r\n const [showEdit, setShowEdit] = React.useState(false);\r\n const getDetail = async () => {\r\n setIsLoading(true);\r\n try {\r\n const res = await getTicketDetail({ ID: detailId });\r\n res.Code === 1 && setState(res.Data);\r\n } catch (err) {\r\n console.log(err?.message ?? 'Call api getTicketDetail không thành công !!');\r\n }\r\n setIsLoading(false);\r\n }\r\n\r\n const showModal = () => setShow(true);\r\n const hideModal = () => setShow(false);\r\n\r\n const _onClickBack = (e) => {\r\n e.preventDefault();\r\n onClickBack();\r\n }\r\n\r\n const _onClickCancel = (e) => {\r\n e.preventDefault();\r\n showModal();\r\n }\r\n\r\n // const _onClickEdit = (e) => {\r\n // e.preventDefault();\r\n // //showModal();\r\n // }\r\n\r\n const cancelTicket = async () => {\r\n try {\r\n const res = await cancelTicketSupport({ID:state.ID});\r\n res.Code === 1 && toast.success('Ticket was cancelled !!');\r\n res.Code !== 1 && toast.error('Ticket cancel failed !!');\r\n afterCancelSuccess(state.ID);\r\n } catch (error) {\r\n console.log(error?.message ?? 'Ticket cancel failed');\r\n }\r\n hideModal();\r\n \r\n }\r\n\r\n React.useEffect(() => {\r\n getDetail();\r\n $('.btn-icon').tooltip();\r\n }, [detailId])\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n
{isLoading ? : state?.SupportTitle ?? ''}
\r\n \r\n \r\n\r\n
\r\n
\r\n
\r\n
\r\n {\r\n isLoading ? ()\r\n : { e.target.onerror = null; e.target.src = \"../assets/img/default-avatar.png\" }}/>\r\n }\r\n \r\n
\r\n
{isLoading ? : state?.TeacherName ?? ''}
\r\n {isLoading ? : Moment(state?.CreatedDate).format('DD/MM/YYYY HH:mm') ?? ''}\r\n \r\n
\r\n
\r\n {/* */}\r\n {\r\n !!state && !!state.Status && state.Status !== 4 && (\r\n \r\n )\r\n }\r\n \r\n
\r\n
\r\n {\r\n isLoading ?
:
\r\n }\r\n
\r\n {\r\n !!state && !!state.AdminReplyContent && state.AdminReplyContent !== '' && (\r\n <>\r\n
\r\n\r\n
\r\n
\r\n
\r\n {\r\n isLoading ? ()\r\n : \r\n }\r\n \r\n
\r\n
{state?.AdminReplyName ?? ''}
\r\n {isLoading ? : Moment(state?.AdminReplyDate).format('DD/MM/YYYY HH:mm') ?? ''}\r\n \r\n
\r\n {\r\n isLoading ?
:
\r\n }\r\n
\r\n >\r\n )\r\n }\r\n\r\n
\r\n \r\n >\r\n )\r\n}\r\n\r\nexport default SupportDetail;","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { randomId } from \"~src/utils\";\r\nimport TeacherSupportModal from \"~components/TeacherSupportModal\"\r\nimport { ToastContainer } from 'react-toastify';\r\nimport SupportDetail from './SupportDetail';\r\nimport styles from \"~components/TeacherSupport/teacherSupport.module.scss\"\r\nimport { getListSupport, getOverviewSupport } from '~src/api/teacherAPI';\r\nimport Pagination from 'react-js-pagination';\r\nimport Skeleton from 'react-loading-skeleton';\r\nimport { Filter } from 'styled-icons/ionicons-solid';\r\n\r\nconst TeacherSupport = () => {\r\n\tconst [state, setState] = React.useState([]);\r\n\tconst [filterState, setFilterState] = React.useState([]);\r\n\tconst [overView, setOverView] = React.useState(null);\r\n\tconst [filter, setFilter] = React.useState(0);\r\n\tconst [showDetail, setShowDetail] = React.useState(false);\r\n\tconst [detailId, setDetailId] = React.useState(0);\r\n\tconst [pageNumber, setPageNumber] = React.useState(1);\r\n\tconst [isLoading, setIsLoading] = React.useState(true);\r\n\tconst [pageSize, setPageSize] = React.useState(0);\r\n\tconst [totalResult, setTotalResult] = React.useState(0);\r\n\r\n\t// const onChangeState = () => {\r\n\t// \tsetIsLoading(true);\r\n\t// \tif(filter === 0){\r\n\t// \t\tsetFilterState([...state]);\r\n\t// \t\tsetIsLoading(false);\r\n\t// \t\treturn;\r\n\t// \t} \r\n\t// \tconst newFilterState = [...state].filter(item => item.STATUS === filter);\r\n\t// \tsetFilterState(newFilterState);\r\n\t// \tsetIsLoading(false);\r\n\t\t\r\n\t// }\r\n\r\n\tconst pushHistoryState = (id) => {\r\n\t\tif (typeof window == undefined) return;\r\n\t\tconst history = window.history;\r\n\t\thistory.pushState({ id: id }, 'Ticket detail', `${window.location.pathname}?id=${id}`);\r\n\t}\r\n\r\n\tconst showDetailBox = (id) => {\r\n\t\tsetDetailId(id)\r\n\t\tpushHistoryState(id)\r\n\t\tsetShowDetail(true);\r\n\t}\r\n\r\n\tconst _handlefilter = (index) => {\r\n\t\tshowDetail && hideDetailBox();\r\n\t\tsetFilter(index);\r\n\t}\r\n\r\n\tconst hideDetailBox = () => {\r\n\t\tsetShowDetail(false);\r\n\t\twindow.history.pushState(null, 'Teacher Support', `${window.location.pathname}`);\r\n\t}\r\n\r\n\tconst checkDetailUrl = () => {\r\n\t\tif (typeof window == undefined) return;\r\n\t\tconst params = new URLSearchParams(window.location.search);\r\n\t\tparams.has('id') && showDetailBox(params.get('id'));\r\n\t}\r\n\r\n\tconst getSupportList = async (page = 1) => {\r\n\t\tsetIsLoading(true);\r\n\t\ttry {\r\n\t\t\tconst res = await getListSupport({\r\n\t\t\t\tStatus: parseInt(filter),\r\n\t\t\t\tPage: parseInt(page)\r\n\t\t\t});\r\n\t\t\tif (res.Code === 1) {\r\n\t\t\t\tsetState(res.Data);\r\n\t\t\t\tsetPageSize(res.PageSize);\r\n\t\t\t\tsetTotalResult(res.TotalResult);\r\n\t\t\t}\r\n\r\n\t\t} catch (error) {\r\n\t\t\tconsole.log(error?.message ?? 'Call api getListSupport không thành công');\r\n\t\t}\r\n\t\tsetIsLoading(false);\r\n\t}\r\n\r\n\tconst refreshList = async () => {\r\n\t\tawait getSupportList();\r\n\t\tawait getOverView();\r\n\t}\r\n\r\n\tconst getOverView = async () => {\r\n\t\ttry {\r\n\t\t\tconst res = await getOverviewSupport();\r\n\t\t\tres.Code === 1 && setOverView(res.Data);\r\n\t\t} catch (error) {\r\n\t\t\tconsole.log(error?.message ?? 'Call api SupportOverview không thành công');\r\n\t\t}\r\n\t}\r\n\r\n\tconst afterCancelSuccess = (ID) =>{\r\n\t\tlet newState = [...state];\r\n\t\t/* setFilterState([...state.map(item => item.ID === ID ? {\r\n\t\t\t...item,\r\n\t\t\tSTATUS: 4\r\n\t\t} : item )]); */\r\n\r\n\t\tvar index = state.findIndex(i => i.ID === ID);\r\n\t\tif(index !== -1) {\r\n\t\t\tnewState[index].STATUS = 4;\r\n\t\t}\r\n\t\tsetFilterState({\r\n\t\t\t...newState,\r\n\t\t})\r\n\t\tconsole.log(newState);\r\n\t\thideDetailBox();\r\n\t}\r\n\r\n\t// React.useEffect(() => {\r\n\t// \tonChangeState();\r\n\t// },[state, filter])\r\n\r\n\tReact.useEffect(() => {\r\n\t\tgetSupportList(1);\r\n\t}, [filter]);\r\n\r\n\tReact.useEffect(() => {\r\n\t\tgetSupportList(pageNumber);\r\n\t}, [pageNumber]);\r\n\r\n\r\n\tReact.useEffect(() => {\r\n\t\tgetOverView();\r\n\t\tcheckDetailUrl();\r\n\t}, []);\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t{showDetail ?
: (\r\n\t\t\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tTicket title | \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tSending date | \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tStatus | \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{isLoading ? ( | | |
) : (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t!!state && state.length > 0 ? state.map(item =>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t showDetailBox(item.ID)} className=\"sup-item-table-tieude\">{item.SupportTitle}
| \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{moment(item.CreatedDate).format(\"DD/MM/YYYY\")} \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.STATUS === 1 ? \"Newly created\" :\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.STATUS === 2 ? \"Processing\" :\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.STATUS === 3 ? \"Closed\" : \"Cancelled\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
) : (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tNo support ticket\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t\t\t\t{totalResult > pageSize && (\r\n\t\t\t\t\t\t\t\t\t\t\t
setPageNumber(page)}\r\n\t\t\t\t\t\t\t\t\t\t\t\titemClass=\"page-item\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tlinkClass=\"page-link\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tactiveClass=\"active\"\r\n\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t}\r\n\r\n\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t
\r\n\r\n\t\t\t
\r\n\t\t\t\r\n\t\t \r\n\t)\r\n}\r\n\r\nconst domContainer = document.getElementById('react-teacher-support');\r\nReactDOM.render(, domContainer);"],"sourceRoot":""}