\r\n
\r\n \r\n {state.User && (match ? \r\n
history.push('/home')}>
\r\n : \r\n screen?.width > MOBILE_SIZE ?
:
\r\n )}\r\n
\r\n {state.User ? \r\n screen?.width > MOBILE_SIZE ?
{state.User.userName}
: \r\n
\r\n
setIsUserNameShowed(!isUserNameShowed)}/>\r\n
{state.User.userName}
\r\n
\r\n : null\r\n }\r\n
\r\n
\r\n )\r\n}\r\n","import React, { useState, useEffect, useCallback } from \"react\";\r\nimport \"./style.scss\";\r\n\r\nexport const Popup = ({ children, isOpen, onChange = ()=>null, title, subtitle, showSuccess, className }) => {\r\n \r\n const [_showSuccess, setshowSuccess] = useState(false);\r\n\r\n const handleFinish = useCallback(() => {\r\n setshowSuccess(true);\r\n\r\n setTimeout(() => {\r\n onChange(false);\r\n setshowSuccess(false);\r\n }, 2000);\r\n\r\n // eslint-disable-next-line\r\n }, []);\r\n\r\n useEffect(() => {\r\n \r\n if(showSuccess === undefined) return;\r\n\r\n\r\n if(showSuccess === true ){\r\n handleFinish();\r\n }\r\n \r\n\r\n }, [showSuccess, handleFinish])\r\n\r\n if (!isOpen) return null;\r\n\r\n\r\n return (_showSuccess ? \r\n
\r\n
\r\n
\r\n
{title}
\r\n
{subtitle}
\r\n
\r\n
\r\n : \r\n
\r\n
\r\n
onChange(false)}>
\r\n {children && React.cloneElement(children, { Finish: handleFinish })}\r\n
\r\n
\r\n );\r\n \r\n \r\n};\r\n","import React from 'react'\r\nimport classNames from 'classnames';\r\nimport './style.scss';\r\n\r\n\r\n\r\nexport const Error = ({className,show, children}) => {\r\n\r\n const classes = classNames('Error',className, {show})\r\n\r\n return (\r\n
\r\n {children}\r\n
\r\n )\r\n}\r\n","import { Error } from 'components/Error';\r\nimport React, {useRef, useState, useEffect} from 'react'\r\nimport ReactQuill, {Quill} from \"react-quill\";\r\nimport { usePrevious } from 'service/utils';\r\n\r\n\r\nimport './style.scss';\r\n\r\nconst DirectionAttribute = Quill.import('attributors/attribute/direction');\r\nQuill.register(DirectionAttribute, true);\r\nconst AlignClass = Quill.import('attributors/class/align');\r\nQuill.register(AlignClass, true);\r\nconst BackgroundClass = Quill.import('attributors/class/background');\r\nQuill.register(BackgroundClass, true);\r\nconst ColorClass = Quill.import('attributors/class/color');\r\nQuill.register(ColorClass, true);\r\nconst FontClass = Quill.import('attributors/class/font');\r\nQuill.register(FontClass, true);\r\nconst SizeClass = Quill.import('attributors/class/size');\r\nQuill.register(SizeClass, true);\r\nconst SizeStyle = Quill.import('attributors/style/size');\r\nQuill.register(SizeStyle, true);\r\n\r\n\r\n\r\nexport const TextEditor = ({tabIndex = 0,subtitle = '' ,title = '',text = '', onTextChange,files, onFileChange, fileExt = []}) => {\r\n\r\n const uploaderRef = useRef(undefined);\r\n const QuilRef = useRef(undefined);\r\n const [_files, setFiles] = useState(files || []);\r\n const [isValidFile, setIsValidFile] = useState(true);\r\n\r\n const handleTextChange = (value) => {\r\n const valueHTML = document.createElement('div');\r\n valueHTML.innerHTML = value\r\n const filteredValue = valueHTML.innerText ? value : '';\r\n onTextChange(filteredValue);\r\n \r\n }\r\n\r\n\r\n const fileChanged = (e) => {\r\n\r\n const valid = Array.from(e.target.files).some(file => fileExt.some(ext=> file.name.toLowerCase().endsWith(ext.toLowerCase())));\r\n //file.type.includes(ext.replace('.', '')) if need to check types too please ask for types array to be in fileExt\r\n \r\n setIsValidFile(valid);\r\n\r\n if(!valid) return;\r\n\r\n if(files) setFiles([...files, ...Array.from(e.target.files)]);\r\n else setFiles([..._files, ...Array.from(e.target.files)]);\r\n\r\n }\r\n\r\n const handleFileRemove = (index) => {\r\n setFiles(_files.filter( (_,i) => i !== index));\r\n }\r\n\r\n useEffect(() => {\r\n onFileChange(_files);\r\n // eslint-disable-next-line\r\n }, [_files]) \r\n\r\n\r\n const loaded = useRef(false);\r\n useEffect(() => {\r\n FixRTL();\r\n },[text])\r\n\r\n useEffect(() => {\r\n loaded.current = true;\r\n\r\n document.querySelector('.ql-editor').addEventListener('paste' , e => {\r\n const image = e.clipboardData.items[0];\r\n if(image.type.includes('image') && image.kind === 'file'){\r\n e.preventDefault();\r\n const file = image.getAsFile();\r\n if(files) setFiles([...files, file]);\r\n else setFiles([..._files, file]);\r\n }\r\n })\r\n }, [])\r\n\r\nconst FixRTL = () => {\r\n if(loaded.current&&!text && QuilRef.current) {\r\n const editor = QuilRef.current.editor\r\n editor.setText('');\r\n editor.format('direction', 'rtl');\r\n editor.format('align', 'right');\r\n }\r\n}\r\n\r\n\r\n\r\nconst fileExts = fileExt.join();\r\n return (\r\n
\r\n
\r\n {title}\r\n
\r\n
\r\n
{subtitle}
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n\r\n
\r\n {(files || _files).map((file, i) => \r\n
\r\n {file.name}\r\n
handleFileRemove(i)}>X
\r\n
)}\r\n
\r\n
סוג קובץ זה לא נתמך\r\n \r\n
\r\n )\r\n}\r\n\r\n\r\nTextEditor.modules = {\r\n toolbar: [\r\n [{ font: [] }],\r\n [{ direction: \"rtl\" }],\r\n [{ align: [] }],\r\n [\"bold\", \"italic\", \"underline\"],\r\n [{ list: \"ordered\" }, { list: \"bullet\" }],\r\n ],\r\n clipboard: {\r\n // toggle to add extra line breaks when pasting HTML:\r\n matchVisual: false,\r\n },\r\n };\r\n /*\r\n * Quill editor formats\r\n * See https://quilljs.com/docs/formats/\r\n */\r\n TextEditor.formats = [\r\n \"font\",\r\n \"direction\",\r\n \"align\",\r\n \"bold\",\r\n \"italic\",\r\n \"underline\",\r\n \"list\",\r\n \"bullet\",\r\n ];\r\n ","import React, { useState, forwardRef, useImperativeHandle } from 'react'\r\nimport classNames from 'classnames';\r\nimport './style.scss';\r\n\r\nexport const AsyncButton = forwardRef( (props, ref) => {\r\n\r\n const [loading, setLoading] = useState(false)\r\n const {children, onClick, className = ''} = props;\r\n\r\n\r\n useImperativeHandle(ref, () => ({\r\n Click(){\r\n handleAsyncClick();\r\n }\r\n }))\r\n\r\n const handleAsyncClick = async () =>{\r\n if(loading) return;\r\n try {\r\n setLoading(true);\r\n await onClick();\r\n } catch (error) {\r\n \r\n }\r\n setLoading(false);\r\n }\r\n\r\n\r\n const classes = classNames(`button AsyncButton ${className}`,{loading})\r\n return (\r\n
\r\n )\r\n})\r\n","import React, {useContext, useRef, useState, useEffect } from \"react\";\r\nimport {TextEditor} from 'components/TextEditor';\r\nimport { AppContext } from \"context\";\r\nimport {Actions} from 'context/reducer/types';\r\nimport { AsyncButton } from \"components/AsyncButton\";\r\nimport Http from \"service/http\";\r\nimport { Error } from \"components/Error\";\r\n\r\nimport \"./style.scss\";\r\n\r\n\r\n\r\nexport const NewCall = ({ Finish }) => {\r\n\r\n const {state, dispatch} = useContext(AppContext);\r\n const [text, setText] = useState(\"\")\r\n const [files, setFiles] = useState([])\r\n const [types, setTypes] = useState([])\r\n const CUSTREF = useRef(undefined);\r\n const TOPICREF = useRef(undefined);\r\n const TYPEREF = useRef(undefined);\r\n const [failedNewPost, setfailedNewPost] = useState(false);\r\n const [submitted, setSubmitted] = useState(false);\r\n\r\n const Save = async() =>{\r\n try {\r\n setSubmitted(true);\r\n if(!TOPICREF.current.value || !text) return;\r\n setSubmitted(false);\r\n\r\n const {CUSTNAME, NAME} = state.User?.userData[CUSTREF.current.selectedIndex];\r\n const {CODE: CALLTYPECODE} = state.Types[TYPEREF.current.selectedIndex];\r\n setfailedNewPost(false);\r\n const call = await Http.InserNewServiceCall(\r\n {\r\n CUSTNAME,\r\n CALLTYPECODE,\r\n NAME,\r\n EDPJ_QTEXT: TOPICREF.current.value\r\n })\r\n await Http.UpdateText({id: call.DOCNO, text})\r\n if(files.length !== 0){\r\n await Http.UpdatFile({id: call.DOCNO, files});\r\n }\r\n dispatch({type: Actions.AddServiceCall, payload: {state: call}})\r\n setText('')\r\n Finish();\r\n\r\n } catch (error) {\r\n console.error(error);\r\n setfailedNewPost(true);\r\n }\r\n \r\n \r\n \r\n }\r\n \r\n const handleFiles = (files) => {\r\n setFiles(files);\r\n }\r\n\r\n const handleText = (text) => {\r\n setText(text);\r\n }\r\n\r\n\r\n\r\n const GetTypes = async() => {\r\n try {\r\n const {CUSTNAME} = state.User?.userData[CUSTREF.current.selectedIndex];\r\n if(CUSTNAME){\r\n const types_data = await Http.GetAllCallTypesById(CUSTNAME);\r\n setTypes(types_data);\r\n }\r\n } catch (error) {\r\n console.error(error);\r\n }\r\n }\r\n\r\n\r\n useEffect(() => {\r\n GetTypes()\r\n\r\n Array.from(document.querySelectorAll('.ql-formats button')).forEach(item=>item.setAttribute('tabindex', 1))\r\n Array.from(document.querySelectorAll('.ql-picker-label')).forEach(item=>item.setAttribute('tabindex', 1))\r\n document.querySelector('.ql-picker-label').setAttribute('tabindex', 1)\r\n document.querySelector('pre.ql-container').setAttribute('tabindex', -1)\r\n\r\n }, []);\r\n \r\n\r\n return (\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\n
שדה זה חובה\r\n\r\n
שליחה\r\n
שגיאת מערכת אנא נסה שוב\r\n\r\n
\r\n );\r\n\r\n};\r\n","import React, { useState,forwardRef, useImperativeHandle } from \"react\";\r\nimport ReactPaginate from 'react-paginate';\r\nimport {Link} from 'react-router-dom';\r\nimport moment from 'moment';\r\nimport * as FileSaver from 'file-saver';\r\nimport * as XLSX from 'xlsx';\r\nimport './style.scss';\r\n\r\n\r\n\r\nconst maxItemsOptions = [6,10,20,50];\r\nexport const Table = forwardRef((props, ref) => {\r\n\r\n const {calls, onReachedEnd,loading = false} = props;\r\n const [maxItems, setMaxItems] = useState(6);\r\n const [currentPage, setCurrentPage] = useState(0);\r\n const handlePageClick = (data) => {\r\n setCurrentPage(data.selected);\r\n const lastPage = Math.ceil(calls.length / maxItems);\r\n if(lastPage <= data.selected + 1) onReachedEnd();\r\n }\r\n\r\n\r\n\r\n useImperativeHandle(ref, () => ({\r\n\r\n ResetPage() {\r\n setCurrentPage(0);\r\n }\r\n\r\n }));\r\n\r\n\r\n\r\n \r\n const exportToCSV = () => {\r\n\r\n const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';\r\n const fileExtension = '.xlsx';\r\n\r\n\r\n const ws = XLSX.utils.aoa_to_sheet ([\r\n [ \"מספר קריאה\", \"נושא\", \"נפתח על ידי\" , \"תאריך פתיחה\" , \"שם הלקוח\" , \"סוג קריאה\" , \"סטטוס\", \"לטיפול\" ],\r\n ...calls.map(call => [call.DOCNO, call.EDPJ_QTEXT, call.NAME, moment(call.STATUSDATE).format('DD.MM.YYYY'), call.CDES, call.ECODE, call.CALLSTATUSCODE, call.TECHNICIANLOGIN])\r\n ]\r\n );\r\n const wb = { Sheets: { 'data': ws }, SheetNames: ['data'] };\r\n const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });\r\n const data = new Blob([excelBuffer], {type: fileType});\r\n FileSaver.saveAs(data, `table_export${moment().format('DD.MM.YYYY')}${fileExtension}`);\r\n}\r\n\r\n\r\n const startIndex = currentPage * maxItems;\r\n return (\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\n שם הלקוח \r\n | \r\n \r\n סוג קריאה \r\n | \r\n \r\n סטטוס \r\n | \r\n
\r\n \r\n \r\n {calls.slice(startIndex, startIndex + maxItems).map((call) => (\r\n \r\n | {call.DOCNO} | \r\n {call.EDPJ_QTEXT} | \r\n {call.NAME} | \r\n {moment(call.STATUSDATE).format('DD.MM.YYYY')} | \r\n {call.CDES} | \r\n {call.ECODE} | \r\n {call.CALLSTATUSCODE} | \r\n
\r\n ))}\r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n {loading &&
}\r\n
>\"}\r\n nextLabel={\"<<\"}\r\n breakLabel={\"\"}\r\n breakClassName={\"break-me\"}\r\n pageCount={Math.ceil(calls.length / maxItems)}\r\n marginPagesDisplayed={0}\r\n pageRangeDisplayed={4}\r\n onPageChange={handlePageClick}\r\n containerClassName={\"pagination\"}\r\n subContainerClassName={\"pages pagination\"}\r\n activeClassName={\"active\"}\r\n forcePage={currentPage}\r\n />\r\n\r\n \r\n \r\n
\r\n );\r\n});\r\n","import React, {useState} from 'react'\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { Link } from 'react-router-dom';\r\nimport './style.scss';\r\n\r\nexport const Card = ({header = [], body = [],call, id, button = null}) => {\r\n\r\n const [isOpen, setIsOpen] = useState(false)\r\n\r\n const classes = classNames('Card' , {open: isOpen})\r\n return (\r\n
\r\n
setIsOpen(!isOpen)}>\r\n {header.map(item => \r\n
\r\n
\r\n {item.key}\r\n
\r\n
\r\n {item.value}\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 {body.map(item => \r\n
\r\n
\r\n {item.key}\r\n
\r\n
\r\n {item.value}\r\n
\r\n
\r\n )}\r\n\r\n {button ? button : \r\n
\r\n }\r\n
\r\n
\r\n )\r\n}\r\n\r\n\r\nCard.propTypes = {\r\n header: PropTypes.arrayOf(PropTypes.shape({\r\n key: PropTypes.string,\r\n value: PropTypes.string | PropTypes.element\r\n })),\r\n body: PropTypes.arrayOf(PropTypes.shape({\r\n key: PropTypes.string,\r\n value: PropTypes.string | PropTypes.element\r\n })),\r\n id: PropTypes.string,\r\n call: PropTypes.object,\r\n button: PropTypes.element\r\n}","import React, {useState, useContext, useEffect, useCallback, useRef} from \"react\";\r\nimport { Popup } from \"components/Popup\";\r\nimport { NewCall } from \"components/NewCall\";\r\nimport { Table } from \"components/Table\";\r\nimport {AppContext} from 'context';\r\nimport {Actions} from 'context/reducer/types';\r\nimport http from 'service/http';\r\nimport classNames from 'classnames';\r\nimport {useScreenSize, TABLET_SIZE} from 'service/utils';\r\nimport { Card } from \"components/Card\";\r\nimport moment from 'moment';\r\nimport { Link } from \"react-router-dom\";\r\nimport { AsyncButton } from \"components/AsyncButton\";\r\nimport { SingleDatePicker } from 'react-dates';\r\n\r\nimport 'react-dates/initialize';\r\nimport \"./style.scss\";\r\n\r\n\r\nexport const Home = () => {\r\n\r\n\r\n const {state , dispatch} = useContext(AppContext);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [isFilterOpen, setIsFilterOpen] = useState(false);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const DOCNO = useRef(undefined);\r\n const EDPJ_QTEXT = useRef(undefined);\r\n const NAME = useRef(undefined);\r\n const CUSTNAME = useRef(undefined);\r\n const CALLTYPECODE = useRef(undefined);\r\n const buttonRef = useRef();\r\n const screen = useScreenSize();\r\n const [searchDate, onSearchDate] = useState(null);\r\n const [focus,setFocus] = useState(false);\r\n const [searched,setSearched] = useState(false);\r\n const [fetching,setFetching] = useState(false);\r\n\r\n const TableRef = useRef(undefined)\r\n\r\n\r\n\r\n const PopupChange = (newState) => {\r\n setIsOpen(newState);\r\n }\r\n\r\n\r\n const handleEnter = (e) => {\r\n if(e.keyCode === 13 && buttonRef.current ){\r\n buttonRef.current.Click();\r\n } \r\n}\r\n\r\n\r\n const GetServices = useCallback(async() => {\r\n if(isLoading) return;\r\n \r\n try {\r\n setIsLoading(true);\r\n const calls = await http.GetAllServiceCalls();\r\n dispatch({type: Actions.SetServiceCalls, payload: {state: calls} }) \r\n setSearched(false);\r\n } catch (error) {\r\n console.error(error)\r\n }\r\n finally{\r\n setIsLoading(false);\r\n }\r\n\r\n \r\n // eslint-disable-next-line\r\n },[dispatch])\r\n\r\n\r\n\r\n\r\n useEffect(()=> {GetServices()},[GetServices])\r\n\r\n\r\n\r\n const FetchCalls = async() =>{\r\n \r\n if(fetching) return;\r\n try {\r\n setFetching(true);\r\n const lastServiceCall = state.ServiceCalls[state.ServiceCalls.length - 1]; // let last array Element\r\n const calls = await http.GetAllServiceCalls(lastServiceCall.STARTDATE);\r\n dispatch({type: Actions.AddServiceCalls , payload: {state: calls}})\r\n } catch (error) {\r\n \r\n }\r\n finally{\r\n setFetching(false)\r\n }\r\n }\r\n\r\n\r\n const SearchServiceCalls = async() => {\r\n try {\r\n const DOCNO_value = DOCNO.current.value;\r\n const EDPJ_QTEXT_value = EDPJ_QTEXT.current.value;\r\n const NAME_value = NAME.current.value;\r\n const {CUSTNAME: CUSTNAME_value} = state.User?.userData[CUSTNAME.current.selectedIndex - 1] || '';\r\n const {CODE: CALLTYPECODE_value} = state.Types[CALLTYPECODE.current.selectedIndex - 1] || '';\r\n const STARTDATE = searchDate?.format('DD/MM/YYYY') || ''\r\n setSearched(true);\r\n const calls = await http.SearchServiceCalls({DOCNO: DOCNO_value, EDPJ_QTEXT: EDPJ_QTEXT_value , STARTDATE, NAME: NAME_value, CUSTNAME: CUSTNAME_value , CALLTYPECODE: CALLTYPECODE_value});\r\n dispatch({type: Actions.SetServiceCalls, payload: {state: calls} }) \r\n setIsFilterOpen(false);\r\n TableRef.current.ResetPage();\r\n return true;\r\n } catch (error) {\r\n \r\n }\r\n }\r\n\r\n\r\n const onLastCall = async() => {\r\n if(!searched) return await FetchCalls();\r\n }\r\n\r\n\r\n\r\n const refreshing = classNames('button btn_refresh', {animating: isLoading})\r\n return (\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 {searched&&
}\r\n {state.ServiceCalls.length === 0 && !isLoading ?
אין תוצאות
\r\n : isLoading ?
:\r\n screen?.width > TABLET_SIZE ? \r\n
\r\n : \r\n \r\n {state.ServiceCalls.map(call => \r\n
{call.DOCNO}}, {key: 'תאריך פתיחה', value: moment(call.STATUSDATE).format('DD.MM.YYYY')}]} \r\n body={[\r\n {key: 'נושא', value: call.EDPJ_QTEXT},\r\n {key: 'נפתח על ידי', value: call.NAME},\r\n {key: 'שם הלקוח', value: call.CDES},\r\n {key: 'סוג קריאה',value: call.ECODE},\r\n {key: 'סטטוס', value: call.CALLSTATUSCODE}\r\n ]}\r\n /> )}\r\n {!searched&&טען עוד}\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 onSearchDate(date)} // PropTypes.func.isRequired\r\n focused={focus} // PropTypes.bool\r\n onFocusChange={({ focused }) => setFocus(focused)} // PropTypes.func.isRequired\r\n id=\"your_unique_id\" // PropTypes.string.isRequired,\\\r\n numberOfMonths={1}\r\n displayFormat='DD/MM/YYYY'\r\n placeholder='תאריך'\r\n isRTL={true}\r\n isOutsideRange={()=>false}\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 {tabs.map((tab, index) =>
setTabIndex(index)} className={`Tab ${tabIndex === index ? 'selected' : ''}`}>{tab.title}
)} \r\n
\r\n {tabs[tabIndex].render()}\r\n