this.onClick(e)}\r\n >\r\n {title}\r\n
\r\n );\r\n }\r\n}\r\n\r\nHeadClick.defaultProps = {\r\n isExtensible: false,\r\n allowClick: false,\r\n isGroup: false,\r\n};\r\nHeadClick.propTypes = {\r\n style: PropTypes.any,\r\n className: PropTypes.string,\r\n caption: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\r\n color: PropTypes.string,\r\n bgColor: PropTypes.string,\r\n isExtend: PropTypes.bool,\r\n allowClick: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),\r\n dataHeaderCell: PropTypes.any,\r\n selectedRange: PropTypes.object,\r\n isGroup: PropTypes.bool,\r\n conditionCopy: PropTypes.func,\r\n callbackAfterCopy: PropTypes.func,\r\n onClick: PropTypes.func,\r\n isCopyAll: PropTypes.bool,\r\n isAllData: PropTypes.bool,\r\n customDataCopy: PropTypes.func,\r\n};\r\n\r\nexport default compose(withStyles(styles))(HeadClick)\r\n","/**\r\n * @copyright 2019 @ DigiNet\r\n * @author TRIHAO\r\n * @create 10/28/2019\r\n * @Example\r\n */\r\n\r\nimport React, {\r\n Component,\r\n forwardRef,\r\n useCallback,\r\n useEffect,\r\n useImperativeHandle,\r\n useMemo,\r\n useRef,\r\n useState\r\n} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Config from \"../../config\";\r\nimport DataGrid, {\r\n Paging as DxPaging,\r\n Pager,\r\n Selection,\r\n KeyboardNavigation,\r\n FilterRow,\r\n FilterPanel,\r\n FilterBuilderPopup, Sorting, Grouping, FilterBuilder\r\n} from \"devextreme-react/data-grid\";\r\n// import Paging from \"./paging\";\r\nimport { PagingInfo as Paging, PagingSelector } from 'diginet-core-ui/components';\r\nimport GridToolbar from \"../tool-bar/grid-toolbar\";\r\nimport GridFilterBar from \"../tool-bar/grid-filter\";\r\nimport { LoadPanel } from 'devextreme-react/load-panel';\r\n\r\nconst usePrevious = (value, defaultValue) => {\r\n const ref = useRef();\r\n useEffect(() => {\r\n ref.current = value;\r\n });\r\n return ref.current || defaultValue;\r\n};\r\n\r\nconst GridContainer = React.memo(forwardRef((props, ref) => {\r\n\r\n //props...\r\n const {keyExpr, dataSource, title, totalItems, filterData, buttonCRM, selectedRowKey, typeShort, wordWrapEnabled,\r\n editing, columnResizingMode, filterRow, columnAutoWidth, style, allowSearch, widthFull, disabled, typePaging,\r\n isPer, allowAdding, showSendMail, reference, id, children, valueSearch, paging, selection,\r\n showBorders, showColumnHeaders, showColumnLines, showRowLines, scrolling, hoverStateEnabled, loading,\r\n allowColumnResizing, pagerFullScreen, pager, elementAttr, allowCellSelection, filterValue, filterPanel,\r\n filterBuilder, filterBuilderPopup, disabledCellSelection, sorting, isOrderAPI, rowAlternationEnabled,\r\n grouping, focusStateEnabled, focusedRowEnabled, allowColumnReordering, defaultFocusedRowIndex,\r\n keyboardNavigation, customizeColumns, pagingHideMode, resetPageIndexWhenDataChanged,\r\n gridProps, pagingProps\r\n } = props;\r\n //func...\r\n const {onFilter, onSearch, onAddNew, onSendMail, onChangePage, onChangePerPage, onFilterChanged,\r\n loadMore, onRowInserted, onRowUpdated, onRowRemoved, onRowUpdating, onEditingStart, onInitNewRow, onRowRemoving,\r\n onEditorPrepared, onEditorPreparing, onContentReady, onSelectionChanged, onRowPrepared, onFocusedCellChanging,\r\n onKeyDown, onInitialized, onCellSelectionChanged, onRowValidating, onFocusedCellChanged, onRowInserting,\r\n onContextMenuPreparing, onRowClick, onOrderChanged, onCellPrepared, onCellHoverChanged, onChangingPage, onChangingPerPage,\r\n onFocusedRowChanged, onFocusedRowChanging,\r\n } = props;\r\n const prevDataSource = usePrevious(dataSource, []);\r\n\r\n const listPerPage = useRef(props.listPerPage || [10, 20, 40, 50]);\r\n const [currentPage, setCurrentPage] = useState(props.isPage ?? 0);\r\n const [itemPerPage, setItemPerPage] = useState(props.itemPerPage || listPerPage.current[0]);\r\n const [height, setHeight] = useState(props.height);\r\n\r\n const isSubmit = useRef(false);\r\n const isFiltered = useRef(false);\r\n const filterGrid = useRef({});\r\n const grid = useRef(null);\r\n const dataGrid = useRef(null);\r\n const selectedRange = useRef({});\r\n const isSelectionStopped = useRef(true);\r\n const fieldSort = useRef(\"\");\r\n const typeSort = useRef({});\r\n const pagingRef = useRef(null);\r\n const isChangePageIndex = useRef(false);\r\n const cellFocused = useRef({});\r\n\r\n const pageSize = useMemo(() => {\r\n return paging && paging.pageSize ? paging.pageSize : (itemPerPage ? itemPerPage : 10);\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [paging, itemPerPage]);;\r\n const _typePaging = useMemo(() => {\r\n return typeof typePaging === \"undefined\" ? (typeof totalItems !== \"undefined\" ? \"remote\" : \"default\") : typePaging;\r\n }, [typePaging, totalItems]);\r\n const _sorting = useMemo(() => {\r\n return isOrderAPI ? {mode: \"none\"} : (sorting ? sorting : {});\r\n }, [isOrderAPI, sorting]);\r\n\r\n //allow custom onCellHoverChanged...\r\n const allowCustomCellHoverChanged = useMemo(() => {\r\n return onCellSelectionChanged && !disabledCellSelection;\r\n }, [disabledCellSelection, onCellSelectionChanged]);\r\n\r\n const foreachRange = useCallback((selectedRange, cb) => {\r\n if(selectedRange.startRowIndex >= 0) {\r\n var minRowIndex = Math.min(selectedRange.startRowIndex, selectedRange.endRowIndex);\r\n var maxRowIndex = Math.max(selectedRange.startRowIndex, selectedRange.endRowIndex);\r\n var minColumnIndex = Math.min(selectedRange.startColumnIndex, selectedRange.endColumnIndex);\r\n var maxColumnIndex = Math.max(selectedRange.startColumnIndex, selectedRange.endColumnIndex);\r\n\r\n for(var rowIndex = minRowIndex; rowIndex <= maxRowIndex; rowIndex++) {\r\n for(var columnIndex = minColumnIndex; columnIndex <= maxColumnIndex; columnIndex++) {\r\n cb(rowIndex, columnIndex);\r\n }\r\n }\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n const showSelection = useCallback((component, selectedRange) => {\r\n const cellSelected = component.element().querySelectorAll(\".cell-selected\");\r\n cellSelected.forEach(cell => cell.classList.remove(\"cell-selected\"));\r\n\r\n if (onCellSelectionChanged && !disabledCellSelection) onCellSelectionChanged({component: component, selectedRange: selectedRange});\r\n\r\n foreachRange(selectedRange, (rowIndex, columnIndex) => {\r\n if (component.getCellElement(rowIndex, columnIndex)) {\r\n component.getCellElement(rowIndex, columnIndex).classList.add(\"cell-selected\");\r\n }\r\n });\r\n /* eslint-disable */\r\n }, [disabledCellSelection, onCellSelectionChanged]);\r\n\r\n const onFilterGrid = useCallback((e) => {\r\n let filter = e.component.getCombinedFilter(true);\r\n let letFilter = false;\r\n let listFilter = {};\r\n let eventFilter = {};\r\n eventFilter.component = e.component;\r\n\r\n if (filter) {\r\n filter = !Array.isArray(filter[0]) ? [filter] : filter;\r\n filter.forEach((val) => {\r\n if (Array.isArray(val)) {\r\n listFilter[val[0]] = val.filterValue;\r\n if (filterGrid.current[val[0]] || filterGrid.current[val[0]] === 0) {\r\n if (filterGrid.current[val[0]] !== val.filterValue) {\r\n letFilter = true;\r\n }\r\n } else {\r\n letFilter = true;\r\n }\r\n }\r\n });\r\n if (Object.keys(filterGrid.current).length !== Object.keys(listFilter).length) {\r\n letFilter = true;\r\n }\r\n filterGrid.current = listFilter;\r\n if (letFilter) {\r\n isFiltered.current = true;\r\n eventFilter.filter = filterGrid.current;\r\n onFilterChanged(eventFilter);\r\n }\r\n } else {\r\n filterGrid.current = {};\r\n if (isFiltered.current) {\r\n isFiltered.current = false;\r\n eventFilter.filter = null;\r\n onFilterChanged(eventFilter);\r\n }\r\n }\r\n }, [filterGrid, isFiltered, onFilterChanged]);\r\n\r\n useImperativeHandle(ref, () => ({\r\n itemPerPage: (_itemPerPage) => {\r\n if (_itemPerPage !== 0 && !_itemPerPage) return itemPerPage;\r\n if (itemPerPage !== _itemPerPage) setItemPerPage(_itemPerPage);\r\n },\r\n getRefDataGrid: () => dataGrid.current,\r\n getRefPaging: () => pagingRef.current\r\n }));\r\n\r\n useEffect(() => {\r\n setHeight(props.height);\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (pagingRef.current && props.height) setHeight(props.height - (37 - 14))\r\n }, [props.totalItems, props.height]);\r\n\r\n useEffect(() => {\r\n if (props.itemPerPage || props.itemPerPage === 0) setItemPerPage(props.itemPerPage);\r\n if (props.isPage || props.isPage === 0) setCurrentPage(props.isPage);\r\n }, [props.itemPerPage, props.isPage]);\r\n\r\n useEffect(() => {\r\n if (props.skipPerPage || props.skipPerPage === 0) setCurrentPage(props.skipPerPage / itemPerPage);\r\n }, [props.skipPerPage]);\r\n\r\n useEffect(() => {\r\n if (_typePaging !== \"remote\" && resetPageIndexWhenDataChanged) {\r\n if (typeof resetPageIndexWhenDataChanged === \"function\") {\r\n if (resetPageIndexWhenDataChanged({\r\n component: dataGrid.current.instance,\r\n paging: pagingRef.current,\r\n dataSource,\r\n prevDataSource,\r\n setCurrentPage\r\n })) setCurrentPage(0);\r\n } else {\r\n setCurrentPage(0);\r\n }\r\n }\r\n }, [dataSource]);\r\n\r\n useEffect(() => {\r\n if (dataGrid.current) {\r\n if (currentPage !== dataGrid.current.instance.pageIndex()) {\r\n dataGrid.current.instance.pageIndex(currentPage);\r\n }\r\n }\r\n }, [currentPage]);\r\n\r\n const handleScroll = (e) => {\r\n if (isSubmit.current) return;\r\n const bottom = e.target.scrollTop && ((e.target.scrollHeight - e.target.scrollTop) <= e.target.clientHeight + 30);\r\n if (bottom && props.loadMore) {\r\n isSubmit.current = true;\r\n props.loadMore(() => {\r\n isSubmit.current = false;\r\n });\r\n }\r\n };\r\n\r\n const updateTotal = useCallback((e) => {\r\n const _total = e.component.totalCount();\r\n if (pagingRef.current && _typePaging === \"normal\") pagingRef.current.setTotalItems(_total);\r\n }, [pagingRef, _typePaging]);\r\n\r\n const setOrderChanged = useCallback((e) => {\r\n if (!e) return false;\r\n if (fieldSort.current && typeSort.current?.[fieldSort.current] && e.cellElement) {\r\n if (e.rowType === \"header\") {\r\n const grid = e.component?.element();\r\n const indicators = grid?.getElementsByClassName(\"dx-column-indicators\");\r\n if (indicators.length > 0) {\r\n for (let ind of indicators) {\r\n ind.remove();\r\n }\r\n }\r\n e.cellElement.children[0].classList.add(\"dx-text-content-alignment-left\", \"dx-text-content-alignment-right\", \"dx-sort-indicator\");\r\n e.cellElement.innerHTML += '';\r\n }\r\n }\r\n }, [typeSort, fieldSort]);\r\n\r\n const onCellClick = (e) => {\r\n const {onCellClick} = props;\r\n if (isOrderAPI && onOrderChanged) {\r\n if (e.rowType === \"header\") {\r\n const {column} = e;\r\n if (fieldSort.current !== column.dataField) fieldSort.current = column.dataField;\r\n typeSort.current[fieldSort.current] = typeSort.current[fieldSort.current] === \"ASC\" ? \"DESC\" : \"ASC\";\r\n // this.cellHeader = e.cellElement;\r\n\r\n setOrderChanged(e);\r\n\r\n if (onOrderChanged) onOrderChanged({...e, column: column, typeSort: typeSort.current[fieldSort.current].toUpperCase()});\r\n }\r\n }\r\n\r\n if (onCellSelectionChanged && !disabledCellSelection) {\r\n selectedRange.current.rowType = e.rowType;\r\n if (e.rowType !== \"header\") {\r\n selectedRange.current.startRowIndex = selectedRange.current.endRowIndex = e.rowIndex;\r\n selectedRange.current.startColumnIndex = selectedRange.current.endColumnIndex = e.columnIndex;\r\n isSelectionStopped.current = false;\r\n showSelection(e.component, selectedRange.current);\r\n }\r\n }\r\n\r\n if (onCellClick) onCellClick(e);\r\n };\r\n const onCellDblClick = (e) => {\r\n const {onDbCellClick, onCellDblClick} = props;\r\n if (onCellDblClick) onCellDblClick(e);\r\n if (onDbCellClick) onDbCellClick(e);\r\n };\r\n const _onCellHoverChanged = (e) => {\r\n if (onCellHoverChanged) onCellHoverChanged(e);\r\n\r\n //set selection range\r\n const event = e.event;\r\n if(event.buttons === 1 && onCellSelectionChanged && !disabledCellSelection) {\r\n if(isSelectionStopped.current) {\r\n isSelectionStopped.current = false;\r\n selectedRange.current = {};\r\n }\r\n selectedRange.current.rowType = e && e.rowType ? e.rowType : \"\";\r\n if(selectedRange.current.startRowIndex === undefined) {\r\n selectedRange.current.startRowIndex = e.rowIndex;\r\n }\r\n if(selectedRange.current.startColumnIndex === undefined) {\r\n selectedRange.current.startColumnIndex = e.columnIndex;\r\n }\r\n\r\n selectedRange.current.endRowIndex = e.rowIndex;\r\n selectedRange.current.endColumnIndex = e.columnIndex;\r\n\r\n showSelection(e.component, selectedRange.current);\r\n\r\n }\r\n else {\r\n isSelectionStopped.current = true;\r\n }\r\n };\r\n const _onFocusedCellChanging = (e) => {\r\n if (onFocusedCellChanging) {\r\n onFocusedCellChanging(e);\r\n } else {\r\n if (allowCellSelection) {\r\n cellFocused.current = {rowIndex: e.newRowIndex, columnIndex: e.newColumnIndex};\r\n e.isHighlighted = allowCellSelection;\r\n }\r\n }\r\n };\r\n const onRowDblClick = (e) => {\r\n const {onDbRowClick, onRowDblClick} = props;\r\n if (onRowDblClick) onRowDblClick(e);\r\n if (onDbRowClick) onDbRowClick(e);\r\n };\r\n const _onEditorPreparing = (e) => {\r\n if (e.parentType === \"filterRow\") {\r\n let placeholder = \"\";\r\n switch (e.editorName) {\r\n case \"dxTextBox\":\r\n case \"dxNumberBox\":\r\n placeholder = e.filterPlaceholder || Config.lang(\"Nhap\");\r\n break;\r\n case \"dxDateBox\":\r\n placeholder = e.filterPlaceholder || e?.format || Config.lang(\"Chon\");\r\n break;\r\n default:\r\n placeholder = e.filterPlaceholder || Config.lang(\"Chon\");\r\n break;\r\n }\r\n e.editorOptions.placeholder = placeholder || Config.lang(\"Chon\");\r\n\r\n //convert value filter to normalize (data and filterValue)\r\n const dataSource = e.component.option(\"dataSource\") || [];\r\n const {dataField} = e || {};\r\n dataSource?.forEach(d => {\r\n if (d[dataField] && typeof d[dataField] === \"string\") {\r\n d[dataField] = d[dataField].normalize();\r\n }\r\n });\r\n const onValueChanged = e.editorOptions.onValueChanged;\r\n e.editorOptions.onValueChanged = (evt) => {\r\n if (evt.value && typeof evt.value === \"string\") {\r\n if (evt?.event?.target) evt.event.target.value = evt.value.normalize();\r\n evt.value = evt.value.normalize();\r\n }\r\n onValueChanged(evt);\r\n };\r\n }\r\n if (onEditorPreparing) onEditorPreparing(e);\r\n };\r\n\r\n const _onInitialized = (e) => {\r\n const columns = e.component.getVisibleColumns();\r\n const dateColumns = columns?.filter(col => col?.dataType === \"date\");\r\n for (let col of columns) {\r\n e.component.columnOption(col.dataField, \"editorOptions.valueChangeEvent\", \"input\");\r\n // default width for date column...\r\n if (col?.dataType === \"date\") {\r\n e.component.columnOption(col.dataField, \"minWidth\", 180);\r\n }\r\n }\r\n if (dateColumns && dateColumns.length > 0) {\r\n for (let col of dateColumns) {\r\n e.component.columnOption(col.dataField, \"minWidth\", 180);\r\n }\r\n }\r\n if (onInitialized) onInitialized(e);\r\n };\r\n\r\n const onOptionChanged = (e) => {\r\n const {onOptionChanged: _onOptionChanged} = props;\r\n if (!e) return false;\r\n switch (e.name) {\r\n case \"columns\":\r\n if (e.fullName.endsWith(\"sortOrder\") && !isOrderAPI) {\r\n const fullName = e.fullName.split('.');\r\n if (fullName.length < 1) return false;\r\n const matchs = fullName[0].match(/columns\\[(\\d+)\\]/);\r\n if (matchs.length < 2) return false;\r\n const colIndx = matchs[1];\r\n const columns = e.component.option(\"columns\");\r\n const column = columns[colIndx];\r\n const typeSort = e.value ? e.value : 'asc';\r\n if (_onOptionChanged) _onOptionChanged({...e, column: column, typeSort: typeSort.toUpperCase()});\r\n // setTimeout(() => {\r\n // e.component.columnOption(column.dataField, 'sortOrder', typeSort);\r\n // }, 300);\r\n }\r\n if (e.fullName.endsWith(\"filterValue\") && props.onFilterGrid) {\r\n const {onFilterGrid} = props;\r\n if (onFilterGrid) {\r\n const fullName = e.fullName.split('.');\r\n if (fullName.length < 1) return false;\r\n const matchs = fullName[0].match(/columns\\[(\\d+)\\]/);\r\n if (matchs.length < 2) return false;\r\n const colIndx = matchs[1];\r\n const columns = e.component.option(\"columns\");\r\n const column = columns[colIndx];\r\n const value = e.value ? e.value : '';\r\n\r\n\r\n if (onFilterGrid) onFilterGrid({component: e.component, column, filterValue: value, columnIndex: Number(colIndx)});\r\n // setTimeout(() => {\r\n // e.component.columnOption(column.dataField, 'sortOrder', typeSort);\r\n // }, 300);\r\n }\r\n }\r\n break;\r\n case \"filterValue\":\r\n if (e.fullName === \"filterValue\" && e.value === null && props.onFilterGrid) {\r\n const {onFilterGrid} = props;\r\n if (onFilterGrid) onFilterGrid({component: e.component, column: null, filterValue: null});\r\n }\r\n break;\r\n case \"paging\":\r\n if (e.fullName === \"paging.pageIndex\" && (e.value === 0 || e.value) && _typePaging !== \"remote\") {\r\n if (dataGrid.current && focusedRowEnabled && typeof defaultFocusedRowIndex === \"number\") {\r\n isChangePageIndex.current = true;\r\n }\r\n if (pagingRef.current && e.value !== currentPage) {\r\n pagingRef.current.onChangePage(e.value);\r\n }\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n if (_onOptionChanged) _onOptionChanged(e);\r\n };\r\n\r\n return (\r\n
\r\n {title && {\r\n onSearch && onSearch(text);\r\n }} onAddNew={onAddNew}\r\n showSendMail={showSendMail}\r\n onSendMail={onSendMail} />}\r\n\r\n {onFilter && filterData &&\r\n {\r\n if (ref) {\r\n dataGrid.current = ref;\r\n reference && reference(ref);\r\n }\r\n }}\r\n dataSource={dataSource}\r\n keyExpr={keyExpr}\r\n width={widthFull ? 'fit-content' : \"100%\"}\r\n wordWrapEnabled={wordWrapEnabled}\r\n showRowLines={showRowLines}\r\n showBorders={showBorders}\r\n showColumnHeaders={showColumnHeaders}\r\n showColumnLines={showColumnLines}\r\n elementAttr={elementAttr}\r\n height={height}\r\n filterValue={filterValue}\r\n defaultFilterValue={filterValue}\r\n allowColumnReordering={allowColumnReordering}\r\n allowColumnResizing={allowColumnResizing}\r\n noDataText={loading ? \"\" : Config.lang('Khong_co_du_lieu')}\r\n columnAutoWidth={columnAutoWidth}\r\n columnResizingMode={columnResizingMode}\r\n repaintChangesOnly={true}\r\n highlightChanges={true}\r\n scrolling={{ //phai viet nhu vay..\r\n scrollByContent: true,\r\n scrollByThumb: true,\r\n ...scrolling\r\n }}\r\n onOptionChanged={onOptionChanged}\r\n hoverStateEnabled={hoverStateEnabled}\r\n focusStateEnabled={focusStateEnabled}\r\n focusedRowEnabled={focusedRowEnabled}\r\n customizeColumns={customizeColumns}\r\n onContentReady={(e) => {\r\n updateTotal(e);\r\n if (onFilterChanged) onFilterGrid(e);\r\n if (onContentReady) onContentReady(e);\r\n if (onCellSelectionChanged && !disabledCellSelection)\r\n showSelection(e.component, selectedRange.current);\r\n\r\n if (isChangePageIndex.current) {\r\n isChangePageIndex.current = false;\r\n e.component.option(\"focusedRowKey\", \"\");\r\n e.component.option(\"focusedRowIndex\", defaultFocusedRowIndex);\r\n }\r\n }}\r\n onSelectionChanged={onSelectionChanged}\r\n onRowInserting={onRowInserting}\r\n onRowInserted={onRowInserted}\r\n onRowUpdated={onRowUpdated}\r\n onRowRemoved={onRowRemoved}\r\n onRowUpdating={onRowUpdating}\r\n onEditingStart={onEditingStart}\r\n onInitNewRow={onInitNewRow}\r\n onRowRemoving={onRowRemoving}\r\n onRowPrepared={onRowPrepared}\r\n onEditorPrepared={onEditorPrepared}\r\n onEditorPreparing={_onEditorPreparing}\r\n onCellPrepared={e => {\r\n const {rowIndex, columnIndex} = cellFocused.current || {};\r\n if (allowCellSelection && columnIndex === e.columnIndex && rowIndex === e.rowIndex) {\r\n e.component.focus(e.cellElement);\r\n }\r\n if (onCellPrepared) onCellPrepared(e);\r\n }} //danger event cause render\r\n onRowValidating={onRowValidating}\r\n onContextMenuPreparing={onContextMenuPreparing}\r\n onFocusedCellChanging={_onFocusedCellChanging}\r\n onFocusedCellChanged={onFocusedCellChanged}\r\n onCellHoverChanged={allowCustomCellHoverChanged ? _onCellHoverChanged : onCellHoverChanged} //danger event cause render\r\n onInitialized={_onInitialized}\r\n onKeyDown={onKeyDown}\r\n rowAlternationEnabled={rowAlternationEnabled}\r\n onCellClick={onCellClick}\r\n onCellDblClick={onCellDblClick}\r\n onRowClick={onRowClick}\r\n onRowDblClick={onRowDblClick}\r\n {...(selectedRowKey ? {selectedRowKeys: selectedRowKey} : {}) }\r\n onFocusedRowChanged={onFocusedRowChanged}\r\n onFocusedRowChanging={onFocusedRowChanging}\r\n { ...(editing ? {editing: {texts: {confirmDeleteMessage: \"\"}, ...editing}} : {})}\r\n {...gridProps}\r\n >\r\n {filterRow && pageSize)}\r\n showInfo={pager && pager.showInfo ? pager.showInfo : false}\r\n showNavigationButtons={pager && pager.showNavigationButtons ? pager.showNavigationButtons : false}\r\n showPageSizeSelector={pager && pager.showPageSizeSelector ? pager.showPageSizeSelector : false}\r\n />\r\n {children}\r\n \r\n\r\n {_typePaging === \"remote\" && !!totalItems && {\r\n if (onChangePage) onChangePage(page);\r\n }}\r\n onChangePerPage={(per) => {\r\n if (onChangePerPage) onChangePerPage(per);\r\n }}\r\n onChangingPage={onChangingPage}\r\n onChangingPerPage={onChangingPerPage}\r\n {...pagingProps}\r\n />}\r\n {_typePaging === \"normal\" && {\r\n setCurrentPage(page);\r\n if (onChangePage) onChangePage(page);\r\n }}\r\n onChangePerPage={(per) => {\r\n if (dataGrid.current) {\r\n dataGrid.current.instance.pageSize(per);\r\n dataGrid.current.instance.pageIndex(0);\r\n }\r\n setCurrentPage(0);\r\n setItemPerPage(per);\r\n if (onChangePerPage) onChangePerPage(per);\r\n }}\r\n onChangingPage={onChangingPage}\r\n onChangingPerPage={onChangingPerPage}\r\n {...pagingProps}\r\n />}\r\n {_typePaging === \"default\" && (pager && typeof pager.visible !== \"undefined\" ? pager.visible : true) &&\r\n {\r\n setCurrentPage(page);\r\n if (onChangePage) onChangePage(page);\r\n }}\r\n onChangePerPage={(per) => {\r\n if (dataGrid.current) {\r\n dataGrid.current.instance.pageSize(per);\r\n dataGrid.current.instance.pageIndex(0);\r\n }\r\n setCurrentPage(0);\r\n setItemPerPage(per);\r\n if (onChangePerPage) onChangePerPage(per);\r\n }}\r\n onChangingPage={onChangingPage}\r\n onChangingPerPage={onChangingPerPage}\r\n {...pagingProps}\r\n />}\r\n
\r\n );\r\n}));\r\n\r\nclass TitleGrid extends Component {\r\n render() {\r\n let { label } = this.props;\r\n if (!label) return;\r\n\r\n return (\r\n \r\n {label}\r\n
\r\n );\r\n }\r\n}\r\n\r\nTitleGrid.propTypes = {\r\n label: PropTypes.string\r\n};\r\n\r\nGridContainer.defaultProps = {\r\n pagerFullScreen: true,\r\n rowAlternationEnabled: true,\r\n focusStateEnabled: true,\r\n focusedRowEnabled: false,\r\n hoverStateEnabled: true,\r\n showColumnLines: false,\r\n showRowLines: false,\r\n columnAutoWidth: true,\r\n showColumnHeaders: true,\r\n allowColumnReordering: true,\r\n columnResizingMode: \"nextColumn\",\r\n wordWrapEnabled: false,\r\n showBorders: true,\r\n defaultFocusedRowIndex: 0,\r\n resetPageIndexWhenDataChanged: true\r\n};\r\n\r\nGridContainer.propTypes = {\r\n style: PropTypes.object,\r\n hoverStateEnabled: PropTypes.bool,\r\n focusStateEnabled: PropTypes.bool,\r\n focusedRowEnabled: PropTypes.bool,\r\n selectedRowKey: PropTypes.any,\r\n title: PropTypes.string,\r\n type: PropTypes.string,\r\n field: PropTypes.string,\r\n itemPerPage: PropTypes.number,\r\n skipPerPage: PropTypes.number,\r\n totalItems: PropTypes.number,\r\n listPerPage: PropTypes.any,\r\n dataSource: PropTypes.any,\r\n keyExpr: PropTypes.string.isRequired,\r\n showSendMail: PropTypes.bool,\r\n selection: PropTypes.object,\r\n buttonCRM: PropTypes.array,\r\n isPer: PropTypes.number,\r\n isPage: PropTypes.number,\r\n allowAdding: PropTypes.number,\r\n allowSearch: PropTypes.string,\r\n typeShort: PropTypes.bool,\r\n wordWrapEnabled: PropTypes.bool,\r\n editing: PropTypes.object,\r\n filterRow: PropTypes.object,\r\n allowColumnResizing: PropTypes.bool,\r\n columnResizingMode: PropTypes.string,\r\n columnAutoWidth: PropTypes.bool,\r\n reference: PropTypes.func,\r\n id: PropTypes.string,\r\n disabled: PropTypes.bool,\r\n valueSearch: PropTypes.string,\r\n paging: PropTypes.any,\r\n pager: PropTypes.any,\r\n height: PropTypes.any,\r\n showBorders: PropTypes.bool,\r\n showColumnHeaders: PropTypes.bool,\r\n showColumnLines: PropTypes.bool,\r\n showRowLines: PropTypes.bool,\r\n scrolling: PropTypes.any,\r\n gridProps: PropTypes.any,\r\n pagingProps: PropTypes.any,\r\n loading: PropTypes.bool,\r\n rowAlternationEnabled: PropTypes.bool,\r\n pagerFullScreen: PropTypes.bool,\r\n elementAttr: PropTypes.any,\r\n allowCellSelection: PropTypes.bool,\r\n filterValue: PropTypes.any,\r\n filterPanel: PropTypes.object,\r\n filterBuilder: PropTypes.object,\r\n filterBuilderPopup: PropTypes.object,\r\n disabledCellSelection: PropTypes.bool,\r\n sorting: PropTypes.object,\r\n grouping: PropTypes.object,\r\n defaultFocusedRowIndex: PropTypes.number,\r\n keyboardNavigation: PropTypes.object,\r\n onChangingPage: PropTypes.func,\r\n onChangingPerPage: PropTypes.func,\r\n\r\n /**\r\n * @typePaging: String\r\n * \"default\": With default type of DataGrid Devextreme\r\n * \"normal\": With type of HR customize paging (local).\r\n * \"remote\": With type of HR customize paging (remote). Require props:\r\n * - @totalItems: Total of all data.\r\n */\r\n typePaging: PropTypes.oneOf(['default', 'normal', 'remote']),\r\n\r\n /**\r\n * $isOrderAPI: Allow order with API with every column.\r\n */\r\n isOrderAPI: PropTypes.bool,\r\n resetPageIndexWhenDataChanged: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),\r\n pagingHideMode: PropTypes.string,\r\n\r\n onFilter: PropTypes.func,\r\n onAddNew: PropTypes.func,\r\n onSearch: PropTypes.func,\r\n onChangePage: PropTypes.func,\r\n onRowClick: PropTypes.func,\r\n onDbRowClick: PropTypes.func,\r\n onDbCellClick: PropTypes.func,\r\n onCellClick: PropTypes.func,\r\n onCellDblClick: PropTypes.func,\r\n onChangePerPage: PropTypes.func,\r\n customizeColumns: PropTypes.func,\r\n onSendMail: PropTypes.func,\r\n onRowInserted: PropTypes.func,\r\n onSelectionChanged: PropTypes.func,\r\n onRowUpdated: PropTypes.func,\r\n onRowRemoved: PropTypes.func,\r\n onRowUpdating: PropTypes.func,\r\n onEditingStart: PropTypes.func,\r\n onInitNewRow: PropTypes.func,\r\n onRowRemoving: PropTypes.func,\r\n onEditorPrepared: PropTypes.func,\r\n onEditorPreparing: PropTypes.func,\r\n onContentReady: PropTypes.func,\r\n onRowDblClick: PropTypes.func,\r\n onRowPrepared: PropTypes.func,\r\n onFocusedCellChanging: PropTypes.func,\r\n onFocusedCellChanged: PropTypes.func,\r\n onRowInserting: PropTypes.func,\r\n onInitialized: PropTypes.func,\r\n onOptionChanged: PropTypes.func,\r\n onOrderChanged: PropTypes.func,\r\n onKeyDown: PropTypes.func,\r\n onCellHoverChanged: PropTypes.func,\r\n onCellSelectionChanged: PropTypes.func,\r\n onCellPrepared: PropTypes.func,\r\n loadMore: PropTypes.func,\r\n onRowValidating: PropTypes.func,\r\n onContextMenuPreparing: PropTypes.func,\r\n onFocusedRowChanging: PropTypes.func,\r\n onFocusedRowChanged: PropTypes.func,\r\n\r\n /**\r\n * get filter when changed..\r\n */\r\n onFilterChanged: PropTypes.func,\r\n onFilterGrid: PropTypes.func\r\n};\r\n\r\nexport default GridContainer;\r\n","/**\r\n * @copyright 2019 @ DigiNet\r\n * @author TRIHAO\r\n * @create 4/22/2021\r\n * @Example \r\n */\r\n\r\nimport React from \"react\";\r\nimport Config from \"../../../config\";\r\n\r\nclass CORE extends React.Component {\r\n\r\n /**\r\n * Host (url) core\r\n * @type {string}\r\n */\r\n static host = \"https://core.diginet.com.vn\";\r\n\r\n /**\r\n * Token core..\r\n * @type {string}\r\n */\r\n static token = \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdXRoIjoiNmY1OTQxM2YtMTdiOS00NWY5LWE3NjgtYjY0MGRhMzZkZGVlIiwiaWF0IjoxNTkzMTY1NzYwLCJleHAiOjE2Nzk1NjU3NjB9.DQsEu7aU6_vhPHhFhnDcNq-x8nceBqVstNgxXNH1Aj8\"\r\n\r\n /**\r\n * Header for core\r\n * @type {{Accept: string, \"Access-Control-Request-Headers\": string, \"X-Access-Token\": string, \"Content-Type\": string}}\r\n */\r\n static headers = {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Access-Control-Request-Headers': 'content-type,token,secret',\r\n 'X-Access-Token': this.token\r\n };\r\n\r\n static setHeaders = (header = {}) => {\r\n if (!header) return false;\r\n Object.assign(this.headers, header);\r\n };\r\n static getHeaders = () => {\r\n return this.headers;\r\n };\r\n static showError = (error) => {\r\n if (error) {\r\n Config.popup.show(error);\r\n return null;\r\n }\r\n return null;\r\n };\r\n\r\n static getProducts = async (config, cb) => {\r\n const route = \"/api/v1.0.0/company/apps\";\r\n let url = config?.url || this.host + route;\r\n if (config?.url) delete config.url;\r\n const params = {\r\n UserID: Config.profile.UserID,\r\n CompanyCode: Config.env.companyCode || \"\",\r\n ...config\r\n };\r\n const options = {\r\n method: \"PUT\",\r\n headers: this.getHeaders(),\r\n body: params ? JSON.stringify(params) : null\r\n };\r\n\r\n return await fetch(url, options)\r\n .then(async (resp) => {\r\n if (resp && resp.ok) {\r\n try {\r\n const data = await resp.json();\r\n if (data && data.data && data.data.length > 0 && data.data[0].apps) {\r\n // Config.products = data.data[0].apps;\r\n cb && cb(null, data.data);\r\n return data.data[0].apps;\r\n } else {\r\n this.showError({code: 'SYS001', message: 'System error!'});\r\n }\r\n\r\n } catch (e) {\r\n this.showError({code: 'SYS001', message: 'System error!'});\r\n }\r\n } else {\r\n this.showError({code: 'SYS001', message: 'System error!'});\r\n }\r\n }).catch(e => {this.showError(e)});\r\n };\r\n\r\n}\r\n\r\nexport default CORE;\r\n","/**\r\n * @copyright 2019 @ DigiNet\r\n * @author TRIHAO\r\n * @create 12/16/2019\r\n * @Example\r\n */\r\nimport React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport {InputLabel, FormControl} from \"@material-ui/core\";\r\nimport {DropDownBox} from \"devextreme-react\";\r\nimport {withStyles} from \"@material-ui/styles\";\r\nimport Config from \"../../config\";\r\nimport { DropdownBox as DropDownBoxCore } from 'diginet-core-ui/components';\r\n\r\nconst styles = {\r\n root: {\r\n // zIndex: 1502\r\n },\r\n rootMobile: {\r\n margin: '4px 0',\r\n // zIndex: 1502,\r\n '& .dx-texteditor.dx-editor-filled': {\r\n borderRadius: 5,\r\n '& input': {\r\n paddingTop: '6px !important'\r\n }\r\n }\r\n },\r\n dropdownCore: {\r\n '& > .DGN-UI-InputBase.outlined::after': {\r\n width: '100%',\r\n borderTop: 'none',\r\n borderLeft: 'none',\r\n borderRight: 'none',\r\n borderRadius: 'unset',\r\n top: 0,\r\n bottom: 0,\r\n left: 0,\r\n right: 0,\r\n }\r\n }\r\n};\r\nclass Filter extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n shrink: (props.value && props.value.length > 0) || props.shrink,\r\n value: props.value,\r\n opened: false\r\n };\r\n this.isLoaded = false;\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState, snapshot) {\r\n const {showHeader} = this.props;\r\n if (showHeader || typeof showHeader === \"undefined\") {\r\n Config.filters.setFilter(() => {\r\n return this.render();\r\n });\r\n }\r\n }\r\n\r\n onTextChanged = (e) => {\r\n const {onTextChanged} = this.props;\r\n const value = e?.event?.target?.value || e?.target?.value || '';\r\n const event = e?.event || e;\r\n this.setState({value: value});\r\n if (onTextChanged) onTextChanged(event);\r\n };\r\n\r\n // onFocusIn = () => {\r\n // console.log('focusin');\r\n // // this.setState({\r\n // // shrink: true,\r\n // // });\r\n // };\r\n //\r\n // onFocusOut = () => {\r\n // console.log('focusout');\r\n // // this.setState({\r\n // // shrink: !!this.state.value,\r\n // // });\r\n // };\r\n\r\n _onOpened = (e) => {\r\n const {onOpened, onOpenLoaded} = this.props;\r\n if (onOpened) onOpened(e);\r\n if (onOpenLoaded && !this.isLoaded) {\r\n onOpenLoaded();\r\n this.isLoaded = true;\r\n }\r\n this.setState({opened: true});\r\n };\r\n\r\n _onClosed = (e) => {\r\n const {onClosed} = this.props;\r\n if (onClosed) onClosed(e);\r\n this.setState({opened: false});\r\n };\r\n\r\n render() {\r\n const {value, shrink, opened} = this.state;\r\n const {\r\n label, style, className, margin, classes,\r\n height, placeholder, dataSource, stylingMode, showClearButton, acceptCustomValue,\r\n openOnFieldClick, showDropDownButton, disabled,\r\n InputLabelProps, dropdownProps,\r\n renderFilter, onTextChanged, isUseDDCore\r\n } = this.props;\r\n\r\n const _showDropDownButton = typeof showDropDownButton !== \"undefined\" ? showDropDownButton : !!renderFilter;\r\n const variant = stylingMode === 'underlined' ? \"standard\" : (stylingMode === 'outlined' ? 'outlined' : 'filled');\r\n const _shrink = shrink || opened;\r\n\r\n return (\r\n \r\n {opened && renderFilter()}\r\n
\r\n );\r\n }}\r\n />}\r\n {isUseDDCore && \r\n {opened && renderFilter()}\r\n
\r\n }\r\n \r\n \r\n \r\n {/*Links to products*/}\r\n \r\n {(_listProducts && _listProducts.length > 0) ?
\r\n - \r\n {_listProducts && _listProducts.map((pro, i) => {\r\n if (pro.appID.indexOf(\"W\") !== 0 || pro.appID === Config.env.productID) return null;\r\n const icon = pro.icon && pro.icon.indexOf(\"http\") > -1 ? pro.icon : this.host + pro.icon;\r\n return (\r\n
\r\n \r\n \r\n {Config.lang(\"Xem_them\")}\r\n
\r\n }\r\n \r\n - \r\n {/* Ho so nhan vien */}\r\n\r\n
\r\n 
\r\n\r\n
\r\n {userName}
\r\n {userDutyName}
\r\n - this.toogleProfile(e, 'theme', true)}>\r\n
\r\n {Config.lang(\"DHR_Mau_giao_dien\")} \r\n
\r\n this.toogleProfile(e, 'root')}\r\n >\r\n {/*{salesPersonNameU}*/}\r\n 
\r\n
\r\n )\r\n }}\r\n />\r\n \r\n this.onTypePaging(e)}\r\n /> / {lastPage}\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nPaging.propTypes = {\r\n reference: PropTypes.any,\r\n totalItems: PropTypes.number,\r\n itemPerPage: PropTypes.number,\r\n currentPage: PropTypes.number,\r\n listPerPage: PropTypes.array,\r\n typeShort:PropTypes.bool,\r\n className: PropTypes.string,\r\n\r\n onChangePage: PropTypes.func,\r\n onChangePerPage: PropTypes.func,\r\n};\r\n\r\nexport default Paging;\r\n","import firebase from 'firebase/app';\r\nimport 'firebase/messaging';\r\nimport \"firebase/analytics\";\r\nimport Config from \"../../config\";\r\n\r\nlet config = null;\r\nexport const fbInitializeApp = () => {\r\n try {\r\n config = JSON.parse(Config.getSetting(\"FIREBASE_UI_CONFIG\"));\r\n if (!config) return null;\r\n firebase.initializeApp(config);\r\n firebase.analytics();\r\n } catch (err) {\r\n if (!/already exists/.test(err.message)) {\r\n console.error('Firebase initialization error', err.stack)\r\n }\r\n }\r\n};\r\n\r\nconst fbGetToken = (options, cb) => {\r\n const vapidKey = Config.getSetting(\"FIREBASE_UI_VAPIDKEY\");\r\n const messaging = firebase.messaging();\r\n messaging.getToken({vapidKey: vapidKey || \"\", ...options})\r\n .then((token) => {\r\n if (token) {\r\n if (cb) cb(null, token);\r\n return token;\r\n // Track the token -> client mapping, by sending to backend server\r\n // show on the UI that permission is secured\r\n } else {\r\n console.log('No registration token available. Request permission to generate one.');\r\n // shows on the UI that permission is required\r\n }\r\n }).catch((err) => {\r\n console.log('An error occurred while retrieving token. ', err);\r\n // catch error while creating client token\r\n });\r\n};\r\n\r\nexport const fbRequestPermission = async (cb) => {\r\n try {\r\n // console.log('====== fbRequestPermission ========');\r\n if (!firebase.messaging.isSupported() || !config) {\r\n return;\r\n }\r\n const swUrl = Config.getRootPath() + \"firebase-messaging-sw.js?c=\" + encodeURIComponent(JSON.stringify(config));\r\n if (\"serviceWorker\" in navigator) {\r\n navigator.serviceWorker\r\n .register(swUrl)\r\n .then(function(registration) {\r\n // console.log(\"Registration successful, scope is:\", registration.scope);\r\n fbGetToken({serviceWorkerRegistration : registration}, cb);\r\n })\r\n .catch(function(err) {\r\n fbGetToken(null, cb);\r\n // console.log(\"Service worker registration failed, error:\" , err );\r\n });\r\n } else {\r\n fbGetToken(null, cb);\r\n }\r\n } catch (error) {\r\n if (cb) cb(error);\r\n console.error(error);\r\n }\r\n};\r\n\r\nexport const fbOnMessage = (cb) => {\r\n // console.log('====== fbOnMessage ========');\r\n\r\n try {\r\n if (!firebase.messaging.isSupported() || !config) {\r\n return;\r\n }\r\n\r\n const messaging = firebase.messaging();\r\n // console.log('====== fbOnMessage1 ========');\r\n\r\n messaging.onMessage(function(payload) {\r\n if (cb) cb(null, payload);\r\n });\r\n } catch (error) {\r\n if (cb) cb(error);\r\n console.error(error);\r\n }\r\n};\r\n","/**\r\n * @copyright 2019 @ DigiNet\r\n * @author TRIHAO\r\n * @create 10/14/2020\r\n * @Example\r\n */\r\n\r\nimport Config from \"../../config\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nclass History {\r\n /**\r\n * @param props\r\n * @options: {\r\n * data: [],\r\n * dataCompare: [],\r\n * captions: {},\r\n * action: 0,\r\n * keyExpr: \"\",\r\n * keyTransID: \"\",\r\n * ortherData: [],\r\n * transID, \"\",\r\n * transactionID: \"\",\r\n * transactionName: \"\",\r\n * moduleID: \"\",\r\n * detail: \"\",\r\n * keyForAdd: [],\r\n * keyForEdit: [],\r\n * keyForRemove: [],\r\n * itemRender: () => {}\r\n * }\r\n */\r\n constructor (props) {\r\n const {UserID, UserName, UserNameU} = Config.profile || {};\r\n this.options = {\r\n //original data (required)\r\n data: props && props.data ? props.data : null,\r\n\r\n //Old data to compare\r\n dataCompare: props && props.dataCompare ? props.dataCompare : null,\r\n\r\n //Captions\r\n captions: props && props.captions ? props.captions : null,\r\n\r\n //Actions (options)\r\n action: props && props.action ? props.action : null,\r\n\r\n keyExpr: props && props.keyExpr ? props.keyExpr : \"\",\r\n keyTransID: props && props.keyTransID ? props.keyTransID : \"\",\r\n\r\n ortherData: props && props.ortherData ? props.ortherData : null,\r\n\r\n //TransactionID\r\n transID: props && props.TransID ? props.TransID : \"\",\r\n transactionID: props && props.TransactionID ? props.TransactionID : \"\",\r\n transactionName: props && props.TransactionName ? props.TransactionName : \"\",\r\n moduleID: props && props.ModuleID ? props.ModuleID : \"\",\r\n\r\n userID: props && props.UserID ? props.UserID : (UserID || \"\"),\r\n userName: props && props.UserName ? props.UserName : (UserNameU ? UserNameU : (UserName || \"\")),\r\n\r\n detail: props && props.detail ? props.detail : null,\r\n _noInit: !props || Object.keys(props).length <= 0,\r\n ...props\r\n };\r\n\r\n this.event = {\r\n itemRender: this.options.itemRender ? this.options.itemRender : null\r\n };\r\n\r\n this.connection = Config.controller ? Config.controller : null;\r\n\r\n this._data = [];\r\n\r\n //Init object\r\n this.init();\r\n }\r\n\r\n _setError = (msg) => {\r\n if (msg) console.log(\"=========== History =============\\nError: \" + msg);\r\n return false;\r\n };\r\n\r\n _isEmpty = (value) => {\r\n return value ?? null;\r\n };\r\n\r\n _getNameAction = (action) => {\r\n if (action === 0 || action) {\r\n switch (Number(action)) {\r\n case 0: return \"added\";\r\n case 1: return \"edited\";\r\n case 2: return \"added\";\r\n case 3: return \"removed\";\r\n default: return \"\";\r\n }\r\n }\r\n return null;\r\n };\r\n\r\n /**\r\n * Create \"Content\": \"\" value...\r\n * @param newData\r\n * @param captions\r\n * @param action\r\n * @param options\r\n * @param dataOldCompare\r\n * @param test\r\n * @returns object \"Content\"\r\n * @private\r\n */\r\n _createContentHistory = (newData, captions, action, options, dataOldCompare, type) => {\r\n if (!newData || !captions || (action !== 0 && !action)) return null;\r\n if (action === 1 && !dataOldCompare) return null;\r\n\r\n const {keyForAdd, keyForEdit, keyForRemove, itemRender, excludeFields} = options || {};\r\n let obj = {};\r\n type = \"Content\" + (type ===\"detail\" ? \"_DETAIL\" : \"\");\r\n let objDetail = null;\r\n let isDiff = false;\r\n if (action !== 1) { //Khong phai edit\r\n Object.keys(captions).forEach(cap => {\r\n if (excludeFields && excludeFields.includes(cap)) return false; //Escapse fields in exclude field..\r\n if (action === 0 && keyForAdd && !keyForAdd.includes(cap)) return false; //Depend of keyForAdd when keyForAdd had inputed\r\n if (action === 3 && keyForRemove && !keyForRemove.includes(cap)) return false; //Depend of keyForRemove when keyForRemove had inputed\r\n const key = captions[cap] ? captions[cap] : \"data_\" + cap;\r\n const param = {data: newData, oldData: null, action: action, key: cap, item: {[key]: captions[cap]}, value: newData[cap]};\r\n obj[key] = (itemRender && itemRender(param, type, newData[cap])) ?? this._isEmpty(newData[cap]);\r\n });\r\n objDetail = this._createDetail(options);\r\n obj = Object.assign(obj, objDetail);\r\n } else {\r\n Object.keys(captions).forEach(cap => {\r\n if (excludeFields && excludeFields.includes(cap)) return false;\r\n if (keyForEdit && !keyForEdit.includes(cap)) return false; //Depend of keyForEdit when keyForEdit had inputed\r\n const key = captions[cap] ? captions[cap] : \"data_\" + cap;\r\n const param = {data: newData, oldData: dataOldCompare, action: action, key: cap, item: {[cap]: captions[cap]}};\r\n if (dataOldCompare[cap] !== newData[cap]) {\r\n isDiff = true;\r\n obj[key] = {\r\n old: (itemRender && itemRender({\r\n ...param,\r\n value: dataOldCompare[cap],\r\n }, type + \"_OLD\", dataOldCompare[cap])) ?? this._isEmpty(dataOldCompare[cap]),\r\n new: (itemRender && itemRender({\r\n ...param,\r\n value: newData[cap],\r\n }, type + \"_NEW\", newData[cap])) ?? this._isEmpty(newData[cap]),\r\n };\r\n } else {\r\n obj[key] = (itemRender && itemRender({\r\n ...param,\r\n value: newData[cap],\r\n }, type, newData[cap])) ?? this._isEmpty(newData[cap]);\r\n }\r\n });\r\n objDetail = this._createDetail(options);\r\n obj = Object.assign(obj, objDetail);\r\n }\r\n if (action !== 1) {\r\n return Object.keys(obj).length > 0 ? obj : null;\r\n } else {\r\n return (isDiff || objDetail) && Object.keys(obj).length > 0 ? obj : null;\r\n }\r\n };\r\n\r\n /**\r\n * Create key for data detail in Content value..\r\n * @param options\r\n * @param master\r\n * @returns object \"Content\"\r\n * @private\r\n */\r\n _createDetail = (options) => {\r\n const {detail} = options || this.options;\r\n const obj = {};\r\n if (detail && Object.keys(detail).length > 0) {\r\n Object.keys(detail).forEach(key => {\r\n obj[key] = detail[key];\r\n });\r\n }\r\n return Object.keys(obj).length > 0 ? obj : null;\r\n };\r\n\r\n /**\r\n * Init data to save history...\r\n * @param options\r\n * @param returnData\r\n * @returns {Promise\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {typeShort &&|} \r\n {!typeShort && {Config.lang(\"So_dong\")}}\r\n\r\n \r\n {typeShort && | }\r\n {!typeShort ? Config.lang(\"Tong\") + ':' : ''} {totalItems}\r\n ${nodeData[opts.nodeTitle]}
\r\n ${opts.nodeContent ? `${nodeData[opts.nodeContent]}
` : ''}\r\n `;\r\n // append 4 direction arrows or expand/collapse buttons\r\n let flags = nodeData.relationship || '';\r\n\r\n if (opts.verticalDepth && (level + 2) > opts.verticalDepth) {\r\n if ((level + 1) >= opts.verticalDepth && Number(flags.substr(2, 1))) {\r\n let toggleBtn = document.createElement('i'),\r\n icon = level + 1 >= opts.depth ? 'plus' : 'minus';\r\n\r\n toggleBtn.setAttribute('class', 'toggleBtn fa fa-' + icon + '-square');\r\n nodeDiv.appendChild(toggleBtn);\r\n }\r\n } else {\r\n if (Number(flags.substr(0, 1))) {\r\n let topEdge = document.createElement('i');\r\n\r\n topEdge.setAttribute('class', 'edge verticalEdge topEdge fa');\r\n nodeDiv.appendChild(topEdge);\r\n }\r\n if (Number(flags.substr(1, 1))) {\r\n let rightEdge = document.createElement('i'),\r\n leftEdge = document.createElement('i');\r\n\r\n rightEdge.setAttribute('class', 'edge horizontalEdge rightEdge fa');\r\n nodeDiv.appendChild(rightEdge);\r\n leftEdge.setAttribute('class', 'edge horizontalEdge leftEdge fa');\r\n nodeDiv.appendChild(leftEdge);\r\n }\r\n if (Number(flags.substr(2, 1))) {\r\n let bottomEdge = document.createElement('i'),\r\n symbol = document.createElement('i'),\r\n title = nodeDiv.querySelector(':scope > .title');\r\n\r\n bottomEdge.setAttribute('class', 'edge verticalEdge bottomEdge fa');\r\n nodeDiv.appendChild(bottomEdge);\r\n symbol.setAttribute('class', 'fa ' + opts.parentNodeSymbol + ' symbol');\r\n title.insertBefore(symbol, title.children[0]);\r\n }\r\n }\r\n\r\n nodeDiv.addEventListener('mouseenter', that._hoverNode.bind(that));\r\n nodeDiv.addEventListener('mouseleave', that._hoverNode.bind(that));\r\n nodeDiv.addEventListener('click', that._dispatchClickEvent.bind(that));\r\n if (opts.draggable) {\r\n nodeDiv.addEventListener('dragstart', that._onDragStart.bind(that));\r\n nodeDiv.addEventListener('dragover', that._onDragOver.bind(that));\r\n nodeDiv.addEventListener('dragend', that._onDragEnd.bind(that));\r\n nodeDiv.addEventListener('drop', that._onDrop.bind(that));\r\n }\r\n // allow user to append dom modification after finishing node create of orgchart\r\n if (opts.createNode) {\r\n opts.createNode(nodeDiv, nodeData);\r\n }\r\n\r\n resolve(nodeDiv);\r\n });\r\n }\r\n buildHierarchy(appendTo, nodeData, level, callback) {\r\n // Construct the node\r\n let that = this,\r\n opts = this.options,\r\n nodeWrapper,\r\n childNodes = nodeData.children,\r\n isVerticalNode = opts.verticalDepth && (level + 1) >= opts.verticalDepth;\r\n\r\n if (Object.keys(nodeData).length > 1) { // if nodeData has nested structure\r\n nodeWrapper = isVerticalNode ? appendTo : document.createElement('table');\r\n if (!isVerticalNode) {\r\n appendTo.appendChild(nodeWrapper);\r\n }\r\n this._createNode(nodeData, level)\r\n .then(function (nodeDiv) {\r\n if (isVerticalNode) {\r\n nodeWrapper.insertBefore(nodeDiv, nodeWrapper.firstChild);\r\n } else {\r\n let tr = document.createElement('tr');\r\n\r\n tr.innerHTML = `\r\n \r\n
\r\n \r\n \r\n {\r\n let tab = Number(Config.getLocalStorage(\"MENUTYPEDHR\"));\r\n if (tab === 2) tab = 0;\r\n this.toggleMenuESS(Number(tab));\r\n browserHistory.push({\r\n pathname: Config.getRootPath() + \"dashboard\",\r\n state: {\r\n mode: !isTab ? \"ESS\" : \"MSS\",\r\n },\r\n });\r\n }}\r\n >\r\n {Config.getSetting(\"LOGO_URL\") && \r\n \r\n )}\r\n
\r\n \r\n (Config.filters = ref)} />\r\n
\r\n \r\n this.redirectToGoalMenu(pathname, goalMenu)}\r\n >\r\n \r\n pathname !== \"W09F9000\" ? browserHistory.push(Config.getRootPath() + \"W09F9000\") : false\r\n }\r\n />\r\n (this.notify = ref)}\r\n renderItem={() => {\r\n return (\r\n <>\r\n \r\n {Config.lang(\"Thong_bao\")} \r\n \r\n \r\n \r\n this.onChangeTabNotify(e, \"ALL\")}\r\n />\r\n this.onChangeTabNotify(e, \"SPECIAL\")}\r\n />\r\n this.onChangeTabNotify(e, \"NORMAL\")}\r\n />\r\n \r\n \r\n \r\n
\r\n \r\n this.toggleMenuESS(0)}\r\n />\r\n this.toggleMenuESS(1)}\r\n />\r\n
\r\n \r\n
\r\n (this.listItemNotify = ref)}>\r\n {listNoty?.rows?.map((notify, idx) => {\r\n if (!notify) return null;\r\n const item = notify.payload || {};\r\n const user = Config.getUser({\r\n UserID: notify?.sender || \"\",\r\n });\r\n\r\n const avatar = user.UserPictureURL || Config.getCDNPath(notify.URL);\r\n\r\n const sender_name = user?.EmployeeName || item.sender_name;\r\n\r\n const schedule_des =\r\n Config.language === \"01\" ? item.schedule_desE : item.schedule_des;\r\n\r\n const voucher_des =\r\n Config.language === \"01\" ? item.voucher_desE : item.voucher_des;\r\n\r\n return (\r\n this.onClickNotify(item)}\r\n >\r\n
\r\n )}\r\n
\r\n );\r\n })}\r\n {!listNoty?.rows?.length && (\r\n \r\n \r\n {notify?.schedule\r\n ? schedule_des\r\n : `${sender_name} ${voucher_des} ${item.voucher_no}`}\r\n \r\n \r\n {Config.convertDate(\r\n notify.createdAt,\r\n \"\",\r\n \"DD/MM/YYYY LT\"\r\n )}\r\n \r\n
\r\n {idx !== listNoty.rows.length - 1 && (\r\n \r\n )}\r\n
\r\n
\r\n )}\r\n \r\n \r\n {Config.lang(\"Khong_co_thong_bao\")}\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n }}\r\n renderCursor={() => {\r\n return (\r\n \r\n
\r\n )}\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => ({\r\n filters: state.main.filters,\r\n badge: state.main.badge,\r\n listNoty: state.main.listNoty,\r\n }),\r\n dispatch => ({\r\n mainActions: bindActionCreators(mainActions, dispatch),\r\n homeActions: bindActionCreators(homeActions, dispatch),\r\n })\r\n)(Header);\r\n","/**\r\n * @copyright 2019 @ DigiNet\r\n * @author VINHLE\r\n * @create 2019/03/12 13:49\r\n * @update 2019/03/12 13:49\r\n */\r\n\r\nimport React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {Dropdown, MenuItem} from \"react-bootstrap\";\r\nimport DropdownToggle from \"react-bootstrap/es/DropdownToggle\";\r\nimport DropdownMenu from \"react-bootstrap/es/DropdownMenu\";\r\n\r\nclass DropdownToolbar extends Component {\r\n\r\n\r\n clickButton(value){\r\n if(value){\r\n if(value.onClick&&!value.disabled){\r\n value.onClick()\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n const {icon, buttonName,menuItem,disabled} = this.props;\r\n return (\r\n \r\n {filter && typeof filter === \"function\" ? filter() : filter}\r\n
\r\n \r\n this.toggleFilter(true)}\r\n />\r\n
\r\n }\r\n