op.operation == \"Assign Proposed Requirement\" && op.allow == true) ? true : false}\n >\n );\n },\n },\n {\n id: \"proposedJobMatchPercentSelf\",\n name: \"Proposed Self Match\",\n selector: (row) => row.proposedJobMatchPercentSelf,\n sortable: true,\n sortFunction: sortProposedMatchPercentSelf,\n width: \"100px\",\n format: function (row, index) {\n return {row.proposedJobMatchPercentSelf}
;\n },\n },\n {\n id: \"proposedJobMatchPercentValidated\",\n name: \"Proposed Endorsed Match\",\n selector: (row) => row.proposedJobMatchPercentValidated,\n sortable: true,\n sortFunction: sortProposedMatchPercentValidated,\n width: \"100px\",\n format: function (row, index) {\n return {row.proposedJobMatchPercentValidated}
;\n },\n omit: !(this.state.config && this.state.config.showEndorsedMatchPercentInRequirementAssign),\n },\n {\n id: \"position\",\n name: (\n \n Position\n
\n ),\n selector: (row) => row.position,\n sortable: true,\n sortFunction: sortPosition,\n width: \"100px\",\n wrap: true,\n format: function (row, index) {\n return row.position;\n },\n },\n {\n id: \"team\",\n name: (\n \n Team\n
\n ),\n selector: (row) => row.team,\n sortable: true,\n sortFunction: sortTeam,\n width: \"100px\",\n wrap: true,\n format: function (row, index) {\n return row.team;\n },\n },\n ];\n\n return (\n \n \n
\n ) : (\n \n \n \n {\n this.setState({ searchKeyword });\n }}\n >\n \n {\n this.setState({ searchKeyword: \"\" });\n }}\n >\n \n \n \n \n \n )}\n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Import\" && op.allow == true) && (\n \n
\n \n {\n this.handleChangeShowEndorsedMatchPercent();\n }}\n checked={this.state.config && this.state.config.showEndorsedMatchPercentInRequirementAssign}\n />\n \n \n Show Endorsed Match Percent\n \n \n \n \n
\n
\n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n error: state.auth.error,\n\n configLoading: state.config.loading,\n config: state.config.config,\n\n jobsLoading: state.job.loading,\n jobsError: state.job.error,\n jobs: state.job.jobs,\n jobMatchPersons: state.job.jobMatchPersons,\n\n exportData: state.job.exportData,\n loadingExport: state.job.loadingExport,\n\n pageAssignments: state.adminPerson.pageAssignments,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onJob: bindActionCreators(jobActions, dispatch),\n onConfig: bindActionCreators(configActions, dispatch),\n };\n};\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(ManageJobAssignment));\n","import * as adminPersonActions from \"../../store/admin/actions/adminPersonActions\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Form, FormFeedback, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nclass ColumnDisplaySetting extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n columnDisplaySettingLoadings: [],\n columnDisplaySettings: null,\n };\n }\n\n componentDidMount() {\n this.setState({\n columnDisplaySettings: this.props.columnDisplaySettings,\n columnDisplaySettingLoadings: this.props.columnDisplaySettingLoadings,\n });\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.columnDisplaySettings !== this.props.columnDisplaySettings) {\n this.setState({ columnDisplaySettings: this.props.columnDisplaySettings });\n }\n\n if (prevProps.columnDisplaySettingLoadings !== this.props.columnDisplaySettingLoadings) {\n this.setState({ columnDisplaySettingLoadings: this.props.columnDisplaySettingLoadings });\n }\n }\n\n updateColumnDisplaySetting = (columnDisplaySetting) => {\n columnDisplaySetting.visible = !columnDisplaySetting.visible;\n this.props.onPerson.updateColumnDisplaySetting(columnDisplaySetting).then(() => {});\n };\n\n render() {\n const { columnDisplaySettings, containerConfig } = this.props;\n\n return (\n \n \n \n this.updateColumnDisplaySetting(columnDisplaySetting)}\n style={{\n fontSize: \"12px\",\n height: \"30px\",\n marginBottom: \"5px\",\n }}\n disabled={loading ? loading.loading : false}\n >\n {`${caption}`}\n \n \n \n );\n } else {\n return \"\";\n }\n })}\n \n
\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n columnDisplaySettings: state.adminPerson.columnDisplaySettings,\n columnDisplaySettingLoadings: state.adminPerson.columnDisplaySettingLoadings,\n containerConfig: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onPerson: bindActionCreators(adminPersonActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ColumnDisplaySetting);\n","import * as jobActions from \"../../../store/actions/jobAction\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Form, FormGroup, Input, Label, ListGroup, ListGroupItem, Modal, ModalBody, ModalFooter, ModalHeader, Row } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\n\nclass JobBulkUpload extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n showDialog: false,\n importOption: \"InsertUpdate\",\n selectedFiles: [],\n isImporting: false,\n importMessage: null,\n };\n\n this.excelRef = React.createRef();\n }\n\n componentDidMount() {}\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n }\n }\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.excelRef.current.value = null;\n this.setState({ showDialog: !showDialog, selectedFiles: [] });\n };\n\n handleDownloadTemplate = () => {\n this.props.onJob.exportJobsDataExcelTemplate().then(() => {\n if (!this.props.loadingExport && !this.props.jobsError) {\n if (this.props.exportData) {\n FileDownload(this.props.exportData, `UploadRequirementsTemplate.xlsx`);\n }\n }\n });\n };\n\n handleChangeOption = (event) => {\n const { name, value } = event.target;\n this.setState({ importOption: value });\n };\n\n handleSelectFiles = () => {\n this.excelRef.current.click();\n };\n\n handleSelectExcels = (event) => {\n const selectedFiles = this.state.selectedFiles;\n\n if (event.target.files && event.target.files.length > 0) {\n this.setState({ selectedFiles: [...selectedFiles, ...event.target.files] });\n }\n };\n\n handlePerformUpload = () => {\n this.setState({ isImporting: true });\n this.props.onJob.importJobsDataExcel(this.props.jobImportSessionId, this.state.importOption, this.state.selectedFiles).then(() => {\n if (!this.props.isImporting) {\n if (!this.props.jobsError) {\n if (this.props.message) {\n this.props.generateAlert(\"success\", this.props.message);\n } else {\n this.excelRef.current.value = null;\n this.props.handleAddedJobImports(this.props.addedJobImports);\n this.props.generateAlert(\"success\", \"Requirements excel data imported and waiting processing.\");\n }\n this.togleDialogModal();\n } else {\n this.props.generateAlert(\"danger\", this.props.jobsError.errData.Message);\n }\n }\n\n this.setState({ isImporting: this.props.isImporting });\n });\n };\n\n render() {\n const { selectedFiles } = this.state;\n\n return (\n \n \n Import Requirements \n \n \n \n \n {\n this.handlePerformUpload();\n }}\n disabled={selectedFiles.length == 0 || this.state.isImporting}\n >\n Process Upload\n \n \n Close\n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n jobsError: state.job.error,\n loadingExport: state.job.loadingExport,\n exportData: state.job.exportData,\n\n isImporting: state.job.isImporting,\n message: state.job.message,\n addedJobImports: state.job.addedJobImports,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onJob: bindActionCreators(jobActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(JobBulkUpload);\n","import changeInput from \"../../../utils/changeInput\";\nimport React from \"react\";\nimport { Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner } from \"reactstrap\";\n\nclass JobCopyDialog extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n showDialog: false,\n isUpdating: false,\n form: {\n name: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n reference: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n copyAttributes: {\n validation: {\n required: true,\n },\n value: true,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n isFormValid: false,\n optionCopy: [\n {\n label: \"Copy Attributes\",\n value: true,\n },\n {\n label: \"Don't Copy Attributes\",\n value: false,\n },\n ],\n selectedJob: null,\n };\n }\n\n componentDidMount() {}\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n this.prepareFormState();\n }\n\n if (prevProps.selectedJob !== this.props.selectedJob) {\n this.setState({\n selectedJob: this.props.selectedJob,\n });\n }\n\n if (prevProps.isUpdating !== this.props.isUpdating) {\n this.setState({\n isUpdating: this.props.isUpdating,\n });\n }\n\n if (prevProps.copyJobSuccess !== this.props.copyJobSuccess) {\n if (this.props.copyJobSuccess == true) {\n this.setState({ showDialog: false });\n }\n }\n }\n\n prepareFormState = () => {\n this.setState({\n form: {\n name: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n reference: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n copyAttributes: {\n validation: {\n required: true,\n },\n value: true,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n isFormValid: false,\n });\n };\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.setState({\n showDialog: !showDialog,\n });\n };\n\n handleChange = (event) => {\n const persons = this.state.persons;\n const { name, value } = event.target;\n\n let updateState = changeInput(this.state.form, name, value);\n\n if (name == \"definedById\") {\n if (value != \"\") {\n const person = persons.find((it) => it.value == value);\n if (person) {\n updateState = changeInput(updateState.form, \"definedBy\", person.label);\n }\n }\n }\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n handlePerformSave = () => {\n const { selectedJob, form } = this.state;\n\n const request = {\n jobToCopyId: selectedJob.id,\n newName: form.name.value,\n newReference: form.reference.value,\n copyAttributes: form.copyAttributes.value,\n };\n\n this.props.handleSaveCopyJob(request);\n };\n\n render() {\n const { form, optionCopy, selectedJob } = this.state;\n\n return (\n \n \n Copy Requirement \n \n {selectedJob && (\n \n )}\n \n \n {\n this.handlePerformSave();\n }}\n disabled={!this.state.isFormValid || this.state.isUpdating}\n >\n Save\n \n {\n this.togleDialogModal();\n }}\n disabled={this.state.isUpdating}\n >\n Cancel\n \n \n \n \n );\n }\n}\n\nexport default JobCopyDialog;\n","import * as jobActions from \"../../../store/actions/jobAction\";\nimport * as adminPersonActions from \"../../../store/admin/actions/adminPersonActions\";\nimport changeInput from \"../../../utils/changeInput\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Combobox } from \"react-widgets/cjs\";\nimport { Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nclass JobDetail extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n showDialog: false,\n isUpdating: false,\n persons: [],\n vacancyOwners: [],\n form: {},\n isFormValid: false,\n selectedJob: this.props.selectedJob,\n editMode: false,\n optionActive: [\n {\n label: \"Active\",\n value: false,\n },\n {\n label: \"Inactive\",\n value: true,\n },\n ],\n optionJobRole: [\n {\n label: \"Job\",\n value: \"Job\",\n },\n {\n label: \"Role\",\n value: \"Role\",\n },\n ],\n optionWhoCanSee: [\n {\n label: \"Nobody\",\n value: \"Nobody\",\n },\n {\n label: \"Employee Only\",\n value: \"Employee Only\",\n },\n {\n label: \"Candidate Only\",\n value: \"Candidate Only\",\n },\n {\n label: \"Candidates and Employees\",\n value: \"Candidates and Employees\",\n },\n ],\n optionSeniority: [\n { label: \"Select Seniority\", value: \"\" },\n { label: \"Senior or Executive Manager\", value: \"Senior or Executive Manager\" },\n { label: \"Senior Advisor\", value: \"Senior Advisor\" },\n { label: \"Line Manager\", value: \"Line Manager\" },\n { label: \"Team Leader\", value: \"Team Leader\" },\n { label: \"Senior Employee\", value: \"Senior Employee\" },\n { label: \"Experienced Employee\", value: \"Experienced Employee\" },\n { label: \"Junior Employee\", value: \"Junior Employee\" },\n { label: \"None of the above (please comment)\", value: \"None of the above (please comment)\" },\n { label: \"Not Applicable\", value: \"Not Applicable\" },\n ],\n optionEmploymentStatus: [\n { label: \"Select Status\", value: \"\" },\n { label: \"Permanent Full-time\", value: \"Permanent Full-time\" },\n { label: \"Permanent Part-time\", value: \"Permanent Part-time\" },\n { label: \"1-2 year contract\", value: \"1-2 year contract\" },\n { label: \"2-5 year contract\", value: \"2-5 year contract\" },\n { label: \"Consultant/Contractor\", value: \"Consultant/Contractor\" },\n { label: \"Casual\", value: \"Casual\" },\n { label: \"Other (Please comment)\", value: \"Other (Please comment)\" },\n { label: \"Not Applicable\", value: \"Not Applicable\" },\n ],\n optionLanguages: [],\n optionYesOrNo: [\n {\n label: \"Yes\",\n value: true,\n },\n {\n label: \"No\",\n value: false,\n },\n ],\n };\n }\n\n componentDidMount() {\n this.prepareFormState();\n let optionLanguages = [];\n\n if (this.props.languages) {\n optionLanguages = [\n ...this.props.languages.map((language) => {\n return {\n value: language.name,\n label: language.name,\n };\n }),\n ];\n\n this.setState({ optionLanguages });\n }\n\n this.props.onPerson.getPersonsDropdown().then(() => {\n let persons = [\n {\n value: \"Select owner\",\n label: \"Select owner\",\n },\n ];\n persons.push(\n ...this.props.persons\n .filter((it) => !it.inactive)\n .map((person) => {\n return {\n value: person.id,\n label: `${person.firstName} ${person.lastName}`,\n };\n })\n .sort((a, b) => {\n return a.label > b.label ? 1 : -1;\n })\n );\n\n let vacancyOwners = [\n {\n value: \"Select vacancy owner\",\n label: \"Select vacancy owner\",\n },\n ];\n\n vacancyOwners.push(\n ...this.props.persons\n .filter((it) => !it.inactive)\n .map((person) => {\n return {\n value: person.id,\n label: `${person.firstName} ${person.lastName}`,\n };\n })\n .sort((a, b) => {\n return a.label > b.label ? 1 : -1;\n })\n );\n\n this.setState({\n persons,\n vacancyOwners,\n });\n });\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n this.prepareFormState();\n }\n\n if (prevProps.selectedJob !== this.props.selectedJob) {\n this.setState({ selectedJob: this.props.selectedJob });\n }\n\n if (prevProps.selectedJobUpdated !== this.props.selectedJobUpdated && this.props.selectedJobUpdated == true) {\n this.props.generateAlert(\"success\", \"Update job success.\");\n this.togleDialogModal();\n }\n }\n\n prepareFormState = () => {\n const job = this.props.selectedJob;\n const languages = this.props.languages;\n\n let integrityValid = false;\n\n if (job) {\n integrityValid = true;\n\n const inActive = job && job.inActive ? job.inActive : false;\n const whoCanSee = job && (job.isHidden && !job.isCandidateJob ? \"Nobody\" : !job.isHidden && !job.isCandidateJob ? \"Employee Only\" : job.isHidden && job.isCandidateJob ? \"Candidate Only\" : \"Candidates and Employees\");\n\n if ((inActive == true && whoCanSee != \"Nobody\") || (inActive == true && job.jobMatches && job.jobMatches.length > 0)) {\n integrityValid = false;\n }\n }\n\n this.setState({\n form: {\n sequence: {\n validation: {\n required: true,\n },\n value: job && job.sequence ? job.sequence : 0,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n name: {\n validation: {\n required: true,\n },\n value: job && job.name ? job.name : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n reference: {\n validation: {\n required: true,\n },\n value: job && job.reference ? job.reference : \"\",\n valid: job && job.reference && job.reference != \"\" ? true : false,\n isValidFormat: job && job.reference && job.reference != \"\" ? true : false,\n touched: false,\n },\n customerReference: {\n validation: {\n required: false,\n },\n value: job && job.customerReference ? job.customerReference : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n jobRole: {\n validation: {\n required: true,\n },\n value: job && job.isRole ? \"Role\" : \"Job\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n definedBy: {\n validation: {\n required: false,\n },\n value: job && job.definedBy ? job.definedBy : null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n definedById: {\n validation: {\n required: false,\n },\n value: job && job.definedById ? job.definedById : null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n owner: {\n validation: {\n required: false,\n },\n value: job && job.owner ? job.owner : \"Select owner\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n ownerId: {\n validation: {\n required: false,\n },\n value: job && job.ownerId ? job.ownerId : \"Select owner\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n whoCanSee: {\n validation: {\n required: false,\n },\n value: job && (job.isHidden && !job.isCandidateJob ? \"Nobody\" : !job.isHidden && !job.isCandidateJob ? \"Employee Only\" : job.isHidden && job.isCandidateJob ? \"Candidate Only\" : \"Candidates and Employees\"),\n valid: integrityValid,\n isValidFormat: integrityValid,\n touched: integrityValid == false ? true : false,\n },\n reportingTo: {\n validation: {\n required: false,\n },\n value: job && job.reportingTo ? job.reportingTo : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n seniority: {\n validation: {\n required: false,\n },\n value: job && job.seniority ? job.seniority : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n employmentStatus: {\n validation: {\n required: false,\n },\n value: job && job.employmentStatus ? job.employmentStatus : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n department: {\n validation: {\n required: false,\n },\n value: job && job.department ? job.department : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n location: {\n validation: {\n required: false,\n },\n value: job && job.location ? job.location : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n inActive: {\n validation: {\n required: false,\n },\n value: job && job.inActive ? job.inActive : false,\n valid: integrityValid,\n isValidFormat: integrityValid,\n touched: integrityValid == false ? true : false,\n },\n fte: {\n validation: {\n isFte: true,\n required: true,\n },\n value: job ? job.fte.toFixed(1) : \"1.0\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n language: {\n validation: {\n required: true,\n },\n value: job && job.language ? job.language : \"English\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n languageId: {\n validation: {\n required: true,\n },\n value: job && job.languageId ? job.languageId : languages && languages.find((it) => it.name == \"English\") ? languages.find((it) => it.name == \"English\").id : null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n showAsRoleBasedSurveyInSelfRegistration: {\n validation: {\n required: false,\n },\n value: job && job.showAsRoleBasedSurveyInSelfRegistration != null ? (job.showAsRoleBasedSurveyInSelfRegistration == true ? true : false) : false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n showAsVacancy: {\n validation: {\n required: false,\n },\n value: job && job.showAsVacancy != null ? (job.showAsVacancy == true ? true : false) : false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n vacancyOwner: {\n validation: {\n required: false,\n },\n value: job && job.vacancyOwner ? job.vacancyOwner : \"Select vacancy owner\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n vacancyOwnerId: {\n validation: {\n required: false,\n },\n value: job && job.vacancyOwnerId ? job.vacancyOwnerId : \"Select vacancy owner\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n isFormValid: job && job.reference && job.reference != \"\" && integrityValid ? true : false,\n });\n };\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.setState({\n showDialog: !showDialog,\n editMode: false,\n });\n };\n\n handleChange = (event) => {\n const { persons, vacancyOwners } = this.state;\n const languages = this.props.languages;\n let { name, value } = event.target;\n\n let updateState = changeInput(this.state.form, name, value);\n\n if (name == \"ownerId\") {\n if (value && value != \"Select owner\") {\n const person = persons.find((it) => it.value == value);\n if (person) {\n updateState = changeInput(updateState.form, \"owner\", person.label);\n }\n } else {\n updateState = changeInput(updateState.form, \"owner\", \"Select owner\");\n }\n }\n\n if (name == \"vacancyOwnerId\") {\n if (value && value != \"Select vacancy owner\") {\n const person = vacancyOwners.find((it) => it.value == value);\n if (person) {\n updateState = changeInput(updateState.form, \"vacancyOwner\", person.label);\n }\n } else {\n updateState = changeInput(updateState.form, \"vacancyOwner\", \"Select vacancy owner\");\n }\n }\n\n if (name == \"language\" && languages) {\n const language = languages.find((it) => it.name == value);\n updateState = changeInput(updateState.form, \"languageId\", language ? language.id : null);\n }\n\n if (name == \"inActive\" || name == \"whoCanSee\") {\n if (name == \"inActive\") {\n updateState = changeInput(updateState.form, \"whoCanSee\", updateState.form.whoCanSee.value);\n } else {\n updateState = changeInput(updateState.form, \"inActive\", updateState.form.inActive.value);\n }\n\n if ((updateState.form.inActive.value == true && this.props.selectedJob.jobMatches && this.props.selectedJob.jobMatches.length > 0) || (updateState.form.inActive.value == true && updateState.form.whoCanSee.value != \"Nobody\")) {\n updateState.form.inActive.valid = false;\n //updateState.form.inActive.isValidFormat = false;\n updateState.form.inActive.touched = true;\n\n updateState.form.whoCanSee.valid = false;\n //updateState.form.whoCanSee.isValidFormat = false;\n updateState.form.whoCanSee.touched = true;\n\n updateState.valid = false;\n }\n }\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n togleShowEdit = () => {\n const editMode = this.state.editMode;\n\n this.setState({ editMode: !editMode });\n\n if (editMode) {\n this.prepareFormState();\n }\n };\n\n handlePerformSave = () => {\n const { form } = this.state;\n\n let job = Object.assign({}, this.props.selectedJob);\n job.sequence = form.sequence.value;\n job.name = form.name.value;\n job.description = form.name.value;\n job.reference = form.reference.value;\n job.customerReference = form.customerReference.value;\n job.name = form.name.value;\n job.isRole = form.jobRole.value == \"Role\" ? true : false;\n job.definedBy = form.definedBy.value;\n job.definedById = form.definedById.value;\n job.owner = form.ownerId.value ? (form.owner.value != \"Select owner\" ? form.owner.value : null) : null;\n job.ownerId = form.ownerId.value ? (form.ownerId.value != \"Select owner\" ? form.ownerId.value : null) : null;\n\n job.isHidden = form.whoCanSee.value == \"Nobody\" || form.whoCanSee.value == \"Candidate Only\" ? true : false;\n job.isCandidateJob = form.whoCanSee.value == \"Candidates and Employees\" || form.whoCanSee.value == \"Candidate Only\" ? true : false;\n\n job.inActive = form.inActive.value;\n job.reportingTo = form.reportingTo.value;\n job.seniority = form.seniority.value;\n job.employmentStatus = form.employmentStatus.value;\n job.department = form.department.value;\n job.location = form.location.value;\n job.fte = form.fte.value;\n\n job.language = form.language.value;\n job.languageId = form.languageId.value;\n\n job.showAsRoleBasedSurveyInSelfRegistration = form.showAsRoleBasedSurveyInSelfRegistration.value;\n\n job.showAsVacancy = form.showAsVacancy.value;\n job.vacancyOwnerId = (form.showAsVacancy.value == true || form.showAsVacancy.value == \"true\") && form.vacancyOwnerId.value ? (form.vacancyOwnerId.value != \"Select vacancny owner\" ? form.vacancyOwnerId.value : null) : null;\n job.vacancyOwner = (form.showAsVacancy.value == true || form.showAsVacancy.value == \"true\") && form.vacancyOwner.value ? (form.vacancyOwner.value != \"Select vacancny owner\" ? form.vacancyOwner.value : null) : null;\n\n this.setState({ isUpdating: true });\n\n this.props.onJob.updateJob(job.id, job).then(() => {\n if (!this.props.isUpdating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n render() {\n const { form, editMode, persons, vacancyOwners, optionWhoCanSee, optionActive, optionEmploymentStatus, optionSeniority, optionLanguages, optionYesOrNo } = this.state;\n\n return (\n \n \n Requirement Detail \n \n {this.props.selectedJob && (\n \n )}\n \n \n {!editMode && (\n \n {this.props.selectedJob && this.props.allowEdit && (\n {\n this.togleShowEdit();\n }}\n >\n Edit\n \n )}\n \n Close\n \n \n )}\n {editMode && (\n \n {\n this.handlePerformSave();\n }}\n disabled={\n !this.state.isFormValid ||\n this.state.isUpdating ||\n (form && form.fte && (form.fte.value == \"0\" || form.fte.value == \"0.0\" || form.fte.value == 0)) ||\n (this.props.containerConfig && this.props.containerConfig.internalJobMarket == true && form && form.showAsVacancy && (form.showAsVacancy.value == true || form.showAsVacancy.value == \"true\") && form.vacancyOwnerId && form.vacancyOwnerId.value == \"Select vacancy owner\")\n }\n >\n Save\n \n {\n this.togleShowEdit();\n }}\n disabled={this.state.isUpdating}\n >\n Cancel\n \n \n )}\n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n authPersonId: state.auth.personId,\n personsLoading: state.adminPerson.loading,\n persons: state.adminPerson.personsDropdown,\n personsError: state.adminPerson.error,\n\n error: state.job.error,\n isUpdating: state.job.isUpdating,\n\n languages: state.language.languages,\n containerConfig: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onPerson: bindActionCreators(adminPersonActions, dispatch),\n onJob: bindActionCreators(jobActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(JobDetail);\n","import { filterArray } from \"../../../utils/filterUtils\";\nimport { generateRandomString } from \"../../../utils/stringUtils\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport { SkillsTxTableClearSearch } from \"../../common/SkillsTxTableClearSearch\";\nimport { SkillsTxTableSearchBar } from \"../../common/SkillsTxTableSearchBar\";\nimport { faSquare } from \"@fortawesome/free-regular-svg-icons\";\nimport { faSquareCheck, faSquareMinus } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React, { Component } from \"react\";\nimport { Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner } from \"reactstrap\";\n\nconst rowStyle = {\n fontSize: \"12px\",\n};\n\nclass ManageJobSample extends Component {\n constructor(props) {\n super(props);\n this.state = {\n jobs: this.props.jobs,\n jobsSelected: [],\n isUpdating: false,\n showDialog: false,\n searchProperties: [\"name\"],\n };\n\n this.generateRandomString = generateRandomString.bind(this);\n this.filterArray = filterArray.bind(this);\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.jobs !== this.props.jobs) {\n this.setState({ jobs: this.props.jobs });\n }\n\n if (prevProps.showDialog !== this.props.showDialog) {\n this.setState({ showDialog: true });\n }\n\n if (prevProps.isUpdating !== this.props.isUpdating) {\n this.setState({ isUpdating: this.props.isUpdating });\n }\n\n if (prevProps.copyJobsSuccess !== this.props.copyJobsSuccess) {\n if (this.props.copyJobsSuccess == true) {\n this.setState({ showDialog: false, jobsSelected: [] });\n }\n }\n }\n\n // handleSave = () => {\n // let job = this.state.job;\n // this.props.handleSaveJobNoteUpdate(job);\n // };\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.setState({ showDialog: !showDialog, jobsSelected: [] });\n };\n\n handleRowClick = (row) => {\n const jobs = this.state.jobs;\n const updatedData = jobs.find((it) => it.id == row.id);\n updatedData.toggleSelected = !updatedData.toggleSelected;\n\n this.setState({ jobs: [...jobs], jobsSelected: jobs.filter((it) => it.toggleSelected).map((row) => row.id) });\n };\n\n handleSelectAll = () => {\n const { jobs, searchKeyword, searchProperties } = this.state;\n let selectAll = false;\n\n const filtered = this.filterArray(jobs, searchKeyword, searchProperties);\n\n if (filtered.filter((it) => it.toggleSelected).length == 0) {\n selectAll = true;\n } else if (filtered.filter((it) => !it.toggleSelected).length == 0) {\n selectAll = false;\n } else {\n selectAll = true;\n }\n\n jobs.forEach((it) => {\n it.toggleSelected = false;\n });\n\n if (selectAll) {\n jobs.forEach((it) => {\n if (filtered.find((f) => f.id == it.id)) {\n it.toggleSelected = true;\n }\n });\n }\n\n this.setState({ jobs: [...jobs], jobsSelected: jobs.filter((it) => it.toggleSelected).map((row) => row.id) });\n };\n\n handleClearSelection = () => {\n const jobs = this.state.jobs;\n\n jobs.forEach((it) => {\n it.toggleSelected = false;\n });\n\n this.setState({ jobs: [...jobs] });\n };\n\n handlePerformCopy = () => {\n const { jobs, jobsSelected } = this.state;\n const randomString = this.generateRandomString(5);\n\n const copiedJobs = jobs\n .filter((it) => jobsSelected.includes(it.id))\n .map((job) => {\n return {\n jobToCopyId: job.id,\n newName: `${job.name} SAMPLE`,\n copyAttributes: true,\n };\n });\n\n this.props.handlePerformCopyJobs(copiedJobs);\n this.handleClearSelection();\n };\n\n render() {\n const { jobs, searchKeyword, searchProperties } = this.state;\n\n const handleRowClick = this.handleRowClick;\n const handleSelectAll = this.handleSelectAll;\n\n const filtered = this.filterArray(jobs, searchKeyword, searchProperties);\n\n const columns = [\n {\n id: \"id\",\n name: (\n \n
\n ),\n selector: (row) => row.id,\n sortable: false,\n width: \"10%\",\n center: true,\n format: function (row, index) {\n return (\n \n
\n );\n },\n },\n {\n id: \"name\",\n name: \"Name\",\n selector: (row) => row.name,\n sortable: false,\n width: \"90%\",\n },\n ];\n\n return (\n \n \n Sample Requirements \n \n \n \n \n {\n this.handlePerformCopy();\n }}\n disabled={this.state.jobsSelected.length == 0 || this.state.isUpdating}\n >\n Copy Requirements\n \n \n Close\n \n \n \n \n );\n }\n}\n\nexport default ManageJobSample;\n","import * as authActions from \"../../../store/actions/authAction\";\nimport * as jobActions from \"../../../store/actions/jobAction\";\nimport { dismisAlert, generateAlert } from \"../../../utils/alertUtils\";\nimport { filterArray } from \"../../../utils/filterUtils\";\nimport { generateRandomString } from \"../../../utils/stringUtils\";\nimport { contentTranslator } from \"../../../utils/translatorUtils\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport { SkillsTxTableClearSearch } from \"../../common/SkillsTxTableClearSearch\";\nimport { SkillsTxTableSearchBar } from \"../../common/SkillsTxTableSearchBar\";\nimport ColumnDisplaySetting from \"../ColumnDisplaySetting\";\nimport JobBulkUpload from \"./JobBulkUpload\";\nimport JobCopyDialog from \"./JobCopyDialog\";\nimport JobDetail from \"./JobDetail\";\nimport ManageJobSample from \"./ManageJobSample\";\nimport { HubConnectionBuilder } from \"@aspnet/signalr\";\nimport { faSquare } from \"@fortawesome/free-regular-svg-icons\";\nimport { faCog, faCopy, faDownload, faFileExcel, faInfoCircle, faListUl, faMinusCircle, faPenToSquare, faPlus, faSquareCheck, faSquareMinus, faSync } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { Link, withRouter } from \"react-router-dom\";\nimport { Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\nconst messageHubHostname = process.env.NODE_ENV === \"development\" ? process.env.REACT_APP_MESSAGE_HUB_ENDPOINT : \"/messagehub\";\n\nconst rowStyle = {\n fontSize: \"12px\",\n};\n\nclass ManageJob extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: null,\n loading: true,\n alerts: [],\n jobs: [],\n sampleJobs: [],\n selectedJob: null,\n selectedJobUpdated: false,\n jobImportSessionId: this.props.jobImportSessionId,\n showDialogImportTs: null,\n jobImportQueue: [],\n showDeleteJobDialog: false,\n showJobCopyDialogTs: false,\n showSampleJobsDialogTs: false,\n printReportsMode: false,\n loadingPrint: false,\n selectedJobsPrint: [],\n showColumnSettings: false,\n };\n\n this.filterArray = filterArray.bind(this);\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n this.generateRandomString = generateRandomString.bind(this);\n }\n\n componentDidMount() {\n const routeGoBack = localStorage.getItem(\"routeGoBack\");\n\n let repopulate = true;\n if (routeGoBack == \"TRUE\") {\n repopulate = false;\n }\n\n this.props.onAuth.authCheckState().then(() => {\n this.connectJobSignalR();\n\n if (!this.state.jobImportSessionId) {\n const jobImportSessionId = this.generateRandomString(30);\n Promise.resolve(this.props.onJob.setJobImportSessionId(jobImportSessionId)).then(() => {\n this.setState({ jobImportSessionId });\n this.connectJobImportSignalR(jobImportSessionId);\n });\n } else {\n this.connectJobImportSignalR(this.state.jobImportSessionId);\n }\n\n if (repopulate || !this.props.jobs || (this.props.jobs && this.props.jobs.length == 0)) {\n Promise.all([this.props.onJob.getJobs(), this.props.onJob.getSampleJobs(), this.props.onJob.getJobImportQueue()]).then(() => {\n this.setState({\n jobs: this.reformJobs(this.props.jobs),\n sampleJobs: this.props.sampleJobs,\n jobImportQueue: this.props.jobImportQueue && this.props.jobImportQueue.sort((b, a) => new Date(a.importedOn) - new Date(b.importedOn)),\n });\n\n this.setState({ loading: this.props.loading || this.props.jobsLoading });\n });\n } else {\n this.setState({\n jobs: this.reformJobs(this.props.jobs),\n sampleJobs: this.props.sampleJobs,\n jobImportQueue: this.props.jobImportQueue && this.props.jobImportQueue.sort((b, a) => new Date(a.importedOn) - new Date(b.importedOn)),\n });\n\n this.setState({ loading: false });\n }\n });\n }\n\n searchProperties = () => {\n const pageName = \"Manage Requirements\";\n return this.props.columnDisplaySettings\n ? this.props.columnDisplaySettings\n .filter(\n (it) =>\n it.pageName == pageName &&\n it.visible == true &&\n it.searchable == true &&\n ((it.columnName != \"showAsVacancy\" && it.columnName != \"vacancyOwner\") || (this.props.containerConfig && this.props.containerConfig.internalJobMarket && (it.columnName == \"showAsVacancy\" || it.columnName == \"vacancyOwner\")))\n )\n .map((it) => it.columnName)\n : [];\n };\n\n componentWillUnmount() {\n localStorage.setItem(\"routeGoBack\", \"FALSE\");\n this.disconnectJobSignalR();\n this.disconnectJobImportSignalR();\n }\n\n connectJobSignalR = () => {\n const personId = this.props.personId;\n this.connectionJob = new HubConnectionBuilder().withUrl(messageHubHostname).build();\n\n this.connectionJob.on(`UpdateRequirementNotification${personId}`, (response) => {\n if (response.action == \"JobUpdate\") {\n if (response.status == \"Success\") {\n let updatedJob = response.data;\n this.props.onJob.updateJobByNotification(updatedJob);\n this.setState({ selectedJobUpdated: true });\n }\n }\n });\n\n this.connectionJob.start().catch((err) => console.error(err.toString()));\n };\n\n disconnectJobSignalR = () => {\n if (this.connectionJob) this.connectionJob.stop();\n };\n\n connectJobImportSignalR = (jobImportSessionId) => {\n this.connectionJobImport = new HubConnectionBuilder().withUrl(messageHubHostname).build();\n\n this.connectionJobImport.on(`ImportJobsDataNotification${jobImportSessionId}`, (response) => {\n if (response.action == \"ImportJobsData\") {\n if (response.status == \"Success\") {\n let importJobResponse = response.data;\n //console.log(\"importJobResponse\", importJobResponse);\n this.props.onJob.updateImportJobStatus(importJobResponse.item1, importJobResponse.item2);\n }\n }\n });\n\n this.connectionJobImport.start().catch((err) => console.error(err.toString()));\n };\n\n disconnectJobImportSignalR = () => {\n if (this.connectionJobImport) this.connectionJobImport.stop();\n };\n\n handleRefresh = () => {\n this.props.onJob.getJobs().then(() => {\n this.setState({\n jobs: this.reformJobs(this.props.jobs),\n });\n });\n };\n\n componentDidUpdate(prevProps) {\n if (prevProps.jobs !== this.props.jobs) {\n this.setState({\n jobs: this.props.jobs ? this.reformJobs(this.props.jobs.sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1))) : [],\n });\n }\n\n if (prevProps.jobImportQueue !== this.props.jobImportQueue) {\n this.setState({\n jobImportQueue: this.props.jobImportQueue ? this.props.jobImportQueue.sort((b, a) => new Date(a.importedOn) - new Date(b.importedOn)) : [],\n });\n }\n }\n\n reformJobs = (jobs) => {\n return jobs.map((it) => {\n return {\n id: it.id,\n companyId: it.companyId,\n cartridgeId: it.cartridgeId,\n name: it.name,\n description: it.description,\n reference: it.reference,\n customerReference: it.customerReference,\n sequence: it.sequence,\n isRole: it.isRole,\n createdOn: it.createdOn,\n definedById: it.definedById,\n definedBy: it.definedBy,\n reportingTo: it.reportingTo,\n seniority: it.seniority,\n employmentStatus: it.employmentStatus,\n department: it.department,\n location: it.location,\n purpose: it.purpose,\n keyAccountibilities: it.keyAccountibilities,\n keyProcesses: it.keyProcesses,\n educationRequirements: it.educationRequirements,\n qualificationRequirements: it.qualificationRequirements,\n otherRequirements: it.otherRequirements,\n comment: it.comment,\n isHidden: it.isHidden,\n isCandidateJob: it.isCandidateJob,\n whoCanSee: it.isHidden && !it.isCandidateJob ? \"Nobody\" : !it.isHidden && !it.isCandidateJob ? \"Employee Only\" : it.isHidden && it.isCandidateJob ? \"Candidate Only\" : \"Candidates and Employees\",\n inActive: it.inActive,\n active: it.inActive ? \"Inactive\" : \"Active\",\n isSample: it.isSample,\n ownerId: it.ownerId,\n owner: it.owner,\n updatedOn: it.updatedOn,\n languageId: it.languageId,\n language: it.language,\n fte: it.fte,\n jobFamilyId: it.jobFamilyId,\n jobFamily: it.jobFamily,\n jobFamilySequence: it.jobFamilySequence,\n jobMatches: it.jobMatches,\n userCountCurrent: it.jobMatches ? it.jobMatches.filter((jm) => jm.jobType == \"Current\" && jm.personInactive != true).length : 0,\n userCountFuture: it.jobMatches ? it.jobMatches.filter((jm) => jm.jobType == \"Future\" && jm.personInactive != true).length : 0,\n showAsRoleBasedSurveyInSelfRegistration: it.showAsRoleBasedSurveyInSelfRegistration != null ? it.showAsRoleBasedSurveyInSelfRegistration : false,\n strShowAsRoleBasedSurveyInSelfRegistration: it.showAsRoleBasedSurveyInSelfRegistration != null ? (it.showAsRoleBasedSurveyInSelfRegistration ? \"Yes\" : \"No\") : \"No\",\n showAsVacancy: it.showAsVacancy,\n showAsVacancyFilter: it.showAsVacancy ? \"Yes\" : \"No\",\n vacancyOwner: it.vacancyOwner,\n vacancyOwnerId: it.vacancyOwnerId,\n };\n });\n };\n\n openJobDetail = (job) => {\n this.setState({ showDialogJobDetailTs: new Date(), selectedJob: job, selectedJobUpdated: false });\n };\n\n handleDeleteJob = (job) => {\n this.setState({ deletedJob: job, showDeleteJobDialog: true });\n };\n\n togleDeleteJobModal = () => {\n const showDeleteJobDialog = this.state.showDeleteJobDialog;\n this.setState({ showDeleteJobDialog: !showDeleteJobDialog });\n };\n\n handleConfirmDeleteJob = () => {\n const job = this.state.deletedJob;\n if (job) {\n this.setState({ isUpdating: true });\n\n this.props.onJob.deleteJob(job.id).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.jobsError) {\n this.generateAlert(\"success\", \"Delete requirement success.\");\n this.handleRefresh();\n this.setState({ showDeleteJobDialog: false });\n } else {\n this.generateAlert(\"danger\", this.props.jobsError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n }\n };\n\n renderDeleteJobConfirmation = () => {\n return (\n \n Delete Requirement Confirmation \n \n \n \n \n {\n this.handleConfirmDeleteJob();\n }}\n >\n OK\n \n \n Cancel\n \n \n \n );\n };\n\n handleCopyJob = (job) => {\n this.setState({ selectedJob: job, copyJobSuccess: false, showJobCopyDialogTs: new Date() });\n };\n\n handleSaveCopyJob = (request) => {\n this.setState({ isUpdating: true });\n\n this.props.onJob.copyJob(request).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.jobsError) {\n this.generateAlert(\"success\", \"Copy requirement success.\");\n this.setState({ copyJobSuccess: true });\n } else {\n this.generateAlert(\"danger\", this.props.jobsError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n handleAddNew = () => {\n this.props.history.push(\"requirements/create\");\n };\n\n pad2 = (n) => {\n return (n < 10 ? \"0\" : \"\") + n;\n };\n\n handleExportJobs = () => {\n this.props.onJob.exportJobsDataExcel().then(() => {\n if (!this.props.loadingExport && !this.props.jobsError) {\n if (this.props.exportData) {\n var today = new Date();\n var strToday = today.getFullYear() + this.pad2(today.getMonth() + 1) + this.pad2(today.getDate()) + \"_\" + this.pad2(today.getHours()) + this.pad2(today.getMinutes()) + this.pad2(today.getSeconds());\n FileDownload(this.props.exportData, `ExportRequirements_${strToday}.xlsx`);\n }\n }\n });\n };\n\n handleImportJobs = () => {\n this.setState({ showDialogImportTs: new Date() });\n };\n\n handleAddedJobImports = (jobImports) => {\n const jobImportIds = jobImports.map((it) => {\n return it.id;\n });\n\n Promise.resolve(this.props.onJob.processJobImportQueue(jobImportIds)).then(() => {});\n };\n\n handleRefreshJobQueueu = () => {\n this.props.onJob.getJobImportQueue().then(() => {\n this.setState({\n jobImportQueue: this.props.jobImportQueue && this.props.jobImportQueue.sort((b, a) => new Date(a.importedOn) - new Date(b.importedOn)),\n });\n });\n };\n\n downloadImportJobExcel = (jobImport) => {\n this.props.onJob.downloadJobImportExcel(jobImport.id).then(() => {\n if (!this.props.loadingExport && !this.props.jobsError) {\n if (this.props.exportData) {\n var today = new Date();\n var strToday = today.getFullYear() + this.pad2(today.getMonth() + 1) + this.pad2(today.getDate()) + \"_\" + this.pad2(today.getHours()) + this.pad2(today.getMinutes()) + this.pad2(today.getSeconds());\n FileDownload(this.props.exportData, jobImport.fileName);\n }\n }\n });\n };\n\n renderJobImportQueue = () => {\n const { jobImportQueue, searchKeywordQueue } = this.state;\n const downloadImportJobExcel = this.downloadImportJobExcel;\n\n const columns = [\n {\n id: \"fileName\",\n name: \"FileName\",\n selector: (row) => row.fileName,\n sortable: true,\n width: \"20%\",\n format: function (row, index) {\n return row.fileName;\n },\n },\n {\n id: \"status\",\n name: \"Status\",\n selector: (row) => row.status,\n sortable: true,\n width: \"12%\",\n },\n {\n id: \"importedOn\",\n name: \"Imported On\",\n selector: (row) => row.importedOn,\n sortable: true,\n width: \"15%\",\n format: function (row, index) {\n return new Intl.DateTimeFormat(\"en-GB\", {\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\",\n hourCycle: \"h23\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n }).format(new Date(row.importedOn));\n },\n },\n {\n id: \"statusMessage\",\n name: \"Status Message\",\n selector: (row) => row.statusMessage,\n sortable: true,\n width: \"15%\",\n },\n {\n id: \"id\",\n name: \"Download\",\n selector: (row) => row.id,\n sortable: true,\n width: \"10%\",\n format: function (row, index) {\n return (\n \n {jobImportQueue && jobImportQueue.length > 0 && (\n \n \n Requirements Import Queue\n \n \n \n {\n this.setState({ searchKeywordQueue: searchKeyword });\n }}\n >\n \n {\n this.setState({ searchKeywordQueue: \"\" });\n }}\n >\n \n \n
\n
\n \n )}\n \n );\n };\n\n handlePerformCopyJobs = (copiedJobs) => {\n this.setState({ isUpdating: true, copyJobsSuccess: false });\n this.props.onJob.copyJobs(copiedJobs).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.jobsError) {\n this.generateAlert(\"success\", \"Copy default requirements success.\");\n this.setState({ copyJobsSuccess: true });\n } else {\n this.generateAlert(\"danger\", this.props.jobsError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n handleShowSampleJobs = () => {\n this.setState({ showSampleJobsDialogTs: new Date() });\n };\n\n handleGenerateReport = () => {\n this.setState({ printReportsMode: true });\n };\n\n handleConfirmGenerateReport = () => {\n const selectedJobsPrint = this.state.selectedJobsPrint;\n this.setState({ loadingPrint: true, printReportsMode: false });\n this.handleClearSelection();\n this.props.onJob.printJobReports(selectedJobsPrint).then(() => {\n if (!this.props.loadingPrint) {\n if (this.props.printData) {\n FileDownload(this.props.printData, `SkillsTx_Requirement_Profiles.zip`);\n this.setState({ selectedJobsPrint: [] });\n }\n }\n\n this.setState({ loadingPrint: this.props.loadingPrint });\n });\n };\n\n handleCancelGenerateReport = () => {\n this.setState({ printReportsMode: false });\n this.handleClearSelection();\n };\n\n handleRowClick = (row) => {\n const jobs = this.state.jobs;\n const updatedData = jobs.find((it) => it.id == row.id);\n updatedData.toggleSelected = !updatedData.toggleSelected;\n\n this.setState({ jobs: [...jobs], selectedJobsPrint: jobs.filter((it) => it.toggleSelected).map((row) => row.id) });\n };\n\n handleSelectAll = () => {\n const { jobs, searchKeyword, columnSearchKeywords } = this.state;\n let selectAll = false;\n\n const filtered = this.filterArray(jobs, searchKeyword, this.searchProperties(), columnSearchKeywords);\n\n if (filtered.filter((it) => it.toggleSelected).length == 0) {\n selectAll = true;\n } else if (filtered.filter((it) => !it.toggleSelected).length == 0) {\n selectAll = false;\n } else {\n selectAll = true;\n }\n\n jobs.forEach((it) => {\n it.toggleSelected = false;\n });\n\n if (selectAll) {\n jobs.forEach((it) => {\n if (filtered.find((f) => f.id == it.id)) {\n it.toggleSelected = true;\n }\n });\n }\n\n this.setState({ jobs: [...jobs], selectedJobsPrint: jobs.filter((it) => it.toggleSelected).map((row) => row.id) });\n };\n\n handleClearSelection = () => {\n const jobs = this.state.jobs;\n\n jobs.forEach((it) => {\n it.toggleSelected = false;\n });\n\n this.setState({ jobs: [...jobs] });\n };\n\n onTableFilterChange = (e, searchType) => {\n let columnSearchKeywords = this.state.columnSearchKeywords;\n if (!columnSearchKeywords) {\n columnSearchKeywords = [];\n }\n\n if (columnSearchKeywords.find((it) => it.name == e.target.name)) {\n let columnSearchKeyword = columnSearchKeywords.find((it) => it.name == e.target.name);\n columnSearchKeyword.value = e.target.value;\n } else {\n columnSearchKeywords.push({\n name: e.target.name,\n value: e.target.value,\n searchType,\n });\n }\n\n this.setState({ columnSearchKeywords });\n };\n\n handleShowColumnSettings = () => {\n const showColumnSettings = this.state.showColumnSettings;\n\n this.setState({ showColumnSettings: !showColumnSettings });\n };\n\n render() {\n const { pageAssignments, loginWithTeams } = this.props;\n const pageAssignment = pageAssignments.find((it) => it.pageName == \"Manage Requirements\");\n\n const { authPersonId } = this.props;\n\n const openJobDetail = this.openJobDetail;\n const handleDeleteJob = this.handleDeleteJob;\n const handleCopyJob = this.handleCopyJob;\n const handleRowClick = this.handleRowClick;\n const handleSelectAll = this.handleSelectAll;\n\n const onTableFilterChange = this.onTableFilterChange;\n\n const { jobImportQueue, searchKeyword, jobs, columnSearchKeywords } = this.state;\n\n const filtered = this.filterArray(jobs, searchKeyword, this.searchProperties(), columnSearchKeywords);\n\n const ownerSort = (rowA, rowB) => {\n let ownerA = rowA.owner ? `0${rowA.owner}` : \"1\";\n let ownerB = rowB.owner ? `0${rowB.owner}` : \"1\";\n\n if (ownerA > ownerB) {\n return 1;\n }\n\n if (ownerB > ownerA) {\n return -1;\n }\n\n return 0;\n };\n\n const whoCanSeeSort = (rowA, rowB) => {\n let whoCanSeeA = rowA.isHidden && !rowA.isCandidateJob ? \"Nobody\" : !rowA.isHidden && !rowA.isCandidateJob ? \"Employee Only\" : rowA.isHidden && rowA.isCandidateJob ? \"Candidate Only\" : \"Candidates and Employees\";\n let whoCanSeeB = rowB.isHidden && !rowB.isCandidateJob ? \"Nobody\" : !rowB.isHidden && !rowB.isCandidateJob ? \"Employee Only\" : rowB.isHidden && rowB.isCandidateJob ? \"Candidate Only\" : \"Candidates and Employees\";\n\n if (whoCanSeeA > whoCanSeeB) {\n return 1;\n }\n\n if (whoCanSeeB > whoCanSeeA) {\n return -1;\n }\n\n return 0;\n };\n\n const pageName = \"Manage Requirements\";\n const columnDisplaySettings = this.props.columnDisplaySettings ? this.props.columnDisplaySettings.filter((it) => it.pageName == pageName) : [];\n\n const columns = [\n {\n id: \"id\",\n name: (\n \n
\n ),\n selector: (row) => row.id,\n sortable: false,\n width: \"80px\",\n center: true,\n format: function (row, index) {\n return (\n \n
\n );\n },\n omit: !this.state.printReportsMode,\n },\n {\n id: \"updatedOn\",\n name: \"Action\",\n selector: (row) => row.updatedOn,\n sortable: false,\n width: \"120px\",\n center: true,\n format: function (row, index) {\n return (\n \n openJobDetail(row)} />\n \n Requirement Info\n \n \n \n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Edit\" && op.allow == true) && (!row.ownerId || row.ownerId == authPersonId) ? \"Edit Requirement Profile\" : \"Show Requirement Profile\"}\n \n \n \n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Copy Requirement\" && op.allow == true) && (\n \n handleCopyJob(row)} />\n \n Copy Requirement\n \n \n \n )}\n {pageAssignment &&\n pageAssignment.operations &&\n pageAssignment.operations.find((op) => op.operation == \"Delete\" && op.allow == true) &&\n !(row.jobMatches && row.jobMatches.filter((it) => it.personInactive == false).length > 0) &&\n (!row.ownerId || row.ownerId == authPersonId) && (\n \n handleDeleteJob(row)} />\n \n Delete Requirement\n \n \n )}\n
\n );\n },\n },\n {\n id: \"name\",\n name: (\n \n Name\n
\n ),\n selector: (row) => row.name,\n sortable: true,\n width: \"300px\",\n wrap: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"name\") ? !columnDisplaySettings.find((it) => it.columnName == \"name\").visible : true,\n },\n {\n id: \"reference\",\n name: (\n \n Reference\n
\n ),\n selector: (row) => row.reference,\n sortable: true,\n width: \"200px\",\n wrap: true,\n format: function (row, index) {\n return row.reference;\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"reference\") ? !columnDisplaySettings.find((it) => it.columnName == \"reference\").visible : true,\n },\n {\n id: \"customerReference\",\n name: (\n \n Customer Reference\n it.name == \"customerReference\") ? columnSearchKeywords.find((it) => it.name == \"customerReference\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.customerReference,\n sortable: true,\n width: \"150px\",\n wrap: true,\n format: function (row, index) {\n return row.customerReference;\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"customerReference\") ? !columnDisplaySettings.find((it) => it.columnName == \"customerReference\").visible : true,\n },\n {\n id: \"owner\",\n name: (\n \n Owner\n
\n ),\n selector: (row) => row.owner,\n sortFunction: ownerSort,\n sortable: true,\n width: \"150px\",\n wrap: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"owner\") ? !columnDisplaySettings.find((it) => it.columnName == \"owner\").visible : true,\n },\n {\n id: \"isHidden\",\n name: (\n \n Who can see\n
\n ),\n selector: (row) => row.isHidden,\n sortFunction: whoCanSeeSort,\n sortable: true,\n width: \"200px\",\n wrap: true,\n format: function (row, index) {\n return row.isHidden && !row.isCandidateJob ? \"Nobody\" : !row.isHidden && !row.isCandidateJob ? \"Employee Only\" : row.isHidden && row.isCandidateJob ? \"Candidate Only\" : \"Candidates and Employees\";\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"whoCanSee\") ? !columnDisplaySettings.find((it) => it.columnName == \"whoCanSee\").visible : true,\n },\n {\n id: \"inActive\",\n name: (\n \n InActive\n
\n ),\n selector: (row) => row.inActive,\n sortable: true,\n width: \"100px\",\n format: function (row, index) {\n return row.inActive ? \"Inactive\" : \"Active\";\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"inActive\") ? !columnDisplaySettings.find((it) => it.columnName == \"inActive\").visible : true,\n },\n {\n id: \"showAsRoleBasedSurveyInSelfRegistration\",\n name: (\n \n Include in Self Registration Role Based Survey\n it.name == \"strShowAsRoleBasedSurveyInSelfRegistration\") ? columnSearchKeywords.find((it) => it.name == \"strShowAsRoleBasedSurveyInSelfRegistration\").value : \"\"}\n onChange={(e) => onTableFilterChange(e, \"startsWith\")}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.showAsRoleBasedSurveyInSelfRegistration,\n sortable: true,\n width: \"150px\",\n format: function (row, index) {\n return row.strShowAsRoleBasedSurveyInSelfRegistration;\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"showAsRoleBasedSurveyInSelfRegistration\") ? !columnDisplaySettings.find((it) => it.columnName == \"showAsRoleBasedSurveyInSelfRegistration\").visible : true,\n },\n {\n id: \"department\",\n name: (\n \n Department\n
\n ),\n selector: (row) => row.department,\n sortable: true,\n width: \"150px\",\n wrap: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"department\") ? !columnDisplaySettings.find((it) => it.columnName == \"department\").visible : true,\n },\n {\n id: \"reportingTo\",\n name: (\n \n Reporting To\n
\n ),\n selector: (row) => row.reportingTo,\n sortable: true,\n width: \"150px\",\n wrap: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"reportingTo\") ? !columnDisplaySettings.find((it) => it.columnName == \"reportingTo\").visible : true,\n },\n {\n id: \"location\",\n name: (\n \n Location\n
\n ),\n selector: (row) => row.location,\n sortable: true,\n width: \"150px\",\n wrap: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"location\") ? !columnDisplaySettings.find((it) => it.columnName == \"location\").visible : true,\n },\n {\n id: \"fte\",\n name: (\n \n FTE Count\n
\n ),\n selector: (row) => row.fte,\n sortable: true,\n width: \"100px\",\n wrap: true,\n center: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"fte\") ? !columnDisplaySettings.find((it) => it.columnName == \"fte\").visible : true,\n },\n {\n id: \"employmentStatus\",\n name: (\n \n Employment Status\n it.name == \"employmentStatus\") ? columnSearchKeywords.find((it) => it.name == \"employmentStatus\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.employmentStatus,\n sortable: true,\n width: \"150px\",\n wrap: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"employmentStatus\") ? !columnDisplaySettings.find((it) => it.columnName == \"employmentStatus\").visible : true,\n },\n {\n id: \"userCountCurrent\",\n name: (\n \n User count (Current Requirement)\n it.name == \"userCountCurrent\") ? columnSearchKeywords.find((it) => it.name == \"userCountCurrent\").value : \"\"}\n onChange={(e) => onTableFilterChange(e, \"startsWith\")}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.userCountCurrent,\n sortable: true,\n width: \"150px\",\n center: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"userCountCurrent\") ? !columnDisplaySettings.find((it) => it.columnName == \"userCountCurrent\").visible : true,\n },\n {\n id: \"userCountFuture\",\n name: (\n \n User count (Future Requirement)\n it.name == \"userCountFuture\") ? columnSearchKeywords.find((it) => it.name == \"userCountFuture\").value : \"\"}\n onChange={(e) => onTableFilterChange(e, \"startsWith\")}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.userCountFuture,\n sortable: true,\n width: \"150px\",\n center: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"userCountFuture\") ? !columnDisplaySettings.find((it) => it.columnName == \"userCountFuture\").visible : true,\n },\n {\n id: \"showAsVacancy\",\n name: (\n \n Show as Vacancy\n it.name == \"showAsVacancyFilter\") ? columnSearchKeywords.find((it) => it.name == \"showAsVacancyFilter\").value : \"\"}\n onChange={(e) => onTableFilterChange(e, \"startsWith\")}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.showAsVacancy,\n sortable: true,\n width: \"150px\",\n format: function (row, index) {\n return row.showAsVacancyFilter;\n },\n center: true,\n omit:\n this.props.containerConfig && this.props.containerConfig.internalJobMarket && columnDisplaySettings.find((it) => it.columnName == \"showAsVacancy\")\n ? !columnDisplaySettings.find((it) => it.columnName == \"showAsVacancy\").visible\n : this.props.containerConfig && this.props.containerConfig.internalJobMarket\n ? false\n : true,\n },\n {\n id: \"vacancyOwner\",\n name: (\n \n Vacancy Owner\n
\n ),\n selector: (row) => row.vacancyOwner,\n sortable: true,\n width: \"150px\",\n center: true,\n omit:\n this.props.containerConfig && this.props.containerConfig.internalJobMarket && columnDisplaySettings.find((it) => it.columnName == \"vacancyOwner\")\n ? !columnDisplaySettings.find((it) => it.columnName == \"vacancyOwner\").visible\n : this.props.containerConfig && this.props.containerConfig.internalJobMarket\n ? false\n : true,\n },\n ];\n\n return (\n \n \n
\n ) : (\n \n op.operation == \"Edit\" && op.allow == true) ? true : false}\n >\n \n
\n {\n this.handleClearSelection();\n this.setState({ searchKeyword, selectedJobsPrint: [] });\n }}\n >\n \n {\n this.handleClearSelection();\n this.setState({ searchKeyword: \"\", selectedJobsPrint: [] });\n }}\n >\n \n \n \n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Add\" && op.allow == true) && (\n \n \n \n )}\n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Export\" && op.allow == true) && (\n \n \n \n )}\n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Import\" && op.allow == true) && (\n \n it.status != \"Completed\").length == 0))}\n >\n \n While the process is running the uploading of more requirements will be unavailable\n \n )}\n \n \n )}\n \n )}\n \n \n \n {!this.state.printReportsMode && (\n \n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Copy Sample Requirement\" && op.allow == true) && (\n \n \n \n )}\n \n )}\n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Generate Reports\" && op.allow == true) && (\n \n \n \n \n OK\n \n \n \n Cancel\n \n \n )}\n \n
\n {this.state.showColumnSettings && (\n
\n
\n )}\n
\n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n personId: state.auth.personId,\n loading: state.auth.loading,\n error: state.auth.error,\n authPersonId: state.auth.personId,\n loginWithTeams: state.auth.loginWithTeams,\n\n jobsLoading: state.job.loading,\n jobsError: state.job.error,\n jobs: state.job.jobs,\n sampleJobs: state.job.sampleJobs,\n jobImportQueue: state.job.jobImportQueue,\n\n jobImportSessionId: state.job.jobImportSessionId,\n exportData: state.job.exportData,\n loadingExport: state.job.loadingExport,\n\n loadingPrint: state.job.loadingPrint,\n printData: state.job.printData,\n\n pageAssignments: state.adminPerson.pageAssignments,\n columnDisplaySettings: state.adminPerson.columnDisplaySettings,\n containerConfig: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onJob: bindActionCreators(jobActions, dispatch),\n };\n};\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(ManageJob));\n","import changeInput from \"../../../utils/changeInput\";\nimport { ContentWrapperLg } from \"../../common/ContentWrapperLg\";\nimport React, { Component } from \"react\";\nimport ReactTextareaAutosize from \"react-textarea-autosize\";\nimport { Col, CustomInput, Form, FormGroup, Input, Label, Row } from \"reactstrap\";\n\nconst headerStyle = {\n color: \"#2B2B2B\",\n fontSize: \"28px\",\n fontFamily: \"IBMPlexSans-Bold\",\n};\n\nconst buttonStyle = {\n marginLeft: \"10px\",\n};\n\nconst labelCaptionStyle = {\n fontWeight: \"bold\",\n};\n\nconst textareaStyle = {\n width: \"100%\",\n padding: \"10px\",\n border: \"1px solid #ced4da\",\n borderRadius: \"0.25rem\",\n};\n\nconst textareaStyleDisable = {\n width: \"100%\",\n padding: \"10px\",\n border: \"1px solid #ced4da\",\n borderRadius: \"0.25rem\",\n background: \"#e9ecef\",\n};\n\nconst largeContainer = {\n width: \"100%\",\n maxWidth: \"100%\",\n fontSize: \"14px\",\n};\n\nconst commonContainer = {\n fontSize: \"14px\",\n};\n\nclass ManageJobDetail extends Component {\n constructor(props) {\n super(props);\n this.state = {\n job: this.props.job,\n optionJobRole: [\n {\n label: \"Job\",\n value: \"Job\",\n },\n {\n label: \"Role\",\n value: \"Role\",\n },\n ],\n optionSeniority: [\n { label: \"Select Seniority\", value: \"\" },\n { label: \"Senior or Executive Manager\", value: \"Senior or Executive Manager\" },\n { label: \"Senior Advisor\", value: \"Senior Advisor\" },\n { label: \"Line Manager\", value: \"Line Manager\" },\n { label: \"Team Leader\", value: \"Team Leader\" },\n { label: \"Senior Employee\", value: \"Senior Employee\" },\n { label: \"Experienced Employee\", value: \"Experienced Employee\" },\n { label: \"Junior Employee\", value: \"Junior Employee\" },\n { label: \"None of the above (please comment)\", value: \"None of the above (please comment)\" },\n { label: \"Not Applicable\", value: \"Not Applicable\" },\n ],\n optionEmploymentStatus: [\n { label: \"Select Status\", value: \"\" },\n { label: \"Permanent Full-time\", value: \"Permanent Full-time\" },\n { label: \"Permanent Part-time\", value: \"Permanent Part-time\" },\n { label: \"1-2 year contract\", value: \"1-2 year contract\" },\n { label: \"2-5 year contract\", value: \"2-5 year contract\" },\n { label: \"Consultant/Contractor\", value: \"Consultant/Contractor\" },\n { label: \"Casual\", value: \"Casual\" },\n { label: \"Other (Please comment)\", value: \"Other (Please comment)\" },\n { label: \"Not Applicable\", value: \"Not Applicable\" },\n ],\n form: this.prepareFormState(),\n isFormValid: this.props.job && this.props.job.reference && this.props.job.reference != \"\" ? true : false,\n editMode: this.props.createNew ? true : false,\n isUpdating: false,\n createNewMode: this.props.createNew ? true : false,\n selectedCopyJobId: [],\n optionLanguages: [],\n optionYesOrNo: [\n {\n label: \"Yes\",\n value: true,\n },\n {\n label: \"No\",\n value: false,\n },\n ],\n vacancyOwners: this.props.personsDropdown\n ? [\n {\n value: \"Select vacancy owner\",\n label: \"Select vacancy owner\",\n },\n ...this.props.personsDropdown\n .filter((it) => !it.inactive)\n .map((person) => {\n return {\n value: person.id,\n label: `${person.firstName} ${person.lastName}`,\n };\n })\n .sort((a, b) => {\n return a.label > b.label ? 1 : -1;\n }),\n ]\n : [\n {\n value: \"Select vacancy owner\",\n label: \"Select vacancy owner\",\n },\n ],\n };\n }\n\n componentDidMount() {\n this.prepareFormState();\n\n let optionLanguages = [];\n\n if (this.props.languages) {\n optionLanguages = [\n ...this.props.languages.map((language) => {\n return {\n value: language.name,\n label: language.name,\n };\n }),\n ];\n\n this.setState({ optionLanguages });\n }\n }\n\n prepareFormState = () => {\n return {\n jobRole: {\n validation: {\n required: true,\n },\n value: this.props.job ? (this.props.job.isRole ? \"Role\" : \"Job\") : \"Role\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n name: {\n validation: {\n required: true,\n },\n value: this.props.job && this.props.job.name ? this.props.job.name : \"\",\n valid: this.props.job ? true : false,\n isValidFormat: this.props.job ? true : false,\n touched: false,\n },\n reference: {\n validation: {\n required: true,\n },\n value: this.props.job && this.props.job.reference ? this.props.job.reference : \"\",\n valid: this.props.job && this.props.job.reference ? true : false,\n isValidFormat: this.props.job && this.props.job.reference ? true : false,\n touched: false,\n },\n customerReference: {\n validation: {\n required: false,\n },\n value: this.props.job && this.props.job.customerReference ? this.props.job.customerReference : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n reportingTo: {\n validation: {\n required: false,\n },\n value: this.props.job && this.props.job.reportingTo ? this.props.job.reportingTo : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n seniority: {\n validation: {\n required: false,\n },\n value: this.props.job && this.props.job.seniority ? this.props.job.seniority : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n employmentStatus: {\n validation: {\n required: false,\n },\n value: this.props.job && this.props.job.employmentStatus ? this.props.job.employmentStatus : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n department: {\n validation: {\n required: false,\n },\n value: this.props.job && this.props.job.department ? this.props.job.department : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n location: {\n validation: {\n required: false,\n },\n value: this.props.job && this.props.job.location ? this.props.job.location : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n fte: {\n validation: {\n isFte: true,\n required: true,\n },\n value: this.props.job && this.props.job.fte ? (typeof this.props.job.fte == \"number\" ? this.props.job.fte.toFixed(1) : this.props.job.fte) : \"1.0\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n purpose: {\n validation: {\n required: false,\n },\n value: this.props.job && this.props.job.purpose ? this.props.job.purpose : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n keyAccountibilities: {\n validation: {\n required: false,\n },\n value: this.props.job && this.props.job.keyAccountibilities ? this.props.job.keyAccountibilities : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n keyProcesses: {\n validation: {\n required: false,\n },\n value: this.props.job && this.props.job.keyProcesses ? this.props.job.keyProcesses : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n educationRequirements: {\n validation: {\n required: false,\n },\n value: this.props.job && this.props.job.educationRequirements ? this.props.job.educationRequirements : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n qualificationRequirements: {\n validation: {\n required: false,\n },\n value: this.props.job && this.props.job.qualificationRequirements ? this.props.job.qualificationRequirements : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n otherRequirements: {\n validation: {\n required: false,\n },\n value: this.props.job && this.props.job.otherRequirements ? this.props.job.otherRequirements : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n language: {\n validation: {\n required: true,\n },\n value: this.props.job && this.props.job.language ? this.props.job.language : \"English\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n languageId: {\n validation: {\n required: true,\n },\n value: this.props.job && this.props.job.languageId ? this.props.job.languageId : this.props.languages && this.props.languages.find((it) => it.name == \"English\") ? this.props.languages.find((it) => it.name == \"English\").id : null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n showAsRoleBasedSurveyInSelfRegistration: {\n validation: {\n required: false,\n },\n value: this.props.job && this.props.job.showAsRoleBasedSurveyInSelfRegistration != null ? (this.props.job.showAsRoleBasedSurveyInSelfRegistration == true || this.props.job.showAsRoleBasedSurveyInSelfRegistration == \"true\" ? true : false) : false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n showAsVacancy: {\n validation: {\n required: false,\n },\n value: this.props.job && this.props.job.showAsVacancy != null ? (this.props.job.showAsVacancy == true || this.props.job.showAsVacancy == \"true\" ? true : false) : false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n vacancyOwner: {\n validation: {\n required: false,\n },\n value: this.props.job && this.props.job.vacancyOwner ? this.props.job.vacancyOwner : \"-\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n vacancyOwnerId: {\n validation: {\n required: false,\n },\n value: this.props.job && this.props.job.vacancyOwnerId ? this.props.job.vacancyOwnerId : \"-\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n };\n };\n\n componentDidUpdate(prevProps) {\n if (prevProps.job !== this.props.job) {\n this.setState({ job: this.props.job });\n }\n\n if (prevProps.isUpdating !== this.props.isUpdating) {\n this.setState({ isUpdating: this.props.isUpdating });\n }\n\n if (prevProps.updateSuccess !== this.props.updateSuccess) {\n if (this.props.updateSuccess) {\n this.setState({ editMode: false, form: this.prepareFormState() });\n }\n }\n }\n\n handleChange = (event) => {\n const { vacancyOwners } = this.state;\n const languages = this.props.languages;\n const { name, value } = event.target;\n\n let updateState = changeInput(this.state.form, name, value);\n\n if (name == \"language\" && languages) {\n const language = languages.find((it) => it.name == value);\n updateState = changeInput(updateState.form, \"languageId\", language ? language.id : null);\n }\n\n if (name == \"vacancyOwnerId\") {\n if (value && value != \"Select vacancy owner\") {\n const person = vacancyOwners.find((it) => it.value == value);\n if (person) {\n updateState = changeInput(updateState.form, \"vacancyOwner\", person.label);\n }\n } else {\n updateState = changeInput(updateState.form, \"vacancyOwner\", \"Select vacancy owner\");\n }\n }\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n handleChangeShowEdit = () => {\n const editMode = this.state.editMode;\n\n if (editMode) {\n this.setState({ form: this.prepareFormState(), isFormValid: this.props.job && this.props.job.reference && this.props.job.reference != \"\" ? true : false });\n }\n\n this.setState({ editMode: !editMode });\n };\n\n handleSave = () => {\n const { form, selectedCopyJobId } = this.state;\n\n let job = this.state.job;\n\n if (job != null) {\n job.isRole = form.jobRole.value == \"Role\" ? true : false;\n job.reference = form.reference.value;\n job.customerReference = form.customerReference.value;\n\n job.reportingTo = form.reportingTo.value;\n job.seniority = form.seniority.value;\n job.employmentStatus = form.employmentStatus.value;\n job.department = form.department.value;\n job.location = form.location.value;\n job.fte = form.fte.value;\n job.purpose = form.purpose.value;\n job.keyAccountibilities = form.keyAccountibilities.value;\n job.keyProcesses = form.keyProcesses.value;\n job.educationRequirements = form.educationRequirements.value;\n job.qualificationRequirements = form.qualificationRequirements.value;\n job.otherRequirements = form.otherRequirements.value;\n job.language = form.language.value;\n job.languageId = form.languageId.value;\n job.showAsRoleBasedSurveyInSelfRegistration = form.showAsRoleBasedSurveyInSelfRegistration.value == true || form.showAsRoleBasedSurveyInSelfRegistration.value == \"true\" ? true : false;\n job.showAsVacancy = form.showAsVacancy.value == true || form.showAsVacancy.value == \"true\" ? true : false;\n job.vacancyOwnerId = (form.showAsVacancy.value == true || form.showAsVacancy.value == \"true\") && form.vacancyOwnerId.value ? (form.vacancyOwnerId.value != \"Select vacancny owner\" && form.vacancyOwnerId.value != \"-\" ? form.vacancyOwnerId.value : null) : null;\n job.vacancyOwner = (form.showAsVacancy.value == true || form.showAsVacancy.value == \"true\") && form.vacancyOwner.value ? (form.vacancyOwner.value != \"Select vacancny owner\" && form.vacancyOwner.value != \"-\" ? form.vacancyOwner.value : null) : null;\n\n this.props.handleSaveJobDetailUpdate(job);\n } else {\n job = {\n name: form.name.value,\n description: form.name.value,\n isRole: form.jobRole.value == \"Role\" ? true : false,\n reference: form.reference.value,\n customerReference: form.customerReference.value,\n reportingTo: form.reportingTo.value,\n seniority: form.seniority.value,\n employmentStatus: form.employmentStatus.value,\n department: form.department.value,\n location: form.location.value,\n fte: form.fte.value,\n purpose: form.purpose.value,\n keyAccountibilities: form.keyAccountibilities.value,\n keyProcesses: form.keyProcesses.value,\n educationRequirements: form.educationRequirements.value,\n qualificationRequirements: form.qualificationRequirements.value,\n otherRequirements: form.otherRequirements.value,\n isHidden: true,\n isCandidateJob: false,\n inActive: false,\n copiedJobIds: selectedCopyJobId != null && selectedCopyJobId.length > 0 ? [...selectedCopyJobId] : [],\n language: form.language.value,\n languageId: form.languageId.value,\n showAsRoleBasedSurveyInSelfRegistration: form.showAsRoleBasedSurveyInSelfRegistration.value == true || form.showAsRoleBasedSurveyInSelfRegistration.value == \"true\" ? true : false,\n showAsVacancy: form.showAsVacancy.value == true || form.showAsVacancy.value == \"true\" ? true : false,\n vacancyOwnerId: (form.showAsVacancy.value == true || form.showAsVacancy.value == \"true\") && form.vacancyOwnerId.value ? (form.vacancyOwnerId.value != \"Select vacancny owner\" && form.vacancyOwnerId.value != \"-\" ? form.vacancyOwnerId.value : null) : null,\n vacancyOwner: (form.showAsVacancy.value == true || form.showAsVacancy.value == \"true\") && form.vacancyOwner.value ? (form.vacancyOwner.value != \"Select vacancny owner\" && form.vacancyOwner.value != \"-\" ? form.vacancyOwner.value : null) : null,\n };\n\n this.props.handleSaveNewJobDetail(job);\n }\n };\n\n handleCopySkillCheckedChange = (jobId) => {\n const { selectedCopyJobId } = this.state;\n\n if (selectedCopyJobId.includes(jobId)) {\n const index = selectedCopyJobId.indexOf(jobId);\n selectedCopyJobId.splice(index, 1);\n } else {\n selectedCopyJobId.push(jobId);\n }\n\n this.setState({ selectedCopyJobId });\n };\n\n render() {\n const pathName = window.location.pathname;\n const isAdmin = pathName.includes(\"/admin\");\n const { form, editMode, createNewMode, optionJobRole, optionSeniority, optionEmploymentStatus, selectedCopyJobId, optionLanguages, optionYesOrNo } = this.state;\n\n return (\n \n \n {createNewMode && (\n \n \n Create Requirement\n
\n \n
\n )}\n \n \n Requirement Detail\n \n \n \n Edit\n \n )}\n {editMode && !createNewMode && (\n \n \n Save\n \n \n Cancel\n \n \n )}\n \n
\n \n {createNewMode && (\n \n \n
\n \n \n Copy skills from\n \n \n
\n \n \n
\n \n \n Create Requirement\n \n \n
\n \n )}\n \n \n );\n }\n}\n\nexport default ManageJobDetail;\n","import * as authActions from \"../../../store/actions/authAction\";\nimport * as jobActions from \"../../../store/actions/jobAction\";\nimport * as adminPersonActions from \"../../../store/admin/actions/adminPersonActions\";\nimport { dismisAlert, generateAlert } from \"./../../../utils/alertUtils\";\nimport ManageJobDetail from \"./ManageJobDetail\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { withRouter } from \"react-router-dom\";\nimport { Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nclass ManageJobCreate extends React.Component {\n constructor(props) {\n super(props);\n this.connection = null;\n this.state = {\n error: null,\n loading: true,\n alerts: [],\n job: null,\n jobs: [],\n jobIsUpdating: false,\n };\n\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n }\n\n componentDidMount() {\n const fetchPersonsDropdown = this.props.personsDropdown && this.props.personsDropdown.length > 0 ? false : true;\n\n this.props.onAuth.authCheckState().then(() => {\n Promise.all([this.props.onJob.getJobs(), fetchPersonsDropdown && this.props.onPerson.getPersonsDropdown()]).then(() => {\n this.setState({\n jobs: this.props.jobs,\n personsDropdown: this.props.personsDropdown,\n loading: this.props.loading || this.props.jobsLoading || (fetchPersonsDropdown && this.props.personsLoading),\n });\n });\n });\n }\n\n handleSaveNewJobDetail = (job) => {\n this.setState({ jobIsUpdating: true });\n\n this.props.onJob.createJob(job).then(() => {\n if (!this.props.jobIsUpdating) {\n if (!this.props.jobsError) {\n this.generateAlert(\"success\", \"Create job success.\");\n this.props.history.push(`${this.props.job.id}/profile`);\n } else {\n this.setState({ jobIsUpdating: false });\n this.generateAlert(\"danger\", this.props.jobsError.errData.Message);\n }\n }\n });\n };\n\n render() {\n return (\n \n \n
\n ) : (\n \n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n error: state.auth.error,\n\n jobsLoading: state.job.loading,\n jobsError: state.job.error,\n job: state.job.job,\n jobs: state.job.jobs,\n jobIsUpdating: state.job.isUpdating,\n\n languages: state.language.languages,\n containerConfig: state.config.containerConfig,\n\n personsLoading: state.adminPerson.loading,\n personsDropdown: state.adminPerson.personsDropdown,\n personsError: state.adminPerson.error,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onJob: bindActionCreators(jobActions, dispatch),\n onPerson: bindActionCreators(adminPersonActions, dispatch),\n };\n};\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(ManageJobCreate));\n","import * as jobActions from \"../../../store/actions/jobAction\";\nimport changeInput from \"../../../utils/changeInput\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nclass JobFamilyDetail extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n showDialog: false,\n isUpdating: false,\n form: {},\n isFormValid: false,\n selectedJobFamily: this.props.selectedJobFamily,\n };\n }\n\n componentDidMount() {\n this.prepareFormState();\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n this.prepareFormState();\n }\n\n if (prevProps.selectedJobFamily !== this.props.selectedJobFamily) {\n this.setState({ selectedJobFamily: this.props.selectedJobFamily });\n }\n }\n\n prepareFormState = () => {\n const jobFamily = this.props.selectedJobFamily;\n\n this.setState({\n form: {\n name: {\n validation: {\n required: true,\n },\n value: jobFamily && jobFamily.name ? jobFamily.name : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n isFormValid: jobFamily ? true : false,\n });\n };\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.setState({\n showDialog: !showDialog,\n });\n };\n\n handleChange = (event) => {\n let { name, value } = event.target;\n\n let updateState = changeInput(this.state.form, name, value);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n handlePerformSave = () => {\n const { form } = this.state;\n\n let jobFamily = Object.assign({}, this.props.selectedJobFamily);\n jobFamily.name = form.name.value;\n\n this.setState({ isUpdating: true });\n\n if (!this.props.selectedJobFamily) {\n this.props.onJob.createJobFamily(jobFamily).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.error) {\n this.togleDialogModal();\n } else {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n } else {\n this.props.onJob.updateJobFamily(jobFamily.id, jobFamily).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.error) {\n this.togleDialogModal();\n } else {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n }\n };\n\n render() {\n const { form } = this.state;\n\n return (\n \n \n Requirement Family Detail \n \n \n \n \n \n {\n this.handlePerformSave();\n }}\n disabled={!this.state.isFormValid || this.state.isUpdating}\n >\n Save\n \n {\n this.togleDialogModal();\n }}\n disabled={this.state.isUpdating}\n >\n Cancel\n \n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n error: state.job.error,\n isUpdating: state.job.isUpdating,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onJob: bindActionCreators(jobActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(JobFamilyDetail);\n","import * as authActions from \"../../../store/actions/authAction\";\nimport * as jobActions from \"../../../store/actions/jobAction\";\nimport { dismisAlert, generateAlert } from \"../../../utils/alertUtils\";\nimport { filterArray } from \"../../../utils/filterUtils\";\nimport { generateRandomString } from \"../../../utils/stringUtils\";\nimport { contentTranslator } from \"../../../utils/translatorUtils\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport { SkillsTxTableSearchBar } from \"../../common/SkillsTxTableSearchBar\";\nimport JobFamilyDetail from \"./JobFamilyDetail\";\nimport { faPenToSquare, faPlus, faSync, faMinusCircle, faMinus } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { withRouter } from \"react-router-dom\";\nimport { Button, Col, Modal, ModalBody, ModalHeader, Row, Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nconst headerStyle = {\n color: \"#2B2B2B\",\n fontSize: \"18px\",\n fontFamily: \"IBMPlexSans-Bold\",\n};\n\nclass ManageJobFamily extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: null,\n loading: true,\n alerts: [],\n jobs: [],\n jobFamilies: [],\n showDialogImportTs: null,\n searchProperties: [\"name\"],\n jobFamilyEntries: [],\n showLoadingPanel: false,\n };\n\n this.filterArray = filterArray.bind(this);\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n this.generateRandomString = generateRandomString.bind(this);\n }\n\n componentDidMount() {\n this.props.onAuth.authCheckState().then(() => {\n this.initData();\n });\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.jobs !== this.props.jobs) {\n const jobs = this.props.jobs ? this.props.jobs.filter((it) => !(it.jobFamilyId && it.jobFamilyId != \"\")).sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1)) : null;\n this.setState({\n jobs: [...jobs],\n });\n }\n\n if (prevProps.jobFamilies !== this.props.jobFamilies) {\n const jobFamilies = this.props.jobFamilies ? this.props.jobFamilies.sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1)) : [];\n\n const jobFamiliesSelected = this.state.jobFamiliesSelected;\n\n if (!(jobFamiliesSelected && jobFamiliesSelected.length > 0) && jobFamilies.length > 0) {\n jobFamilies[0].toggleSelected = true;\n const jobFamilySelectedId = jobFamilies[0].id;\n\n this.setState(\n {\n jobFamilies: [...jobFamilies],\n jobFamiliesSelected: [jobFamilySelectedId],\n },\n () => {\n this.handleSelectRow(jobFamilySelectedId);\n }\n );\n } else {\n this.setState({\n jobFamilies: [...jobFamilies],\n });\n }\n }\n }\n\n handleRefresh = () => {\n this.initData();\n };\n\n initData = () => {\n const jobFamiliesSelected = this.state.jobFamiliesSelected;\n let jobFamilySelectedId = null;\n\n if (jobFamiliesSelected && jobFamiliesSelected.length > 0) {\n jobFamilySelectedId = jobFamiliesSelected[0];\n }\n\n Promise.all([this.props.onJob.getJobs(), this.props.onJob.getJobFamilies()]).then(() => {\n const jobs = this.props.jobs ? this.props.jobs.filter((it) => !(it.jobFamilyId && it.jobFamilyId != \"\")).sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1)) : null;\n const jobFamilies = this.props.jobFamilies ? this.props.jobFamilies.sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1)) : [];\n\n if (jobFamilySelectedId) {\n if (!jobFamilies.find((it) => it.id == jobFamilySelectedId)) {\n if (jobFamilies.length > 0) {\n jobFamilySelectedId = jobFamilies[0].id;\n jobFamilies[0].toggleSelected = true;\n }\n } else {\n const jobFamily = jobFamilies.find((it) => it.id == jobFamilySelectedId);\n jobFamily.toggleSelected = true;\n }\n } else {\n if (jobFamilies.length > 0) {\n jobFamilySelectedId = jobFamilies[0].id;\n jobFamilies[0].toggleSelected = true;\n }\n }\n\n this.setState(\n {\n jobs: [...jobs],\n jobFamilies: [...jobFamilies],\n jobFamiliesSelected: jobFamilySelectedId ? [jobFamilySelectedId] : [],\n },\n () => {\n this.handleSelectRow(jobFamilySelectedId);\n }\n );\n\n this.setState({ loading: this.props.loading || this.props.jobsLoading });\n });\n };\n\n handleAddNew = () => {\n this.setState({ showDialogJobFamilyDetailTs: new Date(), selectedJobFamily: null });\n };\n\n handleOnSelect = (row) => {\n if (this.state.isUpdating) {\n return false;\n }\n\n const jobFamilies = this.state.jobFamilies;\n const updatedData = jobFamilies.find((it) => it.id == row.id);\n\n if (!updatedData.toggleSelected) {\n jobFamilies.forEach((it) => {\n it.toggleSelected = false;\n });\n\n updatedData.toggleSelected = true;\n\n this.handleSelectRow(row.id);\n this.setState({ jobFamilies: [...jobFamilies], jobFamiliesSelected: [row.id] });\n }\n };\n\n handleAfterSearch = (searchKeyword) => {\n const { jobFamilies, searchProperties } = this.state;\n const filtered = this.filterArray(jobFamilies, searchKeyword, searchProperties);\n\n jobFamilies.forEach((it) => {\n it.toggleSelected = false;\n });\n\n if (filtered.length > 0) {\n const row = filtered[0];\n const jobFamily = jobFamilies.find((it) => it.id == row.id);\n jobFamily.toggleSelected = true;\n this.handleSelectRow(jobFamily.id);\n this.setState({ jobFamilies: [...jobFamilies], jobFamiliesSelected: [jobFamily.id] });\n } else {\n this.handleSelectRow();\n this.setState({ jobFamilies: [...jobFamilies], jobFamiliesSelected: [] });\n }\n };\n\n handleSelectRow = (jobFamilyId) => {\n const jobFamilies = this.props.jobFamilies;\n\n const { jobFamiliesSelected, jobs } = this.state;\n\n var jobFamilySelected = null;\n\n if (jobFamiliesSelected.length > 0) {\n jobFamilySelected = jobFamiliesSelected[0];\n }\n\n const selectedJobFamily = jobFamilies.find((it) => it.id == jobFamilyId);\n\n if (selectedJobFamily) {\n const jobFamilyEntries = selectedJobFamily.entries ? selectedJobFamily.entries : [];\n\n jobFamilyEntries.forEach((it) => {\n it.toggleSelected = false;\n });\n\n jobs.forEach((it) => {\n it.toggleSelected = false;\n });\n\n this.setState({\n jobFamilyEntries,\n jobFamilyEntriesDeleteSelected: [],\n jobs: jobs.sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1)),\n jobsSelected: [],\n });\n }\n };\n\n handleEditJobFamily = (jobFamily) => {\n this.setState({ showDialogJobFamilyDetailTs: new Date(), selectedJobFamily: jobFamily });\n };\n\n handleDeleteJobFamily = (jobFamily) => {\n if (window.confirm(\"Are you sure want to delete the job family?\")) {\n this.setState({ isUpdating: true, showLoadingPanel: true, loadingPanelHeader: \"Delete requirement family\", loadingPanelBody: \"Please wait...\" });\n\n this.props.onJob.deleteJobFamily(jobFamily.id).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.jobsError) {\n let jobFamilySelectedId = null;\n const jobs = this.props.jobs ? this.props.jobs.filter((it) => !(it.jobFamilyId && it.jobFamilyId != \"\")).sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1)) : null;\n\n jobs.forEach((it) => {\n it.toggleSelected = false;\n });\n\n const jobFamilies = this.props.jobFamilies ? this.props.jobFamilies.sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1)) : [];\n if (jobFamilies.length > 0) {\n jobFamilySelectedId = jobFamilies[0].id;\n jobFamilies[0].toggleSelected = true;\n }\n\n this.setState(\n {\n jobs: [...jobs],\n jobFamilies: jobFamilies,\n jobFamiliesSelected: jobFamilySelectedId ? [jobFamilySelectedId] : [],\n jobFamilyEntries: [],\n },\n () => {\n this.handleSelectRow(jobFamilySelectedId);\n }\n );\n\n this.generateAlert(\"success\", \"Requirement Family Deleted.\");\n } else {\n this.generateAlert(\"danger\", this.props.jobsError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating, showLoadingPanel: this.props.isUpdating });\n });\n }\n };\n\n handleOnSelectDeleteEntry = (row) => {\n const pageAssignments = this.props.pageAssignments;\n const pageAssignment = pageAssignments.find((it) => it.pageName == \"Manage Requirement Families\");\n const allowEdit = pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Edit\" && op.allow == true) ? true : false;\n\n if (this.state.isUpdating || !allowEdit) {\n return false;\n }\n\n const { jobFamilyEntries } = this.state;\n let jobFamilyEntriesDeleteSelected = this.state.jobFamilyEntriesDeleteSelected;\n\n if (jobFamilyEntriesDeleteSelected) {\n const jobFamilyEntry = jobFamilyEntries.find((it) => it.id == row.id);\n if (jobFamilyEntriesDeleteSelected.find((it) => it == row.jobId)) {\n jobFamilyEntry.toggleSelected = false;\n\n const jobFamilyEntryDeleteSelected = jobFamilyEntriesDeleteSelected.find((it) => it == row.jobId);\n var index = jobFamilyEntriesDeleteSelected.indexOf(jobFamilyEntryDeleteSelected);\n if (index !== -1) {\n jobFamilyEntriesDeleteSelected.splice(index, 1);\n }\n } else {\n jobFamilyEntry.toggleSelected = true;\n jobFamilyEntriesDeleteSelected = [...jobFamilyEntriesDeleteSelected, row.jobId];\n }\n } else {\n const jobFamilyEntry = jobFamilyEntries.find((it) => it.id == row.id);\n jobFamilyEntry.toggleSelected = true;\n jobFamilyEntriesDeleteSelected = [jobFamilyEntry.jobId];\n }\n\n this.setState({ jobFamilyEntries: [...jobFamilyEntries], jobFamilyEntriesDeleteSelected: [...jobFamilyEntriesDeleteSelected] });\n };\n\n handleDeleteJobFamilyEntries = () => {\n const jobFamilies = this.props.jobFamilies;\n const { jobFamiliesSelected, jobFamilyEntriesDeleteSelected } = this.state;\n let jobFamiliySelectedId = null;\n\n if (jobFamiliesSelected && jobFamiliesSelected.length > 0) {\n jobFamiliySelectedId = jobFamiliesSelected[0];\n }\n\n const selectedJobFamily = jobFamilies.find((it) => it.id == jobFamiliySelectedId);\n\n if (selectedJobFamily) {\n this.setState({ isUpdating: true, showLoadingPanel: true, loadingPanelHeader: \"Delete requirement family entries\", loadingPanelBody: \"Please wait...\" });\n const deletedJobIds = [...jobFamilyEntriesDeleteSelected];\n\n this.props.onJob.updateJobFamilyDeleteEntries(selectedJobFamily.id, deletedJobIds).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.jobsError) {\n this.setState(\n {\n jobFamilies: this.props.jobFamilies ? this.props.jobFamilies.sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1)) : [],\n jobFamilyEntriesDeleteSelected: [],\n },\n () => {\n this.handleSelectRow(selectedJobFamily.id);\n }\n );\n\n this.generateAlert(\"success\", \"Requirement Family Entries Deleted.\");\n } else {\n this.generateAlert(\"danger\", this.props.jobsError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating, showLoadingPanel: this.props.isUpdating });\n });\n }\n };\n\n handleOnSelectJob = (row) => {\n const pageAssignments = this.props.pageAssignments;\n const pageAssignment = pageAssignments.find((it) => it.pageName == \"Manage Requirement Families\");\n const allowEdit = pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Edit\" && op.allow == true) ? true : false;\n\n if (this.state.isUpdating || !allowEdit) {\n return false;\n }\n\n const { jobs } = this.state;\n let jobsSelected = this.state.jobsSelected;\n\n if (jobsSelected) {\n const job = jobs.find((it) => it.id == row.id);\n if (jobsSelected.find((it) => it == row.id)) {\n job.toggleSelected = false;\n\n const jobSelected = jobsSelected.find((it) => it == row.id);\n var index = jobsSelected.indexOf(jobSelected);\n if (index !== -1) {\n jobsSelected.splice(index, 1);\n }\n } else {\n job.toggleSelected = true;\n jobsSelected = [...jobsSelected, row.id];\n }\n } else {\n const job = jobs.find((it) => it.id == row.id);\n job.toggleSelected = true;\n jobsSelected = [row.id];\n }\n\n this.setState({ jobs: [...jobs.sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1))], jobsSelected: [...jobsSelected] });\n };\n\n handleAddJobFamilyEntries = () => {\n const jobFamilies = this.props.jobFamilies;\n const { jobFamiliesSelected, jobsSelected } = this.state;\n let jobFamiliySelectedId = null;\n\n if (jobFamiliesSelected && jobFamiliesSelected.length > 0) {\n jobFamiliySelectedId = jobFamiliesSelected[0];\n }\n\n const selectedJobFamily = jobFamilies.find((it) => it.id == jobFamiliySelectedId);\n\n if (selectedJobFamily) {\n this.setState({ isUpdating: true, showLoadingPanel: true, loadingPanelHeader: \"Add requirement family entries\", loadingPanelBody: \"Please wait...\" });\n const addedJobIds = [...jobsSelected];\n\n this.props.onJob.updateJobFamilyAddEntries(selectedJobFamily.id, addedJobIds).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.jobsError) {\n this.setState(\n {\n jobFamilies: this.props.jobFamilies ? this.props.jobFamilies.sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1)) : [],\n jobsSelected: [],\n },\n () => {\n this.handleSelectRow(selectedJobFamily.id);\n }\n );\n\n this.generateAlert(\"success\", \"Requirement Family Entries Added.\");\n } else {\n this.generateAlert(\"danger\", this.props.jobsError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating, showLoadingPanel: this.props.isUpdating });\n });\n }\n };\n\n renderLoadingPanel() {\n if (this.state.showLoadingPanel) {\n return (\n \n {this.state.loadingPanelHeader} \n \n \n \n );\n } else {\n return \"\";\n }\n }\n\n render() {\n const pageAssignments = this.props.pageAssignments;\n const pageAssignment = pageAssignments.find((it) => it.pageName == \"Manage Requirement Families\");\n const allowAdd = pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Add\" && op.allow == true) ? true : false;\n const allowEdit = pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Edit\" && op.allow == true) ? true : false;\n const allowDelete = pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Delete\" && op.allow == true) ? true : false;\n\n const handleOnSelect = this.handleOnSelect;\n const handleEditJobFamily = this.handleEditJobFamily;\n const handleDeleteJobFamily = this.handleDeleteJobFamily;\n\n const handleOnSelectDeleteEntry = this.handleOnSelectDeleteEntry;\n const handleOnSelectJob = this.handleOnSelectJob;\n\n const columns = [\n {\n id: \"id\",\n name: \"Action\",\n selector: (row) => row.id,\n sortable: false,\n width: \"20%\",\n style: { cursor: \"pointer\" },\n format: function (row) {\n return (\n \n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Edit\" && op.allow == true) && (\n \n handleEditJobFamily(row)} />\n \n \n )}\n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Delete\" && op.allow == true) && (\n \n handleDeleteJobFamily(row)} />\n \n )}\n
\n );\n },\n omit: !allowEdit && !allowDelete,\n },\n {\n id: \"name\",\n name: \"Job Family\",\n selector: (row) => row.name,\n sortable: false,\n width: allowEdit || allowDelete ? \"80%\" : \"100%\",\n style: { cursor: \"pointer\" },\n format: function (row) {\n return (\n handleOnSelect(row)}>\n {`${row.name}`} \n
\n );\n },\n },\n ];\n\n const columnsEntries = [\n {\n id: \"jobId\",\n name: \"JobId\",\n selector: (row) => row.jobId,\n sortable: false,\n width: \"100%\",\n style: { cursor: \"pointer\" },\n format: function (row) {\n return (\n handleOnSelectDeleteEntry(row)}>\n \n {row.jobName}\n {row.jobReference && row.jobReference != \"\" ? (\n \n \n ) : (\n \"\"\n )}\n \n
\n );\n },\n },\n ];\n\n const columnsJob = [\n {\n id: \"id\",\n name: \"id\",\n selector: (row) => row.id,\n sortable: false,\n width: \"100%\",\n style: { cursor: \"pointer\" },\n format: function (row) {\n return (\n handleOnSelectJob(row)}>\n \n {row.name}\n {row.reference && row.reference != \"\" ? (\n \n \n ) : (\n \"\"\n )}\n \n
\n );\n },\n },\n ];\n\n return (\n \n \n
\n ) : (\n \n \n
\n \n \n \n \n )}\n \n
\n
\n
\n \n Requirement Families\n
\n \n
\n {\n this.setState({ searchKeywordLevel1 });\n this.handleAfterSearch(searchKeywordLevel1);\n }}\n >\n \n
\n
\n \n
\n
\n Requirement Entry\n
\n \n
\n {\n this.setState({ searchKeywordLevel3 });\n }}\n >\n \n
\n
\n \n
\n
0) || this.state.isUpdating}\n >\n \n
\n \n )}\n \n \n Select requirement :\n
\n \n
\n {\n this.setState({ searchKeywordLevel2 });\n }}\n >\n \n
\n
\n \n
\n
0 && this.state.jobsSelected && this.state.jobsSelected.length > 0) || this.state.isUpdating}\n >\n \n
\n \n )}\n \n
\n
\n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n error: state.auth.error,\n authPersonId: state.auth.personId,\n\n jobsLoading: state.job.loading,\n jobsError: state.job.error,\n jobs: state.job.jobs,\n jobFamilies: state.job.jobFamilies,\n\n pageAssignments: state.adminPerson.pageAssignments,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onJob: bindActionCreators(jobActions, dispatch),\n };\n};\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(ManageJobFamily));\n","import ErrorHandler from \"./../errorResponseHandler\";\nimport Instance from \"./AxiosInstance\";\n\nexport const axios = Instance.apiInstance();\n\nclass CategoryAPI {\n static getExtraFrameworkLevels() {\n return axios\n .get(`/categories/extraFrameworkLevels`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static getExtraFrameworkCapabilities() {\n return axios\n .get(`/categories/extraFrameworkCapabilities`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static getCategories(includeAccountAttributes, languageId) {\n return axios\n .get(`/categories?includeAccountAttributes=${includeAccountAttributes ? \"true\" : \"false\"}${languageId ? `&languageId=${languageId}` : \"\"}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static addSkillAttribute(categoryId, subCategoryId, skillId, attribute) {\n return axios\n .post(`/categories/${categoryId}/${subCategoryId}/${skillId}/attributes`, attribute)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateSkillAttribute(categoryId, subCategoryId, skillId, attributeId, attribute) {\n return axios\n .put(`/categories/${categoryId}/${subCategoryId}/${skillId}/attributes/${attributeId}`, attribute)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static deleteSkillAttribute(categoryId, subCategoryId, skillId, attributeId) {\n return axios\n .delete(`/categories/${categoryId}/${subCategoryId}/${skillId}/attributes/${attributeId}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateSkillIsHidden(categoryId, subCategoryId, skillId, isHidden) {\n return axios\n .post(`/categories/${categoryId}/${subCategoryId}/${skillId}/updateIsHidden?isHidden=${isHidden ? true : false}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static exportSkillsHiddenDataExcel() {\n return axios\n .get(`/categories/exportskillshidden`, {\n responseType: \"blob\",\n })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n console.log(\"err\", err);\n throw ErrorHandler(err);\n });\n }\n\n static importSkillsHiddenDataExcel(skillsHiddenData) {\n const config = {\n headers: {\n \"content-type\": \"multipart/form-data\",\n },\n };\n\n const body = new FormData();\n body.append(\"ContentDisposition\", \"attachment\");\n body.append(\"ContentType\", \"multipart/form-data\");\n\n body.append(\"skillsHiddenData\", skillsHiddenData);\n\n return axios\n .post(`/categories/importskillsHidden`, body, config)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static exportSkillAttributesDataExcel() {\n return axios\n .get(`/categories/exportskillattributes`, {\n responseType: \"blob\",\n })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n console.log(\"err\", err);\n throw ErrorHandler(err);\n });\n }\n\n static exportSkillAttributesDataExcelTemplate() {\n return axios\n .get(`/categories/exportskillattributestemplate`, {\n responseType: \"blob\",\n })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n console.log(\"err\", err);\n throw ErrorHandler(err);\n });\n }\n\n static importAttributesDataExcel(attributesData) {\n const config = {\n headers: {\n \"content-type\": \"multipart/form-data\",\n },\n };\n\n const body = new FormData();\n body.append(\"ContentDisposition\", \"attachment\");\n body.append(\"ContentType\", \"multipart/form-data\");\n\n attributesData.forEach((file) => {\n body.append(\"attributesData\", file);\n });\n\n return axios\n .post(`/categories/importskillattributes`, body, config)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n}\n\nexport default CategoryAPI;\n","import CategoryAPI from \"./../../common/api/service/CategoryService\";\nimport * as actionTypes from \"./actionTypes\";\n\nexport const getExtraFrameworkCapabilitiesStart = () => {\n return {\n type: actionTypes.GET_EXTRAFRAMEWORK_CAPABILITIES_START,\n };\n};\n\nexport const getExtraFrameworkCapabilitiesSuccess = (extraFrameworkCapabilities) => {\n return {\n type: actionTypes.GET_EXTRAFRAMEWORK_CAPABILITIES_SUCCESS,\n extraFrameworkCapabilities,\n };\n};\n\nexport const getExtraFrameworkCapabilitiesFail = (error) => {\n return {\n type: actionTypes.GET_EXTRAFRAMEWORK_CAPABILITIES_FAIL,\n error: error,\n };\n};\n\nexport const getExtraFrameworkCapabilities = () => {\n return (dispatch) => {\n dispatch(getExtraFrameworkCapabilitiesStart());\n\n return CategoryAPI.getExtraFrameworkCapabilities()\n .then((res) => {\n if (res) {\n dispatch(getExtraFrameworkCapabilitiesSuccess(res));\n } else {\n dispatch(getExtraFrameworkCapabilitiesFail(res));\n }\n })\n .catch((err) => {\n dispatch(getExtraFrameworkCapabilitiesFail(err));\n });\n };\n};\n\nexport const getExtraFrameworkLevelsStart = () => {\n return {\n type: actionTypes.GET_EXTRAFRAMEWORK_LEVELS_START,\n };\n};\n\nexport const getExtraFrameworkLevelsSuccess = (extraFrameworkLevels) => {\n return {\n type: actionTypes.GET_EXTRAFRAMEWORK_LEVELS_SUCCESS,\n extraFrameworkLevels,\n };\n};\n\nexport const getExtraFrameworkLevelsFail = (error) => {\n return {\n type: actionTypes.GET_EXTRAFRAMEWORK_LEVELS_FAIL,\n error: error,\n };\n};\n\nexport const getExtraFrameworkLevels = () => {\n return (dispatch) => {\n dispatch(getExtraFrameworkLevelsStart());\n\n return CategoryAPI.getExtraFrameworkLevels()\n .then((res) => {\n if (res) {\n dispatch(getExtraFrameworkLevelsSuccess(res));\n } else {\n dispatch(getExtraFrameworkLevelsFail(res));\n }\n })\n .catch((err) => {\n dispatch(getExtraFrameworkLevelsFail(err));\n });\n };\n};\n\nexport const getCategoriesStart = () => {\n return {\n type: actionTypes.GET_CATEGORIES_START,\n };\n};\n\nexport const getCategoriesSuccess = (categories) => {\n return {\n type: actionTypes.GET_CATEGORIES_SUCCESS,\n categories,\n };\n};\n\nexport const getCategoriesFail = (error) => {\n return {\n type: actionTypes.GET_CATEGORIES_FAIL,\n error: error,\n };\n};\n\nexport const getCategories = (includeAccountAttributes, languageId) => {\n return (dispatch) => {\n dispatch(getCategoriesStart());\n\n return CategoryAPI.getCategories(includeAccountAttributes, languageId)\n .then((res) => {\n if (res) {\n dispatch(getCategoriesSuccess(res));\n } else {\n dispatch(getCategoriesFail(res));\n }\n })\n .catch((err) => {\n dispatch(getCategoriesFail(err));\n });\n };\n};\n\nexport const addSkillAttributeStart = () => {\n return {\n type: actionTypes.ADD_SKILL_ATTRIBUTE_DATA_START,\n };\n};\n\nexport const addSkillAttributeSuccess = (categoryId, subCategoryId, skillId, addedAttribute) => {\n return {\n type: actionTypes.ADD_SKILL_ATTRIBUTE_DATA_SUCCESS,\n categoryId,\n subCategoryId,\n skillId,\n addedAttribute,\n };\n};\n\nexport const addSkillAttributeFail = (error) => {\n return {\n type: actionTypes.ADD_SKILL_ATTRIBUTE_DATA_FAIL,\n error: error,\n };\n};\n\nexport const addSkillAttribute = (categoryId, subCategoryId, skillId, attribute) => {\n return (dispatch) => {\n dispatch(addSkillAttributeStart());\n\n return CategoryAPI.addSkillAttribute(categoryId, subCategoryId, skillId, attribute)\n .then((res) => {\n if (res) {\n dispatch(addSkillAttributeSuccess(categoryId, subCategoryId, skillId, res));\n } else {\n dispatch(addSkillAttributeFail(res));\n }\n })\n .catch((err) => {\n dispatch(addSkillAttributeFail(err));\n });\n };\n};\n\nexport const updateSkillAttributeStart = () => {\n return {\n type: actionTypes.UPDATE_SKILL_ATTRIBUTE_DATA_START,\n };\n};\n\nexport const updateSkillAttributeSuccess = (categoryId, subCategoryId, skillId, updatedAttribute) => {\n return {\n type: actionTypes.UPDATE_SKILL_ATTRIBUTE_DATA_SUCCESS,\n categoryId,\n subCategoryId,\n skillId,\n updatedAttribute,\n };\n};\n\nexport const updateSkillAttributeFail = (error) => {\n return {\n type: actionTypes.UPDATE_SKILL_ATTRIBUTE_DATA_FAIL,\n error: error,\n };\n};\n\nexport const updateSkillAttribute = (categoryId, subCategoryId, skillId, attributeId, attribute) => {\n return (dispatch) => {\n dispatch(updateSkillAttributeStart());\n\n return CategoryAPI.updateSkillAttribute(categoryId, subCategoryId, skillId, attributeId, attribute)\n .then((res) => {\n if (res) {\n dispatch(updateSkillAttributeSuccess(categoryId, subCategoryId, skillId, res));\n } else {\n dispatch(updateSkillAttributeFail(res));\n }\n })\n .catch((err) => {\n dispatch(updateSkillAttributeFail(err));\n });\n };\n};\n\nexport const deleteSkillAttributeStart = () => {\n return {\n type: actionTypes.DELETE_SKILL_ATTRIBUTE_DATA_START,\n };\n};\n\nexport const deleteSkillAttributeSuccess = (categoryId, subCategoryId, skillId, deletedAttributeId) => {\n return {\n type: actionTypes.DELETE_SKILL_ATTRIBUTE_DATA_SUCCESS,\n categoryId,\n subCategoryId,\n skillId,\n deletedAttributeId,\n };\n};\n\nexport const deleteSkillAttributeFail = (error) => {\n return {\n type: actionTypes.DELETE_SKILL_ATTRIBUTE_DATA_FAIL,\n error: error,\n };\n};\n\nexport const deleteSkillAttribute = (categoryId, subCategoryId, skillId, attributeId) => {\n return (dispatch) => {\n dispatch(deleteSkillAttributeStart());\n\n return CategoryAPI.deleteSkillAttribute(categoryId, subCategoryId, skillId, attributeId)\n .then((res) => {\n if (res) {\n dispatch(deleteSkillAttributeSuccess(categoryId, subCategoryId, skillId, attributeId));\n } else {\n dispatch(deleteSkillAttributeFail(res));\n }\n })\n .catch((err) => {\n dispatch(deleteSkillAttributeFail(err));\n });\n };\n};\n\nexport const updateSkillSetIsHiddenStart = () => {\n return {\n type: actionTypes.UPDATE_SKILL_SET_ISHIDDEN_START,\n };\n};\n\nexport const updateSkillSetIsHiddenSuccess = (categoryId, subCategoryId, skillId, isHidden) => {\n return {\n type: actionTypes.UPDATE_SKILL_SET_ISHIDDEN_SUCCESS,\n categoryId,\n subCategoryId,\n skillId,\n isHidden,\n };\n};\n\nexport const updateSkillSetIsHiddenFail = (error) => {\n return {\n type: actionTypes.UPDATE_SKILL_SET_ISHIDDEN_FAIL,\n error: error,\n };\n};\n\nexport const updateSkillSetIsHidden = (categoryId, subCategoryId, skillId, isHidden) => {\n return (dispatch) => {\n dispatch(updateSkillSetIsHiddenStart());\n\n return CategoryAPI.updateSkillIsHidden(categoryId, subCategoryId, skillId, isHidden)\n .then((res) => {\n if (res) {\n dispatch(updateSkillSetIsHiddenSuccess(categoryId, subCategoryId, skillId, isHidden));\n } else {\n dispatch(updateSkillSetIsHiddenFail(res));\n }\n })\n .catch((err) => {\n dispatch(updateSkillSetIsHiddenFail(err));\n });\n };\n};\n\nexport const exportSkillAttributesDataExcelStart = () => {\n return {\n type: actionTypes.EXPORT_SKILL_ATTRIBUTES_DATA_START,\n };\n};\n\nexport const exportSkillAttributesDataExcelSuccess = (exportData) => {\n return {\n type: actionTypes.EXPORT_SKILL_ATTRIBUTES_DATA_SUCCESS,\n exportData,\n };\n};\n\nexport const exportSkillAttributesDataExcelFail = (error) => {\n return {\n type: actionTypes.EXPORT_SKILL_ATTRIBUTES_DATA_FAIL,\n error: error,\n };\n};\n\nexport const exportSkillAttributesDataExcel = () => {\n return (dispatch) => {\n dispatch(exportSkillAttributesDataExcelStart());\n\n return CategoryAPI.exportSkillAttributesDataExcel()\n .then((res) => {\n dispatch(exportSkillAttributesDataExcelSuccess(res));\n })\n .catch((err) => {\n dispatch(exportSkillAttributesDataExcelFail(err));\n });\n };\n};\n\nexport const exportSkillAttributesDataExcelTemplate = () => {\n return (dispatch) => {\n dispatch(exportSkillAttributesDataExcelStart());\n\n return CategoryAPI.exportSkillAttributesDataExcelTemplate()\n .then((res) => {\n dispatch(exportSkillAttributesDataExcelSuccess(res));\n })\n .catch((err) => {\n dispatch(exportSkillAttributesDataExcelFail(err));\n });\n };\n};\n\nexport const importSkillAttributesDataExcelStart = () => {\n return {\n type: actionTypes.IMPORT_SKILL_ATTRIBUTES_DATA_START,\n };\n};\n\nexport const importSkillAttributesDataExcelSuccess = () => {\n return {\n type: actionTypes.IMPORT_SKILL_ATTRIBUTES_DATA_SUCCESS,\n };\n};\n\nexport const importSkillAttributesDataExcelFail = (error) => {\n return {\n type: actionTypes.IMPORT_SKILL_ATTRIBUTES_DATA_FAIL,\n error: error,\n };\n};\n\nexport const importSkillAttributesDataExcel = (attributesData) => {\n return (dispatch) => {\n dispatch(importSkillAttributesDataExcelStart());\n\n return CategoryAPI.importAttributesDataExcel(attributesData)\n .then((res) => {\n dispatch(importSkillAttributesDataExcelSuccess(res));\n })\n .catch((err) => {\n dispatch(importSkillAttributesDataExcelFail(err));\n });\n };\n};\n\nexport const exportSkillsHiddenDataExcelStart = () => {\n return {\n type: actionTypes.EXPORT_SKILLS_HIDDEN_DATA_START,\n };\n};\n\nexport const exportSkillsHiddenDataExcelSuccess = (exportData) => {\n return {\n type: actionTypes.EXPORT_SKILLS_HIDDEN_DATA_SUCCESS,\n exportData,\n };\n};\n\nexport const exportSkillsHiddenDataExcelFail = (error) => {\n return {\n type: actionTypes.EXPORT_SKILLS_HIDDEN_DATA_FAIL,\n error: error,\n };\n};\n\nexport const exportSkillsHiddenDataExcel = () => {\n return (dispatch) => {\n dispatch(exportSkillsHiddenDataExcelStart());\n\n return CategoryAPI.exportSkillsHiddenDataExcel()\n .then((res) => {\n dispatch(exportSkillsHiddenDataExcelSuccess(res));\n })\n .catch((err) => {\n dispatch(exportSkillsHiddenDataExcelFail(err));\n });\n };\n};\n\nexport const importSkillsHiddenDataExcelStart = () => {\n return {\n type: actionTypes.IMPORT_SKILLS_HIDDEN_DATA_START,\n };\n};\n\nexport const importSkillsHiddenDataExcelSuccess = () => {\n return {\n type: actionTypes.IMPORT_SKILLS_HIDDEN_DATA_SUCCESS,\n };\n};\n\nexport const importSkillsHiddenDataExcelFail = (error) => {\n return {\n type: actionTypes.IMPORT_SKILLS_HIDDEN_DATA_FAIL,\n error: error,\n };\n};\n\nexport const importSkillsHiddenDataExcel = (skillsHiddenData) => {\n return (dispatch) => {\n dispatch(importSkillsHiddenDataExcelStart());\n\n return CategoryAPI.importSkillsHiddenDataExcel(skillsHiddenData)\n .then((res) => {\n dispatch(importSkillsHiddenDataExcelSuccess(res));\n })\n .catch((err) => {\n dispatch(importSkillsHiddenDataExcelFail(err));\n });\n };\n};","import ErrorHandler from \"./../errorResponseHandler\";\nimport Instance from \"./AxiosInstance\";\n\nexport const axios = Instance.apiInstance();\n\nclass LorAPI {\n static getLors() {\n return axios\n .get(`/lors`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateLor(id, lor) {\n return axios\n .put(`/lors/${id}`, lor)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateLorIsHidden(id, isHidden) {\n return axios\n .post(`/lors/${id}/updateIsHidden?isHidden=${isHidden ? true : false}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateLorOptional(id, optional) {\n return axios\n .post(`/lors/${id}/updateOptional?optional=${optional ? true : false}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static addLorAttribute(lorId, attribute) {\n return axios\n .post(`/lors/${lorId}/attributes`, attribute)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateLorAttribute(lorId, attributeId, attribute) {\n return axios\n .put(`/lors/${lorId}/attributes/${attributeId}`, attribute)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static deleteLorAttribute(lorId, attributeId) {\n return axios\n .delete(`/lors/${lorId}/attributes/${attributeId}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static exportLorAttributesDataExcel() {\n return axios\n .get(`/lors/exportlorattributes`, {\n responseType: \"blob\",\n })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n console.log(\"err\", err);\n throw ErrorHandler(err);\n });\n }\n\n static exportLorAttributesDataExcelTemplate() {\n return axios\n .get(`/lors/exportlorattributestemplate`, {\n responseType: \"blob\",\n })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n console.log(\"err\", err);\n throw ErrorHandler(err);\n });\n }\n\n static importLorAttributesDataExcel(attributesData) {\n const config = {\n headers: {\n \"content-type\": \"multipart/form-data\",\n },\n };\n\n const body = new FormData();\n body.append(\"ContentDisposition\", \"attachment\");\n body.append(\"ContentType\", \"multipart/form-data\");\n\n attributesData.forEach((file) => {\n body.append(\"attributesData\", file);\n });\n\n return axios\n .post(`/lors/importlorattributes`, body, config)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n}\n\nexport default LorAPI;\n","import LorAPI from \"./../../common/api/service/LorService\";\nimport * as actionTypes from \"./actionTypes\";\n\nexport const getLorsStart = () => {\n return {\n type: actionTypes.GET_LORS_START,\n };\n};\n\nexport const getLorsSuccess = (lors) => {\n return {\n type: actionTypes.GET_LORS_SUCCESS,\n lors,\n };\n};\n\nexport const getLorsFail = (error) => {\n return {\n type: actionTypes.GET_LORS_FAIL,\n error: error,\n };\n};\n\nexport const getLors = () => {\n return (dispatch) => {\n dispatch(getLorsStart());\n\n return LorAPI.getLors()\n .then((res) => {\n if (res) {\n dispatch(getLorsSuccess(res));\n } else {\n dispatch(getLorsFail(res));\n }\n })\n .catch((err) => {\n dispatch(getLorsFail(err));\n });\n };\n};\n\nexport const updateLorStart = () => {\n return {\n type: actionTypes.UPDATE_LOR_START,\n };\n};\n\nexport const updateLorSuccess = (lor) => {\n return {\n type: actionTypes.UPDATE_LOR_SUCCESS,\n lor,\n };\n};\n\nexport const updateLorFail = (error) => {\n return {\n type: actionTypes.UPDATE_LOR_FAIL,\n error: error,\n };\n};\n\nexport const updateLor = (id, lor) => {\n return (dispatch) => {\n dispatch(updateLorStart());\n\n return LorAPI.updateLor(id, lor)\n .then((res) => {\n if (res) {\n dispatch(updateLorSuccess(res));\n } else {\n dispatch(updateLorFail(res));\n }\n })\n .catch((err) => {\n dispatch(updateLorFail(err));\n });\n };\n};\n\nexport const updateLorSetIsHiddenStart = () => {\n return {\n type: actionTypes.UPDATE_LOR_SET_ISHIDDEN_START,\n };\n};\n\nexport const updateLorSetIsHiddenSuccess = (id, isHidden) => {\n return {\n type: actionTypes.UPDATE_LOR_SET_ISHIDDEN_SUCCESS,\n id,\n isHidden,\n };\n};\n\nexport const updateLorSetOptionalSuccess = (id, optional) => {\n return {\n type: actionTypes.UPDATE_LOR_SET_OPTIONAL_SUCCESS,\n id,\n optional,\n };\n};\n\nexport const updateLorSetIsHiddenFail = (error) => {\n return {\n type: actionTypes.UPDATE_LOR_SET_ISHIDDEN_FAIL,\n error: error,\n };\n};\n\nexport const updateLorSetIsHidden = (id, isHidden) => {\n return (dispatch) => {\n dispatch(updateLorSetIsHiddenStart());\n\n return LorAPI.updateLorIsHidden(id, isHidden)\n .then((res) => {\n if (res) {\n dispatch(updateLorSetIsHiddenSuccess(id, isHidden));\n } else {\n dispatch(updateLorSetIsHiddenFail(res));\n }\n })\n .catch((err) => {\n dispatch(updateLorSetIsHiddenFail(err));\n });\n };\n};\n\nexport const updateLorSetOptional = (id, optional) => {\n return (dispatch) => {\n dispatch(updateLorSetIsHiddenStart());\n\n return LorAPI.updateLorOptional(id, optional)\n .then((res) => {\n if (res) {\n dispatch(updateLorSetOptionalSuccess(id, optional));\n } else {\n dispatch(updateLorSetIsHiddenFail(res));\n }\n })\n .catch((err) => {\n dispatch(updateLorSetIsHiddenFail(err));\n });\n };\n};\n\nexport const addLorAttributeStart = () => {\n return {\n type: actionTypes.ADD_LOR_ATTRIBUTE_DATA_START,\n };\n};\n\nexport const addLorAttributeSuccess = (lorId, addedAttribute) => {\n return {\n type: actionTypes.ADD_LOR_ATTRIBUTE_DATA_SUCCESS,\n lorId,\n addedAttribute,\n };\n};\n\nexport const addLorAttributeFail = (error) => {\n return {\n type: actionTypes.ADD_LOR_ATTRIBUTE_DATA_FAIL,\n error: error,\n };\n};\n\nexport const addLorAttribute = (lorId, attribute) => {\n return (dispatch) => {\n dispatch(addLorAttributeStart());\n\n return LorAPI.addLorAttribute(lorId, attribute)\n .then((res) => {\n if (res) {\n dispatch(addLorAttributeSuccess(lorId, res));\n } else {\n dispatch(addLorAttributeFail(res));\n }\n })\n .catch((err) => {\n dispatch(addLorAttributeFail(err));\n });\n };\n};\n\nexport const updateLorAttributeStart = () => {\n return {\n type: actionTypes.UPDATE_LOR_ATTRIBUTE_DATA_START,\n };\n};\n\nexport const updateLorAttributeSuccess = (lorId, updatedAttribute) => {\n return {\n type: actionTypes.UPDATE_LOR_ATTRIBUTE_DATA_SUCCESS,\n lorId,\n updatedAttribute,\n };\n};\n\nexport const updateLorAttributeFail = (error) => {\n return {\n type: actionTypes.UPDATE_LOR_ATTRIBUTE_DATA_FAIL,\n error: error,\n };\n};\n\nexport const updateLorAttribute = (lorId, attributeId, attribute) => {\n return (dispatch) => {\n dispatch(updateLorAttributeStart());\n\n return LorAPI.updateLorAttribute(lorId, attributeId, attribute)\n .then((res) => {\n if (res) {\n dispatch(updateLorAttributeSuccess(lorId, res));\n } else {\n dispatch(updateLorAttributeFail(res));\n }\n })\n .catch((err) => {\n dispatch(updateLorAttributeFail(err));\n });\n };\n};\n\nexport const deleteLorAttributeStart = () => {\n return {\n type: actionTypes.DELETE_LOR_ATTRIBUTE_DATA_START,\n };\n};\n\nexport const deleteLorAttributeSuccess = (lorId, deletedAttributeId) => {\n return {\n type: actionTypes.DELETE_LOR_ATTRIBUTE_DATA_SUCCESS,\n lorId,\n deletedAttributeId,\n };\n};\n\nexport const deleteLorAttributeFail = (error) => {\n return {\n type: actionTypes.DELETE_LOR_ATTRIBUTE_DATA_FAIL,\n error: error,\n };\n};\n\nexport const deleteLorAttribute = (lorId, attributeId) => {\n return (dispatch) => {\n dispatch(deleteLorAttributeStart());\n\n return LorAPI.deleteLorAttribute(lorId, attributeId)\n .then((res) => {\n if (res) {\n dispatch(deleteLorAttributeSuccess(lorId, attributeId));\n } else {\n dispatch(deleteLorAttributeFail(res));\n }\n })\n .catch((err) => {\n dispatch(deleteLorAttributeFail(err));\n });\n };\n};\n\nexport const exportLorAttributesDataExcelStart = () => {\n return {\n type: actionTypes.EXPORT_LOR_ATTRIBUTES_DATA_START,\n };\n};\n\nexport const exportLorAttributesDataExcelSuccess = (exportData) => {\n return {\n type: actionTypes.EXPORT_LOR_ATTRIBUTES_DATA_SUCCESS,\n exportData,\n };\n};\n\nexport const exportLorAttributesDataExcelFail = (error) => {\n return {\n type: actionTypes.EXPORT_LOR_ATTRIBUTES_DATA_FAIL,\n error: error,\n };\n};\n\nexport const exportLorAttributesDataExcel = () => {\n return (dispatch) => {\n dispatch(exportLorAttributesDataExcelStart());\n\n return LorAPI.exportLorAttributesDataExcel()\n .then((res) => {\n dispatch(exportLorAttributesDataExcelSuccess(res));\n })\n .catch((err) => {\n dispatch(exportLorAttributesDataExcelFail(err));\n });\n };\n};\n\nexport const exportLorAttributesDataExcelTemplate = () => {\n return (dispatch) => {\n dispatch(exportLorAttributesDataExcelStart());\n\n return LorAPI.exportLorAttributesDataExcelTemplate()\n .then((res) => {\n dispatch(exportLorAttributesDataExcelSuccess(res));\n })\n .catch((err) => {\n dispatch(exportLorAttributesDataExcelFail(err));\n });\n };\n};\n\nexport const importLorAttributesDataExcelStart = () => {\n return {\n type: actionTypes.IMPORT_LOR_ATTRIBUTES_DATA_START,\n };\n};\n\nexport const importLorAttributesDataExcelSuccess = () => {\n return {\n type: actionTypes.IMPORT_LOR_ATTRIBUTES_DATA_SUCCESS,\n };\n};\n\nexport const importLorAttributesDataExcelFail = (error) => {\n return {\n type: actionTypes.IMPORT_LOR_ATTRIBUTES_DATA_FAIL,\n error: error,\n };\n};\n\nexport const importLorAttributesDataExcel = (attributesData) => {\n return (dispatch) => {\n dispatch(importLorAttributesDataExcelStart());\n\n return LorAPI.importLorAttributesDataExcel(attributesData)\n .then((res) => {\n dispatch(importLorAttributesDataExcelSuccess(res));\n })\n .catch((err) => {\n dispatch(importLorAttributesDataExcelFail(err));\n });\n };\n};","import React, { Component } from \"react\";\nimport { UncontrolledAlert } from \"reactstrap\";\n\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\nexport class AlertDialog extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isActive: true,\n sticky: this.props.sticky,\n };\n }\n\n componentDidMount() {\n const sticky = this.state.sticky;\n if (!sticky) {\n setTimeout(() => {\n this.setState({ isActive: false });\n }, alertAutoHideInterval);\n }\n }\n\n render() {\n const isActive = this.state.isActive;\n\n const { message, color, nowrap, className } = this.props;\n\n if (isActive) {\n return (\n \n {message} \n \n );\n } else {\n return \"\";\n }\n }\n}\n","import React, { Component } from \"react\";\nimport { Container, Table } from \"reactstrap\";\n\nclass ManageJobDetailMatches extends Component {\n constructor(props) {\n super(props);\n this.state = {\n job: this.props.job,\n isUpdating: false,\n };\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.job !== this.props.job) {\n this.setState({ job: this.props.job });\n }\n\n if (prevProps.isUpdating !== this.props.isUpdating) {\n this.setState({ isUpdating: this.props.isUpdating });\n }\n }\n\n handleChange = (event) => {\n const job = this.state.job;\n const { value } = event.target;\n job.comment = value;\n\n this.setState({ job });\n };\n\n // handleSave = () => {\n // let job = this.state.job;\n // this.props.handleSaveJobNoteUpdate(job);\n // };\n\n render() {\n const job = this.props.job;\n const jobMatches = job && job.jobMatches && job.jobMatches.length > 0 ? job.jobMatches.filter((it) => it.jobType == this.props.jobType && it.personInactive == false) : [];\n\n return (\n \n \n \n {this.props.title}\n \n \n \n \n Name \n Email \n \n \n {jobMatches.length > 0 ? (\n \n {jobMatches.map((jobMatch, index) => {\n return (\n \n {`${jobMatch.firstName} ${jobMatch.lastName}`} \n {jobMatch.email} \n \n );\n })}\n \n ) : (\n \n \n No persons have assigned this as their {this.props.jobType} Requirement. \n \n \n )}\n
\n \n \n );\n }\n}\n\nexport default ManageJobDetailMatches;\n","import * as jobActions from \"../../../store/actions/jobAction\";\nimport ContentTranslator from \"../../translator/ContentTranslator\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, CustomInput, Form, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nclass ManageJobLorAttribute extends React.Component {\n static displayName = ManageJobLorAttribute.name;\n\n constructor(props) {\n super(props);\n this.state = {\n job: this.props.job,\n attributes: this.props.lorAttributes ? [...this.props.lorAttributes] : [],\n updating: false,\n };\n }\n\n componentDidMount() {}\n\n componentDidUpdate(prevProps) {\n if (prevProps.lorAttributes !== this.props.lorAttributes) {\n this.setState({\n attributes: this.props.lorAttributes ? [...this.props.lorAttributes] : [],\n });\n }\n }\n\n handleAttributeCheckedChange = (attributeId) => {\n let attributes = this.state.attributes;\n if (attributes && attributes.length > 0) {\n if (attributes.find((it) => it.lorAttributeId == attributeId)) {\n var attribute = attributes.find((it) => it.lorAttributeId == attributeId);\n var index = attributes.indexOf(attribute);\n if (index !== -1) {\n attributes.splice(index, 1);\n }\n } else {\n attributes.push({\n lorAttributeId: attributeId,\n });\n }\n } else {\n attributes = [\n {\n lorAttributeId: attributeId,\n },\n ];\n }\n this.setState({ attributes });\n };\n\n togleEditLorAttribute = () => {\n this.setState({\n attributes: this.props.skillAttributes ? [...this.props.skillAttributes] : [],\n });\n this.props.togleEditLorAttribute();\n };\n\n handleSaveEditAttributeClick = () => {\n const { job, attributes } = this.state;\n this.setState({ updating: true });\n this.props.onJob.updateJobLorAttributes(job.id, attributes).then(() => {\n if (!this.props.updating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.props.generateAlert(\"success\", \"Lor attributes updated\");\n this.props.updateLorAttributes(this.props.jobLorAttributes);\n }\n }\n this.setState({ updating: this.props.updating });\n });\n };\n\n render() {\n const { editedLor } = this.props;\n const attributes = this.state.attributes;\n\n if (this.props.editAttribute) {\n return (\n \n Edit Attributes \n \n \n \n \n \n Close\n {\" \"}\n {!this.props.managedPeople && this.props.allowEdit && (\n this.handleSaveEditAttributeClick()}>\n Save changes\n \n )}\n \n \n );\n } else {\n return \"\";\n }\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n updating: state.job.updating,\n error: state.job.error,\n jobLorAttributes: state.job.jobLorAttributes,\n contentTranslations: state.content.contentTranslations,\n loginWithTeams: state.auth.loginWithTeams,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onJob: bindActionCreators(jobActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ManageJobLorAttribute);\n","import { contentTranslator } from \"../../../utils/translatorUtils\";\nimport ContentTranslator from \"../../translator/ContentTranslator\";\nimport ManageJobLorAttribute from \"./ManageJobLorAttribute\";\nimport { faComment, faEdit, faList } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Link } from \"react-router-dom\";\nimport { Button, Col, Form, FormGroup, Input, Modal, ModalBody, ModalFooter, ModalHeader, Row, Table, UncontrolledTooltip } from \"reactstrap\";\n\nconst tableBodyStyle = {\n fontSize: 11,\n fontFamily: \"IBMPlexSans\",\n};\n\nconst tdEditStyle = {\n padding: \"2px 10px\",\n};\n\nconst lorOrders = [\n { lor: \"Autonomy\", order: 1 },\n { lor: \"Influence\", order: 2 },\n { lor: \"Complexity\", order: 3 },\n { lor: \"Business Skills\", order: 4 },\n { lor: \"Knowledge\", order: 5 },\n { lor: \"Responsibility and Autonomy\", order: 1 },\n { lor: \"Complexity and Scope\", order: 2 },\n { lor: \"Skills\", order: 3 },\n];\n\nclass ManageJobLorProfile extends Component {\n constructor(props) {\n super(props);\n this.state = {\n editLorProfile: false,\n editedLor: null,\n editedLorProfile: null,\n lorProfiles: this.props.lorProfiles,\n lorAttributes: this.props.lorAttributes,\n };\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.lorProfiles !== this.props.lorProfiles) {\n this.setState({ lorProfiles: this.props.lorProfiles });\n }\n\n if (prevProps.lorAttributes !== this.props.lorAttributes) {\n this.setState({ lorAttributes: this.props.lorAttributes });\n }\n }\n\n openEditLorAttribute = (editedLor) => {\n this.setState({ editAttribute: true, editedLor });\n };\n\n togleEditLorAttribute = () => {\n const { editAttribute } = this.state;\n this.setState({ editAttribute: !editAttribute });\n };\n\n updateLorAttributes = (updatedJobLorAttributes) => {\n this.props.updateLorAttributes(updatedJobLorAttributes);\n this.setState({ editAttribute: false });\n };\n\n renderLorProfileList = (categoryIndex, category, categoryColor, lorColor) => {\n const { containerConfig, lors, showHiddenSkills } = this.props;\n const { lorProfiles } = this.state;\n\n if (lors) {\n lors.forEach((lor) => {\n const lorOrder = lorOrders.find((it) => it.lor == lor.name);\n if (lorOrder) {\n lor.order = lorOrder.order;\n } else {\n lor.order = 999;\n }\n });\n }\n\n const rows = lors\n .filter((it) => (it.category ? it.category : \"Generic Attributes\") == (category ? category : \"Generic Attributes\"))\n //.sort((a, b) => (`${a.sequence}${a.order}${a.name}` > `${b.sequence}${b.order}${b.name}` ? 1 : -1))\n .sort((a, b) => {\n if (a.sequence > b.sequence) {\n return 1;\n }\n if (a.sequence < b.sequence) {\n return -1;\n }\n if (a.order > b.order) {\n return 1;\n }\n if (a.order < b.order) {\n return -1;\n }\n if (a.name > b.name) {\n return 1;\n }\n if (a.name < b.name) {\n return -1;\n }\n return 0;\n })\n .map((lor, lorindex) => {\n const lorProfile = lorProfiles.find((x) => x.lor === lor.name);\n const lorHidden = lor.isHidden && !showHiddenSkills;\n const lorOptional = lor.optional;\n const levels = [1, 2, 3, 4, 5, 6, 7];\n\n let selectedLorAttributes = [];\n\n if (lor.attributes && lor.attributes.length > 0) {\n selectedLorAttributes = lor.attributes.filter((it) => !it.isHidden && this.state.lorAttributes.find((attribute) => it.id == attribute.lorAttributeId));\n }\n\n if (lorProfile) {\n const currLevel = lorProfile.edited ? (lorProfile.editedNumericVal ? lorProfile.editedNumericVal : 0) : lorProfile.numericVal;\n return (\n !lorHidden && (\n \n \n \n {lor.attributes && lor.attributes.length > 0 ? (\n \n \n \n \n {attribute.link && !this.props.loginWithTeams ? (\n \n {attribute.attribute}\n \n ) : (\n attribute.attribute\n )}\n {index + 1 < selectedLorAttributes.length && \", \"}\n \n \n );\n })}\n \n )}\n \n \n this.openEditLorAttribute(lor)}\n />\n \n \n ) : (\n
\n \n \n {lor && \n \n this.props.showEditSkill && containerConfig.enableClickToEditLoR && ((currLevel === level && lorOptional) || currLevel != level) && this.handleSelectLorLevel(lor, level, lorProfile)}\n >\n {currLevel === level && lorProfile.comment && \n {lorLevel && \n \n );\n })}\n {this.props.showEditSkill && (\n \n !containerConfig.enableClickToEditLoR && this.openEditLorProfile(lor, { id: lorProfile.id, value: currLevel })}\n >\n \n Click on the level cell to select LoR level\n \n )}\n \n )}\n \n )\n );\n } else {\n return (\n !lorHidden && (\n \n \n \n
\n \n \n {lor && \n \n this.props.showEditSkill && containerConfig.enableClickToEditLoR && this.handleSelectLorLevel(lor, level, null)}\n >\n \n {lorLevel && \n \n );\n })}\n {this.props.showEditSkill && (\n \n !containerConfig.enableClickToEditLoR && this.openEditLorProfile(lor, null)}\n >\n \n Click on the level cell to select LoR level\n \n )}\n \n )}\n \n )\n );\n }\n });\n\n return {rows} ;\n };\n\n openEditLorProfile = (editedLor, editedLorProfile) => {\n this.setState({ editLorProfile: true, editedLor, editedLorProfile });\n };\n\n togleEditLorProfile = () => {\n const { editLorProfile } = this.state;\n this.setState({ editLorProfile: !editLorProfile });\n };\n\n renderModalEditProfile() {\n const { editedLor, editedLorProfile } = this.state;\n\n let lorProfileElement = null;\n\n if (editedLorProfile) {\n lorProfileElement = {\n id: editedLorProfile.id,\n value: editedLorProfile.value,\n };\n }\n return (\n \n Edit Responsibility \n \n \n \n \n \n Close\n {\" \"}\n {editedLor && editedLor.optional && editedLorProfile && editedLorProfile.value > 0 && (\n \n {\" \"}\n \n Clear Selection\n \n \n )}\n \n Save changes\n \n \n \n );\n }\n\n handleRadioClick = (value) => {\n let editedLorProfile = this.state.editedLorProfile;\n\n if (editedLorProfile) {\n editedLorProfile.value = value;\n } else {\n editedLorProfile = {\n value,\n };\n }\n\n this.setState({ editedLorProfile });\n };\n\n handleClearProfileClick = () => {\n const { lorProfiles, editedLor, editedLorProfile } = this.state;\n\n let lorProfile = null;\n if (lorProfiles && editedLor.optional && editedLorProfile) {\n lorProfile = lorProfiles.find((it) => (editedLorProfile.id && it.id == editedLorProfile.id) || (!it.id && it.lor === editedLor.name));\n\n if (lorProfile) {\n if (lorProfile.id) {\n lorProfile.editedLevel = null;\n lorProfile.editedNumericVal = 0;\n lorProfile.editedStringVal = null;\n lorProfile.editedLabelVal = null;\n\n lorProfile.edited = true;\n\n lorProfile.source = \"lorProfiles\";\n } else {\n lorProfile.level = null;\n lorProfile.numericVal = null;\n lorProfile.stringVal = null;\n lorProfile.labelVal = null;\n\n lorProfile.editedLevel = null;\n lorProfile.editedNumericVal = 0;\n lorProfile.editedStringVal = null;\n lorProfile.editedLabelVal = null;\n lorProfile.edited = false;\n\n lorProfile.source = \"lorProfiles\";\n }\n\n this.props.handleEditProfileSkill(lorProfile);\n this.setState({ lorProfiles, editLorProfile: false });\n }\n }\n\n if (!lorProfile) {\n this.setState({ editLorProfile: false });\n }\n };\n\n handleSaveEditProfileClick = () => {\n const { lors } = this.props;\n const { lorProfiles, editedLor, editedLorProfile } = this.state;\n\n const level = lors.find((it) => it.name == editedLor.name).levels.find((level) => level.levelNumber == editedLorProfile.value);\n\n let lorProfile = null;\n if (lorProfiles && editedLorProfile) {\n lorProfile = lorProfiles.find((it) => (editedLorProfile.id && it.id == editedLorProfile.id) || (!it.id && it.lor === editedLor.name));\n\n if (lorProfile) {\n if (((lorProfile.editedNumericVal || lorProfile.editedNumericVal == 0) && lorProfile.editedNumericVal != editedLorProfile.value) || (!lorProfile.editedNumericVal && lorProfile.numericVal != editedLorProfile.value)) {\n if (lorProfile.id) {\n if (lorProfile.level == level.levelNumber) {\n // Updated back to original level\n lorProfile.editedLevel = null;\n lorProfile.editedNumericVal = null;\n lorProfile.editedStringVal = null;\n lorProfile.editedLabelVal = null;\n lorProfile.edited = false;\n } else {\n lorProfile.editedLevel = level.levelNumber;\n lorProfile.editedNumericVal = editedLorProfile.value;\n lorProfile.editedStringVal = level && `${level.levelNumber}- ${level.levelName}`;\n lorProfile.editedLabelVal = level && level.description;\n lorProfile.edited = true;\n }\n } else {\n lorProfile.editedLevel = level.levelNumber;\n lorProfile.editedNumericVal = editedLorProfile.value;\n lorProfile.editedStringVal = level && `${level.levelNumber}- ${level.levelName}`;\n lorProfile.editedLabelVal = level && level.description;\n lorProfile.edited = true;\n }\n\n lorProfile.source = \"lorProfiles\";\n this.props.handleEditProfileSkill(lorProfile);\n this.setState({ lorProfiles, editLorProfile: false });\n } else {\n this.setState({ editLorProfile: false });\n }\n }\n }\n\n if (!lorProfile && level) {\n lorProfile = {\n lor: editedLor.name,\n lorCode: editedLor.lorCode,\n level: level.levelNumber,\n numericVal: editedLorProfile.value,\n stringVal: level && `${level.levelNumber}- ${level.levelName}`,\n labelVal: level && level.description,\n editedLevel: level.levelNumber,\n editedNumericVal: editedLorProfile.value,\n editedStringVal: level && `${level.levelNumber}- ${level.levelName}`,\n editedLabelVal: level && level.description,\n edited: true,\n source: \"lorProfiles\",\n };\n\n this.props.handleEditProfileSkill(lorProfile);\n this.setState({ lorProfiles: [...lorProfiles, lorProfile], editLorProfile: false });\n }\n };\n\n handleSelectLorLevel = (lor, level, editedLorProfile) => {\n const { lors } = this.props;\n const { lorProfiles } = this.state;\n const lorLevel = lors.find((it) => it.name == lor.name).levels.find((it) => it.levelNumber == level);\n\n let lorProfile = null;\n if (lorProfiles && editedLorProfile) {\n lorProfile = lorProfiles.find((it) => (editedLorProfile.id && it.id == editedLorProfile.id) || (!it.id && it.lor === lor.name));\n\n if (lorProfile) {\n if (lorProfile.id) {\n // Update existing lor profile\n if (\n // First update\n (!lorProfile.editedNumericVal && lorProfile.numericVal != level) ||\n // Update after first update\n (lorProfile.editedNumericVal && lorProfile.editedNumericVal != level)\n ) {\n // Click on different level cell\n if (lorProfile.level == level) {\n // Updated back to original level\n lorProfile.editedLevel = null;\n lorProfile.editedNumericVal = null;\n lorProfile.editedStringVal = null;\n lorProfile.editedLabelVal = null;\n lorProfile.edited = false;\n } else {\n lorProfile.editedLevel = lorLevel.levelNumber;\n lorProfile.editedNumericVal = level;\n lorProfile.editedStringVal = lorLevel && `${lorLevel.levelNumber}- ${lorLevel.levelName}`;\n lorProfile.editedLabelVal = lorLevel && lorLevel.description;\n lorProfile.edited = true;\n }\n\n lorProfile.source = \"lorProfiles\";\n\n this.props.handleEditProfileSkill(lorProfile);\n this.setState({ lorProfiles });\n } else if (\n lor.optional &&\n // First update\n ((!lorProfile.editedNumericVal && lorProfile.numericVal == level) ||\n // Update after first update\n (lorProfile.editedNumericVal && lorProfile.editedNumericVal == level))\n ) {\n // Click on same level cell, must be Optional Lor\n if (lorProfile.editedNumericVal == 0) {\n lorProfile.editedLevel = lorLevel.levelNumber;\n lorProfile.editedNumericVal = level;\n lorProfile.editedStringVal = lorLevel && `${lorLevel.levelNumber}- ${lorLevel.levelName}`;\n lorProfile.editedLabelVal = lorLevel && lorLevel.description;\n } else {\n lorProfile.editedLevel = null;\n lorProfile.editedNumericVal = 0;\n lorProfile.editedStringVal = null;\n lorProfile.editedLabelVal = null;\n }\n\n lorProfile.source = \"lorProfiles\";\n\n if (lorProfile.numericVal != lorProfile.editedNumericVal) {\n lorProfile.edited = true;\n } else {\n lorProfile.edited = false;\n }\n\n this.props.handleEditProfileSkill(lorProfile);\n this.setState({ lorProfiles });\n }\n } else {\n // Update new selected lor profile\n if (!lorProfile.editedNumericVal || lorProfile.editedNumericVal == 0 || (lorProfile.editedNumericVal && lorProfile.editedNumericVal != level)) {\n lorProfile.level = lorLevel.levelNumber;\n lorProfile.numericVal = level;\n lorProfile.stringVal = lorLevel && `${lorLevel.levelNumber}- ${lorLevel.levelName}`;\n lorProfile.labelVal = lorLevel && lorLevel.description;\n\n lorProfile.editedLevel = lorLevel.levelNumber;\n lorProfile.editedNumericVal = level;\n lorProfile.editedStringVal = lorLevel && `${lorLevel.levelNumber}- ${lorLevel.levelName}`;\n lorProfile.editedLabelVal = lorLevel && lorLevel.description;\n lorProfile.edited = true;\n\n lorProfile.source = \"lorProfiles\";\n\n this.props.handleEditProfileSkill(lorProfile);\n this.setState({ lorProfiles });\n } else if (lorProfile.editedNumericVal && lorProfile.editedNumericVal == level) {\n lorProfile.level = null;\n lorProfile.numericVal = null;\n lorProfile.stringVal = null;\n lorProfile.labelVal = null;\n\n lorProfile.editedLevel = null;\n lorProfile.editedNumericVal = 0;\n lorProfile.editedStringVal = null;\n lorProfile.editedLabelVal = null;\n lorProfile.edited = false;\n\n lorProfile.source = \"lorProfiles\";\n\n this.props.handleEditProfileSkill(lorProfile);\n this.setState({ lorProfiles });\n }\n }\n }\n }\n\n if (!lorProfile && lorLevel) {\n lorProfile = {\n lor: lor.name,\n lorCode: lor.lorCode,\n level: lorLevel.levelNumber,\n numericVal: level,\n stringVal: lorLevel && `${lorLevel.levelNumber}- ${lorLevel.levelName}`,\n labelVal: lorLevel && lorLevel.description,\n editedLevel: lorLevel.levelNumber,\n editedNumericVal: level,\n editedStringVal: lorLevel && `${lorLevel.levelNumber}- ${lorLevel.levelName}`,\n editedLabelVal: lorLevel && lorLevel.description,\n edited: true,\n source: \"lorProfiles\",\n };\n\n this.props.handleEditProfileSkill(lorProfile);\n this.setState({ lorProfiles: [...lorProfiles, lorProfile] });\n }\n };\n\n render() {\n const props = this.props;\n const { lors, showHiddenSkills, authPersonId, job } = this.props;\n\n const lorCategories = [];\n\n if (lors && lors.find((it) => !it.category)) {\n lorCategories.push({\n category: \"Generic Attributes\",\n categoryColor: \"#69849c\",\n lorColor: \"#ecf0f5\",\n lors: lors.find((it) => !it.category) ? [...lors.filter((it) => !it.category)] : [],\n });\n }\n\n if (lors) {\n lors.filter((it) => it.category).forEach((lor) => {\n if (!lorCategories.find((it) => it.category == lor.category)) {\n lorCategories.push({\n category: lor.category,\n categoryColor: lor.categoryColor,\n lorColor: lor.lorColor,\n lors: lors.find((it) => it.category == lor.category) ? [...lors.filter((it) => it.category == lor.category)] : [],\n });\n }\n });\n }\n\n const allowEdit = !job.ownerId || job.ownerId == authPersonId;\n\n return (\n \n {this.renderModalEditProfile()}\n \n {lorCategories.map((lorCategory, index) => {\n const categoryHidden = !lorCategory.lors.some((lor) => !lor.isHidden) && !showHiddenSkills;\n\n return (\n \n {!categoryHidden && (\n \n \n \n \n {lorCategory.category == \"Generic Attributes\" ? \n \n 1\n \n \n 2\n \n \n 3\n \n \n 4\n \n \n 5\n \n \n 6\n \n \n 7\n \n {props.showEdit && \n \n {this.renderLorProfileList(index, lorCategory.category, lorCategory.categoryColor, lorCategory.lorColor)}\n
\n )}\n \n );\n })}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n contentTranslations: state.content.contentTranslations,\n containerConfig: state.config.containerConfig,\n authPersonId: state.auth.personId,\n };\n};\n\nconst mapDispatchToProps = () => {\n return {};\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ManageJobLorProfile);\n","import { ContentWrapperLg } from \"../../common/ContentWrapperLg\";\nimport React, { Component } from \"react\";\nimport ReactTextareaAutosize from \"react-textarea-autosize\";\nimport { Button, Col, Form, Row } from \"reactstrap\";\n\nconst buttonStyle = {\n marginLeft: \"10px\",\n};\n\nconst labelCaptionStyle = {\n fontWeight: \"bold\",\n};\n\nconst textareaStyle = {\n width: \"100%\",\n padding: \"10px\",\n border: \"1px solid #ced4da\",\n borderRadius: \"0.25rem\",\n};\n\nconst textareaStyleDisable = {\n width: \"100%\",\n padding: \"10px\",\n border: \"1px solid #ced4da\",\n borderRadius: \"0.25rem\",\n background: \"#e9ecef\",\n};\n\nconst largeContainer = {\n width: \"100%\",\n maxWidth: \"100%\",\n fontSize: \"14px\",\n};\n\nconst commonContainer = {\n fontSize: \"14px\",\n};\n\nclass ManageJobNote extends Component {\n constructor(props) {\n super(props);\n this.state = {\n job: this.props.job,\n isUpdating: false,\n };\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.job !== this.props.job) {\n this.setState({ job: this.props.job });\n }\n\n if (prevProps.isUpdating !== this.props.isUpdating) {\n this.setState({ isUpdating: this.props.isUpdating });\n }\n }\n\n handleChange = (event) => {\n const job = this.state.job;\n const { name, value } = event.target;\n job.comment = value;\n\n this.setState({ job });\n };\n\n handleSave = () => {\n let job = this.state.job;\n this.props.handleSaveJobNoteUpdate(job);\n };\n\n render() {\n const pathName = window.location.pathname;\n const isAdmin = pathName.includes(\"/admin\");\n\n return (\n \n \n \n \n Note\n \n \n
\n \n \n \n );\n }\n}\n\nexport default ManageJobNote;\n","import * as jobActions from \"../../../store/actions/jobAction\";\nimport ContentTranslator from \"../../translator/ContentTranslator\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, CustomInput, Form, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nclass ManageJobSkillAttribute extends React.Component {\n static displayName = ManageJobSkillAttribute.name;\n\n constructor(props) {\n super(props);\n this.state = {\n job: this.props.job,\n attributes: this.props.skillAttributes ? [...this.props.skillAttributes] : [],\n updating: false,\n };\n }\n\n componentDidMount() {}\n\n componentDidUpdate(prevProps) {\n if (prevProps.skillAttributes !== this.props.skillAttributes) {\n this.setState({\n attributes: this.props.skillAttributes ? [...this.props.skillAttributes] : [],\n });\n }\n }\n\n handleAttributeCheckedChange = (attributeId) => {\n let attributes = this.state.attributes;\n if (attributes && attributes.length > 0) {\n if (attributes.find((it) => it.skillAttributeId == attributeId)) {\n var attribute = attributes.find((it) => it.skillAttributeId == attributeId);\n var index = attributes.indexOf(attribute);\n if (index !== -1) {\n attributes.splice(index, 1);\n }\n } else {\n attributes.push({\n skillAttributeId: attributeId,\n });\n }\n } else {\n attributes = [\n {\n skillAttributeId: attributeId,\n },\n ];\n }\n this.setState({ attributes });\n };\n\n togleEditSkillAttribute = () => {\n this.setState({\n attributes: this.props.skillAttributes ? [...this.props.skillAttributes] : [],\n });\n this.props.togleEditSkillAttribute();\n };\n\n handleSaveEditAttributeClick = () => {\n const { job, attributes } = this.state;\n this.setState({ updating: true });\n\n this.props.onJob.updateJobSkillAttributes(job.id, attributes).then(() => {\n if (!this.props.updating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.props.generateAlert(\"success\", \"Skill attributes updated\");\n this.props.updateSkillAttributes(this.props.jobSkillAttributes);\n }\n }\n this.setState({ updating: this.props.updating });\n });\n };\n\n render() {\n const { editedCategory, editedSubCategory, editedSkill } = this.props;\n const attributes = this.state.attributes;\n\n if (this.props.editAttribute) {\n return (\n \n Edit Attributes \n \n \n \n \n \n Close\n {\" \"}\n {!this.props.managedPeople && this.props.allowEdit && (\n this.handleSaveEditAttributeClick()}>\n Save changes\n \n )}\n \n \n );\n } else {\n return \"\";\n }\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n updating: state.job.updating,\n error: state.job.error,\n jobSkillAttributes: state.job.jobSkillAttributes,\n contentTranslations: state.content.contentTranslations,\n loginWithTeams: state.auth.loginWithTeams,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onJob: bindActionCreators(jobActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ManageJobSkillAttribute);\n","import { contentTranslator } from \"../../../utils/translatorUtils\";\nimport ContentTranslator from \"../../translator/ContentTranslator\";\nimport ManageJobSkillAttribute from \"./ManageJobSkillAttribute\";\nimport { faComment, faEdit, faList } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport { FormGroup, Button, Col, Form, Modal, ModalBody, ModalFooter, ModalHeader, Row, Table, UncontrolledTooltip } from \"reactstrap\";\n\nclass ManageJobSkillProfile extends Component {\n constructor(props) {\n super(props);\n this.state = {\n skillValueOptions: [],\n editSkill: false,\n editedCategory: null,\n editedSubCategory: null,\n editedSkill: null,\n editedSkillProfiles: [],\n skillProfiles: this.props.skillProfiles,\n skillAttributes: this.props.skillAttributes,\n editAttribute: false,\n };\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n const skillValueOptions = [\n {\n value: \"N\",\n label: \"None\",\n numericVal: 0,\n },\n {\n value: \"P\",\n label: \"Desirable\",\n numericVal: 0.5,\n },\n {\n value: \"M\",\n label: \"Required\",\n numericVal: 1,\n },\n ];\n\n this.setState({ skillValueOptions });\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.skillProfiles !== this.props.skillProfiles) {\n this.setState({ skillProfiles: this.props.skillProfiles });\n }\n\n if (prevProps.skillAttributes !== this.props.skillAttributes) {\n this.setState({ skillAttributes: this.props.skillAttributes });\n }\n }\n\n elementSkill(skillsCode, level, levels, subCategorySkillProfiles, catColour, colour, skillColour, category, subCategory) {\n const { showEditSkill } = this.props;\n\n const colFully = `${colour}`;\n const colUnmatched = `${skillColour}`;\n\n const colDesirable = `repeating-linear-gradient(90deg, ${colour}, ${colour} 5px, ${skillColour} 5px, ${skillColour} 10px)`;\n\n const skillLevel = levels.filter((x) => x.level == level)[0];\n let skillLevelDescription = skillLevel ? skillLevel.description : \"\";\n skillLevelDescription = this.contentTranslator(this.props.contentTranslations, \"SkillLevels\", `${skillsCode} ${level} Description`, skillLevelDescription);\n\n if (subCategorySkillProfiles.filter((x) => x.level == level).length > 0) {\n const skillProfile = subCategorySkillProfiles.find((x) => x.level == level);\n const skillVal = skillProfile && (skillProfile.editedStringVal ? skillProfile.editedStringVal : skillProfile.stringVal);\n\n return (\n \n \n {skillProfile.comment && \n \n );\n } else {\n return (\n \n \n {skillLevel && (\n \n )}\n \n );\n }\n }\n\n elementSkillExtraFramework(skillsCode, extraFrameworkLevelId, levels, subCategorySkillProfiles, catColour, colour, skillColour, category, subCategory) {\n const { showEditSkill, isShowJobProfile } = this.props;\n\n const colFully = `${colour}`;\n const colUnmatched = `${skillColour}`;\n\n const colDesirable = `repeating-linear-gradient(90deg, ${colour}, ${colour} 5px, ${skillColour} 5px, ${skillColour} 10px)`;\n\n const skillLevel = levels.filter((x) => x.extraFrameworkLevelId == extraFrameworkLevelId)[0];\n let skillLevelDescription = skillLevel ? skillLevel.description : \"\";\n skillLevelDescription = this.contentTranslator(this.props.contentTranslations, \"SkillLevels\", `${skillsCode} ${extraFrameworkLevelId} Description`, skillLevelDescription);\n\n if (subCategorySkillProfiles.filter((x) => x.extraFrameworkLevelId == extraFrameworkLevelId).length > 0) {\n const skillProfile = subCategorySkillProfiles.find((x) => x.extraFrameworkLevelId == extraFrameworkLevelId);\n const skillVal = skillProfile && (skillProfile.editedStringVal ? skillProfile.editedStringVal : skillProfile.stringVal);\n\n return (\n \n \n );\n } else {\n return (\n \n \n );\n }\n }\n\n openEditSkillProfile = (editedCategory, editedSubCategory, editedSkill, editedSkillProfiles) => {\n this.setState({ editSkill: true, editedCategory, editedSubCategory, editedSkill, editedSkillProfiles });\n };\n\n togleEditSkillProfile = () => {\n const { editSkill } = this.state;\n this.setState({ editSkill: !editSkill });\n };\n\n handleChangeSkillLevel = (skill) => {\n let editedSkillProfiles = this.state.editedSkillProfiles;\n let changedSkill = null;\n\n if (skill.id) {\n changedSkill = editedSkillProfiles.find((it) => it.id == skill.id);\n if (changedSkill) {\n changedSkill.editedStringVal = skill.value;\n }\n } else {\n changedSkill = editedSkillProfiles.find((it) => it.skillCode == skill.skillsCode && it.level == skill.skillLevel);\n if (changedSkill) {\n changedSkill.editedStringVal = skill.value;\n } else {\n const addedSkill = {\n category: skill.category,\n subCategory: skill.subCategory,\n skill: skill.skill,\n skillCode: skill.skillsCode,\n level: skill.skillLevel,\n editedStringVal: skill.value,\n isExtraFramework: skill.extraFrameworkLevelId ? true : false,\n extraFrameworkLevel: skill.extraFrameworkLevel,\n extraFrameworkLevelId: skill.extraFrameworkLevelId,\n };\n\n editedSkillProfiles.push(addedSkill);\n }\n }\n\n this.setState({ editedSkillProfiles });\n };\n\n handleSaveEditProfileClick = () => {\n let { skillProfiles, editedSkillProfiles, skillValueOptions } = this.state;\n let editedProfiles = [];\n if (editedSkillProfiles.some((it) => it.editedStringVal && it.editedStringVal != it.stringVal)) {\n editedSkillProfiles\n .filter((editedSkillProfile) => editedSkillProfile.editedStringVal && editedSkillProfile.editedStringVal != editedSkillProfile.stringVal)\n .forEach((editedSkillProfile) => {\n if (editedSkillProfile.id) {\n let skillProfile = skillProfiles.find((skillProfile) => skillProfile.id == editedSkillProfile.id);\n if (skillProfile) {\n skillProfile.editedStringVal = editedSkillProfile.editedStringVal;\n skillProfile.edited = true;\n skillProfile.source = \"skillProfiles\";\n const selectedSkillValue = skillValueOptions.find((it) => it.value == editedSkillProfile.editedStringVal);\n if (selectedSkillValue) {\n skillProfile.editedNumericVal = selectedSkillValue.numericVal;\n skillProfile.editedLabelVal = selectedSkillValue.labelVal;\n }\n editedProfiles.push(skillProfile);\n }\n } else {\n const selectedSkillValue = skillValueOptions.find((it) => it.value == editedSkillProfile.editedStringVal);\n const skillProfile = {\n category: editedSkillProfile.category,\n subCategory: editedSkillProfile.subCategory,\n skill: editedSkillProfile.skill,\n skillCode: editedSkillProfile.skillCode,\n level: editedSkillProfile.level,\n isExtraFramework: editedSkillProfile.isExtraFramework,\n extraFrameworkLevel: editedSkillProfile.extraFrameworkLevel,\n extraFrameworkLevelId: editedSkillProfile.extraFrameworkLevelId,\n stringVal: editedSkillProfile.editedStringVal,\n numericVal: selectedSkillValue && selectedSkillValue.numericVal,\n labelVal: selectedSkillValue && selectedSkillValue.labelVal,\n editedStringVal: editedSkillProfile.editedStringVal,\n editedNumericVal: selectedSkillValue && selectedSkillValue.numericVal,\n editedLabelVal: selectedSkillValue && selectedSkillValue.labelVal,\n edited: true,\n source: \"skillProfiles\",\n };\n skillProfiles.push(skillProfile);\n editedProfiles.push(skillProfile);\n }\n });\n this.props.handleEditProfileSkills(editedProfiles);\n this.setState({ editSkill: false, skillProfiles: [...skillProfiles] });\n } else {\n this.setState({ editSkill: false });\n }\n };\n\n renderModalEditSkill = () => {\n const { editedCategory, editedSubCategory, editedSkill, editedSkillProfiles, skillValueOptions } = this.state;\n\n if (this.state.editSkill) {\n return (\n \n Edit Skill \n \n \n \n \n \n Close\n {\" \"}\n this.handleSaveEditProfileClick()}>\n Save changes\n \n \n \n );\n } else {\n return \"\";\n }\n };\n\n openEditSkillAttribute = (editedCategory, editedSubCategory, editedSkill) => {\n this.setState({ editAttribute: true, editedCategory, editedSubCategory, editedSkill });\n };\n\n togleEditSkillAttribute = () => {\n const { editAttribute } = this.state;\n this.setState({ editAttribute: !editAttribute });\n };\n\n updateSkillAttributes = (updatedJobSkillAttributes) => {\n this.props.updateSkillAttributes(updatedJobSkillAttributes);\n this.setState({ editAttribute: false });\n };\n\n render() {\n const { categories, showAllSkill, showHiddenSkills, showEditSkill, extraFrameworkLevels, authPersonId, job } = this.props;\n const { skillProfiles } = this.state;\n\n const allowEdit = !job.ownerId || job.ownerId == authPersonId;\n\n return (\n \n {this.renderModalEditSkill()}\n \n \n {categories.map((category, index) => {\n var emptyLevels = [];\n for (let i = extraFrameworkLevels.length + 1; i <= 7; i++) {\n emptyLevels.push(\n \n \n \n );\n }\n\n const categoryFound = skillProfiles.filter((x) => x.category == category.name).length > 0 ? true : false;\n if (categoryFound || showAllSkill || showEditSkill) {\n const categoryHasValue = skillProfiles.filter((c) => c.category == category.name && (c.stringVal !== \"N\" || c.editedStringVal)).length > 0 ? true : false;\n const catSkillProfilesCodeWithValue = skillProfiles.filter((it) => it.category == category.name && (it.stringVal !== \"N\" || it.editedStringVal)).map((skill) => skill.skillCode);\n\n const categorySkills = category.subCategories.flatMap((subCategory, index) => {\n return subCategory.skills.flatMap((skill, index) => {\n return skill;\n });\n });\n\n const checkedCatSkills = showAllSkill || showEditSkill ? categorySkills : categorySkills.filter((it) => catSkillProfilesCodeWithValue.includes(it.skillsCode));\n const categoryHidden = !checkedCatSkills.some((skill) => !skill.isHidden) && !showHiddenSkills;\n\n if (categoryHasValue || showAllSkill || showEditSkill) {\n return (\n \n \n \n \n \n {!category.isExtraFramework == true ? (\n \n \n 1\n \n \n 2\n \n \n 3\n \n \n 4\n \n \n 5\n \n \n 6\n \n \n 7\n \n \n ) : (\n \n {extraFrameworkLevels.map((extraFrameworkLevel, levelIndex) => {\n return (\n \n \n {extraFrameworkLevel.level}\n \n \n );\n })}\n {emptyLevels}\n \n )}\n {showEditSkill && (\n \n )}\n \n \n \n {category.subCategories.map((subCategory, index) => {\n const subCategoryHasValue = skillProfiles.filter((it) => it.subCategory === subCategory.name && (it.stringVal !== \"N\" || it.editedStringVal)).length > 0 ? true : false;\n\n const subCatSkillProfilesCodeWithValue = skillProfiles.filter((it) => it.subCategory === subCategory.name && (it.stringVal !== \"N\" || it.editedStringVal)).map((skill) => skill.skillCode);\n const checkedSubCatSkills = showAllSkill || showEditSkill ? subCategory.skills : subCategory.skills.filter((it) => subCatSkillProfilesCodeWithValue.includes(it.skillsCode));\n\n const subCategoryHidden = !checkedSubCatSkills.some((skill) => !skill.isHidden) && !showHiddenSkills;\n\n if (subCategoryHasValue || showAllSkill || showEditSkill) {\n return (\n \n \n \n \n \n {subCategory.skills.map((skill, elIndex) => {\n const subCatDetailSkillProfiles = skillProfiles.filter((x) => x.skillCode === skill.skillsCode && (x.stringVal !== \"N\" || x.editedStringVal));\n\n const hasValue = subCatDetailSkillProfiles.length > 0 ? true : false;\n let selectedSkillAttributes = [];\n\n if (skill.attributes && skill.attributes.length > 0) {\n selectedSkillAttributes = skill.attributes.filter((it) => !it.isHidden && this.state.skillAttributes.find((attribute) => it.id == attribute.skillAttributeId));\n }\n\n const skillHidden = skill.isHidden && !showHiddenSkills;\n\n var emptySkillLevels = [];\n for (let i = extraFrameworkLevels.length + 1; i <= 7; i++) {\n emptySkillLevels.push(\n \n {this.elementSkillExtraFramework(skill.skillsCode, `emptyLevel${subCategory.id}${skill.id}${i}`, skill.levels, subCatDetailSkillProfiles, category.colour, subCategory.colour, subCategory.skillColour, category, subCategory)}\n \n );\n }\n\n return (\n \n \n \n {hasValue && skill.attributes && skill.attributes.length > 0 ? (\n \n \n \n \n \n {attribute.link && !this.props.loginWithTeams ? (\n \n {attribute.attribute}\n \n ) : (\n attribute.attribute\n )}\n {index + 1 < selectedSkillAttributes.length && \", \"}\n \n \n );\n })}\n \n )}\n \n \n \n this.openEditSkillAttribute(\n {\n id: category.id,\n name: category.name,\n colour: category.colour,\n },\n {\n id: subCategory.id,\n name: subCategory.name,\n colour: subCategory.colour,\n skillColour: subCategory.skillColour,\n },\n skill\n )\n }\n />\n \n \n ) : (\n
\n \n \n \n {skill.skillsCode}\n \n \n {!category.isExtraFramework == true ? (\n \n {this.elementSkill(skill.skillsCode, 1, skill.levels, subCatDetailSkillProfiles, category.colour, subCategory.colour, subCategory.skillColour, category, subCategory)}\n {this.elementSkill(skill.skillsCode, 2, skill.levels, subCatDetailSkillProfiles, category.colour, subCategory.colour, subCategory.skillColour, category, subCategory)}\n {this.elementSkill(skill.skillsCode, 3, skill.levels, subCatDetailSkillProfiles, category.colour, subCategory.colour, subCategory.skillColour, category, subCategory)}\n {this.elementSkill(skill.skillsCode, 4, skill.levels, subCatDetailSkillProfiles, category.colour, subCategory.colour, subCategory.skillColour, category, subCategory)}\n {this.elementSkill(skill.skillsCode, 5, skill.levels, subCatDetailSkillProfiles, category.colour, subCategory.colour, subCategory.skillColour, category, subCategory)}\n {this.elementSkill(skill.skillsCode, 6, skill.levels, subCatDetailSkillProfiles, category.colour, subCategory.colour, subCategory.skillColour, category, subCategory)}\n {this.elementSkill(skill.skillsCode, 7, skill.levels, subCatDetailSkillProfiles, category.colour, subCategory.colour, subCategory.skillColour, category, subCategory)}\n \n ) : (\n \n {extraFrameworkLevels.map((extraFrameworkLevel, levelIndex) => {\n return this.elementSkillExtraFramework(skill.skillsCode, extraFrameworkLevel.id, skill.levels, subCatDetailSkillProfiles, category.colour, subCategory.colour, subCategory.skillColour, category, subCategory);\n })}\n {emptySkillLevels}\n \n )}\n {showEditSkill && (\n \n it.edited).length > 0 ? \" btn-warning-edit\" : \" btnEdit-Style\"}`}\n onClick={() =>\n this.openEditSkillProfile(\n {\n id: category.id,\n name: category.name,\n colour: category.colour,\n },\n {\n id: subCategory.id,\n name: subCategory.name,\n colour: subCategory.colour,\n skillColour: subCategory.skillColour,\n },\n skill,\n skillProfiles.filter((x) => x.skillCode === skill.skillsCode)\n )\n }\n >\n \n )}\n \n );\n })}\n \n );\n }\n })}\n \n \n \n \n );\n } else {\n return
\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n authPersonId: state.auth.personId,\n loginWithTeams: state.auth.loginWithTeams,\n contentTranslations: state.content.contentTranslations,\n };\n};\n\nconst mapDispatchToProps = () => {\n return {};\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ManageJobSkillProfile);\n","import * as authActions from \"../../../store/actions/authAction\";\nimport * as categoryActions from \"../../../store/actions/categoryAction\";\nimport * as contentActions from \"../../../store/actions/contentAction\";\nimport * as jobActions from \"../../../store/actions/jobAction\";\nimport * as lorActions from \"../../../store/actions/lorAction\";\nimport * as adminCategoryActions from \"../../../store/admin/actions/adminCategoryActions\";\nimport * as adminPersonActions from \"../../../store/admin/actions/adminPersonActions\";\nimport { AlertDialog } from \"../../AlertDialog\";\nimport { ContentWrapperLg } from \"../../common/ContentWrapperLg\";\nimport { dismisAlert, generateAlert } from \"./../../../utils/alertUtils\";\nimport { contentTranslator } from \"./../../../utils/translatorUtils\";\nimport ManageJobDetail from \"./ManageJobDetail\";\nimport ManageJobDetailMatches from \"./ManageJobDetailMatches\";\nimport ManageJobLorProfile from \"./ManageJobLorProfile\";\nimport ManageJobNote from \"./ManageJobNote\";\nimport ManageJobSkillProfile from \"./ManageJobSkillProfile\";\nimport { HubConnectionBuilder } from \"@aspnet/signalr\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { withRouter } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport { Alert, Col, Container, Row, Spinner, Table } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\nconst messageHubHostname = process.env.NODE_ENV === \"development\" ? process.env.REACT_APP_MESSAGE_HUB_ENDPOINT : \"/messagehub\";\n\nconst largeContainer = {\n width: \"100%\",\n maxWidth: \"100%\",\n fontSize: \"11px\",\n};\n\nconst commonContainer = {\n fontSize: \"11px\",\n};\n\nconst headerStyle = {\n color: \"#2B2B2B\",\n fontSize: \"28px\",\n fontFamily: \"IBMPlexSans-Bold\",\n};\n\nconst buttonStyle = {\n marginLeft: \"10px\",\n};\n\nconst FileDownload = require(\"js-file-download\");\n\nconst signalRTimerMaxCount = 300;\n\nclass ManageJobProfile extends React.Component {\n constructor(props) {\n super(props);\n this.connection = null;\n this.state = {\n profileUpdating: this.props.profileUpdating,\n profileUpdatingSuccess: this.props.profileUpdatingSuccess,\n profileUpdatingError: this.props.profileUpdatingError,\n udpatedSkills: this.props.udpatedSkills,\n\n error: null,\n loading: true,\n alerts: [],\n jobId: null,\n job: null,\n loadingProfile: true,\n jobLorProfiles: [],\n jobSkillProfiles: [],\n jobSkillAttributes: [],\n jobLorAttributes: [],\n showHidden: false,\n showDetail: false,\n showEdit: false,\n profileVersions: [],\n selectedProfileVersion: null,\n willCreateNewVersion: false,\n skillProfilesEdit: [],\n editCount: 0,\n jobDetailIsUpdating: false,\n jobDetailUpdateSuccess: false,\n jobDetailNoteIsUpdating: false,\n extraFrameworkLevels: [],\n signalRTimerStarted: false,\n signalRTimerCount: 0,\n isTopSkillProfileLegendInViewport: false,\n isDivAnchorInViewport: false,\n showFloatingLegend: false,\n personsDropdown: [],\n };\n\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n document.addEventListener(\"scroll\", this.checkSkillProfileLegendInViewport);\n\n if (this.props.language) {\n this.props.onContent.getContentTranslations(this.props.language.id, \"SfiaAll-Menu-SfiaProfileMenu-SfiaProfile-Lors-Skills\").then(() => {\n this.setState({ contentLoading: this.props.contentLoading });\n\n this.initData();\n });\n } else {\n this.initData();\n }\n }\n\n componentWillUnmount() {\n document.removeEventListener(\"scroll\", this.checkSkillProfileLegendInViewport);\n }\n\n checkSkillProfileLegendInViewport = () => {\n const pathName = window.location.pathname;\n const isAdmin = pathName.includes(\"/admin\");\n\n let isTopSkillProfileLegendInViewport = this.state.isTopSkillProfileLegendInViewport;\n let isDivAnchorInViewport = this.state.isDivAnchorInViewport;\n\n //get how much pixels left to scrolling our ReactElement\n if (this.topSkillProfileLegendElement && this.divAnchorElement) {\n const topLegendTop = this.topSkillProfileLegendElement.getBoundingClientRect().top;\n const divAnchorTop = this.divAnchorElement.getBoundingClientRect().top - 200;\n\n isTopSkillProfileLegendInViewport = topLegendTop <= 0 ? false : true;\n isDivAnchorInViewport = divAnchorTop <= 0 ? false : true;\n\n this.setState({ isTopSkillProfileLegendInViewport, isDivAnchorInViewport });\n this.setState({ showFloatingLegend: !isTopSkillProfileLegendInViewport && isDivAnchorInViewport ? true : false });\n\n if (this.props.updateAdminFloatingLegendStatus) {\n this.props.updateAdminFloatingLegendStatus(isAdmin && !isTopSkillProfileLegendInViewport && isDivAnchorInViewport ? true : false);\n }\n }\n };\n\n initData = () => {\n this.props.onAuth.authCheckState().then(() => {\n const {\n match: { params },\n } = this.props;\n\n var jobId = params.id;\n\n this.connectSignalR(jobId);\n\n const fetchPersonsDropdown = this.props.personsDropdown && this.props.personsDropdown.length > 0 ? false : true;\n Promise.all([this.props.onJob.getJob(jobId), this.props.onJob.getJobProfileVersions(jobId), this.props.onLor.getLors(), this.props.onCategory.getCategories(), this.props.onAdminCategory.getExtraFrameworkLevels(), fetchPersonsDropdown && this.props.onPerson.getPersonsDropdown()])\n .then(() => {\n if (!(this.props.loading || this.props.jobsLoading || this.props.lorLoading || this.props.categoryLoading)) {\n const profileVersions = this.props.profileVersions;\n let selectedProfileVersion = null;\n if (profileVersions.length > 0) {\n selectedProfileVersion = {\n version: profileVersions[0].version,\n sfiaVersion: profileVersions[0].sfiaVersion,\n };\n }\n this.setState(\n {\n jobId,\n loading: this.props.loading || this.props.jobsLoading || this.props.lorLoading || this.props.categoryLoading || (fetchPersonsDropdown && this.props.personsLoading),\n job: this.props.job,\n profileVersions: this.props.profileVersions.map((it) => {\n return {\n value: `Version ${it.version}`,\n label: `v${it.version} - ${new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(it.createdOn))}`,\n version: it.version,\n sfiaVersion: it.sfiaVersion,\n createdOn: it.createdOn,\n };\n }),\n selectedProfileVersion: {\n value: `Version ${this.props.profileVersions[0].version}`,\n label: `v${this.props.profileVersions[0].version} - ${new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(this.props.profileVersions[0].createdOn))}`,\n version: this.props.profileVersions[0].version,\n sfiaVersion: this.props.profileVersions[0].sfiaVersion,\n createdOn: this.props.profileVersions[0].createdOn,\n },\n personsDropdown: this.props.personsDropdown,\n },\n () => {\n Promise.all([\n this.props.onJob.getJobLorProfiles(jobId, selectedProfileVersion && selectedProfileVersion.sfiaVersion, selectedProfileVersion && selectedProfileVersion.version),\n this.props.onJob.getJobSkillProfiles(jobId, selectedProfileVersion && selectedProfileVersion.sfiaVersion, selectedProfileVersion && selectedProfileVersion.version),\n this.props.onJob.getJobSkillAttributes(jobId),\n this.props.onJob.getJobLorAttributes(jobId),\n ])\n .then(() => {\n if (!this.props.jobLoading && !this.props.jobError) {\n this.setState({\n jobLorProfiles: this.props.jobLorProfiles,\n jobSkillProfiles: this.props.jobSkillProfiles,\n jobSkillAttributes: this.props.jobSkillAttributes,\n jobLorAttributes: this.props.jobLorAttributes,\n });\n }\n\n this.setState({\n loadingProfile: this.props.jobLoading,\n });\n })\n .catch(() => {\n this.setState({\n loadingProfile: false,\n });\n });\n }\n );\n }\n })\n .catch(() => {\n this.setState({\n loading: false,\n });\n });\n });\n };\n\n componentWillUnmount() {\n this.disconnectSignalR();\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.profileUpdating !== this.props.profileUpdating) {\n this.setState({ profileUpdating: this.props.profileUpdating });\n }\n\n if (prevProps.profileUpdatingSuccess !== this.props.profileUpdatingSuccess || prevProps.profileUpdatingError !== this.props.profileUpdatingError || prevProps.udpatedSkills !== this.props.udpatedSkills) {\n this.setState({\n profileUpdatingSuccess: this.props.profileUpdatingSuccess,\n profileUpdatingError: this.props.profileUpdatingError,\n udpatedSkills: this.props.udpatedSkills,\n });\n\n if (this.props.profileUpdatingSuccess && this.props.udpatedSkills) {\n const udpatedSkills = this.props.udpatedSkills;\n const { selectedProfileVersion, jobLorProfiles, jobSkillProfiles } = this.state;\n let profileVersions = this.state.profileVersions;\n\n const lorProfileResponses = udpatedSkills ? udpatedSkills.jobLorProfileResponses : [];\n const skillProfileResponses = udpatedSkills ? udpatedSkills.jobSkillProfileResponses : [];\n\n let version = null;\n if (lorProfileResponses.length > 0) {\n version = {\n version: lorProfileResponses[0].version,\n sfiaVersion: lorProfileResponses[0].sfiaVersion,\n createdOn: lorProfileResponses[0].createdOn,\n };\n } else if (skillProfileResponses.length > 0) {\n version = {\n version: skillProfileResponses[0].version,\n sfiaVersion: skillProfileResponses[0].sfiaVersion,\n createdOn: skillProfileResponses[0].createdOn,\n };\n }\n\n if (version.sfiaVersion != (selectedProfileVersion ? selectedProfileVersion.sfiaVersion : null) || version.version != (selectedProfileVersion ? selectedProfileVersion.version : null)) {\n const zeroVersion = profileVersions.find((it) => it.version == 0 && it.sfiaVersion == version.sfiaVersion);\n if (zeroVersion) {\n const index = profileVersions.indexOf(zeroVersion);\n if (index !== -1) {\n profileVersions.splice(index, 1);\n }\n }\n\n this.setState({\n profileVersions: [\n {\n value: `Version ${version.version}`,\n label: `v${version.version} - ${new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(version.createdOn))}`,\n version: version.version,\n sfiaVersion: version.sfiaVersion,\n createdOn: version.createdOn,\n },\n ...profileVersions,\n ],\n selectedProfileVersion: {\n value: `Version ${version.version}`,\n label: `v${version.version} - ${new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(version.createdOn))}`,\n version: version.version,\n sfiaVersion: version.sfiaVersion,\n createdOn: version.createdOn,\n },\n jobLorProfiles: [...lorProfileResponses],\n jobSkillProfiles: [...skillProfileResponses],\n });\n } else {\n if (lorProfileResponses) {\n jobLorProfiles\n .filter((it) => it.editedNumericVal)\n .forEach((lorProfile) => {\n if (lorProfileResponses.find((lorProfileResponse) => lorProfileResponse.id === lorProfile.id)) {\n const lorProfileResponse = lorProfileResponses.find((lorProfileResponse) => lorProfileResponse.id === lorProfile.id);\n lorProfile.numericVal = lorProfileResponse.numericVal;\n lorProfile.stringVal = lorProfileResponse.stringVal;\n lorProfile.labelVal = lorProfileResponse.labelVal;\n\n lorProfile.editedNumericVal = null;\n lorProfile.editedStringVal = null;\n lorProfile.editedLabelVal = null;\n lorProfile.edited = null;\n }\n });\n\n lorProfileResponses\n .filter(\n (it) =>\n !jobLorProfiles\n .map((lorProfile) => {\n return lorProfile.id;\n })\n .includes(it.id)\n )\n .forEach((lorProfile) => {\n jobLorProfiles.push(lorProfile);\n });\n\n this.setState({ jobLorProfiles: [...jobLorProfiles] });\n }\n\n if (skillProfileResponses) {\n jobSkillProfiles\n .filter((it) => it.editedNumericVal)\n .forEach((skillProfile) => {\n if (skillProfileResponses.find((skillProfileResponse) => skillProfileResponse.id === skillProfile.id || (skillProfileResponse.skillCode === skillProfile.skillCode && skillProfileResponse.level === skillProfile.level))) {\n const skillProfileResponse = skillProfileResponses.find((skillProfileResponse) => skillProfileResponse.id === skillProfile.id || (skillProfileResponse.skillCode === skillProfile.skillCode && skillProfileResponse.level === skillProfile.level));\n\n skillProfile.id = skillProfileResponse.id;\n skillProfile.numericVal = skillProfileResponse.numericVal;\n skillProfile.stringVal = skillProfileResponse.stringVal;\n skillProfile.labelVal = skillProfileResponse.labelVal;\n\n skillProfile.editedNumericVal = null;\n skillProfile.editedStringVal = null;\n skillProfile.editedLabelVal = null;\n skillProfile.edited = null;\n }\n });\n\n skillProfileResponses\n .filter(\n (it) =>\n !jobSkillProfiles\n .map((skillProfile) => {\n return skillProfile.id;\n })\n .includes(it.id)\n )\n .forEach((skillProfile) => {\n jobSkillProfiles.push(skillProfile);\n });\n\n this.setState({ jobSkillProfiles: [...jobSkillProfiles] });\n }\n }\n }\n\n if (this.props.profileUpdatingError) {\n this.generateAlert(\"danger\", this.props.profileUpdatingError);\n }\n\n if (this.props.profileUpdatingSuccess || this.props.profileUpdatingError) {\n setTimeout(() => {\n this.props.onJob.clearUpdateJobSkillProfiles();\n }, alertAutoHideInterval);\n }\n }\n }\n\n connectSignalR = (jobId) => {\n if (!this.connection) {\n this.connection = new HubConnectionBuilder().withUrl(messageHubHostname).build();\n\n this.connection.on(`UpdateJobProfilesNotification${jobId}`, (response) => {\n console.log(\"response\", response);\n if (response.action == \"UpdateJobProfiles\") {\n if (response.status == \"Success\") {\n let udpatedSkills = response.data;\n this.props.onJob.updateJobSkillProfilesSuccess(udpatedSkills);\n } else {\n this.props.onJob.updateJobSkillProfilesFail(response.message);\n }\n }\n });\n\n this.connection.start().catch((err) => console.error(err.toString()));\n this.startTimer();\n }\n };\n\n disconnectSignalR = () => {\n if (this.connection) {\n this.connection.stop().then(() => {\n this.connection = null;\n });\n }\n };\n\n renderSkillProfileHeader = () => {\n let setRefTopLegend = (el) => {\n this.topSkillProfileLegendElement = el;\n };\n\n return (\n \n \n \n \n Skills Profile Key\n \n \n Not Selected\n \n \n Required\n \n \n Desirable\n \n \n \n \n \n
\n );\n };\n\n handleChangeVersion = (selectedProfileVersion) => {\n this.setState({ selectedProfileVersion, loadingProfile: true });\n\n Promise.all([this.props.onJob.getJobLorProfiles(this.state.jobId, selectedProfileVersion.sfiaVersion, selectedProfileVersion.version), this.props.onJob.getJobSkillProfiles(this.state.jobId, selectedProfileVersion.sfiaVersion, selectedProfileVersion.version)])\n .then(() => {\n if (!this.props.jobLoading && !this.props.jobError) {\n this.setState({\n jobLorProfiles: this.props.jobLorProfiles,\n jobSkillProfiles: this.props.jobSkillProfiles,\n });\n }\n\n this.setState({\n loadingProfile: this.props.jobLoading,\n });\n })\n .catch(() => {\n this.setState({\n loadingProfile: false,\n });\n });\n };\n\n handleChangeShowDetail = () => {\n this.setState({\n showDetail: !this.state.showDetail,\n });\n };\n\n handleChangeShowHidden = () => {\n this.setState({\n showHidden: !this.state.showHidden,\n });\n };\n\n handleChangeShowEdit = () => {\n let willCreateNewVersion = false;\n\n if (!this.state.showEdit) {\n willCreateNewVersion = true;\n this.setState({ showEdit: !this.state.showEdit, willCreateNewVersion });\n } else if (this.state.skillProfilesEdit.length > 0) {\n if (window.confirm(\"You have some updates, are you sure to cancel the updates?\")) {\n let { jobLorProfiles, jobSkillProfiles } = this.state;\n if (jobLorProfiles) {\n jobLorProfiles.forEach((it) => {\n it.edited = false;\n it.editedNumericVal = null;\n });\n }\n\n if (jobSkillProfiles) {\n jobSkillProfiles.forEach((it) => {\n it.edited = false;\n it.editedNumericVal = null;\n });\n }\n\n this.setState({\n skillProfilesEdit: [],\n editCount: 0,\n showEdit: !this.state.showEdit,\n jobLorProfiles: jobLorProfiles.filter((it) => it.id),\n jobSkillProfiles: jobSkillProfiles.filter((it) => it.id),\n });\n }\n } else {\n this.setState({ showEdit: !this.state.showEdit, willCreateNewVersion });\n }\n };\n\n handleEditProfileSkill = (profileEdit) => {\n let { skillProfilesEdit } = this.state;\n\n let oriProfileEdit = skillProfilesEdit.find(\n (it) => (it.id && it.id === profileEdit.id && it.source == profileEdit.source) || (!it.id && it.source == profileEdit.source && ((it.lorCode && it.lorCode === profileEdit.lorCode) || (it.skillCode && it.skillCode === profileEdit.skillCode && it.level === profileEdit.level)))\n );\n\n if (oriProfileEdit) {\n oriProfileEdit.numericVal = profileEdit.numericVal;\n oriProfileEdit.editedNumericVal = profileEdit.editedNumericVal;\n oriProfileEdit.editedLabelVal = profileEdit.editedLabelVal;\n\n const editCount = skillProfilesEdit.filter((it) => (it.id && it.edited) || (!it.id && it.editedNumericVal != 0)).length;\n this.setState({ skillProfilesEdit: skillProfilesEdit, editCount });\n } else {\n skillProfilesEdit = [...skillProfilesEdit, profileEdit];\n\n const editCount = skillProfilesEdit.filter((it) => (it.id && it.edited) || (!it.id && it.editedNumericVal != 0)).length;\n this.setState({ skillProfilesEdit, editCount });\n }\n };\n\n handleEditProfileSkills = (profilesEdit) => {\n let { skillProfilesEdit } = this.state;\n\n profilesEdit.forEach((profileEdit) => {\n let oriProfileEdit = skillProfilesEdit.find(\n (it) => (it.id && it.id === profileEdit.id && it.source == profileEdit.source) || (!it.id && it.source == profileEdit.source && ((it.lorCode && it.lorCode === profileEdit.lorCode) || (it.skillCode && it.skillCode === profileEdit.skillCode && it.level === profileEdit.level)))\n );\n\n if (oriProfileEdit) {\n oriProfileEdit.numericVal = profileEdit.numericVal;\n oriProfileEdit.editedNumericVal = profileEdit.editedNumericVal;\n oriProfileEdit.editedLabelVal = profileEdit.editedLabelVal;\n } else {\n skillProfilesEdit = [...skillProfilesEdit, profileEdit];\n }\n });\n\n const editCount = skillProfilesEdit.length;\n this.setState({ skillProfilesEdit: skillProfilesEdit, editCount });\n };\n\n handleSaveSkillUpdate = () => {\n const { jobId, selectedProfileVersion, willCreateNewVersion, skillProfilesEdit } = this.state;\n const lorProfiles = this.state.jobLorProfiles;\n const skillProfiles = this.state.jobSkillProfiles;\n\n if (willCreateNewVersion) {\n lorProfiles.forEach((profile) => {\n if (!skillProfilesEdit.find((it) => it.id == profile.id) || !profile.id) {\n skillProfilesEdit.push({\n sfiaVersion: selectedProfileVersion ? selectedProfileVersion.sfiaVersion : null,\n version: selectedProfileVersion ? selectedProfileVersion.version * 1 + 1 : 1,\n createdOn: new Date(),\n updatedOn: new Date(),\n lor: profile.lor,\n lorCode: profile.lorCode,\n level: profile.numericVal * 1,\n stringVal: profile.stringVal,\n numericVal: profile.numericVal,\n labelVal: profile.labelVal,\n profileType: profile.profileType,\n isEditable: profile.isEditable,\n source: \"lorProfiles\",\n });\n }\n });\n\n skillProfiles.forEach((profile) => {\n if (!skillProfilesEdit.find((it) => it.id == profile.id)) {\n skillProfilesEdit.push({\n sfiaVersion: selectedProfileVersion ? selectedProfileVersion.sfiaVersion : null,\n version: selectedProfileVersion ? selectedProfileVersion.version * 1 + 1 : 1,\n createdOn: new Date(),\n updatedOn: new Date(),\n category: profile.category,\n subCategory: profile.subCategory,\n skill: profile.skill,\n skillCode: profile.skillCode,\n level: profile.level,\n isExtraFramework: profile.isExtraFramework,\n extraFrameworkLevel: profile.extraFrameworkLevel,\n extraFrameworkLevelId: profile.extraFrameworkLevelId,\n stringVal: profile.stringVal,\n numericVal: profile.numericVal,\n labelVal: profile.labelVal,\n profileType: profile.profileType,\n isEditable: profile.isEditable,\n source: \"skillProfiles\",\n });\n }\n });\n\n skillProfilesEdit.forEach((skillProfile) => {\n skillProfile.id = null;\n skillProfile.sfiaVersion = selectedProfileVersion ? selectedProfileVersion.sfiaVersion : null;\n skillProfile.version = selectedProfileVersion ? selectedProfileVersion.version * 1 + 1 : 1;\n skillProfile.createdOn = new Date();\n skillProfile.updatedOn = new Date();\n skillProfile.isEditable = true;\n\n if (skillProfile.editedStringVal) {\n skillProfile.stringVal = skillProfile.editedStringVal;\n skillProfile.numericVal = skillProfile.editedNumericVal;\n skillProfile.labelVal = skillProfile.editedLabelVal;\n }\n });\n } else {\n skillProfilesEdit.forEach((skillProfile) => {\n if (!skillProfile.id) {\n skillProfile.sfiaVersion = selectedProfileVersion.sfiaVersion;\n skillProfile.version = selectedProfileVersion.version;\n skillProfile.createdOn = selectedProfileVersion.createdOn;\n skillProfile.updatedOn = new Date();\n skillProfile.isEditable = true;\n } else {\n skillProfile.updatedOn = new Date();\n }\n });\n }\n\n this.props.onJob.updateJobSkillProfiles(\n jobId,\n skillProfilesEdit.filter((it) => it.id || it.editedNumericVal != 0)\n );\n\n if (lorProfiles) {\n lorProfiles.forEach((it) => {\n it.edited = false;\n });\n }\n\n if (skillProfiles) {\n skillProfiles.forEach((it) => {\n it.edited = false;\n });\n }\n\n this.setState({\n skillProfilesEdit: [],\n showEdit: !this.state.showEdit,\n jobLorProfiles: lorProfiles,\n jobSkillProfiles: skillProfiles,\n });\n };\n\n handleSaveJobDetailUpdate = (job) => {\n this.setState({ jobDetailIsUpdating: true, jobDetailUpdateSuccess: false });\n\n this.props.onJob.updateJob(job.id, job).then(() => {\n if (!this.props.jobIsUpdating) {\n if (!this.props.jobsError) {\n this.generateAlert(\"success\", \"Update job success.\");\n this.setState({ jobDetailUpdateSuccess: true });\n } else {\n this.generateAlert(\"danger\", this.props.jobsError.errData.Message);\n }\n }\n\n this.setState({ jobDetailIsUpdating: this.props.jobIsUpdating });\n });\n };\n\n handleSaveJobNoteUpdate = (job) => {\n this.setState({ jobDetailNoteIsUpdating: true });\n\n this.props.onJob.updateJobNote(job.id, job.comment).then(() => {\n if (!this.props.jobIsUpdating) {\n if (!this.props.jobsError) {\n this.generateAlert(\"success\", \"Update job note success.\");\n } else {\n this.generateAlert(\"danger\", this.props.jobsError.errData.Message);\n }\n }\n\n this.setState({ jobDetailNoteIsUpdating: this.props.jobIsUpdating });\n });\n };\n\n updateSkillAttributes = (updatedJobSkillAttributes) => {\n this.setState({ jobSkillAttributes: [...updatedJobSkillAttributes] });\n };\n\n updateLorAttributes = (updatedJobLorAttributes) => {\n this.setState({ jobLorAttributes: [...updatedJobLorAttributes] });\n };\n\n handlePrintDefinition = () => {\n const job = this.state.job;\n\n this.props.onJob.printJobReport(job.id).then(() => {\n if (!this.props.loadingPrint) {\n if (this.props.printData) {\n let reportFormat = \"PDF\";\n if (this.props.jobProfileReportFormat) {\n reportFormat = this.props.jobProfileReportFormat;\n }\n\n FileDownload(this.props.printData, `${job.name}_SkillsTx_Requirement_Profile.${reportFormat == \"PDF\" ? \"pdf\" : \"docx\"}`);\n }\n }\n });\n };\n\n navigateBack = () => {\n localStorage.setItem(\"routeGoBack\", \"TRUE\");\n this.props.history.goBack();\n };\n\n startTimer = () => {\n const signalRTimerStarted = this.state.signalRTimerStarted;\n\n if (!signalRTimerStarted) {\n setInterval(() => {\n let signalRTimerCount = this.state.signalRTimerCount + 1;\n\n if (signalRTimerCount >= signalRTimerMaxCount && !this.props.skillsProfileUpdating) {\n signalRTimerCount = 0;\n\n this.disconnectSignalR();\n setTimeout(() => {\n const {\n match: { params },\n } = this.props;\n\n var jobId = params.id;\n\n this.connectSignalR(jobId);\n }, 100);\n }\n\n this.setState({ signalRTimerCount: signalRTimerCount });\n }, 1000);\n\n this.setState({ signalRTimerStarted: true });\n }\n };\n\n render() {\n let setRefAnchor = (el) => {\n this.divAnchorElement = el;\n };\n\n const { pageAssignments, isManagedByOwner, loginWithTeams } = this.props;\n\n const pageAssignment = pageAssignments ? pageAssignments.find((it) => it.pageName == \"Manage Requirements\") : null;\n\n const pathName = window.location.pathname;\n const isAdmin = pathName.includes(\"/admin\");\n\n const { skillProfilesEdit, editCount, job, jobLorProfiles } = this.state;\n const { lors } = this.props;\n const { authPersonId } = this.props;\n\n let enableSave = false;\n if (skillProfilesEdit.length != 0 && editCount > 0) {\n const visibleLors = lors\n .filter((it) => !it.isHidden && !it.optional)\n .map((it) => {\n return {\n lor: it.name,\n lorCode: it.lorCode,\n };\n });\n\n let lorProfilesAdded = lors\n .map((lor) => {\n const lorSkillProfileEdit = skillProfilesEdit.find((it) => it.source == \"lorProfiles\" && it.lorCode == lor.lorCode);\n return { lorCode: lor.lorCode, numericVal: lorSkillProfileEdit ? (lorSkillProfileEdit.numericVal ? lorSkillProfileEdit.numericVal : lorSkillProfileEdit.editedNumericVal) : null };\n })\n .filter((it) => it.numericVal);\n\n let lorProfilesCheck = lors\n .map((lor) => {\n const lorSkillProfileEdit = skillProfilesEdit.find((it) => it.source == \"lorProfiles\" && it.lorCode == lor.lorCode);\n const jobLorProfile = jobLorProfiles.find((it) => it.lorCode == lor.lorCode);\n return { lorCode: lor.lorCode, numericVal: lorSkillProfileEdit ? (lorSkillProfileEdit.numericVal ? lorSkillProfileEdit.numericVal : lorSkillProfileEdit.editedNumericVal) : jobLorProfile ? jobLorProfile.numericVal : null };\n })\n .filter((it) => it.numericVal);\n\n const missingAddedLors = visibleLors.filter((it) => !lorProfilesAdded.find((l) => l.lorCode == it.lorCode));\n const missingCheckLors = visibleLors.filter((it) => !lorProfilesCheck.find((l) => l.lorCode == it.lorCode));\n const missingLorProfiles = visibleLors.filter((it) => !jobLorProfiles.find((l) => l.lorCode == it.lorCode));\n\n enableSave = ((missingCheckLors.length == 0 || missingAddedLors.length == 0) && skillProfilesEdit.filter((it) => it.source == \"skillProfiles\" && it.editedNumericVal != 0).length > 0) || ((missingCheckLors.length == 0 || missingLorProfiles.length == 0) && skillProfilesEdit.length > 0);\n }\n\n return (\n \n \n {this.state.profileUpdating &&
Update requirement profiles still in progress }\n {!this.state.profileUpdating && this.state.profileUpdatingSuccess && (\n
\n )}\n {!this.state.profileUpdating && !this.state.profileUpdatingSuccess && this.state.profileUpdatingError && (\n
\n )}\n
\n
\n
\n ) : (\n \n \n \n {job && job.name}\n
\n \n \n \n Version : {\" \"}\n \n \n \n \n {`You have ${editCount} pending skill changes.`} \n
\n \n )}\n {this.props.containerConfig && this.props.containerConfig.allowShowHiddenSkills && (\n \n {this.state.showHidden ? \"Hide Hidden Skills\" : \"Show Hidden Skills\"}\n \n )}\n \n {this.state.showDetail || this.state.showEdit ? \"Hide Detail\" : \"Show Detail\"}\n \n {this.state.showEdit && (\n \n Save\n \n )}\n {(isManagedByOwner || (pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Edit\" && op.allow == true))) &&\n this.state.selectedProfileVersion &&\n this.state.selectedProfileVersion.sfiaVersion == this.state.profileVersions[0].sfiaVersion &&\n this.state.selectedProfileVersion.version == this.state.profileVersions[0].version &&\n (!job.ownerId || job.ownerId == authPersonId) && (\n \n {this.state.showEdit ? \"Cancel\" : \"Edit Profile\"}\n \n )}\n \n {!this.props.loadingPrint ? \"Print Report\" : \n {!isManagedByOwner && (\n \n Back\n \n )}\n \n
\n \n {this.state.loadingProfile ? (\n \n
\n ) : (\n \n \n \n {this.renderSkillProfileHeader()}\n \n \n \n )}\n \n
\n op.operation == \"Edit\" && op.allow == true) ? true : false)) && (!job.ownerId || job.ownerId == authPersonId)}\n isUpdating={this.state.jobDetailIsUpdating}\n updateSuccess={this.state.jobDetailUpdateSuccess}\n handleSaveJobDetailUpdate={this.handleSaveJobDetailUpdate}\n containerConfig={this.props.containerConfig}\n personsDropdown={this.state.personsDropdown}\n >\n \n \n \n
\n op.operation == \"Edit\" && op.allow == true) ? true : false)) && (!job.ownerId || job.ownerId == authPersonId)}\n authPersonId={authPersonId}\n isUpdating={this.state.jobDetailNoteIsUpdating}\n handleSaveJobNoteUpdate={this.handleSaveJobNoteUpdate}\n >\n {!isAdmin && (\n \n \n \n \n \n \n Skills Profile Key\n \n \n Not Selected\n \n \n Required\n \n \n Desirable\n \n \n \n \n \n
\n \n \n )}\n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n authPersonId: state.auth.personId,\n jobProfileReportFormat: state.auth.jobProfileReportFormat,\n selfAssessedProfileReportFormat: state.auth.selfAssessedProfileReportFormat,\n loading: state.auth.loading,\n error: state.auth.error,\n loginWithTeams: state.auth.loginWithTeams,\n\n lorLoading: state.lor.loading,\n lorError: state.lor.error,\n lors: state.lor.lors,\n\n categoryLoading: state.category.loading,\n categoryError: state.category.error,\n categories: state.category.categories,\n\n adminCategoryLoading: state.adminCategory.loading,\n adminCategoryError: state.adminCategory.error,\n extraFrameworkLevels: state.adminCategory.extraFrameworkLevels,\n\n jobsLoading: state.job.loading,\n jobsError: state.job.error,\n job: state.job.job,\n jobIsUpdating: state.job.isUpdating,\n jobLorProfiles: state.job.jobLorProfiles,\n jobSkillProfiles: state.job.jobSkillProfiles,\n jobSkillAttributes: state.job.jobSkillAttributes,\n jobLorAttributes: state.job.jobLorAttributes,\n profileVersions: state.job.profileVersions,\n\n profileUpdating: state.job.profileUpdating,\n profileUpdatingSuccess: state.job.profileUpdatingSuccess,\n profileUpdatingError: state.job.profileUpdatingError,\n udpatedSkills: state.job.udpatedSkills,\n\n loadingPrint: state.job.loadingPrint,\n printData: state.job.printData,\n\n pageAssignments: state.adminPerson.pageAssignments,\n\n language: state.language.language,\n languages: state.language.languages,\n contentTranslations: state.content.contentTranslations,\n contentLoading: state.content.loading,\n contentError: state.content.error,\n\n containerConfig: state.config.containerConfig,\n\n personsLoading: state.adminPerson.loading,\n personsDropdown: state.adminPerson.personsDropdown,\n personsError: state.adminPerson.error,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onJob: bindActionCreators(jobActions, dispatch),\n onLor: bindActionCreators(lorActions, dispatch),\n onCategory: bindActionCreators(categoryActions, dispatch),\n onAdminCategory: bindActionCreators(adminCategoryActions, dispatch),\n onContent: bindActionCreators(contentActions, dispatch),\n onPerson: bindActionCreators(adminPersonActions, dispatch),\n };\n};\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(ManageJobProfile));\n","import * as lorActions from \"../../../store/actions/lorAction\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Form, FormGroup, Label, ListGroup, ListGroupItem, Modal, ModalBody, ModalFooter, ModalHeader, Row } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\n\nclass LorAttributeBulkUpload extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n showDialog: false,\n selectedFiles: [],\n isImporting: false,\n importMessage: null,\n };\n\n this.excelRef = React.createRef();\n }\n\n componentDidMount() {}\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n }\n }\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.excelRef.current.value = null;\n this.setState({ showDialog: !showDialog, selectedFiles: [] });\n };\n\n handleDownloadTemplate = () => {\n this.props.onLor.exportLorAttributesDataExcelTemplate().then(() => {\n if (!this.props.loadingExport && !this.props.lorError) {\n if (this.props.exportData) {\n FileDownload(this.props.exportData, `UploadLorAttributesTemplate.xlsx`);\n }\n }\n });\n };\n\n handleSelectFiles = () => {\n this.excelRef.current.click();\n };\n\n handleSelectExcels = (event) => {\n const selectedFiles = this.state.selectedFiles;\n\n if (event.target.files && event.target.files.length > 0) {\n this.setState({ selectedFiles: [...selectedFiles, ...event.target.files] });\n }\n };\n\n handlePerformUpload = () => {\n this.setState({ isImporting: true });\n this.props.onLor.importLorAttributesDataExcel(this.state.selectedFiles).then(() => {\n if (!this.props.isImporting) {\n if (!this.props.lorError) {\n this.excelRef.current.value = null;\n\n this.props.generateAlert(\"success\", \"Import lor attributes success.\");\n this.togleDialogModal();\n this.props.handleImportSuccess();\n } else {\n this.props.generateAlert(\"danger\", this.props.lorError.errData.Message);\n }\n }\n\n this.setState({ isImporting: this.props.isImporting });\n });\n };\n\n render() {\n const { selectedFiles } = this.state;\n\n return (\n \n \n Import Lor Attributes \n \n \n \n \n {\n this.handlePerformUpload();\n }}\n disabled={selectedFiles.length == 0 || this.state.isImporting}\n >\n Process Upload\n \n \n Close\n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n lorError: state.lor.error,\n loadingExport: state.lor.loadingExport,\n exportData: state.lor.exportData,\n\n isImporting: state.lor.isImporting,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onLor: bindActionCreators(lorActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(LorAttributeBulkUpload);\n","import React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\nimport * as lorActions from \"../../../store/actions/lorAction\";\nimport changeInput from \"../../../utils/changeInput\";\n\nclass UpdateLor extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n showDialog: false,\n isUpdating: false,\n form: {\n name: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n lorCode: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n category: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n categoryColor: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n lorColor: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n isFormValid: true,\n };\n }\n\n componentDidMount() {}\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n this.prepareFormState();\n }\n }\n\n prepareFormState = () => {\n const lor = this.props.lor;\n if (lor) {\n this.setState({\n form: {\n name: {\n validation: {\n required: true,\n },\n value: lor.name,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n lorCode: {\n validation: {\n required: true,\n },\n value: lor.lorCode,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n category: {\n validation: {\n required: false,\n },\n value: lor.category,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n categoryColor: {\n validation: {\n required: false,\n },\n value: lor.categoryColor,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n lorColor: {\n validation: {\n required: false,\n },\n value: lor.lorColor,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n isFormValid: true,\n });\n }\n };\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.setState({\n showDialog: !showDialog,\n });\n };\n\n handleChange = (event) => {\n const { name, value } = event.target;\n\n const updateState = changeInput(this.state.form, name, value);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n handlePerformSave = () => {\n const form = this.state.form;\n const lor = {\n name: form.name.value,\n lorCode: form.lorCode.value,\n category: form.category.value,\n categoryColor: form.category.value ? (form.categoryColor.value ? form.categoryColor.value : \"#69849c\") : null,\n lorColor: form.category.value ? (form.lorColor.value ? form.lorColor.value : \"#ecf0f5\") : null,\n };\n this.setState({ isUpdating: true });\n this.props.onLor.updateLor(this.props.lor.id, lor).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.error) {\n this.props.generateAlert(\"success\", \"LoR updated.\");\n this.togleDialogModal();\n } else {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n }\n }\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n handleChangeComplete = (name, color) => {\n const form = this.state.form;\n\n if (name == \"categoryColor\") {\n form.categoryColor.value = color.hex;\n } else if (name == \"lorColor\") {\n form.lorColor.value = color.hex;\n }\n\n this.setState({ form });\n };\n\n render() {\n const { form } = this.state;\n\n const popover = {\n position: \"absolute\",\n zIndex: \"2\",\n };\n const cover = {\n position: \"fixed\",\n top: \"0px\",\n right: \"0px\",\n bottom: \"0px\",\n left: \"0px\",\n };\n\n return (\n \n \n Update LoR Category \n \n \n \n \n {\n this.handlePerformSave();\n }}\n disabled={!this.state.isFormValid}\n >\n Save\n \n \n Close\n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n error: state.lor.error,\n isUpdating: state.lor.isUpdating,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onLor: bindActionCreators(lorActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(UpdateLor);\n","import * as authActions from \"../../../store/actions/authAction\";\nimport * as lorActions from \"../../../store/actions/lorAction\";\nimport { dismisAlert, generateAlert } from \"../../../utils/alertUtils\";\nimport { filterArray } from \"../../../utils/filterUtils\";\nimport { ContentWrapperLg } from \"../../common/ContentWrapperLg\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport { SkillsTxTableClearSearch } from \"../../common/SkillsTxTableClearSearch\";\nimport { SkillsTxTableSearchBar } from \"../../common/SkillsTxTableSearchBar\";\nimport LorAttributeBulkUpload from \"./LorAttributeBulkUpload\";\nimport UpdateLor from \"./UpdateLor\";\nimport { faFileExcel, faPenToSquare, faSync, faSquarePen, faChevronLeft, faPlus, faMinusCircle } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { withRouter } from \"react-router-dom\";\nimport { Button, ButtonGroup, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalHeader, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nconst headerStyle = {\n color: \"#2B2B2B\",\n fontSize: \"28px\",\n fontFamily: \"IBMPlexSans-Bold\",\n};\n\nconst manageAttributeWrapper = {\n width: \"100%\",\n maxWidth: \"100%\",\n fontSize: \"11px\",\n};\n\nclass ManageLor extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: null,\n loading: true,\n alerts: [],\n lors: [],\n searchProperties: [\"name\", \"category\", \"lorCode\", \"strattributes\"],\n showLoadingPanel: false,\n showDialogImportTs: null,\n editMode: false,\n editedLor: null,\n editAttribute: false,\n optionHidden: [\n { label: \"Yes\", value: true },\n { label: \"No\", value: false },\n ],\n editedAttribute: null,\n lorAttributeIsUpdating: false,\n };\n\n this.filterArray = filterArray.bind(this);\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.editAttributeAnchor = React.createRef();\n }\n\n scroll(ref) {\n ref.current.scrollIntoView({ behavior: \"smooth\" });\n }\n\n componentDidMount() {\n this.props.onAuth.authCheckState().then(() => {\n this.initData();\n });\n }\n\n componentWillUnmount() {}\n\n componentDidUpdate(prevProps) {\n if (prevProps.lors !== this.props.lors) {\n this.setState({\n lors: this.reformLors(this.props.lors),\n });\n }\n }\n\n initData = () => {\n this.props.onLor.getLors().then(() => {\n const lors = this.reformLors(this.props.lors);\n\n this.setState({\n lors,\n });\n\n this.setState({ loading: this.props.loading || this.props.lorLoading });\n });\n };\n\n reformLors = (lors) => {\n return lors.map((it) => {\n return {\n id: it.id,\n name: it.name,\n description: it.description,\n lorCode: it.lorCode,\n category: it.category != null ? it.category : \"Generic Attributes\",\n categoryColor: it.category != null ? it.categoryColor : \"#69849c\",\n lorColor: it.category != null ? it.lorColor : \"#ecf0f5\",\n sequence: it.sequence,\n canHide: it.canHide,\n isHidden: it.isHidden,\n levels: it.levels,\n optional: it.optional,\n attributes: it.attributes ? it.attributes : [],\n strattributes: it.attributes\n ? it.attributes\n .map((it) => {\n return it.attribute;\n })\n .sort((a, b) => (a > b ? 1 : -1))\n .join(\", \")\n : \"\",\n };\n });\n };\n\n handleRefresh = () => {\n this.initData();\n };\n\n handleClearSelection = () => {\n const interventions = this.state.interventions;\n\n interventions.forEach((it) => {\n it.toggleSelected = false;\n });\n\n this.setState({ interventions: [...interventions] });\n };\n\n onTableFilterChange = (e, searchType) => {\n let columnSearchKeywords = this.state.columnSearchKeywords;\n if (!columnSearchKeywords) {\n columnSearchKeywords = [];\n }\n\n if (columnSearchKeywords.find((it) => it.name == e.target.name)) {\n let columnSearchKeyword = columnSearchKeywords.find((it) => it.name == e.target.name);\n columnSearchKeyword.value = e.target.value;\n } else {\n columnSearchKeywords.push({\n name: e.target.name,\n value: e.target.value,\n searchType,\n });\n }\n\n this.setState({ columnSearchKeywords });\n };\n\n openEditLor = (lor) => {\n this.setState({ showDialogLorDetailTs: new Date(), selectedLor: lor });\n };\n\n handleHideLor = (lor) => {\n this.setState({ showLoadingPanel: true, loadingPanelHeader: null, loadingPanelBody: \"Please wait ...\" });\n this.props.onLor.updateLorSetIsHidden(lor.id, !lor.isHidden).then(() => {\n this.setState({ showLoadingPanel: this.props.isUpdating });\n });\n };\n\n handleLorOptional = (lor) => {\n this.setState({ showLoadingPanel: true, loadingPanelHeader: null, loadingPanelBody: \"Please wait ...\" });\n this.props.onLor.updateLorSetOptional(lor.id, !lor.optional).then(() => {\n this.setState({ showLoadingPanel: this.props.isUpdating });\n });\n };\n\n renderLoadingPanel() {\n if (this.state.showLoadingPanel) {\n return (\n \n {this.state.loadingPanelHeader && {this.state.loadingPanelHeader} }\n \n \n \n );\n } else {\n return \"\";\n }\n }\n\n pad2 = (n) => {\n return (n < 10 ? \"0\" : \"\") + n;\n };\n\n handleExportAttributes = () => {\n this.props.onLor.exportLorAttributesDataExcel().then(() => {\n if (!this.props.loadingExport && !this.props.lorError) {\n if (this.props.exportData) {\n var today = new Date();\n var strToday = today.getFullYear() + this.pad2(today.getMonth() + 1) + this.pad2(today.getDate()) + \"_\" + this.pad2(today.getHours()) + this.pad2(today.getMinutes()) + this.pad2(today.getSeconds());\n FileDownload(this.props.exportData, `ExportLorAttributes_${strToday}.xlsx`);\n }\n }\n });\n };\n\n handleImportAttributes = () => {\n this.setState({ showDialogImportTs: new Date() });\n };\n\n handleImportSuccess = () => {\n this.props.onLor.getLors().then(() => {\n if (!(this.props.loading || this.props.lorLoading)) {\n const lors = this.reformLors(this.props.lors);\n\n this.setState({\n lors,\n });\n }\n\n this.setState({ loading: this.props.loading || this.props.lorLoading });\n });\n };\n\n openEditLorAttribute = (lor) => {\n this.setState({\n editMode: true,\n editedLor: {\n id: lor.id,\n name: lor.name,\n lorCode: lor.lorCode,\n attributes: [...lor.attributes],\n },\n });\n setTimeout(() => {\n this.scroll(this.editAttributeAnchor);\n }, 200);\n };\n\n handleBackToList = () => {\n this.setState({ editMode: false });\n };\n\n handleAddNewAttribute = () => {\n this.setState({ editAttribute: true, editedAttribute: { id: null, attribute: null, link: null, isHidden: false } });\n };\n\n handleEditAttribute = (attribute) => {\n this.setState({\n editAttribute: true,\n editedAttribute: {\n id: attribute.id,\n attribute: attribute.attribute,\n link: attribute.link,\n isHidden: attribute.isHidden,\n },\n });\n };\n\n cancelUpdateAttribute = () => {\n this.setState({ editAttribute: false, editedAttribute: null });\n };\n\n handleChangeAttribute = (event) => {\n const { editedAttribute } = this.state;\n let { name, value } = event.target;\n\n if (name == \"attribute\") {\n editedAttribute.attribute = value;\n } else if (name == \"link\") {\n editedAttribute.link = value;\n } else if (name == \"isHidden\") {\n editedAttribute.isHidden = value;\n }\n\n this.setState({ editedAttribute });\n };\n\n handleSaveAttribute = () => {\n const { editedAttribute, editedLor } = this.state;\n if (editedAttribute.id) {\n this.setState({ lorAttributeIsUpdating: true });\n this.props.onLor\n .updateLorAttribute(editedLor.id, editedAttribute.id, {\n attribute: editedAttribute.attribute,\n link: editedAttribute.link,\n isHidden: editedAttribute.isHidden,\n })\n .then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.lorError) {\n this.generateAlert(\"success\", \"Update attribute success.\");\n this.setState({ editAttribute: false, editedAttribute: null });\n } else {\n this.generateAlert(\"danger\", this.props.lorError.errData.Message);\n }\n }\n this.setState({ lorAttributeIsUpdating: this.props.isUpdating });\n });\n } else {\n this.setState({ lorAttributeIsUpdating: true });\n this.props.onLor\n .addLorAttribute(editedLor.id, {\n attribute: editedAttribute.attribute,\n link: editedAttribute.link,\n isHidden: editedAttribute.isHidden,\n })\n .then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.lorError) {\n this.generateAlert(\"success\", \"Add attribute success.\");\n this.setState({ editAttribute: false, editedAttribute: null });\n const lors = this.props.lors;\n const lor = lors.find((it) => it.id == editedLor.id);\n if (lor) {\n editedLor.attributes = [...lor.attributes];\n }\n this.setState({ editedLor });\n } else {\n this.generateAlert(\"danger\", this.props.lorError.errData.Message);\n }\n }\n this.setState({ lorAttributeIsUpdating: this.props.isUpdating });\n });\n }\n };\n\n handleDeleteAttribute = (attribute) => {\n const { editedLor } = this.state;\n this.setState({ lorAttributeIsUpdating: true });\n this.props.onLor.deleteLorAttribute(editedLor.id, attribute.id).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.lorError) {\n this.generateAlert(\"success\", \"Delete attribute success.\");\n const lors = this.props.lors;\n const lor = lors.find((it) => it.id == editedLor.id);\n if (lor) {\n editedLor.attributes = [...lor.attributes];\n }\n this.setState({ editedLor });\n } else {\n this.generateAlert(\"danger\", this.props.lorError.errData.Message);\n }\n }\n this.setState({ lorAttributeIsUpdating: this.props.isUpdating });\n });\n };\n\n render() {\n const { lors, searchKeyword, searchProperties, columnSearchKeywords, editedLor } = this.state;\n\n const pageAssignments = this.props.pageAssignments;\n const pageAssignment =\n (this.props.containerConfig && this.props.containerConfig.eeaFrameworkContainer == true && pageAssignments.find((it) => it.pageName == \"Manage LoR Category\")) ||\n (this.props.containerConfig && this.props.containerConfig.eeaFrameworkContainer == false && pageAssignments.find((it) => it.pageName == \"Manage LoR\"));\n\n const onTableFilterChange = this.onTableFilterChange;\n const openEditLor = this.openEditLor;\n const openEditLorAttribute = this.openEditLorAttribute;\n const handleHideLor = this.handleHideLor;\n const handleLorOptional = this.handleLorOptional;\n\n const filtered = this.filterArray(lors, searchKeyword, searchProperties, columnSearchKeywords);\n\n const nonEEAContainer = this.props.containerConfig && !this.props.containerConfig.eeaFrameworkContainer; //lors && lors.find(it => it.canHide);\n\n const columns = [\n {\n id: \"id\",\n name: \"Action\",\n selector: (row) => row.id,\n sortable: false,\n width: \"7%\",\n center: true,\n format: function (row, index) {\n return (\n \n \n openEditLorAttribute(row)} />\n \n Update LoR Attributes\n \n \n {!nonEEAContainer && (\n \n \n openEditLor(row)} />\n \n Update LoR Category\n \n \n )}\n
\n );\n },\n omit: pageAssignment && pageAssignment.operations && (pageAssignment.operations.find((op) => op.operation == \"Edit\" && op.allow == true) || pageAssignment.operations.find((op) => op.operation == \"Edit\" && op.allow == true)) ? false : true,\n },\n {\n id: \"name\",\n name: (\n \n Name\n
\n ),\n selector: (row) => row.name,\n sortable: true,\n wrap: true,\n width: pageAssignment && pageAssignment.operations && (pageAssignment.operations.find((op) => op.operation == \"Edit\" && op.allow == true) || pageAssignment.operations.find((op) => op.operation == \"Edit\" && op.allow == true)) ? \"32%\" : \"39%\",\n },\n {\n id: \"lorCode\",\n name: (\n \n LoR Code\n
\n ),\n selector: (row) => row.lorCode,\n sortable: true,\n width: nonEEAContainer ? \"10%\" : \"12%\",\n wrap: true,\n center: true,\n },\n {\n id: \"category\",\n name: (\n \n Category\n
\n ),\n selector: (row) => row.category,\n sortable: true,\n width: nonEEAContainer ? \"20%\" : \"26%\",\n wrap: true,\n },\n {\n id: \"attributes\",\n name: (\n \n Attributes\n it.name == \"strattributes\") ? columnSearchKeywords.find((it) => it.name == \"strattributes\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.attributes,\n sortable: true,\n width: \"15%\",\n wrap: true,\n format: function (row, index) {\n return row.strattributes;\n },\n },\n {\n id: \"isHidden\",\n name: LoR Is Shown
,\n selector: (row) => row.isHidden,\n sortable: false,\n width: \"8%\",\n wrap: true,\n center: true,\n format: function (row, index) {\n return (\n \n \n row.canHide && row.isHidden && handleHideLor(row)}> \n row.canHide && !row.isHidden && handleHideLor(row)}> \n \n \n );\n },\n omit: !nonEEAContainer,\n },\n {\n id: \"optional\",\n name: LoR Is Optional
,\n selector: (row) => row.optional,\n sortable: false,\n width: \"8%\",\n wrap: true,\n center: true,\n format: function (row, index) {\n return (\n \n \n !row.optional && handleLorOptional(row)}> \n row.optional && handleLorOptional(row)}> \n \n \n );\n },\n },\n ];\n\n const handleEditAttribute = this.handleEditAttribute;\n const handleDeleteAttribute = this.handleDeleteAttribute;\n\n const attributeColumns = [\n {\n id: \"attribute\",\n name: \"Attribute\",\n selector: (row) => row.attribute,\n sortable: true,\n width: \"30%\",\n },\n {\n id: \"link\",\n name: \"Link\",\n selector: (row) => row.link,\n sortable: true,\n width: \"40%\",\n wrap: true,\n },\n {\n id: \"isHidden\",\n name: \"Is Hidden\",\n selector: (row) => row.isHidden,\n sortable: true,\n width: \"15%\",\n format: function (row, index) {\n return row.isHidden ? \"Yes\" : \"No\";\n },\n },\n {\n id: \"id\",\n selector: (row) => row.id,\n sortable: false,\n width: \"15%\",\n center: true,\n format: function (row, index) {\n return (\n \n handleEditAttribute(row)} />\n \n Edit Attribute\n \n \n {!(row.accountSkillAttributes && row.accountSkillAttributes.length > 0) && (\n \n handleDeleteAttribute(row)} />\n \n Delete Attribute\n \n \n \n )}\n
\n );\n },\n },\n ];\n\n return (\n \n \n
\n ) : !this.state.editMode ? (\n \n \n \n {\n this.handleClearSelection();\n this.setState({ searchKeyword, selectedInterventions: [] });\n }}\n >\n \n {\n this.handleClearSelection();\n this.setState({ searchKeyword: \"\", selectedInterventions: [] });\n }}\n >\n \n \n \n \n \n )}\n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Import\" && op.allow == true) && (\n \n
\n
\n \n \n ) : (\n \n \n \n \n \n \n Update Lor Attributes - {editedLor ? `${editedLor.name} (${editedLor.lorCode})` : \"\"}\n
\n \n
\n \n
\n \n
\n {editedLor && (\n \n \n \n \n \n
\n a.attribute > b.attribute)} pagination={false}> \n
\n \n {this.state.editAttribute && (\n
\n \n )}\n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n error: state.auth.error,\n authPersonId: state.auth.personId,\n\n lors: state.lor.lors,\n lorError: state.lor.error,\n lorLoading: state.lor.loading,\n exportData: state.lor.exportData,\n loadingExport: state.lor.loadingExport,\n\n pageAssignments: state.adminPerson.pageAssignments,\n containerConfig: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onLor: bindActionCreators(lorActions, dispatch),\n };\n};\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(ManageLor));\n","import ErrorHandler from \"./../errorResponseHandler\";\nimport Instance from \"./../service/AxiosInstance\";\n\nexport const axios = Instance.apiInstance();\n\nclass AdminRelationshipAPI {\n static addRelationships(relationships) {\n return axios\n .post(`/relationships/postmultiple`, {\n relationships\n })\n .then(res => {\n const response = res.data;\n return response;\n })\n .catch(err => {\n throw ErrorHandler(err);\n });\n }\n\n static deleteRelationships(relationshipIds) {\n return axios\n .post(`/relationships/deletemultiple`, {\n relationshipIds\n })\n .then(res => {\n const response = res.data;\n return response;\n })\n .catch(err => {\n throw ErrorHandler(err);\n });\n }\n\n static exportRelationshipsDataExcel() {\n return axios\n .get(`/relationships/export`, {\n responseType: \"blob\",\n })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n console.log(\"err\", err);\n throw ErrorHandler(err);\n });\n }\n\n static exportRelationshipsDataExcelTemplate() {\n return axios\n .get(`/relationships/exporttemplate`, {\n responseType: \"blob\",\n })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n console.log(\"err\", err);\n throw ErrorHandler(err);\n });\n }\n\n static importRelationshipsDataExcel(relationshipsData) {\n const config = {\n headers: {\n \"content-type\": \"multipart/form-data\",\n },\n };\n\n const body = new FormData();\n body.append(\"ContentDisposition\", \"attachment\");\n body.append(\"ContentType\", \"multipart/form-data\");\n\n relationshipsData.forEach((file) => {\n body.append(\"relationshipsData\", file);\n });\n\n return axios\n .post(`/relationships/import`, body, config)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n}\n\nexport default AdminRelationshipAPI;","import * as actionTypes from \"./adminActionTypes\";\n\nimport AdminRelationshipAPI from \"./../../../common/api/adminservice/AdminRelationshipService\";\n\nexport const addRelationshipsStart = () => {\n return {\n type: actionTypes.ADD_RELATIONSHIPS_START\n };\n};\n\nexport const addRelationshipsSuccess = (addedRelationships) => {\n return {\n type: actionTypes.ADD_RELATIONSHIPS_SUCCESS,\n addedRelationships\n };\n};\n\nexport const addRelationshipsFail = error => {\n return {\n type: actionTypes.ADD_RELATIONSHIPS_FAIL,\n error: error,\n };\n};\n\nexport const addRelationships = (relationships) => {\n return dispatch => {\n dispatch(addRelationshipsStart());\n\n return AdminRelationshipAPI.addRelationships(relationships)\n .then(res => {\n dispatch(addRelationshipsSuccess(res));\n })\n .catch(err => {\n dispatch(addRelationshipsFail(err));\n });\n };\n};\n\nexport const deleteRelationshipsStart = () => {\n return {\n type: actionTypes.DELETE_RELATIONSHIPS_START\n };\n};\n\nexport const deleteRelationshipsSuccess = (deletedRelationshipIds) => {\n return {\n type: actionTypes.DELETE_RELATIONSHIPS_SUCCESS,\n deletedRelationshipIds\n };\n};\n\nexport const deleteRelationshipsFail = error => {\n return {\n type: actionTypes.DELETE_RELATIONSHIPS_FAIL,\n error: error,\n };\n};\n\nexport const deleteRelationships = (relationshipIds) => {\n return dispatch => {\n dispatch(deleteRelationshipsStart());\n\n return AdminRelationshipAPI.deleteRelationships(relationshipIds)\n .then(res => {\n dispatch(deleteRelationshipsSuccess(relationshipIds));\n })\n .catch(err => {\n dispatch(deleteRelationshipsFail(err));\n });\n };\n};\n\nexport const exportRelationshipsDataExcelStart = () => {\n return {\n type: actionTypes.EXPORT_RELATIONSHIPS_DATA_START,\n };\n};\n\nexport const exportRelationshipsDataExcelSuccess = (exportData) => {\n return {\n type: actionTypes.EXPORT_RELATIONSHIPS_DATA_SUCCESS,\n exportData,\n };\n};\n\nexport const exportRelationshipsDataExcelFail = (error) => {\n return {\n type: actionTypes.EXPORT_RELATIONSHIPS_DATA_FAIL,\n error: error,\n };\n};\n\nexport const exportRelationshipsDataExcel = () => {\n return (dispatch) => {\n dispatch(exportRelationshipsDataExcelStart());\n\n return AdminRelationshipAPI.exportRelationshipsDataExcel()\n .then((res) => {\n dispatch(exportRelationshipsDataExcelSuccess(res));\n })\n .catch((err) => {\n dispatch(exportRelationshipsDataExcelFail(err));\n });\n };\n};\n\nexport const exportRelationshipsDataExcelTemplate = () => {\n return (dispatch) => {\n dispatch(exportRelationshipsDataExcelStart());\n\n return AdminRelationshipAPI.exportRelationshipsDataExcelTemplate()\n .then((res) => {\n dispatch(exportRelationshipsDataExcelSuccess(res));\n })\n .catch((err) => {\n dispatch(exportRelationshipsDataExcelFail(err));\n });\n };\n};\n\nexport const importSkillAttributesDataExcelStart = () => {\n return {\n type: actionTypes.IMPORT_RELATIONSHIPS_DATA_START,\n };\n};\n\nexport const importSkillAttributesDataExcelSuccess = () => {\n return {\n type: actionTypes.IMPORT_RELATIONSHIPS_DATA_SUCCESS,\n };\n};\n\nexport const importSkillAttributesDataExcelFail = (error) => {\n return {\n type: actionTypes.IMPORT_RELATIONSHIPS_DATA_FAIL,\n error: error,\n };\n};\n\nexport const importSkillAttributesDataExcel = (relationshipsData) => {\n return (dispatch) => {\n dispatch(importSkillAttributesDataExcelStart());\n\n return AdminRelationshipAPI.importRelationshipsDataExcel(relationshipsData)\n .then((res) => {\n dispatch(importSkillAttributesDataExcelSuccess(res));\n })\n .catch((err) => {\n dispatch(importSkillAttributesDataExcelFail(err));\n });\n };\n};","import ErrorHandler from \"./../errorResponseHandler\";\nimport Instance from \"./../service/AxiosInstance\";\n\nexport const axios = Instance.apiInstance();\n\nclass AdminRelationshipTypeAPI {\n static getRelationshipTypes() {\n return axios\n .get(`/relationshipTypes`)\n .then(res => {\n const response = res.data;\n return response;\n })\n .catch(err => {\n throw ErrorHandler(err);\n });\n }\n}\n\nexport default AdminRelationshipTypeAPI;","import * as actionTypes from \"./adminActionTypes\";\n\nimport AdminRelationshipTypeAPI from \"./../../../common/api/adminservice/AdminRelationshipTypeService\";\n\nexport const getRelationshipTypesStart = () => {\n return {\n type: actionTypes.GET_RELATIONSHIP_TYPES_START\n };\n};\n\nexport const getRelationshipTypesSuccess = (relationshipTypes) => {\n return {\n type: actionTypes.GET_RELATIONSHIP_TYPES_SUCCESS,\n relationshipTypes\n };\n};\n\nexport const getRelationshipTypesFail = error => {\n return {\n type: actionTypes.GET_RELATIONSHIP_TYPES_FAIL,\n error: error,\n };\n};\n\nexport const getRelationshipTypes = () => {\n return dispatch => {\n dispatch(getRelationshipTypesStart());\n\n return AdminRelationshipTypeAPI.getRelationshipTypes()\n .then(res => {\n dispatch(getRelationshipTypesSuccess(res));\n })\n .catch(err => {\n dispatch(getRelationshipTypesFail(err));\n });\n };\n};","import * as relationshipActions from \"../../../store/admin/actions/adminRelationshipActions\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Form, FormGroup, Label, ListGroup, ListGroupItem, Modal, ModalBody, ModalFooter, ModalHeader, Row } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\n\nclass RelationshipBulkUpload extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n showDialog: false,\n selectedFiles: [],\n isImporting: false,\n importMessage: null,\n showConfirmDialog: false,\n };\n\n this.excelRef = React.createRef();\n }\n\n componentDidMount() {}\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n }\n }\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.excelRef.current.value = null;\n this.setState({ showDialog: !showDialog, selectedFiles: [] });\n };\n\n handleDownloadTemplate = () => {\n this.props.onRelationship.exportRelationshipsDataExcelTemplate().then(() => {\n if (!this.props.loadingExport && !this.props.categoryError) {\n if (this.props.exportData) {\n FileDownload(this.props.exportData, `UploadRelationshipsTemplate.xlsx`);\n }\n }\n });\n };\n\n handleSelectFiles = () => {\n this.excelRef.current.click();\n };\n\n handleSelectExcels = (event) => {\n const selectedFiles = this.state.selectedFiles;\n\n if (event.target.files && event.target.files.length > 0) {\n this.setState({ selectedFiles: [...selectedFiles, ...event.target.files] });\n }\n };\n\n handlePerformUpload = () => {\n this.setState({ showConfirmDialog: true, showDialog: false });\n };\n\n togleDialogConfirmModal = () => {\n const showConfirmDialog = this.state.showConfirmDialog;\n this.setState({ showConfirmDialog: !showConfirmDialog, showDialog: showConfirmDialog });\n };\n\n handleConfirmPerformUpload = () => {\n this.setState({ isImporting: true });\n this.props.onRelationship.importSkillAttributesDataExcel(this.state.selectedFiles).then(() => {\n if (!this.props.isImporting) {\n this.excelRef.current.value = null;\n\n this.props.generateAlert(\"success\", \"Import relationships success.\");\n this.setState({ showConfirmDialog: false, showDialog: false, selectedFiles: [] });\n this.props.handleImportSuccess();\n }\n\n this.setState({ isImporting: this.props.isImporting });\n });\n };\n\n render() {\n const { selectedFiles } = this.state;\n\n return (\n \n \n Delete and replace relationships \n \n \n \n \n {\n this.handlePerformUpload();\n }}\n disabled={selectedFiles.length == 0 || this.state.isImporting}\n >\n Process Upload\n \n \n Close\n \n \n \n \n \n \n \n \n {\n this.handleConfirmPerformUpload();\n }}\n disabled={this.state.isImporting}\n >\n OK\n \n \n Close\n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loadingExport: state.adminRelationship.loadingExport,\n exportData: state.adminRelationship.exportData,\n\n isImporting: state.adminRelationship.isImporting,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onRelationship: bindActionCreators(relationshipActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(RelationshipBulkUpload);\n","import * as authActions from \"../../../store/actions/authAction\";\nimport * as adminPersonActions from \"../../../store/admin/actions/adminPersonActions\";\nimport * as adminRelationshipActions from \"../../../store/admin/actions/adminRelationshipActions\";\nimport * as adminRelationshipTypeActions from \"../../../store/admin/actions/adminRelationshipTypeActions\";\nimport { dismisAlert, generateAlert } from \"../../../utils/alertUtils\";\nimport { filterArray } from \"../../../utils/filterUtils\";\nimport { contentTranslator } from \"../../../utils/translatorUtils\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport { SkillsTxTableSearchBar } from \"../../common/SkillsTxTableSearchBar\";\nimport RelationshipBulkUpload from \"./RelationshipBulkUpload\";\nimport { faArrowLeft, faArrowRight, faFileExcel } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\n// import filterFactory from \"react-bootstrap-table2-filter\";\n// import ToolkitProvider, { Search } from \"react-bootstrap-table2-toolkit\";\n// import BootstrapTable from \"react-bootstrap-table-next\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { Button, ButtonGroup, Col, Label, Row, Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nconst headerStyle = {\n color: \"#2B2B2B\",\n fontSize: \"18px\",\n fontFamily: \"IBMPlexSans-Bold\",\n};\n\nconst rowStyle = {\n background: \"#FFFFFF\",\n fontSize: \"12px\",\n cursor: \"pointer\",\n};\n\n// const { SearchBar } = Search;\nconst FileDownload = require(\"js-file-download\");\nclass ManageRelationships extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: null,\n loading: true,\n alerts: [],\n relationshipTypes: [],\n persons: [],\n isUpdating: false,\n mode: \"DownToTop\",\n personsSelected: [],\n availablePersons: [],\n personsAvailableSelected: [],\n assessedPersons: [],\n personsAssessedSelected: [],\n showDialogImportTs: null,\n searchProperties: [\"email\", \"firstName\", \"lastName\"],\n };\n\n this.filterArray = filterArray.bind(this);\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n this.props.onAuth.authCheckState().then(() => {\n this.props.onRelationshipType.getRelationshipTypes().then(() => {\n this.initData();\n this.setState({\n loading: this.props.loading || this.props.relationshipTypeLoading,\n relationshipTypes: this.props.relationshipTypes.filter((it) => it.name != \"Endorser\"),\n });\n });\n });\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.persons !== this.props.persons) {\n this.setState({\n persons: this.props.persons ? this.props.persons.filter((it) => !it.inactive && !it.isCandidate).sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1)) : [],\n });\n }\n }\n\n initData = () => {\n const personsSelected = this.state.personsSelected;\n let personSelectedId = null;\n\n if (personsSelected && personsSelected.length > 0) {\n personSelectedId = personsSelected[0];\n }\n\n this.props.onPerson.getPersonsIncRelationships().then(() => {\n const persons = this.props.persons ? this.props.persons.filter((it) => !it.inactive && !it.isCandidate).sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1)) : [];\n\n if (personSelectedId) {\n if (!persons.find((it) => it.id == personSelectedId)) {\n personSelectedId = persons[0].id;\n persons[0].toggleSelected = true;\n } else {\n const person = persons.find((it) => it.id == personSelectedId);\n person.toggleSelected = true;\n }\n } else {\n personSelectedId = persons[0].id;\n persons[0].toggleSelected = true;\n }\n\n this.setState(\n {\n persons: persons,\n personsSelected: [personSelectedId],\n },\n () => {\n this.handleSelectRow(personSelectedId);\n }\n );\n });\n };\n\n handleRefresh = () => {\n this.initData();\n };\n\n handleOnSelect = (row) => {\n if (this.state.isUpdating) {\n return false;\n }\n\n const persons = this.state.persons;\n const updatedData = persons.find((it) => it.id == row.id);\n\n if (!updatedData.toggleSelected) {\n persons.forEach((it) => {\n it.toggleSelected = false;\n });\n\n updatedData.toggleSelected = true;\n\n this.handleSelectRow(row.id);\n this.setState({ persons: [...persons], personsSelected: [row.id] });\n }\n };\n\n handleAfterSearch = (searchKeyword) => {\n const { persons, searchProperties } = this.state;\n const filtered = this.filterArray(persons, searchKeyword, searchProperties);\n\n persons.forEach((it) => {\n it.toggleSelected = false;\n });\n\n if (filtered.length > 0) {\n const row = filtered[0];\n const person = persons.find((it) => it.id == row.id);\n person.toggleSelected = true;\n this.handleSelectRow(person.id);\n this.setState({ persons: [...persons], personsSelected: [person.id] });\n } else {\n this.handleSelectRow();\n this.setState({ persons: [...persons], personsSelected: [] });\n }\n };\n\n handleSelectRow = (personId) => {\n const persons = this.props.persons;\n const { mode, personsSelected, personsAvailableSelected, personsAssessedSelected } = this.state;\n\n var personSelected = null;\n\n if (personsSelected.length > 0) {\n personSelected = personsSelected[0];\n }\n\n let relationships = [];\n let availablePersons = [];\n let assessedPersons = [];\n\n const selectedPerson = persons.find((it) => it.id == personId);\n\n if (selectedPerson) {\n if (mode == \"DownToTop\") {\n relationships = selectedPerson.downRelationships;\n let relationshipsId = [];\n if (relationships && relationships.length > 0) {\n relationshipsId = relationships.map((it) => {\n return it.personAId;\n });\n }\n\n availablePersons = [...persons.filter((it) => !it.inactive && !it.isCandidate && it.id != personId && !relationshipsId.includes(it.id)).sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))];\n assessedPersons = [\n ...persons\n .filter((it) => !it.inactive && !it.isCandidate && it.id != personId && relationshipsId.includes(it.id))\n .sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))\n .map((it) => {\n return {\n id: relationships.find((r) => r.personAId == it.id).id,\n personId: it.id,\n firstName: it.firstName,\n lastName: it.lastName,\n email: it.email,\n relationshipType: relationships.find((r) => r.personAId == it.id).relationshipType,\n status: relationships.find((r) => r.personAId == it.id).status,\n };\n })\n .sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))\n .sort((a, b) => (`${a.relationshipType == \"Team Leader\" ? 1 : a.relationshipType == \"Line Manager\" ? 2 : 3}` > `${b.relationshipType == \"Team Leader\" ? 1 : b.relationshipType == \"Line Manager\" ? 2 : 3}` ? 1 : -1)),\n ];\n } else {\n relationships = selectedPerson.upRelationships;\n const relationshipsId = relationships.map((it) => {\n return it.personBId;\n });\n\n availablePersons = [...persons.filter((it) => !it.inactive && !it.isCandidate && it.id != personId && !relationshipsId.includes(it.id)).sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))];\n assessedPersons = [\n ...persons\n .filter((it) => !it.inactive && !it.isCandidate && it.id != personId && relationshipsId.includes(it.id))\n .sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))\n .map((it) => {\n return {\n id: relationships.find((r) => r.personBId == it.id).id,\n personId: it.id,\n firstName: it.firstName,\n lastName: it.lastName,\n email: it.email,\n relationshipType: relationships.find((r) => r.personBId == it.id).relationshipType,\n status: relationships.find((r) => r.personBId == it.id).status,\n };\n })\n .sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))\n .sort((a, b) => (`${a.relationshipType == \"Team Leader\" ? 1 : a.relationshipType == \"Line Manager\" ? 2 : 3}` > `${b.relationshipType == \"Team Leader\" ? 1 : b.relationshipType == \"Line Manager\" ? 2 : 3}` ? 1 : -1)),\n ];\n }\n\n this.setState({\n availablePersons: JSON.parse(JSON.stringify(availablePersons)),\n personsAvailableSelected: personSelected != personId ? [] : [...personsAvailableSelected],\n personsSelected: personId ? [personId] : [],\n assessedPersons: JSON.parse(JSON.stringify(assessedPersons)),\n personsAssessedSelected: personSelected != personId ? [] : [...personsAssessedSelected],\n });\n }\n };\n\n handleAfterSearchAvailable = () => {};\n\n handleOnSelectAvailable = (row) => {\n if (this.state.isUpdating) {\n return false;\n }\n\n const { availablePersons } = this.state;\n let personsAvailableSelected = this.state.personsAvailableSelected;\n\n if (personsAvailableSelected) {\n const availablePerson = availablePersons.find((it) => it.id == row.id);\n if (personsAvailableSelected.find((it) => it == row.id)) {\n availablePerson.toggleSelected = false;\n\n const personAvailableSelected = personsAvailableSelected.find((it) => it == row.id);\n var index = personsAvailableSelected.indexOf(personAvailableSelected);\n if (index !== -1) {\n personsAvailableSelected.splice(index, 1);\n }\n } else {\n availablePerson.toggleSelected = true;\n personsAvailableSelected = [...personsAvailableSelected, row.id];\n }\n } else {\n const availablePerson = availablePersons.find((it) => it.id == row.id);\n availablePerson.toggleSelected = true;\n personsAvailableSelected = [row.id];\n }\n\n this.setState({ availablePersons: [...availablePersons], personsAvailableSelected: [...personsAvailableSelected] });\n };\n\n handleOnSelectAssessed = (row) => {\n if (this.state.isUpdating) {\n return false;\n }\n\n const { assessedPersons } = this.state;\n let personsAssessedSelected = this.state.personsAssessedSelected;\n\n if (personsAssessedSelected) {\n const assessedPerson = assessedPersons.find((it) => it.id == row.id);\n if (personsAssessedSelected.find((it) => it == row.id)) {\n assessedPerson.toggleSelected = false;\n\n const personAssessedSelected = personsAssessedSelected.find((it) => it == row.id);\n var index = personsAssessedSelected.indexOf(personAssessedSelected);\n if (index !== -1) {\n personsAssessedSelected.splice(index, 1);\n }\n } else {\n assessedPerson.toggleSelected = true;\n personsAssessedSelected = [...personsAssessedSelected, row.id];\n }\n } else {\n const assessedPerson = assessedPersons.find((it) => it.id == row.id);\n assessedPerson.toggleSelected = true;\n personsAssessedSelected = [row.id];\n }\n\n this.setState({ assessedPersons: [...assessedPersons], personsAssessedSelected: [...personsAssessedSelected] });\n };\n\n changeMode = (mode) => {\n this.setState({ mode });\n this.initData();\n };\n\n handleAssignRelationship = (relationshipType) => {\n const persons = this.props.persons;\n const { mode, personsSelected, personsAvailableSelected } = this.state;\n let personSelectedId = null;\n\n if (personsSelected && personsSelected.length > 0) {\n personSelectedId = personsSelected[0];\n }\n\n const selectedPerson = persons.find((it) => it.id == personSelectedId);\n\n if (selectedPerson) {\n this.setState({ isUpdating: true });\n const relationships = personsAvailableSelected.map((it) => {\n return {\n relationshipTypeId: relationshipType.id,\n relationshipType: relationshipType.name,\n personAId: mode == \"DownToTop\" ? it : selectedPerson.id,\n personBId: mode == \"DownToTop\" ? selectedPerson.id : it,\n };\n });\n\n this.props.onRelationship.addRelationships(relationships).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.personsError) {\n this.setState(\n {\n persons: this.props.persons ? this.props.persons.filter((it) => !it.inactive && !it.isCandidate).sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1)) : [],\n personsAvailableSelected: [],\n },\n () => {\n this.handleSelectRow(selectedPerson.id);\n }\n );\n\n this.generateAlert(\"success\", \"Relationships assigned.\");\n } else {\n this.generateAlert(\"danger\", this.props.personsError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n }\n };\n\n handleRemoveRelationshipsClick = () => {\n const persons = this.props.persons;\n const { personsSelected, personsAssessedSelected } = this.state;\n\n let personSelectedId = null;\n\n if (personsSelected && personsSelected.length > 0) {\n personSelectedId = personsSelected[0];\n }\n\n const selectedPerson = persons.find((it) => it.id == personSelectedId);\n\n if (selectedPerson) {\n this.setState({ isUpdating: true });\n this.props.onRelationship.deleteRelationships(personsAssessedSelected).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.personsError) {\n this.setState(\n {\n persons: this.props.persons ? this.props.persons.filter((it) => !it.inactive && !it.isCandidate).sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1)) : [],\n personsAvailableSelected: [],\n },\n () => {\n this.handleSelectRow(selectedPerson.id);\n }\n );\n\n this.generateAlert(\"success\", \"Relationships removed.\");\n } else {\n this.generateAlert(\"danger\", this.props.personsError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n }\n };\n\n pad2 = (n) => {\n return (n < 10 ? \"0\" : \"\") + n;\n };\n\n handleExportRelationships = () => {\n this.props.onRelationship.exportRelationshipsDataExcel().then(() => {\n if (!this.props.loadingExport) {\n if (this.props.exportData) {\n var today = new Date();\n var strToday = today.getFullYear() + this.pad2(today.getMonth() + 1) + this.pad2(today.getDate()) + \"_\" + this.pad2(today.getHours()) + this.pad2(today.getMinutes()) + this.pad2(today.getSeconds());\n FileDownload(this.props.exportData, `ExportRelationships_${strToday}.xlsx`);\n }\n }\n });\n };\n\n handleImportRelationships = () => {\n this.setState({ showDialogImportTs: new Date() });\n };\n\n handleImportSuccess = () => {\n this.initData();\n };\n\n render() {\n const { mode, relationshipTypes } = this.state;\n const { config } = this.props;\n\n const pageAssignments = this.props.pageAssignments;\n const pageAssignment = pageAssignments.find((it) => it.pageName == \"Manage Relationships\");\n\n const handleOnSelect = this.handleOnSelect;\n const handleOnSelectAvailable = this.handleOnSelectAvailable;\n const handleOnSelectAssessed = this.handleOnSelectAssessed;\n\n const columns = [\n {\n id: \"firstName\",\n name: \"First\",\n selector: (row) => row.firstName,\n sortable: false,\n width: \"100%\",\n style: { cursor: \"pointer\" },\n format: function (row, index) {\n return (\n handleOnSelect(row)}>\n
{`${row.firstName} ${row.lastName}`} \n
\n {mode != \"DownToTop\" && row.position && (\n
\n {row.position}\n
\n )}\n {row.email}\n
handleOnSelectAvailable(row)}>\n
{`${row.firstName} ${row.lastName}`} \n
\n {mode == \"DownToTop\" && row.position && (\n
\n {row.position}\n
\n )}\n {row.email}\n
handleOnSelectAssessed(row)}>\n {`${row.firstName} ${row.lastName}`} \n {row.relationshipType} \n {row.relationshipType == \"Mentor\" ? (\n \n {row.status ? row.status : \"Requested\"} \n \n ) : (\n \"\"\n )}\n
\n );\n },\n },\n ];\n\n return (\n \n \n
\n ) : (\n \n \n Mode : \n \n this.changeMode(\"DownToTop\")} disabled={this.state.isUpdating}>\n Employee focus\n \n this.changeMode(\"TopToDown\")} disabled={this.state.isUpdating}>\n Leadership focus\n \n \n \n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Export\" && op.allow == true) && (\n \n \n \n )}\n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Import\" && op.allow == true) && (\n \n
\n \n \n {this.state.mode == \"DownToTop\" ? \"Employee Name\" : \"Leadership Name\"}\n
\n \n
\n {\n this.setState({ searchKeywordLevel1 });\n this.handleAfterSearch(searchKeywordLevel1);\n }}\n >\n \n
\n
\n \n
\n
\n Select from list :\n
\n \n
\n {\n this.setState({ searchKeywordLevel2 });\n }}\n >\n \n
\n
\n \n
\n
this.handleAssignRelationship(it)}\n style={{\n width: \"100%\",\n marginBottom: \"10px\",\n }}\n disabled={!(this.state.personsAvailableSelected && this.state.personsAvailableSelected.length > 0) || this.state.isUpdating}\n >\n \n
\n \n );\n } else {\n return \"\";\n }\n })}\n \n \n {this.state.mode == \"DownToTop\" ? \"Leadership Name\" : \"Employee Name\"}\n
\n \n
\n {\n this.setState({ searchKeywordLevel3 });\n }}\n >\n \n
\n
\n \n
\n
0) || this.state.isUpdating}\n >\n \n
\n \n )}\n \n
\n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n error: state.auth.error,\n\n personsLoading: state.adminPerson.loading,\n personsError: state.adminPerson.error,\n persons: state.adminPerson.persons,\n isUpdating: state.adminPerson.isUpdating,\n\n relationshipTypeLoading: state.adminRelationshipType.loading,\n relationshipTypes: state.adminRelationshipType.relationshipTypes,\n\n exportData: state.adminRelationship.exportData,\n loadingExport: state.adminRelationship.loadingExport,\n\n pageAssignments: state.adminPerson.pageAssignments,\n config: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onPerson: bindActionCreators(adminPersonActions, dispatch),\n onRelationshipType: bindActionCreators(adminRelationshipTypeActions, dispatch),\n onRelationship: bindActionCreators(adminRelationshipActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ManageRelationships);\n","import * as authActions from \"../../../store/actions/authAction\";\nimport * as personActions from \"../../../store/actions/personAction\";\nimport * as skillProfileActions from \"../../../store/actions/skillProfileAction\";\nimport * as adminPersonActions from \"../../../store/admin/actions/adminPersonActions\";\nimport { dismisAlert, generateAlert } from \"../../../utils/alertUtils\";\nimport { filterArray } from \"../../../utils/filterUtils\";\nimport { contentTranslator } from \"../../../utils/translatorUtils\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport { SkillsTxTableClearSearch } from \"../../common/SkillsTxTableClearSearch\";\nimport { SkillsTxTableSearchBar } from \"../../common/SkillsTxTableSearchBar\";\nimport { faSquare } from \"@fortawesome/free-regular-svg-icons\";\nimport { faSync, faSquareCheck, faSquareMinus, faFileExcel, faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { wrap } from \"module\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { Link, withRouter } from \"react-router-dom\";\nimport { Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nclass ManageSelfAssessed extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: null,\n loading: true,\n alerts: [],\n persons: [],\n isUpdating: false,\n searchProperties: [\"email\", \"firstName\", \"lastName\", \"selfAssessedStatus\"],\n modeApprove: false,\n personsSkillProfileSelected: [],\n loadingPrint: false,\n showApproveDialog: false,\n comment: \"\",\n };\n\n this.filterArray = filterArray.bind(this);\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n const routeGoBack = localStorage.getItem(\"routeGoBack\");\n localStorage.setItem(\"routeAdminFrom\", \"/admin/selfassessed\");\n localStorage.setItem(\"manageProfileByAdminPopup\", \"FALSE\");\n\n let repopulate = true;\n if (routeGoBack == \"TRUE\") {\n repopulate = false;\n }\n\n this.props.onAuth.authCheckState().then(() => {\n if (repopulate || !this.props.persons || (this.props.persons && this.props.persons.length == 0)) {\n this.initData();\n } else {\n let persons = this.reformPersons(this.props.persons.filter((it) => !it.inactive));\n\n if (this.state.modeApprove) {\n persons.forEach((it) => {\n it.toggleSkillProfileSelected = !it.selfAssessedReportGenerated && it.selfAssessedStatus != \"Approved\" && it.selfAssessedStatus != \"Postponed pending evidence\" && it.selfAssessedStatus != \"Postponed pending changes\";\n });\n }\n\n this.setState({\n persons: persons.sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1)),\n personsSkillProfileSelected: persons.filter((it) => it.toggleSkillProfileSelected).map((row) => row.id),\n loading: false,\n });\n }\n });\n }\n\n componentWillUnmount() {\n localStorage.setItem(\"routeGoBack\", \"FALSE\");\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.persons !== this.props.persons && this.props.persons) {\n this.setState({ persons: this.reformPersons(this.props.persons.filter((it) => !it.inactive).sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))) });\n }\n\n if (prevProps.mode !== this.props.mode && prevProps.mode) {\n this.handleRefresh();\n }\n }\n\n reformPersons = (persons) => {\n return persons.map((it) => {\n const account = it.accounts && it.accounts.length > 0 ? it.accounts.sort((a, b) => (b.createdOn > a.createdOn ? 1 : -1))[0] : null;\n\n return {\n id: it.id,\n idSkillProfile: it.id,\n companyId: it.companyId,\n firstName: it.firstName,\n lastName: it.lastName,\n email: it.email,\n completeName: `${it.firstName}${it.lastName ? ` ${it.lastName}` : \"\"}${it.email ? ` ${it.email}` : \"\"}`,\n salutation: it.salutation,\n position: it.position,\n inactive: it.inactive,\n personType: it.personType,\n accessGroup: it.accessGroup,\n allowNotifications: it.allowNotifications,\n lastActivityOn: it.lastActivityOn,\n lastActivitySystem: it.lastActivitySystem,\n createdOn: it.createdOn,\n countryCode: it.countryCode,\n country: it.country,\n location: it.location,\n selfAssessmentReason: it.selfAssessmentReason,\n encryptedId: it.encryptedId,\n team: it.team,\n usePreferredName: it.usePreferredName,\n other: it.other,\n department: it.department,\n businessUnit: it.businessUnit,\n division: it.division,\n territory: it.territory,\n costCentre: it.costCentre,\n supervisor: it.supervisor,\n validatedDate: it.validatedDate,\n isCandidate: it.isCandidate,\n isAnalyticsUser: it.isAnalyticsUser,\n leaveOn: it.leaveOn,\n isAssigned: it.isAssigned,\n isInvited: it.isInvited,\n invitedOn: it.invitedOn,\n accounts: it.accounts ? [...it.accounts] : null,\n teams: it.teams ? [...it.teams] : null,\n profilePictureUrl: it.profilePictureUrl,\n activityStatementInterval: it.activityStatementInterval,\n lastUpdatedOn: it.lastUpdatedOn,\n lastUpdatedVersion: it.lastUpdatedVersion,\n latestAssessmentId: it.latestAssessmentId,\n cartridgeId: it.cartridgeId,\n\n selfAssessedReportGenerated: it.selfAssessedReportGenerated,\n lastSelfAssessedReportGeneratedVersion: it.lastSelfAssessedReportGeneratedVersion,\n lastSelfAssessedReportGeneratedOn: it.lastSelfAssessedReportGeneratedOn,\n\n selfAssessedLastProfileVersion: it.selfAssessedLastProfileVersion,\n selfAssessedLastProfileUpdatedOn: it.selfAssessedLastProfileUpdatedOn,\n selfAssessedLastProfileApproved: it.selfAssessedLastProfileApproved,\n selfAssessedLastProfileUpdatedById: it.selfAssessedLastProfileUpdatedById ? it.selfAssessedLastProfileUpdatedById : it.id,\n selfAssessedLastProfileUpdatedBy: it.selfAssessedLastProfileUpdatedBy ? it.selfAssessedLastProfileUpdatedBy : `${it.firstName} ${it.lastName}`,\n\n selfAssessedLastApprovedById: it.selfAssessedLastProfileVersion ? it.selfAssessedLastApprovedById : null,\n selfAssessedLastApprovedBy: it.selfAssessedLastProfileVersion ? it.selfAssessedLastApprovedBy : null,\n selfAssessedLastApprovedOn: it.selfAssessedLastProfileVersion ? it.selfAssessedLastApprovedOn : null,\n selfAssessedLastApprovedVersion: it.selfAssessedLastProfileVersion ? it.selfAssessedLastApprovedVersion : null,\n\n selfAssessedStatus: it.selfAssessedLastProfileApproved\n ? \"Approved\"\n : account\n ? account.isApprovalRequested || account.isApprovalPostponed\n ? account.isApprovalPostponed\n ? account.approvalPostponedType == \"Missing Evidence\"\n ? \"Postponed pending evidence\"\n : \"Postponed pending changes\"\n : \"Requested\"\n : \"Not Requested\"\n : \"Not Requested\",\n selfAssessedLastProfileNumberOfChange: it.selfAssessedLastProfileNumberOfChange,\n isApprovalRequested: !it.selfAssessedLastProfileApproved && account ? account.isApprovalRequested : false,\n approvalRequestSentOn: account ? account.approvalRequestSentOn : null,\n\n isApprovalPostponed: !it.selfAssessedLastProfileApproved && account ? account.isApprovalPostponed : false,\n approvalPostponedOn: account && account.isApprovalPostponed ? account.approvalPostponedOn : null,\n approvalPostponedById: account && account.isApprovalPostponed ? account.approvalPostponedById : null,\n approvalPostponedBy: account && account.isApprovalPostponed ? account.approvalPostponedBy : null,\n approvalPostponedType: account && account.isApprovalPostponed ? account.approvalPostponedType : null,\n approvalPostponedComment: account && account.isApprovalPostponed ? account.approvalPostponedComment : null,\n };\n });\n };\n\n initData = () => {\n this.props.onAdminPerson.getPersonsIncSelfAssessed().then(() => {\n let persons = this.reformPersons(this.props.persons.filter((it) => !it.inactive));\n if (this.state.modeApprove) {\n persons.forEach((it) => {\n it.toggleSkillProfileSelected = !it.selfAssessedReportGenerated && it.selfAssessedStatus != \"Approved\" && it.selfAssessedStatus != \"Postponed pending evidence\" && it.selfAssessedStatus != \"Postponed pending changes\";\n });\n }\n\n this.setState({\n persons: persons.sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1)),\n personsSkillProfileSelected: persons.filter((it) => it.toggleSkillProfileSelected).map((row) => row.id),\n });\n });\n\n this.setState({ loading: this.props.loading });\n };\n\n handleRefresh = () => {\n this.initData();\n };\n\n handleRowClickDummy = () => {};\n\n handleRowSkillProfileClick = (row) => {\n if (!this.state.loadingPrint) {\n const persons = this.state.persons;\n const updatedData = persons.find((it) => it.id == row.id);\n updatedData.toggleSkillProfileSelected = !updatedData.toggleSkillProfileSelected;\n\n this.setState({ persons: [...persons], personsSkillProfileSelected: persons.filter((it) => it.toggleSkillProfileSelected).map((row) => row.id) });\n }\n };\n\n handleSelectSkillProfileAll = () => {\n const { persons, searchKeyword, searchProperties, columnSearchKeywords } = this.state;\n let selectAll = false;\n\n const filtered = this.filterArray(persons, searchKeyword, searchProperties, columnSearchKeywords);\n\n if (filtered.filter((it) => it.toggleSkillProfileSelected && it.selfAssessedStatus != \"Approved\" && it.selfAssessedStatus != \"Postponed pending evidence\" && it.selfAssessedStatus != \"Postponed pending changes\").length == 0) {\n selectAll = true;\n } else if (filtered.filter((it) => !it.toggleSkillProfileSelected && it.selfAssessedStatus != \"Approved\" && it.selfAssessedStatus != \"Postponed pending evidence\" && it.selfAssessedStatus != \"Postponed pending changes\").length == 0) {\n selectAll = false;\n } else {\n selectAll = true;\n }\n\n persons.forEach((it) => {\n it.toggleSkillProfileSelected = false;\n });\n\n if (selectAll) {\n persons\n .filter((it) => it.selfAssessedStatus != \"Approved\" && it.selfAssessedStatus != \"Postponed pending evidence\" && it.selfAssessedStatus != \"Postponed pending changes\")\n .forEach((it) => {\n if (filtered.find((f) => f.id == it.id)) {\n it.toggleSkillProfileSelected = true;\n }\n });\n }\n\n this.setState({ persons: [...persons], personsSkillProfileSelected: persons.filter((it) => it.toggleSkillProfileSelected).map((row) => row.id) });\n };\n\n handleClearSelection = () => {\n const persons = this.state.persons;\n\n persons.forEach((it) => {\n it.toggleSkillProfileSelected = false;\n });\n\n this.setState({ persons: [...persons], personsSkillProfileSelected: [] });\n };\n\n handleApproveProfiles = () => {\n const persons = this.state.persons;\n\n persons.forEach((it) => {\n it.toggleSkillProfileSelected = false;\n });\n\n this.setState({\n comment: \"\",\n modeApprove: true,\n persons: [...persons],\n personsSkillProfileSelected: persons.filter((it) => it.toggleSkillProfileSelected).map((row) => row.id),\n });\n };\n\n handleConfirmApprove = () => {\n const { personsSkillProfileSelected, persons } = this.state;\n\n const approvedPersons = persons.filter((it) => personsSkillProfileSelected.includes(it.id));\n const approvalRequests = approvedPersons.map((approvedPerson) => {\n return {\n personId: approvedPerson.id,\n accountId: approvedPerson.accounts && approvedPerson.accounts.length > 0 ? approvedPerson.accounts.sort((a, b) => (b.createdOn > a.createdOn ? 1 : -1))[0].id : null,\n email: approvedPerson.email,\n approvedVersion: approvedPerson.selfAssessedLastProfileVersion,\n comment: this.state.comment,\n approvedBy: localStorage.getItem(\"firstName\") + \" \" + localStorage.getItem(\"lastName\"),\n approvedOn: new Date(),\n };\n });\n\n this.setState({ isUpdating: true });\n this.setState({ showLoadingPanel: true, loadingPanelHeader: \"Approve skill profiles\", loadingPanelBody: \"Please wait ...\" });\n this.props.onAdminPerson.approveProfileRequests({ requests: approvalRequests }).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.personsError) {\n this.generateAlert(\"success\", `Skill profiles approved`);\n this.setState({ modeApprove: false });\n } else {\n this.generateAlert(\"danger\", this.props.personsError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating, showLoadingPanel: this.props.isUpdating, showApproveDialog: this.props.isUpdating });\n });\n };\n\n handleCancelApprove = () => {\n this.handleClearSelection();\n this.setState({ modeApprove: false });\n };\n\n pad2 = (n) => {\n return (n < 10 ? \"0\" : \"\") + n;\n };\n\n handleExportSelfAssessedProfiles = () => {\n const timezoneOffset = (new Date().getTimezoneOffset() * -1) / 60;\n\n this.props.onAdminPerson.exportLatestSelfAssessedProfilesDataExcel(timezoneOffset).then(() => {\n if (!this.props.loadingPrint && !this.props.personsError) {\n if (this.props.printData) {\n var today = new Date();\n var strToday = today.getFullYear() + this.pad2(today.getMonth() + 1) + this.pad2(today.getDate()) + \"_\" + this.pad2(today.getHours()) + this.pad2(today.getMinutes()) + this.pad2(today.getSeconds());\n FileDownload(this.props.printData, `ExportLatestSelfAssessedProfiles_${strToday}.xlsx`);\n }\n }\n });\n };\n\n onTableFilterChange = (e, searchType) => {\n let columnSearchKeywords = this.state.columnSearchKeywords;\n if (!columnSearchKeywords) {\n columnSearchKeywords = [];\n }\n\n if (columnSearchKeywords.find((it) => it.name == e.target.name)) {\n let columnSearchKeyword = columnSearchKeywords.find((it) => it.name == e.target.name);\n columnSearchKeyword.value = e.target.value;\n } else {\n columnSearchKeywords.push({\n name: e.target.name,\n value: e.target.value,\n searchType,\n });\n }\n\n this.setState({ columnSearchKeywords });\n };\n\n togleShowApprovalModal = () => {\n const { showApproveDialog } = this.state;\n this.setState({ showApproveDialog: !showApproveDialog });\n };\n\n handleCommentChange = (event) => {\n const { name, value } = event.target;\n\n this.setState({\n comment: value,\n });\n };\n\n renderApprovalDialog = () => {\n return (\n \n Approve Profile(s) \n \n {this.state.approveInProgress ? (\n \n
\n ) : (\n \n )}\n \n \n \n Approve\n \n \n Close\n \n \n \n );\n };\n\n renderLoadingPanel() {\n if (this.state.showLoadingPanel) {\n return (\n \n {this.state.loadingPanelHeader} \n \n \n \n );\n } else {\n return \"\";\n }\n }\n\n openProfile = (person) => {\n localStorage.setItem(\"showApprovedProfileOnly\", \"FALSE\");\n localStorage.setItem(\"profileType\", \"Self Assessed\");\n localStorage.setItem(\"manageProfileByAdminPopup\", \"TRUE\");\n this.props.history.push(`/SfiaProfile/Manage?email=${person.email}`);\n };\n\n render() {\n const { persons, searchKeyword, searchProperties, modeApprove, columnSearchKeywords } = this.state;\n const pageAssignments = this.props.pageAssignments;\n let pageAssignment = null;\n\n if (pageAssignments.find((it) => it.pageName == \"Approve SelfAssessed\")) {\n pageAssignment = pageAssignments.find((it) => it.pageName == \"Approve SelfAssessed\");\n }\n\n const handleSelectSkillProfileAll = this.handleSelectSkillProfileAll;\n const handleRowSkillProfileClick = this.handleRowSkillProfileClick;\n const openProfile = this.openProfile;\n\n const onTableFilterChange = this.onTableFilterChange;\n\n const loadingPrint = this.state.loadingPrint;\n\n const filtered = this.filterArray(persons, searchKeyword, searchProperties, columnSearchKeywords);\n\n const allowApprove = pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Approve\" && op.allow == true) ? true : false;\n const allowExport = pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Export\" && op.allow == true) ? true : false;\n\n const lastUpdatedSort = (rowA, rowB) => {\n let lastUpdatedA =\n (rowA.selfAssessedLastProfileUpdatedOn ? rowA.selfAssessedLastProfileUpdatedOn.toString().replaceAll(\"-\", \"\").replaceAll(\":\", \"\").replace(\"T\", \"\") + `V${rowA.endorsementLastUpdatedVersion}` : \"\") + (rowA.selfAssessedLastProfileUpdatedBy ? rowA.selfAssessedLastProfileUpdatedBy : \"\");\n let lastUpdatedB =\n (rowB.selfAssessedLastProfileUpdatedOn ? rowB.selfAssessedLastProfileUpdatedOn.toString().replaceAll(\"-\", \"\").replaceAll(\":\", \"\").replace(\"T\", \"\") + `V${rowB.endorsementLastUpdatedVersion}` : \"\") + (rowB.selfAssessedLastProfileUpdatedBy ? rowB.selfAssessedLastProfileUpdatedBy : \"\");\n\n if (lastUpdatedA > lastUpdatedB) {\n return 1;\n }\n\n if (lastUpdatedB > lastUpdatedA) {\n return -1;\n }\n\n return 0;\n };\n\n const lastApprovedSort = (rowA, rowB) => {\n let lastApprovedA = (rowA.selfAssessedLastApprovedOn ? rowA.selfAssessedLastApprovedOn.toString().replaceAll(\"-\", \"\").replaceAll(\":\", \"\").replace(\"T\", \"\") + `V${rowA.selfAssessedLastApprovedVersion}` : \"\") + (rowA.selfAssessedLastApprovedBy ? rowA.selfAssessedLastApprovedBy : \"\");\n let lastApprovedB = (rowB.selfAssessedLastApprovedOn ? rowB.selfAssessedLastApprovedOn.toString().replaceAll(\"-\", \"\").replaceAll(\":\", \"\").replace(\"T\", \"\") + `V${rowB.selfAssessedLastApprovedVersion}` : \"\") + (rowB.selfAssessedLastApprovedBy ? rowB.selfAssessedLastApprovedBy : \"\");\n\n if (lastApprovedA > lastApprovedB) {\n return 1;\n }\n\n if (lastApprovedB > lastApprovedA) {\n return -1;\n }\n\n return 0;\n };\n\n const postponedOnSort = (rowA, rowB) => {\n let lastApprovedA = (rowA.approvalPostponedOn ? rowA.approvalPostponedOn.toString().replaceAll(\"-\", \"\").replaceAll(\":\", \"\").replace(\"T\", \"\") : \"\") + (rowA.approvalPostponedBy ? rowA.approvalPostponedBy : \"\");\n let lastApprovedB = (rowB.approvalPostponedOn ? rowB.approvalPostponedOn.toString().replaceAll(\"-\", \"\").replaceAll(\":\", \"\").replace(\"T\", \"\") : \"\") + (rowB.approvalPostponedBy ? rowB.approvalPostponedBy : \"\");\n\n if (lastApprovedA > lastApprovedB) {\n return 1;\n }\n\n if (lastApprovedB > lastApprovedA) {\n return -1;\n }\n\n return 0;\n };\n\n const columns = [\n {\n id: \"id\",\n name: (\n \n \n
\n ),\n selector: (row) => row.id,\n sortable: false,\n width: \"6%\",\n center: true,\n format: function (row, index) {\n return (\n \n {row.selfAssessedStatus != \"Approved\" && row.selfAssessedStatus != \"Postponed pending evidence\" && row.selfAssessedStatus != \"Postponed pending changes\" && (\n
\n );\n },\n omit: !modeApprove,\n },\n {\n id: \"email\",\n name: (\n \n Person Name (email)\n
\n ),\n selector: (row) => row.email,\n sortable: true,\n width: modeApprove ? \"29%\" : \"35%\",\n center: false,\n format: function (row, index) {\n return (\n \n {allowApprove ? (\n openProfile(row)}>\n {`${row.firstName} ${row.lastName} (${row.email})`}\n
\n ) : (\n `${row.firstName} ${row.lastName} (${row.email})`\n )}\n \n );\n },\n },\n {\n id: \"selfAssessedLastProfileUpdatedOn\",\n name: (\n \n Last Updated by and date\n it.name == \"selfAssessedLastProfileUpdatedBy\") ? columnSearchKeywords.find((it) => it.name == \"selfAssessedLastProfileUpdatedBy\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.selfAssessedLastProfileUpdatedOn,\n sortable: true,\n sortFunction: lastUpdatedSort,\n width: \"13%\",\n center: false,\n format: function (row, index) {\n if (row.selfAssessedLastProfileUpdatedOn) {\n return (\n \n {row.selfAssessedLastProfileUpdatedBy && (\n \n {row.selfAssessedLastProfileUpdatedBy}\n \n )}\n {`${new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(row.selfAssessedLastProfileUpdatedOn))} ${row.selfAssessedLastProfileVersion ? `(v${row.selfAssessedLastProfileVersion})` : \"\"}`}\n \n );\n } else {\n return \"\";\n }\n },\n },\n {\n id: \"selfAssessedLastApprovedOn\",\n name: (\n \n Last approved by and date\n it.name == \"selfAssessedLastApprovedBy\") ? columnSearchKeywords.find((it) => it.name == \"selfAssessedLastApprovedBy\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.selfAssessedLastApprovedOn,\n sortable: true,\n sortFunction: lastApprovedSort,\n width: \"13%\",\n center: false,\n format: function (row, index) {\n if (row.selfAssessedLastApprovedOn) {\n return (\n \n {row.selfAssessedLastApprovedBy && (\n \n {row.selfAssessedLastApprovedBy}\n \n )}\n {`${new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(row.selfAssessedLastApprovedOn))} ${row.selfAssessedLastApprovedVersion ? `(v${row.selfAssessedLastApprovedVersion})` : \"\"}`}\n \n );\n } else {\n return \"\";\n }\n },\n },\n {\n id: \"selfAssessedStatus\",\n name: (\n \n SelfAssessed Status\n it.name == \"selfAssessedStatus\") ? columnSearchKeywords.find((it) => it.name == \"selfAssessedStatus\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.selfAssessedStatus,\n sortable: true,\n width: \"13%\",\n center: false,\n wrap: true,\n format: function (row, index) {\n return (\n \n {row.selfAssessedStatus} \n {row.selfAssessedStatus == \"Requested\" && row.approvalRequestSentOn && (\n \n \n )}\n {row.isApprovalPostponed && (row.selfAssessedStatus == \"Postponed pending evidence\" || row.selfAssessedStatus == \"Postponed pending changes\") && (\n \n {`${row.approvalPostponedBy} has postponed your approval on ${\n row.approvalPostponedOn\n ? new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(row.approvalPostponedOn))\n : \"\"\n } requesting ${row.approvalPostponedType} with the following comment`}\n \n )}\n \n );\n },\n },\n {\n id: \"selfAssessedLastProfileNumberOfChange\",\n name: (\n \n Number of Skill Changes\n it.name == \"selfAssessedLastProfileNumberOfChange\") ? columnSearchKeywords.find((it) => it.name == \"selfAssessedLastProfileNumberOfChange\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.selfAssessedLastProfileNumberOfChange,\n sortable: true,\n width: \"13%\",\n center: false,\n format: function (row, index) {\n return row.selfAssessedStatus != \"Approved\" && row.selfAssessedLastProfileNumberOfChange;\n },\n },\n {\n id: \"approvalPostponedOn\",\n name: (\n \n Postponed by and date\n it.name == \"approvalPostponedBy\") ? columnSearchKeywords.find((it) => it.name == \"approvalPostponedBy\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.approvalPostponedOn,\n sortable: true,\n sortFunction: postponedOnSort,\n width: \"13%\",\n center: false,\n format: function (row, index) {\n if (row.approvalPostponedOn) {\n return (\n \n {row.approvalPostponedBy && (\n \n {row.approvalPostponedBy}\n \n )}\n {`${new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(row.approvalPostponedOn))}`}\n \n );\n } else {\n return \"\";\n }\n },\n },\n ];\n\n return (\n \n \n
\n ) : (\n \n \n \n {\n this.handleClearSelection();\n this.setState({ searchKeyword, personsSkillProfileSelected: [] });\n }}\n >\n \n {\n this.handleClearSelection();\n this.setState({ searchKeyword: \"\", personsSkillProfileSelected: [] });\n }}\n >\n \n \n \n \n \n \n )}\n {allowApprove && !modeApprove && (\n \n \n \n \n )}\n {modeApprove && (\n \n \n \n {!this.state.loadingPrint ? \"OK\" : \n Cancel\n \n \n )}\n \n
\n
\n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n error: state.auth.error,\n personId: state.auth.personId,\n email: state.auth.email,\n loginWithTeams: state.auth.loginWithTeams,\n\n personsLoading: state.adminPerson.loading,\n personsError: state.adminPerson.error,\n persons: state.adminPerson.persons,\n personsAdmin: state.adminPerson.personsAdmin,\n isUpdating: state.adminPerson.isUpdating,\n\n loadingPrint: state.adminPerson.loadingPrint,\n printData: state.adminPerson.printData,\n\n pageAssignments: state.adminPerson.pageAssignments,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onAdminPerson: bindActionCreators(adminPersonActions, dispatch),\n onPerson: bindActionCreators(personActions, dispatch),\n onSkillProfile: bindActionCreators(skillProfileActions, dispatch),\n };\n};\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(ManageSelfAssessed));\n","import * as authActions from \"../../../store/actions/authAction\";\nimport * as configActions from \"../../../store/actions/configAction\";\nimport * as adminPersonActions from \"../../../store/admin/actions/adminPersonActions\";\nimport { dismisAlert, generateAlert } from \"../../../utils/alertUtils\";\nimport { filterArray } from \"../../../utils/filterUtils\";\nimport { contentTranslator } from \"../../../utils/translatorUtils\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport { SkillsTxTableClearSearch } from \"../../common/SkillsTxTableClearSearch\";\nimport { SkillsTxTableSearchBar } from \"../../common/SkillsTxTableSearchBar\";\nimport { HubConnectionBuilder } from \"@aspnet/signalr\";\nimport { faSquare } from \"@fortawesome/free-regular-svg-icons\";\nimport { faCopy, faPenToSquare, faSquareCheck, faSquareMinus, faSync } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { withRouter } from \"react-router-dom\";\nimport { Button, Col, Input, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\nconst messageHubHostname = process.env.NODE_ENV === \"development\" ? process.env.REACT_APP_MESSAGE_HUB_ENDPOINT : \"/messagehub\";\n\nclass ManageProfiles extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: null,\n loading: true,\n alerts: [],\n persons: [],\n selectedPerson: null,\n isUpdating: false,\n personsSelected: [],\n modeCopyProfiles: false,\n };\n\n this.filterArray = filterArray.bind(this);\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n connectSignalR = () => {\n this.connection = new HubConnectionBuilder().withUrl(messageHubHostname).build();\n\n this.connection.on(`CopySelfAssessedProfileNotification`, (response) => {\n if (response.action == \"CopySelfAssessedProfile\") {\n if (response.status == \"Success\") {\n let copyProfileRequestResponse = response.data;\n this.props.onPerson.updateCopySelfProfilesAsEndorsedStatus(copyProfileRequestResponse);\n this.generateAlert(\"success\", \"Some copy profile request status updated.\");\n }\n }\n });\n\n this.connection.start().catch((err) => console.error(err.toString()));\n };\n\n disconnectSignalR = () => {\n if (this.connection) this.connection.stop();\n };\n\n componentDidMount() {\n localStorage.setItem(\"routeAdminFrom\", \"/admin/selfprofiles\");\n localStorage.setItem(\"manageProfileByAdminPopup\", \"FALSE\");\n\n this.props.onAuth.authCheckState().then(() => {\n this.initData();\n this.setState({ loading: this.props.loading });\n this.connectSignalR();\n });\n }\n\n componentWillUnmount() {\n this.disconnectSignalR();\n localStorage.setItem(\"showApprovedProfileOnly\", \"FALSE\");\n }\n\n searchProperties = () => {\n return [\"email\", \"firstName\", \"lastName\", \"lastApprovedBy\", \"copyProfileRequestStatus\"];\n };\n\n componentDidUpdate(prevProps) {\n if (prevProps.persons !== this.props.persons && this.props.persons) {\n this.setState({\n persons: this.reformPersons(\n this.props.persons\n .filter((it) => !it.inactive && it.accounts && it.accounts.filter((acc) => acc.assessmentId == this.props.assessmentId && acc.approvals && acc.approvals.length > 0).length > 0)\n .sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))\n ),\n });\n }\n\n if (prevProps.mode !== this.props.mode && prevProps.mode) {\n this.handleRefresh();\n }\n }\n\n initData = () => {\n this.props.onPerson.getPersonsIncludeCopySelfProfileStatus().then(() => {\n this.setState({\n persons: this.reformPersons(\n this.props.persons\n .filter((it) => !it.inactive && it.accounts && it.accounts.filter((acc) => acc.assessmentId == this.props.assessmentId && acc.approvals && acc.approvals.length > 0).length > 0)\n .sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))\n ),\n });\n });\n };\n\n reformPersons = (persons) => {\n return persons.map((it) => {\n return {\n id: it.id,\n companyId: it.companyId,\n firstName: it.firstName,\n lastName: it.lastName,\n email: it.email,\n completeName: `${it.firstName}${it.lastName ? ` ${it.lastName}` : \"\"}${it.email ? ` ${it.email}` : \"\"}`,\n salutation: it.salutation ? it.salutation : \"\",\n position: it.position ? it.position : \"\",\n inactive: it.inactive,\n personType: it.personType ? it.personType : \"\",\n accessGroup: it.accessGroup,\n allowNotifications: it.allowNotifications,\n lastActivityOn: it.lastActivityOn,\n lastActivitySystem: it.lastActivitySystem,\n createdOn: it.createdOn,\n countryCode: it.countryCode ? it.countryCode : \"\",\n country: it.country ? it.country : \"\",\n location: it.location ? it.location : \"\",\n selfAssessmentReason: it.selfAssessmentReason ? it.selfAssessmentReason : \"\",\n encryptedId: it.encryptedId,\n team: it.team ? it.team : \"\",\n usePreferredName: it.usePreferredName,\n other: it.other ? it.other : \"\",\n department: it.department ? it.department : \"\",\n businessUnit: it.businessUnit ? it.businessUnit : \"\",\n division: it.division ? it.division : \"\",\n territory: it.territory ? it.territory : \"\",\n costCentre: it.costCentre ? it.costCentre : \"\",\n supervisor: it.supervisor ? it.supervisor : \"\",\n validatedDate: it.validatedDate,\n isCandidate: it.isCandidate,\n isAnalyticsUser: it.isAnalyticsUser,\n leaveOn: it.leaveOn,\n isAssigned: it.isAssigned,\n isInvited: it.isInvited,\n invitedOn: it.invitedOn,\n teams: it.teams ? [...it.teams] : null,\n profilePictureUrl: it.profilePictureUrl,\n activityStatementInterval: it.activityStatementInterval,\n lastUpdatedOn: it.lastUpdatedOn,\n lastUpdatedVersion: it.lastUpdatedVersion,\n latestAssessmentId: it.latestAssessmentId,\n cartridgeId: it.cartridgeId,\n account: it.accounts ? it.accounts.sort((b, a) => new Date(a.createdOn) - new Date(b.createdOn))[0] : null,\n lastApprovedVersion: it.selfAssessedLastApprovedVersion,\n lastApprovedOn: it.selfAssessedLastApprovedOn,\n lastApprovedBy: it.selfAssessedLastApprovedBy,\n copyProfileRequested: it.selfAssessedCopyProfileRequested,\n copyProfileRequestedOn: it.selfAssessedCopyProfileRequestedOn,\n copyProfileRequestStatus: it.selfAssessedCopyProfileRequestStatus ? it.selfAssessedCopyProfileRequestStatus : \"Not Requested\",\n };\n });\n };\n\n handleRefresh = () => {\n this.setState({ personsSelected: [] });\n this.initData();\n };\n\n pad2 = (n) => {\n return (n < 10 ? \"0\" : \"\") + n;\n };\n\n toFixedIfNecessary = (value, dp) => {\n return +parseFloat(value).toFixed(dp);\n };\n\n toggleCopyProfiles = () => {\n this.handleClearSelection();\n const modeCopyProfiles = this.state.modeCopyProfiles;\n this.setState({ modeCopyProfiles: !modeCopyProfiles });\n };\n\n handleRowClick = (row) => {\n if (!row.copyProfileRequested) {\n const persons = this.state.persons;\n const updatedData = persons.find((it) => it.id == row.id);\n updatedData.toggleSelected = !updatedData.toggleSelected;\n\n this.setState({ persons: [...persons], personsSelected: persons.filter((it) => it.toggleSelected).map((row) => row.id) });\n }\n };\n\n handleSelectAll = () => {\n const { persons, searchKeyword, columnSearchKeywords } = this.state;\n let selectAll = false;\n\n const filtered = this.filterArray(persons, searchKeyword, this.searchProperties(), columnSearchKeywords);\n\n if (filtered.filter((it) => it.toggleSelected && !it.copyProfileRequested).length == 0) {\n selectAll = true;\n } else if (filtered.filter((it) => !it.toggleSelected && !it.copyProfileRequested).length == 0) {\n selectAll = false;\n } else {\n selectAll = true;\n }\n\n persons.forEach((it) => {\n it.toggleSelected = false;\n });\n\n if (selectAll) {\n persons.forEach((it) => {\n if (filtered.find((f) => f.id == it.id)) {\n if (!it.copyProfileRequested) {\n it.toggleSelected = true;\n }\n }\n });\n }\n\n this.setState({ persons: [...persons], personsSelected: persons.filter((it) => it.toggleSelected).map((row) => row.id) });\n };\n\n handleClearSelection = () => {\n const persons = this.state.persons;\n\n persons.forEach((it) => {\n it.toggleSelected = false;\n });\n\n this.setState({ persons: [...persons] });\n };\n\n showProfile = (person) => {\n localStorage.setItem(\"showApprovedProfileOnly\", \"TRUE\");\n localStorage.setItem(\"profileType\", \"Self Assessed\");\n localStorage.setItem(\"manageProfileByAdminPopup\", \"TRUE\");\n\n this.props.history.push(`/SfiaProfile/Manage?email=${person.email}`);\n };\n\n handleConfirmRequestCopyProfile = () => {\n const { persons, searchKeyword, modeCopyProfiles, personsSelected } = this.state;\n\n const copiedProfiles = persons\n .filter((it) => personsSelected.includes(it.id))\n .map((it) => {\n return {\n personId: it.id,\n profileType: \"Self Assessed\",\n version: it.lastApprovedVersion,\n };\n });\n\n this.setState({ isUpdating: true });\n\n this.props.onPerson.requestCopySelfProfilesAsEndorsed(copiedProfiles).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.personsError) {\n this.generateAlert(\"success\", \"Copy profiles requested.\");\n this.toggleCopyProfiles();\n\n const copyProfileRequestIds = this.props.copyProfileRequests.map((it) => {\n return it.id;\n });\n\n Promise.resolve(this.props.onPerson.processCopySelfProfilesAsEndorsed(copyProfileRequestIds)).then(() => {});\n } else {\n this.generateAlert(\"danger\", this.props.personsError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n onTableFilterChange = (e, searchType) => {\n let columnSearchKeywords = this.state.columnSearchKeywords;\n if (!columnSearchKeywords) {\n columnSearchKeywords = [];\n }\n\n if (columnSearchKeywords.find((it) => it.name == e.target.name)) {\n let columnSearchKeyword = columnSearchKeywords.find((it) => it.name == e.target.name);\n columnSearchKeyword.value = e.target.value;\n } else {\n columnSearchKeywords.push({\n name: e.target.name,\n value: e.target.value,\n searchType,\n });\n }\n\n this.setState({ columnSearchKeywords });\n };\n\n render() {\n const { persons, searchKeyword, modeCopyProfiles, personsSelected, columnSearchKeywords } = this.state;\n const pageAssignments = this.props.pageAssignments;\n\n let pageAssignment = null;\n\n if (pageAssignments.find((it) => it.pageName == \"Create Endorsed from Approved\")) {\n pageAssignment = pageAssignments.find((it) => it.pageName == \"Create Endorsed from Approved\");\n }\n\n const handleRowClick = this.handleRowClick;\n const handleSelectAll = this.handleSelectAll;\n const allowCopy = pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Copy Profile as Endorsed\" && op.allow == true) ? true : false;\n const filtered = this.filterArray(persons, searchKeyword, this.searchProperties(), columnSearchKeywords);\n const showProfile = this.showProfile;\n const onTableFilterChange = this.onTableFilterChange;\n\n const columns = [\n {\n id: \"id\",\n name: (\n \n
\n ),\n selector: (row) => row.id,\n sortable: false,\n width: \"6%\",\n center: true,\n format: function (row, index) {\n return !row.copyProfileRequested ? (\n \n
\n ) : (\n \"\"\n );\n },\n omit: !modeCopyProfiles,\n },\n {\n id: \"lastUpdatedOn\",\n name: \"Action\",\n selector: (row) => row.id,\n sortable: true,\n width: \"6%\",\n center: true,\n format: function (row, index) {\n return (\n \n \n showProfile(row)} />\n \n Show Profile\n \n \n
\n );\n },\n omit: !allowCopy,\n },\n {\n id: \"email\",\n name: (\n \n Person Name (email)\n
\n ),\n selector: (row) => row.email,\n sortable: true,\n width: modeCopyProfiles ? \"30%\" : allowCopy ? \"36%\" : \"41%\",\n wrap: true,\n format: function (row, index) {\n return modeCopyProfiles && !row.copyProfileRequested ? handleRowClick(row)}>{`${row.firstName} ${row.lastName} (${row.email})`} : {`${row.firstName} ${row.lastName} (${row.email})`} ;\n },\n },\n {\n id: \"lastApprovedOn\",\n name: \"Last Approved On\",\n selector: (row) => row.lastApprovedOn,\n sortable: true,\n width: \"13%\",\n wrap: true,\n format: function (row, index) {\n return modeCopyProfiles && !row.copyProfileRequested ? (\n handleRowClick(row)}>\n {new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"long\",\n day: \"numeric\",\n }).format(new Date(row.lastApprovedOn))}\n \n ) : (\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"long\",\n day: \"numeric\",\n }).format(new Date(row.lastApprovedOn))\n );\n },\n },\n {\n id: \"lastApprovedVersion\",\n name: (\n \n Last Approved Version\n it.name == \"lastApprovedVersion\") ? columnSearchKeywords.find((it) => it.name == \"lastApprovedVersion\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.lastApprovedVersion,\n sortable: true,\n width: \"10%\",\n wrap: true,\n format: function (row, index) {\n return modeCopyProfiles && !row.copyProfileRequested ? handleRowClick(row)}>{`v${row.lastApprovedVersion}`} : `v${row.lastApprovedVersion}`;\n },\n center: true,\n },\n {\n id: \"lastApprovedBy\",\n name: (\n \n Last Approved By\n it.name == \"lastApprovedBy\") ? columnSearchKeywords.find((it) => it.name == \"lastApprovedBy\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.lastApprovedBy,\n sortable: true,\n width: \"20%\",\n wrap: true,\n format: function (row, index) {\n return modeCopyProfiles && !row.copyProfileRequested ? handleRowClick(row)}>{row.lastApprovedBy} : row.lastApprovedBy;\n },\n },\n {\n id: \"copyProfileRequestStatus\",\n name: (\n \n Copy Profile Status\n it.name == \"copyProfileRequestStatus\") ? columnSearchKeywords.find((it) => it.name == \"copyProfileRequestStatus\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.copyProfileRequestStatus,\n sortable: true,\n width: \"15%\",\n wrap: true,\n format: function (row, index) {\n return modeCopyProfiles && !row.copyProfileRequested ? handleRowClick(row)}>{row.copyProfileRequestStatus} : row.copyProfileRequestStatus;\n },\n },\n ];\n\n return (\n \n \n
\n ) : (\n \n \n \n {\n this.handleClearSelection();\n this.setState({ searchKeyword, personsSkillProfileSelected: [] });\n }}\n >\n \n {\n this.handleClearSelection();\n this.setState({ searchKeyword: \"\", personsSkillProfileSelected: [] });\n }}\n >\n \n \n \n \n \n \n )}\n {allowCopy && modeCopyProfiles && (\n \n \n \n OK\n \n \n \n Cancel\n \n \n )}\n \n
\n
\n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n assessmentId: state.auth.assessmentId,\n error: state.auth.error,\n loginWithTeams: state.auth.loginWithTeams,\n\n personsLoading: state.adminPerson.loading,\n personsError: state.adminPerson.error,\n persons: state.adminPerson.persons,\n isUpdating: state.adminPerson.isUpdating,\n copyProfileRequests: state.adminPerson.copyProfileRequests,\n\n loadingPrint: state.adminPerson.loadingPrint,\n printData: state.adminPerson.printData,\n\n pageAssignments: state.adminPerson.pageAssignments,\n config: state.config.config,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onPerson: bindActionCreators(adminPersonActions, dispatch),\n onConfig: bindActionCreators(configActions, dispatch),\n };\n};\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(ManageProfiles));\n","import ErrorHandler from \"./../errorResponseHandler\";\nimport Instance from \"./../service/AxiosInstance\";\n\nexport const axios = Instance.apiInstance();\n\nclass AdminActionLogAPI {\n static getActionLogs(startDate, endDate) {\n return axios\n .get(`/actionLogs?startDate=${startDate}&endDate=${endDate}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static exportActionLogsExcel(request) {\n return axios\n .post(`/actionLogs/exportlogs`, request, {\n responseType: \"blob\",\n })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n console.log(\"err\", err);\n throw ErrorHandler(err);\n });\n }\n}\n\nexport default AdminActionLogAPI;\n","import AdminActionLogAPI from \"./../../../common/api/adminservice/AdminActionLogService\";\nimport * as adminActionTypes from \"./adminActionTypes\";\n\nexport const getActionLogsStart = () => {\n return {\n type: adminActionTypes.GET_ACTION_LOGS_START,\n };\n};\n\nexport const getActionLogsSuccess = (actionLogs) => {\n return {\n type: adminActionTypes.GET_ACTION_LOGS_SUCCESS,\n actionLogs,\n };\n};\n\nexport const getActionLogsFail = (error) => {\n return {\n type: adminActionTypes.GET_ACTION_LOGS_FAIL,\n error: error,\n };\n};\n\nexport const getActionLogs = (startDate, endDate) => {\n return (dispatch) => {\n dispatch(getActionLogsStart());\n\n return AdminActionLogAPI.getActionLogs(startDate, endDate)\n .then((res) => {\n dispatch(getActionLogsSuccess(res));\n })\n .catch((err) => {\n dispatch(getActionLogsFail(err));\n });\n };\n};\n\nexport const exportActionLogsExcelStart = () => {\n return {\n type: adminActionTypes.EXPORT_ACTION_LOGS_START,\n };\n};\n\nexport const exportActionLogsExcelSuccess = (printData) => {\n return {\n type: adminActionTypes.EXPORT_ACTION_LOGS_SUCCESS,\n printData,\n };\n};\n\nexport const exportActionLogsExcelFail = (error) => {\n return {\n type: adminActionTypes.EXPORT_ACTION_LOGS_FAIL,\n error: error,\n };\n};\n\nexport const exportActionLogsExcel = (request) => {\n return (dispatch) => {\n dispatch(exportActionLogsExcelStart());\n\n return AdminActionLogAPI.exportActionLogsExcel(request)\n .then((res) => {\n dispatch(exportActionLogsExcelSuccess(res));\n })\n .catch((err) => {\n dispatch(exportActionLogsExcelFail(err));\n });\n };\n};\n","import * as actionLogActions from \"../../../store/admin/actions/adminActionLogActions\";\nimport { formatDate_localeString } from \"../../../utils/stringUtils\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport { SkillsTxTableClearSearch } from \"../../common/SkillsTxTableClearSearch\";\nimport { SkillsTxTableSearchBar } from \"../../common/SkillsTxTableSearchBar\";\nimport { faFileExcel, faMagnifyingGlass } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport Multiselect from \"multiselect-react-dropdown\";\nimport React from \"react\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Row } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\n\nconst rowStyle = {\n fontSize: \"12px\",\n};\n\nconst headerStyle = {\n color: \"#2B2B2B\",\n fontSize: \"18px\",\n fontFamily: \"IBMPlexSans-Bold\",\n};\n\nclass ManageActionLogs extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n actionLogs: [],\n isUpdating: false,\n showDialog: false,\n showUpdateDialog: false,\n updateMode: null,\n touched: false,\n searchProperties: [\"type\", \"firstName\", \"lastName\", \"action\", \"email\"],\n startDate: null,\n endDate: null,\n actionTypeOptions: [\n { value: \"Query\", label: \"Query\" },\n { value: \"Command\", label: \"Command\" },\n ],\n selectedActionTypeOptions: [{ value: \"Command\", label: \"Command\" }],\n actionOptions: [],\n selectedActionOptions: [],\n };\n\n this.formatDate_localeString = formatDate_localeString.bind(this);\n }\n\n componentDidMount() {\n window.scrollTo(0, 100);\n\n var today = new Date();\n var weekAgo = this.addDays(new Date(), -7);\n\n this.setState(\n {\n startDate: weekAgo,\n endDate: today,\n },\n () => {\n this.searchData();\n }\n );\n }\n\n addDays = (date, days) => {\n date.setDate(date.getDate() + days);\n return date;\n };\n\n pad2 = (n) => {\n return (n < 10 ? \"0\" : \"\") + n;\n };\n\n handleRefresh = () => {\n this.searchData();\n };\n\n searchData = () => {\n var { startDate, endDate } = this.state;\n const selectedTypes = this.state.selectedActionTypeOptions.map((it) => it.value);\n\n this.setState({ loading: true });\n this.props.onActionLog.getActionLogs(startDate.getFullYear() + \"-\" + this.pad2(startDate.getMonth() + 1) + \"-\" + this.pad2(startDate.getDate()), endDate.getFullYear() + \"-\" + this.pad2(endDate.getMonth() + 1) + \"-\" + this.pad2(endDate.getDate())).then(() => {\n if (!this.props.loading) {\n const actions = [\n \"SignIn\",\n \"SignOut\",\n ...new Set(\n this.props.actionLogs\n .filter((it) => it.action != \"SignIn\" && it.action != \"SignOut\")\n .sort((a, b) => (a.action > b.action ? 1 : -1))\n .map((it) => it.action)\n ),\n ];\n\n this.setState({\n actionLogs: this.props.actionLogs.filter((it) => selectedTypes.includes(it.type)),\n\n actionOptions: actions.map((it) => {\n return {\n value: it,\n label: it,\n };\n }),\n selectedActionOptions: actions.map((it) => {\n return {\n value: it,\n label: it,\n };\n }),\n });\n }\n\n this.setState({ loading: this.props.loading });\n });\n };\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n }\n }\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.setState({ showDialog: !showDialog });\n };\n\n handleDateChange = (name, value) => {\n if (name == \"startDate\") {\n this.setState({ startDate: new Date(value) });\n } else {\n this.setState({ endDate: new Date(value) });\n }\n };\n\n handleSelectType = (selectedList, selectedItem) => {\n const selectedTypes = selectedList.map((it) => it.value);\n const selectedActions = this.state.selectedActionOptions.map((it) => it.value);\n this.setState({ selectedActionTypeOptions: [...selectedList], actionLogs: [...this.props.actionLogs.filter((it) => selectedTypes.includes(it.type) && selectedActions.includes(it.action))] });\n };\n\n handleRemoveType = (selectedList, selectedItem) => {\n const selectedTypes = selectedList.map((it) => it.value);\n const selectedActions = this.state.selectedActionOptions.map((it) => it.value);\n this.setState({ selectedActionTypeOptions: [...selectedList], actionLogs: [...this.props.actionLogs.filter((it) => selectedTypes.includes(it.type) && selectedActions.includes(it.action))] });\n };\n\n handleSelectAction = (selectedList, selectedItem) => {\n const selectedTypes = this.state.selectedActionTypeOptions.map((it) => it.value);\n const selectedActions = selectedList.map((it) => it.value);\n this.setState({ selectedActionOptions: [...selectedList], actionLogs: [...this.props.actionLogs.filter((it) => selectedTypes.includes(it.type) && selectedActions.includes(it.action))] });\n };\n\n handleRemoveAction = (selectedList, selectedItem) => {\n const selectedTypes = this.state.selectedActionTypeOptions.map((it) => it.value);\n const selectedActions = selectedList.map((it) => it.value);\n this.setState({ selectedActionOptions: [...selectedList], actionLogs: [...this.props.actionLogs.filter((it) => selectedTypes.includes(it.type) && selectedActions.includes(it.action))] });\n };\n\n handleExport = () => {\n var { startDate, endDate } = this.state;\n const timezoneOffset = (new Date().getTimezoneOffset() * -1) / 60;\n const selectedTypes = this.state.selectedActionTypeOptions.map((it) => it.value);\n const selectedActions = this.state.selectedActionOptions.map((it) => it.value);\n\n this.props.onActionLog\n .exportActionLogsExcel({\n timezoneOffset,\n startDate: startDate.getFullYear() + \"-\" + this.pad2(startDate.getMonth() + 1) + \"-\" + this.pad2(startDate.getDate()),\n endDate: endDate.getFullYear() + \"-\" + this.pad2(endDate.getMonth() + 1) + \"-\" + this.pad2(endDate.getDate()),\n selectedTypes,\n selectedActions,\n })\n .then(() => {\n if (!this.props.loadingPrint && !this.props.error) {\n if (this.props.printData) {\n var today = new Date();\n var strToday = today.getFullYear() + this.pad2(today.getMonth() + 1) + this.pad2(today.getDate()) + \"_\" + this.pad2(today.getHours()) + this.pad2(today.getMinutes()) + this.pad2(today.getSeconds());\n FileDownload(this.props.printData, `ExportAuditLogs_${strToday}.xlsx`);\n }\n }\n });\n };\n\n render() {\n const { actionLogs, searchKeyword, searchProperties, actionTypeOptions, selectedActionTypeOptions, actionOptions, selectedActionOptions } = this.state;\n const startDate = this.state.startDate ? this.formatDate_localeString(new Date(this.state.startDate)) : null;\n const endDate = this.state.endDate ? this.formatDate_localeString(new Date(this.state.endDate)) : null;\n\n const columns = [\n {\n id: \"personId\",\n name: \"User\",\n selector: (row) => row.personId,\n sortable: true,\n width: \"18%\",\n format: function (row, index) {\n return `${row.firstName} ${row.lastName}`;\n },\n wrap: true,\n },\n {\n id: \"email\",\n name: \"Email\",\n selector: (row) => row.email,\n sortable: true,\n width: \"20%\",\n wrap: true,\n },\n {\n id: \"actionDate\",\n name: \"Date\",\n selector: (row) => row.actionDate,\n sortable: true,\n width: \"12%\",\n format: function (row, index) {\n return new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n hourCycle: \"h23\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n second: \"2-digit\",\n }).format(new Date(row.actionDate));\n },\n },\n {\n id: \"type\",\n name: \"Type\",\n selector: (row) => row.type,\n sortable: true,\n width: \"10%\",\n wrap: true,\n },\n {\n id: \"action\",\n name: \"Action\",\n selector: (row) => row.action,\n sortable: true,\n width: \"40%\",\n wrap: true,\n },\n ];\n\n return (\n \n \n Audit Logs\n
\n \n
\n \n this.handleDateChange(\"startDate\", value)} disabled={this.state.loading} className=\"form-control\" />\n
\n to \n \n this.handleDateChange(\"endDate\", value)} disabled={this.state.loading} className=\"form-control\" />\n
\n \n \n {\n this.setState({ searchKeyword });\n }}\n >\n \n {\n this.setState({ searchKeyword: \"\" });\n }}\n >\n \n
\n
\n \n
\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.adminActionLog.loading,\n error: state.adminActionLog.error,\n actionLogs: state.adminActionLog.actionLogs,\n isUpdating: state.adminActionLog.isUpdating,\n\n loadingPrint: state.adminActionLog.loadingPrint,\n printData: state.adminActionLog.printData,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onActionLog: bindActionCreators(actionLogActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ManageActionLogs);\n","import ErrorHandler from \"./../errorResponseHandler\";\nimport Instance from \"./../service/AxiosInstance\";\n\nexport const axios = Instance.apiInstance();\n\nclass AdminActionTypeAPI {\n static getActionTypes() {\n return axios\n .get(`/actiontypes`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static createActionType(actiontype) {\n return axios\n .post(`/actiontypes`, actiontype)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateActionType(id, actiontype) {\n return axios\n .put(`/actiontypes/${id}`, actiontype)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static deleteActionType(id) {\n return axios\n .delete(`/actiontypes/${id}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n}\n\nexport default AdminActionTypeAPI;\n","import AdminActionTypeAPI from \"./../../../common/api/adminservice/AdminActionTypService\";\nimport * as adminActionTypes from \"./adminActionTypes\";\n\nexport const getActionTypesStart = () => {\n return {\n type: adminActionTypes.GET_ACTIONTYPES_START,\n };\n};\n\nexport const getActionTypesSuccess = (actionTypes) => {\n return {\n type: adminActionTypes.GET_ACTIONTYPES_SUCCESS,\n actionTypes,\n };\n};\n\nexport const getActionTypesFail = (error) => {\n return {\n type: adminActionTypes.GET_ACTIONTYPES_FAIL,\n error: error,\n };\n};\n\nexport const getActionTypes = () => {\n return (dispatch) => {\n dispatch(getActionTypesStart());\n\n return AdminActionTypeAPI.getActionTypes()\n .then((res) => {\n dispatch(getActionTypesSuccess(res));\n })\n .catch((err) => {\n dispatch(getActionTypesFail(err));\n });\n };\n};\n\nexport const addActionTypeStart = () => {\n return {\n type: adminActionTypes.ADD_ACTIONTYPE_START,\n };\n};\n\nexport const addActionTypeSuccess = (addedActionType) => {\n return {\n type: adminActionTypes.ADD_ACTIONTYPE_SUCCESS,\n addedActionType,\n };\n};\n\nexport const addActionTypeFail = (error) => {\n return {\n type: adminActionTypes.ADD_ACTIONTYPE_FAIL,\n error: error,\n };\n};\n\nexport const addActionType = (actionType) => {\n return (dispatch) => {\n dispatch(addActionTypeStart());\n\n return AdminActionTypeAPI.createActionType(actionType)\n .then((res) => {\n dispatch(addActionTypeSuccess(res));\n })\n .catch((err) => {\n dispatch(addActionTypeFail(err));\n });\n };\n};\n\nexport const updateActionTypeStart = () => {\n return {\n type: adminActionTypes.UPDATE_ACTIONTYPE_START,\n };\n};\n\nexport const updateActionTypeSuccess = (updatedActionType) => {\n return {\n type: adminActionTypes.UPDATE_ACTIONTYPE_SUCCESS,\n updatedActionType,\n };\n};\n\nexport const updateActionTypeFail = (error) => {\n return {\n type: adminActionTypes.UPDATE_ACTIONTYPE_FAIL,\n error: error,\n };\n};\n\nexport const updateActionType = (id, actionType) => {\n return (dispatch) => {\n dispatch(updateActionTypeStart());\n\n return AdminActionTypeAPI.updateActionType(id, actionType)\n .then((res) => {\n dispatch(updateActionTypeSuccess(res));\n })\n .catch((err) => {\n dispatch(updateActionTypeFail(err));\n });\n };\n};\n\nexport const deleteActionTypeStart = () => {\n return {\n type: adminActionTypes.DELETE_ACTIONTYPE_START,\n };\n};\n\nexport const deleteActionTypeSuccess = (deletedActionTypeId) => {\n return {\n type: adminActionTypes.DELETE_ACTIONTYPE_SUCCESS,\n deletedActionTypeId,\n };\n};\n\nexport const deleteActionTypeFail = (error) => {\n return {\n type: adminActionTypes.DELETE_ACTIONTYPE_FAIL,\n error: error,\n };\n};\n\nexport const deleteActionType = (id) => {\n return (dispatch) => {\n dispatch(deleteActionTypeStart());\n\n return AdminActionTypeAPI.deleteActionType(id)\n .then((res) => {\n dispatch(deleteActionTypeSuccess(id));\n })\n .catch((err) => {\n dispatch(deleteActionTypeFail(err));\n });\n };\n};\n","import * as actionTypeActions from \"../../../store/admin/actions/adminActionTypeActions\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport { SkillsTxTableClearSearch } from \"../../common/SkillsTxTableClearSearch\";\nimport { SkillsTxTableSearchBar } from \"../../common/SkillsTxTableSearchBar\";\nimport { faPenToSquare, faMinusCircle, faPlus, faSync } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Form, FormGroup, Input, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst rowStyle = {\n fontSize: \"12px\",\n};\n\nclass ManageActionTypes extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n actionTypes: [],\n isUpdating: false,\n showDialog: false,\n showUpdateDialog: false,\n updateMode: null,\n touched: false,\n editedActionTypeId: null,\n actionTypeName: \"\",\n searchProperties: [\"name\"],\n };\n }\n\n componentDidMount() {\n this.initData();\n }\n\n handleRefresh = () => {\n this.initData();\n };\n\n initData = () => {\n this.setState({ loading: true });\n this.props.onActionType.getActionTypes().then(() => {\n if (!this.props.loading) {\n this.setState({\n actionTypes: this.props.actionTypes.sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1)),\n });\n }\n\n this.setState({ loading: this.props.loading });\n });\n };\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n }\n }\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.setState({ showDialog: !showDialog });\n };\n\n handleAddNew = () => {\n this.setState({ updateMode: \"Add\", showUpdateDialog: true, touched: false, actionTypeName: \"\" });\n };\n\n openUpdate = (evidenceType) => {\n this.setState({ updateMode: \"Update\", showUpdateDialog: true, touched: false, actionTypeName: evidenceType.name, editedActionTypeId: evidenceType.id });\n };\n\n handleChange = (event) => {\n const form = this.state.form;\n const { name, value } = event.target;\n\n this.setState({ touched: true, actionTypeName: value });\n };\n\n handleSubmit = () => {\n const { updateMode, actionTypeName, editedActionTypeId } = this.state;\n this.setState({ isUpdating: true });\n\n if (updateMode == \"Add\") {\n this.props.onActionType\n .addActionType({\n name: actionTypeName.trim(),\n })\n .then(() => {\n if (!this.props.isUpdating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.setState({\n actionTypes: this.props.actionTypes.sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1)),\n });\n this.togleUpdateDialog();\n this.props.generateAlert(\"success\", \"Action type added\");\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n } else {\n this.props.onActionType\n .updateActionType(editedActionTypeId, {\n name: actionTypeName.trim(),\n })\n .then(() => {\n if (!this.props.isUpdating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.setState({\n actionTypes: this.props.actionTypes.sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1)),\n });\n this.togleUpdateDialog();\n this.props.generateAlert(\"success\", \"Action type updated\");\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n }\n };\n\n togleUpdateDialog = () => {\n const showUpdateDialog = this.state.showUpdateDialog;\n this.setState({ showUpdateDialog: !showUpdateDialog });\n };\n\n renderUpdate = () => {\n return (\n \n {this.state.updateMode ? this.state.updateMode : \"\"} Action Types \n \n \n \n \n {\n this.handleSubmit();\n }}\n disabled={this.state.isUpdating || this.state.actionTypeName == \"\"}\n >\n Save\n \n \n Close\n \n \n \n );\n };\n\n handleDelete = (row) => {\n this.setState({ isUpdating: true });\n\n this.props.onActionType.deleteActionType(row.id).then(() => {\n if (!this.props.isUpdating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n const actionTypes = this.props.actionTypes\n .sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1))\n .map((it) => {\n return {\n id: it.id,\n name: it.name,\n isUsed: it.isUsed,\n lastUpdated: new Date(),\n };\n });\n this.setState({ actionTypes: [...actionTypes.filter((it) => it.id != row.id)] });\n this.props.generateAlert(\"success\", \"Action type deleted\");\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n render() {\n const { actionTypes, searchKeyword, searchProperties } = this.state;\n\n const openUpdate = this.openUpdate;\n const handleDelete = this.handleDelete;\n const columns = [\n {\n id: \"id\",\n name: \"Action\",\n selector: (row) => row.id,\n sortable: false,\n width: \"15%\",\n center: true,\n format: function (row, index) {\n return (\n \n openUpdate(row)} />\n \n Update\n \n {!row.isUsed && (\n \n \n handleDelete(row)} />\n \n Delete\n \n \n )}\n
\n );\n },\n omit: !this.props.allowEdit,\n },\n {\n id: \"name\",\n name: \"Name\",\n selector: (row) => row.name,\n sortable: true,\n width: this.props.allowEdit ? \"85%\" : \"100%\",\n },\n ];\n\n return (\n \n {this.renderUpdate()}\n \n Action Types \n \n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.adminActionType.loading,\n error: state.adminActionType.error,\n actionTypes: state.adminActionType.actionTypes,\n isUpdating: state.adminActionType.isUpdating,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onActionType: bindActionCreators(actionTypeActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ManageActionTypes);\n","import ErrorHandler from \"./../errorResponseHandler\";\nimport Instance from \"./../service/AxiosInstance\";\n\nexport const axios = Instance.apiInstance();\n\nclass AdminAllowedRegistrationEmailDomainAPI {\n static getAllowedRegistrationEmailDomains() {\n return axios\n .get(`/allowedRegistrationEmailDomains`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static createAllowedRegistrationEmailDomain(emailDomain) {\n return axios\n .post(`/allowedRegistrationEmailDomains`, { emailDomain })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateAllowedRegistrationEmailDomain(id, emailDomain) {\n return axios\n .put(`/allowedRegistrationEmailDomains/${id}`, { emailDomain })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static deleteAllowedRegistrationEmailDomain(id) {\n return axios\n .delete(`/allowedRegistrationEmailDomains/${id}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n}\n\nexport default AdminAllowedRegistrationEmailDomainAPI;\n","import AdminAllowedRegistrationEmailDomainAPI from \"./../../../common/api/adminservice/AdminAllowedRegistrationEmailDomainService\";\nimport * as adminActionTypes from \"./adminActionTypes\";\n\nexport const getAllowedRegistrationEmailDomainsStart = () => {\n return {\n type: adminActionTypes.GET_ALLOWED_REGISTRATION_EMAIL_DOMAINS_START,\n };\n};\n\nexport const getAllowedRegistrationEmailDomainsSuccess = (allowedRegistrationEmailDomains) => {\n return {\n type: adminActionTypes.GET_ALLOWED_REGISTRATION_EMAIL_DOMAINS_SUCCESS,\n allowedRegistrationEmailDomains,\n };\n};\n\nexport const getAllowedRegistrationEmailDomainsFail = (error) => {\n return {\n type: adminActionTypes.GET_ALLOWED_REGISTRATION_EMAIL_DOMAINS_FAIL,\n error: error,\n };\n};\n\nexport const getAllowedRegistrationEmailDomains = () => {\n return (dispatch) => {\n dispatch(getAllowedRegistrationEmailDomainsStart());\n\n return AdminAllowedRegistrationEmailDomainAPI.getAllowedRegistrationEmailDomains()\n .then((res) => {\n dispatch(getAllowedRegistrationEmailDomainsSuccess(res));\n })\n .catch((err) => {\n dispatch(getAllowedRegistrationEmailDomainsFail(err));\n });\n };\n};\n\nexport const addAllowedRegistrationEmailDomainStart = () => {\n return {\n type: adminActionTypes.ADD_ALLOWED_REGISTRATION_EMAIL_DOMAIN_START,\n };\n};\n\nexport const addAllowedRegistrationEmailDomainSuccess = (addedAllowedRegistrationEmailDomain) => {\n return {\n type: adminActionTypes.ADD_ALLOWED_REGISTRATION_EMAIL_DOMAIN_SUCCESS,\n addedAllowedRegistrationEmailDomain,\n };\n};\n\nexport const addAllowedRegistrationEmailDomainFail = (error) => {\n return {\n type: adminActionTypes.ADD_ALLOWED_REGISTRATION_EMAIL_DOMAIN_FAIL,\n error: error,\n };\n};\n\nexport const addAllowedRegistrationEmailDomain = (emailDomain) => {\n return (dispatch) => {\n dispatch(addAllowedRegistrationEmailDomainStart());\n\n return AdminAllowedRegistrationEmailDomainAPI.createAllowedRegistrationEmailDomain(emailDomain)\n .then((res) => {\n dispatch(addAllowedRegistrationEmailDomainSuccess(res));\n })\n .catch((err) => {\n dispatch(addAllowedRegistrationEmailDomainFail(err));\n });\n };\n};\n\nexport const updateAllowedRegistrationEmailDomainStart = () => {\n return {\n type: adminActionTypes.UPDATE_ALLOWED_REGISTRATION_EMAIL_DOMAIN_START,\n };\n};\n\nexport const updateAllowedRegistrationEmailDomainSuccess = (updatedAllowedRegistrationEmailDomain) => {\n return {\n type: adminActionTypes.UPDATE_ALLOWED_REGISTRATION_EMAIL_DOMAIN_SUCCESS,\n updatedAllowedRegistrationEmailDomain,\n };\n};\n\nexport const updateAllowedRegistrationEmailDomainFail = (error) => {\n return {\n type: adminActionTypes.UPDATE_ALLOWED_REGISTRATION_EMAIL_DOMAIN_FAIL,\n error: error,\n };\n};\n\nexport const updateAllowedRegistrationEmailDomain = (id, emailDomain) => {\n return (dispatch) => {\n dispatch(updateAllowedRegistrationEmailDomainStart());\n\n return AdminAllowedRegistrationEmailDomainAPI.updateAllowedRegistrationEmailDomain(id, emailDomain)\n .then((res) => {\n dispatch(updateAllowedRegistrationEmailDomainSuccess(res));\n })\n .catch((err) => {\n dispatch(updateAllowedRegistrationEmailDomainFail(err));\n });\n };\n};\n\nexport const deleteAllowedRegistrationEmailDomainStart = () => {\n return {\n type: adminActionTypes.DELETE_ALLOWED_REGISTRATION_EMAIL_DOMAIN_START,\n };\n};\n\nexport const deleteAllowedRegistrationEmailDomainSuccess = (deletedAllowedRegistrationEmailDomainId) => {\n return {\n type: adminActionTypes.DELETE_ALLOWED_REGISTRATION_EMAIL_DOMAIN_SUCCESS,\n deletedAllowedRegistrationEmailDomainId,\n };\n};\n\nexport const deleteAllowedRegistrationEmailDomainFail = (error) => {\n return {\n type: adminActionTypes.DELETE_ALLOWED_REGISTRATION_EMAIL_DOMAIN_FAIL,\n error: error,\n };\n};\n\nexport const deleteAllowedRegistrationEmailDomain = (id) => {\n return (dispatch) => {\n dispatch(deleteAllowedRegistrationEmailDomainStart());\n\n return AdminAllowedRegistrationEmailDomainAPI.deleteAllowedRegistrationEmailDomain(id)\n .then((res) => {\n dispatch(deleteAllowedRegistrationEmailDomainSuccess(id));\n })\n .catch((err) => {\n dispatch(deleteAllowedRegistrationEmailDomainFail(err));\n });\n };\n};\n","import * as allowedRegistrationEmailDomainActions from \"../../../store/admin/actions/adminAllowedRegistrationEmailDomainActions\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport { SkillsTxTableClearSearch } from \"../../common/SkillsTxTableClearSearch\";\nimport { SkillsTxTableSearchBar } from \"../../common/SkillsTxTableSearchBar\";\nimport { faPenToSquare, faMinusCircle, faPlus, faSync } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Form, FormGroup, Input, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst rowStyle = {\n fontSize: \"12px\",\n};\n\nclass ManageAllowedRegistrationEmailDomains extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n allowedRegistrationEmailDomains: [],\n isUpdating: false,\n showDialog: false,\n showUpdateDialog: false,\n updateMode: null,\n touched: false,\n editedAllowedRegistrationEmailDomainId: null,\n emailDomain: \"\",\n isValid: false,\n searchProperties: [\"emailDomain\"],\n };\n }\n\n componentDidMount() {\n //this.initData();\n }\n\n handleRefresh = () => {\n this.initData();\n };\n\n initData = () => {\n this.setState({ loading: true });\n this.props.onAllowedRegistrationEmailDomain.getAllowedRegistrationEmailDomains().then(() => {\n if (!this.props.loading) {\n this.setState({\n allowedRegistrationEmailDomains: this.props.allowedRegistrationEmailDomains.sort((a, b) => (`${a.emailDomain}` > `${b.emailDomain}` ? 1 : -1)),\n });\n }\n\n this.setState({ loading: this.props.loading });\n });\n };\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n this.initData();\n }\n }\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.setState({ showDialog: !showDialog });\n };\n\n handleAddNew = () => {\n this.setState({ updateMode: \"Add\", showUpdateDialog: true, touched: false, emailDomain: \"\" });\n };\n\n openUpdate = (allowedEmailDomain) => {\n this.setState({ updateMode: \"Update\", showUpdateDialog: true, touched: false, emailDomain: allowedEmailDomain.emailDomain, editedAllowedRegistrationEmailDomainId: allowedEmailDomain.id });\n };\n\n handleChange = (event) => {\n const form = this.state.form;\n const { name, value } = event.target;\n const pattern = /(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]/;\n\n this.setState({ touched: true, emailDomain: value, isValid: pattern.test(value) });\n };\n\n handleSubmit = () => {\n const { updateMode, emailDomain, editedAllowedRegistrationEmailDomainId } = this.state;\n this.setState({ isUpdating: true });\n\n if (updateMode == \"Add\") {\n this.props.onAllowedRegistrationEmailDomain.addAllowedRegistrationEmailDomain(emailDomain.trim()).then(() => {\n if (!this.props.isUpdating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.setState({\n allowedRegistrationEmailDomains: this.props.allowedRegistrationEmailDomains.sort((a, b) => (`${a.emailDomain}` > `${b.emailDomain}` ? 1 : -1)),\n });\n this.togleUpdateDialog();\n this.props.generateAlert(\"success\", \"Email domain added\");\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n } else {\n this.props.onAllowedRegistrationEmailDomain.updateAllowedRegistrationEmailDomain(editedAllowedRegistrationEmailDomainId, emailDomain.trim()).then(() => {\n if (!this.props.isUpdating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.setState({\n allowedRegistrationEmailDomains: this.props.allowedRegistrationEmailDomains.sort((a, b) => (`${a.emailDomain}` > `${b.emailDomain}` ? 1 : -1)),\n });\n this.togleUpdateDialog();\n this.props.generateAlert(\"success\", \"Email domain updated\");\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n }\n };\n\n togleUpdateDialog = () => {\n const showUpdateDialog = this.state.showUpdateDialog;\n this.setState({ showUpdateDialog: !showUpdateDialog });\n };\n\n renderUpdate = () => {\n return (\n \n {this.state.updateMode ? this.state.updateMode : \"\"} Allowed Email Domains \n \n \n \n \n {\n this.handleSubmit();\n }}\n disabled={this.state.isUpdating || this.state.emailDomain == \"\"}\n >\n Save\n \n \n Close\n \n \n \n );\n };\n\n handleDelete = (row) => {\n if (window.confirm(\"Are you sure want to delete this record?\")) {\n this.setState({ isUpdating: true });\n\n this.props.onAllowedRegistrationEmailDomain.deleteAllowedRegistrationEmailDomain(row.id).then(() => {\n if (!this.props.isUpdating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n const allowedRegistrationEmailDomains = this.props.allowedRegistrationEmailDomains\n .sort((a, b) => (`${a.emailDomain}` > `${b.emailDomain}` ? 1 : -1))\n .map((it) => {\n return {\n id: it.id,\n emailDomain: it.emailDomain,\n };\n });\n this.setState({ allowedRegistrationEmailDomains: [...allowedRegistrationEmailDomains.filter((it) => it.id != row.id)] });\n this.props.generateAlert(\"success\", \"Email domain deleted\");\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n }\n };\n\n render() {\n const { allowedRegistrationEmailDomains, searchKeyword, searchProperties } = this.state;\n\n const openUpdate = this.openUpdate;\n const handleDelete = this.handleDelete;\n const columns = [\n {\n id: \"id\",\n name: \"Action\",\n selector: (row) => row.id,\n sortable: false,\n width: \"15%\",\n center: true,\n format: function (row, index) {\n return (\n \n openUpdate(row)} />\n \n Update\n \n {!row.isUsed && (\n \n \n handleDelete(row)} />\n \n Delete\n \n \n )}\n
\n );\n },\n omit: !this.props.allowEdit,\n },\n {\n id: \"emailDomain\",\n name: \"Email Domain\",\n selector: (row) => row.emailDomain,\n sortable: true,\n width: this.props.allowEdit ? \"85%\" : \"100%\",\n },\n ];\n\n return (\n \n {this.renderUpdate()}\n \n Allowed Email Domains \n \n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.adminAllowedRegistrationEmailDomain.loading,\n error: state.adminAllowedRegistrationEmailDomain.error,\n allowedRegistrationEmailDomains: state.adminAllowedRegistrationEmailDomain.allowedRegistrationEmailDomains,\n isUpdating: state.adminAllowedRegistrationEmailDomain.isUpdating,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAllowedRegistrationEmailDomain: bindActionCreators(allowedRegistrationEmailDomainActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ManageAllowedRegistrationEmailDomains);\n","import ErrorHandler from \"./../errorResponseHandler\";\nimport Instance from \"./../service/AxiosInstance\";\n\nexport const axios = Instance.apiInstance();\n\nclass AdminEvidenceTypeAPI {\n static getEvidenceTypes() {\n return axios\n .get(`/evidencetypes`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static createEvidenceType(evidencetype) {\n return axios\n .post(`/evidencetypes`, evidencetype)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateEvidenceType(id, evidencetype) {\n return axios\n .put(`/evidencetypes/${id}`, evidencetype)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static deleteEvidenceType(id) {\n return axios\n .delete(`/evidencetypes/${id}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n}\n\nexport default AdminEvidenceTypeAPI;\n","import AdminEvidenceTypeAPI from \"./../../../common/api/adminservice/AdminEvidenceTypeService\";\nimport * as actionTypes from \"./adminActionTypes\";\n\nexport const getEvidenceTypesStart = () => {\n return {\n type: actionTypes.GET_EVIDENCETYPES_START,\n };\n};\n\nexport const getEvidenceTypesSuccess = (evidenceTypes) => {\n return {\n type: actionTypes.GET_EVIDENCETYPES_SUCCESS,\n evidenceTypes,\n };\n};\n\nexport const getEvidenceTypesFail = (error) => {\n return {\n type: actionTypes.GET_EVIDENCETYPES_FAIL,\n error: error,\n };\n};\n\nexport const getEvidenceTypes = () => {\n return (dispatch) => {\n dispatch(getEvidenceTypesStart());\n\n return AdminEvidenceTypeAPI.getEvidenceTypes()\n .then((res) => {\n dispatch(getEvidenceTypesSuccess(res));\n })\n .catch((err) => {\n dispatch(getEvidenceTypesFail(err));\n });\n };\n};\n\nexport const addEvidenceTypeStart = () => {\n return {\n type: actionTypes.ADD_EVIDENCETYPE_START,\n };\n};\n\nexport const addEvidenceTypeSuccess = (addedEvidenceType) => {\n return {\n type: actionTypes.ADD_EVIDENCETYPE_SUCCESS,\n addedEvidenceType,\n };\n};\n\nexport const addEvidenceTypeFail = (error) => {\n return {\n type: actionTypes.ADD_EVIDENCETYPE_FAIL,\n error: error,\n };\n};\n\nexport const addEvidenceType = (evidenceType) => {\n return (dispatch) => {\n dispatch(addEvidenceTypeStart());\n\n return AdminEvidenceTypeAPI.createEvidenceType(evidenceType)\n .then((res) => {\n dispatch(addEvidenceTypeSuccess(res));\n })\n .catch((err) => {\n dispatch(addEvidenceTypeFail(err));\n });\n };\n};\n\nexport const updateEvidenceTypeStart = () => {\n return {\n type: actionTypes.UPDATE_EVIDENCETYPE_START,\n };\n};\n\nexport const updateEvidenceTypeSuccess = (updatedEvidenceType) => {\n return {\n type: actionTypes.UPDATE_EVIDENCETYPE_SUCCESS,\n updatedEvidenceType,\n };\n};\n\nexport const updateEvidenceTypeFail = (error) => {\n return {\n type: actionTypes.UPDATE_EVIDENCETYPE_FAIL,\n error: error,\n };\n};\n\nexport const updateEvidenceType = (id, evidenceType) => {\n return (dispatch) => {\n dispatch(updateEvidenceTypeStart());\n\n return AdminEvidenceTypeAPI.updateEvidenceType(id, evidenceType)\n .then((res) => {\n dispatch(updateEvidenceTypeSuccess(res));\n })\n .catch((err) => {\n dispatch(updateEvidenceTypeFail(err));\n });\n };\n};\n\nexport const deleteEvidenceTypeStart = () => {\n return {\n type: actionTypes.DELETE_EVIDENCETYPE_START,\n };\n};\n\nexport const deleteEvidenceTypeSuccess = (deletedEvidenceTypeId) => {\n return {\n type: actionTypes.DELETE_EVIDENCETYPE_SUCCESS,\n deletedEvidenceTypeId,\n };\n};\n\nexport const deleteEvidenceTypeFail = (error) => {\n return {\n type: actionTypes.DELETE_EVIDENCETYPE_FAIL,\n error: error,\n };\n};\n\nexport const deleteEvidenceType = (id) => {\n return (dispatch) => {\n dispatch(deleteEvidenceTypeStart());\n\n return AdminEvidenceTypeAPI.deleteEvidenceType(id)\n .then((res) => {\n dispatch(deleteEvidenceTypeSuccess(id));\n })\n .catch((err) => {\n dispatch(deleteEvidenceTypeFail(err));\n });\n };\n};\n","import * as evidenceTypeActions from \"../../../store/admin/actions/adminEvidenceTypeActions\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport { SkillsTxTableClearSearch } from \"../../common/SkillsTxTableClearSearch\";\nimport { SkillsTxTableSearchBar } from \"../../common/SkillsTxTableSearchBar\";\nimport { faPenToSquare, faMinusCircle, faPlus, faSync } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Form, FormGroup, Input, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst rowStyle = {\n fontSize: \"12px\",\n};\n\nclass ManageEvidenceTypes extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n evidenceTypes: [],\n isUpdating: false,\n showDialog: false,\n showUpdateDialog: false,\n updateMode: null,\n touched: false,\n editedEvidenceTypeId: null,\n evidenceTypeName: \"\",\n searchProperties: [\"name\"],\n };\n }\n\n componentDidMount() {\n // this.initData();\n }\n\n handleRefresh = () => {\n this.initData();\n };\n\n initData = () => {\n this.setState({ loading: true });\n this.props.onEvidenceType.getEvidenceTypes().then(() => {\n if (!this.props.loading) {\n this.setState({\n evidenceTypes: this.props.evidenceTypes.sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1)),\n });\n }\n\n this.setState({ loading: this.props.loading });\n });\n };\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n this.initData();\n }\n }\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.setState({ showDialog: !showDialog });\n };\n\n handleAddNew = () => {\n this.setState({ updateMode: \"Add\", showUpdateDialog: true, touched: false, evidenceTypeName: \"\" });\n };\n\n openUpdate = (evidenceType) => {\n this.setState({ updateMode: \"Update\", showUpdateDialog: true, touched: false, evidenceTypeName: evidenceType.name, editedEvidenceTypeId: evidenceType.id });\n };\n\n handleChange = (event) => {\n const form = this.state.form;\n const { name, value } = event.target;\n\n this.setState({ touched: true, evidenceTypeName: value });\n };\n\n handleSubmit = () => {\n const { updateMode, evidenceTypeName, editedEvidenceTypeId } = this.state;\n this.setState({ isUpdating: true });\n\n if (updateMode == \"Add\") {\n this.props.onEvidenceType\n .addEvidenceType({\n name: evidenceTypeName.trim(),\n })\n .then(() => {\n if (!this.props.isUpdating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.setState({\n evidenceTypes: this.props.evidenceTypes.sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1)),\n });\n this.togleUpdateDialog();\n this.props.generateAlert(\"success\", \"Evidence type added\");\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n } else {\n this.props.onEvidenceType\n .updateEvidenceType(editedEvidenceTypeId, {\n name: evidenceTypeName.trim(),\n })\n .then(() => {\n if (!this.props.isUpdating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.setState({\n evidenceTypes: this.props.evidenceTypes.sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1)),\n });\n this.togleUpdateDialog();\n this.props.generateAlert(\"success\", \"Evidence type updated\");\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n }\n };\n\n togleUpdateDialog = () => {\n const showUpdateDialog = this.state.showUpdateDialog;\n this.setState({ showUpdateDialog: !showUpdateDialog });\n };\n\n renderUpdate = () => {\n return (\n \n {this.state.updateMode ? this.state.updateMode : \"\"} Evidence Types \n \n \n \n \n {\n this.handleSubmit();\n }}\n disabled={this.state.isUpdating || this.state.evidenceTypeName == \"\"}\n >\n Save\n \n \n Close\n \n \n \n );\n };\n\n handleDelete = (row) => {\n this.setState({ isUpdating: true });\n\n this.props.onEvidenceType.deleteEvidenceType(row.id).then(() => {\n if (!this.props.isUpdating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n const evidenceTypes = this.props.evidenceTypes\n .sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1))\n .map((it) => {\n return {\n id: it.id,\n name: it.name,\n isUsed: it.isUsed,\n lastUpdated: new Date(),\n };\n });\n this.setState({ evidenceTypes: [...evidenceTypes.filter((it) => it.id != row.id)] });\n this.props.generateAlert(\"success\", \"Evidence type deleted\");\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n render() {\n const { evidenceTypes, searchKeyword, searchProperties } = this.state;\n\n const openUpdate = this.openUpdate;\n const handleDelete = this.handleDelete;\n const columns = [\n {\n id: \"id\",\n name: \"Action\",\n selector: (row) => row.id,\n sortable: false,\n width: \"15%\",\n center: true,\n format: function (row, index) {\n return (\n \n openUpdate(row)} />\n \n Update\n \n {!row.isUsed && (\n \n \n handleDelete(row)} />\n \n Delete\n \n \n )}\n
\n );\n },\n omit: !this.props.allowEdit,\n },\n {\n id: \"name\",\n name: \"Name\",\n selector: (row) => row.name,\n sortable: true,\n width: this.props.allowEdit ? \"85%\" : \"100%\",\n },\n ];\n\n return (\n \n {this.renderUpdate()}\n \n Evidence Types \n \n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.adminEvidenceType.loading,\n error: state.adminEvidenceType.error,\n evidenceTypes: state.adminEvidenceType.evidenceTypes,\n isUpdating: state.adminEvidenceType.isUpdating,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onEvidenceType: bindActionCreators(evidenceTypeActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ManageEvidenceTypes);\n","import ErrorHandler from \"./../errorResponseHandler\";\nimport Instance from \"./../service/AxiosInstance\";\n\nexport const axios = Instance.apiInstance();\n\nclass AdminMentorPreferenceAPI {\n static getMentorPreferences() {\n return axios\n .get(`/mentorPreferences/list`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static createMentorPreference(mentorPreference) {\n return axios\n .post(`/mentorPreferences`, mentorPreference)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateMentorPreference(id, mentorPreference) {\n return axios\n .put(`/mentorPreferences/${id}`, mentorPreference)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static deleteMentorPreference(id) {\n return axios\n .delete(`/mentorPreferences/${id}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n}\n\nexport default AdminMentorPreferenceAPI;\n","import AdminMentorPreferenceAPI from \"./../../../common/api/adminservice/AdminMentorPreferenceService\";\nimport * as actionTypes from \"./adminActionTypes\";\n\nexport const getMentorPreferencesStart = () => {\n return {\n type: actionTypes.GET_MENTOR_PREFERENCES_START,\n };\n};\n\nexport const getMentorPreferencesSuccess = (mentorPreferences) => {\n return {\n type: actionTypes.GET_MENTOR_PREFERENCES_SUCCESS,\n mentorPreferences,\n };\n};\n\nexport const getMentorPreferencesFail = (error) => {\n return {\n type: actionTypes.GET_MENTOR_PREFERENCES_FAIL,\n error: error,\n };\n};\n\nexport const getMentorPreferences = () => {\n return (dispatch) => {\n dispatch(getMentorPreferencesStart());\n\n return AdminMentorPreferenceAPI.getMentorPreferences()\n .then((res) => {\n dispatch(getMentorPreferencesSuccess(res));\n })\n .catch((err) => {\n dispatch(getMentorPreferencesFail(err));\n });\n };\n};\n\nexport const addMentorPreferenceStart = () => {\n return {\n type: actionTypes.ADD_MENTOR_PREFERENCE_START,\n };\n};\n\nexport const addMentorPreferenceSuccess = (addedMentorPreference) => {\n return {\n type: actionTypes.ADD_MENTOR_PREFERENCE_SUCCESS,\n addedMentorPreference,\n };\n};\n\nexport const addMentorPreferenceFail = (error) => {\n return {\n type: actionTypes.ADD_MENTOR_PREFERENCE_FAIL,\n error: error,\n };\n};\n\nexport const addMentorPreference = (mentorPreference) => {\n return (dispatch) => {\n dispatch(addMentorPreferenceStart());\n\n return AdminMentorPreferenceAPI.createMentorPreference(mentorPreference)\n .then((res) => {\n dispatch(addMentorPreferenceSuccess(res));\n })\n .catch((err) => {\n dispatch(addMentorPreferenceFail(err));\n });\n };\n};\n\nexport const updateMentorPreferenceStart = () => {\n return {\n type: actionTypes.UPDATE_MENTOR_PREFERENCE_START,\n };\n};\n\nexport const updateMentorPreferenceSuccess = (updatedMentorPreference) => {\n return {\n type: actionTypes.UPDATE_MENTOR_PREFERENCE_SUCCESS,\n updatedMentorPreference,\n };\n};\n\nexport const updateMentorPreferenceFail = (error) => {\n return {\n type: actionTypes.UPDATE_MENTOR_PREFERENCE_FAIL,\n error: error,\n };\n};\n\nexport const updateMentorPreference = (id, mentorPreference) => {\n return (dispatch) => {\n dispatch(updateMentorPreferenceStart());\n\n return AdminMentorPreferenceAPI.updateMentorPreference(id, mentorPreference)\n .then((res) => {\n dispatch(updateMentorPreferenceSuccess(res));\n })\n .catch((err) => {\n dispatch(updateMentorPreferenceFail(err));\n });\n };\n};\n\nexport const deleteMentorPreferenceStart = () => {\n return {\n type: actionTypes.DELETE_MENTOR_PREFERENCE_START,\n };\n};\n\nexport const deleteMentorPreferenceSuccess = (deletedMentorPreferenceId) => {\n return {\n type: actionTypes.DELETE_MENTOR_PREFERENCE_SUCCESS,\n deletedMentorPreferenceId,\n };\n};\n\nexport const deleteMentorPreferenceFail = (error) => {\n return {\n type: actionTypes.DELETE_MENTOR_PREFERENCE_FAIL,\n error: error,\n };\n};\n\nexport const deleteMentorPreference = (id) => {\n return (dispatch) => {\n dispatch(deleteMentorPreferenceStart());\n\n return AdminMentorPreferenceAPI.deleteMentorPreference(id)\n .then((res) => {\n dispatch(deleteMentorPreferenceSuccess(id));\n })\n .catch((err) => {\n dispatch(deleteMentorPreferenceFail(err));\n });\n };\n};\n","import * as mentorPreferenceActions from \"../../../store/admin/actions/adminMentorPreferenceActions\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport { SkillsTxTableClearSearch } from \"../../common/SkillsTxTableClearSearch\";\nimport { SkillsTxTableSearchBar } from \"../../common/SkillsTxTableSearchBar\";\nimport { faPenToSquare, faMinusCircle, faPlus, faSync } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, ButtonGroup, Col, Form, FormGroup, Input, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst rowStyle = {\n fontSize: \"12px\",\n};\n\nclass ManageMentorPreferences extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n mentorPreferences: [],\n isUpdating: false,\n showDialog: false,\n showUpdateDialog: false,\n updateMode: null,\n touched: false,\n editedMentorPrefereneId: null,\n selected: false,\n preference: \"\",\n searchProperties: [\"preference\"],\n };\n }\n\n componentDidMount() {\n // this.initData();\n }\n\n handleRefresh = () => {\n this.initData();\n };\n\n initData = () => {\n this.setState({ loading: true });\n this.props.onMentorPreference.getMentorPreferences().then(() => {\n if (!this.props.loading) {\n this.setState({\n mentorPreferences: this.props.mentorPreferences.sort((a, b) => (`${a.preference}` > `${b.preference}` ? 1 : -1)),\n });\n }\n\n this.setState({ loading: this.props.loading });\n });\n };\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n this.initData();\n }\n }\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.setState({ showDialog: !showDialog });\n };\n\n handleAddNew = () => {\n this.setState({ updateMode: \"Add\", showUpdateDialog: true, touched: false, preference: \"\" });\n };\n\n openUpdate = (mentorPreference) => {\n this.setState({ updateMode: \"Update\", showUpdateDialog: true, touched: false, preference: mentorPreference.preference, selected: mentorPreference.selected, editedMentorPreferenceId: mentorPreference.id });\n };\n\n handleChange = (event) => {\n const form = this.state.form;\n const { name, value } = event.target;\n\n this.setState({ touched: true, preference: value });\n };\n\n updateMentorPreferenceSelected = (mentorPreference) => {\n this.setState({ isUpdating: true });\n\n this.props.onMentorPreference\n .updateMentorPreference(mentorPreference.id, {\n preference: mentorPreference.preference.trim(),\n selected: !mentorPreference.selected,\n })\n .then(() => {\n if (!this.props.isUpdating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.setState({\n mentorPreferences: this.props.mentorPreferences.sort((a, b) => (`${a.preference}` > `${b.preference}` ? 1 : -1)),\n });\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n handleSubmit = () => {\n const { updateMode, preference, selected, editedMentorPreferenceId } = this.state;\n this.setState({ isUpdating: true });\n\n if (updateMode == \"Add\") {\n this.props.onMentorPreference\n .addMentorPreference({\n preference: preference.trim(),\n selected: false,\n })\n .then(() => {\n if (!this.props.isUpdating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.setState({\n mentorPreferences: this.props.mentorPreferences.sort((a, b) => (`${a.preference}` > `${b.preference}` ? 1 : -1)),\n });\n this.togleUpdateDialog();\n this.props.generateAlert(\"success\", \"Mentor preference added\");\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n } else {\n this.props.onMentorPreference\n .updateMentorPreference(editedMentorPreferenceId, {\n preference: preference.trim(),\n selected,\n })\n .then(() => {\n if (!this.props.isUpdating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.setState({\n mentorPreferences: this.props.mentorPreferences.sort((a, b) => (`${a.preference}` > `${b.preference}` ? 1 : -1)),\n });\n this.togleUpdateDialog();\n this.props.generateAlert(\"success\", \"Mentor preference updated\");\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n }\n };\n\n togleUpdateDialog = () => {\n const showUpdateDialog = this.state.showUpdateDialog;\n this.setState({ showUpdateDialog: !showUpdateDialog });\n };\n\n renderUpdate = () => {\n return (\n \n {this.state.updateMode ? this.state.updateMode : \"\"} Mentor Preference \n \n \n \n \n {\n this.handleSubmit();\n }}\n disabled={this.state.isUpdating || this.state.preference == \"\"}\n >\n Save\n \n \n Close\n \n \n \n );\n };\n\n handleDelete = (row) => {\n if (window.confirm(\"Are you sure want to delete this preference?\")) {\n this.setState({ isUpdating: true });\n this.props.onMentorPreference.deleteMentorPreference(row.id).then(() => {\n if (!this.props.isUpdating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n const mentorPreferences = this.props.mentorPreferences.sort((a, b) => (`${a.preference}` > `${b.preference}` ? 1 : -1));\n this.setState({ mentorPreferences: [...mentorPreferences.filter((it) => it.id != row.id)] });\n this.props.generateAlert(\"success\", \"Mentor preference deleted\");\n }\n }\n this.setState({ isUpdating: this.props.isUpdating });\n });\n }\n };\n\n render() {\n const { mentorPreferences, searchKeyword, searchProperties } = this.state;\n\n const openUpdate = this.openUpdate;\n const handleDelete = this.handleDelete;\n const updateMentorPreferenceSelected = this.updateMentorPreferenceSelected;\n\n const columns = [\n {\n id: \"id\",\n name: \"Action\",\n selector: (row) => row.id,\n sortable: false,\n width: \"15%\",\n center: true,\n format: function (row, index) {\n return (\n \n openUpdate(row)} />\n \n Update\n \n {!row.isUsed && (\n \n \n handleDelete(row)} />\n \n Delete\n \n \n )}\n
\n );\n },\n omit: !this.props.allowEdit,\n },\n {\n id: \"selected\",\n name: \"Selected\",\n selector: (row) => row.selected,\n sortable: false,\n width: \"15%\",\n center: true,\n format: function (row, index) {\n return (\n \n \n (!row.selected ? updateMentorPreferenceSelected(row) : null)} style={{ color: \"transparent\", fontSize: \"10px\", cursor: !row.selected ? \"pointer\" : \"default\" }}>\n A\n \n (row.selected ? updateMentorPreferenceSelected(row) : null)} style={{ color: \"transparent\", fontSize: \"10px\", cursor: row.selected ? \"pointer\" : \"default\" }}>\n A\n \n \n
\n );\n },\n omit: !this.props.allowEdit,\n },\n {\n id: \"preference\",\n name: \"Preference\",\n selector: (row) => row.preference,\n sortable: true,\n width: this.props.allowEdit ? \"70%\" : \"100%\",\n },\n ];\n\n return (\n \n {this.renderUpdate()}\n \n Mentor Preferences \n \n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.adminMentorPreference.loading,\n error: state.adminMentorPreference.error,\n mentorPreferences: state.adminMentorPreference.mentorPreferences,\n isUpdating: state.adminMentorPreference.isUpdating,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onMentorPreference: bindActionCreators(mentorPreferenceActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ManageMentorPreferences);\n","import ErrorHandler from \"./../errorResponseHandler\";\nimport Instance from \"./../service/AxiosInstance\";\n\nexport const axios = Instance.apiInstance();\n\nclass AdminRegistrationReasonAPI {\n static getRegistrationReasons() {\n return axios\n .get(`/registrationReasons`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static createRegistrationReason(registrationReason) {\n return axios\n .post(`/registrationReasons`, registrationReason)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateRegistrationReason(id, registrationReason) {\n return axios\n .put(`/registrationReasons/${id}`, registrationReason)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static deleteRegistrationReason(id) {\n return axios\n .delete(`/registrationReasons/${id}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static moveRegistrationReasonUp(id) {\n return axios\n .post(`/registrationReasons/${id}/moveup`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static moveRegistrationReasonDown(id) {\n return axios\n .post(`/registrationReasons/${id}/movedown`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n}\n\nexport default AdminRegistrationReasonAPI;\n","import AdminRegistrationReasonAPI from \"./../../../common/api/adminservice/AdminRegistrationReasonService\";\nimport * as adminActionTypes from \"./adminActionTypes\";\n\nexport const getRegistrationReasonsStart = () => {\n return {\n type: adminActionTypes.GET_REGISTRATION_REASONS_START,\n };\n};\n\nexport const getRegistrationReasonsSuccess = (registrationReasons) => {\n return {\n type: adminActionTypes.GET_REGISTRATION_REASONS_SUCCESS,\n registrationReasons,\n };\n};\n\nexport const getRegistrationReasonsFail = (error) => {\n return {\n type: adminActionTypes.GET_REGISTRATION_REASONS_FAIL,\n error: error,\n };\n};\n\nexport const getRegistrationReasons = () => {\n return (dispatch) => {\n dispatch(getRegistrationReasonsStart());\n\n return AdminRegistrationReasonAPI.getRegistrationReasons()\n .then((res) => {\n dispatch(getRegistrationReasonsSuccess(res));\n })\n .catch((err) => {\n dispatch(getRegistrationReasonsFail(err));\n });\n };\n};\n\nexport const addRegistrationReasonStart = () => {\n return {\n type: adminActionTypes.ADD_REGISTRATION_REASON_START,\n };\n};\n\nexport const addRegistrationReasonSuccess = (addedRegistrationReason) => {\n return {\n type: adminActionTypes.ADD_REGISTRATION_REASON_SUCCESS,\n addedRegistrationReason,\n };\n};\n\nexport const addRegistrationReasonFail = (error) => {\n return {\n type: adminActionTypes.ADD_REGISTRATION_REASON_FAIL,\n error: error,\n };\n};\n\nexport const addRegistrationReason = (registrationReason) => {\n return (dispatch) => {\n dispatch(addRegistrationReasonStart());\n\n return AdminRegistrationReasonAPI.createRegistrationReason(registrationReason)\n .then((res) => {\n dispatch(addRegistrationReasonSuccess(res));\n })\n .catch((err) => {\n dispatch(addRegistrationReasonFail(err));\n });\n };\n};\n\nexport const updateRegistrationReasonStart = () => {\n return {\n type: adminActionTypes.UPDATE_REGISTRATION_REASON_START,\n };\n};\n\nexport const updateRegistrationReasonSuccess = (updatedRegistrationReason) => {\n return {\n type: adminActionTypes.UPDATE_REGISTRATION_REASON_SUCCESS,\n updatedRegistrationReason,\n };\n};\n\nexport const updateRegistrationReasonFail = (error) => {\n return {\n type: adminActionTypes.UPDATE_REGISTRATION_REASON_FAIL,\n error: error,\n };\n};\n\nexport const updateRegistrationReason = (id, registrationReason) => {\n return (dispatch) => {\n dispatch(updateRegistrationReasonStart());\n\n return AdminRegistrationReasonAPI.updateRegistrationReason(id, registrationReason)\n .then((res) => {\n dispatch(updateRegistrationReasonSuccess(res));\n })\n .catch((err) => {\n dispatch(updateRegistrationReasonFail(err));\n });\n };\n};\n\nexport const deleteRegistrationReasonStart = () => {\n return {\n type: adminActionTypes.DELETE_REGISTRATION_REASON_START,\n };\n};\n\nexport const deleteRegistrationReasonSuccess = (registrationReasons) => {\n return {\n type: adminActionTypes.DELETE_REGISTRATION_REASON_SUCCESS,\n registrationReasons,\n };\n};\n\nexport const deleteRegistrationReasonFail = (error) => {\n return {\n type: adminActionTypes.DELETE_REGISTRATION_REASON_FAIL,\n error: error,\n };\n};\n\nexport const deleteRegistrationReason = (id) => {\n return (dispatch) => {\n dispatch(deleteRegistrationReasonStart());\n\n return AdminRegistrationReasonAPI.deleteRegistrationReason(id)\n .then((res) => {\n dispatch(deleteRegistrationReasonSuccess(res));\n })\n .catch((err) => {\n dispatch(deleteRegistrationReasonFail(err));\n });\n };\n};\n\nexport const moveRegistrationReasonStart = () => {\n return {\n type: adminActionTypes.MOVE_REGISTRATION_REASON_START,\n };\n};\n\nexport const moveRegistrationReasonSuccess = (registrationReasons) => {\n return {\n type: adminActionTypes.MOVE_REGISTRATION_REASON_SUCCESS,\n registrationReasons,\n };\n};\n\nexport const moveRegistrationReasonFail = (error) => {\n return {\n type: adminActionTypes.MOVE_REGISTRATION_REASON_FAIL,\n error: error,\n };\n};\n\nexport const moveRegistrationReasonUp = (id) => {\n return (dispatch) => {\n dispatch(moveRegistrationReasonStart());\n\n return AdminRegistrationReasonAPI.moveRegistrationReasonUp(id)\n .then((res) => {\n dispatch(moveRegistrationReasonSuccess(res));\n })\n .catch((err) => {\n dispatch(moveRegistrationReasonFail(err));\n });\n };\n};\n\nexport const moveRegistrationReasonDown = (id) => {\n return (dispatch) => {\n dispatch(moveRegistrationReasonStart());\n\n return AdminRegistrationReasonAPI.moveRegistrationReasonDown(id)\n .then((res) => {\n dispatch(moveRegistrationReasonSuccess(res));\n })\n .catch((err) => {\n dispatch(moveRegistrationReasonFail(err));\n });\n };\n};\n","import * as allowedRegistrationReasonsActions from \"../../../store/admin/actions/adminRegistrationReasonActions\";\nimport changeInput from \"../../../utils/changeInput\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport { SkillsTxTableClearSearch } from \"../../common/SkillsTxTableClearSearch\";\nimport { SkillsTxTableSearchBar } from \"../../common/SkillsTxTableSearchBar\";\nimport { faPenToSquare, faMinusCircle, faPlus, faSync, faArrowUp, faArrowDown } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, ButtonGroup, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst rowStyle = {\n fontSize: \"12px\",\n};\n\nclass ManageRegistrationReasons extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n registrationReasons: [],\n isUpdating: false,\n showDialog: false,\n showUpdateDialog: false,\n updateMode: null,\n touched: false,\n editedRegistrationReasonId: null,\n form: {\n value: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n label: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n roleSelectionMandatory: {\n validation: {\n required: false,\n },\n value: false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n isFormValid: false,\n searchProperties: [\"value\", \"label\"],\n showLoadingPanel: false,\n };\n }\n\n componentDidMount() {\n //this.initData();\n }\n\n handleRefresh = () => {\n this.initData();\n };\n\n initData = () => {\n this.setState({ loading: true });\n this.props.onRegistrationReasons.getRegistrationReasons().then(() => {\n if (!this.props.loading) {\n this.setState({\n registrationReasons: this.props.registrationReasons.sort((a, b) => (a.order > b.order ? 1 : -1)),\n });\n }\n\n this.setState({ loading: this.props.loading });\n });\n };\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n this.initData();\n }\n\n if (prevProps.registrationReasons !== this.props.registrationReasons) {\n this.setState({\n registrationReasons: this.props.registrationReasons.sort((a, b) => (a.order > b.order ? 1 : -1)),\n });\n }\n }\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.setState({ showDialog: !showDialog });\n };\n\n handleAddNew = () => {\n this.setState({\n updateMode: \"Add\",\n showUpdateDialog: true,\n touched: false,\n form: {\n value: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n label: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n roleSelectionMandatory: {\n validation: {\n required: false,\n },\n value: false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n isFormValid: false,\n });\n };\n\n openUpdate = (registrationReason) => {\n this.setState({\n updateMode: \"Update\",\n showUpdateDialog: true,\n touched: false,\n form: {\n value: {\n validation: {\n required: true,\n },\n value: registrationReason.value,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n label: {\n validation: {\n required: true,\n },\n value: registrationReason.label,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n roleSelectionMandatory: {\n validation: {\n required: false,\n },\n value: registrationReason.roleSelectionMandatory,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n isFormValid: true,\n editedRegistrationReasonId: registrationReason.id,\n });\n };\n\n handleChange = (event) => {\n const form = this.state.form;\n const { name, value } = event.target;\n\n let updateState = changeInput(form, name, value);\n\n this.setState({ form: updateState.form, isFormValid: updateState.valid });\n };\n\n handleSubmit = () => {\n const { updateMode, form, editedRegistrationReasonId } = this.state;\n this.setState({ isUpdating: true });\n\n if (updateMode == \"Add\") {\n this.props.onRegistrationReasons\n .addRegistrationReason({\n label: form.label.value,\n value: form.value.value,\n roleSelectionMandatory: form.roleSelectionMandatory.value,\n })\n .then(() => {\n if (!this.props.isUpdating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.setState({\n registrationReasons: this.props.registrationReasons.sort((a, b) => (a.order > b.order ? 1 : -1)),\n });\n this.togleUpdateDialog();\n this.props.generateAlert(\"success\", \"Registration reason added\");\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n } else {\n this.props.onRegistrationReasons\n .updateRegistrationReason(editedRegistrationReasonId, {\n label: form.label.value,\n value: form.value.value,\n roleSelectionMandatory: form.roleSelectionMandatory.value,\n })\n .then(() => {\n if (!this.props.isUpdating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.setState({\n registrationReasons: this.props.registrationReasons.sort((a, b) => (a.order > b.order ? 1 : -1)),\n });\n this.togleUpdateDialog();\n this.props.generateAlert(\"success\", \"Registration reason updated\");\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n }\n };\n\n togleUpdateDialog = () => {\n const showUpdateDialog = this.state.showUpdateDialog;\n this.setState({ showUpdateDialog: !showUpdateDialog });\n };\n\n renderUpdate = () => {\n const form = this.state.form;\n\n return (\n \n {this.state.updateMode ? this.state.updateMode : \"\"} Registration Reason \n \n \n \n \n {\n this.handleSubmit();\n }}\n disabled={this.state.isUpdating || this.state.emailDomain == \"\"}\n >\n Save\n \n \n Close\n \n \n \n );\n };\n\n handleDelete = (row) => {\n if (window.confirm(\"Are you sure want to delete this record?\")) {\n this.setState({ isUpdating: true });\n\n this.props.onRegistrationReasons.deleteRegistrationReason(row.id).then(() => {\n if (!this.props.isUpdating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n const registrationReasons = this.props.registrationReasons\n .sort((a, b) => (a.order > b.order ? 1 : -1))\n .map((it) => {\n return {\n id: it.id,\n value: it.value,\n label: it.label,\n order: it.order,\n };\n });\n this.setState({ registrationReasons: [...registrationReasons.filter((it) => it.id != row.id)] });\n this.props.generateAlert(\"success\", \"Registration reason deleted\");\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n }\n };\n\n handleMoveUp = (row) => {\n this.props.onRegistrationReasons.moveRegistrationReasonUp(row.id).then(() => {});\n };\n\n handleMoveDown = (row) => {\n this.props.onRegistrationReasons.moveRegistrationReasonDown(row.id).then(() => {});\n };\n\n handleRoleSelectionMandatory = (registrationReason) => {\n this.setState({ showLoadingPanel: true, loadingPanelHeader: null, loadingPanelBody: \"Please wait ...\" });\n this.props.onRegistrationReasons\n .updateRegistrationReason(registrationReason.id, {\n label: registrationReason.label,\n value: registrationReason.value,\n roleSelectionMandatory: !registrationReason.roleSelectionMandatory,\n })\n .then(() => {\n this.setState({\n registrationReasons: this.props.registrationReasons.sort((a, b) => (a.order > b.order ? 1 : -1)),\n });\n\n this.setState({ showLoadingPanel: this.props.isUpdating });\n });\n };\n\n renderLoadingPanel() {\n if (this.state.showLoadingPanel) {\n return (\n \n {this.state.loadingPanelHeader && {this.state.loadingPanelHeader} }\n \n \n \n );\n } else {\n return \"\";\n }\n }\n\n render() {\n const { containerConfig } = this.props;\n const { registrationReasons, searchKeyword, searchProperties } = this.state;\n\n const openUpdate = this.openUpdate;\n const handleDelete = this.handleDelete;\n const moveUp = this.handleMoveUp;\n const moveDown = this.handleMoveDown;\n const handleRoleSelectionMandatory = this.handleRoleSelectionMandatory;\n const allowEdit = this.props.allowEdit;\n\n const columns = [\n {\n id: \"id\",\n name: \"Action\",\n selector: (row) => row.id,\n sortable: false,\n width: \"10%\",\n center: true,\n format: function (row, index) {\n return (\n \n openUpdate(row)} />\n \n Update\n \n {!row.isUsed && (\n \n \n handleDelete(row)} />\n \n Delete\n \n \n )}\n
\n );\n },\n omit: !this.props.allowEdit,\n },\n {\n id: \"roleSelectionMandatory\",\n name: Role Selection Mandatory
,\n selector: (row) => row.roleSelectionMandatory,\n sortable: false,\n width: \"15%\",\n wrap: true,\n center: true,\n format: function (row, index) {\n return (\n \n \n allowEdit && !row.roleSelectionMandatory && handleRoleSelectionMandatory(row)}\n >\n allowEdit && row.roleSelectionMandatory && handleRoleSelectionMandatory(row)}\n >\n \n \n );\n },\n omit: !containerConfig.showRoleBasedSurveyInSelfRegistration,\n },\n {\n id: \"value\",\n name: \"Value\",\n selector: (row) => row.value,\n sortable: false,\n width: this.props.allowEdit ? \"25%\" : \"30%\",\n wrap: true,\n },\n {\n id: \"label\",\n name: \"Label\",\n selector: (row) => row.label,\n sortable: false,\n width: this.props.allowEdit ? (containerConfig.showRoleBasedSurveyInSelfRegistration ? \"40%\" : \"50%\") : containerConfig.showRoleBasedSurveyInSelfRegistration ? \"50%\" : \"60%\",\n wrap: true,\n },\n {\n id: \"order\",\n name: \"\",\n selector: (row) => row.order,\n center: true,\n width: \"10%\",\n format: function (row, index) {\n return (\n \n moveUp(row)} />\n \n Move Up\n \n \n moveDown(row)} />\n \n Move Down\n \n
\n );\n },\n omit: !this.props.allowEdit,\n },\n ];\n\n return (\n \n {this.renderUpdate()}\n {this.renderLoadingPanel()}\n \n Registration Reasons \n \n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.adminRegistrationReason.loading,\n error: state.adminRegistrationReason.error,\n registrationReasons: state.adminRegistrationReason.registrationReasons,\n isUpdating: state.adminRegistrationReason.isUpdating,\n containerConfig: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onRegistrationReasons: bindActionCreators(allowedRegistrationReasonsActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ManageRegistrationReasons);\n","import * as authActions from \"../../../store/actions/authAction\";\nimport { dismisAlert, generateAlert } from \"./../../../utils/alertUtils\";\nimport { models } from \"powerbi-client\";\nimport { PowerBIEmbed } from \"powerbi-client-react\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Modal, ModalBody, ModalHeader } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst apiHostname = process.env.REACT_APP_API_ENDPOINT;\n\nclass ShowPowerBIReport extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: null,\n loading: true,\n alerts: [],\n showBIReport: this.props.showBIReport,\n reportId: this.props.reportId,\n embedUrl: this.props.embedUrl,\n accessToken: this.props.accessToken,\n height: 0,\n };\n\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.updateWindowDimensions = this.updateWindowDimensions.bind(this);\n }\n\n componentDidMount() {\n this.updateWindowDimensions();\n window.addEventListener(\"resize\", this.updateWindowDimensions);\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.updateWindowDimensions);\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.showBIReport !== prevProps.showBIReport) {\n this.setState({ showBIReport: this.props.showBIReport });\n }\n\n if (this.props.reportId !== prevProps.reportId) {\n this.setState({ reportId: this.props.reportId, embedUrl: this.props.embedUrl, accessToken: this.props.accessToken });\n }\n }\n\n updateWindowDimensions() {\n this.setState({ height: window.innerHeight - 100 });\n }\n\n toggleDialogModal = () => {\n const showBIReport = this.state.showBIReport;\n this.setState({ showBIReport: !showBIReport });\n this.props.closeReport(false);\n };\n\n render() {\n return (\n \n \n Power BI Report \n \n {this.state.showBIReport && (\n \n \n
{\n this.report = embeddedReport;\n }}\n />\n \n )}\n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n error: state.auth.error,\n token: state.auth.token,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ShowPowerBIReport);\n","import * as authActions from \"../../../store/actions/authAction\";\nimport * as configActions from \"../../../store/actions/configAction\";\nimport changeInput from \"../../../utils/changeInput\";\nimport { ContentWrapperLg } from \"../../common/ContentWrapperLg\";\nimport { dismisAlert, generateAlert } from \"./../../../utils/alertUtils\";\nimport ManageActionTypes from \"./ManageActionTypes\";\nimport ManageAllowedRegistrationEmailDomains from \"./ManageAllowedRegistrationEmailDomains\";\nimport ManageEvidenceTypes from \"./ManageEvidenceTypes\";\nimport ManageMentorPreferences from \"./ManageMentorPreferences\";\nimport ManageRegistrationReasons from \"./ManageRegistrationReasons\";\nimport ShowPowerBIReport from \"./ShowPowerBIReport\";\nimport { faChevronDown, faChevronRight, faRotateLeft } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { ContentState, EditorState, convertToRaw } from \"draft-js\";\nimport draftToHtml from \"draftjs-to-html\";\nimport htmlToDraft from \"html-to-draftjs\";\nimport React from \"react\";\nimport { Accordion, AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel, AccordionItemState } from \"react-accessible-accordion\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { ChromePicker } from \"react-color\";\nimport { Editor } from \"react-draft-wysiwyg\";\nimport { connect } from \"react-redux\";\nimport { withRouter } from \"react-router\";\nimport { Link } from \"react-router-dom\";\nimport ReactTextareaAutosize from \"react-textarea-autosize\";\nimport { Button, ButtonGroup, Col, Container, Form, FormGroup, Input, Label, Row, Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\nconst apiHostname = process.env.REACT_APP_API_ENDPOINT;\n\nconst headerStyle = {\n color: \"#2B2B2B\",\n fontSize: \"18px\",\n fontFamily: \"IBMPlexSans-Bold\",\n};\n\nconst rowStyle = {\n fontSize: \"12px\",\n};\n\nconst defaultSelfRegistrationBody =\n \"Apply for employment
\" +\n \"\" +\n \"If you are interested in working for [companyname] as a Digital professional, we invite you register for a self-assessment.Learn More .
\";\n\nconst defaultSelfRegistrationConfirmationBody =\n \"Great you're NOW registered.
\" +\n \"\" +\n \"
\" +\n \"NOTE: You will shortly receive your survey invitation email to the address you registered with. \" +\n \"
\" +\n \"Receive an email with a report attached based on your survey answers \" +\n \"Receive an email to set up your password for access to the SkillsTX Planner where you can: \" +\n \" \" +\n \"
\") {\n html = \"\";\n }\n\n const updateState = changeInput(this.state.form, \"selfRegistrationWording\", html);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n }\n\n onEditorStateChange2(editorContent) {\n let html = draftToHtml(convertToRaw(editorContent.getCurrentContent()));\n if (html.trim() == \"
\") {\n html = \"\";\n }\n\n const updateState = changeInput(this.state.form, \"selfRegistrationConfirmationWording\", html);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n }\n\n handleChange = (event) => {\n const form = this.state.form;\n const { name, value } = event.target;\n\n if (name == \"requirmentAssignment\") {\n let hasCurrentJobLocked = true;\n let hasFutureJobLocked = true;\n\n if (value == \"Current Only\" || value == \"Both Current and Future\") {\n hasCurrentJobLocked = false;\n }\n\n if (value == \"Future Only\" || value == \"Both Current and Future\") {\n hasFutureJobLocked = false;\n }\n\n form.hasCurrentJobLocked.value = hasCurrentJobLocked;\n form.hasFutureJobLocked.value = hasFutureJobLocked;\n\n this.setState({ form });\n } else {\n let updateState = changeInput(this.state.form, name, value);\n\n if (name == \"whoAllowApproval\") {\n if (value == \"Nobody\") {\n updateState = changeInput(updateState.form, \"enableApprovalRequest\", false);\n }\n }\n\n // if (name == \"enableFindMentor\" && (value == false || value == \"false\")) {\n // const whoAllowApproval = updateState.form.whoAllowApproval.value;\n // if (whoAllowApproval.includes(\"Mentor\")) {\n // updateState = changeInput(updateState.form, \"whoAllowApproval\", \"Nobody\");\n // }\n // }\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n isFormDirty: true,\n });\n }\n };\n\n handleChangeCheckBox = (event) => {\n const form = this.state.form;\n\n if (form.automaticUserInactivationLoginDays.value == 0) {\n form.automaticUserInactivationLoginDays.value = 90;\n\n const updateState = changeInput(this.state.form, \"automaticUserInactivationLoginDays\", 90);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n } else {\n const updateState = changeInput(this.state.form, \"automaticUserInactivationLoginDays\", 0);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n }\n };\n\n handleInactivationUsersClick = () => {\n const config = this.props.config;\n const form = this.state.form;\n\n if (config.automaticUserInactivationLoginDays != form.automaticUserInactivationLoginDays.value) {\n if (window.confirm(\"Updated config will applied after the updated config Save, this process will still using previous config. Continue?\")) {\n this.setState({ isUpdating: true });\n\n this.props.onConfig.executeInactivationUsersLessLogin().then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.configError) {\n this.generateAlert(\"success\", `Success, ${this.props.numberOfPersonsPutToInactive} users has been put to inactive.`);\n } else {\n this.generateAlert(\"danger\", this.props.configError.errData.Message);\n }\n }\n this.setState({ isUpdating: this.props.isUpdating });\n });\n }\n } else {\n this.setState({ isUpdating: true });\n\n this.props.onConfig.executeInactivationUsersLessLogin().then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.configError) {\n this.generateAlert(\"success\", `Success, ${this.props.numberOfPersonsPutToInactive} users has been put to inactive.`);\n } else {\n this.generateAlert(\"danger\", this.props.configError.errData.Message);\n }\n }\n this.setState({ isUpdating: this.props.isUpdating });\n });\n }\n };\n\n openManageEvidenceType = () => {\n this.setState({ showEvidenceTypesDialogTs: new Date() });\n };\n\n openManageMentorPreferences = () => {\n this.setState({ showMentorPreferencesDialogTs: new Date() });\n };\n\n openManageActionType = () => {\n this.setState({ showActionTypesDialogTs: new Date() });\n };\n\n openManageActionLog = () => {\n this.props.history.push(\"/admin/settings/actionlogs\");\n };\n\n openManageAllowedEmailDomains = () => {\n this.setState({ showAllowedEmailDomainsDialogTs: new Date() });\n };\n\n openManageRegistrationReason = () => {\n this.setState({ showRegistrationReasonsDialogTs: new Date() });\n };\n\n handleDownloadPowerBI = (powerBiModelLink, powerBiModelFileName) => {\n this.setState({ downloadPowerBiModelLoading: true });\n this.props.onConfig.downloadPowerBIModel().then(() => {\n if (!this.props.loadingExport && !this.props.configError) {\n if (this.props.blobData) {\n FileDownload(this.props.blobData, powerBiModelFileName);\n }\n }\n\n this.setState({ downloadPowerBiModelLoading: this.props.loadingExport });\n });\n };\n\n handleShowPowerBIReport = (showBIReport) => {\n this.setState({ showBIReport });\n };\n\n handleOpenBackgroundColorPicker = () => {\n this.setState({ displayBackgroundColorPicker: !this.state.displayBackgroundColorPicker });\n };\n\n handleCloseBackgroundColorPicker = () => {\n this.setState({ displayBackgroundColorPicker: false });\n };\n\n handleChangeBackgroundColorComplete = (color) => {\n const form = this.state.form;\n form.stepPanelBackgroundColor.value = color.hex;\n this.setState({ form });\n };\n\n resetBackgroundColor = () => {\n const form = this.state.form;\n\n form.stepPanelBackgroundColor.value = this.props.config && this.props.config.stepPanelBackgroundColor ? this.props.config.stepPanelBackgroundColor : \"#2D2D2D\";\n\n this.setState({ form });\n };\n\n handleOpenFontColorPicker = () => {\n this.setState({ displayFontColorPicker: !this.state.displayFontColorPicker });\n };\n\n handleCloseFontColorPicker = () => {\n this.setState({ displayFontColorPicker: false });\n };\n\n handleChangeFontColorComplete = (color) => {\n const form = this.state.form;\n form.stepPanelFontColor.value = color.hex;\n this.setState({ form });\n };\n\n resetFontColor = () => {\n const form = this.state.form;\n\n form.stepPanelFontColor.value = this.props.config && this.props.config.stepPanelFontColor ? this.props.config.stepPanelFontColor : \"#FFFFFF\";\n\n this.setState({ form });\n };\n\n pad2 = (n) => {\n return (n < 10 ? \"0\" : \"\") + n;\n };\n\n handleDownloadImpactAssessmentSpreadsheets = () => {\n const config = this.props.config;\n\n if (config && config.exportSfia9MigrationImpactByEmail) {\n if (window.confirm(\"Due to the number of users and requirements in your container, the SFIA9 migration impact assessment spreadsheets will be generated in the background, and you will receive an Email with a Download link when they are completed. Proceed?\")) {\n this.props.onConfig.exportMigrationImpactAssessmentReportsToEmail({});\n this.generateAlert(\"success\", \"SFIA9 migration impact assessment spreadsheet request sent.\");\n }\n } else {\n this.props.onConfig.exportMigrationImpactAssessmentReports().then(() => {\n if (!this.props.loadingPrint) {\n if (this.props.printData) {\n var today = new Date();\n var strToday = today.getFullYear() + this.pad2(today.getMonth() + 1) + this.pad2(today.getDate()) + \"_\" + this.pad2(today.getHours()) + this.pad2(today.getMinutes()) + this.pad2(today.getSeconds());\n FileDownload(this.props.printData, `Sfia9MigrationImpactReport ${config && (config.companyName || config.containerName) ? (config.containerName ? `for ${config.containerName} at ` : `for ${config.companyName} at `) : \"\"}${strToday}.xlsx`);\n }\n }\n });\n }\n };\n\n render() {\n const popover = {\n position: \"absolute\",\n zIndex: \"2\",\n };\n const cover = {\n position: \"fixed\",\n top: \"0px\",\n right: \"0px\",\n bottom: \"0px\",\n left: \"0px\",\n };\n\n const pageAssignments = this.props.pageAssignments;\n const pageAssignment = pageAssignments.find((it) => it.pageName == \"Manage Features Settings\");\n\n const toolbar = {\n options: [\"inline\", \"list\", \"textAlign\", \"fontSize\", \"link\", \"history\", \"fontFamily\", \"colorPicker\"],\n inline: {\n inDropdown: false,\n className: undefined,\n options: [\"bold\", \"italic\", \"underline\", \"superscript\", \"subscript\"],\n },\n fontFamily: {\n options: [\"Arial\", \"Georgia\", \"Impact\", \"Tahoma\", \"Times New Roman\", \"Verdana\"],\n className: undefined,\n component: undefined,\n dropdownClassName: undefined,\n },\n };\n\n const {\n form,\n optionRequirementAssignment,\n optionWhoAllowApproval,\n optionWhoAllowApprovalIncludeMentor,\n optionDefaultActivityStatementFrequency,\n optionReminderRepeatInterval,\n optionReminderTotal,\n optionJobProfileReportFormat,\n optionSelfAssessedProfileReportFormat,\n optionSelfRegistransMarkedAsCandidate,\n optionBadgeProvider,\n optionYesOrNo,\n } = this.state;\n\n const blocksFromHtml1 = htmlToDraft(form && form.selfRegistrationWording ? form.selfRegistrationWording.value : \"\");\n const contentBlocks1 = blocksFromHtml1.contentBlocks;\n const entityMap1 = blocksFromHtml1.entityMap;\n const contentState1 = ContentState.createFromBlockArray(contentBlocks1, entityMap1);\n const selfRegistrationWordingEditorState = EditorState.createWithContent(contentState1);\n\n const blocksFromHtml2 = htmlToDraft(form && form.selfRegistrationConfirmationWording ? form.selfRegistrationConfirmationWording.value : \"\");\n const contentBlocks2 = blocksFromHtml2.contentBlocks;\n const entityMap2 = blocksFromHtml2.entityMap;\n const contentState2 = ContentState.createFromBlockArray(contentBlocks2, entityMap2);\n const selfRegistrationConfirmationWordingEditorState = EditorState.createWithContent(contentState2);\n\n return (\n \n op.operation == \"Edit\" && op.allow == true) ? true : false}\n >\n op.operation == \"Edit\" && op.allow == true) ? true : false}> \n op.operation == \"Edit\" && op.allow == true) ? true : false}\n >\n op.operation == \"Edit\" && op.allow == true) ? true : false}\n >\n op.operation == \"Edit\" && op.allow == true) ? true : false}\n >\n \n
\n ) : (\n \n \n \n Manage Features/Settings\n
\n \n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n error: state.auth.error,\n\n configLoading: state.config.loading,\n configError: state.config.error,\n config: state.config.config,\n isUpdating: state.config.isUpdating,\n numberOfPersonsPutToInactive: state.config.numberOfPersonsPutToInactive,\n\n loadingExport: state.config.loadingExport,\n blobData: state.config.blobData,\n pageAssignments: state.adminPerson.pageAssignments,\n\n loadingPrint: state.config.loadingPrint,\n printData: state.config.printData,\n\n sfiaVersion: state.auth.sfiaVersion,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onConfig: bindActionCreators(configActions, dispatch),\n };\n};\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(ManageSettings));\n","import ErrorHandler from \"../errorResponseHandler\";\nimport Instance from \"../service/AxiosInstance\";\n\nexport const axios = Instance.apiInstance();\n\nclass AdminBadgeRequestAPI {\n static getBadgeRequests() {\n return axios\n .get(`/badgerequests/list`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateBadgeRequestAssesor(id, assessorId, assessorName) {\n return axios\n .post(`/badgerequests/${id}/updateAssessor`, {\n assessorId,\n assessorName,\n })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateBadgeRequestCertificationEntries(id, badgeRequest) {\n return axios\n .post(`/badgerequests/${id}/updatecertificationentries`, badgeRequest)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static submitBadgeRequestCertification(id) {\n return axios\n .post(`/badgerequests/${id}/submitcertification`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static submitBadgeRequestCertifications(badgeRequestIds) {\n return axios\n .post(`/badgerequests/submitcertifications`, { badgeRequestIds })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static rejectBadgeRequestCertification(id) {\n return axios\n .post(`/badgerequests/${id}/rejectrequest`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n}\n\nexport default AdminBadgeRequestAPI;\n","import AdminBadgeRequestAPI from \"./../../../common/api/adminservice/AdminBadgeRequestService\";\nimport * as actionTypes from \"./adminActionTypes\";\n\nexport const getBadgeRequestsStart = () => {\n return {\n type: actionTypes.GET_BADGE_REQUESTS_START,\n };\n};\n\nexport const getBadgeRequestsSuccess = (badgeRequests) => {\n return {\n type: actionTypes.GET_BADGE_REQUESTS_SUCCESS,\n badgeRequests,\n };\n};\n\nexport const getBadgeRequestsFail = (error) => {\n return {\n type: actionTypes.GET_BADGE_REQUESTS_FAIL,\n error: error,\n };\n};\n\nexport const getBadgeRequests = () => {\n return (dispatch) => {\n dispatch(getBadgeRequestsStart());\n\n return AdminBadgeRequestAPI.getBadgeRequests()\n .then((res) => {\n dispatch(getBadgeRequestsSuccess(res));\n })\n .catch((err) => {\n dispatch(getBadgeRequestsFail(err));\n });\n };\n};\n\nexport const updateBadgeRequestAssessorStart = () => {\n return {\n type: actionTypes.UPDATE_BADGE_REQUEST_ASSESSOR_START,\n };\n};\n\nexport const updateBadgeRequestAssessorSuccess = (badgeRequest) => {\n return {\n type: actionTypes.UPDATE_BADGE_REQUEST_ASSESSOR_SUCCESS,\n badgeRequest,\n };\n};\n\nexport const updateBadgeRequestAssessorFail = (error) => {\n return {\n type: actionTypes.UPDATE_BADGE_REQUEST_ASSESSOR_FAIL,\n error: error,\n };\n};\n\nexport const updateBadgeRequestAssessor = (id, assessorId, assessorName) => {\n return (dispatch) => {\n dispatch(updateBadgeRequestAssessorStart());\n\n return AdminBadgeRequestAPI.updateBadgeRequestAssesor(id, assessorId, assessorName)\n .then((res) => {\n if (res) {\n dispatch(updateBadgeRequestAssessorSuccess(res));\n } else {\n dispatch(updateBadgeRequestAssessorFail(res));\n }\n })\n .catch((err) => {\n dispatch(updateBadgeRequestAssessorFail(err));\n });\n };\n};\n\nexport const updateBadgeRequestCertificationEntriesStart = () => {\n return {\n type: actionTypes.UPDATE_BADGE_REQUEST_CERTIFICATION_ENTRIES_START,\n };\n};\n\nexport const updateBadgeRequestCertificationEntriesSuccess = (badgeRequest) => {\n return {\n type: actionTypes.UPDATE_BADGE_REQUEST_CERTIFICATION_ENTRIES_SUCCESS,\n badgeRequest,\n };\n};\n\nexport const updateBadgeRequestCertificationEntriesFail = (error) => {\n return {\n type: actionTypes.UPDATE_BADGE_REQUEST_CERTIFICATION_ENTRIES_FAIL,\n error: error,\n };\n};\n\nexport const updateBadgeRequestCertificationEntries = (id, badgeRequest) => {\n return (dispatch) => {\n dispatch(updateBadgeRequestCertificationEntriesStart());\n\n return AdminBadgeRequestAPI.updateBadgeRequestCertificationEntries(id, badgeRequest)\n .then((res) => {\n if (res) {\n dispatch(updateBadgeRequestCertificationEntriesSuccess(res));\n } else {\n dispatch(updateBadgeRequestCertificationEntriesFail(res));\n }\n })\n .catch((err) => {\n dispatch(updateBadgeRequestCertificationEntriesFail(err));\n });\n };\n};\n\nexport const submitBadgeRequestCertificationStart = () => {\n return {\n type: actionTypes.SUBMIT_BADGE_REQUEST_CERTIFICATION_START,\n };\n};\n\nexport const submitBadgeRequestCertificationSuccess = (badgeRequest) => {\n return {\n type: actionTypes.SUBMIT_BADGE_REQUEST_CERTIFICATION_SUCCESS,\n badgeRequest,\n };\n};\n\nexport const submitBadgeRequestCertificationFail = (error) => {\n return {\n type: actionTypes.SUBMIT_BADGE_REQUEST_CERTIFICATION_FAIL,\n error: error,\n };\n};\n\nexport const submitBadgeRequestCertification = (id) => {\n return (dispatch) => {\n dispatch(submitBadgeRequestCertificationStart());\n\n return AdminBadgeRequestAPI.submitBadgeRequestCertification(id)\n .then((res) => {\n if (res) {\n dispatch(submitBadgeRequestCertificationSuccess(res));\n } else {\n dispatch(submitBadgeRequestCertificationFail(res));\n }\n })\n .catch((err) => {\n dispatch(submitBadgeRequestCertificationFail(err));\n });\n };\n};\n\nexport const updateBadgeRequest = (badgeRequest) => {\n return {\n type: actionTypes.UPDATE_BADGE_REQUEST,\n badgeRequest,\n };\n};\n\nexport const submitBadgeRequestCertificationsStart = () => {\n return {\n type: actionTypes.SUBMIT_BADGE_REQUEST_CERTIFICATIONS_START,\n };\n};\n\nexport const submitBadgeRequestCertificationsSuccess = (badgeRequests) => {\n return {\n type: actionTypes.SUBMIT_BADGE_REQUEST_CERTIFICATIONS_SUCCESS,\n badgeRequests,\n };\n};\n\nexport const submitBadgeRequestCertificationsFail = (error) => {\n return {\n type: actionTypes.SUBMIT_BADGE_REQUEST_CERTIFICATIONS_FAIL,\n error: error,\n };\n};\n\nexport const submitBadgeRequestCertifications = (badgeRequestIds) => {\n return (dispatch) => {\n dispatch(submitBadgeRequestCertificationsStart());\n\n return AdminBadgeRequestAPI.submitBadgeRequestCertifications(badgeRequestIds)\n .then((res) => {\n if (res) {\n dispatch(submitBadgeRequestCertificationsSuccess(res));\n } else {\n dispatch(submitBadgeRequestCertificationsFail(res));\n }\n })\n .catch((err) => {\n dispatch(submitBadgeRequestCertificationsFail(err));\n });\n };\n};\n\nexport const rejectBadgeRequestCertificationStart = () => {\n return {\n type: actionTypes.REJECT_BADGE_REQUEST_CERTIFICATION_START,\n };\n};\n\nexport const rejectBadgeRequestCertificationSuccess = (badgeRequestId) => {\n return {\n type: actionTypes.REJECT_BADGE_REQUEST_CERTIFICATION_SUCCESS,\n badgeRequestId,\n };\n};\n\nexport const rejectBadgeRequestCertificationFail = (error) => {\n return {\n type: actionTypes.REJECT_BADGE_REQUEST_CERTIFICATION_FAIL,\n error: error,\n };\n};\n\nexport const rejectBadgeRequestCertification = (id) => {\n return (dispatch) => {\n dispatch(rejectBadgeRequestCertificationStart());\n\n return AdminBadgeRequestAPI.rejectBadgeRequestCertification(id)\n .then((res) => {\n if (res) {\n dispatch(rejectBadgeRequestCertificationSuccess(id));\n } else {\n dispatch(rejectBadgeRequestCertificationFail(res));\n }\n })\n .catch((err) => {\n dispatch(rejectBadgeRequestCertificationFail(err));\n });\n };\n};\n","import * as adminBadgeRequestActions from \"../../../store/admin/actions/adminBadgeRequestActions\";\nimport { faCircleCheck, faCancel } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Link } from \"react-router-dom\";\nimport { Col, Input, Popover, PopoverBody, PopoverHeader, Row, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nclass BadgeRequestAssessorCell extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n popOverUpdateAssessorOpen: false,\n persons: [],\n assessorName: this.props.assessorName,\n assessorId: this.props.assessorId,\n newAssessorId: this.props.assessorId,\n dirty: false,\n isUpdating: false,\n };\n }\n\n componentDidMount() {\n const persons =\n this.props.persons &&\n this.props.persons\n .filter((it) => it.roles.some((it) => it.role == \"Admin\") && ((it.id != this.props.authPersonId && this.props.authPersonId == this.props.personId) || this.props.authPersonId != this.props.personId))\n .map((it) => {\n return { value: it.id, label: `${it.firstName} ${it.lastName}` };\n })\n .sort((a, b) => (`${a.label}` > `${b.label}` ? 1 : -1));\n\n this.setState({ persons: [{ label: \"None\", value: null }, ...persons] });\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.persons !== this.props.persons && this.props.persons) {\n const persons =\n this.props.persons &&\n this.props.persons\n .filter((it) => it.roles.some((it) => it.role == \"Admin\") && ((it.id != this.props.authPersonId && this.props.authPersonId == this.props.personId) || this.props.authPersonId != this.props.personId))\n .map((it) => {\n return { value: it.id, label: `${it.firstName} ${it.lastName}` };\n })\n .sort((a, b) => (`${a.label}` > `${b.label}` ? 1 : -1));\n\n this.setState({ persons: [{ label: \"None\", value: null }, ...persons] });\n }\n }\n\n componentWillUnmount() {\n this.setState = (state, callback) => {\n return;\n };\n }\n\n togglePopover = () => {\n const popOverUpdateAssessorOpen = this.state.popOverUpdateAssessorOpen;\n const assessorId = this.state.assessorId;\n\n this.setState({ popOverUpdateAssessorOpen: !popOverUpdateAssessorOpen, dirty: false, isUpdating: false, newAssessorId: assessorId });\n };\n\n openUpdateAssignment = () => {\n const popOverUpdateAssessorOpen = this.state.popOverUpdateAssessorOpen;\n this.setState({ popOverUpdateAssessorOpen: !popOverUpdateAssessorOpen });\n };\n\n handleChange = (event) => {\n const { name, value } = event.target;\n\n this.setState({ newAssessorId: value && value != \"None\" ? value : null, dirty: true });\n };\n\n handleUpdateAssessor = () => {\n const { newAssessorId, badgeRequest, persons } = this.state;\n\n let assessor = null;\n\n if (newAssessorId) {\n assessor = persons.find((it) => it.value == newAssessorId);\n }\n\n this.setState({ isUpdating: true });\n this.props.onBadgeRequest.updateBadgeRequestAssessor(this.props.badgeRequest.id, newAssessorId, assessor ? assessor.label : null).then(() => {\n if (!this.props.isUpdating && !this.props.error) {\n if (!newAssessorId) {\n this.setState({ assessorName: null, assessorId: null });\n } else if (assessor) {\n this.setState({ assessorName: assessor.label, assessorId: assessor.value });\n }\n\n this.setState({ popOverUpdateAssessorOpen: false });\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n render() {\n const badgeRequest = this.props.badgeRequest;\n const { assessorName, assessorId, persons, newAssessorId } = this.state;\n\n return (\n \n \n {this.props.allowEdit ? (\n
this.openUpdateAssignment()}>\n {assessorId ? assessorName : \"None\"}\n \n ) : (\n
{assessorId ? assessorName : \"\"} \n )}\n {this.props.allowEdit && (\n
\n \n Update Assessor\n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n {person.label}\n \n ))}\n \n \n
\n \n \n \n )}\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n isUpdating: state.adminPerson.isUpdating,\n error: state.adminPerson.error,\n authPersonId: state.auth.personId,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onBadgeRequest: bindActionCreators(adminBadgeRequestActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(BadgeRequestAssessorCell);\n","import * as authActions from \"../../../store/actions/authAction\";\nimport * as configActions from \"../../../store/actions/configAction\";\nimport * as personActions from \"../../../store/actions/personAction\";\nimport * as skillProfileActions from \"../../../store/actions/skillProfileAction\";\nimport * as adminBadgeRequestActions from \"../../../store/admin/actions/adminBadgeRequestActions\";\nimport * as adminPersonActions from \"../../../store/admin/actions/adminPersonActions\";\nimport { dismisAlert, generateAlert } from \"../../../utils/alertUtils\";\nimport { filterArray } from \"../../../utils/filterUtils\";\nimport { contentTranslator } from \"../../../utils/translatorUtils\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport { SkillsTxTableClearSearch } from \"../../common/SkillsTxTableClearSearch\";\nimport { SkillsTxTableSearchBar } from \"../../common/SkillsTxTableSearchBar\";\nimport BadgeRequestAssessorCell from \"./BadgeRequestAssessorCell\";\nimport { faSquare } from \"@fortawesome/free-regular-svg-icons\";\nimport { faCertificate, faCircleXmark, faClipboardCheck, faDownload, faSquareCheck, faSquareMinus, faSync } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { withRouter } from \"react-router-dom\";\nimport { Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nclass ManageSfiaCredentials extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: null,\n loading: true,\n alerts: [],\n persons: [],\n badgeRequests: [],\n isUpdating: false,\n searchProperties: [\"email\", \"firstName\", \"lastName\", \"assessorName\", \"status\"],\n modeGenerateReports: false,\n modeSubmitCertificate: false,\n personsSkillProfileSelected: [],\n personsEndorsedSelected: [],\n personsActionSelected: [],\n personsSubmitCertificateSelected: [],\n loadingPrint: false,\n filterAssignedToMe: false,\n showLoadingPanel: false,\n selectedRequestToReject: null,\n showRejectBadgeConfirmation: false,\n };\n\n this.filterArray = filterArray.bind(this);\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n const routeGoBack = localStorage.getItem(\"routeGoBack\");\n localStorage.setItem(\"routeAdminFrom\", \"/admin/sfiacredentials\");\n localStorage.setItem(\"manageProfileByAdminPopup\", \"FALSE\");\n\n let repopulate = true;\n if (routeGoBack == \"TRUE\") {\n repopulate = false;\n }\n\n this.props.onAuth.authCheckState().then(() => {\n const searchProperties = this.state.searchProperties;\n if (repopulate || !this.props.badgeRequests || (this.props.badgeRequests && this.props.badgeRequests.length == 0)) {\n this.initData();\n this.props.onAdminPerson.getPersons().then(() => {\n let persons = this.props.persons.sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1));\n\n this.setState({\n persons,\n });\n });\n this.setState({ loading: this.props.loading });\n } else {\n const filterAssignedToMe = this.state.filterAssignedToMe;\n\n let badgeRequests = this.reformBadgeRequests(this.props.badgeRequests.sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1)));\n if (filterAssignedToMe) {\n badgeRequests = badgeRequests.filter((it) => it.assessorId == this.props.personId);\n }\n\n if (this.state.modeGenerateReports) {\n badgeRequests.forEach((it) => {\n it.toggleSkillProfileSelected = !it.selfAssessedReportGenerated && it.percentage >= 1;\n it.toggleEndorsedSelected = !it.endorsedReportGenerated && it.hasEndorseProfile;\n it.toggleActionSelected = !it.actionReportGenerated && it.hasAction;\n });\n }\n\n let persons = this.props.persons.sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1));\n\n this.setState({\n badgeRequests: badgeRequests,\n personsSkillProfileSelected: badgeRequests.filter((it) => it.toggleSkillProfileSelected).map((row) => row.id),\n personsEndorsedSelected: badgeRequests.filter((it) => it.toggleEndorsedSelected).map((row) => row.id),\n personsActionSelected: badgeRequests.filter((it) => it.toggleActionSelected).map((row) => row.id),\n personsSubmitCertificateSelected: [],\n persons,\n loading: false,\n });\n }\n });\n }\n\n componentWillUnmount() {\n localStorage.setItem(\"routeGoBack\", \"FALSE\");\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.persons !== this.props.persons && this.props.persons) {\n this.setState({ persons: this.props.persons.sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1)) });\n }\n\n if (prevProps.badgeRequests !== this.props.badgeRequests && this.props.badgeRequests) {\n this.setState({ badgeRequests: this.reformBadgeRequests(this.props.badgeRequests.sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))) });\n }\n }\n\n reformBadgeRequests = (badgeRequests) => {\n return badgeRequests.map((it) => {\n return {\n id: it.id,\n personId: it.personId,\n idSkillProfile: it.id,\n idActionPlan: it.id,\n idEndorsedProfile: it.id,\n firstName: it.firstName,\n lastName: it.lastName,\n certificationSubmitted: it.certificationSubmitted,\n email: it.email,\n completeName: `${it.firstName}${it.lastName ? ` ${it.lastName}` : \"\"}${it.email ? ` ${it.email}` : \"\"}`,\n\n totalQuestions: it.totalQuestions,\n answeredQuestions: it.answeredQuestions,\n totalTimeTaken: it.totalTimeTaken,\n percentage: it.percentage,\n hasEndorseProfile: it.hasEndorseProfile,\n hasAction: it.hasAction,\n\n selfAssessedReportGenerated: it.selfAssessedReportGenerated,\n lastSelfAssessedReportGeneratedVersion: it.lastSelfAssessedReportGeneratedVersion,\n lastSelfAssessedReportGeneratedOn: it.lastSelfAssessedReportGeneratedOn,\n actionReportGenerated: it.actionReportGenerated,\n lastActionReportGeneratedVersion: it.lastActionReportGeneratedVersion,\n lastActionReportGeneratedOn: it.lastActionReportGeneratedOn,\n endorsedReportGenerated: it.endorsedReportGenerated,\n lastEndorsedReportGeneratedVersion: it.lastEndorsedReportGeneratedVersion,\n lastEndorsedReportGeneratedOn: it.lastEndorsedReportGeneratedOn,\n\n submitDate: it.submitDate,\n status: it.status ? it.status : \"\",\n assessorId: it.assessorId,\n assessorName: it.assessorName ? it.assessorName : \"\",\n assessedDate: it.assessedDate,\n };\n });\n };\n\n initData = () => {\n const filterAssignedToMe = this.state.filterAssignedToMe;\n this.props.onAdminBadgeRequest.getBadgeRequests().then(() => {\n let badgeRequests = this.reformBadgeRequests(this.props.badgeRequests.sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1)));\n if (filterAssignedToMe) {\n badgeRequests = badgeRequests.filter((it) => it.assessorId == this.props.personId);\n }\n\n if (this.state.modeGenerateReports) {\n badgeRequests.forEach((it) => {\n it.toggleSkillProfileSelected = !it.selfAssessedReportGenerated && it.percentage >= 1;\n it.toggleEndorsedSelected = !it.endorsedReportGenerated && it.hasEndorseProfile;\n it.toggleActionSelected = !it.actionReportGenerated && it.hasAction;\n });\n }\n\n this.setState({\n badgeRequests: badgeRequests,\n personsSkillProfileSelected: badgeRequests.filter((it) => it.toggleSkillProfileSelected).map((row) => row.id),\n personsEndorsedSelected: badgeRequests.filter((it) => it.toggleEndorsedSelected).map((row) => row.id),\n personsActionSelected: badgeRequests.filter((it) => it.toggleActionSelected).map((row) => row.id),\n personsSubmitCertificateSelected: [],\n });\n });\n };\n\n handleRefresh = () => {\n this.initData();\n };\n\n handleRowClickDummy = () => {};\n\n handleRowSkillProfileClick = (row) => {\n if (!this.state.loadingPrint) {\n const badgeRequests = this.state.badgeRequests;\n const updatedData = badgeRequests.find((it) => it.id == row.id);\n updatedData.toggleSkillProfileSelected = !updatedData.toggleSkillProfileSelected;\n\n this.setState({ badgeRequests: [...badgeRequests], personsSkillProfileSelected: badgeRequests.filter((it) => it.toggleSkillProfileSelected).map((row) => row.personId) });\n }\n };\n\n handleSelectSkillProfileAll = () => {\n const { badgeRequests, searchKeyword, searchProperties, columnSearchKeywords } = this.state;\n let selectAll = false;\n\n const filtered = this.filterArray(badgeRequests, searchKeyword, searchProperties, columnSearchKeywords);\n\n if (filtered.filter((it) => it.toggleSkillProfileSelected && it.percentage >= 1).length == 0) {\n selectAll = true;\n } else if (filtered.filter((it) => !it.toggleSkillProfileSelected && it.percentage >= 1).length == 0) {\n selectAll = false;\n } else {\n selectAll = true;\n }\n\n badgeRequests.forEach((it) => {\n it.toggleSkillProfileSelected = false;\n });\n\n if (selectAll) {\n badgeRequests\n .filter((it) => it.percentage >= 1)\n .forEach((it) => {\n if (filtered.find((f) => f.id == it.id)) {\n it.toggleSkillProfileSelected = true;\n }\n });\n }\n\n this.setState({ badgeRequests: [...badgeRequests], personsSkillProfileSelected: badgeRequests.filter((it) => it.toggleSkillProfileSelected).map((row) => row.personId) });\n };\n\n handleRowEndorsedClick = (row) => {\n if (!this.state.loadingPrint) {\n const badgeRequests = this.state.badgeRequests;\n const updatedData = badgeRequests.find((it) => it.id == row.id);\n updatedData.toggleEndorsedSelected = !updatedData.toggleEndorsedSelected;\n\n this.setState({ badgeRequests: [...badgeRequests], personsEndorsedSelected: badgeRequests.filter((it) => it.toggleEndorsedSelected).map((row) => row.personId) });\n }\n };\n\n handleSelectEndorsedAll = () => {\n const { badgeRequests, searchKeyword, searchProperties, columnSearchKeywords } = this.state;\n let selectAll = false;\n\n const filtered = this.filterArray(badgeRequests, searchKeyword, searchProperties, columnSearchKeywords);\n\n if (filtered.filter((it) => it.toggleEndorsedSelected && it.hasEndorseProfile).length == 0) {\n selectAll = true;\n } else if (filtered.filter((it) => !it.toggleEndorsedSelected && it.hasEndorseProfile).length == 0) {\n selectAll = false;\n } else {\n selectAll = true;\n }\n\n badgeRequests.forEach((it) => {\n it.toggleEndorsedSelected = false;\n });\n\n if (selectAll) {\n badgeRequests\n .filter((it) => it.hasEndorseProfile)\n .forEach((it) => {\n if (filtered.find((f) => f.id == it.id)) {\n it.toggleEndorsedSelected = true;\n }\n });\n }\n\n this.setState({ badgeRequests: [...badgeRequests], personsEndorsedSelected: badgeRequests.filter((it) => it.toggleEndorsedSelected).map((row) => row.personId) });\n };\n\n handleRowActionClick = (row) => {\n if (!this.state.loadingPrint) {\n const badgeRequests = this.state.badgeRequests;\n const updatedData = badgeRequests.find((it) => it.id == row.id);\n updatedData.toggleActionSelected = !updatedData.toggleActionSelected;\n\n this.setState({ badgeRequests: [...badgeRequests], personsActionSelected: badgeRequests.filter((it) => it.toggleActionSelected).map((row) => row.personId) });\n }\n };\n\n handleSelectActionAll = () => {\n const { badgeRequests, searchKeyword, searchProperties, columnSearchKeywords } = this.state;\n let selectAll = false;\n\n const filtered = this.filterArray(badgeRequests, searchKeyword, searchProperties, columnSearchKeywords);\n\n if (filtered.filter((it) => it.toggleActionSelected && it.hasAction).length == 0) {\n selectAll = true;\n } else if (filtered.filter((it) => !it.toggleActionSelected && it.hasAction).length == 0) {\n selectAll = false;\n } else {\n selectAll = true;\n }\n\n badgeRequests.forEach((it) => {\n it.toggleActionSelected = false;\n });\n\n if (selectAll) {\n badgeRequests\n .filter((it) => it.hasAction)\n .forEach((it) => {\n if (filtered.find((f) => f.id == it.id)) {\n it.toggleActionSelected = true;\n }\n });\n }\n\n this.setState({ badgeRequests: [...badgeRequests], personsActionSelected: badgeRequests.filter((it) => it.toggleActionSelected).map((row) => row.personId) });\n };\n\n handleClearSelection = () => {\n const badgeRequests = this.state.badgeRequests;\n\n badgeRequests.forEach((it) => {\n it.toggleSkillProfileSelected = false;\n it.toggleEndorsedSelected = false;\n it.toggleActionSelected = false;\n it.toggleCertificateSelected = false;\n });\n\n this.setState({ badgeRequests: [...badgeRequests], personsSkillProfileSelected: [], personsEndorsedSelected: [], personsActionSelected: [], personsSubmitCertificateSelected: [] });\n };\n\n certifyProfile = (person) => {\n localStorage.setItem(\"showApprovedProfileOnly\", \"FALSE\");\n localStorage.setItem(\"profileType\", \"SelfAssessed\");\n localStorage.setItem(\"manageProfileByAdminPopup\", \"TRUE\");\n\n this.props.history.push(`/SfiaProfile/Certify?email=${person.email}`);\n };\n\n handleGenerateReport = () => {\n const badgeRequests = this.state.badgeRequests;\n\n badgeRequests.forEach((it) => {\n it.toggleSkillProfileSelected = !it.selfAssessedReportGenerated && it.percentage >= 1;\n it.toggleEndorsedSelected = !it.endorsedReportGenerated && it.hasEndorseProfile;\n it.toggleActionSelected = !it.actionReportGenerated && it.hasAction;\n });\n\n this.setState({\n modeGenerateReports: true,\n badgeRequests: [...badgeRequests],\n personsSkillProfileSelected: badgeRequests.filter((it) => it.toggleSkillProfileSelected).map((row) => row.personId),\n personsEndorsedSelected: badgeRequests.filter((it) => it.toggleEndorsedSelected).map((row) => row.personId),\n personsActionSelected: badgeRequests.filter((it) => it.toggleActionSelected).map((row) => row.personId),\n });\n };\n\n handleConfirmGenerateReport = () => {\n const { personsSkillProfileSelected, personsEndorsedSelected, personsActionSelected } = this.state;\n let personIds = [];\n\n personIds.push(...personsSkillProfileSelected);\n\n personsEndorsedSelected.forEach((it) => {\n if (!personIds.find((x) => x == it)) {\n personIds.push(it);\n }\n });\n\n personsActionSelected.forEach((it) => {\n if (!personIds.find((x) => x == it)) {\n personIds.push(it);\n }\n });\n\n this.setState({ loadingPrint: true });\n this.props.onAdminPerson\n .generateProfileReports({\n reportRequests: personIds.map((personId) => {\n return {\n personId,\n selfAssessedReport: personsSkillProfileSelected.find((it) => it == personId) ? true : false,\n endorsedReport: personsEndorsedSelected.find((it) => it == personId) ? true : false,\n actionReport: personsActionSelected.find((it) => it == personId) ? true : false,\n };\n }),\n })\n .then(() => {\n if (!this.props.loadingPrint) {\n if (this.props.printData) {\n FileDownload(this.props.printData, `SkillsTx_Persons_Profiles.zip`);\n this.handleClearSelection();\n this.handleRefresh();\n }\n }\n\n this.setState({ loadingPrint: this.props.loadingPrint, modeGenerateReports: false });\n });\n };\n\n handleCancelGenerateReport = () => {\n this.handleClearSelection();\n this.setState({ modeGenerateReports: false });\n };\n\n handleToggleAssignedToMe = () => {\n const filterAssignedToMe = this.state.filterAssignedToMe;\n let badgeRequests = this.reformBadgeRequests(this.props.badgeRequests);\n\n if (!filterAssignedToMe == true) {\n badgeRequests = badgeRequests.filter((it) => it.assessorId == this.props.personId);\n }\n\n badgeRequests.forEach((it) => {\n it.toggleSkillProfileSelected = !it.selfAssessedReportGenerated && it.percentage >= 1;\n it.toggleEndorsedSelected = !it.endorsedReportGenerated && it.hasEndorseProfile;\n it.toggleActionSelected = !it.actionReportGenerated && it.hasAction;\n });\n\n this.setState({\n filterAssignedToMe: !filterAssignedToMe,\n badgeRequests: [...badgeRequests],\n personsSkillProfileSelected: badgeRequests.filter((it) => it.toggleSkillProfileSelected).map((row) => row.personId),\n personsEndorsedSelected: badgeRequests.filter((it) => it.toggleEndorsedSelected).map((row) => row.personId),\n personsActionSelected: badgeRequests.filter((it) => it.toggleActionSelected).map((row) => row.personId),\n });\n };\n\n onTableFilterChange = (e, searchType) => {\n let columnSearchKeywords = this.state.columnSearchKeywords;\n if (!columnSearchKeywords) {\n columnSearchKeywords = [];\n }\n\n if (columnSearchKeywords.find((it) => it.name == e.target.name)) {\n let columnSearchKeyword = columnSearchKeywords.find((it) => it.name == e.target.name);\n columnSearchKeyword.value = e.target.value;\n } else {\n columnSearchKeywords.push({\n name: e.target.name,\n value: e.target.value,\n searchType,\n });\n }\n\n this.setState({ columnSearchKeywords });\n };\n\n submitCertificateProfile = (badgeRequest) => {\n if (window.confirm(`Are you sure?`)) {\n this.setState({ isUpdating: true });\n this.setState({ showLoadingPanel: true, loadingPanelHeader: \"Submit certificate\", loadingPanelBody: \"Please wait ...\" });\n this.props.onAdminBadgeRequest.submitBadgeRequestCertification(badgeRequest.id).then(() => {\n if (!this.props.badgeRequestUpdating) {\n if (this.props.badgeRequestError) {\n this.generateAlert(\"danger\", this.props.badgeRequestError.errData.Message);\n } else {\n this.generateAlert(\"success\", \"Certification badges submitted.\");\n }\n }\n\n this.setState({ isUpdating: this.props.badgeRequestUpdating, showLoadingPanel: this.props.badgeRequestUpdating });\n });\n }\n };\n\n handleTogleSubmitCertificate = () => {\n const modeSubmitCertificate = this.state.modeSubmitCertificate;\n\n if (modeSubmitCertificate) {\n this.handleClearSelection();\n }\n\n this.setState({\n modeSubmitCertificate: !modeSubmitCertificate,\n });\n };\n\n handleRowSubmitCertificateClick = (row) => {\n if (!this.state.loadingPrint) {\n const badgeRequests = this.state.badgeRequests;\n const updatedData = badgeRequests.find((it) => it.id == row.id);\n updatedData.toggleCertificateSelected = !updatedData.toggleCertificateSelected;\n\n this.setState({ badgeRequests: [...badgeRequests], personsSubmitCertificateSelected: badgeRequests.filter((it) => it.toggleCertificateSelected).map((row) => row.id) });\n }\n };\n\n handleSelectSubmitCertificateAll = () => {\n const { personId } = this.props;\n const { badgeRequests, searchKeyword, searchProperties, columnSearchKeywords } = this.state;\n let selectAll = false;\n\n const filtered = this.filterArray(badgeRequests, searchKeyword, searchProperties, columnSearchKeywords);\n\n if (filtered.filter((it) => it.toggleCertificateSelected && it.status == \"Approved\" && it.certificationSubmitted != true && it.assessorId && personId == it.assessorId).length == 0) {\n selectAll = true;\n } else if (filtered.filter((it) => !it.toggleCertificateSelected && it.status == \"Approved\" && it.certificationSubmitted != true && it.assessorId && personId == it.assessorId).length == 0) {\n selectAll = false;\n } else {\n selectAll = true;\n }\n\n badgeRequests.forEach((it) => {\n it.toggleCertificateSelected = false;\n });\n\n if (selectAll) {\n badgeRequests\n .filter((it) => it.status == \"Approved\" && it.certificationSubmitted != true && it.assessorId && personId == it.assessorId)\n .forEach((it) => {\n if (filtered.find((f) => f.id == it.id)) {\n it.toggleCertificateSelected = true;\n }\n });\n }\n\n this.setState({ badgeRequests: [...badgeRequests], personsSubmitCertificateSelected: badgeRequests.filter((it) => it.toggleCertificateSelected).map((row) => row.id) });\n };\n\n handleConfirmSubmitCertificates = () => {\n const { personsSubmitCertificateSelected } = this.state;\n\n this.setState({ isUpdating: true });\n this.setState({ showLoadingPanel: true, loadingPanelHeader: \"Submit certificates\", loadingPanelBody: \"Please wait ...\" });\n this.props.onAdminBadgeRequest.submitBadgeRequestCertifications(personsSubmitCertificateSelected).then(() => {\n if (!this.props.badgeRequestUpdating) {\n if (this.props.badgeRequestError) {\n this.generateAlert(\"danger\", this.props.badgeRequestError.errData.Message);\n } else {\n this.generateAlert(\"success\", \"Certification badges submitted.\");\n this.handleTogleSubmitCertificate();\n }\n }\n\n this.setState({ isUpdating: this.props.badgeRequestUpdating, showLoadingPanel: this.props.badgeRequestUpdating });\n });\n };\n\n renderLoadingPanel() {\n if (this.state.showLoadingPanel) {\n return (\n \n {this.state.loadingPanelHeader} \n \n \n \n );\n } else {\n return \"\";\n }\n }\n\n rejectBadgeRequest = (request) => {\n this.setState({\n selectedRequestToReject: request,\n updateBadgeRequest: false,\n showRejectBadgeConfirmation: true,\n });\n };\n\n togleRejectBadgesConfirmation = () => {\n const showRejectBadgeConfirmation = this.state.showRejectBadgeConfirmation;\n this.setState({ showRejectBadgeConfirmation: !showRejectBadgeConfirmation });\n };\n\n handleRejectBadgeRequest = () => {\n const selectedRequestToReject = this.state.selectedRequestToReject;\n this.setState({ isUpdating: true });\n this.props.onAdminBadgeRequest.rejectBadgeRequestCertification(selectedRequestToReject.id).then(() => {\n if (!this.props.badgeRequestUpdating) {\n if (this.props.badgeRequestError) {\n this.generateAlert(\"danger\", this.props.badgeRequestError.errData.Message);\n } else {\n this.generateAlert(\"success\", \"Badges request rejected.\");\n this.togleRejectBadgesConfirmation();\n this.props.onConfig.getContainerConfigWithoutLoading().then(() => {});\n }\n }\n\n this.setState({ isUpdating: this.props.badgeRequestUpdating });\n });\n };\n\n renderRejectBadgesConfirmation = () => {\n return (\n \n Reject badge request confirmation \n \n \n \n \n {\n this.handleRejectBadgeRequest();\n }}\n disabled={this.state.isUpdating}\n >\n Ok\n \n \n Cancel\n \n \n \n );\n };\n\n render() {\n const { personId, containerConfig } = this.props;\n const { badgeRequests, persons, searchKeyword, searchProperties, modeGenerateReports, modeSubmitCertificate, filterAssignedToMe, columnSearchKeywords } = this.state;\n const pageAssignments = this.props.pageAssignments;\n let pageAssignment = null;\n\n if (pageAssignments.find((it) => it.pageName == \"Manage SFIA Credentials and Reports\")) {\n pageAssignment = pageAssignments.find((it) => it.pageName == \"Manage SFIA Credentials and Reports\");\n }\n\n // const editProfile = this.editProfile;\n const certifyProfile = this.certifyProfile;\n const rejectBadgeRequest = this.rejectBadgeRequest;\n const submitCertificateProfile = this.submitCertificateProfile;\n const generateAlert = this.generateAlert;\n const handleSelectSkillProfileAll = this.handleSelectSkillProfileAll;\n const handleRowSkillProfileClick = this.handleRowSkillProfileClick;\n\n const handleSelectEndorsedAll = this.handleSelectEndorsedAll;\n const handleRowEndorsedClick = this.handleRowEndorsedClick;\n\n const handleSelectActionAll = this.handleSelectActionAll;\n const handleRowActionClick = this.handleRowActionClick;\n\n const handleSelectSubmitCertificateAll = this.handleSelectSubmitCertificateAll;\n const handleRowSubmitCertificateClick = this.handleRowSubmitCertificateClick;\n\n const onTableFilterChange = this.onTableFilterChange;\n const loadingPrint = this.state.loadingPrint;\n\n const selectableRows = false;\n const filtered = this.filterArray(badgeRequests, searchKeyword, searchProperties, columnSearchKeywords);\n\n // const allowEdit = pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Edit\" && op.allow == true) ? true : false;\n const allowEdit = false;\n const allowApprove = pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Approve\" && op.allow == true) ? true : false;\n const allowSubmitCertificate = containerConfig && containerConfig.badgeProvider == \"DSA\" && pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Approve\" && op.allow == true) ? true : false;\n const allowReject = pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Reject\" && op.allow == true) ? true : false;\n const allowAssignAssessor = pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Assign Assessor\" && op.allow == true) ? true : false;\n const allowGenerateReports = pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Generate Reports\" && op.allow == true) ? true : false;\n\n const lastSubmittedSort = (rowA, rowB) => {\n let lastUpdatedA = rowA.submitDate ? rowA.submitDate.toString().replaceAll(\"-\", \"\").replaceAll(\":\", \"\").replace(\"T\", \"\") : \"\";\n let lastUpdatedB = rowB.submitDate ? rowB.submitDate.toString().replaceAll(\"-\", \"\").replaceAll(\":\", \"\").replace(\"T\", \"\") : \"\";\n\n if (lastUpdatedA > lastUpdatedB) {\n return 1;\n }\n\n if (lastUpdatedB > lastUpdatedA) {\n return -1;\n }\n\n return 0;\n };\n\n const lastAssessedSort = (rowA, rowB) => {\n let lastReviewedA = rowA.assessedDate ? rowA.assessedDate.toString().replaceAll(\"-\", \"\").replaceAll(\":\", \"\").replace(\"T\", \"\") : \"\";\n let lastReviewedB = rowB.assessedDate ? rowB.assessedDate.toString().replaceAll(\"-\", \"\").replaceAll(\":\", \"\").replace(\"T\", \"\") : \"\";\n\n if (lastReviewedA > lastReviewedB) {\n return 1;\n }\n\n if (lastReviewedB > lastReviewedA) {\n return -1;\n }\n\n return 0;\n };\n\n const columns = [\n {\n id: \"idSkillProfile\",\n name: (\n \n \n \n Self-assessed\n \n
\n ),\n selector: (row) => row.id,\n sortable: false,\n width: \"3%\",\n center: true,\n format: function (row, index) {\n return {row.percentage >= 1 &&
;\n },\n omit: !modeGenerateReports,\n },\n {\n id: \"idEndorsedProfile\",\n name: (\n \n \n \n Endorsed\n \n
\n ),\n selector: (row) => row.id,\n sortable: false,\n width: \"3%\",\n center: true,\n format: function (row, index) {\n return {row.hasEndorseProfile &&
;\n },\n omit: !modeGenerateReports,\n },\n {\n id: \"idActionPlan\",\n name: (\n \n \n \n Action Plan\n \n
\n ),\n selector: (row) => row.id,\n sortable: false,\n width: \"3%\",\n center: true,\n format: function (row, index) {\n return {row.hasAction &&
;\n },\n omit: !modeGenerateReports,\n },\n {\n id: \"certificationSubmitted\",\n name: (\n \n
\n ),\n selector: (row) => row.id,\n sortable: false,\n width: \"5%\",\n center: true,\n format: function (row, index) {\n return (\n \n {row.status == \"Approved\" && row.certificationSubmitted != true && row.assessorId && personId == row.assessorId && (\n
\n );\n },\n omit: !modeSubmitCertificate,\n },\n {\n id: \"id\",\n name: \"Action\",\n selector: (row) => row.id,\n sortable: true,\n width: \"6%\",\n center: true,\n format: function (row, index) {\n return (\n \n {/* {allowEdit && (\n \n editProfile(row)} />\n \n Edit\n \n \n )} */}\n {allowApprove && (row.status == \"Not Assessed\" || (row.status == \"Assessed\" && !row.certificationSubmitted)) && row.assessorId && personId == row.assessorId && (\n \n certifyProfile(row)} />\n \n Certify\n \n \n )}\n {allowReject && row.status != \"Approved\" && (\n \n rejectBadgeRequest(row)} />\n \n Reject\n \n \n )}\n {allowSubmitCertificate && row.status == \"Approved\" && !row.certificationSubmitted && row.assessorId && personId == row.assessorId && (\n \n submitCertificateProfile(row)} />\n \n Submit certificate\n \n \n )}\n
\n );\n },\n omit: !(allowEdit || allowApprove),\n },\n {\n id: \"email\",\n name: (\n \n Person Name (email)\n
\n ),\n selector: (row) => row.email,\n sortable: true,\n width: allowEdit || allowApprove ? (modeGenerateReports ? \"27%\" : modeSubmitCertificate ? \"31%\" : \"36%\") : modeGenerateReports ? \"33%\" : modeSubmitCertificate ? \"37%\" : \"42%\",\n center: false,\n format: function (row, index) {\n return {`${row.firstName} ${row.lastName} (${row.email})`} ;\n },\n },\n {\n id: \"submitDate\",\n name: \"Request submitted\",\n selector: (row) => row.submitDate,\n sortable: true,\n sortFunction: lastSubmittedSort,\n width: \"15%\",\n center: false,\n format: function (row, index) {\n return (\n \n {`${new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(row.submitDate))}`}\n \n );\n },\n },\n {\n id: \"status\",\n name: (\n \n Status\n
\n ),\n selector: (row) => row.status,\n sortable: true,\n width: \"13%\",\n center: false,\n wrap: true,\n format: function (row, index) {\n return row.status;\n },\n },\n {\n id: \"assessorName\",\n name: (\n \n Assessor Name\n
\n ),\n selector: (row) => row.assessorName,\n sortable: true,\n width: \"15%\",\n center: false,\n wrap: true,\n format: function (row, index) {\n let adminPersons = [...persons.filter((it) => it.roles.some((it) => it.role == \"Admin\"))];\n\n return allowAssignAssessor && row.status != \"Assessed\" && row.status != \"Approved\" ? (\n \n {`${new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(row.assessedDate))}`}\n \n );\n } else {\n return \"\";\n }\n },\n },\n ];\n\n return (\n \n {this.renderLoadingPanel()}\n {this.renderRejectBadgesConfirmation()}\n \n
\n ) : (\n \n \n {this.props.containerConfig && (\n \n {`You have ${this.props.containerConfig.certificationCredit} certify credits available`} \n ) : this.props.containerConfig.certificationCredit && this.props.containerConfig.certificationCredit > 0 ? (\n \n {`You have ONLY ${this.props.containerConfig.certificationCredit} certify credits available.`}\n \n ) : (\n \n Your credits have been exhausted, no more Certify requests can be accepted but you can process the requests that are outstanding.\n \n )}\n \n
\n )}\n \n {\n this.handleClearSelection();\n this.setState({ searchKeyword, personsSkillProfileSelected: [] });\n }}\n >\n \n {\n this.handleClearSelection();\n this.setState({ searchKeyword: \"\", personsSkillProfileSelected: [] });\n }}\n >\n \n \n \n {filterAssignedToMe ? \"Show all\" : \"Assigned to me\"}\n \n {allowGenerateReports && (\n \n \n \n \n )}\n {modeGenerateReports && (\n \n \n \n {!this.state.loadingPrint ? \"OK\" : \n Cancel\n \n \n )}\n {allowSubmitCertificate && (\n \n \n \n \n )}\n {modeSubmitCertificate && (\n \n \n \n {!this.state.loadingPrint ? \"OK\" : \n Cancel\n \n \n )}\n \n
\n
\n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n error: state.auth.error,\n personId: state.auth.personId,\n email: state.auth.email,\n loginWithTeams: state.auth.loginWithTeams,\n\n personsLoading: state.adminPerson.loading,\n personsError: state.adminPerson.error,\n persons: state.adminPerson.persons,\n\n badgeRequestLoading: state.adminBadgeRequest.loading,\n badgeRequestError: state.adminBadgeRequest.error,\n badgeRequests: state.adminBadgeRequest.badgeRequests,\n isUpdating: state.adminBadgeRequest.isUpdating,\n\n badgeRequestUpdating: state.adminBadgeRequest.isUpdating,\n\n loadingPrint: state.adminPerson.loadingPrint,\n printData: state.adminPerson.printData,\n\n pageAssignments: state.adminPerson.pageAssignments,\n containerConfig: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onAdminPerson: bindActionCreators(adminPersonActions, dispatch),\n onAdminBadgeRequest: bindActionCreators(adminBadgeRequestActions, dispatch),\n onPerson: bindActionCreators(personActions, dispatch),\n onSkillProfile: bindActionCreators(skillProfileActions, dispatch),\n onConfig: bindActionCreators(configActions, dispatch),\n };\n};\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(ManageSfiaCredentials));\n","import * as categoryActions from \"../../../store/actions/categoryAction\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Form, FormGroup, Label, ListGroup, ListGroupItem, Modal, ModalBody, ModalFooter, ModalHeader, Row } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\n\nclass SkillAttributeBulkUpload extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n showDialog: false,\n selectedFiles: [],\n isImporting: false,\n importMessage: null,\n };\n\n this.excelRef = React.createRef();\n }\n\n componentDidMount() {}\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n }\n }\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.excelRef.current.value = null;\n this.setState({ showDialog: !showDialog, selectedFiles: [] });\n };\n\n handleDownloadTemplate = () => {\n this.props.onCategory.exportSkillAttributesDataExcelTemplate().then(() => {\n if (!this.props.loadingExport && !this.props.categoryError) {\n if (this.props.exportData) {\n FileDownload(this.props.exportData, `UploadAttributesTemplate.xlsx`);\n }\n }\n });\n };\n\n handleSelectFiles = () => {\n this.excelRef.current.click();\n };\n\n handleSelectExcels = (event) => {\n const selectedFiles = this.state.selectedFiles;\n\n if (event.target.files && event.target.files.length > 0) {\n this.setState({ selectedFiles: [...selectedFiles, ...event.target.files] });\n }\n };\n\n handlePerformUpload = () => {\n this.setState({ isImporting: true });\n this.props.onCategory.importSkillAttributesDataExcel(this.state.selectedFiles).then(() => {\n if (!this.props.isImporting) {\n if (!this.props.categoryError) {\n this.excelRef.current.value = null;\n\n this.props.generateAlert(\"success\", \"Import skill attributes success.\");\n this.togleDialogModal();\n this.props.handleImportSuccess();\n } else {\n this.props.generateAlert(\"danger\", this.props.categoryError.errData.Message);\n }\n }\n\n this.setState({ isImporting: this.props.isImporting });\n });\n };\n\n render() {\n const { selectedFiles } = this.state;\n\n return (\n \n \n Import Skill Attributes \n \n \n \n \n {\n this.handlePerformUpload();\n }}\n disabled={selectedFiles.length == 0 || this.state.isImporting}\n >\n Process Upload\n \n \n Close\n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n categoryError: state.category.error,\n loadingExport: state.category.loadingExport,\n exportData: state.category.exportData,\n\n isImporting: state.category.isImporting,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onCategory: bindActionCreators(categoryActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(SkillAttributeBulkUpload);\n","import * as categoryActions from \"../../../store/actions/categoryAction\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Form, FormGroup, Label, ListGroup, ListGroupItem, Modal, ModalBody, ModalFooter, ModalHeader, Row } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\n\nclass SkillsHiddenBulkUpload extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n showDialog: false,\n selectedFile: null,\n isImporting: false,\n importMessage: null,\n };\n\n this.excelRef = React.createRef();\n }\n\n componentDidMount() {}\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n }\n }\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.excelRef.current.value = null;\n this.setState({ showDialog: !showDialog, selectedFile: null });\n };\n\n handleSelectFiles = () => {\n this.excelRef.current.click();\n };\n\n handleSelectExcels = (event) => {\n if (event.target.files && event.target.files.length > 0) {\n this.setState({ selectedFile: event.target.files[0] });\n }\n };\n\n handlePerformUpload = () => {\n this.setState({ isImporting: true });\n this.props.onCategory.importSkillsHiddenDataExcel(this.state.selectedFile).then(() => {\n if (!this.props.isImporting) {\n if (!this.props.categoryError) {\n this.excelRef.current.value = null;\n\n this.props.generateAlert(\"success\", \"Import skills hidden data success.\");\n this.togleDialogModal();\n this.props.handleImportSuccess();\n } else {\n this.props.generateAlert(\"danger\", this.props.categoryError.errData.Message);\n }\n }\n\n this.setState({ isImporting: this.props.isImporting });\n });\n };\n\n render() {\n const { selectedFile } = this.state;\n\n return (\n \n \n Import Skills Hidden Data \n \n \n \n \n {\n this.handlePerformUpload();\n }}\n disabled={!selectedFile || this.state.isImporting}\n >\n Process Upload\n \n \n Close\n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n categoryError: state.category.error,\n loadingExport: state.category.loadingExport,\n exportData: state.category.exportData,\n\n isImporting: state.category.isImporting,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onCategory: bindActionCreators(categoryActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(SkillsHiddenBulkUpload);\n","import * as authActions from \"../../../store/actions/authAction\";\nimport * as categoryActions from \"../../../store/actions/categoryAction\";\nimport { dismisAlert, generateAlert } from \"../../../utils/alertUtils\";\nimport { ContentWrapperLg } from \"../../common/ContentWrapperLg\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport SkillAttributeBulkUpload from \"./SkillAttributeBulkUpload\";\nimport SkillsHiddenBulkUpload from \"./SkillsHiddenBulkUpload\";\nimport { faPenToSquare, faPlus, faFileExcel, faEdit, faMinusCircle, faChevronLeft } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { Button, ButtonGroup, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalHeader, Row, Spinner, Table, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nconst headerStyle = {\n color: \"#2B2B2B\",\n fontSize: \"28px\",\n fontFamily: \"IBMPlexSans-Bold\",\n};\n\nconst rowStyle = {\n fontSize: \"12px\",\n};\n\nconst buttonStyle = {\n marginLeft: \"10px\",\n};\n\nconst manageAttributeWrapper = {\n width: \"100%\",\n maxWidth: \"100%\",\n fontSize: \"11px\",\n};\n\nclass ManageSkillAttributes extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: null,\n loading: true,\n alerts: [],\n categories: [],\n editMode: false,\n editedCategoryId: null,\n editedCategory: null,\n editedSubCategoryId: null,\n editedSubCategory: null,\n editedSkill: null,\n editAttribute: false,\n editedAttribute: null,\n optionHidden: [\n { label: \"Yes\", value: true },\n { label: \"No\", value: false },\n ],\n skillAttributeIsUpdating: false,\n showDialogImportTs: null,\n showDialogImportSkillTs: null,\n showLoadingPanel: false,\n };\n\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.editSkillAnchor = React.createRef();\n }\n\n scroll(ref) {\n ref.current.scrollIntoView({ behavior: \"smooth\" });\n }\n\n componentDidMount() {\n this.props.onAuth.authCheckState().then(() => {\n this.props.onCategory.getCategories(true, null).then(() => {\n if (!(this.props.loading || this.props.categoryLoading)) {\n this.setState({ categories: this.props.categories });\n }\n\n this.setState({ loading: this.props.loading || this.props.categoryLoading });\n });\n });\n }\n\n pad2 = (n) => {\n return (n < 10 ? \"0\" : \"\") + n;\n };\n\n handleExportAttributes = () => {\n this.props.onCategory.exportSkillAttributesDataExcel().then(() => {\n if (!this.props.loadingExport && !this.props.categoryError) {\n if (this.props.exportData) {\n var today = new Date();\n var strToday = today.getFullYear() + this.pad2(today.getMonth() + 1) + this.pad2(today.getDate()) + \"_\" + this.pad2(today.getHours()) + this.pad2(today.getMinutes()) + this.pad2(today.getSeconds());\n FileDownload(this.props.exportData, `ExportAttributes_${strToday}.xlsx`);\n }\n }\n });\n };\n\n handleExportSkillsHidden = () => {\n this.props.onCategory.exportSkillsHiddenDataExcel().then(() => {\n if (!this.props.loadingExport && !this.props.categoryError) {\n if (this.props.exportData) {\n var today = new Date();\n var strToday = today.getFullYear() + this.pad2(today.getMonth() + 1) + this.pad2(today.getDate()) + \"_\" + this.pad2(today.getHours()) + this.pad2(today.getMinutes()) + this.pad2(today.getSeconds());\n FileDownload(this.props.exportData, `ExportSkillsHiddenData_${strToday}.xlsx`);\n }\n }\n });\n };\n\n handleImportSkillsHidden = () => {\n this.setState({ showDialogImportSkillTs: new Date() });\n };\n\n handleImportSkillsHiddenSuccess = () => {\n this.props.onCategory.getCategories(true, null).then(() => {\n if (!(this.props.loading || this.props.categoryLoading)) {\n this.setState({ categories: this.props.categories });\n }\n\n this.setState({ loading: this.props.loading || this.props.categoryLoading });\n });\n };\n\n openEditSkillAttribute = (categoryId, subCategoryId, skill) => {\n const { categories } = this.state;\n\n const category = categories.find((it) => it.id == categoryId);\n const subCategory = category ? category.subCategories.find((it) => it.id == subCategoryId) : null;\n this.setState({\n editMode: true,\n editedCategoryId: categoryId,\n editedCategory: category,\n editedSubCategoryId: subCategoryId,\n editedSubCategory: subCategory,\n editedSkill: {\n id: skill.id,\n name: skill.name,\n skillsCode: skill.skillsCode,\n description: skill.description,\n levels: [...skill.levels],\n attributes: [...skill.attributes],\n },\n });\n setTimeout(() => {\n this.scroll(this.editSkillAnchor);\n }, 200);\n };\n\n handleBackToList = () => {\n this.setState({ editMode: false });\n };\n\n handleAddNewAttribute = () => {\n this.setState({ editAttribute: true, editedAttribute: { id: null, attribute: null, link: null, isHidden: false } });\n };\n\n handleEditAttribute = (attribute) => {\n this.setState({\n editAttribute: true,\n editedAttribute: {\n id: attribute.id,\n attribute: attribute.attribute,\n link: attribute.link,\n isHidden: attribute.isHidden,\n },\n });\n };\n\n cancelUpdateAttribute = () => {\n this.setState({ editAttribute: false, editedAttribute: null });\n };\n\n handleChangeAttribute = (event) => {\n const { editedAttribute } = this.state;\n let { name, value } = event.target;\n\n if (name == \"attribute\") {\n editedAttribute.attribute = value;\n } else if (name == \"link\") {\n editedAttribute.link = value;\n } else if (name == \"isHidden\") {\n editedAttribute.isHidden = value;\n }\n\n this.setState({ editedAttribute });\n };\n\n handleSaveAttribute = () => {\n const { editedAttribute, editedCategoryId, editedSubCategoryId, editedSkill } = this.state;\n if (editedAttribute.id) {\n this.setState({ skillAttributeIsUpdating: true });\n\n this.props.onCategory\n .updateSkillAttribute(editedCategoryId, editedSubCategoryId, editedSkill.id, editedAttribute.id, {\n attribute: editedAttribute.attribute,\n link: editedAttribute.link,\n isHidden: editedAttribute.isHidden,\n })\n .then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.categoryError) {\n this.generateAlert(\"success\", \"Update attribute success.\");\n this.setState({ editAttribute: false, editedAttribute: null });\n } else {\n this.generateAlert(\"danger\", this.props.categoryError.errData.Message);\n }\n }\n\n this.setState({ skillAttributeIsUpdating: this.props.isUpdating });\n });\n } else {\n this.setState({ skillAttributeIsUpdating: true });\n\n this.props.onCategory\n .addSkillAttribute(editedCategoryId, editedSubCategoryId, editedSkill.id, {\n attribute: editedAttribute.attribute,\n link: editedAttribute.link,\n isHidden: editedAttribute.isHidden,\n })\n .then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.categoryError) {\n this.generateAlert(\"success\", \"Add attribute success.\");\n this.setState({ editAttribute: false, editedAttribute: null });\n const categories = this.props.categories;\n const category = categories.find((it) => it.id == editedCategoryId);\n if (category) {\n const subCategory = category.subCategories.find((it) => it.id == editedSubCategoryId);\n if (subCategory) {\n const skill = subCategory.skills.find((it) => it.id == editedSkill.id);\n if (skill) {\n editedSkill.attributes = [...skill.attributes];\n }\n }\n }\n this.setState({ editedSkill });\n } else {\n this.generateAlert(\"danger\", this.props.categoryError.errData.Message);\n }\n }\n\n this.setState({ skillAttributeIsUpdating: this.props.isUpdating });\n });\n }\n };\n\n handleDeleteAttribute = (attribute) => {\n const { editedCategoryId, editedSubCategoryId, editedSkill } = this.state;\n this.setState({ skillAttributeIsUpdating: true });\n\n this.props.onCategory.deleteSkillAttribute(editedCategoryId, editedSubCategoryId, editedSkill.id, attribute.id).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.categoryError) {\n this.generateAlert(\"success\", \"Delete attribute success.\");\n const categories = this.props.categories;\n const category = categories.find((it) => it.id == editedCategoryId);\n if (category) {\n const subCategory = category.subCategories.find((it) => it.id == editedSubCategoryId);\n if (subCategory) {\n const skill = subCategory.skills.find((it) => it.id == editedSkill.id);\n if (skill) {\n editedSkill.attributes = [...skill.attributes];\n }\n }\n }\n this.setState({ editedSkill });\n } else {\n this.generateAlert(\"danger\", this.props.categoryError.errData.Message);\n }\n }\n\n this.setState({ skillAttributeIsUpdating: this.props.isUpdating });\n });\n };\n\n handleImportAttributes = () => {\n this.setState({ showDialogImportTs: new Date() });\n };\n\n handleImportSuccess = () => {\n this.props.onCategory.getCategories(true, null).then(() => {\n if (!(this.props.loading || this.props.categoryLoading)) {\n this.setState({ categories: this.props.categories });\n }\n\n this.setState({ loading: this.props.loading || this.props.categoryLoading });\n });\n };\n\n handleHideSkill = (categoryId, subCategoryId, skill) => {\n this.setState({ showLoadingPanel: true, loadingPanelHeader: null, loadingPanelBody: \"Please wait ...\" });\n this.props.onCategory.updateSkillSetIsHidden(categoryId, subCategoryId, skill.id, !skill.isHidden).then(() => {\n this.setState({ showLoadingPanel: this.props.isUpdating });\n });\n };\n\n renderLoadingPanel() {\n if (this.state.showLoadingPanel) {\n return (\n \n {this.state.loadingPanelHeader && {this.state.loadingPanelHeader} }\n \n \n \n );\n } else {\n return \"\";\n }\n }\n\n render() {\n const pageAssignments = this.props.pageAssignments;\n const pageAssignment = pageAssignments.find((it) => it.pageName == \"Manage Skills and Attributes\");\n\n const { categories, editedCategory, editedSubCategory, editedSkill } = this.state;\n\n const handleEditAttribute = this.handleEditAttribute;\n const handleDeleteAttribute = this.handleDeleteAttribute;\n\n const columns = [\n {\n id: \"attribute\",\n name: \"Attribute\",\n selector: (row) => row.attribute,\n sortable: true,\n width: \"30%\",\n },\n {\n id: \"link\",\n name: \"Link\",\n selector: (row) => row.link,\n sortable: true,\n width: \"40%\",\n wrap: true,\n // formatter: function (value, row, index) {\n // return value;\n // },\n },\n {\n id: \"isHidden\",\n name: \"Is Hidden\",\n selector: (row) => row.isHidden,\n sortable: true,\n width: \"15%\",\n format: function (row, index) {\n return row.isHidden ? \"Yes\" : \"No\";\n },\n },\n {\n id: \"id\",\n selector: (row) => row.id,\n sortable: false,\n width: \"15%\",\n center: true,\n format: function (row, index) {\n return (\n \n handleEditAttribute(row)} />\n \n Edit Attribute\n \n \n {!(row.accountSkillAttributes && row.accountSkillAttributes.length > 0) && (\n \n handleDeleteAttribute(row)} />\n \n Delete Attribute\n \n \n \n )}\n
\n );\n },\n },\n ];\n\n return (\n \n \n
\n ) : !this.state.editMode ? (\n \n \n \n Manage Skills and Attributes\n
\n \n \n \n \n )}\n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Import\" && op.allow == true) && (\n \n \n \n )}\n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Export\" && op.allow == true) && (\n \n \n \n )}\n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Import\" && op.allow == true) && (\n \n
\n \n
\n \n {categories.map((category, index) => {\n return (\n \n \n \n \n {category.name}\n \n \n \n \n \n \n \n {category.subCategories.map((subCategory, index) => {\n return (\n \n \n \n {subCategory.name}\n \n \n \n Skill Is Shown\n \n \n {subCategory.skills.map((skill, elIndex) => {\n return (\n \n \n \n \n \n {skill.name}\n \n \n
\n \n \n \n {skill.skillsCode}\n \n \n op.operation == \"Edit\" && op.allow == true) ? \"1\" : \"3\"}>\n {skill &&\n skill.attributes &&\n skill.attributes.length > 0 &&\n skill.attributes\n .sort((a, b) => a.attribute > b.attribute)\n .map((it, index) => {\n return (\n \n {index > 0 && \", \"}\n {it.attribute}\n \n );\n })}\n \n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Edit\" && op.allow == true) && (\n \n \n \n skill.isHidden && this.handleHideSkill(category.id, subCategory.id, skill)}\n >\n !skill.isHidden && this.handleHideSkill(category.id, subCategory.id, skill)}\n >\n \n \n \n this.openEditSkillAttribute(category.id, subCategory.id, skill)}>\n \n \n \n )}\n \n );\n })}\n \n );\n })}\n \n \n \n \n );\n })}\n
\n \n \n ) : (\n \n \n \n Update Skill Attributes\n
\n \n \n
\n \n
\n \n \n \n Category \n {editedCategory && editedCategory.name} \n \n \n Sub Category \n {editedSubCategory && editedSubCategory.name} \n \n \n Skill \n {editedSkill && editedSkill.name} \n \n \n Skill Code \n {editedSkill && editedSkill.skillsCode} \n \n \n
\n \n \n \n \n \n
\n a.attribute > b.attribute)} pagination={false}> \n
\n \n {this.state.editAttribute && (\n
\n \n )}\n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n error: state.auth.error,\n authPersonId: state.auth.personId,\n\n categories: state.category.categories,\n isUpdating: state.category.isUpdating,\n categoryError: state.category.error,\n categoryLoading: state.category.loading,\n exportData: state.category.exportData,\n loadingExport: state.category.loadingExport,\n pageAssignments: state.adminPerson.pageAssignments,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onCategory: bindActionCreators(categoryActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ManageSkillAttributes);\n","import * as authActions from \"../../../store/actions/authAction\";\nimport * as configActions from \"../../../store/actions/configAction\";\nimport changeInput from \"../../../utils/changeInput\";\nimport { ContentWrapperLg } from \"../../common/ContentWrapperLg\";\nimport { dismisAlert, generateAlert } from \"./../../../utils/alertUtils\";\nimport { faRotate, faXmark, faCircleXmark, faCopy } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { Button, ButtonGroup, Col, Form, FormGroup, Input, Label, Row, Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\nconst apiHostname = process.env.REACT_APP_API_ENDPOINT;\n\nconst headerStyle = {\n color: \"#2B2B2B\",\n fontSize: \"18px\",\n fontFamily: \"IBMPlexSans-Bold\",\n};\n\nconst rowStyle = {\n fontSize: \"12px\",\n};\n\nclass ManageSSOSetting extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: null,\n loading: true,\n alerts: [],\n config: null,\n isUpdating: false,\n formDirty: false,\n ssoIPCertificateKeyVaultFiles: null,\n };\n\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.ipCertFileRef = React.createRef();\n }\n\n componentDidMount() {\n this.setState({ loading: true });\n\n this.props.onAuth.authCheckState().then(() => {\n this.props.onConfig.getContainerAppSetting().then(() => {\n const form = this.prepareForm(this.props.containerAppSetting);\n this.setState({ containerAppSetting: this.props.containerAppSetting, form, isFormValid: true, loading: this.props.configLoading });\n });\n });\n }\n\n prepareForm = (containerAppSetting) => {\n if (containerAppSetting) {\n return {\n ssoSamlEnable: {\n validation: {\n required: true,\n },\n value: containerAppSetting && containerAppSetting.SsoSamlEnable ? containerAppSetting.SsoSamlEnable : \"FALSE\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n ssoSamlEntityId: {\n validation: {\n required: containerAppSetting && containerAppSetting.SsoSamlEnable == \"TRUE\" ? true : false,\n },\n value: containerAppSetting && containerAppSetting.SsoSamlEntityId,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n restrictLoginSSOOnly: {\n validation: {\n required: true,\n },\n value: containerAppSetting && containerAppSetting.RestrictLoginSsoOnly ? containerAppSetting.RestrictLoginSsoOnly : \"FALSE\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n byPassLoginPage: {\n validation: {\n required: true,\n },\n value: containerAppSetting && containerAppSetting.ByPassLoginPage ? containerAppSetting.ByPassLoginPage : \"FALSE\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n ssoSamlIpConfigurationOption: {\n validation: {\n required: containerAppSetting && containerAppSetting.SsoSamlEnable == \"TRUE\" ? true : false,\n },\n value: containerAppSetting && containerAppSetting.SsoSamlIpConfigurationOption ? containerAppSetting.SsoSamlIpConfigurationOption : \"AUTO\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n ssoSamlIpMetadataAddress: {\n validation: {\n required: containerAppSetting && containerAppSetting.SsoSamlEnable == \"TRUE\" ? (containerAppSetting && containerAppSetting.SsoSamlIpConfigurationOption ? containerAppSetting.SsoSamlIpConfigurationOption : \"AUTO\" == \"AUTO\" ? true : false) : false,\n },\n value: containerAppSetting && containerAppSetting.SsoSamlIpMetadataAddress,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n ssoSamlIpEntityId: {\n validation: {\n required: containerAppSetting && containerAppSetting.SsoSamlEnable == \"TRUE\" ? (containerAppSetting && containerAppSetting.SsoSamlIpConfigurationOption ? containerAppSetting.SsoSamlIpConfigurationOption : \"AUTO\" == \"MANUAL\" ? true : false) : false,\n },\n value: containerAppSetting && containerAppSetting.SsoSamlIpEntityId,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n ssoSamlIpSingleSignOnEndpoint: {\n validation: {\n required: containerAppSetting && containerAppSetting.SsoSamlEnable == \"TRUE\" ? (containerAppSetting && containerAppSetting.SsoSamlIpConfigurationOption ? containerAppSetting.SsoSamlIpConfigurationOption : \"AUTO\" == \"MANUAL\" ? true : false) : false,\n },\n value: containerAppSetting && containerAppSetting.SsoSamlIpSingleSignonEndpoint,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n ssoSamlIpCertificateKeyVaultName: {\n validation: {\n required: containerAppSetting && containerAppSetting.SsoSamlEnable == \"TRUE\" ? (containerAppSetting && containerAppSetting.SsoSamlIpConfigurationOption ? containerAppSetting.SsoSamlIpConfigurationOption : \"AUTO\" == \"MANUAL\" ? true : false) : false,\n },\n value: containerAppSetting && containerAppSetting.SsoSamlIpCertificateKeyVaultName,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n ssoSamlClaimEmailAddressType: {\n validation: {\n required: containerAppSetting && containerAppSetting.SsoSamlEnable == \"TRUE\" ? true : false,\n },\n value: containerAppSetting && containerAppSetting.SsoSamlClaimEmailaddressType,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n };\n } else {\n return null;\n }\n };\n\n handleIPFileSelected = (event) => {\n const files = Array.from(event.target.files);\n this.setState({ ssoIPCertificateKeyVaultFiles: files });\n };\n\n ClearIPSelectedFile = () => {\n this.ipCertFileRef.current.value = null;\n this.setState({ ssoIPCertificateKeyVaultFiles: null });\n };\n\n handleChange = (event) => {\n const { containerConfig, containerAppSetting } = this.props;\n const { name, value } = event.target;\n\n if (name == \"ssoCertificateKeyVaultPassword\") {\n this.setState({ ssoCertificateKeyVaultPassword: value });\n } else {\n let form = this.state.form;\n if (name == \"ssoSamlEnable\") {\n form.ssoSamlEntityId.validation.required = value == \"TRUE\";\n form.ssoSamlClaimEmailAddressType.validation.required = value == \"TRUE\";\n\n if (form.ssoSamlIpConfigurationOption.value == \"AUTO\") {\n form.ssoSamlIpMetadataAddress.validation.required = value == \"TRUE\";\n\n form.ssoSamlIpEntityId.validation.required = false;\n form.ssoSamlIpSingleSignOnEndpoint.validation.required = false;\n form.ssoSamlIpCertificateKeyVaultName.validation.required = false;\n } else {\n form.ssoSamlIpMetadataAddress.validation.required = false;\n\n form.ssoSamlIpEntityId.validation.required = value == \"TRUE\";\n form.ssoSamlIpSingleSignOnEndpoint.validation.required = value == \"TRUE\";\n form.ssoSamlIpCertificateKeyVaultName.validation.required = value == \"TRUE\";\n }\n }\n\n let updateState = changeInput(form, name, value);\n\n if (name == \"ssoSamlEnable\") {\n if (value == \"TRUE\") {\n updateState = changeInput(updateState.form, \"ssoSamlIpMetadataAddress\", form.ssoSamlIpMetadataAddress.value ? form.ssoSamlIpMetadataAddress.value : containerConfig ? containerConfig.defaultSsoSamlIpMetadataAddress : \"\");\n updateState = changeInput(updateState.form, \"ssoSamlIpEntityId\", form.ssoSamlIpEntityId.value ? form.ssoSamlIpEntityId.value : \"\");\n updateState = changeInput(updateState.form, \"ssoSamlIpSingleSignOnEndpoint\", form.ssoSamlIpSingleSignOnEndpoint.value ? form.ssoSamlIpSingleSignOnEndpoint.value : \"\");\n updateState = changeInput(updateState.form, \"ssoSamlIpCertificateKeyVaultName\", form.ssoSamlIpCertificateKeyVaultName.value ? form.ssoSamlIpCertificateKeyVaultName.value : \"\");\n\n updateState = changeInput(updateState.form, \"ssoSamlEntityId\", form.ssoSamlEntityId.value ? form.ssoSamlEntityId.value : containerConfig ? `${containerConfig.defaultBaseUrl}saml` : \"\");\n updateState = changeInput(updateState.form, \"ssoSamlClaimEmailAddressType\", form.ssoSamlClaimEmailAddressType.value ? form.ssoSamlClaimEmailAddressType.value : \"http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress\");\n } else {\n updateState = changeInput(updateState.form, \"ssoSamlIpMetadataAddress\", form.ssoSamlIpMetadataAddress.value ? form.ssoSamlIpMetadataAddress.value : \"\");\n updateState = changeInput(updateState.form, \"ssoSamlIpEntityId\", form.ssoSamlIpEntityId.value ? form.ssoSamlIpEntityId.value : \"\");\n updateState = changeInput(updateState.form, \"ssoSamlIpSingleSignOnEndpoint\", form.ssoSamlIpSingleSignOnEndpoint.value ? form.ssoSamlIpSingleSignOnEndpoint.value : \"\");\n updateState = changeInput(updateState.form, \"ssoSamlIpCertificateKeyVaultName\", form.ssoSamlIpCertificateKeyVaultName.value ? form.ssoSamlIpCertificateKeyVaultName.value : \"\");\n\n updateState = changeInput(updateState.form, \"ssoSamlEntityId\", form.ssoSamlEntityId.value ? form.ssoSamlEntityId.value : \"\");\n updateState = changeInput(updateState.form, \"ssoSamlClaimEmailAddressType\", form.ssoSamlClaimEmailAddressType.value ? form.ssoSamlClaimEmailAddressType.value : \"\");\n updateState = changeInput(updateState.form, \"restrictLoginSSOOnly\", \"FALSE\");\n updateState = changeInput(updateState.form, \"byPassLoginPage\", \"FALSE\");\n }\n }\n\n if (name == \"restrictLoginSSOOnly\") {\n if (value == \"FALSE\") {\n updateState = changeInput(updateState.form, \"byPassLoginPage\", \"FALSE\");\n }\n }\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n formDirty: true,\n });\n }\n };\n\n changeConfigurationOption = (option) => {\n let form = this.state.form;\n form.ssoSamlIpConfigurationOption.value = option;\n\n if (form.ssoSamlIpConfigurationOption.value == \"AUTO\") {\n form.ssoSamlIpMetadataAddress.validation.required = true;\n form.ssoSamlIpEntityId.validation.required = false;\n form.ssoSamlIpSingleSignOnEndpoint.validation.required = false;\n form.ssoSamlIpCertificateKeyVaultName.validation.required = false;\n } else {\n form.ssoSamlIpMetadataAddress.validation.required = false;\n form.ssoSamlIpEntityId.validation.required = true;\n form.ssoSamlIpSingleSignOnEndpoint.validation.required = true;\n form.ssoSamlIpCertificateKeyVaultName.validation.required = true;\n }\n\n let updateState = changeInput(form, \"ssoSamlIpConfigurationOption\", option);\n\n updateState = changeInput(updateState.form, \"ssoSamlIpMetadataAddress\", form.ssoSamlIpMetadataAddress.value ? form.ssoSamlIpMetadataAddress.value : \"\");\n updateState = changeInput(updateState.form, \"ssoSamlIpEntityId\", form.ssoSamlIpEntityId.value ? form.ssoSamlIpEntityId.value : \"\");\n updateState = changeInput(updateState.form, \"ssoSamlIpSingleSignOnEndpoint\", form.ssoSamlIpSingleSignOnEndpoint.value ? form.ssoSamlIpSingleSignOnEndpoint.value : \"\");\n updateState = changeInput(updateState.form, \"ssoSamlIpCertificateKeyVaultName\", form.ssoSamlIpCertificateKeyVaultName.value ? form.ssoSamlIpCertificateKeyVaultName.value : \"\");\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n handleSubmitClick = () => {\n const { containerAppSetting, form, ssoIPCertificateKeyVaultFiles } = this.state;\n let appSetting = null;\n\n if (form.ssoSamlIpConfigurationOption.value == \"AUTO\") {\n appSetting = {\n ssoSamlEnable: form.ssoSamlEnable.value,\n ssoSamlEntityId: form.ssoSamlEntityId.value,\n restrictLoginSSOOnly: form.restrictLoginSSOOnly.value,\n byPassLoginPage: form.byPassLoginPage.value,\n ssoSamlIpConfigurationOption: form.ssoSamlIpConfigurationOption.value,\n ssoSamlClaimEmailAddressType: form.ssoSamlClaimEmailAddressType.value,\n ssoSamlIpMetadataAddress: form.ssoSamlIpMetadataAddress.value,\n };\n } else {\n appSetting = {\n ssoSamlEnable: form.ssoSamlEnable.value,\n ssoSamlEntityId: form.ssoSamlEntityId.value,\n restrictLoginSSOOnly: form.restrictLoginSSOOnly.value,\n byPassLoginPage: form.byPassLoginPage.value,\n ssoSamlClaimEmailAddressType: form.ssoSamlClaimEmailAddressType.value,\n ssoSamlIpConfigurationOption: form.ssoSamlIpConfigurationOption.value,\n\n ssoSamlIpEntityId: form.ssoSamlIpEntityId.value,\n ssoSamlIpSingleSignOnEndpoint: form.ssoSamlIpSingleSignOnEndpoint.value,\n ssoSamlIpCertificateKeyVaultName: form.ssoSamlIpCertificateKeyVaultName.value,\n ssoSamlIpCertificateFile: ssoIPCertificateKeyVaultFiles ? ssoIPCertificateKeyVaultFiles[0] : null,\n };\n }\n\n if (window.confirm(\"Update container application SSO Setting will restart the container, proceed?\")) {\n this.setState({ isUpdating: true });\n this.props.onConfig.updateContainerAppSetting(appSetting).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.configError) {\n this.generateAlert(\"success\", \"Container app SSO setting updated.\");\n } else {\n this.generateAlert(\"danger\", this.props.configError.errData.Message);\n }\n }\n this.setState({ isUpdating: this.props.isUpdating });\n });\n }\n };\n\n handleResetClick = () => {\n const form = this.prepareForm(this.props.containerAppSetting);\n this.setState({ containerAppSetting: this.props.containerAppSetting, form, isFormValid: true, formDirty: false });\n };\n\n render() {\n const { containerAppSetting } = this.props;\n const { form, ssoIPCertificateKeyVaultFiles } = this.state;\n\n return (\n \n \n
\n ) : (\n \n \n \n Manage SSO Settings\n
\n \n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n error: state.auth.error,\n\n pageAssignments: state.adminPerson.pageAssignments,\n\n configLoading: state.config.loading,\n isUpdating: state.config.isUpdating,\n configError: state.config.error,\n containerConfig: state.config.containerConfig,\n containerAppSetting: state.config.containerAppSetting,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onConfig: bindActionCreators(configActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ManageSSOSetting);\n","import ErrorHandler from \"./../errorResponseHandler\";\nimport Instance from \"./AxiosInstance\";\n\nexport const axios = Instance.apiInstance();\n\nclass ActionPlanAPI {\n static getActionTypes() {\n return axios\n .get(`/actionplans/actionTypes`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static getActionSkills() {\n return axios\n .get(`/actionplans/actionSkills`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static getFilteredInterventions(filter) {\n return axios\n .post(`/actionplans/interventions/filter`, filter)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateHideIntervetion(id) {\n return axios\n .post(`/actionplans/interventions/${id}/hide`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateUnHideIntervetion(id) {\n return axios\n .post(`/actionplans/interventions/${id}/unhide`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static getActions() {\n return axios\n .get(`/actionplans/myactions`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static getManagedPeopleActions(email) {\n return axios\n .get(`/actionplans/managedPeopleActions?email=${email}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static createAction(action) {\n return axios\n .post(\"/actionplans/myactions\", action)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateAction(id, action) {\n return axios\n .put(`/actionplans/myactions/${id}`, action)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateHideAction(id) {\n return axios\n .post(`/actionplans/myactions/${id}/hide`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateUnHideAction(id) {\n return axios\n .post(`/actionplans/myactions/${id}/unhide`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static deleteAction(id) {\n return axios\n .delete(`/actionplans/myactions/${id}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static printActionReport() {\n return axios\n .get(`/actionplans/printreport`, {\n responseType: \"blob\",\n })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n console.log(\"err\", err);\n throw ErrorHandler(err);\n });\n }\n\n static createManagedPeopleAction(action) {\n return axios\n .post(\"/actionplans/managedPeopleActions\", action)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateManagedPeopleAction(id, action) {\n return axios\n .put(`/actionplans/managedPeopleActions/${id}`, action)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static deleteManagedPeopleAction(id, email) {\n return axios\n .delete(`/actionplans/managedPeopleActions/${id}?email=${email}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static issueBadgeManagedPeopleAction(id, email) {\n return axios\n .post(`/actionplans/managedPeopleActions/${id}/issueBadge`, { personEmail: email })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static rejectBadgeManagedPeopleAction(id, email) {\n return axios\n .post(`/actionplans/managedPeopleActions/${id}/rejectBadge`, { personEmail: email })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static printManagedPeopleActionReport(email) {\n return axios\n .get(`/actionplans/printManagedPeopleReport?email=${email}`, {\n responseType: \"blob\",\n })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n console.log(\"err\", err);\n throw ErrorHandler(err);\n });\n }\n\n static sendUpdatedActionPlanNotification(email) {\n return axios\n .post(`/actionplans/sendUpdatedActionPlanNotification?email=${email}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static submitActionPromotion(actionId, description) {\n return axios\n .post(`/actionplans/promoteaction/${actionId}`, { description })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static submitProposeAction(actionId, personEmail, updateProfileEvidenceProposalSkills) {\n return axios\n .post(`/actionplans/managedPeopleActions/${actionId}/proposeupdateprofileevidence`, { personEmail, updateProfileEvidenceProposalSkills })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static acceptUpdateProfileFromActionProposal(actionId, comment, timezoneOffset) {\n return axios\n .post(`/actionplans/myactions/${actionId}/acceptproposal`, { comment, timezoneOffset })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static rejectUpdateProfileFromActionProposal(actionId, comment, timezoneOffset) {\n return axios\n .post(`/actionplans/myactions/${actionId}/rejectproposal`, { comment, timezoneOffset })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n}\n\nexport default ActionPlanAPI;\n","import ActionPlanAPI from \"./../../common/api/service/ActionPlanService\";\nimport * as actionTypes from \"./actionTypes\";\n\nexport const getActionTypesStart = () => {\n return {\n type: actionTypes.GET_ACTION_TYPES_START,\n };\n};\n\nexport const getActionTypesSuccess = (arrActionTypes) => {\n return {\n type: actionTypes.GET_ACTION_TYPES_SUCCESS,\n actionTypes: arrActionTypes,\n };\n};\n\nexport const getActionTypesFail = (error) => {\n return {\n type: actionTypes.GET_ACTION_TYPES_FAIL,\n error: error,\n };\n};\n\nexport const getActionTypes = () => {\n return (dispatch) => {\n dispatch(getActionTypesStart());\n\n return ActionPlanAPI.getActionTypes()\n .then((res) => {\n if (res) {\n dispatch(getActionTypesSuccess(res));\n } else {\n dispatch(getActionTypesFail(res));\n }\n })\n .catch((err) => {\n dispatch(getActionTypesFail(err));\n });\n };\n};\n\nexport const getActionSkillsStart = () => {\n return {\n type: actionTypes.GET_ACTION_SKILLS_START,\n };\n};\n\nexport const getActionSkillsSuccess = (actionSkills) => {\n return {\n type: actionTypes.GET_ACTION_SKILLS_SUCCESS,\n actionSkills: actionSkills,\n };\n};\n\nexport const getActionSkillsFail = (error) => {\n return {\n type: actionTypes.GET_ACTION_SKILLS_FAIL,\n error: error,\n };\n};\n\nexport const getActionSkills = () => {\n return (dispatch) => {\n dispatch(getActionSkillsStart());\n\n return ActionPlanAPI.getActionSkills()\n .then((res) => {\n if (res) {\n dispatch(getActionSkillsSuccess(res));\n } else {\n dispatch(getActionSkillsFail(res));\n }\n })\n .catch((err) => {\n dispatch(getActionSkillsFail(err));\n });\n };\n};\n\nexport const printMyActionReportStart = () => {\n return {\n type: actionTypes.PRINT_MY_ACTION_REPORT_START,\n };\n};\n\nexport const printMyActionReportSuccess = (printData) => {\n return {\n type: actionTypes.PRINT_MY_ACTION_REPORT_SUCCESS,\n printData,\n };\n};\n\nexport const printMyActionReportFail = (error) => {\n return {\n type: actionTypes.PRINT_MY_ACTION_REPORT_FAIL,\n error: error,\n };\n};\n\nexport const printMyActionReport = () => {\n return (dispatch) => {\n dispatch(printMyActionReportStart());\n\n return ActionPlanAPI.printActionReport()\n .then((res) => {\n dispatch(printMyActionReportSuccess(res));\n })\n .catch((err) => {\n dispatch(printMyActionReportFail(err));\n });\n };\n};\n\nexport const printManagedPeopleActionReportStart = () => {\n return {\n type: actionTypes.PRINT_MANAGED_PEOPLE_ACTION_REPORT_START,\n };\n};\n\nexport const printManagedPeopleActionReportSuccess = (printData) => {\n return {\n type: actionTypes.PRINT_MANAGED_PEOPLE_ACTION_REPORT_SUCCESS,\n printData,\n };\n};\n\nexport const printManagedPeopleActionReportFail = (error) => {\n return {\n type: actionTypes.PRINT_MANAGED_PEOPLE_ACTION_REPORT_FAIL,\n error: error,\n };\n};\n\nexport const printManagedPeopleActionReport = (email) => {\n return (dispatch) => {\n dispatch(printManagedPeopleActionReportStart());\n\n return ActionPlanAPI.printManagedPeopleActionReport(email)\n .then((res) => {\n dispatch(printManagedPeopleActionReportSuccess(res));\n })\n .catch((err) => {\n dispatch(printManagedPeopleActionReportFail(err));\n });\n };\n};\n\nexport const getInterventionsStart = () => {\n return {\n type: actionTypes.GET_INTERVENTIONS_START,\n };\n};\n\nexport const getInterventionsSuccess = (interventions) => {\n return {\n type: actionTypes.GET_INTERVENTIONS_SUCCESS,\n interventions: interventions,\n };\n};\n\nexport const getInterventionsFail = (error) => {\n return {\n type: actionTypes.GET_INTERVENTIONS_FAIL,\n error: error,\n };\n};\n\nexport const getInterventions = (filter) => {\n return (dispatch) => {\n dispatch(getInterventionsStart());\n\n return ActionPlanAPI.getFilteredInterventions(filter)\n .then((res) => {\n dispatch(getInterventionsSuccess(res));\n })\n .catch((err) => {\n dispatch(getInterventionsFail(err));\n });\n };\n};\n\nexport const updateInterventionHiddenStart = () => {\n return {\n type: actionTypes.UPDATE_INTERVENTION_HIDDEN_START,\n };\n};\n\nexport const updateInterventionHiddenSuccess = (intervention) => {\n return {\n type: actionTypes.UPDATE_INTERVENTION_HIDDEN_SUCCESS,\n intervention,\n };\n};\n\nexport const updateInterventionHiddenFail = (error) => {\n return {\n type: actionTypes.UPDATE_INTERVENTION_HIDDEN_FAIL,\n error: error,\n };\n};\n\nexport const updateHideIntervention = (id) => {\n return (dispatch) => {\n dispatch(updateInterventionHiddenStart());\n return ActionPlanAPI.updateHideIntervetion(id)\n .then((res) => {\n dispatch(updateInterventionHiddenSuccess(res));\n })\n .catch((err) => {\n dispatch(updateInterventionHiddenFail(err));\n });\n };\n};\n\nexport const updateUnHideIntervention = (id) => {\n return (dispatch) => {\n dispatch(updateInterventionHiddenStart());\n return ActionPlanAPI.updateUnHideIntervetion(id)\n .then((res) => {\n dispatch(updateInterventionHiddenSuccess(res));\n })\n .catch((err) => {\n dispatch(updateInterventionHiddenFail(err));\n });\n };\n};\n\nexport const getMyActionsStart = () => {\n return {\n type: actionTypes.GET_MY_ACTIONS_START,\n };\n};\n\nexport const getMyActionsSuccess = (actions) => {\n return {\n type: actionTypes.GET_MY_ACTIONS_SUCCESS,\n actions,\n };\n};\n\nexport const getMyActionsFail = (error) => {\n return {\n type: actionTypes.GET_MY_ACTIONS_FAIL,\n error: error,\n };\n};\n\nexport const getMyActions = () => {\n return (dispatch) => {\n dispatch(getMyActionsStart());\n\n return ActionPlanAPI.getActions()\n .then((res) => {\n dispatch(getMyActionsSuccess(res));\n })\n .catch((err) => {\n dispatch(getMyActionsFail(err));\n });\n };\n};\n\nexport const getManagedPeopleActionsStart = () => {\n return {\n type: actionTypes.GET_MANAGED_PEOPLE_ACTIONS_START,\n };\n};\n\nexport const getManagedPeopleActionsSuccess = (actions) => {\n return {\n type: actionTypes.GET_MANAGED_PEOPLE_ACTIONS_SUCCESS,\n actions,\n };\n};\n\nexport const getManagedPeopleActionsFail = (error) => {\n return {\n type: actionTypes.GET_MANAGED_PEOPLE_ACTIONS_FAIL,\n error: error,\n };\n};\n\nexport const getManagedPeopleActions = (email) => {\n return (dispatch) => {\n dispatch(getManagedPeopleActionsStart());\n\n return ActionPlanAPI.getManagedPeopleActions(email)\n .then((res) => {\n dispatch(getManagedPeopleActionsSuccess(res));\n })\n .catch((err) => {\n dispatch(getManagedPeopleActionsFail(err));\n });\n };\n};\n\nexport const createActionStart = () => {\n return {\n type: actionTypes.CREATE_ACTION_START,\n };\n};\n\nexport const createActionSuccess = (addedAction) => {\n return {\n type: actionTypes.CREATE_ACTION_SUCCESS,\n addedAction,\n };\n};\n\nexport const createActionFail = (error) => {\n return {\n type: actionTypes.CREATE_ACTION_FAIL,\n error: error,\n };\n};\n\nexport const createAction = (action) => {\n return (dispatch) => {\n dispatch(createActionStart());\n return ActionPlanAPI.createAction(action)\n .then((res) => {\n dispatch(createActionSuccess(res));\n })\n .catch((err) => {\n dispatch(createActionFail(err));\n });\n };\n};\n\nexport const createManagedPeopleActionStart = () => {\n return {\n type: actionTypes.CREATE_MANAGED_PEOPLE_ACTION_START,\n };\n};\n\nexport const createManagedPeopleActionSuccess = (addedAction) => {\n return {\n type: actionTypes.CREATE_MANAGED_PEOPLE_ACTION_SUCCESS,\n addedAction,\n };\n};\n\nexport const createManagedPeopleActionFail = (error) => {\n return {\n type: actionTypes.CREATE_MANAGED_PEOPLE_ACTION_FAIL,\n error: error,\n };\n};\n\nexport const createManagedPeopleAction = (action) => {\n return (dispatch) => {\n dispatch(createManagedPeopleActionStart());\n return ActionPlanAPI.createManagedPeopleAction(action)\n .then((res) => {\n dispatch(createManagedPeopleActionSuccess(res));\n })\n .catch((err) => {\n dispatch(createManagedPeopleActionFail(err));\n });\n };\n};\n\nexport const updateActionStart = () => {\n return {\n type: actionTypes.UPDATE_ACTION_START,\n };\n};\n\nexport const updateActionSuccess = (addedAction) => {\n return {\n type: actionTypes.UPDATE_ACTION_SUCCESS,\n addedAction,\n };\n};\n\nexport const updateActionFail = (error) => {\n return {\n type: actionTypes.UPDATE_ACTION_FAIL,\n error: error,\n };\n};\n\nexport const updateAction = (id, action) => {\n return (dispatch) => {\n dispatch(updateActionStart());\n return ActionPlanAPI.updateAction(id, action)\n .then((res) => {\n dispatch(updateActionSuccess(res));\n })\n .catch((err) => {\n dispatch(updateActionFail(err));\n });\n };\n};\n\nexport const updateHideAction = (id) => {\n return (dispatch) => {\n dispatch(updateActionStart());\n return ActionPlanAPI.updateHideAction(id)\n .then((res) => {\n dispatch(updateActionSuccess(res));\n })\n .catch((err) => {\n dispatch(updateActionFail(err));\n });\n };\n};\n\nexport const updateUnHideAction = (id) => {\n return (dispatch) => {\n dispatch(updateActionStart());\n return ActionPlanAPI.updateUnHideAction(id)\n .then((res) => {\n dispatch(updateActionSuccess(res));\n })\n .catch((err) => {\n dispatch(updateActionFail(err));\n });\n };\n};\n\nexport const updateManagedPeopleActionStart = () => {\n return {\n type: actionTypes.UPDATE_MANAGED_PEOPLE_ACTION_START,\n };\n};\n\nexport const updateManagedPeopleActionSuccess = (addedAction) => {\n return {\n type: actionTypes.UPDATE_MANAGED_PEOPLE_ACTION_SUCCESS,\n addedAction,\n };\n};\n\nexport const updateManagedPeopleActionFail = (error) => {\n return {\n type: actionTypes.UPDATE_MANAGED_PEOPLE_ACTION_FAIL,\n error: error,\n };\n};\n\nexport const updateManagedPeopleAction = (id, action) => {\n return (dispatch) => {\n dispatch(updateManagedPeopleActionStart());\n return ActionPlanAPI.updateManagedPeopleAction(id, action)\n .then((res) => {\n dispatch(updateManagedPeopleActionSuccess(res));\n })\n .catch((err) => {\n dispatch(updateManagedPeopleActionFail(err));\n });\n };\n};\n\nexport const issueBadgeManagedPeopleAction = (id, email) => {\n return (dispatch) => {\n dispatch(updateManagedPeopleActionStart());\n return ActionPlanAPI.issueBadgeManagedPeopleAction(id, email)\n .then((res) => {\n dispatch(updateManagedPeopleActionSuccess(res));\n })\n .catch((err) => {\n dispatch(updateManagedPeopleActionFail(err));\n });\n };\n};\n\nexport const rejectBadgeManagedPeopleAction = (id, email) => {\n return (dispatch) => {\n dispatch(updateManagedPeopleActionStart());\n return ActionPlanAPI.rejectBadgeManagedPeopleAction(id, email)\n .then((res) => {\n dispatch(updateManagedPeopleActionSuccess(res));\n })\n .catch((err) => {\n dispatch(updateManagedPeopleActionFail(err));\n });\n };\n};\n\nexport const deleteActionStart = () => {\n return {\n type: actionTypes.DELETE_ACTION_START,\n };\n};\n\nexport const deleteActionSuccess = () => {\n return {\n type: actionTypes.DELETE_ACTION_SUCCESS,\n };\n};\n\nexport const deleteActionFail = (error) => {\n return {\n type: actionTypes.DELETE_ACTION_FAIL,\n error: error,\n };\n};\n\nexport const deleteAction = (id) => {\n return (dispatch) => {\n dispatch(deleteActionStart());\n return ActionPlanAPI.deleteAction(id)\n .then((res) => {\n dispatch(deleteActionSuccess(res));\n })\n .catch((err) => {\n dispatch(deleteActionFail(err));\n });\n };\n};\n\nexport const deleteManagedPeopleActionStart = () => {\n return {\n type: actionTypes.DELETE_MANAGED_PEOPLE_ACTION_START,\n };\n};\n\nexport const deleteManagedPeopleActionSuccess = () => {\n return {\n type: actionTypes.DELETE_MANAGED_PEOPLE_ACTION_SUCCESS,\n };\n};\n\nexport const deleteManagedPeopleActionFail = (error) => {\n return {\n type: actionTypes.DELETE_MANAGED_PEOPLE_ACTION_FAIL,\n error: error,\n };\n};\n\nexport const deleteManagedPeopleAction = (id, email) => {\n return (dispatch) => {\n dispatch(deleteManagedPeopleActionStart());\n return ActionPlanAPI.deleteManagedPeopleAction(id, email)\n .then((res) => {\n dispatch(deleteManagedPeopleActionSuccess(res));\n })\n .catch((err) => {\n dispatch(deleteManagedPeopleActionFail(err));\n });\n };\n};\n\nexport const sendUpdatedActionPlanNotificationStart = () => {\n return {\n type: actionTypes.SEND_UPDATED_ACTIONPLAN_NOTIFICATION_START,\n };\n};\n\nexport const sendUpdatedActionPlanNotificationSuccess = () => {\n return {\n type: actionTypes.SEND_UPDATED_ACTIONPLAN_NOTIFICATION_SUCCESS,\n };\n};\n\nexport const sendUpdatedActionPlanNotificationFail = (error) => {\n return {\n type: actionTypes.SEND_UPDATED_ACTIONPLAN_NOTIFICATION_FAIL,\n error: error,\n };\n};\n\nexport const sendUpdatedActionPlanNotification = (email) => {\n return (dispatch) => {\n dispatch(sendUpdatedActionPlanNotificationStart());\n return ActionPlanAPI.sendUpdatedActionPlanNotification(email)\n .then((res) => {\n dispatch(sendUpdatedActionPlanNotificationSuccess(res));\n })\n .catch((err) => {\n dispatch(sendUpdatedActionPlanNotificationFail(err));\n });\n };\n};\n\nexport const submitActionPromotionStart = () => {\n return {\n type: actionTypes.SUBMIT_ACTION_PROMOTION_START,\n };\n};\n\nexport const submitActionPromotionSuccess = (actionPromotion) => {\n return {\n type: actionTypes.SUBMIT_ACTION_PROMOTION_SUCCESS,\n actionPromotion,\n };\n};\n\nexport const submitActionPromotionFail = (error) => {\n return {\n type: actionTypes.SUBMIT_ACTION_PROMOTION_FAIL,\n error: error,\n };\n};\n\nexport const submitActionPromotion = (actionId, description) => {\n return (dispatch) => {\n dispatch(submitActionPromotionStart());\n return ActionPlanAPI.submitActionPromotion(actionId, description)\n .then((res) => {\n dispatch(submitActionPromotionSuccess(res));\n })\n .catch((err) => {\n dispatch(submitActionPromotionFail(err));\n });\n };\n};\n\nexport const submitProposeActionStart = () => {\n return {\n type: actionTypes.SUBMIT_PROPOSE_ACTION_START,\n };\n};\n\nexport const submitProposeActionSuccess = (proposedAction) => {\n return {\n type: actionTypes.SUBMIT_PROPOSE_ACTION_SUCCESS,\n proposedAction,\n };\n};\n\nexport const submitProposeActionFail = (error) => {\n return {\n type: actionTypes.SUBMIT_PROPOSE_ACTION_FAIL,\n error: error,\n };\n};\n\nexport const submitProposeAction = (actionId, personEmail, updateProfileEvidenceProposalSkills) => {\n return (dispatch) => {\n dispatch(submitProposeActionStart());\n return ActionPlanAPI.submitProposeAction(actionId, personEmail, updateProfileEvidenceProposalSkills)\n .then((res) => {\n dispatch(submitProposeActionSuccess(res));\n })\n .catch((err) => {\n dispatch(submitProposeActionFail(err));\n });\n };\n};\n\nexport const acceptUpdateProfileActionProposalStart = () => {\n return {\n type: actionTypes.ACCEPT_UPDATE_PROFILE_FROM_ACTION_PROPOSAL_START,\n };\n};\n\nexport const acceptUpdateProfileActionProposalSuccess = () => {\n return {\n type: actionTypes.ACCEPT_UPDATE_PROFILE_FROM_ACTION_PROPOSAL_SUCCESS,\n };\n};\n\nexport const acceptUpdateProfileActionProposalFail = (error) => {\n return {\n type: actionTypes.ACCEPT_UPDATE_PROFILE_FROM_ACTION_PROPOSAL_FAIL,\n error: error,\n };\n};\n\nexport const acceptUpdateProfileActionProposal = (actionId, comment, timezoneOffset) => {\n return (dispatch) => {\n dispatch(acceptUpdateProfileActionProposalStart());\n return ActionPlanAPI.acceptUpdateProfileFromActionProposal(actionId, comment, timezoneOffset)\n .then((res) => {\n dispatch(acceptUpdateProfileActionProposalSuccess());\n })\n .catch((err) => {\n dispatch(acceptUpdateProfileActionProposalFail(err));\n });\n };\n};\n\nexport const rejectUpdateProfileActionProposalStart = () => {\n return {\n type: actionTypes.REJECT_UPDATE_PROFILE_FROM_ACTION_PROPOSAL_START,\n };\n};\n\nexport const rejectUpdateProfileActionProposalSuccess = () => {\n return {\n type: actionTypes.REJECT_UPDATE_PROFILE_FROM_ACTION_PROPOSAL_SUCCESS,\n };\n};\n\nexport const rejectUpdateProfileActionProposalFail = (error) => {\n return {\n type: actionTypes.REJECT_UPDATE_PROFILE_FROM_ACTION_PROPOSAL_FAIL,\n error: error,\n };\n};\n\nexport const rejectUpdateProfileActionProposal = (actionId, comment, timezoneOffset) => {\n return (dispatch) => {\n dispatch(rejectUpdateProfileActionProposalStart());\n return ActionPlanAPI.rejectUpdateProfileFromActionProposal(actionId, comment, timezoneOffset)\n .then((res) => {\n dispatch(rejectUpdateProfileActionProposalSuccess());\n })\n .catch((err) => {\n dispatch(rejectUpdateProfileActionProposalFail(err));\n });\n };\n};\n","import ErrorHandler from \"./../errorResponseHandler\";\nimport Instance from \"./../service/AxiosInstance\";\n\nexport const axios = Instance.apiInstance();\n\nclass AdminInterventionAPI {\n static getInterventions(selectedProviderOnly, includeInterventionJobs, showWorkspaceOwnerActionOnly) {\n return axios\n .get(`/actionplans/interventions?selectedProviderOnly=${selectedProviderOnly ? \"true\" : \"false\"}${includeInterventionJobs ? `&includeInterventionJobs=true` : \"\"}&showWorkspaceOwnerActionOnly=${showWorkspaceOwnerActionOnly ? `true` : `false`}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static createIntervention(intervention) {\n return axios\n .post(`/actionplans/interventions`, intervention)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateIntervention(id, intervention) {\n return axios\n .put(`/actionplans/interventions/${id}`, intervention)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static deleteIntervention(id) {\n return axios\n .delete(`/actionplans/interventions/${id}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static deleteInterventions(interventionIds) {\n return axios\n .post(`/actionplans/interventions/delete`, { interventionIds })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static exportInterventionsDataExcel(timezoneOffset) {\n return axios\n .get(`/actionplans/interventions/export?selectedProviderOnly=false&timezoneOffset=${timezoneOffset}`, {\n responseType: \"blob\",\n })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n console.log(\"err\", err);\n throw ErrorHandler(err);\n });\n }\n\n static exportInterventionsDataExcelTemplate() {\n return axios\n .get(`/actionplans/interventions/exporttemplate`, {\n responseType: \"blob\",\n })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n console.log(\"err\", err);\n throw ErrorHandler(err);\n });\n }\n\n static importInterventionsDataExcel(interventionsData) {\n const config = {\n headers: {\n \"content-type\": \"multipart/form-data\",\n },\n };\n\n const body = new FormData();\n body.append(\"ContentDisposition\", \"attachment\");\n body.append(\"ContentType\", \"multipart/form-data\");\n\n interventionsData.forEach((file) => {\n body.append(\"interventionsData\", file);\n });\n\n return axios\n .post(`/actionplans/interventions/import`, body, config)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static assignInterventionJob(interventionId, jobId) {\n return axios\n .post(`/actionplans/interventionJobs`, {\n interventionId,\n jobId,\n })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static deleteInterventionJob(id) {\n return axios\n .delete(`/actionplans/interventionJobs/${id}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static deleteInterventionJobs(interventionJobIds) {\n return axios\n .post(`/actionplans/interventionJobs/delete`, {\n interventionJobIds,\n })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static getNoOfActiveActionPromotion() {\n return axios\n .get(`/actionplans/actionpromotions/activenumber`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static getActiveActionPromotions() {\n return axios\n .get(`/actionplans/actionpromotions`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static updateActionPromotion(id, actionPromotion) {\n return axios\n .put(`/actionplans/actionpromotions/${id}`, actionPromotion)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static acceptActionPromotion(id) {\n return axios\n .post(`/actionplans/actionpromotions/${id}/accept`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static declineActionPromotion(id, declineReason) {\n return axios\n .post(`/actionplans/actionpromotions/${id}/decline`, { declineReason })\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n}\n\nexport default AdminInterventionAPI;\n","import AdminInterventionAPI from \"./../../../common/api/adminservice/AdminInterventionService\";\nimport * as actionTypes from \"./adminActionTypes\";\n\nexport const getInterventionsStart = () => {\n return {\n type: actionTypes.GET_INTERVENTIONS_START,\n };\n};\n\nexport const getInterventionsSuccess = (interventions) => {\n return {\n type: actionTypes.GET_INTERVENTIONS_SUCCESS,\n interventions,\n };\n};\n\nexport const getInterventionsFail = (error) => {\n return {\n type: actionTypes.GET_INTERVENTIONS_FAIL,\n error: error,\n };\n};\n\nexport const getInterventions = (selectedProviderOnly, includeInterventionJobs, showWorkspaceOwnerActionOnly) => {\n return (dispatch) => {\n dispatch(getInterventionsStart());\n\n return AdminInterventionAPI.getInterventions(selectedProviderOnly, includeInterventionJobs, showWorkspaceOwnerActionOnly)\n .then((res) => {\n dispatch(getInterventionsSuccess(res));\n })\n .catch((err) => {\n dispatch(getInterventionsFail(err));\n });\n };\n};\n\nexport const addInterventionStart = () => {\n return {\n type: actionTypes.ADD_INTERVENTION_START,\n };\n};\n\nexport const addInterventionSuccess = (addedIntervention) => {\n return {\n type: actionTypes.ADD_INTERVENTION_SUCCESS,\n addedIntervention,\n };\n};\n\nexport const addInterventionFail = (error) => {\n return {\n type: actionTypes.ADD_INTERVENTION_FAIL,\n error: error,\n };\n};\n\nexport const addIntervention = (intervention) => {\n return (dispatch) => {\n dispatch(addInterventionStart());\n\n return AdminInterventionAPI.createIntervention(intervention)\n .then((res) => {\n dispatch(addInterventionSuccess(res));\n })\n .catch((err) => {\n dispatch(addInterventionFail(err));\n });\n };\n};\n\nexport const updateInterventionStart = () => {\n return {\n type: actionTypes.UPDATE_INTERVENTION_START,\n };\n};\n\nexport const updateInterventionSuccess = (updatedIntervention) => {\n return {\n type: actionTypes.UPDATE_INTERVENTION_SUCCESS,\n updatedIntervention,\n };\n};\n\nexport const updateInterventionFail = (error) => {\n return {\n type: actionTypes.UPDATE_INTERVENTION_FAIL,\n error: error,\n };\n};\n\nexport const updateIntervention = (id, intervention) => {\n return (dispatch) => {\n dispatch(updateInterventionStart());\n\n return AdminInterventionAPI.updateIntervention(id, intervention)\n .then((res) => {\n dispatch(updateInterventionSuccess(res));\n })\n .catch((err) => {\n dispatch(updateInterventionFail(err));\n });\n };\n};\n\nexport const deleteInterventionStart = () => {\n return {\n type: actionTypes.DELETE_INTERVENTION_START,\n };\n};\n\nexport const deleteInterventionSuccess = (deletedInterventionId) => {\n return {\n type: actionTypes.DELETE_INTERVENTION_SUCCESS,\n deletedInterventionId,\n };\n};\n\nexport const deleteInterventionFail = (error) => {\n return {\n type: actionTypes.DELETE_INTERVENTION_FAIL,\n error: error,\n };\n};\n\nexport const deleteIntervention = (id) => {\n return (dispatch) => {\n dispatch(deleteInterventionStart());\n\n return AdminInterventionAPI.deleteIntervention(id)\n .then((res) => {\n dispatch(deleteInterventionSuccess(id));\n })\n .catch((err) => {\n dispatch(deleteInterventionFail(err));\n });\n };\n};\n\nexport const deleteInterventionsStart = () => {\n return {\n type: actionTypes.DELETE_INTERVENTIONS_START,\n };\n};\n\nexport const deleteInterventionsSuccess = (deletedInterventionIds) => {\n return {\n type: actionTypes.DELETE_INTERVENTIONS_SUCCESS,\n deletedInterventionIds,\n };\n};\n\nexport const deleteInterventionsFail = (error) => {\n return {\n type: actionTypes.DELETE_INTERVENTIONS_FAIL,\n error: error,\n };\n};\n\nexport const deleteInterventions = (interventionIds) => {\n return (dispatch) => {\n dispatch(deleteInterventionsStart());\n\n return AdminInterventionAPI.deleteInterventions(interventionIds)\n .then((res) => {\n dispatch(deleteInterventionsSuccess(interventionIds));\n })\n .catch((err) => {\n dispatch(deleteInterventionsFail(err));\n });\n };\n};\n\nexport const exportInterventionsDataExcelStart = () => {\n return {\n type: actionTypes.EXPORT_INTERVENTIONS_DATA_START,\n };\n};\n\nexport const exportInterventionsDataExcelSuccess = (exportData) => {\n return {\n type: actionTypes.EXPORT_INTERVENTIONS_DATA_SUCCESS,\n exportData,\n };\n};\n\nexport const exportInterventionsDataExcelFail = (error) => {\n return {\n type: actionTypes.EXPORT_INTERVENTIONS_DATA_FAIL,\n error: error,\n };\n};\n\nexport const exportInterventionsDataExcel = (timezoneOffset) => {\n return (dispatch) => {\n dispatch(exportInterventionsDataExcelStart());\n\n return AdminInterventionAPI.exportInterventionsDataExcel(timezoneOffset)\n .then((res) => {\n dispatch(exportInterventionsDataExcelSuccess(res));\n })\n .catch((err) => {\n dispatch(exportInterventionsDataExcelFail(err));\n });\n };\n};\n\nexport const exportInterventionsDataExcelTemplate = () => {\n return (dispatch) => {\n dispatch(exportInterventionsDataExcelStart());\n\n return AdminInterventionAPI.exportInterventionsDataExcelTemplate()\n .then((res) => {\n dispatch(exportInterventionsDataExcelSuccess(res));\n })\n .catch((err) => {\n dispatch(exportInterventionsDataExcelFail(err));\n });\n };\n};\n\nexport const importSkillAttributesDataExcelStart = () => {\n return {\n type: actionTypes.IMPORT_INTERVENTIONS_DATA_START,\n };\n};\n\nexport const importSkillAttributesDataExcelSuccess = () => {\n return {\n type: actionTypes.IMPORT_INTERVENTIONS_DATA_SUCCESS,\n };\n};\n\nexport const importSkillAttributesDataExcelFail = (error) => {\n return {\n type: actionTypes.IMPORT_INTERVENTIONS_DATA_FAIL,\n error: error,\n };\n};\n\nexport const importSkillAttributesDataExcel = (interventionsData) => {\n return (dispatch) => {\n dispatch(importSkillAttributesDataExcelStart());\n\n return AdminInterventionAPI.importInterventionsDataExcel(interventionsData)\n .then((res) => {\n dispatch(importSkillAttributesDataExcelSuccess(res));\n })\n .catch((err) => {\n dispatch(importSkillAttributesDataExcelFail(err));\n });\n };\n};\n\nexport const assignInterventionJobStart = () => {\n return {\n type: actionTypes.ASSIGN_INTERVENTION_JOB_START,\n };\n};\n\nexport const assignInterventionJobSuccess = (addedInterventionJob) => {\n return {\n type: actionTypes.ASSIGN_INTERVENTION_JOB_SUCCESS,\n addedInterventionJob,\n };\n};\n\nexport const assignInterventionJobFail = (error) => {\n return {\n type: actionTypes.ASSIGN_INTERVENTION_JOB_FAIL,\n error: error,\n };\n};\n\nexport const assignInterventionJob = (interventionId, jobId) => {\n return (dispatch) => {\n dispatch(assignInterventionJobStart());\n\n return AdminInterventionAPI.assignInterventionJob(interventionId, jobId)\n .then((res) => {\n dispatch(assignInterventionJobSuccess(res));\n })\n .catch((err) => {\n dispatch(assignInterventionJobFail(err));\n });\n };\n};\n\nexport const deleteInterventionJobStart = () => {\n return {\n type: actionTypes.DELETE_INTERVENTION_JOB_START,\n };\n};\n\nexport const deleteInterventionJobSuccess = (deletedInterventionJobId) => {\n return {\n type: actionTypes.DELETE_INTERVENTION_JOB_SUCCESS,\n deletedInterventionJobId,\n };\n};\n\nexport const deleteInterventionJobFail = (error) => {\n return {\n type: actionTypes.DELETE_INTERVENTION_JOB_FAIL,\n error: error,\n };\n};\n\nexport const deleteInterventionJob = (id) => {\n return (dispatch) => {\n dispatch(deleteInterventionJobStart());\n\n return AdminInterventionAPI.deleteInterventionJob(id)\n .then((res) => {\n dispatch(deleteInterventionJobSuccess(id));\n })\n .catch((err) => {\n dispatch(deleteInterventionJobFail(err));\n });\n };\n};\n\nexport const deleteInterventionJobsStart = () => {\n return {\n type: actionTypes.DELETE_INTERVENTION_JOBS_START,\n };\n};\n\nexport const deleteInterventionJobsSuccess = (deletedInterventionJobIds) => {\n return {\n type: actionTypes.DELETE_INTERVENTION_JOBS_SUCCESS,\n deletedInterventionJobIds,\n };\n};\n\nexport const deleteInterventionJobsFail = (error) => {\n return {\n type: actionTypes.DELETE_INTERVENTION_JOBS_FAIL,\n error: error,\n };\n};\n\nexport const deleteInterventionJobs = (interventionJobIds) => {\n return (dispatch) => {\n dispatch(deleteInterventionJobsStart());\n\n return AdminInterventionAPI.deleteInterventionJobs(interventionJobIds)\n .then((res) => {\n dispatch(deleteInterventionJobsSuccess(interventionJobIds));\n })\n .catch((err) => {\n dispatch(deleteInterventionJobsFail(err));\n });\n };\n};\n\nexport const getNoOfActiveActionPromotionsStart = () => {\n return {\n type: actionTypes.GET_NO_OF_ACTIVE_ACTION_PROMOTIONS_START,\n };\n};\n\nexport const getNoOfActiveActionPromotionsSuccess = (numberActiveActionPromotions) => {\n return {\n type: actionTypes.GET_NO_OF_ACTIVE_ACTION_PROMOTIONS_SUCCESS,\n numberActiveActionPromotions,\n };\n};\n\nexport const getNoOfActiveActionPromotionsFail = (error) => {\n return {\n type: actionTypes.GET_NO_OF_ACTIVE_ACTION_PROMOTIONS_FAIL,\n error: error,\n };\n};\n\nexport const getNoOfActiveActionPromotions = () => {\n return (dispatch) => {\n dispatch(getNoOfActiveActionPromotionsStart());\n\n return AdminInterventionAPI.getNoOfActiveActionPromotion()\n .then((res) => {\n dispatch(getNoOfActiveActionPromotionsSuccess(res));\n })\n .catch((err) => {\n dispatch(getNoOfActiveActionPromotionsFail(err));\n });\n };\n};\n\nexport const getActiveActionPromotionsStart = () => {\n return {\n type: actionTypes.GET_ACTION_PROMOTIONS_START,\n };\n};\n\nexport const getActiveActionPromotionsSuccess = (actionPromotions) => {\n return {\n type: actionTypes.GET_ACTION_PROMOTIONS_SUCCESS,\n actionPromotions,\n };\n};\n\nexport const getActiveActionPromotionsFail = (error) => {\n return {\n type: actionTypes.GET_ACTION_PROMOTIONS_FAIL,\n error: error,\n };\n};\n\nexport const getActionPromotions = () => {\n return (dispatch) => {\n dispatch(getActiveActionPromotionsStart());\n\n return AdminInterventionAPI.getActiveActionPromotions()\n .then((res) => {\n dispatch(getActiveActionPromotionsSuccess(res));\n })\n .catch((err) => {\n dispatch(getActiveActionPromotionsFail(err));\n });\n };\n};\n\nexport const updateActionPromotionStart = () => {\n return {\n type: actionTypes.UPDATE_ACTION_PROMOTION_START,\n };\n};\n\nexport const updateActionPromotionSuccess = (updatedActionPromotion) => {\n return {\n type: actionTypes.UPDATE_ACTION_PROMOTION_SUCCESS,\n updatedActionPromotion,\n };\n};\n\nexport const updateActionPromotionFail = (error) => {\n return {\n type: actionTypes.UPDATE_ACTION_PROMOTION_FAIL,\n error: error,\n };\n};\n\nexport const updateActionPromotion = (id, actionPromotion) => {\n return (dispatch) => {\n dispatch(updateActionPromotionStart());\n\n return AdminInterventionAPI.updateActionPromotion(id, actionPromotion)\n .then((res) => {\n dispatch(updateActionPromotionSuccess(res));\n })\n .catch((err) => {\n dispatch(updateActionPromotionFail(err));\n });\n };\n};\n\nexport const acceptActionPromotionStart = () => {\n return {\n type: actionTypes.ACCEPT_ACTION_PROMOTION_START,\n };\n};\n\nexport const acceptActionPromotionSuccess = (updatedActionPromotion) => {\n return {\n type: actionTypes.ACCEPT_ACTION_PROMOTION_SUCCESS,\n updatedActionPromotion,\n };\n};\n\nexport const acceptActionPromotionFail = (error) => {\n return {\n type: actionTypes.ACCEPT_ACTION_PROMOTION_FAIL,\n error: error,\n };\n};\n\nexport const acceptActionPromotion = (id) => {\n return (dispatch) => {\n dispatch(acceptActionPromotionStart());\n\n return AdminInterventionAPI.acceptActionPromotion(id)\n .then((res) => {\n dispatch(acceptActionPromotionSuccess(res));\n })\n .catch((err) => {\n dispatch(acceptActionPromotionFail(err));\n });\n };\n};\n\nexport const declineActionPromotionStart = () => {\n return {\n type: actionTypes.ACCEPT_ACTION_PROMOTION_START,\n };\n};\n\nexport const declineActionPromotionSuccess = (updatedActionPromotion) => {\n return {\n type: actionTypes.ACCEPT_ACTION_PROMOTION_SUCCESS,\n updatedActionPromotion,\n };\n};\n\nexport const declineActionPromotionFail = (error) => {\n return {\n type: actionTypes.ACCEPT_ACTION_PROMOTION_FAIL,\n error: error,\n };\n};\n\nexport const declineActionPromotion = (id, declineReason) => {\n return (dispatch) => {\n dispatch(declineActionPromotionStart());\n\n return AdminInterventionAPI.declineActionPromotion(id, declineReason)\n .then((res) => {\n dispatch(declineActionPromotionSuccess(res));\n })\n .catch((err) => {\n dispatch(declineActionPromotionFail(err));\n });\n };\n};\n","import changeInput from \"../../../utils/changeInput\";\nimport { formatDate_localeString } from \"../../../utils/stringUtils\";\nimport React, { Component } from \"react\";\nimport ReactTextareaAutosize from \"react-textarea-autosize\";\nimport { Button, Col, CustomInput, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row } from \"reactstrap\";\n\nconst textareaStyle = {\n width: \"100%\",\n padding: \"10px\",\n border: \"1px solid #ced4da\",\n borderRadius: \"0.25rem\",\n color: \"#495057\",\n};\n\nconst textareaStyleDisable = {\n width: \"100%\",\n padding: \"10px\",\n border: \"1px solid #ced4da\",\n borderRadius: \"0.25rem\",\n background: \"#e9ecef\",\n color: \"#495057\",\n};\n\nclass ManageActionPromotionDetail extends Component {\n constructor(props) {\n super(props);\n this.state = {\n actionPromotion: this.props.actionPromotion,\n interventionLevels: [],\n interventionLorLevels: [],\n form: null,\n isFormValid: this.props.actionPromotion ? true : false,\n isUpdating: false,\n updateSuccess: false,\n editMode: false,\n reasonDecline: \"\",\n };\n\n this.formatDate_localeString = formatDate_localeString.bind(this);\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.actionPromotion !== this.props.actionPromotion) {\n this.setState({ actionPromotion: this.props.actionPromotion });\n }\n\n if (prevProps.isUpdating !== this.props.isUpdating) {\n this.setState({ isUpdating: this.props.isUpdating });\n }\n\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true, editMode: false });\n this.prepareFormState();\n }\n\n if (prevProps.updateSuccess !== this.props.updateSuccess) {\n if (this.props.updateSuccess) {\n this.setState({ editMode: false });\n }\n }\n\n if (prevProps.acceptSuccess !== this.props.acceptSuccess) {\n if (this.props.acceptSuccess) {\n this.setState({ showDialog: false, showAcceptActionPromotionConfirmationDialog: false });\n }\n }\n\n if (prevProps.declineSuccess !== this.props.declineSuccess) {\n if (this.props.declineSuccess) {\n this.setState({ showDialog: false, showDeclineActionPromotionConfirmationDialog: false });\n }\n }\n }\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.setState({\n showDialog: !showDialog,\n });\n };\n\n prepareFormState = () => {\n const actionPromotion = this.props.actionPromotion;\n\n this.setState({\n form: {\n name: {\n validation: {\n required: true,\n },\n value: actionPromotion && actionPromotion.name ? actionPromotion.name : \"\",\n valid: actionPromotion && actionPromotion.name && actionPromotion.name != \"\" ? true : false,\n isValidFormat: actionPromotion && actionPromotion.name && actionPromotion.name != \"\" ? true : false,\n touched: false,\n },\n actionType: {\n validation: {\n required: true,\n },\n value: actionPromotion && actionPromotion.actionType ? actionPromotion.actionType : null,\n valid: actionPromotion && actionPromotion.actionType && actionPromotion.actionType != \"\" ? true : false,\n isValidFormat: actionPromotion && actionPromotion.actionType && actionPromotion.actionType != \"\" ? true : false,\n touched: false,\n },\n description: {\n validation: {\n required: true,\n },\n value: actionPromotion && actionPromotion.description ? actionPromotion.description : \"\",\n valid: actionPromotion ? true : false,\n isValidFormat: actionPromotion ? true : false,\n touched: false,\n },\n duration: {\n validation: {\n required: false,\n isNumeric: true,\n },\n value: actionPromotion && actionPromotion.duration ? actionPromotion.duration : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n durationHours: {\n validation: {\n required: false,\n isNumeric: true,\n },\n value: actionPromotion && actionPromotion.durationHours ? actionPromotion.durationHours : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n link: {\n validation: {\n required: false,\n },\n value: actionPromotion && actionPromotion.link ? actionPromotion.link : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n interventionLevels: actionPromotion && actionPromotion.levels ? [...actionPromotion.levels] : [],\n interventionLorLevels: actionPromotion && actionPromotion.lorLevels ? [...actionPromotion.lorLevels] : [],\n isFormValid: actionPromotion && ((actionPromotion.levels && actionPromotion.levels.length > 0) || (actionPromotion.lorLevels && actionPromotion.levels.lorLevels > 0)) && actionPromotion.id ? true : false,\n });\n };\n\n handleChange = (event) => {\n const interventionLorLevels = this.state.interventionLorLevels ? this.state.interventionLorLevels : [];\n const interventionLevels = this.state.interventionLevels ? this.state.interventionLevels : [];\n\n let { name, value } = event.target;\n\n if (name == \"duration\" && value && value != \"\") {\n if (value < 0) {\n value = 0;\n }\n }\n\n if (name == \"actionType\" && value && value == \"Select Type\") {\n value = \"\";\n }\n\n let updateState = changeInput(this.state.form, name, value);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid && (interventionLorLevels.length > 0 || interventionLevels.length > 0),\n });\n };\n\n handleDateChange = (name, value) => {\n const interventionLorLevels = this.state.interventionLorLevels ? this.state.interventionLorLevels : [];\n const interventionLevels = this.state.interventionLevels ? this.state.interventionLevels : [];\n\n const updateState = changeInput(this.state.form, name, value);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid && (interventionLorLevels.length > 0 || interventionLevels.length > 0),\n });\n };\n\n handleLorsCheckedChange = (lorName, lorCode, level) => {\n const interventionLorLevels = this.state.interventionLorLevels ? this.state.interventionLorLevels : [];\n const interventionLevels = this.state.interventionLevels ? this.state.interventionLevels : [];\n\n if (interventionLorLevels.find((it) => `${it.lorCode}${it.level}` == `${lorCode}${level}`)) {\n const interventionLorLevel = interventionLorLevels.find((it) => `${it.lorCode}${it.level}` == `${lorCode}${level}`);\n const index = interventionLorLevels.indexOf(interventionLorLevel);\n if (index !== -1) {\n interventionLorLevels.splice(index, 1);\n }\n } else {\n interventionLorLevels.push({\n lorName,\n lorCode,\n level,\n });\n }\n\n const updateState = changeInput(this.state.form, \"name\", this.state.form.name.value);\n this.setState({ interventionLorLevels, isFormValid: updateState.valid && (interventionLorLevels.length > 0 || interventionLevels.length > 0) });\n };\n\n handleSkillsCheckedChange = (skillsName, skillsCode, level) => {\n const interventionLorLevels = this.state.interventionLorLevels ? this.state.interventionLorLevels : [];\n const interventionLevels = this.state.interventionLevels ? this.state.interventionLevels : [];\n\n if (interventionLevels.find((it) => `${it.skillsCode}${it.level}` == `${skillsCode}${level}`)) {\n const interventionLevel = interventionLevels.find((it) => `${it.skillsCode}${it.level}` == `${skillsCode}${level}`);\n const index = interventionLevels.indexOf(interventionLevel);\n if (index !== -1) {\n interventionLevels.splice(index, 1);\n }\n } else {\n interventionLevels.push({\n skillsName,\n skillsCode,\n level,\n });\n }\n\n const updateState = changeInput(this.state.form, \"name\", this.state.form.name.value);\n this.setState({ interventionLevels, isFormValid: updateState.valid && (interventionLorLevels.length > 0 || interventionLevels.length > 0) });\n };\n\n handleEdit = () => {\n const editMode = this.state.editMode;\n\n this.setState({ editMode: !editMode });\n };\n\n handleCancel = () => {\n const editMode = this.state.editMode;\n\n this.setState({ editMode: !editMode });\n };\n\n handleSave = () => {\n const { form, actionPromotion, interventionLevels, interventionLorLevels } = this.state;\n\n actionPromotion.name = form.name.value;\n actionPromotion.actionType = form.actionType.value;\n actionPromotion.description = form.description.value;\n actionPromotion.duration = form.duration.value;\n actionPromotion.durationHours = form.durationHours.value;\n actionPromotion.link = form.link.value;\n actionPromotion.levels = interventionLevels;\n actionPromotion.lorLevels = interventionLorLevels;\n\n this.props.handleSaveUpdateActionPromotion(actionPromotion);\n };\n\n handleAcceptActionPromotion = () => {\n this.setState({ showDialog: false, showAcceptActionPromotionConfirmationDialog: true });\n };\n\n handleDeclineActionPromotion = () => {\n this.setState({ showDialog: false, showDeclineActionPromotionConfirmationDialog: true, reasonDecline: \"\" });\n };\n\n handleCancelAcceptActionPromotion = () => {\n this.setState({ showDialog: true, showAcceptActionPromotionConfirmationDialog: false });\n };\n\n handleConfirmAcceptActionPromotion = () => {\n const { actionPromotion } = this.state;\n\n this.props.handleAcceptActionPromotion(actionPromotion.id);\n };\n\n renderAcceptActionPromotionConfirmation = () => {\n return (\n \n Accept Action Promotion Confirmation \n \n \n \n \n {\n this.handleConfirmAcceptActionPromotion();\n }}\n disabled={this.state.isUpdating}\n >\n OK\n \n \n Cancel\n \n \n \n );\n };\n\n handleChangeReasonDecline = (event) => {\n let { name, value } = event.target;\n\n this.setState({ reasonDecline: value });\n };\n\n handleCancelDeclineActionPromotion = () => {\n this.setState({ showDialog: true, showDeclineActionPromotionConfirmationDialog: false });\n };\n\n handleConfirmDeclineActionPromotion = () => {\n const { actionPromotion } = this.state;\n\n this.props.handleDeclineActionPromotion(actionPromotion.id, this.state.reasonDecline);\n };\n\n renderDeclineActionPromotionConfirmation = () => {\n return (\n \n Decline Action Promotion Confirmation \n \n \n \n \n {\n this.handleConfirmDeclineActionPromotion();\n }}\n disabled={this.state.reasonDecline == \"\" || this.state.isUpdating}\n >\n OK\n \n \n Cancel\n \n \n \n );\n };\n\n render() {\n const { form, interventionLevels, interventionLorLevels, editMode } = this.state;\n\n const lors = this.props.lors\n .flatMap((lor, index) => {\n return lor.levels.flatMap((level, index) => {\n return {\n lorName: lor.name,\n lorCode: lor.lorCode,\n level: level.levelNumber,\n };\n });\n })\n .sort((a, b) => (`${a.lorCode}` > `${b.lorCode}` ? 1 : -1));\n\n const categories = this.props.categories\n .flatMap((category, index) => {\n return category.subCategories.flatMap((subCategory, index) => {\n return subCategory.skills.flatMap((skill, index) => {\n return skill.levels.flatMap((level, index) => {\n return {\n skillsName: skill.name,\n skillsCode: skill.skillsCode,\n level: level.level,\n };\n });\n });\n });\n })\n .sort((a, b) => (`${a.skillsCode}` > `${b.skillsCode}` ? 1 : -1));\n\n const actionTypes = [{ name: null }, ...this.props.actionTypes];\n\n return (\n \n {this.renderAcceptActionPromotionConfirmation()}\n {this.renderDeclineActionPromotionConfirmation()}\n \n Review Action \n \n \n \n \n {!editMode && (\n \n {\n this.handleEdit();\n }}\n disabled={this.state.isUpdating}\n >\n Edit\n \n {\n this.handleAcceptActionPromotion();\n }}\n disabled={this.state.isUpdating}\n >\n Accept\n \n {\n this.handleDeclineActionPromotion();\n }}\n disabled={this.state.isUpdating}\n >\n Decline\n \n \n )}\n {editMode && (\n \n {\n this.handleSave();\n }}\n disabled={!this.state.isFormValid || this.state.isUpdating}\n >\n Save\n \n {\n this.handleCancel();\n }}\n disabled={this.state.isUpdating}\n >\n Cancel\n \n \n )}\n \n \n \n );\n }\n}\n\nexport default ManageActionPromotionDetail;\n","import changeInput from \"../../../utils/changeInput\";\nimport { formatDate_localeString } from \"../../../utils/stringUtils\";\nimport React, { Component } from \"react\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport ReactTextareaAutosize from \"react-textarea-autosize\";\nimport { Button, Col, CustomInput, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner } from \"reactstrap\";\n\nconst textareaStyle = {\n width: \"100%\",\n padding: \"10px\",\n border: \"1px solid #ced4da\",\n borderRadius: \"0.25rem\",\n color: \"#495057\",\n};\n\nconst textareaStyleDisable = {\n width: \"100%\",\n padding: \"10px\",\n border: \"1px solid #ced4da\",\n borderRadius: \"0.25rem\",\n background: \"#e9ecef\",\n color: \"#495057\",\n};\n\nclass ManageTrainingDetail extends Component {\n constructor(props) {\n super(props);\n this.state = {\n intervention: this.props.intervention,\n interventionLevels: [],\n interventionLorLevels: [],\n form: null,\n isFormValid: this.props.intervention ? true : false,\n isUpdating: false,\n showSpinner: false,\n updateSuccess: false,\n optionTrueFalse: [\n { value: true, label: \"True\" },\n { value: false, label: \"False\" },\n ],\n optionBadgeProvider: [\n {\n label: \"AMPG\",\n value: \"APMG\",\n },\n {\n label: \"DSA\",\n value: \"DSA\",\n },\n ],\n optionSkillTypes: [\n {\n label: \"KNOWLEDGE\",\n value: \"Knowledge\",\n },\n {\n label: \"PROFICIENCY\",\n value: \"Proficiency\",\n },\n // {\n // label: \"COMPETENCY\",\n // value: \"Competency\",\n // },\n ],\n };\n\n this.formatDate_localeString = formatDate_localeString.bind(this);\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.intervention !== this.props.intervention) {\n this.setState({ intervention: this.props.intervention });\n }\n\n if (prevProps.isUpdating !== this.props.isUpdating) {\n this.setState({ isUpdating: this.props.isUpdating, showSpinner: this.props.isUpdating });\n }\n\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n this.prepareFormState();\n }\n\n if (prevProps.updateSuccess !== this.props.updateSuccess) {\n if (this.props.updateSuccess) {\n this.setState({ showDialog: false });\n }\n }\n }\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.setState({\n showDialog: !showDialog,\n });\n };\n\n prepareFormState = () => {\n const intervention = this.props.intervention;\n this.setState({\n form: {\n name: {\n validation: {\n required: true,\n },\n value: intervention && intervention.name ? intervention.name : \"\",\n valid: intervention && intervention.name && intervention.name != \"\" ? true : false,\n isValidFormat: intervention && intervention.name && intervention.name != \"\" ? true : false,\n touched: false,\n },\n actionType: {\n validation: {\n required: true,\n },\n value: intervention && intervention.actionType ? intervention.actionType : null,\n valid: intervention && intervention.actionType && intervention.actionType != \"\" ? true : false,\n isValidFormat: intervention && intervention.actionType && intervention.actionType != \"\" ? true : false,\n touched: false,\n },\n companyId: {\n validation: {\n required: false,\n },\n value: intervention && intervention.companyId ? intervention.companyId : null,\n valid: intervention && intervention.companyId ? true : true,\n isValidFormat: intervention && intervention.companyId ? true : true,\n touched: false,\n },\n description: {\n validation: {\n required: true,\n },\n value: intervention && intervention.description ? intervention.description : \"\",\n valid: intervention ? true : false,\n isValidFormat: intervention ? true : false,\n touched: false,\n },\n isActive: {\n validation: {\n required: false,\n isBool: true,\n },\n value: intervention && intervention.isActive ? intervention.isActive : false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n duration: {\n validation: {\n required: false,\n isNumeric: true,\n },\n value: intervention && intervention.duration ? intervention.duration : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n durationHours: {\n validation: {\n required: false,\n isNumeric: true,\n },\n value: intervention && intervention.durationHours ? intervention.durationHours : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n link: {\n validation: {\n required: false,\n },\n value: intervention && intervention.link ? intervention.link : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n publishedOn: {\n validation: {\n required: false,\n },\n value: intervention && intervention.publishedOn,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n retireOn: {\n validation: {\n required: false,\n },\n value: intervention && intervention.retireOn,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n reviewOn: {\n validation: {\n required: false,\n },\n value: intervention && intervention.reviewOn,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n versionNumber: {\n validation: {\n required: true,\n isNumeric: true,\n },\n value: intervention && intervention.versionNumber ? intervention.versionNumber : 1,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n badgeIssuer: {\n validation: {\n required: true,\n },\n value: intervention && intervention.badgeIssuer ? intervention.badgeIssuer : this.props.containerConfig && this.props.containerConfig.badgeProvider && this.props.containerConfig.badgeProvider != null ? this.props.containerConfig.badgeProvider : \"APMG\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n preLoadToNewUser: {\n validation: {\n required: true,\n },\n value: intervention && intervention.preLoadToNewUser ? intervention.preLoadToNewUser : false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n targetCompletionDays: {\n validation: {\n required: true,\n },\n value: intervention && intervention.targetCompletionDays ? intervention.targetCompletionDays : 0,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n createdAsInactive: {\n validation: {\n required: true,\n },\n value: intervention && intervention.createdAsInactive ? intervention.createdAsInactive : false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n interventionLevels: intervention && intervention.levels ? [...intervention.levels] : [],\n interventionLorLevels: intervention && intervention.lorLevels ? [...intervention.lorLevels] : [],\n isFormValid: intervention && ((intervention.levels && intervention.levels.length > 0) || (intervention.lorLevels && intervention.levels.lorLevels > 0)) && intervention.id ? true : false,\n });\n };\n\n handleChange = (event) => {\n const interventionLorLevels = this.state.interventionLorLevels ? this.state.interventionLorLevels : [];\n let interventionLevels = this.state.interventionLevels ? this.state.interventionLevels : [];\n\n let { name, value } = event.target;\n\n if (name == \"duration\" && value && value != \"\") {\n if (value < 0) {\n value = 0;\n }\n }\n\n if (name == \"versionNumber\" && value && value != \"\") {\n if (value < 1) {\n value = 1;\n }\n }\n\n if (name == \"actionType\" && value && value == \"Select Type\") {\n value = \"\";\n }\n\n if (name == \"companyId\" && value && value == \"Select Provider\") {\n value = \"\";\n }\n\n let updateState = changeInput(this.state.form, name, value);\n\n if (name == \"actionType\") {\n if (value == \"Accredited Badge Issuing Action\") {\n interventionLevels.map((interventionLevel) => {\n interventionLevel.skillType = \"Proficient\";\n });\n } else {\n interventionLevels.map((interventionLevel) => {\n interventionLevel.skillType = null;\n });\n }\n }\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid && (interventionLorLevels.length > 0 || interventionLevels.length > 0),\n });\n };\n\n handleDateChange = (name, value) => {\n const interventionLorLevels = this.state.interventionLorLevels ? this.state.interventionLorLevels : [];\n const interventionLevels = this.state.interventionLevels ? this.state.interventionLevels : [];\n\n const updateState = changeInput(this.state.form, name, value);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid && (interventionLorLevels.length > 0 || interventionLevels.length > 0),\n });\n };\n\n handleLorsCheckedChange = (lorName, lorCode, level) => {\n const interventionLorLevels = this.state.interventionLorLevels ? this.state.interventionLorLevels : [];\n const interventionLevels = this.state.interventionLevels ? this.state.interventionLevels : [];\n\n if (interventionLorLevels.find((it) => `${it.lorCode}${it.level}` == `${lorCode}${level}`)) {\n const interventionLorLevel = interventionLorLevels.find((it) => `${it.lorCode}${it.level}` == `${lorCode}${level}`);\n const index = interventionLorLevels.indexOf(interventionLorLevel);\n if (index !== -1) {\n interventionLorLevels.splice(index, 1);\n }\n } else {\n interventionLorLevels.push({\n lorName,\n lorCode,\n level,\n });\n }\n\n const updateState = changeInput(this.state.form, \"name\", this.state.form.name.value);\n this.setState({ interventionLorLevels, isFormValid: updateState.valid && (interventionLorLevels.length > 0 || interventionLevels.length > 0) });\n };\n\n handleSkillsCheckedChange = (skillsName, skillsCode, level, skillType) => {\n const interventionLorLevels = this.state.interventionLorLevels ? this.state.interventionLorLevels : [];\n const interventionLevels = this.state.interventionLevels ? this.state.interventionLevels : [];\n\n console.log(\"skillType\", skillType);\n\n if (interventionLevels.find((it) => `${it.skillsCode}${it.level}` == `${skillsCode}${level}`)) {\n const interventionLevel = interventionLevels.find((it) => `${it.skillsCode}${it.level}` == `${skillsCode}${level}`);\n const index = interventionLevels.indexOf(interventionLevel);\n if (index !== -1) {\n interventionLevels.splice(index, 1);\n }\n } else {\n interventionLevels.push({\n skillsName,\n skillsCode,\n level,\n skillType,\n });\n }\n\n const updateState = changeInput(this.state.form, \"name\", this.state.form.name.value);\n this.setState({ interventionLevels, isFormValid: updateState.valid && (interventionLorLevels.length > 0 || interventionLevels.length > 0) });\n };\n\n handleSave = (applyNow) => {\n const { form, intervention, interventionLevels, interventionLorLevels } = this.state;\n\n intervention.name = form.name.value;\n intervention.actionType = form.actionType.value;\n intervention.companyId = form.companyId.value;\n intervention.description = form.description.value;\n intervention.duration = form.duration.value;\n intervention.durationHours = form.durationHours.value;\n intervention.link = form.link.value;\n intervention.publishedOn = form.publishedOn.value;\n intervention.retireOn = form.retireOn.value;\n intervention.reviewOn = form.reviewOn.value;\n intervention.versionNumber = form.versionNumber.value;\n intervention.isActive = form.isActive.value;\n intervention.levels = interventionLevels;\n intervention.lorLevels = interventionLorLevels;\n intervention.badgeIssuer = form.badgeIssuer.value;\n\n intervention.preLoadToNewUser = form.preLoadToNewUser.value;\n intervention.targetCompletionDays = form.targetCompletionDays.value;\n\n if (intervention.id) {\n if (intervention.createdAsInactive) {\n intervention.createdAsInactive = form.isActive.value == false || form.isActive.value == \"false\";\n } else {\n intervention.createdAsInactive = false;\n }\n } else {\n intervention.createdAsInactive = form.isActive.value == false || form.isActive.value == \"false\";\n }\n\n intervention.applyPreLoadActionNow = applyNow;\n\n if (applyNow) {\n this.setState({ showSpinner: true });\n } else {\n this.setState({ showSpinner: false });\n }\n\n if (intervention.id) {\n this.props.handleSaveUpdateIntervention(intervention);\n } else {\n this.props.handleSaveAddIntervention(intervention);\n }\n };\n\n render() {\n const intervention = this.props.intervention;\n const { form, interventionLevels, interventionLorLevels, optionTrueFalse, optionBadgeProvider, optionSkillTypes } = this.state;\n\n const lors = this.props.lors\n .flatMap((lor, index) => {\n return lor.levels.flatMap((level, index) => {\n return {\n lorName: lor.name,\n lorCode: lor.lorCode,\n level: level.levelNumber,\n };\n });\n })\n .sort((a, b) => (`${a.lorCode}` > `${b.lorCode}` ? 1 : -1));\n\n const categories = this.props.categories\n .flatMap((category, index) => {\n return category.subCategories.flatMap((subCategory, index) => {\n return subCategory.skills.flatMap((skill, index) => {\n return skill.levels.flatMap((level, index) => {\n return {\n skillsName: skill.name,\n skillsCode: skill.skillsCode,\n level: level.level,\n };\n });\n });\n });\n })\n .sort((a, b) => (`${a.skillsCode}` > `${b.skillsCode}` ? 1 : -1));\n\n const actionTypes = [{ name: null }, ...this.props.actionTypes];\n const providers = [{ id: null, name: \"Select Provider\" }, ...this.props.providers];\n\n const publishedOn = form && form.publishedOn && form.publishedOn.value ? this.formatDate_localeString(new Date(form.publishedOn.value)) : null;\n const retireOn = form && form.retireOn && form.retireOn.value ? this.formatDate_localeString(new Date(form.retireOn.value)) : null;\n const reviewOn = form && form.reviewOn && form.reviewOn.value ? this.formatDate_localeString(new Date(form.reviewOn.value)) : null;\n\n return (\n \n \n Training Detail \n \n \n \n \n \n {intervention &&\n form &&\n (!intervention.id || (intervention.id && form.createdAsInactive.value == true)) &&\n form.preLoadToNewUser.value &&\n (form.preLoadToNewUser.value == true || form.preLoadToNewUser.value == \"true\") &&\n form.isActive.value &&\n (form.isActive.value == true || form.isActive.value == \"true\") && (\n {\n this.handleSave(true);\n }}\n disabled={!this.state.isFormValid || this.state.isUpdating}\n >\n {this.state.showSpinner && (\n \n \n )}\n Save and Apply Now\n \n )}\n {\n this.handleSave(false);\n }}\n disabled={!this.state.isFormValid || this.state.isUpdating}\n >\n Save\n \n {\n this.togleDialogModal();\n }}\n disabled={this.state.isUpdating}\n >\n Cancel\n \n \n \n \n \n );\n }\n}\n\nexport default ManageTrainingDetail;\n","import * as interventionActions from \"../../../store/admin/actions/adminInterventionActions\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Form, FormGroup, Label, ListGroup, ListGroupItem, Modal, ModalBody, ModalFooter, ModalHeader, Row } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\n\nclass TrainingBulkUpload extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n showDialog: false,\n selectedFiles: [],\n isImporting: false,\n importMessage: null,\n };\n\n this.excelRef = React.createRef();\n }\n\n componentDidMount() {}\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n }\n }\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.excelRef.current.value = null;\n this.setState({ showDialog: !showDialog, selectedFiles: [] });\n };\n\n handleDownloadTemplate = () => {\n this.props.onIntervention.exportInterventionsDataExcelTemplate().then(() => {\n if (!this.props.loadingExport && !this.props.categoryError) {\n if (this.props.exportData) {\n FileDownload(this.props.exportData, `UploadActionListTemplate.xlsx`);\n }\n }\n });\n };\n\n handleSelectFiles = () => {\n this.excelRef.current.click();\n };\n\n handleSelectExcels = (event) => {\n const selectedFiles = this.state.selectedFiles;\n\n if (event.target.files && event.target.files.length > 0) {\n this.setState({ selectedFiles: [...selectedFiles, ...event.target.files] });\n }\n };\n\n handlePerformUpload = () => {\n this.setState({ isImporting: true });\n this.props.onIntervention.importSkillAttributesDataExcel(this.state.selectedFiles).then(() => {\n if (!this.props.isImporting) {\n if (!this.props.categoryError) {\n this.excelRef.current.value = null;\n\n this.props.generateAlert(\"success\", \"Import actions success.\");\n this.togleDialogModal();\n this.props.handleImportSuccess();\n } else {\n this.props.generateAlert(\"danger\", this.props.categoryError.errData.Message);\n }\n }\n\n this.setState({ isImporting: this.props.isImporting });\n });\n };\n\n render() {\n const { selectedFiles } = this.state;\n\n return (\n \n \n Import Action List \n \n \n \n \n {\n this.handlePerformUpload();\n }}\n disabled={selectedFiles.length == 0 || this.state.isImporting}\n >\n Process Upload\n \n \n Close\n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n categoryError: state.adminIntervention.error,\n loadingExport: state.adminIntervention.loadingExport,\n exportData: state.adminIntervention.exportData,\n\n isImporting: state.adminIntervention.isImporting,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onIntervention: bindActionCreators(interventionActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(TrainingBulkUpload);\n","import * as actionPlanActions from \"../../../store/actions/actionPlanAction\";\nimport * as authActions from \"../../../store/actions/authAction\";\nimport * as categoryActions from \"../../../store/actions/categoryAction\";\nimport * as companyActions from \"../../../store/actions/companyAction\";\nimport * as lorActions from \"../../../store/actions/lorAction\";\nimport * as interventionActions from \"../../../store/admin/actions/adminInterventionActions\";\nimport { dismisAlert, generateAlert } from \"../../../utils/alertUtils\";\nimport { filterArray } from \"../../../utils/filterUtils\";\nimport { contentTranslator } from \"../../../utils/translatorUtils\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport { SkillsTxTableClearSearch } from \"../../common/SkillsTxTableClearSearch\";\nimport { SkillsTxTableSearchBar } from \"../../common/SkillsTxTableSearchBar\";\nimport ManageActionPromotionDetail from \"./ManageActionPromotionDetail\";\nimport ManageTrainingDetail from \"./ManageTrainingDetail\";\nimport TrainingBulkUpload from \"./TrainingBulkUpload\";\nimport { faSquare } from \"@fortawesome/free-regular-svg-icons\";\nimport { faPenToSquare, faTrash, faFileExcel, faMinusCircle, faPlus, faSync, faSquareMinus, faSquareCheck, faInfoCircle } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { withRouter } from \"react-router\";\nimport { Link } from \"react-router-dom\";\nimport { Button, Col, Input, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nconst rowStyle = {\n fontSize: \"12px\",\n};\n\nclass ManageActionPromotions extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: null,\n loading: true,\n alerts: [],\n actionPromotions: [],\n isUpdating: false,\n showDialogInterventionDetailTs: null,\n providers: [],\n actionTypes: [],\n searchProperties: [\"promoterName\", \"promoterEmail\", \"name\", \"description\", \"actionType\", \"lorLevelsString\", \"levelsString\", \"link\"],\n };\n\n this.filterArray = filterArray.bind(this);\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n this.props.onAuth.authCheckState().then(() => {\n this.props.onActionPlan.getActionTypes().then(() => {\n this.setState({\n actionTypes: this.props.actionTypes,\n });\n });\n\n Promise.all([this.props.onCompany.getProviderCompanies(), this.props.onCategory.getCategories(), this.props.onLor.getLors()]).then(() => {\n if (!this.props.loading && !this.props.categoryLoading && !this.props.companyLoading && !this.props.lorLoading) {\n this.setState({ providers: this.props.providers, lors: this.props.lors, categories: this.props.categories });\n this.initData();\n }\n\n this.setState({\n loading: this.props.loading || this.props.categoryLoading || this.props.companyLoading || this.props.lorLoading,\n });\n });\n });\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.actionPromotions !== this.props.actionPromotions) {\n this.setState({\n actionPromotions: this.prepareDatas(this.props.actionPromotions.filter((it) => it.status == \"Active\")), //.sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1))\n });\n }\n }\n\n initData = () => {\n this.props.onIntervention.getActionPromotions().then(() => {\n if (!this.props.interventionLoading) {\n this.setState({\n actionPromotions: this.prepareDatas(this.props.actionPromotions.filter((it) => it.status == \"Active\")), //.sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1))\n });\n }\n\n this.setState({ loading: this.props.loading || this.props.interventionLoading });\n });\n };\n\n handleRefresh = () => {\n this.initData();\n };\n\n prepareDatas = (actionPromotions) => {\n return actionPromotions.map((actionPromotion) => {\n return {\n id: actionPromotion.id,\n promoterId: actionPromotion.promoterId,\n promoterName: actionPromotion.promoterName,\n promoterEmail: actionPromotion.promoterEmail,\n actionType: actionPromotion.actionType,\n name: actionPromotion.name,\n link: actionPromotion.link,\n duration: actionPromotion.duration,\n durationHours: actionPromotion.durationHours,\n description: actionPromotion.description,\n status: actionPromotion.status,\n versionNumber: actionPromotion.versionNumber,\n levelsString: actionPromotion.levels\n .sort((a, b) => `${a.skillsCode}${a.level}` > `${b.skillsCode}${b.level}`)\n .map((level) => {\n return `${level.skillsCode}${level.level}`;\n })\n .join(\", \"),\n levels: actionPromotion.levels,\n lorLevelsString: actionPromotion.lorLevels\n .sort((a, b) => `${a.lorCode}${a.level}` > `${b.lorCode}${b.level}`)\n .map((level) => {\n return `${level.lorCode}${level.level}`;\n })\n .join(\", \"),\n lorLevels: actionPromotion.lorLevels,\n };\n });\n };\n\n openActionPromotionDetail = (actionPromotion) => {\n this.setState({ selectedActionPromotion: actionPromotion, showDialogInterventionDetailTs: new Date() });\n };\n\n handleAddNew = () => {\n this.setState({\n selectedIntervention: {\n id: null,\n },\n showDialogInterventionDetailTs: new Date(),\n });\n };\n\n handleSaveUpdateActionPromotion = (actionPromotion) => {\n this.setState({ isUpdating: true, updateSuccess: false });\n this.props.onIntervention.updateActionPromotion(actionPromotion.id, actionPromotion).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.interventionError) {\n this.generateAlert(\"success\", \"Update action promotion success.\");\n this.setState({ updateSuccess: true });\n } else {\n this.generateAlert(\"danger\", this.props.interventionError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n handleAcceptActionPromotion = (actionPromotionId) => {\n this.setState({ isUpdating: true, acceptSuccess: false });\n this.props.onIntervention.acceptActionPromotion(actionPromotionId).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.interventionError) {\n this.generateAlert(\"success\", \"Action promotion accepted.\");\n this.setState({ acceptSuccess: true });\n } else {\n this.generateAlert(\"danger\", this.props.interventionError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n handleDeclineActionPromotion = (actionPromotionId, declineReason) => {\n this.setState({ isUpdating: true, declineSuccess: false });\n this.props.onIntervention.declineActionPromotion(actionPromotionId, declineReason).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.interventionError) {\n this.generateAlert(\"success\", \"Action promotion declined.\");\n this.setState({ declineSuccess: true });\n } else {\n this.generateAlert(\"danger\", this.props.interventionError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n handleSaveAddIntervention = (intervention) => {\n this.setState({ isUpdating: true, updateSuccess: false });\n this.props.onIntervention.addIntervention(intervention).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.interventionError) {\n this.generateAlert(\"success\", \"Create training success.\");\n this.setState({ updateSuccess: true });\n this.handleRefresh();\n } else {\n this.generateAlert(\"danger\", this.props.interventionError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n handleAfterSearch = () => {\n this.setState({ selectedInterventions: [] });\n };\n\n pad2 = (n) => {\n return (n < 10 ? \"0\" : \"\") + n;\n };\n\n handleReturnToList = () => {\n this.props.history.push(\"/admin/trainings\");\n };\n\n render() {\n const { actionPromotions, searchKeyword, searchProperties } = this.state;\n const pageAssignments = this.props.pageAssignments;\n const pageAssignment = pageAssignments.find((it) => it.pageName == \"Manage Action List\");\n\n const openInterventionDetail = this.openActionPromotionDetail;\n const handleDeleteIntervention = this.handleDeleteIntervention;\n\n const filtered = this.filterArray(actionPromotions, searchKeyword, searchProperties);\n\n const columns = [\n {\n id: \"id\",\n name: \"Action\",\n selector: (row) => row.id,\n sortable: false,\n width: \"7%\",\n center: true,\n format: function (row, index) {\n return (\n \n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Edit\" && op.allow == true) && (\n \n openInterventionDetail(row)} />\n \n Review Action\n \n \n \n )}\n
\n );\n },\n },\n {\n id: \"promoterName\",\n name: \"Promoter Name\",\n selector: (row) => row.promoterName,\n sortable: true,\n wrap: true,\n width: \"10%\",\n },\n {\n id: \"promoterEmail\",\n name: \"Promoter Email\",\n selector: (row) => row.promoterEmail,\n sortable: true,\n width: \"14%\",\n wrap: true,\n format: function (row, index) {\n return {row.promoterEmail} ;\n },\n },\n {\n id: \"actionType\",\n name: \"Action Type\",\n selector: (row) => row.actionType,\n sortable: true,\n width: \"8%\",\n wrap: true,\n },\n {\n id: \"name\",\n name: \"Action Name\",\n selector: (row) => row.name,\n sortable: true,\n width: \"10%\",\n wrap: true,\n },\n {\n id: \"description\",\n name: \"Action Description\",\n selector: (row) => row.description,\n sortable: true,\n width: \"13%\",\n wrap: true,\n },\n {\n id: \"lorLevelsString\",\n name: \"Lor(s) Addressed\",\n selector: (row) => row.lorLevelsString,\n sortable: true,\n width: \"9%\",\n format: function (row, index) {\n return row.lorLevelsString;\n },\n wrap: true,\n },\n {\n id: \"levelsString\",\n name: \"Skill(s) Addressed\",\n selector: (row) => row.levelsString,\n sortable: true,\n width: \"9%\",\n format: function (row, index) {\n return row.levelsString;\n },\n wrap: true,\n },\n {\n id: \"link\",\n name: \"Website\",\n selector: (row) => row.link,\n sortable: true,\n width: \"8%\",\n wrap: true,\n },\n {\n id: \"duration\",\n name: \"Duration (days)\",\n selector: (row) => row.duration,\n sortable: false,\n center: true,\n width: \"6%\",\n },\n {\n id: \"durationHours\",\n name: \"Duration (hours)\",\n selector: (row) => row.durationHours,\n sortable: false,\n center: true,\n width: \"6%\",\n },\n ];\n\n return (\n \n \n
\n ) : (\n \n \n \n \n {\n this.setState({ searchKeyword });\n }}\n >\n \n {\n this.setState({ searchKeyword: \"\" });\n }}\n >\n \n \n \n \n Return to list\n \n \n \n
\n
\n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n error: state.auth.error,\n\n interventionLoading: state.adminIntervention.loading,\n interventionError: state.adminIntervention.error,\n actionPromotions: state.adminIntervention.actionPromotions,\n isUpdating: state.adminIntervention.isUpdating,\n actionTypes: state.actionPlan.actionTypes,\n\n companyLoading: state.company.loading,\n companyError: state.company.error,\n providers: state.company.providers,\n\n categories: state.category.categories,\n categoryLoading: state.category.loading,\n\n lorLoading: state.lor.loading,\n lors: state.lor.lors,\n\n exportData: state.adminIntervention.exportData,\n loadingExport: state.adminIntervention.loadingExport,\n pageAssignments: state.adminPerson.pageAssignments,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onIntervention: bindActionCreators(interventionActions, dispatch),\n onActionPlan: bindActionCreators(actionPlanActions, dispatch),\n onCategory: bindActionCreators(categoryActions, dispatch),\n onCompany: bindActionCreators(companyActions, dispatch),\n onLor: bindActionCreators(lorActions, dispatch),\n };\n};\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(ManageActionPromotions));\n","import changeInput from \"../../../utils/changeInput\";\nimport React, { Component } from \"react\";\nimport { Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row } from \"reactstrap\";\n\nclass ManageProviderDetail extends Component {\n constructor(props) {\n super(props);\n this.state = {\n provider: this.props.provider,\n form: null,\n isFormValid: this.props.provider ? true : false,\n isUpdating: false,\n optionSelected: [\n {\n label: \"No\",\n value: \"No\",\n },\n {\n label: \"Yes\",\n value: \"Yes\",\n },\n {\n label: \"Preferred\",\n value: \"Preferred\",\n },\n ],\n updateSuccess: false,\n };\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.provider !== this.props.provider) {\n this.setState({ provider: this.props.provider });\n }\n\n if (prevProps.isUpdating !== this.props.isUpdating) {\n this.setState({ isUpdating: this.props.isUpdating });\n }\n\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n this.prepareFormState();\n }\n\n if (prevProps.updateSuccess !== this.props.updateSuccess) {\n if (this.props.updateSuccess) {\n this.setState({ showDialog: false });\n }\n }\n }\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.setState({\n showDialog: !showDialog,\n });\n };\n\n prepareFormState = () => {\n this.setState({\n form: {\n name: {\n validation: {\n required: true,\n },\n value: this.props.provider && this.props.provider.name ? this.props.provider.name : \"\",\n valid: this.props.provider ? true : false,\n isValidFormat: this.props.provider ? true : false,\n touched: false,\n },\n website: {\n validation: {\n required: false,\n },\n value: this.props.provider && this.props.provider.website ? this.props.provider.website : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n country: {\n validation: {\n required: false,\n },\n value: this.props.provider && this.props.provider.country ? this.props.provider.country : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n isSelected: {\n validation: {\n required: false,\n isBool: true,\n },\n value: this.props.provider && this.props.provider.isSelected ? this.props.provider.isSelected : false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n isPreferred: {\n validation: {\n required: false,\n isBool: true,\n },\n value: this.props.provider && this.props.provider.isPreferred ? this.props.provider.isPreferred : false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n isFormValid: this.props.provider && this.props.provider.id ? true : false,\n });\n };\n\n handleChange = (event) => {\n const { name, value } = event.target;\n\n if (name == \"selected\") {\n let isSelected = false;\n let isPreferred = false;\n\n if (value == \"Preferred\") {\n isSelected = true;\n isPreferred = true;\n } else if (value == \"Yes\") {\n isSelected = true;\n }\n\n let updateState = changeInput(this.state.form, \"isSelected\", isSelected);\n updateState = changeInput(updateState.form, \"isPreferred\", isPreferred);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n } else {\n let updateState = changeInput(this.state.form, name, value);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n }\n };\n\n handleSave = () => {\n const { form, provider } = this.state;\n\n provider.name = form.name.value;\n provider.website = form.website.value;\n provider.country = form.country.value;\n provider.isSelected = form.isSelected.value;\n provider.isPreferred = form.isPreferred.value;\n\n if (provider.id) {\n this.props.handleSaveUpdateProvider(provider);\n } else {\n this.props.handleSaveAddProvider(provider);\n }\n };\n\n render() {\n const { form, optionSelected } = this.state;\n\n return (\n \n \n Training Provider Detail \n \n \n \n \n \n {\n this.handleSave();\n }}\n disabled={!this.state.isFormValid || this.state.isUpdating}\n >\n Save\n \n {\n this.togleDialogModal();\n }}\n disabled={this.state.isUpdating}\n >\n Cancel\n \n \n \n \n \n );\n }\n}\n\nexport default ManageProviderDetail;\n","import * as companyActions from \"../../../store/actions/companyAction\";\nimport { faCircleCheck, faCancel } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Link } from \"react-router-dom\";\nimport { Col, Input, Popover, PopoverBody, PopoverHeader, Row } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nclass ProviderSelectCell extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n popOverUpdateOpen: false,\n provider: this.props.provider,\n newIsSelected: this.props.provider.isSelected,\n newIsPreferred: this.props.provider.isPreferred,\n dirty: false,\n inProgress: false,\n optionSelected: [\n {\n label: \"No\",\n value: \"No\",\n },\n {\n label: \"Yes\",\n value: \"Yes\",\n },\n {\n label: \"Preferred\",\n value: \"Preferred\",\n },\n ],\n };\n }\n\n componentDidMount() {}\n\n componentWillUnmount() {\n this.setState = (state, callback) => {\n return;\n };\n }\n\n togglePopover = () => {\n const { provider, popOverUpdateOpen } = this.state;\n\n this.setState({ popOverUpdateOpen: !popOverUpdateOpen, dirty: false, inProgress: false, newIsSelected: provider.isSelected, newIsPreferred: provider.isPreferred });\n };\n\n openUpdate = () => {\n const popOverUpdateOpen = this.state.popOverUpdateOpen;\n this.setState({ popOverUpdateOpen: !popOverUpdateOpen });\n };\n\n handleChange = (event) => {\n const { name, value } = event.target;\n\n let isSelected = false;\n let isPreferred = false;\n\n if (value == \"Preferred\") {\n isSelected = true;\n isPreferred = true;\n } else if (value == \"Yes\") {\n isSelected = true;\n }\n\n this.setState({\n newIsSelected: isSelected,\n newIsPreferred: isPreferred,\n dirty: true,\n });\n };\n\n handleUpdateSelected = () => {\n const { provider, newIsSelected, newIsPreferred } = this.state;\n\n provider.isSelected = newIsSelected;\n provider.isPreferred = newIsPreferred;\n\n this.setState({ inProgress: true });\n this.props.onCompany.updateCompanyProviderSelection(provider.id, provider).then(() => {\n if (!this.props.isUpdating && !this.props.error) {\n this.setState({ popOverUpdateOpen: false });\n }\n\n this.setState({ inProgress: this.props.isUpdating });\n });\n };\n\n render() {\n const { provider, newIsSelected, newIsPreferred, optionSelected } = this.state;\n\n return (\n \n {this.props.allowEdit ? (\n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n {it.label}\n \n ))}\n \n \n
\n \n \n \n ) : (\n {provider && (provider.isPreferred ? \"Preferred\" : provider.isSelected ? \"Yes\" : \"No\")} \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n isUpdating: state.company.isUpdating,\n error: state.company.error,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onCompany: bindActionCreators(companyActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ProviderSelectCell);\n","import * as authActions from \"../../../store/actions/authAction\";\nimport * as companyActions from \"../../../store/actions/companyAction\";\nimport * as countryActions from \"../../../store/actions/countryAction\";\nimport { dismisAlert, generateAlert } from \"../../../utils/alertUtils\";\nimport { contentTranslator } from \"../../../utils/translatorUtils\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport { SkillsTxTableClearSearch } from \"../../common/SkillsTxTableClearSearch\";\nimport { SkillsTxTableSearchBar } from \"../../common/SkillsTxTableSearchBar\";\nimport ManageProviderDetail from \"./ManageProviderDetail\";\nimport ProviderSelectCell from \"./ProviderSelectCell\";\nimport { faPenToSquare, faSync, faPlus } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nconst rowStyle = {\n fontSize: \"12px\",\n};\n\nclass ManageProviders extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: null,\n loading: true,\n alerts: [],\n providers: [],\n isUpdating: false,\n selectedProvider: null,\n showDialogProviderDetailTs: null,\n countries: [],\n searchProperties: [\"name\", \"website\", \"country\"],\n };\n\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n this.props.onAuth.authCheckState().then(() => {\n this.props.onCountry.getCountries().then(() => {\n let countries = [\n {\n label: \"Select Country\",\n value: \"\",\n },\n ];\n if (this.props.countries) {\n countries.push(...this.props.countries.map((country) => ({ label: country.name, value: country.name })));\n }\n\n this.setState({ countries });\n });\n\n this.initData();\n this.setState({ loading: this.props.loading });\n });\n }\n\n componentWillUnmount() {\n this.setState = (state, callback) => {\n return;\n };\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.providers !== this.props.providers) {\n this.setState({ providers: this.reformProviders(this.props.providers.sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1))) });\n }\n }\n\n reformProviders = (providers) => {\n return providers.map((it) => {\n return {\n id: it.id,\n name: it.name,\n website: it.website,\n address: it.address,\n country: it.country,\n companyType: it.companyType,\n providerCompanyId: it.providerCompanyId,\n providerCompany: it.providerCompany,\n isSelected: it.isSelected,\n isPreferred: it.isPreferred,\n selected: it.isPreferred ? \"Preferred\" : it.isSelected ? \"Yes\" : \"No\",\n };\n });\n };\n\n initData = () => {\n this.props.onCompany.getProviderCompanies().then(() => {\n if (!this.props.companyLoading) {\n this.setState({ providers: this.reformProviders(this.props.providers) });\n }\n\n this.setState({ loading: this.props.loading || this.props.companyLoading });\n });\n };\n\n handleRefresh = () => {\n this.initData();\n };\n\n openProviderDetail = (provider) => {\n this.setState({ selectedProvider: provider, showDialogProviderDetailTs: new Date() });\n };\n\n handleAddNew = () => {\n this.setState({\n selectedProvider: {\n id: null,\n companyType: \"Provider\",\n name: null,\n website: null,\n isSelected: false,\n isPreferred: false,\n },\n showDialogProviderDetailTs: new Date(),\n });\n };\n\n handleSaveUpdateProvider = (provider) => {\n this.setState({ isUpdating: true, updateSuccess: false });\n this.props.onCompany.updateCompany(provider.id, provider).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.companyError) {\n this.generateAlert(\"success\", \"Update training provider success.\");\n this.setState({ updateSuccess: true });\n } else {\n this.generateAlert(\"danger\", this.props.companyError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n handleSaveAddProvider = (provider) => {\n this.setState({ isUpdating: true, updateSuccess: false });\n this.props.onCompany.createCompany(provider).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.companyError) {\n this.generateAlert(\"success\", \"Create training provider success.\");\n this.setState({ updateSuccess: true });\n this.handleRefresh();\n } else {\n this.generateAlert(\"danger\", this.props.companyError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n onTableFilterChange = (e, searchType) => {\n let columnSearchKeywords = this.state.columnSearchKeywords;\n if (!columnSearchKeywords) {\n columnSearchKeywords = [];\n }\n\n if (columnSearchKeywords.find((it) => it.name == e.target.name)) {\n let columnSearchKeyword = columnSearchKeywords.find((it) => it.name == e.target.name);\n columnSearchKeyword.value = e.target.value;\n } else {\n columnSearchKeywords.push({\n name: e.target.name,\n value: e.target.value,\n searchType,\n });\n }\n\n this.setState({ columnSearchKeywords });\n };\n\n render() {\n const { providers, searchKeyword, searchProperties, columnSearchKeywords } = this.state;\n const pageAssignments = this.props.pageAssignments;\n const pageAssignment = pageAssignments.find((it) => it.pageName == \"Select Training Providers\");\n\n const openProviderDetail = this.openProviderDetail;\n const onTableFilterChange = this.onTableFilterChange;\n\n const columns = [\n {\n id: \"id\",\n name: \"#\",\n selector: (row) => row.id,\n sortable: false,\n width: \"10%\",\n format: function (row, index) {\n return (\n \n openProviderDetail(row)} />\n \n Update Provider\n \n
\n );\n },\n omit: true,\n },\n {\n id: \"name\",\n name: (\n \n Name\n
\n ),\n selector: (row) => row.name,\n sortable: true,\n width: \"30%\",\n },\n {\n id: \"website\",\n name: (\n \n Website\n
\n ),\n selector: (row) => row.website,\n sortable: true,\n width: \"40%\",\n },\n {\n id: \"country\",\n name: (\n \n Country\n
\n ),\n selector: (row) => row.country,\n sortable: true,\n width: \"20%\",\n },\n {\n id: \"isSelected\",\n name: (\n \n Selected\n
\n ),\n selector: (row) => row.isSelected,\n sortable: false,\n width: \"10%\",\n format: function (row, index) {\n return op.operation == \"Edit\" && op.allow == true) ? true : false}> ;\n },\n },\n ];\n\n const selectRow = {\n mode: \"checkbox\",\n clickToSelect: true,\n selected: this.state.personsSelected,\n onSelect: this.handleOnSelect,\n onSelectAll: this.handleOnSelectAll,\n hideSelectColumn: true,\n };\n\n return (\n \n \n
\n ) : (\n \n \n \n \n {\n this.setState({ searchKeyword });\n }}\n >\n \n {\n this.setState({ searchKeyword: \"\" });\n }}\n >\n \n \n \n
\n
\n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n error: state.auth.error,\n\n companyLoading: state.company.loading,\n companyError: state.company.error,\n providers: state.company.providers,\n isUpdating: state.company.isUpdating,\n\n countries: state.country.countries,\n pageAssignments: state.adminPerson.pageAssignments,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onCompany: bindActionCreators(companyActions, dispatch),\n onCountry: bindActionCreators(countryActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ManageProviders);\n","import * as authActions from \"../../../store/actions/authAction\";\nimport * as jobActions from \"../../../store/actions/jobAction\";\nimport * as interventionActions from \"../../../store/admin/actions/adminInterventionActions\";\nimport { dismisAlert, generateAlert } from \"../../../utils/alertUtils\";\nimport { filterArray } from \"../../../utils/filterUtils\";\nimport { contentTranslator } from \"../../../utils/translatorUtils\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport { SkillsTxTableSearchBar } from \"../../common/SkillsTxTableSearchBar\";\nimport { faPenToSquare, faTrash, faCheck, faArrowRight, faEnvelope, faFileExcel, faInfoCircle, faMinusCircle, faPlus, faSync, faTimes } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { Link } from \"react-router-dom\";\nimport { Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nconst rowStyle = {\n fontSize: \"12px\",\n};\n\nconst headerStyle = {\n color: \"#2B2B2B\",\n fontSize: \"18px\",\n fontFamily: \"IBMPlexSans-Bold\",\n};\n\nclass ManageTrainingJobs extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: null,\n loading: true,\n alerts: [],\n interventions: [],\n isUpdating: false,\n selectedIntervention: null,\n selectedInterventions: [],\n jobs: [],\n optionJobs: [],\n assignedJobs: [],\n assignedJobsSelected: [],\n selectedJobId: null,\n searchProperties: [\"name\", \"companyName\", \"lorLevelsString\", \"levelsString\"],\n };\n\n this.filterArray = filterArray.bind(this);\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n this.props.onAuth.authCheckState().then(() => {\n this.props.onJob.getJobs().then(() => {\n if (!this.props.jobsLoading) {\n this.setState({\n jobs: this.props.jobs,\n });\n\n this.initData();\n }\n\n this.setState({\n loading: this.props.loading || this.props.jobsLoading,\n });\n });\n });\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.interventions !== this.props.interventions) {\n this.setState({ interventions: this.prepareInterventions(this.props.interventions).sort((a, b) => (`${a.company.name} ${a.name}` > `${b.company.name} ${b.name}` ? 1 : -1)) });\n }\n }\n\n initData = () => {\n const selectedInterventions = this.state.selectedInterventions;\n let selectedInterventionId = null;\n\n if (selectedInterventions && selectedInterventions.length > 0) {\n selectedInterventionId = selectedInterventions[0];\n }\n\n this.props.onIntervention.getInterventions(true, true, false).then(() => {\n if (!this.props.interventionLoading) {\n const interventions = this.prepareInterventions(this.props.interventions).sort((a, b) => (`${a.company.name} ${a.name}` > `${b.company.name} ${b.name}` ? 1 : -1));\n if (selectedInterventionId) {\n if (!interventions.find((it) => it.id == selectedInterventionId)) {\n if (interventions[0]) {\n selectedInterventionId = interventions[0].id;\n interventions[0].toggleSelected = true;\n }\n } else {\n const intervention = interventions.find((it) => it.id == selectedInterventionId);\n intervention.toggleSelected = true;\n }\n } else {\n if (interventions[0]) {\n selectedInterventionId = interventions[0].id;\n interventions[0].toggleSelected = true;\n }\n }\n\n this.setState(\n {\n interventions,\n selectedInterventions: [selectedInterventionId],\n },\n () => {\n this.handleSelectRow(selectedInterventionId);\n }\n );\n }\n\n this.setState({ loading: this.props.loading || this.props.interventionLoading });\n });\n };\n\n handleRefresh = () => {\n this.initData();\n };\n\n prepareInterventions = (interventions) => {\n return interventions.map((intervention) => {\n return {\n id: intervention.id,\n companyId: intervention.companyId,\n company: intervention.company,\n companyName: intervention.company.name,\n actionType: intervention.actionType,\n name: intervention.name,\n link: intervention.link,\n duration: intervention.duration,\n description: intervention.description,\n sfiaVersion: intervention.sfiaVersion,\n versionNumber: intervention.versionNumber,\n levelsString: intervention.levels\n .sort((a, b) => `${a.skillsCode}${a.level}` > `${b.skillsCode}${b.level}`)\n .map((level) => {\n return `${level.skillsCode}${level.level}`;\n })\n .join(\", \"),\n levels: intervention.levels,\n lorLevelsString: intervention.lorLevels\n .sort((a, b) => `${a.lorCode}${a.level}` > `${b.lorCode}${b.level}`)\n .map((level) => {\n return `${level.lorCode}${level.level}`;\n })\n .join(\", \"),\n lorLevels: intervention.lorLevels,\n };\n });\n };\n\n handleAfterSearch = (searchKeyword) => {\n const { interventions, searchProperties } = this.state;\n const filtered = this.filterArray(interventions, searchKeyword, searchProperties);\n\n interventions.forEach((it) => {\n it.toggleSelected = false;\n });\n\n if (filtered.length > 0) {\n const row = filtered[0];\n const intervention = interventions.find((it) => it.id == row.id);\n intervention.toggleSelected = true;\n this.handleSelectRow(intervention.id);\n this.setState({ interventions: [...interventions], selectedInterventions: [intervention.id] });\n } else {\n this.handleSelectRow();\n this.setState({ interventions: [...interventions], selectedInterventions: [] });\n }\n };\n\n handleOnSelect = (row) => {\n if (this.state.isUpdating) {\n return false;\n }\n\n const interventions = this.state.interventions;\n const updatedData = interventions.find((it) => it.id == row.id);\n\n if (!updatedData.toggleSelected) {\n interventions.forEach((it) => {\n it.toggleSelected = false;\n });\n\n updatedData.toggleSelected = true;\n\n this.handleSelectRow(row.id);\n this.setState({ interventions: [...interventions], selectedInterventions: [row.id] });\n }\n };\n\n handleSelectRow = (interventionId) => {\n const interventions = this.props.interventions;\n const jobs = this.props.jobs;\n const { selectedInterventions, assignedJobsSelected } = this.state;\n\n let selectedIntervention = null;\n\n if (selectedInterventions.length > 0) {\n selectedIntervention = selectedInterventions[0];\n }\n\n selectedIntervention = interventions.find((it) => it.id == interventionId);\n\n if (selectedIntervention) {\n let assignedJobIds = [];\n if (selectedIntervention.jobs && selectedIntervention.jobs.length > 0) {\n assignedJobIds = [\n ...selectedIntervention.jobs.map((job) => {\n return job.jobId;\n }),\n ];\n }\n const optionJobs = [\n {\n value: null,\n label: \"Select Requirement\",\n },\n ...jobs\n .filter((it) => !assignedJobIds.includes(it.id))\n .map((job) => {\n return {\n value: job.id,\n label: job.name,\n };\n })\n .sort((a, b) => (`${a.label}` > `${b.label}` ? 1 : -1)),\n ];\n\n this.setState({\n selectedInterventions: interventionId ? [interventionId] : [],\n selectedInterventionId: interventionId,\n selectedIntervention,\n optionJobs,\n assignedJobs: selectedIntervention ? selectedIntervention.jobs : [],\n assignedJobsSelected: selectedIntervention != interventionId ? [] : [...assignedJobsSelected],\n });\n } else {\n const optionJobs = [\n {\n value: null,\n label: \"Select Requirement\",\n },\n ...jobs\n .map((job) => {\n return {\n value: job.id,\n label: job.name,\n };\n })\n .sort((a, b) => (`${a.label}` > `${b.label}` ? 1 : -1)),\n ];\n\n this.setState({\n selectedInterventions: interventionId ? [interventionId] : [],\n selectedInterventionId: interventionId,\n selectedIntervention,\n optionJobs,\n assignedJobs: selectedIntervention ? selectedIntervention.jobs : [],\n assignedJobsSelected: selectedIntervention != interventionId ? [] : [...assignedJobsSelected],\n });\n }\n };\n\n handleOnSelectAssignedJob = (row) => {\n if (this.state.isUpdating) {\n return false;\n }\n\n const { assignedJobs } = this.state;\n let assignedJobsSelected = this.state.assignedJobsSelected;\n\n if (assignedJobsSelected) {\n const assignedJob = assignedJobs.find((it) => it.id == row.id);\n if (assignedJobsSelected.find((it) => it == row.id)) {\n assignedJob.toggleSelected = false;\n\n const assignedJobSelected = assignedJobsSelected.find((it) => it == row.id);\n var index = assignedJobsSelected.indexOf(assignedJobSelected);\n if (index !== -1) {\n assignedJobsSelected.splice(index, 1);\n }\n } else {\n assignedJob.toggleSelected = true;\n assignedJobsSelected = [...assignedJobsSelected, row.id];\n }\n } else {\n const assignedJob = assignedJobs.find((it) => it.id == row.id);\n assignedJob.toggleSelected = true;\n assignedJobsSelected = [row.id];\n }\n\n this.setState({ assignedJobs: [...assignedJobs], assignedJobsSelected: [...assignedJobsSelected] });\n };\n\n handleChangeAssignJob = (event) => {\n let { name, value } = event.target;\n\n if (value == \"Select Requirement\") {\n this.setState({ selectedJobId: null });\n } else {\n this.setState({ selectedJobId: value });\n }\n };\n\n handleRemoveInterventionJobsClick = () => {\n const { selectedIntervention, assignedJobsSelected, selectedInterventionId } = this.state;\n this.setState({ isUpdating: true });\n\n this.props.onIntervention.deleteInterventionJobs(assignedJobsSelected).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.interventionError) {\n const interventions = this.prepareInterventions(this.props.interventions).sort((a, b) => (`${a.company.name} ${a.name}` > `${b.company.name} ${b.name}` ? 1 : -1));\n if (selectedInterventionId) {\n if (!interventions.find((it) => it.id == selectedInterventionId)) {\n if (interventions[0]) {\n selectedInterventionId = interventions[0].id;\n interventions[0].toggleSelected = true;\n }\n } else {\n const intervention = interventions.find((it) => it.id == selectedInterventionId);\n intervention.toggleSelected = true;\n }\n }\n\n this.setState(\n {\n selectedJobId: null,\n interventions,\n },\n () => {\n this.handleSelectRow(null);\n setTimeout(() => {\n this.handleSelectRow(selectedIntervention.id);\n }, 200);\n }\n );\n } else {\n this.generateAlert(\"danger\", this.props.interventionError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n handleAssignJobClick = () => {\n const { selectedIntervention, optionJobs, selectedInterventionId } = this.state;\n let selectedJobId = this.state.selectedJobId;\n this.setState({ isUpdating: true });\n\n this.props.onIntervention.assignInterventionJob(selectedIntervention.id, selectedJobId).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.interventionError) {\n const optionJob = optionJobs.find((it) => it.value == selectedJobId);\n if (optionJob) {\n const index = optionJobs.indexOf(optionJob);\n if (index !== -1) {\n const nextOption = optionJobs[index + 1];\n if (nextOption) {\n selectedJobId = nextOption.value;\n } else {\n selectedJobId = null;\n }\n } else {\n selectedJobId = null;\n }\n } else {\n selectedJobId = null;\n }\n\n const interventions = this.prepareInterventions(this.props.interventions).sort((a, b) => (`${a.company.name} ${a.name}` > `${b.company.name} ${b.name}` ? 1 : -1));\n if (selectedInterventionId) {\n if (!interventions.find((it) => it.id == selectedInterventionId)) {\n if (interventions[0]) {\n selectedInterventionId = interventions[0].id;\n interventions[0].toggleSelected = true;\n }\n } else {\n const intervention = interventions.find((it) => it.id == selectedInterventionId);\n intervention.toggleSelected = true;\n }\n }\n\n this.setState(\n {\n selectedJobId,\n interventions,\n },\n () => {\n this.handleSelectRow(null);\n setTimeout(() => {\n this.handleSelectRow(selectedIntervention.id);\n }, 200);\n }\n );\n } else {\n this.generateAlert(\"danger\", this.props.interventionError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n render() {\n const pageAssignments = this.props.pageAssignments;\n const pageAssignment = pageAssignments.find((it) => it.pageName == \"Assign Action Requirements\");\n\n const handleOnSelect = this.handleOnSelect;\n const handleOnSelectAssignedJob = this.handleOnSelectAssignedJob;\n\n const columns = [\n {\n id: \"name\",\n name: \"Name\",\n selector: (row) => row.name,\n sortable: false,\n width: \"100%\",\n style: { cursor: \"pointer\" },\n wrap: true,\n format: function (row, index) {\n return (\n handleOnSelect(row)}>\n {row.company.name} \n {row.name} \n {row.lorLevelsString || row.levelsString ?
\n );\n },\n },\n ];\n\n const columnsJobs = [\n {\n id: \"jobName\",\n name: \"Job Name\",\n selector: (row) => row.jobName,\n sortable: false,\n wrap: true,\n width: \"100%\",\n style: { cursor: \"pointer\" },\n format: function (row, index) {\n return (\n handleOnSelectAssignedJob(row)}>\n {row.jobName} \n
\n );\n },\n },\n ];\n\n return (\n \n \n
\n ) : (\n \n \n \n Action List\n
\n \n
\n {\n this.setState({ searchKeywordLevel1 });\n this.handleAfterSearch(searchKeywordLevel1);\n }}\n >\n \n
\n
\n \n
\n
\n Assigned Requirements\n
\n \n \n 0) || this.state.isUpdating}\n >\n \n
\n \n \n
\n \n )}\n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Add\" && op.allow == true) && (\n \n \n \n {it.label}\n \n ))}\n \n \n
\n \n \n
\n \n \n )}\n \n
\n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n error: state.auth.error,\n\n interventionLoading: state.adminIntervention.loading,\n interventionError: state.adminIntervention.error,\n interventions: state.adminIntervention.interventions,\n isUpdating: state.adminIntervention.isUpdating,\n\n jobsLoading: state.job.loading,\n jobsError: state.job.error,\n jobs: state.job.jobs,\n pageAssignments: state.adminPerson.pageAssignments,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onIntervention: bindActionCreators(interventionActions, dispatch),\n onJob: bindActionCreators(jobActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ManageTrainingJobs);\n","import * as actionPlanActions from \"../../../store/actions/actionPlanAction\";\nimport * as authActions from \"../../../store/actions/authAction\";\nimport * as categoryActions from \"../../../store/actions/categoryAction\";\nimport * as companyActions from \"../../../store/actions/companyAction\";\nimport * as lorActions from \"../../../store/actions/lorAction\";\nimport * as interventionActions from \"../../../store/admin/actions/adminInterventionActions\";\nimport { dismisAlert, generateAlert } from \"../../../utils/alertUtils\";\nimport { filterArray } from \"../../../utils/filterUtils\";\nimport { contentTranslator } from \"../../../utils/translatorUtils\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport { SkillsTxTableClearSearch } from \"../../common/SkillsTxTableClearSearch\";\nimport { SkillsTxTableSearchBar } from \"../../common/SkillsTxTableSearchBar\";\nimport ManageTrainingDetail from \"./ManageTrainingDetail\";\nimport TrainingBulkUpload from \"./TrainingBulkUpload\";\nimport { faSquare } from \"@fortawesome/free-regular-svg-icons\";\nimport { faPenToSquare, faTrash, faFileExcel, faMinusCircle, faPlus, faSync, faSquareMinus, faSquareCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { withRouter } from \"react-router\";\nimport { Button, Col, Input, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nconst rowStyle = {\n fontSize: \"12px\",\n};\n\nclass ManageTrainings extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: null,\n loading: true,\n alerts: [],\n interventions: [],\n isUpdating: false,\n selectedInterventions: [],\n selectedIntervention: null,\n showDialogInterventionDetailTs: null,\n providers: [],\n actionTypes: [],\n searchProperties: [\"name\", \"actionType\", \"lorLevelsString\", \"levelsString\", \"link\"],\n numberActiveActionPromotions: null,\n };\n\n this.filterArray = filterArray.bind(this);\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n const { containerConfig, pageAssignments } = this.props;\n const pageAssignment = pageAssignments ? pageAssignments.find((it) => it.pageName == \"Manage Action List\") : null;\n\n this.props.onAuth.authCheckState().then(() => {\n this.props.onActionPlan.getActionTypes().then(() => {\n let actionTypes = [...this.props.actionTypes];\n\n if (containerConfig && containerConfig.allowBadgesFromActions && pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Manage Badge Actions\" && op.allow == true)) {\n actionTypes = [\n {\n id: \"Accredited Badge Issuing Action\",\n name: \"Accredited Badge Issuing Action\",\n },\n ...actionTypes,\n ];\n }\n\n this.setState({\n actionTypes: [...actionTypes],\n });\n });\n\n this.props.onIntervention.getNoOfActiveActionPromotions().then(() => {\n this.setState({\n numberActiveActionPromotions: this.props.numberActiveActionPromotions,\n });\n });\n\n Promise.all([this.props.onCompany.getProviderCompanies(), this.props.onCategory.getCategories(), this.props.onLor.getLors()]).then(() => {\n if (!this.props.loading && !this.props.categoryLoading && !this.props.companyLoading && !this.props.lorLoading) {\n this.setState({ providers: this.props.providers, lors: this.props.lors, categories: this.props.categories });\n this.initData();\n }\n\n this.setState({\n loading: this.props.loading || this.props.categoryLoading || this.props.companyLoading || this.props.lorLoading,\n });\n });\n });\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.interventions !== this.props.interventions) {\n //this.setState({ providers: this.props.providers.sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1)) });\n this.setState({ interventions: this.prepareInterventions(this.props.interventions).sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1)) });\n }\n }\n\n initData = () => {\n this.props.onIntervention.getInterventions(false, false, true).then(() => {\n if (!this.props.interventionLoading) {\n this.setState({ interventions: this.prepareInterventions(this.props.interventions).sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1)) });\n }\n\n this.setState({ loading: this.props.loading || this.props.interventionLoading });\n });\n };\n\n handleRefresh = () => {\n this.props.onIntervention.getNoOfActiveActionPromotions().then(() => {\n this.setState({\n numberActiveActionPromotions: this.props.numberActiveActionPromotions,\n });\n });\n\n this.initData();\n };\n\n prepareInterventions = (interventions) => {\n return interventions.map((intervention) => {\n return {\n id: intervention.id,\n companyId: intervention.companyId,\n company: intervention.company,\n actionType: intervention.actionType,\n name: intervention.name,\n link: intervention.link,\n duration: intervention.duration,\n durationHours: intervention.durationHours,\n description: intervention.description,\n isActive: intervention.isActive,\n active: intervention.isActive ? \"True\" : \"False\",\n isValidated: intervention.isValidated,\n publishedOn: intervention.publishedOn,\n reviewOn: intervention.reviewOn,\n retireOn: intervention.retireOn,\n sfiaVersion: intervention.sfiaVersion,\n versionNumber: intervention.versionNumber,\n levelsString: intervention.levels\n .sort((a, b) => `${a.skillsCode}${a.level}` > `${b.skillsCode}${b.level}`)\n .map((level) => {\n return `${level.skillsCode}${level.level}`;\n })\n .join(\", \"),\n levels: intervention.levels,\n lorLevelsString: intervention.lorLevels\n .sort((a, b) => `${a.lorCode}${a.level}` > `${b.lorCode}${b.level}`)\n .map((level) => {\n return `${level.lorCode}${level.level}`;\n })\n .join(\", \"),\n lorLevels: intervention.lorLevels,\n badgeIssuer: intervention.badgeIssuer,\n inUse: intervention.inUse,\n preLoadToNewUser: intervention.preLoadToNewUser,\n preLoadToNewUserString: intervention.preLoadToNewUser ? \"True\" : \"False\",\n targetCompletionDays: intervention.targetCompletionDays,\n createdAsInactive: intervention.createdAsInactive,\n };\n });\n };\n\n openInterventionDetail = (intervention) => {\n this.setState({ selectedIntervention: intervention, showDialogInterventionDetailTs: new Date() });\n };\n\n handleAddNew = () => {\n this.setState({\n selectedIntervention: {\n id: null,\n },\n showDialogInterventionDetailTs: new Date(),\n });\n };\n\n handleSaveUpdateIntervention = (intervention) => {\n this.setState({ isUpdating: true, updateSuccess: false });\n this.props.onIntervention.updateIntervention(intervention.id, intervention).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.interventionError) {\n this.generateAlert(\"success\", \"Update training success.\");\n this.setState({ updateSuccess: true });\n } else {\n this.generateAlert(\"danger\", this.props.interventionError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n handleSaveAddIntervention = (intervention) => {\n this.setState({ isUpdating: true, updateSuccess: false });\n this.props.onIntervention.addIntervention(intervention).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.interventionError) {\n this.generateAlert(\"success\", \"Create training success.\");\n this.setState({ updateSuccess: true });\n this.handleRefresh();\n } else {\n this.generateAlert(\"danger\", this.props.interventionError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n handleRowClick = (row) => {\n const interventions = this.state.interventions;\n const updatedData = interventions.find((it) => it.id == row.id);\n if (!updatedData.inUse) {\n updatedData.toggleSelected = !updatedData.toggleSelected;\n }\n\n this.setState({ interventions: [...interventions], selectedInterventions: interventions.filter((it) => it.toggleSelected).map((row) => row.id) });\n };\n\n handleSelectAll = () => {\n const { interventions, searchKeyword, searchProperties, columnSearchKeywords } = this.state;\n let selectAll = false;\n\n const filtered = this.filterArray(interventions, searchKeyword, searchProperties, columnSearchKeywords);\n\n if (filtered.filter((it) => !it.inUse && it.toggleSelected).length == 0) {\n selectAll = true;\n } else if (filtered.filter((it) => !it.inUse && !it.toggleSelected).length == 0) {\n selectAll = false;\n } else {\n selectAll = true;\n }\n\n interventions.forEach((it) => {\n it.toggleSelected = false;\n });\n\n if (selectAll) {\n interventions.forEach((it) => {\n if (!it.inUse) {\n if (filtered.find((f) => f.id == it.id)) {\n it.toggleSelected = true;\n }\n }\n });\n }\n\n this.setState({ interventions: [...interventions], selectedInterventions: interventions.filter((it) => it.toggleSelected).map((row) => row.id) });\n };\n\n handleClearSelection = () => {\n const interventions = this.state.interventions;\n\n interventions.forEach((it) => {\n it.toggleSelected = false;\n });\n\n this.setState({ interventions: [...interventions] });\n };\n\n handleDeleteIntervention = (intervention) => {\n if (window.confirm(\"Are you sure want to delete this action?\")) {\n this.setState({ isUpdating: true });\n\n this.props.onIntervention.deleteIntervention(intervention.id).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.interventionError) {\n this.generateAlert(\"success\", \"Delete action success.\");\n this.handleRefresh();\n } else {\n this.generateAlert(\"danger\", this.props.interventionError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n }\n };\n\n handleDeleteInterventions = () => {\n if (window.confirm(\"Are you sure want to delete selected actions?\")) {\n this.setState({ isUpdating: true });\n\n this.props.onIntervention.deleteInterventions(this.state.selectedInterventions).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.interventionError) {\n this.setState({ selectedInterventions: [] });\n this.generateAlert(\"success\", \"Delete actions success.\");\n this.handleRefresh();\n } else {\n this.generateAlert(\"danger\", this.props.interventionError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n }\n };\n\n handleAfterSearch = () => {\n this.setState({ selectedInterventions: [] });\n };\n\n pad2 = (n) => {\n return (n < 10 ? \"0\" : \"\") + n;\n };\n\n handleExportInterventions = () => {\n const timezoneOffset = (new Date().getTimezoneOffset() * -1) / 60;\n this.props.onIntervention.exportInterventionsDataExcel(timezoneOffset).then(() => {\n if (!this.props.loadingExport && !this.props.companyError) {\n if (this.props.exportData) {\n var today = new Date();\n var strToday = today.getFullYear() + this.pad2(today.getMonth() + 1) + this.pad2(today.getDate()) + \"_\" + this.pad2(today.getHours()) + this.pad2(today.getMinutes()) + this.pad2(today.getSeconds());\n FileDownload(this.props.exportData, `ExportActions_${strToday}.xlsx`);\n }\n }\n });\n };\n\n handleImportInterventions = () => {\n this.setState({ showDialogImportTs: new Date() });\n };\n\n handleImportSuccess = () => {\n this.handleRefresh();\n };\n\n handleManageActionPromotions = () => {\n this.props.history.push(\"/admin/actionpromotions\");\n };\n\n onTableFilterChange = (e, searchType) => {\n let columnSearchKeywords = this.state.columnSearchKeywords;\n if (!columnSearchKeywords) {\n columnSearchKeywords = [];\n }\n\n if (columnSearchKeywords.find((it) => it.name == e.target.name)) {\n let columnSearchKeyword = columnSearchKeywords.find((it) => it.name == e.target.name);\n columnSearchKeyword.value = e.target.value;\n } else {\n columnSearchKeywords.push({\n name: e.target.name,\n value: e.target.value,\n searchType,\n });\n }\n\n this.setState({ columnSearchKeywords });\n };\n\n render() {\n const { interventions, searchKeyword, searchProperties, columnSearchKeywords } = this.state;\n const pageAssignments = this.props.pageAssignments;\n const pageAssignment = pageAssignments.find((it) => it.pageName == \"Manage Action List\");\n\n const openInterventionDetail = this.openInterventionDetail;\n const handleDeleteIntervention = this.handleDeleteIntervention;\n const handleRowClick = this.handleRowClick;\n const handleSelectAll = this.handleSelectAll;\n const onTableFilterChange = this.onTableFilterChange;\n\n const filtered = this.filterArray(interventions, searchKeyword, searchProperties, columnSearchKeywords);\n\n const columns = [\n {\n id: \"id\",\n name: (\n \n
\n ),\n selector: (row) => row.id,\n sortable: false,\n width: \"5%\",\n center: true,\n format: function (row, index) {\n return (\n !row.inUse && (\n \n
\n )\n );\n },\n omit: pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Delete\" && op.allow == true) ? false : true,\n },\n {\n id: \"action\",\n name: \"Action\",\n selector: (row) => row.id,\n sortable: false,\n width: \"6%\",\n center: true,\n format: function (row, index) {\n return (\n \n {row.inUse ? (\n \"In Use\"\n ) : (\n \n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Edit\" && op.allow == true) && (\n \n openInterventionDetail(row)} />\n \n Update Action\n \n \n \n )}\n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Delete\" && op.allow == true) && (\n \n handleDeleteIntervention(row)} />\n \n Delete Action\n \n \n )}\n \n )}\n
\n );\n },\n omit: pageAssignment && pageAssignment.operations && (pageAssignment.operations.find((op) => op.operation == \"Edit\" && op.allow == true) || pageAssignment.operations.find((op) => op.operation == \"Delete\" && op.allow == true)) ? false : true,\n },\n {\n id: \"name\",\n name: (\n \n Name\n
\n ),\n selector: (row) => row.name,\n sortable: true,\n wrap: true,\n width: \"13%\",\n },\n {\n id: \"actionType\",\n name: (\n \n Type\n
\n ),\n selector: (row) => row.actionType,\n sortable: true,\n width: \"8%\",\n wrap: true,\n },\n {\n id: \"lorLevelsString\",\n name: (\n \n Lor\n it.name == \"lorLevelsString\") ? columnSearchKeywords.find((it) => it.name == \"lorLevelsString\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.lorLevelsString,\n sortable: true,\n width: \"10%\",\n format: function (row, index) {\n return row.lorLevelsString;\n },\n wrap: true,\n },\n {\n id: \"levelsString\",\n name: (\n \n Skills\n
\n ),\n selector: (row) => row.levelsString,\n sortable: true,\n width: \"10%\",\n format: function (row, index) {\n return row.levelsString;\n },\n wrap: true,\n },\n {\n id: \"isActive\",\n name: (\n \n Active\n
\n ),\n selector: (row) => row.isActive,\n sortable: true,\n width: \"6%\",\n format: function (row, index) {\n return row.isActive ? \"True\" : \"False\";\n },\n center: true,\n },\n {\n id: \"duration\",\n name: (\n \n Duration (days)\n
\n ),\n selector: (row) => row.duration,\n sortable: false,\n center: true,\n width: \"6%\",\n },\n {\n id: \"durationHours\",\n name: (\n \n Duration (hours)\n it.name == \"durationHours\") ? columnSearchKeywords.find((it) => it.name == \"durationHours\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.durationHours,\n sortable: false,\n center: true,\n width: \"6%\",\n },\n {\n id: \"preLoadToNewUser\",\n name: (\n \n Pre Load To New User\n it.name == \"preLoadToNewUserString\") ? columnSearchKeywords.find((it) => it.name == \"preLoadToNewUserString\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.preLoadToNewUser,\n sortable: true,\n width: \"6%\",\n format: function (row, index) {\n return row.preLoadToNewUser ? \"True\" : \"False\";\n },\n center: true,\n },\n {\n id: \"link\",\n name: (\n \n Website\n
\n ),\n selector: (row) => row.link,\n sortable: true,\n width: \"11%\",\n wrap: true,\n },\n {\n id: \"versionNumber\",\n name: (\n \n Version\n it.name == \"versionNumber\") ? columnSearchKeywords.find((it) => it.name == \"versionNumber\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.versionNumber,\n sortable: false,\n width: \"6%\",\n center: true,\n },\n {\n id: \"sfiaVersion\",\n name: (\n \n Sfia Version\n
\n ),\n selector: (row) => row.sfiaVersion,\n sortable: false,\n center: true,\n width: \"6%\",\n },\n ];\n\n return (\n \n \n
\n ) : (\n \n \n \n \n {\n this.handleClearSelection();\n this.setState({ searchKeyword, selectedInterventions: [] });\n }}\n >\n \n {\n this.handleClearSelection();\n this.setState({ searchKeyword: \"\", selectedInterventions: [] });\n }}\n >\n \n \n \n \n \n )}\n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Delete\" && op.allow == true) && (\n \n \n \n )}\n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Export\" && op.allow == true) && (\n \n \n \n )}\n {pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Import\" && op.allow == true) && (\n \n \n \n )}\n {this.props.containerConfig && this.props.containerConfig.enablePromoteAction == true && pageAssignment && pageAssignment.operations && pageAssignment.operations.find((op) => op.operation == \"Manage Action Promotions\" && op.allow == true) && (\n \n 0)}\n >\n {this.props.numberActiveActionPromotions && this.props.numberActiveActionPromotions > 0 ? `Promotion Requests (${this.props.numberActiveActionPromotions})` : \"Promotion Requests\"}\n \n \n )}\n \n
\n
\n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n error: state.auth.error,\n\n interventionLoading: state.adminIntervention.loading,\n interventionError: state.adminIntervention.error,\n interventions: state.adminIntervention.interventions,\n isUpdating: state.adminIntervention.isUpdating,\n actionTypes: state.actionPlan.actionTypes,\n\n numberActiveActionPromotions: state.adminIntervention.numberActiveActionPromotions,\n\n companyLoading: state.company.loading,\n companyError: state.company.error,\n providers: state.company.providers,\n\n categories: state.category.categories,\n categoryLoading: state.category.loading,\n\n lorLoading: state.lor.loading,\n lors: state.lor.lors,\n\n exportData: state.adminIntervention.exportData,\n loadingExport: state.adminIntervention.loadingExport,\n pageAssignments: state.adminPerson.pageAssignments,\n\n containerConfig: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onIntervention: bindActionCreators(interventionActions, dispatch),\n onActionPlan: bindActionCreators(actionPlanActions, dispatch),\n onCategory: bindActionCreators(categoryActions, dispatch),\n onCompany: bindActionCreators(companyActions, dispatch),\n onLor: bindActionCreators(lorActions, dispatch),\n };\n};\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(ManageTrainings));\n","import * as adminPersonActions from \"../../../store/admin/actions/adminPersonActions\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\nclass GenerateUserProfileReports extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n showDialog: false,\n person: null,\n boolSkillProfile: false,\n boolActionPlan: false,\n boolEndorsedProfile: false,\n };\n }\n\n componentDidMount() {}\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n }\n\n if (prevProps.person !== this.props.person && this.props.person) {\n this.setState({ person: this.props.person, boolSkillProfile: false, boolActionPlan: false, boolEndorsedProfile: false });\n }\n }\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.setState({ showDialog: !showDialog, selectedFiles: [] });\n };\n\n handleChangeCheckBox = (option) => {\n const { boolSkillProfile, boolActionPlan, boolEndorsedProfile } = this.state;\n\n if (option == \"boolSkillProfile\") {\n this.setState({ boolSkillProfile: !boolSkillProfile });\n }\n\n if (option == \"boolActionPlan\") {\n this.setState({ boolActionPlan: !boolActionPlan });\n }\n\n if (option == \"boolEndorsedProfile\") {\n this.setState({ boolEndorsedProfile: !boolEndorsedProfile });\n }\n };\n\n handlePerformGenerateReports = () => {\n const { boolSkillProfile, boolActionPlan, boolEndorsedProfile, person } = this.state;\n\n this.setState({ loadingPrint: true });\n this.props.onPerson.generatePersonProfileReports(person.id, boolSkillProfile, boolActionPlan, boolEndorsedProfile).then(() => {\n if (!this.props.loadingPrint) {\n if (this.props.printData) {\n FileDownload(this.props.printData, `${person.firstName}${person.lastName}_SkillsTx_Person_Profiles.zip`);\n this.setState({ boolSkillProfile: false, boolActionPlan: false, boolEndorsedProfile: false, showDialog: false });\n }\n }\n\n this.setState({ loadingPrint: this.props.loadingPrint });\n });\n };\n\n render() {\n const { boolSkillProfile, boolActionPlan, boolEndorsedProfile, person } = this.state;\n\n return (\n \n \n Generate profile reports \n \n \n \n \n {\n this.handlePerformGenerateReports();\n }}\n disabled={!(boolSkillProfile || boolActionPlan || boolEndorsedProfile) || this.state.loadingPrint}\n >\n Generate Reports\n \n \n Close\n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n personsError: state.adminPerson.error,\n loadingPrint: state.adminPerson.loadingPrint,\n printData: state.adminPerson.printData,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onPerson: bindActionCreators(adminPersonActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(GenerateUserProfileReports);\n","import * as countryActions from \"../../../store/actions/countryAction\";\nimport * as jobActions from \"../../../store/actions/jobAction\";\nimport * as adminPersonActions from \"../../../store/admin/actions/adminPersonActions\";\nimport changeInput from \"../../../utils/changeInput\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Form, FormFeedback, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nclass UserAddNew extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: true,\n showDialog: false,\n isUpdating: false,\n countries: [],\n jobs: [],\n optionYesOrNo: [\n {\n label: \"Yes\",\n value: true,\n },\n {\n label: \"No\",\n value: false,\n },\n ],\n form: {\n firstName: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n lastName: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n email: {\n validation: {\n required: true,\n isEmail: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n usePreferredName: {\n validation: {\n required: false,\n },\n value: false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n preferredName: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n position: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n team: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n country: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n location: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n other: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n skipSelfAssessmentSurvey: {\n validation: {\n required: false,\n isBool: true,\n },\n value: false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n roleBasedSurveyId: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n roleBasedSurvey: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n isCandidate: {\n validation: {\n required: false,\n },\n value: false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n isContractor: {\n validation: {\n required: false,\n },\n value: false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n isMentorIneligible: {\n validation: {\n required: false,\n },\n value: false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n fte: {\n validation: {\n isUserFte: true,\n required: true,\n },\n value: \"1.0\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n isFormValid: false,\n };\n }\n\n componentDidMount() {\n Promise.all([this.props.onJob.getJobs(), this.props.onCountry.getCountries()]).then(() => {\n let countries = [\n {\n label: \"Select Country\",\n value: \"\",\n },\n ];\n if (this.props.countries) {\n countries.push(...this.props.countries.map((country) => ({ label: country.name, value: country.name })));\n }\n\n let jobs = [\n {\n label: \"Select Role\",\n value: \"\",\n },\n ];\n if (this.props.jobs) {\n jobs.push(\n ...this.props.jobs\n .filter((it) => it.inActive != true && it.reference && !it.isSample)\n .sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1))\n .map((job) => ({ label: job.name, value: job.id }))\n );\n }\n this.setState({ countries, jobs });\n this.setState({ loading: this.props.countryLoading || this.props.jobsLoading });\n });\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n }\n }\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.setState({\n showDialog: !showDialog,\n form: {\n firstName: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n lastName: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n email: {\n validation: {\n required: true,\n isEmail: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n usePreferredName: {\n validation: {\n required: false,\n },\n value: false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n preferredName: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n position: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n team: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n country: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n location: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n other: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n skipSelfAssessmentSurvey: {\n validation: {\n required: false,\n isBool: true,\n },\n value: false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n roleBasedSurveyId: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n roleBasedSurvey: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n isCandidate: {\n validation: {\n required: false,\n },\n value: false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n isContractor: {\n validation: {\n required: false,\n },\n value: false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n isMentorIneligible: {\n validation: {\n required: false,\n },\n value: false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n fte: {\n validation: {\n isUserFte: true,\n required: true,\n },\n value: \"1.0\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n isFormValid: false,\n });\n };\n\n handleChange = (event) => {\n const { jobs } = this.state;\n const { name, value } = event.target;\n\n let updateState = changeInput(this.state.form, name, value);\n\n if (name == \"roleBasedSurveyId\") {\n const job = jobs.find((it) => it.value == value);\n if (job) {\n updateState = changeInput(updateState.form, \"roleBasedSurvey\", job.label);\n } else {\n updateState = changeInput(updateState.form, \"roleBasedSurvey\", \"\");\n }\n } else if (name == \"skipSelfAssessmentSurvey\" && value == \"true\") {\n updateState = changeInput(updateState.form, \"roleBasedSurvey\", null);\n updateState = changeInput(updateState.form, \"roleBasedSurveyId\", \"\");\n }\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n handleChangeCheckBox = (event) => {\n const { name, checked } = event.target;\n\n let updateState = changeInput(this.state.form, name, checked);\n\n if (name == \"isContractor\" && checked) {\n updateState = changeInput(updateState.form, \"isCandidate\", false);\n } else if (name == \"isCandidate\" && checked) {\n updateState = changeInput(updateState.form, \"isContractor\", false);\n }\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n handlePerformSave = () => {\n const form = this.state.form;\n const person = {\n firstName: form.firstName.value,\n lastName: form.lastName.value,\n email: form.email.value,\n usePreferredName: form.usePreferredName.value,\n salutation: form.preferredName.value,\n position: form.position.value,\n team: form.team.value,\n country: form.country.value,\n countryCode: form.country.value,\n location: form.location.value,\n other: form.other.value,\n skipSelfAssessmentSurvey: form.skipSelfAssessmentSurvey.value,\n roleBasedSurveyId: form.roleBasedSurveyId.value && form.roleBasedSurveyId.value != \"\" ? form.roleBasedSurveyId.value : null,\n roleBasedSurvey: form.roleBasedSurvey.value && form.roleBasedSurvey.value != \"\" ? form.roleBasedSurvey.value : null,\n isCandidate: form.isCandidate.value,\n isContractor: form.isContractor.value,\n isMentorIneligible: form.isMentorIneligible.value,\n fte: form.fte.value,\n };\n\n this.setState({ isUpdating: true });\n\n this.props.onPerson.addPerson(person).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.personsError) {\n this.props.generateAlert(\"success\", \"Add person success.\");\n this.togleDialogModal();\n } else {\n this.props.generateAlert(\"danger\", this.props.personsError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n render() {\n const { form, countries, jobs, optionYesOrNo } = this.state;\n\n return (\n \n \n Add New Person \n \n \n \n \n {\n this.handlePerformSave();\n }}\n disabled={!this.state.isFormValid || this.state.loading || (form && form.fte && (form.fte.value == \"0\" || form.fte.value == \"0.0\" || form.fte.value == 0))}\n >\n Save\n \n \n Close\n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n personsError: state.adminPerson.error,\n isUpdating: state.adminPerson.isUpdating,\n countries: state.country.countries,\n countryLoading: state.country.loading,\n jobsLoading: state.job.loading,\n jobs: state.job.jobs,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onPerson: bindActionCreators(adminPersonActions, dispatch),\n onCountry: bindActionCreators(countryActions, dispatch),\n onJob: bindActionCreators(jobActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(UserAddNew);\n","import * as adminPersonActions from \"../../../store/admin/actions/adminPersonActions\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Form, FormGroup, Input, Label, ListGroup, ListGroupItem, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\n\nclass UserBulkUpload extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n showDialog: false,\n importOption: \"InsertUpdate\",\n selectedFiles: [],\n isImporting: false,\n importMessage: null,\n };\n\n this.excelRef = React.createRef();\n }\n\n componentDidMount() {}\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n }\n }\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.excelRef.current.value = null;\n this.setState({ showDialog: !showDialog, selectedFiles: [] });\n };\n\n handleDownloadTemplate = () => {\n this.props.onPerson.exportPersonsDataExcelTemplate().then(() => {\n if (!this.props.loadingPrint && !this.props.personsError) {\n if (this.props.printData) {\n FileDownload(this.props.printData, `UploadIndividualsTemplate.xlsx`);\n }\n }\n });\n };\n\n handleChangeOption = (event) => {\n const { name, value } = event.target;\n this.setState({ importOption: value });\n };\n\n handleSelectFiles = () => {\n this.excelRef.current.click();\n };\n\n handleSelectExcels = (event) => {\n const selectedFiles = this.state.selectedFiles;\n\n if (event.target.files && event.target.files.length > 0) {\n this.setState({ selectedFiles: [...selectedFiles, ...event.target.files] });\n }\n };\n\n handlePerformUpload = () => {\n this.setState({ isImporting: true });\n this.props.onPerson.importPersonsDataExcel(this.state.importOption, this.state.selectedFiles).then(() => {\n if (!this.props.isImporting) {\n if (!this.props.personsError) {\n if (this.props.message) {\n this.props.generateAlert(\"success\", this.props.message);\n } else {\n this.props.generateAlert(\"success\", \"Import individuals successful.\");\n }\n this.excelRef.current.value = null;\n this.togleDialogModal();\n } else {\n this.props.generateAlert(\"danger\", this.props.personsError.errData.Message, true);\n }\n }\n\n this.setState({ isImporting: this.props.isImporting });\n });\n };\n\n render() {\n const { selectedFiles } = this.state;\n\n return (\n \n \n Import individuals details \n \n \n \n \n {\n this.handlePerformUpload();\n }}\n disabled={selectedFiles.length == 0 || this.state.isImporting}\n >\n {this.state.isImporting ? (\n \n \n ) : (\n \"Process Upload\"\n )}\n \n \n Close\n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n personsError: state.adminPerson.error,\n loadingPrint: state.adminPerson.loadingPrint,\n printData: state.adminPerson.printData,\n\n isImporting: state.adminPerson.isImporting,\n message: state.adminPerson.message,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onPerson: bindActionCreators(adminPersonActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(UserBulkUpload);\n","import * as adminPersonActions from \"../../../store/admin/actions/adminPersonActions\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Form, FormGroup, Input, Label, ListGroup, ListGroupItem, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\n\nclass UserBulkUploadProfiles extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n showDialog: false,\n importOption: \"InsertUpdate\",\n selectedFiles: [],\n isImporting: false,\n importMessage: null,\n };\n\n this.excelRef = React.createRef();\n }\n\n componentDidMount() {}\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n }\n }\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n this.excelRef.current.value = null;\n this.setState({ showDialog: !showDialog, selectedFiles: [] });\n };\n\n handleSelectFiles = () => {\n this.excelRef.current.click();\n };\n\n handleSelectExcels = (event) => {\n const selectedFiles = this.state.selectedFiles;\n\n if (event.target.files && event.target.files.length > 0) {\n this.setState({ selectedFiles: [...selectedFiles, ...event.target.files] });\n }\n };\n\n handlePerformUpload = () => {\n this.setState({ isImporting: true });\n this.props.onPerson.importPersonsProfiles(this.state.selectedFiles).then(() => {\n if (!this.props.isImporting) {\n if (!this.props.personsError) {\n if (this.props.message) {\n this.props.generateAlert(\"success\", this.props.message);\n } else {\n this.props.generateAlert(\"success\", \"Import profiles successful.\");\n }\n this.excelRef.current.value = null;\n this.togleDialogModal();\n } else {\n this.props.generateAlert(\"danger\", this.props.personsError.errData.Message);\n }\n }\n\n this.setState({ isImporting: this.props.isImporting });\n });\n };\n\n render() {\n const { selectedFiles } = this.state;\n\n return (\n \n \n Import profiles \n \n \n \n \n {\n this.handlePerformUpload();\n }}\n disabled={selectedFiles.length == 0 || this.state.isImporting}\n >\n {this.state.isImporting ? (\n \n \n ) : (\n \"Process Upload\"\n )}\n \n \n Close\n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n personsError: state.adminPerson.error,\n loadingPrint: state.adminPerson.loadingPrint,\n printData: state.adminPerson.printData,\n\n isImporting: state.adminPerson.isImporting,\n message: state.adminPerson.message,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onPerson: bindActionCreators(adminPersonActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(UserBulkUploadProfiles);\n","import * as adminPersonActions from \"../../../store/admin/actions/adminPersonActions\";\nimport { faCircleCheck, faCancel } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Link } from \"react-router-dom\";\nimport { Col, CustomInput, Popover, PopoverBody, PopoverHeader, Row, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nclass UserRoleCell extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n popOverUpdateRoleOpen: false,\n roleSelection: [],\n roles: this.props.roles,\n dirty: false,\n inProgress: false,\n };\n }\n\n componentDidMount() {\n const roles = this.props.roles;\n let roleSelection = [];\n\n if (roles && roles.length > 0) {\n roleSelection = [...roles];\n } else {\n roleSelection.push({ role: \"User\" });\n }\n this.setState({ roleSelection });\n }\n\n componentWillUnmount() {\n this.setState = (state, callback) => {\n return;\n };\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.roles !== this.props.roles) {\n this.setState({ roles: this.props.roles });\n }\n\n if (prevProps.resetPasswordSent !== this.props.resetPasswordSent && this.props.resetPasswordSent) {\n this.props.generateAlert(\"success\", \"Reset password request sent\");\n }\n }\n\n togglePopover = () => {\n const popOverUpdateRoleOpen = this.state.popOverUpdateRoleOpen;\n\n this.setState({ popOverUpdateRoleOpen: !popOverUpdateRoleOpen, dirty: false, inProgress: false });\n };\n\n openUpdateRoles = () => {\n const popOverUpdateRoleOpen = this.state.popOverUpdateRoleOpen;\n\n const roles = this.props.roles;\n let roleSelection = [];\n\n if (roles && roles.length > 0) {\n roleSelection = [...roles];\n } else {\n roleSelection.push({ role: \"User\" });\n }\n\n this.setState({ popOverUpdateRoleOpen: !popOverUpdateRoleOpen, roleSelection });\n };\n\n handleRoleCheckedChange = (role) => {\n let roleSelection = this.state.roleSelection;\n\n if (roleSelection.find((it) => it.role == role)) {\n var objRole = roleSelection.find((it) => it.role == role);\n var index = roleSelection.indexOf(objRole);\n roleSelection.splice(index, 1);\n } else {\n roleSelection.push({\n role,\n });\n }\n\n this.setState({ roleSelection, dirty: true });\n };\n\n handleUpdateRoles = () => {\n const roleSelection = this.state.roleSelection;\n this.setState({ inProgress: true });\n this.props.onPerson\n .updatePersonRoles(\n this.props.person.id,\n roleSelection.map((it) => {\n return it.role;\n })\n )\n .then(() => {\n if (!this.props.isUpdating && !this.props.error) {\n this.props.personRolesUpdated(this.props.person.id, this.props.updatedRoles);\n this.setState({ popOverUpdateRoleOpen: false });\n }\n\n if (roleSelection.find((it) => it.role == \"Admin\") && (!this.props.person.havePassword || this.props.person.havePassword == false) && (!this.props.person.resetPasswordRequested || this.props.person.resetPasswordRequested == false)) {\n if (window.confirm(\"Do you want to send reset password email to this new admin user?\")) {\n this.props.onPerson.resetPersonPassword(this.props.person.id).then(() => {});\n }\n }\n\n this.setState({ inProgress: this.props.isUpdating });\n });\n };\n\n render() {\n const person = this.props.person;\n const roles = this.state.roles;\n const roleSelection = this.state.roleSelection;\n\n const strRoles = roles\n .sort((a, b) => ((a.role == \"Admin\" ? 2 : 1) > (b.role == \"Admin\" ? 2 : 1) ? 1 : -1))\n .map((it) => {\n return it.role;\n });\n\n return (\n \n {this.props.allowEdit ? (\n \n \n Update Person Roles\n \n \n \n \n 0 && this.state.dirty ? \"btn-primary\" : \"btn-secondary\"}\n disabled={!this.state.dirty || this.state.inProgress || this.state.roleSelection.length == 0}\n onClick={this.handleUpdateRoles}\n >\n \n \n \n
\n \n \n \n it.role == \"User\") ? true : false}\n label=\"User\"\n onChange={() => this.handleRoleCheckedChange(\"User\")}\n disabled={this.state.inProgress}\n />\n \n it.role == \"Admin\") ? true : false}\n label=\"Admin\"\n onChange={() => this.handleRoleCheckedChange(\"Admin\")}\n disabled={this.state.inProgress}\n />\n \n
\n \n \n \n ) : (\n {strRoles.length > 0 ? strRoles.join(\", \") : \"User\"}
\n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n isUpdating: state.adminPerson.roleUpdating,\n error: state.adminPerson.error,\n updatedRoles: state.adminPerson.updatedRoles,\n resetPasswordSent: state.adminPerson.resetPasswordSent,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onPerson: bindActionCreators(adminPersonActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(UserRoleCell);\n","import * as configActions from \"../../../store/actions/configAction\";\nimport changeInput from \"../../../utils/changeInput\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nclass UserUpdatePersonMiscellaneousConfig extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n showDialog: false,\n isUpdating: false,\n form: {\n personMiscellaneous1Enable: {\n validation: {\n required: false,\n },\n value: false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n personMiscellaneous1Caption: {\n validation: {\n required: true,\n minLength: 1,\n },\n value: \"Miscellaneous 1\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n personMiscellaneous2Enable: {\n validation: {\n required: false,\n },\n value: false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n personMiscellaneous2Caption: {\n validation: {\n required: true,\n minLength: 1,\n },\n value: \"Miscellaneous 2\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n personMiscellaneous3Enable: {\n validation: {\n required: false,\n },\n value: false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n personMiscellaneous3Caption: {\n validation: {\n required: true,\n minLength: 1,\n },\n value: \"Miscellaneous 3\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n personMiscellaneous4Enable: {\n validation: {\n required: false,\n },\n value: false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n personMiscellaneous4Caption: {\n validation: {\n required: true,\n minLength: 1,\n },\n value: \"Miscellaneous 4\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n personMiscellaneous5Enable: {\n validation: {\n required: false,\n },\n value: false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n personMiscellaneous5Caption: {\n validation: {\n required: true,\n minLength: 1,\n },\n value: \"Miscellaneous 5\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n isFormValid: true,\n };\n }\n\n componentDidMount() {}\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n this.prepareFormState();\n }\n }\n\n prepareFormState = () => {\n const config = this.props.config;\n if (config) {\n this.setState({\n form: {\n personMiscellaneous1Enable: {\n validation: {\n required: false,\n },\n value: config ? config.personMiscellaneous1Enable : false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n personMiscellaneous1Caption: {\n validation: {\n required: true,\n minLength: 1,\n },\n value: config && config.personMiscellaneous1Caption ? config.personMiscellaneous1Caption : \"Miscellaneous 1\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n personMiscellaneous2Enable: {\n validation: {\n required: false,\n },\n value: config ? config.personMiscellaneous2Enable : false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n personMiscellaneous2Caption: {\n validation: {\n required: true,\n minLength: 1,\n },\n value: config && config.personMiscellaneous2Caption ? config.personMiscellaneous2Caption : \"Miscellaneous 2\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n personMiscellaneous3Enable: {\n validation: {\n required: false,\n },\n value: config ? config.personMiscellaneous3Enable : false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n personMiscellaneous3Caption: {\n validation: {\n required: true,\n minLength: 1,\n },\n value: config && config.personMiscellaneous3Caption ? config.personMiscellaneous3Caption : \"Miscellaneous 3\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n personMiscellaneous4Enable: {\n validation: {\n required: false,\n },\n value: config ? config.personMiscellaneous4Enable : false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n personMiscellaneous4Caption: {\n validation: {\n required: true,\n minLength: 1,\n },\n value: config && config.personMiscellaneous4Caption ? config.personMiscellaneous4Caption : \"Miscellaneous 4\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n personMiscellaneous5Enable: {\n validation: {\n required: false,\n },\n value: config ? config.personMiscellaneous5Enable : false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n personMiscellaneous5Caption: {\n validation: {\n required: true,\n minLength: 1,\n },\n value: config && config.personMiscellaneous5Caption ? config.personMiscellaneous5Caption : \"Miscellaneous 5\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n isFormValid: true,\n });\n }\n };\n\n togleDialogModal = () => {\n const showDialog = this.state.showDialog;\n\n this.setState({\n showDialog: !showDialog,\n });\n };\n\n handleChange = (event) => {\n const { name, value } = event.target;\n\n const updateState = changeInput(this.state.form, name, value);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n handleChangeCheckBox = (event) => {\n const { name, checked } = event.target;\n\n const updateState = changeInput(this.state.form, name, checked);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n handlePerformSave = () => {\n const form = this.state.form;\n\n const config = {\n personMiscellaneous1Enable: form.personMiscellaneous1Enable.value,\n personMiscellaneous1Caption: form.personMiscellaneous1Caption.value,\n personMiscellaneous2Enable: form.personMiscellaneous2Enable.value,\n personMiscellaneous2Caption: form.personMiscellaneous2Caption.value,\n personMiscellaneous3Enable: form.personMiscellaneous3Enable.value,\n personMiscellaneous3Caption: form.personMiscellaneous3Caption.value,\n personMiscellaneous4Enable: form.personMiscellaneous4Enable.value,\n personMiscellaneous4Caption: form.personMiscellaneous4Caption.value,\n personMiscellaneous5Enable: form.personMiscellaneous5Enable.value,\n personMiscellaneous5Caption: form.personMiscellaneous5Caption.value,\n };\n\n this.setState({ isUpdating: true });\n this.props.onConfig.updateAdminPersonMiscellaneousConfig(config).then(() => {\n if (!this.props.isUpdating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.props.generateAlert(\"success\", \"Update additional columns setting success\");\n this.togleDialogModal();\n }\n }\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n render() {\n const { form } = this.state;\n const defaultColumnNames = [\n \"personid\",\n \"fullname\",\n \"email\",\n \"preferredname\",\n \"position\",\n \"countrycode\",\n \"country\",\n \"location\",\n \"team\",\n \"other\",\n \"department\",\n \"businessunit\",\n \"division\",\n \"territory\",\n \"costcentre\",\n \"supervisorname\",\n \"iscandidate\",\n \"hasaction\",\n \"createdon\",\n \"lastupdatedon\",\n \"dayssincelastupdate\",\n \"activitystatus\",\n \"lastondemandactivitystatementsenton\",\n \"selfassessmentreason\",\n \"surveyrating\",\n \"surveycomment\",\n \"activitystatementinterval\",\n \"leaveon\",\n \"seniority\",\n \"employmentcontract\",\n \"timeincurrentrole\",\n \"timeinorganisation\",\n \"recentorcurrentrole\",\n \"experienceselection\",\n \"isapprovalrequested\",\n \"approvalrequestsenton\",\n \"issurveycomplete\",\n \"hasendorsedprofile\",\n \"totalquestions\",\n \"answeredquestions\",\n \"totaltimetaken\",\n \"completedsurveypercent\",\n \"inactive\",\n \"notes\",\n \"latestprofileversion\",\n \"latestprofilestatus\",\n \"latestversionisapproved\",\n \"latestversionapproveddate\",\n \"latestversionapprovalcomment\",\n \"previousversionisapproved\",\n \"previousversionapproveddate\",\n \"previousversionapprovalcomment\",\n \"currentrequirementassigned\",\n \"futurerequirementassigned\",\n \"datamodellastupdated\",\n \"datamodellastsync\",\n ];\n\n return (\n \n \n Additional Columns Setting \n \n \n \n \n \n {\n this.handlePerformSave();\n }}\n disabled={\n !this.state.isFormValid ||\n this.state.isUpdating ||\n (form && form.personMiscellaneous1Enable.value == true && form.personMiscellaneous1Caption.value && defaultColumnNames.includes(form.personMiscellaneous1Caption.value.toLowerCase())) ||\n (form && form.personMiscellaneous2Enable.value == true && form.personMiscellaneous2Caption.value && defaultColumnNames.includes(form.personMiscellaneous2Caption.value.toLowerCase())) ||\n (form && form.personMiscellaneous3Enable.value == true && form.personMiscellaneous3Caption.value && defaultColumnNames.includes(form.personMiscellaneous3Caption.value.toLowerCase())) ||\n (form && form.personMiscellaneous4Enable.value == true && form.personMiscellaneous4Caption.value && defaultColumnNames.includes(form.personMiscellaneous4Caption.value.toLowerCase())) ||\n (form && form.personMiscellaneous5Enable.value == true && form.personMiscellaneous5Caption.value && defaultColumnNames.includes(form.personMiscellaneous5Caption.value.toLowerCase()))\n }\n >\n Save\n \n {\n this.togleDialogModal();\n }}\n disabled={this.state.isUpdating}\n >\n Cancel\n \n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n error: state.config.error,\n isUpdating: state.config.isUpdating,\n config: state.config.config,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onConfig: bindActionCreators(configActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(UserUpdatePersonMiscellaneousConfig);\n","import * as authActions from \"../../../store/actions/authAction\";\nimport * as configActions from \"../../../store/actions/configAction\";\nimport * as adminPersonActions from \"../../../store/admin/actions/adminPersonActions\";\nimport { dismisAlert, generateAlert } from \"../../../utils/alertUtils\";\nimport { filterArray } from \"../../../utils/filterUtils\";\nimport { contentTranslator } from \"../../../utils/translatorUtils\";\nimport { SkillsTxTable } from \"../../common/SkillsTxTable\";\nimport { SkillsTxTableClearSearch } from \"../../common/SkillsTxTableClearSearch\";\nimport { SkillsTxTableSearchBar } from \"../../common/SkillsTxTableSearchBar\";\nimport ColumnDisplaySetting from \"../ColumnDisplaySetting\";\nimport GenerateUserProfileReports from \"./GenerateUserProfileReports\";\nimport UserAddNew from \"./UserAddNew\";\nimport UserBulkUpload from \"./UserBulkUpload\";\nimport UserBulkUploadProfiles from \"./UserBulkUploadProfiles\";\nimport UserDetail from \"./UserDetail\";\nimport UserRoleCell from \"./UserRoleCell\";\nimport UserUpdatePersonMiscellaneousConfig from \"./UserUpdatePersonMiscellaneousConfig\";\nimport { faSquare } from \"@fortawesome/free-regular-svg-icons\";\nimport { faCheck, faCog, faEnvelope, faFileExcel, faInfoCircle, faMinusCircle, faPlus, faPrint, faSquareCheck, faSquareMinus, faSync, faTimes } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { Link } from \"react-router-dom\";\nimport { Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nclass ManageUser extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: null,\n loading: true,\n alerts: [],\n stickyAlert: false,\n persons: [],\n selectedPerson: null,\n showDialogTs: null,\n showDialogNewUserTs: null,\n showDialogUserDetailTs: null,\n showDialogUserReportTs: null,\n showDialogUpdatePersonMiscellaneousConfigTs: null,\n isUpdating: false,\n showDeletePersonFirstConfirmationDialog: false,\n showDeletePersonSecondConfirmationDialog: false,\n deletedPerson: null,\n assignMode: false,\n inviteMode: false,\n unassignMode: false,\n exportProfileMode: false,\n personsSelected: [],\n showAssignInviteConfirmationDialog: false,\n showContinueToInviteDialog: false,\n checkShowInvited: false,\n showColumnSettings: false,\n };\n\n this.filterArray = filterArray.bind(this);\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n this.props.onAuth.authCheckState().then(() => {\n this.initData();\n this.setState({ loading: this.props.loading });\n });\n }\n\n searchProperties = () => {\n const pageName = this.props.mode == \"ManageUser\" ? \"Manage Users\" : this.props.mode == \"AssignSurvey\" ? \"Assign Participants\" : \"Track Participant Progress\";\n return this.props.columnDisplaySettings ? this.props.columnDisplaySettings.filter((it) => it.pageName == pageName && it.visible == true && it.searchable == true).map((it) => it.columnName) : [];\n };\n\n componentDidUpdate(prevProps) {\n if (prevProps.persons !== this.props.persons && this.props.persons) {\n this.setState({ persons: this.reformPersons(this.props.persons.sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))) });\n }\n\n if (prevProps.mode !== this.props.mode && prevProps.mode) {\n this.handleChangeMode();\n }\n }\n\n reformPersons = (persons) => {\n return persons.map((it) => {\n return {\n id: it.id,\n companyId: it.companyId,\n firstName: it.firstName,\n lastName: it.lastName,\n email: it.email,\n salutation: it.salutation ? it.salutation : \"\",\n position: it.position ? it.position : \"\",\n inactive: it.inactive,\n active: it.inactive ? \"Inactive\" : \"Active\",\n personType: it.personType ? it.personType : \"\",\n accessGroup: it.accessGroup,\n allowNotifications: it.allowNotifications,\n lastActivityOn: it.lastActivityOn,\n lastActivitySystem: it.lastActivitySystem,\n createdOn: it.createdOn,\n countryCode: it.countryCode ? it.countryCode : \"\",\n country: it.country ? it.country : \"\",\n location: it.location ? it.location : \"\",\n selfAssessmentReason: it.selfAssessmentReason ? it.selfAssessmentReason : \"\",\n encryptedId: it.encryptedId,\n team: it.team ? it.team : \"\",\n usePreferredName: it.usePreferredName,\n other: it.other ? it.other : \"\",\n department: it.department ? it.department : \"\",\n businessUnit: it.businessUnit ? it.businessUnit : \"\",\n division: it.division ? it.division : \"\",\n territory: it.territory ? it.territory : \"\",\n costCentre: it.costCentre ? it.costCentre : \"\",\n supervisor: it.supervisor ? it.supervisor : \"\",\n validatedDate: it.validatedDate,\n isCandidate: it.isCandidate,\n strCandidate: it.isCandidate ? \"TRUE\" : \"\",\n isContractor: it.isContractor,\n strContractor: it.isContractor ? \"TRUE\" : \"\",\n isMentorIneligible: it.isMentorIneligible,\n strMentorIneligible: it.isMentorIneligible ? \"TRUE\" : \"\",\n isAnalyticsUser: it.isAnalyticsUser,\n leaveOn: it.leaveOn,\n isAssigned: it.isAssigned,\n strAssigned: it.isAssigned ? \"TRUE\" : \"FALSE\",\n isInvited: it.isInvited,\n strInvited: it.isInvited ? \"TRUE\" : \"FALSE\",\n invitedOn: it.invitedOn,\n accounts: it.accounts ? [...it.accounts] : null,\n teams: it.teams ? [...it.teams] : null,\n profilePictureUrl: it.profilePictureUrl,\n activityStatementInterval: it.activityStatementInterval,\n lastUpdatedOn: it.lastUpdatedOn,\n lastUpdatedVersion: it.lastUpdatedVersion,\n latestAssessmentId: it.latestAssessmentId,\n cartridgeId: it.cartridgeId,\n hasOutstandingAction: it.hasOutstandingAction,\n roles: it.roles ? [...it.roles] : null,\n strRoles:\n it.roles && it.roles.length > 0\n ? it.roles\n .sort((a, b) => ((a.role == \"Admin\" ? 2 : 1) > (b.role == \"Admin\" ? 2 : 1) ? 1 : -1))\n .map((it) => {\n return it.role;\n })\n .join(\", \")\n : \"User\",\n groups: it.groups ? [...it.groups] : null,\n totalQuestions: it.totalQuestions,\n answeredQuestions: it.answeredQuestions,\n totalTimeTaken: it.totalTimeTaken,\n percentage: it.percentage,\n percentageHundred: it.percentage ? it.percentage * 100 : 0,\n progress: it.totalQuestions ? `${it.answeredQuestions} / ${it.totalQuestions}` : \"0 / 0\",\n hasEndorseProfile: it.hasEndorseProfile,\n hasAction: it.hasAction,\n latestInvitationEmailReminderNumber: it.latestInvitationEmailReminderNumber,\n latestInvitationEmailReminderSentOn: it.latestInvitationEmailReminderSentOn,\n resetPasswordRequested: it.resetPasswordRequested,\n upRelationships: it.upRelationships,\n downRelationships: it.downRelationships,\n havePassword: it.havePassword,\n invitationEmailMessageId: it.invitationEmailMessageId,\n invitationEmailMessageStatus: it.invitationEmailMessageStatus,\n invitationEmailMessageReason: it.invitationEmailMessageReason,\n messageSent:\n it.invitationEmailMessageId && it.isInvited\n ? it.invitationEmailMessageStatus == \"delivered\"\n ? \"TRUE\"\n : it.invitationEmailMessageStatus == \"drop\" || it.invitationEmailMessageStatus == \"dropped\" || it.invitationEmailMessageStatus == \"bounce\" || it.invitationEmailMessageStatus == \"deferred\"\n ? \"FALSE\"\n : \"\"\n : \"\",\n invitedSentOn:\n it.invitationEmailMessageId && it.isInvited\n ? it.invitationEmailMessageStatus == \"delivered\"\n ? it.invitedOn\n : it.invitationEmailMessageStatus == \"drop\" || it.invitationEmailMessageStatus == \"dropped\" || it.invitationEmailMessageStatus == \"bounce\" || it.invitationEmailMessageStatus == \"deferred\"\n ? null\n : null\n : null,\n surveyStarted: it.accounts && it.accounts.length > 0 ? (it.accounts.find((it) => it.roleId) ? \"TRUE\" : \"FALSE\") : \"FALSE\",\n endorsedProfileCreated: it.endorsedProfileCreated,\n endorsed: it.endorsedProfileCreated ? \"TRUE\" : \"FALSE\",\n miscellaneous1: it.miscellaneous1,\n miscellaneous2: it.miscellaneous2,\n miscellaneous3: it.miscellaneous3,\n miscellaneous4: it.miscellaneous4,\n miscellaneous5: it.miscellaneous5,\n selfAssessedLastProfileVersion: it.selfAssessedLastProfileVersion,\n selfAssessedLastProfileUpdatedOn: it.selfAssessedLastProfileUpdatedOn,\n selfAssessedLastProfileApproved: it.selfAssessedLastProfileVersion ? (it.selfAssessedLastProfileApproved ? \"TRUE\" : \"FALSE\") : \"\",\n endorsementLastUpdatedVersion: it.endorsementLastUpdatedVersion,\n endorsementLastUpdated: it.endorsementLastUpdated,\n endorsementLatestStatus: it.endorsementLatestStatus,\n skipSelfAssessmentSurvey: it.skipSelfAssessmentSurvey,\n strSkipSelfAssessmentSurvey: it.skipSelfAssessmentSurvey ? \"TRUE\" : \"\",\n roleBasedSurveyId: it.roleBasedSurveyId,\n roleBasedSurvey: it.roleBasedSurvey,\n fte: it.fte,\n adminRoleName: it.adminRoleName,\n };\n });\n };\n\n initData = () => {\n this.props.onConfig.getAdminConfig().then(() => {});\n\n this.props.onPerson.getPersons().then(() => {\n this.setState({\n persons: this.reformPersons(\n this.props.mode == \"TrackProgress\"\n ? this.props.persons.filter((it) => !it.inactive && it.isAssigned && it.roles.some((r) => r.role == \"User\")).sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))\n : this.props.mode == \"AssignSurvey\"\n ? this.props.persons.filter((it) => !it.inactive && it.roles.some((r) => r.role == \"User\")).sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))\n : this.props.persons.sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))\n ),\n });\n });\n };\n\n handleRefresh = () => {\n this.setState({ assignMode: false, inviteMode: false, unassignMode: false, exportProfileMode: false, personsSelected: [] });\n this.initData();\n };\n\n handleChangeMode = () => {\n this.setState({ assignMode: false, inviteMode: false, unassignMode: false, exportProfileMode: false, personsSelected: [] });\n\n this.setState({\n persons: this.reformPersons(\n this.props.mode == \"TrackProgress\"\n ? this.props.persons.filter((it) => !it.inactive && it.isAssigned && it.roles.some((r) => r.role == \"User\")).sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))\n : this.props.mode == \"AssignSurvey\"\n ? this.props.persons.filter((it) => !it.inactive && it.roles.some((r) => r.role == \"User\")).sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))\n : this.props.persons.sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))\n ),\n });\n };\n\n openPersonDetail = (person) => {\n this.setState({ showDialogUserDetailTs: new Date(), selectedPerson: person });\n };\n\n openUpdatePersonMiscellaneousConfigDialog = () => {\n this.setState({ showDialogUpdatePersonMiscellaneousConfigTs: new Date() });\n };\n\n openGeneratePersonReport = (person) => {\n this.setState({ showDialogUserReportTs: new Date(), selectedPerson: person });\n };\n\n personRolesUpdated = (personId, roles) => {\n const persons = this.state.persons;\n\n this.setState({ persons: [...persons] });\n };\n\n pad2 = (n) => {\n return (n < 10 ? \"0\" : \"\") + n;\n };\n\n handleExportIndividuals = () => {\n const timezoneOffset = (new Date().getTimezoneOffset() * -1) / 60;\n\n if (this.props.mode == \"ManageUser\") {\n this.props.onPerson.exportPersonsDataExcel(timezoneOffset).then(() => {\n if (!this.props.loadingPrint && !this.props.personsError) {\n if (this.props.printData) {\n var today = new Date();\n var strToday = today.getFullYear() + this.pad2(today.getMonth() + 1) + this.pad2(today.getDate()) + \"_\" + this.pad2(today.getHours()) + this.pad2(today.getMinutes()) + this.pad2(today.getSeconds());\n FileDownload(this.props.printData, `ExportIndividuals_${strToday}.xlsx`);\n }\n }\n });\n } else if (this.props.mode == \"TrackProgress\") {\n this.props.onPerson.exportPersonsAssessmentProgressDataExcel(timezoneOffset).then(() => {\n if (!this.props.loadingPrint && !this.props.personsError) {\n if (this.props.printData) {\n var today = new Date();\n var strToday = today.getFullYear() + this.pad2(today.getMonth() + 1) + this.pad2(today.getDate()) + \"_\" + this.pad2(today.getHours()) + this.pad2(today.getMinutes()) + this.pad2(today.getSeconds());\n FileDownload(this.props.printData, `PaticipantAssessmentProgress_${strToday}.xlsx`);\n }\n }\n });\n }\n };\n\n handleImportIndividuals = () => {\n this.setState({ showDialogTs: new Date() });\n };\n\n handleAddNew = () => {\n this.setState({ showDialogNewUserTs: new Date() });\n };\n\n handleDeletePerson = (person) => {\n this.setState({ deletedPerson: person, showDeletePersonFirstConfirmationDialog: true });\n };\n\n handleConfirmDeletePersonFirstConfirmation = () => {\n this.setState({ showDeletePersonFirstConfirmationDialog: false, showDeletePersonSecondConfirmationDialog: true });\n };\n\n togleDeletePersonFirstConfirmationModal = () => {\n const showDeletePersonFirstConfirmationDialog = this.state.showDeletePersonFirstConfirmationDialog;\n this.setState({ showDeletePersonFirstConfirmationDialog: !showDeletePersonFirstConfirmationDialog });\n };\n\n renderDeletePersonFirstConfirmation = () => {\n return (\n \n Delete Person Confirmation \n \n \n \n \n {\n this.handleConfirmDeletePersonFirstConfirmation();\n }}\n >\n OK\n \n \n Cancel\n \n \n \n );\n };\n\n handleConfirmDeletePersonSecondConfirmation = () => {\n const person = this.state.deletedPerson;\n if (person) {\n this.setState({ isUpdating: true });\n\n this.props.onPerson.deletePerson(person.id).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.personsError) {\n this.generateAlert(\"success\", \"Delete person success.\");\n this.handleRefresh();\n this.setState({ showDeletePersonSecondConfirmationDialog: false });\n } else {\n this.generateAlert(\"danger\", this.props.personsError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n }\n };\n\n togleDeletePersonSecondConfirmationModal = () => {\n const showDeletePersonSecondConfirmationDialog = this.state.showDeletePersonSecondConfirmationDialog;\n this.setState({ showDeletePersonSecondConfirmationDialog: !showDeletePersonSecondConfirmationDialog });\n };\n\n renderDeletePersonSecondConfirmation = () => {\n return (\n \n Delete Person Confirmation \n \n \n \n \n {\n this.handleConfirmDeletePersonSecondConfirmation();\n }}\n disabled={this.state.isUpdating}\n >\n OK\n \n \n Cancel\n \n \n \n );\n };\n\n toFixedIfNecessary = (value, dp) => {\n return +parseFloat(value).toFixed(dp);\n };\n\n handleFilterAssign = () => {\n const persons = this.reformPersons(this.props.persons);\n\n this.setState({\n assignMode: true,\n unassignMode: false,\n inviteMode: false,\n persons: [...persons.filter((it) => !it.isAssigned && !it.endorsedProfileCreated && !it.inactive && (!it.roles || (it.roles && it.roles.length == 0) || (it.roles && it.roles.some((it) => it.role == \"User\"))))],\n });\n };\n\n handleFilterUnAssign = () => {\n const persons = this.reformPersons(this.props.persons);\n\n this.setState({\n unassignMode: true,\n assignMode: false,\n inviteMode: false,\n persons: [...persons.filter((it) => it.isAssigned && !it.inactive && it.accounts && !it.accounts.some((it) => it.roleId) && (!it.roles || (it.roles && it.roles.length == 0) || (it.roles && it.roles.some((it) => it.role == \"User\"))))],\n });\n };\n\n handleFilterInvite = () => {\n const persons = this.reformPersons(this.props.persons);\n const checkShowInvited = this.state.checkShowInvited;\n\n this.setState({\n assignMode: false,\n unassignMode: false,\n inviteMode: true,\n persons: [...persons.filter((it) => (!it.isInvited || checkShowInvited) && it.isAssigned && !it.inactive && (!it.roles || (it.roles && it.roles.length == 0) || (it.roles && it.roles.some((it) => it.role == \"User\"))))],\n personsSelected: [],\n });\n };\n\n handleCancelAssignInvite = () => {\n const persons = this.reformPersons(this.props.persons);\n\n this.setState({\n assignMode: false,\n unassignMode: false,\n inviteMode: false,\n persons: [...persons.filter((it) => !it.inactive && it.roles.some((r) => r.role == \"User\")).sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))],\n personsSelected: [],\n });\n };\n\n handleProcessAssignInvite = () => {\n this.setState({ showAssignInviteConfirmationDialog: true });\n };\n\n handleRowClick = (row) => {\n const persons = this.state.persons;\n const updatedData = persons.find((it) => it.id == row.id);\n updatedData.toggleSelected = !updatedData.toggleSelected;\n\n this.setState({ persons: [...persons], personsSelected: persons.filter((it) => it.toggleSelected).map((row) => row.id) });\n };\n\n handleSelectAll = () => {\n const { persons, searchKeyword, columnSearchKeywords } = this.state;\n let selectAll = false;\n\n const filtered = this.filterArray(persons, searchKeyword, this.searchProperties(), columnSearchKeywords);\n\n if (filtered.filter((it) => it.toggleSelected).length == 0) {\n selectAll = true;\n } else if (filtered.filter((it) => !it.toggleSelected).length == 0) {\n selectAll = false;\n } else {\n selectAll = true;\n }\n\n persons.forEach((it) => {\n it.toggleSelected = false;\n });\n\n if (selectAll) {\n persons.forEach((it) => {\n if (filtered.find((f) => f.id == it.id)) {\n it.toggleSelected = true;\n }\n });\n }\n\n this.setState({ persons: [...persons], personsSelected: persons.filter((it) => it.toggleSelected).map((row) => row.id) });\n };\n\n handleClearSelection = () => {\n const persons = this.state.persons;\n\n persons.forEach((it) => {\n it.toggleSelected = false;\n });\n\n this.setState({ persons: [...persons] });\n };\n\n togleAssignInviteConfirmationDialog = () => {\n const showAssignInviteConfirmationDialog = this.state.showAssignInviteConfirmationDialog;\n this.setState({ showAssignInviteConfirmationDialog: !showAssignInviteConfirmationDialog });\n };\n\n handleConfirmAssignInvite = () => {\n const { assignMode, inviteMode, unassignMode, personsSelected } = this.state;\n this.setState({ isUpdating: true });\n\n Promise.all([assignMode ? this.props.onPerson.assignPersons(personsSelected) : unassignMode ? this.props.onPerson.unassignPersons(personsSelected) : this.props.onPerson.invitePersons(personsSelected)]).then(() => {\n if (!this.props.isUpdating) {\n if (!this.props.personsError) {\n this.setState({ showAssignInviteConfirmationDialog: false });\n if (assignMode) {\n this.setState({ showContinueToInviteDialog: true });\n } else {\n if (inviteMode) {\n this.generateAlert(\"success\", `Invitations sent successfully.`);\n } else {\n this.generateAlert(\"success\", `${inviteMode ? \"Invite\" : \"Un-Assign\"} persons success.`);\n }\n\n this.setState({\n persons: [...this.reformPersons(this.props.persons)],\n assignMode: false,\n inviteMode: false,\n unassignMode: false,\n personsSelected: [],\n });\n }\n\n if (this.props.mode == \"AssignSurvey\" && (assignMode || unassignMode)) {\n this.props.onConfig.getAdminConfig().then(() => {});\n }\n } else {\n this.generateAlert(\"danger\", this.props.personsError.errData.Message);\n }\n }\n\n this.setState({ isUpdating: this.props.isUpdating });\n });\n };\n\n renderAssignInviteConfirmationDialog = () => {\n const { assignMode, unassignMode, inviteMode } = this.state;\n\n return (\n \n {`${assignMode ? \"Assign\" : unassignMode ? \"Un-Assign\" : \"Invite\"} Participants Confirmation`} \n \n \n \n \n {\n this.handleConfirmAssignInvite();\n }}\n disabled={this.state.isUpdating}\n >\n OK\n \n \n Cancel\n \n \n \n );\n };\n\n togleContinueToInviteDialog = () => {\n const showContinueToInviteDialog = this.state.showContinueToInviteDialog;\n this.setState({ showContinueToInviteDialog: !showContinueToInviteDialog });\n };\n\n closeContinueToInviteDialog = () => {\n this.setState({\n persons: this.reformPersons(this.props.persons),\n assignMode: false,\n inviteMode: false,\n unassignMode: false,\n personsSelected: [],\n showContinueToInviteDialog: false,\n });\n };\n\n handleContinueToInvite = () => {\n const personsSelected = this.state.personsSelected;\n const persons = this.reformPersons(this.props.persons).filter((it) => !it.isInvited && it.isAssigned && !it.inactive && (!it.roles || (it.roles && it.roles.length == 0) || (it.roles && it.roles.some((it) => it.role == \"User\"))));\n\n if (personsSelected) {\n personsSelected.forEach((it) => {\n const personSelected = persons.find((p) => p.id == it);\n if (personSelected) {\n personSelected.toggleSelected = true;\n }\n });\n }\n\n this.setState({\n persons: [...persons],\n assignMode: false,\n inviteMode: true,\n unassignMode: false,\n showContinueToInviteDialog: false,\n });\n };\n\n renderContinueToInviteDialog = () => {\n return (\n \n Continue to invite participants \n \n \n \n \n {\n this.handleContinueToInvite();\n }}\n >\n Yes\n \n \n No\n \n \n \n );\n };\n\n handleShowAllInviteChanged = () => {\n const checkShowInvited = this.state.checkShowInvited;\n this.setState({ checkShowInvited: !checkShowInvited }, () => {\n this.handleFilterInvite();\n });\n };\n\n showMessageReason = (reason) => {\n alert(reason);\n };\n\n handleShowColumnSettings = () => {\n const showColumnSettings = this.state.showColumnSettings;\n\n this.setState({ showColumnSettings: !showColumnSettings });\n };\n\n onTableFilterChange = (e, searchType) => {\n let columnSearchKeywords = this.state.columnSearchKeywords;\n if (!columnSearchKeywords) {\n columnSearchKeywords = [];\n }\n\n if (columnSearchKeywords.find((it) => it.name == e.target.name)) {\n let columnSearchKeyword = columnSearchKeywords.find((it) => it.name == e.target.name);\n columnSearchKeyword.value = e.target.value;\n } else {\n columnSearchKeywords.push({\n name: e.target.name,\n value: e.target.value,\n searchType,\n });\n }\n\n this.setState({ columnSearchKeywords });\n };\n\n handleExportProfiles = () => {\n this.setState({\n exportProfileMode: true,\n personsSelected: [],\n persons: this.reformPersons(this.props.persons.filter((it) => it.percentage == 1 && !it.inactive && it.isAssigned && it.roles.some((r) => r.role == \"User\")).sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))),\n });\n };\n\n handleProcessExportProfiles = () => {\n const personsSelected = this.state.personsSelected;\n\n this.setState({ isUpdating: true });\n\n this.props.onPerson.exportPersonsProfiles(personsSelected).then(() => {\n if (!this.props.loadingPrint && !this.props.personsError) {\n if (this.props.printData) {\n var today = new Date();\n var strToday = today.getFullYear() + this.pad2(today.getMonth() + 1) + this.pad2(today.getDate()) + \"_\" + this.pad2(today.getHours()) + this.pad2(today.getMinutes()) + this.pad2(today.getSeconds());\n FileDownload(this.props.printData, `PersonProfiles_${strToday}.json`);\n }\n\n this.setState({\n exportProfileMode: false,\n personsSelected: [],\n persons: this.reformPersons(this.props.persons.filter((it) => !it.inactive && it.isAssigned && it.roles.some((r) => r.role == \"User\")).sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))),\n });\n }\n\n this.setState({ isUpdating: this.props.loadingPrint });\n });\n };\n\n handleCancelExportProfiles = () => {\n this.setState({\n exportProfileMode: false,\n personsSelected: [],\n persons: this.reformPersons(this.props.persons.filter((it) => !it.inactive && it.isAssigned && it.roles.some((r) => r.role == \"User\")).sort((a, b) => (`${a.firstName} ${a.lastName}` > `${b.firstName} ${b.lastName}` ? 1 : -1))),\n });\n };\n\n handleImportProfiles = () => {\n this.setState({ showDialogImportProfileTs: new Date() });\n };\n\n handleUpdatePersonAdminRoleName = (personId, updatedAdminRoleName) => {\n const { persons } = this.state;\n const person = persons.find((it) => it.id == personId);\n if (person) {\n person.adminRoleName = updatedAdminRoleName;\n\n this.setState({ persons: [...persons], selectedPerson: person });\n }\n };\n\n render() {\n const { persons, searchKeyword, columnSearchKeywords } = this.state;\n const { config } = this.props;\n\n const pageAssignments = this.props.pageAssignments;\n let manageUserPageAssignment = null;\n let assignUserPageAssignment = null;\n let trackProgressPageAssignment = null;\n\n if (pageAssignments.find((it) => it.pageName == \"Manage Users\")) {\n manageUserPageAssignment = pageAssignments.find((it) => it.pageName == \"Manage Users\");\n }\n\n if (pageAssignments.find((it) => it.pageName == \"Assign Participants\")) {\n assignUserPageAssignment = pageAssignments.find((it) => it.pageName == \"Assign Participants\");\n }\n\n if (pageAssignments.find((it) => it.pageName == \"Track Participant Progress\")) {\n trackProgressPageAssignment = pageAssignments.find((it) => it.pageName == \"Track Participant Progress\");\n }\n\n let allowSetAdminRole = false;\n if (manageUserPageAssignment && manageUserPageAssignment.operations.find((it) => it.operation == \"Set Admin Role\" && it.allow == true)) {\n allowSetAdminRole = true;\n }\n\n const mode = this.props.mode;\n const openPersonDetail = this.openPersonDetail;\n const openGeneratePersonReport = this.openGeneratePersonReport;\n const personRolesUpdated = this.personRolesUpdated;\n const handleDeletePerson = this.handleDeletePerson;\n const toFixedIfNecessary = this.toFixedIfNecessary;\n const generateAlert = this.generateAlert;\n const showMessageReason = this.showMessageReason;\n const onTableFilterChange = this.onTableFilterChange;\n\n const handleRowClick = this.handleRowClick;\n const handleSelectAll = this.handleSelectAll;\n\n const selectableRows = (mode == \"AssignSurvey\" && (this.state.assignMode || this.state.unassignMode || this.state.inviteMode)) || this.state.exportProfileMode ? true : false;\n const filtered = this.filterArray(persons, searchKeyword, this.searchProperties(), columnSearchKeywords);\n\n const surveyStartedSort = (rowA, rowB) => {\n let startedA = \"FALSE\";\n let startedB = \"FALSE\";\n\n if (rowA.accounts && rowA.accounts.length > 0) {\n const account = rowA.accounts.sort((b, a) => new Date(a.createdOn) - new Date(b.createdOn))[0];\n if (account.roleId) {\n startedA = \"TRUE\";\n }\n }\n\n if (rowB.accounts && rowB.accounts.length > 0) {\n const account = rowB.accounts.sort((b, a) => new Date(a.createdOn) - new Date(b.createdOn))[0];\n if (account.roleId) {\n startedB = \"TRUE\";\n }\n }\n\n if (startedA > startedB) {\n return 1;\n }\n\n if (startedB > startedA) {\n return -1;\n }\n\n return 0;\n };\n\n const invitedDateSort = (rowA, rowB) => {\n if (new Date(rowA.invitedOn) > new Date(rowB.invitedOn)) {\n return 1;\n }\n\n if (new Date(rowB.invitedOn) > new Date(rowA.invitedOn)) {\n return -1;\n }\n\n return 0;\n };\n\n const invitedSentDateSort = (rowA, rowB) => {\n if (new Date(rowA.invitedSentOn) > new Date(rowB.invitedSentOn)) {\n return 1;\n }\n\n if (new Date(rowB.invitedSentOn) > new Date(rowA.invitedSentOn)) {\n return -1;\n }\n\n return 0;\n };\n\n const selfAssessedLastProfileUpdatedOnSort = (rowA, rowB) => {\n if (new Date(rowA.selfAssessedLastProfileUpdatedOn) > new Date(rowB.selfAssessedLastProfileUpdatedOn)) {\n return 1;\n }\n\n if (new Date(rowB.selfAssessedLastProfileUpdatedOn) > new Date(rowA.selfAssessedLastProfileUpdatedOn)) {\n return -1;\n }\n\n return 0;\n };\n\n const endorsementLastUpdatedSort = (rowA, rowB) => {\n if (new Date(rowA.endorsementLastUpdated) > new Date(rowB.endorsementLastUpdated)) {\n return 1;\n }\n\n if (new Date(rowB.endorsementLastUpdated) > new Date(rowA.endorsementLastUpdated)) {\n return -1;\n }\n\n return 0;\n };\n\n const leaveOnSort = (rowA, rowB) => {\n if (new Date(rowA.leaveOn) > new Date(rowB.leaveOn)) {\n return 1;\n }\n\n if (new Date(rowB.leaveOn) > new Date(rowA.leaveOn)) {\n return -1;\n }\n\n return 0;\n };\n\n const candidateSort = (rowA, rowB) => {\n let candidateA = rowA.isCandidate ? \"TRUE\" : \"FALSE\";\n let candidateB = rowB.isCandidate ? \"TRUE\" : \"FALSE\";\n\n if (candidateA > candidateB) {\n return 1;\n }\n\n if (candidateB > candidateA) {\n return -1;\n }\n\n return 0;\n };\n\n const contractorSort = (rowA, rowB) => {\n let contractorA = rowA.isContractor ? \"TRUE\" : \"FALSE\";\n let contractorB = rowB.isContractor ? \"TRUE\" : \"FALSE\";\n\n if (contractorA > contractorB) {\n return 1;\n }\n\n if (contractorB > contractorA) {\n return -1;\n }\n\n return 0;\n };\n\n const mentorIneligibleSort = (rowA, rowB) => {\n let mentorIneligibleA = rowA.isMentorIneligible ? \"TRUE\" : \"FALSE\";\n let mentorIneligibleB = rowB.isMentorIneligible ? \"TRUE\" : \"FALSE\";\n\n if (mentorIneligibleA > mentorIneligibleB) {\n return 1;\n }\n\n if (mentorIneligibleB > mentorIneligibleA) {\n return -1;\n }\n\n return 0;\n };\n\n const endorsedProfileCreatedSort = (rowA, rowB) => {\n let startedA = \"FALSE\";\n let startedB = \"FALSE\";\n\n if (rowA.endorsedProfileCreated) {\n startedA = \"TRUE\";\n }\n\n if (rowB.endorsedProfileCreated) {\n startedB = \"TRUE\";\n }\n\n if (startedA > startedB) {\n return 1;\n }\n\n if (startedB > startedA) {\n return -1;\n }\n\n return 0;\n };\n\n const endorsementLatestStatusSort = (rowA, rowB) => {\n let statusA = rowA.endorsementLatestStatus ? rowA.endorsementLatestStatus : rowA.endorsementLastUpdatedVersion ? \"1\" : \"\";\n let statusB = rowB.endorsementLatestStatus ? rowB.endorsementLatestStatus : rowB.endorsementLastUpdatedVersion ? \"1\" : \"\";\n\n if (statusA > statusB) {\n return 1;\n }\n\n if (statusB > statusA) {\n return -1;\n }\n\n return 0;\n };\n\n const pageName = this.props.mode == \"ManageUser\" ? \"Manage Users\" : this.props.mode == \"AssignSurvey\" ? \"Assign Participants\" : \"Track Participant Progress\";\n const columnDisplaySettings = this.props.columnDisplaySettings ? this.props.columnDisplaySettings.filter((it) => it.pageName == pageName) : [];\n\n const columns = [\n {\n id: \"id\",\n name: (\n \n
\n ),\n selector: (row) => row.id,\n sortable: false,\n width: \"80px\",\n center: true,\n format: function (row, index) {\n return (\n \n
\n );\n },\n omit: !selectableRows,\n },\n {\n id: \"lastUpdatedOn\",\n name: \"Action\",\n selector: (row) => row.lastUpdatedOn,\n sortable: false,\n width: \"100px\",\n center: true,\n format: function (row, index) {\n return (\n \n openPersonDetail(row)} />\n \n Person Detail\n \n {row.inactive && manageUserPageAssignment && manageUserPageAssignment.operations.find((it) => it.operation == \"Delete\" && it.allow == true) && (\n \n \n handleDeletePerson(row)} />\n \n Delete Person\n \n \n )}\n {row.percentage >= 1 && (\n \n \n openGeneratePersonReport(row)} />\n \n Generate profile reports\n \n \n )}\n
\n );\n },\n omit: mode != \"ManageUser\",\n },\n {\n id: \"inactive\",\n name: (\n \n Active\n
\n ),\n selector: (row) => row.inactive,\n sortable: true,\n width: \"90px\",\n format: function (row, index) {\n return row.inactive ? \"Inactive\" : \"Active\";\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"inactive\") ? !columnDisplaySettings.find((it) => it.columnName == \"inactive\").visible : true,\n },\n {\n id: \"email\",\n name: (\n \n Email Address\n
\n ),\n selector: (row) => row.email,\n sortable: true,\n width: \"250px\",\n wrap: true,\n format: function (row, index) {\n const value = row.email;\n return mode == \"AssignSurvey\" || mode == \"TrackProgress\" ? (\n selectableRows ? (\n handleRowClick(row)} style={{ wordBreak: \"break-word\", cursor: \"default\" }}>\n {value}\n \n ) : (\n {value} \n )\n ) : (\n \n {value} \n \n \n Person Detail\n \n \n );\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"email\") ? !columnDisplaySettings.find((it) => it.columnName == \"email\").visible : true,\n },\n {\n id: \"firstName\",\n name: (\n \n First\n
\n ),\n selector: (row) => row.firstName,\n sortable: true,\n width: \"150px\",\n format: function (row, index) {\n const value = row.firstName;\n return selectableRows ? (\n handleRowClick(row)} style={{ wordBreak: \"break-word\", cursor: \"default\" }}>\n {value}\n \n ) : (\n {value} \n );\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"firstName\") ? !columnDisplaySettings.find((it) => it.columnName == \"firstName\").visible : true,\n },\n {\n id: \"lastName\",\n name: (\n \n Last\n
\n ),\n selector: (row) => row.lastName,\n sortable: true,\n width: \"150px\",\n format: function (row, index) {\n const value = row.lastName;\n return selectableRows ? (\n handleRowClick(row)} style={{ wordBreak: \"break-word\", cursor: \"default\" }}>\n {value}\n \n ) : (\n {value} \n );\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"lastName\") ? !columnDisplaySettings.find((it) => it.columnName == \"lastName\").visible : true,\n },\n {\n id: \"salutation\",\n name: (\n \n Preferred\n
\n ),\n selector: (row) => row.salutation,\n sortable: true,\n width: \"200px\",\n wrap: true,\n format: function (row, index) {\n const value = row.salutation;\n return selectableRows ? (\n handleRowClick(row)} style={{ wordBreak: \"break-word\", cursor: \"default\" }}>\n {value}\n \n ) : (\n {value} \n );\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"salutation\") ? !columnDisplaySettings.find((it) => it.columnName == \"salutation\").visible : true,\n },\n {\n id: \"position\",\n name: (\n \n Position\n
\n ),\n selector: (row) => row.position,\n sortable: true,\n width: \"150px\",\n wrap: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"position\") ? !columnDisplaySettings.find((it) => it.columnName == \"position\").visible : true,\n },\n {\n id: \"team\",\n name: (\n \n Team\n
\n ),\n selector: (row) => row.team,\n sortable: true,\n width: \"150px\",\n wrap: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"team\") ? !columnDisplaySettings.find((it) => it.columnName == \"team\").visible : true,\n },\n {\n id: \"strRoles\",\n name: (\n \n Roles\n
\n ),\n selector: (row) => row.strRoles,\n sortable: true,\n width: \"100px\",\n format: function (row, index) {\n return (\n \n \n );\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"strRoles\") ? !columnDisplaySettings.find((it) => it.columnName == \"strRoles\").visible : true,\n },\n {\n id: \"totalQuestions\",\n name: (\n \n Progress\n
\n ),\n selector: (row) => row.totalQuestions,\n sortable: true,\n width: \"120px\",\n format: function (row, index) {\n return selectableRows ? (\n handleRowClick(row)} style={{ cursor: \"default\" }}>\n {row.totalQuestions ? `${row.answeredQuestions} / ${row.totalQuestions}` : \"0 / 0\"}\n \n ) : row.totalQuestions ? (\n `${row.answeredQuestions} / ${row.totalQuestions}`\n ) : (\n \"0 / 0\"\n );\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"totalQuestions\") ? !columnDisplaySettings.find((it) => it.columnName == \"totalQuestions\").visible : true,\n },\n {\n id: \"answeredQuestions\",\n name: (\n \n %\n it.name == \"percentageHundred\") ? columnSearchKeywords.find((it) => it.name == \"percentageHundred\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.percentage,\n sortable: true,\n width: \"80px\",\n format: function (row, index) {\n return selectableRows ? (\n handleRowClick(row)} style={{ cursor: \"default\" }}>\n {row.percentage ? `${toFixedIfNecessary(row.percentage * 100, 2)}%` : \"0%\"}\n \n ) : row.percentage ? (\n `${toFixedIfNecessary(row.percentage * 100, 2)}%`\n ) : (\n \"0%\"\n );\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"answeredQuestions\") ? !columnDisplaySettings.find((it) => it.columnName == \"answeredQuestions\").visible : true,\n },\n {\n id: \"totalTimeTaken\",\n name: \"Time taken (mins)\",\n selector: (row) => row.totalTimeTaken,\n sortable: true,\n width: \"100px\",\n format: function (row, index) {\n //return toFixedIfNecessary(row.totalTimeTaken / 60, 2);\n return selectableRows ? (\n handleRowClick(row)} style={{ cursor: \"default\" }}>\n {toFixedIfNecessary(row.totalTimeTaken / 60, 2)}\n \n ) : (\n toFixedIfNecessary(row.totalTimeTaken / 60, 2)\n );\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"totalTimeTaken\") ? !columnDisplaySettings.find((it) => it.columnName == \"totalTimeTaken\").visible : true,\n },\n {\n id: \"isAssigned\",\n name: (\n \n Assigned\n
\n ),\n selector: (row) => row.isAssigned,\n sortable: true,\n width: \"110px\",\n format: function (row, index) {\n return selectableRows ? (\n handleRowClick(row)} style={{ wordBreak: \"break-word\", cursor: \"default\" }}>\n {row.isAssigned ? \"TRUE\" : \"FALSE\"}\n \n ) : (\n {row.isAssigned ? \"TRUE\" : \"FALSE\"} \n );\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"assigned\") ? !columnDisplaySettings.find((it) => it.columnName == \"assigned\").visible : true,\n },\n {\n id: \"isInvited\",\n name: (\n \n Invited\n
\n ),\n selector: (row) => row.isInvited,\n sortable: true,\n width: \"110px\",\n format: function (row, index) {\n return selectableRows ? (\n handleRowClick(row)} style={{ wordBreak: \"break-word\", cursor: \"default\" }}>\n {row.isInvited ? \"TRUE\" : \"FALSE\"}\n \n ) : (\n {row.isInvited ? \"TRUE\" : \"FALSE\"} \n );\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"invited\") ? !columnDisplaySettings.find((it) => it.columnName == \"invited\").visible : true,\n },\n {\n id: \"messageSent\",\n name: (\n \n Sent\n
\n ),\n selector: (row) => row.messageSent,\n sortable: true,\n width: \"110px\",\n format: function (row, index) {\n return row.invitationEmailMessageId && row.isInvited ? (\n row.invitationEmailMessageStatus == \"delivered\" ? (\n \"TRUE\"\n ) : row.invitationEmailMessageStatus == \"dropped\" || row.invitationEmailMessageStatus == \"drop\" || row.invitationEmailMessageStatus == \"deferred\" || row.invitationEmailMessageStatus == \"bounce\" ? (\n showMessageReason(row.invitationEmailMessageReason)}>\n FALSE\n \n ) : (\n \"\"\n )\n ) : (\n \"\"\n );\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"sent\") ? !columnDisplaySettings.find((it) => it.columnName == \"sent\").visible : true,\n },\n {\n id: \"validatedDate\",\n name: (\n \n Survey Started\n it.name == \"surveyStarted\") ? columnSearchKeywords.find((it) => it.name == \"surveyStarted\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.validatedDate,\n sortable: true,\n sortFunction: surveyStartedSort,\n width: \"110px\",\n format: function (row, index) {\n let started = false;\n if (row.accounts && row.accounts.length > 0) {\n const account = row.accounts.sort((b, a) => new Date(a.createdOn) - new Date(b.createdOn))[0];\n if (account.roleId) {\n started = true;\n }\n }\n\n return selectableRows ? (\n handleRowClick(row)} style={{ wordBreak: \"break-word\", cursor: \"default\" }}>\n {started ? \"TRUE\" : \"FALSE\"}\n \n ) : (\n {started ? \"TRUE\" : \"FALSE\"} \n );\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"surveyStarted\") ? !columnDisplaySettings.find((it) => it.columnName == \"surveyStarted\").visible : true,\n },\n {\n id: \"invitedSentOn\",\n name: \"Invited Date\",\n selector: (row) => row.invitedSentOn,\n sortable: true,\n width: \"100px\",\n sortFunction: invitedSentDateSort,\n format: function (row, index) {\n return selectableRows ? (\n handleRowClick(row)} style={{ cursor: \"default\" }}>\n {row.invitedSentOn &&\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(row.invitedSentOn))}\n \n ) : (\n row.invitedSentOn &&\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(row.invitedSentOn))\n );\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"invitedSentDate\") ? !columnDisplaySettings.find((it) => it.columnName == \"invitedSentDate\").visible : true,\n },\n {\n id: \"endorsedProfileCreated\",\n name: (\n \n Endorsed\n
\n ),\n selector: (row) => row.endorsedProfileCreated,\n sortable: true,\n sortFunction: endorsedProfileCreatedSort,\n width: \"110px\",\n format: function (row, index) {\n let started = row.endorsedProfileCreated;\n\n return selectableRows ? (\n handleRowClick(row)} style={{ wordBreak: \"break-word\", cursor: \"default\" }}>\n {started ? \"TRUE\" : \"FALSE\"}\n \n ) : (\n {started ? \"TRUE\" : \"FALSE\"} \n );\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"endorsed\") ? !columnDisplaySettings.find((it) => it.columnName == \"endorsed\").visible : true,\n },\n {\n id: \"invitedOn\",\n name: \"Invited Date\",\n selector: (row) => row.invitedOn,\n sortable: true,\n width: \"100px\",\n sortFunction: invitedDateSort,\n format: function (row, index) {\n return selectableRows ? (\n handleRowClick(row)} style={{ cursor: \"default\" }}>\n {row.invitedOn &&\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(row.invitedOn))}\n \n ) : (\n row.invitedOn &&\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(row.invitedOn))\n );\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"invitedDate\") ? !columnDisplaySettings.find((it) => it.columnName == \"invitedDate\").visible : true,\n },\n {\n id: \"isCandidate\",\n name: (\n \n Candidate\n
\n ),\n selector: (row) => row.isCandidate,\n sortable: true,\n sortFunction: candidateSort,\n width: \"120px\",\n format: function (row, index) {\n return row.isCandidate ? \"TRUE\" : \"\";\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"candidate\") ? !columnDisplaySettings.find((it) => it.columnName == \"candidate\").visible : true,\n },\n {\n id: \"isContractor\",\n name: (\n \n Contractor\n it.name == \"strContractor\") ? columnSearchKeywords.find((it) => it.name == \"strContractor\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.isContractor,\n sortable: true,\n sortFunction: contractorSort,\n width: \"120px\",\n format: function (row, index) {\n return row.isContractor ? \"TRUE\" : \"\";\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"contractor\") ? !columnDisplaySettings.find((it) => it.columnName == \"contractor\").visible : true,\n },\n {\n id: \"isMentorIneligible\",\n name: (\n \n Mentor Ineligible\n it.name == \"strMentorIneligible\") ? columnSearchKeywords.find((it) => it.name == \"strMentorIneligible\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.isMentorIneligible,\n sortable: true,\n sortFunction: mentorIneligibleSort,\n width: \"120px\",\n format: function (row, index) {\n return row.isMentorIneligible ? \"TRUE\" : \"\";\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"mentorIneligible\") ? !columnDisplaySettings.find((it) => it.columnName == \"mentorIneligible\").visible : true,\n },\n {\n id: \"selfAssessedLastProfileVersion\",\n name: (\n \n SelfAssessed Version\n it.name == \"selfAssessedLastProfileVersion\") ? columnSearchKeywords.find((it) => it.name == \"selfAssessedLastProfileVersion\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.selfAssessedLastProfileVersion,\n sortable: true,\n width: \"120px\",\n omit: columnDisplaySettings.find((it) => it.columnName == \"selfAssessedLastProfileVersion\") ? !columnDisplaySettings.find((it) => it.columnName == \"selfAssessedLastProfileVersion\").visible : true,\n },\n {\n id: \"selfAssessedLastProfileUpdatedOn\",\n name: \"SelfAssessed Last Updated\",\n selector: (row) => row.selfAssessedLastProfileUpdatedOn,\n sortable: true,\n width: \"120px\",\n sortFunction: selfAssessedLastProfileUpdatedOnSort,\n format: function (row, index) {\n return selectableRows ? (\n handleRowClick(row)} style={{ cursor: \"default\" }}>\n {row.selfAssessedLastProfileUpdatedOn &&\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(row.selfAssessedLastProfileUpdatedOn))}\n \n ) : (\n row.selfAssessedLastProfileUpdatedOn &&\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(row.selfAssessedLastProfileUpdatedOn))\n );\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"selfAssessedLastProfileUpdatedOn\") ? !columnDisplaySettings.find((it) => it.columnName == \"selfAssessedLastProfileUpdatedOn\").visible : true,\n },\n {\n id: \"selfAssessedLastProfileApproved\",\n name: (\n \n SelfAssessed Approved\n it.name == \"selfAssessedLastProfileApproved\") ? columnSearchKeywords.find((it) => it.name == \"selfAssessedLastProfileApproved\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.selfAssessedLastProfileApproved,\n sortable: true,\n width: \"120px\",\n format: function (row, index) {\n let approved = row.selfAssessedLastProfileApproved;\n\n return selectableRows ? (\n handleRowClick(row)} style={{ wordBreak: \"break-word\", cursor: \"default\" }}>\n {approved}\n \n ) : (\n {approved} \n );\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"selfAssessedLastProfileApproved\") ? !columnDisplaySettings.find((it) => it.columnName == \"selfAssessedLastProfileApproved\").visible : true,\n },\n {\n id: \"endorsementLastUpdatedVersion\",\n name: (\n \n Endorsed Version\n it.name == \"endorsementLastUpdatedVersion\") ? columnSearchKeywords.find((it) => it.name == \"endorsementLastUpdatedVersion\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.endorsementLastUpdatedVersion,\n sortable: true,\n width: \"120px\",\n omit: columnDisplaySettings.find((it) => it.columnName == \"endorsementLastUpdatedVersion\") ? !columnDisplaySettings.find((it) => it.columnName == \"endorsementLastUpdatedVersion\").visible : true,\n },\n {\n id: \"endorsementLastUpdated\",\n name: \"Endorsed Last Updated\",\n selector: (row) => row.endorsementLastUpdated,\n sortable: true,\n width: \"120px\",\n sortFunction: endorsementLastUpdatedSort,\n format: function (row, index) {\n return selectableRows ? (\n handleRowClick(row)} style={{ cursor: \"default\" }}>\n {row.endorsementLastUpdated &&\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(row.endorsementLastUpdated))}\n \n ) : (\n row.endorsementLastUpdated &&\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(row.endorsementLastUpdated))\n );\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"endorsementLastUpdated\") ? !columnDisplaySettings.find((it) => it.columnName == \"endorsementLastUpdated\").visible : true,\n },\n {\n id: \"endorsementLatestStatus\",\n name: (\n \n Endorsed Status\n it.name == \"endorsementLatestStatus\") ? columnSearchKeywords.find((it) => it.name == \"endorsementLatestStatus\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.endorsementLatestStatus,\n sortable: true,\n sortFunction: endorsementLatestStatusSort,\n width: \"150px\",\n format: function (row, index) {\n return row.endorsementLatestStatus;\n },\n wrap: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"endorsementLatestStatus\") ? !columnDisplaySettings.find((it) => it.columnName == \"endorsementLatestStatus\").visible : true,\n },\n {\n id: \"location\",\n name: (\n \n Location\n
\n ),\n selector: (row) => row.location,\n sortable: true,\n width: \"150px\",\n wrap: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"location\") ? !columnDisplaySettings.find((it) => it.columnName == \"location\").visible : true,\n },\n {\n id: \"country\",\n name: (\n \n Country\n
\n ),\n selector: (row) => row.country,\n sortable: true,\n width: \"150px\",\n wrap: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"country\") ? !columnDisplaySettings.find((it) => it.columnName == \"country\").visible : true,\n },\n {\n id: \"other\",\n name: (\n \n Other\n
\n ),\n selector: (row) => row.other,\n sortable: true,\n width: \"150px\",\n wrap: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"other\") ? !columnDisplaySettings.find((it) => it.columnName == \"other\").visible : true,\n },\n {\n id: \"leaveOn\",\n name: \"LeaveOn\",\n selector: (row) => row.leaveOn,\n sortable: true,\n width: \"120px\",\n sortFunction: leaveOnSort,\n format: function (row, index) {\n return selectableRows ? (\n handleRowClick(row)} style={{ cursor: \"default\" }}>\n {row.leaveOn &&\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(row.leaveOn))}\n \n ) : (\n row.leaveOn &&\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(row.leaveOn))\n );\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"leaveOn\") ? !columnDisplaySettings.find((it) => it.columnName == \"leaveOn\").visible : true,\n },\n {\n id: \"department\",\n name: (\n \n Department\n
\n ),\n selector: (row) => row.department,\n sortable: true,\n width: \"150px\",\n wrap: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"department\") ? !columnDisplaySettings.find((it) => it.columnName == \"department\").visible : true,\n },\n {\n id: \"businessUnit\",\n name: (\n \n Business Unit\n
\n ),\n selector: (row) => row.businessUnit,\n sortable: true,\n width: \"150px\",\n wrap: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"businessUnit\") ? !columnDisplaySettings.find((it) => it.columnName == \"businessUnit\").visible : true,\n },\n {\n id: \"division\",\n name: (\n \n Division\n
\n ),\n selector: (row) => row.division,\n sortable: true,\n width: \"150px\",\n wrap: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"division\") ? !columnDisplaySettings.find((it) => it.columnName == \"division\").visible : true,\n },\n {\n id: \"territory\",\n name: (\n \n Territory\n
\n ),\n selector: (row) => row.territory,\n sortable: true,\n width: \"150px\",\n wrap: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"territory\") ? !columnDisplaySettings.find((it) => it.columnName == \"territory\").visible : true,\n },\n {\n id: \"costCentre\",\n name: (\n \n Cost Centre\n
\n ),\n selector: (row) => row.costCentre,\n sortable: true,\n width: \"150px\",\n wrap: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"costCentre\") ? !columnDisplaySettings.find((it) => it.columnName == \"costCentre\").visible : true,\n },\n {\n id: \"supervisor\",\n name: (\n \n Supervisor\n
\n ),\n selector: (row) => row.supervisor,\n sortable: true,\n width: \"150px\",\n wrap: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"supervisor\") ? !columnDisplaySettings.find((it) => it.columnName == \"supervisor\").visible : true,\n },\n {\n id: \"skipSelfAssessmentSurvey\",\n name: (\n \n Skip Survey\n it.name == \"strSkipSelfAssessmentSurvey\") ? columnSearchKeywords.find((it) => it.name == \"strSkipSelfAssessmentSurvey\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.skipSelfAssessmentSurvey,\n sortable: true,\n width: \"110px\",\n format: function (row, index) {\n return selectableRows ? (\n handleRowClick(row)} style={{ wordBreak: \"break-word\", cursor: \"default\" }}>\n {row.skipSelfAssessmentSurvey ? \"TRUE\" : \"FALSE\"}\n \n ) : (\n {row.skipSelfAssessmentSurvey ? \"TRUE\" : \"FALSE\"} \n );\n },\n omit: !(config && config.allowSkipSelfAssessmentSurvey) || (columnDisplaySettings.find((it) => it.columnName == \"skipSelfAssessmentSurvey\") ? !columnDisplaySettings.find((it) => it.columnName == \"skipSelfAssessmentSurvey\").visible : true),\n },\n {\n id: \"roleBasedSurveyId\",\n name: (\n \n Role Based Survey\n it.name == \"roleBasedSurvey\") ? columnSearchKeywords.find((it) => it.name == \"roleBasedSurvey\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.roleBasedSurveyId,\n sortable: true,\n width: \"150px\",\n format: function (row, index) {\n return selectableRows ? (\n handleRowClick(row)} style={{ wordBreak: \"break-word\", cursor: \"default\" }}>\n {row.roleBasedSurvey}\n \n ) : (\n {row.roleBasedSurvey} \n );\n },\n wrap: true,\n omit: columnDisplaySettings.find((it) => it.columnName == \"roleBasedSurvey\") ? !columnDisplaySettings.find((it) => it.columnName == \"roleBasedSurvey\").visible : true,\n },\n {\n id: \"fte\",\n name: (\n \n Fte\n
\n ),\n selector: (row) => row.fte,\n sortable: true,\n width: \"110px\",\n format: function (row, index) {\n return row.fte ? (row.fte % 1 != 0 ? Math.round(row.fte * 100) / 100 : row.fte.toFixed(1)) : \"1.0\";\n },\n omit: columnDisplaySettings.find((it) => it.columnName == \"fte\") ? !columnDisplaySettings.find((it) => it.columnName == \"fte\").visible : true,\n },\n {\n id: \"miscellaneous1\",\n name: (\n \n {config && config.personMiscellaneous1Enable ? config.personMiscellaneous1Caption : \"Miscellaneous 1\"}\n it.name == \"miscellaneous1\") ? columnSearchKeywords.find((it) => it.name == \"miscellaneous1\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.miscellaneous1,\n sortable: true,\n width: \"150px\",\n wrap: true,\n format: function (row, index) {\n const value = row.miscellaneous1;\n return selectableRows ? (\n handleRowClick(row)} style={{ wordBreak: \"break-word\", cursor: \"default\" }}>\n {value}\n \n ) : (\n {value} \n );\n },\n omit: config && config.personMiscellaneous1Enable ? (columnDisplaySettings.find((it) => it.columnName == \"miscellaneous1\") ? !columnDisplaySettings.find((it) => it.columnName == \"miscellaneous1\").visible : true) : true,\n },\n {\n id: \"miscellaneous2\",\n name: (\n \n {config && config.personMiscellaneous2Enable ? config.personMiscellaneous2Caption : \"Miscellaneous 2\"}\n it.name == \"miscellaneous2\") ? columnSearchKeywords.find((it) => it.name == \"miscellaneous2\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.miscellaneous2,\n sortable: true,\n width: \"150px\",\n wrap: true,\n format: function (row, index) {\n const value = row.miscellaneous2;\n return selectableRows ? (\n handleRowClick(row)} style={{ wordBreak: \"break-word\", cursor: \"default\" }}>\n {value}\n \n ) : (\n {value} \n );\n },\n omit: config && config.personMiscellaneous2Enable ? (columnDisplaySettings.find((it) => it.columnName == \"miscellaneous2\") ? !columnDisplaySettings.find((it) => it.columnName == \"miscellaneous2\").visible : true) : true,\n },\n {\n id: \"miscellaneous3\",\n name: (\n \n {config && config.personMiscellaneous3Enable ? config.personMiscellaneous3Caption : \"Miscellaneous 3\"}\n it.name == \"miscellaneous3\") ? columnSearchKeywords.find((it) => it.name == \"miscellaneous3\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.miscellaneous3,\n sortable: true,\n width: \"150px\",\n wrap: true,\n format: function (row, index) {\n const value = row.miscellaneous3;\n return selectableRows ? (\n handleRowClick(row)} style={{ wordBreak: \"break-word\", cursor: \"default\" }}>\n {value}\n \n ) : (\n {value} \n );\n },\n omit: config && config.personMiscellaneous3Enable ? (columnDisplaySettings.find((it) => it.columnName == \"miscellaneous3\") ? !columnDisplaySettings.find((it) => it.columnName == \"miscellaneous3\").visible : true) : true,\n },\n {\n id: \"miscellaneous4\",\n name: (\n \n {config && config.personMiscellaneous4Enable ? config.personMiscellaneous4Caption : \"Miscellaneous 4\"}\n it.name == \"miscellaneous4\") ? columnSearchKeywords.find((it) => it.name == \"miscellaneous4\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.miscellaneous4,\n sortable: true,\n width: \"150px\",\n wrap: true,\n format: function (row, index) {\n const value = row.miscellaneous4;\n return selectableRows ? (\n handleRowClick(row)} style={{ wordBreak: \"break-word\", cursor: \"default\" }}>\n {value}\n \n ) : (\n {value} \n );\n },\n omit: config && config.personMiscellaneous4Enable ? (columnDisplaySettings.find((it) => it.columnName == \"miscellaneous4\") ? !columnDisplaySettings.find((it) => it.columnName == \"miscellaneous4\").visible : true) : true,\n },\n {\n id: \"miscellaneous5\",\n name: (\n \n {config && config.personMiscellaneous5Enable ? config.personMiscellaneous5Caption : \"Miscellaneous 5\"}\n it.name == \"miscellaneous5\") ? columnSearchKeywords.find((it) => it.name == \"miscellaneous5\").value : \"\"}\n onChange={(e) => onTableFilterChange(e)}\n style={{ width: \"100%\" }}\n />\n
\n ),\n selector: (row) => row.miscellaneous5,\n sortable: true,\n width: \"150px\",\n wrap: true,\n format: function (row, index) {\n const value = row.miscellaneous5;\n return selectableRows ? (\n handleRowClick(row)} style={{ wordBreak: \"break-word\", cursor: \"default\" }}>\n {value}\n \n ) : (\n {value} \n );\n },\n omit: config && config.personMiscellaneous5Enable ? (columnDisplaySettings.find((it) => it.columnName == \"miscellaneous5\") ? !columnDisplaySettings.find((it) => it.columnName == \"miscellaneous5\").visible : true) : true,\n },\n ];\n\n return (\n \n \n
\n ) : (\n \n it.operation == \"Edit\" && it.allow == true) ? true : false}\n allowUpdateAccess={manageUserPageAssignment && manageUserPageAssignment.operations.find((it) => it.operation == \"Update Access Permission\" && it.allow == true) ? true : false}\n allowSetAdminRole={manageUserPageAssignment && manageUserPageAssignment.operations.find((it) => it.operation == \"Set Admin Role\" && it.allow == true) ? true : false}\n handleUpdatePersonAdminRoleName={this.handleUpdatePersonAdminRoleName}\n >\n \n {this.props.config && (\n \n \n ${this.props.config.licenceAllocations} with a renewal date of ${\n this.props.config.renewalDate &&\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"long\",\n day: \"numeric\",\n }).format(new Date(this.props.config.renewalDate))\n } and you currently have ${this.props.config.liveUsers} live users`,\n }}\n >\n \n \n \n \n )}\n \n ) : (\n \"\"\n )}\n \n \n {\n this.handleClearSelection();\n this.setState({ searchKeyword, personsSelected: [] });\n }}\n >\n \n {\n this.handleClearSelection();\n this.setState({ searchKeyword: \"\", personsSelected: [] });\n }}\n >\n \n \n \n {manageUserPageAssignment && manageUserPageAssignment.operations.find((it) => it.operation == \"Add\" && it.allow == true) && (\n \n \n \n )}\n {manageUserPageAssignment && manageUserPageAssignment.operations.find((it) => it.operation == \"Export\" && it.allow == true) && (\n \n \n \n )}\n {manageUserPageAssignment && manageUserPageAssignment.operations.find((it) => it.operation == \"Import\" && it.allow == true) && (\n \n \n \n )}\n \n )}\n {mode == \"AssignSurvey\" && (\n \n {!(this.state.assignMode || this.state.unassignMode || this.state.inviteMode) && (\n \n {assignUserPageAssignment && assignUserPageAssignment.operations.find((it) => it.operation == \"Assign Participants\" && it.allow == true) && (\n \n \n \n )}\n {assignUserPageAssignment && assignUserPageAssignment.operations.find((it) => it.operation == \"Invite Participants\" && it.allow == true) && (\n \n \n \n )}\n {assignUserPageAssignment && assignUserPageAssignment.operations.find((it) => it.operation == \"Un-Assign Participants\" && it.allow == true) && (\n \n \n \n )}\n \n )}\n {(this.state.assignMode || this.state.unassignMode || this.state.inviteMode) && (\n \n \n {`Process ${this.state.assignMode ? \"Assign\" : this.state.unassignMode ? \"Un-Assign\" : \"Invite\"}`}\n \n \n \n Cancel\n \n \n {this.state.inviteMode && (\n \n \n Show All\n \n \n \n )}\n \n )}\n \n )}\n {mode == \"TrackProgress\" && (\n \n {trackProgressPageAssignment && trackProgressPageAssignment.operations.find((it) => it.operation == \"Export\" && it.allow == true) && (\n \n \n \n )}\n {trackProgressPageAssignment && trackProgressPageAssignment.operations.find((it) => it.operation == \"Export Person Profiles\" && it.allow == true) && (\n \n \n \n \n Process\n \n \n \n Cancel\n \n \n \n )}\n \n )}\n {trackProgressPageAssignment && trackProgressPageAssignment.operations.find((it) => it.operation == \"Import Persons and Profiles\" && it.allow == true) && (\n \n \n \n )}\n \n )}\n \n \n \n {this.props.config && (\n \n \n \n )}\n \n
\n
\n {this.state.showColumnSettings && (\n \n
\n )}\n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n error: state.auth.error,\n\n personsLoading: state.adminPerson.loading,\n personsError: state.adminPerson.error,\n persons: state.adminPerson.persons,\n isUpdating: state.adminPerson.isUpdating,\n\n loadingPrint: state.adminPerson.loadingPrint,\n printData: state.adminPerson.printData,\n\n pageAssignments: state.adminPerson.pageAssignments,\n columnDisplaySettings: state.adminPerson.columnDisplaySettings,\n config: state.config.config,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onPerson: bindActionCreators(adminPersonActions, dispatch),\n onConfig: bindActionCreators(configActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ManageUser);\n","import * as authActions from \"../../store/actions/authAction\";\nimport { ContentWrapperLg } from \"../common/ContentWrapperLg\";\nimport NavAdmin from \"../common/NavAdmin\";\nimport NavSecondary from \"../common/NavSecondary\";\nimport { contentTranslator } from \"./../../utils/translatorUtils\";\nimport Admin403Page from \"./Admin403Page\";\nimport AdminBranding from \"./AdminBranding\";\nimport Analytics from \"./Analytics\";\nimport ManageEmailTemplates from \"./ManageEmailTemplates\";\nimport ManageReportTemplates from \"./ManageReportTemplates\";\nimport ManageContent from \"./contents/ManageContent\";\nimport ManageEndorsement from \"./endorsements/ManageEndorsement\";\nimport ManageExtraFramework from \"./extraFramework/ManageExtraFramework\";\nimport ManageJobAssignment from \"./jobAssignment/ManageJobAssignment\";\nimport ManageJob from \"./jobs/ManageJob\";\nimport ManageJobCreate from \"./jobs/ManageJobCreate\";\nimport ManageJobFamily from \"./jobs/ManageJobFamily\";\nimport ManageJobProfile from \"./jobs/ManageJobProfile\";\nimport ManageLor from \"./lor/ManageLor\";\nimport ManageRelationships from \"./relationships/ManageRelationships\";\nimport ManageSelfAssessed from \"./selfAssessed/ManageSelfAssessed\";\nimport ManageProfiles from \"./selfProfiles/ManageProfiles\";\nimport ManageActionLogs from \"./settings/ManageActionLogs\";\nimport ManageSettings from \"./settings/ManageSettings\";\nimport ManageSfiaCredentials from \"./sfiaCredentials/ManageSfiaCredentials\";\nimport ManageSkillAttributes from \"./skillAttributes/ManageSkillAttributes\";\nimport ManageSSOSetting from \"./ssoSetting/ManageSSOSetting\";\nimport ManageActionPromotions from \"./trainings/ManageActionPromotions\";\nimport ManageProviders from \"./trainings/ManageProviders\";\nimport ManageTrainingJobs from \"./trainings/ManageTrainingJobs\";\nimport ManageTrainings from \"./trainings/ManageTrainings\";\nimport ManageUser from \"./users/ManageUser\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Route, Switch } from \"react-router\";\nimport { Col, Container, Modal, ModalBody, Row, Table } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nclass AdminHome extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: null,\n loading: false,\n showFloatingLegend: false,\n };\n\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n localStorage.setItem(\"manageProfileByAdminPopup\", \"FALSE\");\n\n Promise.resolve(this.props.onAuth.myPeopleClearManagedRelationship()).then(() => {});\n }\n\n updateAdminFloatingLegendStatus = (showFloatingLegend) => {\n this.setState({ showFloatingLegend });\n };\n\n renderRotateNotification = () => {\n return (\n this.closeRotateModal()}>\n \n \n
\n
\n
PLEASE ROTATE YOUR DEVICE \n
\n
(OR CLICK TO CONTINUE) \n
\n \n );\n };\n\n logoUpdated = () => {\n this.props.logoUpdated();\n };\n\n favIconUpdated = () => {\n this.props.favIconUpdated();\n };\n\n render() {\n const pageAssignments = this.props.pageAssignments;\n\n return (\n \n {this.renderRotateNotification()}\n \n \n \n {pageAssignments && pageAssignments.find((it) => it.pageName == \"Manage Users\" && it.operations.find((it) => it.operation == \"Open\" && it.allow == true)) && \n \n
\n \n \n \n \n
\n \n \n \n \n \n Skills Profile Key\n \n \n Not Selected\n \n \n Required\n \n \n Desirable\n \n \n \n \n \n
\n \n \n
\n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n error: state.auth.error,\n contentTranslations: state.content.contentTranslations,\n pageAssignments: state.adminPerson.pageAssignments,\n language: state.language.language,\n containerConfig: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(AdminHome);\n","import { dismisAlert, generateAlert } from \"../../../src/utils/alertUtils\";\nimport * as authActions from \"../../store/actions/authAction\";\nimport * as configActions from \"../../store/actions/configAction\";\nimport * as contentActions from \"../../store/actions/contentAction\";\nimport * as personActions from \"../../store/actions/personAction\";\nimport * as skillProfileActions from \"../../store/actions/skillProfileAction\";\nimport changeInput from \"../../utils/changeInput\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport { ContentWrapperLg } from \"../common/ContentWrapperLg\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport Select from \"react-select\";\nimport { Button, Col, Container, Form, FormGroup, Input, Label, Modal, ModalBody, ModalHeader, Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\nconst headerStyle = {\n color: \"#2B2B2B\",\n fontSize: \"22px\",\n fontFamily: \"IBMPlexSans-Bold\",\n};\n\nconst subHeaderStyle = {\n fontFamily: \"IBMPlexSans-Light\",\n fontSize: \"14px\",\n};\n\nclass MySetting extends React.Component {\n static displayName = MySetting.name;\n\n constructor(props) {\n super(props);\n this.connection = null;\n this.state = {\n loading: false,\n contentLoading: true,\n updateProfile: false,\n alerts: [],\n notificationEnabledOptions: [\n {\n value: true,\n label: \"Yes\",\n },\n {\n value: false,\n label: \"No\",\n },\n ],\n form: {\n firstName: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n lastName: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n preferredName: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n position: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n allowNotifications: {\n validation: {\n required: false,\n },\n value: false,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n activityStatementInterval: {\n validation: {\n required: false,\n },\n value: 30,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n isFormValid: false,\n forgetMeProgress: false,\n downloadPersonalDataProgress: false,\n downloadPersonProfileProgress: false,\n activityStatementIntervalOptions: [\n {\n value: 14,\n label: 14,\n },\n {\n value: 30,\n label: 30,\n },\n {\n value: 60,\n label: 60,\n },\n {\n value: 90,\n label: 90,\n },\n {\n value: 365,\n label: 365,\n },\n ],\n updateActivityStatementInterval: false,\n };\n\n this.initData = this.initData.bind(this);\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.handleChange = this.handleChange.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n this.setState({ loading: true });\n\n if (this.props.language) {\n this.props.onContent.getContentTranslations(this.props.language.id, \"SfiaAll-Menu-SfiaProfileMenu-SfiaProfile-Lors-Skills\").then(() => {\n this.setState({ contentLoading: this.props.contentLoading });\n\n this.props.onAuth.authCheckState().then(() => {\n this.setState({ loading: false });\n this.initData();\n });\n });\n } else {\n this.props.onAuth.authCheckState().then(() => {\n this.setState({ loading: false });\n this.initData();\n });\n }\n }\n\n initData() {\n if (!this.props.currAssessment) {\n this.props.onConfig.getCurrAssessment().then(() => {});\n }\n\n this.setState({ loading: true });\n const { form } = this.state;\n\n this.props.onPerson.getPersonMyProfile().then(() => {\n if (!this.props.loading && this.props.person) {\n const person = this.props.person;\n\n form.firstName.value = person.firstName;\n form.firstName.valid = true;\n form.firstName.isValidFormat = true;\n\n form.lastName.value = person.lastName;\n form.lastName.valid = true;\n form.lastName.isValidFormat = true;\n\n form.preferredName.value = person.salutation;\n form.preferredName.valid = true;\n form.preferredName.isValidFormat = true;\n\n form.allowNotifications.value = person.allowNotifications;\n form.allowNotifications.valid = true;\n form.allowNotifications.isValidFormat = true;\n\n form.position.value = person.position;\n form.position.valid = true;\n form.position.isValidFormat = true;\n\n if (person.activityStatementInterval) {\n form.activityStatementInterval.value = person.activityStatementInterval;\n }\n\n this.setState({ form, isFormValid: true });\n }\n this.setState({ loading: this.props.loading });\n });\n }\n\n handleChange = (event) => {\n const { name, value } = event.target;\n\n const updateState = changeInput(this.state.form, name, value);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n handleAllowNotificationChange = (value) => {\n const { form } = this.state;\n form.allowNotifications.value = value;\n\n this.setState({\n form,\n });\n };\n\n handleActivityStatementIntervalChange = (value) => {\n console.log(\"value\", value);\n const { form } = this.state;\n form.activityStatementInterval.value = value;\n\n this.setState({\n form,\n });\n };\n\n handleSubmitUpdate = () => {\n const { form } = this.state;\n\n const person = {\n firstName: this.state.form.firstName.value,\n lastName: this.state.form.lastName.value,\n salutation: this.state.form.preferredName.value,\n allowNotifications: this.state.form.allowNotifications.value,\n position: this.state.form.position.value,\n accountId: null,\n };\n\n this.setState({ updateProfile: true, showLoadingPanel: true, loadingPanelHeader: \"Update profile\", loadingPanelBody: \"Please wait...\" });\n\n this.props.onPerson.updatePersonMyProfile(person).then(() => {\n if (!this.props.updating) {\n if (this.props.error) {\n this.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.generateAlert(\"success\", \"Profile updated\");\n }\n }\n this.setState({ updateProfile: this.props.updating, showLoadingPanel: this.props.updating });\n });\n };\n\n handleSubmitUpdateActivityStatementInterval = () => {\n const { form } = this.state;\n\n this.setState({ updateProfile: true, showLoadingPanel: true, loadingPanelHeader: \"Update activity statement interval\", loadingPanelBody: \"Please wait...\" });\n\n this.props.onPerson.updatePersonActivityStatementInterval(form.activityStatementInterval.value).then(() => {\n if (!this.props.updating) {\n if (this.props.error) {\n this.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.generateAlert(\"success\", \"Activity statement interval updated\");\n }\n }\n this.setState({ updateProfile: this.props.updating, showLoadingPanel: this.props.updating });\n });\n };\n\n handleForgetMe = () => {\n if (window.confirm(this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SettingsGDPRConfirmation\", \"This action will completely ERASE your identity within the system. It CANNOT be recovered once erased. Are you SURE?\"))) {\n this.setState({ forgetMeProgress: true, showLoadingPanel: true, loadingPanelHeader: \"Forget Me\", loadingPanelBody: \"Please wait...\" });\n\n this.props.onPerson.forgetMe().then(() => {\n if (!this.props.updating) {\n if (this.props.error) {\n this.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.props.onAuth.authLogoutIntended().then(() => {\n this.props.history.push(\"/\");\n });\n }\n }\n });\n }\n };\n\n handleDownloadPersonalData = () => {\n this.setState({ downloadPersonalDataProgress: true, showLoadingPanel: true, loadingPanelHeader: \"Download Personal Data\", loadingPanelBody: \"Please wait...\" });\n\n this.props.onSkillProfile.generatePersonalDataExcel().then(() => {\n if (!this.props.loadingPrint && !this.props.skillProfileError) {\n if (this.props.printData) {\n let firstName = localStorage.getItem(\"firstName\");\n let lastName = localStorage.getItem(\"lastName\");\n\n FileDownload(this.props.printData, firstName && lastName ? `${firstName}${lastName}.xlsx` : \"PersonalData.xlsx\");\n }\n }\n\n this.setState({ downloadPersonalDataProgress: this.props.loadingPrint, showLoadingPanel: this.props.loadingPrint });\n });\n };\n\n renderLoadingPanel() {\n if (this.state.showLoadingPanel) {\n return (\n \n {this.state.loadingPanelHeader} \n \n \n \n );\n } else {\n return \"\";\n }\n }\n\n render() {\n const { form } = this.state;\n\n return (\n \n \n \n
\n \n
\n \n \n {this.props.currAssessment && this.props.currAssessment.allowUsersToBeForgotten ? (\n \n \n
\n \n NOT reversible and any existing data relating to you will not be retrievable.`}\n />\n
\n \n \n \n
\n \n
\n \n \n \n
\n \n ) : (\n \n \n
\n \n \n \n
\n \n )}\n {this.props.hasPeoples && (\n \n \n
\n \n
\n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.person.loading,\n error: state.person.error,\n updating: state.person.updating,\n person: state.person.person,\n\n loadingExport: state.person.loadingExport,\n exportData: state.person.exportData,\n\n hasPeoples: state.auth.hasPeoples,\n isEndorser: state.auth.isEndorser,\n\n loadingPrint: state.skillProfile.loadingPrint,\n printData: state.skillProfile.printData,\n\n language: state.language.language,\n contentTranslations: state.content.contentTranslations,\n contentLoading: state.content.loading,\n contentError: state.content.error,\n\n currAssessment: state.config.currAssessment,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onSkillProfile: bindActionCreators(skillProfileActions, dispatch),\n onPerson: bindActionCreators(personActions, dispatch),\n onContent: bindActionCreators(contentActions, dispatch),\n onConfig: bindActionCreators(configActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(MySetting);\n","import React from \"react\";\nimport { Redirect, Route } from \"react-router-dom\";\n\nconst LoggedInRoute = ({ component: Component, isAuthenticated, authMode, connectSignalR, language, setCurrentLanguage, boolLoginFail, boolLoginMembee, containerConfig, redirectUrl, isLogout, ...rest }) => (\n {\n let authModes = authMode.split(\",\").map((item) => item.trim().toLowerCase());\n\n if (!isAuthenticated) {\n if (props.location.pathname == \"/\") {\n if (containerConfig && containerConfig.allowSelfRegistration && !redirectUrl) {\n return \n \n HOW
\n \n \n );\n }\n}\n\nexport default How;","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Col, Container, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\n\nclass StepProfile extends Component {\n static displayName = StepProfile.name;\n\n constructor(props) {\n super(props);\n this.state = {\n name: this.props.name,\n stepData: this.props.stepData,\n currentStep: null,\n };\n }\n\n step1Clicked = () => {\n const currentStep = 1;\n this.setState({ currentStep });\n this.props.step1Clicked();\n };\n\n step2Clicked = () => {\n const currentStep = 2;\n this.setState({ currentStep });\n this.props.step2Clicked();\n };\n\n step3Clicked = () => {\n const currentStep = 3;\n this.setState({ currentStep });\n this.props.step3Clicked();\n };\n\n render() {\n const { stepData, currentStep } = this.state;\n\n const stepPanelBackgroundColor = this.props.containerConfig && this.props.containerConfig.stepPanelBackgroundColor ? this.props.containerConfig.stepPanelBackgroundColor : \"#2D2D2D\";\n const stepPanelFontColor = this.props.containerConfig && this.props.containerConfig.stepPanelFontColor ? this.props.containerConfig.stepPanelFontColor : \"#FFFFFF\";\n\n return !this.props.containerConfig ? (\n \n
\n ) : (\n \n \n \n \n = 1 ? \" stepCircleDark-active\" : \"\")} style={{ cursor: \"pointer\", border: `1px solid ${stepPanelFontColor}` }} onClick={this.step1Clicked}>\n
\n 1\n
\n
\n
\n \n \n \n \n = 2 ? \" stepCircleDark-active\" : \"\")} style={{ cursor: \"pointer\", border: `1px solid ${stepPanelFontColor}` }} onClick={this.step2Clicked}>\n
\n 2\n
\n
\n
\n \n \n \n \n = 3 ? \" stepCircleDark-active\" : \"\")} style={{ cursor: \"pointer\", border: `1px solid ${stepPanelFontColor}` }} onClick={this.step3Clicked}>\n
\n 3\n
\n
\n
\n \n \n
\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n containerConfig: state.config.containerConfig,\n loading: state.config.loading,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {};\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(StepProfile);\n","import { Table, Typography, Empty, Checkbox } from \"antd\";\nimport React, { useState, useEffect, useMemo } from \"react\";\nimport styled from \"styled-components\";\nimport { useImmer } from \"use-immer\";\n\nconst constantData = {\n titleLevel: 5,\n pageSize: 10,\n};\n\nconst DivCenter = ({ Component, title }) => {\n return (\n \n \n
{title} \n \n {title}\n \n);\n\nconst createCenteredCheckboxColumnHeader = (func, stateCheckbox) => (\n <>\n func(e, true, undefined)}\n />\n \n);\n\n// Helper function to generate a table column that centers its text content.\n// This avoids repetition for multiple columns that require similar formatting.\nconst createCenteredTextColumn = (title, dataIndex, sorterFunction) => ({\n title: createCenteredTextColumnHeader(title), // Column header\n dataIndex, // Data key\n key: dataIndex, // Key for React's list rendering\n sorter: (a, b) => sorterFunction(a[dataIndex], b[dataIndex]), // Sorting function for the column\n render: (text) => (\n {text ?? \"-\"} \n ), // Centering the text\n});\n\nconst createCenteredCheckboxColumn = (\n dataIndex,\n func,\n stateCheckbox,\n selectable\n) => {\n const onRender = (text, record) => {\n const findCheck = stateCheckbox.list.find(\n (item) => item.key === record.key\n );\n\n return (\n \n func(e, false, record)}\n />\n \n );\n };\n return {\n title: selectable\n ? createCenteredCheckboxColumnHeader(func, stateCheckbox)\n : null, // Column header\n dataIndex, // Data key\n key: dataIndex, // Key for React's list rendering\n render: (text, record) => onRender(text, record),\n };\n};\n\n// Utility function to compare text values\nconst sortByText = (a, b) => (a ?? \"\").localeCompare(b ?? \"\");\n\n// Utility function to transform data source for tables\n// This maps over the data and transforms it to have keys and all the item properties.\nconst transformDataSource = (data) =>\n data.map((item, index) => ({\n key: `${index + 1}`,\n ...item,\n }));\n\n// Utility function to generate column definitions based on type and need status\n// This will return the appropriate columns based on whether it's a professional or generic skill and if it's a needed skill.\nconst getColumnDefinitions = (nameHeader, func, stateCheckbox, selectable) => {\n const tempColum = [\n createCenteredCheckboxColumn(\"select\", func, stateCheckbox, selectable),\n createCenteredTextColumn(nameHeader, \"name\", sortByText),\n ];\n return tempColum;\n};\n\nconst MentorTable = (props) => {\n const {\n refData = [],\n values = [],\n pageSize = constantData.pageSize,\n nameHeader = \"\",\n nameSelect = \"\",\n selectable = false,\n onChange = undefined,\n } = props;\n\n const [stateCheckbox, setStateCheckbox] = useImmer({\n indeterminate: false,\n isChecked: false,\n list: [],\n });\n /**\n * Handles change events from a checkbox input, updating the component state accordingly.\n *\n * @param {Object} e - the event object.\n * @param {boolean} isHeader - flag indicating whether the checkbox is a header checkbox.\n * @param {Object} record - an object representing additional data, used here to match against list items.\n */\n const onCheckboxChanged = (e, isHeader, record) => {\n // Create a deep copy of the 'stage' object to ensure immutability.\n // Direct mutation of the state is avoided to ensure reliable UI updates.\n const newStage = JSON.parse(JSON.stringify(stateCheckbox));\n\n if (isHeader) {\n // If the changed checkbox is the header checkbox, we'll update all list items' 'isChecked' property\n // and set the header's 'isChecked' property to match the new state.\n newStage.list.forEach((item) => {\n item.isChecked = e.target.checked;\n });\n newStage.isChecked = e.target.checked;\n // 'indeterminate' is set to false because the header checkbox has explicit true/false state.\n newStage.indeterminate = false;\n } else {\n // If the changed checkbox is not the header, we find the matching item in the list by key\n // and update its 'isChecked' property.\n const find = newStage.list.find((item) => item.key === record.key);\n if (find) {\n find.isChecked = e.target.checked;\n }\n\n // Check the checkbox state of all list items to determine the collective checkbox state.\n const allChecked = newStage.list.every((item) => item.isChecked);\n const noneChecked = newStage.list.every((item) => !item.isChecked);\n\n // Update the 'isChecked' property of the header checkbox based on whether all list items are checked.\n newStage.isChecked = allChecked;\n // The 'indeterminate' property is true when not all and not none of the list items are checked,\n // otherwise, it's false.\n newStage.indeterminate = !allChecked && !noneChecked;\n }\n setStateCheckbox((draft) => {\n // Update the original state with the modified values from the new state.\n draft.list = newStage.list;\n draft.isChecked = newStage.isChecked;\n draft.indeterminate = newStage.indeterminate;\n });\n\n if (onChange != undefined) {\n onChange(newStage.list);\n }\n };\n\n // useMemo will recompute the memoized value (`tableData`) only when one of the dependencies\n // in the dependency array changes. This optimization helps avoid expensive calculations on\n // every render when the relevant data hasn't changed.\n\n const tableData = useMemo(() => {\n // Early return when content is not loaded; avoids processing empty or undefined data.\n if (!refData?.length) return { dataSource: [], columns: [] };\n\n // Call `transformDataSource` to process the raw data into the desired structure/format\n // for use by the table. This might include converting dates to a specific format,\n // reshaping objects, adding additional fields, etc.\n const dataSource = transformDataSource(refData);\n\n // Retrieve column definitions, which could depend on various factors such as user role,\n // specific permissions, feature flags, etc. This function is also responsible for\n // integrating interactive elements like checkboxes into the columns, setting up the\n // appropriate handlers, and defining how they interact with the component's state.\n const columns = getColumnDefinitions(\n nameHeader, // The name to display in the header column\n onCheckboxChanged, // Handler function for checkbox state changes\n stateCheckbox, // Current state of the checkboxes\n selectable // Current state of the selectable\n );\n\n // The useMemo hook returns an object containing the processed `dataSource` and `columns`,\n // ready for consumption by a table component (e.g., in a setup).\n return { dataSource, columns };\n\n // Dependency array: the memoized value will only recompute if `data`, `stateCheckbox`, or\n // are computationally expensive or if the data volume is large.\n }, [refData, stateCheckbox]);\n\n // This useEffect is responsible for handling the side-effect when the content is not yet loaded.\n // It updates the state by marking the content as loaded and sets the initial expanded subcategories.\n useEffect(() => {\n // Generate an array of expanded subcategories from the data\n const tempList = transformDataSource(refData).map((item) => ({\n ...item,\n isChecked: item[nameSelect],\n }));\n\n // Check the checkbox state of all list items to determine the collective checkbox state.\n const allChecked = tempList.every((item) => item.isChecked);\n const noneChecked = tempList.every((item) => !item.isChecked);\n\n // Update the 'isChecked' property of the header checkbox based on whether all list items are checked.\n const tempIsChecked = allChecked;\n // The 'indeterminate' property is true when not all and not none of the list items are checked,\n // otherwise, it's false.\n const tempIndeterminate = !allChecked && !noneChecked;\n\n // Update the listExpand state by appending the new expanded subcategories.\n // We use a functional update to safely access and update the previous state.\n setStateCheckbox((draft) => {\n // Update the original state with the modified values from the new state.\n if (values.length > 0) {\n draft.list = values;\n } else {\n draft.list = tempList;\n }\n draft.isChecked = tempIsChecked;\n draft.indeterminate = tempIndeterminate;\n });\n }, [refData]); // The effect depends on the data and the refData flag.\n\n // Create a copy of the listExpand array\n\n return (\n \n {refData.length > 0 ? (\n // Render the professional table\n \n \n ) : (\n \n );\n};\n\nexport default MentorTable;\n","import { ExclamationCircleOutlined } from \"@ant-design/icons\";\nimport { Button, Row, Col } from \"antd\";\nimport React, { useCallback, useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\n\nconst ContainerConfirm = styled.div`\n padding: 5px;\n width: max-content;\n .btn-success {\n border-color: mediumseagreen;\n background: mediumseagreen;\n }\n\n .justify-content-right {\n justify-content: right;\n }\n`;\n\n// Wrapping the component with React.memo to prevent unnecessary re-renders.\n// This is useful when the parent component renders often but props for ConfirmModal don't change.\nconst ConfirmModal = ({\n open,\n onOk,\n onCancel,\n msg,\n okText,\n cancelText,\n titleText = null,\n isCancel = true,\n titleNode = null,\n questionText = null,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n\n // Using useCallback to memoize the handler functions.\n // This ensures that the same function reference is used across re-renders\n // unless the dependencies (onOk, onCancel) change.\n const handleOk = useCallback(\n (e) => {\n onOk?.(e); // Optional chaining ensures that onOk is called only if it's provided.\n // Removed setIsOpen as we are now directly using the 'open' prop for controlling visibility.\n setIsOpen(false);\n },\n [onOk] // Dependency array for useCallback.\n );\n\n const handleCancel = useCallback(\n (e) => {\n onCancel?.(e); // Similar to handleOk, using optional chaining for onCancel.\n // Removed setIsOpen for the same reason as above.\n setIsOpen(false);\n },\n [onCancel] // Dependency array for useCallback.\n );\n\n const TitleRender = () => titleNode;\n\n useEffect(() => {\n setIsOpen(open);\n }, [open]);\n\n // Return null to render nothing if the modal is not open.\n // This is an early return pattern, a common optimization in React for conditional rendering\n if (!isOpen) return null;\n\n return (\n // ContainerConfirm is a wrapper component, likely styled, for the modal content.\n \n {/* Row is a layout component, probably from a UI library, for arranging items in a row.\n The 'gutter' prop likely adds spacing between the columns in the row. */}\n \n {/* Col is a layout component for a column within a row. */}\n \n {titleText}\n
\n )}\n {titleNode && {msg} }\n\n {/* The second span is bold, emphasizing the action's consequence or confirmation. */}\n {questionText ?? \"Do you want to proceed ?\"} \n \n
\n {/* Another Row for action buttons, with increased gutter spacing and additional styling for centering and top margin. */}\n \n {/* Button component for the 'OK' action, styled as a primary and success button, with a right margin.\n 'handleOk' is a function that will be called when this button is clicked. */}\n \n {okText ?? \"Ok\"}\n \n {isCancel && (\n <>\n {/* Another Button for the 'Cancel' action, styled as a primary and danger button.\n 'handleCancel' is a function that will be called when this button is clicked. */}\n \n {cancelText ?? \"Cancel\"}\n \n \n )}\n \n \n );\n};\n\nexport default ConfirmModal;\n","import PersonService from \"../../../../../common/api/service/PersonService\";\nimport MentorTable from \"../../table/mentor\";\nimport ConfirmModal from \"../confirm\";\nimport { SaveOutlined } from \"@ant-design/icons\";\nimport { Button, Modal, Spin, notification, Row, Col, Alert } from \"antd\";\nimport React, { useEffect, useCallback, useMemo } from \"react\";\nimport styled from \"styled-components\";\nimport { useImmer } from \"use-immer\";\n\nconst ContainerCenter = styled.div`\n text-align: -webkit-center;\n`;\n\nconst MentorPreferencesModal = ({\n data,\n showDialog,\n updatePersonMentorPreference, contentTranslations, contentTranslator,\n}) => {\n const [state, setState] = useImmer({\n showDialog: false,\n dataValue: [],\n isShowConfirm: false,\n isLoading: false,\n rawData: [],\n isEdit: false,\n contentTranslations: contentTranslations\n });\n\n const setDefaultData = () => {\n setState((draft) => {\n draft.showDialog = true;\n draft.dataValue = [];\n draft.isShowConfirm = false;\n draft.isEdit = false;\n draft.isLoading = true;\n draft.rawData = [];\n });\n };\n\n const onToggleDialogModal = () => {\n const showDialog = state.showDialog;\n setState((draft) => {\n draft.showDialog = !showDialog;\n draft.isLoading = false;\n });\n };\n\n const onSaveClicked = useCallback((e) => {\n setState((draft) => {\n draft.isShowConfirm = true;\n });\n });\n\n const onOkClicked = useCallback(async (e) => {\n setState((draft) => {\n draft.isLoading = true;\n draft.isShowConfirm = false;\n });\n try {\n const listUpdate = state.dataValue.map((item) => {\n return {\n id: item.id,\n mentorPreferenceId: item.mentorPreferenceId,\n selected: item.isChecked ?? false,\n };\n });\n await PersonService.updatePersonMyMentorPreferences(listUpdate);\n updatePersonMentorPreference();\n setDefaultData();\n onToggleDialogModal();\n notification[\"success\"]({\n message: contentTranslator(contentTranslations, \"SfiaPlan\", \"SfiaPlanMentorPreferencesSuccessTitle\", \"Success\"),\n description: contentTranslator(contentTranslations, \"SfiaPlan\", \"SfiaPlanMentorPreferencesSuccessDescription\", \"Mentor preferences is updated\"),\n });\n } catch (error) {\n // Optionally, you can set an error state to display an error message to users.\n setState((draft) => {\n draft.isLoading = false;\n });\n notification[\"error\"]({\n message: \"error\",\n description: error?.errData?.title,\n });\n }\n });\n\n const onCancelClicked = useCallback((e) => {\n setState((draft) => {\n draft.isShowConfirm = false;\n });\n });\n\n const onValueChanged = useCallback((val) => {\n setState((draft) => {\n if (!draft.isEdit) {\n draft.isEdit = true;\n }\n draft.dataValue = val ?? [];\n });\n });\n\n const isValid = useMemo(\n () =>\n state.isEdit\n ? !state.dataValue.some((item) => item.isChecked === true)\n : !state.rawData.some((item) => item.selected === true),\n [state.dataValue, state.rawData]\n );\n\n useEffect(() => {\n if (showDialog) {\n setDefaultData();\n setState((draft) => {\n draft.rawData = data.map((item) => {\n return {\n id: item.id,\n selected: item.selected,\n mentorPreferenceId: item.mentorPreferenceId,\n name: item.preference,\n };\n });\n draft.isLoading = false;\n });\n }\n }, [showDialog]);\n\n if (state.showDialog === false) return null;\n\n // ... rest of the logic and JSX\n return (\n {\n setDefaultData();\n onToggleDialogModal();\n }\n : null\n }\n width={state.isShowConfirm ? \"fit-content\" : \"60%\"}\n style={{ borderRadius: \"20px\" }}\n footer={null}\n >\n \n {state.isShowConfirm == false &&\n state.isLoading == false &&\n state.rawData.length > 0 && (\n \n \n {contentTranslator(contentTranslations, \"SfiaPlan\", \"SfiaPlanMentorPreferencesConfirmButtonSave\", \"Save\")}\n \n \n
\n )}\n \n \n \n\n {state.isShowConfirm == false && (\n \n \n
{title} \n \n {title}\n \n);\n\nconst createCenteredCheckboxColumnHeader = (func, stateCheckbox) => (\n <>\n func(e, true, undefined)}\n />\n \n);\n\n// Helper function to generate a table column that centers its text content.\n// This avoids repetition for multiple columns that require similar formatting.\nconst createCenteredArrayColumn = (title, dataIndex, sorterFunction) => ({\n title: createCenteredTextColumnHeader(title), // Column header\n dataIndex, // Data key\n key: dataIndex, // Key for React's list rendering\n sorter: (a, b) => sorterFunction(a[dataIndex], b[dataIndex]), // Sorting function for the column\n render: (text) => (\n \n {text?.join(\", \") ?? \"-\"}\n \n ), // Centering the text\n});\n\n// Helper function to generate a table column that centers its text content.\n// This avoids repetition for multiple columns that require similar formatting.\nconst createCenteredArrayTagColumn = (title, dataIndex, sorterFunction) => ({\n title: createCenteredTextColumnHeader(title), // Column header\n dataIndex, // Data key\n key: dataIndex, // Key for React's list rendering\n sorter: (a, b) => sorterFunction(a[dataIndex], b[dataIndex]), // Sorting function for the column\n render: (text) => (\n \n {text?.length > 0\n ? text.map((item, index) => (\n \n {item}\n \n ))\n : \"-\"}\n \n ), // Centering the text\n});\n\nconst createCenteredNumberColumn = (\n title,\n dataIndex,\n sorterFunction,\n isResponsive = false,\n isCenter = true\n) => {\n const getColor = (val) =>\n constantData.rangeColors.find((item) => item.isMatch(val))?.color;\n\n return {\n title: createCenteredTextColumnHeader(title), // Column header\n dataIndex, // Data key\n key: dataIndex, // Key for React's list rendering\n sorter: (a, b) => sorterFunction(a[dataIndex], b[dataIndex]), // Sorting function for the column\n render: (text) => (\n \n {text !== undefined && text !== null ? (\n {text}% \n ) : (\n \"-\"\n )}\n \n ), // Centering the text\n };\n};\n\n// Helper function to generate a table column that centers its text content.\n// This avoids repetition for multiple columns that require similar formatting.\nconst createCenteredTextColumn = (title, dataIndex, sorterFunction) => ({\n title: createCenteredTextColumnHeader(title), // Column header\n dataIndex, // Data key\n key: dataIndex, // Key for React's list rendering\n sorter: (a, b) => sorterFunction(a[dataIndex], b[dataIndex]), // Sorting function for the column\n render: (text) => (\n {text ?? \"-\"} \n ), // Centering the text\n});\n\nconst createCenteredCheckboxColumn = (\n dataIndex,\n func,\n stateCheckbox,\n selectable\n) => {\n const onRender = (text, record) => {\n const findCheck = stateCheckbox.list.find(\n (item) => item.key === record.key\n );\n\n return (\n \n func(e, false, record)}\n />\n \n );\n };\n return {\n title: selectable\n ? createCenteredCheckboxColumnHeader(func, stateCheckbox)\n : null, // Column header\n dataIndex, // Data key\n key: dataIndex, // Key for React's list rendering\n render: (text, record) => onRender(text, record),\n };\n};\n\n// Utility function to compare text values array\nconst sortByTextArray = (a, b) => {\n // Determine the minimum length between the two current arrays\n const minLength = Math.min(a.length, b.length);\n\n // Iterate over the elements up to the minimum length\n for (let i = 0; i < minLength; i++) {\n // Only proceed to string conversion and comparison if elements are different\n // This saves performance by avoiding unnecessary operations\n if (a[i] !== b[i]) {\n // Convert current elements to strings and make them lowercase\n // for case-insensitive comparison\n const elemA = a[i].toString().toLowerCase();\n const elemB = b[i].toString().toLowerCase();\n\n // Compare the elements and determine their order\n if (elemA < elemB) return -1; // b comes before a\n if (elemA > elemB) return 1; // b comes after a\n }\n }\n\n // If all compared elements are equal, then compare array lengths\n // The shorter array comes first\n return a.length - b.length;\n};\n\n// Utility function to compare text values\nconst sortByText = (a, b) => (a ?? \"\").localeCompare(b ?? \"\");\n\n// Utility function to compare number values\nconst sortByNumber = (a, b) => (a < b ? -1 : a > b ? 1 : 0);\n\n// Utility function to transform data source for tables\n// This maps over the data and transforms it to have keys and all the item properties.\nconst transformDataSource = (data) =>\n data.map((item, index) => ({\n key: `${index + 1}`,\n ...item,\n }));\n\n// Utility function to generate column definitions based on type and need status\n// This will return the appropriate columns based on whether it's a professional or generic skill and if it's a needed skill.\nconst getColumnDefinitions = (func, stateCheckbox, selectable, contentTranslations, contentTranslator) => {\n const tempColum = [\n createCenteredCheckboxColumn(\"select\", func, stateCheckbox, selectable),\n createCenteredTextColumn(contentTranslator(contentTranslations, \"SfiaPlan\", \"SfiaPlanFindMentorTableName\", \"Name\"), \"name\", sortByText),\n createCenteredTextColumn(contentTranslator(contentTranslations, \"SfiaPlan\", \"SfiaPlanFindMentorTableEmail\", \"Email\"), \"email\", sortByText),\n // createCenteredTextColumn(\"Relationship\", \"currentRelationship\", sortByText),\n createCenteredNumberColumn(contentTranslator(contentTranslations, \"SfiaPlan\", \"SfiaPlanFindMentorTableMatch\", \"Match %\"), \"matchedSkillPercent\", sortByNumber),\n createCenteredArrayTagColumn(contentTranslator(contentTranslations, \"SfiaPlan\", \"SfiaPlanFindMentorTableSkills\", \"Skills\"), \"skills\", sortByTextArray),\n createCenteredArrayColumn(contentTranslator(contentTranslations, \"SfiaPlan\", \"SfiaPlanFindMentorTablePreferences\", \"Preferences\"), \"preferences\", sortByTextArray),\n ];\n return tempColum;\n};\n\nconst PossibleMentorTable = (props) => {\n const {\n refData = [],\n values = [],\n pageSize = constantData.pageSize,\n nameSelect = \"\",\n selectable = false,\n onChange = undefined,\n contentTranslations,\n contentTranslator\n } = props;\n\n const [stateCheckbox, setStateCheckbox] = useImmer({\n indeterminate: false,\n isChecked: false,\n list: [],\n });\n /**\n * Handles change events from a checkbox input, updating the component state accordingly.\n *\n * @param {Object} e - the event object.\n * @param {boolean} isHeader - flag indicating whether the checkbox is a header checkbox.\n * @param {Object} record - an object representing additional data, used here to match against list items.\n */\n const onCheckboxChanged = (e, isHeader, record) => {\n // Create a deep copy of the 'stage' object to ensure immutability.\n // Direct mutation of the state is avoided to ensure reliable UI updates.\n const newStage = JSON.parse(JSON.stringify(stateCheckbox));\n\n if (isHeader) {\n // If the changed checkbox is the header checkbox, we'll update all list items' 'isChecked' property\n // and set the header's 'isChecked' property to match the new state.\n newStage.list.forEach((item) => {\n item.isChecked = e.target.checked;\n });\n newStage.isChecked = e.target.checked;\n // 'indeterminate' is set to false because the header checkbox has explicit true/false state.\n newStage.indeterminate = false;\n } else {\n // If the changed checkbox is not the header, we find the matching item in the list by key\n // and update its 'isChecked' property.\n const find = newStage.list.find((item) => item.key === record.key);\n if (find) {\n find.isChecked = e.target.checked;\n }\n\n // Check the checkbox state of all list items to determine the collective checkbox state.\n const allChecked = newStage.list.every((item) => item.isChecked);\n const noneChecked = newStage.list.every((item) => !item.isChecked);\n\n // Update the 'isChecked' property of the header checkbox based on whether all list items are checked.\n newStage.isChecked = allChecked;\n // The 'indeterminate' property is true when not all and not none of the list items are checked,\n // otherwise, it's false.\n newStage.indeterminate = !allChecked && !noneChecked;\n }\n setStateCheckbox((draft) => {\n // Update the original state with the modified values from the new state.\n draft.list = newStage.list;\n draft.isChecked = newStage.isChecked;\n draft.indeterminate = newStage.indeterminate;\n });\n\n if (onChange != undefined) {\n onChange(newStage.list);\n }\n };\n\n // useMemo will recompute the memoized value (`tableData`) only when one of the dependencies\n // in the dependency array changes. This optimization helps avoid expensive calculations on\n // every render when the relevant data hasn't changed.\n\n const tableData = useMemo(() => {\n // Early return when content is not loaded; avoids processing empty or undefined data.\n if (!refData?.length) return { dataSource: [], columns: [] };\n\n // Call `transformDataSource` to process the raw data into the desired structure/format\n // for use by the table. This might include converting dates to a specific format,\n // reshaping objects, adding additional fields, etc.\n const dataSource = transformDataSource(refData);\n\n // Retrieve column definitions, which could depend on various factors such as user role,\n // specific permissions, feature flags, etc. This function is also responsible for\n // integrating interactive elements like checkboxes into the columns, setting up the\n // appropriate handlers, and defining how they interact with the component's state.\n const columns = getColumnDefinitions(\n onCheckboxChanged, // Handler function for checkbox state changes\n stateCheckbox, // Current state of the checkboxes\n selectable, // Current state of the selectable\n contentTranslations,\n contentTranslator\n );\n\n // The useMemo hook returns an object containing the processed `dataSource` and `columns`,\n // ready for consumption by a table component (e.g., in a setup).\n return { dataSource, columns };\n\n // Dependency array: the memoized value will only recompute if `data`, `stateCheckbox`, or\n // are computationally expensive or if the data volume is large.\n }, [refData, stateCheckbox]);\n\n // This useEffect is responsible for handling the side-effect when the content is not yet loaded.\n // It updates the state by marking the content as loaded and sets the initial expanded subcategories.\n useEffect(() => {\n // Generate an array of expanded subcategories from the data\n const tempList = transformDataSource(refData).map((item) => ({\n ...item,\n isChecked: item[nameSelect],\n }));\n\n // Check the checkbox state of all list items to determine the collective checkbox state.\n const allChecked = tempList.every((item) => item.isChecked);\n const noneChecked = tempList.every((item) => !item.isChecked);\n\n // Update the 'isChecked' property of the header checkbox based on whether all list items are checked.\n const tempIsChecked = allChecked;\n // The 'indeterminate' property is true when not all and not none of the list items are checked,\n // otherwise, it's false.\n const tempIndeterminate = !allChecked && !noneChecked;\n\n // Update the listExpand state by appending the new expanded subcategories.\n // We use a functional update to safely access and update the previous state.\n setStateCheckbox((draft) => {\n // Update the original state with the modified values from the new state.\n if (values.length > 0) {\n draft.list = values;\n } else {\n draft.list = tempList;\n }\n draft.isChecked = tempIsChecked;\n draft.indeterminate = tempIndeterminate;\n });\n }, [refData]); // The effect depends on the data and the refData flag.\n\n // Create a copy of the listExpand array\n\n return (\n // Container for the entire table component\n \n {refData.length > 0 ? (\n // Conditionally render the table or a 'No Data' message based on the length of the 'data' array\n // If 'data' has elements, render the table and associated components\n \n {/* Wrapper for styling and layout of the table */}\n
\n \n {constantData.rangeColors.map((item, index) => {\n return (\n \n {contentTranslator(contentTranslations, \"SfiaPlan\", \"SfiaPlanFindMentorRange\", \"Range\")}: \n \n {item.label}\n \n
\n );\n })}\n
\n )}\n \n
\n );\n};\n\nexport default PossibleMentorTable;\n","import PersonService from \"../../../../../common/api/service/PersonService\";\nimport PossibleMentorTable from \"../../table/possiblementor\";\nimport ConfirmModal from \"../confirm\";\nimport { ApiOutlined } from \"@ant-design/icons\";\nimport {\n Button,\n Modal,\n Row,\n Spin,\n notification,\n Switch,\n Alert,\n Col,\n Tooltip,\n} from \"antd\";\nimport React, { useEffect, useCallback, useMemo } from \"react\";\nimport styled from \"styled-components\";\nimport { useImmer } from \"use-immer\";\n\nconst ContainerCenter = styled.div`\n text-align: -webkit-center;\n`;\n\nconst PossibleMentorModal = ({ showDialog, profileType, jobType, contentTranslations, contentTranslator }) => {\n const [state, setState] = useImmer({\n showDialog: false,\n dataValue: [],\n rawData: [],\n isShowConfirm: false,\n isLoading: false,\n isIgnore: false,\n profileType,\n jobType,\n contentTranslations: contentTranslations\n });\n\n const setDefaultData = () => {\n setState((draft) => {\n draft.showDialog = true;\n draft.dataValue = [];\n draft.isShowConfirm = false;\n draft.isLoading = true;\n draft.rawData = [];\n draft.isIgnore = false;\n });\n };\n\n const toFixedIfNecessary = (value, dp) => {\n return +parseFloat(value).toFixed(dp);\n };\n\n const processDataAsync = async () => {\n try {\n const dataSearchMentors = await PersonService.getSearchMentors(\n state.isIgnore,\n jobType,\n profileType\n );\n\n dataSearchMentors.map((item) => {\n item.matchedSkillPercent = item.matchedSkillPercent ? toFixedIfNecessary(item.matchedSkillPercent * 100, 2) : item.matchedSkillPercent\n })\n\n setState((draft) => {\n draft.dataValue = [];\n draft.rawData = dataSearchMentors.map((item) => {\n return {\n ...item,\n name: `${item.firstName} ${item.lastName}`,\n };\n });\n });\n } catch (error) {\n // Log the error if fetching fails\n console.error(\"Failed to fetch action plan data:\", error);\n // Optionally, you can set an error state to display an error message to users.\n }\n };\n\n const onToggleDialogModal = () => {\n const showDialog = state.showDialog;\n setState((draft) => {\n draft.showDialog = !showDialog;\n draft.isLoading = false;\n });\n };\n\n const onConnectClicked = useCallback((e) => {\n setState((draft) => {\n draft.isShowConfirm = true;\n });\n });\n\n const onOkClicked = useCallback(async (e) => {\n setState((draft) => {\n draft.isLoading = true;\n draft.isShowConfirm = false;\n });\n try {\n const listUpdate = {\n mentorIds: state.dataValue\n .filter((item) => item.isChecked === true)\n .map((item) => item.personId),\n };\n const results = await PersonService.updateConnectMentors(jobType, profileType, listUpdate);\n if (results.length > 0) {\n await processDataAsync();\n notification[\"success\"]({\n message: contentTranslator(contentTranslations, \"SfiaPlan\", \"SfiaPlanFindMentorConnectSuccessTitle\", \"Success\"),\n description: contentTranslator(contentTranslations, \"SfiaPlan\", \"SfiaPlanFindMentorConnectSuccessDescription\", \"Connect mentor is updated\"),\n });\n } else {\n notification[\"error\"]({\n message: contentTranslator(contentTranslations, \"SfiaPlan\", \"SfiaPlanFindMentorConnectFailTitle\", \"Not connected properly\"),\n description: contentTranslator(contentTranslations, \"SfiaPlan\", \"SfiaPlanFindMentorConnectFailDescription\", \"The mentor connection was not found.\"),\n });\n }\n } catch (error) {\n // Optionally, you can set an error state to display an error message to users.\n notification[\"error\"]({\n message: \"error\",\n description: error?.errData?.title,\n });\n } finally {\n setState((draft) => {\n draft.isLoading = false;\n });\n }\n });\n\n const onCancelClicked = useCallback((e) => {\n setState((draft) => {\n draft.isShowConfirm = false;\n });\n });\n\n const onValueChanged = useCallback((val) => {\n setState((draft) => {\n draft.dataValue = val ?? [];\n });\n });\n\n const onIgnoreChanged = useCallback((val) => {\n setState((draft) => {\n draft.isIgnore = val;\n });\n });\n\n const connectValid = useMemo(() => {\n if (state.dataValue.length > 0) {\n const filter = state.dataValue.filter((item) => item.isChecked === true);\n return {\n isEmpty: filter.length < 1,\n isLimit: filter.length > 3,\n };\n }\n return {\n isEmpty: true,\n isLimit: false,\n };\n }, [state.dataValue]);\n\n useEffect(() => {\n if (showDialog) {\n setState((draft) => {\n draft.isLoading = true;\n });\n\n processDataAsync().then(() => {\n setState((draft) => {\n draft.isLoading = false;\n });\n });\n }\n }, [state.isIgnore]);\n\n useEffect(() => {\n if (showDialog) {\n setDefaultData();\n // This variable helps us ensure that we don't call `setIsContentLoaded` if the component has unmounted before our asynchronous operation completes.\n let isMounted = true;\n processDataAsync().then(() => {\n if (isMounted) {\n // Only set the loading state to false if the component is still mounted\n setState((draft) => {\n draft.isLoading = false;\n });\n }\n });\n // The cleanup function for the effect\n return () => {\n // If the component unmounts, we set isMounted to false to prevent any state updates after unmounting.\n isMounted = false;\n };\n }\n }, [showDialog]);\n\n if (state.showDialog === false) return null;\n\n // ... rest of the logic and JSX\n return (\n {\n setDefaultData();\n onToggleDialogModal();\n }}\n width={state.isShowConfirm ? \"fit-content\" : \"60%\"}\n style={{ borderRadius: \"20px\" }}\n footer={null}\n >\n \n {state.isShowConfirm == false && (\n <>\n \n \n {contentTranslator(contentTranslations, \"SfiaPlan\", \"SfiaPlanFindMentorDialogButtonConnect\", \"Connect\")}\n \n )}\n \n \n {contentTranslator(contentTranslations, \"SfiaPlan\", \"SfiaPlanFindMentorDialogTogleIgnoreSkills\", \"Ignore Skills\")} \n \n \n
\n \n \n IMPORTANT : Mentors skills will be matched against the Skill Gaps you currently have displayed. For example, self-assessed profile and current requirement.\"),\n }}\n > \n \n }\n type={\"warning\"}\n />\n \n } \n
\n \n )}\n \n \n \n\n {state.isShowConfirm == false && (\n \n \n
\n
\n setQuestion1Closed(true)} />\n
\n
handleOpenQuestion(\"How can SkillsTX help in my IT career?\")}>\n How can SkillsTX help in my IT career?\n
\n
\n
\n
\n setQuestion2Closed(true)} />\n
\n
handleOpenQuestion(\"Can you suggest a career path in software development?\")}>\n Can you suggest a career path in software development?\n
\n
\n
\n
\n setQuestion3Closed(true)} />\n
\n
handleOpenQuestion(\"What SFIA8 skills should I develop for cybersecurity?\")}>\n What SFIA8 skills should I develop for cybersecurity?\n
\n
\n
\n
\n setOpenChatBot(!openChatBot)} />\n
\n
\n {messages.map((message, index) => (\n
\"),\n }}\n >\n {/* {message.text} */}\n
\n ))}\n
\n
\n ) : (\n \n )}\n \n \n );\n};\nexport default ChatbotOpenAi;\n","import * as actionPlanActions from \"../../store/actions/actionPlanAction\";\nimport * as jobActions from \"../../store/actions/jobAction\";\nimport changeInput from \"../../utils/changeInput\";\nimport { parameterizedString } from \"../../utils/stringUtils\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport \"./../../custom-add-action.css\";\nimport { faEye, faEyeSlash, faFilter, faInfoCircle, faPlus } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { connect } from \"react-redux\";\nimport { Link } from \"react-router-dom\";\nimport Combobox from \"react-widgets/Combobox\";\nimport { Button, ButtonGroup, Col, Container, CustomInput, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nvar _ = require(\"lodash\");\n\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\nconst wrapperStyle = {\n borderRadius: \"10px\",\n width: \"700px\",\n background: \"#F5F5F5\",\n paddingLeft: \"63px\",\n paddingRight: \"63px\",\n paddingTop: \"35px\",\n paddingBottom: \"35px\",\n};\n\nconst btnGroupStyle = {\n height: \"52px\",\n width: \"252px\",\n fontSize: \"14px\",\n};\nclass FormAddAction extends React.Component {\n static displayName = FormAddAction.name;\n\n constructor(props) {\n super(props);\n this.state = {\n addMode: \"Custom\",\n firstName: \"\",\n lastName: \"\",\n actionType: \"\",\n description: \"\",\n targetDate: \"\",\n duration: \"\",\n website: \"\",\n otherSkills: \"\",\n optionsActionTypes: this.props.optionsActionTypes,\n optionsActionSkills: this.props.optionsActionSkills,\n selectedOtherSkill: null,\n form: {\n name: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n actionType: {\n validation: {\n required: true,\n },\n value: this.props.optionsActionTypes && this.props.optionsActionTypes.length > 0 && this.props.optionsActionTypes[0].name,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n description: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n target: {\n validation: {\n required: this.props.containerConfig && this.props.containerConfig ? this.props.containerConfig.actionTargetCompletionDateIsMandatory : false,\n isDateTime: true,\n },\n value: null,\n valid: !(this.props.containerConfig && this.props.containerConfig ? this.props.containerConfig.actionTargetCompletionDateIsMandatory : false),\n isValidFormat: true,\n touched: false,\n },\n duration: {\n validation: {\n required: false,\n isNumeric: true,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n durationHours: {\n validation: {\n required: false,\n isNumeric: true,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n website: {\n validation: {\n required: false,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n formListed: {\n description: {\n validation: {\n required: false,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n target: {\n validation: {\n required: this.props.containerConfig && this.props.containerConfig ? this.props.containerConfig.actionTargetCompletionDateIsMandatory : false,\n isDateTime: true,\n },\n value: null,\n valid: !(this.props.containerConfig && this.props.containerConfig ? this.props.containerConfig.actionTargetCompletionDateIsMandatory : false),\n isValidFormat: true,\n touched: false,\n },\n },\n selectedSkills: [],\n pickedOtherSkills: [],\n selectedOtherSkills: [],\n isFormValid: false,\n isFormListedValid: false,\n actionPlanUpdating: false,\n alerts: [],\n interventionsFilterGapsOnly: true,\n interventionsFilter: {\n companyId: null,\n skill: null,\n gaps: [],\n jobId: null,\n },\n interventionsLoaded: false,\n interventions: [],\n jobs: [],\n selectedIntervention: null,\n loading: false,\n showInterventionDetail: false,\n shownIntervention: null,\n showFilter: false,\n providers: this.props.providers,\n selectedProviderId: null,\n selectedInterventionSkill: null,\n showHiddenInterventions: false,\n noSkillConfirmationPass: false,\n showActionNoSkillConfirmationDialog: false,\n };\n this.handleSkillCheckedChange = this.handleSkillCheckedChange.bind(this);\n this.handleOtherSkillCheckedChange = this.handleOtherSkillCheckedChange.bind(this);\n this.handleChangeOtherSkill = this.handleChangeOtherSkill.bind(this);\n this.handleAddOtherSkill = this.handleAddOtherSkill.bind(this);\n\n this.handleGetInterventions = this.handleGetInterventions.bind(this);\n this.handleShowInterventionDetail = this.handleShowInterventionDetail.bind(this);\n this.handleSelectIntervention = this.handleSelectIntervention.bind(this);\n this.togleInterventionDetailModal = this.togleInterventionDetailModal.bind(this);\n this.submitFormListed = this.submitFormListed.bind(this);\n this.handleTogleShowFilter = this.handleTogleShowFilter.bind(this);\n this.interventionFormPanel = this.interventionFormPanel.bind(this);\n this.handleChangeGapsFilterSelection = this.handleChangeGapsFilterSelection.bind(this);\n this.handleChangeProviderSelection = this.handleChangeProviderSelection.bind(this);\n this.handleChangeSkillInterventionSelection = this.handleChangeSkillInterventionSelection.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n this.parameterizedString = parameterizedString.bind(this);\n }\n\n componentDidMount() {\n const selectedDefaultSkill = this.props.selectedDefaultSkill;\n const selectedDefaultSkills = this.props.selectedDefaultSkills;\n\n const { interventionsFilter } = this.state;\n const { lorProfiles, skillProfiles, jobLorProfiles, jobSkillProfiles, lors, categories, showHiddenSkills } = this.props;\n\n const availableLorCodes = lors\n ? lors\n .filter((it) => !it.isHidden)\n .flatMap((lor, index) => {\n return lor.lorCode;\n })\n : [];\n\n const availableSkillCodes = categories\n ? categories.flatMap((category, index) => {\n return category.subCategories.flatMap((subCategory, index) => {\n return subCategory.skills\n .filter((it) => !it.isHidden)\n .flatMap((skill, index) => {\n return skill.skillsCode;\n });\n });\n })\n : [];\n\n let gaps = [];\n\n const showUnActionedOnly = true;\n\n if (selectedDefaultSkill) {\n gaps.push({\n skillsCode: selectedDefaultSkill.skillCode,\n level: selectedDefaultSkill.skillLevel,\n });\n } else if (selectedDefaultSkills) {\n gaps.push(\n ...selectedDefaultSkills.map((it) => {\n return {\n skillsCode: it.skillCode,\n level: it.skillLevel,\n };\n })\n );\n } else {\n if (showUnActionedOnly) {\n gaps.push(\n ...jobLorProfiles\n .filter((it) => !it.actioned && (showHiddenSkills || (!showHiddenSkills && availableLorCodes.includes(it.lorCode))))\n .map((it) => {\n if (!lorProfiles.find((prof) => prof.lorCode == it.lorCode) || (lorProfiles.find((prof) => prof.lorCode == it.lorCode) && it.level > lorProfiles.find((prof) => prof.lorCode == it.lorCode).level)) {\n return {\n skillsCode: it.lorCode,\n level: it.level,\n };\n }\n })\n .filter((it) => it)\n );\n\n gaps.push(\n ...jobSkillProfiles\n .filter((it) => !it.actioned && (showHiddenSkills || (!showHiddenSkills && availableSkillCodes.includes(it.skillCode))))\n .map((it) => {\n if (!skillProfiles.find((prof) => prof.skillCode == it.skillCode && prof.level == it.level) || skillProfiles.find((prof) => prof.skillCode == it.skillCode && prof.level == it.level && prof.numericVal < 1)) {\n return {\n skillsCode: it.skillCode,\n level: it.level,\n };\n }\n })\n .filter((it) => it)\n );\n } else {\n gaps.push(\n ...[\n ...jobLorProfiles\n .filter((it) => showHiddenSkills || (!showHiddenSkills && availableLorCodes.includes(it.lorCode)))\n .map((it) => {\n return {\n skillsCode: it.lorCode,\n level: it.level,\n };\n }),\n ...jobSkillProfiles\n .filter((it) => showHiddenSkills || (!showHiddenSkills && availableSkillCodes.includes(it.skillCode)))\n .map((it) => {\n return {\n skillsCode: it.skillCode,\n level: it.level,\n };\n }),\n ]\n );\n }\n }\n\n interventionsFilter.gaps = gaps;\n this.setState({ interventionsFilter });\n\n if (selectedDefaultSkill) {\n const selectedSkills = this.state.selectedSkills;\n this.setState({ selectedSkills: [...selectedSkills, selectedDefaultSkill] });\n } else if (selectedDefaultSkills) {\n const selectedSkills = this.state.selectedSkills;\n this.setState({ selectedSkills: [...selectedSkills, ...selectedDefaultSkills] });\n }\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.showHiddenSkills !== this.props.showHiddenSkills && this.props.showHiddenSkills == false) {\n const { lors, categories } = this.props;\n const { selectedSkills } = this.state;\n\n const availableLorCodes = lors\n ? lors\n .filter((it) => !it.isHidden)\n .flatMap((lor, index) => {\n return lor.lorCode;\n })\n : [];\n\n const availableSkillCodes = categories\n ? categories.flatMap((category, index) => {\n return category.subCategories.flatMap((subCategory, index) => {\n return subCategory.skills\n .filter((it) => !it.isHidden)\n .flatMap((skill, index) => {\n return skill.skillsCode;\n });\n });\n })\n : [];\n\n this.setState({ selectedSkills: [...selectedSkills.filter((it) => (it.skillType == \"Skill\" && availableSkillCodes.includes(it.skillCode)) || (it.skillType == \"Lor\" && availableLorCodes.includes(it.skillCode)))] });\n }\n }\n\n handleChange = (event) => {\n const { name, value } = event.target;\n\n const updateState = changeInput(this.state.form, name, value);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n handleChangeDate(name, value) {\n const updateState = changeInput(this.state.form, name, value);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n }\n\n submitForm = () => {\n const { selectedSkills, selectedOtherSkills, noSkillConfirmationPass } = this.state;\n\n if (selectedSkills && selectedSkills.length == 0 && selectedOtherSkills && selectedOtherSkills.length == 0 && noSkillConfirmationPass == false) {\n this.setState({ showActionNoSkillConfirmationDialog: true });\n } else {\n const actionRequest = {\n personEmail: this.props.managedPeople && this.props.managedPeople.personB.email,\n actionType: this.state.form.actionType.value,\n name: this.state.form.name.value,\n description: this.state.form.description.value,\n status: \"ToDo\",\n targetCompletionOn: this.state.form.target.value,\n duration: this.state.form.duration.value,\n durationHours: this.state.form.durationHours.value,\n link: this.state.form.website.value,\n skills: [...selectedSkills, ...selectedOtherSkills].map((skill) => {\n return {\n name: skill.skillName,\n code: skill.skillCode,\n level: skill.skillLevel,\n type: skill.skillType,\n };\n }),\n };\n\n this.setState({ actionPlanUpdating: true });\n Promise.resolve(this.props.managedPeople ? this.props.onActionPlan.createManagedPeopleAction(actionRequest) : this.props.onActionPlan.createAction(actionRequest)).then(() => {\n if (!this.props.actionPlanUpdating) {\n if (this.props.actionPlanUpdatingError) {\n this.props.generateAlert(\"danger\", this.props.actionPlanUpdatingError.errData.Message);\n } else {\n this.props.handleActionPlanAdded(this.props.addedAction);\n }\n }\n this.setState({ actionPlanUpdating: this.props.actionPlanUpdating });\n });\n }\n };\n\n handleActionClick = (addMode) => {\n const { form } = this.state;\n\n this.setState(\n {\n addMode,\n form,\n selectedIntervention: null,\n },\n () => {\n if (addMode == \"Listed\" && !this.state.interventionsLoaded) {\n this.handleGetJobsWithAction();\n this.handleGetInterventions();\n }\n }\n );\n };\n\n handleSkillCheckedChange(skillName, skillCode, skillLevel, skillType) {\n let selectedSkills = this.state.selectedSkills;\n\n const selectedSkill = {\n skillName,\n skillCode,\n skillLevel,\n skillType,\n };\n\n if (selectedSkills.find((it) => it.skillName == skillName && it.skillCode == skillCode && it.skillLevel == skillLevel)) {\n const unSelectedSkill = selectedSkills.find((it) => it.skillName == skillName && it.skillCode == skillCode && it.skillLevel == skillLevel);\n const index = selectedSkills.indexOf(unSelectedSkill);\n if (index !== -1) {\n selectedSkills.splice(index, 1);\n }\n\n this.setState({ selectedSkills });\n } else {\n this.setState({ selectedSkills: [...selectedSkills, selectedSkill] });\n }\n }\n\n handleOtherSkillCheckedChange(skillName, skillCode, skillLevel, skillType) {\n let selectedOtherSkills = this.state.selectedOtherSkills;\n\n const selectedSkill = {\n skillName,\n skillCode,\n skillLevel,\n skillType,\n };\n\n if (selectedOtherSkills.find((it) => it.skillName == skillName && it.skillCode == skillCode && it.skillLevel == skillLevel)) {\n const unSelectedSkill = selectedOtherSkills.find((it) => it.skillName == skillName && it.skillCode == skillCode && it.skillLevel == skillLevel);\n const index = selectedOtherSkills.indexOf(unSelectedSkill);\n if (index !== -1) {\n selectedOtherSkills.splice(index, 1);\n }\n\n this.setState({ selectedOtherSkills });\n } else {\n this.setState({ selectedOtherSkills: [...selectedOtherSkills, selectedSkill] });\n }\n }\n\n // handleChangeOtherSkill = (event) => {\n // this.setState({ selectedOtherSkill: event.target.value })\n // }\n\n handleChangeOtherSkill = (skill) => {\n if (skill) {\n this.setState({ selectedOtherSkill: `${skill.skillCode}-${skill.skillLevel}` });\n }\n };\n\n handleAddOtherSkill() {\n const selectedOtherSkill = this.state.selectedOtherSkill;\n let { optionsActionSkills, pickedOtherSkills, selectedOtherSkills } = this.state;\n\n if (selectedOtherSkill && selectedOtherSkill !== \"\") {\n let optionsActionSkill = optionsActionSkills.find((it) => it.skills.some((skill) => `${skill.skillCode}-${skill.skillLevel}` == selectedOtherSkill));\n if (optionsActionSkill) {\n let skill = optionsActionSkill.skills.find((skill) => `${skill.skillCode}-${skill.skillLevel}` == selectedOtherSkill);\n if (skill) {\n skill.selected = true;\n\n pickedOtherSkills.push({\n skillName: skill.skillName,\n skillCode: skill.skillCode,\n skillLevel: skill.skillLevel,\n skillType: skill.skillType,\n });\n\n selectedOtherSkills.push({\n skillName: skill.skillName,\n skillCode: skill.skillCode,\n skillLevel: skill.skillLevel,\n skillType: skill.skillType,\n });\n }\n\n this.setState({ optionsActionSkills, selectedOtherSkill: \"\", pickedOtherSkills, selectedOtherSkills });\n }\n }\n }\n\n handleGetJobsWithAction = () => {\n this.setState({ loading: true });\n this.props.onJob.getJobsWithAction().then(() => {\n if (!this.props.jobLoading && !this.props.jobError) {\n let currentJob = null;\n let futureJob = null;\n\n if (this.props.optionsJob && this.props.optionsJob.length > 0) {\n currentJob = this.props.optionsJob.find((it) => it.type == \"Current\");\n futureJob = this.props.optionsJob.find((it) => it.type == \"Future\");\n }\n\n const jobs = this.props.jobs.map((job) => {\n return {\n value: job.id,\n label: job.name,\n priority: currentJob && currentJob.id == job.id ? 1 : futureJob && futureJob.id == job.id ? 2 : 3,\n };\n });\n\n this.setState({\n jobs: [\n {\n value: \"\",\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaActionPredefinedFilterRequirementPlaceholder\", \"=== All Requirements ===\"),\n },\n ...jobs.sort((a, b) => (`${a.priority}${a.label}` > `${b.priority}${b.label}` ? 1 : -1)),\n ],\n });\n } else {\n console.log(\"this.props.jobError\", this.props.jobError);\n }\n\n this.setState({ loading: this.props.jobLoading });\n });\n };\n\n handleGetInterventions() {\n this.setState({ loading: true });\n\n const { interventionsFilterGapsOnly, interventionsFilter } = this.state;\n const gaps = interventionsFilterGapsOnly === true || interventionsFilterGapsOnly === \"true\" ? interventionsFilter.gaps : [];\n\n this.props.onActionPlan\n .getInterventions({\n companyId: interventionsFilter.companyId,\n skill: interventionsFilter.skill,\n gaps,\n jobId: interventionsFilter.jobId,\n })\n .then(() => {\n if (!this.props.interventionsLoading && !this.props.interventionsError) {\n this.setState({ interventions: this.props.interventions });\n } else {\n console.log(\"this.props.interventionsError\", this.props.interventionsError);\n }\n\n this.setState({ interventionsLoaded: true, loading: this.props.interventionsLoading });\n });\n }\n\n handleShowInterventionDetail(intervention) {\n this.setState({ showInterventionDetail: true, shownIntervention: intervention });\n }\n\n togleInterventionDetailModal() {\n const showInterventionDetail = this.state.showInterventionDetail;\n this.setState({ showInterventionDetail: !showInterventionDetail });\n }\n\n handleFormListedChange = (event) => {\n const { name, value } = event.target;\n\n const updateState = changeInput(this.state.formListed, name, value);\n\n this.setState({\n formListed: updateState.form,\n isFormListedValid: updateState.valid,\n });\n };\n\n handleFormListedChangeDate(name, value) {\n const updateState = changeInput(this.state.formListed, name, value);\n\n this.setState({\n formListed: updateState.form,\n isFormListedValid: updateState.valid,\n });\n }\n\n handleSelectIntervention(intervention) {\n this.setState({ selectedIntervention: intervention });\n }\n\n submitFormListed() {\n const { selectedIntervention } = this.state;\n\n const actionRequest = {\n personEmail: this.props.managedPeople && this.props.managedPeople.personB.email,\n actionType: selectedIntervention.actionType,\n name: selectedIntervention.name,\n description: this.state.formListed.description.value,\n status: \"ToDo\",\n targetCompletionOn: this.state.formListed.target.value,\n duration: selectedIntervention.duration,\n durationHours: selectedIntervention.durationHours,\n link: selectedIntervention.link,\n interventionId: selectedIntervention.id,\n interventionName: selectedIntervention.name,\n interventionDescription: selectedIntervention.description,\n interventionProviderName: selectedIntervention.company.name,\n interventionIsValidated: selectedIntervention.isValidated,\n skills: [\n ...selectedIntervention.lorLevels.map((level) => {\n return {\n name: level.lorName,\n code: level.lorCode,\n level: level.level,\n type: \"Lor\",\n };\n }),\n ...selectedIntervention.levels.map((level) => {\n return {\n name: level.skillsName,\n code: level.skillsCode,\n level: level.level,\n type: \"Skill\",\n };\n }),\n ],\n };\n\n this.setState({ actionPlanUpdating: true });\n Promise.resolve(this.props.managedPeople ? this.props.onActionPlan.createManagedPeopleAction(actionRequest) : this.props.onActionPlan.createAction(actionRequest)).then(() => {\n if (!this.props.actionPlanUpdating) {\n if (this.props.actionPlanUpdatingError) {\n this.props.generateAlert(\"danger\", this.props.actionPlanUpdatingError.errData.Message);\n } else {\n this.props.handleActionPlanAdded(this.props.addedAction);\n }\n }\n this.setState({ actionPlanUpdating: this.props.actionPlanUpdating });\n });\n }\n\n modalInterventionDetail() {\n const { showInterventionDetail, shownIntervention } = this.state;\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n }\n\n handleTogleShowFilter() {\n this.setState({ showFilter: !this.state.showFilter });\n }\n\n interventionFormPanel() {\n const { providers, optionsActionSkills, jobs } = this.state;\n const { lors, categories, showHiddenSkills } = this.props;\n\n const availableLorCodes = lors\n ? lors\n .filter((it) => !it.isHidden || showHiddenSkills)\n .flatMap((lor, index) => {\n return lor.lorCode;\n })\n : [];\n\n const availableSkillCodes = categories\n ? categories.flatMap((category, index) => {\n return category.subCategories.flatMap((subCategory, index) => {\n return subCategory.skills\n .filter((it) => !it.isHidden || showHiddenSkills)\n .flatMap((skill, index) => {\n return skill.skillsCode;\n });\n });\n })\n : [];\n\n const spreadedActionSkills = [].concat.apply(\n [],\n optionsActionSkills\n .filter((it) => it.skills.some((skill) => !skill.selected && !skill.actioned))\n .map((it, groupIndex) => {\n return it.skills\n .filter((skill) => !skill.selected && !skill.actioned && (showHiddenSkills || (!showHiddenSkills && availableSkillCodes.includes(skill.skillCode))))\n .map((skill) => {\n return {\n groupIndex,\n skillName: skill.skillName,\n skillCode: skill.skillCode,\n skillLabel: skill.skillLabel,\n skillLevel: skill.skillLevel,\n skillType: skill.skillType,\n };\n });\n })\n );\n\n let spreadedProviders = [{ id: \"\", name: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaActionPredefinedFilterProviderPlaceholder\", \"=== All Providers ===\"), isPreferred: false }];\n\n if (providers) {\n spreadedProviders = [\n { id: \"\", name: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaActionPredefinedFilterProviderPlaceholder\", \"=== All Providers ===\"), isPreferred: false },\n ...providers\n .sort((a, b) => b.isPreferred - a.isPreferred)\n .map((provider) => {\n return {\n id: provider.id,\n name: provider.name + (provider.isPreferred ? ` (${this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanPreferred\", \"preferred\")})` : \"\"),\n isPreferred: provider.isPreferred,\n };\n }),\n ];\n }\n\n return (\n \n \n \n \n \n this.handleChangeGapsFilterSelection({\n target: {\n value: value.value,\n },\n })\n }\n data={[\n { value: true, label: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanPredefinedFilterGapsOnly\", \"Gaps Only\") },\n { value: false, label: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanPredefinedFilterGapsShowAll\", \"Show All\") },\n ]}\n textField=\"label\"\n dataKey=\"value\"\n defaultValue={{ value: true, label: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanPredefinedFilterGapsOnly\", \"Gaps Only\") }}\n style={{ fontSize: \"14px\", fontFamily: \"IBMPlexSans\" }}\n />\n \n \n \n \n \n \n this.handleChangeProviderSelection({\n target: {\n value: value.id,\n },\n })\n }\n textField=\"name\"\n dataKey=\"id\"\n defaultValue={spreadedProviders[0]}\n style={{ fontSize: \"14px\", fontFamily: \"IBMPlexSans\" }}\n />\n \n \n \n \n \n a.groupIndex - b.groupIndex)}\n onChange={(value) => {\n value == \"\" &&\n this.handleChangeSkillInterventionSelection({\n target: {\n value: \"\",\n },\n });\n }}\n onSelect={(value) =>\n this.handleChangeSkillInterventionSelection({\n target: {\n value: value.skillCode + value.skillLevel,\n },\n })\n }\n textField=\"skillLabel\"\n groupBy=\"skillName\"\n filter=\"contains\"\n placeholder={this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaActionPredefinedFilterSkillPlaceholder\", \"=== Select Skill ===\")}\n autoSelectMatches={true}\n style={{ fontSize: \"14px\", fontFamily: \"IBMPlexSans\" }}\n />\n \n \n {jobs && jobs.length > 0 && (\n \n \n \n \n this.handleChangeJobSelection({\n target: {\n value: value.value,\n },\n })\n }\n textField=\"label\"\n dataKey=\"value\"\n defaultValue={jobs[0]}\n style={{ fontSize: \"14px\", fontFamily: \"IBMPlexSans\" }}\n />\n \n \n )}\n \n \n \n \n \n \n );\n }\n\n handleChangeGapsFilterSelection = (event) => {\n this.setState(\n {\n interventionsFilterGapsOnly: event.target.value,\n },\n () => {\n this.handleGetInterventions();\n }\n );\n };\n\n handleChangeProviderSelection = (event) => {\n const interventionsFilter = this.state.interventionsFilter;\n const selectedProviderId = event.target.value;\n\n if (selectedProviderId && selectedProviderId != \"\") {\n interventionsFilter.companyId = selectedProviderId;\n } else {\n interventionsFilter.companyId = null;\n }\n\n this.setState(\n {\n selectedProviderId,\n interventionsFilter,\n },\n () => {\n this.handleGetInterventions();\n }\n );\n };\n\n handleChangeSkillInterventionSelection = (event) => {\n const skillCodeLevel = event.target.value;\n const { optionsActionSkills, interventionsFilter } = this.state;\n let selectedInterventionSkill;\n\n if (skillCodeLevel != \"\") {\n const optionsActionSkill = optionsActionSkills.find((it) => it.skills.some((skill) => skill.skillCode + skill.skillLevel == skillCodeLevel || \"(LoR)-\" + skill.skillCode + skill.skillLevel == skillCodeLevel));\n\n if (optionsActionSkill) {\n const skill = optionsActionSkill.skills.find((skill) => skill.skillCode + skill.skillLevel == skillCodeLevel || \"(LoR)-\" + skill.skillCode + skill.skillLevel == skillCodeLevel);\n if (skill) {\n selectedInterventionSkill = skill.skillCode + skill.skillLevel;\n interventionsFilter.skill = {\n skillsCode: skill.skillCode,\n level: skill.skillLevel,\n };\n } else {\n interventionsFilter.skill = null;\n }\n } else {\n interventionsFilter.skill = null;\n }\n } else {\n interventionsFilter.skill = null;\n }\n\n this.setState(\n {\n selectedInterventionSkill,\n interventionsFilter,\n },\n () => {\n this.handleGetInterventions();\n }\n );\n };\n\n handleChangeJobSelection = (event) => {\n const interventionsFilter = this.state.interventionsFilter;\n const selectedJobId = event.target.value;\n\n if (selectedJobId && selectedJobId != \"\") {\n interventionsFilter.jobId = selectedJobId;\n } else {\n interventionsFilter.jobId = null;\n }\n\n this.setState(\n {\n selectedJobId,\n interventionsFilter,\n },\n () => {\n this.handleGetInterventions();\n }\n );\n };\n\n handleUpdateShowHiddenInterventionFilter = () => {\n const showHiddenInterventions = this.state.showHiddenInterventions;\n this.setState({ showHiddenInterventions: !showHiddenInterventions });\n };\n\n handleUpdateHiddenIntervention = (id, hidden) => {\n const interventions = this.state.interventions;\n\n Promise.resolve(hidden ? this.props.onActionPlan.updateHideIntervention(id) : this.props.onActionPlan.updateUnHideIntervention(id)).then(() => {\n const intervention = interventions.find((it) => it.id == id);\n if (intervention) {\n intervention.hidden = hidden;\n }\n\n this.setState({ interventions: [...interventions] });\n });\n };\n\n handleConfirmActionNoSkillConfirmation = () => {\n this.setState(\n {\n noSkillConfirmationPass: true,\n showActionNoSkillConfirmationDialog: false,\n },\n () => {\n this.submitForm();\n }\n );\n };\n\n toggleActionNoSkillConfirmationDialog = () => {\n const { showActionNoSkillConfirmationDialog } = this.state;\n\n this.setState({ showActionNoSkillConfirmationDialog: !showActionNoSkillConfirmationDialog });\n };\n\n renderActionNoSkillConfirmationDialog = () => {\n const { showActionNoSkillConfirmationDialog } = this.state;\n\n return (\n \n \n \n \n \n \n \n {\n this.handleConfirmActionNoSkillConfirmation();\n }}\n >\n \n \n \n \n );\n };\n\n render() {\n const { optionsActionTypes, optionsActionSkills, selectedSkills, pickedOtherSkills, selectedOtherSkills, form, formListed, interventions, showHiddenInterventions } = this.state;\n const { jobLorProfiles, jobSkillProfiles, lors, categories, showHiddenSkills } = this.props;\n\n const availableLorCodes = lors\n ? lors\n .filter((it) => !it.isHidden || showHiddenSkills)\n .flatMap((lor, index) => {\n return lor.lorCode;\n })\n : [];\n\n const availableSkillCodes = categories\n ? categories.flatMap((category, index) => {\n return category.subCategories.flatMap((subCategory, index) => {\n return subCategory.skills\n .filter((it) => !it.isHidden || showHiddenSkills)\n .flatMap((skill, index) => {\n return skill.skillsCode;\n });\n });\n })\n : [];\n\n const spreadedActionSkills = [].concat.apply(\n [],\n optionsActionSkills\n .filter((it) => it.skills.some((skill) => !skill.selected && !skill.actioned))\n .map((it, groupIndex) => {\n return it.skills\n .filter((skill) => !skill.selected && !skill.actioned && (showHiddenSkills || (!showHiddenSkills && availableSkillCodes.includes(skill.skillCode))))\n .map((skill) => {\n return {\n groupIndex,\n skillName: skill.skillType == \"Lor\" ? this.contentTranslator(this.props.contentTranslations, \"Lors\", skill.skillName, skill.skillName) : this.contentTranslator(this.props.contentTranslations, \"Skills\", skill.skillName, skill.skillName),\n skillCode: skill.skillCode,\n skillLabel:\n skill.skillType == \"Lor\"\n ? `${this.contentTranslator(this.props.contentTranslations, \"Lors\", skill.skillName, skill.skillName)} ${skill.skillLevel}`\n : `${this.contentTranslator(this.props.contentTranslations, \"Skills\", skill.skillName, skill.skillName)} ${skill.skillLevel}`,\n skillLevel: skill.skillLevel,\n skillType: skill.skillType,\n };\n });\n })\n );\n\n const spreadedInterventions = interventions.map((intervention) => {\n return {\n id: intervention.id,\n group: `${intervention.companyId}${intervention.actionType}${intervention.name}${intervention.link ? intervention.link : \"\"}${intervention.duration ? intervention.duration : \"0\"}`,\n companyId: intervention.companyId,\n company: intervention.company,\n actionType: intervention.actionType,\n name: intervention.name,\n link: intervention.link,\n duration: intervention.duration,\n durationHours: intervention.durationHours,\n description: intervention.description,\n isActive: intervention.isActive,\n isValidated: intervention.isValidated,\n publishedOn: intervention.publishedOn,\n reviewOn: intervention.reviewOn,\n retireOn: intervention.retireOn,\n sfiaVersion: intervention.sfiaVersion,\n versionNumber: intervention.versionNumber,\n levelsString: intervention.levels\n .sort((a, b) => (`${a.skillsCode}${a.level}` > `${b.skillsCode}${b.level}` ? 1 : -1))\n .map((level) => {\n return `${level.skillsCode}${level.level}`;\n })\n .join(\", \"),\n levels: intervention.levels,\n lorLevelsString: intervention.lorLevels\n .sort((a, b) => (`${a.lorCode}${a.level}` > `${b.lorCode}${b.level}` ? 1 : -1))\n .map((level) => {\n return `${level.lorCode}${level.level}`;\n })\n .join(\", \"),\n lorLevels: intervention.lorLevels,\n hidden: intervention.hidden,\n };\n });\n\n const groupdSpreadedInterventions = _.groupBy(spreadedInterventions, function (item) {\n return item.group;\n });\n\n const resultInterventions = [];\n\n Object.keys(groupdSpreadedInterventions).forEach((key) => {\n //console.log(key, groupdSpreadedInterventions[key]);\n resultInterventions.push(groupdSpreadedInterventions[key][0]);\n });\n\n const selectedDefaultSkill = this.props.selectedDefaultSkill;\n let oddIndex = 0;\n\n return (\n \n {this.modalInterventionDetail()}\n {this.renderActionNoSkillConfirmationDialog()}\n \n
\n ) : (\n \n \n \n this.handleActionClick(\"Listed\")}\n className={\"btn \" + (this.state.addMode === \"Listed\" ? \"btn-primary btnPrimary-Style\" : \"btn-light btnSecondary-Style\")}\n >\n \n \n this.handleActionClick(\"Custom\")}\n className={\"btn \" + (this.state.addMode === \"Custom\" ? \"btn-primary btnPrimary-Style\" : \"btn-light btnSecondary-Style\")}\n >\n \n \n \n \n
\n {this.state.addMode === \"Listed\" ? (\n \n ) : (\n \n )}\n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n actionPlanUpdating: state.actionPlan.actionPlanUpdating,\n actionPlanUpdatingError: state.actionPlan.actionPlanUpdatingError,\n addedAction: state.actionPlan.addedAction,\n interventionsLoading: state.actionPlan.loading,\n interventionsError: state.actionPlan.error,\n interventions: state.actionPlan.interventions,\n\n lors: state.lor.lors,\n\n managedPeople: state.auth.managedPeople,\n contentTranslations: state.content.contentTranslations,\n\n jobLoading: state.job.loading,\n jobError: state.job.error,\n jobs: state.job.jobs,\n\n containerConfig: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onActionPlan: bindActionCreators(actionPlanActions, dispatch),\n onJob: bindActionCreators(jobActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(FormAddAction);\n","import ContentTranslator from \"../translator/ContentTranslator\";\nimport FormAddAction from \"./FormAddAction\";\nimport { faMinus, faPlus } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\n\nconst buttonActionPrimaryStyle = {\n height: \"32px\",\n width: \"80px\",\n};\n\nclass ActionPlanResponsibilityBody extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n showActionForm: false,\n // lor: this.props.lor,\n };\n\n this.initData = this.initData.bind(this);\n this.handleAddActionClick = this.handleAddActionClick.bind(this);\n this.handleActionfinish = this.handleActionfinish.bind(this);\n this.handleActionPlanAdded = this.handleActionPlanAdded.bind(this);\n }\n\n componentDidMount() {\n this.initData();\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.showHiddenSkills !== this.props.showHiddenSkills) {\n this.setState({ showActionForm: false });\n }\n }\n\n initData() {}\n\n handleAddActionClick = () => {\n this.setState({\n showActionForm: !this.state.showActionForm,\n });\n };\n\n handleActionfinish = () => {\n this.setState({\n showActionForm: false,\n });\n };\n\n handleActionPlanAdded(addedActionPlans) {\n this.setState({\n showActionForm: false,\n });\n\n this.props.handleActionPlanAdded(addedActionPlans);\n }\n\n render() {\n const { lor, action, skillProfile, jobLorProfiles, currentJob, futureJob, selectedJob } = this.props;\n\n const currentJobLorProfile = currentJob && jobLorProfiles.find((it) => it.lor === lor.name && it.jobId == currentJob.jobId);\n const futureJobLorProfile = futureJob && jobLorProfiles.find((it) => it.lor === lor.name && it.jobId == futureJob.jobId);\n\n const selectedJobLorProfile = selectedJob && jobLorProfiles.find((it) => it.lor === lor.name && it.jobId == selectedJob.id);\n\n let notMandatory = false;\n let selectedDefaultSkill = null;\n\n if ((skillProfile && selectedJobLorProfile && skillProfile.level >= selectedJobLorProfile.numericVal) || (skillProfile && !selectedJobLorProfile)) {\n notMandatory = true;\n } else {\n notMandatory = false;\n\n if (selectedJobLorProfile) {\n selectedDefaultSkill = {\n skillName: selectedJobLorProfile.lor,\n skillCode: selectedJobLorProfile.lorCode,\n skillLevel: selectedJobLorProfile.level,\n skillType: \"Lor\",\n };\n }\n }\n\n return (\n \n {((selectedJobLorProfile && skillProfile && skillProfile.level < selectedJobLorProfile.numericVal) || this.props.showAll) && (\n \n \n \n {skillProfile ? skillProfile.level : 0} \n {currentJobLorProfile && currentJobLorProfile.numericVal} \n {futureJobLorProfile && futureJobLorProfile.numericVal} \n \n {!this.state.showActionForm ? (\n \n \n \n )}\n \n \n )}\n {this.state.showActionForm && (\n \n \n \n
\n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = () => {\n return {};\n};\n\nconst mapDispatchToProps = () => {\n return {};\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ActionPlanResponsibilityBody);\n","import * as lorActions from \"../../store/actions/lorAction\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport ActionPlanResponsibilityBody from \"./TableActionPlanResponsibilityBody\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst lorOrders = [\n { lor: \"Autonomy\", order: 1 },\n { lor: \"Influence\", order: 2 },\n { lor: \"Complexity\", order: 3 },\n { lor: \"Business Skills\", order: 4 },\n { lor: \"Knowledge\", order: 5 },\n { lor: \"Responsibility and Autonomy\", order: 1 },\n { lor: \"Complexity and Scope\", order: 2 },\n { lor: \"Skills\", order: 3 },\n];\n\nclass ActionPlanResponsibility extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n showActionForm: false,\n };\n\n this.initData = this.initData.bind(this);\n }\n\n componentDidMount() {\n this.initData();\n }\n\n initData() {}\n\n TableBodyResponsibility = (category) => {\n const { lors, actions, jobGaps, lorProfiles, skillProfiles, jobLorProfiles, jobSkillProfiles } = this.props;\n\n if (lors) {\n lors.forEach((lor) => {\n const lorOrder = lorOrders.find((it) => it.lor == lor.name);\n if (lorOrder) {\n lor.order = lorOrder.order;\n } else {\n lor.order = 999;\n }\n });\n }\n\n if (this.state.loading) {\n return (\n \n \n \n
\n \n \n );\n } else {\n const mainRows = lors\n .filter((it) => (it.category ? it.category : \"Generic Attributes\") == (category ? category : \"Generic Attributes\"))\n //.sort((a, b) => (`${a.sequence}${a.order}${a.name}` > `${b.sequence}${b.order}${b.name}` ? 1 : -1))\n .sort((a, b) => {\n if (a.sequence > b.sequence) {\n return 1;\n }\n if (a.sequence < b.sequence) {\n return -1;\n }\n if (a.order > b.order) {\n return 1;\n }\n if (a.order < b.order) {\n return -1;\n }\n if (a.name > b.name) {\n return 1;\n }\n if (a.name < b.name) {\n return -1;\n }\n return 0;\n })\n .map((lor, index) => {\n const lorHidden = lor.isHidden && !this.props.showHiddenSkills;\n const lorProfile = lorProfiles.find((x) => x.lor === lor.name);\n const action = actions.find((action) => action.skills.some((skill) => skill.code == lor.lorCode));\n\n return (\n \n );\n });\n\n return mainRows;\n }\n };\n\n render() {\n const { lors, lorProfiles, jobLorProfiles, selectedJob } = this.props;\n\n const lorCategories = [];\n\n if (lors.find((it) => !it.category)) {\n lorCategories.push({\n category: \"Generic Attributes\",\n categoryColor: \"#69849c\",\n lorColor: \"#ecf0f5\",\n lors: lors.find((it) => !it.category) ? [...lors.filter((it) => !it.category)] : [],\n });\n }\n\n lors.filter((it) => it.category).forEach((lor) => {\n if (!lorCategories.find((it) => it.category == lor.category)) {\n lorCategories.push({\n category: lor.category,\n categoryColor: lor.categoryColor,\n lorColor: lor.lorColor,\n lors: lors.find((it) => it.category == lor.category) ? [...lors.filter((it) => it.category == lor.category)] : [],\n });\n }\n });\n\n let showLors = false;\n\n lors.map((lor) => {\n const lorProfile = lorProfiles.find((x) => x.lor === lor.name);\n const selectedJobLorProfile = selectedJob && jobLorProfiles.find((it) => it.lor === lor.name && it.jobId == selectedJob.id);\n\n if ((selectedJobLorProfile && lorProfile && lorProfile.numericVal < selectedJobLorProfile.numericVal) || this.props.showAll) {\n showLors = true;\n }\n });\n\n return (\n \n {showLors &&\n lorCategories.map((lorCategory, index) => {\n let showCategoryLors = false;\n\n lors.filter((it) => (it.category ? it.category : \"Generic Attributes\") == (lorCategory.category ? lorCategory.category : \"Generic Attributes\")).map((lor) => {\n const lorProfile = lorProfiles.find((x) => x.lor === lor.name);\n const selectedJobLorProfile = selectedJob && jobLorProfiles.find((it) => it.lor === lor.name && it.jobId == selectedJob.id);\n\n if (showCategoryLors == false && ((selectedJobLorProfile && lorProfile && lorProfile.numericVal < selectedJobLorProfile.numericVal) || this.props.showAll)) {\n showCategoryLors = !lor.isHidden || (lor.isHidden && this.props.showHiddenSkills);\n }\n });\n\n return (\n \n {showCategoryLors && (\n \n \n \n \n {lorCategory.category == \"Generic Attributes\" ? \n \n \n \n \n \n \n \n \n \n \n {this.TableBodyResponsibility(lorCategory.category)} \n \n \n \n \n \n )}\n \n );\n })}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n lors: state.lor.lors,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onLor: bindActionCreators(lorActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ActionPlanResponsibility);\n","import { contentTranslator } from \"../../utils/translatorUtils\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport FormAddAction from \"./FormAddAction\";\nimport { faMinus, faPlus } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { UncontrolledTooltip } from \"reactstrap\";\n\nconst buttonActionPrimaryStyle = {\n height: \"32px\",\n width: \"80px\",\n};\n\nclass TableBodyActionPlan extends React.Component {\n static display = TableBodyActionPlan.name;\n\n constructor(props) {\n super(props);\n\n this.state = {\n loading: false,\n showPopup: false,\n showActionForm: false,\n };\n\n this.handleAddActionClick = this.handleAddActionClick.bind(this);\n this.handleActionfinish = this.handleActionfinish.bind(this);\n this.handleActionPlanAdded = this.handleActionPlanAdded.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {}\n\n componentDidUpdate(prevProps) {\n if (prevProps.showHiddenSkills !== this.props.showHiddenSkills) {\n this.setState({ showActionForm: false });\n }\n }\n\n handleAddActionClick = () => {\n this.setState({\n showActionForm: !this.state.showActionForm,\n });\n };\n\n handleActionfinish = () => {\n this.setState({\n showActionForm: false,\n });\n };\n\n togleDescriptionModal() {\n const showPopup = this.state.showPopup;\n this.setState({ showPopup: !showPopup });\n }\n\n handleActionPlanAdded(addedActionPlans) {\n this.setState({\n showActionForm: false,\n });\n\n this.props.handleActionPlanAdded(addedActionPlans);\n }\n\n render() {\n const { showAll, levelIndex, skill, level } = this.props;\n const selectedDefaultSkill = {\n skillName: skill.name,\n skillCode: skill.skillsCode,\n skillLevel: level.level,\n skillType: \"Skill\",\n };\n\n return (\n \n \n {(showAll ? levelIndex === 0 : level.skillNameShown) && `${this.contentTranslator(this.props.contentTranslations, \"Skills\", skill.name, skill.name)} (${skill.skillsCode})`} \n \n {`${skill.skillsCode}${level.level} - `}\n \n this.props.openSkillLevelDescriptionModal({\n skillsCode: skill.skillsCode,\n level: level.level,\n description: this.contentTranslator(this.props.contentTranslations, \"SkillLevels\", `${skill.skillsCode} ${level.level} Description`, level.description),\n })\n }\n >\n \n \n \n \n {level.jobSkillProfile ? (\n level.skillProfile && level.skillProfile.stringVal == \"M\" ? (\n \"\"\n ) : level.action ? (\n \n \n \n
\n \n {level.jobSkillProfile ? (\n level.jobSkillProfile.stringVal == \"M\" ? (\n \n \n \n {!this.state.showActionForm ? (\n \n \n ) : (\n \n \n )}\n \n \n {this.state.showActionForm && (\n \n \n \n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n contentTranslations: state.content.contentTranslations,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {};\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(TableBodyActionPlan);\n","import ContentTranslator from \"../translator/ContentTranslator\";\nimport TableBodyActionPlan from \"./TableBodyActionPlan\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Modal, ModalBody, ModalHeader, Spinner } from \"reactstrap\";\n\nconst tableBodyStyle = {\n fontSize: 11,\n fontFamily: \"IBMPlexSans\",\n};\n\nclass ActionPlanSkillProfiles extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n skillLevelDescriptionShow: false,\n poppedUpLevel: null,\n };\n\n this.openSkillLevelDescriptionModal = this.openSkillLevelDescriptionModal.bind(this);\n this.togleSkillLevelDescriptionModal = this.togleSkillLevelDescriptionModal.bind(this);\n }\n\n componentDidMount() {}\n\n renderSkillCategories(categories) {\n const categoriesRows = categories.map((category, index) => {\n return {this.renderSkillSubCategories(category)} ;\n });\n\n return categoriesRows;\n }\n\n renderSkillSubCategories(category) {\n const content = category.subCategories.map((subCategory, subIndex) => {\n const shownLevel = subCategory.skills.filter((skill) => skill.levels.some((level) => level.show));\n let subCatSkillProfilesCodeShown = subCategory.skills.filter((skill) => skill.levels.some((level) => level.show)).map((skill) => skill.skillsCode);\n const checkedSubCatSkills = this.props.showAll ? subCategory.skills : subCategory.skills.filter((it) => subCatSkillProfilesCodeShown.includes(it.skillsCode));\n const subCategoryHidden = !checkedSubCatSkills.some((skill) => !skill.isHidden) && !this.props.showHiddenSkills;\n\n return (\n (shownLevel.length > 0 || this.props.showAll) && (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {this.renderSkills(subCategory)}\n \n \n \n \n \n )\n );\n });\n\n return content;\n }\n\n renderSkills(subCategory) {\n return (\n \n {subCategory.skills.map((skill, skillIndex) => {\n const skillHidden = skill.isHidden && !this.props.showHiddenSkills;\n\n return (\n \n {skill.levels.map((level, levelIndex) => {\n return (\n (level.show || this.props.showAll) && (\n \n )\n );\n })}\n \n );\n })}\n \n );\n }\n\n openSkillLevelDescriptionModal(level) {\n this.setState({ poppedUpLevel: level, skillLevelDescriptionShow: true });\n }\n\n togleSkillLevelDescriptionModal() {\n const skillLevelDescriptionShow = this.state.skillLevelDescriptionShow;\n this.setState({ skillLevelDescriptionShow: !skillLevelDescriptionShow });\n }\n\n render() {\n const { poppedUpLevel } = this.state;\n return (\n \n \n {poppedUpLevel && `${poppedUpLevel.skillsCode}-${poppedUpLevel.level}`} \n {poppedUpLevel &&
} \n \n {this.state.loading ? (\n \n \n \n \n \n \n \n
\n \n \n \n \n ) : (\n this.renderSkillCategories(this.props.categories)\n )}\n \n );\n }\n}\n\nconst mapStateToProps = () => {\n return {};\n};\n\nconst mapDispatchToProps = () => {\n return {};\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ActionPlanSkillProfiles);\n","import ActionPlanResponsibility from \"./TableActionPlanResponsibility\";\nimport ActionPlanSkillProfiles from \"./TableActionPlanSkillProfiles\";\nimport React, { Component } from \"react\";\nimport { Container, Spinner, Table } from \"reactstrap\";\n\nexport class TableActionPlan extends Component {\n static displayName = TableActionPlan.name;\n\n constructor(props) {\n super(props);\n\n this.state = {\n showTable: false,\n categories: this.props.categories,\n extraFrameworkCapabilities: this.props.extraFrameworkCapabilities,\n jobLorProfiles: this.props.jobLorProfiles,\n jobSkillProfiles: this.props.jobSkillProfiles,\n lorProfiles: this.props.lorProfiles,\n skillProfiles: this.props.skillProfiles,\n optionsActionSkills: this.props.optionsActionSkills,\n };\n }\n\n componentDidMount() {\n this.processJobGapData();\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.loadingAction !== this.props.loadingAction || prevProps.loadingProfile !== this.props.loadingProfile || prevProps.selectedJob !== this.props.selectedJob || prevProps.actions !== this.props.actions) {\n this.processJobGapData();\n }\n }\n\n handleActionClick = (value) => {\n this.setState({\n showTable: value,\n });\n };\n\n processJobGapData = () => {\n if (!this.props.loadingAction && !this.props.loadingProfile) {\n const { actions, jobLorProfiles, jobSkillProfiles, lorProfiles, skillProfiles, selectedJob } = this.props;\n let { categories, extraFrameworkCapabilities } = this.state;\n\n categories = categories.map((category) => {\n return {\n id: category.id,\n name: category.name,\n isExtraFramework: category.isExtraFramework,\n description: category.description,\n colour: category.colour,\n sfiaVersion: category.sfiaVersion,\n subCategories: category.subCategories.map((subCategory) => {\n return {\n id: subCategory.id,\n name: subCategory.name,\n description: subCategory.description,\n colour: subCategory.colour,\n skillColour: subCategory.skillColour,\n skills: subCategory.skills.map((skill) => {\n let skillNameShown = false;\n\n return {\n id: skill.id,\n name: skill.name,\n skillsCode: skill.skillsCode,\n description: skill.description,\n isHidden: skill.isHidden,\n levels: skill.levels.map((level) => {\n const skillProfile = skillProfiles.find((x) => x.skillCode == skill.skillsCode && x.level == level.level);\n const jobSkillProfile = jobSkillProfiles.find((x) => x.jobId == selectedJob.id && x.skillCode == skill.skillsCode && x.level == level.level);\n\n if (jobSkillProfile && skillProfile) {\n if (skillProfile.numericVal == 1 || skillProfile.stringVal == \"M\") {\n jobSkillProfile.actioned = true;\n }\n }\n\n const action = actions.find((actions) => actions.skills.some((it) => it.code == skill.skillsCode && it.level == level.level));\n\n level = {\n skillNameShown: false,\n show: false,\n id: level.id,\n level: level.level,\n description: level.description,\n skillProfile: skillProfile,\n jobSkillProfile: jobSkillProfile,\n action: action,\n };\n\n if (!skillNameShown) {\n if (!category.isExtraFramework == true) {\n if ((level.skillProfile && level.jobSkillProfile && level.skillProfile.numericVal < 1) || (!level.skillProfile && level.jobSkillProfile) || this.state.showAllSkill) {\n level.skillNameShown = true;\n skillNameShown = true;\n }\n } else {\n const topExtraFrameworkCapability = [...extraFrameworkCapabilities].sort((a, b) => b.weight - a.weight)[0];\n if ((level.skillProfile && level.jobSkillProfile && level.skillProfile.numericVal < topExtraFrameworkCapability.weight) || (!level.skillProfile && level.jobSkillProfile) || this.state.showAllSkill) {\n level.skillNameShown = true;\n skillNameShown = true;\n }\n }\n }\n\n if (!category.isExtraFramework == true) {\n if ((level.skillProfile && level.jobSkillProfile && level.skillProfile.numericVal < 1) || (!level.skillProfile && level.jobSkillProfile)) {\n level.show = true;\n }\n } else {\n const topExtraFrameworkCapability = [...extraFrameworkCapabilities].sort((a, b) => b.weight - a.weight)[0];\n if ((level.skillProfile && level.jobSkillProfile && level.skillProfile.numericVal < topExtraFrameworkCapability.weight) || (!level.skillProfile && level.jobSkillProfile)) {\n level.show = true;\n }\n }\n\n return level;\n }),\n };\n }),\n };\n }),\n };\n });\n\n jobLorProfiles.map((jobLorProfile) => {\n const lorProfile = lorProfiles.find((it) => it.lorCode == jobLorProfile.lorCode && it.level >= jobLorProfile.level);\n const plan = actions.find((it) => it.skills.some((skill) => skill.code == jobLorProfile.lorCode && skill.level >= jobLorProfile.level));\n\n if (lorProfile || plan) {\n jobLorProfile.actioned = true;\n }\n });\n\n jobSkillProfiles.map((jobSkillProfile) => {\n const plan = actions.find((it) => it.skills.some((skill) => skill.code == jobSkillProfile.skillCode && skill.level == jobSkillProfile.level));\n if (plan) {\n jobSkillProfile.actioned = true;\n }\n });\n\n let optionsActionSkills = this.props.optionsActionSkills;\n optionsActionSkills.forEach((actionSkill) => {\n actionSkill.skills.forEach((skill) => {\n if (\n actions.filter((x) => x.skills.some((y) => y.code == skill.skillCode && y.level == skill.skillLevel)).length > 0 ||\n jobLorProfiles.filter((it) => it.lorCode == skill.skillCode && it.level == skill.skillLevel).length > 0 ||\n jobSkillProfiles.filter((it) => it.skillCode == skill.skillCode && it.level == skill.skillLevel).length > 0\n ) {\n skill.actioned = true;\n }\n });\n });\n\n this.props.returnOptionActionSkills(optionsActionSkills);\n\n this.setState({\n categories,\n jobLorProfiles,\n jobSkillProfiles,\n lorProfiles,\n skillProfiles,\n optionsActionSkills,\n });\n }\n };\n\n render() {\n return (\n \n {this.props.loadingProfile ? (\n \n
\n ) : (\n \n \n \n \n )}\n \n );\n }\n}\n","import MentorPreferenceModal from \"../../components/trienpont/components/modals/mentorpreferences\";\nimport PossibleMentorModal from \"../../components/trienpont/components/modals/possiblementor\";\nimport * as actionPlanActions from \"../../store/actions/actionPlanAction\";\nimport * as personAction from \"../../store/actions/personAction\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport ChatbotOpenAi from \"../ChatbotOpenAi\";\nimport { ContentWrapperLg } from \"../common/ContentWrapperLg\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport FormAddAction from \"./FormAddAction\";\nimport { TableActionPlan } from \"./TableActionPlan\";\nimport { faMinus, faPlus } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport Select from \"react-select\";\nimport { Col, Container, Row, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst FileDownload = require(\"js-file-download\");\nconst headerStyle = {\n color: \"#2B2B2B\",\n fontSize: \"32px\",\n fontFamily: \"IBMPlexSans-Bold\",\n};\n\nconst ddHeaderStyle = {\n fontsize: \"14px\",\n fontFamily: \"IBMPlexSans-Bold\",\n};\n\nconst buttonStyle = {\n marginLeft: \"10px\",\n};\n\nclass ManageActionPlan extends React.Component {\n static displayNama = ManageActionPlan.name;\n\n constructor(props) {\n super(props);\n\n this.state = {\n showActionForm: false,\n showAll: false,\n showHiddenSkills: false,\n allowUpdate: true,\n returnedOptionsActionSkills: this.props.optionsActionSkills,\n showMentorPreferenceDialog: false,\n isBtnMentorPreference: false,\n showPossibleMentorDialog: false,\n };\n this.handleAddActionClick = this.handleAddActionClick.bind(this);\n this.handleActionfinish = this.handleActionfinish.bind(this);\n this.handleActionPlanAdded = this.handleActionPlanAdded.bind(this);\n this.myManageActionWrapper = React.createRef();\n this.contentTranslator = contentTranslator.bind(this);\n this.updatePersonMentorPreference = this.updatePersonMentorPreference.bind(this);\n this.updatePersonMentorPreference();\n }\n\n componentDidMount() {\n // relationship for allow\n const listRelationshipType = [\"Line Manager\", \"Mentor\"];\n\n if (!this.props.managedPeople || (this.props.managedPeople && listRelationshipType.some((item) => item.toLocaleLowerCase().trim() === this.props.managedPeople.relationshipType?.toLocaleLowerCase().trim()))) {\n this.setState({ allowUpdate: true });\n } else {\n this.setState({ allowUpdate: false });\n }\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.stepActionClicked !== this.props.stepActionClicked) {\n if (this.props.stepActionClicked) {\n this.scroll(this.myManageActionWrapper);\n }\n }\n\n if (prevProps.proposeActionStarted !== this.props.proposeActionStarted && this.props.proposeActionStarted == true) {\n this.setState({ showHiddenSkills: false });\n }\n }\n\n updatePersonMentorPreference() {\n this.props.onPerson.getPersonMentorPreference().then(() => {\n this.setState({\n isBtnMentorPreference: this.props.mentorPreference.some((item) => item.selected),\n });\n });\n }\n\n handleChageShowAll = () => {\n this.setState({\n showAll: !this.state.showAll,\n });\n };\n\n handleChageShowHiddenSkills = () => {\n const showHiddenSkills = this.state.showHiddenSkills;\n this.setState({\n showHiddenSkills: !showHiddenSkills,\n showActionForm: false,\n });\n\n this.props.handleChageShowHiddenSkills(!showHiddenSkills);\n };\n\n handleChangeProfile = (event) => {\n this.props.handleChangeProfileType(event.value);\n };\n\n handleChangeJob = (event) => {\n this.props.handleChangeJob(event);\n };\n\n handleAddActionClick = () => {\n this.setState({\n showActionForm: !this.state.showActionForm,\n });\n };\n\n handleActionfinish = () => {\n this.setState({\n showActionForm: false,\n });\n };\n\n handleActionPlanAdded(addedAction) {\n this.setState({\n showActionForm: false,\n });\n\n this.props.handleActionPlanAdded(addedAction);\n }\n\n handleOpenMentorPreference = () => {\n this.setState({ showMentorPreferenceDialog: new Date() });\n };\n\n handleOpenPossibleMentor = () => {\n this.setState({ showPossibleMentorDialog: new Date() });\n };\n\n handlePrintReport = () => {\n Promise.resolve(this.props.managedPeople ? this.props.onActionPlan.printManagedPeopleActionReport(this.props.managedPeople.personB.email) : this.props.onActionPlan.printMyActionReport()).then(() => {\n if (!this.props.loadingPrint && !this.props.error) {\n if (this.props.printData) {\n const firstName = this.props.managedPeople ? this.props.managedPeople.personB.firstName : localStorage.getItem(\"firstName\");\n const lastName = this.props.managedPeople ? this.props.managedPeople.personB.lastName : localStorage.getItem(\"lastName\");\n\n let reportFormat = \"PDF\";\n if (this.props.selfAssessedProfileReportFormat) {\n reportFormat = this.props.selfAssessedProfileReportFormat;\n }\n\n FileDownload(this.props.printData, firstName && lastName ? `${firstName}${lastName}_SkillsTx_ActionPlan.${reportFormat == \"PDF\" ? \"pdf\" : \"docx\"}` : 'SkillsTx_ActionPlan.${reportFormat == \"PDF\" ? \"pdf\" : \"docx\"}');\n }\n }\n });\n };\n\n scroll(ref) {\n ref.current.scrollIntoView({ behavior: \"smooth\" });\n }\n\n returnOptionActionSkills = (optionsActionSkills) => {\n this.setState({ returnedOptionsActionSkills: optionsActionSkills });\n };\n\n renderMentorPreference = () => {\n return (\n \n );\n };\n\n renderPossibleMentor = () => {\n return (\n \n );\n };\n\n render() {\n let isAdmin = false;\n\n const authMode = this.props.authMode;\n let authModes = authMode.split(\",\").map((item) => item.trim());\n if (authModes.filter((it) => it != \"Admin\").length == 0) {\n isAdmin = true;\n }\n\n const { optionsJob, optionsProfile, selectedOptionProfile, selectedJob, currAssessment, containerConfig } = this.props;\n const isFindMentor = currAssessment?.enableFindMentor ?? false;\n return (\n \n \n {this.props.managedPeople\n ? `${this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanManageAccountForTitle\", \"Manage Action Plan for\")} ${this.props.managedPeople.personB.firstName} ${this.props.managedPeople.personB.lastName}`\n : this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanManageAccountTitle\", \"Manage Your Action Plan\")}\n
\n {this.renderMentorPreference()}\n {this.renderPossibleMentor()}\n {containerConfig && containerConfig.enableAIChatBot && \n \n \n \n \n
\n option.label === selectedOptionProfile)} onChange={this.handleChangeProfile} options={optionsProfile} />\n \n \n
\n option.label === selectedJob.label)} onChange={this.handleChangeJob} options={optionsJob} />\n \n
\n \n \n \n \n \n \n \n \n \n \n \n )}\n {this.props.containerConfig && this.props.containerConfig.allowShowHiddenSkills && (\n \n {this.state.showHiddenSkills\n ? this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanButtonHideHiddenSkills\", \"Hide Hidden Skills\")\n : this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanButtonShowHiddenSkills\", \"Show Hidden Skills\")}\n \n )}\n \n {this.state.showAll ? this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanButtonHideDetail\", \"Hide Detail\") : this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanButtonShowAll\", \"Show All\")}\n \n \n {this.state.showAll ? (\n \n {this.state.allowUpdate &&\n (!this.state.showActionForm ? (\n \n \n \n \n \n \n \n \n ) : (\n \n \n ))}\n {this.props.actions && this.props.actions.length > 0 && (\n \n \n \n \n \n \n )}\n \n
\n \n {this.state.showActionForm && (\n \n
\n
\n \n \n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loadingPrint: state.actionPlan.loadingPrint,\n printData: state.actionPlan.printData,\n error: state.actionPlan.error,\n\n managedPeople: state.auth.managedPeople,\n authMode: state.auth.authMode,\n\n mentorPreference: state.person.mentorPreference,\n\n contentTranslations: state.content.contentTranslations,\n\n currAssessment: state.config.currAssessment,\n containerConfig: state.config.containerConfig,\n\n jobProfileReportFormat: state.auth.jobProfileReportFormat,\n selfAssessedProfileReportFormat: state.auth.selfAssessedProfileReportFormat,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onActionPlan: bindActionCreators(actionPlanActions, dispatch),\n onPerson: bindActionCreators(personAction, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ManageActionPlan);\n","import * as actionPlanActions from \"../../store/actions/actionPlanAction\";\nimport changeInput from \"../../utils/changeInput\";\nimport { parameterizedString } from \"../../utils/stringUtils\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport { ContentWrapperLg } from \"../common/ContentWrapperLg\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport \"./../../custom-edit-action.css\";\nimport { faArrowDown, faArrowUp, faPlus, faTrash } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { connect } from \"react-redux\";\nimport { Link } from \"react-router-dom\";\nimport Combobox from \"react-widgets/Combobox\";\nimport { Alert, Button, ButtonGroup, CustomInput, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { Col, Container, Row } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nvar _ = require(\"lodash\");\n\nconst filterOutLoROnProposeAction = false;\n\nclass Todo extends React.Component {\n static displayName = Todo.name;\n\n constructor(props) {\n super(props);\n this.state = {\n optionsStatus: [\n { label: \"Todo\", value: \"ToDo\" },\n { label: \"In Progress\", value: \"InProgress\" },\n { label: \"Done\", value: \"Done - self verified\" },\n ],\n optionsActionTypes: this.props.optionsActionTypes,\n optionsActionSkills: this.props.optionsActionSkills,\n optionProposeCapabilities: [{ name: \"Knowledge\" }, { name: \"Proficient\" }, { name: \"Competent\" }],\n showActionPlanDetail: false,\n poppedUpAction: null,\n showActionPlanEdit: false,\n editedAction: null,\n form: {\n id: {\n validation: {\n required: true,\n },\n value: null,\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n status: {\n validation: {\n required: true,\n },\n value: null,\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n actionType: {\n validation: {\n required: true,\n },\n value: null,\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n name: {\n validation: {\n required: true,\n },\n value: null,\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n targetCompletionOn: {\n validation: {\n required: this.props.containerConfig && this.props.containerConfig ? this.props.containerConfig.actionTargetCompletionDateIsMandatory : false,\n isDateTime: true,\n },\n value: null,\n valid: !(this.props.containerConfig && this.props.containerConfig ? this.props.containerConfig.actionTargetCompletionDateIsMandatory : false),\n isValidFormat: true,\n touched: false,\n },\n description: {\n validation: {\n required: false,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n link: {\n validation: {\n required: false,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n duration: {\n validation: {\n required: false,\n isNumeric: true,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n durationHours: {\n validation: {\n required: false,\n isNumeric: true,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n proposeCapability: {\n validation: {\n required: false,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n isFormValid: false,\n selectedSkills: [],\n pickedOtherSkills: [],\n selectedOtherSkill: \"\",\n selectedOtherSkills: [],\n actionPlanUpdating: false,\n selectedSortOption: \"targetCompletionOn\",\n selectedSortOptionDirection: \"asc\",\n optionSorts: [\n {\n label: \"Target Completion Date\",\n field: \"targetCompletionOn\",\n selected: true,\n },\n {\n label: \"Status\",\n field: \"status\",\n },\n {\n label: \"Type\",\n field: \"actionType\",\n },\n ],\n showDone: false,\n showHidden: false,\n showPopUpAsPromoteAction: false,\n showActionPromotionConfirmationDialog: false,\n proposeActionMode: false,\n showPopUpAsProposeAction: false,\n showPopUpAsViewProposedAction: false,\n showProposeActionConfirmationDialog: false,\n viewProposedActionMode: false,\n showIssueBadgeConfirmationDialog: false,\n showRejectBadgeConfirmationDialog: false,\n };\n\n this.openActionPlanDetailModal = this.openActionPlanDetailModal.bind(this);\n this.togleActionPlanDetailModal = this.togleActionPlanDetailModal.bind(this);\n\n this.openActionPlanEditModal = this.openActionPlanEditModal.bind(this);\n this.togleActionPlanEditModal = this.togleActionPlanEditModal.bind(this);\n\n this.handleSkillCheckedChange = this.handleSkillCheckedChange.bind(this);\n this.handleChangeOtherSkill = this.handleChangeOtherSkill.bind(this);\n this.handleAddOtherSkill = this.handleAddOtherSkill.bind(this);\n this.handleOtherSkillCheckedChange = this.handleOtherSkillCheckedChange.bind(this);\n this.handleSubmitEdit = this.handleSubmitEdit.bind(this);\n this.handleSubmitDelete = this.handleSubmitDelete.bind(this);\n\n this.handleChangeSortOption = this.handleChangeSortOption.bind(this);\n this.handleChangeSortDirection = this.handleChangeSortDirection.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n this.parameterizedString = parameterizedString.bind(this);\n }\n\n componentDidMount() {\n this.processJobGapData();\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.loadingAction !== this.props.loadingAction || prevProps.loadingProfile !== this.props.loadingProfile || prevProps.selectedJob !== this.props.selectedJob || prevProps.actions !== this.props.actions) {\n this.processJobGapData();\n }\n\n if (prevProps.showHiddenSkills !== this.props.showHiddenSkills) {\n this.setState({ showActionPlanEdit: false });\n }\n }\n\n processJobGapData = () => {\n if (!this.props.loadingAction && !this.props.loadingProfile) {\n const { actions, jobLorProfiles, jobSkillProfiles, lorProfiles, skillProfiles, selectedJob, showHiddenSkills } = this.props;\n let { categories } = this.props;\n\n categories = categories.map((category) => {\n return {\n id: category.id,\n name: category.name,\n description: category.description,\n colour: category.colour,\n sfiaVersion: category.sfiaVersion,\n subCategories: category.subCategories.map((subCategory) => {\n return {\n id: subCategory.id,\n name: subCategory.name,\n description: subCategory.description,\n colour: subCategory.colour,\n skillColour: subCategory.skillColour,\n skills: subCategory.skills.map((skill) => {\n let skillNameShown = false;\n\n return {\n id: skill.id,\n name: skill.name,\n skillsCode: skill.skillsCode,\n description: skill.description,\n levels: skill.levels.map((level) => {\n const skillProfile = skillProfiles.find((x) => x.skillCode == skill.skillsCode && x.level == level.level);\n const jobSkillProfile = jobSkillProfiles.find((x) => x.jobId == selectedJob.id && x.skillCode == skill.skillsCode && x.level == level.level);\n\n if (jobSkillProfile && skillProfile) {\n if (skillProfile.numericVal == 1 || skillProfile.stringVal == \"M\") {\n jobSkillProfile.actioned = true;\n }\n }\n\n const action = actions.find((actions) => actions.skills.some((it) => it.code == skill.skillsCode && it.level == level.level));\n\n level = {\n skillNameShown: false,\n show: false,\n id: level.id,\n level: level.level,\n description: level.description,\n skillProfile: skillProfile,\n jobSkillProfile: jobSkillProfile,\n action: action,\n };\n\n if (!skillNameShown) {\n if ((level.skillProfile && level.jobSkillProfile && level.skillProfile.numericVal < 1) || (!level.skillProfile && level.jobSkillProfile) || this.state.showAllSkill) {\n level.skillNameShown = true;\n skillNameShown = true;\n }\n }\n\n if ((level.skillProfile && level.jobSkillProfile && level.skillProfile.numericVal < 1) || (!level.skillProfile && level.jobSkillProfile)) {\n level.show = true;\n }\n\n return level;\n }),\n };\n }),\n };\n }),\n };\n });\n\n jobLorProfiles.map((jobLorProfile) => {\n const lorProfile = lorProfiles.find((it) => it.lorCode == jobLorProfile.lorCode && it.level >= jobLorProfile.level);\n const plan = actions.find((it) => it.skills.some((skill) => skill.code == jobLorProfile.lorCode && skill.level >= jobLorProfile.level));\n\n if (lorProfile || plan) {\n jobLorProfile.actioned = true;\n }\n });\n\n jobSkillProfiles.map((jobSkillProfile) => {\n const plan = actions.find((it) => it.skills.some((skill) => skill.code == jobSkillProfile.skillCode && skill.level == jobSkillProfile.level));\n if (plan) {\n jobSkillProfile.actioned = true;\n }\n });\n\n let optionsActionSkills = this.props.optionsActionSkills;\n optionsActionSkills.forEach((actionSkill) => {\n actionSkill.skills.forEach((skill) => {\n if (\n actions.filter((x) => x.skills.some((y) => y.code == skill.skillCode && y.level == skill.skillLevel)).length > 0 ||\n jobLorProfiles.filter((it) => it.lorCode == skill.skillCode && it.level == skill.skillLevel).length > 0 ||\n jobSkillProfiles.filter((it) => it.skillCode == skill.skillCode && it.level == skill.skillLevel).length > 0\n ) {\n skill.actioned = true;\n }\n });\n });\n\n this.setState({\n optionsActionSkills,\n });\n }\n };\n\n openActionPlanEditModal(action, promoteAction, proposeAction, viewProposedAction) {\n let form = this.state.form;\n\n form.id.value = action.id;\n form.id.valid = true;\n form.id.isValidFormat = true;\n\n form.status.value = action.status;\n form.status.valid = true;\n form.status.isValidFormat = true;\n\n form.actionType.value = action.actionType;\n form.actionType.valid = true;\n form.actionType.isValidFormat = true;\n\n form.name.value = action.name;\n form.name.valid = true;\n form.name.isValidFormat = true;\n\n form.targetCompletionOn.value = action.targetCompletionOn;\n form.targetCompletionOn.valid = form.targetCompletionOn.validation.required ? (action.targetCompletionOn ? true : false) : true;\n form.targetCompletionOn.isValidFormat = form.targetCompletionOn.validation.required ? (action.targetCompletionOn ? true : false) : true;\n\n form.description.value = action.description;\n form.link.value = action.link;\n form.duration.value = action.duration;\n form.durationHours.value = action.durationHours;\n\n let proposeCapability = null;\n if (viewProposedAction && action && action.updateProfileEvidenceProposalSkills && action.updateProfileEvidenceProposalSkills.length > 0) {\n proposeCapability = action.updateProfileEvidenceProposalSkills[0].capability;\n }\n\n form.proposeCapability.value = proposeCapability;\n form.proposeCapability.valid = !proposeAction;\n form.proposeCapability.isValidFormat = !proposeAction;\n\n this.setState({\n editedAction: action,\n showActionPlanEdit: true,\n form,\n isFormValid: form.targetCompletionOn.valid && !proposeAction,\n selectedSkills: action.skills.map((skill) => {\n return {\n id: skill.id,\n skillName: skill.name,\n skillCode: skill.code,\n skillLevel: skill.level,\n skillType: skill.type,\n };\n }),\n pickedOtherSkills: [],\n selectedOtherSkills: [],\n showPopUpAsPromoteAction: promoteAction,\n showPopUpAsProposeAction: proposeAction,\n showPopUpAsViewProposedAction: viewProposedAction,\n });\n }\n\n handleChange = (event) => {\n const { name, value } = event.target;\n\n const updateState = changeInput(this.state.form, name, value);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n handleChangeDate(name, value) {\n const updateState = changeInput(this.state.form, name, value);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n }\n\n togleActionPlanEditModal() {\n const showActionPlanEdit = this.state.showActionPlanEdit;\n this.setState({ showActionPlanEdit: !showActionPlanEdit });\n }\n\n openActionPlanDetailModal(action) {\n this.setState({ poppedUpAction: action, showActionPlanDetail: true });\n }\n\n togleActionPlanDetailModal() {\n const showActionPlanDetail = this.state.showActionPlanDetail;\n this.setState({ showActionPlanDetail: !showActionPlanDetail });\n }\n\n modalActionPlanDetail() {\n const { poppedUpAction } = this.state;\n\n return (\n \n \n \n \n \n \n \n {\n this.togleActionPlanDetailModal();\n this.openActionPlanEditModal(poppedUpAction, false, false, false);\n }}\n >\n \n \n \n \n );\n }\n\n handleSkillCheckedChange(skillName, skillCode, skillLevel, skillType) {\n let selectedSkills = this.state.selectedSkills;\n\n const selectedSkill = {\n skillName,\n skillCode,\n skillLevel,\n skillType,\n };\n\n if (selectedSkills.find((it) => it.skillName == skillName && it.skillCode == skillCode && it.skillLevel == skillLevel)) {\n const unSelectedSkill = selectedSkills.find((it) => it.skillName == skillName && it.skillCode == skillCode && it.skillLevel == skillLevel);\n\n if (unSelectedSkill.id) {\n if (unSelectedSkill.removed) {\n unSelectedSkill.removed = false;\n } else {\n unSelectedSkill.removed = true;\n }\n\n const index = selectedSkills.indexOf(unSelectedSkill);\n if (index !== -1) {\n selectedSkills[index].removed = unSelectedSkill.removed;\n }\n\n this.setState({ selectedSkills });\n } else {\n const index = selectedSkills.indexOf(unSelectedSkill);\n if (index !== -1) {\n selectedSkills.splice(index, 1);\n }\n\n this.setState({ selectedSkills });\n }\n } else {\n this.setState({ selectedSkills: [...selectedSkills, selectedSkill] });\n }\n }\n\n handleChangeOtherSkill = (event) => {\n this.setState({ selectedOtherSkill: event.target.value });\n };\n\n handleAddOtherSkill() {\n const selectedOtherSkill = this.state.selectedOtherSkill;\n let { optionsActionSkills, pickedOtherSkills, selectedOtherSkills } = this.state;\n\n if (selectedOtherSkill && selectedOtherSkill !== \"\") {\n let optionsActionSkill = optionsActionSkills.find((it) => it.skills.some((skill) => `${skill.skillCode}-${skill.skillLevel}` == selectedOtherSkill));\n if (optionsActionSkill) {\n let skill = optionsActionSkill.skills.find((skill) => `${skill.skillCode}-${skill.skillLevel}` == selectedOtherSkill);\n if (skill) {\n skill.selected = true;\n\n pickedOtherSkills.push({\n skillName: skill.skillName,\n skillCode: skill.skillCode,\n skillLevel: skill.skillLevel,\n skillType: skill.skillType,\n });\n\n selectedOtherSkills.push({\n skillName: skill.skillName,\n skillCode: skill.skillCode,\n skillLevel: skill.skillLevel,\n skillType: skill.skillType,\n });\n }\n\n this.setState({ optionsActionSkills, selectedOtherSkill: \"\", pickedOtherSkills, selectedOtherSkills });\n }\n }\n }\n\n handleOtherSkillCheckedChange(skillName, skillCode, skillLevel, skillType) {\n let selectedOtherSkills = this.state.selectedOtherSkills;\n\n const selectedSkill = {\n skillName,\n skillCode,\n skillLevel,\n skillType,\n };\n\n if (selectedOtherSkills.find((it) => it.skillName == skillName && it.skillCode == skillCode && it.skillLevel == skillLevel)) {\n const unSelectedSkill = selectedOtherSkills.find((it) => it.skillName == skillName && it.skillCode == skillCode && it.skillLevel == skillLevel);\n const index = selectedOtherSkills.indexOf(unSelectedSkill);\n if (index !== -1) {\n selectedOtherSkills.splice(index, 1);\n }\n\n this.setState({ selectedOtherSkills });\n } else {\n this.setState({ selectedOtherSkills: [...selectedOtherSkills, selectedSkill] });\n }\n }\n\n handleSubmitEdit() {\n const { editedAction, selectedSkills, selectedOtherSkills } = this.state;\n\n const actionRequest = {\n personEmail: this.props.managedPeople && this.props.managedPeople.personB.email,\n actionType: this.state.form.actionType.value,\n name: this.state.form.name.value,\n description: this.state.form.description.value,\n status: this.state.form.status.value,\n targetCompletionOn: this.state.form.targetCompletionOn.value,\n duration: this.state.form.duration.value,\n durationHours: this.state.form.durationHours.value,\n link: this.state.form.link.value,\n skills: [...selectedSkills.filter((it) => !it.removed), ...selectedOtherSkills.filter((it) => !it.removed)].map((skill) => {\n return {\n id: skill.id ? skill.id : null,\n name: skill.skillName,\n code: skill.skillCode,\n level: skill.skillLevel,\n type: skill.skillType,\n };\n }),\n };\n\n this.setState({ actionPlanUpdating: true });\n Promise.resolve(this.props.managedPeople ? this.props.onActionPlan.updateManagedPeopleAction(editedAction.id, actionRequest) : this.props.onActionPlan.updateAction(editedAction.id, actionRequest)).then(() => {\n if (!this.props.actionPlanUpdating) {\n if (this.props.actionPlanUpdatingError) {\n this.props.generateAlert(\"danger\", this.props.actionPlanUpdatingError.errData.Message);\n } else {\n this.setState({ showActionPlanEdit: false, selectedSkills: [] });\n this.props.handleActionPlanUpdated(this.props.updatedAction);\n this.props.generateAlert(\"success\", \"Action plan updated\");\n }\n }\n this.setState({ actionPlanUpdating: this.props.actionPlanUpdating });\n });\n }\n\n handleSubmitDelete() {\n const { editedAction } = this.state;\n\n const deletedId = editedAction.id;\n\n this.setState({ actionPlanUpdating: true });\n Promise.resolve(this.props.managedPeople ? this.props.onActionPlan.deleteManagedPeopleAction(deletedId, this.props.managedPeople.personB.email) : this.props.onActionPlan.deleteAction(deletedId)).then(() => {\n if (!this.props.actionPlanUpdating) {\n if (this.props.actionPlanUpdatingError) {\n this.props.generateAlert(\"danger\", this.props.actionPlanUpdatingError.errData.Message);\n } else {\n this.setState({ showActionPlanEdit: false });\n this.props.handleActionPlanDeleted(deletedId);\n }\n }\n this.setState({ actionPlanUpdating: this.props.actionPlanUpdating });\n });\n }\n\n handleSubmitIssueBadge = () => {\n this.setState({ showActionPlanEdit: false, showIssueBadgeConfirmationDialog: true });\n };\n\n handleCancelIssueBadge = () => {\n this.setState({ showActionPlanEdit: true, showIssueBadgeConfirmationDialog: false });\n };\n\n handleConfirmIssueBadge = () => {\n const { editedAction } = this.state;\n\n this.setState({ actionPlanUpdating: true });\n this.props.onActionPlan.issueBadgeManagedPeopleAction(editedAction.id, this.props.managedPeople.personB.email).then(() => {\n if (!this.props.actionPlanUpdating) {\n if (this.props.actionPlanUpdatingError) {\n this.props.generateAlert(\"danger\", this.props.actionPlanUpdatingError.errData.Message);\n } else {\n this.setState({ showIssueBadgeConfirmationDialog: false });\n this.props.handleActionPlanUpdated(this.props.updatedAction);\n this.props.generateAlert(\"success\", \"Issue badge success\");\n }\n }\n this.setState({ actionPlanUpdating: this.props.actionPlanUpdating });\n });\n };\n\n renderIssueBadgeConfirmation = () => {\n return (\n \n \n \n \n \n \n \n {\n this.handleConfirmIssueBadge();\n }}\n disabled={this.state.actionPlanUpdating}\n >\n \n \n \n \n );\n };\n\n handleRejectIssueBadge = () => {\n this.setState({ showActionPlanEdit: false, showRejectBadgeConfirmationDialog: true });\n };\n\n handleCancelRejectBadge = () => {\n this.setState({ showActionPlanEdit: true, showRejectBadgeConfirmationDialog: false });\n };\n\n handleConfirmRejectBadge = () => {\n const { editedAction } = this.state;\n\n this.setState({ actionPlanUpdating: true });\n this.props.onActionPlan.rejectBadgeManagedPeopleAction(editedAction.id, this.props.managedPeople.personB.email).then(() => {\n if (!this.props.actionPlanUpdating) {\n if (this.props.actionPlanUpdatingError) {\n this.props.generateAlert(\"danger\", this.props.actionPlanUpdatingError.errData.Message);\n } else {\n this.setState({ showRejectBadgeConfirmationDialog: false });\n this.props.handleActionPlanUpdated(this.props.updatedAction);\n this.props.generateAlert(\"success\", \"Reject issue badge success\");\n }\n }\n this.setState({ actionPlanUpdating: this.props.actionPlanUpdating });\n });\n };\n\n renderRejectBadgeConfirmation = () => {\n return (\n \n \n \n \n \n \n \n {\n this.handleConfirmRejectBadge();\n }}\n disabled={this.state.actionPlanUpdating}\n >\n \n \n \n \n );\n };\n\n renderEditActionPlan() {\n let isReadOnly = false;\n\n const authMode = this.props.authMode;\n let authModes = authMode.split(\",\").map((item) => item.trim());\n if (authModes.filter((it) => it != \"Admin\").length == 0) {\n isReadOnly = true;\n }\n\n const { editedAction, form, optionsActionSkills, optionProposeCapabilities, selectedSkills, pickedOtherSkills, selectedOtherSkills, showPopUpAsPromoteAction, showPopUpAsProposeAction, showPopUpAsViewProposedAction } = this.state;\n const { optionsActionTypes, lorProfiles, skillProfiles, showHiddenSkills, categories, lors, jobLorProfiles, jobSkillProfiles } = this.props;\n\n let editedOptionsActionTypes = [...optionsActionTypes];\n\n if (editedAction && !editedOptionsActionTypes.find((it) => it.name == editedAction.actionType)) {\n editedOptionsActionTypes.push({\n name: editedAction.actionType,\n });\n }\n\n if (editedAction && editedAction.status == \"IssueBadge\") {\n isReadOnly = true;\n }\n\n const availableLorCodes = lors\n ? lors\n .filter((it) => !it.isHidden)\n .flatMap((lor, index) => {\n return lor.lorCode;\n })\n : [];\n\n const availableSkillCodes = categories\n ? categories.flatMap((category, index) => {\n return category.subCategories.flatMap((subCategory, index) => {\n return subCategory.skills\n .filter((it) => !it.isHidden)\n .flatMap((skill, index) => {\n return skill.skillsCode;\n });\n });\n })\n : [];\n\n let optionsStatus = [\n { label: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanStatusTodo\", \"Todo\"), value: \"ToDo\" },\n { label: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanStatusInProgress\", \"In Progress\"), value: \"InProgress\" },\n { label: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanStatusDone\", \"Done\"), value: \"Done - self verified\" },\n ];\n\n if (editedAction && editedAction.interventionId && editedAction.actionType == \"Accredited Badge Issuing Action\" && editedAction.status == \"IssueBadge\" && !optionsStatus.find((it) => it.value == \"IssueBadge\")) {\n optionsStatus.push({ label: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanStatusIssueBadge\", \"Issue Badge\"), value: \"IssueBadge\" });\n }\n\n let showIssueBadge = false;\n if (this.props.managedPeople && editedAction && editedAction.interventionId && editedAction.actionType == \"Accredited Badge Issuing Action\" && editedAction.status != \"IssueBadge\" && this.props.containerConfig && this.props.containerConfig.allowBadgesFromActions == true) {\n showIssueBadge = true;\n }\n\n const spreadedActionSkills = [].concat.apply(\n [],\n optionsActionSkills\n .filter((it) => it.skills.some((skill) => !skill.selected && !skill.actioned))\n .map((it, groupIndex) => {\n return it.skills\n .filter((skill) => !skill.selected && !skill.actioned && (showHiddenSkills || (!showHiddenSkills && availableSkillCodes.includes(skill.skillCode))))\n .map((skill) => {\n return {\n groupIndex,\n skillName: skill.skillType == \"Lor\" ? this.contentTranslator(this.props.contentTranslations, \"Lors\", skill.skillName, skill.skillName) : this.contentTranslator(this.props.contentTranslations, \"Skills\", skill.skillName, skill.skillName),\n skillCode: skill.skillCode,\n skillLabel:\n skill.skillType == \"Lor\"\n ? `${this.contentTranslator(this.props.contentTranslations, \"Lors\", skill.skillName, skill.skillName)} ${skill.skillLevel}`\n : `${this.contentTranslator(this.props.contentTranslations, \"Skills\", skill.skillName, skill.skillName)} ${skill.skillLevel}`,\n skillLevel: skill.skillLevel,\n skillType: skill.skillType,\n };\n });\n })\n );\n\n let updateProfileEvidenceProposalSkills = [];\n if (showPopUpAsViewProposedAction) {\n updateProfileEvidenceProposalSkills = editedAction && editedAction.updateProfileEvidenceProposalSkills ? editedAction.updateProfileEvidenceProposalSkills : [];\n }\n\n let updatedProposedSkills = 0;\n\n if (showPopUpAsProposeAction && form.proposeCapability.value) {\n let selectedCapabilityNumber = form.proposeCapability.value == \"Competent\" ? 1 : form.proposeCapability.value == \"Proficient\" ? 0.5 : form.proposeCapability.value == \"Knowledge\" ? 0.25 : 0;\n\n selectedSkills\n .filter(\n (it) =>\n !it.removed &&\n ![...jobLorProfiles.map((it) => it.lorCode + it.level), ...jobSkillProfiles.map((it) => it.skillCode + it.level)].includes(it.skillCode + it.skillLevel) &&\n (!showPopUpAsPromoteAction || (showPopUpAsPromoteAction && !it.removed)) &&\n ((!showPopUpAsProposeAction && !showPopUpAsViewProposedAction) || ((showPopUpAsViewProposedAction || showPopUpAsProposeAction) && (it.skillType != \"Lor\" || !filterOutLoROnProposeAction)))\n )\n .forEach((skill) => {\n if (skill.skillType == \"Skill\") {\n const skillProfile = skillProfiles.find((it) => it.skillCode == skill.skillCode && it.level == skill.skillLevel && it.numericVal > 0);\n if (skillProfile) {\n if (selectedCapabilityNumber > skillProfile.numericVal) {\n updatedProposedSkills++;\n }\n } else {\n updatedProposedSkills++;\n }\n } else if (!filterOutLoROnProposeAction) {\n if (lorProfiles.find((it) => it.lorCode == skill.skillCode)) {\n const lorProfile = lorProfiles.filter((it) => it.lorCode == skill.skillCode).sort((a, b) => b.level - a.level)[0];\n if (lorProfile.level < skill.skillLevel) {\n updatedProposedSkills++;\n }\n }\n }\n });\n\n if (jobLorProfiles) {\n jobLorProfiles\n .filter(\n (it) =>\n (showHiddenSkills || (!showHiddenSkills && availableLorCodes.includes(it.lorCode))) &&\n selectedSkills.some((skill) => !skill.removed && skill.skillCode == it.lorCode && skill.skillLevel >= it.level) &&\n ((!showPopUpAsPromoteAction && !showPopUpAsProposeAction && !showPopUpAsViewProposedAction && !filterOutLoROnProposeAction) ||\n (showPopUpAsPromoteAction && !!selectedSkills.find((s) => s.skillCode == it.lorCode && s.skillLevel == it.level && !s.removed)) ||\n (!filterOutLoROnProposeAction && (showPopUpAsProposeAction || showPopUpAsViewProposedAction)) ||\n (filterOutLoROnProposeAction &&\n (showPopUpAsProposeAction || showPopUpAsViewProposedAction) &&\n !!selectedSkills.find((s) => s.skillCode == it.lorCode && s.skillLevel == it.level) &&\n !!updateProfileEvidenceProposalSkills.find((s) => s.code == it.lorCode && s.level == it.level)))\n )\n .forEach((jobLorProfile) => {\n if (showPopUpAsProposeAction && !filterOutLoROnProposeAction) {\n if (lorProfiles.find((it) => it.lorCode == jobLorProfile.lorCode)) {\n const lorProfile = lorProfiles.filter((it) => it.lorCode == jobLorProfile.lorCode).sort((a, b) => b.level - a.level)[0];\n if (lorProfile.level < jobLorProfile.level) {\n updatedProposedSkills++;\n }\n }\n }\n });\n }\n\n if (jobSkillProfiles) {\n jobSkillProfiles\n .filter(\n (it) =>\n (showHiddenSkills || (!showHiddenSkills && availableSkillCodes.includes(it.skillCode))) &&\n selectedSkills.some((skill) => !skill.removed && skill.skillCode == it.skillCode && skill.skillLevel == it.level) &&\n ((!showPopUpAsPromoteAction && !showPopUpAsProposeAction && !showPopUpAsViewProposedAction) ||\n (showPopUpAsPromoteAction && !!selectedSkills.find((s) => s.skillCode == it.skillCode && s.skillLevel == it.level && !s.removed)) ||\n (showPopUpAsProposeAction && !!selectedSkills.find((s) => s.skillCode == it.skillCode && s.skillLevel == it.level)) ||\n (showPopUpAsViewProposedAction && !!selectedSkills.find((s) => s.skillCode == it.skillCode && s.skillLevel == it.level) && updateProfileEvidenceProposalSkills.find((s) => s.code == it.skillCode && s.level == it.level)))\n )\n .forEach((jobSkillProfile) => {\n if (showPopUpAsProposeAction) {\n const skillProfile = skillProfiles.find((it) => it.skillCode == jobSkillProfile.skillCode && it.level == jobSkillProfile.level && it.numericVal > 0);\n if (skillProfile) {\n if (selectedCapabilityNumber > skillProfile.numericVal) {\n updatedProposedSkills++;\n }\n } else {\n updatedProposedSkills++;\n }\n }\n });\n }\n }\n\n return (\n \n \n {showPopUpAsPromoteAction ? (\n \n \n {this.state.actionPlanUpdating ? (\n \n
\n ) : (\n \n )}\n \n \n {!showPopUpAsPromoteAction && !showPopUpAsProposeAction && !showPopUpAsViewProposedAction && !isReadOnly && (\n \n \n )}\n {showPopUpAsPromoteAction && !showPopUpAsProposeAction && !showPopUpAsViewProposedAction && (\n \n !it.id || (it.id && !it.removed)).length > 0 || selectedOtherSkills.length > 0))}>\n \n \n \n \n )}\n {showPopUpAsProposeAction && !showPopUpAsPromoteAction && !showPopUpAsViewProposedAction && (\n \n 0 && (selectedSkills.filter((it) => !it.id || (it.id && !it.removed)).length > 0 || selectedOtherSkills.length > 0))}>\n \n \n \n \n )}\n \n \n \n \n );\n }\n\n handleSubmitPromote = () => {\n this.setState({ showActionPlanEdit: false, showActionPromotionConfirmationDialog: true });\n };\n\n handleCancelSubmitPromote = () => {\n this.setState({ showActionPlanEdit: true, showActionPromotionConfirmationDialog: false });\n };\n\n handleConfirmSubmitPromote = () => {\n const { editedAction } = this.state;\n\n this.setState({ actionPlanUpdating: true });\n this.props.onActionPlan.submitActionPromotion(editedAction.id, this.state.form.description.value).then(() => {\n if (!this.props.actionPlanUpdating) {\n if (this.props.actionPlanUpdatingError) {\n this.props.generateAlert(\"danger\", this.props.actionPlanUpdatingError.errData.Message);\n } else {\n this.setState({ showActionPromotionConfirmationDialog: false, selectedSkills: [] });\n this.props.generateAlert(\"success\", \"Action promotion request submitted\");\n }\n }\n this.setState({ actionPlanUpdating: this.props.actionPlanUpdating });\n });\n };\n\n renderActionPromotionConfirmation = () => {\n return (\n \n \n \n \n \n \n \n {\n this.handleConfirmSubmitPromote();\n }}\n disabled={this.state.actionPlanUpdating}\n >\n \n \n \n \n );\n };\n\n handleSubmitPropose = () => {\n this.setState({ showActionPlanEdit: false, showProposeActionConfirmationDialog: true });\n };\n\n handleCancelSubmitPropose = () => {\n this.setState({ showActionPlanEdit: true, showProposeActionConfirmationDialog: false });\n };\n\n handleConfirmSubmitPropose = () => {\n const { editedAction, selectedSkills, selectedOtherSkills, form } = this.state;\n const { lorProfiles, skillProfiles } = this.props;\n\n const updateProfileEvidenceProposalSkills = [...selectedSkills.filter((it) => (!filterOutLoROnProposeAction || (filterOutLoROnProposeAction && it.skillType != \"Lor\")) && !it.removed), ...selectedOtherSkills.filter((it) => !it.removed)].map((skill) => {\n let currentCapability;\n if (skill.skillType == \"Skill\") {\n const skillProfile = skillProfiles.find((it) => it.skillCode == skill.skillCode && it.level == skill.skillLevel && it.numericVal > 0);\n if (skillProfile) {\n currentCapability = skillProfile.stringVal == \"M\" ? \"Competent\" : skillProfile.stringVal == \"P\" ? \"Proficient\" : skillProfile.stringVal == \"NA\" ? \"Knowledge\" : \"Missing\";\n } else {\n currentCapability = \"Missing\";\n }\n } else {\n if (lorProfiles.find((it) => it.lorCode == skill.skillCode)) {\n const lorProfile = lorProfiles.filter((it) => it.lorCode == skill.skillCode).sort((a, b) => b.level - a.level)[0];\n if (lorProfile.level >= skill.skillLevel) {\n currentCapability = \"Competent\";\n } else {\n currentCapability = \"Missing\";\n }\n }\n }\n\n return {\n name: skill.skillName,\n code: skill.skillCode,\n level: skill.skillLevel,\n type: skill.skillType,\n capability: form.proposeCapability.value,\n currentCapability: currentCapability,\n };\n });\n\n this.setState({ actionPlanUpdating: true });\n this.props.onActionPlan.submitProposeAction(editedAction.id, this.props.managedPeople && this.props.managedPeople.personB.email, updateProfileEvidenceProposalSkills).then(() => {\n if (!this.props.actionPlanUpdating) {\n if (this.props.actionPlanUpdatingError) {\n this.props.generateAlert(\"danger\", this.props.actionPlanUpdatingError.errData.Message);\n } else {\n this.setState({ showProposeActionConfirmationDialog: false, selectedSkills: [], proposeActionMode: false });\n this.props.generateAlert(\"success\", \"Update profile and evidence from action proposal submitted\");\n }\n }\n this.setState({ actionPlanUpdating: this.props.actionPlanUpdating });\n });\n };\n\n renderProposeActionConfirmation = () => {\n return (\n \n \n \n \n \n \n \n {\n this.handleConfirmSubmitPropose();\n }}\n disabled={this.state.actionPlanUpdating}\n >\n \n \n \n \n );\n };\n\n handleChangeSortOption(event) {\n const { name, value } = event.target;\n const { optionSorts } = this.state;\n optionSorts.forEach((option) => {\n if (option.field == value) {\n option.selected = true;\n } else {\n option.selected = false;\n }\n });\n\n this.setState({\n selectedSortOption: value,\n optionSorts,\n });\n }\n\n handleChangeSortDirection() {\n const { selectedSortOptionDirection } = this.state;\n\n this.setState({\n selectedSortOptionDirection: selectedSortOptionDirection == \"asc\" ? \"desc\" : \"asc\",\n });\n }\n\n sortActions = (actions) => {\n const { selectedSortOption, selectedSortOptionDirection } = this.state;\n\n if (selectedSortOption == \"targetCompletionOn\") {\n if (selectedSortOptionDirection == \"asc\") {\n actions = actions.sort((a, b) => new Date(a.targetCompletionOn) - new Date(b.targetCompletionOn));\n } else {\n actions = actions.sort((b, a) => new Date(a.targetCompletionOn) - new Date(b.targetCompletionOn));\n }\n } else {\n actions = _.orderBy(actions, selectedSortOption, selectedSortOptionDirection);\n }\n\n return actions;\n };\n\n handleUpdateActionHidden = (action) => {\n this.setState({ actionPlanUpdating: true });\n if (action.hidden) {\n this.props.onActionPlan.updateUnHideAction(action.id).then(() => {\n if (!this.props.actionPlanUpdating) {\n if (this.props.actionPlanUpdatingError) {\n this.props.generateAlert(\"danger\", this.props.actionPlanUpdatingError.errData.Message);\n } else {\n this.props.handleActionPlanHidden(this.props.updatedAction);\n }\n }\n this.setState({ actionPlanUpdating: this.props.actionPlanUpdating });\n });\n } else {\n this.props.onActionPlan.updateHideAction(action.id).then(() => {\n if (!this.props.actionPlanUpdating) {\n if (this.props.actionPlanUpdatingError) {\n this.props.generateAlert(\"danger\", this.props.actionPlanUpdatingError.errData.Message);\n } else {\n this.props.handleActionPlanHidden(this.props.updatedAction);\n }\n }\n this.setState({ actionPlanUpdating: this.props.actionPlanUpdating });\n });\n }\n };\n\n renderTodos = (actions, showDone, showHidden, proposeMode, viewProposedMode) => {\n let isAdmin = false;\n\n const authMode = this.props.authMode;\n let authModes = authMode.split(\",\").map((item) => item.trim());\n if (authModes.filter((it) => it != \"Admin\").length == 0) {\n isAdmin = true;\n }\n\n const rows = actions\n .filter((it) =>\n proposeMode\n ? it.status.toLowerCase().includes(\"done\") && !it.updateProfileEvidenceProposed\n : viewProposedMode\n ? it.status.toLowerCase().includes(\"done\") && it.updateProfileEvidenceProposed && it.updateProfileEvidenceProposalStatus == \"Requested\"\n : (showDone ? it.id : !it.status.toLowerCase().includes(\"done\") && it.status != \"IssueBadge\") && (showHidden ? it.id : !it.hidden)\n )\n .map((action, index) => {\n const row = action;\n const skills = action.skills;\n const updateProfileEvidenceProposalSkills = action.updateProfileEvidenceProposalSkills;\n\n return (\n \n \n \n \n \n \n {row.link ? (\n \n \n {`${it.code}-${it.level}`}\n {index < updateProfileEvidenceProposalSkills.length - 1 && \",\"}\n {\" \"}\n \n );\n })\n : row.description\n : skills && skills.length > 0\n ? skills.map((it, index) => {\n return (\n \n \n {`${it.code}-${it.level}`}\n {index < skills.length - 1 && \",\"}\n {\" \"}\n \n );\n })\n : row.description}\n
\n \n
\n \n \n {row.actionType} \n \n \n \n \n {row.duration || row.durationHours ? (\n \n {row.duration ? {this.parameterizedString(this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanDuration\", \"{s1} Days\"), row.duration)}
: \"\"}\n {row.durationHours ? {this.parameterizedString(this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanDurationHours\", \"{s1} Hours\"), row.durationHours)}
: \"\"}\n \n ) : (\n \"-\"\n )}\n \n \n \n \n \n \n {new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(row.createdOn))}\n \n \n )}\n {row.targetCompletionOn && (\n \n \n \n \n {new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(row.targetCompletionOn))}\n \n \n )}\n \n \n this.openActionPlanEditModal(row, false, true, false)}>\n \n \n \n \n ) : viewProposedMode ? (\n \n this.openActionPlanEditModal(row, false, false, true)}>\n \n \n \n \n ) : (\n \n {isAdmin || row.status == \"IssueBadge\" ? (\n \n this.openActionPlanEditModal(row, false, false, false)}>\n \n \n \n \n ) : (\n \n this.openActionPlanEditModal(row, false, false, false)}>\n \n \n \n \n )}\n\n {!this.props.managedPeople && (\n \n this.handleUpdateActionHidden(row)}>\n {row.hidden ? \n \n {row.hidden ? (\n \n \n )}\n {!isAdmin && this.props.containerConfig && this.props.containerConfig.enablePromoteAction == true && !row.interventionId && (\n \n this.openActionPlanEditModal(row, true, false, false)}\n disabled={row.promoted ? true : false}\n >\n \n \n \n )}\n \n )}\n \n
\n \n
\n \n \n \n );\n });\n\n return rows;\n };\n\n handleChangeFilterDone = () => {\n const showDone = this.state.showDone;\n this.setState({ showDone: !showDone });\n };\n\n handleChangeFilterHidden = () => {\n const showHidden = this.state.showHidden;\n this.setState({ showHidden: !showHidden });\n };\n\n handleStartProposeActionMode = () => {\n this.setState({ proposeActionMode: true });\n this.props.handleProposeActionModeStarted(true);\n };\n\n togleProposeActionMode = () => {\n const proposeActionMode = this.state.proposeActionMode;\n this.setState({ proposeActionMode: !proposeActionMode });\n this.props.handleProposeActionModeStarted(!proposeActionMode);\n };\n\n handleStartViewProposedActionMode = () => {\n this.setState({ viewProposedActionMode: true });\n };\n\n togleViewProposedActionMode = () => {\n const viewProposedActionMode = this.state.viewProposedActionMode;\n this.setState({ viewProposedActionMode: !viewProposedActionMode });\n };\n\n render() {\n let isAdmin = false;\n\n const authMode = this.props.authMode;\n let authModes = authMode.split(\",\").map((item) => item.trim());\n if (authModes.filter((it) => it != \"Admin\").length == 0) {\n isAdmin = true;\n }\n\n const optionSorts = [\n {\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanSortByCompletionDate\", \"Target Completion Date\"),\n field: \"targetCompletionOn\",\n selected: true,\n },\n {\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanSortByCreatedDate\", \"Created Date\"),\n field: \"createdOn\",\n },\n {\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanSortByStatus\", \"Status\"),\n field: \"status\",\n },\n {\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanSortByType\", \"Type\"),\n field: \"actionType\",\n },\n ];\n\n let { actions } = this.props;\n actions = this.sortActions(actions);\n\n const { showDone, showHidden } = this.state;\n\n if (this.props.loadingAction) return
;\n return (\n \n {this.modalActionPlanDetail()}\n {this.renderEditActionPlan()}\n {this.renderActionPromotionConfirmation()}\n {this.renderProposeActionConfirmation()}\n {this.renderIssueBadgeConfirmation()}\n {this.renderRejectBadgeConfirmation()}\n
\n \n \n \n \n {showDone ? (\n \n \n {showDone ? (\n \n \n )}\n {actions.filter((it) => it.hidden).length > 0 && (\n \n \n {showHidden ? \n \n {showHidden ? (\n \n \n )}\n {this.props.managedPeople && this.props.actionPlanUpdated && (\n \n \n \n \n )}\n {this.props.managedPeople &&\n !isAdmin &&\n this.props.containerConfig &&\n this.props.containerConfig.allowUpdateProfileAndEvidenceFromAction &&\n actions.filter((it) => it.status.toLowerCase().includes(\"done\") && it.updateProfileEvidenceProposed == true && it.updateProfileEvidenceProposalStatus == \"Requested\").length == 0 && (\n \n \n \n {this.state.proposeActionMode && (\n \n \n )}\n \n )}\n {this.props.managedPeople &&\n this.props.containerConfig &&\n this.props.containerConfig.allowUpdateProfileAndEvidenceFromAction &&\n actions.filter((it) => it.status.toLowerCase().includes(\"done\") && it.updateProfileEvidenceProposed == true && it.updateProfileEvidenceProposalStatus == \"Requested\").length > 0 && (\n \n \n \n {this.state.viewProposedActionMode && (\n \n \n )}\n \n )}\n \n \n \n {optionSort.label}\n \n ))}\n \n \n this.handleChangeSortDirection()} className=\"btn btn-primary\">\n \n \n
\n \n
\n \n
\n \n {this.renderTodos(actions, showDone, showHidden, this.state.proposeActionMode, this.state.viewProposedActionMode)}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n actionPlanUpdating: state.actionPlan.actionPlanUpdating,\n actionPlanUpdatingError: state.actionPlan.actionPlanUpdatingError,\n updatedAction: state.actionPlan.addedAction,\n\n managedPeople: state.auth.managedPeople,\n authMode: state.auth.authMode,\n contentTranslations: state.content.contentTranslations,\n containerConfig: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onActionPlan: bindActionCreators(actionPlanActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Todo);\n","import * as actionPlanActions from \"../../store/actions/actionPlanAction\";\nimport * as authActions from \"../../store/actions/authAction\";\nimport * as categoryActions from \"../../store/actions/categoryAction\";\nimport * as companyActions from \"../../store/actions/companyAction\";\nimport * as configActions from \"../../store/actions/configAction\";\nimport * as contentActions from \"../../store/actions/contentAction\";\nimport * as jobActions from \"../../store/actions/jobAction\";\nimport * as lorActions from \"../../store/actions/lorAction\";\nimport * as personActions from \"../../store/actions/personAction\";\nimport * as skillProfileActions from \"../../store/actions/skillProfileAction\";\nimport { dismisAlert, generateAlert } from \"../../utils/alertUtils\";\nimport { parameterizedString } from \"../../utils/stringUtils\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport StepProfile from \"../profile/StepProfile\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport ManageActionPlan from \"./ManageActionPlan\";\nimport Todo from \"./Todo\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, Container, Form, FormGroup, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nconst step1 = process.env.REACT_APP_ACTIONPLAN_STEP_1;\nconst step2 = process.env.REACT_APP_ACTIONPLAN_STEP_2;\nconst step3 = process.env.REACT_APP_ACTIONPLAN_STEP_3;\n\nconst step1Hover = process.env.REACT_APP_ACTIONPLAN_STEP_1_HOVER;\nconst step2Hover = process.env.REACT_APP_ACTIONPLAN_STEP_2_HOVER;\nconst step3Hover = process.env.REACT_APP_ACTIONPLAN_STEP_3_HOVER;\n\nclass ActionPlan extends React.Component {\n static displayName = ActionPlan.name;\n\n constructor(props) {\n super(props);\n this.state = {\n stepActionClicked: false,\n stepData: {\n step1: {\n desc: step1,\n hover: step1Hover,\n },\n step2: {\n desc: step2,\n hover: step2Hover,\n },\n step3: {\n desc: step3,\n hover: step3Hover,\n },\n currentStep: null,\n },\n userResponsibilityData: null,\n skillActionPlanData: null,\n actionPlanDetailData: null,\n optionsProfile: [],\n categories: [],\n lors: [],\n extraFrameworkCapabilities: [],\n lorProfiles: [],\n skillProfiles: [],\n optionsJob: [],\n selectedprofileType: null,\n jobLorProfiles: [],\n jobSkillProfiles: [],\n selectedJob: null,\n loading: false,\n contentLoading: true,\n\n actionLoading: true,\n actions: [],\n optionsActionSkills: this.props.actionSkills,\n optionsActionTypes: this.props.actionTypes,\n alerts: [],\n providers: [],\n\n loadingAdd: true,\n loadingProfile: true,\n\n actionPlanUpdated: false,\n listRelationshipType: [\"Line Manager\", \"Mentor\"],\n showHiddenSkills: false,\n proposeActionStarted: false,\n };\n\n this.initData = this.initData.bind(this);\n this.handleActionPlanAdded = this.handleActionPlanAdded.bind(this);\n this.handleActionPlanUpdated = this.handleActionPlanUpdated.bind(this);\n this.handleActionPlanDeleted = this.handleActionPlanDeleted.bind(this);\n\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n this.parameterizedString = parameterizedString.bind(this);\n }\n\n componentDidMount() {\n if (this.props.language) {\n this.props.onContent.getContentTranslations(this.props.language.id, \"SfiaAll-Menu-SfiaProfileMenu-SfiaPlan-SfiaPlanTooltip-Lors-Skills\").then(() => {\n this.setState({ contentLoading: this.props.contentLoading });\n\n const stepData = {\n step1: {\n desc: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanStep1Description\", step1),\n hover: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanStep1Hover\", step1Hover),\n },\n step2: {\n desc: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanStep2Description\", step2),\n hover: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanStep2Hover\", step2Hover),\n },\n step3: {\n desc: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanStep3Description\", step3),\n hover: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanStep3Hover\", step3Hover),\n },\n currentStep: null,\n };\n\n this.setState({ stepData });\n\n this.props.onAuth.authCheckState().then(() => {\n if (!this.props.currAssessment) {\n this.props.onConfig.getCurrAssessment().then(() => {});\n }\n\n if (window.location.pathname.includes(\"/Manage\")) {\n const query = new URLSearchParams(this.props.location.search);\n const email = query.get(\"email\");\n\n if (!this.props.managedPeople || !(this.props.managedPeople && this.props.managedPeople.personB.email.toLowerCase() == email.toLowerCase())) {\n this.props.onPerson.getPersonMyPeopleByEmail(email).then(() => {\n if (!this.props.personLoading && this.props.personManagedPeople) {\n this.props.onAuth.myPeopleSetManagedRelationship(this.props.personManagedPeople).then(() => {\n if (!this.props.personLoading && this.props.personManagedPeople) {\n this.initData();\n }\n });\n }\n });\n } else {\n this.initData();\n }\n } else {\n this.initData();\n }\n });\n });\n } else {\n this.props.onAuth.authCheckState().then(() => {\n if (window.location.pathname.includes(\"/Manage\")) {\n const query = new URLSearchParams(this.props.location.search);\n const email = query.get(\"email\");\n\n if (!this.props.managedPeople || !(this.props.managedPeople && this.props.managedPeople.personB.email.toLowerCase() == email.toLowerCase())) {\n this.props.onPerson.getPersonMyPeopleByEmail(email).then(() => {\n if (!this.props.personLoading && this.props.personManagedPeople) {\n this.props.onAuth.myPeopleSetManagedRelationship(this.props.personManagedPeople).then(() => {\n if (!this.props.personLoading && this.props.personManagedPeople) {\n this.initData();\n }\n });\n }\n });\n } else {\n this.initData();\n }\n } else {\n this.initData();\n }\n });\n }\n }\n\n initData() {\n this.setState({ loading: true });\n Promise.resolve(this.props.managedPeople ? this.props.onSkillProfile.getManagedPeopleProfileTypes(this.props.managedPeople.personB.email) : this.props.onSkillProfile.getMyProfileTypes()).then(() => {\n if (this.props.errorProfile) {\n this.setState({ loading: false });\n } else {\n let profileType = null;\n\n if (this.props.profileTypes.length > 0) {\n profileType = this.props.profileTypes[0];\n\n this.setState({\n optionsProfile: this.props.profileTypes.map((it) => {\n return {\n value: it,\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", it.replace(\" \", \"\"), it),\n };\n }),\n selectedprofileType: this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", profileType.replace(\" \", \"\"), profileType),\n });\n }\n\n this.props.onPerson.getPersonSkillCoins().then(() => {});\n\n Promise.all([\n this.props.managedPeople ? this.props.onJob.getManagedPeopleJobMatches(this.props.managedPeople.personB.email) : this.props.onJob.getMyJobMatches(),\n this.props.onCategory.getExtraFrameworkCapabilities(),\n this.props.onCategory.getCategories(),\n this.props.onLor.getLors(),\n ]).then(() => {\n if (!this.props.loading && !this.props.categoryLoading) {\n let optionsJob = [];\n let selectedJob = null;\n\n const jobMatches = this.props.jobMatches;\n const currentJob = jobMatches.find((it) => it.jobType === \"Current\");\n const futureJob = jobMatches.find((it) => it.jobType === \"Future\");\n\n if (currentJob) {\n optionsJob.push({\n value: currentJob.jobType + \" - \" + currentJob.jobTitle,\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", currentJob.jobType, currentJob.jobType) + \" - \" + currentJob.jobTitle,\n type: currentJob.jobType,\n id: currentJob.jobId,\n });\n }\n\n if (futureJob) {\n optionsJob.push({\n value: futureJob.jobType + \" - \" + futureJob.jobTitle,\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", futureJob.jobType, futureJob.jobType) + \" - \" + futureJob.jobTitle,\n type: futureJob.jobType,\n id: futureJob.jobId,\n });\n }\n\n if (optionsJob.length > 0) {\n selectedJob = optionsJob[0];\n }\n\n this.setState({\n optionsJob,\n jobMatches,\n currentJob,\n futureJob,\n selectedJob,\n categories: this.props.categories,\n lors: this.props.lors,\n extraFrameworkCapabilities: this.props.extraFrameworkCapabilities,\n });\n\n Promise.all([\n this.props.managedPeople ? this.props.onJob.getManagedPeopleJobLorProfiles(this.props.managedPeople.personB.email) : this.props.onJob.getJobLorProfiles(null),\n this.props.managedPeople ? this.props.onJob.getManagedPeopleJobSkillProfiles(this.props.managedPeople.personB.email) : this.props.onJob.getJobSkillProfiles(null),\n this.props.managedPeople ? this.props.onSkillProfile.getManagedPeopleLorProfile(this.props.managedPeople.personB.email) : this.props.onSkillProfile.getMyLorProfile(null, null, null),\n this.props.managedPeople ? this.props.onSkillProfile.getManagedPeopleSkillProfile(this.props.managedPeople.personB.email) : this.props.onSkillProfile.getMySkillProfile(null, null, null),\n ]).then(() => {\n if (!this.props.jobLoading && !this.props.loadingProfile && !this.props.errorProfile && !this.props.loadingLorProfile && !this.props.errorLorProfile) {\n this.setState({\n loadingProfile: this.props.jobLoading || this.props.loadingProfile || this.props.loadingLorProfile,\n jobLorProfiles: this.props.jobLorProfiles,\n jobSkillProfiles: this.props.jobSkillProfiles.filter((it) => it.stringVal != \"N\"),\n lorProfiles: this.props.lorProfiles,\n skillProfiles: this.props.skillProfiles,\n });\n }\n });\n }\n\n this.setState({\n loading: this.props.loading || this.props.categoryLoading,\n });\n });\n\n Promise.all([this.props.managedPeople ? this.props.onActionPlan.getManagedPeopleActions(this.props.managedPeople.personB.email) : this.props.onActionPlan.getMyActions()]).then(() => {\n this.setState({\n actions: this.props.actions,\n actionLoading: this.props.actionPlanloading,\n });\n });\n\n Promise.all([this.props.onActionPlan.getActionTypes(), this.props.onActionPlan.getActionSkills(), this.props.onCompany.getSelectedProviderCompanies()]).then(() => {\n if (!this.props.companyLoading && !this.props.actionPlanloading) {\n this.setState({\n optionsActionTypes: this.props.actionTypes,\n optionsActionSkills: this.props.actionSkills,\n providers: this.props.selectedProviders,\n });\n }\n\n this.setState({\n loadingAdd: this.props.companyLoading || this.props.actionPlanloading,\n });\n });\n }\n });\n }\n\n handleActionPlanAdded(addedAction) {\n const { actions, categories } = this.state;\n\n addedAction.skills.forEach((actionSkill) => {\n const category = categories.find((it) => it.subCategories.some((subCategory) => subCategory.skills.some((skill) => skill.name == actionSkill.name)));\n\n if (category) {\n const level = category.subCategories\n .find((subCategory) => subCategory.skills.some((skill) => skill.name == actionSkill.name))\n .skills.find((skill) => skill.name == actionSkill.name && skill.skillsCode == actionSkill.code)\n .levels.find((it) => it.level == actionSkill.level);\n\n if (level) {\n level.action = addedAction;\n }\n }\n });\n\n this.setState({ actionPlanUpdated: true, actions: [...actions, addedAction] }, () => {\n this.generateAlert(\"success\", \"Action plan added\");\n });\n }\n\n handleActionPlanUpdated(updatedAction) {\n const { actions, categories } = this.state;\n\n const editedAction = actions.find((it) => it.id == updatedAction.id);\n\n if (editedAction) {\n const updatedActionIndex = actions.indexOf(editedAction);\n const removedActionSkills = editedAction.skills.filter((it) => !updatedAction.skills.some((skill) => it.code == skill.code && it.level == skill.level));\n\n removedActionSkills.forEach((removedActionSkill) => {\n const category = categories.find((it) => it.subCategories.some((subCategory) => subCategory.skills.some((skill) => skill.name == removedActionSkill.name)));\n\n if (category) {\n const level = category.subCategories\n .find((subCategory) => subCategory.skills.some((skill) => skill.name == removedActionSkill.name))\n .skills.find((skill) => skill.name == removedActionSkill.name && skill.skillsCode == removedActionSkill.code)\n .levels.find((it) => it.level == removedActionSkill.level && it.action);\n\n if (level) {\n level.action = null;\n }\n }\n });\n\n updatedAction.skills.forEach((actionSkill) => {\n const category = categories.find((it) => it.subCategories.some((subCategory) => subCategory.skills.some((skill) => skill.name == actionSkill.name)));\n\n if (category) {\n const level = category.subCategories\n .find((subCategory) => subCategory.skills.some((skill) => skill.name == actionSkill.name))\n .skills.find((skill) => skill.name == actionSkill.name && skill.skillsCode == actionSkill.code)\n .levels.find((it) => it.level == actionSkill.level);\n\n if (level) {\n level.action = updatedAction;\n }\n }\n });\n\n actions[updatedActionIndex] = updatedAction;\n\n this.setState({\n actionPlanUpdated: true,\n actions: [...actions],\n categories: [...categories],\n });\n }\n }\n\n handleActionPlanHidden = (updatedAction) => {\n const { actions } = this.state;\n\n const editedAction = actions.find((it) => it.id == updatedAction.id);\n\n if (editedAction) {\n const updatedActionIndex = actions.indexOf(editedAction);\n actions[updatedActionIndex] = updatedAction;\n\n this.setState({\n actions: [...actions],\n });\n }\n };\n\n handleActionPlanDeleted(id) {\n const { actions, jobLorProfiles, jobSkillProfiles } = this.state;\n const deletedAction = actions.find((it) => it.id == id);\n\n if (deletedAction) {\n deletedAction.skills.forEach((actionSkill) => {\n jobLorProfiles.forEach((it) => {\n if (it.actioned && it.lorCode == actionSkill.code) {\n it.actioned = null;\n }\n });\n\n jobSkillProfiles.forEach((it) => {\n if (it.actioned && it.skillCode == actionSkill.code && it.level == actionSkill.level) {\n it.actioned = null;\n }\n });\n });\n\n this.setState(\n {\n actionPlanUpdated: true,\n jobLorProfiles,\n jobSkillProfiles,\n actions: [...actions.filter((it) => it.id != id)],\n },\n () => {\n this.generateAlert(\"success\", \"Action plan deleted\");\n }\n );\n }\n }\n\n handleChangeProfileType = (value) => {\n this.setState({\n loadingProfile: true,\n selectedprofileType: this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", value.replace(\" \", \"\"), value),\n });\n\n Promise.all([\n this.props.managedPeople ? this.props.onSkillProfile.getManagedPeopleLorProfile(this.props.managedPeople.personB.email, null, null, value) : this.props.onSkillProfile.getMyLorProfile(null, null, value),\n this.props.managedPeople ? this.props.onSkillProfile.getManagedPeopleSkillProfile(this.props.managedPeople.personB.email, null, null, value) : this.props.onSkillProfile.getMySkillProfile(null, null, value),\n ]).then(() => {\n this.setState({\n loadingProfile: this.props.loadingProfile || this.props.loadingLorProfile,\n lorProfiles: this.props.lorProfiles,\n skillProfiles: this.props.skillProfiles,\n });\n });\n };\n\n handleChangeJob = (job) => {\n this.setState({ selectedJob: job });\n };\n\n step1Clicked = () => {\n this.setState({ stepActionClicked: new Date() });\n };\n\n step2Clicked = () => {\n this.setState({ stepActionClicked: new Date() });\n };\n\n step3Clicked = () => {};\n\n setActionPlanUpdated = (actionPlanUpdated) => {\n this.setState({ actionPlanUpdated: actionPlanUpdated });\n };\n\n handleSendUpdatedActionPlanNotification = () => {\n this.setState({ showActionPlanUpdatedNotificationConfirmation: true });\n };\n\n handleConfirmSendActionPlanUpdatedNotification = () => {\n this.setState({ actionPlanUpdating: true });\n Promise.resolve(this.props.onActionPlan.sendUpdatedActionPlanNotification(this.props.managedPeople.personB.email)).then(() => {\n if (!this.props.actionPlanUpdating) {\n if (this.props.actionPlanUpdatingError) {\n this.generateAlert(\"danger\", this.props.actionPlanUpdatingError);\n } else {\n this.generateAlert(\"success\", \"Notification email sent\");\n this.setState({\n actionPlanUpdated: false,\n showActionPlanUpdatedNotificationConfirmation: false,\n });\n }\n }\n this.setState({ actionPlanUpdating: this.props.actionPlanUpdating });\n });\n };\n\n toggleSendActionPlanUpdatedNotificationConfirmation = () => {\n const showActionPlanUpdatedNotificationConfirmation = this.state.showActionPlanUpdatedNotificationConfirmation;\n\n this.setState({\n showActionPlanUpdatedNotificationConfirmation: !showActionPlanUpdatedNotificationConfirmation,\n });\n };\n\n renderSendActionPlanUpdatedNotificationConfirmation = () => {\n return (\n \n Send Notification Confirmation \n \n \n \n \n {\n this.handleConfirmSendActionPlanUpdatedNotification();\n }}\n disabled={this.props.actionPlanUpdating}\n >\n OK\n \n \n Close\n \n \n \n );\n };\n\n handleChageShowHiddenSkills = (showHiddenSkills) => {\n this.setState({ showHiddenSkills: showHiddenSkills });\n };\n\n handleProposeActionModeStarted = (proposeActionStarted) => {\n this.setState({ showHiddenSkills: false, proposeActionStarted: proposeActionStarted });\n };\n\n render() {\n let isAdmin = false;\n\n const authMode = this.props.authMode;\n let authModes = authMode.split(\",\").map((item) => item.trim());\n if (authModes.filter((it) => it != \"Admin\").length == 0) {\n isAdmin = true;\n }\n\n let { jobLorProfiles, jobSkillProfiles, selectedJob } = this.state;\n jobLorProfiles = jobLorProfiles && selectedJob ? jobLorProfiles.filter((x) => x.jobId == selectedJob.id) : [];\n jobSkillProfiles = jobSkillProfiles && selectedJob ? jobSkillProfiles.filter((x) => x.jobId == selectedJob.id) : [];\n\n const { managedPeople } = this.props;\n\n return (\n \n {this.state.loading || this.state.contentLoading ? (\n \n
\n ) : (\n \n {(!managedPeople || (managedPeople && isAdmin) || (managedPeople && this.state.listRelationshipType.some((item) => item.toLocaleLowerCase().trim() === managedPeople.relationshipType?.toLocaleLowerCase().trim()))) && (\n \n
\n
\n {managedPeople\n ? this.parameterizedString(this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanManagedTitle\", \"Action Plan for {s1}\"), `${managedPeople.personB.firstName} ${managedPeople.personB.lastName}`)\n : this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanTitle\", \"Your Action Plan\")}\n
\n
\n {this.props.containerConfig && this.props.containerConfig.enablePromoteAction == true && this.props.skillCoins && this.props.skillCoins.length > 0 && this.props.skillCoins.find((it) => it.type == \"Actions Promoted and Accepted\") && (\n
\n
\n {this.props.skillCoins.find((it) => it.type == \"Actions Promoted and Accepted\").coins}\n \n
\n \n
\n {this.props.skillCoins.find((it) => it.type == \"Promoted Action Usage\").coins}\n \n \n )}\n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.job.jobMatchesLoading,\n error: state.job.error,\n jobMatches: state.job.jobMatches,\n actionPlanloading: state.actionPlan.loading,\n actionPlanerror: state.actionPlan.error,\n actionPlanUpdating: state.actionPlan.actionPlanUpdating,\n actionPlanUpdatingError: state.actionPlan.actionPlanUpdatingError,\n actions: state.actionPlan.actions,\n actionTypes: state.actionPlan.actionTypes,\n actionSkills: state.actionPlan.actionSkills,\n\n jobLoading: state.job.loading,\n jobLorProfiles: state.job.jobLorProfiles,\n jobSkillProfiles: state.job.jobSkillProfiles,\n\n loadingProfile: state.skillProfile.loading,\n errorProfile: state.skillProfile.error,\n skillProfiles: state.skillProfile.skillProfiles,\n\n profileTypes: state.skillProfile.profileTypes,\n\n loadingLorProfile: state.skillProfile.lorLoading,\n errorLorProfile: state.skillProfile.lorError,\n lorProfiles: state.skillProfile.lorProfiles,\n\n categories: state.category.categories,\n extraFrameworkCapabilities: state.category.extraFrameworkCapabilities,\n categoryLoading: state.category.loading,\n categoryError: state.category.error,\n\n selectedProviders: state.company.selectedProviders,\n companyLoading: state.company.loading,\n companyError: state.company.error,\n\n lorLoading: state.lor.loading,\n lorError: state.lor.error,\n lors: state.lor.lors,\n\n personLoading: state.person.loading,\n personManagedPeople: state.person.managedPeople,\n managedPeople: state.auth.managedPeople,\n authMode: state.auth.authMode,\n skillCoins: state.person.skillCoins,\n\n language: state.language.language,\n contentTranslations: state.content.contentTranslations,\n contentLoading: state.content.loading,\n contentError: state.content.error,\n currAssessment: state.config.currAssessment,\n containerConfig: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onSkillProfile: bindActionCreators(skillProfileActions, dispatch),\n onAuth: bindActionCreators(authActions, dispatch),\n onJob: bindActionCreators(jobActions, dispatch),\n onActionPlan: bindActionCreators(actionPlanActions, dispatch),\n onCategory: bindActionCreators(categoryActions, dispatch),\n onCompany: bindActionCreators(companyActions, dispatch),\n onLor: bindActionCreators(lorActions, dispatch),\n onPerson: bindActionCreators(personActions, dispatch),\n onContent: bindActionCreators(contentActions, dispatch),\n onConfig: bindActionCreators(configActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ActionPlan);\n","import ErrorHandler from \"./../errorResponseHandler\";\nimport Instance from \"./AxiosInstance\";\n\nexport const axios = Instance.apiInstance();\n\nclass BadgeRequestAPI {\n static getMyLatestBadgeRequest() {\n return axios\n .get(`/badgerequests/mylatestbadgerequest`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static submitBadgeRequest(badgeRequest) {\n return axios\n .post(`/badgerequests`, badgeRequest)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static createBadgeLinkRequest(badgeRequest) {\n return axios\n .post(`/badgerequests/createwalletaccess`, badgeRequest)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n static getBadgeWallet(id) {\n return axios\n .get(`/badgerequests/badgewallet/${id}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n\n static getBadgeWalletLink() {\n return axios\n .get(`/badgerequests/badgewalletlink`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n}\n\nexport default BadgeRequestAPI;\n","export const lightenColor = (color, amount) => {\n // Parse the input color string into RGB components\n let r = parseInt(color.substr(1,2), 16);\n let g = parseInt(color.substr(3,2), 16);\n let b = parseInt(color.substr(5,2), 16);\n\n // Calculate the lightened RGB values\n r = Math.round(Math.min(r + amount, 255));\n g = Math.round(Math.min(g + amount, 255));\n b = Math.round(Math.min(b + amount, 255));\n\n // Convert the RGB values back to a hex color string\n let hex = ((r << 16) | (g << 8) | b).toString(16);\n return '#' + ('000000' + hex).slice(-6);\n}","import React from \"react\";\n\n\nconst borderWidth = 15;\nconst styles = {\n badgeContentContainer: {},\n skillAvatar: {\n borderRadius: \"20px 100px 100px 100px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n tmpAvatar: {\n width: \"90px\",\n height: \"90px\",\n borderRadius: \"100px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n};\n\nconst BadgeAvatar = ({ imgSource, bgColor, size = 100 }) => {\n return (\n \n \n
\n onClick?.(data)}\n >\n \n {title}\n \n \n );\n};\n\nexport default Badge;\n","import Badge from \"./Badge\";\nimport React from \"react\";\n\nconst styles = {\n listContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n gap: \"30px\",\n },\n sectionTitle: {\n fontFamily: \"IBMPlexSans\",\n marginBottom: \"20px\"\n }\n};\n\nconst BadgesList = ({\n sectionTitle,\n sectionDarkColor = \"#000000\",\n sectionLightColor = \"#000000\",\n badgesData,\n onClick\n}) => {\n return (\n \n
\n {sectionTitle}\n \n \n {badgesData.map((badge, index) => (\n
\n {\n onClick?.()}}>\n {icon &&
{icon}
}\n {children}\n
\n {contextHolder}\n \n
\n {`${email} `}\n {hasStatus && (\n <>\n \n -\n \n \n {isActive ? `Active ( until ${expireOn} )` : `Inactive`}\n \n \n )}\n \n \n \n {url}\n \n {((isActive && hasStatus) || !hasStatus) && (\n {\n openNotification(\"bottom\");\n navigator.clipboard.writeText(url);\n }}\n icon={ \n );\n};\n\nexport default LinkComponent;\n","import LinkComponent from \"../LinkComponent\";\nimport { Modal, Empty, Typography, Select } from \"antd\";\nimport React, { useMemo, useState } from \"react\";\nimport dayjs from \"dayjs\"\n\nconst styles = {\n emptyContainer: {\n height: \"40vh\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n infoContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n marginBottom: 20,\n },\n};\n\nconst { Text } = Typography;\n\nconst HistoryModal = ({ open, onOk, onCancel, history }) => {\n const [filter, setFilter] = useState('all')\n\n const dataToRender = useMemo(() => {\n if (Array.isArray(history)) {\n const rowData = history.reverse()\n switch (filter) {\n case \"all\":\n return rowData;\n case \"active\":\n return rowData.filter((item) => dayjs().isBefore(dayjs(item.expireOn)))\n case \"inactive\":\n return rowData.filter((item) => dayjs().isAfter(dayjs(item.expireOn)))\n default:\n return rowData;\n }\n }\n }, [filter, history]);\n return (\n \n {history && history.length !== 0 ? (\n <>\n \n {dataToRender.length} Link shared \n
\n {dataToRender?.map((item) => (\n No shared links yet!}\n style={styles.emptyContainer}\n />\n )}\n \n );\n};\n\nexport default HistoryModal;\n","export const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/;\n","import BadgeAPI from \"../../../common/api/service/BadgeRequestService\";\nimport { emailRegex } from \"../../../utils/consts\";\nimport {\n Modal,\n Input,\n Button,\n DatePicker,\n Space,\n Tag,\n notification,\n Form\n} from \"antd\";\nimport dayjs from \"dayjs\";\nimport React, { useState } from \"react\";\n\nconst styles = {\n container: {\n display: \"flex\",\n flexDirection: \"row\",\n flex: 1,\n alignItems: \"center\",\n justifyContent: \"center\",\n flexWrap: \"wrap\",\n },\n content: {\n textAlign: \"center\",\n marginTop: 25,\n marginBottom: 25,\n maxWidth: \"30ch\",\n color: \"#4F4F4F\",\n },\n text: {\n maxWidth: \"30ch\",\n color: \"#4F4F4F\",\n margin: \"0 0 5px 0\",\n fontWeight: 500,\n },\n inputArea: {\n margin: \"20px 50px 20px 0\",\n minWidth: \"280px\",\n },\n spacing: {\n marginTop: \"10px\",\n },\n inputContainer: {\n width: \"280px\",\n marginTop: 10,\n },\n illustrationContainer: {\n margin: \"30px 80px 30px 40px\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n};\n\nconst { TextArea, Search } = Input;\nconst maxNumberOfEmails = 5;\nconst ShareBadgesModal = ({\n isModalOpen,\n onOk,\n onCancel,\n setSuccessShareData,\n setSuccessSharedDataPreview,\n}) => {\n const [form] = Form.useForm()\n const expirationDate = Form.useWatch(\"expDate\", form)\n const noteForContact = Form.useWatch(\"note\", form)\n const [isLoading, setIsLoading] = useState(false);\n const [emails, setEmails] = useState([]);\n const [api, contextHolder] = notification.useNotification();\n\n const shareBadges = () => {\n setIsLoading(true);\n // form.submit()\n\n const respData = [];\n Promise.all(\n emails.map((email) =>\n BadgeAPI.createBadgeLinkRequest({\n email: email,\n expDate: expirationDate,\n remark: noteForContact,\n }).then((response) => respData.push(response))\n )\n ).then(() => {\n setSuccessShareData(respData);\n setSuccessSharedDataPreview({\n note: noteForContact,\n expiration: expirationDate?.format('YYYY-MM-DD HH:mm') + ` in (${expirationDate.diff(new Date(), \"days\")} days)`,\n });\n // setIsLoading(false);\n onCancel?.();\n }).finally(() => {\n setEmails([])\n form.resetFields()\n setIsLoading(false);\n });\n };\n\n const onSearch = (payload) => {\n if (form.getFieldError(\"email\").length < 1) {\n const emailString = payload.toLowerCase()\n if (emailRegex.test(emailString)) {\n if (emails.indexOf(emailString) < 0) {\n setEmails((oldEmails) => [...oldEmails, emailString]);\n form.setFieldValue(\"email\",null)\n } else {\n api.warning({\n message: \"Email already exist\",\n description: \"\",\n placement: \"bottom\",\n });\n }\n }\n }\n };\n\n const deleteEmail = (payload) => {\n setEmails((oldEmails) => oldEmails.filter((email) => email !== payload));\n form.setFieldValue(\"email\",null)\n form.validateField(\"email\")\n };\n\n const disabledDate = (current) => {\n // Can not select days before today and today\n return current && current < dayjs().endOf(\"day\").add(1);\n };\n\n\n return (\n \n {contextHolder}\n \n \n );\n};\n\nexport default ShareBadgesModal;\n","import BadgeAvatar from \"../BadgeAvatar\";\nimport { ArrowRightOutlined } from \"@ant-design/icons\";\nimport { Modal, Space, Tag } from \"antd\";\nimport React from \"react\";\n\nconst skillstxCapabilitiesPdf = `${process.env.PUBLIC_URL}/assets/documents/skillstx_capabilities.pdf`;\n\nconst styles = {\n contentContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n padding: \"10px\",\n },\n textContentSection: {\n padding: \"0 20px 0 40px\",\n display: \"flex\",\n flexDirection: \"column\",\n },\n title: {\n fontFamily: \"IBMPlexSans-Bold\",\n fontSize: \"18px\",\n marginBottom: \"15px\",\n },\n description: {},\n tagsTitle: {\n marginTop: \"20px\",\n fontFamily: \"IBMPlexSans-Bold\",\n },\n downloadLinkRef: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n lineHeight: 0,\n width: \"fit-content\",\n gap: \"5px\",\n cursor: \"pointer\",\n marginTop: \"20px\",\n },\n};\n\nconst SkillDetailsModal = ({\n isModalOpen,\n onOk,\n onCancel,\n okText = \"Close\",\n footer = null,\n data,\n}) => {\n return (\n \n \n
\n
\n
\n {`${\n data.skillName\n } - Level ${data.level}${\n data?.skillType ? ` - ${data?.skillType}` : \"\"\n }`}
\n {data.description}
\n Tags
\n \n SFIA V{data.sfiaVersion} \n {data.skillCode} \n Level {data.level} \n \n \n Learn more \n View Badge \n
\n
\n \n \n
\n \n Expiration date: \n {` ${previewData.expiration}`}\n \n \n \n Note: \n {` ${previewData.note ?? \"N/A\"}`}\n \n
\n \n \n {dataList?.map((item) => (\n \n ))}\n \n );\n};\n\nexport default SuccessShareDataModal;\n","import BadgeAPI from \"../../common/api/service/BadgeRequestService\";\nimport CategoryAPI from \"../../common/api/service/CategoryService\";\nimport EvidenceAPI from \"../../common/api/service/EvidenceService\";\nimport { lightenColor } from \"../../utils/functions\";\nimport { ContentWrapperLg } from \"../common/ContentWrapperLg\";\nimport BadgesList from \"./BadgesList\";\nimport HistoryModal from \"./Modal/HistoryModal\";\nimport ShareBadgesModal from \"./Modal/ShareBadgesModal\";\nimport SkillDetailsModal from \"./Modal/SkillDetailsModal\";\nimport SuccessShareDataModal from \"./Modal/SuccessShareDataModal\";\nimport { Empty, Switch, notification } from \"antd\";\nimport _ from \"lodash\";\nimport React, { useEffect, useMemo, useState } from \"react\";\n\nconst styles = {\n emptyContainer: {\n height: \"40vh\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n shareContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n padding: \"0 0 25px 0\",\n boxShadow: `0px 15px 10px -15px rgba(0, 0, 0, 0.1)`,\n },\n};\n\nconst createSkillBadgeImage = (skill, skill_code, skill_type, skill_level, badgeProvider) => {\n if (badgeProvider && badgeProvider == \"DSA\" ){\n return `${process.env.REACT_APP_AZURE_STORAGE_BADGE_DSA_IMAGE_BASE_URL}${skill_type} - ${skill.replaceAll(\"/\", \" \")} - Level ${skill_level}.png`;\n }else{\n return `${process.env.REACT_APP_AZURE_STORAGE_BADGE_IMAGE_BASE_URL}${skill_code}${skill_level}${skill_type}.png`;\n }\n};\n\nconst findSkillsCode = (objArr, code) => {\n const found = _.find(objArr, (obj) => {\n return _.some(obj.subCategories, (sub) => {\n return _.some(sub.skills, (skill) => {\n return skill.skillsCode === code;\n });\n });\n });\n\n return found;\n};\n\nfunction findSkills(objects, skill, payload) {\n let result = null;\n _.forEach(objects, (obj) => {\n _.forEach(obj.subCategories, (sub) => {\n const child = _.find(sub.skills, { skillsCode: skill.skillCode });\n if (child) {\n const { id, colour, name, sfiaVersion } = obj;\n const { description, level } = child.levels.find(\n (filteredSkill) => filteredSkill.level === skill.level\n );\n result = {\n ...payload,\n id,\n categoryName: name,\n color: colour,\n skillCode: child.skillsCode,\n link: skill?.link ?? \"\",\n description,\n level,\n sfiaVersion,\n skillName: child.name,\n skillType: skill.skillType,\n };\n return false;\n }\n });\n if (result) {\n return false;\n }\n });\n return result;\n}\nconst DigitalWallet = () => {\n const [badges, setBadges] = useState();\n const [showByCategory, setShowByCategory] = useState(false);\n const [isModalOpen, setModalOpen] = useState(false);\n const [isShareModalOpen, setShareModalOpen] = useState(false);\n const [modalData, setModalData] = useState();\n const [successShareData, setSuccessShareData] = useState([]);\n const [history, setHistory] = useState();\n const [successSharedDataPreview, setSuccessSharedDataPreview] = useState({\n note: undefined,\n expiration: undefined,\n });\n\n const fussionBadgesData = useMemo(() => {\n if (badges) {\n return Object.keys(badges).reduce(\n (accumulator, currentValue) =>\n accumulator.concat(badges?.[currentValue]?.data),\n []\n );\n }\n return [];\n }, [badges]);\n\n const [isResultsModalOpen, setResultsModalOpen] = useState(false);\n const [isHistoryModalOpen, setIsHistoryModalOpen] = useState(false);\n const showResultsModal = () => {\n setResultsModalOpen(true);\n };\n\n const handleResultsOk = () => {\n setResultsModalOpen(false);\n };\n\n useEffect(() => {\n if (successShareData?.length !== 0) {\n showResultsModal();\n } else {\n handleResultsOk;\n }\n }, [successShareData]);\n\n useEffect(() => {\n const fetchBadges = async () => {\n const listOfCategories = await CategoryAPI.getCategories();\n const fetchedBadges = await EvidenceAPI.getMyBadges();\n if (Array.isArray(fetchedBadges) && fetchedBadges.length === 0) {\n window.location = `${window.location.origin}/SfiaProfile`;\n return;\n }\n\n if (Array.isArray(fetchedBadges) && Array.isArray(listOfCategories)) {\n const MappedData = {};\n fetchedBadges.forEach((element) => {\n const results = findSkillsCode(listOfCategories, element?.skillCode);\n const parChildRes = findSkills(listOfCategories, element, {\n imgSource: createSkillBadgeImage(\n element?.skill,\n element?.skillCode,\n element?.skillType,\n element?.level,\n element?.badgeProvider\n ),\n lightColor: lightenColor(results.colour, 95),\n });\n\n if (results) {\n if (MappedData?.[results?.name]) {\n MappedData[results.name].data = [\n ...MappedData[results.name].data,\n parChildRes,\n ];\n } else {\n MappedData[results?.name] = {\n color: results.colour,\n lightColor: lightenColor(results.colour, 95),\n categoryName: results.name,\n data: [parChildRes],\n };\n }\n }\n setBadges(MappedData);\n });\n }\n };\n fetchBadges();\n }, []);\n\n const showModal = (payload) => {\n setModalData(payload);\n };\n\n useEffect(() => {\n if (modalData) {\n setModalOpen(true);\n }\n }, [modalData]);\n\n const handleOk = () => {\n setModalOpen(false);\n };\n\n const handleCancel = () => {\n setModalOpen(false);\n setModalData(undefined);\n };\n\n const requestHistory = async () => {\n BadgeAPI.getBadgeWalletLink().then((response) => {\n setHistory(response);\n setIsHistoryModalOpen(true);\n });\n };\n\n const [api, contextHolder] = notification.useNotification();\n const openNotification = (placement) => {\n api.success({\n message: `Copy to clipboard`,\n description: \"\",\n placement,\n });\n };\n\n return (\n \n {contextHolder}\n {badges && (\n \n
Earned badges
\n
\n setShareModalOpen(true)}\n >\n Share my badges\n \n requestHistory()}\n >\n Previously shared\n \n
\n
\n {badges && (\n <>\n \n {showByCategory &&
}\n \n )}\n {badges ? (\n showByCategory ? (\n Object.keys(badges).map((key, index) => (\n \n
\n {Object.keys(badges).length !== index + 1 && (\n
\n )}\n
No badges found!}\n style={styles.emptyContainer}\n />\n )}\n {modalData && (\n <>\n setShareModalOpen(false)}\n onCancel={() => setShareModalOpen(false)}\n setSuccessShareData={setSuccessShareData}\n setSuccessSharedDataPreview={setSuccessSharedDataPreview}\n />\n setIsHistoryModalOpen(true)}\n onCancel={() => setIsHistoryModalOpen(false)}\n history={history}\n />\n \n );\n};\n\nexport default DigitalWallet;\n","import BadgeRequestAPI from \"./../../common/api/service/BadgeRequestService\";\nimport * as actionTypes from \"./actionTypes\";\n\nexport const getMyLatestBadgeRequestStart = () => {\n return {\n type: actionTypes.GET_MY_LATEST_BADGE_REQUEST_START,\n };\n};\n\nexport const getMyLatestBadgeRequestSuccess = (myBadgeRequest) => {\n return {\n type: actionTypes.GET_MY_LATEST_BADGE_REQUEST_SUCCESS,\n myBadgeRequest,\n };\n};\n\nexport const getMyLatestBadgeRequestFail = (error) => {\n return {\n type: actionTypes.GET_MY_LATEST_BADGE_REQUEST_FAIL,\n error: error,\n };\n};\n\nexport const getMyLatestBadgeRequest = () => {\n return (dispatch) => {\n dispatch(getMyLatestBadgeRequestStart());\n\n return BadgeRequestAPI.getMyLatestBadgeRequest()\n .then((res) => {\n if (res) {\n dispatch(getMyLatestBadgeRequestSuccess(res));\n } else {\n dispatch(getMyLatestBadgeRequestFail(res));\n }\n })\n .catch((err) => {\n dispatch(getMyLatestBadgeRequestFail(err));\n });\n };\n};\n\nexport const submitBadgeRequestStart = () => {\n return {\n type: actionTypes.SUBMIT_BADGE_REQUEST_START,\n };\n};\n\nexport const submitBadgeRequestSuccess = (badgeRequest) => {\n return {\n type: actionTypes.SUBMIT_BADGE_REQUEST_SUCCESS,\n badgeRequest,\n };\n};\n\nexport const submitBadgeRequestFail = (error) => {\n return {\n type: actionTypes.SUBMIT_BADGE_REQUEST_FAIL,\n error: error,\n };\n};\n\nexport const submitBadgeRequest = (badgeRequest) => {\n return (dispatch) => {\n dispatch(submitBadgeRequestStart());\n\n return BadgeRequestAPI.submitBadgeRequest(badgeRequest)\n .then((res) => {\n if (res) {\n dispatch(submitBadgeRequestSuccess(res));\n } else {\n dispatch(submitBadgeRequestFail(res));\n }\n })\n .catch((err) => {\n dispatch(submitBadgeRequestFail(err));\n });\n };\n};\n","import EvidenceAPI from \"./../../common/api/service/EvidenceService\";\nimport * as actionTypes from \"./actionTypes\";\n\nexport const getEvidenceTypesStart = () => {\n return {\n type: actionTypes.GET_EVIDENCE_TYPES_START,\n };\n};\n\nexport const getEvidenceTypesSuccess = (evidenceTypes) => {\n return {\n type: actionTypes.GET_EVIDENCE_TYPES_SUCCESS,\n evidenceTypes: evidenceTypes,\n };\n};\n\nexport const getEvidenceTypesFail = (error) => {\n return {\n type: actionTypes.GET_EVIDENCE_TYPES_FAIL,\n error: error,\n };\n};\n\nexport const getEvidenceTypes = () => {\n return (dispatch) => {\n dispatch(getEvidenceTypesStart());\n\n return EvidenceAPI.getEvidenceTypes()\n .then((res) => {\n dispatch(getEvidenceTypesSuccess(res));\n })\n .catch((err) => {\n dispatch(getEvidenceTypesFail(err));\n });\n };\n};\n\nexport const getEvidencesByAccountIdStart = () => {\n return {\n type: actionTypes.GET_EVIDENCES_BYACCOUNTID_START,\n };\n};\n\nexport const getEvidencesByAccountIdSuccess = (evidences) => {\n return {\n type: actionTypes.GET_EVIDENCES_BYACCOUNTID_SUCCESS,\n evidences: evidences,\n };\n};\n\nexport const getEvidencesByAccountIdFail = (error) => {\n return {\n type: actionTypes.GET_EVIDENCES_BYACCOUNTID_FAIL,\n error: error,\n };\n};\n\nexport const getEvidencesByAccountId = () => {\n return (dispatch) => {\n dispatch(getEvidencesByAccountIdStart());\n\n return EvidenceAPI.getEvidencesByAccountId()\n .then((res) => {\n dispatch(getEvidencesByAccountIdSuccess(res));\n })\n .catch((err) => {\n dispatch(getEvidencesByAccountIdFail(err));\n });\n };\n};\n\nexport const getEvidencesByManagedPeopleAccountIdStart = () => {\n return {\n type: actionTypes.GET_EVIDENCES_BY_MANAGE_PEOPLE_ACCOUNTID_START,\n };\n};\n\nexport const getEvidencesByManagedPeopleAccountIdSuccess = (evidences) => {\n return {\n type: actionTypes.GET_EVIDENCES_BY_MANAGE_PEOPLE_ACCOUNTID_SUCCESS,\n evidences: evidences,\n };\n};\n\nexport const getEvidencesByManagedPeopleAccountIdFail = (error) => {\n return {\n type: actionTypes.GET_EVIDENCES_BY_MANAGE_PEOPLE_ACCOUNTID_FAIL,\n error: error,\n };\n};\n\nexport const getEvidencesByManagedPeopleAccountId = (email) => {\n return (dispatch) => {\n dispatch(getEvidencesByManagedPeopleAccountIdStart());\n\n return EvidenceAPI.getEvidencesByManagedPeopleAccountId(email)\n .then((res) => {\n dispatch(getEvidencesByManagedPeopleAccountIdSuccess(res));\n })\n .catch((err) => {\n dispatch(getEvidencesByManagedPeopleAccountIdFail(err));\n });\n };\n};\n\nexport const addEvidenceStart = () => {\n return {\n type: actionTypes.ADD_EVIDENCE_START,\n };\n};\n\nexport const addEvidenceSuccess = (evidence) => {\n return {\n type: actionTypes.ADD_EVIDENCE_SUCCESS,\n evidence: evidence,\n };\n};\n\nexport const addEvidenceFail = (error) => {\n return {\n type: actionTypes.ADD_EVIDENCE_FAIL,\n error: error,\n };\n};\n\nexport const addEvidence = (evidence) => {\n return (dispatch) => {\n dispatch(addEvidenceStart());\n\n return EvidenceAPI.addEvidence(evidence)\n .then((res) => {\n dispatch(addEvidenceSuccess(res));\n })\n .catch((err) => {\n dispatch(addEvidenceFail(err));\n });\n };\n};\n\nexport const addEvidencesStart = () => {\n return {\n type: actionTypes.ADD_EVIDENCES_START,\n };\n};\n\nexport const addEvidencesSuccess = (evidences) => {\n return {\n type: actionTypes.ADD_EVIDENCES_SUCCESS,\n evidences: evidences,\n };\n};\n\nexport const addEvidencesFail = (error) => {\n return {\n type: actionTypes.ADD_EVIDENCES_FAIL,\n error: error,\n };\n};\n\nexport const addEvidences = (evidences) => {\n return (dispatch) => {\n dispatch(addEvidencesStart());\n\n return EvidenceAPI.addEvidences(evidences)\n .then((res) => {\n dispatch(addEvidencesSuccess(res));\n })\n .catch((err) => {\n dispatch(addEvidencesFail(err));\n });\n };\n};\n\nexport const addManagedPeopleEvidenceStart = () => {\n return {\n type: actionTypes.ADD_MANAGED_PEOPLE_EVIDENCE_START,\n };\n};\n\nexport const addManagedPeopleEvidenceSuccess = (evidence) => {\n return {\n type: actionTypes.ADD_MANAGED_PEOPLE_EVIDENCE_SUCCESS,\n evidence: evidence,\n };\n};\n\nexport const addManagedPeopleEvidenceFail = (error) => {\n return {\n type: actionTypes.ADD_MANAGED_PEOPLE_EVIDENCE_FAIL,\n error: error,\n };\n};\n\nexport const addManagedPeopleEvidence = (evidence) => {\n return (dispatch) => {\n dispatch(addManagedPeopleEvidenceStart());\n\n return EvidenceAPI.addManagedPeopleEvidence(evidence)\n .then((res) => {\n dispatch(addManagedPeopleEvidenceSuccess(res));\n })\n .catch((err) => {\n dispatch(addManagedPeopleEvidenceFail(err));\n });\n };\n};\n\nexport const updateEvidenceStart = () => {\n return {\n type: actionTypes.UPDATE_EVIDENCE_START,\n };\n};\n\nexport const updateEvidenceSuccess = (evidence) => {\n return {\n type: actionTypes.UPDATE_EVIDENCE_SUCCESS,\n evidence: evidence,\n };\n};\n\nexport const updateEvidenceFail = (error) => {\n return {\n type: actionTypes.UPDATE_EVIDENCE_FAIL,\n error: error,\n };\n};\n\nexport const updateEvidence = (evidenceId, evidence) => {\n return (dispatch) => {\n dispatch(updateEvidenceStart());\n\n return EvidenceAPI.updateEvidence(evidenceId, evidence)\n .then((res) => {\n dispatch(updateEvidenceSuccess(res));\n })\n .catch((err) => {\n dispatch(updateEvidenceFail(err));\n });\n };\n};\n\nexport const updateEvidenceAIReview = (evidenceId) => {\n return (dispatch) => {\n dispatch(updateEvidenceStart());\n\n return EvidenceAPI.updateEvidenceAIReview(evidenceId)\n .then((res) => {\n dispatch(updateEvidenceSuccess(res));\n })\n .catch((err) => {\n dispatch(updateEvidenceFail(err));\n });\n };\n};\n\nexport const updateManagedPeopleEvidenceStart = () => {\n return {\n type: actionTypes.UPDATE_EVIDENCE_START,\n };\n};\n\nexport const updateManagedPeopleEvidenceSuccess = (evidence) => {\n return {\n type: actionTypes.UPDATE_EVIDENCE_SUCCESS,\n evidence: evidence,\n };\n};\n\nexport const updateManagedPeopleEvidenceFail = (error) => {\n return {\n type: actionTypes.UPDATE_EVIDENCE_FAIL,\n error: error,\n };\n};\n\nexport const updateManagedPeopleEvidence = (evidenceId, evidence) => {\n return (dispatch) => {\n dispatch(updateManagedPeopleEvidenceStart());\n\n return EvidenceAPI.updateManagedPeopleEvidence(evidenceId, evidence)\n .then((res) => {\n dispatch(updateManagedPeopleEvidenceSuccess(res));\n })\n .catch((err) => {\n dispatch(updateManagedPeopleEvidenceFail(err));\n });\n };\n};\n\nexport const deleteEvidenceStart = () => {\n return {\n type: actionTypes.DELETE_EVIDENCE_START,\n };\n};\n\nexport const deleteEvidenceSuccess = () => {\n return {\n type: actionTypes.DELETE_EVIDENCE_SUCCESS,\n };\n};\n\nexport const deleteEvidenceFail = (error) => {\n return {\n type: actionTypes.DELETE_EVIDENCE_FAIL,\n error: error,\n };\n};\n\nexport const deleteEvidence = (evidenceId) => {\n return (dispatch) => {\n dispatch(deleteEvidenceStart());\n\n return EvidenceAPI.deleteEvidence(evidenceId)\n .then((res) => {\n dispatch(deleteEvidenceSuccess(res));\n })\n .catch((err) => {\n dispatch(deleteEvidenceFail(err));\n });\n };\n};\n\nexport const deleteManagedPeopleEvidenceStart = () => {\n return {\n type: actionTypes.DELETE_MANAGED_PEOPLE_EVIDENCE_START,\n };\n};\n\nexport const deleteManagedPeopleEvidenceSuccess = () => {\n return {\n type: actionTypes.DELETE_MANAGED_PEOPLE_EVIDENCE_SUCCESS,\n };\n};\n\nexport const deleteManagedPeopleEvidenceFail = (error) => {\n return {\n type: actionTypes.DELETE_MANAGED_PEOPLE_EVIDENCE_FAIL,\n error: error,\n };\n};\n\nexport const deleteManagedPeopleEvidence = (evidenceId, personEmail) => {\n return (dispatch) => {\n dispatch(deleteManagedPeopleEvidenceStart());\n\n return EvidenceAPI.deleteManagedPeopleEvidence(evidenceId, personEmail)\n .then((res) => {\n dispatch(deleteManagedPeopleEvidenceSuccess(res));\n })\n .catch((err) => {\n dispatch(deleteManagedPeopleEvidenceFail(err));\n });\n };\n};\n\nexport const downloadEvidenceFileByIdStart = () => {\n return {\n type: actionTypes.DOWNLOAD_EVIDENCE_BYID_START,\n };\n};\n\nexport const downloadEvidenceFileByIdSuccess = (evidenceFile) => {\n console.log(\"evidenceFile\", evidenceFile);\n return {\n type: actionTypes.DOWNLOAD_EVIDENCE_BYID_SUCCESS,\n evidenceFile: evidenceFile,\n };\n};\n\nexport const downloadEvidenceFileByIdFail = (error) => {\n return {\n type: actionTypes.DOWNLOAD_EVIDENCE_BYID_FAIL,\n error: error,\n };\n};\n\nexport const downloadEvidenceFileById = (id) => {\n return (dispatch) => {\n dispatch(downloadEvidenceFileByIdStart());\n\n return EvidenceAPI.downloadEvidence(id)\n .then((res) => {\n dispatch(downloadEvidenceFileByIdSuccess(res));\n })\n .catch((err) => {\n dispatch(downloadEvidenceFileByIdFail(err));\n });\n };\n};\n\nexport const downloadManagedPeopleEvidenceFileByIdStart = () => {\n return {\n type: actionTypes.DOWNLOAD_MANAGED_PEOPLE_EVIDENCE_BYID_START,\n };\n};\n\nexport const downloadManagedPeopleEvidenceFileByIdSuccess = (evidenceFile) => {\n return {\n type: actionTypes.DOWNLOAD_MANAGED_PEOPLE_EVIDENCE_BYID_SUCCESS,\n evidenceFile: evidenceFile,\n };\n};\n\nexport const downloadManagedPeopleEvidenceFileByIdFail = (error) => {\n return {\n type: actionTypes.DOWNLOAD_MANAGED_PEOPLE_EVIDENCE_BYID_FAIL,\n error: error,\n };\n};\n\nexport const downloadManagedPeopleEvidenceFileById = (email, id) => {\n return (dispatch) => {\n dispatch(downloadManagedPeopleEvidenceFileByIdStart());\n\n return EvidenceAPI.downloadManagedPeopleEvidence(email, id)\n .then((res) => {\n dispatch(downloadManagedPeopleEvidenceFileByIdSuccess(res));\n })\n .catch((err) => {\n dispatch(downloadManagedPeopleEvidenceFileByIdFail(err));\n });\n };\n};\n","import * as evidenceActions from \"../../store/actions/evidenceAction\";\nimport changeInput from \"../../utils/changeInput\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport { faTrash } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { connect } from \"react-redux\";\nimport ReactTextareaAutosize from \"react-textarea-autosize\";\nimport Combobox from \"react-widgets/Combobox\";\nimport { Button, Col, CustomInput, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst toBase64 = (file) =>\n new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = () => resolve(reader.result);\n reader.onerror = (error) => reject(error);\n });\n\nconst forbiddenExtensions = [\"asp\", \"aspx\", \"axd\", \"asx\", \"asmx\", \"ashx\", \"shtml\", \"mhtml\", \"xhtml\", \"mht\", \"scr\", \"lnk\", \"msi\", \"msp\", \"ps1\", \"reg\", \"vb\", \"vbs\", \"hta\", \"ws\", \"dll\", \"exe\"];\n\nclass EvidenceDetail extends React.Component {\n static displayName = EvidenceDetail.name;\n\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n showDialog: false,\n submitInProgress: false,\n editedEvidence: null,\n form: {\n id: {\n validation: {\n required: true,\n },\n value: null,\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n label: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n evidenceTypeId: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n evidenceType: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n completedOn: {\n validation: {\n required: false,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n expiryOn: {\n validation: {\n required: false,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n supplier: {\n validation: {\n required: false,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n link: {\n validation: {\n required: false,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n text: {\n validation: {\n required: false,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n notes: {\n validation: {\n required: false,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n selectedSkills: [],\n selectedLors: [],\n evidenceOptions: [],\n evidenceOption: \"Upload File\",\n fileName: null,\n fileData: null,\n editMode: false,\n };\n\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n const evidenceOptions = [\n { value: \"Upload File\", label: this.contentTranslator(this.props.contentTranslations, \"SfiaEvidence\", \"SfiaEvidenceUploadFile\", \"Upload File\") },\n { value: \"Specify Link\", label: this.contentTranslator(this.props.contentTranslations, \"SfiaEvidence\", \"SfiaEvidenceSpecifyLink\", \"Specify Link\") },\n { value: \"Description in the Notes\", label: this.contentTranslator(this.props.contentTranslations, \"SfiaEvidence\", \"SfiaEvidenceDescriptionNotes\", \"Description in the Notes\") },\n ];\n\n this.setState({ evidenceOptions });\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true, editMode: this.props.editMode });\n this.prepareFormState();\n }\n\n if (prevProps.editedEvidence !== this.props.editedEvidence) {\n this.setState({ editedEvidence: this.props.editedEvidence });\n }\n }\n\n prepareFormState = () => {\n const evidence = this.props.editedEvidence;\n let form = this.state.form;\n\n form.id.value = evidence.id;\n form.id.valid = true;\n form.id.isValidFormat = true;\n\n form.label.value = evidence.label;\n form.label.valid = true;\n form.label.isValidFormat = true;\n\n form.evidenceTypeId.value = evidence.evidenceTypeId;\n form.evidenceTypeId.valid = true;\n form.evidenceTypeId.isValidFormat = true;\n\n form.evidenceType.value = evidence.evidenceType;\n form.evidenceType.valid = true;\n form.evidenceType.isValidFormat = true;\n\n form.supplier.value = evidence.supplier;\n form.supplier.valid = true;\n form.supplier.isValidFormat = true;\n\n form.completedOn.value = evidence.completedOn;\n form.completedOn.valid = true;\n form.completedOn.isValidFormat = true;\n\n form.expiryOn.value = evidence.expiryOn;\n form.expiryOn.valid = true;\n form.expiryOn.isValidFormat = true;\n\n form.link.value = evidence.link;\n form.link.valid = true;\n form.link.isValidFormat = true;\n\n form.text.value = evidence.text;\n form.text.valid = true;\n form.text.isValidFormat = true;\n\n form.notes.value = evidence.evidenceType && evidence.evidenceType == \"Text\" && (!evidence.notes || (evidence.notes && evidence.notes.length == 0)) ? evidence.text : evidence.notes;\n form.notes.valid = true;\n form.notes.isValidFormat = true;\n\n const fileData = null;\n const fileName = evidence.fileName;\n\n let evidenceOption = \"Upload File\";\n\n if (fileName && fileName != \"\") {\n evidenceOption = \"Upload File\";\n } else if (evidence.link && evidence.link != \"\") {\n evidenceOption = \"Specify Link\";\n } else if (evidence.notes && evidence.notes != \"\") {\n evidenceOption = \"Description in the Notes\";\n } else if (evidence.evidenceType == \"Text\") {\n evidenceOption = \"Description in the Notes\";\n } else {\n evidenceOption = \"Specify Link\";\n }\n\n const selectedLors = evidence.lorLevels.map((lorLevel) => {\n return {\n id: lorLevel.id,\n lorLevelId: lorLevel.lorLevelId,\n lor: lorLevel.lor,\n lorCode: lorLevel.lorCode,\n level: lorLevel.level,\n };\n });\n\n const selectedSkills = evidence.skillLevels.map((skillLevel) => {\n return {\n id: skillLevel.id,\n skillLevelId: skillLevel.skillLevelId,\n skill: skillLevel.skill,\n skillCode: skillLevel.skillCode,\n level: skillLevel.level,\n };\n });\n\n this.setState({ form, isFormValid: true, selectedLors, selectedSkills, fileName, fileData, evidenceOption });\n };\n\n togleEditEvidenceModal = () => {\n const showDialog = this.state.showDialog;\n this.setState({ showDialog: !showDialog, editMode: false });\n };\n\n handleEditMode = () => {\n this.setState({ editMode: true });\n };\n\n handleCancelEditMode = () => {\n this.setState({ editMode: false });\n };\n\n handleChange = (event) => {\n const { name, value } = event.target;\n\n let updateState = changeInput(this.state.form, name, value);\n\n if (name == \"evidenceTypeId\") {\n const evidenceType = this.props.evidenceTypes.find((it) => it.id == value);\n if (evidenceType) {\n updateState = changeInput(updateState.form, \"evidenceType\", evidenceType.name);\n\n if (this.state.evidenceOption == \"Specify Link\") {\n if (updateState.form.link.value == \"\" || updateState.form.link.value == null) {\n updateState.form.link.valid = false;\n updateState.form.link.isValidFormat = false;\n\n updateState.valid = false;\n }\n } else if (this.state.evidenceOption == \"Description in the Notes\") {\n if (updateState.form.notes.value == \"\" || updateState.form.notes.value == null) {\n updateState.form.notes.valid = false;\n updateState.form.notes.isValidFormat = false;\n\n updateState.valid = false;\n }\n } else if (this.state.fileData != \"\") {\n updateState.valid = true;\n }\n }\n } else if (name == \"notes\") {\n if (this.state.evidenceOption == \"Description in the Notes\") {\n if (updateState.form.notes.value == \"\" || updateState.form.notes.value == null) {\n updateState.form.notes.valid = false;\n updateState.form.notes.isValidFormat = false;\n\n updateState.valid = false;\n }\n }\n } else if (name == \"link\") {\n if (this.state.evidenceOption == \"Specify Link\") {\n if (updateState.form.link.value == \"\" || updateState.form.link.value == null) {\n updateState.form.link.valid = false;\n updateState.form.link.isValidFormat = false;\n\n updateState.valid = false;\n }\n }\n }\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n handleChangeDate(name, value) {\n const updateState = changeInput(this.state.form, name, value);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n }\n\n handleChangeEvidenceOption = (evidenceOption) => {\n this.setState({ evidenceOption });\n\n let updateState = changeInput(this.state.form, \"label\", this.state.form.label.value);\n\n updateState.form.link.valid = true;\n updateState.form.link.isValidFormat = true;\n\n updateState.form.notes.valid = true;\n updateState.form.notes.isValidFormat = true;\n\n if (evidenceOption == \"Specify Link\") {\n updateState = changeInput(updateState.form, \"link\", updateState.form.link.value);\n } else if (evidenceOption == \"Description in the Notes\") {\n updateState = changeInput(updateState.form, \"notes\", updateState.form.notes.value);\n }\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n handleSkillCheckedChange = (skill, skillCode, level) => {\n let selectedSkills = this.state.selectedSkills;\n const { categories } = this.props;\n\n const selectedSkill = {\n skillLevelId: null,\n skill,\n skillCode,\n level,\n };\n\n if (selectedSkills.find((it) => it.skill == skill && it.skillCode == skillCode && it.level == level)) {\n const unSelectedSkill = selectedSkills.find((it) => it.skill == skill && it.skillCode == skillCode && it.level == level);\n\n if (unSelectedSkill.removed) {\n unSelectedSkill.removed = false;\n } else {\n unSelectedSkill.removed = true;\n }\n\n this.setState({ selectedSkills });\n } else {\n const category = categories.find((it) => it.subCategories.some((subCategory) => subCategory.skills.some((it) => it.name == skill && it.skillsCode == skillCode)));\n const categorySubCategory = category && category.subCategories.find((it) => it.skills.some((it) => it.name == skill && it.skillsCode == skillCode));\n const categorySkill = categorySubCategory && categorySubCategory.skills.find((it) => it.name == skill && it.skillsCode == skillCode);\n const skillLevel = categorySkill && categorySkill.levels.find((it) => it.level == level);\n\n if (skillLevel) {\n selectedSkill.skillLevelId = skillLevel.id;\n }\n\n this.setState({ selectedSkills: [...selectedSkills, selectedSkill] });\n }\n };\n\n handlelorCheckedChange = (lor, lorCode, level) => {\n let selectedLors = this.state.selectedLors;\n const { lors } = this.props;\n\n const selectedLor = {\n lorLevelId: null,\n lor,\n lorCode,\n level,\n };\n\n if (selectedLors.find((it) => it.lor == lor && it.lorCode == lorCode && it.level == level)) {\n const unSelectedLor = selectedLors.find((it) => it.lor == lor && it.lorCode == lorCode && it.level == level);\n\n if (unSelectedLor.removed) {\n unSelectedLor.removed = false;\n } else {\n unSelectedLor.removed = true;\n }\n\n this.setState({ selectedLors });\n } else {\n const lorLevel = lors.find((it) => it.name == lor && it.lorCode == lorCode).levels.find((it) => it.levelNumber == level);\n\n if (lorLevel) {\n selectedLor.lorLevelId = lorLevel.id;\n }\n\n this.setState({ selectedLors: [...selectedLors, selectedLor] });\n }\n };\n\n setEvidenceFile = (evidenceFile) => {\n const extension = evidenceFile.name.split(\".\").pop().toLowerCase();\n toBase64(evidenceFile).then((result) => {\n const fileData = result.split(\",\")[1];\n this.setState({ fileName: evidenceFile.name, fileData, fileExtension: extension });\n });\n\n this.handleChange({\n target: {\n name: \"evidenceTypeId\",\n value: this.state.form.evidenceTypeId.value,\n },\n });\n };\n\n handleSubmitDelete = () => {\n const { editedEvidence } = this.state;\n\n if (window.confirm(`Are you sure?`)) {\n const deletedId = editedEvidence.id;\n const personEmail = this.props.managedPeople && this.props.managedPeople.personB.email ? this.props.managedPeople.personB.email : null;\n\n this.setState({ submitInProgress: true });\n Promise.resolve(this.props.managedPeople ? this.props.onEvidence.deleteManagedPeopleEvidence(deletedId, personEmail) : this.props.onEvidence.deleteEvidence(deletedId)).then(() => {\n if (!this.props.updateInProgress) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.setState({ showDialog: false });\n if (this.props.handleEvidenceDeleted) {\n this.props.handleEvidenceDeleted(deletedId);\n }\n }\n }\n this.setState({ submitInProgress: this.props.updateInProgress });\n });\n }\n };\n\n handleSubmitEdit = () => {\n const { form, evidenceOption, selectedSkills, selectedLors, editedEvidence } = this.state;\n\n let fileName = null;\n\n if (this.state.fileData) {\n fileName = this.state.fileName;\n } else if (evidenceOption == \"Specify Link\" || evidenceOption == \"Description in the Notes\") {\n fileName = null;\n } else {\n fileName = editedEvidence.fileName;\n }\n\n const evidence = {\n personEmail: this.props.managedPeople && this.props.managedPeople.personB.email,\n evidenceTypeId: form.evidenceTypeId.value,\n evidenceType: form.evidenceType.value,\n label: form.label.value,\n supplier: form.supplier.value,\n completedOn: form.completedOn.value,\n expiryOn: form.expiryOn.value,\n link: evidenceOption == \"Specify Link\" ? form.link.value : null,\n fileName: fileName,\n fileData: this.state.fileData,\n lorLevels: selectedLors.filter((it) => !it.removed),\n skillLevels: selectedSkills.filter((it) => !it.removed),\n text: form.text.value,\n notes: form.notes.value,\n };\n\n this.setState({ submitInProgress: true });\n Promise.resolve(this.props.managedPeople ? this.props.onEvidence.updateManagedPeopleEvidence(form.id.value, evidence) : this.props.onEvidence.updateEvidence(form.id.value, evidence)).then(() => {\n if (!this.props.updateInProgress) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.setState({ showDialog: false, editMode: false });\n if (this.props.handleEvidenceUpdated) {\n this.props.handleEvidenceUpdated(this.props.updatedEvidence);\n }\n }\n }\n this.setState({ submitInProgress: this.props.updateInProgress });\n });\n };\n\n handleSubmitAIEvidenceReview = () => {\n const { form } = this.state;\n\n this.setState({ submitInProgress: true });\n this.props.onEvidence.updateEvidenceAIReview(form.id.value).then(() => {\n if (!this.props.updateInProgress) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.setState({ editedEvidence: this.props.updatedEvidence });\n if (this.props.handleEvidenceUpdated) {\n this.props.handleEvidenceUpdated(this.props.updatedEvidence);\n }\n }\n }\n this.setState({ submitInProgress: this.props.updateInProgress });\n });\n };\n\n render() {\n let isAdmin = false;\n\n const authMode = this.props.authMode;\n let authModes = authMode.split(\",\").map((item) => item.trim());\n if (authModes.filter((it) => it != \"Admin\").length == 0) {\n isAdmin = true;\n }\n\n const { form, selectedSkills, selectedLors, editedEvidence, editMode, submitInProgress } = this.state;\n const { skillProfiles, lorProfiles, lors, categories, showHiddenSkills, containerConfig } = this.props;\n\n const availableLorCodes = lors\n ? lors\n .filter((it) => !it.isHidden)\n .flatMap((lor, index) => {\n return lor.lorCode;\n })\n : [];\n\n const availableSkillCodes = categories\n ? categories.flatMap((category, index) => {\n return category.subCategories.flatMap((subCategory, index) => {\n return subCategory.skills\n .filter((it) => !it.isHidden)\n .flatMap((skill, index) => {\n return skill.skillsCode;\n });\n });\n })\n : [];\n\n const allowEdit = !(editedEvidence && (editedEvidence.isDigitalBadge || editedEvidence.isNonEditable || (editedEvidence.isEditableToCreatorOnly && editedEvidence.createdById != this.props.personId)) ? true : false);\n const showOnly = (editedEvidence && (editedEvidence.isDigitalBadge || editedEvidence.isNonEditable || (editedEvidence.isEditableToCreatorOnly && editedEvidence.createdById != this.props.personId)) ? true : false) || !editMode;\n\n let stxEvidenceOption = \"Upload File\";\n\n if (editedEvidence) {\n if (editedEvidence.fileName && editedEvidence.fileName != \"\") {\n stxEvidenceOption = \"Upload File\";\n } else if (editedEvidence.link && editedEvidence.link != \"\") {\n stxEvidenceOption = \"Specify Link\";\n } else if (editedEvidence.notes && editedEvidence.notes != \"\" && !editedEvidence.notes.startsWith(\"Evidence created from an Action\")) {\n stxEvidenceOption = \"Description in the Notes\";\n } else if (editedEvidence.evidenceType == \"Text\") {\n stxEvidenceOption = \"Description in the Notes\";\n } else {\n stxEvidenceOption = \"Specify Link\";\n }\n }\n\n const showStxIntelligence =\n allowEdit &&\n !editMode &&\n editedEvidence &&\n !(editedEvidence.isDigitalBadge || editedEvidence.isNonEditable || (editedEvidence.isEditableToCreatorOnly && editedEvidence.createdById != this.props.personId)) &&\n containerConfig &&\n containerConfig.enableAIEvidenceReviewer &&\n (editedEvidence.lorLevels ? editedEvidence.lorLevels : []).length + (editedEvidence.skillLevels ? editedEvidence.skillLevels : []).length == 1 &&\n (stxEvidenceOption == \"Upload File\" || stxEvidenceOption == \"Description in the Notes\") &&\n !this.props.managedPeople;\n\n return (\n \n \n {showOnly ? \n \n {this.state.submitInProgress ? (\n \n
\n ) : (\n \n )}\n \n \n {editedEvidence && !editedEvidence.aiReviewed && showStxIntelligence && (\n \n \n \n \n \n \n )}\n {allowEdit && !editMode && (\n \n \n )}\n {!showOnly && (\n !it.removed).length > 0 || selectedLors.filter((it) => !it.removed).length > 0) &&\n (this.state.evidenceOption == \"Description in the Notes\"\n ? form.notes.value && form.notes.value.length >= 30 && form.notes.value.length <= 5000\n ? true\n : false\n : this.state.evidenceOption == \"Specify Link\"\n ? form.link.value\n ? true\n : false\n : this.state.fileName\n ? true\n : false)\n )\n }\n >\n \n \n )} */}\n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.evidence.loading,\n error: state.evidence.error,\n evidenceFile: state.evidence.evidenceFile,\n updateInProgress: state.evidence.updateInProgress,\n updatedEvidence: state.evidence.updatedEvidence,\n evidenceTypes: state.evidence.evidenceTypes,\n\n lors: state.lor.lors,\n managedPeople: state.auth.managedPeople,\n authMode: state.auth.authMode,\n personId: state.auth.personId,\n contentTranslations: state.content.contentTranslations,\n containerConfig: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onEvidence: bindActionCreators(evidenceActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(EvidenceDetail);\n","import * as evidenceActions from \"../../store/actions/evidenceAction\";\nimport { parameterizedString } from \"../../utils/stringUtils\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport { ContentWrapperLg } from \"../common/ContentWrapperLg\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport EvidenceDetail from \"./EvidenceDetail\";\nimport { faArrowDown, faArrowUp } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { connect } from \"react-redux\";\nimport { Link } from \"react-router-dom\";\nimport { Button, Col, Container, Input, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nclass EvidenceList extends React.Component {\n static displayName = EvidenceList.name;\n\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n showEditEvidence: false,\n editedEvidence: null,\n editMode: false,\n selectedSortOption: \"label\",\n selectedSortOptionDirection: \"asc\",\n optionSorts: [\n {\n label: \"Label\",\n field: \"label\",\n selected: true,\n },\n {\n label: \"Type\",\n field: \"evidenceType\",\n },\n {\n label: \"Expiry Date\",\n field: \"expiryOn\",\n },\n ],\n showDialogEvidenceDetailTs: null,\n };\n\n this.contentTranslator = contentTranslator.bind(this);\n this.parameterizedString = parameterizedString.bind(this);\n }\n\n componentDidMount() {}\n\n componentDidUpdate(prevProps) {\n if (this.props.addedEvidence && prevProps.addedEvidence !== this.props.addedEvidence) {\n const containerConfig = this.props.containerConfig;\n\n const evidence = this.props.addedEvidence;\n const fileName = evidence.fileName;\n\n let evidenceOption = \"Upload File\";\n\n if (fileName && fileName != \"\") {\n evidenceOption = \"Upload File\";\n } else if (evidence.link && evidence.link != \"\") {\n evidenceOption = \"Specify Link\";\n } else if (evidence.notes && evidence.notes != \"\" && !evidence.notes.startsWith(\"Evidence created from an Action\")) {\n evidenceOption = \"Description in the Notes\";\n } else if (evidence.evidenceType == \"Text\") {\n evidenceOption = \"Description in the Notes\";\n } else {\n evidenceOption = \"Specify Link\";\n }\n\n if (\n !(evidence.isDigitalBadge || evidence.isNonEditable || (evidence.isEditableToCreatorOnly && evidence.createdById != this.props.personId)) &&\n containerConfig &&\n containerConfig.enableAIEvidenceReviewer &&\n (evidence.lorLevels ? evidence.lorLevels : []).length + (evidence.skillLevels ? evidence.skillLevels : []).length == 1 &&\n (evidenceOption == \"Upload File\" || evidenceOption == \"Description in the Notes\")\n ) {\n this.openEditEvidenceModal(evidence, false);\n }\n }\n }\n\n openEditEvidenceModal = (evidence, editMode) => {\n this.setState({ showDialogEvidenceDetailTs: new Date(), editedEvidence: evidence, editMode });\n };\n\n handleChangeSortOption = (event) => {\n const { name, value } = event.target;\n const { optionSorts } = this.state;\n optionSorts.forEach((option) => {\n if (option.field == value) {\n option.selected = true;\n } else {\n option.selected = false;\n }\n });\n\n this.setState({\n selectedSortOption: value,\n optionSorts,\n });\n };\n\n handleChangeSortDirection = () => {\n const { selectedSortOptionDirection } = this.state;\n\n this.setState({\n selectedSortOptionDirection: selectedSortOptionDirection == \"asc\" ? \"desc\" : \"asc\",\n });\n };\n\n sortActions = (actions) => {\n const { selectedSortOption, selectedSortOptionDirection } = this.state;\n\n if (selectedSortOption == \"expiryOn\") {\n if (selectedSortOptionDirection == \"asc\") {\n actions = actions.sort((a, b) => new Date(a.expiryOn) - new Date(b.expiryOn));\n } else {\n actions = actions.sort((b, a) => new Date(a.expiryOn) - new Date(b.expiryOn));\n }\n } else {\n actions = _.orderBy(actions, selectedSortOption, selectedSortOptionDirection);\n }\n\n return actions;\n };\n\n renderEvidenceList = () => {\n const { containerConfig } = this.props;\n let evidences = this.props.evidences;\n evidences = this.sortActions(evidences);\n\n const optionSorts = [\n {\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaEvidence\", \"SfiaEvidenceSortByLabel\", \"Label\"),\n field: \"label\",\n selected: true,\n },\n {\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaEvidence\", \"SfiaEvidenceSortByType\", \"Type\"),\n field: \"evidenceType\",\n },\n {\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaEvidence\", \"SfiaEvidenceSortByCreatedDate\", \"Created Date\"),\n field: \"createdOn\",\n },\n {\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaEvidence\", \"SfiaEvidenceSortByExpiryDate\", \"Expiry Date\"),\n field: \"expiryOn\",\n },\n ];\n\n return (\n \n {evidences && evidences.length > 0 ? (\n \n \n \n \n \n {optionSort.label}\n \n ))}\n \n \n this.handleChangeSortDirection()} className=\"btn btn-primary\">\n \n \n
\n \n
\n \n
\n \n {evidences.map((evidence, index) => {\n const skillLevels = [\n ...evidence.lorLevels.map((lorLevel) => {\n return lorLevel.lorCode + lorLevel.level;\n }),\n ...evidence.skillLevels.map((skillLevel) => {\n return skillLevel.skillCode + skillLevel.level;\n }),\n ];\n\n const fileName = evidence.fileName;\n\n let evidenceOption = \"Upload File\";\n\n if (fileName && fileName != \"\") {\n evidenceOption = \"Upload File\";\n } else if (evidence.link && evidence.link != \"\") {\n evidenceOption = \"Specify Link\";\n } else if (evidence.notes && evidence.notes != \"\" && !evidence.notes.startsWith(\"Evidence created from an Action\")) {\n evidenceOption = \"Description in the Notes\";\n } else if (evidence.evidenceType == \"Text\") {\n evidenceOption = \"Description in the Notes\";\n } else {\n evidenceOption = \"Specify Link\";\n }\n\n return (\n \n \n \n \n \n {this.props.managedPeople ? (\n \n ) : evidence.link ? (\n {evidence.evidenceType} \n \n \n \n \n \n {new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(evidence.createdOn))}\n \n \n )}\n {evidence.completedOn && (\n \n \n \n \n {new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(evidence.completedOn))}\n \n \n )}\n {evidence.expiryOn && (\n \n \n \n \n {new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(evidence.expiryOn))}\n \n \n )}\n \n this.openEditEvidenceModal(evidence, true)} disabled={this.props.loadingEdit}>\n {evidence.isDigitalBadge || evidence.isNonEditable || (evidence.isEditableToCreatorOnly && evidence.createdById != this.props.personId) ? (\n \n {!(evidence.isDigitalBadge || evidence.isNonEditable || (evidence.isEditableToCreatorOnly && evidence.createdById != this.props.personId)) &&\n containerConfig &&\n containerConfig.enableAIEvidenceReviewer &&\n (evidence.lorLevels ? evidence.lorLevels : []).length + (evidence.skillLevels ? evidence.skillLevels : []).length == 1 &&\n (evidenceOption == \"Upload File\" || evidenceOption == \"Description in the Notes\") &&\n !evidence.aiReviewed &&\n !this.props.managedPeople && (\n \n this.openEditEvidenceModal(evidence, false)}\n disabled={this.props.loadingEdit}\n >\n \n \n \n )}\n {evidence.aiReviewed && (\n this.openEditEvidenceModal(evidence, false)} disabled={this.props.loadingEdit}>\n \n )}\n \n
\n {evidence.evidenceType == \"Text\" && (!evidence.notes || (evidence.notes && evidence.notes.length == 0)) && (\n \n
\n )}\n {evidence.notes && evidence.notes.length > 0 && (\n \n
\n )}\n {evidence.isEditableToCreatorOnly && (\n \n
\n )}\n \n
\n \n \n );\n })}\n \n ) : (\n \n \n \n \n
\n \n
\n \n \n )}\n \n );\n };\n\n render() {\n let { evidences } = this.props;\n\n if (!evidences) return
;\n return (\n \n \n \n {this.props.managedPeople\n ? this.parameterizedString(this.contentTranslator(this.props.contentTranslations, \"SfiaEvidence\", \"SfiaEvidenceListFor\", \"Evidence List for {s1}\"), `${this.props.managedPeople.personB.firstName} ${this.props.managedPeople.personB.lastName}`)\n : this.contentTranslator(this.props.contentTranslations, \"SfiaEvidence\", \"SfiaEvidenceList\", \"Your Evidence List\")}\n
\n {this.props.loadingEvidence ? (\n \n
\n ) : (\n this.renderEvidenceList()\n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.evidence.loading,\n error: state.evidence.error,\n evidenceFile: state.evidence.evidenceFile,\n updateInProgress: state.evidence.updateInProgress,\n updatedEvidence: state.evidence.updatedEvidence,\n evidenceTypes: state.evidence.evidenceTypes,\n\n lors: state.lor.lors,\n managedPeople: state.auth.managedPeople,\n authMode: state.auth.authMode,\n personId: state.auth.personId,\n contentTranslations: state.content.contentTranslations,\n containerConfig: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onEvidence: bindActionCreators(evidenceActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(EvidenceList);\n","import * as evidenceActions from \"../../store/actions/evidenceAction\";\nimport changeInput from \"../../utils/changeInput\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport React from \"react\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { connect } from \"react-redux\";\nimport Combobox from \"react-widgets/Combobox\";\nimport { Button, Col, Container, CustomInput, Form, FormGroup, Input, Label, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst wrapperStyle = {\n borderRadius: \"10px\",\n width: \"700px\",\n background: \"#F5F5F5\",\n paddingLeft: \"63px\",\n paddingRight: \"63px\",\n paddingTop: \"35px\",\n paddingBottom: \"35px\",\n};\n\nconst toBase64 = (file) =>\n new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = () => resolve(reader.result);\n reader.onerror = (error) => reject(error);\n });\n\nconst forbiddenExtensions = [\"asp\", \"aspx\", \"axd\", \"asx\", \"asmx\", \"ashx\", \"shtml\", \"mhtml\", \"xhtml\", \"mht\", \"scr\", \"lnk\", \"msi\", \"msp\", \"ps1\", \"reg\", \"vb\", \"vbs\", \"hta\", \"ws\", \"dll\", \"exe\"];\n\nclass AddNewEvidenceForm extends React.Component {\n static displayName = AddNewEvidenceForm.name;\n\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n submitInProgress: false,\n selectedSkills: [],\n selectedLors: [],\n evidenceOptions: [],\n evidenceOption: \"Upload File\",\n form: {\n label: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n evidenceTypeId: {\n validation: {\n required: true,\n },\n value: this.props.evidenceTypes && this.props.evidenceTypes.length > 0 && this.props.evidenceTypes[0].id,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n evidenceType: {\n validation: {\n required: true,\n },\n value: this.props.evidenceTypes && this.props.evidenceTypes.length > 0 && this.props.evidenceTypes[0].name,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n completedOn: {\n validation: {\n required: false,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n expiryOn: {\n validation: {\n required: false,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n supplier: {\n validation: {\n required: false,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n link: {\n validation: {\n required: false,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n text: {\n validation: {\n required: false,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n notes: {\n validation: {\n required: false,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n fileName: null,\n fileExtension: null,\n fileData: null,\n isFormValid: false,\n };\n\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n const evidenceOptions = [\n { value: \"Upload File\", label: this.contentTranslator(this.props.contentTranslations, \"SfiaEvidence\", \"SfiaEvidenceUploadFile\", \"Upload File\") },\n { value: \"Specify Link\", label: this.contentTranslator(this.props.contentTranslations, \"SfiaEvidence\", \"SfiaEvidenceSpecifyLink\", \"Specify Link\") },\n { value: \"Description in the Notes\", label: this.contentTranslator(this.props.contentTranslations, \"SfiaEvidence\", \"SfiaEvidenceDescriptionNotes\", \"Description in the Notes\") },\n ];\n\n this.setState({ evidenceOptions });\n\n const { selectedSkills, selectedLors } = this.state;\n const { defaultSelectedSkill, defaultSelectedSkills, defaultSelectedLor, defaultSelectedLors } = this.props;\n\n if (defaultSelectedSkill) {\n this.setState({ selectedSkills: [...selectedSkills, defaultSelectedSkill] });\n } else if (defaultSelectedSkills) {\n this.setState({ selectedSkills: [...selectedSkills, ...defaultSelectedSkills] });\n }\n\n if (defaultSelectedLor) {\n this.setState({ selectedLors: [...selectedLors, defaultSelectedLor] });\n }\n if (defaultSelectedLors) {\n this.setState({ selectedLors: [...selectedLors, ...defaultSelectedLors] });\n }\n }\n\n handleChangeEvidenceOption = (evidenceOption) => {\n this.setState({ evidenceOption });\n\n let updateState = changeInput(this.state.form, \"label\", this.state.form.label.value);\n\n updateState.form.link.valid = true;\n updateState.form.link.isValidFormat = true;\n\n updateState.form.notes.valid = true;\n updateState.form.notes.isValidFormat = true;\n\n if (evidenceOption == \"Specify Link\") {\n updateState = changeInput(updateState.form, \"link\", updateState.form.link.value);\n } else if (evidenceOption == \"Description in the Notes\") {\n updateState = changeInput(updateState.form, \"notes\", updateState.form.notes.value);\n }\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n handleChange = (event) => {\n const { name, value } = event.target;\n\n let updateState = changeInput(this.state.form, name, value);\n\n if (name == \"evidenceTypeId\") {\n const evidenceType = this.props.evidenceTypes.find((it) => it.id == value);\n if (evidenceType) {\n updateState = changeInput(updateState.form, \"evidenceType\", evidenceType.name);\n\n if (this.state.evidenceOption == \"Specify Link\") {\n if (updateState.form.link.value == \"\" || updateState.form.link.value == null) {\n updateState.form.link.valid = false;\n updateState.form.link.isValidFormat = false;\n\n updateState.valid = false;\n }\n } else if (this.state.evidenceOption == \"Description in the Notes\") {\n if (updateState.form.notes.value == \"\" || updateState.form.notes.value == null) {\n updateState.form.notes.valid = false;\n updateState.form.notes.isValidFormat = false;\n\n updateState.valid = false;\n }\n }\n }\n } else if (name == \"notes\") {\n if (this.state.evidenceOption == \"Description in the Notes\") {\n if (updateState.form.notes.value == \"\" || updateState.form.notes.value == null) {\n updateState.form.notes.valid = false;\n updateState.form.notes.isValidFormat = false;\n\n updateState.valid = false;\n }\n }\n } else if (name == \"link\") {\n if (this.state.evidenceOption == \"Specify Link\") {\n if (updateState.form.link.value == \"\" || updateState.form.link.value == null) {\n updateState.form.link.valid = false;\n updateState.form.link.isValidFormat = false;\n\n updateState.valid = false;\n }\n }\n }\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n handleChangeDate(name, value) {\n const updateState = changeInput(this.state.form, name, value);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n }\n\n setEvidenceFile = (evidenceFile) => {\n const extension = evidenceFile.name.split(\".\").pop().toLowerCase();\n toBase64(evidenceFile).then((result) => {\n const fileData = result.split(\",\")[1];\n this.setState({ fileName: evidenceFile.name, fileData, fileExtension: extension });\n });\n };\n\n handleSkillCheckedChange = (skill, skillCode, level) => {\n let selectedSkills = this.state.selectedSkills;\n const { categories } = this.props;\n\n const selectedSkill = {\n skillLevelId: null,\n skill,\n skillCode,\n level,\n };\n\n if (selectedSkills.find((it) => it.skill == skill && it.skillCode == skillCode && it.level == level)) {\n const unSelectedSkill = selectedSkills.find((it) => it.skill == skill && it.skillCode == skillCode && it.level == level);\n const index = selectedSkills.indexOf(unSelectedSkill);\n if (index !== -1) {\n selectedSkills.splice(index, 1);\n }\n\n this.setState({ selectedSkills });\n } else {\n const category = categories.find((it) => it.subCategories.some((subCategory) => subCategory.skills.some((it) => it.name == skill && it.skillsCode == skillCode)));\n const categorySubCategory = category && category.subCategories.find((it) => it.skills.some((it) => it.name == skill && it.skillsCode == skillCode));\n const categorySkill = categorySubCategory && categorySubCategory.skills.find((it) => it.name == skill && it.skillsCode == skillCode);\n const skillLevel = categorySkill && categorySkill.levels.find((it) => it.level == level);\n\n if (skillLevel) {\n selectedSkill.skillLevelId = skillLevel.id;\n }\n\n this.setState({ selectedSkills: [...selectedSkills, selectedSkill] });\n }\n };\n\n handlelorCheckedChange = (lor, lorCode, level) => {\n let selectedLors = this.state.selectedLors;\n const { lors } = this.props;\n\n const selectedLor = {\n lorLevelId: null,\n lor,\n lorCode,\n level,\n };\n\n if (selectedLors.find((it) => it.lor == lor && it.lorCode == lorCode && it.level == level)) {\n const unSelectedLor = selectedLors.find((it) => it.lor == lor && it.lorCode == lorCode && it.level == level);\n const index = selectedLors.indexOf(unSelectedLor);\n if (index !== -1) {\n selectedLors.splice(index, 1);\n }\n\n this.setState({ selectedLors });\n } else {\n const lorLevel = lors.find((it) => it.name == lor && it.lorCode == lorCode).levels.find((it) => it.levelNumber == level);\n\n if (lorLevel) {\n selectedLor.lorLevelId = lorLevel.id;\n }\n\n this.setState({ selectedLors: [...selectedLors, selectedLor] });\n }\n };\n\n submitForm = () => {\n const { pendingSaveEvidence } = this.props;\n const { form, evidenceOption, selectedSkills, selectedLors } = this.state;\n const evidence = {\n personEmail: this.props.managedPeople && this.props.managedPeople.personB.email,\n evidenceTypeId: form.evidenceTypeId.value,\n evidenceType: form.evidenceType.value,\n label: form.label.value,\n link: evidenceOption == \"Specify Link\" ? form.link.value : null,\n expiryOn: form.expiryOn.value,\n fileName: this.state.fileName,\n fileData: this.state.fileData,\n lorLevels: selectedLors,\n skillLevels: selectedSkills,\n text: form.text.value,\n notes: form.notes.value,\n completedOn: form.completedOn.value,\n supplier: form.supplier.value,\n };\n\n if (pendingSaveEvidence && this.props.handleEvidencePendingSave) {\n this.props.handleEvidencePendingSave(evidence);\n } else {\n this.setState({ submitInProgress: true });\n\n Promise.resolve(this.props.managedPeople ? this.props.onEvidence.addManagedPeopleEvidence(evidence) : this.props.onEvidence.addEvidence(evidence)).then(() => {\n if (!this.props.updateInProgress) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.props.handleEvidenceAdded(this.props.addedEvidence);\n }\n }\n this.setState({ submitInProgress: this.props.updateInProgress });\n });\n }\n };\n\n render() {\n const { form, selectedSkills, selectedLors } = this.state;\n const { lors, categories, skillProfiles, lorProfiles, showHiddenSkills, pendingSaveEvidence, shownSkills } = this.props;\n\n const availableLorCodes = lors\n ? lors\n .filter((it) => !it.isHidden || showHiddenSkills)\n .flatMap((lor, index) => {\n return lor.lorCode;\n })\n : [];\n\n const availableSkillCodes = categories\n ? categories.flatMap((category, index) => {\n return category.subCategories.flatMap((subCategory, index) => {\n return subCategory.skills\n .filter((it) => !it.isHidden || showHiddenSkills)\n .flatMap((skill, index) => {\n return skill.skillsCode;\n });\n });\n })\n : [];\n\n return (\n \n {this.state.submitInProgress ? (\n \n
\n ) : (\n \n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.evidence.loading,\n error: state.evidence.error,\n evidenceTypes: state.evidence.evidenceTypes,\n updateInProgress: state.evidence.updateInProgress,\n addedEvidence: state.evidence.updatedEvidence,\n\n managedPeople: state.auth.managedPeople,\n contentTranslations: state.content.contentTranslations,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onEvidence: bindActionCreators(evidenceActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(AddNewEvidenceForm);\n","import * as evidenceActions from \"../../store/actions/evidenceAction\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport AddNewEvidenceForm from \"./AddNewEvidenceForm\";\nimport { faMinus, faPlus } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { bindActionCreators } from \"redux\";\n\nconst buttonActionPrimaryStyle = {\n height: \"32px\",\n width: \"80px\",\n};\nclass EvidenceResponsibilityBody extends React.Component {\n static displayName = EvidenceResponsibilityBody.name;\n\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n showAddEvidenceForm: false,\n };\n }\n\n componentDidMount() {}\n\n componentDidUpdate(prevProps) {\n if (prevProps.showHiddenSkills !== this.props.showHiddenSkills) {\n this.setState({ showAddEvidenceForm: false });\n }\n }\n\n handleAddEvidenceClick = () => {\n this.setState({\n showAddEvidenceForm: !this.state.showAddEvidenceForm,\n });\n };\n\n handleCloseAddEvidence = () => {\n this.setState({\n showAddEvidenceForm: false,\n });\n };\n\n handleEvidenceAdded = (addedEvidence) => {\n this.handleCloseAddEvidence();\n this.props.handleEvidenceAdded(addedEvidence);\n };\n\n render() {\n let isAdmin = false;\n\n const authMode = this.props.authMode;\n let authModes = authMode.split(\",\").map((item) => item.trim());\n if (authModes.filter((it) => it != \"Admin\").length == 0) {\n isAdmin = true;\n }\n\n const { evidences, lor, lorProfile } = this.props;\n\n let evidencesSkills = evidences.map((evidence) => {\n return {\n id: evidence.id,\n skills: [\n ...evidence.lorLevels.map((lor) => {\n return lor.lorCode + lor.level;\n }),\n ...evidence.skillLevels.map((lor) => {\n return lor.skillCode + lor.level;\n }),\n ],\n };\n });\n\n if (lorProfile) {\n const evidenceAdded = evidencesSkills.find((evidencesSkill) => evidencesSkill.skills.some((skill) => skill == lorProfile.lorCode + lorProfile.level)) ? true : false;\n\n const defaultSelectedLor = {\n lorLevelId: lor.levels.find((it) => it.levelNumber == lorProfile.level) ? lor.levels.find((it) => it.levelNumber == lorProfile.level).id : null,\n lor: lorProfile.lor,\n lorCode: lorProfile.lorCode,\n level: lorProfile.level,\n };\n\n return (\n \n \n \n \n {lorProfile ? lorProfile.level : 0} \n \n {!this.state.showAddEvidenceForm ? (\n \n \n ) : (\n \n \n )}\n \n \n {this.state.showAddEvidenceForm && (\n \n \n \n \n \n )}\n \n );\n } else {\n return \n \n {`${this.contentTranslator(this.props.contentTranslations, \"Skills\", skill.skill, skill.skill)} (${skill.skillsCode})`} \n \n \n this.props.openSkillDescriptionModal({\n skillsCode: skill.skillsCode,\n description: this.contentTranslator(this.props.contentTranslations, \"Skills\", `${skill.name} Description`, skill.description),\n })\n }\n >\n \n \n {skillSelected ? (\n this.props.handleEvidenceBadgeRequestUnSelect(skill)}>\n \n ) : submitBadgeRequestSkills.length >= maxNumberOfBadgeRequestSkill ? (\n \n \n \n ) : (\n this.props.handleEvidenceBadgeRequestSelect(skill)}>\n \n )}\n \n \n \n );\n } else {\n return \n \n {(showAll ? levelIndex === 0 : level.skillNameShown) && `${this.contentTranslator(this.props.contentTranslations, \"Skills\", skill.name, skill.name)} (${skill.skillsCode})`} \n \n {`${skill.skillsCode}${level.level} - `}\n \n this.props.openSkillLevelDescriptionModal({\n skillsCode: skill.skillsCode,\n level: level.level,\n description: this.contentTranslator(this.props.contentTranslations, \"SkillLevels\", `${skill.skillsCode} ${level.level} Description`, level.description),\n })\n }\n >\n \n \n {!this.state.showAddEvidenceForm ? (\n \n \n ) : (\n \n \n )}\n \n \n {this.state.showAddEvidenceForm && (\n \n \n \n \n \n )}\n \n );\n } else {\n return \n {lorCategories.map((lorCategory, index) => {\n const categoryHidden = !lorCategory.lors.some((lor) => !lor.isHidden) && !this.state.showHiddenSkills;\n\n return (\n \n \n \n \n {lorCategory.category == \"Generic Attributes\" ? \n \n \n \n \n \n \n \n {lors &&\n lors\n .filter((it) => (it.category ? it.category : \"Generic Attributes\") == (lorCategory.category ? lorCategory.category : \"Generic Attributes\"))\n //.sort((a, b) => (`${a.sequence}${a.order}${a.name}` > `${b.sequence}${b.order}${b.name}` ? 1 : -1))\n .sort((a, b) => {\n if (a.sequence > b.sequence) {\n return 1;\n }\n if (a.sequence < b.sequence) {\n return -1;\n }\n if (a.order > b.order) {\n return 1;\n }\n if (a.order < b.order) {\n return -1;\n }\n if (a.name > b.name) {\n return 1;\n }\n if (a.name < b.name) {\n return -1;\n }\n return 0;\n })\n .map((lor, index) => {\n const lorHidden = lor.isHidden && !this.state.showHiddenSkills;\n const lorProfile = lorProfiles ? lorProfiles.find((x) => x.lor === lor.name) : null;\n\n return (\n \n );\n })}\n \n \n \n \n \n
\n );\n })}\n \n );\n };\n\n renderSkillProfiles = () => {\n const { categories } = this.props;\n\n return (\n categories &&\n categories.map((category, index) => {\n return {this.renderSkillSubCategories(category)} ;\n })\n );\n };\n\n renderSkillSubCategories = (category) => {\n const evidences = this.props.evidences;\n const evidencesSkills = evidences.map((evidence) => {\n return {\n id: evidence.id,\n skills: [\n ...evidence.lorLevels.map((lor) => {\n return lor.lorCode + lor.level;\n }),\n ...evidence.skillLevels.map((lor) => {\n return lor.skillCode + lor.level;\n }),\n ],\n };\n });\n const submitBadgeRequestMode = this.state.submitBadgeRequestMode;\n\n const content = category.subCategories.map((subCategory, subIndex) => {\n const shownLevel = subCategory.skills.filter((skill) => skill.levels.some((level) => level.show));\n let subCatSkillProfilesCodeShown = subCategory.skills.filter((skill) => skill.levels.some((level) => level.show)).map((skill) => skill.skillsCode);\n const checkedSubCatSkills = subCategory.skills.filter((it) => subCatSkillProfilesCodeShown.includes(it.skillsCode));\n const subCategoryHidden = !checkedSubCatSkills.some((skill) => !skill.isHidden) && (!this.state.showHiddenSkills || submitBadgeRequestMode);\n\n return (\n (shownLevel.length > 0 || this.props.showAll) && (\n \n \n \n \n \n \n \n \n \n \n \n {!submitBadgeRequestMode ? \n {!submitBadgeRequestMode ? \n \n \n {this.renderSkills(category, subCategory)}\n \n \n \n \n \n )\n );\n });\n\n return content;\n };\n\n renderSkills = (category, subCategory) => {\n const submitBadgeRequestMode = this.state.submitBadgeRequestMode;\n const evidences = this.props.evidences;\n const evidencesSkills = evidences.map((evidence) => {\n return {\n id: evidence.id,\n skills: [\n ...evidence.lorLevels.map((lor) => {\n return lor.lorCode + lor.level;\n }),\n ...evidence.skillLevels.map((lor) => {\n return lor.skillCode + lor.level;\n }),\n ],\n };\n });\n\n return (\n \n {subCategory.skills.map((skill, skillIndex) => {\n const skillHidden = skill.isHidden && (!this.state.showHiddenSkills || submitBadgeRequestMode);\n\n if (submitBadgeRequestMode) {\n const show = skill.levels.filter((it) => it.show).length > 0 ? true : false;\n\n return (\n \n {show && (\n \n )}\n \n );\n } else {\n return (\n \n {skill.levels.map((level, levelIndex) => {\n return (\n (level.show || this.props.showAll) && (\n \n )\n );\n })}\n \n );\n }\n })}\n \n );\n };\n\n openSkillLevelDescriptionModal = (level) => {\n this.setState({ poppedUpLevel: level, skillLevelDescriptionShow: true });\n };\n\n togleSkillLevelDescriptionModal = () => {\n const skillLevelDescriptionShow = this.state.skillLevelDescriptionShow;\n this.setState({ skillLevelDescriptionShow: !skillLevelDescriptionShow });\n };\n\n openSkillDescriptionModal = (skill) => {\n this.setState({ poppedUpSkill: skill, skillDescriptionShow: true });\n };\n\n togleSkillDescriptionModal = () => {\n const skillDescriptionShow = this.state.skillDescriptionShow;\n this.setState({ skillDescriptionShow: !skillDescriptionShow });\n };\n\n handleAddEvidenceClick = () => {\n this.setState({\n showAddEvidenceForm: !this.state.showAddEvidenceForm,\n });\n };\n\n handleCloseAddEvidence = () => {\n this.setState({\n showAddEvidenceForm: false,\n });\n };\n\n handleEvidenceAdded = (addedEvidence) => {\n this.props.handleEvidenceAdded(addedEvidence);\n this.handleCloseAddEvidence();\n this.props.generateAlert(\"success\", \"New Evidence Added\");\n };\n\n handleCertifySkills = () => {\n this.setState({ submitBadgeRequestMode: true, showHiddenSkills: false });\n };\n\n handleCancelCertifySkills = () => {\n this.setState({ submitBadgeRequestMode: false, submitBadgeRequestSkills: [] });\n };\n\n handleEvidenceBadgeRequestSelect = (selectedSkill) => {\n let submitBadgeRequestSkills = this.state.submitBadgeRequestSkills;\n submitBadgeRequestSkills.push(selectedSkill);\n this.setState({ submitBadgeRequestSkills: [...submitBadgeRequestSkills] });\n };\n\n handleEvidenceBadgeRequestUnSelect = (selectedSkill) => {\n let submitBadgeRequestSkills = this.state.submitBadgeRequestSkills;\n if (submitBadgeRequestSkills.find((it) => it.skillsCode == selectedSkill.skillsCode)) {\n const index = submitBadgeRequestSkills.indexOf(submitBadgeRequestSkills.find((it) => it.skillsCode == selectedSkill.skillsCode));\n if (index !== -1) {\n submitBadgeRequestSkills.splice(index, 1);\n }\n this.setState({ submitBadgeRequestSkills: [...submitBadgeRequestSkills] });\n }\n };\n\n handleChangeAcceptCheckBox = () => {\n const submitBadgeRequestAccept = this.state.submitBadgeRequestAccept;\n this.setState({ submitBadgeRequestAccept: !submitBadgeRequestAccept });\n };\n\n handleSubmitBadgeRequest = () => {\n const submitBadgeRequestSkills = this.state.submitBadgeRequestSkills;\n\n const badgeRequest = {\n submitDate: new Date(),\n status: \"Assessor not assigned\",\n requestEntries: submitBadgeRequestSkills.map((skill) => {\n return {\n category: skill.category,\n subCategory: skill.subCategory,\n skill: skill.skill,\n skillsCode: skill.skillsCode,\n };\n }),\n };\n\n this.setState({ showSubmitBadgeRequestConfirmationDialog: false, showLoadingPanel: true, loadingPanelHeader: \"Submit badge request\", loadingPanelBody: \"Please wait...\" });\n this.props.onBadgeRequest.submitBadgeRequest(badgeRequest).then(() => {\n if (!this.props.badgeRequestUpdating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.props.generateAlert(\"success\", \"Badge request submitted\");\n this.handleCancelCertifySkills();\n }\n }\n this.setState({ showLoadingPanel: this.props.badgeRequestUpdating });\n });\n };\n\n togleSubmitBadgeRequestConfirmationModal = () => {\n const showSubmitBadgeRequestConfirmationDialog = this.state.showSubmitBadgeRequestConfirmationDialog;\n this.setState({ showSubmitBadgeRequestConfirmationDialog: !showSubmitBadgeRequestConfirmationDialog });\n };\n\n renderSubmitBadgeRequestConfirmation = () => {\n return (\n \n \n \n \n \n {\n this.handleSubmitBadgeRequest();\n }}\n >\n OK\n \n \n Cancel\n \n \n \n );\n };\n\n renderLoadingPanel() {\n if (this.state.showLoadingPanel) {\n return (\n \n {this.state.loadingPanelHeader} \n \n \n \n );\n } else {\n return \"\";\n }\n }\n\n handleChageShowHiddenSkills = () => {\n const showHiddenSkills = this.state.showHiddenSkills;\n this.setState({ showHiddenSkills: !showHiddenSkills, showAddEvidenceForm: false });\n this.props.handleChageShowHiddenSkills(!showHiddenSkills);\n };\n\n render() {\n let isAdmin = false;\n\n const authMode = this.props.authMode;\n let authModes = authMode.split(\",\").map((item) => item.trim());\n if (authModes.filter((it) => it != \"Admin\").length == 0) {\n isAdmin = true;\n }\n\n const { poppedUpLevel, poppedUpSkill, submitBadgeRequestMode, maxNumberOfBadgeRequestSkill, submitBadgeRequestAccept, submitBadgeRequestSkills, showHiddenSkills } = this.state;\n const { optionsProfile, selectedOptionProfile } = this.props;\n\n return (\n \n {this.renderLoadingPanel()}\n {this.renderSubmitBadgeRequestConfirmation()}\n \n {poppedUpLevel && `${poppedUpLevel.skillsCode}-${poppedUpLevel.level}`} \n {poppedUpLevel &&
} \n \n \n {poppedUpSkill && `${poppedUpSkill.skillsCode}`} \n {poppedUpSkill &&
} \n \n \n \n {this.props.managedPeople\n ? this.parameterizedString(this.contentTranslator(this.props.contentTranslations, \"SfiaEvidence\", \"SfiaEvidenceManageEvidenceFor\", \"Manage Evidence for {s1}\"), `${this.props.managedPeople.personB.firstName} ${this.props.managedPeople.personB.lastName}`)\n : this.contentTranslator(this.props.contentTranslations, \"SfiaEvidence\", \"SfiaEvidenceManageEvidence\", \"Manage Your Evidence\")}\n
\n \n \n \n \n \n
\n option.value === selectedOptionProfile)} onChange={this.handleChangeProfile} options={optionsProfile} isDisabled={this.state.submitBadgeRequestMode} />\n \n
\n \n \n {/* {!this.props.managedPeople && } */}\n \n {showHiddenSkills\n ? this.contentTranslator(this.props.contentTranslations, \"SfiaEvidence\", \"SfiaEvidenceButtonHideHiddenSkills\", \"Hide Hidden Skills\")\n : this.contentTranslator(this.props.contentTranslations, \"SfiaEvidence\", \"SfiaEvidenceButtonShowHiddenSkills\", \"Show Hidden Skills\")}\n \n )}\n {(!this.state.myBadgeRequest || (this.state.myBadgeRequest && this.state.myBadgeRequest.status == \"Assessed\" && this.state.myBadgeRequest.certificationSubmitted)) &&\n this.props.containerConfig &&\n this.props.containerConfig.showSfiaCertificationAdmin &&\n this.props.containerConfig.allowCertification &&\n this.props.containerConfig.certificationCredit &&\n this.props.containerConfig.certificationCredit > 0 &&\n !this.props.managedPeople &&\n this.props.selectedOptionProfile == \"Self Assessed\" ? (\n \n \n \n \n \n \n Learn More.`}\n />\n \n \n ) : (\n \"\"\n )}\n {!this.state.showAddEvidenceForm ? (\n \n \n \n \n \n \n \n \n ) : (\n \n \n )}\n \n
\n {this.state.submitBadgeRequestMode && (\n \n \n \n {this.parameterizedString(this.contentTranslator(this.props.contentTranslations, \"SfiaEvidence\", \"SfiaEvidenceCertifyTitle\", \"From the list below please select up to {s1} skills to be assessed for certification.\"), maxNumberOfBadgeRequestSkill)} \n
\n \n \n
\n )}\n \n {this.state.showAddEvidenceForm && (\n \n
\n
\n \n \n \n \n \n \n \n \n \n {this.props.loadingAdd ? (\n \n
\n ) : (\n \n {!submitBadgeRequestMode && this.renderLorProfiles()}\n {this.renderSkillProfiles()}
\n \n )}\n \n \n {this.state.submitBadgeRequestMode && (\n \n \n \n HERE and confirm acceptance`} />{\" \"}\n \n \n \n \n \n \n
\n \n \n
\n )}\n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n lors: state.lor.lors,\n managedPeople: state.auth.managedPeople,\n authMode: state.auth.authMode,\n contentTranslations: state.content.contentTranslations,\n containerConfig: state.config.containerConfig,\n\n myBadgeRequest: state.badgeRequest.myBadgeRequest,\n badgeRequestUpdating: state.badgeRequest.isUpdating,\n error: state.badgeRequest.error,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onLor: bindActionCreators(lorActions, dispatch),\n onBadgeRequest: bindActionCreators(badgeRequestActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ManageEvidence);\n","import * as authActions from \"../../store/actions/authAction\";\nimport * as badgeRequestActions from \"../../store/actions/badgeRequestAction\";\nimport * as categoryActions from \"../../store/actions/categoryAction\";\nimport * as contentActions from \"../../store/actions/contentAction\";\nimport * as evidenceActions from \"../../store/actions/evidenceAction\";\nimport * as lorActions from \"../../store/actions/lorAction\";\nimport * as personActions from \"../../store/actions/personAction\";\nimport * as skillProfileActions from \"../../store/actions/skillProfileAction\";\nimport { dismisAlert, generateAlert } from \"../../utils/alertUtils\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport EvidenceList from \"./EvidenceList\";\nimport ManageEvidence from \"./ManageEvidence\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { Container, Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\nclass Evidence extends React.Component {\n static displayName = Evidence.name;\n\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n contentLoading: true,\n alerts: [],\n optionsProfile: [],\n evidences: [],\n addedEvidence: null,\n lorProfiles: [],\n skillProfiles: [],\n loadingEvidence: true,\n loadingEdit: true,\n loadingAdd: true,\n showHiddenSkills: false,\n };\n\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n\n this.initData = this.initData.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n if (this.props.language) {\n this.props.onContent.getContentTranslations(this.props.language.id, \"SfiaAll-Menu-SfiaProfileMenu-SfiaEvidence-Lors-Skills\").then(() => {\n this.setState({ contentLoading: this.props.contentLoading });\n\n this.props.onAuth.authCheckState().then(() => {\n if (window.location.pathname.includes(\"/Manage\")) {\n const query = new URLSearchParams(this.props.location.search);\n const email = query.get(\"email\");\n\n if (!this.props.managedPeople || !(this.props.managedPeople && this.props.managedPeople.personB.email.toLowerCase() == email.toLowerCase())) {\n this.setState({ loading: true });\n\n this.props.onPerson.getPersonMyPeopleByEmail(email).then(() => {\n if (!this.props.personLoading && this.props.personManagedPeople) {\n this.props.onAuth.myPeopleSetManagedRelationship(this.props.personManagedPeople).then(() => {\n if (!this.props.personLoading && this.props.personManagedPeople) {\n this.initData();\n }\n\n this.setState({ loading: this.props.personLoading });\n });\n } else {\n this.setState({ loading: this.props.personLoading });\n }\n });\n } else {\n this.initData();\n }\n } else {\n this.initData();\n }\n });\n });\n } else {\n this.props.onAuth.authCheckState().then(() => {\n if (window.location.pathname.includes(\"/Manage\")) {\n const query = new URLSearchParams(this.props.location.search);\n const email = query.get(\"email\");\n\n if (!this.props.managedPeople || !(this.props.managedPeople && this.props.managedPeople.personB.email.toLowerCase() == email.toLowerCase())) {\n this.setState({ loading: true });\n\n this.props.onPerson.getPersonMyPeopleByEmail(email).then(() => {\n if (!this.props.personLoading && this.props.personManagedPeople) {\n this.props.onAuth.myPeopleSetManagedRelationship(this.props.personManagedPeople).then(() => {\n if (!this.props.personLoading && this.props.personManagedPeople) {\n this.initData();\n }\n\n this.setState({ loading: this.props.personLoading });\n });\n } else {\n this.setState({ loading: this.props.personLoading });\n }\n });\n } else {\n this.initData();\n }\n } else {\n this.initData();\n }\n });\n }\n }\n\n initData() {\n this.setState({ loading: true });\n\n Promise.resolve(this.props.managedPeople ? this.props.onSkillProfile.getManagedPeopleProfileTypes(this.props.managedPeople.personB.email) : this.props.onSkillProfile.getMyProfileTypes()).then(() => {\n if (this.props.errorProfile) {\n this.setState({ loading: false });\n } else {\n this.setState({ loading: false });\n\n let profileType = null;\n\n if (this.props.profileTypes.length > 0) {\n profileType = this.props.profileTypes[0];\n this.setState({\n optionsProfile: this.props.profileTypes.map((it) => {\n return {\n value: it,\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", it.replace(\" \", \"\"), it),\n };\n }),\n selectedprofileType: profileType,\n });\n }\n\n Promise.all([\n this.props.managedPeople ? this.props.onEvidence.getEvidencesByManagedPeopleAccountId(this.props.managedPeople.personB.email) : this.props.onEvidence.getEvidencesByAccountId(),\n this.props.containerConfig && this.props.containerConfig.showSfiaCertificationAdmin && this.props.containerConfig.allowCertification && this.props.onBadgeRequest.getMyLatestBadgeRequest(),\n ]).then(() => {\n if (!this.props.loadingEvidence && !this.props.errorEvidence) {\n const evidences = this.props.evidences;\n\n this.setState({\n evidences,\n });\n }\n\n this.setState({\n loadingEvidence: this.props.loadingEvidence || (this.props.containerConfig && this.props.containerConfig.showSfiaCertificationAdmin && this.props.containerConfig.allowCertification && this.props.badgeRequestLoading),\n });\n });\n\n Promise.all([\n this.props.onCategory.getCategories(),\n this.props.onLor.getLors(),\n this.props.onEvidence.getEvidenceTypes(),\n this.props.managedPeople ? this.props.onSkillProfile.getManagedPeopleLorProfile(this.props.managedPeople.personB.email, null, null, profileType) : this.props.onSkillProfile.getMyLorProfile(null, null, profileType),\n this.props.managedPeople ? this.props.onSkillProfile.getManagedPeopleSkillProfile(this.props.managedPeople.personB.email, null, null, profileType) : this.props.onSkillProfile.getMySkillProfile(null, null, profileType),\n ])\n .then(() => {\n if (!this.props.lorLoading && !this.props.lorError && !this.props.categoryLoading && !this.props.categoryError && !this.props.loadingProfile && !this.props.errorProfile) {\n const lorProfiles = this.props.lorProfiles;\n const skillProfiles = this.props.skillProfiles.filter((it) => it.numericVal != 0);\n\n this.populateCategories();\n\n this.setState({\n lorProfiles,\n skillProfiles,\n });\n }\n\n this.setState({\n loadingAdd: this.props.lorLoading || this.props.categoryLoading || this.props.loadingProfile,\n });\n })\n .catch((err) => {\n this.setState({\n loadingAdd: false,\n });\n });\n }\n });\n }\n\n handleChangeProfileType = (value) => {\n this.setState({ selectedprofileType: value });\n\n Promise.all([\n this.props.managedPeople ? this.props.onSkillProfile.getManagedPeopleLorProfile(this.props.managedPeople.personB.email, null, null, value) : this.props.onSkillProfile.getMyLorProfile(null, null, value),\n this.props.managedPeople ? this.props.onSkillProfile.getManagedPeopleSkillProfile(this.props.managedPeople.personB.email, null, null, value) : this.props.onSkillProfile.getMySkillProfile(null, null, value),\n ]).then(() => {\n const lorProfiles = this.props.lorProfiles;\n const skillProfiles = this.props.skillProfiles.filter((it) => it.numericVal != 0);\n this.setState({ lorProfiles, skillProfiles });\n\n this.populateCategories();\n });\n };\n\n populateCategories = () => {\n const skillProfiles = this.props.skillProfiles.filter((it) => it.numericVal != 0);\n\n let categories = this.props.categories;\n\n categories = categories.map((category) => {\n return {\n id: category.id,\n name: category.name,\n description: category.description,\n colour: category.colour,\n sfiaVersion: category.sfiaVersion,\n subCategories: category.subCategories.map((subCategory) => {\n return {\n id: subCategory.id,\n name: subCategory.name,\n description: subCategory.description,\n colour: subCategory.colour,\n skillColour: subCategory.skillColour,\n skills: subCategory.skills.map((skill) => {\n let skillNameShown = false;\n\n return {\n id: skill.id,\n name: skill.name,\n skillsCode: skill.skillsCode,\n description: skill.description,\n isHidden: skill.isHidden,\n levels: skill.levels.map((level) => {\n const skillProfile = skillProfiles.find((x) => x.skillCode == skill.skillsCode && x.level == level.level);\n\n level = {\n skillNameShown: false,\n show: false,\n id: level.id,\n level: level.level,\n description: level.description,\n skillProfile: skillProfile,\n };\n if (!skillNameShown) {\n if (level.skillProfile || this.state.showAllSkill) {\n level.skillNameShown = true;\n skillNameShown = true;\n }\n }\n\n if (level.skillProfile) {\n level.show = true;\n }\n\n return level;\n }),\n };\n }),\n };\n }),\n };\n });\n\n this.setState({\n categories,\n loadingAdd: false,\n loadingEdit: false,\n });\n };\n\n handleEvidenceAdded = (addedEvidence) => {\n const evidences = this.state.evidences;\n this.setState({ addedEvidence, evidences: [...evidences, addedEvidence] });\n };\n\n handleEvidenceDeleted = (deletedId) => {\n const evidences = this.state.evidences;\n const deletedEvidence = evidences.find((it) => it.id == deletedId);\n\n if (deletedEvidence) {\n this.setState({\n evidences: [...evidences.filter((it) => it.id != deletedId)],\n });\n }\n };\n\n handleEvidenceUpdated = (updatedEvidence) => {\n const evidences = this.state.evidences;\n const editedEvidence = evidences.find((it) => it.id == updatedEvidence.id);\n\n if (editedEvidence) {\n const updatedEvidenceIndex = evidences.indexOf(editedEvidence);\n evidences[updatedEvidenceIndex] = updatedEvidence;\n }\n this.setState({ evidences: [...evidences] });\n };\n\n handleChageShowHiddenSkills = (showHiddenSkills) => {\n this.setState({ showHiddenSkills: showHiddenSkills });\n };\n\n render() {\n return (\n \n {this.state.loading || this.state.contentLoading ? (\n \n
\n ) : (\n \n \n {this.state.optionsProfile && this.state.optionsProfile.length > 0 && (\n \n )}\n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loadingProfile: state.skillProfile.loading,\n errorProfile: state.skillProfile.error,\n profileTypes: state.skillProfile.profileTypes,\n skillProfiles: state.skillProfile.skillProfiles,\n\n categories: state.category.categories,\n categoryLoading: state.category.loading,\n categoryError: state.category.error,\n\n loadingEvidence: state.evidence.loading,\n errorEvidence: state.evidence.error,\n evidences: state.evidence.evidences,\n\n lorLoading: state.lor.loading,\n lorError: state.lor.error,\n\n loadingLor: state.skillProfile.lorLoading,\n errorLor: state.skillProfile.lorError,\n lorProfiles: state.skillProfile.lorProfiles,\n\n personLoading: state.person.loading,\n personManagedPeople: state.person.managedPeople,\n managedPeople: state.auth.managedPeople,\n\n language: state.language.language,\n contentTranslations: state.content.contentTranslations,\n contentLoading: state.content.loading,\n contentError: state.content.error,\n containerConfig: state.config.containerConfig,\n myBadgeRequest: state.badgeRequest.myBadgeRequest,\n badgeRequestLoading: state.badgeRequest.loading,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onSkillProfile: bindActionCreators(skillProfileActions, dispatch),\n onEvidence: bindActionCreators(evidenceActions, dispatch),\n onLor: bindActionCreators(lorActions, dispatch),\n onCategory: bindActionCreators(categoryActions, dispatch),\n onPerson: bindActionCreators(personActions, dispatch),\n onContent: bindActionCreators(contentActions, dispatch),\n onBadgeRequest: bindActionCreators(badgeRequestActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Evidence);\n","import * as evidenceActions from \"../../store/actions/evidenceAction\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { bindActionCreators } from \"redux\";\n\nconst toBase64 = (file) =>\n new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = () => resolve(reader.result);\n reader.onerror = (error) => reject(error);\n });\n\nclass EvidenceDownload extends React.Component {\n static displayName = EvidenceDownload.name;\n\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n fileName: null,\n };\n }\n\n componentDidMount() {\n const query = new URLSearchParams(this.props.location.search);\n const id = query.get(\"id\");\n const fileName = query.get(\"filename\");\n const email = query.get(\"email\");\n\n Promise.resolve(this.props.managed ? this.props.onEvidence.downloadManagedPeopleEvidenceFileById(email, id) : this.props.onEvidence.downloadEvidenceFileById(id)).then(() => {\n if (!this.props.loading) {\n if (!this.props.error && this.props.evidenceFile) {\n const url = window.URL.createObjectURL(this.props.evidenceFile);\n const link = document.createElement(\"a\");\n link.href = url;\n link.setAttribute(\"download\", fileName); //or any other extension\n document.body.appendChild(link);\n link.click();\n\n setTimeout(() => {\n window.close();\n }, 100);\n }\n }\n });\n }\n\n render() {\n return \n
\n ),\n selector: (row) => row.id,\n sortable: false,\n width: \"25%\",\n format: function (row, index) {\n return `${row.personA.firstName} ${row.personA.lastName}`;\n },\n wrap: true,\n center: false,\n },\n {\n id: \"relationshipType\",\n name: (\n \n
\n ),\n selector: (row) => row.relationshipType,\n sortable: false,\n width: \"25%\",\n format: function (row, index) {\n return `${row.relationshipType} ${row.relationshipType == \"Mentor\" && row.status != \"Accepted\" ? `(${row.status})` : \"\"}`;\n },\n wrap: true,\n center: false,\n },\n {\n id: \"createdOn\",\n name: (\n \n
\n ),\n selector: (row) => row.createdOn,\n sortable: false,\n width: \"25%\",\n format: function (row, index) {\n return row.createdOn\n ? new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(row.createdOn))\n : \"\";\n },\n wrap: true,\n center: false,\n },\n {\n id: \"personAId\",\n name: (\n \n
\n ),\n selector: (row) => row.personAId,\n sortable: false,\n width: \"25%\",\n format: function (row, index) {\n return {row.personA.email} ;\n },\n wrap: true,\n center: false,\n },\n ];\n\n return (\n \n \n
\n ) : (\n \n \n
\n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.person.loading,\n error: state.person.error,\n myLeaders: state.person.myLeaders,\n account: state.person.account,\n updating: state.person.updating,\n\n language: state.language.language,\n contentTranslations: state.content.contentTranslations,\n contentLoading: state.content.loading,\n contentError: state.content.error,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onPerson: bindActionCreators(personActions, dispatch),\n onContent: bindActionCreators(contentActions, dispatch),\n onConfig: bindActionCreators(configActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(MyLeaders);\n","import { dismisAlert, generateAlert } from \"../../../src/utils/alertUtils\";\nimport * as authActions from \"../../store/actions/authAction\";\nimport * as configActions from \"../../store/actions/configAction\";\nimport * as contentActions from \"../../store/actions/contentAction\";\nimport * as personActions from \"../../store/actions/personAction\";\nimport * as adminEmailTemplateActions from \"../../store/admin/actions/adminEmailTemplateActions\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport { ContentWrapperLg } from \"../common/ContentWrapperLg\";\nimport { SkillsTxTable } from \"../common/SkillsTxTable\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport \"./../../custom-my-people.css\";\nimport { faCheckCircle, faExclamationCircle, faTimesCircle, faArrowUp, faArrowDown } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React, { Fragment } from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { Link } from \"react-router-dom\";\nimport { Button, ButtonGroup, Col, Container, Form, FormGroup, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner, Table, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst headerStyle = {\n color: \"#2B2B2B\",\n fontSize: \"22px\",\n fontFamily: \"IBMPlexSans-Bold\",\n};\n\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nclass MyPeople extends React.Component {\n static displayName = MyPeople.name;\n\n constructor(props) {\n super(props);\n this.connection = null;\n this.state = {\n loading: false,\n contentLoading: true,\n myPeoples: [],\n columnDisplaySettings: [],\n alerts: [],\n generateActivityStatementProgress: false,\n showUpdateColumnSettingDialog: false,\n isUpdating: false,\n emailTemplate: null,\n };\n\n this.initData = this.initData.bind(this);\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n localStorage.setItem(\"manageEndorsementOperation\", \"HIDE\");\n\n if (this.props.language) {\n this.props.onContent.getContentTranslations(this.props.language.id, \"SfiaAll-Menu-SfiaProfileMenu-SfiaManage-Lors-Skills\").then(() => {\n this.setState({ contentLoading: this.props.contentLoading });\n\n this.initData();\n });\n } else {\n this.initData();\n }\n }\n\n componentWillUnmount() {\n this.setState = (state, callback) => {\n return;\n };\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.columnDisplaySettings !== this.props.columnDisplaySettings) {\n this.setState({ columnDisplaySettings: this.props.columnDisplaySettings });\n }\n }\n\n initData() {\n this.setState({ loading: true });\n\n if (!this.props.currAssessment) {\n this.props.onConfig.getCurrAssessment().then(() => {});\n }\n\n this.props.onEmailTemplate.getEmailTemplateByType(\"Activity Statement Notification\").then(() => {\n if (!this.props.emailTemplateLoading) {\n this.setState({ emailTemplate: this.props.emailTemplate });\n }\n });\n\n Promise.all([this.props.onPerson.getPersonMyPeoples(), this.props.onPerson.getPersonLatestAccount(), this.props.onPerson.getColumnDisplaySettings(\"My People\")])\n .then(() => {\n if (!this.props.loading && !this.props.columnDisplaySettingsLoading) {\n const myPeoples = this.props.myPeoples.sort((a, b) => (`${a.personB.firstName} ${a.personB.lastName}` > `${b.personB.firstName} ${b.personB.lastName}` ? 1 : -1));\n\n this.setState({\n myPeoples,\n account: this.props.account,\n columnDisplaySettings: this.props.columnDisplaySettings,\n });\n }\n\n this.setState({ loading: this.props.loading || this.props.columnDisplaySettingsLoading });\n })\n .catch(() => {\n this.setState({\n loading: false,\n });\n });\n }\n\n setManagedPeopleRelationship = (relationship) => {\n this.setState({ showLoadingPanel: true, loadingPanelHeader: \"\", loadingPanelBody: \"Please wait...\" });\n Promise.resolve(this.props.onAuth.myPeopleSetManagedRelationship(relationship)).then(() => {\n Promise.resolve(this.props.onPerson.clearPersonAccountState()).then(() => {\n localStorage.setItem(\"showApprovedProfileOnly\", \"FALSE\");\n this.props.history.push(`Manage?email=${relationship.personB.email}`);\n });\n });\n };\n\n handleGenerateActivityStatement = () => {\n this.setState({ generateActivityStatementProgress: true, showLoadingPanel: true, loadingPanelHeader: \"Generate Activity Statement\", loadingPanelBody: \"Please wait...\" });\n\n this.props.onPerson.generateActivityStatement().then(() => {\n if (!this.props.updating) {\n if (this.props.error) {\n this.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.generateAlert(\"success\", \"Activity statement sent\");\n }\n }\n\n this.setState({ generateActivityStatementProgress: this.props.updating, showLoadingPanel: this.props.updating });\n });\n };\n\n renderLoadingPanel() {\n if (this.state.showLoadingPanel) {\n return (\n \n {this.state.loadingPanelHeader} \n \n \n \n );\n } else {\n return \"\";\n }\n }\n\n handleShowColumnsSetting = () => {\n this.setState({ showUpdateColumnSettingDialog: true });\n };\n\n togleColumnsSettingDialog = () => {\n this.setState({ showUpdateColumnSettingDialog: false });\n };\n\n updateColumnDisplaySettingVisibility = (columnDisplaySetting) => {\n columnDisplaySetting.visible = !columnDisplaySetting.visible;\n this.setState({ showLoadingPanel: true, loadingPanelHeader: \"\", loadingPanelBody: \"Please wait...\" });\n\n this.props.onPerson.updateColumnDisplaySetting(columnDisplaySetting).then(() => {\n this.setState({ showLoadingPanel: this.props.columnDisplaySettingsLoading });\n });\n };\n\n moveColumnDisplaySettingOrderUp = (columnDisplaySetting) => {\n columnDisplaySetting.visible = !columnDisplaySetting.visible;\n this.setState({ showLoadingPanel: true, loadingPanelHeader: \"\", loadingPanelBody: \"Please wait...\" });\n\n this.props.onPerson.updateColumnDisplaySettingOrderUp(columnDisplaySetting.id).then(() => {\n this.setState({ showLoadingPanel: this.props.columnDisplaySettingsLoading });\n });\n };\n\n moveColumnDisplaySettingOrderDown = (columnDisplaySetting) => {\n columnDisplaySetting.visible = !columnDisplaySetting.visible;\n this.setState({ showLoadingPanel: true, loadingPanelHeader: \"\", loadingPanelBody: \"Please wait...\" });\n\n this.props.onPerson.updateColumnDisplaySettingOrderDown(columnDisplaySetting.id).then(() => {\n this.setState({ showLoadingPanel: this.props.columnDisplaySettingsLoading });\n });\n };\n\n renderColumnsSettingDialog = () => {\n const { columnDisplaySettings } = this.state;\n const updateColumnDisplaySettingVisibility = this.updateColumnDisplaySettingVisibility;\n const moveColumnDisplaySettingOrderUp = this.moveColumnDisplaySettingOrderUp;\n const moveColumnDisplaySettingOrderDown = this.moveColumnDisplaySettingOrderDown;\n\n const columns = [\n {\n id: \"visible\",\n name: \"Visible\",\n selector: (row) => row.visible,\n sortable: false,\n width: \"15%\",\n center: true,\n format: function (row, index) {\n return (\n \n \n updateColumnDisplaySettingVisibility(row)} style={{ color: \"transparent\", fontSize: \"10px\" }}>\n A\n \n updateColumnDisplaySettingVisibility(row)} style={{ color: \"transparent\", fontSize: \"10px\" }}>\n A\n \n \n
\n );\n },\n },\n {\n id: \"caption\",\n name: \"Caption\",\n selector: (row) => row.caption,\n sortable: false,\n width: \"65%\",\n center: false,\n format: function (row, index) {\n switch (row.columnName) {\n case \"name\":\n return \n moveColumnDisplaySettingOrderUp(row)} />\n \n Move Up\n \n \n moveColumnDisplaySettingOrderDown(row)} />\n \n Move Down\n \n
\n );\n },\n },\n ];\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n };\n\n render() {\n const { myPeoples, columnDisplaySettings } = this.state;\n const { language } = this.props;\n\n let showRequestApproval = false;\n if (this.props.currAssessment) {\n showRequestApproval = this.props.currAssessment.enableApprovalRequest;\n }\n\n let showHeaderTooltip = false;\n if (language && language.name != \"English\") {\n showHeaderTooltip = true;\n }\n\n let columns = [];\n const setManagedPeopleRelationship = this.setManagedPeopleRelationship;\n const totalWidth = 913;\n let hiddenWidth = 0;\n let visibleColumn = 0;\n let separateColumnWidth = 0;\n\n if (columnDisplaySettings) {\n columnDisplaySettings.map((columnDisplaySetting) => {\n if (columnDisplaySetting.visible == false) {\n switch (columnDisplaySetting.columnName) {\n case \"name\":\n hiddenWidth += showRequestApproval ? 135 : 155;\n break;\n case \"relationshipType\":\n hiddenWidth += showRequestApproval ? 95 : 150;\n break;\n case \"activityStatus\":\n hiddenWidth += 70;\n break;\n case \"isApprovalRequested\":\n hiddenWidth += 75;\n break;\n case \"currentJobTitle\":\n hiddenWidth += 129;\n break;\n case \"currentJobMatchPercentSelf\":\n hiddenWidth += 69;\n break;\n case \"currentJobMatchPercentValidated\":\n hiddenWidth += 71;\n break;\n case \"futureJobTitle\":\n hiddenWidth += 129;\n break;\n case \"futureJobMatchPercentSelf\":\n hiddenWidth += 69;\n break;\n case \"futureJobMatchPercentValidated\":\n hiddenWidth += 71;\n break;\n default:\n }\n } else {\n visibleColumn += 1;\n }\n });\n\n if (hiddenWidth > 0 && visibleColumn > 0) {\n separateColumnWidth = hiddenWidth / visibleColumn;\n }\n\n columnDisplaySettings\n .filter((it) => it.visible)\n .sort((a, b) => a.order - b.order)\n .map((columnDisplaySetting) => {\n switch (columnDisplaySetting.columnName) {\n case \"name\":\n columns.push({\n id: columnDisplaySetting.columnName,\n name: (\n \n \n \n {showHeaderTooltip && (\n \n )}\n
\n ),\n selector: (row) => row[columnDisplaySetting.columnName],\n sortable: false,\n width: `${(showRequestApproval ? 135 : 155) + separateColumnWidth}px`,\n format: function (row, index) {\n return (\n \n \n \n {showHeaderTooltip && (\n \n )}\n
\n ),\n selector: (row) => row[columnDisplaySetting.columnName],\n sortable: false,\n width: `${(showRequestApproval ? 95 : 150) + separateColumnWidth}px`,\n format: function (row, index) {\n return row[columnDisplaySetting.columnName];\n },\n wrap: true,\n });\n break;\n case \"activityStatus\":\n columns.push({\n id: columnDisplaySetting.columnName,\n name: (\n \n \n \n {showHeaderTooltip && (\n \n )}\n
\n ),\n selector: (row) => row[columnDisplaySetting.columnName],\n sortable: false,\n width: `${70 + separateColumnWidth}px`,\n center: true,\n format: function (row, index) {\n return (\n \n \n {row[columnDisplaySetting.columnName] == 1 ? (\n
\n \n {row[columnDisplaySetting.columnName] == 1 ? (\n \n \n );\n },\n });\n break;\n case \"isApprovalRequested\":\n columns.push({\n id: columnDisplaySetting.isApprovalRequested,\n name: (\n \n \n \n {showHeaderTooltip && (\n \n )}\n
\n ),\n selector: (row) => row[columnDisplaySetting.isApprovalRequested],\n sortable: false,\n width: `${75 + separateColumnWidth}px`,\n center: true,\n format: function (row, index) {\n return (\n \n \n {row.isApprovalRequested || (row.latestProfileVersion && row.approvedVersion && row.latestProfileVersion == row.approvedVersion) ? (\n row.latestProfileVersion && row.approvedVersion && row.latestProfileVersion == row.approvedVersion ? (\n \n \n )\n ) : (\n
\n \n {row.isApprovalRequested || (row.latestProfileVersion && row.approvedVersion && row.latestProfileVersion == row.approvedVersion) ? (\n row.latestProfileVersion && row.approvedVersion && row.latestProfileVersion == row.approvedVersion ? (\n \n \n );\n },\n omit: !showRequestApproval,\n });\n break;\n case \"currentJobTitle\":\n columns.push({\n id: columnDisplaySetting.columnName,\n name: (\n \n \n \n {showHeaderTooltip && (\n \n )}\n
\n ),\n selector: (row) => row[columnDisplaySetting.columnName],\n sortable: false,\n width: `${129 + separateColumnWidth}px`,\n format: function (row, index) {\n return {row[columnDisplaySetting.columnName]}
;\n },\n wrap: true,\n });\n break;\n case \"currentJobMatchPercentSelf\":\n columns.push({\n id: columnDisplaySetting.columnName,\n name: (\n \n \n \n {showHeaderTooltip && (\n \n )}\n
\n ),\n selector: (row) => row[columnDisplaySetting.columnName],\n sortable: false,\n width: `${69 + separateColumnWidth}px`,\n format: function (row, index) {\n return {row.currentJobMatchPercentSelf && row.currentJobMatchPercentSelf > 0 ? `${row.currentJobMatchPercentSelf}%` : \"\"}
;\n },\n wrap: true,\n });\n break;\n case \"currentJobMatchPercentValidated\":\n columns.push({\n id: columnDisplaySetting.columnName,\n name: (\n \n \n \n {showHeaderTooltip && (\n \n )}\n
\n ),\n selector: (row) => row[columnDisplaySetting.columnName],\n sortable: false,\n width: `${71 + separateColumnWidth}px`,\n format: function (row, index) {\n return {row.currentJobMatchPercentValidated && row.currentJobMatchPercentValidated > 0 ? `${row.currentJobMatchPercentValidated}%` : \"\"}
;\n },\n wrap: true,\n });\n break;\n case \"futureJobTitle\":\n columns.push({\n id: columnDisplaySetting.columnName,\n name: (\n \n \n \n {showHeaderTooltip && (\n \n )}\n
\n ),\n selector: (row) => row[columnDisplaySetting.columnName],\n sortable: false,\n width: `${129 + separateColumnWidth}px`,\n format: function (row, index) {\n return {row[columnDisplaySetting.columnName]}
;\n },\n wrap: true,\n });\n break;\n case \"futureJobMatchPercentSelf\":\n columns.push({\n id: columnDisplaySetting.columnName,\n name: (\n \n \n \n {showHeaderTooltip && (\n \n )}\n
\n ),\n selector: (row) => row[columnDisplaySetting.columnName],\n sortable: false,\n width: `${69 + separateColumnWidth}px`,\n format: function (row, index) {\n return {row.futureJobMatchPercentSelf && row.futureJobMatchPercentSelf > 0 ? `${row.futureJobMatchPercentSelf}%` : \"\"}
;\n },\n wrap: true,\n });\n break;\n case \"futureJobMatchPercentValidated\":\n columns.push({\n id: columnDisplaySetting.columnName,\n name: (\n \n \n \n {showHeaderTooltip && (\n \n )}\n
\n ),\n selector: (row) => row[columnDisplaySetting.columnName],\n sortable: false,\n width: `${71 + separateColumnWidth}px`,\n format: function (row, index) {\n return {row.futureJobMatchPercentValidated && row.futureJobMatchPercentValidated > 0 ? `${row.futureJobMatchPercentValidated}%` : \"\"}
;\n },\n wrap: true,\n });\n break;\n default:\n }\n });\n }\n\n return (\n \n \n
\n ) : (\n \n \n {this.props.hasPeoples && this.props.mode == \"MyPeoples\" ? \n {this.state.emailTemplate && this.state.emailTemplate.emailActive && (\n \n \n \n \n \n \n )}\n \n \n \n )}\n
\n {this.props.hasPeoples && this.props.mode == \"MyPeoples\" && (\n \n \n it.relationshipType == \"Line Manager\" ||\n it.relationshipType == \"Team Leader\" ||\n it.relationshipType == \"Mentor\" ||\n it.relationshipType == \"Line Manager WITHOUT Approval\" ||\n it.relationshipType == \"Team Leader WITHOUT Approval\" ||\n it.relationshipType == \"Mentor WITHOUT Approval\"\n )}\n pagination={false}\n progressPending={this.state.loading}\n cellsStyle={{\n style: {\n backgroundColor: \"#e9ebf5\",\n padding: \"5px 10px\",\n fontSize: \"12px\",\n border: \"1px solid #dee2e6\",\n },\n }}\n headCellsStyle={{\n style: {\n fontWeight: \"bold\",\n fontSize: \"12px\",\n border: \"1px solid #dee2e6\",\n whiteSpace: \"wrap\",\n paddingTop: \"5px\",\n paddingBottom: \"5px\",\n paddingRight: \"8px\",\n paddingLeft: \"8px\",\n backgroundColor: \"#333f50\",\n color: \"#FFFFFF\",\n },\n }}\n >\n \n )}\n {this.props.isEndorser && this.props.mode == \"Endorsements\" && (\n \n \n \n \n \n \n \n \n \n \n {this.props.loading && (\n \n \n \n \n )}\n {myPeoples\n .filter((it) => it.relationshipType == \"Endorser\")\n .map((myPeople, index) => {\n let activityStatus = 1;\n const today = new Date();\n\n if (myPeople.personB.lastUpdatedOn) {\n // To calculate the time difference of two dates\n var differenceInTime = today.getTime() - new Date(myPeople.personB.lastUpdatedOn).getTime();\n\n // To calculate the no. of days between two dates\n var differenceInDays = differenceInTime / (1000 * 3600 * 24);\n\n if (differenceInDays > 365) {\n activityStatus = 2;\n } else {\n activityStatus = 3;\n }\n }\n\n return (\n \n \n \n \n \n {activityStatus == 1 ? (\n \n \n ) : (\n \n \n )}\n
\n \n \n );\n })}\n \n
\n )}\n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.person.loading,\n error: state.person.error,\n hasPeoples: state.auth.hasPeoples,\n isEndorser: state.auth.isEndorser,\n myPeoples: state.person.myPeoples,\n account: state.person.account,\n updating: state.person.updating,\n\n columnDisplaySettingsLoading: state.person.columnDisplaySettingsLoading,\n columnDisplaySettings: state.person.columnDisplaySettings,\n\n language: state.language.language,\n contentTranslations: state.content.contentTranslations,\n contentLoading: state.content.loading,\n contentError: state.content.error,\n\n currAssessment: state.config.currAssessment,\n emailTemplate: state.adminEmailTemplate.emailTemplate,\n emailTemplateLoading: state.adminEmailTemplate.loading,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onPerson: bindActionCreators(personActions, dispatch),\n onContent: bindActionCreators(contentActions, dispatch),\n onConfig: bindActionCreators(configActions, dispatch),\n onEmailTemplate: bindActionCreators(adminEmailTemplateActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(MyPeople);\n","import { Empty } from \"antd\";\nimport { Chart, registerables } from \"chart.js\";\nimport ChartDataLabels from \"chartjs-plugin-datalabels\";\nimport React, { useRef, useEffect } from \"react\";\n\nChart.register(...registerables, ChartDataLabels);\n\nconst DivCenter = ({ Component }) => {\n return (\n \n );\n};\n// Static configurations moved outside of the component for performance reasons.\n// These don't need to be recreated every render.\n\nconst constantData = {\n chartType: \"bar\",\n colors: {\n background: [\n \"#b71540\",\n \"#eb2f06\",\n \"#f6b93b\",\n \"#0c2461\",\n \"#1e3799\",\n \"#0a3d62\",\n \"#60a3bc\",\n \"#079992\",\n \"#78e08f\",\n \"#6a89cc\",\n ],\n type1: \"#EEEEEE\",\n type2: \"#3C65C2\",\n },\n yText: \"Generic Attribute Count\",\n xText: \"GA Code And Level\",\n legendText: \"Attribute Number\",\n endName: \"end\",\n};\n\n// Base font configuration for the X and Y axis to avoid repetitive code.\nconst baseFontConfig = {\n weight: 500,\n};\n\n// Base title configuration for the X and Y axis to maintain consistent styling.\nconst baseTitleConfig = {\n display: true,\n color: constantData.colors.type2,\n font: {\n size: 14,\n weight: 700,\n },\n};\n\nconst Bar = ({ data: { source = [], maxCount } = {} }) => {\n const canvas = useRef(null);\n\n // Refactored data for the chart using destructuring for more concise code.\n const dataChart = {\n labels: source.map((item) => item.label),\n datasets: [\n {\n label: constantData.legendText,\n data: source.map((item) => item.value),\n backgroundColor: constantData.colors.background,\n },\n ],\n };\n\n // Centralized configuration for the chart. Static values are directly set\n // and values that depend on props are computed inline.\n const configChart = {\n type: constantData.chartType,\n data: dataChart,\n options: {\n scales: {\n y: {\n ticks: {\n ...baseFontConfig,\n precision: 0,\n },\n max: maxCount,\n beginAtZero: true,\n grid: {\n color: constantData.colors.type1,\n borderDash: [8, 4],\n },\n title: {\n ...baseTitleConfig,\n text: constantData.yText,\n },\n },\n x: {\n ticks: {\n ...baseFontConfig,\n },\n grid: {\n display: false,\n },\n title: {\n ...baseTitleConfig,\n text: constantData.xText,\n },\n },\n },\n responsive: true,\n maintainAspectRatio: true,\n barThickness: 30,\n aspectRatio: 5 / 2,\n layout: {\n padding: {\n top: 32,\n },\n },\n elements: {\n line: {\n fill: false,\n tension: 0.4,\n },\n },\n plugins: {\n datalabels: {\n align: constantData.endName,\n anchor: constantData.endName,\n offset: 0,\n },\n legend: {\n display: false,\n },\n tooltip: {\n callbacks: {\n label: (ctx) => ` ${ctx.dataset.label} : ${ctx.formattedValue}`,\n title: (ctx) => ctx[0].label,\n },\n },\n },\n },\n };\n\n // Ensure the chart is only re-rendered when the data source changes.\n useEffect(() => {\n let chartInstance = null;\n\n if (source?.length > 0) {\n chartInstance = new Chart(canvas.current, configChart);\n }\n\n // Cleanup the previous chart instance to prevent memory leaks\n return () => {\n if (chartInstance) {\n chartInstance.destroy();\n }\n };\n }, [source]); // Dependency array updated to re-render the chart when data changes\n\n // Conditionally render the canvas if data is present, otherwise display a centered 'No Data' message\n if (source?.length < 1) {\n return \n {title ?? \"-\"}
\n \n );\n}\n\nexport default PieChart;\n","const LevelResponsibility = {\n name: \"7 Levels Of Responsibility\",\n levels: [\n {\n level: 1,\n name: \"Follow\",\n },\n {\n level: 2,\n name: \"Assist\",\n },\n {\n level: 3,\n name: \"Apply\",\n },\n {\n level: 4,\n name: \"Enable\",\n },\n {\n level: 5,\n name: \"Ensure, Advise\",\n },\n {\n level: 6,\n name: \"Initiate, Influence\",\n },\n {\n level: 7,\n name: \"Set Strategy, Inspire, Mobilise\",\n },\n ],\n};\n\nexport { LevelResponsibility };\n","const OrderCategory = [\n \"Strategy and architecture\",\n \"Change and transformation\",\n \"Development and implementation\",\n \"Delivery and operation\",\n \"People and skills\",\n \"Relationship and engagement\",\n];\n\nconst OrderGeneric = [\n \"Autonomy\", \n \"Responsibility and Autonomy\", \n \"Influence\", \n \"Complexity\", \n \"Complexity and Scope\", \n \"Business Skills\", \n \"Skills\", \n \"Knowledge\" \n];\n\nexport { OrderCategory, OrderGeneric };\n","import { Select, TreeSelect } from \"antd\";\nimport React, { useState } from \"react\";\n\nconst { SHOW_PARENT } = TreeSelect;\n\nconst CustomSelect = ({\n label,\n obj = {},\n isTreeSelect = false,\n placeholder,\n}) => {\n // Expanded keys state for TreeSelect\n const [expandedKeys, setExpandedKeys] = useState([]);\n\n // Function to handle tree expansion\n const onTreeExpanded = (keys) => setExpandedKeys(keys);\n\n // Function to handle dropdown visibility change\n const onDropdownVisibleChanged = (isOpen) => {\n // Reset expanded keys when dropdown opens, no values are selected, and there are expanded keys\n if (isOpen && !obj.value?.length && expandedKeys.length) {\n setExpandedKeys([]);\n }\n };\n\n // Common props shared by both TreeSelect and Select\n const commonProps = {\n value: obj.value,\n onChange: (val) => obj.setValue?.(val), // Using optional chaining to avoid potential errors\n allowClear: true,\n showArrow: true,\n size: \"middle\",\n placeholder,\n style: { width: \"100%\" },\n };\n\n return (\n <>\n {/* Render label */}\n {label} \n\n {/* Conditional rendering: If isTreeSelect is true, render TreeSelect, else render Select */}\n {isTreeSelect ? (\n \n {/* Check if item is a string or needs to be parsed */}\n {isTree ? JSON.parse(item).value : item} \n onCloseClicked(obj, item)}\n style={{ color: \"darkred\" }}\n />\n \n ));\n};\n\nconst renderFilter = (Component, isExpand) => (\n \n \n {/* Rest of the JSX structure where you'll use your button */}\n setIsExpand((state) => !state)}\n >\n Filter\n \n \n {/* Rest of the JSX structure where you'll use your renderTags */}\n \n {/* Render tags for each filter type */}\n {renderTags(objRequirement, \"green\", onCloseClicked)}\n {renderTags(objType, \"cyan\", onCloseClicked)}\n {renderTags(objLorSkill, \"geekblue\", onCloseClicked, true)}\n {renderTags(objGeneric, \"purple\", onCloseClicked, true)}\n \n \n \n {/* Rest of the JSX structure where you'll use your CustomSelect */}\n \n \n \n \n Filter only the skills\n \n \n \n \n \n \n Filter only the generic attributes\n \n \n \n\n \n \n \n \n Filter both\n \n \n \n \n );\n};\n\nexport default SkillsWeNeedFilters;\n","import { InfoCircleOutlined, UpOutlined } from \"@ant-design/icons\";\nimport { Table, Tag, Tooltip } from \"antd\";\nimport React, { useState, useMemo, useEffect } from \"react\";\nimport styled from \"styled-components\";\n\nconst WrapperTable = styled.div`\n white-space: nowrap;\n border-top: none;\n margin-top: 20px;\n\n .ant-table.ant-table-middle\n .ant-table-tbody\n .ant-table-wrapper:only-child\n .ant-table {\n margin: 0px;\n }\n\n .ant-table-cell:has(.p-zero) {\n padding: 0px !important;\n }\n\n .ant-table-tbody > tr > td > .ant-table-expanded-row-fixed .ant-table,\n .ant-table-tbody > tr > td > .ant-table-wrapper:only-child .ant-table {\n margin: 0px;\n }\n\n .table-s\n > .ant-table-wrapper\n > .ant-spin-nested-loading\n > .ant-spin-container\n > .ant-table {\n border-top-left-radius: 0x;\n border-top-right-radius: 0px;\n }\n\n .ant-table {\n border-top-left-radius: 14px;\n border-top-right-radius: 14px;\n }\n\n .table-s\n > .ant-table-wrapper\n > .ant-spin-nested-loading\n > .ant-spin-container\n > .ant-table\n > .ant-table-container\n > .ant-table-content\n > table {\n table-layout: auto;\n border-color: gainsboro;\n border-style: solid;\n border-top-left-radius: 0px;\n border-top-right-radius: 0px;\n border-width: 0px;\n }\n\n .ant-table-content > table {\n table-layout: auto;\n border-color: gainsboro;\n border-style: solid;\n border-top-left-radius: 14px;\n border-top-right-radius: 14px;\n border-width: 0.5px;\n }\n\n .ant-table-cell:has(.b-none) {\n border-color: white !important;\n transition: background 0.3s;\n }\n\n .ant-table-cell:has(.c-lv) {\n text-align: center;\n }\n\n .ant-table-cell:has(.c-w) {\n width: 50px !important;\n }\n\n .ant-table-cell:has(.e-w) {\n width: 80px !important;\n }\n\n .ant-table-container table > thead > tr:first-child th {\n background: ${(props) =>\n props?.customStyle?.tableHeaderBackgroundColor || \"\"};\n color: ${(props) => props?.customStyle?.tableHeaderColor || \"\"};\n text-align: center;\n }\n\n .table-s\n > .ant-table-wrapper\n > .ant-spin-nested-loading\n > .ant-spin-container\n > .ant-table\n > .ant-table-container\n table\n > thead\n > tr:first-child\n th {\n background: #fafafa;\n color: black;\n text-align: center;\n cursor: pointer;\n }\n\n .table-s\n > .ant-table-wrapper\n > .ant-spin-nested-loading\n > .ant-spin-container\n > .ant-table\n > .ant-table-container\n table\n > thead\n > tr:first-child\n th:first-child {\n border-top-left-radius: 0px;\n text-align: start;\n width: auto !important;\n }\n\n .ant-table-container table > thead > tr:first-child th:first-child {\n border-top-left-radius: 14px;\n text-align: start;\n width: 280px;\n }\n .ant-table-cell {\n padding: 10px;\n }\n .ant-table-row-expand-icon {\n display: none;\n }\n\n .ant-table-row-indent {\n padding-left: 0 !important;\n }\n\n .table-s\n > .ant-table-wrapper\n > .ant-spin-nested-loading\n > .ant-spin-container\n > .ant-table\n > .ant-table-container\n table\n > thead\n > tr:first-child\n td:first-child {\n border-top-left-radius: 0px;\n width: auto !important;\n }\n\n .table-s .ant-table-column-sorters {\n text-align: center;\n }\n\n .ant-table-container table > thead > tr:first-child td:first-child {\n border-top-left-radius: 14px;\n text-align: start;\n width: 280px;\n }\n\n .table-s\n > .ant-table-wrapper\n > .ant-spin-nested-loading\n > .ant-spin-container\n > .ant-table\n > .ant-table-container\n table\n > thead\n > tr:first-child\n th:last-child {\n border-top-right-radius: 0px;\n }\n\n .ant-table-container table > thead > tr:first-child th:last-child {\n border-top-right-radius: 14px;\n }\n\n .rotate-180 {\n transform: rotate(180deg);\n transition: transform 0.5s;\n }\n .rotate-0 {\n transform: rotate(0deg);\n transition: transform 0.5s;\n }\n`;\n\nconst WrapperTitleCustom = styled.div`\n text-align: center;\n margin-top: -7px;\n cursor: pointer;\n`;\n\nconst WrapperTooltipCustom = styled(Tooltip)`\n position: absolute;\n right: 5%;\n cursor: help;\n margin-top: 7px;\n`;\n\nconst WrapperLevelCustom = styled.div`\n padding: 5px;\n`;\n\nconst WrapperCellCustom = styled.div`\n text-align: center;\n margin-top: -7px;\n cursor: pointer;\n`;\n\nconst WrapperCellSkillCategoryCustom = styled(Tooltip)`\n padding-left: 20px;\n`;\n\nconst WrapperCellSubCategoryCustom = styled(Tooltip)`\n font-weight: 700;\n`;\n\nconst WrapperSlide = styled.div`\n transition: all 0.2s ease-in-out;\n transform-origin: left top;\n animation: slide 0.2s;\n @keyframes slide {\n 0% {\n transform: scaleY(0);\n }\n 100% {\n transform: scaleY(1);\n }\n }\n`;\n\nconst constantData = {\n lvBackgroundColorDefault: \"#F0F0F0\",\n tableSize: \"default\",\n expandedTableSize: \"default\",\n skillLevelCount: 7,\n colorLevel: 5,\n categoryName: \"category\",\n expandName: \"expand\",\n bottomName: \"bottom\",\n levelName: \"Level\",\n rootName: \"root\",\n};\n\n// Helper function to generate a table column that centers its text content.\n// This avoids repetition for multiple columns that require similar formatting.\nconst createCenteredTextColumn = (title, dataIndex, sorterFunction) => ({\n title, // Column header\n dataIndex, // Data key\n key: dataIndex, // Key for React's list rendering\n sorter: sorterFunction, // Sorting function for the column\n render: (text) => {text ?? \"-\"}
, // Centering the text\n});\n\n// Utility function to compare text values\nconst sortByText = (a, b) => (a ?? \"\").localeCompare(b ?? \"\");\n\nconst SkillGapTable = ({ data = null }) => {\n const [isContentLoaded, setIsContentLoaded] = useState(false);\n const [listExpand, setListExpand] = useState([\n {\n name: constantData.rootName,\n isExpand: true,\n },\n ]);\n const [expendedRowKeysRef, setExpendedRowKeysRef] = useState({\n level: null,\n name: null,\n keys: [],\n });\n const [expendedRowKeysCurrent, setExpendedRowKeysCurrent] = useState({\n level: null,\n name: null,\n keys: [],\n });\n\n const onExpandedRowRendered = (record) => {\n // Transform the record's people data into the format suitable for the table.\n const dataSource = record.people\n .filter((item) => item.level === expendedRowKeysRef?.level) // Filter by the specific level\n .map((item, index) => ({\n // Map over the filtered items\n key: `${index + 1}`,\n ...item, // Spread the properties of each item\n }));\n\n // Define columns for the table. These determine how data is displayed in the table.\n const columns = [\n createCenteredTextColumn(\"Full Name\", \"fullName\", (a, b) =>\n sortByText(a.fullName, b.fullName)\n ),\n createCenteredTextColumn(\"Person Email\", \"email\", (a, b) =>\n sortByText(a.email, b.email)\n ),\n {\n title: \"Person Skill Level\",\n dataIndex: \"skillLevel\",\n key: \"skillLevel\",\n sorter: (a, b) =>\n sortByText(`${a.skillCode} ${a.level}`, `${b.skillCode} ${b.level}`),\n render: (text, record) => (\n \n \n \n {`${record.skillCode} ${record.level}`}\n \n \n
\n ),\n },\n createCenteredTextColumn(\"Capability\", \"capability\", (a, b) =>\n sortByText(a.capability, b.capability)\n ),\n createCenteredTextColumn(\"Requirement Type\", \"jobType\", (a, b) =>\n sortByText(a.jobType, b.jobType)\n ),\n {\n title: \"Skill Gap\",\n dataIndex: \"skillGap\",\n key: \"skillGap\",\n sorter: (a, b) =>\n {\n const askillGap = a.selfAssessedSkillGap == a.endorsedSkillGap ? a.skillGap : `Self Assessed ${a.selfAssessedSkillGap} - Endorsed ${a.endorsedSkillGap}`;\n const bskillGap = b.selfAssessedSkillGap == b.endorsedSkillGap ? b.skillGap : `Self Assessed ${b.selfAssessedSkillGap} - Endorsed ${b.endorsedSkillGap}`;\n sortByText(askillGap, bskillGap) \n },\n render: (text, record) => (\n \n {record.selfAssessedSkillGap == record.endorsedSkillGap ? record.skillGap :\n \n {`Self Assessed - ${record.selfAssessedSkillGap}`} \n }\n
\n ),\n },\n ];\n\n // Return the formatted table contained within a styled wrapper.\n return (\n \n \n \n );\n };\n\n // This function determines if a row is expandable based on the 'isSkill' attribute.\n const onRowExpandable = (record) => {\n // Directly return the boolean value of 'isSkill' attribute of the record.\n // If the attribute isn't present, it defaults to false.\n return record.isSkill || false;\n };\n\n const onExpandCellRendered = (text, record) => {\n // Find the corresponding expandable item from the listExpand array using the record's category.\n const findExpand = listExpand.find((_) => _.name === record.category);\n\n return (\n \n {/* \n Conditional rendering: \n If 'isShowExpand' attribute of the record is true, then render the custom cell wrapper. \n Otherwise, nothing will be rendered inside the div. \n */}\n {record.isShowExpand && (\n onExpendClicked(findExpand)}\n >\n
\n );\n };\n\n const onCategoryCellRendered = (text, record, index) => {\n // Depending on the 'isSkill' property of the record, determine which component to render.\n // If 'isSkill' is true, use 'WrapperCellSkillCategoryCustom'.\n // If 'isSkill' is false, use 'WrapperCellSubCategoryCustom'.\n const ComponentToRender = record.isSkill\n ? WrapperCellSkillCategoryCustom\n : WrapperCellSubCategoryCustom;\n\n // Render the chosen component inside a div with the given class.\n // The title and placement properties are consistent for both components.\n return (\n \n \n {text}\n \n
\n );\n };\n\n const onExpandCellTitleRendered = (meta) => {\n // Get the root expandable item to decide the direction of the 'UpOutlined' icon.\n const expand = getRootExpand();\n\n // Define the custom title for the tooltip:\n // It contains the name of the level responsibility and a list of levels beneath it.\n const customTitle = () => (\n \n {/* Display the name of the level responsibility */}\n {meta.levelResponsibility.name} \n\n {/* Map through the levels and display each one */}\n {meta.levelResponsibility.levels.map((item, index) => (\n \n {`${constantData.levelName} ${item.level} : ${item.name}`}\n \n ))}\n
\n );\n\n // Render the custom title wrapped in a 'WrapperTitleCustom' component.\n // It contains an expandable icon and an informational icon within a tooltip.\n return (\n \n {/* Expandable Icon: Its rotation depends on the 'expand.isExpand' value */}\n onExpendClicked(expand)}\n />\n\n {/* Information Icon wrapped in a tooltip */}\n \n \n );\n };\n\n const onExpendClicked = (obj) => {\n if (!obj) return; // Early exit if obj is falsy\n\n const tempExpandStatus = !obj.isExpand;\n\n let updatedListExpand;\n\n if (obj.name === constantData.rootName) {\n // If the clicked object is the root, update expand status of all items\n updatedListExpand = listExpand.map((item) => ({\n ...item,\n isExpand: tempExpandStatus,\n }));\n } else {\n // Toggle the expand status of the clicked item\n obj.isExpand = tempExpandStatus;\n\n const rootItem = getRootExpand();\n // Check if any child item (excluding root) is expanded\n const hasExpandedChild = listExpand.some(\n (item) => item.name !== constantData.rootName && item.isExpand\n );\n\n // If the clicked item is expanded or no other child item is expanded, update the root expand status\n if (tempExpandStatus || !hasExpandedChild) {\n rootItem.isExpand = tempExpandStatus;\n }\n\n updatedListExpand = [...listExpand]; // Create a copy of the listExpand array\n }\n\n setListExpand(updatedListExpand); // Update state with the new list\n };\n\n // Renders cell content based on the level value\n const onLevelTextCellRendered = (text, record, index, lv) => {\n // Check if the record qualifies and find the respective level.\n const tempLevel =\n record.isSkill &&\n record.levels &&\n record.levels.find((level) => level.lv === `${lv}`);\n\n // If level found, render its value with a tooltip.\n if (tempLevel) {\n return (\n \n \n {tempLevel.value}\n \n
\n );\n }\n\n // Default empty cell for non-matching records.\n return
;\n };\n\n /**\n * Determines the styling and interactivity of cells based on the given record and level.\n * This function primarily checks the level and adjusts the cell style based on the record's details.\n */\n const onLevelColorCellRendered = (record, index, lv) => {\n // When record isn't a skill, just return an empty style object.\n if (!record.isSkill) return {};\n\n // This is a default style for a cell. Used for skill-based records when no specific level styling is found.\n const defaultStyle = {\n backgroundColor: constantData.lvBackgroundColorDefault,\n borderStyle: \"solid\",\n borderWidth: \"0.5px\",\n };\n\n // If the record has no levels defined, just return the default styling.\n if (!record.levels) return { style: defaultStyle };\n\n // Attempt to find the corresponding level from the record's levels.\n const tempLevel = record.levels.find((level) => level.lv === `${lv}`);\n\n // If no such level is found, return with the default style.\n if (!tempLevel) return { style: defaultStyle };\n\n // Calculate a value which will be used for determining the color of the cell.\n const val = tempLevel.value * -1;\n\n return {\n // Add click functionality if a corresponding level is found for the cell.\n onClick: () => onCellExpandClicked(record, lv),\n\n // Set up the cell's styling based on the found level's value.\n style: {\n cursor: \"pointer\",\n // Determine the cell's background color based on the value.\n backgroundColor:\n val < constantData.colorLevel\n ? record.meta.colour\n : record.meta.cateColour,\n // Adjust text color depending on the value.\n color: val < constantData.colorLevel ? \"black\" : \"white\",\n borderStyle: \"solid\",\n borderWidth: \"0.5px\",\n },\n };\n };\n\n // A simple tooltip renderer for cell titles\n const onCellTitleRendered = (text, description) => (\n \n {text}\n \n );\n\n // Handle cell expansion based on the record and level\n const onCellExpandClicked = (record, lv) => {\n setExpendedRowKeysRef((prevState) => ({\n ...prevState, // Keep other properties of the state unchanged\n level: lv,\n name: record.parent,\n keys: [record.key],\n }));\n };\n\n const getRootExpand = () =>\n listExpand.find((_) => _.name === constantData.rootName);\n\n const getDataSource = () => {\n // Cache the root expand state to avoid calculating it repeatedly in the loop\n const isRootExpanded = getRootExpand().isExpand;\n\n // If the root is not expanded, return the sub-category data without skills\n if (!isRootExpanded) {\n return data.subCategories.map((item, index) => ({\n key: `${index + 1}`,\n category: item.name,\n isShowExpand: true,\n isSkill: false,\n meta: {\n description: item.description,\n skillColour: item.skillColour,\n colour: item.colour,\n cateColour: item.cateColour,\n },\n }));\n }\n\n // If the root is expanded, handle both subcategories and their skills\n return data.subCategories.flatMap((item, index) => {\n const { name, description, skillColour, colour, cateColour, skills } =\n item;\n\n // Construct base data for the sub-category\n const baseData = {\n key: `${index + 1}`,\n category: name,\n isShowExpand: true,\n isSkill: false,\n meta: { description, skillColour, colour, cateColour },\n };\n\n // Check if the current sub-category is in the list of expanded items\n const findExpand = listExpand.find(\n (expandItem) => expandItem.name === name\n );\n\n // If found but it's not expanded, only return the base data\n if (findExpand && !findExpand.isExpand) {\n return [baseData];\n }\n\n // Construct data for each skill under the current sub-category\n const skillsData = skills.map((itemSkill, indexSkill) => {\n const { name, description, people, levels } = itemSkill;\n\n return {\n key: `${index + 1}.${indexSkill + 1}`,\n category: name,\n parent: item.name,\n isShowExpand: false,\n isSkill: true,\n meta: { skillColour, colour, cateColour, description },\n people,\n // Map each level of the skill to its data structure\n levels: levels.map((level) => ({\n lv: level.lv,\n value: level.value,\n description: level.description,\n })),\n };\n });\n\n // Return a combined array of the base sub-category data and all its skills data\n return [baseData, ...skillsData];\n });\n };\n\n const getColumns = () => {\n // Initial columns for category and expand cells\n const initialColumns = [\n {\n title: () => onCellTitleRendered(data.name, data.description),\n dataIndex: constantData.categoryName,\n key: constantData.categoryName,\n render: onCategoryCellRendered,\n },\n {\n title: () => onExpandCellTitleRendered(data.meta),\n key: constantData.expandName,\n dataIndex: constantData.expandName,\n render: (text, record, index) =>\n onExpandCellRendered(text, record, index),\n },\n ];\n\n // Generate columns for each skill level\n const skillLevelColumns = Array.from(\n { length: constantData.skillLevelCount },\n (_, lv) => {\n const level = lv + 1;\n return {\n title: `${level}`,\n dataIndex: `${level}`,\n key: `${level}`,\n onCell: (record, index) =>\n onLevelColorCellRendered(record, index, level),\n render: (text, record, index) =>\n onLevelTextCellRendered(text, record, index, level),\n };\n }\n );\n\n // Combine and return all columns\n return [...initialColumns, ...skillLevelColumns];\n };\n\n // useMemo calculates and memoizes the table data based on its dependencies.\n // It will only re-compute the table data when either data, listExpand, or isContentLoaded changes.\n const tableData = useMemo(() => {\n if (isContentLoaded === false) return { dataSource: [], columns: [] };\n // Get the data source using the provided getDataSource function\n const dataSource = getDataSource();\n\n // Get the columns using the provided getColumns function\n const columns = getColumns();\n\n // Return the computed values in an object\n return { dataSource, columns };\n }, [data, listExpand, isContentLoaded]); // Memoization depends on these three values.\n\n // This useEffect is responsible for handling the side-effect when the content is not yet loaded.\n // It updates the state by marking the content as loaded and sets the initial expanded subcategories.\n useEffect(() => {\n // Check if the content has not been loaded yet\n if (!isContentLoaded) {\n // Mark content as loaded\n setIsContentLoaded(true);\n\n // Generate an array of expanded subcategories from the data\n const tempListExpand = data.subCategories.map((subCategory) => ({\n name: subCategory.name,\n isExpand: true,\n }));\n\n // Update the listExpand state by appending the new expanded subcategories.\n // We use a functional update to safely access and update the previous state.\n setListExpand((prevListExpand) => [...prevListExpand, ...tempListExpand]);\n }\n }, [data, isContentLoaded]); // The effect depends on the data and the isContentLoaded flag.\n\n // useEffect for handling the side-effect related to listExpand updates\n useEffect(() => {\n const find = listExpand.find(\n (item) => item.isExpand === false && item.name === expendedRowKeysRef.name\n );\n\n if (find) {\n // Reset expendedRowKeysCurrent to its default values\n setExpendedRowKeysCurrent((prevState) => ({\n ...prevState,\n level: null,\n name: null,\n keys: [],\n }));\n }\n }, [listExpand, expendedRowKeysRef.name]);\n\n // useEffect for handling the side-effect related to expendedRowKeysRef updates\n useEffect(() => {\n // Use a functional state update for expendedRowKeysCurrent since its new value depends on the previous state\n setExpendedRowKeysCurrent((prevState) => {\n const temp = { ...prevState };\n\n if (expendedRowKeysRef.keys.length < 1) {\n temp.level = null;\n temp.name = null;\n temp.keys = [];\n } else if (\n temp.keys.length > 0 &&\n temp.keys[0] === expendedRowKeysRef.keys[0] &&\n temp.level === expendedRowKeysRef.level\n ) {\n temp.level = null;\n temp.name = null;\n temp.keys = [];\n } else {\n temp.level = expendedRowKeysRef.level;\n temp.name = expendedRowKeysRef.name;\n temp.keys = [...expendedRowKeysRef.keys];\n }\n return temp;\n });\n }, [expendedRowKeysRef]);\n\n return (\n \n \n \n );\n};\n\nexport { SkillGapTable };\n","import {\n InfoCircleOutlined,\n UpOutlined,\n CheckCircleOutlined,\n CloseCircleOutlined,\n} from \"@ant-design/icons\";\nimport { Table, Tag, Tooltip, Row, Typography, Empty } from \"antd\";\nimport React, { useState, useMemo, useEffect } from \"react\";\nimport styled from \"styled-components\";\n\nconst { Title } = Typography;\n\nconst WrapperTable = styled.div`\n white-space: nowrap;\n border-top: none;\n margin-top: 20px;\n\n .ant-table.ant-table-middle\n .ant-table-tbody\n .ant-table-wrapper:only-child\n .ant-table {\n margin: 0px;\n }\n\n .table-s .ant-table-container table tr .ant-table-cell-row-hover {\n background: rgb(116, 226, 177, 0.2) !important;\n }\n\n .anticon {\n vertical-align: 1px !important;\n }\n\n .ant-table-cell:has(.p-zero) {\n padding: 0px !important;\n }\n\n .ant-table-tbody > tr > td > .ant-table-expanded-row-fixed .ant-table,\n .ant-table-tbody > tr > td > .ant-table-wrapper:only-child .ant-table {\n margin: 0px;\n }\n\n .table-s\n > .ant-table-wrapper\n > .ant-spin-nested-loading\n > .ant-spin-container\n > .ant-table {\n border-top-left-radius: 0x;\n border-top-right-radius: 0px;\n }\n\n .ant-table {\n border-top-left-radius: 14px;\n border-top-right-radius: 14px;\n }\n\n .font-sm {\n font-size: small;\n }\n\n .table-s\n > .ant-table-wrapper\n > .ant-spin-nested-loading\n > .ant-spin-container\n > .ant-table\n > .ant-table-container\n > .ant-table-content\n > table {\n table-layout: auto;\n border-color: gainsboro;\n border-style: solid;\n border-top-left-radius: 0px;\n border-top-right-radius: 0px;\n border-width: 0px;\n }\n\n .ant-table-content > table {\n table-layout: auto;\n border-color: gainsboro;\n border-style: solid;\n border-top-left-radius: 14px;\n border-top-right-radius: 14px;\n border-width: 0.5px;\n }\n .op-0 {\n opacity: 0;\n }\n .ant-table-cell:has(.b-none) {\n border-color: white !important;\n transition: background 0.3s;\n }\n\n .table-s .ant-table-body {\n max-height: 300px;\n }\n .ant-table-cell:has(.c-lv) {\n text-align: center;\n }\n\n .ant-table-cell:has(.c-w) {\n width: 50px !important;\n }\n\n .ant-table-cell:has(.e-w) {\n width: 80px !important;\n }\n\n .ant-table-container table > thead > tr:first-child th {\n background: ${(props) =>\n props?.customStyle?.tableHeaderBackgroundColor || \"\"};\n color: ${(props) => props?.customStyle?.tableHeaderColor || \"\"};\n text-align: center;\n }\n\n .table-s\n > .ant-table-wrapper\n > .ant-spin-nested-loading\n > .ant-spin-container\n > .ant-table\n > .ant-table-container\n table\n > thead\n > tr:first-child\n th {\n background: #fafafa;\n color: black;\n text-align: center;\n cursor: pointer;\n }\n\n .table-s\n > .ant-table-wrapper\n > .ant-spin-nested-loading\n > .ant-spin-container\n > .ant-table\n > .ant-table-container\n table\n > thead\n > tr:first-child\n th:first-child {\n border-top-left-radius: 0px;\n text-align: start;\n width: auto !important;\n }\n\n .ant-table-container table > thead > tr:first-child th:first-child {\n border-top-left-radius: 14px;\n text-align: start;\n width: 280px;\n }\n\n .ant-table-cell {\n padding: 10px;\n }\n .ant-table-row-expand-icon {\n display: none;\n }\n\n .ant-table-row-indent {\n padding-left: 0 !important;\n }\n\n .table-s\n > .ant-table-wrapper\n > .ant-spin-nested-loading\n > .ant-spin-container\n > .ant-table\n > .ant-table-container\n table\n > thead\n > tr:first-child\n td:first-child {\n border-top-left-radius: 0px;\n width: auto !important;\n }\n\n .table-s .ant-table-column-sorters {\n text-align: center;\n }\n\n .item-center {\n align-items: center;\n }\n\n .table-s\n > .ant-table-wrapper\n > .ant-spin-nested-loading\n > .ant-spin-container\n > .ant-table\n > .ant-table-container\n table\n > thead\n > tr:first-child\n th:last-child {\n border-top-right-radius: 0px;\n }\n\n .ant-table-container table > thead > tr:first-child th:last-child {\n border-top-right-radius: 14px;\n }\n\n .rotate-180 {\n transform: rotate(180deg);\n transition: transform 0.5s;\n }\n .rotate-0 {\n transform: rotate(0deg);\n transition: transform 0.5s;\n }\n\n /*== start of code for tooltips ==*/\n .tool {\n cursor: help;\n position: relative;\n }\n\n /*== common styles for both parts of tool tip ==*/\n .tool::before,\n .tool::after {\n left: 50%;\n opacity: 0;\n position: absolute;\n z-index: -100;\n }\n .flex {\n display: flex;\n }\n .mt-15 {\n margin-top: 15px;\n }\n .ml-10 {\n margin-left: 10px;\n }\n\n .tool:hover::before,\n .tool:focus::before,\n .tool:hover::after,\n .tool:focus::after {\n opacity: 1;\n transform: scale(1) translateY(0);\n z-index: 100;\n }\n\n /*== pointer tip ==*/\n .tool::before {\n border-style: solid;\n border-width: 1em 0.75em 0 0.75em;\n border-color: #3e474f transparent transparent transparent;\n bottom: 100%;\n\n content: \"\";\n margin-left: -0.5em;\n transition: all 0.65s cubic-bezier(0.84, -0.18, 0.31, 1.26),\n opacity 0.65s 0.5s;\n transform: scale(0.6) translateY(-90%);\n }\n\n .tool:hover::before,\n .tool:focus::before {\n transition: all 0.65s cubic-bezier(0.84, -0.18, 0.31, 1.26) 0.2s;\n }\n\n /*== speech bubble ==*/\n .tool::after {\n background: #3e474f;\n border-radius: 0.25em;\n bottom: 135%;\n text-wrap: balance;\n height: auto;\n color: #edeff0;\n content: attr(data-tip);\n margin-left: -16em;\n padding: 1em;\n transition: all 0.65s cubic-bezier(0.84, -0.18, 0.31, 1.26) 0.2s;\n transform: scale(0.6) translateY(50%);\n width: 18em;\n }\n\n .tool:hover::after,\n .tool:focus::after {\n transition: all 0.65s cubic-bezier(0.84, -0.18, 0.31, 1.26);\n }\n\n @media (max-width: 760px) {\n .tool::after {\n font-size: 0.75em;\n margin-left: -5em;\n width: 10em;\n }\n }\n\n @media (max-width: 1080px) {\n .sm-grid {\n display: grid;\n }\n }\n .circle {\n border-radius: 10px;\n width: 10px;\n height: 10px;\n }\n .pd-10 {\n padding: 10px;\n }\n .grid {\n display: grid;\n }\n .mr-10 {\n margin-right: 10px;\n }\n`;\n\nconst WrapperTitleCustom = styled.div`\n text-align: center;\n margin-top: -7px;\n cursor: pointer;\n`;\n\nconst WrapperTooltipCustom = styled(Tooltip)`\n cursor: help;\n margin-top: 7px;\n`;\n\nconst WrapperLevelCustom = styled.div`\n padding: 5px;\n`;\n\nconst WrapperDivToolCustom = styled.div`\n padding: 10px;\n`;\n\nconst WrapperDivToolMTCustom = styled.div`\n padding-top: 5px;\n padding-bottom: 5px;\n`;\n\nconst WrapperDivCustom = styled.div`\n padding-top: 5px;\n display: flex;\n align-items: center;\n`;\n\nconst WrapperCircleCustom = styled.div`\n border-radius: 10px;\n width: 10px;\n margin-left: 10px;\n height: 10px;\n`;\n\nconst WrapperCellCustom = styled.div`\n text-align: center;\n margin-top: -7px;\n cursor: pointer;\n`;\n\nconst WrapperSlide = styled.div`\n transition: all 0.2s ease-in-out;\n transform-origin: left top;\n animation: slide 0.2s;\n @keyframes slide {\n 0% {\n transform: scaleY(0);\n }\n 100% {\n transform: scaleY(1);\n }\n }\n`;\n\nconst WrapperSubCell = styled.div`\n width: auto !important;\n text-wrap: wrap;\n`;\n\nconst DivCenter = ({ Component }) => {\n return (\n \n );\n};\n\nconst constantData = {\n titleLevel: 5,\n tableSize: \"default\",\n expandedTableSize: \"default\",\n skillLevelCount: 7,\n categoryName: \"category\",\n expandName: \"expand\",\n bottomName: \"bottom\",\n levelName: \"Level\",\n categoryColors: [\n {\n name: \"Strategy and architecture\",\n bold: \"#EE2A53\",\n tint: \"#f8a9ba\",\n },\n {\n name: \"Change and transformation\",\n bold: \"#CE559F\",\n tint: \"#ebbbd8\",\n },\n {\n name: \"Delivery and operation\",\n bold: \"#B26720\",\n tint: \"#e0c2a5\",\n },\n {\n name: \"Development and implementation\",\n bold: \"#f3c716\",\n tint: \"#fae8a1\",\n },\n {\n name: \"People and skills\",\n bold: \"#00a5e4\",\n tint: \"#99dbf4\",\n },\n {\n name: \"Relationship and engagement\",\n bold: \"#00a752\",\n tint: \"#99dbb9\",\n },\n ],\n};\n\nconst createCenteredTextColumnHeader = (title) => (\n {title} \n);\n\n// Helper function to generate a table column that centers its text content.\n// This avoids repetition for multiple columns that require similar formatting.\nconst createCenteredTextColumn = (title, dataIndex, sorterFunction) => ({\n title: createCenteredTextColumnHeader(title), // Column header\n dataIndex, // Data key\n key: dataIndex, // Key for React's list rendering\n sorter: sorterFunction, // Sorting function for the column\n render: (text) => (\n {text ?? \"-\"} \n ), // Centering the text\n});\n\n// Utility function to compare text values\nconst sortByText = (a, b) => (a ?? \"\").localeCompare(b ?? \"\");\n\nconst SkillsWeHaveNeedTable = ({\n data = null,\n isNeedSkill = false,\n isShowDetail = true,\n isSpilt = false,\n}) => {\n const [isContentLoaded, setIsContentLoaded] = useState(false);\n const [listExpand, setListExpand] = useState([]);\n const [expendedRowKeysRef, setExpendedRowKeysRef] = useState({\n name: null,\n keys: [],\n });\n const [expendedRowKeysCurrent, setExpendedRowKeysCurrent] = useState({\n name: null,\n keys: [],\n });\n\n const onExpandedRowRendered = (record) => {\n // Transform the record's people data into the format suitable for the table.\n const dataSource = record.people.map((item, index) => ({\n // Map over the filtered items\n key: `${index + 1}`,\n ...item, // Spread the properties of each item\n }));\n\n // Define columns for the table. These determine how data is displayed in the table.\n let columns;\n if (isNeedSkill) {\n columns = [\n createCenteredTextColumn(\"Requirement Name\", \"jobName\", (a, b) =>\n sortByText(a.jobName, b.jobName)\n ),\n createCenteredTextColumn(\"Sub-Category\", \"subCategory\", (a, b) =>\n sortByText(a.subCategory, b.subCategory)\n ),\n createCenteredTextColumn(\"Skill Name\", \"skill\", (a, b) =>\n sortByText(a.skill, b.skill)\n ),\n {\n title: createCenteredTextColumnHeader(\"Skill Level\"),\n dataIndex: \"skillLevel\",\n key: \"skillLevel\",\n sorter: (a, b) =>\n sortByText(\n `${a.skillCode} ${a.level}`,\n `${b.skillCode} ${b.level}`\n ),\n render: (text, record) => (\n \n \n \n {`${record.skillCode} ${record.level}`}\n \n \n
\n ),\n },\n\n createCenteredTextColumn(\"Status\", \"need\", (a, b) =>\n sortByText(a.need, b.need)\n ),\n ];\n } else {\n columns = [\n createCenteredTextColumn(\"Full Name\", \"fullName\", (a, b) =>\n sortByText(a.fullName, b.fullName)\n ),\n createCenteredTextColumn(\"Sub-Category\", \"subCategory\", (a, b) =>\n sortByText(a.subCategory, b.subCategory)\n ),\n createCenteredTextColumn(\"Skill Name\", \"skill\", (a, b) =>\n sortByText(a.skill, b.skill)\n ),\n {\n title: createCenteredTextColumnHeader(\"Skill Level\"),\n dataIndex: \"skillLevel\",\n key: \"skillLevel\",\n sorter: (a, b) =>\n sortByText(\n `${a.skillCode} ${a.level}`,\n `${b.skillCode} ${b.level}`\n ),\n render: (text, record) => (\n \n \n \n {`${record.skillCode} ${record.level}`}\n \n \n
\n ),\n },\n {\n title: createCenteredTextColumnHeader(\"Status\"),\n dataIndex: \"profileStatus\",\n key: \"profileStatus\",\n sorter: (a, b) => sortByText(a.profileStatus, b.profileStatus),\n render: (text, record) => (\n \n {record.profileType} \n
\n ),\n },\n ];\n }\n\n // Return the formatted table contained within a styled wrapper.\n return (\n \n \n \n );\n };\n\n // This function determines if a row is expandable based on the 'isSkill' attribute.\n const onRowExpandable = (record) => {\n // Directly return the boolean value of 'levels' attribute of the record.\n // If the attribute isn't present, it defaults to false.\n return record.levels.length > 0;\n };\n\n const onExpandCellRendered = (text, record, index) => {\n // Find the corresponding expandable item from the listExpand array using the record's category.\n const findExpand = listExpand.find((_) => _.name === record.category);\n\n return (\n \n {/* \n Conditional rendering: \n If 'isShowExpand' attribute of the record is true, then render the custom cell wrapper. \n Otherwise, nothing will be rendered inside the div. \n */}\n {record.isShowExpand && (\n onExpendClicked(findExpand, record)}\n >\n
\n );\n };\n\n const onCategoryCellRendered = (text, record, index) => {\n // Render the chosen component inside a div with the given class.\n // The title and placement properties are consistent for both components.\n return (\n \n \n {text}\n \n
\n );\n };\n\n const onExpandCellTitleRendered = (meta) => {\n // Define the custom title for the tooltip:\n // It contains the name of the level responsibility and a list of levels beneath it.\n const customTitle = () => (\n \n {/* Display the name of the level responsibility */}\n {meta.levelResponsibility.name} \n\n {/* Map through the levels and display each one */}\n {meta.levelResponsibility.levels.map((item, index) => (\n \n {`${constantData.levelName} ${item.level} : ${item.name}`}\n \n ))}\n
\n );\n\n // Render the custom title wrapped in a 'WrapperTitleCustom' component.\n // It contains an expandable icon and an informational icon within a tooltip.\n return (\n \n {/* Information Icon wrapped in a tooltip */}\n \n \n );\n };\n\n const onExpendClicked = (obj, record) => {\n if (!obj) return; // Early exit if obj is falsy\n\n const tempExpandStatus = !obj.isExpand;\n\n listExpand.forEach((_) => (_.isExpand = false));\n const updatedListExpand = [...listExpand]; // Create a copy of the listExpand array\n\n if (tempExpandStatus === true) {\n // Toggle the expand status of the clicked item\n obj.isExpand = tempExpandStatus;\n }\n\n setListExpand(updatedListExpand); // Update state with the new list\n setExpendedRowKeysRef((prevState) => ({\n ...prevState, // Keep other properties of the state unchanged\n name: tempExpandStatus ? record.category : \"\",\n keys: tempExpandStatus ? [record.key] : [],\n }));\n };\n\n // Renders cell content based on the level value\n const onCellRendered = (text, record, index, lv) => {\n // Filter out the levels based on the provided `lv`.\n const findLevels = record.levels.filter((item) => item.lv === lv);\n\n // Create a map to keep track of the count of each code.\n // This helps in avoiding multiple filters and loops on the same array.\n const codeCounts = {};\n for (let item of findLevels) {\n if (!codeCounts[item.code]) {\n codeCounts[item.code] = 1; // Initialize count if code is seen for the first time.\n } else {\n codeCounts[item.code]++; // Increment count for the code.\n }\n }\n\n // Extract unique skill codes.\n const uniqueCodes = Object.keys(codeCounts);\n\n // Render the tooltip content.\n const dataTip = () => (\n \n Skill Level: {lv}
\n \n Count Of Skills Code: {findLevels.length}\n \n {uniqueCodes.map((code, idx) => (\n \n \n {code}\n {/* If a code appears more than once, show its count. */}\n {` (${codeCounts[code]})`}\n \n {/* Display a circle with background color from record meta. */}\n \n \n ))}\n \n );\n\n // Render the main cell content. If there are matching levels, display a tooltip.\n return (\n \n {findLevels.length > 0 && (\n
\n {findLevels.length}
\n \n )}\n
\n {text}\n \n );\n\n const getDataSource = () => {\n if (data?.subCategories) {\n // If the root is expanded, handle both subcategories and their skills\n return data.subCategories.flatMap((item, index) => {\n const { name, description, people } = item;\n const findCategoryColor = constantData.categoryColors.find(\n (_) => _.name === name\n );\n // Construct base data for the sub-category\n const baseData = {\n key: `${index + 1}`,\n category: name,\n isShowExpand: true,\n meta: {\n description,\n tint: findCategoryColor ? findCategoryColor.tint : item.tint ? item.tint : item.styles.skillColour,\n bold: findCategoryColor ? findCategoryColor.bold : item.bold ? item.bold : item.styles.cateColour,\n },\n levels: people.map((_) => ({\n lv: _.level,\n code: _.skillCode,\n })),\n people,\n };\n\n // Check if the current sub-category is in the list of expanded items\n const findExpand = listExpand.find(\n (expandItem) => expandItem.name === name\n );\n\n // If found but it's not expanded, only return the base data\n if (findExpand && !findExpand.isExpand) {\n return [baseData];\n }\n // Return a combined array of the base sub-category data and all its skills data\n return [baseData];\n });\n }\n return [];\n };\n\n const getColumns = () => {\n if (data?.subCategories) {\n // Initial columns for category and expand cells\n const initialColumns = [\n {\n title: () => onCellTitleRendered(data.name, data.description),\n dataIndex: constantData.categoryName,\n key: constantData.categoryName,\n render: onCategoryCellRendered,\n },\n {\n title: () => onExpandCellTitleRendered(data.meta),\n key: constantData.expandName,\n dataIndex: constantData.expandName,\n render: onExpandCellRendered,\n },\n ];\n\n // Generate columns for each skill level\n const skillLevelColumns = Array.from(\n { length: constantData.skillLevelCount },\n (_, lv) => {\n const level = lv + 1;\n return {\n title: `${level}`,\n dataIndex: `${level}`,\n key: `${level}`,\n onCell: (record, index) =>\n onLevelColorCellRendered(record, index, level),\n render: (text, record, index) =>\n onCellRendered(text, record, index, level),\n };\n }\n );\n\n // Combine and return all columns\n return [...initialColumns, ...skillLevelColumns];\n }\n return [];\n };\n\n // useMemo calculates and memoizes the table data based on its dependencies.\n // It will only re-compute the table data when either data, listExpand, or isContentLoaded changes.\n const tableData = useMemo(() => {\n if (isContentLoaded === false || data === undefined || data === null)\n return { dataSource: [], columns: [] };\n // Get the data source using the provided getDataSource function\n const dataSource = getDataSource();\n\n // Get the columns using the provided getColumns function\n const columns = getColumns();\n\n // Return the computed values in an object\n return { dataSource, columns };\n }, [data, listExpand, isContentLoaded]); // Memoization depends on these three values.\n\n // This useEffect is responsible for handling the side-effect when the content is not yet loaded.\n // It updates the state by marking the content as loaded and sets the initial expanded subcategories.\n useEffect(() => {\n // Check if the content has not been loaded yet\n if (!isContentLoaded) {\n // Mark content as loaded\n setIsContentLoaded(true);\n\n // Generate an array of expanded subcategories from the data\n let tempListExpand = [];\n if (data?.subCategories) {\n tempListExpand =\n data?.subCategories.map((subCategory) => ({\n name: subCategory.name,\n isExpand: false,\n })) || [];\n }\n\n // Update the listExpand state by appending the new expanded subcategories.\n // We use a functional update to safely access and update the previous state.\n setListExpand((prevListExpand) => [...prevListExpand, ...tempListExpand]);\n }\n }, [data, isContentLoaded]); // The effect depends on the data and the isContentLoaded flag.\n\n // useEffect for handling the side-effect related to listExpand updates\n useEffect(() => {\n const find = listExpand.find(\n (item) => item.isExpand === false && item.name === expendedRowKeysRef.name\n );\n\n if (find) {\n // Reset expendedRowKeysCurrent to its default values\n setExpendedRowKeysCurrent((prevState) => ({\n ...prevState,\n name: null,\n keys: [],\n }));\n }\n }, [listExpand, expendedRowKeysRef.name]);\n\n // useEffect for handling the side-effect related to expendedRowKeysRef updates\n useEffect(() => {\n // Use a functional state update for expendedRowKeysCurrent since its new value depends on the previous state\n setExpendedRowKeysCurrent((prevState) => {\n const temp = { ...prevState };\n\n if (expendedRowKeysRef.keys.length < 1) {\n temp.name = null;\n temp.keys = [];\n } else if (\n temp.keys.length > 0 &&\n temp.keys[0] === expendedRowKeysRef.keys[0]\n ) {\n temp.name = null;\n temp.keys = [];\n } else {\n temp.name = expendedRowKeysRef.name;\n temp.keys = [...expendedRowKeysRef.keys];\n }\n return temp;\n });\n }, [expendedRowKeysRef]);\n\n return (\n <>\n \n Skills by Category{\" \"}\n {isSpilt && (\n <span className=\"vs-h-sm-h\">{`(${\n isNeedSkill ? \"Skill We Need\" : \"Skill We Have\"\n })`}</span>\n )}\n \n {tableData.dataSource.length > 0 ? (\n \n \n {isShowDetail && (\n \n {data?.subCategories.map((item, index) => {\n const find = constantData.categoryColors.find(\n (_) => _.name === item.name\n );\n return (\n \n {item.name} \n \n \n );\n })}\n
\n )}\n \n ) : (\n {title} \n);\n\n// Helper function to generate a table column that centers its text content.\n// This avoids repetition for multiple columns that require similar formatting.\nconst createCenteredTextColumn = (\n title,\n dataIndex,\n sorterFunction,\n isResponsive = false\n) => ({\n title: createCenteredTextColumnHeader(title), // Column header\n dataIndex, // Data key\n key: dataIndex, // Key for React's list rendering\n sorter: (a, b) => sorterFunction(a[dataIndex], b[dataIndex]), // Sorting function for the column\n render: (text) => (\n \n {text ?? \"-\"}\n \n ), // Centering the text\n});\n\n// Utility function to compare text values\nconst sortByText = (a, b) => (a ?? \"\").localeCompare(b ?? \"\");\n\n// Utility function to transform data source for tables\n// This maps over the data and transforms it to have keys and all the item properties.\nconst transformDataSource = (data) =>\n data.map((item, index) => ({\n key: `${index + 1}`,\n ...item,\n }));\n\n// Utility function to generate column definitions based on type and need status\n// This will return the appropriate columns based on whether it's a professional or generic skill and if it's a needed skill.\nconst getColumnDefinitions = (isNeedSkill, type, isResponsive) => {\n const commonSkillLevelColumn = {\n title: createCenteredTextColumnHeader(\"Skill Level\"),\n dataIndex: \"skillLevel\",\n key: \"skillLevel\",\n sorter: (a, b) =>\n sortByText(`${a.skillCode} ${a.level}`, `${b.skillCode} ${b.level}`),\n render: (text, record) => (\n \n \n \n {`${record.skillCode} ${record.level}`}\n \n \n
\n ),\n };\n\n if (type === \"professional\") {\n return isNeedSkill\n ? [\n createCenteredTextColumn(\"Requirement Name\", \"jobName\", sortByText),\n createCenteredTextColumn(\"Reference\", \"jobRef\", sortByText),\n createCenteredTextColumn(\"Sub-Category\", \"subCategory\", sortByText),\n commonSkillLevelColumn,\n {\n title: createCenteredTextColumnHeader(\"Need Version\"),\n dataIndex: \"needVersion\",\n key: \"needVersion\",\n sorter: (a, b) =>\n sortByText(`${a.need} ${a.version}`, `${b.need} ${b.version}`),\n render: (text, record) => (\n \n \n {`${record.need} ${record.version}`}\n \n
\n ),\n },\n ]\n : [\n createCenteredTextColumn(\"Full Name\", \"fullName\", sortByText),\n createCenteredTextColumn(\"Email\", \"email\", sortByText, isResponsive),\n {\n title: createCenteredTextColumnHeader(\"Profile Status\"),\n dataIndex: \"profileStatus\",\n key: \"profileStatus\",\n sorter: (a, b) => sortByText(a.profileStatus, b.profileStatus),\n render: (text, record) => (\n \n {record.profileType} \n
\n ),\n },\n commonSkillLevelColumn,\n createCenteredTextColumn(\"Capability\", \"capability\", sortByText),\n ];\n } else if (type === \"generic\") {\n // generic type\n return isNeedSkill\n ? [\n createCenteredTextColumn(\"Requirement Name\", \"jobName\", sortByText),\n createCenteredTextColumn(\"Reference\", \"jobRef\", sortByText),\n createCenteredTextColumn(\n \"Generic Attributes (GA)\",\n \"lor\",\n sortByText\n ),\n {\n ...commonSkillLevelColumn,\n dataIndex: \"lorCode\",\n key: \"lorCode\",\n sorter: (a, b) =>\n sortByText(`${a.lorCode} ${a.level}`, `${b.lorCode} ${b.level}`),\n render: (text, record) => (\n \n \n \n {`${record.lorCode} ${record.level}`}\n \n \n
\n ),\n },\n ]\n : [\n createCenteredTextColumn(\"Full Name\", \"fullName\", sortByText),\n createCenteredTextColumn(\"Email\", \"email\", sortByText),\n createCenteredTextColumn(\n \"Generic Attributes (GA)\",\n \"lor\",\n sortByText\n ),\n {\n title: createCenteredTextColumnHeader(\"Skill Level\"),\n dataIndex: \"skillLevel\",\n key: \"skillLevel\",\n sorter: (a, b) =>\n sortByText(\n `${a.skillCode || a.lorCode} ${a.level}`,\n `${b.skillCode || b.lorCode} ${b.level}`\n ),\n render: (text, record) => (\n \n \n \n {`${record.skillCode || record.lorCode} ${record.level}`}\n \n \n
\n ),\n },\n ];\n }\n};\n\n// Component to render the table with a title\n// This abstracts the rendering of the table with a title to avoid repeating the same JSX structure.\nconst RenderTable = ({\n title,\n dataSource,\n columns,\n pageSize,\n isSpilt,\n isNeedSkill,\n}) => (\n <>\n \n {title}{\" \"}\n {isSpilt && (\n <span className=\"vs-h-sm-h\">\n ({isNeedSkill ? \"Skill We Need\" : \"Skill We Have\"})\n </span>\n )}\n \n \n \n \n);\n\nconst SkillsWeHaveNeedTableNormal = ({\n data = null,\n isNeedSkill = false,\n isShowProfessional = false,\n isShowGeneric = false,\n isSpilt = false,\n pageSize = constantData.pageSize,\n isResponsive = false,\n}) => {\n // Memoized calculation for professional table data\n const tableProfessional = useMemo(() => {\n // If not showing professional or no data, return empty data.\n if (!isShowProfessional || !data.professional)\n return { columns: [], dataSource: [] };\n\n // Return the transformed data source and the appropriate columns\n return {\n dataSource: transformDataSource(data.professional),\n columns: getColumnDefinitions(isNeedSkill, \"professional\", isResponsive),\n };\n }, [data, isShowProfessional]);\n\n // Memoized calculation for generic table data\n const tableGeneric = useMemo(() => {\n // If not showing generic or no data, return empty data.\n if (!isShowGeneric || !data.generic) return { columns: [], dataSource: [] };\n\n // Return the transformed data source and the appropriate columns\n return {\n dataSource: transformDataSource(data.generic),\n columns: getColumnDefinitions(isNeedSkill, \"generic\", isResponsive),\n };\n }, [data, isShowGeneric]);\n\n return (\n \n {isShowProfessional &&\n (tableProfessional.dataSource.length > 0 ? (\n // Render the professional table\n
\n ) : (\n
\n \n \n \n \n \n \n \n Generic Attributes\n \n \n
\n \n \n \n \n \n \n \n );\n};\n\nexport { SkillsWeNeed };\n","import CustomSelect from \"../global/customselect\";\nimport {\n FilterTwoTone,\n FilterFilled,\n CloseCircleOutlined,\n} from \"@ant-design/icons\";\nimport { Row, Col, Button, Tag, Typography, Divider } from \"antd\";\nimport React, { useMemo, useState, useCallback } from \"react\";\nimport styled from \"styled-components\";\n\nconst { Title } = Typography;\n\nconst WrapperFilter = styled.div`\n .anticon {\n vertical-align: 0.125em;\n }\n .card-c {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n padding: 35px;\n\n border: 1px solid rgba(255, 255, 255, 0.25);\n border-radius: 20px;\n background-color: rgba(255, 255, 255, 0.45);\n box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);\n\n backdrop-filter: blur(15px);\n }\n\n .slide {\n transition: all 0.5s ease-in-out;\n transform-origin: left top;\n animation: slide 0.5s;\n @keyframes slide {\n 0% {\n transform: scaleY(0);\n }\n 100% {\n transform: scaleY(1);\n }\n }\n }\n\n .mt-20 {\n margin-top: 20px;\n }\n .mt-10 {\n margin-top: 10px;\n }\n .mr-10 {\n margin-right: 10px;\n }\n .font-small {\n font-size: 13px;\n }\n\n .ml-5-c {\n margin-left: 5px;\n }\n .mb-10 {\n margin-bottom: 5px;\n }\n\n .rotate-90 {\n transform: rotate(90deg);\n transition: transform 0.5s;\n }\n .rotate-0 {\n transform: rotate(0deg);\n transition: transform 0.5s;\n }\n\n @media (max-width: 1280px) {\n .col-sm-cm {\n max-width: 100% !important;\n flex: 0 0 100%;\n }\n }\n @media (max-width: 760px) {\n .col-sm-cm-m {\n max-width: 100% !important;\n flex: 0 0 100%;\n }\n .sm-mt-10 {\n margin-top: 10px;\n }\n }\n`;\n\n// Helper function to render tags based on the object and its color.\nconst renderTags = (obj, color, onCloseClicked, isTree = false) => {\n return obj?.value?.map((item, index) => (\n \n {/* Check if item is a string or needs to be parsed */}\n {isTree ? JSON.parse(item).value : item} \n onCloseClicked(obj, item)}\n style={{ color: \"darkred\" }}\n />\n \n ));\n};\n\nconst renderFilter = (Component, isExpand) => (\n \n \n {/* Rest of the JSX structure where you'll use your button */}\n setIsExpand((state) => !state)}\n >\n Filter\n \n \n {/* Rest of the JSX structure where you'll use your renderTags */}\n \n {/* Render tags for each filter type */}\n {renderTags(objProfile, \"magenta\", onCloseClicked, true)}\n {renderTags(objName, \"red\", onCloseClicked)}\n {renderTags(objLorSkill, \"geekblue\", onCloseClicked, true)}\n {renderTags(objGeneric, \"purple\", onCloseClicked, true)}\n \n \n \n {/* Rest of the JSX structure where you'll use your CustomSelect */}\n \n \n \n \n Filter only the skills\n \n \n \n \n \n \n Filter only the generic attributes\n \n \n \n \n \n \n \n Filter both\n \n \n \n\n \n );\n};\n\nexport default SkillsWeHaveFilters;\n","import CategoryAPI from \"../../../../common/api/service/CategoryService\";\nimport PersonService from \"../../../../common/api/service/PersonService\";\nimport ProfileService from \"../../../../common/api/service/ProfileService\";\nimport { Bar } from \"../../components/charts\";\nimport { LevelResponsibility } from \"../../components/config/mockdata/levels\";\nimport { OrderCategory } from \"../../components/config/mockdata/order\";\nimport SkillsWeHaveFilters from \"../../components/filters/skillswehave\";\nimport {\n SkillsWeHaveNeedTable,\n SkillsWeHaveNeedTableNormal,\n} from \"../../components/table\";\nimport { Typography } from \"antd\";\nimport { groupBy } from \"lodash\";\nimport React, { useState, useEffect, useMemo } from \"react\";\nimport { Spinner } from \"reactstrap\";\nimport styled from \"styled-components\";\n\nconst { Title } = Typography;\n\nconst DivCenter = ({ Component }) => {\n return (\n \n \n );\n};\n\n// styled components\nconst Container = styled.div`\n padding: 0px 30px 0px 30px;\n .mt-40 {\n margin-top: 40px;\n }\n`;\n\nconst ContainerBorder = styled.div`\n padding: 10px;\n border-width: 1px;\n border-style: solid;\n border-color: #dddddd;\n border-radius: 14px;\n`;\n\nconst ContainerContent = styled.div`\n padding: 20px 30px;\n`;\n\nconst ContainerDefault = styled.div`\n padding: 0px 0px 20px 0px;\n`;\n\n// Constant Data\nconst constantData = {\n pageSize: 5,\n jobLorProfileLevel: 8,\n empty: \"\",\n spaceBar: \" \",\n levelName: \"level\",\n profileStatusName: \"profileStatus\",\n skillCodeLevelName: \"skillCodeLevel\",\n desirableName: \"Desirable\",\n requiredName: \"Required\",\n jobTypeList: [\"Current\", \"Future\"],\n fullName: \"fullName\",\n categoryName: \"category\",\n skillName: \"skill\",\n categoryTitleName: \"Category\",\n subCategoryName: \"subCategory\",\n endorsedName: \"Endorsed\",\n competencyName: \"Competency\",\n capabilityName: \"capability\",\n lorCodeName: \"lorCode\",\n proficiencyName: \"Proficiency\",\n knowledgeName: \"Knowledge\",\n genericAttributeName: \"GenericAttribute\",\n personName: \"Person\",\n keyResult: [\"haveSkill\", \"needSkill\"],\n styles: {\n maxWidth: \"auto\",\n },\n colors: {\n type1: \"#3C65C2\",\n type2: \"#EEF2FF\",\n type3: \"#69849c\",\n type4: \"#a5b8c8\",\n },\n characters: {\n m: \"M\",\n n: \"N\",\n p: \"P\",\n },\n};\n\n// Helper function to deep clone data using JSON methods\n// This works for simple data structures without circular references or functions\nconst deepClone = (data) => JSON.parse(JSON.stringify(data));\n\n// Returns a new array containing only the unique elements from the provided `dataArray` based on a custom comparison function.\nconst distinctArray = (dataArray, func) => {\n // `seen` will store a unique \"hash\" for each item we've already encountered.\n const seen = new Set();\n\n // The array to accumulate unique items from `dataArray`.\n const uniqueArray = [];\n\n dataArray.forEach((item) => {\n // Create a unique \"hash\" for the current item based on the comparator function.\n // This \"hash\" is simply a string representation of all items considered equal to the current item.\n const hash = uniqueArray.some((itemIn) => func(item, itemIn));\n\n // If we haven't seen this unique \"hash\" before, add the item to our unique array.\n if (!hash) {\n seen.add(hash);\n uniqueArray.push(item);\n }\n });\n\n return uniqueArray;\n};\n\nconst SkillsWeHave = () => {\n // Data\n const [data, setData] = useState([]);\n const [genericAttributeData, setGenericAttributeData] = useState([]);\n const [isContentLoaded, setIsContentLoaded] = useState(false);\n\n // Selection\n const [selectedLorSkill, setSelectedLorSkill] = useState([]);\n const [selectedGeneric, setSelectedGeneric] = useState([]);\n const [selectedName, setSelectedName] = useState([]);\n const [selectedProfile, setSelectedProfile] = useState([]);\n\n // Processes the data of a person for a given item and its associated versions.\n const processPersonData = async (item, versions, categories) => {\n const availableSkillCodes = categories\n ? categories.flatMap((category, index) => {\n return category.subCategories.flatMap((subCategory, index) => {\n return subCategory.skills\n .filter((it) => !it.isHidden)\n .flatMap((skill, index) => {\n return skill.skillsCode;\n });\n });\n })\n : [];\n\n // Creates a copy of personB's accounts and sorts them in descending order based on the creation date.\n // Then, selects the most recent account.\n const account = item.personB.accounts\n .slice()\n .sort((a, b) => new Date(b.createdOn) - new Date(a.createdOn))[0];\n\n // If an account exists, creates a copy of its approvals, sorts them in descending order based on the approval date,\n // and then selects the most recent approval.\n const approver =\n account &&\n account.approvals\n .slice()\n .sort((a, b) => new Date(b.approvedOn) - new Date(a.approvedOn))[0];\n\n // Retrieves skillProfiles from the item. If they're not available, and a version exists,\n // fetches them using the ProfileService. If none of these conditions are met, defaults to an empty array.\n const skillProfiles =\n item.skillProfile ||\n (versions.length > 0 &&\n (await ProfileService.getManagedPeopleSkillPofiles(\n item.personB.email,\n versions[0].sfiaVersion,\n versions[0].version\n ))) ||\n [];\n\n // Returns the processed data.\n return {\n approver,\n profiles: processDetail(skillProfiles.filter(it => availableSkillCodes.includes(it.skillCode)), categories),\n name: constantData.personName,\n };\n };\n\n //Processes generic attribute data for a given item and its versions.z`\n const processGenericAttribute = async (item, versions, categories) => {\n // Sorts the accounts of personB based on the creation date.\n const account = item.personB.accounts.sort(\n (a, b) => new Date(a.createdOn) - new Date(b.createdOn)\n );\n\n // Sorts the approvals of the oldest account based on the approval date.\n const sortedApprovals = account[0].approvals.sort(\n (a, b) => new Date(a.approvedOn) - new Date(b.approvedOn)\n );\n\n // Gets the first (oldest) approver if available, otherwise null.\n const approver = sortedApprovals.length > 0 ? sortedApprovals[0] : null;\n\n // Retrieves lorProfiles from the item or fetches them if not available and a version exists.\n const lorProfiles =\n item.lorProfile ||\n (versions.length > 0\n ? await ProfileService.getManagedPeopleLorPofiles(\n item.personB.email,\n versions[0].sfiaVersion,\n versions[0].version\n )\n : []);\n\n // Returns the processed data.\n return {\n approver,\n profiles: processDetail(lorProfiles, categories),\n name: constantData.genericAttributeName,\n };\n };\n\n // Processes data related to people who possess certain skills.\n const processData = async (personPeople, categories) => {\n // Initialize arrays to store processed data.\n const personData = [];\n const genericAttributeData = [];\n\n // Map over each person item and process their data concurrently.\n await Promise.all(\n personPeople.map(async (item) => {\n // Get the profile versions of the current person.\n // If not provided, fetch them using the ProfileService.\n const versions =\n item.profileVersion ||\n (await ProfileService.getManagedPeopleProfileVersions(\n item.personB.email\n ));\n\n // Concurrently fetch and process person data and generic attribute data.\n const listData = await Promise.all([\n processPersonData(item, versions, categories),\n processGenericAttribute(item, versions, categories),\n ]);\n\n // For each processed data value, transform and filter the profiles.\n for (const value of listData) {\n const mapData = value.profiles\n .map((_) => ({\n ..._,\n // Append full name and email details to each profile.\n fullName: `${item.personB.firstName} ${item.personB.lastName}`,\n email: item.personB.email,\n ...value.approver,\n // Set the profile status based on its type and approver details.\n profileStatus: !_.profileType.includes(constantData.endorsedName)\n ? value.approver\n ? `${_.profileType} (Approved)`\n : `${_.profileType} (Not Approved)`\n : _.profileType,\n isApproved: !_.profileType.includes(constantData.endorsedName)\n ? value.approver\n ? true\n : false\n : null,\n approvedText: !_.profileType.includes(constantData.endorsedName)\n ? value.approver\n ? \"Approved\"\n : \"Not Approved\"\n : null,\n // Determine the capability based on stringVal.\n capability:\n _.stringVal === constantData.characters.m\n ? constantData.competencyName\n : _.stringVal === constantData.characters.p\n ? constantData.proficiencyName\n : constantData.knowledgeName,\n }))\n .filter((_) => _.stringVal !== constantData.characters.n);\n\n // If the processed data name matches \"personName\", push to personData, else to genericAttributeData.\n if (value.name === constantData.personName) {\n personData.push(mapData);\n } else {\n genericAttributeData.push(mapData);\n }\n }\n })\n );\n\n // Flatten and set the processed data to their respective states or storage locations.\n setData(personData.flat(2));\n setGenericAttributeData(genericAttributeData.flat(2));\n };\n\n const processDetail = (data, categories) =>\n data.map((element) => {\n let findCategory = categories?.find(\n (item) => item.name === element?.category\n );\n if (!findCategory) {\n findCategory = {\n colour: constantData.colors.type3,\n description: constantData.empty,\n };\n }\n let findSubCategory = findCategory?.subCategories?.find(\n (item) => item.name === element?.subCategory\n );\n if (!findSubCategory) {\n findSubCategory = {\n colour: constantData.colors.type4,\n description: constantData.empty,\n };\n }\n const findSkill = findSubCategory?.skills?.find(\n (item) => item.name === element?.skill\n );\n const findLevel = findSkill?.levels?.find(\n (item) => item.level === element?.level\n );\n\n return {\n categoryDetail: {\n colour: findCategory?.colour,\n description: findCategory?.description,\n },\n subCategoryDetail: {\n skillColour: findSubCategory?.skillColour,\n colour: findSubCategory?.colour,\n description: findSubCategory?.description,\n },\n skillDetail: {\n description: findSkill?.description,\n },\n levelDetail: {\n description: findLevel?.description,\n },\n ...element,\n };\n });\n\n // Processes all relevant data for skills.\n // This function fetches a set of initial data, and then prepares and processes\n // two types of skill-related data: haveSkill and needSkill.\n const processAllData = async () => {\n try {\n // Concurrently fetch multiple sets of data using Promise.all for improved performance.\n const [\n personPeople,\n personProfile,\n profileVersion,\n skillProfile,\n lorProfile,\n categories,\n ] = await Promise.all([\n PersonService.getPersonMyPeoples(),\n PersonService.getPersonMyProfile(),\n ProfileService.getMyProfileVersions(),\n ProfileService.getMySkillPofiles(),\n ProfileService.getMyLorPofiles(),\n CategoryAPI.getCategories(),\n ]);\n\n // Construct a new data entry based on the fetched personal profile and related data.\n const newDataEntry = {\n personB: personProfile,\n profileVersion,\n skillProfile,\n lorProfile,\n };\n\n // Append the new data entry to the existing list of personPeople for processing \"haveSkill\" data.\n const prepareDataHaveSkill = [...personPeople, newDataEntry];\n\n await processData(prepareDataHaveSkill, categories);\n } catch (error) {\n // Log the error if fetching fails\n console.error(\"Failed to fetch action plan data:\", error);\n\n // Optionally, you can set an error state here if you'd like to display an error message to users.\n }\n };\n\n const generateTableSkillCategory = (data) => {\n // Destructure for easier access.\n const { categoryName } = constantData;\n\n // Use a single reduce function to categorize and structure the data.\n const groupedData = data.reduce((acc, item) => {\n // Extract keys for categorization.\n const categoryKey = item[categoryName];\n\n // If the category does not exist, initialize it.\n if (!acc[categoryKey]) {\n acc[categoryKey] = {\n values: [],\n };\n }\n\n // Push the item into the category values.\n acc[categoryKey].values.push(item);\n return acc;\n }, {});\n\n // Extract keys from groupedData\n const groupedKeys = Object.keys(groupedData);\n\n let orderedCats = OrderCategory.map((key) =>\n groupedKeys.find((e) => e.name === key)\n );\n\n let orderedKeys = [];\n if (orderedCats.filter(it => it == undefined).length > 0){\n orderedKeys = [...groupedKeys];\n }else{\n //Filter and reorder the keys based on OrderCategory\n orderedKeys = OrderCategory.filter((key) =>\n groupedKeys.includes(key)\n );\n }\n\n // Construct the ordered grouped data\n const orderedGroupedData = orderedKeys.map((key) => [\n key,\n groupedData[key],\n ]);\n\n const resultData = {\n name: constantData.categoryTitleName,\n meta: { levelResponsibility: LevelResponsibility },\n description: constantData.empty,\n styles: {\n tableHeaderColor: constantData.colors.type1,\n tableHeaderBackgroundColor: constantData.colors.type2,\n },\n subCategories: orderedGroupedData.map(\n ([categoryKey, { values: categoryValues }]) => {\n const { categoryDetail, subCategoryDetail } = categoryValues[0];\n return {\n name: categoryKey,\n meta: { levelResponsibility: LevelResponsibility },\n description: categoryDetail.description,\n styles: {\n cateColour: categoryDetail.colour,\n skillColour: subCategoryDetail.skillColour,\n colour: subCategoryDetail.colour || \"\",\n },\n people: categoryValues,\n };\n }\n ),\n };\n\n return resultData;\n };\n\n // Generates bar data for given input.\n const generateBar = (data) => {\n // Use reduce to create an object where the keys are the skillCodeLevel\n // and the values are their respective counts.\n const groupedData = data.reduce((acc, item) => {\n const skillCodeLevel = `${item.lorCode} - ${item.level}`;\n\n // If the skillCodeLevel doesn't exist in the accumulator, initialize it.\n if (!acc[skillCodeLevel]) {\n acc[skillCodeLevel] = 0;\n }\n\n // Increment the count for the skillCodeLevel.\n acc[skillCodeLevel]++;\n\n return acc;\n }, {});\n\n // Convert the grouped data object to an array of {label, value} objects.\n const aggregatedData = Object.entries(groupedData).map(\n ([label, value]) => ({\n label,\n value,\n })\n );\n\n // Sort the data in descending order based on their values (counts).\n aggregatedData.sort((a, b) => b.value - a.value);\n\n return {\n maxCount: Math.max(...aggregatedData.map((item) => item.value)) + 1, // Calculate the maximum count\n source: aggregatedData,\n };\n };\n\n const generateTreeSelect = (data, name) =>\n // Using Object.entries to get both key and value of each entry in the data object\n Object.entries(data)\n .map(([category, itemsArray], categoryIdx) => {\n // Generating a Set to deduplicate the values based on the 'name' property\n // Then spread the Set back into an array for easy mapping\n const uniqueValues = [...new Set(itemsArray.map((item) => item[name]))];\n const rootData = JSON.stringify({\n isRoot: true,\n value: category,\n });\n return {\n title: category,\n value: rootData,\n key: rootData,\n\n // For each unique value, we map it to generate the 'children' array\n children: uniqueValues\n .map((uniqueValue, valueIdx) => {\n const childData = JSON.stringify({\n isRoot: false,\n value: uniqueValue,\n });\n return {\n // Fetching the 'text' property directly from the original itemsArray for each child\n title: itemsArray[valueIdx].text,\n value: childData,\n key: childData,\n };\n })\n .sort((a, b) => a.title.localeCompare(b.title)),\n };\n })\n .sort((a, b) => a.title.localeCompare(b.title));\n\n // Filter by Person Name\n const optionsName = useMemo(() => {\n if (data.length === 0) return [];\n\n // Deduplicate the combined array based on the fullName.\n const uniqueSkills = distinctArray(\n data,\n (itemA, itemB) => itemA.fullName === itemB.fullName\n );\n\n const groupedData = groupBy(uniqueSkills, constantData.fullName);\n\n return Object.keys(groupedData)\n .map((item) => ({\n label: item,\n value: item,\n }))\n .sort((a, b) => a.label.localeCompare(b.label));\n }, [data]);\n\n // Filter Profile Status\n const optionProfileStatus = useMemo(() => {\n if (data.length === 0) return [];\n\n const temp = data.map((item) => ({\n capability: `${item.capability} (${item.approvedText})`,\n profileStatus: item.profileStatus,\n text: `${item.capability} (${item.approvedText})`,\n }));\n // Deduplicate the combined array based on the capability.\n const uniqueArray = distinctArray(\n temp,\n (itemA, itemB) => itemA.capability === itemB.capability\n );\n\n // Generate the tree select structure.\n return generateTreeSelect(\n groupBy(uniqueArray, constantData.profileStatusName),\n constantData.capabilityName\n );\n }, [data]);\n\n // Filter Level of Skill Have\n const optionLorSkillLevel = useMemo(() => {\n // Exit early if there's no data to process.\n if (data.length === 0) return [];\n\n // Transform\n const combinedSkills = [...data].map((item) => ({\n skillCode: `${item.skillCode} - ${item.level}`,\n level: `Level ${item.level}`,\n text: `${item.skillCode} - ${item.level}`,\n }));\n\n // Deduplicate the combined array based on the skillCode.\n const uniqueSkills = distinctArray(\n combinedSkills,\n (itemA, itemB) => itemA.skillCode === itemB.skillCode\n );\n\n // Generate the tree select structure.\n return generateTreeSelect(\n groupBy(uniqueSkills, constantData.levelName),\n \"skillCode\"\n );\n }, [data]);\n\n // Filter Level of Generic Attribute Have\n const optionGenericAttribute = useMemo(() => {\n // Exit early if there's no data to process.\n if (genericAttributeData.length === 0) return [];\n\n // Transform\n const combinedSkills = [...genericAttributeData].map((item) => ({\n lorCode: `${item.lorCode} - ${item.level}`,\n level: `Level ${item.level}`,\n text: `${item.lorCode} - ${item.level}`,\n }));\n\n // Deduplicate the combined array based on the skillCode.\n const uniqueSkills = distinctArray(\n combinedSkills,\n (itemA, itemB) => itemA.lorCode === itemB.lorCode\n );\n\n // Generate the tree select structure.\n return generateTreeSelect(\n groupBy(uniqueSkills, constantData.levelName),\n constantData.lorCodeName\n );\n }, [genericAttributeData]);\n\n // Data Filter => Ref By Data\n const dataFilter = useMemo(() => {\n let resultData = [];\n\n if (data.length) {\n resultData = data.filter((item) => {\n // If selectedName is populated and the condition is not met, filter out\n if (selectedName.length > 0 && !selectedName.includes(item.fullName)) {\n return false;\n }\n\n // If selectedProfile is populated and the condition is not met, filter out\n if (selectedProfile.length > 0) {\n const isFound = selectedProfile\n .map((_) => JSON.parse(_))\n .some((_) => {\n if (_.isRoot) {\n return item.profileStatus === _.value;\n } else {\n return `${item.capability} (${item.approvedText})` === _.value;\n }\n });\n if (!isFound) {\n return false;\n }\n }\n\n // If selectedLorSkill is populated and the condition is not met, filter out\n if (selectedLorSkill.length > 0) {\n const isFound = selectedLorSkill\n .map((_) => JSON.parse(_))\n .some((_) => {\n if (_.isRoot) {\n return `Level ${item.level}` === _.value;\n } else {\n return `${item.skillCode} - ${item.level}` === _.value;\n }\n });\n if (!isFound) {\n return false;\n }\n }\n\n // If all conditions are met or not applicable, include the item\n return true;\n });\n }\n\n return resultData;\n }, [data, selectedLorSkill, selectedName, selectedProfile]);\n\n // Data Filter => Ref By Data\n const dataFilterGenericAttribute = useMemo(() => {\n let resultData = [];\n\n if (genericAttributeData.length) {\n resultData = genericAttributeData.filter((item) => {\n // If selectedName is populated and the condition is not met, filter out\n if (selectedName.length > 0 && !selectedName.includes(item.fullName)) {\n return false;\n }\n\n // If selectedGeneric is populated and the condition is not met, filter out\n if (selectedGeneric.length > 0) {\n const isFound = selectedGeneric\n .map((_) => JSON.parse(_))\n .some((_) => {\n if (_.isRoot) {\n return `Level ${item.level}` === _.value;\n } else {\n return `${item.lorCode} - ${item.level}` === _.value;\n }\n });\n if (!isFound) {\n return false;\n }\n }\n\n // If all conditions are met or not applicable, include the item\n return true;\n });\n }\n\n return resultData;\n }, [genericAttributeData, selectedGeneric, selectedName]);\n\n const dashboardTableSkillCategory = useMemo(\n () => generateTableSkillCategory(dataFilter) ?? {},\n [dataFilter]\n ); // Recompute only if dataFilter changes\n\n const dashboardTableGeneric = useMemo(\n () =>\n dataFilterGenericAttribute.length > 0\n ? { generic: deepClone(dataFilterGenericAttribute) }\n : {},\n [dataFilterGenericAttribute]\n );\n\n const dashboardTableProfessional = useMemo(\n () =>\n dataFilter.length > 0 ? { professional: deepClone(dataFilter) } : {},\n [dataFilter]\n );\n\n // Use useMemo to ensure we only recompute the data when `dataFilter` changes.\n const dashboardBar = useMemo(\n () =>\n dataFilterGenericAttribute.length > 0\n ? generateBar(dataFilterGenericAttribute)\n : {},\n [dataFilterGenericAttribute]\n );\n\n useEffect(() => {\n // This variable helps us ensure that we don't call `setIsContentLoaded` if the component has unmounted before our asynchronous operation completes.\n let isMounted = true;\n\n processAllData().then(() => {\n if (isMounted) {\n // Only set the loading state to false if the component is still mounted\n setIsContentLoaded(true);\n }\n });\n\n // The cleanup function for the effect\n return () => {\n // If the component unmounts, we set isMounted to false to prevent any state updates after unmounting.\n isMounted = false;\n };\n }, []);\n\n // If content is still loading, display a spinner.\n if (!isContentLoaded) {\n return \n \n \n \n \n \n \n \n Generic Attributes\n \n \n
\n \n \n \n \n \n \n \n );\n};\n\nexport { SkillsWeHave };\n","import { UpOutlined, UserOutlined, SolutionOutlined } from \"@ant-design/icons\";\nimport { Col, Row, Typography, Button, Badge, Empty } from \"antd\";\nimport React, { useEffect } from \"react\";\nimport { Tree, TreeNode } from \"react-organizational-chart\";\nimport styled from \"styled-components\";\nimport { useImmer } from \"use-immer\";\n\nconst { Title, Text } = Typography;\n\nconst DivCenter = ({ Component }) => {\n return (\n \n );\n};\n\nconst WarperNode = styled.div`\n display: inline-block;\n justify-content: space-between;\n\n padding: 20px;\n\n border: 1px solid rgba(255, 255, 255, 0.25);\n border-radius: 10px;\n background-color: rgba(255, 255, 255, 0.45);\n box-shadow: 0 0 10px 1px #dcdcdc;\n\n backdrop-filter: blur(15px);\n\n transition: all 0.5s ease-in-out;\n transform-origin: left top;\n animation: slide 0.5s;\n @keyframes slide {\n 0% {\n transform: scaleY(0);\n }\n 100% {\n transform: scaleY(1);\n }\n }\n`;\n\nconst WarperIconExpand = styled.div`\n margin-bottom: -15px;\n margin-top: 15px;\n`;\n\nconst WrapperTree = styled.div`\n padding-top: 30px;\n padding-bottom: 30px;\n\n .rotate-180 {\n transform: rotate(180deg);\n transition: transform 0.5s;\n }\n .rotate-0 {\n transform: rotate(0deg);\n transition: transform 0.5s;\n }\n`;\n// Utility function to get expanded data from a node\nconst getExpandedData = (node) => ({\n isExpand: node?.isExpand ?? false,\n key: node.label,\n});\n\nconst renderNode = (item, func, listExpand) => {\n // Check if the item has children for multiple conditions\n const hasChildren = item.children.length > 0;\n\n // Find the expand data for the current item\n const expandData = listExpand?.data?.find(\n (expand) => expand.key === item.label\n );\n\n return (\n \n \n {/* Render the first column with Badge and Button if item has children */}\n {hasChildren && (\n \n \n func(item, expandData)}\n type=\"dashed\"\n shape=\"circle\"\n icon={item.isRoot ?
\n \n )}\n\n {/* Render the label of the node */}\n \n \n {hasChildren ? (\n {item.label} \n ) : (\n {item.label} \n )}\n
\n {/* Display number of children if applicable */}\n {hasChildren && expandData?.isExpand && (\n \n {item.children.length} {item.isRoot ? \"Members\" : \"Skills\"}\n
\n )}\n \n \n\n {/* Display the expand/collapse icon if item has children */}\n {hasChildren && (\n \n func(item, expandData)}\n type=\"link\"\n shape=\"circle\"\n icon={\n \n )}\n \n );\n};\n\nconst renderTreeNode = (data, func, listExpand) => {\n if (data.children.length < 1) return null;\n\n // Determine if current data should be expanded or not\n const expandData = listExpand?.data?.find(\n (expand) => expand.key === data.label\n );\n if (expandData?.isExpand === false) return null;\n\n // Render each child as a TreeNode\n return data.children.map((item, index) => (\n \n {renderTreeNode(item, null, listExpand)}\n \n ));\n};\n\nconst OrganizationalChart = ({ data }) => {\n const [listExpand, setListExpand] = useImmer({ data: [] });\n\n // Toggle expand state for nodes\n const onExpandedClicked = (node, expandData) => {\n if (!node.children.length) return;\n\n setListExpand((draft) => {\n if (node.isRoot && expandData.isExpand) {\n draft.data.forEach((item) => (item.isExpand = !expandData.isExpand));\n } else {\n const found = draft.data.find((item) => item.key === expandData.key);\n if (found) {\n found.isExpand = !expandData.isExpand;\n }\n }\n });\n };\n\n // Initialize the expand states based on provided data\n useEffect(() => {\n if (data) {\n const tempListExpand = [\n getExpandedData(data),\n ...data.children.map(getExpandedData),\n ];\n setListExpand((draft) => {\n draft.data = tempListExpand;\n });\n }\n }, [data]);\n\n // If no data, render an empty component\n if (!data)\n return (\n (\n \n
\n Our Team\n \n \n \n {renderTreeNode(data, onExpandedClicked, listExpand)}\n \n \n \n );\n};\n\nexport default OrganizationalChart;\n","import CustomSelect from \"../global/customselect\";\nimport {\n FilterTwoTone,\n FilterFilled,\n CloseCircleOutlined,\n} from \"@ant-design/icons\";\nimport { Row, Col, Button, Tag } from \"antd\";\nimport React, { useMemo, useState, useCallback } from \"react\";\nimport styled from \"styled-components\";\n\nconst WrapperFilter = styled.div`\n .anticon {\n vertical-align: 0.125em;\n }\n .card-c {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n padding: 35px;\n\n border: 1px solid rgba(255, 255, 255, 0.25);\n border-radius: 20px;\n background-color: rgba(255, 255, 255, 0.45);\n box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);\n\n backdrop-filter: blur(15px);\n }\n\n .slide {\n transition: all 0.5s ease-in-out;\n transform-origin: left top;\n animation: slide 0.5s;\n @keyframes slide {\n 0% {\n transform: scaleY(0);\n }\n 100% {\n transform: scaleY(1);\n }\n }\n }\n\n .mt-20 {\n margin-top: 20px;\n }\n .mt-10 {\n margin-top: 10px;\n }\n .mr-10 {\n margin-right: 10px;\n }\n .font-small {\n font-size: 13px;\n }\n\n .ml-5-c {\n margin-left: 5px;\n }\n .mb-10 {\n margin-bottom: 5px;\n }\n\n .rotate-90 {\n transform: rotate(90deg);\n transition: transform 0.5s;\n }\n .rotate-0 {\n transform: rotate(0deg);\n transition: transform 0.5s;\n }\n\n @media (max-width: 1280px) {\n .col-sm-cm {\n max-width: 100% !important;\n flex: 0 0 100%;\n }\n }\n @media (max-width: 760px) {\n .col-sm-cm-m {\n max-width: 100% !important;\n flex: 0 0 100%;\n }\n .sm-mt-10 {\n margin-top: 10px;\n }\n }\n`;\n\n// Helper function to render tags based on the object and its color.\nconst renderTags = (obj, color, onCloseClicked, isTree = false) => {\n return obj?.value?.map((item, index) => (\n \n {/* Check if item is a string or needs to be parsed */}\n {isTree ? JSON.parse(item).value : item} \n onCloseClicked(obj, item)}\n style={{ color: \"darkred\" }}\n />\n \n ));\n};\n\nconst renderFilter = (Component, isExpand) => (\n \n \n {/* Rest of the JSX structure where you'll use your button */}\n setIsExpand((state) => !state)}\n >\n Filter\n \n \n {/* Rest of the JSX structure where you'll use your renderTags */}\n \n {/* Render tags for each filter type */}\n {renderTags(objCountry, \"magenta\", onCloseClicked, true)}\n {renderTags(objPosition, \"red\", onCloseClicked)}\n {renderTags(objProfileStatus, \"green\", onCloseClicked, true)}\n {renderTags(objSkill, \"cyan\", onCloseClicked)}\n {renderTags(objSkillLevel, \"geekblue\", onCloseClicked, true)}\n {renderTags(objAttribute, \"purple\", onCloseClicked)}\n \n \n \n {/* Rest of the JSX structure where you'll use your CustomSelect */}\n \n \n );\n};\n\nexport default TeamBuilderFilters;\n","import {\n CheckCircleOutlined,\n CloseCircleOutlined,\n EyeTwoTone,\n} from \"@ant-design/icons\";\nimport { Table, Tag, Tooltip, Typography, Empty, Row, Col, Button } from \"antd\";\nimport React, { useMemo, useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\n\nconst { Text } = Typography;\n\nconst constantData = {\n titleLevel: 5,\n pageSize: 10,\n colors: {\n type1: \"#69849c\",\n type2: \"#a5b8c8\",\n },\n};\n\nconst DivCenter = ({ Component, title }) => {\n return (\n \n \n
{title} \n {title} \n);\n\n// Helper function to generate a table column that centers its text content.\n// This avoids repetition for multiple columns that require similar formatting.\nconst createCenteredTextColumn = (\n title,\n dataIndex,\n sorterFunction,\n isResponsive = false\n) => ({\n title: createCenteredTextColumnHeader(title), // Column header\n dataIndex, // Data key\n key: dataIndex, // Key for React's list rendering\n sorter: (a, b) => sorterFunction(a[dataIndex], b[dataIndex]), // Sorting function for the column\n render: (text) => (\n \n {text ?? \"-\"}\n \n ), // Centering the text\n});\n\n// Utility function to compare text values\nconst sortByText = (a, b) => (a ?? \"\").localeCompare(b ?? \"\");\n\n// Utility function to transform data source for tables\n// This maps over the data and transforms it to have keys and all the item properties.\nconst transformDataSource = (data) =>\n data.map((item, index) => ({\n key: `${index + 1}`,\n ...item,\n }));\n\n// Utility function to generate column definitions based on type and need status\n// This will return the appropriate columns based on whether it's a professional or generic skill and if it's a needed skill.\nconst getColumnDefinitions = (isResponsive, func) => {\n const tempColum = [\n createCenteredTextColumn(\"Full Name\", \"fullName\", sortByText),\n createCenteredTextColumn(\"Email\", \"email\", sortByText, isResponsive),\n createCenteredTextColumn(\n \"Position as Entered\",\n \"position\",\n sortByText,\n isResponsive\n ),\n {\n title: createCenteredTextColumnHeader(\"Profile Status\"),\n dataIndex: \"profileStatus\",\n key: \"profileStatus\",\n sorter: (a, b) => sortByText(a.profileStatus, b.profileStatus),\n render: (text, record) => (\n \n {record.profileType} \n
\n ),\n },\n createCenteredTextColumn(\"Capability\", \"capability\", sortByText),\n {\n title: createCenteredTextColumnHeader(\"Skill Level\"),\n dataIndex: \"skillLevel\",\n key: \"skillLevel\",\n sorter: (a, b) => sortByText(a.skillCode, b.skillCode),\n render: (text, record) => (\n \n \n \n {record.skillCode} {record.level}\n \n \n
\n ),\n },\n {\n title: createCenteredTextColumnHeader(\"Country & Location\"),\n dataIndex: \"countryLocation\",\n key: \"countryLocation\",\n sorter: (a, b) =>\n sortByText(\n `${a.country} - ${a.location}`,\n `${b.country} - ${b.location}`\n ),\n render: (text, record) => (\n \n \n {record.country} - {record.location}\n \n
\n ),\n },\n {\n title: createCenteredTextColumnHeader(\"Attributes\"),\n dataIndex: \"attributes\",\n key: \"attributes\",\n render: (text, record) => (\n \n {record.attributes.length > 0 ? (\n \n func(record)} type=\"dashed\" shape=\"circle\">\n \n \n ) : (\n \n No Attributes\n \n )}\n
\n ),\n },\n ];\n return tempColum;\n};\n\nconst TeamBuilderTable = ({\n data = [],\n pageSize = constantData.pageSize,\n isResponsive = false,\n}) => {\n const [expendedRowKeysRef, setExpendedRowKeysRef] = useState([]);\n // This function determines if a row is expandable based on the 'isSkill' attribute.\n const onRowExpandable = (record) => {\n // Directly return the boolean value of 'levels' attribute of the record.\n // If the attribute isn't present, it defaults to false.\n return record.attributes.length > 0;\n };\n\n const onExpandedRowRendered = (record) => {\n // Return the formatted table contained within a styled wrapper.\n return (\n \n \n \n Attributes:\n \n \n {item} \n ))}\n \n \n \n );\n };\n\n const onExpandedClicked = (record) => {\n if (expendedRowKeysRef.some((item) => item === record.key)) {\n setExpendedRowKeysRef([]);\n } else {\n setExpendedRowKeysRef([record.key]);\n }\n };\n\n // Memoized calculation for professional table data\n const dataSource = useMemo(() => {\n // If not showing professional or no data, return empty data.\n if (data?.length === 0) return [];\n\n // Return the transformed data source and the appropriate columns\n return transformDataSource(data);\n }, [data]);\n\n // Memoized calculation for professional table data\n const columns = useMemo(() => {\n // If not showing professional or no data, return empty data.\n if (data?.length === 0) return [];\n\n // Return the transformed data source and the appropriate columns\n return getColumnDefinitions(isResponsive, onExpandedClicked);\n }, [data]);\n\n useEffect(() => setExpendedRowKeysRef([]), [data]);\n\n return (\n \n {dataSource.length > 0 ? (\n // Render the professional table\n <>\n Professional Skills \n \n \n \n ) : (\n \n );\n};\n\nexport default TeamBuilderTable;\n","import CategoryService from \"../../../../common/api/service/CategoryService\";\nimport PersonService from \"../../../../common/api/service/PersonService\";\nimport ProfileService from \"../../../../common/api/service/ProfileService\";\nimport OrganizationalChart from \"../../components/charts/organizational\";\nimport TeamBuilderFilters from \"../../components/filters/teambuilder\";\nimport TeamBuilderTable from \"../../components/table/teambuilder\";\nimport { groupBy } from \"lodash\";\nimport React, { useEffect, useState, useMemo } from \"react\";\nimport { Spinner } from \"reactstrap\";\nimport styled from \"styled-components\";\n\nconst Container = styled.div`\n padding: 10px 30px;\n justify-content: center;\n align-items: center;\n width: 100%;\n`;\n\nconst DivCenter = ({ Component }) => {\n return (\n \n \n );\n};\n\nconst ContainerBorder = styled.div`\n padding: 10px;\n border-width: 1px;\n border-style: solid;\n border-color: #dddddd;\n border-radius: 14px;\n`;\n\n// Constant Data\nconst constantData = {\n noAttribute: \"(No Attribute)\",\n empty: \"\",\n pageSize: 5,\n fullName: \"fullName\",\n level: \"level\",\n location: \"location\",\n skillCode: \"skillCode\",\n country: \"country\",\n profileStatus: \"profileStatus\",\n endorsed: \"Endorsed\",\n capability: \"capability\",\n competency: \"Competency\",\n proficiency: \"Proficiency\",\n knowledge: \"Knowledge\",\n characters: {\n n: \"N\",\n m: \"M\",\n p: \"P\",\n },\n};\n\n// Returns a new array containing only the unique elements from the provided `dataArray` based on a custom comparison function.\nconst distinctArray = (dataArray, func) => {\n // `seen` will store a unique \"hash\" for each item we've already encountered.\n const seen = new Set();\n\n // The array to accumulate unique items from `dataArray`.\n const uniqueArray = [];\n\n dataArray.forEach((item) => {\n // Create a unique \"hash\" for the current item based on the comparator function.\n // This \"hash\" is simply a string representation of all items considered equal to the current item.\n const hash = uniqueArray.some((itemIn) => func(item, itemIn));\n\n // If we haven't seen this unique \"hash\" before, add the item to our unique array.\n if (!hash) {\n seen.add(hash);\n uniqueArray.push(item);\n }\n });\n\n return uniqueArray;\n};\n\nconst TeamBuilder = () => {\n // data\n const [isContentLoaded, setIsContentLoaded] = useState(false);\n const [data, setData] = useState([]);\n\n // Selection\n const [selectedAttribute, setSelectedAttribute] = useState([]);\n const [selectedSkill, setSelectedSkill] = useState([]);\n const [selectedPosition, setSelectedPosition] = useState([]);\n const [selectedProfileStatus, setSelectedProfileStatus] = useState([]);\n const [selectedCountry, setSelectedCountry] = useState([]);\n const [selectedSkillLevel, setSelectedSkillLevel] = useState([]);\n\n /**\n * Fetch data from services.\n */\n const fetchData = async () => {\n const services = [\n CategoryService.getCategories(true),\n PersonService.getPersonMyPeoples(),\n PersonService.getPersonMyProfile(),\n ProfileService.getMyProfileVersions(),\n ProfileService.getMySkillPofiles(null, null, \"Self Assessed\"),\n ProfileService.getMySkillPofiles(null, null, \"Endorsed\"),\n ];\n\n return await Promise.all(services);\n };\n\n /**\n * Flatten categories to get skills.\n */\n const flattenDataCategories = (dataCategories) => {\n return dataCategories\n .flatMap((item) => item.subCategories)\n .flatMap((item) => item.skills);\n };\n\n /**\n * Get capability based on string value.\n */\n const getCapability = (stringVal) => {\n switch (stringVal) {\n case constantData.characters.m:\n return constantData.competency;\n case constantData.characters.p:\n return constantData.proficiency;\n default:\n return constantData.knowledge;\n }\n };\n\n // Derive sub-category details for a given value\n const getSubCategory = (value, dataCategories) => {\n // Logic to extract and return sub-category details\n let findCategory = dataCategories?.find(\n (item) => item.name === value?.category\n );\n if (!findCategory) {\n findCategory = {\n colour: constantData.empty,\n description: constantData.empty,\n };\n }\n let findSubCategory = findCategory?.subCategories?.find(\n (item) => item.name === value?.subCategory\n );\n if (!findSubCategory) {\n findSubCategory = {\n colour: constantData.empty,\n description: constantData.empty,\n };\n }\n return {\n skillColour: findSubCategory?.skillColour,\n colour: findSubCategory?.colour,\n description: findSubCategory?.description,\n };\n };\n\n // Map a single skill with its associated metadata\n const mapSkillWithDetails = (itemSkill, item, approver) => {\n // Logic to transform the given skill with additional details\n return {\n ...itemSkill,\n country: item.personB.country,\n location: item.personB.location,\n fullName: item.personB.firstName + \" \" + item.personB.lastName,\n position: item.personB.position,\n email: item.personB.email,\n ...approver,\n profileStatus: approver ? `${itemSkill.profileType} - Approved` : `${itemSkill.profileType} - Not Approved`,\n isApproved: approver ? true : false,\n approvedText: approver ? \"Approved\" : \"Not Approved\",\n capability: getCapability(itemSkill.stringVal),\n };\n };\n\n // Function to derive skill data from an item, its versions, and an approver\n const getDataSkill = async (item, versions, approver) => {\n let baseSkills = [];\n\n if (item.skillProfile) {\n baseSkills.push(...item.skillProfile);\n } else {\n if (versions.length > 0){\n if (versions.filter(it => it.profileType == \"Self Assessed\").length > 0){\n const selfAssessedSkills = await ProfileService.getManagedPeopleSkillPofiles(\n item.personB.email,\n versions.filter(it => it.profileType == \"Self Assessed\")[0].sfiaVersion,\n versions.filter(it => it.profileType == \"Self Assessed\")[0].version,\n versions.filter(it => it.profileType == \"Self Assessed\")[0].profileType\n )\n\n if (selfAssessedSkills.length > 0){\n baseSkills.push(...selfAssessedSkills);\n }\n }\n\n if (versions.filter(it => it.profileType == \"Endorsed\").length > 0){\n const endorsedSkills = await ProfileService.getManagedPeopleSkillPofiles(\n item.personB.email,\n versions.filter(it => it.profileType == \"Endorsed\")[0].sfiaVersion,\n versions.filter(it => it.profileType == \"Endorsed\")[0].version,\n versions.filter(it => it.profileType == \"Endorsed\")[0].profileType\n )\n\n if (endorsedSkills.length > 0){\n baseSkills.push(...endorsedSkills);\n }\n }\n }\n }\n\n const result = baseSkills\n .map((itemSkill) => mapSkillWithDetails(itemSkill, item, approver))\n .filter((itemSkill) => itemSkill.stringVal !== constantData.characters.n)\n\n return result;\n };\n\n // Helper function to process individual datasets\n const processItem = async (item) => {\n // Fetch versions if not present in the item\n const versions = item.versions\n ? item.versions\n : await ProfileService.getManagedPeopleProfileVersions(\n item.personB.email\n );\n\n // Find the earliest account creation and its approvals\n const earliestAccount = item.personB.accounts.sort(\n (a, b) => new Date(a.createdOn) - new Date(b.createdOn)\n )[0];\n const approvals = earliestAccount.approvals.sort(\n (a, b) => new Date(a.approvedOn) - new Date(b.approvedOn)\n );\n const approver = approvals.length > 0 ? approvals[0] : null;\n\n // Compute the skill data based on various conditions and associated metadata\n const dataSkill = await getDataSkill(item, versions, approver);\n return {\n personId: item.personB.id,\n dataSkill,\n accountAttributes: earliestAccount ? earliestAccount.attributes .map((attr) => attr.skillAttributeId) : [],\n getAttributes: dataSkill.map((item) => item.skillCode),\n };\n };\n\n /**\n * Main function to process all data.\n */\n const processAllData = async () => {\n try {\n // Fetch all required initial datasets\n let dataSkill = [];\n const [dataCategories, dataPeoples, dataProfile, dataVersion, selfAssessedDataSkill, endorsedDataSkill] =\n await fetchData();\n\n if (selfAssessedDataSkill && selfAssessedDataSkill.length > 0){\n dataSkill.push(...selfAssessedDataSkill);\n }\n\n if (endorsedDataSkill && endorsedDataSkill.length > 0){\n dataSkill.push(...endorsedDataSkill);\n }\n\n // Convert nested dataCategories into a flat structure\n const flatDataCategories = flattenDataCategories(dataCategories);\n\n // Create a combined dataset to facilitate further processing\n const initialData = [\n ...dataPeoples,\n {\n personB: dataProfile,\n versions: dataVersion,\n skillProfile: dataSkill,\n },\n ];\n\n // Process each individual dataset to structure them uniformly\n const peoplesData = await Promise.all(\n initialData.map(async (item) => processItem(item))\n );\n\n // Create a set of unique attributes\n const attributesSet = new Set(\n peoplesData.flatMap((item) => item.getAttributes)\n );\n\n // Filter to get matching attributes\n const allAttribute = flatDataCategories.filter((item) =>\n attributesSet.has(item.skillsCode)\n );\n\n // Map over datasets, enriching them with associated sub-category details and attributes\n const processedData = peoplesData\n .map((item) => item.dataSkill)\n .flat(2)\n .map((item) => {\n const accountAttributes = peoplesData.find(it => it.personId == item.personId).accountAttributes;\n const attributes = allAttribute.find((attr) => attr.skillsCode == item.skillCode)?.attributes?.filter(attr => accountAttributes && accountAttributes.includes(attr.id)).map((attr) => attr.attribute) || [];\n \n return {\n ...item,\n subCategoryDetail: getSubCategory(item, dataCategories),\n attributes: [...attributes]\n }\n })\n ;\n\n //Set the resulting data for further usage (for instance, updating the component's state)\n setData(processedData);\n } catch (error) {\n // Handle exceptions and log them for debugging purposes\n console.error(\"Failed to fetch and process data:\", error);\n }\n };\n\n /**\n * Main function to generate the tree select based on input value.\n */\n const generateTreeSelect = (val, name) =>\n // Using Object.entries to get both key and value of each entry in the data object\n Object.entries(val)\n .map(([category, itemsArray], categoryIdx) => {\n // Generating a Set to deduplicate the values based on the 'name' property\n // Then spread the Set back into an array for easy mapping\n const uniqueValues = [...new Set(itemsArray.map((item) => item[name]))];\n const rootData = JSON.stringify({\n isRoot: true,\n value: category,\n });\n return {\n title: category,\n value: rootData,\n key: rootData,\n\n // For each unique value, we map it to generate the 'children' array\n children: uniqueValues\n .map((uniqueValue, valueIdx) => {\n const childData = JSON.stringify({\n isRoot: false,\n value: uniqueValue,\n });\n return {\n // Fetching the 'text' property directly from the original itemsArray for each child\n title: itemsArray[valueIdx].text,\n value: childData,\n key: childData,\n };\n })\n .sort((a, b) => a.title.localeCompare(b.title)),\n };\n })\n .sort((a, b) => a.title.localeCompare(b.title));\n\n /**\n * Main function to generate the tree node based on input value.\n */\n const generateTreeNode = (val) => {\n /**\n * Helper function to create a new tree node.\n */\n const createNode = (label, isPerson = false) => ({\n label,\n isRoot: false, // By default, a node is not a root node\n isExpand: false, // By default, a node is not expanded\n meta: {\n isPerson,\n },\n children: [],\n });\n // Create the root node with pre-defined properties\n const rootNode = {\n label: \"Persons\",\n isRoot: true,\n isExpand: true,\n meta: {\n isPerson: false,\n },\n // Map over each item in the input array to construct the children nodes for the root\n children: val.map((item) => {\n // Use the helper function to create a new node for the item\n const node = createNode(item.label, true); // Set isPerson to true for the item node\n // Map over each child of the item to construct its children nodes\n node.children = item.children.map((childItem) =>\n createNode(childItem.skillCode)\n );\n return node; // Return the constructed node for the item\n }),\n };\n\n return rootNode;\n };\n\n // Filter Attribute\n const optionsAttribute = useMemo(() => {\n // If there's no data, return an empty array immediately.\n if (data.length === 0) return [];\n const attributesSet = new Set(data.flatMap((item) => item.attributes));\n attributesSet.add(constantData.noAttribute);\n // Filter out non-distinct items based on their 'attributes' field.\n // This uses the distinctArray function, which presumably removes duplicates based on a comparator.\n return (\n Array.from(attributesSet)\n .map((item) => ({\n // Convert each item into a label-value pair for use in a dropdown or similar UI element.\n label: item,\n value: item,\n }))\n // Sort the options alphabetically based on the label.\n .sort((a, b) => a.label.localeCompare(b.label))\n );\n }, [data]); // Recompute only when 'data' changes.\n\n // Filter Skill Name\n const optionsSkill = useMemo(() => {\n // If there's no data, return an empty array immediately.\n if (data.length === 0) return [];\n\n // Filter out non-distinct items based on their 'skill' field.\n // This uses the distinctArray function, which presumably removes duplicates based on a comparator.\n return (\n distinctArray(data, (itemA, itemB) => itemA.skill === itemB.skill)\n .map(({ skill, skillCode }) => ({\n label: `${skill} (${skillCode})`,\n value: skill,\n }))\n // Sort the options alphabetically based on the label.\n .sort((a, b) => a.label.localeCompare(b.label))\n );\n }, [data]); // Recompute only when 'data' changes.\n\n // Filter Position\n const optionsPosition = useMemo(() => {\n // If there's no data, return an empty array immediately.\n if (data.length === 0) return [];\n\n // Filter out non-distinct items based on their 'position' field.\n // This uses the distinctArray function, which presumably removes duplicates based on a comparator.\n return (\n distinctArray(data, (itemA, itemB) => itemA.position === itemB.position)\n .map(({ position }) => ({\n label: position,\n value: position,\n }))\n // Sort the options alphabetically based on the label.\n .sort((a, b) => a.label.localeCompare(b.label))\n );\n }, [data]); // Recompute only when 'data' changes.\n\n // Filter Profile Status\n const optionsProfileStatus = useMemo(() => {\n if (data.length === 0) return [];\n\n const temp = data.map((item) => ({\n capability: `${item.profileType} - ${item.capability} (${item.approvedText})`, \n profileType: item.profileType,\n profileStatus: item.profileStatus,\n text: `${item.profileType} - ${item.capability} (${item.approvedText})`,\n }));\n\n // Deduplicate the combined array based on the capability.\n const uniqueArray = distinctArray(\n temp,\n (itemA, itemB) => itemA.capability === itemB.capability\n );\n\n // Generate the tree select structure.\n return generateTreeSelect(\n groupBy(uniqueArray, constantData.profileStatus),\n constantData.capability\n );\n }, [data]);\n\n // Filter Country Location\n const optionsCountry = useMemo(() => {\n // Exit early if there's no data to process.\n if (data.length === 0) return [];\n\n // Transform\n const tempData = data.map((item) => ({\n location: `${item.country} - ${item.location}`,\n country: item.country,\n text: `${item.country} - ${item.location}`,\n }));\n\n // Deduplicate the combined array based on the skillCode.\n const uniqueSkills = distinctArray(\n tempData,\n (itemA, itemB) => itemA.country === itemB.country\n );\n\n // Generate the tree select structure.\n return generateTreeSelect(\n groupBy(uniqueSkills, constantData.country),\n constantData.location\n );\n }, [data]);\n\n // Filter Level of Skill\n const optionsSkillLevel = useMemo(() => {\n // Exit early if there's no data to process.\n if (data.length === 0) return [];\n\n // Transform\n const tempData = data.map((item) => ({\n skillCode: `${item.skillCode} - ${item.level}`,\n level: `Level ${item.level}`,\n text: `${item.skillCode} - ${item.level}`,\n }));\n\n // Deduplicate the combined array based on the skillCode.\n const uniqueSkills = distinctArray(\n tempData,\n (itemA, itemB) => itemA.skillCode === itemB.skillCode\n );\n\n // Generate the tree select structure.\n return generateTreeSelect(\n groupBy(uniqueSkills, constantData.level),\n constantData.skillCode\n );\n }, [data]);\n\n // Data Filter => Ref By Data\n const dataFilter = useMemo(() => {\n let resultData = [];\n\n if (data.length) {\n resultData = data.filter((item) => {\n // If selectedAttribute is populated and the condition is not met, filter out\n if (\n selectedAttribute.length > 0 &&\n !selectedAttribute.some((attr) => {\n if (attr === constantData.noAttribute) {\n return item.attributes.length === 0;\n }\n return item.attributes.includes(attr);\n })\n ) {\n return false;\n }\n\n // If selectedPosition is populated and the condition is not met, filter out\n if (\n selectedPosition.length > 0 &&\n !selectedPosition.includes(item.position)\n ) {\n return false;\n }\n\n // If selectedSkill is populated and the condition is not met, filter out\n if (selectedSkill.length > 0 && !selectedSkill.includes(item.skill)) {\n return false;\n }\n\n // If selectedProfileStatus is populated and the condition is not met, filter out\n if (selectedProfileStatus.length > 0) {\n const isFound = selectedProfileStatus\n .map((_) => JSON.parse(_))\n .some((_) => {\n if (_.isRoot) {\n return item.profileStatus === _.value;\n } else {\n return `${item.profileType} - ${item.capability} (${item.approvedText})` === _.value;\n }\n });\n if (!isFound) {\n return false;\n }\n }\n\n // If selectedCountry is populated and the condition is not met, filter out\n if (selectedCountry.length > 0) {\n const isFound = selectedCountry\n .map((_) => JSON.parse(_))\n .some((_) => {\n if (_.isRoot) {\n return item.country === _.value;\n } else {\n return `${item.country} - ${item.location}` === _.value;\n }\n });\n if (!isFound) {\n return false;\n }\n }\n\n // If selectedSkillLevel is populated and the condition is not met, filter out\n if (selectedSkillLevel.length > 0) {\n const isFound = selectedSkillLevel\n .map((_) => JSON.parse(_))\n .some((_) => {\n if (_.isRoot) {\n return `Level ${item.level}` === _.value;\n } else {\n return `${item.skillCode} - ${item.level}` === _.value;\n }\n });\n if (!isFound) {\n return false;\n }\n }\n\n // If all conditions are met or not applicable, include the item\n return true;\n });\n }\n\n return resultData;\n }, [\n data,\n selectedSkillLevel,\n selectedCountry,\n selectedProfileStatus,\n selectedSkill,\n selectedPosition,\n selectedAttribute,\n ]);\n\n const dashboardTable = useMemo(() => dataFilter ?? [], [dataFilter]); // Recompute only if dataFilter changes\n\n const dashboardOrganizationalChart = useMemo(() => {\n // Early return if dataFilter is empty\n if (dataFilter.length === 0) return null;\n\n // Group the data based on fullName\n const dataGroup = groupBy(dataFilter, constantData.fullName);\n\n // Construct the tempData array using the grouped data\n const tempData = Object.keys(dataGroup).map((key) => ({\n label: key,\n children: distinctArray(\n dataGroup[key],\n (a, b) => a.skillCode === b.skillCode\n ),\n }));\n\n // Generate and return the tree node using the constructed tempData\n return generateTreeNode(tempData);\n }, [dataFilter]); // Recompute only if dataFilter changes\n\n // This effect runs when the component mounts.\n useEffect(() => {\n // This variable helps us ensure that we don't call `setIsContentLoaded` if the component has unmounted before our asynchronous operation completes.\n let isMounted = true;\n\n // Fetch and process all data\n processAllData().then(() => {\n if (isMounted) {\n // Only set the loading state to false if the component is still mounted\n setIsContentLoaded(true);\n }\n });\n\n // The cleanup function for the effect\n return () => {\n // If the component unmounts, we set isMounted to false to prevent any state updates after unmounting.\n isMounted = false;\n };\n }, []); // Empty dependency array means this effect runs once when the component mounts and never again.\n\n // If content is still loading, display a spinner.\n if (!isContentLoaded) {\n return \n {/* Filter */}\n \n {/* Organizational Chart */}\n \n \n \n {/* TeamBuilder Table */}\n \n \n \n \n );\n};\n\nexport { TeamBuilder };\n","import ErrorHandler from \"./../errorResponseHandler\";\nimport Instance from \"./AxiosInstance\";\n\nexport const axios = Instance.apiInstance();\n\nclass TeamAnalyticsService {\n static getSkillWeHave() {\n return axios\n .get(`datavisualization/skillwehave`)\n .then(res => {\n const response = res.data;\n return response;\n })\n .catch(err => {\n throw ErrorHandler(err);\n });\n }\n static getSkillWeHaveGa() {\n return axios\n .get(`dataVisualization/skillwehavega`)\n .then(res => {\n const response = res.data;\n return response;\n })\n .catch(err => {\n throw ErrorHandler(err);\n });\n }\n static getSkillWeNeed() {\n return axios\n .get(`dataVisualization/skillweneed`)\n .then(res => {\n const response = res.data;\n return response;\n })\n .catch(err => {\n throw ErrorHandler(err);\n });\n }\n\n static getActionPlan() {\n return axios\n .get(`dataVisualization/action`)\n .then(res => {\n const response = res.data;\n return response;\n })\n .catch(err => {\n throw ErrorHandler(err);\n });\n }\n static getBuilders() {\n return axios\n .get(`dataVisualization/builders`)\n .then(res => {\n const response = res.data;\n return response;\n })\n .catch(err => {\n throw ErrorHandler(err);\n });\n }\n static getSkillGaps() {\n return axios\n .get(`dataVisualization/skillgap`)\n .then(res => {\n const response = res.data;\n return response;\n })\n .catch(err => {\n throw ErrorHandler(err);\n });\n }\n}\n\nexport default TeamAnalyticsService;\n","import CustomSelect from \"../global/customselect\";\nimport {\n FilterTwoTone,\n FilterFilled,\n CloseCircleOutlined,\n} from \"@ant-design/icons\";\nimport { Row, Col, Button, Tag } from \"antd\";\nimport React, { useMemo, useState, useCallback } from \"react\";\nimport styled from \"styled-components\";\n\nconst WrapperFilter = styled.div`\n .anticon {\n vertical-align: 0.125em;\n }\n .card-c {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n padding: 35px;\n\n border: 1px solid rgba(255, 255, 255, 0.25);\n border-radius: 20px;\n background-color: rgba(255, 255, 255, 0.45);\n box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);\n\n backdrop-filter: blur(15px);\n }\n\n .slide {\n transition: all 0.5s ease-in-out;\n transform-origin: left top;\n animation: slide 0.5s;\n @keyframes slide {\n 0% {\n transform: scaleY(0);\n }\n 100% {\n transform: scaleY(1);\n }\n }\n }\n\n .mt-20 {\n margin-top: 20px;\n }\n .mt-10 {\n margin-top: 10px;\n }\n .mr-10 {\n margin-right: 10px;\n }\n .font-small {\n font-size: 13px;\n }\n\n .ml-5-c {\n margin-left: 5px;\n }\n .mb-10 {\n margin-bottom: 5px;\n }\n\n .rotate-90 {\n transform: rotate(90deg);\n transition: transform 0.5s;\n }\n .rotate-0 {\n transform: rotate(0deg);\n transition: transform 0.5s;\n }\n\n @media (max-width: 1280px) {\n .col-sm-cm-m {\n max-width: 100% !important;\n flex: 0 0 100%;\n }\n .sm-mt-10 {\n margin-top: 10px;\n }\n }\n`;\n\n// Helper function to render tags based on the object and its color.\nconst renderTags = (obj, color, onCloseClicked, isTree = false) => {\n return obj?.value?.map((item, index) => (\n \n {/* Check if item is a string or needs to be parsed */}\n {isTree ? JSON.parse(item).value : item} \n onCloseClicked(obj, item)}\n style={{ color: \"darkred\" }}\n />\n \n ));\n};\n\nconst renderFilter = (Component, isExpand) => (\n \n \n {/* Rest of the JSX structure where you'll use your button */}\n setIsExpand((state) => !state)}\n >\n Filter\n \n \n {/* Rest of the JSX structure where you'll use your renderTags */}\n \n {/* Render tags for each filter type */}\n {renderTags(objName, \"magenta\", onCloseClicked)}\n {renderTags(objSkillCode, \"red\", onCloseClicked)}\n {renderTags(objActions, \"geekblue\", onCloseClicked)}\n \n \n \n {/* Rest of the JSX structure where you'll use your FilterComponent */}\n \n \n );\n};\n\nexport default ActionPlanFilters;\n","import {\n CheckCircleOutlined,\n ClockCircleOutlined,\n MinusCircleOutlined,\n SyncOutlined,\n} from \"@ant-design/icons\";\nimport { Table, Tag, Tooltip, Typography, Empty } from \"antd\";\nimport React, { useMemo } from \"react\";\nimport styled from \"styled-components\";\n\nconst constantData = {\n titleLevel: 5,\n pageSize: 10,\n colors: {\n type1: \"#69849c\",\n type2: \"#a5b8c8\",\n },\n};\n\nconst DivCenter = ({ Component, title }) => {\n return (\n \n \n
{title} \n \n {text ?? \"-\"}\n \n ), // Centering the text\n});\n\n// Utility function to compare text values\nconst sortByText = (a, b) => (a ?? \"\").localeCompare(b ?? \"\");\n\n// Utility function to transform data source for tables\n// This maps over the data and transforms it to have keys and all the item properties.\nconst transformDataSource = (data) =>\n data.map((item, index) => ({\n key: `${index + 1}`,\n ...item,\n }));\n\n// Utility function to generate column definitions based on type and need status\n// This will return the appropriate columns based on whether it's a professional or generic skill and if it's a needed skill.\nconst getColumnDefinitions = (isResponsive) => {\n const getColorByActionStatus = (record) => {\n switch (record.actionStatus.toLowerCase()) {\n case \"to do\":\n return \"default\";\n case \"in progress\":\n return \"processing\";\n case \"pending\":\n return \"warning\";\n case \"done\":\n return \"success\";\n default:\n return \"default\";\n }\n };\n const getIconByActionStatus = (record) => {\n switch (record.actionStatus.toLowerCase()) {\n case \"to do\":\n return \n \n {text} \n \n
\n ),\n },\n createCenteredTextColumn(\"Action Type\", \"actionType\", sortByText),\n {\n title: \"Action Status\",\n dataIndex: \"actionStatus\",\n key: \"actionStatus\",\n sorter: (a, b) => sortByText(a.status, b.status),\n render: (text, record) => (\n \n \n {text}\n \n
\n ),\n },\n ];\n return tempColum;\n};\n\nconst ActionPlanTable = ({\n data = [],\n pageSize = constantData.pageSize,\n isResponsive = false,\n}) => {\n // Memoized calculation for professional table data\n const dataSource = useMemo(() => {\n // If not showing professional or no data, return empty data.\n if (data?.length === 0) return [];\n\n // Return the transformed data source and the appropriate columns\n return transformDataSource(data);\n }, [data]);\n\n // Memoized calculation for professional table data\n const columns = useMemo(() => {\n // If not showing professional or no data, return empty data.\n if (data?.length === 0) return [];\n\n // Return the transformed data source and the appropriate columns\n return getColumnDefinitions(isResponsive);\n }, [data]);\n\n return (\n \n {dataSource.length > 0 ? (\n // Render the professional table\n <>\n Professional Skills \n \n \n \n ) : (\n \n );\n};\n\nexport default ActionPlanTable;\n","import TeamAnalyticsService from \"../../../../common/api/service/TeamAnalyticsService\";\nimport PieChart from \"../../components/charts/pie\";\nimport ActionPlanFilters from \"../../components/filters/actionplan\";\nimport ActionPlanTable from \"../../components/table/actionplan\";\nimport { Col, Row, DatePicker, Typography } from \"antd\";\nimport { groupBy } from \"lodash\";\nimport moment from \"moment\";\nimport React, { useState, useEffect, useMemo } from \"react\";\nimport { Spinner } from \"reactstrap\";\nimport styled from \"styled-components\";\nimport { useImmer } from \"use-immer\";\n\nconst { RangePicker } = DatePicker;\n\nconst { Title } = Typography;\n\nconst Container = styled.div`\n padding: 10px 30px;\n justify-content: center;\n align-items: center;\n width: 100%;\n`;\n\nconst ContainerBorder = styled.div`\n padding: 10px;\n border-width: 1px;\n border-style: solid;\n border-color: #dddddd;\n border-radius: 14px;\n`;\n\nconst ContainerBar = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n padding: 35px;\n margin-top: 30px;\n margin-bottom: 30px;\n border: 1px solid rgba(255, 255, 255, 0.25);\n border-radius: 20px;\n background-color: rgba(255, 255, 255, 0.45);\n box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);\n\n backdrop-filter: blur(15px);\n\n .pl-10 {\n padding-left: 10px;\n }\n .pr-10 {\n padding-right: 10px;\n }\n\n .mt-30 {\n margin-top: 20px;\n }\n\n .mb-30 {\n margin-bottom: 40px;\n }\n`;\n\nconst DivCenter = ({ Component }) => {\n return (\n \n \n );\n};\n\n/**\n * A styled column component to reduce the repetition of classes and props.\n * This component encapsulates the common style properties of columns.\n */\nconst ColumnWithStyle = ({ children, span }) => (\n \n {/* Action filters */}\n \n {/* Date picker section */}\n \n Choose Target Completion Date \n \n setSelectedTargetCompletionDate(val ?? [])}\n />\n \n
\n\n {/* Pie charts displaying various data */}\n \n \n \n \n \n \n \n
\n \n\n {/* Actions table */}\n \n \n \n \n );\n};\n\nexport { ActionPlan };\n","import CustomSelect from \"../global/customselect\";\nimport {\n FilterTwoTone,\n FilterFilled,\n CloseCircleOutlined,\n} from \"@ant-design/icons\";\nimport { Row, Col, Button, Tag } from \"antd\";\nimport React, { useMemo, useState, useCallback } from \"react\";\nimport styled from \"styled-components\";\n\nconst WrapperFilter = styled.div`\n .anticon {\n vertical-align: 0.125em;\n }\n .card-c {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n padding: 35px;\n\n border: 1px solid rgba(255, 255, 255, 0.25);\n border-radius: 20px;\n background-color: rgba(255, 255, 255, 0.45);\n box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);\n\n backdrop-filter: blur(15px);\n }\n\n .slide {\n transition: all 0.5s ease-in-out;\n transform-origin: left top;\n animation: slide 0.5s;\n @keyframes slide {\n 0% {\n transform: scaleY(0);\n }\n 100% {\n transform: scaleY(1);\n }\n }\n }\n\n .mt-20 {\n margin-top: 20px;\n }\n .mt-10 {\n margin-top: 10px;\n }\n .mr-10 {\n margin-right: 10px;\n }\n .font-small {\n font-size: 13px;\n }\n\n .ml-5-c {\n margin-left: 5px;\n }\n .mb-10 {\n margin-bottom: 5px;\n }\n\n .rotate-90 {\n transform: rotate(90deg);\n transition: transform 0.5s;\n }\n .rotate-0 {\n transform: rotate(0deg);\n transition: transform 0.5s;\n }\n\n @media (max-width: 1280px) {\n .col-sm-cm-m {\n max-width: 100% !important;\n flex: 0 0 100%;\n }\n .sm-mt-10 {\n margin-top: 10px;\n }\n }\n`;\n// Helper function to render tags based on the object and its color.\nconst renderTags = (obj, color, onCloseClicked, isTree = false) => {\n return obj?.value?.map((item, index) => (\n \n {/* Check if item is a string or needs to be parsed */}\n {isTree ? JSON.parse(item).value : item} \n onCloseClicked(obj, item)}\n style={{ color: \"darkred\" }}\n />\n \n ));\n};\n\nconst renderFilter = (Component, isExpand) => (\n \n \n {/* Rest of the JSX structure where you'll use your button */}\n setIsExpand((state) => !state)}\n >\n Filter\n \n \n {/* Rest of the JSX structure where you'll use your renderTags */}\n \n {/* Render tags for each filter type */}\n {renderTags(objName, \"magenta\", onCloseClicked)}\n {renderTags(objRequirement, \"red\", onCloseClicked)}\n \n \n \n {/* Rest of the JSX structure where you'll use your FilterComponent */}\n \n \n );\n};\n\nexport default JobMatchFilters;\n","import { Row, Col, InputNumber, Slider, Typography } from \"antd\";\nimport React from \"react\";\nimport styled from \"styled-components\";\n\nconst { Title } = Typography;\n\nconst ContainerFilter = styled.div`\n margin: 10px;\n margin-bottom: 40px;\n\n .w-100 {\n width: 100% !important;\n }\n\n .w-75 {\n width: 75% !important;\n }\n .ant-input-number-input-wrap > input {\n text-align: center;\n }\n`;\n\nconst WrapperCard = styled.div`\n display: inline-block;\n justify-content: space-between;\n\n padding: 35px;\n\n border: 1px solid rgba(255, 255, 255, 0.25);\n border-radius: 20px;\n background-color: rgba(255, 255, 255, 0.45);\n box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);\n\n backdrop-filter: blur(15px);\n`;\n\nconst WrapperHeader = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n padding: 35px;\n`;\n\n// Constant Data\nconst constantData = {\n min: 0,\n max: 100,\n sliderDefaultValue: [0, 100],\n};\n\n// Reusable Slider Component\n// This component handles rendering and functionality for the Slider and associated input fields\nconst RangeSlider = ({ title, obj, constantData }) => {\n return (\n \n {title} {/* Display the title */}\n \n {/* Slider Component */}\n \n obj?.setValue((item) => {\n item.min = val[0];\n item.max = val[1];\n })\n }\n />\n {/* Input Fields for Min and Max */}\n
\n \n );\n};\n\n// Reusable Input Component\n// This component handles rendering and functionality for the Min and Max input fields\nconst InputRange = ({ obj, constantData }) => (\n \n \n obj?.setValue((item) => {\n item[\"min\"] = val;\n })\n }\n />\n \n - \n \n \n obj?.setValue((item) => {\n item[\"min\"] = val;\n })\n }\n />\n \n
\n);\n\n// Main Component\n// This component contains the overall layout and utilizes the reusable components\nconst MatchRangeFilters = ({\n objSelfAssessed,\n objEndorsed,\n objPerson,\n objRequirementMatch,\n}) => {\n return (\n \n {/* Row for Self-Assessed and Endorsed sliders */}\n \n
\n {/* Row for Number Of Person and Number Of Requirement Matches */}\n \n {/* Number Of Person */}\n \n Number Of Person \n {objPerson?.count ?? 0} \n \n \n {/* Number Of Requirement Matches */}\n \n Number Of Requirement Matches \n {objRequirementMatch?.count ?? 0} \n \n \n
\n \n );\n};\n\nexport default MatchRangeFilters;\n","import { Table, Typography, Empty, Tag, Row } from \"antd\";\nimport React, { useMemo } from \"react\";\nimport styled from \"styled-components\";\n\nconst constantData = {\n titleLevel: 5,\n pageSize: 10,\n colors: {\n type1: \"#69849c\",\n type2: \"#a5b8c8\",\n },\n rangeColors: [\n {\n color: \"green\",\n label: \"80 - 100\",\n isMatch: (val) => val >= 80,\n },\n {\n color: \"cyan\",\n label: \"60 - 79\",\n isMatch: (val) => val >= 60,\n },\n {\n color: \"gold\",\n label: \"40 - 59\",\n isMatch: (val) => val >= 40,\n },\n {\n color: \"orange\",\n label: \"20 - 39\",\n isMatch: (val) => val >= 20,\n },\n {\n color: \"volcano\",\n label: \"1 - 19\",\n isMatch: (val) => val >= 0,\n },\n {\n color: \"red\",\n label: \"0\",\n isMatch: (val) => val === 0,\n },\n ],\n};\n\nconst DivCenter = ({ Component, title }) => {\n return (\n \n \n
{title} \n {title} \n);\n\n// Helper function to generate a table column that centers its text content.\n// This avoids repetition for multiple columns that require similar formatting.\nconst createCenteredTextColumn = (\n title,\n dataIndex,\n sorterFunction,\n isResponsive = false,\n isCenter = true\n) => ({\n title: createCenteredTextColumnHeader(title), // Column header\n dataIndex, // Data key\n key: dataIndex, // Key for React's list rendering\n sorter: (a, b) => sorterFunction(a[dataIndex], b[dataIndex]), // Sorting function for the column\n render: (text) => (\n \n {text ?? \"-\"}\n \n ), // Centering the text\n});\n\nconst createCenteredNumberColumn = (\n title,\n dataIndex,\n sorterFunction,\n isResponsive = false,\n isCenter = true\n) => {\n const getColor = (val) =>\n constantData.rangeColors.find((item) => item.isMatch(val))?.color;\n\n return {\n title: createCenteredTextColumnHeader(title), // Column header\n dataIndex, // Data key\n key: dataIndex, // Key for React's list rendering\n sorter: (a, b) => sorterFunction(a[dataIndex], b[dataIndex]), // Sorting function for the column\n render: (text) => (\n \n {text}% \n \n ), // Centering the text\n };\n};\n\n// Utility function to compare text values\nconst sortByText = (a, b) => (a ?? \"\").localeCompare(b ?? \"\");\n// Utility function to compare number values\nconst sortByNumber = (a, b) => (a < b ? -1 : a > b ? 1 : 0);\n\n// Utility function to transform data source for tables\n// This maps over the data and transforms it to have keys and all the item properties.\nconst transformDataSource = (data) =>\n data.map((item, index) => ({\n key: `${index + 1}`,\n ...item,\n }));\n\n// Utility function to generate column definitions based on type and need status\n// This will return the appropriate columns based on whether it's a professional or generic skill and if it's a needed skill.\nconst getColumnDefinitions = (isResponsive) => {\n const tempColum = [\n createCenteredTextColumn(\n \"Full Name\",\n \"fullName\",\n sortByText,\n isResponsive,\n false\n ),\n createCenteredTextColumn(\"Email\", \"email\", sortByText, isResponsive, false),\n createCenteredTextColumn(\n \"Requirement Name\",\n \"jobTitle\",\n sortByText,\n isResponsive,\n false\n ),\n createCenteredTextColumn(\n \"Current Position as Entered\",\n \"position\",\n sortByText,\n isResponsive,\n false\n ),\n createCenteredNumberColumn(\n \"Match % (SA)\",\n \"matchPercentSelf\",\n sortByNumber\n ),\n createCenteredNumberColumn(\n \"Match % (Endorsed)\",\n \"matchPercentValidated\",\n sortByNumber\n ),\n ];\n return tempColum;\n};\n\nconst JobMatchTable = ({\n data = [],\n pageSize = constantData.pageSize,\n isResponsive = false,\n}) => {\n // Memoized calculation for professional table data\n const dataSource = useMemo(() => {\n // If not showing professional or no data, return empty data.\n if (data?.length === 0) return [];\n\n // Return the transformed data source and the appropriate columns\n return transformDataSource(data);\n }, [data]);\n\n // Memoized calculation for professional table data\n const columns = useMemo(() => {\n // If not showing professional or no data, return empty data.\n if (data?.length === 0) return [];\n\n // Return the transformed data source and the appropriate columns\n return getColumnDefinitions(isResponsive);\n }, [data]);\n\n return (\n \n {dataSource.length > 0 ? (\n // Render the professional table\n <>\n Match Range For Person \n \n \n {constantData.rangeColors.map((item, index) => {\n return (\n \n Range: \n \n {item.label}\n \n \n );\n })}\n
\n \n \n ) : (\n \n );\n};\n\nexport default JobMatchTable;\n","import JobAPI from \"../../../../common/api/service/JobService\";\nimport PersonAPI from \"../../../../common/api/service/PersonService\";\nimport JobMatchFilters from \"../../components/filters/jobmatch\";\nimport MatchRangeFilters from \"../../components/filters/jobmatch/matchrange\";\nimport JobMatchTable from \"../../components/table/jobmatch\";\nimport { groupBy } from \"lodash\";\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport { Spinner } from \"reactstrap\";\nimport styled from \"styled-components\";\nimport { useImmer } from \"use-immer\";\n\nconst DivCenter = ({ Component }) => {\n return (\n \n \n );\n};\n\nconst Container = styled.div`\n padding: 10px 30px;\n justify-content: center;\n align-items: center;\n width: 100%;\n`;\n\nconst ContainerBorder = styled.div`\n padding: 10px;\n margin-top: 30px;\n border-width: 1px;\n border-style: solid;\n border-color: #dddddd;\n border-radius: 14px;\n`;\n\n// Constant Data\nconst constantData = {\n fullName: \"fullName\",\n jobTitle: \"jobTitle\",\n pageSize: 10,\n};\n\nconst JobMatch = () => {\n // Data\n const [data, setData] = useState([]);\n const [isContentLoaded, setIsContentLoaded] = useState(false);\n // Selection\n const [selectedName, setSelectedName] = useState([]);\n const [selectedRequirement, setSelectedRequirement] = useState([]);\n const [selectedMatchRangeSelfAssessed, setSelectedMatchRangeSelfAssessed] =\n useImmer({\n min: 0,\n max: 100,\n });\n const [selectedMatchRangeEndorsed, setSelectedMatchRangeEndorsed] = useImmer({\n min: 0,\n max: 100,\n });\n\n const processAllData = async () => {\n try {\n // 1. Fetch all person details\n const dataMyPeoples = await PersonAPI.getPersonMyPeoples();\n\n // 2. For each person, fetch their associated job matches\n const dataJobMatches = await Promise.all(\n dataMyPeoples.map((person) =>\n JobAPI.getManagedPeopleJobMatches(person.personB.email).then(\n (jobMatches) => ({\n jobMatches,\n personB: person.personB, // Store only what's needed\n })\n )\n )\n );\n\n // 3. Combine person details with their respective job matches\n const dataMixJob = dataJobMatches.flatMap(({ jobMatches, personB }) =>\n jobMatches.map((jobItem) => ({\n ...jobItem,\n fullName: `${personB.firstName} ${personB.lastName}`,\n email: personB.email,\n position: personB.position,\n }))\n );\n\n // Update state or context with the merged data\n setData(dataMixJob);\n } catch (error) {\n // Log the error if fetching fails\n console.error(\"Failed to fetch action plan data:\", error);\n // Optionally, you can set an error state to display an error message to users.\n }\n };\n\n // Filter by Person Name\n const optionsName = useMemo(() => {\n if (data?.length === 0) return [];\n\n const dataGroup = groupBy(data, constantData.fullName);\n\n return Object.keys(dataGroup)\n .map((item) => ({\n label: item,\n value: item,\n }))\n .sort((a, b) => a.label.localeCompare(b.label));\n }, [data]);\n\n // Filter by Requirement\n const optionsRequirement = useMemo(() => {\n if (data?.length === 0) return [];\n\n const dataGroup = groupBy(data, constantData.jobTitle);\n\n return Object.keys(dataGroup)\n .map((item) => ({\n label: item,\n value: item,\n }))\n .sort((a, b) => a.label.localeCompare(b.label));\n }, [data]);\n\n // Data Filter => Ref By Data\n const dataFilter = useMemo(() => {\n let resultData = [];\n\n if (data.length) {\n resultData = data.filter((item) => {\n // If selectedName is populated and the condition is not met, filter out\n if (selectedName.length > 0 && !selectedName.includes(item.fullName)) {\n return false;\n }\n\n // If selectedRequirement is populated and the condition is not met, filter out\n if (\n selectedRequirement.length > 0 &&\n !selectedRequirement.includes(item.jobTitle)\n ) {\n return false;\n }\n\n // If selectedMatchRangeSelfAssessed is populated and the condition is not met, filter out\n if (\n !(\n item.matchPercentSelf >= selectedMatchRangeSelfAssessed.min &&\n item.matchPercentSelf <= selectedMatchRangeSelfAssessed.max\n )\n ) {\n return false;\n }\n\n // If selectedMatchRangeEndorsed is populated and the condition is not met, filter out\n if (\n !(\n item.matchPercentValidated >= selectedMatchRangeEndorsed.min &&\n item.matchPercentValidated <= selectedMatchRangeEndorsed.max\n )\n ) {\n return false;\n }\n\n // If all conditions are met or not applicable, include the item\n return true;\n });\n }\n return resultData;\n }, [\n data,\n selectedName,\n selectedRequirement,\n selectedMatchRangeSelfAssessed,\n selectedMatchRangeEndorsed,\n ]);\n\n const dashboardTable = useMemo(() => dataFilter ?? [], [dataFilter]); // Recompute only if dataFilter changes\n\n const dashboardSelfAssessedCount = useMemo(() => {\n // Checking for emptiness directly\n if (!dataFilter.length) return 0;\n\n // Count unique fullNames without grouping the entire dataset\n const uniqueNames = new Set(\n dataFilter.map((item) => item[constantData.fullName])\n );\n return uniqueNames.size;\n }, [dataFilter]); // Recompute only if dataFilter changes\n\n const dashboardRequirementMatchCount = useMemo(() => {\n // Checking for emptiness directly\n if (!dataFilter.length) return 0;\n\n // Count unique fullNames without grouping the entire dataset\n const uniqueNames = new Set(\n dataFilter.map((item) => item[constantData.jobTitle])\n );\n return uniqueNames.size;\n }, [dataFilter]); // Recompute only if dataFilter changes\n\n // This effect runs when the component mounts.\n useEffect(() => {\n // This variable helps us ensure that we don't call `setIsContentLoaded` if the component has unmounted before our asynchronous operation completes.\n let isMounted = true;\n\n // Fetch and process all data\n processAllData().then(() => {\n if (isMounted) {\n // Only set the loading state to false if the component is still mounted\n setIsContentLoaded(true);\n }\n });\n\n // The cleanup function for the effect\n return () => {\n // If the component unmounts, we set isMounted to false to prevent any state updates after unmounting.\n isMounted = false;\n };\n }, []); // Empty dependency array means this effect runs once when the component mounts and never again.\n\n // If content is still loading, display a spinner.\n if (!isContentLoaded) {\n return \n {/* JobMatches filters */}\n \n \n \n {/* JobMatch table */}\n \n \n \n \n );\n};\n\nexport { JobMatch };\n","import { Row, Col, Select, Form, Switch } from \"antd\";\nimport React from \"react\";\n\nconst constantData = {\n empty: \"\",\n labelPersonName: \"Person\",\n personName: \"person\",\n endVersionName: \"endVersion\",\n startVersionName: \"startVersion\",\n labelStartVersionName: \"Start Version\",\n labelEndVersionName: \"End Version\",\n noDatText: \" (No Data)\",\n labelProfileTypeName: \"Profile Type\",\n};\n\n// A reusable select component that reduces redundancy\nconst SelectComponent = ({\n value,\n onChange,\n placeholderBaseText,\n options,\n disabled,\n}) => {\n // Constructing the placeholder text based on the passed options\n const placeholderText = `${placeholderBaseText}${\n (options ?? []).length < 1 ? constantData.noDatText : constantData.empty\n }`;\n\n return (\n
;\n\nconst constantData = {\n lvBackgroundColorDefault: \"#F0F0F0\",\n tableSize: \"default\",\n expandedTableSize: \"default\",\n skillLevelCount: 7,\n categoryName: \"category\",\n infoName: \"info\",\n topName: \"top\",\n levelName: \"Level\",\n characters: {\n p: \"P\",\n na: \"NA\",\n m: \"M\",\n },\n};\n\nconst SkillChangeTable = ({ data = null, version = null }) => {\n const onCategoryCellRendered = (text, record, index) => {\n // Depending on the 'isSkill' property of the record, determine which component to render.\n // If 'isSkill' is true, use 'WrapperCellSkillCategoryCustom'.\n // If 'isSkill' is false, use 'WrapperCellSubCategoryCustom'.\n const ComponentToRender = record.isSkill\n ? record.hideHeader\n ? WrapperCellSkillCategory\n : WrapperCellSkillCategoryCustom\n : WrapperCellSubCategoryCustom;\n\n // Render the chosen component inside a div with the given class.\n // The title and placement properties are consistent for both components.\n return (\n \n \n {`${text}${record.isSkill ? ` (${record.meta.code})` : \"\"}`}\n \n
\n );\n };\n\n const onExpandCellTitleRendered = (meta) => {\n // Define the custom title for the tooltip:\n // It contains the name of the level responsibility and a list of levels beneath it.\n const customTitle = () => (\n \n {/* Display the name of the level responsibility */}\n \n {meta?.levelResponsibility?.name}\n \n\n {/* Map through the levels and display each one */}\n {meta?.levelResponsibility?.levels?.map((item, index) => (\n \n {`${constantData.levelName} ${item.level} : ${item.name}`}\n \n ))}\n
\n );\n\n // Render the custom title wrapped in a 'WrapperTitleCustom' component.\n // It contains an expandable icon and an informational icon within a tooltip.\n return (\n \n {/* Information Icon wrapped in a tooltip */}\n \n \n );\n };\n // Renders get content based on the level value\n const onCellRendered = (text, record, lv) => {\n // When record isn't a skill, just return an empty style object.\n if (!record.isSkill || !record.levels) return getCellEmpty();\n // Attempt to find the corresponding level from the record's levels.\n const tempLevel = record.levels.find(\n (level) =>\n level.lv === lv && (record.hideHeader ? level.skillProfile : true)\n );\n // If no such level is found, return with the default style.\n if (!tempLevel) return getCellEmpty();\n\n return (\n \n {tempLevel.lv}
\n \n );\n };\n\n /**\n * Determines the styling and interactivity of cells based on the given record and level.\n * This function primarily checks the level and adjusts the cell style based on the record's details.\n */\n const onLevelColorCellRendered = (record, index, lv) => {\n // When record isn't a skill, just return an empty style object.\n if (!record.isSkill) return {};\n\n // This is a default style for a cell. Used for skill-based records when no specific level styling is found.\n const defaultStyle = {\n backgroundColor: constantData.lvBackgroundColorDefault,\n borderStyle: \"solid\",\n borderWidth: \"0.5px\",\n };\n\n // If the record has no levels defined, just return the default styling.\n if (!record.levels) return { style: defaultStyle };\n\n // Attempt to find the corresponding level from the record's levels.\n const tempLevel = record.levels.find(\n (level) =>\n level.lv === lv && (record.hideHeader ? level.skillProfile : true)\n );\n\n // If no such level is found, return with the default style.\n if (!tempLevel) return { style: defaultStyle };\n let tempBackgroundColor = record.meta.skillColour;\n if (record.hideHeader === false && tempLevel.skillProfile) {\n switch (tempLevel.skillProfile.stringVal) {\n case constantData.characters.m:\n tempBackgroundColor = record.meta.colour;\n break;\n case constantData.characters.na:\n tempBackgroundColor = `repeating-linear-gradient(${record.meta.skillColour}, ${record.meta.colour} 10px, ${record.meta.skillColour} 10px, ${record.meta.colour} 20px)`;\n break;\n case constantData.characters.p:\n tempBackgroundColor = `repeating-linear-gradient(45deg, ${record.meta.skillColour}, ${record.meta.colour} 10px, ${record.meta.skillColour} 10px, ${record.meta.colour} 20px)`;\n break;\n }\n }\n return {\n // Set up the cell's styling based on the found level's value.\n style: {\n cursor: \"help\",\n // Determine the cell's background color based on the value.\n background: tempBackgroundColor,\n // Adjust text color depending on the value.\n color: \"black\",\n borderStyle: \"solid\",\n borderWidth: \"0.5px\",\n },\n };\n };\n\n // A simple tooltip renderer for cell titles\n const onCellTitleRendered = (text, description) => (\n \n {text} {version && (v. {version}) }\n \n );\n\n const onCellTitle = (record, index) => {\n if (record.hideHeader && !record.isSkill) {\n return {\n className: \"r-hide\",\n };\n }\n return {};\n };\n\n const getDataSource = () => {\n const hideHeader = data.meta.hideHeader;\n // If the root is expanded, handle both subcategories and their skills\n return data.subCategories.flatMap((item, index) => {\n const { name, description, skillColour, colour, skills } = item;\n\n // Construct base data for the sub-category\n const baseData = {\n key: `${index + 1}`,\n category: name,\n hideHeader: hideHeader,\n isSkill: false,\n meta: { description, skillColour, colour },\n };\n\n // Construct data for each skill under the current sub-category\n const skillsData = skills.map((itemSkill, indexSkill) => {\n const { name, description, levels, code } = itemSkill;\n\n return {\n key: `${index + 1}.${indexSkill + 1}`,\n category: name,\n parent: item.name,\n hideHeader: hideHeader,\n isSkill: true,\n meta: { skillColour, colour, description, code },\n // Map each level of the skill to its data structure\n levels: levels.map((level) => ({\n lv: level.level,\n description: level.description,\n skillProfile: level.skillProfile,\n })),\n };\n });\n\n // Return a combined array of the base sub-category data and all its skills data\n return [baseData, ...skillsData];\n });\n };\n\n const getColumns = () => {\n // Initial columns for category and expand cells\n const initialColumns = [\n {\n title: () =>\n onCellTitleRendered(data.name, data.description, data.meta),\n dataIndex: constantData.categoryName,\n key: constantData.categoryName,\n render: onCategoryCellRendered,\n onCell: onCellTitle,\n },\n {\n title: () => onExpandCellTitleRendered(data.meta),\n key: constantData.infoName,\n dataIndex: constantData.infoName,\n render: () => getCellEmpty(),\n },\n ];\n\n // Generate columns for each skill level\n const skillLevelColumns = Array.from(\n { length: constantData.skillLevelCount },\n (_, lv) => {\n const level = lv + 1;\n return {\n title: `${level}`,\n dataIndex: `${level}`,\n key: `${level}`,\n onCell: (record, index) =>\n onLevelColorCellRendered(record, index, level),\n render: (text, record) => onCellRendered(text, record, level),\n };\n }\n );\n\n // Combine and return all columns\n return [...initialColumns, ...skillLevelColumns];\n };\n\n // useMemo calculates and memoizes the table data based on its dependencies.\n const tableData = useMemo(() => {\n if (data === undefined) return { dataSource: [], columns: [] };\n // Get the data source using the provided getDataSource function\n const dataSource = getDataSource();\n\n // Get the columns using the provided getColumns function\n const columns = getColumns();\n\n // Return the computed values in an object\n return { dataSource, columns };\n }, [data]); // Memoization depends on these three values.\n\n return (\n \n \n \n );\n};\n\nexport default SkillChangeTable;\n","import CategoryAPI from \"../../../../common/api/service/CategoryService\";\nimport LorAPI from \"../../../../common/api/service/LorService\";\nimport PersonAPI from \"../../../../common/api/service/PersonService\";\nimport ProfileAPI from \"../../../../common/api/service/ProfileService\";\nimport { LevelResponsibility } from \"../../components/config/mockdata/levels\";\nimport {\n OrderCategory,\n OrderGeneric,\n} from \"../../components/config/mockdata/order\";\nimport SkillChangeFilters from \"../../components/filters/skillchange\";\nimport SkillChangeTable from \"../../components/table/skillchange\";\nimport { Row, Col, Empty, Typography } from \"antd\";\nimport React, { useState, useEffect, useMemo } from \"react\";\nimport { Spinner } from \"reactstrap\";\nimport styled from \"styled-components\";\n\nconst DivCenter = ({ Component }) => {\n return (\n \n \n );\n};\n\nconst { Title } = Typography;\n\nconst WrapperDiv = styled.div`\n .vs-h-sm-h {\n display: none;\n }\n @media (max-width: 1080px) {\n .col-sm-cm-m {\n max-width: 100% !important;\n }\n\n .col-sm-cm {\n flex: 0 0 100%;\n }\n\n .vs-sm-h {\n display: none;\n }\n\n .vs-h-sm-h {\n display: contents;\n }\n }\n`;\n\nconst constantData = {\n empty: \"\",\n versionName: \"Version\",\n approvedText: \" (Approved)\",\n selfAssessedName: \"Self Assessed\",\n generic: {\n id: \"genericObj12345\",\n name: \"Generic Attributes\",\n description: null,\n },\n genericSub: {\n id: \"genericSubObj12345\",\n name: \"Generic Sub Attributes\",\n description: null,\n },\n colors: {\n type1: \"#3C65C2\",\n type2: \"#EEF2FF\",\n type3: \"#69849c\",\n type4: \"#a5b8c8\",\n },\n};\n\n/**\n * Utility function to extract default values from an item. If the item doesn't have\n * a particular key, it uses the default value provided.\n */\nconst extractDefaults = (item, defaults) => {\n return Object.keys(defaults).reduce((obj, key) => {\n obj[key] = item[key] ?? defaults[key];\n return obj;\n }, {});\n};\n\nconst SkillChange = (props) => {\n const [dataPerson, setDataPerson] = useState([]);\n const [dataCategory, setDataCategory] = useState([]);\n const [isContentLoaded, setIsContentLoaded] = useState(false);\n // Selection\n const [selectPerson, setSelectPerson] = useState();\n const [selectProfileType, setSelectProfileType] = useState();\n const [selectStartVersion, setSelectStartVersion] = useState();\n const [selectEndVersion, setSelectEndVersion] = useState();\n\n const [isCompactView, setIsCompactView] = useState(true);\n\n // Helper function to fetch and enrich profile versions for a given email\n const fetchProfileVersions = async (categories, email) => {\n // Fetching profile versions based on email\n const versions = await ProfileAPI.getManagedPeopleProfileVersions(email);\n\n // Mapping through each version to enrich with skill profiles\n const enrichedVersions = await Promise.all(\n versions.map(async (version) => {\n // Fetching skill profiles and self assessed skills in parallel for efficiency\n const [skills, selfAssessedSkills] = await Promise.all([\n ProfileAPI.getManagedPeopleSkillPofiles(\n email,\n version.sfiaVersion,\n version.version,\n version.profileType\n ),\n ProfileAPI.getManagedPeopleLorPofiles(\n email,\n version.sfiaVersion,\n version.version,\n version.profileType\n ),\n ]);\n\n const availableSkillCodes = categories\n ? categories.flatMap((category, index) => {\n return category.subCategories.flatMap((subCategory, index) => {\n return subCategory.skills\n .filter((it) => !it.isHidden)\n .flatMap((skill, index) => {\n return skill.skillsCode;\n });\n });\n })\n : [];\n\n // Combining the fetched data and returning enriched version\n return {\n ...version,\n skillProfile: [...skills.filter(it => availableSkillCodes.includes(it.skillCode)), ...selfAssessedSkills],\n };\n })\n );\n\n return enrichedVersions;\n };\n\n const processPersonData = async (categories, people) => {\n // For each person, fetch and enrich their profile versions.\n people = await Promise.all(\n people.map(async (person) => {\n // Fetch enriched profile versions for the person.\n const profileVersions = await fetchProfileVersions(\n categories,\n person.personB.email\n );\n\n // Add an `approveVersion` flag based on approvals and return the enriched person data.\n return {\n ...person,\n profileVersions: profileVersions.map((version) => ({\n ...version,\n // Check if any account has an approval for this version.\n approveVersion: version.profileType == \"Self Assessed\" && person.personB.accounts.some((account) =>\n account.approvals.some(\n (approval) => approval.approvedVersion == version.version\n )\n ),\n })),\n };\n })\n );\n \n setDataPerson(people);\n };\n\n const processCategoryData = (category, lor) => {\n // Reordering category based on the predefined order.\n let orderedCats = OrderCategory.map((key) =>\n category.find((e) => e.name === key)\n );\n\n if (orderedCats.filter(it => it == undefined).length > 0){\n orderedCats = [...category]\n }\n\n let orderedGeneric = [];\n let lorNameOrder = [];\n\n lor.forEach((it) => {\n let idx = 99;\n if (OrderGeneric.find(x => x == it.name)){\n idx = OrderGeneric.indexOf(it.name);\n }\n\n lorNameOrder.push({\n idx,\n name:it.name\n })\n })\n\n lorNameOrder.sort((a, b) => (`${a.idx} ${a.name}` > `${b.idx} ${b.name}` ? 1 : -1)).forEach((lname) => {\n const l = lor.find(it => it.name == lname.name);\n orderedGeneric.push(l);\n })\n\n // Defining the genericObj structure.\n const genericObj = [\n {\n id: constantData.generic.id,\n name: constantData.generic.name,\n description: constantData.generic.description,\n styles: {\n color: constantData.colors.type1,\n backgroundColor: constantData.colors.type2,\n },\n hideHeader: true,\n sfiaVersion: 8,\n subCategories: [\n {\n id: constantData.genericSub.id,\n name: constantData.genericSub.name,\n description: constantData.genericSub.description,\n colour: constantData.colors.type3,\n skillColour: constantData.colors.type4,\n skills: orderedGeneric,\n },\n ],\n },\n ];\n // Combining the reordered category list with the generic object.\n setDataCategory([...genericObj, ...orderedCats]);\n };\n\n const processAllData = async () => {\n try {\n if (!props.manageProfileByAdminPopup){\n // Fetching both datasets in parallel.\n const [peoples, category, lor] = await Promise.all([\n PersonAPI.getPersonMyPeoples(),\n CategoryAPI.getCategories(),\n LorAPI.getLors(),\n ]);\n\n processCategoryData(category, lor);\n await processPersonData(category, peoples);\n } else {\n let peoples = [];\n\n if (props.managedPeople){\n peoples.push(props.managedPeople); \n }\n\n const [category, lor] = await Promise.all([\n CategoryAPI.getCategories(),\n LorAPI.getLors(),\n ]);\n\n processCategoryData(category, lor);\n await processPersonData(category, peoples);\n }\n } catch (error) {\n // Log the error if fetching fails\n console.error(\"Failed to fetch action plan data:\", error);\n\n // Optionally, you can set an error state here if you'd like to display an error message to users.\n }\n };\n\n // Use the useMemo hook to optimize the transformation of dataPerson into the desired format.\n // This ensures that the transformation only happens when dataPerson changes.\n const optionPerson = useMemo(() => {\n // Check if dataPerson is empty; if so, return an empty array.\n if (!dataPerson.length) return [];\n\n // Map over the dataPerson array to transform each item.\n // This combines the task of accessing item.personB and constructing the new format\n // into a single iteration over the dataPerson array.\n return dataPerson.map((item) => ({\n // Set the value as the ID of personB.\n value: item.personB.id,\n\n // Construct the label by combining the firstName and lastName of personB.\n label: `${item.personB.firstName} ${item.personB.lastName}`,\n }));\n }, [dataPerson]); // Only recompute optionPerson when dataPerson changes.\n\n // Use the useMemo hook to transform optionPerson into the desired option format.\n // This ensures the transformation only occurs if optionPerson changes.\n const optionProfileType = useMemo(() => {\n // If dataPerson is empty, return an empty array.\n if (!dataPerson.length) return [];\n\n // Find the correct personB item based on the person ID and retrieve profileVersions.\n // If not found, default to an empty array.\n const profileVersions =\n dataPerson.find((item) => item.personB.id === selectPerson)\n ?.profileVersions || [];\n\n const profileTypes = [];\n\n if (profileVersions.find(it => it.profileType == \"Self Assessed\")){\n profileTypes.push({\n value : \"Self Assessed\",\n label : \"Self Assessed\"\n });\n }\n\n if (profileVersions.find(it => it.profileType == \"Endorsed\")){\n profileTypes.push({\n value : \"Endorsed\",\n label : \"Endorsed\"\n });\n }\n\n return profileTypes;\n }, [optionPerson, selectPerson]); // Dependencies for useMemo: Only recompute if either of these values change.\n\n // Use the useMemo hook to transform optionPerson into the desired option format.\n // This ensures the transformation only occurs if optionPerson changes.\n const optionStartVersion = useMemo(() => {\n // If dataPerson is empty, return an empty array.\n if (!dataPerson.length) return [];\n\n // Find the correct personB item based on the person ID and retrieve profileVersions.\n // If not found, default to an empty array.\n const profileVersions =\n dataPerson.find((item) => item.personB.id === selectPerson)\n ?.profileVersions || [];\n\n // Map over the profileVersions to create the desired option format.\n return profileVersions.map((item) => ({\n value: item.version,\n label: `${constantData.versionName} ${item.version} - ${new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(item.createdOn))}${\n item.approveVersion ? constantData.approvedText : constantData.empty\n }`,\n refData: item,\n }));\n }, [optionPerson, selectPerson]); // Dependencies for useMemo: Only recompute if either of these values change.\n\n // Use the useMemo hook to optimize the generation of optionEndVersion based on optionStartVersion.\n // This ensures that the filtered options only get recalculated if optionStartVersion or selectStartVersion changes.\n const optionEndVersion = useMemo(() => {\n // If optionStartVersion doesn't have any items, return an empty array.\n if (!optionStartVersion.length) return [];\n\n // Filter the options from optionStartVersion. Only include items where the version\n // is greater than the selected start version, ensuring that the end version is always after the start version.\n return optionStartVersion.filter((item) => item.value > selectStartVersion);\n }, [optionStartVersion, selectStartVersion]); // Dependencies for useMemo: Only recompute if either of these values change.\n\n // Function to generate a table by profile level.\n const generateTableByProfileLevel = (profile) => {\n return dataCategory.map((item) => {\n // Extract default values for the main category item\n const itemDefaults = {\n hideHeader: false,\n colour: \"\",\n styles: null,\n };\n const extractedItem = extractDefaults(item, itemDefaults);\n\n return {\n name: item.name,\n meta: {\n hideHeader: extractedItem.hideHeader,\n levelResponsibility: LevelResponsibility,\n },\n description: item.description,\n styles: {\n tableHeaderColor: extractedItem?.styles?.color || \"white\",\n tableHeaderBackgroundColor:\n extractedItem?.styles?.backgroundColor || extractedItem.colour,\n },\n subCategories: item.subCategories.map((subCategoryKey) => {\n // Extract default values for sub-category items\n const subCategoryDefaults = {\n colour: \"\",\n skillColour: \"\",\n };\n const extractedSubCategory = extractDefaults(\n subCategoryKey,\n subCategoryDefaults\n );\n\n return {\n name: subCategoryKey.name,\n description: subCategoryKey.description,\n colour: extractedSubCategory.colour,\n skillColour: extractedSubCategory.skillColour,\n skills: subCategoryKey.skills\n .filter(it => !it.isHidden)\n .map((skillKey) => {\n // Extract default values for skills within sub-category\n const skillDefaults = {\n skillsCode: skillKey.lorCode,\n };\n const extractedSkill = extractDefaults(skillKey, skillDefaults);\n\n return {\n name: skillKey.name,\n description: skillKey.description,\n code: extractedSkill.skillsCode,\n levels: skillKey.levels.map((levelKey) => {\n // Extract default values for levels within skills\n const levelDefaults = {\n level: levelKey.levelNumber,\n };\n const extractedLevel = extractDefaults(\n levelKey,\n levelDefaults\n );\n\n // Find a matching skill profile\n const findSkillProfile = profile.skillProfile.filter(it => it.profileType == selectProfileType).find(\n (_) =>\n // filter category\n (_.category ?? constantData.generic.name) === item.name &&\n // filter sub category\n (_.subCategory ?? constantData.genericSub.name) ===\n subCategoryKey.name &&\n // filter code\n (_.skillCode ?? _.lorCode) ===\n extractedSkill.skillsCode &&\n // filter level\n _.level === extractedLevel.level\n );\n\n return {\n level: extractedLevel.level,\n description: levelKey.description,\n skillProfile: findSkillProfile,\n };\n }),\n };\n }),\n };\n }).filter(it => it.skills.length > 0),\n };\n }).filter(it => it.subCategories.length > 0);\n };\n\n // Compares skills between two categories and returns the differences.\n const compareSkills = (itemSub, secondSkillsList) => {\n const listDiffSkills = [];\n\n itemSub.skills.forEach((skill, index) => {\n const firstSkills = skill.levels.filter((_) => _.skillProfile);\n const secondSkills = secondSkillsList[index].levels.filter(\n (_) => _.skillProfile\n );\n\n let isDiff = false;\n\n // Check if the number of skills differs\n if (firstSkills.length !== secondSkills.length) {\n isDiff = true;\n } else {\n // Check if there's any skill level mismatch between the tables\n isDiff = firstSkills.some((firstSkill) => {\n const findMatchLevel = secondSkills.find(\n (secondSkill) => secondSkill.level === firstSkill.level\n );\n\n return (\n !findMatchLevel ||\n findMatchLevel.skillProfile.stringVal !==\n firstSkill.skillProfile.stringVal\n );\n });\n }\n\n // If a difference was found, add the skill to the list of differences\n if (isDiff) {\n listDiffSkills.push({\n name: skill.name,\n code: skill.code,\n });\n }\n });\n\n return listDiffSkills;\n };\n\n // Compares two tables and filters out their data based on the differences.\n const compareTables = (firstTable, secondTable) => {\n // Copy tables to avoid mutations\n let tempFirst = [...firstTable];\n let tempSecond = [...secondTable];\n const listDiffCategory = [];\n\n tempFirst.forEach((item, index) => {\n const listDiffSubCategories = [];\n\n item.subCategories.forEach((itemSub, indexSub) => {\n const listDiffSkills = compareSkills(\n itemSub,\n secondTable[index].subCategories[indexSub].skills\n );\n\n // If differences in skills were found, filter the skills for that sub-category\n if (listDiffSkills.length > 0) {\n itemSub.skills = itemSub.skills.filter((skill) =>\n listDiffSkills.some((diff) => diff.name === skill.name)\n );\n tempSecond[index].subCategories[indexSub].skills = tempSecond[\n index\n ].subCategories[indexSub].skills.filter((skill) =>\n listDiffSkills.some((diff) => diff.name === skill.name)\n );\n listDiffSubCategories.push({ name: itemSub.name });\n } else {\n // Reset skills if no differences were found\n itemSub.skills = [];\n tempSecond[index].subCategories[indexSub].skills = [];\n }\n });\n\n // If differences in subcategories were found, filter the sub-categories for that category\n if (listDiffSubCategories.length > 0) {\n item.subCategories = item.subCategories.filter((subCat) =>\n listDiffSubCategories.some((diff) => diff.name === subCat.name)\n );\n tempSecond[index].subCategories = tempSecond[\n index\n ].subCategories.filter((subCat) =>\n listDiffSubCategories.some((diff) => diff.name === subCat.name)\n );\n listDiffCategory.push({ name: item.name });\n } else {\n // Reset subcategories if no differences were found\n item.subCategories = [];\n secondTable[index].subCategories = [];\n }\n });\n\n // If differences in categories were found, filter the main category list\n if (listDiffCategory.length > 0) {\n tempFirst = tempFirst.filter((cat) =>\n listDiffCategory.some((diff) => diff.name === cat.name)\n );\n tempSecond = tempSecond.filter((cat) =>\n listDiffCategory.some((diff) => diff.name === cat.name)\n );\n } else {\n // Reset tables if no differences were found\n tempFirst = [];\n tempSecond = [];\n }\n\n return {\n first: tempFirst,\n second: tempSecond,\n };\n };\n\n const compareTableSkills = (firstTable, secondTable) => {\n let updatedSkills = [];\n \n if (firstTable && firstTable.length > 0){\n firstTable.filter(it => it.stringVal != \"N\" && it.profileType == selectProfileType && !it.isExtraFramework).forEach((firstSkill) => {\n if (firstSkill.skillCode){\n const category = dataCategory.find(it => it.name == firstSkill.category);\n const categoryIndex = category ? dataCategory.findIndex(it => it.name == firstSkill.category) : 0;\n const subCategory = category ? category.subCategories.find(it => it.name == firstSkill.subCategory) : null;\n const subCategoryIndex = subCategory ? category.subCategories.findIndex(it => it.name == firstSkill.subCategory) : 0;\n const skill = subCategory ? subCategory.skills.find(it => it.name == firstSkill.skill) : null;\n const skillIndex = skill ? subCategory.skills.findIndex(it => it.name == firstSkill.skill) : 0;\n\n const checkSecond = secondTable ? secondTable.find(it => it.stringVal != \"N\" && it.profileType == selectProfileType && it.category == firstSkill.category && it.subCategory == firstSkill.subCategory && it.skillCode == firstSkill.skillCode && it.level == firstSkill.level) : null;\n if (checkSecond) {\n if (firstSkill.stringVal != checkSecond.stringVal){\n updatedSkills.push({\n category : firstSkill.category,\n categoryIndex,\n subCategory : firstSkill.subCategory,\n subCategoryIndex,\n skill : firstSkill.skill,\n skillIndex,\n skillCode : firstSkill.skillCode,\n level : firstSkill.level,\n stringVal : checkSecond.stringVal,\n originalSkillType : firstSkill.stringVal == \"M\" ? \"Competent\" : (firstSkill.stringVal == \"P\" ? \"Proficient\" : firstSkill.stringVal == \"NA\" ? \"Knowledge\" : \"\"),\n skillType : checkSecond.stringVal == \"M\" ? \"Competent\" : (checkSecond.stringVal == \"P\" ? \"Proficient\" : checkSecond.stringVal == \"NA\" ? \"Knowledge\" : \"\"),\n action : \"Updated\"\n })\n }\n } else {\n updatedSkills.push({\n category : firstSkill.category,\n categoryIndex,\n subCategory : firstSkill.subCategory,\n subCategoryIndex,\n skill : firstSkill.skill,\n skillIndex,\n skillCode : firstSkill.skillCode,\n level : firstSkill.level,\n stringVal : firstSkill.stringVal,\n skillType : firstSkill.stringVal == \"M\" ? \"Competent\" : (firstSkill.stringVal == \"P\" ? \"Proficient\" : firstSkill.stringVal == \"NA\" ? \"Knowledge\" : \"\"),\n action : \"Removed\"\n })\n }\n } else if (firstSkill.lorCode){\n const category = dataCategory.find(it => it.subCategories.some(it => it.skills.some(it => it.name == firstSkill.lor && it.lorCode == firstSkill.lorCode)));\n const categoryIndex = category ? dataCategory.findIndex(it => it.subCategories.some(it => it.skills.some(it => it.name == firstSkill.lor && it.lorCode == firstSkill.lorCode))) : 0;\n const subCategory = category ? category.subCategories.find(it => it.skills.some(it => it.name == firstSkill.lor && it.lorCode == firstSkill.lorCode)) : null;\n const subCategoryIndex = subCategory ? category.subCategories.findIndex(it => it.skills.some(it => it.name == firstSkill.lor && it.lorCode == firstSkill.lorCode)) : 0;\n const skill = subCategory ? subCategory.skills.find(it => it.name == firstSkill.lor && it.lorCode == firstSkill.lorCode) : null;\n const skillIndex = skill ? subCategory.skills.findIndex(it => it.name == firstSkill.lor && it.lorCode == firstSkill.lorCode) : 0;\n \n const checkSecond = secondTable ? secondTable.find(it => it.stringVal != \"N\" && it.profileType == selectProfileType && !it.isExtraFramework && it.lor == firstSkill.lor && it.lorCode == firstSkill.lorCode && it.level == firstSkill.level) : null;\n if (!checkSecond) {\n updatedSkills.push({\n category : category && category.name,\n categoryIndex,\n subCategory : subCategory && subCategory.name,\n subCategoryIndex,\n skill : firstSkill.lor,\n skillIndex,\n skillCode : firstSkill.lorCode,\n level : firstSkill.level,\n action : \"Removed\"\n })\n }\n }\n });\n }\n\n if (secondTable && secondTable.length > 0){\n secondTable.filter(it => it.stringVal != \"N\" && it.profileType == selectProfileType && !it.isExtraFramework).forEach((secondSkill) => {\n if (secondSkill.skillCode){\n const category = dataCategory.find(it => it.name == secondSkill.category);\n const categoryIndex = category ? dataCategory.findIndex(it => it.name == secondSkill.category) : 0;\n const subCategory = category ? category.subCategories.find(it => it.name == secondSkill.subCategory) : null;\n const subCategoryIndex = subCategory ? category.subCategories.findIndex(it => it.name == secondSkill.subCategory) : 0;\n const skill = subCategory ? subCategory.skills.find(it => it.name == secondSkill.skill) : null;\n const skillIndex = skill ? subCategory.skills.findIndex(it => it.name == secondSkill.skill) : 0;\n\n const checkFirst = firstTable ? firstTable.find(it => it.stringVal != \"N\" && it.profileType == selectProfileType && !it.isExtraFramework && it.category == secondSkill.category && it.subCategory == secondSkill.subCategory && it.skillCode == secondSkill.skillCode && it.level == secondSkill.level) : null;\n if (!checkFirst){\n updatedSkills.push({\n category : secondSkill.category,\n categoryIndex,\n subCategory : secondSkill.subCategory,\n subCategoryIndex,\n skill : secondSkill.skill,\n skillIndex,\n skillCode : secondSkill.skillCode,\n level : secondSkill.level,\n stringVal : secondSkill.stringVal,\n skillType : secondSkill.stringVal == \"M\" ? \"Competent\" : (secondSkill.stringVal == \"P\" ? \"Proficient\" : secondSkill.stringVal == \"NA\" ? \"Knowledge\" : \"\"),\n action : \"Added\"\n })\n }\n }else if (secondSkill.lorCode){\n const category = dataCategory.find(it => it.subCategories.some(it => it.skills.some(it => it.name == secondSkill.lor && it.lorCode == secondSkill.lorCode)));\n const categoryIndex = category ? dataCategory.findIndex(it => it.subCategories.some(it => it.skills.some(it => it.name == secondSkill.lor && it.lorCode == secondSkill.lorCode))) : 0;\n const subCategory = category ? category.subCategories.find(it => it.skills.some(it => it.name == secondSkill.lor && it.lorCode == secondSkill.lorCode)) : null;\n const subCategoryIndex = subCategory ? category.subCategories.findIndex(it => it.skills.some(it => it.name == secondSkill.lor && it.lorCode == secondSkill.lorCode)) : 0;\n const skill = subCategory ? subCategory.skills.find(it => it.name == secondSkill.lor && it.lorCode == secondSkill.lorCode) : null;\n const skillIndex = skill ? subCategory.skills.findIndex(it => it.name == secondSkill.lor && it.lorCode == secondSkill.lorCode) : 0;\n\n const checkFirst = firstTable ? firstTable.find(it => it.stringVal != \"N\" && it.profileType == selectProfileType && it.lor == secondSkill.lor && it.lorCode == secondSkill.lorCode && it.level == secondSkill.level) : null;\n if (!checkFirst){\n updatedSkills.push({\n category : category && category.name,\n categoryIndex,\n subCategory : subCategory && subCategory.name,\n subCategoryIndex,\n skill : secondSkill.lor,\n skillIndex,\n skillCode : secondSkill.lorCode,\n level : secondSkill.level,\n stringVal : secondSkill.stringVal,\n action : \"Added\"\n })\n }\n }\n });\n }\n\n return updatedSkills;\n }\n\n /**\n * Memoized computation of dashboard tables based on selected start and end versions.\n * It also takes into account the `isCompactView` flag to determine if tables should be compared or not.\n */\n const dashboardTable = useMemo(() => {\n let firstTable = [];\n let secondTable = [];\n\n let firstSkillProfiles = [];\n let secondSkillProfiles = [];\n let updatedSkillProfiles = [];\n\n // If a start version is selected, generate the first table\n if (selectStartVersion) {\n const foundStartVersion = optionStartVersion.find(\n (item) => item.value === selectStartVersion\n );\n firstTable = foundStartVersion\n ? generateTableByProfileLevel(foundStartVersion.refData)\n : [];\n\n firstSkillProfiles = foundStartVersion ? foundStartVersion.refData.skillProfile : [];\n }\n\n // If an end version is selected, generate the second table\n if (selectEndVersion) {\n const foundEndVersion = optionEndVersion.find(\n (item) => item.value === selectEndVersion\n );\n secondTable = foundEndVersion\n ? generateTableByProfileLevel(foundEndVersion.refData)\n : [];\n\n secondSkillProfiles = foundEndVersion ? foundEndVersion.refData.skillProfile : [];\n\n // If compact view is enabled and both tables exist, compare and filter them\n if (isCompactView && firstTable.length && secondTable.length) {\n const changedSkills = compareTableSkills(firstSkillProfiles, secondSkillProfiles);\n updatedSkillProfiles = changedSkills;\n const { first, second } = compareTables(firstTable, secondTable);\n firstTable = first;\n secondTable = second;\n }\n }\n\n return {\n firstTable,\n secondTable,\n updatedSkillProfiles\n };\n }, [selectStartVersion, selectEndVersion, isCompactView]);\n\n useEffect(() => {\n // Reset selectPerson if dataPerson is empty\n if (dataPerson.length > 0 && props.manageProfileByAdminPopup && !selectPerson){\n setSelectPerson(dataPerson[0].personB.id);\n }\n\n if (!dataPerson.length) {\n setSelectPerson(undefined);\n } else if (selectPerson) {\n if (selectProfileType && optionProfileType.length > 0 && optionProfileType.find(it => it.value == selectProfileType)) { \n // When selectPerson exists, find the minimum from optionStartVersion \n const find = optionStartVersion.filter(it => it.refData.profileType == selectProfileType).reduce((p, v) => (p < v ? p : v));\n \n if (find) {\n setSelectStartVersion(find.value);\n } \n }else {\n const defaultProfileType = optionProfileType.length > 0 ? optionProfileType[0] : null;\n\n if (defaultProfileType) {\n setSelectProfileType(defaultProfileType.value);\n // When selectPerson exists, find the minimum from optionStartVersion \n const find = optionStartVersion.filter(it => it.refData.profileType == defaultProfileType.value).reduce((p, v) => (p < v ? p : v));\n \n if (find) {\n setSelectStartVersion(find.value);\n }\n } \n }\n } else {\n // Reset selectStartVersion if selectPerson doesn't exist\n setSelectStartVersion(undefined);\n }\n }, [dataPerson, selectPerson, selectProfileType, optionStartVersion]);\n\n // Reset selectEndVersion when selectStartVersion changes\n useEffect(() => {\n setSelectEndVersion(undefined);\n }, [selectStartVersion]);\n\n // This effect runs when the component mounts.\n useEffect(() => {\n // This variable helps us ensure that we don't call `setIsContentLoaded` if the component has unmounted before our asynchronous operation completes.\n let isMounted = true;\n\n // Fetch and process all data\n processAllData().then(() => {\n if (isMounted) {\n // Only set the loading state to false if the component is still mounted\n setIsContentLoaded(true);\n }\n });\n\n // The cleanup function for the effect\n return () => {\n // If the component unmounts, we set isMounted to false to prevent any state updates after unmounting.\n isMounted = false;\n };\n }, []); // Empty dependency array means this effect runs once when the component mounts and never again.\n\n // If content is still loading, display a spinner.\n if (!isContentLoaded) {\n return \n {dashboardTable.secondTable.length > 0 ? (\n \n {\n dashboardTable.secondTable.map((item, index) => (\n \n {/* Render the first table */}\n \n Version {selectStartVersion}\n \n )}\n {/* Render each SkillChangeTable. Use unique identifier if present, or fall back to the index. */}\n \n Version {selectEndVersion}\n \n )}\n {/* Render each SkillChangeTable. Use unique identifier if present, or fall back to the index. */}\n
\n ))\n }\n {/* Render skill changed summary */}\n {\n dashboardTable.updatedSkillProfiles.length > 0 && \n \n \n {`${item.skillCode}${item.level} - ${item.skill} : ${item.skillType ? (item.skillType + \" \") : \"\"}${item.action}`}\n
\n ))\n }\n \n
\n }\n \n ) : (\n \n {/* Render the table */}\n
\n )}\n \n ) : (\n selectStartVersion && (\n (\n \n {/* Check if item is a string or needs to be parsed */}\n {isTree ? JSON.parse(item).value : item} \n onCloseClicked(obj, item)}\n style={{ color: \"darkred\" }}\n />\n \n ));\n};\n\nconst renderFilter = (Component, isExpand) => (\n \n \n {/* Rest of the JSX structure where you'll use your button */}\n setIsExpand((state) => !state)}\n >\n Filter\n \n \n {/* Rest of the JSX structure where you'll use your renderTags */}\n \n {/* Render tags for each filter type */}\n {renderTags(objProfile, \"magenta\", onCloseClicked, true)}\n {renderTags(objName, \"red\", onCloseClicked)}\n {renderTags(objRequirement, \"green\", onCloseClicked)}\n {renderTags(objType, \"cyan\", onCloseClicked)}\n {renderTags(objLorSkill, \"geekblue\", onCloseClicked, true)}\n {renderTags(objGeneric, \"purple\", onCloseClicked, true)}\n \n \n \n {/* Rest of the JSX structure where you'll use your CustomSelect */}\n \n \n \n \n Filter only the skills we have\n \n \n \n \n \n \n Filter only the skills we need\n \n \n \n \n \n \n \n Filter both\n \n \n \n \n );\n};\n\nexport default SkillsComparisonFilters;\n","import CategoryAPI from \"../../../../common/api/service/CategoryService\";\nimport JobService from \"../../../../common/api/service/JobService\";\nimport PersonService from \"../../../../common/api/service/PersonService\";\nimport ProfileService from \"../../../../common/api/service/ProfileService\";\nimport { Bar, TreeMapChart } from \"../../components/charts\";\nimport { LevelResponsibility } from \"../../components/config/mockdata/levels\";\nimport { OrderCategory } from \"../../components/config/mockdata/order\";\nimport SkillsComparisonFilters from \"../../components/filters/skillscomparison\";\nimport {\n SkillsWeHaveNeedTable,\n SkillsWeHaveNeedTableNormal,\n} from \"../../components/table\";\nimport { Row, Col, Typography } from \"antd\";\nimport { groupBy } from \"lodash\";\nimport React, { useState, useEffect, useMemo } from \"react\";\nimport { Spinner } from \"reactstrap\";\nimport styled from \"styled-components\";\n\nconst { Title } = Typography;\n\nconst DivCenter = ({ Component }) => {\n return (\n \n \n );\n};\n\n// styled components\nconst Container = styled.div`\n padding: 10px;\n\n .vs-h-sm-h {\n display: none;\n }\n\n .mb-30 {\n margin-bottom: 30px;\n }\n\n @media (max-width: 1280px) {\n .col-sm-c {\n max-width: 100% !important;\n flex: 0 0 100%;\n }\n\n .vs-h-sm-h {\n display: contents;\n }\n\n .sm-mt-20 {\n margin-top: 20px;\n }\n }\n`;\n\nconst ContainerContent = styled.div`\n padding: 20px 30px;\n margin-bottom: 50px;\n`;\n\nconst ContainerDefault = styled.div`\n padding: 0px 20px 00px 30px;\n`;\n\n// Constant Data\nconst constantData = {\n pageSize: 3,\n jobLorProfileLevel: 8,\n empty: \"\",\n spaceBar: \" \",\n levelName: \"level\",\n profileStatusName: \"profileStatus\",\n skillCodeLevelName: \"skillCodeLevel\",\n desirableName: \"Desirable\",\n requiredName: \"Required\",\n jobTypeList: [\"Current\", \"Future\"],\n fullName: \"fullName\",\n categoryName: \"category\",\n skillName: \"skill\",\n skillCode: \"skillCode\",\n categoryTitleName: \"Category\",\n subCategoryName: \"subCategory\",\n endorsedName: \"Endorsed\",\n competencyName: \"Competency\",\n capabilityName: \"capability\",\n lorCodeName: \"lorCode\",\n proficiencyName: \"Proficiency\",\n knowledgeName: \"Knowledge\",\n genericAttributeName: \"GenericAttribute\",\n personName: \"Person\",\n keyResult: [\"haveSkill\", \"needSkill\"],\n styles: {\n maxWidth: \"auto\",\n },\n colors: {\n type1: \"#3C65C2\",\n type2: \"#EEF2FF\",\n type3: \"#69849c\",\n type4: \"#a5b8c8\",\n },\n characters: {\n m: \"M\",\n n: \"N\",\n p: \"P\",\n },\n};\n\n// Helper function to deep clone data using JSON methods\n// This works for simple data structures without circular references or functions\nconst deepClone = (data) => JSON.parse(JSON.stringify(data));\n\n// Returns a new array containing only the unique elements from the provided `dataArray` based on a custom comparison function.\nconst distinctArray = (dataArray, func) => {\n // `seen` will store a unique \"hash\" for each item we've already encountered.\n const seen = new Set();\n\n // The array to accumulate unique items from `dataArray`.\n const uniqueArray = [];\n\n dataArray.forEach((item) => {\n // Create a unique \"hash\" for the current item based on the comparator function.\n // This \"hash\" is simply a string representation of all items considered equal to the current item.\n const hash = uniqueArray.some((itemIn) => func(item, itemIn));\n\n // If we haven't seen this unique \"hash\" before, add the item to our unique array.\n if (!hash) {\n seen.add(hash);\n uniqueArray.push(item);\n }\n });\n\n return uniqueArray;\n};\n\nconst SkillsComparison = () => {\n // Data\n const [dataHaveSkill, setDataHaveSkill] = useState([]);\n const [dataNeedSkill, setDataNeedSkill] = useState([]);\n const [genericAttributeHaveSkillData, setGenericAttributeHaveSkillData] =\n useState([]);\n const [genericAttributeNeedSkillData, setGenericAttributeNeedSkillData] =\n useState([]);\n const [isContentLoaded, setIsContentLoaded] = useState(false);\n\n // Selection\n const [selectedLorSkill, setSelectedLorSkill] = useState([]);\n const [selectedGeneric, setSelectedGeneric] = useState([]);\n const [selectedName, setSelectedName] = useState([]);\n const [selectedProfile, setSelectedProfile] = useState([]);\n const [selectedRequirement, setSelectedRequirement] = useState([]);\n const [selectedType, setSelectedType] = useState([]);\n\n const [categories, setCategories] = useState([]);\n\n // Processes the data of a person for a given item and its associated versions.\n const processPersonData = async (item, versions, categories) => {\n const availableSkillCodes = categories\n ? categories.flatMap((category, index) => {\n return category.subCategories.flatMap((subCategory, index) => {\n return subCategory.skills\n .filter((it) => !it.isHidden)\n .flatMap((skill, index) => {\n return skill.skillsCode;\n });\n });\n })\n : [];\n\n // Creates a copy of personB's accounts and sorts them in descending order based on the creation date.\n // Then, selects the most recent account.\n const account = item.personB.accounts\n .slice()\n .sort((a, b) => new Date(b.createdOn) - new Date(a.createdOn))[0];\n\n // If an account exists, creates a copy of its approvals, sorts them in descending order based on the approval date,\n // and then selects the most recent approval.\n const approver =\n account &&\n account.approvals\n .slice()\n .sort((a, b) => new Date(b.approvedOn) - new Date(a.approvedOn))[0];\n\n // Retrieves skillProfiles from the item. If they're not available, and a version exists,\n // fetches them using the ProfileService. If none of these conditions are met, defaults to an empty array.\n const skillProfiles =\n item.skillProfile ||\n (versions.length > 0 &&\n (await ProfileService.getManagedPeopleSkillPofiles(\n item.personB.email,\n versions[0].sfiaVersion,\n versions[0].version\n ))) ||\n [];\n\n // Returns the processed data.\n return {\n approver,\n profiles: processDetail(skillProfiles.filter(it => availableSkillCodes.includes(it.skillCode)), categories),\n name: constantData.personName,\n };\n };\n\n //Processes generic attribute data for a given item and its versions.z`\n const processGenericAttributeHaveSkillData = async (\n item,\n versions,\n categories\n ) => {\n // Sorts the accounts of personB based on the creation date.\n const account = item.personB.accounts.sort(\n (a, b) => new Date(a.createdOn) - new Date(b.createdOn)\n );\n\n // Sorts the approvals of the oldest account based on the approval date.\n const sortedApprovals = account[0].approvals.sort(\n (a, b) => new Date(a.approvedOn) - new Date(b.approvedOn)\n );\n\n // Gets the first (oldest) approver if available, otherwise null.\n const approver = sortedApprovals.length > 0 ? sortedApprovals[0] : null;\n\n // Retrieves lorProfiles from the item or fetches them if not available and a version exists.\n const lorProfiles =\n item.lorProfile ||\n (versions.length > 0\n ? await ProfileService.getManagedPeopleLorPofiles(\n item.personB.email,\n versions[0].sfiaVersion,\n versions[0].version\n )\n : []);\n\n // Returns the processed data.\n return {\n approver,\n profiles: processDetail(lorProfiles, categories),\n name: constantData.genericAttributeName,\n };\n };\n\n const processGenericAttributeNeedSkillData = (data) => {\n // Generic\n // For the generic category of needSkill, we transform the data\n // by mapping over the jobLor property and appending jobName and jobRef to each item\n let tempMapJob = data\n .map((item) =>\n item.jobLor.map((jobLor) => ({\n ...jobLor,\n jobName: item.jobName,\n jobRef: item.jobRef,\n }))\n )\n .flat(2)\n .map((item) => ({\n jobName: item.jobName,\n jobRef: item.jobRef,\n lor: item.lor,\n lorCode: item.lorCode,\n level: item.level,\n }));\n\n return distinctArray(\n tempMapJob,\n (itemA, itemB) => JSON.stringify(itemA) === JSON.stringify(itemB)\n );\n };\n\n // Processes the job details for a given list of items.\n // For each item, it fetches the associated job, its skill profiles, and its lor profiles.\n const processJobDetailData = async (categories, items) => {\n const availableSkillCodes = categories\n ? categories.flatMap((category, index) => {\n return category.subCategories.flatMap((subCategory, index) => {\n return subCategory.skills\n .filter((it) => !it.isHidden)\n .flatMap((skill, index) => {\n return skill.skillsCode;\n });\n });\n })\n : [];\n\n // For each item, create a set of promises to fetch the relevant job details.\n const jobDetailsPromises = items.map(async (item) => {\n // Use Promise.all to fetch the job, its skill profiles, and lor profiles concurrently for the given jobId.\n const [job, jobSkillProfiles, jobLorProfiles] = await Promise.all([\n JobService.getJob(item.jobId),\n JobService.getJobSkillProfiles(item.jobId),\n JobService.getJobLorProfiles(\n item.jobId\n ),\n ]);\n\n // Enrich each jobSkillProfile with additional job details (name, reference, lor profiles).\n return jobSkillProfiles\n .filter(it => availableSkillCodes.includes(it.skillCode))\n .map((profile) => {\n profile.jobName = job.name;\n profile.jobRef = job.reference;\n profile.jobLor = jobLorProfiles;\n return profile;\n });\n });\n\n // Resolve all the promises and flatten the resulting arrays to a single array.\n return (await Promise.all(jobDetailsPromises)).flat(2);\n };\n\n // Processes data related to people who possess certain skills.\n const processHaveSkillData = async (personPeople, categories) => {\n // Initialize arrays to store processed data.\n const personData = [];\n const genericAttributeData = [];\n\n // Map over each person item and process their data concurrently.\n await Promise.all(\n personPeople.map(async (item) => {\n // Get the profile versions of the current person.\n // If not provided, fetch them using the ProfileService.\n const versions =\n item.profileVersion ||\n (await ProfileService.getManagedPeopleProfileVersions(\n item.personB.email\n ));\n\n // Concurrently fetch and process person data and generic attribute data.\n const listData = await Promise.all([\n processPersonData(item, versions, categories),\n processGenericAttributeHaveSkillData(item, versions, categories),\n ]);\n\n // For each processed data value, transform and filter the profiles.\n for (const value of listData) {\n const mapData = value.profiles\n .map((_) => ({\n ..._,\n // Append full name and email details to each profile.\n fullName: `${item.personB.firstName} ${item.personB.lastName}`,\n email: item.personB.email,\n ...value.approver,\n // Set the profile status based on its type and approver details.\n profileStatus: !_.profileType.includes(constantData.endorsedName)\n ? value.approver\n ? `${_.profileType} (Approved)`\n : `${_.profileType} (Not Approved)`\n : _.profileType,\n isApproved: !_.profileType.includes(constantData.endorsedName)\n ? value.approver\n ? true\n : false\n : null,\n approvedText: !_.profileType.includes(constantData.endorsedName)\n ? value.approver\n ? \"Approved\"\n : \"Not Approved\"\n : null,\n // Determine the capability based on stringVal.\n capability:\n _.stringVal === constantData.characters.m\n ? constantData.competencyName\n : _.stringVal === constantData.characters.p\n ? constantData.proficiencyName\n : constantData.knowledgeName,\n }))\n .filter((_) => _.stringVal !== constantData.characters.n);\n\n // If the processed data name matches \"personName\", push to personData, else to genericAttributeHaveSkillData.\n if (value.name === constantData.personName) {\n personData.push(mapData);\n } else {\n genericAttributeData.push(mapData);\n }\n }\n })\n );\n\n // Flatten and set the processed data to their respective states or storage locations.\n setDataHaveSkill(personData.flat(2));\n setGenericAttributeHaveSkillData(genericAttributeData.flat(2));\n };\n\n // Processes data related to the skills needed by people.\n const processNeedSkillData = async (personPeople, categories) => {\n // For each person, fetch their job matches concurrently.\n // Flatten the resulting array three levels deep.\n const managedPeopleJobMatches = (\n await Promise.all(\n personPeople.map((item) =>\n JobService.getManagedPeopleJobMatches(item.personB.email)\n )\n )\n ).flat(3);\n\n // Filter out jobs that are not part of the predefined job type list.\n const filteredJobs = managedPeopleJobMatches.filter((item) =>\n constantData.jobTypeList.includes(item.jobType)\n );\n\n // Process the job details for the filtered jobs.\n const jobDetails = await processJobDetailData(categories, filteredJobs);\n\n // Reduce the job details to create a list of processed jobs, mapping each job's stringVal\n // to its respective 'need' value.\n const processedJobs = jobDetails.reduce((a, b) => {\n if (b.stringVal === constantData.characters.m) {\n b.need = constantData.requiredName;\n // Add the processed job to the accumulator.\n a.push(b);\n } else if (b.stringVal === constantData.characters.p) {\n b.need = constantData.desirableName;\n // Add the processed job to the accumulator.\n a.push(b);\n } else {\n b.need = constantData.empty;\n // Add the processed job to the accumulator.\n a.push(b);\n }\n return a;\n }, []);\n\n const processedData = processDetail(processedJobs, categories);\n const genericAttributeData =\n processGenericAttributeNeedSkillData(processedData);\n // Update the state or storage with the processed jobs.\n setDataNeedSkill(processedData);\n setGenericAttributeNeedSkillData(genericAttributeData);\n };\n\n const processDetail = (data, categories) =>\n data.map((element) => {\n let findCategory = categories?.find(\n (item) => item.name === element?.category\n );\n if (!findCategory) {\n findCategory = {\n colour: constantData.colors.type3,\n description: constantData.empty,\n };\n }\n let findSubCategory = findCategory?.subCategories?.find(\n (item) => item.name === element?.subCategory\n );\n if (!findSubCategory) {\n findSubCategory = {\n colour: constantData.colors.type4,\n description: constantData.empty,\n };\n }\n const findSkill = findSubCategory?.skills?.find(\n (item) => item.name === element?.skill\n );\n const findLevel = findSkill?.levels?.find(\n (item) => item.level === element?.level\n );\n\n return {\n categoryDetail: {\n colour: findCategory?.colour,\n description: findCategory?.description,\n },\n subCategoryDetail: {\n skillColour: findSubCategory?.skillColour,\n colour: findSubCategory?.colour,\n description: findSubCategory?.description,\n },\n skillDetail: {\n description: findSkill?.description,\n },\n levelDetail: {\n description: findLevel?.description,\n },\n ...element,\n };\n });\n\n // Processes all relevant data for skills.\n // This function fetches a set of initial data, and then prepares and processes\n // two types of skill-related data: haveSkill and needSkill.\n const processAllData = async () => {\n try {\n // Concurrently fetch multiple sets of data using Promise.all for improved performance.\n const [\n personPeople,\n personProfile,\n profileVersion,\n skillProfile,\n lorProfile,\n categories,\n ] = await Promise.all([\n PersonService.getPersonMyPeoples(),\n PersonService.getPersonMyProfile(),\n ProfileService.getMyProfileVersions(),\n ProfileService.getMySkillPofiles(),\n ProfileService.getMyLorPofiles(),\n CategoryAPI.getCategories(),\n ]);\n\n // Construct a new data entry based on the fetched personal profile and related data.\n const newDataEntry = {\n personB: personProfile,\n profileVersion,\n skillProfile,\n lorProfile,\n };\n\n setCategories(categories);\n // Append the new data entry to the existing list of personPeople for processing \"haveSkill\" data.\n const prepareDataHaveSkill = [...personPeople, newDataEntry];\n\n // Use the original personPeople data for processing \"needSkill\" data since no modifications are needed.\n const prepareDataNeedSkill = personPeople;\n\n // Concurrently process \"haveSkill\" and \"needSkill\" data for better performance.\n await Promise.all([\n processHaveSkillData(prepareDataHaveSkill, categories),\n processNeedSkillData(prepareDataNeedSkill, categories),\n ]);\n } catch (error) {\n // Log the error if fetching fails\n console.error(\"Failed to fetch action plan data:\", error);\n\n // Optionally, you can set an error state here if you'd like to display an error message to users.\n }\n };\n\n const generateTableSkillCategory = (dataFilterSkill) => {\n const categoryColors = dataFilterSkill.categoryColors;\n const data = dataFilterSkill.data;\n // Destructure for easier access.\n const { categoryName } = constantData;\n\n // Use a single reduce function to categorize and structure the data.\n const groupedData = data.reduce((acc, item) => {\n // Extract keys for categorization.\n const categoryKey = item[categoryName]; \n\n // If the category does not exist, initialize it.\n if (!acc[categoryKey]) {\n acc[categoryKey] = {\n values: [],\n };\n }\n\n // Push the item into the category values.\n acc[categoryKey].values.push(item);\n return acc;\n }, {});\n\n // Extract keys from groupedData\n const groupedKeys = Object.keys(groupedData);\n\n let orderedCats = OrderCategory.map((key) =>\n groupedKeys.find((e) => e.name === key)\n );\n\n let orderedKeys = [];\n if (orderedCats.filter(it => it == undefined).length > 0){\n orderedKeys = [...groupedKeys];\n }else{\n //Filter and reorder the keys based on OrderCategory\n orderedKeys = OrderCategory.filter((key) =>\n groupedKeys.includes(key)\n );\n }\n\n // Construct the ordered grouped data\n const orderedGroupedData = orderedKeys.map((key) => [\n key,\n groupedData[key],\n ]);\n\n const resultData = {\n name: constantData.categoryTitleName,\n meta: { levelResponsibility: LevelResponsibility },\n description: constantData.empty,\n styles: {\n tableHeaderColor: constantData.colors.type1,\n tableHeaderBackgroundColor: constantData.colors.type2,\n },\n subCategories: orderedGroupedData.map(\n ([categoryKey, { values: categoryValues }]) => {\n const { categoryDetail, subCategoryDetail } = categoryValues[0];\n const categoryColor = categoryColors.find(it => it.category == categoryKey);\n return {\n name: categoryKey,\n meta: { levelResponsibility: LevelResponsibility },\n description: categoryDetail.description,\n styles: {\n cateColour: categoryDetail.colour,\n skillColour: subCategoryDetail.skillColour,\n colour: subCategoryDetail.colour || \"\",\n },\n people: categoryValues,\n bold: categoryColor ? categoryColor.bold : \"#69849c\",\n tint: categoryColor ? categoryColor.tint : \"#ecf0f5\"\n };\n }\n ),\n };\n\n return resultData;\n };\n\n const generateTreeMap = (skills) => {\n // Group the skills by the given category name\n const groupByCate = groupBy(skills, constantData.categoryName);\n\n // Map each group to the desired object structure\n return Object.keys(groupByCate).map((item) => ({\n label: item,\n value: groupByCate[item].length,\n description: groupByCate[item][0]?.categoryDetail?.description,\n colour: groupByCate[item][0]?.categoryDetail?.colour,\n hoverColour: groupByCate[item][0]?.subCategoryDetail?.colour,\n }));\n };\n\n // Generates bar data for given input.\n const generateBar = (data) => {\n // Use reduce to create an object where the keys are the skillCodeLevel\n // and the values are their respective counts.\n const groupedData = data.reduce((acc, item) => {\n const skillCodeLevel = `${item.lorCode} - ${item.level}`;\n\n // If the skillCodeLevel doesn't exist in the accumulator, initialize it.\n if (!acc[skillCodeLevel]) {\n acc[skillCodeLevel] = 0;\n }\n\n // Increment the count for the skillCodeLevel.\n acc[skillCodeLevel]++;\n\n return acc;\n }, {});\n\n // Convert the grouped data object to an array of {label, value} objects.\n const aggregatedData = Object.entries(groupedData).map(\n ([label, value]) => ({\n label,\n value,\n })\n );\n\n // Sort the data in descending order based on their values (counts).\n aggregatedData.sort((a, b) => b.value - a.value);\n\n return {\n maxCount: Math.max(...aggregatedData.map((item) => item.value)) + 1, // Calculate the maximum count\n source: aggregatedData,\n };\n };\n\n const generateTreeSelect = (data, name) =>\n // Using Object.entries to get both key and value of each entry in the data object\n Object.entries(data)\n .map(([category, itemsArray], categoryIdx) => {\n // Generating a Set to deduplicate the values based on the 'name' property\n // Then spread the Set back into an array for easy mapping\n const uniqueValues = [...new Set(itemsArray.map((item) => item[name]))];\n const rootData = JSON.stringify({\n isRoot: true,\n value: category,\n });\n return {\n title: category,\n value: rootData,\n key: rootData,\n\n // For each unique value, we map it to generate the 'children' array\n children: uniqueValues\n .map((uniqueValue, valueIdx) => {\n const childData = JSON.stringify({\n isRoot: false,\n value: uniqueValue,\n });\n return {\n // Fetching the 'text' property directly from the original itemsArray for each child\n title: itemsArray[valueIdx].text,\n value: childData,\n key: childData,\n };\n })\n .sort((a, b) => a.title.localeCompare(b.title)),\n };\n })\n .sort((a, b) => a.title.localeCompare(b.title));\n\n // Filter by Requirement Name\n const optionRequirement = useMemo(() => {\n if (dataNeedSkill.length === 0) return [];\n\n // Deduplicate the combined array based on the fullName.\n const uniqueSkills = distinctArray(\n dataNeedSkill,\n (itemA, itemB) => itemA.jobName === itemB.jobName\n );\n\n return [\n ...new Set(\n uniqueSkills.map((item) => ({\n label: item.jobName,\n value: item.jobName,\n }))\n ),\n ].sort((a, b) => a.label.localeCompare(b.label));\n }, [dataNeedSkill]);\n\n // Filter by Requirement Type\n const optionType = useMemo(() => {\n if (dataNeedSkill.length === 0) return [];\n\n // Deduplicate the combined array based on the fullName.\n const uniqueSkills = distinctArray(\n dataNeedSkill,\n (itemA, itemB) => itemA.need === itemB.need\n );\n\n return [\n ...new Set(\n uniqueSkills.map((item) => ({\n label: item.need,\n value: item.need,\n }))\n ),\n ].sort((a, b) => a.label.localeCompare(b.label));\n }, [dataNeedSkill]);\n\n // Filter by Person Name\n const optionsName = useMemo(() => {\n if (dataHaveSkill.length === 0) return [];\n\n // Deduplicate the combined array based on the fullName.\n const uniqueSkills = distinctArray(\n dataHaveSkill,\n (itemA, itemB) => itemA.fullName === itemB.fullName\n );\n\n const groupedData = groupBy(uniqueSkills, constantData.fullName);\n\n return Object.keys(groupedData)\n .map((item) => ({\n label: item,\n value: item,\n }))\n .sort((a, b) => a.label.localeCompare(b.label));\n }, [dataHaveSkill]);\n\n // Filter Profile Status\n const optionProfileStatus = useMemo(() => {\n if (dataHaveSkill.length === 0) return [];\n\n const temp = dataHaveSkill.map((item) => ({\n capability: `${item.capability} (${item.approvedText})`,\n profileStatus: item.profileStatus,\n text: `${item.capability} (${item.approvedText})`,\n }));\n // Deduplicate the combined array based on the capability.\n const uniqueArray = distinctArray(\n temp,\n (itemA, itemB) => itemA.capability === itemB.capability\n );\n\n // Generate the tree select structure.\n return generateTreeSelect(\n groupBy(uniqueArray, constantData.profileStatusName),\n constantData.capabilityName\n );\n }, [dataHaveSkill]);\n\n // Filter Level of Skill Have\n const optionLorSkillLevel = useMemo(() => {\n // Exit early if there's no data to process.\n if (dataHaveSkill.length === 0 && dataNeedSkill.length === 0) return [];\n\n // Combine and transform both dataHaveSkill and dataNeedSkill arrays.\n const combinedSkills = [...dataHaveSkill, ...dataNeedSkill].map((item) => ({\n skillCode: `${item.skillCode} - ${item.level}`,\n level: `Level ${item.level}`,\n text: `${item.skillCode} - ${item.level}`,\n }));\n\n // Deduplicate the combined array based on the skillCode.\n const uniqueSkills = distinctArray(\n combinedSkills,\n (itemA, itemB) => itemA.skillCode === itemB.skillCode\n );\n\n // Generate the tree select structure.\n return generateTreeSelect(\n groupBy(uniqueSkills, constantData.levelName),\n constantData.skillCode\n );\n }, [dataHaveSkill, dataNeedSkill]);\n\n // Filter Level of Generic Attribute Have\n const optionGenericAttribute = useMemo(() => {\n // Exit early if there's no data to process.\n if (\n dataNeedSkill.length === 0 &&\n genericAttributeHaveSkillData.length === 0\n )\n return [];\n\n const tempUniq = _.uniq(dataNeedSkill.map((item) => item.jobLor).flat(2));\n // Combine and transform both dataHaveSkill and dataNeedSkill arrays.\n const combinedSkills = [...tempUniq, ...genericAttributeHaveSkillData].map(\n (item) => ({\n lorCode: `${item.lorCode} - ${item.level}`,\n level: `Level ${item.level}`,\n text: `${item.lorCode} - ${item.level}`,\n })\n );\n\n // Deduplicate the combined array based on the skillCode.\n const uniqueSkills = distinctArray(\n combinedSkills,\n (itemA, itemB) => itemA.lorCode === itemB.lorCode\n );\n\n // Generate the tree select structure.\n return generateTreeSelect(\n groupBy(uniqueSkills, constantData.levelName),\n constantData.lorCodeName\n );\n }, [genericAttributeHaveSkillData, dataNeedSkill]);\n\n // Data Filter => Ref By Data\n const dataFilterHaveSkill = useMemo(() => {\n const resultData = {\n data: [],\n categoryColors: [],\n genericAttribute: [],\n };\n\n if (dataHaveSkill.length) {\n resultData.data = dataHaveSkill.filter((item) => {\n // If selectedName is populated and the condition is not met, filter out\n if (selectedName.length > 0 && !selectedName.includes(item.fullName)) {\n return false;\n }\n\n // If selectedProfile is populated and the condition is not met, filter out\n if (selectedProfile.length > 0) {\n const isFound = selectedProfile\n .map((_) => JSON.parse(_))\n .some((_) => {\n if (_.isRoot) {\n return item.profileStatus === _.value;\n } else {\n return `${item.capability} (${item.approvedText})` === _.value;\n }\n });\n if (!isFound) {\n return false;\n }\n }\n\n // If selectedLorSkill is populated and the condition is not met, filter out\n if (selectedLorSkill.length > 0) {\n const isFound = selectedLorSkill\n .map((_) => JSON.parse(_))\n .some((_) => {\n if (_.isRoot) {\n return `Level ${item.level}` === _.value;\n } else {\n return `${item.skillCode} - ${item.level}` === _.value;\n }\n });\n if (!isFound) {\n return false;\n }\n }\n\n // If all conditions are met or not applicable, include the item\n return true;\n });\n\n dataHaveSkill.forEach((item) => {\n if (resultData.categoryColors.find(it => it.category == item.category)) {\n return false;\n }\n\n const category = categories.find(it => it.name == item.category);\n if (category == null){\n return false;\n }\n\n if (category.subCategories.length == 0){\n return false;\n }\n\n const subCategory = category.subCategories[0];\n\n resultData.categoryColors.push({\n category : category.name,\n bold : category.colour,\n tint: subCategory.skillColour\n })\n });\n }\n\n if (genericAttributeHaveSkillData.length) {\n resultData.genericAttribute = genericAttributeHaveSkillData.filter(\n (item) => {\n // If selectedName is populated and the condition is not met, filter out\n if (\n selectedName.length > 0 &&\n !selectedName.includes(item.fullName)\n ) {\n return false;\n }\n\n // If selectedGeneric is populated and the condition is not met, filter out\n if (selectedGeneric.length > 0) {\n const isFound = selectedGeneric\n .map((_) => JSON.parse(_))\n .some((_) => {\n if (_.isRoot) {\n return `Level ${item.level}` === _.value;\n } else {\n return `${item.lorCode} - ${item.level}` === _.value;\n }\n });\n if (!isFound) {\n return false;\n }\n }\n\n // If all conditions are met or not applicable, include the item\n return true;\n }\n );\n }\n return resultData;\n }, [\n dataHaveSkill,\n genericAttributeNeedSkillData,\n selectedLorSkill,\n selectedGeneric,\n selectedName,\n selectedProfile,\n ]);\n\n // useMemo hook to memoize the computation of the dashboard tree map data\n // This ensures that the tree map data is only recalculated if dataFilter changes\n const dashboardTreeMapHaveSkill = useMemo(\n () => generateTreeMap(dataFilterHaveSkill.data),\n [dataFilterHaveSkill.data]\n );\n\n const dashboardTableSkillCategoryHaveSkill = useMemo(\n () => generateTableSkillCategory(dataFilterHaveSkill) ?? {},\n [dataFilterHaveSkill.data]\n ); // Recompute only if dataFilter changes\n\n const dashboardTableHaveSkill = useMemo(() => {\n const resultData = {\n generic: [],\n professional: [],\n };\n\n if (dataFilterHaveSkill.data.length > 0) {\n // Deep clone\n resultData.professional = deepClone(dataFilterHaveSkill.data);\n }\n\n return resultData;\n }, [dataFilterHaveSkill.data]);\n\n // Use useMemo to ensure we only recompute the data when `dataFilter` changes.\n const dashboardBarHaveSkill = useMemo(\n () =>\n dataFilterHaveSkill.genericAttribute.length > 0\n ? generateBar(dataFilterHaveSkill.genericAttribute)\n : {},\n [dataFilterHaveSkill.genericAttribute]\n );\n\n // Data Filter => Ref By Data\n const dataFilterSkillWeNeed = useMemo(() => {\n const resultData = {\n data: [],\n categoryColors: [],\n genericAttribute: [],\n };\n if (dataNeedSkill.length) {\n resultData.data = dataNeedSkill.filter((item) => {\n // If selectedRequirement is populated and the condition is not met, filter out\n if (\n selectedRequirement.length > 0 &&\n !selectedRequirement.includes(item.jobName)\n ) {\n return false;\n }\n\n // If selectedType is populated and the condition is not met, filter out\n if (selectedType.length > 0 && !selectedType.includes(item.need)) {\n return false;\n }\n\n //If selectedLorSkill is populated and the condition is not met, filter out\n if (selectedLorSkill.length > 0) {\n const isFound = selectedLorSkill\n .map((_) => JSON.parse(_))\n .some((_) => {\n if (_.isRoot) {\n return `Level ${item.level}` === _.value;\n } else {\n return `${item.skillCode} - ${item.level}` === _.value;\n }\n });\n if (!isFound) {\n return false;\n }\n }\n\n // If all conditions are met or not applicable, include the item\n return true;\n });\n\n dataNeedSkill.forEach((item) => {\n if (resultData.categoryColors.find(it => it.category == item.category)) {\n return false;\n }\n\n const category = categories.find(it => it.name == item.category);\n if (category == null){\n return false;\n }\n\n if (category.subCategories.length == 0){\n return false;\n }\n\n const subCategory = category.subCategories[0];\n\n resultData.categoryColors.push({\n category : category.name,\n bold : category.colour,\n tint: subCategory.skillColour\n })\n });\n }\n\n if (genericAttributeNeedSkillData.length) {\n resultData.genericAttribute = genericAttributeNeedSkillData.filter(\n (item) => {\n //If selectedGeneric is populated and the condition is not met, filter out\n if (selectedGeneric.length > 0) {\n const isFound = selectedGeneric\n .map((_) => JSON.parse(_))\n .some((_) => {\n if (_.isRoot) {\n return `Level ${item.level}` === _.value;\n } else {\n return `${item.lorCode} - ${item.level}` === _.value;\n }\n });\n\n if (!isFound) {\n return false;\n }\n }\n\n // If all conditions are met or not applicable, include the item\n return true;\n }\n );\n }\n\n return resultData;\n }, [\n dataNeedSkill,\n genericAttributeNeedSkillData,\n selectedLorSkill,\n selectedGeneric,\n selectedRequirement,\n selectedType,\n ]);\n\n const dashboardTableSkillCategoryNeedSkill = useMemo(\n () => generateTableSkillCategory(dataFilterSkillWeNeed) ?? {},\n [dataFilterSkillWeNeed.data]\n ); // Recompute only if dataFilter changes\n\n // useMemo hook to memoize the computation of the dashboard tree map data\n // This ensures that the tree map data is only recalculated if dataFilter changes\n const dashboardTreeMapNeedSkill = useMemo(\n () => generateTreeMap(dataFilterSkillWeNeed.data),\n [dataFilterSkillWeNeed.data]\n );\n\n const dashboardTableNeedSkill = useMemo(() => {\n const resultData = {\n generic: [],\n professional: [],\n };\n\n if (dataFilterSkillWeNeed.data.length > 0) {\n // Deep clone\n resultData.professional = deepClone(dataFilterSkillWeNeed.data);\n }\n\n return resultData;\n }, [dataFilterSkillWeNeed.data]);\n\n // Use useMemo to ensure we only recompute the data when `dataFilter` changes.\n const dashboardBarNeedSkill = useMemo(\n () =>\n dataFilterSkillWeNeed.genericAttribute.length > 0\n ? generateBar(dataFilterSkillWeNeed.genericAttribute)\n : {},\n [dataFilterSkillWeNeed.genericAttribute]\n );\n\n useEffect(() => {\n // This variable helps us ensure that we don't call `setIsContentLoaded` if the component has unmounted before our asynchronous operation completes.\n let isMounted = true;\n\n processAllData().then(() => {\n if (isMounted) {\n // Only set the loading state to false if the component is still mounted\n setIsContentLoaded(true);\n }\n });\n\n // The cleanup function for the effect\n return () => {\n // If the component unmounts, we set isMounted to false to prevent any state updates after unmounting.\n isMounted = false;\n };\n }, []);\n\n // If content is still loading, display a spinner.\n if (!isContentLoaded) {\n return \n \n \n \n \n \n \n Skills We Have\n \n \n \n Skills We Need\n \n
\n \n \n \n \n \n
\n \n \n \n \n \n Generic Attributes{\" \"}\n <span className=\"vs-h-sm-h\">(Skill We Have)</span>\n \n \n \n Generic Attributes{\" \"}\n <span className=\"vs-h-sm-h\">(Skill We Need)</span>\n \n
\n \n \n \n
\n \n \n );\n};\n\nexport { SkillsComparison };\n","import CustomSelect from \"../global/customselect\";\nimport {\n FilterTwoTone,\n FilterFilled,\n CloseCircleOutlined,\n} from \"@ant-design/icons\";\nimport { Row, Col, Button, Tag } from \"antd\";\nimport React, { useMemo, useState, useCallback } from \"react\";\nimport styled from \"styled-components\";\n\nconst WrapperFilter = styled.div`\n .anticon {\n vertical-align: 0.125em;\n }\n .card-c {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n padding: 35px;\n\n border: 1px solid rgba(255, 255, 255, 0.25);\n border-radius: 20px;\n background-color: rgba(255, 255, 255, 0.45);\n box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);\n\n backdrop-filter: blur(15px);\n }\n\n .slide {\n transition: all 0.5s ease-in-out;\n transform-origin: left top;\n animation: slide 0.5s;\n @keyframes slide {\n 0% {\n transform: scaleY(0);\n }\n 100% {\n transform: scaleY(1);\n }\n }\n }\n\n .mt-20 {\n margin-top: 20px;\n }\n .mt-10 {\n margin-top: 10px;\n }\n .mr-10 {\n margin-right: 10px;\n }\n .font-small {\n font-size: 13px;\n }\n\n .ml-5-c {\n margin-left: 5px;\n }\n .mb-10 {\n margin-bottom: 5px;\n }\n\n .rotate-90 {\n transform: rotate(90deg);\n transition: transform 0.5s;\n }\n .rotate-0 {\n transform: rotate(0deg);\n transition: transform 0.5s;\n }\n\n @media (max-width: 1280px) {\n .col-sm-cm-m {\n max-width: 100% !important;\n flex: 0 0 50%;\n }\n }\n @media (max-width: 768px) {\n .col-sm-cm-m {\n max-width: 100% !important;\n flex: 0 0 100%;\n }\n .sm-mt-10 {\n margin-top: 10px;\n }\n }\n`;\n// Helper function to render tags based on the object and its color.\nconst renderTags = (obj, color, onCloseClicked, isTree = false) => {\n return obj?.value?.map((item, index) => (\n \n {/* Check if item is a string or needs to be parsed */}\n {isTree ? JSON.parse(item).value : item} \n onCloseClicked(obj, item)}\n style={{ color: \"darkred\" }}\n />\n \n ));\n};\n\nconst renderFilter = (Component, isExpand) => (\n \n \n {/* Rest of the JSX structure where you'll use your button */}\n setIsExpand((state) => !state)}\n >\n Filter\n \n \n {/* Rest of the JSX structure where you'll use your renderTags */}\n \n {/* Render tags for each filter type */}\n {renderTags(objName, \"magenta\", onCloseClicked)}\n {renderTags(objProfile, \"geekblue\", onCloseClicked)}\n {renderTags(objSkillGap, \"red\", onCloseClicked)}\n {renderTags(objSkillType, \"cyan\", onCloseClicked)}\n {renderTags(objRequirementType, \"purple\", onCloseClicked)}\n \n \n \n {/* Rest of the JSX structure where you'll use your FilterComponent */}\n \n \n );\n};\n\nexport default SkillGapsFilters;\n","import CategoryAPI from \"../../../../common/api/service/CategoryService\";\nimport JobService from \"../../../../common/api/service/JobService\";\nimport PersonService from \"../../../../common/api/service/PersonService\";\nimport ProfileService from \"../../../../common/api/service/ProfileService\";\nimport { LevelResponsibility } from \"../../components/config/mockdata/levels\";\nimport { OrderCategory } from \"../../components/config/mockdata/order\";\nimport SkillGapsFilters from \"../../components/filters/skillgaps\";\nimport { SkillGapTable } from \"../../components/table\";\nimport { Typography, Empty } from \"antd\";\nimport { groupBy } from \"lodash\";\nimport React, { useState, useEffect, useMemo } from \"react\";\nimport { Spinner } from \"reactstrap\";\nimport styled from \"styled-components\";\n\nconst { Title } = Typography;\n\nconst DivCenter = ({ Component }) => {\n return (\n \n \n );\n};\n\nconst Wrapper = styled.div`\n padding: 10px 30px;\n flex-wrap: wrap !important;\n justify-content: center;\n align-items: center;\n width: 100%;\n`;\n\nconst Container = styled.div`\n border-width: 0.5px;\n padding: 20px 30px;\n border-color: gainsboro;\n border-style: solid;\n border-radius: 10px;\n`;\n\n// Constant Data\nconst constantData = {\n titleLevel: 5,\n empty: \"\",\n stringName: \"string\",\n skillGapName: \"skillGap\",\n jobNeedName: \"jobNeed\",\n profileStatusName: \"profileStatus\",\n desirableName: \"Desirable\",\n requiredName: \"Required\",\n fullName: \"fullName\",\n requirementTypes: [\"Current\", \"Future\"],\n competencyName: \"Competency\",\n knowledgeName: \"Knowledge\",\n proficiencyName: \"Proficiency\",\n categoryName: \"category\",\n subCategoryName: \"subCategory\",\n levelName: \"level\",\n skillName: \"skill\",\n NoName: \"No\",\n GapName: \"Gap\",\n noGapName: \"no gap\",\n minorName: \"Minor\",\n majorName: \"Major\",\n characters: {\n m: \"M\",\n p: \"P\",\n na: \"NA\",\n },\n};\n\n// Define the function to compute skill gap based on the skill profile.\nconst getSkillGap = (skillProfile) => {\n if (!skillProfile) return `${constantData.majorName} ${constantData.GapName}`;\n const { m, p, na } = constantData.characters;\n if (skillProfile.stringVal === m)\n return `${constantData.NoName} ${constantData.GapName}`;\n if (skillProfile.stringVal === p && parseFloat(skillProfile.numericVal) < 1)\n return `${constantData.minorName} ${constantData.GapName} - ${constantData.proficiencyName}`;\n if (skillProfile.stringVal === na)\n return `${constantData.minorName} ${constantData.GapName} - ${constantData.proficiencyName}`;\n return `${constantData.majorName} ${constantData.GapName}`;\n};\n\nfunction SkillGaps() {\n // Data\n const [data, setData] = useState([]);\n const [isContentLoaded, setIsContentLoaded] = useState(false);\n const [isDefaultValue, setIsDefaultValue] = useState(false);\n const [isNoGap, setIsNoGap] = useState(true);\n // Selection\n const [selectedSkillType, setSelectedSkillType] = useState([]);\n const [selectedSkillGap, setSelectedSkillGap] = useState([]);\n const [selectedProfile, setSelectedProfile] = useState([]);\n const [selectedName, setSelectedName] = useState([]);\n const [selectedRequirement, setSelectedRequirement] = useState([]);\n\n // Fetch people and process\n const processJobDetailData = async (item, persons, categories) => {\n const availableSkillCodes = categories\n ? categories.flatMap((category, index) => {\n return category.subCategories.flatMap((subCategory, index) => {\n return subCategory.skills\n .filter((it) => !it.isHidden)\n .flatMap((skill, index) => {\n return skill.skillsCode;\n });\n });\n })\n : [];\n\n const person = persons.find((person) => person.id === item.personId);\n const skillVersions =\n person.version_m ||\n (await ProfileService.getManagedPeopleProfileVersions(person.email));\n\n const skillVersion = skillVersions && skillVersions.length > 0 ? skillVersions[0] : null;\n\n const [job, jobSkills] = await Promise.all([\n JobService.getJob(item.jobId),\n JobService.getJobSkillProfiles(item.jobId)\n ]);\n\n let skillsProfile = [];\n\n const [skillsProfileSelfAssessed] = await Promise.all([\n person.profile_m\n ? ProfileService.getMySkillPofiles(skillVersion ? skillVersion.sfiaVersion : null, skillVersion ? skillVersion.version : null, \"Self Assessed\")\n : ProfileService.getManagedPeopleSkillPofiles(\n person.email,\n skillVersion ? skillVersion.sfiaVersion : null, \n skillVersion ? skillVersion.version : null,\n \"Self Assessed\"\n )]);\n\n if (skillsProfileSelfAssessed && skillsProfileSelfAssessed.filter(it => availableSkillCodes.includes(it.skillCode)).length > 0){\n skillsProfile.push(...skillsProfileSelfAssessed.filter(it => availableSkillCodes.includes(it.skillCode)));\n }\n\n const [skillsProfileEndorsed] = await Promise.all([\n person.profile_m\n ? ProfileService.getMySkillPofiles(skillVersion ? skillVersion.sfiaVersion : null, skillVersion ? skillVersion.version : null, \"Endorsed\")\n : ProfileService.getManagedPeopleSkillPofiles(\n person.email,\n skillVersion ? skillVersion.sfiaVersion : null, \n skillVersion ? skillVersion.version : null,\n \"Endorsed\"\n )]);\n \n if (skillsProfileEndorsed && skillsProfileEndorsed.filter(it => availableSkillCodes.includes(it.skillCode)).length > 0){\n skillsProfile.push(...skillsProfileEndorsed.filter(it => availableSkillCodes.includes(it.skillCode)));\n }\n\n return jobSkills\n .filter(it => availableSkillCodes.includes(it.skillCode))\n .map((jobSkill) => {\n const findCategory = categories.find(\n (item) => item.name === jobSkill.category\n );\n const findSubCategory = findCategory.subCategories.find(\n (item) => item.name === jobSkill.subCategory\n );\n const findSkill = findSubCategory.skills.find(\n (item) => item.name === jobSkill.skill\n );\n const findLevel = findSkill.levels.find(\n (item) => item.level === jobSkill.level\n );\n\n const getJobNeed = (val) => {\n if (val === constantData.characters.m) {\n return constantData.requiredName;\n } else if (val === constantData.characters.p) {\n return constantData.desirableName;\n } else {\n return constantData.empty;\n }\n };\n\n const matchedSkillProfile = skillsProfile.find(\n (skill) =>\n skill.level === jobSkill.level &&\n jobSkill.skillCode === skill.skillCode\n );\n\n if (matchedSkillProfile) {\n const { m, p } = constantData.characters;\n matchedSkillProfile.capability =\n {\n [m]: constantData.competencyName,\n [p]: constantData.proficiencyName,\n }[matchedSkillProfile.stringVal] || constantData.knowledgeName;\n }\n\n const selfAssessedMatchedSkillProfile = skillsProfile.find(\n (skill) =>\n skill.level === jobSkill.level &&\n jobSkill.skillCode === skill.skillCode && \n skill.profileType == \"Self Assessed\"\n );\n\n if (selfAssessedMatchedSkillProfile) {\n const { m, p } = constantData.characters;\n selfAssessedMatchedSkillProfile.capability =\n {\n [m]: constantData.competencyName,\n [p]: constantData.proficiencyName,\n }[selfAssessedMatchedSkillProfile.stringVal] || constantData.knowledgeName;\n }\n\n const endorsedMatchedSkillProfile = skillsProfile.find(\n (skill) =>\n skill.level === jobSkill.level &&\n jobSkill.skillCode === skill.skillCode && \n skill.profileType == \"Endorsed\"\n );\n\n if (endorsedMatchedSkillProfile) {\n const { m, p } = constantData.characters;\n endorsedMatchedSkillProfile.capability =\n {\n [m]: constantData.competencyName,\n [p]: constantData.proficiencyName,\n }[endorsedMatchedSkillProfile.stringVal] || constantData.knowledgeName;\n }\n\n return {\n category: findCategory.name,\n categoryDetail: {\n colour: findCategory.colour,\n description: findCategory.description,\n },\n subCategory: jobSkill.subCategory,\n subCategoryDetail: {\n skillColour: findSubCategory.skillColour,\n colour: findSubCategory.colour,\n description: findSubCategory.description,\n },\n skill: jobSkill.skill,\n skillDetail: {\n description: findSkill.description,\n },\n skillCode: jobSkill.skillCode,\n level: jobSkill.level,\n levelDetail: {\n description: findLevel.description,\n },\n jobNeed: getJobNeed(jobSkill.stringVal),\n jobName: job.name,\n jobRef: job.reference,\n jobType: item.jobType,\n fullName: `${person.firstName} ${person.lastName}`,\n position: person.position,\n email: person.email,\n jobSkill: jobSkill,\n profileStatus: !matchedSkillProfile\n ? \"Not Applicable - No Skill\"\n : matchedSkillProfile.profileType, \n skillGap: getSkillGap(matchedSkillProfile),\n matchedSkillProfile: matchedSkillProfile,\n selfAssessedProfileStatus: !selfAssessedMatchedSkillProfile\n ? \"Not Applicable - No Skill\"\n : selfAssessedMatchedSkillProfile.profileType, \n selfAssessedSkillGap: getSkillGap(selfAssessedMatchedSkillProfile),\n selfAssessedMatchedSkillProfile: selfAssessedMatchedSkillProfile,\n endorsedProfileStatus: !endorsedMatchedSkillProfile\n ? \"Not Applicable - No Skill\"\n : endorsedMatchedSkillProfile.profileType, \n endorsedSkillGap: getSkillGap(endorsedMatchedSkillProfile),\n endorsedMatchedSkillProfile: endorsedMatchedSkillProfile,\n };\n });\n };\n\n // Fetch data and process\n const processAllData = async () => {\n try {\n // Fetch the initial data.\n const [\n personPeople,\n personProfile,\n profileVersion,\n jobMatches,\n categories,\n ] = await Promise.all([\n PersonService.getPersonMyPeoples(),\n PersonService.getPersonMyProfile(),\n ProfileService.getMyProfileVersions(),\n JobService.getMyJobMatches(),\n CategoryAPI.getCategories(),\n ]);\n // Filter matches based on predefined job types.\n const filterMatches = (match) =>\n constantData.requirementTypes.includes(match.jobType);\n const validMatches = jobMatches.filter(filterMatches);\n\n // Fetch job matches for associated people.\n const childMatchesPromises = personPeople.map(({ personB }) =>\n JobService.getManagedPeopleJobMatches(personB.email)\n );\n const childMatchesResponses = await Promise.all(childMatchesPromises);\n const childMatches = childMatchesResponses.flat(3).filter(filterMatches);\n\n // Combine main and child matches, and prepare the persons list.\n const combinedMatches = [...childMatches, ...validMatches];\n const persons = [\n ...personPeople.map(({ personB }) => personB),\n { ...personProfile, version_m: profileVersion, profile_m: {} },\n ];\n\n // Flatten the job skill data.\n const resultData = await Promise.all(\n combinedMatches.map((item) =>\n processJobDetailData(item, persons, categories)\n )\n );\n\n setData(resultData.flat(2));\n } catch (error) {\n // Log the error if fetching fails\n console.error(\"Failed to fetch action plan data:\", error);\n\n // Optionally, you can set an error state here if you'd like to display an error message to users.\n }\n };\n\n // Filter Data by No Gap\n const getDataFilterByNoGap = () => {\n if (data.length === 0) return [];\n if (isNoGap) {\n return data.filter(\n (item) => \n item.skillGap.toLowerCase() !== constantData.noGapName ||\n item.selfAssessedSkillGap.toLowerCase() !== constantData.noGapName || \n item.endorsedSkillGap.toLowerCase() !== constantData.noGapName\n );\n }\n return data;\n };\n\n // Filter skill gap option\n const getOptionSkillGap = () => {\n const tempData = getDataFilterByNoGap();\n if (tempData.length === 0) return [];\n return Object.keys(groupBy(tempData, constantData.skillGapName)).map(\n (item) => ({\n value: item,\n label: item,\n })\n );\n };\n\n // Filter skill type option\n const getOptionSkillType = () => {\n const tempData = getDataFilterByNoGap();\n if (tempData.length === 0) return [];\n return Object.keys(groupBy(tempData, constantData.jobNeedName)).map(\n (item) => ({\n value: item,\n label: item,\n })\n );\n };\n\n // Filter Person Profile Type option\n const getOptionProfile = () => {\n const tempData = getDataFilterByNoGap();\n if (tempData.length === 0) return [];\n let profiles = [];\n\n if (tempData.find(it => it.selfAssessedSkillGap.toLowerCase() !== constantData.noGapName)){\n profiles.push({\n value: \"Self Assessed\",\n label: \"Self Assessed\",\n });\n }\n\n if (tempData.find(it => it.endorsedSkillGap.toLowerCase() !== constantData.noGapName)){\n profiles.push({\n value: \"Endorsed\",\n label: \"Endorsed\",\n });\n }\n\n if (tempData.find(it => it.profileStatus == \"Not Applicable - No Skill\")){\n profiles.push({\n value: \"Not Applicable - No Skill\",\n label: \"Not Applicable - No Skill\",\n });\n }\n\n return profiles;\n };\n\n // Filter Person Name option\n const getOptionName = () => {\n const tempData = getDataFilterByNoGap();\n if (tempData.length === 0) return [];\n return Object.keys(groupBy(tempData, constantData.fullName)).map(\n (item) => ({\n value: item,\n label: item,\n })\n );\n };\n\n // Filter Person Profile Type option\n const getOptionRequirement = () => {\n if (constantData.requirementTypes.length === 0) return [];\n\n if (isDefaultValue === false) {\n setSelectedRequirement([constantData.requirementTypes[0]]);\n setIsDefaultValue(true);\n }\n\n return constantData.requirementTypes.map((item) => ({\n value: item,\n label: item,\n }));\n };\n\n // Get All Option\n const options = useMemo(\n () => ({\n names: getOptionName(),\n profiles: getOptionProfile(),\n skillGaps: getOptionSkillGap(),\n requirements: getOptionRequirement(),\n skillType: getOptionSkillType(),\n }),\n [data, isNoGap]\n );\n\n // Data Filter => Data\n const dataFilter = useMemo(() => {\n const tempData = getDataFilterByNoGap();\n if (tempData.length === 0) return [];\n return tempData.filter((entry) => {\n const { jobType, fullName, jobNeed, \n skillGap, selfAssessedSkillGap, endorsedSkillGap,\n profileStatus, selfAssessedProfileStatus, endorsedProfileStatus} = entry;\n\n const isRequirementSelected = !selectedRequirement.length || selectedRequirement.includes(jobType);\n const isSkillGapSelected = !selectedSkillGap.length || \n ((!selectedProfile.length || (selectedProfile.find(it => it == \"Not Applicable - No Skill\") && !selectedProfile.find(it => it == \"Self Assessed\" || it == \"Endorsed\"))) && selectedSkillGap.includes(skillGap)) ||\n ((!selectedProfile.length || selectedProfile.find(it => it == \"Self Assessed\")) && selectedSkillGap.includes(selfAssessedSkillGap)) || \n ((!selectedProfile.length || selectedProfile.find(it => it == \"Endorsed\")) && selectedSkillGap.includes(endorsedSkillGap));\n \n const isProfileSelected = !selectedProfile.length || \n (\n selectedProfile.find(it => it == \"Not Applicable - No Skill\") \n && !selectedProfile.find(it => it == \"Self Assessed\" || it == \"Endorsed\") \n && selectedProfile.includes(profileStatus)\n ) ||\n (\n selectedProfile.find(it => it == \"Self Assessed\") \n && (selectedProfile.includes(selfAssessedProfileStatus) || selfAssessedProfileStatus == \"Not Applicable - No Skill\")\n && (selfAssessedSkillGap != \"No Gap\" || (selectedSkillGap.includes(\"No Gap\") && selfAssessedSkillGap == \"No Gap\"))\n ) || \n (\n selectedProfile.find(it => it == \"Endorsed\") \n && (selectedProfile.includes(endorsedProfileStatus) || endorsedProfileStatus == \"Not Applicable - No Skill\")\n && (endorsedSkillGap != \"No Gap\" || (selectedSkillGap.includes(\"No Gap\") && endorsedSkillGap == \"No Gap\"))\n );\n\n const isNameSelected = !selectedName.length || selectedName.includes(fullName);\n const isSkillType = !selectedSkillType.length || selectedSkillType.includes(jobNeed);\n\n return (\n isRequirementSelected &&\n isSkillGapSelected &&\n isSkillType &&\n isProfileSelected &&\n isNameSelected\n );\n });\n }, [\n data,\n isNoGap,\n selectedRequirement,\n selectedSkillGap,\n selectedSkillType,\n selectedProfile,\n selectedName,\n ]);\n\n // Skills Level By Skills Count (Table) => Data Filter\n const dashboardLevelSkillCountTable = useMemo(() => {\n // If there's no data, immediately return an empty array.\n if (!dataFilter.length) return [];\n\n // Destructure for easier access.\n const { categoryName, subCategoryName, skillName, levelName } =\n constantData;\n\n // Helper function to extract style attributes.\n const extractStyles = (categoryDetail, subCategoryDetail) => ({\n colour: subCategoryDetail?.colour || \"\",\n skillColour: subCategoryDetail?.skillColour || \"\",\n cateColour: categoryDetail?.colour || \"\",\n });\n\n // Use a single reduce function to categorize and structure the data.\n const groupedData = dataFilter.reduce((acc, item) => {\n // Extract keys for categorization.\n const categoryKey = item[categoryName];\n const subCategoryKey = item[subCategoryName];\n const skillKey = item[skillName];\n const levelKey = item[levelName];\n\n // If the category does not exist, initialize it.\n if (!acc[categoryKey]) {\n acc[categoryKey] = {\n values: [],\n subCategories: {},\n };\n }\n\n // Push the item into the category values.\n acc[categoryKey].values.push(item);\n\n // Initialize sub-category if it doesn't exist.\n if (!acc[categoryKey].subCategories[subCategoryKey]) {\n acc[categoryKey].subCategories[subCategoryKey] = {\n values: [],\n skills: {},\n };\n }\n\n // Push the item into sub-category values.\n acc[categoryKey].subCategories[subCategoryKey].values.push(item);\n\n // Initialize skill within sub-category if it doesn't exist.\n if (!acc[categoryKey].subCategories[subCategoryKey].skills[skillKey]) {\n acc[categoryKey].subCategories[subCategoryKey].skills[skillKey] = {\n values: [],\n levels: {},\n };\n }\n\n const currentSkill =\n acc[categoryKey].subCategories[subCategoryKey].skills[skillKey];\n currentSkill.values.push(item);\n\n // Initialize level within skill if it doesn't exist.\n if (!currentSkill.levels[levelKey]) {\n currentSkill.levels[levelKey] = {\n values: [],\n };\n }\n\n // Push the item into skill level values.\n currentSkill.levels[levelKey].values.push(item);\n return acc;\n }, {});\n\n // Extract keys from groupedData\n const groupedKeys = Object.keys(groupedData);\n\n let orderedCats = OrderCategory.map((key) =>\n groupedKeys.find((e) => e.name === key)\n );\n\n let orderedKeys = [];\n if (orderedCats.filter(it => it == undefined).length > 0){\n orderedKeys = [...groupedKeys];\n }else{\n //Filter and reorder the keys based on OrderCategory\n orderedKeys = OrderCategory.filter((key) =>\n groupedKeys.includes(key)\n );\n }\n\n // Construct the ordered grouped data\n const orderedGroupedData = orderedKeys.map((key) => [\n key,\n groupedData[key],\n ]);\n\n // Convert the structured data into the desired output format.\n return orderedGroupedData.map(\n ([categoryKey, { values: categoryValues, subCategories }]) => {\n const { categoryDetail } = categoryValues[0];\n\n return {\n name: categoryKey,\n meta: { levelResponsibility: LevelResponsibility },\n description: categoryDetail.description,\n styles: {\n tableHeaderColor: \"white\",\n tableHeaderBackgroundColor: categoryDetail.colour || \"\",\n },\n subCategories: Object.entries(subCategories).map(\n ([subCategoryKey, { values: subCategoryValues, skills }]) => {\n const { subCategoryDetail } = subCategoryValues[0];\n const styles = extractStyles(categoryDetail, subCategoryDetail);\n\n return {\n name: subCategoryKey,\n description: subCategoryDetail.description,\n ...styles,\n skills: Object.entries(skills).map(\n ([skillKey, { values: skillValues, levels }]) => {\n const firstSkill = skillValues[0];\n\n return {\n name: `${skillKey} (${firstSkill.skillCode})`,\n description: firstSkill.skillDetail.description,\n levels: Object.entries(levels).map(\n ([levelKey, { values: levelValues }]) => ({\n lv: levelKey,\n value: levelValues.length * -1,\n description: levelValues[0].levelDetail.description,\n })\n ),\n people: skillValues.map(\n ({\n fullName,\n email,\n skill,\n skillCode,\n level,\n skillGap,\n selfAssessedSkillGap,\n endorsedSkillGap,\n jobName,\n jobType,\n matchedSkillProfile,\n }) => ({\n fullName,\n email,\n skill,\n skillCode,\n level,\n skillGap,\n selfAssessedSkillGap,\n endorsedSkillGap,\n jobName,\n jobType,\n capability: matchedSkillProfile?.capability,\n ...styles,\n })\n ),\n };\n }\n ),\n };\n }\n ),\n };\n }\n );\n }, [dataFilter]);\n\n useEffect(() => {\n // This variable helps us ensure that we don't call `setIsContentLoaded` if the component has unmounted before our asynchronous operation completes.\n let isMounted = true;\n\n processAllData().then(() => {\n if (isMounted) {\n // Only set the loading state to false if the component is still mounted\n setIsContentLoaded(true);\n }\n });\n\n // The cleanup function for the effect\n return () => {\n // If the component unmounts, we set isMounted to false to prevent any state updates after unmounting.\n isMounted = false;\n };\n }, []);\n\n // If content is still loading, display a spinner.\n if (!isContentLoaded) {\n return \n \n {dashboardLevelSkillCountTable.length > 0 ? (\n <>\n Skills Level By Count \n {dashboardLevelSkillCountTable.map((item, index) => (\n \n \n );\n}\nexport { SkillGaps };","import {\n ActionPlan,\n TeamBuilder,\n SkillsWeHave,\n SkillsWeNeed,\n SkillGaps,\n SkillChange,\n SkillsComparison,\n JobMatch,\n} from \"./pages\";\nimport { Col, Row } from \"antd\";\nimport \"antd/dist/antd.min.css\";\nimport React from \"react\";\nimport { Navigation } from \"react-minimal-side-navigation/lib\";\nimport { Route, Switch } from \"react-router\";\nimport { useRouteMatch, useHistory } from \"react-router-dom\";\nimport { Container } from \"reactstrap\";\n\n/**\n * Functional component `Main` is a wrapper which registers other wrappers.\n * @returns Functional.Component\n */\nfunction TeamAnlytics(props) {\n const { path, url } = useRouteMatch();\n const { push } = useHistory();\n const routes = [\n {\n path: \"/skills/comparison\",\n itemId: \"/SfiaProfile/TeamAnalytics/skills/comparison\",\n title: \"Skills Comparison\",\n element: \n \n {\n push(e.itemId);\n }}\n />\n \n \n \n {routes.map((item, index) => (\n \n {item.element}\n \n ))}\n \n \n \n );\n}\n\n/**\n * Constant which will act as selector and mount containers to DOM.\n * @returns DOM\n */\nexport default TeamAnlytics;\n","import NewAnalytics from \"../../components/trienpont\";\nimport * as authActions from \"../../store/actions/authAction\";\nimport * as contentActions from \"../../store/actions/contentAction\";\nimport * as personActions from \"../../store/actions/personAction\";\nimport { dismisAlert, generateAlert } from \"../../utils/alertUtils\";\nimport { parameterizedString } from \"../../utils/stringUtils\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport \"./../../custom-my-people.css\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nclass TeamAnalytics extends React.Component {\n static displayName = TeamAnalytics.name;\n\n constructor(props) {\n super(props);\n this.connection = null;\n this.state = {\n loading: true,\n contentLoading: true,\n teamAnalytics: null,\n alerts: [],\n };\n\n this.initData = this.initData.bind(this);\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n this.parameterizedString = parameterizedString.bind(this);\n }\n\n componentDidMount() {\n const manageProfileByAdminPopup = localStorage.getItem(\"manageProfileByAdminPopup\") && localStorage.getItem(\"manageProfileByAdminPopup\") == \"TRUE\" ? true : false;\n\n const query = new URLSearchParams(this.props.location.search);\n const email = query.get(\"email\");\n\n if (this.props.language) {\n this.props.onContent.getContentTranslations(this.props.language.id, \"SfiaAll-Menu-SfiaProfileMenu-SfiaManage-Lors-Skills\").then(() => {\n this.setState({ contentLoading: this.props.contentLoading });\n\n if (manageProfileByAdminPopup && !this.props.managedPeople && email) {\n this.props.onPerson.getPersonMyPeopleByEmail(email).then(() => {\n if (!this.props.loading && this.props.personManagedPeople) {\n this.props.onAuth.myPeopleSetManagedRelationship(this.props.personManagedPeople).then(() => {\n if (!this.props.loading) {\n this.initData();\n }\n });\n }\n });\n } else {\n this.initData();\n }\n });\n } else {\n if (manageProfileByAdminPopup && !this.props.managedPeople && email) {\n this.props.onPerson.getPersonMyPeopleByEmail(email).then(() => {\n if (!this.props.loading && this.props.personManagedPeople) {\n this.props.onAuth.myPeopleSetManagedRelationship(this.props.personManagedPeople).then(() => {\n if (!this.props.loading) {\n this.initData();\n }\n });\n }\n });\n } else {\n this.initData();\n }\n }\n }\n\n componentWillUnmount() {\n this.setState = (state, callback) => {\n return;\n };\n }\n\n initData() {\n this.props.onPerson.getPersonMyPeoplesTeamAnalytic().then(() => {\n if (!this.props.loading) {\n this.setState({\n teamAnalytics: this.props.myPeopleTeamAnalytic,\n });\n }\n\n this.setState({ loading: this.props.loading });\n });\n }\n\n render() {\n const manageProfileByAdminPopup = localStorage.getItem(\"manageProfileByAdminPopup\") && localStorage.getItem(\"manageProfileByAdminPopup\") == \"TRUE\" ? true : false;\n\n const { teamAnalytics } = this.state;\n\n return (\n <>\n {this.state.loading || this.state.contentLoading ? (\n \n
\n ) : (\n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.person.loading,\n error: state.person.error,\n myPeopleTeamAnalytic: state.person.myPeopleTeamAnalytic,\n personManagedPeople: state.person.managedPeople,\n\n language: state.language.language,\n contentTranslations: state.content.contentTranslations,\n contentLoading: state.content.loading,\n contentError: state.content.error,\n\n authMode: state.auth.authMode,\n managedPeople: state.auth.managedPeople,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onPerson: bindActionCreators(personActions, dispatch),\n onContent: bindActionCreators(contentActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(TeamAnalytics);\n","import { dismisAlert, generateAlert } from \"../../../src/utils/alertUtils\";\nimport * as authActions from \"../../store/actions/authAction\";\nimport * as contentActions from \"../../store/actions/contentAction\";\nimport * as personActions from \"../../store/actions/personAction\";\nimport { parameterizedString } from \"../../utils/stringUtils\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport { ContentWrapperLg } from \"../common/ContentWrapperLg\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport ReactTextareaAutosize from \"react-textarea-autosize\";\nimport { Button, Col, Container, Row, Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst headerStyle = {\n color: \"#2B2B2B\",\n fontSize: \"22px\",\n fontFamily: \"IBMPlexSans-Bold\",\n};\n\nconst subHeaderStyle = {\n fontFamily: \"IBMPlexSans-Light\",\n fontSize: \"11px\",\n};\n\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nclass Note extends React.Component {\n static displayName = Note.name;\n\n constructor(props) {\n super(props);\n this.connection = null;\n this.state = {\n loading: false,\n account: null,\n alerts: [],\n contentLoading: true,\n };\n\n this.initData = this.initData.bind(this);\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n\n this.contentTranslator = contentTranslator.bind(this);\n this.parameterizedString = parameterizedString.bind(this);\n }\n\n componentDidMount() {\n this.setState({ loading: true });\n\n if (this.props.language) {\n this.props.onContent.getContentTranslations(this.props.language.id, \"SfiaAll-Menu-SfiaProfileMenu-SfiaNote-Lors-Skills\").then(() => {\n this.setState({ contentLoading: this.props.contentLoading });\n\n this.props.onAuth.authCheckState().then(() => {\n this.setState({ loading: this.props.authLoading });\n\n if (window.location.pathname.includes(\"/Manage\")) {\n const query = new URLSearchParams(this.props.location.search);\n const email = query.get(\"email\");\n\n if (!this.props.managedPeople || !(this.props.managedPeople && this.props.managedPeople.personB.email.toLowerCase() == email.toLowerCase())) {\n this.setState({ loading: true });\n\n this.props.onPerson.getPersonMyPeopleByEmail(email).then(() => {\n if (!this.props.loading && this.props.personManagedPeople) {\n this.props.onAuth.myPeopleSetManagedRelationship(this.props.personManagedPeople).then(() => {\n if (!this.props.loading && this.props.personManagedPeople) {\n this.initData();\n }\n\n this.setState({ loading: this.props.loading });\n });\n }\n\n this.setState({ loading: this.props.loading });\n });\n } else {\n this.initData();\n }\n } else {\n this.initData();\n }\n });\n });\n } else {\n this.props.onAuth.authCheckState().then(() => {\n this.setState({ loading: this.props.authLoading });\n\n if (window.location.pathname.includes(\"/Manage\")) {\n const query = new URLSearchParams(this.props.location.search);\n const email = query.get(\"email\");\n\n if (!this.props.managedPeople || !(this.props.managedPeople && this.props.managedPeople.personB.email.toLowerCase() == email.toLowerCase())) {\n this.setState({ loading: true });\n\n this.props.onPerson.getPersonMyPeopleByEmail(email).then(() => {\n if (!this.props.loading && this.props.personManagedPeople) {\n this.props.onAuth.myPeopleSetManagedRelationship(this.props.personManagedPeople).then(() => {\n if (!this.props.loading && this.props.personManagedPeople) {\n this.initData();\n }\n\n this.setState({ loading: this.props.loading });\n });\n }\n\n this.setState({ loading: this.props.loading });\n });\n } else {\n this.initData();\n }\n } else {\n this.initData();\n }\n });\n }\n }\n\n componentWillUnmount() {\n this.setState = (state, callback) => {\n return;\n };\n }\n\n initData() {\n this.setState({ loading: true });\n\n Promise.resolve(this.props.managedPeople ? this.props.onPerson.getManagedPeopleLatestAccount(this.props.managedPeople.personB.email) : this.props.onPerson.getPersonLatestAccount()).then(() => {\n if (!this.props.loading && this.props.account) {\n const account = this.props.account;\n\n this.setState({ account });\n }\n this.setState({ loading: this.props.loading });\n });\n }\n\n handleChange = (event) => {\n const { name, value } = event.target;\n\n const account = this.state.account;\n account.note = value;\n this.setState({ account });\n };\n\n submitForm = () => {\n this.setState({ loading: true });\n\n const account = this.state.account;\n\n Promise.resolve(this.props.managedPeople ? this.props.onPerson.updateManagedPeoplePersonAccountNote(account.id, account.note, this.props.managedPeople.personB.email) : this.props.onPerson.updatePersonAccountNote(account.id, account.note)).then(() => {\n if (!this.props.updating && this.props.account) {\n const account = this.props.account;\n\n this.setState({ account });\n this.generateAlert(\"success\", \"Your notes has been saved\");\n } else if (!this.props.updating && this.props.error) {\n this.generateAlert(\"danger\", this.props.error.errData.Message);\n }\n this.setState({ loading: this.props.updating });\n });\n };\n\n render() {\n let isAdmin = false;\n\n const authMode = this.props.authMode;\n let authModes = authMode.split(\",\").map((item) => item.trim());\n if (authModes.filter((it) => it != \"Admin\").length == 0) {\n isAdmin = true;\n }\n\n return (\n \n \n
\n ) : (\n \n \n {this.props.managedPeople\n ? this.parameterizedString(this.contentTranslator(this.props.contentTranslations, \"SfiaNote\", \"SfiaNoteNotesFor\", \"Notes for {s1}\"), `${this.props.managedPeople.personB.firstName} ${this.props.managedPeople.personB.lastName}`)\n : this.contentTranslator(this.props.contentTranslations, \"SfiaNote\", \"SfiaNoteMyNotes\", \"My Notes\")}\n
\n \n
\n \n
\n {!isAdmin && (\n \n \n \n \n
\n \n
\n )}\n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.person.loading,\n updating: state.person.updating,\n error: state.person.error,\n account: state.person.account,\n\n personManagedPeople: state.person.managedPeople,\n managedPeople: state.auth.managedPeople,\n\n authLoading: state.auth.loading,\n authMode: state.auth.authMode,\n\n language: state.language.language,\n contentTranslations: state.content.contentTranslations,\n contentLoading: state.content.loading,\n contentError: state.content.error,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onPerson: bindActionCreators(personActions, dispatch),\n onContent: bindActionCreators(contentActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Note);\n","import { parameterizedString } from \"../../utils/stringUtils\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport { ContentWrapperLg } from \"../common/ContentWrapperLg\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport React from \"react\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { connect } from \"react-redux\";\nimport { Link } from \"react-router-dom\";\nimport { Col, Container, Modal, ModalBody, Row, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nclass EvidenceListFiltered extends React.Component {\n static displayName = EvidenceListFiltered.name;\n\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n showDialog: false,\n };\n\n this.contentTranslator = contentTranslator.bind(this);\n this.parameterizedString = parameterizedString.bind(this);\n }\n\n componentDidMount() {}\n\n componentDidUpdate(prevProps) {\n if (prevProps.showDialog !== this.props.showDialog && this.props.showDialog) {\n this.setState({ showDialog: true });\n }\n }\n\n openEditEvidenceModal = (evidence, editMode) => {\n this.setState({ showDialog: false });\n if (this.props.handleOpenEvidenceDetailModal) {\n this.props.handleOpenEvidenceDetailModal(evidence, editMode);\n }\n };\n\n togleEvidenceListModal = () => {\n this.setState({ showDialog: false });\n };\n\n render() {\n const { evidences, evidenceFilterSkillsCode, evidenceFilterLevel, evidenceFilterMode, containerConfig } = this.props;\n\n return (\n \n \n {evidences &&\n evidences.filter(\n (it) =>\n ((it.skillLevels && it.skillLevels.find((l) => l.skillCode == evidenceFilterSkillsCode && l.level == evidenceFilterLevel)) || (it.lorLevels && it.lorLevels.find((l) => l.lorCode == evidenceFilterSkillsCode && l.level == evidenceFilterLevel))) &&\n ((evidenceFilterMode == \"PROTECTED\" && !it.aiReviewed && (it.isDigitalBadge || it.isNonEditable || (it.isEditableToCreatorOnly && it.createdById != this.props.personId))) ||\n (evidenceFilterMode == \"OPENED\" && !it.aiReviewed && !(it.isDigitalBadge || it.isNonEditable || (it.isEditableToCreatorOnly && it.createdById != this.props.personId))) ||\n (evidenceFilterMode == \"CONFIRMED\" && it.aiReviewed))\n ).length > 0 && (\n \n {evidences\n .filter(\n (it) =>\n ((it.skillLevels && it.skillLevels.find((l) => l.skillCode == evidenceFilterSkillsCode && l.level == evidenceFilterLevel)) || (it.lorLevels && it.lorLevels.find((l) => l.lorCode == evidenceFilterSkillsCode && l.level == evidenceFilterLevel))) &&\n ((evidenceFilterMode == \"PROTECTED\" && !it.aiReviewed && (it.isDigitalBadge || it.isNonEditable || (it.isEditableToCreatorOnly && it.createdById != this.props.personId))) ||\n (evidenceFilterMode == \"OPENED\" && !it.aiReviewed && !(it.isDigitalBadge || it.isNonEditable || (it.isEditableToCreatorOnly && it.createdById != this.props.personId))) ||\n (evidenceFilterMode == \"CONFIRMED\" && it.aiReviewed))\n )\n .map((evidence, index) => {\n const skillLevels = [\n ...evidence.lorLevels.map((lorLevel) => {\n return lorLevel.lorCode + lorLevel.level;\n }),\n ...evidence.skillLevels.map((skillLevel) => {\n return skillLevel.skillCode + skillLevel.level;\n }),\n ];\n\n const fileName = evidence.fileName;\n\n let evidenceOption = \"Upload File\";\n\n if (fileName && fileName != \"\") {\n evidenceOption = \"Upload File\";\n } else if (evidence.link && evidence.link != \"\") {\n evidenceOption = \"Specify Link\";\n } else if (evidence.notes && evidence.notes != \"\" && !evidence.notes.startsWith(\"Evidence created from an Action\")) {\n evidenceOption = \"Description in the Notes\";\n } else if (evidence.evidenceType == \"Text\") {\n evidenceOption = \"Description in the Notes\";\n } else {\n evidenceOption = \"Specify Link\";\n }\n\n return (\n \n \n \n \n \n {this.props.managedPeople ? (\n \n ) : evidence.link ? (\n {evidence.evidenceType} \n \n \n \n \n \n {new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(evidence.createdOn))}\n \n \n )}\n {evidence.completedOn && (\n \n \n \n \n {new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(evidence.completedOn))}\n \n \n )}\n {evidence.expiryOn && (\n \n \n \n \n {new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(evidence.expiryOn))}\n \n \n )}\n \n this.openEditEvidenceModal(evidence, true)} disabled={this.props.loadingEdit}>\n {evidence.isDigitalBadge || evidence.isNonEditable || (evidence.isEditableToCreatorOnly && evidence.createdById != this.props.personId) ? (\n \n {!(evidence.isDigitalBadge || evidence.isNonEditable || (evidence.isEditableToCreatorOnly && evidence.createdById != this.props.personId)) &&\n containerConfig &&\n containerConfig.enableAIEvidenceReviewer &&\n (evidence.lorLevels ? evidence.lorLevels : []).length + (evidence.skillLevels ? evidence.skillLevels : []).length == 1 &&\n (evidenceOption == \"Upload File\" || evidenceOption == \"Description in the Notes\") &&\n !evidence.aiReviewed &&\n !this.props.managedPeople && (\n \n this.openEditEvidenceModal(evidence, false)}\n disabled={this.props.loadingEdit}\n >\n \n \n \n )}\n {evidence.aiReviewed && (\n this.openEditEvidenceModal(evidence, false)} disabled={this.props.loadingEdit}>\n \n )}\n \n
\n {evidence.evidenceType == \"Text\" && (!evidence.notes || (evidence.notes && evidence.notes.length == 0)) && (\n \n
\n )}\n {evidence.notes && evidence.notes.length > 0 && (\n \n
\n )}\n {evidence.isEditableToCreatorOnly && (\n \n
\n )}\n \n
\n \n \n );\n })}\n \n )}\n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.evidence.loading,\n error: state.evidence.error,\n\n lors: state.lor.lors,\n managedPeople: state.auth.managedPeople,\n authMode: state.auth.authMode,\n personId: state.auth.personId,\n contentTranslations: state.content.contentTranslations,\n containerConfig: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {};\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(EvidenceListFiltered);\n","import React from 'react';\n\nexport default class SkillProfileGapHighlight extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n animationClass: \"fadeIn\"\n }\n }\n\n componentDidMount() {\n // if (!this.props.isFully) {\n // this.interval = setInterval(() => {\n // this.setState({ animationClass: this.state.animationClass == \"\" || this.state.animationClass == \"fadeIn\" ? \"fadeOut\" : \"fadeIn\" })\n // }, this.state.animationClass == \"fadeIn\" ? 2000 : 5000);\n // }\n }\n componentWillUnmount() {\n // if (!this.props.isFully) {\n // clearInterval(this.interval);\n // }\n }\n\n render() {\n const stopFlashAnimation = true;\n\n if (this.props.isShow) {\n const fullyColorCode = this.props.jobMatchType == \"Current\" ? \"#488ac7\" : \"#6cbb3c\";\n const gapClassName =\n this.props.reqDesValue == \"Desirable\" && this.props.jobMatchType == \"Current\" ? \"col-legend-desirable-current\" : \"col-legend-desirable-future\";\n\n return (\n {\n if (node) {\n //node.style.setProperty(\"padding\", \"0px\", \"important\");\n }\n }}\n >{this.props.children} \n )\n } else {\n return (\n {this.props.children} \n )\n }\n\n }\n}\n\n","import * as personActions from \"../../store/actions/personAction\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Col, CustomInput, Form, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nclass TableLorProfilesEditAtrribute extends React.Component {\n static displayName = TableLorProfilesEditAtrribute.name;\n\n constructor(props) {\n super(props);\n this.state = {\n account: null,\n attributes: [],\n lorAttributes: [],\n updating: false,\n };\n }\n\n componentDidMount() {\n this.setState({ account: this.props.account, attributes: this.props.account ? [...this.props.account.attributes] : [], lorAttributes: this.props.account ? [...this.props.account.lorAttributes] : [] });\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.account !== this.props.account) {\n console.log(\"TableLorProfilesEditAtrribute Account Updated\");\n this.setState({ account: this.props.account, attributes: this.props.account ? [...this.props.account.attributes] : [], lorAttributes: this.props.account ? [...this.props.account.lorAttributes] : [] });\n }\n }\n\n handleAttributeCheckedChange = (attributeId) => {\n let lorAttributes = this.state.lorAttributes;\n\n if (lorAttributes && lorAttributes.length > 0) {\n if (lorAttributes.find((it) => it.lorAttributeId == attributeId)) {\n var attribute = lorAttributes.find((it) => it.lorAttributeId == attributeId);\n var index = lorAttributes.indexOf(attribute);\n if (index !== -1) {\n lorAttributes.splice(index, 1);\n }\n } else {\n lorAttributes.push({\n lorAttributeId: attributeId,\n });\n }\n } else {\n lorAttributes = [\n {\n lorAttributeId: attributeId,\n },\n ];\n }\n\n this.setState({ lorAttributes });\n };\n\n handleSaveEditAttributeClick = () => {\n const { account, lorAttributes } = this.state;\n\n this.setState({ updating: true });\n\n this.props.onPerson\n .updatePersonAccountLorAttributes(account.id, {\n lorAttributes: lorAttributes,\n })\n .then(() => {\n if (!this.props.updating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.props.generateAlert(\"success\", \"Lor attributes updated\");\n this.props.updateLorAttributes(this.props.lorAttributes);\n }\n }\n\n this.setState({ updating: this.props.updating });\n });\n };\n\n render() {\n const { editedLor } = this.props;\n const lorAttributes = this.state.lorAttributes;\n\n if (this.props.editAttribute) {\n return (\n \n \n \n \n \n \n \n \n {\" \"}\n {!this.props.managedPeople && (\n this.handleSaveEditAttributeClick()}>\n \n )}\n \n \n );\n } else {\n return \"\";\n }\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n updating: state.person.updating,\n error: state.person.error,\n lorAttributes: state.person.lorAttributes,\n managedPeople: state.auth.managedPeople,\n contentTranslations: state.content.contentTranslations,\n loginWithTeams: state.auth.loginWithTeams,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onPerson: bindActionCreators(personActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(TableLorProfilesEditAtrribute);\n","import * as skillProfileActions from \"../../store/actions/skillProfileAction\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Form, Input, Modal, ModalBody, ModalFooter, ModalHeader } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nclass LorProfilesEditComment extends React.Component {\n static displayName = LorProfilesEditComment.name;\n\n constructor(props) {\n super(props);\n this.state = {\n comment: null,\n updating: false,\n };\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n this.setState({ comment: this.props.editedLorProfile && this.props.editedLorProfile.comment });\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.editedLorProfile !== this.props.editedLorProfile) {\n this.setState({ comment: this.props.editedLorProfile && this.props.editedLorProfile.comment });\n }\n }\n\n handleSaveEditCommentClick = () => {\n const { editedLorProfile, isEndorser } = this.props;\n const { comment } = this.state;\n let processSave = false;\n\n if (isEndorser) {\n if (window.confirm(\"These comments are visible to the User. Are you sure?\")) {\n processSave = true;\n }\n } else {\n processSave = true;\n }\n\n if (processSave) {\n this.setState({ updating: true });\n\n Promise.resolve(this.props.managedPeople ? this.props.onProfile.updateManagedPeopleLorProfileComment(editedLorProfile.id, comment, this.props.managedPeople.personB.email) : this.props.onProfile.updateMyLorProfileComment(editedLorProfile.id, comment)).then(() => {\n if (!this.props.updating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n editedLorProfile.comment = comment;\n this.props.generateAlert(\"success\", this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"EditLorCommentEnterSuccessMessage\", \"Lor profile comment updated\"));\n this.props.updateLorComment(editedLorProfile);\n }\n }\n\n this.setState({ updating: this.props.updating });\n });\n }\n };\n\n handleChangeComment = (event) => {\n const { value } = event.target;\n this.setState({ comment: value });\n };\n\n render() {\n const { comment } = this.state;\n\n if (this.props.editComment) {\n return (\n \n \n \n \n \n \n \n \n \n {this.props.allowEditComment && (\n \n {\" \"}\n this.handleSaveEditCommentClick()}>\n \n \n )}\n \n \n );\n } else {\n return \"\";\n }\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n updating: state.skillProfile.updating,\n error: state.skillProfile.error,\n\n managedPeople: state.auth.managedPeople,\n contentTranslations: state.content.contentTranslations,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onProfile: bindActionCreators(skillProfileActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(LorProfilesEditComment);\n","import React, { Component } from \"react\";\nimport { UncontrolledTooltip } from \"reactstrap\";\n\nexport default class TableHeader extends Component {\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n render() {\n const props = this.props;\n\n return (\n \n {props.showTitle ? (\n \n \n {props.title}\n \n \n {props.showTitle ? \"1\" : \"\"}\n \n \n {props.showTitle ? \"2\" : \"\"}\n \n \n {props.showTitle ? \"3\" : \"\"}\n \n \n {props.showTitle ? \"4\" : \"\"}\n \n \n {props.showTitle ? \"5\" : \"\"}\n \n \n {props.showTitle ? \"6\" : \"\"}\n \n \n {props.showTitle ? \"7\" : \"\"}\n \n {props.showEdit ? (\n props.highlightGap ? (\n \n \n ) : (\n \n ) : (\n \n \n {props.title}\n \n \n {props.title + ` - Containing ${props.itemCount} sub-categories`}\n \n \n )}\n \n );\n }\n}\n","import \"../../../src/tooltip.css\";\nimport { dismisAlert, generateAlert } from \"../../utils/alertUtils\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport FormAddAction from \"../actionplan/FormAddAction\";\nimport EvidenceDetail from \"../evidence/EvidenceDetail\";\nimport EvidenceListFiltered from \"../evidence/EvidenceListFiltered\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport SkillProfileGapHighlight from \"./SkillProfileGapHighlight\";\nimport TableLorProfilesEditAtrribute from \"./TableLorProfilesEditAtrribute\";\nimport LorProfilesEditComment from \"./TableLorProfilesEditComment\";\nimport TableHeader from \"./TableProfileHeader\";\nimport { faCheckCircle, faComment, faEdit, faFile, faFileCircleCheck, faFileShield, faList, faPlusCircle, faTimesCircle } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { Link } from \"react-router-dom\";\nimport { Button, Col, Form, FormGroup, Input, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner, Table, UncontrolledTooltip } from \"reactstrap\";\n\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nconst tableBodyStyle = {\n fontSize: 11,\n fontFamily: \"IBMPlexSans\",\n};\n\nconst tdEditStyle = {\n padding: \"2px 10px\",\n};\n\nconst lorOrders = [\n { lor: \"Autonomy\", order: 1 },\n { lor: \"Influence\", order: 2 },\n { lor: \"Complexity\", order: 3 },\n { lor: \"Business Skills\", order: 4 },\n { lor: \"Knowledge\", order: 5 },\n { lor: \"Responsibility and Autonomy\", order: 1 },\n { lor: \"Complexity and Scope\", order: 2 },\n { lor: \"Skills\", order: 3 },\n];\n\nclass TableProfileResponsibility extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n lorProfiles: this.props.lorProfiles,\n skillProfiles: this.props.skillProfiles,\n lors: this.props.lors,\n loading: this.props.loading,\n showEditSkill: this.props.showEditSkill,\n editLorProfile: false,\n editedLorProfile: null,\n\n editComment: false,\n allowEditComment: false,\n editedLor: null,\n editedLorDescription: null,\n editedLorLevel: null,\n alerts: [],\n openAddActionDialog: false,\n openAddEvidenceDialog: false,\n account: this.props.account,\n editAttribute: false,\n showDialogEvidenceListTs: null,\n showDialogEvidenceDetailTs: null,\n };\n\n this.openEditLorProfile = this.openEditLorProfile.bind(this);\n this.togleEditLorProfile = this.togleEditLorProfile.bind(this);\n this.handleRadioClick = this.handleRadioClick.bind(this);\n this.handleSaveEditProfileClick = this.handleSaveEditProfileClick.bind(this);\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {}\n\n componentDidUpdate(prevProps) {\n if (prevProps.account !== this.props.account) {\n this.setState({ account: this.props.account });\n }\n }\n\n openEditLorProfile(editedLor, editedLorProfile) {\n this.setState({ editLorProfile: true, editedLor, editedLorProfile });\n }\n\n togleEditLorProfile() {\n const { editLorProfile } = this.state;\n this.setState({ editLorProfile: !editLorProfile });\n }\n\n handleRadioChange = () => {};\n\n handleRadioClick(value) {\n let editedLorProfile = this.state.editedLorProfile;\n\n if (editedLorProfile) {\n editedLorProfile.value = value;\n } else {\n editedLorProfile = {\n value,\n };\n }\n\n this.setState({ editedLorProfile });\n }\n\n handleClearProfileClick = () => {\n const { lorProfiles, editedLor, editedLorProfile } = this.state;\n\n let lorProfile = null;\n if (lorProfiles && editedLor.optional && editedLorProfile) {\n lorProfile = lorProfiles.find((it) => (editedLorProfile.id && it.id == editedLorProfile.id) || (!it.id && it.lor === editedLor.name));\n\n if (lorProfile) {\n if (lorProfile.id) {\n lorProfile.editedLevel = null;\n lorProfile.editedNumericVal = 0;\n lorProfile.editedStringVal = null;\n lorProfile.editedLabelVal = null;\n\n lorProfile.edited = true;\n\n lorProfile.source = \"lorProfiles\";\n } else {\n lorProfile.level = null;\n lorProfile.numericVal = null;\n lorProfile.stringVal = null;\n lorProfile.labelVal = null;\n\n lorProfile.editedLevel = null;\n lorProfile.editedNumericVal = 0;\n lorProfile.editedStringVal = null;\n lorProfile.editedLabelVal = null;\n lorProfile.edited = false;\n\n lorProfile.source = \"lorProfiles\";\n }\n\n this.props.handleEditProfileSkill(lorProfile);\n this.setState({ lorProfiles, editLorProfile: false });\n }\n }\n\n if (!lorProfile) {\n this.setState({ editLorProfile: false });\n }\n };\n\n handleSaveEditProfileClick() {\n const { lors, lorProfiles, editedLor, editedLorProfile } = this.state;\n const level = lors.find((it) => it.name == editedLor.name).levels.find((level) => editedLorProfile && level.levelNumber == editedLorProfile.value);\n\n let lorProfile = null;\n if (lorProfiles && editedLorProfile) {\n lorProfile = lorProfiles.find((it) => (editedLorProfile.id && it.id == editedLorProfile.id) || (!it.id && it.lor === editedLor.name));\n\n if (lorProfile) {\n if (((lorProfile.editedNumericVal || lorProfile.editedNumericVal == 0) && lorProfile.editedNumericVal != editedLorProfile.value) || (!lorProfile.editedNumericVal && lorProfile.numericVal != editedLorProfile.value)) {\n if (lorProfile.id) {\n if (lorProfile.level == level.levelNumber) {\n // Updated back to original level\n lorProfile.editedLevel = null;\n lorProfile.editedNumericVal = null;\n lorProfile.editedStringVal = null;\n lorProfile.editedLabelVal = null;\n lorProfile.edited = false;\n } else {\n lorProfile.editedLevel = level.levelNumber;\n lorProfile.editedNumericVal = editedLorProfile.value;\n lorProfile.editedStringVal = level && `${level.levelNumber}- ${level.levelName}`;\n lorProfile.editedLabelVal = level && level.description;\n lorProfile.edited = true;\n }\n } else {\n lorProfile.editedLevel = level.levelNumber;\n lorProfile.editedNumericVal = editedLorProfile.value;\n lorProfile.editedStringVal = level && `${level.levelNumber}- ${level.levelName}`;\n lorProfile.editedLabelVal = level && level.description;\n lorProfile.edited = true;\n }\n\n lorProfile.source = \"lorProfiles\";\n this.props.handleEditProfileSkill(lorProfile);\n this.setState({ lorProfiles, editLorProfile: false });\n } else {\n this.setState({ editLorProfile: false });\n }\n }\n }\n\n if (!lorProfile && level) {\n lorProfile = {\n lor: editedLor.name,\n lorCode: editedLor.lorCode,\n level: level.levelNumber,\n numericVal: editedLorProfile.value,\n stringVal: level && `${level.levelNumber}- ${level.levelName}`,\n labelVal: level && level.description,\n editedLevel: level.levelNumber,\n editedNumericVal: editedLorProfile.value,\n editedStringVal: level && `${level.levelNumber}- ${level.levelName}`,\n editedLabelVal: level && level.description,\n edited: true,\n source: \"lorProfiles\",\n };\n\n this.props.handleEditProfileSkill(lorProfile);\n this.setState({ lorProfiles: [...lorProfiles, lorProfile], editLorProfile: false });\n }\n }\n\n handleSelectLorLevel = (lor, level, editedLorProfile) => {\n const { lors, lorProfiles } = this.state;\n const lorLevel = lors.find((it) => it.name == lor.name).levels.find((it) => it.levelNumber == level);\n\n let lorProfile = null;\n if (lorProfiles && editedLorProfile) {\n lorProfile = lorProfiles.find((it) => (editedLorProfile.id && it.id == editedLorProfile.id) || (!it.id && it.lor === lor.name));\n\n if (lorProfile) {\n if (lorProfile.id) {\n // Update existing lor profile\n if (\n // First update\n (!lorProfile.editedNumericVal && lorProfile.numericVal != level) ||\n // Update after first update\n (lorProfile.editedNumericVal && lorProfile.editedNumericVal != level)\n ) {\n // Click on different level cell\n if (lorProfile.level == level) {\n // Updated back to original level\n lorProfile.editedLevel = null;\n lorProfile.editedNumericVal = null;\n lorProfile.editedStringVal = null;\n lorProfile.editedLabelVal = null;\n lorProfile.edited = false;\n } else {\n lorProfile.editedLevel = lorLevel.levelNumber;\n lorProfile.editedNumericVal = level;\n lorProfile.editedStringVal = lorLevel && `${lorLevel.levelNumber}- ${lorLevel.levelName}`;\n lorProfile.editedLabelVal = lorLevel && lorLevel.description;\n lorProfile.edited = true;\n }\n\n lorProfile.source = \"lorProfiles\";\n\n this.props.handleEditProfileSkill(lorProfile);\n this.setState({ lorProfiles });\n } else if (\n lor.optional &&\n // First update\n ((!lorProfile.editedNumericVal && lorProfile.numericVal == level) ||\n // Update after first update\n (lorProfile.editedNumericVal && lorProfile.editedNumericVal == level))\n ) {\n // Click on same level cell, must be Optional Lor\n if (lorProfile.editedNumericVal == 0) {\n lorProfile.editedLevel = lorLevel.levelNumber;\n lorProfile.editedNumericVal = level;\n lorProfile.editedStringVal = lorLevel && `${lorLevel.levelNumber}- ${lorLevel.levelName}`;\n lorProfile.editedLabelVal = lorLevel && lorLevel.description;\n } else {\n lorProfile.editedLevel = null;\n lorProfile.editedNumericVal = 0;\n lorProfile.editedStringVal = null;\n lorProfile.editedLabelVal = null;\n }\n\n lorProfile.source = \"lorProfiles\";\n\n if (lorProfile.numericVal != lorProfile.editedNumericVal) {\n lorProfile.edited = true;\n } else {\n lorProfile.edited = false;\n }\n\n this.props.handleEditProfileSkill(lorProfile);\n this.setState({ lorProfiles });\n }\n } else {\n // Update new selected lor profile\n if (!lorProfile.editedNumericVal || lorProfile.editedNumericVal == 0 || (lorProfile.editedNumericVal && lorProfile.editedNumericVal != level)) {\n lorProfile.level = lorLevel.levelNumber;\n lorProfile.numericVal = level;\n lorProfile.stringVal = lorLevel && `${lorLevel.levelNumber}- ${lorLevel.levelName}`;\n lorProfile.labelVal = lorLevel && lorLevel.description;\n\n lorProfile.editedLevel = lorLevel.levelNumber;\n lorProfile.editedNumericVal = level;\n lorProfile.editedStringVal = lorLevel && `${lorLevel.levelNumber}- ${lorLevel.levelName}`;\n lorProfile.editedLabelVal = lorLevel && lorLevel.description;\n lorProfile.edited = true;\n\n lorProfile.source = \"lorProfiles\";\n\n this.props.handleEditProfileSkill(lorProfile);\n this.setState({ lorProfiles });\n } else if (lorProfile.editedNumericVal && lorProfile.editedNumericVal == level) {\n lorProfile.level = null;\n lorProfile.numericVal = null;\n lorProfile.stringVal = null;\n lorProfile.labelVal = null;\n\n lorProfile.editedLevel = null;\n lorProfile.editedNumericVal = 0;\n lorProfile.editedStringVal = null;\n lorProfile.editedLabelVal = null;\n lorProfile.edited = false;\n\n lorProfile.source = \"lorProfiles\";\n\n this.props.handleEditProfileSkill(lorProfile);\n this.setState({ lorProfiles });\n }\n }\n }\n }\n\n if (!lorProfile && lorLevel) {\n lorProfile = {\n lor: lor.name,\n lorCode: lor.lorCode,\n level: lorLevel.levelNumber,\n numericVal: level,\n stringVal: lorLevel && `${lorLevel.levelNumber}- ${lorLevel.levelName}`,\n labelVal: lorLevel && lorLevel.description,\n editedLevel: lorLevel.levelNumber,\n editedNumericVal: level,\n editedStringVal: lorLevel && `${lorLevel.levelNumber}- ${lorLevel.levelName}`,\n editedLabelVal: lorLevel && lorLevel.description,\n edited: true,\n source: \"lorProfiles\",\n };\n\n this.props.handleEditProfileSkill(lorProfile);\n this.setState({ lorProfiles: [...lorProfiles, lorProfile] });\n }\n };\n\n componentDidUpdate(prevProps) {\n if (prevProps.loading !== this.props.loading) {\n this.setState({ loading: this.props.loading });\n }\n\n if (prevProps.lors !== this.props.lors) {\n this.setState({ lors: this.props.lors });\n }\n\n if (prevProps.lorProfiles !== this.props.lorProfiles) {\n this.setState({ lorProfiles: this.props.lorProfiles });\n }\n }\n\n openEditLorComment = (editedLor, editedLorLevel, editedLorDescription, lorProfile, allowEditComment) => {\n this.setState({ editComment: true, editedLor, editedLorDescription, editedLorLevel, editedLorProfile: lorProfile, allowEditComment });\n };\n\n togleEditLorComment = () => {\n const { editComment } = this.state;\n this.setState({ editComment: !editComment });\n };\n\n updateLorComment = () => {\n this.setState({ editComment: false });\n };\n\n openEditLorAttribute = (editedLor) => {\n this.setState({ editAttribute: true, editedLor });\n };\n\n togleEditLorAttribute = () => {\n const { editAttribute } = this.state;\n this.setState({ editAttribute: !editAttribute });\n };\n\n updateLorAttributes = (attributes) => {\n const account = this.state.account;\n\n if (account) {\n account.lorAttributes = attributes;\n this.setState({ account, editAttribute: false });\n }\n };\n\n openEvidenceListModal = (skillsCode, level, filterMode) => {\n this.setState({ showDialogEvidenceListTs: new Date(), evidenceFilterSkillsCode: skillsCode, evidenceFilterLevel: level, evidenceFilterMode: filterMode });\n };\n\n openEvidenceDetailModal = (evidence, editMode) => {\n const { containerConfig } = this.props;\n\n if (editMode == null) {\n const fileName = evidence.fileName;\n let evidenceOption = \"Upload File\";\n\n if (fileName && fileName != \"\") {\n evidenceOption = \"Upload File\";\n } else if (evidence.link && evidence.link != \"\") {\n evidenceOption = \"Specify Link\";\n } else if (evidence.notes && evidence.notes != \"\" && !evidence.notes.startsWith(\"Evidence created from an Action\")) {\n evidenceOption = \"Description in the Notes\";\n } else if (evidence.evidenceType == \"Text\") {\n evidenceOption = \"Description in the Notes\";\n } else {\n evidenceOption = \"Specify Link\";\n }\n\n if (\n !(evidence.isDigitalBadge || evidence.isNonEditable || (evidence.isEditableToCreatorOnly && evidence.createdById != this.props.personId)) &&\n containerConfig &&\n containerConfig.enableAIEvidenceReviewer &&\n (evidence.lorLevels ? evidence.lorLevels : []).length + (evidence.skillLevels ? evidence.skillLevels : []).length == 1 &&\n (evidenceOption == \"Upload File\" || evidenceOption == \"Description in the Notes\")\n ) {\n this.setState({ showDialogEvidenceDetailTs: new Date(), editedEvidence: evidence, editMode: false });\n } else {\n this.setState({ showDialogEvidenceDetailTs: new Date(), editedEvidence: evidence, editMode: true });\n }\n } else {\n this.setState({ showDialogEvidenceDetailTs: new Date(), editedEvidence: evidence, editMode });\n }\n };\n\n tableBodyResponsibility = (categoryIndex, category, categoryColor, lorColor, showProposedAction) => {\n const { lors, lorProfiles } = this.state;\n const { containerConfig, loadingGap, showEditSkill, highlightGap, selectedJobMatchType, account, showHiddenSkills, isShowJobProfile, jobLorAttributes, evidences } = this.props;\n const proposeLors = showProposedAction ? (account && account.updateProfileEvidenceProposalSkills ? account.updateProfileEvidenceProposalSkills.filter((it) => it.type == \"Lor\") : []) : [];\n\n if (lors) {\n lors.forEach((lor) => {\n const lorOrder = lorOrders.find((it) => it.lor == lor.name);\n if (lorOrder) {\n lor.order = lorOrder.order;\n } else {\n lor.order = 999;\n }\n });\n }\n\n const rows = lors\n .filter((it) => (it.category ? it.category : \"Generic Attributes\") == (category ? category : \"Generic Attributes\"))\n //.sort((a, b) => (`${a.sequence}${a.order}${a.name}` > `${b.sequence}${b.order}${b.name}` ? 1 : -1))\n .sort((a, b) => {\n if (a.sequence > b.sequence) {\n return 1;\n }\n if (a.sequence < b.sequence) {\n return -1;\n }\n if (a.order > b.order) {\n return 1;\n }\n if (a.order < b.order) {\n return -1;\n }\n if (a.name > b.name) {\n return 1;\n }\n if (a.name < b.name) {\n return -1;\n }\n return 0;\n })\n .map((lor, lorindex) => {\n const lorProfile = lorProfiles.find((x) => x.lor === lor.name) ? lorProfiles.filter((x) => x.lor === lor.name).sort((b, a) => a.level - b.level)[0] : null;\n const lorHidden = lor.isHidden && !showHiddenSkills;\n const lorOptional = lor.optional;\n\n let jobLorProfile = null;\n\n if (selectedJobMatchType.value != \"None\") {\n jobLorProfile = this.props.jobLorProfiles ? this.props.jobLorProfiles.find((it) => it.lor == lor.name) : null;\n }\n\n const levels = [1, 2, 3, 4, 5, 6, 7];\n\n let openCommentEditor = false;\n let openCommentAllowEdit = false;\n\n let selectedLorAttributes = [];\n let selectedJobLorAttributes = [];\n\n let jobLorAttributeColor = \"#002060\";\n const showJobLorAttribute = this.props.selectedJobMatchType.id ? true : false;\n if (showJobLorAttribute) {\n if (this.props.selectedJobMatchType.value == \"Current\") {\n jobLorAttributeColor = \"#002060\";\n } else {\n jobLorAttributeColor = \"#4dcaa4\";\n }\n }\n\n if (isShowJobProfile) {\n if (lor.attributes && lor.attributes.length > 0 && jobLorAttributes && jobLorAttributes.length > 0) {\n selectedLorAttributes = lor.attributes.filter((it) => !it.isHidden && jobLorAttributes.find((attribute) => it.id == attribute.lorAttributeId));\n }\n } else {\n if (lor.attributes && lor.attributes.length > 0 && this.state.account && this.state.account.lorAttributes && this.state.account.lorAttributes.length > 0) {\n selectedLorAttributes = lor.attributes.filter((it) => !it.isHidden && this.state.account.lorAttributes.find((attribute) => it.id == attribute.lorAttributeId));\n }\n\n selectedJobLorAttributes = showJobLorAttribute && jobLorAttributes ? jobLorAttributes.filter((it) => !it.isHidden && it.lorName == lor.name && it.lorCode == lor.lorCode) : [];\n }\n\n if (lorProfile) {\n const currLevel = lorProfile.edited ? (lorProfile.editedLevel ? lorProfile.editedLevel : 0) : lorProfile.level;\n\n openCommentEditor = false;\n openCommentAllowEdit = false;\n\n if (!isShowJobProfile && !showEditSkill) {\n if (\n (this.props.selectedprofileType.value == \"Self Assessed\" && !this.props.managedPeople) ||\n (this.props.selectedprofileType.value == \"Self Assessed\" && this.props.managedPeople && lorProfile.comment) ||\n ((this.props.managedPeople || lorProfile.comment) && this.props.selectedprofileType.value == \"Endorsed\")\n ) {\n openCommentEditor = true;\n }\n\n if ((this.props.selectedprofileType.value == \"Self Assessed\" && !this.props.managedPeople) || (this.props.managedPeople && this.props.selectedprofileType.value == \"Endorsed\")) {\n openCommentAllowEdit = true;\n }\n }\n\n let showRow = false;\n\n if (showProposedAction) {\n if (showProposedAction && proposeLors.filter((s) => s.type == \"Lor\" && s.code == lor.lorCode).length > 0) {\n const proposedLor = proposeLors.filter((s) => s.type == \"Lor\" && s.code == lor.lorCode).sort((b, a) => a.level - b.level)[0];\n if (lorProfile && proposedLor.level > lorProfile.level) {\n showRow = true;\n }\n }\n } else {\n showRow = true;\n }\n\n return (\n showRow &&\n !lorHidden && (\n \n \n \n {lor.attributes && lor.attributes.filter((it) => !it.isHidden).length > 0 ? (\n \n \n \n \n {attribute.link && !this.props.loginWithTeams ? (\n \n \n );\n })}\n \n )}\n {selectedJobLorAttributes.length > 0 && (\n \n \n {selectedJobLorAttributes\n .sort((a, b) => a.attribute > b.attribute)\n .map((attribute, index) => {\n return (\n
\n {attribute.link && !this.props.loginWithTeams ? (\n \n \n \n ) : (\n \n \n {attribute.attribute}\n \n \n )}\n \n );\n })}\n \n \n )}\n \n {!isShowJobProfile && (\n this.openEditLorAttribute(lor)} />\n \n )}\n \n ) : (\n
\n \n \n {lor && \n \n \n \n
\n showEditSkill && containerConfig.enableClickToEditLoR && ((currLevel === level && lorOptional) || currLevel != level)\n ? this.handleSelectLorLevel(lor, level, lorProfile)\n : currLevel === level &&\n openCommentEditor &&\n this.openEditLorComment(\n this.contentTranslator(this.props.contentTranslations, \"Lors\", lorProfile.lor, lorProfile.lor),\n level,\n this.contentTranslator(this.props.contentTranslations, \"LorLevels\", `${lor.name} ${lorLevel.levelName} Description`, lorLevel.description),\n lorProfile,\n openCommentAllowEdit\n )\n }\n >\n {currLevel === level && lorProfile.comment && \n \n {skillLevelEditableEvidences.length > 0 && (\n \n !showEditSkill && (skillLevelEditableEvidences.length == 1 ? this.openEvidenceDetailModal(skillLevelEditableEvidences[0]) : this.openEvidenceListModal(lor.lorCode, level, \"OPENED\"))}\n />\n \n \n \n )}\n \n \n {skillLevelReadOnlyEvidences.length > 0 && (\n \n !showEditSkill && (skillLevelReadOnlyEvidences.length == 1 ? this.openEvidenceDetailModal(skillLevelReadOnlyEvidences[0]) : this.openEvidenceListModal(lor.lorCode, level, \"PROTECTED\"))}\n />\n \n \n \n )}\n \n \n {skillLevelConfirmedEvidences.length > 0 && (\n \n !showEditSkill && (skillLevelConfirmedEvidences.length == 1 ? this.openEvidenceDetailModal(skillLevelConfirmedEvidences[0]) : this.openEvidenceListModal(lor.lorCode, level, \"CONFIRMED\"))}\n />\n \n \n \n )}\n \n
\n )}\n \n \n \n {lorLevel && \n {highlightGap && (\n \n {jobLorProfile && jobLorProfile.level == level ? (\n \n = jobLorProfile.level ? true : false}\n jobMatchType={selectedJobMatchType.value}\n fixWidthClass=\"td-fixwidth\"\n reqDesValue=\"Required\"\n rightBorderColor=\"#69849c\"\n >\n \n {lorLevel && \n \n ) : (\n \n \n \n {lorLevel && \n \n )}\n \n )}\n \n );\n })}\n {showEditSkill && (\n \n !containerConfig.enableClickToEditLoR && this.openEditLorProfile(lor, { id: lorProfile.id, value: currLevel })}\n >\n \n \n )}\n \n )}\n {highlightGap ? (\n \n {loadingGap && \n {!loadingGap && jobLorProfile ? (\n currLevel >= jobLorProfile.level ? (\n \n this.handleAddAction(lor)}>\n \n \n )\n ) : (\n \"\"\n )}\n \n \n ) : (\n \n \n \n \n )}\n \n )\n );\n } else {\n let showRow = false;\n\n if (showProposedAction) {\n if (showProposedAction && proposeLors.filter((s) => s.type == \"Lor\" && s.code == lor.lorCode).length > 0) {\n showRow = true;\n }\n } else {\n showRow = true;\n }\n\n return (\n showRow &&\n !lorHidden && (\n \n \n \n \n {lor && \n \n showEditSkill && containerConfig.enableClickToEditLoR && this.handleSelectLorLevel(lor, level, null)}\n >\n \n {lorLevel && \n {highlightGap && (\n \n {jobLorProfile && jobLorProfile.level == level ? (\n \n \n \n {lorLevel && \n \n ) : (\n \n \n {lorLevel && \n \n )}\n \n )}\n \n );\n })}\n {showEditSkill && (\n \n !containerConfig.enableClickToEditLoR && this.openEditLorProfile(lor, null)}\n >\n \n \n )}\n \n )}\n {highlightGap && jobLorProfile ? (\n \n \n this.handleAddAction(lor)}>\n \n \n \n ) : (\n \n \n \n \n )}\n \n )\n );\n }\n });\n\n return {rows} ;\n };\n\n handleAddAction = (lor) => {\n this.setState({ openAddActionDialog: true, actionedLor: lor });\n };\n\n handleCancelAddAction = () => {\n this.setState({ openAddActionDialog: false, actionedLor: null });\n };\n\n handleActionPlanAdded = (addedAction) => {\n this.setState({ openAddActionDialog: false, actionedLor: null });\n this.props.handleActionPlanAdded(addedAction);\n };\n\n renderModalAddAction = () => {\n const { selectedJobMatchType, actions, actionSkills, jobLorProfiles, jobSkillProfiles, lorProfiles, skillProfiles } = this.props;\n const { actionedLor, openAddActionDialog } = this.state;\n\n let selectedDefaultSkills;\n\n if (actionedLor && selectedJobMatchType && selectedJobMatchType.value != \"None\") {\n if (jobSkillProfiles) {\n jobSkillProfiles.forEach((jobSkillProfile) => {\n const skillProfile = skillProfiles && skillProfiles.find((x) => x.skillCode == jobSkillProfile.skillCode && x.level == jobSkillProfile.level && (x.numericVal == 1 || x.stringVal == \"M\"));\n const plan = actions ? actions.find((it) => it.skills.some((skill) => skill.code == jobSkillProfile.skillCode && skill.level == jobSkillProfile.level)) : null;\n\n if (skillProfile || plan) {\n jobSkillProfile.actioned = true;\n } else {\n jobSkillProfile.actioned = false;\n }\n });\n }\n\n if (jobLorProfiles) {\n const gapJobLorProfiles = jobLorProfiles.filter((it) => it.lorCode == actionedLor.lorCode);\n\n if (gapJobLorProfiles.length > 0) {\n selectedDefaultSkills = [\n ...gapJobLorProfiles.map((skill) => {\n return {\n skillName: skill.lor,\n skillCode: skill.lorCode,\n skillLevel: skill.level,\n skillType: \"Lor\",\n };\n }),\n ];\n }\n\n jobLorProfiles.forEach((jobLorProfile) => {\n const lorProfile = lorProfiles.find((it) => it.lorCode == jobLorProfile.lorCode && it.level >= jobLorProfile.level);\n const plan = actions ? actions.find((it) => it.skills.some((skill) => skill.code == jobLorProfile.lorCode && skill.level >= jobLorProfile.level)) : null;\n const gapJobLorProfile = gapJobLorProfiles.find((it) => it.lorCode == jobLorProfile.lorCode);\n\n if (!gapJobLorProfile && (lorProfile || plan)) {\n jobLorProfile.actioned = true;\n } else {\n jobLorProfile.actioned = false;\n }\n });\n }\n }\n\n let optionsJob = [];\n\n const jobMatches = this.props.jobMatches;\n const currentJob = jobMatches ? jobMatches.find((it) => it.jobType === \"Current\") : null;\n const futureJob = jobMatches ? jobMatches.find((it) => it.jobType === \"Future\") : null;\n\n if (currentJob) {\n optionsJob.push({\n value: currentJob.jobType + \" - \" + currentJob.jobTitle,\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", currentJob.jobType, currentJob.jobType) + \" - \" + currentJob.jobTitle,\n type: currentJob.jobType,\n id: currentJob.jobId,\n });\n }\n\n if (futureJob) {\n optionsJob.push({\n value: futureJob.jobType + \" - \" + futureJob.jobTitle,\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", futureJob.jobType, futureJob.jobType) + \" - \" + futureJob.jobTitle,\n type: futureJob.jobType,\n id: futureJob.jobId,\n });\n }\n\n return (\n \n \n \n \n
\n \n \n );\n };\n\n renderModalEditProfile() {\n const { editedLor, editedLorProfile } = this.state;\n\n let lorProfileElement = null;\n\n if (editedLorProfile) {\n lorProfileElement = {\n id: editedLorProfile.id,\n value: editedLorProfile.value,\n };\n }\n\n return (\n \n \n \n \n \n \n \n \n {\" \"}\n {editedLor && editedLor.optional && editedLorProfile && editedLorProfile.value > 0 && (\n \n {\" \"}\n \n \n \n )}\n \n \n \n \n );\n }\n\n render() {\n const { editedLor, lors, lorProfiles } = this.state;\n const { showProposedAction, account, showHiddenSkills } = this.props;\n\n const lorCategories = [];\n\n if (lors.find((it) => !it.category)) {\n lorCategories.push({\n category: \"Generic Attributes\",\n categoryColor: \"#69849c\",\n lorColor: \"#ecf0f5\",\n });\n }\n\n lors.filter((it) => it.category).forEach((lor) => {\n if (!lorCategories.find((it) => it.category == lor.category)) {\n lorCategories.push({\n category: lor.category,\n categoryColor: lor.categoryColor,\n lorColor: lor.lorColor,\n });\n }\n });\n\n return (\n \n
\n {editedLor && this.renderModalEditProfile()}\n {this.state.loading ? (\n
\n
\n ) : (\n
\n {this.renderModalAddAction()}\n \n \n \n \n {lorCategories.map((lorCategory, index) => {\n let showCategory = false;\n\n if (showProposedAction) {\n const proposeLors = account && account.updateProfileEvidenceProposalSkills ? account.updateProfileEvidenceProposalSkills.filter((it) => it.category == (lorCategory.category ? lorCategory.category : \"Generic Attributes\")) : [];\n const matchs = lorProfiles ? lorProfiles.filter((a) => proposeLors.some((b) => b.name == a.lor && b.level > a.level)) : [];\n if (matchs.length > 0) {\n showCategory = true;\n }\n } else {\n showCategory = true;\n }\n\n const categoryLors = lors.filter((it) => (it.category ? it.category : \"Generic Attributes\") == (lorCategory.category ? lorCategory.category : \"Generic Attributes\"));\n const categoryHidden = !categoryLors.some((lor) => !lor.isHidden) && !showHiddenSkills;\n\n return (\n \n {showCategory && !categoryHidden && (\n \n
\n )}\n \n );\n })}\n \n )}\n
\n \n \n \n \n \n \n \n {\" \"}\n {!this.props.managedPeople && (\n this.handleSaveEditAttributeClick()}>\n \n )}\n \n \n );\n } else {\n return \"\";\n }\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n updating: state.person.updating,\n error: state.person.error,\n attributes: state.person.attributes,\n managedPeople: state.auth.managedPeople,\n contentTranslations: state.content.contentTranslations,\n loginWithTeams: state.auth.loginWithTeams,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onPerson: bindActionCreators(personActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(TableSkillProfilesEditAttribute);\n","import * as skillProfileActions from \"../../store/actions/skillProfileAction\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Button, Form, Input, Modal, ModalBody, ModalFooter, ModalHeader } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nclass TableSkillProfilesEditComment extends React.Component {\n static displayName = TableSkillProfilesEditComment.name;\n\n constructor(props) {\n super(props);\n this.state = {\n comment: null,\n updating: false,\n };\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n this.setState({ comment: this.props.editedSkill && this.props.editedSkill.comment });\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.editedSkill !== this.props.editedSkill) {\n this.setState({ comment: this.props.editedSkill && this.props.editedSkill.comment });\n }\n }\n\n handleSaveEditCommentClick = () => {\n const { editedSkill, isEndorser } = this.props;\n const { comment } = this.state;\n\n let processSave = false;\n\n if (isEndorser) {\n if (window.confirm(\"These comments are visible to the User. Are you sure?\")) {\n processSave = true;\n }\n } else {\n processSave = true;\n }\n\n if (processSave) {\n this.setState({ updating: true });\n\n Promise.resolve(this.props.managedPeople ? this.props.onProfile.updateManagedPeopleSkillProfileComment(editedSkill.id, comment, this.props.managedPeople.personB.email) : this.props.onProfile.updateMySkillProfileComment(editedSkill.id, comment)).then(() => {\n if (!this.props.updating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n editedSkill.comment = comment;\n this.props.generateAlert(\"success\", this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"EditCommentEnterSuccessMessage\", \"Skill profile comment updated\"));\n this.props.updateSkillComment(editedSkill);\n }\n }\n\n this.setState({ updating: this.props.updating });\n });\n }\n };\n\n handleChangeComment = (event) => {\n const { value } = event.target;\n this.setState({ comment: value });\n };\n\n render() {\n const { editedCategory, editedSubCategory, editedSkill } = this.props;\n const { comment } = this.state;\n\n if (this.props.editComment) {\n return (\n \n \n \n \n \n \n \n \n \n {this.props.allowEditComment && (\n \n {\" \"}\n this.handleSaveEditCommentClick()}>\n \n \n )}\n \n \n );\n } else {\n return \"\";\n }\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n updating: state.skillProfile.updating,\n error: state.skillProfile.error,\n\n managedPeople: state.auth.managedPeople,\n contentTranslations: state.content.contentTranslations,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onProfile: bindActionCreators(skillProfileActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(TableSkillProfilesEditComment);\n","import * as personActions from \"../../store/actions/personAction\";\nimport { dismisAlert, generateAlert } from \"../../utils/alertUtils\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport FormAddAction from \"../actionplan/FormAddAction\";\nimport AddNewEvidenceForm from \"../evidence/AddNewEvidenceForm\";\nimport EvidenceDetail from \"../evidence/EvidenceDetail\";\nimport EvidenceListFiltered from \"../evidence/EvidenceListFiltered\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport SkillProfileGapHighlight from \"./SkillProfileGapHighlight\";\nimport TableSkillProfilesEditAttribute from \"./TableSkillProfilesEditAtrribute\";\nimport TableSkillProfilesEditComment from \"./TableSkillProfilesEditComment\";\nimport { faCircleQuestion } from \"@fortawesome/free-regular-svg-icons\";\nimport { faCheckCircle, faCircle, faComment, faEdit, faFile, faFileCircleCheck, faFileShield, faList, faPlusCircle, faTimesCircle, faWandMagicSparkles } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport parse from \"html-react-parser\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport { Button, Col, Form, FormGroup, Input, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner, Table, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\nfunction truncate(input) {\n // if (input.length > 400) {\n // return input.substring(0, 400) + '...';\n // }\n return input;\n}\n\nclass TableSkillProfiles extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n lorProfiles: this.props.lorProfiles,\n skillProfiles: this.props.skillProfiles,\n loading: false,\n categories: this.props.categories,\n extraFrameworkCapabilities: this.props.extraFrameworkCapabilities,\n extraFrameworkLevels: this.props.extraFrameworkLevels,\n\n editSkill: false,\n editedCategory: null,\n editedSubCategory: null,\n editedSkill: null,\n editedSkillProfiles: null,\n editedSkillEvidence: null,\n skillValueOptions: [],\n account: null,\n editAttribute: false,\n alerts: [],\n editComment: false,\n skillLevelDescription: null,\n allowEditComment: false,\n badgeRequest: this.props.badgeRequest,\n openSuggestEditLowerLevelProfile: false,\n openAddActionDialog: false,\n openAddEvidenceDialog: false,\n pendingSaveEvidence: false,\n jobLorProfiles: this.props.jobLorProfiles ? [...this.props.jobLorProfiles] : [],\n jobSkillProfiles: this.props.jobSkillProfiles ? [...this.props.jobSkillProfiles] : [],\n showDialogEvidenceListTs: null,\n showDialogEvidenceDetailTs: null,\n };\n\n this.openEditSkillProfile = this.openEditSkillProfile.bind(this);\n this.togleEditSkillProfile = this.togleEditSkillProfile.bind(this);\n this.handleChangeSkillLevel = this.handleChangeSkillLevel.bind(this);\n this.handleSaveEditProfileClick = this.handleSaveEditProfileClick.bind(this);\n\n this.openEditSkillAttribute = this.openEditSkillAttribute.bind(this);\n this.togleEditSkillAttribute = this.togleEditSkillAttribute.bind(this);\n\n this.initData = this.initData.bind(this);\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n const skillValueOptions = [\n {\n value: \"N\",\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"EditSkillLevelNone\", \"None\"),\n numericVal: 0,\n labelVal: \"My skills (Current and Past) are NOT a good match (<50%) for this description\",\n },\n {\n value: \"NA\",\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"EditSkillLevelKnowledge\", \"Knowledge\"), //\"Previous\",\n numericVal: 0.25,\n labelVal: \"My CURRENT skills are NOT a good match to this description. \n \n \n \n \n {\n this.handleAcceptSuggestEditLowerLevelProfile();\n }}\n >\n \n \n \n \n );\n };\n\n handleAcceptSuggestEditLowerLevelProfile = () => {\n const { editedCategory, editedSubCategory, editedSkill, skillValueOptions, editExtraFrameworkSkill } = this.state;\n let skillProfiles = this.state.skillProfiles;\n const { extraFrameworkCapabilities } = this.props;\n\n let topOption = null;\n if (editedCategory.isExtraFramework) {\n const leastOption = extraFrameworkCapabilities ? [...extraFrameworkCapabilities].sort((b, a) => a.weight - b.weight)[0] : null;\n topOption = {\n numericVal: leastOption.weight,\n stringVal: leastOption.capability,\n labelVal: null,\n isExtraFramework: editedCategory.isExtraFramework,\n };\n } else {\n const leastOption = skillValueOptions ? [...skillValueOptions].sort((b, a) => a.numericVal - b.numericVal)[0] : null;\n topOption = {\n numericVal: leastOption.numericVal,\n stringVal: leastOption.value,\n labelVal: leastOption.labelVal,\n isExtraFramework: editedCategory.isExtraFramework,\n };\n }\n\n const skillCodeProfiles = skillProfiles && editedSkill ? [...skillProfiles.filter((x) => x.skillCode === editedSkill.skillsCode)] : [];\n let jobSkillProfiles = this.props.jobSkillProfiles && editedSkill ? this.props.jobSkillProfiles.filter((it) => it.skillCode == editedSkill.skillsCode) : [];\n\n jobSkillProfiles.forEach((jobSkillProfile) => {\n jobSkillProfile.isProvidedUpper = false;\n });\n\n if (editedSkill) {\n jobSkillProfiles.forEach((jobSkillProfile) => {\n if (!editedCategory.isExtraFramework == true) {\n if (\n skillCodeProfiles.filter((it) => !it.editedStringVal).filter((it) => it.stringVal != \"N\" && it.level == jobSkillProfile.level).length == 0 &&\n skillCodeProfiles.filter((it) => !it.editedStringVal).filter((it) => it.stringVal != \"N\" && it.level > jobSkillProfile.level).length > 0\n ) {\n jobSkillProfile.isProvidedUpper = true;\n }\n } else {\n if (\n skillCodeProfiles.filter((it) => !it.editedStringVal).filter((it) => it.numericVal != 0 && it.level == jobSkillProfile.level).length == 0 &&\n skillCodeProfiles.filter((it) => !it.editedStringVal).filter((it) => it.level > jobSkillProfile.level && it.numericVal != 0).length > 0\n ) {\n jobSkillProfile.isProvidedUpper = true;\n }\n }\n });\n }\n\n let editedProfiles = [];\n jobSkillProfiles\n .filter((it) => it.isProvidedUpper)\n .forEach((jobSkillProfile) => {\n const skillLevel = editedSkill ? editedSkill.levels.find((it) => it.level == jobSkillProfile.level) : null;\n\n if (skillProfiles.find((skillProfile) => skillProfile.skillCode == jobSkillProfile.skillCode && skillProfile.level == jobSkillProfile.level)) {\n let skillProfile = skillProfiles.find((skillProfile) => skillProfile.skillCode == jobSkillProfile.skillCode && skillProfile.level == jobSkillProfile.level);\n if (skillProfile) {\n skillProfile.editedStringVal = topOption.stringVal;\n skillProfile.edited = true;\n skillProfile.source = \"skillProfiles\";\n\n skillProfile.editedNumericVal = topOption.numericVal;\n skillProfile.editedLabelVal = topOption.labelVal;\n\n skillProfile.isExtraFramework = editedCategory.isExtraFramework;\n skillProfile.extraFrameworkLevel = skillLevel ? skillLevel.extraFrameworkLevel : null;\n skillProfile.extraFrameworkLevelId = skillLevel ? skillLevel.extraFrameworkLevelId : null;\n\n editedProfiles.push(skillProfile);\n }\n } else {\n const skillProfile = {\n category: editedCategory.name,\n subCategory: editedSubCategory.name,\n skill: editedSkill.name,\n skillCode: jobSkillProfile.skillCode,\n level: jobSkillProfile.level,\n editedStringVal: topOption.stringVal,\n editedNumericVal: topOption.numericVal,\n editedLabelVal: topOption.labelVal,\n edited: true,\n source: \"skillProfiles\",\n isExtraFramework: editedCategory.isExtraFramework,\n extraFrameworkLevel: skillLevel ? skillLevel.extraFrameworkLevel : null,\n extraFrameworkLevelId: skillLevel ? skillLevel.extraFrameworkLevelId : null,\n };\n\n skillProfiles.push(skillProfile);\n editedProfiles.push(skillProfile);\n }\n });\n\n if (this.props.managedPeople) {\n this.props.handleManagerSuggestEditLowerLevelProfile(editedProfiles);\n } else {\n this.props.handleSuggestEditLowerLevelProfile(editedProfiles);\n }\n\n this.setState({ openSuggestEditLowerLevelProfile: false, skillProfiles: [...skillProfiles] });\n };\n\n elementSkill(skillsCode, level, levels, subCategorySkillProfiles, catColour, colour, skillColour, category, subCategory, showProposedAction, proposeSkills, showSuggestedUpdate, suggestedSkills) {\n const { badgeRequest } = this.state;\n const { showEditSkill, isShowJobProfile, badgeCertification, showEditCertify, evidences } = this.props;\n\n const skillBadgeRequest =\n badgeRequest && badgeRequest.requestCertificationEntries && badgeRequest.requestCertificationEntries.length > 0\n ? badgeRequest.requestCertificationEntries.find((it) => it.category == category.name && it.subCategory == subCategory.name && it.skillsCode == skillsCode && it.level == level)\n : null;\n\n const colFully = `${colour}`;\n const colLargely = `repeating-linear-gradient(45deg, ${colour}, ${colour} 5px, ${skillColour} 5px, ${skillColour} 10px)`;\n const colPrevious = `repeating-linear-gradient(${colour}, ${colour} 5px, ${skillColour} 5px, ${skillColour} 10px)`;\n const colUnmatched = `${skillColour}`;\n\n let colProposed = `#f2aa84`;\n let proposedCapabilityNumericVal = 0;\n const colProposedCompetent = `#f2aa84`;\n const colProposedProficient = `repeating-linear-gradient(45deg, #f2aa84, #f2aa84 5px, #ffffff 5px, #ffffff 10px)`;\n const colProposedKnowledge = `repeating-linear-gradient(#f2aa84, #f2aa84 5px, #ffffff 5px, #ffffff 10px)`;\n\n if (showProposedAction && proposeSkills && proposeSkills.find((s) => s.code == skillsCode && s.level == level)) {\n if (proposeSkills.find((s) => s.code == skillsCode && s.level == level).capability == \"Competent\") {\n colProposed = colProposedCompetent;\n proposedCapabilityNumericVal = 1;\n } else if (proposeSkills.find((s) => s.code == skillsCode && s.level == level).capability == \"Proficient\") {\n colProposed = colProposedProficient;\n proposedCapabilityNumericVal = 0.5;\n } else if (proposeSkills.find((s) => s.code == skillsCode && s.level == level).capability == \"Knowledge\") {\n colProposed = colProposedKnowledge;\n proposedCapabilityNumericVal = 0.25;\n }\n }\n\n let colSuggested = `#f2aa84`;\n const colSuggestedCompetent = `#f2aa84`;\n const colSuggestedProficient = `repeating-linear-gradient(45deg, #f2aa84, #f2aa84 5px, #ffffff 5px, #ffffff 10px)`;\n const colSuggestedKnowledge = `repeating-linear-gradient(#f2aa84, #f2aa84 5px, #ffffff 5px, #ffffff 10px)`;\n\n if (showSuggestedUpdate && suggestedSkills && suggestedSkills.find((s) => s.skillCode == skillsCode && s.level == level)) {\n if (suggestedSkills.find((s) => s.skillCode == skillsCode && s.level == level).stringVal == \"M\") {\n colSuggested = colSuggestedCompetent;\n } else if (suggestedSkills.find((s) => s.skillCode == skillsCode && s.level == level).stringVal == \"P\") {\n colSuggested = colSuggestedProficient;\n } else if (suggestedSkills.find((s) => s.skillCode == skillsCode && s.level == level).stringVal == \"NA\") {\n colSuggested = colSuggestedKnowledge;\n }\n }\n\n const colDesirable = `repeating-linear-gradient(90deg, ${colour}, ${colour} 5px, ${skillColour} 5px, ${skillColour} 10px)`;\n\n const { highlightGap, selectedJobMatchType } = this.props;\n\n const jobSkillProfiles = this.props.jobSkillProfiles;\n\n const jobSkillProfile = jobSkillProfiles && jobSkillProfiles.find((it) => it.skillCode == skillsCode && it.level == level);\n\n const skillLevel = levels.filter((x) => x.level == level)[0];\n let skillLevelDescription = skillLevel ? skillLevel.description : \"\";\n skillLevelDescription = this.contentTranslator(this.props.contentTranslations, \"SkillLevels\", `${skillsCode} ${level} Description`, skillLevelDescription);\n\n let openCommentEditor = false;\n let openCommentAllowEdit = false;\n\n if (!badgeCertification && subCategorySkillProfiles.filter((x) => x.level == level).length > 0) {\n const skillProfile = subCategorySkillProfiles.find((x) => x.level == level);\n const skillVal = skillProfile && (skillProfile.editedStringVal ? skillProfile.editedStringVal : skillProfile.stringVal);\n const skillNumericVal = skillProfile && (skillProfile.editedNumericVal ? skillProfile.editedNumericVal : skillProfile.numericVal);\n\n openCommentEditor = false;\n openCommentAllowEdit = false;\n\n if (!isShowJobProfile && !showEditSkill && !showEditCertify && ((skillProfile.edited && skillProfile.editedNumericVal != 0) || (!skillProfile.edited && skillProfile.numericVal != 0))) {\n if (\n (this.props.selectedprofileType.value == \"Self Assessed\" && !this.props.managedPeople) ||\n (this.props.selectedprofileType.value == \"Self Assessed\" && this.props.managedPeople && skillProfile.comment) ||\n ((this.props.managedPeople || skillProfile.comment) && this.props.selectedprofileType.value == \"Endorsed\")\n ) {\n openCommentEditor = true;\n }\n\n if ((this.props.selectedprofileType.value == \"Self Assessed\" && !this.props.managedPeople) || (this.props.managedPeople && this.props.selectedprofileType.value == \"Endorsed\")) {\n openCommentAllowEdit = true;\n }\n }\n\n var skillLevelReadOnlyEvidences = evidences\n ? evidences.filter((it) => !it.aiReviewed && it.skillLevels && it.skillLevels.find((l) => l.skillCode == skillsCode && l.level == level) && (it.isDigitalBadge || it.isNonEditable || (it.isEditableToCreatorOnly && it.createdById != this.props.personId)))\n : [];\n var skillLevelEditableEvidences = evidences\n ? evidences.filter((it) => !it.aiReviewed && it.skillLevels && it.skillLevels.find((l) => l.skillCode == skillsCode && l.level == level) && !(it.isDigitalBadge || it.isNonEditable || (it.isEditableToCreatorOnly && it.createdById != this.props.personId)))\n : [];\n var skillLevelConfirmedEvidences = evidences ? evidences.filter((it) => it.aiReviewed && it.skillLevels && it.skillLevels.find((l) => l.skillCode == skillsCode && l.level == level)) : [];\n\n const numberEvidenceTypes = (skillLevelReadOnlyEvidences.length > 0 ? 1 : 0) + (skillLevelEditableEvidences.length > 0 ? 1 : 0) + (skillLevelConfirmedEvidences.length > 0 ? 1 : 0);\n const evidenceAvailable = skillLevelReadOnlyEvidences.length > 0 || skillLevelEditableEvidences.length > 0 || skillLevelConfirmedEvidences.length > 0;\n\n return (\n \n s.type == \"Skill\" && s.code == skillsCode && s.level == level) && proposedCapabilityNumericVal > skillNumericVal\n ? colProposed\n : showSuggestedUpdate && suggestedSkills && suggestedSkills.find((s) => s.skillCode == skillsCode && s.level == level) && suggestedSkills.find((s) => s.skillCode == skillsCode && s.level == level).numericVal > skillNumericVal\n ? colSuggested\n : skillVal === \"M\"\n ? colFully\n : isShowJobProfile\n ? colDesirable\n : skillVal === \"P\"\n ? colLargely\n : skillVal === \"NA\"\n ? colPrevious\n : colUnmatched,\n borderRight: \"1px solid #FFFFFF\",\n borderBottom: `1px solid #dee2e6`,\n padding: \"0px\",\n }}\n >\n \n
\n openCommentEditor &&\n this.openEditSkillComment(\n {\n id: category.id,\n name: this.contentTranslator(this.props.contentTranslations, \"Categories\", category.name, category.name),\n colour: category.colour,\n },\n {\n id: subCategory.id,\n name: this.contentTranslator(this.props.contentTranslations, \"SubCategories\", subCategory.name, subCategory.name),\n colour: subCategory.colour,\n skillColour: subCategory.skillColour,\n },\n this.contentTranslator(this.props.contentTranslations, \"SkillLevels\", `${skillProfile.skillCode} ${skillProfile.level}`, skillLevel.description),\n skillProfile,\n openCommentAllowEdit\n )\n }\n >\n {skillProfile.comment && ((skillProfile.edited && skillProfile.editedNumericVal != 0) || (!skillProfile.edited && skillProfile.numericVal != 0)) ? \n \n {skillLevelEditableEvidences.length > 0 && (\n \n !showEditSkill && (skillLevelEditableEvidences.length == 1 ? this.openEvidenceDetailModal(skillLevelEditableEvidences[0]) : this.openEvidenceListModal(skillsCode, level, \"OPENED\"))}\n />\n \n \n \n )}\n \n \n {skillLevelReadOnlyEvidences.length > 0 && (\n \n !showEditSkill && (skillLevelReadOnlyEvidences.length == 1 ? this.openEvidenceDetailModal(skillLevelReadOnlyEvidences[0]) : this.openEvidenceListModal(skillsCode, level, \"PROTECTED\"))}\n />\n \n \n \n )}\n \n \n {skillLevelConfirmedEvidences.length > 0 && (\n \n !showEditSkill && (skillLevelConfirmedEvidences.length == 1 ? this.openEvidenceDetailModal(skillLevelConfirmedEvidences[0]) : this.openEvidenceListModal(skillsCode, level, \"CONFIRMED\"))}\n />\n \n \n \n )}\n \n
\n )}\n \n \n \n {highlightGap && (\n \n \n \n \n )}\n \n );\n } else if (badgeCertification && skillBadgeRequest) {\n const skillProfile = skillBadgeRequest;\n const skillVal = skillBadgeRequest.editedStringVal ? skillBadgeRequest.editedStringVal : skillBadgeRequest.stringVal;\n\n openCommentEditor = false;\n openCommentAllowEdit = false;\n\n return (\n \n \n openCommentEditor &&\n this.openEditSkillComment(\n {\n id: category.id,\n name: this.contentTranslator(this.props.contentTranslations, \"Categories\", category.name, category.name),\n colour: category.colour,\n },\n {\n id: subCategory.id,\n name: this.contentTranslator(this.props.contentTranslations, \"SubCategories\", subCategory.name, subCategory.name),\n colour: subCategory.colour,\n skillColour: subCategory.skillColour,\n },\n this.contentTranslator(this.props.contentTranslations, \"SkillLevels\", `${skillProfile.skillsCode} ${skillProfile.level}`, skillLevel.description),\n skillProfile,\n openCommentAllowEdit\n )\n }\n >\n \n {highlightGap && (\n \n \n \n \n )}\n \n );\n } else {\n return (\n \n s.code == skillsCode && s.level == level)\n ? colProposed\n : showSuggestedUpdate && suggestedSkills && suggestedSkills.find((s) => s.skillCode == skillsCode && s.level == level)\n ? colSuggested\n : colUnmatched\n : \"#FFFFFF\",\n borderRight: \"1px solid #FFFFFF\",\n borderBottom: `1px solid #dee2e6`,\n }}\n >\n {skillLevel && (\n \n )}\n {highlightGap &&\n (jobSkillProfile && skillLevel ? (\n \n \n {skillLevel && (\n \n )}\n \n ) : (\n \n \n {skillLevel && (\n \n )}\n \n ))}\n \n );\n }\n }\n\n elementSkillExtraFramework(skillsCode, skillLevelSelection, extraFrameworkLevelId, levels, subCategorySkillProfiles, catColour, colour, skillColour, category, subCategory, showProposedAction, proposeSkills, showSuggestedUpdate, suggestedSkills) {\n const { badgeRequest } = this.state;\n const { showEditSkill, isShowJobProfile, extraFrameworkCapabilities, badgeCertification, showEditCertify, evidences } = this.props;\n\n const colFully = `${colour}`;\n const colLargely = `repeating-linear-gradient(45deg, ${colour}, ${colour} 5px, ${skillColour} 5px, ${skillColour} 10px)`;\n const colPrevious = `repeating-linear-gradient(${colour}, ${colour} 5px, ${skillColour} 5px, ${skillColour} 10px)`;\n const colUnmatched = `${skillColour}`;\n\n const colDesirable = `repeating-linear-gradient(90deg, ${colour}, ${colour} 5px, ${skillColour} 5px, ${skillColour} 10px)`;\n\n const { highlightGap, selectedJobMatchType } = this.props;\n\n const jobSkillProfiles = this.props.jobSkillProfiles;\n\n const jobSkillProfile = jobSkillProfiles && jobSkillProfiles.find((it) => it.skillCode == skillsCode && it.extraFrameworkLevelId == extraFrameworkLevelId);\n\n const skillLevel = levels.filter((x) => x.extraFrameworkLevelId == extraFrameworkLevelId)[0];\n let skillLevelDescription = skillLevel ? skillLevel.description : \"\";\n skillLevelDescription = this.contentTranslator(this.props.contentTranslations, \"SkillLevels\", `${skillsCode} ${extraFrameworkLevelId} Description`, skillLevelDescription);\n\n const skillBadgeRequest =\n badgeRequest && badgeRequest.requestCertificationEntries && badgeRequest.requestCertificationEntries.length > 0\n ? badgeRequest.requestCertificationEntries.find((it) => it.category == category.name && it.subCategory == subCategory.name && it.skillsCode == skillsCode && it.level == (skillLevel != null ? skillLevel.level : null))\n : null;\n\n let openCommentEditor = false;\n let openCommentAllowEdit = false;\n\n let colProposed = `#f2aa84`;\n let proposedCapability = \"\";\n const colProposedCompetent = `#f2aa84`;\n const colProposedProficient = `repeating-linear-gradient(45deg, #f2aa84, #f2aa84 5px, #ffffff 5px, #ffffff 10px)`;\n const colProposedKnowledge = `repeating-linear-gradient(#f2aa84, #f2aa84 5px, #ffffff 5px, #ffffff 10px)`;\n\n if (showProposedAction) {\n showProposedAction = false;\n\n if (skillLevelSelection == \"Single\") {\n const extraFrameworkSkillProfiles = subCategorySkillProfiles.filter((x) => x.category == category.name && x.subCategory == subCategory.name && x.skillCode == skillsCode && (x.stringVal !== \"N\" || x.editedStringVal));\n const extraFrameworkProposeSkills = proposeSkills\n .filter((x) => x.type == \"Skill\" && x.category == category.name && x.subCategory == subCategory.name && x.code == skillsCode)\n .map((it) => {\n return {\n capability: it.capability,\n numericVal: it.capability == \"Competent\" ? 1 : it.capability == \"Proficient\" ? 0.5 : it.capability == \"Knowledge\" ? 0.25 : 0,\n category: it.category,\n code: it.code,\n id: it.id,\n level: it.level,\n name: it.name,\n subCategory: it.subCategory,\n type: it.type,\n };\n });\n\n let maxProposeSkill = null;\n if (extraFrameworkProposeSkills.length > 0) {\n maxProposeSkill = extraFrameworkProposeSkills.sort((a, b) => b.level - a.level)[0];\n }\n\n if (skillLevel && maxProposeSkill && maxProposeSkill.level == skillLevel.level && extraFrameworkSkillProfiles.length == 0 && extraFrameworkProposeSkills.length > 0) {\n // No profile skills but have proposed skills\n showProposedAction = true;\n } else if (\n skillLevel &&\n maxProposeSkill &&\n maxProposeSkill.level == skillLevel.level &&\n extraFrameworkSkillProfiles.filter((x) => extraFrameworkProposeSkills.some((y) => x.skillCode == y.code && (y.level > x.level || (x.level == y.level && y.numericVal > x.numericVal)))).length > 0\n ) {\n // Have proposed skills with better capability\n showProposedAction = true;\n } else if (skillLevel && maxProposeSkill && maxProposeSkill.level == skillLevel.level && extraFrameworkProposeSkills.filter((x) => !extraFrameworkSkillProfiles.some((y) => x.code == y.skillCode)).length > 0) {\n // Have proposed skills which not exist in profile skills\n showProposedAction = true;\n }\n\n if (showProposedAction && maxProposeSkill) {\n if (maxProposeSkill.capability == \"Competent\") {\n colProposed = colProposedCompetent;\n } else if (maxProposeSkill.capability == \"Proficient\") {\n colProposed = colProposedProficient;\n } else if (maxProposeSkill.capability == \"Knowledge\") {\n colProposed = colProposedKnowledge;\n }\n }\n } else {\n if (proposeSkills && skillLevel && proposeSkills.find((s) => s.code == skillsCode && s.level == skillLevel.level)) {\n showProposedAction = true;\n proposedCapability = proposeSkills.find((s) => s.code == skillsCode && s.level == skillLevel.level).capability;\n if (proposedCapability == \"Competent\") {\n colProposed = colProposedCompetent;\n } else if (proposedCapability == \"Proficient\") {\n colProposed = colProposedProficient;\n } else if (proposedCapability == \"Knowledge\") {\n colProposed = colProposedKnowledge;\n }\n }\n }\n }\n\n let colSuggested = `#f2aa84`;\n const colSuggestedCompetent = `#f2aa84`;\n const colSuggestedProficient = `repeating-linear-gradient(45deg, #f2aa84, #f2aa84 5px, #ffffff 5px, #ffffff 10px)`;\n const colSuggestedKnowledge = `repeating-linear-gradient(#f2aa84, #f2aa84 5px, #ffffff 5px, #ffffff 10px)`;\n\n if (showSuggestedUpdate) {\n showSuggestedUpdate = false;\n\n if (skillLevelSelection == \"Single\") {\n const extraFrameworkSkillProfiles = subCategorySkillProfiles.filter((x) => x.category == category.name && x.subCategory == subCategory.name && x.skillCode == skillsCode && (x.stringVal !== \"N\" || x.editedStringVal));\n const extraFrameworkSuggestedSkills = suggestedSkills\n .filter((x) => x.category == category.name && x.subCategory == subCategory.name && x.skillCode == skillsCode)\n .map((it) => {\n return {\n numericVal: it.numericVal,\n category: it.category,\n subCategory: it.subCategory,\n id: it.id,\n skill: it.skill,\n skillCode: it.skillCode,\n level: it.level,\n };\n });\n\n let maxSuggestedSkill = null;\n if (extraFrameworkSuggestedSkills.length > 0) {\n maxSuggestedSkill = extraFrameworkSuggestedSkills.sort((a, b) => b.level - a.level)[0];\n }\n\n if (skillLevel && maxSuggestedSkill && maxSuggestedSkill.level == skillLevel.level && extraFrameworkSkillProfiles.length == 0 && extraFrameworkSuggestedSkills.length > 0) {\n // No profile skills but have suggested skills\n showSuggestedUpdate = true;\n } else if (\n skillLevel &&\n maxSuggestedSkill &&\n maxSuggestedSkill.level == skillLevel.level &&\n extraFrameworkSkillProfiles.filter((x) => extraFrameworkSuggestedSkills.some((y) => x.skillCode == y.skillCode && (y.level > x.level || (x.level == y.level && y.numericVal > x.numericVal)))).length > 0\n ) {\n // Have suggested skills with better capability\n showSuggestedUpdate = true;\n } else if (skillLevel && maxSuggestedSkill && maxSuggestedSkill.level == skillLevel.level && extraFrameworkSuggestedSkills.filter((x) => !extraFrameworkSkillProfiles.some((y) => x.skillCode == y.skillCode)).length > 0) {\n // Have suggested skills which not exist in profile skills\n showSuggestedUpdate = true;\n }\n\n if (showSuggestedUpdate && maxSuggestedSkill) {\n const skillVal = maxSuggestedSkill && (maxSuggestedSkill.editedStringVal ? maxSuggestedSkill.editedStringVal : maxSuggestedSkill.stringVal);\n\n if (extraFrameworkCapabilities && extraFrameworkCapabilities.length > 0) {\n if (extraFrameworkCapabilities.find((it) => it.capability == skillVal)) {\n extraFrameworkCapability = extraFrameworkCapabilities.find((it) => it.capability == skillVal);\n const index = extraFrameworkCapabilities.indexOf(extraFrameworkCapability);\n\n if (index == 1) {\n colSuggested = colSuggestedCompetent;\n } else if (index == 2) {\n colSuggested = colSuggestedProficient;\n } else if (index == 3) {\n colSuggested = colSuggestedKnowledge;\n }\n }\n }\n }\n } else {\n if (suggestedSkills && skillLevel && suggestedSkills.find((s) => s.skillCode == skillsCode && s.level == skillLevel.level)) {\n showSuggestedUpdate = true;\n const suggestedSkill = suggestedSkills.find((s) => s.skillCode == skillsCode && s.level == skillLevel.level);\n const skillVal = suggestedSkill && (suggestedSkill.editedStringVal ? suggestedSkill.editedStringVal : suggestedSkill.stringVal);\n\n if (extraFrameworkCapabilities && extraFrameworkCapabilities.length > 0) {\n if (extraFrameworkCapabilities.find((it) => it.capability == skillVal)) {\n extraFrameworkCapability = extraFrameworkCapabilities.find((it) => it.capability == skillVal);\n const index = extraFrameworkCapabilities.indexOf(extraFrameworkCapability);\n\n if (index == 1) {\n colSuggested = colSuggestedCompetent;\n } else if (index == 2) {\n colSuggested = colSuggestedProficient;\n } else if (index == 3) {\n colSuggested = colSuggestedKnowledge;\n }\n }\n }\n }\n }\n }\n\n if (!badgeCertification && subCategorySkillProfiles.filter((x) => x.extraFrameworkLevelId == extraFrameworkLevelId).length > 0) {\n const skillProfile = subCategorySkillProfiles.find((x) => x.extraFrameworkLevelId == extraFrameworkLevelId);\n const skillVal = skillProfile && (skillProfile.editedStringVal ? skillProfile.editedStringVal : skillProfile.stringVal);\n\n let colBackground = colUnmatched;\n let extraFrameworkCapability;\n\n if (!isShowJobProfile) {\n if (extraFrameworkCapabilities && extraFrameworkCapabilities.length > 0) {\n if (extraFrameworkCapabilities.find((it) => it.capability == skillVal)) {\n extraFrameworkCapability = extraFrameworkCapabilities.find((it) => it.capability == skillVal);\n const index = extraFrameworkCapabilities.indexOf(extraFrameworkCapability);\n\n if (index == 0) {\n colBackground = colUnmatched;\n } else if (index == 1) {\n colBackground = colFully;\n } else if (index == 2) {\n colBackground = colLargely;\n } else if (index == 3) {\n colBackground = colPrevious;\n }\n }\n }\n } else {\n if (skillVal == \"M\") {\n colBackground = colFully;\n } else {\n colBackground = colDesirable;\n }\n }\n\n openCommentEditor = false;\n openCommentAllowEdit = false;\n\n if (!isShowJobProfile && !showEditSkill && !showEditCertify && ((skillProfile.edited && skillProfile.editedNumericVal != 0) || (!skillProfile.edited && skillProfile.numericVal != 0))) {\n if (\n (this.props.selectedprofileType.value == \"Self Assessed\" && !this.props.managedPeople) ||\n (this.props.selectedprofileType.value == \"Self Assessed\" && this.props.managedPeople && skillProfile.comment) ||\n ((this.props.managedPeople || skillProfile.comment) && this.props.selectedprofileType.value == \"Endorsed\")\n ) {\n openCommentEditor = true;\n }\n\n if ((this.props.selectedprofileType.value == \"Self Assessed\" && !this.props.managedPeople) || (this.props.managedPeople && this.props.selectedprofileType.value == \"Endorsed\")) {\n openCommentAllowEdit = true;\n }\n }\n\n var skillLevelReadOnlyEvidences = evidences\n ? evidences.filter((it) => !it.aiReviewed && it.skillLevels && it.skillLevels.find((l) => l.skillCode == skillsCode && l.level == skillLevel.level) && (it.isDigitalBadge || it.isNonEditable || (it.isEditableToCreatorOnly && it.createdById != this.props.personId)))\n : [];\n var skillLevelEditableEvidences = evidences\n ? evidences.filter((it) => !it.aiReviewed && it.skillLevels && it.skillLevels.find((l) => l.skillCode == skillsCode && l.level == skillLevel.level) && !(it.isDigitalBadge || it.isNonEditable || (it.isEditableToCreatorOnly && it.createdById != this.props.personId)))\n : [];\n var skillLevelConfirmedEvidences = evidences ? evidences.filter((it) => it.aiReviewed && it.skillLevels && it.skillLevels.find((l) => l.skillCode == skillsCode && l.level == skillLevel.level)) : [];\n\n const numberEvidenceTypes = (skillLevelReadOnlyEvidences.length > 0 ? 1 : 0) + (skillLevelEditableEvidences.length > 0 ? 1 : 0) + (skillLevelConfirmedEvidences.length > 0 ? 1 : 0);\n const evidenceAvailable = skillLevelReadOnlyEvidences.length > 0 || skillLevelEditableEvidences.length > 0 || skillLevelConfirmedEvidences.length > 0;\n\n return (\n \n \n \n
\n {evidenceAvailable && (\n \n
\n \n {skillLevelEditableEvidences.length > 0 && (\n \n \n )}\n \n \n {skillLevelReadOnlyEvidences.length > 0 && (\n \n \n )}\n \n \n {skillLevelConfirmedEvidences.length > 0 && (\n \n \n )}\n \n
\n
\n {highlightGap && (\n \n \n )}\n \n );\n } else if (badgeCertification && skillBadgeRequest) {\n const skillProfile = skillBadgeRequest;\n const skillVal = skillBadgeRequest.editedStringVal ? skillBadgeRequest.editedStringVal : skillBadgeRequest.stringVal;\n\n openCommentEditor = false;\n openCommentAllowEdit = false;\n\n return (\n \n \n );\n } else {\n return (\n \n \n );\n }\n }\n\n openEvidenceListModal = (skillsCode, level, filterMode) => {\n this.setState({ showDialogEvidenceListTs: new Date(), evidenceFilterSkillsCode: skillsCode, evidenceFilterLevel: level, evidenceFilterMode: filterMode });\n };\n\n openEvidenceDetailModal = (evidence, editMode) => {\n const { containerConfig } = this.props;\n\n if (editMode == null) {\n const fileName = evidence.fileName;\n let evidenceOption = \"Upload File\";\n\n if (fileName && fileName != \"\") {\n evidenceOption = \"Upload File\";\n } else if (evidence.link && evidence.link != \"\") {\n evidenceOption = \"Specify Link\";\n } else if (evidence.notes && evidence.notes != \"\" && !evidence.notes.startsWith(\"Evidence created from an Action\")) {\n evidenceOption = \"Description in the Notes\";\n } else if (evidence.evidenceType == \"Text\") {\n evidenceOption = \"Description in the Notes\";\n } else {\n evidenceOption = \"Specify Link\";\n }\n\n if (\n !(evidence.isDigitalBadge || evidence.isNonEditable || (evidence.isEditableToCreatorOnly && evidence.createdById != this.props.personId)) &&\n containerConfig &&\n containerConfig.enableAIEvidenceReviewer &&\n (evidence.lorLevels ? evidence.lorLevels : []).length + (evidence.skillLevels ? evidence.skillLevels : []).length == 1 &&\n (evidenceOption == \"Upload File\" || evidenceOption == \"Description in the Notes\")\n ) {\n this.setState({ showDialogEvidenceDetailTs: new Date(), editedEvidence: evidence, editMode: false });\n } else {\n this.setState({ showDialogEvidenceDetailTs: new Date(), editedEvidence: evidence, editMode: true });\n }\n } else {\n this.setState({ showDialogEvidenceDetailTs: new Date(), editedEvidence: evidence, editMode });\n }\n };\n\n renderModalEditSkill = () => {\n const { editedCategory, editedSubCategory, editedSkill, editedSkillProfiles, skillValueOptions, editExtraFrameworkSkill, badgeRequest, editedSkillEvidence } = this.state;\n const { extraFrameworkCapabilities, badgeCertification, maxNumberOfBadgeRequestSkill, editedSkillEvidences, selectedprofileType, containerConfig } = this.props;\n\n let capabilityValueOptions = [];\n\n if (editExtraFrameworkSkill) {\n capabilityValueOptions = extraFrameworkCapabilities.map((extraFrameworkCapability) => {\n return {\n value: extraFrameworkCapability.capability,\n numericVal: extraFrameworkCapability.weight,\n labelVal: extraFrameworkCapability.capability,\n label: extraFrameworkCapability.capability,\n };\n });\n }\n\n let maxNumberExceeded = false;\n let numberBadgeRequested = 0;\n\n if (badgeCertification) {\n let requestCertificationEntries = badgeRequest && badgeRequest.requestCertificationEntries ? [...badgeRequest.requestCertificationEntries] : [];\n requestCertificationEntries.forEach((requestCertificationEntry) => {\n let stringVal = requestCertificationEntry.storedStringVal ? requestCertificationEntry.storedStringVal : requestCertificationEntry.editedStringVal ? requestCertificationEntry.editedStringVal : requestCertificationEntry.stringVal ? requestCertificationEntry.stringVal : \"N\";\n\n if (stringVal != \"N\") {\n numberBadgeRequested += 1;\n }\n });\n\n maxNumberExceeded = numberBadgeRequested >= maxNumberOfBadgeRequestSkill;\n }\n\n const skillProfilesRequireEvidence =\n selectedprofileType.value == \"Self Assessed\" && editedSkillProfiles && editedSkillProfiles.length > 0\n ? editedSkillProfiles.filter((it) => (it.numericVal && it.editedNumericVal && it.editedNumericVal > it.numericVal && it.editedNumericVal >= 0.5) || (!it.numericVal && it.editedNumericVal && it.editedNumericVal >= 0.5))\n : [];\n const skillProfilesMissingEvidence = selectedprofileType.value == \"Self Assessed\" && editedSkillEvidences ? skillProfilesRequireEvidence.filter((p) => !editedSkillEvidences.find((e) => e.skillLevels.find((el) => p.skillCode == el.skillCode && p.level == el.level))) : [];\n const showEvidence = containerConfig && containerConfig.autoPromptEvidence && selectedprofileType.value == \"Self Assessed\" && skillProfilesMissingEvidence.length > 0;\n const saveButtonDisable =\n containerConfig && containerConfig.autoPromptEvidence && selectedprofileType.value == \"Self Assessed\"\n ? skillProfilesRequireEvidence.length == 0 || (skillProfilesRequireEvidence.length > 0 && editedSkillEvidence) || (skillProfilesRequireEvidence.length > 0 && editedSkillEvidences && editedSkillEvidences.length > 0 && skillProfilesMissingEvidence.length == 0)\n ? false\n : true\n : false;\n\n if (this.state.editSkill) {\n return (\n \n \n \n \n \n \n \n {showEvidence && (\n \n this.handleAddPendingSaveEvidence(editedSkill)}>\n {\" \"}\n \n )}\n \n {\" \"}\n this.handleSaveEditProfileClick()} disabled={saveButtonDisable}>\n \n \n \n );\n } else {\n return \"\";\n }\n };\n\n handleChangeSkillLevel(skill) {\n const { badgeCertification } = this.props;\n let badgeRequest = this.state.badgeRequest;\n let requestCertificationEntries = badgeRequest && badgeRequest.requestCertificationEntries ? [...badgeRequest.requestCertificationEntries] : [];\n\n let editedSkillProfiles = this.state.editedSkillProfiles;\n let changedSkill = null;\n\n if (!badgeCertification) {\n if (skill.id) {\n changedSkill = editedSkillProfiles.find((it) => it.id == skill.id);\n if (changedSkill) {\n changedSkill.editedStringVal = skill.value;\n changedSkill.editedNumericVal = skill.numericVal;\n }\n } else {\n changedSkill = editedSkillProfiles.find((it) => it.skillCode == skill.skillsCode && it.level == skill.skillLevel);\n if (changedSkill) {\n changedSkill.editedStringVal = skill.value;\n changedSkill.editedNumericVal = skill.numericVal;\n } else {\n const addedSkill = {\n category: skill.category,\n subCategory: skill.subCategory,\n skill: skill.skill,\n skillCode: skill.skillsCode,\n level: skill.skillLevel,\n editedStringVal: skill.value,\n editedLabelVal: skill.labelVal,\n editedNumericVal: skill.numericVal,\n isExtraFramework: skill.isExtraFramework ? skill.isExtraFramework : false,\n extraFrameworkLevel: skill.skillExtraFrameworkLevel,\n extraFrameworkLevelId: skill.skillExtraFrameworkLevelId,\n };\n\n editedSkillProfiles.push(addedSkill);\n }\n }\n\n this.setState({ editedSkillProfiles });\n } else {\n if (skill.id) {\n changedSkill = requestCertificationEntries.find((it) => it.id == skill.id);\n if (badgeRequest) {\n changedSkill.storedStringVal = skill.value;\n changedSkill.storedNumericVal = skill.numericVal;\n }\n } else {\n changedSkill = requestCertificationEntries.find((it) => it.skillsCode == skill.skillsCode && it.level == skill.skillLevel);\n if (changedSkill) {\n changedSkill.storedStringVal = skill.value;\n changedSkill.storedNumericVal = skill.numericVal;\n } else {\n const addedSkill = {\n category: skill.category,\n subCategory: skill.subCategory,\n skill: skill.skill,\n skillsCode: skill.skillsCode,\n level: skill.skillLevel,\n storedStringVal: skill.value,\n storedLabelVal: skill.labelVal,\n storedNumericVal: skill.numericVal,\n isExtraFramework: skill.isExtraFramework ? skill.isExtraFramework : false,\n extraFrameworkLevel: skill.skillExtraFrameworkLevel,\n extraFrameworkLevelId: skill.skillExtraFrameworkLevelId,\n };\n\n requestCertificationEntries.push(addedSkill);\n }\n }\n badgeRequest.requestCertificationEntries = [...requestCertificationEntries];\n this.setState({ badgeRequest });\n }\n }\n\n openEditSkillAttribute(editedCategory, editedSubCategory, editedSkill) {\n this.setState({ editAttribute: true, editedCategory, editedSubCategory, editedSkill });\n }\n\n togleEditSkillAttribute() {\n const { editAttribute } = this.state;\n this.setState({ editAttribute: !editAttribute });\n }\n\n updateSkillAttributes = (attributes) => {\n const account = this.state.account;\n\n if (account) {\n account.attributes = attributes;\n this.setState({ account, editAttribute: false });\n }\n };\n\n openEditSkillComment = (editedCategory, editedSubCategory, skillLevelDescription, skillProfile, allowEditComment) => {\n this.setState({ editComment: true, editedCategory, editedSubCategory, skillLevelDescription, editedSkill: skillProfile, allowEditComment });\n };\n\n togleEditSkillComment = () => {\n const { editComment } = this.state;\n this.setState({ editComment: !editComment });\n };\n\n updateSkillComment = () => {\n this.setState({ editComment: false, editedSkill: null });\n };\n\n openSfiaGuidance = (skill) => {\n this.setState({ showSfiaGuidance: true, editedSkill: skill });\n };\n\n togleOpenSfiaGuidance = () => {\n const { showSfiaGuidance } = this.state;\n this.setState({ showSfiaGuidance: !showSfiaGuidance });\n };\n\n renderModalSfiaGuidance = () => {\n const { language } = this.props;\n const { showSfiaGuidance, editedSkill } = this.state;\n\n const guidance = showSfiaGuidance && language && editedSkill && editedSkill.guidances && editedSkill.guidances.filter((it) => it.languageId == language.id).length > 0 ? editedSkill.guidances.filter((it) => it.languageId == language.id)[0] : null;\n\n if (showSfiaGuidance && language && guidance) {\n return (\n \n {`${this.contentTranslator(this.props.contentTranslations, \"Skills\", editedSkill.name, editedSkill.name)} ${editedSkill.skillsCode} ${this.contentTranslator(\n this.props.contentTranslations,\n \"SfiaAll\",\n \"Guidance Notes\",\n \"Guidance Notes\"\n )}`} \n \n \n \n \n \n \n \n \n );\n } else {\n return \"\";\n }\n };\n\n handleAddAction = (skill) => {\n this.setState({ openAddActionDialog: true, actionedSkill: skill });\n };\n\n handleCancelAddAction = () => {\n this.setState({ openAddActionDialog: false, actionedSkill: null });\n };\n\n handleActionPlanAdded = (addedAction) => {\n this.setState({ openAddActionDialog: false, actionedSkill: null });\n this.props.handleActionPlanAdded(addedAction);\n };\n\n renderModalAddAction = () => {\n const { selectedJobMatchType, actions, actionSkills } = this.props;\n const { actionedSkill, openAddActionDialog, jobLorProfiles, jobSkillProfiles, lorProfiles, skillProfiles } = this.state;\n\n let selectedDefaultSkills;\n\n if (actionedSkill && selectedJobMatchType && selectedJobMatchType.value != \"None\") {\n if (jobSkillProfiles) {\n const gapJobSkillProfiles = jobSkillProfiles.filter((it) => it.skillCode == actionedSkill.skillsCode && !it.isFully);\n\n if (gapJobSkillProfiles.length > 0) {\n selectedDefaultSkills = [\n ...gapJobSkillProfiles.map((skill) => {\n return {\n skillName: skill.skill,\n skillCode: skill.skillCode,\n skillLevel: skill.level,\n skillType: \"Skill\",\n };\n }),\n ];\n }\n\n jobSkillProfiles.forEach((jobSkillProfile) => {\n const skillProfile = skillProfiles && skillProfiles.find((x) => x.skillCode == jobSkillProfile.skillCode && x.level == jobSkillProfile.level && (x.numericVal == 1 || x.stringVal == \"M\"));\n const plan = actions ? actions.find((it) => it.skills.some((skill) => skill.code == jobSkillProfile.skillCode && skill.level == jobSkillProfile.level)) : null;\n const gapJobSkillProfile = gapJobSkillProfiles.find((it) => it.skillCode == jobSkillProfile.skillCode && it.level == jobSkillProfile.level);\n\n if (!gapJobSkillProfile && (skillProfile || plan)) {\n jobSkillProfile.actioned = true;\n } else {\n jobSkillProfile.actioned = false;\n }\n });\n }\n\n if (jobLorProfiles) {\n jobLorProfiles.forEach((jobLorProfile) => {\n const lorProfile = lorProfiles.find((it) => it.lorCode == jobLorProfile.lorCode && it.level >= jobLorProfile.level);\n const plan = actions ? actions.find((it) => it.skills.some((skill) => skill.code == jobLorProfile.lorCode && skill.level >= jobLorProfile.level)) : null;\n if (lorProfile || plan) {\n jobLorProfile.actioned = true;\n } else {\n jobLorProfile.actioned = false;\n }\n });\n }\n }\n\n let optionsJob = [];\n\n const jobMatches = this.props.jobMatches;\n const currentJob = jobMatches ? jobMatches.find((it) => it.jobType === \"Current\") : null;\n const futureJob = jobMatches ? jobMatches.find((it) => it.jobType === \"Future\") : null;\n\n if (currentJob) {\n optionsJob.push({\n value: currentJob.jobType + \" - \" + currentJob.jobTitle,\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", currentJob.jobType, currentJob.jobType) + \" - \" + currentJob.jobTitle,\n type: currentJob.jobType,\n id: currentJob.jobId,\n });\n }\n\n if (futureJob) {\n optionsJob.push({\n value: futureJob.jobType + \" - \" + futureJob.jobTitle,\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", futureJob.jobType, futureJob.jobType) + \" - \" + futureJob.jobTitle,\n type: futureJob.jobType,\n id: futureJob.jobId,\n });\n }\n\n return (\n \n \n \n \n
\n \n \n );\n };\n\n handleAddEvidence = (skill) => {\n this.setState({ openAddEvidenceDialog: true, actionedSkill: skill, pendingSaveEvidence: false });\n };\n\n handleAddPendingSaveEvidence = (skill) => {\n this.setState({ openAddEvidenceDialog: true, actionedSkill: skill, pendingSaveEvidence: true });\n };\n\n handleCancelAddEvidence = () => {\n this.setState({ openAddEvidenceDialog: false, actionedSkill: null });\n };\n\n handleEvidenceAdded = (addedEvidence) => {\n this.setState({ openAddEvidenceDialog: false, actionedSkill: null });\n this.props.handleEvidenceAdded(addedEvidence);\n };\n\n renderModalAddEvidence = () => {\n const { selectedJobMatchType, categories, editedSkillEvidences } = this.props;\n const { actionedSkill, openAddEvidenceDialog, lorProfiles, skillProfiles, jobSkillProfiles, pendingSaveEvidence, editedSkillProfiles } = this.state;\n\n let defaultSelectedSkills;\n\n if (pendingSaveEvidence) {\n const requiredEvidenceSkills =\n editedSkillProfiles && editedSkillProfiles.length > 0 ? editedSkillProfiles.filter((it) => (it.numericVal && it.editedNumericVal && it.editedNumericVal > it.numericVal && it.editedNumericVal >= 0.5) || (!it.numericVal && it.editedNumericVal && it.editedNumericVal >= 0.5)) : [];\n defaultSelectedSkills = requiredEvidenceSkills\n .filter((p) => !editedSkillEvidences.find((e) => e.skillLevels.find((el) => p.skillCode == el.skillCode && p.level == el.level)))\n .map((skill) => {\n const category = categories.find((it) => it.subCategories.some((subCategory) => subCategory.skills.some((it) => it.name == skill.skill && it.skillsCode == skill.skillCode)));\n const subCategory = category && category.subCategories.find((it) => it.skills.some((it) => it.name == skill.skill && it.skillsCode == skill.skillCode));\n const categorySkill = subCategory && subCategory.skills.find((it) => it.name == skill.skill && it.skillsCode == skill.skillCode);\n const skillLevel = categorySkill && categorySkill.levels.find((it) => it.level == skill.level);\n\n return {\n skillLevelId: skillLevel ? skillLevel.id : null,\n skill: skill.skill,\n skillCode: skill.skillCode,\n level: skill.level,\n };\n });\n } else {\n if (actionedSkill && selectedJobMatchType && selectedJobMatchType.value != \"None\") {\n const gapJobSkillProfiles = jobSkillProfiles.filter((it) => it.skillCode == actionedSkill.skillsCode && !it.isFully);\n\n const actionedSkillProfiles = skillProfiles && skillProfiles.filter((x) => gapJobSkillProfiles.find((it) => it.skillCode == x.skillCode && it.level == x.level) && x.skillCode == actionedSkill.skillsCode && x.stringVal != \"N\");\n if (actionedSkillProfiles.length > 0) {\n defaultSelectedSkills = actionedSkillProfiles.map((skill) => {\n const category = categories.find((it) => it.subCategories.some((subCategory) => subCategory.skills.some((it) => it.name == skill.skill && it.skillsCode == skill.skillCode)));\n const subCategory = category && category.subCategories.find((it) => it.skills.some((it) => it.name == skill.skill && it.skillsCode == skill.skillCode));\n const categorySkill = subCategory && subCategory.skills.find((it) => it.name == skill.skill && it.skillsCode == skill.skillCode);\n const skillLevel = categorySkill && categorySkill.levels.find((it) => it.level == skill.level);\n\n return {\n skillLevelId: skillLevel ? skillLevel.id : null,\n skill: skill.skill,\n skillCode: skill.skillCode,\n level: skill.level,\n };\n });\n }\n }\n }\n\n return (\n \n \n \n \n \n );\n };\n\n handleEvidencePendingSave = (evidence) => {\n this.setState({ openAddEvidenceDialog: false, editedSkillEvidence: evidence });\n };\n\n render() {\n const { categories, skillProfiles, editedSkill, badgeRequest } = this.state;\n const {\n language,\n showAllSkill,\n showEditSkill,\n showHiddenSkills,\n showProposedAction,\n showSuggestedUpdate,\n highlightGap,\n loadingGap,\n isShowJobProfile,\n jobSkillAttributes,\n showExtraFramework,\n extraFrameworkLevels,\n extraFrameworkCapabilities,\n badgeCertification,\n showEditCertify,\n account,\n evidences,\n } = this.props;\n\n const proposeSkills = showProposedAction ? (account && account.updateProfileEvidenceProposalSkills ? account.updateProfileEvidenceProposalSkills.filter((it) => it.type == \"Skill\") : []) : [];\n const suggestedSkills = showSuggestedUpdate ? (account && account.updateProfileSuggestionSkills ? account.updateProfileSuggestionSkills : []) : [];\n\n return (\n \n
\n
\n \n \n \n {editedSkill && this.renderModalEditSkill()}\n {this.renderModalSfiaGuidance()}\n {this.renderModalSuggestEditLowerLevelProfileConfirmation()}\n {this.renderModalAddAction()}\n {this.renderModalAddEvidence()}\n {this.state.loading ? (\n \n
\n ) : (\n \n {categories\n .filter((it) => (showExtraFramework ? it.isExtraFramework && it.isExtraFramework == true : !it.isExtraFramework && it.isExtraFramework != true))\n .map((category, index) => {\n var emptyLevels = [];\n for (let i = extraFrameworkLevels.length + 1; i <= 7; i++) {\n emptyLevels.push(\n \n \n \n );\n }\n\n let categoryFound = false;\n\n if (!badgeCertification && !showProposedAction && !showSuggestedUpdate) {\n categoryFound = skillProfiles.filter((x) => x.category == category.name).length > 0 ? true : false;\n } else if (!badgeCertification && showProposedAction && !showSuggestedUpdate) {\n categoryFound = proposeSkills.filter((x) => x.type == \"Skill\" && x.category == category.name).length > 0 ? true : false;\n } else if (!badgeCertification && !showProposedAction && showSuggestedUpdate) {\n categoryFound = suggestedSkills.filter((x) => x.category == category.name).length > 0 ? true : false;\n } else {\n if (badgeRequest && badgeRequest.requestCertificationEntries && badgeRequest.requestCertificationEntries.length > 0 && badgeRequest.requestCertificationEntries.filter((x) => x.category == category.name).length > 0) {\n categoryFound = true;\n } else if (badgeRequest && badgeRequest.requestEntries && badgeRequest.requestEntries.length > 0 && badgeRequest.requestEntries.filter((x) => x.category == category.name).length > 0) {\n categoryFound = true;\n }\n }\n\n const categoryJobSkillProfiles = this.props.jobSkillProfiles ? this.props.jobSkillProfiles.filter((it) => it.category == category.name) : [];\n\n if (categoryFound || categoryJobSkillProfiles.length > 0 || showAllSkill || showEditSkill) {\n const catSkillProfiles = skillProfiles.filter((x) => x.category == category.name && (x.stringVal !== \"N\" || x.editedStringVal));\n let categoryHasValue = false;\n\n let catSkillProfilesCodeWithValue = skillProfiles.filter((it) => it.category == category.name && (it.stringVal !== \"N\" || it.editedStringVal)).map((skill) => skill.skillCode);\n const jobCatSkillProfilesCode = categoryJobSkillProfiles.map((skill) => skill.skillCode);\n\n const categorySkills = category.subCategories.flatMap((subCategory, index) => {\n return subCategory.skills.flatMap((skill, index) => {\n return skill;\n });\n });\n\n if (!badgeCertification && !showProposedAction && !showSuggestedUpdate) {\n categoryHasValue = skillProfiles.filter((c) => c.category == category.name && (c.stringVal !== \"N\" || c.editedStringVal)).length > 0 ? true : false;\n catSkillProfilesCodeWithValue = skillProfiles.filter((it) => it.category == category.name && (it.stringVal !== \"N\" || it.editedStringVal)).map((skill) => skill.skillCode);\n } else if (!badgeCertification && showProposedAction && !showSuggestedUpdate) {\n if (showExtraFramework) {\n if (category && category.subCategories && category.subCategories.length > 0) {\n category.subCategories.forEach((subCategory) => {\n if (subCategory.skills && subCategory.skills.length > 0) {\n subCategory.skills.forEach((skill) => {\n const extraFrameworkSkillProfiles = skillProfiles.filter((x) => x.category == category.name && x.subCategory == subCategory.name && x.skill == skill.name && x.skillCode == skill.skillsCode && (x.stringVal !== \"N\" || x.editedStringVal));\n const extraFrameworkProposeSkills = proposeSkills\n .filter((x) => x.type == \"Skill\" && x.category == category.name && x.subCategory == subCategory.name && x.name == skill.name && x.code == skill.skillsCode)\n .map((it) => {\n return {\n capability: it.capability,\n numericVal: it.capability == \"Competent\" ? 1 : it.capability == \"Proficient\" ? 0.5 : it.capability == \"Knowledge\" ? 0.25 : 0,\n category: it.category,\n code: it.code,\n id: it.id,\n level: it.level,\n name: it.name,\n subCategory: it.subCategory,\n type: it.type,\n };\n });\n\n if (skill.levelSelection == \"Single\") {\n if (extraFrameworkProposeSkills.length > 0) {\n catSkillProfilesCodeWithValue.push(...extraFrameworkProposeSkills.map((it) => it.code));\n }\n\n if (extraFrameworkSkillProfiles.length == 0 && extraFrameworkProposeSkills.length > 0) {\n // No profile skills but have proposed skills\n categoryHasValue = true;\n } else if (extraFrameworkSkillProfiles.filter((x) => extraFrameworkProposeSkills.some((y) => x.skillCode == y.code && (y.level > x.level || (x.level == y.level && y.numericVal > x.numericVal)))).length > 0) {\n // Have proposed skills with better capability\n categoryHasValue = true;\n } else if (extraFrameworkProposeSkills.filter((x) => !extraFrameworkSkillProfiles.some((y) => x.code == y.skillCode)).length > 0) {\n // Have proposed skills which not exist in profile skills\n categoryHasValue = true;\n }\n } else {\n if (extraFrameworkProposeSkills.length > 0) {\n catSkillProfilesCodeWithValue.push(...extraFrameworkProposeSkills.map((it) => it.code));\n }\n\n if (extraFrameworkSkillProfiles.length == 0 && extraFrameworkProposeSkills.length > 0) {\n // No profile skills but have proposed skills\n categoryHasValue = true;\n } else if (extraFrameworkSkillProfiles.filter((x) => extraFrameworkProposeSkills.some((y) => x.skillCode == y.code && x.level == y.level && y.numericVal > x.numericVal)).length > 0) {\n // Have proposed skills with better capability\n categoryHasValue = true;\n } else if (extraFrameworkProposeSkills.filter((x) => !extraFrameworkSkillProfiles.some((y) => x.code == y.skillCode && x.level == y.level)).length > 0) {\n // Have proposed skills which not exist in profile skills\n categoryHasValue = true;\n }\n }\n });\n }\n });\n }\n } else {\n const catProposeSkills = proposeSkills\n .filter((x) => x.type == \"Skill\" && x.category == category.name)\n .map((it) => {\n return {\n capability: it.capability,\n numericVal: it.capability == \"Competent\" ? 1 : it.capability == \"Proficient\" ? 0.5 : it.capability == \"Knowledge\" ? 0.25 : 0,\n category: it.category,\n code: it.code,\n id: it.id,\n level: it.level,\n name: it.name,\n subCategory: it.subCategory,\n type: it.type,\n };\n });\n\n if (catProposeSkills.length > 0) {\n catSkillProfilesCodeWithValue.push(...catProposeSkills.map((catProposeSkill) => catProposeSkill.code));\n }\n\n if (catSkillProfiles.length == 0 && catProposeSkills.length > 0) {\n // No profile skills but have proposed skills\n categoryHasValue = true;\n } else if (catSkillProfiles.filter((x) => catProposeSkills.some((y) => x.skillCode == y.code && x.level == y.level && y.numericVal > x.numericVal)).length > 0) {\n // Have proposed skills with better capability\n categoryHasValue = true;\n } else if (catProposeSkills.filter((x) => !catSkillProfiles.some((y) => x.code == y.skillCode && x.level == y.level)).length > 0) {\n // Have proposed skills which not exist in profile skills\n categoryHasValue = true;\n }\n }\n } else if (!badgeCertification && !showProposedAction && showSuggestedUpdate) {\n if (showExtraFramework) {\n if (category && category.subCategories && category.subCategories.length > 0) {\n category.subCategories.forEach((subCategory) => {\n if (subCategory.skills && subCategory.skills.length > 0) {\n subCategory.skills.forEach((skill) => {\n const extraFrameworkSkillProfiles = skillProfiles.filter((x) => x.category == category.name && x.subCategory == subCategory.name && x.skill == skill.name && x.skillCode == skill.skillsCode && (x.stringVal !== \"N\" || x.editedStringVal));\n const extraFrameworkSuggestedSkills = suggestedSkills\n .filter((x) => x.category == category.name && x.subCategory == subCategory.name && x.skill == skill.name && x.skillCode == skill.skillsCode)\n .map((it) => {\n return {\n numericVal: it.numericVal,\n category: it.category,\n subCategory: it.subCategory,\n id: it.id,\n skill: it.skill,\n skillCode: it.skillCode,\n level: it.level,\n };\n });\n\n if (skill.levelSelection == \"Single\") {\n if (extraFrameworkSuggestedSkills.length > 0) {\n catSkillProfilesCodeWithValue.push(...extraFrameworkSuggestedSkills.map((it) => it.code));\n }\n if (extraFrameworkSkillProfiles.length == 0 && extraFrameworkSuggestedSkills.length > 0) {\n // No profile skills but have proposed skills\n categoryHasValue = true;\n } else if (extraFrameworkSkillProfiles.filter((x) => extraFrameworkSuggestedSkills.some((y) => x.skillCode == y.skillCode && (y.level > x.level || (x.level == y.level && y.numericVal > x.numericVal)))).length > 0) {\n // Have proposed skills with better capability\n categoryHasValue = true;\n } else if (extraFrameworkSuggestedSkills.filter((x) => !extraFrameworkSkillProfiles.some((y) => x.skillCode == y.skillCode)).length > 0) {\n // Have proposed skills which not exist in profile skills\n categoryHasValue = true;\n }\n } else {\n if (extraFrameworkSuggestedSkills.length > 0) {\n catSkillProfilesCodeWithValue.push(...extraFrameworkSuggestedSkills.map((it) => it.code));\n }\n if (extraFrameworkSkillProfiles.length == 0 && extraFrameworkSuggestedSkills.length > 0) {\n // No profile skills but have proposed skills\n categoryHasValue = true;\n } else if (extraFrameworkSkillProfiles.filter((x) => extraFrameworkSuggestedSkills.some((y) => x.skillCode == y.skillCode && x.level == y.level && y.numericVal > x.numericVal)).length > 0) {\n // Have proposed skills with better capability\n categoryHasValue = true;\n } else if (extraFrameworkSuggestedSkills.filter((x) => !extraFrameworkSkillProfiles.some((y) => x.skillCode == y.skillCode && x.level == y.level)).length > 0) {\n // Have proposed skills which not exist in profile skills\n categoryHasValue = true;\n }\n }\n });\n }\n });\n }\n } else {\n const catSuggestedSkills = suggestedSkills\n .filter((x) => x.category == category.name)\n .map((it) => {\n return {\n numericVal: it.numericVal,\n category: it.category,\n subCategory: it.subCategory,\n id: it.id,\n skill: it.skill,\n skillCode: it.skillCode,\n level: it.level,\n };\n });\n\n if (catSuggestedSkills.length > 0) {\n catSkillProfilesCodeWithValue.push(...catSuggestedSkills.map((catSuggestedSkill) => catSuggestedSkill.skillCode));\n }\n\n if (catSkillProfiles.length == 0 && catSuggestedSkills.length > 0) {\n // No profile skills but have proposed skills\n categoryHasValue = true;\n } else if (catSkillProfiles.filter((x) => catSuggestedSkills.some((y) => x.skillCode == y.skillCode && x.level == y.level && y.numericVal > x.numericVal)).length > 0) {\n // Have proposed skills with better capability\n categoryHasValue = true;\n } else if (catSuggestedSkills.filter((x) => !catSkillProfiles.some((y) => x.skillCode == y.skillCode && x.level == y.level)).length > 0) {\n // Have proposed skills which not exist in profile skills\n categoryHasValue = true;\n }\n }\n } else {\n if (\n badgeRequest &&\n badgeRequest.requestCertificationEntries &&\n badgeRequest.requestCertificationEntries.length > 0 &&\n badgeRequest.requestCertificationEntries.filter((x) => x.category == category.name && (x.stringVal !== \"N\" || x.editedStringVal)).length > 0\n ) {\n catSkillProfilesCodeWithValue.push(...badgeRequest.requestCertificationEntries.filter((x) => x.category == category.name && (x.stringVal !== \"N\" || x.editedStringVal)).map((it) => it.skillsCode));\n categoryHasValue = true;\n } else if (badgeRequest && badgeRequest.requestEntries && badgeRequest.requestEntries.length > 0 && badgeRequest.requestEntries.filter((x) => x.category == category.name && (x.stringVal !== \"N\" || x.editedStringVal)).length > 0) {\n catSkillProfilesCodeWithValue.push(...badgeRequest.requestEntries.filter((x) => x.category == category.name && (x.stringVal !== \"N\" || x.editedStringVal)).map((it) => it.skillsCode));\n categoryHasValue = true;\n }\n }\n\n const checkedCatSkills = showAllSkill || showEditSkill ? categorySkills : categorySkills.filter((it) => catSkillProfilesCodeWithValue.includes(it.skillsCode) || jobCatSkillProfilesCode.includes(it.skillsCode));\n const categoryHidden = !checkedCatSkills.some((skill) => !skill.isHidden) && !showHiddenSkills;\n\n if (categoryHasValue || categoryJobSkillProfiles.length > 0 || showAllSkill || showEditSkill) {\n return (\n \n \n \n \n \n {!category.isExtraFramework == true ? (\n \n \n 1\n \n \n 2\n \n \n 3\n \n \n 4\n \n \n 5\n \n \n 6\n \n \n 7\n \n \n ) : (\n \n {extraFrameworkLevels.map((extraFrameworkLevel, levelIndex) => {\n return (\n \n \n {extraFrameworkLevel.level}\n \n \n );\n })}\n {emptyLevels}\n \n )}\n\n {showEditSkill || showEditCertify ? (\n highlightGap ? (\n \n \n ) : (\n \n \n \n {category.subCategories.map((subCategory, index) => {\n const subCatSkillProfiles = skillProfiles.filter((it) => it.subCategory === subCategory.name);\n\n let subCatSkillProfilesCodeWithValue = subCatSkillProfiles.filter((it) => it.stringVal !== \"N\" || it.editedStringVal).map((skill) => skill.skillCode);\n let subCategoryHasValue = false;\n\n if (!badgeCertification && !showProposedAction && !showSuggestedUpdate) {\n subCatSkillProfilesCodeWithValue = subCatSkillProfiles.filter((it) => it.stringVal !== \"N\" || it.editedStringVal).map((skill) => skill.skillCode);\n subCategoryHasValue = subCatSkillProfiles.filter((c) => c.stringVal !== \"N\" || c.editedStringVal).length > 0 ? true : false;\n } else if (!badgeCertification && showProposedAction && !showSuggestedUpdate) {\n if (showExtraFramework) {\n if (subCategory.skills && subCategory.skills.length > 0) {\n subCategory.skills.forEach((skill) => {\n const extraFrameworkSkillProfiles = skillProfiles.filter(\n (x) => x.category == category.name && x.subCategory == subCategory.name && x.skill == skill.name && x.skillCode == skill.skillsCode && (x.stringVal !== \"N\" || x.editedStringVal)\n );\n const extraFrameworkProposeSkills = proposeSkills\n .filter((x) => x.type == \"Skill\" && x.category == category.name && x.subCategory == subCategory.name && x.name == skill.name && x.code == skill.skillsCode)\n .map((it) => {\n return {\n capability: it.capability,\n numericVal: it.capability == \"Competent\" ? 1 : it.capability == \"Proficient\" ? 0.5 : it.capability == \"Knowledge\" ? 0.25 : 0,\n category: it.category,\n code: it.code,\n id: it.id,\n level: it.level,\n name: it.name,\n subCategory: it.subCategory,\n type: it.type,\n };\n });\n\n if (skill.levelSelection == \"Single\") {\n if (extraFrameworkSkillProfiles.length == 0 && extraFrameworkProposeSkills.length > 0) {\n // No profile skills but have proposed skills\n subCategoryHasValue = true;\n } else if (extraFrameworkSkillProfiles.filter((x) => extraFrameworkProposeSkills.some((y) => x.skillCode == y.code && (y.level > x.level || (x.level == y.level && y.numericVal > x.numericVal)))).length > 0) {\n // Have proposed skills with better capability\n subCategoryHasValue = true;\n } else if (extraFrameworkProposeSkills.filter((x) => !extraFrameworkSkillProfiles.some((y) => x.code == y.skillCode)).length > 0) {\n // Have proposed skills which not exist in profile skills\n subCategoryHasValue = true;\n }\n } else {\n if (extraFrameworkSkillProfiles.length == 0 && extraFrameworkProposeSkills.length > 0) {\n // No profile skills but have proposed skills\n subCategoryHasValue = true;\n } else if (extraFrameworkSkillProfiles.filter((x) => extraFrameworkProposeSkills.some((y) => x.skillCode == y.code && x.level == y.level && y.numericVal > x.numericVal)).length > 0) {\n // Have proposed skills with better capability\n subCategoryHasValue = true;\n } else if (extraFrameworkProposeSkills.filter((x) => !extraFrameworkSkillProfiles.some((y) => x.code == y.skillCode && x.level == y.level)).length > 0) {\n // Have proposed skills which not exist in profile skills\n subCategoryHasValue = true;\n }\n }\n });\n }\n } else {\n const subCatProposeSkills = proposeSkills\n .filter((x) => x.type == \"Skill\" && x.subCategory == subCategory.name)\n .map((it) => {\n return {\n capability: it.capability,\n numericVal: it.capability == \"Competent\" ? 1 : it.capability == \"Proficient\" ? 0.5 : it.capability == \"Knowledge\" ? 0.25 : 0,\n category: it.category,\n code: it.code,\n id: it.id,\n level: it.level,\n name: it.name,\n subCategory: it.subCategory,\n type: it.type,\n };\n });\n\n if (subCatSkillProfiles.length == 0 && subCatProposeSkills.length > 0) {\n // No profile skills but have proposed skills\n subCategoryHasValue = true;\n } else if (subCatSkillProfiles.filter((x) => subCatProposeSkills.some((y) => x.skillCode == y.code && x.level == y.level && y.numericVal > x.numericVal)).length > 0) {\n // Have proposed skills with better capability\n subCategoryHasValue = true;\n } else if (subCatProposeSkills.filter((x) => !subCatSkillProfiles.some((y) => x.code == y.skillCode && x.level == y.level)).length > 0) {\n // Have proposed skills which not exist in profile skills\n subCategoryHasValue = true;\n }\n }\n } else if (!badgeCertification && !showProposedAction && showSuggestedUpdate) {\n if (showExtraFramework) {\n if (subCategory.skills && subCategory.skills.length > 0) {\n subCategory.skills.forEach((skill) => {\n const extraFrameworkSkillProfiles = skillProfiles.filter(\n (x) => x.category == category.name && x.subCategory == subCategory.name && x.skill == skill.name && x.skillCode == skill.skillsCode && (x.stringVal !== \"N\" || x.editedStringVal)\n );\n const extraFrameworkSuggestedSkills = suggestedSkills\n .filter((x) => x.category == category.name && x.subCategory == subCategory.name && x.skill == skill.name && x.skillCode == skill.skillsCode)\n .map((it) => {\n return {\n numericVal: it.numericVal,\n category: it.category,\n subCategory: it.subCategory,\n id: it.id,\n skill: it.skill,\n skillCode: it.skillCode,\n level: it.level,\n };\n });\n\n if (skill.levelSelection == \"Single\") {\n if (extraFrameworkSkillProfiles.length == 0 && extraFrameworkSuggestedSkills.length > 0) {\n // No profile skills but have proposed skills\n subCategoryHasValue = true;\n } else if (extraFrameworkSkillProfiles.filter((x) => extraFrameworkSuggestedSkills.some((y) => x.skillCode == y.skillCode && (y.level > x.level || (x.level == y.level && y.numericVal > x.numericVal)))).length > 0) {\n // Have proposed skills with better capability\n subCategoryHasValue = true;\n } else if (extraFrameworkSuggestedSkills.filter((x) => !extraFrameworkSkillProfiles.some((y) => x.skillCode == y.skillCode)).length > 0) {\n // Have proposed skills which not exist in profile skills\n subCategoryHasValue = true;\n }\n } else {\n if (extraFrameworkSkillProfiles.length == 0 && extraFrameworkSuggestedSkills.length > 0) {\n // No profile skills but have proposed skills\n subCategoryHasValue = true;\n } else if (extraFrameworkSkillProfiles.filter((x) => extraFrameworkSuggestedSkills.some((y) => x.skillCode == y.skillCode && x.level == y.level && y.numericVal > x.numericVal)).length > 0) {\n // Have proposed skills with better capability\n subCategoryHasValue = true;\n } else if (extraFrameworkSuggestedSkills.filter((x) => !extraFrameworkSkillProfiles.some((y) => x.skillCode == y.skillCode && x.level == y.level)).length > 0) {\n // Have proposed skills which not exist in profile skills\n subCategoryHasValue = true;\n }\n }\n });\n }\n } else {\n const subCatSuggestedSkills = suggestedSkills\n .filter((x) => x.subCategory == subCategory.name)\n .map((it) => {\n return {\n numericVal: it.numericVal,\n category: it.category,\n subCategory: it.subCategory,\n id: it.id,\n skill: it.skill,\n skillCode: it.skillCode,\n level: it.level,\n };\n });\n\n if (subCatSkillProfiles.length == 0 && subCatSuggestedSkills.length > 0) {\n // No profile skills but have proposed skills\n subCategoryHasValue = true;\n } else if (subCatSkillProfiles.filter((x) => subCatSuggestedSkills.some((y) => x.skillCode == y.skillCode && x.level == y.level && y.numericVal > x.numericVal)).length > 0) {\n // Have proposed skills with better capability\n subCategoryHasValue = true;\n } else if (subCatSuggestedSkills.filter((x) => !subCatSkillProfiles.some((y) => x.skillCode == y.skillCode && x.level == y.level)).length > 0) {\n // Have proposed skills which not exist in profile skills\n subCategoryHasValue = true;\n }\n }\n } else {\n if (badgeRequest && badgeRequest.requestCertificationEntries && badgeRequest.requestCertificationEntries.length > 0 && badgeRequest.requestCertificationEntries.filter((x) => x.subCategory == subCategory.name).length > 0) {\n subCategoryHasValue = true;\n } else if (badgeRequest && badgeRequest.requestEntries && badgeRequest.requestEntries.length > 0 && badgeRequest.requestEntries.filter((x) => x.subCategory == subCategory.name).length > 0) {\n subCategoryHasValue = true;\n }\n }\n\n const subCatSkillsCodes = subCategory.skills.map((it) => {\n return it.skillsCode;\n });\n\n const subCatJobSkillProfiles = this.props.jobSkillProfiles ? this.props.jobSkillProfiles.filter((it) => subCatSkillsCodes.some((skill) => skill == it.skillCode)) : [];\n const jobSubCatSkillProfilesCode = subCatJobSkillProfiles.map((skill) => skill.skillCode);\n\n const checkedSubCatSkills = showAllSkill || showEditSkill ? subCategory.skills : subCategory.skills.filter((it) => subCatSkillProfilesCodeWithValue.includes(it.skillsCode) || jobSubCatSkillProfilesCode.includes(it.skillsCode));\n const subCategoryHidden = !checkedSubCatSkills.some((skill) => !skill.isHidden) && !showHiddenSkills;\n\n if (subCategoryHasValue || subCatJobSkillProfiles.length > 0 || showAllSkill || showEditSkill) {\n return (\n \n \n \n \n \n {subCategory.skills.map((skill, elIndex) => {\n const skillHidden = skill.isHidden && !showHiddenSkills;\n const showGuidance = language && skill.guidances && skill.guidances.length > 0 ? true : false;\n const subCatDetailSkillProfiles = skillProfiles.filter((x) => x.skillCode === skill.skillsCode && (x.stringVal !== \"N\" || x.editedStringVal));\n\n let hasValue = false;\n\n if (!badgeCertification && !showProposedAction && !showSuggestedUpdate) {\n hasValue = subCatDetailSkillProfiles.length > 0 ? true : false;\n } else if (!badgeCertification && showProposedAction && !showSuggestedUpdate) {\n if (showExtraFramework) {\n const extraFrameworkSkillProfiles = skillProfiles.filter(\n (x) => x.category == category.name && x.subCategory == subCategory.name && x.skill == skill.name && x.skillCode == skill.skillsCode && (x.stringVal !== \"N\" || x.editedStringVal)\n );\n const extraFrameworkProposeSkills = proposeSkills\n .filter((x) => x.type == \"Skill\" && x.category == category.name && x.subCategory == subCategory.name && x.name == skill.name && x.code == skill.skillsCode)\n .map((it) => {\n return {\n capability: it.capability,\n numericVal: it.capability == \"Competent\" ? 1 : it.capability == \"Proficient\" ? 0.5 : it.capability == \"Knowledge\" ? 0.25 : 0,\n category: it.category,\n code: it.code,\n id: it.id,\n level: it.level,\n name: it.name,\n subCategory: it.subCategory,\n type: it.type,\n };\n });\n\n if (skill.levelSelection == \"Single\") {\n if (extraFrameworkSkillProfiles.length == 0 && extraFrameworkProposeSkills.length > 0) {\n // No profile skills but have proposed skills\n hasValue = true;\n } else if (extraFrameworkSkillProfiles.filter((x) => extraFrameworkProposeSkills.some((y) => x.skillCode == y.code && (y.level > x.level || (x.level == y.level && y.numericVal > x.numericVal)))).length > 0) {\n // Have proposed skills with better capability\n hasValue = true;\n } else if (extraFrameworkProposeSkills.filter((x) => !extraFrameworkSkillProfiles.some((y) => x.code == y.skillCode)).length > 0) {\n // Have proposed skills which not exist in profile skills\n hasValue = true;\n }\n } else {\n if (extraFrameworkSkillProfiles.length == 0 && extraFrameworkProposeSkills.length > 0) {\n // No profile skills but have proposed skills\n hasValue = true;\n } else if (extraFrameworkSkillProfiles.filter((x) => extraFrameworkProposeSkills.some((y) => x.skillCode == y.code && x.level == y.level && y.numericVal > x.numericVal)).length > 0) {\n // Have proposed skills with better capability\n hasValue = true;\n } else if (extraFrameworkProposeSkills.filter((x) => !extraFrameworkSkillProfiles.some((y) => x.code == y.skillCode && x.level == y.level)).length > 0) {\n // Have proposed skills which not exist in profile skills\n hasValue = true;\n }\n }\n } else {\n if (proposeSkills.filter((x) => x.type == \"Skill\" && x.code == skill.skillsCode && x.name == skill.name).length > 0) {\n const subCatDetailProposeSkills = proposeSkills\n .filter((x) => x.type == \"Skill\" && x.code == skill.skillsCode && x.name == skill.name)\n .map((it) => {\n return {\n capability: it.capability,\n numericVal: it.capability == \"Competent\" ? 1 : it.capability == \"Proficient\" ? 0.5 : it.capability == \"Knowledge\" ? 0.25 : 0,\n category: it.category,\n code: it.code,\n id: it.id,\n level: it.level,\n name: it.name,\n subCategory: it.subCategory,\n type: it.type,\n };\n });\n\n if (subCatDetailSkillProfiles.length == 0 && subCatDetailProposeSkills.length > 0) {\n // No profile skills but have proposed skills\n hasValue = true;\n } else if (subCatDetailSkillProfiles.filter((x) => subCatDetailProposeSkills.some((y) => x.skillCode == y.code && x.level == y.level && y.numericVal > x.numericVal)).length > 0) {\n // Have proposed skills with better capability\n hasValue = true;\n } else if (subCatDetailProposeSkills.filter((x) => !subCatDetailSkillProfiles.some((y) => x.code == y.skillCode && x.level == y.level)).length > 0) {\n // Have proposed skills which not exist in profile skills\n hasValue = true;\n }\n }\n }\n } else if (!badgeCertification && !showProposedAction && showSuggestedUpdate) {\n if (showExtraFramework) {\n const extraFrameworkSkillProfiles = skillProfiles.filter(\n (x) => x.category == category.name && x.subCategory == subCategory.name && x.skill == skill.name && x.skillCode == skill.skillsCode && (x.stringVal !== \"N\" || x.editedStringVal)\n );\n const extraFrameworkSuggestedSkills = suggestedSkills\n .filter((x) => x.category == category.name && x.subCategory == subCategory.name && x.skill == skill.name && x.skillCode == skill.skillsCode)\n .map((it) => {\n return {\n numericVal: it.numericVal,\n category: it.category,\n subCategory: it.subCategory,\n id: it.id,\n skill: it.skill,\n skillCode: it.skillCode,\n level: it.level,\n };\n });\n\n if (skill.levelSelection == \"Single\") {\n if (extraFrameworkSkillProfiles.length == 0 && extraFrameworkSuggestedSkills.length > 0) {\n // No profile skills but have proposed skills\n hasValue = true;\n } else if (extraFrameworkSkillProfiles.filter((x) => extraFrameworkSuggestedSkills.some((y) => x.skillCode == y.skillCode && (y.level > x.level || (x.level == y.level && y.numericVal > x.numericVal)))).length > 0) {\n // Have proposed skills with better capability\n hasValue = true;\n } else if (extraFrameworkSuggestedSkills.filter((x) => !extraFrameworkSkillProfiles.some((y) => x.skillCode == y.skillCode)).length > 0) {\n // Have proposed skills which not exist in profile skills\n hasValue = true;\n }\n } else {\n if (extraFrameworkSkillProfiles.length == 0 && extraFrameworkSuggestedSkills.length > 0) {\n // No profile skills but have proposed skills\n hasValue = true;\n } else if (extraFrameworkSkillProfiles.filter((x) => extraFrameworkSuggestedSkills.some((y) => x.skillCode == y.skillCode && x.level == y.level && y.numericVal > x.numericVal)).length > 0) {\n // Have proposed skills with better capability\n hasValue = true;\n } else if (extraFrameworkSuggestedSkills.filter((x) => !extraFrameworkSkillProfiles.some((y) => x.skillCode == y.skillCode && x.level == y.level)).length > 0) {\n // Have proposed skills which not exist in profile skills\n hasValue = true;\n }\n }\n } else {\n if (suggestedSkills.filter((x) => x.skillCode == skill.skillsCode && x.skill == skill.name).length > 0) {\n const subCatDetailSuggestedSkills = suggestedSkills\n .filter((x) => x.skillCode == skill.skillsCode && x.skill == skill.name)\n .map((it) => {\n return {\n numericVal: it.numericVal,\n category: it.category,\n subCategory: it.subCategory,\n id: it.id,\n skill: it.skill,\n skillCode: it.skillCode,\n level: it.level,\n };\n });\n\n if (subCatDetailSkillProfiles.length == 0 && subCatDetailSuggestedSkills.length > 0) {\n // No profile skills but have proposed skills\n hasValue = true;\n } else if (subCatDetailSkillProfiles.filter((x) => subCatDetailSuggestedSkills.some((y) => x.skillCode == y.skillCode && x.level == y.level && y.numericVal > x.numericVal)).length > 0) {\n // Have proposed skills with better capability\n hasValue = true;\n } else if (subCatDetailSuggestedSkills.filter((x) => !subCatDetailSkillProfiles.some((y) => x.skillCode == y.skillCode && x.level == y.level)).length > 0) {\n // Have proposed skills which not exist in profile skills\n hasValue = true;\n }\n }\n }\n } else {\n if (badgeRequest && badgeRequest.requestCertificationEntries && badgeRequest.requestCertificationEntries.length > 0 && badgeRequest.requestCertificationEntries.filter((x) => x.skillsCode == skill.skillsCode).length > 0) {\n hasValue = true;\n } else if (badgeRequest && badgeRequest.requestEntries && badgeRequest.requestEntries.length > 0 && badgeRequest.requestEntries.filter((x) => x.skillsCode == skill.skillsCode).length > 0) {\n hasValue = true;\n }\n }\n\n let jobSkillProfiles = this.props.jobSkillProfiles ? this.props.jobSkillProfiles.filter((it) => it.skillCode == skill.skillsCode) : [];\n\n jobSkillProfiles.forEach((jobSkillProfile) => {\n jobSkillProfile.isFully = false;\n jobSkillProfile.isPartially = false;\n jobSkillProfile.isProvidedUpper = false;\n });\n\n jobSkillProfiles.forEach((jobSkillProfile) => {\n if (!category.isExtraFramework == true) {\n if (subCatDetailSkillProfiles.filter((it) => !it.editedStringVal).filter((it) => it.level == jobSkillProfile.level && (it.numericVal == 1 || it.stringVal == \"M\")).length > 0) {\n jobSkillProfile.isFully = true;\n } else if (subCatDetailSkillProfiles.filter((it) => !it.editedStringVal).filter((it) => it.level == jobSkillProfile.level && jobSkillProfile.stringVal == \"P\").length > 0) {\n jobSkillProfile.isPartially = true;\n }\n\n if (\n subCatDetailSkillProfiles.filter((it) => ((it.stringVal != null && it.stringVal != \"N\") || it.editedStringVal != \"N\") && it.level == jobSkillProfile.level).length == 0 &&\n subCatDetailSkillProfiles.filter((it) => ((it.stringVal != null && it.stringVal != \"N\") || it.editedStringVal != \"N\") && it.level > jobSkillProfile.level).length > 0\n ) {\n jobSkillProfile.isProvidedUpper = true;\n }\n } else {\n const topExtraFrameworkCapability = [...extraFrameworkCapabilities].sort((a, b) => b.weight - a.weight)[0];\n if (subCatDetailSkillProfiles.filter((it) => !it.editedStringVal).filter((it) => it.level == jobSkillProfile.level && it.numericVal == topExtraFrameworkCapability.weight).length > 0) {\n jobSkillProfile.isFully = true;\n } else if (subCatDetailSkillProfiles.filter((it) => !it.editedStringVal).filter((it) => it.level == jobSkillProfile.level && it.numericVal != 0).length > 0) {\n jobSkillProfile.isPartially = true;\n }\n\n if (\n skill.levelSelection != \"Single\" &&\n subCatDetailSkillProfiles.filter((it) => it.level == jobSkillProfile.level && it.numericVal != 0).length == 0 &&\n subCatDetailSkillProfiles.filter((it) => it.level > jobSkillProfile.level && it.numericVal != 0).length > 0\n ) {\n jobSkillProfile.isProvidedUpper = true;\n }\n }\n });\n\n let gapStatus = \"\";\n let showWandSuggestion = false;\n let showAddEvidence = false;\n\n // empty is show red crossed circle\n // partial is show yellow circle\n // full is show green check circle\n\n if (jobSkillProfiles.length > 0) {\n if (jobSkillProfiles.filter((it) => it.stringVal == \"M\" && !it.isFully).length > 0) {\n gapStatus = \"empty\";\n } else {\n if (jobSkillProfiles.filter((it) => it.isFully || it.isPartially || (!it.isFully && !it.isPartially)).length > 0) {\n if (jobSkillProfiles.filter((it) => !it.isFully).length > 0) {\n gapStatus = \"partial\";\n } else {\n gapStatus = \"full\";\n }\n } else {\n gapStatus = \"empty\";\n }\n }\n\n if (jobSkillProfiles.filter((it) => it.isPartially && skillProfiles.find((x) => x.stringVal != \"N\" && it.skillCode == x.skillCode && it.level == x.level)).length > 0) {\n showAddEvidence = true;\n } else {\n if (jobSkillProfiles.filter((it) => (it.isFully || it.isPartially || (!it.isFully && !it.isPartially)) && skillProfiles.find((x) => x.stringVal != \"N\" && it.skillCode == x.skillCode && it.level == x.level)).length > 0) {\n if (jobSkillProfiles.filter((it) => !it.isFully && skillProfiles.find((x) => x.stringVal != \"N\" && it.skillCode == x.skillCode && it.level == x.level)).length > 0) {\n showAddEvidence = true;\n }\n } else {\n showAddEvidence = false;\n }\n }\n\n if (account && !account.updateProfileSuggested && this.props.selectedprofileType.value == \"Self Assessed\" && jobSkillProfiles.filter((it) => it.isProvidedUpper).length > 0) {\n showWandSuggestion = true;\n }\n }\n\n let jobSkillAttributeColor = \"#002060\";\n const showJobSkillAttribute = this.props.selectedJobMatchType.id ? true : false;\n if (showJobSkillAttribute) {\n if (this.props.selectedJobMatchType.value == \"Current\") {\n jobSkillAttributeColor = \"#002060\";\n } else {\n jobSkillAttributeColor = \"#4dcaa4\";\n }\n }\n\n let selectedSkillAttributes = [];\n let selectedJobSkillAttributes = [];\n\n if (isShowJobProfile) {\n if (skill.attributes && skill.attributes.length > 0 && jobSkillAttributes && jobSkillAttributes.length > 0) {\n selectedSkillAttributes = skill.attributes.filter((it) => !it.isHidden && jobSkillAttributes.find((attribute) => it.id == attribute.skillAttributeId));\n }\n } else {\n if (skill.attributes && skill.attributes.length > 0 && this.state.account && this.state.account.attributes && this.state.account.attributes.length > 0) {\n selectedSkillAttributes = skill.attributes.filter((it) => !it.isHidden && this.state.account.attributes.find((attribute) => it.id == attribute.skillAttributeId));\n }\n\n selectedJobSkillAttributes = showJobSkillAttribute && jobSkillAttributes ? jobSkillAttributes.filter((it) => !it.isHidden && it.skillName == skill.name && it.skillCode == skill.skillsCode) : [];\n }\n\n var emptySkillLevels = [];\n for (let i = extraFrameworkLevels.length + 1; i <= 7; i++) {\n emptySkillLevels.push(\n \n {this.elementSkillExtraFramework(\n skill.skillsCode,\n skill.levelSelection,\n `emptyLevel${subCategory.id}${skill.id}${i}`,\n skill.levels,\n subCatDetailSkillProfiles,\n category.colour,\n subCategory.colour,\n subCategory.skillColour,\n category,\n subCategory,\n showProposedAction,\n proposeSkills\n .filter((x) => x.type == \"Skill\" && x.category == category.name && x.subCategory == subCategory.name && x.name == skill.name && x.code == skill.skillsCode)\n .map((it) => {\n return {\n capability: it.capability,\n numericVal: it.capability == \"Competent\" ? 1 : it.capability == \"Proficient\" ? 0.5 : it.capability == \"Knowledge\" ? 0.25 : 0,\n category: it.category,\n code: it.code,\n id: it.id,\n level: it.level,\n name: it.name,\n subCategory: it.subCategory,\n type: it.type,\n };\n }),\n showSuggestedUpdate,\n suggestedSkills\n .filter((x) => x.category == category.name && x.subCategory == subCategory.name && x.skill == skill.name && x.skillCode == skill.skillsCode)\n .map((it) => {\n return {\n numericVal: it.numericVal,\n category: it.category,\n subCategory: it.subCategory,\n id: it.id,\n skill: it.skill,\n skillCode: it.skillCode,\n level: it.level,\n };\n })\n )}\n \n );\n }\n\n const levelIterator = [1, 2, 3, 4, 5, 6, 7];\n\n return (\n 0 || showAllSkill || showEditSkill) ? \"\" : \"none\" }}>\n \n \n {hasValue && skill.attributes && skill.attributes.filter((it) => !it.isHidden).length > 0 ? (\n \n \n \n \n \n {attribute.link && !this.props.loginWithTeams ? (\n \n \n );\n })}\n \n )}\n {!badgeCertification && selectedJobSkillAttributes.length > 0 && (\n \n \n {selectedJobSkillAttributes\n .sort((a, b) => (a.attribute > b.attribute ? 1 : -1))\n .map((attribute, index) => {\n return (\n
\n {attribute.link && !this.props.loginWithTeams ? (\n \n \n \n ) : (\n \n \n {attribute.attribute}\n \n \n )}\n \n );\n })}\n \n \n )}\n \n {showGuidance ? (\n \n this.openSfiaGuidance(skill)} />\n \n ) : (\n
\n )}\n {!isShowJobProfile && !badgeCertification && (\n \n this.openEditSkillAttribute(\n {\n id: category.id,\n name: category.name,\n colour: category.colour,\n },\n {\n id: subCategory.id,\n name: subCategory.name,\n colour: subCategory.colour,\n skillColour: subCategory.skillColour,\n },\n skill\n )\n }\n />\n \n )}\n \n ) : (\n \n \n this.openSfiaGuidance(skill)} />\n \n ) : (\n
\n )}\n \n )}\n
\n \n \n \n \n {skill.skillsCode}\n \n \n {!category.isExtraFramework == true ? (\n \n {levelIterator.map((level) => {\n return this.elementSkill(\n skill.skillsCode,\n level,\n skill.levels,\n subCatDetailSkillProfiles,\n category.colour,\n subCategory.colour,\n subCategory.skillColour,\n category,\n subCategory,\n showProposedAction,\n proposeSkills,\n showSuggestedUpdate,\n suggestedSkills\n );\n })}\n \n ) : (\n \n {extraFrameworkLevels.map((extraFrameworkLevel, levelIndex) => {\n return this.elementSkillExtraFramework(\n skill.skillsCode,\n skill.levelSelection,\n extraFrameworkLevel.id,\n skill.levels,\n subCatDetailSkillProfiles,\n category.colour,\n subCategory.colour,\n subCategory.skillColour,\n category,\n subCategory,\n showProposedAction,\n proposeSkills\n .filter((x) => x.type == \"Skill\" && x.category == category.name && x.subCategory == subCategory.name && x.name == skill.name && x.code == skill.skillsCode)\n .map((it) => {\n return {\n capability: it.capability,\n numericVal: it.capability == \"Competent\" ? 1 : it.capability == \"Proficient\" ? 0.5 : it.capability == \"Knowledge\" ? 0.25 : 0,\n category: it.category,\n code: it.code,\n id: it.id,\n level: it.level,\n name: it.name,\n subCategory: it.subCategory,\n type: it.type,\n };\n }),\n showSuggestedUpdate,\n suggestedSkills\n .filter((x) => x.category == category.name && x.subCategory == subCategory.name && x.skill == skill.name && x.skillCode == skill.skillsCode)\n .map((it) => {\n return {\n numericVal: it.numericVal,\n category: it.category,\n subCategory: it.subCategory,\n id: it.id,\n skill: it.skill,\n skillCode: it.skillCode,\n level: it.level,\n };\n })\n );\n })}\n {emptySkillLevels}\n \n )}\n {(showEditSkill || showEditCertify) && (\n \n it.edited).length > 0 ? \" btn-warning-edit\" : \" btnEdit-Style\"}`}\n onClick={() =>\n this.openEditSkillProfile(\n {\n id: category.id,\n name: category.name,\n colour: category.colour,\n },\n {\n id: subCategory.id,\n name: subCategory.name,\n colour: subCategory.colour,\n skillColour: subCategory.skillColour,\n },\n skill,\n skillProfiles ? [...skillProfiles.filter((x) => x.skillCode === skill.skillsCode)] : [],\n category.isExtraFramework && category.isExtraFramework == true ? true : false\n )\n }\n >\n \n )}\n {highlightGap ? (\n \n {loadingGap && \n {!loadingGap ? (\n gapStatus == \"empty\" ? (\n \n this.handleAddAction(skill)}>\n \n {showAddEvidence && (\n \n {\" \"}\n this.handleAddEvidence(skill)}>\n \n \n )}\n \n )}\n \n {!loadingGap && showWandSuggestion ? (\n \n this.handleSuggestUpdateLowerLevelProfile(\n {\n id: category.id,\n name: category.name,\n isExtraFramework: category.isExtraFramework && category.isExtraFramework == true ? true : false,\n },\n {\n id: subCategory.id,\n name: subCategory.name,\n },\n skill,\n skillProfiles ? [...skillProfiles.filter((x) => x.skillCode === skill.skillsCode)] : []\n )\n }\n />\n ) : (\n \n \n \n ) : (\n \n \n \n \n \n \n )}\n \n );\n })}\n \n );\n }\n })}\n \n \n \n \n );\n } else {\n return
\n )}\n \n {!this.props.badgeCertification && this.props.selectedprofileType && !this.props.showSuggestedUpdate && (\n \n )}\n \n \n \n \n \n \n \n \n \n \n \n {this.props.isShowJobProfile ? (\n \n \n \n \n \n \n ) : (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {selectedJobMatchType && selectedJobMatchType.value != \"None\" && (\n \n \n \n \n \n \n )}\n \n )}\n \n \n \n \n {this.props.isShowJobProfile ? (\n \n \n ) : (\n \n \n \n \n \n \n \n {selectedJobMatchType && selectedJobMatchType.value == \"Current\" && (\n \n \n )}\n {selectedJobMatchType && selectedJobMatchType.value == \"Future\" && (\n \n \n )}\n \n )}\n \n \n
\n {this.props.selectedprofileType && (\n \n )}\n {this.props.selectedprofileType &&\n (!this.props.showProposedAction || showProposedActionExtraFramework) &&\n (!this.props.showSuggestedUpdate || showSuggestedUpdateExtraFramework) &&\n extraFrameworkAvailable &&\n extraFrameworkCapabilities &&\n extraFrameworkCapabilities.length > 0 &&\n ((skillProfiles && skillProfiles.filter((it) => it.isExtraFramework && it.isExtraFramework == true && it.numericVal > 0).length > 0) ||\n (jobSkillProfiles && jobSkillProfiles.filter((it) => it.isExtraFramework && it.isExtraFramework == true && it.stringVal != \"N\").length > 0) ||\n this.props.showDetail ||\n this.props.showEdit) && (\n \n \n \n \n \n \n {extraFrameworkCapabilities.map((extraFrameworkCapability, index) => {\n return (\n \n {extraFrameworkCapability.capability}\n \n );\n })}\n {selectedJobMatchType && selectedJobMatchType.value != \"None\" && (\n \n \n \n \n \n \n )}\n \n \n \n \n )}\n {selectedJobMatchType && selectedJobMatchType.value == \"Future\" && (\n \n \n )}\n \n \n
\n \n \n )}\n
\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n contentTranslations: state.content.contentTranslations,\n account: state.person.account,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(TableProfile);\n","import * as authActions from \"../../store/actions/authAction\";\nimport * as categoryActions from \"../../store/actions/categoryAction\";\nimport * as contentActions from \"../../store/actions/contentAction\";\nimport * as jobActions from \"../../store/actions/jobAction\";\nimport * as lorActions from \"../../store/actions/lorAction\";\nimport { dismisAlert, generateAlert } from \"../../utils/alertUtils\";\nimport { parameterizedString } from \"../../utils/stringUtils\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport { ContentWrapperLg } from \"../common/ContentWrapperLg\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport TableProfile from \"./TableProfile\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { Col, Container, Label, Row, Spinner, Table, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nconst buttonStyle = {\n marginLeft: \"10px\",\n};\n\nconst labelCaptionStyle = {\n fontWeight: \"bold\",\n};\n\nclass JobsProfile extends React.Component {\n static displayName = JobsProfile.name;\n\n constructor(props) {\n super(props);\n this.state = {\n loading: true,\n contentLoading: true,\n jobLoading: true,\n alerts: [],\n showMoreDetail: false,\n showFloatingLegend: false,\n };\n\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n this.parameterizedString = parameterizedString.bind(this);\n }\n\n componentDidMount() {\n const {\n match: { params },\n } = this.props;\n\n var jobId = params.jobId;\n\n this.props.onAuth.authCheckState().then(() => {\n if (this.props.language) {\n this.props.onContent.getContentTranslations(this.props.language.id, \"SfiaAll-Menu-SfiaProfileMenu-SfiaProfile-Lors-Skills\").then(() => {\n this.setState({ contentLoading: this.props.contentLoading });\n });\n\n this.props.onJob.getJob(jobId).then(() => {\n if (this.props.job) {\n Promise.all([\n this.props.onLor.getLors(),\n this.props.onCategory.getCategories(),\n this.props.onCategory.getExtraFrameworkCapabilities(),\n this.props.onCategory.getExtraFrameworkLevels(),\n this.props.onJob.getJobLorProfiles(jobId),\n this.props.onJob.getJobSkillProfiles(jobId),\n this.props.onJob.getJobSkillAttributes(jobId),\n this.props.onJob.getJobLorAttributes(jobId),\n ])\n .then(() => {\n this.setState({ jobLoading: this.props.jobLoading || this.props.lorLoading || this.props.categoryLoading });\n })\n .catch(() => {\n this.setState({\n jobLoading: false,\n });\n });\n } else {\n this.setState({ jobLoading: this.props.jobLoading });\n }\n });\n }\n\n this.setState({ loading: this.props.loading });\n });\n }\n\n componentWillUnmount() {\n this.setState = (state, callback) => {\n return;\n };\n }\n\n handleChangeShowDetail = () => {\n this.setState({\n showDetail: !this.state.showDetail,\n });\n };\n\n handleChangeShowMoreDetail = () => {\n this.setState({\n showMoreDetail: !this.state.showMoreDetail,\n });\n };\n\n updateFloatingLegendStatus = (showFloatingLegend) => {\n this.setState({ showFloatingLegend });\n };\n\n render() {\n const { job } = this.props;\n const { showMoreDetail } = this.state;\n\n return (\n \n \n {job ? (\n \n \n \n {job && {this.parameterizedString(this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SfiaProfileJobSkillRequirement\", \"Skill Requirement - {s1}\"), `${job.name}`)}
}\n \n \n \n \n
\n \n \n \n {job.reference} \n
\n \n \n \n {job.seniority} \n
\n \n \n \n {job.employmentStatus} \n
\n \n \n \n {job.purpose} \n
\n \n \n \n {job.qualificationRequirements} \n
\n {showMoreDetail && (\n \n {job.department && job.department != \"\" && (\n \n \n \n {job.department} \n
\n )}\n {job.location && job.location != \"\" && (\n \n \n \n {job.location} \n
\n )}\n {job.fte && (\n \n \n \n {job.fte} \n
\n )}\n {job.keyAccountibilities && job.keyAccountibilities != \"\" && (\n \n \n \n {job.keyAccountibilities} \n
\n )}\n {job.keyProcesses && job.keyProcesses != \"\" && (\n \n \n \n {job.keyProcesses} \n
\n )}\n {job.educationRequirements && job.educationRequirements != \"\" && (\n \n \n \n {job.educationRequirements} \n
\n )}\n {job.otherRequirements && job.otherRequirements != \"\" && (\n \n \n \n {job.otherRequirements} \n
\n )}\n \n )}\n \n \n \n {showMoreDetail ? \n \n
\n \n
\n \n \n \n {this.state.showDetail || this.state.showEdit\n ? this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonHideDetail\", \"Hide Detail\")\n : this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonShowDetail\", \"Show 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 Job detail not found
\n \n )}\n \n ) : (\n \n
\n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n token: state.auth.token,\n\n language: state.language.language,\n contentTranslations: state.content.contentTranslations,\n contentLoading: state.content.loading,\n contentError: state.content.error,\n\n jobLoading: state.job.loading,\n jobError: state.job.error,\n jobLoading: state.job.loading,\n job: state.job.job,\n\n jobLorProfiles: state.job.jobLorProfiles,\n jobSkillProfiles: state.job.jobSkillProfiles,\n jobSkillAttributes: state.job.jobSkillAttributes,\n jobLorAttributes: state.job.jobLorAttributes,\n\n lorLoading: state.lor.loading,\n lors: state.lor.lors,\n\n categoryLoading: state.category.loading,\n categories: state.category.categories,\n extraFrameworkCapabilities: state.category.extraFrameworkCapabilities,\n extraFrameworkLevels: state.category.extraFrameworkLevels,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onCategory: bindActionCreators(categoryActions, dispatch),\n onContent: bindActionCreators(contentActions, dispatch),\n onJob: bindActionCreators(jobActions, dispatch),\n onLor: bindActionCreators(lorActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(JobsProfile);\n","import ErrorHandler from \"./../errorResponseHandler\";\nimport Instance from \"./AxiosInstance\";\n\nexport const axios = Instance.apiInstance();\n\nclass ValueGroupAPI {\n static getValuesByGroupName(groupName, languageId) {\n return axios\n .get(`/valueGroups/getvalues?groupName=${groupName}${languageId ? `&languageId=${languageId}` : \"\"}`)\n .then((res) => {\n const response = res.data;\n return response;\n })\n .catch((err) => {\n throw ErrorHandler(err);\n });\n }\n}\n\nexport default ValueGroupAPI;\n","import ValueGroupAPI from \"./../../common/api/service/ValueGroupService\";\nimport * as CONSTANTS from \"./../../common/constant\";\nimport * as actionTypes from \"./actionTypes\";\n\nexport const getSeniorityOptionsStart = () => {\n return {\n type: actionTypes.GET_SENIORITY_VALUES_START,\n };\n};\n\nexport const getSeniorityOptionsSuccess = (values) => {\n return {\n type: actionTypes.GET_SENIORITY_VALUES_SUCCESS,\n values,\n };\n};\n\nexport const getSeniorityOptionsFail = () => {\n return {\n type: actionTypes.GET_SENIORITY_VALUES_FAIL,\n };\n};\n\nexport const getSeniorityOptions = (languageId) => {\n return (dispatch) => {\n dispatch(getSeniorityOptionsStart());\n\n return ValueGroupAPI.getValuesByGroupName(CONSTANTS.OPTIONS_SENIORITY_GROUP_NAME, languageId)\n .then((res) => {\n dispatch(getSeniorityOptionsSuccess(res));\n })\n .catch((err) => {\n dispatch(getSeniorityOptionsFail(err));\n });\n };\n};\n\nexport const getContractTypeOptionsStart = () => {\n return {\n type: actionTypes.GET_CONTRACT_TYPE_VALUES_START,\n };\n};\n\nexport const getContractTypeOptionsSuccess = (values) => {\n return {\n type: actionTypes.GET_CONTRACT_TYPE_VALUES_SUCCESS,\n values,\n };\n};\n\nexport const getContractTypeOptionsFail = () => {\n return {\n type: actionTypes.GET_CONTRACT_TYPE_VALUES_FAIL,\n };\n};\n\nexport const getContractTypeOptions = (languageId) => {\n return (dispatch) => {\n dispatch(getContractTypeOptionsStart());\n\n return ValueGroupAPI.getValuesByGroupName(CONSTANTS.OPTIONS_CONTRACT_TYPE_GROUP_NAME, languageId)\n .then((res) => {\n dispatch(getContractTypeOptionsSuccess(res));\n })\n .catch((err) => {\n dispatch(getContractTypeOptionsFail(err));\n });\n };\n};\n\nexport const getYearRangeJobOptionsStart = () => {\n return {\n type: actionTypes.GET_YEAR_RANGE_JOB_VALUES_START,\n };\n};\n\nexport const getYearRangeJobOptionsSuccess = (values) => {\n return {\n type: actionTypes.GET_YEAR_RANGE_JOB_VALUES_SUCCESS,\n values,\n };\n};\n\nexport const getYearRangeJobOptionsFail = () => {\n return {\n type: actionTypes.GET_YEAR_RANGE_JOB_VALUES_FAIL,\n };\n};\n\nexport const getYearRangeJobOptions = (languageId) => {\n return (dispatch) => {\n dispatch(getYearRangeJobOptionsStart());\n\n return ValueGroupAPI.getValuesByGroupName(CONSTANTS.OPTIONS_YEAR_RANGE_JOB_GROUP_NAME, languageId)\n .then((res) => {\n dispatch(getYearRangeJobOptionsSuccess(res));\n })\n .catch((err) => {\n dispatch(getYearRangeJobOptionsFail(err));\n });\n };\n};\n\nexport const getYearRangeOrgOptionsStart = () => {\n return {\n type: actionTypes.GET_YEAR_RANGE_ORG_VALUES_START,\n };\n};\n\nexport const getYearRangeOrgOptionsSuccess = (values) => {\n return {\n type: actionTypes.GET_YEAR_RANGE_ORG_VALUES_SUCCESS,\n values,\n };\n};\n\nexport const getYearRangeOrgOptionsFail = () => {\n return {\n type: actionTypes.GET_YEAR_RANGE_ORG_VALUES_FAIL,\n };\n};\n\nexport const getYearRangeOrgOptions = (languageId) => {\n return (dispatch) => {\n dispatch(getYearRangeOrgOptionsStart());\n\n return ValueGroupAPI.getValuesByGroupName(CONSTANTS.OPTIONS_YEAR_RANGE_ORG_GROUP_NAME, languageId)\n .then((res) => {\n dispatch(getYearRangeOrgOptionsSuccess(res));\n })\n .catch((err) => {\n dispatch(getYearRangeOrgOptionsFail(err));\n });\n };\n};\n","import * as personActions from \"../../store/actions/personAction\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport \"./../../custom-card-profile.css\";\nimport axios from \"axios\";\nimport React, { Fragment } from \"react\";\nimport ReactCrop from \"react-image-crop\";\nimport \"react-image-crop/dist/ReactCrop.css\";\nimport { connect } from \"react-redux\";\nimport { Modal, ModalBody, Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nclass UpdateProfilePicture extends React.Component {\n static displayName = UpdateProfilePicture.name;\n\n constructor(props) {\n super(props);\n\n this.state = {\n src: null,\n crop: {\n unit: \"%\",\n x: 5,\n y: 5,\n width: 90,\n aspect: 16 / 16,\n },\n updating: false,\n alerts: [],\n };\n\n this.imageRef = React.createRef();\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.showModal !== this.props.showModal) {\n this.setState({ showModal: true });\n }\n\n if (prevProps.src !== this.props.src) {\n this.setState({ src: this.props.src });\n }\n }\n\n toggleModal = () => {\n this.setState({\n showModal: !this.state.showModal,\n });\n };\n\n onSelectFile = (e) => {\n if (e.target.files && e.target.files.length > 0) {\n const reader = new FileReader();\n reader.addEventListener(\"load\", () => this.setState({ src: reader.result }));\n reader.readAsDataURL(e.target.files[0]);\n }\n };\n\n // If you setState the crop in here you should return false.\n onImageLoaded = (image) => {\n this.imageRef = image;\n };\n\n onCropComplete = (crop) => {\n this.makeClientCrop(crop);\n };\n\n onCropChange = (crop, percentCrop) => {\n // You could also use percentCrop:\n // this.setState({ crop: percentCrop });\n this.setState({ crop });\n };\n\n async makeClientCrop(crop) {\n if (this.imageRef && crop.width && crop.height) {\n const croppedImageUrl = await this.getCroppedImg(this.imageRef, crop, \"newFile.jpeg\");\n this.setState({ croppedImageUrl });\n }\n }\n\n getCroppedImg(image, crop, fileName) {\n const canvas = document.createElement(\"canvas\");\n const pixelRatio = window.devicePixelRatio;\n const scaleX = image.naturalWidth / image.width;\n const scaleY = image.naturalHeight / image.height;\n const ctx = canvas.getContext(\"2d\");\n\n canvas.width = crop.width * pixelRatio * scaleX;\n canvas.height = crop.height * pixelRatio * scaleY;\n\n ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);\n ctx.imageSmoothingQuality = \"high\";\n\n ctx.drawImage(image, crop.x * scaleX, crop.y * scaleY, crop.width * scaleX, crop.height * scaleY, 0, 0, crop.width * scaleX, crop.height * scaleY);\n\n return new Promise((resolve, reject) => {\n canvas.toBlob(\n (blob) => {\n if (!blob) {\n //reject(new Error('Canvas is empty'));\n console.error(\"Canvas is empty\");\n return;\n }\n blob.name = fileName;\n window.URL.revokeObjectURL(this.fileUrl);\n this.fileUrl = window.URL.createObjectURL(blob);\n resolve(this.fileUrl);\n },\n \"image/jpeg\",\n 1\n );\n });\n }\n\n uploadImage = () => {\n const blobUrl = this.state.croppedImageUrl;\n const config = { responseType: \"blob\" };\n\n Promise.resolve(axios.get(blobUrl, config)).then((response) => {\n const file = new File([response.data], \"filename.jpg\");\n this.setState({ updating: true });\n this.props.onPerson.uploadPersonProfilePicture(file).then(() => {\n if (!this.props.updating) {\n if (this.props.error) {\n } else {\n this.props.pictureUpdated();\n this.setState({ showModal: false });\n }\n }\n this.setState({ updating: this.props.updating });\n });\n });\n };\n\n selectPicture = () => {\n this.imageRef.current.click();\n };\n\n handleChange = (event) => {\n if (event.target.files && event.target.files.length > 0) {\n const reader = new FileReader();\n reader.addEventListener(\"load\", () => {\n this.setState({ src: reader.result });\n });\n reader.readAsDataURL(event.target.files[0]);\n }\n };\n\n render() {\n const { crop, croppedImageUrl, src } = this.state;\n\n return (\n \n \n \n \n
\n
\n
\n {this.state.updating ? (\n \n \n \n \n \n \n \n )}\n
\n
\n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.person.loading,\n error: state.person.error,\n person: state.person.person,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onPerson: bindActionCreators(personActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(UpdateProfilePicture);\n","import * as groupValueActions from \"../../store/actions/groupValueAction\";\nimport * as personActions from \"../../store/actions/personAction\";\nimport changeInput from \"../../utils/changeInput\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport \"./../../custom-card-profile.css\";\nimport UpdateProfilePicture from \"./UpdateProfilePicture\";\nimport { faPencilAlt, faTimes } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Col, Container, Input, Modal, ModalBody, Row, Spinner, Table, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\n//import sampleProfile from '../../assets/img/lgo/sample-profile.png';\n\nconst cardProfileStyle = {\n fontFamily: \"IBMPlexSans\",\n fontSize: \"11px\",\n color: \"#2B2B2B\",\n};\n\nclass CardProfile extends React.Component {\n static displayName = CardProfile.name;\n constructor(props) {\n super(props);\n\n this.state = {\n person: null,\n account: null,\n showModal: false,\n modal: false,\n setModal: false,\n loading: false,\n editMode: false,\n seniorityOptions: [],\n //optionSeniority: CONSTANTS.OPTIONS_SENIORITY,\n contractTypeOptions: [],\n //optionEmploymentContract: CONSTANTS.OPTIONS_EMPLOYMENT_CONTRACT,\n yearRangeJobOptions: [],\n //optionTimeInCurrentRole: CONSTANTS.OPTIONS_TIME_IN_CURRENT_ROLE,\n yearRangeOrgOptions: [],\n //optionTimeInOrganisation: CONSTANTS.OPTIONS_TIME_IN_ORGANISATION,\n form: {\n firstName: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n lastName: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n seniority: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n employmentContract: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n timeInCurrentRole: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n timeInOrganisation: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n recentOrCurrentRole: {\n validation: {\n required: true,\n },\n value: \"\",\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n salutation: {\n validation: {\n required: false,\n },\n value: \"\",\n valid: true,\n isValidFormat: false,\n touched: false,\n },\n allowNotifications: {\n validation: {\n required: false,\n },\n value: false,\n valid: true,\n isValidFormat: false,\n touched: false,\n },\n },\n isFormValid: false,\n updating: false,\n showProfilePictureModal: null,\n selectedPicture: null,\n profilePicture: null,\n };\n\n this.initData = this.initData.bind(this);\n this.startEdit = this.startEdit.bind(this);\n this.cancelEdit = this.cancelEdit.bind(this);\n this.submitEdit = this.submitEdit.bind(this);\n this.handleChange = this.handleChange.bind(this);\n this.imageRef = React.createRef();\n }\n\n componentDidMount() {\n this.initData();\n }\n\n componentWillUnmount() {\n this.setState = (state, callback) => {\n return;\n };\n }\n\n handleChange = (event) => {\n const { name, value } = event.target;\n\n const updateState = changeInput(this.state.form, name, value);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n initData() {\n if (this.props.managedPeople) {\n this.setState({ loading: true });\n const person = this.props.managedPeople.personB;\n\n let account;\n if (person.accounts && person.accounts.length > 0) {\n account = person.accounts.sort((a, b) => b.createdOn > a.createdOn)[0];\n }\n\n this.setState({ person, account, loading: false });\n\n this.props.onPerson.downloadManagedPersonProfilePicture(person.email).then(() => {\n if (this.props.profilePicture) {\n this.setState({ profilePicture: this.props.profilePicture });\n }\n });\n } else {\n this.setState({ loading: true });\n this.props.onPerson.getPersonMyProfile().then(() => {\n if (!this.props.loading && this.props.person) {\n const person = this.props.person;\n\n let account;\n if (person.accounts && person.accounts.length > 0) {\n account = person.accounts.sort((a, b) => b.createdOn > a.createdOn)[0];\n }\n\n this.setState({ person, account });\n }\n this.setState({ loading: this.props.loading });\n });\n\n this.props.onPerson.downloadPersonProfilePicture().then(() => {\n if (this.props.profilePicture) {\n this.setState({ profilePicture: this.props.profilePicture });\n }\n });\n }\n\n Promise.all([\n this.props.onGroupValue.getSeniorityOptions(this.props.language ? this.props.language.id : null),\n this.props.onGroupValue.getContractTypeOptions(this.props.language ? this.props.language.id : null),\n this.props.onGroupValue.getYearRangeJobOptions(this.props.language ? this.props.language.id : null),\n this.props.onGroupValue.getYearRangeOrgOptions(this.props.language ? this.props.language.id : null),\n ])\n .then(() => {\n this.setState({\n seniorityOptions: this.props.seniorityOptions ? this.props.seniorityOptions : [],\n contractTypeOptions: this.props.contractTypeOptions ? this.props.contractTypeOptions : [],\n yearRangeJobOptions: this.props.yearRangeJobOptions ? this.props.yearRangeJobOptions : [],\n yearRangeOrgOptions: this.props.yearRangeOrgOptions ? this.props.yearRangeOrgOptions : [],\n });\n })\n .catch((err) => {});\n }\n\n pictureUpdated = () => {\n if (this.props.managedPeople) {\n this.props.onPerson.downloadManagedPersonProfilePicture(person.email).then(() => {\n if (this.props.profilePicture) {\n this.setState({ profilePicture: this.props.profilePicture });\n }\n });\n } else {\n this.props.onPerson.downloadPersonProfilePicture().then(() => {\n if (this.props.profilePicture) {\n this.setState({ profilePicture: this.props.profilePicture });\n }\n });\n }\n };\n\n startEdit() {\n if (!this.state.editMode) {\n const { person, account } = this.state;\n\n let form = {\n firstName: {\n validation: {\n required: true,\n },\n value: person.firstName,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n lastName: {\n validation: {\n required: true,\n },\n value: person.lastName,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n accountId: {\n validation: {\n required: true,\n },\n value: account.id,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n seniority: {\n validation: {\n required: true,\n },\n value: account.seniority,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n employmentContract: {\n validation: {\n required: true,\n },\n value: account.employmentContract,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n timeInCurrentRole: {\n validation: {\n required: true,\n },\n value: account.timeInCurrentRole,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n timeInOrganisation: {\n validation: {\n required: true,\n },\n value: account.timeInOrganisation,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n recentOrCurrentRole: {\n validation: {\n required: true,\n },\n value: account.recentOrCurrentRole ? account.recentOrCurrentRole.replace(\"\", \"\") : \"\",\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n\n salutation: {\n validation: {\n required: false,\n },\n value: person.salutation,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n allowNotifications: {\n validation: {\n required: false,\n },\n value: person.allowNotifications,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n };\n\n this.setState({ form, editMode: true, isFormValid: true });\n }\n }\n\n cancelEdit() {\n this.setState({ editMode: false });\n }\n\n submitEdit() {\n this.setState({ updating: true });\n const person = {\n firstName: this.state.form.firstName.value,\n lastName: this.state.form.lastName.value,\n accountId: this.state.form.accountId.value,\n seniority: this.state.form.seniority.value,\n\n employmentContract: this.state.form.employmentContract.value,\n timeInCurrentRole: this.state.form.timeInCurrentRole.value,\n timeInOrganisation: this.state.form.timeInOrganisation.value,\n\n position: this.state.form.recentOrCurrentRole.value,\n recentOrCurrentRole: this.state.form.recentOrCurrentRole.value,\n\n salutation: this.state.form.salutation.value,\n allowNotifications: this.state.form.allowNotifications.value,\n };\n\n this.props.onPerson.updatePersonMyProfile(person).then(() => {\n if (!this.props.updating) {\n if (this.props.error) {\n this.props.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.props.generateAlert(\"success\", \"Profile updated\");\n\n const person = this.props.person;\n\n let account;\n if (person.accounts && person.accounts.length > 0) {\n account = person.accounts.sort((a, b) => b.createdOn > a.createdOn)[0];\n }\n\n this.setState({ person, account, editMode: false });\n }\n }\n this.setState({ updating: this.props.updating });\n });\n }\n\n eventClick = () => {\n this.setState({\n showModal: null,\n });\n };\n\n toggleModal = () => {\n this.setState({\n showModal: !this.state.showModal,\n editMode: false,\n updating: false,\n });\n };\n\n showUploadProfilePicture = () => {\n this.imageRef.current.click();\n };\n\n handlePictureChange = (event) => {\n if (event.target.files && event.target.files.length > 0) {\n const reader = new FileReader();\n reader.addEventListener(\"load\", () => {\n this.setState({ showProfilePictureModal: new Date(), selectedPicture: reader.result });\n });\n reader.readAsDataURL(event.target.files[0]);\n }\n };\n\n render() {\n const { person, account, form } = this.state;\n\n return (\n \n
\n
\n {person && (\n
\n \n \n \n \n
\n {!this.props.managedPeople && (\n
\n \n \n \n \n
\n )}\n
\n \n {person.firstName} {person.lastName}\n \n
\n {person.position}
\n
\n \n {!this.props.managedPeople &&\n (this.state.editMode ? (\n \n \n \n \n \n \n ) : (\n \n \n \n \n \n \n ))}\n
\n \n \n \n \n \n \n
\n \n \n \n
\n \n \n \n )}\n
\n
\n {!this.props.managedPeople && (\n
\n \n \n \n \n
\n )}\n
\n {this.state.loading ? (\n
\n ) : (\n person && (\n
\n
\n \n {person.firstName} {person.lastName}\n \n
\n
{person.position ? person.position.replace(\"\", \"\") : \"\"}
\n
\n \n \n \n \n
\n
\n )\n )}\n
\n \n \n \n {this.parameterizedString(\n this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"VacanciesSkillRequirementDialogTitle\", \"You are about to send an enquiry to {s1}, {s2} regarding {s3}.\"),\n selectedJobMatch ? selectedJobMatch.jobVacancyOwner : \"\",\n selectedJobMatch ? selectedJobMatch.jobVacancyOwnerEmail : \"\",\n selectedJobMatch ? selectedJobMatch.jobTitle : \"\"\n )}\n \n \n
\n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n )}\n {profileTypes && profileTypes.includes(\"Endorsed\") && (\n \n \n \n \n \n \n \n \n )}\n \n
\n \n \n \n {\" \"}\n \n \n \n \n );\n };\n\n renderModalEditJob = () => {\n const { currentJob, futureJob, currAssessment, account, contentTranslations } = this.props;\n const { selectedCurrentJob, selectedFutureJob, jobMatches, mode, jobUpdating } = this.state;\n\n const changeSelectedCurrentJob = this.changeSelectedCurrentJob;\n const changeSelectedFutureJob = this.changeSelectedFutureJob;\n const handleEnquireVacancy = this.handleEnquireVacancy;\n const contentTranslator = this.contentTranslator;\n\n jobMatches.forEach((it) => {\n it.jobTitleSort = it.id == \"None\" ? \" \" + it.jobTitle : it.jobTitle;\n });\n\n const columns = [\n {\n id: \"jobTitleSort\",\n name: this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"AssignSkillRequirementFieldJobName\", \"Name\"),\n selector: (row) => row.jobTitleSort,\n sortable: true,\n width: !(account && account.latestEndorsedProfileVersion) ? \"64%\" : \"52%\",\n format: function (row, index) {\n return row.id != \"None\" ? (\n \n \n \n \n );\n } else {\n return \"\";\n }\n },\n omit: mode != \"Assign\",\n },\n {\n id: \"futureSelected\",\n name: this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", \"Future\", \"Future\"),\n selector: (row) => row.futureSelected,\n sortable: true,\n width: \"12%\",\n center: true,\n format: function (row, index) {\n if ((currAssessment && currAssessment.hasFutureJobLocked == false) || row.futureSelected == true) {\n return (\n \n \n \n \n );\n } else {\n return \"\";\n }\n },\n omit: mode != \"Assign\",\n },\n {\n id: \"jobShowAsVacancy\",\n name: \"Enquire\",\n selector: (row) => row.jobShowAsVacancy,\n sortable: false,\n width: \"12%\",\n center: true,\n format: function (row, index) {\n return (\n handleEnquireVacancy(row)} size=\"sm\" disabled={jobUpdating} className={row.alreadyEnquired ? \"btn-amber\" : \"\"}>\n {!jobUpdating ? (\n row.alreadyEnquired ? (\n contentTranslator(contentTranslations, \"SfiaProfile\", \"AssignSkillRequirementButtonEnquireAgain\", \"Enquire Again\")\n ) : (\n contentTranslator(contentTranslations, \"SfiaProfile\", \"AssignSkillRequirementButtonEnquire\", \"Enquire\")\n )\n ) : (\n \n \n )}\n \n );\n },\n omit: mode != \"Vacancy\",\n },\n ];\n\n return (\n \n \n {mode == \"Assign\" ? \n \n \n \n {mode == \"Assign\" ? (\n \n \n
\n \n
\n it.jobShowAsVacancy && it.jobVacancy >= 1)} fixedHeader={true} fixedHeaderScrollHeight=\"400px\" progressPending={this.state.jobLoading}> \n \n \n \n \n {mode == \"Assign\" && (\n \n {\" \"}\n this.handleSaveEditJobClick()}\n disabled={\n this.state.jobLoading ||\n jobUpdating ||\n (currentJob && selectedCurrentJob && currentJob.id == selectedCurrentJob.id && futureJob && selectedFutureJob && futureJob.id == selectedFutureJob.id\n ? true\n : selectedFutureJob && selectedCurrentJob.id == selectedFutureJob.id && (selectedCurrentJob.id != \"None\" || selectedFutureJob.id != \"None\"))\n }\n >\n {!jobUpdating ? (\n this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"AssignSkillRequirementButtonSave\", \"Save changes\")\n ) : (\n \n \n )}\n \n \n )}\n \n \n );\n };\n\n togleFutureRequirementCheckDialog = () => {\n const showFutureRequirementCheckDialog = this.state.showFutureRequirementCheckDialog;\n this.setState({ showFutureRequirementCheckDialog: !showFutureRequirementCheckDialog });\n };\n\n handleConfirmFutureRequirementCheck = () => {\n this.setState(\n {\n showFutureRequirementCheckDialog: false,\n byPassFutureRequirementCheck: true,\n },\n () => {\n this.handleSaveEditJobClick();\n }\n );\n };\n\n renderFutureRequirementCheckDialog = () => {\n const { showFutureRequirementCheckDialog } = this.state;\n\n return (\n \n \n \n \n \n \n \n {\n this.handleConfirmFutureRequirementCheck();\n }}\n >\n \n \n \n \n );\n };\n\n handleSendSelfAssessedProfileOnVacancyCheckedChanged = () => {\n const sendSelfAssessedProfileOnVacancy = this.state.sendSelfAssessedProfileOnVacancy;\n this.setState({ sendSelfAssessedProfileOnVacancy: !sendSelfAssessedProfileOnVacancy });\n };\n\n handleSendEndorsedProfileOnVacancyCheckedChanged = () => {\n const sendEndorsedProfileOnVacancy = this.state.sendEndorsedProfileOnVacancy;\n this.setState({ sendEndorsedProfileOnVacancy: !sendEndorsedProfileOnVacancy });\n };\n\n render() {\n const editJob = this.state.editJob;\n const { isSelfAssessOk, currentJob, futureJob, isEndorseOk } = this.props;\n const { jobMatches } = this.state;\n\n return (\n \n {editJob && this.renderModalEditJob()}\n {this.renderFutureRequirementCheckDialog()}\n {this.renderModalJobVacancyEnquiry()}\n \n \n \n \n {(!currentJob || (currentJob && currentJob.isEditable) || (futureJob && futureJob.isEditable)) && (!this.props.managedPeople || (this.props.managedPeople && this.props.managedPeople.relationshipType == \"Line Manager\" ? true : false)) && (\n \n this.openEditJob(\"Vacancy\")}>\n \n \n \n )}\n this.openEditJob(\"Assign\")}>\n \n \n \n \n )}\n
\n \n
\n \n \n \n
\n
\n {currentJob ? this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", \"Current\", \"Current\") + \" - \" + currentJob.jobTitle : this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", \"Current\", \"Current\")} \n \n {currentJob ? (\n \n {`${(Math.round(currentJob.matchPercentSelf * 100) / 100).toFixed(2)}%`}
\n \n \n ) : (\n
\n
\n {futureJob ? this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", \"Future\", \"Future\") + \" - \" + futureJob.jobTitle : this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", \"Future\", \"Future\")} \n \n {futureJob ? (\n \n {`${(Math.round(futureJob.matchPercentSelf * 100) / 100).toFixed(2)}%`}
\n \n \n ) : (\n
\n
\n
\n \n \n \n
\n
\n {currentJob ? this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", \"Current\", \"Current\") + \" - \" + currentJob.jobTitle : this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", \"Current\", \"Current\")} \n \n {currentJob ? (\n \n {`${(Math.round(currentJob.matchPercentValidated * 100) / 100).toFixed(2)}%`}
\n \n \n ) : (\n
\n
\n {futureJob ? this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", \"Future\", \"Future\") + \" - \" + futureJob.jobTitle : this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", \"Future\", \"Future\")} \n \n {futureJob ? (\n \n {`${(Math.round(futureJob.matchPercentValidated * 100) / 100).toFixed(2)}%`}
\n \n \n ) : (\n
\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n jobLoading: state.job.loading,\n jobUpdating: state.job.isUpdating,\n jobError: state.job.error,\n jobMatchesUpdated: state.job.jobMatchesUpdated,\n\n managedPeople: state.auth.managedPeople,\n contentTranslations: state.content.contentTranslations,\n\n currAssessment: state.config.currAssessment,\n containerConfig: state.config.containerConfig,\n account: state.person.account,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onJob: bindActionCreators(jobActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(SkillProgress);\n","import * as actionPlanActions from \"../../store/actions/actionPlanAction\";\nimport * as categoryActions from \"../../store/actions/categoryAction\";\nimport * as companyActions from \"../../store/actions/companyAction\";\nimport * as jobActions from \"../../store/actions/jobAction\";\nimport * as skillProfileActions from \"../../store/actions/skillProfileAction\";\nimport changeInput from \"../../utils/changeInput\";\nimport { generateRandomString, parameterizedString } from \"../../utils/stringUtils\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport { faCircle as farCircle } from \"@fortawesome/free-regular-svg-icons\";\nimport { faAdjust, faCheck, faCircle, faExclamationCircle, faInfoCircle, faPlus, faTrash } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React from \"react\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { connect } from \"react-redux\";\nimport Combobox from \"react-widgets/Combobox\";\nimport { Button, ButtonGroup, Col, Container, CustomInput, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst containerStyle = {\n fontSize: \"11px\",\n fontFamily: \"IBMPlexSans-Light\",\n};\n\nconst titleStyle = {\n fontSize: \"13px\",\n fontFamily: \"IBMPlexSans-Bold\",\n};\n\nclass SkillStep extends React.Component {\n static displayName = SkillStep.name;\n\n constructor(props) {\n super(props);\n this.state = {\n optionsStatus: [\n { label: \"Todo\", value: \"ToDo\" },\n { label: \"In Progress\", value: \"InProgress\" },\n { label: \"Done\", value: \"Done - self verified\" },\n ],\n loading: true,\n loadingFull: false,\n actions: [],\n poppedUpAction: null,\n showActionPlanDetail: false,\n optionsActionSkills: [],\n showActionPlanEdit: false,\n editedAction: null,\n form: {\n id: {\n validation: {\n required: true,\n },\n value: null,\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n status: {\n validation: {\n required: true,\n },\n value: null,\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n actionType: {\n validation: {\n required: true,\n },\n value: null,\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n name: {\n validation: {\n required: true,\n },\n value: null,\n valid: false,\n isValidFormat: false,\n touched: false,\n },\n targetCompletionOn: {\n validation: {\n required: this.props.containerConfig && this.props.containerConfig ? this.props.containerConfig.actionTargetCompletionDateIsMandatory : false,\n isDateTime: true,\n },\n value: null,\n valid: !(this.props.containerConfig && this.props.containerConfig ? this.props.containerConfig.actionTargetCompletionDateIsMandatory : false),\n isValidFormat: true,\n touched: false,\n },\n description: {\n validation: {\n required: false,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n link: {\n validation: {\n required: false,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n duration: {\n validation: {\n required: false,\n isNumeric: true,\n },\n value: null,\n valid: true,\n isValidFormat: true,\n touched: false,\n },\n },\n isFormValid: false,\n selectedJob: null,\n optionsJob: [],\n jobLorProfiles: [],\n jobSkillProfiles: [],\n selectedSkills: [],\n pickedOtherSkills: [],\n selectedOtherSkill: \"\",\n selectedOtherSkills: [],\n actionPlanUpdating: false,\n };\n\n this.initData = this.initData.bind(this);\n this.handleSkillCheckedChange = this.handleSkillCheckedChange.bind(this);\n this.handleChangeOtherSkill = this.handleChangeOtherSkill.bind(this);\n this.handleAddOtherSkill = this.handleAddOtherSkill.bind(this);\n this.handleOtherSkillCheckedChange = this.handleOtherSkillCheckedChange.bind(this);\n this.handleSubmitEdit = this.handleSubmitEdit.bind(this);\n this.handleSubmitDelete = this.handleSubmitDelete.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n this.parameterizedString = parameterizedString.bind(this);\n this.generateRandomString = generateRandomString.bind(this);\n }\n\n componentDidMount() {\n this.initData();\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.newActionPlanAdded !== this.props.newActionPlanAdded && this.props.newActionPlanAdded) {\n this.refreshActions();\n }\n }\n\n refreshActions = () => {\n Promise.all([this.props.managedPeople ? this.props.onActionPlan.getManagedPeopleActions(this.props.managedPeople.personB.email) : this.props.onActionPlan.getMyActions()])\n .then(() => {\n if (!this.props.loading) {\n if (this.props.error) {\n this.setState({ loading: false });\n } else {\n const actions = this.props.actions;\n this.setState({ actions });\n\n if (actions && actions.length > 0) {\n let selectedJob = null;\n\n const jobMatches = this.props.jobMatches;\n const currentJob = jobMatches.find((it) => it.jobType === \"Current\");\n const futureJob = jobMatches.find((it) => it.jobType === \"Future\");\n\n if (currentJob) {\n selectedJob = currentJob;\n } else if (futureJob) {\n selectedJob = futureJob;\n }\n\n const actionSkills = this.props.actionSkills;\n\n let categories = this.props.categories;\n let jobLorProfiles = this.props.jobLorProfiles;\n let jobSkillProfiles = this.props.jobSkillProfiles;\n\n const lorProfiles = this.props.lorProfiles;\n const skillProfiles = this.props.skillProfiles;\n\n categories = categories.map((category) => {\n return {\n id: category.id,\n name: category.name,\n description: category.description,\n colour: category.colour,\n sfiaVersion: category.sfiaVersion,\n subCategories: category.subCategories.map((subCategory) => {\n return {\n id: subCategory.id,\n name: subCategory.name,\n description: subCategory.description,\n colour: subCategory.colour,\n skillColour: subCategory.skillColour,\n skills: subCategory.skills.map((skill) => {\n let skillNameShown = false;\n\n return {\n id: skill.id,\n name: skill.name,\n skillsCode: skill.skillsCode,\n description: skill.description,\n levels: skill.levels.map((level) => {\n const skillProfile = skillProfiles.find((x) => x.skillCode == skill.skillsCode && x.level == level.level);\n const jobSkillProfile = selectedJob ? jobSkillProfiles.find((x) => x.jobId == selectedJob.id && x.skillCode == skill.skillsCode && x.level == level.level) : null;\n\n if (jobSkillProfile && skillProfile) {\n if (skillProfile.numericVal == 1 || skillProfile.stringVal == \"M\") {\n jobSkillProfile.actioned = true;\n }\n }\n\n const action = actions.find((actions) => actions.skills.some((it) => it.code == skill.skillsCode && it.level == level.level));\n\n level = {\n skillNameShown: false,\n show: false,\n id: level.id,\n level: level.level,\n description: level.description,\n skillProfile: skillProfile,\n jobSkillProfile: jobSkillProfile,\n action: action,\n };\n\n if (!skillNameShown) {\n if ((level.skillProfile && level.jobSkillProfile) || (!level.skillProfile && level.jobSkillProfile) || this.state.showAllSkill) {\n level.skillNameShown = true;\n skillNameShown = true;\n }\n }\n\n if ((level.skillProfile && level.jobSkillProfile && level.skillProfile.numericVal < 1) || (!level.skillProfile && level.jobSkillProfile)) {\n level.show = true;\n }\n\n return level;\n }),\n };\n }),\n };\n }),\n };\n });\n\n jobLorProfiles.map((jobLorProfile) => {\n const lorProfile = lorProfiles.find((it) => it.lorCode == jobLorProfile.lorCode && it.level >= jobLorProfile.level);\n const plan = actions.find((it) => it.skills.some((skill) => skill.code == jobLorProfile.lorCode && skill.level >= jobLorProfile.level));\n if (lorProfile || plan) {\n jobLorProfile.actioned = true;\n }\n });\n\n jobSkillProfiles.map((jobSkillProfile) => {\n const plan = actions.find((it) => it.skills.some((skill) => skill.code == jobSkillProfile.skillCode && skill.level == jobSkillProfile.level));\n if (plan) {\n jobSkillProfile.actioned = true;\n }\n });\n\n actionSkills.forEach((actionSkill) => {\n actionSkill.skills.forEach((skill) => {\n if (\n actions.filter((x) => x.skills.some((y) => y.code == skill.skillCode && y.level == skill.skillLevel)).length > 0 ||\n jobLorProfiles.filter((it) => it.lorCode == skill.skillCode && it.level == skill.skillLevel).length > 0 ||\n jobSkillProfiles.filter((it) => it.skillCode == skill.skillCode && it.level == skill.skillLevel).length > 0\n ) {\n skill.actioned = true;\n }\n });\n });\n\n if (selectedJob) {\n jobLorProfiles = jobLorProfiles ? jobLorProfiles.filter((x) => x.jobId == selectedJob.id) : [];\n jobSkillProfiles = jobSkillProfiles ? jobSkillProfiles.filter((x) => x.jobId == selectedJob.id) : [];\n }\n\n this.setState({\n categories,\n optionsActionTypes: this.props.actionTypes,\n optionsActionSkills: actionSkills,\n jobLorProfiles,\n jobSkillProfiles,\n lorProfiles,\n skillProfiles,\n });\n }\n }\n }\n\n this.setState({ loading: this.props.loading });\n })\n .catch((err) => {\n console.log(\"err\", err);\n this.setState({ loading: false });\n });\n };\n\n initData() {\n this.setState({ pickedOtherSkills: [], selectedOtherSkills: [], loadingFull: true });\n\n Promise.all([\n this.props.onActionPlan.getActionTypes(),\n this.props.onActionPlan.getActionSkills(),\n this.props.onCompany.getSelectedProviderCompanies(),\n this.props.managedPeople ? this.props.onActionPlan.getManagedPeopleActions(this.props.managedPeople.personB.email) : this.props.onActionPlan.getMyActions(),\n ])\n .then(() => {\n if (!this.props.loading && !this.props.companyLoading) {\n if (this.props.error) {\n this.setState({ loading: false });\n } else {\n const actions = this.props.actions;\n this.setState({ actions });\n\n if (actions && actions.length > 0) {\n Promise.all([\n //this.props.managedPeople ? this.props.onJob.getManagedPeopleJobMatches(this.props.managedPeople.personB.email) : this.props.onJob.getMyJobMatches(),\n this.props.managedPeople ? this.props.onJob.getManagedPeopleJobLorProfiles(this.props.managedPeople.personB.email) : this.props.onJob.getJobLorProfiles(null),\n this.props.managedPeople ? this.props.onJob.getManagedPeopleJobSkillProfiles(this.props.managedPeople.personB.email) : this.props.onJob.getJobSkillProfiles(null),\n ])\n .then(() => {\n if (\n !this.props.jobLoading\n //&& !this.props.jobMatchesLoading\n ) {\n let optionsJob = [];\n let selectedJob = null;\n\n const jobMatches = this.props.jobMatches;\n const currentJob = jobMatches.find((it) => it.jobType === \"Current\");\n const futureJob = jobMatches.find((it) => it.jobType === \"Future\");\n\n if (currentJob) {\n optionsJob.push({\n value: currentJob.jobType + \" - \" + currentJob.jobTitle,\n label: currentJob.jobType + \" - \" + currentJob.jobTitle,\n type: currentJob.jobType,\n id: currentJob.jobId,\n });\n }\n\n if (futureJob) {\n optionsJob.push({\n value: futureJob.jobType + \" - \" + futureJob.jobTitle,\n label: futureJob.jobType + \" - \" + futureJob.jobTitle,\n type: futureJob.jobType,\n id: futureJob.jobId,\n });\n }\n\n if (optionsJob.length > 0) {\n selectedJob = optionsJob[0];\n }\n\n const actionSkills = this.props.actionSkills;\n\n let categories = this.props.categories;\n\n let jobLorProfiles = this.props.jobLorProfiles; // ? this.props.jobLorProfiles.filter(x => x.jobId == selectedJob.id) : [];\n let jobSkillProfiles = this.props.jobSkillProfiles; // ? this.props.jobSkillProfiles.filter(x => x.jobId == selectedJob.id) : [];\n\n Promise.all([\n this.props.managedPeople ? this.props.onSkillProfile.getManagedPeopleLorProfile(this.props.managedPeople.personB.email) : this.props.onSkillProfile.getMyLorProfile(null, null, null),\n this.props.managedPeople ? this.props.onSkillProfile.getManagedPeopleSkillProfile(this.props.managedPeople.personB.email) : this.props.onSkillProfile.getMySkillProfile(null, null, null),\n ])\n .then(() => {\n if (!this.props.loadingProfile && !this.props.loadingLor) {\n if (this.props.errorLor || this.props.categoryError) {\n this.setState({ loading: false });\n } else {\n const lorProfiles = this.props.lorProfiles;\n const skillProfiles = this.props.skillProfiles;\n\n categories = categories.map((category) => {\n return {\n id: category.id,\n name: category.name,\n description: category.description,\n colour: category.colour,\n sfiaVersion: category.sfiaVersion,\n subCategories: category.subCategories.map((subCategory) => {\n return {\n id: subCategory.id,\n name: subCategory.name,\n description: subCategory.description,\n colour: subCategory.colour,\n skillColour: subCategory.skillColour,\n skills: subCategory.skills.map((skill) => {\n let skillNameShown = false;\n\n return {\n id: skill.id,\n name: skill.name,\n skillsCode: skill.skillsCode,\n description: skill.description,\n levels: skill.levels.map((level) => {\n const skillProfile = skillProfiles.find((x) => x.skillCode == skill.skillsCode && x.level == level.level);\n const jobSkillProfile = selectedJob ? jobSkillProfiles.find((x) => x.jobId == selectedJob.id && x.skillCode == skill.skillsCode && x.level == level.level) : null;\n\n if (jobSkillProfile && skillProfile) {\n if (skillProfile.numericVal == 1 || skillProfile.stringVal == \"M\") {\n jobSkillProfile.actioned = true;\n }\n }\n\n const action = actions.find((actions) => actions.skills.some((it) => it.code == skill.skillsCode && it.level == level.level));\n\n level = {\n skillNameShown: false,\n show: false,\n id: level.id,\n level: level.level,\n description: level.description,\n skillProfile: skillProfile,\n jobSkillProfile: jobSkillProfile,\n action: action,\n };\n\n if (!skillNameShown) {\n if ((level.skillProfile && level.jobSkillProfile) || (!level.skillProfile && level.jobSkillProfile) || this.state.showAllSkill) {\n level.skillNameShown = true;\n skillNameShown = true;\n }\n }\n\n if ((level.skillProfile && level.jobSkillProfile && level.skillProfile.numericVal < 1) || (!level.skillProfile && level.jobSkillProfile)) {\n level.show = true;\n }\n\n return level;\n }),\n };\n }),\n };\n }),\n };\n });\n\n jobLorProfiles.map((jobLorProfile) => {\n const lorProfile = lorProfiles.find((it) => it.lorCode == jobLorProfile.lorCode && it.level >= jobLorProfile.level);\n const plan = actions.find((it) => it.skills.some((skill) => skill.code == jobLorProfile.lorCode && skill.level >= jobLorProfile.level));\n if (lorProfile || plan) {\n jobLorProfile.actioned = true;\n }\n });\n\n jobSkillProfiles.map((jobSkillProfile) => {\n const plan = actions.find((it) => it.skills.some((skill) => skill.code == jobSkillProfile.skillCode && skill.level == jobSkillProfile.level));\n if (plan) {\n jobSkillProfile.actioned = true;\n }\n });\n\n actionSkills.forEach((actionSkill) => {\n actionSkill.skills.forEach((skill) => {\n if (\n actions.filter((x) => x.skills.some((y) => y.code == skill.skillCode && y.level == skill.skillLevel)).length > 0 ||\n jobLorProfiles.filter((it) => it.lorCode == skill.skillCode && it.level == skill.skillLevel).length > 0 ||\n jobSkillProfiles.filter((it) => it.skillCode == skill.skillCode && it.level == skill.skillLevel).length > 0\n ) {\n skill.actioned = true;\n }\n });\n });\n\n if (selectedJob) {\n jobLorProfiles = jobLorProfiles ? jobLorProfiles.filter((x) => x.jobId == selectedJob.id) : [];\n jobSkillProfiles = jobSkillProfiles ? jobSkillProfiles.filter((x) => x.jobId == selectedJob.id) : [];\n }\n\n this.setState({\n categories,\n optionsActionTypes: this.props.actionTypes,\n optionsActionSkills: actionSkills,\n jobLorProfiles,\n jobSkillProfiles,\n lorProfiles,\n skillProfiles,\n });\n }\n }\n\n this.setState({\n loadingFull: this.props.loadingProfile || this.props.loadingLor,\n });\n })\n .catch((err) => {\n console.log(\"err\", err);\n this.setState({ loadingFull: false });\n });\n }\n })\n .catch((err) => {\n console.log(\"err\", err);\n this.setState({ loading: false });\n });\n }\n }\n }\n\n this.setState({\n loading: this.props.loading || this.props.companyLoading,\n });\n })\n .catch((err) => {\n console.log(\"err\", err);\n this.setState({ loading: false });\n });\n }\n\n componentWillUnmount() {\n this.setState = (state, callback) => {\n return;\n };\n }\n\n handleChange = (event) => {\n const { name, value } = event.target;\n\n const updateState = changeInput(this.state.form, name, value);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n handleChangeDate = (name, value) => {\n const updateState = changeInput(this.state.form, name, value);\n\n this.setState({\n form: updateState.form,\n isFormValid: updateState.valid,\n });\n };\n\n renderEmptyAction(x) {\n let rows = [];\n for (var i = 0; i < x; i++) {\n rows.push(\n \n \n
\n \n
\n );\n }\n return {rows} ;\n }\n\n openActionDetail = (action) => {\n this.setState({ poppedUpAction: action, showActionPlanDetail: true });\n };\n\n togleActionPlanDetailModal = () => {\n const showActionPlanDetail = this.state.showActionPlanDetail;\n this.setState({ showActionPlanDetail: !showActionPlanDetail });\n };\n\n handleHideAction = (action) => {\n this.setState({ actionPlanUpdating: true });\n this.props.onActionPlan.updateHideAction(action.id).then(() => {\n if (!this.props.actionPlanUpdating) {\n if (this.props.actionPlanUpdatingError) {\n //this.props.generateAlert(\"danger\", this.props.actionPlanUpdatingError);\n } else {\n this.setState({ showActionPlanEdit: false });\n this.togleActionPlanDetailModal();\n this.initData();\n }\n }\n this.setState({ actionPlanUpdating: this.props.actionPlanUpdating });\n });\n };\n\n modalActionPlanDetail() {\n const { poppedUpAction } = this.state;\n\n return (\n \n \n \n \n \n \n \n \n
\n {!this.props.managedPeople && (\n {\n this.handleHideAction(poppedUpAction);\n }}\n disabled={this.state.loadingFull || this.state.actionPlanUpdating}\n >\n Hide\n \n )}\n
\n
\n {(!this.props.managedPeople || (this.props.managedPeople && this.props.managedPeople.relationshipType == \"Line Manager\" ? true : false)) && (\n {\n this.togleActionPlanDetailModal();\n this.openActionPlanEditModal(poppedUpAction);\n }}\n disabled={this.state.loadingFull || this.state.actionPlanUpdating}\n >\n \n \n
\n
\n \n );\n }\n\n openActionPlanEditModal = (action) => {\n let form = this.state.form;\n\n form.id.value = action.id;\n form.id.valid = true;\n form.id.isValidFormat = true;\n\n form.status.value = action.status;\n form.status.valid = true;\n form.status.isValidFormat = true;\n\n form.actionType.value = action.actionType;\n form.actionType.valid = true;\n form.actionType.isValidFormat = true;\n\n form.name.value = action.name;\n form.name.valid = true;\n form.name.isValidFormat = true;\n\n form.targetCompletionOn.value = action.targetCompletionOn;\n form.targetCompletionOn.valid = form.targetCompletionOn.validation.required ? (action.targetCompletionOn ? true : false) : true;\n form.targetCompletionOn.isValidFormat = form.targetCompletionOn.validation.required ? (action.targetCompletionOn ? true : false) : true;\n\n form.description.value = action.description;\n form.link.value = action.link;\n form.duration.value = action.duration;\n\n this.setState({\n editedAction: action,\n showActionPlanEdit: true,\n form,\n isFormValid: form.targetCompletionOn.valid,\n selectedSkills: action.skills.map((skill) => {\n return {\n id: skill.id,\n skillName: skill.name,\n skillCode: skill.code,\n skillLevel: skill.level,\n skillType: skill.type,\n };\n }),\n });\n };\n\n togleActionPlanEditModal = () => {\n const showActionPlanEdit = this.state.showActionPlanEdit;\n this.setState({ showActionPlanEdit: !showActionPlanEdit });\n };\n\n modalEditActionPlan() {\n const { form, editedAction, optionsActionTypes, optionsActionSkills, selectedSkills, pickedOtherSkills, selectedOtherSkills, jobLorProfiles, jobSkillProfiles } = this.state;\n const { lors, categories, showHiddenSkills } = this.props;\n\n const availableLorCodes = lors\n ? lors\n .filter((it) => !it.isHidden)\n .flatMap((lor, index) => {\n return lor.lorCode;\n })\n : [];\n\n const availableSkillCodes = categories\n ? categories.flatMap((category, index) => {\n return category.subCategories.flatMap((subCategory, index) => {\n return subCategory.skills\n .filter((it) => !it.isHidden)\n .flatMap((skill, index) => {\n return skill.skillsCode;\n });\n });\n })\n : [];\n\n let optionsStatus = [\n { label: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanStatusTodo\", \"Todo\"), value: \"ToDo\" },\n { label: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanStatusInProgress\", \"In Progress\"), value: \"InProgress\" },\n { label: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanStatusDone\", \"Done\"), value: \"Done - self verified\" },\n ];\n\n if (editedAction && editedAction.interventionId && editedAction.actionType == \"Accredited Badge Issuing Action\" && editedAction.status == \"IssueBadge\" && !optionsStatus.find((it) => it.value == \"IssueBadge\")) {\n optionsStatus.push({ label: this.contentTranslator(this.props.contentTranslations, \"SfiaPlan\", \"SfiaPlanStatusIssueBadge\", \"Issue Badge\"), value: \"IssueBadge\" });\n }\n\n let editedOptionsActionTypes = optionsActionTypes ? [...optionsActionTypes] : [];\n\n if (editedAction && !editedOptionsActionTypes.find((it) => it.name == editedAction.actionType)) {\n editedOptionsActionTypes.push({\n name: editedAction.actionType,\n });\n }\n\n let spreadedActionSkills = [];\n if (optionsActionSkills) {\n spreadedActionSkills = [].concat.apply(\n [],\n optionsActionSkills\n .filter((it) => it.skills.some((skill) => !skill.selected && !skill.actioned && (showHiddenSkills || (!showHiddenSkills && availableSkillCodes.includes(skill.skillCode)))))\n .map((it, groupIndex) => {\n return it.skills\n .filter((skill) => !skill.selected && !skill.actioned)\n .map((skill) => {\n return {\n groupIndex,\n skillName: skill.skillName,\n skillCode: skill.skillCode,\n skillLabel: skill.skillLabel,\n skillLevel: skill.skillLevel,\n skillType: skill.skillType,\n };\n });\n })\n );\n }\n\n return (\n \n \n \n \n {this.state.actionPlanUpdating ? (\n \n
\n ) : (\n \n )}\n \n \n !it.id || (it.id && !it.removed)).length > 0 || selectedOtherSkills.length > 0)) || this.state.actionPlanUpdating}>\n \n \n \n \n \n );\n }\n\n handleSkillCheckedChange(skillName, skillCode, skillLevel, skillType) {\n let selectedSkills = this.state.selectedSkills;\n\n const selectedSkill = {\n skillName,\n skillCode,\n skillLevel,\n skillType,\n };\n\n if (selectedSkills.find((it) => it.skillName == skillName && it.skillCode == skillCode && it.skillLevel == skillLevel)) {\n const unSelectedSkill = selectedSkills.find((it) => it.skillName == skillName && it.skillCode == skillCode && it.skillLevel == skillLevel);\n\n if (unSelectedSkill.id) {\n if (unSelectedSkill.removed) {\n unSelectedSkill.removed = false;\n } else {\n unSelectedSkill.removed = true;\n }\n\n const index = selectedSkills.indexOf(unSelectedSkill);\n if (index !== -1) {\n selectedSkills[index].removed = unSelectedSkill.removed;\n }\n\n this.setState({ selectedSkills });\n } else {\n const index = selectedSkills.indexOf(unSelectedSkill);\n if (index !== -1) {\n selectedSkills.splice(index, 1);\n }\n\n this.setState({ selectedSkills });\n }\n } else {\n this.setState({ selectedSkills: [...selectedSkills, selectedSkill] });\n }\n }\n\n handleChangeOtherSkill = (event) => {\n this.setState({ selectedOtherSkill: event.target.value });\n };\n\n handleAddOtherSkill() {\n const selectedOtherSkill = this.state.selectedOtherSkill;\n let { optionsActionSkills, pickedOtherSkills, selectedOtherSkills } = this.state;\n\n if (selectedOtherSkill && selectedOtherSkill !== \"\") {\n let optionsActionSkill = optionsActionSkills.find((it) => it.skills.some((skill) => `${skill.skillCode}-${skill.skillLevel}` == selectedOtherSkill));\n if (optionsActionSkill) {\n let skill = optionsActionSkill.skills.find((skill) => `${skill.skillCode}-${skill.skillLevel}` == selectedOtherSkill);\n if (skill) {\n skill.selected = true;\n\n pickedOtherSkills.push({\n skillName: skill.skillName,\n skillCode: skill.skillCode,\n skillLevel: skill.skillLevel,\n skillType: skill.skillType,\n });\n\n selectedOtherSkills.push({\n skillName: skill.skillName,\n skillCode: skill.skillCode,\n skillLevel: skill.skillLevel,\n skillType: skill.skillType,\n });\n }\n\n this.setState({ optionsActionSkills, selectedOtherSkill: \"\", pickedOtherSkills, selectedOtherSkills });\n }\n }\n }\n\n handleOtherSkillCheckedChange(skillName, skillCode, skillLevel, skillType) {\n let selectedOtherSkills = this.state.selectedOtherSkills;\n\n const selectedSkill = {\n skillName,\n skillCode,\n skillLevel,\n skillType,\n };\n\n if (selectedOtherSkills.find((it) => it.skillName == skillName && it.skillCode == skillCode && it.skillLevel == skillLevel)) {\n const unSelectedSkill = selectedOtherSkills.find((it) => it.skillName == skillName && it.skillCode == skillCode && it.skillLevel == skillLevel);\n const index = selectedOtherSkills.indexOf(unSelectedSkill);\n if (index !== -1) {\n selectedOtherSkills.splice(index, 1);\n }\n\n this.setState({ selectedOtherSkills });\n } else {\n this.setState({ selectedOtherSkills: [...selectedOtherSkills, selectedSkill] });\n }\n }\n\n handleSubmitEdit() {\n const { editedAction, selectedSkills, selectedOtherSkills } = this.state;\n\n const actionRequest = {\n personEmail: this.props.managedPeople && this.props.managedPeople.personB.email,\n actionType: this.state.form.actionType.value,\n name: this.state.form.name.value,\n description: this.state.form.description.value,\n status: this.state.form.status.value,\n targetCompletionOn: this.state.form.targetCompletionOn.value,\n duration: this.state.form.duration.value,\n link: this.state.form.link.value,\n skills: [...selectedSkills.filter((it) => !it.removed), ...selectedOtherSkills.filter((it) => !it.removed)].map((skill) => {\n return {\n id: skill.id ? skill.id : null,\n name: skill.skillName,\n code: skill.skillCode,\n level: skill.skillLevel,\n type: skill.skillType,\n };\n }),\n };\n\n this.setState({ actionPlanUpdating: true });\n Promise.resolve(this.props.managedPeople ? this.props.onActionPlan.updateManagedPeopleAction(editedAction.id, actionRequest) : this.props.onActionPlan.updateAction(editedAction.id, actionRequest)).then(() => {\n if (!this.props.actionPlanUpdating) {\n if (this.props.actionPlanUpdatingError) {\n console.log(\"this.props.actionPlanUpdatingError\", this.props.actionPlanUpdatingError);\n //this.props.generateAlert(\"danger\", this.props.actionPlanUpdatingError);\n } else {\n this.setState({ showActionPlanEdit: false });\n //this.props.handleActionPlanUpdated(this.props.updatedAction);\n this.initData();\n }\n }\n this.setState({ actionPlanUpdating: this.props.actionPlanUpdating });\n });\n }\n\n handleSubmitDelete() {\n const { editedAction } = this.state;\n\n const deletedId = editedAction.id;\n\n this.setState({ actionPlanUpdating: true });\n this.props.onActionPlan.deleteAction(deletedId).then(() => {\n if (!this.props.actionPlanUpdating) {\n if (this.props.actionPlanUpdatingError) {\n console.log(\"this.props.actionPlanUpdatingError\", this.props.actionPlanUpdatingError);\n //this.props.generateAlert(\"danger\", this.props.actionPlanUpdatingError);\n } else {\n this.setState({ showActionPlanEdit: false });\n //this.props.handleActionPlanDeleted(deletedId);\n this.initData();\n }\n }\n this.setState({ actionPlanUpdating: this.props.actionPlanUpdating });\n });\n }\n\n render() {\n const { loading, actions } = this.state;\n\n return (\n \n \n \n \n \n
\n {this.modalActionPlanDetail()}\n {this.modalEditActionPlan()}\n {loading ? (\n \n \n \n \n
\n ) : actions && actions.length > 0 ? (\n \n \n {actions\n .filter((it) => !it.status.toLowerCase().includes(\"done\") && !it.hidden)\n .sort((a, b) => new Date(a.targetCompletionOn) - new Date(b.targetCompletionOn))\n .map((action, index) => {\n const row = action;\n return (\n
\n \n \n {row.targetCompletionOn\n ? this.parameterizedString(\n this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"OutstandingActionWithDueDate\", \"You have an action due by {s1}\"),\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"long\",\n day: \"numeric\",\n }).format(new Date(row.targetCompletionOn))\n )\n : this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"OutstandingActionNoDueDate\", \"You have an action with no due date\")}\n \n \n {action.name}\n \n \n this.openActionDetail(row)} />\n \n {action.name}\n \n
\n \n
\n );\n })}\n {this.renderEmptyAction(3 - actions.length)}\n
\n ) : (\n \n \n \n
\n \n
\n {this.renderEmptyAction(2)}\n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.actionPlan.loading,\n error: state.actionPlan.error,\n actions: state.actionPlan.actions,\n actionTypes: state.actionPlan.actionTypes,\n actionSkills: state.actionPlan.actionSkills,\n\n companyLoading: state.company.loading,\n\n jobMatchesLoading: state.job.jobMatchesLoading,\n jobLoading: state.job.loading,\n jobMatches: state.job.jobMatches,\n jobLorProfiles: state.job.jobLorProfiles,\n jobSkillProfiles: state.job.jobSkillProfiles,\n\n loadingProfile: state.skillProfile.loading,\n errorProfile: state.skillProfile.error,\n skillProfiles: state.skillProfile.skillProfiles,\n\n profileTypes: state.skillProfile.profileTypes,\n\n loadingLor: state.skillProfile.lorLoading,\n errorLor: state.skillProfile.lorError,\n lorProfiles: state.skillProfile.lorProfiles,\n\n categories: state.category.categories,\n categoryLoading: state.category.loading,\n categoryError: state.category.error,\n\n lors: state.lor.lors,\n\n managedPeople: state.auth.managedPeople,\n contentTranslations: state.content.contentTranslations,\n\n containerConfig: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onActionPlan: bindActionCreators(actionPlanActions, dispatch),\n onJob: bindActionCreators(jobActions, dispatch),\n onSkillProfile: bindActionCreators(skillProfileActions, dispatch),\n onCategory: bindActionCreators(categoryActions, dispatch),\n onCompany: bindActionCreators(companyActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(SkillStep);\n","import * as jobActions from \"../../store/actions/jobAction\";\nimport * as personActions from \"../../store/actions/personAction\";\nimport * as skillProfileActions from \"../../store/actions/skillProfileAction\";\nimport { dismisAlert, generateAlert } from \"../../utils/alertUtils\";\nimport { ContentWrapperLg } from \"../common/ContentWrapperLg\";\nimport CardProfile from \"./CardProfile\";\nimport SkillProgress from \"./SkillProgress\";\nimport SkillStep from \"./SkillStep\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { Col, Container, Row, Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nclass Profile extends React.Component {\n static displayName = Profile.name;\n\n constructor(props) {\n super(props);\n\n this.state = {\n selectedOptCurrentJob: null,\n selectedOptFutureJob: null,\n selectedOptEndorseCurrentJob: null,\n selectedOptEndorseFutureJob: null,\n jobMatches: [],\n currentJob: null,\n futureJob: null,\n optionCurrentJobs: [],\n optionFutureJobs: [],\n endorseCurrentJob: null,\n endorseFutureJob: null,\n loading: false,\n error: null,\n alerts: [],\n profileTypes: [],\n };\n\n this.initData = this.initData.bind(this);\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n }\n\n componentDidMount() {\n this.initData();\n }\n\n componentWillUnmount() {\n this.setState = (state, callback) => {\n return;\n };\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.jobMatches !== this.props.jobMatches) {\n this.setState({ jobMatches: this.props.jobMatches });\n }\n\n if (prevProps.profileUpdatingSuccess !== this.props.profileUpdatingSuccess || prevProps.copyProfileSuccess !== this.props.copyProfileSuccess) {\n if (this.props.profileUpdatingSuccess || this.props.copyProfileSuccess) {\n console.log(\"RePopulate Job Matches\");\n Promise.resolve(this.props.managedPeople ? this.props.onJob.getManagedPeopleJobMatches(this.props.managedPeople.personB.email) : this.props.onJob.getMyJobMatches()).then(() => {\n if (!this.props.loading && !this.props.error) {\n const jobMatches = this.props.jobMatches;\n const currentJob = jobMatches.find((it) => it.jobType === \"Current\");\n const futureJob = jobMatches.find((it) => it.jobType === \"Future\");\n\n const stateJobMatches = this.state.jobMatches;\n const stateCurrentJob = stateJobMatches && stateJobMatches.find((it) => it.jobType === \"Current\");\n\n if (stateCurrentJob) {\n const index = stateJobMatches.indexOf(stateCurrentJob);\n if (index > -1) {\n stateJobMatches.splice(index, 1);\n }\n }\n\n stateJobMatches.push(currentJob);\n\n const stateFutureJob = stateJobMatches && stateJobMatches.find((it) => it.jobType === \"Future\");\n\n if (stateFutureJob) {\n const index = stateJobMatches.indexOf(stateFutureJob);\n if (index > -1) {\n stateJobMatches.splice(index, 1);\n }\n }\n\n stateJobMatches.push(futureJob);\n\n this.setState({ jobMatches: [...stateJobMatches], currentJob, futureJob });\n }\n });\n\n Promise.resolve(this.props.managedPeople ? this.props.onPerson.getManagedPeopleLatestAccount(this.props.managedPeople.personB.email) : this.props.onPerson.getPersonLatestAccount());\n }\n }\n\n if (prevProps.endorsedProfileCopyingSuccessNotif !== this.props.endorsedProfileCopyingSuccessNotif) {\n if (this.props.endorsedProfileCopyingSuccessNotif) {\n console.log(\"RePopulate Job Matches after Copy Endorsed profile\");\n this.props.onJob.getMyJobMatches().then(() => {\n if (!this.props.loading && !this.props.error) {\n const jobMatches = this.props.jobMatches;\n const currentJob = jobMatches.find((it) => it.jobType === \"Current\");\n const futureJob = jobMatches.find((it) => it.jobType === \"Future\");\n\n const stateJobMatches = this.state.jobMatches;\n const stateCurrentJob = stateJobMatches && stateJobMatches.find((it) => it.jobType === \"Current\");\n\n if (stateCurrentJob) {\n const index = stateJobMatches.indexOf(stateCurrentJob);\n if (index > -1) {\n stateJobMatches.splice(index, 1);\n }\n }\n\n stateJobMatches.push(currentJob);\n\n const stateFutureJob = stateJobMatches && stateJobMatches.find((it) => it.jobType === \"Future\");\n\n if (stateFutureJob) {\n const index = stateJobMatches.indexOf(stateFutureJob);\n if (index > -1) {\n stateJobMatches.splice(index, 1);\n }\n }\n\n stateJobMatches.push(futureJob);\n\n this.setState({ jobMatches: [...stateJobMatches], currentJob, futureJob });\n }\n });\n\n this.props.onSkillProfile.clearCopyEndorsedNotif();\n }\n }\n }\n\n initData() {\n Promise.resolve(this.props.managedPeople ? this.props.onSkillProfile.getManagedPeopleProfileTypes(this.props.managedPeople.personB.email) : this.props.onSkillProfile.getMyProfileTypes()).then(() => {\n if (!this.props.skillProfileLoading) {\n if (this.props.skillProfileError) {\n this.setState({ loading: false });\n } else {\n this.setState({ profileTypes: this.props.profileTypes });\n\n this.props.onJob.getJobs().then(() => {\n let optionCurrentJobs = [{ label: \"Current\", value: null }];\n let optionFutureJobs = [{ label: \"Future\", value: null }];\n\n if (this.props.jobs) {\n optionCurrentJobs.push(...this.props.jobs.map((job) => ({ label: job.name, value: job.id })));\n\n optionFutureJobs.push(...this.props.jobs.map((job) => ({ label: job.name, value: job.id })));\n }\n\n this.setState({ optionCurrentJobs, optionFutureJobs });\n Promise.resolve(\n this.props.managedPeople\n ? this.props.onJob.getManagedPeopleJobMatches(this.props.managedPeople.personB.email, false)\n : this.props.onJob.getMyJobMatches(this.props.containerConfig && this.props.containerConfig.internalJobMarket ? true : false)\n ).then(() => {\n if (!this.props.loading && !this.props.error) {\n const currentJob = this.props.jobMatches.find((it) => it.jobType === \"Current\");\n const futureJob = this.props.jobMatches.find((it) => it.jobType === \"Future\");\n const jobMatches = this.props.jobMatches.filter((it) => it.jobType != \"Proposed\");\n this.setState({ jobMatches, currentJob, futureJob });\n }\n\n this.setState({ loading: this.props.loading });\n });\n });\n }\n }\n });\n }\n\n handleChangeCurrentJob = (selectedOptCurrentJob) => {\n this.setState({ selectedOptCurrentJob });\n console.log(`Opt selected:`, selectedOptCurrentJob);\n };\n\n handleChangeFutureJob = (selectedOptFutureJob) => {\n this.setState({ selectedOptFutureJob });\n console.log(`Opt selected:`, selectedOptFutureJob);\n };\n\n handleChangeEndorseCurrentJob = (value) => {\n this.setState({ selectedOptEndorseCurrentJob: value });\n console.log(`Opt selected:`, value);\n };\n\n handleChangeEndorseFutureJob = (value) => {\n this.setState({ selectedOptEndorseFutureJob: value });\n console.log(`Opt selected:`, value);\n };\n\n handleJobMatchesUpdated = () => {\n this.setState({ loading: true });\n Promise.resolve(\n this.props.managedPeople\n ? this.props.onJob.getManagedPeopleJobMatches(this.props.managedPeople.personB.email, false)\n : this.props.onJob.getMyJobMatches(this.props.containerConfig && this.props.containerConfig.internalJobMarket ? true : false)\n ).then(() => {\n if (!this.props.loading && !this.props.error) {\n const jobMatches = this.props.jobMatches;\n const currentJob = jobMatches.find((it) => it.jobType === \"Current\");\n const futureJob = jobMatches.find((it) => it.jobType === \"Future\");\n\n this.setState({ jobMatches, currentJob, futureJob });\n }\n\n this.setState({ loading: this.props.loading });\n });\n };\n\n render() {\n return (\n \n \n \n \n
\n )}\n {!this.state.loading && (\n \n \n )}\n
\n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.job.jobMatchesLoading,\n error: state.job.error,\n jobMatches: state.job.jobMatches,\n jobs: state.job.jobs,\n\n lorProfileLoading: state.skillProfile.loading,\n lorProfileError: state.skillProfile.error,\n profileTypes: state.skillProfile.profileTypes,\n\n profileUpdatingSuccess: state.skillProfile.profileUpdatingSuccess,\n endorsedProfileCopyingSuccessNotif: state.skillProfile.endorsedProfileCopyingSuccessNotif,\n copyProfileSuccess: state.skillProfile.copyProfileSuccess,\n\n managedPeople: state.auth.managedPeople,\n containerConfig: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onJob: bindActionCreators(jobActions, dispatch),\n onSkillProfile: bindActionCreators(skillProfileActions, dispatch),\n onPerson: bindActionCreators(personActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Profile);\n","import CustomSelect from \"../global/customselect\";\nimport {\n FilterTwoTone,\n FilterFilled,\n CloseCircleOutlined,\n} from \"@ant-design/icons\";\nimport { Row, Col, Button, Tag, Typography, Divider } from \"antd\";\nimport React, { useMemo, useState, useCallback } from \"react\";\nimport styled from \"styled-components\";\n\nconst { Title } = Typography;\n\nconst WrapperFilter = styled.div`\n .anticon {\n vertical-align: 0.125em;\n }\n .card-c {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n padding: 35px;\n\n border: 1px solid rgba(255, 255, 255, 0.25);\n border-radius: 20px;\n background-color: rgba(255, 255, 255, 0.45);\n box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);\n\n backdrop-filter: blur(15px);\n }\n\n .slide {\n transition: all 0.5s ease-in-out;\n transform-origin: left top;\n animation: slide 0.5s;\n @keyframes slide {\n 0% {\n transform: scaleY(0);\n }\n 100% {\n transform: scaleY(1);\n }\n }\n }\n\n .mt-20 {\n margin-top: 20px;\n }\n .mt-10 {\n margin-top: 10px;\n }\n .mr-10 {\n margin-right: 10px;\n }\n .font-small {\n font-size: 13px;\n }\n\n .ml-5-c {\n margin-left: 5px;\n }\n .mb-10 {\n margin-bottom: 5px;\n }\n\n .rotate-90 {\n transform: rotate(90deg);\n transition: transform 0.5s;\n }\n .rotate-0 {\n transform: rotate(0deg);\n transition: transform 0.5s;\n }\n\n @media (max-width: 1280px) {\n .col-sm-cm {\n max-width: 100% !important;\n flex: 0 0 100%;\n }\n }\n @media (max-width: 760px) {\n .col-sm-cm-m {\n max-width: 100% !important;\n flex: 0 0 100%;\n }\n .sm-mt-10 {\n margin-top: 10px;\n }\n }\n`;\n\n// Helper function to render tags based on the object and its color.\nconst renderTags = (obj, color, onCloseClicked, isTree = false) => {\n return obj?.value?.map((item, index) => (\n \n {/* Check if item is a string or needs to be parsed */}\n {isTree ? JSON.parse(item).value : item} \n onCloseClicked(obj, item)}\n style={{ color: \"darkred\" }}\n />\n \n ));\n};\n\nconst renderFilter = (Component, isExpand) => (\n \n \n {/* Rest of the JSX structure where you'll use your button */}\n setIsExpand((state) => !state)}\n >\n {contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestTableFilter\", \"Filter\")}\n \n \n {/* Rest of the JSX structure where you'll use your renderTags */}\n \n {/* Render tags for each filter type */}\n {renderTags(objStatus, \"magenta\", onCloseClicked)}\n \n \n \n {/* Rest of the JSX structure where you'll use your CustomSelect */}\n \n \n \n );\n};\n\nexport default MenteeRequestFilters;\n","import {\n CheckCircleTwoTone,\n CloseCircleTwoTone,\n CheckOutlined,\n CloseOutlined,\n} from \"@ant-design/icons\";\nimport { Table, Typography, Empty, Tooltip, Input, Tag, Row } from \"antd\";\nimport React, { useMemo } from \"react\";\nimport styled from \"styled-components\";\n\nconst constantData = {\n titleLevel: 5,\n pageSize: 10,\n rangeColors: [\n {\n color: \"green\",\n label: \"80 - 100\",\n isMatch: (val) => val >= 80,\n },\n {\n color: \"cyan\",\n label: \"60 - 79\",\n isMatch: (val) => val >= 60,\n },\n {\n color: \"gold\",\n label: \"40 - 59\",\n isMatch: (val) => val >= 40,\n },\n {\n color: \"orange\",\n label: \"20 - 39\",\n isMatch: (val) => val >= 20,\n },\n {\n color: \"volcano\",\n label: \"1 - 19\",\n isMatch: (val) => val >= 0,\n },\n {\n color: \"red\",\n label: \"0\",\n isMatch: (val) => val === 0,\n },\n ],\n};\n\nconst DivCenter = ({ Component, title }) => {\n return (\n \n \n
{title} \n {title} \n);\n\n// Helper function to generate a table column that centers its text content.\n// This avoids repetition for multiple columns that require similar formatting.\nconst createCenteredTextColumn = (title, dataIndex, sorterFunction) => ({\n title: createCenteredTextColumnHeader(title), // Column header\n dataIndex, // Data key\n key: dataIndex, // Key for React's list rendering\n sorter: (a, b) => sorterFunction(a[dataIndex], b[dataIndex]), // Sorting function for the column\n render: (text) => (\n {text ?? \"-\"} \n ), // Centering the text\n});\n\n// Helper function to generate a table column that centers its text content.\n// This avoids repetition for multiple columns that require similar formatting.\nconst createCenteredArrayColumn = (title, dataIndex, sorterFunction) => ({\n title: createCenteredTextColumnHeader(title), // Column header\n dataIndex, // Data key\n key: dataIndex, // Key for React's list rendering\n sorter: (a, b) => sorterFunction(a[dataIndex], b[dataIndex]), // Sorting function for the column\n render: (text) => (\n \n {text?.join(\", \") ?? \"-\"}\n \n ), // Centering the text\n});\n\n// Helper function to generate a table column that centers its text content.\n// This avoids repetition for multiple columns that require similar formatting.\nconst createCenteredArrayTagColumn = (title, dataIndex, sorterFunction) => ({\n title: createCenteredTextColumnHeader(title), // Column header\n dataIndex, // Data key\n key: dataIndex, // Key for React's list rendering\n sorter: (a, b) => sorterFunction(a[dataIndex], b[dataIndex]), // Sorting function for the column\n render: (text) => (\n \n {text?.length > 0\n ? text.map((item, index) => (\n \n {item}\n \n ))\n : \"-\"}\n \n ), // Centering the text\n});\n\nconst createCenteredButtonColumn = (\n title,\n dataIndex,\n onDeny,\n onAccept,\n sorterFunction,\n contentTranslations, contentTranslator\n) => {\n const onClicked = (record, func) => {\n if (func != null) {\n func(record);\n }\n };\n\n const render = (record, text) => {\n switch (text?.toLowerCase()) {\n case \"accepted\":\n return (\n \n \n \n );\n case \"denied\":\n return (\n \n \n \n );\n case \"requested\":\n return (\n \n \n onClicked(record, onAccept)}\n twoToneColor=\"#52c41a\"\n />\n \n \n onClicked(record, onDeny)}\n />\n \n
\n );\n default:\n return;\n }\n };\n\n return {\n title: createCenteredTextColumnHeader(title), // Column header\n dataIndex, // Data key\n key: dataIndex, // Key for React's list rendering\n //sorter: (a, b) => sorterFunction(a[dataIndex], b[dataIndex]), // Sorting function for the column\n render: (text, record) => (\n \n {text ? render(record, text) : \"-\"}\n \n ), // Centering the text\n };\n};\n\nconst createCenteredNumberColumn = (\n title,\n dataIndex,\n sorterFunction,\n isResponsive = false,\n isCenter = true\n) => {\n const getColor = (val) =>\n constantData.rangeColors.find((item) => item.isMatch(val))?.color;\n\n return {\n title: createCenteredTextColumnHeader(title), // Column header\n dataIndex, // Data key\n key: dataIndex, // Key for React's list rendering\n sorter: (a, b) => sorterFunction(a[dataIndex], b[dataIndex]), // Sorting function for the column\n render: (text) => (\n \n {text !== undefined && text !== null ? (\n {text}% \n ) : (\n \"-\"\n )}\n \n ), // Centering the text\n };\n};\n\n// Utility function to compare text values array\nconst sortByTextArray = (a, b) => {\n // Determine the minimum length between the two current arrays\n const minLength = Math.min(a.length, b.length);\n\n // Iterate over the elements up to the minimum length\n for (let i = 0; i < minLength; i++) {\n // Only proceed to string conversion and comparison if elements are different\n // This saves performance by avoiding unnecessary operations\n if (a[i] !== b[i]) {\n // Convert current elements to strings and make them lowercase\n // for case-insensitive comparison\n const elemA = a[i].toString().toLowerCase();\n const elemB = b[i].toString().toLowerCase();\n\n // Compare the elements and determine their order\n if (elemA < elemB) return -1; // b comes before a\n if (elemA > elemB) return 1; // b comes after a\n }\n }\n\n // If all compared elements are equal, then compare array lengths\n // The shorter array comes first\n return a.length - b.length;\n};\n\n// Utility function to compare text values\nconst sortByText = (a, b) => (a ?? \"\").localeCompare(b ?? \"\");\n\n// Utility function to compare number values\nconst sortByNumber = (a, b) => (a < b ? -1 : a > b ? 1 : 0);\n\n// Utility function to transform data source for tables\n// This maps over the data and transforms it to have keys and all the item properties.\nconst transformDataSource = (data) =>\n data.map((item, index) => ({\n key: `${index + 1}`,\n ...item,\n }));\n\n// Utility function to generate column definitions based on type and need status\n// This will return the appropriate columns based on whether it's a professional or generic skill and if it's a needed skill.\nconst getColumnDefinitions = (onDeny, onAccept, contentTranslations, contentTranslator) => {\n const tempColum = [\n createCenteredTextColumn(contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestTableName\", \"Name\"), \"name\", sortByText),\n createCenteredTextColumn(contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestTableEmail\", \"Email\"), \"email\", sortByText),\n createCenteredNumberColumn(contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestTableMatchPercent\", \"Match %\"), \"matchedSkillPercent\", sortByNumber),\n createCenteredArrayTagColumn(contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestTableSkills\", \"Skills\"), \"skills\", sortByTextArray),\n createCenteredArrayColumn(contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestTableProfiles\", \"Profiles\"), \"preferences\", sortByTextArray),\n createCenteredButtonColumn(\n contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestTableStatus\", \"Status\"),\n \"mentorStatus\",\n onDeny,\n onAccept,\n sortByText,\n contentTranslations, contentTranslator\n ),\n createCenteredTextColumn(contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestTableComment\", \"Comment\"), \"comment\", sortByText),\n ];\n return tempColum;\n};\n\nconst MenteeTable = ({\n data = [],\n pageSize = constantData.pageSize,\n onDeny,\n onAccept,\n contentTranslations,\n contentTranslator\n}) => {\n // useMemo will recompute the memoized value (`tableData`) only when one of the dependencies\n // in the dependency array changes. This optimization helps avoid expensive calculations on\n // every render when the relevant data hasn't changed.\n\n const tableData = useMemo(() => {\n // Early return when content is not loaded; avoids processing empty or undefined data.\n if (data.length < 1) return { dataSource: [], columns: [] };\n\n // Call `transformDataSource` to process the raw data into the desired structure/format\n // for use by the table. This might include converting dates to a specific format,\n // reshaping objects, adding additional fields, etc.\n const dataSource = transformDataSource(data);\n\n // Retrieve column definitions, which could depend on various factors such as user role,\n // specific permissions, feature flags, etc. This function is also responsible for\n // integrating interactive elements like checkboxes into the columns, setting up the\n // appropriate handlers, and defining how they interact with the component's state.\n const columns = getColumnDefinitions(onDeny, onAccept, contentTranslations, contentTranslator);\n\n // The useMemo hook returns an object containing the processed `dataSource` and `columns`,\n // ready for consumption by a table component (e.g., in a setup).\n return { dataSource, columns };\n\n // Dependency array: the memoized value will only recompute if `data`, `stateCheckbox`, or\n // are computationally expensive or if the data volume is large.\n }, [data]);\n\n // Create a copy of the listExpand array\n return (\n // Container for the entire table component\n \n {data.length > 0 ? (\n // Conditionally render the table or a 'No Data' message based on the length of the 'data' array\n // If 'data' has elements, render the table and associated components\n \n {/* Wrapper for styling and layout of the table */}\n
\n {/* Ant Design Table component displaying data */}\n \n {constantData.rangeColors.map((item, index) => {\n return (\n \n {contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestRange\", \"Range\")}: \n \n {item.label}\n \n
\n );\n })}\n
\n )}\n \n
\n );\n};\n\nexport default MenteeTable;\n","import { CloseCircleTwoTone, CheckCircleTwoTone } from \"@ant-design/icons\";\nimport { Button, Row, Input, Collapse, Descriptions } from \"antd\";\nimport React, { useCallback, useState, useEffect, useMemo } from \"react\";\nimport styled from \"styled-components\";\nimport { useImmer } from \"use-immer\";\n\nconst { Panel } = Collapse;\n\nconst ContainerConfirm = styled.div`\n padding: 5px;\n width: 400px;\n\n .btn-danger {\n background-color: red;\n color: white;\n }\n\n .btn-success {\n background-color: #52c41a;\n color: white;\n }\n`;\n\nconst { TextArea } = Input;\n\n// Wrapping the component with React.memo to prevent unnecessary re-renders.\n// This is useful when the parent component renders often but props for AcceptDenyModal don't change.\nconst AcceptDenyModal = ({ open, onCancel, onOk, data, contentTranslations, contentTranslator }) => {\n const [comment, setComment] = useState(\"\");\n const [isOpen, setIsOpen] = useState(false);\n\n const [state, setState] = useImmer({\n contentTranslations: contentTranslations\n });\n\n const handleCancel = (event) => {\n onCancel?.(event); // Optional chaining ensures that onAccept is called only if it's provided.\n // Removed setIsOpen as we are now directly using the 'open' prop for controlling visibility.\n setIsOpen(false);\n };\n\n const handleOk = (event) => {\n onOk?.(event, comment); // Similar to handleOk, using optional chaining for onOk.\n // Removed setIsOpen as we are now directly using the 'open' prop for controlling visibility.\n setIsOpen(false);\n };\n\n // Handler for when the comment input field value changes\n const onCommentChanged = useCallback((event) => {\n // Update the comment in the modal's data\n setComment(event.target.value);\n }); // No dependencies since it doesn't rely on external state or props\n\n // Compute the state for Accept/Deny display based on the modal's data\n const modalValid = useMemo(() => {\n // Default state when data is undefined\n if (data === undefined) {\n return { title: \"\", text: \"\", isCommentRequired: false };\n }\n\n // Determine the title and text based on whether it's an Accept or Deny action\n const title = data.isAccept ? contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestConfirmationAcceptTitle\", \"Accept request\") : contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestConfirmationDenyTitle\", \"Deny request\");\n const okButton = data.isAccept ? contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestConfirmationButtonAccept\", \"Accept\") : contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestConfirmationButtonDeny\", \"Deny\");\n const cancelButton = contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestConfirmationButtonCancel\", \"Cancel\");\n const text = data.isAccept \n ? contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestConfirmationAcceptMessage\", \"Before accepting this request you must provide some comments for the requester. This will be included in the confirmation email.\") \n : contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestConfirmationDenyMessage\", \"Before denying this request you must provide some comments for the requester. This will be included in the denial email. Please fully explain the reasons.\");\n\n // Determine if the comment is required (it is required if it's empty)\n const isCommentRequired = comment.trim() === \"\";\n\n return { title, okButton, cancelButton, text, isCommentRequired };\n }, [data, comment]); // Depend on data as it’s the only piece of state used\n\n // Determine the button class name based on the validation state and modal type (accept/deny)\n const okButtonClassName =\n modalValid.isCommentRequired === true ||\n (data?.isAccept ? \"btn-success\" : \"btn-danger\");\n\n useEffect(() => {\n setIsOpen(open);\n if (open === true) {\n setComment(\"\");\n }\n }, [open]);\n\n // Return null to render nothing if the modal is not open.\n // This is an early return pattern, a common optimization in React for conditional rendering\n if (!isOpen) return null;\n\n return (\n // ContainerConfirm is a wrapper component, likely styled, for the modal content.\n \n {/* Row is a layout component, probably from a UI library, for arranging items in a row.\n The 'gutter' prop likely adds spacing between the columns in the row. */}\n \n \n {data?.isAccept ? (\n
\n ) : (\n
\n )}\n
\n
\n {/* Another Row for action buttons, with increased gutter spacing and\n additional styling for centering and top margin. */}\n \n \n {modalValid.text} {/* Display additional text/instructions */}\n
\n
\n {/* Another Row for action buttons, with increased gutter spacing and\n additional styling for centering and top margin. */}\n \n \n \n \n \n {data?.data.name ?? \"-\"}\n \n \n {data?.data.email ?? \"-\"}\n \n \n {data?.data.matchedSkillPercent\n ? `${data.data.matchedSkillPercent} %`\n : \"-\"}\n \n \n {data?.data.skills.join(\", \") ?? \"-\"}\n \n \n {data?.data.preferences.join(\", \") ?? \"-\"}\n \n \n \n \n
\n {/* Another Row for action buttons, with increased gutter spacing and\n additional styling for centering and top margin. */}\n \n {/* Text area for the user to input a comment. Shows an error status if a comment is required but not provided. */}\n
\n \n {/* Button component for the 'OK' action, styled as a primary and success button, with a right margin.\n 'handleOk' is a function that will be called when this button is clicked. */}\n \n {modalValid.okButton}\n \n {/* Another Button for the 'Cancel' action, styled as a primary and danger button.\n 'handleCancel' is a function that will be called when this button is clicked. */}\n \n {modalValid.cancelButton}\n \n \n \n );\n};\n\nexport default AcceptDenyModal;\n","import PersonService from \"../../../../../common/api/service/PersonService\";\nimport MenteeRequestFilters from \"../../filters/menteerequest\";\nimport MenteeTable from \"../../table/mentee\";\nimport AcceptDenyModal from \"../acceptdeny\";\nimport ConfirmModal from \"../confirm\";\nimport { CaretRightOutlined } from \"@ant-design/icons\";\nimport { Modal, Spin, notification, Collapse, Alert, Col, Row } from \"antd\";\nimport { groupBy } from \"lodash\";\nimport React, { useEffect, useCallback, useMemo, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { useImmer } from \"use-immer\";\n\nconst { Panel } = Collapse;\n\nconst ContainerCenter = styled.div`\n text-align: -webkit-center;\n`;\n\nconst MenteeRequestModal = ({ showDialog, contentTranslations, contentTranslator, parameterizedString}) => {\n const [selectedStatus, setSelectedStatus] = useState([]);\n\n const [state, setState] = useImmer({\n showDialog: false,\n dataValue: [],\n rawData: [],\n isShowConfirm: false,\n isShowComment: false,\n isLoading: false,\n isEdit: false,\n commentData: undefined,\n contentTranslations: contentTranslations\n });\n\n const setDefaultData = () => {\n setState((draft) => {\n draft.showDialog = true;\n draft.dataValue = [];\n draft.isShowComment = false;\n draft.isEdit = false;\n draft.isLoading = true;\n draft.rawData = [];\n draft.commentData = undefined;\n });\n setSelectedStatus([]);\n };\n\n const toFixedIfNecessary = (value, dp) => {\n return +parseFloat(value).toFixed(dp);\n };\n\n const processDataAsync = async (isSetStatus = false) => {\n try {\n const dataMenteeRequests = await PersonService.getMenteeRequests();\n\n dataMenteeRequests.map((item) => {\n item.matchedSkillPercent = item.matchedSkillPercent ? toFixedIfNecessary(item.matchedSkillPercent * 100, 2) : item.matchedSkillPercent\n })\n\n setState((draft) => {\n draft.rawData =\n dataMenteeRequests?.map((item) => {\n return {\n ...item,\n name: `${item.firstName} ${item.lastName}`,\n };\n }) ?? [];\n });\n\n //dataMenteeRequests.length\n if (isSetStatus && dataMenteeRequests.length > 0) {\n setSelectedStatus([\"Requested\"]);\n }\n } catch (error) {\n // Log the error if fetching fails\n console.error(\"Failed to fetch action plan data:\", error);\n // Optionally, you can set an error state to display an error message to users.\n }\n };\n\n const onToggleDialogModal = () => {\n const showDialog = state.showDialog;\n setState((draft) => {\n draft.showDialog = !showDialog;\n draft.isLoading = false;\n });\n };\n\n const onCommentOkClicked = useCallback(async (e, comment) => {\n setState((draft) => {\n draft.isShowComment = false;\n draft.isLoading = true;\n });\n try {\n const dataUpdate = {\n personId: state.commentData.data.personId,\n accept: state.commentData.isAccept,\n comment: comment,\n };\n await PersonService.updateMenteeRequests(dataUpdate);\n await processDataAsync();\n notification[state.commentData.isAccept ? \"success\" : \"error\"]({\n message: state.commentData.isAccept \n ? parameterizedString(contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestAcceptedNotification\", \"{s1}'s request was accepted.\"), state.commentData.data.name)\n : parameterizedString(contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestDeniedNotification\", \"{s1}'s request was denied.\"), state.commentData.data.name),\n description: state.commentData.isAccept ? contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestNotificationDescription\", \"Please log out and log in again to load new relationship data.\") : null,\n });\n } catch (error) {\n // Optionally, you can set an error state to display an error message to users.\n notification[\"error\"]({\n message: \"error\",\n description: error?.errData?.Message ?? error?.errStatus,\n });\n } finally {\n setState((draft) => {\n draft.commentData = undefined;\n draft.isLoading = false;\n });\n }\n });\n\n const onCommentCancelClicked = useCallback((e) => {\n setState((draft) => {\n draft.isShowComment = false;\n draft.isShowConfirm = false;\n draft.commentData = undefined;\n });\n });\n\n const openShowConfirm = (record, isAccept) => {\n // Open the modal and set its data\n setState((draft) => {\n draft.isShowComment = false;\n draft.isShowConfirm = true;\n draft.commentData = { data: record, isAccept: isAccept };\n });\n };\n\n // Handler for when Accept or Deny button is clicked\n const onConfirmOkClicked = useCallback((record) => {\n // Open the modal and set its data\n setState((draft) => {\n draft.isShowComment = true;\n draft.isShowConfirm = false;\n });\n }); // No dependencies since it doesn't rely on external state or props\n\n // Handler for when Accept or Deny button is clicked\n const onConfirmCancelClicked = useCallback(\n (record) => {\n // Open the modal and set its data\n setState((draft) => {\n draft.isShowComment = false;\n draft.isShowConfirm = false;\n });\n }\n //openShowConfirm(record, true)\n ); // No dependencies since it doesn't rely on external state or props\n\n // Handler for when Accept or Deny button is clicked\n const onAcceptClicked = useCallback((record) =>\n openShowConfirm(record, true)\n ); // No dependencies since it doesn't rely on external state or props\n\n // Handler for when Accept or Deny button is clicked\n const onDenyClicked = useCallback((record) => openShowConfirm(record, false)); // No dependencies since it doesn't rely on external state or props\n\n // Filter by Status\n const optionsStatus = useMemo(() => {\n if (state.rawData?.length === 0) return [];\n\n const dataGroup = groupBy(state.rawData, \"mentorStatus\");\n\n return Object.keys(dataGroup)\n .map((item) => ({\n label: item,\n value: item,\n }))\n .sort((a, b) => a.label.localeCompare(b.label));\n }, [state.rawData]);\n\n const tableData = useMemo(() => {\n let resultData = [];\n if (state.rawData?.length === 0) return resultData;\n\n return state.rawData.filter((item) => {\n // If selectedStatus is populated and the condition is not met, filter out\n if (\n selectedStatus.length > 0 &&\n !selectedStatus.includes(item.mentorStatus)\n ) {\n return false;\n }\n // If all conditions are met or not applicable, include the item\n return true;\n });\n }, [state.rawData, selectedStatus]);\n\n useEffect(() => {\n if (showDialog) {\n setDefaultData();\n\n // This variable helps us ensure that we don't call `setIsContentLoaded` if the component has unmounted before our asynchronous operation completes.\n let isMounted = true;\n\n // Fetch and process all data\n processDataAsync(true).then(() => {\n if (isMounted) {\n // Only set the loading state to false if the component is still mounted\n setState((draft) => {\n draft.isLoading = false;\n });\n }\n });\n\n // The cleanup function for the effect\n return () => {\n // If the component unmounts, we set isMounted to false to prevent any state updates after unmounting.\n isMounted = false;\n };\n }\n }, [showDialog]);\n\n if (state.showDialog === false) return null;\n\n // ... rest of the logic and JSX\n return (\n {\n setDefaultData();\n onToggleDialogModal();\n }\n : null\n }\n width={state.isShowComment || state.isShowConfirm ? \"fit-content\" : \"60%\"}\n style={{ borderRadius: \"20px\" }}\n footer={null}\n >\n \n \n \n Accept this mentor request !\") : contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestTableDenyPopupMessage\", \"You are about to Deny this mentor request !\"),\n }}\n > \n \n }\n msg={contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestTableAcceptDenyPopupNotes\", \"This will trigger an email to the requester with your details.\")}\n questionText={contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeRequestTableAcceptDenyPopupProceedText\", \"Do you want to proceed ?\")}\n >\n \n {state.isShowComment == false && state.isShowConfirm == false && (\n \n {state.rawData.length > 0 && (\n <>\n
\n
\n
\n
\n \n )}\n
\n {tableData.length > 0 && (\n
(\n \n Match : Your match to their skill gaps
Skills : Skills you can help
Profiles : Their Preferences that match your profile
Status : Status of mentor. Denied, Requested, Accepted
\"),\n }}\n >\n {\n setDefaultData();\n onToggleDialogModal();\n }\n : null\n }\n width={\n state.isShowConfirm || state.isShowNotMentor ? \"fit-content\" : \"60%\"\n }\n style={{ borderRadius: \"20px\" }}\n footer={null}\n >\n \n {state.isShowConfirm == false &&\n state.isShowNotMentor == false &&\n state.isLoading == false &&\n state.rawData.length > 0 && (\n \n \n {state.isUpdate ? contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMentorProfileDialogButtonUpdate\", \"Update\") : contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMentorProfileDialogButtonSave\", \"Save\")}\n \n \n
\n )}\n \n \n {\n setDefaultData();\n onToggleDialogModal();\n }}\n isCancel={false}\n okText={contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeProfileNotMentorConfirmButtonOk\", \"Ok, Understand\")}\n titleText={contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeProfileNotMentorDialogTitle\", \"You cannot set up mentor profile for now.\")}\n msg={contentTranslator(contentTranslations, \"SfiaProfile\", \"SfiaProfileMenteeProfileNotMentorDialogMessage\", \"You can be a mentor as soon as you have more than 4 Business skills.\")}\n >\n \n {state.isShowConfirm == false && state.isShowNotMentor == false && (\n \n \n \n \n \n \n \n {\n this.handleFirstConfirmRequestApproval();\n }}\n disabled={!(this.state.requestApprovalComment && this.state.requestApprovalComment != \"\")}\n >\n \n \n \n \n );\n };\n\n handleFirstConfirmRequestApproval = () => {\n this.setState({ showRequestApprovalFirstDialog: false, showRequestApprovalSecondDialog: true });\n };\n\n closeRequestApprovalSecondModal = () => {\n this.setState({ showRequestApprovalFirstDialog: true, showRequestApprovalSecondDialog: false });\n };\n\n renderRequestApprovalSecondConfirmation = () => {\n return (\n \n \n \n \n \n {\n this.handleConfirmRequestApproval();\n }}\n disabled={this.state.requestApprovalUpdating}\n >\n \n \n \n \n );\n };\n\n handleConfirmRequestApproval = () => {\n this.setState({ requestApprovalUpdating: true });\n\n const account = this.state.account;\n\n this.props.onPerson.personAccountRequestApproval(account.id, this.state.requestApprovalComment).then(() => {\n if (!this.props.personUpdating) {\n if (this.props.personError) {\n this.generateAlert(\"danger\", this.props.personError.errData.Message);\n } else if (this.props.account) {\n this.generateAlert(\"success\", \"Approval sent\");\n this.setState({ account: this.props.account, showRequestApprovalSecondDialog: false, requestApprovalComment: null });\n }\n }\n\n this.setState({ requestApprovalUpdating: this.props.personUpdating });\n });\n };\n\n handleShowPostponedReason = () => {\n this.setState({ showPostponedReasonDialog: true });\n\n const account = this.state.account;\n if (account && account.isApprovalPostponedShown == false) {\n this.props.onPerson.personAccountShowPostponeComment(account.id);\n }\n\n account.isApprovalPostponedShown = true;\n };\n\n togleShowPostponedReason = () => {\n const showPostponedReasonDialog = this.state.showPostponedReasonDialog;\n this.setState({ showPostponedReasonDialog: !showPostponedReasonDialog });\n };\n\n renderPostponedReasonDialog = () => {\n const { selectedprofileType, account } = this.state;\n const { currAssessment, person } = this.props;\n let showApprovalPostponed = false;\n\n if (!this.props.managedPeople && selectedprofileType && selectedprofileType.value == \"Self Assessed\") {\n if (account && currAssessment && currAssessment.enableApprovalRequest && (account.isApprovalRequested || account.isApprovalPostponed)) {\n showApprovalPostponed = account.isApprovalPostponed ? account.isApprovalPostponed : false;\n }\n }\n\n return (\n \n \n \n \n \n \n \n \n \n );\n };\n\n renderLoadingPanel() {\n if (this.state.showLoadingPanel) {\n return (\n \n {this.state.loadingPanelHeader} \n \n \n \n );\n } else {\n return \"\";\n }\n }\n\n scroll(ref) {\n ref.current.scrollIntoView({ behavior: \"smooth\" });\n }\n\n handleShowMakeLatestConfirmation = () => {\n this.setState({ showMakeLatestDialog: true });\n };\n\n togleMakeLatestProfileModal = () => {\n const showMakeLatestDialog = this.state.showMakeLatestDialog;\n\n this.setState({ showMakeLatestDialog: !showMakeLatestDialog });\n };\n\n handleConfirmMakeLatestProfile = () => {\n const { selectedProfileVersion, selectedprofileType } = this.state;\n this.setState({ showMakeLatestDialog: false, showLoadingPanel: true, loadingPanelHeader: \"Make Profile Latest\", loadingPanelBody: \"Please wait ...\" });\n\n this.props.onSkillProfile.copyProfile(selectedProfileVersion.version, selectedprofileType.value).then(() => {\n if (!this.props.copyProfile) {\n if (this.props.copyProfileError) {\n this.generateAlert(\"danger\", this.props.copyProfileError.errData.Message);\n } else {\n this.generateAlert(\"success\", \"Profile has been successfully made as latest\");\n this.initData();\n }\n\n this.setState({ showLoadingPanel: false });\n }\n });\n };\n\n renderMakeLatestProfileConfirmation = () => {\n return (\n \n Make Latest Profile Confirmation \n \n \n \n \n {\n this.handleConfirmMakeLatestProfile();\n }}\n >\n \n \n \n \n );\n };\n\n handleChangeEndorsementStatus = (selectedStatus) => {\n const selectedEndorsementStatus = this.state.selectedEndorsementStatus;\n\n if (\n selectedStatus.value != selectedEndorsementStatus.value &&\n ((selectedStatus.value != \"\" && selectedEndorsementStatus.value == \"\") ||\n (selectedStatus.value == \"For Review\" && selectedEndorsementStatus.value == \"\") ||\n (selectedStatus.value == \"Reviewed\" && selectedEndorsementStatus.value != \"Approved\") ||\n (selectedStatus.value == \"Approved\" && selectedEndorsementStatus.value != \"Approved\"))\n ) {\n if (selectedStatus.value == \"Approved\") {\n this.setState({ showApproveEndorsementDialog: true });\n } else {\n this.setState({ updateEndorsedStatus: true, showLoadingPanel: true, loadingPanelHeader: \"Update Endorsed Status\", loadingPanelBody: \"Please wait ...\" });\n\n this.props.onSkillProfile.updateEndorsedStatus(this.props.managedPeople.personB.email, selectedStatus.value).then(() => {\n if (!this.props.updateEndorsedStatus) {\n if (this.props.updateEndorsedStatusError) {\n this.generateAlert(\"danger\", this.props.updateEndorsedStatusError.errData.Message);\n } else {\n this.props.onAdminPerson.updatePersonEndorsement(this.props.updatedPersonEndorsement);\n this.props.onPerson.updateManagePeopleEndorsedStatus(selectedStatus.value);\n this.generateAlert(\"success\", \"Update Endorsed status successful\");\n }\n }\n\n this.setState({ showLoadingPanel: this.props.updateEndorsedStatus, updateEndorsedStatus: this.props.updateEndorsedStatus });\n this.setState({ selectedEndorsementStatus: selectedStatus });\n });\n }\n }\n };\n\n togleApproveEndorsementModal = () => {\n const showApproveEndorsementDialog = this.state.showApproveEndorsementDialog;\n\n this.setState({ showApproveEndorsementDialog: !showApproveEndorsementDialog });\n };\n\n handleConfirmApproveEndorsement = () => {\n this.setState({ showApproveEndorsementDialog: false, updateEndorsedStatus: true, showLoadingPanel: true, loadingPanelHeader: \"Approved Endorsement\", loadingPanelBody: \"Please wait ...\" });\n\n this.props.onSkillProfile.updateEndorsedStatus(this.props.managedPeople.personB.email, \"Approved\").then(() => {\n if (!this.props.updateEndorsedStatus) {\n if (this.props.updateEndorsedStatusError) {\n this.generateAlert(\"danger\", this.props.updateEndorsedStatusError.errData.Message);\n this.setState({ showApproveEndorsementDialog: true });\n } else {\n this.props.onAdminPerson.updatePersonEndorsement(this.props.updatedPersonEndorsement);\n this.props.onPerson.updateManagePeopleEndorsedStatus(\"Approved\");\n this.props.endorsedProfileApproved();\n this.generateAlert(\"success\", \"Approved Endorsement successful\");\n }\n }\n\n this.setState({ showLoadingPanel: this.props.updateEndorsedStatus, updateEndorsedStatus: this.props.updateEndorsedStatus });\n this.setState({ selectedEndorsementStatus: { value: \"Approved\", label: \"Approved\" } });\n });\n };\n\n handleOpenMenteeRequest = () => {\n this.setState({ showMenteeRequestDialog: new Date() });\n };\n\n handleOpenMentorProfile = () => {\n this.setState({ showMentorProfileDialog: new Date() });\n };\n\n handleCloseMentorProfile = (val) => {\n if (!this.props.managedPeople && this.state.selectedprofileType && this.state.selectedprofileType.value == \"Self Assessed\") {\n if (\n this.state.account &&\n this.props.currAssessment &&\n this.props.currAssessment.enableFindMentor &&\n val && //isMentor\n this.state.account.canBeMentor\n ) {\n this.setState({\n //showBeMentor: true,\n account: {\n ...this.state.account,\n isMentor: val,\n },\n });\n }\n }\n // this.setState({\n // account: { ...this.state.account, isMentor: val },\n // });\n };\n\n renderMenteeRequest = () => {\n return \n Approved Endorsement Confirmation \n \n \n \n \n {\n this.handleConfirmApproveEndorsement();\n }}\n >\n OK\n \n \n Cancel\n \n \n \n );\n };\n\n handleTogleEditBadgeRequest = () => {\n const showEditCertify = this.state.showEditCertify;\n this.setState({ showEditCertify: !showEditCertify });\n };\n\n badgeRequestUpdated = (badgeRequest) => {\n this.setState({ badgeRequest });\n\n const maxNumberOfBadgeRequestSkill = this.props.maxNumberOfBadgeRequestSkill;\n let requestCertificationEntries = badgeRequest && badgeRequest.requestCertificationEntries ? [...badgeRequest.requestCertificationEntries] : [];\n let numberBadgeRequested = 0;\n requestCertificationEntries.forEach((requestCertificationEntry) => {\n let stringVal = requestCertificationEntry.storedStringVal ? requestCertificationEntry.storedStringVal : requestCertificationEntry.editedStringVal ? requestCertificationEntry.editedStringVal : requestCertificationEntry.stringVal ? requestCertificationEntry.stringVal : \"N\";\n\n if (stringVal != \"N\") {\n numberBadgeRequested += 1;\n }\n });\n\n if (numberBadgeRequested >= maxNumberOfBadgeRequestSkill) {\n this.setState({ showMaxBadgeExceed: true });\n }\n };\n\n togleMaxBadgeExceedConfirmation = () => {\n const showMaxBadgeExceed = this.state.showMaxBadgeExceed;\n this.setState({ showMaxBadgeExceed: !showMaxBadgeExceed });\n };\n\n renderMaxBadgeExceedConfirmation = () => {\n return (\n \n Maximum badge request reached \n \n \n \n \n {\n this.handleSaveBadgeRequest();\n }}\n >\n Save\n \n {\n this.handleApproveBadgeRequest();\n }}\n >\n Save and Approve\n \n \n Cancel\n \n \n \n );\n };\n\n handleSaveBadgeRequest = () => {\n const badgeRequest = this.state.badgeRequest;\n this.setState({ showMaxBadgeExceed: false, updateBadgeRequest: true });\n this.setState({ showLoadingPanel: true, loadingPanelHeader: \"Save badge request update\", loadingPanelBody: \"Please wait ...\" });\n\n badgeRequest.status = \"Assessed\";\n\n this.props.onAdminBadgeRequest.updateBadgeRequestCertificationEntries(badgeRequest.id, badgeRequest).then(() => {\n if (!this.props.badgeRequestUpdating) {\n if (this.props.badgeRequestError) {\n this.setState({ showMaxBadgeExceed: true });\n this.generateAlert(\"danger\", this.props.badgeRequestError.errData.Message);\n } else {\n badgeRequest.requestCertificationEntries = this.props.updatedBadgeRequest.requestCertificationEntries ? [...this.props.updatedBadgeRequest.requestCertificationEntries] : [];\n this.setState({ showEditCertify: false, badgeRequest });\n this.props.onConfig.getContainerConfig().then(() => {});\n this.generateAlert(\"success\", \"Badge request certification entries updated\");\n }\n }\n\n this.setState({ updateBadgeRequest: this.props.badgeRequestUpdating, showLoadingPanel: this.props.badgeRequestUpdating });\n });\n };\n\n handleApproveBadgeRequest = () => {\n this.setState({ showApproveBadgeConfirmation: true });\n };\n\n togleSubmitBadgesConfirmation = () => {\n const showSubmitBadgeConfirmation = this.state.showSubmitBadgeConfirmation;\n this.setState({ showSubmitBadgeConfirmation: !showSubmitBadgeConfirmation });\n };\n\n renderSubmitBadgesConfirmation = () => {\n return (\n \n Submit badges confirmation \n \n \n \n \n {\n this.handleSubmitBadgeRequest();\n }}\n >\n Confirm\n \n \n Cancel\n \n \n \n );\n };\n\n handleSubmitBadgeRequest = () => {\n const badgeRequest = this.state.badgeRequest;\n this.setState({ showSubmitBadgeConfirmation: false, updateBadgeRequest: true });\n this.setState({ showLoadingPanel: true, loadingPanelHeader: \"Submit for badges\", loadingPanelBody: \"Please wait ...\" });\n\n this.props.onAdminBadgeRequest.submitBadgeRequestCertification(badgeRequest.id).then(() => {\n if (!this.props.badgeRequestUpdating) {\n if (this.props.badgeRequestError) {\n this.setState({ showSubmitBadgeConfirmation: true });\n this.generateAlert(\"danger\", this.props.badgeRequestError.errData.Message);\n } else {\n badgeRequest.assessedDate = this.props.updatedBadgeRequest.assessedDate;\n badgeRequest.certificationSubmitted = this.props.updatedBadgeRequest.certificationSubmitted;\n\n this.setState({ badgeRequest });\n this.generateAlert(\"success\", \"Certification badges submitted.\");\n }\n }\n\n this.setState({ updateBadgeRequest: this.props.badgeRequestUpdating, showLoadingPanel: this.props.badgeRequestUpdating });\n });\n };\n\n closeWindow = () => {\n window.close();\n };\n\n togleApproveBadgesConfirmation = () => {\n const showApproveBadgeConfirmation = this.state.showApproveBadgeConfirmation;\n this.setState({ showApproveBadgeConfirmation: !showApproveBadgeConfirmation });\n };\n\n renderApproveBadgesConfirmation = () => {\n return (\n \n Approve badges confirmation \n \n \n \n \n {\n this.handleConfirmApproveBadgeRequest();\n }}\n >\n Approve\n \n \n Cancel\n \n \n \n );\n };\n\n handleConfirmApproveBadgeRequest = () => {\n const badgeRequest = this.state.badgeRequest;\n this.setState({ showMaxBadgeExceed: false, updateBadgeRequest: true, showApproveBadgeConfirmation: false });\n this.setState({ showLoadingPanel: true, loadingPanelHeader: \"Approve badge request update\", loadingPanelBody: \"Please wait ...\" });\n\n badgeRequest.status = \"Approved\";\n\n this.props.onAdminBadgeRequest.updateBadgeRequestCertificationEntries(badgeRequest.id, badgeRequest).then(() => {\n if (!this.props.badgeRequestUpdating) {\n if (this.props.badgeRequestError) {\n this.setState({ showMaxBadgeExceed: true });\n this.generateAlert(\"danger\", this.props.badgeRequestError.errData.Message);\n } else {\n badgeRequest.requestCertificationEntries = this.props.updatedBadgeRequest.requestCertificationEntries ? [...this.props.updatedBadgeRequest.requestCertificationEntries] : [];\n this.setState({ showEditCertify: false, badgeRequest });\n this.generateAlert(\"success\", \"Badge request certification entries approved\");\n }\n }\n\n this.setState({ updateBadgeRequest: this.props.badgeRequestUpdating, showLoadingPanel: this.props.badgeRequestUpdating });\n });\n };\n\n handleViewProposedAction = () => {\n let { lorProfiles, skillProfiles, selectedJobMatchType, selectedProfileVersion, profileVersions } = this.state;\n\n if (selectedJobMatchType && selectedJobMatchType.value != \"None\") {\n this.handleChangeSkill({\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", \"MatchNone\", \"None\"),\n value: \"None\",\n });\n }\n\n let latestVersion = null;\n\n if (profileVersions && profileVersions.length > 0) {\n latestVersion = profileVersions[0];\n }\n\n if (latestVersion && selectedProfileVersion && latestVersion.version != selectedProfileVersion.version) {\n this.handleChangeVersion(latestVersion);\n }\n\n this.setState({ showProposedAction: true, showDetail: false, showEdit: false, skillProfilesEdit: [], editCount: 0, createNewVersion: false, lorProfiles: lorProfiles.filter((it) => it.id), skillProfiles: skillProfiles.filter((it) => it.id) });\n };\n\n handleCancelViewProposedAction = () => {\n this.setState({ showProposedAction: false });\n };\n\n handleActionProposalCommentChange = (event) => {\n const { value } = event.target;\n\n this.setState({\n acceptRejectActionProposalComment: value,\n });\n };\n\n handleAcceptActionProposal = () => {\n this.setState({ showAcceptActionProposalConfirmation: true, acceptRejectActionProposalComment: \"\" });\n };\n\n togleAcceptActionProposal = () => {\n const showAcceptActionProposalConfirmation = this.state.showAcceptActionProposalConfirmation;\n this.setState({ showAcceptActionProposalConfirmation: !showAcceptActionProposalConfirmation });\n };\n\n renderAcceptActionProposalConfirmation = () => {\n return (\n \n Accept proposal confirmation \n \n \n \n \n {\n this.handleConfirmAcceptActionProposal();\n }}\n disabled={this.state.processActionProposal || !(this.state.acceptRejectActionProposalComment && this.state.acceptRejectActionProposalComment != \"\")}\n >\n Accept\n \n \n Cancel\n \n \n \n );\n };\n\n handleConfirmAcceptActionProposal = () => {\n const acceptRejectActionProposalComment = this.state.acceptRejectActionProposalComment;\n const timezoneOffset = (new Date().getTimezoneOffset() * -1) / 60;\n\n this.setState({ showAcceptActionProposalConfirmation: false, processActionProposal: true });\n this.setState({ showLoadingPanel: true, loadingPanelHeader: \"Accept update profile and evidence from action proposal\", loadingPanelBody: \"Please wait ...\" });\n this.props.onActionPlan.acceptUpdateProfileActionProposal(this.props.account.updateProfileEvidenceProposedActionId, acceptRejectActionProposalComment, timezoneOffset).then(() => {\n if (!this.props.actionPlanUpdating) {\n if (this.props.actionPlanUpdatingError) {\n this.generateAlert(\"danger\", this.props.actionPlanUpdatingError.errData.Message);\n this.setState({ showAcceptActionProposalConfirmation: true });\n } else {\n this.generateAlert(\"success\", \"Update profile and evidence from action proposal accepted.\");\n this.setState({ showProposedAction: false });\n this.initData();\n }\n }\n this.setState({ processActionProposal: this.props.actionPlanUpdating, showLoadingPanel: this.props.actionPlanUpdating });\n });\n };\n\n handleRejectActionProposal = () => {\n this.setState({ showRejectActionProposalConfirmation: true, acceptRejectActionProposalComment: \"\" });\n };\n\n togleRejectActionProposal = () => {\n const showRejectActionProposalConfirmation = this.state.showRejectActionProposalConfirmation;\n this.setState({ showRejectActionProposalConfirmation: !showRejectActionProposalConfirmation });\n };\n\n renderRejectActionProposalConfirmation = () => {\n return (\n \n Reject proposal confirmation \n \n \n \n \n {\n this.handleConfirmRejectActionProposal();\n }}\n disabled={this.state.processActionProposal || !(this.state.acceptRejectActionProposalComment && this.state.acceptRejectActionProposalComment != \"\")}\n >\n Reject\n \n \n Cancel\n \n \n \n );\n };\n\n handleConfirmRejectActionProposal = () => {\n const acceptRejectActionProposalComment = this.state.acceptRejectActionProposalComment;\n const timezoneOffset = (new Date().getTimezoneOffset() * -1) / 60;\n\n this.setState({ showRejectActionProposalConfirmation: false, processActionProposal: true });\n this.setState({ showLoadingPanel: true, loadingPanelHeader: \"Reject update profile and evidence from action proposal\", loadingPanelBody: \"Please wait ...\" });\n this.props.onActionPlan.rejectUpdateProfileActionProposal(this.props.account.updateProfileEvidenceProposedActionId, acceptRejectActionProposalComment, timezoneOffset).then(() => {\n if (!this.props.actionPlanUpdating) {\n if (this.props.actionPlanUpdatingError) {\n this.generateAlert(\"danger\", this.props.actionPlanUpdatingError.errData.Message);\n this.setState({ showRejectActionProposalConfirmation: true });\n } else {\n this.generateAlert(\"success\", \"Update profile and evidence from action proposal rejected.\");\n this.setState({ showProposedAction: false });\n this.initData();\n }\n }\n this.setState({ processActionProposal: this.props.actionPlanUpdating, showLoadingPanel: this.props.actionPlanUpdating });\n });\n };\n\n handleViewSuggestedUpdate = () => {\n let { lorProfiles, skillProfiles, selectedJobMatchType, selectedProfileVersion, profileVersions } = this.state;\n\n if (selectedJobMatchType && selectedJobMatchType.value != \"None\") {\n this.handleChangeSkill({\n label: this.contentTranslator(this.props.contentTranslations, \"SfiaAll\", \"MatchNone\", \"None\"),\n value: \"None\",\n });\n }\n\n let latestVersion = null;\n\n if (profileVersions && profileVersions.length > 0) {\n latestVersion = profileVersions[0];\n }\n\n if (latestVersion && selectedProfileVersion && latestVersion.version != selectedProfileVersion.version) {\n this.handleChangeVersion(latestVersion);\n }\n\n this.setState({ showSuggestedUpdate: true, showDetail: false, showEdit: false, skillProfilesEdit: [], editCount: 0, createNewVersion: false, lorProfiles: lorProfiles.filter((it) => it.id), skillProfiles: skillProfiles.filter((it) => it.id) });\n };\n\n handleCancelSuggestedUpdate = () => {\n this.setState({ showSuggestedUpdate: false });\n };\n\n handleUpdateProfileSuggestionCommentChange = (event) => {\n const { value } = event.target;\n\n this.setState({\n acceptRejectUpdateProfileSuggestionComment: value,\n });\n };\n\n handleAcceptUpdateProfileSuggestion = () => {\n this.setState({ showAcceptUpdateProfileSuggestionConfirmation: true, acceptRejectUpdateProfileSuggestionComment: \"\" });\n };\n\n togleAcceptUpdateProfileSuggestion = () => {\n const showAcceptUpdateProfileSuggestionConfirmation = this.state.showAcceptUpdateProfileSuggestionConfirmation;\n this.setState({ showAcceptUpdateProfileSuggestionConfirmation: !showAcceptUpdateProfileSuggestionConfirmation });\n };\n\n renderAcceptUpdateProfileSuggestionConfirmation = () => {\n return (\n \n Accept suggestion confirmation \n \n \n \n \n {\n this.handleConfirmAcceptUpdateProfileSuggestion();\n }}\n disabled={this.state.processUpdateProfileSuggestion || !(this.state.acceptRejectUpdateProfileSuggestionComment && this.state.acceptRejectUpdateProfileSuggestionComment != \"\")}\n >\n Accept\n \n \n Cancel\n \n \n \n );\n };\n\n handleConfirmAcceptUpdateProfileSuggestion = () => {\n const acceptRejectUpdateProfileSuggestionComment = this.state.acceptRejectUpdateProfileSuggestionComment;\n const timezoneOffset = (new Date().getTimezoneOffset() * -1) / 60;\n\n this.setState({ showAcceptUpdateProfileSuggestionConfirmation: false, processUpdateProfileSuggestion: true });\n this.setState({ showLoadingPanel: true, loadingPanelHeader: \"Accept update profile suggestion\", loadingPanelBody: \"Please wait ...\" });\n this.props.onSkillProfile.acceptUpdateProfileSuggestion(this.props.account.updateProfileSuggestionId, acceptRejectUpdateProfileSuggestionComment, timezoneOffset).then(() => {\n if (!this.props.updating) {\n if (this.props.error) {\n this.generateAlert(\"danger\", this.props.error.errData.Message);\n this.setState({ showAcceptUpdateProfileSuggestionConfirmation: true });\n } else {\n this.generateAlert(\"success\", \"Update profile suggestion accepted.\");\n this.setState({ showSuggestedUpdate: false });\n this.initData();\n }\n }\n this.setState({ processUpdateProfileSuggestion: this.props.updating, showLoadingPanel: this.props.updating });\n });\n };\n\n handleRejectUpdateProfileSuggestion = () => {\n this.setState({ showRejectUpdateProfileSuggestionConfirmation: true, acceptRejectUpdateProfileSuggestionComment: \"\" });\n };\n\n togleRejectUpdateProfileSuggestion = () => {\n const showRejectUpdateProfileSuggestionConfirmation = this.state.showRejectUpdateProfileSuggestionConfirmation;\n this.setState({ showRejectUpdateProfileSuggestionConfirmation: !showRejectUpdateProfileSuggestionConfirmation });\n };\n\n renderRejectUpdateProfileSuggestionConfirmation = () => {\n return (\n \n Reject proposal confirmation \n \n \n \n \n {\n this.handleConfirmRejectUpdateProfileSuggestion();\n }}\n disabled={this.state.processUpdateProfileSuggestion || !(this.state.acceptRejectUpdateProfileSuggestionComment && this.state.acceptRejectUpdateProfileSuggestionComment != \"\")}\n >\n Reject\n \n \n Cancel\n \n \n \n );\n };\n\n handleConfirmRejectUpdateProfileSuggestion = () => {\n const acceptRejectUpdateProfileSuggestionComment = this.state.acceptRejectUpdateProfileSuggestionComment;\n const timezoneOffset = (new Date().getTimezoneOffset() * -1) / 60;\n\n this.setState({ showRejectUpdateProfileSuggestionConfirmation: false, processUpdateProfileSuggestion: true });\n this.setState({ showLoadingPanel: true, loadingPanelHeader: \"Reject update profile suggestion\", loadingPanelBody: \"Please wait ...\" });\n this.props.onSkillProfile.rejectUpdateProfileSuggestion(this.props.account.updateProfileSuggestionId, acceptRejectUpdateProfileSuggestionComment, timezoneOffset).then(() => {\n if (!this.props.updating) {\n if (this.props.error) {\n this.generateAlert(\"danger\", this.props.error.errData.Message);\n this.setState({ showRejectUpdateProfileSuggestionConfirmation: true });\n } else {\n this.generateAlert(\"success\", \"Update profile suggestion rejected.\");\n this.setState({ showSuggestedUpdate: false });\n this.initData();\n }\n }\n this.setState({ processUpdateProfileSuggestion: this.props.updating, showLoadingPanel: this.props.updating });\n });\n };\n\n updateFloatingLegendStatus = (showFloatingLegend) => {\n this.setState({ showFloatingLegend });\n };\n\n handleSuggestEditLowerLevelProfile = (editedProfiles) => {\n let willCreateNewVersion = false;\n\n if (!this.state.showEdit) {\n willCreateNewVersion = true;\n this.setState({ showEdit: !this.state.showEdit, willCreateNewVersion, createNewVersion: false, editCount: 0 });\n }\n\n this.handleEditProfileSkills(editedProfiles);\n };\n\n handleManagerSuggestEditLowerLevelProfile = (editedProfiles) => {\n if (!this.state.proposedUpdateLowerLevelMode) {\n this.setState({ proposedUpdateLowerLevelMode: true, editCount: 0 });\n } else {\n this.setState({ proposedUpdateLowerLevelMode: true });\n }\n\n this.handleEditProfileSkills(editedProfiles);\n };\n\n handleCancelProposeUpdateLowerLevel = () => {\n if (this.state.skillProfilesEdit.length > 0 && this.state.editCount > 0) {\n let { lorProfiles, skillProfiles } = this.state;\n\n if (window.confirm(\"You have some updates, are you sure to cancel the updates?\")) {\n this.setState({\n skillProfilesEdit: [],\n editCount: 0,\n createNewVersion: false,\n proposedUpdateLowerLevelMode: false,\n lorProfiles: lorProfiles.filter((it) => it.id),\n skillProfiles: skillProfiles.filter((it) => it.id),\n });\n }\n } else {\n this.setState({\n proposedUpdateLowerLevelMode: false,\n lorProfiles: this.props.lorProfiles\n ? this.props.lorProfiles && this.props.lorProfiles.length > 0\n ? this.props.lorProfiles\n : this.state.latestUpdatedLorProfiles\n ? this.state.latestUpdatedLorProfiles && this.state.latestUpdatedLorProfiles.length > 0\n ? this.state.latestUpdatedLorProfiles\n : this.props.lorProfiles\n : []\n : this.state.latestUpdatedLorProfiles\n ? this.state.latestUpdatedLorProfiles\n : [],\n skillProfiles: this.props.skillProfiles\n ? this.props.skillProfiles && this.props.skillProfiles.length > 0\n ? this.props.skillProfiles\n : this.state.latestUpdatedSkillProfiles\n ? this.state.latestUpdatedSkillProfiles && this.state.latestUpdatedSkillProfiles.length > 0\n ? this.state.latestUpdatedSkillProfiles\n : this.props.skillProfiles\n : []\n : this.state.latestUpdatedSkillProfiles\n ? this.state.latestUpdatedSkillProfiles\n : [],\n });\n }\n };\n\n handleProposeUpdateProfileSuggestion = () => {\n this.setState({ showProposeUpdateProfileSuggestionConfirmation: true, acceptRejectUpdateProfileSuggestionComment: \"\" });\n };\n\n togleProposeUpdateProfileSuggestion = () => {\n const showProposeUpdateProfileSuggestionConfirmation = this.state.showProposeUpdateProfileSuggestionConfirmation;\n this.setState({ showProposeUpdateProfileSuggestionConfirmation: !showProposeUpdateProfileSuggestionConfirmation });\n };\n\n renderProposeUpdateProfileSuggestionConfirmation = () => {\n return (\n \n Propose suggestion confirmation \n \n \n \n \n {\n this.handleConfirmProposeUpdateProfileSuggestion();\n }}\n disabled={this.state.processUpdateProfileSuggestion || !(this.state.acceptRejectUpdateProfileSuggestionComment && this.state.acceptRejectUpdateProfileSuggestionComment != \"\")}\n >\n Ok\n \n \n Cancel\n \n \n \n );\n };\n\n handleConfirmProposeUpdateProfileSuggestion = () => {\n const { skillProfilesEdit } = this.state;\n\n if (this.props.managedPeople) {\n const skills = skillProfilesEdit.map((skill) => {\n return {\n category: skill.category,\n subCategory: skill.subCategory,\n skill: skill.skill,\n skillCode: skill.skillCode,\n level: skill.level,\n stringVal: skill.editedStringVal,\n numericVal: skill.editedNumericVal,\n labelVal: skill.editedLabelVal,\n isExtraFramework: skill.isExtraFramework,\n extraFrameworkLevel: skill.extraFrameworkLevel,\n extraFrameworkLevelId: skill.extraFrameworkLevelId,\n };\n });\n\n this.setState({ showProposeUpdateProfileSuggestionConfirmation: false, processUpdateProfileSuggestion: true, showLoadingPanel: true, loadingPanelHeader: \"Submit update profile suggestion\", loadingPanelBody: \"Please wait ...\" });\n\n let { lorProfiles, skillProfiles } = this.state;\n\n this.props.onSkillProfile.submitUpdateProfileSuggestion(this.props.managedPeople.personB.email, this.state.acceptRejectUpdateProfileSuggestionComment, skills).then(() => {\n if (!this.props.updating) {\n if (this.props.error) {\n this.generateAlert(\"danger\", this.props.error.errData.Message);\n this.setState({ showProposeUpdateProfileSuggestionConfirmation: true });\n } else {\n this.generateAlert(\"success\", \"Update profile suggestion submitted\");\n\n this.setState({\n skillProfilesEdit: [],\n editCount: 0,\n createNewVersion: false,\n proposedUpdateLowerLevelMode: false,\n lorProfiles: lorProfiles.filter((it) => it.id),\n skillProfiles: skillProfiles.filter((it) => it.id),\n });\n\n this.initData();\n }\n }\n\n this.setState({ processUpdateProfileSuggestion: this.props.updating, showLoadingPanel: this.props.updating });\n });\n }\n };\n\n handleSubmitProposeUpdateLowerLevel = () => {\n const { skillProfilesEdit } = this.state;\n\n if (this.props.managedPeople) {\n const skills = skillProfilesEdit.map((skill) => {\n return {\n category: skill.category,\n subCategory: skill.subCategory,\n skill: skill.skill,\n skillCode: skill.skillCode,\n level: skill.level,\n stringVal: skill.editedStringVal,\n numericVal: skill.editedNumericVal,\n labelVal: skill.editedLabelVal,\n isExtraFramework: skill.isExtraFramework,\n extraFrameworkLevel: skill.extraFrameworkLevel,\n extraFrameworkLevelId: skill.extraFrameworkLevelId,\n };\n });\n\n this.setState({ showLoadingPanel: true, loadingPanelHeader: \"Submit update profile suggestion\", loadingPanelBody: \"Please wait ...\" });\n\n let { lorProfiles, skillProfiles } = this.state;\n\n this.props.onSkillProfile.submitUpdateProfileSuggestion(this.props.managedPeople.personB.email, skills).then(() => {\n if (!this.props.updating) {\n if (this.props.error) {\n this.generateAlert(\"danger\", this.props.error.errData.Message);\n } else {\n this.generateAlert(\"success\", \"Update profile suggestion submitted\");\n\n this.setState({\n skillProfilesEdit: [],\n editCount: 0,\n createNewVersion: false,\n proposedUpdateLowerLevelMode: false,\n lorProfiles: lorProfiles.filter((it) => it.id),\n skillProfiles: skillProfiles.filter((it) => it.id),\n });\n\n this.initData();\n }\n }\n\n this.setState({ showLoadingPanel: this.props.updating });\n });\n }\n };\n\n handleEvidenceAdded = (addedEvidence) => { \n const evidences = this.state.evidences;\n this.setState({ evidences: [...evidences, addedEvidence] });\n this.props.handleEvidenceAdded(addedEvidence);\n }\n\n handleEvidenceDeleted = (deletedId) => {\n const evidences = this.state.evidences;\n const deletedEvidence = evidences.find((it) => it.id == deletedId);\n\n if (deletedEvidence) {\n this.setState({\n evidences: [...evidences.filter((it) => it.id != deletedId)],\n });\n }\n };\n\n handleEvidenceUpdated = (updatedEvidence) => {\n const evidences = this.state.evidences;\n const editedEvidence = evidences.find((it) => it.id == updatedEvidence.id);\n\n if (editedEvidence) {\n const updatedEvidenceIndex = evidences.indexOf(editedEvidence);\n evidences[updatedEvidenceIndex] = updatedEvidence;\n }\n this.setState({ evidences: [...evidences] });\n };\n\n render() {\n const manageEndorsementOperation = localStorage.getItem(\"manageEndorsementOperation\");\n const { skillProfilesEdit, editCount, selectedprofileType, selectedProfileVersion, profileVersions, account, createNewVersion, lors, selectedEndorsementStatus, endorsementStatusOptions, badgeRequest, showEditCertify, updateBadgeRequest, showProposedAction, showSuggestedUpdate } = this.state;\n const { person, lorProfiles } = this.props;\n\n const currAssessment = this.props.currAssessment;\n\n let allowRequestApproval = false;\n let showRequestApprovalButton = false;\n let showApprovalPending = false;\n let showApprovalPostponed = false;\n let showReRequestApproval = false;\n let showCopyEndorsedButton = false;\n let showMakeLatestButton = false;\n let showMakeSelfAssessedButton = false;\n let showMakeNewVersionButton = false;\n let showEndorsementStatus = false;\n let showBeMentor = false;\n let showMenteeRequest = false;\n\n if (!this.props.managedPeople && this.state.profileTypeOptions.find((it) => it.value == \"Endorsed\") && selectedprofileType && selectedprofileType.value == \"Self Assessed\") {\n showCopyEndorsedButton = true;\n }\n\n let latestVersion = null;\n\n if (profileVersions && profileVersions.length > 0) {\n latestVersion = profileVersions[0];\n }\n\n if (!this.props.managedPeople && selectedprofileType && selectedprofileType.value == \"Self Assessed\" && latestVersion && latestVersion.version != selectedProfileVersion.version) {\n showMakeLatestButton = true;\n }\n\n if (!this.props.managedPeople && selectedprofileType && selectedprofileType.value == \"Endorsed\" && latestVersion && latestVersion.version == selectedProfileVersion.version && this.state.profileTypeOptions.length == 1) {\n showMakeSelfAssessedButton = true;\n }\n\n if (!this.props.managedPeople && selectedprofileType && selectedprofileType.value == \"Self Assessed\" && latestVersion && latestVersion.version == selectedProfileVersion.version) {\n showMakeNewVersionButton = true;\n }\n\n if (\n manageEndorsementOperation &&\n manageEndorsementOperation != \"HIDE\" &&\n this.props.managedPeople &&\n this.props.managedPeople.endorsementStatus != \"Approved\" &&\n selectedprofileType &&\n selectedprofileType.value == \"Endorsed\" &&\n latestVersion &&\n latestVersion.version == selectedProfileVersion.version\n ) {\n showEndorsementStatus = true;\n }\n\n if (!this.props.managedPeople && selectedprofileType && selectedprofileType.value == \"Self Assessed\") {\n if (\n account &&\n currAssessment &&\n currAssessment.enableApprovalRequest &&\n (currAssessment.adminSelfAssessedApproverFound ||\n (currAssessment.allowApprovals == 1 && person && person.upRelationships && person.upRelationships.find((it) => it.relationshipType == \"Line Manager\")) ||\n (currAssessment.allowApprovals == 2 && person && person.upRelationships && person.upRelationships.find((it) => it.relationshipType == \"Line Manager\" || it.relationshipType == \"Team Leader\")) ||\n (currAssessment.allowApprovals == 3 && person && person.upRelationships && person.upRelationships.find((it) => it.relationshipType == \"Mentor\" && it.status == \"Accepted\")) ||\n (currAssessment.allowApprovals == 4 && person && person.upRelationships && person.upRelationships.find((it) => it.relationshipType == \"Line Manager\" || (it.relationshipType == \"Mentor\" && it.status == \"Accepted\"))) ||\n (currAssessment.allowApprovals == 5 && person && person.upRelationships && person.upRelationships.find((it) => it.relationshipType == \"Line Manager\" || it.relationshipType == \"Team Leader\" || (it.relationshipType == \"Mentor\" && it.status == \"Accepted\"))))\n ) {\n allowRequestApproval = true;\n }\n\n if (\n account &&\n currAssessment &&\n currAssessment.enableApprovalRequest &&\n !account.isApprovalRequested &&\n !account.isApprovalPostponed &&\n (currAssessment.adminSelfAssessedApproverFound ||\n (currAssessment.allowApprovals == 1 && person && person.upRelationships && person.upRelationships.find((it) => it.relationshipType == \"Line Manager\")) ||\n (currAssessment.allowApprovals == 2 && person && person.upRelationships && person.upRelationships.find((it) => it.relationshipType == \"Line Manager\" || it.relationshipType == \"Team Leader\")) ||\n (currAssessment.allowApprovals == 3 && person && person.upRelationships && person.upRelationships.find((it) => it.relationshipType == \"Mentor\" && it.status == \"Accepted\")) ||\n (currAssessment.allowApprovals == 4 && person && person.upRelationships && person.upRelationships.find((it) => it.relationshipType == \"Line Manager\" || (it.relationshipType == \"Mentor\" && it.status == \"Accepted\"))) ||\n (currAssessment.allowApprovals == 5 && person && person.upRelationships && person.upRelationships.find((it) => it.relationshipType == \"Line Manager\" || it.relationshipType == \"Team Leader\" || (it.relationshipType == \"Mentor\" && it.status == \"Accepted\"))))\n ) {\n if (!account.updateProfileEvidenceProposed) {\n showRequestApprovalButton = true;\n }\n } else {\n if (account && currAssessment && currAssessment.enableApprovalRequest && account.approvals && account.approvals.length > 0 && account.approvals.filter((it) => !it.isFramework && it.approvedVersion == account.latestProfileVersion).length > 0) {\n showApprovalPending = false;\n } else if (account && currAssessment && currAssessment.enableApprovalRequest) {\n if (account.isApprovalRequested || account.isApprovalPostponed) {\n showApprovalPending = true;\n }\n\n showApprovalPostponed = account.isApprovalPostponed ? account.isApprovalPostponed : false;\n showReRequestApproval = account.isApprovalPostponedShown && account.isApprovalPostponedShown == false ? false : account.isApprovalPostponedShown && account.isApprovalPostponedShown == true ? true : false;\n }\n }\n }\n\n if (!this.props.managedPeople && selectedprofileType && selectedprofileType.value == \"Self Assessed\") {\n if (\n account &&\n currAssessment &&\n currAssessment.enableFindMentor &&\n //!account.isMentor &&\n account.canBeMentor\n ) {\n showBeMentor = true;\n }\n if (account && currAssessment && currAssessment.enableFindMentor && account.isMentor) {\n showMenteeRequest = true;\n }\n }\n\n let enableSave = false;\n if (skillProfilesEdit.length != 0 && editCount > 0) {\n const visibleLors = lors\n .filter((it) => !it.isHidden && !it.optional)\n .map((it) => {\n return {\n lor: it.name,\n lorCode: it.lorCode,\n };\n });\n\n if (!createNewVersion) {\n let lorProfilesAdded = lors\n .map((lor) => {\n const lorSkillProfileEdit = skillProfilesEdit.find((it) => it.source == \"lorProfiles\" && it.lorCode == lor.lorCode);\n return { lor: lor.name, lorCode: lor.lorCode, numericVal: lorSkillProfileEdit ? (lorSkillProfileEdit.numericVal ? lorSkillProfileEdit.numericVal : lorSkillProfileEdit.editedNumericVal) : null };\n })\n .filter((it) => it.numericVal);\n\n let lorProfileCodes = lorProfiles\n ? lorProfiles.map((it) => {\n return {\n lor: it.lor,\n lorCode: it.lorCode,\n };\n })\n : [];\n\n lorProfilesAdded.forEach((x) => {\n if (!lorProfileCodes.find((y) => x.lor == y.lor && x.lorCode == y.lorCode)) {\n lorProfileCodes.push({\n lor: x.lor,\n lorCode: x.lorCode,\n });\n }\n });\n\n const missingLors = visibleLors.filter((it) => !lorProfileCodes.find((l) => l.lor == it.lor && l.lorCode == it.lorCode));\n enableSave = missingLors.length == 0;\n } else {\n let lorProfilesAdded = lors\n .map((lor) => {\n const lorSkillProfileEdit = skillProfilesEdit.find((it) => it.source == \"lorProfiles\" && it.lorCode == lor.lorCode);\n return { lor: lor.name, lorCode: lor.lorCode, numericVal: lorSkillProfileEdit ? lorSkillProfileEdit.numericVal : null };\n })\n .filter((it) => it.numericVal);\n\n const missingLors = visibleLors.filter((it) => !lorProfilesAdded.find((l) => l.lor == it.lor && l.lorCode == it.lorCode));\n enableSave = missingLors.length == 0 && skillProfilesEdit.filter((it) => it.source == \"skillProfiles\" && it.editedNumericVal != 0).length > 0;\n }\n }\n\n let showApproveEndorsement = false;\n if (manageEndorsementOperation == \"APPROVE\" && this.props.managedPeople && this.props.managedPeople.isEndorser) {\n showApproveEndorsement = true;\n }\n\n return (\n \n {this.state.profileUpdating && (\n \n \n )}\n {!this.state.profileUpdating && this.state.profileUpdatingSuccess && (\n \n )}\n {!this.state.profileUpdating && !this.state.profileUpdatingSuccess && this.state.profileUpdatingError && (\n \n )}\n \n \n \n {!this.props.badgeCertification ?
\n \n
\n \n \n {!showProposedAction && (\n \n {this.parameterizedString(\n this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonHaveActionProposalNotification\", \"{s1} has proposed changes to your profile on {s2}. Click to view.\"),\n this.props.account.updateProfileEvidenceProposedBy,\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n }).format(new Date(this.props.account.updateProfileEvidenceProposedOn))\n )}\n \n )}\n {showProposedAction && (\n \n {this.parameterizedString(\n this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileHaveActionProposalNotification\", \"Now showing proposed changes by {s1} on {s2}.\"),\n this.props.account.updateProfileEvidenceProposedBy,\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n }).format(new Date(this.props.account.updateProfileEvidenceProposedOn))\n )}\n \n )}\n \n ) : (\n !this.props.managedPeople &&\n this.props.account &&\n this.props.account.updateProfileSuggested &&\n this.state.selectedprofileType &&\n this.state.selectedprofileType.value == \"Self Assessed\" && (\n \n {!showSuggestedUpdate && (\n \n {this.parameterizedString(\n this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonHaveUpdateProfileSuggestionNotification\", \"{s1} has suggested changes to your profile on {s2}. Click to view.\"),\n this.props.account.updateProfileSuggestedBy,\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n }).format(new Date(this.props.account.updateProfileSuggestedOn))\n )}\n \n )}\n {showSuggestedUpdate && (\n \n {this.parameterizedString(\n this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileHaveUpdateProfileSuggestionNotification\", \"Now showing suggested changes by {s1} on {s2}.\"),\n this.props.account.updateProfileSuggestedBy,\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n }).format(new Date(this.props.account.updateProfileSuggestedOn))\n )}\n \n )}\n \n )\n )}\n \n
\n {!this.props.badgeCertification && (\n \n \n \n \n \n
\n \n
\n \n
\n
\n \n \n {!this.state.loading && (\n \n \n {!showProposedAction && !showSuggestedUpdate && (\n \n {skillProfilesEdit.length > 0 && editCount > 0 && (\n \n \n \n {this.state.proposedUpdateLowerLevelMode\n ? this.parameterizedString(this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileSuggestedSkillsCount\", \"You have {s1} pending Proposed skill changes.\"), editCount)\n : this.parameterizedString(this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileUpdatedSkillsCount\", \"You have {s1} pending skill changes.\"), editCount)}\n \n
\n \n )}\n {showMenteeRequest && (\n \n \n \n \n \n \n )}\n {showBeMentor && (\n \n \n {this.state.account.isMentor ? (\n \n \n {this.state.account.isMentor ? (\n \n \n )}\n {showEndorsementStatus && (\n \n \n
\n
\n
it.value != \"Approved\")}\n isDisabled={this.state.showEdit || this.state.updateEndorsedStatus}\n />\n \n )}\n {this.props.managedPeople != true && !this.state.showEdit && showRequestApprovalButton && (\n \n \n \n \n \n \n )}\n {this.props.managedPeople != true && !this.state.showEdit && showApprovalPending && !showApprovalPostponed && (\n \n \n \n \n )}\n {this.props.managedPeople != true && !this.state.showEdit && showApprovalPending && showApprovalPostponed && showReRequestApproval && allowRequestApproval && (\n \n \n \n \n )}\n {this.props.managedPeople != true && !this.state.showEdit && showApprovalPending && showApprovalPostponed && (\n \n \n \n \n )}\n {this.props.managedPeople != true && !this.state.showEdit && showCopyEndorsedButton && (\n \n \n \n \n \n \n )}\n {this.props.managedPeople != true && !this.state.showEdit && showMakeNewVersionButton && (\n \n \n \n \n \n \n )}\n {this.props.managedPeople != true && !this.state.showEdit && showMakeLatestButton && (\n \n \n \n \n \n \n )}\n {this.props.managedPeople != true && !this.state.showEdit && showMakeSelfAssessedButton && (\n \n \n \n \n \n \n )}\n {this.props.containerConfig && this.props.containerConfig.allowShowHiddenSkills && (\n \n \n {this.state.showHidden\n ? this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonHideHidden\", \"Hide Hidden Skills\")\n : this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonShowHidden\", \"Show Hidden Skills\")}\n \n \n )}\n \n \n {this.state.showDetail || this.state.showEdit\n ? this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonHideDetail\", \"Hide Detail\")\n : this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonShowDetail\", \"Show Detail\")}\n \n \n {this.state.showDetail || this.state.showEdit\n ? this.props.managedPeople\n ? this.contentTranslator(this.props.contentTranslations, \"SfiaProfileTooltip\", \"SkillProfileButtonHideDetailManagedTooltip\", \"Compress profile to show selected skills only\")\n : this.contentTranslator(this.props.contentTranslations, \"SfiaProfileTooltip\", \"SkillProfileButtonHideDetailTooltip\", \"Compress your profile to show your selected skills only\")\n : this.props.managedPeople\n ? this.contentTranslator(this.props.contentTranslations, \"SfiaProfileTooltip\", \"SkillProfileButtonShowDetailManagedTooltip\", \"Expand profile to show complete framework\")\n : this.contentTranslator(this.props.contentTranslations, \"SfiaProfileTooltip\", \"SkillProfileButtonShowDetailTooltip\", \"Expand your profile to show the full framework\")}\n \n \n {!this.props.managedPeople && this.state.selectedprofileType && this.state.selectedprofileType.value == \"Self Assessed\" && !this.state.selectedProfileVersion && (\n \n {this.state.showEdit ? (\n \n {this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonCancel\", \"Cancel\")}\n \n ) : (\n \n {this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonCreateSelfAssessedProfile\", \"Create Profile\")}\n \n )}\n \n )}\n {this.props.managedPeople && this.state.selectedprofileType && this.state.selectedprofileType.value == \"Endorsed\" && (this.props.isEndorser || this.props.manageEndorsements) && !this.state.selectedProfileVersion && (\n \n {this.state.showEdit ? (\n \n {this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonCancel\", \"Cancel\")}\n \n ) : (\n \n {this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonCreateEndorsedProfile\", \"Create Endorsed Profile\")}\n \n )}\n \n )}\n {this.state.showEdit && (\n \n \n \n \n )}\n {this.state.selectedprofileType &&\n ((!this.props.managedPeople && this.state.selectedprofileType.value == \"Self Assessed\") ||\n (this.props.managedPeople && this.state.selectedprofileType.value == \"Endorsed\" && (!showApproveEndorsement || this.props.managedPeople.endorsementStatus == \"Approved\") && (this.props.isEndorser || this.props.manageEndorsements))) &&\n this.state.selectedProfileVersion &&\n this.state.selectedProfileVersion.sfiaVersion == this.state.profileVersions[0].sfiaVersion &&\n this.state.selectedProfileVersion.version == this.state.profileVersions[0].version && (\n \n \n {this.state.showEdit\n ? this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonCancel\", \"Cancel\")\n : this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonEditProfile\", \"Edit Profile\")}\n \n {!this.state.showEdit && (\n \n {this.contentTranslator(this.props.contentTranslations, \"SfiaProfileTooltip\", \"SkillProfileButtonEditProfileTooltip\", \"Open your profile in EDIT mode so you can make changes\")}\n \n )}\n \n )}\n {this.state.proposedUpdateLowerLevelMode && (\n \n \n \n \n \n \n \n \n )}\n {currAssessment &&\n currAssessment.allowUserExportSelfAssessedProfile &&\n !this.props.managedPeople &&\n this.state.selectedprofileType &&\n this.state.selectedprofileType.value == \"Self Assessed\" &&\n this.state.selectedProfileVersion &&\n this.state.selectedProfileVersion.sfiaVersion == this.state.profileVersions[0].sfiaVersion &&\n this.state.selectedProfileVersion.version == this.state.profileVersions[0].version && (\n \n \n {!this.props.loadingExport ? this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonExportProfile\", \"Export Profile\") : \n \n )}\n \n \n {!this.props.loadingPrint ? this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonPrint\", \"Print\") : \n \n {this.props.managedPeople\n ? this.contentTranslator(this.props.contentTranslations, \"SfiaProfileTooltip\", \"SkillProfileButtonPrintManagedTooltip\", \"Generate and download a report of your profile\")\n : this.contentTranslator(this.props.contentTranslations, \"SfiaProfileTooltip\", \"SkillProfileButtonPrintTooltip\", \"Generate and download a report of your profile\")}\n \n \n \n )}\n {showProposedAction && (\n \n \n \n {this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonAcceptProposal\", \"Accept\")}\n \n \n {this.contentTranslator(this.props.contentTranslations, \"SfiaProfileTooltip\", \"SkillProfileButtonAcceptProposalTooltip\", \"Click here to Accept the changes and send a notification to person who proposed the changes\")}\n \n \n \n \n {this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonRejectProposal\", \"Reject\")}\n \n \n {this.contentTranslator(this.props.contentTranslations, \"SfiaProfileTooltip\", \"SkillProfileButtonRejectProposalTooltip\", \"Click here to Reject the changes and send a notification to person who proposed the changes\")}\n \n \n \n \n {this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonProposalCancel\", \"Cancel\")}\n \n \n {this.contentTranslator(this.props.contentTranslations, \"SfiaProfileTooltip\", \"SkillProfileButtonProposalCancelTooltip\", \"Click here to cancel and return to your profile WITHOUT accepting or rejecting the changes.\")}\n \n \n \n )}\n {showSuggestedUpdate && (\n \n \n \n {this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonAcceptSuggestion\", \"Accept\")}\n \n \n {this.contentTranslator(this.props.contentTranslations, \"SfiaProfileTooltip\", \"SkillProfileButtonAcceptSuggestionTooltip\", \"Click here to Accept the changes\")}\n \n \n \n \n {this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonRejectSuggestion\", \"Reject\")}\n \n \n {this.contentTranslator(this.props.contentTranslations, \"SfiaProfileTooltip\", \"SkillProfileButtonRejectSuggestionTooltip\", \"Click here to Reject the changes\")}\n \n \n \n \n {this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonSuggestionCancel\", \"Cancel\")}\n \n \n {this.contentTranslator(this.props.contentTranslations, \"SfiaProfileTooltip\", \"SkillProfileButtonSuggestionCancelTooltip\", \"Click here to cancel and return to your profile WITHOUT accepting or rejecting the changes.\")}\n \n \n \n )}\n
\n \n )}\n
\n \n )}\n {this.props.badgeCertification && (\n \n \n {!this.state.loading && (\n \n \n \n {!showEditCertify && badgeRequest && badgeRequest.status != \"Approved\" && !badgeRequest.certificationSubmitted && (\n \n \n {this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonEditCertify\", \"Edit\")}\n \n \n )}\n {showEditCertify && (\n \n \n this.handleSaveBadgeRequest()}\n disabled={updateBadgeRequest || !(badgeRequest && badgeRequest.requestCertificationEntries && badgeRequest.requestCertificationEntries.filter((it) => it.edited).length > 0)}\n >\n \n {badgeRequest && badgeRequest.requestCertificationEntries && badgeRequest.requestCertificationEntries.filter((it) => it.id).length > 0 && (\n \n \n {this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonCancel\", \"Cancel\")}\n \n \n )}\n \n )}\n {badgeRequest && badgeRequest.status != \"Approved\" && !badgeRequest.certificationSubmitted && badgeRequest.requestCertificationEntries && badgeRequest.requestCertificationEntries.filter((it) => it.id).length > 0 && (\n \n \n \n \n )}\n {/* {badgeRequest && !badgeRequest.certificationSubmitted && badgeRequest.requestCertificationEntries && badgeRequest.requestCertificationEntries.filter((it) => it.id).length > 0 && (\n \n \n \n \n )} */}\n {badgeRequest && badgeRequest.certificationSubmitted && (\n \n \n \n \n )}\n \n \n {this.state.showDetail || this.state.showEdit\n ? this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonCertifyShowLess\", \"Show Less\")\n : this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SkillProfileButtonCertifyShowAll\", \"Show All\")}\n \n \n \n
\n \n )}\n
\n \n )}\n {this.state.loading ? (\n \n
\n ) : (\n \n )}\n \n \n \n \n \n \n \n \n \n \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.selectedJobMatchType && this.state.selectedJobMatchType.value != \"None\" && (\n \n \n \n \n \n \n )}\n \n \n \n \n \n \n \n \n \n \n {this.state.selectedJobMatchType && this.state.selectedJobMatchType.value == \"Current\" && (\n \n \n )}\n {this.state.selectedJobMatchType && this.state.selectedJobMatchType.value == \"Future\" && (\n \n \n )}\n \n \n
\n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n let showApprovedProfileOnly = localStorage.getItem(\"showApprovedProfileOnly\");\n let profileType = localStorage.getItem(\"profileType\");\n\n return {\n jobMatchTypes: state.job.jobMatchTypes,\n\n profileTypes: state.skillProfile.profileTypes,\n profileVersions: state.skillProfile.profileVersions ? (showApprovedProfileOnly && showApprovedProfileOnly == \"TRUE\" && profileType == \"Self Assessed\" ? state.skillProfile.profileVersions.filter((it) => it.approved == true) : state.skillProfile.profileVersions) : null,\n lorProfileLoading: state.skillProfile.loading,\n lorProfileError: state.skillProfile.error,\n lorProfiles: state.skillProfile.lorProfiles,\n lorLoading: state.lor.loading,\n lorError: state.lor.error,\n lors: state.lor.lors,\n\n skillProfileLoading: state.skillProfile.loading,\n skillProfileError: state.skillProfile.error,\n skillProfiles: state.skillProfile.skillProfiles,\n\n loadingPrint: state.skillProfile.loadingPrint,\n printData: state.skillProfile.printData,\n\n categoryLoading: state.category.loading,\n categoryError: state.category.error,\n extraFrameworkCapabilities: state.category.extraFrameworkCapabilities,\n extraFrameworkLevels: state.category.extraFrameworkLevels,\n categories: state.category.categories,\n\n profileUpdating: state.skillProfile.profileUpdating,\n profileUpdatingSuccess: state.skillProfile.profileUpdatingSuccess,\n profileUpdatingError: state.skillProfile.profileUpdatingError,\n udpatedSkills: state.skillProfile.udpatedSkills,\n\n updating: state.skillProfile.updating,\n error: state.skillProfile.error,\n\n updateEndorsedStatus: state.skillProfile.updateEndorsedStatus,\n updateEndorsedStatusError: state.skillProfile.updateEndorsedStatusError,\n updatedPersonEndorsement: state.skillProfile.updatedPersonEndorsement,\n\n endorsedProfileCopying: state.skillProfile.endorsedProfileCopying,\n endorsedProfileCopyingSuccess: state.skillProfile.endorsedProfileCopyingSuccess,\n endorsedProfileCopyingError: state.skillProfile.endorsedProfileCopyingError,\n\n copyProfile: state.skillProfile.copyProfile,\n copyProfileError: state.skillProfile.copyProfileError,\n\n jobGaps: state.job.jobGaps,\n jobLoading: state.job.jobMatchesLoading,\n jobError: state.job.error,\n jobMatches: state.job.jobMatches,\n jobLorProfiles: state.job.jobLorProfiles,\n jobSkillProfiles: state.job.jobSkillProfiles,\n jobSkillAttributes: state.job.jobSkillAttributes,\n jobLorAttributes: state.job.jobLorAttributes,\n jobMatchesUpdated: state.job.jobMatchesUpdated,\n\n personLoading: state.person.loading,\n personError: state.person.error,\n personUpdating: state.person.updating,\n account: state.person.account,\n person: state.person.person,\n loadingExport: state.person.loadingExport,\n exportData: state.person.exportData,\n\n managedPeople: state.auth.managedPeople,\n contentTranslations: state.content.contentTranslations,\n isEndorser: state.auth.isEndorser,\n manageEndorsements: state.auth.manageEndorsements,\n manageSelfAssessed: state.auth.manageSelfAssessed,\n manageSelfProfiles: state.auth.manageSelfProfiles,\n jobProfileReportFormat: state.auth.jobProfileReportFormat,\n selfAssessedProfileReportFormat: state.auth.selfAssessedProfileReportFormat,\n allowSkipSurvey: state.auth.allowSkipSurvey,\n\n currAssessment: state.config.currAssessment,\n badgeRequestError: state.adminBadgeRequest.error,\n badgeRequestUpdating: state.adminBadgeRequest.isUpdating,\n updatedBadgeRequest: state.adminBadgeRequest.updatedBadgeRequest,\n\n actionPlanUpdating: state.actionPlan.actionPlanUpdating,\n actionPlanUpdatingError: state.actionPlan.actionPlanUpdatingError,\n\n containerConfig: state.config.containerConfig,\n\n evidenceError: state.evidence.error,\n addEvidenceInProgress: state.evidence.updateInProgress,\n addedEvidences: state.evidence.updatedEvidences,\n loadingEvidence: state.evidence.loading,\n evidences: state.evidence.evidences,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onSkillProfile: bindActionCreators(skillProfileActions, dispatch),\n onLor: bindActionCreators(lorActions, dispatch),\n onCategory: bindActionCreators(categoryActions, dispatch),\n onJob: bindActionCreators(jobActions, dispatch),\n onPerson: bindActionCreators(personActions, dispatch),\n onAdminPerson: bindActionCreators(adminPersonActions, dispatch),\n onAdminBadgeRequest: bindActionCreators(adminBadgeRequestActions, dispatch),\n onActionPlan: bindActionCreators(actionPlanActions, dispatch),\n onConfig: bindActionCreators(configActions, dispatch),\n onEvidence: bindActionCreators(evidenceActions, dispatch),\n };\n};\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(SfiaSkills));\n","import * as authActions from \"../../store/actions/authAction\";\nimport * as categoryActions from \"../../store/actions/categoryAction\";\nimport * as configActions from \"../../store/actions/configAction\";\nimport * as contentActions from \"../../store/actions/contentAction\";\nimport * as evidenceActions from \"../../store/actions/evidenceAction\";\nimport * as personActions from \"../../store/actions/personAction\";\nimport * as adminPersonActions from \"../../store/admin/actions/adminPersonActions\";\nimport { dismisAlert, generateAlert } from \"../../utils/alertUtils\";\nimport { parameterizedString } from \"../../utils/stringUtils\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport StepProfile from \"../profile/StepProfile\";\nimport ContentTranslator from \"./../translator/ContentTranslator\";\nimport Profile from \"./Profile\";\nimport SfiaSkills from \"./SfiaSkills\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { Alert, Button, Col, Container, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row, Spinner, UncontrolledTooltip } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nconst step1 = process.env.REACT_APP_SKILLPROFILE_STEP_1;\nconst step2 = process.env.REACT_APP_SKILLPROFILE_STEP_2;\nconst step3 = process.env.REACT_APP_SKILLPROFILE_STEP_3;\n\nconst step1Hover = process.env.REACT_APP_SKILLPROFILE_STEP_1_HOVER;\nconst step2Hover = process.env.REACT_APP_SKILLPROFILE_STEP_2_HOVER;\nconst step3Hover = process.env.REACT_APP_SKILLPROFILE_STEP_3_HOVER;\n\nclass SkillsProfile extends React.Component {\n static displayName = SkillsProfile.name;\n\n constructor(props) {\n super(props);\n this.state = {\n forceOpenEditProfile: false,\n forceOpenEditJob: false,\n stepData: {\n step1: {\n desc: step1,\n hover: step1Hover,\n },\n step2: {\n desc: step2,\n hover: step2Hover,\n },\n step3: {\n desc: step3,\n hover: step3Hover,\n },\n currentStep: null,\n },\n loading: true,\n contentLoading: true,\n categoryLoading: true,\n selectedVersion: null,\n showApproveDialog: false,\n approveInProgress: false,\n comment: null,\n showPostponeDialog: false,\n postponeComment: null,\n postponeType: null,\n showConfirmPostponeDialog: false,\n alerts: [],\n endorsedProfileApproved: null,\n maxNumberOfBadgeRequestSkill: 6,\n showHidden: false,\n };\n\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n this.parameterizedString = parameterizedString.bind(this);\n }\n\n componentDidMount() {\n if (this.props.language) {\n this.props.onContent.getContentTranslations(this.props.language.id, \"SfiaAll-Menu-SfiaProfileMenu-SfiaProfile-SfiaProfileTooltip-Lors-Skills\").then(() => {\n this.setState({ contentLoading: this.props.contentLoading });\n\n const stepData = {\n step1: {\n desc: this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SfiaProfileStep1Description\", step1),\n hover: this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SfiaProfileStep1Hover\", step1Hover),\n },\n step2: {\n desc: this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SfiaProfileStep2Description\", step2),\n hover: this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SfiaProfileStep2Hover\", step2Hover),\n },\n step3: {\n desc: this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SfiaProfileStep3Description\", step3),\n hover: this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SfiaProfileStep3Hover\", step3Hover),\n },\n currentStep: null,\n };\n\n this.setState({ stepData });\n\n this.props.onAuth.authCheckState().then(() => {\n if (!this.props.currAssessment) {\n this.props.onConfig.getCurrAssessment().then(() => {});\n }\n\n if (window.location.pathname.includes(\"/Manage\") || window.location.pathname.includes(\"/Certify\")) {\n const query = new URLSearchParams(this.props.location.search);\n const email = query.get(\"email\");\n\n if (!this.props.managedPeople || !(this.props.managedPeople && this.props.managedPeople.personB.email.toLowerCase() == email.toLowerCase())) {\n this.props.onPerson.getPersonMyPeopleByEmail(email).then(() => {\n if (!this.props.personLoading && this.props.personManagedPeople) {\n this.props.onAuth.myPeopleSetManagedRelationship(this.props.personManagedPeople).then(() => {\n this.setState({ loading: this.props.personLoading });\n });\n } else {\n this.setState({ loading: this.props.personLoading });\n }\n });\n } else {\n this.setState({ loading: this.props.loading });\n }\n } else {\n this.setState({ loading: this.props.loading });\n }\n\n Promise.all([this.props.onCategory.getExtraFrameworkCapabilities(), this.props.onCategory.getExtraFrameworkLevels(), this.props.onCategory.getCategories(false, this.props.language ? this.props.language.id : null), this.props.onEvidence.getEvidenceTypes()]).then(() => {\n this.setState({ categoryLoading: this.props.categoryLoading });\n });\n });\n });\n } else {\n this.props.onAuth.authCheckState().then(() => {\n if (!this.props.currAssessment) {\n this.props.onConfig.getCurrAssessment().then(() => {});\n }\n\n if (window.location.pathname.includes(\"/Manage\") || window.location.pathname.includes(\"/Certify\")) {\n const query = new URLSearchParams(this.props.location.search);\n const email = query.get(\"email\");\n\n if (!this.props.managedPeople || !(this.props.managedPeople && this.props.managedPeople.personB.email.toLowerCase() == email.toLowerCase())) {\n this.props.onPerson.getPersonMyPeopleByEmail(email).then(() => {\n if (!this.props.personLoading && this.props.personManagedPeople) {\n this.props.onAuth.myPeopleSetManagedRelationship(this.props.personManagedPeople).then(() => {\n this.setState({ loading: this.props.personLoading });\n });\n } else {\n this.setState({ loading: this.props.personLoading });\n }\n });\n } else {\n this.setState({ loading: this.props.loading });\n }\n } else {\n this.setState({ loading: this.props.loading });\n }\n\n Promise.all([this.props.onCategory.getExtraFrameworkCapabilities(), this.props.onCategory.getExtraFrameworkLevels(), this.props.onCategory.getCategories(false, this.props.language ? this.props.language.id : null), this.props.onEvidence.getEvidenceTypes()]).then(() => {\n this.setState({ categoryLoading: this.props.categoryLoading });\n });\n });\n }\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.profileUpdatingSuccess !== this.props.profileUpdatingSuccess || prevProps.profileUpdatingError !== this.props.profileUpdatingError || prevProps.udpatedSkills !== this.props.udpatedSkills) {\n this.setState({\n profileUpdatingSuccess: this.props.profileUpdatingSuccess,\n profileUpdatingError: this.props.profileUpdatingError,\n udpatedSkills: this.props.udpatedSkills,\n });\n\n if (this.props.profileUpdatingSuccess && this.props.udpatedSkills) {\n const udpatedSkills = this.props.udpatedSkills;\n const lorProfileResponses = udpatedSkills ? udpatedSkills.lorProfileResponses : [];\n const skillProfileResponses = udpatedSkills ? udpatedSkills.skillProfileResponses : [];\n\n if ((lorProfileResponses && lorProfileResponses.find((it) => it.profileType == \"Endorsed\")) || (skillProfileResponses && skillProfileResponses.find((it) => it.profileType == \"Endorsed\"))) {\n const query = new URLSearchParams(this.props.location.search);\n const email = query.get(\"email\");\n this.props.onPerson.getPersonMyPeopleByEmail(email).then(() => {\n if (!this.props.personLoading && this.props.personManagedPeople) {\n this.props.onAuth.myPeopleSetManagedRelationship(this.props.personManagedPeople);\n }\n\n this.setState({ loading: this.props.personLoading });\n });\n }\n }\n }\n }\n\n componentWillUnmount() {\n this.setState = (state, callback) => {\n return;\n };\n }\n\n selectVersion = (selectedVersion) => {\n this.setState({ selectedVersion });\n };\n\n approveProfile = () => {\n const { managedPeople } = this.props;\n\n if (managedPeople) {\n const managedPeopleAccount = managedPeople.personB.accounts && managedPeople.personB.accounts.length > 0 ? managedPeople.personB.accounts[0] : null;\n if (managedPeopleAccount) {\n const approvedOn = new Date();\n\n const approval = {\n accountId: managedPeopleAccount.id,\n email: managedPeople.personB.email,\n approvedVersion: this.state.selectedVersion,\n comment: this.state.comment,\n approvedBy: localStorage.getItem(\"firstName\") + \" \" + localStorage.getItem(\"lastName\"),\n approvedOn: approvedOn,\n };\n\n this.setState({ approveInProgress: true });\n this.props.onPerson.approveMyPeopleProfile(approval).then(() => {\n if (!this.props.personUpdating) {\n if (this.props.personError) {\n this.generateAlert(\"danger\", this.props.personError.errData.Message);\n } else {\n managedPeopleAccount.approvals = [approval];\n this.props.onAdminPerson.updatePersonSelfAssessedApproved({\n personId: managedPeople.personB.id,\n selfAssessedLastApprovedOn: approvedOn,\n selfAssessedLastApprovedBy: localStorage.getItem(\"firstName\") + \" \" + localStorage.getItem(\"lastName\"),\n selfAssessedLastApprovedById: this.props.personId,\n selfAssessedLastApprovedVersion: this.state.selectedVersion,\n });\n\n this.setState({ showApproveDialog: false });\n }\n }\n\n this.setState({ approveInProgress: this.props.personUpdating });\n });\n }\n }\n };\n\n showApprovalModal = () => {\n this.setState({ showApproveDialog: true });\n };\n\n togleShowApprovalModal = () => {\n const showApproveDialog = this.state.showApproveDialog;\n this.setState({ showApproveDialog: !showApproveDialog });\n };\n\n handleCommentChange = (event) => {\n const { name, value } = event.target;\n\n this.setState({\n comment: value,\n });\n };\n\n renderApprovalDialog = () => {\n return (\n \n \n \n \n {this.state.approveInProgress ? (\n \n
\n ) : (\n \n )}\n \n \n \n \n \n \n \n \n );\n };\n\n step1Clicked = () => {\n this.setState({ forceOpenEditProfile: new Date() });\n };\n\n step2Clicked = () => {\n this.setState({ forceOpenEditJob: new Date() });\n };\n\n step3Clicked = () => {\n this.props.history.push(\"/SfiaProfile/ActionPlan\");\n };\n\n endorsedProfileApproved = () => {\n if (this.props.managedPeople) {\n this.props.onPerson.getPersonMyPeopleByEmail(this.props.managedPeople.personB.email).then(() => {\n this.props.onAuth.myPeopleSetManagedRelationship(this.props.personManagedPeople);\n this.setState({ endorsedProfileApproved: new Date() });\n });\n }\n };\n\n showPostponeModal = () => {\n this.setState({ showPostponeDialog: true });\n };\n\n togleShowPostponeModal = () => {\n const showPostponeDialog = this.state.showPostponeDialog;\n this.setState({ showPostponeDialog: !showPostponeDialog });\n };\n\n handlePostponeCommentChange = (event) => {\n const { name, value } = event.target;\n\n this.setState({\n postponeComment: value,\n });\n };\n\n renderPostponeDialog = () => {\n return (\n \n \n \n \n {this.state.approveInProgress ? (\n \n
\n ) : (\n \n )}\n \n \n this.postponeProfile(\"Revise Skills\")} disabled={!(this.state.postponeComment && this.state.postponeComment != \"\")}>\n \n this.postponeProfile(\"Missing Evidence\")} disabled={!(this.state.postponeComment && this.state.postponeComment != \"\")}>\n \n \n \n \n \n );\n };\n\n postponeProfile = (postponeType) => {\n this.setState({ postponeType, showPostponeDialog: false, showConfirmPostponeDialog: true });\n };\n\n closeConfirmPostponeModal = () => {\n this.setState({ showPostponeDialog: true, showConfirmPostponeDialog: false });\n };\n\n renderConfirmPostponeDialog = () => {\n return (\n \n \n {this.state.approveInProgress ? (\n \n
\n ) : (\n \n )}\n \n \n \n \n \n \n \n \n );\n };\n\n confirmPostponeProfile = () => {\n const { managedPeople } = this.props;\n\n if (managedPeople) {\n const managedPeopleAccount = managedPeople.personB.accounts && managedPeople.personB.accounts.length > 0 ? managedPeople.personB.accounts[0] : null;\n if (managedPeopleAccount) {\n const approval = {\n accountId: managedPeopleAccount.id,\n email: managedPeople.personB.email,\n type: this.state.postponeType,\n comment: this.state.postponeComment,\n };\n\n this.setState({ approveInProgress: true });\n this.props.onPerson.postponeApproveMyPeopleProfile(approval).then(() => {\n if (!this.props.personUpdating) {\n if (this.props.personError) {\n this.generateAlert(\"danger\", this.props.personError.errData.Message);\n } else {\n managedPeopleAccount.isApprovalPostponed = true;\n\n this.props.onAdminPerson.updatePersonSelfAssessedPostPoned({\n personId: managedPeople.personB.id,\n approvalPostponedOn: new Date(),\n approvalPostponedBy: localStorage.getItem(\"firstName\") + \" \" + localStorage.getItem(\"lastName\"),\n approvalPostponedById: this.props.personId,\n approvalPostponedType: this.state.postponeType,\n approvalPostponedComment: this.state.postponeComment,\n });\n\n this.setState({ showConfirmPostponeDialog: false });\n }\n }\n\n this.setState({ approveInProgress: this.props.personUpdating });\n });\n }\n }\n };\n\n handleActionPlanAdded = (addedAction) => {\n this.generateAlert(\"success\", \"Action plan added\");\n this.setState({ newActionPlanAdded: new Date(), addedAction });\n };\n\n handleEvidenceAdded = (addedEvidence) => {\n this.generateAlert(\"success\", \"New Evidence added\");\n };\n\n handleChangeShowHidden = (showHidden) => {\n this.setState({\n showHidden: showHidden,\n });\n };\n\n render() {\n const { managedPeople, account } = this.props;\n let approval = null;\n let managedPeopleAccount = null;\n\n let showApprove = false;\n let profileIsPostponed = false;\n let showEndorser = false;\n let endorsedBy = null;\n let endorsedVersion = null;\n let endorseCreatedAt = null;\n let endorseApprovedAt = null;\n const currAssessment = this.props.currAssessment;\n\n if (account && managedPeople) {\n if (managedPeople.personB.accounts && managedPeople.personB.accounts.length > 0) {\n const managedPeopleAccount = managedPeople.personB.accounts[0];\n if (\n managedPeopleAccount.requireApproval &&\n currAssessment &&\n (managedPeople.relationshipType == \"Admin\" ||\n (currAssessment.allowApprovals == 1 && managedPeople.relationshipType == \"Line Manager\") ||\n (currAssessment.allowApprovals == 2 && (managedPeople.relationshipType == \"Line Manager\" || managedPeople.relationshipType == \"Team Leader\")) ||\n (currAssessment.allowApprovals == 3 && (managedPeople.relationshipType == \"Mentor\" || managedPeople.relationshipType == \"Team Leader\")) ||\n (currAssessment.allowApprovals == 4 && (managedPeople.relationshipType == \"Line Manager\" || managedPeople.relationshipType == \"Mentor\")) ||\n (currAssessment.allowApprovals == 5 && (managedPeople.relationshipType == \"Line Manager\" || managedPeople.relationshipType == \"Team Leader\" || managedPeople.relationshipType == \"Mentor\")))\n ) {\n showApprove = true;\n profileIsPostponed = managedPeopleAccount.isApprovalPostponed;\n }\n }\n\n if ((managedPeople.relationshipType == \"Endorser\" || managedPeople.relationshipType == \"Admin\") && managedPeople.personB.accounts && managedPeople.personB.accounts.length > 0) {\n const managedPeopleAccount = managedPeople.personB.accounts[0];\n if (managedPeopleAccount.latestEndorsedProfileVersion) {\n showEndorser = true;\n endorsedBy = managedPeopleAccount.latestEndorsedProfileBy;\n endorsedVersion = managedPeopleAccount.latestEndorsedProfileVersion;\n endorseCreatedAt = managedPeopleAccount.latestEndorsedProfileCreatedOn;\n endorseApprovedAt = managedPeopleAccount.latestEndorsedProfileApprovedOn;\n }\n } else {\n if (account && account.latestEndorsedProfileVersion) {\n showEndorser = true;\n endorsedBy = account.latestEndorsedProfileBy;\n endorsedVersion = account.latestEndorsedProfileVersion;\n endorseCreatedAt = account.latestEndorsedProfileCreatedOn;\n endorseApprovedAt = account.latestEndorsedProfileApprovedOn;\n }\n }\n } else {\n if (account && currAssessment && currAssessment.enableApprovalRequest) {\n showApprove = true;\n }\n }\n\n if (managedPeople) {\n managedPeopleAccount = managedPeople.personB.accounts && managedPeople.personB.accounts.length > 0 ? managedPeople.personB.accounts[0] : null;\n if (managedPeopleAccount && managedPeopleAccount.approvals && managedPeopleAccount.approvals.length > 0 && managedPeopleAccount.approvals.filter((it) => !it.isFramework && it.approvedVersion == managedPeopleAccount.latestSelfAssessedProfileVersion).length > 0) {\n approval = managedPeopleAccount.approvals.filter((it) => !it.isFramework && it.approvedVersion == managedPeopleAccount.latestSelfAssessedProfileVersion).sort((b, a) => new Date(a.approvedOn) - new Date(b.approvedOn))[0];\n }\n } else {\n if (account && account.approvals && account.approvals.filter((it) => !it.isFramework && it.approvedVersion == account.latestSelfAssessedProfileVersion).length > 0) {\n approval = account.approvals.filter((it) => !it.isFramework && it.approvedVersion == account.latestSelfAssessedProfileVersion).sort((b, a) => new Date(a.approvedOn) - new Date(b.approvedOn))[0];\n }\n\n if (account && account.latestEndorsedProfileVersion) {\n showEndorser = true;\n endorsedBy = account.latestEndorsedProfileBy;\n endorsedVersion = account.latestEndorsedProfileVersion;\n endorseCreatedAt = account.latestEndorsedProfileCreatedOn;\n endorseApprovedAt = account.latestEndorsedProfileApprovedOn;\n }\n }\n\n return (\n \n \n \n \n
\n \n {(this.props.hasPeoples || this.props.isEndorser || this.props.manageEndorsements || this.props.manageSelfAssessed) && managedPeople ? (\n \n {(showApprove || showEndorser) && (\n \n {showApprove && (\n
\n {approval ? (\n \n \n {`v${approval.approvedVersion} ${\n approval.updatedOn || approval.createdOn\n ? approval.updatedOn\n ? `(${new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(approval.updatedOn))}) `\n : approval.createdOn\n ? `(${new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(approval.createdOn))}) `\n : \"\"\n : \"\"\n }`}\n {approval.approvedBy\n ? this.parameterizedString(\n this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SfiaProfileApprovedBy\", \"Approved by {s1} on {s2}\"),\n approval.approvedBy,\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(approval.approvedOn))\n )\n : this.parameterizedString(\n this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SfiaProfileApprovedOn\", \"Approved on {s1}\"),\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(approval.approvedOn))\n )}\n \n \n {approval.comment}\n \n \n ) : managedPeopleAccount && managedPeopleAccount.isApprovalRequested && showApprove ? (\n \n {this.parameterizedString(\n this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SfiaProfileApprovalRequestedOn\", \"Approval requested on {s1}\"),\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(managedPeopleAccount.approvalRequestSentOn))\n )}\n \n ) : (\n \n \n )}\n \n )}\n {showEndorser && (\n
\n \n {`v${endorsedVersion} ${\n endorseCreatedAt || endorseApprovedAt\n ? endorseCreatedAt\n ? `(${new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(endorseCreatedAt))}) `\n : endorseApprovedAt\n ? `(${new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(endorseApprovedAt))}) `\n : \"\"\n : \"\"\n }`}\n {endorsedBy\n ? this.parameterizedString(\n this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SfiaProfileEndorsedBy\", \"Endorsed By {s1} on {s2}\"),\n endorsedBy,\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(endorseApprovedAt))\n )\n : this.parameterizedString(\n this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SfiaProfileEndorsedOn\", \"Endorsed on {s1}\"),\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(endorseApprovedAt))\n )}\n \n \n )}\n
\n \n \n \n \n \n \n
\n \n )}\n \n ) : (\n \n \n \n {`v${approval.approvedVersion} ${\n approval.updatedOn || approval.createdOn\n ? approval.updatedOn\n ? `(${new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(approval.updatedOn))}) `\n : approval.createdOn\n ? `(${new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(approval.createdOn))}) `\n : \"\"\n : \"\"\n }`}\n {approval.approvedBy\n ? this.parameterizedString(\n this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SfiaProfileApprovedBy\", \"Approved by {s1} on {s2}\"),\n approval.approvedBy,\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(approval.approvedOn))\n )\n : this.parameterizedString(\n this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SfiaProfileApprovedOn\", \"Approved on {s1}\"),\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(approval.approvedOn))\n )}\n \n \n {approval.comment}\n \n \n )}\n {showEndorser && (\n \n \n {`v${endorsedVersion} ${\n endorseCreatedAt || endorseApprovedAt\n ? endorseCreatedAt\n ? `(${new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(endorseCreatedAt))}) `\n : endorseApprovedAt\n ? `(${new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(endorseApprovedAt))}) `\n : \"\"\n : \"\"\n }`}\n {endorsedBy\n ? this.parameterizedString(\n this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SfiaProfileEndorsedBy\", \"Endorsed By {s1} on {s2}\"),\n endorsedBy,\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(endorseApprovedAt))\n )\n : this.parameterizedString(\n this.contentTranslator(this.props.contentTranslations, \"SfiaProfile\", \"SfiaProfileEndorsedOn\", \"Endorsed on {s1}\"),\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"2-digit\",\n month: \"short\",\n day: \"numeric\",\n }).format(new Date(endorseApprovedAt))\n )}\n \n \n )}\n \n \n )}\n
\n {!managedPeople && \n ) : (\n \n
\n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n loading: state.auth.loading,\n token: state.auth.token,\n personId: state.auth.personId,\n\n personLoading: state.person.loading,\n account: state.person.account,\n personUpdating: state.person.updating,\n personError: state.person.error,\n\n personManagedPeople: state.person.managedPeople,\n managedPeople: state.auth.managedPeople,\n\n extraFrameworkCapabilities: state.category.extraFrameworkCapabilities,\n extraFrameworkLevels: state.category.extraFrameworkLevels,\n categories: state.category.categories,\n categoryLoading: state.category.loading,\n categoryError: state.category.error,\n\n language: state.language.language,\n contentTranslations: state.content.contentTranslations,\n contentLoading: state.content.loading,\n contentError: state.content.error,\n\n hasPeoples: state.auth.hasPeoples,\n isEndorser: state.auth.isEndorser,\n manageEndorsements: state.auth.manageEndorsements,\n manageSelfAssessed: state.auth.manageSelfAssessed,\n manageSelfProfiles: state.auth.manageSelfProfiles,\n currAssessment: state.config.currAssessment,\n\n profileUpdating: state.skillProfile.profileUpdating,\n profileUpdatingSuccess: state.skillProfile.profileUpdatingSuccess,\n profileUpdatingError: state.skillProfile.profileUpdatingError,\n udpatedSkills: state.skillProfile.udpatedSkills,\n manageEndorsementOperation: state.skillProfile.manageEndorsementOperation,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onPerson: bindActionCreators(personActions, dispatch),\n onCategory: bindActionCreators(categoryActions, dispatch),\n onContent: bindActionCreators(contentActions, dispatch),\n onConfig: bindActionCreators(configActions, dispatch),\n onAdminPerson: bindActionCreators(adminPersonActions, dispatch),\n onEvidence: bindActionCreators(evidenceActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(SkillsProfile);\n","import { dismisAlert, generateAlert } from \"../../../src/utils/alertUtils\";\nimport * as contentActions from \"../../store/actions/contentAction\";\nimport * as authActions from \"../../store/actions/authAction\";\nimport * as jobActions from \"../../store/actions/jobAction\";\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport { ContentWrapperLg } from \"../common/ContentWrapperLg\";\nimport \"./../../custom-my-people.css\";\nimport React from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { Link } from \"react-router-dom\";\nimport { Container, Spinner, Table } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst headerStyle = {\n color: \"#2B2B2B\",\n fontSize: \"22px\",\n fontFamily: \"IBMPlexSans-Bold\",\n};\n\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\n\nclass Requirements extends React.Component {\n static displayName = Requirements.name;\n\n constructor(props) {\n super(props);\n this.connection = null;\n this.state = {\n loading: false,\n contentLoading: true,\n jobs: [],\n alerts: [],\n };\n\n this.initData = this.initData.bind(this);\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n componentDidMount() {\n if (this.props.language) {\n this.props.onContent.getContentTranslations(this.props.language.id, \"SfiaAll-Menu-SfiaProfileMenu-SfiaManage\").then(() => {\n this.setState({ contentLoading: this.props.contentLoading });\n\n this.props.onAuth.authCheckState().then(() => {\n this.setState({ loading: this.props.authLoading });\n this.initData();\n });\n });\n } else {\n this.props.onAuth.authCheckState().then(() => {\n this.setState({ loading: this.props.authLoading });\n this.initData();\n });\n }\n }\n\n componentWillUnmount() {\n this.setState = (state, callback) => {\n return;\n };\n }\n\n initData() {\n this.setState({ loading: true });\n this.props.onJob.getOwnedJobs().then(() => {\n if (!this.props.loading) {\n const jobs = this.props.jobs ? this.props.jobs.sort((a, b) => (`${a.name}` > `${b.name}` ? 1 : -1)) : [];\n this.setState({\n jobs,\n });\n }\n this.setState({ loading: this.props.loading });\n });\n }\n\n render() {\n const { jobs } = this.state;\n\n return (\n \n \n
\n ) : (\n \n \n Manage Requirements\n
\n \n \n \n \n Requirement Name\n \n \n Unique Reference\n \n \n \n \n {this.props.loading && (\n \n \n \n \n )}\n {jobs.map((job, index) => {\n return (\n \n \n \n {job.reference} \n \n );\n })}\n \n
\n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n language: state.language.language,\n contentTranslations: state.content.contentTranslations,\n contentLoading: state.content.loading,\n contentError: state.content.error,\n\n authLoading: state.auth.loading,\n\n loading: state.job.loading,\n error: state.job.error,\n jobs: state.job.jobs,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onAuth: bindActionCreators(authActions, dispatch),\n onJob: bindActionCreators(jobActions, dispatch),\n onContent: bindActionCreators(contentActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Requirements);\n","import ActionPlan from \"../components/actionplan/ActionPlan\";\nimport ManageJobProfile from \"../components/admin/jobs/ManageJobProfile\";\nimport NavSecondary from \"../components/common/NavSecondary\";\nimport DigitalWallet from \"../components/digitalwallet/DigitalWallet\";\nimport Evidence from \"../components/evidence/Evidence\";\nimport EvidenceDownload from \"../components/evidence/EvidenceDownload\";\nimport MyLeaders from \"../components/myleaders/MyLeaders\";\nimport MyPeople from \"../components/mypeople/MyPeople\";\nimport TeamAnalytics from \"../components/mypeople/TeamAnalytics\";\nimport Note from \"../components/note/Note\";\nimport JobsProfile from \"../components/profile/JobsProfile\";\nimport SkillsProfile from \"../components/profile/SkillsProfile\";\nimport Requirements from \"../components/requirements/Requirements\";\nimport React from \"react\";\nimport { isMobile } from \"react-device-detect\";\nimport { connect } from \"react-redux\";\nimport { Route, Switch } from \"react-router-dom\";\nimport { Container, Modal, ModalBody } from \"reactstrap\";\n\nclass ProfilePage extends React.Component {\n static displayName = ProfilePage.name;\n\n constructor(props) {\n super(props);\n this.connection = null;\n this.state = {\n showRotate: false,\n };\n }\n\n componentDidMount() {\n window.addEventListener(\"resize\", this.checkDeviceOrientation);\n this.checkDeviceOrientation();\n }\n\n componentWillUnmount() {\n this.setState = (state, callback) => {\n return;\n };\n }\n\n checkDeviceOrientation = () => {\n if (window.matchMedia(\"(orientation: portrait)\").matches && isMobile) {\n this.setState({ showRotate: true });\n } else if (window.matchMedia(\"(orientation: landscape)\").matches) {\n this.setState({ showRotate: false });\n }\n };\n\n closeRotateModal = () => {\n this.setState({ showRotate: false });\n };\n\n renderRotateNotification = () => {\n return (\n this.closeRotateModal()}>\n \n \n
\n
\n
PLEASE ROTATE YOUR DEVICE \n
\n
(OR CLICK TO CONTINUE) \n
\n \n );\n };\n\n render() {\n return (\n \n {this.renderRotateNotification()}\n \n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n hasRelationships: state.auth.hasRelationships,\n containerConfig: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {};\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ProfilePage);\n","import ErrorHandler from \"./../errorResponseHandler\";\nimport Instance from \"./AxiosInstance\";\n\nexport const axios = Instance.apiInstance();\n\nclass SurveyAPI {\n static getMySurveys(assessmentId) {\n return axios\n .get(`/surveys/mysurveys?assessmentId=${assessmentId}`)\n .then(res => {\n const response = res.data;\n return response;\n })\n .catch(err => {\n throw ErrorHandler(err);\n });\n }\n\n static selectRole(assessmentId, roleId) {\n return axios\n .post(`/surveys/mysurveys/selectrole?assessmentId=${assessmentId}&roleId=${roleId}`)\n .then(res => {\n const response = res.data;\n return response;\n })\n .catch(err => {\n throw ErrorHandler(err);\n });\n }\n\n static getSurveyQuestion(componentGroupId, elementId) {\n return axios\n .get(`/surveys/question?componentGroupId=${componentGroupId}&elementId=${elementId}`)\n .then(res => {\n const response = res.data;\n return response;\n })\n .catch(err => {\n throw ErrorHandler(err);\n });\n }\n\n static answerQuestion(body) {\n return axios\n .post(`/surveys/question/answer`, body)\n .then(res => {\n const response = res.data;\n return response;\n })\n .catch(err => {\n throw ErrorHandler(err);\n });\n }\n\n static skipQuestion(body) {\n return axios\n .post(`/surveys/question/skip`, body)\n .then(res => {\n const response = res.data;\n return response;\n })\n .catch(err => {\n throw ErrorHandler(err);\n });\n }\n\n static completeSurvey() {\n return axios\n .post(`/surveys/mysurveys/complete`)\n .then(res => {\n const response = res.data;\n return response;\n })\n .catch(err => {\n throw ErrorHandler(err);\n });\n }\n\n static resetMySurvey() {\n return axios\n .post(`/surveys/mysurveys/reset`)\n .then(res => {\n const response = res.data;\n return response;\n })\n .catch(err => {\n throw ErrorHandler(err);\n });\n }\n}\n\nexport default SurveyAPI;","import * as actionTypes from \"./actionTypes\";\n\nimport SurveyAPI from \"./../../common/api/service/SurveyService\";\n\nexport const getMySurveysStart = () => {\n return {\n type: actionTypes.GET_MY_SURVEYS_START,\n };\n};\n\nexport const getMySurveysSuccess = (surveys, surveyRoles) => {\n return {\n type: actionTypes.GET_MY_SURVEYS_SUCCESS,\n surveys,\n surveyRoles\n };\n};\n\nexport const getMySurveysFail = error => {\n return {\n type: actionTypes.GET_MY_SURVEYS_FAIL,\n error: error,\n };\n};\n\nexport const getMySurveys = (assessmentId) => {\n return dispatch => {\n dispatch(getMySurveysStart());\n\n return SurveyAPI.getMySurveys(assessmentId)\n .then(res => {\n if (res.type && res.type == \"Role Selection\") {\n dispatch(getMySurveysSuccess([], res.roles));\n } else {\n dispatch(getMySurveysSuccess(res, []));\n }\n })\n .catch(err => {\n dispatch(getMySurveysFail(err));\n });\n };\n};\n\nexport const mySurveySelectRoleStart = () => {\n return {\n type: actionTypes.MY_SURVEYS_SELECT_ROLE_START,\n };\n};\n\nexport const mySurveySelectRoleSuccess = () => {\n return {\n type: actionTypes.MY_SURVEYS_SELECT_ROLE_SUCCESS,\n };\n};\n\nexport const mySurveySelectRoleFail = error => {\n return {\n type: actionTypes.MY_SURVEYS_SELECT_ROLE_FAIL,\n error: error,\n };\n};\n\nexport const mySurveySelectRole = (assessmentId, roleId) => {\n return dispatch => {\n dispatch(mySurveySelectRoleStart());\n\n return SurveyAPI.selectRole(assessmentId, roleId)\n .then(res => {\n dispatch(mySurveySelectRoleSuccess());\n })\n .catch(err => {\n dispatch(mySurveySelectRoleFail(err));\n });\n };\n};\n\nexport const getSurveyQuestionStart = () => {\n return {\n type: actionTypes.GET_SURVEY_QUESTION_START,\n };\n};\n\nexport const getSurveyQuestionSuccess = (question) => {\n return {\n type: actionTypes.GET_SURVEY_QUESTION_SUCCESS,\n question\n };\n};\n\nexport const getSurveyQuestionFail = error => {\n return {\n type: actionTypes.GET_SURVEY_QUESTION_FAIL,\n error: error,\n };\n};\n\nexport const getSurveyQuestion = (componentGroupId, elementId) => {\n return dispatch => {\n dispatch(getSurveyQuestionStart());\n\n return SurveyAPI.getSurveyQuestion(componentGroupId, elementId)\n .then(res => {\n dispatch(getSurveyQuestionSuccess(res));\n })\n .catch(err => {\n dispatch(getSurveyQuestionFail(err));\n });\n };\n};\n\nexport const answerQuestionStart = () => {\n return {\n type: actionTypes.ANSWER_QUESTION_START,\n };\n};\n\nexport const answerQuestionSuccess = (answerResult) => {\n return {\n type: actionTypes.ANSWER_QUESTION_SUCCESS,\n answerResult\n };\n};\n\nexport const answerQuestionFail = error => {\n return {\n type: actionTypes.ANSWER_QUESTION_FAIL,\n error: error,\n };\n};\n\nexport const answerQuestion = (answer) => {\n return dispatch => {\n dispatch(answerQuestionStart());\n\n return SurveyAPI.answerQuestion(answer)\n .then(res => {\n dispatch(answerQuestionSuccess(res));\n })\n .catch(err => {\n dispatch(answerQuestionFail(err));\n });\n };\n};\n\nexport const skipQuestionStart = () => {\n return {\n type: actionTypes.SKIP_QUESTION_START,\n };\n};\n\nexport const skipQuestionSuccess = (answerResult) => {\n return {\n type: actionTypes.SKIP_QUESTION_SUCCESS,\n answerResult\n };\n};\n\nexport const skipQuestionFail = error => {\n return {\n type: actionTypes.SKIP_QUESTION_FAIL,\n error: error,\n };\n};\n\nexport const skipQuestion = (answer) => {\n return dispatch => {\n dispatch(skipQuestionStart());\n\n return SurveyAPI.skipQuestion(answer)\n .then(res => {\n dispatch(skipQuestionSuccess(res));\n })\n .catch(err => {\n dispatch(skipQuestionFail(err));\n });\n };\n};\n\nexport const completeMySurveyStart = () => {\n return {\n type: actionTypes.COMPLETE_MY_SURVEYS_START,\n };\n};\n\nexport const completeMySurveySuccess = () => {\n return {\n type: actionTypes.COMPLETE_MY_SURVEYS_SUCCESS,\n };\n};\n\nexport const completeMySurveyFail = error => {\n return {\n type: actionTypes.COMPLETE_MY_SURVEYS_FAIL,\n error: error,\n };\n};\n\nexport const completeMySurvey = () => {\n return dispatch => {\n dispatch(completeMySurveyStart());\n\n return SurveyAPI.completeSurvey()\n .then(res => {\n dispatch(completeMySurveySuccess(res));\n })\n .catch(err => {\n dispatch(completeMySurveyFail(err));\n });\n };\n};\n\nexport const resetMySurveyStart = () => {\n return {\n type: actionTypes.RESET_MY_SURVEYS_START,\n };\n};\n\nexport const resetMySurveySuccess = () => {\n return {\n type: actionTypes.RESET_MY_SURVEYS_SUCCESS,\n };\n};\n\nexport const resetMySurveyFail = error => {\n return {\n type: actionTypes.RESET_MY_SURVEYS_FAIL,\n error: error,\n };\n};\n\nexport const resetMySurvey = () => {\n return dispatch => {\n dispatch(resetMySurveyStart());\n\n return SurveyAPI.resetMySurvey()\n .then(res => {\n dispatch(resetMySurveySuccess(res));\n })\n .catch(err => {\n dispatch(resetMySurveyFail(err));\n });\n };\n};","import * as authActions from \"../../store/actions/authAction\";\nimport * as surveyActions from \"../../store/actions/surveyAction\";\nimport { ContentWrapper } from \"../common/ContentWrapper\";\nimport React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Col, Container, Row, Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\nimport { Userpilot } from \"userpilot\";\n\nconst userPilotToken = process.env.REACT_APP_USER_PILOT_TOKEN;\nUserpilot.initialize(userPilotToken);\n\nclass Survey extends Component {\n static displayName = Survey.name;\n\n constructor(props) {\n super(props);\n this.state = {\n loading: true,\n invalidToken: false,\n surveys: [],\n };\n }\n\n componentDidMount() {\n const query = new URLSearchParams(this.props.location.search);\n const token = query.get(\"token\");\n\n const isAuthenticated = this.props.isAuthenticated;\n\n if (!isAuthenticated) {\n if (!token) {\n this.props.history.push(\"/\");\n } else {\n this.props.onAuth.signInUseToken(token).then(() => {\n if (!this.props.loading) {\n if (!this.props.error) {\n Userpilot.identify(this.props.loginResult.personId, { name: `${this.props.loginResult.firstName} ${this.props.loginResult.lastName}`, email: this.props.loginResult.email });\n\n Promise.resolve(\n this.props.onAuth.signInSuccess(\n this.props.loginResult.token,\n this.props.email,\n this.props.assessmentId,\n this.props.jobProfileReportFormat,\n this.props.selfAssessedProfileReportFormat,\n this.props.hasPeoples,\n this.props.isEndorser,\n this.props.authMode,\n this.props.loginResult.personId,\n this.props.ownJobs,\n this.props.manageEndorsements,\n this.props.manageCertifications,\n this.props.loginWithMembee,\n this.props.loginWithTeams,\n this.props.receiveLicenseNotification,\n this.props.lastActiveUserNotification,\n this.props.allowSkipSurvey,\n this.props.manageSelfAssessed,\n this.props.manageSelfProfiles,\n this.props.hasRelationships\n )\n ).then(() => {\n this.props.history.push(`/survey/assessment/${this.props.assessmentId}`);\n });\n } else {\n this.props.history.push(`/login`);\n }\n }\n this.setState({ loading: this.props.loading });\n });\n }\n } else {\n this.setState({ loading: false });\n this.props.history.push(`/survey/assessment/${this.props.assessmentId}`);\n }\n }\n\n invalidToken() {\n return (\n \n \n \n \n Error!!! Invalid authentication token\n \n \n
\n \n \n );\n }\n\n render() {\n return (\n \n {this.state.loading ? (\n
\n \n \n \n \n
\n
\n ) : (\n
{!this.props.isAuthenticated && this.invalidToken()} \n )}\n
\n \n \n \n \n \n \n \n \n \n \n \n );\n }\n\n renderTableBody(surveys) {\n const rows = surveys.map((row, index) => {\n const completed = row.elements && row.elements.length > 0 ? (row.elements.filter((it) => !it.assessmentPersonResultId || !(it.valueId || (it.values && it.values.length > 0))).length > 0 ? false : true) : true;\n\n const started = row.elements && row.elements.length > 0 ? (row.elements.filter((it) => it.assessmentPersonResultId && (it.valueId || (it.values && it.values.length > 0))).length > 0 ? true : false) : false;\n\n return (\n \n {row.moduleName} \n \n \n {row.elements ? row.elements.length : 0} \n {row.timeEstimate} \n \n this.selectSurvey(row)}>\n {completed ? (\n \n \n \n \n );\n });\n\n return {rows} ;\n }\n\n changeRating = (newRating) => {\n this.setState({ surveyRating: newRating });\n };\n\n handleChangeComment = (event) => {\n const { value } = event.target;\n this.setState({ surveyComment: value });\n };\n\n renderRoleSelection() {\n const { surveyRoles } = this.props;\n\n const rows = surveyRoles.map((role, index) => {\n return (\n \n {index === 0 ? \"\" :
}\n
\n \n \n \n this.props.selectRole(role.id)}\n >\n {this.props.inProgress && this.props.selectedRoleId && this.props.selectedRoleId == role.id ? (\n
\n
\n {this.modalConfirmTutorial()}\n {isComplete && (\n \n \n \n \n {!this.props.loginWithTeams ?
\n \n
\n \n
\n \n \n
\n \n )}\n {!this.props.loginWithTeams ? (\n \n Create account Please create an account to enable access to view and maintain your Skills Profile
\"),\n }}\n >\n \n \n this.props.createAccount(\n showSurveyRating\n ? {\n postRating: true,\n surveyRating: this.state.surveyRating >= 0 ? this.state.surveyRating : null,\n surveyComment: this.state.surveyComment,\n }\n : {\n postRating: false,\n }\n )\n }\n >\n \n this.props.submitRating(\n showSurveyRating\n ? {\n postRating: true,\n surveyRating: this.state.surveyRating >= 0 ? this.state.surveyRating : null,\n surveyComment: this.state.surveyComment,\n }\n : {\n postRating: false,\n }\n )\n }\n >\n {`Proceed with your ${this.props.defaultCompany.name} account`}\n \n )}\n
\n \n ) : (\n \n \n this.props.submitRatingTeams(\n showSurveyRating\n ? {\n postRating: true,\n surveyRating: this.state.surveyRating >= 0 ? this.state.surveyRating : null,\n surveyComment: this.state.surveyComment,\n }\n : {\n postRating: false,\n }\n )\n }\n disabled={this.props.loading}\n >\n {this.props.loading ? \n )}\n \n
\n \n \n )}\n {surveys && surveys.length > 0 && (\n \n \n \n \n {assessmentName}\n \n \n {!isComplete && (\n this.props.resetSurvey()}\n >\n \n \n {completionDateTarget &&\n new Intl.DateTimeFormat(\"en-GB\", {\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n }).format(new Date(completionDateTarget))}\n \n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {this.renderTableBody(surveys)}\n
\n \n )}\n {surveyRoles && surveyRoles.length > 0 && (\n \n \n best matches your experience.Assessment Guidance NOTE: On making your selection you will immediately be presented with your tailored self-assessment surveys.
\n {this.renderRoleSelection()}\n \n )}\n \n );\n }\n}\n\nexport default withRouter(ListSurvey);\n","import { Col, Container, Row } from 'reactstrap';\nimport React, { Component } from 'react';\n\nimport ContentTranslator from '../translator/ContentTranslator';\nimport { contentTranslator } from \"../../utils/translatorUtils\";\nimport { parameterizedString } from \"../../utils/stringUtils\";\n\nconst stepAssessmentStyle = {\n border: 1,\n width: '810px',\n height: '100%',\n backgroundColor: '#EFEFEF',\n paddingLeft: '82px',\n paddingRight: '82px',\n paddingTop: '33px',\n paddingBottom: '40px',\n marginBottom: '10px',\n borderRadius: '20px',\n}\n\nconst stepHeaderStyle = {\n fontFamily: 'IBMPlexSans-Bold',\n fontSize: 20,\n width: '394px'\n}\n\nconst stepInfoStyle = {\n fontFamily: 'IBMPlexSans-Light',\n fontSize: 11,\n width: '135px'\n}\n\nexport class StepAssessment extends Component {\n static displayName = StepAssessment.name;\n\n constructor(props) {\n super(props);\n this.state = {\n name: this.props.name,\n }\n\n this.contentTranslator = contentTranslator.bind(this);\n this.parameterizedString = parameterizedString.bind(this);\n }\n\n render() {\n const isComplete = this.props.isComplete;\n\n return (\n \n \n \n \n \n \n \n
\n \n
\n \n \n \n \n \n
\n \n
\n \n \n \n \n \n
\n \n
\n \n \n
\n \n \n );\n }\n}","import * as authActions from \"../../store/actions/authAction\";\nimport * as surveyActions from \"../../store/actions/surveyAction\";\nimport { dismisAlert, generateAlert } from \"../../utils/alertUtils\";\nimport { ContentWrapper } from \"../common/ContentWrapper\";\nimport ContentTranslator from \"../translator/ContentTranslator\";\nimport ListSurvey from \"./ListSurvey\";\nimport { StepAssessment } from \"./StepAssessment\";\nimport React, { Component } from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport { connect } from \"react-redux\";\nimport { Col, Container, Row, Spinner } from \"reactstrap\";\nimport { Button } from \"reactstrap\";\nimport { Form } from \"reactstrap\";\nimport { FormGroup } from \"reactstrap\";\nimport { Label } from \"reactstrap\";\nimport { Modal } from \"reactstrap\";\nimport { ModalBody } from \"reactstrap\";\nimport { ModalFooter } from \"reactstrap\";\nimport { ModalHeader } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\nclass SurveyAssessment extends Component {\n static displayName = SurveyAssessment.name;\n\n constructor(props) {\n super(props);\n this.state = {\n loading: true,\n invalidToken: false,\n surveys: [],\n surveyRoles: [],\n passwordRequestSent: false,\n assessmentId: null,\n selectedRoleId: null,\n alerts: [],\n showSelectRoleConfirmationDialog: false,\n answerLoading: false,\n showResetSurveyConfirmationDialog: false,\n };\n\n this.generateAlert = generateAlert.bind(this);\n this.dismisAlert = dismisAlert.bind(this);\n }\n\n componentDidMount() {\n const isAuthenticated = this.props.isAuthenticated;\n\n if (!isAuthenticated) {\n this.props.history.push(\"/\");\n } else {\n this.setState({ loading: false });\n const {\n match: { params },\n } = this.props;\n\n var assessmentId = params.assessmentId;\n this.setState({ assessmentId });\n this.initSurveyDatas(assessmentId);\n }\n }\n\n componentWillUnmount() {\n this.setState = (state, callback) => {\n return;\n };\n }\n\n initSurveyDatas = (assessmentId) => {\n this.setState({ loading: true });\n this.props.onSurvey.getMySurveys(assessmentId).then(() => {\n if (!this.props.loadingSurvey) {\n if (!this.props.errorSurvey) {\n if (this.props.surveys && this.props.surveys.length > 0) {\n const unAnswerred = this.props.surveys.filter((it) => it.elements.some((it) => !(it.assessmentPersonResultId && (it.valueId || (it.values && it.values.length > 0)))));\n if (unAnswerred.length == 0) {\n this.props.onSurvey.completeMySurvey();\n }\n }\n\n this.setState({ surveys: this.props.surveys, surveyRoles: this.props.surveyRoles });\n } else {\n this.generateAlert(\"danger\", this.props.errorSurvey.errData.Message);\n }\n }\n this.setState({ loading: this.props.loadingSurvey });\n });\n };\n\n createAccount = (surveyRating) => {\n this.setState({ loading: true });\n this.props.onAuth.createAccount(surveyRating).then(() => {\n if (!this.props.loading) {\n if (!this.props.error) {\n this.setState({ passwordRequestSent: true });\n this.props.history.push(\"/resetpasswordconfirmation\");\n }\n }\n this.setState({ loading: this.props.loading });\n });\n };\n\n submitRating = (surveyRating) => {\n this.setState({ loading: true });\n this.props.onAuth.submitRating(surveyRating).then(() => {\n if (!this.props.loading) {\n if (!this.props.error) {\n this.props.onAuth.authLogout().then(() => {\n window.location = \"/sso/login\";\n });\n } else {\n this.generateAlert(\"danger\", this.props.error.errData.Message);\n }\n }\n this.setState({ loading: this.props.loading });\n });\n };\n\n submitRatingTeams = (surveyRating) => {\n this.setState({ loading: true });\n this.props.onAuth.submitRatingTeams(surveyRating).then(() => {\n if (!this.props.loading) {\n if (!this.props.error) {\n this.props.onAuth.forceRefreshToken().then(() => {\n window.location = \"/SfiaProfile\";\n });\n } else {\n this.generateAlert(\"danger\", this.props.error.errData.Message);\n }\n }\n this.setState({ loading: this.props.loading });\n });\n };\n\n selectRole = (roleId) => {\n this.setState({ selectedRoleId: roleId, showSelectRoleConfirmationDialog: true });\n };\n\n togleSelectRoleConfirmationDialog = () => {\n const showSelectRoleConfirmationDialog = this.state.showSelectRoleConfirmationDialog;\n this.setState({ showSelectRoleConfirmationDialog: !showSelectRoleConfirmationDialog });\n };\n\n handleConfimRoleSelection = () => {\n const roleId = this.state.selectedRoleId;\n const assessmentId = this.state.assessmentId;\n\n this.setState({ answerLoading: true });\n\n this.props.onSurvey.mySurveySelectRole(assessmentId, roleId).then(() => {\n if (!this.props.answerLoading) {\n if (!this.props.errorSurvey) {\n this.setState({ showSelectRoleConfirmationDialog: false });\n this.initSurveyDatas(assessmentId);\n }\n }\n\n this.setState({ answerLoading: this.props.answerLoading });\n });\n };\n\n renderSelectRoleConfirmation = () => {\n return (\n \n \n \n \n \n \n \n {\n this.handleConfimRoleSelection();\n }}\n disabled={this.state.answerLoading}\n >\n \n \n \n \n );\n };\n\n resetSurvey = () => {\n this.setState({ showResetSurveyConfirmationDialog: true });\n };\n\n togleResetSurveyConfirmation = () => {\n const showResetSurveyConfirmationDialog = this.state.showResetSurveyConfirmationDialog;\n this.setState({ showResetSurveyConfirmationDialog: !showResetSurveyConfirmationDialog });\n };\n\n handleConfimResetSurvey = () => {\n const assessmentId = this.state.assessmentId;\n this.setState({ answerLoading: true });\n\n this.props.onSurvey.resetMySurvey().then(() => {\n if (!this.props.answerLoading) {\n if (!this.props.errorSurvey) {\n this.setState({ showResetSurveyConfirmationDialog: false });\n this.initSurveyDatas(assessmentId);\n } else {\n this.generateAlert(\"danger\", this.props.errorSurvey.errData.Message);\n }\n }\n\n this.setState({ answerLoading: this.props.answerLoading });\n });\n };\n\n renderResetSurveyConfirmation = () => {\n return (\n \n \n \n \n \n \n \n {\n this.handleConfimResetSurvey();\n }}\n disabled={this.state.answerLoading}\n >\n \n \n \n \n );\n };\n\n render() {\n let firstName = localStorage.getItem(\"firstName\");\n\n let isComplete = false;\n\n if (this.state.surveys && this.state.surveys.length > 0) {\n const unAnswerred = this.state.surveys.filter((it) => it.elements.some((it) => !(it.assessmentPersonResultId && (it.valueId || (it.values && it.values.length > 0)))));\n if (unAnswerred.length == 0) {\n isComplete = true;\n }\n }\n\n return (\n \n
\n {this.renderSelectRoleConfirmation()}\n {this.renderResetSurveyConfirmation()}\n {this.state.loading ? (\n
\n \n \n \n \n
\n
\n ) : (\n
\n {this.props.isAuthenticated && (\n \n {this.state.passwordRequestSent ? (\n \n \n \n \n \n Account Confirmation\n \n \n We have sent you an email with a link to setup your password and access your profile.\n
\n \n \n \n ) : (\n \n \n )}\n \n )}\n \n )}\n
\n {index === 0 ? \"\" :
}\n
\n \n {row.name != \"\" ? (\n
\n \n this.props.selectAnswer(row.id, this.state.stringVal)}>\n {this.props.inProgress && this.props.selectedAnswerId && this.props.selectedAnswerId == row.id ? \n )}\n {this.props.resultType == \"Multiple\" && (\n \n it.valueId == row.id)} disabled={this.props.inProgress} type=\"checkbox\" id={`chk${row.id}`} onChange={() => this.handleSelect(row.id, row.stringVal)} />\n
\n )}\n \n
\n
\n {question &&\n (question.next ? (\n \n \n \n \n \n
\n ) : (\n \n this.prevQuestion()}>\n \n )}\n \n \n \n \n \n
\n ))}\n \n \n
\n \n
\n \n \n \n {question.componentGroupDescription}\n \n
\n )}\n \n
\n \n
}\n
\n \n this.selectAnswer(question.values[0].id)} disabled={this.state.inProgress}>\n {question.next ? \n )}\n \n {this.state.question.next && this.state.question.allowSkip && (\n this.skipSurveyConfirmation()}\n disabled={this.state.inProgress}\n dangerouslySetInnerHTML={{\n __html: this.contentTranslator(this.props.contentTranslations, \"Question\", \"QuestionSkipSurvey\", \"Skip entire survey.
\n \n );\n };\n\n surveyAnswer = () => {\n const question = this.state.question;\n\n return (\n \n \n this.prevQuestion()} disabled={this.state.inProgress}>\n \n )}\n {question && question.assessmentPersonResultId != null && question.next && (\n this.nextQuestion()} disabled={this.state.inProgress}>\n \n )}\n \n \n \n \n )}\n {question && question.allowSkip && (\n this.skipSurveyConfirmation()} disabled={this.state.inProgress}>\n \n )}\n \n
\n \n \n {question.numberOfAnswer}/{question.numberOfQuestion} Questions */}\n
\n \n
\n \n Q: ${this.contentTranslator(this.props.contentTranslations, \"Elements\", `${question.elementId} Label`, question.elementLabel)}` }} />}\n
\n {question && question.enableComments && (\n \n
\n )}\n {question && (\n \n \n \n )}\n {question && question.resultType == \"Multiple\" && (\n \n \n this.submitAnswers()}>\n {this.props.inProgress ? \n \n
\n
\n )}\n \n );\n };\n\n handleChangeComment = (event) => {\n const { value } = event.target;\n this.setState({ comment: value });\n };\n\n nextQuestion = () => {\n const question = this.state.question;\n this.props.history.push(`/survey/question/${question.componentGroupId}/${question.next.elementId}`);\n };\n\n prevQuestion = () => {\n const question = this.state.question;\n this.props.history.push(`/survey/question/${question.componentGroupId}/${question.previous.elementId}`);\n };\n\n selectAnswer = (valueId, stringVal) => {\n const { startTime, question, comment } = this.state;\n\n var curTime = new Date();\n var dif = startTime.getTime() - curTime.getTime();\n var Seconds_from_T1_to_T2 = dif / 1000;\n var timeTaken = Math.round(Math.abs(Seconds_from_T1_to_T2));\n\n const answer = {\n componentGroupId: question.componentGroupId,\n elementId: question.elementId,\n valueId,\n timeTaken,\n comment,\n stringVal,\n resultType: \"Single\",\n };\n\n this.setState({ inProgress: true, selectedAnswerId: valueId });\n\n this.props.onSurvey.answerQuestion(answer).then(() => {\n if (!this.props.answerLoading) {\n if (!this.props.error && this.props.answerResult) {\n this.setState({ comment: \"\" });\n\n if (this.props.answerResult.status == \"In Progress\") {\n this.props.history.push(`/survey/question/${this.props.answerResult.componentGroupId}/${this.props.answerResult.nextElementId}`);\n } else if (this.props.answerResult.status == \"Completed\") {\n if (this.props.answerResult.surveyIsComplete) {\n this.props.onSurvey.completeMySurvey();\n }\n this.props.history.push(`/survey/assessment/${question.assessmentId}`);\n }\n }\n }\n this.setState({ inProgress: this.props.answerLoading });\n });\n };\n\n selectAnswers = (selectedValues) => {\n this.setState({ selectedValues: [...selectedValues] });\n };\n\n submitAnswers = () => {\n const { startTime, question, comment, selectedValues } = this.state;\n\n if (selectedValues.length > 0) {\n var curTime = new Date();\n var dif = startTime.getTime() - curTime.getTime();\n var Seconds_from_T1_to_T2 = dif / 1000;\n var timeTaken = Math.round(Math.abs(Seconds_from_T1_to_T2));\n\n const answer = {\n componentGroupId: question.componentGroupId,\n elementId: question.elementId,\n timeTaken,\n comment,\n resultType: \"Multiple\",\n values: selectedValues,\n };\n\n this.setState({ inProgress: true });\n\n this.props.onSurvey.answerQuestion(answer).then(() => {\n if (!this.props.answerLoading) {\n if (!this.props.error && this.props.answerResult) {\n this.setState({ comment: \"\" });\n\n if (this.props.answerResult.status == \"In Progress\") {\n this.props.history.push(`/survey/question/${this.props.answerResult.componentGroupId}/${this.props.answerResult.nextElementId}`);\n } else if (this.props.answerResult.status == \"Completed\") {\n if (this.props.answerResult.surveyIsComplete) {\n this.props.onSurvey.completeMySurvey();\n }\n this.props.history.push(`/survey/assessment/${question.assessmentId}`);\n }\n }\n }\n this.setState({ inProgress: this.props.answerLoading });\n });\n }\n };\n\n skipSurveyConfirmation = () => {\n this.setState({ showSkipConfirmation: true });\n };\n\n togleSkipSurveyConfirmation = () => {\n const showSkipConfirmation = this.state.showSkipConfirmation;\n this.setState({ showSkipConfirmation: !showSkipConfirmation });\n };\n\n skipSurvey = () => {\n const { question } = this.state;\n\n this.setState({ showSkipConfirmation: false });\n\n const answer = {\n componentGroupId: question.componentGroupId,\n elementId: question.elementId,\n };\n\n this.setState({ inProgress: true });\n\n this.props.onSurvey.skipQuestion(answer).then(() => {\n if (!this.props.answerLoading) {\n if (!this.props.error && this.props.answerResult) {\n this.setState({ comment: \"\" });\n\n if (this.props.answerResult.status == \"In Progress\") {\n this.props.history.push(`/survey/question/${this.props.answerResult.componentGroupId}/${this.props.answerResult.nextElementId}`);\n } else if (this.props.answerResult.status == \"Completed\") {\n if (this.props.answerResult.surveyIsComplete) {\n this.props.onSurvey.completeMySurvey();\n }\n this.props.history.push(`/survey/assessment/${question.assessmentId}`);\n }\n }\n }\n this.setState({ inProgress: this.props.answerLoading });\n });\n };\n\n render() {\n const question = this.state.question;\n\n return (\n \n
\n {this.state.loading ? (\n
\n \n \n \n \n
\n
\n ) : (\n
\n \n \n \n \n \n \n \n \n \n \n \n \n {question ? (\n (question.values.length == 1 && question.values[0].name == \"Continue\") || (question.values.length == 2 && question.values[0].stringVal == \"Continue\" && question.values[1].stringVal == \"Skip\") || (question.values.length == 1 && question.values[0].stringVal == \"Next\") ? (\n this.surveyDesc()\n ) : (\n this.surveyAnswer()\n )\n ) : (\n \n \n \n \n \n \n
\n \n )}\n \n )}\n
this.closeRotateModal()}>\n \n \n
\n
\n
PLEASE ROTATE YOUR DEVICE \n
\n
(OR CLICK TO CONTINUE) \n
\n \n );\n };\n\n render() {\n return (\n \n {this.renderRotateNotification()}\n {this.state.contentLoading ? (\n \n \n
\n \n
\n ) : (\n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n language: state.language.language,\n contentTranslations: state.content.contentTranslations,\n contentLoading: state.content.loading,\n contentError: state.content.error,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n onContent: bindActionCreators(contentActions, dispatch),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(SelfAssessmentPage);\n","import { Layout } from \"../components/Layout\";\nimport { ContentWrapper } from \"../components/common/ContentWrapper\";\nimport ContentTranslator from \"../components/translator/ContentTranslator\";\nimport { contentTranslator } from \"../utils/translatorUtils\";\nimport React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Col, Container, Row } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\n\nclass ThankYou extends Component {\n static displayName = ThankYou.name;\n\n constructor(props) {\n super(props);\n this.connection = null;\n this.state = {};\n this.contentTranslator = contentTranslator.bind(this);\n }\n\n render() {\n const containerConfig = this.props.containerConfig;\n\n return (\n \n \n
\n \n \n \", \"\").replaceAll(\"\", \" \"),\n }}\n >
\n \n
\n \n
If you haven't received it within 5 minutes please check junk/clutter folders.
After completing your self-assessment you will:
\"\n ),\n }}\n >\n
\n \n \n
\n )}\n \n \n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n contentTranslations: state.content.contentTranslations,\n containerConfig: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {};\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ThankYou);\n","import BadgeRequestAPI from \"../common/api/service/BadgeRequestService\";\nimport BadgesList from \"../components/digitalwallet/BadgesList\";\nimport SkillDetailsModal from \"../components/digitalwallet/Modal/SkillDetailsModal\";\nimport { lightenColor } from \"../utils/functions\";\nimport { HourglassOutlined, MessageOutlined } from \"@ant-design/icons\";\nimport { Typography, Empty, Switch as SwitchComponent, message, Avatar } from \"antd\";\nimport React, { useState, useEffect, useMemo } from \"react\";\nimport { Route, Switch, useParams } from \"react-router\";\nimport dayjs from \"dayjs\";\n\nconst styles = {\n container: {\n width: \"60vw\",\n margin: \"0 auto\",\n padding: \"0 0 50px 0\",\n },\n HeaderContainer: {\n borderRadius: 20,\n backgroundColor: \"#ecf0f1\",\n padding: \"30px 40px\",\n marginTop: 30,\n display: \"flex\",\n flexDirection: \"column\",\n gap: 20,\n marginBottom: 25,\n },\n ContentContainer: {},\n ownerInfoContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\"\n },\n};\n\nconst createSkillBadgeImage = (skill, skill_code, skill_type, skill_level, badgeProvider) => {\n if (badgeProvider && badgeProvider == \"DSA\" ){\n return `${process.env.REACT_APP_AZURE_STORAGE_BADGE_DSA_IMAGE_BASE_URL}${skill_type} - ${skill.replaceAll(\"/\", \" \")} - Level ${skill_level}.png`;\n }else{\n return `${process.env.REACT_APP_AZURE_STORAGE_BADGE_IMAGE_BASE_URL}${skill_code}${skill_level}${skill_type}.png`;\n }\n};\n\nconst findSkillsCode = (objArr, code) => {\n const found = _.find(objArr, (obj) => {\n return _.some(obj.subCategories, (sub) => {\n return _.some(sub.skills, (skill) => {\n return skill.skillsCode === code;\n });\n });\n });\n\n return found;\n};\n\nfunction findSkills(objects, skill, payload) {\n let result = null;\n _.forEach(objects, (obj) => {\n _.forEach(obj.subCategories, (sub) => {\n const child = _.find(sub.skills, { skillsCode: skill.skillCode });\n if (child) {\n const { id, colour, name, sfiaVersion } = obj;\n const { description, level } = child.levels.find(\n (filteredSkill) => filteredSkill.level === skill.level\n );\n result = {\n ...payload,\n id,\n categoryName: name,\n color: colour,\n skillCode: child.skillsCode,\n description,\n level,\n sfiaVersion,\n skillName: child.name,\n skillType: skill.skillType,\n };\n return false;\n }\n });\n if (result) {\n return false;\n }\n });\n return result;\n}\nconst { Text } = Typography;\nconst WalletComponent = () => {\n const [badges, setBadges] = useState();\n const [modalData, setModalData] = useState();\n const [showByCategory, setShowByCategory] = useState(false);\n const [isModalOpen, setModalOpen] = useState(false);\n const [walletInfo, setWalletInfo] = useState();\n const [personInfo, setPersonInfo] = useState();\n\n const { id } = useParams();\n\n const showModal = (payload) => {\n setModalData(payload);\n };\n\n const handleOk = () => {\n setModalOpen(false);\n };\n\n const handleCancel = () => {\n setModalOpen(false);\n setModalData(undefined);\n };\n\n const fussionBadgesData = useMemo(() => {\n if (badges) {\n return Object.keys(badges).reduce(\n (accumulator, currentValue) =>\n accumulator.concat(badges?.[currentValue]?.data),\n []\n );\n }\n return [];\n }, [badges]);\n\n useEffect(() => {\n if (modalData) {\n setModalOpen(true);\n }\n }, [modalData]);\n\n useEffect(() => {\n const fetchBadges = async () => {\n\n try {\n const badgeWalletData = await BadgeRequestAPI.getBadgeWallet(id);\n const listOfCategories = badgeWalletData.categoryResponse;\n setPersonInfo(badgeWalletData.person)\n const mappedFetchedData = badgeWalletData.evidenceFileResponse.reduce(\n (acc, item) => {\n const accumulator = acc;\n const { label, createdOn, expiryOn, link, badgeProvider, skillLevels } = item;\n accumulator.push({\n label,\n createdOn,\n expiryOn,\n link,\n badgeProvider,\n ...skillLevels[0],\n });\n return accumulator;\n },\n []\n );\n\n\n if (dayjs().isAfter(dayjs(badgeWalletData.walletShare.expireOn))) {\n message.error(\"This's Link Expired\", 5000)\n setTimeout(() => {\n window.location.pathname = '/'\n }, 3000)\n\n } else {\n setWalletInfo(badgeWalletData.walletShare)\n\n if (Array.isArray(mappedFetchedData) && Array.isArray(listOfCategories)) {\n const MappedData = {};\n mappedFetchedData.forEach((element) => {\n const results = findSkillsCode(listOfCategories, element?.skillCode);\n const parChildRes = findSkills(listOfCategories, element, {\n imgSource: createSkillBadgeImage(\n element?.skill,\n element?.skillCode,\n element?.skillType,\n element?.level,\n element?.badgeProvider\n ),\n lightColor: lightenColor(results.colour, 95),\n });\n\n if (results) {\n if (MappedData?.[results?.name]) {\n MappedData[results.name].data = [\n ...MappedData[results.name].data,\n parChildRes,\n ];\n } else {\n MappedData[results?.name] = {\n color: results.colour,\n lightColor: lightenColor(results.colour, 95),\n categoryName: results.name,\n data: [parChildRes],\n };\n }\n }\n setBadges(MappedData);\n });\n }\n\n\n }\n\n } catch (error) {\n console.log(error)\n message.error(\"Link Not Found\", 5000)\n setTimeout(() => {\n window.location.pathname = '/'\n }, 3000)\n }\n\n\n\n\n\n };\n if (id) {\n fetchBadges();\n }\n }, [id]);\n return !!walletInfo && (\n \n
\n
\n
\n
\n Digital Wallet\n \n\n \n {!!personInfo.profileUrl && \n \n Shared to {walletInfo?.email ?? \"\"}\n \n \n
\n
\n
\n \n \n Expiration date:\n \n {` ${walletInfo?.expireOn?.substring(0, 10) ?? ''}`}\n \n \n
\n \n \n Note:\n \n {` ${walletInfo?.remark ?? 'N/A'}`}\n \n
\n
\n
\n {badges && (\n <>\n
\n {showByCategory &&
}\n \n )}\n {badges ? (\n showByCategory ? (\n Object.keys(badges).map((key, index) => (\n
\n
\n {Object.keys(badges).length !== index + 1 && (\n
\n )}\n
\n ))\n ) : (\n
\n )\n ) : (\n
No badges found!}\n style={styles.emptyContainer}\n />\n )}\n \n \n );\n};\n\nexport default Wallet;\n","import React, { Component } from 'react';\n\nconst asyncComponent = (importComponent) => {\n return class extends Component {\n static displayName = asyncComponent.name;\n\n state = {\n component: null,\n };\n\n componentDidMount() {\n importComponent().then((cmp) => {\n this.setState({ component: cmp.default });\n });\n }\n\n render() {\n const C = this.state.component;\n return C ? \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n isAuthenticated: state.auth.token !== null,\n //stateRoles: state.auth.roles,\n loading: state.auth.loading,\n containerConfig: state.config.containerConfig,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n authAction: bindActionCreators(actions, dispatch),\n };\n};\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(WelcomePage));\n","import * as actions from \"../src/store/actions/authAction\";\nimport * as companyActions from \"../src/store/actions/companyAction\";\nimport * as configActions from \"../src/store/actions/configAction\";\nimport * as contentActions from \"../src/store/actions/contentAction\";\nimport * as languageActions from \"../src/store/actions/languageAction\";\nimport * as skillProfileActions from \"../src/store/actions/skillProfileAction\";\nimport * as adminPersonActions from \"../src/store/admin/actions/adminPersonActions\";\nimport ProtectedRoute from \"./../src/components/routes/ProtectedRoute\";\nimport CacheBuster from \"./CacheBuster\";\nimport ForgotPassword from \"./components/ForgotPassword\";\nimport Login from \"./components/Login\";\nimport Logout from \"./components/Logout\";\nimport ResetPassword from \"./components/ResetPassword\";\nimport ResetPasswordConfirmation from \"./components/ResetPasswordConfirmation\";\nimport TeamTabs from \"./components/TeamTabs\";\nimport AdminHome from \"./components/admin/AdminHome\";\nimport MySetting from \"./components/mysetting/MySetting\";\nimport LoggedInRoute from \"./components/routes/LoggedInRoute\";\nimport How from \"./components/welcome/How\";\nimport \"./custom.css\";\nimport ProfilePage from \"./pages/ProfilePage\";\nimport SelfAssessmentPage from \"./pages/SelfAssessmentPage\";\nimport ThankYouPage from \"./pages/ThankYou\";\nimport Wallet from \"./pages/Wallet\";\nimport WelcomePage from \"./pages/WelcomePage\";\nimport { HubConnectionBuilder } from \"@aspnet/signalr\";\nimport React, { Component } from \"react\";\nimport { AlertList } from \"react-bs-notifier\";\nimport Favicon from \"react-favicon\";\nimport { Helmet } from \"react-helmet\";\nimport { connect } from \"react-redux\";\nimport { Route, Switch, withRouter } from \"react-router\";\nimport { Button, Col, Form, FormGroup, Label, Modal, ModalBody, ModalFooter, Row, Spinner } from \"reactstrap\";\nimport { bindActionCreators } from \"redux\";\nimport { Userpilot } from \"userpilot\";\n\nconst messageHubHostname = process.env.NODE_ENV === \"development\" ? process.env.REACT_APP_MESSAGE_HUB_ENDPOINT : \"/messagehub\";\nconst alertAutoHideInterval = process.env.REACT_APP_ALERT_AUTO_HIDE_INTERVAL;\nconst defaultLanguage = process.env.REACT_APP_DEFAULT_LANGUAGE;\n\nconst FileDownload = require(\"js-file-download\");\n\nconst userPilotToken = process.env.REACT_APP_USER_PILOT_TOKEN;\nconst signalRTimerMaxCount = 100;\n\nUserpilot.initialize(userPilotToken);\nclass App extends Component {\n static displayName = App.name;\n\n constructor(props) {\n super(props);\n this.connection = null;\n this.state = {\n loading: true,\n languageLoading: true,\n contentLoading: true,\n configLoading: true,\n alerts: [],\n language: null,\n showActiveUsersDialog: false,\n signalRTimerIntervalId: null,\n signalRTimerStarted: false,\n signalRTimerCount: 0,\n };\n\n this.connectSignalR = this.connectSignalR.bind(this);\n this.disconnectSignalR = this.disconnectSignalR.bind(this);\n\n this.generateAlert = this.generateAlert.bind(this);\n this.dismisAlert = this.dismisAlert.bind(this);\n }\n\n generateAlert = (type, message) => {\n const alerts = this.state.alerts;\n\n this.setState({\n alerts: [\n ...alerts,\n {\n id: new Date().getTime(),\n type: type,\n message: message,\n },\n ],\n });\n };\n\n dismisAlert = (alert) => {\n const alerts = this.state.alerts;\n const idx = alerts.indexOf(alert);\n if (idx >= 0) {\n this.setState({\n alerts: [...alerts.slice(0, idx), ...alerts.slice(idx + 1)],\n });\n }\n };\n\n componentDidMount() {\n if (!this.props.defaultCompany) {\n this.props.onCompany.getDefaultCompany().then(() => {});\n }\n\n if (!this.props.brandingLogoChecked) {\n this.props.onCompany.getCompanyBrandingLogo().then(() => {});\n }\n\n if (!this.props.favIconChecked) {\n this.props.onCompany.getCompanyFavIcon().then(() => {});\n }\n\n let languageName = localStorage.getItem(\"language\");\n\n this.props.authAction.checkLoginCookiesState().then(() => {\n this.connectSignalR();\n\n if (this.props.loginResult) {\n Userpilot.identify(this.props.loginResult.personId, {\n name: `${this.props.loginResult.firstName} ${this.props.loginResult.lastName}`,\n email: this.props.loginResult.email,\n });\n }\n\n if (!this.props.samlEnabled || !this.props.containerConfig) {\n Promise.all([this.props.onConfig.getSamlEnabledStatus(), this.props.onConfig.getContainerConfig()]).then(() => {\n if (this.props.containerConfig) {\n if (this.props.containerConfig.defaultBaseUrl !== window.location.origin + \"/\") {\n window.location = this.props.containerConfig.defaultBaseUrl;\n }\n }\n\n this.setState({\n configLoading: this.props.configLoading,\n });\n });\n } else {\n this.setState({ configLoading: false });\n }\n\n this.props.onLanguage.getLanguages().then(() => {\n if (!this.props.languageLoading) {\n let languages = this.props.languages;\n let language = null;\n\n if (!languages || languages.length == 0) {\n languages.push({\n code: \"GB\",\n name: \"English\",\n rightAlign: false,\n });\n }\n\n if (languageName) {\n language = languages.find((it) => it.name == languageName);\n } else {\n language = languages.find((it) => it.name == defaultLanguage);\n }\n\n if (language) {\n this.setCurrentLanguage(language);\n }\n\n this.setState({ languageLoading: this.props.languageLoading });\n\n this.props.onContent.getContentTranslations(language.id, \"SfiaAll-Menu-SfiaProfileMenu-Registration-Login-ForgotPassword\").then(() => {\n this.setState({ contentLoading: this.props.contentLoading });\n });\n }\n });\n\n let authMode = localStorage.getItem(\"authMode\");\n authMode = authMode ? authMode : \"Planner\";\n\n let authModes = authMode.split(\",\").map((item) => item.trim());\n\n if (authModes.includes(\"Admin\")) {\n if (!this.props.pageAssignments) {\n this.props.onAdminPerson.getPageAssignments().then(() => {});\n }\n\n if (!this.props.columnDisplaySettings) {\n this.props.onAdminPerson.getColumnDisplaySettings().then(() => {});\n }\n\n if (!this.props.activeUserCountStatusFetched) {\n this.props.onConfig.getActiveUserCountStatus().then(() => {\n if (!this.props.activeUserCountStatusLoading && this.props.activeUserCount && this.props.showActiveUserCountNotification) {\n if (this.props.activeUserCount > 1 && this.props.showActiveUserCountNotification) {\n this.setState({ showActiveUsersDialog: true });\n } else {\n this.setState({ showActiveUsersDialog: false });\n }\n }\n });\n }\n\n const pathName = window.location.pathname;\n const paths = pathName.split(\"/\");\n const isDownloadReport = pathName.includes(\"/admin/endorsements/download\");\n\n if (isDownloadReport && paths && paths.length > 0) {\n if (paths.length >= 4) {\n var token = paths[4];\n if (token) {\n this.props.onAdminPerson.downloadProfileReports(token).then(() => {\n if (!this.props.loadingPrint) {\n if (this.props.printData) {\n FileDownload(this.props.printData, `SkillsTx_Persons_Profiles.zip`);\n } else {\n this.generateAlert(\"danger\", \"Profile reports not found\");\n }\n }\n });\n }\n }\n }\n\n const isDownloadSfia9MigrationImpactReport = pathName.includes(\"/admin/settings/downloadmigrationimpact\");\n const config = this.props.config;\n\n if (isDownloadSfia9MigrationImpactReport && paths && paths.length > 0) {\n if (paths.length >= 4) {\n var token = paths[4];\n if (token) {\n this.props.onConfig.downloadMigrationImpactAssessmentReports(token).then(() => {\n if (!this.props.configLoadingPrint) {\n if (this.props.configPrintData) {\n var today = new Date();\n var strToday = today.getFullYear() + this.pad2(today.getMonth() + 1) + this.pad2(today.getDate()) + \"_\" + this.pad2(today.getHours()) + this.pad2(today.getMinutes()) + this.pad2(today.getSeconds());\n FileDownload(this.props.configPrintData, `Sfia9MigrationImpactReport ${config && (config.companyName || config.containerName) ? (config.containerName ? `for ${config.containerName} at ` : `for ${config.companyName} at `) : \"\"}${strToday}.xlsx`);\n } else {\n this.generateAlert(\"danger\", \"SFIA9 Migration Impact assessments spreadsheets not found\");\n }\n }\n });\n }\n }\n }\n }\n });\n }\n\n pad2 = (n) => {\n return (n < 10 ? \"0\" : \"\") + n;\n };\n\n componentDidUpdate(prevProps) {\n if (this.props.isAuthenticated !== prevProps.isAuthenticated && this.props.isAuthenticated && this.props.authMode) {\n let authMode = this.props.authMode;\n authMode = authMode ? authMode : \"Planner\";\n\n let authModes = authMode.split(\",\").map((item) => item.trim());\n\n if (authModes.includes(\"Admin\")) {\n if (!this.props.pageAssignments) {\n this.props.onAdminPerson.getPageAssignments().then(() => {});\n }\n\n if (!this.props.columnDisplaySettings) {\n this.props.onAdminPerson.getColumnDisplaySettings().then(() => {});\n }\n\n if (!this.props.activeUserCountStatusFetched) {\n this.props.onConfig.getActiveUserCountStatus().then(() => {\n if (!this.props.activeUserCountStatusLoading && this.props.activeUserCount && this.props.showActiveUserCountNotification) {\n if (this.props.activeUserCount > 1 && this.props.showActiveUserCountNotification) {\n this.setState({ showActiveUsersDialog: true });\n } else {\n this.setState({ showActiveUsersDialog: false });\n }\n }\n });\n }\n }\n\n this.props.onConfig.getContainerConfig().then(() => {});\n\n this.disconnectSignalR();\n setTimeout(() => {\n this.connectSignalR();\n }, 100);\n\n if (this.props.loginResult) {\n Userpilot.identify(this.props.loginResult.personId, {\n name: `${this.props.loginResult.firstName} ${this.props.loginResult.lastName}`,\n email: this.props.loginResult.email,\n });\n }\n }\n\n if (this.props.isAuthenticated !== prevProps.isAuthenticated && !this.props.isAuthenticated) {\n if (this.state.signalRTimerIntervalId) {\n clearInterval(this.state.signalRTimerIntervalId);\n this.setState({ signalRTimerStarted: false, signalRTimerIntervalId: null });\n }\n }\n\n if (this.props.containerConfig !== prevProps.containerConfig && this.props.containerConfig) {\n if (this.props.containerConfig.ssoMembeeEnable != true) {\n const divMembeeLogin = document.getElementById(\"divMembeeLogin\");\n if (divMembeeLogin) {\n divMembeeLogin.outerHTML = \"\";\n }\n }\n }\n }\n\n UNSAFE_componentWillMount() {\n this.unlisten = this.props.history.listen((location, action) => {\n Userpilot.reload();\n });\n }\n\n componentWillUnmount() {\n this.unlisten();\n this.disconnectSignalR();\n }\n\n connectSignalR() {\n const personId = localStorage.getItem(\"personId\");\n\n if (personId && !this.connection && this.props.isAuthenticated) {\n this.connection = new HubConnectionBuilder().withUrl(messageHubHostname).build();\n\n this.connection.on(`UpdateSkillsNotification${personId}`, (response) => {\n console.log(\"response\", response);\n if (response.action == \"UpdateMyProfiles\") {\n if (response.status == \"Success\") {\n let udpatedSkills = response.data;\n this.props.onSkillProfile.updateMySkillProfileSuccess(udpatedSkills);\n } else {\n this.props.onSkillProfile.updateMySkillProfileFail(response.message);\n }\n }\n });\n\n this.connection.start().catch((err) => console.error(err.toString()));\n this.startTimer();\n }\n }\n\n disconnectSignalR() {\n if (this.connection) {\n this.connection.stop().then(() => {\n this.connection = null;\n });\n }\n }\n\n LoadingSpinner() {\n return (\n \n );\n }\n\n setCurrentLanguage = (language) => {\n if (language && language != undefined) {\n localStorage.setItem(\"language\", language.name);\n localStorage.setItem(\"languageId\", language.id);\n\n this.setState({ language: language, languageLoading: true });\n\n Promise.resolve(this.props.onLanguage.setLanguage(language)).then(() => {\n this.setState({ languageLoading: false });\n\n this.props.onContent.getContentTranslations(language.id, \"SfiaAll-Menu-SfiaProfileMenu-Registration-Login-ForgotPassword-ResetPassword\").then(() => {\n this.setState({ contentLoading: this.props.contentLoading });\n });\n });\n }\n };\n\n renderActiveUsersDialog = () => {\n return (\n \n \n \n \n \n {\n this.setState({ showActiveUsersDialog: false });\n }}\n >\n Close\n \n \n \n );\n };\n\n startTimer = () => {\n const signalRTimerStarted = this.state.signalRTimerStarted;\n\n if (!signalRTimerStarted) {\n const signalRTimerIntervalId = setInterval(() => {\n let signalRTimerCount = this.state.signalRTimerCount + 1;\n\n if (signalRTimerCount >= signalRTimerMaxCount && !this.props.skillsProfileUpdating) {\n signalRTimerCount = 0;\n\n this.disconnectSignalR();\n setTimeout(() => {\n this.connectSignalR();\n }, 100);\n }\n\n this.setState({ signalRTimerCount: signalRTimerCount });\n }, 60000);\n\n this.setState({ signalRTimerStarted: true, signalRTimerIntervalId });\n }\n };\n\n favIconUpdated = () => {\n this.setState({ favIconTimestamp: new Date() });\n this.props.onCompany.getCompanyFavIcon().then(() => {});\n };\n\n render() {\n let authMode = localStorage.getItem(\"authMode\");\n authMode = authMode ? authMode : \"Planner\";\n\n let redirectUrl = localStorage.getItem(\"redirectUrl\") ? (localStorage.getItem(\"redirectUrl\") != \"\" && localStorage.getItem(\"redirectUrl\") != \"null\" ? localStorage.getItem(\"redirectUrl\") : null) : null;\n let isLogout = localStorage.getItem(\"isLogout\") ? (localStorage.getItem(\"isLogout\") == \"TRUE\" ? true : false) : false;\n\n let authModes = authMode.split(\",\").map((item) => item.trim());\n\n return (\n \n {({ loading, isLatestVersion, refreshCacheAndReload }) => {\n if (loading) return null;\n if (!loading && !isLatestVersion) {\n // You can decide how and when you want to force reload\n refreshCacheAndReload();\n }\n\n return (\n \n {this.props.containerConfig && this.props.containerConfig.enableWalkme && (\n
\n \n \n )}\n {this.props.favIconImage && this.props.favIconImage != \"\" ?
:
}\n
\n {this.renderActiveUsersDialog()}\n {this.state.languageLoading || this.state.contentLoading || this.state.configLoading ? (\n this.LoadingSpinner()\n ) : (\n
\n \n )}\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n isAuthenticated: state.auth.token !== null,\n loginResult: state.auth.loginResult,\n authMode: state.auth.authMode,\n redirectUrl: state.auth.redirectUrl,\n isLogout: state.auth.isLogout,\n //stateRoles: state.auth.roles,\n loading: state.auth.loading,\n languageLoading: state.language.loading,\n languages: state.language.languages,\n contentTranslations: state.content.contentTranslations,\n contentLoading: state.content.loading,\n samlEnabled: state.config.samlEnabled,\n defaultCompany: state.company.defaultCompany,\n brandingLogoImage: state.company.brandingLogoImage,\n brandingLogoChecked: state.company.brandingLogoChecked,\n\n favIconImage: state.company.favIconImage,\n favIconChecked: state.company.favIconChecked,\n\n containerConfig: state.config.containerConfig,\n config: state.config.config,\n configLoading: state.config.loading,\n configLoadingPrint: state.config.loadingPrint,\n configPrintData: state.config.printData,\n\n activeUserCount: state.config.activeUserCount,\n showActiveUserCountNotification: state.config.showActiveUserCountNotification,\n activeUserCountStatusFetched: state.config.activeUserCountStatusFetched,\n activeUserCountStatusLoading: state.config.activeUserCountStatusLoading,\n\n pageAssignments: state.adminPerson.pageAssignments,\n columnDisplaySettings: state.adminPerson.columnDisplaySettings,\n loginWithTeams: state.auth.loginWithTeams,\n\n loadingPrint: state.adminPerson.loadingPrint,\n printData: state.adminPerson.printData,\n personsError: state.adminPerson.error,\n\n receiveLicenseNotification: state.auth.receiveLicenseNotification,\n lastActiveUserNotification: state.auth.lastActiveUserNotification,\n\n skillsProfileUpdating: state.skillProfile.profileUpdating,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n authAction: bindActionCreators(actions, dispatch),\n onSkillProfile: bindActionCreators(skillProfileActions, dispatch),\n onLanguage: bindActionCreators(languageActions, dispatch),\n onContent: bindActionCreators(contentActions, dispatch),\n onConfig: bindActionCreators(configActions, dispatch),\n onCompany: bindActionCreators(companyActions, dispatch),\n onAdminPerson: bindActionCreators(adminPersonActions, dispatch),\n };\n};\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));\n","import { Component } from \"react\";\nimport { withRouter } from \"react-router\";\n\nclass AppScrollToTop extends Component {\n componentDidUpdate(prevProps) {\n if (this.props.location.pathname !== prevProps.location.pathname) {\n window.scrollTo({\n top: 0,\n behavior: \"smooth\",\n });\n }\n }\n\n render() {\n return this.props.children;\n }\n}\n\nexport default withRouter(AppScrollToTop);\n","// In production, we register a service worker to serve assets from local cache.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\n// cached resources are updated in the background.\n\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\n// This link also includes instructions on opting out of this behavior.\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport default function register () {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Lets check if a service worker still exists or not.\n checkValidServiceWorker(swUrl);\n } else {\n // Is not local host. Just register service worker\n registerValidSW(swUrl);\n }\n });\n }\n}\n\nfunction registerValidSW (swUrl) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the old content will have been purged and\n // the fresh content will have been added to the cache.\n // It's the perfect time to display a \"New content is\n // available; please refresh.\" message in your web app.\n console.log('New content is available; please refresh.');\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker (swUrl) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n if (\n response.status === 404 ||\n response.headers.get('content-type').indexOf('javascript') === -1\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister () {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","import App from \"./App\";\nimport AppScrollToTop from \"./AppScrollToTop\";\nimport { unregister } from \"./registerServiceWorker\";\nimport store from \"./store/store\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { Provider } from \"react-redux\";\nimport { BrowserRouter } from \"react-router-dom\";\nimport \"react-widgets/styles.css\";\n\nconst baseUrl = document.getElementsByTagName(\"base\")[0].getAttribute(\"href\");\nconst rootElement = document.getElementById(\"root\");\n\nconst root = createRoot(rootElement);\nroot.render(\n \n \n \n \n \n \n);\n\n//registerServiceWorker();\nunregister();\n"],"sourceRoot":""} 
\n