\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","export const Configs = {\r\n DefaultPageIndex: 1,\r\n DefaultPageSize: 5,\r\n};\r\nexport const URLConfig = {\r\n api_url:\"http://dongtrieusmartcity-api.c2tech.vn\"\r\n}\r\n","import Service from \"../../../api/api-service\";\r\nimport { ApiUrl } from \"../../../api/api-url\";\r\nimport * as config from \"../../../common/config\";\r\n\r\nconst service = new Service();\r\n\r\nconst PLANNING_TYPE = \"PLANNING_TYPE\";\r\n\r\nconst createPlanningType = (data) => ({\r\n type: PLANNING_TYPE,\r\n data: data,\r\n});\r\n\r\nexport const GetListStatement = (\r\n pageIndex = 1,\r\n pageSize = config.Configs.DefaultPageSize,\r\n sortExpression = \"\",\r\n email = \"\"\r\n) => {\r\n const params = new URLSearchParams();\r\n params.append(\"pageIndex\", pageIndex);\r\n params.append(\"pageSize\", pageSize);\r\n sortExpression && params.append(\"sortExpression\", sortExpression);\r\n email && params.append(\"title\", email);\r\n return service\r\n .get(ApiUrl.GetListStatement, 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 GetDetailStatement = (id) => {\r\n const params = new URLSearchParams();\r\n params.append(\"id\", id);\r\n return service\r\n .get(ApiUrl.GetDetailStatement, 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 PlanningType = () => {\r\n return service\r\n .get(ApiUrl.PlanningType)\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 PlanningTypeDispatch = () => {\r\n return (dispatch) => {\r\n return service\r\n .get(ApiUrl.PlanningType)\r\n .then((res) => {\r\n dispatch(createPlanningType((res && res.content) || []));\r\n return res;\r\n })\r\n .catch((err) => {\r\n throw err;\r\n });\r\n };\r\n};\r\n\r\nexport const ApprovalAgencyLevel = () => {\r\n return service\r\n .get(ApiUrl.ApprovalAgencyLevel)\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 GetSerivceLink = () => {\r\n return service\r\n .get(ApiUrl.ServiceLink)\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 SearchPlanning = (\r\n pageIndex = 1,\r\n pageSize = config.Configs.DefaultPageSize,\r\n sortExpression = \"\",\r\n data\r\n) => {\r\n const params = new URLSearchParams();\r\n params.append(\"pageIndex\", pageIndex);\r\n params.append(\"pageSize\", pageSize);\r\n sortExpression && params.append(\"sortExpression\", sortExpression);\r\n data && data.name && params.append(\"name\", data.name);\r\n data && data.planningTypeId && params.append(\"planningTypeId\", data.planningTypeId);\r\n data && data.place && params.append(\"place\", data.place);\r\n data && data.numberOfDecisions && params.append(\"numberOfDecisions\", data.numberOfDecisions);\r\n data && data.yearOfApproval && params.append(\"yearOfApproval\", data.yearOfApproval);\r\n data && data.approvalAgencyLevelId && params.append(\"approvalAgencyLevel\", data.approvalAgencyLevelId);\r\n data && data.approvalAgency && params.append(\"approvalAgency\", data.approvalAgency);\r\n data && data.planningAgency && params.append(\"planningAgency\", data.planningAgency);\r\n data && data.consultingUnit && params.append(\"consultantUnit\", data.consultingUnit);\r\n return service\r\n .get(ApiUrl.SearchStatement, 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 GetPlanningTypeById = (\r\n id,\r\n pageIndex = 1,\r\n pageSize = 6,\r\n sortExpression = \"\"\r\n) => {\r\n const params = new URLSearchParams();\r\n params.append(\"id\", id);\r\n params.append(\"pageIndex\", pageIndex);\r\n params.append(\"pageSize\", pageSize);\r\n sortExpression && params.append(\"sortExpression\", sortExpression);\r\n\r\n return service\r\n .get(ApiUrl.PlanningTypeById, params)\r\n .then((res) => {\r\n return res;\r\n })\r\n .catch((err) => {\r\n throw err;\r\n });\r\n};\r\nexport const GetPlanningById = (id) => {\r\n const params = new URLSearchParams();\r\n params.append(\"id\", id);\r\n return service\r\n .get(ApiUrl.GetPlanningById, 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 GetAllPlanningByTypeId = (planningTypeId) => {\r\n const params = new URLSearchParams();\r\n params.append(\"planningTypeId\", planningTypeId);\r\n return service\r\n .get(ApiUrl.GetAllPlanningByTypeId, params)\r\n .then((res) => {\r\n return res;\r\n })\r\n .catch((err) => {\r\n throw err;\r\n });\r\n};\r\nexport const GetDetailPlanningById = (planningId) => {\r\n const params = new URLSearchParams();\r\n params.append(\"id\", planningId);\r\n return service\r\n .get(ApiUrl.GetDetailPlanningById, 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\nconst InitState = {\r\n planningType: [],\r\n};\r\n\r\nexport default function StatementReducer(state = InitState, action) {\r\n switch (action.type) {\r\n case PLANNING_TYPE:\r\n return { ...state, planningType: action.data };\r\n default:\r\n return state;\r\n }\r\n}\r\n","import { Map } from \"immutable\";\r\n\r\nconst APP_LOADING = \"APP_LOADING\";\r\n\r\nexport const onLoading = (isLoading) => ({ type: APP_LOADING, isLoading });\r\n\r\nexport const ShowLoading = (isLoading) => {\r\n return (dispatch) => {\r\n dispatch(onLoading(isLoading));\r\n };\r\n};\r\n\r\nexport const initialState = Map({\r\n loading: false,\r\n}).toJS();\r\n\r\nexport default function AppReducer(state = initialState, action) {\r\n switch (action.type) {\r\n case APP_LOADING:\r\n return {\r\n ...state,\r\n loading: action.isLoading,\r\n };\r\n default:\r\n return { ...state };\r\n }\r\n}\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 Login = (data) => {\r\n return service\r\n .post(ApiUrl.Login, 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 Register = (data) => {\r\n return service\r\n .post(ApiUrl.Register, 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 ForgotPassword = (data) => {\r\n return service\r\n .post(ApiUrl.ForgotPassword, 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 ResetPassword = (data) => {\r\n return service\r\n .post(ApiUrl.ResetPassword, data)\r\n .then((res) => {\r\n return res;\r\n })\r\n .catch((err) => {\r\n throw err;\r\n });\r\n};\r\nexport const GetUserAccountDetail = () => {\r\n return service\r\n .get(ApiUrl.GetUserAccountDetail)\r\n .then((res) => {\r\n return res;\r\n })\r\n .catch((err) => {\r\n throw err;\r\n });\r\n};\r\nexport const UpdateUserAccount = (data) => {\r\n const formData = new FormData();\r\n data && data.id && formData.append(\"Id\", data.id);\r\n data && data.currentPassword && formData.append(\"CurrentPassword\", data.currentPassword);\r\n data && data.newPassword && formData.append(\"NewPassword\", data.newPassword);\r\n data && data.file && formData.append(\"File\", data.file);\r\n return service\r\n .post(ApiUrl.UpdateUserAccount, formData)\r\n .then((res) => {\r\n return res;\r\n })\r\n .catch((err) => {\r\n throw err;\r\n });\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","/* 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 \"./header.scss\";\r\nimport \"./mobile.scss\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faUser,\r\n faLock,\r\n faSignOutAlt,\r\n faCheck,\r\n faTimes,\r\n faKey,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\nimport UrlCollect from \"../../common/url-collect\";\r\nimport ViLanguage from \"../../languages/vi\";\r\nimport {\r\n DomainUserSide,\r\n DomainAdminSide,\r\n APIUrlDefault,\r\n TokenKey,\r\n getUserInfo,\r\n removeCookies,\r\n} from \"../../utils/configuration\";\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\nfunction RenderModalComponent(props) {\r\n const { infoAcount, isShowUserInfoModal, handleCloseUserInfoModal, onLogout, showLoading } = props;\r\n const [file, setFile] = useState(null);\r\n const [avatar, setAvatar] = useState(null);\r\n const [isShowChangePassword, setIsShowChangePassword] = useState(false);\r\n const { register, handleSubmit, errors, getValues, watch, clearErrors, setError } = useForm({ mode: \"all\", reValidateMode: \"onBlur\" });\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 ? clearErrors([\"confirmPassword\"]) : setError(\"confirmPassword\", { type: \"validate\" })\r\n }\r\n\r\n const onSubmit = (data) => {\r\n clearErrors();\r\n if (!data.oldPassword && !data.password && !file) { isShowChangePassword && setIsShowChangePassword(!isShowChangePassword); handleCloseUserInfoModal(); return };\r\n if (data.oldPassword && !data.password) {\r\n setError(\"password\", { type: \"validate\" });\r\n return;\r\n }\r\n if (data.password && !data.oldPassword) {\r\n setError(\"oldPassword\", { type: \"validate\" });\r\n return;\r\n }\r\n showLoading(true);\r\n const value = {\r\n id: infoAcount.id,\r\n currentPassword: data.oldPassword,\r\n newPassword: data.password,\r\n file: avatar\r\n }\r\n acountAction.UpdateUserAccount(value).then((res) => {\r\n if (res && res.content) {\r\n if (data.oldPassword && data.password) {\r\n ShowNotification(\r\n viVN.Success.ChangePasswordSuccess,\r\n NotificationMessageType.Success\r\n );\r\n } else {\r\n ShowNotification(\r\n viVN.Success.ChangeAvatarSuccess,\r\n NotificationMessageType.Success\r\n )\r\n }\r\n }\r\n isShowChangePassword && setIsShowChangePassword(!isShowChangePassword);\r\n handleCloseUserInfoModal();\r\n showLoading(false);\r\n }).catch((err) => {\r\n showLoading(false);\r\n ShowNotification(\r\n viVN.Errors[(err && err.errorType)],\r\n NotificationMessageType.Error)\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 }\r\n }\r\n const handleOnCloseModal = () => {\r\n isShowChangePassword && setIsShowChangePassword(!isShowChangePassword);\r\n handleCloseUserInfoModal();\r\n }\r\n useEffect(() => {\r\n setFile(null);\r\n }, [isShowUserInfoModal])\r\n return (\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_Contact}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {LanguageCollect.header_logIn}\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}\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)(HeaderView);\r\n","import React from \"react\";\r\nimport \"./footer.scss\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faMapMarkedAlt,\r\n faPhoneAlt,\r\n faEnvelope,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\nimport Vilanguage from \"../../languages/vi\";\r\n\r\nconst LanguageDisplay = Vilanguage;\r\n\r\nexport default class FooterView extends React.Component {\r\n render() {\r\n return (\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 \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n - \r\n
- \r\n
- \r\n
- \r\n
\r\n
\r\n );\r\n }\r\n}\r\n","import React 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
\r\n \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 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 \r\n
\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 Service from \"../../../api/api-service\";\r\nimport { ApiUrl } from \"../../../api/api-url\";\r\n\r\nconst service = new Service();\r\n\r\nexport const GetSlideShow = () => {\r\n return (dispatch) => {\r\n return service\r\n .get(ApiUrl.SlideShow)\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\n\r\nexport const GetAllPlanningByTypeId = (planningTypeId) => {\r\n return (dispatch) => {\r\n const params = new URLSearchParams();\r\n planningTypeId && params.append(\"planningTypeId\", planningTypeId);\r\n return service\r\n .get(ApiUrl.GetAllPlanningByTypeId, 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\n\r\nexport const GetPlanningSearchByIdName = (\r\n PlanningTypeById,\r\n pageIndex = 1,\r\n planningId,\r\n name,\r\n pageSize = 6\r\n) => {\r\n const params = new URLSearchParams();\r\n PlanningTypeById && params.append(\"planningTypeId\", PlanningTypeById);\r\n planningId && params.append(\"planingId\", planningId);\r\n name && params.append(\"name\", name);\r\n params.append(\"pageIndex\", pageIndex);\r\n params.append(\"pageSize\", pageSize);\r\n return service\r\n .get(ApiUrl.PlanningSearchByIdName, 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 Service from \"../../../api/api-service\";\r\nimport { ApiUrl } from \"../../../api/api-url\";\r\n\r\nconst service = new Service();\r\n\r\nexport const GetListHotNews = (data) => {\r\n const params = new URLSearchParams();\r\n params.append(\"pageIndex\", data.pageIndex);\r\n params.append(\"pageSize\", data.pageSize);\r\n\r\n data.id && params.append(\"id\", data.id);\r\n data.title && params.append(\"title\", data.title);\r\n data.categoryId && params.append(\"categoryId\", data.categoryId);\r\n data.image_Url && params.append(\"image_Url\", data.image_Url);\r\n data.name && params.append(\"name\", data.name);\r\n data.status && params.append(\"status\", data.status);\r\n data.description && params.append(\"description\", data.description);\r\n data.content && params.append(\"content\", data.content);\r\n data.createdDate && params.append(\"createdDate\", data.createdDate);\r\n data.modifiedDate && params.append(\"modifiedDate\", data.modifiedDate);\r\n\r\n return service\r\n .get(ApiUrl.GetListHotNews, 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 SearchNews = (data) => {\r\n const params = new URLSearchParams();\r\n params.append(\"pageIndex\", data.pageIndex);\r\n params.append(\"keyword\", data.keyword);\r\n params.append(\"pageSize\", data.pageSize);\r\n\r\n data.id && params.append(\"id\", data.id);\r\n data.title && params.append(\"title\", data.title);\r\n data.categoryId && params.append(\"categoryId\", data.categoryId);\r\n data.image_Url && params.append(\"image_Url\", data.image_Url);\r\n data.name && params.append(\"name\", data.name);\r\n data.status && params.append(\"status\", data.status);\r\n data.description && params.append(\"description\", data.description);\r\n data.content && params.append(\"content\", data.content);\r\n data.createdDate && params.append(\"createdDate\", data.createdDate);\r\n data.modifiedDate && params.append(\"modifiedDate\", data.modifiedDate);\r\n\r\n return service\r\n .get(ApiUrl.SearchNews, 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 GetListNews = (data) => {\r\n const params = new URLSearchParams();\r\n params.append(\"pageIndex\", data.pageIndex);\r\n params.append(\"pageSize\", data.pageSize);\r\n\r\n data.id && params.append(\"id\", data.id);\r\n data.title && params.append(\"title\", data.title);\r\n data.categoryId && params.append(\"categoryId\", data.categoryId);\r\n data.image_Url && params.append(\"image_Url\", data.image_Url);\r\n data.name && params.append(\"name\", data.name);\r\n data.status && params.append(\"status\", data.status);\r\n data.description && params.append(\"description\", data.description);\r\n data.content && params.append(\"content\", data.content);\r\n data.createdDate && params.append(\"createdDate\", data.createdDate);\r\n data.modifiedDate && params.append(\"modifiedDate\", data.modifiedDate);\r\n\r\n return service\r\n .get(ApiUrl.GetListNews, 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 GetDetailNews = (id) => {\r\n let requestUrl = ApiUrl.GetDetailNews + '/' +id;\r\n\r\n return service\r\n .get(requestUrl)\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(\"NewsId\", 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.NewsId &&\r\n params.append(\"NewsId\", data.NewsId);\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 { 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 getUserInfo,\r\n} from \"../../../utils/configuration\";\r\nimport dateformat from \"dateformat\";\r\nimport \"./news.scss\";\r\n\r\nfunction NewsHome(props) {\r\n const { showLoading } = props;\r\n\r\n const [newsModel, setNewsModel] = useState([]);\r\n const [hotNews, setHotNews] = useState({});\r\n const [pagingNews, setPagingNews] = useState();\r\n const [currentPage, setCurrentPage] = useState();\r\n const pageSize = 4;\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 ])\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 onGetListNews = (data) => {\r\n return new Promise((resolve, reject) => {\r\n newsActions.GetListNews(data).then(\r\n (res) => {\r\n console.log(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 setHotNews(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 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 {this.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","/* 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\nimport PlacesAutocomplete, {\r\n geocodeByAddress,\r\n getLatLng,\r\n} from \"react-places-autocomplete\";\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\n\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\nimport { transform } from \"ol/proj\";\r\nimport proj4 from \"proj4\";\r\nimport { register } from \"ol/proj/proj4\";\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\r\n const [slideShow, setSlideShow] = useState([]);\r\n const [projectList, setProjectList] = useState();\r\n const [commentInput, setCommentInput] = useState(\"\");\r\n const [address, setAddress] = 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\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 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 setAddress(address);\r\n geocodeByAddress(address)\r\n .then((results) => getLatLng(results[0]))\r\n .then((latLng) => {\r\n let isInside = false;\r\n props.listPolygon &&\r\n props.listPolygon.map((itemPolygon,index) => {\r\n if (\r\n mapHelper.isPointInPolygon(latLng.lat, latLng.lng, itemPolygon)\r\n ) {\r\n isInside = true;\r\n return;\r\n }\r\n });\r\n if (isInside) {\r\n history.push(\r\n `${UrlCollect.SyntheticPlanning}?lat=${latLng.lat}&lng=${latLng.lng}&searchType=place`\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 .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\r\n const handleOpenCoordinate = () => {\r\n setOpenSearchPlace(false);\r\n };\r\n\r\n const handleOpenPlace = () => {\r\n setOpenSearchPlace(true);\r\n };\r\n\r\n const searchCoordinate = (event) => {\r\n event.preventDefault();\r\n let typeSearch = openSearchPlace ? \"place\" : \"codinate\";\r\n let value = commentInput.value.trim();\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 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 let isInside = false;\r\n props.listPolygon &&\r\n props.listPolygon.map((itemPolygon) => {\r\n if (mapHelper.isPointInPolygon(center[1], center[0], itemPolygon)) {\r\n isInside = true;\r\n return;\r\n }\r\n });\r\n if (isInside) {\r\n history.push(\r\n `${UrlCollect.SyntheticPlanning}?lng=${x}&lat=${y}&searchType=${typeSearch}`\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 };\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 = currentPosition;\r\n });\r\n }\r\n\r\n if (currentPositionTemp.latitude && currentPositionTemp.longitude) {\r\n let isInside = false;\r\n props.listPolygon &&\r\n props.listPolygon.map((itemPolygon) => {\r\n if (\r\n mapHelper.isPointInPolygon(\r\n currentPositionTemp.latitude,\r\n currentPositionTemp.longitude,\r\n itemPolygon\r\n )\r\n ) {\r\n isInside = true;\r\n return;\r\n }\r\n });\r\n if (isInside) {\r\n history.push(\r\n `${UrlCollect.SyntheticPlanning}?lat=${currentPositionTemp.latitude}&lng=${currentPositionTemp.longitude}&searchType=place`\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 } 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\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/no_image.png\"))\r\n }\r\n alt={hotNews.title}\r\n />\r\n \r\n
\r\n {hotNews.title}\r\n {dateformat(hotNews.createdDate, \"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 {newsModel && newsModel.length >0 ? (\r\n newsModel.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/no_image.png\"))\r\n }\r\n alt={item.title}\r\n />\r\n \r\n
\r\n \r\n {item.title}\r\n
\r\n {item.createDate}
\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 {slideShow && slideShow.length > 0 && (\r\n \r\n
\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 \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 {item.title}\r\n {/* */}\r\n
\r\n \r\n
{item.introduce}
\r\n\r\n
\r\n\r\n
\r\n \r\n PM QUẢN LÝ QUY HOẠCH ĐÔ THỊ THÔNG MINH HUYỆN TIÊN YÊN, Q.NINH\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","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.commune && params.append('commune', data.commune);\r\n data.year && params.append('year', data.year);\r\n return service.get(ApiUrl.SearchDocument, params).then(response => { return response }).catch(error => { throw error });\r\n}\r\nexport const GetLockUpDistrict = () => {\r\n return service.get(ApiUrl.GetCmsLookupDistrict).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}","/* 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 { 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 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 {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(planningId);\r\n if (nextTab) {\r\n setNextTab(false);\r\n document\r\n .getElementById(\"profile-tab\")\r\n .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 } 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 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\n\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\n\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 [documentTypeId, setDocumentTypeId] = useState();\r\n const [communeSearch, setCommuneSearch] = useState(\"\");\r\n const [yearSearch, setYearSearch] = useState(\"\");\r\n const [commune, setCommune] = 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 { register, handleSubmit } = 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 GetListServiceLink(),\r\n GetYearStatement(),\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 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 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 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 documentTypeId: documentTypeId,\r\n commune: communeSearch,\r\n year: yearSearch,\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 GetListServiceLink = () => {\r\n return new Promise((resolve, reject) => {\r\n documentAction\r\n .GetLookupCommune()\r\n .then((res) => {\r\n setCommune(\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 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 handleOnChangeCommune = (data) => {\r\n if (data) {\r\n setCommuneSearch(\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 setCommuneSearch(\"\");\r\n }\r\n };\r\n\r\n const handleOnChangeYears = (data) => {\r\n if (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 return (\r\n \r\n
\r\n )}\r\n \r\n )}\r\n\r\n {isDetail && (\r\n \r\n {!isShowPreview && (\r\n \r\n \r\n \r\n \r\n {planningModels && planningModels.length > 0 ? (\r\n planningModels.map((item, index) => (\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 \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 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});\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)(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, { useState } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PlacesAutocomplete, {\r\n geocodeByAddress,\r\n getLatLng,\r\n} from \"react-places-autocomplete\";\r\n\r\nimport \"./search-address.scss\";\r\n\r\nfunction SearchByAddress(props: any) {\r\n const { onSelectAddress } = props;\r\n const [address, setAddress] = useState(\"\");\r\n const handleSelect = (address: any) => {\r\n setAddress(address);\r\n geocodeByAddress(address)\r\n .then((results) => getLatLng(results[0]))\r\n .then((latLng) => {\r\n if (onSelectAddress && onSelectAddress(latLng.lng,latLng.lat )) {\r\n props.openLayerController &&\r\n props.openLayerController.placeSearch([latLng.lng, latLng.lat]);\r\n }\r\n })\r\n .catch((error) => console.error(\"Error\", error));\r\n };\r\n\r\n const classnames = (...args: any) => {\r\n const classes: any = [];\r\n args.forEach((arg: any) => {\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 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 \r\n )}\r\n \r\n );\r\n}\r\nconst mapStateToProps = (state: any) => ({\r\n openLayerController: state.openlayer.openLayerController,\r\n});\r\nexport default connect(mapStateToProps)(SearchByAddress);\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 {suggestions.length > 0 && (\r\n \r\n {suggestions.map((suggestion: any) => {\r\n const className = classnames(\"map__suggestion-item\", {\r\n \"map__suggestion-item--active\": suggestion.active,\r\n });\r\n return (\r\n \r\n {suggestion.description}\r\n
\r\n );\r\n })}\r\n \r\n
\r\n )\r\n}","import React, { useState, useEffect } from 'react';\r\nimport './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 './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 PlanningByTypeView(props) {\r\n const { isLoading, showLoading, params, setDataSelectBoxSearch, selected } = props;\r\n const [planningDetail, setPlanningDetail] = useState();\r\n useEffect(() => {\r\n\r\n const key = new URLSearchParams(params.location.search).get(\"key\");\r\n const search = new URLSearchParams(params.location.search).get(\"search\");\r\n const searchName = new URLSearchParams(params.location.search).get(\"searchName\");\r\n key && !search && getPlanningSearchByIdName(key);\r\n search && getPlanningSearchByIdName(null, 1, search);\r\n searchName && getPlanningSearchByIdName(null, 1, null, searchName);\r\n }, [params.location.search])\r\n useEffect(() => {\r\n selected && getPlanningSearchByIdName(null, 1, selected.id);\r\n }, [selected])\r\n\r\n const getPlanningSearchByIdName = (PlanningTypeById, pageIndex = 1, planningId, name, pageSize = 9) => {\r\n showLoading(true);\r\n return homePageStore.GetPlanningSearchByIdName(PlanningTypeById, pageIndex, planningId, name, pageSize).then(res => {\r\n // if (res && res.content) {\r\n setPlanningDetail(res && res.content ? res.content : {});\r\n let planning = res.content;\r\n if (!PlanningTypeById || !selected) {\r\n setDataSelectBoxSearch(planning && planning.items && planning.items.length > 0 ? planning.items.map(item => { return { ...item, value: item.id, label: item.name } }) : []);\r\n } else {\r\n getAllPlanningByTypeId(PlanningTypeById);\r\n }\r\n // }\r\n showLoading(false)\r\n }).catch(err => showLoading(false))\r\n }\r\n\r\n const getAllPlanningByTypeId = (id) => {\r\n statementActions.GetAllPlanningByTypeId(id).then(res => res &&\r\n res.content &&\r\n res.content.length > 0 ?\r\n setDataSelectBoxSearch(res.content.map(item => { return { ...item, label: item.name, value: item.id } })) : []).catch(err => { })\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)(PlanningByTypeView);","import React, { useState } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport Select from \"react-select\";\r\nimport { geolocated } from \"react-geolocated\";\r\n\r\nimport UrlCollect from \"../../../../common/url-collect\";\r\nimport history from \"../../../../common/history\";\r\nimport ShowNotification from \"../../../../components/react-notifications/react-notifications\";\r\nimport * as viVN from \"../../../../languages/vi-VN.json\";\r\nimport uongBiCoordinate from \"../../../../common/uongbi_coordinate\";\r\nimport * as mapHelper from \"../../../../common/map\";\r\nimport {\r\n NotificationMessageType,\r\n NotificationPosition,\r\n} from \"../../../../utils/configuration\";\r\n\r\n\r\nfunction SearchPlanningView(props: any) {\r\n const { dataSelectBoxSearch, setSelected } = props;\r\n\r\n function handleClickCurrentLocation() {\r\n navigator.geolocation.getCurrentPosition((position: any) => {\r\n if (position && position.coords && checkAddressInPolyon(position.coords.longitude, position.coords.latitude)) {\r\n history.push(\r\n `${UrlCollect.SyntheticPlanning}?lat=${position.coords.latitude}&lng=${position.coords.longitude}&searchType=place`\r\n );\r\n if (\r\n props.openLayerController &&\r\n props.openLayerController.placeSearch\r\n ) {\r\n props.openLayerController.placeSearch([\r\n position.coords.longitude,\r\n position.coords.latitude,\r\n ]);\r\n }\r\n }\r\n },(error) => {\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 function checkAddressInPolyon(x: any, y: any) {\r\n let isInside = false;\r\n props.listPolygon &&\r\n props.listPolygon.map((itemPolygon: any) => {\r\n if (\r\n mapHelper.isPointInPolygon(y, x, itemPolygon)\r\n ) {\r\n isInside = true;\r\n return;\r\n }\r\n });\r\n if (isInside) {\r\n history.push(\r\n `${UrlCollect.SyntheticPlanning}?lng=${x}&lat=${y}&searchType=place`\r\n )\r\n return true;\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 return false;\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\nconst mapStateToProps = (state: any) => ({\r\n openLayerController: state.openlayer.openLayerController,\r\n listPolygon: state.mapData.listPolygon,\r\n});\r\nconst mapDispatchToProps = (dispatch: any) => bindActionCreators({}, dispatch);\r\n\r\nexport default geolocated({\r\n positionOptions: {\r\n enableHighAccuracy: false,\r\n },\r\n userDecisionTimeout: 5000,\r\n})(connect(mapStateToProps, mapDispatchToProps)(SearchPlanningView));\r\n","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 SearchByAddress from \"./child-modules/search-address/search-address.view\";\r\nimport PlanningByTypeView from \"./child-modules/planning-type/planning-type.view\";\r\nimport UrlCollect from \"../../common/url-collect\";\r\nimport SearchPlanningView from \"./child-modules/search-planning-name/search-planning-name.view\";\r\nimport * as statementActions from \"../../redux/store/statement/statement.store\";\r\nimport history from \"../../common/history\";\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 uongBiCoordinate from \"../../common/uongbi_coordinate\";\r\nimport {\r\n NotificationMessageType,\r\n NotificationPosition,\r\n} from \"../../utils/configuration\";\r\nfunction LookUpPlanningView(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 let commentInput = null;\r\n\r\n useEffect(() => {\r\n getAllPlanningType();\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 function handleSearchCoordinate(event) {\r\n event.preventDefault();\r\n let value = commentInput.value.trim();\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 if (checkAddressInPolyon(y, x)) {\r\n props.history.push(\r\n `${UrlCollect.SyntheticPlanning}?lng=${x}&lat=${y}&searchType=coordinate`\r\n );\r\n }\r\n }\r\n }\r\n\r\n function checkAddressInPolyon(x, y) {\r\n\r\n let isInside = false;\r\n props.listPolygon &&\r\n props.listPolygon.map((itemPolygon) => {\r\n if (\r\n mapHelper.isPointInPolygon(y,x,itemPolygon)\r\n ) {\r\n isInside = true;\r\n return;\r\n }\r\n });\r\n if (isInside) {\r\n history.push(\r\n `${UrlCollect.SyntheticPlanning}?lng=${x}&lat=${y}&searchType=place`\r\n )\r\n return true;\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 return false;\r\n\r\n\r\n\r\n\r\n // if (mapHelper.isPointInPolygon(y, x, uongBiCoordinate)) {\r\n // history.push(\r\n // `${UrlCollect.SyntheticPlanning}?lng=${x}&lat=${y}&searchType=place`\r\n // )\r\n // return true;\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 // return false;\r\n }\r\n\r\n return (\r\n \r\n setSelected(newValue)}\r\n placeholder=\"Nhập tên quy hoạch - dự án\"\r\n className=\"slAutocomplete\"\r\n classNamePrefix=\"select\"\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 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\nexport default connect(mapStateToProps)(LookUpPlanningView)\r\n","import React from 'react';\r\nimport './guide-use-map.scss';\r\nimport {FontAwesomeIcon} from \"@fortawesome/react-fontawesome\";\r\nimport {faTimes} from \"@fortawesome/free-solid-svg-icons\";\r\nexport default function GuideUseMap(props: any) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n \r\n checkAddressInPolyon(x, y)}\r\n />\r\n
\r\n \r\n setShow(false)}\r\n >\r\n
\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n setShow(true)}\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 {item.name}\r\n \r\n ))}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n )\r\n}","import React, { useState, useEffect, useRef } from \"react\";\r\nimport {bindActionCreators} from \"redux\";\r\nimport {connect} from \"react-redux\";\r\nimport './preview.scss';\r\n\r\nfunction Preview(props) {\r\n const {imageInfo} = props;\r\n const [previewLabel,setPreviewLabel] = useState(\"\");\r\n const [imageSrc,setImageSrc] = useState(\"\");\r\n useEffect(() => {\r\n if(imageInfo && imageInfo.previewLabel && imageInfo.imageSrc){\r\n setPreviewLabel(imageInfo.previewLabel);\r\n setImageSrc(imageInfo.imageSrc);\r\n }\r\n }, [imageInfo]);\r\n return(\r\n \r\n Hướng dẫn sử dụng\r\n
\r\n\r\n \r\n {previewLabel && imageSrc && (\r\n \r\n
\r\n )}\r\n \r\n \r\n );\r\n\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n imageInfo: state.mapData.previewImageInfo,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n\r\n },dispatch\r\n );\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Preview);","const DISPLAYMAPTOOLSPANEL = \"MAPTOOLPANEL/DISPLAYPANEL\";\r\nconst DISPLAYINFOMATIONPOPUP = \"MAPTOOLPANEL/DISPLAYINFORMATIONSEARCH\";\r\n\r\nconst actionDisplayMaptoolPanel = (data) => ({ type: DISPLAYMAPTOOLSPANEL, data: data })\r\nconst actionDisplayInfomationSearch = (data) => ({ type: DISPLAYINFOMATIONPOPUP, data: data })\r\n\r\nexport const SetDisplayMaptoolPanel = (data) => {\r\n return (dispatch) => {\r\n dispatch(actionDisplayMaptoolPanel(data))\r\n }\r\n}\r\n\r\nexport const SetDisplayInfomationPopup = (data) => {\r\n return dispatch => {\r\n dispatch(actionDisplayInfomationSearch(data))\r\n }\r\n}\r\n\r\nconst InitState = {\r\n displayPanel: false,\r\n displayInfomationSearch: false,\r\n}\r\n\r\nexport default function MapToolsPanelReducers(state = InitState, action) {\r\n switch (action.type) {\r\n case DISPLAYMAPTOOLSPANEL: return { ...state, displayPanel: action.data };\r\n case DISPLAYINFOMATIONPOPUP: return { ...state, displayInfomationSearch: action.data };\r\n default: return state\r\n }\r\n}","import { store } from 'react-notifications-component';\r\n\r\nconst createNotificationObject = (type, message, title = null) => {\r\n\r\n if (!title) title = type.toUpperCase();\r\n\r\n return {\r\n // title: title,\r\n message: message,\r\n type: type,\r\n insert: \"top\",\r\n container: \"top-right\",\r\n animationIn: [\"animated\", \"fadeIn\"],\r\n animationOut: [\"animated\", \"fadeOut\"],\r\n dismiss: {\r\n duration: 3000,\r\n onScreen: true\r\n }\r\n }\r\n}\r\n\r\nexport default {\r\n success: (message, title = null ) => store.addNotification(createNotificationObject(\"success\", message, title)),\r\n error: (message, title = null) => store.addNotification(createNotificationObject(\"danger\", message, title))\r\n}","import Notifications from \"./notification-service\";\r\n\r\ninterface ErrorType {\r\n code: number;\r\n message: string;\r\n}\r\n\r\nfunction HandleErrorOnGetGeoloaction(error: ErrorType) {\r\n switch (error.code) {\r\n case 1:\r\n return Notifications.error(\r\n \"Bạn đã từ chối cho phép truy cập vị trí của bạn, do đó tính năng không thể hoạt động.\"\r\n );\r\n }\r\n}\r\n\r\nexport default HandleErrorOnGetGeoloaction","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 OpenlayerController from \"../../../models/open-layer/openlayer-controller-custom.model\";\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}\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\n {previewLabel}
\r\n \r\n 
\r\n
\r\n\r\n \r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state: any) => ({\r\n openLayerController: state.openlayer.openLayerController,\r\n});\r\n\r\nexport default connect(mapStateToProps, null)(SelectCurrentLayerView);\r\n","import MapDataModels from \"../models/map-data-model-b/map-data-model\";\r\nimport LayerSettingsModels from \"../models/map-data-model-b/layer-setting-models\";\r\nimport LayerCategoryModels from \"../models/map-data-model-b/layer-category-models\";\r\nimport BaseMapModels from \"../models/map-data-model-b/base-map-models\";\r\n\r\nexport const ExtracAllLayersArrays = (\r\n mapData: MapDataModels.MapDataModels\r\n): LayerSettingsModels.LayerSettingsModel[] => {\r\n let result: LayerSettingsModels.LayerSettingsModel[] = [];\r\n mapData.map_setting.map((mapSetting) => {\r\n if (mapSetting.type_map != \"MAP\") {\r\n mapSetting.layer_categories.map((layerCategories) => {\r\n result = [...result, ...layerCategories.layer_settings];\r\n });\r\n return;\r\n }\r\n });\r\n return result;\r\n};\r\n\r\nexport const ExtracLayerListGroup = (\r\n mapData: MapDataModels.MapDataModels\r\n): LayerCategoryModels.LayerCategoryModel[] => {\r\n let result: LayerCategoryModels.LayerCategoryModel[] = [];\r\n mapData.map_setting.map((mapSetting) => {\r\n if (mapSetting.type_map !== \"MAP\") {\r\n result = mapSetting.layer_categories;\r\n return;\r\n }\r\n });\r\n return result;\r\n};\r\n\r\nexport const ExtractListLayerArray = (\r\n mapData: MapDataModels.MapDataModels\r\n): LayerSettingsModels.LayerSettingsModel[] => {\r\n const ListLayer: LayerSettingsModels.LayerSettingsModel[] = [];\r\n mapData.map_setting.map((mapSetting) => {\r\n if (mapSetting.type_map !== \"MAP\") {\r\n mapSetting.layer_categories.map((layerCategory) => {\r\n layerCategory.layer_settings.map((layerSetting) =>\r\n ListLayer.push(layerSetting)\r\n );\r\n });\r\n return;\r\n }\r\n });\r\n return ListLayer;\r\n};\r\n\r\nexport const ExtractExtentArray = (\r\n mapData: MapDataModels.MapDataModels\r\n): [number, number, number, number] => {\r\n const extent: [number, number, number, number] = [0, 0, 0, 0];\r\n mapData.extent\r\n .split(\",\")\r\n .map((numberValue, index) => (extent[index] = Number(numberValue)));\r\n return extent;\r\n};\r\nexport const ExtractCenterArray = (\r\n mapData: MapDataModels.MapDataModels\r\n): number[] => {\r\n const center: number[] = [];\r\n mapData.center\r\n .split(\",\")\r\n .map((numberValue) => center.push(Number(numberValue)));\r\n return center;\r\n};\r\n\r\nexport const ExtractBasemapList = (\r\n mapData: MapDataModels.MapDataModels\r\n): BaseMapModels.BaseMapModel[] => {\r\n let result: BaseMapModels.BaseMapModel[] = [];\r\n mapData.map_setting.map((mapSetting) => {\r\n if (mapSetting.type_map === \"MAP\") {\r\n result = mapSetting.base_maps;\r\n return;\r\n }\r\n });\r\n return result;\r\n};\r\n\r\nexport const ExtractSelectedBasemap = (\r\n mapData: MapDataModels.MapDataModels\r\n): string => {\r\n let baseMapUrl = \"\";\r\n mapData.map_setting.map((mapSetting) => {\r\n if (mapSetting.type_map === \"MAP\") {\r\n mapSetting.base_maps.map((basemap) => {\r\n if (basemap.view_default) baseMapUrl = basemap.url;\r\n return;\r\n });\r\n return;\r\n }\r\n });\r\n return baseMapUrl;\r\n};\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport { geolocated } from \"react-geolocated\";\r\nimport PlacesAutocomplete, {\r\n geocodeByAddress,\r\n getLatLng,\r\n} from \"react-places-autocomplete\";\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 {\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 {\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\r\n {openSearch && (\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 \r\n
\r\n )}\r\n \r\n \r\n \r\n {({\r\n getInputProps,\r\n suggestions,\r\n getSuggestionItemProps,\r\n }) => (\r\n
\r\n )}\r\n \r\n )}\r\n {openCoordinates && (\r\n \r\n
\r\n )}\r\n \r\n
\r\n {suggestions.length > 0 && (\r\n \r\n {suggestions.map((suggestion: any, index: number) => {\r\n const className = classnames(\r\n \"map__suggestion-item\",\r\n {\r\n \"map__suggestion-item--active\":\r\n suggestion.active,\r\n }\r\n );\r\n return (\r\n \r\n {suggestion.description}\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 Quyết định phê duyệt: {planningModel?.numberOfDecisions}\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 \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 \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, useRef } from \"react\";\r\nimport {bindActionCreators} from \"redux\";\r\nimport {connect} from \"react-redux\";\r\nimport * as MapDataStore from \"../../../../redux/store/map-data/map-data.store\";\r\n\r\nfunction Planning(props) {\r\n\r\n const savePreviewInfo = (previewLabel,imageSrc) => {\r\n const data = {\r\n previewLabel:previewLabel,\r\n imageSrc:imageSrc\r\n }\r\n props.savePreviewImage(data);\r\n }\r\n\r\n const getImageRow = (index,label,rowValue) => {\r\n return (\r\n {label}:
\r\n \r\n \r\n Thông tin quy hoạch\r\n
\r\n
\r\n );\r\n\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n savePreviewImage: MapDataStore.SavePreviewImage,\r\n },dispatch\r\n );\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Planning);","import React, { useState, useEffect, useRef } from \"react\";\r\nimport {bindActionCreators} from \"redux\";\r\nimport {connect} from \"react-redux\";\r\nimport {Link} from \"react-router-dom\";\r\n\r\nfunction Document(props) {\r\n return(\r\n \r\n Thông tin quy hoạch\r\n
\r\n \r\n {props.listMapInfomations?.length >0 ? (\r\n \r\n \r\n
\r\n ):(\r\n
\r\n | Tên trường | \r\nGiá trị | \r\n \r\n \r\n {props.listMapInfomations?.map((data, index) => {\r\n if(data.value){\r\n return getRowData(data,index);\r\n }\r\n }\r\n )}\r\n \r\n
|---|
Không có dữ liệu
\r\n )}\r\n\r\n \r\n Quản lý hồ sơ thiết kế\r\n
\r\n \r\n Hồ sơ thiết kế →\r\n \r\n \r\n Văn bản pháp lý→\r\n \r\n
\r\n );\r\n\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n\r\n },dispatch\r\n );\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Document);","import React, { useState, useEffect, useRef } from \"react\";\r\nimport {bindActionCreators} from \"redux\";\r\nimport {connect} from \"react-redux\";\r\nimport {Link} from \"react-router-dom\";\r\n\r\nfunction Note(props) {\r\n return(\r\n \r\n Quản lý hồ sơ thiết kế\r\n
\r\n \r\n \r\n Chú giải\r\n
\r\n
\r\n );\r\n\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) =>\r\n bindActionCreators(\r\n {\r\n\r\n },dispatch\r\n );\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Note);","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faAngleLeft,\r\n faAngleRight,\r\n faBook,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\nimport { faFileExcel } from \"@fortawesome/free-regular-svg-icons\";\r\nimport \"./left-menu.scss\";\r\nimport ViLanguages from \"../../../languages/vi\";\r\nimport { faMap } from \"@fortawesome/free-regular-svg-icons\";\r\nimport { Link } from \"react-router-dom\";\r\nimport LeftMenuModels from \"../../../models/planning-map-view/left-menu.model\";\r\nimport { connect } from \"react-redux\";\r\nimport LayerCategoryModels from \"../../../models/map-data-model-b/layer-category-models\";\r\nimport LayerSettingsModels from \"../../../models/map-data-model-b/layer-setting-models\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport * as MapDataStore from \"../../../redux/store/map-data/map-data.store\";\r\nimport PlanningRelationModel, {\r\n PlanningMapModels,\r\n BoundariesViewModel,\r\n} from \"../../../models/map-data-model-b/new-planning-relation.model\";\r\n\r\n\r\nimport InfoPlanning from \"./info/planning\"\r\nimport InfoDocument from \"./info/document\"\r\nimport InfoNote from \"./info/note\"\r\n\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport ShowNotification from \"../../../components/react-notifications/react-notifications\";\r\nimport {\r\n NotificationMessageType,\r\n} from \"../../../utils/configuration\";\r\nimport * as viVN from \"../../../languages/vi-VN.json\";\r\nimport {isMobile} from 'react-device-detect';\r\nconst LanguageCollects = ViLanguages;\r\n\r\n\r\n\r\nfunction LeftMenuView(props: LeftMenuModels.LeftMenuProps) {\r\n const [isShowMapResult, setShowMapResult] = useState(false);\r\n const [headerTable, setHeaderTable] = useState\r\n Chú giải\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {LanguageCollects.planningMapView_map}\r\n \r\n \r\n {LanguageCollects.planningMapView_infomation}\r\n \r\n \r\n {LanguageCollects.planningMapView_relatedPlanning}\r\n \r\n \r\n {LanguageCollects.planningMapView_result}\r\n \r\n handleClickToggleLeftNavBar()}\r\n >\r\n
\r\n \r\n \r\n {props.listGroupLayer.map((data, index: number) => (\r\n handleToggleDisplayLayer(data)}\r\n toggleLeftNavBarAction={() => handleClickToggleLeftNavBar()}\r\n key={index}\r\n data={data}\r\n />\r\n ))}\r\n
\r\n \r\n Không có dự án liên quan nào được tìm thấy\r\n
\r\n )}\r\n \r\n\r\n Không có kết quả\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\nfunction RenderItemFieldRelatedPlanning(props: any) {\r\n const data: PlanningMapModels = props.data;\r\n const isChecked = useRef(false);\r\n const handleClick = () => {\r\n if (data.boundariesView) {\r\n props.handleClick(data.boundariesView, !isChecked.current);\r\n } else {\r\n !isChecked.current && ShowNotification(\r\n \"Bạn phải cài đặt ranh giới liên quan\",\r\n NotificationMessageType.Warning\r\n );\r\n }\r\n isChecked.current = !isChecked.current;\r\n };\r\n if (!(data && data.planningName)) return null;\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction RenderMapChild(props: any) {\r\n const data: LayerCategoryModels.LayerCategoryModel = props.data;\r\n const [layerSetting, setLayerSetting] = useState<\r\n LayerSettingsModels.LayerSettingsModel[]\r\n >(props.data.layer_settings);\r\n const [labelFlexible, setLabelFlexible] = useState(\"Chọn tất\");\r\n\r\n function toggleSelectAll() {\r\n if (isEveryCheckboxChecked()) {\r\n selectOrDeselectAllCheckBox(false);\r\n } else {\r\n selectOrDeselectAllCheckBox();\r\n }\r\n }\r\n\r\n function isEveryCheckboxChecked() {\r\n let result = true;\r\n const listCheckbox = Array.from(\r\n document.querySelectorAll(`input[data-select-id=\"${data.folder_name}\"]`)\r\n );\r\n listCheckbox.map((checkbox) => {\r\n if (!(checkbox as HTMLInputElement).checked) {\r\n result = false;\r\n return true;\r\n }\r\n });\r\n return result;\r\n }\r\n function selectOrDeselectAllCheckBox(isSelect = true) {\r\n const listCheckbox = Array.from(\r\n document.querySelectorAll(`input[data-select-id=\"${data.folder_name}\"]`)\r\n );\r\n listCheckbox.map((checkboxElement) => {\r\n const checkbox = checkboxElement as HTMLInputElement;\r\n if (checkbox.checked != isSelect) checkbox.click();\r\n });\r\n }\r\n\r\n function handleClickCheckbox(LayerIndex: number, newValue: boolean) {\r\n const checkboxAll = document.querySelectorAll(\r\n `input[data-select-all-id=\"${data.folder_name}\"]`\r\n )[0] as HTMLInputElement;\r\n const oldLayerSetting = [...layerSetting];\r\n oldLayerSetting[LayerIndex].is_check = newValue;\r\n setLayerSetting(oldLayerSetting);\r\n props.toggleLayerAction(oldLayerSetting[LayerIndex]);\r\n if (checkboxAll) {\r\n if (isEveryCheckboxChecked()) {\r\n checkboxAll.checked = true;\r\n setLabelFlexible(\"Bỏ chọn tất cả\");\r\n } else {\r\n checkboxAll.checked = false;\r\n setLabelFlexible(\"Chọn tất\");\r\n }\r\n }\r\n if(isMobile){\r\n props.toggleLeftNavBarAction();\r\n }\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n {data.planningMapModels.map((planningData, index) => (\r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nfunction RenderInfoTable(props: any) {\r\n const {\r\n data,\r\n handleClickShowAllMapResult,\r\n isShowMapResult,\r\n headerTable,\r\n } = props;\r\n\r\n const onDownloadExcelOffline = () => {\r\n var tab_text = \"\r\n \r\n {data.folder_name}\r\n
\r\n
\r\n \r\n {data.folder_name}\r\n
\r\n \r\n {data.layer_settings.length > 1 && (\r\n \r\n )}\r\n {layerSetting.map((item, index: number) => (\r\n \r\n ))}\r\n
\r\n | \" +\r\n (_item.alias || \"\") +\r\n \" | \";\r\n _header += _th;\r\n });\r\n tab_text += _header + \"
|---|
| \" + (_item[_title.col] || \"\") + \" | \";\r\n _row += _td;\r\n });\r\n _body += _row + \"
\r\n \r\n \r\n
\r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state: any) => ({\r\n listMapInfomations: state.mapData.infomations,\r\n informationForTableResult: state.mapData.dataForTable,\r\n listPlanningRelationShips: state.mapData.planningRelationShips,\r\n listPlanningBoundaries: state.mapData.listPlanningBoundaries,\r\n openLayerController: state.openlayer.openLayerController,\r\n headerTable: state.mapData.headerTable,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch: any) =>\r\n bindActionCreators(\r\n {\r\n GetListPlanningRelationByPlanningId:\r\n MapDataStore.GetListPlanningRelationByPlanningId,\r\n },\r\n dispatch\r\n );\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LeftMenuView);\r\n","const SAVEOPENLAYERCONTROLLER = 'OPENLAYER/SAVEOPENLAYERCONTROLLER';\r\nconst SAVEOPENLAYERFEATURESSELECTED = 'OPENLAYER/SAVEFEATURESELECTED';\r\n\r\nconst CreateSaveOpenlayerControllerAction = data => ({ type: SAVEOPENLAYERCONTROLLER, data: data })\r\nconst CreateSaveOpenlayerFeatureSelectedAction = data => ({ type: SAVEOPENLAYERFEATURESSELECTED, data: data })\r\n\r\nexport const CreateOpenlayerController = (handleFunction) => {\r\n return dispatch => {\r\n dispatch(CreateSaveOpenlayerControllerAction(handleFunction))\r\n }\r\n}\r\n\r\nexport const SaveOpenlayerFeaturesSelected = (featuresSelected) => {\r\n return dispatch => {\r\n dispatch(CreateSaveOpenlayerFeatureSelectedAction(featuresSelected))\r\n }\r\n}\r\n\r\nconst InitState = {\r\n openLayerController: null,\r\n featuresSelected: [],\r\n}\r\n\r\nexport default function OpenLayerReducer(state = InitState, action) {\r\n switch (action.type) {\r\n case SAVEOPENLAYERCONTROLLER: return { ...state, openLayerController: action.data }\r\n case SAVEOPENLAYERFEATURESSELECTED: return { ...state, featuresSelected: action.data }\r\n default: return state\r\n }\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 MapFilter = (data) => {\r\n return service.post(ApiUrl.MapFilter, data).then((res) => {return res}).catch((err) => { throw err });\r\n}\r\nexport const GetDropDown = (data) => { \r\n return service.post(ApiUrl.GetDropDown, data).then((res) => {return res}).catch((err) => { throw err });\r\n}\r\nexport const SpatialSearch = (data) => { \r\n return service.post(ApiUrl.SpatialSearch, data).then((res) => {return res}).catch((err) => { throw err });\r\n}","import { Circle, Fill, Stroke, Style, Icon } from \"ol/style\";\r\nimport Feature from \"ol/Feature\";\r\nimport Point from \"ol/geom/Point\";\r\nexport const VectorImageLayerClassName = (layerId: number) =>\r\n `vector-image-layer-${layerId}`;\r\nexport const TileLayerClassName = (layerId: number) => `title-layer-${layerId}`;\r\nexport const Default_Feature_Style: any = (_feature: Feature) => {\r\n const _defaultWidth = 1;\r\n const _PolygonStyle = new Style({\r\n stroke: new Stroke({\r\n color: \"rgba(245, 0, 0, 0.01)\",\r\n width: _defaultWidth,\r\n }),\r\n fill: new Fill({\r\n color: \"rgba(0, 0, 0, 0)\",\r\n }),\r\n });\r\n const _PointStyle = new Style({\r\n image: new Circle({\r\n radius: _defaultWidth * 4,\r\n fill: new Fill({\r\n color: \"rgba(0, 0, 0, 0)\",\r\n }),\r\n stroke: new Stroke({\r\n color: \"rgba(0, 0, 0, 0)\",\r\n width: _defaultWidth / 4,\r\n }),\r\n }),\r\n zIndex: Infinity,\r\n });\r\n switch (true) {\r\n case _feature.getGeometry() instanceof Point:\r\n return _PointStyle;\r\n default:\r\n return _PolygonStyle;\r\n }\r\n};\r\n\r\nexport const Highlight_Feature_Style: any = (_feature: Feature) => {\r\n const _defaultWidth = 3;\r\n const _PolygonStyle = new Style({\r\n stroke: new Stroke({\r\n color: \"rgba(0,230,241,1)\",\r\n width: _defaultWidth,\r\n }),\r\n fill: new Fill({\r\n color: \"rgba(223,16, 188,1)\",\r\n }),\r\n });\r\n const _PointStyle = new Style({\r\n image: new Circle({\r\n radius: _defaultWidth * 2,\r\n fill: new Fill({\r\n color: \"blue\",\r\n }),\r\n stroke: new Stroke({\r\n color: \"white\",\r\n width: _defaultWidth / 2,\r\n }),\r\n }),\r\n zIndex: Infinity,\r\n });\r\n switch (true) {\r\n case _feature.getGeometry() instanceof Point:\r\n return _PointStyle;\r\n default:\r\n return _PolygonStyle;\r\n }\r\n};\r\n\r\nexport const Draw_Filter_Feature_Style: any = (_feature: Feature) => {\r\n const _defaultWidth = 1;\r\n const _anchorXUnits: any = \"fraction\";\r\n const _anchorYUnits: any = \"pixels\";\r\n const _PolygonStyle = new Style({\r\n stroke: new Stroke({\r\n color: \"red\",\r\n width: _defaultWidth,\r\n }),\r\n fill: new Fill({\r\n color: \"rgba(231, 95, 95, 0.51)\",\r\n }),\r\n });\r\n const _PointStyle = 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 switch (true) {\r\n case _feature.getGeometry() instanceof Point:\r\n return _PointStyle;\r\n default:\r\n return _PolygonStyle;\r\n }\r\n};\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { Fill, Stroke, Style } from \"ol/style\";\r\nimport VectorImageLayer from \"ol/layer/VectorImage\";\r\nimport Select from \"react-select\";\r\nimport $ from \"jquery\";\r\n\r\n//--- Service\r\nimport * as MapToolsPanelsStore from \"../../../redux/store/open-layer/map-tools-panels.store\";\r\nimport * as MapDataStore from \"../../../redux/store/map-data/map-data.store\";\r\nimport * as OpenlayerStore from \"../../../redux/store/open-layer/open-layer.store\";\r\nimport * as MapToolAction from \"../../../redux/store/map-tool/map-tool.store\";\r\n\r\n//--- Configs\r\nimport ViLanguages from \"./../../../languages/vi\";\r\nimport { Default_Feature_Style } from \"../../openlayers-map/config/config\";\r\n\r\n//--- Style\r\nimport \"./filter-infomation.scss\";\r\n\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faCheck, faCircle } from \"@fortawesome/free-solid-svg-icons\";\r\nimport ShowNotification from \"../../../components/react-notifications/react-notifications\";\r\nimport * as viVN from \"../../../languages/vi-VN.json\";\r\nimport GeometryType from \"ol/geom/GeometryType\";\r\nimport { Container, Form, Col, Row } from \"react-bootstrap\";\r\nimport * as config from \"../../../utils/configuration\";\r\nimport { NotificationMessageType } from \"../../../utils/configuration\";\r\n\r\nconst LanguageCollects = ViLanguages;\r\nconst TYPE_DISPLAY = {\r\n CHAR: \"text\",\r\n DROPDOWN: \"dropdown\",\r\n NUMBER: \"number\",\r\n};\r\nconst CONDITION_TYPE = {\r\n LON_HON: \"GREATER\",\r\n NHO_HON: \"LESS\",\r\n BANG: \"=\",\r\n TRONG_KHOANG: \"BETWEEN\",\r\n};\r\n\r\nfunction RenderFilterInformationPopup(props) {\r\n const highlightStyle = 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,1)\",\r\n }),\r\n });\r\n\r\n const { register, handleSubmit, setValue, getValues } = useForm({\r\n mode: \"onBlur\",\r\n });\r\n\r\n const [objectSearch, setObjectSearch] = useState(\"\");\r\n const [isSearchWithAttribute, setIsSearchWithAttribute] = useState(false);\r\n const [\r\n attributesOfSelectedObject,\r\n setAttributesOfSelectedObject,\r\n ] = useState();\r\n const [listFeature, setListFeature] = useState([]);\r\n const [listLayerActive, setListLayerActive] = useState([]);\r\n const [tableName, setTableName] = useState(\"\")\r\n const [outPut, setOutPut] = useState([]);\r\n const [layerChoose, setLayerChoose] = useState();\r\n const [features, setFeatures] = useState([]);\r\n\r\n const [currentDrawMode, setCurrentDrawMode] = useState('');\r\n const [radiusValue, setRadiusValue] = useState(\"\");\r\n useEffect(() => {\r\n const ListButtonSearchType = Array.from(\r\n document.getElementsByClassName(\"search-by-type-button\")\r\n );\r\n ListButtonSearchType.map((Button, index) => {\r\n Button.addEventListener(\"click\", () => handleAddClassState(index));\r\n });\r\n\r\n const ListButtonTitle = Array.from(\r\n document.getElementsByClassName(\"custom-select-title-id\")\r\n );\r\n ListButtonTitle.map((Button, index) => {\r\n Button.addEventListener(\"click\", () =>\r\n handleToggleClassStateTitleButton(index)\r\n );\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n let listLayer = [];\r\n props.listGroupLayer &&\r\n props.listGroupLayer.map((item) => {\r\n listLayer.push(...item.layer_settings);\r\n });\r\n setListLayerActive(listLayer);\r\n }, [props.listGroupLayer]);\r\n\r\n useEffect(() => {\r\n if (layerChoose) {\r\n props.listLayer.map((layer) => {\r\n if (layer.table === layerChoose.table) {\r\n props.SaveHeaderForTable(\r\n layer.filter_name ? layer.filter_name.out : []\r\n );\r\n }\r\n });\r\n }\r\n }, [props.listLayer, layerChoose]);\r\n useEffect(() => {\r\n const listColumns = attributesOfSelectedObject && attributesOfSelectedObject.length > 0 &&\r\n attributesOfSelectedObject.filter((item) => item.type_display && item.type_display === \"dropdown\").map(item => item.col)\r\n if (layerChoose) {\r\n GetDropDown(tableName, listColumns);\r\n }\r\n }, [layerChoose]);\r\n\r\n const GetDropDown = async (_tableName, listColums) => {\r\n const data = {\r\n tableName: _tableName ? _tableName : '',\r\n columnNames: [...listColums]\r\n }\r\n await MapToolAction.GetDropDown(data).then((res) => {\r\n if (res && res.content) {\r\n setFeatures(res && res.content);\r\n }\r\n }).catch((err) => {\r\n ShowNotification(\r\n viVN.Errors[err && err.errorType],\r\n NotificationMessageType.Errors,\r\n );\r\n })\r\n }\r\n\r\n const handleClickDrawFilter = (event, drawType) => {\r\n const _buttonElement = event.target;\r\n const _parentNode = _buttonElement.parentNode;\r\n if (_buttonElement.classList.contains('active') || _parentNode.classList.contains('active')) {\r\n props.openLayerController.deleteFilterDrawnVectorLayer();\r\n setCurrentDrawMode('');\r\n } else {\r\n setCurrentDrawMode(drawType);\r\n props.openLayerController.filterDrawnVectorLayer(drawType)\r\n }\r\n }\r\n\r\n function handleToggleClassStateTitleButton(indexActive) {\r\n const ListButtonTitle = Array.from(\r\n document.getElementsByClassName(\"custom-select-title-id\")\r\n );\r\n ListButtonTitle.map((Button, index) => {\r\n if (index != indexActive) Button.classList.remove(\"active\");\r\n else Button.classList.add(\"active\");\r\n });\r\n }\r\n\r\n function handleAddClassState(indexActive) {\r\n const ListButtonSearchType = Array.from(\r\n document.getElementsByClassName(\"search-by-type-button\")\r\n );\r\n ListButtonSearchType.map((Button, index) => {\r\n if (index === indexActive) Button.classList.add(\"active\");\r\n else Button.classList.remove(\"active\");\r\n });\r\n }\r\n\r\n function handleChangeObjectSearch(event) {\r\n const _value = event.target.value;\r\n setTableName(_value)\r\n const _object = listLayerActive.find((item) => item.table === _value);\r\n\r\n setObjectSearch(_value);\r\n if (_object) {\r\n setLayerChoose(_object);\r\n if (_object.filter_name) {\r\n setAttributesOfSelectedObject(_object.filter_name.in || []);\r\n setOutPut(_object.filter_name.out || []);\r\n }\r\n }\r\n }\r\n\r\n const isValidData = (_data, _feature) => {\r\n let isValid = true;\r\n _data.forEach((item) => {\r\n if (!item.data || !isValid) return;\r\n\r\n if (item.type == TYPE_DISPLAY.NUMBER) {\r\n switch (item.condition_type) {\r\n case CONDITION_TYPE.LON_HON.toString():\r\n if (item.data < _feature.get(item.key)) break;\r\n isValid = false;\r\n break;\r\n case CONDITION_TYPE.NHO_HON.toString():\r\n if (item.data > _feature.get(item.key)) break;\r\n isValid = false;\r\n break;\r\n case CONDITION_TYPE.BANG.toString():\r\n if (item.data == _feature.get(item.key)) break;\r\n isValid = false;\r\n break;\r\n case CONDITION_TYPE.TRONG_KHOANG.toString():\r\n const _dataArr = item.data.split(\" \");\r\n if (!_dataArr || _dataArr.length !== 2) {\r\n isValid = false;\r\n break;\r\n }\r\n if (\r\n _dataArr[0] <= _feature.get(item.key) &&\r\n _dataArr[1] >= _feature.get(item.key)\r\n ) break;\r\n isValid = false;\r\n break;\r\n default:\r\n isValid = false;\r\n break;\r\n }\r\n } else if (_feature.get(item.key) != item.data) {\r\n isValid = false;\r\n }\r\n });\r\n\r\n return isValid;\r\n };\r\n\r\n async function onSubmit(_data) {\r\n if (!_data) return;\r\n if(!layerChoose) {\r\n ShowNotification(\r\n \"Bạn phải chọn đối tượng cần tìm kiếm\",\r\n NotificationMessageType.Warning,\r\n config.NotificationPosition.Center\r\n );\r\n }\r\n if (listFeature.length !== 0) {\r\n listFeature.map((features) => {\r\n features.setStyle(Default_Feature_Style(features));\r\n })\r\n }\r\n const data = parseStringToObjectModel(_data);\r\n let _searchType = \"\";\r\n let _r = 0;\r\n let _shp = \"\";\r\n let _value = props.openLayerController.getCurrentDrawFeature();\r\n if (_value) {\r\n switch (currentDrawMode) {\r\n case \"LineString\":\r\n _searchType = \"LineString\";\r\n _shp = _value.coordinate;\r\n break;\r\n case \"Polygon\":\r\n _searchType = \"Polygon\";\r\n _shp = _value.coordinate;\r\n break;\r\n case \"Circle\":\r\n _searchType = \"Circle\"\r\n _shp = _value.coordinate;\r\n _r = _value.r\r\n break;\r\n case \"Point\":\r\n _searchType = \"Point\";\r\n _shp = _value.coordinate;\r\n _r = _value.r !== 0 ? _value.r : 0.001;\r\n break;\r\n case \"Box\":\r\n _searchType = \"Box\";\r\n _shp = _value.coordinate;\r\n break;\r\n\r\n default:\r\n break;\r\n }\r\n }\r\n let _requestBody = {\r\n tbName: tableName,\r\n values: JSON.stringify(data),\r\n lang: \"vn\",\r\n shp: _shp,\r\n r: _r,\r\n searchType: _searchType\r\n }\r\n const properties = [];\r\n const boundaries = [];\r\n\r\n try {\r\n const res = await MapToolAction.MapFilter(_requestBody);\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 }\r\n } catch (error) {\r\n return;\r\n }\r\n let listFeatureSelected = [];\r\n props.SaveInfomationForTable(properties);\r\n props.openLayerController.functionHightLightPolygon(boundaries);\r\n props.SaveOpenlayerFeaturesSelected(listFeatureSelected);\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 }\r\n\r\n function clearData() {\r\n props.SaveInfomationForTable([]);\r\n setObjectSearch(\"\");\r\n setLayerChoose();\r\n props.openLayerController.clearFeaturesSelected();\r\n setIsSearchWithAttribute(false);\r\n if (listFeature.length !== 0) {\r\n listFeature.map((features) => {\r\n features.setStyle(Default_Feature_Style(features));\r\n })\r\n }\r\n }\r\n\r\n function handleCloseFilterModal() {\r\n props.openLayerController.functionTurnOffFilterMode();\r\n clearData();\r\n }\r\n\r\n const renderAttributesOfSelectedObject = (_array = []) => {\r\n if (!_array || _array.length === 0) {\r\n return (\r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n {!isShowMapResult ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n | \r\n {item[item1.col]}\r\n | \r\n ))}\r\n
|---|
\r\n Không có thuộc tính cần tìm kiếm\r\n
\r\n );\r\n }\r\n const _className = `vector-image-layer-${(layerChoose && layerChoose.id) || \"\"\r\n }`;\r\n\r\n return _array.map((attribute) => (\r\n \r\n
\r\n \r\n\r\n \r\n \r\n \r\n handleCloseFilterModal()}\r\n >\r\n
\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nconst getData = (str) => {\r\n try {\r\n const _data = JSON.parse(str);\r\n return _data.data || \"\";\r\n } catch (error) {\r\n return \"\";\r\n }\r\n};\r\n\r\nconst removeAllClass = (data) => {\r\n $(`#number_equals_${data.col}`).removeClass(\"active\");\r\n $(`#number_less_${data.col}`).removeClass(\"active\");\r\n $(`#number_greater_${data.col}`).removeClass(\"active\");\r\n $(`#number_between_${data.col}`).removeClass(\"active\");\r\n};\r\n\r\nfunction RenderAttributeSelect(props) {\r\n const { data, features, getValues, setValue, register } = props;\r\n\r\n const contentRender = () => {\r\n switch (data.type_display) {\r\n case TYPE_DISPLAY.DROPDOWN: {\r\n const dataResult = [];\r\n if (features) {\r\n features.map((feature) => {\r\n let _feature;\r\n if (feature.columnName === data.col) {\r\n _feature = feature.value\r\n };\r\n if (_feature && !dataResult.some((item) => item.value === _feature))\r\n dataResult.push({\r\n label: _feature,\r\n value: _feature,\r\n });\r\n });\r\n }\r\n\r\n return (\r\n \r\n \r\n setValue(\r\n `${data.col}`,\r\n `{\"col\": \"${data.col}\", \"type\": \"${TYPE_DISPLAY.DROPDOWN}\", \"v\": \"${newValue.value.toLowerCase()}\", \"op\": \"=\"}`\r\n )\r\n }\r\n />\r\n \r\n
\r\n );\r\n }\r\n case TYPE_DISPLAY.NUMBER: {\r\n return (\r\n {data.alias}:
\r\n\r\n {\r\n const value = e.target.value;\r\n if (!value) {\r\n setValue(data.col, \"\");\r\n } else {\r\n const condition_type =\r\n $(`#type_${data.col}`).val() || CONDITION_TYPE.BANG;\r\n $(`#type_${data.col}`).val(condition_type);\r\n setValue(\r\n data.col,\r\n `{\"col\": \"${data.col}\", \"type\": \"${TYPE_DISPLAY.NUMBER}\", \"v\": \"${value}\", \"op\": \"${condition_type}\"}`\r\n );\r\n }\r\n }}\r\n />\r\n
\r\n );\r\n }\r\n default:\r\n return (\r\n <>\r\n \r\n
\r\n\r\n {data.alias}
\r\n\r\n- \r\n
{data.alias}
\r\n{contentRender()}
;\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n isDisplay: state.mapToolsPanel.displayInfomationSearch,\r\n map: state.mapData.map,\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 SaveDataFilter: MapDataStore.SaveDataFilter,\r\n SaveInfomationForTable: MapDataStore.SaveInformationForTable,\r\n SaveHeaderForTable: MapDataStore.SaveHeaderForTable,\r\n SaveOpenlayerFeaturesSelected: OpenlayerStore.SaveOpenlayerFeaturesSelected,\r\n },\r\n dispatch\r\n );\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(RenderFilterInformationPopup);\r\n","import React from 'react';\r\n\r\nfunction MapContainer(props: any) {\r\n return \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 { 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 { defaults as defaultControls } from \"ol/control\";\r\nimport MousePosition from \"ol/control/MousePosition\";\r\nimport { createStringXY } 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 { transform } from \"ol/proj\";\r\nimport proj4 from \"proj4\";\r\nimport { register } from \"ol/proj/proj4\";\r\nimport Projection from 'ol/proj/Projection';\r\n\r\n//--- Models\r\nimport { BoundariesViewModel } 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\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 };\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 toggleDisplayBoundariesRelation = (\r\n boundaries: BoundariesViewModel,\r\n isDisplay: boolean\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 }\r\n if (layerModel.getClassName() === `id-layer-${boundaries.tiffName}`) {\r\n isBoundariesAdded = true;\r\n layerModel.setVisible(isDisplay);\r\n }\r\n });\r\n if (!isBoundariesAdded) {\r\n const format = new WKT();\r\n\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 const imageLayer = new ImageLayer({\r\n opacity: 1,\r\n className: `id-layer-${boundaries.tiffName}`,\r\n visible: true,\r\n source: new ImageWMS({\r\n ratio: 1,\r\n url: config.DoMainNameGeoServerWMS,\r\n params: {\r\n projection: \"EPSG:4326\",\r\n VERSION: \"1.1.0\",\r\n STYLES: \"\",\r\n LAYERS: boundaries.tiffName,\r\n },\r\n }),\r\n });\r\n LayersCurrents.push(imageLayer);\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 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 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 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\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 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 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 let isInside = false;\r\n this.props.listPolygon &&\r\n this.props.listPolygon.map((itemPolygon: any) => {\r\n if (mapHelper.isPointInPolygon(center[1], center[0], itemPolygon)) {\r\n isInside = true;\r\n return;\r\n }\r\n });\r\n if (isInside) {\r\n this.pinSearchMode(center);\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 };\r\n\r\n pinSearchMode = (coordinate: any) => {\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: 999,\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 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\") {\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 functionClickViewInfomationListener = (evt: any) => {\r\n const mapObject: Map = this.state.map;\r\n const listLayer = mapObject.getLayers();\r\n const listTitleLayerVisible: TileLayer[] = [];\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 const getFeaturesWithTitleLayer = (titleLayer: TileLayer) => {\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 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: (n: ResponeFromServeClickShowInfomationFeature) => {\r\n console.log(\"n\", n)\r\n if (n.features.length > 0) {\r\n const _geojsonObject = n;\r\n const ListInfoMation: SingleMapInfoMationModel[] = [];\r\n const MergeData = (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 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 }\r\n }\r\n }\r\n // n.features.map(features => MergeData(features.properties))\r\n MergeData(n.features[0].properties)\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 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: 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,1)',\r\n }),\r\n }),\r\n })\r\n )\r\n }\r\n }\r\n } else {\r\n this.removeHiglightVectorLayer();\r\n layerIndex++;\r\n if (layerIndex < listTitleLayerVisible.length) {\r\n getFeaturesWithTitleLayer(listTitleLayerVisible[layerIndex])\r\n } else this.props.SaveInfomationList([]);\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()) listTitleLayerVisible.push(layer)\r\n if ((layer instanceof VectorImageLayer) && layer.getVisible()) listVectorImageLayerVisible.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 this.props.SaveInfomationList([]);\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 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,1)',\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\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 if (searchType === \"place\") {\r\n this.pinSearchMode([lat, lng]);\r\n } else {\r\n let value = lat + \", \" + lng;\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 += `\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
${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 );\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 ]);\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 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 componentDidMount() {\r\n const defaultBaseMapUrl =\r\n this.props.defaultBaseMapUrl ||\r\n \"https://mt0.google.com/vt/lyrs=m&hl=vi&x={x}&y={y}&z={z}\";\r\n const defaultCenter = this.props.defaultCenter || config.defaultMapCenter;\r\n const defaultZoom = this.props.defaultZoom || 11;\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 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 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 OpenlayerMapObject = new Map({\r\n controls: defaultControls().extend([mousePositionControl]),\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 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 this.setState(\r\n {\r\n map: OpenlayerMapObject,\r\n },\r\n () => {\r\n if (!this.props.isGeneralPlanning)\r\n this.handleOnOffViewInfomation(true);\r\n }\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 toggleDisplayBoundariesRelation: this.toggleDisplayBoundariesRelation,\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 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 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 });\r\n }\r\n\r\n render() {\r\n return (\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 \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 {/* top right panel*/}\r\n \r\n
\r\n )}\r\n {/* left nav bar */}\r\n \r\n
\r\n {/* open layer view port */}\r\n\r\n {this.props.hasLoadedMapData && this.props.mapData.name && (\r\n \r\n
\r\n \r\n
\r\n \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 {this.props.hasLoadedMapData && this.props.mapData.name && (\r\n \r\n \r\n this.setState({\r\n isLeftNavbarHide: !this.state.isLeftNavbarHide,\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","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useRef } from \"react\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport PhoneInput from \"react-phone-input-2\";\r\nimport {\r\n faEnvelope,\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 \"./register.scss\";\r\n\r\nexport default function RegisterDesktop(props) {\r\n const [height, setHeight] = useState({\r\n minHeight: `${window.innerHeight}px`,\r\n });\r\n\r\n const [isConfirm, setConfirm] = useState(false);\r\n const [isSuccess, setSuccess] = useState(false);\r\n const [tel, setTel] = useState(\"\");\r\n\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\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 onBackToLogin = () => {\r\n history.push(UrlCollect.Login);\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 const onSubmitRegister = async (data) => {\r\n if (!data || 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 })\r\n .then(\r\n (res) => {\r\n ShowNotification(\r\n viVN.Success.RegisterSuccess,\r\n NotificationMessageType.Success\r\n );\r\n onBackToLogin();\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\r\n return (\r\n \r\n
\r\n );\r\n}\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState } from \"react\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faUser,\r\n faArrowLeft,\r\n faUserCircle,\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, DomainUserSide } 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 \"./forgot-password.scss\";\r\n\r\nexport default function ForgotPasswordDesktop(props) {\r\n const { register, handleSubmit, errors } = useForm({ mode: \"onBlur\" });\r\n\r\n const [height, setHeight] = useState({\r\n minHeight: `${window.innerHeight}px`,\r\n });\r\n const [isSuccess, setSuccess] = useState(false);\r\n\r\n const onSubmitForgot = (data) => {\r\n if (!data) return;\r\n setSuccess(true);\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 setSuccess(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 const onSubmitConfirm = () => {\r\n history.push(UrlCollect.Login);\r\n };\r\n\r\n return (\r\n \r\n {!isConfirm && !isSuccess && (\r\n \r\n )}\r\n\r\n {/* {isConfirm && !isSuccess && (\r\n \r\n )} */}\r\n\r\n {!isConfirm && isSuccess && (\r\n \r\n )}\r\n
\r\n \r\n
\r\n );\r\n}\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 {!isSuccess && (\r\n \r\n )}\r\n\r\n {isSuccess && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n Quên mật khẩu
\r\n\r\n {viVN.Success.ForgotPasswordSuccess}\r\n
\r\n\r\n \r\n Quay về\r\n \r\n
\r\n \r\n
\r\n );\r\n}\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, { 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 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.planningName}\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 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\n\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\n\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 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 {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 {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 Gửi ý kiến\r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n\r\n {!data.isExpired && }\r\n\r\n {!data.isExpired && (\r\n \r\n
\r\n {data.planningName}
\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 A. THÔNG TIN CƠ QUAN, CÁ NHÂN ĐƯỢC XIN Ý KIẾN\r\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 {item.planningName}\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.planningName}\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 } = 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 Promise.all([\r\n onGetListHotNews({\r\n pageIndex: 1,\r\n pageSize: 5,\r\n }),\r\n onGetListNews({\r\n pageIndex: currentPageIndexDoing,\r\n pageSize: currentPageSizeDoing,\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 }\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 }\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 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 pageIndex: data.pageIndex,\r\n pageSize: currentPageSizeDoing,\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\n\r\nfunction NewsDetail(props) {\r\n const { showLoading } = props;\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 (e.target.src = require(\"../../assets/image/no_image.png\"))\r\n }\r\n alt={item.title}\r\n />\r\n
\r\n {hotNews.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 \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {newsDetail.createdDate}
\r\n \r\n \r\n \r\n
\r\n \r\n {newsModel && newsModel.length >0 ? (\r\n newsModel.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\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 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, useEffect } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { bindActionCreators } from \"redux\";\r\nimport Select from \"react-select\";\r\nimport { geolocated } from \"react-geolocated\";\r\n\r\nimport UrlCollect from \"../../../common/url-collect\";\r\nimport history from \"../../../common/history\";\r\nimport PlanningMapViewModel from \"../../../models/planning-map-view/planning-map-view.model\";\r\nimport * as MapDataStore from \"../../../redux/store/map-data/map-data.store\";\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\nimport {\r\n NotificationMessageType,\r\n NotificationPosition,\r\n} from \"../../../utils/configuration\";\r\n\r\nfunction SearchPlanningView(props: any) {\r\n const [dataSelectBox, setDataSelectBox] = useState\r\n
\r\n \r\n
\r\n \r\n {statementModel && (\r\n
\r\n \r\n \r\n
\r\n )}\r\n {statementModel.title}
\r\n\r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state: any) => ({\r\n openLayerController: state.openlayer.openLayerController,\r\n listBoundaries: state.mapData.listBoundaries,\r\n listPolygon: state.mapData.listPolygon,\r\n});\r\nconst mapDispatchToProps = (dispatch: any) => bindActionCreators({\r\n GetAllPlanningBoundaries: MapDataStore.GetAllPlanningBoundaries,\r\n}, dispatch);\r\n\r\nexport default geolocated({\r\n positionOptions: {\r\n enableHighAccuracy: false,\r\n },\r\n userDecisionTimeout: 5000,\r\n})(connect(mapStateToProps, mapDispatchToProps)(SearchPlanningView));\r\n","import React, { useState, useEffect } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { geolocated } from \"react-geolocated\";\r\nimport OpenlayerController from \"../../../../models/open-layer/openlayer-controller-custom.model\";\r\nimport { CoordsModel } from '../../../../models/planning-map-view/top-right-panel-models';\r\n\r\n\r\ninterface InitProps {\r\n classCustom?: string;\r\n openLayerController?: OpenlayerController;\r\n onShow?: Function;\r\n show?: boolean;\r\n}\r\n\r\nfunction SearchByMyPosition(props: InitProps) {\r\n const { onShow } = props;\r\n const [currentPosition, setCurrentPosition] = useState\r\n setSelected(newValue)}\r\n placeholder=\"Nhập tên quy hoạch - dự án\"\r\n className=\"slAutocomplete\"\r\n classNamePrefix=\"select\"\r\n />\r\n
\r\n \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
\r\n \r\n
\r\n \r\n {show ? (\r\n checkAddressInPolyon(x, y)}\r\n />\r\n ) : (\r\n \r\n {\r\n commentInput = input;\r\n }}\r\n className=\"form-control\"\r\n placeholder=\"Nhập toạ độ VN2000 (Toạ độ X, Toạ độ Y)\"\r\n />\r\n \r\n )}\r\n
\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\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=s&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\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});\r\n\r\nconst mapDispatchToProps = (dispatch: any) =>\r\n bindActionCreators(\r\n {\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 {/* 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 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\n\r\n\r\n//--- Loading\r\nimport AppLoading from \"./components/loading/loading.view\";\r\n\r\n//--- Layout\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\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 PlanningMapView from \"./modules/planning-map-view/planning-map-view.view.tsx\";\r\n\r\n//-- User\r\nimport LoginDesktop from \"./modules/login/login.view.jsx\";\r\nimport RegisterDesktop from \"./modules/register/register.view.jsx\";\r\nimport ForgotPasswordDesktop from \"./modules/forgot-password/forgot-password.view.jsx\";\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 ListNewsView from \"./modules/news/list.view\";\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\n\r\nfunction App() {\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 {/* Desktop */}\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 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\n\r\nexport default combineReducers({\r\n app: AppReducer,\r\n mapToolsPanel: MapToolsPanelReducers,\r\n loadingState: LoadingReducer,\r\n mapData: MapDataReducer,\r\n openlayer: OpenLayerReducer,\r\n statement: StatementReducer,\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 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\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