\r\n {\r\n loading &&
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n loading: state.app.loading,\r\n});\r\n\r\nexport default connect(mapStateToProps)(AppLoading);\r\n","/* eslint-disable no-script-url */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useRef, useEffect } from \"react\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport ViLanguage from \"../../languages/vi\";\r\nimport * as statementActions from \"../../redux/store/statement/statement.store\";\r\nimport * as appActions from \"../../core/app.store\";\r\nimport * as acountAction from \"../../redux/store/account/account.store\";\r\nimport Modal from \"react-bootstrap/Modal\";\r\nimport { Button } from \"react-bootstrap\";\r\nimport ShowNotification from \"../../components/react-notifications/react-notifications\";\r\nimport * as viVN from \"../../languages/vi-VN.json\";\r\nimport {\r\n NotificationMessageType,\r\n} from \"../../utils/configuration\";\r\n\r\nconst LanguageCollect = ViLanguage;\r\n\r\n\r\nclass TopView extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n // this.getUserAccountDetail();\r\n }\r\n\r\n getUserAccountDetail() {\r\n acountAction.GetUserAccountDetail().then((res) => {\r\n if (res && res.content && res.content.id) {\r\n console.log('user account detail', res.content);\r\n } else {\r\n window.location = '/dang-nhap';\r\n }\r\n }).catch((err) => {\r\n window.location = '/dang-nhap';\r\n });\r\n }\r\n render() {\r\n return ();\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n isLoading: state.app.loading,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n showLoading: appActions.ShowLoading,\r\n getAllPlanningType: statementActions.PlanningTypeDispatch,\r\n },\r\n dispatch\r\n );\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(TopView);\r\n","import Service from \"../../../api/api-service\";\r\nimport { ApiUrl } from \"../../../api/api-url\";\r\n\r\nconst service = new Service();\r\n\r\nexport const GetDocumentType = () => {\r\n return service.get(ApiUrl.DocumentType).then(response => { return response }).catch(error => { throw error });\r\n}\r\n\r\nexport const SearchDocument = (data) => {\r\n const params = new URLSearchParams();\r\n params.append('pageIndex', data.pageIndex);\r\n params.append('pageSize', data.pageSize);\r\n data.name && params.append('name', data.name);\r\n data.documentTypeId && params.append('documentTypeId', data.documentTypeId);\r\n data.district && params.append('district', data.district);\r\n data.year && params.append('year', data.year);\r\n data.planningUnitId && params.append('planningUnitId', data.planningUnitId);\r\n data.approvalLevelId && params.append('approvalLevelId', data.approvalLevelId);\r\n data.planningTypeId && params.append('planningTypeId', data.planningTypeId);\r\n data.field && params.append('field', data.field);\r\n return service.get(ApiUrl.SearchDocument, params).then(response => { return response }).catch(error => { throw error });\r\n}\r\nexport const GetLookUpDistrict = () => {\r\n return service.get(ApiUrl.GetCmsLookupDistrict).then(response => { return response }).catch(error => { throw error });\r\n}\r\nexport const GetLookUpPlanningUnit = () => {\r\n return service.get(ApiUrl.GetLookUpPlanningUnit).then(response => { return response }).catch(error => { throw error });\r\n}\r\nexport const GetLookUpApprovalAgency = () => {\r\n return service.get(ApiUrl.GetLookUpApprovalAgency).then(response => { return response }).catch(error => { throw error });\r\n}\r\nexport const GetLookupCommune = () => {\r\n return service.get(ApiUrl.GetLookupCommune).then(response => { return response }).catch(error => { throw error });\r\n}\r\nexport const GetDocumentByPlanningId = (id) => {\r\n const params = new URLSearchParams();\r\n params.append('planningId', id);\r\n return service.get(ApiUrl.GetDocumentByPlanningId, params).then(response => { return response }).catch(error => { throw error });\r\n}\r\nexport const GetChildrenDocument = (planningId, parentId) => {\r\n const params = new URLSearchParams();\r\n params.append('planningId', planningId);\r\n params.append('parentId', parentId);\r\n return service.get(ApiUrl.GetChildrenDocument, params).then(response => { return response }).catch(error => { throw error });\r\n}\r\nexport const GetYearStatement = () => {\r\n return service.get(ApiUrl.GetYearStatement).then(response => { return response }).catch(error => { throw error });\r\n}\r\nexport const DownloadFile = (id) => {\r\n const params = new URLSearchParams();\r\n params.set('id', id);\r\n return service.getBinary(ApiUrl.DownloadFile, params).then(response => { return response }).catch(error => { throw error });\r\n}","import React from 'react';\r\nconst IMG_DEFAULT = \"../bg-login.png\"\r\n\r\nexport const LeftPopup = (props) => {\r\n const { img } = props;\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}","import React, { useEffect } from 'react';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport \"./../auth.scss\";\r\nimport { faKey, faUser } from '@fortawesome/free-solid-svg-icons';\r\nimport * as viVN from \"../../../languages/vi-VN.json\";\r\n\r\nexport const Login = (props) => {\r\n const { register, errors, setIsTabForgotPassword, setIsTabLogin, clearErrors } = props;\r\n\r\n const openTabForgotPassword = () => {\r\n setIsTabForgotPassword(true);\r\n setIsTabLogin(false);\r\n }\r\n\r\n useEffect(() => {\r\n clearErrors();\r\n }, [])\r\n\r\n return (\r\n \r\n
\r\n )\r\n}","import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport React, { useEffect, useRef } from 'react';\r\nimport \"./../auth.scss\";\r\nimport PhoneInput from 'react-phone-input-2';\r\nimport { faEnvelope, faKey, faUserAlt } from '@fortawesome/free-solid-svg-icons';\r\nimport * as viVN from \"../../../languages/vi-VN.json\";\r\n\r\nexport const Register = (props) => {\r\n const { register, watch, setError, clearErrors, getValues, errors, tel, setTel, isRegisterSuccess } = props;\r\n\r\n const password = useRef({});\r\n password.current = watch(\"password\", \"\");\r\n\r\n const onChangePassword = () => {\r\n const { password, confirmPassword } = getValues();\r\n password === confirmPassword\r\n ? clearErrors([\"confirmPassword\"])\r\n : setError(\"confirmPassword\", { type: \"validate\" });\r\n };\r\n\r\n const onCheckTel = (data) => {\r\n let err = false;\r\n if (!data) {\r\n setError(\"mobilePhone\", { type: \"required\" });\r\n err = true;\r\n } else if (data.toString().length < 10) {\r\n setError(\"mobilePhone\", { type: \"pattern\" });\r\n err = true;\r\n } else clearErrors([\"mobilePhone\"]);\r\n setTel(data);\r\n return err;\r\n };\r\n\r\n useEffect(() => {\r\n clearErrors();\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 Quên mật khẩu?\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n}","import React, { useEffect } from 'react';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport \"./../auth.scss\";\r\nimport { faArrowLeft, faUser, faUserCircle } from '@fortawesome/free-solid-svg-icons';\r\nimport { Link } from 'react-router-dom';\r\n\r\nexport const ForgotPassword = (props) => {\r\n const { register, errors, setIsTabForgotPassword, setIsTabLogin, clearErrors, isForgotSuccess, onHide } = props;\r\n\r\n const onOpenFormLogin = () => {\r\n setIsTabForgotPassword(false);\r\n setIsTabLogin(true);\r\n }\r\n\r\n useEffect(() => {\r\n clearErrors();\r\n }, [])\r\n\r\n return (\r\n \r\n {!isRegisterSuccess ?\r\n <>\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n onCheckTel(tel)}\r\n placeholder=\"Số điện thoại\"\r\n autoFormat={false}\r\n enableSearch={true}\r\n countryCodeEditable={false}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n value === password.current || \"Mật khẩu không trùng khớp\",\r\n })}\r\n name=\"confirmPassword\"\r\n className=\"form-control\"\r\n placeholder=\"Nhập lại mật khẩu\"\r\n />\r\n {errors.confirmPassword &&\r\n errors.confirmPassword.type === \"validate\" && (\r\n Mật khẩu không khớp\r\n )}\r\n
\r\n \r\n \r\n
\r\n :\r\n \r\n ![](\"./check.png\")
\r\n
\r\n }\r\n \r\n Đăng ký thành công
\r\n Bạn vui lòng truy cập Email để kích hoạt tài khoản\r\n\r\n
\r\n )\r\n}","import React, { useEffect, useState } from 'react';\r\nimport Modal from 'react-bootstrap/Modal';\r\nimport { useForm } from \"react-hook-form\";\r\nimport { useDispatch } from 'react-redux';\r\nimport {\r\n NotificationMessageType,\r\n TokenKey,\r\n setCookies,\r\n getUserInfo,\r\n removeCookies,\r\n DomainUserSide,\r\n GenerateDeviceId,\r\n} from \"../../utils/configuration\";\r\nimport * as viVN from \"../../languages/vi-VN.json\";\r\nimport * as accountAction from \"../../redux/store/account/account.store\";\r\nimport \"./auth.scss\";\r\nimport ShowNotification from '../react-notifications/react-notifications';\r\nimport { LeftPopup } from './leftPopup';\r\nimport { Login } from './login/login';\r\nimport { Register } from './register/register';\r\nimport { ForgotPassword } from './forgot-password/forgot-password';\r\nimport UrlCollect from '../../common/url-collect';\r\n\r\nexport const ModalAuthen = (props) => {\r\n const { register, handleSubmit, errors, setError, clearErrors, getValues, watch } = useForm({ mode: \"all\", reValidateMode: \"onBlur\" });\r\n const { show, onHide, showTabRegister, showTabLogin, returnUrl } = props;\r\n const dispatch = useDispatch();\r\n const [isTabLogin, setIsTabLogin] = useState(true);\r\n const [isTabRegister, setIsTabRegister] = useState(false);\r\n const [isTabForgotPassword, setIsTabForgotPassword] = useState(false);\r\n const [isRegisterSuccess, setIsRegisterSuccess] = useState(false);\r\n const [isForgotSuccess, setIsForgotSuccess] = useState(false);\r\n const [tel, setTel] = useState(\"\");\r\n\r\n const onCheckTel = (data) => {\r\n let err = false;\r\n if (!data) {\r\n setError(\"mobilePhone\", { type: \"required\" });\r\n err = true;\r\n } else if (data.toString().length < 10) {\r\n setError(\"mobilePhone\", { type: \"pattern\" });\r\n err = true;\r\n } else clearErrors([\"mobilePhone\"]);\r\n setTel(data);\r\n return err;\r\n };\r\n\r\n const onSubmit = (data) => {\r\n if (!data) return;\r\n if (isTabLogin && !isTabForgotPassword) {\r\n const DeviceId = GenerateDeviceId();\r\n accountAction\r\n .Login({\r\n email: data.email,\r\n password: data.password,\r\n rememberMe: true,\r\n returnUrl: returnUrl,\r\n DeviceId\r\n })\r\n .then(\r\n (res) => {\r\n if (res && res.content && res.content.token) {\r\n setCookies(TokenKey.token, res.content.token);\r\n setCookies(TokenKey.refreshToken, res.content.refreshToken);\r\n setCookies(TokenKey.DeviceId, DeviceId);\r\n setCookies(\"SHOW_FORM_LOGIN\", false);\r\n if (res.content.returnUrl) {\r\n window.location.replace(res.content.returnUrl);\r\n removeCookies(TokenKey.returnUrl);\r\n return;\r\n }\r\n\r\n let user = getUserInfo();\r\n dispatch(accountAction.login(user));\r\n onHide();\r\n } else {\r\n ShowNotification(\r\n viVN.Errors.UnableHandleException,\r\n NotificationMessageType.Error\r\n );\r\n }\r\n },\r\n (err) => {\r\n ShowNotification(\r\n viVN.Errors[(err && err.errorType) || \"UnableHandleException\"],\r\n NotificationMessageType.Error\r\n );\r\n }\r\n );\r\n }\r\n if (!isTabLogin && !isTabForgotPassword) {\r\n if (onCheckTel(tel)) return;\r\n accountAction\r\n .Register({\r\n email: data.email,\r\n password: data.password,\r\n confirmPassword: data.confirmPassword,\r\n phoneNumber: tel,\r\n fullName: data.fullName\r\n })\r\n .then(\r\n (res) => {\r\n setIsRegisterSuccess(true);\r\n },\r\n (err) => {\r\n ShowNotification(\r\n viVN.Errors[(err && err.errorType) || \"UnableHandleException\"],\r\n NotificationMessageType.Error\r\n );\r\n }\r\n );\r\n }\r\n if (isTabForgotPassword) {\r\n if (!data) return;\r\n accountAction\r\n .ForgotPassword({\r\n email: data.email,\r\n returnUrl: DomainUserSide + UrlCollect.ResetPassword,\r\n })\r\n .then(\r\n (res) => {\r\n setIsForgotSuccess(true);\r\n },\r\n (err) => {\r\n err &&\r\n err.errorType &&\r\n ShowNotification(\r\n viVN.Errors[err.errorType],\r\n NotificationMessageType.Error\r\n );\r\n }\r\n );\r\n }\r\n };\r\n\r\n const handleSelectTabLogin = () => {\r\n setIsTabForgotPassword(false);\r\n setIsTabRegister(false);\r\n setIsRegisterSuccess(false);\r\n setIsTabLogin(true);\r\n }\r\n\r\n const handleSelectTabRegister = () => {\r\n setIsTabForgotPassword(false);\r\n setIsTabLogin(false);\r\n setIsTabRegister(true)\r\n }\r\n\r\n useEffect(() => {\r\n if (!show) {\r\n setIsTabLogin(false);\r\n setIsTabForgotPassword(false);\r\n setIsRegisterSuccess(false);\r\n setIsForgotSuccess(false);\r\n setIsTabRegister(false);\r\n } else {\r\n setIsTabRegister(showTabRegister)\r\n setIsTabLogin(showTabLogin)\r\n }\r\n }, [show])\r\n\r\n return (\r\n \r\n
\r\n \r\n ![](\"./user.png\")
\r\n
\r\n {!isForgotSuccess &&\r\n <>\r\n \r\n Quên mật khẩu
\r\n {isForgotSuccess &&\r\n <>\r\n Một tin nhắn đặt lại mật khẩu đã được gửi tới email của bạn. Vui lòng kiểm tra!\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 Thông tin người dùng
\r\n\r\n \r\n \r\n {LanguageCollect.header_recordsManager}\r\n \r\n \r\n \r\n \r\n {LanguageCollect.header_reflect}\r\n \r\n \r\n {/* \r\n \r\n {LanguageCollect.header_map}\r\n \r\n */}\r\n \r\n \r\n {LanguageCollect.header_Contact}\r\n \r\n \r\n {windowWidth < 1024 && isLogin &&\r\n <>\r\n \r\n \r\n {LanguageCollect.user_info}\r\n \r\n \r\n \r\n \r\n Phản ánh kiến nghị\r\n \r\n \r\n \r\n \r\n Phản ánh của bạn\r\n \r\n \r\n \r\n \r\n {LanguageCollect.change_password}\r\n \r\n \r\n \r\n \r\n {LanguageCollect.header_logout}\r\n \r\n \r\n \r\n }\r\n {windowWidth >= 1024 &&\r\n <>\r\n \r\n \r\n \r\n \r\n {LanguageCollect.header_logIn}\r\n \r\n {isLogin &&\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 {this.state.infoAcount && (\r\n < RenderModalComponent infoAcount={this.state.infoAcount} showLoading={this.props.showLoading} onLogout={this.onLogout} isShowUserInfoModal={this.state.isShowUserInfoModal} handleCloseUserInfoModal={this.handleCloseUserInfoModal} />\r\n )}\r\n \r\n \r\n \r\n {LanguageCollect.header_lookUpPlanning}\r\n \r\n \r\n \r\n {LanguageCollect.header_syntheticPlanning}\r\n \r\n {this.state.planningType &&\r\n this.state.planningType.length > 0 &&\r\n this.state.planningType.map((item, index) => (\r\n \r\n {item.name}\r\n \r\n ))}\r\n \r\n \r\n {LanguageCollect.header_cityPlanning}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n this.setState({ openMenu: true })} /> :\r\n this.setState({ openMenu: false })} />\r\n }\r\n \r\n }\r\n \r\n \r\n
\r\n \r\n - \r\n {!isLogin &&\r\n
- \r\n \r\n \r\n \r\n }\r\n
- \r\n
\r\n {LanguageCollect.header_homePage}{\" \"}\r\n (current)\r\n \r\n \r\n - \r\n
- \r\n
\r\n\r\n\r\n - \r\n
\r\n {listLookupDistrict &&\r\n listLookupDistrict.length > 0 &&\r\n listLookupDistrict.map((item, index) => (\r\n {\r\n this.setState({ openMenu: false })\r\n }}\r\n to={`${UrlCollect.PlanningMap}?district=${item.id}`}\r\n className=\"dropdown-item\"\r\n >\r\n {item.name}\r\n \r\n ))}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\n\r\nfunction LoadingWithApiQueue(props) {\r\n return (\r\n \r\n
\r\n \r\n {LanguageDisplay.footer_titleName}\r\n
\r\n\r\n
\r\n \r\n Địa chỉ: {LanguageDisplay.footer_address}\r\n
\r\n \r\n
\r\n \r\n
\r\n {/* \r\n Phát triển bởi: Công ty cổ phần công nghệ xây dựng ACUD Việt Nam\r\n
*/}\r\n \r\n {\r\n (props.loadingQueue.length > 0) &&
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n loadingQueue: state.loadingState.loadingQueue,\r\n});\r\n\r\nexport default connect(mapStateToProps, null)(LoadingWithApiQueue);\r\n","import React, { useEffect, useState } from 'react';\r\nimport { DomainUserSide, getCookies, getUserInfo, setCookies } from 'utils/configuration';\r\nimport TopView from \"../top/top.view.jsx\";\r\nimport HeaderView from \"../header/header.view.jsx\";\r\nimport FooterView from \"../footer/footer.view.jsx\";\r\nimport LoadingWithApiQueue from \"../loading/loading-with-queue.view\";\r\nimport ShowNotification from 'components/react-notifications/react-notifications.js';\r\nimport * as viVN from \"../../languages/vi-VN.json\";\r\nimport { NotificationMessageType, } from \"../../utils/configuration\";\r\nimport \"./layout.scss\";\r\nimport { Link } from 'react-router-dom';\r\n\r\nexport default (props) => {\r\n const { children } = props;\r\n const [isShowFormLoginQLHS, setIsShowFormLoginQLHS] = useState(false);\r\n const [isCancelLogin, setIsCancelLogin] = useState(false);\r\n const [isRedirectHome, setIsRedirectHome] = useState(false);\r\n const showFormLogin = getCookies(\"SHOW_FORM_LOGIN\");\r\n const redirectHome = getCookies(\"IS_ADMIN\");\r\n const isLogin = getUserInfo() ? true : false;\r\n const isAdmin = getUserInfo() && (getUserInfo().userRoles.includes('ADMIN') || getUserInfo().userRoles.includes(\"XEMHOSO\")) ? true : false;\r\n useEffect(() => {\r\n setIsShowFormLoginQLHS(showFormLogin === 'true' || !isLogin)\r\n if (!isLogin) {\r\n setCookies(\"SHOW_FORM_LOGIN\", !isLogin);\r\n }\r\n }, [showFormLogin, isLogin])\r\n\r\n useEffect(() => {\r\n setIsRedirectHome(isLogin === true && !isAdmin)\r\n // if (!isAdmin) {\r\n setCookies(\"IS_ADMIN\", isAdmin);\r\n // }\r\n }, [isLogin, redirectHome, isAdmin])\r\n\r\n useEffect(() => {\r\n if (isCancelLogin) window.location.replace(DomainUserSide);\r\n }, [isCancelLogin])\r\n\r\n const showNotifi = () => {\r\n ShowNotification(\r\n viVN.Warning.NeedToLoginAdminToAccess,\r\n NotificationMessageType.Warning\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}","import React from \"react\";\r\nimport TopView from \"../top/top.view.jsx\";\r\nimport HeaderView from \"../header/header.view.jsx\";\r\nimport FooterView from \"../footer/footer.view.jsx\";\r\nimport LoadingWithApiQueue from \"../loading/loading-with-queue.view\";\r\n\r\nimport \"./layout.scss\";\r\n\r\nexport default class LayoutDesktopView extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n bodyHeight: null,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n const FooterContainerHeight = document.getElementsByClassName(\r\n \"footer-container\"\r\n )[0].offsetHeight;\r\n const HeaderContainerHeight = document.getElementsByClassName(\r\n \"header-container\"\r\n )[0].offsetHeight;\r\n\r\n this.setState({\r\n bodyHeight: {\r\n minHeight: `${\r\n window.innerHeight -\r\n FooterContainerHeight -\r\n HeaderContainerHeight -\r\n 10\r\n }px`,\r\n },\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n ← Trở về Trang chủ
\r\n\r\n
\r\n );\r\n }\r\n}\r\n","import React from \"react\";\r\nimport \"./layout.scss\";\r\n\r\nexport default class LayoutUserDesktopView extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n bodyWebStyle: null,\r\n };\r\n }\r\n\r\n render() {\r\n return (\r\n {this.props.children}
\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import React from 'react';\r\nimport './layout-map-page.scss';\r\nimport HeaderView from '../header/header.view.jsx';\r\nimport LoadingWithApiQueue from '../loading/loading-with-queue.view';\r\n\r\nexport default class LayoutMapPageView extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n return (\r\n {this.props.children}
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\n","import HeaderView from 'components/header/header.view';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { DomainUserSide, getCookies, getUserInfo, setCookies } from 'utils/configuration';\r\n\r\nexport const LayoutAuthen = (props) => {\r\n const { children } = props;\r\n const [isShowFormLogin, setIsShowFormLogin] = useState(false);\r\n const [isCancelLogin, setIsCancelLogin] = useState(false);\r\n const showFormLogin = getCookies(\"SHOW_FORM_LOGIN\");\r\n const isLogin = getUserInfo() ? true : false;\r\n\r\n useEffect(() => {\r\n setIsShowFormLogin(showFormLogin === 'true' || !isLogin)\r\n if (!isLogin) {\r\n setCookies(\"SHOW_FORM_LOGIN\", !isLogin);\r\n }\r\n }, [showFormLogin, isLogin])\r\n\r\n useEffect(() => {\r\n if (isCancelLogin) window.location.replace(DomainUserSide);\r\n }, [isCancelLogin])\r\n\r\n return (\r\n \r\n {this.props.children}\r\n
\r\n \r\n
\r\n )\r\n}","import React from 'react';\r\nimport { Link, useLocation } from 'react-router-dom';\r\nimport './layout-profile.scss';\r\nimport HeaderView from '../header/header.view.jsx';\r\nimport LoadingWithApiQueue from '../loading/loading-with-queue.view';\r\nimport { Grid } from '@material-ui/core';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faHeart, faLock, faSignOutAlt, faUser } from '@fortawesome/free-solid-svg-icons';\r\nimport UrlCollect from '../../common/url-collect';\r\nimport ViLanguage from \"../../languages/vi\";\r\nimport { DomainUserSide, removeCookies, setCookies, TokenKey } from 'utils/configuration';\r\nimport { LayoutAuthen } from '../layout-authen'\r\n\r\nconst LanguageCollect = ViLanguage;\r\n\r\nexport default function (props) {\r\n const { pathname } = useLocation();\r\n\r\n const onLogout = () => {\r\n removeCookies(TokenKey.token);\r\n removeCookies(TokenKey.refreshToken);\r\n window.location.replace(DomainUserSide);\r\n setCookies(\"SHOW_FORM_LOGIN\", true);\r\n setCookies(\"IS_ADMIN\", false);\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 {listNav.map((x) => (\r\n
\r\n {props.children}\r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n isLoading: state.app.loading,\r\n listPolygon: state.mapData.listPolygon\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n showLoading: appActions.ShowLoading,\r\n },\r\n dispatch\r\n );\r\n\r\nexport default (connect(mapStateToProps, mapDispatchToProps)(NewsHome));\r\n","import Service from \"../../../api/api-service\";\r\nimport { ApiUrl } from \"../../../api/api-url\";\r\n\r\nconst service = new Service();\r\n\r\nexport const GetListConsultantCommunity = (data) => {\r\n const params = new URLSearchParams();\r\n params.append(\"pageIndex\", data.pageIndex);\r\n params.append(\"pageSize\", data.pageSize);\r\n data.planningName && params.append(\"planningName\", data.planningName);\r\n data.planningType && params.append(\"planningType\", data.planningType);\r\n data.approvalLevel && params.append(\"approvalLevel\", data.approvalLevel);\r\n data.place && params.append(\"place\", data.place);\r\n data.planningAgency && params.append(\"planningAgency\", data.planningAgency);\r\n data.consultingUnit && params.append(\"consultingUnit\", data.consultingUnit);\r\n data.startTime && params.append(\"startTime\", data.startTime);\r\n data.endTime && params.append(\"endTime\", data.endTime);\r\n\r\n return service\r\n .get(ApiUrl.GetListConsultantCommunity, params)\r\n .then((res) => {\r\n return res;\r\n })\r\n .catch((err) => {\r\n throw err;\r\n });\r\n};\r\n\r\nexport const GetListResultConsultantCommunity = (data) => {\r\n const params = new URLSearchParams();\r\n params.append(\"pageIndex\", data.pageIndex);\r\n params.append(\"pageSize\", data.pageSize);\r\n data.planningName && params.append(\"planningName\", data.planningName);\r\n data.planningType && params.append(\"planningType\", data.planningType);\r\n data.approvalLevel && params.append(\"approvalLevel\", data.approvalLevel);\r\n data.place && params.append(\"place\", data.place);\r\n data.planningAgency && params.append(\"planningAgency\", data.planningAgency);\r\n data.consultingUnit && params.append(\"consultingUnit\", data.consultingUnit);\r\n data.startTime && params.append(\"startTime\", data.startTime);\r\n data.endTime && params.append(\"endTime\", data.endTime);\r\n\r\n return service\r\n .get(ApiUrl.GetListResultConsultantCommunity, params)\r\n .then((res) => {\r\n return res;\r\n })\r\n .catch((err) => {\r\n throw err;\r\n });\r\n};\r\n\r\nexport const GetDetailConsultantCommunity = (id) => {\r\n const params = new URLSearchParams();\r\n params.append(\"id\", id);\r\n\r\n return service\r\n .get(ApiUrl.GetDetailConsultantCommunity, params)\r\n .then((res) => {\r\n return res;\r\n })\r\n .catch((err) => {\r\n throw err;\r\n });\r\n};\r\n\r\nexport const GetDetailFormTemplate = (id) => {\r\n const params = new URLSearchParams();\r\n params.append(\"consultantCommunityId\", id);\r\n\r\n return service\r\n .get(ApiUrl.GetDetailFormTemplate, params)\r\n .then((res) => {\r\n return res;\r\n })\r\n .catch((err) => {\r\n throw err;\r\n });\r\n};\r\n\r\nexport const CreateFeedback = (data) => {\r\n return service\r\n .post(ApiUrl.CreateFeedback, data)\r\n .then((res) => {\r\n return res;\r\n })\r\n .catch((err) => {\r\n throw err;\r\n });\r\n};\r\n\r\nexport const GetListExpiredForm = (data) => {\r\n const params = new URLSearchParams();\r\n params.append(\"pageIndex\", data.pageIndex);\r\n params.append(\"pageSize\", data.pageSize);\r\n data.sortExpression && params.append(\"sortExpression\", data.sortExpression);\r\n data.title && params.append(\"title\", data.title);\r\n data.consultantCommunityId &&\r\n params.append(\"consultantCommunityId\", data.consultantCommunityId);\r\n\r\n return service\r\n .get(ApiUrl.GetListExpiredForm, params)\r\n .then((res) => {\r\n return res;\r\n })\r\n .catch((err) => {\r\n throw err;\r\n });\r\n};\r\n\r\nexport const GetReportFeedback = (id) => {\r\n const params = new URLSearchParams();\r\n params.append(\"templateId\", id);\r\n\r\n return service\r\n .get(ApiUrl.GetReportFeedback, params)\r\n .then((res) => {\r\n return res;\r\n })\r\n .catch((err) => {\r\n throw err;\r\n });\r\n};\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport './please-consult-the-community.scss'\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport * as appActions from \"../../../core/app.store\";\r\n\r\nimport * as consultantCommunityActions from \"../../../redux/store/consultant-community/consultant-community.store\";\r\nimport { APIUrlDefault } from \"../../../utils/configuration\";\r\nimport dateformat from \"dateformat\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faArrowLeft, faArrowRight } from \"@fortawesome/free-solid-svg-icons\";\r\n\r\nfunction PctCommunityHome(props) {\r\n const { showLoading } = props;\r\n\r\n //da xin y kien\r\n const [resultModel, setResultModel] = useState([]);\r\n const [firstResult, setFirstResult] = useState({})\r\n const [paging, setPaging] = useState();\r\n const [currentPage, setCurrentPage] = useState();\r\n const pageSize = 4;\r\n //dang xin y kien\r\n const [consulting, setConsulting] = useState([]);\r\n\r\n useEffect(() => {\r\n onGetData();\r\n }, []);\r\n\r\n const onGetData = () => {\r\n showLoading(true);\r\n Promise.all([\r\n\r\n onGetListExpiredForm({\r\n pageIndex: 1,\r\n pageSize: pageSize,\r\n }),\r\n onGetListConsultantCommunity({\r\n pageIndex: 1,\r\n pageSize: 2,\r\n })\r\n ])\r\n .then((res) => {\r\n showLoading(false);\r\n })\r\n .catch((err) => {\r\n showLoading(false);\r\n });\r\n };\r\n const onGetListConsultantCommunity = (data) => {\r\n return new Promise((resolve, reject) => {\r\n consultantCommunityActions.GetListConsultantCommunity(data).then(\r\n (res) => {\r\n setConsulting(\r\n res &&\r\n res.content &&\r\n res.content.items &&\r\n res.content.items.length > 0\r\n ? res.content.items\r\n : []\r\n );\r\n resolve(res);\r\n },\r\n (err) => {\r\n reject(err);\r\n }\r\n );\r\n });\r\n };\r\n const onGetListExpiredForm = (data) => {\r\n return new Promise((resolve, reject) => {\r\n consultantCommunityActions.GetListResultConsultantCommunity(data).then(\r\n (res) => {\r\n setResultModel(\r\n res &&\r\n res.content &&\r\n res.content.items &&\r\n res.content.items.length > 0\r\n ? res.content.items\r\n : []\r\n );\r\n setPaging(res.content);\r\n setCurrentPage(res.content.pageIndex);\r\n setFirstResult(res.content.items[0])\r\n resolve(res);\r\n },\r\n (err) => {\r\n reject(err);\r\n }\r\n );\r\n });\r\n };\r\n\r\n const getNextPage = () => {\r\n let nextPage = 1;\r\n if (currentPage > 0) {\r\n nextPage = currentPage + 1;\r\n }\r\n onGetListExpiredForm({\r\n pageIndex: nextPage,\r\n pageSize: pageSize\r\n })\r\n }\r\n\r\n const getPreviousPage = () => {\r\n let prePage = 1;\r\n if (currentPage > 1) {\r\n prePage = currentPage - 1;\r\n }\r\n onGetListExpiredForm({\r\n pageIndex: prePage,\r\n pageSize: pageSize\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 {hotNews && hotNews.id >0 ? (\r\n
\r\n \r\n
\r\n ):(\r\n \r\n \r\n \r\n (e.target.src = require(\"../../../assets/image/noImage.png\"))\r\n }\r\n alt={hotNews.title}\r\n />\r\n \r\n
\r\n {hotNews.title}\r\n {dateformat(hotNews.created_date, \"dd/mm/yyyy\")}
\r\n \r\n \r\n \r\n {/* Xem thêm\r\n \r\n */}\r\n Chưa có dữ liệu để hiển thị!
\r\n )}\r\n \r\n
\r\n \r\n {newsModel && newsModel.length >0 ? (\r\n \r\n newsModel.slice(1).map((item,index) => (\r\n
\r\n \r\n
\r\n ))\r\n ):(\r\n \r\n \r\n \r\n (e.target.src = require(\"../../../assets/image/noImage.png\"))\r\n }\r\n alt={item.title}\r\n />\r\n \r\n
\r\n \r\n {item.title}\r\n
\r\n {dateformat(item.created_date, \"dd/mm/yyyy\")}
\r\n {/* \r\n Xem thêm\r\n \r\n */}\r\n Chưa có dữ liệu để hiển thị!
\r\n )}\r\n\r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n isLoading: state.app.loading,\r\n listPolygon: state.mapData.listPolygon\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n showLoading: appActions.ShowLoading,\r\n },\r\n dispatch\r\n );\r\n\r\nexport default (connect(mapStateToProps, mapDispatchToProps)(PctCommunityHome));\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport * as homePageAction from \"../../../redux/store/home-page/home-page.store\";\r\nimport './lookupPlanning.scss'\r\nimport { APIUrlDefault } from \"../../../utils/configuration\";\r\nimport dateformat from \"dateformat\";\r\nimport { LazyLoadImage } from 'react-lazy-load-image-component';\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faArrowLeft, faArrowRight } from \"@fortawesome/free-solid-svg-icons\";\r\nexport const LookupPlanningType = (props) => {\r\n const {\r\n showLoading,\r\n planningTypeId,\r\n planningName,\r\n } = props;\r\n\r\n const [listResult, setListResult] = useState([]);\r\n const [paging, setPaging] = useState();\r\n const [currentPage, setCurrentPage] = useState();\r\n const [firstPlanning, setFirstPlanning] = useState({});\r\n const pageSize = 4;\r\n useEffect(() => {\r\n onGetData();\r\n }, []);\r\n\r\n const onGetData = () => {\r\n showLoading(true);\r\n Promise.all([\r\n onGetPlanningSearchByIdName({\r\n planningTypeId,\r\n pageIndex: 1,\r\n pageSize: pageSize,\r\n }),\r\n ])\r\n .then((res) => {\r\n showLoading(false);\r\n })\r\n .catch((err) => {\r\n showLoading(false);\r\n });\r\n };\r\n\r\n\r\n const onGetPlanningSearchByIdName = (data) => {\r\n return new Promise((resolve, reject) => {\r\n homePageAction.GetPlanningSearchByIdNameHome(data.planningTypeId, data.pageIndex, data.pageSize)\r\n .then((res) => {\r\n setListResult(\r\n res &&\r\n res.content &&\r\n res.content.items\r\n && res.content.items.length > 0 ? res.content.items : []\r\n );\r\n setPaging(res.content);\r\n setCurrentPage(res.content.pageIndex);\r\n setFirstPlanning(res.content.items[0]);\r\n\r\n resolve(res);\r\n },\r\n (err) => {\r\n reject(err);\r\n })\r\n\r\n })\r\n }\r\n\r\n const getNextPage = () => {\r\n let nextPage = 1;\r\n if (currentPage > 0) {\r\n nextPage = currentPage + 1;\r\n }\r\n onGetPlanningSearchByIdName({\r\n pageIndex: nextPage,\r\n planningTypeId,\r\n pageSize: pageSize\r\n })\r\n }\r\n\r\n const getPreviousPage = () => {\r\n let prePage = 1;\r\n if (currentPage > 1) {\r\n prePage = currentPage - 1;\r\n }\r\n onGetPlanningSearchByIdName({\r\n pageIndex: prePage,\r\n planningTypeId,\r\n pageSize: pageSize\r\n })\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n {consulting && consulting.length > 0 ? (\r\n \r\n
\r\n \r\n
\r\n Xin ý kiến cộng đồng
\r\n\r\n
\r\n ) : (\r\n \r\n
\r\n \r\n QUY HOẠCH ĐANG XIN Ý KIẾN\r\n
\r\n \r\n {consulting.map((item, index) => (\r\n
\r\n \r\n
\r\n ))}\r\n \r\n \r\n \r\n (e.target.src = require(\"../../../assets/image/noImage.png\"))\r\n }\r\n alt={item.planningName}\r\n />\r\n \r\n
\r\n\r\n \r\n \r\n {item.planningName}\r\n \r\n
\r\n \r\n {dateformat(item.startTime, \"dd/mm/yyyy\")} - {dateformat(item.endTime, \"dd/mm/yyyy\")}\r\n
\r\n \r\n {item.title}\r\n \r\n \r\n
\r\n \r\n KẾT QUẢ XIN Ý KIẾN\r\n \r\n
\r\n\r\n \r\n {resultModel && resultModel.length > 0 ? (\r\n // resultModel.slice(1).map((item, index) => (\r\n resultModel.map((item, index) => (\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 (e.target.src = require(\"../../../assets/image/noImage.png\"))\r\n }\r\n alt={item.planningName}\r\n />\r\n
\r\n \r\n \r\n {item.planningName}\r\n
\r\n {dateformat(item.publishDate, \"dd/mm/yyyy\")}
\r\n Chưa có dữ liệu để hiển thị!
)}\r\n \r\n
\r\n )}\r\n\r\n \r\n KẾT QUẢ XIN Ý KIẾN\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n (e.target.src = require(\"../../../assets/image/noImage.png\"))\r\n }\r\n alt={firstResult.planningName}\r\n />\r\n
\r\n {firstResult.planningName}
\r\n \r\n{dateformat(firstResult.publishDate, \"dd/mm/yyyy\")}
\r\n {firstResult.title}\r\n \r\n
\r\n \r\n {resultModel && resultModel.length > 0 ? (\r\n // resultModel.slice(1).map((item, index) => (\r\n resultModel.map((item, index) => (\r\n
\r\n \r\n
\r\n ))\r\n ) : (\r\n \r\n
\r\n\r\n \r\n \r\n (e.target.src = require(\"../../../assets/image/noImage.png\"))\r\n }\r\n alt={item.planningName}\r\n />\r\n
\r\n \r\n \r\n {item.planningName}\r\n
\r\n {dateformat(item.publishDate, \"dd/mm/yyyy\")}
\r\n Chưa có dữ liệu để hiển thị!
)}\r\n \r\n
\r\n\r\n )\r\n}\r\n\r\n","import React from \"react\";\r\nimport './lookupPlanning.scss'\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport * as appActions from \"../../../core/app.store\";\r\nimport { LookupPlanningType } from \"./lookupPlanningType.view\"\r\n\r\nfunction LookupPlanningHome(props) {\r\n const { showLoading } = props;\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 (e.target.src = require(\"../../../assets/image/noImage.png\"))\r\n }\r\n alt={firstPlanning.photo}>\r\n \r\n \r\n
\r\n {dateformat(firstPlanning.publishDate, \"dd/mm/yyyy\")}
\r\n \r\n {firstPlanning.name}
\r\n \r\n\r\n
\r\n \r\n {listResult.slice(1).map((item, index) => (\r\n
\r\n \r\n
\r\n ))}\r\n \r\n \r\n \r\n (e.target.src = require(\"../../../assets/image/noImage.png\"))\r\n }\r\n alt={item.photo}>\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {item.name}
\r\n \r\n{dateformat(item.publishDate, \"dd/mm/yyyy\")}
\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\nconst mapStateToProps = (state) => ({\r\n isLoading: state.app.loading,\r\n listPolygon: state.mapData.listPolygon\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n showLoading: appActions.ShowLoading,\r\n },\r\n dispatch\r\n );\r\n\r\n\r\nexport default (connect(mapStateToProps, mapDispatchToProps)(LookupPlanningHome));;","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport Slider from \"react-slick\";\r\n\r\nimport { geolocated } from \"react-geolocated\";\r\nimport { AsyncPaginate } from \"react-select-async-paginate\";\r\n\r\nimport * as homePageStore from \"../../redux/store/home-page/home-page.store\";\r\nimport * as appActions from \"../../core/app.store\";\r\nimport NewsHome from './news/news.view';\r\nimport PctCommunityHome from \"./please-consult-the-community/please-consult-the-community.view\";\r\nimport LookupPlanningHome from \"./look-up-planning/lookupPlanning.view\";\r\nimport UrlCollect from \"../../common/url-collect\";\r\nimport history from \"../../common/history\";\r\nimport {\r\n APIUrlDefault,\r\n changeAlias,\r\n getUserInfo,\r\n NotificationMessageType,\r\n NotificationPosition,\r\n} from \"../../utils/configuration\";\r\nimport * as MapDataStore from \"../../redux/store/map-data/map-data.store\";\r\n\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport \"./home.scss\";\r\nimport ShowNotification from \"../../components/react-notifications/react-notifications\";\r\nimport * as viVN from \"../../languages/vi-VN.json\";\r\nimport * as mapHelper from \"../../common/map\";\r\n//import { open } from \"inspector\";\r\n\r\n\r\nfunction HomeDesktop(props) {\r\n const { showLoading } = props;\r\n\r\n const isLogin = getUserInfo() ? true : false;\r\n\r\n const settingSlider = {\r\n dots: true,\r\n infinite: true,\r\n speed: 1000,\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n arrows: false,\r\n autoplay: true,\r\n autoplaySpeed: 3000,\r\n };\r\n const [filteredSuggestions, setFilteredSuggestions] = useState([]);\r\n const [local, setLocal] = useState({})\r\n const [slideShow, setSlideShow] = useState([]);\r\n const [projectList, setProjectList] = useState();\r\n const [commentInput, setCommentInput] = useState(\"\");\r\n const [currentPosition, setCurrentPosition] = useState({\r\n latitude: null,\r\n longitude: null,\r\n altitude: null,\r\n accuracy: null,\r\n altitudeAccuracy: null,\r\n heading: null,\r\n speed: null,\r\n });\r\n const [openSearchPlace, setOpenSearchPlace] = useState(true);\r\n const [openSearchXy, setOpenSearchXy] = useState(false);\r\n const [openSearchLatLng, setOpenSearchLatLng] = useState(false);\r\n\r\n useEffect(() => {\r\n onGetData();\r\n //props.GetAllPlanningBoundariesGeomText();\r\n }, []);\r\n\r\n const onGetData = () => {\r\n showLoading(true);\r\n Promise.all([\r\n onGetSlideShow(),\r\n onGetAllPlanningByTypeId(),\r\n onGetCurrentPosition(),\r\n ])\r\n .then((res) => {\r\n showLoading(false);\r\n })\r\n .catch((err) => {\r\n showLoading(false);\r\n });\r\n };\r\n\r\n const onGetSlideShow = () => {\r\n return new Promise((resolve, reject) => {\r\n props\r\n .getSlideShow()\r\n .then((res) => {\r\n setSlideShow(res && res.content && res.content.length > 0 ? res.content : []);\r\n resolve(res);\r\n })\r\n .catch((err) => reject(err));\r\n });\r\n };\r\n\r\n const SearchPlanningByLatLng = (lng, lat) => {\r\n return new Promise((resolve,reject) => {\r\n homePageStore.SearchPlanningByLatLng(lng,lat).then((res) => {\r\n resolve(res); \r\n })\r\n .catch((err) => reject(err));\r\n });\r\n }\r\n\r\n const onGetAllPlanningByTypeId = (id) => {\r\n return new Promise((resolve, reject) => {\r\n props\r\n .getAllPlanningByTypeId(id)\r\n .then((res) => {\r\n setProjectList(\r\n res && res.content && res.content.length > 0\r\n ? res.content.map((item) => {\r\n return {\r\n value: item.id,\r\n label: item.name,\r\n key: item.planningTypeId,\r\n labelTemp: changeAlias(item.name),\r\n };\r\n })\r\n : []\r\n );\r\n resolve(res);\r\n })\r\n .catch((err) => reject(err));\r\n });\r\n };\r\n\r\n const onGetCurrentPosition = () => {\r\n return new Promise((resolve, reject) => {\r\n navigator.geolocation.getCurrentPosition(\r\n (position) => {\r\n setCurrentPosition(position.coords);\r\n resolve(position);\r\n },\r\n (error) => {\r\n reject(error);\r\n }\r\n );\r\n });\r\n };\r\n\r\n const handleSelectAddress = (address) => {\r\n homePageStore.GetLatLngPlace(address.label)\r\n .then((res) => res.result[0])\r\n .then((result) => result.location)\r\n .then((latLng) => {\r\n SearchPlanningByLatLng(latLng.lng, latLng.lat).then((res) => {\r\n if (res.content === 0) {\r\n ShowNotification(\r\n viVN.Errors.CoordinateOutSidePolygon,\r\n NotificationMessageType.Warning,\r\n NotificationPosition.Center\r\n );\r\n history.push(`${UrlCollect.SyntheticPlanning}?lat=${latLng.lat}&lng=${latLng.lng}&searchType=place`);\r\n } else {\r\n history.push(`${UrlCollect.PlanningMapViewDetail}${res.content}?lat=${latLng.lat}&lng=${latLng.lng}&searchType=place`);\r\n }\r\n })\r\n })\r\n .catch();\r\n };\r\n\r\n const onChangeProject = (data) => {\r\n data && history.push(`${UrlCollect.PlanningMap}/${data.value}`);\r\n };\r\n\r\n const sleep = (ms) =>\r\n new Promise((resolve) => {\r\n setTimeout(() => {\r\n resolve();\r\n }, ms);\r\n });\r\n\r\n const loadOptions = async (search, prevOptions) => {\r\n await sleep(500);\r\n let arr = [];\r\n let filteredOptions;\r\n let filteredOptions1;\r\n if (!search) {\r\n filteredOptions = projectList;\r\n } else {\r\n const searchLower = changeAlias(search);\r\n\r\n filteredOptions = projectList.filter(({ labelTemp }) =>\r\n labelTemp.toLowerCase().includes(searchLower)\r\n );\r\n if (!(filteredOptions.length > 0)) {\r\n let searchArray = searchLower.split(\" \");\r\n filteredOptions1 = projectList.filter(({ labelTemp }) => {\r\n arr = searchArray.filter((item) => labelTemp.includes(item));\r\n if (arr.length === searchArray.length) return true;\r\n });\r\n const hasMore = filteredOptions.length > prevOptions.length + 10;\r\n const slicedOptions = filteredOptions1.slice(\r\n prevOptions.length,\r\n prevOptions.length + 10\r\n );\r\n\r\n return {\r\n options: slicedOptions,\r\n hasMore,\r\n };\r\n }\r\n }\r\n\r\n const hasMore = filteredOptions.length > prevOptions.length + 10;\r\n const slicedOptions = filteredOptions.slice(\r\n prevOptions.length,\r\n prevOptions.length + 10\r\n );\r\n\r\n return {\r\n options: slicedOptions,\r\n hasMore,\r\n };\r\n };\r\n const Options = async (search, loadedOptions) => {\r\n if (search.length >= 4) {\r\n homePageStore.GetLatLngPlace(search)\r\n .then((res) => {\r\n setFilteredSuggestions(res && res.result && res.result.length > 0 ? res.result : [])\r\n })\r\n .catch();\r\n }\r\n await sleep(500)\r\n const addressSuggestions = filteredSuggestions.map((item, index) => {\r\n return ({\r\n value: index,\r\n label: item.address\r\n })\r\n\r\n })\r\n return {\r\n options: addressSuggestions,\r\n\r\n }\r\n\r\n }\r\n const handleOpenLatLng = () => {\r\n setOpenSearchLatLng(true);\r\n setOpenSearchPlace(false);\r\n setOpenSearchXy(false);\r\n }\r\n\r\n const handleOpenCoordinate = () => {\r\n setOpenSearchLatLng(false);\r\n setOpenSearchPlace(true);\r\n setOpenSearchXy(false);\r\n };\r\n\r\n const handleOpenPlace = () => {\r\n setOpenSearchLatLng(false);\r\n setOpenSearchPlace(false);\r\n setOpenSearchXy(true);\r\n };\r\n\r\n const searchCoordinate = (event) => {\r\n event.preventDefault();\r\n let value = commentInput?.value?.trim();\r\n if (!value) return;\r\n \r\n let coordinateList = value.split(\",\");\r\n if (coordinateList && coordinateList.length === 2) {\r\n let x = parseFloat(coordinateList[0]);\r\n let y = parseFloat(coordinateList[1]);\r\n console.log('lat', x,'lng', y)\r\n\r\n if (openSearchXy === true) {\r\n homePageStore.GetVn2000ToWgs84(y, x).then((res) => {\r\n SearchPlanningByLatLng(res[0],res[1]).then((result) => {\r\n if (result.content === 0) {\r\n ShowNotification(\r\n viVN.Errors.CoordinateOutSidePolygon,\r\n NotificationMessageType.Warning,\r\n NotificationPosition.Center\r\n );\r\n history.push(`${UrlCollect.SyntheticPlanning}?lat=${res[1]}&lng=${res[0]}&searchType=place`);\r\n } else {\r\n history.push(`${UrlCollect.PlanningMapViewDetail}${result.content}?lat=${res[1]}&lng=${res[0]}&searchType=place`);\r\n }\r\n })\r\n })\r\n }\r\n if (openSearchLatLng === true) {\r\n SearchPlanningByLatLng(y, x).then((res) => {\r\n if (res.content === 0) {\r\n ShowNotification(\r\n viVN.Errors.CoordinateOutSidePolygon,\r\n NotificationMessageType.Warning,\r\n NotificationPosition.Center\r\n );\r\n history.push(`${UrlCollect.SyntheticPlanning}?lat=${x}&lng=${y}&searchType=place`);\r\n } else {\r\n history.push(`${UrlCollect.PlanningMapViewDetail}${res.content}?lat=${x}&lng=${y}&searchType=place`);\r\n }\r\n }) .catch()\r\n }\r\n }\r\n };\r\n\r\n const classnames = (...args) => {\r\n const classes = [];\r\n args.forEach((arg) => {\r\n if (typeof arg === \"string\") {\r\n classes.push(arg);\r\n } else if (typeof arg === \"object\" && arg !== null) {\r\n Object.keys(arg).forEach((key) => {\r\n if (arg[key]) {\r\n classes.push(key);\r\n }\r\n });\r\n } else {\r\n throw new Error(\r\n \"`classnames` only accepts string or object as arguments\"\r\n );\r\n }\r\n });\r\n\r\n return classes.join(\" \");\r\n };\r\n\r\n const handleClickCurrentLocation = () => {\r\n let currentPositionTemp = currentPosition;\r\n\r\n if (!currentPositionTemp) {\r\n navigator.geolocation.getCurrentPosition((position) => {\r\n currentPositionTemp = position;\r\n })\r\n }\r\n\r\n if (currentPositionTemp.latitude && currentPositionTemp.longitude) {\r\n console.log(\"currentPositionTemp\",currentPositionTemp);\r\n // if (isInside) {\r\n // history.push(\r\n // `${UrlCollect.PlanningMapViewDetail}2?lng=${currentPositionTemp.longitude}&lat=${currentPositionTemp.latitude}&searchType=codinate`\r\n // );\r\n // } else {\r\n // ShowNotification(\r\n // viVN.Errors.CoordinateOutSidePolygon,\r\n // NotificationMessageType.Warning,\r\n // NotificationPosition.Center\r\n // );\r\n // }\r\n SearchPlanningByLatLng(currentPositionTemp.longitude, currentPositionTemp.latitude).then((res) => {\r\n if (res.content === 0) {\r\n ShowNotification(\r\n viVN.Errors.CoordinateOutSidePolygon,\r\n NotificationMessageType.Warning,\r\n NotificationPosition.Center\r\n );\r\n history.push(`${UrlCollect.SyntheticPlanning}`);\r\n } else {\r\n history.push(`${UrlCollect.PlanningMapViewDetail}${res.content}?lat=${currentPositionTemp.latitude}&lng=${currentPositionTemp.longitude}&searchType=place`);\r\n }\r\n }) .catch()\r\n } else {\r\n ShowNotification(\r\n viVN.Errors.OpenCoordinateCurrent,\r\n NotificationMessageType.Error,\r\n NotificationPosition.TopRight\r\n );\r\n }\r\n };\r\n\r\n const handlePlacesError = (status, clearSuggestions) => {\r\n clearSuggestions();\r\n };\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n isLoading: state.app.loading,\r\n listPolygon: state.mapData.listPolygon,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n showLoading: appActions.ShowLoading,\r\n getSlideShow: homePageStore.GetSlideShow,\r\n getAllPlanningByTypeId: homePageStore.GetAllPlanningByTypeId,\r\n GetAllPlanningBoundariesGeomText:\r\n MapDataStore.GetAllPlanningBoundariesGeomText,\r\n },\r\n dispatch\r\n );\r\n\r\nexport default geolocated({\r\n positionOptions: {\r\n enableHighAccuracy: false,\r\n },\r\n userDecisionTimeout: 5000,\r\n})(connect(mapStateToProps, mapDispatchToProps)(HomeDesktop));\r\n","// Copyright (c) 2017 PlanGrid, Inc.\r\n\r\nimport React from 'react';\r\n\r\nimport '../styles/error.scss';\r\n\r\nconst Error = props => (\r\n \r\n
\r\n {slideShow && slideShow.length > 0 && (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \"Không có dữ liệu\"}\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 {slideShow.map(\r\n (item, index) =>\r\n item.status && (\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 \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 {props.errorComponent\r\n ?
\r\n);\r\n\r\nexport default Error;\r\n","// Copyright (c) 2017 PlanGrid, Inc.\r\n\r\nimport React from 'react';\r\n\r\nimport '../styles/loading.scss';\r\n\r\nconst Loading = () => (\r\n File tải lên bị lỗi vui lòng liên hệ với admin để trợ giúp
}\r\n\r\n \r\n
\r\n);\r\n\r\nexport default Loading;\r\n","/* eslint-disable no-undef */\r\n// Copyright (c) 2017 PlanGrid, Inc.\r\n\r\nimport React, { Component } from 'react';\r\n\r\nimport Error from './error';\r\nimport Loading from './loading';\r\n\r\nfunction withFetching(WrappedComponent, props) {\r\n return class extends Component {\r\n constructor(props) { // eslint-disable-line no-shadow\r\n super(props);\r\n this.state = {};\r\n this.xhr = this.createRequest(props.filePath);\r\n }\r\n\r\n componentDidMount() {\r\n try {\r\n this.fetch();\r\n } catch (e) {\r\n if (this.props.onError) {\r\n this.props.onError(e);\r\n }\r\n this.setState({ error: 'fetch error' });\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.abort();\r\n }\r\n\r\n createRequest(path) {\r\n let xhr = new XMLHttpRequest();\r\n\r\n if ('withCredentials' in xhr) {\r\n // XHR for Chrome/Firefox/Opera/Safari.\r\n xhr.open('GET', path, true);\r\n } else if (typeof XDomainRequest !== 'undefined') {\r\n // XDomainRequest for IE.\r\n xhr = new XDomainRequest();\r\n xhr.open('GET', path);\r\n } else {\r\n // CORS not supported.\r\n xhr = null;\r\n return null;\r\n }\r\n if (props.responseType) {\r\n xhr.responseType = props.responseType;\r\n }\r\n\r\n xhr.onload = () => {\r\n if (xhr.status >= 400) {\r\n this.setState({ error: `fetch error with status ${xhr.status}` });\r\n return;\r\n }\r\n const resp = props.responseType ? xhr.response : xhr.responseText;\r\n\r\n this.setState({ data: resp });\r\n };\r\n\r\n return xhr;\r\n }\r\n\r\n fetch() {\r\n this.xhr.send();\r\n }\r\n\r\n abort() {\r\n if (this.xhr) {\r\n this.xhr.abort();\r\n }\r\n }\r\n\r\n render() {\r\n if (!this.xhr) {\r\n return CORS not supported..
;\r\n }\r\n\r\n if (this.state.error) {\r\n return\r\n {this.props.disableVisibilityCheck ?
\r\n );\r\n }\r\n}\r\n\r\nexport default class PDFDriver extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n pdf: null,\r\n zoom: 0,\r\n percent: 0,\r\n };\r\n\r\n this.increaseZoom = this.increaseZoom.bind(this);\r\n this.reduceZoom = this.reduceZoom.bind(this);\r\n this.resetZoom = this.resetZoom.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n const { filePath } = this.props;\r\n const containerWidth = this.container.offsetWidth;\r\n PDFJS.getDocument(filePath, null, null, this.progressCallback.bind(this)).then((pdf) => {\r\n this.setState({ pdf, containerWidth });\r\n });\r\n }\r\n\r\n setZoom(zoom) {\r\n this.setState({\r\n zoom,\r\n });\r\n }\r\n\r\n progressCallback(progress) {\r\n const percent = ((progress.loaded / progress.total) * 100).toFixed();\r\n this.setState({ percent });\r\n }\r\n\r\n reduceZoom() {\r\n if (this.state.zoom === 0) return;\r\n this.setZoom(this.state.zoom - 1);\r\n }\r\n\r\n increaseZoom() {\r\n this.setZoom(this.state.zoom + 1);\r\n }\r\n\r\n resetZoom() {\r\n this.setZoom(0);\r\n }\r\n\r\n renderPages() {\r\n const { pdf, containerWidth, zoom } = this.state;\r\n if (!pdf) return null;\r\n const pages = Array.apply(null, { length: pdf.numPages });\r\n return pages.map((v, i) => (\r\n (LOADING ({this.state.percent}%)
);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nPDFDriver.defaultProps = {\r\n disableVisibilityCheck: false,\r\n};\r\n","// Copyright (c) 2017 PlanGrid, Inc.\r\n\r\nimport React, { Component } from \"react\";\r\nimport mammoth from \"mammoth\";\r\n\r\nimport \"../../styles/docx.scss\";\r\n\r\nexport default class extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n percent: 0,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n const jsonFile = new XMLHttpRequest();\r\n jsonFile.upload.addEventListener(\r\n \"progress\",\r\n this.progressCallback.bind(this)\r\n );\r\n jsonFile.addEventListener(\"progress\", this.progressCallback.bind(this));\r\n jsonFile.open(\"GET\", this.props.filePath, true);\r\n jsonFile.send();\r\n jsonFile.responseType = \"arraybuffer\";\r\n jsonFile.onreadystatechange = () => {\r\n if (jsonFile.readyState === 4 && jsonFile.status === 200) {\r\n mammoth\r\n .convertToHtml(\r\n { arrayBuffer: jsonFile.response },\r\n { includeDefaultStyleMap: true }\r\n )\r\n .then((result) => {\r\n const docEl = document.createElement(\"div\");\r\n docEl.className = \"document-container\";\r\n docEl.innerHTML = result.value;\r\n document.getElementById(\"docx\").innerHTML = docEl.outerHTML;\r\n })\r\n .catch((a) => {\r\n console.log(\"alexei: something went wrong\", a);\r\n })\r\n .done();\r\n }\r\n };\r\n }\r\n\r\n progressCallback(progress) {\r\n let percent = (progress.loaded / progress.total) * 100;\r\n percent = (percent > 89 ? 89 : percent).toFixed();\r\n this.setState({ percent });\r\n }\r\n\r\n renderLoading() {\r\n return this.container = node} >\r\n
\r\n \r\n
\r\n {this.renderLoading()}\r\n {this.renderPages()}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n LOADING ({this.state.percent}%)
;\r\n }\r\n\r\n render() {\r\n return {this.renderLoading()}
;\r\n }\r\n}\r\n","// Copyright (c) 2017 PlanGrid, Inc.\r\n\r\nimport React, { Component } from 'react';\r\n\r\nimport '../../styles/video.scss';\r\nimport Loading from '../loading';\r\n\r\nclass VideoViewer extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n loading: true,\r\n };\r\n }\r\n\r\n onCanPlay() {\r\n this.setState({ loading: false });\r\n }\r\n\r\n renderLoading() {\r\n if (this.state.loading) {\r\n return \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default VideoViewer;\r\n","// Copyright (c) 2017 PlanGrid, Inc.\r\n\r\nimport React, { Component } from 'react';\r\nimport XLSX from 'xlsx';\r\n\r\nimport CsvViewer from './csv-viewer';\r\n\r\nclass XlxsViewer extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = this.parse();\r\n }\r\n\r\n parse() {\r\n const dataArr = new Uint8Array(this.props.data);\r\n const arr = [];\r\n\r\n for (let i = 0; i !== dataArr.length; i += 1) {\r\n arr.push(String.fromCharCode(dataArr[i]));\r\n }\r\n\r\n const workbook = XLSX.read(arr.join(''), { type: 'binary' });\r\n const names = Object.keys(workbook.Sheets);\r\n const sheets = names.map(name => (\r\n XLSX.utils.sheet_to_csv(workbook.Sheets[name])\r\n ));\r\n\r\n return { sheets, names, curSheetIndex: 0 };\r\n }\r\n\r\n renderSheetNames(names) {\r\n const sheets = names.map((name, index) => (\r\n \r\n {this.renderLoading()}\r\n this.onCanPlay(e)}\r\n src={this.props.filePath}\r\n >\r\n Video playback is not supported by your browser.\r\n \r\n
\r\n \r\n {sheets}\r\n
\r\n );\r\n }\r\n\r\n renderSheetData(sheet) {\r\n const csvProps = Object.assign({}, this.props, { data: sheet });\r\n return (\r\n \r\n {this.renderSheetNames(names)}\r\n {this.renderSheetData(sheets[curSheetIndex || 0])}\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default XlxsViewer;\r\n","// Copyright (c) 2017 PlanGrid, Inc.\r\n\r\nimport React, { Component } from 'react';\r\n// import XViewer from '../../utils/xbim-viewer.debug.bundle';\r\n\r\nimport Error from '../error';\r\n\r\nexport default class XBimViewer extends Component {\r\n // TODO check for webgl compatibility\r\n constructor(props) {\r\n super(props);\r\n this.state = { error: false };\r\n }\r\n\r\n componentDidMount() {\r\n // try {\r\n // const viewer = new XViewer('xbim-viewer');\r\n // viewer.load(this.props.filePath);\r\n // viewer.start();\r\n // } catch (e) {\r\n // if (this.props.onError) {\r\n // this.props.onError(e);\r\n // }\r\n // this.setState({ error: e });\r\n // }\r\n }\r\n\r\n render() {\r\n if (this.state.error) {\r\n return \r\n \r\n
\r\n );\r\n }\r\n}\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\n// Copyright (c) 2017 PlanGrid, Inc.\r\n\r\nimport React from \"react\";\r\nimport { saveAs } from \"file-saver\";\r\n\r\nimport * as documentAction from \"../../../../redux/store/document/document.store\";\r\n\r\nimport \"../../styles/unsupported.scss\";\r\n\r\nconst downloadFileBinary = (id, name) => {\r\n if (!id || !name) return;\r\n documentAction.DownloadFile(id).then((res) => {\r\n const blob = new Blob([res], {\r\n type: \"application/*\",\r\n });\r\n let _nameArray = name.split(\"/\");\r\n saveAs(blob, _nameArray[_nameArray.length - 1]);\r\n });\r\n};\r\n\r\nconst UnsupportedViewer = (props) => (\r\n \r\n
\r\n);\r\n\r\nexport default UnsupportedViewer;\r\n","// Copyright (c) 2017 PlanGrid, Inc.\r\n\r\nimport React, { Component } from 'react';\r\n\r\nimport '../../styles/photo-viewer.scss';\r\n\r\nexport default class PhotoViewer extends Component {\r\n componentDidMount() {\r\n const { originalWidth, originalHeight } = this.props;\r\n const imageDimensions = this.getImageDimensions.call(this, originalWidth, originalHeight);\r\n\r\n this.props.texture.image.style.width = `${imageDimensions.width}px`;\r\n this.props.texture.image.style.height = `${imageDimensions.height}px`;\r\n this.props.texture.image.setAttribute('class', 'photo');\r\n document.getElementById('pg-photo-container').appendChild(this.props.texture.image);\r\n }\r\n\r\n getImageDimensions(originalWidth, originalHeight) {\r\n // Scale image to fit into viewer\r\n let imgHeight;\r\n let imgWidth;\r\n const { height: viewerHeight, width: viewerWidth } = this.props;\r\n\r\n if (originalHeight <= viewerHeight && originalWidth <= viewerWidth) {\r\n imgWidth = originalWidth;\r\n imgHeight = originalHeight;\r\n } else {\r\n const heightRatio = viewerHeight / originalHeight;\r\n const widthRatio = viewerWidth / originalWidth;\r\n if (heightRatio < widthRatio) {\r\n imgHeight = originalHeight * heightRatio;\r\n imgWidth = originalWidth * heightRatio;\r\n } else {\r\n imgHeight = originalHeight * widthRatio;\r\n imgWidth = originalWidth * widthRatio;\r\n }\r\n }\r\n\r\n return { height: imgHeight, width: imgWidth };\r\n }\r\n\r\n render() {\r\n const containerStyles = {\r\n width: `${this.props.width}px`,\r\n height: `${this.props.height}px`,\r\n };\r\n\r\n return (\r\n \r\n );\r\n }\r\n}\r\n","// Copyright (c) 2017 PlanGrid, Inc.\r\n\r\nimport React, { Component } from 'react';\r\n\r\nimport * as THREE from 'three';\r\nimport PhotoViewer from './photo-viewer';\r\nimport Photo360Viewer from './photo360-viewer';\r\nimport Loading from '../loading';\r\n\r\nfunction getPhotoDriver(width, height, fileType) {\r\n if (fileType === 'jpg' && window.Math.abs((width / height) - 2) <= 0.01) {\r\n return Photo360Viewer;\r\n }\r\n return PhotoViewer;\r\n}\r\n\r\nexport default class PhotoViewerWrapper extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n originalWidth: 0,\r\n originalHeight: 0,\r\n imageLoaded: false,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n // spike on using promises and a different loader or adding three js loading manager\r\n const loader = new THREE.TextureLoader();\r\n loader.crossOrigin = '';\r\n // load a resource\r\n loader.load(\r\n // resource URL\r\n this.props.filePath,\r\n // Function when resource is loaded\r\n (texture) => {\r\n this.setState({\r\n originalWidth: texture.image.width,\r\n originalHeight: texture.image.height,\r\n imageLoaded: true,\r\n texture,\r\n });\r\n },\r\n (xhr) => {\r\n console.log(`${xhr.loaded / xhr.total * 100}% loaded`);\r\n },\r\n (xhr) => {\r\n console.log('An error happened', xhr);\r\n },\r\n );\r\n }\r\n\r\n render() {\r\n if (!this.state.imageLoaded) {\r\n return \r\n {props.unsupportedComponent ? (\r\n
\r\n \r\n
\r\n )}\r\n \r\n Không hỗ trợ hiển thị file {`.${props.fileType}`}. Bạn có\r\n muốn download file? (\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default AudioViewer;\r\n","// Copyright (c) 2017 PlanGrid, Inc.\r\n\r\nimport React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport '../styles/main.scss';\r\nimport withFetching from './fetch-wrapper';\r\n\r\nimport {\r\n CsvViewer,\r\n DocxViewer,\r\n VideoViewer,\r\n XlsxViewer,\r\n XBimViewer,\r\n PDFViewer,\r\n UnsupportedViewer,\r\n PhotoViewerWrapper,\r\n AudioViewer,\r\n} from './drivers';\r\n\r\nclass FileViewer extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n loading: true,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n const container = document.getElementById('pg-viewer');\r\n const height = container ? container.clientHeight : 0;\r\n const width = container ? container.clientWidth : 0;\r\n this.setState({ height, width });\r\n }\r\n\r\n getDriver() {\r\n switch (this.props.fileType) {\r\n case 'csv': {\r\n return withFetching(CsvViewer, this.props);\r\n }\r\n case 'xlsx': {\r\n const newProps = Object.assign({}, this.props, { responseType: 'arraybuffer' });\r\n return withFetching(XlsxViewer, newProps);\r\n }\r\n case 'jpg':\r\n case 'jpeg':\r\n case 'gif':\r\n case 'bmp':\r\n case 'png': {\r\n return PhotoViewerWrapper;\r\n }\r\n case 'pdf': {\r\n return PDFViewer;\r\n }\r\n case 'docx': {\r\n return DocxViewer;\r\n }\r\n case 'mp3': {\r\n return AudioViewer;\r\n }\r\n case 'webm':\r\n case 'mp4': {\r\n return VideoViewer;\r\n }\r\n case 'wexbim': {\r\n return XBimViewer;\r\n }\r\n default: {\r\n return UnsupportedViewer;\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n console.log(\"props\",this.props)\r\n const Driver = this.getDriver(this.props);\r\n return (\r\n \r\n {this.renderLoading()}\r\n this.onCanPlay(e)}\r\n src={this.props.filePath}\r\n >\r\n Video playback is not supported by your browser.\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nFileViewer.propTypes = {\r\n fileType: PropTypes.string.isRequired,\r\n filePath: PropTypes.string.isRequired,\r\n onError: PropTypes.func,\r\n errorComponent: PropTypes.element,\r\n unsupportedComponent: PropTypes.element,\r\n};\r\n\r\nFileViewer.defaultProps = {\r\n onError: () => null,\r\n errorComponent: null,\r\n unsupportedComponent: null,\r\n};\r\n\r\nexport default FileViewer;\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable react/jsx-no-target-blank */\r\n/* eslint-disable @typescript-eslint/no-unused-vars */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport * as apiConfig from '../../../api/api-config';\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport { Link } from \"react-router-dom\";\r\nimport moment from \"moment\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faArrowLeft,\r\n faAirFreshener,\r\n faFolder,\r\n faChevronRight,\r\n faEye,\r\n faDownload,\r\n faClock,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\nimport { faCopy, faMap } from \"@fortawesome/free-regular-svg-icons\";\r\nimport { saveAs } from \"file-saver\";\r\n\r\nimport * as appActions from \"../../../core/app.store\";\r\nimport * as documentAction from \"../../../redux/store/document/document.store\";\r\n\r\nimport UrlCollect from \"../../../common/url-collect\";\r\nimport * as config from \"../../../utils/configuration\";\r\nimport { NotificationMessageType } from \"../../../utils/configuration\";\r\nimport ShowNotification from \"../../../components/react-notifications/react-notifications\";\r\nimport * as viVN from \"../../../languages/vi-VN.json\";\r\nimport $ from \"jquery\";\r\nimport \"./records-detail.scss\";\r\nimport { FILE_EXTENSION_ICON } from \"../../../utils/configuration\";\r\n\r\nfunction RecordsManagementDetailDesktopView(props) {\r\n const {\r\n onBack,\r\n planningId,\r\n tabType,\r\n showLoading,\r\n isShowPreview,\r\n setShowPreview,\r\n setFile,\r\n setPlanningId,\r\n } = props;\r\n\r\n const [documents, setDocuments] = useState([]);\r\n const [detailModels, setDetailModel] = useState();\r\n const [planningRelationShips, setPlanningRelationShips] = useState([]);\r\n const [nameFolderTitle, setNameFolderTitle] = useState([]);\r\n const [nextTab, setNextTab] = useState(false);\r\n const typeName = \"Folder\";\r\n\r\n useEffect(() => {\r\n if (!planningId) return;\r\n GetDocumentByPlanningId();\r\n }, [planningId]);\r\n\r\n const GetDocumentByPlanningId = (id = planningId) => {\r\n showLoading(true);\r\n documentAction\r\n .GetDocumentByPlanningId(id)\r\n .then((result) => {\r\n if (result && result.content) {\r\n setDetailModel(result.content);\r\n setDocuments(\r\n result.content.documents && result.content.documents.length > 0\r\n ? result.content.documents\r\n : []\r\n );\r\n setPlanningRelationShips(\r\n result.content.planningRelationShips &&\r\n result.content.planningRelationShips.length > 0\r\n ? result.content.planningRelationShips\r\n : []\r\n );\r\n setNextTab(true);\r\n } else {\r\n ShowNotification(\r\n viVN.Errors[result && result.errorType],\r\n NotificationMessageType.Warning\r\n );\r\n setNextTab(false);\r\n }\r\n showLoading(false);\r\n })\r\n .catch((err) => {\r\n showLoading(false);\r\n });\r\n };\r\n\r\n function GetChildrenDocument(id = planningId, parentId) {\r\n showLoading(true);\r\n documentAction\r\n .GetChildrenDocument(id, parentId)\r\n .then((res) => {\r\n setDocuments(res && res.content ? res.content : []);\r\n showLoading(false);\r\n })\r\n .catch((err) => {\r\n showLoading(false);\r\n });\r\n }\r\n\r\n function handleOnClickFolder(item) {\r\n let arrFolderTitle = nameFolderTitle;\r\n arrFolderTitle.push(item);\r\n setNameFolderTitle(arrFolderTitle);\r\n GetChildrenDocument(planningId, item.id);\r\n }\r\n\r\n function onBanckDocument(item, index) {\r\n let arr = nameFolderTitle.splice(index, 1);\r\n setNameFolderTitle(arr);\r\n GetChildrenDocument(planningId, item.id);\r\n }\r\n\r\n function onClickRootBtn() {\r\n let arr = nameFolderTitle;\r\n setNameFolderTitle((arr = []));\r\n GetDocumentByPlanningId();\r\n }\r\n\r\n const onShowFilePreview = (file) => {\r\n if (file) {\r\n setShowPreview(true);\r\n setFile(file);\r\n $(\"html, body\").animate({ scrollTop: 0 }, 500);\r\n }\r\n };\r\n\r\n const renderFilePreview = (file) => {\r\n let isSupport = config.FilePreviewSupport(file.extension);\r\n if(isSupport)\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {isShowPreview && (\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n\r\n {detailModels ? detailModels.name : \"\"}
\r\n- \r\n
- \r\n
- \r\n
- \r\n
\r\n \r\n {detailModels ? (\r\n
\r\n \r\n
\r\n ) : (\r\n {\"Không có dữ liệu\"}\r\n )}\r\n \r\n \r\n {detailModels.name}\r\n
\r\n \r\n \r\n {detailModels.code}\r\n
\r\n \r\n \r\n {detailModels.location}\r\n
\r\n \r\n \r\n {detailModels.numberOfDecisions}\r\n
\r\n \r\n \r\n \r\n {moment(new Date(detailModels.publishDate)).format(\r\n \"DD/MM/YYYY\"\r\n )}\r\n \r\n
\r\n \r\n \r\n {detailModels.agencySubmitted}\r\n
\r\n \r\n \r\n {detailModels.agencySubmitted}\r\n
\r\n \r\n \r\n {detailModels.consultingUnit}\r\n
\r\n \r\n \r\n {detailModels.population}\r\n
\r\n \r\n \r\n {detailModels.acreage}\r\n
\r\n \r\n \r\n {detailModels.landForConstruction}\r\n
\r\n \r\n \r\n {detailModels.report}\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n onClickRootBtn()}\r\n >\r\n onClickRootBtn()}\r\n icon={faAirFreshener}\r\n className=\"mr-2 text-success\"\r\n />\r\n Thư mục gốc\r\n \r\n {nameFolderTitle &&\r\n nameFolderTitle.length > 0 &&\r\n nameFolderTitle.map((item, index) => (\r\n \r\n onBanckDocument(item, index)}\r\n className=\"btn btn-secondary pathnode\"\r\n disabled={\r\n index === nameFolderTitle.length - 1 ? true : false\r\n }\r\n >\r\n {item.name}\r\n \r\n \r\n ))}\r\n
\r\n | Tên tài liệu | \r\n|
|---|---|
| handleOnClickFolder(item)}>\r\n | \r\n ) : (\r\n \r\n {renderIcon(\r\n item.extension && item.extension.toLowerCase()\r\n )}\r\n {item.name}\r\n \r\n {renderFilePreview(item)}\r\n \r\n \r\n | \r\n )}\r\n
\r\n
\r\n \r\n {planningRelationShips && planningRelationShips.length > 0 ? (\r\n planningRelationShips.map((item, index) => (\r\n \r\n
\r\n ))\r\n ) : (\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n setPlanningId(item.id);\r\n if (nextTab) {\r\n setNextTab(false);\r\n document.getElementById(\"detail-tab\").click();\r\n }\r\n }}\r\n >\r\n {item.name}\r\n \r\n\r\n {/* \r\n {item.name}\r\n */}\r\n
\r\n \r\n Địa điểm: {item.location}\r\n
\r\n\r\n
\r\n \r\n {\r\n setPlanningId(item.id);\r\n if (nextTab) {\r\n setNextTab(false);\r\n document.getElementById(\"detail-tab\").click();\r\n }\r\n }}\r\n >\r\n \r\n
\r\n Không có dữ liệu
\r\n )}\r\n \r\n \r\n
\r\n );\r\n}\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable @typescript-eslint/no-unused-vars */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faSearch, faCog, faTimes,\r\n faTable,\r\n faList,\r\n faExclamationTriangle,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\nimport { faCopy, faMap } from \"@fortawesome/free-regular-svg-icons\";\r\nimport CancelPresentationIcon from \"@material-ui/icons/CancelPresentation\";\r\nimport { Link } from \"react-router-dom\";\r\nimport Select from \"react-select\";\r\nimport FileViewer from \"../../components/file-viewer/components/file-viewer\";\r\n\r\nimport * as appActions from \"../../core/app.store\";\r\nimport * as documentAction from \"../../redux/store/document/document.store\";\r\nimport * as MapDataStore from \"../../redux/store/map-data/map-data.store\";\r\nimport * as statementActions from \"../../redux/store/statement/statement.store\";\r\nimport RecordsManagementDetailDesktopView from \"./records-management-detail/records-management-detail.view.jsx\";\r\nimport Pagination from \"../../components/pagination/pagination.view\";\r\n\r\nimport * as config from \"../../utils/configuration\";\r\nimport UrlCollect from \"../../common/url-collect\";\r\nimport {\r\n NotificationMessageType,\r\n NotificationPosition,\r\n} from \"../../utils/configuration\";\r\nimport ShowNotification from \"../../components/react-notifications/react-notifications\";\r\nimport * as viVN from \"../../languages/vi-VN.json\";\r\nimport \"./records-management.scss\";\r\n\r\nfunction RecordsManagementDesktopView(props) {\r\n const { showLoading } = props;\r\n\r\n const currentPageIndex = 1;\r\n const currentPageSize = 8;\r\n const [paginationNumber, setPaginationNumber] = useState();\r\n const [planningModels, setPlanningModels] = useState([]);\r\n const [documentType, setDocumentType] = useState([]);\r\n const [yearStatement, setYearStatement] = useState([]);\r\n const [approvalLevelOption, setApprovalLevelOption] = useState([]);\r\n const [planningTypeOption, setPlanningTypeOption] = useState([]);\r\n \r\n const [documentTypeId, setDocumentTypeId] = useState();\r\n const [yearSearch, setYearSearch] = useState(\"\");\r\n const [listDistrict, setListDistrict] = useState([]);\r\n const [districtSearch, setdistrictSearch] = useState([]);\r\n const [planningUnitSearch, setPlanningUnitSearch] = useState(\"\");\r\n const [approvalLevelSearch, setApprovalLevelSearch] = useState(\"\");\r\n const [planningTypeSearch, setPlanningTypeSearch] = useState(\"\");\r\n const [listPlanningUnit, setListPlanningUnit] = useState([]);\r\n const [dataSearching, setDataSearching] = useState(null);\r\n const [planningId, setPlanningId] = useState();\r\n const [tabType, setTabType] = useState();\r\n const [isShowPreview, setShowPreview] = useState(false);\r\n const [file, setFile] = useState();\r\n const [isTable, setIsTable] = useState(true);\r\n const [isDetail, setIsDetail] = useState(false);\r\n\r\n const [isOpenSearchAdvance, setIsOpenSearchAdvance] = useState(false);\r\n const advanceSearchContainer = useRef(null);\r\n\r\n useEffect(() => {\r\n if(!isOpenSearchAdvance) {\r\n setYearSearch(\"\");\r\n setPlanningUnitSearch(\"\");\r\n setApprovalLevelSearch(\"\");\r\n setPlanningTypeSearch(\"\");\r\n reset(formValues => ({\r\n ...formValues,\r\n field: '',\r\n }));\r\n } else {\r\n const timeoutId = setTimeout(() => {\r\n advanceSearchContainer.current.style.overflow = 'unset';\r\n }, 500);\r\n return () => clearTimeout(timeoutId);\r\n }\r\n},[isOpenSearchAdvance])\r\n\r\n const { register, handleSubmit, reset } = useForm({\r\n mode: \"all\",\r\n reValidateMode: \"onBlur\",\r\n });\r\n\r\n const planningIdQuery = new URLSearchParams(props.location.search).get(\r\n \"planningId\"\r\n );\r\n\r\n useEffect(() => {\r\n if (planningIdQuery && planningIdQuery > 0) {\r\n setIsDetail(true);\r\n setPlanningId(planningIdQuery);\r\n setTabType(\"detail\");\r\n }\r\n\r\n onGetData();\r\n }, []);\r\n\r\n const onGetData = () => {\r\n showLoading(true);\r\n Promise.all([\r\n GetAllPlanning({\r\n pageIndex: currentPageIndex,\r\n pageSize: currentPageSize,\r\n }),\r\n GetDocumentType(),\r\n GetLookupDistrict(),\r\n GetYearStatement(),\r\n GetLookupPlanningUnit(),\r\n GetApprovalAgencyLevel(),\r\n props.GetAllPlanningCategoriesType()\r\n ])\r\n .then((res) => {\r\n showLoading(false);\r\n })\r\n .catch((err) => {\r\n showLoading(false);\r\n config.HandleError(err);\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if(props.planningType && props.planningType.length > 0) {\r\n setPlanningTypeOption(props.planningType.map(item =>{ return {...item, value: item.id, label: item.name}}))\r\n }\r\n }, [props.planningType])\r\n\r\n const GetAllPlanning = (data) => {\r\n return new Promise((resolve, reject) => {\r\n documentAction\r\n .SearchDocument(data)\r\n .then((res) => {\r\n setPlanningModels(\r\n res &&\r\n res.content &&\r\n res.content.items &&\r\n res.content.items.length > 0\r\n ? res.content.items\r\n : []\r\n );\r\n setPaginationNumber(res.content);\r\n resolve(res);\r\n })\r\n .catch((err) => reject(err));\r\n });\r\n };\r\n\r\n const GetLookupDistrict = () => {\r\n return new Promise((resolve, reject) => {\r\n documentAction\r\n .GetLookUpDistrict()\r\n .then((res) => {\r\n setListDistrict(\r\n res && res.content && res.content.length > 0\r\n ? res.content.map((item) => {\r\n return { ...item, label: item.name, value: item.id };\r\n })\r\n : []\r\n );\r\n resolve(res);\r\n })\r\n .catch((err) => reject(err));\r\n });\r\n };\r\n\r\n const GetLookupPlanningUnit = () => {\r\n documentAction\r\n .GetLookUpPlanningUnit()\r\n .then((res) => {\r\n setListPlanningUnit(\r\n res && res.content && res.content.length > 0\r\n ? res.content.map((item) => {\r\n return { ...item, label: item.name, value: item.id };\r\n })\r\n : []\r\n );\r\n })\r\n .catch((err) => {\r\n // console.log(err);\r\n });\r\n};\r\n\r\n const GetDocumentType = () => {\r\n return new Promise((resolve, reject) => {\r\n documentAction\r\n .GetDocumentType()\r\n .then((res) => {\r\n setDocumentType(\r\n res && res.content && res.content.length > 0\r\n ? res.content.map((item) => {\r\n return { ...item, label: item.name, value: item.id };\r\n })\r\n : []\r\n );\r\n resolve(res);\r\n })\r\n .catch((err) => reject(err));\r\n });\r\n };\r\n\r\n const GetYearStatement = () => {\r\n return new Promise((resolve, reject) => {\r\n documentAction\r\n .GetYearStatement()\r\n .then((res) => {\r\n setYearStatement(\r\n res && res.content && res.content.length > 0\r\n ? res.content.map((item) => {\r\n return { ...item, label: item, value: item };\r\n })\r\n : []\r\n );\r\n resolve(res);\r\n })\r\n .catch((err) => reject(err));\r\n });\r\n };\r\n\r\n const GetApprovalAgencyLevel = () => {\r\n return new Promise((resolve, reject) => {\r\n statementActions.ApprovalAgencyLevel().then(\r\n (res) => {\r\n setApprovalLevelOption(\r\n res && res.content && res.content.length > 0\r\n ? res.content.map((item) => {\r\n return { ...item, value: item.id, label: item.name };\r\n })\r\n : []\r\n );\r\n resolve(res);\r\n },\r\n (err) => {\r\n reject(err);\r\n }\r\n );\r\n });\r\n };\r\n\r\n const GetSearchDocument = (pageIndex = 1, data = dataSearching) => {\r\n showLoading(true);\r\n\r\n documentAction\r\n .SearchDocument({\r\n pageIndex: pageIndex,\r\n pageSize: currentPageSize,\r\n name: data && data.searchFile,\r\n field: data && data.field,\r\n documentTypeId: documentTypeId,\r\n year: yearSearch,\r\n district: districtSearch,\r\n planningUnitId: planningUnitSearch,\r\n approvalLevelId: approvalLevelSearch.id,\r\n planningTypeId: planningTypeSearch.id\r\n })\r\n .then((res) => {\r\n if (\r\n res &&\r\n res.content &&\r\n res.content.items &&\r\n res.content.items.length > 0\r\n ) {\r\n setPlanningModels(res.content.items);\r\n setPaginationNumber(res.content);\r\n } else {\r\n ShowNotification(\r\n viVN.Warning.NoData,\r\n NotificationMessageType.Warning,\r\n NotificationPosition.Center\r\n );\r\n }\r\n showLoading(false);\r\n })\r\n .catch((err) => {\r\n showLoading(false);\r\n config.HandleError(err);\r\n });\r\n };\r\n\r\n const onBack = () => {\r\n setIsDetail(false);\r\n setShowPreview(false);\r\n };\r\n\r\n const onSubmit = (data) => {\r\n setIsDetail(false);\r\n setDataSearching(data);\r\n GetSearchDocument(1, data);\r\n };\r\n\r\n const handleOnchangeDocumentType = (data) => {\r\n setDocumentTypeId(data.value);\r\n };\r\n\r\n const handleOnChangeDistrict = (data) => {\r\n if (data) {\r\n setdistrictSearch(\r\n data.map((item) => {\r\n return item.value;\r\n })\r\n .join(\", \")\r\n .trim()\r\n );\r\n } else {\r\n setdistrictSearch(\"\");\r\n }\r\n };\r\n\r\n const handleOnChangeYears = (data) => {\r\n if (data) {\r\n console.log(data);\r\n setYearSearch(\r\n data\r\n .map((item) => {\r\n return item.value;\r\n })\r\n .join(\", \")\r\n .trim()\r\n );\r\n } else {\r\n setYearSearch(\"\");\r\n }\r\n };\r\n\r\n const handleOnChangePlanningUnit = (data) => {\r\n if (data) {\r\n setPlanningUnitSearch(\r\n data.map((item) => item.value).join(\", \").trim()\r\n )\r\n } else {\r\n setPlanningUnitSearch(\"\");\r\n }\r\n };\r\n\r\n const handleOnChangeApprovalLevel = (data) => {\r\n if (data) {\r\n setApprovalLevelSearch(data)\r\n } else {\r\n setApprovalLevelSearch(\"\");\r\n }\r\n };\r\n\r\n const handleOnChangePlanningType = (data) => {\r\n if (data) {\r\n setPlanningTypeSearch(data)\r\n } else {\r\n setPlanningTypeSearch(\"\");\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n )}\r\n \r\n {!isShowPreview && (\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 {!isDetail && (\r\n
\r\n \r\n \r\n
\r\n \r\n setIsTable(true)}\r\n />\r\n setIsTable(false)}\r\n />\r\n
\r\n \r\n {planningModels && planningModels.length > 0 ? (\r\n planningModels.map((item, index) => (\r\n \r\n
\r\n ))\r\n ) : (\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n setIsDetail(true);\r\n setPlanningId(item.id);\r\n setTabType(\"detail\");\r\n }}\r\n >\r\n {item.name}\r\n \r\n
\r\n \r\n Địa điểm: {item.location}\r\n
\r\n {/*\r\n
*/}\r\n \r\n {\r\n setIsDetail(true);\r\n setPlanningId(item.id);\r\n setTabType(\"detail\");\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 {isDetail && (\r\n \r\n
\r\n \r\n 1 ? \"float-left\" : \"\"\r\n }`}\r\n >\r\n \r\n Có {paginationNumber.totalItemCount} kết quả\r\n \r\n
\r\n {paginationNumber.pageCount > 1 && (\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\nconst mapStateToProps = (state) => ({\r\n isLoading: state.app.loading,\r\n planningType: state.statement.planningType,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n showLoading: appActions.ShowLoading,\r\n GetAllPlanningCategoriesType: MapDataStore.GetAllPlanningCategoriesType,\r\n },\r\n dispatch\r\n );\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(RecordsManagementDesktopView);\r\n","import Service from \"../../../api/api-service\";\r\nimport { ApiUrl } from \"../../../api/api-url\";\r\n\r\nconst service = new Service();\r\n\r\nexport const Contact = (data) => {\r\n return service.post(ApiUrl.ContactToAdmin, data).then((res) => {return res}).catch((err) => { throw err });\r\n}","import React, { useState } from \"react\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport PhoneInput from \"react-phone-input-2\";\r\nimport \"react-phone-input-2/lib/style.css\";\r\nimport \"./contact.scss\";\r\nimport ShowNotification from \"../../components/react-notifications/react-notifications\";\r\nimport { NotificationMessageType } from \"../../utils/configuration\";\r\nimport * as viVN from \"../../languages/vi-VN.json\";\r\nimport * as contactAction from \"../../redux/store/contact/contact.store\";\r\nimport viLanguage from \"../../languages/vi\";\r\n\r\nexport default function ContactDesktopView(props) {\r\n const [tel, setTel] = useState(\"\");\r\n\r\n const { register, handleSubmit, errors, setError, clearErrors } = useForm({\r\n mode: \"onBlur\",\r\n });\r\n\r\n const onCheckTel = (data) => {\r\n if (!data) setError(\"mobilePhone\", { type: \"required\" });\r\n else if (data.toString().length < 10)\r\n setError(\"mobilePhone\", { type: \"pattern\" });\r\n else clearErrors([\"mobilePhone\"]);\r\n setTel(data);\r\n };\r\n\r\n const onSubmitContact = async (data) => {\r\n if (!data || onCheckTel(tel)) return;\r\n await contactAction\r\n .Contact({\r\n name: data.fullName,\r\n phoneNumber: data.mobilePhone,\r\n email: data.email,\r\n message: data.content,\r\n })\r\n .then(\r\n (res) => {\r\n if (res && res.content) {\r\n ShowNotification(\r\n viVN.Success.ContactToAdminSuccess,\r\n NotificationMessageType.Success\r\n );\r\n clearDataForm();\r\n }\r\n },\r\n (err) => {\r\n err &&\r\n err.errorType &&\r\n ShowNotification(\r\n viVN.Errors[err.errorType],\r\n NotificationMessageType.Error\r\n );\r\n }\r\n );\r\n };\r\n\r\n const handleOnChangeFullName = (e) => {\r\n if (e.currentTarget.value) {\r\n let wsRegex = /^\\s*\\s*$/;\r\n e.currentTarget.value = e.currentTarget.value.replace(wsRegex, \"\");\r\n }\r\n };\r\n\r\n const handleOnChangeEmail = (e) => {\r\n if (e.currentTarget.value) {\r\n let wsRegex = /^\\s*|\\s*$/g;\r\n e.currentTarget.value = e.currentTarget.value.replace(wsRegex, \"\");\r\n }\r\n };\r\n\r\n const clearDataForm = () => {\r\n document.getElementById(\"formContact\").reset();\r\n setTel(\"+84\");\r\n };\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n","import React, { useEffect, useState, useRef } from \"react\";\r\nimport * as documentAction from \"../../../../redux/store/document/document.store\";\r\nimport Select from \"react-select\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faSearch, faCog, faTimes } from \"@fortawesome/free-solid-svg-icons\";\r\nimport DatePicker from \"react-datepicker\";\r\n\r\nexport const SearchByDistrict = (props) => {\r\n const { \r\n districtSelect,\r\n setDistrictSelect,\r\n planningUnitSelect,\r\n setPlanningUnitSelect,\r\n approvalAgencySelect,\r\n setApprovalAgencySelect,\r\n onSubmit,\r\n name,\r\n setName,\r\n numberOfDecisions,\r\n setNumberOfDecisions,\r\n constructionGroup,\r\n setConstructionGroup,\r\n yearSearch,\r\n setYearSearch,\r\n isLookup\r\n } = props;\r\n const advanceSearchContainer = useRef(null);\r\n const [listDistrict, setListDistrict] = useState([]);\r\n const [listPlanningUnit, setListPlanningUnit] = useState([]);\r\n const [listApprovalAgencies, setListApprovalAgencies] = useState([]);\r\n const [yearStatement, setYearStatement] = useState([]);\r\n \r\n const [isOpenSearchAdvance, setIsOpenSearchAdvance] = useState(() => {\r\n if( !planningUnitSelect && !approvalAgencySelect && !yearSearch && !numberOfDecisions && !constructionGroup) {\r\n return false;\r\n }\r\n else {\r\n return true\r\n }\r\n });\r\n\r\n useEffect(() => {\r\n GetLookupDistrict();\r\n GetLookupPlanningUnit();\r\n GetLookupApprovalAgency();\r\n GetYearStatement();\r\n }, []);\r\n \r\n useEffect(() => {\r\n if(!isOpenSearchAdvance) {\r\n setNumberOfDecisions('');\r\n setConstructionGroup('');\r\n setApprovalAgencySelect('');\r\n setPlanningUnitSelect('');\r\n setYearSearch('');\r\n } else {\r\n const timeoutId = setTimeout(() => {\r\n advanceSearchContainer.current.style.overflow = 'unset';\r\n }, 500);\r\n return () => clearTimeout(timeoutId);\r\n }\r\n },[isOpenSearchAdvance])\r\n\r\n const GetLookupDistrict = () => {\r\n documentAction\r\n .GetLookUpDistrict()\r\n .then((res) => {\r\n setListDistrict(\r\n res && res.content && res.content.length > 0\r\n ? res.content.map((item) => {\r\n return { ...item, label: item.name, value: item.id };\r\n })\r\n : []\r\n );\r\n })\r\n .catch((err) => {\r\n // console.log(err);\r\n });\r\n };\r\n\r\n const GetLookupPlanningUnit = () => {\r\n documentAction\r\n .GetLookUpPlanningUnit()\r\n .then((res) => {\r\n setListPlanningUnit(\r\n res && res.content && res.content.length > 0\r\n ? res.content.map((item) => {\r\n return { ...item, label: item.name, value: item.id };\r\n })\r\n : []\r\n );\r\n })\r\n .catch((err) => {\r\n // console.log(err);\r\n });\r\n };\r\n\r\n const GetLookupApprovalAgency = () => {\r\n documentAction\r\n .GetLookUpApprovalAgency()\r\n .then((res) => {\r\n setListApprovalAgencies(\r\n res && res.content && res.content.length > 0\r\n ? res.content.map((item) => {\r\n return { ...item, label: item.name, value: item.id };\r\n })\r\n : []\r\n );\r\n })\r\n .catch((err) => {\r\n // console.log(err);\r\n });\r\n };\r\n\r\n const GetYearStatement = () => {\r\n return new Promise((resolve, reject) => {\r\n documentAction\r\n .GetYearStatement()\r\n .then((res) => {\r\n setYearStatement(\r\n res && res.content && res.content.length > 0\r\n ? res.content.map((item) => {\r\n return { ...item, label: item, value: item };\r\n })\r\n : []\r\n );\r\n resolve(res);\r\n })\r\n .catch((err) => reject(err));\r\n });\r\n };\r\n\r\n const handleOnChangeDistrict = (data) => {\r\n if (data) {\r\n setDistrictSelect(\r\n data.map((item) => item.value)\r\n )\r\n } else {\r\n setDistrictSelect([]);\r\n }\r\n };\r\n\r\n const handleOnChangePlanningUnit = (data) => {\r\n if (data) {\r\n setPlanningUnitSelect(data.value)\r\n } else {\r\n setPlanningUnitSelect('');\r\n }\r\n };\r\n\r\n const handleOnChangeApprovalAgency = (data) => {\r\n console.log('handleOnChangeApprovalAgency', data);\r\n if (data) {\r\n setApprovalAgencySelect(data.value)\r\n } else {\r\n setApprovalAgencySelect('');\r\n }\r\n };\r\n \r\n const handleOnChangeYears = (data) => {\r\n if (data) {\r\n setYearSearch(data.value);\r\n } else {\r\n setYearSearch('');\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n THÔNG TIN LIÊN HỆ
\r\n{viLanguage.footer_titleName.toLocaleUpperCase()}
\r\n \r\n Địa chỉ: {viLanguage.footer_address}\r\n \r\n\r\n\r\n
\r\n\r\n \r\n Hotline: {viLanguage.footer_hotline}\r\n
\r\n {viLanguage.footer_fax && (\r\n Fax: {viLanguage.footer_fax}
\r\n )}\r\n {viLanguage.footer_email && (\r\n \r\n Email:{\" \"}\r\n \r\n {viLanguage.footer_email}\r\n \r\n
\r\n )}\r\n {viLanguage.footer_website && (\r\n \r\n Website:{\" \"}\r\n {viLanguage.footer_website}\r\n
\r\n )}\r\n NỘI DUNG
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n}","import React from 'react';\r\nimport './thumbnail-preview.scss';\r\nimport { Link } from 'react-router-dom';\r\nimport ReactTooltip from 'react-tooltip'\r\n\r\ninterface PropsInit {\r\n backgroundUrl: string,\r\n urlParams: string,\r\n previewName: string\r\n}\r\n\r\nexport default function ThumbnailPreview(props: PropsInit) {\r\n return (\r\n \r\n {\r\n if(typeof(districtSelect) == \"string\") return null;\r\n if(districtSelect.some((id) => id == item.id)) return item;\r\n })\r\n }\r\n isMulti\r\n onChange={handleOnChangeDistrict}\r\n options={listDistrict}\r\n noOptionsMessage={() => \"không tồn tại\"}\r\n />\r\n ) : (\r\n \"không tồn tại\"}\r\n />\r\n )\r\n )}\r\n
\r\n \r\n setName(data.target.value)}\r\n //onClick={() => setName('')}\r\n className=\"form-control\"\r\n placeholder=\"Tên quy hoạch\"\r\n aria-label=\"Tên quy hoạch\"\r\n aria-describedby=\"searchFile\"\r\n />\r\n
\r\n\r\n {listDistrict && listDistrict.length > 0 && (\r\n isLookup ? (\r\n \r\n {listPlanningUnit && listPlanningUnit.length > 0 && (\r\n isLookup ? (\r\n {\r\n if(planningUnitSelect == item.id) return item;\r\n }\r\n )\r\n }\r\n onChange={handleOnChangePlanningUnit}\r\n options={listPlanningUnit}\r\n noOptionsMessage={() => \"không tồn tại\"}\r\n />\r\n ) : (\r\n \"không tồn tại\"}\r\n />\r\n )\r\n )}\r\n\r\n {listApprovalAgencies && listApprovalAgencies.length > 0 && (\r\n isLookup ? (\r\n {\r\n if(approvalAgencySelect == item.id) return item;\r\n }\r\n )\r\n }\r\n onChange={handleOnChangeApprovalAgency}\r\n options={listApprovalAgencies}\r\n noOptionsMessage={() => \"không tồn tại\"}\r\n />\r\n ) : (\r\n \"không tồn tại\"}\r\n />\r\n )\r\n )}\r\n\r\n {yearStatement && yearStatement.length > 0 && (\r\n isLookup ? (\r\n {\r\n if(!yearSearch) return null;\r\n if(yearSearch == item.value) return item;\r\n }\r\n )\r\n }\r\n onChange={handleOnChangeYears}\r\n options={yearStatement}\r\n noOptionsMessage={() => \"không tồn tại\"}\r\n />\r\n ) : (\r\n \"không tồn tại\"}\r\n />\r\n )\r\n )}\r\n\r\n
\r\n \r\n setNumberOfDecisions(data.target.value)}\r\n className=\"form-control\"\r\n placeholder=\"Quyết định phê duyệt\"\r\n aria-label=\"Quyết định phê duyệt\"\r\n aria-describedby=\"numberOfDecisions\"\r\n />\r\n
\r\n\r\n \r\n setConstructionGroup(data.target.value)}\r\n className=\"form-control\"\r\n placeholder=\"Nhóm công trình\"\r\n aria-label=\"Nhóm công trình\"\r\n aria-describedby=\"constructionGroup\"\r\n />\r\n
\r\n \r\n {\r\n !isOpenSearchAdvance ? \r\n (
\r\n \r\n {setIsOpenSearchAdvance(true);}}\r\n type=\"button\"\r\n className=\"btn btn-info w-100\"\r\n style={{ fontSize: '14px' }}\r\n >\r\n
) : \r\n (\r\n {setIsOpenSearchAdvance(false);}}\r\n type=\"button\"\r\n className=\"btn btn-danger w-100\"\r\n style={{ fontSize: '14px' }}\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, useEffect } from 'react';\r\nimport '../planning-type/planning-type.scss';\r\n\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\n\r\nimport PaginationView from '../../../../components/pagination/pagination.view.jsx';\r\nimport ThumbnailPreview from '../planning-type/child/thumbnail-preview.view';\r\n\r\nimport * as statementActions from '../../../../redux/store/statement/statement.store';\r\nimport * as config from '../../../../utils/configuration';\r\nimport * as appActions from \"../../../../core/app.store\";\r\nimport * as homePageStore from \"../../../../redux/store/home-page/home-page.store\";\r\nimport PageUrls from '../../../../common/url-collect';\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faExclamationTriangle } from \"@fortawesome/free-solid-svg-icons\";\r\n\r\nfunction PlanningByDistrictView(props) {\r\n const { isLoading, showLoading, params, setDataSelectBoxSearch, selected,\r\n district,\r\n planningUnitId,\r\n approvalAgencyId,\r\n planningTypeId,\r\n name,\r\n yearSearch,\r\n numberOfDecisions,\r\n constructionGroup,\r\n } = props;\r\n const [planningDetail, setPlanningDetail] = useState();\r\n\r\n useEffect(() => {\r\n const district = new URLSearchParams(params.location.search).get(\"district\");\r\n const planningUnitId = new URLSearchParams(params.location.search).get(\"planningUnit\");\r\n const approvalAgencyId = new URLSearchParams(params.location.search).get(\"approvalAgency\");\r\n const planningTypeId = new URLSearchParams(params.location.search).get(\"key\");\r\n const name = new URLSearchParams(params.location.search).get(\"name\");\r\n const yearSearch = new URLSearchParams(params.location.search).get(\"yearSearch\");\r\n const numberOfDecisions = new URLSearchParams(params.location.search).get(\"numberOfDecisions\");\r\n const constructionGroup = new URLSearchParams(params.location.search).get(\"constructionGroup\");\r\n\r\n getPlanningSearchByIdName(\r\n planningTypeId,\r\n name,\r\n district,\r\n planningUnitId,\r\n yearSearch,\r\n approvalAgencyId,\r\n numberOfDecisions,\r\n constructionGroup,\r\n 1,\r\n 9);\r\n }, [params.location.search])\r\n \r\n\r\n const getPlanningSearchByIdName = (\r\n planningTypeId = \"\",\r\n name = \"\",\r\n district = \"\",\r\n planningUnitId = \"\",\r\n yearSearch = \"\",\r\n approvalAgencyId = \"\",\r\n numberOfDecisions = \"\",\r\n constructionGroup = \"\",\r\n pageIndex = 1,\r\n pageSize = 9 \r\n ) => {\r\n showLoading(true);\r\n return homePageStore.GetPlanningSearchByIdNameDistrict(\r\n planningTypeId,\r\n name,\r\n district,\r\n planningUnitId,\r\n yearSearch,\r\n approvalAgencyId,\r\n numberOfDecisions,\r\n constructionGroup,\r\n pageIndex,\r\n pageSize\r\n ).then(res => {\r\n // if (res && res.content) {\r\n setPlanningDetail(res && res.content ? res.content : {});\r\n \r\n // }\r\n showLoading(false)\r\n }).catch(err => showLoading(false))\r\n }\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 80 ? props.previewName : ''}>\r\n {props.previewName.length > 80 ? props.previewName.substring(0, 80) + '...' : props.previewName}\r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\nconst mapStateToProps = (state) => ({\r\n isLoading: state.app.loading,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n showLoading: appActions.ShowLoading,\r\n },\r\n dispatch\r\n );\r\n\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(PlanningByDistrictView);","import React, { useEffect, useState } from \"react\";\r\nimport \"./look-up-planning.scss\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport { SearchByDistrict } from \"./child-modules/planning-district/search-district.view\";\r\nimport PlanningByDistrictView from \"./child-modules/planning-district/planning-district.view\";\r\nimport UrlCollect from \"../../common/url-collect\";\r\nimport * as statementActions from \"../../redux/store/statement/statement.store\";\r\nimport history from \"../../common/history\";\r\nimport * as appActions from \"../../core/app.store\";\r\n\r\nfunction LookUpPlanningView(props) {\r\n\r\n const { showLoading} = props;\r\n const [planningType, setPlanningType] = useState([]);\r\n const [dataSelectBoxSearch, setDataSelectBoxSearch] = useState([]);\r\n const [selected, setSelected] = useState();\r\n const [show, setShow] = useState(true);\r\n const [listDistrict, setListDistrict] = useState([]);\r\n const [districtSelect, setDistrictSelect] = useState(new URLSearchParams(props.location.search).get(\"district\") ?\r\n new URLSearchParams(props.location.search).get(\"district\").split(',') : []);\r\n const [planningUnitSelect, setPlanningUnitSelect] = useState(new URLSearchParams(props.location.search).get(\"planningUnit\") ?\r\n new URLSearchParams(props.location.search).get(\"planningUnit\") : '');\r\n const [approvalAgencySelect, setApprovalAgencySelect] = useState(new URLSearchParams(props.location.search).get(\"approvalAgency\") ?\r\n new URLSearchParams(props.location.search).get(\"approvalAgency\") : '');\r\n const [name, setName] = useState(new URLSearchParams(props.location.search).get(\"name\") ?\r\n new URLSearchParams(props.location.search).get(\"name\") : '');\r\n const [planningTypeId, setPlanningTypeId] = useState(new URLSearchParams(props.location.search).get(\"key\") ?\r\n new URLSearchParams(props.location.search).get(\"key\") : '');\r\n\r\n const [yearSearch, setYearSearch] = useState(new URLSearchParams(props.location.search).get(\"yearSearch\") ?\r\n new URLSearchParams(props.location.search).get(\"yearSearch\") : '');\r\n\r\n const [numberOfDecisions, setNumberOfDecisions] = useState(new URLSearchParams(props.location.search).get(\"numberOfDecisions\") ?\r\n new URLSearchParams(props.location.search).get(\"numberOfDecisions\") : '');\r\n const [constructionGroup, setConstructionGroup] = useState(new URLSearchParams(props.location.search).get(\"constructionGroup\") ?\r\n new URLSearchParams(props.location.search).get(\"constructionGroup\") : '');\r\n\r\n useEffect(() => {\r\n getAllPlanningType();\r\n }, []);\r\n\r\n useEffect(() => {\r\n showLoading(true);\r\n\r\n setDistrictSelect(new URLSearchParams(window.location.search).get(\"district\") ?\r\n new URLSearchParams(window.location.search).get(\"district\").split(',') : '');\r\n\r\n setPlanningUnitSelect(new URLSearchParams(window.location.search).get(\"planningUnit\") ?\r\n new URLSearchParams(window.location.search).get(\"planningUnit\").split(',') : '');\r\n\r\n setApprovalAgencySelect(new URLSearchParams(window.location.search).get(\"approvalAgency\") ?\r\n new URLSearchParams(window.location.search).get(\"approvalAgency\").split(',') : '');\r\n \r\n setName(new URLSearchParams(window.location.search).get(\"name\") || '');\r\n setYearSearch(new URLSearchParams(window.location.search).get(\"yearSearch\") || '');\r\n setNumberOfDecisions(new URLSearchParams(window.location.search).get(\"numberOfDecisions\") || '');\r\n setConstructionGroup(new URLSearchParams(window.location.search).get(\"constructionGroup\") || '');\r\n setPlanningTypeId(new URLSearchParams(window.location.search).get(\"key\") || '');\r\n console.log(new URLSearchParams(window.location.search).get(\"district\"));\r\n showLoading(false);\r\n \r\n }, [ \r\n new URLSearchParams(window.location.search).get(\"key\"),\r\n new URLSearchParams(window.location.search).get(\"district\"),\r\n new URLSearchParams(window.location.search).get(\"planningUnit\"),\r\n new URLSearchParams(window.location.search).get(\"name\"),\r\n new URLSearchParams(window.location.search).get(\"yearSearch\"),\r\n new URLSearchParams(window.location.search).get(\"numberOfDecisions\"),\r\n new URLSearchParams(window.location.search).get(\"constructionGroup\"),\r\n ])\r\n\r\n const getAllPlanningType = () => {\r\n statementActions\r\n .PlanningType()\r\n .then((res) => {\r\n if (res && res.content) {\r\n setPlanningType(res.content);\r\n }\r\n })\r\n .catch((err) => {\r\n // console.log(err);\r\n });\r\n };\r\n\r\n let PATHNAME =\r\n \"?key=\" + new URLSearchParams(props.location.search).get(\"key\");\r\n\r\n function createClassListLeftSelectMenu(pathName) {\r\n return PATHNAME === pathName ? \"p-2 active-custom\" : \"p-2\";\r\n }\r\n\r\n const onSubmit = () => {\r\n history.push(`${UrlCollect.PlanningMap}?key=${planningTypeId}&name=${name}&district=${districtSelect ? districtSelect.join(',') : ''}&planningUnit=${planningUnitSelect}&approvalAgency=${approvalAgencySelect}&yearSearch=${yearSearch}&numberOfDecisions=${numberOfDecisions}&constructionGroup=${constructionGroup}`)\r\n };\r\n\r\n\r\n\r\n return (\r\n \r\n {planningDetail && planningDetail.items && planningDetail.items.length > 0 ? planningDetail.items.map((item, index) => (\r\n
\r\n \r\n
\r\n )}\r\n \r\n {\r\n planningDetail && planningDetail.pageCount > 0 && (\r\n
\r\n \r\n
\r\n )\r\n }\r\n \r\n Có {planningDetail.totalItemCount} kết quả\r\n
\r\n {\r\n planningDetail.pageCount > 1 && (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
`\r\n );\r\n myWindow?.document.write(\"\");\r\n\r\n myWindow?.document.close(); // necessary for IE >= 10\r\n myWindow?.focus(); // necessary for IE >= 10*/\r\n myWindow?.print();\r\n return true;\r\n }\r\n\r\n viewCurrentLocaltion = () => {\r\n navigator.geolocation.getCurrentPosition((position: any) => {\r\n if (position && position.coords) {\r\n this.pinSearchMode([\r\n position.coords.longitude,\r\n position.coords.latitude,\r\n ], \"current-location\");\r\n this.functionClickViewInfomationListener({\r\n coordinate: [\r\n position.coords.longitude,\r\n position.coords.latitude,\r\n ]\r\n })\r\n console.log({\r\n coordinate: [\r\n position.coords.longitude,\r\n position.coords.latitude,\r\n ]\r\n })\r\n // homePageStore.GetWgs84ToVn2000(\r\n // position.coords.longitude,\r\n // position.coords.latitude).then((res) => {\r\n // history.push(\r\n // `${UrlCollect.PlanningMapViewDetail}2?lng=${res[0]}&lat=${res[1]}&searchType=codinate`\r\n // )\r\n // })\r\n }\r\n });\r\n };\r\n\r\n changeInteraction() {\r\n if (!this.state.isLoadedAllVectorSource)\r\n if (select !== null) {\r\n this.state.map?.removeInteraction(select);\r\n }\r\n select = selectClick;\r\n if (select !== null) {\r\n this.state.map?.addInteraction(select);\r\n }\r\n }\r\n\r\n removeHiglightVectorLayer() {\r\n const _objectMap: Map = this.state.map;\r\n if (!_objectMap) return;\r\n const _layers = _objectMap.getLayers();\r\n let _indexDelete = -1;\r\n _layers.getArray().map((_layer, _index) => {\r\n if ((_layer instanceof VectorLayer) && (_layer.getClassName() === \"highlight-vectorlayer\")) {\r\n _indexDelete = _index;\r\n return;\r\n }\r\n })\r\n if (_indexDelete != -1) _layers.removeAt(_indexDelete)\r\n }\r\n\r\n removeHiglightVectorLayerChild() {\r\n const _objectMap: Map = this.state.map;\r\n if (!_objectMap) return;\r\n const _layers = _objectMap.getLayers();\r\n\r\n let _indexDelete = -1;\r\n _layers.getArray().map((_layer, _index) => {\r\n if ((_layer instanceof VectorLayer) && (_layer.getClassName() === \"highlight-vectorlayer-child\")) {\r\n _indexDelete = _index;\r\n return;\r\n }\r\n })\r\n if (_indexDelete != -1) _layers.removeAt(_indexDelete)\r\n }\r\n\r\n clearFeatures() {\r\n this.state.map?.getLayers().getArray().map((item: any) => {\r\n if (item instanceof VectorImageLayer) {\r\n console.log(\"layer\", item);\r\n }\r\n })\r\n }\r\n\r\n resetDrawnFilterDataAndRemoveInteraction = () => {\r\n const _mapObject: Map = this.state.map;\r\n if (DrawnFilterData.draw) _mapObject.removeInteraction(DrawnFilterData.draw);\r\n DrawnFilterData.draw = null;\r\n DrawnFilterData.source = null;\r\n DrawnFilterData.filterType = '';\r\n }\r\n\r\n createFilterDrawnVectorLayer = () => {\r\n const _mapObject: Map = this.state.map;\r\n const _layersCollect = _mapObject.getLayers();\r\n let _needCreateVectorLayer = true;\r\n let _drawnFilterLayer: any = null;\r\n const _newSource = new VectorSource();\r\n\r\n this.resetDrawnFilterDataAndRemoveInteraction();\r\n\r\n DrawnFilterData.source = _newSource;\r\n _layersCollect.forEach((_layer) => {\r\n if ((_layer instanceof VectorLayer) && (_layer.getClassName() === classNameVectorLayerFilterDrawn)) {\r\n _needCreateVectorLayer = false;\r\n _drawnFilterLayer = _layer;\r\n }\r\n })\r\n if (_needCreateVectorLayer) {\r\n const _vectorLayerDrawn = new VectorLayer({\r\n source: _newSource,\r\n className: classNameVectorLayerFilterDrawn,\r\n zIndex: 1000,\r\n style: Draw_Filter_Feature_Style,\r\n })\r\n _layersCollect.push(_vectorLayerDrawn);\r\n } else {\r\n _drawnFilterLayer.setSource(_newSource)\r\n }\r\n }\r\n\r\n deleteFilterDrawnVectorLayer = () => {\r\n const _mapObject: Map = this.state.map;\r\n const _layersCollect = _mapObject.getLayers();\r\n let _indexDelete = -1;\r\n\r\n this.resetDrawnFilterDataAndRemoveInteraction();\r\n\r\n _layersCollect.forEach((_layer, _index) => {\r\n if ((_layer instanceof VectorLayer) && (_layer.getClassName() === classNameVectorLayerFilterDrawn)) {\r\n _indexDelete = _index;\r\n }\r\n })\r\n if (_indexDelete !== -1) _layersCollect.removeAt(_indexDelete);\r\n }\r\n\r\n filterDrawnVectorLayer = (drawnType: string) => {\r\n const _mapObject: Map = this.state.map;\r\n let _drawnType: any = drawnType;\r\n let _geometryFunction = null;\r\n this.createFilterDrawnVectorLayer()\r\n switch (drawnType) {\r\n case GeometryType.POINT:\r\n case GeometryType.LINE_STRING:\r\n case GeometryType.POLYGON:\r\n case GeometryType.CIRCLE: {\r\n _drawnType = drawnType\r\n } break;\r\n case \"Box\": {\r\n _drawnType = GeometryType.CIRCLE;\r\n _geometryFunction = createBox();\r\n } break;\r\n }\r\n switch (drawnType) {\r\n case GeometryType.POINT: DrawnFilterData.filterType = 'Point'; break\r\n case GeometryType.LINE_STRING: DrawnFilterData.filterType = 'LineString'; break\r\n case GeometryType.POLYGON: DrawnFilterData.filterType = 'Polygon'; break\r\n case GeometryType.CIRCLE: DrawnFilterData.filterType = 'Circle'; break\r\n case \"Box\": DrawnFilterData.filterType = 'Box'; break\r\n }\r\n if (DrawnFilterData.source) {\r\n let _optionDraw: any = {\r\n source: DrawnFilterData.source,\r\n type: _drawnType,\r\n }\r\n if (_geometryFunction) {\r\n _optionDraw.geometryFunction = _geometryFunction;\r\n }\r\n DrawnFilterData.draw = new Draw(_optionDraw)\r\n DrawnFilterData.draw.on(\"drawstart\", (evt) => {\r\n DrawnFilterData.source?.clear()\r\n })\r\n if (drawnType === GeometryType.POINT) {\r\n DrawnFilterData.draw.on(\"drawend\", (evt) => {\r\n const _pointGeoMetry: any = evt.feature.getGeometry();\r\n document.getElementById('longitudeInput')?.setAttribute('value', _pointGeoMetry.flatCoordinates[0])\r\n document.getElementById('latitudeInput')?.setAttribute('value', _pointGeoMetry.flatCoordinates[1])\r\n })\r\n }\r\n _mapObject.addInteraction(DrawnFilterData.draw)\r\n }\r\n }\r\n\r\n getCurrentDrawFeature = () => {\r\n let _feature: Feature | null = null\r\n if (DrawnFilterData.source) {\r\n const _featureList = DrawnFilterData.source.getFeatures();\r\n if (_featureList.length > 0) _feature = _featureList[0];\r\n }\r\n const _format = new WKT();\r\n if (_feature) {\r\n let _featureGeometry: any = _feature.getGeometry();\r\n let _pointRadius: any = 0;\r\n let _geomText = '';\r\n if (DrawnFilterData.filterType === 'Circle') {\r\n const _mapObject: Map = this.state.map;\r\n const _centerCircle = _featureGeometry.getCenter();\r\n _geomText = `POINT(${_centerCircle[0]} ${_centerCircle[1]})`;\r\n _pointRadius = _mapObject.getView().getProjection().getMetersPerUnit() * _featureGeometry.getRadius();\r\n } else {\r\n if (DrawnFilterData.filterType === 'Point') {\r\n let _radiusInput = document.getElementById(\"radiusInput\")?.getAttribute(\"value\");\r\n if (typeof Number(_radiusInput) === 'number') {\r\n _pointRadius = Number(_radiusInput) || 0\r\n } else {\r\n ShowNotification(\r\n \"Dữ liệu bạn nhập vào không đúng định dạng\",\r\n NotificationMessageType.Warning,\r\n NotificationPosition.Center\r\n );\r\n _pointRadius = 0;\r\n }\r\n }\r\n _geomText = _format.writeGeometry(_featureGeometry);\r\n }\r\n return {\r\n coordinate: _geomText,\r\n r: _pointRadius,\r\n type: DrawnFilterData.filterType,\r\n }\r\n }\r\n return null\r\n }\r\n\r\n\r\n deleteHightlightFilterLayer = () => {\r\n const _mapObject: Map = this.state.map;\r\n const _layers = _mapObject.getLayers();\r\n // console.log(\"filter-vectorlayer\", _layers);\r\n let _removeIndex = -1;\r\n _layers.forEach((_layer, _index) => {\r\n if ((_layer instanceof VectorImageLayer) && _layer.getClassName() === 'filter-vectorlayer') {\r\n _removeIndex = _index;\r\n }\r\n if (_removeIndex !== -1) {\r\n _layers.removeAt(_removeIndex)\r\n }\r\n })\r\n\r\n }\r\n\r\n addLayerManually = (tableName: string, isAddedLayer: boolean, zIndex: number) => {\r\n const layerImage: any = new ImageLayer({\r\n visible: true,\r\n zIndex: zIndex,\r\n minZoom: 0,\r\n maxZoom: 20,\r\n source: new ImageWMS({\r\n url: config.DoMainNameGeoServerWMS,\r\n params: {\r\n LAYERS: `${config.DataStore}:${`${tableName}`}`,\r\n LayerId: 100,\r\n FORMAT: \"image/png\",\r\n VERSION: \"1.1.0\",\r\n },\r\n crossOrigin: 'anonymous'\r\n }),\r\n className: `added_manually_image_layer_${tableName}`,\r\n });\r\n this.state.map?.addLayer(layerImage);\r\n console.log(\"getLayers\", this.state.map, this.state.map?.getLayers());\r\n }\r\n\r\n componentDidMount() {\r\n const defaultBaseMapUrl =\r\n this.props.defaultBaseMapUrl ||\r\n \"https://mt0.google.com/vt/lyrs=y&hl=vi&x={x}&y={y}&z={z}\";\r\n const defaultCenter = this.props.defaultCenter || config.defaultMapCenter;\r\n const defaultZoom = this.props.defaultZoom || 9;\r\n const defaultMaxZoom = this.props.maxZoom || 24;\r\n const defaultMinZoom = this.props.minZoom || 1;\r\n const defaultListLayer = this.props.listLayer || [];\r\n // console.log(\"Checkkkkkkk\", defaultListLayer);\r\n\r\n let ListLayerDefault = 0;\r\n const _updateLoadLayerState = () => {\r\n ListLayerDefault--;\r\n if (ListLayerDefault === 0) {\r\n this.setState({\r\n isLoadedAllVectorSource: true,\r\n })\r\n this.removeHiglightVectorLayer();\r\n }\r\n }\r\n const defaultExtend = this.props.extent || [\r\n config.defaultLeftCornerLng,\r\n config.defaultLeftCornerLat,\r\n config.defaultRightCornerLng,\r\n config.defaultRightCornerLat,\r\n ];\r\n const DefaultLayers: Array<\r\n TileLayer | ImageLayer | VectorLayer | VectorImageLayer\r\n > = [\r\n new TileLayer({\r\n source: new XYZ({\r\n url: defaultBaseMapUrl,\r\n maxZoom: this.props.maxZoom,\r\n crossOrigin: \"anonymous\",\r\n }),\r\n }),\r\n ];\r\n this.setState({\r\n listLayerSettingModel: defaultListLayer,\r\n isLoadedAllVectorSource: !defaultListLayer.length,\r\n })\r\n ListLayerDefault = defaultListLayer.length;\r\n defaultListLayer.map((layerData, index) => {\r\n const layerImage: any = new TileLayer({\r\n visible: layerData.is_check,\r\n zIndex: layerData.z_index,\r\n minZoom: layerData.min_zoom,\r\n maxZoom: layerData.max_zoom,\r\n source: new TileWMS({\r\n url: layerData.wms,\r\n params: {\r\n //LAYERS: `qhdongtrieu:${layerData.table}`,\r\n LAYERS: `${config.DataStore}:${layerData.table}`,\r\n LayerId: layerData.id,\r\n FORMAT: \"image/png\",\r\n VERSION: \"1.1.0\",\r\n },\r\n crossOrigin: 'anonymous'\r\n }),\r\n className: TileLayerClassName(layerData.id),\r\n });\r\n // const vectorLayer = new VectorImageLayer({\r\n // source: new VectorSource(),\r\n // opacity: 0.5,\r\n // style: Default_Feature_Style,\r\n // zIndex: layerData.z_index,\r\n // visible: layerData.is_check,\r\n // className: VectorImageLayerClassName(layerData.id)\r\n // });\r\n // fetch(`${config.DoMainNameGeoServer}?service=WFS&version=1.1.0&request=GetFeature&outputFormat=application/json&typename=${layerData.table}`).then(res => res.json().then((data) => {\r\n // _updateLoadLayerState();\r\n // vectorLayer.setSource(new VectorSource({\r\n // features: new GeoJSON().readFeatures(data),\r\n // }))\r\n // }).catch((error) => {\r\n // _updateLoadLayerState();\r\n // })).catch((error) => {\r\n // _updateLoadLayerState();\r\n // })\r\n DefaultLayers.push(layerImage);\r\n // DefaultLayers.push(vectorLayer);\r\n if (index === 0) {\r\n this.setState({\r\n currentLayer: layerImage,\r\n currentLayerSettingModel: layerData,\r\n primaryIdLayer: layerData.id\r\n });\r\n }\r\n });\r\n this.setHeightViewport();\r\n const IdIntervalSettingMap = setInterval(() => {\r\n if (this.state.mapContainerStyle) {\r\n var mousePositionControl = new MousePosition({\r\n coordinateFormat: createStringXY(4),\r\n projection: \"EPSG:4326\",\r\n className: \"custom-mouse-position\",\r\n target: document.getElementById(\"mouse-position\") as HTMLElement,\r\n undefinedHTML: \" \",\r\n });\r\n var mapScale = new ScaleLine({\r\n className: \"custom-map-scale\",\r\n target: document.getElementById(\"map-scale\") as HTMLElement,\r\n units: \"metric\",\r\n bar: true,\r\n steps: parseInt(\"4\", 10),\r\n text: true,\r\n minWidth: 140,\r\n });\r\n var OpenlayerMapObject = new Map({\r\n controls: this.props.isTabletOrMobile ? defaultControls().extend([mousePositionControl]) : defaultControls().extend([mousePositionControl, mapScale]), \r\n target: \"map-container-id\",\r\n layers: DefaultLayers,\r\n view: new View({\r\n projection: this.props.projection,\r\n center: defaultCenter,\r\n zoom: defaultZoom,\r\n minZoom: defaultMinZoom,\r\n maxZoom: defaultMaxZoom,\r\n extent: defaultExtend,\r\n }),\r\n });\r\n\r\n OpenlayerMapObject.addOverlay(\r\n new Overlay({\r\n position: [0, 0],\r\n element: document.getElementById(\"null\") as HTMLLinkElement,\r\n })\r\n );\r\n\r\n this.props.SaveMapBase(OpenlayerMapObject);\r\n\r\n if (this.props.isGeneralPlanning) {\r\n this.functionHandleDisplayGeneralPlanningMode(OpenlayerMapObject);\r\n }\r\n\r\n OpenlayerMapObject.on('moveend', () => {\r\n var newZoom = OpenlayerMapObject.getView().getZoom();\r\n this.setState({\r\n currentZoom: newZoom\r\n })\r\n })\r\n\r\n this.setState(\r\n {\r\n map: OpenlayerMapObject,\r\n },\r\n () => {\r\n //giờ tổng hợp quy hoạch cũng có view detail on click \r\n // -> comment cái if \r\n // -> check trong hàm handleOnOffViewInfomation this.props.isGeneralPlanning => mở tab map có id tương ứng\r\n // if (!this.props.isGeneralPlanning)\r\n this.handleOnOffViewInfomation(true);\r\n if (this.props.isGeneralPlanning) {\r\n this.addShowPopUpInClickedCord();\r\n }\r\n }\r\n );\r\n this.props.setIsDoneConstructMap && this.props.setIsDoneConstructMap(true);\r\n\r\n clearInterval(IdIntervalSettingMap);\r\n this.checkSearchFormHomePage();\r\n }\r\n }, 500);\r\n //-- update handle function\r\n this.props.CreateOpenlayerController({\r\n toggleDisplayLayerRelated: this.toggleDisplayLayerRelated,\r\n handleOnOffViewInfomation: this.handleOnOffViewInfomation,\r\n toggleDisplayVectorLayer: this.toggleDisplayVectorLayer,\r\n handleDisplayFullScreenViewMode: this.handleDisplayFullScreenViewMode,\r\n handlePinMarkerMode: this.handlePinMarkerMode,\r\n handleMeasureMode: this.handleMeasureMode,\r\n handleExportMap: this.handleExportMap,\r\n handleZoomOut: this.handleZoomOut,\r\n handleZoomIn: this.handleZoomIn,\r\n toggleDisplayLayer: this.toggleDisplayLayer,\r\n resetLayerOpacity: this.resetLayerOpacity,\r\n changeCurrentLayer: this.changeCurrentLayer,\r\n changeCurrentLayerOpacity: this.changeCurrentLayerOpacity,\r\n changeBaseMap: this.changeBaseMap,\r\n handleSelectedOne: this.handleSelectOne,\r\n handleSelectMany: this.handleSelectMany,\r\n handleSearchCoordinate: this.handleSearchCoordinate,\r\n handleSearchCoordinateMapDetail: this.handleSearchCoordinateMapDetail,\r\n placeSearch: this.pinSearchMode,\r\n functionDisplayAllBoundariesOfAllPlanning: this.functionDisplayAllBoundariesOfAllPlanning,\r\n handleViewCurrentLocaltion: this.viewCurrentLocaltion,\r\n removeInteractionOnMap: this.removeInteractionOnMap,\r\n functionTurnOffFilterMode: this.functionTurnOffFilterMode,\r\n clearFeaturesSelected: this.clearFeaturesSelected,\r\n functionClickViewInfomationListener: this.functionClickViewInfomationListener,\r\n functionHightLightPolygon: this.functionHightLightPolygon,\r\n filterDrawnVectorLayer: this.filterDrawnVectorLayer,\r\n deleteFilterDrawnVectorLayer: this.deleteFilterDrawnVectorLayer,\r\n getCurrentDrawFeature: this.getCurrentDrawFeature,\r\n addLayerManually: this.addLayerManually,\r\n });\r\n\r\n }\r\n\r\n componentDidUpdate(prevProps: any, prevState: any) {\r\n if (this.state.currentZoom !== prevState.currentZoom) {\r\n // console.log(\"current zoom\", this.state.currentZoom, prevState.currentZoom);\r\n\r\n this.functionClickShowPopUpInClickedCord(null, null);\r\n }\r\n\r\n if (this.state.prevFeatureId !== prevState.prevFeatureId) {\r\n // console.log(\"Feature id của Cha\", this.state.prevFeatureId, \" \", prevState.prevFeatureId);\r\n }\r\n\r\n if (this.state.prevFeatureChildId !== prevState.prevFeatureChildId) {\r\n console.log(\"Feature id của con\", prevState.prevFeatureChildId, this.state.prevFeatureChildId);\r\n }\r\n }\r\n\r\n\r\n render() {\r\n return (\r\n \r\n setName(data)}\r\n districtSelect={districtSelect}\r\n setDistrictSelect={setDistrictSelect}\r\n planningUnitSelect={planningUnitSelect}\r\n setPlanningUnitSelect={setPlanningUnitSelect}\r\n approvalAgencySelect={approvalAgencySelect}\r\n setApprovalAgencySelect={setApprovalAgencySelect}\r\n numberOfDecisions={numberOfDecisions}\r\n setNumberOfDecisions={setNumberOfDecisions}\r\n constructionGroup={constructionGroup}\r\n setConstructionGroup={setConstructionGroup}\r\n yearSearch={yearSearch}\r\n setYearSearch={setYearSearch}\r\n isLookup={true}\r\n />\r\n \r\n \" + title + \" \");\r\n myWindow?.document.write(\"\");\r\n myWindow?.document.write(\r\n `\r\n \r\n
\r\n \r\n \r\n Tổng hợp quy hoạch\r\n \r\n {planningType &&\r\n planningType.length > 0 &&\r\n planningType.map((item, index) => (\r\n
\r\n}\r\n\r\nexport default React.memo(MapContainer)","/* eslint-disable jsx-a11y/img-redundant-alt */\r\nimport React from \"react\";\r\nimport \"./openlayers-map.scss\";\r\nimport OpenLayerComponent from \"../../models/open-layer/props-state\";\r\nimport { connect } from \"react-redux\";\r\nimport * as OpenlayerStore from \"../../redux/store/open-layer/open-layer.store\";\r\nimport * as homePageStore from \"../../redux/store/home-page/home-page.store\";\r\nimport history from \"../../common/history\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport * as MapDataStore from \"../../redux/store/map-data/map-data.store\";\r\nimport Jquery from \"jquery\";\r\nimport { ConvertColsDataDetailViewToStandardData } from \"./config/convert-data\";\r\nimport UrlCollect from \"../../common/url-collect\";\r\nimport { geolocated } from \"react-geolocated\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faPrint } from \"@fortawesome/free-solid-svg-icons\";\r\nimport * as LoadingAction from '../../redux/store/loading/loading.store';\r\n//@ts-ignore\r\nimport domtoimage from 'dom-to-image-more';\r\n//--- Config\r\nimport {\r\n VectorImageLayerClassName,\r\n TileLayerClassName,\r\n Default_Feature_Style,\r\n Highlight_Feature_Style,\r\n Draw_Filter_Feature_Style,\r\n} from './config/config';\r\n\r\n//--- Store\r\nimport * as MapToolsPanelsStore from \"../../redux/store/open-layer/map-tools-panels.store\";\r\nimport * as mapHelper from \"../../common/map\";\r\n\r\n//--- Openlayer\r\nimport TileWMS from 'ol/source/TileWMS';\r\nimport VectorImageLayer from \"ol/layer/VectorImage\";\r\nimport { ScaleLine, defaults as defaultControls } from \"ol/control\";\r\nimport MousePosition from \"ol/control/MousePosition\";\r\nimport { createStringXY, toStringHDMS } from \"ol/coordinate\";\r\nimport { Image as ImageLayer } from \"ol/layer\";\r\nimport ImageWMS from \"ol/source/ImageWMS\";\r\nimport \"ol/ol.css\";\r\nimport { Map, View } from \"ol\";\r\nimport TileLayer from \"ol/layer/Tile\";\r\nimport OSM from \"ol/source/OSM\";\r\nimport XYZ from \"ol/source/XYZ\";\r\nimport WKT from \"ol/format/WKT\";\r\nimport Layer from \"ol/layer/Layer\";\r\nimport VectorLayer from \"ol/layer/Vector\";\r\nimport VectorSource from \"ol/source/Vector\";\r\nimport Feature from \"ol/Feature\";\r\nimport Point from \"ol/geom/Point\";\r\nimport MapBrowserEvent from \"ol/MapBrowserEvent\";\r\nimport { Circle as CircleStyle, Fill, Stroke, Style, Icon } from \"ol/style\";\r\nimport Overlay from \"ol/Overlay\";\r\nimport { LineString, Polygon } from \"ol/geom\";\r\nimport { getArea, getLength } from \"ol/sphere\";\r\nimport Draw, { createBox } from \"ol/interaction/Draw\";\r\nimport { unByKey } from \"ol/Observable\";\r\nimport GeoJSON from \"ol/format/GeoJSON\";\r\nimport Select from \"ol/interaction/Select\";\r\nimport { click } from \"ol/events/condition\";\r\nimport DragBox from \"ol/interaction/DragBox\";\r\nimport { toLonLat, transform } from \"ol/proj\";\r\nimport proj4 from \"proj4\";\r\nimport { register } from \"ol/proj/proj4\";\r\nimport Projection from 'ol/proj/Projection';\r\nimport OlOverlay from 'ol/Overlay';\r\n\r\n//--- Models\r\nimport { BoundariesViewModel, RelatedLayerModel } from \"../../models/map-data-model-b/new-planning-relation.model\";\r\nimport LayerSettingsModels from \"../../models/map-data-model-b/layer-setting-models\";\r\nimport SingleMapInfoMationModel from \"../../models/map-data-model-b/single-map-infomation-model\";\r\nimport ResponeFromServeClickShowInfomationFeature from \"../../models/open-layer/respone-get-future-info-url-ajax\";\r\nimport ImageLayerModels from \"../../models/open-layer/image-layer\";\r\nimport BoundariesModel from \"../../models/map-data-model-b/new-boundaries.model\";\r\nimport * as config from \"../../utils/configuration\";\r\nimport GetAllPlanningBoundariesMode from \"../../models/map-data-model-b/get-all-planning-boundaries.model\";\r\nimport DrawnFilterDataModel from '../../models/open-layer/drawn-filter-data.model';\r\nimport MapContainer from './childs/map-container.view';\r\nimport Notification from '../../common/notification-service';\r\n\r\nimport {\r\n NotificationMessageType,\r\n NotificationPosition,\r\n} from \"../../utils/configuration\";\r\nimport ShowNotification from \"../../components/react-notifications/react-notifications\";\r\nimport * as viVN from \"../../languages/vi-VN.json\";\r\nimport * as mapToolAction from \"../../redux/store/map-tool/map-tool.store\";\r\nimport GeometryType from \"ol/geom/GeometryType\";\r\nimport { stringToGlsl } from \"ol/style/expressions\";\r\n\r\nimport * as viLanguage from \"../../languages/vi\";\r\nimport { Popover } from \"react-bootstrap\";\r\n\r\nvar selected: any = null;\r\nvar sketchGolbal: Feature | null;\r\nvar helpTooltipElementGolbal: HTMLElement;\r\nvar helpTooltipGolbal: Overlay;\r\nvar measureTooltipElementGolbal: HTMLElement | null;\r\nvar measureTooltipGolbal: Overlay;\r\nvar drawMeasureGolbal: any;\r\nvar selectClick = new Select({\r\n condition: click,\r\n style: Highlight_Feature_Style\r\n});\r\nvar select: any = null; // ref to currently selected interaction\r\nconst classNameVectorLayerFilterDrawn = 'dawn-filter-vector-layer';\r\nconst DrawnFilterData: DrawnFilterDataModel = {\r\n draw: null,\r\n source: null,\r\n filterType: '',\r\n}\r\nclass OpenlayersMapView extends React.Component<\r\n OpenLayerComponent.PropsType,\r\n OpenLayerComponent.StateType\r\n> {\r\n constructor(props: OpenLayerComponent.PropsType) {\r\n super(props);\r\n this.state = {\r\n map: null,\r\n mapContainerStyle: null,\r\n currentLayer: null,\r\n currentLayerSettingModel: null,\r\n useFeatureViewInfomationOnClick: false,\r\n modals: false,\r\n coordinate: this.props.coordinate,\r\n listLayerSettingModel: [],\r\n primaryIdLayer: 0,\r\n isLoadedAllVectorSource: false,\r\n currentZoom: 0,\r\n prevFeatureId: \"\",\r\n prevFeatureChildId: [],\r\n };\r\n }\r\n\r\n toggleDisplayVectorLayer = (\r\n boundaries: BoundariesModel,\r\n isDisplay: boolean,\r\n minZoom: number = 1,\r\n maxZoom: number = 20,\r\n tooltipValue: string = \"\",\r\n planningId: number = 0\r\n ) => {\r\n const LayersCurrents = this.state.map?.getLayers();\r\n let isBoundariesAdded = false;\r\n LayersCurrents?.forEach((layerModel: Layer) => {\r\n if (layerModel.getClassName() === `id-layer-${boundaries.nameTb}`) {\r\n isBoundariesAdded = true;\r\n layerModel.setVisible(isDisplay);\r\n return;\r\n }\r\n });\r\n if (!isBoundariesAdded) {\r\n const format = new WKT();\r\n\r\n const feature: any[] = [];\r\n const featureObject = format.readFeature(boundaries.geomText, {\r\n dataProjection: this.props.projection,\r\n featureProjection: this.props.projection,\r\n });\r\n featureObject.setProperties({ tooltipValue: tooltipValue });\r\n featureObject.setProperties({ planningId: planningId });\r\n feature.push(featureObject);\r\n\r\n LayersCurrents?.push(\r\n new VectorLayer({\r\n className: `id-layer-${boundaries.nameTb}`,\r\n minZoom: minZoom,\r\n maxZoom: maxZoom,\r\n source: new VectorSource({\r\n features: [...feature],\r\n }),\r\n })\r\n );\r\n }\r\n };\r\n\r\n /*\r\n * Khi click vao phan chon mot quy hoach lien quan o left menu\r\n * Thi goi vao ham nay\r\n * Thong tin gui sang bao gom: Boundaries cua layer va thong tin layer, trong do da bao gom\r\n * display_name co chua cols\r\n *\r\n * */\r\n\r\n toggleDisplayLayerRelated = (\r\n boundaries: BoundariesViewModel,\r\n relatedLayer: RelatedLayerModel,\r\n isDisplay: boolean\r\n ) => {\r\n if (relatedLayer && relatedLayer.id && relatedLayer.id > 0) {\r\n const LayersCurrents = this.state.map?.getLayers();\r\n let isLayerAdded = false;\r\n LayersCurrents?.forEach((layerModel: Layer) => {\r\n if (layerModel.getClassName() === `id-layer-${relatedLayer.id}`) {\r\n isLayerAdded = true;\r\n layerModel.setVisible(isDisplay);\r\n }\r\n });\r\n if (!isLayerAdded) {\r\n /*\r\n * Neu quy hoach lien quan can hien thi boundaries\r\n * */\r\n\r\n if (Array.isArray(boundaries) && boundaries.length > 0) {\r\n const format = new WKT();\r\n const feature: any[] = [];\r\n feature.push(\r\n format.readFeature(boundaries.geomText, {\r\n dataProjection: this.props.projection,\r\n featureProjection: this.props.projection,\r\n })\r\n );\r\n LayersCurrents?.push(\r\n new VectorLayer({\r\n className: `id-layer-${boundaries.nameTb}`,\r\n source: new VectorSource({\r\n features: [...feature],\r\n }),\r\n })\r\n );\r\n }\r\n\r\n\r\n if (relatedLayer && relatedLayer.table && relatedLayer.wms) {\r\n this.setState({\r\n relatedLayer: relatedLayer\r\n })\r\n let selectedLayer = config.DataStore + ':' + relatedLayer.table;\r\n //console.log(this.state.listLayerSettingModel);\r\n //console.log('Show related map info by Title WMS');\r\n const selectSource = new TileWMS({\r\n url: relatedLayer.wms,\r\n params: {\r\n className: 'related-map',\r\n 'LAYERS': selectedLayer,\r\n LayerId: relatedLayer.id,\r\n FORMAT: \"image/png\",\r\n VERSION: \"1.1.0\",\r\n }\r\n })\r\n\r\n //console.log('selectSource',selectSource);\r\n\r\n const selectLayer = new TileLayer({\r\n className: `id-layer-${relatedLayer.id}`,\r\n visible: true,\r\n opacity: 1,\r\n source: selectSource,\r\n });\r\n selectLayer.setZIndex(999);\r\n LayersCurrents.push(selectLayer);\r\n }\r\n }\r\n }\r\n };\r\n\r\n changeBaseMap = (newBasemapUrl: string | undefined) => {\r\n const LayersCurrents = this.state.map?.getLayers();\r\n if (newBasemapUrl) {\r\n LayersCurrents?.insertAt(\r\n 0,\r\n new TileLayer({\r\n source: new OSM({\r\n url: newBasemapUrl,\r\n maxZoom: this.props.maxZoom,\r\n }),\r\n })\r\n );\r\n LayersCurrents?.removeAt(1);\r\n } else {\r\n const BaseMapLayer = LayersCurrents?.item(0).setVisible(false);\r\n }\r\n };\r\n\r\n changeCurrentLayerOpacity = (\r\n opacity: number | undefined,\r\n layer?: LayerSettingsModels.LayerSettingsModel | any\r\n ) => {\r\n if (opacity) {\r\n if (layer) this.toggleDisplayLayer(layer, opacity);\r\n }\r\n };\r\n\r\n changeCurrentLayer = (layer: LayerSettingsModels.LayerSettingsModel) => {\r\n const LayersCurrents = this.state.map?.getLayers();\r\n const newStates: any = { currentLayerSettingModel: layer };\r\n LayersCurrents?.forEach(\r\n (layerElement: ImageLayerModels.ImageLayerModel) => {\r\n const ParamsProperty = layerElement.getProperties().source.params_;\r\n // const LayerClassName = layerElement.className_;\r\n if (ParamsProperty && ParamsProperty.LayerId === layer.id) {\r\n newStates.currentLayer = layerElement;\r\n return;\r\n }\r\n }\r\n );\r\n this.setState(\r\n newStates,\r\n () => {\r\n this.changeCurrentLayerOpacity(\r\n Number(layer.opacity) / 100,\r\n layer\r\n );\r\n }\r\n );\r\n };\r\n\r\n toggleDisplayLayer = (\r\n layer: LayerSettingsModels.LayerSettingsModel,\r\n opacity?: number\r\n ) => {\r\n const LayersCurrents = this.state.map?.getLayers();\r\n LayersCurrents?.forEach(\r\n (layerElement: ImageLayerModels.ImageLayerModel) => {\r\n const ParamsProperty = layerElement.getProperties().source.params_;\r\n const layerClassName = layerElement.className_;\r\n if (ParamsProperty && ParamsProperty.LayerId === layer.id) {\r\n layerElement.setVisible(layer.is_check);\r\n }\r\n if (layerClassName === VectorImageLayerClassName(layer.id)) {\r\n layerElement.setVisible(layer.is_check);\r\n // if (opacity) {\r\n // layerElement.setOpacity(opacity);\r\n // }\r\n }\r\n if (opacity) {\r\n if (ParamsProperty && ParamsProperty.LayerId !== layer.id) {\r\n layerElement.setOpacity(opacity);\r\n }\r\n }\r\n }\r\n );\r\n };\r\n\r\n resetLayerOpacity = () => {\r\n console.log(\" run resetLayerOpacity \");\r\n \r\n const layersList = this.state.map?.getLayers();\r\n layersList?.forEach((layerElement: ImageLayerModels.ImageLayerModel) => {\r\n layerElement.setOpacity(1);\r\n }\r\n );\r\n }\r\n\r\n\r\n handleZoomOut = () => {\r\n this.state.map?.getView().setZoom(this.state.map.getView().getZoom() - 1);\r\n };\r\n\r\n handleZoomIn = () => {\r\n this.state.map?.getView().setZoom(this.state.map.getView().getZoom() + 1);\r\n };\r\n\r\n handleSelectOne = () => {\r\n this.handleOnOffViewInfomation(true);\r\n };\r\n\r\n SpatialSearch = async (coordinate: any) => {\r\n const layerGroups = this.props.listGroupLayer;\r\n const tableName = layerGroups && layerGroups.length > 0 && this.checkPlanningOfEarth(layerGroups);\r\n let _data = {\r\n \"tbName\": tableName,\r\n \"lang\": \"vn\",\r\n \"shp\": coordinate,\r\n \"r\": 0,\r\n \"searchType\": \"Polygon\"\r\n };\r\n try {\r\n const res = await mapToolAction.SpatialSearch(_data);\r\n return res;\r\n } catch (error) {\r\n throw error\r\n }\r\n }\r\n\r\n checkPlanningOfEarth = (layerGroups: any) => {\r\n if (!layerGroups) return;\r\n let layerOfEarth = layerGroups && layerGroups.length > 0 && layerGroups.map((item: any) => {\r\n return item.layer_settings\r\n })\r\n if (layerOfEarth && Array.isArray(layerOfEarth) && layerOfEarth.length > 0) {\r\n for (let i = 0; i < layerOfEarth.length; i++) {\r\n if (typeof layerOfEarth[i][0] != 'undefined' && layerOfEarth[i][0].select_multi === true) {\r\n return layerOfEarth[i][0].table;\r\n }\r\n }\r\n }\r\n }\r\n\r\n handleSelectMany = () => {\r\n this.removeHiglightVectorLayer();\r\n this.clearFeatures();\r\n this.setHeaderForTable();\r\n let select = new Select();\r\n\r\n this.state.map?.addInteraction(select);\r\n\r\n let selectedFeatures = select.getFeatures();\r\n\r\n let dragBox = new DragBox({});\r\n\r\n let _idTimeout: any = null;\r\n\r\n this.state.map?.addInteraction(dragBox);\r\n\r\n dragBox.on(\"boxend\", async () => {\r\n let rotation = this.state.map?.getView().getRotation();\r\n let oblique = rotation % (Math.PI / 2) !== 0;\r\n let candidateFeatures = selectedFeatures;\r\n let extent = dragBox.getGeometry().getExtent();\r\n const coordinate = dragBox.getGeometry().getCoordinates()[0];\r\n console.log(\"dragBox.getGeometry().getCoordinates()\", dragBox.getGeometry().getCoordinates()[0])\r\n let stringCoordinate = \"\"\r\n for (let i = 0; i < coordinate.length; i++) {\r\n stringCoordinate = stringCoordinate.concat(`${coordinate[i][0]} ${coordinate[i][1]}${i === coordinate.length - 1 ? '' : ','}`);\r\n }\r\n const preString = \"POLYGON((\";\r\n const endString = \"))\"\r\n const coordinateSearch = preString + stringCoordinate + endString;\r\n console.log(\"coordianteSearch\", coordinateSearch);\r\n const res = await this.SpatialSearch(coordinateSearch);\r\n const properties = [];\r\n const boundaries = [];\r\n if (res && res.content) {\r\n let feature = JSON.parse(res.content);\r\n if (feature && feature.data) {\r\n const _data = feature.data;\r\n for (let i = 0; i <= _data.length; i++) {\r\n if (_data[i]?.geo) {\r\n boundaries.push(_data[i].geo);\r\n delete _data[i].geo;\r\n }\r\n _data[i]?.geom && delete _data[i].geom;\r\n _data[i] && properties.push(_data[i]);\r\n }\r\n }\r\n if (_idTimeout) {\r\n clearInterval(_idTimeout)\r\n }\r\n _idTimeout = setTimeout(() => {\r\n const btnRelativeResultTab = document.getElementById(\r\n \"btnRelativeResultTab\"\r\n );\r\n if (btnRelativeResultTab) {\r\n if (btnRelativeResultTab.classList.contains(\"collapsed\"))\r\n btnRelativeResultTab.click();\r\n }\r\n }, 100)\r\n this.functionHightLightPolygon(boundaries);\r\n this.props.SaveInfomationForTable(properties);\r\n\r\n } else {\r\n _idTimeout = null;\r\n }\r\n });\r\n\r\n // clear selection when drawing a new box and when clicking on the map\r\n dragBox.on(\"boxstart\", function () {\r\n selectedFeatures.clear();\r\n });\r\n\r\n // selectedFeatures.on([\"add\", \"remove\"], () => {\r\n // var properties = selectedFeatures.getArray().map(function (feature) {\r\n // return feature.getProperties();\r\n // });\r\n\r\n\r\n // });\r\n };\r\n\r\n removeInteractionOnMap = () => {\r\n let interactionArr = this.state.map?.getInteractions().array_;\r\n let length = interactionArr.length;\r\n if (interactionArr && length === 0) return;\r\n interactionArr.map((item: any, index: number) => {\r\n if (item instanceof DragBox) {\r\n this.state.map?.getInteractions().array_.splice(index, 1);\r\n }\r\n })\r\n }\r\n\r\n handleExportMap = (isSave: boolean) => {\r\n const _Self = this;\r\n _Self.props.ShowLoading()\r\n const _openlayerMapObject: Map = this.state.map;\r\n const _size = _openlayerMapObject.getSize();\r\n const _exportOptions = {\r\n width: _size[0],\r\n height: _size[1],\r\n filter: function (_element: HTMLElement) {\r\n const _className = _element.className || '';\r\n return (\r\n _className.indexOf('ol-control') === -1 ||\r\n _className.indexOf('ol-scale') > -1 ||\r\n (_className.indexOf('ol-attribution') > -1 &&\r\n _className.indexOf('ol-uncollapsible'))\r\n );\r\n },\r\n };\r\n\r\n domtoimage.toJpeg(_openlayerMapObject.getViewport(), _exportOptions)\r\n .then(function (dataUrl: string) {\r\n _Self.props.HiddenLoading()\r\n if (isSave) {\r\n const _linkElement = document.createElement('a');\r\n _linkElement.setAttribute('download', `map.jpg`)\r\n _linkElement.setAttribute(\"href\", dataUrl);\r\n _linkElement.click();\r\n } else {\r\n document\r\n .getElementById(\"imagemap\")\r\n ?.setAttribute(\"src\", dataUrl);\r\n document.getElementById(\"print\")?.click();\r\n }\r\n (document.querySelector('[class=\"tool-button\"]') as HTMLElement)?.click();\r\n });\r\n };\r\n\r\n handleOnOffViewInfomation = (isTurnOn: boolean) => {\r\n // this.removeHiglightVectorLayer();\r\n this.deleteHightlightFilterLayer();\r\n const mapObject: Map = this.state.map;\r\n //đoạn check this.props.isGeneralPlanning cho vào hàm functionClickViewInfomationListener\r\n if (isTurnOn) {\r\n mapObject.on(\"singleclick\", this.functionClickViewInfomationListener);\r\n } else {\r\n mapObject.un(\"singleclick\", this.functionClickViewInfomationListener);\r\n }\r\n this.changeInteraction();\r\n };\r\n\r\n addShowPopUpInClickedCord = () => {\r\n const mapObject: Map = this.state.map;\r\n const popup = new Overlay({\r\n id: 'show-popup-clicked-cord_in-map',\r\n element: document.getElementById('show-popup-clicked-cord') as HTMLElement || undefined,\r\n });\r\n mapObject.addOverlay(popup);\r\n };\r\n\r\n handleDisplayFullScreenViewMode = (isFullScreen: boolean) => {\r\n const HeaderContainer = document.getElementById(\r\n \"header-map-page-container\"\r\n ) as HTMLElement;\r\n if (HeaderContainer) {\r\n if (isFullScreen) {\r\n HeaderContainer.style.display = \"none\";\r\n this.setHeightViewport();\r\n } else {\r\n HeaderContainer.style.display = \"block\";\r\n this.setHeightViewport();\r\n }\r\n }\r\n };\r\n\r\n handlePinMarkerMode = (isTurnOn: boolean) => {\r\n const LayersCurrents = this.state.map?.getLayers();\r\n const openlayerMap: Map = this.state.map;\r\n const anchorXUnits: any = \"fraction\";\r\n const anchorYUnits: any = \"pixels\";\r\n if (isTurnOn) {\r\n const PinMarkerLayer = new VectorLayer({\r\n zIndex: 9999,\r\n className: \"pin-marker-vector-layer\",\r\n source: new VectorSource({\r\n features: [],\r\n }),\r\n style: new Style({\r\n image: new Icon({\r\n anchor: [0.5, 22],\r\n anchorXUnits: anchorXUnits,\r\n anchorYUnits: anchorYUnits,\r\n src: require(\"../../assets/icon/red-marker.png\"),\r\n }),\r\n }),\r\n });\r\n LayersCurrents?.push(PinMarkerLayer);\r\n openlayerMap.on(\"singleclick\", this.functionClickPinMarker_PinMarkerMode);\r\n } else {\r\n let layerIndex = -1;\r\n LayersCurrents?.forEach((layerObject: Layer, index: number) => {\r\n if (layerObject.getClassName() === \"pin-marker-vector-layer\") {\r\n layerIndex = index;\r\n return;\r\n }\r\n });\r\n if (layerIndex != -1) LayersCurrents?.removeAt(layerIndex);\r\n openlayerMap.un(\"singleclick\", this.functionClickPinMarker_PinMarkerMode);\r\n }\r\n };\r\n\r\n handleMeasureMode = (isTurnOn: boolean, isLineMode: boolean) => {\r\n const LayersCurrents = this.state.map?.getLayers();\r\n let indexMeasureLayer = -1;\r\n let isLayerHasExist = false;\r\n LayersCurrents?.forEach((layerObject: Layer, index: number) => {\r\n if (layerObject.getClassName() === \"measuare-vector-layer\") {\r\n isLayerHasExist = true;\r\n indexMeasureLayer = index;\r\n return;\r\n }\r\n });\r\n if (isTurnOn) {\r\n let measureVectorSource = new VectorSource();\r\n if (!isLayerHasExist) {\r\n const measureVectorLayer = new VectorLayer({\r\n zIndex: 1000,\r\n className: \"measuare-vector-layer\",\r\n source: measureVectorSource,\r\n style: new Style({\r\n fill: new Fill({\r\n color: \"rgba(255, 0, 0, 0.6)\",\r\n }),\r\n stroke: new Stroke({\r\n color: \"#ffcc33\",\r\n width: 3,\r\n }),\r\n image: new CircleStyle({\r\n radius: 7,\r\n fill: new Fill({\r\n color: \"#ffcc33\",\r\n }),\r\n }),\r\n }),\r\n });\r\n LayersCurrents.push(measureVectorLayer);\r\n this.state.map.on(\r\n \"pointermove\",\r\n this.functionPointerMoveHandle_MeasureMode\r\n );\r\n this.state.map\r\n .getViewport()\r\n .addEventListener(\"mouseout\", this.functionMouseOut_MeasureMode);\r\n } else {\r\n const MeasureVectorLayer: VectorLayer = LayersCurrents?.item(\r\n indexMeasureLayer\r\n );\r\n measureVectorSource = MeasureVectorLayer.getSource();\r\n }\r\n this.state.map.removeInteraction(drawMeasureGolbal);\r\n this.functionAddInteraction_MeasureMode(isLineMode, measureVectorSource);\r\n } else {\r\n this.state.map.removeInteraction(drawMeasureGolbal);\r\n this.functionRemoveAllMapOverlay();\r\n this.state.map.un(\r\n \"pointermove\",\r\n this.functionPointerMoveHandle_MeasureMode\r\n );\r\n this.state.map\r\n .getViewport()\r\n .removeEventListener(\"mouseout\", this.functionMouseOut_MeasureMode);\r\n if (indexMeasureLayer != -1) LayersCurrents?.removeAt(indexMeasureLayer);\r\n }\r\n };\r\n\r\n //--- core function\r\n\r\n clearFeaturesSelected = () => {\r\n this.props.featuresSelected?.map(features => {\r\n features.setStyle(Default_Feature_Style(features))\r\n })\r\n this.props.SaveOpenlayerFeaturesSelected && this.props.SaveOpenlayerFeaturesSelected([]);\r\n this.deleteFilterDrawnVectorLayer();\r\n this.deleteHightlightFilterLayer()\r\n }\r\n\r\n functionTurnOffFilterMode = () => {\r\n const filterButtonElement = document.querySelector(\r\n '[data-icon-name=\"filter\"]'\r\n );\r\n if (filterButtonElement) {\r\n if (filterButtonElement.classList.contains(\"active\")) {\r\n const informationTool = (document.querySelector(\".tool-button\") as HTMLElement);\r\n informationTool?.click();\r\n }\r\n }\r\n /*\r\n const mapInformationTabButton = (document.querySelector('[aria-controls=\"mapLayersTab\"]') as HTMLElement);\r\n mapInformationTabButton?.click();\r\n */\r\n // this.props.SetDisplayInfomationPopup && this.props.SetDisplayInfomationPopup(false);\r\n // this.clearFeaturesSelected();\r\n // this.deleteFilterDrawnVectorLayer();\r\n }\r\n\r\n functionDisplayAllBoundariesOfAllPlanning = (\r\n ListBoundaries: GetAllPlanningBoundariesMode[]\r\n ) => {\r\n const idIntervalCheckMapExist = setInterval(() => {\r\n if (this.state.map) {\r\n const vectorLayerStyle = new Style({\r\n stroke: new Stroke({\r\n color: \"rgba(215,78,0,0.8)\",\r\n width: 1,\r\n }),\r\n fill: new Fill({\r\n color: \"rgba(215,78,0,0.1)\",\r\n }),\r\n });\r\n const LayersCurrents = this.state.map?.getLayers();\r\n ListBoundaries.map((boundariesData) => {\r\n const format = new WKT();\r\n\r\n const feature: any[] = [];\r\n const featureObject = format.readFeature(boundariesData.geomText, {\r\n dataProjection: this.props.projection,\r\n featureProjection: this.props.projection,\r\n });\r\n featureObject.setProperties({ tooltipValue: boundariesData.name });\r\n featureObject.setProperties({ planningId: boundariesData.id });\r\n featureObject.setProperties({ acreage: boundariesData.acreage });\r\n featureObject.setProperties({\r\n population: boundariesData.population,\r\n });\r\n featureObject.setProperties({ report: boundariesData.report });\r\n feature.push(featureObject);\r\n\r\n LayersCurrents.push(\r\n new VectorLayer({\r\n className: `id-layer-${boundariesData.nameTable}`,\r\n maxZoom: boundariesData.maxZoom,\r\n minZoom: boundariesData.minZoom,\r\n zIndex: boundariesData.zIndex,\r\n source: new VectorSource({\r\n features: feature,\r\n }),\r\n style: vectorLayerStyle,\r\n })\r\n );\r\n\r\n });\r\n console.log(LayersCurrents, 'current layer')\r\n clearInterval(idIntervalCheckMapExist);\r\n }\r\n }, 250);\r\n };\r\n\r\n functionRemoveAllMapOverlay = () => {\r\n // const CollectsOfOverlay = this.state.map.getOverlays();\r\n // CollectsOfOverlay.clear();\r\n \r\n const indexToRemove: number[] = [];\r\n this.state.map.getOverlays().forEach((element: any, index: number) => {\r\n if(!element || !element.id) {\r\n indexToRemove.push(index);\r\n }\r\n });\r\n indexToRemove.sort((a, b) => b - a);\r\n indexToRemove.map((index: number) => {\r\n this.state.map.getOverlays().removeAt(index);\r\n })\r\n };\r\n\r\n functionAddInteraction_MeasureMode = (\r\n isLineMode: boolean,\r\n vectorSource: VectorSource\r\n ) => {\r\n let type: any = isLineMode ? \"LineString\" : \"Polygon\";\r\n drawMeasureGolbal = new Draw({\r\n source: vectorSource,\r\n type: type,\r\n style: new Style({\r\n fill: new Fill({\r\n color: \"rgba(234, 255, 0,0.5)\",\r\n }),\r\n stroke: new Stroke({\r\n color: \"rgba(255, 0, 0, 0.8);\",\r\n // lineDash: [10, 10],\r\n width: 3,\r\n }),\r\n image: new CircleStyle({\r\n radius: 5,\r\n stroke: new Stroke({\r\n color: \"rgba(255,0,0,0.3);\",\r\n }),\r\n fill: new Fill({\r\n color: \"rgba(29, 32, 232,1)\",\r\n }),\r\n }),\r\n }),\r\n });\r\n this.state.map?.addInteraction(drawMeasureGolbal);\r\n\r\n this.functionCreateMeasureTooltip_MeasureMode();\r\n this.functionCreateHelpTooltip_MeasureMode();\r\n\r\n let listener: any;\r\n const self = this;\r\n drawMeasureGolbal.on(\"drawstart\", (evt: any) => {\r\n sketchGolbal = evt.feature;\r\n\r\n let tooltipCoord = evt.coordinate;\r\n\r\n listener = sketchGolbal?.getGeometry().on(\"change\", function (evt) {\r\n const geom = evt.target;\r\n let output;\r\n if (geom instanceof Polygon) {\r\n output = self.functionFormatPolygon_MeasureMode(geom);\r\n tooltipCoord = geom.getInteriorPoint().getCoordinates();\r\n } else if (geom instanceof LineString) {\r\n output = self.functionFormatLength_MeasureMode(geom);\r\n tooltipCoord = geom.getLastCoordinate();\r\n }\r\n if (measureTooltipElementGolbal)\r\n measureTooltipElementGolbal.innerHTML = output || \"\";\r\n measureTooltipGolbal.setPosition(tooltipCoord);\r\n });\r\n });\r\n\r\n drawMeasureGolbal.on(\"drawend\", function () {\r\n if (measureTooltipElementGolbal)\r\n measureTooltipElementGolbal.className = \"ol-tooltip ol-tooltip-static\";\r\n measureTooltipGolbal.setOffset([0, -7]);\r\n sketchGolbal = null;\r\n measureTooltipElementGolbal = null;\r\n self.functionCreateMeasureTooltip_MeasureMode();\r\n unByKey(listener);\r\n });\r\n };\r\n\r\n functionCreateHelpTooltip_MeasureMode = () => {\r\n helpTooltipElementGolbal?.parentNode?.removeChild(helpTooltipElementGolbal);\r\n helpTooltipElementGolbal = document.createElement(\"div\");\r\n helpTooltipElementGolbal.className = \"ol-tooltip hidden\";\r\n const positioning: any = \"center-left\";\r\n helpTooltipGolbal = new Overlay({\r\n element: helpTooltipElementGolbal,\r\n offset: [15, 0],\r\n positioning: positioning,\r\n });\r\n this.state.map.addOverlay(helpTooltipGolbal);\r\n };\r\n\r\n functionCreateMeasureTooltip_MeasureMode = () => {\r\n measureTooltipElementGolbal?.parentNode?.removeChild(\r\n measureTooltipElementGolbal\r\n );\r\n measureTooltipElementGolbal = document.createElement(\"div\");\r\n measureTooltipElementGolbal.className = \"ol-tooltip ol-tooltip-measure\";\r\n const positioning: any = \"bottom-center\";\r\n measureTooltipGolbal = new Overlay({\r\n element: measureTooltipElementGolbal,\r\n offset: [0, -15],\r\n positioning: positioning,\r\n });\r\n this.state.map.addOverlay(measureTooltipGolbal);\r\n };\r\n\r\n functionFormatLength_MeasureMode = (line: LineString): string => {\r\n const length = getLength(line, {\r\n projection: this.props.projection,\r\n });\r\n let result = \"\";\r\n if (length > 100) {\r\n result = Math.round((length / 1000) * 100) / 100 + \" \" + \"km\";\r\n } else {\r\n result = Math.round(length * 100) / 100 + \" \" + \"m\";\r\n }\r\n\r\n return result;\r\n };\r\n\r\n functionFormatPolygon_MeasureMode = (polygon: Polygon): string => {\r\n const area = getArea(polygon, {\r\n projection: this.props.projection,\r\n });\r\n let result = \"\";\r\n if (area > 10000) {\r\n result =\r\n Math.round((area / 1000000) * 100) / 100 + \" \" + \"km2\";\r\n } else {\r\n result = Math.round(area * 100) / 100 + \" \" + \"m2\";\r\n }\r\n return result;\r\n };\r\n\r\n functionMouseOut_MeasureMode = () => {\r\n helpTooltipElementGolbal?.classList.add(\"hidden\");\r\n };\r\n\r\n functionPointerMoveHandle_MeasureMode = (event: MapBrowserEvent) => {\r\n if (event.dragging) return;\r\n if (sketchGolbal) {\r\n const geom = sketchGolbal.getGeometry();\r\n if (geom instanceof Polygon) {\r\n } else if (geom instanceof LineString) {\r\n }\r\n }\r\n if (helpTooltipElementGolbal) {\r\n helpTooltipGolbal.setPosition(event.coordinate);\r\n\r\n helpTooltipElementGolbal.classList.remove(\"hidden\");\r\n }\r\n };\r\n\r\n functionClickPinMarker_PinMarkerMode = (event: MapBrowserEvent) => {\r\n const LayersCurrents = this.state.map?.getLayers();\r\n LayersCurrents?.forEach((layerObject: VectorLayer) => {\r\n if (layerObject.getClassName() === \"pin-marker-vector-layer\") {\r\n const newMarker = new Feature({\r\n type: \"icon\",\r\n geometry: new Point(event.coordinate),\r\n });\r\n layerObject.getSource().addFeature(newMarker);\r\n return;\r\n }\r\n });\r\n };\r\n\r\n handleSearchCoordinateMapDetail = (coord: any) => {\r\n if (coord) console.log('ok', coord);\r\n this.state.map?.getView().setZoom(16.932305145395418);\r\n\r\n this.functionClickViewInfomationListener({ coordinate: coord }, true);\r\n this.pinSearchMode(coord);\r\n }\r\n\r\n handleSearchCoordinate = (value: string) => {\r\n if (!value) return;\r\n let coordinateList = value.split(\",\");\r\n let x: number = 0;\r\n let y: number = 0;\r\n if (coordinateList && coordinateList.length === 2) {\r\n x = parseFloat(coordinateList[0]);\r\n y = parseFloat(coordinateList[1]);\r\n }\r\n homePageStore.GetVn2000ToWgs84(x, y).then((res) => {\r\n let isInside = false;\r\n this.props.listPolygon &&\r\n this.props.listPolygon.map((itemPolygon: any) => {\r\n if (mapHelper.isPointInPolygon(res[1], res[0], itemPolygon)) {\r\n isInside = true;\r\n return;\r\n }\r\n });\r\n if (isInside) {\r\n // let center = [res[1],res[0]];\r\n console.log(res)\r\n this.pinSearchMode([res[0], res[1]]);\r\n this.functionClickViewInfomationListener({ coordinate: [res[0], res[1]] });\r\n history.push(\r\n `${UrlCollect.PlanningMapViewDetail}2?lng=${x}&lat=${y}&searchType=codinate`\r\n );\r\n } else {\r\n ShowNotification(\r\n viVN.Errors.CoordinateOutSidePolygon,\r\n NotificationMessageType.Warning,\r\n NotificationPosition.Center\r\n );\r\n }\r\n })\r\n // proj4.defs(\r\n // \"EPSG:3405\",\r\n // \"+proj=tmerc +lat_0=0 +lon_0=107.75 +k=0.9999 +x_0=500000 +y_0=0 +ellps=WGS84 +towgs84=-191.90441429,-39.30318279,-111.45032835,-0.00928836,0.01975479,-0.00427372,0.252906278 +units=m +no_defs\"\r\n // );\r\n // register(proj4);\r\n // var center = transform([x, y], \"EPSG:3405\", \"EPSG:4326\");\r\n // console.log(center)\r\n\r\n };\r\n\r\n pinSearchMode = (coordinate: any, desc? : string) => {\r\n this.state.map?.getView().setCenter(coordinate);\r\n const LayersCurrents = this.state.map?.getLayers();\r\n const anchorXUnits: any = \"fraction\";\r\n const anchorYUnits: any = \"pixels\";\r\n const PinMarkerLayer = new VectorLayer({\r\n zIndex: 9999,\r\n className: desc ? \"pin-marker-vector-layer\" : `pin-marker-vector-layer-${desc}`,\r\n source: new VectorSource({\r\n features: [],\r\n }),\r\n style: new Style({\r\n image: new Icon({\r\n anchor: [0.5, 22],\r\n anchorXUnits: anchorXUnits,\r\n anchorYUnits: anchorYUnits,\r\n src: require(\"../../assets/icon/red-marker.png\"),\r\n }),\r\n }),\r\n });\r\n if (!this.checkPinMarker()) {\r\n LayersCurrents?.push(PinMarkerLayer);\r\n }\r\n LayersCurrents?.forEach((layerObject: VectorLayer) => {\r\n if (layerObject.getClassName() === \"pin-marker-vector-layer\" || layerObject.getClassName() === `pin-marker-vector-layer-${desc}`) {\r\n layerObject.getSource().clear();\r\n const newMarker = new Feature({\r\n type: \"icon\",\r\n geometry: new Point(coordinate),\r\n });\r\n layerObject.getSource().addFeature(newMarker);\r\n return;\r\n }\r\n });\r\n };\r\n\r\n checkPinMarker = () => {\r\n let currentLayers = this.state.map?.getLayers();\r\n currentLayers?.forEach((LayerObject: VectorLayer) => {\r\n if (LayerObject.getClassName() === \"pin-marker-vector-layer\") {\r\n return true;\r\n }\r\n });\r\n return false;\r\n };\r\n\r\n setHeightViewport = () => {\r\n const HeaderContainerHeight = (document.getElementById(\r\n \"header-map-page-container\"\r\n ) as HTMLElement).offsetHeight;\r\n this.setState(\r\n {\r\n mapContainerStyle: {\r\n height: `${window.innerHeight - HeaderContainerHeight}px`,\r\n },\r\n },\r\n () => {\r\n this.state.map?.updateSize();\r\n }\r\n );\r\n };\r\n\r\n functionHandleClickLayerToDirectDetail = (pixel: any) => {\r\n const feature = this.state.map?.forEachFeatureAtPixel(pixel, function (\r\n feature: any\r\n ) {\r\n return feature;\r\n });\r\n if (\r\n feature &&\r\n feature.getProperties() &&\r\n feature.getProperties().planningId\r\n ) {\r\n window.open(\r\n UrlCollect.PlanningMapViewDetail + feature.getProperties().planningId\r\n );\r\n }\r\n };\r\n\r\n functionHoverHightlightAndShowTooltip = (pixel: any) => {\r\n const tooltipContainer = document.getElementById(\r\n \"tooltip-container-openlayer\"\r\n ) as HTMLElement;\r\n let left = pixel[0] + 20;\r\n let top = pixel[1] + 20;\r\n if (tooltipContainer) {\r\n tooltipContainer.style.left = left + \"px\";\r\n tooltipContainer.style.top = top + \"px\";\r\n tooltipContainer.style.opacity = \"1\";\r\n }\r\n\r\n const feature = this.state.map?.forEachFeatureAtPixel(pixel, function (\r\n feature: any\r\n ) {\r\n return feature;\r\n });\r\n if (\r\n feature &&\r\n feature.getProperties() &&\r\n feature.getProperties().tooltipValue\r\n ) {\r\n tooltipContainer.innerHTML = feature.getProperties().tooltipValue;\r\n } else {\r\n tooltipContainer.style.opacity = \"0\";\r\n }\r\n };\r\n\r\n functionHoverHightlightAndShowPopUp = (pixel: any) => {\r\n const popupContainer = document.getElementById(\r\n \"popup-container-openlayer\"\r\n ) as HTMLElement;\r\n if (popupContainer) {\r\n popupContainer.style.right = 50 + \"px\";\r\n popupContainer.style.bottom = 50 + \"px\";\r\n popupContainer.style.opacity = \"1\";\r\n popupContainer.style.display = \"block\";\r\n }\r\n\r\n const feature = this.state.map?.forEachFeatureAtPixel(pixel, function (\r\n feature: any\r\n ) {\r\n return feature;\r\n });\r\n if (\r\n feature &&\r\n feature.getProperties() &&\r\n feature.getProperties().tooltipValue &&\r\n feature.getProperties().tooltipValue &&\r\n feature.getProperties().acreage &&\r\n feature.getProperties().population\r\n ) {\r\n popupContainer.innerHTML = `\r\n ${feature.getProperties().tooltipValue || \"--\"\r\n }
\r\n Diện tích: ${feature.getProperties().acreage || \"--\"\r\n }
\r\n Dân số:${feature.getProperties().population || \"--\"\r\n }
\r\n Quyết định phê duyệt: ${feature.getProperties().report || \"--\"\r\n }
\r\n
\r\n `;\r\n } else {\r\n popupContainer.style.opacity = \"0\";\r\n popupContainer.style.display = \"none\";\r\n }\r\n };\r\n\r\n functionClickShowPopUpInClickedCord = (featureInfo: any, coordinate: any) => {\r\n if (!this.props.isGeneralPlanning) return;\r\n const mapObject: Map = this.state.map;\r\n const popup = mapObject.getOverlayById(\"show-popup-clicked-cord_in-map\");\r\n if (!popup) return;\r\n const element: HTMLElement = popup.getElement();\r\n if (!element) return;\r\n const temp = element.getElementsByClassName(\"pop_over_clicked_cord\")[0];\r\n if (temp) element.removeChild(temp);\r\n\r\n if (!featureInfo) {\r\n element.style.display = \"none\";\r\n } else {\r\n popup.setPosition(coordinate);\r\n var newDiv = document.createElement(\"div\");\r\n newDiv.className = \"pop_over_clicked_cord\";\r\n newDiv.innerHTML = featureInfo?.properties?.planning_name;\r\n newDiv.onclick = function () {\r\n window.open(UrlCollect.PlanningMapViewDetail + featureInfo?.properties?.planning_id, '_blank');\r\n };\r\n element.appendChild(newDiv);\r\n element.style.display = \"block\";\r\n }\r\n }\r\n\r\n functionClickShowPopUp = (featureInfo: any) => {\r\n const planning_code = featureInfo?.planning_code;\r\n const popupContainer = document.getElementById(\r\n \"click-show-popup-container-openlayer\"\r\n ) as HTMLElement;\r\n if (popupContainer) {\r\n popupContainer.style.right = 50 + \"px\";\r\n popupContainer.style.bottom = 50 + \"px\";\r\n popupContainer.style.opacity = \"1\";\r\n popupContainer.style.display = \"block\";\r\n\r\n if (\r\n featureInfo\r\n ) {\r\n console.log('planning_code', planning_code);\r\n \r\n popupContainer.innerHTML = `\r\n Diện tích: ${feature.getProperties().acreage || \"--\"\r\n }
\r\n Dân số:${feature.getProperties().population || \"--\"\r\n }
\r\n Quyết định phê duyệt: ${feature.getProperties().report || \"--\"\r\n }
\r\n
\r\n ${planning_code || \"--\"\r\n }\r\n
\r\n `;\r\n } else {\r\n popupContainer.style.opacity = \"0\";\r\n popupContainer.style.display = \"none\";\r\n }\r\n }\r\n };\r\n\r\n functionClickViewInfomationListener = (evt: any, calledFromSearchCoordinate?: boolean) => {\r\n const mapObject: Map = this.state.map;\r\n const listLayer = mapObject.getLayers();\r\n const listTitleLayerVisible: TileLayer[] = [];\r\n const listImageLayerVisible: ImageLayer[] = [];\r\n const listVectorImageLayerVisible: VectorImageLayer[] = [];\r\n const view = mapObject.getView();\r\n const viewResolution = view.getResolution();\r\n const buttonTabMapinfomation = document.getElementById(\r\n \"ButtonControlMapInfomationTab\"\r\n );\r\n const mapInfomationContainer = document.getElementById(\r\n \"mapInfomationContainer\"\r\n );\r\n const planningInfomationSmallPopupElement = (document.getElementById(\"planning-infomation-small-popup\") as HTMLElement);\r\n let layerIndex = 0;\r\n console.log('CLick to map and view info');\r\n \r\n const getFeaturesWithTitleLayer = (titleLayer: TileLayer | ImageLayer) => {\r\n // console.log('titleLayer_xxx',titleLayer);\r\n const source: any = titleLayer.getSource();\r\n const layerId = source.getParams()['LayerId'];\r\n const currentLayerSettingModel = this.state.listLayerSettingModel.filter(x => x.id === layerId)[0]\r\n const url = source.getFeatureInfoUrl(\r\n evt.coordinate,\r\n viewResolution,\r\n view.getProjection(),\r\n { INFO_FORMAT: \"application/json\", FEATURE_COUNT: 50 }\r\n );\r\n //console.log(\"currentLayerSettingModel\",currentLayerSettingModel);\r\n\r\n // ---layerchild\r\n const currentLayerChildSettingModel =\r\n (currentLayerSettingModel && currentLayerSettingModel.layerRealationships &&\r\n currentLayerSettingModel.layerRealationships.length > 0) ?\r\n currentLayerSettingModel.layerRealationships : null;\r\n // console.log('currentLayerSettingModel', currentLayerChildSettingModel)\r\n\r\n const getInfo = (url: any, currentLayerChildSettingModel: any, numberOfChild: number) => {\r\n if (url) {\r\n Jquery.ajax({\r\n type: \"POST\",\r\n url: url,\r\n contentType: \"application/json; charset=utf-8\",\r\n dataType: \"json\",\r\n success: (featureCollection: ResponeFromServeClickShowInfomationFeature) => {\r\n if (featureCollection.features.length > 0) {\r\n const _geojsonObject = featureCollection;\r\n const ListInfoMation: SingleMapInfoMationModel[] = [];\r\n\r\n /*\r\n * Lay thong tin de hien len bang thuoc tinh ben tay trai\r\n * */\r\n\r\n const featureInfo: any = featureCollection.features[0];\r\n _geojsonObject.features = [featureInfo];\r\n \r\n const setDataForTabInformation = (featuresProperies: any) => {\r\n if (currentLayerChildSettingModel) {\r\n const layerSettingModel = currentLayerChildSettingModel;\r\n const colsRaw = ConvertColsDataDetailViewToStandardData(\r\n layerSettingModel.display_name.cols\r\n );\r\n const displayDetails = layerSettingModel.display_name.viewdetail;\r\n //console.log('displayDetails',displayDetails);\r\n if (displayDetails.use) {\r\n displayDetails.cols.map((columnName: any) => {\r\n ListInfoMation.push({\r\n label: colsRaw[columnName],\r\n value: featuresProperies[columnName],\r\n });\r\n });\r\n if (layerSettingModel.layerRealationshipId !== 0) {\r\n ListInfoMation.push({\r\n label: \"Năm điều chỉnh\",\r\n value: `${layerSettingModel.year}`,\r\n },\r\n {\r\n label: \"qddc\",\r\n value: `${layerSettingModel.contentChange}`,\r\n }\r\n );\r\n }\r\n\r\n }\r\n }\r\n }\r\n setDataForTabInformation(featureInfo?.properties)\r\n\r\n /********************************************************************/\r\n // console.log('dfsfdsgtidfhg', currentLayerChildSettingModel)\r\n this.props.SaveChildInfomationList([...this.props.listChildInfomations ,ListInfoMation]);\r\n if (!this.state.isLoadedAllVectorSource) {\r\n let _isHaveHighlightVectorlayer = false;\r\n listLayer.forEach((_layer) => {\r\n if ((_layer instanceof VectorLayer) &&\r\n (_layer.getClassName() === \"highlight-vectorlayer-child\")\r\n ) {\r\n _isHaveHighlightVectorlayer = true;\r\n const _newVectorSource = new VectorSource({\r\n features: new GeoJSON().readFeatures(_geojsonObject),\r\n })\r\n _layer.setSource(_newVectorSource)\r\n }\r\n })\r\n // console.log('_isHaveHighlightVectorlayer',_isHaveHighlightVectorlayer);\r\n if (!_isHaveHighlightVectorlayer) {\r\n // console.log('_geojsonObject', _geojsonObject)\r\n listLayer.push(\r\n new VectorLayer({\r\n className: \"highlight-vectorlayer-child\",\r\n source: new VectorSource({\r\n features: new GeoJSON().readFeatures(_geojsonObject),\r\n }),\r\n zIndex: 999,\r\n style: new Style({\r\n stroke: new Stroke({\r\n color: 'rgba(223,16, 188,1)',\r\n width: 2,\r\n }),\r\n fill: new Fill({\r\n color: 'rgba(0,230,241,0.5)',\r\n }),\r\n }),\r\n })\r\n )\r\n }\r\n }\r\n }\r\n else {\r\n this.removeHiglightVectorLayerChild();\r\n layerIndex++;\r\n if (layerIndex < listTitleLayerVisible.length) {\r\n } else {\r\n this.props.SaveChildInfomationList([...this.props.listChildInfomations]);\r\n }\r\n }\r\n }\r\n })\r\n } else {\r\n this.props.SaveChildInfomationList([...this.props.listChildInfomations]);\r\n }\r\n }\r\n this.props.SaveChildInfomationList([]);\r\n\r\n if (url) {\r\n Jquery.ajax({\r\n type: \"POST\",\r\n url: url,\r\n contentType: \"application/json; charset=utf-8\",\r\n dataType: \"json\",\r\n success: (featureCollection: ResponeFromServeClickShowInfomationFeature) => {\r\n if (featureCollection.features.length > 0) {\r\n const _geojsonObject = featureCollection;\r\n const ListInfoMation: SingleMapInfoMationModel[] = [];\r\n\r\n /*\r\n * Lay thong tin de hien len bang thuoc tinh ben tay trai\r\n * */\r\n\r\n const featureInfo: any = featureCollection.features[0];\r\n _geojsonObject.features = [featureInfo];\r\n\r\n if( featureInfo.id == this.state.prevFeatureId && !calledFromSearchCoordinate) {\r\n \r\n //tắt cha\r\n this.props.SaveInfomationList([]);\r\n this.setState({prevFeatureId: \"\"});\r\n this.removeHiglightVectorLayer();\r\n\r\n //tắt con\r\n this.props.SaveChildInfomationList([]);\r\n this.removeHiglightVectorLayerChild();\r\n return;\r\n }\r\n\r\n // ======================================================================================\r\n currentLayerChildSettingModel && currentLayerChildSettingModel.map((item) => {\r\n listLayer.forEach((layer) => {\r\n if ((layer instanceof TileLayer) && (layer.getClassName() == `title-layer-${item.id}`)) {\r\n const source: any = layer.getSource()\r\n const url = source.getFeatureInfoUrl(\r\n evt.coordinate,\r\n viewResolution,\r\n view.getProjection(),\r\n { INFO_FORMAT: \"application/json\", FEATURE_COUNT: 50 }\r\n );\r\n getInfo(url, item, currentLayerChildSettingModel.length);\r\n }\r\n })\r\n })\r\n // ======================================================================================\r\n \r\n\r\n this.setState({prevFeatureId: featureInfo.id});\r\n \r\n if (this.props.isGeneralPlanning) {\r\n this.functionClickShowPopUp(featureInfo?.properties);\r\n // this.functionHoverHightlightAndShowTooltip(this.state.map.getEventPixel(evt.originalEvent));\r\n // window.open(UrlCollect.PlanningMapViewDetail + featureInfo?.planning_id, '_blank');\r\n this.functionClickShowPopUpInClickedCord(featureInfo, evt.coordinate);\r\n // console.log(mapObject.getOverlays());\r\n\r\n }\r\n\r\n const setDataForTabInformation = (featuresProperies: any) => {\r\n if (currentLayerSettingModel) {\r\n const layerSettingModel = currentLayerSettingModel;\r\n const colsRaw = ConvertColsDataDetailViewToStandardData(\r\n layerSettingModel.display_name.cols\r\n );\r\n const displayDetails = layerSettingModel.display_name.viewdetail;\r\n //console.log('displayDetails',displayDetails);\r\n if (displayDetails.use) {\r\n displayDetails.cols.map((columnName) => {\r\n ListInfoMation.push({\r\n label: colsRaw[columnName],\r\n value: featuresProperies[columnName],\r\n });\r\n });\r\n if (currentLayerSettingModel.layerRealationships &&\r\n currentLayerSettingModel.layerRealationships.length > 0) {\r\n currentLayerSettingModel.layerRealationships.map(item => {\r\n ListInfoMation.push({\r\n label: \"qddc\",\r\n value: item.contentChange,\r\n });\r\n })\r\n }\r\n if (currentLayerSettingModel.layerRealationshipId != 0) {\r\n ListInfoMation.push({\r\n label: \"Năm điều chỉnh\",\r\n value: currentLayerSettingModel.year + \"\",\r\n });\r\n }\r\n if (currentLayerSettingModel.layerRealationshipId != 0) {\r\n ListInfoMation.push({\r\n label: \"Tên quy hoạch\",\r\n value: currentLayerSettingModel.contentChange,\r\n });\r\n }\r\n }\r\n } else if (this.state.relatedLayer) {\r\n let relatedLayer: any = this.state.relatedLayer;\r\n const colsRaw: any = {};\r\n const displayDetails: any = []\r\n //console.log('relatedLayer_YYYYYYYYYYYYYYYYYYyyy',relatedLayer);\r\n if (Array.isArray(relatedLayer.display_name.cols) && relatedLayer.display_name.cols.length > 0) {\r\n relatedLayer.display_name.cols.map((col: any) => {\r\n if (col.col != '__gid'\r\n && col.col != '____gid'\r\n && col.col != 'id'\r\n && col.col != 'ten_loai_dat') {\r\n displayDetails.push(col.col);\r\n colsRaw[col.col] = col.alias;\r\n }\r\n })\r\n }\r\n if (Array.isArray(displayDetails) && displayDetails.length > 0) {\r\n displayDetails.map((columnName) => {\r\n ListInfoMation.push({\r\n label: colsRaw[columnName],\r\n value: featuresProperies[columnName],\r\n });\r\n });\r\n }\r\n //console.log('colsRaw_XXXXXXXXXXXXXXXXXXXXXXXXXXx',colsRaw);\r\n }\r\n }\r\n // n.features.map(features => MergeData(features.properties))\r\n // console.log('featureCollection__xxx', featureCollection);\r\n setDataForTabInformation(featureInfo?.properties)\r\n\r\n /********************************************************************/\r\n\r\n this.props.SaveInfomationList(ListInfoMation);\r\n if (!this.state.isLoadedAllVectorSource) {\r\n let _isHaveHighlightVectorlayer = false;\r\n listLayer.forEach((_layer) => {\r\n if ((_layer instanceof VectorLayer) && (_layer.getClassName() === `highlight-vectorlayer`)) {\r\n _isHaveHighlightVectorlayer = true;\r\n const _newVectorSource = new VectorSource({\r\n features: new GeoJSON().readFeatures(_geojsonObject),\r\n })\r\n _layer.setSource(_newVectorSource)\r\n }\r\n })\r\n console.log('_isHaveHighlightVectorlayer', _isHaveHighlightVectorlayer);\r\n if (!_isHaveHighlightVectorlayer) {\r\n listLayer.push(\r\n new VectorLayer({\r\n className: `highlight-vectorlayer`,\r\n source: new VectorSource({\r\n features: new GeoJSON().readFeatures(_geojsonObject),\r\n }),\r\n zIndex: 999,\r\n style: new Style({\r\n stroke: new Stroke({\r\n color: 'rgba(0,230,241,1)',\r\n width: 2,\r\n }),\r\n fill: new Fill({\r\n color: 'rgba(223,16, 188,0.5)',\r\n }),\r\n }),\r\n })\r\n )\r\n }\r\n }\r\n } else {\r\n this.functionClickShowPopUp(null);\r\n this.removeHiglightVectorLayer();\r\n this.removeHiglightVectorLayerChild();\r\n layerIndex++;\r\n if (layerIndex < listTitleLayerVisible.length) {\r\n getFeaturesWithTitleLayer(listTitleLayerVisible[layerIndex])\r\n } else {\r\n this.props.SaveInfomationList([]);\r\n }\r\n this.functionClickShowPopUpInClickedCord(null, null);\r\n }\r\n },\r\n });\r\n }\r\n }\r\n\r\n planningInfomationSmallPopupElement?.click();\r\n if (buttonTabMapinfomation && mapInfomationContainer) {\r\n if (buttonTabMapinfomation.classList.contains(\"collapsed\"))\r\n buttonTabMapinfomation.click();\r\n if (!mapInfomationContainer.getAttribute(\"open\"))\r\n mapInfomationContainer.setAttribute(\"open\", \"\");\r\n }\r\n listLayer.forEach((layer) => {\r\n if ((layer instanceof TileLayer) && (layer.getClassName() != 'ol-layer') && layer.getVisible()) {\r\n listTitleLayerVisible.push(layer);\r\n }\r\n if ((layer instanceof VectorImageLayer) && layer.getVisible()) listVectorImageLayerVisible.push(layer);\r\n if ((layer instanceof ImageLayer) && layer.getVisible()\r\n && layer.getClassName().includes(\"layer_boundaries\")) listImageLayerVisible.push(layer);\r\n })\r\n listTitleLayerVisible.reverse();\r\n listVectorImageLayerVisible.reverse();\r\n listTitleLayerVisible.sort((a, b) => b.getZIndex() - a.getZIndex());\r\n if (listTitleLayerVisible.length > 0) {\r\n getFeaturesWithTitleLayer(listTitleLayerVisible[layerIndex])\r\n } else {\r\n this.props.SaveInfomationList([]);\r\n }\r\n\r\n listImageLayerVisible.reverse();\r\n listVectorImageLayerVisible.reverse();\r\n listImageLayerVisible.sort((a, b) => b.getZIndex() - a.getZIndex());\r\n if (listImageLayerVisible.length > 0) {\r\n getFeaturesWithTitleLayer(listImageLayerVisible[layerIndex])\r\n } else {\r\n this.props.SaveInfomationList([]);\r\n }\r\n\r\n console.log(\"getLayer\", listLayer);\r\n console.log(\"getOverlays\", mapObject.getOverlays());\r\n \r\n };\r\n\r\n functionHightLightPolygon = (listPolygon: any) => {\r\n const mapObject: Map = this.state.map;\r\n const listLayer = mapObject.getLayers();\r\n let _isHaveHighlightVectorlayer = false;\r\n const feature: any[] = [];\r\n\r\n listPolygon.map((boundariesData: any) => {\r\n const format = new WKT();\r\n\r\n const featureObject = format.readFeature(boundariesData, {\r\n dataProjection: this.props.projection,\r\n featureProjection: this.props.projection,\r\n });\r\n console.log('fhkjghkjrl;akjdhfkjsdhfkjdsf', featureObject)\r\n feature.push(featureObject);\r\n });\r\n listLayer.forEach((_layer) => {\r\n if ((_layer instanceof VectorImageLayer) && (_layer.getClassName() === \"filter-vectorlayer\")) {\r\n _isHaveHighlightVectorlayer = true;\r\n const _newVectorSource = new VectorSource({\r\n features: feature,\r\n })\r\n _layer.setSource(_newVectorSource)\r\n }\r\n })\r\n if (!_isHaveHighlightVectorlayer) {\r\n listLayer.push(\r\n new VectorImageLayer({\r\n className: \"filter-vectorlayer\",\r\n source: new VectorSource({\r\n features: feature,\r\n }),\r\n zIndex: 9000,\r\n style: new Style({\r\n stroke: new Stroke({\r\n color: 'rgba(0,230,241,1)',\r\n width: 3,\r\n }),\r\n fill: new Fill({\r\n color: 'rgba(223,16, 188,0.5)',\r\n }),\r\n }),\r\n })\r\n )\r\n }\r\n\r\n }\r\n\r\n functionHandleDisplayGeneralPlanningMode = (OpenlayerMapObject: Map) => {\r\n const self = this;\r\n OpenlayerMapObject.on(\"pointermove\", function (e) {\r\n if (selected !== null) {\r\n selected.setStyle(undefined);\r\n selected = null;\r\n }\r\n\r\n OpenlayerMapObject.forEachFeatureAtPixel(e.pixel, function (f: any) {\r\n const highlightStyle = new Style({\r\n fill: new Fill({\r\n color: \"rgba(251,130,50,0.5)\",\r\n //color: \"rgba(251,28,28,1)\",\r\n }),\r\n stroke: new Stroke({\r\n color: \"rgba(251,28,28,1)\",\r\n width: 1,\r\n }),\r\n });\r\n selected = f;\r\n f.setStyle(highlightStyle);\r\n return true;\r\n });\r\n if (e.dragging) {\r\n (document.getElementById(\r\n \"tooltip-container-openlayer\"\r\n ) as HTMLElement).style.opacity = \"0\";\r\n } else {\r\n self.functionHoverHightlightAndShowTooltip(\r\n self.state.map.getEventPixel(e.originalEvent)\r\n );\r\n self.functionHoverHightlightAndShowPopUp(\r\n self.state.map.getEventPixel(e.originalEvent)\r\n );\r\n }\r\n });\r\n\r\n OpenlayerMapObject.on(\"singleclick\", function (e) {\r\n self.functionHandleClickLayerToDirectDetail(\r\n self.state.map.getEventPixel(e.originalEvent)\r\n );\r\n });\r\n };\r\n checkSearchFormHomePage() {\r\n if (this.props.coordinate && this.props.coordinate.search) {\r\n let lng = new URLSearchParams(this.props.coordinate.search).get(\"lat\");\r\n let lat = new URLSearchParams(this.props.coordinate.search).get(\"lng\");\r\n let searchType = new URLSearchParams(this.props.coordinate.search).get(\r\n \"searchType\"\r\n );\r\n console.log(searchType);\r\n if (searchType === \"place\") {\r\n this.state.map?.getView().setZoom(16.932305145395418);\r\n this.pinSearchMode([lat, lng]);\r\n this.functionClickViewInfomationListener({ coordinate: [lat, lng] });\r\n\r\n } else {\r\n let value = lat + \",\" + lng;\r\n console.log(value)\r\n this.handleSearchCoordinate(value);\r\n }\r\n }\r\n }\r\n\r\n setHeaderForTable() {\r\n this.props.listLayer?.map((layer) => {\r\n let tableArray = layer.table ? layer.table.split(\"_\") : [];\r\n if (tableArray.some(item => item.includes(\"sdd\"))) {\r\n this.props.SaveHeaderForTable(\r\n layer.display_name ? layer.display_name.cols : []\r\n );\r\n }\r\n });\r\n }\r\n\r\n openPrintWindow = () => {\r\n let dataHtml = '';\r\n this.props.listMapInfomations && this.props.listMapInfomations.length > 0 && this.props.listMapInfomations.map((item: any) => {\r\n dataHtml += `${item.label}: ${item.value ? item.value : \"\"}
`;\r\n })\r\n const self = this;\r\n let myWindow = window.open(\"\", \"PRINT\", \"height=500,width=1024\");\r\n let title = \"Bản đồ \" + document.title;\r\n myWindow?.document.write(\"${self.props.planningModel && self.props.planningModel.name}
\r\n \r\n
\r\n Thông tin quy hoạch
\r\n ${dataHtml}\r\n\r\n
\r\n * Chú ý: Kết quả tra cứu chỉ có tính chất tham khảo\r\n
\r\n\r\n \r\n Launch demo modal\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n this.setState({ modals: false })}\r\n >\r\n ×\r\n \r\n
\r\n \r\n \r\n {\" \"}\r\n In bản đồ\r\n \r\n
\r\n \r\n Bản đồ {this.props.planningModel ? this.props.planningModel.name : document.title}\r\n
\r\n{this.props.planningModel && this.props.planningModel.name}
\r\n \r\n
\r\n Thông tin quy hoạch
\r\n {this.props.listMapInfomations && this.props.listMapInfomations.length > 0 && this.props.listMapInfomations.map((item: any, index: number) =>\r\n{item.label}: {item.value}
\r\n )}\r\n* Chú ý: Kết quả tra cứu chỉ có tính chất tham khảo\r\n
\r\n\r\n\r\n {\r\n this.props.isDesktopOrLaptop &&\r\n <>\r\n Page is Loading, please wait...
}>\r\n \r\n
\r\n\r\n {\r\n this.props.hasLoadedMapData && this.props.mapData.name &&\r\n \r\n
\r\n \r\n this.setIsDoneConstructMap(data)}\r\n />\r\n
\r\n )}\r\n\r\n {this.props.hasLoadedMapData && !this.props.mapData.name && (\r\n \r\n
\r\n \r\n )}\r\n {\r\n this.props.isIdNotExist && \r\n
\r\n \r\n \r\n document\r\n .getElementById(\"modalNotHaveDataToDisplay\")\r\n ?.classList.remove(\"d-block\")\r\n }\r\n >\r\n ×\r\n \r\n
\r\n \r\n Dữ liệu không có sẵn để hiển thị\r\n
\r\n\r\n Lỗi: Bản đồ của dự án chưa được khởi tạo, vui lòng liên hệ với\r\n Admin\r\n
\r\n \r\n \r\n document\r\n .getElementById(\"modalNotHaveDataToDisplay\")\r\n ?.classList.remove(\"d-block\")\r\n }\r\n >\r\n Đóng\r\n \r\n
\r\n \r\n
\r\n \r\n }\r\n\r\n \r\n
\r\n \r\n {\r\n const invisLink = document.getElementById(\"invisbile-link-to-SyntheticPlanning\");\r\n invisLink?.click();\r\n }}\r\n >\r\n ×\r\n \r\n
\r\n \r\n Dữ liệu không có sẵn để hiển thị\r\n
\r\n\r\n Lỗi: Đồ án không tồn tại, vui lòng liên hệ với Admin\r\n
\r\n \r\n {\r\n const invisLink = document.getElementById(\"invisbile-link-to-SyntheticPlanning\");\r\n invisLink?.click();\r\n }}\r\n >\r\n Trở về tổng hợp quy hoạch\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default ReflectHeader;\r\n","import moment from 'moment';\r\n\r\nexport const URGENT_OPTIONS = [\r\n {\r\n label: 'Phản ánh khẩn',\r\n key: true,\r\n },\r\n {\r\n label: 'Phản ánh bình thường',\r\n key: false,\r\n },\r\n];\r\n\r\nexport const dateVNFormat = (date, format = 'DD/MM/YYYY') => {\r\n if (date) return moment(date).format(format);\r\n return '';\r\n};\r\n\r\nexport const stripHtml = (html) => {\r\n let tmp = document.createElement('DIV');\r\n tmp.innerHTML = html;\r\n return tmp.textContent || tmp.innerText || '';\r\n};\r\n","export function getExtension(filename) {\r\n if (typeof filename !== 'string') {\r\n return ''\r\n }\r\n const parts = (filename || '')?.split('.');\r\n return parts?.[parts?.length - 1];\r\n}\r\n\r\nexport function isImage(filename) {\r\n const ext = getExtension(filename);\r\n switch (ext.toLowerCase()) {\r\n case 'jpg':\r\n case 'gif':\r\n case 'bmp':\r\n case 'png':\r\n return true;\r\n }\r\n return false;\r\n}\r\n\r\nexport function isVideo(filename) {\r\n const ext = getExtension(filename);\r\n switch (ext.toLowerCase()) {\r\n case 'm4v':\r\n case 'avi':\r\n case 'mpg':\r\n case 'mp4':\r\n return true;\r\n }\r\n return false;\r\n}\r\n\r\nexport function isDocument(filename) {\r\n const ext = getExtension(filename);\r\n const type = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf']\r\n return type?.includes(ext)\r\n}\r\n","/* eslint-disable jsx-a11y/alt-text */\r\nimport { PlaceOutlined, QueryBuilderOutlined } from '@material-ui/icons';\r\nimport React from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport { dateVNFormat, URGENT_OPTIONS } from '../../../../utils';\r\nimport { isImage, isVideo, isDocument } from 'utils/file';\r\nimport { api, apiCustom } from 'api/api-config';\r\nimport './reflect-card.scss';\r\nimport { LazyLoadImage } from 'react-lazy-load-image-component';\r\nexport const BASE_IMAGE = apiCustom + '/';\r\n\r\nexport const CardVertival = ({ reflect, isNewTab, className = '' }) => {\r\n let IsUrgentHandling = URGENT_OPTIONS.find(\r\n (urgent) => urgent?.key === reflect?.isUrgentHandling\r\n );\r\n if (!IsUrgentHandling) {\r\n IsUrgentHandling = URGENT_OPTIONS?.[1];\r\n }\r\n\r\n let reflectImage = '/assets/reflect/test-thumb.png';\r\n if (reflect?.image) {\r\n reflectImage = BASE_IMAGE + reflect?.image;\r\n }\r\n // if (\r\n // reflect?.reflectionFilesViewDtos?.filter((item) =>\r\n // isImage(item?.fileName)\r\n // )?.[0]?.filePath\r\n // ) {\r\n // reflectImage =\r\n // BASE_IMAGE +\r\n // reflect?.reflectionFilesViewDtos?.filter((item) =>\r\n // isImage(item?.fileName)\r\n // )?.[0]?.filePath;\r\n // }\r\n\r\n return (\r\n {title}
\r\n {urlReadMore && Xem thêm \r\n \r\n {IsUrgentHandling?.label}\r\n
\r\n \r\n
\r\n {reflect?.title}
\r\n \r\n
\r\n \r\n \r\n {IsUrgentHandling?.label}\r\n
\r\n \r\n
\r\n {reflect?.title}
\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n","import React from 'react'\r\nimport { Box, Grid } from '@material-ui/core'\r\nimport { Skeleton } from '@material-ui/lab'\r\n\r\nexport const CardVertivalSkeleton = () => {\r\n return \r\n \r\n \r\n \r\n\r\n
\r\n \r\n
\r\n \r\n {listReflects?.map((item, i) => (\r\n
\r\n \r\n
\r\n ))}\r\n \r\n
\r\n \r\n
\r\n {/* \r\n \r\n \r\n ![](\"/assets/reflect/info/ytb-1.png\")
\r\n \r\n \r\n ![](\"/assets/reflect/info/ytb-2.png\")
\r\n \r\n \r\n ![](\"/assets/reflect/info/ytb-3.png\")
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n ![](\"/assets/reflect/info/item-1.png\")
\r\n ![](\"/assets/reflect/info/item-2.png\")
\r\n ![](\"/assets/reflect/info/item-3.png\")
\r\n
*/}\r\n \r\n );\r\n};\r\n\r\nexport default ReflectAdise;\r\n","import { useState, useEffect } from 'react';\r\nimport {\r\n GetDashboardByReflectionStatus,\r\n GetDashBoardSatisfactionLevelOverall,\r\n} from '../../../redux/store/dashboard/dashboard';\r\n\r\nexport const useGetDashboardByReflectionStatus = () => {\r\n const [dashboardByReflectionStatus, setDashboardByReflectionStatus] = useState({});\r\n const [isLoading, setLoading] = useState(true);\r\n \r\n const handleGetDashboardByReflectionStatus = async () => {\r\n setLoading(true);\r\n const response = await GetDashboardByReflectionStatus();\r\n setDashboardByReflectionStatus(response?.content || []);\r\n setLoading(false);\r\n };\r\n\r\n useEffect(() => {\r\n handleGetDashboardByReflectionStatus();\r\n }, []);\r\n\r\n return {\r\n dashboardByReflectionStatus,\r\n isLoading,\r\n };\r\n};\r\n\r\nexport const useGetDashBoardSatisfactionLevelOverall = () => {\r\n const [dashboardSatisfactionLevelOverall, setDashboardSatisfactionLevelOverall] = useState({});\r\n const [isLoading, setLoading] = useState(true);\r\n \r\n const handleGetDashBoardSatisfactionLevelOverall = async () => {\r\n setLoading(true);\r\n const response = await GetDashBoardSatisfactionLevelOverall();\r\n setDashboardSatisfactionLevelOverall(response?.content || []);\r\n setLoading(false);\r\n };\r\n\r\n useEffect(() => {\r\n handleGetDashBoardSatisfactionLevelOverall();\r\n }, []);\r\n\r\n return {\r\n dashboardSatisfactionLevelOverall,\r\n isLoading,\r\n };\r\n};","import React from \"react\";\r\nimport { Link } from \"react-router-dom\"\r\nimport { Paper } from \"@material-ui/core\";\r\nimport {\r\n PlaceOutlined,\r\n QueryBuilderOutlined,\r\n ChatBubbleOutlined,\r\n} from \"@material-ui/icons\";\r\nimport \"./header.scss\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faMap } from \"@fortawesome/free-solid-svg-icons\";\r\nexport const ReflectPageHeader = ({ title, breadcumb, className = \"\" }) => {\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n
\r\n {/* \r\n
\r\n {title}
\r\n\r\n {breadcumb?.map((item, i) => {item?.name || \"\"})}\r\n
\r\n \r\n \r\n \r\n Bản đồ \r\n
*/}\r\n \r\n );\r\n};\r\n\r\nexport default ReflectPageHeader;\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable @typescript-eslint/no-unused-vars */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport { Grid } from '@material-ui/core';\r\nimport React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport history from \"common/history\";\r\nimport * as appActions from '../../core/app.store';\r\n\r\nimport CursorPointerIcon from '../../assets/icon/cursor-pointer.svg';\r\nimport ReflectAside from './components/aside/aside.view';\r\nimport ReflectHeader from './components/header/reflect-header.view';\r\nimport ReflectPageHeader from './components/header/reflect-page-header.view';\r\nimport {\r\n CardHorizontal,\r\n CardVertival,\r\n} from './components/reflect-card/reflect-card.view';\r\nimport { ReflectHomePageSkeleton } from './components/skeleton/skeleton.view';\r\nimport { useGetReflectListHomePage, useGetReflects } from './hooks';\r\nimport './reflects.scss';\r\n\r\nfunction Reflect(props) {\r\n const { reflectByCategory, isLoading } = useGetReflectListHomePage();\r\n const { listReflects } = useGetReflects();\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n isLoading: state.app.loading,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n showLoading: appActions.ShowLoading,\r\n },\r\n dispatch\r\n );\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Reflect);\r\n","import React from 'react';\r\nimport { Pagination } from '@material-ui/lab';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport './pagination.scss';\r\n\r\nconst ReflectPagination = ({ className = '', ...props }) => {\r\n\r\n return (\r\n \r\n 
\r\n
\r\n \r\n \r\n\r\n Gửi phản ánh
\r\n \r\n \r\n \r\n {isLoading ? (\r\n <>\r\n \r\n {category?.reflectTheScenes?.map((item, i) => (\r\n \r\n {i < 1 ? (\r\n \r\n ))}\r\n \r\n \r\n {category?.reflectTheScenes?.map((item, i) => (\r\n \r\n {i < 2 ? (\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 {isLoading ? (\r\n \r\n {listReflects?.map((item, i) => (\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\nconst mapStateToProps = (state) => ({\r\n isLoading: state.app.loading,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n showLoading: appActions.ShowLoading,\r\n },\r\n dispatch\r\n );\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Reflect);\r\n","import React, { useState, useEffect } from 'react'\r\nimport { isImage, isVideo, isDocument } from 'utils/file';\r\nimport { BASE_IMAGE } from '../reflect-card/reflect-card.view';\r\nimport { api } from 'api/api-config'\r\n\r\nexport default function PreviewImage({ file, className, disableControlOnVideo = false }) {\r\n const [result, setResult] = useState('');\r\n const [name, setName] = useState('');\r\n const [type, setType] = useState('');\r\n\r\n useEffect(() => {\r\n if (file instanceof File && file?.type?.includes('image/')) {\r\n var reader = new FileReader();\r\n reader.readAsDataURL(file);\r\n reader.onload = function () {\r\n setResult(reader.result);\r\n setType('image');\r\n };\r\n reader.onerror = function (error) {\r\n console.log('Error when preview image: ', error);\r\n };\r\n }\r\n if (file instanceof File && file?.type?.includes('video/')) {\r\n var reader = new FileReader();\r\n reader.readAsDataURL(file);\r\n reader.onload = function () {\r\n setResult(reader.result);\r\n setType('video');\r\n };\r\n reader.onerror = function (error) {\r\n console.log('Error when preview video: ', error);\r\n };\r\n }\r\n if (file instanceof File && isDocument(file?.name)) {\r\n var reader = new FileReader();\r\n reader.readAsDataURL(file);\r\n reader.onload = function () {\r\n setResult(reader.result);\r\n setName(file?.name);\r\n setType('document');\r\n };\r\n reader.onerror = function (error) {\r\n console.log('Error when preview video: ', error);\r\n };\r\n }\r\n if (typeof file?.filePath === 'string' && isImage(file?.filePath)) {\r\n setResult(BASE_IMAGE + file?.filePath);\r\n setType('image');\r\n }\r\n if (typeof file?.filePath === 'string' && isVideo(file?.filePath)) {\r\n setResult(BASE_IMAGE + file?.filePath);\r\n setType('video');\r\n }\r\n if (typeof file?.filePath === 'string' && isDocument(file?.filePath)) {\r\n setResult(BASE_IMAGE + file?.filePath);\r\n setName(file?.fileName);\r\n setType('document');\r\n }\r\n }, [file]);\r\n\r\n if (type === 'image') {\r\n return \r\n setPage(page)}\r\n // pageTotal={totalPage}\r\n page={page}\r\n onChange={(e, page) => page && setPage(page)}\r\n count={totalPage}\r\n />\r\n
\r\n \r\n )}\r\n {name}
\r\n \r\n );\r\n }\r\n\r\n return <>;\r\n}\r\n","import React, { useState, useEffect } from 'react'\r\nimport { useForm } from 'react-hook-form'\r\nimport { CreateComment, UpdateComment } from '../../../../redux/store/reflect/reflect-comments.store'\r\nimport ShowNotification from '../../../../components/react-notifications/react-notifications';\r\nimport { NotificationMessageType } from '../../../../utils/configuration';\r\nimport { isImage, isVideo, isDocument } from 'utils/file';\r\nimport PreviewMedia from '../media/preview-media.view'\r\nimport './comments.scss'\r\n\r\nconst ReflectCommentForm = ({ className = \"\", reflectId, parentId = null, onSuccess, onClose, comment }) => {\r\n const [isLoading, setLoading] = useState()\r\n\r\n const { register, handleSubmit, watch, formState: { errors }, setValue } = useForm({\r\n defaultValues: {\r\n Content: comment?.content || '',\r\n files: comment?.commentFilesViewDtos || [],\r\n deletedFiles: [],\r\n }\r\n });\r\n\r\n const watchFields = watch([\r\n 'files',\r\n 'deletedFiles',\r\n ]);\r\n\r\n const onSubmit = async (values) => {\r\n if (!values.Content) return\r\n setLoading(true)\r\n if (comment) {\r\n const newComment = {\r\n Id: comment?.id,\r\n ParentId: comment?.parentId || '',\r\n Content: values.Content,\r\n ReflectionId: reflectId,\r\n IsActive: true,\r\n IsDelete: false,\r\n files: values?.files,\r\n deletedFiles: values?.deletedFiles,\r\n }\r\n await UpdateComment(newComment)\r\n } else {\r\n const newComment = {\r\n Content: values.Content,\r\n ParentId: parentId || '',\r\n ReflectionId: reflectId,\r\n IsActive: true,\r\n IsDelete: false,\r\n files: values?.files,\r\n deletedFiles: values?.deletedFiles,\r\n }\r\n await CreateComment(newComment)\r\n setValue('Content', '')\r\n setValue('files', [])\r\n }\r\n setLoading(false)\r\n onSuccess && onSuccess()\r\n }\r\n\r\n const handleChangeFile = (files) => {\r\n console.log(files)\r\n const fileTypeExist = {\r\n image: 0,\r\n video: 0,\r\n document: 0,\r\n }\r\n const currentFiles = watchFields.files || []\r\n // for (let file of currentFiles) {\r\n // if (file instanceof File && file?.type?.includes(\"image/\")) {\r\n // fileTypeExist.image++\r\n // }\r\n // if (typeof file?.filePath === \"string\" && isImage(file?.filePath)) {\r\n // fileTypeExist.image++\r\n // }\r\n // if (file instanceof File && file?.type?.includes(\"video/\")) {\r\n // fileTypeExist.video++\r\n // }\r\n // if (typeof file?.filePath === \"string\" && isVideo(file?.filePath)) {\r\n // fileTypeExist.video++\r\n // }\r\n // if (file instanceof File && isDocument(file?.name)) {\r\n // fileTypeExist.document++\r\n // }\r\n // if (typeof file?.filePath === \"string\" && isDocument(file?.filePath)) {\r\n // fileTypeExist.document++\r\n // }\r\n // }\r\n // for (let file of files) {\r\n // if (file?.type?.includes(\"image/\") && fileTypeExist?.image >= 3) {\r\n // ShowNotification(\r\n // `Chỉ được đính kèm tối đa 3 ảnh, 1 video và 1 tài liệu`,\r\n // NotificationMessageType.Error\r\n // );\r\n // return\r\n // }\r\n // if (file?.type?.includes(\"video/\") && fileTypeExist?.video >= 1) {\r\n // ShowNotification(\r\n // `Chỉ được đính kèm tối đa 3 ảnh, 1 video và 1 tài liệu`,\r\n // NotificationMessageType.Error\r\n // );\r\n // return\r\n // }\r\n // if (isDocument(file?.name) && fileTypeExist?.document >= 1) {\r\n // ShowNotification(\r\n // `Chỉ được đính kèm tối đa 3 ảnh, 1 video và 1 tài liệu`,\r\n // NotificationMessageType.Error\r\n // );\r\n // return\r\n // }\r\n // }\r\n currentFiles.push(...files)\r\n setValue(`files`, currentFiles)\r\n }\r\n \r\n useEffect(() => {\r\n register('files');\r\n register('deletedFiles');\r\n }, []);\r\n\r\n const fileToRender = watchFields?.files?.map((file, id) => ({ id, file }));\r\n\r\n return\r\n
\r\n \r\n ![\"\"](\"/assets/reflect/default-avatar.png\")
\r\n
\r\n \r\n \r\n \r\n handleChangeFile(e?.target?.files)}\r\n accept=\"image/*,video/*\"\r\n multiple\r\n />\r\n {onClose && }\r\n \r\n
\r\n \r\n \r\n}\r\n\r\nexport default ReflectCommentForm\r\n","import React, { useState } from 'react'\r\nimport SlickSlider from \"react-slick\";\r\nimport { BASE_IMAGE } from '../reflect-card/reflect-card.view';\r\nimport PreviewMedia from '../media/preview-media.view'\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faWindowClose } from '@fortawesome/free-solid-svg-icons';\r\n\r\nconst GridView = ({ files }) => {\r\n const [isOpenGallery, setOpenGallery] = useState(false)\r\n\r\n const filesToRender = Array.isArray(files) ? [...files] : []\r\n\r\n const classNameToRender = [\r\n '',\r\n 'grid-view__one-item',\r\n 'grid-view__two-item',\r\n 'grid-view__three-item',\r\n 'grid-view__four-item',\r\n 'grid-view__five-item'\r\n ]\r\n\r\n const slick = \r\n \r\n {filesToRender?.map((item, i) =>\r\n \r\n
\r\n\r\n\r\n const renderFiles = () => \r\n
\r\n )}\r\n setOpenGallery(true)}>\r\n {filesToRender?.map((item, i) =>\r\n
\r\n\r\n const renderMoreFiveFiles = () => \r\n
\r\n )}\r\n setOpenGallery(true)}>\r\n {filesToRender?.slice(0, 5)?.map((item, i) =>\r\n
\r\n\r\n return <>\r\n {filesToRender?.length <= 5 ? renderFiles() : renderMoreFiveFiles()}\r\n {isOpenGallery && \r\n
\r\n )}\r\n \r\n +{filesToRender?.length - 4}\r\n
\r\n )}\r\n \r\n
}\r\n \r\n}\r\n\r\nexport default GridView\r\n\r\n","import React, { useState } from 'react';\r\nimport CommentForm from './comment-form.view';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport {\r\n Button,\r\n Dialog,\r\n DialogActions,\r\n DialogContent,\r\n DialogContentText,\r\n DialogTitle,\r\n} from '@material-ui/core';\r\nimport { DeleteComment } from '../../../../redux/store/reflect/reflect-comments.store';\r\nimport moment from 'moment';\r\nimport 'moment/locale/vi';\r\n\r\nimport './comments.scss';\r\nimport { BASE_IMAGE } from '../reflect-card/reflect-card.view';\r\nimport { api } from 'api/api-config'\r\nimport GridView from './gird.view'\r\n\r\nconst ReflectCommentItem = ({\r\n comment,\r\n className = '',\r\n isParent = false,\r\n refreshComment,\r\n user,\r\n isLoggedIn,\r\n}) => {\r\n const [isOpenCommentForm, setOpenCommentForm] = useState(false);\r\n const [maxShowReply, setMaxShowReply] = useState(2);\r\n const [isShowMoreContent, setShowMoreContent] = useState(false);\r\n const [isEditMode, setEditMode] = useState(false);\r\n const [idToDelete, setIdToDelete] = useState(null);\r\n\r\n const handleDeleteComment = async () => {\r\n try {\r\n await DeleteComment(idToDelete);\r\n setIdToDelete(null);\r\n refreshComment();\r\n } catch (error) {}\r\n };\r\n\r\n if (isEditMode) {\r\n return (\r\n setOpenGallery(false)}>\r\n
\r\n \r\n \r\n {filesToRender?.map((item, i) =>\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// export default ReflectCommentItem\r\n\r\nconst mapStateToProps = (state) => ({\r\n isLoading: state.app.loading,\r\n isLoggedIn: state.account.isLoggedIn,\r\n user: state.account.user,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) => bindActionCreators({}, dispatch);\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ReflectCommentItem);\r\n","import React from 'react';\r\nimport CommentItem from './comment-item.view';\r\nimport { Pagination } from '@material-ui/lab';\r\nimport CommentForm from './comment-form.view';\r\nimport { useGetListComment } from '../../hooks';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport './comments.scss';\r\n\r\nconst ReflectComment = ({\r\n reflectId,\r\n className = '',\r\n totalComment,\r\n isLoggedIn,\r\n}) => {\r\n const {\r\n comments,\r\n pageIndex,\r\n totalCommentPage,\r\n refreshComment,\r\n setPageIndex,\r\n totalItemOriginalCount,\r\n } = useGetListComment(reflectId);\r\n\r\n return (\r\n \r\n
\r\n \r\n {\r\n setOpenCommentForm(false);\r\n refreshComment();\r\n }}\r\n onClose={() => setOpenCommentForm(false)}\r\n />\r\n )}\r\n {comment?.childrenComments?.length > 0 && (\r\n
\r\n \r\n
\r\n {comment?.userComment}
\r\n {/*{comment?.content}
*/}\r\n\r\n {isShowMoreContent ? comment?.content : cutContent}\r\n {!isShowMoreContent && comment?.content !== cutContent && '... '}\r\n {!isShowMoreContent && comment?.content !== cutContent && (\r\n
\r\n {moment(comment?.createdDate)\r\n .locale('vi')\r\n .startOf('seconds')\r\n .fromNow()\r\n .replace('giây tới', 'giây trước')}\r\n \r\n {isLoggedIn && isParent && (\r\n setOpenCommentForm(true)}>Trả lời\r\n )}\r\n \r\n {comment?.createdBy === user?.email && (\r\n setEditMode(true)}>Sửa\r\n )}\r\n \r\n {comment?.createdBy === user?.email && (\r\n setIdToDelete(comment?.id)}>Xóa\r\n )}\r\n
\r\n {isOpenCommentForm && (\r\n \r\n {comment?.childrenComments\r\n ?.slice(0, maxShowReply)\r\n ?.map((item, i) => (\r\n
\r\n )}\r\n \r\n {maxShowReply > 2 && (\r\n setMaxShowReply((state) => Math.max(2, state - 5))}\r\n >\r\n Ẩn bớt {maxShowReply < comment?.childrenComments?.length && '|'}{' '}\r\n
\r\n )}\r\n\r\n {maxShowReply < comment?.childrenComments?.length && (\r\n setMaxShowReply((state) => state + 5)}>\r\n Xem thêm\r\n
\r\n )}\r\n \r\n page && setPageIndex(page)}\r\n variant='outlined'\r\n shape='rounded'\r\n />\r\n )}\r\n
\r\n );\r\n};\r\n\r\n// export default ReflectComment;\r\n\r\nconst mapStateToProps = (state) => ({\r\n isLoading: state.app.loading,\r\n isLoggedIn: state.account.isLoggedIn,\r\n user: state.account.user,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) => bindActionCreators({}, dispatch);\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ReflectComment);\r\n","import Service from '../../../api/api-service-custom';\r\nimport { ApiUrl } from '../../../api/api-url';\r\n\r\nconst service = new Service();\r\n\r\nexport const CreateLevel = (data = {}) => {\r\n return service\r\n .post(ApiUrl.CreateLevel, data)\r\n .then((res) => {\r\n return res;\r\n })\r\n .catch((err) => {\r\n throw err;\r\n });\r\n};\r\n\r\nexport const UpdateLevel = (data = {}) => {\r\n return service\r\n .put(ApiUrl.UpdateLevel, data)\r\n .then((res) => {\r\n return res;\r\n })\r\n .catch((err) => {\r\n throw err;\r\n });\r\n};\r\n","export const BASE_IMAGE = 'https://pahtsonla-api.cgis.asia/';\r\nexport const PROCESSING_STEP_ID = {\r\n HANDLED: 5,\r\n COMPLETED: 8,\r\n };\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable @typescript-eslint/no-unused-vars */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport { useState, useEffect } from 'react';\r\nimport { Grid } from '@material-ui/core';\r\nimport {\r\n PlaceOutlined,\r\n QueryBuilderOutlined,\r\n VisibilityOutlined,\r\n} from '@material-ui/icons';\r\nimport React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { useParams } from 'react-router';\r\nimport { bindActionCreators } from 'redux';\r\n\r\nimport * as appActions from '../../../core/app.store';\r\nimport { dateVNFormat } from '../../../utils';\r\n\r\nimport ReflectAside from '../components/aside/aside.view';\r\nimport ReflectComment from '../components/comments/comments.view';\r\nimport ReflectHeader from '../components/header/reflect-header.view';\r\nimport ShowNotification from '../../../components/react-notifications/react-notifications';\r\nimport ReflectPageHeader from '../components/header/reflect-page-header.view';\r\n\r\nimport { CardHorizontal } from '../components/reflect-card/reflect-card.view';\r\nimport { useGetReflectDetail, useGetSimilarReflect } from '../hooks';\r\nimport './reflect-detail.scss';\r\nimport {\r\n CreateLevel,\r\n UpdateLevel,\r\n} from '../../../redux/store/reflect/reflect-level';\r\nimport { PROCESSING_STEP_ID } from '../../../common/constants';\r\nimport { NotificationMessageType } from '../../../utils/configuration';\r\nimport { isImage, isVideo, isDocument } from 'utils/file';\r\nimport { api,apiCustom } from 'api/api-config'\r\nexport const BASE_IMAGE = apiCustom + \"/\";\r\nfunction Reflect({ user }) {\r\n const { reflectInfo } = useParams();\r\n const re = /^(\\d+)-?[a-z0-9-]*$/g;\r\n const reflectId = re.exec(reflectInfo)?.[1] || null;\r\n const { reflectDetail } = useGetReflectDetail(reflectId);\r\n const { similarReflect } = useGetSimilarReflect(reflectDetail?.categoriesId);\r\n const [satisfied, setSatisfied] = useState({\r\n acceptanceTotal: 0,\r\n satisfactionLevelId: null,\r\n satisfiedTotal: 0,\r\n unsatisfied: 0,\r\n });\r\n\r\n useEffect(() => {\r\n setSatisfied({\r\n acceptanceTotal: reflectDetail?.satisfactionLevel?.acceptanceTotal || 0,\r\n satisfactionLevelId:\r\n reflectDetail?.satisfactionLevel?.satisfactionLevelId || null,\r\n satisfiedTotal: reflectDetail?.satisfactionLevel?.satisfiedTotal || 0,\r\n unsatisfied: reflectDetail?.satisfactionLevel?.unsatisfied || 0,\r\n });\r\n }, [reflectDetail]);\r\n\r\n const handleClickSatisfied = (type, value) => async () => {\r\n if (value === satisfied?.satisfactionLevelId) {\r\n return ShowNotification(\r\n 'Bạn đang chọn đánh giá này',\r\n NotificationMessageType.Error\r\n );\r\n }\r\n if (!user) {\r\n return ShowNotification(\r\n 'Bạn cần đăng nhập để dùng tính năng này',\r\n NotificationMessageType.Error\r\n );\r\n }\r\n if (\r\n satisfied?.satisfactionLevelId !== value &&\r\n !satisfied?.satisfactionLevelId\r\n ) {\r\n setSatisfied({\r\n ...satisfied,\r\n satisfactionLevelId: value,\r\n [type]: satisfied?.[type] + 1,\r\n });\r\n await CreateLevel({\r\n reflectionId: reflectDetail?.id,\r\n satisfactionLevelId: value,\r\n userId: user?.id,\r\n });\r\n } else if (satisfied?.satisfactionLevelId !== value) {\r\n const oldSatisfyType = [\r\n '',\r\n 'unsatisfied',\r\n 'satisfiedTotal',\r\n 'acceptanceTotal',\r\n ]?.[satisfied?.satisfactionLevelId];\r\n setSatisfied({\r\n ...satisfied,\r\n [type]: satisfied?.[type] + 1,\r\n [oldSatisfyType]: satisfied?.[oldSatisfyType] - 1,\r\n satisfactionLevelId: value,\r\n });\r\n await UpdateLevel({\r\n id: 0,\r\n reflectionId: reflectDetail?.id,\r\n satisfactionLevelId: value,\r\n userId: user?.id,\r\n });\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n Bình luận: {totalItemOriginalCount}
\r\n {isLoggedIn && (\r\n <>\r\n\r\n {comments?.map((item, i) => (\r\n
\r\n {!!totalComment && (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n
\r\n {reflectDetail?.title}
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {reflectDetail?.reflectionFilesViewDtos\r\n ?.filter((item) => !isDocument(item?.fileName))\r\n ?.map((item, i) => (\r\n <>\r\n {isImage(item?.fileName) &&(item?.processingStepId != PROCESSING_STEP_ID.HANDLED) && (\r\n
\r\n {reflectDetail?.reflectionHandledViewDto && reflectDetail?.processingStepCurrentId == PROCESSING_STEP_ID.COMPLETED && (\r\n <>\r\n \r\n
\r\n )}\r\n {isVideo(item?.fileName)&&(item?.processingStepId != PROCESSING_STEP_ID.HANDLED) && (\r\n \r\n
\r\n )}\r\n \r\n ))}\r\n {reflectDetail?.reflectionFilesViewDtos\r\n ?.filter((item) => isDocument(item?.fileName))\r\n ?.map((item, i) => (\r\n <>\r\n \r\n Tài liệu:{' '}\r\n \r\n {item?.fileName}\r\n \r\n
\r\n \r\n ))}\r\n \r\n
\r\n \r\n
\r\n \r\n {reflectDetail?.reflectionFilesViewDtos\r\n ?.filter((item) => !isDocument(item?.fileName))\r\n ?.map((item, i) => (\r\n <>\r\n {isImage(item?.fileName) &&(item?.processingStepId == 5) && (\r\n
\r\n \r\n
\r\n )}\r\n {isVideo(item?.fileName)&&(item?.processingStepId == 5) && (\r\n \r\n
\r\n )}\r\n \r\n ))}\r\n {reflectDetail?.reflectionFilesViewDtos\r\n ?.filter((item) => isDocument(item?.fileName))\r\n ?.map((item, i) => (\r\n <>\r\n \r\n Tài liệu:{' '}\r\n \r\n {item?.fileName}\r\n \r\n
\r\n \r\n ))}\r\n \r\n \r\n
\r\n Bạn đánh giá thế nào về kết quả xử lý
\r\n\r\n \r\n
\r\n Hài lòng ({satisfied?.satisfiedTotal || 0})
\r\nChấp nhận ({satisfied?.acceptanceTotal || 0})
\r\nKhông hài lòng ({satisfied?.unsatisfied || 0})
\r\n\r\n
\r\n );\r\n}\r\n\r\nexport default OpenlayersMapView;\r\n","import Service from '../../../api/api-service-custom';\r\nimport { ApiUrl } from '../../../api/api-url';\r\n\r\nconst service = new Service();\r\n\r\nconst defaultKey = \"29350440eb729a1980a474cb3953ceea\"\r\n\r\nexport const autoSuggest = (text) => {\r\n return service\r\n .get(`https://api.map4d.vn/sdk/autosuggest?text=${text}&Key=${defaultKey}`)\r\n .then((res) => {\r\n return res;\r\n })\r\n .catch((err) => {\r\n throw err;\r\n });\r\n};\r\n\r\nexport const geoCode = (paramObj) => {\r\n const params = new URLSearchParams();\r\n if (typeof paramObj === 'object') {\r\n for (let key in paramObj) {\r\n params.append(key, paramObj[key])\r\n }\r\n }\r\n return service\r\n .get(`https://api.map4d.vn/sdk/v2/geocode?key=${defaultKey}&${params}`)\r\n .then((res) => {\r\n return res;\r\n })\r\n .catch((err) => {\r\n throw err;\r\n });\r\n};\r\n","import { useState, useEffect } from 'react';\r\nimport {\r\n autoSuggest,\r\n} from '../../../redux/store/reflect/map4d';\r\nimport useDebounce from '../../../hooks/useDebounce'\r\n\r\nexport const useAutoSuggestAddress = (address: string) => {\r\n const addressDebounce = useDebounce(address, 500)\r\n const [data, setData] = useState([]);\r\n const [isLoading, setLoading] = useState(false);\r\n\r\n const handleGetAddress = async () => {\r\n setLoading(true)\r\n try {\r\n const response = await autoSuggest(address);\r\n setData(response?.result)\r\n } catch (error) {\r\n \r\n }\r\n setLoading(false)\r\n };\r\n\r\n useEffect(() => {\r\n if (address) {\r\n handleGetAddress();\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [addressDebounce]);\r\n\r\n return {\r\n data,\r\n isLoading,\r\n refresh: handleGetAddress,\r\n };\r\n};\r\n","import { useEffect, useState } from \"react\";\r\n\r\nexport default function useDebounce(\r\n value: any,\r\n delay: number,\r\n clearIfEmpty: boolean = true\r\n) {\r\n const [debouncedValue, setDebouncedValue] = useState(value);\r\n let timeout: any;\r\n\r\n useEffect(() => {\r\n if (clearIfEmpty && !value) {\r\n clearTimeout(timeout);\r\n setDebouncedValue(value);\r\n return;\r\n }\r\n\r\n timeout = setTimeout(() => {\r\n setDebouncedValue(value);\r\n }, delay);\r\n\r\n return () => {\r\n clearTimeout(timeout);\r\n };\r\n }, [value, delay]);\r\n\r\n return debouncedValue;\r\n}\r\n","import { Typography } from '@material-ui/core';\r\nimport { Pagination } from '@material-ui/lab';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport ClassicEditor from '@ckeditor/ckeditor5-build-classic';\r\nimport { CKEditor } from '@ckeditor/ckeditor5-react';\r\nimport { useForm } from 'react-hook-form';\r\nimport { Autocomplete } from '@material-ui/lab';\r\n// import OpenlayersMapView from \"../../openlayers-map/openlayers-map.view\";\r\nimport OpenlayersMapView from '../components/openlayers-map/openlayers-map.view';\r\n\r\nimport './create-reflect.scss';\r\nimport {\r\n CreateReflect,\r\n UpdateReflect,\r\n} from '../../../redux/store/reflect/reflect.store';\r\nimport { useAutoSuggestAddress } from '../hooks/map4d';\r\nimport { geoCode } from '../../../redux/store/reflect/map4d';\r\n// import { BASE_IMAGE } from '../../../common/constants';\r\nimport ShowNotification from '../../../components/react-notifications/react-notifications';\r\nimport { NotificationMessageType } from '../../../utils/configuration';\r\nimport { isImage, isVideo, isDocument } from 'utils/file';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faFile } from '@fortawesome/free-solid-svg-icons';\r\nimport { apiCustom } from 'api/api-config'\r\nconst BASE_IMAGE = apiCustom + \"/\";\r\nfunction CreateReflectPage({ reflect, onSuccess }) {\r\n const {\r\n register,\r\n handleSubmit,\r\n watch,\r\n formState: { errors, isSubmitting },\r\n getValues,\r\n setValue,\r\n } = useForm({\r\n defaultValues: {\r\n Id: reflect?.id || undefined,\r\n Title: reflect?.title || '',\r\n Content: reflect?.content || '',\r\n DetectionPosition: reflect?.detectionPosition || '',\r\n Longitude: reflect?.longitude || '',\r\n Latitude: reflect?.latitude || '',\r\n IsUrgentHandling: reflect?.isUrgentHandling || '',\r\n ReflectionStatusId: reflect?.reflectionStatusId || '',\r\n ProcessingStepCurrentId: reflect?.processingStepCurrentId || '',\r\n files: reflect?.reflectionFilesViewDtos || [],\r\n deletedFiles: [],\r\n SourceOfReflectionId: reflect?.SourceOfReflectionId || '',\r\n },\r\n mode: 'all',\r\n reValidateMode: 'onBlur',\r\n });\r\n const watchFields = watch([\r\n 'DetectionPosition',\r\n 'Content',\r\n 'Longitude',\r\n 'Latitude',\r\n 'files',\r\n 'deletedFiles',\r\n ]);\r\n const [dragActive, setDragActive] = React.useState(false);\r\n\r\n const { data: positionOptions } = useAutoSuggestAddress(\r\n watchFields.DetectionPosition\r\n );\r\n\r\n const onSubmit = async (values) => {\r\n console.log(values);\r\n if (values?.DetectionPosition && !values?.Longitude && !values?.Latitude) {\r\n ShowNotification(`Hãy chọn 1 vị trí`, NotificationMessageType.Warning);\r\n return;\r\n }\r\n try {\r\n if (!reflect) {\r\n await CreateReflect(values);\r\n } else {\r\n await UpdateReflect(values);\r\n }\r\n ShowNotification(\r\n `${!reflect ? 'Thêm' : 'Sửa'} phản ánh thành công`,\r\n NotificationMessageType.Success\r\n );\r\n onSuccess && onSuccess();\r\n } catch (error) {\r\n ShowNotification(\r\n `${!reflect ? 'Thêm' : 'Sửa'} phản ánh thất bại`,\r\n NotificationMessageType.Error\r\n );\r\n }\r\n };\r\n\r\n const handleSelectOnMap = async ([lng, lat]) => {\r\n try {\r\n const res = await geoCode({ location: [lat, lng] });\r\n const address = res?.result?.[0]?.address;\r\n if (address) {\r\n setValue('DetectionPosition', address);\r\n setValue('Longitude', lng?.toString());\r\n setValue('Latitude', lat?.toString());\r\n }\r\n } catch (error) {}\r\n };\r\n\r\n const handleFileChange = (files) => {\r\n const fileTypeExist = {\r\n image: 0,\r\n video: 0,\r\n document: 0,\r\n };\r\n const filesToAdd = [];\r\n for (let file of watchFields?.files) {\r\n if (file instanceof File && file?.type?.includes('image/')) {\r\n fileTypeExist.image++;\r\n }\r\n if (typeof file?.filePath === 'string' && isImage(file?.filePath)) {\r\n fileTypeExist.image++;\r\n }\r\n if (file instanceof File && file?.type?.includes('video/')) {\r\n fileTypeExist.video++;\r\n }\r\n if (typeof file?.filePath === 'string' && isVideo(file?.filePath)) {\r\n fileTypeExist.video++;\r\n }\r\n if (file instanceof File && isDocument(file?.name)) {\r\n fileTypeExist.document++;\r\n }\r\n if (typeof file?.filePath === 'string' && isDocument(file?.filePath)) {\r\n fileTypeExist.document++;\r\n }\r\n }\r\n for (let file of files) {\r\n if (file?.type?.includes('image/') && fileTypeExist?.image < 3) {\r\n filesToAdd.push(file);\r\n fileTypeExist.image++;\r\n }\r\n if (file?.type?.includes('video/') && fileTypeExist?.video < 1) {\r\n filesToAdd.push(file);\r\n fileTypeExist.video++;\r\n }\r\n if (isDocument(file?.name) && fileTypeExist?.document < 1) {\r\n filesToAdd.push(file);\r\n fileTypeExist.document++;\r\n }\r\n }\r\n setValue(`files`, [...watchFields?.files, ...filesToAdd]);\r\n };\r\n\r\n const handleDrag = function (e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n if (e.type === 'dragenter' || e.type === 'dragover') {\r\n setDragActive(true);\r\n } else if (e.type === 'dragleave') {\r\n setDragActive(false);\r\n }\r\n };\r\n\r\n const handleDrop = function (e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n setDragActive(false);\r\n const files = Object.values(e.dataTransfer.files)?.filter(\r\n (file) =>\r\n file?.type?.includes('image/') ||\r\n file?.type?.includes('video/') ||\r\n isDocument(file?.name)\r\n );\r\n handleFileChange(files);\r\n };\r\n\r\n useEffect(() => {\r\n register('Id');\r\n register('Content', {\r\n required: true,\r\n });\r\n register('DetectionPosition', {\r\n required: true,\r\n });\r\n register('Longitude');\r\n register('Latitude');\r\n register('ReflectionStatusId');\r\n register('ProcessingStepCurrentId');\r\n register('files');\r\n register('deletedFiles');\r\n }, []);\r\n\r\n const fileToRender = watchFields?.files?.map((file, id) => ({ id, file }));\r\n\r\n return (\r\n \r\n handleFileChange(e.target.files)}\r\n multiple\r\n accept='image/*,video/*,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf'\r\n />\r\n
\r\n Phản ánh kiến nghị
\r\n\r\n
\r\n Thông tin góp ý
\r\n\r\n \r\n
\r\n \r\n {\r\n const data = editor.getData();\r\n setValue('Content', data);\r\n }}\r\n />\r\n {errors?.Content && (\r\n \r\n Nội dung không được để trống\r\n \r\n )}\r\n
\r\n \r\n
\r\n \r\n
\r\n Hình ảnh & video
\r\n\r\n
\r\n )}\r\n \r\n {/* {watchFields?.files?.length > 0 && 
\r\n
\r\n {dragActive && (\r\n \r\n
} */}\r\n {\r\n if (watchFields?.files?.[0]?.fileId) {\r\n setValue(`deletedFiles`, [...watchFields?.deletedFiles, watchFields?.files?.[0]])\r\n }\r\n setValue(`files`, [])\r\n }}>X
\r\n \r\n \r\n Kéo hoặc thả file để tải file lên hoặc{' '}\r\n \r\n
\r\n\r\n {fileToRender\r\n ?.filter(\r\n (item) => !isDocument(item?.file?.name || item?.file?.fileName)\r\n )\r\n ?.map((item, i) => (\r\n
\r\n ))}\r\n \r\n {\r\n if (item?.file?.fileId) {\r\n setValue(`deletedFiles`, [\r\n ...(watchFields?.deletedFiles || []),\r\n item?.file,\r\n ]);\r\n }\r\n const filesClone = [...watchFields?.files];\r\n filesClone.splice(item?.id, 1);\r\n setValue(`files`, filesClone);\r\n }}\r\n >\r\n X\r\n
\r\n \r\n {fileToRender\r\n ?.filter((item) =>\r\n isDocument(item?.file?.name || item?.file?.fileName)\r\n )\r\n ?.map((item, i) => (\r\n
\r\n ))}\r\n \r\n \r\n \r\n {\r\n if (item?.file?.fileId) {\r\n setValue(`deletedFiles`, [\r\n ...(watchFields?.deletedFiles || []),\r\n item?.file,\r\n ]);\r\n }\r\n const filesClone = [...watchFields?.files];\r\n filesClone.splice(item?.id, 1);\r\n setValue(`files`, filesClone);\r\n }}\r\n >\r\n X\r\n
\r\n \r\n
\r\n Vị trí phản ánh
\r\n\r\n option?.address || ''}\r\n id='controlled'\r\n noOptionsText='Không có lựa chọn'\r\n isOptionEqualToValue={(option, value) => option === value}\r\n // loading={autoSuggestPoistions?.isRunning() || detectionPositionSearchTerm !== detectionPositionDebounce}\r\n onChange={(e, value) => {\r\n setValue('DetectionPosition', value?.address);\r\n setValue('Longitude', value?.location?.lng?.toString());\r\n setValue('Latitude', value?.location?.lat?.toString());\r\n }}\r\n renderInput={(params) => {\r\n return (\r\n
\r\n \r\n {\r\n setValue('DetectionPosition', e.target.value);\r\n setValue('Longitude', '');\r\n setValue('Latitude', '');\r\n }}\r\n />\r\n
\r\n );\r\n }}\r\n />\r\n {errors?.DetectionPosition && (\r\n \r\n Vị trí không được để trống\r\n \r\n )}\r\n \r\n
\r\n {name}
\r\n \r\n );\r\n }\r\n\r\n return <>;\r\n}\r\n","import React from 'react';\r\nimport { Button, Modal } from 'react-bootstrap';\r\nimport CreateOrUpdateReflectView from '../create-reflect-page/create-or-update-reflect.view'\r\n\r\nconst EditModal = ({ show, onHide, reflect, onSuccess }) => {\r\n return (\r\n\r\n
\r\n \r\n setReflectToUpdate(null)}\r\n onSuccess={() => {\r\n refresh();\r\n setReflectToUpdate(null);\r\n }}\r\n />\r\n\r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n isLoading: state.app.loading,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n showLoading: appActions.ShowLoading,\r\n },\r\n dispatch\r\n );\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(MyReflect);\r\n","import { Typography } from '@material-ui/core';\r\nimport { Pagination } from '@material-ui/lab';\r\nimport React, { useState } from 'react';\r\nimport { Link, useHistory } from 'react-router-dom';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport ClassicEditor from \"@ckeditor/ckeditor5-build-classic\"\r\nimport { CKEditor } from \"@ckeditor/ckeditor5-react\"\r\nimport { useForm } from \"react-hook-form\"\r\n\r\nimport * as appActions from '../../../core/app.store';\r\nimport { dateVNFormat, stripHtml } from '../../../utils';\r\n\r\nimport DeleteIcon from '../../../assets/icon/delete-icon.svg';\r\nimport EditIcon from '../../../assets/icon/edit-icon.svg';\r\nimport { useDeleteReflect, useGetMyListReflect } from '../hooks';\r\n\r\nimport { faSearch } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport Select from 'react-select';\r\nimport './create-reflect.scss';\r\nimport ShowNotification from '../../../components/react-notifications/react-notifications';\r\nimport { NotificationMessageType } from '../../../utils/configuration';\r\nimport { CreateReflect } from '../../../redux/store/reflect/reflect.store'\r\nimport CreateOrUpdateReflectView from './create-or-update-reflect.view'\r\nimport UrlCollect from '../../../common/url-collect';\r\n\r\nfunction CreateReflectPage() {\r\n const history = useHistory()\r\n\r\n const handleSuccess = () => {\r\n history.push(UrlCollect.MyReflect)\r\n }\r\n\r\n return \r\n
\r\n Phản ánh của bạn
\r\n \r\n\r\n \r\n \r\n
\r\n
\r\n {totalItem > 0 && (\r\n | STT | \r\nThông tin | \r\n\r\n Địa chỉ\r\n | \r\n\r\n Ngày đăng\r\n | \r\n\r\n Trạng thái\r\n | \r\n\r\n Hoạt động\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 {i < 9 ? '0' : ''}\r\n {i + 1}\r\n | \r\n\r\n | \r\n \r\n | \r\n {dateVNFormat(item?.createdDate)} | \r\n\r\n | \r\n \r\n {item?.reflectionStatusId === statusOptions?.[0]?.id && (\r\n \r\n \r\n )}\r\n | \r\n \r\n );\r\n })}\r\n
\r\n page && setPageIndex(page)}\r\n count={totalPage}\r\n />\r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n}\r\n\r\nexport default ReflectMap\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useState, useRef, useEffect } from \"react\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faKey,\r\n faUserCircle,\r\n faArrowLeft,\r\n faCheckCircle,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\nimport { Link } from \"react-router-dom\";\r\nimport UrlCollect from \"../../common/url-collect\";\r\nimport history from \"../../common/history\";\r\nimport ShowNotification from \"../../components/react-notifications/react-notifications\";\r\nimport { NotificationMessageType } from \"../../utils/configuration\";\r\nimport * as viVN from \"../../languages/vi-VN.json\";\r\nimport * as accountAction from \"../../redux/store/account/account.store\";\r\n\r\nimport \"./reset-password.scss\";\r\n\r\nexport default function ResetPasswordDesktop(props) {\r\n const {\r\n register,\r\n handleSubmit,\r\n setError,\r\n clearErrors,\r\n errors,\r\n watch,\r\n getValues,\r\n } = useForm({ mode: \"all\", reValidateMode: \"onBlur\" });\r\n const [pass, setPassword] = useState(\"\");\r\n\r\n const [height, setHeight] = useState({\r\n minHeight: `${window.innerHeight}px`,\r\n });\r\n\r\n const [isSuccess, setSuccess] = useState(false);\r\n const [userInfo, setUserInfo] = useState({ userId: \"\", token: \"\" });\r\n\r\n const password = useRef({});\r\n password.current = watch(\"password\", \"\");\r\n\r\n useEffect(() => {\r\n const token = new URLSearchParams(props.location.search).get(\"token\");\r\n if (\r\n props &&\r\n props.match &&\r\n props.match.params &&\r\n props.match.params.userId &&\r\n token\r\n ) {\r\n setUserInfo({\r\n userId: props.match.params.userId,\r\n token: token,\r\n });\r\n } else {\r\n history.push(UrlCollect.Login);\r\n }\r\n }, []);\r\n\r\n const onChangePassword = (e) => {\r\n setPassword(e.target.value);\r\n const { password, confirmPassword } = getValues();\r\n password === confirmPassword\r\n ? clearErrors([\"confirmPassword\"])\r\n : setError(\"confirmPassword\", { type: \"validate\" });\r\n };\r\n\r\n const onSubmit = (data) => {\r\n if (!data) return;\r\n accountAction\r\n .ResetPassword({\r\n userId: userInfo.userId,\r\n password: pass,\r\n code: userInfo.token,\r\n })\r\n .then(\r\n (res) => {\r\n ShowNotification(\r\n viVN.Success.ResetPasswordSuccess,\r\n NotificationMessageType.Success\r\n );\r\n history.push(UrlCollect.Login);\r\n },\r\n (err) => {\r\n err &&\r\n err.errorType &&\r\n ShowNotification(\r\n viVN.Errors[err.errorType],\r\n NotificationMessageType.Error\r\n );\r\n }\r\n );\r\n };\r\n\r\n const onBackToLogin = () => {\r\n history.push(UrlCollect.Login);\r\n };\r\n\r\n return (\r\n \r\n
\r\n setOpenMenu(true)}>{'>'}
\r\n \r\n
\r\n setOpenMenu(false)}>\r\n
\r\n Thông tin phản ánh
\r\n X\r\n\r\n \r\n
\r\n Lĩnh vực
\r\n\r\n {listCategories?.map((item, i) => (\r\n {\r\n if (item?.id === categoryId) {\r\n setCategoryId(null)\r\n } else {\r\n setCategoryId(item?.id)\r\n }\r\n }}\r\n >\r\n
\r\n ))}\r\n {item?.name}
\r\n\r\n
\r\n );\r\n}\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faCalendarAlt,\r\n faVideo,\r\n faFilm,\r\n faEye,\r\n faCamera,\r\n faQuestionCircle,\r\n faBook, faLink, faAngleDoubleDown,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\nimport { faNewspaper, faEnvelope } from \"@fortawesome/free-regular-svg-icons\";\r\nimport * as statementAction from \"../../../redux/store/statement/statement.store\";\r\nimport * as configuration from \"../../../utils/configuration\";\r\n\r\nexport default function ServiceLink() {\r\n const [linkGroup, setLinkGroup] = useState(null);\r\n\r\n useEffect(() => {\r\n statementAction\r\n .GetSerivceLink()\r\n .then(\r\n (res) =>\r\n res &&\r\n res.content &&\r\n res.content.linkGroup &&\r\n setLinkGroup(res.content.linkGroup)\r\n )\r\n .catch((err) => {});\r\n }, []);\r\n\r\n function getOtherLinkIcon(iconName){\r\n var icon = \r\n {!isSuccess && (\r\n \r\n )}\r\n\r\n {isSuccess && (\r\n \r\n )}\r\n
\r\n \r\n {linkGroup &&\r\n linkGroup.map((items, index) =>\r\n items.displayType === \"IMAGE\" ? (\r\n
\r\n );\r\n}\r\n","/* eslint-disable react/jsx-no-target-blank */\r\n/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faSearch,\r\n faEraser,\r\n faExclamationTriangle,\r\n faCalendarAlt,\r\n faVideo,\r\n faFilm,\r\n faEye,\r\n faCamera,\r\n faQuestionCircle,\r\n faBook,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\nimport { faNewspaper, faEnvelope } from \"@fortawesome/free-regular-svg-icons\";\r\nimport { Link } from \"react-router-dom\";\r\nimport Select from \"react-select\";\r\nimport DatePicker from \"react-datepicker\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport moment from \"moment\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport * as consultantCommunityActions from \"../../redux/store/consultant-community/consultant-community.store\";\r\nimport * as statementActions from \"../../redux/store/statement/statement.store\";\r\nimport * as appActions from \"../../core/app.store\";\r\nimport Pagination from \"../../components/pagination/pagination.view\";\r\nimport UrlCollect from \"../../common/url-collect\";\r\nimport {\r\n APIUrlDefault,\r\n NotificationMessageType,\r\n NotificationPosition,\r\n} from \"../../utils/configuration\";\r\nimport ShowNotification from \"../../components/react-notifications/react-notifications\";\r\nimport * as viVN from \"../../languages/vi-VN.json\";\r\nimport \"@geedmo/yamm/src/yamm.scss\";\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport \"./please-consult-the-community.scss\";\r\nimport ServiceLink from \"../planning-announcement/menu-right/service-link.view\";\r\n\r\nconst firstLoad = true;\r\n\r\nfunction PleaseConsultTheCommunityDesktopView(props) {\r\n const { showLoading } = props;\r\n\r\n const [doingModel, setDoingModel] = useState([]);\r\n const [resultModel, setResultModel] = useState([]);\r\n\r\n const [startDate, setStartDate] = useState(null);\r\n const [endDate, setEndDate] = useState(null);\r\n const [planningTypeModel, setPlanningTypeModel] = useState(\"\");\r\n const [approvalLevelModel, setApprovalLevelModel] = useState();\r\n\r\n const [currentPageIndexDoing, setCurrentPageIndexDoing] = useState(1);\r\n const currentPageSizeDoing = 10;\r\n const [totalItemCountDoing, setTotalItemCountDoing] = useState(0);\r\n\r\n const [currentPageIndexResult, setCurrentPageIndexResult] = useState(1);\r\n const currentPageSizeResult = 10;\r\n const [totalItemCountResult, setTotalItemCountResult] = useState(0);\r\n\r\n const [planningTypeOption, setPlanningTypeOption] = useState([]);\r\n const [approvalLevelOption, setApprovalLevelOption] = useState([]);\r\n const [pageCountDoing, setPageCountDoing] = useState();\r\n const [pageCountResult, setPageCountResult] = useState();\r\n\r\n const [isShowSearch, setIsShowSearch] = useState(false);\r\n\r\n const { register, handleSubmit, setValue } = useForm({\r\n mode: \"all\",\r\n reValidateMode: \"onBlur\",\r\n });\r\n\r\n useEffect(() => {\r\n onGetData();\r\n }, [firstLoad]);\r\n\r\n const onGetData = () => {\r\n showLoading(true);\r\n Promise.all([\r\n onGetListConsultantCommunity({\r\n pageIndex: currentPageIndexDoing,\r\n pageSize: currentPageSizeDoing,\r\n }),\r\n onGetPlanningType(),\r\n onGetApprovalAgencyLevel(),\r\n onGetListExpiredForm({\r\n pageIndex: currentPageIndexResult,\r\n pageSize: currentPageSizeResult,\r\n }),\r\n ])\r\n .then((res) => {\r\n showLoading(false);\r\n })\r\n .catch((err) => {\r\n showLoading(false);\r\n });\r\n };\r\n\r\n const onGetListConsultantCommunity = (data) => {\r\n return new Promise((resolve, reject) => {\r\n consultantCommunityActions.GetListConsultantCommunity(data).then(\r\n (res) => {\r\n setDoingModel(\r\n res &&\r\n res.content &&\r\n res.content.items &&\r\n res.content.items.length > 0\r\n ? res.content.items\r\n : []\r\n );\r\n setTotalItemCountDoing(\r\n res && res.content && res.content.totalItemCount\r\n ? res.content.totalItemCount\r\n : 0\r\n );\r\n setPageCountDoing(\r\n res && res.content && res.content.pageCount\r\n ? res.content.pageCount\r\n : 0\r\n );\r\n resolve(res);\r\n },\r\n (err) => {\r\n reject(err);\r\n }\r\n );\r\n });\r\n };\r\n\r\n const onGetListExpiredForm = (data) => {\r\n return new Promise((resolve, reject) => {\r\n consultantCommunityActions.GetListResultConsultantCommunity(data).then(\r\n (res) => {\r\n setResultModel(\r\n res &&\r\n res.content &&\r\n res.content.items &&\r\n res.content.items.length > 0\r\n ? res.content.items\r\n : []\r\n );\r\n setTotalItemCountResult(\r\n res && res.content && res.content.totalItemCount\r\n ? res.content.totalItemCount\r\n : 0\r\n );\r\n setPageCountResult(\r\n res && res.content && res.content.pageCount\r\n ? res.content.pageCount\r\n : 0\r\n );\r\n resolve(res);\r\n },\r\n (err) => {\r\n reject(err);\r\n }\r\n );\r\n });\r\n };\r\n\r\n const onGetPlanningType = () => {\r\n return new Promise((resolve, reject) => {\r\n statementActions.PlanningType().then(\r\n (res) => {\r\n setPlanningTypeOption(\r\n res && res.content && res.content.length > 0\r\n ? res.content.map((item) => {\r\n return { ...item, value: item.id, label: item.name };\r\n })\r\n : []\r\n );\r\n resolve(res);\r\n },\r\n (err) => {\r\n reject(err);\r\n }\r\n );\r\n });\r\n };\r\n\r\n const onGetApprovalAgencyLevel = () => {\r\n return new Promise((resolve, reject) => {\r\n statementActions.ApprovalAgencyLevel().then(\r\n (res) => {\r\n setApprovalLevelOption(\r\n res && res.content && res.content.length > 0\r\n ? res.content.map((item) => {\r\n return { ...item, value: item.id, label: item.name };\r\n })\r\n : []\r\n );\r\n resolve(res);\r\n },\r\n (err) => {\r\n reject(err);\r\n }\r\n );\r\n });\r\n };\r\n\r\n const onSearch = (data, isClearSearch = false) => {\r\n setIsShowSearch(false);\r\n document.getElementById(\"dropdownToggle\").click();\r\n showLoading(true);\r\n setCurrentPageIndexDoing((data && data.pageIndex) || 1);\r\n\r\n let params = {\r\n pageIndex: (data && data.pageIndex) || 1,\r\n planningName: (data && data.planningName) || null,\r\n planningType: (planningTypeModel && planningTypeModel.value) || null,\r\n approvalLevel: (approvalLevelModel && approvalLevelModel.value) || null,\r\n place: (data && data.address) || null,\r\n planningAgency: (data && data.agenciesOrganizations) || null,\r\n consultingUnit: (data && data.consultingUnit) || null,\r\n startTime:\r\n (startDate && moment(startDate).format(\"YYYY-MM-DDTHH:mm:ssZ\")) || null,\r\n endTime:\r\n (endDate && moment(endDate).format(\"YYYY-MM-DDTHH:mm:ssZ\")) || null,\r\n };\r\n\r\n if (data && data.search) {\r\n params = {\r\n ...params,\r\n planningName: data.search,\r\n };\r\n }\r\n\r\n if (isClearSearch === true) {\r\n params = {\r\n pageIndex: 1,\r\n };\r\n }\r\n\r\n consultantCommunityActions\r\n .GetListConsultantCommunity({ ...params, pageSize: currentPageSizeDoing })\r\n .then(\r\n (res) => {\r\n if (\r\n res &&\r\n res.content &&\r\n res.content.items &&\r\n res.content.items.length > 0\r\n ) {\r\n setDoingModel(res.content.items);\r\n setTotalItemCountDoing(\r\n res && res.content && res.content.totalItemCount\r\n ? res.content.totalItemCount\r\n : 0\r\n );\r\n setPageCountDoing(\r\n res && res.content && res.content.pageCount\r\n ? res.content.pageCount\r\n : 0\r\n );\r\n } else {\r\n setDoingModel(res.content.items);\r\n setTotalItemCountDoing(\r\n res && res.content && res.content.totalItemCount\r\n ? res.content.totalItemCount\r\n : 0\r\n );\r\n setPageCountDoing(\r\n res && res.content && res.content.pageCount\r\n ? res.content.pageCount\r\n : 0\r\n );\r\n // ShowNotification(\r\n // viVN.Warning.NoData,\r\n // NotificationMessageType.Warning,\r\n // NotificationPosition.Center\r\n // );\r\n }\r\n showLoading(false);\r\n },\r\n (err) => {\r\n showLoading(false);\r\n }\r\n );\r\n\r\n consultantCommunityActions\r\n .GetListResultConsultantCommunity({\r\n ...params,\r\n pageSize: currentPageSizeResult,\r\n })\r\n .then(\r\n (res) => {\r\n setResultModel(\r\n res &&\r\n res.content &&\r\n res.content.items &&\r\n res.content.items.length > 0\r\n ? res.content.items\r\n : []\r\n );\r\n setTotalItemCountResult(\r\n res && res.content && res.content.totalItemCount\r\n ? res.content.totalItemCount\r\n : 0\r\n );\r\n setPageCountResult(\r\n res && res.content && res.content.pageCount\r\n ? res.content.pageCount\r\n : 0\r\n );\r\n showLoading(false);\r\n },\r\n (err) => {\r\n showLoading(false);\r\n }\r\n );\r\n };\r\n\r\n const onClearSearch = () => {\r\n document.getElementById(\"dropdownToggle\").click();\r\n document.getElementById(\"searchFormOne\").reset();\r\n document.getElementById(\"searchFormTwo\").reset();\r\n setStartDate(null);\r\n setEndDate(null);\r\n setPlanningTypeModel(null);\r\n setApprovalLevelModel(null);\r\n onSearch(null, true);\r\n };\r\n\r\n const onGetListExpiredFormPaging = (data) => {\r\n showLoading(true);\r\n setCurrentPageIndexResult(data.pageIndex || 1);\r\n\r\n let params = {\r\n pageIndex: data.pageIndex || 1,\r\n pageSize: currentPageSizeResult,\r\n };\r\n\r\n consultantCommunityActions.GetListResultConsultantCommunity(params).then(\r\n (res) => {\r\n setResultModel(\r\n res &&\r\n res.content &&\r\n res.content.items &&\r\n res.content.items.length > 0\r\n ? res.content.items\r\n : []\r\n );\r\n setTotalItemCountDoing(\r\n res && res.content && res.content.totalItemCount\r\n ? res.content.totalItemCount\r\n : 0\r\n );\r\n showLoading(false);\r\n },\r\n (err) => {\r\n showLoading(false);\r\n }\r\n );\r\n };\r\n\r\n const handleClickSearchIcon = () => {\r\n setIsShowSearch(!isShowSearch);\r\n };\r\n\r\n return (\r\n \r\n {items.linkService &&\r\n items.linkService.length > 0 &&\r\n items.linkService.map((linkService, index1) => (\r\n
\r\n ) : items.displayType === \"OTHER\" ? (\r\n \r\n
\r\n ))}\r\n \r\n \r\n
\r\n \r\n
\r\n ) : items.displayType === \"MAP\" ? (\r\n \r\n ) :(\r\n - \r\n {items.linkService &&\r\n items.linkService.length > 0 &&\r\n items.linkService.map((itemOther,index2) => (\r\n
- \r\n \r\n {getOtherLinkIcon(itemOther.icon)}\r\n {itemOther.name}\r\n \r\n \r\n ))}\r\n
\r\n
\r\n )\r\n )}\r\n \r\n
\r\n {items.linkService &&\r\n items.linkService.length > 0 &&\r\n items.linkService.map((itemsChild) => (\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 {doingModel && doingModel.length > 0 ? (\r\n doingModel.map((item, index) =>\r\n index === 0 ? (\r\n
\r\n \r\n \r\n \r\n
\r\n\r\n
\r\n ) : (\r\n \r\n \r\n {item.planningName}\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n {item.title}
\r\n\r\n Ngày bắt đầu: \r\n {moment(new Date(item.startTime)).format(\r\n \"DD/MM/YYYY\"\r\n )}\r\n
\r\n \r\n Ngày hết hạn: \r\n {moment(new Date(item.endTime)).format(\"DD/MM/YYYY\")}\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 {item.planningName}\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n {item.title}
\r\n\r\n Ngày bắt đầu: \r\n {moment(new Date(item.startTime)).format(\r\n \"DD/MM/YYYY\"\r\n )}\r\n
\r\n \r\n Ngày hết hạn: \r\n {moment(new Date(item.endTime)).format(\r\n \"DD/MM/YYYY\"\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 KẾT QUẢ XIN Ý KIẾN \r\n \r\n
\r\n \r\n {resultModel && resultModel.length > 0 ? (\r\n resultModel.map((item, index) => (\r\n
\r\n {resultModel && resultModel.length > 0 && (\r\n \r\n
\r\n ))\r\n ) : (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {item.title}\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n 1 ? \"float-left\" : \"\"\r\n }`}\r\n >\r\n Có {totalItemCountResult} kết quả\r\n
\r\n {/* {pageCountResult && pageCountResult > 0 && (\r\n \r\n {\r\n onGetListExpiredFormPaging({\r\n pageIndex: pageIndex,\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\nconst mapStateToProps = (state) => ({\r\n isLoading: state.app.loading,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n showLoading: appActions.ShowLoading,\r\n },\r\n dispatch\r\n );\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(PleaseConsultTheCommunityDesktopView);\r\n","/* eslint-disable react/jsx-no-target-blank */\r\n/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport moment from \"moment\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faTable } from \"@fortawesome/free-solid-svg-icons\";\r\nimport Modal from \"react-bootstrap/Modal\";\r\n\r\nimport * as consultantCommunityActions from \"../../../redux/store/consultant-community/consultant-community.store\";\r\nimport * as appActions from \"../../../core/app.store\";\r\n\r\nimport Pagination from \"../../../components/pagination/pagination.view\";\r\n\r\nimport ShowNotification from \"../../../components/react-notifications/react-notifications\";\r\nimport {\r\n NotificationMessageType,\r\n DomainAdminSide,\r\n NotificationPosition,\r\n} from \"../../../utils/configuration\";\r\nimport * as viVN from \"../../../languages/vi-VN.json\";\r\n\r\nimport \"./summary-ideas.scss\";\r\n\r\nfunction SummaryIdeasView(props) {\r\n const { showLoading, id } = props;\r\n\r\n const [resultModel, setResultModel] = useState([]);\r\n const [resultItem, setResultItem] = useState(\"\");\r\n const [questions, setQuestions] = useState(\"\");\r\n const currentPageIndexResult = 1;\r\n const currentPageSizeResult = 10;\r\n const [totalItemCountResult, setTotalItemCountResult] = useState(0);\r\n const [pageCount, setPageCount] = useState(0);\r\n\r\n const [show, setShow] = useState(false);\r\n\r\n // useEffect(() => {\r\n // let search = new URLSearchParams(props.location.search).get(\"search\");\r\n // onGetListExpiredForm({\r\n // pageIndex: currentPageIndexResult,\r\n // pageSize: currentPageSizeResult,\r\n // consultantCommunityId: (search && Number(search)) || null,\r\n // });\r\n // }, []);\r\n useEffect(() => {\r\n //let search = new URLSearchParams(props.location.search).get(\"search\");\r\n onGetListExpiredForm({\r\n pageIndex: currentPageIndexResult,\r\n pageSize: currentPageSizeResult,\r\n consultantCommunityId: id,\r\n });\r\n }, [id]);\r\n\r\n const onGetListExpiredForm = (data) => {\r\n showLoading(true);\r\n consultantCommunityActions.GetListExpiredForm(data).then(\r\n (res) => {\r\n setResultModel(\r\n res &&\r\n res.content &&\r\n res.content.items &&\r\n res.content.items.length > 0\r\n ? res.content.items\r\n : []\r\n );\r\n setTotalItemCountResult(\r\n res && res.content && res.content.totalItemCount\r\n ? res.content.totalItemCount\r\n : 0\r\n );\r\n setPageCount(\r\n res && res.content && res.content.pageCount\r\n ? res.content.pageCount\r\n : 0\r\n );\r\n let s = 0\r\n setSum(\r\n res.content &&\r\n res.content.items &&\r\n res.content.items.length > 0\r\n ? res.content.items.map(item => {\r\n return s = s + item.numberResult\r\n })\r\n : 0\r\n )\r\n\r\n showLoading(false);\r\n },\r\n (err) => {\r\n showLoading(false);\r\n }\r\n );\r\n };\r\n\r\n const GetReportFeedback = (id) => {\r\n showLoading(true);\r\n consultantCommunityActions.GetReportFeedback(id).then(\r\n (res) => {\r\n if (res && res.content) {\r\n setQuestions(res.content);\r\n setShow(true);\r\n }\r\n showLoading(false);\r\n },\r\n (err) => {\r\n showLoading(false);\r\n ShowNotification(\r\n viVN.Errors[(err && err.errorType) || \"UnableHandleException\"],\r\n NotificationMessageType.Error\r\n );\r\n }\r\n );\r\n };\r\n \r\n const onShowFeedBack = (item) => {\r\n if (item.numberResult > 0) {\r\n GetReportFeedback(item.id);\r\n setResultItem(item);\r\n } else {\r\n ShowNotification(\r\n \"Chưa có ý kiến nào\",\r\n NotificationMessageType.Warning,\r\n NotificationPosition.Center\r\n );\r\n }\r\n };\r\n const [sum, setSum] = useState(0);\r\n return (\r\n \r\n {doingModel && doingModel.length > 0 && (\r\n
\r\n )}\r\n \r\n 1 ? \"float-left\" : \"\"\r\n }`}\r\n >\r\n Có {totalItemCountDoing} kết quả\r\n
\r\n {pageCountDoing && pageCountDoing > 1 && (\r\n \r\n {\r\n onSearch({\r\n pageIndex: pageIndex,\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\nconst mapStateToProps = (state) => ({\r\n isLoading: state.app.loading,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n showLoading: appActions.ShowLoading,\r\n },\r\n dispatch\r\n );\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SummaryIdeasView);\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\n/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable @typescript-eslint/no-unused-expressions */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport UrlCollect from \"../../../common/url-collect\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport Select from \"react-select\";\r\nimport SummaryIdeasView from \"../summary-ideas/summary.view\"\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faDownload,\r\n faExclamationCircle,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport * as appActions from \"../../../core/app.store\";\r\nimport * as consultantCommunityActions from \"../../../redux/store/consultant-community/consultant-community.store\";\r\nimport { APIUrlDefault } from \"../../../utils/configuration\";\r\n\r\nimport ShowNotification from \"../../../components/react-notifications/react-notifications\";\r\nimport { NotificationMessageType } from \"../../../utils/configuration\";\r\nimport * as viVN from \"../../../languages/vi-VN.json\";\r\n\r\nimport \"./please-comment.scss\";\r\nimport history from \"../../../common/history\";\r\nimport * as configuration from \"../../../utils/configuration\";\r\nimport { saveAs } from \"file-saver\";\r\nimport * as apiConfig from \"../../../api/api-config\"\r\nconst ANSWER_TYPE = {\r\n RADIO: \"RADIO\",\r\n TEXT_BOX: \"TEXT_BOX\",\r\n CHECK_BOX: \"CHECK_BOX\",\r\n DROPDOWN: \"DROPDOWN\",\r\n};\r\n\r\nfunction PleaseCommentView(props) {\r\n const { showLoading } = props;\r\n const { id } = props.match.params;\r\n\r\n const [data, setData] = useState(\"\");\r\n const [doingModel, setDoingModel] = useState([]);\r\n const [resultModel, setResultModel] = useState([]);\r\n const [formTemplate, setFormTemplate] = useState([]);\r\n\r\n const currentPageIndexDoing = 1;\r\n const currentPageSizeDoing = 10;\r\n const [totalItemCountDoing, setTotalItemCountDoing] = useState(0);\r\n\r\n const currentPageIndexResult = 1;\r\n const currentPageSizeResult = 10;\r\n const [totalItemCountResult, setTotalItemCountResult] = useState(0);\r\n\r\n const { register, handleSubmit, errors } = useForm({\r\n mode: \"all\",\r\n reValidateMode: \"onBlur\",\r\n });\r\n\r\n useEffect(() => {\r\n id ? onGetData() : history.push(UrlCollect.PleaseConsultTheCommunity);\r\n }, [id]);\r\n\r\n const onGetData = () => {\r\n showLoading(true);\r\n Promise.all([\r\n onGetDetail(),\r\n onGetListConsultantCommunity({\r\n pageIndex: currentPageIndexDoing,\r\n pageSize: currentPageSizeDoing,\r\n }),\r\n onGetDetailFormTemplate(),\r\n onGetListExpiredForm({\r\n pageIndex: currentPageIndexResult,\r\n pageSize: currentPageSizeResult,\r\n }),\r\n ])\r\n .then((res) => {\r\n showLoading(false);\r\n })\r\n .catch((err) => {\r\n showLoading(false);\r\n });\r\n };\r\n\r\n const onGetListConsultantCommunity = (data) => {\r\n return new Promise((resolve, reject) => {\r\n consultantCommunityActions.GetListConsultantCommunity(data).then(\r\n (res) => {\r\n setDoingModel(\r\n res &&\r\n res.content &&\r\n res.content.items &&\r\n res.content.items.length > 0\r\n ? res.content.items.filter((item) => item.id !== id)\r\n : []\r\n );\r\n setTotalItemCountDoing(\r\n res && res.content && res.content.totalItemCount\r\n ? res.content.totalItemCount\r\n : 0\r\n );\r\n resolve(res);\r\n },\r\n (err) => {\r\n reject(err);\r\n }\r\n );\r\n });\r\n };\r\n\r\n const onGetListExpiredForm = (data) => {\r\n return new Promise((resolve, reject) => {\r\n consultantCommunityActions.GetListResultConsultantCommunity(data).then(\r\n (res) => {\r\n console.log(res.content.items)\r\n setResultModel(\r\n res &&\r\n res.content &&\r\n res.content.items &&\r\n res.content.items.length > 0\r\n ? res.content.items.filter((item) => item.id !== id)\r\n : []\r\n );\r\n setTotalItemCountResult(\r\n res && res.content && res.content.totalItemCount\r\n ? res.content.totalItemCount\r\n : 0\r\n );\r\n resolve(res);\r\n },\r\n (err) => {\r\n reject(err);\r\n }\r\n );\r\n });\r\n };\r\n\r\n const onGetDetail = () => {\r\n return new Promise((resolve, reject) => {\r\n consultantCommunityActions.GetDetailConsultantCommunity(id).then(\r\n (res) => {\r\n setData(res && res.content);\r\n resolve(res);\r\n },\r\n (err) => {\r\n reject(err);\r\n }\r\n );\r\n });\r\n };\r\n\r\n const onGetDetailFormTemplate = () => {\r\n return new Promise((resolve, reject) => {\r\n consultantCommunityActions.GetDetailFormTemplate(id).then(\r\n (res) => {\r\n setFormTemplate(res && res.content);\r\n resolve(res);\r\n },\r\n (err) => {\r\n reject(err);\r\n }\r\n );\r\n });\r\n };\r\n\r\n const onSubmitComment = (data) => {\r\n if (!data) return;\r\n showLoading(true);\r\n\r\n let params = {\r\n formTemplateId: (formTemplate && formTemplate.id) || null,\r\n name: data.fullName,\r\n phoneNo: data.mobilePhone,\r\n email: data.email,\r\n address: data.address,\r\n suggestion: \"\",\r\n answers: [],\r\n };\r\n\r\n formTemplate &&\r\n formTemplate.questions &&\r\n formTemplate.questions.length > 0 &&\r\n formTemplate.questions.map((item) => {\r\n let answerObj = {};\r\n let answers = params.answers || [];\r\n let addition = data[`haveAdditional_${item.id}`];\r\n\r\n if (item.answerType === ANSWER_TYPE.RADIO) {\r\n let answerRadio = data[`answerRadio_${item.id}`];\r\n\r\n if (answerRadio) {\r\n answerObj = {\r\n questionId: item.id,\r\n answerId: parseInt(answerRadio),\r\n };\r\n\r\n if (addition) {\r\n answerObj = {\r\n ...answerObj,\r\n addition: addition,\r\n };\r\n }\r\n\r\n answers.push(answerObj);\r\n }\r\n } else if (item.answerType === ANSWER_TYPE.DROPDOWN) {\r\n let answerDropdown = data[`answerDropdown_${item.id}`];\r\n\r\n if (answerDropdown) {\r\n answerObj = {\r\n questionId: item.id,\r\n answerId: parseInt(answerDropdown),\r\n };\r\n\r\n if (addition) {\r\n answerObj = {\r\n ...answerObj,\r\n addition: addition,\r\n };\r\n }\r\n\r\n answers.push(answerObj);\r\n }\r\n } else if (item.answerType === ANSWER_TYPE.CHECK_BOX) {\r\n item.answers.map((answer) => {\r\n let answerCheckBox = data[`answerCheckBox_${item.id}_${answer.id}`];\r\n\r\n if (answerCheckBox) {\r\n answerObj = {\r\n questionId: item.id,\r\n answerId: answer.id,\r\n };\r\n\r\n if (addition) {\r\n answerObj = {\r\n ...answerObj,\r\n addition: addition,\r\n };\r\n }\r\n\r\n answers.push(answerObj);\r\n }\r\n });\r\n } else if (item.answerType === ANSWER_TYPE.TEXT_BOX) {\r\n let answerTextBox = data[`answerTextBox_${item.id}`];\r\n\r\n if (answerTextBox) {\r\n answerObj = {\r\n questionId: item.id,\r\n addition: answerTextBox,\r\n };\r\n\r\n answers.push(answerObj);\r\n }\r\n }\r\n\r\n params = {\r\n ...params,\r\n answers: answers,\r\n };\r\n });\r\n\r\n consultantCommunityActions.CreateFeedback(params).then(\r\n (res) => {\r\n ShowNotification(\r\n viVN.Success.FeedbackSuccess,\r\n NotificationMessageType.Success\r\n );\r\n showLoading(false);\r\n history.push(\"/y-kien-cong-dong\");\r\n },\r\n (err) => {\r\n showLoading(false);\r\n ShowNotification(\r\n viVN.Errors[(err && err.errorType) || \"UnableHandleException\"],\r\n NotificationMessageType.Error\r\n );\r\n }\r\n );\r\n };\r\n\r\n const renderAnswerInput = (_question) => {\r\n if (!_question) return null;\r\n\r\n switch (_question.answerType) {\r\n case ANSWER_TYPE.RADIO:\r\n if (!_question.answers || _question.answers.length === 0) return null;\r\n return (\r\n _question.answers &&\r\n _question.answers.length > 0 &&\r\n _question.answers.map((answerItem, answerIndex) => (\r\n \r\n
\r\n {resultItem && questions && show && (\r\n \r\n \r\n
\r\n {resultModel && resultModel.length > 0 && pageCount > 1 && (\r\n \r\n Có {sum} kết quả\r\n
\r\n\r\n \r\n \r\n
\r\n
\r\n | Tên | \r\n\r\n Trạng thái\r\n | \r\n\r\n Thời gian bắt đầu\r\n | \r\n\r\n Thời gian kết thúc\r\n | \r\n \r\n\r\n Chi tiết\r\n | \r\n
|---|---|---|---|---|
| \r\n {item.title}\r\n \r\n {item.planningName}\r\n | \r\n \r\n {!item.isExpired ? \"Đang xin ý kiến\" : \"Kết thúc\"}\r\n | \r\n\r\n {moment(new Date(item.startTime)).format(\"DD/MM/YYYY\")}\r\n | \r\n\r\n {moment(new Date(item.endTime)).format(\"DD/MM/YYYY\")}\r\n | \r\n \r\n\r\n | \r\n
| \r\n Không có dữ liệu\r\n | \r\n
\r\n {\r\n onGetListExpiredForm({\r\n pageIndex: pageIndex,\r\n pageSize: currentPageSizeResult,\r\n });\r\n }}\r\n />\r\n
\r\n )}\r\n \r\n Kết quả Xin ý kiến về {resultItem.title} -{\" \"}\r\n {resultItem.planningName}\r\n
\r\n| \r\n Tổng số ý kiến: {resultItem.numberResult}\r\n | \r\n {/*\r\n | */}\r\n
\r\n {`${indexQuestion + 1}. ${itemQuestion.title}`}\r\n
| \r\n
\r\n {data && (\r\n
\r\n \r\n )}\r\n \r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n isLoading: state.app.loading,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n showLoading: appActions.ShowLoading,\r\n },\r\n dispatch\r\n );\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(PleaseCommentView);\r\n","/* eslint-disable react/jsx-no-target-blank */\r\n/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport moment from \"moment\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faTable } from \"@fortawesome/free-solid-svg-icons\";\r\nimport Modal from \"react-bootstrap/Modal\";\r\n\r\nimport * as consultantCommunityActions from \"../../../redux/store/consultant-community/consultant-community.store\";\r\nimport * as appActions from \"../../../core/app.store\";\r\n\r\nimport Pagination from \"../../../components/pagination/pagination.view\";\r\n\r\nimport ShowNotification from \"../../../components/react-notifications/react-notifications\";\r\nimport {\r\n NotificationMessageType,\r\n DomainAdminSide,\r\n NotificationPosition,\r\n} from \"../../../utils/configuration\";\r\nimport * as viVN from \"../../../languages/vi-VN.json\";\r\n\r\nimport \"./summary-ideas.scss\";\r\n\r\nfunction SummaryIdeasView(props) {\r\n const { showLoading } = props;\r\n\r\n const [resultModel, setResultModel] = useState([]);\r\n const [resultItem, setResultItem] = useState(\"\");\r\n const [questions, setQuestions] = useState(\"\");\r\n const currentPageIndexResult = 1;\r\n const currentPageSizeResult = 10;\r\n const [totalItemCountResult, setTotalItemCountResult] = useState(0);\r\n const [pageCount, setPageCount] = useState(0);\r\n\r\n const [show, setShow] = useState(false);\r\n\r\n useEffect(() => {\r\n let search = new URLSearchParams(props.location.search).get(\"search\");\r\n onGetListExpiredForm({\r\n pageIndex: currentPageIndexResult,\r\n pageSize: currentPageSizeResult,\r\n consultantCommunityId: (search && Number(search)) || null,\r\n });\r\n }, []);\r\n\r\n const onGetListExpiredForm = (data) => {\r\n showLoading(true);\r\n consultantCommunityActions.GetListExpiredForm(data).then(\r\n (res) => {\r\n setResultModel(\r\n res &&\r\n res.content &&\r\n res.content.items &&\r\n res.content.items.length > 0\r\n ? res.content.items\r\n : []\r\n );\r\n setTotalItemCountResult(\r\n res && res.content && res.content.totalItemCount\r\n ? res.content.totalItemCount\r\n : 0\r\n );\r\n setPageCount(\r\n res && res.content && res.content.pageCount\r\n ? res.content.pageCount\r\n : 0\r\n );\r\n\r\n showLoading(false);\r\n },\r\n (err) => {\r\n showLoading(false);\r\n }\r\n );\r\n };\r\n\r\n const GetReportFeedback = (id) => {\r\n showLoading(true);\r\n consultantCommunityActions.GetReportFeedback(id).then(\r\n (res) => {\r\n if (res && res.content) {\r\n setQuestions(res.content);\r\n setShow(true);\r\n }\r\n showLoading(false);\r\n },\r\n (err) => {\r\n showLoading(false);\r\n ShowNotification(\r\n viVN.Errors[(err && err.errorType) || \"UnableHandleException\"],\r\n NotificationMessageType.Error\r\n );\r\n }\r\n );\r\n };\r\n \r\n const onShowFeedBack = (item) => {\r\n if (item.numberResult > 0) {\r\n GetReportFeedback(item.id);\r\n setResultItem(item);\r\n } else {\r\n ShowNotification(\r\n \"Chưa có ý kiến nào\",\r\n NotificationMessageType.Warning,\r\n NotificationPosition.Center\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 {data.planningName}
\r\n{data.title}
\r\n\r\n \r\n Tải xuống file đính kèm tại đây:\r\n \r\n {data && data.documentFiles && data.documentFiles.length > 0\r\n && data.documentFiles.map(item => (\r\n
\r\n {!data.isExpired && }\r\n\r\n {data && (\r\n \r\n \r\n {item.name}\r\n
\r\n ))\r\n }\r\n \r\n \r\n Gửi ý kiến\r\n \r\n \r\n
\r\n {data.isExpired && }\r\n {data.isExpired && \r\n \r\n ĐÓNG GÓP Ý KIẾN TRỰC TIẾP VỀ ĐỒ ÁN QUY HOẠCH HOẶC{\" \"}\r\n
\r\n A. THÔNG TIN CƠ QUAN, CÁ NHÂN ĐƯỢC XIN Ý KIẾN\r\n \r\n
\r\n \r\n ĐÓNG GÓP Ý KIẾN TRỰC TIẾP VỀ ĐỒ ÁN QUY HOẠCH HOẶC{\" \"}\r\n {\r\n if (data && data.documentPath) {\r\n saveAs(\r\n configuration.APIUrlDefault + data.documentPath,\r\n data.name\r\n )\r\n } else {\r\n ShowNotification(\r\n viVN.Warning.NotFileDownload,\r\n NotificationMessageType.Warning\r\n );\r\n }\r\n }\r\n }\r\n >\r\n
\r\n A. THÔNG TIN CƠ QUAN, CÁ NHÂN ĐƯỢC XIN Ý KIẾ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 {formTemplate &&\r\n formTemplate.questions &&\r\n formTemplate.questions.map(\r\n (questionItem, questionIndex) => (\r\n \r\n {renderAnswerInput(questionItem)}\r\n
\r\n\r\n {questionItem.haveAdditional === true &&\r\n questionItem.answerType !==\r\n ANSWER_TYPE.TEXT_BOX && (\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 QUY HOẠCH ĐANG XIN Ý KIẾN\r\n \r\n
\r\n \r\n {doingModel && doingModel.length > 0 ? (\r\n doingModel.map((item) => (\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 {item.title}\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n KẾT QUẢ XIN Ý KIẾN\r\n \r\n
\r\n \r\n {resultModel && resultModel.length > 0 ? (\r\n resultModel.map((item) => (\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 {item.title}\r\n \r\n
\r\n Không có dữ liệu
\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\nconst mapStateToProps = (state) => ({\r\n isLoading: state.app.loading,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n showLoading: appActions.ShowLoading,\r\n },\r\n dispatch\r\n );\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SummaryIdeasView);\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {faSearch} from \"@fortawesome/free-solid-svg-icons\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport * as appActions from \"../../core/app.store\";\r\nimport Pagination from \"../../components/pagination/pagination.view\";\r\nimport UrlCollect from \"../../common/url-collect\";\r\nimport ServiceLink from \"../planning-announcement/menu-right/service-link.view\";\r\nimport {\r\n APIUrlDefault, DomainUserSide,\r\n NotificationMessageType,\r\n NotificationPosition,\r\n} from \"../../utils/configuration\";\r\nimport MenuRightView from \"./menu-right/menu-right.view\";\r\nimport \"@geedmo/yamm/src/yamm.scss\";\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport \"./list.scss\";\r\nimport * as newsActions from \"../../redux/store/news/news.store\";\r\nimport dateformat from \"dateformat\";\r\n\r\nconst firstLoad = true;\r\n\r\nfunction ListNewsView(props) {\r\n const { showLoading, isQHT, isQHCC, isQHHTKT} = props;\r\n const [keyword, setKeyword] = useState([]);\r\n\r\n const [currentPageIndexDoing, setCurrentPageIndexDoing] = useState(1);\r\n const currentPageSizeDoing = 4;\r\n const [totalItemCountDoing, setTotalItemCountDoing] = useState(0);\r\n\r\n const [pageCountDoing, setPageCountDoing] = useState();\r\n const [listHotNews, setHotNewsModel] = useState([]);\r\n const [listNews, setListNews] = useState([]);\r\n const [hotNews, setHotNews] = useState({});\r\n\r\n useEffect(() => {\r\n onGetData();\r\n }, [firstLoad]);\r\n\r\n const onGetData = () => {\r\n showLoading(true);\r\n console.log(isQHHTKT)\r\n console.log(isQHT)\r\n console.log(isQHCC)\r\n Promise.all([\r\n onGetListHotNews({\r\n pageIndex: 1,\r\n pageSize: 5,\r\n // isQHT: isQHT, \r\n // isQHCC: isQHCC, \r\n // isQHHTKT: isQHHTKT,\r\n }),\r\n onGetListNews({\r\n pageIndex: currentPageIndexDoing,\r\n pageSize: currentPageSizeDoing,\r\n isQHT: isQHT, \r\n isQHCC: isQHCC, \r\n isQHHTKT: isQHHTKT,\r\n }),\r\n ])\r\n .then((res) => {\r\n showLoading(false);\r\n })\r\n .catch((err) => {\r\n showLoading(false);\r\n });\r\n };\r\n\r\n const setTextSearch = (event) => {\r\n setKeyword(event.target.value);\r\n }\r\n const handleKeyPress = (event) => {\r\n if (event.key === 'Enter') {\r\n onGetListNews({\r\n keyword:keyword,\r\n pageIndex: 1,\r\n pageSize: currentPageSizeDoing,\r\n isQHT: isQHT, \r\n isQHCC: isQHCC, \r\n isQHHTKT: isQHHTKT,\r\n }\r\n );\r\n }\r\n };\r\n\r\n const handleClickSearchIcon = () => {\r\n onGetListNews({\r\n keyword:keyword,\r\n pageIndex: 1,\r\n pageSize: currentPageSizeDoing,\r\n isQHT: isQHT, \r\n isQHCC: isQHCC, \r\n isQHHTKT: isQHHTKT,\r\n }\r\n );\r\n };\r\n\r\n const onGetListNews = (data) => {\r\n return new Promise((resolve, reject) => {\r\n newsActions.GetListNewsByCategory(data).then(\r\n (res) => {\r\n setListNews(\r\n res &&\r\n res.content &&\r\n res.content.items\r\n && res.content.items.length > 0 ? res.content.items: []\r\n );\r\n setTotalItemCountDoing(\r\n res && res.content && res.content.totalItemCount\r\n ? res.content.totalItemCount\r\n : 0\r\n );\r\n setPageCountDoing(\r\n res && res.content && res.content.pageCount\r\n ? res.content.pageCount\r\n : 0\r\n );\r\n resolve(res);\r\n },\r\n (err) => {\r\n reject(err);\r\n }\r\n );\r\n });\r\n }\r\n\r\n const onGetListHotNews = (data) => {\r\n return new Promise((resolve, reject) => {\r\n newsActions.GetListHotNews(data).then(\r\n (res) => {\r\n setHotNewsModel(\r\n res &&\r\n res.content &&\r\n res.content.items\r\n && res.content.items.length > 0 ? res.content.items: []\r\n );\r\n resolve(res);\r\n },\r\n (err) => {\r\n reject(err);\r\n }\r\n );\r\n });\r\n }\r\n\r\n const onPagingClick = (data, isClearSearch = false) => {\r\n onGetListNews({\r\n keyword:keyword,\r\n pageIndex: data.pageIndex,\r\n pageSize: currentPageSizeDoing,\r\n isQHT: isQHT, \r\n isQHCC: isQHCC, \r\n isQHHTKT: isQHHTKT,\r\n }\r\n );\r\n };\r\n\r\n return (\r\n \r\n
\r\n {resultItem && questions && show && (\r\n \r\n {props.location &&\r\n props.location.search &&\r\n resultModel &&\r\n resultModel.length > 0 ? (\r\n
\r\n {resultModel && resultModel.length > 0 && pageCount > 1 && (\r\n {resultModel[0].planningName}
\r\n ) : (\r\nTổng hợp ý kiến Quy hoạch
\r\n )}\r\n\r\n\r\n Có {totalItemCountResult} kết quả\r\n
\r\n\r\n \r\n \r\n
\r\n
\r\n | STT | \r\nTên | \r\n\r\n Trạng thái\r\n | \r\n\r\n Thời gian bắt đầu\r\n | \r\n\r\n Thời gian kết thúc\r\n | \r\n\r\n Số phiếu\r\n | \r\n\r\n Chi tiết\r\n | \r\n
|---|---|---|---|---|---|---|
| {index + 1} | \r\n\r\n {item.title}\r\n \r\n {!props.location.search ? item.planningName : \"\"}\r\n | \r\n \r\n {!item.isExpired ? \"Đang xin ý kiến\" : \"Kết thúc\"}\r\n | \r\n\r\n {moment(new Date(item.startTime)).format(\"DD/MM/YYYY\")}\r\n | \r\n\r\n {moment(new Date(item.endTime)).format(\"DD/MM/YYYY\")}\r\n | \r\n{item.numberResult} | \r\n\r\n | \r\n
| \r\n Không có dữ liệu\r\n | \r\n
\r\n {\r\n onGetListExpiredForm({\r\n pageIndex: pageIndex,\r\n pageSize: currentPageSizeResult,\r\n });\r\n }}\r\n />\r\n
\r\n )}\r\n \r\n Kết quả Xin ý kiến về {resultItem.title} -{\" \"}\r\n {resultItem.planningName}\r\n
\r\n| \r\n Tổng số ý kiến: {resultItem.numberResult}\r\n | \r\n\r\n | \r\n
\r\n {`${indexQuestion + 1}. ${itemQuestion.title}`}\r\n
| \r\n
\r\n
\r\n \r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n isLoading: state.app.loading,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n showLoading: appActions.ShowLoading,\r\n },\r\n dispatch\r\n );\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(ListNewsView);\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\n\r\nimport * as appActions from \"../../core/app.store\";\r\nimport * as newsActions from \"../../redux/store/news/news.store\";\r\n\r\nimport {\r\n APIUrlDefault,\r\n DomainUserSide,\r\n} from \"../../utils/configuration\";\r\n\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport \"./detail.scss\";\r\nimport dateformat, { i18n } from \"dateformat\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faArrowLeft, faArrowRight } from \"@fortawesome/free-solid-svg-icons\";\r\n\r\nfunction NewsDetail(props) {\r\n const { showLoading } = props;\r\n\r\n i18n.dayNames = [\r\n \"Chủ nhật\",\r\n \"Thứ 2\",\r\n \"Thứ 3\",\r\n \"Thứ 4\",\r\n \"Thứ 5\",\r\n \"Thứ 6\",\r\n \"Thứ 7\",\r\n \"Chủ nhật\",\r\n \"Thứ 2\",\r\n \"Thứ 3\",\r\n \"Thứ 4\",\r\n \"Thứ 5\",\r\n \"Thứ 6\",\r\n \"Thứ 7\",\r\n ];\r\n \r\n i18n.monthNames = [\r\n \"1\",\r\n \"2\",\r\n \"3\",\r\n \"4\",\r\n \"5\",\r\n \"6\",\r\n \"7\",\r\n \"8\",\r\n \"9\",\r\n \"10\",\r\n \"11\",\r\n \"11\",\r\n \"1\",\r\n \"2\",\r\n \"3\",\r\n \"4\",\r\n \"5\",\r\n \"6\",\r\n \"7\",\r\n \"8\",\r\n \"9\",\r\n \"10\",\r\n \"11\",\r\n \"11\",\r\n ];\r\n\r\n const [newsModel, setNewsModel] = useState([]);\r\n const [newsDetail, setNewsDetail] = useState([]);\r\n const [currentPage, setCurrentPage] = useState();\r\n const [pagingNews, setPagingNews] = useState();\r\n const pageSize = 10;\r\n const {id} = props.match.params;\r\n\r\n useEffect(() => {\r\n onGetData();\r\n }, []);\r\n\r\n const onGetData = () => {\r\n showLoading(true);\r\n Promise.all([\r\n onGetListNews({\r\n pageIndex: 1,\r\n pageSize: pageSize\r\n }),\r\n onGetNewsDetail(id),\r\n ])\r\n .then((res) => {\r\n showLoading(false);\r\n })\r\n .catch((err) => {\r\n showLoading(false);\r\n });\r\n };\r\n\r\n const onGetNewsDetail = (id) => {\r\n return new Promise((resolve,reject) => {\r\n newsActions.GetDetailNews(id).then(\r\n (res) => {\r\n setNewsDetail(\r\n res && res.content\r\n );\r\n resolve(res);\r\n },\r\n (err) => {\r\n reject(err);\r\n }\r\n );\r\n\r\n })\r\n }\r\n\r\n const onGetListNews = (data) => {\r\n return new Promise((resolve, reject) => {\r\n newsActions.GetListNews(data).then(\r\n (res) => {\r\n setNewsModel(\r\n res &&\r\n res.content &&\r\n res.content.items\r\n && res.content.items.length > 0 ? res.content.items: []\r\n );\r\n setPagingNews(res.content);\r\n setCurrentPage(res.content.pageIndex);\r\n resolve(res);\r\n },\r\n (err) => {\r\n reject(err);\r\n }\r\n );\r\n });\r\n }\r\n\r\n const getNextPage = () => {\r\n let nextPage = 1;\r\n if(currentPage >0 ){\r\n nextPage = currentPage + 1;\r\n }\r\n onGetListNews({\r\n pageIndex: nextPage,\r\n pageSize: pageSize\r\n })\r\n }\r\n\r\n const getPreviousPage = () => {\r\n let prePage = 1;\r\n if(currentPage >1){\r\n prePage = currentPage - 1;\r\n }\r\n onGetListNews({\r\n pageIndex: prePage,\r\n pageSize: pageSize\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 {Array.isArray(listNews) && listNews.length >0 ? (\r\n listNews.map((item,index) => (\r\n index === 0 ? (\r\n
\r\n \r\n
\r\n ):(\r\n \r\n \r\n \r\n (e.target.src = require(\"../../assets/image/noImage.png\"))\r\n }\r\n alt={item.title}\r\n />\r\n \r\n
\r\n {item.title}\r\n {dateformat(item.created_date, \"dd/mm/yyyy\")}
\r\n \r\n \r\n \r\n \r\n
\r\n )))\r\n ):(\r\n Chưa có dữ liệu để hiển thị!
\r\n )}\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n TIN MỚI NHẤT\r\n \r\n
\r\n \r\n {listHotNews && listHotNews.length >0 ? (\r\n listHotNews.map((item,index) => (\r\n
\r\n \r\n \r\n
\r\n ))\r\n ):(\r\n \r\n {item.title}\r\n
\r\n {item.createDate}
\r\n Chưa có dữ liệu để hiển thị!
\r\n )}\r\n \r\n
\r\n \r\n {listNews && listNews.length > 0 && (\r\n
\r\n )}\r\n \r\n 1 ? \"float-left\" : \"\"\r\n }`}\r\n >\r\n Có {totalItemCountDoing} kết quả\r\n
\r\n {pageCountDoing && pageCountDoing > 1 && (\r\n \r\n {\r\n onPagingClick({\r\n pageIndex: pageIndex\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\nconst mapStateToProps = (state) => ({\r\n isLoading: state.app.loading,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n showLoading: appActions.ShowLoading,\r\n },\r\n dispatch\r\n );\r\n\r\nexport default (connect(mapStateToProps, mapDispatchToProps)(NewsDetail));\r\n","import React, { useEffect, useState } from \"react\";\r\nimport * as statementAction from \"../../../redux/store/statement/statement.store\";\r\nimport {Link} from \"react-router-dom\";\r\nimport UrlCollect from \"../../../common/url-collect\";\r\nimport * as configuration from \"../../../utils/configuration\";\r\n\r\nexport default function ServiceLink() {\r\n const [serviceModels, setServiceModels] = useState(null);\r\n\r\n useEffect(() => {\r\n statementAction\r\n .GetSerivceLink()\r\n .then(\r\n (res) =>\r\n res &&\r\n res.content &&\r\n res.content.linkGroup &&\r\n setServiceModels(res.content.linkGroup)\r\n )\r\n .catch((err) => {});\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 {newsDetail.title}\r\n
\r\n \r\n {dateformat(newsDetail.created_date, \"ddd, dd/mmm/yyyy, HH:MM:ss\")}\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {\r\n pagingNews && pagingNews.hasPreviousPage && (\r\n \r\n
\r\n \r\n {newsModel && newsModel.length >0 ? (\r\n newsModel.filter(item => item.id != newsDetail.id).map((item,index) => (\r\n
\r\n \r\n \r\n \r\n
\r\n ))\r\n ):(\r\n Chưa có dữ liệu để hiển thị!
\r\n )}\r\n\r\n \r\n
\r\n );\r\n}\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport UrlCollect from \"../../../common/url-collect\";\r\nimport * as statementAction from \"../../../redux/store/statement/statement.store\";\r\nimport * as configuration from \"../../../utils/configuration\";\r\n\r\nimport MapLink from \"./map-link.view\";\r\nimport ServiceLink from \"./service-link.view\";\r\n\r\nexport default function MenuRightView(props) {\r\n const [serviceModels, setServiceModels] = useState(null);\r\n\r\n useEffect(() => {\r\n statementAction\r\n .GetSerivceLink()\r\n .then(\r\n (res) =>\r\n res &&\r\n res.content &&\r\n res.content.linkGroup &&\r\n setServiceModels(res.content.linkGroup)\r\n )\r\n .catch((err) => {});\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n {serviceModels &&\r\n serviceModels.map((items) =>\r\n items.displayType === \"MAP\" && (\r\n \r\n \r\n BẢN ĐỒ TỔNG HỢP QUY HOẠCH\r\n \r\n
\r\n \r\n
\r\n )\r\n )}\r\n \r\n
\r\n \r\n {items.linkService &&\r\n items.linkService.length > 0 &&\r\n items.linkService.map((linkService, index1) => (\r\n
\r\n \r\n
\r\n );\r\n}\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faSearch,\r\n faEraser,\r\n faExclamationTriangle,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\nimport { Link } from \"react-router-dom\";\r\nimport Select from \"react-select\";\r\nimport $ from \"jquery\";\r\n\r\nimport * as statementAction from \"../../redux/store/statement/statement.store\";\r\nimport * as appActions from \"../../core/app.store\";\r\n\r\nimport UrlCollect from \"../../common/url-collect\";\r\nimport MenuRightView from \"./menu-right/menu-right.view\";\r\nimport * as config from \"../../common/config\";\r\nimport Pagination from \"../../components/pagination/pagination.view\";\r\nimport ShowNotification from \"../../components/react-notifications/react-notifications\";\r\nimport {\r\n NotificationMessageType,\r\n NotificationPosition,\r\n} from \"../../utils/configuration\";\r\nimport * as viVN from \"../../languages/vi-VN.json\";\r\nimport * as configuration from \"../../utils/configuration\";\r\n\r\nimport \"./planning-announcement.scss\";\r\nimport \"@geedmo/yamm/src/yamm.scss\";\r\n\r\nfunction PlanningAnnouncementDesktopView(props) {\r\n const { showLoading } = props;\r\n const [statementModels, setStatementModels] = useState([]);\r\n const [paginationNumber, setPaginationNumber] = useState();\r\n const [planningType, setPanningType] = useState([]);\r\n const [planningTypeSelect, setPanningTypeSelect] = useState(null);\r\n const [approvalAgencyLevel, setApprovalAgencyLevel] = useState([]);\r\n const [approvalAgencyLevelSelect, setApprovalAgencyLevelSelect] = useState(\r\n null\r\n );\r\n const [planningTypeId, setPlanningTypeId] = useState();\r\n const [approvalAgency, setApprovalAgency] = useState();\r\n const [data, setData] = useState({});\r\n\r\n const [isShowSearch, setIsShowSearch] = useState(false);\r\n\r\n const { register, handleSubmit, setValue } = useForm({\r\n mode: \"all\",\r\n reValidateMode: \"onBlur\",\r\n });\r\n\r\n useEffect(() => {\r\n onGetData();\r\n }, []);\r\n\r\n const onGetData = () => {\r\n showLoading(true);\r\n Promise.all([\r\n getListStatementModelsPromise(1, config.Configs.DefaultPageSize, \"\", {}),\r\n getPlanningType(),\r\n getApprovalAgencyLevel(),\r\n ])\r\n .then((res) => {\r\n showLoading(false);\r\n })\r\n .catch((err) => {\r\n showLoading(false);\r\n });\r\n };\r\n\r\n const getListStatementModelsPromise = (\r\n pageIndex,\r\n pageSize,\r\n sortExpression = \"\",\r\n body\r\n ) => {\r\n return new Promise((resolve, reject) => {\r\n statementAction\r\n .SearchPlanning(pageIndex, pageSize, sortExpression, body)\r\n .then((res) => {\r\n setStatementModels(\r\n res &&\r\n res.content &&\r\n res.content.items &&\r\n res.content.items.length > 0\r\n ? res.content.items\r\n : []\r\n );\r\n setPaginationNumber(res.content);\r\n resolve(res);\r\n })\r\n .catch((err) => reject(err));\r\n });\r\n };\r\n\r\n const getPlanningType = () => {\r\n return new Promise((resolve, reject) => {\r\n statementAction\r\n .PlanningType()\r\n .then((res) => {\r\n setPanningType(\r\n res && res.content && res.content.length > 0\r\n ? res.content.map((item) => {\r\n return { ...item, value: item.id, label: item.name };\r\n })\r\n : []\r\n );\r\n resolve(res);\r\n })\r\n .catch((err) => reject(err));\r\n });\r\n };\r\n\r\n const getApprovalAgencyLevel = () => {\r\n return new Promise((resolve, reject) => {\r\n statementAction\r\n .ApprovalAgencyLevel()\r\n .then((res) => {\r\n setApprovalAgencyLevel(\r\n res && res.content && res.content.length > 0\r\n ? res.content.map((item) => {\r\n return { ...item, value: item.id, label: item.name };\r\n })\r\n : []\r\n );\r\n resolve(res);\r\n })\r\n .catch((err) => reject(err));\r\n });\r\n };\r\n\r\n const getListStatementModels = (\r\n pageIndex = 1,\r\n pageSize = config.Configs.DefaultPageSize,\r\n sortExpression = \"\",\r\n body = data\r\n ) => {\r\n showLoading(true);\r\n statementAction\r\n .SearchPlanning(pageIndex, pageSize, \"\", body)\r\n .then((res) => {\r\n if (\r\n res &&\r\n res.content &&\r\n res.content.items &&\r\n res.content.items.length > 0\r\n ) {\r\n setStatementModels(res.content.items);\r\n setPaginationNumber(res.content);\r\n showLoading(false);\r\n } else {\r\n showLoading(false);\r\n ShowNotification(\r\n viVN.Warning.NoData,\r\n NotificationMessageType.Warning,\r\n NotificationPosition.Center\r\n );\r\n }\r\n })\r\n .catch((err) => {\r\n showLoading(false);\r\n });\r\n };\r\n\r\n const onStopHiddenDropdown = (e) => {\r\n $(document).on(\"click\", \".yamm .dropdown-menu\", function (e) {\r\n e.stopPropagation();\r\n });\r\n };\r\n\r\n function clearDataForm() {\r\n setPanningTypeSelect(null);\r\n setApprovalAgencyLevelSelect(null);\r\n document.getElementById(\"dropdownToggle\").click();\r\n document.getElementById(\"formSearch\").reset();\r\n document.getElementById(\"search\").value = \"\";\r\n getListStatementModels(1, config.Configs.DefaultPageSize, \"\", {});\r\n setIsShowSearch(false);\r\n }\r\n\r\n const onSubmit = (data) => {\r\n setIsShowSearch(false);\r\n document.getElementById(\"dropdownToggle\").click();\r\n if (!data) return;\r\n let body = {\r\n name: data.planningName,\r\n planningTypeId: planningTypeId,\r\n place: data.address,\r\n consultingUnit: data.consultingUnit,\r\n numberOfDecisions: data.decisionsNumber,\r\n yearOfApproval: Number(data.approvalYear),\r\n approvalAgency: data.approvalAgency,\r\n planningAgency: data.agenciesOrganizations,\r\n approvalAgencyLevelId: approvalAgency,\r\n };\r\n setData({...data,...body});\r\n getListStatementModels(1, config.Configs.DefaultPageSize, \"\", body);\r\n };\r\n\r\n const handleKeyDown = (event) => {\r\n if (event.key === \"Enter\") {\r\n setValue(\"planningName\", event.target.value);\r\n setData({ ...data, name: event.target.value }) \r\n showLoading(true);\r\n statementAction\r\n .SearchPlanning(1, config.Configs.DefaultPageSize, \"\", {\r\n name: event.target.value,\r\n })\r\n .then((res) => {\r\n if (\r\n res &&\r\n res.content &&\r\n res.content.items &&\r\n res.content.items.length > 0\r\n ) {\r\n setStatementModels(res.content.items);\r\n setPaginationNumber(res.content);\r\n showLoading(false);\r\n } else {\r\n ShowNotification(\r\n viVN.Warning.NoData,\r\n NotificationMessageType.Warning,\r\n NotificationPosition.Center\r\n );\r\n showLoading(false);\r\n }\r\n })\r\n .catch((err) => {\r\n showLoading(false);\r\n });\r\n }\r\n };\r\n\r\n const handleClickSearchIcon = () => {\r\n setIsShowSearch(!isShowSearch);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n}\r\nconst mapStateToProps = (state) => ({\r\n isLoading: state.app.loading,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n showLoading: appActions.ShowLoading,\r\n },\r\n dispatch\r\n );\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(PlanningAnnouncementDesktopView);\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport MenuRightView from \"../menu-right/menu-right.view\";\r\nimport * as statementAction from \"../../../redux/store/statement/statement.store\";\r\nimport \"./planning-announcement-detail.scss\";\r\nimport * as apiConfig from '../../../api/api-config';\r\nimport PageUrls from '../../../common/url-collect';\r\n\r\nexport default function PlanningAnnouncementDetailDesktopView(props) {\r\n const [statementModel, setStatementModel] = useState();\r\n\r\n useEffect(() => {\r\n if (props && props.match && props.match.params && props.match.params.id) {\r\n statementAction\r\n .GetDetailStatement(props.match.params.id)\r\n .then((res) => res && res.content && setStatementModel(res.content))\r\n .catch((err) => { });\r\n }\r\n }, []);\r\n\r\n console.log(\"statementModelstatementModelstatementModel\",statementModel);\r\n\r\n return (\r\n \r\n
\r\n )}\r\n \r\n
\r\n\r\n {paginationNumber && paginationNumber.totalItemCount > 0 && (\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n\r\n \r\n {statementModels && statementModels.length > 0 ? (\r\n statementModels.map((items, index) =>\r\n index === 0 ? (\r\n
\r\n \r\n \r\n \r\n
\r\n\r\n
\r\n ) : (\r\n \r\n \r\n {items.title}\r\n \r\n
\r\n\r\n {items.brief}
\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 {items.title}\r\n \r\n
\r\n {items.brief}
\r\n\r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n 1 ? \"float-left\" : \"\"\r\n }`}\r\n >\r\n \r\n Có {paginationNumber.totalItemCount} kết quả\r\n \r\n
\r\n {paginationNumber.pageCount > 1 && (\r\n \r\n
\r\n )}\r\n \r\n
\r\n );\r\n}\r\n","import React, { useState } from \"react\";\r\nimport \"./left-menu.scss\";\r\nimport UrlCollect from \"../../../common/url-collect\";\r\nimport { Link } from \"react-router-dom\";import { connect } from \"react-redux\";\r\nimport PlanningCategoriesModel from \"../../../models/map-data-model-b/planning-categories-model\";\r\nimport OpenlayerController from \"../../../models/open-layer/openlayer-controller-custom.model\";\r\nimport history from \"../../../common/history\";\r\nimport { SearchByDistrict } from \"../../look-up-planning/child-modules/planning-district/search-district.view\";\r\n\r\ninterface InitLeftMenuViewProps {\r\n isDisplaySearchResult: boolean;\r\n resetSearchDisplayMode: Function;\r\n listPlanningCategoriesAll?: PlanningCategoriesModel[];\r\n openLayerController?: OpenlayerController;\r\n planningType: any;\r\n listPolygon: any;\r\n}\r\n\r\nfunction LeftMenuView(props: InitLeftMenuViewProps) {\r\n const [districtSelect, setDistrictSelect] = useState('');\r\n const [planningUnitSelect, setPlanningUnitSelect] = useState('');\r\n const [approvalAgencySelect, setApprovalAgencySelect] = useState('');\r\n const [name, setName] = useState('');\r\n const [yearSearch, setYearSearch] = useState(null);\r\n const [numberOfDecisions, setNumberOfDecisions] = useState('');\r\n const [constructionGroup, setConstructionGroup] = useState('');\r\n\r\n function handleResetDisplaySearchMode() {\r\n if (props.isDisplaySearchResult) props.resetSearchDisplayMode();\r\n }\r\n \r\n const onSubmit = () => {\r\n history.push(`${UrlCollect.PlanningMapViewDetail}?key=&name=${name}&district=${districtSelect}&planningUnit=${planningUnitSelect}&approvalAgency=${approvalAgencySelect}&yearSearch=${yearSearch}&numberOfDecisions=${numberOfDecisions}&constructionGroup=${constructionGroup}`)\r\n };\r\n \r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {statementModel && (\r\n
\r\n \r\n \r\n {statementModel.statementDocumentFile && (\r\n \r\n Xem quyết định phê duyệt tại đây ./.\r\n \r\n )}\r\n
\r\n {statementModel.planningId && (\r\n \r\n Xem bản đồ đồ án tại đây ./.\r\n \r\n )}\r\n
\r\n )}\r\n {statementModel.title}
\r\n\r\n {statementModel.planningId && (\r\n \r\n Xem bản đồ đồ án tại đây ./.\r\n \r\n )}\r\n
\r\n handleResetDisplaySearchMode()}\r\n >\r\n Tổng hợp quy hoạch\r\n
\r\n\r\n {props.planningType.map((item: any) => (\r\n \r\n setDistrictSelect(data)}\r\n setPlanningUnitSelect={setPlanningUnitSelect}\r\n setApprovalAgencySelect={setApprovalAgencySelect}\r\n name={name}\r\n setName={setName}\r\n yearSearch={yearSearch}\r\n setYearSearch={setYearSearch}\r\n numberOfDecisions={numberOfDecisions}\r\n setNumberOfDecisions={setNumberOfDecisions}\r\n constructionGroup={constructionGroup}\r\n setConstructionGroup={setConstructionGroup}\r\n />\r\n
\r\n \r\n \r\n {props.titleGroup}\r\n \r\n {props.isDisplaySearchResult &&\r\n props.listLayers &&\r\n props.listLayers.length > 0 && (\r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state: any) => ({\r\n listPlanningCategoriesAll: state.mapData.listPlanningCategoriesAll,\r\n openLayerController: state.openlayer.openLayerController,\r\n planningType: state.statement.planningType,\r\n listPolygon: state.mapData.listPolygon,\r\n});\r\n\r\nexport default connect(mapStateToProps)(LeftMenuView);\r\n","import React from \"react\";\r\nimport \"./general-planning.scss\";\r\nimport TopRightPanelView from \"../planning-map-view/top-right-panel/top-right-panel.view\";\r\nimport LeftMenuView from \"./left-menu/left-menu.view\";\r\nimport OpenlayersMapView from \"../openlayers-map/openlayers-map.view\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport * as MapDataStore from \"../../redux/store/map-data/map-data.store\";\r\nimport { GeneralPlanningViewProps, GeneralPlanningViewState, } from \"../../models/general-planning-view/props-state.model\";\r\nimport {isMobile} from 'react-device-detect';\r\nimport MapToolsPanel from \"../planning-map-view/map-tools-panel/map-tools-panel.view\";\r\nimport { SetDisplayMaptoolPanel } from \"redux/store/open-layer/map-tools-panels.store\";\r\n// ./map-tools-panel/map-tools-panel.view.jsx\r\n\r\nconst ListBaseMap: any[] = [\r\n {\r\n base_map_setting_id: 0,\r\n id: 1,\r\n map_setting_id: 1,\r\n url: \"https://mt0.google.com/vt/lyrs=m&hl=vi&x={x}&y={y}&z={z}\",\r\n view_default: true,\r\n z_index: 0,\r\n name: \"Bản đồ nền đường phố\",\r\n baseMapSettingModel: {\r\n id: 0,\r\n layer_type: \"\",\r\n status: true,\r\n url: \"\",\r\n },\r\n },\r\n {\r\n base_map_setting_id: 0,\r\n id: 1,\r\n map_setting_id: 1,\r\n url: \"https://mt0.google.com/vt/lyrs=y&hl=vi&x={x}&y={y}&z={z}\",\r\n view_default: true,\r\n z_index: 0,\r\n name: \"Bản đồ vệ tinh\",\r\n baseMapSettingModel: {\r\n id: 0,\r\n layer_type: \"\",\r\n status: true,\r\n url: \"\",\r\n },\r\n },\r\n {\r\n base_map_setting_id: 0,\r\n id: 1,\r\n map_setting_id: 1,\r\n url: \"\",\r\n view_default: true,\r\n z_index: 0,\r\n name: \"Không nền\",\r\n baseMapSettingModel: {\r\n id: 0,\r\n layer_type: \"\",\r\n status: true,\r\n url: \"\",\r\n },\r\n },\r\n];\r\n\r\nconst fixedLayerTablename = [\r\n {\r\n tableName : 'boundaries',\r\n isAddedLayer : false,\r\n zIndex: 10,\r\n },\r\n {\r\n tableName : 'label_boundaries',\r\n isAddedLayer : false,\r\n zIndex: 15,\r\n },\r\n {\r\n tableName : 'diaphantinh_wgs84',\r\n isAddedLayer : false,\r\n zIndex: 5,\r\n }\r\n];\r\nclass GeneralPlanningView extends React.Component\r\n {props.listLayers.map((layerObject, index) => (\r\n \r\n {layerObject.name}\r\n \r\n ))}\r\n
\r\n )}\r\n \r\n {/* Top right panel*/}\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state: any) => ({\r\n hasLoadedMapData: state.mapData.hasLoadingData,\r\n mapData: state.mapData.mapData,\r\n planningRelationShips: state.mapData.planningRelationShips,\r\n listPlanning: state.mapData.listPlanning,\r\n listPlanningCategoriesAll: state.mapData.listPlanningCategoriesAll,\r\n openLayerController: state.openlayer.openLayerController,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch: any) =>\r\n bindActionCreators(\r\n {\r\n SetDisplayMaptoolPanel: SetDisplayMaptoolPanel,\r\n GetMapDetail: MapDataStore.GetMapDetailByPlanningId,\r\n GetAllPlanningCategoriesType: MapDataStore.GetAllPlanningCategoriesType,\r\n GetAllPlanning: MapDataStore.GetAllPlanning,\r\n GetAllPlanningBoundaries: MapDataStore.GetAllPlanningBoundaries,\r\n SaveHeaderForTable: MapDataStore.SaveHeaderForTable,\r\n },\r\n dispatch\r\n );\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(GeneralPlanningView);\r\n","//@ts-check\r\nimport React from 'react';\r\nimport './page-500.scss';\r\n\r\n/**\r\n * @param {{history:any,match:{params:{id:string}}}} props\r\n*/\r\nfunction ErrorPage500(props) {\r\n return (\r\n \r\n
\r\n\r\n {/* Open layer view port */}\r\n \r\n {/* this.handleShowHidePlanningMenu()}\r\n className=\"custom-button-left-menu btn position-absolute\"\r\n title=\"Các lớp quy hoạch\"\r\n >\r\n this.setState({ isDisplaySearchResult: false })}\r\n isDisplaySearchResult={this.state.isDisplaySearchResult}\r\n />\r\n
\r\n \r\n \r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default ErrorPage500","import \"./user-profile.scss\";\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\nimport Form from \"react-bootstrap/Form\";\r\nimport * as accountAction from \"../../redux/store/account/account.store\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport PhoneInput from \"react-phone-input-2\";\r\nimport ShowNotification from \"../../components/react-notifications/react-notifications\";\r\nimport {\r\n APIUrlDefault,\r\n NotificationMessageType,\r\n} from \"../../utils/configuration\";\r\nimport * as viVN from \"../../languages/vi-VN.json\";\r\nimport { LayoutAuthen } from \"components/layout-authen\";\r\n\r\nexport const UserProfile = () => {\r\n const {\r\n register,\r\n handleSubmit,\r\n setValue,\r\n setError,\r\n clearErrors,\r\n formState: { errors },\r\n } = useForm();\r\n const [tel, setTel] = useState(\"\");\r\n const [userId, setUserId] = useState();\r\n const [avatar, setAvatar] = useState(null);\r\n const [file, setFile] = useState(null);\r\n const [avatarReturn, setAvatarReturn] = useState(null);\r\n const [fullName, setFullName] = useState(\"\");\r\n const inputRef = useRef(null);\r\n\r\n const onCheckTel = (data) => {\r\n let err = false;\r\n if (!data) {\r\n setError(\"phoneNumber\", { type: \"required\" });\r\n err = true;\r\n } else if (data.toString().length < 10) {\r\n setError(\"phoneNumber\", { type: \"pattern\" });\r\n err = true;\r\n } else clearErrors([\"phoneNumber\"]);\r\n setTel(data);\r\n return err;\r\n };\r\n\r\n const getUserInfo = () => {\r\n accountAction.GetUserAccountDetail().then((res) => {\r\n setUserId(res?.content?.id);\r\n setValue(\"fullName\", res?.content?.fullName);\r\n setValue(\"email\", res?.content?.email);\r\n setValue(\"phoneNumber\", res?.content?.phoneNumber);\r\n setValue(\"address\", res?.content?.address);\r\n setAvatarReturn(res?.content?.avatar);\r\n setTel(res?.content?.phoneNumber);\r\n setFullName(res?.content?.fullName);\r\n });\r\n };\r\n const onSubmit = (values) => {\r\n const payload = {\r\n id: userId,\r\n fullName: values.fullName,\r\n email: values.email,\r\n phoneNumber: values.phoneNumber,\r\n address: values.address,\r\n file: avatar,\r\n };\r\n accountAction\r\n .UpdateUserAccount(payload)\r\n .then((res) => {\r\n if (res && res.content) {\r\n ShowNotification(\r\n viVN.Success.ChangeUserInfoSuccess,\r\n NotificationMessageType.Success\r\n );\r\n setFullName(values.fullName);\r\n }\r\n })\r\n .catch((err) => {\r\n console.log(err);\r\n ShowNotification(\r\n viVN.Errors[(err && err.errorType) || \"UnableHandleException\"],\r\n NotificationMessageType.Error\r\n );\r\n });\r\n };\r\n\r\n const handleChangeImage = (event) => {\r\n if (event.target.files[0]) {\r\n setFile(URL.createObjectURL(event.target.files[0]));\r\n setAvatar(event.target.files[0]);\r\n setAvatarReturn(null);\r\n }\r\n };\r\n\r\n const handleClickUpload = () => {\r\n inputRef.current.click();\r\n };\r\n\r\n useEffect(() => {\r\n getUserInfo();\r\n }, []);\r\n\r\n return (\r\n \r\n );\r\n};\r\n","import React, { useRef, useState } from \"react\";\r\nimport Form from \"react-bootstrap/Form\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faEye, faEyeSlash } from \"@fortawesome/free-solid-svg-icons\";\r\nimport * as accountAction from \"../../redux/store/account/account.store\";\r\nimport * as viVN from \"../../languages/vi-VN.json\";\r\nimport \"./change-password.scss\";\r\nimport {\r\n getUserInfo,\r\n NotificationMessageType,\r\n} from \"../../utils/configuration\";\r\nimport ShowNotification from \"../../components/react-notifications/react-notifications\";\r\n\r\nexport const ChangePassword = () => {\r\n const [oldPasswordShown, setOldPasswordShown] = useState(false);\r\n const [newPasswordShown, setNewPasswordShown] = useState(false);\r\n const [confirmPasswordShown, setConfirmPasswordShown] = useState(false);\r\n const {\r\n register,\r\n handleSubmit,\r\n setError,\r\n clearErrors,\r\n formState: { errors },\r\n getValues,\r\n watch,\r\n } = useForm({ mode: \"all\", reValidateMode: \"onBlur\" });\r\n\r\n const password = useRef({});\r\n password.current = watch(\"newPassword\", \"\");\r\n\r\n const onChangePassword = () => {\r\n const { newPassword, confirmPassword } = getValues();\r\n newPassword === confirmPassword\r\n ? clearErrors([\"confirmPassword\"])\r\n : setError(\"confirmPassword\", { type: \"validate\" });\r\n };\r\n\r\n const onSubmit = (values) => {\r\n const userInfo = getUserInfo();\r\n const payload = {\r\n userId: userInfo.userId,\r\n currentPassword: values.oldPassword,\r\n newPassword: values.newPassword,\r\n };\r\n\r\n accountAction\r\n .ChangeUserPassword(payload)\r\n .then((res) => {\r\n if (res && res.content) {\r\n ShowNotification(\r\n viVN.Success.ResetPasswordSuccess,\r\n NotificationMessageType.Success\r\n );\r\n }\r\n })\r\n .catch((err) => {\r\n ShowNotification(\r\n viVN.Errors[(err && err.errorType) || \"UnableHandleException\"],\r\n NotificationMessageType.Error\r\n );\r\n });\r\n };\r\n\r\n return (\r\n \r\n );\r\n};\r\n","import React from 'react';\r\nimport { Router, Switch } from 'react-router-dom';\r\nimport RouteComponent from './route-config.jsx';\r\nimport history from './common/history';\r\nimport UrlCollect from './common/url-collect';\r\nimport AppWrapper from './components/app-wrapper/app-wrapper.view';\r\n\r\n//--- Loading\r\nimport AppLoading from './components/loading/loading.view';\r\n\r\n//--- Layout\r\nimport LayoutQLHSAuthen from 'components/layout/layout-qlhs.view.jsx';\r\nimport LayoutDesktopView from './components/layout/layout.view.jsx';\r\nimport LayoutUserDesktopView from './components/layout/layout-user.view.jsx';\r\nimport LayoutMapPageView from './components/layout-map-page/layout-map-page.view.jsx';\r\nimport LayoutProfileView from './components/layout-profile/layout-profile.view';\r\n\r\n//--- Homepage\r\nimport HomeDesktop from './modules/home/home.view.jsx';\r\nimport RecordsManagementDesktopView from './modules/records-management/records-management.view.jsx';\r\nimport ContactDesktopView from './modules/contact/contact.view.jsx';\r\nimport LookUpPlanningView from './modules/look-up-planning/look-up-planning.view';\r\nimport PlanningMapRoute from './modules/planning-map-route/planning-map-route.js';\r\n\r\n// Reflect\r\nimport ReflectsView from './modules/reflects/reflects.view.jsx';\r\nimport ReflectsByCategoryView from './modules/reflects/reflects-by-category/reflects-by-category.view.jsx';\r\nimport ReflectDetailView from './modules/reflects/reflect-detail/reflect-detail.view';\r\nimport MyReflectView from './modules/reflects/my-reflect-page/my-reflect.view';\r\nimport CreateReflectView from './modules/reflects/create-reflect-page/create-reflect.view'\r\nimport ReflectMapView from './modules/reflects/reflect-map-page/reflect-map.view'\r\n\r\n//-- User\r\nimport ResetPasswordDesktop from './modules/reset-password/reset-password.view';\r\n\r\n//--- Xin y kien cong dong\r\nimport PleaseConsultTheCommunityDesktopView from './modules/please-consult-the-community/please-consult-the-community.view.jsx';\r\nimport PleaseCommentView from './modules/please-consult-the-community/please-comment/please-comment.view.jsx';\r\nimport SummaryIdeasView from './modules/please-consult-the-community/summary-ideas/summary-ideas.view.jsx';\r\n\r\n//-- Tin tuc\r\n\r\nimport NewsListView from './modules/news/list.view.jsx';\r\nimport NewsDetailView from './modules/news/detail.view.jsx';\r\n\r\n//--- Cong bo quy hoach\r\nimport PlanningAnnouncementDesktopView from './modules/planning-announcement/planning-announcement.view.jsx';\r\nimport PlanningAnnouncementDetailDesktopView from './modules/planning-announcement/planning-announcement-detail/planning-announcement-detail.view.jsx';\r\nimport GeneralPlanningView from './modules/general-planning/general-planning.view.tsx';\r\n\r\n//--- Error pages\r\nimport ErrorPage500 from './modules/error-page/page-500/page-500';\r\nimport { UserProfile } from './modules/user-profile/user-profile.js';\r\nimport { ChangePassword } from './modules/user-profile/change-password.js';\r\nimport { LayoutAuthen } from 'components/layout-authen/index.js';\r\nimport ReactGA from 'react-ga';\r\n\r\nconst TRACKING_ID = \"G-5KY3T0QRSP\";\r\n\r\nfunction App() {\r\n ReactGA.initialize(TRACKING_ID);\r\n\r\n return (\r\n 500
\r\n| Error type | \r\n{props.match.params.id} | \r\n
| \r\n | \r\n |
\r\n \r\n \r\n \r\n {/* Desktop */}\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default App;\r\n","// This optional code is used to register a service worker.\r\n// register() is not called by default.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on subsequent visits to a page, after all the\r\n// existing tabs open on the page have been closed, since previously cached\r\n// resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model and instructions on how to\r\n// opt-in, read https://bit.ly/CRA-PWA\r\n\r\nconst isLocalhost = Boolean(\r\n window.location.hostname === 'localhost' ||\r\n // [::1] is the IPv6 localhost address.\r\n window.location.hostname === '[::1]' ||\r\n // 127.0.0.0/8 are considered localhost for IPv4.\r\n window.location.hostname.match(\r\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\r\n )\r\n);\r\n\r\ntype Config = {\r\n onSuccess?: (registration: ServiceWorkerRegistration) => void;\r\n onUpdate?: (registration: ServiceWorkerRegistration) => void;\r\n};\r\n\r\nexport function register(config?: Config) {\r\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n // The URL constructor is available in all browsers that support SW.\r\n const publicUrl = new URL(\r\n process.env.PUBLIC_URL,\r\n window.location.href\r\n );\r\n if (publicUrl.origin !== window.location.origin) {\r\n // Our service worker won't work if PUBLIC_URL is on a different origin\r\n // from what our page is served on. This might happen if a CDN is used to\r\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\r\n return;\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n\r\n if (isLocalhost) {\r\n // This is running on localhost. Let's check if a service worker still exists or not.\r\n checkValidServiceWorker(swUrl, config);\r\n\r\n // Add some additional logging to localhost, pointing developers to the\r\n // service worker/PWA documentation.\r\n navigator.serviceWorker.ready.then(() => {\r\n // console.log(\r\n // 'This web app is being served cache-first by a service ' +\r\n // 'worker. To learn more, visit https://bit.ly/CRA-PWA'\r\n // );\r\n });\r\n } else {\r\n // Is not localhost. Just register service worker\r\n registerValidSW(swUrl, config);\r\n }\r\n });\r\n }\r\n}\r\n\r\nfunction registerValidSW(swUrl: string, config?: Config) {\r\n navigator.serviceWorker\r\n .register(swUrl)\r\n .then(registration => {\r\n registration.onupdatefound = () => {\r\n const installingWorker = registration.installing;\r\n if (installingWorker == null) {\r\n return;\r\n }\r\n installingWorker.onstatechange = () => {\r\n if (installingWorker.state === 'installed') {\r\n if (navigator.serviceWorker.controller) {\r\n // At this point, the updated precached content has been fetched,\r\n // but the previous service worker will still serve the older\r\n // content until all client tabs are closed.\r\n // console.log(\r\n // 'New content is available and will be used when all ' +\r\n // 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\r\n // );\r\n\r\n // Execute callback\r\n if (config && config.onUpdate) {\r\n config.onUpdate(registration);\r\n }\r\n } else {\r\n // At this point, everything has been precached.\r\n // It's the perfect time to display a\r\n // \"Content is cached for offline use.\" message.\r\n // console.log('Content is cached for offline use.');\r\n\r\n // Execute callback\r\n if (config && config.onSuccess) {\r\n config.onSuccess(registration);\r\n }\r\n }\r\n }\r\n };\r\n };\r\n })\r\n .catch(error => {\r\n console.error('Error during service worker registration:', error);\r\n });\r\n}\r\n\r\nfunction checkValidServiceWorker(swUrl: string, config?: Config) {\r\n // Check if the service worker can be found. If it can't reload the page.\r\n fetch(swUrl, {\r\n headers: { 'Service-Worker': 'script' }\r\n })\r\n .then(response => {\r\n // Ensure service worker exists, and that we really are getting a JS file.\r\n const contentType = response.headers.get('content-type');\r\n if (\r\n response.status === 404 ||\r\n (contentType != null && contentType.indexOf('javascript') === -1)\r\n ) {\r\n // No service worker found. Probably a different app. Reload the page.\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister().then(() => {\r\n window.location.reload();\r\n });\r\n });\r\n } else {\r\n // Service worker found. Proceed as normal.\r\n registerValidSW(swUrl, config);\r\n }\r\n })\r\n .catch(() => {\r\n // console.log(\r\n // 'No internet connection found. App is running in offline mode.'\r\n // );\r\n });\r\n}\r\n\r\nexport function unregister() {\r\n if ('serviceWorker' in navigator) {\r\n navigator.serviceWorker.ready\r\n .then(registration => {\r\n registration.unregister();\r\n })\r\n .catch(error => {\r\n console.error(error.message);\r\n });\r\n }\r\n}\r\n","import { combineReducers } from \"redux\";\r\nimport AccountReducers from \"./store/account/account.store\";\r\nimport MapToolsPanelReducers from \"./store/open-layer/map-tools-panels.store\";\r\nimport AppReducer from \"../core/app.store\";\r\nimport LoadingReducer from \"../redux/store/loading/loading.store\";\r\nimport MapDataReducer from \"./store/map-data/map-data.store\";\r\nimport OpenLayerReducer from \"./store/open-layer/open-layer.store\";\r\nimport StatementReducer from \"./store/statement/statement.store\";\r\nimport MapToolDataReducer from \"./store/map-tool/map-tool.store\";\r\n\r\nexport default combineReducers({\r\n app: AppReducer,\r\n account: AccountReducers,\r\n mapToolsPanel: MapToolsPanelReducers,\r\n loadingState: LoadingReducer,\r\n mapData: MapDataReducer,\r\n openlayer: OpenLayerReducer,\r\n statement: StatementReducer,\r\n mapToolData: MapToolDataReducer,\r\n});\r\n","import { createStore, applyMiddleware } from 'redux';\r\nimport Reducer from './reducer';\r\nimport thunk from 'redux-thunk';\r\n\r\nexport default createStore(Reducer,{}, applyMiddleware(thunk))","import { unstable_createMuiStrictModeTheme as createTheme } from '@material-ui/core/styles';\r\n\r\nconst theme = createTheme({\r\n breakpoints: {\r\n values: {\r\n xs: 0,\r\n sm: 576,\r\n md: 768,\r\n lg: 992,\r\n xl: 1200,\r\n },\r\n },\r\n});\r\n\r\nexport default theme;\r\n","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport App from \"./App\";\r\nimport * as serviceWorker from \"./serviceWorker\";\r\nimport \"bootstrap/dist/js/bootstrap.js\";\r\nimport \"bootstrap/dist/css/bootstrap.min.css\";\r\nimport \"./assets/styles/common.scss\";\r\nimport { Provider } from \"react-redux\";\r\nimport GlobalStore from \"./redux/store\";\r\nimport { ThemeProvider } from '@material-ui/core/styles';\r\nimport theme from \"./common/material-ui-theme-config\"\r\nimport AppWrapper from './components/app-wrapper/app-wrapper.view'\r\n\r\nimport ReactNotification from \"react-notifications-component\";\r\nimport \"react-notifications-component/dist/theme.css\";\r\nimport \"./components/react-notifications/_customTypes.scss\";\r\n\r\nexport const store = GlobalStore;\r\n\r\nReactDOM.render(\r\n \r\n \r\n data.action()}\r\n style={styleCustom}\r\n >\r\n \r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n isDisplayPanel: state.mapToolsPanel.displayPanel,\r\n openLayerController: state.openlayer.openLayerController,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n SetDisplayInfomationPopup: MapToolsPanelsStore.SetDisplayInfomationPopup,\r\n },\r\n dispatch\r\n );\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(MapToolsPanel);\r\n","import React, { useState, useEffect } from \"react\";\r\nimport Select from \"react-select\";\r\nimport \"./select-current-layer.scss\";\r\nimport LayerSettingsModels from \"../../../models/map-data-model-b/layer-setting-models\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport OpenlayerController from \"../../../models/open-layer/openlayer-controller-custom.model\";\r\nimport LayerCategoryModels from \"models/map-data-model-b/layer-category-models\";\r\nimport * as MapToolDataStore from \"../../../redux/store/map-tool/map-tool.store\";\r\n\r\ninterface LayerSettingsModelExtends\r\n extends LayerSettingsModels.LayerSettingsModel {\r\n label: string;\r\n value: string;\r\n opacity: string;\r\n}\r\n\r\ninterface InitProps {\r\n listLayers: LayerSettingsModels.LayerSettingsModel[];\r\n openLayerController?: OpenlayerController;\r\n dataToggleLayer?: LayerCategoryModels.LayerCategoryModel[];\r\n UpdateDataToggleLayer?: (mapToolData: any) => any;\r\n}\r\n\r\nfunction AddLabelValueToListLayers(\r\n listLayer: LayerSettingsModels.LayerSettingsModel[]\r\n): LayerSettingsModelExtends[] {\r\n const result: LayerSettingsModelExtends[] = [];\r\n listLayer.map((layerObject) =>\r\n result.push({\r\n ...layerObject,\r\n label: layerObject.name,\r\n value: String(layerObject.id),\r\n opacity: \"100\",\r\n })\r\n );\r\n return result;\r\n}\r\n\r\nfunction SelectCurrentLayerView(props: InitProps) {\r\n const [layer, setLayer] = useState\r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state: any) => ({\r\n openLayerController: state.openlayer.openLayerController,\r\n dataToggleLayer: state.mapToolData.dataToggleLayer,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch: any) =>\r\n bindActionCreators(\r\n {\r\n UpdateDataToggleLayer: MapToolDataStore.UpdateDataToggleLayer,\r\n },\r\n dispatch\r\n);\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SelectCurrentLayerView);\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useEffect, useState } from \"react\";\r\nimport * as apiConfig from '../../../api/api-config';\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport { geolocated } from \"react-geolocated\";\r\nimport history from \"../../../common/history\";\r\nimport UrlCollect from \"../../../common/url-collect\";\r\n\r\nimport PlacesAutocomplete, {\r\n geocodeByAddress,\r\n getLatLng,\r\n} from \"react-places-autocomplete\";\r\nimport { AsyncPaginate } from \"react-select-async-paginate\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faCogs,\r\n faMap as baseMapIcon,\r\n faInfoCircle,\r\n faSlidersH,\r\n faSearch,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\n\r\nimport * as StatementAction from \"../../../redux/store/statement/statement.store\";\r\nimport * as CoordinateConvert from \"../../../redux/store/home-page/home-page.store\"\r\nimport {\r\n SetDisplayMaptoolPanel,\r\n SetDisplayInfomationPopup,\r\n} from \"../../../redux/store/open-layer/map-tools-panels.store\";\r\nimport HandleErrorOnGetGeoloaction from '../../../common/handle-error-navigator-geolocation';\r\nimport {\r\n TopRightPanelPropsModel,\r\n CoordsModel,\r\n PlanningModelMapTool,\r\n} from \"../../../models/planning-map-view/top-right-panel-models\";\r\nimport SelectCurrentLayerView from \"../select-current-layer/select-current-layer.view\";\r\nimport { ExtracAllLayersArrays } from \"../../../common/extract-information-from-map-data\";\r\nimport ViLanguages from \"../../../languages/vi\";\r\nimport { Tooltip } from '@material-ui/core';\r\nimport \"./top-right-panel.scss\";\r\nimport * as MapDataStore from \"../../../redux/store/map-data/map-data.store\";\r\nimport { GetLatLngPlace } from \"../../../redux/store/home-page/home-page.store\";\r\nimport {\r\n NotificationMessageType,\r\n NotificationPosition,\r\n} from \"../../../utils/configuration\";\r\nimport * as mapHelper from \"../../../common/map\";\r\nimport ShowNotification from \"../../../components/react-notifications/react-notifications\";\r\nimport * as viVN from \"../../../languages/vi-VN.json\";\r\nimport * as map from \"../../../common/map\";\r\nimport { isMobile } from 'react-device-detect';\r\nconst LanguageCollects = ViLanguages;\r\n\r\nfunction TopRightPanelView(props: TopRightPanelPropsModel) {\r\n let commentInput: any = null;\r\n\r\n const [address, setAddress] = useState(\"\");\r\n const [currentPosition, setCurrentPosition] = useState\r\n
\r\n \r\n \r\n \r\n handleChangeCurrentLayer(selected, action)\r\n }\r\n options={listLayers}\r\n placeholder=\"Lớp hiện hành\"\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n\r\n {openSearch && (\r\n
\r\n\r\n \r\n \r\n \"Không có dữ liệu\"}\r\n />\r\n )}\r\n {openCoordinates && (\r\n {\r\n commentInput = input;\r\n }}\r\n placeholder=\"Nhập tọa độ VN2000 (Tọa độ X, Tọa độ Y)\"\r\n className=\"ml-2\"\r\n />\r\n )}\r\n {openSearchWgs84 && (\r\n {\r\n commentInput = input;\r\n }}\r\n placeholder=\"Nhập tọa độ Wgs84 (Tọa độ Lat, Tọa độ Lng)\"\r\n className=\"ml-2\"\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 {openCurrentLayerView && props.mapData && (\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 {openInfo && (\r\n
\r\n\r\n \r\n
\r\n )}\r\n Quy hoạch tổng thể: {planningModel?.name}
\r\n\r\n Diện tích: {planningModel?.acreage} km2\r\n
\r\nDân số: {planningModel?.population} người
\r\n \r\n\r\n Quyết định phê duyệt: {planningModel?.numberOfDecisions}\r\n
\r\n \r\n\r\n \r\n \r\n \r\n\r\n {openBaseMap && props.baseMapList.length > 0 && (\r\n
\r\n )}\r\n \r\n {props.baseMapList.map((basemap, index) => (\r\n handleOnClickChangeBaseMap(index)}\r\n className=\"dropdown-item\"\r\n >\r\n {basemap.name}\r\n
\r\n ))}\r\n