\n {mode} {title}\n \n }\n closable={true}\n visible={visible}\n footer={false}\n onCancel={this.ModalClosed}\n destroyOnClose={true}\n >\n \n this.handleSubmit(mode, values)}\n layout=\"vertical\"\n initialValues={{\n effective_date: moment(new Date(), dateFormat),\n expire_date: moment(new Date(), dateFormat),\n\n }}\n ref={this.formRef}\n >\n {mode == \"edit\" ? (\n \n \n \n Active\n \n \n Inactive\n \n \n \n ) : null}\n\n \n \n \n \n this.handleDateStartEnd( value , 'effective_date' )}\n // type_sc=\"size\"\n >\n \n \n this.handleDateStartEnd( value , 'expire_date' )}\n // type_sc=\"size\"\n >\n \n\n \n this.setState({ visible: false })}\n className=\"btn btn-secondary\"\n >\n Cancel\n \n \n \n \n \n \n );\n }\n\n // Opening approve\n OnViewApprove() {\n this.setState({\n visible_approve: true,\n });\n }\n\n // Open Failed Modal\n OnViewReject() {\n this.setState({\n visible_reject: true,\n });\n }\n\n renderDelete() {\n const { loading_modal_delete, visible_delete } = this.state;\n // Add Material Form\n return (\n \n \n \n {/* */}\n \n \n \n );\n }\n\n //Approve Modal\n renderApproveButtonModal() {\n const { visible_approve } = this.state;\n return (\n \n \n \n
\n
\n {window.location.hostname == \"localhost\" ? (\n
![]({Api.absoluteUrl(\"/icon/approve_check.svg\")})
\n ) : (\n
\n //
![]({\"./icon/approve_check.svg\"})
\n )}\n
\n
\n\n
\n
\n \n {this.NotiModal()}\n \n
\n
\n\n
\n
\n \n this.setState({\n visible_approve: false,\n visible_delete: false,\n visible: false,\n })\n }\n className=\"btn btn-warning\"\n >\n Ok\n \n
\n
\n
\n
\n
\n {window.location.hostname == \"localhost\" ? (\n
![]({Api.absoluteUrl(\"/icon/reject.svg\")})
\n ) : (\n //
![]({\"/icon/reject.svg\"})
\n
\n //
![]({\"./icon/reject.svg\"})
\n )}\n
\n
\n\n
\n
\n \n {this.state.error_log != null &&\n this.state.error_log.includes(\n \"already have material_code:\"\n ) ? (\n <>\n \n Add Permission Failed.\n \n
\n \n {this.state.error_log}\n \n \n ) : (\n \n Submission Failed, Please Check Your Input\n \n )}\n \n
\n
\n\n
\n
\n \n this.setState({ visible_reject: false, visible: false })\n }\n className=\"btn btn-warning\"\n >\n Ok\n \n
\n
\n
\n {this.state.visible_approve ? this.renderApproveButtonModal() : null}\n {this.state.visible_reject ? this.renderRejectButtonModal() : null}\n {this.renderModalJobButton()}\n {this.renderDelete()}\n\n
Basic Data\n
{title}
\n
\n
\n\n
\n\n
this.onModal(\"add\", true)}\n >\n ![]({Api.absoluteUrl(\"/icon/plus.svg\")})
\n {/* ![](\"/icon/plus.svg\")
*/}\n Add {title}\n \n \n
\n {/* {this.renderModal()} */}\n
{item.problem_type_name}
,\n \"ProblemTypeDescription\": {item.problem_type_desc}
,\n \"Status\": {this.state.active[item.is_active]}
,\n \"EffectiveDate\": this.displayDate(item.effective_date),\n \"ExpiredDate\": this.displayDate(item.expire_date),\n \"Option\":\n })\n ));\n this.setState({ filterDataList: tmp});\n }\n })\n .catch((e) => {\n console.log(\"error loading problem type\", e);\n });\n }\n\n setOperator = (event) => {\n this.setState({\n operatorID: event.target.value\n });\n\n const filterProjectdata = JSON.parse(\n localStorage.getItem(\"projectData\")\n ).filter((data) => {\n return data.operator_id == event.target.value;\n });\n\n this.setState({\n projectID: \"\",\n projectData: filterProjectdata,\n });\n\n };\n setProjectData = (event) => {\n this.setState({\n projectID: event.target.value\n })\n };\n\n setOperatorAdd = (event) => {\n this.setState({\n operatorIDAdd: event.target.value\n });\n\n const filterProjectdataAdd = JSON.parse(\n localStorage.getItem(\"projectData\")\n ).filter((data) => {\n return data.operator_id == event.target.value;\n });\n\n this.setState({\n projectIDAdd: \"\",\n projectDataAdd: filterProjectdataAdd,\n });\n\n };\n\n loadJobTypeDataAdd = () => {\n Api.post(\"V4/get_job_type\", {\n company_id: this.state.companyID,\n operator_id: this.state.operatorIDAdd,\n project_id: this.state.projectIDAdd,\n pk_id: null,\n fk_id: null,\n is_active: 1,\n effective: 1,\n sql_where: null,\n UserName: Cookies.get(\"username\"),\n })\n .then((res) => {\n this.setState({jobTypeDataAdd: res.data.data})\n })\n .catch((e) => {\n console.log(\"error loading job type\", e);\n });\n }\n\n setProjectDataAdd = (event) => {\n this.setState({\n projectIDAdd: event.target.value\n })\n this.loadJobTypeDataAdd();\n };\n\n setJobTypeDataAdd = (event) => {\n this.setState({\n jobTypeIDAdd: event.target.value\n })\n }\n\n setProblemTypeCodeAdd = (event) => {\n this.setState({\n problemTypeCodeAdd: event.target.value\n })\n }\n\n setProblemTypeNameAdd = (event) => {\n this.setState({\n problemTypeNameAdd: event.target.value\n })\n }\n\n setProblemDescriptionAdd = (event) => {\n this.setState({\n problemDescriptionAdd: event.target.value\n })\n }\n\n setStatus = (event) => {\n this.setState({\n statusAdd: event.target.value\n })\n }\n\n setSearchText = (event) => {\n this.setState({\n where: event.target.value\n })\n }\n\n onChangeEffectiveDate = (date, dateString) =>{\n this.setState({\n EffectiveDateAdd: dateString,\n EffectiveDateAddFilter: moment(dateString,\"DD/MM/YYYY\")\n })\n }\n\n onChangeExpiryDate = (date, dateString) => {\n this.setState({\n ExpiryDateAdd: dateString\n })\n }\n\n onAddProblemType = () => {\n window.scrollTo(0, 0);\n if(this.state.AddProblemTypeDisplay == \"none\"){\n this.setState({\n AddProblemTypeDisplay: \"block\"\n })\n }else{\n this.setState({\n AddProblemTypeDisplay: \"none\"\n })\n }\n }\n\nonCallConfirmWindow = () => {\n if(this.state.ConfirmDisplay == \"none\"){\n this.setState({ConfirmDisplay: \"block\"});\n }else{\n this.setState({ConfirmDisplay: \"none\", resultAddNewFail: false})\n }\n}\n\nonResetFormAddNew = () => {\n this.onCallConfirmWindow();\n this.onCloseAddNewWindow();\n this.onAddProblemType();\n}\n\nonCloseAddNewWindow = () => {\n this.setState({\n operatorIDAdd: \"\",\n projectIDAdd: \"\",\n problemTypeCodeAdd: \"\",\n problemTypeNameAdd: \"\",\n problemDescriptionAdd: \"\",\n statusAdd: 1,\n EffectiveDateAdd: moment().toDate(),\n EffectiveDateAddFilter: moment().toDate(),\n ExpiryDateAdd: moment().toDate(),\n AddProblemTypeDisplay: \"none\",\n actionProblemType: \"Add\",\n actionProblemTypeButton: \"Add\",\n disableChangeValue: false\n })\n}\ndisplayDate = (data) => {\n if(data != null){\n const day = data.substring(0,10).split(\"-\");\n return day[2] + \"/\" + day[1] + \"/\" + day[0];\n }\n return \"-\";\n}\nonCallConfirmWindowAndCallAddNewAgain = () => {\n this.onCallConfirmWindow();\n this.onAddProblemType();\n}\n\nClickAction = (e) => {\n window.scrollTo(0, 0);\n const operator_id = this.state.operatorIDAdd;\n const project_id = this.state.projectIDAdd;\n e.preventDefault();\n if(this.state.EffectiveDateAdd == \"\"){\n this.setState({fillEffectiveDateDisplay:\"block\"});\n }else{\n this.setState({fillEffectiveDateDisplay:\"none\"});\n /** statement save data */\n (this.state.actionProblemType == \"Add\") ?\n Api.post(\"master_data/insert_job_problem_type\", {\n company_id: this.state.companyID,\n operator_id: this.state.operatorIDAdd,\n project_id: this.state.projectIDAdd,\n job_type_id: this.state.jobTypeIDAdd,\n problem_type_code: this.state.problemTypeCodeAdd,\n problem_type_name: this.state.problemTypeNameAdd,\n problem_type_desc: this.state.problemDescriptionAdd,\n is_active: this.state.statusAdd,\n effective_date: moment(this.state.EffectiveDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"),\n expire_date: (this.state.ExpiryDateAdd) != ''? moment(this.state.ExpiryDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"):null,\n create_by: Cookies.get(\"userId\")\n })\n .then((res) => {\n console.log('Action: Add');\n const { result } = res.data;\n if (result.code === \"P\") {\n this.setState({resultAddNewFail: false})\n\n this.onCloseAddNewWindow();\n }else{\n this.setState({AddProblemTypeDisplay : \"none\",resultAddNewFail: true})\n }\n if(result.showText == \"Success\"){\n this.setState({resultAddNewText:\"เพิ่มข้อมูลเสร็จสิ้น\"});\n }else{\n this.setState({resultAddNewText:result.showText});\n }\n /** confirm */\n this.onCallConfirmWindow();\n this.loadProjectSelection(operator_id, project_id);\n this.loadProblemType();\n\n })\n .catch((e) => {\n console.log(\"error add new problem type\", e);\n })\n : this.editData(e)\n\n /** statement save data */\n }\n e.stopPropagation();\n}\n\neditData = (e) => {\n console.log('Action: Edit');\n window.scrollTo(0, 0);\n e.preventDefault();\n if(this.state.EffectiveDateAdd == \"\"){\n this.setState({fillEffectiveDateDisplay:\"block\"});\n }else{\n this.setState({fillEffectiveDateDisplay:\"none\"});\n /** statement save data */\n Api.post(\"master_data/update_job_problem_type\", {\n company_id: this.state.companyID,\n operator_id: this.state.operatorIDAdd,\n project_id: this.state.projectIDAdd,\n problem_type_id: this.state.problemTypeIDAdd,\n job_type_id: this.state.jobTypeIDAdd,\n problem_type_code: this.state.problemTypeCodeAdd,\n problem_type_name: this.state.problemTypeNameAdd,\n problem_type_desc: this.state.problemDescriptionAdd,\n is_active: this.state.statusAdd,\n effective_date: moment(this.state.EffectiveDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"),\n expire_date: (this.state.ExpiryDateAdd) != ''? moment(this.state.ExpiryDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"):null,\n update_by: Cookies.get(\"userId\")\n })\n .then((res) => {\n const { result } = res.data;\n if (result.code === \"P\") {\n this.setState({resultAddNewFail: false})\n this.onCloseAddNewWindow();\n }else{\n this.setState({AddProblemTypeDisplay : \"none\",resultAddNewFail: true})\n }\n if(result.showText == \"Success\"){\n this.setState({resultAddNewText:\"แก้ไขข้อมูลเสร็จสิ้น\"});\n }else{\n this.setState({resultAddNewText:result.showText});\n }\n /** confirm */\n this.onCallConfirmWindow();\n this.loadProblemType();\n\n })\n .catch((e) => {\n console.log(\"error editing problem type\", e);\n })\n }\n}\n\nrender() {\n const locale = Cookies.get(\"locale\");\n const columns = [\n\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"Code\"] : `Code`,\n selector: 'Code',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"Name\"] : 'Name',\n selector: 'ProblemTypeName',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"Description\"] : 'Description',\n selector: 'ProblemTypeDescription',\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"status\"] : 'Status',\n selector: 'Status',\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"EffectiveDate\"] : 'Effective Date',\n selector: 'EffectiveDate',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"ExpiredDate\"] : 'Expired Date',\n selector: 'ExpiredDate',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"Action\"] :'Action',\n selector: 'Option',\n ignoreRowClick: true,\n allowOverflow: true,\n button: true,\n style: 'cursor:pointer'\n },\n ];\n\n return (\n \n
Basic Data\n
{this.state.title}
\n
\n
\n
\n
Operator
\n
\n \n \n {this.state.operator.map((item, index) => (\n \n {item.operator_name}\n \n ))}\n \n
\n
\n
\n
Project
\n
\n
\n \n \n {this.state.projectData.map((item, index) => (\n \n ))}\n \n
\n
\n
\n
\n
\n
\n
Ex. 2021-06-18 รูปแบบการหาแบบวันที่
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n {/** load data */}\n \n
\n\n
\n\n
\n
\n
\n {this.state.resultAddNewText}\n
\n
\n
\n
\n {\n (this.state.actionProblemType == \"Add\")?\n ((this.state.resultAddNewFail == true)? : ):null\n } \n {\n (this.state.resultAddNewFail == false)? :null\n }\n
\n
\n
\n
{item.service_type_name}
,\n \"Status\": {this.state.active[item.is_active]}
,\n \"EffectiveDate\": this.displayDate(item.effective_date),\n \"ExpiryDate\": this.displayDate(item.expire_date),\n \"Option\":\n })\n ));\n this.setState({ filterDataList: tmp});\n }\n })\n .catch((e) => {\n console.log(\"error loading service type\", e);\n });\n }\n\n setOperator = (event) => {\n this.setState({\n operatorID: event.target.value\n });\n\n const filterProjectdata = JSON.parse(\n localStorage.getItem(\"projectData\")\n ).filter((data) => {\n return data.operator_id == event.target.value;\n });\n\n this.setState({\n projectID: \"\", \n projectData: filterProjectdata,\n });\n\n };\n setProjectData = (event) => {\n this.setState({\n projectID: event.target.value\n })\n };\n\n setOperatorAdd = (event) => {\n this.setState({\n operatorIDAdd: event.target.value\n });\n\n const filterProjectdataAdd = JSON.parse(\n localStorage.getItem(\"projectData\")\n ).filter((data) => {\n return data.operator_id == event.target.value;\n });\n\n this.setState({\n projectIDAdd: \"\",\n projectDataAdd: filterProjectdataAdd,\n });\n\n };\n\n setProjectDataAdd = (event) => {\n this.setState({\n projectIDAdd: event.target.value\n })\n };\n\n setserviceTypeCodeAdd = (event) => {\n this.setState({\n serviceTypeCodeAdd: event.target.value\n })\n }\n\n setserviceTypeNameAdd = (event) => {\n this.setState({\n serviceTypeNameAdd: event.target.value\n })\n }\n\n setStatus = (event) => {\n this.setState({\n statusAdd: event.target.value\n })\n }\n\n setSearchText = (event) => {\n this.setState({\n where: event.target.value\n })\n }\n\n onChangeEffectiveDate = (date, dateString) =>{\n this.setState({\n EffectiveDateAdd: dateString,\n EffectiveDateAddFilter: moment(dateString,\"DD/MM/YYYY\")\n })\n }\n\n onChangeExpiryDate = (date, dateString) => {\n this.setState({\n ExpiryDateAdd: dateString\n })\n }\n\n onAddserviceType = () => {\n window.scrollTo(0, 0);\n if(this.state.AddServiceTypeDisplay == \"none\"){\n this.setState({\n AddServiceTypeDisplay: \"block\"\n })\n }else{\n this.setState({\n AddServiceTypeDisplay: \"none\"\n })\n }\n }\n\nonCallConfirmWindow = () => {\n if(this.state.ConfirmDisplay == \"none\"){\n this.setState({ConfirmDisplay: \"block\"});\n }else{\n this.setState({ConfirmDisplay: \"none\", resultAddNewFail: false})\n }\n}\n\nonResetFormAddNew = () => {\n this.onCallConfirmWindow();\n this.onCloseAddNewWindow();\n this.onAddserviceType();\n}\n\nonCloseAddNewWindow = () => {\n this.setState({\n operatorIDAdd: \"\",\n projectIDAdd: \"\",\n serviceTypeCodeAdd: \"\",\n serviceTypeNameAdd: \"\",\n statusAdd: 1,\n EffectiveDateAdd: moment().toDate(),\n EffectiveDateAddFilter: moment().toDate(),\n ExpiryDateAdd: moment().toDate(),\n AddServiceTypeDisplay: \"none\",\n actionServiceType: \"Add\",\n actionServiceTypeButton: \"Add\",\n disableChangeValue: false\n })\n}\ndisplayDate = (data) => {\n if(data != null){\n const day = data.substring(0,10).split(\"-\");\n return day[2] + \"/\" + day[1] + \"/\" + day[0];\n }\n return \"-\";\n}\nonCallConfirmWindowAndCallAddNewAgain = () => {\n this.onCallConfirmWindow();\n this.onAddserviceType();\n}\n\nClickAction = (e) => {\n window.scrollTo(0, 0);\n const operator_id = this.state.operatorIDAdd;\n const project_id = this.state.projectIDAdd;\n e.preventDefault();\n if(this.state.EffectiveDateAdd == \"\"){\n this.setState({fillEffectiveDateDisplay:\"block\"});\n }else{\n this.setState({fillEffectiveDateDisplay:\"none\"});\n /** statement save data */\n (this.state.actionServiceType == \"Add\") ? \n Api.post(\"master_data/insert_job_service_type\", {\n company_id: this.state.companyID,\n operator_id: this.state.operatorIDAdd,\n project_id: this.state.projectIDAdd,\n service_type_code: this.state.serviceTypeCodeAdd,\n service_type_name: this.state.serviceTypeNameAdd,\n is_active: this.state.statusAdd,\n effective_date: moment(this.state.EffectiveDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"),\n expire_date: (this.state.ExpiryDateAdd) != ''? moment(this.state.ExpiryDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"):null,\n create_by: Cookies.get(\"userId\")\n })\n .then((res) => {\n console.log('Action: Add');\n const { result } = res.data;\n if (result.code === \"P\") {\n this.setState({resultAddNewFail: false})\n \n this.onCloseAddNewWindow();\n }else{\n this.setState({AddServiceTypeDisplay : \"none\",resultAddNewFail: true})\n }\n if(result.showText == \"Success\"){\n this.setState({resultAddNewText:\"เพิ่มข้อมูลเสร็จสิ้น\"});\n }else{\n this.setState({resultAddNewText:result.showText});\n }\n /** confirm */\n this.onCallConfirmWindow();\n this.loadProjectSelection(operator_id, project_id);\n this.loadserviceType();\n\n })\n .catch((e) => {\n console.log(\"error add new service type\", e);\n })\n : this.editData(e)\n \n /** statement save data */\n }\n e.stopPropagation();\n}\n\neditData = (e) => {\n console.log('Action: Edit');\n window.scrollTo(0, 0);\n e.preventDefault();\n if(this.state.EffectiveDateAdd == \"\"){\n this.setState({fillEffectiveDateDisplay:\"block\"});\n }else{\n this.setState({fillEffectiveDateDisplay:\"none\"});\n /** statement save data */\n Api.post(\"master_data/update_job_service_type\", {\n company_id: this.state.companyID,\n operator_id: this.state.operatorIDAdd,\n project_id: this.state.projectIDAdd,\n service_type_id: this.state.serviceTypeIDAdd,\n service_type_code: this.state.serviceTypeCodeAdd,\n service_type_name: this.state.serviceTypeNameAdd,\n is_active: this.state.statusAdd,\n effective_date: moment(this.state.EffectiveDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"),\n expire_date: (this.state.ExpiryDateAdd) != ''? moment(this.state.ExpiryDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"):null,\n update_by: Cookies.get(\"userId\")\n })\n .then((res) => {\n const { result } = res.data;\n if (result.code === \"P\") {\n this.setState({resultAddNewFail: false})\n this.onCloseAddNewWindow();\n }else{\n this.setState({AddServiceTypeDisplay : \"none\",resultAddNewFail: true})\n }\n if(result.showText == \"Success\"){\n this.setState({resultAddNewText:\"แก้ไขข้อมูลเสร็จสิ้น\"});\n }else{\n this.setState({resultAddNewText:result.showText});\n }\n /** confirm */\n this.onCallConfirmWindow();\n this.loadserviceType();\n\n })\n .catch((e) => {\n console.log(\"error editing service type\", e);\n })\n }\n}\n\nrender() {\n const locale = Cookies.get(\"locale\");\n const columns = [\n \n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"Code\"] : `Code`,\n selector: 'Code',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"Name\"] : 'Name',\n selector: 'serviceTypeName',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"status\"] : 'Status',\n selector: 'Status',\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"EffectiveDate\"] : 'Effective Date',\n selector: 'EffectiveDate',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"ExpiredDate\"] : 'Expired Date',\n selector: 'ExpiredDate',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"Action\"] :'Action',\n selector: 'Option',\n ignoreRowClick: true,\n allowOverflow: true,\n button: true,\n style: 'cursor:pointer'\n },\n ];\n\n return (\n \n
Basic Data\n
{this.state.title}
\n
\n
\n
\n
Operator
\n
\n \n \n {this.state.operator.map((item, index) => (\n \n {item.operator_name}\n \n ))}\n \n
\n
\n
\n
Project
\n
\n
\n \n \n {this.state.projectData.map((item, index) => (\n \n ))}\n \n
\n
\n
\n
\n
\n
\n
Ex. 2021-06-18 รูปแบบการหาแบบวันที่
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n {/** load data */}\n \n
\n \n
\n\n
\n
\n
\n {this.state.resultAddNewText}\n
\n
\n
\n
\n {\n (this.state.actionServiceType == \"Add\")?\n ((this.state.resultAddNewFail == true)? : ):null\n } \n {\n (this.state.resultAddNewFail == false)? :null\n }\n
\n
\n
\n
{item.service_cause_name}
,\n \"Status\": {this.state.active[item.is_active]}
,\n \"EffectiveDate\": this.displayDate(item.effective_date),\n \"ExpiryDate\": this.displayDate(item.expire_date),\n \"Option\":\n })\n ));\n this.setState({ filterDataList: tmp});\n }\n })\n .catch((e) => {\n console.log(\"error loading service cause\", e);\n });\n }\n\n setOperator = (event) => {\n this.setState({\n operatorID: event.target.value\n });\n\n const filterProjectdata = JSON.parse(\n localStorage.getItem(\"projectData\")\n ).filter((data) => {\n return data.operator_id == event.target.value;\n });\n\n this.setState({\n projectID: \"\", \n projectData: filterProjectdata,\n });\n\n this.loadserviceCause();\n\n };\n setProjectData = (event) => {\n this.setState({\n projectID: event.target.value\n })\n };\n\n setOperatorAdd = (event) => {\n this.setState({\n operatorIDAdd: event.target.value\n });\n console.log('operatorIDAdd = '+ event.target.value);\n\n const filterProjectdataAdd = JSON.parse(\n localStorage.getItem(\"projectData\")\n ).filter((data) => {\n return data.operator_id == event.target.value;\n });\n\n this.setState({\n projectIDAdd: \"\",\n projectDataAdd: filterProjectdataAdd,\n });\n console.log('projectIDAdd = '+ this.state.projectIDAdd);\n\n };\n\n setProjectDataAdd = (event) => {\n this.setState({\n projectIDAdd: event.target.value\n })\n };\n\n setServiceCauseCodeAdd = (event) => {\n this.setState({\n serviceCauseCodeAdd: event.target.value\n })\n }\n\n setServiceCauseNameAdd = (event) => {\n this.setState({\n serviceCauseNameAdd: event.target.value\n })\n }\n\n setStatus = (event) => {\n this.setState({\n statusAdd: event.target.value\n })\n }\n\n setSearchText = (event) => {\n this.setState({\n where: event.target.value\n })\n }\n\n onChangeEffectiveDate = (date, dateString) =>{\n this.setState({\n EffectiveDateAdd: dateString,\n EffectiveDateAddFilter: moment(dateString,\"DD/MM/YYYY\")\n })\n }\n\n onChangeExpiryDate = (date, dateString) => {\n this.setState({\n ExpiryDateAdd: dateString\n })\n }\n\n onAddserviceCause = () => {\n window.scrollTo(0, 0);\n if(this.state.AddServiceCauseDisplay == \"none\"){\n this.setState({\n AddServiceCauseDisplay: \"block\"\n })\n }else{\n this.setState({\n AddServiceCauseDisplay: \"none\"\n })\n }\n }\n\nonCallConfirmWindow = () => {\n if(this.state.ConfirmDisplay == \"none\"){\n this.setState({ConfirmDisplay: \"block\"});\n }else{\n this.setState({ConfirmDisplay: \"none\", resultAddNewFail: false})\n }\n}\n\nonResetFormAddNew = () => {\n this.onCallConfirmWindow();\n this.onCloseAddNewWindow();\n this.onAddserviceCause();\n}\n\nonCloseAddNewWindow = () => {\n this.setState({\n operatorIDAdd: \"\",\n projectIDAdd: \"\",\n serviceCauseCodeAdd: \"\",\n serviceCauseNameAdd: \"\",\n statusAdd: 1,\n EffectiveDateAdd: moment().toDate(),\n EffectiveDateAddFilter: moment().toDate(),\n ExpiryDateAdd: moment().toDate(),\n AddServiceCauseDisplay: \"none\",\n actionServiceCause: \"Add\",\n actionServiceCauseButton: \"Add\",\n disableChangeValue: false\n })\n}\ndisplayDate = (data) => {\n if(data != null){\n const day = data.substring(0,10).split(\"-\");\n return day[2] + \"/\" + day[1] + \"/\" + day[0];\n }\n return \"-\";\n}\nonCallConfirmWindowAndCallAddNewAgain = () => {\n this.onCallConfirmWindow();\n this.onAddserviceCause();\n}\n\nClickAction = (e) => {\n window.scrollTo(0, 0);\n const operator_id = this.state.operatorIDAdd;\n const project_id = this.state.projectIDAdd;\n e.preventDefault();\n if(this.state.EffectiveDateAdd == \"\"){\n this.setState({fillEffectiveDateDisplay:\"block\"});\n }else{\n this.setState({fillEffectiveDateDisplay:\"none\"});\n /** statement save data */\n (this.state.actionServiceCause == \"Add\") ? \n Api.post(\"master_data/insert_job_service_cause\", {\n company_id: this.state.companyID,\n operator_id: this.state.operatorIDAdd,\n project_id: this.state.projectIDAdd,\n service_cause_code: this.state.serviceCauseCodeAdd,\n service_cause_name: this.state.serviceCauseNameAdd,\n is_active: this.state.statusAdd,\n effective_date: moment(this.state.EffectiveDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"),\n expire_date: (this.state.ExpiryDateAdd) != ''? moment(this.state.ExpiryDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"):null,\n create_by: Cookies.get(\"userId\")\n })\n .then((res) => {\n console.log('Action: Add');\n const { result } = res.data;\n if (result.code === \"P\") {\n this.setState({resultAddNewFail: false})\n \n this.onCloseAddNewWindow();\n }else{\n this.setState({AddServiceCauseDisplay : \"none\",resultAddNewFail: true})\n }\n if(result.showText == \"Success\"){\n this.setState({resultAddNewText:\"เพิ่มข้อมูลเสร็จสิ้น\"});\n }else{\n this.setState({resultAddNewText:result.showText});\n }\n /** confirm */\n this.onCallConfirmWindow();\n this.loadProjectSelection(operator_id, project_id);\n this.loadserviceCause();\n\n })\n .catch((e) => {\n console.log(\"error add new service cause\", e);\n })\n : this.editData(e)\n \n /** statement save data */\n }\n e.stopPropagation();\n}\n\neditData = (e) => {\n console.log('Action: Edit');\n window.scrollTo(0, 0);\n e.preventDefault();\n if(this.state.EffectiveDateAdd == \"\"){\n this.setState({fillEffectiveDateDisplay:\"block\"});\n }else{\n this.setState({fillEffectiveDateDisplay:\"none\"});\n /** statement save data */\n Api.post(\"master_data/update_job_service_cause\", {\n company_id: this.state.companyID,\n operator_id: this.state.operatorIDAdd,\n project_id: this.state.projectIDAdd,\n service_cause_id: this.state.serviceCauseIDAdd,\n service_cause_code: this.state.serviceCauseCodeAdd,\n service_cause_name: this.state.serviceCauseNameAdd,\n is_active: this.state.statusAdd,\n effective_date: moment(this.state.EffectiveDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"),\n expire_date: (this.state.ExpiryDateAdd) != ''? moment(this.state.ExpiryDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"):null,\n update_by: Cookies.get(\"userId\")\n })\n .then((res) => {\n const { result } = res.data;\n if (result.code === \"P\") {\n this.setState({resultAddNewFail: false})\n this.onCloseAddNewWindow();\n }else{\n this.setState({AddServiceCauseDisplay : \"none\",resultAddNewFail: true})\n }\n if(result.showText == \"Success\"){\n this.setState({resultAddNewText:\"แก้ไขข้อมูลเสร็จสิ้น\"});\n }else{\n this.setState({resultAddNewText:result.showText});\n }\n /** confirm */\n this.onCallConfirmWindow();\n this.loadserviceCause();\n \n\n })\n .catch((e) => {\n console.log(\"error editing service cause\", e);\n })\n }\n}\n\nrender() {\n const locale = Cookies.get(\"locale\");\n const columns = [\n \n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"Code\"] : `Code`,\n selector: 'Code',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"Name\"] : 'Name',\n selector: 'serviceCauseName',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"status\"] : 'Status',\n selector: 'Status',\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"EffectiveDate\"] : 'Effective Date',\n selector: 'EffectiveDate',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"ExpiredDate\"] : 'Expired Date',\n selector: 'ExpiredDate',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"Action\"] :'Action',\n selector: 'Option',\n ignoreRowClick: true,\n allowOverflow: true,\n button: true,\n style: 'cursor:pointer'\n },\n ];\n\n return (\n \n
Basic Data\n
{this.state.title}
\n
\n
\n
\n
Operator
\n
\n \n \n {this.state.operator.map((item, index) => (\n \n {item.operator_name}\n \n ))}\n \n
\n
\n
\n
Project
\n
\n
\n \n \n {this.state.projectData.map((item, index) => (\n \n ))}\n \n
\n
\n
\n
\n
\n
\n
Ex. 2021-06-18 รูปแบบการหาแบบวันที่
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n {/** load data */}\n \n
\n \n
\n\n
\n
\n
\n {this.state.resultAddNewText}\n
\n
\n
\n
\n {\n (this.state.actionServiceCause == \"Add\")?\n ((this.state.resultAddNewFail == true)? : ):null\n } \n {\n (this.state.resultAddNewFail == false)? :null\n }\n
\n
\n
\n
{item.work_center_name}
,\n \"plantName\": {item.plant_name}
,\n \"status\": {this.state.active[item.is_active]}
,\n \"effectiveDate\": this.displayDate(item.effective_date),\n \"expiredDate\": this.displayDate(item.expire_date),\n \"Option\":\n })\n ))\n this.setState({ filterDataList: tmp});\n }\n })\n .catch((e) => {\n console.log(\"error loading get_plant\", e);\n });\n }\n\n clickEdit = (plant_id,company_id, work_center_id, plant_name, is_active, effective_date, expire_date) => {\n this.loadWorkCenter(company_id);\n console.log('plant id = '+plant_id);\n this.setState({\n plantIDADD: plant_id,\n companyIDAdd: company_id,\n workCenterIDAdd: work_center_id,\n plantNameAdd: plant_name,\n statusAdd: is_active,\n EffectiveDateAdd: (effective_date != null)? this.displayDate(effective_date): \"\",\n EffectiveDateAddFilter: (effective_date != null)? effective_date: \"\",\n ExpiryDateAdd: (expire_date != null)? this.displayDate(expire_date) : \"\",\n actionPlant: \"Edit\",\n actionPlantButton: \"Save\"\n\n })\n this.onAddPlant();\n };\n\n loadWorkCenter = (company_id) =>{\n this.setState({workCenterDataAdd:[]});\n /* get workcenter */\n Api.post(\"master_data/work_center_single\", {\n company_id: company_id,\n is_active: 1,\n where: \"\",\n })\n .then((res) => {\n this.setState({workCenterDataAdd:res.data.data.result});\n })\n .catch((e) => {\n console.log(e);\n });\n }\n setWorkCenterAdd = (event) => {\n this.setState({workCenterIDAdd:event.target.value})\n }\n \n setStatus = (event) => {\n this.setState({\n statusAdd: event.target.value\n })\n }\n\n setSearchText = (event) => {\n this.setState({\n where: event.target.value\n })\n }\n\n onChangeEffectiveDate = (dateString) =>{\n this.setState({\n EffectiveDateAdd: dateString,\n EffectiveDateAddFilter: dateString\n })\n }\n\n onChangeExpiryDate = (dateString) => {\n this.setState({\n ExpiryDateAdd: dateString\n })\n }\n\n onAddPlant = () => {\n window.scrollTo(0, 0);\n if(this.state.AddPlantDisplay == \"none\"){\n this.setState({\n AddPlantDisplay: \"block\"\n })\n }else{\n this.setState({\n AddPlantDisplay: \"none\"\n })\n }\n }\n\nonCallConfirmWindow = () => {\n if(this.state.ConfirmDisplay == \"none\"){\n this.setState({ConfirmDisplay: \"block\"});\n }else{\n this.setState({ConfirmDisplay: \"none\", resultAddNewFail: false})\n }\n}\n\nonResetFormAddNew = () => {\n this.onCallConfirmWindow();\n this.onCloseAddNewWindow();\n this.onAddPlant();\n}\n\nonCloseAddNewWindow = () => {\n this.setState({\n companyIDAdd: \"\",\n workCenterDataAdd: [],\n workCenterIDAdd: \"\",\n plantNameAdd: \"\",\n statusAdd: 1,\n EffectiveDateAdd: moment().toDate(),\n EffectiveDateAddFilter: moment().toDate(),\n ExpiryDateAdd: moment().toDate(),\n AddPlantDisplay: \"none\",\n actionPlant: \"Add\",\n actionPlantButton: \"Add\",\n disableChangeValue: false\n })\n}\n\ndisplayDate = (data) => {\n if(data != null){\n const day = data.substring(0,10).split(\"-\");\n return day[2] + \"/\" + day[1] + \"/\" + day[0];\n }\n return \"-\";\n}\nonCallConfirmWindowAndCallAddNewAgain = () => {\n this.onCallConfirmWindow();\n this.onAddPlant();\n}\n\nClickAction = (e) => {\n window.scrollTo(0, 0);\n e.preventDefault();\n\n // check validate value\n if(this.state.plantNameAdd.length != 4){\n this.notify(\"info\", \"Informaton\", \"Please key plant name 4 digital charactor only.\");\n e.stopPropagation();\n } else{\n if(this.state.EffectiveDateAdd == \"\"){\n this.setState({fillEffectiveDateDisplay:\"block\"});\n }else{\n this.setState({fillEffectiveDateDisplay:\"none\"});\n // statement save data \n (this.state.actionPlant == \"Add\") ? \n \n Api.post(\"master_data/insert_plant\", {\n company_id: this.state.companyIDAdd,\n work_center_id: this.state.workCenterIDAdd,\n plant_name: this.state.plantNameAdd,\n is_active: this.state.statusAdd,\n create_by: Cookies.get(\"userId\"),\n effective_date: moment(this.state.EffectiveDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"),\n expire_date: (this.state.ExpiryDateAdd) != ''? moment(this.state.ExpiryDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"):null,\n TokenUser : Cookies.get(`OperationToken`)\n })\n .then((res) => {\n console.log('Action: Add');\n const { result, data } = res.data;\n if (result.code === \"P\") {\n this.setState({resultAddNewFail: false})\n \n this.onCloseAddNewWindow();\n }else{\n this.setState({AddPlantDisplay : \"none\",resultAddNewFail: true})\n }\n if(result.showText == \"Success\"){\n this.setState({resultAddNewText:\"เพิ่มข้อมูลเสร็จสิ้น\"});\n }else{\n this.setState({resultAddNewText:result.showText});\n }\n //confirm\n this.onCallConfirmWindow();\n\n })\n .catch((e) => {\n console.log(\"error add new plant\", e);\n })\n : this.editData(e)// statement save data\n \n }\n }\n e.stopPropagation();\n}\n\neditData = (e) => {\n console.log('Action: Edit');\n window.scrollTo(0, 0);\n e.preventDefault();\n if(this.state.EffectiveDateAdd == \"\"){\n this.setState({fillEffectiveDateDisplay:\"block\"});\n }else{\n this.setState({fillEffectiveDateDisplay:\"none\"});\n /** statement save data */\n Api.post(\"master_data/update_plant\", {\n plant_id : this.state.plantIDADD,\n company_id: this.state.companyIDAdd,\n work_center_id: this.state.workCenterIDAdd,\n plant_name: this.state.plantNameAdd, \n is_active: this.state.statusAdd,\n update_by: Cookies.get(\"userId\"),\n effective_date: moment(this.state.EffectiveDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"),\n expire_date: (this.state.ExpiryDateAdd) != ''? moment(this.state.ExpiryDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"):null,\n TokenUser : Cookies.get(`OperationToken`)\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.code === \"P\") {\n this.setState({resultAddNewFail: false})\n this.onCloseAddNewWindow();\n }else{\n this.setState({AddPlantDisplay : \"none\",resultAddNewFail: true})\n }\n if(result.showText == \"Success\"){\n this.setState({resultAddNewText:\"แก้ไขข้อมูลเสร็จสิ้น\"});\n }else{\n this.setState({resultAddNewText:result.showText});\n }\n /** confirm */\n this.onCallConfirmWindow();\n //this.loadSLOCPlant();\n\n })\n .catch((e) => {\n console.log(\"error editing plant\", e);\n })\n }\n}\n/*8888888888888888888888888888*/\nsetCompany = (event) => {\n this.setState({\n companyID: event.target.value\n })\n}\n\nsetCompanyAdd = (event) => {\n this.setState({\n companyIDAdd: event.target.value,\n workCenterIDAdd: \"\"\n })\n if(event.target.value == null){\n this.setState({workCenterDataAdd:[]})\n }else{\n this.loadWorkCenter(event.target.value);\n }\n}\n\nsetWorkCenterAdd = (event) => {\n this.setState({\n workCenterIDAdd: event.target.value\n })\n}\n\nsetPlantNameAdd = (event) => {\n this.setState({\n plantNameAdd: event.target.value\n })\n}\n\nonSearch = () => {\n this.loadSLOCPlant();\n}\n\nrender() {\n //console.log('company:'+this.state.companyDataList.auth);\n //console.log('company list:'+this.state.companyDataList[\"companyData\"]);\n //console.log('Language:'+this.state.LangTranslate);\n const locale = Cookies.get(\"locale\");\n const columns = [\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"CompanyName\"] : `Company Name`,\n selector: 'companyName',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"WorkCN\"] : 'Work Center Name',\n selector: 'workCenterName',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"plantName\"] : 'Plant Name',\n selector: 'plantName',\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"status\"] : 'Status',\n selector: 'status',\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"EffectiveDate\"] : 'Effective Date',\n selector: 'effectiveDate',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"ExpiredDate\"] : 'Expired Date',\n selector: 'expiredDate',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"Action\"] :'Action',\n selector: 'Option',\n ignoreRowClick: true,\n allowOverflow: true,\n button: true,\n style: 'cursor:pointer'\n },\n ];\n\n return (\n \n
Basic Data\n
{this.state.title}
\n
\n
\n
\n
\n
\n \n
\n
\n
this.setSearchText(e)}\n placeholder=\"Search Plant Name\"\n style={{ width: 200 }}\n value={this.state.where}\n \n />this.onSearch()} className=\"but-search\"/> \n
\n
\n \n
\n \n
\n
\n
\n \n
\n {/** load data */}\n \n
\n \n
\n\n
\n
\n
\n {this.state.resultAddNewText}\n
\n
\n
\n
\n {\n (this.state.actionPlant == \"Add\")?\n ((this.state.resultAddNewFail == true)? : ):null\n } \n {\n (this.state.resultAddNewFail == false)? :null\n }\n
\n
\n
\n
{item.area_code}
,\n \"plantName\": {item.plant}
,\n \"SLOCName\": {item.sloc_name}
,\n \"description\": {item.sloc_description}
,\n \"status\": {(item.is_active)? \"Active\":\"Inactive\"}
,\n \"effectiveDate\": this.displayDate(item.effective_date),\n \"expiredDate\": this.displayDate(item.expire_date),\n \"Option\":\n })))\n this.setState({ filterDataList: tmp},()=>console.log('data',this.state.filterDataList));\n tmp.length = 0;\n }\n })\n .catch((e) => {\n console.log(e);\n });\n }\n\n clickEdit = (sloc_id,plant_id,plant_name,company_id, work_center_id,sloc_name,sloc_description,is_active, effective_date, expire_date) => {\n this.loadWorkCenter(company_id);\n console.log('id:'+plant_id+' name:'+plant_name);\n this.setState({\n slocIDAdd: sloc_id,\n companyIDAdd: company_id,\n workCenterIDAdd: work_center_id,\n SLOCNameAdd: sloc_name,\n SLOCDescriptionAdd: sloc_description,\n statusAdd: is_active,\n EffectiveDateAdd: (effective_date != null)? this.displayDate(effective_date) : \"\",\n EffectiveDateAddFilter: (effective_date != null)? effective_date : \"\",\n ExpiryDateAdd: (expire_date != null)? this.displayDate(expire_date) : \"\",\n actionPlantSLOC: \"Edit\",\n actionPlantSLOCButton: \"Save\"\n })\n this.setState({plantList:[]});\n Api.post(\"master_data/get_plant_by_workcenter\", {\n company_id: this.state.companyID,\n where: \"pl.work_center_id = \"+work_center_id,\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.code === \"P\") {\n this.setState({plantList: data.result});\n }\n })\n .catch((e) => {\n console.log(\"error load plant\", e);\n })\n this.setState({plantIDAdd: plant_id,\n plantNameAdd: plant_name});\n this.onAddPlantSLOC();\n };\n\n loadWorkCenter = (company_id) =>{\n this.setState({workCenterDataAdd:[]});\n /* get workcenter */\n Api.post(\"master_data/work_center_single\", {\n company_id: company_id,\n is_active: 1,\n where: \"\",\n })\n .then((res) => {\n this.setState({workCenterDataAdd:res.data.data.result});\n })\n .catch((e) => {\n console.log(e);\n });\n }\n\n loadPlant = () => {\n this.setState({plantList:[]});\n Api.post(\"master_data/get_plant_by_workcenter\", {\n company_id: this.state.companyID,\n where: this.state.where,\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.code === \"P\") {\n this.setState({plantList: data.result});\n }\n })\n .catch((e) => {\n console.log(\"error load plant\", e);\n })\n }\n\n setPlant = (event) => {\n var val = event.target.value;\n var p = val.split(\"_\");\n this.setState({plantIDAdd: p[0], plantNameAdd: p[1], plant: val});\n }\n\n setWorkCenterAdd = (event) => {\n this.setState({workCenterIDAdd:event.target.value})\n this.setState({plantList:[]});\n Api.post(\"master_data/get_plant_by_workcenter\", {\n company_id: this.state.companyID,\n where: \"pl.work_center_id = \"+event.target.value,\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.code === \"P\") {\n this.setState({plantList: data.result});\n }\n })\n .catch((e) => {\n console.log(\"error load plant\", e);\n })\n }\n\n setStatus = (event) => {\n this.setState({\n statusAdd: event.target.value\n })\n }\n\n setSearchText = (event) => {\n this.setState({\n where: event.target.value\n })\n }\n\n onSearch = () => {\n this.loadPlantSloc();\n }\n\n onChangeEffectiveDate = (dateString) =>{\n this.setState({\n EffectiveDateAdd: dateString,\n EffectiveDateAddFilter: dateString\n })\n }\n\n onChangeExpiryDate = (dateString) => {\n this.setState({\n ExpiryDateAdd: dateString\n })\n }\n\n onAddPlantSLOC = () => {\n window.scrollTo(0, 0);\n if(this.state.AddPlantSlocDisplay == \"none\"){\n this.setState({\n AddPlantSlocDisplay: \"block\"\n })\n }else{\n this.setState({\n AddPlantSlocDisplay: \"none\"\n })\n }\n }\n\nonCallConfirmWindow = () => {\n if(this.state.ConfirmDisplay == \"none\"){\n this.setState({ConfirmDisplay: \"block\"});\n }else{\n this.setState({ConfirmDisplay: \"none\", resultAddNewFail: false})\n }\n}\n\nonResetFormAddNew = () => {\n this.onCallConfirmWindow();\n this.onCloseAddNewWindow();\n this.onAddPlantSLOC();\n}\n\nonCloseAddNewWindow = () => {\n this.setState({\n slocIDAdd: \"\",\n plantIDAdd: \"\",\n plantNameAdd: \"\",\n companyIDAdd: \"\",\n workCenterIDAdd: \"\",\n workCenterDataAdd: [],\n SLOCNameAdd: \"\",\n SLOCDescriptionAdd: \"\",\n statusAdd: 1,\n EffectiveDateAdd: moment().toDate(),\n EffectiveDateAddFilter: moment().toDate(),\n ExpiryDateAdd: moment().toDate(),\n actionPlantSLOC: \"Add\",\n actionPlantSLOCButton: \"Add\",\n disableChangeValue: false\n })\n this.onAddPlantSLOC();\n}\n\ndisplayDate = (data) => {\n if(data != null){\n const day = data.substring(0,10).split(\"-\");\n return day[2] + \"/\" + day[1] + \"/\" + day[0];\n }\n return \"-\";\n}\nonCallConfirmWindowAndCallAddNewAgain = () => {\n this.onCallConfirmWindow();\n this.onAddPlantSLOC();\n}\n\nClickAction = (e) => {\n window.scrollTo(0, 0);\n e.preventDefault();\n // check validate value\n if(this.state.SLOCNameAdd.length != 4){\n this.notify(\"info\", \"Informaton\", \"Please key sloc name 4 digital only.\");\n e.stopPropagation();\n } else{\n if(this.state.EffectiveDateAdd == \"\"){\n this.setState({fillEffectiveDateDisplay:\"block\"});\n }else{\n this.setState({fillEffectiveDateDisplay:\"none\"});\n\n (this.state.actionPlantSLOC == \"Add\") ?\n\n Api.post(\"master_data/insert_sloc\", {\n plant_id : this.state.plantIDAdd,\n company_id : this.state.companyIDAdd,\n work_center_id : this.state.workCenterIDAdd,\n plant : this.state.plantNameAdd,\n sloc_name : this.state.SLOCNameAdd,\n sloc_description : this.state.SLOCDescriptionAdd,\n is_active : this.state.statusAdd,\n create_by: Cookies.get(\"userId\"),\n effective_date: moment(this.state.EffectiveDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"),\n expire_date: (this.state.ExpiryDateAdd) != ''? moment(this.state.ExpiryDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"):null,\n TokenUser : Cookies.get(`OperationToken`)\n })\n .then((res) => {\n console.log('Action: Add');\n const { result, data } = res.data;\n if (result.code === \"P\") {\n this.setState({resultAddNewFail: false})\n\n this.onCloseAddNewWindow();\n }else{\n this.setState({AddPlantSlocDisplay : \"none\",resultAddNewFail: true})\n }\n if(result.showText == \"Success\"){\n this.setState({resultAddNewText:\"เพิ่มข้อมูลเสร็จสิ้น\"});\n }else{\n this.setState({resultAddNewText:result.showText});\n }\n /** confirm */\n this.onCallConfirmWindow();\n this.loadPlantSloc();\n\n })\n .catch((e) => {\n console.log(\"error add new problem type\", e);\n })\n : this.editData(e)\n\n /** statement save data */\n }\n }\n e.stopPropagation();\n}\n\neditData = (e) => {\n console.log('Action: Edit');\n window.scrollTo(0, 0);\n e.preventDefault();\n if(this.state.EffectiveDateAdd == \"\"){\n this.setState({fillEffectiveDateDisplay:\"block\"});\n }else{\n this.setState({fillEffectiveDateDisplay:\"none\"});\n /** statement save data */\n Api.post(\"master_data/update_sloc\", {\n sloc_id : this.state.slocIDAdd,\n plant_id : this.state.plantIDAdd,\n company_id: this.state.companyIDAdd,\n work_center_id: this.state.workCenterIDAdd,\n plant : this.state.plantNameAdd,\n sloc_name : this.state.SLOCNameAdd,\n sloc_description : this.state.SLOCDescriptionAdd,\n is_active: this.state.statusAdd,\n update_by: Cookies.get(\"userId\"),\n effective_date: moment(this.state.EffectiveDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"),\n expire_date: (this.state.ExpiryDateAdd) != ''? moment(this.state.ExpiryDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"):null,\n TokenUser : Cookies.get(`OperationToken`)\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.code === \"P\") {\n this.setState({resultAddNewFail: false})\n this.onCloseAddNewWindow();\n }else{\n this.setState({AddPlantDisplay : \"none\",resultAddNewFail: true})\n }\n if(result.showText == \"Success\"){\n this.setState({resultAddNewText:\"แก้ไขข้อมูลเสร็จสิ้น\"});\n }else{\n this.setState({resultAddNewText:result.showText});\n }\n // confirm\n this.onCallConfirmWindow();\n this.loadPlantSloc();\n\n })\n .catch((e) => {\n console.log(\"error editing plant\", e);\n })\n\n }\n}\n/*8888888888888888888888888888*/\nsetCompany = (event) => {\n this.setState({\n companyID: event.target.value\n })\n}\n\nsetCompanyAdd = (event) => {\n this.setState({\n companyIDAdd: event.target.value,\n workCenterIDAdd: \"\"\n })\n if(event.target.value == null){\n this.setState({workCenterDataAdd:[]})\n }else{\n this.loadWorkCenter(event.target.value);\n }\n}\n\nsetWorkCenterAdd = (event) => {\n this.setState({\n workCenterIDAdd: event.target.value,\n plantIDAdd: \"\",\n plantNameAdd: \"\"\n })\n\n this.setState({plantList:[]});\n Api.post(\"master_data/get_plant_by_workcenter\", {\n company_id: this.state.companyID,\n where: \"pl.work_center_id = \"+event.target.value,\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.code === \"P\") {\n this.setState({plantList: data.result});\n }\n })\n .catch((e) => {\n console.log(\"error load plant\", e);\n })\n}\n\nsetSLOCNameAdd = (event) => {\n this.setState({\n SLOCNameAdd: event.target.value\n })\n}\n\nsetDescriptionAdd = (event) => {\n this.setState({\n SLOCDescriptionAdd: event.target.value\n })\n}\n\nrender() {\n //console.log('company:'+this.state.companyDataList.auth);\n //console.log('company list:'+this.state.companyDataList[\"companyData\"]);\n //console.log('Language:'+this.state.LangTranslate);\n const locale = Cookies.get(\"locale\");\n const columns = [\n\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"CompanyName\"] : `Company Name`,\n selector: 'companyName',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"WorkCN\"] : 'Work Center Name',\n selector: 'workCenterName',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"plantName\"] : 'Plant Name',\n selector: 'plantName',\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"SLOCName\"] : 'SLOC Name',\n selector: 'SLOCName',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"Description\"] : 'Description',\n selector: 'description',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"status\"] : 'Status',\n selector: 'status',\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"EffectiveDate\"] : 'Effective Date',\n selector: 'effectiveDate',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"ExpiredDate\"] : 'Expired Date',\n selector: 'expiredDate',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"Action\"] :'Action',\n selector: 'Option',\n ignoreRowClick: true,\n allowOverflow: true,\n button: true,\n style: 'cursor:pointer'\n },\n ];\n\n return (\n \n
Basic Data\n
{this.state.title}
\n
\n
\n
\n
\n
\n this.setCompany(e)}\n value={this.state.companyID}\n\n /*required*/\n >\n \n {\n this.state.companyDataList.map((item, index) => (\n \n ))}\n \n
\n
\n
this.setSearchText(e)}\n placeholder=\"Search SLOC Name\"\n style={{ width: 200,border: \"1px solid #d9d9d9\"}}\n value={this.state.where}\n\n /> this.onSearch()} className=\"but-search\"/>\n\n
\n
\n\n
\n \n
\n
\n
\n\n
\n {/** load data */}\n \n
\n\n
\n\n
\n
\n
\n {this.state.resultAddNewText}\n
\n
\n
\n
\n {\n (this.state.actionPlantSLOC == \"Add\")?\n ((this.state.resultAddNewFail == true)? : ):null\n } \n {\n (this.state.resultAddNewFail == false)? :null\n }\n
\n
\n
\n
{(item.is_active)? \"Active\":\"Inactive\"}
,\n \"effectiveDate\": this.displayDate(item.effective_date),\n \"expiredDate\": this.displayDate(item.expire_date),\n \"Option\":\n })\n ));\n this.setState({ filterDataList: tmp, operatorIDAdd:this.state.operatorID,projectIDAdd:this.state.projectID});\n \n }\n })\n .catch((e) => {\n console.log(e);\n });\n }\n\n /** item.team_ref_sloc_id,item.team_id,item.plant_id,item.sloc_id,item.is_active,item.effective_date,item.expire_date */\n clickEdit = (team_ref_sloc_id,team_group_id, team_id, plant_id, sloc_id, is_active, effective_date, expire_date) => {\n console.log('team_id:'+team_id+' plant_id:'+plant_id+' sloc id:'+sloc_id+' is_active:'+is_active);\n this.setState({\n operatorIDAdd: this.state.operatorID,\n projectIDAdd: this.state.projectID,\n teamRefSLOCIDAdd: team_ref_sloc_id,\n teamGroupIDAdd: team_group_id,\n teamIDAdd: team_id,\n plantIDAdd: plant_id,\n EffectiveDateAdd: (effective_date != null)? this.displayDate(effective_date) : \"\",\n EffectiveDateAddFilter: (effective_date != null)? effective_date : \"\",\n ExpiryDateAdd: (expire_date != null)? this.displayDate(expire_date) : \"\",\n actionTeamPlantSLOC: \"Edit\",\n actionTeamPlantSLOCButton: \"Save\"\n })\n this.state.statusAdd = is_active;\n console.log('status:'+this.state.statusAdd);\n this.onAddTeamPlantSLOC();\n Api.post(\"master_data/GetTeamSub\", {\n company_id : this.state.companyID,\n operator_id : this.state.operatorID,\n project_id : this.state.projectID,\n team_group_id : team_group_id\n })\n .then((res) => {\n const { result, list } = res.data;\n if (result.value === \"P\") {\n this.setState({ TeamSubDataList: list})\n }\n })\n .catch((e) => {\n console.log(e);\n });\n Api.post(\"master_data/get_sloc_by_plant\", {\n company_id: this.state.companyID,\n plant_id: plant_id,\n where: \"\",\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.code === \"P\") {\n this.setState({SLOCList: data.result, SLOCIDAdd: sloc_id});\n }\n })\n .catch((e) => {\n console.log(\"error load sloc\", e);\n })\n\n };\n\n setOperator = (event) => {\n this.setState({\n operatorID: event.target.value\n });\n\n const filterProjectdata = JSON.parse(\n localStorage.getItem(\"projectData\")\n ).filter((data) => {\n return data.operator_id == event.target.value;\n });\n\n this.setState({\n projectID: \"\", \n projectData: filterProjectdata,\n });\n\n }\n\n setProjectData = (event) => {\n this.setState({\n projectID: event.target.value\n })\n }\n\n setStatus = (event) => {\n this.setState({\n statusAdd: event.target.value\n })\n }\n\n setSearchText = (event) => {\n this.state.where = event.target.value\n }\n\n onChangeEffectiveDate = (date, dateString) =>{\n this.setState({\n EffectiveDateAdd: date,\n EffectiveDateAddFilter: date\n })\n console.log('effect date = '+this.state.EffectiveDateAdd)\n }\n\n onChangeExpiryDate = (date, dateString) => {\n this.setState({\n ExpiryDateAdd: date\n })\n }\n\n onAddTeamPlantSLOC = () => {\n window.scrollTo(0, 0);\n if(this.state.AddTeamPlantSlocDisplay == \"none\"){\n this.setState({\n AddTeamPlantSlocDisplay: \"block\"\n })\n }else{\n this.setState({\n AddTeamPlantSlocDisplay: \"none\"\n })\n }\n }\n\nonCallConfirmWindow = () => {\n if(this.state.ConfirmDisplay == \"none\"){\n this.setState({ConfirmDisplay: \"block\"});\n }else{\n this.setState({ConfirmDisplay: \"none\", resultAddNewFail: false})\n }\n}\n\nonResetFormAddNew = () => {\n this.onCallConfirmWindow();\n this.onCloseAddNewWindow();\n}\n\nonCloseAddNewWindow = () => {\n this.setState({\n operatorIDAdd: 0,\n projectIDAdd: 0,\n teamGroupIDAdd: 0,\n TeamGroupDataList: [],\n teamRefSLOCIDAdd: 0,\n teamIDAdd: 0,\n TeamSubDataList: [],\n plantIDAdd: 0,\n SLOCIDAdd: 0,\n SLOCList: [],\n statusAdd: 1,\n EffectiveDateAdd: moment().toDate(),\n EffectiveDateAddFilter: moment().toDate(),\n ExpiryDateAdd: moment().toDate(),\n actionTeamPlantSLOC: \"Add\",\n actionTeamPlantSLOCButton: \"Add\",\n disableChangeValue: false\n })\n this.onAddTeamPlantSLOC();\n this.loadTeamGroup();\n}\n\ndisplayDate = (data) => {\n if(data != null){\n const day = data.substring(0,10).split(\"-\");\n return day[2] + \"/\" + day[1] + \"/\" + day[0];\n }\n return \"-\";\n}\n\nonCallConfirmWindowAndCallAddNewAgain = () => {\n this.onCallConfirmWindow();\n this.onAddTeamPlantSLOC();\n}\n\nClickAction = (e) => {\n window.scrollTo(0, 0);\n e.preventDefault();\n\n if(this.state.EffectiveDateAdd == \"\"){\n this.setState({fillEffectiveDateDisplay:\"block\"});\n }else{\n this.setState({fillEffectiveDateDisplay:\"none\"});\n // statement save data \n (this.state.actionTeamPlantSLOC == \"Add\") ? \n\n Api.post(\"master_data/insert_team_plant_sloc\", {\n team_id : this.state.teamIDAdd,\n plant_id : this.state.plantIDAdd,\n sloc_id : this.state.SLOCIDAdd,\n is_active: this.state.statusAdd,\n effective_date: moment(this.state.EffectiveDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"),\n expire_date: (this.state.ExpiryDateAdd) != ''? moment(this.state.ExpiryDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"):null\n })\n .then((res) => {\n console.log('Action: Add');\n const { result, data } = res.data;\n if (result.code === \"P\") {\n this.setState({resultAddNewFail: false})\n \n this.onCloseAddNewWindow();\n }else{\n this.setState({AddProblemTypeDisplay : \"none\",resultAddNewFail: true})\n }\n if(result.showText == \"Success\"){\n this.setState({resultAddNewText:\"เพิ่มข้อมูลเสร็จสิ้น\"});\n }else{\n this.setState({resultAddNewText:result.showText});\n }\n /** confirm */\n this.onCallConfirmWindow();\n this.loadTeamPlantSLOC();\n })\n .catch((e) => {\n console.log(\"error add new problem type\", e);\n })\n : this.editData(e)\n \n /** statement save data */\n }\n \n e.stopPropagation();\n}\n\neditData = (e) => {\n console.log('Action: Edit');\n window.scrollTo(0, 0);\n e.preventDefault();\n if(this.state.EffectiveDateAdd == \"\"){\n this.setState({fillEffectiveDateDisplay:\"block\"});\n }else{\n this.setState({fillEffectiveDateDisplay:\"none\"});\n /** statement save data */\n Api.post(\"master_data/update_team_plant_sloc\", {\n team_ref_sloc_id : this.state.teamRefSLOCIDAdd,\n team_id : this.state.teamIDAdd,\n plant_id : this.state.plantIDAdd,\n sloc_id : this.state.SLOCIDAdd,\n is_active: this.state.statusAdd,\n effective_date: moment(this.state.EffectiveDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"),\n expire_date: (this.state.ExpiryDateAdd) != ''? moment(this.state.ExpiryDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"):null,\n TokenUser : Cookies.get(`OperationToken`)\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.code === \"P\") {\n this.setState({resultAddNewFail: false})\n this.onCloseAddNewWindow();\n }else{\n this.setState({AddPlantDisplay : \"none\",resultAddNewFail: true})\n }\n if(result.showText == \"Success\"){\n this.setState({resultAddNewText:\"แก้ไขข้อมูลเสร็จสิ้น\"});\n }else{\n this.setState({resultAddNewText:result.showText});\n }\n // confirm \n this.onCallConfirmWindow();\n this.loadTeamPlantSLOC();\n })\n .catch((e) => {\n console.log(\"error editing Team Plant SLOC\", e);\n })\n \n }\n}\n\n/*8888888888888888888888888888*/\nsetTeamAdd = (event) => {\n this.setState({teamIDAdd: event.target.value})\n}\n\nsetTeamGroupAdd = (event) => {\n //console.log('tg='+event.target.value);\n this.state.teamGroupIDAdd = event.target.value;\n this.loadTeamSub();\n}\n\nsetPlantNameAdd = (event) => {\n this.setState({plantNameAdd:event.target.value})\n}\n\nsetSLOCNameAdd = (event) => {\n this.setState({SLOCIDAdd: event.target.value})\n}\n\nsetDescriptionAdd = (event) => {\n this.setState({descriptionAdd:event.target.value})\n}\n\nrender() {\n const locale = Cookies.get(\"locale\");\n const columns = [\n \n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"teamName\"] : `Team Name`,\n selector: 'teamName',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"plantName\"] : 'Plant Name',\n selector: 'plantName',\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"SLOCName\"] : 'SLOC Name',\n selector: 'SLOCName',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"status\"] : 'Status',\n selector: 'status',\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"EffectiveDate\"] : 'Effective Date',\n selector: 'effectiveDate',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"ExpiredDate\"] : 'Expired Date',\n selector: 'expiredDate',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"Action\"] :'Action',\n selector: 'Option',\n ignoreRowClick: true,\n allowOverflow: true,\n button: true,\n style: 'cursor:pointer'\n },\n ];\n\n return (\n \n
Basic Data\n
{this.state.title}
\n
\n
\n
\n
Operator
\n
\n \n \n {this.state.operator.map((item, index) => (\n \n {item.operator_name}\n \n ))}\n \n
\n
\n
\n
Project
\n
\n
\n \n \n {this.state.projectData.map((item, index) => (\n \n ))}\n \n
\n
\n
\n
this.setSearchText(e)}\n placeholder=\"Search Team Name\"\n style={{ width: \"210px\"}}\n />\n \n \n
\n
\n
\n\n
\n
\n \n
\n
\n
\n
\n\n
\n {/** load data */}\n \n
\n\n
\n\n
\n
\n
\n {this.state.resultAddNewText}\n
\n
\n
\n
\n {\n (this.state.actionTeamPlantSLOC === \"Add\")?\n ((this.state.resultAddNewFail === true)? () : ()):null\n } \n {\n (this.state.resultAddNewFail === false)? :null\n }\n
\n
\n
\n
{item.vendor_name}
,\n \"vendorAddress\": {item.vendor_address}
,\n \"serviceCode\": (item.sum_service_code == null)? 0 Service Code: {item.sum_service_code + \" Service Code\"},\n \"effectiveDate\": this.displayDate(item.effective_date),\n \"expiredDate\": this.displayDate(item.expire_date),\n \"Option\":\n })\n ))\n this.setState({filterDataList: tmp, isLoadingVendor: false})\n }//\n })\n .catch((e) => {\n console.log(\"error add new vendor team group\", e);\n })\n\n}\n\nclickEdit(company_id, operator_id, project_id, vendor_id, vendor_code, vendor_type, vendor_name, vendor_address, contact_person, tel_no, fax_no, list_email,effective_date,expire_date,is_active ){\n this.state.actionCase = \"Edit\";\n this.state.vendorIDAdd = vendor_id;\n this.state.VendorAreaSelectDataListEdit = [];\n\n const filterOperatordataRowAdd = JSON.parse(\n localStorage.getItem(\"operator\")\n ).filter((data) => {\n return data.company_id == company_id;\n });\n\n const filterProjectdataRowAdd = JSON.parse(\n localStorage.getItem(\"projectData\")\n ).filter((data) => {\n return data.operator_id == operator_id;\n });\n\n Api.post(\"master_data/get_data_by_vendor\", {\n \"company_id\": company_id,\n \"vendor_id\" : vendor_id,\n \"where\" : \"\"\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.code === \"P\") {\n const tmp = [];\n (data.result.map(item =>(\n tmp.push({\n \"vendor_area_id\" : item.vendor_area_id,\n \"area_id\" : item.area_id,\n \"area_code\" : item.area_code,\n \"sub_area_id\" : item.sub_area_id,\n \"sub_area_code\" : item.sub_area_code,\n \"zone_id\" : item.zone_id,\n \"zone_code\" : item.zone_code,\n \"delete_flag\" : null,\n \"vendor_contact_id\" : item.vendor_contact_id\n })\n )))\n this.setState({ VendorAreaSelectDataListEdit: tmp, vendorContactID: tmp.vendor_contact_id}, ()=> {\n console.log('click edit show list area set = ', this.state.VendorAreaSelectDataListEdit)\n });\n tmp = [];\n }\n })\n .catch((e) => {\n console.log(\"error add new vendor team group\", e);\n })\n\n Api.post(\"master_data/get_area_name\", {\n \"company_id\" : company_id\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.value === \"P\") {\n this.setState({ areaDataList: data.result})\n }\n })\n .catch((e) => {\n console.log(e);\n });\n\n Api.post(\"master_data/get_zone_name\", {\n\n \"company_id\" : company_id,\n \"operator_id\" : operator_id,\n \"project_id\" : project_id\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.value === \"P\") {\n this.setState({ vendorZoneDataList: data.result})\n }\n })\n .catch((e) => {\n console.log(e);\n });\n\n this.setState({companyIDAdd: company_id, vendorCodeAdd: vendor_code, vendorTypeAdd: vendor_type, vendorNameAdd: vendor_name, vendorAddressAdd: vendor_address, contactNameAdd: contact_person, telephoneAdd: tel_no, faxNoAdd: fax_no, emailAdd: list_email, EffectiveDateVendorAdd:(effective_date != null)? this.displayDate(effective_date): \"\", EffectiveDateVendorAddFilter: (effective_date != null)? this.displayDate(effective_date): \"\",ExpiryDateVendorAdd: (expire_date != null)? this.displayDate(expire_date) : \"\", statusVendorAdd: is_active, AddVendorGroupDisplay1: \"block\",operatorDataRowAdd: filterOperatordataRowAdd,\n operatorIDRowAdd: 0, projectDataRowAdd: filterProjectdataRowAdd, projectIDRowAdd: 0});\n\n}\n\nsetSearchText = (event) => {\n this.setState({\n where: event.target.value\n })\n}\n\nsetSearchTextTeam = (event) => {\n this.setState({\n whereTeam: event.target.value\n })\n}\n\nonAddVendorGroup = () => {\n window.scrollTo(0, 0);\n if(this.state.AddVendorGroupDisplay1 == \"none\"){\n this.setState({\n AddVendorGroupDisplay1: \"block\"\n })\n }else{\n this.setState({\n AddVendorGroupDisplay1: \"none\"\n })\n }\n}\n\nonCallConfirmWindow = () => {\n if(this.state.ConfirmDisplay == \"none\"){\n this.setState({ConfirmDisplay: \"block\"});\n }else{\n this.setState({ConfirmDisplay: \"none\"})\n }\n}\n\nonResetFormAddNew = () => {\n this.onCallConfirmWindow();\n this.onCloseAddNewWindow();\n this.onAddProblemType();\n}\n\nonCloseAddNewWindow = () => {\n this.setState({\n vendorCodeAdd: \"\",\n vendorNameAdd: \"\",\n vendorAddressAdd: \"\",\n vendorAreaAdd: \"\",\n contactNameAdd: \"\",\n telephoneAdd: \"\",\n faxNoAdd: \"\",\n emailAdd: \"\",\n contactNumberAdd: \"\",\n EffectiveDateVendorAdd: moment().toDate(),\n ExpiryDateVendorAdd: moment().toDate(),\n EffectiveDateAddFilter: moment().toDate(),\n EffectiveDateVendorAddFilter: moment().toDate(),\n AddVendorGroupDisplay1: \"none\",\n actionCase: \"Add\",\n vendorArea0: ,\n vendorArea1: ,\n vendorArea2: ,\n vendorArea3: ,\n vendorArea4: ,\n vendorArea5: ,\n vendorArea6: ,\n vendorArea7: ,\n vendorArea8: ,\n vendorArea9: ,\n vendorArea10: ,\n vendorArea11: ,\n vendorArea12: ,\n vendorArea13: ,\n vendorArea14: ,\n vendorArea15: ,\n vendorArea16: ,\n vendorArea17: ,\n vendorArea18: ,\n vendorArea19: ,\n vendorArea20: ,\n rowID: 0,\n displayVendor1: \"none\",\n displayVendor2: \"none\",\n displayVendor3: \"none\",\n displayVendor4: \"none\",\n displayVendor5: \"none\",\n displayVendor6: \"none\",\n displayVendor7: \"none\",\n displayVendor8: \"none\",\n displayVendor9: \"none\",\n displayVendor10: \"none\",\n displayVendor11: \"none\",\n displayVendor12: \"none\",\n displayVendor13: \"none\",\n displayVendor14: \"none\",\n displayVendor15: \"none\",\n displayVendor16: \"none\",\n displayVendor17: \"none\",\n displayVendor18: \"none\",\n displayVendor19: \"none\",\n displayVendor20: \"none\",\n VendorAreaSelectDataListEdit: [],\n VendorAreaSelectDataListInsert: [],\n VendorAreaSelectDataListEditUpdate: []\n })\n}\n\ndisplayDate = (data) => {\n if(data != null){\n const day = data.substring(0,10).split(\"-\");\n return day[2] + \"/\" + day[1] + \"/\" + day[0];\n }\n return \"-\";\n}\n\nonCallConfirmWindowAndCallAddNewAgain = () => {\n this.onCallConfirmWindow();\n this.onAddVendorGroup();\n}\n\nClickAction1 = (e) => {\n window.scrollTo(0, 0);\n\n e.preventDefault();\n if(this.state.vendorTypeAdd == \"\"){\n this.notify(\"info\", \"Informaton\", \"Please select vendor type before.\");\n }else{\n\n if(this.state.actionCase == \"Add\"){\n if(this.state.VendorAreaSelectDataListInsert.length == 0){\n this.notify(\"info\", \"Informaton\", \"Please select check Area under area, sub area, zone before.\");\n e.stopPropagation();\n }else{\n if(this.state.EffectiveDateVendorAdd == \"\"){\n this.setState({fillEffectiveDateDisplay:\"block\"});\n }else{\n\n this.setState({fillEffectiveDateDisplay:\"none\"});\n\n Api.post(\"master_data/insert_vendor\", {\n \"company_id\" : this.state.companyIDAdd,\n \"vendor_code\" : this.state.vendorCodeAdd,\n \"vendor_type\" : this.state.vendorTypeAdd,\n \"vendor_name\" : this.state.vendorNameAdd,\n \"vendor_address\" : this.state.vendorAddressAdd,\n \"tel_no\" : this.state.telephoneAdd,\n \"fax_no\" : this.state.faxNoAdd,\n \"contact_person\" : this.state.contactNameAdd,\n \"is_active\" : this.state.statusVendorAdd,\n \"create_by\" : Cookies.get(\"userId\"),\n \"effective_date\" : moment(this.state.EffectiveDateVendorAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"),\n \"expire_date\" : (this.state.ExpiryDateVendorAdd != '') ? moment(this.state.ExpiryDateVendorAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"): null,\n \"email_address\" : this.state.emailAdd,\n \"TokenUser\" : Cookies.get(`OperationToken`),\n \"vendorarealist\": this.state.VendorAreaSelectDataListInsert\n })\n .then((res) => {\n console.log('Action: Add');\n const { result, data } = res.data;\n if (result.code === \"P\") {\n this.setState({AddVendorGroupDisplay1: \"none\", vendorIDAdd: result.value,fillEffectiveDateDisplay:\"none\"})\n this.displayPage2();\n }else{\n this.setState({AddVendorGroupDisplay1 : \"none\", ConfirmDisplayAddVendor:\"block\"})\n }\n if(result.showText == \"Success\"){\n this.setState({resultAddNewText:\"เพิ่มข้อมูลเสร็จสิ้น\"});\n }else{\n this.setState({resultAddNewText:result.showText});\n }\n\n })\n .catch((e) => {\n console.log(\"error add new problem type\", e);\n })\n\n }\n }\n }else{\n console.log('on click submit edit vendor ='+this.state.VendorAreaSelectDataListEdit.length)\n if(this.state.VendorAreaSelectDataListEdit.length == 0){\n this.notify(\"info\", \"Informaton\", \"Please select check Area under area, sub area, zone before.\");\n e.stopPropagation();\n }else{\n if(this.state.EffectiveDateVendorAdd == \"\"){\n this.setState({fillEffectiveDateDisplay:\"block\"});\n }else{\n this.setState({fillEffectiveDateDisplay:\"none\"});\n this.editData(e);\n }\n }\n }\n }\n e.stopPropagation();\n}\n\neditData = (e) => {\n console.log('Action: Edit');\n window.scrollTo(0, 0);\n e.preventDefault();\n if(this.state.vendorTypeAdd == \"\"){\n this.notify(\"info\", \"Informaton\", \"Please select vendor type before.\");\n }else{\n if(this.state.EffectiveDateAdd == \"\"){\n this.setState({fillEffectiveDateDisplay:\"block\"});\n }else{\n this.setState({fillEffectiveDateDisplay:\"none\"});\n console.log('company_id = '+this.state.companyIDAdd);\n /** statement save data */\n Api.post(\"master_data/update_vendor\", {\n \"company_id\" : this.state.companyIDAdd,\n \"vendor_id\" : this.state.vendorIDAdd,\n \"vendor_code\" : this.state.vendorCodeAdd,\n \"vendor_type\" : this.state.vendorTypeAdd,\n \"vendor_name\" : this.state.vendorNameAdd,\n \"vendor_address\" : this.state.vendorAddressAdd,\n \"tel_no\" : this.state.telephoneAdd,\n \"fax_no\" : this.state.faxNoAdd,\n \"vendor_contact_id\": this.state.vendorContactID,\n \"contact_person\" : this.state.contactNameAdd,\n \"is_active\" : this.state.statusVendorAdd,\n \"update_by\": Cookies.get(\"userId\"),\n \"effective_date\" : moment(this.state.EffectiveDateVendorAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"),\n \"expire_date\" : (this.state.ExpiryDateVendorAdd != '')? moment(this.state.ExpiryDateVendorAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"):\"\",\n \"email_address\" : this.state.emailAdd,\n \"TokenUser\" : Cookies.get(`OperationToken`),\n \"vendorarealist\": this.state.VendorAreaSelectDataListEdit\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.code === \"P\") {\n this.setState({AddVendorGroupDisplay1 : \"none\", companyID: this.state.companyIDAdd})\n this.loadVendor();\n this.displayPage2();\n }else{\n this.setState({AddVendorGroupDisplay1 : \"none\", ConfirmDisplayAddVendor:\"block\"})\n }\n if(result.showText == \"Success\"){\n this.setState({resultAddNewText:\"แก้ไขข้อมูลเสร็จสิ้น\"});\n }else{\n this.setState({resultAddNewText:result.showText});\n }\n })\n .catch((e) => {\n console.log(\"error editing vendor\", e);\n })\n\n }\n }\n e.stopPropagation();\n}\n\nClickAction2 = (e) => {\n window.scrollTo(0, 0);\n\n e.preventDefault();\n\n Api.post(\"master_data/insert_vendor_to_teamgroup\",\n this.state.VendorTeamGroupDataList\n )\n .then((res) => {\n console.log('Action: Add team group in vendor');\n const { result, data } = res.data;\n if (result.code === \"P\") {\n this.setState({ConfirmDisplay: \"block\"})\n }\n if(result.showText == \"Success\"){\n this.setState({resultAddNewText:\"เพิ่มข้อมูลเสร็จสิ้น\"});\n }else{\n this.setState({resultAddNewText:result.showText});\n }\n\n })\n .catch((e) => {\n console.log(\"error add new vendor team group\", e);\n })\n \n e.stopPropagation();\n}\n\nClickAction3 = (e) => {\n window.scrollTo(0, 0);\n\n e.preventDefault();\n if(this.state.EffectiveDateAdd == \"\"){\n this.setState({fillEffectiveDateDisplay:\"block\"});\n }else{\n this.setState({fillEffectiveDateDisplay:\"none\"});\n Api.post(\"master_data/insert_team_group_n_vendor\", {\n \"company_id\" : this.state.companyIDTeamGroupAdd,\n \"operator_id\" : this.state.operatorIDAdd,\n \"project_id\" : this.state.projectIDAdd,\n \"team_group_name\" : this.state.teamGroupNameAdd,\n \"vendor_id\" : this.state.vendorIDAdd,\n \"group_type_id\" : this.state.teamGroupTypeIDAdd,\n \"team_group_duty_code\" : \"O\",\n \"job_category_id\" : this.state.jobCategoryIDAdd,\n \"is_active\" : this.state.statusAdd,\n \"effective_date\" : moment(this.state.EffectiveDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"),\n \"expire_date\" : (this.state.ExpiryDateAdd != '') ? moment(this.state.ExpiryDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"): null,\n \"create_by\" : Cookies.get(\"userId\")\n })\n .then((res) => {\n console.log('Action: Add team group');\n const { result, data } = res.data;\n if (result.code === \"P\") {\n this.setState({AddVendorGroupDisplay3 : \"none\",ConfirmDisplayAddTeam: \"block\"})\n }\n if(result.showText == \"Success\"){\n this.setState({resultAddNewText:\"เพิ่มข้อมูลเสร็จสิ้น\"});\n }else{\n this.setState({resultAddNewText:result.showText,ConfirmDisplayAddTeam: \"block\"});\n }\n\n })\n .catch((e) => {\n console.log(\"error add new vendor team group\", e);\n })\n\n }\n\n e.stopPropagation();\n}\n/*8888888888888888888888888888*/\nsetVendorCodeAdd = (event) => {\n this.setState({vendorCodeAdd: event.target.value})\n}\n\nsetVendorNameAdd = (event) => {\n this.setState({vendorNameAdd: event.target.value})\n}\n\nsetVendorAddressAdd = (event) => {\n this.setState({vendorAddressAdd: event.target.value})\n}\nsetVendorAreaAdd = (event) => {\n this.setState({vendorAreaIDAdd: event.target.value})\n}\n\nsetContactNameAdd = (event) => {\n this.setState({contactNameAdd: event.target.value})\n}\n\nsetEmailAdd = (event) => {\n this.setState({emailAdd: event.target.value})\n}\n\nsetContactNumberAdd = (event) => {\n this.setState({contactNumberAdd: event.target.value})\n}\n\nsetTelephoneAdd = (event) => {\n this.setState({telephoneAdd: event.target.value})\n}\n\nsetFaxNoAdd = (event) => {\n this.setState({faxNoAdd: event.target.value})\n}\n\nsetCompany = (event) => {\n this.setState({companyID: event.target.value});\n}\n\nsetCompanyAdd = (event) => {\n this.state.companyIDAdd = event.target.value;\n console.log('company id:'+this.state.companyIDAdd);\n\n const filterOperatordataAdd = JSON.parse(\n localStorage.getItem(\"operator\")\n ).filter((data) => {\n return data.company_id == event.target.value;\n });\n console.log('filterOperatordataAdd:',filterOperatordataAdd )\n\n this.setState({\n operatorIDRowAdd: 0,\n operatorDataRowAdd: filterOperatordataAdd,\n projectIDRowAdd: 0,\n projectDataRowAdd: [],\n vendorZoneIDRowAdd: 0,\n vendorZoneNameRowAdd: \"\",\n vendorZoneDataList:[]\n })\n}\n\nsetOperatorAdd = (event) => {\n this.setState({\n teamIDAdd: 0,\n operatorIDAdd: event.target.value\n });\n\n const filterProjectdataAdd = JSON.parse(\n localStorage.getItem(\"projectData\")\n ).filter((data) => {\n return data.operator_id == event.target.value;\n });\n\n this.setState({\n projectIDAdd: \"\",\n projectDataAdd: filterProjectdataAdd,\n })\n}\n\nsetOperatorRowAdd = (event) => {\n this.setState({\n operatorIDRowAdd: event.target.value\n });\n\n const filterProjectdataRowAdd = JSON.parse(\n localStorage.getItem(\"projectData\")\n ).filter((data) => {\n return data.operator_id == event.target.value;\n });\n\n this.setState({\n projectIDRowAdd: \"\",\n projectDataRowAdd: filterProjectdataRowAdd,\n })\n}\n\nsetProjectDataAdd = (event) => {\n this.state.projectIDAdd = event.target.value;\n this.loadCategory();\n this.loadTeamGroupType();\n}\n\nsetProjectRowDataAdd = (event) => {\n this.setState({projectIDRowAdd :event.target.value});\n}\n\nsetJobCategoryAdd = (event) => {\n this.setState({jobCategoryIDAdd: event.target.value});\n}\n\nsetTeamGroupType = (event) => {\n this.setState({teamGroupTypeIDAdd: event.target.value});\n}\n\nsetTeamGroupName = (event) => {\n this.setState({teamGroupNameAdd: event.target.value});\n}\n\nsetStatus = (event) => {\n this.setState({\n statusAdd: event.target.value\n })\n}\n\nsetStatusVendor = (event) => {\n this.setState({\n statusVendorAdd: event.target.value\n })\n}\n\nsetAreaRowAdd = (companyid,event) => {\n var val = event.target.value;\n var obj = val.split(\"_\");\n\n this.setState({\n vendorAreaIDRowAdd: obj[0],\n vendorAreaNameRowAdd: obj[1]\n })\n Api.post(\"master_data/get_sub_area_name\", {\n \"company_id\" : companyid,\n \"job_area_id\" : obj[0]\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.value === \"P\") {\n this.setState({ subAreaDataList: data.result})\n }\n })\n .catch((e) => {\n console.log(e);\n });\n}\n\nsetVendorSubAreaRowAdd = (event) => {\n var val = event.target.value;\n var obj = val.split(\"_\");\n this.setState({\n vendorSubAreaIDRowAdd: obj[0],\n vendorSubAreaNameRowAdd: obj[1]\n })\n}\n\nsetVendorZoneRowAdd = (event) => {\n var val = event.target.value;\n var obj = val.split(\"_\");\n this.setState({\n vendorZoneIDRowAdd: obj[0],\n vendorZoneNameRowAdd: obj[1]\n })\n}\n\nonChangeEffectiveDate = (date, dateString) =>{\n this.setState({\n EffectiveDateAdd: dateString,\n EffectiveDateAddFilter: moment(dateString,\"DD/MM/YYYY\")\n })\n}\n\nonChangeExpiryDate = (date, dateString) => {\n this.setState({\n ExpiryDateAdd: dateString\n })\n}\n\nonChangeEffectiveDateVendor = (date, dateString) =>{\n this.setState({\n EffectiveDateVendorAdd: dateString,\n EffectiveDateVendorAddFilter: moment(dateString,\"DD/MM/YYYY\")\n })\n}\n\nonChangeExpiryDateVendor = (date, dateString) => {\n this.setState({\n ExpiryDateVendorAdd: dateString\n })\n}\n\ndisplayPage3(){\n this.setState({AddVendorGroupDisplay3:\"block\",AddVendorGroupDisplay2:\"none\"});\n this.loadCategory();\n this.loadTeamGroupType();\n}\n\nonCloseAddNewTeamWindow(){\n window.scrollTo(0,0);\n this.setState({AddVendorGroupDisplay2:\"block\",AddVendorGroupDisplay3:\"none\"})\n}\n\nloadArea = () => {\n console.log('company_id loadArea'+this.state.companyIDAdd);\n Api.post(\"master_data/get_area_name\", {\n \"company_id\" : this.state.companyIDAdd\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.value === \"P\") {\n this.setState({ areaDataList: data.result})\n }\n })\n .catch((e) => {\n console.log(e);\n });\n}\n\nloadSubArea = () => {\n console.log('dd:'+this.state.companyIDGetSubAdd);\n\n Api.post(\"master_data/get_sub_area_name\", {\n company_id : this.state.companyIDAdd,\n job_area_id : this.state.vendorAreaIDRowAdd\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.value === \"P\") {\n this.setState({ subAreaDataList: data.result})\n }\n })\n .catch((e) => {\n console.log(e);\n });\n}\n\nloadZone = () => {\n this.setState({vendorZoneDataList:[]});\n Api.post(\"master_data/get_zone_name\", {\n\n \"company_id\" : this.state.companyIDAdd,\n \"operator_id\" : this.state.operatorIDRowAdd,\n \"project_id\" : this.state.projectIDRowAdd\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.value === \"P\") {\n this.setState({ vendorZoneDataList: data.result})\n }\n })\n .catch((e) => {\n console.log(e);\n });\n}\n\nsetProjectRowDataAdd = (event) => {\n this.setState({projectIDRowAdd: event.target.value});\n\n Api.post(\"master_data/get_zone_name\", {\n company_id : this.state.companyIDAdd,\n operator_id : this.state.operatorIDRowAdd,\n project_id : event.target.value\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.value === \"P\") {\n this.setState({vendorZoneDataList: data.result, vendorZoneIDRowAdd: 0})\n }\n })\n .catch((e) => {\n console.log(e);\n });\n\n}\n\nremoveRow(row){\n var myClasses = document.querySelectorAll('.row-vendor-area-'+row),\n i = 0,\n l = myClasses.length;\n myClasses[0].style.display = 'none';\n\n if(row == 0){\n this.state.displayVendor0 = \"none\";\n console.log('display row0 '+ row + ' = '+this.state.displayVendor0)\n } else if(row == 1){\n this.state.displayVendor1 = \"none\";\n console.log('display row1 '+ row + ' = '+this.state.displayVendor1)\n }\n}\n\nsetAreaEdit = (val,event) => {\n var data = this.state.VendorAreaSelectDataListEdit;\n var data_tmp = [];\n var tmp = val.split(\"_\");\n var area_id = tmp[0];\n var sub_area_id = tmp[1];\n var zone_id = tmp[2];\n\n if(event.target.checked == true){\n data.map((item) => (\n ((item.area_id == area_id) && (item.sub_area_id == sub_area_id) && (item.zone_id == zone_id))?\n data_tmp.push(\n {\n \"vendor_area_id\" : item.vendor_area_id,\n \"area_id\" : item.area_id,\n \"area_code\" : item.area_code,\n \"sub_area_id\" : item.sub_area_id,\n \"sub_area_code\" : item.sub_area_code,\n \"zone_id\" : item.zone_id,\n \"zone_code\" : item.zone_code,\n \"delete_flag\" : null\n }\n )\n :\n (\n data_tmp.push(\n {\n \"vendor_area_id\" : item.vendor_area_id,\n \"area_id\" : item.area_id,\n \"area_code\" : item.area_code,\n \"sub_area_id\" : item.sub_area_id,\n \"sub_area_code\" : item.sub_area_code,\n \"zone_id\" : item.zone_id,\n \"zone_code\" : item.zone_code,\n \"delete_flag\" : item.delete_flag\n }\n )\n )\n ))\n } else {\n data.map((item) => (\n ((item.area_id == area_id) && (item.sub_area_id == sub_area_id) && (item.zone_id == zone_id) && (item.vendor_area_id != null))?\n data_tmp.push(\n {\n \"vendor_area_id\" : item.vendor_area_id,\n \"area_id\" : item.area_id,\n \"area_code\" : item.area_code,\n \"sub_area_id\" : item.sub_area_id,\n \"sub_area_code\" : item.sub_area_code,\n \"zone_id\" : item.zone_id,\n \"zone_code\" : item.zone_code,\n \"delete_flag\" : 1\n }\n )\n :\n ((item.area_id == area_id) && (item.sub_area_id == sub_area_id) && (item.zone_id == zone_id) && (item.vendor_area_id == null))?\n null\n :\n data_tmp.push(\n {\n \"vendor_area_id\" : item.vendor_area_id,\n \"area_id\" : item.area_id,\n \"area_code\" : item.area_code,\n \"sub_area_id\" : item.sub_area_id,\n \"sub_area_code\" : item.sub_area_code,\n \"zone_id\" : item.zone_id,\n \"zone_code\" : item.zone_code,\n \"delete_flag\" : item.delete_flag\n }\n )\n ))\n }\n this.setState({VendorAreaSelectDataListEdit: data_tmp});\n}\n\nsetAreaAdd = (val,event) => {\n var data = this.state.VendorAreaSelectDataListInsert;\n var data_tmp = [];\n var tmp = val.split(\"_\");\n var area = tmp[0];\n var subarea = tmp[1];\n var zone = tmp[2];\n\n if(event.target.checked == true){\n data.map((item) => (\n ((item.area_id == area) && (item.sub_area_id == subarea) && (item.zone_id == zone))?\n null\n :\n (\n data_tmp = [...data_tmp,{\n \"area_id\" : area,\n \"sub_area_id\" : subarea,\n \"zone_id\" : zone,\n }]\n )\n ))\n if(data_tmp.length == this.state.VendorAreaSelectDataListInsert.length){\n this.state.VendorAreaSelectDataListInsert = [...this.state.VendorAreaSelectDataListInsert,{\n \"area_id\" : area,\n \"sub_area_id\" : subarea,\n \"zone_id\" : zone\n }]\n }\n } else {\n var tmp_array = [];\n data.map((item) => (\n ((item.area_id == area) && (item.sub_area_id == subarea) && (item.zone_id == zone))?\n null\n : (\n tmp_array = [...tmp_array,{\n \"area_id\" : item.area_id,\n \"sub_area_id\" : item.sub_area_id,\n \"zone_id\" : item.zone_id,\n }]\n )\n ))\n this.state.VendorAreaSelectDataListInsert = tmp_array;\n }\n}\n\nonAddEditAreaRow(row) {// เพิ่ม area ใหม่ case Edit\n console.log('row+ ='+row);\n\n if((this.state.vendorAreaIDRowAdd > 0) && (this.state.vendorSubAreaIDRowAdd > 0) && (this.state.vendorZoneIDRowAdd > 0)) {\n\n /*\n tmp.push(\n {\n \"vendor_area_id\" : item.vendor_area_id,\n \"area_id\" : item.area_id,\n \"area_code\" : item.area_code,\n \"sub_area_id\" : item.sub_area_id,\n \"sub_area_code\" : item.sub_area_code,\n \"zone_id\" : item.zone_id,\n \"zone_code\" : item.zone_code,\n \"delete_flag\" : item.delete_flag\n }\n )*/\n //add new\n\n console.log(\"=================\");\n console.log(this.state.VendorAreaSelectDataListEdit);\n console.log(\"=================\");\n this.setState({\n VendorAreaSelectDataListEdit: [...this.state.VendorAreaSelectDataListEdit, {\n \"area_id\" : this.state.vendorAreaIDRowAdd,\n \"sub_area_id\" : this.state.vendorSubAreaIDRowAdd,\n \"zone_id\" : this.state.vendorZoneIDRowAdd,\n }] \n })\n console.log(\"=================\");\n console.log(this.state.VendorAreaSelectDataListEdit);\n console.log(\"=================\");\n\n var val = this.state.vendorAreaIDRowAdd + '_' + this.state.vendorSubAreaIDRowAdd + '_' + this.state.vendorZoneIDRowAdd;\n if(row == 0){\n this.setState({displayVendor0: \"block\", rowID: this.state.rowID + 1, vendorArea0: this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
this.setAreaAdd(val,e)} /> {this.state.vendorAreaNameRowAdd}
{this.state.vendorSubAreaNameRowAdd}
{this.state.vendorZoneNameRowAdd}
\n
Basic Data\n
{this.state.title}
\n
\n
\n
\n
*{(this.state.factUpdate)? this.state.LangTranslate[locale][\"company\"] : `Company`}
\n
this.setCompany(e)}\n value={this.state.companyID}\n required\n >\n \n {\n this.state.companyDataList.map((item, index) => (\n \n ))}\n \n
\n
\n
\n
\n
this.setSearchText(e)}\n placeholder=\"Search Vendor Name\"\n style={{ width: 200 }}\n />\n \n \n\n
\n
\n \n
\n
\n
\n\n
\n {/** load data */}\n \n
\n\n
\n\n
\n\n
\n\n
\n
\n
\n {this.state.resultAddNewText}\n
\n
\n
\n
\n \n
\n
\n
\n\n
\n
\n
\n {this.state.resultAddNewText}\n
\n
\n
\n
\n \n
\n
\n
\n\n
\n
\n
\n {this.state.resultAddNewText}\n
\n
\n
\n
\n \n
\n
\n
\n\n
{this.state.active[item.is_active]}
,\n \"effectiveDate\": this.displayDate(item.effective_date),\n \"expiredDate\": this.displayDate(item.expire_date),\n \"Option\":\n })\n ))\n this.setState({ filterDataList: tmp});\n }\n })\n .catch((e) => {\n console.log(\"error load get_vendor_service_code\", e);\n });\n\n if((this.state.companyIDAdd == 3) && (this.state.operatorIDRowAdd == 4) && (this.state.projectIDRowAdd == 7)) {\n Api.post(\"V4/get_job_type\", {\n company_id: this.state.companyIDAdd,\n operator_id: this.state.operatorIDRowAdd,\n project_id: this.state.projectIDRowAdd,\n pk_id: null,\n fk_id: null,\n is_active: 1,\n effective: 1,\n sql_where: null,\n UserName: Cookies.get(\"username\"),\n })\n .then((res) => {\n this.setState({jobTypeDataAdd: res.data.data, jobTypeIDAdd: 0})\n })\n .catch((e) => {\n console.log(\"error loading job type\", e);\n });\n this.setState({displayRowJobType: \"block\"})\n }else{\n this.setState({displayRowJobType: \"none\",jobTypeIDAdd: 0, jobSubTypeIDAdd: 0})\n }\n this.loadVendor();\n this.loadArea();\n Api.post(\"master_data/get_sub_area_name_v2\", {\n \"company_id\" : this.state.companyIDAdd,\n \"job_area_name\" : this.state.vendorAreaNameRowAdd\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.value === \"P\") {\n this.setState({ subAreaDataList: data.result})\n }\n })\n .catch((e) => {\n console.log(e);\n });\n this.loadZone();\n }\n\n clickEdit = (company_id, operator_id, project_id, service_id, vendor_id, job_type_id, job_sub_type_id, area_code, sub_area_code, zone_code, area_zone_name, sap_no, service_type_code, service_code, service_cost, service_name, LumpsumFlag, is_active, effective_date, expire_date) => {\n const filterOperatordataAdd = JSON.parse(\n localStorage.getItem(\"operator\")\n ).filter((data) => {\n return data.company_id == company_id;\n });\n\n const filterProjectdataRowAdd = JSON.parse(\n localStorage.getItem(\"projectData\")\n ).filter((data) => {\n return data.operator_id == operator_id;\n });\n\n Api.post(\"master_data/get_vendor\", {\n \"company_id\": company_id,\n \"where\" : \"\"\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.code === \"P\") {\n const tmp = [];\n data.result.map((item, index) => (\n tmp.push({\n \"vendor_id\": item.vendor_id,\n \"vendor_name\": item.vendor_name\n })\n ))\n this.setState({vendorDataList: tmp})\n }//\n })\n .catch((e) => {\n console.log(\"error add new vendor team group\", e);\n })\n\n if((company_id == 3) && (operator_id == 4) && (project_id == 7)){\n this.setState({displayRowJobType: \"block\"})\n Api.post(\"V4/get_job_type\", {\n company_id: company_id,\n operator_id: operator_id,\n project_id: project_id,\n pk_id: null,\n fk_id: null,\n is_active: 1,\n effective: 1,\n sql_where: null,\n UserName: Cookies.get(\"username\"),\n })\n .then((res) => {\n this.setState({jobTypeDataAdd: res.data.data, jobTypeIDAdd: job_type_id})\n })\n .catch((e) => {\n console.log(\"error loading job type\", e);\n });\n\n Api.post(\"get_job_sub_type\", {\n job_sub_type_id : null,\n job_category_id : 2,\n job_type_id: job_type_id,\n is_active: 1,\n effective: 1,\n sql_where: \" and company_id=\"+company_id,\n operator_id: operator_id\n })\n .then((res) => {\n this.setState({jobSubTypeDataAdd: res.data.data.job_sub_type_dto_list, jobSubTypeIDAdd: job_sub_type_id})\n })\n .catch((e) => {\n console.log(\"error loading job sub type\", e);\n });\n\n }else{\n this.setState({displayRowJobType: \"none\", jobTypeIDAdd: 0, jobSubTypeIDAdd: 0})\n }\n console.log('area :'+area_code)\n Api.post(\"master_data/get_area_name\", {\n \"company_id\" : company_id\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.value === \"P\") {\n this.setState({ areaDataList: data.result, vendorAreaNameRowAdd: area_code})\n }\n })\n .catch((e) => {\n console.log(e);\n });\n\n Api.post(\"master_data/get_sub_area_name_v2\", {\n \"company_id\" : this.state.companyIDAdd,\n \"job_area_name\" : area_code\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.value === \"P\") {\n this.setState({ subAreaDataList: data.result, vendorSubAreaNameRowAdd: sub_area_code})\n }\n })\n .catch((e) => {\n console.log(e);\n });\n\n Api.post(\"master_data/get_zone_name\", {\n \"company_id\" : company_id,\n \"operator_id\" : operator_id, \n \"project_id\" : project_id\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.value === \"P\") {\n this.setState({ vendorZoneDataList: data.result})\n this.setState({vendorZoneDataList: data.result, vendorZoneNameRowAdd: zone_code})\n }\n })\n .catch((e) => {\n console.log(e);\n });\n\n this.setState({\n companyIDAdd: company_id,\n operatorIDRowAdd: operator_id,\n operatorDataRowAdd: filterOperatordataAdd,\n projectIDRowAdd: project_id,\n projectDataRowAdd: filterProjectdataRowAdd,\n serviceID: service_id,\n vendorIDAdd: vendor_id,\n areaZoneNameAdd: area_zone_name,\n sapNoAdd: sap_no,\n serviceTypeCodeAdd: service_type_code,\n serviceCodeAdd: service_code,\n serviceCostAdd: service_cost,\n serviceNameAdd: service_name,\n payTypeAdd: LumpsumFlag,\n statusAdd: is_active,\n EffectiveDateAdd:(effective_date != null)? this.displayDate(effective_date): \"\",\n EffectiveDateAddFilter: (effective_date != null)? this.displayDate(effective_date): \"\",\n ExpiryDateAdd: (expire_date != null)? this.displayDate(expire_date) : \"\",\n AddVendorGroupDisplay: \"block\",\n actionVendorServiceCode: \"Edit\",\n actionVendorServiceCodeButton: \"Save\"\n })\n\n }\n\n loadVendor(){\n Api.post(\"master_data/get_vendor\", {\n \"company_id\": this.state.companyIDAdd,\n \"where\" : \"\"\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.code === \"P\") {\n const tmp = [];\n data.result.map((item, index) => (\n tmp.push({\n \"vendor_id\": item.vendor_id,\n \"vendor_name\": item.vendor_name\n })\n ))\n this.setState({vendorDataList: tmp})\n }//\n })\n .catch((e) => {\n console.log(\"error add new vendor team group\", e);\n })\n }\n\n loadZone = () => {\n Api.post(\"master_data/get_zone_name\", {\n \"company_id\" : this.state.companyIDAdd,\n \"operator_id\" : this.state.operatorIDRowAdd,\n \"project_id\" : this.state.projectIDRowAdd\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.value === \"P\") {\n this.setState({ vendorZoneDataList: data.result})\n }\n })\n .catch((e) => {\n console.log(e);\n });\n }\n\n setOperatorRowAdd = (event) => {\n this.setState({\n operatorIDRowAdd: event.target.value\n });\n \n const filterProjectdataRowAdd = JSON.parse(\n localStorage.getItem(\"projectData\")\n ).filter((data) => {\n return data.operator_id == event.target.value;\n });\n \n this.setState({\n projectIDRowAdd: \"\",\n projectDataRowAdd: filterProjectdataRowAdd,\n })\n }\n\n setProjectRowDataAdd = (event) => {\n this.state.projectIDRowAdd = event.target.value;\n this.loadZone();\n if((this.state.companyIDAdd == 3) && (this.state.operatorIDRowAdd == 4) && (this.state.projectIDRowAdd == 7)){\n this.setState({displayRule: \"none\", displayRowJobType: \"block\"});\n this.loadJobTypeDataAdd();\n }else{\n this.setState({displayRule: \"block\",jobTypeIDAdd: 0, jobTypeDataAdd: [], jobSubTypeIDAdd: 0, jobSubTypeDataAdd: [], displayRowJobType: \"none\"});\n }\n }\n\n setJobTypeDataAdd = (event) => {\n this.setState({\n jobTypeIDAdd: event.target.value\n })\n Api.post(\"get_job_sub_type\", {\n job_sub_type_id : null,\n job_category_id : 2,\n job_type_id: event.target.value,\n is_active: 1,\n effective: 1,\n sql_where: \" and company_id=\"+this.state.companyIDAdd,\n operator_id: this.state.operatorIDRowAdd\n })\n .then((res) => {\n this.setState({jobSubTypeDataAdd: res.data.data.job_sub_type_dto_list});\n })\n .catch((e) => {\n console.log(\"error loading job sub type\", e);\n });\n \n }\n\n setJobSubTypeDataAdd = (event) => {\n this.setState({\n jobSubTypeIDAdd: event.target.value\n })\n }\n\n loadJobTypeDataAdd = () => {\n Api.post(\"V4/get_job_type\", {\n company_id: this.state.companyIDAdd,\n operator_id: this.state.operatorIDRowAdd,\n project_id: this.state.projectIDRowAdd,\n pk_id: null,\n fk_id: null,\n is_active: 1,\n effective: 1,\n sql_where: null,\n UserName: Cookies.get(\"username\"),\n })\n .then((res) => {\n this.setState({jobTypeDataAdd: res.data.data})\n })\n .catch((e) => {\n console.log(\"error loading job type\", e);\n });\n }\n\n setStatus = (event) => {\n this.setState({\n statusAdd: event.target.value\n })\n }\n\n onAddVendorServiceCode = () => {\n this.setState({AddVendorGroupDisplay: \"block\"});\n \n }\n\n setProjectData = (event) => {\n if(event.target.value == 7){\n this.setState({\n displayRule: \"none\",\n displayRowJobType: \"block\",\n projectID: event.target.value,\n projectIDRowAdd: event.target.value\n })\n }else{\n this.setState({\n displayRule: \"block\",\n displayRowJobType: \"none\",\n projectID: event.target.value,\n projectIDRowAdd: event.target.value\n })\n } \n };\n\n setVendorAdd = (event) => {\n this.setState({\n vendorIDAdd: event.target.value\n })\n }\n \n setAreaRowAdd = (event) => {\n this.setState({\n vendorAreaNameRowAdd: event.target.value\n })\n Api.post(\"master_data/get_sub_area_name_v2\", {\n \"company_id\" : this.state.companyIDAdd,\n \"job_area_name\" : event.target.value\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.value === \"P\") {\n this.setState({ subAreaDataList: data.result})\n }\n })\n .catch((e) => {\n console.log(e);\n });\n }\n \n setVendorSubAreaRowAdd = (event) => {\n console.log('sub area:'+event.target.value);\n this.setState({\n vendorSubAreaNameRowAdd: event.target.value\n })\n console.log('sub area:'+this.state.vendorSubAreaNameRowAdd);\n }\n \n setVendorZoneRowAdd = (event) => {\n this.setState({\n vendorZoneNameRowAdd: event.target.value\n })\n }\n\n setAreaZoneNameAdd = (event) => {\n this.setState({\n areaZoneNameAdd: event.target.value\n })\n console.log('area zone name:'+this.state.areaZoneNameAdd)\n }\n\n setSapNoAdd = (event) => {\n this.setState({\n sapNoAdd: event.target.value\n })\n }\n\n setServiceTypeCodeAdd = (event) => {\n this.setState({\n serviceTypeCodeAdd: event.target.value\n })\n }\n\n onChangeEffectiveDate = (date, dateString) =>{\n this.setState({\n EffectiveDateAdd: dateString,\n EffectiveDateAddFilter: moment(dateString,\"DD/MM/YYYY\")\n })\n }\n\n onChangeExpiryDate = (date, dateString) => {\n this.setState({\n ExpiryDateAdd: dateString\n })\n }\n\n onAddVendorGroup = () => {\n window.scrollTo(0, 0);\n if(this.state.AddVendorGroupDisplay == \"none\"){\n this.setState({\n AddVendorGroupDisplay: \"block\"\n })\n }else{\n this.setState({\n AddVendorGroupDisplay: \"none\"\n })\n }\n }\n\nonCallConfirmWindow = () => {\n if(this.state.ConfirmDisplay == \"none\"){\n this.setState({ConfirmDisplay: \"block\"});\n }else{\n this.setState({ConfirmDisplay: \"none\", resultAddNewFail: false, AddVendorGroupDisplay: \"none\"})\n }\n}\n\nonResetFormAddNew = () => {\n this.onCallConfirmWindow();\n this.onCloseAddNewWindow();\n this.onAddVendorServiceCode();\n}\n\nonCloseAddNewWindow = () => {\n this.setState({\n vendorDataList: [],\n jobTypeDataAdd: [],\n jobSubTypeDataAdd: [],\n areaDataList: [],\n subAreaDataList: [],\n vendorZoneDataList: [],\n sapNoAdd: \"\",\n serviceTypeCodeAdd: \"\",\n AddVendorGroupDisplay: \"none\",\n actionVendorServiceCode: \"Add\",\n actionVendorServiceCodeButton: \"Add\"\n })\n this.loadServiceCode();\n}\n\ndisplayDate = (data) => {\n if(data != null){\n const day = data.substring(0,10).split(\"-\");\n return day[2] + \"/\" + day[1] + \"/\" + day[0];\n }\n return \"-\";\n}\n\nonCallConfirmWindowAndCallAddNewAgain = () => {\n this.onCallConfirmWindow();\n this.onAddVendorGroup();\n}\n\nClickAction = (e) => {\n window.scrollTo(0, 0);\n const check = 0;\n if(this.state.projectIDRowAdd == 6){\n if(this.state.areaZoneNameAdd== \"\"){\n this.notify(\"info\", \"Informaton\", \"Please key area zone name before.\");\n check = 1;\n }\n if(this.state.sapNoAdd == \"\"){\n this.notify(\"info\", \"Informaton\", \"Please key sap no. before.\");\n check = 1;\n }\n if(this.state.serviceTypeCodeAdd == \"\"){\n this.notify(\"info\", \"Informaton\", \"Please key service type code before.\");\n check = 1;\n }\n }\n e.preventDefault();\n if(this.state.EffectiveDateAdd == \"\"){\n this.setState({fillEffectiveDateDisplay:\"block\"});\n }else if(check == 0){\n \n this.setState({fillEffectiveDateDisplay:\"none\"});\n //# statement save data \n (this.state.actionVendorServiceCode == \"Add\") ? \n \n Api.post(\"master_data/insert_vendor_service_code\", [{\n \"company_id\" : this.state.companyIDAdd,\n \"operator_id\" : this.state.operatorIDRowAdd,\n \"project_id\" : this.state.projectIDRowAdd,\n \"job_type_id\" : this.state.jobTypeIDAdd,\n \"job_sub_type_id\" : this.state.jobSubTypeIDAdd,\n \"vendor_id\" : this.state.vendorIDAdd,\n \"area_code\" : this.state.vendorAreaNameRowAdd,\n \"sub_area_code\" : this.state.vendorSubAreaNameRowAdd,\n \"zone_code\" : this.state.vendorZoneNameRowAdd,\n \"area_zone_name\" : this.state.areaZoneNameAdd,\n \"sap_no\" : this.state.sapNoAdd,\n \"service_type_code\" : this.state.serviceTypeCodeAdd,\n \"service_code\" : this.state.serviceCodeAdd,\n \"service_cost\" : this.state.serviceCostAdd,\n \"service_name\" : this.state.serviceNameAdd,\n \"LumpsumFlag\" : this.state.payTypeAdd,\n \"is_active\": this.state.statusAdd,\n \"effective_date\": moment(this.state.EffectiveDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"),\n \"expire_date\": (this.state.ExpiryDateAdd) != ''? moment(this.state.ExpiryDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"):null,\n \"create_by\": Cookies.get(\"userId\")\n }])\n .then((res) => {\n console.log('Action: Add');\n const { result, data } = res.data;\n if (result.code === \"P\") {\n this.setState({AddVendorGroupDisplay: \"none\", resultAddNewFail: false, resultAddNewText:\"เพิ่มข้อมูลเสร็จสิ้น\"})\n this.onCloseAddNewWindow();\n }else{\n this.setState({AddProblemTypeDisplay : \"none\",resultAddNewFail: true,resultAddNewText:result.showText})\n }\n \n //#/** confirm \n this.onCallConfirmWindow();\n this.onAddVendorServiceCode();\n\n })\n .catch((e) => {\n console.log(\"error insert_vendor_service_code\", e);\n })\n : this.editData(e)\n \n //#/** statement save data \n }\n \n e.stopPropagation();\n}\n\neditData = (e) => {\n console.log('Action: Edit');\n window.scrollTo(0, 0);\n e.preventDefault();\n if(this.state.EffectiveDateAdd == \"\"){\n this.setState({fillEffectiveDateDisplay:\"block\"});\n }else{\n this.setState({fillEffectiveDateDisplay:\"none\"});\n /** statement save data */\n Api.post(\"master_data/update_vendor_service_code\", {\n \"company_id\" : this.state.companyIDAdd,\n \"operator_id\" : this.state.operatorIDRowAdd,\n \"project_id\" : this.state.projectIDRowAdd,\n \"service_id\" : this.state.serviceID,\n \"job_type_id\" : this.state.jobTypeIDAdd,\n \"job_sub_type_id\" : this.state.jobSubTypeIDAdd,\n \"vendor_id\" : this.state.vendorIDAdd,\n \"area_code\" : this.state.vendorAreaNameRowAdd,\n \"sub_area_code\" : this.state.vendorSubAreaNameRowAdd,\n \"zone_code\" : this.state.vendorZoneNameRowAdd,\n \"area_zone_name\" : (this.state.areaZoneNameAdd != null)? this.state.areaZoneNameAdd : \"\" ,\n \"sap_no\" : this.state.sapNoAdd,\n \"service_type_code\" : this.state.serviceTypeCodeAdd,\n \"service_code\" : this.state.serviceCodeAdd,\n \"service_cost\" : this.state.serviceCostAdd,\n \"service_name\" : this.state.serviceNameAdd,\n \"LumpsumFlag\" : this.state.payTypeAdd,\n \"is_active\": this.state.statusAdd,\n \"effective_date\": moment(this.state.EffectiveDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"),\n \"expire_date\": (this.state.ExpiryDateAdd) != ''? moment(this.state.ExpiryDateAdd,\"DD/MM/YYYY\").format(\"YYYY-MM-DD\"):null,\n \"update_by\": Cookies.get(\"userId\")\n })\n .then((res) => {\n const { result, data } = res.data;\n if (result.code === \"P\") {\n this.setState({AddVendorGroupDisplay: \"none\", resultAddNewFail: false, resultAddNewText: \"แก้ไขข้อมูลเสร็จสิ้น\"})\n this.onCloseAddNewWindow();\n }else{\n this.setState({AddVendorGroupDisplay : \"none\",resultAddNewFail: true, resultAddNewText:result.showText})\n }\n \n /** confirm */\n this.onCallConfirmWindow();\n this.loadServiceCode();\n\n })\n .catch((e) => {\n console.log(\"error editing service code\", e);\n })\n }\n}\n\n/*8888888888888888888888888888*/\nsetVendorIDAdd = (event) => {\n this.setState({vendorIDAdd : event.target.value});\n}\n\nsetServiceCodeAdd = (event) => {\n this.setState({serviceCodeAdd : event.target.value});\n}\n\nsetServiceCostAdd = (event) => {\n this.setState({serviceCostAdd : event.target.value});\n}\n\nsetServiceNameAdd = (event) => {\n this.setState({serviceNameAdd : event.target.value});\n}\n\nsetAreaIDAdd = (event) => {\n this.setState({areaIDAdd : event.target.value});\n} \n\nsetPayTypeAdd = (event) => {\n this.setState({payTypeAdd : event.target.value});\n}\n\nrender() {\n //console.log('company:'+this.state.companyDataList.auth);\n //console.log('company list:'+this.state.companyDataList[\"companyData\"]);\n //console.log('Language:'+this.state.LangTranslate);\n const locale = Cookies.get(\"locale\");\n const columns = [\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"serviceCode\"] : 'Service Code',\n selector: 'serviceCode',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"serviceCost\"] : 'Service Cost',\n selector: 'serviceCost',\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"areaName\"] : 'Area',\n selector: 'area',\n sortable: true,\n },\n /*{\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"subAreaName\"] : 'Sub Area',\n selector: 'subArea',\n sortable: true,\n },*/\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"zoneName\"] : 'Zone',\n selector: 'zone',\n sortable: true,\n },\n {\n name: 'Lump sum',\n selector: 'Lumpsum',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"status\"] : 'Status',\n selector: 'status',\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"EffectiveDate\"] : 'Effective Date',\n selector: 'effectiveDate',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"ExpiredDate\"] : 'Expired Date',\n selector: 'expiredDate',\n sortable: true,\n },\n {\n name: (this.state.factUpdate)? this.state.LangTranslate[locale][\"Action\"] :'Action',\n selector: 'Option',\n ignoreRowClick: true,\n allowOverflow: true,\n button: true,\n style: 'cursor:pointer'\n }\n ];\n\n return (\n \n
Basic Data\n
{this.state.title}
\n
\n
\n
\n
Company
\n
\n \n
\n
\n
\n
Operator
\n
\n this.setOperator(e)}\n value={this.state.operatorID}\n >\n \n {this.state.operatorData.map((item, index) => (\n \n {item.operator_name}\n \n ))}\n \n
\n
\n
\n
Project
\n
\n
\n this.setProjectData(e)}\n value={this.state.projectID}\n >\n \n {this.state.projectData.map((item, index) => (\n \n ))}\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n \n
\n {/** load data */}\n \n
\n \n
\n\n
\n
\n
\n {this.state.resultAddNewText}\n
\n
\n
\n
\n {\n (this.state.actionVendorServiceCode == \"Add\")?\n ((this.state.resultAddNewFail == true)? : ):null\n } \n {\n (this.state.resultAddNewFail == false)? :null\n }\n
\n
\n
\n
{moment(item.effective_date).format(\"DD/MM/YYYY\")}
\n ),\n sorter: (a, b) => \n (a.effective_date === null || a.effective_date === undefined ? \"\" : a.effective_date).localeCompare\n (b.effective_date === null || b.effective_date === undefined ? \"\" : b.effective_date), \n },\n {\n title: \"Expire date\",\n align: \"center\",\n key: \"expire_date\",\n render: (item) =>\n !item.expire_date ? (\n \"-\"\n ) : (\n {moment(item.expire_date).format(\"DD/MM/YYYY\")}
\n ),\n sorter: (a, b) => \n (a.expire_date === null || a.expire_date === undefined ? \"\" : a.expire_date).localeCompare\n (b.expire_date === null || b.expire_date === undefined ? \"\" : b.expire_date), \n },\n {\n title: \"Status\",\n dataIndex: \"status\",\n key: \"status\",\n render: (item) => (\n \n {item == 0 ? (\n \n ) : (\n \n Active\n \n )}\n
\n ),\n sorter: () => null,\n },\n {\n title: \"Action\",\n render: (item) => (\n \n ),\n sorter: () => null,\n },\n ],\n columns_sub: [\n {\n title: \"Job Sub Type ID\",\n render: (item) =>\n !item.job_sub_type_id ? \"-\" : item.job_sub_type_id,\n align: \"center\",\n key: \"job_sub_type_id\",\n sorter: (a, b) => \n (a.job_sub_type_id === null || a.job_sub_type_id === undefined ? 0 : a.job_sub_type_id) -\n (b.job_sub_type_id === null || b.job_sub_type_id === undefined ? 0 : b.job_sub_type_id), \n },\n {\n title: \"Job Sub Type Name\",\n render: (item) => (!item.job_type_name ? \"-\" : item.job_type_name),\n align: \"center\",\n key: \"job_type_name\",\n sorter: (a, b) => \n (a.job_type_name === null || a.job_type_name === undefined ? \"\" : a.job_type_name).localeCompare\n (b.job_type_name === null || b.job_type_name === undefined ? \"\" : b.job_type_name), \n },\n {\n title: \"Job Type ID\",\n render: (item) => (!item.job_type_id ? \"-\" : item.job_type_id),\n align: \"center\",\n key: \"job_type_id\",\n sorter: (a, b) => \n (a.job_type_id === null || a.job_type_id === undefined ? 0 : a.job_type_id) -\n (b.job_type_id === null || b.job_type_id === undefined ? 0 : b.job_type_id), \n // render: (item) => (\n // \n // this.onClickRow(item)\n // }\n // className=\"c-blue text-underline\"\n // >\n // {item.job_type_id}\n // \n // ),\n },\n {\n title: \"Effective date\",\n align: \"center\",\n key: \"effective_date\",\n render: (item) =>\n !item.effective_date ? (\n \"-\"\n ) : (\n {moment(item.effective_date).format(\"DD/MM/YYYY\")}
\n ),\n sorter: (a, b) => \n (a.effective_date === null || a.effective_date === undefined ? \"\" : a.effective_date).localeCompare\n (b.effective_date === null || b.effective_date === undefined ? \"\" : b.effective_date), \n },\n {\n title: \"Expire date\",\n align: \"center\",\n key: \"expire_date\",\n render: (item) =>\n !item.expire_date ? (\n \"-\"\n ) : (\n {moment(item.expire_date).format(\"DD/MM/YYYY\")}
\n ),\n sorter: (a, b) => \n (a.expire_date === null || a.expire_date === undefined ? \"\" : a.expire_date).localeCompare\n (b.expire_date === null || b.expire_date === undefined ? \"\" : b.expire_date), \n },\n {\n title: \"Status\",\n dataIndex: \"status\",\n sorter: () => null,\n key: \"status\",\n render: (item) => (\n \n {item == 0 ? (\n \n ) : (\n \n Active\n \n )}\n
\n ),\n },\n {\n title: \"Action\",\n sorter: () => null,\n render: (item) => (\n \n ),\n },\n ],\n loading_modal_delete: false,\n data: [],\n master_data_job_type: [],\n data_sub: [],\n master_data_sub: [],\n visible: false,\n visible_approve: false, // for opening and closing of approve modal\n visible_reject: false,\n visible_delete: false,\n visible_sub: false,\n value: 1,\n category: [],\n sub_category: [],\n processType: null,\n modal_item: {},\n job_cat_data: [],\n data_edit : null ,\n dateFormatList: [\"DD/MM/YYYY\", \"DD/MM/YY\"],\n };\n }\n\n async componentDidMount() {\n const job_type = await Api.post(\"/v4/get_job_type\", {\n pk_id: null,\n is_active: 1,\n effective: null,\n sql_where: null,\n company_id: Cookies.get(\"companyid\"),\n operator_id: Cookies.get(\"operator_id\"),\n project_id: Cookies.get(\"project_id\"),\n UserName: Cookies.get(\"username\"),\n });\n //// console.log(job_type);\n this.setState({\n data: job_type.data.data,\n master_data_job_type: job_type.data.data,\n });\n\n const job_cat = await Api.post(\"get_job_category_V2\", {\n company_id: Cookies.get(\"companyid\"),\n operator_id: Cookies.get(\"operator_id\"),\n project_id: Cookies.get(\"project_id\"),\n job_category_id: null,\n is_active: 1,\n date_active: 1,\n operator_id: Cookies.get(\"operator_id\"),\n });\n if (job_cat.data.result.code === \"P\") {\n this.setState({\n category: job_cat.data.data.result_data,\n });\n } \n\n const job_sub_cat = await Api.post(\"get_job_sub_type\", {\n job_sub_type_id: null,\n job_category_id: null,\n job_type_id: null,\n is_active: 1,\n effective: 1,\n sql_where: \" and company_id=\" + Cookies.get(\"companyid\"),\n operator_id: Cookies.get(\"operator_id\"),\n });\n if (job_sub_cat.data.result.code === \"P\") {\n \n this.setState({\n sub_category: job_sub_cat.data.data.job_sub_type_dto_list,\n });\n } \n }\n\n async handleSubmit(values) {\n const { modal_item, data_edit } = this.state;\n var form = {};\n\n if (this.state.processType == \"add\") {\n\n\n form[\"create_by\"] = Cookies.get(\"username\");\n form[\"company_id\"] = Cookies.get(\"companyid\");\n form[\"operator_id\"] = Cookies.get(\"operator_id\");\n form[\"project_id\"] = Cookies.get(\"project_id\");\n form[\"job_category_id\"] = values.job_category_id;\n form[\"job_type_name\"] = values.job_type_name;\n form[\"effective_date\"] = moment(values.effective_date).format(\"YYYY-MM-DD\");\n form[\"expire_date\"] = values.expire_date != undefined ? moment(values.expire_date).format(\"YYYY-MM-DD\") : null;\n form[\"is_active\"] = 1;\n form[\"ma_type\"] = values.ma_type;\n form[\"form_id\"] = \"\";\n form[\"data_dynamic\"] = \"\";\n form[\"create_date\"] = moment(new Date()).format(\"YYYY-MM-DD HH:mm\");\n form[\"roworder\"] = \"\";;\n form[\"job_type_id\"] = null;\n\n console.log(form);\n \n\n await Api.post(\"v2/update_job_type\", form).then((val) => {\n \n if (val.data.result.code !== \"F\") {\n this.OnViewApprove(this.renderApproveButtonModal());\n this.formRef.current.resetFields();\n Api.post(\"/v4/get_job_type\", {\n pk_id: null,\n is_active: 1,\n effective: null,\n sql_where: null,\n company_id: Cookies.get(\"companyid\"),\n operator_id: Cookies.get(\"operator_id\"),\n project_id: Cookies.get(\"project_id\"),\n UserName: Cookies.get(\"username\"),\n }).then((val) => {\n // console.log(val);\n if (val.data.result.code === \"P\") {\n this.setState({\n data: val.data.data,\n master_data_job_type: val.data.data,\n });\n }\n });\n } else {\n this.OnViewReject(this.renderRejectButtonModal());\n }\n });\n } else if (this.state.processType == \"edit\") {\n ////////////////////////////////edit data main\n \n form[\"create_by\"] = Cookies.get(\"username\");\n form[\"company_id\"] = Cookies.get(\"companyid\");\n form[\"operator_id\"] = Cookies.get(\"operator_id\");\n form[\"project_id\"] = Cookies.get(\"project_id\");\n form[\"job_category_id\"] = modal_item.job_category_id;\n form[\"job_type_name\"] = values.job_type_name;\n form[\"effective_date\"] = moment(values.effective_date).format(\"YYYY-MM-DD\");\n form[\"expire_date\"] = values.expire_date != undefined ? moment(values.expire_date).format(\"YYYY-MM-DD\") : null;\n form[\"is_active\"] = 1;\n form[\"ma_type\"] = values.ma_type;\n form[\"form_id\"] = \"\";\n form[\"data_dynamic\"] = \"\";\n form[\"create_date\"] = moment(new Date()).format(\"YYYY-MM-DD HH:mm\");\n form[\"roworder\"] = \"\";;\n form[\"job_type_id\"] = modal_item.job_type_id;\n\n \n await Api.post(\"v2/update_job_type\", form).then((val) => {\n \n if (val.data.result.code !== \"F\") {\n this.OnViewApprove(this.renderApproveButtonModal());\n this.formRef.current.resetFields();\n Api.post(\"/v4/get_job_type\", {\n pk_id: null,\n is_active: 1,\n effective: null,\n sql_where: null,\n company_id: Cookies.get(\"companyid\"),\n operator_id: Cookies.get(\"operator_id\"),\n project_id: Cookies.get(\"project_id\"),\n UserName: Cookies.get(\"username\"),\n }).then((val) => {\n // console.log(val);\n if (val.data.result.code === \"P\") {\n this.setState({\n data: val.data.data,\n master_data_job_type: val.data.data,\n });\n }\n });\n } else {\n this.OnViewReject(this.renderRejectButtonModal());\n }\n });\n\n\n } else if (this.state.processType == \"add sub\") {\n // console.log(values);\n form[\"company_id\"] = Cookies.get(\"companyid\");\n form[\"operator_id\"] = Cookies.get(\"operator_id\");\n form[\"create_by\"] = Cookies.get(\"userId\");\n form[\"update_by\"] = Cookies.get(\"userId\");\n form[\"project_id\"] = Cookies.get(\"project_id\");\n form[\"job_category_id\"] = data_edit.job_category_id;\n form[\"job_sub_type_id\"] = null\n form[\"job_type_id\"] = data_edit.job_type_id;\n form[\"job_type_name\"] = values.sub_type_name;\n form[\"effective_date\"] = moment(values.effective_date).format(\"YYYY-MM-DD\");\n form[\"expire_date\"] = values.expire_date != undefined ? moment(values.expire_date).format(\"YYYY-MM-DD\") : null;\n form[\"is_active\"] = 1;\n\n console.log(form);\n\n await Api.post(\"update_job_sub_type\", form).then((val) => {\n // console.log(val);\n if (val.data.result.code !== \"F\") {\n this.OnViewApprove(this.renderApproveButtonModal());\n this.formRefSub.current.resetFields();\n //reloadin data\n Api.post(\"/v2/get_job_sub_type\", {\n job_sub_type_id: null,\n job_category_id: data_edit.job_category_id,\n Job_type_id: data_edit.job_type_id,\n is_active: 1,\n effective: null,\n company_id: Cookies.get(\"companyid\"),\n operator_id: Cookies.get(\"operator_id\"),\n sql_where: \"\",\n }).then((val) => {\n // console.log(val);\n if (val.data.result.code === \"P\") {\n this.setState({\n data_sub: val.data.data,\n master_data_sub: val.data.data,\n });\n }\n });\n } else {\n this.OnViewReject(this.renderRejectButtonModal());\n }\n });\n\n } else if (this.state.processType == \"edit sub\") {\n // console.log(\"edit sub\");\n // console.log(values);\n // console.log(modal_item);\n form[\"company_id\"] = Cookies.get(\"companyid\");\n form[\"operator_id\"] = Cookies.get(\"operator_id\");\n form[\"create_by\"] = Cookies.get(\"userId\");\n form[\"update_by\"] = Cookies.get(\"userId\");\n form[\"project_id\"] = Cookies.get(\"project_id\");\n form[\"job_category_id\"] = modal_item.job_category_id;\n form[\"job_sub_type_id\"] = modal_item.job_sub_type_id;\n form[\"job_type_id\"] = modal_item.job_type_id;\n form[\"job_type_name\"] = values.sub_type_name;\n form[\"effective_date\"] = moment(values.effective_date).format(\"YYYY-MM-DD\");\n form[\"expire_date\"] = values.expire_date != undefined ? moment(values.expire_date).format(\"YYYY-MM-DD\") : null;\n form[\"is_active\"] = this.state.value;\n\n\n // console.log(form);\n\n await Api.post(\"update_job_sub_type\", form).then((val) => {\n // console.log(val);\n if (val.data.result.code !== \"F\") {\n this.OnViewApprove(this.renderApproveButtonModal());\n this.formRefSub.current.resetFields();\n //reloadin data\n Api.post(\"/v2/get_job_sub_type\", {\n job_sub_type_id: null,\n job_category_id: modal_item.job_category_id,\n Job_type_id: modal_item.job_type_id,\n is_active: 1,\n effective: null,\n company_id: Cookies.get(\"companyid\"),\n operator_id: Cookies.get(\"operator_id\"),\n sql_where: \"\",\n }).then((val) => {\n console.log(val);\n if (val.data.result.code === \"P\") {\n this.setState({\n data_sub: val.data.data,\n master_data_sub: val.data.data,\n });\n }\n });\n } else {\n this.OnViewReject(this.renderRejectButtonModal());\n }\n });\n }\n }\n\n async handleDelete() {\n const { modal_item, processType } = this.state;\n var form = {};\n if (processType == \"delete\") {\n form[\"create_by\"] = Cookies.get(\"username\");\n // form[\"update_by\"] = Cookies.get(\"userId\");\n form[\"company_id\"] = Cookies.get(\"companyid\");\n form[\"operator_id\"] = Cookies.get(\"operator_id\");\n form[\"project_id\"] = Cookies.get(\"project_id\");\n form[\"job_category_id\"] = modal_item.job_category_id;\n form[\"job_type_name\"] = modal_item.job_type_name;\n form[\"effective_date\"] = moment(modal_item.effective_date).format(\"YYYY-MM-DD\");\n form[\"expire_date\"] = modal_item.expire_date != undefined ? moment(modal_item.expire_date).format(\"YYYY-MM-DD\") : null;\n form[\"is_active\"] = 0;\n form[\"ma_type\"] = modal_item.ma_type;\n form[\"form_id\"] = \"\";\n form[\"data_dynamic\"] = \"\";\n form[\"create_date\"] = moment(new Date()).format(\"YYYY-MM-DD HH:mm\");\n form[\"roworder\"] = \"\";;\n form[\"job_type_id\"] = modal_item.job_type_id;\n\n // console.log(form);\n\n await Api.post(\"v2/update_job_type\", form).then((val) => {\n // console.log(val);\n if (val.data.result.code !== \"F\") {\n this.OnViewApprove(this.renderApproveButtonModal());\n this.setState({\n data: [],\n })\n // reloadin data\n Api.post(\"/v4/get_job_type\", {\n pk_id: null,\n is_active: 1,\n effective: null,\n sql_where: null,\n company_id: Cookies.get(\"companyid\"),\n operator_id: Cookies.get(\"operator_id\"),\n project_id: Cookies.get(\"project_id\"),\n UserName: Cookies.get(\"username\"),\n }).then((val) => {\n // console.log(val);\n if (val.data.result.code === \"P\") {\n this.setState({\n data: val.data.data,\n master_data_job_type: val.data.data,\n data_sub: [],\n master_data_sub: [],\n data_edit: null,\n });\n }\n });\n } else {\n this.OnViewReject(this.renderRejectButtonModal());\n }\n });\n\n\n } else if (\"delete sub\") {\n console.log(modal_item);\n form[\"company_id\"] = Cookies.get(\"companyid\");\n form[\"operator_id\"] = Cookies.get(\"operator_id\");\n form[\"create_by\"] = modal_item.create_by;\n form[\"update_by\"] = Cookies.get(\"userId\");\n form[\"project_id\"] = Cookies.get(\"project_id\");\n form[\"job_category_id\"] = modal_item.job_category_id;\n form[\"job_sub_type_id\"] = modal_item.job_sub_type_id;\n form[\"job_type_id\"] = modal_item.job_type_id;\n form[\"job_type_name\"] = modal_item.sub_type_name;\n form[\"effective_date\"] = moment(modal_item.effective_date).format(\"YYYY-MM-DD\");\n form[\"expire_date\"] = modal_item.expire_date != undefined ? moment(modal_item.expire_date).format(\"YYYY-MM-DD\") : null;\n form[\"is_active\"] = 0;\n\n await Api.post(\"update_job_sub_type\", form).then((val) => {\n // console.log(val);\n if (val.data.result.code !== \"F\") {\n this.OnViewApprove(this.renderApproveButtonModal());\n // this.formRefSub.current.resetFields();\n //reloadin data\n Api.post(\"/v2/get_job_sub_type\", {\n job_sub_type_id: null,\n job_category_id: modal_item.job_category_id,\n Job_type_id: modal_item.job_type_id,\n is_active: 1,\n effective: null,\n company_id: Cookies.get(\"companyid\"),\n operator_id: Cookies.get(\"operator_id\"),\n sql_where: \"\",\n }).then((val) => {\n // console.log(val);\n if (val.data.result.code === \"P\") {\n this.setState({\n data_sub: val.data.data,\n });\n }\n });\n } else {\n this.OnViewReject(this.renderRejectButtonModal());\n }\n });\n }\n }\n onChange = (e) => {\n this.setState({ value: e.target.value });\n };\n\n async onModal(mode, visible, item) {\n if (mode === \"add\") {\n this.setState({\n mode: mode,\n processType: mode,\n visible: visible,\n });\n } else if (mode === \"edit\") {\n // console.log(item);\n this.setState({\n mode: mode,\n processType: mode,\n visible: visible,\n modal_item: item,\n });\n\n {\n setTimeout(() => {\n this.formRef.current.setFieldsValue({\n job_type_name: item.job_type_name,\n job_category_id: item.job_category_id,\n ma_type: item.ma_type,\n effective_date: moment(item.effective_date),\n expire_date: item.expire_date ? moment(item.expire_date) : null,\n is_active: item.is_active,\n });\n }, 0);\n }\n } else if (mode === \"delete\") {\n this.setState({\n processType: mode,\n visible_delete: visible,\n modal_item: item,\n });\n } else if (mode === \"add sub\") {\n this.setState({\n mode: mode,\n processType: mode,\n visible_sub: visible,\n });\n } else if (mode === \"edit sub\") {\n console.log(item);\n this.setState({\n mode: mode,\n processType: mode,\n visible_sub: visible,\n modal_item: item,\n });\n {\n setTimeout(() => {\n this.formRefSub.current.setFieldsValue({\n sub_type_id: item.job_sub_type_id,\n sub_cat_type_name: item.job_type_name,\n job_category_id: item.job_category_id,\n sub_type_name: item.job_type_name,\n effective_date: moment(item.effective_date),\n expire_date: item.expire_date ? moment(item.expire_date) : null,\n is_active: item.is_active,\n });\n }, 0);\n }\n } else if (mode === \"delete sub\") {\n this.setState({\n processType: mode,\n visible_delete: visible,\n modal_item: item,\n });\n }\n }\n\n NotiModal() {\n const { processType } = this.state;\n if (processType == \"add\") {\n return \"Successfully Added Job Type\";\n } else if (processType == \"edit\") {\n return \"Successfully Edited Job Type\";\n } else if (processType == \"delete\") {\n return \"Successfully Deleted Job Type\";\n } else if (processType == \"add sub\") {\n return \"Successfully Added Job Sub Type\";\n } else if (processType == \"edit sub\") {\n return \"Successfully Edited Job Sub Type\";\n } else if (processType == \"delete sub\") {\n return \"Successfully Deleted Job Sub Type\";\n }\n }\n\n //Close the modal\n ModalClosed = () => {\n this.setState({\n visible: false,\n visible_sub: false,\n visible_delete: false,\n });\n };\n\n returnSetFieldValueDate(item) {\n if (!item || item == undefined) {\n // console.log(\"null\");\n return null;\n } else {\n // console.log(item);\n return moment(item);\n }\n }\n\n async editAssetType(name, item) {\n var form = await item;\n this.onModal(name, \"edit\", true);\n if (name == \"main\") {\n this.formRef.current.setFieldsValue({\n asset_type_id: form.asset_type_id,\n asset_group_type: form.asset_group_type,\n asset_type_name: form.asset_type_name,\n ma_type : form.ma_type,\n });\n } else {\n // console.log(\"==============================\");\n // console.log(form);\n // console.log(\"==============================\");\n this.formRef.current.setFieldsValue({\n asset_sub_type_id: form.job_sub_type_id,\n asset_sub_group_type: form.job_category_id,\n asset_sub_type_name: form.job_type_name,\n ma_type : form.ma_type,\n });\n }\n }\n\n async onClickRow(item) {\n this.setState({\n data_sub : []\n })\n const result = await Api.post(\"/v2/get_job_sub_type\", {\n job_sub_type_id: null,\n job_category_id: item.job_category_id,\n Job_type_id: item.job_type_id,\n is_active: 1,\n effective: null,\n company_id: Cookies.get(\"companyid\"),\n operator_id: Cookies.get(\"operator_id\"),\n sql_where: \"\",\n });\n console.log(result);\n \n if (result.data.result.code === \"P\") {\n this.setState({\n data_sub: result.data.data,\n master_data_sub: result.data.data,\n data_edit : item\n });\n } \n }\n\n renderModal() {\n const { visible, mode, category, dateFormatList } = this.state;\n return (\n \n {mode} Job Type\n \n }\n closable={true}\n visible={visible}\n footer={false}\n onCancel={this.ModalClosed}\n destroyOnClose={true}\n >\n \n
\n this.handleSubmit(values)}\n ref={this.formRef}\n layout=\"vertical\"\n >\n {mode === \"edit\" ? (\n \n \n \n Active\n \n \n Inactive\n \n \n \n ) : null}\n\n \n \n \n \n \n {category.map((item, index) => (\n \n {item.job_category_name}\n \n ))}\n \n \n \n \n \n CM\n \n \n PM\n \n \n \n \n\n \n \n \n\n \n \n \n\n \n this.setState({ visible: false })}\n className=\"btn btn-secondary\"\n >\n Cancel\n \n \n \n \n
\n
\n
\n
\n \n {mode === \"edit sub\"?\n <>\n
\n Status\n
\n
\n \n Active\n \n \n Inactive\n \n \n \n : null}\n
\n\n {/*
\n
\n \n \n {category.map((item, index) => (\n \n {item.job_category_name}\n \n ))}\n \n \n
\n
\n\n
\n
\n \n \n {sub_category.map((item, index) => (\n \n {item.job_type_name}\n \n ))}\n \n \n
\n
*/}\n
\n\n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n
\n
\n
\n {window.location.hostname == \"localhost\" ? (\n
\n ) : (\n
\n )}\n
\n
\n
\n \n Are you sure?\n \n
\n
\n
\n
\n this.setState({ visible_delete: false })}\n className=\"btn btn-secondary\"\n >\n No\n \n this.handleDelete()}\n className=\"btn btn-danger\"\n >\n Yes\n \n
\n
\n
\n
\n
\n {window.location.hostname == \"localhost\" ? (\n
\n ) : (\n
![]({Api.absoluteUrl(\"./icon/approve_check.svg\")})
\n )}\n
\n
\n\n
\n
\n \n {this.NotiModal()}\n \n
\n
\n\n
\n
\n \n this.setState({\n visible_approve: false,\n visible_delete: false,\n visible: false,\n visible_sub: false,\n })\n }\n className=\"btn btn-warning\"\n >\n Ok\n \n
\n
\n
\n
\n
\n {window.location.hostname == \"localhost\" ? (\n
\n ) : (\n
![]({Api.absoluteUrl(\"./icon/reject.svg\")})
\n )}\n
\n
\n\n
\n
\n \n {this.state.error_log != null &&\n this.state.error_log.includes(\n \"already have material_code:\"\n ) ? (\n <>\n \n Add Permission Failed.\n \n
\n \n {this.state.error_log}\n \n \n ) : (\n \n Submission Failed, Please Check Your Input\n \n )}\n \n
\n
\n\n
\n
\n \n this.setState({ visible_reject: false, visible: false })\n }\n className=\"btn btn-warning\"\n >\n Ok\n \n
\n
\n
\n {this.state.visible_approve ? this.renderApproveButtonModal() : null}\n {this.state.visible_reject ? this.renderRejectButtonModal() : null}\n {this.renderDelete()}\n {this.renderModal()}\n {this.renderModalSub()}\n
Basic Data\n
Job Type
\n\n
\n
\n\n
this.onModal(\"add\", true)}\n >\n \n Add Job Type\n \n \n
\n\n
Job Sub Type
\n \n
\n \n
\n
\n Current selected job type: {data_edit? \n
\n {data_edit.job_type_name != undefined || data_edit.job_type_name != null? data_edit.job_type_name: \"-\"}\n
\n : \n \"-\" }\n
\n
\n {data_edit != null ?\n
this.onModal(\"add sub\", true)}\n >\n \n Add Job Sub Type\n \n :null}\n \n
{moment(item.effective_date).format(\"DD/MM/YYYY\")}
\n ),\n sorter: (a, b) => \n (a.effective_date === null || a.effective_date === undefined ? \"\" : a.effective_date).localeCompare\n (b.effective_date === null || b.effective_date === undefined ? \"\" : b.effective_date), \n },\n {\n title: \"Expired date\",\n key: \"expire_date\",\n align: \"center\",\n render: (item) =>\n !item.expire_date ? (\n \"-\"\n ) : (\n {moment(item.expire_date).format(\"DD/MM/YYYY\")}
\n ),\n sorter: (a, b) => \n (a.expire_date === null || a.expire_date === undefined ? \"\" : a.expire_date).localeCompare\n (b.expire_date === null || b.expire_date === undefined ? \"\" : b.expire_date), \n },\n {\n title: \"Status\",\n dataIndex: \"is_active\",\n key: \"is_active\",\n align: \"center\",\n render: (item) => (\n \n {item === 0 ? (\n \n InActive\n \n ) : (\n \n Active\n \n )}\n
\n ),\n sorter: () => null,\n },\n {\n title: \"Action\",\n align: \"center\",\n render: (item) => (\n \n ),\n sorter: () => null,\n },\n ],\n modal_item: {},\n err_log: \"\",\n visible_approve: false,\n visible_delete: false,\n };\n }\n\n async componentDidMount() {\n const result = await Api.post(\"get_division\", {\n pk_id: null,\n is_active: 1,\n sql_where: \" and company_id=\" + Cookies.get(\"companyid\") + \" and operator_id=\" + Cookies.get(\"operator_id\"),\n });\n if (result.data.result.code === \"P\") {\n this.setState({\n //data: result.data.data.division_dto_list,\n data: result.data.data,\n master_data: result.data.data,\n loading: false,\n });\n } \n }\n\n async handleSubmit(values) {\n const { mode, modal_item } = this.state;\n\n if(mode === \"Add\"){\n \n var dataset = {\n \"company_id\": Cookies.get(\"companyid\"),\n \"operator_id\": Cookies.get(\"operator_id\"),\n \"project_id\": Cookies.get(\"project_id\"),\n \"division_id\": null,\n \"division_name\": values.division_name,\n \"is_active\": 1,\n \"effective_date\": moment(values.effective_date).format(\"YYYY-MM-DD\"),\n \"expire_date\": moment(values.expire_date).format(\"YYYY-MM-DD\"),\n \"create_date\": moment(new Date()).format(\"YYYY-MM-DD HH:mm\"),\n \"create_by\": Cookies.get(\"username\"),\n \"form_id\": \"\",\n \"data_dynamic\": null\n };\n\n Api.post(\"v2/update_division\", dataset)\n .then((val) => {\n if(val.data.result.code.toLowerCase() === \"p\"){\n this.OnViewApprove(this.renderApproveButtonModal());\n this.formRef.current.resetFields();\n Api.post(\"get_division\", {\n pk_id: null,\n is_active: 1,\n sql_where: \" and company_id=\" + Cookies.get(\"companyid\") + \" and operator_id=\" + Cookies.get(\"operator_id\"),\n }).then((result) => {\n if (result.data.result.code === \"P\") {\n this.setState({\n //data: result.data.data.division_dto_list,\n data: result.data.data,\n master_data: result.data.data,\n loading: false,\n });\n } \n })\n } else {\n // alert(\"Error:\" + val.data.result.showtext);\n this.setState({\n err_log: val.data.result.showtext\n })\n this.OnViewReject(this.renderRejectButtonModal());\n }\n })\n\n } else if (mode === \"Edit\"){\n var dataset = {\n \"company_id\": Cookies.get(\"companyid\"),\n \"operator_id\": Cookies.get(\"operator_id\"),\n \"project_id\": Cookies.get(\"project_id\"),\n \"division_id\": modal_item.division_id,\n \"division_name\": values.division_name,\n \"is_active\": 1,\n \"effective_date\": moment(values.effective_date).format(\"YYYY-MM-DD\"),\n \"expire_date\": moment(values.expire_date).format(\"YYYY-MM-DD\"),\n \"create_date\": moment(new Date()).format(\"YYYY-MM-DD HH:mm\"),\n \"create_by\": modal_item.create_by,\n \"form_id\": \"\",\n \"data_dynamic\": null\n };\n \n Api.post(\"v2/update_division\", dataset)\n .then((val) => {\n if(val.data.result.code.toLowerCase() === \"p\"){\n this.OnViewApprove(this.renderApproveButtonModal());\n this.formRef.current.resetFields();\n Api.post(\"get_division\", {\n pk_id: null,\n is_active: 1,\n sql_where: \" and company_id=\" + Cookies.get(\"companyid\") + \" and operator_id=\" + Cookies.get(\"operator_id\"),\n }).then((result) => {\n if (result.data.result.code === \"P\") {\n this.setState({\n //data: result.data.data.division_dto_list,\n data: result.data.data,\n master_data: result.data.data,\n loading: false,\n });\n } \n })\n } else {\n this.setState({\n err_log: val.data.result.showtext\n })\n this.OnViewReject(this.renderRejectButtonModal());\n }\n })\n }\n\n // await this.props.submit(dataset);\n\n\n }\n\n onChange = (e) => {\n this.setState({ value: e.target.value });\n };\n\n async onModal(mode, visible, item) {\n console.log(item);\n if (visible === false) {\n this.setState({ visible: visible });\n this.formRef.current.resetFields();\n } else {\n await this.setState({\n mode: mode,\n visible: visible,\n });\n if (mode === \"Edit\") {\n // var form = await item;\n // this.setState({\n // job_id: form.job_category_id,\n // });\n // this.formRef.current.setFieldsValue({\n // job_category_name: form.job_category_name,\n // date: [moment(form.effective_date), moment(form.expire_date)],\n // is_active: form.is_active,\n // });\n this.setState({\n modal_item: item,\n })\n await this.formRef.current.setFieldsValue({\n is_active: item.is_active,\n division_name: item.division_name,\n effective_date: moment(item.effective_date),\n expire_date: item.expire_date? moment(item.expire_date) : null,\n })\n }\n }\n }\n\n renderModal() {\n const { visible, title, mode, loading } = this.state;\n return (\n \n {mode} {title}\n \n }\n centered\n visible={visible}\n footer={null}\n closable={false}\n // ref={this.formRef}\n >\n \n \n
\n this.handleSubmit(values)}\n layout=\"vertical\"\n ref={this.formRef}\n >\n {mode == \"Edit\" ? (\n \n \n \n Active\n \n \n Inactive\n \n \n \n ) : null}\n\n \n \n \n \n \n \n \n \n \n \n this.onModal(\"\", false)}\n className=\"btn btn-secondary\"\n >\n Cancel\n \n \n \n \n
\n
\n
\n
\n {window.location.hostname == \"localhost\" ? (\n
\n ) : (\n
\n )}\n
\n
\n \n
\n
\n \n {mode} Successful\n \n
\n
\n \n
\n
\n \n this.setState({\n visible_approve: false,\n visible_delete: false,\n visible: false,\n })\n }\n className=\"btn btn-warning\"\n >\n Ok\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n Add Permission Failed.
\n {this.state.err_log}\n \n
\n
\n \n
\n
\n \n this.setState({ visible_reject: false, visible: false, err_log: \"\" })\n }\n className=\"btn btn-warning\"\n >\n Ok\n \n
\n
\n
\n {this.state.visible_approve ? this.renderApproveButtonModal() : null}\n {this.state.visible_reject ? this.renderRejectButtonModal() : null}\n
Basic Data\n
{title}
\n
\n
\n
this.onModal(\"Add\", true)}\n >\n \n Add {title}\n \n \n
\n {this.renderModal()}\n
{childNode} | ;\n };\n\n handleDelete = (key) => {\n const dataSource = [...this.state.dataSource];\n this.setState({\n dataSource: dataSource.filter((item) => item.key !== key),\n });\n };\n\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n test: `Edward King ${count}`,\n test2: 32,\n test3: `London, Park Lane no. ${count}`,\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1,\n });\n };\n\n handleSave = (row) => {\n console.log(this.state.dataSource);\n const newData = [...this.state.dataSource];\n const index = newData.findIndex((item) => row.key === item.key);\n const item = newData[index];\n newData.splice(index, 1, { ...item, ...row });\n this.setState({\n dataSource: newData,\n });\n };\n\n render() {\n const { dataSource } = this.state;\n const components = {\n body: {\n row: this.EditableRow,\n cell: this.EditableCell,\n },\n };\n const columns = this.state.columns.map((col) => {\n if (!col.editable) {\n return col;\n }\n\n return {\n ...col,\n onCell: (record) => ({\n record,\n editable: col.editable,\n dataIndex: col.dataIndex,\n title: col.title,\n handleSave: this.handleSave,\n }),\n };\n });\n return (\n \n
\n Add a row\n \n \"editable-row\"}\n bordered\n dataSource={dataSource}\n columns={columns}\n />\n \n {visible ? (\n
\n
\n {mode} {this.state.btnType.toUpperCase()}\n \n {mode === \"add\" ? (\n
this.handleSubmit(values)}\n layout=\"vertical\"\n initialValues={dataAdd}\n >\n \n
\n \n \n {dataModuleName.map((d) => (\n \n ))}\n \n \n
\n
\n \n \n {dataCompanyName.map((d) => (\n \n ))}\n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n
\n \n \n {dataTableName.map((d) => (\n \n ))}\n \n \n
\n
\n \n \n {dataMasterLanguage.map((d) => (\n \n ))}\n \n \n
\n
\n
\n
\n {(fields, { add, remove }) => {\n return (\n \n
\n {\n add();\n }}\n >\n Add Conditions\n \n \n {fields.map((field, index) => (\n
\n \n \n \n {dataColumnName.map((d) => (\n \n ))}\n \n \n \n \n \n {index !== 0 ? (\n {\n remove(field.name);\n }}\n />\n ) : null}\n \n \n );\n }}\n \n
\n
\n
\n
\n {(fields, { add, remove }) => {\n return (\n \n
\n {\n this.addComponent();\n add();\n console.log(\"add\");\n }}\n >\n Add Forms\n \n \n {fields.map((field, index) => (\n
\n \n {valueMasterLanguage.map((value, key) => {\n return (\n \n \n \n );\n })}\n \n {\n this.handleChangeType(\n value,\n index,\n field\n );\n\n /* check call modal */\n\n if (value[0] === \"input\") {\n this.toggleModalShow(value[1]);\n } else if (value[0] === \"textarea\") {\n this.toggleModalShow(value[0]);\n }\n }}\n disabled={index === 0 ? disBtn : false}\n />\n \n \n \n \n {config[index][\"value\"] ? (\n \n {\n this.onModalConfig(field, index);\n }}\n >\n ![]({Api.absoluteUrl(\"/icon/add_job.svg\")})
\n \n \n ))}\n
\n );\n }}\n \n\n {/*
\n {(fields, { add, remove }) => {\n return (\n \n
\n {\n add();\n }}\n style={{ width: \"15%\" }}\n >\n Add Column of Table\n \n \n\n {fields.map((field, index) => (\n
1234\n
\n
\n {(fields, { add, remove }) => {\n return (\n \n \n {\n add();\n }}\n style={{ width: \"15%\" }}\n >\n Add Table\n \n \n
\n )\n }}\n\n \n
\n
\n
\n this.setState({ visible: false })}\n className=\"btn btn-secondary mr-3\"\n >\n Cancel\n \n \n
\n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n
\n \n \n \n
\n
\n \n \n {dataMasterLanguage.map((d) => (\n \n ))}\n \n \n
\n
\n
\n
\n {(fields) => {\n return (\n \n
Conditions
\n {fields.map((field, index) => (\n
\n \n \n \n \n \n \n \n \n \n );\n }}\n \n
\n
\n
\n {(fields, { add, remove }) => {\n return (\n \n
\n {\n add();\n }}\n style={{ width: \"15%\" }}\n >\n Add Forms\n \n \n {fields.map((field, index) => (\n
\n \n {valueMasterLanguage.map((value, key) => {\n return (\n \n \n \n );\n })}\n \n \n this.handleChangeType(value, index)\n }\n disabled={\n dataMasFormJson[\"forms\"][index] !==\n undefined\n ? dataMasFormJson[\"forms\"][index]\n .disabled\n : false\n }\n />\n \n \n \n \n {dataMasFormJson[\"forms\"][index] !==\n undefined ? null : (\n {\n remove(field.name);\n }}\n />\n )}\n \n \n );\n }}\n \n
\n {console.log(this.state.TableColumnName)}\n \n
\n )}\n \n this.setState({ visibleView: false })}\n className=\"btn btn-secondary\"\n >\n Cancel\n \n \n \n );\n }\n\n render() {\n const { data, columns } = this.state;\n return (\n \n {this.state.visible ? (\n
{this.state.visible ? this.renderAdd() : null}
\n ) : (\n
\n
Dynamic
\n\n
\n
this.getDataGetMasFormJson(value)}\n style={{ width: 200 }}\n />\n\n \n
\n
this.onModal(\"\", \"add\", true, \"form\")}\n >\n \n Add Form\n \n\n {/* this.onModal(\"\", \"add\", true, \"table\")}\n >\n \n Add Table\n */}\n \n
\n
\n {/*
*/}\n
\n )}\n {this.state.visibleView ? this.renderView() : null}\n {this.state.visibleConfig ? this.renderModalConfig() : null}\n {this.state.showApiConfigModal ? this.renderModelAPI() : null}\n {this.state.showSelectConfigModal ? this.renderModelSelect() : null}\n {this.state.showCheckboxConfigModal ? this.renderModelCheckbox() : null}\n {this.state.showRadioConfigModal ? this.renderModelRadio() : null}\n {this.state.showTextinputConfigModal\n ? this.renderModelTextInput()\n : null}\n {this.state.showPasswordinputConfigModal\n ? this.renderModelPasswordInput()\n : null}\n {this.state.showDateinputConfigModal\n ? this.renderModelDateInput()\n : null}\n {this.state.showDateTimeinputConfigModal\n ? this.renderModelDateTimeInput()\n : null}\n {this.state.showEmailinputConfigModal\n ? this.renderModelEmailInput()\n : null}\n {this.state.showMonthinputConfigModal\n ? this.renderModelMonthInput()\n : null}\n {this.state.showNumberinputConfigModal\n ? this.renderModelNumberInput()\n : null}\n {this.state.showRangeinputConfigModal\n ? this.renderModelRangeInput()\n : null}\n {this.state.showPhoneNumberinputConfigModal\n ? this.renderModelTelinput()\n : null}\n {this.state.showTextAreainputConfigModal\n ? this.renderModelTextAreaInput()\n : null}\n {this.state.showTimeinputConfigModal\n ? this.renderModelTimeinput()\n : null}\n {this.state.showUrlinputConfigModal ? this.renderModelUrlinput() : null}\n {this.state.showWeekinputConfigModal\n ? this.renderModelWeekinput()\n : null}\n
\n
\n \n {this.state.btnname === \"Edit File\" ? (\n \n ) : (\n \n )}\n \n
\n
\n {language.map((value, key) => {\n return (\n
\n \n \n \n
\n );\n })}\n
\n \n this.setState({ visible: false, form: {}, data_edit: {} }) +\n this.formRef.current.resetFields()\n }\n >\n Close\n \n {console.log(this.state.data_edit[\"file_name\"])}\n {(this.state.form[\"file_name\"] === undefined ||\n this.state.form[\"file_name\"] === \"\") &&\n this.state.data_edit[\"file_name\"] === undefined ? (\n \n ) : (\n \n {this.state.btnname}\n \n )}\n
\n \n );\n }\n render() {\n const { columns } = this.state;\n return (\n \n
Configuration Translate
\n
\n
\n
this.SearchInput(value)}\n style={{ width: \"300px\", marginLeft: \"10px\" }}\n enterButton\n />\n \n this.setState({ visible: true, btnname: \"Add Field\" })\n }\n >\n Add Field\n \n {this.state.statustable ? (\n \n ) : null}\n \n {this.rensderModal()}\n
|
);\nconst SortableContainer = sortableContainer((props) => );\n\nclass AddCheckList extends Component {\n formRef = React.createRef();\n constructor(props) {\n super(props);\n this.state = {\n loading: true,\n title: \"ADD CHECK LIST\",\n job_type: [],\n sub_type: [],\n jobcategory: \"\",\n form: [\n {\n no: \"\",\n description: \"\",\n },\n ],\n form_detail: [\n {\n job_checklist_name: \"\",\n check_flag: 0,\n remark_flag: 0,\n photo_flag: 0,\n job_checklist_type: 1,\n },\n ],\n Priority: 1,\n modalstatus: false,\n set_asset: [],\n status_cookie: 0,\n job_cat: [],\n data_translate: [],\n factupdate: false,\n columns: [\n {\n title: \"No\",\n dataIndex: \"\",\n // key: \"\",\n align: \"center\",\n render: (item) =>\n item.job_checklist_type === 0 ? (\n \n {\" \"}\n {\"Title\"}{\" \"}\n \n ) : (\n \n ),\n className: \"drag-visible\",\n },\n // job_checklist_id\n {\n title: \"Description\",\n dataIndex: \"\",\n // key: \"job_checklist_name\",\n className: \"drag-visible\",\n render: (item) =>\n item.job_checklist_type === 0 ? (\n \n {\" \"}\n {item.job_checklist_name}{\" \"}\n \n ) : (\n item.job_checklist_name\n ),\n },\n // job_checklist_name\n {\n title: \"Check Box\",\n dataIndex: \"\",\n // key: \"check_flag\",\n align: \"center\",\n render: (item) =>\n item.job_checklist_type === 0 ? null : item.check_flag === null ||\n item.check_flag === 0 ? (\n \n ) : (\n \n ),\n },\n {\n title: \"หมายเหตุ\",\n // key: \"remark_flag\",\n dataIndex: \"\",\n align: \"center\",\n render: (item) =>\n item.job_checklist_type === 0 ? null : item.remark_flag === null ||\n item.remark_flag === 0 ? (\n \n ) : (\n \n ),\n },\n {\n title: \"Photo\",\n dataIndex: \"\",\n // key: \"photo_flag\",\n align: \"center\",\n render: (item) =>\n item.job_checklist_type === 0 ? null : item.photo_flag === null ||\n item.photo_flag === 0 ? (\n \n ) : (\n \n ),\n },\n {\n title: \"Action\",\n dataIndex: \"\",\n // key: \"\",\n align: \"center\",\n // sorter: () => null,\n render: (item) => (\n <>\n {item.job_checklist_type === 0 ? (\n \"\"\n ) : (\n <>\n this.setcolum_title()}\n >\n \n \n this.onDelete(item)}\n >\n \n \n \n )}\n \n ),\n },\n ],\n columns_description: [\n {\n title: \"No.\",\n dataIndex: \"no\",\n key: \"no\",\n },\n {\n title: \"Description\",\n dataIndex: \"description\",\n key: \"description\",\n },\n {\n title: \"Action\",\n dataIndex: \"\",\n key: \"\",\n },\n ],\n dataSource: [],\n index_color: 0,\n update_des: false,\n display_des: [],\n data_set: {},\n visible_modal: false,\n title_name: \"\",\n };\n }\n async componentDidMount() {\n document.title = \"MaxiOperation - \" + this.state.title;\n const GetJobCategoty = await Api.post(\"get_job_category_V2\", {\n company_id: Cookies.get(\"companyid\"),\n operator_id: Cookies.get(\"operator_id\"),\n project_id: Cookies.get(\"project_id\"),\n job_category_id: null,\n is_active: 1,\n date_active: 1,\n });\n const data_language = await Api.post(\"master_language_detail_get\", {\n company_id: Cookies.get(\"companyid\"),\n page_id: 1,\n });\n\n const sub_checkList = await Api.post(\"get_jobchecklist_master_all\", {\n page_id: 1,\n company_id: Cookies.get(\"companyid\"),\n operator_id: Cookies.get(\"operator_id\"),\n project_id: Cookies.get(\"project_id\"),\n });\n for (let i = 0; i < sub_checkList.data.data.length; i++) {\n sub_checkList.data.data[i][\"index\"] = i;\n sub_checkList.data.data[i][\"key\"] = i + 1;\n }\n this.setState({\n dataSource: sub_checkList.data.data,\n job_cat: GetJobCategoty.data.data.result_data,\n data_translate: JSON.parse(\n data_language.data.data[\"masteR_LANGUAGE_DETAIL\"][0].file_json\n ),\n factupdate: true,\n });\n }\n onSortEnd = ({ oldIndex, newIndex }) => {\n const { dataSource } = this.state;\n if (oldIndex !== newIndex) {\n const newData = arrayMove(\n [].concat(dataSource),\n oldIndex,\n newIndex\n ).filter((el) => !!el);\n this.setState({ dataSource: newData });\n }\n };\n DraggableBodyRow = ({ className, style, ...restProps }) => {\n const { dataSource } = this.state;\n const index = dataSource.findIndex(\n (x) => x.index === restProps[\"data-row-key\"]\n );\n return ;\n };\n async btnjobDetail(n) {\n Api.post(\"get_job_type\", {\n pk_id: null,\n fk_id: n,\n is_active: \"1\",\n effective: \"1\",\n sql_where: null,\n company_id: Cookies.get(\"companyid\"),\n operator_id: Cookies.get(\"operator_id\"),\n })\n .then((response) => {\n this.setState({\n selected_jobtype: null,\n selected_subtype: null,\n sub_type: [],\n jobcategory: n,\n job_type: response.data.data,\n });\n // setTimeout(() => {\n // this.Setdata_jobtype(this.state.data_local.job_type_id);\n // }, 100);\n })\n .catch((e) => {\n console.log(e);\n });\n }\n handleSubmit = async () => {\n console.log(this.state.form);\n console.log(this.state.data_set);\n console.log(this.state.dataSource);\n };\n setcolum_title = () => {\n this.setState({\n dataSource: [\n ...this.state.dataSource,\n {\n job_checklist_id: this.state.dataSource.length + 1,\n job_checklist_name: (\n this.handleDataTitle(value)}\n />\n ),\n checkbox: ,\n remark: ,\n photo: ,\n },\n ],\n });\n this.state.form.push({\n no: \"\",\n description: \"\",\n });\n };\n onDelete = async (key) => {\n // console.log(key.no);\n // console.log(this.state.dataSource);\n // const dataSource_title = [...this.state.dataSource];\n // console.log(this.state.dataSource);\n // const setdataSource = await this.state.dataSource.filter((item) => item.no !== key.no);\n // const setdata_des = dataSource_des.filter((item) => item.no !== key.no);\n\n // console.log(setdataSource);\n // for (let i = 0; i < setdataSource.length; i++) {\n // setdataSource[i][\"no\"] = i + 1;\n // }\n // for (let i = 0; i < setdata_des.length; i++) {\n // setdata_des[i][\"no\"] = i + 1;\n\n // console.log(setdataSource);\n const dataSource = [...this.state.dataSource];\n const setdataSource = await dataSource.filter((item) => item.no !== key.no);\n this.setState({\n dataSource: setdataSource,\n });\n // this.setState({ dataSource: setdataSource });\n };\n handleDataTitle = (data) => {\n this.state.form[data.target.id][\"no\"] = parseInt(data.target.id) + 1;\n this.state.form[data.target.id][\"description\"] = data.target.value;\n };\n handleData = (data, index, name) => {\n this.state.form_detail[index][name] = data;\n };\n Adddescription = () => {\n this.state.dataSource.push({\n job_checklist_name: this.state.title_name,\n job_checklist_type: 0,\n remark_flag: null,\n check_flag: null,\n photo_flag: null,\n index: this.state.dataSource.length,\n key: this.state.dataSource.length + 1,\n });\n for (let i = 0; i < this.state.form_detail.length; i++) {\n this.state.form_detail[i][\"index\"] = this.state.dataSource.length;\n this.state.form_detail[i][\"key\"] = this.state.dataSource.length + 1;\n }\n this.setState({\n dataSource: [...this.state.dataSource, ...this.state.form_detail],\n });\n this.setState({\n form_detail: [\n {\n job_checklist_name: \"\",\n check_flag: 0,\n remark_flag: 0,\n photo_flag: 0,\n job_checklist_type: 1,\n },\n ],\n title_name: \"\",\n });\n };\n Addsubdes = () => {\n this.state.form_detail.push({\n id: this.state.form_detail.length + 1,\n job_checklist_name: \"\",\n check_flag: 0,\n remark_flag: 0,\n photo_flag: 0,\n });\n\n // this.state.form_detail[index].push({\n // no: position + 1,\n // description: \"\",\n // });\n this.setState({\n form_detail: this.state.form_detail,\n });\n };\n async Setdata_jobtype(value) {\n const checkwf = this.state.job_type.find(\n (element) => parseInt(element.job_type_id) === parseInt(value)\n );\n if (checkwf.wf_id === null) {\n this.setState({\n checkbtn: false,\n });\n } else {\n Api.post(\"getButtonDetailWeb\", {\n WF_ID: checkwf.wf_id,\n CompanyID: Cookies.get(\"companyid\"),\n ProjectID: Cookies.get(\"project_id\"),\n JobTypeID: value,\n Version: 1,\n MainProcessID: \"0\",\n SubProcessID: \"-1\",\n ActionID: 1,\n UserName: Cookies.get(\"username\"),\n operator_id: Cookies.get(\"operator_id\"),\n })\n .then((response) => {\n if (response.data.return_nextWorkFlow.length === 0) {\n this.setState({\n checkbtn: false,\n status_button_workflow: \"กรุณาตรวจสอบการเลือก Job Type !!\",\n });\n } else {\n this.setState({\n checkbtn: true,\n WorkFlow: response.data.return_nextWorkFlow,\n });\n }\n })\n .catch((e) => {\n console.log(e);\n });\n }\n Api.post(\"get_job_sub_type\", {\n job_sub_type_id: null,\n job_category_id: this.state.jobcategory,\n job_type_id: value,\n is_active: 1,\n effective: 1,\n sql_where: \" and company_id=\" + Cookies.get(\"companyid\"),\n operator_id: Cookies.get(\"operator_id\"),\n // sql_where: null,\n })\n .then((response) => {\n this.setState({\n selected_jobtype: value || null,\n sub_type: response.data.data.job_sub_type_dto_list,\n });\n })\n .catch((e) => {\n console.log(e);\n });\n // Api.get(\n // \"get_service_type_ma\",\n // \"?company_id=1&job_category_id=\" +\n // this.state.jobcategory +\n // \"&job_type_id=\" +\n // value +\n // \"&service_type_level_id=01000000\"\n // )\n // .then((response) => {\n // this.setState({\n // ObjectPart: response.data.data.result_service_type_ma,\n // });\n // })\n // .catch((e) => {\n // console.log(e);\n // });\n\n Api.post(\"get_service_type_ma_list_each_level\", {\n company_id: Cookies.get(\"companyid\"),\n job_category_id: this.state.jobcategory,\n job_type_id: value,\n service_lv1: null,\n service_lv2: null,\n service_lv3: null,\n service_lv4: null,\n operator_id: Cookies.get(\"operator_id\"),\n })\n .then((response) => {\n // this.state.form[\"service_type_level_id\"] = value;\n this.setState({\n ObjectPart: response.data.data.result,\n });\n })\n .catch((e) => {\n console.log(e);\n });\n\n this.setState({\n customs: {\n select_object_path: null,\n },\n sel_type: null,\n sel_new_type: null,\n sel_sub_cat: null,\n ObjectPart: [],\n serviceType: [],\n newType: [],\n subCategory: [],\n sla_level: [],\n std_hour: \"\",\n std_day: \"\",\n std_minute: \"\",\n sla_id: \"\",\n sel_sla: null,\n });\n }\n DraggableContainer = (props) => (\n \n );\n renderModal() {\n return (\n ADD Title / Detaill\n }\n centered\n visible={this.state.visible_modal}\n footer={null}\n closable={true}\n onCancel={() => this.setState({ visible_modal: false })}\n className=\"custom-modal\"\n >\n \n {/*
\n Status\n
\n
\n Active\n Inactive\n */}\n {/*
*/}\n
\n
\n this.setState({ title_name: e.target.value })}\n />\n
\n
\n {/*
\n \n \n Active\n \n \n Inactive\n \n */}\n
\n
\n this.Addsubdes()}\n >\n Add Colums\n \n \n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n {this.state.form_detail.map((item, index) => {\n return (\n
\n {/*
*/}\n {/* */}\n {/*
*/}\n
\n \n this.handleData(\n e.target.value,\n index,\n \"job_checklist_name\"\n )\n }\n />\n
\n
\n \n this.handleData(\n e.target.checked ? 1 : 0,\n index,\n e.target.name\n )\n }\n />\n
\n
\n \n this.handleData(\n e.target.checked ? 1 : 0,\n index,\n e.target.name\n )\n }\n />\n
\n
\n \n this.handleData(\n e.target.checked ? 1 : 0,\n index,\n e.target.name\n )\n }\n />\n
\n
\n
\n );\n })}\n
\n
\n this.Adddescription()}\n >\n Add Tital / Detail\n \n
\n \n \n
\n {job_cat.job_category_name}\n \n \n \n );\n });\n return (\n <>\n {this.state.factupdate ? (\n <>\n {this.renderModal()}\n \n \n
\n \n \n {this.state.title}\n \n \n
\n
\n
\n
\n
\n \n
\n
\n \n
\n \n Active\n Inactive\n \n
\n
\n
\n
\n
\n
\n
\n
\n {/*
*/}\n
\n
\n
\n {\" \"}\n {\n this.state.data_translate[\n Cookies.get(\"locale\")\n ][\"job_detail\"]\n }\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
{job_cat_btn}
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n \n this.Setdata_jobtype(e.target.value)\n }\n defaultValue={\n this.state.selected_jobtype || \"\"\n }\n value={this.state.selected_jobtype}\n >\n \n {this.state.job_type.map((item, index) => (\n \n {item.job_type_name}\n \n ))}\n \n
\n
\n \n
\n \n this.setState({\n selected_subtype: e.target.value || null,\n })\n }\n defaultValue={this.state.selected_subtype}\n value={this.state.selected_subtype}\n >\n \n {this.state.sub_type.map((item, index) => (\n \n {item.job_type_name}\n \n ))}\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n this.setState({ visible_modal: true })\n }\n >\n \n Add Title\n \n \n \n
\n
\n
\n
{\"-\"}
,\n },\n {\n title: \"Job Category\",\n dataIndex: \"\",\n key: \"\",\n sorter: (a, b) => null,\n },\n {\n title: \"Job Type\",\n dataIndex: \"\",\n key: \"\",\n sorter: (a, b) => null,\n },\n {\n title: \"Job Sub Type\",\n dataIndex: \"\",\n key: \"\",\n sorter: (a, b) => null,\n },\n {\n title: \"Status\",\n dataIndex: \"is_active\",\n align: \"center\",\n key: \"is_active\",\n sorter: (a, b) => null,\n },\n {\n title: \"Action\",\n dataIndex: \"\",\n key: \"\",\n sorter: (a, b) => null,\n render: (item) => (\n <>\n this.Adddescription(item)}\n onClick={() => this.editCheckList()}\n >\n \n \n this.onDelete(item)}\n >\n \n \n \n ),\n },\n];\n\nclass Checklist extends Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n active: 0,\n menu: [\n { icon: \"ma_list.svg\", title: \"MA List\", link: \"\" },\n {\n icon: \"ma_team_service.svg\",\n title: \"MA Team Service\",\n link: \"/ma_team_service\",\n },\n { icon: \"\", title: \"Material Stock\", link: \"/material_stock\" },\n {\n icon: \"notifications.svg\",\n title: \"Notifications\",\n link: \"/notifications\",\n },\n { icon: \"report.svg\", title: \"Report\", link: \"/report\" },\n { icon: \"\", title: \"Setting\", link: \"/setting\" },\n ],\n visible: false,\n value: 1,\n title: \"Job Skill\",\n data: [],\n status_display: false,\n };\n }\n\n async componentDidMount() {\n document.title = this.state.title;\n //console.log('job skill company : '+Cookies.get(\"companyid\"));\n const grouplist = await Api.post(\"get_jobchecklist_group_all\", {\n // pk_id: null,\n // is_active: 1,\n // effective: null,\n // sql_where: null,\n // company_id: Cookies.get(\"companyid\"),\n group_name: \"ALL\",\n });\n this.setState({\n data: grouplist.data.data,\n });\n }\n\n handleSubmit(values) {\n values.create_by = 3;\n values.effective_date = \"2020-05-15\";\n values.expire_date = \"2020-06-15\";\n\n this.props.submit(values);\n }\n onChange = (e) => {\n this.setState({ value: e.target.value });\n };\n onModal(mode, visible) {\n this.setState({\n mode: mode,\n visible: visible,\n });\n }\n\n // renderAddCheckListGroup = () =>{\n // return\n // ()\n // }\n render() {\n const { title, data } = this.state;\n return (\n \n {this.state.status_display === true ? (\n <>\n
this.setState({status_display : false})}\n >\n \n Back \n \n \n \n ) : (\n <>\n Basic Data\n Check List
\n\n \n
console.log(value)}\n style={{ width: 200 }}\n />\n\n this.setState({status_display : true})}\n >\n ![]({ChangePath.absoluteUrl(\"/icon/plus.svg\")})
\n Add Check List\n \n
\n \n \n
\n {job_cat.job_category_name}\n \n \n \n );\n });\n return (\n <>\n {this.state.factupdate ? (\n <>\n \n \n
\n \n \n {this.state.title} \n {/* go back button */}\n \n \n \n Back\n \n \n \n \n
\n
\n
\n
\n {\" \"}\n
\n \n
\n
\n \n
\n \n Active\n Inactive\n \n
\n
\n
\n\n
\n
\n
\n {/* Operator */}\n {\" \"}\n
\n \n this.Setdata_jobtype(e.target.value)\n }\n defaultValue={this.state.selected_jobtype || \"\"}\n value={this.state.selected_jobtype}\n >\n \n {this.state.job_type.map((item, index) => (\n \n {item.job_type_name}\n \n ))}\n \n
\n
\n \n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n {/*
*/}\n
\n
\n
\n {\" \"}\n {\n this.state.data_translate[\n Cookies.get(\"locale\")\n ][\"job_detail\"]\n }\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
{job_cat_btn}
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n \n this.Setdata_jobtype(e.target.value)\n }\n defaultValue={\n this.state.selected_jobtype || \"\"\n }\n value={this.state.selected_jobtype}\n >\n \n {this.state.job_type.map((item, index) => (\n \n {item.job_type_name}\n \n ))}\n \n
\n
\n \n
\n \n this.setState({\n selected_subtype: e.target.value || null,\n })\n }\n defaultValue={this.state.selected_subtype}\n value={this.state.selected_subtype}\n >\n \n {this.state.sub_type.map((item, index) => (\n \n {item.job_type_name}\n \n ))}\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n {/*
*/}\n
\n
\n {/* Job detail */}\n
{\"Job Detail\"}\n
\n
\n
\n
\n
\n
\n
\n {\" \"}\n {this.state.factupdate ? (\n \n Object Part{\" \"}\n *\n \n ) : null}\n \n this.handleproblem(\"objectpart\", value)\n }\n value={\n this.state.customs.select_object_path || \"\"\n }\n >\n \n Please select\n \n {this.state.ObjectPart.map((item, index) => (\n \n {item.service_desc}\n \n ))}\n \n {this.state.valid_obj_part === false &&\n this.state.valid === true ? (\n \n {\" \"}\n กรุณาเลือก Object Part{\" \"}\n \n ) : (\n \"\"\n )}\n
\n
\n {\" \"}\n {this.state.factupdate ? (\n
\n \n Service Type{\" \"}\n *\n \n
\n ) : null}\n
\n this.handleproblem(\"servicetype\", value)\n }\n value={this.state.sel_type || \"\"}\n >\n \n Please select\n \n {this.state.serviceType.map((item, index) => (\n \n {item.service_desc}\n \n ))}\n \n {this.state.valid_service_type === false &&\n this.state.valid === true ? (\n \n {\" \"}\n กรุณาเลือก Service Type{\" \"}\n \n ) : (\n \"\"\n )}\n \n
\n
\n
\n {/* category and subcategory type */}\n
\n
\n
\n
\n
\n {\" \"}\n {this.state.factupdate ? (\n \n Category Type{\" \"}\n *\n \n ) : null}\n \n this.handleproblem(\"new_type\", value)\n }\n >\n \n Please select\n \n {this.state.newType.map((item, index) => (\n \n {item.service_desc}\n \n ))}\n \n {this.state.valid_new_type === false &&\n this.state.valid === true ? (\n \n {\" \"}\n กรุณาเลือก Service Type{\" \"}\n \n ) : (\n \"\"\n )}\n
\n
\n {\" \"}\n {this.state.factupdate ? (\n \n Sub Category{\" \"}\n *\n \n ) : null}\n \n this.handleproblem(\"sub_category\", value)\n }\n >\n \n Please select\n \n {this.state.subCategory.map((item, index) => (\n \n {item.service_desc}\n \n ))}\n \n {this.state.valid_sub_cat === false &&\n this.state.valid === true ? (\n \n {\" \"}\n กรุณาเลือก Sub Category{\" \"}\n \n ) : (\n \"\"\n )}\n
\n
\n
\n
\n {/* SLA level */}\n
\n
\n
\n
\n
\n {\" \"}\n {this.state.factupdate ? (\n \n SLA Level\n \n ) : null}\n \n this.handleproblem(\"sla\", value)\n }\n >\n \n Please select\n \n {this.state.sla_level.map((item, index) => (\n \n {item.sla_name}\n \n ))}\n \n
\n
\n {\" \"}\n {this.state.factupdate ? (\n \n Standard Day\n \n ) : null}\n \n
\n
\n {\" \"}\n {this.state.factupdate ? (\n \n Standard Hour\n \n ) : null}\n \n
\n
\n {\" \"}\n {this.state.factupdate ? (\n \n Standard Minute\n \n ) : null}\n \n
\n
\n
\n
\n
\n
\n
\n {item === 0 ? (\n \n ) : (\n \n Active\n \n )}\n
\n );\n },\n },\n {\n title: \"Action\",\n dataIndex: \"action\",\n key: \"action\",\n render: (item) => (\n \n ),\n },\n];\n\nclass ServiceType extends Component {\n serviceForm = React.createRef();\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n active: 0,\n menu: [\n { icon: \"ma_list.svg\", title: \"MA List\", link: \"\" },\n {\n icon: \"ma_team_service.svg\",\n title: \"MA Team Service\",\n link: \"/ma_team_service\",\n },\n { icon: \"\", title: \"Material Stock\", link: \"/material_stock\" },\n {\n icon: \"notifications.svg\",\n title: \"Notifications\",\n link: \"/notifications\",\n },\n { icon: \"report.svg\", title: \"Report\", link: \"/report\" },\n { icon: \"\", title: \"Setting\", link: \"/setting\" },\n ],\n data: [\n // {\n // key: \"1\",\n // service_type_id: 123234235,\n // service_type_name: \"Digital_HD_Pano\",\n // operators: \"Static\",\n // created_by: \"chanakarn_r\",\n // status: 1,\n // },\n // {\n // key: \"2\",\n // service_type_id: 123234236,\n // service_type_name: \"Samsung\",\n // operators: \"Digital\",\n // created_by: \"chanakarn_r\",\n // status: 1,\n // },\n // {\n // key: \"3\",\n // service_type_id: 123234237,\n // service_type_name: \"Panasonic\",\n // operators: \"Static\",\n // created_by: \"chanakarn_r\",\n // status: 1,\n // },\n ],\n // when able to call api\n realData: [],\n visible: false,\n isCheckListVisible: false,\n value: 1,\n };\n }\n handleCheckListVisible(visible) {\n this.setState({ isCheckListVisible: visible });\n }\n\n async componentDidMount() {\n const serviceData = await Api.post(\"get_service_type_ma\", {\n company_id: \"1\",\n operator_id: Cookies.get(\"operator_id\"),\n job_category_id: \"\",\n job_type_id: \"\",\n service_type_level_id: \"\",\n });\n console.log(\"servicedata\", serviceData);\n this.setState({ data: [...serviceData.data.data.result] });\n }\n\n handleSubmit(values) {\n console.log(\"Success:\", values);\n }\n\n onChange = (e) => {\n this.setState({ value: e.target.value });\n };\n\n onModal(visible) {\n // this.setState({ visible: visible });\n this.setState({ isCheckListVisible: visible });\n }\n\n renderAdd() {\n const { visible, value } = this.state;\n return (\n \n Add Group Type\n \n }\n centered\n visible={visible}\n footer={null}\n closable={false}\n className=\"custom-modal\"\n >\n \n
\n Status\n
\n
\n \n Active\n \n \n Inactive\n \n \n
\n {/*
\n \n \n \n
*/}\n
\n \n \n \n
\n
\n \n \n \n
\n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n
\n \n \n \n
\n
\n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n
\n
\n {isCheckListVisible ? (\n
\n ) : (\n
\n
Basic Data\n
Service Type
\n\n
\n
console.log(value)}\n style={{ width: 200 }}\n />\n\n this.onModal(true)}\n >\n \n Service Type\n \n \n\n {this.renderAdd()}\n
\n
\n )}\n
\n
\n
\n
this.onSelectTab(key)}\n >\n {/* \n \n \n
General information
\n \n Profile photo, name\n \n \n \n }\n key=\"1\"\n >\n
\n */}\n {/*
\n \n \n
Security
\n \n Password\n \n \n \n }\n key=\"2\"\n >\n
\n */}\n {/*
\n \n \n
Notifications
\n \n Set your notifications\n \n \n \n
\n
\n
Basic Data
\n \n Setting Data\n \n \n
\n
Dynamic
\n \n Set your dynamic forms\n \n \n \n }\n key=\"5\"\n >\n \n */}\n \n \n \n
Configuration
\n \n Set your configuration translate\n \n \n \n }\n key=\"6\"\n >\n \n \n \n \n \n
Check List
\n \n Set your Check List\n \n \n \n }\n key=\"7\"\n >\n \n \n \n \n \n \n \n );\n }\n\n renderUIH() {\n const { loading, title, menu, display, active } = this.state;\n return (\n\n \n \n
\n
\n
\n {/*
![](\"/icon/setting_white.svg\")
*/}\n
\n {title}\n
\n
\n
\n
\n
\n
\n
this.onSelectTab(key)}\n >\n {/* \n \n \n
General information
\n \n Profile photo, name\n \n \n \n }\n key=\"1\"\n >\n
\n */}\n {/*
\n \n \n
Security
\n \n Password\n \n \n \n }\n key=\"2\"\n >\n
\n */}\n {/*
\n \n \n
Notifications
\n \n Set your notifications\n \n \n \n
\n
\n
Basic Data
\n \n Setting Data\n \n \n
\n
Dynamic
\n \n Set your dynamic forms\n \n \n \n }\n key=\"5\"\n >\n \n \n \n \n \n
Configuration
\n \n Set your configuration translate\n \n \n \n }\n key=\"6\"\n >\n \n \n\n \n \n \n
Check List
\n \n Set your Check List\n \n \n \n }\n key=\"7\"\n >\n \n \n \n \n \n \n \n );\n }\n}\n\nexport default Setting;\n","/* eslint-disable jsx-a11y/alt-text */\nimport React, { Component } from \"react\";\nimport LayoutOperation from \"../../components/layout_operation\";\n// import { DownOutlined, MenuOutlined } from \"@ant-design/icons\";\nimport { Select, Table, Radio } from \"antd\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\n// import ReactMultiSelectCheckboxes from \"react-multiselect-checkboxes\";\nimport {\n withScriptjs,\n withGoogleMap,\n GoogleMap,\n Marker,\n} from \"react-google-maps\";\nimport Api from \"../../services/ServiceApi\";\n\nfunction buildFileSelector() {\n const fileSelector = document.createElement(\"input\");\n fileSelector.setAttribute(\"type\", \"file\");\n fileSelector.setAttribute(\"multiple\", \"multiple\");\n return fileSelector;\n}\n\nconst mapOptions = {\n disableDefaultUI: true,\n styles: [\n {\n featureType: \"water\",\n elementType: \"geometry\",\n stylers: [\n {\n color: \"#e9e9e9\",\n },\n {\n lightness: 17,\n },\n ],\n },\n {\n featureType: \"landscape\",\n elementType: \"geometry\",\n stylers: [\n {\n color: \"#f5f5f5\",\n },\n {\n lightness: 20,\n },\n ],\n },\n {\n featureType: \"road.highway\",\n elementType: \"geometry.fill\",\n stylers: [\n {\n color: \"#ffffff\",\n },\n {\n lightness: 17,\n },\n ],\n },\n {\n featureType: \"road.highway\",\n elementType: \"geometry.stroke\",\n stylers: [\n {\n color: \"#ffffff\",\n },\n {\n lightness: 29,\n },\n {\n weight: 0.2,\n },\n ],\n },\n {\n featureType: \"road.arterial\",\n elementType: \"geometry\",\n stylers: [\n {\n color: \"#ffffff\",\n },\n {\n lightness: 18,\n },\n ],\n },\n {\n featureType: \"road.local\",\n elementType: \"geometry\",\n stylers: [\n {\n color: \"#ffffff\",\n },\n {\n lightness: 16,\n },\n ],\n },\n {\n featureType: \"poi\",\n elementType: \"geometry\",\n stylers: [\n {\n color: \"#f5f5f5\",\n },\n {\n lightness: 21,\n },\n ],\n },\n {\n featureType: \"poi.park\",\n elementType: \"geometry\",\n stylers: [\n {\n color: \"#dedede\",\n },\n {\n lightness: 21,\n },\n ],\n },\n {\n elementType: \"labels.text.stroke\",\n stylers: [\n {\n visibility: \"on\",\n },\n {\n color: \"#ffffff\",\n },\n {\n lightness: 16,\n },\n ],\n },\n {\n elementType: \"labels.text.fill\",\n stylers: [\n {\n saturation: 36,\n },\n {\n color: \"#333333\",\n },\n {\n lightness: 40,\n },\n ],\n },\n {\n elementType: \"labels.icon\",\n stylers: [\n {\n visibility: \"off\",\n },\n ],\n },\n {\n featureType: \"transit\",\n elementType: \"geometry\",\n stylers: [\n {\n color: \"#f2f2f2\",\n },\n {\n lightness: 19,\n },\n ],\n },\n {\n featureType: \"administrative\",\n elementType: \"geometry.fill\",\n stylers: [\n {\n color: \"#fefefe\",\n },\n {\n lightness: 20,\n },\n ],\n },\n {\n featureType: \"administrative\",\n elementType: \"geometry.stroke\",\n stylers: [\n {\n color: \"#fefefe\",\n },\n {\n lightness: 17,\n },\n {\n weight: 1.2,\n },\n ],\n },\n ], // straight out of something like snazzymaps\n};\n\nconst columns = [\n {\n title: \"No.\",\n dataIndex: \"No\",\n key: \"No\",\n sorter: (a, b) => a.No.length - b.No.length,\n },\n {\n title: \"Code\",\n dataIndex: \"Code\",\n key: \"Code\",\n sorter: (a, b) => a.Code.length - b.Code.length,\n },\n {\n title: \"Problem Detail\",\n dataIndex: \"Problem_Detail\",\n key: \"Problem_Detail\",\n sorter: (a, b) => a.Problem_Detail.length - b.Problem_Detail.length,\n },\n {\n title: \"Unit\",\n dataIndex: \"Unit\",\n key: \"Unit\",\n sorter: (a, b) => a.Unit.length - b.Unit.length,\n },\n {\n title: \"Qty\",\n dataIndex: \"Qty\",\n key: \"Qty\",\n sorter: (a, b) => a.Qty.length - b.Qty.length,\n },\n {\n title: \"Price\",\n dataIndex: \"Price\",\n key: \"Price\",\n sorter: (a, b) => a.Price.length - b.Price.length,\n },\n {\n title: \"Req.By\",\n dataIndex: \"Req_By\",\n key: \"Req_By\",\n },\n {\n title: \"Action\",\n dataIndex: \"Action\",\n key: \"Action\",\n render: (item) => (\n \n {item == 0 ? (\n \n ) : (\n \n Active\n \n )}\n
\n ),\n },\n];\nconst Macolumns = [\n {\n title: \"No.\",\n dataIndex: \"No\",\n key: \"No\",\n sorter: (a, b) => a.No.length - b.No.length,\n },\n {\n title: \"Team group\",\n dataIndex: \"Team_group\",\n key: \"Team_group\",\n sorter: (a, b) => a.Team_group.length - b.Team_group.length,\n },\n {\n title: \"Team\",\n dataIndex: \"Team\",\n key: \"Team\",\n sorter: (a, b) => a.Team.length - b.Team.length,\n },\n {\n title: \"Work date\",\n dataIndex: \"Work_date\",\n key: \"Work_date\",\n sorter: (a, b) => a.Work_date.length - b.Work_date.length,\n },\n {\n title: \"Finish date\",\n dataIndex: \"Finish_date\",\n key: \"Finish_date\",\n sorter: (a, b) => a.Finish_date.length - b.Finish_date.length,\n },\n {\n title: \"Problem Type\",\n dataIndex: \"Problem_Type\",\n key: \"Problem_Type\",\n sorter: (a, b) => a.Problem_Type.length - b.Problem_Type.length,\n },\n {\n title: \"Problem Detail\",\n dataIndex: \"Problem_Detail\",\n key: \"Problem_Detail\",\n sorter: (a, b) => a.Problem_Detail.length - b.Problem_Detail.length,\n },\n {\n title: \"Status\",\n dataIndex: \"status\",\n key: \"status\",\n },\n {\n title: \"Action\",\n dataIndex: \"Action\",\n key: \"Action\",\n render: (item) => (\n \n {item == 0 ? (\n \n ) : (\n \n Active\n \n )}\n
\n ),\n },\n];\n\nconst MyMapComponent = withScriptjs(\n withGoogleMap((props) => (\n \n {props.isMarkerShown && (\n \n )}\n \n ))\n);\n\nclass Addjob extends Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n title: \"ADD JOB\",\n statusbtn: \"Asset\",\n showMenu: false,\n data: [\n { value: 0, text: \"Install\" },\n { value: 1, text: \"Repair\" },\n { value: 2, text: \"Retern\" },\n { value: 3, text: \"Hardware\" },\n { value: 4, text: \"Software\" },\n { value: 5, text: \"Electrical System\" },\n { value: 6, text: \"Network\" },\n { value: 7, text: \"CCTV\" },\n { value: 8, text: \"Photograp\" },\n ],\n startDate: new Date(),\n options: [\n { label: \"00:00-06:00\", value: 1 },\n { label: \"06:00-12:00\", value: 2 },\n { label: \"12:00-13:00\", value: 3 },\n { label: \"13:00-18:00\", value: 4 },\n { label: \"18:00:24:00\", value: 5 },\n ],\n datatable: [\n {\n No: \"1\",\n Code: \"DGT BTS-00\",\n Problem_Detail: \"Digital Signage BTS 01\",\n Unit: \"07/01/2019 18.00\",\n Qty: \"chanakarn_r\",\n Price: \"DGT BTS-00\",\n Req_By: \"Digital Signage BTS 01\",\n Action: \"07/01/2019 18.00\",\n },\n {\n No: \"2\",\n Code: \"DGT BTS-00\",\n Problem_Detail: \"Digital Signage BTS 01\",\n Unit: \"07/01/2019 18.00\",\n Qty: \"chanakarn_r\",\n Price: \"DGT BTS-00\",\n Req_By: \"Digital Signage BTS 01\",\n Action: \"07/01/2019 18.00\",\n },\n {\n No: \"3\",\n Code: \"DGT BTS-00\",\n Problem_Detail: \"Digital Signage BTS 01\",\n Unit: \"07/01/2019 18.00\",\n Qty: \"chanakarn_r\",\n Price: \"DGT BTS-00\",\n Req_By: \"Digital Signage BTS 01\",\n Action: \"07/01/2019 18.00\",\n },\n ],\n datatableMa: [\n {\n No: \"1\",\n Team_group: \"DGT BTS-00\",\n Team: \"Digital Signage BTS 01\",\n Work_date: \"07/01/2019 18.00\",\n Finish_date: \"chanakarn_r\",\n Problem_Type: \"DGT BTS-00\",\n Problem_Detail: \"Digital Signage BTS 01\",\n status: \"OK\",\n },\n {\n No: \"2\",\n Team_group: \"DGT BTS-00\",\n Team: \"Digital Signage BTS 01\",\n Work_date: \"07/01/2019 18.00\",\n Finish_date: \"chanakarn_r\",\n Problem_Type: \"DGT BTS-00\",\n Problem_Detail: \"Digital Signage BTS 01\",\n status: \"OK\",\n },\n {\n No: \"3\",\n Team_group: \"DGT BTS-00\",\n Team: \"Digital Signage BTS 01\",\n Work_date: \"07/01/2019 18.00\",\n Finish_date: \"chanakarn_r\",\n Problem_Type: \"DGT BTS-00\",\n Problem_Detail: \"Digital Signage BTS 01\",\n status: \"OK\",\n },\n ],\n };\n\n this.fileSelector = buildFileSelector();\n }\n\n componentDidMount() {\n document.title = \"MaxiOperation - Add Job\";\n }\n\n btntype(n) {\n this.setState({ statusbtn: n });\n }\n\n buildFileSelector() {\n const fileSelector = document.createElement(\"input\");\n fileSelector.setAttribute(\"type\", \"file\");\n fileSelector.setAttribute(\"multiple\", \"multiple\");\n return fileSelector;\n }\n\n handleFileSelect = (e) => {\n e.preventDefault();\n this.fileSelector.click();\n };\n\n toggleDropdown() {\n this.setState({\n active: !this.state.active,\n });\n }\n handleChange = (date) => {\n this.setState({\n startDate: date,\n });\n };\n onChange = (e) => {\n console.log(\"radio checked\", e.target.value);\n this.setState({\n value: e.target.value,\n });\n };\n render() {\n const {\n loading,\n title,\n statusbtn,\n data,\n startDate,\n options,\n datatable,\n datatableMa,\n } = this.state;\n\n return (\n \n {/* ============================== Header Page ==============================*/}\n\n \n
\n
\n {\" \"}\n {\"< \"} Back\n \n \n
\n
\n
\n
\n
\n \n RECORD PROBLEM \n \n
\n
\n
\n \n \n 1. Job and Asset Detail\n \n \n \n \n 2. Problem Detail\n \n \n \n \n 3. Review and submit\n \n \n
\n
\n\n {/* ======================================== Job and Asset Detail ===================================== */}\n
\n \n
\n\n
\n
\n
\n {\" \"}\n Job Detail and Location{\" \"}\n \n
\n
\n
\n
\n
\n
\n {\" \"}\n
{\" \"}\n \n
\n
\n {\" \"}\n {\" \"}\n
{\" \"}\n \n
\n
\n
\n
\n
\n
\n
\n
\n {\" \"}\n
{\" \"}\n
{\" \"}\n
\n \n {\" \"}\n {\" \"}\n \n
\n \n {\" \"}\n {\" \"}\n \n
\n \n {\" \"}\n \n \n
\n \n {\" \"}\n \n \n {\" \"}\n \n
\n
\n
\n
\n
\n
\n
\n
\n {\" \"}\n {\" \"}\n
{\" \"}\n \n
\n
\n {\" \"}\n {\" \"}\n
{\" \"}\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n }\n containerElement={
}\n mapElement={
}\n />\n
\n
\n
\n
\n
\n
\n
\n
\n {\" \"}\n {\" \"}\n
{\" \"}\n \n
\n
\n {\" \"}\n {\" \"}\n
{\" \"}\n \n
\n
\n
\n
\n
\n
\n
\n
\n {\" \"}\n {\" \"}\n
{\" \"}\n \n
\n
\n {\" \"}\n {\" \"}\n
{\" \"}\n \n
\n
\n
\n
\n \n \n
\n \n {/* ==================================================================================================== */}\n\n {/* ======================================== Problem Detail =========================================== */}\n
\n \n\n \n
\n
\n
\n
\n {\" \"}\n {\" \"}\n
{\" \"}\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n {\" \"}\n {\" \"}\n
{\" \"}\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n {\" \"}\n
{\" \"}\n \n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n {\" \"}\n MA Service officer TEAM{\" \"}\n \n
\n
\n
\n
\n
\n
\n {\" \"}\n {\" \"}\n
{\" \"}\n \n
\n
\n {\" \"}\n {\" \"}\n
{\" \"}\n \n
\n
\n
\n
\n
\n
\n
\n
\n {\" \"}\n {\" \"}\n
{\" \"}\n \n
\n
\n {\" \"}\n {\" \"}\n
{\" \"}\n \n
\n
\n
\n
\n
\n
\n
\n
\n {\" \"}\n
{\" \"}\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n {\" \"}\n {\" \"}\n
{\" \"}\n \n
\n
\n
\n
\n
\n \n MA Expense\n \n
\n \n \n \n \n
\n
\n\n
\n
\n \n Previous\n \n \n
\n
\n {/* ==================================================================================================== */}\n\n {/* ======================================== Review and submit =========================================== */}\n
\n \n
\n
\n
\n
\n {\" \"}\n Job Detail and Location{\" \"}\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
![]({Api.absoluteUrl(\"/icon/urgent.svg\")})
\n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n }\n containerElement={
}\n mapElement={
}\n />\n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n \n \n Previous\n \n \n
\n \n
\n \n \n MA Record history\n \n
\n \n \n {editing ? (\n \n {inputNode}\n \n ) : (\n children\n )}\n | \n );\n};\n\nconst DynamicEditable = (props) => { \n const [form] = Form.useForm();\n const data_dynamic = props.data_dynamic\n\n let len_data = (data_dynamic)?data_dynamic.length:0\n //console.log(len_data,'len_data');\n if(len_data > 0){\n data_dynamic.map((item, i) => {\n item[\"key\"] = i\n });\n }\n\n const [data, setData] = useState(data_dynamic);\n const [count, setCount] = useState(len_data-1)\n const [editingKey, setEditingKey] = useState('');\n const isEditing = (record) => record.key === editingKey;\n\n // const tableCSS = css({\n // margin: \"0px\",\n // backgroundColor: \"white\",\n // \"& table\": { borderCollapse: \"collapse\" },\n // \"& tbody > tr:nth-child(even)\": { backgroundColor: \"#0F0\" },\n // \"& tbody > tr:nth-child(odd)\": { backgroundColor: \"#0F9\" },\n // //\"& tbody > tr:nth-child(even):hover > td\": { backgroundColor: \"#090 !important\" },//change color row when hover\n // \"& tbody > tr:hover > td\": { background: \"none !important\" }, //disable row hover\n // \"& thead > tr > th\": { backgroundColor: \"darkblue\", color: \"white\" },\n // \"& thead > tr\": {\n // borderWidth: \"2px\",\n // borderColor: \"#91F\",\n // borderStyle: \"solid\",\n // },\n // });\n\n const tableCSS = css({\n margin: \"0px\",\n backgroundColor: \"white\",\n \"& table\": { width: \"auto !important\" , whiteSpace: \"nowrap\" },\n });\n\n const edit = (record) => {\n //console.log(record,'record');\n form.setFieldsValue({\n ...record\n });\n \n setEditingKey(record.key);\n };\n\n const cancel = () => {\n setEditingKey('');\n };\n\n const save = async (key) => {\n try {\n const row = await form.validateFields();\n const newData = [...data];\n const index = newData.findIndex((item) => key === item.key); \n\n if (index > -1) {\n const item = newData[index]; \n newData.splice(index, 1, { ...item, ...row });\n setData(newData);\n setEditingKey('');\n } else {\n newData.push(row);\n setData(newData);\n setEditingKey('');\n }\n\n props.parentUpdate(newData, props.table_id);\n } catch (errInfo) {\n console.log('Validate Failed:', errInfo);\n }\n };\n\n const handleDelete = (key) => {\n let newData = [...data];\n const delData = newData.filter((item) => item.key !== key);\n setData(delData);\n props.parentUpdate(delData, props.table_id);\n }\n\n const handleAdd = (col_edit) => {\n let newData = (data !== undefined)?[...data]:[];\n let newCount = count+1;\n let newRow = {\n key: newCount\n }\n col_edit.map((item, i) => {\n //console.log('key : '+item.key);\n newRow[item.key] = ''\n });\n\n newData.push(newRow)\n setData(newData);\n setCount(newCount);\n props.parentUpdate(newData, props.table_id);\n }\n\n const col_edit = JSON.parse(JSON.stringify(props)).col\n let cloneCol = JSON.parse(JSON.stringify(props)).col; // clone\n cloneCol.map((item, i) => {\n item.editable = true;\n });\n cloneCol.push(\n {\n key: \"operation\",\n title: 'operation',\n dataIndex: 'operation',\n width: '9%',\n fixed: \"right\",\n render: (_, record) => {\n const editable = isEditing(record);\n return \n { editable ? (\n \n save(record.key)}\n style={{\n marginRight: 8,\n }}\n >\n Save\n \n \n Cancel\n \n \n ) : (\n edit(record)}>\n Edit\n \n )\n }\n | \n {\n handleDelete(record.key)}\n >\n Delete\n \n }\n \n\n },\n } \n );\n\n const width_scroll = 150 * cloneCol.length;\n\n const columns = [\n {\n title: 'name',\n dataIndex: 'name',\n width: '25%',\n editable: true,\n },\n {\n title: 'age',\n dataIndex: 'age',\n width: '15%',\n editable: true,\n },\n {\n title: 'address',\n dataIndex: 'address',\n width: '40%',\n editable: true,\n },\n {\n title: 'operation',\n dataIndex: 'operation',\n render: (_, record) => {\n const editable = isEditing(record);\n return \n { editable ? (\n \n save(record.key)}\n style={{\n marginRight: 8,\n }}\n >\n Save\n \n \n Cancel\n \n \n ) : (\n edit(record)}>\n Edit\n \n )\n }\n | \n {\n handleDelete(record.key)}\n >\n Delete\n \n }\n \n\n },\n },\n ];\n\n const mergedColumns = cloneCol.map((col) => {\n if (!col.editable) {\n return col;\n }\n\n return {\n ...col,\n onCell: (record) => ({\n record,\n //inputType: col.dataIndex === 'age' ? 'number' : 'text',\n inputType: 'text',\n dataIndex: col.dataIndex,\n title: col.title,\n editing: isEditing(record),\n }),\n };\n });\n\n return (\n \n );\n};\n\nexport default DynamicEditable;","import React from 'react'\nimport {\n Radio,\n Checkbox\n} from \"antd\";\nexport function Rendertext(props) {\n let data = props;\n return (\n \n
\n \n \n {data.label}\n \n \n
\n
\n \n {data.value}\n \n
\n
\n
\n \n \n {data.label}\n \n \n
\n
\n \n \n \n {data.value}\n \n \n \n
\n
\n
\n \n \n {data.label}\n \n \n
\n
\n \n \n \n \n {data.value}\n \n \n \n \n
\n
\n {item.checklist_pic.map((data, index) => {\n return index > 2 ? (\n index === 3 ? (\n <>\n
\n \n
\n \n ) : null\n ) : data.pic_source_type.toLowerCase() === \".jpg\" ||\n data.pic_source_type.toLowerCase() === \".png\" ||\n data.pic_source_type.toLowerCase() === \".jpeg\" ||\n data.pic_source_type.toLowerCase() === \".svg\" ? (\n
\n \n
\n ) : (\n
\n \n \n \n
\n );\n })}\n
\n ส่วนรายละเอียดจากช่าง\n
\n \n
\n
![]({Api.absoluteUrl(\"/img/on_process.svg\")})
\n
\n
กำลังดำเนินงานซ่อม\n
\n
\n
\n
\n {/* {this.state.Inform_Person} */}\n {\"Damage Check\"}\n \n
\n
\n
\n
\n {/* {this.state.Inform_Person} */}\n {\"Corrective action\"}\n \n
\n
\n
\n {this.state.label_damage_check.map((value, index) => {\n return (\n \n
\n \n {this.state.factupdate ? (\n \n {value.text}\n {/* {\n this.state.data_translate[\n Cookies.get(\"locale\")\n ][\"inform_detail\"]\n } */}\n \n ) : null}\n \n
\n
\n \n {this.state.result_damage_detail.length === 0\n ? \"-\"\n : this.state.result_damage_detail[0][value.value] ===\n \"not found id\" ||\n this.state.result_damage_detail[0][value.value] ===\n null ||\n this.state.result_damage_detail[0][value.value] ===\n undefined\n ? \"-\"\n : this.state.result_damage_detail[0][value.value]}\n \n
\n
\n
\n
\n {this.state.label_corrective_action.map((value, index) => {\n return (\n \n
\n \n {this.state.factupdate ? (\n {value.text}\n ) : null}\n \n
\n
\n \n {this.state.data_mainttenance[value.value] || \"-\"}\n \n
\n
\n
\n
\n {/* {this.state.Inform_Person} */}\n {\"Material Usage\"}\n \n
\n {/* {\"เปลี่ยนอะไหล่ หรือ ไม่เปลี่ยนอะไหล่\"} */}\n \n \n
![]({Api.absoluteUrl(\"/icon/check_list.svg\")})
\n
\n {\"Check List\"}\n \n this.CheckListDisplay()}\n >\n {this.state.getFulldetail.data.data.result_checklist.length === 0\n ? \" - \"\n : this.state.getFulldetail.data.data.result_checklist[0]\n .job_check_list_type}\n {/* test */}\n \n \n \n {\"Request Close Date\"}\n \n\n \n {/* {this.state.Inform_Person} */}\n {this.state.factupdate === true ? (\n <>\n {this.state.getFulldetail.data.data.result_maintenance[0]\n .request_close_date != null\n ? moment(\n this.state.getFulldetail.data.data.result_maintenance[0]\n .request_close_date\n ).format(\"DD/MM/YYYY HH:mm:s\")\n : \"-\"}\n \n ) : null}\n \n
\n {/* */}\n \n
\n
\n {/* {this.state.Inform_Person} */}\n {\"Start Time\"}\n \n\n
\n {/* {this.state.Inform_Person} */}\n {this.state.factupdate === true\n ? moment(\n this.state.getFulldetail.data.data.result_maintenance[0]\n .v_create_date\n ).format(\"HH:mm:ss\") +\n \" - \" +\n moment(\n this.state.getFulldetail.data.data.result_total_time[0]\n .v_last_date\n ).format(\"HH:mm:ss\")\n : null}\n \n \n {/*
*/}\n
\n {/* {this.state.Inform_Person} */}\n {\"Total Time\"}\n \n \n {this.state.total_time[0].days}\n {\" Day \"}\n {this.state.total_time[0].hours}\n {\" Hours \"}\n {this.state.total_time[0].min}\n {\" Min \"}\n \n \n
\n
\n {\"Status Report\"}\n \n \n
\n
\n {/* {this.state.Inform_Person} */}\n {\"Attach a photo (Before)\"}\n \n
\n
\n {this.state.set_pic.map((data, index) => {\n return (\n <>\n {(data.pic_upload_type.toLowerCase() === \".jpg\" ||\n data.pic_upload_type.toLowerCase() === \".png\" ||\n data.pic_upload_type.toLowerCase() === \".jpeg\" ||\n data.pic_upload_type.toLowerCase() === \".svg\") &&\n data.pic_type === \"N\" ? (\n
\n \n
\n ) : (data.pic_upload_type.toLowerCase() === \".mp4\" ||\n data.pic_upload_type.toLowerCase() === \".avi\" ||\n data.pic_upload_type.toLowerCase() === \".mov\" ||\n data.pic_upload_type.toLowerCase() === \".wmv\") &&\n data.pic_type === \"N\" ? (\n
\n \n \n \n
\n ) : (data.pic_upload_type.toLowerCase() === \".pdf\" ||\n data.pic_upload_type.toLowerCase() === \".xlsx\" ||\n data.pic_upload_type.toLowerCase() === \".xls\" ||\n data.pic_upload_type.toLowerCase() === \".doc\" ||\n data.pic_upload_type.toLowerCase() === \".txt\") &&\n data.pic_type === \"N\" ? (\n
\n
\n \n\n {data.pic_upload_name}\n \n \n ) : null}\n \n );\n })}\n
\n
\n
![]({Api.absoluteUrl(\"/icon/add-folder.svg\")})
\n
\n {/* {this.state.Inform_Person} */}\n {\"Attachment (After)\"}\n \n
\n
\n {this.state.set_pic.map((data, index) => {\n return (\n <>\n {(data.pic_upload_type.toLowerCase() === \".jpg\" ||\n data.pic_upload_type.toLowerCase() === \".png\" ||\n data.pic_upload_type.toLowerCase() === \".jpeg\" ||\n data.pic_upload_type.toLowerCase() === \".svg\") &&\n data.pic_type === \"Y\" ? (\n
\n \n
\n ) : (data.pic_upload_type.toLowerCase() === \".mp4\" ||\n data.pic_upload_type.toLowerCase() === \".avi\" ||\n data.pic_upload_type.toLowerCase() === \".mov\" ||\n data.pic_upload_type.toLowerCase() === \".wmv\") &&\n data.pic_type === \"Y\" ? (\n
\n \n \n \n
\n ) : (data.pic_upload_type.toLowerCase() === \".pdf\" ||\n data.pic_upload_type.toLowerCase() === \".xlsx\" ||\n data.pic_upload_type.toLowerCase() === \".xls\" ||\n data.pic_upload_type.toLowerCase() === \".doc\" ||\n data.pic_upload_type.toLowerCase() === \".txt\") &&\n data.pic_type === \"Y\" ? (\n
\n
\n \n\n {data.pic_upload_name}\n \n \n ) : null}\n \n );\n })}\n
\n
\n
\n
\n Are you sure to close this job\n
\n
this.handleCancel()}\n className=\"btn btn-secondary\"\n >\n Cancel\n \n this.handleSubmitApprove()}\n className=\"btn btn-success\"\n >\n Confirm\n \n \n
\n
\n Close Job Successful\n
\n
this.handleCancel()}\n >\n Ok\n \n \n
\n {/*
*/}\n
\n \n
\n this.setState({ visibleDrawer: false })}\n className=\"btn btn-secondary mr-3\"\n >\n Cancel\n \n \n
\n
\n
\n
\n
\n \n
\n
![]({Api.absoluteUrl(\"/logo/Plan_B_logo.svg\")})
\n
\n
\n \n \n {/*
Static Check List
*/}\n
\n
\n
\n
\n
\n {this.state.label_check_list.map((item, index) => (\n <>\n
\n {\" \"}\n \n {item.text}\n {\" \"}\n
\n
\n \n {item.value}\n \n
\n \n ))}\n
\n
\n
\n
\n
\n
\n Reject Job{\" \"}\n {\n this.state.getFulldetail.data.data.result_maintenance[0]\n .job_no\n }{\" \"}\n
\n
\n
\n {\" \"}\n Reason : \n
\n
\n this.state.form[\"Reason\"] = value }\n onChange={(value) => (this.state.form[\"Reason\"] = value)}\n >\n {this.state.maseter_reject.map((item, index) => (\n \n {item.service_ma_reason_desc}\n \n ))}\n \n
\n
\n
\n
\n {\" \"}\n Remark : \n
\n
\n \n (this.state.form[\"remark\"] = e.target.value)\n }\n >\n
\n
\n
\n
Upload :
\n
\n console.log(e)}\n height={\"20%\"}\n >\n {fileList.length >= 8 ? null : uploadButton}\n \n
\n
\n\n
this.setState({ visible_modal_reject: false })}\n className=\"btn btn-secondary\"\n >\n Cancel\n \n this.handleSubmitReject(true)}\n className=\"btn btn-danger\"\n >\n Reject\n \n \n
\n
\n
parseInt(localStorage.getItem(\"jobID_Back\")) === parseInt(Cookies.get(\"job_id\")) ? this.props.history.goBack() : this.onBackJob()}\n\n >\n \n \n Back\n \n \n\n {parseInt(localStorage.getItem(\"jobID_Last\")) !== parseInt(Cookies.get(\"job_id\")) ?\n this.onNextJob()}\n >\n \n Next\n \n \n \n : null}\n \n\n
\n
\n
\n
\n
![]({Api.absoluteUrl(\"/icon/name_job.svg\")})
\n
\n
\n
\n {data.name}\n
\n
\n {this.state.data_mainttenance.job_area_name || \"-\"} /{\" \"}\n {this.state.asset.team_name || \"-\"} /{\" \"}\n {this.state.asset.team_sub_name || \"-\"}\n \n
\n {this.state.data_mainttenance.priority_level == 3 ||\n this.state.data_mainttenance.priority_level == \"3\" ? (\n \n {this.state.factupdate ? (\n \n {\n this.state.data_translate[\n Cookies.get(\"locale\")\n ][\"status_high\"]\n }\n \n ) : null}\n \n ) : null}\n {this.state.data_mainttenance.priority_level == 2 ||\n this.state.data_mainttenance.priority_level == \"2\" ? (\n \n {this.state.factupdate ? (\n \n {\n this.state.data_translate[\n Cookies.get(\"locale\")\n ][\"status_normal\"]\n }\n \n ) : null}\n \n ) : null}\n {this.state.data_mainttenance.priority_level == 1 ||\n this.state.data_mainttenance.priority_level == \"1\" ? (\n \n {this.state.factupdate ? (\n \n {\n this.state.data_translate[\n Cookies.get(\"locale\")\n ][\"status_low\"]\n }\n \n ) : null}\n \n ) : null}\n \n {this.state.data_mainttenance.job_type_name || \"-\"}\n \n {/* \n \n \n On Process\n */}\n {this.state.data_mainttenance.job_status == 7 ? (\n \n \n {\n // this.state.jobstatus_name[\n // this.state.data_mainttenance.job_status\n // ]\n\n this.state.data_mainttenance.job_status_name\n }\n \n ) : null}\n\n {this.state.data_mainttenance.job_status == 9 ? (\n \n \n {\n // this.state.jobstatus_name[\n // this.state.data_mainttenance.job_status\n // ]\n this.state.data_mainttenance.job_status_name\n }\n \n ) : null}\n {this.state.data_mainttenance.job_status == 8 ? (\n \n \n {\n // this.state.jobstatus_name[\n // this.state.data_mainttenance.job_status\n // ]\n this.state.data_mainttenance.job_status_name\n }\n \n ) : null}\n {this.state.data_mainttenance.job_status == 3 ? (\n \n \n {\n // this.state.jobstatus_name[\n // this.state.data_mainttenance.job_status\n // ]\n this.state.data_mainttenance.job_status_name\n }\n \n ) : null}\n {this.state.data_mainttenance.job_status != 3 &&\n this.state.data_mainttenance.job_status != 7 &&\n this.state.data_mainttenance.job_status != 8 &&\n this.state.data_mainttenance.job_status != 9 ? (\n \n {\n // this.state.jobstatus_name[\n // this.state.data_mainttenance.job_status\n // ]\n this.state.data_mainttenance.job_status_name\n }\n \n ) : null}\n
\n
\n
\n
\n
\n {/*
*/}\n\n
this.onReject()}\n >\n \n Reject\n \n this.onApprove()}\n >\n \n Approve\n \n\n {/* Stop time approval */}\n {this.state.check_stop_time === true ? (\n \n
\n {/* {this.state.display_stop_time} */}\n
\n {/* */}\n this.approvalModal(1)}\n style={{\n border: \"1px solid #f00\",\n color: \"#f00\",\n }}\n >\n ![\"\"/]({ChangePath.absoluteUrl(\"/img/user1.png\")})
\n ![](\"./icon/plus.svg\"){kind=icon}
*/}\n ![]({Api.absoluteUrl(\"/icon/edit.svg\")}){kind=icon}
\n// ![\"\"]({Api.absoluteUrl(\"/icon/marker_job.svg\")}){kind=icon}
\n ![\"\"]({Api.absoluteUrl(\"/img/user1.png\")})
\n ![]({ChangePath.absoluteUrl(\"/img/modal_approve.svg\")})
\n ![\"\"]({Api.absoluteUrl(\"/img/1.png\")})
\n ![\"view-ic\"]({Api.absoluteUrl(\"/icon/view.svg\")}){kind=icon}
\n ![\"\"]({Api.absoluteUrl(\"/icon/star.svg\")}){kind=icon}
\n ![\"\"]({ChangePath.absoluteUrl(\"/icon/star.svg\")}){kind=icon}
\n ![]({ServiceApi.absoluteUrl(\"/icon/edit.svg\")}){kind=icon}
\n ![]({ChangePath.absoluteUrl(\"/logo/Plan_B_logo.svg\")}){kind=logo}
\n ![]({ChangePath.absoluteUrl(\"/icon/approve_check.svg\")}){kind=icon}
\n ![]({ServiceApi.absoluteUrl(\"/icon/list.svg\")}){kind=icon}
\n {this.state.factupdate === true ? (\n ![]({Api.absoluteUrl(\"/icon/icon_assign.svg\")}){kind=icon}
\n \n\n ![]({Api.absoluteUrl(\"/icon/menu_list.svg\")}){kind=icon}
\n \n \n \n ) : (\n ![]({Api.absoluteUrl(\"/icon/delete.svg\")}){kind=icon}
this.onModal(true, \"delete\", item)} alt=\"delete-ic\" />\n {/* */}\n ![](\"/icon/edit.svg\"){kind=icon}
*/}\n ![](\"/icon/delete.svg\"){kind=icon}
*/}\n ![]({Api.absoluteUrl(\"/icon/Edit.svg\")}){kind=icon}
\n