@antscorp/antsomi-ui 1.3.5-beta.52 → 1.3.5-beta.521

package/es/components/organism/TicketEditor/Content.js

@@ -0,0 +1,436 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useRef, useState } from 'react';
+import { Editor } from '@tinymce/tinymce-react';
+import dayjs from 'dayjs';
+import DropdownComponent from './components/DropdownComponent';
+import MessageComponent from './components/MessageComponent';
+import { Spin, Tooltip, Icon, Button, EditableName, SelectAccount, } from '@antscorp/antsomi-ui/es/components';
+import Service from './Service';
+import { MESSAGE_TYPE, TICKET_CUSTOM_MESSAGE_KEY } from './constant';
+import { WrapperContent, WrapperContentInput, WrapperEditor, WrapperIconEditor, WrapperInputFile, WrapperLable, WrapperLeftContent, WrapperLinkItemFiles, WrapperMessageContent, WrapperRightContent, WrapperTextEdit, WrapperTextInput, DrawerHeader, } from './styled';
+import { formatAccountId, formatDatarender, formatParams, handleValidateContent, postCustomEvent, } from './util';
+const initValueInput = {
+    title: '',
+    feature: {},
+    ticketType: {},
+    priority: {},
+    category: {},
+    ownerId: [],
+    followers: [],
+    message: '',
+    files: [],
+    isChanged: false,
+    referenceUrl: window.location.href,
+};
+const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers, domainTicket, config, ticketDetails, listComment, userId, fetchgetTicketComments, isLoadingComment, handleCloseDrawer, setIsSuccessCreated, isLoadingDetails, isLoadingDataSouce, accountManage, timeZone, isLoadingSelectedAccount, accountEdit, initOwnerId, isAllAccount, setDrawerHeader, openDrawer, dataSelectInput, setDataSelectInput, }) => {
+    var _a, _b, _c, _d;
+    const [isOpenToast, setIsOpenToast] = useState({
+        isOpen: false,
+        status: 'error',
+        messages: '',
+    });
+    const [textValue, setTextValue] = useState('');
+    const [isEmptyField, setIsEmptyField] = useState(false);
+    const [dataSelects, setDataSelect] = useState(dataSelectInput);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isLoadingUpload, setIsLoadingUpload] = useState(false);
+    const [isLoadingFollower, setIsLoadingFollower] = useState(false);
+    const [valueInput, setValueInput] = useState(initValueInput);
+    const [errFile, setErrFile] = useState({
+        isError: false,
+        message: '',
+    });
+    const isUpdate = action === 'edit' && ticketId;
+    const valueInputRef = useRef(valueInput);
+    valueInputRef.current = valueInput;
+    // const isRulesEdit = useMemo(() => {
+    //   const { title, feature, ticketType, priority, category, ownerId, followers, message, files, referenceUrl } = valueInput
+    //   if (
+    //     !title?.length && referenceUrl === window.location.href
+    //     && Object.keys(feature)?.length <= 2
+    //     && Object.keys(ticketType)?.length <= 2 && (!Object.keys(priority)?.length || Object.values(priority)[0] === '-')
+    //     && Object.keys(category)?.length <= 2 && ((!ownerId?.length && accountEdit === 4 && isAllAccount) || (ownerId[0]?.userId === Number(initOwnerId || userId)))
+    //     && followers?.length === accountManage?.length
+    //     && !message?.length && !files.length && !isUpdate
+    //   ) {
+    //     return false
+    //   }else if(isUpdate && compareArrays(valueInput.followers, ticketDetails.followers)
+    //     && !valueInput?.message?.length && !valueInput?.files?.length) {
+    //     return false
+    //   }
+    //   return true
+    // }, [valueInput])
+    const updateValueInput = value => {
+        setValueInput(prev => (Object.assign(Object.assign(Object.assign({}, prev), value), { isChanged: true })));
+    };
+    const handleOnchangeInput = e => {
+        const { name, value } = e.target;
+        updateValueInput({
+            [name]: value,
+        });
+    };
+    const fetchCreateTicket = params => {
+        setIsLoading(true);
+        Service.tickets.callApi
+            .createTicket(Object.assign(Object.assign({}, params), { networkId: Number(portalId) }), domainTicket, token, config, userId)
+            .then(res => {
+            setIsLoading(false);
+            if (res.code === 200) {
+                setIsSuccessCreated(true);
+                postCustomEvent(TICKET_CUSTOM_MESSAGE_KEY, {
+                    type: MESSAGE_TYPE.TICKET_CREATE_STATUS,
+                    value: true,
+                });
+                // showMessage();
+            }
+            else {
+                setIsSuccessCreated(false);
+                postCustomEvent(TICKET_CUSTOM_MESSAGE_KEY, {
+                    type: MESSAGE_TYPE.TICKET_CREATE_STATUS,
+                    value: false,
+                });
+                // showMessage('error', 'Save failed!');
+            }
+            handleCloseDrawer();
+        })
+            .catch(err => {
+            // console.log('err ===>', err)
+            setIsLoading(false);
+        });
+    };
+    const handleSubmit = () => {
+        const { title, ownerId, message } = valueInputRef.current;
+        if (!title || !ownerId.length || !message) {
+            setIsEmptyField(true);
+        }
+        else {
+            if (!errFile.isError) {
+                const params = formatParams(valueInputRef.current);
+                fetchCreateTicket(Object.assign(Object.assign({}, params), { submitterId: Number(userId) }));
+            }
+            // handleSendData(valueInput)
+        }
+    };
+    const handleOnchangeTitle = e => {
+        const { value: title } = e.target;
+        updateValueInput({
+            title,
+        });
+    };
+    useEffect(() => {
+        if (!openDrawer) {
+            setValueInput(initValueInput);
+        }
+    }, [openDrawer]);
+    useEffect(() => {
+        setDrawerHeader(React.createElement(DrawerHeader, null,
+            !!valueInput.title && (React.createElement(EditableName, { defaultValue: valueInput.title, onBlur: handleOnchangeTitle, readonly: isUpdate })),
+            React.createElement("div", { id: "header-journey-right", className: "right-content" }, !isUpdate && (React.createElement(Button, { type: "primary", onClick: handleSubmit }, "Save")))));
+    }, [valueInput && valueInput.title, isUpdate]);
+    useEffect(() => {
+        if (!isUpdate) {
+            const newFollowers = [];
+            let newOwnerIds = [];
+            if ((accountManage === null || accountManage === void 0 ? void 0 : accountManage.length) > 0 && listUsers) {
+                accountManage === null || accountManage === void 0 ? void 0 : accountManage.forEach(acc => {
+                    listUsers.forEach(user => {
+                        if (acc === user.userId) {
+                            newFollowers.push(user);
+                        }
+                    });
+                });
+            }
+            if ((!isAllAccount || accountEdit !== 4) &&
+                (listUsers === null || listUsers === void 0 ? void 0 : listUsers.length) > 0 &&
+                (initOwnerId || userId)) {
+                newOwnerIds = listUsers === null || listUsers === void 0 ? void 0 : listUsers.filter(user => user.userId === Number(initOwnerId || userId));
+            }
+            updateValueInput({ ownerId: newOwnerIds, followers: newFollowers });
+        }
+    }, [isUpdate, accountManage, listUsers, accountEdit]);
+    const getCustomFields = () => {
+        if (dataSelects && dataSelects.length)
+            return;
+        Service.tickets.callApi
+            .getCustomFields({}, domainTicket, token, config, userId, 'get-custom-fields')
+            .then(res => {
+            var _a, _b;
+            if (res.code === 200) {
+                setDataSelect((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.fields);
+                setDataSelectInput((_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.fields);
+            }
+        })
+            .catch(err => {
+            // console.log('err ===>', err)
+        });
+    };
+    const fetchUpdateComment = params => {
+        Service.tickets.callApi
+            .updateComment(params, domainTicket, token, config, userId, 'create-ticket-comment', ticketId)
+            .then(res => {
+            if (res.code === 200) {
+                fetchgetTicketComments(ticketId);
+                updateValueInput({ message: '', files: [] });
+                setTextValue('');
+                // handleCloseDrawer();
+            }
+        })
+            .finally(() => {
+            setIsLoading(false);
+        });
+    };
+    const fetchUpdateFollwers = params => {
+        setIsLoadingFollower(true);
+        Service.tickets.callApi
+            .updateFollowers(params, domainTicket, token, config, userId, ticketId)
+            .then(res => {
+            setIsLoadingFollower(false);
+            if (res.code === 200) {
+                // fetchgetTicketComments(ticketId)
+                // updateValueInput({message: ''})
+                // setTextValue('')
+            }
+        })
+            .catch(err => {
+            // console.log('err ===>', err)
+            setIsLoadingFollower(false);
+        });
+    };
+    useEffect(() => {
+        var _a;
+        if (((_a = Object.keys(ticketDetails)) === null || _a === void 0 ? void 0 : _a.length) &&
+            isUpdate &&
+            (listUsers === null || listUsers === void 0 ? void 0 : listUsers.length) &&
+            (dataSelects === null || dataSelects === void 0 ? void 0 : dataSelects.length)) {
+            const _b = formatDatarender(ticketDetails, dataSelects, listUsers), { category, feature, followers, ownerId, priority, ticketType, title, referenceUrl } = _b, rests = __rest(_b, ["category", "feature", "followers", "ownerId", "priority", "ticketType", "title", "referenceUrl"]);
+            if ((ownerId === null || ownerId === void 0 ? void 0 : ownerId.length) > 0) {
+                updateValueInput({
+                    category,
+                    feature,
+                    followers,
+                    ownerId,
+                    priority,
+                    ticketType,
+                    title,
+                    referenceUrl,
+                });
+            }
+        }
+    }, [ticketDetails, dataSelects, listUsers]);
+    useEffect(() => {
+        setIsLoading(true);
+        getCustomFields();
+        setTimeout(() => {
+            setIsLoading(false);
+        }, 1000);
+    }, []);
+    useEffect(() => {
+        if (!isUpdate && openDrawer) {
+            updateValueInput({
+                title: `Untitled Ticket#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`,
+            });
+        }
+    }, [isUpdate, openDrawer]);
+    const handleEditorChange = content => {
+        setTextValue(content);
+        updateValueInput({ message: content });
+        setIsLoadingUpload(content.includes('<img src="data:image/png;base64'));
+    };
+    const handleUpdateFollowers = arrFolowers => {
+        const params = {
+            followers: [],
+        };
+        if (arrFolowers === null || arrFolowers === void 0 ? void 0 : arrFolowers.length) {
+            params.followers = arrFolowers;
+        }
+        fetchUpdateFollwers(params);
+    };
+    const handleUpdateComment = () => {
+        var _a, _b, _c, _d, _e;
+        setIsLoading(true);
+        const params = {
+            followers: [],
+            submitterId: null,
+            ownerId: null,
+            attachments: [],
+            message: '',
+        };
+        if ((_a = valueInput === null || valueInput === void 0 ? void 0 : valueInput.followers) === null || _a === void 0 ? void 0 : _a.length) {
+            params.followers = formatAccountId(valueInput === null || valueInput === void 0 ? void 0 : valueInput.followers);
+        }
+        if (((_b = valueInput === null || valueInput === void 0 ? void 0 : valueInput.files) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+            params.attachments = (_c = valueInput === null || valueInput === void 0 ? void 0 : valueInput.files) === null || _c === void 0 ? void 0 : _c.map((file) => file.token);
+        }
+        params.submitterId = userId;
+        params.ownerId = Number((_d = valueInput === null || valueInput === void 0 ? void 0 : valueInput.ownerId[0]) === null || _d === void 0 ? void 0 : _d.userId);
+        params.message = valueInput === null || valueInput === void 0 ? void 0 : valueInput.message;
+        fetchUpdateComment(params);
+        handleUpdateFollowers((_e = valueInput === null || valueInput === void 0 ? void 0 : valueInput.followers) === null || _e === void 0 ? void 0 : _e.map((fol) => fol.userId));
+    };
+    const handleUploadFile = params => {
+        setIsLoading(true);
+        Service.tickets.callApi
+            .upload(params, domainTicket, token, config, userId, 'ticket')
+            .then(res => {
+            if (res.code === 200) {
+                updateValueInput({
+                    files: [...valueInput.files, res.data],
+                });
+            }
+        })
+            .finally(() => {
+            setIsLoading(false);
+        });
+    };
+    useEffect(() => {
+        const timeOut = setTimeout(() => {
+            if (isOpenToast.isOpen) {
+                setIsOpenToast(Object.assign(Object.assign({}, isOpenToast), { isOpen: false }));
+            }
+        }, 1000);
+        return () => {
+            clearTimeout(timeOut);
+        };
+    }, [isOpenToast]);
+    const handleOnchangeFile = e => {
+        var _a, _b;
+        const limitSize = 50 * 1024 * 1024;
+        const sizeFile = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.files[0]) === null || _b === void 0 ? void 0 : _b.size;
+        if (sizeFile >= limitSize) {
+            setErrFile({
+                isError: true,
+                message: '*Maximum upload file size: 50MB',
+            });
+        }
+        else {
+            const formData = new FormData();
+            formData.append('file', e.target.files[0]);
+            const params = {
+                data: formData,
+            };
+            setErrFile({
+                isError: false,
+                message: '',
+            });
+            handleUploadFile(params);
+        }
+    };
+    const handleRemoveFile = token => {
+        let newListFile = valueInput.files;
+        newListFile = newListFile.filter((list) => (list === null || list === void 0 ? void 0 : list.token) !== token);
+        updateValueInput({ files: newListFile });
+    };
+    const handleCloseSnackbar = () => {
+        setIsOpenToast(Object.assign(Object.assign({}, isOpenToast), { isOpen: false }));
+    };
+    return (React.createElement("div", { style: { height: '100%' } },
+        React.createElement(Spin, { style: { height: '100vh' }, spinning: isLoading ||
+                isLoadingDetails ||
+                isLoadingDataSouce ||
+                isLoadingFollower ||
+                isLoadingSelectedAccount },
+            React.createElement(WrapperContent, { style: { height: '100%' } },
+                React.createElement(WrapperLeftContent, null,
+                    React.createElement(WrapperContentInput, { style: { alignItems: 'flex-start' } },
+                        React.createElement(WrapperLable, null,
+                            "Owner",
+                            React.createElement("span", { style: { color: '#ff0000' } }, "*")),
+                        React.createElement("div", null,
+                            React.createElement(SelectAccount, { type: "default", initData: ((valueInput === null || valueInput === void 0 ? void 0 : valueInput.ownerId) || []).map((item) => item.userId), nameKey: "userName", userIdKey: "userId", users: listUsers, isViewMode: isUpdate || !isAllAccount || accountEdit !== 4, onChange: (_, users) => updateValueInput({ ownerId: users }), onlyOne: true }),
+                            isEmptyField && !((_a = valueInput === null || valueInput === void 0 ? void 0 : valueInput.ownerId) === null || _a === void 0 ? void 0 : _a.length) && (React.createElement("div", { className: "error-message" }, "*This field can't be empty")))),
+                    React.createElement(WrapperContentInput, { style: { marginTop: '15px', alignItems: 'flex-start' } },
+                        React.createElement(WrapperLable, null, "Follower(s)"),
+                        React.createElement(SelectAccount, { type: "default", initData: [
+                                ...accountManage,
+                                ...((valueInput === null || valueInput === void 0 ? void 0 : valueInput.followers) || []).map((item) => item.userId),
+                            ], nameKey: "userName", userIdKey: "userId", users: listUsers, disabledAccount: accountManage, onChange: (_, followers) => updateValueInput({ followers }) })), dataSelects === null || dataSelects === void 0 ? void 0 :
+                    dataSelects.map((data) => {
+                        var _a, _b, _c;
+                        return (
+                        // eslint-disable-next-line react/jsx-key
+                        React.createElement(WrapperContentInput, { key: data.id, style: { marginTop: '15px' } },
+                            React.createElement(WrapperLable, null, data.title),
+                            React.createElement("div", { style: { flex: 1 } }, isUpdate ? (React.createElement(WrapperTextEdit, null, !((_b = (_a = valueInput[data === null || data === void 0 ? void 0 : data.value]) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b.length)
+                                ? '--'
+                                : (_c = valueInput[data === null || data === void 0 ? void 0 : data.value]) === null || _c === void 0 ? void 0 : _c.name)) : (React.createElement(DropdownComponent, { data: data.field_options, setValueInput: updateValueInput, valueInput: valueInput, type: data.value, isUpdate: isUpdate, title: data.title })))));
+                    }),
+                    React.createElement(WrapperContentInput, { style: { marginTop: '15px' } },
+                        React.createElement(WrapperLable, { htmlFor: "referenceUrl" }, "Reference URL"),
+                        isUpdate ? (valueInput.referenceUrl ? (React.createElement(Tooltip, { title: valueInput.referenceUrl, placement: "top" },
+                            React.createElement(WrapperTextEdit, { color: "#005fb8", href: valueInput.referenceUrl, target: "_blank" }, valueInput.referenceUrl))) : (React.createElement(WrapperTextEdit, { color: "#005fb8", href: valueInput.referenceUrl, target: "_blank" }, valueInput.referenceUrl))) : (React.createElement(WrapperTextInput, { placeholder: "Reference URL", id: "referenceUrl", 
+                            // width="300px"
+                            onChange: handleOnchangeInput, name: "referenceUrl", value: valueInput.referenceUrl })))),
+                React.createElement(WrapperRightContent, null,
+                    React.createElement(WrapperEditor, null,
+                        React.createElement("div", null,
+                            React.createElement(Editor, { apiKey: apiKey, 
+                                // placeholder="Enter your comment..."
+                                value: textValue, init: {
+                                    height: 200,
+                                    width: '100%',
+                                    max_height: 800,
+                                    max_width: 800,
+                                    menubar: false,
+                                    plugins: [
+                                        'advlist autolink lists link tinydrive image emoticons charmap print preview anchor',
+                                        'searchreplace visualblocks code fullscreen',
+                                        'insertdatetime media paste code help wordcount ', //
+                                    ],
+                                    toolbar: 'formatselect | bold italic underline strikethrough code | image emoticons | \
+                                  forecolor backcolor preview link |\
+                                  alignleft aligncenter alignright alignjustify outdent indent |\
+                                  numlist bullist checklist undo redo',
+                                    tinydrive_token_provider: `//${domain}/hub/thirdparty-services/v2.0/tinymce?portalId=${portalId}&token=${token}`,
+                                    skin: 'snow',
+                                    toolbar_mode: 'sliding',
+                                    content_css: false,
+                                    branding: false,
+                                    resize: false,
+                                    statusbar: false,
+                                    setup(editor) {
+                                        editor.on('init', e => {
+                                            editor.getBody().style.fontSize = '12px';
+                                        });
+                                    },
+                                    placeholder: 'Enter your comment...',
+                                    entity_encoding: 'raw',
+                                    paste_data_images: true,
+                                }, 
+                                // disabled={!!props.disabled}
+                                // outputFormat='text'
+                                onEditorChange: handleEditorChange }),
+                            React.createElement("div", null,
+                                ((_b = valueInput.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && (React.createElement(WrapperLinkItemFiles, null, (_c = valueInput.files) === null || _c === void 0 ? void 0 : _c.map((file) => (React.createElement("div", { className: "file-item", key: file === null || file === void 0 ? void 0 : file.token },
+                                    React.createElement("div", { className: "file-name-group" },
+                                        React.createElement(Icon, { className: "file-icon", type: "icon-ants-attachment" }),
+                                        React.createElement(Tooltip, { title: file === null || file === void 0 ? void 0 : file.file_name },
+                                            React.createElement("span", { className: "file-name" }, file === null || file === void 0 ? void 0 : file.file_name))),
+                                    React.createElement(Icon, { onClick: () => handleRemoveFile(file === null || file === void 0 ? void 0 : file.token), className: "remove-btn", type: "icon-ants-remove-slim" })))))),
+                                React.createElement(WrapperIconEditor, { borderTop: !!((_d = valueInput.files) === null || _d === void 0 ? void 0 : _d.length) },
+                                    React.createElement(WrapperInputFile, null,
+                                        React.createElement("label", { htmlFor: "fileImage", className: "upload-wrapper-label" },
+                                            React.createElement(Icon, { type: "icon-ants-attachment", className: "upload-icon" })),
+                                        React.createElement("input", { type: "file", style: { position: 'absolute', top: 0, right: 0, display: 'none' }, name: "fileImage", id: "fileImage", onChange: handleOnchangeFile })),
+                                    isUpdate && (React.createElement(Button, { type: "primary", disabled: !handleValidateContent(textValue) || isLoadingUpload, className: "reply-btn", style: {
+                                            background: `${!handleValidateContent(textValue) || isLoadingUpload
+                                                ? '#ccc'
+                                                : '#1f5fac'}`,
+                                        }, onClick: handleUpdateComment, loading: isLoadingUpload }, "Reply"))))),
+                        errFile.isError ? (React.createElement("div", { className: "error-message" }, errFile.message)) : (isEmptyField &&
+                            !(valueInput === null || valueInput === void 0 ? void 0 : valueInput.message) && (React.createElement("div", { className: "error-message" }, "*This field can't be empty")))),
+                    isUpdate && (React.createElement(Spin, { spinning: isLoadingComment },
+                        React.createElement(WrapperMessageContent, null, listComment === null || listComment === void 0 ? void 0 : listComment.map(comment => (React.createElement(MessageComponent, { key: comment === null || comment === void 0 ? void 0 : comment.id, toUser: comment === null || comment === void 0 ? void 0 : comment.toUser, fromUser: comment === null || comment === void 0 ? void 0 : comment.fromUser, followers: comment === null || comment === void 0 ? void 0 : comment.followers, 
+                            // mailFollower={comment?.mailFollower}
+                            message: comment === null || comment === void 0 ? void 0 : comment.message, date: comment === null || comment === void 0 ? void 0 : comment.createdDate, attachments: comment === null || comment === void 0 ? void 0 : comment.attachments, timeZone: timeZone })))))))))));
+};
+export default Content;

package/es/components/organism/TicketEditor/Service.d.ts

@@ -0,0 +1,49 @@
+declare const API: {
+    lookupInfo: {
+        callApi: {
+            c_user_id: (params: any, domain: any, token: any, config: any, userId: any) => Promise<{
+                code: number;
+                codeMessage: any;
+                messageAPI: any;
+                data: any;
+            } | {
+                code: number;
+                codeMessage: string;
+                data: any;
+                messageAPI?: undefined;
+            }>;
+        };
+    };
+    tickets: {
+        callApi: {
+            createTicket: (params: any, domain: any, token: any, config: any, userId: any) => Promise<{
+                code: number;
+                codeMessage: any;
+                messageAPI: any;
+                data: any;
+            } | {
+                code: number;
+                codeMessage: string;
+                data: any;
+                messageAPI?: undefined;
+            }>;
+            getCustomFields: (params: any, domain: any, token: any, config: any, userId: any, type: any) => Promise<any>;
+            getDetailsTicket: (params: any, domain: any, token: any, config: any, userId: any, ticketId: any, type?: string) => Promise<any>;
+            getListComment: (params: any, domain: any, token: any, config: any, userId: any, type: any, ticketId: any) => Promise<any>;
+            updateComment: (params: any, domain: any, token: any, config: any, userId: any, type: any, ticketId: any) => Promise<any>;
+            updateFollowers: (params: any, domain: any, token: any, config: any, userId: any, ticketId: any) => Promise<any>;
+            upload: (params: any, domain: any, token: any, config: any, userId: any, type: any) => Promise<any>;
+        };
+    };
+    accounts: {
+        callApi: {
+            getAccountManage: (params: any, domain: any, token: any, config: any, userId: any, type: any) => Promise<any>;
+        };
+    };
+    permission: {
+        callApi: {
+            getList: (params: any, domain: any, token: any, config: any, userId: any, type: any, ownerId: any) => Promise<any>;
+        };
+    };
+};
+export default API;

package/es/components/organism/TicketEditor/Service.js

@@ -0,0 +1,58 @@
+import { callApiWithAuth, getEntriesV2 } from './util';
+const API = {
+    lookupInfo: {
+        callApi: {
+            c_user_id: (params, domain, token, config, userId) => callApiWithAuth(`hub/toolkit/v2.0/selector/users/listing`, 'GET', null, domain, config, token, userId).then(res => {
+                const data = getEntriesV2(res, 0);
+                // dataBackup[params.objectName] = data;
+                return data;
+            }),
+        },
+    },
+    tickets: {
+        callApi: {
+            createTicket: (params, domain, token, config, userId) => callApiWithAuth(`api/ticket/index`, 'POST', Object.assign({}, params), domain, config, token, userId, true).then(res => {
+                const data = getEntriesV2(res, 0);
+                // dataBackup[params.objectName] = data;
+                return data;
+            }),
+            getCustomFields: (params, domain, token, config, userId, type) => callApiWithAuth(`api/ticket/index`, 'get', Object.assign({}, params), domain, config, token, userId, true, type).then(res => 
+            // const data = getEntriesV2(res, 0);
+            // dataBackup[params.objectName] = data;
+            res.data),
+            getDetailsTicket: (params, domain, token, config, userId, ticketId, type = '') => callApiWithAuth(`api/ticket/index/${ticketId}`, 'get', Object.assign({}, params), domain, config, token, userId, true, type).then(res => 
+            // const data = getEntriesV2(res, 0);
+            // dataBackup[params.objectName] = data;
+            res.data),
+            getListComment: (params, domain, token, config, userId, type, ticketId) => callApiWithAuth(`api/ticket/index/${ticketId}`, 'get', Object.assign({}, params), domain, config, token, userId, true, type).then(res => 
+            // const data = getEntriesV2(res, 0);
+            // dataBackup[params.objectName] = data;
+            res.data),
+            updateComment: (params, domain, token, config, userId, type, ticketId) => callApiWithAuth(`api/ticket/index/${ticketId}`, 'put', Object.assign({}, params), domain, config, token, userId, true, type).then(res => 
+            // const data = getEntriesV2(res, 0);
+            // dataBackup[params.objectName] = data;
+            res.data),
+            updateFollowers: (params, domain, token, config, userId, ticketId) => callApiWithAuth(`api/ticket/index/${ticketId}`, 'put', Object.assign({}, params), domain, config, token, userId, true).then(res => 
+            // const data = getEntriesV2(res, 0);
+            // dataBackup[params.objectName] = data;
+            res.data),
+            upload: (params, domain, token, config, userId, type) => callApiWithAuth(`api/upload/index`, 'post', params.data, domain, config, token, userId, true, type).then(res => 
+            // const data = getEntriesV2(res, 0);
+            // dataBackup[params.objectName] = data;
+            res.data),
+        },
+    },
+    accounts: {
+        callApi: {
+            getAccountManage: (params, domain, token, config, userId, type) => callApiWithAuth(`api/network/index/${config.api_pid}`, 'GET', Object.assign({}, params), domain, config, token, userId, false, type, true).then(res => res.data),
+        },
+    },
+    permission: {
+        callApi: {
+            getList: (params, domain, token, config, userId, type, ownerId) => 
+            // console.log({params, domain, token, config,userId, type})
+            callApiWithAuth(`api/privilege/index`, 'GET', Object.assign(Object.assign({}, params), { ownerId }), domain, config, token, userId, false, type, false, true).then(res => res.data),
+        },
+    },
+};
+export default API;

package/es/components/organism/TicketEditor/components/DropdownComponent.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare const DropdownComponent: ({ data, setValueInput, valueInput, type, isUpdate, title }: {
+    data: any;
+    setValueInput: any;
+    valueInput: any;
+    type: any;
+    isUpdate: any;
+    title: any;
+}) => React.JSX.Element;
+export default DropdownComponent;

package/es/components/organism/TicketEditor/components/DropdownComponent.js

@@ -0,0 +1,59 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Select } from '@antscorp/antsomi-ui/es/components';
+import { getObjectPropSafely } from '../util';
+const EMPTY_VALUE = '____';
+const DropdownComponent = ({ data, setValueInput, valueInput, type, isUpdate, title }) => {
+    const [dropDownOpen, setDropdownOpen] = useState(false);
+    const [labelSelected, setLabelSelected] = useState('-');
+    const dropDonwRef = useRef();
+    const handleOnchangeSelect = (item, type) => {
+        setLabelSelected(item.name);
+        setDropdownOpen(false);
+        setValueInput(Object.assign(Object.assign({}, valueInput), { [type]: Object.assign(Object.assign({}, item), { value: item.value === EMPTY_VALUE ? '' : item.value }) }));
+    };
+    const renderData = useMemo(() => (!isUpdate ? [{ name: '-', value: EMPTY_VALUE }, ...data] : data), [data, isUpdate]);
+    const handleHideDropdown = event => {
+        if (event.key === 'Escape') {
+            setDropdownOpen(false);
+        }
+    };
+    const handleClickOutside = event => {
+        if (dropDonwRef.current && !dropDonwRef.current.contains(event.target)) {
+            setDropdownOpen(false);
+        }
+    };
+    useEffect(() => {
+        document.addEventListener('keydown', handleHideDropdown, true);
+        document.addEventListener('click', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('keydown', handleHideDropdown, true);
+            document.removeEventListener('click', handleClickOutside, true);
+        };
+    });
+    return (React.createElement(Select, { value: getObjectPropSafely(() => valueInput[type].value) || EMPTY_VALUE, options: (renderData === null || renderData === void 0 ? void 0 : renderData.map(item => (Object.assign(Object.assign({}, item), { label: item.name })))) || [], onChange: (_, item) => handleOnchangeSelect(item, type) })
+    // <WrapperDropdown ref={dropDonwRef}>
+    //   <Tooltip title={title} placement="top" arrow>
+    //     <WrapperToggleDropdown
+    //       className="wrapper-select-options"
+    //       onClick={() => setDropdownOpen(!dropDownOpen)}
+    //     >
+    //       <WrapperLabelDropdown>{labelSelected}</WrapperLabelDropdown>
+    //       <Icon
+    //         type="icon-ants-expand"
+    //         style={{ height: '16px', width: '16px', color: '#7f7f7f' }}
+    //       />
+    //     </WrapperToggleDropdown>
+    //   </Tooltip>
+    //   {dropDownOpen && (
+    //     <WrapperDropdownMenu>
+    //       {data?.map(item => (
+    //         <WrapperDropdownItem key={item.value} onClick={() => handleOnchangeSelect(item, type)}>
+    //           {item.name}
+    //         </WrapperDropdownItem>
+    //       ))}
+    //     </WrapperDropdownMenu>
+    //   )}
+    // </WrapperDropdown>
+    );
+};
+export default DropdownComponent;

package/es/components/organism/TicketEditor/components/Message.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Message: (props: any) => false | React.JSX.Element;
+export default Message;

package/es/components/organism/TicketEditor/components/Message.js

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react';
+import { WrapperMessage } from '../styled';
+import { Icon } from '@antscorp/antsomi-ui/es/components';
+const Message = props => {
+    const { isOpen = false, deplay = 1000, message = 'Success', subtitle = 'Created', type = 'success', } = props;
+    const [isOpenState, setIsOpenState] = useState(true);
+    useEffect(() => {
+        if (isOpen !== isOpenState) {
+            setIsOpenState(isOpen);
+        }
+        if (isOpen) {
+            const timeOut = setTimeout(() => {
+                setIsOpenState(false);
+            }, deplay);
+            return () => {
+                clearTimeout(timeOut);
+            };
+        }
+    }, [isOpen]);
+    return (isOpenState && (React.createElement(WrapperMessage, { className: "container-content" },
+        React.createElement("div", { className: "floating", style: { color: '#008634' } },
+            React.createElement("span", { style: {
+                    background: `${type === 'success' ? '#008634' : 'red'}`,
+                    borderRadius: '50%',
+                    height: '18px',
+                    width: '18px',
+                    textAlign: 'center',
+                    marginRight: '16px',
+                    lineHeight: '22px',
+                } },
+                React.createElement("span", { className: "icon-check" },
+                    React.createElement(Icon, { className: "check-icon", type: "icon-ants-check" }))),
+            React.createElement("div", null,
+                React.createElement("span", { className: "alert__title" }, message),
+                React.createElement("span", { className: "secondary__title" }, subtitle)),
+            React.createElement("div", { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setIsOpenState(false) },
+                React.createElement(Icon, { type: "icon-ants-close" }))))));
+};
+export default Message;