\r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./SAQAXMLImport.css\";\r\nimport { SAQAXMLImportForm } from './SAQAXMLImportForm';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\n\r\nconst saqaxmlimportRef = React.createRef();\r\nconst utils = new ViewUtils();\r\n\r\nconst toolbarRef = React.createRef();\r\nclass SAQAXMLImport extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n };\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'save', label: 'Import', tooltip: 'Import', icon: 'SaveIcon', visible: this.props.menuPermissionItem.Add }\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n handleFormValueChange = (values) => {\r\n\r\n if (!utils.isNull(values)) {\r\n }\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"save\" === buttonId) {\r\n this.save();\r\n }\r\n }\r\n\r\n successCallback = (response) => {\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n }\r\n\r\n errorCallBack = (response) => {\r\n utils.showMessage(this, \"A system error has occurred. Please contact your system administrator\", \"ERROR\");\r\n }\r\n\r\n save() {\r\n let formValue = saqaxmlimportRef.current.getValue();\r\n if (formValue !== null && typeof formValue !== \"undefined\") {\r\n const data = JSON.stringify(formValue);\r\n\r\n const url = \"api/sims/saqaxmlimport/insertsaqaprogramme\";\r\n utils.invokeUrl(url, this.successCallback,\r\n this.errorCallBack,\r\n {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: data\r\n }\r\n )\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"SAQA Import\"}\r\n
\r\n \r\n\r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n config={this.toolbarConfig}\r\n />\r\n | \r\n
\r\n \r\n | \r\n \r\n this.handleFormValueChange(values)} menuPermissionItem={this.props.menuPermissionItem} />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(SAQAXMLImport));\r\n\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n}));\r\n\r\nexport default function ShortCourseSetupSearchForm(props) {\r\n const [labelWidth, setLabelWidth] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n | \r\n \r\n \r\n Short Course Code \r\n\t\t\t\t\t\t\t\t\r\n props.model.courseCode = ev.target.value}\r\n labelWidth={labelWidth} \r\n />\r\n \r\n | \r\n \r\n \r\n \r\n Short Course Title\r\n\t\t\t\t\t\t\t\t\r\n props.model.courseTitle = ev.target.value}\r\n labelWidth={labelWidth} \r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n {\"Skills Programmes Details\"}\r\n
\r\n \r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n enabled={true} config={this.toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n \r\n this.handleFormValueChange(values)} data={this.state.model}\r\n leadsToQualification={this.state.leadsToQualification}\r\n editPermission={this.props.menuPermissionItem.Edit}\r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(SkillsProgramme));\r\n\r\n","import React from 'react';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport Button from '@material-ui/core/Button';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport DocumentUpload from '../../widgets/DocumentUpload';\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport TextField from '@material-ui/core/TextField';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\n\r\nconst utils = new ViewUtils();\r\nexport default function SkillsProgrammeSetupCRMBulkUploadDialog(props) {\r\n\r\n const [open, setOpen] = React.useState(props.open);\r\n\r\n const handleClose = (save, cancel) => {\r\n setOpen(false);\r\n props.closeHandler(save, cancel)\r\n };\r\n\r\n const cancel = () => {\r\n handleClose(false, true);\r\n };\r\n\r\n React.useEffect(() => {\r\n setOpen(props.open);\r\n }, [props.open]);\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n {`SkillsProgramme > ${this.props.location.state.SkillsProgrammeName} > CRM`}\r\n
\r\n\r\n {\r\n !utils.isStringEmpty(this.props.saveMessage) ?\r\n
\r\n {this.props.saveMessage}\r\n
\r\n :\r\n \"\"\r\n }\r\n\r\n
{ this.SetCommunicationType(values) }}>\r\n {form =>\r\n \r\n }\r\n \r\n\r\n {\r\n this.state.CommunicationType === \"1\" ?\r\n
\r\n
\r\n Comments\r\n
\r\n
this.handleToolbarButtonClick(buttonId)}\r\n config={{\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: '', tooltip: 'Back to SkillsProgramme Details', icon: 'CloseIcon' },\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Add a comment', icon: 'AddCommentIcon', visible: this.props.menuPermissionItem.Add }\r\n ]\r\n }\r\n ]\r\n }} />\r\n \r\n \r\n :\r\n \"\"\r\n }\r\n\r\n {\r\n this.state.CommunicationType === \"2\" ?\r\n
\r\n
\r\n Documents\r\n
\r\n
this.handleToolbarButtonClick(buttonId)}\r\n config={{\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: '', tooltip: 'Back to SkillsProgramme Details', icon: 'CloseIcon' },\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Upload Document', icon: 'UploadIcon', visible: this.props.menuPermissionItem.Add },\r\n { id: 'bulkAdd', label: '', tooltip: 'Upload Bulk Document', icon: 'BulkUploadIcon', visible: this.props.menuPermissionItem.Add },\r\n { id: 'bulkDownload', label: '', tooltip: 'Download All Documents', icon: 'DownloadIcon', visible: this.props.menuPermissionItem.View }\r\n ]\r\n }\r\n ]\r\n }} />\r\n this.FileDownload(rowid, headCell, \"Document\")} documentsDataUrl={config.dataUrls.documents} moduleName={config.moduleName} selection={this.props.location.state.SkillsProgrammeID} showLearnerDocumentType={true} />\r\n \r\n :\r\n \"\"\r\n }\r\n\r\n {\r\n this.state.CommunicationType === \"3\" ?\r\n
\r\n
\r\n Emails\r\n
\r\n
this.handleToolbarButtonClick(buttonId)}\r\n config={{\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: '', tooltip: 'Back to SkillsProgramme Details', icon: 'CloseIcon' },\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Send Email', icon: 'EmailIcon', visible: this.props.menuPermissionItem.Add }\r\n ]\r\n }\r\n ]\r\n }} />\r\n this.FileDownload(rowid, headCell, \"EmailDocument\")}\r\n emailsDataUrl={config.dataUrls.emails}\r\n moduleName={config.moduleName}\r\n selection={this.props.location.state.SkillsProgrammeID}\r\n Email={this.state.emailAddress}\r\n Subject={this.state.emailSubject}\r\n />\r\n \r\n :\r\n \"\"\r\n }\r\n\r\n {\r\n
\r\n this.postAddHandler(added)}\r\n postUrl={config.postUrls.comments}\r\n EntityID={this.props.location.state.SkillsProgrammeID} />\r\n this.postUploadHandler(save, cancel)}\r\n postUrl={config.postUrls.documents}\r\n EntityID={this.props.location.state.SkillsProgrammeID}\r\n showLearnerDocumentType={true}\r\n getLearnerDocumentType={config.docTypeUrls.documents}\r\n />\r\n this.postAddHandler(added)}\r\n postUrl={config.postUrls.emails}\r\n EntityID={this.props.location.state.SkillsProgrammeID}\r\n />\r\n this.postUploadHandler(save, cancel)}\r\n missingDocTypesArray={this.state.missingDocTypesArray}\r\n />\r\n
\r\n }\r\n\r\n
\r\n
\r\n
{'Page ' + (i + 1)} of {this.state.numPages}
\r\n
Document Type:
\r\n
this.handleArrayChange(values, i + 1)}>\r\n \r\n {this.state.lookupArray.map((lookupitem, index) => (\r\n\r\n \r\n\r\n ))}\r\n \r\n
\r\n
\r\n {`SkillsProgramme > ${this.props.location.state.SkillsProgrammeName} > CRM > Bulk Document Upload`}\r\n
\r\n
this.handleToolbarButtonClick(buttonId)}\r\n config={{\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: '', tooltip: 'Back to SkillsProgramme CRM', icon: 'CloseIcon' },\r\n ]\r\n }\r\n ]\r\n }} />\r\n\r\n \r\n \r\n {\r\n \r\n {this.state.fileInfo ? this.state.fileInfo.name : null}\r\n \r\n }\r\n {\r\n this.state.fileInfo ?\r\n \r\n
\r\n {pages}\r\n \r\n \r\n \r\n \r\n {\"Bursary Details\"}\r\n
\r\n \r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n enabled={true} config={this.toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n \r\n this.handleFormValueChange(values)} data={this.state.model}\r\n leadsToQualification={this.state.leadsToQualification}\r\n editPermission={this.props.menuPermissionItem.Edit}\r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(Bursary));\r\n\r\n","import React from 'react';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport Button from '@material-ui/core/Button';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport DocumentUpload from '../../widgets/DocumentUpload';\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport TextField from '@material-ui/core/TextField';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\n\r\nconst utils = new ViewUtils();\r\nexport default function BursarySetupCRMBulkUploadDialog(props) {\r\n\r\n const [open, setOpen] = React.useState(props.open);\r\n\r\n const handleClose = (save, cancel) => {\r\n setOpen(false);\r\n props.closeHandler(save, cancel)\r\n };\r\n\r\n const cancel = () => {\r\n handleClose(false, true);\r\n };\r\n\r\n React.useEffect(() => {\r\n setOpen(props.open);\r\n }, [props.open]);\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n {`Bursary > ${this.props.location.state.BursaryName} > CRM`}\r\n
\r\n\r\n {\r\n !utils.isStringEmpty(this.props.saveMessage) ?\r\n
\r\n {this.props.saveMessage}\r\n
\r\n :\r\n \"\"\r\n }\r\n\r\n
{ this.SetCommunicationType(values) }}>\r\n {form =>\r\n \r\n }\r\n \r\n\r\n {\r\n this.state.CommunicationType === \"1\" ?\r\n
\r\n
\r\n Comments\r\n
\r\n
this.handleToolbarButtonClick(buttonId)}\r\n config={{\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: '', tooltip: 'Back to Bursary Details', icon: 'CloseIcon' },\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Add a comment', icon: 'AddCommentIcon', visible: this.props.menuPermissionItem.Add }\r\n ]\r\n }\r\n ]\r\n }} />\r\n \r\n \r\n :\r\n \"\"\r\n }\r\n\r\n {\r\n this.state.CommunicationType === \"2\" ?\r\n
\r\n
\r\n Documents\r\n
\r\n
this.handleToolbarButtonClick(buttonId)}\r\n config={{\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: '', tooltip: 'Back to Bursary Details', icon: 'CloseIcon' },\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Upload Document', icon: 'UploadIcon', visible: this.props.menuPermissionItem.Add },\r\n { id: 'bulkAdd', label: '', tooltip: 'Upload Bulk Document', icon: 'BulkUploadIcon', visible: this.props.menuPermissionItem.Add },\r\n { id: 'bulkDownload', label: '', tooltip: 'Download All Documents', icon: 'DownloadIcon', visible: this.props.menuPermissionItem.View }\r\n ]\r\n }\r\n ]\r\n }} />\r\n this.FileDownload(rowid, headCell, \"Document\")} documentsDataUrl={config.dataUrls.documents} moduleName={config.moduleName} selection={this.props.location.state.BursaryID} showLearnerDocumentType={true} />\r\n \r\n :\r\n \"\"\r\n }\r\n\r\n {\r\n this.state.CommunicationType === \"3\" ?\r\n
\r\n
\r\n Emails\r\n
\r\n
this.handleToolbarButtonClick(buttonId)}\r\n config={{\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: '', tooltip: 'Back to Bursary Details', icon: 'CloseIcon' },\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Send Email', icon: 'EmailIcon', visible: this.props.menuPermissionItem.Add }\r\n ]\r\n }\r\n ]\r\n }} />\r\n this.FileDownload(rowid, headCell, \"EmailDocument\")}\r\n emailsDataUrl={config.dataUrls.emails}\r\n moduleName={config.moduleName}\r\n selection={this.props.location.state.BursaryID}\r\n Email={this.state.emailAddress}\r\n Subject={this.state.emailSubject}\r\n />\r\n \r\n :\r\n \"\"\r\n }\r\n\r\n {\r\n
\r\n this.postAddHandler(added)}\r\n postUrl={config.postUrls.comments}\r\n EntityID={this.props.location.state.BursaryID} />\r\n this.postUploadHandler(save, cancel)}\r\n postUrl={config.postUrls.documents}\r\n EntityID={this.props.location.state.BursaryID}\r\n showLearnerDocumentType={true}\r\n getLearnerDocumentType={config.docTypeUrls.documents}\r\n />\r\n this.postAddHandler(added)}\r\n postUrl={config.postUrls.emails}\r\n EntityID={this.props.location.state.BursaryID}\r\n />\r\n this.postUploadHandler(save, cancel)}\r\n missingDocTypesArray={this.state.missingDocTypesArray}\r\n />\r\n
\r\n }\r\n\r\n
\r\n
\r\n
{'Page ' + (i + 1)} of {this.state.numPages}
\r\n
Document Type:
\r\n
this.handleArrayChange(values, i + 1)}>\r\n \r\n {this.state.lookupArray.map((lookupitem, index) => (\r\n\r\n \r\n\r\n ))}\r\n \r\n
\r\n
\r\n {`Bursary > ${this.props.location.state.BursaryName} > CRM > Bulk Document Upload`}\r\n
\r\n
this.handleToolbarButtonClick(buttonId)}\r\n config={{\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: '', tooltip: 'Back to Bursary CRM', icon: 'CloseIcon' },\r\n ]\r\n }\r\n ]\r\n }} />\r\n\r\n \r\n \r\n {\r\n \r\n {this.state.fileInfo ? this.state.fileInfo.name : null}\r\n \r\n }\r\n {\r\n this.state.fileInfo ?\r\n \r\n
\r\n {pages}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n | \r\n \r\n \r\n Artisan Code \r\n\t\t\t\t\t\t\t\t\r\n props.model.ArtisanCode = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n \r\n \r\n Artisan Title\r\n\t\t\t\t\t\t\t\t\r\n props.model.ArtisanTitle = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n {\"Client > Learners\" + (this.props.location.state !== null ? \" > \" + this.props.location.state.employerName + (this.props.location.state.employerSDLNo !== null ? \" - \" + this.props.location.state.employerSDLNo : \"\") : \"> Add\")}\r\n
\r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n config={this.state.toolbarConfig} />\r\n this.setState({ selection: selection })}\r\n dataUrl=\"api/sims/employerlearner/getEmployerLearners\" searchParameters={this.state.searchParameters} />\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n withMenuPermission(EmployerLearnerSearch)\r\n);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\nconst headCells = [\r\n { id: 'StartDate', numeric: false, disablePadding: true, label: 'Start Date' },\r\n { id: 'EndDate', numeric: false, disablePadding: true, label: 'End Date' },\r\n { id: 'ProgrammeType', numeric: false, disablePadding: true, label: 'Programme Type' },\r\n { id: 'Intervention', numeric: false, disablePadding: true, label: 'Intervention' },\r\n { id: 'Employment', numeric: false, disablePadding: true, label: 'Employment' },\r\n { id: 'ProjectNumber', numeric: false, disablePadding: true, label: 'Project Number' }\r\n];\r\n\r\n\r\nclass EmployerProjectSearch extends Component {\r\n\r\n state = {\r\n searchParameters: [{ Name: \"EmployerID\", Value: this.props.location.state.employerId }],\r\n toolbarConfig: {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n }\r\n ,\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'project', label: 'GO TO PROJECT', tooltip: 'go to project', visible: this.props.onMenuSpecificPermissionItem('/GrantSetupSearch').View }\r\n ]\r\n }\r\n ]\r\n }\r\n }\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/employer',\r\n state: { selection: this.props.location.state.employerId }\r\n });\r\n }\r\n else if (\"project\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/AddEditTranche',\r\n state: {\r\n TrancheID: this.state.selection[0].Id,\r\n hideFields: false\r\n }\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Client > Projects\" + (this.props.location.state !== null ? \" > \" + this.props.location.state.employerName + (this.props.location.state.employerSDLNo !== null ? \" - \" + this.props.location.state.employerSDLNo : \"\") : \"> Add\")}\r\n
\r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n config={this.state.toolbarConfig} />\r\n this.setState({ selection: selection })}\r\n dataUrl=\"api/sims/employerproject/getEmployerProjects\" searchParameters={this.state.searchParameters} />\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n withMenuPermission(EmployerProjectSearch)\r\n);\r\n","import React from 'react';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst utils = new ViewUtils();\r\nexport const EmployerAddUserForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n return (\r\n\r\n {form =>\r\n \r\n }\r\n\r\n );\r\n})\r\n","\r\nimport React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport Prompt from '../../widgets/Prompt';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport UserSearch from \"../UserSearch\";\r\nimport { EmployerAddUserForm } from \"../employer/EmployerAddUserForm\";\r\nimport LinkDialog from \"../LinkDialog\";\r\nimport FormDialog from \"../FormDialog\";\r\n\r\nconst headCells = [\r\n { id: 'FirstName', numeric: false, disablePadding: true, label: 'First Name' },\r\n { id: 'Surname', numeric: false, disablePadding: true, label: 'Surname' },\r\n { id: 'IDNo', numeric: false, disablePadding: true, label: 'ID No' },\r\n { id: 'TelephoneNumber', numeric: false, disablePadding: true, label: 'Telephone Number' },\r\n { id: 'CellphoneNumber', numeric: false, disablePadding: true, label: 'CellPhone Number' },\r\n { id: 'FaxNumber', numeric: false, disablePadding: true, label: 'Fax Number' },\r\n { id: 'Email', numeric: false, disablePadding: true, label: 'Email' }\r\n\r\n];\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nconst addFormRef = React.createRef();\r\n\r\nclass employerUsersSearch extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n linkDialogOpen: false,\r\n formDialogOpen: false,\r\n selectedUser: null,\r\n propmtOpen: false,\r\n promptTitle: \"Remove user from client\",\r\n promptContent: \"Are you sure you want to remove this user from the client?\",\r\n unlinkMessage: \"\",\r\n unlinkMessageStyle: \"\",\r\n searchParameters: [{ Name: \"EmployerID\", Value: this.props.location.state.selection }]\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n }\r\n ,\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: \"link\", label: '', icon: 'LinkIcon', tooltip: 'Link existing user to client' },\r\n { id: 'add', label: '', icon: 'AddIcon', tooltip: 'Add new user to client' },\r\n { id: 'remove', label: '', icon: 'DeleteIcon', tooltip: 'Remove user from client', disabled: utils.isNull(this.state.selectedUser) }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/employer',\r\n state: { selection: this.props.location.state.selection }\r\n });\r\n }\r\n else if (\"add\" === buttonId) {\r\n this.setState({ formDialogOpen: true })\r\n }\r\n else if (\"link\" === buttonId) {\r\n this.setState({ linkDialogOpen: true })\r\n }\r\n else if (\"remove\" === buttonId) {\r\n this.setState({ promptOpen: true })\r\n }\r\n }\r\n\r\n dialogActionHandler(isCancel, added) {\r\n if (added === true) {\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)),\r\n formDialogOpen: false, selectedUser: null,\r\n linkDialogOpen: false\r\n });\r\n }\r\n else if (isCancel === true) {\r\n this.setState({\r\n formDialogOpen: false,\r\n linkDialogOpen: false\r\n })\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedUser: selection[0].Id });\r\n } else {\r\n this.setState({ selectedUser: null });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"remove\", selection === null || selection.length === 0);\r\n }\r\n\r\n successfulUserRemoveCallback = (response) => {\r\n\r\n if (!utils.isNull(response.EntityId) && response.EntityId === 0) {\r\n this.setState({ selectedUser: null, removeMessage: response.Message, removeMessageStyle: response.MessageType.toLowerCase() });\r\n //Force a refresh\r\n this.setState({ searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)) })\r\n }\r\n }\r\n\r\n unsuccessfulUserRemoveCallback = (response) => {\r\n if (!utils.isNull(response.Message) && response.Message !== \"\") {\r\n this.setState({ removeMessage: response.Message, removeMessageStyle: response.MessageType.toLowerCase() })\r\n }\r\n }\r\n\r\n removeUser(url) {\r\n this.setState({ promptOpen: false }, () => {\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n })\r\n\r\n let fullUrl = `${url}?id=${this.state.selectedUser}&employerId=${this.props.location.state.selection}`;\r\n utils.invokeUrlDelete(fullUrl, this.successfulUserRemoveCallback, this.unsuccessfulUserRemoveCallback);\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ propmtOpen: false })\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Client > Users\" + (this.props.location.state !== null ? \" > \" + this.props.location.state.employerName + (this.props.location.state.employerSDLNo !== null ? \" - \" + this.props.location.state.employerSDLNo : \"\") : \"> Add\")}\r\n
\r\n \r\n\r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig} />\r\n\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={true} />\r\n
\r\n\r\n this.dialogActionHandler(isCancelled, linked)}\r\n dialogTitle={`Link users to client: ${this.props.location.state.employerName}`}\r\n linkName={\"Users\"} postUrl={\"api/sims/employeruser/LinkEmployerUser\"} usePost={true}\r\n selectionId={this.props.location.state.selection}\r\n >\r\n\r\n \r\n \r\n\r\n this.dialogActionHandler(isCancelled, linked)}\r\n >\r\n \r\n \r\n\r\n { this.removeUser(\"api/sims/employeruser/RemoveEmployerUser\") }}\r\n closePrompt={this.closePrompt}\r\n />\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(employerUsersSearch)\r\n);","import React from 'react';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst utils = new ViewUtils();\r\nexport const EmployerAddContactForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n","/// \r\n\r\nimport React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport Prompt from '../../widgets/Prompt';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport FormDialog from \"../FormDialog\";\r\nimport { EmployerAddContactForm } from \"../employer/EmployerAddContactForm\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\n\r\nconst headCells = [\r\n { id: 'FirstName', numeric: false, disablePadding: true, label: 'First Name' },\r\n { id: 'Surname', numeric: false, disablePadding: true, label: 'Surname' },\r\n { id: 'Designation', numeric: false, disablePadding: true, label: 'Designation' },\r\n { id: 'TelephoneNumber', numeric: false, disablePadding: true, label: 'Telephone Number' },\r\n { id: 'CellPhoneNumber', numeric: false, disablePadding: true, label: 'CellPhone Number' },\r\n { id: 'FaxNumber', numeric: false, disablePadding: true, label: 'Fax Number' },\r\n { id: 'EMail', numeric: false, disablePadding: true, label: 'EMail' },\r\n { id: 'OrganisationContactType', numeric: false, disablePadding: true, label: 'Contact Type' }\r\n\r\n];\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nconst addFormRef = React.createRef();\r\n\r\nclass employerContactSearch extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n\r\n formDialogOpen: false,\r\n selectedContact: null,\r\n propmtOpen: false,\r\n promptTitle: \"Remove contact from client\",\r\n promptContent: \"Are you sure you want to remove this contact from the client?\",\r\n removeMessage: \"\",\r\n removeMessageStyle: \"\",\r\n searchParameters: [{ Name: \"EmployerID\", Value: this.props.location.state.selection }]\r\n \r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n }\r\n ,\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Add contact to client', icon: 'AddIcon' },\r\n { id: 'remove', label: '', tooltip: 'Remove contact from client', icon: 'DeleteIcon', disabled: utils.isNull(this.state.selectedContact) }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/employer',\r\n state: { selection: this.props.location.state.selection }\r\n });\r\n }\r\n else if (\"add\" === buttonId) {\r\n this.setState({ formDialogOpen: true })\r\n }\r\n else if (\"remove\" === buttonId) {\r\n this.setState({ promptOpen: true })\r\n }\r\n }\r\n\r\n postAddHandler(isCancel, linked) {\r\n if (linked === true) {\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)),\r\n formDialogOpen: false\r\n });\r\n }\r\n else if (isCancel === true) {\r\n this.setState({\r\n formDialogOpen: false\r\n })\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedContact: selection[0].Id });\r\n } else {\r\n this.setState({ selectedContact: null });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"remove\", selection === null || selection.length === 0);\r\n }\r\n\r\n successfulContactRemoveCallback = (response) => {\r\n\r\n if (!utils.isNull(response.EntityId) && response.EntityId === 0) {\r\n this.setState({ selectedContact: null, removeMessage: response.Message, removeMessageStyle: response.MessageType.toLowerCase() });\r\n //Force a refresh\r\n this.setState({ searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)) })\r\n }\r\n }\r\n\r\n unsuccessfulContactRemoveCallback = (response) => {\r\n if (!utils.isNull(response.Message) && response.Message !== \"\") {\r\n this.setState({ removeMessage: response.Message, removeMessageStyle: response.MessageType.toLowerCase() })\r\n }\r\n }\r\n\r\n removeContact(url) {\r\n this.setState({ promptOpen: false }, () => {\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n })\r\n\r\n let fullUrl = `${url}?id=${this.state.selectedContact}&employerId=${this.props.location.state.selection}`;\r\n utils.invokeUrlDelete(fullUrl, this.successfulContactRemoveCallback, this.unsuccessfulContactRemoveCallback);\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ propmtOpen: false })\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Client > Contacts\" + (this.props.location.state !== null ? \" > \" + this.props.location.state.employerName + (this.props.location.state.employerSDLNo !== null ? \" - \" + this.props.location.state.employerSDLNo : \"\") : \"> Add\")}\r\n
\r\n \r\n\r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig} />\r\n\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={true} />\r\n
\r\n\r\n this.postAddHandler(isCancelled, linked)}\r\n >\r\n \r\n \r\n\r\n { this.removeContact(\"api/sims/employercontact/RemoveEmployerContact\") }}\r\n closePrompt={this.closePrompt}\r\n />\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(employerContactSearch)\r\n);\r\n","import React from 'react';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst utils = new ViewUtils();\r\nexport const EmployerAddContactForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n","/// \r\n\r\nimport React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport Prompt from '../../widgets/Prompt';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport FormDialog from \"../FormDialog\";\r\nimport { EmployerAddContactForm } from \"../employer/EmployerAddBillingContactForm\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\n\r\nconst headCells = [\r\n { id: 'FirstName', numeric: false, disablePadding: true, label: 'First Name' },\r\n { id: 'Surname', numeric: false, disablePadding: true, label: 'Surname' },\r\n { id: 'Designation', numeric: false, disablePadding: true, label: 'Designation' },\r\n { id: 'TelephoneNumber', numeric: false, disablePadding: true, label: 'Telephone Number' },\r\n { id: 'CellPhoneNumber', numeric: false, disablePadding: true, label: 'CellPhone Number' },\r\n { id: 'FaxNumber', numeric: false, disablePadding: true, label: 'Fax Number' },\r\n { id: 'EMail', numeric: false, disablePadding: true, label: 'EMail' }\r\n\r\n];\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nconst addFormRef = React.createRef();\r\n\r\nclass employerContactSearch extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n\r\n formDialogOpen: false,\r\n selectedContact: null,\r\n propmtOpen: false,\r\n promptTitle: \"Remove contact from client\",\r\n promptContent: \"Are you sure you want to remove this contact from the client?\",\r\n removeMessage: \"\",\r\n removeMessageStyle: \"\",\r\n searchParameters: [{ Name: \"EmployerID\", Value: this.props.location.state.selection }]\r\n \r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n }\r\n ,\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Add contact to client', icon: 'AddIcon' },\r\n { id: 'remove', label: '', tooltip: 'Remove contact from client', icon: 'DeleteIcon', disabled: utils.isNull(this.state.selectedContact) }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/employer',\r\n state: { selection: this.props.location.state.selection }\r\n });\r\n }\r\n else if (\"add\" === buttonId) {\r\n this.setState({ formDialogOpen: true })\r\n }\r\n else if (\"remove\" === buttonId) {\r\n this.setState({ promptOpen: true })\r\n }\r\n }\r\n\r\n postAddHandler(isCancel, linked) {\r\n if (linked === true) {\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)),\r\n formDialogOpen: false\r\n });\r\n }\r\n else if (isCancel === true) {\r\n this.setState({\r\n formDialogOpen: false\r\n })\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedContact: selection[0].Id });\r\n } else {\r\n this.setState({ selectedContact: null });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"remove\", selection === null || selection.length === 0);\r\n }\r\n\r\n successfulContactRemoveCallback = (response) => {\r\n\r\n if (!utils.isNull(response.EntityId) && response.EntityId === 0) {\r\n this.setState({ selectedContact: null, removeMessage: response.Message, removeMessageStyle: response.MessageType.toLowerCase() });\r\n //Force a refresh\r\n this.setState({ searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)) })\r\n }\r\n }\r\n\r\n unsuccessfulContactRemoveCallback = (response) => {\r\n if (!utils.isNull(response.Message) && response.Message !== \"\") {\r\n this.setState({ removeMessage: response.Message, removeMessageStyle: response.MessageType.toLowerCase() })\r\n }\r\n }\r\n\r\n removeContact(url) {\r\n this.setState({ promptOpen: false }, () => {\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n })\r\n\r\n let fullUrl = `${url}?id=${this.state.selectedContact}&employerId=${this.props.location.state.selection}`;\r\n utils.invokeUrlDelete(fullUrl, this.successfulContactRemoveCallback, this.unsuccessfulContactRemoveCallback);\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ propmtOpen: false })\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Client > Billing Contacts\" + (this.props.location.state !== null ? \" > \" + this.props.location.state.employerName + (this.props.location.state.employerSDLNo !== null ? \" - \" + this.props.location.state.employerSDLNo : \"\") : \"> Add\")}\r\n
\r\n \r\n\r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig} />\r\n\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={true} />\r\n
\r\n\r\n this.postAddHandler(isCancelled, linked)}\r\n >\r\n \r\n \r\n\r\n { this.removeContact(\"api/sims/employerBillingcontact/RemoveEmployerBillingContact\") }}\r\n closePrompt={this.closePrompt}\r\n />\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(employerContactSearch)\r\n);\r\n","import React from 'react';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n paper: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n dot: {\r\n alignSelf: 'stretch',\r\n height: '17px',\r\n width: '16px',\r\n margin: theme.spacing(1, 0),\r\n backgroundColor: 'grey',\r\n borderRadius: '50%',\r\n display: 'inline-block'\r\n },\r\n line: {\r\n height: '1px',\r\n width: 'calc(50% - 8px)',\r\n margin: \"16px 0\",\r\n backgroundColor: 'grey',\r\n display: 'inline-block'\r\n },\r\n spacer: {\r\n width: 'calc(50% - 8px)',\r\n display: 'inline-block'\r\n },\r\n vDot: {\r\n alignSelf: 'stretch',\r\n height: '17px',\r\n width: '16px',\r\n margin: theme.spacing(1, 0),\r\n backgroundColor: theme.palette.secondary.main,\r\n borderRadius: '48%',\r\n display: 'inline-block'\r\n },\r\n visitedLine: {\r\n height: '1px',\r\n width: 'calc(50% - 8px)',\r\n margin: \"16px 0\",\r\n backgroundColor: theme.palette.secondary.main,\r\n display: 'inline-block'\r\n },\r\n text: {\r\n color: 'black'\r\n },\r\n vText: {\r\n color: theme.palette.secondary.main\r\n }\r\n}));\r\n\r\nexport default function LinearFlowHeading(props) {\r\n const { steps } = props;\r\n let segmentPercentage = 100 / props.steps.length;\r\n const { currentIndex } = props;\r\n let counter = -1;\r\n let graphicsCounter = -1;\r\n\r\n const classes = useStyles();\r\n return (\r\n \r\n
\r\n \r\n \r\n {steps.map(step => (\r\n | \r\n \r\n {step.name}\r\n \r\n | \r\n ))}\r\n
\r\n \r\n {steps.map(step => (\r\n ++graphicsCounter == 0 ?\r\n | \r\n \r\n \r\n \r\n | \r\n :\r\n \r\n \r\n \r\n {graphicsCounter === steps.length - 1 ?\r\n \r\n :\r\n \r\n }\r\n | \r\n ))}\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n | \r\n \r\n | \r\n \r\n \r\n | \r\n
\r\n {\r\n (props.isSouthAfricanFlag) ?\r\n \r\n | \r\n \r\n | \r\n
\r\n :\r\n \r\n | \r\n \r\n | \r\n
\r\n }\r\n \r\n | \r\n \r\n | \r\n \r\n \r\n | \r\n
\r\n \r\n | \r\n \r\n | \r\n \r\n \r\n | \r\n
\r\n \r\n | \r\n \r\n | \r\n \r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n ID Document Upload\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n this.fileUploadHandler(data)}\r\n onProcessHandler={() => this.processFileHandler()}\r\n disabled={!this.state.isSouthAfrican}\r\n />\r\n | \r\n \r\n Personal Details \r\n {\r\n !utils.isStringEmpty(this.state.message) ?\r\n \r\n {this.state.message}\r\n \r\n :\r\n \"\"\r\n }\r\n {this.state.showTable === true && (\r\n \r\n )}\r\n
\r\n \r\n \r\n {\r\n this.state.searchResult.PersonFound === true ?\r\n \r\n {this.state.searchResult.RoleRecordFound === false ?\r\n \r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} enabled={typeof this.state.selection !== 'undefined' && this.state.selection !== null && this.state.selection.length > 0} config={nextToolbarConfig} />\r\n \r\n | \r\n \r\n \r\n \r\n : \"\"\r\n }\r\n \r\n :\r\n \"\"\r\n }\r\n {\r\n this.state.searchResult.RoleRecordFound === false && this.state.searchResult.PersonFound === false &&\r\n this.state.searchResult.DataValid === true && this.state.searched === true ?\r\n \r\n \r\n A person with ID number {this.state.currentIdNumber} does not exist in the system. {this.state.searchResult.IdVerificationMessage} \r\n \r\n {this.state.searchResult.IdValid === true ?\r\n \r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} enabled={typeof this.state.selection !== 'undefined' && this.state.selection !== null && this.state.selection.length > 0} config={createNewToolbarConfig} />\r\n \r\n | \r\n \r\n \r\n \r\n :\r\n \"\"\r\n }\r\n \r\n :\r\n \"\"\r\n }\r\n | \r\n
\r\n \r\n
\r\n
\r\n Learner Details\r\n
\r\n \r\n this.handleFormValueChange(values)} />\r\n
\r\n \r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} config={toolbarConfig} />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(AddLearnerDetails)\r\n);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Learner.css\";\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { LearnerLearnershipForm } from '../program/registration/LearnerLearnershipForm';\r\nimport { LearnerSkillsProgramForm } from '../program/registration/LearnerSkillsProgramForm';\r\nimport { LearnerUnitStandardForm } from '../program/registration/LearnerUnitStandardForm';\r\nimport { LearnerQualificationForm } from '../program/registration/LearnerQualificationForm';\r\nimport { LearnerTradeForm } from \"../program/registration/LearnerTradeForm\";\r\nimport { LearnerInternshipForm } from \"../program/registration/LearnerInternshipForm\";\r\nimport { LearnerBursaryForm } from \"../program/registration/LearnerBursaryForm\";\r\nimport { LearnerAETForm } from \"../program/registration/LearnerAETForm\";\r\nimport { LearnerFETForm } from \"../program/registration/LearnerFETForm\";\r\nimport { LearnerCandidacyForm } from \"../program/registration/LearnerCandidacyForm\";\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'back', label: 'BACK', tooltip: 'Back to Search', theme: true },\r\n { id: 'finish', label: 'FINISH', tooltip: 'Save and Finish Process', theme: true }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst learnershipFormRef = React.createRef();\r\nconst skillsProgramFormRef = React.createRef();\r\nconst unitStandardFormRef = React.createRef();\r\nconst qualificationFormRef = React.createRef();\r\n\r\nconst tradeFormRef = React.createRef();\r\nconst internshipFormRef = React.createRef();\r\nconst bursaryFormRef = React.createRef();\r\nconst aetFormRef = React.createRef();\r\nconst fetFormRef = React.createRef();\r\nconst candidacyFormRef = React.createRef();\r\n\r\nconst utils = new ViewUtils();\r\n\r\nclass AddLearnerProgram extends Component {\r\n\r\n state = {\r\n model: {},\r\n searchParameters: null,\r\n message: \"\",\r\n formValue: { Intervension: null },\r\n selection: {},\r\n selectedIntervension: null\r\n };\r\n\r\n handleFormValueChange(values) {\r\n this.setState({ model: values });\r\n }\r\n\r\n handleProgrammeFormValueChange(values) {\r\n console.clear();\r\n console.log(values);\r\n if (!utils.isNull(values)) {\r\n this.setState({ selectedIntervension: values.Intervension });\r\n }\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n\r\n if (\"back\" === buttonId) {\r\n this.props.stepHandler(3, false, this.state.model);\r\n } else if (\"finish\" === buttonId) {\r\n let formValue = null;\r\n\r\n if (!utils.isNull(this.state.selectedIntervension)) {\r\n if ((1 == this.state.selectedIntervension.Id)) {\r\n formValue = learnershipFormRef.current.getValue();\r\n } else if ((2 == this.state.selectedIntervension.Id)) {\r\n formValue = skillsProgramFormRef.current.getValue();\r\n } else if ((3 == this.state.selectedIntervension.Id)) {\r\n formValue = unitStandardFormRef.current.getValue();\r\n } else if ((4 == this.state.selectedIntervension.Id)) {\r\n formValue = qualificationFormRef.current.getValue();\r\n } else if ((5 == this.state.selectedIntervension.Id)) {\r\n formValue = tradeFormRef.current.getValue();\r\n } else if ((6 == this.state.selectedIntervension.Id)) {\r\n formValue = internshipFormRef.current.getValue();\r\n } else if ((7 == this.state.selectedIntervension.Id)) {\r\n formValue = bursaryFormRef.current.getValue();\r\n } else if ((8 == this.state.selectedIntervension.Id)) {\r\n formValue = aetFormRef.current.getValue();\r\n } else if ((9 == this.state.selectedIntervension.Id)) {\r\n formValue = fetFormRef.current.getValue();\r\n } else if ((10 == this.state.selectedIntervension.Id)) {\r\n formValue = candidacyFormRef.current.getValue();\r\n }\r\n\r\n if (!utils.isNull(formValue)) {\r\n formValue.programmeType = this.state.selectedIntervension.Id;\r\n this.props.stepHandler(3, true, formValue);\r\n }\r\n }\r\n else {\r\n formValue= {};\r\n this.props.stepHandler(3, true, formValue);\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {\r\n !utils.isStringEmpty(this.props.saveMessage) ?\r\n
\r\n {this.props.saveMessage}\r\n
\r\n :\r\n \"\"\r\n }\r\n
{ this.handleProgrammeFormValueChange(values); }}>\r\n {form =>\r\n \r\n }\r\n \r\n {\r\n !utils.isNull(this.state.selectedIntervension) && this.state.selectedIntervension.Id == 1 ?\r\n
\r\n
\r\n Enroll to a Learnership\r\n
\r\n
\r\n { this.handleFormValueChange(values) }} />\r\n
\r\n
\r\n :\r\n \"\"\r\n }\r\n {\r\n !utils.isNull(this.state.selectedIntervension) && this.state.selectedIntervension.Id == 2 ?\r\n
\r\n
\r\n Enroll to a Skills Program\r\n
\r\n
\r\n { this.handleFormValueChange(values) }} />\r\n
\r\n
\r\n :\r\n \"\"\r\n }\r\n {\r\n !utils.isNull(this.state.selectedIntervension) && this.state.selectedIntervension.Id == 3 ?\r\n
\r\n
\r\n Enroll to a Unit Standard\r\n
\r\n
\r\n { this.handleFormValueChange(values) }} />\r\n
\r\n
\r\n :\r\n \"\"\r\n }\r\n {\r\n !utils.isNull(this.state.selectedIntervension) && this.state.selectedIntervension.Id == 4 ?\r\n
\r\n
\r\n Enroll to a Qualification\r\n
\r\n
\r\n { this.handleFormValueChange(values) }} />\r\n
\r\n
\r\n :\r\n \"\"\r\n }\r\n {\r\n !utils.isNull(this.state.selectedIntervension) && this.state.selectedIntervension.Id == 5 ?\r\n
\r\n
\r\n Enroll to a Trade\r\n
\r\n
\r\n { this.handleFormValueChange(values) }} />\r\n
\r\n
\r\n :\r\n \"\"\r\n }\r\n {\r\n !utils.isNull(this.state.selectedIntervension) && this.state.selectedIntervension.Id == 6 ?\r\n
\r\n
\r\n Enroll to a Internship\r\n
\r\n
\r\n { this.handleFormValueChange(values) }} />\r\n
\r\n
\r\n :\r\n \"\"\r\n }\r\n {\r\n !utils.isNull(this.state.selectedIntervension) && this.state.selectedIntervension.Id == 7 ?\r\n
\r\n
\r\n Enroll to a Bursary\r\n
\r\n
\r\n { this.handleFormValueChange(values) }} />\r\n
\r\n
\r\n :\r\n \"\"\r\n }\r\n {\r\n !utils.isNull(this.state.selectedIntervension) && this.state.selectedIntervension.Id == 8 ?\r\n
\r\n
\r\n Enroll to an AET\r\n
\r\n
\r\n { this.handleFormValueChange(values) }} />\r\n
\r\n
\r\n :\r\n \"\"\r\n }\r\n {\r\n !utils.isNull(this.state.selectedIntervension) && this.state.selectedIntervension.Id == 9 ?\r\n
\r\n
\r\n Enroll to an FET Placement\r\n
\r\n
\r\n { this.handleFormValueChange(values) }} />\r\n
\r\n
\r\n :\r\n \"\"\r\n }\r\n {\r\n !utils.isNull(this.state.selectedIntervension) && this.state.selectedIntervension.Id == 10 ?\r\n
\r\n
\r\n Enroll to a Candidacy Programme\r\n
\r\n
\r\n { this.handleFormValueChange(values) }} />\r\n
\r\n
\r\n :\r\n \"\"\r\n }\r\n
\r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} config={toolbarConfig} />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n})\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Learner.css\";\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { AccreditationHistory } from './AccreditationHistory';\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'back', label: 'BACK', tooltip: 'Back to Learner details', theme: true },\r\n { id: 'next', label: 'NEXT', tooltip: 'Proceed to programs', theme: true }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst utils = new ViewUtils();\r\nclass AddLearnerAccreditationHistory extends Component {\r\n\r\n state = {\r\n searchParameters: null,\r\n message: \"\",\r\n selectedIntervension: -1,\r\n selection: {},\r\n openDialog: false\r\n };\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"back\" === buttonId) {\r\n this.props.stepHandler(2, false, this.props.data);\r\n } else if (\"next\" === buttonId) {\r\n this.props.stepHandler(2, true, this.props.data);\r\n }\r\n }\r\n\r\n\r\n handleFormValueChange(values) {\r\n }\r\n\r\n handleDataArrived(data) {\r\n }\r\n\r\n handleLearnershipToolbarButtonClick(buttonId) {\r\n if (\"add\" === buttonId) {\r\n this.setState({ openDialog: true });\r\n }\r\n }\r\n\r\n handleSkillsToolbarButtonClick(buttonId) {\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({\r\n searchParameters: [{ Name: \"IDNo\", Value: this.props.data.IDNo }]\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n \r\n | \r\n \r\n | \r\n
\r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} config={toolbarConfig} />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n {this.state.currentStepIndex === 0 ?
this.stepHandler(index, forward, data)} /> : \"\"}\r\n {this.state.currentStepIndex === 1 ? this.stepHandler(index, forward, data)} /> : \"\"}\r\n {this.state.currentStepIndex === 2 ? this.stepHandler(index, forward, data)} /> : \"\"}\r\n {this.state.currentStepIndex === 3 ? this.stepHandler(index, forward, data)} saveMessage={this.state.saveMessage} hasSaveError={this.state.hasSaveError} /> : \"\"}\r\n \r\n
\r\n
\r\n \r\n \r\n | \r\n \r\n | \r\n
\r\n \r\n | \r\n \r\n | \r\n \r\n \r\n | \r\n
\r\n \r\n | \r\n \r\n | \r\n \r\n \r\n | \r\n
\r\n \r\n | \r\n \r\n | \r\n \r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n ID Document Upload\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n this.fileUploadHandler(data)}\r\n onProcessHandler={() => this.processFileHandler()}\r\n />\r\n | \r\n \r\n Personal Details \r\n {\r\n !utils.isStringEmpty(this.state.message) ?\r\n \r\n {this.state.message}\r\n \r\n :\r\n \"\"\r\n }\r\n \r\n
\r\n \r\n \r\n {\r\n this.state.searchResult.PersonFound === true ?\r\n \r\n {this.state.searchResult.RoleRecordFound === false ?\r\n \r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} enabled={typeof this.state.selection !== 'undefined' && this.state.selection !== null && this.state.selection.length > 0} config={nextToolbarConfig} />\r\n \r\n | \r\n \r\n \r\n \r\n : \"\"\r\n }\r\n \r\n :\r\n \"\"\r\n }\r\n {\r\n this.state.searchResult.RoleRecordFound === false && this.state.searchResult.PersonFound === false &&\r\n this.state.searchResult.DataValid === true && this.state.searched === true ?\r\n \r\n \r\n A person with ID number {this.state.currentIdNumber} does not exist in the system. {this.state.searchResult.IdVerificationMessage} \r\n \r\n {this.state.searchResult.IdValid === true ?\r\n \r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} enabled={typeof this.state.selection !== 'undefined' && this.state.selection !== null && this.state.selection.length > 0} config={createNewToolbarConfig} />\r\n \r\n | \r\n \r\n \r\n \r\n :\r\n \"\"\r\n }\r\n \r\n :\r\n \"\"\r\n }\r\n | \r\n
\r\n \r\n
\r\n
\r\n Person Details\r\n
\r\n \r\n
this.handleFormValueChange(values)} />\r\n \r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} config={toolbarConfig} />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(AddPersonDetails)\r\n);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport LinearFlowHeading from '../../widgets/LinearFlowHeading';\r\nimport AddPersonSearch from './AddPersonSearch';\r\nimport AddPersonDetails from './AddPersonDetails';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst steps = [\r\n { name: \"Identity Details\", tooltip: \"Search the system for an existing person. If one does not extist, click proceed to create a new person\" },\r\n { name: \"Person Details\", tooltip: \"Capture person details\" },\r\n];\r\n\r\nconst utils = new ViewUtils();\r\nclass AddPersonFlow extends Component {\r\n state = {\r\n currentStepIndex: 0,\r\n model: {},\r\n personDetails: {},\r\n documents: {},\r\n program: {},\r\n saveMessage: \"\",\r\n hasSaveError: false\r\n }\r\n\r\n stepHandler(index, forward, data) {\r\n if (index === 0) {\r\n this.setState({ personDetails: data });\r\n }\r\n\r\n if (forward) {\r\n let dataObject = {};\r\n dataObject.PersonDto = this.state.personDetails;\r\n\r\n if (!utils.isNull(this.state.personDetails)) {\r\n dataObject.PersonDto.PersonID = this.state.personDetails.ID;\r\n }\r\n\r\n let input = JSON.stringify(dataObject);\r\n\r\n const url = `api/indicium/learner/addPerson?data=${input}`;\r\n let learnerData = {};\r\n learnerData.data = input;\r\n\r\n utils.invokeUrl(\"api/indicium/learner/addLearner\", (data) => {\r\n this.props.history.push({\r\n pathname: '/learners'\r\n })\r\n }, () => { alert(utils.SYSTEM_ERROR_MESSAGE) }, {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n \"Authorization\": \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(learnerData)\r\n });\r\n }\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"save\" === buttonId) {\r\n //save();\r\n } else {\r\n //close();\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n utils.setLegend(\"Add Person\");\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n {this.state.currentStepIndex === 0 ?
this.stepHandler(index, forward, data)} /> : \"\"}\r\n {this.state.currentStepIndex === 1 ? this.stepHandler(index, forward, data)} /> : \"\"}\r\n \r\n ID Document Upload\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n this.fileUploadHandler(data)}\r\n onProcessHandler={() => this.processFileHandler()}\r\n disabled={!this.state.isSouthAfrican}\r\n />\r\n | \r\n \r\n Personal Details \r\n {\r\n !utils.isStringEmpty(this.state.message) ?\r\n \r\n {this.state.message}\r\n \r\n :\r\n \"\"\r\n }\r\n {this.state.showTable === true && (\r\n \r\n )}\r\n
\r\n \r\n \r\n {\r\n this.state.searchResult.PersonFound === true ?\r\n \r\n {this.state.searchResult.RoleRecordFound === false ?\r\n \r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} enabled={typeof this.state.selection !== 'undefined' && this.state.selection !== null && this.state.selection.length > 0} config={nextToolbarConfig} />\r\n \r\n | \r\n \r\n \r\n \r\n : \"\"\r\n }\r\n \r\n :\r\n \"\"\r\n }\r\n {\r\n this.state.searchResult.RoleRecordFound === false && this.state.searchResult.PersonFound === false &&\r\n this.state.searchResult.DataValid === true && this.state.searched === true ?\r\n \r\n \r\n A person with ID number {this.state.currentIdNumber} does not exist in the system. {this.state.searchResult.IdVerificationMessage} \r\n \r\n {this.state.searchResult.IdValid === true ?\r\n \r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} enabled={typeof this.state.selection !== 'undefined' && this.state.selection !== null && this.state.selection.length > 0} config={createNewToolbarConfig} />\r\n \r\n | \r\n \r\n \r\n \r\n :\r\n \"\"\r\n }\r\n \r\n :\r\n \"\"\r\n }\r\n | \r\n
\r\n \r\n
\r\n
\r\n Assessor Details\r\n
\r\n \r\n
this.handleFormValueChange(values)} />\r\n \r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} config={toolbarConfig} />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(AddLearnerDetails)\r\n);\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Assessor.css\";\r\nimport { AssessorRegistrationDetailsForm } from './AssessorRegistrationDetailsForm';\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport { ViewContainer } from \"../../View\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'back', label: 'BACK', tooltip: 'Back to assessor details', theme: true },\r\n { id: 'next', label: 'NEXT', tooltip: 'Proceed to add registration details', theme: true }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst formRef = React.createRef();\r\nclass AssessorRegistrationDetails extends Component {\r\n constructor(props) {\r\n super(props)\r\n let data = {};\r\n\r\n if (!utils.isNull(props.data) && !utils.isNull(props.data.registrationDetails)) {\r\n data = props.data.registrationDetails;\r\n }\r\n\r\n this.state = {\r\n model: data\r\n }\r\n }\r\n\r\n handleFormValueChange(values) {\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n let formValue = formRef.current.getValue();\r\n if (\"back\" === buttonId) {\r\n this.props.stepHandler(2, false, formValue);\r\n } else if (\"next\" === buttonId) {\r\n if (!utils.isNull(formValue)) {\r\n this.props.stepHandler(2, true, formValue);\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n Registration Details\r\n
\r\n \r\n
this.handleFormValueChange(values)} />\r\n \r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} config={toolbarConfig} />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(AssessorRegistrationDetails);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport UnitStandardSetupSearch from '../program/UnitStandardSetupSearch';\r\nimport QualificationSetupSearch from '../program/QualificationSetupSearch';\r\nimport SkillsProgrammeSetupSearch from '../program/SkillsProgramSetupSearch';\r\nimport LearnershipSetupSearch from '../program/LearnershipSetupSearch';\r\nimport LinkDialog from \"../LinkDialog\";\r\nimport { unitStandardHeadCells } from \"./AssessorUnitStandards\";\r\nimport { skillsProgrammeHeadCells } from \"./AssessorSkillsProgramme\";\r\nimport { qualificationHeadCells } from \"./AssessorQualifications\";\r\nimport { learnershipHeadCells } from \"./AssessorLearnerships\";\r\nimport { ViewContainer } from \"../../View\";\r\nimport { format } from \"date-fns\";\r\n\r\nconst linkToolbarRef = React.createRef();\r\nconst toolbarRef = React.createRef();\r\nconst formRef = React.createRef();\r\nconst utils = new ViewUtils();\r\n\r\nclass AddAssessorProgrammeDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n let nextButtonDisabled = true;\r\n\r\n if (!utils.isNull(this.props.data) && !utils.isNull(this.props.data.scopeDetails)) {\r\n nextButtonDisabled = this.props.data.scopeDetails.qualifications.length === 0 &&\r\n this.props.data.scopeDetails.skillsProgrammes.length === 0 && this.props.data.scopeDetails.unitStandards.length === 0;\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'back', label: 'BACK', tooltip: 'Back to Search', theme: true },\r\n { id: 'finish', label: 'FINISH', tooltip: 'Save assessor', theme: true, disabled: nextButtonDisabled }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n let qualificationIds = \"\";\r\n let skillsProgrammeIds = \"\";\r\n let unitStandardIds = \"\";\r\n let learnershipIds = \"\";\r\n\r\n if (!utils.isNull(props.data) && !utils.isNull(props.data.scopeDetails)) {\r\n this.setState({ qualificationIds: this.getIdList(props.data.scopeDetails.qualifications) });\r\n this.setState({ skillsProgrammeIds: this.getIdList(props.data.scopeDetails.skillsProgrammes) });\r\n this.setState({ unitStandardIds: this.getIdList(props.data.scopeDetails.unitStandards) });\r\n this.setState({ learnershipIds: this.getIdList(props.data.scopeDetails.learnerships) });\r\n }\r\n\r\n this.state = {\r\n model: !utils.isNull(props.data) && !utils.isNull(props.data.scopeDetails) ? props.data.scopeDetails : { unitStandards: [], skillsProgrammes: [], qualifications: [], learnerships: []},\r\n searchParameters: null,\r\n message: \"\",\r\n unitStandardIds: unitStandardIds,\r\n skillsProgrammeIds: skillsProgrammeIds,\r\n qualificationIds: qualificationIds,\r\n learnershipIds: learnershipIds,\r\n linkDialogOpen: false,\r\n propmtOpen: false,\r\n selectedUnitStandard: null,\r\n formValue: { Intervention: !utils.isNull(props.data) && !utils.isNull(props.data.scopeDetails) ? props.data.scopeDetails.selectedIntervention : null },\r\n assessorName: this.props.data.personRoleDetails.FirstName + \" \" + this.props.data.personRoleDetails.Surname\r\n };\r\n\r\n this.linkToolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'link', label: 'Link', tooltip: 'link the selected unit standard to the assessor' },\r\n { id: 'unlink', label: 'Unlink', tooltip: 'Un-link the selected unit standard from the assessor', disabled: utils.isNull(this.state.selectedUnitStandard) }\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n handleFormValueChange(values) {\r\n if (!utils.isNull(values)) {\r\n this.setState({ model: { ...this.state.model, [\"selectedIntervention\"]: values.Intervention } });\r\n if (!utils.isNull(linkToolbarRef.current)) {\r\n linkToolbarRef.current.setButtonDisabled(\"unlink\", true);\r\n }\r\n }\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"link\" === buttonId) {\r\n this.setState({ linkDialogOpen: true });\r\n }\r\n else if (\"unlink\" === buttonId) {\r\n if (!utils.isNull(this.state.selectedProgrammeId)) {\r\n let programmeName = this.state.model.selectedIntervention.Id === \"3\" ? \"learnerships\" :\r\n this.state.model.selectedIntervention.Id === \"1\" ? \"unitStandards\" :\r\n this.state.model.selectedIntervention.Id === \"4\" ? \"skillsProgrammes\" : \"qualifications\";\r\n\r\n let programmes = this.state.model[programmeName];\r\n let newProgrammes = [];\r\n\r\n for (let i = 0; i < programmes.length; i++) {\r\n if (programmes[i].Id !== this.state.selectedProgrammeId) {\r\n newProgrammes.push(programmes[i]);\r\n }\r\n }\r\n\r\n let newIds = this.getIdList(newProgrammes);\r\n this.state.model.selectedIntervention.Id === \"3\" ? this.setState({ learnershipIds: newIds }) :\r\n this.state.model.selectedIntervention.Id === \"1\" ? this.setState({ unitStandardIds: newIds }) :\r\n this.state.model.selectedIntervention.Id === \"4\" ? this.setState({ skillsProgrammeIds: newIds }) :\r\n this.setState({ qualificationIds: newIds });\r\n\r\n this.setState({ model: { ...this.state.model, [programmeName]: newProgrammes } }, () => {\r\n toolbarRef.current.setButtonDisabled(\"finish\", this.state.model.qualifications.length === 0 &&\r\n this.state.model.skillsProgrammes.length === 0 && this.state.model.unitStandards.length === 0\r\n && this.state.model.learnerships.length === 0\r\n );\r\n });\r\n }\r\n } else if (\"back\" === buttonId) {\r\n this.props.stepHandler(4, false, this.state.model);\r\n } else if (\"finish\" === buttonId) {\r\n this.props.stepHandler(4, true, this.state.model);\r\n }\r\n }\r\n\r\n postLinkHandler(isCancel, linked) {\r\n this.setState({ linkDialogOpen: !isCancel && !linked})\r\n }\r\n\r\n getIdList(programmes) {\r\n let exclusions = \"\";\r\n\r\n for (let i = 0; i < programmes.length; i++) {\r\n exclusions += programmes[i].Id;\r\n if (i < programmes.length - 1) {\r\n exclusions += \",\"\r\n }\r\n }\r\n\r\n return exclusions;\r\n }\r\n\r\n saveProgramme(selection, programmeName) {\r\n for (let i = 0; i < selection.length; i++) {\r\n selection[i].AssessorAssessmentEndDate = format(this.props.data.registrationDetails.RegistrationEndDate, \"yyyy/MM/dd HH:mm:ss\");\r\n this.state.model[programmeName].push(selection[i]);\r\n }\r\n\r\n toolbarRef.current.setButtonDisabled(\"finish\", this.state.model.qualifications.length === 0 &&\r\n this.state.model.skillsProgrammes.length === 0 && this.state.model.unitStandards.length === 0\r\n && this.state.model.learnerships.length === 0);\r\n }\r\n\r\n saveQualifications(selection) {\r\n this.saveProgramme(selection, \"qualifications\");\r\n this.setState({ qualificationIds: this.getIdList(selection) });\r\n }\r\n \r\n saveSkillsProgrammes(selection) {\r\n this.saveProgramme(selection, \"skillsProgrammes\");\r\n this.setState({ skillsProgrammeIds: this.getIdList(selection) });\r\n }\r\n\r\n saveUnitStandards(selection) {\r\n this.saveProgramme(selection, \"unitStandards\");\r\n this.setState({ unitStandardIds: this.getIdList(selection) });\r\n }\r\n\r\n saveLearnerships(selection) {\r\n this.saveProgramme(selection, \"learnerships\");\r\n this.setState({ learnershipIds: this.getIdList(selection) });\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedProgrammeId: selection[0].Id });\r\n } else {\r\n this.setState({ selectedProgrammeId: null });\r\n }\r\n linkToolbarRef.current.setButtonDisabled(\"unlink\", selection === null || selection.length === 0);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {\r\n !utils.isStringEmpty(this.props.saveMessage) ?\r\n \r\n {this.props.saveMessage}\r\n
\r\n :\r\n null\r\n }\r\n { this.handleFormValueChange(values) }}>\r\n {form =>\r\n \r\n }\r\n \r\n {\r\n !utils.isNull(this.state.model.selectedIntervention) ?\r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={linkToolbarRef} config={this.linkToolbarConfig} />\r\n
:\r\n null\r\n }\r\n {\r\n !utils.isNull(this.state.model.selectedIntervention) && this.state.model.selectedIntervention.Id === \"4\" ?\r\n \r\n
\r\n Skills Programmes\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={false} />\r\n
\r\n
{ this.saveSkillsProgrammes(selection) }}\r\n closeHandler={(isCancelled, linked) => this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Skills Programmes to Assessor: ${this.state.assessorName}`}\r\n >\r\n \r\n \r\n
\r\n
\r\n Unit Standards\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={false} />\r\n
\r\n
{this.saveUnitStandards(selection)}}\r\n closeHandler={(isCancelled, linked) => this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Unit Standards to Assessor: ${this.state.assessorName}`}\r\n >\r\n \r\n \r\n
\r\n
\r\n Qualifications\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={false} />\r\n
\r\n
{ this.saveQualifications(selection) }}\r\n closeHandler={(isCancelled, linked) => this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Qualification to Assessor: ${this.state.assessorName}`}\r\n >\r\n \r\n \r\n
\r\n
\r\n Learnerships\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={false} />\r\n
\r\n
{ this.saveLearnerships(selection) }}\r\n closeHandler={(isCancelled, linked) => this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Learnership to Assessor: ${this.state.assessorName}`}\r\n >\r\n \r\n \r\n
\r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} config={this.toolbarConfig} />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(AddAssessorProgrammeDetails)\r\n);\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Assessor.css\";\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport { ViewContainer } from \"../../View\";\r\nimport ProviderSearch from \"../provider/ProviderSearch\";\r\nimport { headCells } from \"../provider/ProviderSearch\";\r\nimport { format } from \"date-fns\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport LinkDialog from \"../LinkDialog\";\r\n\r\nconst linkToolbarRef = React.createRef();\r\nconst toolbarRef = React.createRef();\r\nconst utils = new ViewUtils();\r\n\r\nclass AddAssessorTrainingProvider extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n let nextButtonDisabled = true;\r\n if (!utils.isNull(this.props.data) && !utils.isNull(this.props.data.trainingProviderDetails)) {\r\n nextButtonDisabled = this.props.data.trainingProviderDetails.trainingProviders.length === 0;\r\n }\r\n\r\n console.clear()\r\n console.log(this.props)\r\n\r\n let trainingProviderIds = \"\";\r\n if (!utils.isNull(props.data) && !utils.isNull(props.data.trainingProviderDetails)) {\r\n trainingProviderIds = this.getIdList(props.data.trainingProviderDetails.trainingProviders);\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'back', label: 'BACK', tooltip: 'Back to Search', theme: true },\r\n { id: 'next', label: 'NEXT', tooltip: 'Proceed to Training Provider', theme: true, disabled: nextButtonDisabled }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n this.linkToolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'link', label: 'Link', tooltip: 'link the selected unit standard to the assessor' },\r\n { id: 'unlink', label: 'Unlink', tooltip: 'Un-link the selected unit standard from the assessor', disabled: true }\r\n ]\r\n }\r\n ]\r\n };\r\n this.state = {\r\n model: !utils.isNull(props.data) && !utils.isNull(props.data.trainingProviderDetails) ? props.data.trainingProviderDetails : { trainingProviders: [] },\r\n searchParameters: null,\r\n message: \"\",\r\n trainingProviderIds: trainingProviderIds,\r\n linkDialogOpen: false,\r\n propmtOpen: false,\r\n assessorName: this.props.data.personRoleDetails.FirstName + \" \" + this.props.data.personRoleDetails.Surname\r\n };\r\n\r\n }\r\n\r\n postLinkHandler(isCancel, linked) {\r\n this.setState({ linkDialogOpen: !isCancel && !linked })\r\n }\r\n\r\n getIdList(programmes) {\r\n let exclusions = \"\";\r\n\r\n for (let i = 0; i < programmes.length; i++) {\r\n exclusions += programmes[i].Id;\r\n if (i < programmes.length - 1) {\r\n exclusions += \",\"\r\n }\r\n }\r\n\r\n return exclusions;\r\n }\r\n\r\n saveTrainingProvider(selection) {\r\n for (let i = 0; i < selection.length; i++) {\r\n selection[i].AssessorAssessmentEndDate = format(this.props.data.registrationDetails.RegistrationEndDate, \"yyyy/MM/dd HH:mm:ss\");\r\n this.state.model.trainingProviders.push(selection[i]);\r\n this.setState({ trainingProviderIds: this.getIdList(selection) });\r\n }\r\n\r\n toolbarRef.current.setButtonDisabled(\"next\", this.state.model.trainingProviders.length === 0);\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedTrainingProviderId: selection[0].Id });\r\n } else {\r\n this.setState({ selectedTrainingProviderId: null });\r\n }\r\n linkToolbarRef.current.setButtonDisabled(\"unlink\", selection === null || selection.length === 0);\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"link\" === buttonId) {\r\n this.setState({ linkDialogOpen: true });\r\n }\r\n else if (\"unlink\" === buttonId) {\r\n if (!utils.isNull(this.state.selectedTrainingProviderId)) {\r\n let trainingProviders = this.state.model.trainingProviders;\r\n let newTrainingProviders = [];\r\n\r\n for (let i = 0; i < trainingProviders.length; i++) {\r\n if (trainingProviders[i].Id !== this.state.selectedTrainingProviderId) {\r\n newTrainingProviders.push(trainingProviders[i]);\r\n }\r\n }\r\n\r\n let newIds = this.getIdList(newTrainingProviders);\r\n this.setState({ trainingProviderIds: newIds });\r\n\r\n this.setState({ model: { ...this.state.model, trainingProviders: newTrainingProviders } }, () => {\r\n toolbarRef.current.setButtonDisabled(\"next\", newIds.length === 0);\r\n });\r\n }\r\n } else if (\"back\" === buttonId) {\r\n this.props.stepHandler(3, false, this.state.model);\r\n } else if (\"next\" === buttonId) {\r\n this.props.stepHandler(3, true, this.state.model);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n Training Providers\r\n
\r\n
\r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={linkToolbarRef} config={this.linkToolbarConfig} />\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={false} />\r\n
\r\n
{ this.saveTrainingProvider(selection) }}\r\n closeHandler={(isCancelled, linked) => this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Training Provider to Assessor: ${this.state.assessorName}`}\r\n >\r\n \r\n \r\n
\r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} config={this.toolbarConfig} />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(AddAssessorTrainingProvider);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport LinearFlowHeading from '../../widgets/LinearFlowHeading';\r\nimport AddPersonRoleSearch from './../person/AddPersonRoleSearch';\r\nimport AddAssessorDetails from './AddAssessorDetails';\r\nimport AddAssessorRegistrationDetails from './AddAssessorRegistrationDetails';\r\nimport AddAssessorProgrammeDetails from './AddAssessorProgrammeDetails';\r\nimport AddAssessorTrainingProvider from './AddAssessorTrainingProvider';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\nconst steps = [\r\n { name: \"Identity Details\", tooltip: \"Search the system for an existing person. If one does not extist, click proceed to create a learner with a new person\" },\r\n { name: \"Assessor Details\", tooltip: \"Capture assessor details\" },\r\n { name: \"Registration Details\", tooltip: \"Capture registration details\" },\r\n { name: \"Training Providers\", tooltip: \"Link training providers\" },\r\n { name: \"Scope\", tooltip: \"Capture scope details\" }\r\n];\r\n\r\nconst utils = new ViewUtils();\r\nclass AddAssesorFlow extends Component {\r\n state = {\r\n currentStepIndex: 0,\r\n data: null,\r\n documents: {},\r\n saveMessage: \"\",\r\n hasSaveError: false\r\n }\r\n\r\n navigate(index, forward) {\r\n if (forward) {\r\n if (index !== 4) {\r\n this.setState({ currentStepIndex: index + 1 });\r\n }\r\n } else {\r\n this.setState({ currentStepIndex: index - 1 });\r\n }\r\n }\r\n\r\n stepHandler(index, forward, data) {\r\n if (index === 0) {\r\n if (!utils.isNull(this.state.data)\r\n && !utils.isNull(this.state.data.personRoleDetails) && !forward) {\r\n this.setState({\r\n data: {\r\n ...this.state.data,\r\n personRoleDetails: {\r\n ...this.state.data.personRoleDetails,\r\n Person: data.Person\r\n }\r\n }\r\n }, () => { this.navigate(index, forward) });\r\n } else {\r\n this.setState({\r\n data: data\r\n }, () => { this.navigate(index, forward) });\r\n }\r\n } else if (index === 1) {\r\n if (!utils.isNull(data)) {\r\n this.setState({\r\n data: { ...this.state.data, personRoleDetails: data }\r\n }, () => { this.navigate(index, forward) });\r\n } else if (!forward) {\r\n this.navigate(index, forward);\r\n }\r\n } else if (index === 2) {\r\n if (!utils.isNull(data)) {\r\n this.setState({\r\n data: { ...this.state.data, registrationDetails: data }\r\n }, () => { this.navigate(index, forward) });\r\n } else if (!forward) {\r\n this.navigate(index, forward);\r\n }\r\n } else if (index === 3) {\r\n if (!utils.isNull(data)) {\r\n this.setState({\r\n data: { ...this.state.data, trainingProviderDetails: data }\r\n }, () => { this.navigate(index, forward) });\r\n } else if (!forward) {\r\n this.navigate(index, forward);\r\n }\r\n } else if (index === 4) {\r\n if (!utils.isNull(data) && forward) {\r\n let assessorData = {};\r\n assessorData.Person = this.state.data.personRoleDetails;\r\n assessorData.RegistrationDetails = this.state.data.registrationDetails;\r\n assessorData.Scope = data;\r\n assessorData.Scope.selectedIntervension = null;\r\n assessorData.TrainingProviders = this.state.data.trainingProviderDetails.trainingProviders;\r\n\r\n utils.invokeUrl(\"api/sims/assessor/AddAssessor\", (data) => {\r\n this.props.history.push({\r\n pathname: '/assessorSearch'\r\n })\r\n }, () => { alert(utils.SYSTEM_ERROR_MESSAGE) }, {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n \"Authorization\": \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(assessorData)\r\n });\r\n } else {\r\n this.setState({\r\n data: { ...this.state.data, scopeDetails: data }\r\n }, () => { this.navigate(index, forward) });\r\n }\r\n }\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n }\r\n\r\n componentDidMount() {\r\n utils.setLegend(\"Add Assessor\");\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n {this.state.currentStepIndex === 0 ?\r\n\r\n this.stepHandler(index, forward, data)} />\r\n : null}\r\n {this.state.currentStepIndex === 1 ? this.stepHandler(index, forward, data)} /> : \"\"}\r\n {this.state.currentStepIndex === 2 ? this.stepHandler(index, forward, data)} /> : \"\"}\r\n {this.state.currentStepIndex === 3 ? this.stepHandler(index, forward, data)} /> : \"\"}\r\n {this.state.currentStepIndex === 4 ? this.stepHandler(index, forward, data)} /> : \"\"}\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(AddAssesorFlow));\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport { ModeratorForm } from './ModeratorForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'back', label: 'BACK', tooltip: 'Back to document upload', theme: true },\r\n { id: 'next', label: 'NEXT', tooltip: 'Proceed to add registration details', theme: true }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst formRef = React.createRef();\r\nclass AddLearnerDetails extends Component {\r\n constructor(props) {\r\n super(props)\r\n let data = {};\r\n\r\n if (!utils.isNull(props.data) && !utils.isNull(props.data.personRoleDetails)) {\r\n data = props.data.personRoleDetails.Person;\r\n } else if (!utils.isNull(props.data) && !utils.isNull(props.data.identityDetails)) {\r\n data.Person = props.data.identityDetails.Person;\r\n } else {\r\n data.Person = {};\r\n }\r\n\r\n this.state = {\r\n model: data\r\n }\r\n }\r\n\r\n handleFormValueChange() {\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n let formValue = formRef.current.getValue();\r\n if (\"back\" === buttonId) {\r\n this.props.stepHandler(1, false, formValue);\r\n } else if (\"next\" === buttonId) {\r\n if (!utils.isNull(formValue)) {\r\n this.props.stepHandler(1, true, formValue);\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n Moderator Details\r\n
\r\n \r\n this.handleFormValueChange(values)} />\r\n
\r\n \r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} config={toolbarConfig} />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(AddLearnerDetails)\r\n);\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Moderator.css\";\r\nimport { ModeratorRegistrationDetailsForm } from './ModeratorRegistrationDetailsForm';\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport { ViewContainer } from \"../../View\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'back', label: 'BACK', tooltip: 'Back to Moderator details', theme: true },\r\n { id: 'next', label: 'NEXT', tooltip: 'Proceed to add registration details', theme: true }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst formRef = React.createRef();\r\nclass ModeratorRegistrationDetails extends Component {\r\n constructor(props) {\r\n super(props)\r\n let data = {};\r\n\r\n if (!utils.isNull(props.data) && !utils.isNull(props.data.registrationDetails)) {\r\n data = props.data.registrationDetails;\r\n }\r\n\r\n this.state = {\r\n model: data\r\n }\r\n }\r\n\r\n handleFormValueChange(values) {\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n let formValue = formRef.current.getValue();\r\n if (\"back\" === buttonId) {\r\n this.props.stepHandler(2, false, formValue);\r\n } else if (\"next\" === buttonId) {\r\n if (!utils.isNull(formValue)) {\r\n this.props.stepHandler(2, true, formValue);\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n Registration Details\r\n
\r\n \r\n this.handleFormValueChange(values)} />\r\n
\r\n \r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} config={toolbarConfig} />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(ModeratorRegistrationDetails);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport UnitStandardSetupSearch from '../program/UnitStandardSetupSearch';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport LinkDialog from \"../LinkDialog\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable'; \r\nimport Prompt from '../../widgets/Prompt';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\nexport const unitStandardHeadCells = [\r\n { id: 'SAQAUnitStandardID', numeric: false, disablePadding: true, label: 'UnitStandard ID' },\r\n { id: 'SAQAUnitStandardTitle', numeric: false, disablePadding: true, label: 'UnitStandard Title' },\r\n { id: 'Credits', numeric: false, disablePadding: true, label: 'Credits' },\r\n { id: 'UnitStandardRegistrationStartDate', numeric: false, disablePadding: true, label: 'Registration Start Date' },\r\n { id: 'UnitStandardRegistrationEndDate', numeric: false, disablePadding: true, label: 'Registration End Date' },\r\n { id: 'UnitStandardLastDateForEnrolment', numeric: false, disablePadding: true, label: 'Last Date For Enrolment' },\r\n { id: 'UnitStandardLastDateForAchievement', numeric: false, disablePadding: true, label: 'Last Date For Achievement' },\r\n { id: 'AssessorAssessmentEndDate', numeric: false, disablePadding: true, label: 'Assessor Assessment End Date' }\r\n];\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\n\r\nclass UnitStandardSearch extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n model: {\r\n SAQAUnitStandardID: \"\",\r\n SAQAUnitStandardTitle: \"\",\r\n AssessorID: this.props.location.state.AssessorID\r\n },\r\n\r\n linkDialogOpen: false,\r\n selectedUnitStandard: null,\r\n propmtOpen: false,\r\n promptTitle: \"Unlink Unit Standard From Assessor\",\r\n promptContent: \"Are you sure you want to unlink this unit standard from the assessor?\",\r\n unlinkMessage: \"\",\r\n unlinkMessageStyle: \"\",\r\n searchParameters: [{ Name: \"AssessorID\", Value: this.props.location.state.AssessorID }]\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close' }\r\n ]\r\n }\r\n ,\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'link', label: 'Link Unitstandards', tooltip: 'link the selected unit standard to the assessor' },\r\n { id: 'unlink', label: 'Unlink Unitstandard', tooltip: 'Un-link the selected unit standard from the assessor', disabled: utils.isNull(this.state.selectedUnitStandard) }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/assessor',\r\n state: { selection: this.props.location.state.AssessorID }\r\n });\r\n }\r\n else if (\"link\" === buttonId) {\r\n this.setState({ linkDialogOpen: true, unlinkMessage: \"\"})\r\n }\r\n else if (\"unlink\" === buttonId) {\r\n this.setState({ promptOpen: true })\r\n }\r\n }\r\n\r\n unlinkUnitstandard(url) {\r\n this.setState({ promptOpen: false }, () => {\r\n toolbarRef.current.setButtonDisabled(\"unlink\", true);\r\n })\r\n\r\n let fullUrl = `${url}?id=${this.state.selectedUnitStandard}&assessorId=${this.props.location.state.AssessorID}`\r\n fetch(fullUrl)\r\n .then(res => res.json())\r\n .then((responseJson) => {\r\n let response = JSON.parse(responseJson);\r\n if (!utils.isNull(response.EntityId) && response.EntityId === 0) {\r\n this.setState({ selectedUnitStandard: null, unlinkMessage: response.Message, unlinkMessageStyle: response.MessageType.toLowerCase()});\r\n //Force a refresh\r\n this.setState({ searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)) })\r\n }\r\n else if (!utils.isNull(response.Message) && response.Message !== \"\") {\r\n this.setState({ unlinkMessage: response.Message, unlinkMessageStyle: response.MessageType.toLowerCase() })\r\n }\r\n });\r\n }\r\n\r\n postLinkHandler(isCancel, linked) {\r\n if (linked === true) {\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)),\r\n linkDialogOpen: false, selectedUnitStandard: null\r\n });\r\n }\r\n else if (isCancel === true) {\r\n this.setState({\r\n linkDialogOpen: false\r\n })\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedUnitStandard: selection[0].Id });\r\n } else {\r\n this.setState({ selectedUnitStandard: null });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"unlink\", selection === null || selection.length === 0);\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ propmtOpen: false })\r\n }\r\n\r\n render() {\r\n return (\r\n ${this.props.location.state.AssessorName} > Unit Standards`}>\r\n\r\n \r\n\r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig} />\r\n\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={false} />\r\n
\r\n\r\n this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Unit Standards to Assessor: ${this.props.location.state.AssessorName}`}\r\n linkName={\"UnitStandards\"} postUrl={\"api/indicium/UnitStandardSetup/linkAssessorUnitStandards\"}\r\n selectionId={this.props.location.state.AssessorID}\r\n > \r\n\r\n \r\n \r\n\r\n this.unlinkUnitstandard(`api/indicium/UnitStandardSetup/unlinkAssessorUnitstandard`)}\r\n closePrompt={this.closePrompt}\r\n />\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(UnitStandardSearch)\r\n);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport LinkDialog from \"../LinkDialog\";\r\nimport Prompt from '../../widgets/Prompt';\r\nimport SkillsProgramSetupSearch from '../program/SkillsProgramSetupSearch';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\nexport const skillsProgrammeHeadCells = [\r\n { id: 'SkillsProgrammeCode', numeric: false, disablePadding: true, label: 'Skills Programme Code' },\r\n { id: 'SkillsProgrammeTitle', numeric: false, disablePadding: true, label: 'Skills Programme Title' },\r\n { id: 'SkillsProgrammeRegistrationStartDate', numeric: false, disablePadding: true, label: 'Skills Programme Registration Start Date' },\r\n { id: 'SkillsProgrammeRegistrationEndDate', numeric: false, disablePadding: true, label: 'Skills Programme Registration End Date' },\r\n { id: 'AssessorAssessmentEndDate', numeric: false, disablePadding: true, label: 'Assessor Assessment End Date' }\r\n];\r\n\r\nconst toolbarRef = React.createRef();\r\nconst utils = new ViewUtils();\r\n\r\nclass AssessorSkillsProgrammeSearch extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n model: {\r\n SkillsProgrammeCode: \"\",\r\n SkillsProgrammeTitle: \"\",\r\n AssessorID: this.props.location.state.AssessorID\r\n },\r\n\r\n linkDialogOpen: false,\r\n selectedSkillsProgramme: null,\r\n propmtOpen: false,\r\n promptTitle: \"Unlink Skills Programme From Assessor\",\r\n promptContent: \"Are you sure you want to unlink this skills programme from the assessor?\",\r\n unlinkMessage: \"\",\r\n unlinkMessageStyle: \"\",\r\n searchParameters: [{Name: \"AssessorID\", Value: this.props.location.state.AssessorID}]\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close' }\r\n ]\r\n }\r\n ,\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'link', label: 'Link Skills Programmes', tooltip: 'link the selected skills programmes to the assessor' },\r\n { id: 'unlink', label: 'Unlink Skills Programme', tooltip: 'Un-link the selected skills programmes from the assessor', disabled: utils.isNull(this.state.selectedSkillsProgramme) }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/assessor',\r\n state: { selection: this.props.location.state.AssessorID }\r\n });\r\n }\r\n else if (\"link\" === buttonId) {\r\n this.setState({ linkDialogOpen: true, unlinkMessage: \"\" })\r\n }\r\n else if (\"unlink\" === buttonId) {\r\n this.setState({ promptOpen: true })\r\n }\r\n }\r\n\r\n unlinkUnitstandard(url) {\r\n this.setState({ promptOpen: false }, () => {\r\n toolbarRef.current.setButtonDisabled(\"unlink\", true);\r\n })\r\n\r\n let fullUrl = `${url}?id=${this.state.selectedSkillsProgramme}&assessorId=${this.props.location.state.AssessorID}`\r\n fetch(fullUrl)\r\n .then(res => res.json())\r\n .then((responseJson) => {\r\n let response = JSON.parse(responseJson);\r\n if (!utils.isNull(response.EntityId) && response.EntityId === 0) {\r\n this.setState({ selectedSkillsProgramme: null, unlinkMessage: response.Message, unlinkMessageStyle: response.MessageType.toLowerCase() });\r\n //Force a refresh\r\n this.setState({ searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)) })\r\n }\r\n else if (!utils.isNull(response.Message) && response.Message !== \"\") {\r\n this.setState({ unlinkMessage: response.Message, unlinkMessageStyle: response.MessageType.toLowerCase() })\r\n }\r\n });\r\n }\r\n\r\n postLinkHandler(isCancel, linked) {\r\n if (linked === true) {\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)),\r\n linkDialogOpen: false, selectedSkillsProgramme: null\r\n });\r\n }\r\n else if (isCancel === true) {\r\n this.setState({\r\n linkDialogOpen: false\r\n })\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedSkillsProgramme: selection[0].Id });\r\n } else {\r\n this.setState({ selectedSkillsProgramme: null });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"unlink\", selection === null || selection.length === 0);\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ propmtOpen: false })\r\n }\r\n\r\n render() {\r\n return (\r\n ${this.props.location.state.AssessorName} > Skills Programmes`}>\r\n\r\n \r\n\r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n config={this.toolbarConfig} />\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={false} />\r\n
\r\n this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Skills Programme to Assessor: ${this.props.location.state.AssessorName}`}\r\n linkName={\"SkillsProgrammes\"} postUrl={\"api/indicium/SkillsProgrammeSetup/linkAssessorSkillsProgramme\"}\r\n selectionId={this.props.location.state.AssessorID}\r\n >\r\n \r\n \r\n\r\n this.unlinkUnitstandard(`api/indicium/SkillsProgrammeSetup/unlinkAssessorSkillsProgramme`)}\r\n closePrompt={this.closePrompt}\r\n />\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(AssessorSkillsProgrammeSearch)\r\n);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport LinkDialog from \"../LinkDialog\";\r\nimport Prompt from '../../widgets/Prompt';\r\nimport QualificationSetupSearch from '../program/QualificationSetupSearch';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\nexport const qualificationHeadCells = [\r\n { id: 'SAQAQualificationID', numeric: false, disablePadding: true, label: 'SAQA Qualification ID' },\r\n { id: \"SAQAQualificationTitle\", numeric: false, disablePadding: true, label: \"SAQA Qualification Title\" },\r\n { id: \"Credits\", numeric: false, disablePadding: true, label: \"Credits\" },\r\n { id: \"QualificationRegistrationStartDate\", numeric: false, disablePadding: true, label: \"Qualification Registration Start Date\" },\r\n { id: \"QualificationRegistrationEndDate\", numeric: false, disablePadding: true, label: \"Qualification Registration End Date\" },\r\n { id: \"QualificationLastDateForEnrolment\", numeric: false, disablePadding: true, label: \"Qualification Last Date For Enrollment\" },\r\n { id: \"QualificationLastDateForAchievement\", numeric: false, disablePadding: true, label: \"Qualification Last Date For Achievement\" },\r\n { id: \"AssessorAssessmentEndDate\", numeric: false, disablePadding: true, label: \"Assessor Assessment End Date\" }\r\n]\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\n\r\nclass AssessorQualificationSearch extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n model: {\r\n SAQAQualificationID: \"\",\r\n SAQAQualificationTitle: \"\",\r\n AssessorID: this.props.location.state.AssessorID\r\n },\r\n\r\n linkDialogOpen: false,\r\n selectedQualification: null,\r\n propmtOpen: false,\r\n promptTitle: \"Unlink Qualification From Assessor\",\r\n promptContent: \"Are you sure you want to unlink this qualification from the assessor?\",\r\n unlinkMessage: \"\",\r\n unlinkMessageStyle: \"\",\r\n searchParameters: [{Name: \"AssessorID\", Value: this.props.location.state.AssessorID}]\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close' }\r\n ]\r\n }\r\n ,\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'link', label: 'Link Qualifications', tooltip: 'link the selected qualification(s) to the assessor' },\r\n { id: 'unlink', label: 'Unlink Qualification', tooltip: 'Un-link the selected qualification(s) from the assessor', disabled: utils.isNull(this.state.selectedQualification) }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/assessor',\r\n state: { selection: this.props.location.state.AssessorID }\r\n });\r\n }\r\n else if (\"link\" === buttonId) {\r\n this.setState({ linkDialogOpen: true, unlinkMessage: \"\" })\r\n }\r\n else if (\"unlink\" === buttonId) {\r\n this.setState({ promptOpen: true })\r\n }\r\n }\r\n\r\n unlinkQualification(url) {\r\n this.setState({ promptOpen: false }, () => {\r\n toolbarRef.current.setButtonDisabled(\"unlink\", true);\r\n })\r\n\r\n let fullUrl = `${url}?id=${this.state.selectedQualification}&assessorId=${this.props.location.state.AssessorID}`\r\n fetch(fullUrl)\r\n .then(res => res.json())\r\n .then((responseJson) => {\r\n let response = JSON.parse(responseJson);\r\n if (!utils.isNull(response.EntityId) && response.EntityId === 0) {\r\n this.setState({ selectedQualification: null, unlinkMessage: response.Message, unlinkMessageStyle: response.MessageType.toLowerCase() });\r\n //Force a refresh\r\n this.setState({ searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)) })\r\n }\r\n else if (!utils.isNull(response.Message) && response.Message !== \"\") {\r\n this.setState({ unlinkMessage: response.Message, unlinkMessageStyle: response.MessageType.toLowerCase() })\r\n }\r\n });\r\n }\r\n\r\n postLinkHandler(isCancel, linked) {\r\n if (linked === true) {\r\n this.setState({\r\n linkDialogOpen: false, selectedQualification: null,\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters))\r\n });\r\n }\r\n else if (isCancel === true) {\r\n this.setState({\r\n linkDialogOpen: false\r\n })\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedQualification: selection[0].Id });\r\n } else {\r\n this.setState({ selectedQualification: null });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"unlink\", selection === null || selection.length === 0);\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ propmtOpen: false })\r\n }\r\n\r\n render() {\r\n return(\r\n ${this.props.location.state.AssessorName} > Qualifications`}>\r\n\r\n \r\n\r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n config={this.toolbarConfig} />\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={false} />\r\n
\r\n\r\n this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Qualification to Assessor: ${this.props.location.state.AssessorName}`}\r\n linkName={\"Qualifications\"} postUrl={\"api/indicium/QualificationSetup/linkAssessorQualification\"}\r\n selectionId={this.props.location.state.AssessorID}\r\n >\r\n \r\n \r\n\r\n this.unlinkQualification(`api/indicium/QualificationSetup/unlinkAssessorQualification`)}\r\n closePrompt={this.closePrompt}\r\n />\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\nexport default withRouter(\r\n connect()(AssessorQualificationSearch)\r\n);","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport LinkDialog from \"../LinkDialog\";\r\nimport Prompt from '../../widgets/Prompt';\r\nimport LearnershipSetupSearch from '../program/LearnershipSetupSearch';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\nexport const learnershipHeadCells = [\r\n { id: 'LearnershipCode', numeric: false, disablePadding: true, label: 'Learnership Code' },\r\n { id: \"LearnershipTitle\", numeric: false, disablePadding: true, label: \"Learnership Title\" },\r\n { id: \"AssessorAssessmentEndDate\", numeric: false, disablePadding: true, label: \"Assessor Assessment End Date\" }\r\n \r\n]\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\n\r\nclass AssessorLearnershipSearch extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n model: {\r\n LearnershipCode: \"\",\r\n LearnershipTitle: \"\",\r\n AssessorID: this.props.location.state.AssessorID\r\n },\r\n\r\n linkDialogOpen: false,\r\n selectedLearnership: null,\r\n propmtOpen: false,\r\n promptTitle: \"Unlink Learnership From moderator\",\r\n promptContent: \"Are you sure you want to unlink this learnership from the moderator?\",\r\n unlinkMessage: \"\",\r\n unlinkMessageStyle: \"\",\r\n searchParameters: [{ Name: \"moderatorID\", Value: this.props.location.state.AssessorID}]\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close' }\r\n ]\r\n }\r\n ,\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'link', label: 'Link moderator', tooltip: 'link the selected learnership(s) to the moderator' },\r\n { id: 'unlink', label: 'Unlink moderator', tooltip: 'Un-link the selected learnership(s) from the moderator', disabled: utils.isNull(this.state.selectedQualification) }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/assessor',\r\n state: { selection: this.props.location.state.AssessorID }\r\n });\r\n }\r\n else if (\"link\" === buttonId) {\r\n this.setState({ linkDialogOpen: true, unlinkMessage: \"\" })\r\n }\r\n else if (\"unlink\" === buttonId) {\r\n this.setState({ promptOpen: true })\r\n }\r\n }\r\n\r\n unlinkQualification(url) {\r\n this.setState({ promptOpen: false }, () => {\r\n toolbarRef.current.setButtonDisabled(\"unlink\", true);\r\n })\r\n\r\n let fullUrl = `${url}?id=${this.state.selectedLearnership}&assessorId=${this.props.location.state.AssessorID}`\r\n fetch(fullUrl)\r\n .then(res => res.json())\r\n .then((responseJson) => {\r\n let response = JSON.parse(responseJson);\r\n if (!utils.isNull(response.EntityId) && response.EntityId === 0) {\r\n this.setState({ selectedQualification: null, unlinkMessage: response.Message, unlinkMessageStyle: response.MessageType.toLowerCase() });\r\n //Force a refresh\r\n this.setState({ searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)) })\r\n }\r\n else if (!utils.isNull(response.Message) && response.Message !== \"\") {\r\n this.setState({ unlinkMessage: response.Message, unlinkMessageStyle: response.MessageType.toLowerCase() })\r\n }\r\n });\r\n }\r\n\r\n postLinkHandler(isCancel, linked) {\r\n if (linked === true) {\r\n this.setState({\r\n linkDialogOpen: false, selectedQualification: null,\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters))\r\n });\r\n }\r\n else if (isCancel === true) {\r\n this.setState({\r\n linkDialogOpen: false\r\n })\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedQualification: selection[0].Id });\r\n } else {\r\n this.setState({ selectedQualification: null });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"unlink\", selection === null || selection.length === 0);\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ propmtOpen: false })\r\n }\r\n\r\n render() {\r\n return(\r\n ${this.props.location.state.AssessorName} > Qualifications`}>\r\n\r\n \r\n\r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n config={this.toolbarConfig} />\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={false} />\r\n
\r\n\r\n this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Qualification to Assessor: ${this.props.location.state.AssessorName}`}\r\n linkName={\"Qualifications\"} postUrl={\"api/indicium/QualificationSetup/linkAssessorQualification\"}\r\n selectionId={this.props.location.state.AssessorID}\r\n >\r\n \r\n \r\n\r\n this.unlinkQualification(`api/indicium/QualificationSetup/unlinkAssessorQualification`)}\r\n closePrompt={this.closePrompt}\r\n />\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\nexport default withRouter(\r\n connect()(AssessorLearnershipSearch)\r\n);","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Moderator.css\"\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport UnitStandardSetupSearch from '../program/UnitStandardSetupSearch';\r\nimport QualificationSetupSearch from '../program/QualificationSetupSearch';\r\nimport LearnershipSetupSearch from '../program/LearnershipSetupSearch';\r\nimport SkillsProgrammeSetupSearch from '../program/SkillsProgramSetupSearch';\r\nimport LinkDialog from \"../LinkDialog\";\r\nimport { unitStandardHeadCells } from \"./AssessorUnitStandards\";\r\nimport { skillsProgrammeHeadCells } from \"./AssessorSkillsProgramme\";\r\nimport { qualificationHeadCells } from \"./AssessorQualifications\";\r\nimport { learnershipHeadCells } from \"./AssessorLearnerships\";\r\nimport { ViewContainer } from \"../../View\";\r\nimport { format } from \"date-fns\";\r\n\r\nimport clsx from 'clsx';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Radio from '@material-ui/core/Radio';\r\nimport RadioGroup from '@material-ui/core/RadioGroup';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport FormLabel from '@material-ui/core/FormLabel';\r\n\r\nconst useStyles = makeStyles({\r\n root: {\r\n '&:hover': {\r\n backgroundColor: 'transparent',\r\n },\r\n },\r\n icon: {\r\n borderRadius: '50%',\r\n width: 16,\r\n height: 16,\r\n boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',\r\n backgroundColor: '#f5f8fa',\r\n \r\n 'input:hover ~ &': {\r\n backgroundColor: '#ebf1f5',\r\n },\r\n 'input:disabled ~ &': {\r\n boxShadow: 'none',\r\n background: 'rgba(206,217,224,.5)',\r\n },\r\n },\r\n checkedIcon: {\r\n backgroundColor: '#01579B',\r\n '&:before': {\r\n display: 'block',\r\n width: 16,\r\n height: 16,\r\n content: '\"\"',\r\n },\r\n 'input:hover ~ &': {\r\n backgroundColor: '#01579B',\r\n },\r\n },\r\n});\r\n\r\nconst linkToolbarRef = React.createRef();\r\nconst toolbarRef = React.createRef();\r\nconst formRef = React.createRef();\r\nconst utils = new ViewUtils();\r\n\r\nfunction StyledRadio(props) {\r\n const classes = useStyles();\r\n \r\n return (\r\n }\r\n icon={}\r\n {...props}\r\n />\r\n );\r\n }\r\n\r\nclass AddAssessorProgrammeDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n let nextButtonDisabled = true;\r\n\r\n if (!utils.isNull(this.props.data) && !utils.isNull(this.props.data.scopeDetails)) {\r\n nextButtonDisabled = this.props.data.scopeDetails.qualifications.length === 0 &&\r\n this.props.data.scopeDetails.skillsProgrammes.length === 0 && this.props.data.scopeDetails.unitStandards.length === 0 && this.props.data.scopeDetails.learnerships.length === 0;\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'back', label: 'BACK', tooltip: 'Back to Search', theme: true },\r\n { id: 'finish', label: 'FINISH', tooltip: 'Save Moderator', theme: true, disabled: nextButtonDisabled }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n let qualificationIds = \"\";\r\n let skillsProgrammeIds = \"\";\r\n let unitStandardIds = \"\";\r\n let learnershipIds = \"\";\r\n let scopeSelected = \"\";\r\n\r\n if (!utils.isNull(props.data) && !utils.isNull(props.data.scopeDetails)) {\r\n this.setState({ qualificationIds: this.getIdList(props.data.scopeDetails.qualifications) });\r\n this.setState({ skillsProgrammeIds: this.getIdList(props.data.scopeDetails.skillsProgrammes) });\r\n this.setState({ unitStandardIds: this.getIdList(props.data.scopeDetails.unitStandards) });\r\n this.setState({ learnershipIds: this.getIdList(props.data.scopeDetails.learnerships) });\r\n }\r\n\r\n this.state = {\r\n model: !utils.isNull(props.data) && !utils.isNull(props.data.scopeDetails) ? props.data.scopeDetails : { unitStandards: [], skillsProgrammes: [], qualifications: [], learnerships: [], scopeSelected: null },\r\n searchParameters: null,\r\n message: \"\",\r\n scopeDescription: \"\",\r\n unitStandardIds: unitStandardIds,\r\n skillsProgrammeIds: skillsProgrammeIds,\r\n qualificationIds: qualificationIds,\r\n learnershipIds: learnershipIds,\r\n linkDialogOpen: false,\r\n propmtOpen: false,\r\n selectedUnitStandard: null,\r\n formValue: { Intervention: !utils.isNull(props.data) && !utils.isNull(props.data.scopeDetails) ? props.data.scopeDetails.selectedIntervention : null },\r\n assessorName: this.props.data.FirstName + \" \" + this.props.data.Surname,\r\n personId: !utils.isNull(props.data) && !utils.isNull(props.data.personRoleDetails) ? props.data.personRoleDetails.ID: null,\r\n scopeSelected: '1'\r\n };\r\n\r\n this.linkToolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'link', label: 'Link', tooltip: 'link the selected intervention record to the moderator' },\r\n { id: 'unlink', label: 'Unlink', tooltip: 'Un-link the selected intervention record from the moderator', disabled: utils.isNull(this.state.selectedUnitStandard) }\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n handleFormValueChange(values) {\r\n if (!utils.isNull(values)) {\r\n this.setState({ model: { ...this.state.model, [\"selectedIntervention\"]: values.Intervention } });\r\n if (!utils.isNull(linkToolbarRef.current)) {\r\n linkToolbarRef.current.setButtonDisabled(\"unlink\", true);\r\n }\r\n }\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"link\" === buttonId) {\r\n this.setState({ linkDialogOpen: true });\r\n }\r\n else if (\"unlink\" === buttonId) {\r\n if (!utils.isNull(this.state.selectedProgrammeId)) {\r\n let programmeName =\r\n this.state.model.selectedIntervention.Id === \"3\" ? \"learnerships\" :\r\n this.state.model.selectedIntervention.Id === \"1\" ? \"unitStandards\" :\r\n this.state.model.selectedIntervention.Id === \"4\" ? \"skillsProgrammes\" : \"qualifications\";\r\n\r\n let programmes = this.state.model[programmeName];\r\n let newProgrammes = [];\r\n\r\n for (let i = 0; i < programmes.length; i++) {\r\n if (programmes[i].Id !== this.state.selectedProgrammeId) {\r\n newProgrammes.push(programmes[i]);\r\n }\r\n }\r\n\r\n let newIds = this.getIdList(newProgrammes);\r\n this.state.model.selectedIntervention.Id === \"3\" ? this.setState({ learnershipIds: newIds }) :\r\n this.state.model.selectedIntervention.Id === \"1\" ? this.setState({ unitStandardIds: newIds }) :\r\n this.state.model.selectedIntervention.Id === \"4\" ? this.setState({ skillsProgrammeIds: newIds }) :\r\n this.setState({ qualificationIds: newIds });\r\n\r\n this.setState({ model: { ...this.state.model, [programmeName]: newProgrammes } }, () => {\r\n toolbarRef.current.setButtonDisabled(\"finish\", this.state.model.qualifications.length === 0 &&\r\n this.state.model.skillsProgrammes.length === 0 && this.state.model.unitStandards.length === 0 && this.state.model.learnerships.length === 0);\r\n });\r\n }\r\n } else if (\"back\" === buttonId) {\r\n this.props.stepHandler(4, false, this.state.model);\r\n } else if (\"finish\" === buttonId) {\r\n this.props.stepHandler(4, true, this.state.model);\r\n }\r\n }\r\n\r\n postLinkHandler(isCancel, linked) {\r\n this.setState({ linkDialogOpen: !isCancel && !linked})\r\n }\r\n\r\n getIdList(programmes) {\r\n let exclusions = \"\";\r\n\r\n for (let i = 0; i < programmes.length; i++) {\r\n exclusions += programmes[i].Id;\r\n if (i < programmes.length - 1) {\r\n exclusions += \",\"\r\n }\r\n }\r\n\r\n return exclusions;\r\n }\r\n\r\n saveProgramme(selection, programmeName) {\r\n for (let i = 0; i < selection.length; i++) {\r\n selection[i].AssessorAssessmentEndDate = format(this.props.data.registrationDetails.RegistrationEndDate, \"yyyy/MM/dd HH:mm:ss\");\r\n this.state.model[programmeName].push(selection[i]);\r\n }\r\n\r\n toolbarRef.current.setButtonDisabled(\"finish\", this.state.model.qualifications.length === 0 &&\r\n this.state.model.skillsProgrammes.length === 0 && this.state.model.unitStandards.length === 0 && this.state.model.learnerships.length === 0);\r\n\r\n \r\n }\r\n\r\n saveQualifications(selection) {\r\n this.saveProgramme(selection, \"qualifications\");\r\n this.setState({ qualificationIds: this.getIdList(selection) });\r\n }\r\n \r\n saveSkillsProgrammes(selection) {\r\n this.saveProgramme(selection, \"skillsProgrammes\");\r\n this.setState({ skillsProgrammeIds: this.getIdList(selection) });\r\n }\r\n\r\n saveUnitStandards(selection) {\r\n this.saveProgramme(selection, \"unitStandards\");\r\n this.setState({ unitStandardIds: this.getIdList(selection) });\r\n }\r\n\r\n saveLearnerships(selection) {\r\n this.saveProgramme(selection, \"learnerships\");\r\n this.setState({ learnershipIds: this.getIdList(selection) });\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedProgrammeId: selection[0].Id });\r\n } else {\r\n this.setState({ selectedProgrammeId: null });\r\n }\r\n linkToolbarRef.current.setButtonDisabled(\"unlink\", selection === null || selection.length === 0);\r\n }\r\n\r\n handleScopeSelected = (event) => {\r\n\r\n if (event.target.value === '1') {\r\n this.setState({ scopeDescription: \"Manually choose scope items existing under the Assessor profile for this Moderator.\" })\r\n }\r\n\r\n if (event.target.value === '2') {\r\n this.AutoGrabAssessorScopes();\r\n }\r\n\r\n if (event.target.value === '3') {\r\n this.setState({ scopeDescription: \"No scope will be added to the moderator.\" })\r\n }\r\n \r\n if (event.target.value != this.state.scopeSelected) { \r\n this.setState({ scopeSelected: event.target.value });\r\n this.state.model.scopeSelected = event.target.value;\r\n toolbarRef.current.setButtonDisabled(\"finish\", event.target.value === '1');\r\n } \r\n }\r\n\r\n AutoGrabAssessorScopes() {\r\n let url = \"api/sims/Moderator/GetPrefillAssessorScope?PersonID=\" + this.state.personId;\r\n utils.invokeUrl(url, (response) => {\r\n this.setState({\r\n model: {\r\n ...this.state.model,\r\n [\"learnerships\"]: response[0].Data,\r\n [\"skillsProgrammes\"]: response[1].Data,\r\n [\"unitStandards\"]: response[2].Data,\r\n [\"qualifications\"]: response[3].Data\r\n }, scopeDescription: \"The system will populate the scope from the Moderators’ Assessor profile to the Moderators’ scope.\"\r\n })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {\r\n !utils.isStringEmpty(this.props.saveMessage) ?\r\n \r\n {this.props.saveMessage}\r\n
\r\n :\r\n null\r\n }\r\n\r\n \r\n
\r\n {this.state.scopeDescription}\r\n
\r\n
\r\n \r\n \r\n {this.handleScopeSelected(event)}} defaultValue=\"1\" aria-label=\"linkscope\" name=\"scope module\" row> \r\n } label=\"No Scope\" />\r\n } label=\"Read Scope from Assesor Profile \" />\r\n } label=\"Link Scope\" />\r\n \r\n \r\n
\r\n \r\n { this.handleFormValueChange(values) }}>\r\n {form =>\r\n \r\n }\r\n \r\n {\r\n !utils.isNull(this.state.model.selectedIntervention) ?\r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={linkToolbarRef} config={this.linkToolbarConfig} />\r\n
:\r\n null\r\n }\r\n {\r\n !utils.isNull(this.state.model.selectedIntervention) && this.state.model.selectedIntervention.Id === \"4\" ?\r\n \r\n
\r\n Skills Programmes\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={false} />\r\n
\r\n
{ this.saveSkillsProgrammes(selection) }}\r\n closeHandler={(isCancelled, linked) => this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Skills Programmes to Moderator: ${this.state.assessorName}`}\r\n >\r\n \r\n \r\n
\r\n
\r\n Unit Standards\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={false} />\r\n
\r\n
{this.saveUnitStandards(selection)}}\r\n closeHandler={(isCancelled, linked) => this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Unit Standards to Moderator: ${this.state.assessorName}`}\r\n >\r\n \r\n \r\n
\r\n
\r\n Qualifications\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={false} />\r\n
\r\n
{ this.saveQualifications(selection) }}\r\n closeHandler={(isCancelled, linked) => this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Qualification to Moderator: ${this.state.assessorName}`}\r\n >\r\n \r\n \r\n
\r\n
\r\n Learnership\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={false} />\r\n
\r\n
{ this.saveLearnerships(selection) }}\r\n closeHandler={(isCancelled, linked) => this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Learnership to Moderator: ${this.state.assessorName}`}\r\n >\r\n \r\n \r\n
\r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} config={this.toolbarConfig} />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(AddAssessorProgrammeDetails)\r\n);\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Moderator.css\";\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport { ViewContainer } from \"../../View\";\r\nimport ProviderSearch from \"../provider/ProviderSearch\";\r\nimport { headCells } from \"../provider/ProviderSearch\";\r\nimport { format } from \"date-fns\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport LinkDialog from \"../LinkDialog\";\r\n\r\nconst linkToolbarRef = React.createRef();\r\nconst toolbarRef = React.createRef();\r\nconst utils = new ViewUtils();\r\n\r\nclass AddModeratorTrainingProvider extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n let nextButtonDisabled = true;\r\n if (!utils.isNull(this.props.data) && !utils.isNull(this.props.data.trainingProviderDetails)) {\r\n nextButtonDisabled = this.props.data.trainingProviderDetails.trainingProviders.length === 0;\r\n }\r\n\r\n let trainingProviderIds = \"\";\r\n if (!utils.isNull(props.data) && !utils.isNull(props.data.trainingProviderDetails)) {\r\n trainingProviderIds = this.getIdList(props.data.trainingProviderDetails.trainingProviders);\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'back', label: 'BACK', tooltip: 'Back to Search', theme: true },\r\n { id: 'next', label: 'NEXT', tooltip: 'Proceed to Training Provider', theme: true, disabled: nextButtonDisabled }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n this.linkToolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'link', label: 'Link', tooltip: 'link the selected provider to the Moderator' },\r\n { id: 'unlink', label: 'Unlink', tooltip: 'Un-link the selected provider from the Moderator', disabled: true }\r\n ]\r\n }\r\n ]\r\n };\r\n this.state = {\r\n model: !utils.isNull(props.data) && !utils.isNull(props.data.trainingProviderDetails) ? props.data.trainingProviderDetails : { trainingProviders: [] },\r\n searchParameters: null,\r\n message: \"\",\r\n trainingProviderIds: trainingProviderIds,\r\n linkDialogOpen: false,\r\n propmtOpen: false,\r\n ModeratorName: this.props.data.FirstName + \" \" + this.props.data.Surname\r\n };\r\n\r\n }\r\n\r\n postLinkHandler(isCancel, linked) {\r\n this.setState({ linkDialogOpen: !isCancel && !linked })\r\n }\r\n\r\n getIdList(programmes) {\r\n let exclusions = \"\";\r\n\r\n for (let i = 0; i < programmes.length; i++) {\r\n exclusions += programmes[i].Id;\r\n if (i < programmes.length - 1) {\r\n exclusions += \",\"\r\n }\r\n }\r\n\r\n return exclusions;\r\n }\r\n\r\n saveTrainingProvider(selection) {\r\n\r\n for (let i = 0; i < selection.length; i++) {\r\n selection[i].ModeratorAssessmentEndDate = format(this.props.data.registrationDetails.RegistrationEndDate, \"yyyy/MM/dd HH:mm:ss\");\r\n this.state.model.trainingProviders.push(selection[i]);\r\n }\r\n\r\n let trainingProviderIdList = \"\";\r\n trainingProviderIdList = this.getIdList(this.state.model.trainingProviders);\r\n\r\n this.setState({\r\n trainingProviderIds: trainingProviderIdList\r\n }\r\n )\r\n\r\n toolbarRef.current.setButtonDisabled(\"next\", this.state.model.trainingProviders.length === 0);\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedTrainingProviderId: selection[0].Id });\r\n } else {\r\n this.setState({ selectedTrainingProviderId: null });\r\n }\r\n linkToolbarRef.current.setButtonDisabled(\"unlink\", selection === null || selection.length === 0);\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"link\" === buttonId) {\r\n this.setState({ linkDialogOpen: true });\r\n }\r\n else if (\"unlink\" === buttonId) {\r\n if (!utils.isNull(this.state.selectedTrainingProviderId)) {\r\n let trainingProviders = this.state.model.trainingProviders;\r\n let newTrainingProviders = [];\r\n\r\n for (let i = 0; i < trainingProviders.length; i++) {\r\n if (trainingProviders[i].Id !== this.state.selectedTrainingProviderId) {\r\n newTrainingProviders.push(trainingProviders[i]);\r\n }\r\n }\r\n\r\n let newIds = this.getIdList(newTrainingProviders);\r\n this.setState({ trainingProviderIds: newIds });\r\n\r\n this.setState({ model: { ...this.state.model, trainingProviders: newTrainingProviders } }, () => {\r\n toolbarRef.current.setButtonDisabled(\"next\", newIds.length === 0);\r\n });\r\n }\r\n } else if (\"back\" === buttonId) {\r\n this.props.stepHandler(3, false, this.state.model);\r\n } else if (\"next\" === buttonId) {\r\n this.props.stepHandler(3, true, this.state.model);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n Training Providers\r\n
\r\n
\r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={linkToolbarRef} config={this.linkToolbarConfig} />\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={false} />\r\n
\r\n
{ this.saveTrainingProvider(selection) }}\r\n closeHandler={(isCancelled, linked) => this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Training Provider to Moderator: ${this.state.ModeratorName}`}\r\n >\r\n \r\n \r\n
\r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} config={this.toolbarConfig} />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(AddModeratorTrainingProvider);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport LinearFlowHeading from '../../widgets/LinearFlowHeading';\r\nimport AddPersonRoleSearch from './../person/AddPersonRoleSearch';\r\nimport AddModeratorDetails from './AddModeratorDetails';\r\nimport AddModeratorRegistrationDetails from './AddModeratorRegistrationDetails';\r\nimport AddModeratorProgrammeDetails from './AddModeratorProgrammeDetails';\r\nimport AddModeratorTrainingProvider from './AddModeratorTrainingProvider';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\n\r\nconst steps = [\r\n { name: \"Identity Details\", tooltip: \"Search the system for an existing person. If one does not exist, click proceed to create a learner with a new person\" },\r\n { name: \"Moderator Details\", tooltip: \"Capture moderator details\" },\r\n { name: \"Registration Details\", tooltip: \"Capture registration details\" },\r\n { name: \"Training Providers\", tooltip: \"Link training providers\" },\r\n { name: \"Scope\", tooltip: \"Capture scope details\" }\r\n];\r\n\r\nconst utils = new ViewUtils();\r\nclass AddModeratorFlow extends Component {\r\n state = {\r\n currentStepIndex: 0,\r\n data: null,\r\n documents: {},\r\n saveMessage: \"\",\r\n hasSaveError: false\r\n }\r\n\r\n navigate(index, forward) {\r\n if (forward) {\r\n if (index !== 4) {\r\n this.setState({ currentStepIndex: index + 1 });\r\n }\r\n } else {\r\n this.setState({ currentStepIndex: index - 1 });\r\n }\r\n }\r\n\r\n stepHandler(index, forward, data) {\r\n if (index === 0) {\r\n if (!utils.isNull(this.state.data)\r\n && !utils.isNull(this.state.data.personRoleDetails) && !forward) {\r\n this.setState({\r\n data: {\r\n ...this.state.data,\r\n personRoleDetails: {\r\n ...this.state.data.personRoleDetails,\r\n Person: data.Person\r\n }\r\n }\r\n }, () => { this.navigate(index, forward) });\r\n } else {\r\n this.setState({\r\n data: data\r\n }, () => {this.navigate(index, forward) });\r\n }\r\n } else if (index === 1) {\r\n if (!utils.isNull(data)) {\r\n this.setState({\r\n data: { ...this.state.data, personRoleDetails: data }\r\n }, () => { this.navigate(index, forward) });\r\n } else if (!forward) {\r\n this.navigate(index, forward);\r\n }\r\n } else if (index === 2) {\r\n if (!utils.isNull(data)) {\r\n this.setState({\r\n data: { ...this.state.data, registrationDetails: data }\r\n }, () => { this.navigate(index, forward) });\r\n } else if (!forward) {\r\n this.navigate(index, forward);\r\n }\r\n } else if (index === 3) {\r\n if (!utils.isNull(data)) {\r\n this.setState({\r\n data: { ...this.state.data, trainingProviderDetails: data }\r\n }, () => { this.navigate(index, forward)});\r\n } else if (!forward) {\r\n this.navigate(index, forward);\r\n }\r\n } else if (index === 4) {\r\n if (!utils.isNull(data) && forward) {\r\n let ModeratorData = {};\r\n ModeratorData.Person = this.state.data.personRoleDetails;\r\n ModeratorData.RegistrationDetails = this.state.data.registrationDetails;\r\n ModeratorData.Scope = data;\r\n ModeratorData.Scope.selectedIntervension = null;\r\n ModeratorData.TrainingProviders = this.state.data.trainingProviderDetails.trainingProviders;\r\n\r\n utils.invokeUrl(\"api/sims/moderator/addModerator\", (data) => {\r\n this.props.history.push({\r\n pathname: '/ModeratorSearch'\r\n })\r\n }, () => { alert(utils.SYSTEM_ERROR_MESSAGE) }, {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(ModeratorData)\r\n });\r\n } else {\r\n this.setState({\r\n data: { ...this.state.data, scopeDetails: data }\r\n }, () => { this.navigate(index, forward) });\r\n }\r\n }\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n }\r\n\r\n componentDidMount() {\r\n utils.setLegend(\"Add Moderator\");\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n {this.state.currentStepIndex === 0 ?\r\n \r\n this.stepHandler(index, forward, data)} />\r\n : null}\r\n {this.state.currentStepIndex === 1 ? this.stepHandler(index, forward, data)} /> : \"\"}\r\n {this.state.currentStepIndex === 2 ? this.stepHandler(index, forward, data)} /> : \"\"}\r\n {this.state.currentStepIndex === 3 ? this.stepHandler(index, forward, data)} /> : \"\"}\r\n {this.state.currentStepIndex === 4 ? this.stepHandler(index, forward, data)} /> : \"\"}\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(AddModeratorFlow));\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport { FacilitatorForm } from './FacilitatorForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'back', label: 'BACK', tooltip: 'Back to document upload', theme: true },\r\n { id: 'next', label: 'NEXT', tooltip: 'Proceed to add registration details', theme: true }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst formRef = React.createRef();\r\nclass AddFacilitatorDetails extends Component {\r\n constructor(props) {\r\n super(props)\r\n let data = {};\r\n\r\n if (!utils.isNull(props.data) && !utils.isNull(props.data.personRoleDetails)) {\r\n data = props.data.personRoleDetails.Person;\r\n } else if (!utils.isNull(props.data) && !utils.isNull(props.data.identityDetails)) {\r\n data = props.data.identityDetails.Person ? props.data.identityDetails.Person : props.data.identityDetails.formData\r\n //data.Person = props.data.identityDetails.Person;\r\n } else {\r\n data.Person = {};\r\n }\r\n\r\n this.state = {\r\n model: data\r\n }\r\n }\r\n\r\n handleFormValueChange() {\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n let formValue = formRef.current.getValue();\r\n if (\"back\" === buttonId) {\r\n this.props.stepHandler(1, false, formValue);\r\n } else if (\"next\" === buttonId) {\r\n if (!utils.isNull(formValue)) {\r\n this.props.stepHandler(1, true, formValue);\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n Facilitator Details\r\n
\r\n \r\n this.handleFormValueChange(values)} />\r\n
\r\n \r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} config={toolbarConfig} />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(AddFacilitatorDetails)\r\n);\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Facilitator.css\";\r\nimport { FacilitatorRegistrationDetailsForm } from './FacilitatorRegistrationDetailsForm';\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport { ViewContainer } from \"../../View\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'back', label: 'BACK', tooltip: 'Back to Facilitator details', theme: true },\r\n { id: 'next', label: 'NEXT', tooltip: 'Proceed to add registration details', theme: true }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst formRef = React.createRef();\r\nclass FacilitatorRegistrationDetails extends Component {\r\n constructor(props) {\r\n super(props)\r\n let data = {};\r\n\r\n if (!utils.isNull(props.data) && !utils.isNull(props.data.registrationDetails)) {\r\n data = props.data.registrationDetails;\r\n }\r\n\r\n this.state = {\r\n model: data\r\n }\r\n }\r\n\r\n handleFormValueChange(values) {\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n let formValue = formRef.current.getValue();\r\n if (\"back\" === buttonId) {\r\n this.props.stepHandler(2, false, formValue);\r\n } else if (\"next\" === buttonId) {\r\n if (!utils.isNull(formValue)) {\r\n this.props.stepHandler(2, true, formValue);\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n Registration Details\r\n
\r\n \r\n this.handleFormValueChange(values)} />\r\n
\r\n \r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} config={toolbarConfig} />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(FacilitatorRegistrationDetails);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport UnitStandardSetupSearch from '../program/UnitStandardSetupSearch';\r\nimport QualificationSetupSearch from '../program/QualificationSetupSearch';\r\nimport SkillsProgrammeSetupSearch from '../program/SkillsProgramSetupSearch';\r\nimport LearnershipSetupSearch from '../program/LearnershipSetupSearch';\r\nimport LinkDialog from \"../LinkDialog\";\r\nimport { unitStandardHeadCells } from \"./FacilitatorUnitStandards\";\r\nimport { skillsProgrammeHeadCells } from \"./FacilitatorSkillsProgramme\";\r\nimport { qualificationHeadCells } from \"./FacilitatorQualifications\";\r\nimport { learnershipHeadCells } from \"./FacilitatorLearnerships\";\r\nimport { ViewContainer } from \"../../View\";\r\nimport { format } from \"date-fns\";\r\n\r\nconst linkToolbarRef = React.createRef();\r\nconst toolbarRef = React.createRef();\r\nconst formRef = React.createRef();\r\nconst utils = new ViewUtils();\r\n\r\nclass AddFacilitatorProgrammeDetails extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n let nextButtonDisabled = true;\r\n\r\n if (!utils.isNull(this.props.data) && !utils.isNull(this.props.data.scopeDetails)) {\r\n nextButtonDisabled = this.props.data.scopeDetails.qualifications.length === 0 &&\r\n this.props.data.scopeDetails.skillsProgrammes.length === 0 && this.props.data.scopeDetails.unitStandards.length === 0;\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'back', label: 'BACK', tooltip: 'Back to Search', theme: true },\r\n { id: 'finish', label: 'FINISH', tooltip: 'Save Facilitator', theme: true/*, disabled: nextButtonDisabled*/ }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n let qualificationIds = \"\";\r\n let skillsProgrammeIds = \"\";\r\n let unitStandardIds = \"\";\r\n let learnershipIds = \"\";\r\n\r\n if (!utils.isNull(props.data) && !utils.isNull(props.data.scopeDetails)) {\r\n this.setState({ qualificationIds: this.getIdList(props.data.scopeDetails.qualifications) });\r\n this.setState({ skillsProgrammeIds: this.getIdList(props.data.scopeDetails.skillsProgrammes) });\r\n this.setState({ unitStandardIds: this.getIdList(props.data.scopeDetails.unitStandards) });\r\n this.setState({ learnershipIds: this.getIdList(props.data.scopeDetails.learnerships) });\r\n }\r\n\r\n this.state = {\r\n model: !utils.isNull(props.data) && !utils.isNull(props.data.scopeDetails) ? props.data.scopeDetails : { unitStandards: [], skillsProgrammes: [], qualifications: [], learnerships: [] },\r\n searchParameters: null,\r\n message: \"\",\r\n unitStandardIds: unitStandardIds,\r\n skillsProgrammeIds: skillsProgrammeIds,\r\n qualificationIds: qualificationIds,\r\n learnershipIds: learnershipIds,\r\n linkDialogOpen: false,\r\n propmtOpen: false,\r\n selectedUnitStandard: null,\r\n formValue: { Intervention: !utils.isNull(props.data) && !utils.isNull(props.data.scopeDetails) ? props.data.scopeDetails.selectedIntervention : null },\r\n facilitatorName: this.props.data.personRoleDetails.FirstName + \" \" + this.props.data.personRoleDetails.Surname\r\n };\r\n\r\n this.linkToolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'link', label: 'Link', tooltip: 'link the selected unit standard to the Facilitator' },\r\n { id: 'unlink', label: 'Unlink', tooltip: 'Un-link the selected unit standard from the Facilitator', disabled: utils.isNull(this.state.selectedUnitStandard) }\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n handleFormValueChange(values) {\r\n if (!utils.isNull(values)) {\r\n this.setState({ model: { ...this.state.model, [\"selectedIntervention\"]: values.Intervention } });\r\n if (!utils.isNull(linkToolbarRef.current)) {\r\n linkToolbarRef.current.setButtonDisabled(\"unlink\", true);\r\n }\r\n }\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"link\" === buttonId) {\r\n this.setState({ linkDialogOpen: true });\r\n }\r\n else if (\"unlink\" === buttonId) {\r\n if (!utils.isNull(this.state.selectedProgrammeId)) {\r\n let programmeName = this.state.model.selectedIntervention.Id === \"3\" ? \"learnerships\" :\r\n this.state.model.selectedIntervention.Id === \"1\" ? \"unitStandards\" :\r\n this.state.model.selectedIntervention.Id === \"4\" ? \"skillsProgrammes\" : \"qualifications\";\r\n\r\n let programmes = this.state.model[programmeName];\r\n let newProgrammes = [];\r\n\r\n for (let i = 0; i < programmes.length; i++) {\r\n if (programmes[i].Id !== this.state.selectedProgrammeId) {\r\n newProgrammes.push(programmes[i]);\r\n }\r\n }\r\n\r\n let newIds = this.getIdList(newProgrammes);\r\n this.state.model.selectedIntervention.Id === \"3\" ? this.setState({ learnershipIds: newIds }) :\r\n this.state.model.selectedIntervention.Id === \"1\" ? this.setState({ unitStandardIds: newIds }) :\r\n this.state.model.selectedIntervention.Id === \"4\" ? this.setState({ skillsProgrammeIds: newIds }) :\r\n this.setState({ qualificationIds: newIds });\r\n\r\n this.setState({ model: { ...this.state.model, [programmeName]: newProgrammes } }, () => {\r\n toolbarRef.current.setButtonDisabled(\"finish\", this.state.model.qualifications.length === 0 &&\r\n this.state.model.skillsProgrammes.length === 0 && this.state.model.unitStandards.length === 0\r\n && this.state.model.learnerships.length === 0\r\n );\r\n });\r\n }\r\n } else if (\"back\" === buttonId) {\r\n this.props.stepHandler(4, false, this.state.model);\r\n } else if (\"finish\" === buttonId) {\r\n this.props.stepHandler(4, true, this.state.model);\r\n }\r\n }\r\n\r\n postLinkHandler(isCancel, linked) {\r\n this.setState({ linkDialogOpen: !isCancel && !linked })\r\n }\r\n\r\n getIdList(programmes) {\r\n let exclusions = \"\";\r\n\r\n for (let i = 0; i < programmes.length; i++) {\r\n exclusions += programmes[i].Id;\r\n if (i < programmes.length - 1) {\r\n exclusions += \",\"\r\n }\r\n }\r\n\r\n return exclusions;\r\n }\r\n\r\n saveProgramme(selection, programmeName) {\r\n for (let i = 0; i < selection.length; i++) {\r\n if (!utils.isNull(this.props.data.registrationDetails.RegistrationEndDate)) {\r\n selection[i].FacilitatorAssessmentEndDate = format(this.props.data.registrationDetails.RegistrationEndDate, \"yyyy/MM/dd HH:mm:ss\");\r\n }\r\n this.state.model[programmeName].push(selection[i]);\r\n }\r\n\r\n toolbarRef.current.setButtonDisabled(\"finish\", this.state.model.qualifications.length === 0 &&\r\n this.state.model.skillsProgrammes.length === 0 && this.state.model.unitStandards.length === 0\r\n && this.state.model.learnerships.length === 0);\r\n }\r\n\r\n saveQualifications(selection) {\r\n this.saveProgramme(selection, \"qualifications\");\r\n this.setState({ qualificationIds: this.getIdList(selection) });\r\n }\r\n\r\n saveSkillsProgrammes(selection) {\r\n this.saveProgramme(selection, \"skillsProgrammes\");\r\n this.setState({ skillsProgrammeIds: this.getIdList(selection) });\r\n }\r\n\r\n saveUnitStandards(selection) {\r\n this.saveProgramme(selection, \"unitStandards\");\r\n this.setState({ unitStandardIds: this.getIdList(selection) });\r\n }\r\n\r\n saveLearnerships(selection) {\r\n this.saveProgramme(selection, \"learnerships\");\r\n this.setState({ learnershipIds: this.getIdList(selection) });\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedProgrammeId: selection[0].Id });\r\n } else {\r\n this.setState({ selectedProgrammeId: null });\r\n }\r\n linkToolbarRef.current.setButtonDisabled(\"unlink\", selection === null || selection.length === 0);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {\r\n !utils.isStringEmpty(this.props.saveMessage) ?\r\n \r\n {this.props.saveMessage}\r\n
\r\n :\r\n null\r\n }\r\n { this.handleFormValueChange(values) }}>\r\n {form =>\r\n \r\n }\r\n \r\n {\r\n !utils.isNull(this.state.model.selectedIntervention) ?\r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={linkToolbarRef} config={this.linkToolbarConfig} />\r\n
:\r\n null\r\n }\r\n {\r\n !utils.isNull(this.state.model.selectedIntervention) && this.state.model.selectedIntervention.Id === \"4\" ?\r\n \r\n
\r\n Skills Programmes\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={false} />\r\n
\r\n
{ this.saveSkillsProgrammes(selection) }}\r\n closeHandler={(isCancelled, linked) => this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Skills Programmes to Facilitator: ${this.state.facilitatorName}`}\r\n >\r\n \r\n \r\n
\r\n
\r\n Unit Standards\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={false} />\r\n
\r\n
{ this.saveUnitStandards(selection) }}\r\n closeHandler={(isCancelled, linked) => this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Unit Standards to Facilitator: ${this.state.facilitatorName}`}\r\n >\r\n \r\n \r\n
\r\n
\r\n Qualifications\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={false} />\r\n
\r\n
{ this.saveQualifications(selection) }}\r\n closeHandler={(isCancelled, linked) => this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Qualification to Facilitator: ${this.state.facilitatorName}`}\r\n >\r\n \r\n \r\n
\r\n
\r\n Learnerships\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={false} />\r\n
\r\n
{ this.saveLearnerships(selection) }}\r\n closeHandler={(isCancelled, linked) => this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Learnership to Facilitator: ${this.state.facilitatorName}`}\r\n >\r\n \r\n \r\n
\r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} config={this.toolbarConfig} />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(AddFacilitatorProgrammeDetails)\r\n);\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Facilitator.css\";\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport { ViewContainer } from \"../../View\";\r\nimport ProviderSearch from \"../provider/ProviderSearch\";\r\nimport { headCells } from \"../provider/ProviderSearch\";\r\nimport { format } from \"date-fns\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport LinkDialog from \"../LinkDialog\";\r\n\r\nconst linkToolbarRef = React.createRef();\r\nconst toolbarRef = React.createRef();\r\nconst utils = new ViewUtils();\r\n\r\nclass AddFacilitatorTrainingProvider extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n let nextButtonDisabled = true;\r\n if (!utils.isNull(this.props.data) && !utils.isNull(this.props.data.trainingProviderDetails)) {\r\n nextButtonDisabled = this.props.data.trainingProviderDetails.trainingProviders.length === 0;\r\n }\r\n\r\n console.clear()\r\n console.log(this.props)\r\n\r\n let trainingProviderIds = \"\";\r\n if (!utils.isNull(props.data) && !utils.isNull(props.data.trainingProviderDetails)) {\r\n trainingProviderIds = this.getIdList(props.data.trainingProviderDetails.trainingProviders);\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'back', label: 'BACK', tooltip: 'Back to Search', theme: true },\r\n { id: 'next', label: 'NEXT', tooltip: 'Proceed to Training Provider', theme: true/*, disabled: nextButtonDisabled*/ }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n this.linkToolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'link', label: 'Link', tooltip: 'link the selected unit standard to the Facilitator' },\r\n { id: 'unlink', label: 'Unlink', tooltip: 'Un-link the selected unit standard from the Facilitator', disabled: true }\r\n ]\r\n }\r\n ]\r\n };\r\n this.state = {\r\n model: !utils.isNull(props.data) && !utils.isNull(props.data.trainingProviderDetails) ? props.data.trainingProviderDetails : { trainingProviders: [] },\r\n searchParameters: null,\r\n message: \"\",\r\n trainingProviderIds: trainingProviderIds,\r\n linkDialogOpen: false,\r\n propmtOpen: false,\r\n facilitatorName: this.props.data.personRoleDetails.FirstName + \" \" + this.props.data.personRoleDetails.Surname\r\n };\r\n\r\n }\r\n\r\n postLinkHandler(isCancel, linked) {\r\n this.setState({ linkDialogOpen: !isCancel && !linked })\r\n }\r\n\r\n getIdList(programmes) {\r\n let exclusions = \"\";\r\n\r\n for (let i = 0; i < programmes.length; i++) {\r\n exclusions += programmes[i].Id;\r\n if (i < programmes.length - 1) {\r\n exclusions += \",\"\r\n }\r\n }\r\n\r\n return exclusions;\r\n }\r\n\r\n saveTrainingProvider(selection) {\r\n for (let i = 0; i < selection.length; i++) {\r\n selection[i].FacilitatorAssessmentEndDate = format(this.props.data.registrationDetails.RegistrationEndDate, \"yyyy/MM/dd HH:mm:ss\");\r\n this.state.model.trainingProviders.push(selection[i]);\r\n this.setState({ trainingProviderIds: this.getIdList(selection) });\r\n }\r\n\r\n toolbarRef.current.setButtonDisabled(\"next\", this.state.model.trainingProviders.length === 0);\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedTrainingProviderId: selection[0].Id });\r\n } else {\r\n this.setState({ selectedTrainingProviderId: null });\r\n }\r\n linkToolbarRef.current.setButtonDisabled(\"unlink\", selection === null || selection.length === 0);\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"link\" === buttonId) {\r\n this.setState({ linkDialogOpen: true });\r\n }\r\n else if (\"unlink\" === buttonId) {\r\n if (!utils.isNull(this.state.selectedTrainingProviderId)) {\r\n let trainingProviders = this.state.model.trainingProviders;\r\n let newTrainingProviders = [];\r\n\r\n for (let i = 0; i < trainingProviders.length; i++) {\r\n if (trainingProviders[i].Id !== this.state.selectedTrainingProviderId) {\r\n newTrainingProviders.push(trainingProviders[i]);\r\n }\r\n }\r\n\r\n let newIds = this.getIdList(newTrainingProviders);\r\n this.setState({ trainingProviderIds: newIds });\r\n\r\n this.setState({ model: { ...this.state.model, trainingProviders: newTrainingProviders } }, () => {\r\n toolbarRef.current.setButtonDisabled(\"next\", newIds.length === 0);\r\n });\r\n }\r\n } else if (\"back\" === buttonId) {\r\n this.props.stepHandler(3, false, this.state.model);\r\n } else if (\"next\" === buttonId) {\r\n this.props.stepHandler(3, true, this.state.model);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n Training Providers\r\n
\r\n
\r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={linkToolbarRef} config={this.linkToolbarConfig} />\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={false} />\r\n
\r\n
{ this.saveTrainingProvider(selection) }}\r\n closeHandler={(isCancelled, linked) => this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Training Provider to Facilitator: ${this.state.facilitatorName}`}\r\n >\r\n \r\n \r\n
\r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} config={this.toolbarConfig} />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(AddFacilitatorTrainingProvider);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport LinearFlowHeading from '../../widgets/LinearFlowHeading';\r\nimport AddPersonRoleSearch from './../person/AddPersonRoleSearch';\r\nimport AddFacilitatorDetails from './AddFacilitatorDetails';\r\nimport AddFacilitatorRegistrationDetails from './AddFacilitatorRegistrationDetails';\r\nimport AddFacilitatorProgrammeDetails from './AddFacilitatorProgrammeDetails';\r\nimport AddFacilitatorTrainingProvider from './AddFacilitatorTrainingProvider';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\nconst steps = [\r\n { name: \"Identity Details\", tooltip: \"Search the system for an existing person. If one does not extist, click proceed to create a learner with a new person\" },\r\n { name: \"Facilitator Details\", tooltip: \"Capture Facilitator details\" },\r\n { name: \"Registration Details\", tooltip: \"Capture registration details\" },\r\n { name: \"Training Providers\", tooltip: \"Link training providers\" },\r\n { name: \"Scope\", tooltip: \"Capture scope details\" }\r\n];\r\n\r\nconst utils = new ViewUtils();\r\nclass AddFacilitatorFlow extends Component {\r\n state = {\r\n currentStepIndex: 0,\r\n data: null,\r\n documents: {},\r\n saveMessage: \"\",\r\n hasSaveError: false\r\n }\r\n\r\n navigate(index, forward) {\r\n if (forward) {\r\n if (index !== 4) {\r\n this.setState({ currentStepIndex: index + 1 });\r\n }\r\n } else {\r\n this.setState({ currentStepIndex: index - 1 });\r\n }\r\n }\r\n\r\n stepHandler(index, forward, data) {\r\n if (index === 0) {\r\n if (!utils.isNull(this.state.data)\r\n && !utils.isNull(this.state.data.personRoleDetails) && !forward) {\r\n this.setState({\r\n data: {\r\n ...this.state.data,\r\n personRoleDetails: {\r\n ...this.state.data.personRoleDetails,\r\n Person: data.Person\r\n }\r\n }\r\n }, () => { this.navigate(index, forward) });\r\n } else {\r\n this.setState({\r\n data: data\r\n }, () => { this.navigate(index, forward) });\r\n }\r\n } else if (index === 1) {\r\n if (!utils.isNull(data)) {\r\n this.setState({\r\n data: { ...this.state.data, personRoleDetails: data }\r\n }, () => { this.navigate(index, forward) });\r\n } else if (!forward) {\r\n this.navigate(index, forward);\r\n }\r\n } else if (index === 2) {\r\n if (!utils.isNull(data)) {\r\n this.setState({\r\n data: { ...this.state.data, registrationDetails: data }\r\n }, () => { this.navigate(index, forward) });\r\n } else if (!forward) {\r\n this.navigate(index, forward);\r\n }\r\n } else if (index === 3) {\r\n if (!utils.isNull(data)) {\r\n this.setState({\r\n data: { ...this.state.data, trainingProviderDetails: data }\r\n }, () => { this.navigate(index, forward) });\r\n } else if (!forward) {\r\n this.navigate(index, forward);\r\n }\r\n } else if (index === 4) {\r\n if (!utils.isNull(data) && forward) {\r\n let facilitatorData = {};\r\n facilitatorData.Person = this.state.data.personRoleDetails;\r\n facilitatorData.RegistrationDetails = this.state.data.registrationDetails;\r\n facilitatorData.Scope = data;\r\n facilitatorData.Scope.selectedIntervension = null;\r\n facilitatorData.TrainingProviders = this.state.data.trainingProviderDetails.trainingProviders;\r\n\r\n utils.invokeUrl(\"api/sims/facilitator/AddFacilitator\", (data) => {\r\n this.props.history.push({\r\n pathname: '/facilitatorSearch'\r\n })\r\n }, () => { alert(utils.SYSTEM_ERROR_MESSAGE) }, {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n \"Authorization\": \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(facilitatorData)\r\n });\r\n } else {\r\n this.setState({\r\n data: { ...this.state.data, scopeDetails: data }\r\n }, () => { this.navigate(index, forward) });\r\n }\r\n }\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n }\r\n\r\n componentDidMount() {\r\n utils.setLegend(\"Add Facilitator\");\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n {this.state.currentStepIndex === 0 ?\r\n\r\n this.stepHandler(index, forward, data)} />\r\n : null}\r\n {this.state.currentStepIndex === 1 ? this.stepHandler(index, forward, data)} /> : \"\"}\r\n {this.state.currentStepIndex === 2 ? this.stepHandler(index, forward, data)} /> : \"\"}\r\n {this.state.currentStepIndex === 3 ? this.stepHandler(index, forward, data)} /> : \"\"}\r\n {this.state.currentStepIndex === 4 ? this.stepHandler(index, forward, data)} /> : \"\"}\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(AddFacilitatorFlow));\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport { ConsultantForm } from './ConsultantForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'back', label: 'BACK', tooltip: 'Back to document upload', theme: true },\r\n { id: 'finish', label: 'FINISH', tooltip: 'Save consultant', theme: true }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst formRef = React.createRef();\r\nclass AddConsultantDetails extends Component {\r\n constructor(props) {\r\n super(props)\r\n let data = {};\r\n\r\n if (!utils.isNull(props.data) && !utils.isNull(props.data.personRoleDetails)) {\r\n data = props.data.personRoleDetails.Person;\r\n } else if (!utils.isNull(props.data) && !utils.isNull(props.data.identityDetails)) {\r\n data = props.data.identityDetails.Person ? props.data.identityDetails.Person : props.data.identityDetails.formData\r\n //data.Person = props.data.identityDetails.Person;\r\n } else {\r\n data.Person = {};\r\n }\r\n\r\n this.state = {\r\n model: data\r\n }\r\n }\r\n\r\n handleFormValueChange() {\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n let formValue = formRef.current.getValue();\r\n if (\"back\" === buttonId) {\r\n this.props.stepHandler(1, false, formValue);\r\n } else if (\"finish\" === buttonId) {\r\n if (!utils.isNull(formValue)) {\r\n this.props.stepHandler(1, true, formValue);\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n Consultant Details\r\n
\r\n \r\n this.handleFormValueChange(values)} />\r\n
\r\n \r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} config={toolbarConfig} />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(AddConsultantDetails)\r\n);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport LinearFlowHeading from '../../widgets/LinearFlowHeading';\r\nimport AddPersonRoleSearch from './../person/AddPersonRoleSearch';\r\nimport AddConsultantDetails from './AddConsultantDetails';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\nconst steps = [\r\n { name: \"Identity Details\", tooltip: \"Search the system for an existing person. If one does not extist, click proceed to create a learner with a new person\" },\r\n { name: \"Consultant Details\", tooltip: \"Capture consultant details\" }\r\n];\r\n\r\nconst utils = new ViewUtils();\r\nclass AddConsultantFlow extends Component {\r\n state = {\r\n currentStepIndex: 0,\r\n data: null,\r\n documents: {},\r\n saveMessage: \"\",\r\n hasSaveError: false\r\n }\r\n\r\n navigate(index, forward) {\r\n if (forward) {\r\n if (index !== 1) {\r\n this.setState({ currentStepIndex: index + 1 });\r\n }\r\n } else {\r\n this.setState({ currentStepIndex: index - 1 });\r\n }\r\n }\r\n\r\n stepHandler(index, forward, data) {\r\n console.clear();\r\n console.log(index);\r\n console.log(forward);\r\n console.log(data);\r\n if (index === 0) {\r\n if (!utils.isNull(this.state.data)\r\n && !utils.isNull(this.state.data.personRoleDetails) && !forward) {\r\n this.setState({\r\n data: {\r\n ...this.state.data,\r\n personRoleDetails: {\r\n ...this.state.data.personRoleDetails,\r\n Person: data.Person\r\n }\r\n }\r\n }, () => { this.navigate(index, forward) });\r\n } else {\r\n this.setState({\r\n data: data\r\n }, () => { this.navigate(index, forward) });\r\n }\r\n } else if (index === 1) {\r\n if (!utils.isNull(data) && forward) {\r\n\r\n this.setState({\r\n data: { ...this.state.data, personRoleDetails: data }\r\n }, () => {\r\n let consultantData = {};\r\n consultantData.Person = this.state.data.personRoleDetails;\r\n\r\n utils.invokeUrl(\"api/sims/consultant/Addconsultant\", (data) => {\r\n this.props.history.push({\r\n pathname: '/consultantSearch'\r\n })\r\n }, () => { alert(utils.SYSTEM_ERROR_MESSAGE) }, {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n \"Authorization\": \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(consultantData)\r\n });\r\n })\r\n } else {\r\n this.setState({\r\n data: { ...this.state.data, scopeDetails: data }\r\n }, () => { this.navigate(index, forward) });\r\n }\r\n }\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n }\r\n\r\n componentDidMount() {\r\n utils.setLegend(\"Add Consultant\");\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n {this.state.currentStepIndex === 0 ?\r\n\r\n this.stepHandler(index, forward, data)} />\r\n : null}\r\n {this.state.currentStepIndex === 1 ? this.stepHandler(index, forward, data)} /> : \"\"}\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(AddConsultantFlow));\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport { ProjectOwnerForm } from './ProjectOwnerForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'back', label: 'BACK', tooltip: 'Back to document upload', theme: true },\r\n { id: 'next', label: 'NEXT', tooltip: 'Proceed to add registration details', theme: true }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst formRef = React.createRef();\r\nclass AddProjectOwnerDetails extends Component {\r\n constructor(props) {\r\n super(props)\r\n let data = {};\r\n\r\n if (!utils.isNull(props.data) && !utils.isNull(props.data.personRoleDetails)) {\r\n data = props.data.personRoleDetails.Person;\r\n } else if (!utils.isNull(props.data) && !utils.isNull(props.data.identityDetails)) {\r\n data = props.data.identityDetails.Person ? props.data.identityDetails.Person : props.data.identityDetails.formData\r\n //data.Person = props.data.identityDetails.Person;\r\n } else {\r\n data.Person = {};\r\n }\r\n\r\n this.state = {\r\n model: data\r\n }\r\n }\r\n\r\n handleFormValueChange() {\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n let formValue = formRef.current.getValue();\r\n if (\"back\" === buttonId) {\r\n this.props.stepHandler(1, false, formValue);\r\n } else if (\"next\" === buttonId) {\r\n if (!utils.isNull(formValue)) {\r\n this.props.stepHandler(1, true, formValue);\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n ProjectOwner Details\r\n
\r\n \r\n
this.handleFormValueChange(values)} />\r\n \r\n \r\n \r\n | \r\n | \r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)} config={toolbarConfig} />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(AddProjectOwnerDetails)\r\n);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport LinearFlowHeading from '../../widgets/LinearFlowHeading';\r\nimport AddPersonRoleSearch from './../person/AddPersonRoleSearch';\r\nimport AddProjectOwnerDetails from './AddProjectOwnerDetails';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\nconst steps = [\r\n { name: \"Identity Details\", tooltip: \"Search the system for an existing person. If one does not extist, click proceed to create a learner with a new person\" },\r\n { name: \"ProjectOwner Details\", tooltip: \"Capture Project Owner details\" },\r\n];\r\n\r\nconst utils = new ViewUtils();\r\nclass AddAssesorFlow extends Component {\r\n state = {\r\n currentStepIndex: 0,\r\n data: null,\r\n documents: {},\r\n saveMessage: \"\",\r\n hasSaveError: false\r\n }\r\n\r\n navigate(index, forward) {\r\n if (forward) {\r\n if (index !== 4) {\r\n this.setState({ currentStepIndex: index + 1 });\r\n }\r\n } else {\r\n this.setState({ currentStepIndex: index - 1 });\r\n }\r\n }\r\n\r\n stepHandler(index, forward, data) {\r\n console.clear();\r\n console.log(index);\r\n console.log(forward);\r\n console.log(data);\r\n if (index === 0) {\r\n if (!utils.isNull(this.state.data)\r\n && !utils.isNull(this.state.data.personRoleDetails) && !forward) {\r\n this.setState({\r\n data: {\r\n ...this.state.data,\r\n personRoleDetails: {\r\n ...this.state.data.personRoleDetails,\r\n Person: data.Person\r\n }\r\n }\r\n }, () => { this.navigate(index, forward) });\r\n } else {\r\n this.setState({\r\n data: data\r\n }, () => { this.navigate(index, forward) });\r\n }\r\n } else if (index === 1) {\r\n if (!utils.isNull(data) && forward) {\r\n\r\n this.setState({\r\n data: { ...this.state.data, personRoleDetails: data }\r\n }, () => {\r\n let consultantData = {};\r\n consultantData.Person = this.state.data.personRoleDetails;\r\n\r\n utils.invokeUrl(\"api/sims/projectowner/AddProjectOwner\", (data) => {\r\n this.props.history.push({\r\n pathname: '/projectownerSearch'\r\n })\r\n }, () => { alert(utils.SYSTEM_ERROR_MESSAGE) }, {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n \"Authorization\": \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(consultantData)\r\n });\r\n })\r\n } else {\r\n this.setState({\r\n data: { ...this.state.data, scopeDetails: data }\r\n }, () => { this.navigate(index, forward) });\r\n }\r\n }\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n }\r\n\r\n componentDidMount() {\r\n utils.setLegend(\"Add Project Owner\");\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n {this.state.currentStepIndex === 0 ?\r\n\r\n this.stepHandler(index, forward, data)} />\r\n : null}\r\n {this.state.currentStepIndex === 1 ? this.stepHandler(index, forward, data)} /> : \"\"}\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(AddAssesorFlow));\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport { withStyles } from \"@material-ui/core/styles\"\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n },\r\n}\r\n\r\nclass BarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n series: [{\r\n name: 'Learner Per Province',\r\n data: [\r\n ['Freestate', 3565],\r\n ['Gauteng North', 18405],\r\n ['Gauteng South', 13117],\r\n ['Kwa-Zulu', 17899],\r\n ['Limpopo', 5055],\r\n ['Mpumalanga', 5141],\r\n ['North West', 3356],\r\n ['Northern Cape', 1829],\r\n ['Western Cape', 19522]\r\n ],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n }]\r\n }\r\n }\r\n\r\n highChartsRender() {\r\n \r\n Highcharts.chart({\r\n \r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n \r\n title: {\r\n text: 'Learner Per Province'\r\n },\r\n subtitle: {\r\n text: ''\r\n },\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Learner Per Province'\r\n }\r\n },\r\n legend: {\r\n enabled: false\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Per Provice: {point.y:.1f} Learners'\r\n },\r\n plotOptions: {\r\n colum: {\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n }\r\n },\r\n series: this.state.series\r\n });\r\n }\r\n\r\n componentDidMount() { \r\n this.highChartsRender();\r\n }\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(BarChart);\r\n\r\n\r\n\r\n\r\n\r\n\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col} from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './piechart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n },\r\n}\r\n\r\n\r\nclass PieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: [\r\n ['Achieved', 1, false],\r\n ['Enrolled', 3, false],\r\n ['Pending Verification', 3, false],\r\n ['Withdrawn', 1, false] \r\n ],\r\n showInLegend: true\r\n }]\r\n \r\n }\r\n }\r\n\r\n highChartsRender() {\r\n Highcharts.chart('piecontainer',{\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: 'Learner Learneship'\r\n },\r\n\r\n xAxis: {\r\n categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\r\n },\r\n series: this.state.series \r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(PieChart); \r\n","import React, { Component } from 'react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { connect } from 'react-redux';\r\nimport Barchart from '../barchart/barchart';\r\nimport Piechart from '../piechart/piechart';\r\nimport { Row } from 'react-bootstrap';\r\nimport ViewUtils from '../ViewUtils';\r\nimport CardLayout from '../widgets/Card';\r\n\r\nconst utils = new ViewUtils();\r\nclass Dashboard extends Component {\r\n componentDidMount() {\r\n utils.setLegend(\"Dashboard\");\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n \r\n v1.0.3 \r\n
\r\n
\r\n \r\n \r\n\r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig}\r\n />\r\n {this.state.SDFID ?\r\n { this.handleSelectionChange(selection) }}\r\n dataUrl={\"api/sims/SDFDashboard/GetSDFDashboardOrganisations\"}\r\n searchParameters={this.state.searchParameters}\r\n clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow}\r\n paged={true} /> : null\r\n }\r\n
\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(SDFDashboard));","import { withRouter } from 'react-router-dom';\r\nimport React, { Component } from \"react\";\r\nimport \"../Grid.css\";\r\nimport \"../Form.css\";\r\nimport \"../App.css\";\r\nimport { ViewContainer } from \"../View.jsx\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport EnhancedToolbar from '../widgets/Toolbar';\r\nimport EnhancedTable from '../widgets/ResponsiveTable';\r\nimport AlertItem from \"../widgets/AlertItem\";\r\nimport withMenuPermission from \"../widgets/withMenuPermission\";\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\n\r\nconst headCells = [\r\n { id: 'LegalName', numeric: false, disablePadding: true, label: 'Organisation Name' },\r\n { id: 'SDLNumber', numeric: false, disablePadding: true, label: 'SDL Number' },\r\n { id: 'Status', numeric: false, disablePadding: true, label: 'Status' },\r\n];\r\n\r\nclass StakeholderDashboard extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n selectedId: null,\r\n searchParameters: [{ Name: \"StakeholderID\", Value: null }],\r\n clearSelectedRow: false,\r\n formArray: [],\r\n StakeholderID: null,\r\n stakeholderName: null,\r\n IDNo: null,\r\n OrganisationId: null\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'view', label: '', tooltip: 'View Organisation', icon: 'InfoIcon', disabled: true },\r\n { id: 'edit', label: 'Edit Stakeholder Details', tooltip: '' },\r\n { id: 'link', label: 'Link/Remove Organisations', tooltip: '' },\r\n ]\r\n }\r\n ]\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n\r\n this.getDashboardDetails()\r\n }\r\n getDashboardDetails() {\r\n let url = \"api/sims/StakeholderDashboard/GetStakeholderDashboardDetails\";\r\n utils.invokeUrl(url, (response) => {\r\n this.setState({\r\n formArray: response,\r\n stakeholderName: response.FirstName + \" \" + response.Surname,\r\n IDNo: response.IDNo,\r\n StakeholderID: response.ID,\r\n searchParameters: [{ Name: \"StakeholderID\", Value: response.ID }]\r\n })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n //console.clear();\r\n //console.log(this.state.StakeholderID);\r\n if (\"view\" === buttonId) {\r\n this.props.history.push({\r\n pathname: \"/DGOrganisation\",\r\n state: {\r\n selection: this.state.OrganisationId\r\n }\r\n })\r\n }\r\n else if (\"edit\" === buttonId) {\r\n this.props.history.push({\r\n pathname: \"/stakeholder\",\r\n state: {\r\n selection: this.state.StakeholderID,\r\n IsDashboard: true\r\n }\r\n })\r\n }\r\n else if (\"link\" === buttonId) {\r\n let LookupUrl = `api/sims/DGStakeholderorganisation/`;\r\n this.props.history.push({\r\n pathname: '/Stakeholderorganisationdetails',\r\n state: {\r\n StakeholderID: this.state.StakeholderID,\r\n stakeholderName: this.state.stakeholderName,\r\n IDNo: this.state.IDNo,\r\n IsDashboard: true,\r\n LookupUrl: LookupUrl\r\n }\r\n });\r\n }\r\n }\r\n\r\n handleFormValueChange(values) {\r\n\r\n let newsearchParameters = [...this.state.searchParameters];\r\n\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(newsearchParameters)),\r\n });\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n if (selection[0].Status === \"Approved\") {\r\n this.setState({ selectedId: selection[0].Id, Message: \"\", clearSelectedRow: false, OrganisationId: selection[0].OrganisationID });\r\n toolbarRef.current.setButtonDisabled(\"view\", selection === null || selection.length === 0);\r\n }\r\n else {\r\n this.setState({ selectedId: null, Message: \"\", clearSelectedRow: false, OrganisationId: selection[0].OrganisationID });\r\n toolbarRef.current.setButtonDisabled(\"view\", true);\r\n }\r\n } else {\r\n this.setState({ selectedId: null, Message: \"\", clearSelectedRow: false, OrganisationId: null });\r\n toolbarRef.current.setButtonDisabled(\"view\", true);\r\n }\r\n }\r\n\r\n postAddHandler(cancel, save) {\r\n if (save === true) {\r\n this.setState({\r\n addDialogOpen: false,\r\n selectedId: null,\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)),\r\n showTable: false,\r\n clearSelectedRow: true\r\n }, () => {\r\n this.setState({ showTable: true })\r\n });\r\n }\r\n else if (cancel === true) {\r\n this.setState({\r\n addDialogOpen: false,\r\n selectedId: null,\r\n Message: \"\",\r\n MessageStyle: \"\",\r\n clearSelectedRow: true\r\n })\r\n }\r\n else {\r\n this.setState({\r\n addDialogOpen: false,\r\n selectedId: null,\r\n clearSelectedRow: true\r\n })\r\n }\r\n }\r\n\r\n remove(url) {\r\n this.setState({ promptOpen: false, clearSelectedRow: true, selectedId: null }, () => {\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n })\r\n\r\n let fullUrl = `${url}?id=${this.state.selectedId}`;\r\n utils.invokeUrlDelete(fullUrl, this.successfulRemoveCallback, this.unsuccessfulRemoveCallback);\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ promptOpen: false, clearSelectedRow: true, selectedId: null })\r\n }\r\n\r\n successfulRemoveCallback = (response) => {\r\n\r\n if (!utils.isNull(response.EntityId) && response.EntityId === 0) {\r\n this.setState({\r\n selectedId: null, Message: response.Message, MessageStyle: response.MessageType.toLowerCase(),\r\n clearSelectedRow: true\r\n });\r\n //Force a refresh\r\n this.setState({ searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)) })\r\n }\r\n }\r\n\r\n unsuccessfulRemoveCallback = (response) => {\r\n if (!utils.isNull(response.Message) && response.Message !== \"\") {\r\n this.setState({ Message: response.Message, MessageStyle: response.MessageType.toLowerCase() })\r\n }\r\n }\r\n\r\n onClearSelectedRow = () => {\r\n this.setState({ clearSelectedRow: false });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n\r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig}\r\n />\r\n {this.state.StakeholderID ?\r\n { this.handleSelectionChange(selection) }}\r\n dataUrl={\"api/sims/StakeholderDashboard/GetStakeholderDashboardOrganisations\"}\r\n searchParameters={this.state.searchParameters}\r\n clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow}\r\n paged={true} /> : null\r\n }\r\n
\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(StakeholderDashboard));","import { withRouter } from 'react-router-dom';\r\nimport React, { Component } from \"react\";\r\nimport \"../Grid.css\";\r\nimport \"../Form.css\";\r\nimport \"../App.css\";\r\nimport { ViewContainer } from \"../View.jsx\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport EnhancedToolbar from '../widgets/Toolbar';\r\nimport EnhancedTable from '../widgets/ResponsiveTable';\r\nimport AlertItem from \"../widgets/AlertItem\";\r\nimport withMenuPermission from \"../widgets/withMenuPermission\";\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nconst toolbarRef2 = React.createRef();\r\n\r\nconst headCells = [\r\n { id: 'FirstName', numeric: false, disablePadding: true, label: 'First Name' },\r\n { id: 'Surname', numeric: false, disablePadding: true, label: 'Surname' },\r\n { id: 'IDNo', numeric: false, disablePadding: true, label: 'ID No' },\r\n { id: 'SDLNumber', numeric: false, disablePadding: true, label: 'SDL Number' },\r\n];\r\n\r\nclass SkillsDashboard extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n selectedId: null,\r\n searchParameters: [],\r\n clearSelectedRow: false,\r\n formArray: [],\r\n StakeholderID: null,\r\n stakeholderName: null,\r\n IDNo: null,\r\n OrganisationId: null\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'view', label: '', tooltip: 'View Organisation', icon: 'ViewIcon', disabled: true }\r\n ]\r\n }\r\n ]\r\n }\r\n\r\n this.toolbarConfig2 = {\r\n items: [\r\n\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'view2', label: '', tooltip: 'View Organisation', icon: 'ViewIcon', disabled: true }\r\n ]\r\n }\r\n ]\r\n }\r\n }\r\n\r\n //componentDidMount() {\r\n\r\n // this.getDashboardDetails()\r\n //}\r\n //getDashboardDetails() {\r\n // let url = \"api/sims/SkillsDashboard/GetOrganisationSDFsForApproval\";\r\n // utils.invokeUrl(url, (response) => {\r\n // this.setState({\r\n // formArray: response,\r\n // stakeholderName: response.FirstName + \" \" + response.Surname,\r\n // IDNo: response.IDNo,\r\n // StakeholderID: response.ID,\r\n // searchParameters: [{ Name: \"StakeholderID\", Value: response.ID }]\r\n // })\r\n // },\r\n // null,\r\n // {\r\n // method: 'GET',\r\n // headers: {\r\n // 'Accept': 'application/json',\r\n // 'Content-Type': 'application/json',\r\n // 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n // }\r\n // }\r\n // )\r\n //}\r\n\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n //console.clear();\r\n //console.log(this.state.StakeholderID);\r\n if (\"view\" === buttonId) {\r\n this.props.history.push({\r\n pathname: \"/SkillsOrganisation\",\r\n state: {\r\n selection: this.state.OrganisationId,\r\n isDashboard: true\r\n }\r\n })\r\n }\r\n else\r\n if (\"view2\" === buttonId) {\r\n this.props.history.push({\r\n pathname: \"/DGOrganisation\",\r\n state: {\r\n selection: this.state.OrganisationId,\r\n isDashboard: true\r\n }\r\n })\r\n }\r\n }\r\n\r\n handleFormValueChange(values) {\r\n\r\n let newsearchParameters = [...this.state.searchParameters];\r\n\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(newsearchParameters)),\r\n });\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedId: selection[0].Id, Message: \"\", clearSelectedRow: false, OrganisationId: selection[0].OrganisationID });\r\n }\r\n else {\r\n this.setState({ selectedId: null, Message: \"\", clearSelectedRow: false, OrganisationId: null });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"view\", selection === null || selection.length === 0);\r\n }\r\n\r\n handleSelectionChange2 = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedId: selection[0].Id, Message: \"\", clearSelectedRow: false, OrganisationId: selection[0].OrganisationID });\r\n } else {\r\n this.setState({ selectedId: null, Message: \"\", clearSelectedRow: false, OrganisationId: null });\r\n }\r\n toolbarRef2.current.setButtonDisabled(\"view2\", selection === null || selection.length === 0);\r\n }\r\n\r\n postAddHandler(cancel, save) {\r\n if (save === true) {\r\n this.setState({\r\n addDialogOpen: false,\r\n selectedId: null,\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)),\r\n showTable: false,\r\n clearSelectedRow: true\r\n }, () => {\r\n this.setState({ showTable: true })\r\n });\r\n }\r\n else if (cancel === true) {\r\n this.setState({\r\n addDialogOpen: false,\r\n selectedId: null,\r\n Message: \"\",\r\n MessageStyle: \"\",\r\n clearSelectedRow: true\r\n })\r\n }\r\n else {\r\n this.setState({\r\n addDialogOpen: false,\r\n selectedId: null,\r\n clearSelectedRow: true\r\n })\r\n }\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ promptOpen: false, clearSelectedRow: true, selectedId: null })\r\n }\r\n\r\n onClearSelectedRow = () => {\r\n this.setState({ clearSelectedRow: false });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(SkillsDashboard));","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport UnitStandardsTable from '../UnitStandardsTable';\r\nimport LinkDialog from \"../LinkDialog\";\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport UnitStandardSetupSearch from './UnitStandardSetupSearch';\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport Prompt from '../../widgets/Prompt';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst headCells = [\r\n { id: 'SAQAQualificationID', numeric: false, disablePadding: true, label: 'SAQA Unit Standard ID' },\r\n { id: 'SAQAQualificationTitle', numeric: false, disablePadding: true, label: 'SAQA Unit Standard Title' },\r\n { id: 'Credits', numeric: false, disablePadding: true, label: 'Credits' },\r\n { id: 'UnitStandardType', numeric: false, disablePadding: true, label: 'Unit Standard Type' }\r\n];\r\n\r\nconst toolbarRef = React.createRef();\r\nclass QualificationunitStandardSearch extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n linkDialogOpen: false,\r\n selectedLinkType: null,\r\n selectedLinkStandards: null,\r\n selectedUnitStandard: null,\r\n propmtOpen: false,\r\n promptTitle: \"Unlink Unit Standard From Qualification\",\r\n promptContent: \"Are you sure you want to unlink this unit standard from the qualification?\",\r\n message: \"\",\r\n messageStyle: \"\",\r\n searchParameters: [{ Name: \"SAQAQualificationID\", Value: props.location.state.qualificationId }]\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n {\r\n contextMenu: [\r\n { id: 1, description: \"Core\" },\r\n { id: 2, description: \"Fundamental\" },\r\n { id: 3, description: \"Elective\" },\r\n { id: 4, description: \"Compulsory Elective\" }\r\n ],\r\n id: 'link', label: 'Link', contextIcon: 'LinkIcon', tooltip: 'Link the selected unit standard to the quilification', width: \"60px\"\r\n },\r\n { id: 'unlink', label: '', icon: 'LinkOffIcon', tooltip: 'Un-link the selected unit standard from the quilification', disabled: utils.isNull(this.state.selectedUnitStandard) }\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/Qualificationsetup',\r\n state: { selection: this.props.location.state.qualificationId, id: this.props.location.state.qualificationId }\r\n });\r\n } else if (\"unlink\" === buttonId) {\r\n this.setState({promptOpen: true})\r\n }\r\n }\r\n\r\n successCallback = (response) => {\r\n if (!utils.isNull(response.EntityId) && response.EntityId === 0) {\r\n this.setState({\r\n selectedUnitStandard: null,\r\n selectedLinkType: null,\r\n selectedLinkStandards: null,\r\n selectedUnitStandard: null,\r\n message: response.Message,\r\n messageStyle: response.MessageType.toLowerCase()\r\n });\r\n //Force a refresh\r\n this.setState({ searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)) })\r\n }\r\n else if (!utils.isNull(response.Message) && response.Message !== \"\") {\r\n this.setState({\r\n message: response.Message,\r\n messageStyle: response.MessageType.toLowerCase()\r\n })\r\n }\r\n }\r\n\r\n unlinkUnitstandard(url) {\r\n this.setState({ promptOpen: false }, () => {\r\n toolbarRef.current.setButtonDisabled(\"unlink\", true);\r\n })\r\n\r\n let fullUrl = `${url}?id=${this.state.selectedUnitStandard}&qualificationId=${this.props.location.state.qualificationId}`\r\n utils.invokeUrlDelete(fullUrl, this.successCallback, null);\r\n }\r\n\r\n handleToolbarButtonMenuClick(menu) {\r\n this.setState({ linkDialogOpen: true, selectedLinkType: menu });\r\n }\r\n\r\n postLinkHandler(isCancel, linked) {\r\n if (linked === true) {\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)),\r\n linkDialogOpen: false, selectedUnitStandard: null\r\n });\r\n }\r\n else if (isCancel === true) {\r\n this.setState({\r\n linkDialogOpen: false\r\n })\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({\r\n selectedUnitStandard: selection[0].Id,\r\n message: \"\",\r\n messageStyle: \"\",\r\n });\r\n } else {\r\n this.setState({\r\n selectedUnitStandard: null,\r\n message: \"\",\r\n messageStyle: \"\",\r\n });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"unlink\", selection === null || selection.length === 0);\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ propmtOpen: false})\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Qualification > Unit Standards\"}\r\n
\r\n\r\n \r\n\r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n buttonMenuClickHandler={(menu) => this.handleToolbarButtonMenuClick(menu)}\r\n config={this.toolbarConfig} />\r\n { this.handleSelectionChange(selection) }}\r\n dataUrl=\"api/sims/QualificationSetupUnitStandard/GetSearch\"\r\n searchParameters={this.state.searchParameters} paged={true} />\r\n
\r\n\r\n this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Unit Standards to Qualification: ${this.props.location.state.qualificationTitle}`}\r\n linkName={\"UnitStandards\"} postUrl={\"api/sims/QualificationSetupUnitStandard/linkUnitStandards\"} usePost={true}\r\n programmeId={this.props.location.state.qualificationId} programmeType=\"Q\"\r\n > \r\n \r\n \r\n\r\n this.unlinkUnitstandard(`api/sims/QualificationSetupUnitStandard/unlinkQualificationUnitstandard`)}\r\n closePrompt={this.closePrompt}\r\n />\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(QualificationunitStandardSearch)\r\n);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport UnitStandardsTable from '../UnitStandardsTable';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport UnitStandardSetupSearch from './UnitStandardSetupSearch';\r\nimport LinkDialog from \"../LinkDialog\";\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport Prompt from '../../widgets/Prompt';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst headCells = [\r\n { id: 'SAQAQualificationID', numeric: false, disablePadding: true, label: 'SAQA Unit Standard ID' },\r\n { id: 'SAQAQualificationTitle', numeric: false, disablePadding: true, label: 'SAQA Unit Standard Title' },\r\n { id: 'Credits', numeric: false, disablePadding: true, label: 'Credits' },\r\n { id: 'UnitStandardType', numeric: false, disablePadding: true, label: 'Unit Standard Type' }\r\n];\r\n\r\nconst toolbarRef = React.createRef();\r\n\r\nclass SkillsUnitStandardSearch extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n linkDialogOpen: false,\r\n selectedLinkType: null,\r\n selectedLinkStandards: null,\r\n selectedUnitStandard: null,\r\n keyUpSwitch: false,\r\n propmtOpen: false,\r\n promptTitle: \"Unlink Unit Standard From Skills Programme\",\r\n promptContent: \"Are you sure you want to unlink this unit standard from the skills programme?\",\r\n message: \"\",\r\n messageStyle: \"\",\r\n searchParameters: [{ Name: \"skillsID\", Value: props.location.state.skillsID }]\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n {\r\n contextMenu: [\r\n { id: 1, description: \"Core\" },\r\n { id: 2, description: \"Fundamental\" },\r\n { id: 3, description: \"Elective\" },\r\n { id: 4, description: \"Compulsory Elective\" }\r\n ],\r\n id: 'link', label: 'Link', contextIcon: 'LinkIcon', tooltip: 'Link the selected unit standard to the skills programme'\r\n },\r\n { id: 'unlink', label: 'UN-LINK', icon: 'LinkOffIcon', tooltip: 'Un-link the selected unit standard from the skills programme', disabled: utils.isNull(this.state.selectedUnitStandard) }\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/SkillsProgrammeSetup',\r\n state: { selection: this.props.location.state.skillsID }\r\n });\r\n } else if (\"unlink\" === buttonId) {\r\n this.setState({ promptOpen: true })\r\n }\r\n }\r\n\r\n successCallback = (response) => {\r\n if (!utils.isNull(response.EntityId) && response.EntityId === 0) {\r\n this.setState({\r\n selectedUnitStandard: null,\r\n selectedLinkType: null,\r\n selectedLinkStandards: null,\r\n selectedUnitStandard: null,\r\n message: response.Message,\r\n messageStyle: response.MessageType.toLowerCase()\r\n })\r\n this.setState({ searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)) })\r\n }\r\n else if (!utils.isNull(response.Message) && response.Message !== \"\") {\r\n this.setState({\r\n message: response.Message,\r\n messageStyle: response.MessageType.toLowerCase()\r\n })\r\n }\r\n }\r\n\r\n\r\n unlinkUnitstandard(url) {\r\n this.setState({ promptOpen: false }, () => {\r\n toolbarRef.current.setButtonDisabled(\"unlink\", true);\r\n })\r\n\r\n let fullUrl = `${url}?id=${this.state.selectedUnitStandard}&skillsProgrammeId=${this.props.location.state.skillsID}`\r\n utils.invokeUrlDelete(fullUrl, this.successCallback, null);\r\n }\r\n\r\n handleToolbarButtonMenuClick(menu) {\r\n this.setState({ linkDialogOpen: true, selectedLinkType: menu });\r\n }\r\n\r\n postLinkHandler(isCancel, linked) {\r\n if (linked === true) {\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)),\r\n linkDialogOpen: false, selectedUnitStandard: null\r\n });\r\n }\r\n else if (isCancel === true) {\r\n this.setState({\r\n linkDialogOpen: false\r\n })\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({\r\n selectedUnitStandard: selection[0].Id,\r\n message: \"\",\r\n messageStyle: \"\"\r\n });\r\n } else {\r\n this.setState({\r\n selectedUnitStandard: null,\r\n message: \"\",\r\n messageStyle: \"\"\r\n });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"unlink\", selection === null || selection.length === 0);\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ propmtOpen: false })\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Skills Programme > Unit Standards\"}\r\n
\r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n buttonMenuClickHandler={(menu) => this.handleToolbarButtonMenuClick(menu)}\r\n config={this.toolbarConfig} />\r\n { this.handleSelectionChange(selection) }}\r\n dataUrl=\"api/sims/SkillsProgrammeSetupUnitStandard/GetSearch\"\r\n searchParameters={this.state.searchParameters} paged={true} />\r\n
\r\n\r\n this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Unit Standards to Skills Programme: ${this.props.location.state.SkillsTitle}`}\r\n linkName={\"UnitStandards\"} postUrl={\"api/sims/SkillsProgrammeSetupUnitStandard/linkUnitStandards\"} usePost={true}\r\n programmeId={this.props.location.state.skillsID} programmeType=\"S\"\r\n >\r\n \r\n \r\n\r\n this.unlinkUnitstandard(`api/sims/SkillsProgrammeSetupUnitStandard/unlinkSkillsProgrammeUnitstandard`)}\r\n closePrompt={this.closePrompt}\r\n />\r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(SkillsUnitStandardSearch)\r\n);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport UnitStandardsTable from '../UnitStandardsTable';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport UnitStandardSetupSearch from './UnitStandardSetupSearch';\r\nimport LinkDialog from \"../LinkDialog\";\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport Prompt from '../../widgets/Prompt';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst headCells = [\r\n { id: 'SAQAQualificationID', numeric: false, disablePadding: true, label: 'SAQA Unit Standard ID' },\r\n { id: 'SAQAQualificationTitle', numeric: false, disablePadding: true, label: 'SAQA Unit Standard Title' },\r\n { id: 'Credits', numeric: false, disablePadding: true, label: 'Credits' },\r\n { id: 'UnitStandardType', numeric: false, disablePadding: true, label: 'Unit Standard Type' }\r\n];\r\n\r\nconst toolbarRef = React.createRef();\r\n\r\nclass BursaryUnitStandardSearch extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n linkDialogOpen: false,\r\n selectedLinkType: null,\r\n selectedLinkStandards: null,\r\n selectedUnitStandard: null,\r\n keyUpSwitch: false,\r\n propmtOpen: false,\r\n promptTitle: \"Unlink Unit Standard From Bursary\",\r\n promptContent: \"Are you sure you want to unlink this unit standard from the bursary?\",\r\n message: \"\",\r\n messageStyle: \"\",\r\n searchParameters: [{ Name: \"bursaryID\", Value: props.location.state.bursaryID }]\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n {\r\n contextMenu: [\r\n { id: 1, description: \"Core\" },\r\n { id: 2, description: \"Fundamental\" },\r\n { id: 3, description: \"Elective\" },\r\n { id: 4, description: \"Compulsory Elective\" }\r\n ],\r\n id: 'link', label: 'Link', contextIcon: 'LinkIcon', tooltip: 'Link the selected unit standard to the skills programme'\r\n },\r\n { id: 'unlink', label: 'UN-LINK', icon: 'LinkOffIcon', tooltip: 'Un-link the selected unit standard from the skills programme', disabled: utils.isNull(this.state.selectedUnitStandard) }\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/BursarySetup',\r\n state: { selection: this.props.location.state.bursaryID }\r\n });\r\n } else if (\"unlink\" === buttonId) {\r\n this.setState({ promptOpen: true })\r\n }\r\n }\r\n\r\n successCallback = (response) => {\r\n if (!utils.isNull(response.EntityId) && response.EntityId === 0) {\r\n this.setState({\r\n selectedUnitStandard: null,\r\n selectedLinkType: null,\r\n selectedLinkStandards: null,\r\n selectedUnitStandard: null,\r\n message: response.Message,\r\n messageStyle: response.MessageType.toLowerCase()\r\n })\r\n this.setState({ searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)) })\r\n }\r\n else if (!utils.isNull(response.Message) && response.Message !== \"\") {\r\n this.setState({\r\n message: response.Message,\r\n messageStyle: response.MessageType.toLowerCase()\r\n })\r\n }\r\n }\r\n\r\n\r\n unlinkUnitstandard(url) {\r\n this.setState({ promptOpen: false }, () => {\r\n toolbarRef.current.setButtonDisabled(\"unlink\", true);\r\n })\r\n\r\n let fullUrl = `${url}?id=${this.state.selectedUnitStandard}&bursaryId=${this.props.location.state.bursaryID}`\r\n utils.invokeUrlDelete(fullUrl, this.successCallback, null);\r\n }\r\n\r\n handleToolbarButtonMenuClick(menu) {\r\n this.setState({ linkDialogOpen: true, selectedLinkType: menu });\r\n }\r\n\r\n postLinkHandler(isCancel, linked) {\r\n if (linked === true) {\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)),\r\n linkDialogOpen: false, selectedUnitStandard: null\r\n });\r\n }\r\n else if (isCancel === true) {\r\n this.setState({\r\n linkDialogOpen: false\r\n })\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({\r\n selectedUnitStandard: selection[0].Id,\r\n message: \"\",\r\n messageStyle: \"\"\r\n });\r\n } else {\r\n this.setState({\r\n selectedUnitStandard: null,\r\n message: \"\",\r\n messageStyle: \"\"\r\n });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"unlink\", selection === null || selection.length === 0);\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ propmtOpen: false })\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Bursary > Unit Standards\"}\r\n
\r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n buttonMenuClickHandler={(menu) => this.handleToolbarButtonMenuClick(menu)}\r\n config={this.toolbarConfig} />\r\n { this.handleSelectionChange(selection) }}\r\n dataUrl=\"api/sims/BursarySetupUnitStandard/GetSearch\"\r\n searchParameters={this.state.searchParameters} paged={true} />\r\n
\r\n\r\n this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={`Link Unit Standards to Bursary: ${this.props.location.state.BursaryTitle}`}\r\n linkName={\"UnitStandards\"} postUrl={\"api/sims/BursarySetupUnitStandard/linkUnitStandards\"} usePost={true}\r\n programmeId={this.props.location.state.bursaryID} programmeType=\"S\"\r\n >\r\n \r\n \r\n\r\n this.unlinkUnitstandard(`api/sims/BursarySetupUnitStandard/unlinkBursaryUnitstandard`)}\r\n closePrompt={this.closePrompt}\r\n />\r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(BursaryUnitStandardSearch)\r\n);\r\n","import React from 'react';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\n\r\nexport default function SDFSearchForm(props) {\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport SDFSearchForm from './SDFSearchForm';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\n\r\nconst utils = new ViewUtils();\r\nclass SDFSearch extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n model: {\r\n FirstName: \"\",\r\n Surname: \"\",\r\n IDNo: \"\",\r\n ProvinceID: \"0\",\r\n SDLNumber: \"\"\r\n },\r\n keyUpSwitch: false,\r\n selectedOrganisation: null,\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Add', icon: 'AddIcon', visible: this.props.menuPermissionItem.Add },\r\n { id: 'edit', label: '', tooltip: 'View / Edit', icon: 'EditIcon', disabled: true, visible: this.props.menuPermissionItem.View }\r\n ]\r\n }\r\n ]\r\n }\r\n\r\n this.searchParameters = this.searchParameters = this.props.isLinkSearch ?\r\n [\r\n { Name: \"FirstName\", Value: \"\" },\r\n { Name: \"Surname\", Value: \"\" },\r\n { Name: \"IDNo\", Value: \"\" },\r\n { Name: \"ProvinceID\", Value: \"0\" },\r\n { Name: \"SDLNumber\", Value: \"\" },\r\n ]\r\n :\r\n [\r\n { Name: \"FirstName\", Value: \"\" },\r\n { Name: \"Surname\", Value: \"\" },\r\n { Name: \"IDNo\", Value: \"\" },\r\n { Name: \"ProvinceID\", Value: \"0\" },\r\n { Name: \"SDLNumber\", Value: \"\" },\r\n\r\n ]\r\n\r\n this.headCells = this.props.isLinkSearch ?\r\n [\r\n { id: 'FirstName', numeric: false, disablePadding: true, label: 'First Name' },\r\n { id: 'Surname', numeric: false, disablePadding: true, label: 'Surname' },\r\n { id: 'IDNo', numeric: false, disablePadding: true, label: 'ID Number' }\r\n ]\r\n :\r\n [\r\n { id: 'FirstName', numeric: false, disablePadding: true, label: 'First Name' },\r\n { id: 'Surname', numeric: false, disablePadding: true, label: 'Surname' },\r\n { id: 'IDNo', numeric: false, disablePadding: true, label: 'ID Number' }\r\n\r\n ]\r\n }\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n handleSelection = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedOrganisation: selection })\r\n } else {\r\n this.setState({ selectedOrganisation: null })\r\n }\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (buttonId === \"add\") {\r\n this.setState({ selectedOrganisation: null })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n\r\n \r\n { this.handleSelection(selection) }}\r\n >\r\n { this.onkeyup(e) }}\r\n valueChangeHandler={(values) => {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(values)) {\r\n this.setState({ model: values });\r\n }\r\n }}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(SDFSearch));","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n}));\r\n\r\nexport default function RoleSearchForm(props) {\r\n const [labelWidth, setLabelWidth] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n | \r\n \r\n \r\n Description\r\n\t\t\t\t\t\t\t\t\r\n props.model.Description = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n \r\n \r\n SAQA Code\r\n\t\t\t\t\t\t\t\t\r\n props.model.SAQACode = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n {\"Role Maintenance > Roles & Permissions\"}\r\n
\r\n { this.handleSelection(selection) }}\r\n >\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(RoleSearch));\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n}));\r\n\r\nexport default function UserSearchForm(props) {\r\n const [labelWidth, setLabelWidth] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n | \r\n \r\n \r\n First Name\r\n\t\t\t\t\t\t\t\t\r\n props.model.FirstName = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n \r\n \r\n Surname\r\n\t\t\t\t\t\t\t\t\r\n props.model.Surname = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n \r\n \r\n ID No\r\n\t\t\t\t\t\t\t\t\r\n props.model.IDNo = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n {\"User Maintenance > Users\"}\r\n
\r\n { this.handleSelection(selection) }}\r\n >\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(UserSearch)\r\n);\r\n","import React from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel from '../../widgets/TabPanel';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport { CustomCheckbox } from '../../widgets/CustomCheckbox';\r\nimport { EntityForm } from '../../widgets/Forms';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\n//const utils = new ViewUtils();\r\nexport const UserDetailForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./User.css\";\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport { UserDetailForm } from './UserDetailForm';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport Prompt from '../../widgets/Prompt';\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'save', label: '', tooltip: 'Save', icon: 'SaveIcon' },\r\n { id: \"Password\", label: '', tooltip: 'Reset Password', icon: 'PasswordIcon' },\r\n { id: \"Unlock\", label: '', tooltip: 'Unlock User', icon: 'LockOpenIcon' },\r\n { id: \"userRoles\", label: 'User Roles', tooltip: '' },\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst formRef = React.createRef();\r\nconst utils = new ViewUtils();\r\n\r\nclass UserDetails extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n UserDetails: {\r\n FirstName: \"\",\r\n Surname: \"\",\r\n passwordDialogOpen: false,\r\n },\r\n title: \"\",\r\n id: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) ? this.props.location.state.selection : null,\r\n FirstName: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.FirstName)) ? this.props.location.state.FirstName : null,\r\n Surname: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.Surname)) ? this.props.location.state.Surname : null,\r\n counter: 0,\r\n promptOpen: false,\r\n promptTitle: \"Reset Password\",\r\n promptContent: \"Are you sure you want to reset the current User's Password?\",\r\n };\r\n}\r\n\r\n handleFormValueChange(values) {\r\n if (!utils.isNull(values)) {\r\n this.setState({ UserDetails: values });\r\n }\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"save\" === buttonId) {\r\n this.save();\r\n } else if (\"userRoles\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/userRole',\r\n state: { userID: this.props.location.state.selection, FirstName: this.state.FirstName, Surname: this.state.Surname }\r\n });\r\n } else if (\"Password\" === buttonId) {\r\n this.setState({ promptOpen: true });\r\n } else if (\"Unlock\" === buttonId) {\r\n this.UnlockAccount();\r\n }\r\n else {\r\n this.close();\r\n }\r\n }\r\n\r\n save = () => {\r\n let formValue = formRef.current.getValue();\r\n\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n let isAdd = true;\r\n if (!utils.isNull(this.state.id)) {\r\n formValue.id = this.state.id;\r\n isAdd = false;\r\n }\r\n\r\n if (isAdd) {\r\n const url = `api/sims/user/insertuser`;\r\n utils.saveForm(this, formRef, url, (response) => {\r\n this.setState({ id: response.EntityId });\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n response.MessageType === \"ERROR\" ? this.errorCallback(response) : this.successCallback(response);\r\n }, this.errorCallback);\r\n } else {\r\n const url = `api/sims/user/updateuser`;\r\n utils.updateForm(this, formRef, url, (response) => {\r\n this.setState({ id: response.EntityId});\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n response.MessageType === \"ERROR\" ? this.errorCallback(response) : this.successCallback(response);\r\n }, this.errorCallback);\r\n }\r\n }\r\n }\r\n\r\n resetPassword() {\r\n\r\n this.setState({ promptOpen: false })\r\n let data = {};\r\n data.ID = this.state.id\r\n let url = \"api/sims/user/ResetPassword\";\r\n\r\n utils.invokeUrl(url, (response) => {\r\n this.successCallback(response);\r\n },\r\n (response) => {\r\n this.error(response);\r\n },\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(data)\r\n }\r\n )\r\n }\r\n\r\n UnlockAccount() {\r\n let data = {};\r\n data.ID = this.state.id\r\n let url = \"api/sims/user/UnlockAccount\";\r\n\r\n utils.invokeUrl(url, (response) => {\r\n this.successCallback(response);\r\n },\r\n (response) => {\r\n this.error(response);\r\n },\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(data)\r\n }\r\n )\r\n }\r\n\r\n successCallback(response) {\r\n this.setState({\r\n message: response.Message, messageStyle: response.MessageType, counter: this.state.counter + 1\r\n });\r\n\r\n }\r\n errorCallback(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n \r\n close() {\r\n this.props.history.push({\r\n pathname: '/userMaintenanceSearch',\r\n });\r\n }\r\n\r\n postCloseHandler = () => {\r\n this.setState({ passwordDialogOpen: false })\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"User Maintenance > User > \" + (this.state.FirstName !== null ? this.state.FirstName + \" \" + this.state.Surname : \"> Add\")}\r\n
\r\n \r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n buttonMenuClickHandler={(menu) => this.handleToolbarButtonMenuClick(menu)} enabled={true} config={toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} />\r\n | \r\n
\r\n \r\n
\r\n\r\n { this.resetPassword() }}\r\n closePrompt={this.closePrompt}\r\n />\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(UserDetails);\r\n","import React from 'react';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\nexport const UserRoleForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n \r\n \r\n | \r\n \r\n | \r\n
\r\n \r\n
\r\n }\r\n \r\n );\r\n})\r\n\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./User.css\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport FormDialog from \"../../etqa/FormDialog\";\r\nimport { UserRoleForm } from \"./UserRoleForm\";\r\nimport Prompt from '../../widgets/Prompt';\r\n\r\n\r\nconst headCells = [\r\n { id: 'Role', numeric: false, disablePadding: true, label: 'Role' }\r\n];\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nconst addFormRef = React.createRef();\r\n\r\nclass PermissionSearch extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n model: {\r\n FirstName: \"\",\r\n LastName: \"\"\r\n\r\n },\r\n addDialogOpen: false,\r\n UserID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.userID)) ? this.props.location.state.userID : null,\r\n FirstName: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.FirstName)) ? this.props.location.state.FirstName : null,\r\n Surname: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.Surname)) ? this.props.location.state.Surname : null,\r\n selectedUserRole: null,\r\n searchParameters: [{ Name: \"UserID\", Value: this.props.location.state.userID }],\r\n promptOpen: false,\r\n promptTitle: \"Remove Role from User\",\r\n promptContent: \"Are you sure you want to remove this role from the User?\"\r\n }\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: '', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Add', icon: 'AddIcon' },\r\n { id: 'remove', label: '', tooltip: 'Delete', icon: 'DeleteIcon',disabled: utils.isNull(this.state.selectedUserRole) }\r\n ]\r\n }\r\n \r\n ]\r\n };\r\n}\r\n\r\n handleToolbarButtonMenuClick(menu) {\r\n this.setState({ linkDialogOpen: true, selectedLinkType: menu });\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"add\" === buttonId) {\r\n this.setState({ addDialogOpen: true, Message: \"\" })\r\n } else if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/userDetails',\r\n state: \r\n { \r\n selection: this.props.location.state.userID,\r\n FirstName: this.state.FirstName,\r\n Surname: this.state.Surname\r\n }\r\n });\r\n } \r\n else if (\"remove\" === buttonId) {\r\n this.setState({ promptOpen: true })\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedUserRole: selection[0].Id, Message: \"\" });\r\n } else {\r\n this.setState({ selectedUserRole: null, Message: \"\" });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"remove\", selection === null || selection.length === 0);\r\n }\r\n\r\n postAddHandler(cancel, save) {\r\n if (save === true) {\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)),\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n selectedContact: null,\r\n message: \"User Role successfully added\",\r\n messageStyle: \"success\"\r\n });\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n }\r\n else if (cancel === true) {\r\n this.setState({\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n selectedContact: null,\r\n message: \"\"\r\n })\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n }\r\n else {\r\n this.setState({\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n selectedContact: null,\r\n message: \"A system error has occured, please try again later or contact your administrator\",\r\n messageStyle: \"warning\"\r\n })\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n }\r\n }\r\n\r\n successfulUserRoletRemoveCallback = (response) => {\r\n\r\n if (!utils.isNull(response.EntityId) && response.EntityId === 0) {\r\n this.setState({ selectedUserRole: null, message: response.Message, messageStyle: response.MessageType.toLowerCase() });\r\n //Force a refresh\r\n this.setState({ searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)) })\r\n }\r\n }\r\n\r\n unsuccessfulUserRoleRemoveCallback = (response) => {\r\n if (!utils.isNull(response.Message) && response.Message !== \"\") {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType.toLowerCase() })\r\n }\r\n }\r\n\r\n removeUserRole(url) {\r\n this.setState({ promptOpen: false }, () => {\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n })\r\n\r\n let fullUrl = `${url}?id=${this.state.selectedUserRole}`;\r\n utils.invokeUrlDelete(fullUrl, this.successfulUserRoletRemoveCallback, this.unsuccessfulUserRoleRemoveCallback);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"User > Roles > \" + (this.state.FirstName !== null ? this.state.FirstName + \" \" + this.state.Surname : \"> Add\")}\r\n
\r\n \r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig} />\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} \r\n paged={true} />\r\n
\r\n this.postAddHandler(cancel, save)} \r\n >\r\n \r\n \r\n\r\n { this.removeUserRole(\"api/sims/user/RemoveUserRole\") }}\r\n closePrompt={this.closePrompt}\r\n />\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(PermissionSearch)\r\n);\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nexport default function ClientsEmailsSearchForm(props) {\r\n const [labelWidth, setLabelWidth, tabValue] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Clients.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport ClientsEmailsSearchForm from './ClientsEmailsSearchForm';\r\nimport CardLayout from '../../widgets/Card';\r\n\r\nconst headCells = [\r\n { id: 'Subject', numeric: false, disablePadding: true, label: 'Subject' },\r\n { id: 'Body', numeric: false, disablePadding: true, label: 'Body' },\r\n { id: 'OriginalFileName', numeric: false, disablePadding: true, label: 'Original File Name' }\r\n];\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n \r\n { id: 'add', label: '', tooltip: 'Add', icon: 'AddIcon' },\r\n { id: 'edit', label: '', tooltip: 'Edit', icon: 'EditIcon', disabled: true },\r\n { id: 'delete', label: '', tooltip: 'Delete selected assessor from records', icon: 'DeleteIcon', disabled: true }\r\n ]\r\n },\r\n\r\n \r\n ]\r\n};\r\n\r\n\r\nconst searchParameters = [\r\n\r\n { Name: \"Subject\", Value: \"\" },\r\n { Name: \"Body\", Value: \"\" },\r\n { Name: \"OriginalFileName\", Value: \"\" }\r\n \r\n]\r\n\r\nclass ClientsEmailsSearch extends Component {\r\n\r\n state = {\r\n model: {\r\n Subject: \"\",\r\n Body: \"\",\r\n OriginalFileName: \"\"\r\n \r\n },\r\n dialogOpen: false\r\n };\r\n\r\n\r\n //handleFormValueChange(values) {\r\n // //this.state.model.SICCodeID = values[\"SICCodeID\"];\r\n // let newState = Object.assign({}, this.state);\r\n // newState.model.FormType = values[\"FormType\"];\r\n // this.setState(newState);\r\n //}\r\n\r\n //valueChangeHandler = {(values) => this.handleFormValueChange(values)}\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (buttonId === \"close\") {\r\n this.props.history.push({\r\n pathname: '/maintenanceLetterCreation'\r\n })\r\n }\r\n } \r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (buttonId === \"add\") {\r\n this.props.history.push({\r\n pathname: '/EmailAdd'\r\n })\r\n }\r\n } \r\n \r\n\r\n close() {\r\n this.props.history.push('/maintenanceLetterCreation');\r\n }\r\n\r\n\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(ClientsEmailsSearch)\r\n);\r\n","import React from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel, { FormTabContainer } from '../../widgets/TabPanel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst styles = makeStyles({\r\n TextArea: {\r\n '& .MuiOutlinedInput-inputMultiline': {\r\n height: \"200px !important\",\r\n width: \"600px !important\"\r\n }\r\n }\r\n})\r\n\r\nconst utils = new ViewUtils();\r\nexport const AudienceOptionsForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Clients.css\";\r\nimport CardLayout from '../../widgets/Card';\r\nimport { AudienceOptionsForm } from './AudienceOptionsForm';\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n\r\n { id: 'close', label: 'close', tooltip: 'close' },\r\n { id: 'edit', label: 'edit', tooltip: 'edit', icon: 'EditIcon' },\r\n { id: 'save', label: 'save', tooltip: 'save', icon: 'SaveIcon' }\r\n \r\n \r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst userRef = React.createRef();\r\n\r\nclass AudienceOptions extends Component {\r\n\r\n\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"Add\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/EmailAdd',\r\n\r\n })\r\n }\r\n }\r\n\r\n save() {\r\n let formValue = userRef.current.getValue();\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n let data = JSON.stringify(formValue);\r\n const url = `api/indicium/provider/updateProviderDetails?data=${data}`;\r\n // TODO : Invoke spinner mask\r\n fetch(url)\r\n .then(res => res.json())\r\n .then((responseJson) => {\r\n let response = JSON.parse(responseJson);\r\n if (response.MessageType !== \"ERROR\") {\r\n this.props.history.push({\r\n pathname: '/EmailAddForm'\r\n });\r\n } else {\r\n this.setState({ saveMessage: response.Message, hasSaveError: true });\r\n }\r\n }).catch(() => {\r\n this.setState({ saveMessage: \"A system error has accured. Please contact your system administrator\", hasSaveError: true });\r\n });\r\n }\r\n }\r\n\r\n close() {\r\n this.props.history.push('/EmailAddForm');\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n {\"Create New\"}\r\n
\r\n\r\n
\r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n enabled={true} config={toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} />\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n\r\n
\r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n enabled={true} config={toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} />\r\n | \r\n
\r\n \r\n
\r\n
\r\n {props.children({\r\n handleCheckboxChange: handleCheckboxChange,\r\n handleSelectItemChange: handleSelectItemChange,\r\n updateValue: updateValue,\r\n handleChange: handleChange,\r\n doHandleChange: doHandleChange,\r\n isFieldRequired: isFieldRequired,\r\n isFieldVisible: isFieldVisible,\r\n classes: classes,\r\n values: values,\r\n settings: settings,\r\n addField: addField,\r\n setFieldError: setFieldError,\r\n fields: fields,\r\n fieldParentErrors: fieldParentErrors,\r\n getValuePath: getValuePath,\r\n setLookupSelection: setLookupSelection\r\n })}
\r\n})\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\nimport { EntityForm } from '../../widgets/SearchForm';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel, { FormTabContainer } from '../../widgets/TabPanel';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nexport default function SkillsLetterCreationSearchForm(props) {\r\n const [labelWidth, setLabelWidth, tabValue] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Skills.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport CardLayout from '../../widgets/Card';\r\nimport SkillsSearchForm from './SkillsLetterCreationSearchForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nconst utils = new ViewUtils();\r\n\r\nconst filterParameters = [\r\n\r\n]\r\nconst headCells = [\r\n { id: 'FinancialYear', numeric: false, disablePadding: true, label: 'Financial Year' },\r\n { id: 'CRMLetterGrantType', numeric: false, disablePadding: true, label: 'CRM Letter Grant Type' },\r\n { id: 'CRMLetterType', numeric: false, disablePadding: true, label: 'CRM Letter Type' },\r\n { id: 'CRMLetterSalutation', numeric: false, disablePadding: true, label: 'CRM Letter Salutation' },\r\n { id: 'HeaderA', numeric: false, disablePadding: true, label: 'Header A' },\r\n { id: 'HeaderB', numeric: false, disablePadding: true, label: 'Header B' },\r\n { id: 'CRMLetterGreeting', numeric: false, disablePadding: true, label: 'CRM Letter Greeting' },\r\n { id: 'SignOffName', numeric: false, disablePadding: true, label: 'Sign off Name' },\r\n { id: 'JobTitle', numeric: false, disablePadding: true, label: 'Job Title' }\r\n\r\n];\r\n\r\n\r\n\r\nconst formRef = React.createRef();\r\n\r\nclass SkillsLetterCreationSearch extends Component {\r\n\r\n constructor(props){\r\n super(props)\r\n this.state = {\r\n model: {\r\n FinancialYearID: \"\",\r\n CRMLetterGrantTypeID: \"\",\r\n CRMLetterTypeID: \"\"\r\n\r\n },\r\n keyUpSwitch: false\r\n };\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n {\r\n id: 'add',\r\n label: '',\r\n tooltip: 'Add',\r\n icon: 'AddIcon',\r\n visible: this.props.menuPermissionItem.Add\r\n },\r\n {\r\n id: 'edit',\r\n label: '',\r\n tooltip: 'Edit',\r\n icon: 'EditIcon',\r\n disabled: true,\r\n visible: this.props.menuPermissionItem.Edit\r\n },\r\n {\r\n id: 'delete',\r\n label: '',\r\n tooltip: 'Delete selected letter from records',\r\n icon: 'DeleteIcon',\r\n disabled: true,\r\n visible: this.props.menuPermissionItem.Delete\r\n }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n this.searchParameters = [\r\n { Name: \"FinancialYearID\", Value: \"\" },\r\n { Name: \"CRMLetterGrantTypeID\", Value: \"\" },\r\n { Name: \"CRMLetterTypeID\", Value: \"\" }\r\n\r\n ]\r\n }\r\n\r\n\r\n handleToolbarButtonMenuClick(menu) {\r\n this.setState({ linkDialogOpen: true, selectedLinkType: menu });\r\n }\r\n\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (buttonId === \"add\") {\r\n this.props.history.push({\r\n pathname: '/SkillsLetterCreation'\r\n })\r\n }\r\n } \r\n\r\n postLinkHandler(linked) {\r\n this.setState({ linkDialogOpen: false, selectedLinkType: null, selectedLinkStandards: null });\r\n }\r\n\r\n handleFormValueChange(values) {\r\n this.setState({ model: values });\r\n }\r\n handleSelection = (selection) => {\r\n /*console.log(selection)*/\r\n }\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n { this.handleSelection(selection) }}\r\n\r\n\r\n\r\n >\r\n { this.onkeyup(e) }} ref={formRef} id={typeof this.props.location.state !== 'undefined' ? this.props.location.state.selection : null}\r\n valueChangeHandler={(values) => this.handleFormValueChange(values)}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(SkillsLetterCreationSearch));\r\n","import React from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel from '../../widgets/TabPanel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\nexport const SkillsLetterCreationForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n const styles = makeStyles({\r\n TextArea: {\r\n '& .MuiOutlinedInput-inputMultiline': {\r\n height: \"200px !important\",\r\n width: \"600px !important\"\r\n }\r\n }\r\n })\r\n\r\n const onTextChange = (form, id, value) => {\r\n if (id === \"BodyA\") {\r\n form.updateValue('BodyACharactersLeft', 2500 - value.length);\r\n } else if (id === \"BodyB\") {\r\n form.updateValue('BodyBCharactersLeft', 2500 - value.length);\r\n }\r\n }\r\n\r\n const dataArrivedHandler = (values) => {\r\n if (!utils.isNull(values[\"BodyA\"])) {\r\n ref.current.doUpdateValue('BodyACharactersLeft', 2500 - values[\"BodyA\"].length);\r\n }\r\n else {\r\n ref.current.doUpdateValue('BodyACharactersLeft', 2500);\r\n }\r\n if (!utils.isNull(values[\"BodyB\"])) {\r\n ref.current.doUpdateValue('BodyBCharactersLeft', 2500 - values[\"BodyB\"].length);\r\n }\r\n else {\r\n ref.current.doUpdateValue('BodyBCharactersLeft', 2500);\r\n }\r\n }\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Skills.css\";\r\nimport { SkillsLetterCreationForm } from './SkillsLetterCreationForm';\r\n\r\nimport ViewUtils from '../../ViewUtils';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport { ViewContainer } from \"../../View\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nconst utils = new ViewUtils();\r\n\r\n\r\nconst userRef = React.createRef();\r\n\r\nclass SkillsLetterCreation extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n model: {\r\n BodyACharactersLeft: \"2500\",\r\n BodyBCharactersLeft: \"2500\"\r\n },\r\n title: \"\",\r\n id: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) ? this.props.location.state.selection : null,\r\n\r\n };\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close' },\r\n { id: 'save', label: 'SAVE', tooltip: 'Save', icon: 'SaveIcon' }\r\n ]\r\n },\r\n ]\r\n };\r\n\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.close()\r\n } else if (\"save\" === buttonId) {\r\n this.save()\r\n }\r\n }\r\n\r\n handleFormValueChange = (values) => {\r\n if (!utils.isNull(values)) {\r\n this.setState({\r\n Name: values.Name\r\n });\r\n }\r\n }\r\n\r\n\r\n save() {\r\n let formValue = userRef.current.getValue();\r\n\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n let isAdd = true;\r\n //if (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) {\r\n // formValue.id = this.props.location.state.selection;\r\n // isAdd = false;\r\n //}\r\n if (!utils.isNull(this.state.id)) {\r\n formValue.id = this.state.id;\r\n isAdd = false;\r\n }\r\n //let data = JSON.stringify(formValue);\r\n\r\n if (isAdd) {\r\n const url = `api/sims/skillslettercreationdetails/insertlettercreation`;\r\n utils.saveForm(this, userRef, url, (response) => {\r\n this.setState({ message: \"Letter added successfully\", messageStyle: \"SUCCESS\", id: response.EntityId });\r\n }, this.error);\r\n } else {\r\n const url = `api/sims/skillslettercreationdetails/updatelettercreation`;\r\n utils.updateForm(this, userRef, url, (response) => {\r\n this.setState({ message: \"Letter updated successfully\", messageStyle: \"SUCCESS\" });\r\n }, this.error);\r\n }\r\n }\r\n\r\n\r\n\r\n }\r\n\r\n successCallback(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n error(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n close() {\r\n this.props.history.push('/SkillsLetterCreationSearch');\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n enabled={true} config={this.toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)}\r\n id={this.state.id}\r\n editPermission={this.props.menuPermissionItem.Edit}\r\n data={this.state.model}\r\n model={this.state.model}\r\n />\r\n | \r\n
\r\n \r\n
\r\n\r\n \r\n );\r\n }\r\n}\r\nexport default withRouter(withMenuPermission(SkillsLetterCreation));\r\n// export default withRouter(SkillsLetterCreation);\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n}));\r\n\r\nexport default function SkillsQueryReasonFormSearch(props) {\r\n const [labelWidth, setLabelWidth] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n | \r\n \r\n \r\n Name\r\n\t\t\t\t\t\t\t\t\r\n props.model.Name = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n \r\n \r\n Description\r\n\t\t\t\t\t\t\t\t\r\n props.model.Description = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n enabled={true} config={toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)}\r\n // editPermission={this.props.menuPermissionItem.Edit }\r\n />\r\n | \r\n
\r\n \r\n
\r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(SkillsQueryReason);\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n}));\r\n\r\nexport default function SkillsRejectionReasonSearchForm(props) {\r\n const [labelWidth, setLabelWidth] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n | \r\n \r\n \r\n Name\r\n\t\t\t\t\t\t\t\t\r\n props.model.Name = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n \r\n \r\n Description\r\n\t\t\t\t\t\t\t\t\r\n props.model.Description = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n enabled={true} config={this.toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)}\r\n id={this.state.id}\r\n valueChangeHandler={(values) => this.handleFormValueChange(values)}\r\n editPermission={this.props.menuPermissionItem.Edit}\r\n />\r\n | \r\n
\r\n \r\n
\r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(SkillsRejectionReason));\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n}));\r\n\r\nexport default function SkillsTNumberConversionForm(props) {\r\n const [labelWidth, setLabelWidth] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n | \r\n \r\n \r\n Temporary Number\r\n\t\t\t\t\t\t\t\t\r\n props.model.TemporaryNumber = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n \r\n \r\n Possible SDL Number\r\n\t\t\t\t\t\t\t\t\r\n props.model.PossibleSDLNumber = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n {\"T Number Conversion\"}\r\n
\r\n\r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n enabled={true} config={toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} />\r\n | \r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(SkillsTNumberConversion);\r\n","import React from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel, { FormTabContainer } from '../../widgets/TabPanel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nconst styles = makeStyles({\r\n TextArea: {\r\n '& .MuiOutlinedInput-inputMultiline': {\r\n height: \"150px !important\",\r\n width: \"500px !important\"\r\n }\r\n }\r\n})\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\nexport const CreateBenefitsDescriptionSearchForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Benefits.css\";\r\nimport CardLayout from '../../widgets/Card';\r\nimport { CreateBenefitsDescriptionSearchForm } from './CreateBenefitsDescriptionSearchForm';\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close' },\r\n { id: 'save', label: 'SAVE', tooltip: 'Save', icon: 'SaveIcon' }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst userRef = React.createRef();\r\n\r\nclass CreateBenefitsDescriptionSearch extends Component {\r\n\r\n\r\n\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/maintenanceBenefitDescriptions',\r\n\r\n })\r\n }\r\n }\r\n\r\n save() {\r\n let formValue = userRef.current.getValue();\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n let data = JSON.stringify(formValue);\r\n const url = `api/indicium/provider/updateProviderDetails?data=${data}`;\r\n // TODO : Invoke spinner mask\r\n fetch(url)\r\n .then(res => res.json())\r\n .then((responseJson) => {\r\n let response = JSON.parse(responseJson);\r\n if (response.MessageType !== \"ERROR\") {\r\n this.props.history.push({\r\n pathname: '/CreateBenefitsDescriptionSearch'\r\n });\r\n } else {\r\n this.setState({ saveMessage: response.Message, hasSaveError: true });\r\n }\r\n }).catch(() => {\r\n this.setState({ saveMessage: \"A system error has accured. Please contact your system administrator\", hasSaveError: true });\r\n });\r\n }\r\n }\r\n\r\n close() {\r\n this.props.history.push('/maintenanceBenefitDescriptions');\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n Benefits Description\r\n
\r\n\r\n
\r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n enabled={true} config={toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} />\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n Intervention Title\r\n
\r\n
\r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n enabled={true} config={toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} />\r\n | \r\n
\r\n \r\n
\r\n
\r\n Targets\r\n
\r\n\r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n enabled={true} config={toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} />\r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(BenefitsTargetAddFormSearch);\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nexport default function BenefitsTargetsForm(props) {\r\n const [labelWidth, setLabelWidth, tabValue] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Benefits.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport BenefitsTargetsForm from './BenefitsTargetsForm';\r\nimport CardLayout from '../../widgets/Card';\r\n\r\n\r\nconst headCells = [\r\n\r\n { id: 'Number', numeric: false, disablePadding: true, label: 'Number' },\r\n { id: 'Description', numeric: false, disablePadding: true, label: 'Description' }\r\n];\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Add', icon: 'AddIcon' },\r\n { id: 'edit', label: '', tooltip: 'Edit', icon: 'EditIcon', disabled: true },\r\n { id: 'delete', label: '', tooltip: 'Delete selected assessor from records', icon: 'DeleteIcon', disabled: true }\r\n \r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst searchParameters = [\r\n { Name: \"Number\", Value: \"\" },\r\n { Name: \"Description\", Value: \"\" }\r\n \r\n]\r\n\r\nclass BenefitsTargetsSearch extends Component {\r\n\r\n state = {\r\n model: {\r\n Number: \"\",\r\n Description: \"\"\r\n },\r\n dialogOpen: false\r\n };\r\n\r\n \r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(BenefitsTargetsSearch)\r\n);\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nexport default function InterventionTitlesForm(props) {\r\n const [labelWidth, setLabelWidth, tabValue] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Benefits.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport CardLayout from '../../widgets/Card';\r\nimport InterventionTitlesForm from './InterventionTitlesForm';\r\n\r\n\r\nconst headCells = [\r\n \r\n { id: 'Description', numeric: false, disablePadding: true, label: 'Description' }\r\n];\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Add', icon: 'AddIcon' },\r\n { id: 'edit', label: '', tooltip: 'Edit', icon: 'EditIcon', disabled: true },\r\n { id: 'delete', label: '', tooltip: 'Delete selected assessor from records', icon: 'DeleteIcon', disabled: true }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst searchParameters = [\r\n \r\n { Name: \"Description\", Value: \"\" }\r\n\r\n]\r\n\r\nclass BenefitsTargetsSearch extends Component {\r\n\r\n state = {\r\n model: {\r\n \r\n Description: \"\"\r\n },\r\n dialogOpen: false\r\n };\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/CreateInterventionTitles',\r\n\r\n })\r\n }\r\n }\r\n\r\n close() {\r\n this.props.history.push('/CreateInterventionTitles');\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(BenefitsTargetsSearch)\r\n);\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nexport default function LinkingSearchForm(props) {\r\n const [labelWidth, setLabelWidth, tabValue] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Benefits.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport CardLayout from '../../widgets/Card';\r\nimport LinkingSearchForm from './LinkingSearchForm';\r\n\r\n\r\nconst headCells = [\r\n\r\n { id: 'Target', numeric: false, disablePadding: true, label: 'Target' },\r\n { id: 'Intervention', numeric: false, disablePadding: true, label: 'Intervention' },\r\n { id: '\tBenefit', numeric: false, disablePadding: true, label: '\tBenefit' },\r\n \r\n];\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Add', icon: 'AddIcon' },\r\n { id: 'edit', label: '', tooltip: 'Edit', icon: 'EditIcon', disabled: true },\r\n { id: 'delete', label: '', tooltip: 'Delete selected assessor from records', icon: 'DeleteIcon', disabled: true }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst searchParameters = [\r\n\r\n { Name: \"Target\", Value: \"\" },\r\n { Name: \"Intervention\", Value: \"\" },\r\n { Name: \"Benefit\", Value: \"\" }\r\n \r\n]\r\n\r\nclass LinkingSearch extends Component {\r\n\r\n state = {\r\n model: {\r\n\r\n Target: \"\",\r\n Intervention: \"\",\r\n Benefit: \"\"\r\n },\r\n dialogOpen: false\r\n };\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/EmailAddForm',\r\n\r\n })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(LinkingSearch)\r\n);\r\n","import React from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel, { FormTabContainer } from '../../widgets/TabPanel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { Col, Button } from \"react-bootstrap\";\r\n\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\nexport const BenefitsUploadForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Benefits.css\";\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport CardLayout from '../../widgets/Card';\r\nimport { BenefitsUploadForm } from './BenefitsUploadForm';\r\n\r\n\r\nconst headCells = [\r\n\r\n { id: 'Target', numeric: false, disablePadding: true, label: 'Target' },\r\n { id: 'Intervention', numeric: false, disablePadding: true, label: 'Intervention' },\r\n { id: '\tBenefit', numeric: false, disablePadding: true, label: '\tBenefit' },\r\n \r\n];\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Add', icon: 'AddIcon' },\r\n { id: 'edit', label: '', tooltip: 'Edit', icon: 'EditIcon', disabled: true },\r\n { id: 'delete', label: '', tooltip: 'Delete selected assessor from records', icon: 'DeleteIcon', disabled: true }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst searchParameters = [\r\n\r\n { Name: \"Target\", Value: \"\" },\r\n { Name: \"Intervention\", Value: \"\" },\r\n { Name: \"Benefit\", Value: \"\" }\r\n \r\n]\r\n\r\nconst userRef = React.createRef();\r\n\r\nclass BenefitsUpload extends Component {\r\n\r\n state = {\r\n model: {\r\n\r\n Target: \"\",\r\n Intervention: \"\",\r\n Benefit: \"\"\r\n },\r\n dialogOpen: false\r\n };\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/EmailAddForm',\r\n\r\n })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n Benefits Uploading\r\n
\r\n
\r\n \r\n \r\n \r\n | \r\n this.handleFormValueChange(values)} />\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n Linking\r\n
\r\n\r\n
\r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n enabled={true} config={toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} />\r\n | \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n enabled={true} config={this.toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n \r\n | \r\n
\r\n \r\n
\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(DGLetterCreation));\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\nimport { EntityForm } from '../../widgets/SearchForm';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel, { FormTabContainer } from '../../widgets/TabPanel';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\n\r\nexport default function DGLetterCreationSearchForm(props) {\r\n const [labelWidth, setLabelWidth, tabValue] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./DG.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport CardLayout from '../../widgets/Card';\r\nimport DGLetterCreationSearchForm from './DGLetterCreationSearchForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst filterParameters = [\r\n\r\n]\r\nconst headCells = [\r\n { id: 'FinancialYear', numeric: false, disablePadding: true, label: 'Financial Year' },\r\n { id: 'DGIntervention', numeric: false, disablePadding: true, label: 'DG Intervention' },\r\n { id: 'CRMLetterType', numeric: false, disablePadding: true, label: 'CRM Letter Type' },\r\n { id: 'CRMLetterSalutation', numeric: false, disablePadding: true, label: 'CRM Letter Salutation' },\r\n { id: 'HeaderA', numeric: false, disablePadding: true, label: 'Header A' },\r\n { id: 'HeaderB', numeric: false, disablePadding: true, label: 'Header B' },\r\n { id: 'CRMLetterGreeting', numeric: false, disablePadding: true, label: 'CRM Letter Greeting' },\r\n { id: 'SignOffName', numeric: false, disablePadding: true, label: 'Sign off Name' },\r\n { id: 'JobTitle', numeric: false, disablePadding: true, label: 'Job Title' }\r\n];\r\n\r\nconst formRef = React.createRef();\r\n\r\nclass DGLetterCreationSearch extends Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n model: {\r\n DGFinancialYearID: \"\",\r\n DGLetterTypeID: \"\"\r\n },\r\n keyUpSwitch: false\r\n };\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n {\r\n id: 'add',\r\n label: '',\r\n tooltip: 'Add',\r\n icon: 'AddIcon',\r\n visible: this.props.menuPermissionItem.Add\r\n },\r\n {\r\n id: 'edit',\r\n label: '',\r\n tooltip: 'Edit',\r\n icon: 'EditIcon',\r\n disabled: true,\r\n visible: this.props.menuPermissionItem.Edit\r\n },\r\n {\r\n id: 'delete',\r\n label: '',\r\n tooltip: 'Delete selected letter from records',\r\n icon: 'DeleteIcon',\r\n disabled: true,\r\n visible: this.props.menuPermissionItem.Delete\r\n }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n this.searchParameters = [\r\n { Name: \"DGFinancialYearID\", Value: \"\" },\r\n { Name: \"DGLetterTypeID\", Value: \"\" }\r\n ]\r\n\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (buttonId === \"add\") {\r\n this.props.history.push({\r\n pathname: '/DGLetterCreation'\r\n })\r\n }\r\n } \r\n\r\n handleFormValueChange(values) {\r\n this.setState({ model: values });\r\n }\r\n\r\n handleSelection = (selection) => {\r\n \r\n }\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n { this.handleSelection(selection) }}\r\n > { this.onkeyup(e) }} ref={formRef} id={typeof this.props.location.state !== 'undefined' ? this.props.location.state.selection : null}\r\n valueChangeHandler={(values) => this.handleFormValueChange(values)} />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(DGLetterCreationSearch));\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\nimport { EntityForm } from '../../widgets/SearchForm';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nexport default function DGQueryReasonSearchForm(props) {\r\n const [labelWidth, setLabelWidth, tabValue] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./DG.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport DGQueryReasonSearchForm from './DGQueryReasonSearchForm';\r\nimport CardLayout from '../../widgets/Card';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst filterParameters = [\r\n\r\n]\r\nconst headCells = [\r\n { id: 'DGFinancialYear', numeric: false, disablePadding: true, label: 'DG Financial Year' },\r\n { id: 'Name', numeric: false, disablePadding: true, label: 'Name' },\r\n { id: 'Description', numeric: false, disablePadding: true, label: 'Description' }\r\n];\r\n\r\nconst formRef = React.createRef();\r\n\r\nclass DGQueryReasonSearch extends Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n model: {\r\n DGFinancialYearID: \"\",\r\n Name: \"\",\r\n Description: \"\"\r\n\r\n },\r\n keyUpSwitch: false\r\n };\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n {\r\n id: 'add',\r\n label: '',\r\n tooltip: 'Add',\r\n icon: 'AddIcon',\r\n visible: this.props.menuPermissionItem.Add\r\n },\r\n {\r\n id: 'edit',\r\n label: '',\r\n tooltip: 'Edit',\r\n icon: 'EditIcon',\r\n disabled: true,\r\n visible: this.props.menuPermissionItem.Edit\r\n },\r\n {\r\n id: 'delete',\r\n label: '',\r\n tooltip: 'Delete selected query reason from records',\r\n icon: 'DeleteIcon',\r\n disabled: true,\r\n visible: this.props.menuPermissionItem.Delete\r\n }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n this.searchParameters = [\r\n { Name: \"DGFinancialYearID\", Value: \"\" },\r\n { Name: \"Name\", Value: \"\" },\r\n { Name: \"Description\", Value: \"\" }\r\n ]\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (buttonId === \"add\") {\r\n this.props.history.push({\r\n pathname: '/DGQueryReason'\r\n })\r\n }\r\n } \r\n\r\n handleFormValueChange(values) {\r\n this.setState({ model: values });\r\n }\r\n\r\n handleSelection = (selection) => {\r\n\r\n }\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n { this.handleSelection(selection) }}\r\n > { this.onkeyup(e) }} ref={formRef} id={typeof this.props.location.state !== 'undefined' ? this.props.location.state.selection : null}\r\n valueChangeHandler={(values) => this.handleFormValueChange(values)} />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(DGQueryReasonSearch));\r\n","import React from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel from '../../widgets/TabPanel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { EntityForm } from '../../widgets/Forms'\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\n\r\nexport const DGQueryReasonForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n const styles = makeStyles({\r\n TextArea: {\r\n '& .MuiOutlinedInput-inputMultiline': {\r\n height: \"150px !important\",\r\n width: \"600px !important\"\r\n }\r\n }\r\n })\r\n\r\n return (\r\n \r\n \r\n {form =>\r\n \r\n }\r\n \r\n \r\n );\r\n})\r\n\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./DG.css\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport { DGQueryReasonForm } from './DGQueryReasonForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nconst utils = new ViewUtils();\r\n\r\nconst userRef = React.createRef();\r\n\r\nclass DGQueryReason extends Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n model: {\r\n DGFinancialYearID: \"\",\r\n Name: \"\",\r\n Description: \"\",\r\n },\r\n title: \"\",\r\n id: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) ? this.props.location.state.selection : null,\r\n };\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close' },\r\n { id: 'save', label: 'SAVE', tooltip: 'Save', icon: 'SaveIcon' }\r\n ]\r\n },\r\n ]\r\n };\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.close()\r\n } else if (\"save\" === buttonId) {\r\n this.save()\r\n }\r\n }\r\n\r\n handleFormValueChange = (values) => {\r\n\r\n if (!utils.isNull(values)) {\r\n this.setState({\r\n Name: values.Name\r\n });\r\n }\r\n }\r\n\r\n save() {\r\n let formValue = userRef.current.getValue();\r\n\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n let isAdd = true;\r\n //if (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) {\r\n // formValue.id = this.props.location.state.selection;\r\n // isAdd = false;\r\n //}\r\n if (!utils.isNull(this.state.id)) {\r\n formValue.id = this.state.id;\r\n isAdd = false;\r\n }\r\n //let data = JSON.stringify(formValue);\r\n\r\n if (isAdd) {\r\n const url = `api/sims/dgqueryreasons/insertdgqueryreasons`;\r\n utils.saveForm(this, userRef, url, (response) => {\r\n this.setState({ message: \"Query Reason added successfully\", messageStyle: \"SUCCESS\", id: response.EntityId });\r\n }, this.error);\r\n } else {\r\n const url = `api/sims/dgqueryreasons/updatedgqueryreasons`;\r\n utils.updateForm(this, userRef, url, (response) => {\r\n this.setState({ message: \"Query Reason updated successfully\", messageStyle: \"SUCCESS\" });\r\n }, this.error);\r\n }\r\n }\r\n }\r\n\r\n error(response) {\r\n this.setState({ message: \"A system error has accured. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n\r\n }\r\n\r\n close() {\r\n this.props.history.push('/DGQueryReasonSearch');\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n\r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n enabled={true} config={this.toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)}\r\n editPermission={this.props.menuPermissionItem.Edit}\r\n data={this.state.model}\r\n model={this.state.model}\r\n />\r\n | \r\n
\r\n \r\n
\r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(DGQueryReason));\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\nimport { EntityForm } from '../../widgets/SearchForm';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nexport default function DGRejectionReasonSearchForm(props) {\r\n const [labelWidth, setLabelWidth, tabValue] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./DG.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport DGRejectionReasonSearchForm from './DGRejectionReasonSearchForm';\r\nimport CardLayout from '../../widgets/Card';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst filterParameters = [\r\n\r\n]\r\nconst headCells = [\r\n { id: 'DGFinancialYear', numeric: false, disablePadding: true, label: 'DG Financial Year' },\r\n { id: 'Name', numeric: false, disablePadding: true, label: 'Name' },\r\n { id: 'Description', numeric: false, disablePadding: true, label: 'Description' }\r\n];\r\n\r\nconst formRef = React.createRef();\r\n\r\nclass DGRejectionReasonSearch extends Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n model: {\r\n DGFinancialYearID: \"\",\r\n Name: \"\",\r\n Description: \"\"\r\n },\r\n keyUpSwitch: false\r\n };\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n {\r\n id: 'add',\r\n label: '',\r\n tooltip: 'Add',\r\n icon: 'AddIcon',\r\n visible: this.props.menuPermissionItem.Add\r\n },\r\n {\r\n id: 'edit',\r\n label: '',\r\n tooltip: 'Edit',\r\n icon: 'EditIcon',\r\n disabled: true,\r\n visible: this.props.menuPermissionItem.Edit\r\n },\r\n {\r\n id: 'delete',\r\n label: '',\r\n tooltip: 'Delete selected letter from records',\r\n icon: 'DeleteIcon',\r\n disabled: true,\r\n visible: this.props.menuPermissionItem.Delete\r\n }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n this.searchParameters = [\r\n { Name: \"DGFinancialYearID\", Value: \"\" },\r\n { Name: \"Name\", Value: \"\" },\r\n { Name: \"Description\", Value: \"\" }\r\n ]\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (buttonId === \"add\") {\r\n this.props.history.push({\r\n pathname: '/DGRejectionReason'\r\n })\r\n }\r\n }\r\n\r\n handleFormValueChange(values) {\r\n this.setState({ model: values });\r\n }\r\n\r\n handleSelection = (selection) => {\r\n\r\n }\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n { this.handleSelection(selection) }}\r\n > { this.onkeyup(e) }} ref={formRef} id={typeof this.props.location.state !== 'undefined' ? this.props.location.state.selection : null}\r\n valueChangeHandler={(values) => this.handleFormValueChange(values)} />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(DGRejectionReasonSearch));\r\n","import React from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel from '../../widgets/TabPanel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { EntityForm } from '../../widgets/Forms'\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\n\r\nexport const DGRejectionReasonForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n const styles = makeStyles({\r\n TextArea: {\r\n '& .MuiOutlinedInput-inputMultiline': {\r\n height: \"150px !important\",\r\n width: \"600px !important\"\r\n }\r\n }\r\n })\r\n\r\n return (\r\n\r\n \r\n {form =>\r\n \r\n }\r\n \r\n\r\n );\r\n})\r\n\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./DG.css\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport { DGRejectionReasonForm } from './DGRejectionReasonForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nconst utils = new ViewUtils();\r\n\r\nconst userRef = React.createRef();\r\n\r\nclass DGRejectionReason extends Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n model: {\r\n DGFinancialYearID: \"\",\r\n Name: \"\",\r\n Description: \"\",\r\n },\r\n title: \"\",\r\n id: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) ? this.props.location.state.selection : null,\r\n };\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close' },\r\n { id: 'save', label: 'SAVE', tooltip: 'Save', icon: 'SaveIcon' }\r\n ]\r\n },\r\n ]\r\n };\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.close()\r\n } else if (\"save\" === buttonId) {\r\n this.save()\r\n }\r\n }\r\n\r\n handleFormValueChange = (values) => {\r\n\r\n if (!utils.isNull(values)) {\r\n this.setState({\r\n Name: values.Name\r\n });\r\n }\r\n }\r\n\r\n save() {\r\n let formValue = userRef.current.getValue();\r\n\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n let isAdd = true;\r\n //if (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) {\r\n // formValue.id = this.props.location.state.selection;\r\n // isAdd = false;\r\n //}\r\n if (!utils.isNull(this.state.id)) {\r\n formValue.id = this.state.id;\r\n isAdd = false;\r\n }\r\n //let data = JSON.stringify(formValue);\r\n\r\n if (isAdd) {\r\n const url = `api/sims/dgrejectionreasons/insertdgrejectionreasons`;\r\n utils.saveForm(this, userRef, url, (response) => {\r\n this.setState({ message: \"Rejection Reason added successfully\", messageStyle: \"SUCCESS\", id: response.EntityId });\r\n }, this.error);\r\n } else {\r\n const url = `api/sims/dgrejectionreasons/updatedgrejectionreasons`;\r\n utils.updateForm(this, userRef, url, (response) => {\r\n this.setState({ message: \"Rejection Reason updated successfully\", messageStyle: \"SUCCESS\" });\r\n }, this.error);\r\n }\r\n }\r\n }\r\n\r\n error(response) {\r\n this.setState({ message: \"A system error has accured. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n\r\n }\r\n\r\n close() {\r\n this.props.history.push('/DGRejectionReasonSearch');\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n\r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n enabled={true} config={this.toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)}\r\n editPermission={this.props.menuPermissionItem.Edit}\r\n data={this.state.model}\r\n model={this.state.model}\r\n />\r\n | \r\n
\r\n \r\n
\r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(DGRejectionReason));\r\n","import React from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel from '../../widgets/TabPanel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\nexport const RoleForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Role.css\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport { RoleForm } from './RoleForm';\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\nconst roleRef = React.createRef();\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nclass role extends Component {\r\n\r\n\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n modal: {\r\n Description: \"\",\r\n SAQACode: \"\"\r\n },\r\n title: \"\",\r\n id: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) ? this.props.location.state.selection : null,\r\n RoleName: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.RoleName)) ? this.props.location.state.RoleName : null,\r\n RoleSAQACode: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.RoleSAQACode)) ? this.props.location.state.RoleSAQACode : null\r\n };\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'save', label: 'SAVE', tooltip: 'Save', icon: 'SaveIcon', visible: this.state.id !== null ? this.props.menuPermissionItem.Edit : this.props.menuPermissionItem.Add },\r\n { id: 'rolePermission', label: 'Role Permissions', tooltip: 'Role Permissions', disabled: utils.isNull(this.state.id) }\r\n\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n\r\n\r\n handleFormValueChange(values) {\r\n this.setState({ modal: values });\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"save\" === buttonId) {\r\n this.save();\r\n } else if (\"rolePermission\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/rolePermissionSearch',\r\n state: {\r\n selection: this.state.id,\r\n RoleName: this.state.RoleName,\r\n RoleSAQACode: this.state.RoleSAQACode\r\n }\r\n });\r\n } else {\r\n this.close();\r\n }\r\n }\r\n\r\n save() {\r\n let formValue = roleRef.current.getValue();\r\n console.log(formValue);\r\n\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n let isAdd = true;\r\n //if (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) {\r\n // formValue.id = this.props.location.state.selection;\r\n // isAdd = false;\r\n //}\r\n if (!utils.isNull(this.state.id)) {\r\n formValue.id = this.state.id;\r\n isAdd = false;\r\n }\r\n //let data = JSON.stringify(formValue);\r\n\r\n if (isAdd) {\r\n const url = `api/sims/roledetails/insertrole`;\r\n utils.saveForm(this, roleRef, url, (response) => {\r\n if (response.MessageType === 'SUCCESS') {\r\n this.setState({ id: response.EntityId, RoleName: formValue.Description, RoleSAQACode: formValue.SAQACode, message: response.Message, messageStyle: response.MessageType });\r\n toolbarRef.current.setButtonDisabled(\"rolePermission\", false);\r\n }\r\n else {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n }, this.error);\r\n } else {\r\n const url = `api/sims/roledetails/updaterole`;\r\n utils.updateForm(this, roleRef, url, (response) => {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }, this.error);\r\n }\r\n }\r\n }\r\n\r\n error(response) {\r\n this.setState({ message: \"A system error has accured. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n\r\n }\r\n\r\n close() {\r\n this.props.history.push('/roleMaintenanceSearch');\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Role Maintenance > Roles & Permissions\" + (this.state.RoleName !== null ? \" > \" + this.state.RoleName + \" - \" + this.state.RoleSAQACode : \"> Add\")}\r\n
\r\n \r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n config={this.toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} editPermission={this.state.id !== null ? this.props.menuPermissionItem.Edit : this.props.menuPermissionItem.Add} />\r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(role));\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n}));\r\n\r\nexport default function RolePermissionSearchForm(props) {\r\n const [labelWidth, setLabelWidth] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n | \r\n \r\n \r\n Menu Item Name\r\n \r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n {\"Role Maintenance > Roles & Permissions > \" + this.props.location.state.RoleName + \" - \" + this.props.location.state.RoleSAQACode + \" > Permissions\"}\r\n
\r\n { this.handleSelection(selection) }}\r\n >\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(RolePermissionSearch);\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n}));\r\n\r\nexport default function NavigationSearchForm(props) {\r\n const [labelWidth, setLabelWidth] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n | \r\n \r\n \r\n Menu Item Name\r\n\t\t\t\t\t\t\t\t\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n | \r\n { props.id === null ?\r\n \r\n {\r\n form.setLookupSelection(\"NavigationID\", value)\r\n }} autoFetchData={true} selection={props.selection}\r\n RoleID={props.RoleID}\r\n />\r\n \r\n :\r\n \r\n }\r\n | \r\n
\r\n \r\n | \r\n | \r\n \r\n | \r\n \r\n
\r\n \r\n | \r\n | \r\n \r\n | \r\n \r\n
\r\n \r\n | \r\n | \r\n \r\n | \r\n \r\n
\r\n \r\n | \r\n | \r\n \r\n | \r\n \r\n
\r\n \r\n
\r\n }\r\n \r\n );\r\n})","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Role.css\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport { RolePermissionForm } from './RolePermissionForm';\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\nconst roleRef = React.createRef();\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\n\r\nclass RolePermission extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n modal: {\r\n NavigationID: null\r\n },\r\n title: \"\",\r\n id: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) ? this.props.location.state.selection : null,\r\n RoleName: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.RoleName)) ? this.props.location.state.RoleName : null,\r\n RoleSAQACode: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.RoleSAQACode)) ? this.props.location.state.RoleSAQACode : null,\r\n RoleID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.RoleID)) ? this.props.location.state.RoleID : null,\r\n };\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'save', label: 'SAVE', tooltip: 'Save', icon: 'SaveIcon' }\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n\r\n\r\n handleFormValueChange(values) {\r\n if (JSON.stringify(this.state.modal) !== JSON.stringify(values)) {\r\n if (!utils.isNull(values.NavigationID)) {\r\n values.MenuItemName = values.NavigationID.Description;\r\n }\r\n this.setState({ modal: values });\r\n }\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"save\" === buttonId) {\r\n this.save();\r\n } else {\r\n this.close();\r\n }\r\n }\r\n\r\n save() {\r\n let formValue = roleRef.current.getValue();\r\n\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n formValue.RoleID = this.state.RoleID;\r\n let isAdd = true;\r\n //if (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) {\r\n // formValue.id = this.props.location.state.selection;\r\n // isAdd = false;\r\n //}\r\n if (!utils.isNull(this.state.id)) {\r\n formValue.id = this.state.id;\r\n isAdd = false;\r\n }\r\n //let data = JSON.stringify(formValue);\r\n\r\n if (isAdd) {\r\n const url = `api/sims/permissiondetails/insertpermission`;\r\n utils.saveForm(this, roleRef, url, (response) => {\r\n if (response.MessageType === 'SUCCESS') {\r\n this.setState({ id: response.EntityId, message: response.Message, messageStyle: response.MessageType });\r\n }\r\n else {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n }, this.error);\r\n } else {\r\n const url = `api/sims/permissiondetails/updatepermission`;\r\n utils.updateForm(this, roleRef, url, (response) => {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }, this.error);\r\n }\r\n }\r\n }\r\n\r\n error(response) {\r\n this.setState({ message: \"A system error has accured. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n\r\n }\r\n\r\n close() {\r\n this.props.history.push({\r\n pathname: '/rolePermissionSearch',\r\n state: {\r\n selection: this.state.RoleID,\r\n RoleName: this.state.RoleName,\r\n RoleSAQACode: this.state.RoleSAQACode\r\n }\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Role Maintenance > Roles & Permissions > \" + this.state.RoleName + \" - \" + this.state.RoleSAQACode + \" > Permissions\" + (this.state.id !== null ? \"\" : \" > Add\")}\r\n
\r\n \r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n config={this.toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)}\r\n RoleID={this.state.RoleID}\r\n data={this.state.modal}\r\n />\r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(RolePermission);","import React, { useEffect } from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel from '../../widgets/TabPanel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport { GPSCoordinatesAPI } from '../../widgets/GPSCoordinatesAPI';\r\nimport './SDF.css'\r\nimport { AddressCodeItem } from '../../widgets/AddressCodeItem';\r\nimport { CustomCheckbox } from '../../widgets/CustomCheckbox';\r\nimport DocumentUpload from '../../widgets/DocumentUpload';\r\n\r\nimport clsx from 'clsx';\r\nimport Radio from '@material-ui/core/Radio';\r\nimport RadioGroup from '@material-ui/core/RadioGroup';\r\nimport FormControl from '@material-ui/core/FormControl';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\nconst useStyles = makeStyles({\r\n root: {\r\n // width: '90%',\r\n margin: 0,\r\n '&:hover': {\r\n backgroundColor: 'transparent',\r\n },\r\n },\r\n bullet: {\r\n display: 'inline-block',\r\n margin: '0 2px',\r\n transform: 'scale(0.8)',\r\n },\r\n title: {\r\n fontSize: 14,\r\n },\r\n pos: {\r\n marginBottom: 12,\r\n },\r\n icon: {\r\n borderRadius: '50%',\r\n width: 16,\r\n height: 16,\r\n boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',\r\n backgroundColor: '#f5f8fa',\r\n\r\n 'input:hover ~ &': {\r\n backgroundColor: '#ebf1f5',\r\n },\r\n 'input:disabled ~ &': {\r\n boxShadow: 'none',\r\n background: 'rgba(206,217,224,.5)',\r\n },\r\n },\r\n checkedIcon: {\r\n backgroundColor: '#01579B',\r\n '&:before': {\r\n display: 'block',\r\n width: 16,\r\n height: 16,\r\n content: '\"\"',\r\n },\r\n 'input:hover ~ &': {\r\n backgroundColor: '#01579B',\r\n },\r\n },\r\n});\r\n\r\nfunction StyledRadio(props) {\r\n const classes = useStyles();\r\n\r\n return (\r\n }\r\n icon={}\r\n {...props}\r\n />\r\n );\r\n}\r\n\r\nexport const SDFForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const [scopeSelected, setScopeSelected] = React.useState(1)\r\n const [usePostalAddress, setUsePostalAddress] = React.useState(false)\r\n const [postalCodeValue, setPostalCodeValue] = React.useState(null);\r\n const [physicalCodeValue, setPhysicalCodeValue] = React.useState(null);\r\n const [form, setForm] = React.useState(null);\r\n const [file, setFile] = React.useState(null);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n const handleScopeSelected = (event) => {\r\n if (event.target.value != scopeSelected) {\r\n setScopeSelected(event.target.value)\r\n\r\n // this.state.model.scopeSelected = event.target.value;\r\n\r\n }\r\n }\r\n const [filename, setFilename] = React.useState(\"\");\r\n const [size, setSize] = React.useState(null);\r\n const [base64, setBase64] = React.useState(null);\r\n const [type, setType] = React.useState(null);\r\n\r\n\r\n const fileUploadHandler = (data) => {\r\n setForm({});\r\n setFile(data);\r\n }\r\n\r\n const onUploadHandler = (data) => {\r\n if (data) {\r\n setFilename(data.name);\r\n setSize(data.size);\r\n setBase64(data.base64);\r\n setType(data.type);\r\n }\r\n }\r\n\r\n const processFileHandler = () => {\r\n //this.setState({ message: \"\", hasError: false });\r\n if (props.IsExternal) {\r\n utils.invokeUrlExternal('dms/ocr/id/card', (data) => {\r\n if (data) {\r\n setForm(data);\r\n //form.values['IDNo'] = data.IDNo;\r\n } else {\r\n //this.setState({ message: \"The file cannot be extracted\", hasError: true });\r\n }\r\n }, () => {\r\n //this.setState({ message: \"The file cannot be extracted\", hasError: true });\r\n }, {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n \"Authorization\": \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(file)\r\n });\r\n } else {\r\n utils.invokeUrl('dms/ocr/id/card', (data) => {\r\n if (data) {\r\n setForm(data);\r\n //form.values['IDNo'] = data.IDNo;\r\n } else {\r\n //this.setState({ message: \"The file cannot be extracted\", hasError: true });\r\n }\r\n }, () => {\r\n //this.setState({ message: \"The file cannot be extracted\", hasError: true });\r\n }, {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n \"Authorization\": \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(file)\r\n });\r\n }\r\n }\r\n\r\n function FileDownload(id,) {\r\n utils.invokeUrl(\"api/sims/sdfdetails/DownloadSDFCertificate?id=\" + id, (response) => {\r\n\r\n var blob = new Blob([base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n }, (e) => {\r\n this.setState({ messsageAlert: utils.SYSTEM_ERROR_MESSAGE, messageStyle: \"outlinedError\" });\r\n }\r\n );\r\n };\r\n\r\n function base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n\r\n function DocRequiredCheck(value) {\r\n if (value !== undefined && value !== null && value !== \"\") {\r\n return false\r\n }\r\n else if (value === undefined || value === null || value === \"\") {\r\n return true\r\n }\r\n };\r\n\r\n\r\n const handleFormValueChange = (values) => {\r\n\r\n if (JSON.stringify(form) !== JSON.stringify(values)) {\r\n if (!utils.isNull(values)) {\r\n let idnumberDetails = { ...values };\r\n if (!utils.isNull(values.IDNo) && values.IDNo.length == 13) {\r\n if (utils.isNull(values.CitizenResidentialStatusID) && utils.isNull(values.DateofBirth) && utils.isNull(values.GenderID) && utils.isNull(values.NationalityID)) {\r\n try {\r\n const residentailStatus = idnumberDetails.IDNo.charAt(10);\r\n if (residentailStatus == \"0\") {\r\n idnumberDetails.CitizenResidentialStatusID = { Id: \"1\", Description: \"South Africa\" };\r\n idnumberDetails.NationalityID = { Id: \"1\", Description: \"South Africa\" };\r\n }\r\n else if (residentailStatus == \"1\") {\r\n idnumberDetails.CitizenResidentialStatusID = { Id: \"4\", Description: \"Permanent Resident\" }\r\n }\r\n var date = new Date('19' + idnumberDetails.IDNo.slice(0, 2), idnumberDetails.IDNo.slice(2, 4) - 1, idnumberDetails.IDNo.slice(4, 6));\r\n idnumberDetails.DateofBirth = date;\r\n const gender = parseInt(idnumberDetails.IDNo.slice(6, 10));\r\n if (gender >= 0 && gender <= 4999) {\r\n idnumberDetails.GenderID = { Id: \"2\", Description: \"Female\" }\r\n } else if (gender >= 5000 && gender <= 9999) {\r\n idnumberDetails.GenderID = { Id: \"1\", Description: \"Male\" }\r\n }\r\n\r\n setForm({ ...form, ...idnumberDetails });\r\n //props.valueChangeHandler(values);\r\n //this.setState((prevState, props) => {\r\n // return {\r\n // form: { ...prevState.formData, ...idnumberDetails }\r\n // }\r\n //});\r\n } catch (err) {\r\n\r\n }\r\n }\r\n }\r\n //if (!utils.isNull(values.FirstName)) {\r\n // idnumberDetails.Initials = values.FirstName.charAt(0).toUpperCase();\r\n //}\r\n setForm({ ...form, ...idnumberDetails });\r\n }\r\n props.valueChangeHandler(values);\r\n }\r\n }\r\n\r\n const onTextChange = (form, id, value) => {\r\n let Initials = '';\r\n if (!utils.isNull(form.values.FirstName)) {\r\n Initials += form.values.FirstName.charAt(0).toUpperCase();\r\n }\r\n if (!utils.isNull(form.values.MiddleName)) {\r\n Initials += form.values.MiddleName.charAt(0).toUpperCase();\r\n }\r\n if (Initials !== '') {\r\n form.updateValue('Initials', Initials);\r\n }\r\n }\r\n\r\n const handleUsePhysicalAddressForPostal = form => event => {\r\n\r\n\r\n if (event.target.checked === true) {\r\n form.values['PostalAddressLine1'] = form.values[\"PhysicalAddress1\"];\r\n form.values['PostalAddressLine2'] = form.values[\"PhysicalAddress2\"];\r\n form.values['PostalAddressLine3'] = form.values[\"PhysicalAddress3\"];\r\n form.values['PostalCode'] = form.values[\"PhysicalCode\"];\r\n setPostalCodeValue(form.values[\"PhysicalCode\"]);\r\n }\r\n form.updateValue('UsePhysicalAsPostal', event.target.checked);\r\n\r\n\r\n }\r\n const updateGPSAddress = (address, form) => {\r\n form.values[\"GPSCoordinates\"] = address.gpscoordinates.coordinate;\r\n form.values[\"PhysicalAddress1\"] = address.streetnumberpar + ' ' + address.routepar;\r\n form.values[\"PhysicalAddress2\"] = address.sublocalitylevel1par;\r\n form.values[\"PhysicalAddress3\"] = address.localitypar;\r\n form.values[\"PhysicalCode\"] = address.postalcodepar;\r\n setPhysicalCodeValue(form.values[\"PhysicalCode\"]);\r\n }\r\n const classes = useStyles();\r\n const handleCheckboxChange = (e) => {\r\n\r\n if (e !== true) {\r\n setUsePostalAddress(true)\r\n } else {\r\n setUsePostalAddress(false)\r\n }\r\n }\r\n\r\n const dataArrivedHandler = (values) => {\r\n\r\n if (!utils.isNull(props.dataArrivedHandler)) {\r\n props.dataArrivedHandler(values);\r\n }\r\n\r\n if (!DocRequiredCheck(values.SDFCertificateDocumentName)) {\r\n ref.current.setValue(\"SDFCertificate\", { Base64: \"\" });\r\n }\r\n }\r\n return (\r\n\r\n \r\n\r\n \r\n \r\n {form =>\r\n \r\n }\r\n \r\n \r\n \r\n\r\n );\r\n})","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./SDF.css\";\r\nimport \"./sdfStyle.css\";\r\nimport { SDFForm } from './SDFForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nimport LoadingIndicator from '../../../components/LoadingIndicator';\r\n\r\nconst formRef = React.createRef();\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\n\r\n\r\nclass SDF extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n sdfDetails: {\r\n FirstName: \"\",\r\n Surname: \"\",\r\n IDNo: \"\",\r\n },\r\n message: \"\",\r\n messageStyle: \"\",\r\n title: \"\",\r\n id: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) ? this.props.location.state.selection : null,\r\n IsExternal: utils.isNull(this.props.IsExternal) ? false : this.props.IsExternal,\r\n IsDashboard: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.IsDashboard)) ? this.props.location.state.IsDashboard : null,\r\n counter: 0\r\n };\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'save', label: 'SAVE', tooltip: 'Save', icon: 'SaveIcon', visible: this.props.IsExternal ? true : utils.isNull(this.props.location.state.selection) ? this.props.menuPermissionItem.Edit : this.props.menuPermissionItem.Add },\r\n { id: 'organisationDetails', label: 'Organisation Details', tooltip: 'Organisation Details', disabled: utils.isNull(this.state.id) }\r\n ]\r\n }\r\n ]\r\n }\r\n\r\n }\r\n\r\n //componentDidMount() {\r\n // let LookupUrl = `api/sims/sdforganisationdetails/`;\r\n // let path = '/sdfOrgDetails';\r\n // if (this.props.IsExternal) { LookupUrl = `api/sims/sdfregistration/`; path = '/sdfRegistrationOrgDetails'; }\r\n // this.props.history.push({\r\n // pathname: path,\r\n // state: {\r\n // SDFID: 7,\r\n // sdfName: 'test' + \" \" + 'test',\r\n // IDNo: '15092021',\r\n // IsDashboard: false,\r\n // IsExternal: true,\r\n // LookupUrl: LookupUrl\r\n // }\r\n // });\r\n //}\r\n\r\n handleFormValueChange(values) {\r\n if (!utils.isNull(values)) {\r\n this.setState({\r\n sdfDetails: {\r\n FirstName: values.FirstName,\r\n Surname: values.Surname,\r\n IDNo: values.IDNo\r\n }\r\n });\r\n }\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"save\" === buttonId) {\r\n this.save();\r\n } else if (\"close\" === buttonId) {\r\n this.closeView();\r\n } else if (\"organisationDetails\" === buttonId) {\r\n let LookupUrl = `api/sims/sdforganisationdetails/`;\r\n let path = '/sdfOrgDetails';\r\n if (this.props.IsExternal) { LookupUrl = `api/sims/sdfregistration/`; path = '/sdfRegistrationOrgDetails';}\r\n this.props.history.push({\r\n pathname: path,\r\n state: {\r\n SDFID: this.state.id,\r\n sdfName: this.state.sdfDetails.FirstName + \" \" + this.state.sdfDetails.Surname,\r\n IDNo: this.state.sdfDetails.IDNo,\r\n IsDashboard: this.state.IsDashboard,\r\n IsExternal: this.state.IsExternal,\r\n LookupUrl: LookupUrl\r\n }\r\n });\r\n }\r\n }\r\n\r\n save() {\r\n let formValue = formRef.current.getValue();\r\n\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n let isAdd = true;\r\n\r\n if (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) {\r\n formValue.id = this.props.location.state.selection;\r\n isAdd = false;\r\n }\r\n let data = JSON.stringify(formValue);\r\n\r\n if (isAdd) {\r\n let url = `api/sims/sdfdetails/AddSDF`;\r\n if (this.props.IsExternal) {\r\n url = `api/sims/sdfregistration/AddSDF`;\r\n utils.saveFormExternal(this, formRef, url, (response) => {\r\n this.setState({ id: response.EntityId }, () => { toolbarRef.current.setButtonDisabled(\"organisationDetails\", false); });\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n response.MessageType === \"ERROR\" ? this.errorCallback(response) : this.successCallback(response);\r\n }, this.error);\r\n } else {\r\n utils.saveForm(this, formRef, url, (response) => {\r\n this.setState({ id: response.EntityId }, () => { toolbarRef.current.setButtonDisabled(\"organisationDetails\", false); });\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n response.MessageType === \"ERROR\" ? this.errorCallback(response) : this.successCallback(response);\r\n }, this.error);\r\n }\r\n } else {\r\n const url = `api/sims/sdfdetails/UpdateSDF`;\r\n utils.updateForm(this, formRef, url, (response) => {\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n response.MessageType === \"ERROR\" ? this.errorCallback(response) : this.successCallback(response);\r\n }, this.error);\r\n }\r\n }\r\n }\r\n\r\n successCallback(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType, counter: this.state.counter + 1 });\r\n }\r\n error(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n\r\n closeView() {\r\n let url = `/sdfsearch`;\r\n if (this.state.IsDashboard) { url = `/sdfdashboard`; }\r\n this.props.history.push({\r\n pathname: url,\r\n state: { selection: null }\r\n });\r\n }\r\n\r\n dataArrivedHandler = (values) => {\r\n if (!utils.isNull(values[\"ID\"]) && values[\"ID\"] !== 0) {\r\n this.setState({ id: values[\"ID\"] });\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {this.state.IsExternal ? : null}\r\n \r\n
\r\n SDF Details\r\n
\r\n
\r\n
\r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef} enabled={true} config={this.toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)}\r\n entityLookupController={\"GetFind\"} IsExternal={this.props.IsExternal} LookupUrl={typeof this.props.IsExternal != 'undefined' ? \"api/sims/sdfregistration/GetLookupList?listId=\" : \"api/sims/sdfdetails/GetLookupList?listId=\"}\r\n dataArrivedHandler={(values) => this.dataArrivedHandler(values)} dataUrl={typeof this.props.IsExternal != 'undefined' ? \"api/sims/sdfregistration/getfind\" : \"api/sims/sdfdetails/getfind\"} />\r\n | \r\n
\r\n \r\n
\r\n
\r\n {\"SDF Details > Organisations Details > \" + (this.props.location.state.sdfName !== null ? this.props.location.state.sdfName + \" - \" + this.props.location.state.IDNo : \"\")}\r\n
\r\n\r\n \r\n\r\n \r\n\r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig}\r\n />\r\n {this.state.showTable === true && (\r\n { this.handleSelectionChange(selection) }}\r\n dataUrl={this.props.location.state.LookupUrl + \"GetSDFOrganisation\"}\r\n searchParameters={this.state.searchParameters}\r\n onCellSelectionChange={(rowid, headCell) => { this.FileDownload(rowid, headCell) }}\r\n clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow}\r\n paged={true}\r\n checkRefreshToken={!this.state.IsExternal}\r\n />\r\n )}\r\n
\r\n\r\n this.postAddHandler(cancel, save)}\r\n IsExternal={this.state.IsExternal}\r\n >\r\n this.handleFormValueChange(values)} open={this.state.addDialogOpen} SDFID={this.props.location.state.SDFID}\r\n LookupUrl={this.props.location.state.LookupUrl}\r\n IsExternal={this.state.IsExternal}\r\n />\r\n \r\n\r\n { this.remove(this.props.location.state.LookupUrl + \"RemoveSDFOrganisation\") }}\r\n closePrompt={this.closePrompt}\r\n />\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(SDFOrganisations));","import React from 'react';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\n\r\nexport default function OrganisationSearchForm(props) {\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./DGOrganisation.css\";\r\nimport OrganisationSearchForm from './DGOrganisationSearchForm';\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\n\r\nconst utils = new ViewUtils();\r\nconst headCells = [\r\n { id: 'LegalName', numeric: false, disablePadding: true, label: 'Legal Name' },\r\n { id: 'SDLNumber', numeric: false, disablePadding: true, label: 'SDL Number' },\r\n { id: 'TradeName', numeric: false, disablePadding: true, label: 'Trade Name' },\r\n { id: 'SICCode', numeric: false, disablePadding: true, label: 'SIC Code' },\r\n];\r\nclass OrganisationSearch extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n model: {\r\n LegalName: \"\",\r\n SDLNumber: \"\",\r\n TradeName: \"\",\r\n SICCodeID: \"\"\r\n },\r\n keyUpSwitch: false,\r\n selectedOrganisation: null,\r\n }\r\n\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'edit', label: '', tooltip: 'Edit', icon: 'EditIcon', disabled: utils.isNull(this.state.selectedOrganisation), visible: this.props.menuPermissionItem.Edit },\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n this.searchParameters = [\r\n { Name: \"LegalName\", Value: \"\" },\r\n { Name: \"SDLNumber\", Value: \"\" },\r\n { Name: \"TradeName\", Value: \"\" },\r\n { Name: \"SICCodeID\", Value: \"\" }\r\n ]\r\n\r\n }\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n handleSelection = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedOrganisation: selection })\r\n } else {\r\n this.setState({ selectedOrganisation: null })\r\n }\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (buttonId === \"add\") {\r\n this.props.history.push({\r\n pathname: '/DGOrganisation'\r\n })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n\r\n \r\n\r\n { this.handleSelection(selection) }}\r\n \r\n >\r\n { this.onkeyup(e) }}\r\n valueChangeHandler={(values) => {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(values)) {\r\n this.setState({ model: values });\r\n }\r\n }}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\n\r\nexport default withRouter(withMenuPermission(OrganisationSearch));","import React from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel, { FormTabContainer } from '../../widgets/TabPanel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { AddressCodeItem } from '../../widgets/AddressCodeItem';\r\nimport { CustomCheckbox } from '../../widgets/CustomCheckbox';\r\nimport { GPSCoordinatesAPI } from '../../widgets/GPSCoordinatesAPI';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport const DGOrganisationDetailsForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const [selectedValue, showField] = React.useState(null);\r\n const [postalCodeValue, setPostalCodeValue] = React.useState(null);\r\n const [physicalCodeValue, setPhysicalCodeValue] = React.useState(null);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n const handleUsePhysicalAddressForPostal = form => event => {\r\n\r\n\r\n if (event.target.checked === true) {\r\n form.values['PostalAddressLine1'] = form.values[\"PhysicalAddress1\"];\r\n form.values['PostalAddressLine2'] = form.values[\"PhysicalAddress2\"];\r\n form.values['PostalAddressLine3'] = form.values[\"PhysicalAddress3\"];\r\n form.values['PostalCode'] = form.values[\"PhysicalCode\"];\r\n setPostalCodeValue(form.values[\"PhysicalCode\"]);\r\n }\r\n form.updateValue('UsePhysicalAsPostal', event.target.checked);\r\n\r\n\r\n }\r\n const updateGPSAddress = (address, form) => {\r\n console.log(address);\r\n form.values[\"GPSCoordinates\"] = address.gpscoordinates.coordinate;\r\n form.values[\"PhysicalAddress1\"] = address.streetnumberpar + ' ' + address.routepar;\r\n form.values[\"PhysicalAddress2\"] = address.sublocalitylevel1par;\r\n form.values[\"PhysicalAddress3\"] = address.localitypar;\r\n form.values[\"PhysicalCode\"] = address.postalcodepar;\r\n setPhysicalCodeValue(form.values[\"PhysicalCode\"]);\r\n }\r\n function checkValue(value) {\r\n\r\n if (value !== undefined && value !== null) {\r\n if (value.Description === \"Other\") {\r\n return false\r\n }\r\n else {\r\n return true\r\n }\r\n } else {\r\n return true\r\n }\r\n }\r\n\r\n function ConfirmDetailsDisableCheck(value) {\r\n\r\n if (value !== undefined && value !== null) {\r\n if (value === true) {\r\n return true\r\n }\r\n else if (value !== true) {\r\n return false\r\n }\r\n }\r\n }\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport \"./DGOrganisation.css\";\r\nimport { DGOrganisationDetailsForm } from './DGOrganistaionDetailsForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\n\r\nconst utils = new ViewUtils();\r\nconst formRef = React.createRef();\r\n\r\nclass DGOrganisation extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n organisationDetails: {\r\n LegalName: \"\",\r\n },\r\n message: \"\",\r\n messageStyle: \"\",\r\n title: \"\",\r\n id: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) ? this.props.location.state.selection : null,\r\n };\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: \"CloseIcon\" },\r\n { id: 'save', label: 'SAVE', tooltip: 'Save', icon: 'SaveIcon', visible: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) ? this.props.menuPermissionItem.Edit : this.props.menuPermissionItem.Add }\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'contact', label: 'Contact', tooltip: '', disabled: utils.isNull(this.state.id), visible: this.props.onMenuSpecificPermissionItem('/dgorganisationcontacts').View },\r\n { id: 'stakeholder', label: 'Stakeholder', tooltip: '', disabled: utils.isNull(this.state.id), visible: this.props.onMenuSpecificPermissionItem('/dgorganisationstakeholder').View },\r\n { id: 'upload', label: 'Document Uploads', tooltip: '', disabled: utils.isNull(this.state.id), visible: this.props.onMenuSpecificPermissionItem('/dgdocumentuploads').View },\r\n { id: 'dgapplication', label: 'DG Application', tooltip: '', disabled: utils.isNull(this.state.id), visible: this.props.onMenuSpecificPermissionItem('/dgapplicationdashboard').View },\r\n { id: 'dgverification', label: 'DG Verification', tooltip: '', disabled: utils.isNull(this.state.id), visible: this.props.onMenuSpecificPermissionItem('/dgverificationsearch').View },\r\n { id: 'dgevaluation', label: 'DG Evaluation', tooltip: '', disabled: utils.isNull(this.state.id), visible: this.props.onMenuSpecificPermissionItem('/dgevaluationsearch').View },\r\n { id: 'dgapproval', label: 'DG Approval', tooltip: '', disabled: utils.isNull(this.state.id), visible: this.props.onMenuSpecificPermissionItem('/dgapprovalsearch').View },\r\n { id: 'dgcontracts', label: 'DG Contracts', tooltip: '', disabled: utils.isNull(this.state.id), visible: this.props.onMenuSpecificPermissionItem('/dgcontracts').View },\r\n { id: 'crm', label: 'CRM', tooltip: 'Client Relationship Management', disabled: utils.isNull(this.state.id), visible: this.props.onMenuSpecificPermissionItem('/dgorganisationcrm').View },\r\n ]\r\n }\r\n ]\r\n }\r\n }\r\n\r\n handleFormValueChange = (values) => {\r\n if (!utils.isNull(values)) {\r\n this.setState({\r\n organisationDetails: {\r\n LegalName: values.LegalName,\r\n SDLNumber: values.SDLNumber\r\n }\r\n });\r\n if (this.props.location.state.isDashboard) {\r\n this.props.history.push({\r\n pathname: '/DGOrganisationStakeholder',\r\n state: {\r\n organisationID: this.state.id,\r\n organisationName: this.state.organisationDetails.LegalName,\r\n selection: this.props.location.state.selection,\r\n sdlnumber: this.state.organisationDetails.SDLNumber\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"save\" === buttonId) {\r\n this.save();\r\n } else if (\"close\" === buttonId) {\r\n this.closeView();\r\n } else if (\"contact\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/DGOrganisationContacts',\r\n state: {\r\n organisationID: this.state.id,\r\n organisationName: this.state.organisationDetails.LegalName,\r\n selection: this.props.location.state.selection,\r\n sdlnumber: this.state.organisationDetails.SDLNumber\r\n }\r\n });\r\n }\r\n else if (\"stakeholder\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/DGOrganisationStakeholder',\r\n state: {\r\n organisationID: this.state.id,\r\n organisationName: this.state.organisationDetails.LegalName,\r\n selection: this.props.location.state.selection,\r\n sdlnumber: this.state.organisationDetails.SDLNumber\r\n }\r\n });\r\n }\r\n else if (\"upload\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/DGDocumentUploads',\r\n state: {\r\n organisationID: this.state.id,\r\n organisationName: this.state.organisationDetails.LegalName,\r\n selection: this.props.location.state.selection,\r\n sdlnumber: this.state.organisationDetails.SDLNumber\r\n }\r\n });\r\n } \r\n else if (\"dgapplication\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/DGApplicationDashboard',\r\n state: {\r\n organisationID: this.state.id,\r\n organisationName: this.state.organisationDetails.LegalName,\r\n sdlnumber: this.state.organisationDetails.SDLNumber\r\n }\r\n });\r\n } else if (\"dgevaluation\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/DGEvaluationSearch',\r\n state: {\r\n organisationID: this.state.id,\r\n organisationName: this.state.organisationDetails.LegalName,\r\n selection: this.props.location.state.selection,\r\n sdlnumber: this.state.organisationDetails.SDLNumber\r\n }\r\n });\r\n } else if (\"dgverification\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/DGVerificationSearch',\r\n state: {\r\n organisationID: this.state.id,\r\n organisationName: this.state.organisationDetails.LegalName,\r\n selection: this.props.location.state.selection,\r\n sdlnumber: this.state.organisationDetails.SDLNumber\r\n }\r\n });\r\n } else if (\"dgcontracts\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/DGContracts',\r\n state: {\r\n organisationID: this.state.id,\r\n organisationName: this.state.organisationDetails.LegalName,\r\n sdlnumber: this.state.organisationDetails.SDLNumber\r\n }\r\n });\r\n }\r\n else if (\"dgapproval\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/DGApprovalSearch',\r\n state: {\r\n organisationID: this.state.id,\r\n organisationName: this.state.organisationDetails.LegalName,\r\n sdlnumber: this.state.organisationDetails.SDLNumber\r\n }\r\n });\r\n } else if (\"crm\" === buttonId) {\r\n this.props.history.push({\r\n pathname: \"/DGOrganisationCRM\",\r\n state: {\r\n organisationID: this.state.id,\r\n organisationName: this.state.organisationDetails.LegalName,\r\n sdlnumber: this.state.organisationDetails.SDLNumber\r\n }\r\n })\r\n }\r\n }\r\n\r\n \r\n save() {\r\n let formValue = formRef.current.getValue();\r\n \r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n let isAdd = true;\r\n console.log(formValue);\r\n if (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) {\r\n formValue.id = this.props.location.state.selection;\r\n isAdd = false;\r\n }\r\n let data = JSON.stringify(formValue);\r\n const url = `api/sims/dgorganisationdetails/updatedgorganisation`;\r\n utils.updateForm(this, formRef, url, (response) => {\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n this.successCallback(response);\r\n }, this.error);\r\n }\r\n }\r\n\r\n successCallback(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n error(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n\r\n closeView() {\r\n this.props.history.push({\r\n pathname: '/DGOrganisationSearch',\r\n //state: { selection: this.props.location.state.organisationID }\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"DG Organisation \" + (this.state.organisationDetails.LegalName !== null ? \"> \" + this.state.organisationDetails.LegalName + (this.state.organisationDetails.SDLNumber !== null ? \" - \" + this.state.organisationDetails.SDLNumber : \"\") : \"> Add\")}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n enabled={true}\r\n config={this.toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} />\r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(DGOrganisation));\r\n","import React from 'react';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\n\r\n\r\nexport default function StakeholderSearchForm(props) {\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport StakeholderSearchForm from './StakeholderSearchForm';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\n\r\nconst utils = new ViewUtils();\r\nclass StakeholderSearch extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n model: {\r\n FirstName: \"\",\r\n Surname: \"\",\r\n IDNo: \"\",\r\n ProvinceID: \"0\",\r\n SDLNumber: \"\"\r\n },\r\n keyUpSwitch: false,\r\n selectedOrganisation: null,\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Add', icon: 'AddIcon', visible: this.props.menuPermissionItem.Add },\r\n { id: 'edit', label: '', tooltip: 'View / Edit', icon: 'EditIcon', disabled: true, visible: this.props.menuPermissionItem.View }\r\n ]\r\n }\r\n ]\r\n }\r\n\r\n this.searchParameters = this.searchParameters = this.props.isLinkSearch ?\r\n [\r\n { Name: \"FirstName\", Value: \"\" },\r\n { Name: \"Surname\", Value: \"\" },\r\n { Name: \"IDNo\", Value: \"\" },\r\n { Name: \"ProvinceID\", Value: \"0\" },\r\n { Name: \"SDLNumber\", Value: \"\" },\r\n ]\r\n :\r\n [\r\n { Name: \"FirstName\", Value: \"\" },\r\n { Name: \"Surname\", Value: \"\" },\r\n { Name: \"IDNo\", Value: \"\" },\r\n { Name: \"ProvinceID\", Value: \"0\" },\r\n { Name: \"SDLNumber\", Value: \"\" },\r\n\r\n ]\r\n\r\n this.headCells = this.props.isLinkSearch ?\r\n [\r\n { id: 'FirstName', numeric: false, disablePadding: true, label: 'First Name' },\r\n { id: 'Surname', numeric: false, disablePadding: true, label: 'Surname' },\r\n { id: 'IDNo', numeric: false, disablePadding: true, label: 'ID Number' }\r\n ]\r\n :\r\n [\r\n { id: 'FirstName', numeric: false, disablePadding: true, label: 'First Name' },\r\n { id: 'Surname', numeric: false, disablePadding: true, label: 'Surname' },\r\n { id: 'IDNo', numeric: false, disablePadding: true, label: 'ID Number' }\r\n\r\n ]\r\n }\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n handleSelection = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedOrganisation: selection })\r\n } else {\r\n this.setState({ selectedOrganisation: null })\r\n }\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (buttonId === \"add\") {\r\n this.setState({ selectedOrganisation: null })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n\r\n \r\n { this.handleSelection(selection) }}\r\n >\r\n { this.onkeyup(e) }}\r\n valueChangeHandler={(values) => {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(values)) {\r\n this.setState({ model: values });\r\n }\r\n }}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(StakeholderSearch));","import React, { useEffect } from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel from '../../widgets/TabPanel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport { GPSCoordinatesAPI } from '../../widgets/GPSCoordinatesAPI';\r\nimport './Stakeholder.css'\r\nimport { AddressCodeItem } from '../../widgets/AddressCodeItem';\r\nimport { CustomCheckbox } from '../../widgets/CustomCheckbox';\r\nimport DocumentUpload from '../../widgets/DocumentUpload';\r\n\r\nimport clsx from 'clsx';\r\nimport Radio from '@material-ui/core/Radio';\r\nimport RadioGroup from '@material-ui/core/RadioGroup';\r\nimport FormControl from '@material-ui/core/FormControl';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\nconst useStyles = makeStyles({\r\n root: {\r\n // width: '90%',\r\n margin: 0,\r\n '&:hover': {\r\n backgroundColor: 'transparent',\r\n },\r\n },\r\n bullet: {\r\n display: 'inline-block',\r\n margin: '0 2px',\r\n transform: 'scale(0.8)',\r\n },\r\n title: {\r\n fontSize: 14,\r\n },\r\n pos: {\r\n marginBottom: 12,\r\n },\r\n icon: {\r\n borderRadius: '50%',\r\n width: 16,\r\n height: 16,\r\n boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',\r\n backgroundColor: '#f5f8fa',\r\n\r\n 'input:hover ~ &': {\r\n backgroundColor: '#ebf1f5',\r\n },\r\n 'input:disabled ~ &': {\r\n boxShadow: 'none',\r\n background: 'rgba(206,217,224,.5)',\r\n },\r\n },\r\n checkedIcon: {\r\n backgroundColor: '#01579B',\r\n '&:before': {\r\n display: 'block',\r\n width: 16,\r\n height: 16,\r\n content: '\"\"',\r\n },\r\n 'input:hover ~ &': {\r\n backgroundColor: '#01579B',\r\n },\r\n },\r\n});\r\n\r\nexport const StakeholderForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const [scopeSelected, setScopeSelected] = React.useState(1)\r\n const [usePostalAddress, setUsePostalAddress] = React.useState(false)\r\n const [postalCodeValue, setPostalCodeValue] = React.useState(null);\r\n const [physicalCodeValue, setPhysicalCodeValue] = React.useState(null);\r\n const [form, setForm] = React.useState(null);\r\n const [file, setFile] = React.useState(null);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n const [filename, setFilename] = React.useState(\"\");\r\n const [size, setSize] = React.useState(null);\r\n const [base64, setBase64] = React.useState(null);\r\n const [type, setType] = React.useState(null);\r\n\r\n\r\n const fileUploadHandler = (data) => {\r\n setForm({});\r\n setFile(data);\r\n }\r\n\r\n const onUploadHandler = (data) => {\r\n if (data) {\r\n setFilename(data.name);\r\n setSize(data.size);\r\n setBase64(data.base64);\r\n setType(data.type);\r\n }\r\n }\r\n\r\n const processFileHandler = () => {\r\n //this.setState({ message: \"\", hasError: false });\r\n if (props.IsExternal) {\r\n utils.invokeUrlExternal('dms/ocr/id/card', (data) => {\r\n if (data) {\r\n setForm(data);\r\n //form.values['IDNo'] = data.IDNo;\r\n } else {\r\n //this.setState({ message: \"The file cannot be extracted\", hasError: true });\r\n }\r\n }, () => {\r\n //this.setState({ message: \"The file cannot be extracted\", hasError: true });\r\n }, {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n \"Authorization\": \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(file)\r\n });\r\n }\r\n else {\r\n utils.invokeUrl('dms/ocr/id/card', (data) => {\r\n if (data) {\r\n setForm(data);\r\n //form.values['IDNo'] = data.IDNo;\r\n } else {\r\n //this.setState({ message: \"The file cannot be extracted\", hasError: true });\r\n }\r\n }, () => {\r\n //this.setState({ message: \"The file cannot be extracted\", hasError: true });\r\n }, {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n \"Authorization\": \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(file)\r\n });\r\n }\r\n }\r\n\r\n const handleFormValueChange = (values) => {\r\n\r\n if (JSON.stringify(form) !== JSON.stringify(values)) {\r\n if (!utils.isNull(values)) {\r\n let idnumberDetails = { ...values };\r\n if (!utils.isNull(values.IDNo) && values.IDNo.length == 13) {\r\n if (utils.isNull(values.CitizenResidentialStatusID) && utils.isNull(values.DateofBirth) && utils.isNull(values.GenderID) && utils.isNull(values.NationalityID)) {\r\n try {\r\n const residentailStatus = idnumberDetails.IDNo.charAt(10);\r\n if (residentailStatus == \"0\") {\r\n idnumberDetails.CitizenResidentialStatusID = { Id: \"1\", Description: \"South Africa\" };\r\n idnumberDetails.NationalityID = { Id: \"1\", Description: \"South Africa\" };\r\n }\r\n else if (residentailStatus == \"1\") {\r\n idnumberDetails.CitizenResidentialStatusID = { Id: \"4\", Description: \"Permanent Resident\" }\r\n }\r\n var date = new Date('19' + idnumberDetails.IDNo.slice(0, 2), idnumberDetails.IDNo.slice(2, 4) - 1, idnumberDetails.IDNo.slice(4, 6));\r\n idnumberDetails.DateofBirth = date;\r\n const gender = parseInt(idnumberDetails.IDNo.slice(6, 10));\r\n if (gender >= 0 && gender <= 4999) {\r\n idnumberDetails.GenderID = { Id: \"2\", Description: \"Female\" }\r\n } else if (gender >= 5000 && gender <= 9999) {\r\n idnumberDetails.GenderID = { Id: \"1\", Description: \"Male\" }\r\n }\r\n } catch (err) {\r\n\r\n }\r\n }\r\n }\r\n if (!utils.isNull(values.FirstName)) {\r\n idnumberDetails.Initials = values.FirstName.charAt(0).toUpperCase();\r\n }\r\n setForm({ ...form, ...idnumberDetails });\r\n }\r\n props.valueChangeHandler(values);\r\n }\r\n }\r\n\r\n const handleUsePhysicalAddressForPostal = form => event => {\r\n\r\n\r\n if (event.target.checked === true) {\r\n form.values['PostalAddressLine1'] = form.values[\"PhysicalAddress1\"];\r\n form.values['PostalAddressLine2'] = form.values[\"PhysicalAddress2\"];\r\n form.values['PostalAddressLine3'] = form.values[\"PhysicalAddress3\"];\r\n form.values['PostalCode'] = form.values[\"PhysicalCode\"];\r\n setPostalCodeValue(form.values[\"PhysicalCode\"]);\r\n }\r\n form.updateValue('UsePhysicalAsPostal', event.target.checked);\r\n\r\n\r\n }\r\n const updateGPSAddress = (address, form) => {\r\n form.values[\"GPSCoordinates\"] = address.gpscoordinates.coordinate;\r\n form.values[\"PhysicalAddress1\"] = address.streetnumberpar + ' ' + address.routepar;\r\n form.values[\"PhysicalAddress2\"] = address.sublocalitylevel1par;\r\n form.values[\"PhysicalAddress3\"] = address.localitypar;\r\n form.values[\"PhysicalCode\"] = address.postalcodepar;\r\n setPhysicalCodeValue(form.values[\"PhysicalCode\"]);\r\n }\r\n const classes = useStyles();\r\n const handleCheckboxChange = (e) => {\r\n\r\n if (e !== true) {\r\n setUsePostalAddress(true)\r\n } else {\r\n setUsePostalAddress(false)\r\n }\r\n }\r\n\r\n const dataArrivedHandler = (values) => {\r\n\r\n if (!utils.isNull(props.dataArrivedHandler)) {\r\n props.dataArrivedHandler(values);\r\n }\r\n }\r\n return (\r\n\r\n \r\n\r\n \r\n \r\n {form =>\r\n \r\n }\r\n \r\n \r\n \r\n\r\n );\r\n})","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Stakeholder.css\";\r\nimport \"./Stakeholder.css\";\r\nimport { StakeholderForm } from './StakeholderForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nimport LoadingIndicator from '../../../components/LoadingIndicator';\r\n\r\nconst formRef = React.createRef();\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\n\r\n\r\nclass Stakeholder extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n stakeholderDetails: {\r\n FirstName: \"\",\r\n Surname: \"\",\r\n IDNo: \"\",\r\n },\r\n message: \"\",\r\n messageStyle: \"\",\r\n title: \"\",\r\n id: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) ? this.props.location.state.selection : null,\r\n IsExternal: utils.isNull(this.props.IsExternal) ? false : this.props.IsExternal,\r\n IsDashboard: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.IsDashboard)) ? this.props.location.state.IsDashboard : null,\r\n counter: 0\r\n };\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'save', label: 'SAVE', tooltip: 'Save', icon: 'SaveIcon', visible: this.props.IsExternal ? true : utils.isNull(this.props.location.state.selection) ? this.props.menuPermissionItem.Edit : this.props.menuPermissionItem.Add },\r\n { id: 'organisationDetails', label: 'Organisation Details', tooltip: 'Organisation Details', disabled: utils.isNull(this.state.id) }\r\n\r\n ]\r\n }\r\n ]\r\n }\r\n\r\n }\r\n\r\n //componentDidMount() {\r\n // let LookupUrl = `api/sims/DGStakeholderOrganisation/`;\r\n // let path = '/StakeholderOrganisationDetails';\r\n // if (this.props.IsExternal) { LookupUrl = `api/sims/DGStakeholderRegistration/`; path = '/stakeholderRegistrationOrgDetails'; }\r\n // this.props.history.push({\r\n // pathname: path,\r\n // state: {\r\n // StakeholderID: 4,\r\n // stakeholderName: 'Test' + \" \" + 'Test',\r\n // IDNo: '34343434',\r\n // IsExternal: this.state.IsExternal,\r\n // LookupUrl: LookupUrl\r\n // }\r\n // })\r\n //}\r\n\r\n handleFormValueChange(values) {\r\n if (!utils.isNull(values)) {\r\n this.setState({\r\n stakeholderDetails: {\r\n FirstName: values.FirstName,\r\n Surname: values.Surname,\r\n IDNo: values.IDNo\r\n }\r\n });\r\n }\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"save\" === buttonId) {\r\n this.save();\r\n } else if (\"close\" === buttonId) {\r\n this.closeView();\r\n } else if (\"organisationDetails\" === buttonId) {\r\n let LookupUrl = `api/sims/DGStakeholderOrganisation/`;\r\n let path = '/StakeholderOrganisationDetails';\r\n if (this.props.IsExternal) { LookupUrl = `api/sims/DGStakeholderRegistration/`; path = '/stakeholderRegistrationOrgDetails';}\r\n this.props.history.push({\r\n pathname: path,\r\n state: {\r\n StakeholderID: this.state.id,\r\n stakeholderName: this.state.stakeholderDetails.FirstName + \" \" + this.state.stakeholderDetails.Surname,\r\n IDNo: this.state.stakeholderDetails.IDNo,\r\n IsDashboard: this.state.IsDashboard,\r\n IsExternal: this.state.IsExternal,\r\n LookupUrl: LookupUrl\r\n }\r\n });\r\n }\r\n }\r\n\r\n save() {\r\n let formValue = formRef.current.getValue();\r\n\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n let isAdd = true;\r\n\r\n if (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) {\r\n formValue.id = this.props.location.state.selection;\r\n isAdd = false;\r\n }\r\n let data = JSON.stringify(formValue);\r\n\r\n if (isAdd) {\r\n this.checkIDNumber(formValue);\r\n\r\n if (this.state.message === \"\") {\r\n let url = `api/sims/DGStakeholderPerson/AddStakeholder`;\r\n if (this.props.IsExternal) {\r\n url = `api/sims/DGStakeholderRegistration/AddStakeholder`;\r\n utils.saveFormExternal(this, formRef, url, (response) => {\r\n this.setState({ id: response.EntityId }, () => { toolbarRef.current.setButtonDisabled(\"organisationDetails\", false); });\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n response.MessageType === \"ERROR\" ? this.errorCallback(response) : this.successCallback(response);\r\n }, this.error);\r\n } else {\r\n utils.saveForm(this, formRef, url, (response) => {\r\n this.setState({ id: response.EntityId }, () => { toolbarRef.current.setButtonDisabled(\"organisationDetails\", false); });\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n response.MessageType === \"ERROR\" ? this.errorCallback(response) : this.successCallback(response);\r\n }, this.error);\r\n }\r\n }\r\n } else {\r\n const url = `api/sims/DGStakeholderPerson/UpdateStakeholder`;\r\n utils.updateForm(this, formRef, url, (response) => {\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n response.MessageType === \"ERROR\" ? this.errorCallback(response) : this.successCallback(response);\r\n }, this.error);\r\n }\r\n }\r\n }\r\n\r\n checkIDNumber(formValues) {\r\n this.setState({ message: \"\", messageStyle: \"\" });\r\n //console.log(formValues);\r\n if (formValues.IDNo.length !== 13) {\r\n if (formValues.AlternateIDTypeID.Description === \"None\") {\r\n this.setState({ message: \"Invalid ID Number / Alternate ID Type combination.\", messageStyle: \"ERROR\" });\r\n }\r\n }\r\n if (formValues.IDNo.length === 13 && isNaN(formValues.IDNo) && formValues.AlternateIDTypeID.Description !== \"None\") {\r\n this.setState({ message: \"Invalid ID Number / Alternate ID Type combination.\", messageStyle: \"ERROR\" });\r\n }\r\n }\r\n\r\n successCallback(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType, counter: this.state.counter + 1 });\r\n }\r\n error(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n\r\n closeView() {\r\n let url = `/stakeholdersearch`;\r\n if (this.state.IsDashboard) { url = `/stakeholderdashboard`; }\r\n this.props.history.push({\r\n pathname: url,\r\n state: { selection: null }\r\n });\r\n }\r\n\r\n dataArrivedHandler = (values) => {\r\n if (!utils.isNull(values[\"ID\"]) && values[\"ID\"] !== 0) {\r\n this.setState({ id: values[\"ID\"] });\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {this.state.IsExternal ? : null}\r\n \r\n
\r\n Stakeholder Details\r\n
\r\n
\r\n
\r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef} enabled={true} config={this.toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)}\r\n entityLookupController={\"GetFind\"} IsExternal={this.props.IsExternal} LookupUrl={\"api/sims/DGStakeholderRegistration/GetLookupList?listId=\"}\r\n dataArrivedHandler={(values) => this.dataArrivedHandler(values)} dataUrl={typeof this.props.IsExternal != 'undefined' ? \"api/sims/DGStakeholderRegistration/getfind\" : \"api/sims/DGStakeholderPerson/getfind\"} />\r\n | \r\n
\r\n \r\n
\r\n
\r\n {\"Stakeholder Details > Organisations Details > \" + (this.props.location.state.stakeholderName !== null ? this.props.location.state.stakeholderName + \" - \" + this.props.location.state.IDNo : \"\")}\r\n
\r\n\r\n \r\n\r\n \r\n\r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig}\r\n />\r\n {this.state.showTable === true && (\r\n { this.handleSelectionChange(selection) }}\r\n dataUrl={this.props.location.state.LookupUrl + \"GetStakeholderOrganisation\"}\r\n searchParameters={this.state.searchParameters}\r\n onCellSelectionChange={(rowid, headCell) => { this.FileDownload(rowid, headCell) }}\r\n clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow}\r\n paged={true}\r\n checkRefreshToken={!this.state.IsExternal}\r\n />\r\n )}\r\n
\r\n\r\n this.postAddHandler(cancel, save)}\r\n IsExternal={this.state.IsExternal}\r\n >\r\n this.handleFormValueChange(values)} open={this.state.addDialogOpen} StakeholderID={this.props.location.state.StakeholderID}\r\n LookupUrl={this.props.location.state.LookupUrl}\r\n IsExternal={this.state.IsExternal}\r\n />\r\n \r\n\r\n { this.remove(this.props.location.state.LookupUrl + \"RemoveStakeholderOrganisation\") }}\r\n closePrompt={this.closePrompt}\r\n />\r\n\r\n { this.Finalize() }}\r\n okPrompt={true}\r\n />\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(StakeholderOrganisations));","import React from 'react';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nexport const OrganisationContactForm = React.forwardRef((props, ref) => {\r\n\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const utils = new ViewUtils();\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport Prompt from '../../widgets/Prompt';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport FormDialog from \"../../etqa/FormDialog\";\r\nimport { OrganisationContactForm } from \"./OrganisationContactForm\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\nconst headCells = [\r\n { id: 'Title', numeric: false, disablePadding: true, label: 'Title' },\r\n { id: 'FirstName', numeric: false, disablePadding: true, label: 'First Name' },\r\n { id: 'Surname', numeric: false, disablePadding: true, label: 'Surname' },\r\n { id: 'Designation', numeric: false, disablePadding: true, label: 'Designation' },\r\n { id: 'TelephoneNumber', numeric: false, disablePadding: true, label: 'Telephone Number' },\r\n { id: 'CellPhoneNumber', numeric: false, disablePadding: true, label: 'CellPhone Number' },\r\n { id: 'FaxNumber', numeric: false, disablePadding: true, label: 'Fax Number' },\r\n { id: 'EMail', numeric: false, disablePadding: true, label: 'EMail' }\r\n\r\n];\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nconst addFormRef = React.createRef();\r\n\r\nclass DGOrganisationContact extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n selectedContact: null,\r\n promptOpen: false,\r\n promptTitle: \"Remove contact from Organisation\",\r\n promptContent: \"Are you sure you want to remove this contact from the Organisation?\",\r\n Message: \"\",\r\n MessageStyle: \"\",\r\n searchParameters: [{ Name: \"OrganisationID\", Value: this.props.location.state.organisationID }]\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: \"CloseIcon\" }\r\n ]\r\n }\r\n ,\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: 'Add Contact', tooltip: 'Add contact to Organisation', icon: 'AddIcon', visible: this.props.menuPermissionItem.Add },\r\n { id: 'edit', label: 'Edit Contact', tooltip: 'Edit contact on Organisation', icon: 'EditIcon', disabled: utils.isNull(this.state.selectedContact), visible: this.props.menuPermissionItem.Edit },\r\n { id: 'remove', label: 'Remove Contact', tooltip: 'Remove contact from Organisation', disabled: utils.isNull(this.state.selectedContact), icon: \"Delete\", visible: this.props.menuPermissionItem.Delete}\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/DGOrganisation',\r\n state: { selection: this.props.location.state.organisationID }\r\n });\r\n }\r\n else if (\"add\" === buttonId) {\r\n this.setState({ addDialogOpen: true, Message: \"\" })\r\n }\r\n else if (\"edit\" === buttonId) {\r\n this.setState({ editDialogOpen: true, Message: \"\" })\r\n }\r\n else if (\"remove\" === buttonId) {\r\n this.setState({ promptOpen: true })\r\n }\r\n }\r\n\r\n postAddHandler(cancel, save) {\r\n if (save === true) {\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)),\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n selectedContact: null,\r\n Message: \"Organisation Contact successfully saved\",\r\n MessageStyle: \"success\"\r\n });\r\n\r\n toolbarRef.current.setButtonDisabled(\"edit\", true);\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n }\r\n else if (cancel === true) {\r\n this.setState({\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n selectedContact: null,\r\n Message: \"\"\r\n })\r\n toolbarRef.current.setButtonDisabled(\"edit\", true);\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n }\r\n else {\r\n this.setState({\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n selectedContact: null,\r\n Message: \"A system error has occured, please try again later or contact your administrator\",\r\n MessageStyle: \"warning\"\r\n })\r\n toolbarRef.current.setButtonDisabled(\"edit\", true);\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedContact: selection[0].Id, Message: \"\" });\r\n } else {\r\n this.setState({ selectedContact: null, Message: \"\" });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"edit\", selection === null || selection.length === 0);\r\n toolbarRef.current.setButtonDisabled(\"remove\", selection === null || selection.length === 0);\r\n }\r\n\r\n successfulContactRemoveCallback = (response) => {\r\n\r\n if (!utils.isNull(response.EntityId) && response.EntityId === 0) {\r\n this.setState({ selectedContact: null, Message: response.Message, MessageStyle: response.MessageType.toLowerCase() });\r\n //Force a refresh\r\n this.setState({ searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)) })\r\n }\r\n }\r\n\r\n unsuccessfulContactRemoveCallback = (response) => {\r\n if (!utils.isNull(response.Message) && response.Message !== \"\") {\r\n this.setState({ Message: response.Message, MessageStyle: response.MessageType.toLowerCase() })\r\n }\r\n }\r\n\r\n removeContact(url) {\r\n this.setState({ promptOpen: false }, () => {\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n toolbarRef.current.setButtonDisabled(\"edit\", true);\r\n })\r\n\r\n let fullUrl = `${url}?id=${this.state.selectedContact}&OrganisationID=${this.props.location.state.selection}`;\r\n utils.invokeUrlDelete(fullUrl, this.successfulContactRemoveCallback, this.unsuccessfulContactRemoveCallback);\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ promptOpen: false })\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"DG Organisation > Contacts \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n \r\n\r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig} />\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={true} />\r\n
\r\n\r\n this.postAddHandler(cancel, save)}\r\n >\r\n \r\n \r\n\r\n\r\n this.postAddHandler(cancel, save)}\r\n >\r\n \r\n \r\n\r\n { this.removeContact(\"api/sims/dgorganisationcontact/RemoveOrganisationContact\") }}\r\n closePrompt={this.closePrompt}\r\n />\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(DGOrganisationContact));\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nexport default function DGDocumentsUploadSearchForm(props) {\r\n const [labelWidth, setLabelWidth, tabValue] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n","import React from 'react';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport TabPanel from '../../widgets/TabPanel';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport const DGDocumentUploadsForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const [docName, setDocName] = React.useState('');\r\n\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n const styles = makeStyles({\r\n TextArea: {\r\n '& .MuiOutlinedInput-inputMultiline': {\r\n height: \"200px !important\",\r\n width: \"600px !important\"\r\n }\r\n }\r\n })\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})","import React from 'react';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport Button from '@material-ui/core/Button';\r\nimport { DGDocumentUploadsForm } from './DGDocumentUploadsForm';\r\nimport DocumentUpload from '../../widgets/DocumentUpload';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport default function DGDocumentUploadsDialog(props) {\r\n\r\n const [open, setOpen] = React.useState(props.open);\r\n const [AddDiasbaled, setAddDiasbaled] = React.useState(true);\r\n const [Message, setMessage] = React.useState(\"\");\r\n const [MessageStyle, setMessageStyle] = React.useState(\"\");\r\n const formRef = React.createRef();\r\n const [filename, setFilename] = React.useState(\"\");\r\n const [size, setSize] = React.useState(null);\r\n const [base64, setBase64] = React.useState(null);\r\n const [type, setType] = React.useState(null);\r\n\r\n const handleClose = (cancel, save,response) => {\r\n setFilename(\"\");\r\n setOpen(false);\r\n props.closeHandler(cancel, save, response);\r\n };\r\n\r\n const cancel = () => {\r\n handleClose(true, false);\r\n };\r\n\r\n const add = () => {\r\n let formValue = formRef.current.getValue();\r\n formValue.Document = {};\r\n formValue.Document.Name = filename;\r\n formValue.Document.size = size;\r\n formValue.Document.type = type;\r\n formValue.Document.base64 = base64;\r\n formValue.OrganisationID = props.OrganisationID;\r\n formValue.DGDocumentTypeID = props.docID;\r\n\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n\r\n const url = `api/sims/dgdocumentupload/adddgdocument`;\r\n\r\n utils.invokeUrl(url, (response) => {\r\n handleClose(false, true, response);\r\n }, () => { handleClose(false, false); },\r\n {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(formValue)\r\n }\r\n );\r\n }\r\n }\r\n\r\n const onUploadHandler = (data) => {\r\n if (data) {\r\n setFilename(data.name);\r\n setSize(data.size);\r\n setBase64(data.base64);\r\n setType(data.type);\r\n setAddDiasbaled(false);\r\n }\r\n }\r\n\r\n React.useEffect(() => {\r\n setOpen(props.open);\r\n }, [props.open]);\r\n\r\n return (\r\n \r\n
\r\n
\r\n {\"DG Organisation > Document Uploads \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n\r\n \r\n\r\n \r\n < DGDocumentsUploadSearchForm\r\n // data={this.state.model}\r\n valueChangeHandler={(values) => this.handleFormValueChange(values)}\r\n />\r\n\r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig}\r\n />\r\n\r\n { this.handleSelectionChange(selection) }}\r\n dataUrl=\"api/sims/DGDocumentUpload/GetSearch\"\r\n searchParameters={this.state.searchParameters}\r\n onCellSelectionChange={(rowid, headCell) => { this.FileDownload(rowid, headCell) }}\r\n paged={true} />\r\n
\r\n\r\n this.postAddHandler(cancel, save, response)}\r\n viewRef={this}\r\n OrganisationID={this.props.location.state.organisationID}\r\n />\r\n\r\n { this.remove(\"api/sims/DGDocumentUpload/RemoveDGDocument\") }}\r\n closePrompt={this.closePrompt}\r\n />\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(DGDocumentsUpload));\r\n","\r\nimport React from 'react';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\nconst OrganisationStakeholderEditForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n\r\n const styles = makeStyles({\r\n TextArea: {\r\n '& .MuiOutlinedInput-inputMultiline': {\r\n height: \"200px !important\",\r\n width: \"600px !important\"\r\n }\r\n }\r\n })\r\n\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\nexport default OrganisationStakeholderEditForm;","import React from 'react';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport Button from '@material-ui/core/Button';\r\nimport EditForm from './OrganisationStakeholderEditForm';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport default function OrganisationStakeholderEditDialog(props) {\r\n\r\n const [open, setOpen] = React.useState(props.open);\r\n const [Message, setMessage] = React.useState(\"\");\r\n const [MessageStyle, setMessageStyle] = React.useState(\"\");\r\n const formRef = React.createRef();\r\n\r\n const handleClose = (cancel, save, response) => {\r\n setOpen(false);\r\n props.closeHandler(cancel, save, response);\r\n };\r\n\r\n const cancel = () => {\r\n handleClose(true, false);\r\n };\r\n\r\n const update = () => {\r\n let formValue = formRef.current.getValue();\r\n //formValue.Id = props.Id;\r\n\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n\r\n const url = `api/sims/organisationStakeholder/updateorganisationStakeholder`;\r\n\r\n utils.invokeUrl(url, (response) => {\r\n handleClose(false, true, response);\r\n }, () => { handleClose(false, false); },\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(formValue)\r\n }\r\n );\r\n }\r\n }\r\n\r\n React.useEffect(() => {\r\n setOpen(props.open);\r\n }, [props.open]);\r\n\r\n return (\r\n \r\n
\r\n
\r\n {\"Organisation > Stakeholder \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n\r\n \r\n\r\n \r\n\r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig}\r\n />\r\n\r\n { this.handleSelectionChange(selection) }}\r\n dataUrl=\"api/sims/OrganisationStakeholder/GetSearch\"\r\n searchParameters={this.state.searchParameters}\r\n clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow}\r\n onCellSelectionChange={(rowid, headCell) => { this.FileDownload(rowid, headCell) }}\r\n paged={true} />\r\n
\r\n\r\n this.postAddHandler(cancel, save, response)}\r\n viewRef={this}\r\n />\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(OrganisationStakeholder));","import React from 'react';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport Button from '@material-ui/core/Button';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport DocumentUpload from '../../widgets/DocumentUpload';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\n\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport default function DocumentDialog(props) {\r\n\r\n const [open, setOpen] = React.useState(props.open);\r\n const [documentRelates, setdocumentRelates] = React.useState(\"\");\r\n const [comment, setComment] = React.useState(\"\");\r\n const [selection, setSelection] = React.useState(null);\r\n const [filename, setFilename] = React.useState(\"\");\r\n const [size, setSize] = React.useState(null);\r\n const [base64, setBase64] = React.useState(null);\r\n const [type, setType] = React.useState(null);\r\n\r\n const styles = makeStyles({\r\n TextArea: {\r\n '& .MuiOutlinedInput-inputMultiline': {\r\n height: \"200px !important\",\r\n width: \"600px !important\"\r\n }\r\n }\r\n })\r\n\r\n\r\n const handleClose = (isCancel) => {\r\n setOpen(true);\r\n setFilename(\"\");\r\n props.closeHandler(!isCancel)\r\n };\r\n\r\n\r\n const cancel = () => {\r\n handleClose(true);\r\n };\r\n\r\n const add = () => {\r\n let data = {};\r\n\r\n data.DocumentRelatesID = documentRelates;\r\n data.Comment = comment;\r\n data.EntityID = props.EntityID\r\n data.OriginalFileName = filename;\r\n data.Document = {};\r\n data.Document.name = filename;\r\n data.Document.size = size;\r\n data.Document.type = type;\r\n data.Document.base64 = base64;\r\n\r\n utils.invokeUrl(props.postUrl, (response) => {\r\n handleClose(true, false);\r\n }, () => { handleClose(false, false); },\r\n {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(data)\r\n }\r\n );\r\n }\r\n\r\n\r\n\r\n\r\n\r\n const handleFormValueChange = (values) => {\r\n setdocumentRelates(values.DocumentRelatesID);\r\n setComment(values.Comment)\r\n }\r\n\r\n const onUploadHandler = (data) => {\r\n if (data) {\r\n setFilename(data.name)\r\n setSize(data.size);\r\n setBase64(data.base64);\r\n setType(data.type);\r\n }\r\n }\r\n\r\n React.useEffect(() => {\r\n setOpen(props.open);\r\n }, [props.open]);\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n {\"DG Organisation > CRM \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n\r\n {\r\n !utils.isStringEmpty(this.props.saveMessage) ?\r\n
\r\n {this.props.saveMessage}\r\n
\r\n :\r\n \"\"\r\n }\r\n\r\n
{ this.SetCommunicationType(values) }}>\r\n {form =>\r\n\r\n\r\n \r\n }\r\n \r\n\r\n {\r\n this.state.CommunicationType === \"1\" ?\r\n
\r\n
\r\n Comments\r\n
\r\n
this.handleToolbarButtonClick(buttonId)}\r\n config={{\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: '', tooltip: 'Back to Organisation Details', icon: 'CloseIcon' },\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Add a comment', icon: 'AddCommentIcon', visible: this.props.menuPermissionItem.Add }\r\n ]\r\n }\r\n ]\r\n }} />\r\n \r\n \r\n :\r\n \"\"\r\n }\r\n\r\n
\r\n {\r\n this.state.CommunicationType === \"2\" ?\r\n
\r\n
\r\n Documents\r\n
\r\n
this.handleToolbarButtonClick(buttonId)}\r\n config={{\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: '', tooltip: 'Back to Organisation Details', icon: 'CloseIcon' },\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Upload Document', icon: 'UploadIcon', visible: this.props.menuPermissionItem.Add }\r\n ]\r\n }\r\n ]\r\n }} />\r\n this.FileDownload(rowid, headCell, \"Document\")} documentsDataUrl={config.dataUrls.documents} moduleName={config.moduleName} selection={this.props.location.state.organisationID} IsSkills={ true } />\r\n \r\n :\r\n \"\"\r\n }\r\n\r\n {\r\n this.state.CommunicationType === \"3\" ?\r\n
\r\n
\r\n Emails\r\n
\r\n
this.handleToolbarButtonClick(buttonId)}\r\n config={{\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: '', tooltip: 'Back to Organisation Details', icon: 'CloseIcon' },\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Send Email', icon: 'EmailIcon', visible: this.props.menuPermissionItem.Add }\r\n ]\r\n }\r\n ]\r\n }} />\r\n this.FileDownload(rowid, headCell, \"EmailDocument\")}\r\n emailsDataUrl={config.dataUrls.emails}\r\n moduleName={config.moduleName}\r\n selection={this.props.location.state.organisationID}\r\n Email={this.state.emailAddress}\r\n Subject={this.state.emailSubject}\r\n />\r\n \r\n :\r\n \"\"\r\n }\r\n\r\n {\r\n this.state.CommunicationType === \"5\" ?\r\n
\r\n
\r\n Monitoring and Evaluation\r\n
\r\n
this.handleToolbarButtonClick(buttonId)}\r\n config={{\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: '', tooltip: 'Back to Organisation Details', icon: 'CloseIcon' },\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Add Monitoring and Evaluation comment', icon: 'AddCommentIcon', visible: this.props.menuPermissionItem.Add }\r\n ]\r\n }\r\n ]\r\n }} />\r\n \r\n \r\n :\r\n \"\"\r\n }\r\n\r\n {\r\n
\r\n this.postAddHandler(added)}\r\n postUrl={config.postUrls.comments}\r\n EntityID={this.props.location.state.organisationID} />\r\n this.postUploadHandler(save, cancel)}\r\n postUrl={config.postUrls.documents}\r\n EntityID={this.props.location.state.organisationID}\r\n />\r\n this.postAddHandler(added)}\r\n postUrl={config.postUrls.emails}\r\n EntityID={this.props.location.state.organisationID}\r\n />\r\n this.postAddHandler(added)}\r\n postUrl={config.postUrls.mne}\r\n EntityID={this.props.location.state.organisationID}\r\n />\r\n
\r\n }\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n {\"Organisation \" + (this.state.organisationDetails.LegalName !== null ? \"> \" + this.state.organisationDetails.LegalName + (this.state.organisationDetails.SDLNumber !== null ? \" - \" + this.state.organisationDetails.SDLNumber : \"\") : \"> Add\")}\r\n
\r\n \r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n buttonMenuClickHandler={(menu) => this.handleToolbarButtonMenuClick(menu)}\r\n enabled={true}\r\n config={this.toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} />\r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(Organisation));\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport OrganisationSearchForm from './OrganisationSearchForm';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\n\r\nconst utils = new ViewUtils();\r\nclass OrganisationSearch extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n \r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Add', icon: 'AddIcon', visible: this.props.menuPermissionItem.Add },\r\n { id: 'edit', label: '', tooltip: 'Edit', icon: 'EditIcon', disabled: true, visible: this.props.menuPermissionItem.Edit },\r\n { id: \"delete\", label: \"\", tooltip: \"Delete\", icon: \"Delete\", disabled: true, visible: this.props.menuPermissionItem.Delete }\r\n ]\r\n }\r\n ]\r\n }\r\n\r\n this.searchParameters = !utils.isNull(this.props.OrganisationID) ?\r\n [\r\n { Name: \"LegalName\", Value: \"\" },\r\n { Name: \"SDLNumber\", Value: \"\" },\r\n { Name: \"TradeName\", Value: \"\" },\r\n { Name: \"OrganisationID\", Value: this.props.OrganisationID },\r\n ]\r\n :\r\n [\r\n { Name: \"LegalName\", Value: \"\" },\r\n { Name: \"SDLNumber\", Value: \"\" },\r\n { Name: \"TradeName\", Value: \"\" },\r\n \r\n ]\r\n\r\n this.headCells = this.props.isLinkSearch ? \r\n [\r\n { id: 'LegalName', numeric: false, disablePadding: true, label: 'Legal Name' },\r\n { id: 'TradeName', numeric: false, disablePadding: true, label: 'Trade Name' },\r\n { id: 'SDLNumber', numeric: false, disablePadding: true, label: 'SDL Number' },\r\n ]\r\n :\r\n [\r\n { id: 'LegalName', numeric: false, disablePadding: true, label: 'Legal Name' },\r\n { id: 'TradeName', numeric: false, disablePadding: true, label: 'Trade Name' },\r\n { id: 'SDLNumber', numeric: false, disablePadding: true, label: 'SDL Number' },\r\n \r\n ]\r\n\r\n let model = !utils.isNull(this.props.OrganisationID) ?\r\n {\r\n LegalName: \"\",\r\n SDLNumber: \"\",\r\n TradeName: \"\",\r\n OrganisationID: this.props.OrganisationID\r\n }\r\n :\r\n {\r\n LegalName: \"\",\r\n SDLNumber: \"\",\r\n TradeName: \"\",\r\n }\r\n\r\n this.state = {\r\n model: model,\r\n keyUpSwitch: false,\r\n selectedOrganisation: null,\r\n }\r\n }\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n handleSelection = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedOrganisation: selection })\r\n } else {\r\n this.setState({ selectedOrganisation: null })\r\n }\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (buttonId === \"add\") {\r\n this.setState({ selectedOrganisation: null })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n { this.handleSelection(selection) }}\r\n promptTitle={\"Remove Organisation\"}\r\n promptContent={\"Are you sure you want to remove this organisation?\"}\r\n >\r\n { this.onkeyup(e) }}\r\n valueChangeHandler={(values) => {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(values)) {\r\n this.setState({ model: values });\r\n }\r\n }}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(OrganisationSearch));","import React from 'react';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nexport const OrganisationContactForm = React.forwardRef((props, ref) => {\r\n\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const utils = new ViewUtils();\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport Prompt from '../../widgets/Prompt';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport FormDialog from \"../../etqa/FormDialog\";\r\nimport { OrganisationContactForm } from \"./OrganisationContactForm\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\nconst headCells = [\r\n { id: 'Title', numeric: false, disablePadding: true, label: 'Title' },\r\n { id: 'FirstName', numeric: false, disablePadding: true, label: 'First Name' },\r\n { id: 'Surname', numeric: false, disablePadding: true, label: 'Surname' },\r\n { id: 'Designation', numeric: false, disablePadding: true, label: 'Designation' },\r\n { id: 'TelephoneNumber', numeric: false, disablePadding: true, label: 'Telephone Number' },\r\n { id: 'CellPhoneNumber', numeric: false, disablePadding: true, label: 'CellPhone Number' },\r\n { id: 'FaxNumber', numeric: false, disablePadding: true, label: 'Fax Number' },\r\n { id: 'EMail', numeric: false, disablePadding: true, label: 'EMail' }\r\n\r\n];\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nconst addFormRef = React.createRef();\r\n\r\nclass OrganisationContact extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n selectedContact: null,\r\n promptOpen: false,\r\n promptTitle: \"Remove contact from Organisation\",\r\n promptContent: \"Are you sure you want to remove this contact from the Organisation?\",\r\n Message: \"\",\r\n MessageStyle: \"\",\r\n searchParameters: [{ Name: \"OrganisationID\", Value: this.props.location.state.organisationID }]\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n }\r\n ,\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: 'Add Contact', tooltip: 'Add contact to Organisation', icon: 'AddIcon', visible: this.props.menuPermissionItem.Add },\r\n { id: 'edit', label: 'Edit Contact', tooltip: 'Edit contact on Organisation', icon: 'EditIcon', disabled: utils.isNull(this.state.selectedContact), visible: this.props.menuPermissionItem.Edit },\r\n { id: 'remove', label: 'Remove Contact', tooltip: 'Remove contact from Organisation', disabled: utils.isNull(this.state.selectedContact), icon: \"Delete\", visible: this.props.menuPermissionItem.Delete }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/skillsOrganisation',\r\n state: { selection: this.props.location.state.organisationID }\r\n });\r\n }\r\n else if (\"add\" === buttonId) {\r\n this.setState({ addDialogOpen: true, Message: \"\" })\r\n }\r\n else if (\"edit\" === buttonId) {\r\n this.setState({ editDialogOpen: true, Message: \"\" })\r\n }\r\n else if (\"remove\" === buttonId) {\r\n this.setState({ promptOpen: true })\r\n }\r\n }\r\n\r\n postAddHandler(cancel, save) {\r\n if (save === true) {\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)),\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n selectedContact: null,\r\n Message: \"Organisation Contact successfully saved\",\r\n MessageStyle: \"success\"\r\n });\r\n\r\n toolbarRef.current.setButtonDisabled(\"edit\", true);\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n }\r\n else if (cancel === true) {\r\n this.setState({\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n selectedContact: null,\r\n Message: \"\"\r\n })\r\n toolbarRef.current.setButtonDisabled(\"edit\", true);\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n }\r\n else {\r\n this.setState({\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n selectedContact: null,\r\n Message: \"A system error has occured, please try again later or contact your administrator\",\r\n MessageStyle: \"warning\"\r\n })\r\n toolbarRef.current.setButtonDisabled(\"edit\", true);\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedContact: selection[0].Id, Message: \"\" });\r\n } else {\r\n this.setState({ selectedContact: null, Message: \"\" });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"edit\", selection === null || selection.length === 0);\r\n toolbarRef.current.setButtonDisabled(\"remove\", selection === null || selection.length === 0);\r\n }\r\n\r\n successfulContactRemoveCallback = (response) => {\r\n\r\n if (!utils.isNull(response.EntityId) && response.EntityId === 0) {\r\n this.setState({ selectedContact: null, Message: response.Message, MessageStyle: response.MessageType.toLowerCase() });\r\n //Force a refresh\r\n this.setState({ searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)) })\r\n }\r\n }\r\n\r\n unsuccessfulContactRemoveCallback = (response) => {\r\n if (!utils.isNull(response.Message) && response.Message !== \"\") {\r\n this.setState({ Message: response.Message, MessageStyle: response.MessageType.toLowerCase() })\r\n }\r\n }\r\n\r\n removeContact(url) {\r\n this.setState({ promptOpen: false }, () => {\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n toolbarRef.current.setButtonDisabled(\"edit\", true);\r\n })\r\n\r\n let fullUrl = `${url}?id=${this.state.selectedContact}&OrganisationID=${this.props.location.state.selection}`;\r\n utils.invokeUrlDelete(fullUrl, this.successfulContactRemoveCallback, this.unsuccessfulContactRemoveCallback);\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ promptOpen: false })\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Organisation > Contacts \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n \r\n\r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig} />\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={true} />\r\n
\r\n\r\n this.postAddHandler(cancel, save)}\r\n >\r\n \r\n \r\n\r\n\r\n this.postAddHandler(cancel, save)}\r\n >\r\n \r\n \r\n\r\n { this.removeContact(\"api/sims/skillsorganisationcontact/RemoveOrganisationContact\") }}\r\n closePrompt={this.closePrompt}\r\n />\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(OrganisationContact));\r\n","import React from 'react';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\nimport { CustomCheckbox } from '../../widgets/CustomCheckbox';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport TabPanel from '../../widgets/TabPanel';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport DocumentUpload from \"../../widgets/DocumentUpload\";\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport const OrganisationBankingDetailsForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const [Bankfilename, setBankFilename] = React.useState(\"\");\r\n const [Regfilename, setRegFilename] = React.useState(\"\");\r\n const [Refresh, setRefresh] = React.useState(null);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n function ConfirmDetailsDisableCheck(value) {\r\n if (value !== undefined && value !== null) {\r\n if (value === true) {\r\n return true\r\n }\r\n else if (value !== true) {\r\n return false\r\n }\r\n }\r\n };\r\n\r\n function DocRequiredCheck (value){\r\n if (value !== undefined && value !== null && value !== \"\") {\r\n return false\r\n }\r\n else if (value === undefined || value === null || value === \"\") {\r\n return true\r\n }\r\n };\r\n\r\n function FileDownload(id, DocumentType) {\r\n utils.invokeUrl(\"api/sims/organisationbankdetail/Download\" + DocumentType + \"Document?id=\" + id, (response) => {\r\n\r\n var blob = new Blob([base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n }, (e) => {\r\n this.setState({ messsageAlert: utils.SYSTEM_ERROR_MESSAGE, messageStyle: \"outlinedError\" });\r\n }\r\n );\r\n };\r\n\r\n function base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n const onBankUploadHandler = (data) => {\r\n if (data) {\r\n setBankFilename(data.name);\r\n }\r\n };\r\n\r\n const onRegUploadHandler = (data) => {\r\n if (data) {\r\n setRegFilename(data.name);\r\n }\r\n };\r\n\r\n const dataArrivedHandler = (values) => {\r\n \r\n if (!utils.isNull(props.dataArrivedHandler)) {\r\n props.dataArrivedHandler(values);\r\n }\r\n\r\n if (!DocRequiredCheck(values.BankDetailsDocumentName)) {\r\n ref.current.setValue(\"BankDetailDocument\", { Base64 : \"\"});\r\n }\r\n }\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Organisation.css\";\r\nimport { OrganisationBankingDetailsForm } from './OrganisationBankDetailsForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst formRef = React.createRef();\r\n\r\nclass OrganisationBankingDetails extends Component {\r\n\r\n state = {\r\n organisationDetails: {\r\n LegalName: \"\",\r\n },\r\n message: \"\",\r\n messageStyle: \"\",\r\n title: \"\",\r\n id: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) ? this.props.location.state.selection : null,\r\n organisationID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.organisationID)) ? this.props.location.state.organisationID : null,\r\n counter: 0\r\n };\r\n\r\n toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n }\r\n ,\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'save', label: 'SAVE', tooltip: 'Save', icon: 'SaveIcon', visible: utils.isNull(this.state.id) ? this.props.menuPermissionItem.Edit : this.props.menuPermissionItem.Add }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n save = () => {\r\n let formValue = formRef.current.getValue();\r\n\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n let isAdd = true;\r\n if (!utils.isNull(this.state.id)) {\r\n formValue.id = this.state.id;\r\n isAdd = false;\r\n }\r\n formValue.OrganisationID = this.state.organisationID;\r\n\r\n if (isAdd) {\r\n const url = `api/sims/organisationbankdetail/addbankdetail`;\r\n utils.saveForm(this, formRef, url, (response) => {\r\n this.setState({ id: response.EntityId });\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n response.MessageType === \"ERROR\" ? this.errorCallback(response) : this.successCallback(response);\r\n }, this.errorCallback);\r\n } else {\r\n const url = `api/sims/organisationbankdetail/updatebankdetail`;\r\n utils.updateForm(this, formRef, url, (response) => {\r\n this.setState({ id: response.EntityId});\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n response.MessageType === \"ERROR\" ? this.errorCallback(response) : this.successCallback(response);\r\n }, this.errorCallback);\r\n }\r\n }\r\n }\r\n\r\n successCallback(response) {\r\n this.setState({\r\n message: response.Message, messageStyle: response.MessageType, counter: this.state.counter + 1\r\n });\r\n\r\n }\r\n errorCallback(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n\r\n handleFormValueChange(values) {\r\n this.setState({\r\n organisationDetails: { \r\n values\r\n },\r\n });\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"save\" === buttonId) {\r\n this.save();\r\n } else {\r\n this.close();\r\n }\r\n }\r\n\r\n\r\n close() {\r\n this.props.history.push({\r\n pathname: '/skillsOrganisation',\r\n state: { selection: this.props.location.state.organisationID }\r\n });\r\n }\r\n\r\n dataArrivedHandler = (values) => {\r\n if (!utils.isNull(values[\"ID\"]) && values[\"ID\"] !== 0) {\r\n this.setState({ id: values[\"ID\"] });\r\n }\r\n }\r\n\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n {\"Organisation > Banking Details \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n
\r\n
\r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)} enabled={true} config={this.toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} dataArrivedHandler={(values) => this.dataArrivedHandler(values)} refreshId={this.state.refreshId} />\r\n | \r\n
\r\n \r\n
\r\n
\r\n {\"Organisation > Link Organisations \" + (this.state.organisationName !== null ? \"> \" + this.state.organisationName + (this.state.sdlnumber !== null ? \" - \" + this.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n\r\n
\r\n\r\n \r\n\r\n {this.state.showTable === true && (\r\n { this.handleSelection(selection) }}\r\n handleCell={(rowid, headCell) => { this.FileDownload(rowid, headCell) }}\r\n >\r\n\r\n { this.onkeyup(e) }}\r\n valueChangeHandler={(values) => {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(values)) {\r\n this.setState({ model: values });\r\n }\r\n }} />\r\n\r\n \r\n )}\r\n\r\n\r\n\r\n this.postAddHandler(cancel, save)}\r\n >\r\n this.handleFormValueChange(values)} open={this.state.LinkOrganisationDialog} ParentOrganisationId={this.state.organisationID} />\r\n\r\n\r\n\r\n \r\n\r\n this.postAddHandler(cancel, save)}\r\n >\r\n this.handleFormValueChange(values)}\r\n edit={true} ParentOrganisationId={this.state.organisationID}\r\n dataURL='api/sims/skillslinkedorganisations/getfind'\r\n id={this.state.selectedOrganisation}\r\n />\r\n\r\n\r\n\r\n \r\n\r\n this.postAddHandler(cancel, save)}\r\n >\r\n this.handleFormValueChange(values)}\r\n endlink={true} ParentOrganisationId={this.state.organisationID}\r\n />\r\n\r\n\r\n\r\n \r\n\r\n \r\n\r\n\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(ChildOrganisationSearch));","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\n\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Organisation.css\";\r\nimport { OrganisationDetailsForm } from './OrganisationDetailsForm';\r\n\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close' },\r\n { id: 'save', label: 'SAVE', tooltip: 'Save', icon: 'SaveIcon' }\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'contact', label: 'Contact', tooltip: '' },\r\n { id: 'bankingDetails', label: 'Bank Details', tooltip: '' },\r\n {\r\n contextMenu: [\r\n { id: \"unions\", description: \"Unions\" },\r\n { id: \"trainingCommittee\", description: \"Training Committee\" }\r\n ],\r\n id: 'committee', label: 'Committees', width: \"100px\"\r\n },\r\n { id: 'CFODetails', label: 'CFO Details', tooltip: '' },\r\n \r\n { id: 'forms', label: 'WSP & ATR Forms', tooltip: 'WSP & ATR Forms' },\r\n { id: 'documentsUpload', label: 'Uploads', tooltip: 'WSP and Documents Upload' },\r\n { id: 'evaluation', label: 'Evaluation', tooltip: '' },\r\n { id: 'grantsAndLevies', label: 'Grants and Levies', tooltip: ''},\r\n { id: 'crm', label: 'CRM', tooltip: 'Client Relationship Management' },\r\n {id: 'letter', label: 'Letter', tooltip: 'SDF Compliance Letter'},\r\n \r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst organisationRef = React.createRef();\r\n\r\nclass ChildOrganisation extends Component {\r\n\r\n state = {\r\n organisationDetails: {\r\n LegalName: \"\",\r\n }\r\n };\r\n\r\n handleFormValueChange(values) {\r\n this.setState({ organisationDetails: values });\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"save\" === buttonId) {\r\n this.save();\r\n } else if (\"close\" === buttonId) {\r\n this.closeView();\r\n } else if (\"contact\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/skillsOrganisationContacts',\r\n state: {\r\n // organisationID: this.props.location.state.selection,\r\n organisationName: this.state.organisationDetails.LegalName\r\n }\r\n });\r\n } else if (\"bankingDetails\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/skillsOrganisationBankingDetails',\r\n state: {\r\n // organisationID: this.props.location.state.selection,\r\n organisationName: this.state.organisationDetails.LegalName\r\n }\r\n });\r\n } else if (\"CFODetails\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/skillsOrganisationCFODetails',\r\n state: {\r\n // organisationID: this.props.location.state.selection,\r\n organisationName: this.state.organisationDetails.LegalName\r\n }\r\n })\r\n } else if (\"forms\" === buttonId) {\r\n this.props.history.push({\r\n pathname: \"/wspAtrMain\",\r\n state: {\r\n // organisationID: this.props.location.state.selection,\r\n organisationName: this.state.organisationDetails.LegalName\r\n }\r\n })\r\n } else if (\"crm\" === buttonId) {\r\n this.props.history.push({\r\n pathname: \"/OrganisationCRM\",\r\n state: {\r\n // organisationID: this.props.location.state.selection,\r\n organisationName: this.state.organisationDetails.LegalName\r\n }\r\n })\r\n }\r\n else if (\"linkedOrganisations\" === buttonId) {\r\n this.props.history.push({\r\n pathname: \"/LinkedOrganisations\",\r\n state: {\r\n // organisationID: this.props.location.state.selection,\r\n organisationName: this.state.organisationDetails.LegalName\r\n }\r\n })\r\n }\r\n }\r\n\r\n handleToolbarButtonMenuClick(menu) {\r\n if (\"trainingCommittee\" === menu.id) {\r\n this.props.history.push({\r\n pathname: '/skillsTrainingCommitteeSearch',\r\n state: {\r\n // organisationID: this.props.location.state.selection,\r\n organisationName: this.state.organisationDetails.LegalName\r\n }\r\n })\r\n } else if (\"unions\" === menu.id) {\r\n this.props.history.push({\r\n pathname: '/skillsUnion',\r\n state: {\r\n // organisationID: this.props.location.state.selection,\r\n organisationName: this.state.organisationDetails.LegalName\r\n }\r\n })\r\n }\r\n }\r\n\r\n save() {\r\n let formValue = organisationRef.current.getValue();\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n let data = JSON.stringify(formValue);\r\n const url = `api/indicium/provider/updateProviderDetails?data=${data}`;\r\n // TODO : Invoke spinner mask\r\n fetch(url)\r\n .then(res => res.json())\r\n .then((responseJson) => {\r\n let response = JSON.parse(responseJson);\r\n if (response.MessageType !== \"ERROR\") {\r\n this.props.history.push({\r\n pathname: '/skillsOrganisation',\r\n state: {\r\n organisationID: this.props.location.state.selection,\r\n organisationName: this.state.organisationDetails.LegalName\r\n }\r\n });\r\n } else {\r\n this.setState({ saveMessage: response.Message, hasSaveError: true });\r\n }\r\n }).catch(() => {\r\n this.setState({ saveMessage: \"A system error has accured. Please contact your system administrator\", hasSaveError: true });\r\n });\r\n }\r\n }\r\n\r\n closeView() {\r\n this.props.history.push({\r\n pathname: '/skillsOrganisationSearch',\r\n state: { selection: this.props.location.state.organisationID }\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n {\"Organisation \" + (typeof this.props.location.state !== 'undefined' && this.props.location.state.selection !== null ? \"> \"\r\n + (this.state.organisationDetails != null ? this.state.organisationDetails.LegalName : \"\") : \"> Add Child Organisation\")}\r\n
\r\n
\r\n {this.state.message}\r\n
\r\n
\r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n buttonMenuClickHandler={(menu) => this.handleToolbarButtonMenuClick(menu)} enabled={true} config={toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} />\r\n | \r\n
\r\n \r\n
\r\n
\r\n {\"Organisation > CFO Details \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n \r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)} enabled={true} config={this.toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} dataArrivedHandler={(values) => this.dataArrivedHandler(values)} />\r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(OrganisationCFODetails));\r\n","import React from 'react';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport TabPanel from '../../widgets/TabPanel';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\n\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport const UnionForm = React.forwardRef((props, ref) => {\r\n\r\n const [tabValue, setTabValue] = React.useState(0);\r\n\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})","import React from 'react';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport Button from '@material-ui/core/Button';\r\nimport { UnionForm } from './UnionForm';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\n\r\nconst utils = new ViewUtils();\r\nexport default function UnionCreateDialog(props) {\r\n\r\n const [open, setOpen] = React.useState(props.open);\r\n const [message, setMessage] = React.useState()\r\n const [messageStyle, setMessageStyle] = React.useState()\r\n const formRef = React.createRef();\r\n\r\n const handleClose = () => {\r\n setOpen(false);\r\n };\r\n\r\n const cancel = () => {\r\n handleClose(true);\r\n };\r\n\r\n const add = () => {\r\n\r\n let formValue = formRef.current.getValue();\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n let isAdd = true;\r\n if (!utils.isNull(props) && !utils.isNull(props.id)) {\r\n formValue.id = props.id;\r\n isAdd = false;\r\n }\r\n let data = JSON.stringify(formValue);\r\n if (isAdd) {\r\n console.log(data);\r\n const url = `api/sims/TrainingCommittee/SaveTrainingCommittee`;\r\n utils.saveForm(data, url, (response)=>{\r\n setMessageStyle(\"SUCCESS\" );\r\n setMessage(\"Added contact successfully!\" );\r\n alert(\"SUCCESS\", response);\r\n\r\n }, ()=>{setMessage(\"Added contact failed!\" );});\r\n }\r\n }\r\n }\r\n\r\n React.useEffect(() => {\r\n setOpen(props.open);\r\n \r\n }, [props.open]);\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n this.handleToolbarButtonClick(buttonId)}\r\n config={this.state.toolbarConfig} />\r\n this.setState({ selection: selection })}\r\n dataUrl=\"api/indicium/provider/searchContacts\" searchParameters={[{ Name: \"OrganisationID\", Value: this.props.location.state.organisationID }]} />\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(TrainingCommitteeSearchRecord)\r\n);\r\n","import React from 'react';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport TabPanel from '../../widgets/TabPanel';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport const TrainingCommitteeForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport Prompt from '../../widgets/Prompt';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport FormDialog from \"../../etqa/FormDialog\";\r\nimport { TrainingCommitteeForm } from \"./TrainingCommitteeForm\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\nconst headCells = [\r\n { id: 'Title', numeric: false, disablePadding: true, label: 'Title' },\r\n { id: 'FirstName', numeric: false, disablePadding: true, label: 'First Name' },\r\n { id: 'Surname', numeric: false, disablePadding: true, label: 'Surname' },\r\n { id: 'IDNumber', numeric: false, disablePadding: true, label: 'ID Number' },\r\n { id: 'Initials', numeric: false, disablePadding: true, label: 'Initials' },\r\n { id: 'Designation', numeric: false, disablePadding: true, label: 'Designation' },\r\n { id: 'TelephoneNumber', numeric: false, disablePadding: true, label: 'Telephone Number' },\r\n { id: 'CellPhoneNumber', numeric: false, disablePadding: true, label: 'CellPhone Number' },\r\n { id: 'FaxNumber', numeric: false, disablePadding: true, label: 'Fax Number' },\r\n { id: 'EMail', numeric: false, disablePadding: true, label: 'EMail' },\r\n { id: 'NameOfUnion', numeric: false, disablePadding: true, label: 'NameOfUnion' },\r\n { id: 'PositionInUnion', numeric: false, disablePadding: true, label: 'PositionInUnion' }\r\n\r\n];\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nconst addFormRef = React.createRef();\r\n\r\nclass OrganisationTrainingCommittee extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n selectedContact: null,\r\n promptOpen: false,\r\n promptTitle: \"Remove Training Committee member from Organisation\",\r\n promptContent: \"Are you sure you want to remove this Training Committee member from the Organisation?\",\r\n Message: \"\",\r\n MessageStyle: \"\",\r\n searchParameters: [{ Name: \"OrganisationID\", Value: this.props.location.state.organisationID }]\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n }\r\n ,\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: 'Add Member', tooltip: 'Add Training Committee Member to Organisation', icon: 'AddIcon', visible: this.props.menuPermissionItem.Add },\r\n { id: 'edit', label: 'Edit Member', tooltip: 'Edit Training Committee Member on Organisation', icon: 'EditIcon', visible: this.props.menuPermissionItem.Edit },\r\n { id: 'remove', label: 'Remove Member', tooltip: 'Remove Training Committee Member from Organisation', disabled: utils.isNull(this.state.selectedContact), icon: \"Delete\", visible: this.props.menuPermissionItem.Delete }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/skillsOrganisation',\r\n state: { selection: this.props.location.state.organisationID }\r\n });\r\n }\r\n else if (\"add\" === buttonId) {\r\n this.setState({ addDialogOpen: true, Message: \"\" })\r\n }\r\n else if (\"edit\" === buttonId) {\r\n this.setState({ editDialogOpen: true, Message: \"\" })\r\n }\r\n else if (\"remove\" === buttonId) {\r\n this.setState({ promptOpen: true })\r\n }\r\n }\r\n\r\n postAddHandler(cancel, save) {\r\n if (save === true) {\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)),\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n selectedContact: null,\r\n Message: \"Organisation Training Committee Member successfully saved\",\r\n MessageStyle: \"success\"\r\n });\r\n\r\n toolbarRef.current.setButtonDisabled(\"edit\", true);\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n }\r\n else if (cancel === true) {\r\n this.setState({\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n selectedContact: null,\r\n Message: \"\"\r\n })\r\n toolbarRef.current.setButtonDisabled(\"edit\", true);\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n }\r\n else {\r\n this.setState({\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n selectedContact: null,\r\n Message: \"A system error has occured, please try again later or contact your administrator\",\r\n MessageStyle: \"warning\"\r\n })\r\n toolbarRef.current.setButtonDisabled(\"edit\", true);\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n //console.clear();\r\n //console.log(this.props.menuPermissionItem.Add);\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedContact: selection[0].Id, Message: \"\" });\r\n } else {\r\n this.setState({ selectedContact: null, Message: \"\" });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"edit\", selection === null || selection.length === 0);\r\n toolbarRef.current.setButtonDisabled(\"remove\", selection === null || selection.length === 0);\r\n }\r\n\r\n successfulContactRemoveCallback = (response) => {\r\n\r\n if (!utils.isNull(response.EntityId) && response.EntityId === 0) {\r\n this.setState({ selectedContact: null, Message: response.Message, MessageStyle: response.MessageType.toLowerCase() });\r\n //Force a refresh\r\n this.setState({ searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)) })\r\n }\r\n }\r\n\r\n unsuccessfulContactRemoveCallback = (response) => {\r\n if (!utils.isNull(response.Message) && response.Message !== \"\") {\r\n this.setState({ Message: response.Message, MessageStyle: response.MessageType.toLowerCase() })\r\n }\r\n }\r\n\r\n removeContact(url) {\r\n this.setState({ promptOpen: false }, () => {\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n toolbarRef.current.setButtonDisabled(\"edit\", true);\r\n })\r\n\r\n let fullUrl = `${url}?id=${this.state.selectedContact}&OrganisationID=${this.props.location.state.selection}`;\r\n utils.invokeUrlDelete(fullUrl, this.successfulContactRemoveCallback, this.unsuccessfulContactRemoveCallback);\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ promptOpen: false })\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Organisation > Training Committee \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n\r\n \r\n\r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig} />\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={true} />\r\n
\r\n\r\n this.postAddHandler(cancel, save)}\r\n >\r\n \r\n \r\n\r\n\r\n this.postAddHandler(cancel, save)}\r\n >\r\n \r\n \r\n\r\n { this.removeContact(\"api/sims/trainingcommittee/RemoveTrainingCommittee\") }}\r\n closePrompt={this.closePrompt}\r\n />\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(OrganisationTrainingCommittee));\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Organisation.css\";\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport EnhancedTable from '../../widgets/Table';\r\nimport UnionCreateDialog from \"./UnionCreateDialog\";\r\nimport UnionEditDialog from \"./UnionEditDialog\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\n\r\nconst utils = new ViewUtils();\r\n\r\n\r\nconst headCells = [\r\n { id: 'NameOfUnion', numeric: false, disablePadding: true, label: 'Name of Union' },\r\n { id: 'Name', numeric: false, disablePadding: true, label: 'Name' },\r\n { id: 'Surname', numeric: false, disablePadding: true, label: 'Surname' },\r\n { id: 'JobTitle', numeric: false, disablePadding: true, label: 'Job Title' },\r\n { id: 'Designation', numeric: false, disablePadding: true, label: 'Union Committee Designation' },\r\n];\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: \"Close\", tooltip: \"Close\" },\r\n { id: 'add', label: '', tooltip: 'Add', icon: 'AddIcon' },\r\n { id: 'edit', label: '', tooltip: 'Edit', icon: 'EditIcon' }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nclass UnionSearchRecord extends Component {\r\n\r\n \r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n organisationDetails: {\r\n LegalName: \"\",\r\n },\r\n message: \"\",\r\n messageStyle: \"\",\r\n title: \"\",\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n id: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) ? this.props.location.state.selection : null,\r\n }};\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (buttonId === \"add\") {\r\n this.setState({ addDialogOpen: true });\r\n } else if (buttonId === \"close\") {\r\n this.close();\r\n }\r\n else if (buttonId === \"edit\") {\r\n this.setState({ editDialogOpen: true });\r\n }\r\n }\r\n\r\n close() {\r\n this.props.history.push({\r\n pathname: \"/skillsOrganisation\",\r\n state: {selection: this.props.location.state.organisationID}\r\n })\r\n }\r\n render() {\r\n return (\r\n\r\n \r\n
\r\n {\"Organisation > \" + this.props.location.state.organisationName + \" > Union Records\"}\r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n this.handleToolbarButtonClick(buttonId)}\r\n config={toolbarConfig} />\r\n\r\n { this.handleSelection(selection) }}\r\n promptTitle={\"Remove Organisation\"}\r\n promptContent={\"Are you sure you want to remove this union member?\"}\r\n >\r\n \r\n {/* this.setState({ selection: selection })}\r\n dataUrl=\"/sims/TrainingCommittee/GetTrainingCommitteeByOrganisationId\" searchParameters={[{ Name: \"OrganisationID\", Value: this.props.location.state.organisationID }]} /> */}\r\n
\r\n
\r\n \r\n \r\n | \r\n {submitrow}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n #\r\n Form Name\r\n Form Description\r\n Due Date\r\n Select\r\n \r\n \r\n \r\n {tablerows}\r\n \r\n
\r\n\r\n\r\n \r\n\r\n );\r\n }\r\n}\r\nexport default withRouter(withStyles(useStyles())(withMenuPermission(WspAtrForms)));\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n}));\r\n\r\nexport default function OFOSearchForm(props) {\r\n const [labelWidth, setLabelWidth] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n | \r\n \r\n \r\n OFO Code\r\n\t\t\t\t\t\t\t\t\r\n props.model.OFOCode = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n \r\n \r\n OFODescription\r\n\t\t\t\t\t\t\t\t\r\n props.model.OFODescription = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {this.state.showReport ? { this.ReportDownload() }}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n download\r\n style={{ textDecoration: \"underline\" }}\r\n >Download Report : null}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {this.state.showReport ? { this.ReportDownload() }}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n download\r\n style={{ textDecoration: \"underline\" }}\r\n >Download Report : null}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {this.state.showReport ? { this.ReportDownload() }}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n download\r\n style={{ textDecoration: \"underline\" }}\r\n >Download Report : null}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {this.state.showReport ? { this.ReportDownload() }}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n download\r\n style={{ textDecoration: \"underline\" }}\r\n >Download Report : null}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {this.state.showReport ? { this.ReportDownload() }}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n download\r\n style={{ textDecoration: \"underline\" }}\r\n >Download Report : null}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {this.state.showReport ? { this.ReportDownload() }}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n download\r\n style={{ textDecoration: \"underline\" }}\r\n >Download Report : null}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {this.state.showReport ? { this.ReportDownload() }}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n download\r\n style={{ textDecoration: \"underline\" }}\r\n >Download Report : null}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {this.state.showReport ? { this.ReportDownload() }}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n download\r\n style={{ textDecoration: \"underline\" }}\r\n >Download Report : null}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {this.state.showReport ? { this.ReportDownload() }}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n download\r\n style={{ textDecoration: \"underline\" }}\r\n >Download Report : null}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n \r\n \r\n | \r\n \r\n \r\n Municipality Name\r\n\t\t\t\t\t\t\t\t\r\n props.model.MunicipalityName = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n \r\n \r\n City Name\r\n\t\t\t\t\t\t\t\t\r\n props.model.CityName = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n \r\n \r\n Postal Code\r\n\t\t\t\t\t\t\t\t\r\n props.model.PostalCode = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {this.state.showReport ? { this.ReportDownload() }}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n download\r\n style={{ textDecoration: \"underline\" }}\r\n >Download Report : null}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n | \r\n \r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {this.state.showReport ? { this.ReportDownload() }}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n download\r\n style={{ textDecoration: \"underline\" }}\r\n >Download Report : null}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n | \r\n \r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {this.state.showReport ? { this.ReportDownload() }}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n download\r\n style={{ textDecoration: \"underline\" }}\r\n >Download Report : null}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Status
\r\n | \r\n \r\n \r\n | \r\n \r\n \r\n \r\n Last Ran
\r\n | \r\n \r\n \r\n | \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n :\r\n null\r\n }\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(WspAtrPrintReport));","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport FormDialog from \"../../etqa/FormDialog\";\r\nimport { ViewContainer } from \"../../View.jsx\";\r\nimport { WSPandATRCreateForm } from \"./WSPandATRCreateForm\";\r\nimport { WSPandATREditForm } from \"./WSPandATREditForm\";\r\nimport EditDialog from './WspAtrEditDialog';\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nimport Slide from '@material-ui/core/Slide';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Toolbar from '@material-ui/core/Toolbar';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport { Typography } from \"antd\";\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport WspAtrPrintReport from './WspAtrPrintReport';\r\n\r\nconst Transition = React.forwardRef(function Transition(props, ref) {\r\n return ;\r\n});\r\n\r\nconst headCells = [\r\n { id: 'FinancialYear', numeric: false, disablePadding: true, label: 'Financial Year', widthRatio: '0.17' },\r\n { id: 'FormType', numeric: false, disablePadding: true, label: 'Form Type', widthRatio: '0.17' },\r\n { id: 'WSPStatus', numeric: false, disablePadding: true, label: 'WSP Status', widthRatio: '0.09' },\r\n { id: 'DueDate', numeric: false, disablePadding: true, label: 'Due Date', widthRatio: '0.09' },\r\n { id: 'SubmittedDate', numeric: false, disablePadding: true, label: 'Submitted Date', widthRatio: '0.1' },\r\n { id: 'SubmittedBy', numeric: false, disablePadding: true, label: 'Submitted By', widthRatio: '0.1' },\r\n { id: 'EvaluatedDate', numeric: false, disablePadding: true, label: 'Evaluated Date', widthRatio: '0.09' },\r\n { id: 'ApprovedDate', numeric: false, disablePadding: true, label: 'Approved Date', widthRatio: '0.1' },\r\n { id: 'RejectedDate', numeric: false, disablePadding: true, label: 'Rejected Date', widthRatio: '0.09' },\r\n\r\n];\r\n\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nconst addFormRef = React.createRef();\r\n\r\nconst useStyles = theme => ({\r\n appBar: {\r\n position: 'relative',\r\n },\r\n title: {\r\n flex: 1,\r\n color: 'white',\r\n },\r\n table: {\r\n minWidth: 700,\r\n },\r\n});\r\n\r\nclass WspAtrDashboard extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n selectedWSPATR: null,\r\n searchParameters: [{ Name: \"OrganisationID\", Value: this.props.location.state.organisationID }],\r\n OpenPrintDialog: false,\r\n clearSelectedRow: false\r\n }\r\n\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n }\r\n ,\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Create WSP/ATR', icon: 'AddIcon', visible: this.props.menuPermissionItem.Add},\r\n { id: 'view', label: '', tooltip: 'View WSP/ATR', icon: 'ViewIcon', disabled: true },\r\n { id: \"edit\", label: \"\", tooltip: \"Edit WSP/ATR\", icon: \"EditIcon\", disabled: true, visible: this.props.menuPermissionItem.Edit},\r\n { id: \"print\", label: \"\", tooltip: \"Print WSP/ATR Report\", disabled: true, icon: 'PrintIcon' },\r\n ]\r\n }\r\n ]\r\n }\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/skillsOrganisation',\r\n state: { selection: this.props.location.state.organisationID }\r\n });\r\n }\r\n else if (\"add\" === buttonId) {\r\n this.setState({ addDialogOpen: true, Message: \"\" })\r\n }\r\n else if (\"edit\" === buttonId) {\r\n this.setState({ editDialogOpen: true, Message: \"\" })\r\n }\r\n else if (\"view\" === buttonId) {\r\n this.props.history.push({\r\n pathname: \"/WspAtrForms\",\r\n state: {\r\n WSPATRID: this.state.selectedWSPATR,\r\n organisationID: this.props.location.state.organisationID\r\n }\r\n })\r\n } else if (\"print\" === buttonId) {\r\n this.setState({ OpenPrintDialog: true });\r\n /*this.FileDownload();*/\r\n }\r\n }\r\n\r\n //FileDownload = () => {\r\n\r\n // utils.invokeUrl(\"api/sims/wspatr/GetPrintReportData?WSPATRID=\" + this.state.selectedWSPATR, (response) => {\r\n\r\n // toolbarRef.current.setButtonDisabled(\"edit\", true);\r\n // toolbarRef.current.setButtonDisabled(\"view\", true);\r\n // toolbarRef.current.setButtonDisabled(\"print\", true);\r\n\r\n // var blob = new Blob([this.base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n // var url = URL.createObjectURL(blob);\r\n\r\n // const link = document.createElement('a');\r\n // link.href = url;\r\n // link.download = response.Name;\r\n // link.target = '_blank';\r\n // link.click();\r\n\r\n // }, (e) => {\r\n // this.setState({ Message: utils.SYSTEM_ERROR_MESSAGE, MessageStyle: \"ERROR\" });\r\n // }\r\n // );\r\n\r\n //};\r\n\r\n //base64ToArrayBuffer(base64) {\r\n // var binary_string = window.atob(base64);\r\n // var len = binary_string.length;\r\n // var bytes = new Uint8Array(len);\r\n // for (var i = 0; i < len; i++) {\r\n // bytes[i] = binary_string.charCodeAt(i);\r\n // }\r\n // return bytes.buffer;\r\n //};\r\n\r\n postAddHandler(cancel, save, response) {\r\n if (save === true) {\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)),\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n selectedWSPATR: null,\r\n Message: response.Message,\r\n MessageStyle: response.MessageType,\r\n clearSelectedRow: true,\r\n });\r\n\r\n toolbarRef.current.setButtonDisabled(\"edit\", true);\r\n toolbarRef.current.setButtonDisabled(\"view\", true);\r\n toolbarRef.current.setButtonDisabled(\"print\", true);\r\n }\r\n else if (cancel === true) {\r\n this.setState({\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n selectedWSPATR: null,\r\n Message: \"\"\r\n })\r\n toolbarRef.current.setButtonDisabled(\"edit\", true);\r\n toolbarRef.current.setButtonDisabled(\"view\", true);\r\n toolbarRef.current.setButtonDisabled(\"print\", true);\r\n }\r\n else {\r\n this.setState({\r\n addDialogOpen: false,\r\n editDialogOpen: false,\r\n selectedWSPATR: null,\r\n Message: \"A system error has occured, please try again later or contact your administrator\",\r\n MessageStyle: \"warning\"\r\n })\r\n toolbarRef.current.setButtonDisabled(\"edit\", true);\r\n toolbarRef.current.setButtonDisabled(\"view\", true);\r\n toolbarRef.current.setButtonDisabled(\"print\", true);\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedWSPATR: selection[0].Id, Message: \"\" });\r\n } else {\r\n this.setState({ selectedWSPATR: null, Message: \"\" });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"edit\", selection === null || selection.length === 0);\r\n toolbarRef.current.setButtonDisabled(\"view\", selection === null || selection.length === 0);\r\n toolbarRef.current.setButtonDisabled(\"print\", selection === null || selection.length === 0);\r\n }\r\n\r\n successfulContactRemoveCallback = (response) => {\r\n\r\n if (!utils.isNull(response.EntityId) && response.EntityId === 0) {\r\n this.setState({ selectedWSPATR: null, Message: response.Message, MessageStyle: response.MessageType.toLowerCase() });\r\n //Force a refresh\r\n this.setState({ searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)) })\r\n }\r\n }\r\n\r\n unsuccessfulContactRemoveCallback = (response) => {\r\n if (!utils.isNull(response.Message) && response.Message !== \"\") {\r\n this.setState({ Message: response.Message, MessageStyle: response.MessageType.toLowerCase() })\r\n }\r\n }\r\n\r\n ClosePrintDialog = () => {\r\n this.setState({ OpenPrintDialog: false });\r\n toolbarRef.current.setButtonDisabled(\"edit\", true);\r\n toolbarRef.current.setButtonDisabled(\"view\", true);\r\n toolbarRef.current.setButtonDisabled(\"print\", true);\r\n };\r\n\r\n onClearSelectedRow = () => {\r\n this.setState({ clearSelectedRow: false });\r\n }\r\n\r\n render() {\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n {\"WSP/ATR Dashboard\" + (this.props.location.state.organisationName !== null ? \" - \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"\")}\r\n
\r\n\r\n \r\n\r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig} />\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n\r\n this.postAddHandler(cancel, save)}\r\n >\r\n \r\n \r\n\r\n this.postAddHandler(cancel, save, response)}\r\n viewRef={this}\r\n />\r\n {\r\n /* this.postAddHandler(cancel, save)}\r\n >\r\n \r\n */\r\n }\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withStyles(useStyles())(withMenuPermission(WspAtrDashboard)));","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nexport default function WspAtrDocumentsUploadForm(props) {\r\n const [labelWidth, setLabelWidth, tabValue] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n","import React from 'react';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport TabPanel from '../../widgets/TabPanel';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport const WspAtrUploadForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const [docName, setDocName] = React.useState('');\r\n\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n const styles = makeStyles({\r\n TextArea: {\r\n '& .MuiOutlinedInput-inputMultiline': {\r\n height: \"200px !important\",\r\n width: \"600px !important\"\r\n }\r\n }\r\n })\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})","import React from 'react';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport Button from '@material-ui/core/Button';\r\nimport { WspAtrUploadForm } from './WspAtrUploadForm';\r\nimport DocumentUpload from '../../widgets/DocumentUpload';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport default function UploadDialog(props) {\r\n\r\n const [open, setOpen] = React.useState(props.open);\r\n const [AddDiasbaled, setAddDiasbaled] = React.useState(true);\r\n const [Message, setMessage] = React.useState(\"\");\r\n const [MessageStyle, setMessageStyle] = React.useState(\"\");\r\n const formRef = React.createRef();\r\n const [filename, setFilename] = React.useState(\"\");\r\n const [size, setSize] = React.useState(null);\r\n const [base64, setBase64] = React.useState(null);\r\n const [type, setType] = React.useState(null);\r\n\r\n const handleClose = (cancel, save,response) => {\r\n setFilename(\"\");\r\n setOpen(false);\r\n props.closeHandler(cancel, save, response);\r\n };\r\n\r\n const cancel = () => {\r\n handleClose(true, false);\r\n };\r\n\r\n const add = () => {\r\n let formValue = formRef.current.getValue();\r\n formValue.Document = {};\r\n formValue.Document.Name = filename;\r\n formValue.Document.size = size;\r\n formValue.Document.type = type;\r\n formValue.Document.base64 = base64;\r\n formValue.OrganisationID = props.OrganisationID;\r\n formValue.DocumentRelatesID = props.docID;\r\n\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n\r\n const url = `api/sims/wspatrdocument/addwspatrdocument`;\r\n\r\n utils.invokeUrl(url, (response) => {\r\n handleClose(false, true, response);\r\n }, () => { handleClose(false, false); },\r\n {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(formValue)\r\n }\r\n );\r\n }\r\n }\r\n\r\n const onUploadHandler = (data) => {\r\n if (data) {\r\n setFilename(data.name);\r\n setSize(data.size);\r\n setBase64(data.base64);\r\n setType(data.type);\r\n setAddDiasbaled(false);\r\n }\r\n }\r\n\r\n React.useEffect(() => {\r\n setOpen(props.open);\r\n }, [props.open]);\r\n\r\n return (\r\n \r\n
\r\n
\r\n {\"Organisation > WSP/ATR Document Uploads \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n\r\n \r\n\r\n \r\n < WspAtrDocumentsUploadForm\r\n // data={this.state.model}\r\n valueChangeHandler={(values) => this.handleFormValueChange(values)}\r\n />\r\n\r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig}\r\n />\r\n\r\n { this.handleSelectionChange(selection) }}\r\n dataUrl=\"api/sims/WSPATRDocument/GetSearch\"\r\n searchParameters={this.state.searchParameters}\r\n onCellSelectionChange={(rowid, headCell) => { this.FileDownload(rowid, headCell) }}\r\n paged={true} />\r\n
\r\n\r\n this.postAddHandler(cancel, save, response)}\r\n viewRef={this}\r\n OrganisationID={this.props.location.state.organisationID}\r\n />\r\n\r\n { this.remove(\"api/sims/WSPATRDocument/RemoveWSPATRDocument\") }}\r\n closePrompt={this.closePrompt}\r\n />\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(WspAtrDocumentsUpload));\r\n","import React from 'react';\r\nimport { EntityForm } from '../../widgets/SearchForm';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nexport default function WSPATRVerificationSearchForm(props) {\r\n const classes = useStyles();\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport WSPATRVerificationSearchForm from './WSPATRVerificationSearchForm';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nclass WSPATRVerificationSearch extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'view', label: '', tooltip: 'View Verification', icon: 'ViewIcon', disabled: true },\r\n ]\r\n }\r\n ]\r\n }\r\n\r\n this.searchParameters = \r\n [\r\n { Name: \"SDLNumber\", Value: \"\" },\r\n { Name: \"FinancialYearID\", Value: \"\" },\r\n\r\n ]\r\n\r\n this.headCells = \r\n [\r\n { id: 'SDLNumber', numeric: false, disablePadding: true, label: 'SDL Number' },\r\n { id: 'CompanyName', numeric: false, disablePadding: true, label: 'Company Name' },\r\n { id: 'FinancialYear', numeric: false, disablePadding: true, label: 'Financial Year' },\r\n { id: 'SubmissionDate', numeric: false, disablePadding: true, label: 'Submission Date' },\r\n { id: 'VerificationStatus', numeric: false, disablePadding: true, label: 'Verification Status' },\r\n\r\n ]\r\n\r\n let model = \r\n {\r\n SDLNumber: \"\",\r\n FinancialYearID: \"\"\r\n }\r\n\r\n this.state = {\r\n model: model,\r\n keyUpSwitch: false,\r\n selectedWSPATR: null,\r\n }\r\n }\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n handleSelection = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedWSPATR: selection[0].Id });\r\n } else {\r\n this.setState({ selectedWSPATR: null });\r\n }\r\n //this.setState({ selectedWSPATR: selection })\r\n toolbarRef.current.setButtonDisabled(\"view\", false);\r\n\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (\"view\" === buttonId) {\r\n this.props.history.push({\r\n pathname: \"/WSPATRVerificationMain\",\r\n state: {\r\n WSPATRID: this.state.selectedWSPATR\r\n }\r\n })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n\r\n \r\n { this.handleSelection(selection) }}\r\n toolbarRef={toolbarRef}\r\n >\r\n { this.onkeyup(e) }}\r\n valueChangeHandler={(values) => {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(values)) {\r\n this.setState({ model: values });\r\n }\r\n }}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(WSPATRVerificationSearch)\r\n);\r\n\r\n\r\n","import React, { Component, Fragment } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport { ViewContainer } from \"../../View.jsx\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport Button from '@material-ui/core/Button';\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport { Link } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport Item from \"antd/lib/list/Item\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport './Style.css'\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport CloudDownloadIcon from '@material-ui/icons/CloudDownload';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport WebIcon from '@material-ui/icons/Web';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport { Typography } from \"antd\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport Slide from '@material-ui/core/Slide';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport Toolbar from '@material-ui/core/Toolbar';\r\nimport LinkDialog from \"../../etqa/LinkDialog\";\r\nimport LetterReasonDialog from \"./Controls/LetterReasonDialog.jsx\";\r\nimport DocumentUpload from \"../../widgets/DocumentUpload\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst Transition = React.forwardRef(function Transition(props, ref) {\r\n return ;\r\n});\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'Back to WSP/ATR Verification Dashboard', tooltip: '' }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#01579B',\r\n color: theme.palette.common.white,\r\n border: '1px solid white',\r\n },\r\n body: {\r\n fontSize: 11,\r\n },\r\n}))(TableCell);\r\n\r\nconst StyledTableTextCell = withStyles((theme) => ({\r\n body: {\r\n fontSize: 14,\r\n fontWeight: 500\r\n },\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n height: theme.palette.action.main\r\n },\r\n },\r\n}))(TableRow);\r\n\r\nconst headCells = [\r\n { id: 'Occupation', numeric: false, disablePadding: true, label: 'Occupation', widthRatio: .154 },\r\n { id: 'AfricanMale', numeric: false, disablePadding: true, label: 'African Male', widthRatio: .047 },\r\n { id: 'AfricanFemale', numeric: false, disablePadding: true, label: 'African Female', widthRatio: .047 },\r\n { id: 'AfricanDisabled', numeric: false, disablePadding: true, label: 'African Disabled', widthRatio: .047 },\r\n { id: 'ColouredMale', numeric: false, disablePadding: true, label: 'Coloured Male', widthRatio: .047 },\r\n { id: 'ColouredFemale', numeric: false, disablePadding: true, label: 'Coloured Female', widthRatio: .047 },\r\n { id: 'ColouredDisabled', numeric: false, disablePadding: true, label: 'Coloured Disabled', widthRatio: .047 },\r\n { id: 'IndianMale', numeric: false, disablePadding: true, label: 'Indian Male', widthRatio: .047 },\r\n { id: 'IndianFemale', numeric: false, disablePadding: true, label: 'Indian Female', widthRatio: .047 },\r\n { id: 'IndianDisabled', numeric: false, disablePadding: true, label: 'Indian Disabled', widthRatio: .047 },\r\n { id: 'WhiteMale', numeric: false, disablePadding: true, label: 'White Male', widthRatio: .047 },\r\n { id: 'WhiteFemale', numeric: false, disablePadding: true, label: 'White Female', widthRatio: .047 },\r\n { id: 'WhiteDisabled', numeric: false, disablePadding: true, label: 'White Disabled', widthRatio: .047 },\r\n { id: 'Age1', numeric: false, disablePadding: true, label: 'Age < 35', widthRatio: .047 },\r\n { id: 'Age2', numeric: false, disablePadding: true, label: 'Age 35 - 55', widthRatio: .047 },\r\n { id: 'Age3', numeric: false, disablePadding: true, label: 'Age > 55', widthRatio: .047 },\r\n { id: 'TotalMale', numeric: false, disablePadding: true, label: 'Total Male', widthRatio: .047 },\r\n { id: 'TotalFemale', numeric: false, disablePadding: true, label: 'Total Female', widthRatio: .047 },\r\n { id: 'TotalDisabled', numeric: false, disablePadding: true, label: 'Total Disabled', widthRatio: .047 }\r\n];\r\n\r\nconst useStyles = theme => ({\r\n appBar: {\r\n position: 'relative',\r\n },\r\n title: {\r\n flex: 1,\r\n color: 'white',\r\n },\r\n table: {\r\n minWidth: 700,\r\n },\r\n});\r\n\r\nclass WSPATRVerificationMain extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n objectProps: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.object)) ? this.props.location.state.object : null,\r\n formObject: null,\r\n lookupArray: null,\r\n lookupVArray: null,\r\n lookupDArray: null,\r\n FinancialYear: '',\r\n OrganisationName: '',\r\n Status: '',\r\n model: {\r\n Name: \"\",\r\n },\r\n title: \"\",\r\n id: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.WSPATRID)) ? this.props.location.state.WSPATRID : null,\r\n VerificationPermission: \"\",\r\n searchParameters: [{ Name: \"WSPATRID\", Value: this.props.location.state.WSPATRID }, { Name: \"WSPATRFormsID\", Value: 0 }],\r\n OpenDialog: false,\r\n formViewURL: \"\",\r\n formName: \"\",\r\n linkDialogOpen: false,\r\n fileName: null,\r\n fileSize: null,\r\n fileBase64: null,\r\n fileType: null,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n\r\n this.getForms(this.state.id)\r\n this.getlookup(this.state.id)\r\n this.CheckVerificationPermissions(this.state.id)\r\n }\r\n getForms(id) {\r\n let url = \"api/sims/WSPATRVerification/GetWSPATRVerification?Id=\" + this.state.id;\r\n utils.invokeUrl(url, (response) => {\r\n this.setState({\r\n formObject: response,\r\n FinancialYear: response.FinancialYear,\r\n OrganisationName: response.OrganisationName,\r\n SDLNumber: response.SDLNumber\r\n })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n getlookup(id) {\r\n let url = \"api/sims/WSPATRVerification/GetLookupList?listId=YesNo\";\r\n utils.invokeUrl(url, (response) => {\r\n this.setState({ lookupArray: response })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n\r\n let urlV = \"api/sims/WSPATRVerification/GetLookupListWSPATRVerificationStatus\";\r\n utils.invokeUrl(urlV, (response) => {\r\n this.setState({ lookupVArray: response })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n\r\n let urlD = \"api/sims/WSPATRVerification/GetLookupList?listId=WSPATREvaluationVerificationDeviation\";\r\n utils.invokeUrl(urlD, (response) => {\r\n this.setState({ lookupDArray: response })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n CheckVerificationPermissions(id) {\r\n let url = \"api/sims/WSPATRVerification/GetWSPATRVerificationPermissionCheck?WSPATRID=\" + this.state.id;\r\n utils.invokeUrl(url, (response) => {\r\n this.setState({\r\n VerificationPermission: response.Result\r\n })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n\r\n handleChecklistArrayCI = (event, index) => {\r\n const values = [...this.state.formObject.WSPATRVerificationChecklistDtoList];\r\n const indexObject = { ...values[index] };\r\n indexObject.ConfirmInformationYesNoID = { Id: event.target.value };\r\n values[index] = indexObject;\r\n const finalObject = { ...this.state.formObject, WSPATRVerificationChecklistDtoList: values }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleChecklistArrayIO = (event, index) => {\r\n const values = [...this.state.formObject.WSPATRVerificationChecklistDtoList];\r\n const indexObject = { ...values[index] };\r\n indexObject.InformationOutstandingYesNoID = { Id: event.target.value };\r\n values[index] = indexObject;\r\n const finalObject = { ...this.state.formObject, WSPATRVerificationChecklistDtoList: values }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleChecklistArrayC = (event, index) => {\r\n const values = [...this.state.formObject.WSPATRVerificationChecklistDtoList];\r\n const indexObject = { ...values[index] };\r\n indexObject.Comments = event.target.value;\r\n values[index] = indexObject;\r\n const finalObject = { ...this.state.formObject, WSPATRVerificationChecklistDtoList: values }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleChecklistArrayD = (event, index) => {\r\n const values = [...this.state.formObject.WSPATRVerificationChecklistDtoList];\r\n const indexObject = { ...values[index] };\r\n indexObject.DeviationID = { Id: event.target.value };\r\n values[index] = indexObject;\r\n const finalObject = { ...this.state.formObject, WSPATRVerificationChecklistDtoList: values }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleStatus = (event) => {\r\n const finalObject = { ...this.state.formObject, WSPATREvaluationVerificationStatusID: { Id: event.target.value } }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleComment = (event) => {\r\n const finalObject = { ...this.state.formObject, VerificationComment: event.target.value }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n SaveChecklist = () => {\r\n let url = \"api/sims/WSPATRVerification/UpdateVerificationChecklist\";\r\n utils.invokeUrl(url, (response) => {\r\n this.successCallback(response);\r\n },\r\n (response) => {\r\n this.error(response);\r\n },\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(this.state.formObject)\r\n }\r\n )\r\n }\r\n\r\n CheckStatus = () => {\r\n if (this.state.formObject.WSPATREvaluationVerificationStatusID.Id === \"4\" || this.state.formObject.WSPATREvaluationVerificationStatusID.Id === 4) {\r\n this.setState({ linkDialogOpen: true, message: \"\" })\r\n }\r\n else { this.SaveVerification(null) }\r\n\r\n }\r\n\r\n SaveVerification = (selection) => {\r\n\r\n let QueryReasonsList = \"\";\r\n if (selection !== null) {\r\n for (let i = 0; i < selection.length; i++) {\r\n if (i === 0) { QueryReasonsList += selection[i].Id; }\r\n else { QueryReasonsList += \",\" + selection[i].Id; }\r\n\r\n }\r\n }\r\n\r\n let SaveObject = { ...this.state.formObject, QueryReasons: QueryReasonsList };\r\n this.setState({ formObject: SaveObject });\r\n console.log(SaveObject);\r\n let url = \"api/sims/WSPATRVerification/UpdateFinalVerification\";\r\n utils.invokeUrl(url, (response) => {\r\n this.successCallback(response);\r\n },\r\n (response) => {\r\n this.error(response);\r\n },\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(SaveObject)\r\n }\r\n )\r\n }\r\n\r\n postLinkHandler(isCancel, linked) {\r\n if (linked === true) {\r\n this.setState({\r\n linkDialogOpen: false,\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters))\r\n });\r\n }\r\n else if (isCancel === true) {\r\n this.setState({\r\n linkDialogOpen: false\r\n })\r\n }\r\n }\r\n\r\n successCallback(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n error(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n\r\n close() {\r\n this.props.history.push({\r\n pathname: './WSPATRVerification'\r\n });\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"save\" === buttonId) {\r\n //this.save();\r\n } else {\r\n this.close();\r\n }\r\n }\r\n\r\n buttonSubmitClickHandler() {\r\n this.submit();\r\n }\r\n\r\n FileDownload(id, DocumentType) {\r\n utils.invokeUrl(\"api/sims/WSPATRVerification/DownloadWSPATRDocument?DocumentID=\" + id, (response) => {\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n }, (e) => {\r\n this.setState({ messsageAlert: utils.SYSTEM_ERROR_MESSAGE, messageStyle: \"outlinedError\" });\r\n }\r\n );\r\n };\r\n\r\n FileDeviationDownload() {\r\n utils.invokeUrl(\"api/sims/WSPATRVerification/DownloadWSPATRDeviationDocument?WSPATRID=\" + this.state.id, (response) => {\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n }, (e) => {\r\n this.setState({ messsageAlert: utils.SYSTEM_ERROR_MESSAGE, messageStyle: \"outlinedError\" });\r\n }\r\n );\r\n }; \r\n\r\n OpenForm(id, formUrl, fName) {\r\n console.log(formUrl);\r\n let newsearchParameters = [...this.state.searchParameters];\r\n let temp_element = { ...newsearchParameters[1] };\r\n temp_element.Value = id\r\n newsearchParameters[1] = temp_element;\r\n\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(newsearchParameters)),\r\n OpenDialog: true,\r\n formViewURL: formUrl,\r\n formName: fName\r\n });\r\n }\r\n\r\n CloseForm = () => {\r\n this.setState({\r\n OpenDialog: false,\r\n formViewURL: \"\",\r\n formName: \"\"\r\n });\r\n };\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n onUploadHandler = (index, data) => {\r\n if (data) {\r\n this.setState({\r\n fileName: data.name,\r\n fileSize: data.size,\r\n fileBase64: data.base64,\r\n fileType: data.type\r\n });\r\n\r\n const values = [...this.state.formObject.WSPATRVerificationChecklistDtoList];\r\n const indexObject = { ...values[index] };\r\n\r\n indexObject.Document = {};\r\n indexObject.Document.Name = data.name;\r\n indexObject.Document.size = data.size;\r\n indexObject.Document.type = data.type;\r\n indexObject.Document.base64 = data.base64;\r\n\r\n values[index] = indexObject;\r\n const finalObject = { ...this.state.formObject, WSPATRVerificationChecklistDtoList: values }\r\n this.setState({ formObject: finalObject });\r\n }\r\n }\r\n\r\n render() {\r\n\r\n const { classes } = this.props;\r\n const tablerows = !utils.isNull(this.state.formObject) ? this.state.formObject.WSPATRVerificationChecklistDtoList.map((item, index) => (\r\n item.LinkInformation.split(\"|\")[0] !== \"Calculation\" ?\r\n \r\n \r\n {item.Number}\r\n \r\n {item.CheckList}\r\n \r\n this.handleChecklistArrayCI(values, index)}>\r\n \r\n {this.state.lookupArray.map((lookupitem, index) => (\r\n\r\n \r\n\r\n ))}\r\n \r\n \r\n \r\n this.handleChecklistArrayIO(values, index)} >\r\n \r\n {this.state.lookupArray.map((lookupitem, index) => (\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {item.LinkInformation.split(\"|\")[0] !== \"Document\" && item.LinkInformation.split(\"|\")[0] !== \"Form\" ? null :\r\n item.LinkInformation.split(\"|\")[0] === \"Document\" ?\r\n this.FileDownload(item.LinkInformation.split(\"|\")[1])} >\r\n :\r\n this.OpenForm(item.LinkInformation.split(\"|\")[1], item.DataURL, item.CheckList)} >\r\n }\r\n \r\n \r\n :\r\n \r\n \r\n \r\n {item.Number}\r\n \r\n {item.CheckList}\r\n \r\n {item.LinkInformation.split(\"|\")[2]}\r\n \r\n \r\n {item.LinkInformation.split(\"|\")[3]}\r\n \r\n \r\n \r\n \r\n \r\n {item.LinkInformation.split(\"|\")[1]}\r\n \r\n \r\n {item.Calculation < 50 ?\r\n \r\n \r\n {item.Number + 1}\r\n \r\n Deviation\r\n \r\n this.handleChecklistArrayD(values, index)} >\r\n \r\n {this.state.lookupDArray.map((lookupitem, index) => (\r\n \r\n ))}\r\n \r\n \r\n Upload\r\n \r\n {this.state.VerificationPermission === \"ViewOnly\" ? item.OriginalFileName\r\n :\r\n \r\n }\r\n \r\n \r\n {item.OriginalFileName !== \"\" ?\r\n this.FileDeviationDownload()} >\r\n :\r\n null\r\n }\r\n \r\n \r\n : null\r\n }\r\n \r\n ))\r\n :\r\n null;\r\n\r\n\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n #\r\n Checklist\r\n Please check and confirm that the information has been completed by the organisation Y/N?\r\n Information Submitted (Y/N)\r\n Comments\r\n Links\r\n \r\n \r\n \r\n {tablerows}\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Verification Status
\r\n | \r\n \r\n this.handleStatus(values)}>\r\n \r\n {!utils.isNull(this.state.lookupVArray) ? this.state.lookupVArray.map((lookupVitem, index) => (\r\n\r\n \r\n\r\n )) : null}\r\n \r\n | \r\n \r\n \r\n \r\n Verification Comment
\r\n | \r\n \r\n \r\n | \r\n \r\n \r\n \r\n Verifier
\r\n | \r\n \r\n\r\n \r\n | \r\n \r\n \r\n \r\n Verification Date
\r\n | \r\n \r\n\r\n \r\n | \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n\r\n \r\n\r\n\r\n\r\n this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle=\"Query Reasons\"\r\n linkName={\"QueryReasons\"} linkHandler={(selection) => this.SaveVerification(selection)}\r\n selectionId={this.state.id}\r\n buttonName=\"Save\"\r\n >\r\n \r\n \r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withStyles(useStyles())(withMenuPermission(WSPATRVerificationMain)));","import React from 'react';\r\nimport { EntityForm } from '../../widgets/SearchForm';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nexport default function WSPATRVerificationSearchForm(props) {\r\n const classes = useStyles();\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport WSPATREvaluationSearchForm from './WSPATREvaluationSearchForm';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\n\r\nclass WSPATREvaluationSearch extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'view', label: '', tooltip: 'View Evaluation', icon: 'ViewIcon', disabled: true },\r\n { id: 'bulk', label: 'Recommend for Approval', tooltip: '', disabled: true },\r\n ]\r\n }\r\n ]\r\n }\r\n\r\n this.searchParameters = \r\n [\r\n { Name: \"SDLNumber\", Value: \"\" },\r\n { Name: \"FinancialYearID\", Value: \"\" },\r\n\r\n ]\r\n\r\n this.headCells = \r\n [\r\n { id: 'SDLNumber', numeric: false, disablePadding: true, label: 'SDL Number' },\r\n { id: 'CompanyName', numeric: false, disablePadding: true, label: 'Company Name' },\r\n { id: 'FinancialYear', numeric: false, disablePadding: true, label: 'Financial Year' },\r\n { id: 'VerificationDate', numeric: false, disablePadding: true, label: 'Verification Date' },\r\n { id: 'VerifiedBy', numeric: false, disablePadding: true, label: 'Verified By' },\r\n { id: 'VerificationStatus', numeric: false, disablePadding: true, label: 'Verification Status' },\r\n { id: 'EvaluationStatus', numeric: false, disablePadding: true, label: 'Evaluation Status' },\r\n\r\n ]\r\n\r\n let model = \r\n {\r\n SDLNumber: \"\",\r\n FinancialYearID: \"\"\r\n }\r\n\r\n this.state = {\r\n model: model,\r\n keyUpSwitch: false,\r\n selectedWSPATR: null,\r\n selectedWSPATRs: null,\r\n showBulk: false\r\n }\r\n }\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n handleSelection = (selection) => {\r\n if (selection.length > 1) {\r\n this.setState({ selectedWSPATR: null, selectedWSPATRs: selection });\r\n toolbarRef.current.setButtonDisabled(\"bulk\", false);\r\n toolbarRef.current.setButtonDisabled(\"view\", true);\r\n }\r\n else if (selection.length === 1) {\r\n this.setState({ selectedWSPATR: selection[0].Id, selectedWSPATRs: null });\r\n toolbarRef.current.setButtonDisabled(\"bulk\", true);\r\n toolbarRef.current.setButtonDisabled(\"view\", false);\r\n }\r\n else {\r\n this.setState({ selectedWSPATR: null, selectedWSPATRs: null });\r\n toolbarRef.current.setButtonDisabled(\"bulk\", true);\r\n toolbarRef.current.setButtonDisabled(\"view\", true);\r\n }\r\n\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n\r\n if (\"bulk\" === buttonId) {\r\n if (this.state.selectedWSPATRs !== null)\r\n {\r\n let WSPATRList = \"\";\r\n const wspatrs = this.state.selectedWSPATRs;\r\n \r\n for (let i = 0; i < wspatrs.length; i++) {\r\n if (i === 0) { WSPATRList += wspatrs[i].Id; }\r\n else { WSPATRList += \",\" + wspatrs[i].Id; }\r\n\r\n }\r\n const url = `api/sims/WSPATREvaluation/UpdateEvaluationRecommend`;\r\n\r\n utils.invokeUrl(url, (response) => {\r\n this.successCallback(response);\r\n this.setState(\r\n {\r\n selectedWSPATRs: null,\r\n clearGrid: true,\r\n FinancialYearID: \"0\",\r\n });\r\n toolbarRef.current.setButtonDisabled(\"bulk\", true);\r\n toolbarRef.current.setButtonDisabled(\"view\", true);\r\n },\r\n (response) => {\r\n this.error(response);\r\n },\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(WSPATRList)\r\n }\r\n );\r\n }\r\n }\r\n else if (\"view\" === buttonId) {\r\n this.props.history.push({\r\n pathname: \"/WSPATREvaluationMain\",\r\n state: {\r\n WSPATRID: this.state.selectedWSPATR\r\n }\r\n })\r\n }\r\n }\r\n successCallback(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n error(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n\r\n onGridCleared = () => {\r\n this.setState({ clearGrid: false });\r\n }\r\n\r\n render() {\r\n return (\r\n\r\n \r\n \r\n
\r\n { this.handleSelection(selection) }}\r\n clearGrid={this.state.clearGrid}\r\n onGridCleared={this.onGridCleared}\r\n toolbarRef={toolbarRef}\r\n >\r\n { this.onkeyup(e) }}\r\n valueChangeHandler={(values) => {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(values)) {\r\n this.setState({ model: values });\r\n }\r\n }}\r\n />\r\n \r\n\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(WSPATREvaluationSearch)\r\n);\r\n\r\n\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport { ViewContainer } from \"../../View.jsx\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport Button from '@material-ui/core/Button';\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport { Link } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport Item from \"antd/lib/list/Item\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport './Style.css'\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport CloudDownloadIcon from '@material-ui/icons/CloudDownload';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport WebIcon from '@material-ui/icons/Web';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport { Typography } from \"antd\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport Slide from '@material-ui/core/Slide';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport Toolbar from '@material-ui/core/Toolbar';\r\nimport LinkDialog from \"../../etqa/LinkDialog\";\r\nimport LetterReasonDialog from \"./Controls/LetterReasonDialog.jsx\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst Transition = React.forwardRef(function Transition(props, ref) {\r\n return ;\r\n});\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'Back to WSP/ATR Evaluation Dashboard', tooltip: '' }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#01579B',\r\n color: theme.palette.common.white,\r\n border: '1px solid white',\r\n },\r\n body: {\r\n fontSize: 11,\r\n },\r\n}))(TableCell);\r\n\r\nconst StyledTableTextCell = withStyles((theme) => ({\r\n body: {\r\n fontSize: 14,\r\n fontWeight: 500\r\n },\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n height: theme.palette.action.main\r\n },\r\n },\r\n}))(TableRow);\r\n\r\nconst headCells = [\r\n { id: 'Occupation', numeric: false, disablePadding: true, label: 'Occupation', widthRatio: .154 },\r\n { id: 'AfricanMale', numeric: false, disablePadding: true, label: 'African Male', widthRatio: .047 },\r\n { id: 'AfricanFemale', numeric: false, disablePadding: true, label: 'African Female', widthRatio: .047 },\r\n { id: 'AfricanDisabled', numeric: false, disablePadding: true, label: 'African Disabled', widthRatio: .047 },\r\n { id: 'ColouredMale', numeric: false, disablePadding: true, label: 'Coloured Male', widthRatio: .047 },\r\n { id: 'ColouredFemale', numeric: false, disablePadding: true, label: 'Coloured Female', widthRatio: .047 },\r\n { id: 'ColouredDisabled', numeric: false, disablePadding: true, label: 'Coloured Disabled', widthRatio: .047 },\r\n { id: 'IndianMale', numeric: false, disablePadding: true, label: 'Indian Male', widthRatio: .047 },\r\n { id: 'IndianFemale', numeric: false, disablePadding: true, label: 'Indian Female', widthRatio: .047 },\r\n { id: 'IndianDisabled', numeric: false, disablePadding: true, label: 'Indian Disabled', widthRatio: .047 },\r\n { id: 'WhiteMale', numeric: false, disablePadding: true, label: 'White Male', widthRatio: .047 },\r\n { id: 'WhiteFemale', numeric: false, disablePadding: true, label: 'White Female', widthRatio: .047 },\r\n { id: 'WhiteDisabled', numeric: false, disablePadding: true, label: 'White Disabled', widthRatio: .047 },\r\n { id: 'Age1', numeric: false, disablePadding: true, label: 'Age < 35', widthRatio: .047 },\r\n { id: 'Age2', numeric: false, disablePadding: true, label: 'Age 35 - 55', widthRatio: .047 },\r\n { id: 'Age3', numeric: false, disablePadding: true, label: 'Age > 55', widthRatio: .047 },\r\n { id: 'TotalMale', numeric: false, disablePadding: true, label: 'Total Male', widthRatio: .047 },\r\n { id: 'TotalFemale', numeric: false, disablePadding: true, label: 'Total Female', widthRatio: .047 },\r\n { id: 'TotalDisabled', numeric: false, disablePadding: true, label: 'Total Disabled', widthRatio: .047 }\r\n];\r\n\r\nconst useStyles = theme => ({\r\n appBar: {\r\n position: 'relative',\r\n },\r\n title: {\r\n flex: 1,\r\n color: 'white',\r\n },\r\n table: {\r\n minWidth: 700,\r\n },\r\n});\r\n\r\nclass WSPATREvaluationMain extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n objectProps: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.object)) ? this.props.location.state.object : null,\r\n formObject: null,\r\n lookupArray: null,\r\n lookupVArray: null,\r\n FinancialYear: '',\r\n OrganisationName: '',\r\n Status: '',\r\n model: {\r\n Name: \"\",\r\n },\r\n title: \"\",\r\n id: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.WSPATRID)) ? this.props.location.state.WSPATRID : null,\r\n EvaluationPermission: \"\",\r\n searchParameters: [{ Name: \"WSPATRID\", Value: this.props.location.state.WSPATRID }, { Name: \"WSPATRFormsID\", Value: 0 }],\r\n OpenDialog: false,\r\n formViewURL: \"\",\r\n formName: \"\",\r\n linkDialogOpen: false,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n\r\n this.getForms(this.state.id)\r\n this.getlookup(this.state.id)\r\n this.CheckEvaluationPermissions(this.state.id)\r\n }\r\n getForms(id) {\r\n let url = \"api/sims/WSPATREvaluation/GetWSPATREvaluation?Id=\" + this.state.id;\r\n utils.invokeUrl(url, (response) => {\r\n this.setState({\r\n formObject: response,\r\n FinancialYear: response.FinancialYear,\r\n OrganisationName: response.OrganisationName,\r\n SDLNumber: response.SDLNumber\r\n })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n getlookup(id) {\r\n let url = \"api/sims/WSPATREvaluation/GetLookupList?listId=YesNo\";\r\n utils.invokeUrl(url, (response) => {\r\n this.setState({ lookupArray: response })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n\r\n let urlV = \"api/sims/WSPATREvaluation/GetLookupListWSPATREvaluationStatus\";\r\n utils.invokeUrl(urlV, (response) => {\r\n this.setState({ lookupVArray: response })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n CheckEvaluationPermissions(id) {\r\n let url = \"api/sims/WSPATREvaluation/GetWSPATREvaluationPermissionCheck?WSPATRID=\" + this.state.id;\r\n utils.invokeUrl(url, (response) => {\r\n this.setState({\r\n EvaluationPermission: response.Result\r\n })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n\r\n handleChecklistArrayCI = (event, index) => {\r\n const values = [...this.state.formObject.WSPATREvaluationChecklist];\r\n const indexObject = { ...values[index] };\r\n indexObject.ConfirmInformationYesNoID = { Id: event.target.value };\r\n values[index] = indexObject;\r\n const finalObject = { ...this.state.formObject, WSPATREvaluationChecklist: values }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleChecklistArrayIO = (event, index) => {\r\n const values = [...this.state.formObject.WSPATREvaluationChecklist];\r\n const indexObject = { ...values[index] };\r\n indexObject.InformationOutstandingYesNoID = { Id: event.target.value };\r\n values[index] = indexObject;\r\n const finalObject = { ...this.state.formObject, WSPATREvaluationChecklist: values }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleChecklistArrayC = (event, index) => {\r\n const values = [...this.state.formObject.WSPATREvaluationChecklist];\r\n const indexObject = { ...values[index] };\r\n indexObject.Comments = event.target.value;\r\n values[index] = indexObject;\r\n const finalObject = { ...this.state.formObject, WSPATREvaluationChecklist: values }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleStatus = (event) => {\r\n const finalObject = { ...this.state.formObject, WSPATREvaluationStatusID: { Id: event.target.value } }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleComment = (event) => {\r\n const finalObject = { ...this.state.formObject, EvaluationComment: event.target.value }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n SaveChecklist = () => {\r\n let url = \"api/sims/WSPATREvaluation/UpdateEvaluationChecklist\";\r\n utils.invokeUrl(url, (response) => {\r\n this.successCallback(response);\r\n },\r\n (response) => {\r\n this.error(response);\r\n },\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(this.state.formObject)\r\n }\r\n )\r\n }\r\n\r\n CheckStatus = () => {\r\n if (this.state.formObject.WSPATREvaluationStatusID.Id === \"4\" || this.state.formObject.WSPATREvaluationStatusID.Id === 4) {\r\n this.setState({ linkDialogOpen: true, message: \"\" })\r\n }\r\n else { this.SaveEvaluation(null) }\r\n\r\n }\r\n\r\n SaveEvaluation = (selection) => {\r\n\r\n let RejectionReasonsList = \"\";\r\n if (selection !== null) {\r\n for (let i = 0; i < selection.length; i++) {\r\n if (i === 0) { RejectionReasonsList += selection[i].Id; }\r\n else { RejectionReasonsList += \",\" + selection[i].Id; }\r\n\r\n }\r\n }\r\n\r\n let SaveObject = { ...this.state.formObject, RejectionReasons: RejectionReasonsList };\r\n this.setState({ formObject: SaveObject });\r\n console.log(SaveObject);\r\n let url = \"api/sims/WSPATREvaluation/UpdateFinalEvaluation\";\r\n utils.invokeUrl(url, (response) => {\r\n this.successCallback(response);\r\n },\r\n (response) => {\r\n this.error(response);\r\n },\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(SaveObject)\r\n }\r\n )\r\n }\r\n\r\n postLinkHandler(isCancel, linked) {\r\n if (linked === true) {\r\n\r\n this.setState({\r\n linkDialogOpen: false,\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters))\r\n });\r\n }\r\n else if (isCancel === true) {\r\n this.setState({\r\n linkDialogOpen: false\r\n })\r\n }\r\n }\r\n\r\n successCallback(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n error(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n\r\n close() {\r\n this.props.history.push({\r\n pathname: './WSPATREvaluation'\r\n });\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"save\" === buttonId) {\r\n //this.save();\r\n } else {\r\n this.close();\r\n }\r\n }\r\n\r\n buttonSubmitClickHandler() {\r\n this.submit();\r\n }\r\n\r\n FileDownload(id, DocumentType) {\r\n utils.invokeUrl(\"api/sims/WSPATREvaluation/DownloadWSPATRDocument?DocumentID=\" + id, (response) => {\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n }, (e) => {\r\n this.setState({ messsageAlert: utils.SYSTEM_ERROR_MESSAGE, messageStyle: \"outlinedError\" });\r\n }\r\n );\r\n };\r\n\r\n OpenForm(id, formUrl, fName) {\r\n console.log(formUrl);\r\n let newsearchParameters = [...this.state.searchParameters];\r\n let temp_element = { ...newsearchParameters[1] };\r\n temp_element.Value = id\r\n newsearchParameters[1] = temp_element;\r\n\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(newsearchParameters)),\r\n OpenDialog: true,\r\n formViewURL: formUrl,\r\n formName: fName\r\n });\r\n }\r\n\r\n CloseForm = () => {\r\n this.setState({\r\n OpenDialog: false,\r\n formViewURL: \"\",\r\n formName: \"\"\r\n });\r\n };\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n render() {\r\n\r\n const { classes } = this.props;\r\n const tablerows = !utils.isNull(this.state.formObject) ? this.state.formObject.WSPATREvaluationChecklist.map((item, index) => (\r\n item.LinkInformation.split(\"|\")[0] !== \"Calculation\" ?\r\n \r\n \r\n {item.Number}\r\n \r\n {item.CheckList}\r\n \r\n this.handleChecklistArrayCI(values, index)}>\r\n \r\n {this.state.lookupArray.map((lookupitem, index) => (\r\n\r\n \r\n\r\n ))}\r\n \r\n \r\n \r\n this.handleChecklistArrayIO(values, index)} >\r\n \r\n {this.state.lookupArray.map((lookupitem, index) => (\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {item.LinkInformation.split(\"|\")[0] !== \"Document\" && item.LinkInformation.split(\"|\")[0] !== \"Form\" ? null :\r\n item.LinkInformation.split(\"|\")[0] === \"Document\" ?\r\n this.FileDownload(item.LinkInformation.split(\"|\")[1])} >\r\n :\r\n this.OpenForm(item.LinkInformation.split(\"|\")[1], item.DataURL, item.CheckList)} >\r\n }\r\n \r\n \r\n :\r\n \r\n \r\n {item.Number}\r\n \r\n {item.CheckList}\r\n \r\n {item.LinkInformation.split(\"|\")[2]}\r\n \r\n \r\n {item.LinkInformation.split(\"|\")[3]}\r\n \r\n \r\n \r\n \r\n \r\n {item.LinkInformation.split(\"|\")[1]}\r\n \r\n \r\n ))\r\n :\r\n null;\r\n\r\n\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)} enabled={true} config={toolbarConfig} />\r\n | \r\n \r\n WSP/ATR Evaluation
\r\n {this.state.FinancialYear}\r\n | \r\n \r\n {this.state.OrganisationName} - {this.state.SDLNumber} \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n #\r\n Checklist\r\n Please check and confirm that the information has been completed by the organisation Y/N?\r\n Information Submitted (Y/N)\r\n Comments\r\n Links\r\n \r\n \r\n \r\n {tablerows}\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Evaluation Status
\r\n | \r\n \r\n this.handleStatus(values)}>\r\n \r\n {!utils.isNull(this.state.lookupVArray) ? this.state.lookupVArray.map((lookupVitem, index) => (\r\n\r\n \r\n\r\n )) : null}\r\n \r\n | \r\n \r\n \r\n \r\n Verification Comment
\r\n | \r\n \r\n \r\n | \r\n \r\n \r\n \r\n Evaluation Comment
\r\n | \r\n \r\n \r\n | \r\n \r\n \r\n \r\n Evaluator
\r\n | \r\n \r\n\r\n \r\n | \r\n \r\n \r\n \r\n Evaluation Date
\r\n | \r\n \r\n\r\n \r\n | \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n\r\n \r\n\r\n\r\n\r\n this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle=\"Rejection Reasons\"\r\n linkName={\"RejectionReasons\"} linkHandler={(selection) => this.SaveEvaluation(selection)}\r\n selectionId={this.state.id}\r\n buttonName=\"Save\"\r\n >\r\n \r\n \r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withStyles(useStyles())(withMenuPermission(WSPATREvaluationMain)));","import React from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel, { FormTabContainer } from '../../widgets/TabPanel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport Button from '@material-ui/core/Button';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\n\r\n\r\nfunction createData(number, checkList, confirmation, submited, comments) {\r\n return { number, checkList, confirmation, submited, comments };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\nconst useStyles = makeStyles({\r\n root: {\r\n // width: '90%',\r\n margin: 0,\r\n '&:hover': {\r\n backgroundColor: 'transparent',\r\n },\r\n },\r\n container: {\r\n maxHeight: 600,\r\n width: '100%'\r\n },\r\n bullet: {\r\n display: 'inline-block',\r\n margin: '0 2px',\r\n transform: 'scale(0.8)',\r\n },\r\n title: {\r\n fontSize: 10,\r\n },\r\n pos: {\r\n marginBottom: 12,\r\n },\r\n icon: {\r\n borderRadius: '50%',\r\n width: 12,\r\n height: 12,\r\n boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',\r\n backgroundColor: '#f5f8fa',\r\n\r\n 'input:hover ~ &': {\r\n backgroundColor: '#ebf1f5',\r\n },\r\n 'input:disabled ~ &': {\r\n boxShadow: 'none',\r\n background: 'rgba(206,217,224,.5)',\r\n },\r\n },\r\n table: {\r\n minWidth: 700,\r\n width: \"100%\"\r\n },\r\n checkedIcon: {\r\n backgroundColor: '#01579B',\r\n '&:before': {\r\n display: 'block',\r\n width: 16,\r\n height: 16,\r\n content: '\"\"',\r\n },\r\n 'input:hover ~ &': {\r\n backgroundColor: '#01579B',\r\n },\r\n },\r\n});\r\n\r\n\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#01579B',\r\n color: theme.palette.common.white,\r\n },\r\n body: {\r\n fontSize: 10,\r\n\r\n },\r\n}))(TableCell);\r\n\r\nconst StyledTableTextCell = withStyles((theme) => ({\r\n body: {\r\n fontSize: 14,\r\n fontWeight: 400\r\n },\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n height: theme.palette.action.main\r\n },\r\n },\r\n}))(TableRow);\r\n\r\nconst CommentInput = (props) => {\r\n return (\r\n \r\n props.handleComment(e)}\r\n multiline\r\n rows={1}\r\n rowsMax={3}\r\n />\r\n \r\n );\r\n}\r\n\r\n\r\n\r\nconst ApprovalForm = React.forwardRef((props, ref) => {\r\n const classes = useStyles();\r\n\r\n const [proofOfBankingDetailsComment, setproofOfBankingDetailsComment] = React.useState(\"\")\r\n const [workplaceSkillsPlanComment, setworkplaceSkillsPlanComment] = React.useState(\"\")\r\n const [plannedPivotalTrainingComment, setplannedPivotalTrainingComment] = React.useState(\"\")\r\n const [plannedBeneficiariesofTrainingComment, setplannedBeneficiariesofTrainingComment] = React.useState(\"\")\r\n const [annualTrainingReportComment, setannualTrainingReportComment] = React.useState(\"\")\r\n const [actualPivotalTrainingComment, setactualPivotalTrainingComment] = React.useState(\"\")\r\n const [actualBeneficiariesofTrainingComment, setactualBeneficiariesofTrainingComment] = React.useState(\"\")\r\n const [proofofTrainingUploadedComment, setproofofTrainingUploadedComment] = React.useState(\"\")\r\n const [authorisationPageUploadedComment, setauthorisationPageUploadedComment] = React.useState(\"\")\r\n const [trainingImplementedComment, settrainingImplementedComment] = React.useState(\"\")\r\n const [verificationComment, setVerificationComment] = React.useState(\"\")\r\n\r\n\r\n\r\n const handleComment = (event) => {\r\n if (event.target.value) {\r\n setproofOfBankingDetailsComment(event.target.value)\r\n }\r\n }\r\n const handleComment1 = (event) => {\r\n if (event.target.value) {\r\n setworkplaceSkillsPlanComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleComment2 = (event) => {\r\n if (event.target.value) {\r\n setplannedPivotalTrainingComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleComment3 = (event) => {\r\n if (event.target.value) {\r\n setplannedBeneficiariesofTrainingComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleComment4 = (event) => {\r\n if (event.target.value) {\r\n setannualTrainingReportComment(event.target.value)\r\n }\r\n }\r\n const handleComment5 = (event) => {\r\n if (event.target.value) {\r\n setactualPivotalTrainingComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleComment6 = (event) => {\r\n if (event.target.value) {\r\n setactualBeneficiariesofTrainingComment(event.target.value)\r\n alert(\"6\")\r\n }\r\n }\r\n\r\n const handleComment7 = (event) => {\r\n if (event.target.value) {\r\n setproofofTrainingUploadedComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleComment8 = (event) => {\r\n if (event.target.value) {\r\n setauthorisationPageUploadedComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleComment9 = (event) => {\r\n if (event.target.value) {\r\n settrainingImplementedComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleVerificationComment = (event) => {\r\n setVerificationComment(event.target.value)\r\n }\r\n\r\n\r\n\r\n\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\nexport default ApprovalForm;","import React, { useState } from 'react';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { ViewContainer } from \"../../View.jsx\";\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport ApprovalsForm from './ApprovalDetailsForm';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\n\r\n\r\nconst Approval = (props) => {\r\n const utils = new ViewUtils();\r\n const approvalRef = React.createRef();\r\n const [message, setMessage] = useState(\"\")\r\n const [messageStyle, setMessageStyle] = useState(\"\")\r\n\r\n const handleFormValueChange = (values) => {\r\n if (values != null) {\r\n // setFinancialYear(values.FinancialYearID)\r\n }\r\n }\r\n\r\n const toolbarConfig = {\r\n items: [\r\n\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close' }\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'save', label: 'Save', tooltip: 'Save Approval', icon: 'SaveIcon' },\r\n \r\n ]\r\n }\r\n\r\n ]\r\n };\r\n\r\n\r\n // save() {\r\n // utils.saveForm(this, formRef, `api/sims/DGOrganisation/updateDGOrganisation`, this.successCallback, null, null, '/DGOrganisationSearch');\r\n // }\r\n\r\n const handleToolbarButtonClick = (buttonId) => {\r\n if (buttonId === \"save\") {\r\n // this.setState({ addDialogOpen: true });\r\n } else if (buttonId === \"close\") {\r\n props.history.push({\r\n pathname: \"/assessment\",\r\n state: { selection: props.location.state.organisationID }\r\n })\r\n }\r\n }\r\n\r\n return (\r\n \r\n\r\n\r\n \r\n \r\n\r\n \r\n \r\n | \r\n handleToolbarButtonClick(buttonId)}\r\n // buttonMenuClickHandler={(menu) => handleToolbarButtonMenuClick(menu)}\r\n enabled={true}\r\n config={toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n handleFormValueChange(values)}\r\n />\r\n | \r\n
\r\n \r\n
\r\n \r\n\r\n );\r\n}\r\n\r\nexport default Approval;","import React from 'react';\r\nimport { EntityForm } from '../../widgets/SearchForm';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nexport default function WSPATRApprovalSearchForm(props) {\r\n const classes = useStyles();\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}","import React from 'react';\r\nimport { EntityForm } from '../../widgets/SearchForm';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\nimport DocumentUpload from '../../widgets/DocumentUpload';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nconst WSPATRApprovalBulkForm = React.forwardRef((props, ref) =>{\r\n const classes = useStyles();\r\n\r\n const [filename, setFilename] = React.useState(\"\");\r\n const [size, setSize] = React.useState(null);\r\n const [base64, setBase64] = React.useState(null);\r\n const [type, setType] = React.useState(null);\r\n\r\n const onUploadHandler = (data) => {\r\n if (data) {\r\n setFilename(data.name);\r\n setSize(data.size);\r\n setBase64(data.base64);\r\n setType(data.type);\r\n }\r\n }\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\nexport default WSPATRApprovalBulkForm;","import React from 'react';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport Button from '@material-ui/core/Button';\r\nimport WSPATRApprovalBulkForm from './WSPATRApprovalBulkForm';\r\nimport DocumentUpload from '../../widgets/DocumentUpload';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport default function WSPATRApprovalBulkDialog(props) {\r\n\r\n const [open, setOpen] = React.useState(props.open);\r\n const [AddDiasbaled, setAddDiasbaled] = React.useState(true);\r\n const [Message, setMessage] = React.useState(\"\");\r\n const [MessageStyle, setMessageStyle] = React.useState(\"\");\r\n const formRef = React.createRef();\r\n const [filename, setFilename] = React.useState(\"\");\r\n const [size, setSize] = React.useState(null);\r\n const [base64, setBase64] = React.useState(null);\r\n const [type, setType] = React.useState(null);\r\n\r\n const handleClose = (cancel, save, response) => {\r\n setFilename(\"\");\r\n setOpen(false);\r\n props.closeHandler(cancel, save, response);\r\n };\r\n\r\n const cancel = () => {\r\n handleClose(true, false);\r\n };\r\n\r\n const add = () => {\r\n let formValue = formRef.current.getValue();\r\n\r\n let WSTATRIDList = \"\";\r\n let selection = props.selectedWSPATRs;\r\n if (selection !== null) {\r\n for (let i = 0; i < selection.length; i++) {\r\n if (i === 0) { WSTATRIDList += selection[i].Id; }\r\n else { WSTATRIDList += \",\" + selection[i].Id; }\r\n\r\n }\r\n }\r\n\r\n formValue.Document = {};\r\n formValue.Document.Name = filename;\r\n formValue.Document.size = size;\r\n formValue.Document.type = type;\r\n formValue.Document.base64 = base64;\r\n formValue.WSPATRIDs = WSTATRIDList;\r\n\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n\r\n const url = `api/sims/WSPATRApproval/UpdateBulkApproval`;\r\n if (formValue.BoardApprovalStatusID.Id === \"4\" || formValue.BoardApprovalStatusID.Id === 4) { url = \"api/sims/WSPATRApproval/UpdateBulkRejection\" }\r\n\r\n utils.invokeUrl(url, (response) => {\r\n handleClose(false, true, response);\r\n }, () => { handleClose(false, false); },\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(formValue)\r\n }\r\n );\r\n }\r\n }\r\n\r\n const onUploadHandler = (data) => {\r\n if (data) {\r\n setFilename(data.name);\r\n setSize(data.size);\r\n setBase64(data.base64);\r\n setType(data.type);\r\n setAddDiasbaled(false);\r\n }\r\n }\r\n\r\n React.useEffect(() => {\r\n setOpen(props.open);\r\n }, [props.open]);\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n #\r\n Checklist\r\n Please check and confirm that the information has been completed by the organisation Y/N?\r\n Information Submitted (Y/N)\r\n Comments\r\n Links\r\n \r\n \r\n \r\n {tablerows}\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Board Status
\r\n | \r\n \r\n this.handleStatus(values)}>\r\n \r\n {!utils.isNull(this.state.lookupVArray) ? this.state.lookupVArray.map((lookupVitem, index) => (\r\n\r\n \r\n\r\n )) : null}\r\n \r\n | \r\n \r\n \r\n \r\n Approver
\r\n | \r\n \r\n\r\n \r\n | \r\n \r\n \r\n \r\n Approval Date
\r\n | \r\n \r\n\r\n \r\n | \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n\r\n \r\n\r\n\r\n\r\n this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle=\"Rejection Reasons\"\r\n linkName={\"Rejection\"} linkHandler={(selection) => this.SaveVerification(selection)}\r\n selectionId={this.state.id}\r\n buttonName=\"Save\"\r\n >\r\n \r\n \r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withStyles(useStyles())(withMenuPermission(WSPATRApprovalMain)));","import React from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel, { FormTabContainer } from '../../widgets/TabPanel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport Button from '@material-ui/core/Button';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\n\r\n\r\nfunction createData(number, checkList, confirmation, submited, comments) {\r\n return { number, checkList, confirmation, submited, comments };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\nconst useStyles = makeStyles({\r\n root: {\r\n // width: '90%',\r\n margin: 0,\r\n '&:hover': {\r\n backgroundColor: 'transparent',\r\n },\r\n },\r\n container: {\r\n maxHeight: 600,\r\n width: '100%'\r\n },\r\n bullet: {\r\n display: 'inline-block',\r\n margin: '0 2px',\r\n transform: 'scale(0.8)',\r\n },\r\n title: {\r\n fontSize: 10,\r\n },\r\n pos: {\r\n marginBottom: 12,\r\n },\r\n icon: {\r\n borderRadius: '50%',\r\n width: 12,\r\n height: 12,\r\n boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',\r\n backgroundColor: '#f5f8fa',\r\n\r\n 'input:hover ~ &': {\r\n backgroundColor: '#ebf1f5',\r\n },\r\n 'input:disabled ~ &': {\r\n boxShadow: 'none',\r\n background: 'rgba(206,217,224,.5)',\r\n },\r\n },\r\n table: {\r\n minWidth: 700,\r\n width: \"100%\"\r\n },\r\n checkedIcon: {\r\n backgroundColor: '#01579B',\r\n '&:before': {\r\n display: 'block',\r\n width: 16,\r\n height: 16,\r\n content: '\"\"',\r\n },\r\n 'input:hover ~ &': {\r\n backgroundColor: '#01579B',\r\n },\r\n },\r\n});\r\n\r\n\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#01579B',\r\n color: theme.palette.common.white,\r\n },\r\n body: {\r\n fontSize: 10,\r\n\r\n },\r\n}))(TableCell);\r\n\r\nconst StyledTableTextCell = withStyles((theme) => ({\r\n body: {\r\n fontSize: 14,\r\n fontWeight: 400\r\n },\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n height: theme.palette.action.main\r\n },\r\n },\r\n}))(TableRow);\r\n\r\nconst CommentInput = (props) => {\r\n return (\r\n \r\n props.handleComment(e)}\r\n multiline\r\n rows={1}\r\n rowsMax={3}\r\n />\r\n \r\n );\r\n}\r\n\r\n\r\n\r\nconst VerificationForm = React.forwardRef((props, ref) => {\r\n const classes = useStyles();\r\n\r\n const [proofOfBankingDetailsComment, setproofOfBankingDetailsComment] = React.useState(\"\")\r\n const [workplaceSkillsPlanComment, setworkplaceSkillsPlanComment] = React.useState(\"\")\r\n const [plannedPivotalTrainingComment, setplannedPivotalTrainingComment] = React.useState(\"\")\r\n const [plannedBeneficiariesofTrainingComment, setplannedBeneficiariesofTrainingComment] = React.useState(\"\")\r\n const [annualTrainingReportComment, setannualTrainingReportComment] = React.useState(\"\")\r\n const [actualPivotalTrainingComment, setactualPivotalTrainingComment] = React.useState(\"\")\r\n const [actualBeneficiariesofTrainingComment, setactualBeneficiariesofTrainingComment] = React.useState(\"\")\r\n const [proofofTrainingUploadedComment, setproofofTrainingUploadedComment] = React.useState(\"\")\r\n const [authorisationPageUploadedComment, setauthorisationPageUploadedComment] = React.useState(\"\")\r\n const [trainingImplementedComment, settrainingImplementedComment] = React.useState(\"\")\r\n const [verificationComment, setVerificationComment] = React.useState(\"\")\r\n\r\n\r\n\r\n const handleComment = (event) => {\r\n if (event.target.value) {\r\n setproofOfBankingDetailsComment(event.target.value)\r\n }\r\n }\r\n const handleComment1 = (event) => {\r\n if (event.target.value) {\r\n setworkplaceSkillsPlanComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleComment2 = (event) => {\r\n if (event.target.value) {\r\n setplannedPivotalTrainingComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleComment3 = (event) => {\r\n if (event.target.value) {\r\n setplannedBeneficiariesofTrainingComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleComment4 = (event) => {\r\n if (event.target.value) {\r\n setannualTrainingReportComment(event.target.value)\r\n }\r\n }\r\n const handleComment5 = (event) => {\r\n if (event.target.value) {\r\n setactualPivotalTrainingComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleComment6 = (event) => {\r\n if (event.target.value) {\r\n setactualBeneficiariesofTrainingComment(event.target.value)\r\n alert(\"6\")\r\n }\r\n }\r\n\r\n const handleComment7 = (event) => {\r\n if (event.target.value) {\r\n setproofofTrainingUploadedComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleComment8 = (event) => {\r\n if (event.target.value) {\r\n setauthorisationPageUploadedComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleComment9 = (event) => {\r\n if (event.target.value) {\r\n settrainingImplementedComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleVerificationComment = (event) => {\r\n setVerificationComment(event.target.value)\r\n }\r\n\r\n\r\n\r\n\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\nexport default VerificationForm;","import React, {useEffect, useState} from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { ViewContainer } from \"../../View.jsx\";\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport VerificationForm from './VerificationForm';\r\n\r\n\r\n\r\nconst utils = new ViewUtils();\r\nconst Ref = React.createRef();\r\n \r\nconst Verification = (props) => {\r\n const [FinancialYear, setFinancialYear] = useState(null)\r\n\r\n\r\n const handleFormValueChange = (values) => {\r\n if (values != null){\r\n setFinancialYear(values.FinancialYearID)\r\n }\r\n }\r\n\r\n\r\n const toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: \"Close\", tooltip: \"Close\" },\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n\r\n const handleToolbarButtonClick = (buttonId) => {\r\n if (buttonId === \"view\") {\r\n // this.setState({ addDialogOpen: true });\r\n } else if (buttonId === \"close\") {\r\n props.history.push({\r\n pathname: \"/WspAtrEvaluation\",\r\n state: {selection: props.location.state.organisationID}\r\n })\r\n }\r\n }\r\n\r\n \r\n return (\r\n \r\n {/* */}\r\n \r\n\r\n \r\n \r\n | \r\n handleToolbarButtonClick(buttonId)}\r\n // buttonMenuClickHandler={(menu) => handleToolbarButtonMenuClick(menu)}\r\n enabled={true}\r\n config={toolbarConfig} />\r\n | \r\n
\r\n \r\n {props.location.state.FinancialYearID === null ? PLEASE SELECT FINANCIAL YEAR
:\r\n \r\n handleFormValueChange(values)} \r\n />\r\n | \r\n }\r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n}\r\n\r\nexport default Verification;","import React from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel, { FormTabContainer } from '../../widgets/TabPanel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport Button from '@material-ui/core/Button';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\n\r\n\r\nfunction createData(number, checkList, confirmation, submited, comments) {\r\n return { number, checkList, confirmation, submited, comments };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\nconst useStyles = makeStyles({\r\n root: {\r\n // width: '90%',\r\n margin: 0,\r\n '&:hover': {\r\n backgroundColor: 'transparent',\r\n },\r\n },\r\n container: {\r\n maxHeight: 600,\r\n width: '100%'\r\n },\r\n bullet: {\r\n display: 'inline-block',\r\n margin: '0 2px',\r\n transform: 'scale(0.8)',\r\n },\r\n title: {\r\n fontSize: 10,\r\n },\r\n pos: {\r\n marginBottom: 12,\r\n },\r\n icon: {\r\n borderRadius: '50%',\r\n width: 12,\r\n height: 12,\r\n boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',\r\n backgroundColor: '#f5f8fa',\r\n\r\n 'input:hover ~ &': {\r\n backgroundColor: '#ebf1f5',\r\n },\r\n 'input:disabled ~ &': {\r\n boxShadow: 'none',\r\n background: 'rgba(206,217,224,.5)',\r\n },\r\n },\r\n table: {\r\n minWidth: 700,\r\n width: \"100%\"\r\n },\r\n checkedIcon: {\r\n backgroundColor: '#01579B',\r\n '&:before': {\r\n display: 'block',\r\n width: 16,\r\n height: 16,\r\n content: '\"\"',\r\n },\r\n 'input:hover ~ &': {\r\n backgroundColor: '#01579B',\r\n },\r\n },\r\n});\r\n\r\n\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#01579B',\r\n color: theme.palette.common.white,\r\n },\r\n body: {\r\n fontSize: 10,\r\n\r\n },\r\n}))(TableCell);\r\n\r\nconst StyledTableTextCell = withStyles((theme) => ({\r\n body: {\r\n fontSize: 14,\r\n fontWeight: 400\r\n },\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n height: theme.palette.action.main\r\n },\r\n },\r\n}))(TableRow);\r\n\r\nconst CommentInput = (props) => {\r\n return (\r\n \r\n props.handleComment(e)}\r\n multiline\r\n rows={1}\r\n rowsMax={3}\r\n />\r\n \r\n );\r\n}\r\n\r\n\r\n\r\nconst EvaluationForm = React.forwardRef((props, ref) => {\r\n const classes = useStyles();\r\n\r\n const [proofOfBankingDetailsComment, setproofOfBankingDetailsComment] = React.useState(\"\")\r\n const [workplaceSkillsPlanComment, setworkplaceSkillsPlanComment] = React.useState(\"\")\r\n const [plannedPivotalTrainingComment, setplannedPivotalTrainingComment] = React.useState(\"\")\r\n const [plannedBeneficiariesofTrainingComment, setplannedBeneficiariesofTrainingComment] = React.useState(\"\")\r\n const [annualTrainingReportComment, setannualTrainingReportComment] = React.useState(\"\")\r\n const [actualPivotalTrainingComment, setactualPivotalTrainingComment] = React.useState(\"\")\r\n const [actualBeneficiariesofTrainingComment, setactualBeneficiariesofTrainingComment] = React.useState(\"\")\r\n const [proofofTrainingUploadedComment, setproofofTrainingUploadedComment] = React.useState(\"\")\r\n const [authorisationPageUploadedComment, setauthorisationPageUploadedComment] = React.useState(\"\")\r\n const [trainingImplementedComment, settrainingImplementedComment] = React.useState(\"\")\r\n const [verificationComment, setVerificationComment] = React.useState(\"\")\r\n const [evaluationComment, setEvaluationComment] = React.useState(\"\")\r\n\r\n\r\n\r\n const handleComment = (event) => {\r\n if (event.target.value) {\r\n setproofOfBankingDetailsComment(event.target.value)\r\n }\r\n }\r\n const handleComment1 = (event) => {\r\n if (event.target.value) {\r\n setworkplaceSkillsPlanComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleComment2 = (event) => {\r\n if (event.target.value) {\r\n setplannedPivotalTrainingComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleComment3 = (event) => {\r\n if (event.target.value) {\r\n setplannedBeneficiariesofTrainingComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleComment4 = (event) => {\r\n if (event.target.value) {\r\n setannualTrainingReportComment(event.target.value)\r\n }\r\n }\r\n const handleComment5 = (event) => {\r\n if (event.target.value) {\r\n setactualPivotalTrainingComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleComment6 = (event) => {\r\n if (event.target.value) {\r\n setactualBeneficiariesofTrainingComment(event.target.value)\r\n alert(\"6\")\r\n }\r\n }\r\n\r\n const handleComment7 = (event) => {\r\n if (event.target.value) {\r\n setproofofTrainingUploadedComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleComment8 = (event) => {\r\n if (event.target.value) {\r\n setauthorisationPageUploadedComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleComment9 = (event) => {\r\n if (event.target.value) {\r\n settrainingImplementedComment(event.target.value)\r\n }\r\n }\r\n\r\n const handleVerificationComment = (event) => {\r\n setVerificationComment(event.target.value)\r\n }\r\n\r\n const handleEvaluationComment = (event) => {\r\n setEvaluationComment(event.target.value)\r\n }\r\n\r\n\r\n\r\n\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\nexport default EvaluationForm;","import React, {useEffect, useState} from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { ViewContainer } from \"../../View.jsx\";\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport EvaluationForm from './EvaluationForm';\r\n\r\n\r\n\r\nconst utils = new ViewUtils();\r\nconst Ref = React.createRef();\r\n \r\nconst Evaluation = (props) => {\r\n const [FinancialYear, setFinancialYear] = useState(null)\r\n\r\n\r\n const handleFormValueChange = (values) => {\r\n if (values != null){\r\n setFinancialYear(values.FinancialYearID)\r\n }\r\n }\r\n\r\n\r\n const toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: \"Close\", tooltip: \"Close\" },\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n\r\n const handleToolbarButtonClick = (buttonId) => {\r\n if (buttonId === \"view\") {\r\n // this.setState({ addDialogOpen: true });\r\n } else if (buttonId === \"close\") {\r\n props.history.push({\r\n pathname: \"/WspAtrEvaluation\",\r\n state: {selection: props.location.state.organisationID}\r\n })\r\n }\r\n }\r\n\r\n \r\n return (\r\n \r\n {/* */}\r\n \r\n\r\n \r\n \r\n | \r\n handleToolbarButtonClick(buttonId)}\r\n // buttonMenuClickHandler={(menu) => handleToolbarButtonMenuClick(menu)}\r\n enabled={true}\r\n config={toolbarConfig} />\r\n | \r\n
\r\n \r\n {props.location.state.FinancialYearID === null ? PLEASE SELECT FINANCIAL YEAR
:\r\n \r\n handleFormValueChange(values)} \r\n />\r\n | \r\n }\r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n}\r\n\r\nexport default Evaluation;","import React from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel, { FormTabContainer } from '../../widgets/TabPanel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport clsx from 'clsx';\r\nimport Radio from '@material-ui/core/Radio';\r\nimport RadioGroup from '@material-ui/core/RadioGroup';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport { useEffect } from 'react';\r\nimport Select from '@material-ui/core/Select';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst RadioButton = (props, ref) => {\r\n const [value, setValue] = React.useState(typeof props.initial === 'string' || props.initial instanceof String ? props.initial : props.initial.toString());\r\n\r\n function handleChange(event) {\r\n const { target: { value: _value } } = event;\r\n\r\n\r\n if (typeof _value === 'string' || _value instanceof String) {\r\n setValue(_value);\r\n //value = _value;\r\n }\r\n else {\r\n setValue(_value.toString());\r\n //value = _value.toString();\r\n }\r\n\r\n props.handleScopeSelected(event);\r\n }\r\n\r\n React.useEffect(() => {\r\n if (typeof props.initial === 'string' || props.initial instanceof String) {\r\n setValue(props.initial);\r\n //value = props.initial;\r\n }\r\n else {\r\n setValue(props.initial.toString());\r\n //value = props.initial.toString();\r\n }\r\n\r\n });\r\n\r\n return (\r\n \r\n \r\n \r\n } label=\"Yes\" />\r\n } label=\"No\" />\r\n
\r\n\r\n \r\n \r\n );\r\n}\r\n\r\nconst CommentInput = (props) => {\r\n return (\r\n \r\n props.handleComment(e)}\r\n isRequired=\"true\"\r\n required\r\n id={props.id}\r\n error={((props.question1 == \"\" || props.question1 == undefined) && (props.question2 == \"\" || props.question2 == undefined)) && props.submitted}\r\n helperText={((props.question1 == \"\" || props.question1 == undefined) && (props.question2 == \"\" || props.question2 == undefined)) && props.submitted ? \"Required\" : null}\r\n />\r\n\r\n \r\n );\r\n}\r\n\r\n\r\nfunction createData(number, checkList, confirmation, submited, comments) {\r\n return { number, checkList, confirmation, submited, comments };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\nconst useStyles = makeStyles({\r\n head: {\r\n width: '100%',\r\n },\r\n\r\n root: {\r\n // width: '90%',\r\n margin: 0,\r\n '&:hover': {\r\n backgroundColor: 'transparent',\r\n },\r\n },\r\n container: {\r\n maxHeight: 600,\r\n },\r\n bullet: {\r\n display: 'inline-block',\r\n margin: '0 2px',\r\n transform: 'scale(0.8)',\r\n },\r\n title: {\r\n fontSize: 10,\r\n },\r\n pos: {\r\n marginBottom: 12,\r\n },\r\n icon: {\r\n borderRadius: '50%',\r\n width: 12,\r\n height: 12,\r\n boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',\r\n backgroundColor: '#f5f8fa',\r\n\r\n 'input:hover ~ &': {\r\n backgroundColor: '#ebf1f5',\r\n },\r\n 'input:disabled ~ &': {\r\n boxShadow: 'none',\r\n background: 'rgba(206,217,224,.5)',\r\n },\r\n },\r\n table: {\r\n minWidth: 700,\r\n width: \"100%\"\r\n },\r\n checkedIcon: {\r\n backgroundColor: '#01579B',\r\n '&:before': {\r\n display: 'block',\r\n width: 16,\r\n height: 16,\r\n content: '\"\"',\r\n },\r\n 'input:hover ~ &': {\r\n backgroundColor: '#01579B',\r\n },\r\n },\r\n});\r\n\r\nfunction StyledRadio(props) {\r\n const classes = useStyles();\r\n\r\n return (\r\n }\r\n icon={}\r\n {...props}\r\n />\r\n );\r\n}\r\n\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#01579B',\r\n color: theme.palette.common.white,\r\n },\r\n body: {\r\n fontSize: 10,\r\n\r\n },\r\n}))(TableCell);\r\n\r\nconst StyledTableTextCell = withStyles((theme) => ({\r\n body: {\r\n fontSize: 10,\r\n fontWeight: 400\r\n },\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n height: theme.palette.action.main\r\n },\r\n },\r\n}))(TableRow);\r\n\r\n\r\nconst StakeholderfeedbackForm = React.forwardRef((props, ref) => {\r\n const classes = useStyles();\r\n\r\n const [Stakeholderfeedback, setStakeholderfeedback] = React.useState(props.state.Stakeholderfeedback);\r\n\r\n const [FinancialObject, setFinancialObject] = React.useState({});\r\n const [FinancialObject2, setFinancialObject2] = React.useState(undefined);\r\n\r\n const [FinancialStakeholderFeedback, setFinancialStakeholderFeedback] = React.useState(undefined);\r\n\r\n const [ShowTable, setShowTable] = React.useState(false);\r\n\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n\r\n const [FinancialYearObject, setFinancialYearID] = React.useState(\"Financial Year\");\r\n\r\n\r\n const handleScopeSelected = (event) => {\r\n props.valueChangeHandler(event.target.value, \"Question1YesNoID\");\r\n\r\n }\r\n\r\n const handleScopeSelected1 = (event) => {\r\n props.valueChangeHandler(event.target.value, \"Question2YesNoID\");\r\n\r\n }\r\n\r\n const handleScopeSelected2 = (event) => {\r\n props.valueChangeHandler(event.target.value, \"Question3YesNoID\");\r\n\r\n }\r\n\r\n\r\n\r\n const handleScopeSelected3 = (event) => {\r\n props.valueChangeHandler(event.target.value, \"Question4YesNoID\");\r\n\r\n }\r\n\r\n const handleScopeSelected4 = (event) => {\r\n props.valueChangeHandler(event.target.value, \"Question5YesNoID\");\r\n\r\n }\r\n\r\n const handleScopeSelected5 = (event) => {\r\n props.valueChangeHandler(event.target.value, \"Question6YesNoID\");\r\n\r\n }\r\n\r\n\r\n const handleScopeSelected6 = (event) => {\r\n props.valueChangeHandler(event.target.value, \"Question7YesNoID\");\r\n\r\n }\r\n\r\n\r\n\r\n const handleComment = (event) => {\r\n props.valueChangeHandler(event.target.value, \"Question1\");\r\n\r\n }\r\n\r\n const handleComment1 = (event) => {\r\n props.valueChangeHandler(event.target.value, \"Question2\");\r\n\r\n }\r\n\r\n const handleComment2 = (event) => {\r\n props.valueChangeHandler(event.target.value, \"Question3\");\r\n\r\n }\r\n\r\n const handleComment3 = (event) => {\r\n props.valueChangeHandler(event.target.value, \"Question4\");\r\n\r\n }\r\n\r\n const handleComment4 = (event) => {\r\n props.valueChangeHandler(event.target.value, \"Question5\");\r\n\r\n }\r\n const handleComment5 = (event) => {\r\n props.valueChangeHandler(event.target.value, \"Question6\");\r\n\r\n }\r\n\r\n const handleComment6 = (event) => {\r\n props.valueChangeHandler(event.target.value, \"Question7\");\r\n\r\n }\r\n\r\n //const handleComment7 = () => {\r\n // if (event) {\r\n // var i = \"hjbhj\";\r\n // }\r\n\r\n // if (ref.current) {\r\n // var i = ref.current.getValue();\r\n\r\n // const url = \"api/sims/StakeholderFeedback/FindStakeholderFeedbackDetailsById\" + \"?organisationId=\" + props.state.Stakeholderfeedback.OrganisationID + \"&financialYearId=\" + i.FinancialYearID.Id;\r\n // utils.invokeUrl(url, (response) => {\r\n // if (response.Question1YesNoID == 0 || response.Question2YesNoID == 0) {\r\n // var b = response.Question1YesNoID;\r\n // }\r\n\r\n // }, {});\r\n\r\n // }\r\n\r\n //}\r\n\r\n\r\n const handleFinancialId = () => {\r\n setStakeholderfeedback(props.state.Stakeholderfeedback);\r\n }\r\n\r\n\r\n\r\n\r\n\r\n const fields = [\r\n createData('1.', \" Proof of Banking Details\", handleScopeSelected(values)} initial={props.state.Stakeholderfeedback.Question1YesNoID} id=\"Question1YesNoID\" />, handleComment(values)} id=\"1\" submitted={props.state.submitted} question1={props.state.Stakeholderfeedback.Question1YesComment} question2={props.state.Stakeholderfeedback.Question1NoComment} initial={Stakeholderfeedback.Question1NoComment} initial2={Stakeholderfeedback.Question1YesComment} />),\r\n\r\n createData('2.', \" Workplace Skills Plan \", handleScopeSelected1(values)} initial={props.state.Stakeholderfeedback.Question2YesNoID} id=\"Question2YesNoID\" />, handleComment1(values)} id=\"2\" submitted={props.state.submitted} question1={props.state.Stakeholderfeedback.Question2YesComment} question2={props.state.Stakeholderfeedback.Question2NoComment} initial={Stakeholderfeedback.Question2NoComment} initial2={Stakeholderfeedback.Question2YesComment} />),\r\n\r\n createData('3.', \" Planned Pivotal Training – Employees\", handleScopeSelected2(values)} initial={props.state.Stakeholderfeedback.Question3YesNoID} id=\"Question3YesNoID\" />, handleComment2(values)} id=\"3\" submitted={props.state.submitted} question1={props.state.Stakeholderfeedback.Question3YesComment} question2={props.state.Stakeholderfeedback.Question3NoComment} initial={Stakeholderfeedback.Question3NoComment} initial2={Stakeholderfeedback.Question3YesComment} />),\r\n\r\n createData('4.', \" Planned Beneficiaries of Training – Employees\", handleScopeSelected3(values)} initial={props.state.Stakeholderfeedback.Question4YesNoID} id=\"Question4YesNoID\" />, handleComment3(values)} id=\"4\" submitted={props.state.submitted} question1={props.state.Stakeholderfeedback.Question4YesComment} question2={props.state.Stakeholderfeedback.Question4NoComment} initial={Stakeholderfeedback.Question4NoComment} initial2={Stakeholderfeedback.Question4YesComment} />),\r\n\r\n createData('5.', \" Annual Training Report\", handleScopeSelected4(values)} initial={props.state.Stakeholderfeedback.Question5YesNoID} id=\"Question5YesNoID\" />, handleComment4(values)} id=\"5\" submitted={props.state.submitted} question1={props.state.Stakeholderfeedback.Question5YesComment} question2={props.state.Stakeholderfeedback.Question5NoComment} initial={Stakeholderfeedback.Question5NoComment} initial2={Stakeholderfeedback.Question5YesComment} />),\r\n\r\n createData('6.', \" Actual Pivotal Training \", handleScopeSelected5(values)} initial={props.state.Stakeholderfeedback.Question6YesNoID} id=\"Question6YesNoID\" />, handleComment5(values)} id=\"6\" submitted={props.state.submitted} question1={props.state.Stakeholderfeedback.Question6YesComment} question2={props.state.Stakeholderfeedback.Question6NoComment} initial={Stakeholderfeedback.Question6NoComment} initial2={Stakeholderfeedback.Question6YesComment} />),\r\n\r\n createData('7.', \" Actual Beneficiaries of Training \", handleScopeSelected6(values)} initial={props.state.Stakeholderfeedback.Question7YesNoID} id=\"Question7YesNoID\" />, handleComment6(values)} id=\"7\" submitted={props.state.submitted} question1={props.state.Stakeholderfeedback.Question7YesComment} question2={props.state.Stakeholderfeedback.Question7NoComment} initial={Stakeholderfeedback.Question7NoComment} initial2={Stakeholderfeedback.Question7YesComment} />),\r\n\r\n\r\n ];\r\n\r\n\r\n\r\n return (\r\n \r\n\r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\nexport default StakeholderfeedbackForm;","import React, { useEffect, useState, Component } from 'react';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { ViewContainer } from \"../../View.jsx\";\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport StakeholderfeedbackForm from './StackholderfeedbackForm';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\nconst utils = new ViewUtils();\r\nconst formRef = React.createRef();\r\n\r\nclass Feedback extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n }\r\n\r\n state = {\r\n\r\n message: \"\",\r\n messageStyle: \"\",\r\n title: \"\",\r\n financialStakeholderFeedback: null,\r\n showTable: false,\r\n\r\n id: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) ? this.props.location.state.selection : null,\r\n organisationID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.organisationID)) ? this.props.location.state.organisationID : null,\r\n\r\n\r\n submitted: false,\r\n Stakeholderfeedback: {\r\n ID: 0,\r\n OrganisationID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.organisationID)) ? this.props.location.state.organisationID : null,\r\n FinancialYearID: {},\r\n Question1YesNoID: 1,\r\n Question1YesComment: \"\",\r\n Question1NoComment: \"\",\r\n Question2YesNoID: 1,\r\n Question2YesComment: \"\",\r\n Question2NoComment: \"\",\r\n Question3YesNoID: 1,\r\n Question3YesComment: \"\",\r\n Question3NoComment: \"\",\r\n Question4YesNoID: 1,\r\n Question4YesComment: \"\",\r\n Question4NoComment: \"\",\r\n Question5YesNoID: 1,\r\n Question5YesComment: \"\",\r\n Question5NoComment: \"\",\r\n Question6YesNoID: 1,\r\n Question6YesComment: \"\",\r\n Question6NoComment: \"\",\r\n Question7YesNoID: 1,\r\n Question7YesComment: \"\",\r\n Question7NoComment: \"\",\r\n }\r\n\r\n }\r\n\r\n toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n }\r\n ,\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'save', label: 'SAVE', tooltip: 'Save', icon: 'SaveIcon', visible: utils.isNull(this.state.id) ? this.props.menuPermissionItem.Edit : this.props.menuPermissionItem.Add }\r\n ]\r\n }\r\n ]\r\n }\r\n save() {\r\n if (((this.state.Stakeholderfeedback.Question1YesComment == \"\" || this.state.Stakeholderfeedback.Question1YesComment == undefined) && (this.state.Stakeholderfeedback.Question1NoComment == \"\" || this.state.Stakeholderfeedback.Question1NoComment == undefined)) ||\r\n ((this.state.Stakeholderfeedback.Question2YesComment == \"\" || this.state.Stakeholderfeedback.Question2YesComment == undefined) && (this.state.Stakeholderfeedback.Question2NoComment == \"\" || this.state.Stakeholderfeedback.Question2NoComment == undefined)) ||\r\n ((this.state.Stakeholderfeedback.Question3YesComment == \"\" || this.state.Stakeholderfeedback.Question3YesComment == undefined) && (this.state.Stakeholderfeedback.Question3NoComment == \"\" || this.state.Stakeholderfeedback.Question3NoComment == undefined)) ||\r\n ((this.state.Stakeholderfeedback.Question4YesComment == \"\" || this.state.Stakeholderfeedback.Question4YesComment == undefined) && (this.state.Stakeholderfeedback.Question4NoComment == \"\" || this.state.Stakeholderfeedback.Question4NoComment == undefined)) ||\r\n ((this.state.Stakeholderfeedback.Question5YesComment == \"\" || this.state.Stakeholderfeedback.Question5YesComment == undefined) && (this.state.Stakeholderfeedback.Question5NoComment == \"\" || this.state.Stakeholderfeedback.Question5NoComment == undefined)) ||\r\n ((this.state.Stakeholderfeedback.Question6YesComment == \"\" || this.state.Stakeholderfeedback.Question6YesComment == undefined) && (this.state.Stakeholderfeedback.Question6NoComment == \"\" || this.state.Stakeholderfeedback.Question6NoComment == undefined)) ||\r\n ((this.state.Stakeholderfeedback.Question7YesComment == \"\" || this.state.Stakeholderfeedback.Question7YesComment == undefined) && (this.state.Stakeholderfeedback.Question7NoComment == \"\" || this.state.Stakeholderfeedback.Question7NoComment == undefined))) {\r\n this.state.submitted = true;\r\n this.forceUpdate();\r\n }\r\n\r\n else {\r\n let formValue = formRef.current.getValue();\r\n this.forceUpdate();\r\n this.state.submitted = true;\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n let isAdd = true;\r\n formValue.OrganisationID = this.state.organisationID;\r\n formValue.FinancialYearID = formValue.FinancialYearObject;\r\n formValue.Question1YesNoID = this.state.Stakeholderfeedback.Question1YesNoID;\r\n formValue.Question1YesComment = this.state.Stakeholderfeedback.Question1YesComment;\r\n formValue.Question1NoComment = this.state.Stakeholderfeedback.Question1NoComment;\r\n\r\n formValue.Question2YesNoID = this.state.Stakeholderfeedback.Question2YesNoID;\r\n formValue.Question2YesComment = this.state.Stakeholderfeedback.Question2YesComment;\r\n formValue.Question2NoComment = this.state.Stakeholderfeedback.Question2NoComment;\r\n\r\n formValue.Question3YesNoID = this.state.Stakeholderfeedback.Question3YesNoID;\r\n formValue.Question3YesComment = this.state.Stakeholderfeedback.Question3YesComment;\r\n formValue.Question3NoComment = this.state.Stakeholderfeedback.Question3NoComment;\r\n\r\n formValue.Question4YesNoID = this.state.Stakeholderfeedback.Question4YesNoID;\r\n formValue.Question4YesComment = this.state.Stakeholderfeedback.Question4YesComment;\r\n formValue.Question4NoComment = this.state.Stakeholderfeedback.Question4NoComment;\r\n\r\n formValue.Question5YesNoID = this.state.Stakeholderfeedback.Question5YesNoID;\r\n formValue.Question5YesComment = this.state.Stakeholderfeedback.Question5YesComment;\r\n formValue.Question5NoComment = this.state.Stakeholderfeedback.Question5NoComment;\r\n\r\n formValue.Question6YesNoID = this.state.Stakeholderfeedback.Question6YesNoID;\r\n formValue.Question6YesComment = this.state.Stakeholderfeedback.Question6YesComment;\r\n formValue.Question6NoComment = this.state.Stakeholderfeedback.Question6NoComment;\r\n\r\n formValue.Question7YesNoID = this.state.Stakeholderfeedback.Question7YesNoID;\r\n formValue.Question7YesComment = this.state.Stakeholderfeedback.Question7YesComment;\r\n formValue.Question7NoComment = this.state.Stakeholderfeedback.Question7NoComment;\r\n\r\n\r\n if (isAdd) {\r\n const url = `api/sims/StakeholderFeedback/SaveUpdateStakeholderFeedback`;\r\n utils.saveForm(this, formRef, url, (response) => {\r\n\r\n\r\n this.state.submitted = false;\r\n this.forceUpdate();\r\n\r\n this.setState({ id: response.EntityId });\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n this.successCallback(response);\r\n\r\n }, this.error);\r\n }\r\n }\r\n }\r\n\r\n\r\n }\r\n\r\n successCallback(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n error(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n\r\n handleFormValueChange = (value, id) => {\r\n\r\n\r\n if (value != null && id != null) {\r\n //let StakeholderfeedbackUpdate = { ...this.state.Stakeholderfeedback };\r\n let StakeholderfeedbackUpdate = this.state.Stakeholderfeedback;\r\n\r\n if (id == \"Question1YesNoID\") {\r\n\r\n StakeholderfeedbackUpdate.Question1YesNoID = value;\r\n\r\n if (value == 2) {\r\n StakeholderfeedbackUpdate.Question1NoComment = StakeholderfeedbackUpdate.Question1YesComment;\r\n StakeholderfeedbackUpdate.Question1YesComment = \"\";\r\n }\r\n\r\n else {\r\n StakeholderfeedbackUpdate.Question1YesComment = StakeholderfeedbackUpdate.Question1NoComment;\r\n StakeholderfeedbackUpdate.Question1NoComment = \"\";\r\n }\r\n\r\n }\r\n\r\n else if (id == \"Question2YesNoID\") {\r\n StakeholderfeedbackUpdate.Question2YesNoID = value;\r\n if (value == 2) {\r\n StakeholderfeedbackUpdate.Question2NoComment = StakeholderfeedbackUpdate.Question2YesComment;\r\n StakeholderfeedbackUpdate.Question2YesComment = \"\";\r\n }\r\n\r\n else {\r\n StakeholderfeedbackUpdate.Question2YesComment = StakeholderfeedbackUpdate.Question2NoComment;\r\n StakeholderfeedbackUpdate.Question2NoComment = \"\";\r\n }\r\n }\r\n else if (id == \"Question3YesNoID\") {\r\n StakeholderfeedbackUpdate.Question3YesNoID = value;\r\n if (value == 2) {\r\n StakeholderfeedbackUpdate.Question3NoComment = StakeholderfeedbackUpdate.Question3YesComment;\r\n StakeholderfeedbackUpdate.Question3YesComment = \"\";\r\n }\r\n\r\n else {\r\n StakeholderfeedbackUpdate.Question3YesComment = StakeholderfeedbackUpdate.Question3NoComment;\r\n StakeholderfeedbackUpdate.Question3NoComment = \"\";\r\n }\r\n }\r\n else if (id == \"Question4YesNoID\") {\r\n StakeholderfeedbackUpdate.Question4YesNoID = value;\r\n if (value == 2) {\r\n StakeholderfeedbackUpdate.Question4NoComment = StakeholderfeedbackUpdate.Question4YesComment;\r\n StakeholderfeedbackUpdate.Question4YesComment = \"\";\r\n }\r\n\r\n else {\r\n StakeholderfeedbackUpdate.Question4YesComment = StakeholderfeedbackUpdate.Question4NoComment;\r\n StakeholderfeedbackUpdate.Question4NoComment = \"\";\r\n }\r\n }\r\n else if (id == \"Question5YesNoID\") {\r\n StakeholderfeedbackUpdate.Question5YesNoID = value;\r\n if (value == 2) {\r\n StakeholderfeedbackUpdate.Question5NoComment = StakeholderfeedbackUpdate.Question5YesComment;\r\n StakeholderfeedbackUpdate.Question5YesComment = \"\";\r\n }\r\n\r\n else {\r\n StakeholderfeedbackUpdate.Question5YesComment = StakeholderfeedbackUpdate.Question5NoComment;\r\n StakeholderfeedbackUpdate.Question5NoComment = \"\";\r\n }\r\n }\r\n else if (id == \"Question6YesNoID\") {\r\n StakeholderfeedbackUpdate.Question6YesNoID = value;\r\n if (value == 2) {\r\n StakeholderfeedbackUpdate.Question6NoComment = StakeholderfeedbackUpdate.Question6YesComment;\r\n StakeholderfeedbackUpdate.Question6YesComment = \"\";\r\n }\r\n\r\n else {\r\n StakeholderfeedbackUpdate.Question6YesComment = StakeholderfeedbackUpdate.Question6NoComment;\r\n StakeholderfeedbackUpdate.Question6NoComment = \"\";\r\n }\r\n }\r\n else if (id == \"Question7YesNoID\") {\r\n StakeholderfeedbackUpdate.Question7YesNoID = value;\r\n if (value == 2) {\r\n StakeholderfeedbackUpdate.Question7NoComment = StakeholderfeedbackUpdate.Question7YesComment;\r\n StakeholderfeedbackUpdate.Question7YesComment = \"\";\r\n }\r\n\r\n else {\r\n StakeholderfeedbackUpdate.Question7YesComment = StakeholderfeedbackUpdate.Question7NoComment;\r\n StakeholderfeedbackUpdate.Question7NoComment = \"\";\r\n }\r\n }\r\n else if (id == \"Question1\") {\r\n if (StakeholderfeedbackUpdate.Question1YesNoID == 1) {\r\n StakeholderfeedbackUpdate.Question1YesComment = value;\r\n StakeholderfeedbackUpdate.Question1NoComment = \"\";\r\n }\r\n\r\n else {\r\n StakeholderfeedbackUpdate.Question1NoComment = value;\r\n StakeholderfeedbackUpdate.Question1YesComment = \"\";\r\n }\r\n }\r\n else if (id == \"Question2\") {\r\n if (StakeholderfeedbackUpdate.Question2YesNoID == 1) {\r\n StakeholderfeedbackUpdate.Question2YesComment = value;\r\n StakeholderfeedbackUpdate.Question2NoComment = \"\";\r\n }\r\n\r\n else {\r\n StakeholderfeedbackUpdate.Question2NoComment = value;\r\n StakeholderfeedbackUpdate.Question2YesComment = \"\";\r\n }\r\n }\r\n else if (id == \"Question3\") {\r\n if (StakeholderfeedbackUpdate.Question3YesNoID == 1) {\r\n StakeholderfeedbackUpdate.Question3YesComment = value;\r\n StakeholderfeedbackUpdate.Question3NoComment = \"\";\r\n }\r\n\r\n else {\r\n StakeholderfeedbackUpdate.Question3NoComment = value;\r\n StakeholderfeedbackUpdate.Question3YesComment = \"\";\r\n }\r\n }\r\n else if (id == \"Question4\") {\r\n if (StakeholderfeedbackUpdate.Question4YesNoID == 1) {\r\n StakeholderfeedbackUpdate.Question4YesComment = value;\r\n StakeholderfeedbackUpdate.Question4NoComment = \"\";\r\n }\r\n\r\n else {\r\n StakeholderfeedbackUpdate.Question4NoComment = value;\r\n StakeholderfeedbackUpdate.Question4YesComment = \"\";\r\n }\r\n }\r\n else if (id == \"Question5\") {\r\n if (StakeholderfeedbackUpdate.Question5YesNoID == 1) {\r\n StakeholderfeedbackUpdate.Question5YesComment = value;\r\n StakeholderfeedbackUpdate.Question5NoComment = \"\";\r\n }\r\n\r\n else {\r\n StakeholderfeedbackUpdate.Question5NoComment = value;\r\n StakeholderfeedbackUpdate.Question5YesComment = \"\";\r\n }\r\n }\r\n else if (id == \"Question6\") {\r\n if (StakeholderfeedbackUpdate.Question6YesNoID == 1) {\r\n StakeholderfeedbackUpdate.Question6YesComment = value;\r\n StakeholderfeedbackUpdate.Question6NoComment = \"\";\r\n }\r\n\r\n else {\r\n StakeholderfeedbackUpdate.Question6NoComment = value;\r\n StakeholderfeedbackUpdate.Question6YesComment = \"\";\r\n }\r\n }\r\n\r\n\r\n\r\n else if (id == \"Question7\") {\r\n if (StakeholderfeedbackUpdate.Question7YesNoID == 1) {\r\n StakeholderfeedbackUpdate.Question7YesComment = value;\r\n StakeholderfeedbackUpdate.Question7NoComment = \"\";\r\n }\r\n\r\n else {\r\n StakeholderfeedbackUpdate.Question7NoComment = value;\r\n StakeholderfeedbackUpdate.Question7YesComment = \"\";\r\n }\r\n }\r\n\r\n\r\n else if (id == \"financialId\") {\r\n StakeholderfeedbackUpdate.FinancialYearID = value.ID;\r\n }\r\n this.setState({\r\n Stakeholderfeedback: {\r\n ID: StakeholderfeedbackUpdate.ID,\r\n OrganisationID: StakeholderfeedbackUpdate.OrganisationID,\r\n FinancialYearID: StakeholderfeedbackUpdate.FinancialYearID,\r\n Question1YesNoID: StakeholderfeedbackUpdate.Question1YesNoID,\r\n Question1YesComment: StakeholderfeedbackUpdate.Question1YesComment,\r\n Question1NoComment: StakeholderfeedbackUpdate.Question1NoComment,\r\n Question2YesNoID: StakeholderfeedbackUpdate.Question2YesNoID,\r\n Question2YesComment: StakeholderfeedbackUpdate.Question2YesComment,\r\n Question2NoComment: StakeholderfeedbackUpdate.Question2NoComment,\r\n Question3YesNoID: StakeholderfeedbackUpdate.Question3YesNoID,\r\n Question3YesComment: StakeholderfeedbackUpdate.Question3YesComment,\r\n Question3NoComment: StakeholderfeedbackUpdate.Question3NoComment,\r\n Question4YesNoID: StakeholderfeedbackUpdate.Question4YesNoID,\r\n Question4YesComment: StakeholderfeedbackUpdate.Question4YesComment,\r\n Question4NoComment: StakeholderfeedbackUpdate.Question4NoComment,\r\n Question5YesNoID: StakeholderfeedbackUpdate.Question5YesNoID,\r\n Question5YesComment: StakeholderfeedbackUpdate.Question5YesComment,\r\n Question5NoComment: StakeholderfeedbackUpdate.Question5NoComment,\r\n Question6YesNoID: StakeholderfeedbackUpdate.Question6YesNoID,\r\n Question6YesComment: StakeholderfeedbackUpdate.Question6YesComment,\r\n Question6NoComment: StakeholderfeedbackUpdate.Question6NoComment,\r\n Question7YesNoID: StakeholderfeedbackUpdate.Question7YesNoID,\r\n Question7YesComment: StakeholderfeedbackUpdate.Question7YesComment,\r\n Question7NoComment: StakeholderfeedbackUpdate.Question7NoComment,\r\n }\r\n\r\n });\r\n\r\n this.forceUpdate();\r\n\r\n\r\n\r\n }\r\n\r\n if (id == \"\" || id == undefined) {\r\n if (formRef) {\r\n if (formRef.current) {\r\n var i = formRef.current.getValue();\r\n if (true) {\r\n if (i != null && i != undefined) {\r\n this.setState({ showTable: true });\r\n const url = \"api/sims/StakeholderFeedback/FindStakeholderFeedbackDetailsById\" + \"?organisationId=\" + this.state.Stakeholderfeedback.OrganisationID + \"&financialYearId=\" + i.FinancialYearObject.Id;\r\n utils.invokeUrl(url, (response) => {\r\n if (response.Question1YesNoID != 0 || response.Question2YesNoID != 0) {\r\n\r\n\r\n this.state.Stakeholderfeedback.Question1YesNoID = response.Question1YesNoID;\r\n if (response.Question1YesNoID == 1) {\r\n document.getElementById(\"1\").value = response.Question1YesComment;\r\n this.state.Stakeholderfeedback.Question1YesComment = response.Question1YesComment;\r\n }\r\n\r\n else {\r\n document.getElementById(\"1\").value = response.Question1NoComment;\r\n this.state.Stakeholderfeedback.Question1NoComment = response.Question1NoComment;\r\n }\r\n\r\n\r\n this.state.Stakeholderfeedback.Question2YesNoID = response.Question2YesNoID;\r\n if (response.Question2YesNoID == 1) {\r\n document.getElementById(\"2\").value = response.Question2YesComment;\r\n this.state.Stakeholderfeedback.Question2YesComment = response.Question2YesComment;\r\n }\r\n\r\n else {\r\n document.getElementById(\"2\").value = response.Question2NoComment;\r\n this.state.Stakeholderfeedback.Question2NoComment = response.Question2NoComment;\r\n }\r\n\r\n\r\n this.state.Stakeholderfeedback.Question3YesNoID = response.Question3YesNoID;\r\n if (response.Question3YesNoID == 1) {\r\n document.getElementById(\"3\").value = response.Question3YesComment;\r\n this.state.Stakeholderfeedback.Question3YesComment = response.Question3YesComment;\r\n }\r\n\r\n else {\r\n document.getElementById(\"3\").value = response.Question3NoComment;\r\n this.state.Stakeholderfeedback.Question3NoComment = response.Question3NoComment;\r\n }\r\n\r\n\r\n this.state.Stakeholderfeedback.Question4YesNoID = response.Question4YesNoID;\r\n if (response.Question4YesNoID == 1) {\r\n document.getElementById(\"4\").value = response.Question4YesComment;\r\n this.state.Stakeholderfeedback.Question4YesComment = response.Question4YesComment;\r\n }\r\n\r\n else {\r\n document.getElementById(\"4\").value = response.Question4NoComment;\r\n this.state.Stakeholderfeedback.Question4NoComment = response.Question4NoComment;\r\n }\r\n\r\n\r\n this.state.Stakeholderfeedback.Question5YesNoID = response.Question5YesNoID;\r\n if (response.Question5YesNoID == 1) {\r\n document.getElementById(\"5\").value = response.Question5YesComment;\r\n this.state.Stakeholderfeedback.Question5YesComment = response.Question5YesComment;\r\n }\r\n\r\n else {\r\n document.getElementById(\"5\").value = response.Question5NoComment;\r\n this.state.Stakeholderfeedback.Question5NoComment = response.Question5NoComment;\r\n }\r\n\r\n\r\n this.state.Stakeholderfeedback.Question6YesNoID = response.Question6YesNoID;\r\n if (response.Question6YesNoID == 1) {\r\n document.getElementById(\"6\").value = response.Question6YesComment;\r\n this.state.Stakeholderfeedback.Question6YesComment = response.Question6YesComment;\r\n }\r\n\r\n else {\r\n document.getElementById(\"6\").value = response.Question6NoComment;\r\n this.state.Stakeholderfeedback.Question6NoComment = response.Question6NoComment;\r\n }\r\n\r\n\r\n this.state.Stakeholderfeedback.Question7YesNoID = response.Question7YesNoID;\r\n if (response.Question7YesNoID == 1) {\r\n document.getElementById(\"7\").value = response.Question7YesComment;\r\n this.state.Stakeholderfeedback.Question7YesComment = response.Question7YesComment;\r\n }\r\n\r\n else {\r\n document.getElementById(\"7\").value = response.Question7NoComment;\r\n this.state.Stakeholderfeedback.Question7NoComment = response.Question7NoComment;\r\n }\r\n\r\n\r\n\r\n this.setState({\r\n Stakeholderfeedback: {\r\n OrganisationID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.organisationID)) ? this.props.location.state.organisationID : null,\r\n FinancialYearID: {},\r\n Question1YesNoID: response.Question1YesNoID,\r\n Question1YesComment: response.Question1YesComment,\r\n Question1NoComment: response.Question1NoComment,\r\n Question2YesNoID: response.Question2YesNoID,\r\n Question2YesComment: response.Question2YesComment,\r\n Question2NoComment: response.Question2NoComment,\r\n Question3YesNoID: response.Question3YesNoID,\r\n Question3YesComment: response.Question3YesComment,\r\n Question3NoComment: response.Question3NoComment,\r\n Question4YesNoID: response.Question4YesNoID,\r\n Question4YesComment: response.Question4YesComment,\r\n Question4NoComment: response.Question4NoComment,\r\n Question5YesNoID: response.Question5YesNoID,\r\n Question5YesComment: response.Question5YesComment,\r\n Question5NoComment: response.Question5NoComment,\r\n Question6YesNoID: response.Question6YesNoID,\r\n Question6YesComment: response.Question6YesComment,\r\n Question6NoComment: response.Question6NoComment,\r\n Question7YesNoID: response.Question7YesNoID,\r\n Question7YesComment: response.Question7YesComment,\r\n Question7NoComment: response.Question7NoComment,\r\n }\r\n\r\n });\r\n\r\n\r\n this.forceUpdate();\r\n }\r\n else {\r\n document.getElementById(\"1\").value = \"\";\r\n\r\n document.getElementById(\"2\").value = \"\";\r\n\r\n document.getElementById(\"3\").value = \"\";\r\n\r\n document.getElementById(\"4\").value = \"\";\r\n\r\n document.getElementById(\"5\").value = \"\";\r\n\r\n document.getElementById(\"6\").value = \"\";\r\n\r\n document.getElementById(\"7\").value = \"\";\r\n\r\n\r\n this.state.Stakeholderfeedback.Question1YesNoID = 1;\r\n this.state.Stakeholderfeedback.Question2YesNoID = 1;\r\n this.state.Stakeholderfeedback.Question3YesNoID = 1;\r\n this.state.Stakeholderfeedback.Question4YesNoID = 1;\r\n this.state.Stakeholderfeedback.Question5YesNoID = 1;\r\n this.state.Stakeholderfeedback.Question6YesNoID = 1;\r\n this.state.Stakeholderfeedback.Question7YesNoID = 1;\r\n\r\n\r\n this.setState({\r\n Stakeholderfeedback: {\r\n OrganisationID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.organisationID)) ? this.props.location.state.organisationID : null,\r\n FinancialYearID: {},\r\n Question1YesNoID: 1,\r\n Question1YesComment: \"\",\r\n Question1NoComment: \"\",\r\n Question2YesNoID: 1,\r\n Question2YesComment: \"\",\r\n Question2NoComment: \"\",\r\n Question3YesNoID: 1,\r\n Question3YesComment: \"\",\r\n Question3NoComment: \"\",\r\n Question4YesNoID: 1,\r\n Question4YesComment: \"\",\r\n Question4NoComment: \"\",\r\n Question5YesNoID: 1,\r\n Question5YesComment: \"\",\r\n Question5NoComment: \"\",\r\n Question6YesNoID: 1,\r\n Question6YesComment: \"\",\r\n Question6NoComment: \"\",\r\n Question7YesNoID: 1,\r\n Question7YesComment: \"\",\r\n Question7NoComment: \"\",\r\n }\r\n\r\n });\r\n\r\n this.forceUpdate();\r\n }\r\n\r\n\r\n }, {});\r\n }\r\n }\r\n\r\n }\r\n }\r\n this.state.submitted = false;\r\n }\r\n\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (\"save\" === buttonId) {\r\n this.save();\r\n } else {\r\n this.close();\r\n }\r\n }\r\n\r\n updateTheState() {\r\n this.forceUpdate();\r\n }\r\n\r\n\r\n close() {\r\n this.props.history.push({\r\n pathname: '/skillsOrganisation',\r\n state: { selection: this.props.location.state.organisationID }\r\n });\r\n }\r\n\r\n dataArrivedHandler = (values) => {\r\n console.log(values);\r\n if (!utils.isNull(values[\"ID\"]) && values[\"ID\"] !== 0) {\r\n this.setState({ id: values[\"ID\"] });\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Organisation > Stakeholder Feedback \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n \r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)} enabled={true} config={this.toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values, event)} dataArrivedHandler={(values) => this.dataArrivedHandler(values)}/>\r\n | \r\n
\r\n \r\n
\r\n \r\n\r\n );\r\n }\r\n}\r\nexport default withRouter(withMenuPermission(Feedback));","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nexport default function RequestExtensionForm(props) {\r\n const [labelWidth, setLabelWidth, tabValue] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n","\r\nimport React from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\nconst LodgeApealDetailsForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const [docName, setDocName] = React.useState('');\r\n\r\n const styles = makeStyles({\r\n TextArea: {\r\n '& .MuiOutlinedInput-inputMultiline': {\r\n height: \"200px !important\",\r\n width: \"600px !important\"\r\n }\r\n }\r\n })\r\n\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\nexport default LodgeApealDetailsForm;","import React from 'react';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport Button from '@material-ui/core/Button';\r\nimport RequestExtensionDetailsForm from './ExtensionDetailsForm';\r\nimport DocumentUpload from '../../widgets/DocumentUpload';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport default function RequestExtensionDialog(props) {\r\n\r\n const [open, setOpen] = React.useState(props.open);\r\n const [AddDiasbaled, setAddDiasbaled] = React.useState(true);\r\n const [Message, setMessage] = React.useState(\"\");\r\n const [MessageStyle, setMessageStyle] = React.useState(\"\");\r\n const formRef = React.createRef();\r\n const [filename, setFilename] = React.useState(\"\");\r\n const [size, setSize] = React.useState(null);\r\n const [base64, setBase64] = React.useState(null);\r\n const [type, setType] = React.useState(null);\r\n\r\n const handleClose = (cancel, save, response) => {\r\n setFilename(\"\");\r\n setOpen(false);\r\n props.closeHandler(cancel, save, response);\r\n };\r\n\r\n const cancel = () => {\r\n handleClose(true, false);\r\n };\r\n\r\n const add = () => {\r\n let formValue = formRef.current.getValue();\r\n formValue.Document = {};\r\n formValue.Document.Name = filename;\r\n formValue.Document.size = size;\r\n formValue.Document.type = type;\r\n formValue.Document.base64 = base64;\r\n formValue.OrganisationID = props.OrganisationID;\r\n formValue.FinancialYearID = props.FinancialYearID;\r\n\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n\r\n const url = `api/sims/requestextension/addrequestextension`;\r\n\r\n utils.invokeUrl(url, (response) => {\r\n handleClose(false, true, response);\r\n }, () => { handleClose(false, false); },\r\n {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(formValue)\r\n }\r\n );\r\n }\r\n }\r\n\r\n const onUploadHandler = (data) => {\r\n if (data) {\r\n setFilename(data.name);\r\n setSize(data.size);\r\n setBase64(data.base64);\r\n setType(data.type);\r\n setAddDiasbaled(false);\r\n }\r\n }\r\n\r\n React.useEffect(() => {\r\n setOpen(props.open);\r\n }, [props.open]);\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n {\"Organisation > Request an Extension \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n\r\n \r\n\r\n \r\n < ExtensionSearchForm\r\n // data={this.state.model}\r\n valueChangeHandler={(values) => this.handleFormValueChange(values)}\r\n />\r\n\r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig}\r\n />\r\n\r\n { this.handleSelectionChange(selection) }}\r\n dataUrl=\"api/sims/requestextension/GetSearch\"\r\n searchParameters={this.state.searchParameters}\r\n onCellSelectionChange={(rowid, headCell) => { this.FileDownload(rowid, headCell) }}\r\n clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow}\r\n paged={true} />\r\n
\r\n\r\n this.postAddHandler(cancel, save, response)}\r\n viewRef={this}\r\n OrganisationID={this.props.location.state.organisationID}\r\n />\r\n\r\n this.postAddHandler(cancel, save, response)}\r\n viewRef={this}\r\n />\r\n\r\n { this.remove(\"api/sims/requestextension/removerequestextension\") }}\r\n closePrompt={this.closePrompt}\r\n />\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(RequestExtension));","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nexport default function LodgeAppealForm(props) {\r\n const [labelWidth, setLabelWidth, tabValue] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n","\r\nimport React from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\nconst LodgeApealDetailsForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const [docName, setDocName] = React.useState('');\r\n\r\n const styles = makeStyles({\r\n TextArea: {\r\n '& .MuiOutlinedInput-inputMultiline': {\r\n height: \"200px !important\",\r\n width: \"600px !important\"\r\n }\r\n }\r\n })\r\n\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\nexport default LodgeApealDetailsForm;","import React from 'react';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport Button from '@material-ui/core/Button';\r\nimport LodgeApealDetailsForm from './LodgeApealDetailsForm';\r\nimport DocumentUpload from '../../widgets/DocumentUpload';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport default function LodgeApealDialog(props) {\r\n\r\n const [open, setOpen] = React.useState(props.open);\r\n const [AddDiasbaled, setAddDiasbaled] = React.useState(true);\r\n const [Message, setMessage] = React.useState(\"\");\r\n const [MessageStyle, setMessageStyle] = React.useState(\"\");\r\n const formRef = React.createRef();\r\n const [filename, setFilename] = React.useState(\"\");\r\n const [size, setSize] = React.useState(null);\r\n const [base64, setBase64] = React.useState(null);\r\n const [type, setType] = React.useState(null);\r\n\r\n const handleClose = (cancel, save, response) => {\r\n setFilename(\"\");\r\n setOpen(false);\r\n props.closeHandler(cancel, save, response);\r\n };\r\n\r\n const cancel = () => {\r\n handleClose(true, false);\r\n };\r\n\r\n const add = () => {\r\n let formValue = formRef.current.getValue();\r\n formValue.Document = {};\r\n formValue.Document.Name = filename;\r\n formValue.Document.size = size;\r\n formValue.Document.type = type;\r\n formValue.Document.base64 = base64;\r\n formValue.OrganisationID = props.OrganisationID;\r\n formValue.FinancialYearID = props.FinancialYearID;\r\n\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n\r\n const url = `api/sims/lodgeappeal/addlodgeappeal`;\r\n\r\n utils.invokeUrl(url, (response) => {\r\n handleClose(false, true, response);\r\n }, () => { handleClose(false, false); },\r\n {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(formValue)\r\n }\r\n );\r\n }\r\n }\r\n\r\n const onUploadHandler = (data) => {\r\n if (data) {\r\n setFilename(data.name);\r\n setSize(data.size);\r\n setBase64(data.base64);\r\n setType(data.type);\r\n setAddDiasbaled(false);\r\n }\r\n }\r\n\r\n React.useEffect(() => {\r\n setOpen(props.open);\r\n }, [props.open]);\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n {\"Organisation > Lodge an Appeal \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n\r\n \r\n\r\n \r\n < LodgeApealSearchForm\r\n // data={this.state.model}\r\n valueChangeHandler={(values) => this.handleFormValueChange(values)}\r\n />\r\n\r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig}\r\n />\r\n\r\n { this.handleSelectionChange(selection) }}\r\n dataUrl=\"api/sims/lodgeappeal/GetSearch\"\r\n searchParameters={this.state.searchParameters}\r\n onCellSelectionChange={(rowid, headCell) => { this.FileDownload(rowid, headCell) }}\r\n clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow}\r\n paged={true} />\r\n
\r\n\r\n this.postAddHandler(cancel, save, response)}\r\n viewRef={this}\r\n OrganisationID={this.props.location.state.organisationID}\r\n />\r\n\r\n this.postAddHandler(cancel, save, response)}\r\n viewRef={this}\r\n />\r\n\r\n { this.remove(\"api/sims/lodgeappeal/removelodgeappeal\") }}\r\n closePrompt={this.closePrompt}\r\n />\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(LodgeAppeal));","\r\nimport React from 'react';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\nconst OrganisationSDFEditForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n\r\n const styles = makeStyles({\r\n TextArea: {\r\n '& .MuiOutlinedInput-inputMultiline': {\r\n height: \"200px !important\",\r\n width: \"600px !important\"\r\n }\r\n }\r\n })\r\n\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\nexport default OrganisationSDFEditForm;","import React from 'react';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport Button from '@material-ui/core/Button';\r\nimport EditForm from './OrganisationSDFEditForm';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport LinkDialog from \"../../etqa/LinkDialog\";\r\nimport LetterReasonDialog from \"../WspAtrForms/Controls/LetterReasonDialog\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport default function OrganisationSDFEditDialog(props) {\r\n\r\n const [open, setOpen] = React.useState(props.open);\r\n const [Message, setMessage] = React.useState(\"\");\r\n const [MessageStyle, setMessageStyle] = React.useState(\"\");\r\n const formRef = React.createRef();\r\n const [selectedLinkType, setSelectedLinkType] = React.useState(null);\r\n const [linkDialogOpen, setLinkDialogOpen] = React.useState(null);\r\n\r\n const handleClose = (cancel, save, response) => {\r\n setOpen(false);\r\n props.closeHandler(cancel, save, response);\r\n };\r\n\r\n const cancel = () => {\r\n handleClose(true, false);\r\n };\r\n\r\n const CheckStatus = () => {\r\n let formValue = formRef.current.getValue();\r\n //formValue.Id = props.Id;\r\n\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n if (formValue.SDFStatusID.Id === \"3\" || formValue.SDFStatusID.Id === 3) { //Rejection\r\n setLinkDialogOpen(true);\r\n setMessage(\"\");\r\n }\r\n else {\r\n update(null);\r\n }\r\n }\r\n }\r\n\r\n const update = (selection) => {\r\n let formValue = formRef.current.getValue();\r\n //formValue.Id = props.Id;\r\n\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n let ReasonsList = \"\";\r\n if (selection !== null) {\r\n for (let i = 0; i < selection.length; i++) {\r\n if (i === 0) { ReasonsList += selection[i].Id; }\r\n else { ReasonsList += \",\" + selection[i].Id; }\r\n\r\n }\r\n }\r\n\r\n let SaveObject = { ...formValue, Reasons: ReasonsList };\r\n\r\n const url = `api/sims/organisationsdf/updateorganisationsdf`;\r\n\r\n utils.invokeUrl(url, (response) => {\r\n handleClose(false, true, response);\r\n }, () => { handleClose(false, false); },\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(SaveObject)\r\n }\r\n );\r\n }\r\n }\r\n\r\n React.useEffect(() => {\r\n setOpen(props.open);\r\n }, [props.open]);\r\n\r\n const postLinkHandler = (isCancel, linked) => {\r\n setLinkDialogOpen(false);\r\n }\r\n\r\n return (\r\n \r\n
\r\n
postLinkHandler(isCancelled, linked)}\r\n dialogTitle=\"Rejection Reasons\"\r\n linkName={\"Rejection\"} linkHandler={(selection) => update(selection)}\r\n selectionId={props.id}\r\n buttonName=\"Save\"\r\n >\r\n \r\n \r\n
\r\n {\"Organisation > SDF \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n\r\n \r\n\r\n \r\n\r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig}\r\n />\r\n\r\n { this.handleSelectionChange(selection) }}\r\n dataUrl=\"api/sims/OrganisationSDF/GetSearch\"\r\n searchParameters={this.state.searchParameters}\r\n clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow}\r\n onCellSelectionChange={(rowid, headCell) => { this.FileDownload(rowid, headCell) }}\r\n paged={true} />\r\n
\r\n\r\n this.postAddHandler(cancel, save, response)}\r\n viewRef={this}\r\n />\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(OrganisationSDF));","import React, { Component, Fragment } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { PDFDownloadLink, Document, Page, StyleSheet, Text, Image, View } from '@react-pdf/renderer';\r\nimport simslogoLoading from '../../../content/images/logos/sims_logo_loading.png';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogContentText from '@material-ui/core/DialogContentText';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst styles = StyleSheet.create({\r\n header: {\r\n fontSize: 20,\r\n marginBottom: 10,\r\n textAlign: 'center',\r\n color: '#114084',\r\n fontWeight : 500\r\n },\r\n text: {\r\n fontSize: 9,\r\n marginBottom: 10,\r\n textAlign: 'left',\r\n color: 'black',\r\n },\r\n body: {\r\n flexDirection: 'column',\r\n padding: 25\r\n },\r\n image: {\r\n marginBottom: 10,\r\n display: 'block',\r\n marginLeft: 'auto',\r\n marginRight: 'auto',\r\n backgroundColor: '#003F6B',\r\n height: '100px',\r\n width: '200px',\r\n padding: 10\r\n },\r\n table: {\r\n display: \"table\",\r\n width: \"auto\",\r\n borderStyle: \"solid\",\r\n borderColor: '#bfbfbf',\r\n borderWidth: 1,\r\n borderRightWidth: 0,\r\n borderBottomWidth: 0\r\n },\r\n tableRow: {\r\n margin: \"auto\",\r\n flexDirection: \"row\"\r\n },\r\n tableColHeader: {\r\n borderStyle: \"solid\",\r\n borderColor: '#bfbfbf',\r\n borderBottomColor: '#000',\r\n borderWidth: 1,\r\n borderLeftWidth: 0,\r\n borderTopWidth: 0,\r\n backgroundColor: '#114084'\r\n },\r\n tableCol: {\r\n borderStyle: \"solid\",\r\n borderColor: '#bfbfbf',\r\n borderWidth: 1,\r\n borderLeftWidth: 0,\r\n borderTopWidth: 0\r\n },\r\n tableCellHeader: {\r\n margin: \"auto\",\r\n margin: 5,\r\n fontSize: 12,\r\n fontWeight: 500,\r\n color: 'white'\r\n },\r\n tableCell: {\r\n margin: \"auto\",\r\n margin: 5,\r\n fontSize: 10\r\n }\r\n});\r\n\r\n\r\nexport default function GrantsLeviesPrint(props) {\r\n\r\n\r\n const initiateHeaderValue = (str) => {\r\n return str\r\n .replace(/(_|-)/g, ' ')\r\n .trim()\r\n .replace(/\\w\\S*/g, function (str) {\r\n return str.charAt(0).toUpperCase() + str.substr(1)\r\n })\r\n .replace(/([a-z])([A-Z])/g, '$1 $2')\r\n .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2')\r\n }\r\n \r\n const GrantData = props.data.GrantSummaryDto.map((innerItem, index) => {\r\n return { Year: innerItem.Year, Description: innerItem.Description, Amount: innerItem.Amount };\r\n });\r\n\r\n const LevyData = props.data.LevySummaryDto.map((innerItem, index) => {\r\n return {\r\n SARSArrivalDate: innerItem.SARSArrivalDate,\r\n DatePosted: innerItem.DatePosted,\r\n StakeholderLevyCalculated: innerItem.StakeholderLevyCalculated,\r\n NSFCalculation: innerItem.NSFCalculation,\r\n TotalReceivedBySETA: innerItem.TotalReceivedBySETA,\r\n MandatoryLevy: innerItem.MandatoryLevy,\r\n Discretionary: innerItem.Discretionary,\r\n Admin: innerItem.Admin,\r\n Penalty: innerItem.Penalty,\r\n Interest: innerItem.Interest\r\n };\r\n });\r\n\r\n const FinSummaryData = props.data.FinancialSummaryDto.map((innerItem, index) => {\r\n return {\r\n SARSArrivalDate: innerItem.SARSArrivalDate,\r\n Year: innerItem.Year,\r\n StakeholderLevyCalculated: innerItem.StakeholderLevyCalculated\r\n };\r\n });\r\n\r\n const GrantContents = GrantData.length !== 0 ?\r\n (\r\n\r\n \r\n \r\n \r\n {Object.keys(GrantData[0]).map((innerItem, index) => (\r\n \r\n {initiateHeaderValue(innerItem)}\r\n \r\n\r\n ))}\r\n \r\n {GrantData.map((dataItem, index) => (\r\n \r\n {Object.keys(dataItem).map((innerItem, index) => (\r\n \r\n {dataItem[innerItem]}\r\n \r\n ))}\r\n\r\n\r\n\r\n \r\n ))}\r\n \r\n \r\n\r\n ) :\r\n null;\r\n\r\n const LevyContents = LevyData.length !== 0 ?\r\n (\r\n\r\n \r\n \r\n \r\n {Object.keys(LevyData[0]).map((innerItem, index) => (\r\n \r\n {initiateHeaderValue(innerItem)}\r\n \r\n\r\n ))}\r\n \r\n {LevyData.map((dataItem, index) => (\r\n \r\n {Object.keys(dataItem).map((innerItem, index) => (\r\n \r\n {dataItem[innerItem]}\r\n \r\n ))}\r\n\r\n\r\n\r\n \r\n ))}\r\n \r\n \r\n\r\n ) :\r\n null;\r\n\r\n const FinSummaryContents = FinSummaryData.length !== 0 ?\r\n (\r\n\r\n \r\n \r\n \r\n {Object.keys(FinSummaryData[0]).map((innerItem, index) => (\r\n \r\n {initiateHeaderValue(innerItem)}\r\n \r\n\r\n ))}\r\n \r\n {FinSummaryData.map((dataItem, index) => (\r\n \r\n {Object.keys(dataItem).map((innerItem, index) => (\r\n \r\n {dataItem[innerItem]}\r\n \r\n ))}\r\n\r\n\r\n\r\n \r\n ))}\r\n \r\n \r\n\r\n ) :\r\n null;\r\n\r\n\r\n const MyDoc = () => (\r\n \r\n \r\n \r\n {props.Section}\r\n {props.data.OrganisationName}\r\n {props.data.SDLNumber}\r\n {props.data.FinancialYear}\r\n {props.data.PhysicalAddress1}\r\n {props.data.PhysicalAddress2}\r\n {props.data.PhysicalAddress3}\r\n {props.data.Municipality}\r\n {props.data.PostalCode}\r\n {props.data.PostalAddress1}\r\n {props.data.PostalAddress2}\r\n {props.data.PostalAddress3}\r\n {props.Section === \"Grant Summary\" || props.Section === \"Financial Summary\" ?\r\n\r\n GrantContents : null\r\n }\r\n {props.Section === \"Levy Summary\" ?\r\n LevyContents : null\r\n }\r\n\r\n {props.Section === \"Financial Summary\" ?\r\n {'\\n'} : null\r\n }\r\n\r\n {props.Section === \"Financial Summary\" ?\r\n \r\n FinSummaryContents : null\r\n }\r\n \r\n \r\n );\r\n\r\n return (\r\n\r\n \r\n \r\n
\r\n \r\n Generate Document for {props.Section}\r\n \r\n } fileName={props.data.OrganisationName + \" - \" + props.data.SDLNumber + \" - \" + props.Section + \" - \" + props.data.FinancialYear} >\r\n {({ blob, url, loading, error }) =>\r\n loading ? 'Generating Document...' : 'Download Document!'\r\n }\r\n \r\n \r\n \r\n
\r\n
\r\n {\"Organisation > Grants and Levies \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n\r\n
this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig} />\r\n\r\n \r\n
\r\n
\r\n \r\n \r\n | \r\n this.handleSection(values)} >\r\n \r\n {Section.map((lookupitem, index) => (\r\n\r\n \r\n\r\n ))}\r\n \r\n | \r\n \r\n this.handleFinancialYear(values)} disabled={this.state.FinYearDisabled}>\r\n \r\n {!utils.isNull(this.state.lookupFinArray) ? this.state.lookupFinArray.map((lookupFinArray, index) => (\r\n\r\n \r\n\r\n )) : null}\r\n \r\n | \r\n
\r\n \r\n
\r\n\r\n
\r\n
\r\n
\r\n {!utils.isNull(this.state.dataObject) ?\r\n\r\n \r\n\r\n \r\n
\r\n
\r\n \r\n \r\n | \r\n \r\n | \r\n \r\n \r\n | \r\n
\r\n \r\n | \r\n \r\n | \r\n \r\n \r\n | \r\n
\r\n\r\n \r\n | \r\n \r\n | \r\n \r\n \r\n | \r\n
\r\n\r\n \r\n | \r\n \r\n | \r\n \r\n \r\n | \r\n
\r\n\r\n \r\n | \r\n \r\n | \r\n \r\n \r\n | \r\n
\r\n \r\n | \r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n
:\r\n \"\"\r\n }\r\n\r\n {\r\n this.state.dataObject.LevySummaryDto.length !== 0 && this.state.SectionID === 2 ?\r\n \r\n
\r\n\r\n\r\n
\r\n \r\n \r\n \r\n Legend\r\n \r\n \r\n \r\n \r\n {this.rows.map((row) => (\r\n \r\n \r\n {row.name}\r\n \r\n {row.description}\r\n \r\n ))}\r\n \r\n
\r\n \r\n
\r\n \r\n
:\r\n \"\"\r\n }\r\n\r\n \r\n :\r\n \"\"\r\n }\r\n\r\n \r\n \r\n \r\n | \r\n handleToolbarButtonClick(buttonId)}\r\n enabled={true}\r\n config={toolbarConfig} />\r\n | \r\n
\r\n \r\n \r\n
\r\n \r\n {props.location.state.FinancialYearID === null ? PLEASE SELECT FINANCIAL YEAR
:\r\n \r\n \r\n\r\n \r\n { \"Levies\"} \r\n \r\n \r\n \r\n Organisation Legal Name\r\n {OrganisationName} \r\n \r\n \r\n Trade Name\r\n \r\n {TradeName} \r\n \r\n \r\n Year of Statement\r\n \r\n {FinancialYear} \r\n \r\n \r\n Postal Address\r\n \r\n {PostalAddressLine1} \r\n \r\n \r\n Contact Telephone Number\r\n\r\n \r\n {ContactTelephoneNumber} \r\n \r\n \r\n Fax Number\r\n\r\n \r\n {FaxNumber} \r\n \r\n \r\n Municipality \r\n\r\n \r\n {Municipality} \r\n \r\n \r\n Physical Address\r\n \r\n {PhysicalAddressLine1} \r\n \r\n \r\n \r\n Legend \r\n \r\n\r\n\r\n\r\n\r\n\r\n \r\n Receipt Date\r\n Date of payment to SARS \r\n \r\n \r\n Received by SETA \r\n \r\n Date the money was received by SETA from the \r\n Department of Labour \r\n \r\n \r\n Year of Statement\r\n \r\n \r\n Stakeholder Levy \r\n Calculated (100%)\r\n \r\n \r\n \r\n \r\n The sum of the levy received by SETA + NSF \r\n calculation + interest + penalty\r\n \r\n \r\n NSF Calculation \r\n (20%) \r\n \r\n \r\n Contact Telephone Number\r\n\r\n \r\n Levy amount calculated as transferred to the \r\n National Skills Fund by SARS (20% of total levy), done to balance your actual payment made with the \r\n money received by SETA. \r\n \r\n \r\n \r\n Total received by SETA (80%)\r\n\r\n \r\n Levy amount received by SETA (80% of total levy) \r\n \r\n \r\n Mandatory Levy (50%)\r\n\r\n \r\n The % of the total levy received by SETA allowable for the mandatory grant. \r\n \r\n \r\n Discretionary (20%)\r\n \r\n The % of the total levy received by SETA allowable for the discretionary grant. \r\n \r\n \r\n Admin (10%)\r\n \r\n The 10% of the total levy received by SETA allowable for SETA admin. \r\n \r\n \r\n Interest (80%)\r\n \r\n SETA receive 80% of the interest charged by SARS as calculated by SARS \r\n \r\n \r\n Penalty (80%)\r\n \r\n SETA receive 80% of the penalties charged by SARS as calculated by SARS \r\n \r\n \r\n SARS month \r\n\r\n \r\n For internal office use only. \r\n \r\n \r\n
\r\n }\r\n\r\n \r\n );\r\n }\r\n\r\nexport default Levies;","import React, { useState, useEffect } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nconst formRef = React.createRef();\r\n\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#01579B',\r\n color: theme.palette.common.white,\r\n },\r\n body: {\r\n fontSize: 11,\r\n },\r\n }))(TableCell);\r\n\r\n const StyledTableTextCell = withStyles((theme) => ({\r\n body: {\r\n fontSize: 14,\r\n fontWeight: 500\r\n },\r\n }))(TableCell);\r\n \r\n const StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n height: theme.palette.action.main\r\n },\r\n },\r\n }))(TableRow);\r\n \r\n function createData(number, form, description, duedate, select) {\r\n return { number, form, description, duedate, select };\r\n }\r\n const useStyles = makeStyles({\r\n table: {\r\n minWidth: 700,\r\n },\r\n });\r\n\r\n \r\nconst userRef = React.createRef();\r\nconst toolbarConfig = {\r\n items: [\r\n \r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n {\r\n id: 'close', label: 'Close', tooltip: ''\r\n },\r\n {\r\n id: 'print', label: 'Print Friendly', tooltip: '',\r\n },\r\n ]\r\n }\r\n ]\r\n};\r\n\r\n\r\nconst Grants = (props)=> {\r\n const classes = useStyles();\r\n const [FinancialYear, setFinancialYear] = useState(null)\r\n const [showViewButton, setShow] = React.useState(true);\r\n const [OrganisationName, setOrganisationName] = useState('')\r\n const [TradeName, setTradeName] = useState('')\r\n const [Status, setStatus] = useState('')\r\n const [SDLNumber, setSDLNumber]= useState('')\r\n const [PhysicalAddressLine1, setPhysicalAddressLine1]= useState('')\r\n const [FaxNumber, setFaxNumber]= useState('')\r\n const [PhysicalAddressLine2, setPhysicalAddressLine2]= useState('')\r\n const [PhysicalAddressLine3, setPhysicalAddressLine3]= useState('')\r\n const [Municipality, setMunicipality]= useState('')\r\n const [ContactTelephoneNumber, setContactTelephoneNumber]= useState('')\r\n const [PostalCode, setPostalCode]= useState('')\r\n const [PostalAddressLine1, setPostalAddressLine1]= useState('')\r\n const [PostalAddressLine2, setPostalAddressLine2]= useState('')\r\n const [PostalAddressLine3, setPostalAddressLine3]= useState('')\r\n const [id, setId] = useState(props.location.state.selection)\r\n\r\n const handleToolbarButtonClick=(buttonId)=> {\r\n if(\"close\" === buttonId){ \r\n props.history.push({\r\n pathname: '/skillsOrganisationLevies',\r\n state: { selection: props.location.state.preSelectedProp \r\n }\r\n });\r\n }else{\r\n //print Friendly\r\n }\r\n }\r\n\r\n\r\n useEffect(()=>{\r\n console.log(props.location.state.FinancialYearID)\r\n console.log(props.location.state.selection)\r\n getGrantData(id)\r\n }, [])\r\n \r\n\r\n const getGrantData=(id)=>{\r\n console.log(\"GETTING DATA\")\r\n // let url = \"api/sims/dgapplication/getfindheader?DGApplicationID=\"+id;\r\n // utils.invokeUrl(url, (response) => {\r\n // setOrganisationName(response.OrganisationName)\r\n // setStatus(response.Status)\r\n // },\r\n // null,\r\n // {\r\n // method: 'GET',\r\n // headers: {\r\n // 'Accept': 'application/json',\r\n // 'Content-Type': 'application/json',\r\n // 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n // }\r\n // }\r\n // )\r\n }\r\n\r\n \r\n return (\r\n \r\n \r\n \r\n \r\n | \r\n handleToolbarButtonClick(buttonId)}\r\n enabled={true}\r\n config={toolbarConfig} />\r\n | \r\n
\r\n \r\n \r\n
\r\n\r\n\r\n \r\n {props.location.state.FinancialYearID === null ? PLEASE SELECT FINANCIAL YEAR
:\r\n \r\n \r\n\r\n \r\n { \"Discretionary Grants\"} \r\n \r\n \r\n \r\n Organisation Legal Name\r\n {OrganisationName} \r\n \r\n \r\n Trade Name\r\n \r\n {TradeName} \r\n \r\n \r\n Year of Statement\r\n \r\n {FinancialYear} \r\n \r\n \r\n Postal Address\r\n \r\n {PostalAddressLine1} \r\n \r\n \r\n Contact Telephone Number\r\n\r\n \r\n {ContactTelephoneNumber} \r\n \r\n \r\n Fax Number\r\n\r\n \r\n {FaxNumber} \r\n \r\n \r\n Municipality \r\n\r\n \r\n {Municipality} \r\n \r\n \r\n Physical Address\r\n \r\n {PhysicalAddressLine1} \r\n \r\n \r\n \r\n Legend \r\n \r\n\r\n\r\n\r\n\r\n\r\n \r\n Receipt Date\r\n Date of payment to SARS \r\n \r\n \r\n Received by SETA \r\n \r\n Date the money was received by SETA from the \r\n Department of Labour \r\n \r\n \r\n Year of Statement\r\n \r\n \r\n Stakeholder Levy \r\n Calculated (100%)\r\n \r\n \r\n \r\n \r\n The sum of the levy received by SETA + NSF \r\n calculation + interest + penalty\r\n \r\n \r\n NSF Calculation \r\n (20%) \r\n \r\n\r\n \r\n \r\n
\r\n }\r\n\r\n \r\n );\r\n }\r\nexport default Grants;\r\n\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport Button from '@material-ui/core/Button';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nconst formRef = React.createRef();\r\n\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#01579B',\r\n color: theme.palette.common.white,\r\n },\r\n body: {\r\n fontSize: 11,\r\n },\r\n }))(TableCell);\r\n\r\n const StyledTableTextCell = withStyles((theme) => ({\r\n body: {\r\n fontSize: 14,\r\n fontWeight: 500\r\n },\r\n }))(TableCell);\r\n \r\n const StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n height: theme.palette.action.main\r\n },\r\n },\r\n }))(TableRow);\r\n \r\n function createData(number, form, description, duedate, select) {\r\n return { number, form, description, duedate, select };\r\n }\r\n const useStyles = makeStyles({\r\n table: {\r\n minWidth: 700,\r\n },\r\n });\r\n\r\n \r\nconst userRef = React.createRef();\r\nconst toolbarConfig = {\r\n items: [\r\n \r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n {\r\n id: 'close', label: 'Close', tooltip: '',\r\n\r\n },\r\n {\r\n id: 'print', label: 'Print Friendly', tooltip: '',\r\n \r\n },\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst DiscretionaryGrants = (props)=> {\r\n const classes = useStyles();\r\n const [FinancialYear, setFinancialYear] = useState(null)\r\n const [showViewButton, setShow] = React.useState(true);\r\n const [OrganisationName, setOrganisationName] = useState('')\r\n const [TradeName, setTradeName] = useState('')\r\n const [Status, setStatus] = useState('')\r\n const [SDLNumber, setSDLNumber]= useState('')\r\n const [PhysicalAddressLine1, setPhysicalAddressLine1]= useState('')\r\n const [FaxNumber, setFaxNumber]= useState('')\r\n const [PhysicalAddressLine2, setPhysicalAddressLine2]= useState('')\r\n const [PhysicalAddressLine3, setPhysicalAddressLine3]= useState('')\r\n const [Municipality, setMunicipality]= useState('')\r\n const [ContactTelephoneNumber, setContactTelephoneNumber]= useState('')\r\n const [PostalCode, setPostalCode]= useState('')\r\n const [PostalAddressLine1, setPostalAddressLine1]= useState('')\r\n const [PostalAddressLine2, setPostalAddressLine2]= useState('')\r\n const [PostalAddressLine3, setPostalAddressLine3]= useState('')\r\n const [id, setId] = useState(props.location.state.selection)\r\n\r\n\r\n\r\n const handleToolbarButtonClick=(buttonId)=> {\r\n if(\"close\" === buttonId){ \r\n props.history.push({\r\n pathname: '/skillsOrganisationLevies',\r\n state: { selection: props.location.state.preSelectedProp \r\n }\r\n });\r\n }else{\r\n //print Friendly\r\n }\r\n }\r\n\r\n\r\n useEffect(()=>{\r\n console.log(props.location.state.FinancialYearID)\r\n console.log(props.location.state.selection)\r\n getDiscretionaryGrantData(id)\r\n }, [])\r\n \r\n\r\n const getDiscretionaryGrantData=(id)=>{\r\n console.log(\"GETTING DATA\")\r\n // let url = \"api/sims/dgapplication/getfindheader?DGApplicationID=\"+id;\r\n // utils.invokeUrl(url, (response) => {\r\n // setOrganisationName(response.OrganisationName)\r\n // setStatus(response.Status)\r\n // },\r\n // null,\r\n // {\r\n // method: 'GET',\r\n // headers: {\r\n // 'Accept': 'application/json',\r\n // 'Content-Type': 'application/json',\r\n // 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n // }\r\n // }\r\n // )\r\n }\r\n\r\n \r\n return (\r\n \r\n \r\n \r\n \r\n | \r\n handleToolbarButtonClick(buttonId)}\r\n enabled={true}\r\n config={toolbarConfig} />\r\n | \r\n
\r\n \r\n \r\n
\r\n\r\n {props.location.state.FinancialYearID === null ? PLEASE SELECT FINANCIAL YEAR
:\r\n \r\n \r\n\r\n \r\n { \"Discretionary Grants\"} \r\n \r\n \r\n \r\n Organisation Legal Name\r\n {OrganisationName} \r\n \r\n \r\n Trade Name\r\n \r\n {TradeName} \r\n \r\n \r\n Year of Statement\r\n \r\n {FinancialYear} \r\n \r\n \r\n Postal Address\r\n \r\n {PostalAddressLine1} \r\n \r\n \r\n Contact Telephone Number\r\n\r\n \r\n {ContactTelephoneNumber} \r\n \r\n \r\n Fax Number\r\n\r\n \r\n {FaxNumber} \r\n \r\n \r\n Municipality \r\n\r\n \r\n {Municipality} \r\n \r\n \r\n Physical Address\r\n \r\n {PhysicalAddressLine1} \r\n \r\n \r\n \r\n Legend \r\n \r\n\r\n\r\n\r\n\r\n\r\n \r\n Receipt Date\r\n Date of payment to SARS \r\n \r\n \r\n Received by SETA \r\n \r\n Date the money was received by SETA from the \r\n Department of Labour \r\n \r\n \r\n Year of Statement\r\n \r\n \r\n Stakeholder Levy \r\n Calculated (100%)\r\n \r\n \r\n \r\n \r\n The sum of the levy received by SETA + NSF \r\n calculation + interest + penalty\r\n \r\n \r\n NSF Calculation \r\n (20%) \r\n \r\n\r\n \r\n \r\n
\r\n }\r\n\r\n \r\n );\r\n }\r\n\r\n export default DiscretionaryGrants;\r\n\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nexport default function InterSetaTransferForm(props) {\r\n const [labelWidth, setLabelWidth, tabValue] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n","import React from 'react';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport Button from '@material-ui/core/Button';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport DocumentUpload from '../../widgets/DocumentUpload';\r\nimport ViewUtils from \"./../../ViewUtils\";\r\n\r\nconst utils = new ViewUtils();\r\nexport default function ExperientialLearningDialog(props) {\r\n\r\n const [open, setOpen] = React.useState(props.open);\r\n const [filename, setFilename] = React.useState(props.fileName);\r\n const [size, setSize] = React.useState(null);\r\n const [base64, setBase64] = React.useState(null);\r\n const [type, setType] = React.useState(null);\r\n const [entityId, setEntityId] = React.useState(props.EntityID);\r\n\r\n React.useEffect(() => {\r\n if (!utils.isNull(props.EntityID)) {\r\n setEntityId(props.EntityID);\r\n }\r\n }, [props.EntityID]);\r\n\r\n const handleClose = (save, cancel) => {\r\n setOpen(false);\r\n props.closeHandler(save, cancel)\r\n };\r\n\r\n\r\n const cancel = () => {\r\n handleClose(false, true);\r\n };\r\n\r\n const save = () => {\r\n let data = {};\r\n data.OriginalFileName = filename;\r\n data.EntityID = entityId;\r\n data.ExperienceWork = props.ExperienceWork;\r\n data.ExperienceWorkDateFrom = props.ExperienceWorkDateFrom;\r\n data.ExperienceWorkDateTo = props.ExperienceWorkDateTo;\r\n data.ReferenceTitle = props.ReferenceTitleID.Id;\r\n data.NatureOfWork = props.NatureOfWork;\r\n data.ReferenceName = props.ReferenceName;\r\n data.ReferenceSurname = props.ReferenceSurname;\r\n data.ReferenceContactNumber = props.ReferenceContactNumber;\r\n data.WhereExperientialWorWasUndertaken = props.WhereExperientialWorWasUndertaken;\r\n data.Document = {};\r\n data.Document.name = filename;\r\n data.Document.size = size;\r\n data.Document.type = type;\r\n data.Document.base64 = base64;\r\n\r\n utils.invokeUrl(props.postUrl, (response) => {\r\n handleClose(true, false);\r\n }, () => { handleClose(false, false); },\r\n {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(data)\r\n }\r\n );\r\n }\r\n\r\n const onUploadHandler = (data) => {\r\n if (data) {\r\n setFilename(data.name);\r\n props._setFilename(data.name);\r\n console.log(\"EXP doc\");\r\n setSize(data.size);\r\n setBase64(data.base64);\r\n setType(data.type);\r\n }\r\n }\r\n\r\n React.useEffect(() => {\r\n setOpen(props.open);\r\n }, [props.open]);\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n {props.ReferenceTitleID!==undefined && (\r\n \r\n )}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {\"Organisation > Inter Seta Transfer \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n\r\n \r\n\r\n \r\n\r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig}\r\n />\r\n\r\n { this.handleSelectionChange(selection) }}\r\n dataUrl=\"api/sims/InterSetaTransfer/GetSearch\"\r\n searchParameters={this.state.searchParameters}\r\n onCellSelectionChange={(rowid, headCell) => { this.FileDownload(rowid, headCell) }}\r\n clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow}\r\n paged={true} />\r\n
\r\n\r\n this.postAddHandler(cancel, save, response)}\r\n viewRef={this}\r\n OrganisationID={this.props.location.state.organisationID}\r\n />\r\n\r\n this.postAddHandler(cancel, save, response)}\r\n viewRef={this}\r\n />\r\n\r\n { this.remove(\"api/sims/InterSetaTransfer/RemoveOrganisationIST\") }}\r\n closePrompt={this.closePrompt}\r\n \r\n />\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(LodgeAppeal));","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { EntityForm } from '../../widgets/Forms';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nexport default function SDFComplianceLetterForm(props) {\r\n const [labelWidth, setLabelWidth, tabValue] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport { ViewContainer } from \"../../View.jsx\";\r\nimport SearchView from \"./../../widgets/SearchView\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport SDFComplianceLetterForm from './SDFComplianceLetterForm'\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\n\r\nconst headCells = [\r\n { id: 'SDLNumber', numeric: false, disablePadding: true, label: 'SDL Number' },\r\n { id: 'LegalName', numeric: false, disablePadding: true, label: 'Legal Name' },\r\n { id: 'FinancialYear', numeric: false, disablePadding: true, label: 'Financial Year' },\r\n { id: 'WSPStatus', numeric: false, disablePadding: true, label: 'WSP Status' }\r\n];\r\n\r\nclass SDFComplianceLetter extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n model: {\r\n Id: this.props.location.state.selection\r\n },\r\n addDialogOpen: false,\r\n selected: false,\r\n searchParameters: [{ Name: \"OrganisationID\", Value: this.props.location.state.organisationID }, { Name: \"FinancialYearID\", Value: 0 }],\r\n clearSelectedRow: false,\r\n selectedID: null,\r\n clearSelectedRow: false\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n }\r\n ,\r\n {\r\n type: \"devider\"\r\n },\r\n\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'email', label: '', tooltip: 'Email SDF Compliance Letter', icon: 'EmailIcon', disabled: !this.selected },\r\n { id: 'download', label: '', tooltip: 'Download SDF Compliance Letter', icon: 'DownloadIcon', disabled: !this.selected }\r\n ]\r\n }\r\n ]\r\n }\r\n }\r\n\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (buttonId === \"email\") {\r\n this.FileEmail(this.state.selectedID)\r\n } if (buttonId === \"download\") {\r\n this.FileDownload(this.state.selectedID);\r\n } else if (buttonId === \"close\") {\r\n this.props.history.push({\r\n pathname: \"/skillsOrganisation\",\r\n state: { selection: this.props.location.state.organisationID }\r\n })\r\n }\r\n }\r\n\r\n handleFormValueChange(values) {\r\n let FinancialYearID = values.FinancialYearID.Id;\r\n let newsearchParameters = [...this.state.searchParameters];\r\n let temp_element = { ...newsearchParameters[1] };\r\n temp_element.Value = FinancialYearID\r\n newsearchParameters[1] = temp_element;\r\n\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(newsearchParameters)),\r\n FinancialYearID: FinancialYearID\r\n });\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedID: selection[0].Id, Message: \"\" });\r\n } else {\r\n this.setState({ selectedID: null, Message: \"\" });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"email\", selection === null || selection.length === 0);\r\n toolbarRef.current.setButtonDisabled(\"download\", selection === null || selection.length === 0);\r\n }\r\n\r\n FileDownload = () => {\r\n\r\n const url = `api/sims/SDFComplianceLetter/ViewSDFComplianceLetter`;\r\n\r\n utils.invokeApiPut(\r\n JSON.stringify({\r\n \"OrganisationID\": this.props.location.state.organisationID,\r\n \"FinancialYearID\": this.state.FinancialYearID\r\n }),\r\n url,\r\n (response) => {\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n if (!utils.isNull(response.Name) && response.Name !== \"\") {\r\n this.setState({\r\n Message: \"SDF Compliance Letter successfully downloaded\",\r\n MessageStyle: \"SUCCESS\",\r\n showMessage: true,\r\n clearSelectedRow: true\r\n });\r\n }\r\n else {\r\n this.setState({\r\n Message: \"Error downloading SDF Compliance Letter.\",\r\n MessageStyle: \"ERROR\",\r\n showMessage: true,\r\n clearSelectedRow: true\r\n });\r\n }\r\n\r\n toolbarRef.current.setButtonDisabled(\"email\", true);\r\n toolbarRef.current.setButtonDisabled(\"download\", true);\r\n }\r\n );\r\n };\r\n\r\n FileEmail = () => {\r\n\r\n const url = `api/sims/SDFComplianceLetter/EmailSDFComplianceLetter`;\r\n\r\n utils.invokeApiPut(\r\n JSON.stringify({\r\n \"OrganisationID\": this.props.location.state.organisationID,\r\n \"FinancialYearID\": this.state.FinancialYearID\r\n }),\r\n url,\r\n (response) => {\r\n this.setState({\r\n Message: response.Message,\r\n MessageStyle: response.MessageType,\r\n showMessage: true,\r\n clearSelectedRow: true\r\n });\r\n toolbarRef.current.setButtonDisabled(\"email\", true);\r\n toolbarRef.current.setButtonDisabled(\"download\", true);\r\n },\r\n this.error\r\n );\r\n }\r\n\r\n \r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n onClearSelectedRow = () => {\r\n this.setState({ clearSelectedRow: false });\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Organisation > SDF Compliance Letter \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n\r\n \r\n\r\n this.handleFormValueChange(values)}\r\n />\r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig}\r\n />\r\n\r\n { this.handleSelectionChange(selection) }}\r\n dataUrl=\"api/sims/SDFComplianceLetter/GetSearch\"\r\n searchParameters={this.state.searchParameters}\r\n paged={true}\r\n clearSelectedRow={this.state.clearSelectedRow}\r\n onClearSelectedRow={this.onClearSelectedRow} />\r\n\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(SDFComplianceLetter);\r\n","import React from 'react';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport Button from '@material-ui/core/Button';\r\nimport DocumentUpload from '../../widgets/DocumentUpload';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport default function EmployerFileImportDialog(props) {\r\n\r\n const [open, setOpen] = React.useState(props.open);\r\n const [AddDiasbaled, setAddDiasbaled] = React.useState(true);\r\n const [Message, setMessage] = React.useState(\"\");\r\n const [MessageStyle, setMessageStyle] = React.useState(\"\");\r\n const formRef = React.createRef();\r\n const [filename, setFilename] = React.useState(\"\");\r\n const [size, setSize] = React.useState(null);\r\n const [base64, setBase64] = React.useState(null);\r\n const [type, setType] = React.useState(null);\r\n const [showReport, setShowReport] = React.useState(false);\r\n const [documentName, setDocumentName] = React.useState(\"\");\r\n\r\n const handleClose = (cancel, save, response) => {\r\n setFilename(\"\");\r\n setOpen(false);\r\n props.closeHandler(cancel, save, response);\r\n };\r\n\r\n const cancel = () => {\r\n setMessage('');\r\n setMessageStyle('');\r\n setAddDiasbaled(true);\r\n setFilename(\"\");\r\n setShowReport(false);\r\n handleClose(true, false);\r\n };\r\n\r\n const add = () => {\r\n //console.clear();\r\n let data = {};\r\n data.Document = {};\r\n data.Document.Name = filename;\r\n data.Document.size = size;\r\n data.Document.type = type;\r\n data.Document.base64 = base64;\r\n\r\n if (\r\n !(\r\n filename.split(\".\")[1] === \"SDL\"\r\n )\r\n ) {\r\n setMessage(\"Unknown file format. Only SDL files are uploaded!\");\r\n setMessageStyle('ERROR');\r\n setAddDiasbaled(true);\r\n setFilename(\"\");\r\n return false;\r\n }\r\n const url = `api/sims/EmployerFileImport/BulkImport`;\r\n\r\n if (data !== null && typeof data !== 'undefined') {\r\n utils.invokeUrl(url, (response) => {\r\n handleClose(false, true, response);\r\n }, () => {\r\n handleClose(false, false);\r\n },\r\n {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(data)\r\n }\r\n );\r\n } \r\n }\r\n\r\n const successCallback = (response) => {\r\n setMessage('Import Completed');\r\n setMessageStyle('SUCCESS');\r\n setShowReport(true);\r\n setDocumentName(response.Message);\r\n setAddDiasbaled(true);\r\n setFilename(\"\");\r\n }\r\n\r\n const error = (response) => {\r\n setMessage(response.Message);\r\n setMessageStyle(response.MessageType);\r\n }\r\n\r\n const onUploadHandler = (data) => {\r\n if (data) {\r\n setMessage('');\r\n setMessageStyle('');\r\n setFilename(data.name);\r\n setSize(data.size);\r\n setBase64(data.base64);\r\n setType(data.type);\r\n setAddDiasbaled(false);\r\n //console.log(data);\r\n }\r\n }\r\n\r\n const ReportDownload = () => {\r\n\r\n utils.invokeUrl(\"api/sims/EmployerFileImport/BulkUploadGetReport?FileName=\" + documentName, (response) => {\r\n\r\n var blob = new Blob([base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n setMessage('Report Download Failed');\r\n setMessageStyle('ERROR');\r\n }\r\n );\r\n\r\n };\r\n\r\n const base64ToArrayBuffer = (base64) => {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n React.useEffect(() => {\r\n setOpen(props.open);\r\n }, [props.open]);\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {this.state.showReport ? { this.ReportDownload() }}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n download\r\n style={{ textDecoration: \"underline\" }}\r\n >Download Report : null}\r\n | \r\n
\r\n \r\n
\r\n
\r\n {\"Skills College Reports\"}\r\n
\r\n \r\n { this.onkeyup(e) }}\r\n valueChangeHandler={(values) => {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(values)) {\r\n this.setState({ model: values });\r\n }\r\n }}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(ETQAReportSearch));\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n}));\r\n\r\nexport default function ProviderSearch(props) {\r\n const [labelWidth, setLabelWidth] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n | \r\n\r\n \r\n \r\n SDL Number\r\n \r\n props.model.SDLNumber = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n\r\n \r\n \r\n Legal Name\r\n \r\n props.model.LegalName = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n \r\n \r\n Trade Name\r\n \r\n props.model.TradeName = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n {\"Skills College Reports \" + (this.state.ETQAReportDetails.ReportName !== null ? \"> \" + this.state.ETQAReportDetails.ReportName : \"> Add\")}\r\n
\r\n \r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)} enabled={true} config={toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} />\r\n | \r\n
\r\n \r\n | \r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\nexport default withRouter(ETQAReport);\r\n","import React from 'react';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\n\r\nexport default function SkillsReportSearchForm(props) {\r\n\r\n return (\r\n \r\n {form => \r\n }\r\n \r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./SkillsReport.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport SkillsReportSearchForm from './SkillsReportSearchForm';\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\n\r\nconst headCells = [\r\n { id: 'ReportName', numeric: false, disablePadding: true, label: 'Report Name' },\r\n { id: 'ReportDescription', numeric: false, disablePadding: true, label: 'Report Description' }\r\n];\r\n\r\nclass SkillsReportSearch extends Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.searchParameters = [\r\n { Name: \"ReportName\", Value: \"\" },\r\n { Name: \"ReportDescription\", Value: \"\" },\r\n ]\r\n\r\n let model = {\r\n ReportName: \"\",\r\n ReportDescription: \"\"\r\n };\r\n\r\n this.state = {\r\n model: model,\r\n keyUpSwitch: false,\r\n };\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'edit', label: '', tooltip: 'Run Report', icon: 'EditIcon', disabled: true }\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Skills Reports\"}\r\n
\r\n \r\n { this.onkeyup(e) }}\r\n valueChangeHandler={(values) => {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(values)) {\r\n this.setState({ model: values });\r\n }\r\n }}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(SkillsReportSearch));\r\n","import React from 'react';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport const SkillsReportForm = React.forwardRef((props, ref) => {\r\n\r\n const paramArray = !utils.isNull(props.skillsReportDetails) && !utils.isNull(props.skillsReportDetails.ReportParameters) ? props.skillsReportDetails.ReportParameters.split(\",\") : [];\r\n\r\n const getName = (name) => {\r\n let text = name.slice(0, -2)\r\n let newText = [];\r\n newText.push(text[0]);\r\n\r\n for (var i = 1; i < text.length; i++) {\r\n if (checkUppercase(text[i]) && !checkUppercase(text[i - 1]) && !checkPuctuation(text[i - 1])) {\r\n newText.push(' ');\r\n }\r\n else if (checkDigit(text[i]) && checkLetter(text[i - 1])) {\r\n newText.push(' ');\r\n }\r\n else if (i < text.length - 1) {\r\n if (checkUppercase(text[i]) && (!checkUppercase(text[i + 1]) && text[i + 1] !== \" \" && text[i + 1] !== \")\" && text[i + 1] !== \"'\") && !checkPuctuation(text[i - 1])) {\r\n newText.push(' ');\r\n }\r\n }\r\n\r\n newText.push(text[i]);\r\n }\r\n return newText.join(\"\").replace(\" \", \" \");\r\n }\r\n\r\n const checkUppercase = (value) => {\r\n if (value === value.toUpperCase()) {\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n }\r\n\r\n const checkPuctuation = (value) => {\r\n if (value === \".\") {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n }\r\n\r\n const checkDigit = (value) => {\r\n if (Number.isInteger(value)) {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n }\r\n\r\n const checkLetter = (str) => {\r\n return str.length === 1 && str.match(/[a-z]/i);\r\n }\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./SkillsReport.css\";\r\nimport { SkillsReportForm } from './SkillsReportForm';\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst SkillsReportRef = React.createRef();\r\nconst utils = new ViewUtils();\r\n\r\nclass SkillsReport extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n skillsReportDetails: \"\",\r\n model: {}\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n let url = \"api/sims/Skillsreportsdetails/GetFind?SkillsReportID=\" + this.props.location.state.selection;\r\n utils.invokeUrl(url, (data) => {\r\n this.setState({ skillsReportDetails: data });\r\n }, (e) => {\r\n this.setState({ message: \"Unable to get report details. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n }\r\n\r\n handleFormValueChange(values) {\r\n this.setState({ model: values });\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.closeView();\r\n }\r\n }\r\n\r\n closeView() {\r\n this.props.history.push('/SkillsReportSearch');\r\n }\r\n\r\n handleExecuteReport = () => {\r\n\r\n let searchParameters = [];\r\n const properties = Object.getOwnPropertyNames(this.state.model);\r\n if (!utils.isNull(properties) && properties.length > 0) {\r\n for (let i = 0; i < properties.length; i++) {\r\n let searchParameter = {};\r\n searchParameter.Name = properties[i];\r\n searchParameter.Value = this.state.model[properties[i]];\r\n searchParameters.push(searchParameter);\r\n }\r\n }\r\n\r\n searchParameters.push({ Name: \"SkillsReportID\", Value: this.props.location.state.selection })\r\n\r\n utils.invokeUrl(\"api/sims/SkillsReportsDetails/GetSkillsReportsExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Skills Reports \" + (this.state.skillsReportDetails.ReportName !== null ? \"> \" + this.state.skillsReportDetails.ReportName : \"> Add\")}\r\n
\r\n \r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)} enabled={true} config={toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} />\r\n | \r\n
\r\n \r\n | \r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\nexport default withRouter(SkillsReport);\r\n","import React from 'react';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n}));\r\n\r\nexport default function MasterFilesSearchForm(props) {\r\n const [labelWidth, setLabelWidth] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n | \r\n \r\n \r\n Report Name\r\n\t\t\t\t\t\t\t\t\r\n props.model.FirstName = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n \r\n \r\n Report Description \r\n\t\t\t\t\t\t\t\t\r\n props.model.Surname = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n Legal Name\r\n\t\t\t\t\t\t\t\t\r\n \r\n \r\n \r\n \r\n Trade Name\r\n\t\t\t\t\t \r\n \r\n \r\n \r\n \r\n SDL Number\r\n\t\t\t\t\t\t\t\t\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Provider Accreditation Number\r\n\t\t\t\t\t\t\t\t\r\n \r\n \r\n \r\n \r\n Accreditation Status\r\n\t\t\t\t\t\t\t\t\r\n \r\n \r\n \r\n \r\n Province\r\n\t\t\t\t\t \r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport ProviderSearchForm from './ProviderSearchForm';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport CardLayout from '../../widgets/Card';\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst headCells = [\r\n { id: \"OFOCode\", numeric: false, disablePadding: true, label: \"OFO Code\" },\r\n { id: \"OFODescription\", numeric: false, disablePadding: true, label: \"OFO Description\" }\r\n]\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'info', label: '', tooltip: 'Select OFO Occupation from the table and click save to add', icon: 'InfoIcon' }\r\n ]\r\n }\r\n ]\r\n}\r\n\r\nconst searchParameters = [\r\n { Name: \"LegalName\", value: \"\" },\r\n { Name: \"SDLNumber\", value: \"\" },\r\n { Name: \"TradeName\", value: \"\" },\r\n { Name: \"ProviderAccreditationNumber\", value: \"\" },\r\n { Name: \"AccreditationStatus\", value: \"\" },\r\n { Name: \"Province\", value: \"\" }\r\n]\r\n\r\nclass ProviderSearch extends Component {\r\n state = {\r\n model: {\r\n LegalName: \"\",\r\n SDLNumber: \"\",\r\n TradeName: \"\",\r\n ProviderAccreditationNumber: \"\",\r\n AccreditationStatus: \"\",\r\n Province: \"\"\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(ProviderSearch)\r\n);","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\nimport { Col, Row, Button } from \"react-bootstrap\";\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n}));\r\n\r\nexport default function EmployerSearchForm(props) {\r\n const [labelWidth, setLabelWidth] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n Legal Name\r\n\t\t\t\t\t\t\t\t\r\n props.model.OrganisationLegalName = ev.target.value}\r\n labelWidth={labelWidth}\r\n onKeyPress={props.onKeyUp}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n Trade Name\r\n\t\t\t\t\t\t\t\t\r\n props.model.OrganisationTradeName = ev.target.value}\r\n labelWidth={labelWidth}\r\n onKeyPress={props.onKeyUp}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n SDL Number\r\n\t\t\t\t\t\t\t\t\r\n props.model.OrganisationSdlNumber = ev.target.value}\r\n labelWidth={labelWidth}\r\n onKeyPress={props.onKeyUp}\r\n />\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Employer.css\";\r\nimport EmployerSearchForm from './EmployerSearchForm';\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport CardLayout from '../../widgets/Card';\r\n\r\nconst headCells = [\r\n { id: 'OrganisationLegalName', numeric: false, disablePadding: false, label: 'Organisation Legal Name', widthRatio: .5 },\r\n { id: 'OrganisationSDLNumber', numeric: false, disablePadding: false, label: 'Organisation SDL Number', widthRatio: .25 },\r\n { id: 'OrganisationTradeName', numeric: false, disablePadding: false, label: 'Organisation Trade Name', widthRatio: .25 }\r\n];\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Add', icon: 'AddIcon', modes: 'default,lookup' },\r\n { id: 'edit', label: '', tooltip: 'Edit', icon: 'EditIcon', modes: 'default' }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst searchParameters = [{ Name: \"OrganisationTradeName\", Value: \"\" },\r\n{ Name: \"OrganisationSDLNumber\", Value: \"\" },\r\n{ Name: \"OrganisationLegalName\", Value: \"\" }];\r\n\r\nclass EmployerSearch extends Component {\r\n\r\n state = {\r\n model: { OrganisationTradeName: \"\", OrganisationSDLNumber: \"\", OrganisationLegalName: \"\" },\r\n keyUpSwitch: false\r\n };\r\n\r\n onkeyup(e) {\r\n //console.log(e.charCode)\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n { this.onkeyup(e) }}/>\r\n \r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nexport default connect()(EmployerSearch);\r\n","import React from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel, { FormTabContainer } from '../../widgets/TabPanel';\r\nimport { Col, Button } from \"react-bootstrap\";\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport ProviderSearch from './ProviderSearch';\r\nimport EmployeeSearch from './EmployerSearch';\r\nimport { LookupField } from '../../widgets/LookupField';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport const MasterFileForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n \r\n );\r\n})","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./MasterFile.css\";\r\nimport { MasterFileForm } from './MasterFileForm';\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close' },\r\n { id: 'save', label: 'SAVE', tooltip: 'Save', icon: 'SaveIcon' }\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'Report Detail', label: 'Report Detail', tooltip: 'Report Detail' }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst masterfileRef = React.createRef();\r\nconst utils = new ViewUtils();\r\n\r\nclass MasterFile extends Component {\r\n\r\n state = {\r\n masterfileDetails: {\r\n FirstName: \"\",\r\n Surname: \"\",\r\n }\r\n };\r\n\r\n handleFormValueChange(values) {\r\n this.setState({ sdfDetails: values });\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"save\" === buttonId) {\r\n this.save();\r\n } else if (\"close\" === buttonId) {\r\n this.closeView();\r\n } else if (\"organisationDetails\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/sdfOrgDetails'\r\n });\r\n }\r\n }\r\n\r\n handleToolbarButtonMenuClick(menu) {\r\n if (\"organisationDetails\" === menu.id) {\r\n this.props.history.push({\r\n pathname: '/providerAccreditationDetails',\r\n state: {\r\n sdfID: this.props.location.state.selection,\r\n sdfName: this.state.sdfDetails.FirstName\r\n }\r\n })\r\n }\r\n }\r\n save() {\r\n let formValue = masterfileRef.current.getValue();\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n let data = JSON.stringify(formValue);\r\n const url = `api/indicium/provider/updateProviderDetails?data=${data}`;\r\n // TODO : Invoke spinner mask\r\n fetch(url)\r\n .then(res => res.json())\r\n .then((responseJson) => {\r\n let response = JSON.parse(responseJson);\r\n if (response.MessageType !== \"ERROR\") {\r\n this.props.history.push({\r\n pathname: '/provider',\r\n state: {\r\n sdfID: this.props.location.state.selection,\r\n sdfName: this.state.sdfDetails.FirstName\r\n }\r\n });\r\n } else {\r\n this.setState({ saveMessage: response.Message, hasSaveError: true });\r\n }\r\n }).catch(() => {\r\n this.setState({ saveMessage: \"A system error has accured. Please contact your system administrator\", hasSaveError: true });\r\n });\r\n }\r\n \r\n }\r\n\r\n closeView() {\r\n this.props.history.push({\r\n pathname: '/sdfSearch',\r\n state: { selection: this.props.location.state.sdfID }\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.state.message}\r\n
\r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n buttonMenuClickHandler={(menu) => this.handleToolbarButtonMenuClick(menu)} enabled={true} config={toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n \r\n this.handleFormValueChange(values)} />\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n }\r\n\r\n\r\nexport default withRouter(MasterFile);\r\n","import React from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel, { FormTabContainer } from '../../widgets/TabPanel';\r\nimport { Col, Button } from \"react-bootstrap\";\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport const SETMISFileForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n\r\n \r\n );\r\n})","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./SETMISFile.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport { SETMISFileForm } from './SETMISFileForm';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport CardLayout from '../../widgets/Card';\r\n\r\nconst headCells = [\r\n { id: 'ReportName', numeric: false, disablePadding: true, label: 'Report Name' },\r\n { id: 'ReportDescription', numeric: false, disablePadding: true, label: 'Report Description' }\r\n];\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Add', icon: 'AddIcon' },\r\n { id: 'edit', label: '', tooltip: 'Edit', icon: 'EditIcon' }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst searchParameters = [\r\n { Name: \"Report Name\", Value: \"\" },\r\n { Name: \"Report Description\", Value: \"\" },\r\n]\r\n\r\nclass SETMISFileSearch extends Component {\r\n\r\n state = {\r\n model: {\r\n ReportName: \"\",\r\n ReportDescription: \"\"\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n {this.state.message}\r\n
\r\n
\r\n \r\n \r\n | \r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n {this.state.message}\r\n
\r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)}\r\n buttonMenuClickHandler={(menu) => this.handleToolbarButtonMenuClick(menu)} enabled={true} config={toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} />\r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n }\r\n\r\n\r\nexport default withRouter(SETMISFile);\r\n","import React from 'react';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\n\r\nexport default function DGReportSearchForm(props) {\r\n\r\n return (\r\n \r\n {form => \r\n }\r\n \r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./DGReport.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport DGReportSearchForm from './DGReportSearchForm';\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\n\r\nconst headCells = [\r\n { id: 'ReportName', numeric: false, disablePadding: true, label: 'Report Name' },\r\n { id: 'ReportDescription', numeric: false, disablePadding: true, label: 'Report Description' }\r\n];\r\n\r\nclass DGReportSearch extends Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.searchParameters = [\r\n { Name: \"ReportName\", Value: \"\" },\r\n { Name: \"ReportDescription\", Value: \"\" },\r\n ]\r\n\r\n let model = {\r\n ReportName: \"\",\r\n ReportDescription: \"\"\r\n };\r\n\r\n this.state = {\r\n model: model,\r\n keyUpSwitch: false,\r\n };\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'edit', label: '', tooltip: 'Run Report', icon: 'EditIcon', disabled: true }\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"DG Reports\"}\r\n
\r\n \r\n { this.onkeyup(e) }}\r\n valueChangeHandler={(values) => {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(values)) {\r\n this.setState({ model: values });\r\n }\r\n }}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(DGReportSearch));\r\n","import React from 'react';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport const DGReportForm = React.forwardRef((props, ref) => {\r\n\r\n const paramArray = !utils.isNull(props.dgReportDetails) && !utils.isNull(props.dgReportDetails.ReportParameters) ? props.dgReportDetails.ReportParameters.split(\",\") : [];\r\n\r\n const getName = (name) => {\r\n let text = name.slice(0, -2)\r\n let newText = [];\r\n newText.push(text[0]);\r\n\r\n for (var i = 1; i < text.length; i++) {\r\n if (checkUppercase(text[i]) && !checkUppercase(text[i - 1]) && !checkPuctuation(text[i - 1])) {\r\n newText.push(' ');\r\n }\r\n else if (checkDigit(text[i]) && checkLetter(text[i - 1])) {\r\n newText.push(' ');\r\n }\r\n else if (i < text.length - 1) {\r\n if (checkUppercase(text[i]) && (!checkUppercase(text[i + 1]) && text[i + 1] !== \" \" && text[i + 1] !== \")\" && text[i + 1] !== \"'\") && !checkPuctuation(text[i - 1])) {\r\n newText.push(' ');\r\n }\r\n }\r\n\r\n newText.push(text[i]);\r\n }\r\n return newText.join(\"\").replace(\" \", \" \");\r\n }\r\n\r\n const checkUppercase = (value) => {\r\n if (value === value.toUpperCase()) {\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n }\r\n\r\n const checkPuctuation = (value) => {\r\n if (value === \".\") {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n }\r\n\r\n const checkDigit = (value) => {\r\n if (Number.isInteger(value)) {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n }\r\n\r\n const checkLetter = (str) => {\r\n return str.length === 1 && str.match(/[a-z]/i);\r\n }\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./DGReport.css\";\r\nimport { DGReportForm } from './DGReportForm';\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst DGReportRef = React.createRef();\r\nconst utils = new ViewUtils();\r\n\r\nclass DGReport extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n dgReportDetails: \"\",\r\n model: {}\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n let url = \"api/sims/dggrantreportsdetails/GetFind?DGGrantsReportID=\" + this.props.location.state.selection;\r\n utils.invokeUrl(url, (data) => {\r\n this.setState({ dgReportDetails: data });\r\n }, (e) => {\r\n this.setState({ message: \"Unable to get report details. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n }\r\n\r\n handleFormValueChange(values) {\r\n this.setState({ model: values });\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.closeView();\r\n }\r\n }\r\n\r\n closeView() {\r\n this.props.history.push('/DGReportSearch');\r\n }\r\n\r\n handleExecuteReport = () => {\r\n\r\n let searchParameters = [];\r\n const properties = Object.getOwnPropertyNames(this.state.model);\r\n if (!utils.isNull(properties) && properties.length > 0) {\r\n for (let i = 0; i < properties.length; i++) {\r\n let searchParameter = {};\r\n searchParameter.Name = properties[i];\r\n searchParameter.Value = this.state.model[properties[i]];\r\n searchParameters.push(searchParameter);\r\n }\r\n }\r\n\r\n searchParameters.push({ Name: \"DGGrantsReportID\", Value: this.props.location.state.selection })\r\n\r\n utils.invokeUrl(\"api/sims/DGGrantReportsDetails/GetGrantReportsExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"DG Reports \" + (this.state.dgReportDetails.ReportName !== null ? \"> \" + this.state.dgReportDetails.ReportName : \"> Add\")}\r\n
\r\n \r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)} enabled={true} config={toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} />\r\n | \r\n
\r\n \r\n | \r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\nexport default withRouter(DGReport);\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nclass CustomReports extends Component {\r\n state = {\r\n UniqueID: null,\r\n CustomReportingToolPath: null\r\n };\r\n\r\n componentDidMount() {\r\n let url = \"api/sims/customreports/retrieveUniqueID\";\r\n utils.invokeUrl(url, (data) => {\r\n this.setState({ UniqueID: data.UniqueID, CustomReportingToolPath: data.CustomReportingToolPath });\r\n }, (e) => {\r\n this.setState({ messsageAlert: utils.SYSTEM_ERROR_MESSAGE, messageStyle: \"outlinedError\", clearGrid: true });\r\n });\r\n }\r\n\r\n render() {\r\n\r\n const URL = window.location.origin\r\n ? window.location.origin + '/' + this.state.CustomReportingToolPath + '/Default.aspx?UniqueID=' + this.state.UniqueID\r\n : window.location.protocol + '/' + window.location.host + '/' + this.state.CustomReportingToolPath + '/Default.aspx?UniqueID=' + this.state.UniqueID;\r\n\r\n return (\r\n \r\n \r\n {\"Custom Reports\"}\r\n
\r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withRouter(CustomReports);","import React from 'react';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\n\r\nexport default function AdminReportSearchForm(props) {\r\n\r\n return (\r\n \r\n {form => \r\n }\r\n \r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./AdminReport.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport AdminReportSearchForm from './AdminReportSearchForm';\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\n\r\nconst headCells = [\r\n { id: 'ReportName', numeric: false, disablePadding: true, label: 'Report Name' },\r\n { id: 'ReportDescription', numeric: false, disablePadding: true, label: 'Report Description' }\r\n];\r\n\r\nclass AdminReportSearch extends Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.searchParameters = [\r\n { Name: \"ReportName\", Value: \"\" },\r\n { Name: \"ReportDescription\", Value: \"\" },\r\n ]\r\n\r\n let model = {\r\n ReportName: \"\",\r\n ReportDescription: \"\"\r\n };\r\n\r\n this.state = {\r\n model: model,\r\n keyUpSwitch: false,\r\n };\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'edit', label: '', tooltip: 'Run Report', icon: 'EditIcon', disabled: true }\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Admin Reports\"}\r\n
\r\n \r\n { this.onkeyup(e) }}\r\n valueChangeHandler={(values) => {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(values)) {\r\n this.setState({ model: values });\r\n }\r\n }}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(AdminReportSearch));\r\n","import React from 'react';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport const AdminReportForm = React.forwardRef((props, ref) => {\r\n\r\n const paramArray = !utils.isNull(props.AdminReportDetails) && !utils.isNull(props.AdminReportDetails.ReportParameters) ? props.AdminReportDetails.ReportParameters.split(\",\") : [];\r\n\r\n const getName = (name) => {\r\n let text = name.slice(0, -2)\r\n let newText = [];\r\n newText.push(text[0]);\r\n\r\n for (var i = 1; i < text.length; i++) {\r\n if (checkUppercase(text[i]) && !checkUppercase(text[i - 1]) && !checkPuctuation(text[i - 1])) {\r\n newText.push(' ');\r\n }\r\n else if (checkDigit(text[i]) && checkLetter(text[i - 1])) {\r\n newText.push(' ');\r\n }\r\n else if (i < text.length - 1) {\r\n if (checkUppercase(text[i]) && (!checkUppercase(text[i + 1]) && text[i + 1] !== \" \" && text[i + 1] !== \")\" && text[i + 1] !== \"'\") && !checkPuctuation(text[i - 1])) {\r\n newText.push(' ');\r\n }\r\n }\r\n\r\n newText.push(text[i]);\r\n }\r\n return newText.join(\"\").replace(\" \", \" \");\r\n }\r\n\r\n const checkUppercase = (value) => {\r\n if (value === value.toUpperCase()) {\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n }\r\n\r\n const checkPuctuation = (value) => {\r\n if (value === \".\") {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n }\r\n\r\n const checkDigit = (value) => {\r\n if (Number.isInteger(value)) {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n }\r\n\r\n const checkLetter = (str) => {\r\n return str.length === 1 && str.match(/[a-z]/i);\r\n }\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./AdminReport.css\";\r\nimport { AdminReportForm } from './AdminReportForm';\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst AdminReportRef = React.createRef();\r\nconst utils = new ViewUtils();\r\n\r\nclass AdminReport extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n AdminReportDetails: \"\",\r\n model: {}\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n let url = \"api/sims/Adminreportsdetails/GetFind?AdminReportID=\" + this.props.location.state.selection;\r\n utils.invokeUrl(url, (data) => {\r\n this.setState({ AdminReportDetails: data });\r\n }, (e) => {\r\n this.setState({ message: \"Unable to get report details. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n }\r\n\r\n handleFormValueChange(values) {\r\n this.setState({ model: values });\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.closeView();\r\n }\r\n }\r\n\r\n closeView() {\r\n this.props.history.push('/AdminReportSearch');\r\n }\r\n\r\n handleExecuteReport = () => {\r\n\r\n let searchParameters = [];\r\n const properties = Object.getOwnPropertyNames(this.state.model);\r\n if (!utils.isNull(properties) && properties.length > 0) {\r\n for (let i = 0; i < properties.length; i++) {\r\n let searchParameter = {};\r\n searchParameter.Name = properties[i];\r\n searchParameter.Value = this.state.model[properties[i]];\r\n searchParameters.push(searchParameter);\r\n }\r\n }\r\n\r\n searchParameters.push({ Name: \"AdminReportID\", Value: this.props.location.state.selection })\r\n\r\n utils.invokeUrl(\"api/sims/AdminReportsDetails/GetAdminReportsExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Admin Reports \" + (this.state.AdminReportDetails.ReportName !== null ? \"> \" + this.state.AdminReportDetails.ReportName : \"> Add\")}\r\n
\r\n \r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)} enabled={true} config={toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} />\r\n | \r\n
\r\n \r\n | \r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\nexport default withRouter(AdminReport);\r\n","import React from 'react';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\n\r\nexport default function ProviderReportSearchForm(props) {\r\n\r\n return (\r\n \r\n {form => \r\n }\r\n \r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./ProviderReport.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport ProviderReportSearchForm from './ProviderReportSearchForm';\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\n\r\nconst headCells = [\r\n { id: 'ReportName', numeric: false, disablePadding: true, label: 'Report Name' },\r\n { id: 'ReportDescription', numeric: false, disablePadding: true, label: 'Report Description' }\r\n];\r\n\r\nclass ProviderReportSearch extends Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.searchParameters = [\r\n { Name: \"ReportName\", Value: \"\" },\r\n { Name: \"ReportDescription\", Value: \"\" },\r\n ]\r\n\r\n let model = {\r\n ReportName: \"\",\r\n ReportDescription: \"\"\r\n };\r\n\r\n this.state = {\r\n model: model,\r\n keyUpSwitch: false,\r\n };\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'edit', label: '', tooltip: 'Run Report', icon: 'EditIcon', disabled: true }\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Provider Reports\"}\r\n
\r\n \r\n { this.onkeyup(e) }}\r\n valueChangeHandler={(values) => {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(values)) {\r\n this.setState({ model: values });\r\n }\r\n }}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(ProviderReportSearch));\r\n","import React from 'react';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from \"../../ViewUtils\";\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { LookupField } from '../../widgets/LookupField';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { CustomCheckbox } from '../../widgets/CustomCheckbox';\r\nimport ProviderSearch from '../Controls/ProviderSearch';\r\nimport AssessorSearch from \"../../etqa/assessor/AssessorSearch\";\r\nimport ModeratorSearch from \"../../etqa/moderator/ModeratorSearch\";\r\nimport EmployerSearch from \"../../etqa/employer/EmployerSearch\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport const ProviderReportForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const paramArray = !utils.isNull(props.ProviderReportDetails) && !utils.isNull(props.ProviderReportDetails.ReportParameters) ? props.ProviderReportDetails.ReportParameters.split(\",\") : [];\r\n\r\n const getName = (name) => {\r\n let text;\r\n if (name.slice(-2).includes(\"ID\")) {\r\n text = name.slice(0, -2);\r\n } else {\r\n text = name;\r\n }\r\n\r\n let newText = [];\r\n newText.push(text[0]);\r\n\r\n for (var i = 1; i < text.length; i++) {\r\n if (checkUppercase(text[i]) && !checkUppercase(text[i - 1]) && !checkPuctuation(text[i - 1])) {\r\n newText.push(' ');\r\n }\r\n else if (checkDigit(text[i]) && checkLetter(text[i - 1])) {\r\n newText.push(' ');\r\n }\r\n else if (i < text.length - 1) {\r\n if (checkUppercase(text[i]) && (!checkUppercase(text[i + 1]) && text[i + 1] !== \" \" && text[i + 1] !== \")\" && text[i + 1] !== \"'\") && !checkPuctuation(text[i - 1])) {\r\n newText.push(' ');\r\n }\r\n }\r\n\r\n newText.push(text[i]);\r\n }\r\n return newText.join(\"\").replace(\" \", \" \");\r\n }\r\n\r\n const checkUppercase = (value) => {\r\n if (value === value.toUpperCase()) {\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n }\r\n\r\n const checkPuctuation = (value) => {\r\n if (value === \".\") {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n }\r\n\r\n const checkDigit = (value) => {\r\n if (Number.isInteger(value)) {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n }\r\n\r\n const checkLetter = (str) => {\r\n return str.length === 1 && str.match(/[a-z]/i);\r\n }\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./ProviderReport.css\";\r\nimport { ProviderReportForm } from './ProviderReportForm';\r\nimport ViewUtils from \"../../ViewUtils\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst ProviderReportRef = React.createRef();\r\nconst utils = new ViewUtils();\r\n\r\nclass ProviderReport extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n ProviderReportDetails: \"\",\r\n model: {}\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n let url = \"api/sims/Providerreportsdetails/GetFind?ProviderReportID=\" + this.props.location.state.selection;\r\n utils.invokeUrl(url, (data) => {\r\n const parameters = data.ReportParameters.split(',');\r\n let model = {};\r\n for (const parameter of parameters) {\r\n if (parameter === \"ProviderID\") {\r\n model[\"ProviderID\"] = null;\r\n } else if (parameter === \"AssessorID\") {\r\n model[\"AssessorID\"] = null;\r\n } else if (parameter === \"ModeratorID\") {\r\n model[\"ModeratorID\"] = null;\r\n } else if (parameter === \"EmployerID\") {\r\n model[\"EmployerID\"] = null;\r\n }\r\n }\r\n this.setState({ ProviderReportDetails: data, model: model });\r\n }, (e) => {\r\n this.setState({ message: \"Unable to get report details. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n }\r\n\r\n handleFormValueChange(values) {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(values)) {\r\n this.setState({ model: values });\r\n }\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.closeView();\r\n }\r\n }\r\n\r\n closeView() {\r\n this.props.history.push('/ProviderReportSearch');\r\n }\r\n\r\n handleExecuteReport = () => {\r\n\r\n let searchParameters = [];\r\n const properties = Object.getOwnPropertyNames(this.state.model);\r\n if (!utils.isNull(properties) && properties.length > 0) {\r\n for (let i = 0; i < properties.length; i++) {\r\n let searchParameter = {};\r\n searchParameter.Name = properties[i];\r\n searchParameter.Value = this.state.model[properties[i]];\r\n searchParameters.push(searchParameter);\r\n }\r\n }\r\n\r\n searchParameters.push({ Name: \"ProviderReportID\", Value: this.props.location.state.selection })\r\n\r\n utils.invokeUrl(\"api/sims/ProviderReportsDetails/GetProviderReportsExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Provider Reports \" + (this.state.ProviderReportDetails.ReportName !== null ? \"> \" + this.state.ProviderReportDetails.ReportName : \"> Add\")}\r\n
\r\n \r\n \r\n \r\n \r\n | \r\n this.handleToolbarButtonClick(buttonId)} enabled={true} config={toolbarConfig} />\r\n | \r\n
\r\n \r\n | \r\n this.handleFormValueChange(values)} />\r\n | \r\n
\r\n \r\n | \r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\nexport default withRouter(ProviderReport);\r\n","import React from 'react';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { LookupField } from '../../widgets/LookupField';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport ProviderSearch from \"../provider/ProviderSearch\";\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst ProviderDocumentSearchForm = React.forwardRef((props, ref) => {\r\n const [dependency, setDependency] = React.useState(props.dependency);\r\n\r\n React.useEffect(() => {\r\n setDependency(props.dependency);\r\n }, [props.dependency]);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\nexport default ProviderDocumentSearchForm;","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport ProviderDocumentSearchForm from './ProviderDocumentSearchForm';\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst headCells = [\r\n { id: 'ProviderLegalName', numeric: false, disablePadding: true, label: 'Provider Legal Name' },\r\n { id: \"ProviderTradeName\", numeric: false, disablePadding: true, label: \"Provider Trade Name\" },\r\n { id: \"ProviderSDLNumber\", numeric: false, disablePadding: true, label: \"Provider SDL Number\" },\r\n]\r\n\r\nconst searchParameters = [\r\n //{ Name: \"DocumentType\", Value: \"\" },\r\n //{ Name: \"PrintType\", Value: \"\" },\r\n //{ Name: \"AccreditationStatus\", Value: \"\" },\r\n { Name: \"ProviderID\", Value: \"\" },\r\n]\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nconst searchFormRef = React.createRef();\r\n\r\nclass ProviderDocuments extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n model: {\r\n //DocumentType: null,\r\n //PrintTypeID: null,\r\n //AccreditationStatus: null,\r\n ProviderID: null\r\n },\r\n selectedProviders: null,\r\n keyUpSwitch: false,\r\n clearGrid: false,\r\n documentsGenerated: false,\r\n messsageAlert: null,\r\n messageStyle: null\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n {id: 'generate', label: 'Generate', icon: 'CreateIcon', tooltip: 'Generate letters / certificates',disabled: utils.isNull(this.state.selectedProviders)}\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (\"generate\" === buttonId) {\r\n this.generateDocuments();\r\n toolbarRef.current.setButtonDisabled(\"generate\", true);\r\n }\r\n }\r\n\r\n FileDownload = (documentName) => {\r\n\r\n utils.invokeUrl(\"api/sims/providerletters/DownloadProviderLetters?FileName=\" + documentName, (response) => {\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n toolbarRef.current.setButtonDisabled(\"download\", true);\r\n }, (e) => {\r\n this.setState({ messsageAlert: utils.SYSTEM_ERROR_MESSAGE, messageStyle: \"outlinedError\" });\r\n }\r\n );\r\n\r\n };\r\n\r\n generateDocuments = () => {\r\n const ProviderIDs = this.state.selectedProviders.map(e => e.Id);\r\n let data = {\r\n ProviderIDs: ProviderIDs,\r\n ...this.state.model\r\n }\r\n let url = \"api/sims/providerletters/GenerateProviderLetters\";\r\n utils.invokeUrl(url, (response) => {\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n let documentInfo = JSON.parse(response.Message);\r\n this.FileDownload(documentInfo.OriginalFileName);\r\n toolbarRef.current.setButtonDisabled(\"download\", !this.state.documentGenerated);\r\n },\r\n null,\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(data)\r\n }\r\n )\r\n };\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedProviders: selection, Message: \"\" },\r\n () => {\r\n toolbarRef.current.setButtonDisabled(\"generate\", selection.length === 0);\r\n }\r\n )\r\n } else {\r\n this.setState({ selectedProviders: null, Message: \"\" },\r\n () => {\r\n toolbarRef.current.setButtonDisabled(\"generate\", selection.length === 0);\r\n }\r\n )\r\n }\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ propmtOpen: false })\r\n }\r\n\r\n handleFormValueChange = (values) => {\r\n let newValues = null;\r\n if (!utils.isNull(values)) {\r\n newValues = { ...values };\r\n }\r\n if (!utils.isNull(newValues)) {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(newValues)) {\r\n this.setState({\r\n model: newValues,\r\n clearGrid: true,\r\n selectedAssessors: null,\r\n Message: \"\"\r\n });\r\n toolbarRef.current.setButtonDisabled(\"generate\", true);\r\n }\r\n }\r\n }\r\n\r\n onSearchRequiredFieldCheck = () => {\r\n if (searchFormRef.current.getValue()) {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n }\r\n\r\n onGridCleared = () => {\r\n this.setState({ clearGrid: false });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n { this.handleSelectionChange(selection) }}\r\n autoFetchData={false}\r\n toolbarRef={toolbarRef}\r\n onSearchRequiredFieldCheck={this.onSearchRequiredFieldCheck}\r\n clearGrid={this.state.clearGrid}\r\n onGridCleared={this.onGridCleared}\r\n title={\"Provider Documents\"}\r\n >\r\n { this.onkeyup(e) }}\r\n model={this.state.model}\r\n valueChangeHandler={this.handleFormValueChange}\r\n //dependency={this.state.dependency}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(ProviderDocuments)\r\n);","import React from 'react';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { LookupField } from '../../widgets/LookupField';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport ProviderSearch from \"../provider/ProviderSearch\";\r\nimport AssessorSearch from \"../assessor/AssessorSearch\";\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport default function AssessorDocumentSearchForm(props) {\r\n const [dependency, setDependency] = React.useState(props.dependency);\r\n\r\n React.useEffect(() => {\r\n setDependency(props.dependency);\r\n }, [props.dependency]);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport AssessorDocumentSearchForm from './AssessorDocumentSearchForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\nconst headCells = [\r\n { id: \"AssessorName\", numeric: false, disablePadding: true, label: 'Assessor Name' },\r\n { id: \"AssessorSurname\", numeric: false, disablePadding: true, label: \"Assessor Surname\" },\r\n { id: \"AssessorRegistrationNumber\", numeric: false, disablePadding: true, label: \"Assessor Registration Number\" }\r\n]\r\n\r\nconst searchParameters = [\r\n //{ Name: \"DocumentType\", Value: \"\" },\r\n //{ Name: \"PrintType\", Value: \"\" },\r\n //{ Name: \"Provider\", Value: \"\" },\r\n { Name: \"AssessorID\", Value: \"\" }\r\n]\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nconst searchFormRef = React.createRef();\r\n\r\nclass AssessorDocuments extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n model: {\r\n //DocumentType: null,\r\n //PrintType: null,\r\n //Provider: {Description: \"\", Id: null},\r\n AssessorID: null\r\n },\r\n selectedAssessors: null,\r\n keyUpSwitch: false,\r\n clearGrid: false,\r\n documentsGenerated: false,\r\n messsageAlert: null,\r\n messageStyle: null\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n {id: 'generate', label: 'Generate', icon: 'CreateIcon', tooltip: 'Generate letters / certificates',disabled: utils.isNull(this.state.selectedAssessors)}\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (\"generate\" === buttonId) {\r\n this.generateDocuments();\r\n toolbarRef.current.setButtonDisabled(\"generate\", true);\r\n }\r\n }\r\n\r\n FileDownload = (documentName) => {\r\n\r\n utils.invokeUrl(\"api/sims/assessorletters/DownloadAssessorLetters?FileName=\" + documentName, (response) => {\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n toolbarRef.current.setButtonDisabled(\"download\", true);\r\n }, (e) => {\r\n this.setState({ messsageAlert: utils.SYSTEM_ERROR_MESSAGE, messageStyle: \"outlinedError\" });\r\n }\r\n );\r\n\r\n };\r\n\r\n generateDocuments = () => {\r\n const AssessorIDs = this.state.selectedAssessors.map(e => e.Id);\r\n let data = {\r\n AssessorIDs: AssessorIDs,\r\n ...this.state.model\r\n }\r\n let url = \"api/sims/assessorletters/GenerateAssessorLetters\";\r\n utils.invokeUrl(url, (response) => {\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n let documentInfo = JSON.parse(response.Message);\r\n this.FileDownload(documentInfo.OriginalFileName);\r\n toolbarRef.current.setButtonDisabled(\"download\", !this.state.documentGenerated);\r\n },\r\n null,\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(data)\r\n }\r\n )\r\n };\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedAssessors: selection, Message: \"\" },\r\n () => {\r\n toolbarRef.current.setButtonDisabled(\"generate\", selection.length === 0);\r\n }\r\n )\r\n } else {\r\n this.setState({ selectedAssessors: null, Message: \"\" },\r\n () => {\r\n toolbarRef.current.setButtonDisabled(\"generate\", selection.length === 0);\r\n }\r\n )\r\n }\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ propmtOpen: false })\r\n }\r\n\r\n handleFormValueChange = (values) => {\r\n let newValues = null;\r\n if (!utils.isNull(values)) {\r\n newValues = { ...values };\r\n }\r\n if (!utils.isNull(newValues)) {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(newValues)) {\r\n this.setState({\r\n model: newValues,\r\n clearGrid: true,\r\n selectedAssessors: null,\r\n Message: \"\"\r\n });\r\n toolbarRef.current.setButtonDisabled(\"generate\", true);\r\n }\r\n }\r\n }\r\n\r\n onGridCleared = () => {\r\n this.setState({ clearGrid: false });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n { this.handleSelectionChange(selection) }}\r\n autoFetchData={false}\r\n toolbarRef={toolbarRef}\r\n clearGrid={this.state.clearGrid}\r\n onGridCleared={this.onGridCleared}\r\n title={\"Assessor Documents\"}\r\n >\r\n { this.onkeyup(e) }}\r\n model={this.state.model}\r\n valueChangeHandler={this.handleFormValueChange}\r\n dependency={this.state.dependency}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(AssessorDocuments)\r\n);","import React from 'react';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { LookupField } from '../../widgets/LookupField';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport ProviderSearch from \"../provider/ProviderSearch\";\r\nimport ModeratorSearch from \"../moderator/ModeratorSearch\";\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nexport default function ModeratorDocumentSearchForm(props) {\r\n const [dependency, setDependency] = React.useState(props.dependency);\r\n\r\n React.useEffect(() => {\r\n setDependency(props.dependency);\r\n }, [props.dependency]);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport ModeratorDocumentSearchForm from './ModeratorDocumentSearchForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\nconst headCells = [\r\n { id: \"ModeratorName\", numeric: false, disablePadding: true, label: 'Moderator Name' },\r\n { id: \"ModeratorSurname\", numeric: false, disablePadding: true, label: \"Moderator Surname\" },\r\n { id: \"ModeratorRegistrationNumber\", numeric: false, disablePadding: true, label: \"Moderator Registration Number\" }\r\n]\r\n\r\nconst searchParameters = [\r\n { Name: \"ModeratorID\", Value: \"\" },\r\n //{ Name: \"ProviderId\", Value: \"\" },\r\n]\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nconst searchFormRef = React.createRef();\r\n\r\nclass ModeratorDocuments extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n model: {\r\n ModeratorID: null,\r\n //Provider: { Description: \"\", Id: \"\" }\r\n },\r\n selectedModerators: null,\r\n keyUpSwitch: false,\r\n clearGrid: false,\r\n documentsGenerated: false,\r\n messsageAlert: null,\r\n messageStyle: null\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n {id: 'generate', label: 'Generate', icon: 'CreateIcon', tooltip: 'Generate letters / certificates',disabled: utils.isNull(this.state.selectedModerators)}\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (\"generate\" === buttonId) {\r\n this.generateDocuments();\r\n toolbarRef.current.setButtonDisabled(\"generate\", true);\r\n }\r\n }\r\n\r\n FileDownload = (documentName) => {\r\n\r\n utils.invokeUrl(\"api/sims/moderatorletters/DownloadModeratorLetters?FileName=\" + documentName, (response) => {\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n toolbarRef.current.setButtonDisabled(\"download\", true);\r\n }, (e) => {\r\n this.setState({ messsageAlert: utils.SYSTEM_ERROR_MESSAGE, messageStyle: \"outlinedError\" });\r\n }\r\n );\r\n\r\n };\r\n\r\n generateDocuments = () => {\r\n const ModeratorIDs = this.state.selectedModerators.map(e => e.Id);\r\n let data = {\r\n ModeratorIDs: ModeratorIDs,\r\n ...this.state.model\r\n }\r\n let url = \"api/sims/moderatorletters/GenerateModeratorLetters\";\r\n utils.invokeUrl(url, (response) => {\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n let documentInfo = JSON.parse(response.Message);\r\n this.FileDownload(documentInfo.OriginalFileName);\r\n toolbarRef.current.setButtonDisabled(\"download\", !this.state.documentGenerated);\r\n },\r\n null,\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(data)\r\n }\r\n )\r\n };\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedModerators: selection, Message: \"\" },\r\n () => {\r\n toolbarRef.current.setButtonDisabled(\"generate\", selection.length === 0);\r\n }\r\n )\r\n } else {\r\n this.setState({ selectedModerators: null, Message: \"\" },\r\n () => {\r\n toolbarRef.current.setButtonDisabled(\"generate\", selection.length === 0);\r\n }\r\n )\r\n }\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ propmtOpen: false })\r\n }\r\n\r\n handleFormValueChange = (values) => {\r\n let newValues = null;\r\n if (!utils.isNull(values)) {\r\n newValues = { ...values };\r\n }\r\n if (!utils.isNull(newValues)) {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(newValues)) {\r\n this.setState({\r\n model: newValues,\r\n clearGrid: true,\r\n selectedModerators: null,\r\n Message: \"\"\r\n });\r\n toolbarRef.current.setButtonDisabled(\"generate\", true);\r\n }\r\n }\r\n }\r\n\r\n onGridCleared = () => {\r\n this.setState({ clearGrid: false });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n { this.handleSelectionChange(selection) }}\r\n autoFetchData={false}\r\n toolbarRef={toolbarRef}\r\n clearGrid={this.state.clearGrid}\r\n onGridCleared={this.onGridCleared}\r\n title={\"Moderator Documents\"}\r\n >\r\n { this.onkeyup(e) }}\r\n model={this.state.model}\r\n valueChangeHandler={this.handleFormValueChange}\r\n dependency={this.state.dependency}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(ModeratorDocuments)\r\n);","import React from 'react';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { LookupField } from '../../widgets/LookupField';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport ProviderSearch from \"../provider/ProviderSearch\";\r\nimport EmployerSearch from \"../employer/EmployerSearch\";\r\nimport LearnerSearch from \"../learner/LearnerSearch\";\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport QualificationSetupSearch from '../program/QualificationSetupSearch';\r\nimport LearnershipSetupSearch from '../program/LearnershipSetupSearch';\r\nimport SkillsProgramSetupSearch from '../program/SkillsProgramSetupSearch';\r\nimport UnitStandardSetupSearch from '../program/UnitStandardSetupSearch';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst LearnerDocumentSearchForm = React.forwardRef((props, ref) => {\r\n const [dependency, setDependency] = React.useState(props.dependency);\r\n\r\n React.useEffect(() => {\r\n setDependency(props.dependency);\r\n }, [props.dependency]);\r\n\r\n const onCheckFieldValitationArray = (fields, values) => {\r\n if (values.DocumentTypeID !== null && values.DocumentTypeID.Id === \"2\") {\r\n fields = fields.filter(e => e.id !== \"PrintTypeID\");\r\n }\r\n console.log(fields);\r\n return fields;\r\n }\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\nexport default LearnerDocumentSearchForm;","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport LearnerDocumentSearchForm from './LearnerDocumentSearchForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\nconst headCells = [\r\n { id: \"LearnerIDNumber\", numeric: false, disablePadding: true, label: \"Learner ID Number\" },\r\n { id: \"LearnerName\", numeric: false, disablePadding: true, label: \"Learner Name\" },\r\n { id: \"InterventionCode\", numeric: false, disablePadding: true, label: \"Intervention Code\" },\r\n { id: \"InterventionDescription\", numeric: false, disablePadding: true, label: \"Intervention Description\" },\r\n { id: \"TrainingProviderName\", numeric: false, disablePadding: true, label: \"Training Provider Name\" },\r\n]\r\n\r\nconst searchParameters = [\r\n { Name: \"DocumentTypeID\", Value: \"\" },\r\n { Name: \"PrintTypeID\", Value: \"\" },\r\n { Name: \"ProgrammeTypeID\", Value: \"\" },\r\n { Name: \"ProgrammeID\", Value: \"\" },\r\n { Name: \"ProviderID\", Value: \"\" },\r\n { Name: \"LearnerID\", Value: \"\" },\r\n { Name: \"EmployerID\", Value: \"\" }\r\n]\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nconst searchFormRef = React.createRef();\r\n\r\nclass LearnerDocuments extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n model: {\r\n DocumentTypeID: null,\r\n PrintTypeID: null,\r\n ProgrammeTypeID: null,\r\n ProgrammeID: null,\r\n ProviderID: null,\r\n EmployerID: null,\r\n LearnerID: null\r\n },\r\n selectedLearners: null,\r\n keyUpSwitch: false,\r\n clearGrid: false,\r\n documentGenerated: false,\r\n documentName: null,\r\n messsageAlert: null,\r\n messageStyle: null,\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n {id: 'generate', label: 'Generate', icon: 'CreateIcon', tooltip: 'Generate letters / certificates',disabled: utils.isNull(this.state.selectedLearners)}\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (\"generate\" === buttonId) {\r\n this.generateDocuments();\r\n toolbarRef.current.setButtonDisabled(\"generate\", true);\r\n }\r\n }\r\n\r\n FileDownload = (documentName) => {\r\n\r\n utils.invokeUrl(\"api/sims/bulklearnercertificate/DownloadLearnerCertificates?FileName=\" + documentName, (response) => {\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n toolbarRef.current.setButtonDisabled(\"download\", true);\r\n }, (e) => {\r\n this.setState({ messsageAlert: utils.SYSTEM_ERROR_MESSAGE, messageStyle: \"outlinedError\" });\r\n }\r\n );\r\n\r\n };\r\n\r\n generateDocuments = () => {\r\n const LearnerProgrammeIDs = this.state.selectedLearners.map(e => e.Id);\r\n let data = {\r\n LearnerProgrammeIDs: LearnerProgrammeIDs,\r\n ...this.state.model\r\n }\r\n let url = \"api/sims/bulklearnercertificate/GenerateLearnerCertificates\";\r\n utils.invokeUrl(url, (response) => {\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n let documentInfo = JSON.parse(response.Message);\r\n this.FileDownload(documentInfo.OriginalFileName);\r\n toolbarRef.current.setButtonDisabled(\"download\", !this.state.documentGenerated);\r\n },\r\n null,\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(data)\r\n }\r\n )\r\n };\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedLearners: selection, Message: \"\" },\r\n () => {\r\n toolbarRef.current.setButtonDisabled(\"generate\", selection.length === 0);\r\n }\r\n )\r\n } else {\r\n this.setState({ selectedLearners: null, Message: \"\" },\r\n () => {\r\n toolbarRef.current.setButtonDisabled(\"generate\", selection.length === 0);\r\n }\r\n )\r\n }\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ propmtOpen: false })\r\n }\r\n\r\n handleFormValueChange = (values) => {\r\n let newValues = null;\r\n if (!utils.isNull(values)) {\r\n newValues = { ...values };\r\n }\r\n if (!utils.isNull(newValues)) {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(newValues)) {\r\n if (!utils.isNull(newValues.ProgrammeTypeID) && !utils.isNull(this.state.model.ProgrammeTypeID) && newValues.ProgrammeTypeID.Id !== this.state.model.ProgrammeTypeID.Id) {\r\n newValues.ProgrammeID = null;\r\n }\r\n if (!utils.isNull(newValues.DocumentTypeID) && !utils.isNull(this.state.model.DocumentTypeID) && newValues.DocumentTypeID.Id !== this.state.model.DocumentTypeID.Id) {\r\n newValues.PrintTypeID = null;\r\n }\r\n this.setState({\r\n model: newValues,\r\n clearGrid: true,\r\n selectedLearners: null,\r\n Message: \"\"\r\n });\r\n toolbarRef.current.setButtonDisabled(\"generate\", true);\r\n }\r\n }\r\n }\r\n\r\n onSearchRequiredFieldCheck = () => {\r\n if (searchFormRef.current.getValue()) {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n }\r\n\r\n onGridCleared = () => {\r\n this.setState({ clearGrid: false });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n { this.handleSelectionChange(selection) }}\r\n autoFetchData={false}\r\n toolbarRef={toolbarRef}\r\n onSearchRequiredFieldCheck={this.onSearchRequiredFieldCheck}\r\n clearGrid={this.state.clearGrid}\r\n onGridCleared={this.onGridCleared}\r\n title={\"Learner Certificates and SOR/ROA\"}\r\n >\r\n { this.onkeyup(e) }}\r\n model={this.state.model}\r\n valueChangeHandler={this.handleFormValueChange}\r\n //dependency={this.state.dependency}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(LearnerDocuments)\r\n);","import React from 'react';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { LookupField } from '../../widgets/LookupField';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport ProviderSearch from \"../provider/ProviderSearch\";\r\nimport EmployerSearch from \"../employer/EmployerSearch\";\r\nimport LearnerSearch from \"../learner/LearnerSearch\";\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport QualificationSetupSearch from '../program/QualificationSetupSearch';\r\nimport LearnershipSetupSearch from '../program/LearnershipSetupSearch';\r\nimport SkillsProgramSetupSearch from '../program/SkillsProgramSetupSearch';\r\nimport UnitStandardSetupSearch from '../program/UnitStandardSetupSearch';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst LearnerAttendanceSearchForm = React.forwardRef((props, ref) => {\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\nexport default LearnerAttendanceSearchForm;","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport LearnerAttendanceSearchForm from './LearnerAttendanceSearchForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\nconst headCells = [\r\n { id: \"LearnerIDNumber\", numeric: false, disablePadding: true, label: \"Learner ID Number\" },\r\n { id: \"LearnerName\", numeric: false, disablePadding: true, label: \"Learner Name\" },\r\n { id: \"InterventionCode\", numeric: false, disablePadding: true, label: \"Learnership Code\" },\r\n { id: \"InterventionDescription\", numeric: false, disablePadding: true, label: \"Learnership Description\" },\r\n { id: \"TrainingProviderName\", numeric: false, disablePadding: true, label: \"Training Provider Name\" },\r\n]\r\n\r\nconst searchParameters = [\r\n { Name: \"ProgrammeID\", Value: \"\" },\r\n { Name: \"LearnerID\", Value: \"\" },\r\n]\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nconst searchFormRef = React.createRef();\r\n\r\nclass LearnerAttendance extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n model: {\r\n ProgrammeID: null,\r\n LearnerID: null\r\n },\r\n selectedLearners: null,\r\n keyUpSwitch: false,\r\n clearGrid: false,\r\n documentGenerated: false,\r\n documentName: null,\r\n messsageAlert: null,\r\n messageStyle: null,\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n {id: 'generate', label: 'Generate', icon: 'CreateIcon', tooltip: 'Generate attendance certificates',disabled: utils.isNull(this.state.selectedLearners)}\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (\"generate\" === buttonId) {\r\n this.generateDocuments();\r\n toolbarRef.current.setButtonDisabled(\"generate\", true);\r\n }\r\n }\r\n\r\n FileDownload = (documentName) => {\r\n\r\n utils.invokeUrl(\"api/sims/learnerattendancecertificate/DownloadLearnerCertificates?FileName=\" + documentName, (response) => {\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n toolbarRef.current.setButtonDisabled(\"download\", true);\r\n }, (e) => {\r\n this.setState({ messsageAlert: utils.SYSTEM_ERROR_MESSAGE, messageStyle: \"outlinedError\" });\r\n }\r\n );\r\n\r\n };\r\n\r\n generateDocuments = () => {\r\n const LearnerProgrammeIDs = this.state.selectedLearners.map(e => e.Id);\r\n let data = {\r\n LearnerProgrammeIDs: LearnerProgrammeIDs,\r\n ...this.state.model\r\n }\r\n let url = \"api/sims/learnerattendancecertificate/GenerateLearnerAttendanceCertificates\";\r\n utils.invokeUrl(url, (response) => {\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n let documentInfo = JSON.parse(response.Message);\r\n this.FileDownload(documentInfo.OriginalFileName);\r\n toolbarRef.current.setButtonDisabled(\"download\", !this.state.documentGenerated);\r\n },\r\n null,\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(data)\r\n }\r\n )\r\n };\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedLearners: selection, Message: \"\" },\r\n () => {\r\n toolbarRef.current.setButtonDisabled(\"generate\", selection.length === 0);\r\n }\r\n )\r\n } else {\r\n this.setState({ selectedLearners: null, Message: \"\" },\r\n () => {\r\n toolbarRef.current.setButtonDisabled(\"generate\", selection.length === 0);\r\n }\r\n )\r\n }\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ propmtOpen: false })\r\n }\r\n\r\n handleFormValueChange = (values) => {\r\n let newValues = null;\r\n if (!utils.isNull(values)) {\r\n newValues = { ...values };\r\n }\r\n if (!utils.isNull(newValues)) {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(newValues)) {\r\n if (!utils.isNull(newValues.ProgrammeTypeID) && !utils.isNull(this.state.model.ProgrammeTypeID) && newValues.ProgrammeTypeID.Id !== this.state.model.ProgrammeTypeID.Id) {\r\n newValues.ProgrammeID = null;\r\n }\r\n if (!utils.isNull(newValues.DocumentTypeID) && !utils.isNull(this.state.model.DocumentTypeID) && newValues.DocumentTypeID.Id !== this.state.model.DocumentTypeID.Id) {\r\n newValues.PrintTypeID = null;\r\n }\r\n this.setState({\r\n model: newValues,\r\n clearGrid: true,\r\n selectedLearners: null,\r\n Message: \"\"\r\n });\r\n toolbarRef.current.setButtonDisabled(\"generate\", true);\r\n }\r\n }\r\n }\r\n\r\n onSearchRequiredFieldCheck = () => {\r\n if (searchFormRef.current.getValue()) {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n }\r\n\r\n onGridCleared = () => {\r\n this.setState({ clearGrid: false });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n { this.handleSelectionChange(selection) }}\r\n autoFetchData={false}\r\n toolbarRef={toolbarRef}\r\n onSearchRequiredFieldCheck={this.onSearchRequiredFieldCheck}\r\n clearGrid={this.state.clearGrid}\r\n onGridCleared={this.onGridCleared}\r\n title={\"Learner Attendance Certificates\"}\r\n >\r\n { this.onkeyup(e) }}\r\n model={this.state.model}\r\n valueChangeHandler={this.handleFormValueChange}\r\n //dependency={this.state.dependency}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(LearnerAttendance)\r\n);","import React from 'react';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { LookupField } from '../../widgets/LookupField';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport ProviderSearch from \"../provider/ProviderSearch\";\r\nimport EmployerSearch from \"../employer/EmployerSearch\";\r\nimport LearnerSearch from \"../learner/LearnerSearch\";\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport QualificationSetupSearch from '../program/QualificationSetupSearch';\r\nimport LearnershipSetupSearch from '../program/LearnershipSetupSearch';\r\nimport SkillsProgramSetupSearch from '../program/SkillsProgramSetupSearch';\r\nimport UnitStandardSetupSearch from '../program/UnitStandardSetupSearch';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst BulkApprovalSearchForm = React.forwardRef((props, ref) => {\r\n const [dependency, setDependency] = React.useState(props.dependency);\r\n\r\n React.useEffect(() => {\r\n setDependency(props.dependency);\r\n }, [props.dependency]);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\nexport default BulkApprovalSearchForm;","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport BulkApprovalSearchForm from './BulkApprovalSearchForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\nconst headCells = [\r\n { id: \"LearnerIDNumber\", numeric: false, disablePadding: true, label: \"Learner ID Number\" },\r\n { id: \"LearnerName\", numeric: false, disablePadding: true, label: \"Learner Name\" },\r\n { id: \"InterventionCode\", numeric: false, disablePadding: true, label: \"Intervention Code\" },\r\n { id: \"InterventionDescription\", numeric: false, disablePadding: true, label: \"Intervention Description\" },\r\n { id: \"TrainingProviderName\", numeric: false, disablePadding: true, label: \"Training Provider Name\" },\r\n]\r\n\r\nconst searchParameters = [\r\n { Name: \"ApprovalTypeID\", Value: \"\" },\r\n { Name: \"ProgrammeTypeID\", Value: \"\" },\r\n { Name: \"ProgrammeID\", Value: \"\" },\r\n { Name: \"ProviderID\", Value: \"\" },\r\n { Name: \"LearnerID\", Value: \"\" },\r\n { Name: \"EmployerID\", Value: \"\" },\r\n { Name: \"QualityAssuranceBody\", Value: \"\" }\r\n]\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nconst searchFormRef = React.createRef();\r\n\r\nclass BulkApproval extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n model: {\r\n ApprovalTypeID: null,\r\n ProgrammeTypeID: null,\r\n ProgrammeID: null,\r\n ProviderID: null,\r\n EmployerID: null,\r\n LearnerID: null,\r\n QualityAssuranceBodyID: null\r\n },\r\n selectedLearners: null,\r\n keyUpSwitch: false,\r\n learnersApproved: false,\r\n clearGrid: false,\r\n messsageAlert: null,\r\n messageStyle: null,\r\n dependency: null\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n {\r\n id: 'generate', label: 'Approve', icon: 'ApproveIcon', tooltip: 'Approve the selected learners',disabled: utils.isNull(this.state.selectedLearners)\r\n }\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (\"generate\" === buttonId) {\r\n this.approve();\r\n toolbarRef.current.setButtonDisabled(\"generate\", true);\r\n }\r\n }\r\n\r\n approve = () => {\r\n const LearnerProgrammeIDs = this.state.selectedLearners.map(e => e.Id);\r\n let data = {\r\n LearnerProgrammeIDs: LearnerProgrammeIDs,\r\n ...this.state.model\r\n }\r\n \r\n\r\n let url = \"api/sims/bulklearnerapproval/ApproveLearners\";\r\n\r\n utils.invokeUrl(url, (response) => {\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n this.successCallback(response)\r\n },\r\n null,\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(data)\r\n }\r\n )\r\n }\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedLearners: selection, Message: \"\" },\r\n () => {\r\n toolbarRef.current.setButtonDisabled(\"generate\", selection.length === 0);\r\n }\r\n )\r\n } else {\r\n this.setState({ selectedLearners: null, Message: \"\" },\r\n () => {\r\n toolbarRef.current.setButtonDisabled(\"generate\", selection.length === 0);\r\n }\r\n )\r\n }\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ propmtOpen: false })\r\n }\r\n\r\n handleFormValueChange = (values) => {\r\n let newValues = null;\r\n if (!utils.isNull(values)) {\r\n newValues = { ...values };\r\n }\r\n if (!utils.isNull(newValues)) {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(newValues)) {\r\n if (!utils.isNull(newValues.ApprovalTypeID) && !utils.isNull(this.state.model.ApprovalTypeID) && newValues.ApprovalTypeID.Id !== this.state.model.ApprovalTypeID.Id) {\r\n newValues.QualityAssuranceBodyID = null;\r\n }\r\n if (!utils.isNull(newValues.ProgrammeTypeID) && !utils.isNull(this.state.model.ProgrammeTypeID) && newValues.ProgrammeTypeID.Id !== this.state.model.ProgrammeTypeID.Id) {\r\n newValues.ProgrammeID = null;\r\n }\r\n this.setState({\r\n model: newValues,\r\n clearGrid: true,\r\n selectedLearners: null,\r\n Message: \"\"\r\n });\r\n if (!utils.isNull(newValues.ApprovalTypeID) && JSON.stringify(this.state.dependency) !== JSON.stringify(newValues.ApprovalTypeID)) {\r\n const approvalTypeID = {\r\n Name: \"ApprovalTypeID\",\r\n Value: newValues.ApprovalTypeID.Id\r\n }\r\n if (!utils.isNull(approvalTypeID.Value)) {\r\n this.setState({ dependency: approvalTypeID })\r\n }\r\n };\r\n toolbarRef.current.setButtonDisabled(\"generate\", true);\r\n }\r\n }\r\n }\r\n\r\n onSearchRequiredFieldCheck = () => {\r\n if (searchFormRef.current.getValue()) {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n }\r\n\r\n onGridCleared = () => {\r\n this.setState({ clearGrid: false });\r\n }\r\n\r\n successCallback = (response) => {\r\n this.setState({ clearGrid: true });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n\r\n\r\n\r\n \r\n { this.handleSelectionChange(selection) }}\r\n autoFetchData={false}\r\n toolbarRef={toolbarRef}\r\n onSearchRequiredFieldCheck={this.onSearchRequiredFieldCheck}\r\n clearGrid={this.state.clearGrid}\r\n onGridCleared={this.onGridCleared}\r\n title={\"Bulk QA Approval\"}\r\n >\r\n { this.onkeyup(e) }}\r\n model={this.state.model}\r\n valueChangeHandler={this.handleFormValueChange}\r\n dependency={this.state.dependency}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(BulkApproval)\r\n);","import React from \"react\";\r\nimport PropTypes from 'prop-types';\r\nimport MaterialTable from \"material-table\";\r\nimport Save from \"@material-ui/icons/Save\";\r\nimport Delete from \"@material-ui/icons/Delete\";\r\nimport Edit from \"@material-ui/icons/Edit\";\r\nimport Add from \"@material-ui/icons/Add\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport { makeStyles } from \"@material-ui/core\";\r\nimport { Row } from \"antd\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst actionIcons = {\r\n save: () => ,\r\n delete: () => ,\r\n add: () => ,\r\n edit: () => \r\n};\r\n\r\nconst useStyles = makeStyles({\r\n tableContainer: {\r\n overflowY: \"auto\",\r\n maxHeight: \"73vh\"\r\n }\r\n});\r\n\r\nconst CustomMaterialTable = function (props) {\r\n const [data, setData] = React.useState(!utils.isNull(props.data) ? props.data : []);\r\n const [page, setPage] = React.useState(0);\r\n const [rowsPerPage, setRowsPerPage] = React.useState(props.rowsPerPage ? props.rowsPerPage : 10);\r\n const classes = useStyles();\r\n\r\n //Data coming from a remote source\r\n React.useEffect(() => {\r\n if (!utils.isNull(props.dataUrl)) {\r\n utils.invokeUrl(props.dataUrl + \"?request=\" + utils.doGetRequestJson(page, rowsPerPage, props.searchParameters, props.paged), response => {\r\n let result;\r\n if (typeof response === \"string\") {\r\n result = JSON.parse(response);\r\n }\r\n else {\r\n result = response;\r\n }\r\n\r\n let remoteData = result.Data;\r\n setData(remoteData);\r\n })\r\n }\r\n }, [props.searchParameters]);\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nCustomMaterialTable.propTyles = {\r\n columns: PropTypes.array.isRequired,\r\n}\r\n\r\nexport default CustomMaterialTable;\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter, Link } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport CustomMaterialTable from \"../../widgets/CustomMaterialTable\";\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\n\r\n\r\nconst customCellRender = (rowData, valueProperty, columnIndex) => {\r\n let value = parseInt(rowData[valueProperty]);\r\n let rowId = JSON.stringify(rowData.Id);\r\n let columnId = JSON.stringify(columnIndex);\r\n\r\n const FileDownload = (rowId, columnId) => {\r\n\r\n utils.invokeUrl(\"api/sims/expirynotification/ExportExcel?rowId=\" + rowId + \"&columnId=\" + columnId, (response) => {\r\n\r\n var blob = new Blob([base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ messsageAlert: utils.SYSTEM_ERROR_MESSAGE, messageStyle: \"outlinedError\" });\r\n }\r\n );\r\n\r\n };\r\n\r\n const base64ToArrayBuffer = (base64) => {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n return (\r\n value > 0 ?\r\n { FileDownload(rowId, columnId) }}>\r\n {value}\r\n
\r\n \r\n :\r\n {value}
\r\n );\r\n};\r\n\r\nconst columns = [\r\n\r\n { title: \"Category\", field: \"Category\" },\r\n {\r\n title: \"Financial Year\",\r\n field: \"FinancialYear\",\r\n headerStyle: {\r\n width: \"45%\",\r\n },\r\n cellStyle: {\r\n width: \"45%\",\r\n }\r\n },\r\n { title: \"Apr\", field: \"April\", render: data => customCellRender(data, \"April\", 1)},\r\n { title: \"May\", field: \"May\", render: data => customCellRender(data, \"May\", 2) },\r\n { title: \"Jun\", field: \"June\", render: data => customCellRender(data, \"June\", 3) },\r\n { title: \"Jul\", field: \"July\", render: data => customCellRender(data, \"July\", 4) },\r\n { title: \"Aug\", field: \"August\", render: data => customCellRender(data, \"August\", 5) },\r\n { title: \"Sep\", field: \"September\", render: data => customCellRender(data, \"September\", 6) },\r\n { title: \"Oct\", field: \"October\", render: data => customCellRender(data, \"October\", 7) },\r\n { title: \"Nov\", field: \"November\", render: data => customCellRender(data, \"November\", 8) },\r\n { title: \"Dec\", field: \"December\", render: data => customCellRender(data, \"December\", 9) },\r\n { title: \"Jan\", field: \"January\", render: data => customCellRender(data, \"January\", 10) },\r\n { title: \"Feb\", field: \"February\", render: data => customCellRender(data, \"February\", 11) },\r\n { title: \"Mar\", field: \"March\", render: data => customCellRender(data, \"March\", 12) },\r\n]\r\nconst utils = new ViewUtils();\r\nclass ExpiryNotification extends Component {\r\n\r\n\r\n\r\n render() {\r\n return (\r\n \r\n\r\n \r\n Expiry Notification\r\n
\r\n\r\n
\r\n\r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(ExpiryNotification)\r\n);\r\n","import React from 'react';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { LookupField } from '../../widgets/LookupField';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport ProviderSearch from \"../provider/ProviderSearch\";\r\nimport EmployerSearch from \"../employer/EmployerSearch\";\r\nimport LearnerSearch from \"../learner/LearnerSearch\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport SkillsProgramSetupSearch from '../program/SkillsProgramSetupSearch';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst LearnerEndorsementLetterSearchForm = React.forwardRef((props, ref) => {\r\n const [dependency, setDependency] = React.useState(props.dependency);\r\n\r\n const styles = makeStyles({\r\n TextArea: {\r\n '& .MuiOutlinedInput-inputMultiline': {\r\n height: \"50px !important\",\r\n width: \"600px !important\"\r\n }\r\n }\r\n })\r\n \r\n React.useEffect(() => {\r\n setDependency(props.dependency);\r\n }, [props.dependency]);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\nexport default LearnerEndorsementLetterSearchForm;","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport LearnerEndorsementLetterSearchForm from './LearnerEndorsementLetterSearchForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\nconst headCells = [\r\n { id: \"LearnerIDNumber\", numeric: false, disablePadding: true, label: \"Learner ID Number\" },\r\n { id: \"LearnerName\", numeric: false, disablePadding: true, label: \"Learner Name\" },\r\n { id: \"LearnerSurname\", numeric: false, disablePadding: true, label: \"Learner Surname\" },\r\n { id: \"SkillsProgrammeCode\", numeric: false, disablePadding: true, label: \"Skills Programme Code\" },\r\n { id: \"SkillsProgrammeTitle\", numeric: false, disablePadding: true, label: \"Skills Programme Title\" },\r\n { id: \"ReasonForReprint\", numeric: false, disablePadding: true, label: \"Reason For Reprint\" },\r\n { id: \"PrintingErrorReason\", numeric: false, disablePadding: true, label: \"Printing Error Reason\" },\r\n { id: \"EndorsementNumber\", numeric: false, disablePadding: true, label: \"EndorsementNumber\" },\r\n { id: \"DateEndorsementCreated\", numeric: false, disablePadding: true, label: \"Date Endorsement Created\" },\r\n]\r\n\r\nconst searchParameters = [\r\n { Name: \"PrintTypeID\", Value: \"\" },\r\n { Name: \"ProgrammeID\", Value: \"\" },\r\n { Name: \"ProviderID\", Value: \"\" },\r\n { Name: \"EmployerID\", Value: \"\" },\r\n { Name: \"LearnerID\", Value: \"\" },\r\n { Name: \"ReasonForReprintID\", Value: \"\" },\r\n { Name: \"PrintingErrorReason\", Value: \"\" }\r\n]\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nconst searchFormRef = React.createRef();\r\n\r\nclass LearnerEndorsementLetter extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n model: {\r\n PrintTypeID: null,\r\n ProgrammeTypeID: null,\r\n ProgrammeID: null,\r\n ProviderID: null,\r\n EmployerID: null,\r\n LearnerID: null,\r\n ReasonForReprintID: null,\r\n PrintingErrorReason : null\r\n },\r\n selectedLearners: null,\r\n keyUpSwitch: false,\r\n clearGrid: false,\r\n documentGenerated: false,\r\n documentName: null,\r\n messsageAlert: null,\r\n messageStyle: null,\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n {id: 'generate', label: 'Generate', icon: 'CreateIcon', tooltip: 'Generate letters / certificates',disabled: utils.isNull(this.state.selectedLearners)}\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (\"generate\" === buttonId) {\r\n this.generateDocuments();\r\n toolbarRef.current.setButtonDisabled(\"generate\", true);\r\n }\r\n }\r\n\r\n FileDownload = (documentName) => {\r\n\r\n utils.invokeUrl(\"api/sims/learnerendorsementletter/DownloadLearnerEndorsementLetter?FileName=\" + documentName, (response) => {\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n toolbarRef.current.setButtonDisabled(\"download\", true);\r\n }, (e) => {\r\n this.setState({ messsageAlert: utils.SYSTEM_ERROR_MESSAGE, messageStyle: \"outlinedError\" });\r\n }\r\n );\r\n\r\n };\r\n\r\n generateDocuments = () => {\r\n const LearnerProgrammeIDs = this.state.selectedLearners.map(e => e.Id);\r\n let data = {\r\n LearnerProgrammeIDs: LearnerProgrammeIDs,\r\n ...this.state.model\r\n }\r\n let url = \"api/sims/learnerendorsementletter/GenerateLearnerEndorsementLetter\";\r\n utils.invokeUrl(url, (response) => {\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n let documentInfo = JSON.parse(response.Message);\r\n this.FileDownload(documentInfo.OriginalFileName);\r\n toolbarRef.current.setButtonDisabled(\"download\", !this.state.documentGenerated);\r\n },\r\n null,\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(data)\r\n }\r\n )\r\n };\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedLearners: selection, Message: \"\" },\r\n () => {\r\n toolbarRef.current.setButtonDisabled(\"generate\", selection.length === 0);\r\n }\r\n )\r\n } else {\r\n this.setState({ selectedLearners: null, Message: \"\" },\r\n () => {\r\n toolbarRef.current.setButtonDisabled(\"generate\", selection.length === 0);\r\n }\r\n )\r\n }\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ propmtOpen: false })\r\n }\r\n\r\n handleFormValueChange = (values) => {\r\n let newValues = null;\r\n if (!utils.isNull(values)) {\r\n newValues = { ...values };\r\n }\r\n if (!utils.isNull(newValues)) {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(newValues)) {\r\n if (!utils.isNull(newValues.ProgrammeTypeID) && !utils.isNull(this.state.model.ProgrammeTypeID) && newValues.ProgrammeTypeID.Id !== this.state.model.ProgrammeTypeID.Id) {\r\n newValues.ProgrammeID = null;\r\n }\r\n if (!utils.isNull(newValues.DocumentTypeID) && !utils.isNull(this.state.model.DocumentTypeID) && newValues.DocumentTypeID.Id !== this.state.model.DocumentTypeID.Id) {\r\n newValues.PrintTypeID = null;\r\n }\r\n this.setState({\r\n model: newValues,\r\n clearGrid: true,\r\n selectedLearners: null,\r\n Message: \"\"\r\n });\r\n toolbarRef.current.setButtonDisabled(\"generate\", true);\r\n }\r\n }\r\n }\r\n\r\n onSearchRequiredFieldCheck = () => {\r\n if (searchFormRef.current.getValue()) {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n }\r\n\r\n onGridCleared = () => {\r\n this.setState({ clearGrid: false });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n { this.handleSelectionChange(selection) }}\r\n autoFetchData={false}\r\n toolbarRef={toolbarRef}\r\n onSearchRequiredFieldCheck={this.onSearchRequiredFieldCheck}\r\n clearGrid={this.state.clearGrid}\r\n onGridCleared={this.onGridCleared}\r\n title={\"Learner Endorsement Letter - Skills Programme\"}\r\n >\r\n { this.onkeyup(e) }}\r\n model={this.state.model}\r\n valueChangeHandler={this.handleFormValueChange}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(LearnerEndorsementLetter)\r\n);","import React from 'react';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport { LookupField } from '../../widgets/LookupField';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport { CustomDatePicker } from '../../widgets/CustomDatePicker';\r\nimport ProviderSearch from \"../provider/ProviderSearch\";\r\nimport EmployerSearch from \"../employer/EmployerSearch\";\r\nimport LearnerSearch from \"../learner/LearnerSearch\";\r\nimport { Row, Col } from 'react-bootstrap';\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst ProofOfRegistrationSearchForm = React.forwardRef((props, ref) => {\r\n const [dependency, setDependency] = React.useState(props.dependency);\r\n\r\n React.useEffect(() => {\r\n setDependency(props.dependency);\r\n }, [props.dependency]);\r\n\r\n const onCheckFieldValitationArray = (fields, values) => {\r\n if (values.FinancialYearID !== null) {\r\n fields = fields.filter(e => e.id !== \"PrintTypeID\");\r\n }\r\n console.log(fields);\r\n return fields;\r\n }\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\nexport default ProofOfRegistrationSearchForm;","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport ProofOfRegistrationSearchForm from './ProofOfRegistrationSearchForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\nconst headCells = [\r\n { id: \"Name\", numeric: false, disablePadding: true, label: \"Learner Name\" },\r\n { id: \"Surname\", numeric: false, disablePadding: true, label: \"Learner Surname\" },\r\n { id: \"Surname\", numeric: false, disablePadding: true, label: \"Learner Surname\" },\r\n { id: \"IDNumber\", numeric: false, disablePadding: true, label: \"Learner ID Number\" },\r\n { id: \"ProgrammeType\", numeric: false, disablePadding: true, label: \"Programme Type\" },\r\n { id: \"Programme\", numeric: false, disablePadding: true, label: \"Programme\" },\r\n]\r\n\r\nconst searchParameters = [\r\n { Name: \"FinancialYearID\", Value: \"\" },\r\n { Name: \"LearningProgrammeID\", Value: \"\" },\r\n { Name: \"SocioEconomicStatusID\", Value: \"\" },\r\n { Name: \"RegistrationDateFrom\", Value: \"\" },\r\n { Name: \"RegistrationDateTo\", Value: \"\" },\r\n { Name: \"ProviderID\", Value: \"\" },\r\n { Name: \"EmployerID\", Value: \"\" },\r\n { Name: \"LearnershipName\", Value: \"\" },\r\n { Name: \"QualificationName\", Value: \"\" },\r\n { Name: \"SponsorshipID\", Value: \"\" }\r\n]\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nconst searchFormRef = React.createRef();\r\n\r\nclass LearnerDocuments extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n model: {\r\n FinancialYearID: null,\r\n LearningProgrammeID: null,\r\n SocioEconomicStatusID: null,\r\n RegistrationDateFrom: null,\r\n RegistrationDateTo: null,\r\n ProviderID: null,\r\n EmployerID: null,\r\n LearnershipName: null,\r\n QualificationName: null,\r\n SponsorshipID: null\r\n },\r\n selectedLearners: null,\r\n keyUpSwitch: false,\r\n clearGrid: false,\r\n documentGenerated: false,\r\n documentName: null,\r\n messsageAlert: null,\r\n messageStyle: null,\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'generate', label: 'Generate', icon: 'CreateIcon', tooltip: 'Generate Letter', disabled: utils.isNull(this.state.selectedLearners) },\r\n { id: 'email', label: 'Email', icon: 'EmailIcon', tooltip: 'Email Letter', disabled: utils.isNull(this.state.selectedLearners) }\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (\"generate\" === buttonId) {\r\n this.generateLetter();\r\n toolbarRef.current.setButtonDisabled(\"generate\", true);\r\n toolbarRef.current.setButtonDisabled(\"email\", true);\r\n } else if (\"email\" === buttonId) {\r\n this.EmailLetter();\r\n toolbarRef.current.setButtonDisabled(\"generate\", true);\r\n toolbarRef.current.setButtonDisabled(\"email\", true);\r\n }\r\n }\r\n\r\n FileDownload = (documentName) => {\r\n\r\n utils.invokeUrl(\"api/sims/ProofOfRegistration/DownloadLetters?FileName=\" + documentName, (response) => {\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n toolbarRef.current.setButtonDisabled(\"download\", true);\r\n }, (e) => {\r\n this.setState({ messsageAlert: utils.SYSTEM_ERROR_MESSAGE, messageStyle: \"outlinedError\" });\r\n }\r\n );\r\n\r\n };\r\n\r\n generateLetter = () => {\r\n const LearnerProgrammeIDs = this.state.selectedLearners.map(e => e.Id);\r\n let data = {\r\n IDs: LearnerProgrammeIDs,\r\n ...this.state.model\r\n }\r\n let url = \"api/sims/ProofOfRegistration/GenerateLetters\";\r\n utils.invokeUrl(url, (response) => {\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n let documentInfo = JSON.parse(response.Message);\r\n this.FileDownload(documentInfo.OriginalFileName);\r\n toolbarRef.current.setButtonDisabled(\"download\", !this.state.documentGenerated);\r\n },\r\n null,\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(data)\r\n }\r\n )\r\n };\r\n\r\n EmailLetter = () => {\r\n const LearnerProgrammeIDs = this.state.selectedLearners.map(e => e.Id);\r\n let data = {\r\n IDs: LearnerProgrammeIDs,\r\n ...this.state.model\r\n }\r\n let url = \"api/sims/ProofOfRegistration/EmailLetters\";\r\n utils.invokeUrl(url, (response) => {\r\n utils.showMessage(this, response.Message, response.MessageType);\r\n },\r\n null,\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(data)\r\n }\r\n )\r\n };\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedLearners: selection, Message: \"\" },\r\n () => {\r\n toolbarRef.current.setButtonDisabled(\"generate\", selection.length === 0);\r\n toolbarRef.current.setButtonDisabled(\"email\", selection.length === 0);\r\n }\r\n )\r\n } else {\r\n this.setState({ selectedLearners: null, Message: \"\" },\r\n () => {\r\n toolbarRef.current.setButtonDisabled(\"generate\", selection.length === 0);\r\n toolbarRef.current.setButtonDisabled(\"email\", selection.length === 0);\r\n }\r\n )\r\n }\r\n }\r\n\r\n closePrompt = () => {\r\n this.setState({ propmtOpen: false })\r\n }\r\n\r\n handleFormValueChange = (values) => {\r\n let newValues = null;\r\n if (!utils.isNull(values)) {\r\n newValues = { ...values };\r\n }\r\n if (!utils.isNull(newValues)) {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(newValues)) {\r\n if (!utils.isNull(newValues.FinancialYearID) && !utils.isNull(this.state.model.FinancialYearID) && newValues.FinancialYearID.Id !== this.state.model.FinancialYearID.Id) {\r\n newValues.FinancialYearID = null;\r\n }\r\n if (!utils.isNull(newValues.LearningProgrammeID) && !utils.isNull(this.state.model.LearningProgrammeID) && newValues.LearningProgrammeID.Id !== this.state.model.LearningProgrammeID.Id) {\r\n newValues.LearningProgrammeID = null;\r\n }\r\n this.setState({\r\n model: newValues,\r\n clearGrid: true,\r\n selectedLearners: null,\r\n Message: \"\"\r\n });\r\n toolbarRef.current.setButtonDisabled(\"generate\", true);\r\n toolbarRef.current.setButtonDisabled(\"email\", true);\r\n }\r\n }\r\n }\r\n\r\n onSearchRequiredFieldCheck = () => {\r\n if (searchFormRef.current.getValue()) {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n }\r\n\r\n onGridCleared = () => {\r\n this.setState({ clearGrid: false });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n { this.handleSelectionChange(selection) }}\r\n autoFetchData={false}\r\n toolbarRef={toolbarRef}\r\n onSearchRequiredFieldCheck={this.onSearchRequiredFieldCheck}\r\n clearGrid={this.state.clearGrid}\r\n onGridCleared={this.onGridCleared}\r\n title={\"Proof Of Registration\"}\r\n >\r\n { this.onkeyup(e) }}\r\n model={this.state.model}\r\n valueChangeHandler={this.handleFormValueChange}\r\n //dependency={this.state.dependency}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(LearnerDocuments)\r\n);","import React from 'react';\r\nimport { EntityForm } from './widgets/Forms';\r\nimport { GridItem } from './widgets/GridItem';\r\n\r\n//const ref = React.createRef();\r\n\r\nconst testHeadCells = [\r\n {\r\n id: 'Name', numeric: false, disablePadding: false, label: 'Name', widthRatio: .4,\r\n editor: {\r\n type: \"TEXT\"\r\n }\r\n },\r\n {\r\n id: 'DateOfBirth', numeric: false, disablePadding: false, label: 'Date of Birth', widthRatio: .3,\r\n editor: {\r\n type: \"DATE\"\r\n }\r\n },\r\n {\r\n id: 'Gender', numeric: false, disablePadding: false, label: 'Gender', widthRatio: .3,\r\n editor: {\r\n type: \"SELECT\",\r\n dataUrl: \"api/indicium/employer/GetLookupList?listId=Gender\"\r\n }\r\n }\r\n];\r\n\r\nconst searchParameters = [{ Name: \"OrganisationTradeName\", Value: \"\" },\r\n{ Name: \"OrganisationSDLNumber\", Value: \"\" },\r\n { Name: \"OrganisationLegalName\", Value: \"\" }];\r\n\r\nexport const TestForm = React.forwardRef((props, ref) => {\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { TestForm } from './TestForm';\r\n\r\nconst testFormRef = React.createRef();\r\nclass Test extends Component {\r\n render() {\r\n return (\r\n \r\n
Editable Table
\r\n
{ alert(values) }} />\r\n {value}
\r\n );\r\n};\r\n\r\nconst testColumn = [\r\n {\r\n field: \"testFile\",\r\n title: \"Test file column\",\r\n valueType: \"file\",\r\n get valueProperty() {\r\n return this.field;\r\n }\r\n },\r\n\r\n {\r\n field: \"testDate\",\r\n title: \"Test date column\",\r\n valueType: \"date\",\r\n get valueProperty() {\r\n return this.field;\r\n }\r\n }\r\n];\r\n\r\nconst testData = [\r\n { testFile: \"test data\", testDate: \"05/02/1995\" },\r\n { testFile: \"test data2\", testDate: \"06/02/1995\" },\r\n { testFile: \"test data3\", testDate: \"07/02/1995\" }\r\n];\r\n\r\nconst CustomMaterialTable = function (props) {\r\n const [data, setData] = React.useState(!utils.isNull(props.data) ? props.data : []);\r\n const [page, setPage] = React.useState(0);\r\n const [rowsPerPage, setRowsPerPage] = React.useState(props.rowsPerPage ? props.rowsPerPage : 10);\r\n const [columns, setColumns] = React.useState(testColumn);\r\n const classes = useStyles();\r\n\r\n const customCellRender = valueProperty => valueType => rowData => {\r\n const rowId = !utils.isNull(rowData.Id) ? rowData.Id : rowData.tableData[\"id\"];\r\n return (\r\n \r\n );\r\n };\r\n\r\n const applyCustomCellRender = () => {\r\n let newColumns = testColumn.map((column) => {\r\n return { ...column, render: (rowData) => customCellRender(column.valueProperty)(column.valueType)(rowData) }\r\n });\r\n setColumns(newColumns);\r\n };\r\n\r\n React.useEffect(() => {\r\n applyCustomCellRender();\r\n }, [testColumn]);\r\n\r\n //Data coming from a remote source\r\n React.useEffect(() => {\r\n if (!utils.isNull(props.dataUrl)) {\r\n utils.invokeUrl(props.dataUrl + \"?request=\" + utils.doGetRequestJson(page, rowsPerPage, props.searchParameters, props.paged),\r\n response => {\r\n let result;\r\n if (typeof response === \"string\") {\r\n result = JSON.parse(response);\r\n }\r\n else {\r\n result = response;\r\n }\r\n let remoteData = result.Data;\r\n setData(remoteData);\r\n })\r\n }\r\n }, [props.searchParameters]);\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nCustomMaterialTable.propTyles = {\r\n columns: PropTypes.array.isRequired,\r\n}\r\n\r\nexport default CustomMaterialTable;\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter, Link } from 'react-router-dom';\r\nimport \"../View.css\";\r\nimport \"../Grid.css\";\r\nimport \"../Form.css\";\r\nimport \"../App.css\";\r\nimport { ViewContainer } from \"../View.jsx\";\r\nimport CustomMaterialTable from \"./Table.js\";\r\n\r\nconst columns = [];\r\n\r\nclass TestTableDemo extends Component {\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withRouter(\r\n connect()(TestTableDemo)\r\n);\r\n","import React from 'react';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\n\r\n\r\nexport const DGApplicationCreationForm = React.forwardRef((props, ref) => {\r\n\r\n const [FinancialYear, setFinancialYear] = React.useState(null);\r\n const [DGType, setDGType] = React.useState(null);\r\n const [dependency, setDependency] = React.useState(props.dependency);\r\n\r\n const showDGIntervention = (FinancialYearID, DGTypeID) => {\r\n if (FinancialYearID != undefined) { setFinancialYear(FinancialYearID.Id) }\r\n if (DGTypeID != undefined) { setDGType(DGTypeID.Id) }\r\n }\r\n\r\n React.useEffect(() => {\r\n setDependency(props.dependency);\r\n }, [props.dependency]);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\nexport default DGApplicationCreationForm;\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from \"react-router-dom\";\r\nimport EnhancedToolbar from \"../../widgets/Toolbar\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./../organisation/DGOrganisation.css\";\r\nimport { DGApplicationCreationForm } from \"./DGApplicationCreationForm\";\r\n\r\nimport ViewUtils from \"../../ViewUtils\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport { ViewContainer } from \"../../View\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nconst utils = new ViewUtils();\r\n\r\nconst formRef = React.createRef();\r\n\r\nconst userRef = React.createRef();\r\n\r\nclass DGApplication extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n model: {\r\n Name: \"\",\r\n Description: \"\",\r\n LetterType: \"\",\r\n },\r\n title: \"\",\r\n id:\r\n !utils.isNull(this.props.location.state) &&\r\n !utils.isNull(this.props.location.state.selection)\r\n ? this.props.location.state.selection\r\n : null,\r\n };\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: \"close\", label: \"CLOSE\", tooltip: \"Close\" },\r\n { id: \"save\", label: \"SAVE\", tooltip: \"Save\", icon: \"SaveIcon\" },\r\n ],\r\n },\r\n ],\r\n };\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.close();\r\n } else if (\"save\" === buttonId) {\r\n this.save();\r\n }\r\n }\r\n\r\n handleFormValueChange = (values) => {\r\n console.log(values);\r\n if (!utils.isNull(values)) {\r\n this.setState({\r\n Name: values.Name,\r\n });\r\n }\r\n };\r\n\r\n save() {\r\n let formValue = userRef.current.getValue();\r\n\r\n //Organisation\r\n // formValue.Organisation = {Description: \"OrganisationID\", Id: this.props.location.state.preSelectedProp}\r\n // formValue.OrganisationID = {Description: \"OrganisationID\", Id: this.props.location.state.preSelectedProp}\r\n formValue.OrganisationID = this.props.location.state.preSelectedProp;\r\n console.log(formValue);\r\n console.log(this.props.location.state);\r\n\r\n if (formValue !== null && typeof formValue !== \"undefined\") {\r\n let isAdd = true;\r\n if (\r\n !utils.isNull(this.props.location.state) &&\r\n !utils.isNull(this.props.location.state.selection)\r\n ) {\r\n formValue.id = this.props.location.state.selection;\r\n isAdd = false;\r\n }\r\n let data = JSON.stringify(formValue);\r\n\r\n if (isAdd) {\r\n const url = `api/sims/dgapplication/insertdgapplication`;\r\n utils.saveForm(\r\n this,\r\n userRef,\r\n url,\r\n (response) => {\r\n this.setState({\r\n message: \"DG Application added successfully\",\r\n messageStyle: \"SUCCESS\",\r\n });\r\n },\r\n this.error\r\n );\r\n } else {\r\n const url = `api/sims/dgapplication/updateledgapplication`;\r\n utils.updateForm(\r\n this,\r\n userRef,\r\n url,\r\n (response) => {\r\n this.setState({\r\n message: \"DG Application updated successfully\",\r\n messageStyle: \"SUCCESS\",\r\n });\r\n },\r\n this.error\r\n );\r\n }\r\n }\r\n }\r\n\r\n successCallback(response) {\r\n this.setState({\r\n message: response.Message,\r\n messageStyle: response.MessageType,\r\n });\r\n }\r\n error(response) {\r\n this.setState({\r\n message: response.Message,\r\n messageStyle: response.MessageType,\r\n });\r\n }\r\n close() {\r\n this.props.history.push({\r\n pathname: \"/DGApplicationSearch\",\r\n state: { selection: this.state.id },\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n\r\n \r\n \r\n \r\n | \r\n \r\n this.handleToolbarButtonClick(buttonId)\r\n }\r\n enabled={true}\r\n config={this.toolbarConfig}\r\n />\r\n | \r\n
\r\n \r\n | \r\n \r\n this.handleFormValueChange(values)\r\n }\r\n id={\r\n typeof this.props.location.state !== \"undefined\"\r\n ? this.props.location.state.selection\r\n : null\r\n }\r\n editPermission={this.props.menuPermissionItem.Edit}\r\n />\r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\nexport default withRouter(withMenuPermission(DGApplication));\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { EntityForm } from '../../widgets/Forms';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nfunction DGApplicationSearchForm(props) {\r\n const [labelWidth, setLabelWidth, tabValue] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n const [FinancialYear, setFinancialYear] = React.useState(null);\r\n const [DGType, setDGType] = React.useState(null);\r\n\r\n\r\n\r\n const showDGIntervention = (FinancialYearID, DGTypeID) => {\r\n if (FinancialYearID != undefined) { setFinancialYear(FinancialYearID.Id) }\r\n if (DGTypeID != undefined) { setDGType(DGTypeID.Id) }\r\n }\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n\r\nexport default DGApplicationSearchForm;","import React, { Component, Fragment } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport simslogoLoading from '../../../content/images/logos/sims_logo_loading.png';\r\nimport LoadingIndicatorLogin from '../../LoadingIndicatorLogin';\r\nimport { ViewContainer } from \"../../View\";\r\nimport Paper from '@material-ui/core/Paper';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport Button from '@material-ui/core/Button';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nclass DGPrintReport extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isLoading: true,\r\n queueData: null\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.getFormHead();\r\n }\r\n\r\n getFormHead() {\r\n let url = \"api/sims/DGApplication/GetFindQueue?DGApplicationID=\" + this.props.DGApplicationID;\r\n utils.invokeUrl(url, (response) => {\r\n this.setState({\r\n isLoading: false,\r\n queueData: response\r\n })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n\r\n FileDownload = () => {\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(this.state.queueData.Document.Base64)], { type: this.state.queueData.Document.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = this.state.queueData.Document.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n };\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n checkGenerateReportActive = () => {\r\n if (!utils.isNull(this.state.queueData)) {\r\n if (!utils.isNull(this.state.queueData.DGReportsPrintQueueStatusID) && this.state.queueData.DGReportsPrintQueueStatusID.Id == 3 /*completed*/) {\r\n return true;\r\n }\r\n else if (utils.isNull(this.state.queueData.DGReportsPrintQueueStatusID)) {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n }\r\n else {\r\n return true;\r\n }\r\n }\r\n\r\n GenerateReport = () => {\r\n this.setState({ isLoading: true })\r\n let url = \"api/sims/DGApplication/DGPrintQueueStart?DGApplicationID=\" + this.props.DGApplicationID;\r\n utils.invokeUrl(url, (response) => {\r\n if (response.MessageType === \"SUCCESS\") {\r\n this.getFormHead();\r\n }\r\n else {\r\n this.setState({ isLoading: false })\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n\r\n CheckProgress = () => {\r\n this.setState({ isLoading: true })\r\n this.getFormHead();\r\n }\r\n\r\n render() {\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n {!this.state.isLoading ?\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n Status
\r\n | \r\n \r\n \r\n | \r\n \r\n \r\n \r\n Last Ran
\r\n | \r\n \r\n \r\n | \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n :\r\n null\r\n }\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(DGPrintReport);","\r\nimport React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport \"./../organisation/DGOrganisation.css\";\r\nimport DGApplicationSearchForm from \"./DGApplicationSearchForm\";\r\nimport DGApplicationCreationForm from \"./DGApplicationCreationForm\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { ViewContainer } from \"../../View\";\r\nimport FormDialog from \"../../etqa/FormDialog\";\r\nimport Prompt from '../../widgets/Prompt';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport DGPrintReport from './DGPrintReport';\r\nimport Slide from '@material-ui/core/Slide';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Toolbar from '@material-ui/core/Toolbar';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport { Typography } from \"antd\";\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\n\r\nconst Transition = React.forwardRef(function Transition(props, ref) {\r\n return ;\r\n});\r\n\r\nconst headCells = [\r\n { id: 'FinancialYear', numeric: false, disablePadding: true, label: 'Financial Year' },\r\n { id: 'FundingWindow', numeric: false, disablePadding: true, label: 'Funding Window' },\r\n { id: 'SubmissionNumber', numeric: false, disablePadding: true, label: 'Submission Number' },\r\n { id: 'DGType', numeric: false, disablePadding: true, label: 'DG Type' },\r\n { id: 'DGIntervention', numeric: false, disablePadding: true, label: 'DG Intervention' },\r\n { id: 'DGStatus', numeric: false, disablePadding: true, label: 'DG Status' },\r\n { id: 'DueDate', numeric: false, disablePadding: true, label: 'Due Date' },\r\n { id: 'SubmittedDate', numeric: false, disablePadding: true, label: 'Submitted Date' },\r\n { id: 'SubmittedBy', numeric: false, disablePadding: true, label: 'Submitted By' },\r\n { id: 'VerificationDate', numeric: false, disablePadding: true, label: 'Verification Date' },\r\n { id: 'Verified By', numeric: false, disablePadding: true, label: 'Verified By' },\r\n { id: 'ApprovedDate', numeric: false, disablePadding: true, label: 'Approved Date' },\r\n { id: 'RejectedDate', numeric: false, disablePadding: true, label: 'Rejected Date' }\r\n];\r\n\r\n\r\n\r\nconst utils = new ViewUtils();\r\nconst addFormRef = React.createRef();\r\nconst toolbarRef = React.createRef();\r\n\r\nconst useStyles = theme => ({\r\n appBar: {\r\n position: 'relative',\r\n },\r\n title: {\r\n flex: 1,\r\n color: 'white',\r\n },\r\n table: {\r\n minWidth: 700,\r\n },\r\n});\r\n\r\nclass DGApplicationDashboard extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n keyUpSwitch: false,\r\n addDialogOpen: false,\r\n selectedDGApplication: null,\r\n FinancialYearID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.FinancialYearID)) ? this.props.location.state.FinancialYearID : null,\r\n id: this.props.location.state.organisationID,\r\n promptOpen: false,\r\n promptTitle: \"Remove DG Application\",\r\n promptContent: \"Are you sure you want to remove this DG Application?\",\r\n searchParameters: [{ Name: \"OrganisationID\", Value: this.props.location.state.organisationID }, { Name: \"FinancialYearID\", Value: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.FinancialYearID)) ? this.props.location.state.FinancialYearID : null }],\r\n dependency: null\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: \"CloseIcon\" }\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Create Application', icon: 'AddIcon', visible: this.props.menuPermissionItem.Add },\r\n { id: 'view', label: '', tooltip: 'View Application Forms', icon: 'ViewIcon', disabled: utils.isNull(this.state.selectedDGApplication) },\r\n { id: 'remove', label: '', tooltip: 'Remove DG Application', disabled: utils.isNull(this.state.selectedDGApplication), icon: \"Delete\", visible: this.props.menuPermissionItem.Delete },\r\n { id: \"print\", label: \"Print Authorisation Pages\", tooltip: \"\", disabled: true },\r\n\r\n ]\r\n }\r\n ]\r\n }\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/DGOrganisation',\r\n state: { selection: this.state.id }\r\n });\r\n }\r\n else if (\"add\" === buttonId) {\r\n this.setState({ addDialogOpen: true, Message: \"\" })\r\n }\r\n else if (\"view\" === buttonId) {\r\n this.props.history.push({\r\n pathname: \"/DGForms\",\r\n state: {\r\n DGID: this.state.selectedDGApplication,\r\n organisationID: this.state.id,\r\n FinancialYearID: this.state.FinancialYearID\r\n }\r\n })\r\n\r\n }\r\n else if (\"remove\" === buttonId) {\r\n this.setState({ promptOpen: true })\r\n } else if (\"print\" === buttonId) {\r\n this.setState({ OpenPrintDialog: true });\r\n }\r\n }\r\n\r\n postAddHandler(cancel, save) {\r\n if (save === true) {\r\n this.setState({\r\n addDialogOpen: false,\r\n selectedDGApplication: null,\r\n Message: \"Organisation DG Application successfully created\",\r\n MessageStyle: \"success\",\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters))\r\n });\r\n\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n }\r\n else if (cancel === true) {\r\n this.setState({\r\n addDialogOpen: false,\r\n selectedDGApplication: null,\r\n Message: \"\"\r\n })\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n }\r\n else {\r\n this.setState({\r\n addDialogOpen: false,\r\n selectedDGApplication: null,\r\n Message: \"A system error has occured, please try again later or contact your administrator\",\r\n MessageStyle: \"warning\"\r\n })\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n }\r\n }\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n if (!utils.isNull(selection)) {\r\n this.setState({ selectedDGApplication: selection[0].Id }, () => {\r\n });\r\n this.GetDGPermissionCheck(selection[0].Id);\r\n }\r\n } else {\r\n this.setState({ selectedDGApplication: null });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"view\", selection === null || selection.length === 0);\r\n toolbarRef.current.setButtonDisabled(\"print\", selection === null || selection.length === 0);\r\n }\r\n\r\n\r\n GetDGPermissionCheck = (Id) => {\r\n let url = \"api/sims/DGApplication/GetDGApplicationPermissionCheck?DGApplicationID=\" + Id;\r\n utils.invokeUrl(url, (response) => {\r\n if (response.Result.split(\",\")[0] === \"ViewOnly\") {\r\n this.setState({\r\n adddisabled: true,\r\n })\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n toolbarRef.current.setButtonDisabled(\"view\", true);\r\n }\r\n else if (response.Result.split(\",\")[1] === \"Delete\") {\r\n this.setState({ adddisabled: true }, () => {\r\n toolbarRef.current.setButtonDisabled(\"remove\", false);\r\n toolbarRef.current.setButtonDisabled(\"view\", false);\r\n })\r\n\r\n }\r\n else if (response.Result.split(\",\")[0] === \"Enabled\") {\r\n this.setState({ adddisabled: true }, () => {\r\n toolbarRef.current.setButtonDisabled(\"remove\", false);\r\n toolbarRef.current.setButtonDisabled(\"view\", false);\r\n })\r\n\r\n }\r\n\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n\r\n successfulApplicationRemoveCallback = (response) => {\r\n\r\n if (!utils.isNull(response.EntityId) && response.EntityId === 0) {\r\n this.setState({ selectedDGApplication: null, Message: response.Message, MessageStyle: response.MessageType.toLowerCase() });\r\n //Force a refresh\r\n this.setState({ searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters)) })\r\n }\r\n }\r\n\r\n unsuccessfulApplicationRemoveCallback = (response) => {\r\n if (!utils.isNull(response.Message) && response.Message !== \"\") {\r\n this.setState({ Message: response.Message, MessageStyle: response.MessageType.toLowerCase() })\r\n }\r\n }\r\n\r\n removeApplication(url) {\r\n this.setState({ promptOpen: false }, () => {\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n })\r\n\r\n let fullUrl = `${url}?id=${this.state.selectedDGApplication}`;\r\n utils.invokeUrlDelete(fullUrl, this.successfulApplicationRemoveCallback, this.unsuccessfulApplicationRemoveCallback);\r\n }\r\n closePrompt = () => {\r\n this.setState({ promptOpen: false })\r\n }\r\n\r\n handleFormValueChange(values) {\r\n\r\n let FinancialYearID = values.FinancialYearID.Id;\r\n let newsearchParameters = [...this.state.searchParameters];\r\n let temp_element = { ...newsearchParameters[1] };\r\n temp_element.Value = FinancialYearID\r\n newsearchParameters[1] = temp_element;\r\n\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(newsearchParameters)),\r\n FinancialYearID: FinancialYearID\r\n });\r\n }\r\n\r\n handleCreateFormValueChange = (values) => {\r\n let newValues = null;\r\n if (!utils.isNull(values)) {\r\n newValues = { ...values };\r\n }\r\n\r\n console.log(newValues);\r\n if (!utils.isNull(newValues)) {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(newValues)) {\r\n this.setState({\r\n model: newValues,\r\n clearGrid: true,\r\n selectedDG: null,\r\n Message: \"\"\r\n });\r\n if (!utils.isNull(newValues.DGTypeID) && JSON.stringify(this.state.dependency) !== JSON.stringify(newValues.DGTypeID)) {\r\n const dgTypeID = [{ Name: \"FinancialYearID\", Value: newValues.FinancialYearID.Id }, { Name: \"DGTypeID\", Value: newValues.DGTypeID.Id }]\r\n if (!utils.isNull(dgTypeID[1].Value)) {\r\n this.setState({ dependency: dgTypeID })\r\n }\r\n };\r\n }\r\n }\r\n }\r\n\r\n ClosePrintDialog = () => {\r\n this.setState({ OpenPrintDialog: false });\r\n toolbarRef.current.setButtonDisabled(\"remove\", true);\r\n toolbarRef.current.setButtonDisabled(\"view\", true);\r\n toolbarRef.current.setButtonDisabled(\"print\", true);\r\n };\r\n\r\n render() {\r\n const { classes } = this.props;\r\n return (\r\n \r\n\r\n \r\n {\"DG Application Dashboard\" + (this.props.location.state.organisationName !== null ? \" > \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"\")}\r\n
\r\n\r\n \r\n\r\n \r\n this.handleFormValueChange(values)}\r\n />\r\n\r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig}\r\n />\r\n\r\n { this.handleSelectionChange(selection) }}\r\n dataUrl={!utils.isNull(this.state.FinancialYearID) ? \"api/sims/dgapplication/GetSearch\" : null}\r\n searchParameters={this.state.searchParameters}\r\n paged={true} />\r\n
\r\n\r\n this.postAddHandler(cancel, save)}\r\n valueChangeHandler={this.handleCreateFormValueChange}\r\n datamodel={this.state.model}\r\n >\r\n \r\n \r\n\r\n { this.removeApplication(\"api/sims/DGApplication/RemoveDGApplication\") }}\r\n closePrompt={this.closePrompt}\r\n />\r\n \r\n\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withStyles(useStyles())(withMenuPermission(DGApplicationDashboard)));\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from \"react-router-dom\";\r\nimport { ViewContainer } from \"../../../View.jsx\";\r\nimport ViewUtils from \"../../../ViewUtils\";\r\nimport Button from \"@material-ui/core/Button\";\r\n// import withMenuPermission from \"../../../../../widgets/withMenuPermission\";\r\nimport { withStyles, makeStyles } from \"@material-ui/core/styles\";\r\nimport Table from \"@material-ui/core/Table\";\r\nimport TableBody from \"@material-ui/core/TableBody\";\r\nimport TableCell from \"@material-ui/core/TableCell\";\r\nimport TableContainer from \"@material-ui/core/TableContainer\";\r\nimport TableHead from \"@material-ui/core/TableHead\";\r\nimport TableRow from \"@material-ui/core/TableRow\";\r\nimport Paper from \"@material-ui/core/Paper\";\r\nimport { Link } from \"react-router-dom\";\r\nimport Item from \"antd/lib/list/Item\";\r\nimport AlertItem from \"../../../widgets/AlertItem\";\r\nimport EnhancedToolbar from \"../../../widgets/Toolbar\";\r\n\r\nimport \"./Style.css\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [{ id: \"close\", label: \"Back to DG Dashboard\", tooltip: \"\" }],\r\n },\r\n ],\r\n};\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: \"#01579B\",\r\n color: theme.palette.common.white,\r\n border: \"1px solid white\",\r\n },\r\n body: {\r\n fontSize: 11,\r\n },\r\n}))(TableCell);\r\n\r\nconst StyledTableTextCell = withStyles((theme) => ({\r\n body: {\r\n fontSize: 14,\r\n fontWeight: 500,\r\n },\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n \"&:nth-of-type(odd)\": {\r\n backgroundColor: theme.palette.action.hover,\r\n height: theme.palette.action.main,\r\n },\r\n },\r\n}))(TableRow);\r\n\r\nconst useStyles = (theme) => ({\r\n table: {\r\n minWidth: 700,\r\n },\r\n});\r\n\r\nclass DGForms extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n objectProps: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.object)) ? this.props.location.state.object : null,\r\n formArray: [],\r\n FinancialYear: '',\r\n OrganisationName: '',\r\n Status: '',\r\n model: {\r\n Name: \"\",\r\n },\r\n title: \"\",\r\n id: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.DGID)) ? this.props.location.state.DGID : null,\r\n organisationID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.organisationID)) ? this.props.location.state.organisationID : null,\r\n FinancialYearID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.FinancialYearID)) ? this.props.location.state.FinancialYearID : null,\r\n\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.getForms(this.state.Id);\r\n this.getFormHead(this.state.Id);\r\n this.GetDGFormSubmissionCheck(this.state.Id);\r\n }\r\n getForms() {\r\n let url =\r\n \"api/sims/dgapplication/GetDGForms?DGApplicationID=\" + this.state.id;\r\n utils.invokeUrl(\r\n url,\r\n (response) => {\r\n this.setState({ formArray: response });\r\n },\r\n null,\r\n {\r\n method: \"GET\",\r\n headers: {\r\n Accept: \"application/json\",\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Bearer \" + localStorage.getItem(\"token\"),\r\n },\r\n }\r\n );\r\n }\r\n getFormHead() {\r\n let url =\r\n \"api/sims/dgapplication/getfindheader?DGApplicationID=\" + this.state.id;\r\n utils.invokeUrl(\r\n url,\r\n (response) => {\r\n this.setState({\r\n FinancialYear: response.FinancialYear,\r\n OrganisationName: response.OrganisationName,\r\n SDLNumber: response.SDLNumber,\r\n Status: response.Status,\r\n });\r\n },\r\n null,\r\n {\r\n method: \"GET\",\r\n headers: {\r\n Accept: \"application/json\",\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Bearer \" + localStorage.getItem(\"token\"),\r\n },\r\n }\r\n );\r\n }\r\n GetDGFormSubmissionCheck() {\r\n let url =\r\n \"api/sims/DGApplication/GetDGFormSubmissionCheck?DGApplicationID=\" + this.state.id;\r\n utils.invokeUrl(\r\n url,\r\n (response) => {\r\n this.setState({\r\n CanSubmit: response.Result,\r\n });\r\n },\r\n null,\r\n {\r\n method: \"GET\",\r\n headers: {\r\n Accept: \"application/json\",\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Bearer \" + localStorage.getItem(\"token\"),\r\n },\r\n }\r\n );\r\n }\r\n submit(id) {\r\n let url =\r\n \"api/sims/DGApplication/updateDGApplicationSubmit?DGApplicationID=\" + this.state.id;\r\n utils.invokeUrl(\r\n url,\r\n (response) => {\r\n this.successCallback(response);\r\n },\r\n (response) => {\r\n this.error(response);\r\n },\r\n {\r\n method: \"PUT\",\r\n headers: {\r\n Accept: \"application/json\",\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Bearer \" + localStorage.getItem(\"token\"),\r\n },\r\n }\r\n );\r\n }\r\n\r\n successCallback(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n this.GetDGFormSubmissionCheck();\r\n }\r\n error(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n\r\n close() {\r\n this.props.history.push({\r\n pathname: \"/DGApplicationDashboard\",\r\n state: {\r\n organisationID: this.state.organisationID,\r\n organisationName: this.state.OrganisationName,\r\n sdlnumber: this.state.SDLNumber,\r\n FinancialYearID: this.state.FinancialYearID\r\n },\r\n });\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"save\" === buttonId) {\r\n //this.save();\r\n } else {\r\n this.close();\r\n }\r\n }\r\n buttonSubmitClickHandler() {\r\n this.submit();\r\n }\r\n\r\n render() {\r\n const { classes } = this.props;\r\n const tablerows = this.state.formArray.map((item, index) =>\r\n\r\n item.URL !== \"\" ? (\r\n \r\n \r\n {item.Number}\r\n \r\n \r\n {item.FormDescription}\r\n \r\n {item.DueDate}\r\n \r\n \r\n \r\n Select\r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n\r\n \r\n {item.FormDescription}\r\n \r\n\r\n \r\n\r\n \r\n \r\n )\r\n );\r\n const submitrow =\r\n this.state.CanSubmit == \"1\" ? (\r\n this.buttonSubmitClickHandler()}\r\n className={classes.margin}\r\n >\r\n SUBMIT\r\n \r\n ) : (\r\n Application Status : {this.state.Status}\r\n );\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n | \r\n {submitrow}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n #\r\n Form Description\r\n Due Date\r\n Select\r\n \r\n \r\n {tablerows}\r\n
\r\n \r\n );\r\n }\r\n}\r\nexport default withRouter(withStyles(useStyles())(DGForms));\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { EntityForm } from '../../widgets/Forms';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nexport default function DGVerificationSearchForm(props) {\r\n const [labelWidth, setLabelWidth, tabValue] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n const [dependency, setDependency] = React.useState(props.dependency);\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n setDependency(props.dependency);\r\n }, [props.dependency]);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { withRouter } from \"react-router-dom\";\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport ViewUtils from \"../../ViewUtils\";\r\nimport { ViewContainer } from \"../../View.jsx\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nimport DGVerificationSearchForm from \"./DGVerificationSearchForm\";\r\n\r\n\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nclass DGVerificationSearch extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n \r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: \"close\",label: \"Close\", tooltip: \"Close\", icon: \"CloseIcon\"},\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [ \r\n { id: \"view\", label: \"\", tooltip: \"View\", icon: \"ViewIcon\", disabled: true },\r\n \r\n ],\r\n },\r\n ],\r\n };\r\n\r\n this.headCells = [\r\n {id: \"FinancialYear\",numeric: false,disablePadding: true,label: \"Financial Year\"}, \r\n {id: \"FundingWindow\",numeric: false,disablePadding: true,label: \"Funding Window\"},\r\n {id: \"SubmissionNumber\",numeric: false,disablePadding: true,label: \"Submission Number\"},\r\n {id: \"DGType\", numeric: false, disablePadding: true, label: \"DG Type\"},\r\n {id: \"DGIntervention\",numeric: false,disablePadding: true,label: \"DG Intervention\"},\r\n {id: \"DGApplicationStatus\",numeric: false,disablePadding: true,label: \"DG Application Status\"},\r\n ];\r\n\r\n let model = {\r\n OrganisationID: this.props.location.state.organisationID,\r\n FinancialYearID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.FinancialYearID)) ? this.props.location.state.FinancialYearID : \"\",\r\n FundingWindowID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.FundingWindowID)) ? this.props.location.state.FundingWindowID : \"\",\r\n };\r\n\r\n this.searchParameters = [\r\n { Name: \"OrganisationID\", Value: this.props.location.state.organisationID },\r\n { Name: \"FinancialYearID\", Value: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.FinancialYearID)) ? this.props.location.state.FinancialYearID : \"\" } ,\r\n { Name: \"FundingWindowID\", Value: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.FundingWindowID)) ? this.props.location.state.FundingWindowID : \"\" } ,\r\n ];\r\n\r\n this.state = {\r\n model: model,\r\n keyUpSwitch: false,\r\n selectedDG: null,\r\n OrganisationID: this.props.location.state.organisationID,\r\n FinancialYearID : null,\r\n FundingWindowID : null,\r\n dependency: null\r\n };\r\n }\r\n handleSelection = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedDG: selection[0].Id });\r\n } else {\r\n this.setState({ selectedDG: null });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"view\", false);\r\n\r\n }\r\n \r\n handleFormValueChange = (values) => {\r\n let newValues = null;\r\n if (!utils.isNull(values)) {\r\n newValues = { ...values };\r\n }\r\n if (!utils.isNull(newValues)) {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(newValues)) {\r\n this.setState({\r\n model: newValues,\r\n clearGrid: true,\r\n selectedDG: null,\r\n Message: \"\",\r\n FinancialYearID: values.FinancialYearID.Id\r\n });\r\n if (!utils.isNull(newValues.FinancialYearID) && JSON.stringify(this.state.dependency) !== JSON.stringify(newValues.FinancialYearID)) {\r\n const financialYearID = {\r\n Name: \"FinancialYearID\",\r\n Value: newValues.FinancialYearID.Id\r\n }\r\n if (!utils.isNull(financialYearID.Value)) {\r\n this.setState({ dependency: financialYearID })\r\n }\r\n };\r\n }\r\n }\r\n}\r\n\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (\"view\" === buttonId) {\r\n this.props.history.push({\r\n pathname: \"/DGVerificationMain\",\r\n state: {\r\n OrganisationID: this.state.OrganisationID,\r\n DGApplicationID: this.state.selectedDG,\r\n FinancialYearID : this.state.model.FinancialYearID,\r\n FundingWindowID : this.state.model.FundingWindowID\r\n },\r\n });\r\n }\r\n else if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/DGOrganisation',\r\n state: { selection: this.props.location.state.organisationID }\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"DG Verification \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n\r\n
\r\n { this.handleSelection(selection) }}\r\n toolbarRef={toolbarRef}\r\n >\r\n { this.onkeyup(e) }}\r\n valueChangeHandler={this.handleFormValueChange}\r\n dependency={this.state.dependency}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(connect()(DGVerificationSearch));\r\n","import React, { Component, Fragment } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport { ViewContainer } from \"../../View.jsx\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport Button from '@material-ui/core/Button';\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport { Link } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport Item from \"antd/lib/list/Item\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport './Style.css'\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport CloudDownloadIcon from '@material-ui/icons/CloudDownload';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport WebIcon from '@material-ui/icons/Web';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport { Typography } from \"antd\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport Slide from '@material-ui/core/Slide';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport Toolbar from '@material-ui/core/Toolbar';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'Back to DG Verification Dashboard', tooltip: '' }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#01579B',\r\n color: theme.palette.common.white,\r\n border: '1px solid white',\r\n },\r\n body: {\r\n fontSize: 11,\r\n },\r\n}))(TableCell);\r\n\r\nconst StyledTableTextCell = withStyles((theme) => ({\r\n body: {\r\n fontSize: 14,\r\n fontWeight: 500\r\n },\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n height: theme.palette.action.main\r\n },\r\n },\r\n}))(TableRow);\r\n\r\nconst headCells = [\r\n { id: 'Occupation', numeric: false, disablePadding: true, label: 'Occupation', widthRatio: .154 },\r\n { id: 'AfricanMale', numeric: false, disablePadding: true, label: 'African Male', widthRatio: .047 },\r\n { id: 'AfricanFemale', numeric: false, disablePadding: true, label: 'African Female', widthRatio: .047 },\r\n { id: 'AfricanDisabled', numeric: false, disablePadding: true, label: 'African Disabled', widthRatio: .047 },\r\n { id: 'ColouredMale', numeric: false, disablePadding: true, label: 'Coloured Male', widthRatio: .047 },\r\n { id: 'ColouredFemale', numeric: false, disablePadding: true, label: 'Coloured Female', widthRatio: .047 },\r\n { id: 'ColouredDisabled', numeric: false, disablePadding: true, label: 'Coloured Disabled', widthRatio: .047 },\r\n { id: 'IndianMale', numeric: false, disablePadding: true, label: 'Indian Male', widthRatio: .047 },\r\n { id: 'IndianFemale', numeric: false, disablePadding: true, label: 'Indian Female', widthRatio: .047 },\r\n { id: 'IndianDisabled', numeric: false, disablePadding: true, label: 'Indian Disabled', widthRatio: .047 },\r\n { id: 'WhiteMale', numeric: false, disablePadding: true, label: 'White Male', widthRatio: .047 },\r\n { id: 'WhiteFemale', numeric: false, disablePadding: true, label: 'White Female', widthRatio: .047 },\r\n { id: 'WhiteDisabled', numeric: false, disablePadding: true, label: 'White Disabled', widthRatio: .047 },\r\n { id: 'Age1', numeric: false, disablePadding: true, label: 'Age < 35', widthRatio: .047 },\r\n { id: 'Age2', numeric: false, disablePadding: true, label: 'Age 35 - 55', widthRatio: .047 },\r\n { id: 'Age3', numeric: false, disablePadding: true, label: 'Age > 55', widthRatio: .047 },\r\n { id: 'TotalMale', numeric: false, disablePadding: true, label: 'Total Male', widthRatio: .047 },\r\n { id: 'TotalFemale', numeric: false, disablePadding: true, label: 'Total Female', widthRatio: .047 },\r\n { id: 'TotalDisabled', numeric: false, disablePadding: true, label: 'Total Disabled', widthRatio: .047 }\r\n];\r\n\r\nconst useStyles = theme => ({\r\n appBar: {\r\n position: 'relative',\r\n },\r\n title: {\r\n flex: 1,\r\n color: 'white',\r\n },\r\n table: {\r\n minWidth: 700,\r\n },\r\n});\r\n\r\nclass DGVerificationMain extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n objectProps: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.object)) ? this.props.location.state.object : null,\r\n formObject: null,\r\n lookupArray: null,\r\n lookupVArray: null,\r\n lookupQVArray: null,\r\n FinancialYear: '',\r\n OrganisationName: '',\r\n Status: '',\r\n model: {\r\n Name: \"\",\r\n },\r\n title: \"\",\r\n id: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.DGApplicationID)) ? this.props.location.state.DGApplicationID : null,\r\n OrganisationID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.OrganisationID)) ? this.props.location.state.OrganisationID : null,\r\n FinancialYearID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.FinancialYearID)) ? this.props.location.state.FinancialYearID : null,\r\n FundingWindowID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.FundingWindowID)) ? this.props.location.state.FundingWindowID : null,\r\n VerificationPermission: \"\",\r\n searchParameters: [{ Name: \"DGApplicationID\", Value: this.props.location.state.DGApplicationID }, { Name: \"OrganisationID\", Value: this.props.location.state.OrganisationID }, { Name: \"FinancialYearID\", Value: this.props.location.state.FinancialYearID }],\r\n OpenDialog: false,\r\n formViewURL: \"\",\r\n formName: \"\",\r\n linkDialogOpen: false,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.getHeaders(this.state.id)\r\n this.getVerification(this.state.id)\r\n this.getVerificationStatusList(this.state.id)\r\n this.getlookup(this.state.id)\r\n this.CheckVerificationPermissions(this.state.id);\r\n }\r\n\r\n getHeaders = (id) => {\r\n let url = \"api/sims/dgverification/getfindheader?DGApplicationID=\" + id;\r\n\r\n utils.invokeUrl(\r\n url,\r\n (response) => {\r\n this.setState({\r\n FinancialYear: response.FinancialYear,\r\n OrganisationName: response.OrganisationName,\r\n SDLNumber: response.SDLNumber\r\n })\r\n console.log(response);\r\n },\r\n null,\r\n {\r\n method: \"GET\",\r\n headers: {\r\n Accept: \"application/json\",\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Bearer \" + localStorage.getItem(\"token\"),\r\n },\r\n }\r\n );\r\n };\r\n\r\n getVerification(id) {\r\n let url = `api/sims/dgverification/GetDGVerification?request={\"searchParameters\":[{\"Name\":\"DGApplicationID\",\"Value\":${this.state.id}},{\"Name\":\"OrganisationID\",\"Value\":${this.state.OrganisationID}},{\"Name\":\"FinancialYearID\",\"Value\":${this.state.FinancialYearID.Id}}]}`;\r\n utils.invokeUrl(url, (response) => {\r\n this.setState({\r\n formObject: response\r\n })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n\r\n getVerificationStatusList(id) {\r\n let url = `api/sims/dgverification/GetDGVerificationStatusList?request={\"searchParameters\":[{\"Name\":\"DGApplicationID\",\"Value\":${this.state.id}},{\"Name\":\"OrganisationID\",\"Value\":${this.state.OrganisationID}},{\"Name\":\"FinancialYearID\",\"Value\":${this.state.FinancialYearID.Id}}]}`;\r\n utils.invokeUrl(url, (response) => {\r\n this.setState({\r\n VerificationStatusListObject: response\r\n })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n getlookup(id) {\r\n let url = \"api/sims/dgverification/GetLookupListDGEvidenceVerified\";\r\n utils.invokeUrl(url, (response) => {\r\n this.setState({ lookupArray: response })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n\r\n let urlV = \"api/sims/dgverification/GetLookupListDGVerificationStatus\";\r\n utils.invokeUrl(urlV, (response) => {\r\n this.setState({ lookupVArray: response })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n\r\n let urlQV = \"api/sims/dgverification/GetLookupListDGQualifictionVerificationStatus\";\r\n utils.invokeUrl(urlQV, (response) => {\r\n this.setState({ lookupQVArray: response })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n\r\n CheckVerificationPermissions(id) {\r\n let url = \"api/sims/DGVerification/GetDGVerificationPermissionCheck?DGApplicationID=\" + this.state.id;\r\n utils.invokeUrl(url, (response) => {\r\n this.setState({\r\n VerificationPermission: response.Result\r\n })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n\r\n\r\n\r\n\r\n handleChecklistArrayEV = (event, index) => {\r\n const values = [...this.state.formObject.DGVerificationDocumentsDto];\r\n const indexObject = { ...values[index] };\r\n indexObject.DGEvidenceVerifiedID = { Id: event.target.value };\r\n values[index] = indexObject;\r\n const finalObject = { ...this.state.formObject, DGVerificationDocumentsDto: values }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleChecklistArrayC = (event, index) => {\r\n const values = [...this.state.formObject.DGVerificationDocumentsDto];\r\n const indexObject = { ...values[index] };\r\n indexObject.Comment = event.target.value;\r\n values[index] = indexObject;\r\n const finalObject = { ...this.state.formObject, DGVerificationDocumentsDto: values }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleChecklistArrayQV = (event, index) => {\r\n const values = [...this.state.formObject.DGVerificationInterventionDto.DGVerificationInterventionData];\r\n const indexObject = { ...values[index] };\r\n indexObject.QualificationVerificationStatusID = event.target.value;\r\n values[index] = indexObject;\r\n const newDGVerificationInterventionDto = { ...this.state.formObject.DGVerificationInterventionDto };\r\n newDGVerificationInterventionDto.DGVerificationInterventionData = values;\r\n const finalObject = { ...this.state.formObject, DGVerificationInterventionDto: newDGVerificationInterventionDto }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleChecklistArrayQC = (event, index) => {\r\n const values = [...this.state.formObject.DGVerificationInterventionDto.DGVerificationInterventionData];\r\n const indexObject = { ...values[index] };\r\n indexObject.QualificationVerificationComments = event.target.value;\r\n values[index] = indexObject;\r\n const newDGVerificationInterventionDto = { ...this.state.formObject.DGVerificationInterventionDto };\r\n newDGVerificationInterventionDto.DGVerificationInterventionData = values;\r\n const finalObject = { ...this.state.formObject, DGVerificationInterventionDto: newDGVerificationInterventionDto }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleStatus = (event) => {\r\n const finalObject = { ...this.state.formObject, DGStatusID: { Id: event.target.value } }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleComment = (event) => {\r\n const finalObject = { ...this.state.formObject, Comments: event.target.value }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n SaveVerification = () => {\r\n\r\n let url = \"api/sims/dgverification/UpdateDGVerification\";\r\n utils.invokeUrl(url, (response) => {\r\n this.successCallback(response);\r\n },\r\n (response) => {\r\n this.error(response);\r\n },\r\n {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(this.state.formObject)\r\n }\r\n )\r\n }\r\n\r\n successCallback(response) {\r\n\r\n if (response.MessageType === \"WARNING\") {\r\n let errResult = JSON.parse(response.Message);\r\n let message = \"\";\r\n errResult.map((item, index) => (\r\n message += item.Item1 + ' : ' + item.Item2 + '\\n'\r\n ))\r\n this.setState({ message: message, messageStyle: response.MessageType });\r\n }\r\n else {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n this.getVerification(this.state.id);\r\n this.getVerificationStatusList(this.state.id)\r\n }\r\n }\r\n error(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n\r\n close() {\r\n this.props.history.push({\r\n pathname: '/DGVerificationSearch',\r\n state: {\r\n organisationID: this.state.OrganisationID,\r\n DGApplicationID: this.state.DGApplicationID,\r\n FinancialYearID: this.state.FinancialYearID,\r\n FundingWindowID: this.state.FundingWindowID,\r\n organisationName: this.state.OrganisationName,\r\n sdlnumber: this.state.SDLNumber\r\n },\r\n });\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.close();\r\n }\r\n }\r\n\r\n buttonSubmitClickHandler() {\r\n this.submit();\r\n }\r\n\r\n FileDownload(id, DocumentType) {\r\n console.log(id);\r\n utils.invokeUrl(\"api/sims/dgverification/DownloadDGDocument?DocumentID=\" + id, (response) => {\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n }, (e) => {\r\n this.setState({ messsageAlert: utils.SYSTEM_ERROR_MESSAGE, messageStyle: \"outlinedError\" });\r\n }\r\n );\r\n };\r\n\r\n OpenForm(id, formUrl, fName) {\r\n console.log(formUrl);\r\n let newsearchParameters = [...this.state.searchParameters];\r\n let temp_element = { ...newsearchParameters[1] };\r\n temp_element.Value = id\r\n newsearchParameters[1] = temp_element;\r\n\r\n this.setState({\r\n searchParameters: JSON.parse(JSON.stringify(newsearchParameters)),\r\n OpenDialog: true,\r\n formViewURL: formUrl,\r\n formName: fName\r\n });\r\n }\r\n\r\n CloseForm = () => {\r\n this.setState({\r\n OpenDialog: false,\r\n formViewURL: \"\",\r\n formName: \"\"\r\n });\r\n };\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n render() {\r\n\r\n const { classes } = this.props;\r\n const doctablerows = !utils.isNull(this.state.formObject) ? this.state.formObject.DGVerificationDocumentsDto.map((item, index) => (\r\n\r\n \r\n \r\n {index + 1}\r\n \r\n {item.DocumentDescription}\r\n {item.EvidenceAvaialble}\r\n \r\n this.handleChecklistArrayEV(values, index)} >\r\n \r\n {this.state.lookupArray.map((lookupitem, index) => (\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {item.DGDocumentUploadID !== 0 ?\r\n this.FileDownload(item.DGDocumentUploadID)} >\r\n :\r\n null\r\n }\r\n \r\n \r\n ))\r\n :\r\n null;\r\n\r\n const inttableheader = !utils.isNull(this.state.formObject) ? this.state.formObject.DGVerificationInterventionDto.FriendlyColumnNames.map((item, index) => (\r\n item === \"ID\" ? # : {item}\r\n )) : null;\r\n\r\n const inttablerows = !utils.isNull(this.state.formObject) ? this.state.formObject.DGVerificationInterventionDto.DGVerificationInterventionData.map((item, index) => (\r\n \r\n {Object.keys(item).map((innerItem, indexObject) => (\r\n indexObject === 0 ? \r\n {indexObject + 1}\r\n :\r\n innerItem === \"QualificationVerificationStatusID\" ?\r\n \r\n this.handleChecklistArrayQV(values, index)} >\r\n \r\n {this.state.lookupQVArray.map((lookupitem, index) => (\r\n \r\n ))}\r\n \r\n :\r\n innerItem === \"QualificationVerificationComments\" ?\r\n \r\n \r\n :\r\n {item[innerItem]}\r\n ))}\r\n \r\n ))\r\n :\r\n null;\r\n\r\n const statuslistrows = !utils.isNull(this.state.VerificationStatusListObject) && this.state.VerificationStatusListObject.TotalNumberOfRows !== 0 ? this.state.VerificationStatusListObject.Data.map((item, index) => (\r\n\r\n \r\n {item.Verifier}\r\n {item.VerificationDate}\r\n {item.DGStatus}\r\n \r\n ))\r\n :\r\n null;\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n #\r\n Supporting Documentation\r\n Evidence Available / Submitted (Yes/No)\r\n Evidence Verified\r\n Comments\r\n Links\r\n \r\n \r\n \r\n {doctablerows}\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n {inttableheader}\r\n \r\n \r\n \r\n {inttablerows}\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Status
\r\n | \r\n \r\n this.handleStatus(values)}>\r\n \r\n {!utils.isNull(this.state.lookupVArray) ? this.state.lookupVArray.map((lookupVitem, index) => (\r\n\r\n \r\n\r\n )) : null}\r\n \r\n | \r\n \r\n \r\n \r\n Comments
\r\n | \r\n \r\n \r\n | \r\n \r\n \r\n
\r\n \r\n {!utils.isNull(this.state.VerificationStatusListObject) && this.state.VerificationStatusListObject.TotalNumberOfRows !== 0 ?\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n Updated By\r\n Date Updated\r\n DG Status\r\n \r\n \r\n \r\n {statuslistrows}\r\n \r\n
\r\n \r\n : null}\r\n
\r\n \r\n\r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withStyles(useStyles())(withMenuPermission(DGVerificationMain)));","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport { SelectItem } from './../../widgets/SelectItem';\r\nimport { EntityForm } from '../../widgets/Forms';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nexport default function DGEvaluationSearchForm(props) {\r\n const [labelWidth, setLabelWidth, tabValue] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { withRouter } from \"react-router-dom\";\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport ViewUtils from \"../../ViewUtils\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nimport DGEvaluationSearchForm from \"./DGEvaluationSearchForm\";\r\nimport EnhancedToolbar from \"../../widgets/Toolbar\";\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nclass DGEvaluationSearch extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: \"close\", label: \"Close\", tooltip: \"Close\", icon: \"CloseIcon\" },\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: \"view\", label: \"\", tooltip: \"View\", icon: \"ViewIcon\", disabled: true },\r\n\r\n ],\r\n },\r\n ],\r\n };\r\n\r\n this.headCells = [\r\n { id: \"FinancialYear\", numeric: false, disablePadding: true, label: \"Financial Year\" },\r\n { id: \"SubmissionNumber\", numeric: false, disablePadding: true, label: \"Submission Number\" },\r\n { id: \"DGType\", numeric: false, disablePadding: true, label: \"DG Type\" },\r\n { id: \"DGIntervention\", numeric: false, disablePadding: true, label: \"DG Intervention\" },\r\n { id: \"DGApplicationStatus\", numeric: false, disablePadding: true, label: \"DG Application Status\" },\r\n ];\r\n\r\n let model = {\r\n OrganisationID: this.props.location.state.organisationID,\r\n FinancialYearID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.FinancialYearID)) ? this.props.location.state.FinancialYearID : \"\"\r\n };\r\n\r\n this.searchParameters = [\r\n { Name: \"OrganisationID\", Value: this.props.location.state.organisationID },\r\n { Name: \"FinancialYearID\", Value: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.FinancialYearID)) ? this.props.location.state.FinancialYearID : \"\" }\r\n ];\r\n\r\n this.state = {\r\n model: model,\r\n keyUpSwitch: false,\r\n selectedDG: null,\r\n OrganisationID: this.props.location.state.organisationID,\r\n FinancialYearID: null\r\n };\r\n }\r\n\r\n handleSelection = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedDG: selection[0].Id });\r\n } else {\r\n this.setState({ selectedDG: null });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"view\", false);\r\n }\r\n\r\n handleFormValueChange = (values) => {\r\n let newValues = null;\r\n if (!utils.isNull(values)) {\r\n newValues = { ...values };\r\n }\r\n if (!utils.isNull(newValues)) {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(newValues)) {\r\n this.setState({\r\n model: newValues,\r\n clearGrid: true,\r\n selectedDG: null,\r\n Message: \"\",\r\n FinancialYearID: values.FinancialYearID.Id\r\n });\r\n }\r\n }\r\n }\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (\"view\" === buttonId) {\r\n this.props.history.push({\r\n pathname: \"/DGEvaluationMain\",\r\n state: {\r\n OrganisationID: this.state.OrganisationID,\r\n DGApplicationID: this.state.selectedDG,\r\n FinancialYearID: this.state.model.FinancialYearID\r\n },\r\n });\r\n }\r\n else if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/DGOrganisation',\r\n state: { selection: this.props.location.state.organisationID }\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"DG Evaluation \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n
\r\n { this.handleSelection(selection) }}\r\n toolbarRef={toolbarRef}\r\n >\r\n { this.onkeyup(e) }}\r\n valueChangeHandler={this.handleFormValueChange}\r\n dependency={this.state.dependency}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(connect()(DGEvaluationSearch));\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../../View.css\";\r\nimport \"./../../../Grid.css\";\r\nimport \"./../../../Form.css\";\r\nimport \"./../../../App.css\";\r\nimport \"../../../etqa/program/LearnershipSetup.css\";\r\nimport SearchView from \"../../../widgets/SearchView\";\r\nimport ViewUtils from '../../../ViewUtils';\r\nimport { ViewContainer } from \"./../../../View.jsx\";\r\nimport withMenuPermission from \"../../../widgets/withMenuPermission\";\r\n\r\n\r\nconst utils = new ViewUtils();\r\nconst headCells = [\r\n { id: 'Name', numeric: false, disablePadding: true, label: 'Reason Name' },\r\n { id: 'Description', numeric: false, disablePadding: true, label: 'Reason Description' }\r\n];\r\n\r\nclass DGLetterReasonDialog extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n\r\n this.searchParameters =\r\n [\r\n { Name: \"DGApplicationID\", Value: this.props.DGApplicationID },\r\n { Name: \"NewDGStatusID\", Value: this.props.NewDGStatusID }\r\n ]\r\n\r\n if (!utils.isNull(props.exclusions)) {\r\n this.searchParameters.push({ Name: \"Exclusions\", Value: props.exclusions });\r\n }\r\n\r\n this.state = {\r\n keyUpSwitch: false,\r\n };\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'add', label: '', tooltip: 'Add', icon: 'AddIcon', visible: this.props.menuPermissionItem.Add },\r\n { id: 'edit', label: '', tooltip: 'Edit', icon: 'EditIcon', disabled: true, visible: this.props.menuPermissionItem.Edit },\r\n { id: \"delete\", label: \"\", tooltip: \"Remove Learnership\", icon: \"DeleteIcon\", disabled: true, visible: this.props.menuPermissionItem.Delete }\r\n ]\r\n }\r\n ]\r\n };\r\n }\r\n\r\n onkeyup(e) {\r\n if (e.charCode == 13) {\r\n this.setState({ keyUpSwitch: !this.state.keyUpSwitch })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\n\r\nexport default withRouter(withMenuPermission(DGLetterReasonDialog));","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport { ViewContainer } from \"../../View.jsx\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport Button from '@material-ui/core/Button';\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport './Style.css'\r\nimport TextField from '@material-ui/core/TextField';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport LinkDialog from \"../../etqa/LinkDialog\";\r\nimport DGLetterReasonDialog from \"../application/Controls/DGLetterReasonDialog\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'Back to DG Evaluation Dashboard', tooltip: '' }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#01579B',\r\n color: theme.palette.common.white,\r\n border: '1px solid white',\r\n fontSize: 11,\r\n padding: 5\r\n },\r\n body: {\r\n fontSize: 11,\r\n padding: 5\r\n },\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n height: theme.palette.action.main\r\n },\r\n },\r\n}))(TableRow);\r\n\r\nconst useStyles = theme => ({\r\n appBar: {\r\n position: 'relative',\r\n },\r\n title: {\r\n flex: 1,\r\n color: 'white',\r\n },\r\n table: {\r\n minWidth: 700,\r\n }\r\n});\r\n\r\nclass DGEvaluationMain extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n objectProps: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.object)) ? this.props.location.state.object : null,\r\n formObject: null,\r\n lookupEArray: null,\r\n lookupQEArray: null,\r\n FinancialYear: '',\r\n OrganisationName: '',\r\n Status: '',\r\n model: {\r\n Name: \"\",\r\n },\r\n title: \"\",\r\n id: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.DGApplicationID)) ? this.props.location.state.DGApplicationID : null,\r\n OrganisationID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.OrganisationID)) ? this.props.location.state.OrganisationID : null,\r\n FinancialYearID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.FinancialYearID)) ? this.props.location.state.FinancialYearID : null,\r\n EvaluationPermission: \"\",\r\n searchParameters: [{ Name: \"DGApplicationID\", Value: this.props.location.state.DGApplicationID }, { Name: \"OrganisationID\", Value: this.props.location.state.OrganisationID }, { Name: \"FinancialYearID\", Value: this.props.location.state.FinancialYearID }],\r\n OpenDialog: false,\r\n formViewURL: \"\",\r\n formName: \"\",\r\n linkDialogOpen: false,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.getHeaders(this.state.id)\r\n this.getEvaluation(this.state.id)\r\n this.getlookup(this.state.id)\r\n this.CheckEvaluationPermissions(this.state.id);\r\n }\r\n\r\n getHeaders = (id) => {\r\n let url = \"api/sims/dgevaluation/getfindheader?DGApplicationID=\" + id;\r\n\r\n utils.invokeUrl(\r\n url,\r\n (response) => {\r\n this.setState({\r\n FinancialYear: response.FinancialYear,\r\n OrganisationName: response.OrganisationName,\r\n SDLNumber: response.SDLNumber\r\n })\r\n },\r\n null,\r\n {\r\n method: \"GET\",\r\n headers: {\r\n Accept: \"application/json\",\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Bearer \" + localStorage.getItem(\"token\"),\r\n },\r\n }\r\n );\r\n };\r\n\r\n getEvaluation(id) {\r\n let url = `api/sims/dgevaluation/GetDGEvaluation?request={\"searchParameters\":[{\"Name\":\"DGApplicationID\",\"Value\":${this.state.id}}]}`;\r\n utils.invokeUrl(url, (response) => {\r\n this.setState({\r\n formObject: response\r\n })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n getlookup(id) {\r\n\r\n let urlE = \"api/sims/dgevaluation/GetLookupListDGEvaluationStatus\";\r\n utils.invokeUrl(urlE, (response) => {\r\n this.setState({ lookupEArray: response })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n\r\n let urlQE = \"api/sims/dgevaluation/GetLookupListDGQualifictionEvaluationStatus\";\r\n utils.invokeUrl(urlQE, (response) => {\r\n this.setState({ lookupQEArray: response })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n\r\n CheckEvaluationPermissions(id) {\r\n let url = \"api/sims/DGEvaluation/GetDGEvaluationPermissionCheck?DGApplicationID=\" + this.state.id;\r\n utils.invokeUrl(url, (response) => {\r\n this.setState({\r\n EvaluationPermission: response.Result\r\n })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n\r\n handleChecklistArrayQN = (event, index) => {\r\n const values = [...this.state.formObject.DGEvaluationInterventionDto.DGEvaluationInterventionData];\r\n const indexObject = { ...values[index] };\r\n indexObject.NumberRecommendedForApproval = event.target.value;\r\n values[index] = indexObject;\r\n const newDGEvaluationInterventionDto = { ...this.state.formObject.DGEvaluationInterventionDto };\r\n newDGEvaluationInterventionDto.DGEvaluationInterventionData = values;\r\n const finalObject = { ...this.state.formObject, DGEvaluationInterventionDto: newDGEvaluationInterventionDto }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleChecklistArrayQV = (event, index) => {\r\n const values = [...this.state.formObject.DGEvaluationInterventionDto.DGEvaluationInterventionData];\r\n const indexObject = { ...values[index] };\r\n indexObject.QualificationEvaluationStatusID = event.target.value;\r\n values[index] = indexObject;\r\n const newDGEvaluationInterventionDto = { ...this.state.formObject.DGEvaluationInterventionDto };\r\n newDGEvaluationInterventionDto.DGEvaluationInterventionData = values;\r\n const finalObject = { ...this.state.formObject, DGEvaluationInterventionDto: newDGEvaluationInterventionDto }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleChecklistArrayQC = (event, index) => {\r\n const values = [...this.state.formObject.DGEvaluationInterventionDto.DGEvaluationInterventionData];\r\n const indexObject = { ...values[index] };\r\n indexObject.QualificationEvaluationComments = event.target.value;\r\n values[index] = indexObject;\r\n const newDGEvaluationInterventionDto = { ...this.state.formObject.DGEvaluationInterventionDto };\r\n newDGEvaluationInterventionDto.DGEvaluationInterventionData = values;\r\n const finalObject = { ...this.state.formObject, DGEvaluationInterventionDto: newDGEvaluationInterventionDto }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleStatus = (event) => {\r\n const finalObject = { ...this.state.formObject, DGStatusID: { Id: event.target.value } }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleComment = (event) => {\r\n const finalObject = { ...this.state.formObject, Comments: event.target.value }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n CheckStatus = () => {\r\n if (this.state.formObject.DGStatusID.Id === \"4\" || this.state.formObject.DGStatusID.Id === 4) {\r\n this.setState({\r\n linkDialogOpen: true,\r\n linkDialogTitle: 'Query Reasons',\r\n LinkDialogName: 'QueryReasons',\r\n NewDGStatusID: 4,\r\n message: \"\"\r\n })\r\n }\r\n else if (this.state.formObject.DGStatusID.Id === \"5\" || this.state.formObject.DGStatusID.Id === 5) {\r\n this.setState({\r\n linkDialogOpen: true,\r\n linkDialogTitle: 'Rejection Reasons',\r\n LinkDialogName: 'RejectionReasons',\r\n NewDGStatusID: 5,\r\n message: \"\"\r\n })\r\n }\r\n else { this.SaveEvaluation(null) }\r\n\r\n }\r\n\r\n SaveEvaluation = (selection) => {\r\n\r\n let ReasonsList = \"\";\r\n if (selection !== null) {\r\n for (let i = 0; i < selection.length; i++) {\r\n if (i === 0) { ReasonsList += selection[i].Id; }\r\n else { ReasonsList += \",\" + selection[i].Id; }\r\n\r\n }\r\n }\r\n\r\n let SaveObject = { ...this.state.formObject, Reasons: ReasonsList };\r\n this.setState({ formObject: SaveObject });\r\n\r\n let url = \"api/sims/dgevaluation/UpdateDGEvaluation\";\r\n utils.invokeUrl(url, (response) => {\r\n this.successCallback(response);\r\n },\r\n (response) => {\r\n this.error(response);\r\n },\r\n {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(SaveObject)\r\n }\r\n )\r\n }\r\n\r\n postLinkHandler(isCancel, linked) {\r\n if (linked === true) {\r\n\r\n this.setState({\r\n linkDialogOpen: false,\r\n searchParameters: JSON.parse(JSON.stringify(this.state.searchParameters))\r\n });\r\n }\r\n else if (isCancel === true) {\r\n this.setState({\r\n linkDialogOpen: false\r\n })\r\n }\r\n }\r\n\r\n successCallback(response) {\r\n\r\n if (response.MessageType === \"WARNING\") {\r\n let errResult = JSON.parse(response.Message);\r\n let message = \"\";\r\n errResult.map((item, index) => (\r\n message += item.Item1 + ' : ' + item.Item2 + '\\n'\r\n ))\r\n this.setState({ message: message, messageStyle: response.MessageType });\r\n }\r\n else {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n this.getEvaluation(this.state.id)\r\n }\r\n }\r\n error(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n\r\n close() {\r\n this.props.history.push({\r\n pathname: '/DGEvaluationSearch',\r\n state: {\r\n organisationID: this.state.OrganisationID,\r\n DGApplicationID: this.state.DGApplicationID,\r\n FinancialYearID: this.state.FinancialYearID,\r\n organisationName: this.state.OrganisationName,\r\n sdlnumber: this.state.SDLNumber\r\n },\r\n });\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.close();\r\n }\r\n }\r\n\r\n render() {\r\n\r\n const { classes } = this.props;\r\n\r\n const inttableheader = !utils.isNull(this.state.formObject) ? this.state.formObject.DGEvaluationInterventionDto.FriendlyColumnNames.map((item, index) => (\r\n item === \"ID\" ? # : {item}\r\n )) : null;\r\n\r\n const inttablerows = !utils.isNull(this.state.formObject) ? this.state.formObject.DGEvaluationInterventionDto.DGEvaluationInterventionData.map((item, index) => (\r\n \r\n {Object.keys(item).map((innerItem, indexObject) => (\r\n indexObject === 0 ? \r\n {indexObject + 1}\r\n :\r\n innerItem === \"QualificationEvaluationStatusID\" ?\r\n \r\n this.handleChecklistArrayQV(values, index)} >\r\n \r\n {this.state.lookupQEArray.map((lookupitem, index) => (\r\n \r\n ))}\r\n \r\n :\r\n innerItem === \"QualificationEvaluationComments\" ?\r\n \r\n \r\n :\r\n innerItem == \"NumberRecommendedForApproval\" ?\r\n \r\n this.handleChecklistArrayQN(values, index)}> \r\n \r\n : {item[innerItem]}\r\n ))}\r\n \r\n ))\r\n :\r\n null;\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n {inttableheader}\r\n \r\n \r\n \r\n {inttablerows}\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Status
\r\n | \r\n \r\n this.handleStatus(values)}>\r\n \r\n {!utils.isNull(this.state.lookupEArray) ? this.state.lookupEArray.map((lookupVitem, index) => (\r\n\r\n \r\n\r\n )) : null}\r\n \r\n | \r\n \r\n \r\n \r\n Comments
\r\n | \r\n \r\n \r\n | \r\n \r\n \r\n \r\n Evaluator
\r\n | \r\n \r\n\r\n \r\n | \r\n \r\n \r\n \r\n Evaluation Date
\r\n | \r\n \r\n\r\n \r\n | \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n\r\n this.postLinkHandler(isCancelled, linked)}\r\n dialogTitle={this.state.linkDialogTitle}\r\n linkName={this.state.linkDialogName} linkHandler={(selection) => this.SaveEvaluation(selection)}\r\n selectionId={this.state.id}\r\n buttonName=\"Save\"\r\n >\r\n \r\n \r\n\r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withStyles(useStyles())(withMenuPermission(DGEvaluationMain)));","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { EntityForm } from '../../widgets/Forms';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n MuiSelectSelectMenu: {\r\n '& .MuiSelect-selectMenu': { paddingRight: \"150px !important\" }\r\n }\r\n}));\r\n\r\nexport default function DGApprovalSearchForm(props) {\r\n const [labelWidth, setLabelWidth, tabValue] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { withRouter } from \"react-router-dom\";\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport SearchView from \"../../widgets/SearchView\";\r\nimport ViewUtils from \"../../ViewUtils\";\r\nimport { ViewContainer } from \"../../View.jsx\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nimport DGApprovalSearchForm from \"./DGApprovalSearchForm\";\r\n\r\n\r\n\r\nconst utils = new ViewUtils();\r\nconst toolbarRef = React.createRef();\r\nclass DGApprovalSearch extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n \r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: \"close\",label: \"Close\", tooltip: \"Close\", icon: \"CloseIcon\"},\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [ \r\n { id: \"view\", label: \"\", tooltip: \"View\", icon: \"ViewIcon\", disabled: true },\r\n \r\n ],\r\n },\r\n ],\r\n };\r\n\r\n this.headCells = [\r\n {id: \"SubmissionNumber\", numeric: false, disablePadding: true, label: \"Submission Number\"},\r\n {id: \"DGIntervention\",numeric: false,disablePadding: true,label: \"DG Intervention\"},\r\n {id: \"DGApplicationStatus\",numeric: false,disablePadding: true,label: \"DG Application Status\"},\r\n {id: \"DGNumber\",numeric: false,disablePadding: true,label: \"DG Number\"},\r\n {id: \"ApprovedNotApprovedBy\",numeric: false,disablePadding: true,label: \"Approved Not Approved By\"},\r\n {id: \"ApprovedNotApprovedDate\",numeric: false,disablePadding: true,label: \"Approved No Approved Date\"}, \r\n ];\r\n\r\n let model = {\r\n OrganisationID: this.props.location.state.organisationID,\r\n FinancialYearID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.FinancialYearID)) ? this.props.location.state.FinancialYearID : \"\"\r\n };\r\n\r\n this.searchParameters = [\r\n { Name: \"OrganisationID\", Value: this.props.location.state.organisationID },\r\n { Name: \"FinancialYearID\", Value: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.FinancialYearID)) ? this.props.location.state.FinancialYearID : \"\" } \r\n ];\r\n\r\n this.state = {\r\n model: model,\r\n keyUpSwitch: false,\r\n selectedDG: null,\r\n OrganisationID: this.props.location.state.organisationID,\r\n FinancialYearID : null\r\n };\r\n }\r\n handleSelection = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ selectedDG: selection[0].Id });\r\n } else {\r\n this.setState({ selectedDG: null });\r\n }\r\n toolbarRef.current.setButtonDisabled(\"view\", false);\r\n\r\n }\r\n \r\n handleFormValueChange = (values) => {\r\n let newValues = null;\r\n if (!utils.isNull(values)) {\r\n newValues = { ...values };\r\n }\r\n if (!utils.isNull(newValues)) {\r\n if (JSON.stringify(this.state.model) !== JSON.stringify(newValues)) {\r\n this.setState({\r\n model: newValues,\r\n clearGrid: true,\r\n selectedDG: null,\r\n Message: \"\",\r\n FinancialYearID: values.FinancialYearID.Id\r\n });\r\n }\r\n }\r\n}\r\n\r\n\r\n handleToolbarButtonClick = (buttonId) => {\r\n if (\"view\" === buttonId) {\r\n this.props.history.push({\r\n pathname: \"/DGApprovalMain\",\r\n state: {\r\n OrganisationID: this.state.OrganisationID,\r\n DGApplicationID: this.state.selectedDG,\r\n FinancialYearID : this.state.model.FinancialYearID\r\n },\r\n });\r\n }\r\n else if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/DGOrganisation',\r\n state: { selection: this.props.location.state.organisationID }\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"DG Approval \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n\r\n
\r\n { this.handleSelection(selection) }}\r\n toolbarRef={toolbarRef}\r\n >\r\n { this.onkeyup(e) }}\r\n valueChangeHandler={this.handleFormValueChange}\r\n dependency={this.state.dependency}\r\n />\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(connect()(DGApprovalSearch));\r\n","import React, { Component, Fragment } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport { ViewContainer } from \"../../View.jsx\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport Button from '@material-ui/core/Button';\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport './Style.css'\r\nimport TextField from '@material-ui/core/TextField';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'Back to DG Approval Dashboard', tooltip: '' }\r\n ]\r\n }\r\n ]\r\n};\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#01579B',\r\n color: theme.palette.common.white,\r\n border: '1px solid white',\r\n },\r\n body: {\r\n fontSize: 11,\r\n },\r\n}))(TableCell);\r\n\r\nconst StyledTableTextCell = withStyles((theme) => ({\r\n body: {\r\n fontSize: 14,\r\n fontWeight: 500\r\n },\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n height: theme.palette.action.main\r\n },\r\n },\r\n}))(TableRow);\r\n\r\nconst headCells = [\r\n { id: 'Occupation', numeric: false, disablePadding: true, label: 'Occupation', widthRatio: .154 },\r\n { id: 'AfricanMale', numeric: false, disablePadding: true, label: 'African Male', widthRatio: .047 },\r\n { id: 'AfricanFemale', numeric: false, disablePadding: true, label: 'African Female', widthRatio: .047 },\r\n { id: 'AfricanDisabled', numeric: false, disablePadding: true, label: 'African Disabled', widthRatio: .047 },\r\n { id: 'ColouredMale', numeric: false, disablePadding: true, label: 'Coloured Male', widthRatio: .047 },\r\n { id: 'ColouredFemale', numeric: false, disablePadding: true, label: 'Coloured Female', widthRatio: .047 },\r\n { id: 'ColouredDisabled', numeric: false, disablePadding: true, label: 'Coloured Disabled', widthRatio: .047 },\r\n { id: 'IndianMale', numeric: false, disablePadding: true, label: 'Indian Male', widthRatio: .047 },\r\n { id: 'IndianFemale', numeric: false, disablePadding: true, label: 'Indian Female', widthRatio: .047 },\r\n { id: 'IndianDisabled', numeric: false, disablePadding: true, label: 'Indian Disabled', widthRatio: .047 },\r\n { id: 'WhiteMale', numeric: false, disablePadding: true, label: 'White Male', widthRatio: .047 },\r\n { id: 'WhiteFemale', numeric: false, disablePadding: true, label: 'White Female', widthRatio: .047 },\r\n { id: 'WhiteDisabled', numeric: false, disablePadding: true, label: 'White Disabled', widthRatio: .047 },\r\n { id: 'Age1', numeric: false, disablePadding: true, label: 'Age < 35', widthRatio: .047 },\r\n { id: 'Age2', numeric: false, disablePadding: true, label: 'Age 35 - 55', widthRatio: .047 },\r\n { id: 'Age3', numeric: false, disablePadding: true, label: 'Age > 55', widthRatio: .047 },\r\n { id: 'TotalMale', numeric: false, disablePadding: true, label: 'Total Male', widthRatio: .047 },\r\n { id: 'TotalFemale', numeric: false, disablePadding: true, label: 'Total Female', widthRatio: .047 },\r\n { id: 'TotalDisabled', numeric: false, disablePadding: true, label: 'Total Disabled', widthRatio: .047 }\r\n];\r\n\r\nconst useStyles = theme => ({\r\n appBar: {\r\n position: 'relative',\r\n },\r\n title: {\r\n flex: 1,\r\n color: 'white',\r\n },\r\n table: {\r\n minWidth: 700,\r\n },\r\n});\r\n\r\nclass DGApprovalMain extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n objectProps: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.object)) ? this.props.location.state.object : null,\r\n formObject: null,\r\n lookupADArray: null,\r\n lookupArray: null,\r\n FinancialYear: '',\r\n OrganisationName: '',\r\n Status: '',\r\n model: {\r\n Name: \"\",\r\n },\r\n title: \"\",\r\n id: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.DGApplicationID)) ? this.props.location.state.DGApplicationID : null,\r\n OrganisationID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.OrganisationID)) ? this.props.location.state.OrganisationID : null,\r\n FinancialYearID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.FinancialYearID)) ? this.props.location.state.FinancialYearID : null,\r\n FundingWindowID: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.FundingWindowID)) ? this.props.location.state.FundingWindowID : null,\r\n ApprovalPermission: \"\",\r\n searchParameters: [{ Name: \"DGApplicationID\", Value: this.props.location.state.DGApplicationID }, { Name: \"OrganisationID\", Value: this.props.location.state.OrganisationID }, { Name: \"FinancialYearID\", Value: this.props.location.state.FinancialYearID }],\r\n OpenDialog: false,\r\n formViewURL: \"\",\r\n formName: \"\",\r\n linkDialogOpen: false,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.getHeaders(this.state.id)\r\n this.getApproval(this.state.id)\r\n this.getApprovalStatusList(this.state.id)\r\n this.getlookup(this.state.id)\r\n this.CheckApprovalPermissions(this.state.id);\r\n }\r\n\r\n getHeaders = (id) => {\r\n let url = \"api/sims/dgapproval/getfindheader?DGApplicationID=\" + id;\r\n\r\n utils.invokeUrl(\r\n url,\r\n (response) => {\r\n this.setState({\r\n FinancialYear: response.FinancialYear,\r\n OrganisationName: response.OrganisationName,\r\n SDLNumber: response.SDLNumber\r\n })\r\n },\r\n null,\r\n {\r\n method: \"GET\",\r\n headers: {\r\n Accept: \"application/json\",\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Bearer \" + localStorage.getItem(\"token\"),\r\n },\r\n }\r\n );\r\n };\r\n\r\n getApproval(id) {\r\n let url = `api/sims/dgapproval/GetDGApproval?request={\"searchParameters\":[{\"Name\":\"DGApplicationID\",\"Value\":${this.state.id}}]}`;\r\n utils.invokeUrl(url, (response) => {\r\n this.setState({\r\n formObject: response\r\n })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n\r\n getApprovalStatusList(id) {\r\n let url = `api/sims/dgapproval/GetDGApprovalStatusList?request={\"searchParameters\":[{\"Name\":\"DGApplicationID\",\"Value\":${this.state.id}}]}`;\r\n utils.invokeUrl(url, (response) => {\r\n this.setState({\r\n ApprovalStatusListObject: response\r\n })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n\r\n getlookup(id) {\r\n let url = \"api/sims/dgapproval/GetLookupListDGApprovalDetailStatus\";\r\n utils.invokeUrl(url, (response) => {\r\n this.setState({ lookupADArray: response })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n\r\n let urlV = \"api/sims/dgapproval/GetLookupListDGApprovalStatus\";\r\n utils.invokeUrl(urlV, (response) => {\r\n this.setState({ lookupVArray: response })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n\r\n CheckApprovalPermissions(id) {\r\n let url = \"api/sims/DGApproval/GetDGApprovalPermissionCheck?DGApplicationID=\" + this.state.id;\r\n utils.invokeUrl(url, (response) => {\r\n this.setState({\r\n ApprovalPermission: response.Result\r\n })\r\n },\r\n null,\r\n {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n }\r\n }\r\n )\r\n }\r\n\r\n\r\n\r\n\r\n handleChecklistArrayAD = (event, index) => {\r\n const values = [...this.state.formObject.DGApprovalInterventionDto.DGApprovalInterventionData];\r\n const indexObject = { ...values[index] };\r\n indexObject.DGApprovalDetailStatusID = event.target.value;\r\n values[index] = indexObject;\r\n const newDGApprovalInterventionDto = { ...this.state.formObject.DGApprovalInterventionDto };\r\n newDGApprovalInterventionDto.DGApprovalInterventionData = values;\r\n const finalObject = { ...this.state.formObject, DGApprovalInterventionDto: newDGApprovalInterventionDto }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleChecklistArrayNLA = (event, index) => {\r\n const values = [...this.state.formObject.DGApprovalInterventionDto.DGApprovalInterventionData];\r\n const indexObject = { ...values[index] };\r\n indexObject.NoOfLearnersApproved = event.target.value;\r\n values[index] = indexObject;\r\n const newDGApprovalInterventionDto = { ...this.state.formObject.DGApprovalInterventionDto };\r\n newDGApprovalInterventionDto.DGApprovalInterventionData = values;\r\n const finalObject = { ...this.state.formObject, DGApprovalInterventionDto: newDGApprovalInterventionDto }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n handleStatus = (event) => {\r\n const finalObject = { ...this.state.formObject, DGStatusID: { Id: event.target.value } }\r\n this.setState({ formObject: finalObject });\r\n }\r\n\r\n SaveApproval = () => {\r\n let url = \"api/sims/dgapproval/UpdateDGApproval\";\r\n utils.invokeUrl(url, (response) => {\r\n this.successCallback(response);\r\n },\r\n (response) => {\r\n this.error(response);\r\n },\r\n {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(this.state.formObject)\r\n }\r\n )\r\n }\r\n\r\n ReverseDGApproval = () => {\r\n let url = \"api/sims/dgapproval/ReverseDGApproval\";\r\n utils.invokeUrl(url, (response) => {\r\n this.successCallback(response);\r\n },\r\n (response) => {\r\n this.error(response);\r\n },\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(({\r\n \"DGApplicationID\": this.state.id\r\n }))\r\n }\r\n )\r\n }\r\n\r\n EmailDGLetter = () => {\r\n let url = \"api/sims/dgapproval/EmailDGLetter\";\r\n utils.invokeUrl(url, (response) => {\r\n this.successCallback(response);\r\n },\r\n (response) => {\r\n this.error(response);\r\n },\r\n {\r\n method: 'PUT',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': \"Bearer \" + localStorage.getItem(\"token\")\r\n },\r\n body: JSON.stringify(({\r\n \"DGApplicationID\": this.state.id\r\n }))\r\n }\r\n )\r\n }\r\n\r\n successCallback(response) {\r\n\r\n if (response.MessageType === \"WARNING\") {\r\n let errResult = JSON.parse(response.Message);\r\n let message = \"\";\r\n errResult.map((item, index) => (\r\n message += item.Item1 + ' : ' + item.Item2 + '\\n'\r\n ))\r\n this.setState({ message: message, messageStyle: response.MessageType });\r\n }\r\n else {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n this.getApproval(this.state.id);\r\n this.getApprovalStatusList(this.state.id)\r\n }\r\n }\r\n error(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n\r\n close() {\r\n this.props.history.push({\r\n pathname: '/DGApprovalSearch',\r\n state: {\r\n organisationID: this.state.OrganisationID,\r\n DGApplicationID: this.state.id,\r\n FinancialYearID: this.state.FinancialYearID,\r\n organisationName: this.state.OrganisationName,\r\n sdlnumber: this.state.SDLNumber\r\n },\r\n });\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.close();\r\n }\r\n }\r\n\r\n buttonSubmitClickHandler() {\r\n this.submit();\r\n }\r\n\r\n DownloadDGApprovalLetter = () => {\r\n let url = \"api/sims/dgapproval/DownloadDGApprovalLetter?DGApplicationID=\" + this.state.id;\r\n utils.invokeUrl(url, (response) => {\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n }, (e) => {\r\n this.setState({ messsageAlert: utils.SYSTEM_ERROR_MESSAGE, messageStyle: \"outlinedError\" });\r\n }\r\n );\r\n };\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n render() {\r\n\r\n const { classes } = this.props;\r\n\r\n const inttableheader = !utils.isNull(this.state.formObject) ? this.state.formObject.DGApprovalInterventionDto.FriendlyColumnNames.map((item, index) => (\r\n item === \"ID\" ? # : {item}\r\n )) : null;\r\n\r\n const inttablerows = !utils.isNull(this.state.formObject) ? this.state.formObject.DGApprovalInterventionDto.DGApprovalInterventionData.map((item, index) => (\r\n \r\n {Object.keys(item).map((innerItem, indexObject) => (\r\n indexObject === 0 ? \r\n {indexObject + 1}\r\n :\r\n innerItem === \"DGApprovalDetailStatusID\" ?\r\n \r\n this.handleChecklistArrayAD(values, index)} >\r\n \r\n {this.state.lookupADArray.map((lookupitem, index) => (\r\n \r\n ))}\r\n \r\n :\r\n innerItem === \"NoOfLearnersApproved\" ?\r\n \r\n this.handleChecklistArrayNLA(values, index)}> \r\n :\r\n {item[innerItem]}\r\n ))}\r\n \r\n ))\r\n :\r\n null;\r\n\r\n const statuslistrows = !utils.isNull(this.state.ApprovalStatusListObject) && this.state.ApprovalStatusListObject.TotalNumberOfRows !== 0 ? this.state.ApprovalStatusListObject.Data.map((item, index) => (\r\n\r\n \r\n {item.Approver}\r\n {item.ApprovalDate}\r\n {item.DGStatus}\r\n \r\n ))\r\n :\r\n null;\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n {inttableheader}\r\n \r\n \r\n \r\n {inttablerows}\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Status
\r\n | \r\n \r\n this.handleStatus(values)}>\r\n \r\n {!utils.isNull(this.state.lookupVArray) ? this.state.lookupVArray.map((lookupVitem, index) => (\r\n\r\n \r\n\r\n )) : null}\r\n \r\n | \r\n \r\n \r\n \r\n Approved/Not Approved By
\r\n | \r\n \r\n\r\n \r\n | \r\n \r\n \r\n \r\n Approved/Not Approved Date
\r\n | \r\n \r\n\r\n \r\n | \r\n \r\n \r\n
\r\n \r\n {!utils.isNull(this.state.ApprovalStatusListObject) && this.state.ApprovalStatusListObject.TotalNumberOfRows !== 0 ?\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n Updated By\r\n Date Updated\r\n DG Status\r\n \r\n \r\n \r\n {statuslistrows}\r\n \r\n
\r\n \r\n : null}\r\n
\r\n \r\n \r\n \r\n {!utils.isNull(this.state.formObject) && this.state.formObject.ShowLetterButton === 1 ?\r\n \r\n \r\n \r\n : null\r\n }\r\n \r\n \r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withStyles(useStyles())(withMenuPermission(DGApprovalMain)));","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"./Style.css\";\r\nimport ViewUtils from '../../ViewUtils';\r\nimport {ViewContainer} from \"../../View\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\n\r\nconst userRef = React.createRef();\r\nconst toolbarRef = React.createRef();\r\nconst utils = new ViewUtils();\r\n\r\nconst headCells = [\r\n { id: 'LegalName', numeric: false, disablePadding: true, label: 'Legal Name' },\r\n { id: 'TradeName', numeric: false, disablePadding: true, label: 'Trade Name' },\r\n { id: 'SDLNumber', numeric: false, disablePadding: true, label: 'SDL Number' },\r\n { id: 'FinancialYear', numeric: false, disablePadding: true, label: 'Financial Year' }\r\n];\r\n\r\nclass DGContracts extends Component {\r\n\r\n constructor(props){\r\n super(props)\r\n this.state={\r\n OrganisationID: this.props.location.state.organisationID,\r\n FinancialYearID: null,\r\n showMessage: true,\r\n message: '',\r\n messageStyle: 'SUCCESS',\r\n searchParameters: [{ Name: \"OrganisationID\", Value: this.props.location.state.organisationID }]\r\n }\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'Close', tooltip: 'Close', icon: 'CloseIcon'},\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [ \r\n { id: 'downloadContract', label: 'Download Contract', tooltip: 'Download Contract', icon: 'DownloadIcon', disabled: utils.isNull(this.state.FinancialYearID)},\r\n { id: 'emailContract', label: 'Email Contract', tooltip: 'Email Contract', icon: 'EmailIcon', disabled: utils.isNull(this.state.FinancialYearID) }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n }\r\n handleFormValueChange(values) {\r\n }\r\n handleSelectionChange = (selection) => {\r\n if (selection !== null && selection.length !== 0) {\r\n this.setState({ FinancialYearID: selection[0].FinancialYearID })\r\n } else {\r\n this.setState({ FinancialYearID: null })\r\n }\r\n toolbarRef.current.setButtonDisabled(\"downloadContract\", selection === null || selection.length === 0);\r\n toolbarRef.current.setButtonDisabled(\"emailContract\", selection === null || selection.length === 0);\r\n\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.props.history.push({\r\n pathname: '/DGOrganisation',\r\n state: { selection: this.props.location.state.organisationID }\r\n });\r\n } else if (\"downloadContract\" === buttonId) {\r\n this.downloadContract(); \r\n } else if (\"emailContract\" === buttonId) {\r\n this.emailContract(); \r\n }\r\n }\r\n\r\n emailContract=()=>{\r\n const url = `api/sims/dgcontracts/emaildgcontract`;\r\n utils.invokeApiPut(\r\n JSON.stringify({\r\n \"OrganisationID\" : this.props.location.state.organisationID,\r\n \"FinancialYearID\" : this.state.FinancialYearID\r\n }),\r\n url,\r\n (response) => {\r\n this.successCallback(response);\r\n },\r\n (response) => {\r\n this.error(response);\r\n }\r\n );\r\n }\r\n\r\n downloadContract=()=>{\r\n const url = `api/sims/dgcontracts/viewdgcontract`;\r\n utils.invokeApiPut(\r\n JSON.stringify({\r\n \"OrganisationID\" : this.props.location.state.organisationID,\r\n \"FinancialYearID\" : this.state.FinancialYearID\r\n }),\r\n url,\r\n (response) => {\r\n var blob = new Blob([this.base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n this.setState({\r\n message: response.Message,\r\n messageStyle: response.MessageType,\r\n showMessage: true\r\n }, ()=>{\r\n setTimeout(()=>{this.setState({showMessage: false})},2000)\r\n });\r\n },\r\n (response) => {\r\n this.setState({\r\n message: \"Error downloading DG Contract.\",\r\n messageStyle: \"ERROR\",\r\n showMessage: true\r\n }, ()=>{\r\n setTimeout(()=>{this.setState({showMessage: false})},2000)\r\n });\r\n }\r\n );\r\n }\r\n\r\n successCallback(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n error(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"DG Contracts \" + (this.props.location.state.organisationName !== null ? \"> \" + this.props.location.state.organisationName + (this.props.location.state.sdlnumber !== null ? \" - \" + this.props.location.state.sdlnumber : \"\") : \"> Add\")}\r\n
\r\n \r\n\r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig} />\r\n { this.handleSelectionChange(selection) }}\r\n searchParameters={this.state.searchParameters} paged={true} />\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(connect()(DGContracts)\r\n);\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n },\r\n}));\r\n\r\nexport default function TradeSearchForm(props) {\r\n const [labelWidth, setLabelWidth] = React.useState(0);\r\n const labelRef = React.useRef(null);\r\n const classes = useStyles();\r\n\r\n React.useEffect(() => {\r\n if (labelRef.current !== null) {\r\n setLabelWidth(labelRef.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n | \r\n \r\n \r\n \r\n Trade Name\r\n \r\n props.model.TradeName = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n \r\n \r\n Trade Code\r\n \r\n props.model.TradeCode = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n | \r\n \r\n \r\n \r\n \r\n \r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n \r\n \r\n | \r\n\r\n \r\n \r\n SDL Number\r\n \r\n props.model.SDLNumber = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n\r\n \r\n \r\n Legal Name\r\n \r\n props.model.LegalName = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n \r\n \r\n Trade Name\r\n \r\n props.model.TradeName = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {this.state.showReport ? { this.ReportDownload() }}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n download\r\n style={{ textDecoration: \"underline\" }}\r\n >Download Report : null}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n \r\n \r\n | \r\n \r\n \r\n \r\n SAQAQualificationTitle\r\n \r\n props.model.SAQAQualificationTitle = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n \r\n \r\n SAQA Code\r\n \r\n props.model.SAQAQualificationID = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n | \r\n\r\n \r\n \r\n Provider Code\r\n \r\n props.model.ProviderCode = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n\r\n \r\n \r\n Institution Name\r\n \r\n props.model.InstitutionName = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {this.state.showReport ? { this.ReportDownload() }}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n download\r\n style={{ textDecoration: \"underline\" }}\r\n >Download Report : null}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n | \r\n \r\n \r\n \r\n \r\n \r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {this.state.showReport ? { this.ReportDownload() }}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n download\r\n style={{ textDecoration: \"underline\" }}\r\n >Download Report : null}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {this.state.showReport ? { this.ReportDownload() }}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n download\r\n style={{ textDecoration: \"underline\" }}\r\n >Download Report : null}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n \r\n \r\n | \r\n \r\n \r\n \r\n Learnership Code\r\n \r\n props.model.LearnershipCode = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n \r\n \r\n Learnership Title\r\n \r\n props.model.LearnershipTitle = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n | \r\n \r\n \r\n \r\n \r\n \r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {this.state.showReport ? { this.ReportDownload() }}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n download\r\n style={{ textDecoration: \"underline\" }}\r\n >Download Report : null}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n \r\n \r\n | \r\n \r\n \r\n \r\n Skills Programme Code\r\n \r\n props.model.SkillsProgrammeCode = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n \r\n \r\n Skills Programme Title\r\n \r\n props.model.SkillsProgrammeTitle = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n | \r\n \r\n \r\n \r\n \r\n \r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n
\r\n \r\n \r\n | \r\n \r\n \r\n OFO Code\r\n\t\t\t\t\t\t\t\t\r\n props.model.OFOCode = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n \r\n \r\n \r\n OFODescription\r\n\t\t\t\t\t\t\t\t\r\n props.model.OFODescription = ev.target.value}\r\n labelWidth={labelWidth}\r\n />\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n | \r\n {CaptureFormAdd}\r\n {CaptureFormEdit}\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {this.state.showReport ? { this.ReportDownload() }}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n download\r\n style={{ textDecoration: \"underline\" }}\r\n >Download Report : null}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n { this.handleSelectionChange(selection) }}\r\n onDataArrive={(results) => { this.onDataArrive(results) }}\r\n makeRowBold={true}\r\n searchParameters={this.state.searchParameters} paged={true} clearSelectedRow={this.state.clearSelectedRow} onClearSelectedRow={this.onClearSelectedRow} />\r\n
\r\n
\r\n {\"Helpdesk > Requests\"}\r\n
\r\n { this.handleSelection(selection) }}\r\n >\r\n { this.onkeyup(e) }} ref={formRef} id={typeof this.props.location.state !== 'undefined' ? this.props.location.state.selection : null}\r\n valueChangeHandler={(values) => this.handleFormValueChange(values)}\r\n />\r\n \r\n\r\n this.postAddHandler(cancel, save)}\r\n >\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withMenuPermission(HelpdeskRequestSearch));\r\n","import React from 'react';\r\nimport \"./../../View.css\";\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"../Helpdesk.css\";\r\nimport EnhancedTable from '../../widgets/ResponsiveTable';\r\n\r\nexport default function HelpdeskComments(props, ref) {\r\n\r\n const headCells = \r\n [\r\n { id: 'Comment', numeric: false, disablePadding: true, label: 'Comment' },\r\n { id: 'CreatedBy', numeric: false, disablePadding: true, label: 'Created By' },\r\n { id: 'DateCreated', numeric: false, disablePadding: true, label: 'Date Created' },\r\n { id: 'DocumentName', numeric: false, disablePadding: true, label: 'Document Name', contentType: 'document' }\r\n ]\r\n return (\r\n { props.handleCell(rowid, columnid) }} searchParameters={[{ Name: \"ID\", Value: props.selection }]} paged={true}\r\n dataUrl={props.DataUrl} \r\n />\r\n );\r\n}\r\n","import React from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabPanel from '../../widgets/TabPanel';\r\nimport { SelectItem } from '../../widgets/SelectItem';\r\nimport { CustomTextField } from '../../widgets/CustomTextField';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport { EntityForm } from '../../widgets/Forms';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport DocumentUpload from \"../../widgets/DocumentUpload\";\r\nimport HelpdeskComments from \"./HelpdeskComments\";\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n 'aria-controls': `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nconst utils = new ViewUtils();\r\nexport const HelpdeskRequestForm = React.forwardRef((props, ref) => {\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const [UploadFilename, setUploadFilename] = React.useState(\"\");\r\n const [CommentURL, setCommentURL] = React.useState(null);\r\n\r\n const handleTabChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n if (newValue == 1) {\r\n setCommentURL(\"api/sims/HelpDeskRequest/GetHelpDeskRequestComments\");\r\n }\r\n else {\r\n setCommentURL(null);\r\n }\r\n };\r\n\r\n const styles = makeStyles({\r\n TextArea: {\r\n '& .MuiOutlinedInput-inputMultiline': {\r\n height: \"200px !important\",\r\n width: \"600px !important\"\r\n }\r\n }\r\n })\r\n\r\n const onUploadHandler = (data) => {\r\n if (data) {\r\n setUploadFilename(data.name);\r\n }\r\n };\r\n\r\n const FileDownload = (rowid, headCell,DocumentType) => {\r\n \r\n if(DocumentType === \"Comment\")\r\n {\r\n \r\n if (headCell.contentType === \"document\") {\r\n utils.invokeUrl(\"api/sims/HelpDeskRequest/DownloadHelpDeskCommentDocument?Id=\" + rowid, (response) => {\r\n \r\n var blob = new Blob([base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n \r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n }, (e) => {\r\n this.setState({ messsageAlert: utils.SYSTEM_ERROR_MESSAGE, messageStyle: \"outlinedError\" });\r\n }\r\n );\r\n }\r\n\r\n }\r\n\r\n else\r\n {\r\n utils.invokeUrl(\"api/sims/HelpDeskRequest/DownloadHelpDeskDocument?Id=\" + rowid, (response) => {\r\n \r\n var blob = new Blob([base64ToArrayBuffer(response.Base64)], { type: response.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = response.Name;\r\n link.target = '_blank';\r\n link.click();\r\n }, (e) => {\r\n this.setState({ messsageAlert: utils.SYSTEM_ERROR_MESSAGE, messageStyle: \"outlinedError\" });\r\n }\r\n );\r\n }\r\n };\r\n\r\n const base64ToArrayBuffer = (base64) => {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n return (\r\n \r\n {form =>\r\n \r\n }\r\n \r\n );\r\n})\r\n\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport \"../Helpdesk.css\";\r\nimport { HelpdeskRequestForm } from './HelpdeskRequestForm';\r\nimport ViewUtils from '../../ViewUtils';\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\nimport { ViewContainer } from \"../../View\";\r\nimport withMenuPermission from \"../../widgets/withMenuPermission\";\r\nconst utils = new ViewUtils();\r\n\r\n\r\nconst userRef = React.createRef();\r\nconst toolbarRef = React.createRef();\r\n\r\nclass HelpdeskRequest extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n title: \"\",\r\n id: (!utils.isNull(this.props.location.state) && !utils.isNull(this.props.location.state.selection)) ? this.props.location.state.selection : null,\r\n\r\n };\r\n\r\n this.toolbarConfig = {\r\n items: [\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'close', label: 'CLOSE', tooltip: 'Close', icon: 'CloseIcon' }\r\n ]\r\n },\r\n {\r\n type: \"devider\"\r\n },\r\n {\r\n type: \"buttonGroup\",\r\n buttons: [\r\n { id: 'save', label: 'SAVE', tooltip: 'Save', icon: 'SaveIcon' }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n }\r\n\r\n handleToolbarButtonClick(buttonId) {\r\n if (\"close\" === buttonId) {\r\n this.close()\r\n } else if (\"save\" === buttonId) {\r\n this.save()\r\n }\r\n }\r\n\r\n handleFormValueChange = (values) => {\r\n if (!utils.isNull(values)) {\r\n this.setState({\r\n Name: values.Name\r\n });\r\n }\r\n }\r\n\r\n\r\n save() {\r\n let formValue = userRef.current.getValue();\r\n\r\n if (formValue !== null && typeof formValue !== 'undefined') {\r\n const url = `api/sims/HelpDeskRequest/UpdateHelpdeskRequest`;\r\n utils.updateForm(this, userRef, url, (response) => {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }, this.error);\r\n }\r\n }\r\n\r\n successCallback(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n error(response) {\r\n this.setState({ message: response.Message, messageStyle: response.MessageType });\r\n }\r\n close() {\r\n this.props.history.push('/HelpdeskRequestSearch');\r\n }\r\n\r\n dataArrivedHandler = (values) => {\r\n if (!utils.isNull(values[\"StatusID\"])) {\r\n if(values.StatusID.Description === \"Complete\")\r\n {\r\n toolbarRef.current.setButtonDisabled(\"save\", true);\r\n }\r\n else\r\n {\r\n toolbarRef.current.setButtonDisabled(\"save\", false);\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {\"Helpdesk > Requests > Detail\"}\r\n
\r\n\r\n \r\n\r\n\r\n \r\n this.handleToolbarButtonClick(buttonId)}\r\n ref={toolbarRef}\r\n config={this.toolbarConfig} />\r\n\r\n this.handleFormValueChange(values)}\r\n id={this.state.id}\r\n editPermission={this.props.menuPermissionItem.Edit}\r\n dataArrivedHandler={(values) => this.dataArrivedHandler(values)}\r\n />\r\n
\r\n \r\n );\r\n }\r\n}\r\nexport default withRouter(withMenuPermission(HelpdeskRequest));\r\n// export default withRouter(HelpdeskRequest);\r\n","import React, { Component } from \"react\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport EnhancedToolbar from '../../widgets/Toolbar';\r\nimport \"./../../Grid.css\";\r\nimport \"./../../Form.css\";\r\nimport \"./../../App.css\";\r\nimport ViewUtils from \"./../../ViewUtils\";\r\nimport { ViewContainer } from \"./../../View.jsx\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport AlertItem from \"../../widgets/AlertItem\";\r\n\r\n\r\nconst utils = new ViewUtils();\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\n\r\n\r\nclass HelpDeskReport extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null }]\r\n }\r\n }\r\n\r\n\r\n\r\n handleExecuteReport = () => {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/HelpDeskReports/GetHelpDeskReportExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data; \r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n }\r\n\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n\r\n render() {\r\n\r\n return (\r\n \r\n \r\n Help Desk Report\r\n
\r\n \r\n \r\n \r\n \r\n | \r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(HelpDeskReport);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n\r\n \r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass TrainingProviderListPerAccreditationStatusLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetTrainingProviderListPerAccreditationStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Accreditation Status: {point.y:.1f} TotalAccreditations'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetTrainingProviderListPerAccreditationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n //plotOptions:\r\n //{\r\n // series:\r\n // {\r\n\r\n // connectNulls: false,\r\n // marker:\r\n // {\r\n // enabled: true,\r\n // value: 'x'\r\n // }\r\n // }\r\n //},\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetTrainingProviderListPerAccreditationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Training Provider List Per Accreditation Status Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(TrainingProviderListPerAccreditationStatusLineChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n\r\n \r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass TrainingProviderListPerAccreditationStatusBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetTrainingProviderListPerAccreditationStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Accreditation Status: {point.y:.1f} TotalAccreditations'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetTrainingProviderListPerAccreditationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n //plotOptions: {\r\n // colum: {\r\n // labels: {\r\n // rotation: -45,\r\n // style: {\r\n // fontSize: '13px',\r\n // fontFamily: 'Verdana, sans-serif'\r\n // }\r\n // }\r\n // }\r\n //},\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetTrainingProviderListPerAccreditationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Training Provider List Per Accreditation Status Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(TrainingProviderListPerAccreditationStatusBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass TrainingProviderListPerAccreditationStatusPieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n let url = `api/sims/QALPDashboard/GetTrainingProviderListPerAccreditationStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Accreditation Status\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Accreditation Status: {point.y:.1f} TotalAccreditations'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetTrainingProviderListPerAccreditationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n //plotOptions:\r\n //{\r\n // series:\r\n // {\r\n // connectNulls: false,\r\n // marker:\r\n // {\r\n // enabled: true,\r\n // value: 'x'\r\n // }\r\n // }\r\n //},\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetTrainingProviderListPerAccreditationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Training Provider List Per Accreditation Status Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(TrainingProviderListPerAccreditationStatusPieChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass TrainingProviderListPerRegionBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetTrainingProviderListPerRegionSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Region: {point.y:.1f} TotalRegions'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetTrainingProviderListPerRegionExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n //plotOptions: {\r\n // colum: {\r\n // labels: {\r\n // rotation: -45,\r\n // style: {\r\n // fontSize: '13px',\r\n // fontFamily: 'Verdana, sans-serif'\r\n // }\r\n // }\r\n // }\r\n //},\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetTrainingProviderListPerRegionExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Training Provider List Per Region Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(TrainingProviderListPerRegionBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass TrainingProviderListPerRegionLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetTrainingProviderListPerRegionSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Region: {point.y:.1f} TotalRegions'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetTrainingProviderListPerRegionExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n //plotOptions:\r\n //{\r\n // series:\r\n // {\r\n\r\n // connectNulls: false,\r\n // marker:\r\n // {\r\n // enabled: true,\r\n // value: 'x'\r\n // }\r\n // }\r\n //},\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetTrainingProviderListPerRegionExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Training Provider List Per Region Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(TrainingProviderListPerRegionLineChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\", \r\n color: \"white\"\r\n },\r\n}\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass TrainingProviderListPerRegionPieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetTrainingProviderListPerRegionSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Region\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Region: {point.y:.1f} TotalRegions'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetTrainingProviderListPerRegionExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n //plotOptions:\r\n //{\r\n // series:\r\n // {\r\n // connectNulls: false,\r\n // marker:\r\n // {\r\n // enabled: true,\r\n // value: 'x'\r\n // }\r\n // }\r\n //},\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetTrainingProviderListPerRegionExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Training Provider List Per Region Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(TrainingProviderListPerRegionPieChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass TrainingProviderListPerProviderClassPieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetTrainingProviderListPerProviderClassSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Provider Class\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Provider Class: {point.y:.1f} TotalClasses'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetTrainingProviderListPerProviderClassExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetTrainingProviderListPerProviderClassExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Training Provider List Per Provider Class Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(TrainingProviderListPerProviderClassPieChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n \r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass TrainingProviderListPerProviderClassBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetTrainingProviderListPerProviderClassSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Provider Class: {point.y:.1f} TotalClasses'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetTrainingProviderListPerProviderClassExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetTrainingProviderListPerProviderClassExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Training Provider List Per Provider Class Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(TrainingProviderListPerProviderClassBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass TrainingProviderListPerProviderClassLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetTrainingProviderListPerProviderClassSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Provider Class: {point.y:.1f} TotalClasses'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetTrainingProviderListPerProviderClassExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetTrainingProviderListPerProviderClassExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Training Provider List Per Provider Class Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(TrainingProviderListPerProviderClassLineChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass AssessorPerRegionBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetAssessorPerRegionSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Assessor Per Region: {point.y:.1f} TotalAssessors'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetAssessorPerRegionExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n //plotOptions: {\r\n // colum: {\r\n // labels: {\r\n // rotation: -45,\r\n // style: {\r\n // fontSize: '13px',\r\n // fontFamily: 'Verdana, sans-serif'\r\n // }\r\n // }\r\n // }\r\n //},\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetAssessorPerRegionExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Assessor Per Region Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(AssessorPerRegionBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass AssessorPerRegionLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetAssessorPerRegionSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Assessor Region: {point.y:.1f} TotalAssessors'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetAssessorPerRegionExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n //plotOptions:\r\n //{\r\n // series:\r\n // {\r\n\r\n // connectNulls: false,\r\n // marker:\r\n // {\r\n // enabled: true,\r\n // value: 'x'\r\n // }\r\n // }\r\n //},\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetAssessorPerRegionExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Assessor Per Region Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(AssessorPerRegionLineChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n \r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass AssessorPerRegionPieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetAssessorPerRegionSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Assessor Per Region\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Assessor Per Region: {point.y:.1f} TotalAssessors'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetAssessorPerRegionExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n //plotOptions:\r\n //{\r\n // series:\r\n // {\r\n // connectNulls: false,\r\n // marker:\r\n // {\r\n // enabled: true,\r\n // value: 'x'\r\n // }\r\n // }\r\n //},\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetAssessorPerRegionExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Assessor Per Region Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(AssessorPerRegionPieChart); \r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass AssessorPerRegistrationStatusBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetAssessorPerRegistrationStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Assessor Per Registration Status: {point.y:.1f} TotalAssessors'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetAssessorPerRegistrationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n //plotOptions: {\r\n // colum: {\r\n // labels: {\r\n // rotation: -45,\r\n // style: {\r\n // fontSize: '13px',\r\n // fontFamily: 'Verdana, sans-serif'\r\n // }\r\n // }\r\n // }\r\n //},\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetAssessorPerRegistrationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Assessor Per Registration Status Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(AssessorPerRegistrationStatusBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass AssessorPerRegistrationStatusLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetAssessorPerRegistrationStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Assessor Per Registration Status: {point.y:.1f} TotalAssessors'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetAssessorPerRegistrationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n //plotOptions:\r\n //{\r\n // series:\r\n // {\r\n\r\n // connectNulls: false,\r\n // marker:\r\n // {\r\n // enabled: true,\r\n // value: 'x'\r\n // }\r\n // }\r\n //},\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetAssessorPerRegistrationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Assessor Per Registration Status Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(AssessorPerRegistrationStatusLineChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass AssessorPerRegistrationStatusPieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetAssessorPerRegistrationStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Assessor Per Registration Status\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Assessor Per Registration Status: {point.y:.1f} TotalAssessors'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetAssessorPerRegistrationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n //plotOptions:\r\n //{\r\n // series:\r\n // {\r\n // connectNulls: false,\r\n // marker:\r\n // {\r\n // enabled: true,\r\n // value: 'x'\r\n // }\r\n // }\r\n //},\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetAssessorPerRegistrationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Assessor Per Registration Status Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(AssessorPerRegistrationStatusPieChart); \r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass AssessorPerAssessorTypeBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetAssessorPerAssessorTypeSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Assessor Per Type: {point.y:.1f} TotalAssessorType'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetAssessorPerAssessorTypeExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetAssessorPerAssessorTypeExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Assessor Per Type Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(AssessorPerAssessorTypeBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass AssessorPerAssessorTypeLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetAssessorPerAssessorTypeSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Assessor Per Type: {point.y:.1f} TotalAssessorType'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetAssessorPerAssessorTypeExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetAssessorPerAssessorTypeExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Assessor Per Type Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(AssessorPerAssessorTypeLineChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass AssessorPerAssessorTypePieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetAssessorPerAssessorTypeSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Assessor Per Type\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Assessor Per Type: {point.y:.1f} TotalAssessorType'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetAssessorPerAssessorTypeExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n //plotOptions:\r\n //{\r\n // series:\r\n // {\r\n // connectNulls: false,\r\n // marker:\r\n // {\r\n // enabled: true,\r\n // value: 'x'\r\n // }\r\n // }\r\n //},\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetAssessorPerAssessorTypeExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Assessor Per Type Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(AssessorPerAssessorTypePieChart); \r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n },\r\n}\r\n \r\n \r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass ModeratorPerModeratorTypeBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetModeratorPerModeratorTypeSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Moderator Per Type: {point.y:.1f} TotalModeratorTypes'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetModeratorPerModeratorTypeExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetModeratorPerModeratorTypeExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Moderator Per Type Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(ModeratorPerModeratorTypeBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass ModeratorPerModeratorTypeLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetModeratorPerModeratorTypeSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Moderator Per Type: {point.y:.1f} TotalModeratorTypes'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetModeratorPerModeratorTypeExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n //plotOptions:\r\n //{\r\n // series:\r\n // {\r\n\r\n // connectNulls: false,\r\n // marker:\r\n // {\r\n // enabled: true,\r\n // value: 'x'\r\n // }\r\n // }\r\n //},\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetModeratorPerModeratorTypeExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Moderator Per Type Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(ModeratorPerModeratorTypeLineChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n \r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass ModeratorPerModeratorTypePieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetModeratorPerModeratorTypeSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Moderator Per Type\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Moderator Per Type: {point.y:.1f} TotalModeratorTypes'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetModeratorPerModeratorTypeExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetModeratorPerModeratorTypeExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Moderator Per Type Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(ModeratorPerModeratorTypePieChart); \r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n },\r\n}\r\n \r\n \r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass ModeratorPerRegistrationStatusBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetModeratorPerRegistrationStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Moderator Per Registration Status: {point.y:.1f} TotalModerators'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetModeratorPerRegistrationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n //plotOptions: {\r\n // colum: {\r\n // labels: {\r\n // rotation: -45,\r\n // style: {\r\n // fontSize: '13px',\r\n // fontFamily: 'Verdana, sans-serif'\r\n // }\r\n // }\r\n // }\r\n //},\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetModeratorPerRegistrationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Moderator Per Registration Status Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(ModeratorPerRegistrationStatusBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass ModeratorPerRegistrationStatusLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetModeratorPerRegistrationStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Moderator Per Registration Status: {point.y:.1f} TotalModerators'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetModeratorPerRegistrationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n //plotOptions:\r\n //{\r\n // series:\r\n // {\r\n\r\n // connectNulls: false,\r\n // marker:\r\n // {\r\n // enabled: true,\r\n // value: 'x'\r\n // }\r\n // }\r\n //},\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetModeratorPerRegistrationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Moderator Per Registration Status Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(ModeratorPerRegistrationStatusLineChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n \r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass ModeratorPerRegistrationStatusPieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetModeratorPerRegistrationStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Moderator Per Registration Status\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Moderator Per Registration Status: {point.y:.1f} TotalModerators'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetModeratorPerRegistrationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n //plotOptions:\r\n //{\r\n // series:\r\n // {\r\n // connectNulls: false,\r\n // marker:\r\n // {\r\n // enabled: true,\r\n // value: 'x'\r\n // }\r\n // }\r\n //},\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetModeratorPerRegistrationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Moderator Per Registration Status Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(ModeratorPerRegistrationStatusPieChart); \r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass ModeratorPerRegionBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetModeratorPerRegionSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Moderator Per Region: {point.y:.1f} TotalModerators'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetModeratorPerRegionExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n //plotOptions: {\r\n // colum: {\r\n // labels: {\r\n // rotation: -45,\r\n // style: {\r\n // fontSize: '13px',\r\n // fontFamily: 'Verdana, sans-serif'\r\n // }\r\n // }\r\n // }\r\n //},\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetModeratorPerRegionExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Moderator Per Region Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n \r\nexport default withStyles(styles)(ModeratorPerRegionBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass ModeratorPerRegionLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetModeratorPerRegionSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Moderator Per Region: {point.y:.1f} TotalModerators'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetModeratorPerRegionExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n //plotOptions:\r\n //{\r\n // series:\r\n // {\r\n\r\n // connectNulls: false,\r\n // marker:\r\n // {\r\n // enabled: true,\r\n // value: 'x'\r\n // }\r\n // }\r\n //},\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetModeratorPerRegionExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Moderator Per Region Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(ModeratorPerRegionLineChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n \r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass ModeratorPerRegionPieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetModeratorPerRegionSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Moderator Per Region\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Moderator Per Region: {point.y:.1f} TotalModerators'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetModeratorPerRegionExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n //plotOptions:\r\n //{\r\n // series:\r\n // {\r\n // connectNulls: false,\r\n // marker:\r\n // {\r\n // enabled: true,\r\n // value: 'x'\r\n // }\r\n // }\r\n //},\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetModeratorPerRegionExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Moderator Per Region Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(ModeratorPerRegionPieChart); \r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n },\r\n}\r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass LearnerLearnershipsPerMunicipalityBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerLearnershipsPerMunicipalitySearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learnerships Per Municipality: {point.y:.1f} TotalMunicipalities'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerMunicipalityExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerMunicipalityExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Learnerships Per Municipality Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(LearnerLearnershipsPerMunicipalityBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerLearnershipsPerMunicipalityLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerLearnershipsPerMunicipalitySearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Per Municipality: {point.y:.1f} TotalMunicipalities'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerMunicipalityExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerMunicipalityExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Learnerships Per Municipality Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(LearnerLearnershipsPerMunicipalityLineChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n \r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerLearnershipsPerMunicipalityPieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerLearnershipsPerMunicipalitySearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Learner Per Municipality\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Per Municipality: {point.y:.1f} TotalMunicipalities'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerMunicipalityExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerMunicipalityExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Learnerships Per Municipality Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(LearnerLearnershipsPerMunicipalityPieChart); \r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n },\r\n}\r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass LearnerLearnershipsPerSponsorshipBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerLearnershipsPerSponsorshipSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learnerships Per Sponsorship: {point.y:.1f} TotalSponsorships'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerSponsorshipExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerSponsorshipExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Learnerships Per Sponsorship Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(LearnerLearnershipsPerSponsorshipBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n \r\n \r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerLearnershipsPerSponsorshipLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerLearnershipsPerSponsorshipSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Per Sponsorship: {point.y:.1f} TotalSponsorships'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerSponsorshipExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerSponsorshipExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Learnerships Per Sponsorship Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(LearnerLearnershipsPerSponsorshipLineChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerLearnershipsPerSponsorshipPieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerLearnershipsPerSponsorshipSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Learner Per Sponsorship\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Per Sponsorship: {point.y:.1f} TotalSponsorships'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerSponsorshipExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerSponsorshipExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Learnerships Per Sponsorship Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(LearnerLearnershipsPerSponsorshipPieChart); \r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n }, \r\n}\r\n\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass LearnerLearnershipsPerAgreementStatusBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerLearnershipsPerAgreementStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learnerships Per Agreement Status: {point.y:.1f} TotalAgreementStatus'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerAgreementStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerAgreementStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Learnerships Per Agreement Status Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(LearnerLearnershipsPerAgreementStatusBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerLearnershipsPerAgreementStatusLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerLearnershipsPerAgreementStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Per Agreement Status: {point.y:.1f} TotalAgreementStatus'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerAgreementStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n \r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerAgreementStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Learnerships Per Agreement Status Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(LearnerLearnershipsPerAgreementStatusLineChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerLearnershipsPerAgreementStatusPieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerLearnershipsPerAgreementStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Learner Per Agreement Status\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Per Agreement Status: {point.y:.1f} TotalAgreementStatus'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerAgreementStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n \r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerAgreementStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Learnerships Per Agreement Status Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(LearnerLearnershipsPerAgreementStatusPieChart); \r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n },\r\n}\r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass LearnerLearnershipsPerLearnershipTitleBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerLearnershipsPerLearnershipTitleSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learnerships Per Learnership Title: {point.y:.1f} TotalLearnershipTitles'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerLearnershipTitleExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerLearnershipTitleExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Learnerships Per Learnership Title Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(LearnerLearnershipsPerLearnershipTitleBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerLearnershipsPerLearnershipTitleLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerLearnershipsPerLearnershipTitleSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Per Learnership Title: {point.y:.1f} TotalLearnershipTitles'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerLearnershipTitleExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerLearnershipTitleExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Learnerships Per Learnership Title Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(LearnerLearnershipsPerLearnershipTitleLineChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerLearnershipsPerLearnershipTitlePieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerLearnershipsPerLearnershipTitleSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Learner Per Learnership Title\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Per Learnership Title: {point.y:.1f} TotalLearnershipTitles'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerLearnershipTitleExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerLearnershipsPerLearnershipTitleExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Learnerships Per Learnership Title Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(LearnerLearnershipsPerLearnershipTitlePieChart); \r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n },\r\n}\r\n\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass LearnerSkillsProgrammesPerMunicipalityBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerMunicipalitySearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learnerships Skills Per Municipality: {point.y:.1f} TotalMunicipalities'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerMunicipalityExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerMunicipalityExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n \r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Skills Programmes Per Municipality Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(LearnerSkillsProgrammesPerMunicipalityBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerSkillsProgrammesPerMunicipalityLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerMunicipalitySearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Skills Per Municipality: {point.y:.1f} TotalMunicipalities'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerMunicipalityExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerMunicipalityExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Skills Programmes Per Municipality Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(LearnerSkillsProgrammesPerMunicipalityLineChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerSkillsProgrammesPerMunicipalityPieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerMunicipalitySearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Learner Skills Per Municipality\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Skills Per Municipality: {point.y:.1f} TotalMunicipalities'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerMunicipalityExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerMunicipalityExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Skills Programmes Per Municipality Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(LearnerSkillsProgrammesPerMunicipalityPieChart); \r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n },\r\n}\r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass LearnerSkillsProgrammesPerBursaryNameBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerBursaryNameSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learnerships Skills Per Bursary Name: {point.y:.1f} TotalBursaryNames'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerBursaryNameExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerBursaryNameExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Skills Programmes Per Bursary Name Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(LearnerSkillsProgrammesPerBursaryNameBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerSkillsProgrammesPerBursaryNameLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerBursaryNameSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Skills Per Bursary Name: {point.y:.1f} TotalBursaryNames'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerBursaryNameExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerBursaryNameExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Skills Programmes Per Bursary Name Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(LearnerSkillsProgrammesPerBursaryNameLineChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n \r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerSkillsProgrammesPerBursaryNamePieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerBursaryNameSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Learner Skills Per Bursary Name\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Skills Per Bursary Name: {point.y:.1f} TotalBursaryNames'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerBursaryNameExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerBursaryNameExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Skills Programmes Per Bursary Name Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(LearnerSkillsProgrammesPerBursaryNamePieChart); \r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n },\r\n} \r\n\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass LearnerSkillsProgrammesPerSponsorshipBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerSponsorshipSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learnerships Skills Per Sponsorship: {point.y:.1f} TotalSponsorships'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerSponsorshipExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerSponsorshipExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Skills Programmes Per Sponsorship Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(LearnerSkillsProgrammesPerSponsorshipBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerSkillsProgrammesPerSponsorshipLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerSponsorshipSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Skills Per Sponsorship: {point.y:.1f} TotalSponsorships'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerSponsorshipExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerSponsorshipExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Skills Programmes Per Sponsorship Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(LearnerSkillsProgrammesPerSponsorshipLineChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n }, \r\n}\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerSkillsProgrammesPerSponsorshipPieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerSponsorshipSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Learner Skills Per Sponsorship\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Skills Per Sponsorship: {point.y:.1f} TotalSponsorships'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerSponsorshipExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerSponsorshipExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Skills Programmes Per Sponsorship Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(LearnerSkillsProgrammesPerSponsorshipPieChart); \r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n },\r\n}\r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass LearnerSkillsProgrammesPerBursaryStatusBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerBursaryStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learnerships Skills Per Bursary Status: {point.y:.1f} TotalBursaryStatuss'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerBursaryStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerBursaryStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Skills Programmes Per Bursary Status Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(LearnerSkillsProgrammesPerBursaryStatusBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerSkillsProgrammesPerBursaryStatusLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerBursaryStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Skills Per Bursary Status: {point.y:.1f} TotalBursaryStatuss'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerBursaryStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerBursaryStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Skills Programmes Per Bursary Status Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(LearnerSkillsProgrammesPerBursaryStatusLineChart); ","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n \r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerSkillsProgrammesPerBursaryStatusPieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerBursaryStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Learner Skills Per Bursary Status\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Skills Per Bursary Status: {point.y:.1f} TotalBursaryStatuss'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerBursaryStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerSkillsProgrammesPerBursaryStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Skills Programmes Per Bursary Status Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(LearnerSkillsProgrammesPerBursaryStatusPieChart); \r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n },\r\n}\r\n\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass LearnerBursaryPerMunicipalityBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerBursaryPerMunicipalitySearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Bursary Per Municipality: {point.y:.1f} TotalBursaryMunicipalities'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n \r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerMunicipalityExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerMunicipalityExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Bursary Per Municipality Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(LearnerBursaryPerMunicipalityBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n\r\n \r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerBursaryPerMunicipalityLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerBursaryPerMunicipalitySearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Bursary Per Municipality: {point.y:.1f} TotalBursaryMunicipalities'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerMunicipalityExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerMunicipalityExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Bursary Per Municipality Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(LearnerBursaryPerMunicipalityLineChart); ","\r\nimport React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n \r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerBursaryPerMunicipalityPieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerBursaryPerMunicipalitySearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Learner Bursary Per Municipality\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Bursary Per Municipality: {point.y:.1f} TotalBursaryMunicipalities'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerMunicipalityExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerMunicipalityExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Bursary Per Municipality Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(LearnerBursaryPerMunicipalityPieChart); \r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n },\r\n}\r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass LearnerBursaryPerBursaryNameBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerBursaryPerBursaryNameSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Bursary Per Bursary Name: {point.y:.1f} TotalBursaries'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerBursaryNameExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerBursaryNameExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Bursary Per Bursary Name Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(LearnerBursaryPerBursaryNameBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerBursaryPerBursaryNameLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerBursaryPerBursaryNameSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Bursary Per Bursary Name: {point.y:.1f} TotalBursaries'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerBursaryNameExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerBursaryNameExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Bursary Per Bursary Name Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(LearnerBursaryPerBursaryNameLineChart); ","\r\nimport React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerBursaryPerBursaryNamePieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerBursaryPerBursaryNameSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Learner Bursary Per Bursary Name\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Bursary Per Bursary Name: {point.y:.1f} TotalBursaries'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerBursaryNameExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerBursaryNameExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Bursary Per Bursary Name Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(LearnerBursaryPerBursaryNamePieChart); \r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n },\r\n}\r\n\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass LearnerBursaryPerSponsorshipBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerBursaryPerSponsorshipSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Bursary Per Sponsorship: {point.y:.1f} TotalSponsorships'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerSponsorshipExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerSponsorshipExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Bursary Per Sponsorship Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n \r\nexport default withStyles(styles)(LearnerBursaryPerSponsorshipBarChart);\r\n"," import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerBursaryPerSponsorshipLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerBursaryPerSponsorshipSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Bursary Per Sponsorship: {point.y:.1f} TotalBursarySponsorships'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerSponsorshipExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerSponsorshipExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Bursary Per Sponsorship Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(LearnerBursaryPerSponsorshipLineChart); ","\r\nimport React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n }, \r\n}\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerBursaryPerSponsorshipPieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerBursaryPerSponsorshipSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Learner Bursary Per Sponsorship\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Bursary Per Sponsorship: {point.y:.1f} TotalBursarySponsorships'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerSponsorshipExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerSponsorshipExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Bursary Per Sponsorship Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(LearnerBursaryPerSponsorshipPieChart); \r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n },\r\n}\r\n \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass LearnerBursaryPerBursaryStatusBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerBursaryPerBursaryStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Bursary Per Bursary Status: {point.y:.1f} TotalBursaryStatusses'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerBursaryStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerBursaryStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Bursary Per Bursary Status Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(LearnerBursaryPerBursaryStatusBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerBursaryPerBursaryStatusLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerBursaryPerBursaryStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Bursary Per Bursary Status: {point.y:.1f} TotalBursaryStatusses'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerBursaryStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerBursaryStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Bursary Per Bursary Status Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(LearnerBursaryPerBursaryStatusLineChart); ","\r\nimport React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerBursaryPerBursaryStatusPieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerBursaryPerBursaryStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Learner Bursary Per Bursary Status\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Bursary Per Bursary Status: {point.y:.1f} TotalBursaryStatusses'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerBursaryStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerBursaryPerBursaryStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Bursary Per Bursary Status Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(LearnerBursaryPerBursaryStatusPieChart); \r\n","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './BarChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n },\r\n}\r\n\r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\n\r\nclass LearnerPerAllocationStatusBarChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'column',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n rotation: -90,\r\n //color: '#FFFFFF',\r\n align: 'right',\r\n format: '{point.y:.1f}', // one decimal\r\n y: 10, // 10 pixels down from the top\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerPerAllocationStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n Highcharts.chart({\r\n\r\n chart: {\r\n type: 'column',\r\n renderTo: 'atmospheric-composition',\r\n height: '350px'\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n labels: {\r\n rotation: -45,\r\n style: {\r\n fontSize: '13px',\r\n fontFamily: 'Verdana, sans-serif'\r\n }\r\n },\r\n xAxis: {\r\n categories: categories\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: 'Total'\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Per Allocation and Un-Allocation: {point.y:.1f} TotalStatusses'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerPerAllocationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n console.log(url);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerPerAllocationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n \r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Per Allocation and Un-Allocation Status Bar Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(LearnerPerAllocationStatusBarChart);\r\n","import React, { Component } from \"react\";\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './LineChart.css';\r\nimport ViewUtils from '../ViewUtils';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n}\r\n\r\n \r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerPerAllocationStatusLineChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n\r\n series: [{\r\n type: 'line',\r\n allowPointSelect: true,\r\n keys: ['name', 'y'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }]\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerPerAllocationStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('linecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ''\r\n },\r\n\r\n xAxis: {\r\n //keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Per Allocation and Un-Allocation Status: {point.y:.1f} TotalStatusses'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerPerAllocationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n }\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerPerAllocationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Per Allocation and Un-Allocation Status Line Chart\r\n \r\n \r\n \r\n \r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default withStyles(styles)(LearnerPerAllocationStatusLineChart); ","\r\nimport React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { Card, Col } from 'react-bootstrap';\r\nimport Highcharts from 'highcharts';\r\nimport './PieChart.css';\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport ReactDom from 'react-dom';\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst styles = {\r\n fullHeightCard: {\r\n height: \"60%\",\r\n color: \"white\"\r\n },\r\n} \r\n\r\nconst utils = new ViewUtils();\r\nvar test = [];\r\nvar data = [];\r\nvar array = [];\r\nvar arrayData = [];\r\n//var RoleID = !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0;\r\nvar RoleID = 0;\r\nvar categories;\r\nvar xAxisCategory = [];\r\nvar yAxisCategory = [];\r\n\r\n\r\n\r\nclass LearnerPerAllocationStatusPieChart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchParameters: [{ Name: \"RoleID\", Value: null },\r\n { Name: \"ExportToExcel\", Value: null },\r\n { Name: \"Filter\", Value: null }],\r\n //RoleID: !utils.isNull(this.props.RoleID) ? this.props.RoleID : 0,\r\n\r\n series: [{\r\n type: 'pie',\r\n allowPointSelect: true,\r\n keys: ['name', 'y', 'selected', 'sliced'],\r\n data: yAxisCategory,\r\n showInLegend: true,\r\n }],\r\n dataLabels: {\r\n enabled: true,\r\n format: \"{point.y}\"\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n highChartsRender() {\r\n\r\n xAxisCategory.splice(0, xAxisCategory.length);\r\n yAxisCategory.splice(0, yAxisCategory.length);\r\n var categories;\r\n\r\n\r\n let url = `api/sims/QALPDashboard/GetLearnerPerAllocationStatusSearch?request={\"searchParameters\":[{\"Name\":\"RoleID\",\"Value\":${RoleID}}, {\"Name\":\"ExportToExcel\",\"Value\": \"No\"}, {\"Name\":\"Filter\",\"Value\": \"\"}]}`\r\n\r\n utils.invokeUrl(url, (response) => {\r\n\r\n test = response;\r\n //arrayData = new Array();\r\n\r\n //console.log(response);\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n var arr = response[i].Values\r\n xAxisCategory.push(arr);\r\n }\r\n\r\n\r\n for (var i = 0; i < response.length; i++) {\r\n yAxisCategory.push([response[i].Values, response[i].Total]);\r\n }\r\n\r\n categories = response.map((o) => String(o.Values))\r\n\r\n\r\n Highcharts.chart('piecontainer', {\r\n chart: {\r\n styledMode: true,\r\n height: '350px',\r\n },\r\n\r\n title: {\r\n text: ' '\r\n },\r\n\r\n xAxis: {\r\n title: \"Learner Per Allocation and Un-Allocation Status\",\r\n // keys: ['x'],\r\n categories: categories\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n pointFormat: 'Learner Per Allocation and Un-Allocation Status: {point.y:.1f} TotalStatusses'\r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n\r\n let searchParameters = [];\r\n\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: this.RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"Yes\" })\r\n searchParameters.push({ Name: \"Filter\", Value: xAxisCategory[e.point.x] })\r\n console.clear();\r\n console.log(searchParameters);\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerPerAllocationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, (e) => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n },\r\n\r\n\r\n series: this.state.series\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.highChartsRender();\r\n };\r\n\r\n\r\n base64ToArrayBuffer(base64) {\r\n var binary_string = window.atob(base64);\r\n var len = binary_string.length;\r\n var bytes = new Uint8Array(len);\r\n for (var i = 0; i < len; i++) {\r\n bytes[i] = binary_string.charCodeAt(i);\r\n }\r\n return bytes.buffer;\r\n };\r\n\r\n ExportAllToExcel() {\r\n let searchParameters = [];\r\n\r\n searchParameters.push({ Name: \"RoleID\", Value: RoleID })\r\n searchParameters.push({ Name: \"ExportToExcel\", Value: \"All\" })\r\n searchParameters.push({ Name: \"Filter\", Value: \"\" })\r\n\r\n\r\n utils.invokeUrl(\"api/sims/QALPDashboard/GetLearnerPerAllocationStatusExcel?request=\" + utils.doGetRequestJson(0, 0, searchParameters, true), (data) => {\r\n var result;\r\n if (typeof data === \"string\") {\r\n result = JSON.parse(data);\r\n } else {\r\n result = data;\r\n }\r\n\r\n var blob = new Blob([this.base64ToArrayBuffer(result.Base64)], { type: result.Type });\r\n var url = URL.createObjectURL(blob);\r\n\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = result.Name;\r\n link.target = '_blank';\r\n link.click();\r\n\r\n }, () => {\r\n this.setState({ message: \"Unable to execute report. A system error has occurred. Please contact your system administrator\", messageStyle: \"ERROR\" });\r\n });\r\n };\r\n\r\n\r\n\r\n render() {\r\n const { chartOptions, hoverData } = this.state;\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Learner Per Allocation and Un-Allocatioon Status Pie Chart\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nexport default withStyles(styles)(LearnerPerAllocationStatusPieChart); \r\n","import React, { Component } from 'react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport \"../Grid.css\";\r\nimport \"../Form.css\";\r\nimport \"../App.css\";\r\nimport { ViewContainer } from \"../View.jsx\";\r\nimport ViewUtils from '../ViewUtils';\r\nimport EnhancedToolbar from '../widgets/Toolbar';\r\nimport withMenuPermission from \"../widgets/withMenuPermission\";\r\nimport TextField from '@material-ui/core/TextField';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\n\r\n\r\n\r\nimport TrainingProviderListPerAccreditationStatusLineChart from '../QALPDashboardCharts/TrainingProviderListPerAccreditationStatusLineChart';\r\nimport TrainingProviderListPerAccreditationStatusBarChart from '../QALPDashboardCharts/TrainingProviderListPerAccreditationStatusBarChart';\r\nimport TrainingProviderListPerAccreditationStatusPieChart from '../QALPDashboardCharts/TrainingProviderListPerAccreditationStatusPieChart';\r\n\r\nimport TrainingProviderListPerRegionBarChart from '../QALPDashboardCharts/TrainingProviderListPerRegionBarChart';\r\nimport TrainingProviderListPerRegionLineChart from '../QALPDashboardCharts/TrainingProviderListPerRegionLineChart';\r\nimport TrainingProviderListPerRegionPieChart from '../QALPDashboardCharts/TrainingProviderListPerRegionPieChart';\r\n\r\nimport TrainingProviderListPerProviderClassPieChart from '../QALPDashboardCharts/TrainingProviderListPerProviderClassPieChart';\r\nimport TrainingProviderListPerProviderClassBarChart from '../QALPDashboardCharts/TrainingProviderListPerProviderClassBarChart';\r\nimport TrainingProviderListPerProviderClassLineChart from '../QALPDashboardCharts/TrainingProviderListPerProviderClassLineChart';\r\n\r\n\r\nimport AssessorPerRegionBarChart from '../QALPDashboardCharts/AssessorPerRegionBarChart';\r\nimport AssessorPerRegionLineChart from '../QALPDashboardCharts/AssessorPerRegionLineChart';\r\nimport AssessorPerRegionPieChart from '../QALPDashboardCharts/AssessorPerRegionPieChart';\r\n\r\nimport AssessorPerRegistrationStatusBarChart from '../QALPDashboardCharts/AssessorPerRegistrationStatusBarChart';\r\nimport AssessorPerRegistrationStatusLineChart from '../QALPDashboardCharts/AssessorPerRegistrationStatusLineChart';\r\nimport AssessorPerRegistrationStatusPieChart from '../QALPDashboardCharts/AssessorPerRegistrationStatusPieChart';\r\n\r\nimport AssessorPerAssessorTypeBarChart from '../QALPDashboardCharts/AssessorPerAssessorTypeBarChart';\r\nimport AssessorPerAssessorTypeLineChart from '../QALPDashboardCharts/AssessorPerAssessorTypeLineChart';\r\nimport AssessorPerAssessorTypePieChart from '../QALPDashboardCharts/AssessorPerAssessorTypePieChart';\r\n\r\n\r\nimport ModeratorPerModeratorTypeBarChart from '../QALPDashboardCharts/ModeratorPerModeratorTypeBarChart';\r\nimport ModeratorPerModeratorTypeLineChart from '../QALPDashboardCharts/ModeratorPerModeratorTypeLineChart';\r\nimport ModeratorPerModeratorTypePieChart from '../QALPDashboardCharts/ModeratorPerModeratorTypePieChart';\r\n\r\nimport ModeratorPerRegistrationStatusBarChart from '../QALPDashboardCharts/ModeratorPerRegistrationStatusBarChart';\r\nimport ModeratorPerRegistrationStatusLineChart from '../QALPDashboardCharts/ModeratorPerRegistrationStatusLineChart';\r\nimport ModeratorPerRegistrationStatusPieChart from '../QALPDashboardCharts/ModeratorPerRegistrationStatusPieChart';\r\n\r\nimport ModeratorPerRegionBarChart from '../QALPDashboardCharts/ModeratorPerRegionBarChart';\r\nimport ModeratorPerRegionLineChart from '../QALPDashboardCharts/ModeratorPerRegionLineChart';\r\nimport ModeratorPerRegionPieChart from '../QALPDashboardCharts/ModeratorPerRegionPieChart';\r\n\r\n\r\nimport LearnerLearnershipsPerMunicipalityBarChart from '../QALPDashboardCharts/LearnerLearnershipsPerMunicipalityBarChart';\r\nimport LearnerLearnershipsPerMunicipalityLineChart from '../QALPDashboardCharts/LearnerLearnershipsPerMunicipalityLineChart';\r\nimport LearnerLearnershipsPerMunicipalityPieChart from '../QALPDashboardCharts/LearnerLearnershipsPerMunicipalityPieChart';\r\n\r\nimport LearnerLearnershipsPerSponsorshipBarChart from '../QALPDashboardCharts/LearnerLearnershipsPerSponsorshipBarChart';\r\nimport LearnerLearnershipsPerSponsorshipLineChart from '../QALPDashboardCharts/LearnerLearnershipsPerSponsorshipLineChart';\r\nimport LearnerLearnershipsPerSponsorshipPieChart from '../QALPDashboardCharts/LearnerLearnershipsPerSponsorshipPieChart';\r\n\r\nimport LearnerLearnershipsPerAgreementStatusBarChart from '../QALPDashboardCharts/LearnerLearnershipsPerAgreementStatusBarChart'; \r\nimport LearnerLearnershipsPerAgreementStatusLineChart from '../QALPDashboardCharts/LearnerLearnershipsPerAgreementStatusLineChart';\r\nimport LearnerLearnershipsPerAgreementStatusPieChart from '../QALPDashboardCharts/LearnerLearnershipsPerAgreementStatusPieChart';\r\n\r\nimport LearnerLearnershipsPerLearnershipTitleBarChart from '../QALPDashboardCharts/LearnerLearnershipsPerLearnershipTitleBarChart';\r\nimport LearnerLearnershipsPerLearnershipTitleLineChart from '../QALPDashboardCharts/LearnerLearnershipsPerLearnershipTitleLineChart';\r\nimport LearnerLearnershipsPerLearnershipTitlePieChart from '../QALPDashboardCharts/LearnerLearnershipsPerLearnershipTitlePieChart';\r\n\r\n\r\nimport LearnerSkillsProgrammesPerMunicipalityBarChart from '../QALPDashboardCharts/LearnerSkillsProgrammesPerMunicipalityBarChart';\r\nimport LearnerSkillsProgrammesPerMunicipalityLineChart from '../QALPDashboardCharts/LearnerSkillsProgrammesPerMunicipalityLineChart';\r\nimport LearnerSkillsProgrammesPerMunicipalityPieChart from '../QALPDashboardCharts/LearnerSkillsProgrammesPerMunicipalityPieChart';\r\n\r\nimport LearnerSkillsProgrammesPerBursaryNameBarChart from '../QALPDashboardCharts/LearnerSkillsProgrammesPerBursaryNameBarChart';\r\nimport LearnerSkillsProgrammesPerBursaryNameLineChart from '../QALPDashboardCharts/LearnerSkillsProgrammesPerBursaryNameLineChart';\r\nimport LearnerSkillsProgrammesPerBursaryNamePieChart from '../QALPDashboardCharts/LearnerSkillsProgrammesPerBursaryNamePieChart';\r\n\r\nimport LearnerSkillsProgrammesPerSponsorshipBarChart from '../QALPDashboardCharts/LearnerSkillsProgrammesPerSponsorshipBarChart';\r\nimport LearnerSkillsProgrammesPerSponsorshipLineChart from '../QALPDashboardCharts/LearnerSkillsProgrammesPerSponsorshipLineChart';\r\nimport LearnerSkillsProgrammesPerSponsorshipPieChart from '../QALPDashboardCharts/LearnerSkillsProgrammesPerSponsorshipPieChart';\r\n\r\nimport LearnerSkillsProgrammesPerBursaryStatusBarChart from '../QALPDashboardCharts/LearnerSkillsProgrammesPerBursaryStatusBarChart';\r\nimport LearnerSkillsProgrammesPerBursaryStatusLineChart from '../QALPDashboardCharts/LearnerSkillsProgrammesPerBursaryStatusLineChart';\r\nimport LearnerSkillsProgrammesPerBursaryStatusPieChart from '../QALPDashboardCharts/LearnerSkillsProgrammesPerBursaryStatusPieChart';\r\n\r\n\r\nimport LearnerBursaryPerMunicipalityBarChart from '../QALPDashboardCharts/LearnerBursaryPerMunicipalityBarChart';\r\nimport LearnerBursaryPerMunicipalityLineChart from '../QALPDashboardCharts/LearnerBursaryPerMunicipalityLineChart';\r\nimport LearnerBursaryPerMunicipalityPieChart from '../QALPDashboardCharts/LearnerBursaryPerMunicipalityPieChart';\r\n \r\nimport LearnerBursaryPerBursaryNameBarChart from '../QALPDashboardCharts/LearnerBursaryPerBursaryNameBarChart';\r\nimport LearnerBursaryPerBursaryNameLineChart from '../QALPDashboardCharts/LearnerBursaryPerBursaryNameLineChart';\r\nimport LearnerBursaryPerBursaryNamePieChart from '../QALPDashboardCharts/LearnerBursaryPerBursaryNamePieChart';\r\n \r\nimport LearnerBursaryPerSponsorshipBarChart from '../QALPDashboardCharts/LearnerBursaryPerSponsorshipBarChart';\r\nimport LearnerBursaryPerSponsorshipLineChart from '../QALPDashboardCharts/LearnerBursaryPerSponsorshipLineChart';\r\nimport LearnerBursaryPerSponsorshipPieChart from '../QALPDashboardCharts/LearnerBursaryPerSponsorshipPieChart';\r\n \r\nimport LearnerBursaryPerBursaryStatusBarChart from '../QALPDashboardCharts/LearnerBursaryPerBursaryStatusBarChart';\r\nimport LearnerBursaryPerBursaryStatusLineChart from '../QALPDashboardCharts/LearnerBursaryPerBursaryStatusLineChart';\r\nimport LearnerBursaryPerBursaryStatusPieChart from '../QALPDashboardCharts/LearnerBursaryPerBursaryStatusPieChart';\r\n\r\n\r\n\r\n//LEARNER\r\nimport LearnerPerAllocationStatusBarChart from '../QALPDashboardCharts/LearnerPerAllocationStatusBarChart';\r\nimport LearnerPerAllocationStatusLineChart from '../QALPDashboardCharts/LearnerPerAllocationStatusLineChart';\r\nimport LearnerPerAllocationStatusPieChart from '../QALPDashboardCharts/LearnerPerAllocationStatusPieChart';\r\n\r\n\r\n\r\nimport { Row } from 'react-bootstrap';\r\n\r\n\r\nconst utils = new ViewUtils();\r\n\r\n\r\nclass QALPDashboard extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n\r\n trainingproviderlistperaccreditationstatusshow: false, \r\n trainingproviderlistperregionshow: false, \r\n trainingproviderlistperproviderclassshow: false,\r\n \r\n assessorperregionshow: false,\r\n assessorperregistrationstatusshow: false,\r\n assessorperassessortypeshow: false,\r\n \r\n moderatorpermoderatortypeshow: false,\r\n moderatorperregistrationstatusshow: false,\r\n moderatorperregionshow: false,\r\n \r\n learnerlearnershipsperagreementstatusshow: false,\r\n learnerlearnershipspermunicipalityshow: false,\r\n learnerlearnershipspersponsorshipshow: false,\r\n learnerlearnershipsperlearnershiptitleshow: false,\r\n \r\n learnerskillsprogrammespermunicipalityshow: false,\r\n learnerskillsprogrammesperbursarynameshow: false, \r\n learnerskillsprogrammespersponsorshipshow: false,\r\n learnerskillsprogrammesperbursarystatusshow: false, \r\n\r\n\r\n learnerbursarypermunicipalityshow: false,\r\n learnerbursaryperbursarynameshow: false,\r\n learnerbursarypersponsorshipshow: false,\r\n learnerbursaryperbursarystatusshow: false,\r\n \r\n learnerperallocationstatusshow: false\r\n\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n utils.setLegend(\"QA And LP Dashboard\");\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: true });\r\n }\r\n\r\n\r\n handleReportNameChanged = (event) => {\r\n\r\n var divToShow = event.target.value;\r\n\r\n if (divToShow == 'divTrainingProviderListPerAccreditationStatus') {\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: true });\r\n\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n\r\n }\r\n else if (divToShow == 'divTrainingProviderListPerRegion') {\r\n this.setState({ trainingproviderlistperregionshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n else if (divToShow == 'divTrainingProviderListPerProviderClass') {\r\n this.setState({ trainingproviderlistperproviderclassshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n else if (divToShow == 'divAssessorPerRegion')\r\n {\r\n this.setState({ assessorperregionshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n else if (divToShow == 'divAssessorPerRegistrationStatus') {\r\n this.setState({ assessorperregistrationstatusshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n else if (divToShow == 'divAssessorPerRegion')\r\n {\r\n this.setState({ assessorperregionshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n else if (divToShow == 'divAssessorPerAssessorType')\r\n {\r\n this.setState({ assessorperassessortypeshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n else if (divToShow == 'divModeratorPerModeratorType')\r\n {\r\n this.setState({ moderatorpermoderatortypeshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n else if (divToShow == 'divModeratorPerRegistrationStatus')\r\n {\r\n this.setState({ moderatorperregistrationstatusshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n\r\n else if (divToShow == 'divModeratorPerRegion')\r\n {\r\n this.setState({ moderatorperregionshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n\r\n else if (divToShow == 'divLearnerLearnershipsPerLearnershipAgreementStatus')\r\n {\r\n this.setState({ learnerlearnershipsperagreementstatusshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n else if (divToShow == 'divLearnerLearnershipsPerMunicipality')\r\n {\r\n this.setState({ learnerlearnershipspermunicipalityshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n else if (divToShow == 'divLearnerLearnershipsPerSponsorship')\r\n {\r\n this.setState({ learnerlearnershipspersponsorshipshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n else if (divToShow == 'divLearnerLearnershipsPerLearnershipTitle')\r\n {\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n else if (divToShow == 'divLearnerSkillsProgrammesReportPerMunicipality')\r\n {\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n else if (divToShow == 'divLearnerSkillsProgrammesReportPerBursaryName')\r\n {\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n else if (divToShow == 'divLearnerSkillsProgrammesReportPerSponsorship')\r\n {\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n else if (divToShow == 'divLearnerSkillsProgrammesReportPerBursaryStatus')\r\n {\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n else if (divToShow == 'divLearnerBursaryReportPerMunicipality')\r\n {\r\n this.setState({ learnerbursarypermunicipalityshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n else if (divToShow == 'divLearnerBursaryReportPerBursaryName')\r\n {\r\n this.setState({ learnerbursaryperbursarynameshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n else if (divToShow == 'divLearnerBursaryReportPerSponsorship')\r\n {\r\n this.setState({ learnerbursarypersponsorshipshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n else if (divToShow == 'divLearnerBursaryReportPerBursaryStatus')\r\n {\r\n this.setState({ learnerbursaryperbursarystatusshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n\r\n\r\n this.setState({ learnerperallocationstatusshow: false });\r\n }\r\n else if (divToShow == 'divLearnersPerAllocatedAndUnAllocatedLearners')\r\n {\r\n this.setState({ learnerperallocationstatusshow: true });\r\n\r\n this.setState({ trainingproviderlistperaccreditationstatusshow: false });\r\n this.setState({ trainingproviderlistperregionshow: false });\r\n this.setState({ trainingproviderlistperproviderclassshow: false });\r\n\r\n this.setState({ assessorperregionshow: false });\r\n this.setState({ assessorperregistrationstatusshow: false });\r\n this.setState({ assessorperassessortypeshow: false });\r\n\r\n this.setState({ moderatorpermoderatortypeshow: false });\r\n this.setState({ moderatorperregistrationstatusshow: false });\r\n this.setState({ moderatorperregionshow: false });\r\n\r\n this.setState({ learnerlearnershipspersponsorshipshow: false });\r\n this.setState({ learnerlearnershipsperagreementstatusshow: false });\r\n this.setState({ learnerlearnershipsperlearnershiptitleshow: false });\r\n this.setState({ learnerlearnershipspermunicipalityshow: false });\r\n\r\n this.setState({ learnerskillsprogrammespermunicipalityshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarynameshow: false });\r\n this.setState({ learnerskillsprogrammespersponsorshipshow: false });\r\n this.setState({ learnerskillsprogrammesperbursarystatusshow: false });\r\n\r\n this.setState({ learnerbursaryperbursarynameshow: false });\r\n this.setState({ learnerbursaryperbursarystatusshow: false });\r\n this.setState({ learnerbursarypermunicipalityshow: false });\r\n this.setState({ learnerbursarypersponsorshipshow: false });\r\n\r\n }\r\n\r\n\r\n }\r\n\r\n\r\n\r\n render() {\r\n return (\r\n\r\n \r\n
\r\n
\r\n this.handleReportNameChanged(values)}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n
\r\n\r\n
\r\n\r\n {\r\n this.state.trainingproviderlistperaccreditationstatusshow ?\r\n
\r\n \r\n \r\n \r\n\r\n
\r\n \r\n \r\n
\r\n
: null\r\n }\r\n\r\n \r\n {\r\n this.state.trainingproviderlistperregionshow ?\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
: null\r\n }\r\n\r\n \r\n\r\n {\r\n this.state.trainingproviderlistperproviderclassshow ?\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
: null\r\n }\r\n\r\n \r\n\r\n {\r\n this.state.assessorperregionshow ?\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n
: null\r\n }\r\n\r\n \r\n\r\n {\r\n this.state.assessorperregistrationstatusshow ?\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n
: null\r\n }\r\n\r\n\r\n {\r\n this.state.assessorperassessortypeshow ?\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n
: null\r\n }\r\n\r\n\r\n\r\n {\r\n this.state.moderatorpermoderatortypeshow ?\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
: null\r\n }\r\n\r\n\r\n\r\n {\r\n this.state.moderatorperregistrationstatusshow ?\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
: null\r\n }\r\n\r\n\r\n\r\n {\r\n this.state.moderatorperregionshow ?\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
: null\r\n }\r\n\r\n\r\n\r\n {\r\n this.state.learnerlearnershipsperagreementstatusshow ?\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
: null\r\n }\r\n\r\n\r\n {\r\n this.state.learnerlearnershipspermunicipalityshow ?\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
: null\r\n }\r\n\r\n\r\n\r\n {\r\n this.state.learnerlearnershipspersponsorshipshow ?\r\n : null\r\n }\r\n\r\n\r\n\r\n {\r\n this.state.learnerlearnershipsperlearnershiptitleshow ?\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
: null\r\n }\r\n\r\n\r\n\r\n\r\n {\r\n this.state.learnerskillsprogrammespermunicipalityshow ?\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
: null\r\n }\r\n \r\n \r\n \r\n {\r\n this.state.learnerskillsprogrammesperbursarynameshow ?\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
: null\r\n }\r\n\r\n\r\n\r\n {\r\n this.state.learnerskillsprogrammespersponsorshipshow ?\r\n : null\r\n }\r\n\r\n\r\n\r\n {\r\n this.state.learnerskillsprogrammesperbursarystatusshow ?\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
: null\r\n }\r\n\r\n\r\n {\r\n this.state.learnerbursarypermunicipalityshow ?\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
: null\r\n }\r\n\r\n\r\n\r\n {\r\n this.state.learnerbursaryperbursarynameshow ?\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
: null\r\n }\r\n\r\n\r\n\r\n {\r\n this.state.learnerbursarypersponsorshipshow ?\r\n : null\r\n }\r\n\r\n\r\n\r\n {\r\n this.state.learnerbursaryperbursarystatusshow ?\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
: null\r\n }\r\n\r\n\r\n {\r\n this.state.learnerperallocationstatusshow ?\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
: null\r\n }\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Dashboard\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n}","import React, { Component } from \"react\";\r\nimport { connect } from 'react-redux';\r\nimport { withRouter, Link } from 'react-router-dom';\r\nimport { Button } from \"react-bootstrap\";\r\nimport { withAlert } from 'react-alert'\r\n//import { actionCreators } from '../../store/SecurityStore';\r\nimport * as actions from '../../store/actions/auth';\r\nimport \"./Login.css\";\r\nimport simslogoLoading from '../../content/images/logos/sims_logo_loading.png'\r\nimport LoadingIndicatorLogin from '../LoadingIndicatorLogin';\r\nimport ViewUtils from \"../ViewUtils\";\r\nimport VisibilityIcon from '@material-ui/icons/Visibility';\r\nimport VisibilityOff from \"@material-ui/icons/VisibilityOff\";\r\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport Input from \"@material-ui/core/Input\";\r\n\r\n//const handler = (state) => {\r\n// let isLoading = state.security.isLoading;\r\n// let userDetails = state.security.userDetails;\r\n// return {\r\n// isLoading: isLoading,\r\n// userDetails: userDetails,\r\n// authenticated: userDetails.Authenticated,\r\n// otpSent: userDetails.OTPSent,\r\n// message: userDetails.Message,\r\n// };\r\n//};\r\nimport { useState } from \"react\";\r\n\r\nconst utils = new ViewUtils();\r\n\r\nclass Login extends Component {\r\n\r\n state = {\r\n username: \"\",\r\n password: \"\",\r\n message: \"\",\r\n passwordShown: false,\r\n //display: \"none\",\r\n //loading: true\r\n };\r\n\r\n\r\n showAlert(msg, msgType) {\r\n this.props.alert.show(msg, {\r\n timeout: 15000, // custom timeout just for this one alert\r\n type: msgType,\r\n onOpen: () => {\r\n //console.log('open')\r\n }, // callback that will be executed after this alert open\r\n onClose: () => {\r\n //console.log('closed')\r\n } // callback that will be executed after this alert is removed\r\n })\r\n }\r\n\r\n validateUserName() {\r\n return this.state.username.length > 0;\r\n }\r\n\r\n validatePassword() {\r\n return this.state.password.length > 0;\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.authenticated !== this.props.authenticated && this.props.authenticated) {\r\n this.props.history.push('/role');\r\n }\r\n if (prevProps.otpSent !== this.props.otpSent && this.props.otpSent) {\r\n this.props.history.push('/confirmOTP');\r\n }\r\n if (prevProps.passwordExpired !== this.props.passwordExpired && this.props.passwordExpired) {\r\n this.props.history.push('/reset');\r\n }\r\n\r\n if (prevProps.message !== this.props.message && this.props.message) {\r\n this.setState({ message: this.props.message });\r\n }\r\n\r\n if (prevProps.loginErrorMessage !== this.props.loginErrorMessage && this.props.loginErrorMessage) {\r\n this.showAlert(this.props.loginErrorMessage, 'error');\r\n }\r\n\r\n if (prevProps.loginMessage !== this.props.loginMessage && this.props.loginMessage) {\r\n this.showAlert(this.props.loginMessage, 'error');\r\n }\r\n }\r\n\r\n login = () => {\r\n\r\n if (!this.validateUserName() && !this.validatePassword()) {\r\n this.setState({ message: \"Enter username\", display: \"\" });\r\n this.showAlert('Enter username & password', 'error');\r\n return;\r\n }\r\n\r\n if (!this.validateUserName()) {\r\n this.setState({ message: \"Enter username\", display: \"\" });\r\n this.showAlert('Enter username', 'error');\r\n return;\r\n }\r\n\r\n if (!this.validatePassword()) {\r\n this.setState({ message: \"Enter password\" });\r\n this.showAlert('Enter Password', 'error');\r\n return;\r\n }\r\n\r\n this.setState({ message: \"\" });\r\n //this.props.login(this.state.username, this.state.password);\r\n this.props.onUserAuth(this.state.username, this.state.password, '/login');\r\n }\r\n\r\n // Password toggle handler\r\n togglePassword = () => {\r\n // chnage inverse the boolean state passwordShown\r\n if (this.state.passwordShown === false) {\r\n this.setState({ passwordShown: true })\r\n }\r\n else {\r\n this.setState({ passwordShown: false })\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n @ {new Date().getFullYear()} Copyright SIMS. All rights reserved. Developed By SoluGrowth\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n @ {new Date().getFullYear()} Copyright SIMS. All rights reserved. Developed By SoluGrowth\r\n
\r\n
\r\n
An email has been sent with your new password. Please note the email may take several minutes to receive. Please also remember to check your email blocking and spam settings if applicable.
\r\n );\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n @ {new Date().getFullYear()} Copyright SIMS. All rights reserved. Developed By SoluGrowth\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Your Password has expired.
Please enter new password
\r\n
\r\n
\r\n
\r\n @ {new Date().getFullYear()} Copyright SIMS. All rights reserved. Developed By SoluGrowth\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{this.state.message}
\r\n
Select a Role
\r\n
\r\n
\r\n \r\n \r\n | \r\n \r\n BACK\r\n \r\n | \r\n \r\n \r\n NEXT\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{this.state.message}
\r\n
Select a Provider
\r\n
\r\n
\r\n \r\n \r\n | \r\n \r\n BACK\r\n \r\n | \r\n \r\n \r\n NEXT\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{this.state.message}
\r\n
Select a Client
\r\n
\r\n
\r\n \r\n \r\n | \r\n \r\n BACK\r\n \r\n | \r\n \r\n \r\n NEXT\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n @ {new Date().getFullYear()} Copyright SIMS. All rights reserved. Developed By SoluGrowth\r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n interfaceVersionUpdateConfirm: state.auth.interfaceVersionUpdateConfirm,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n onInterfaceVersionCheck: (interfaceVersionUpdateConfirm) => dispatch(actions.interfaceVersionCheck(interfaceVersionUpdateConfirm)),\r\n onInterfaceVersionShouldCheck: (interfaceVersionShouldBeChecked) => dispatch(actions.interfaceVersionShouldCheck(interfaceVersionShouldBeChecked))\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(InterfaceVersion);","import React, { Component, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { BrowserRouter as Router, Switch, Redirect, Route } from 'react-router-dom';\r\nimport MainLayout from \"./components/layout/main\";\r\nimport { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';\r\nimport ViewUtils from './components/ViewUtils';\r\nimport Login from './components/security/Login';\r\nimport ADLogin from './components/security/ADLogin';\r\nimport Forgot from './components/security/forgot';\r\nimport Reset from './components/security/reset';\r\nimport RoleSelect from './components/security/RoleSelect';\r\nimport ProviderSelect from './components/security/ProviderSelect';\r\nimport EmployerSelect from './components/security/EmployerSelect';\r\nimport ConfirmOTP from './components/security/confirmOTP';\r\nimport SDF from './components/skills/sdf/SDF';\r\nimport SDFOrganisation from './components/skills/sdf/SDFOrganisations';\r\nimport Stakeholder from './components/dg/stakeholder/Stakeholder';\r\nimport StakeholderOrganisation from './components/dg/stakeholder/StakeholderOrganisationDetails';\r\nimport InterfaceVersion from './InterfaceVersion';\r\n\r\nconst utils = new ViewUtils();\r\n\r\nconst theme = createMuiTheme({\r\n palette: {\r\n primary: {\r\n main: '#003F6B'\r\n },\r\n secondary: {\r\n main: '#009C44'\r\n },\r\n action: {\r\n main: '#ffffff'\r\n }\r\n\r\n }\r\n},\r\n)\r\n\r\nclass App extends Component {\r\n\r\n render() {\r\n let redirect = null\r\n if (this.props.autoLogout) {\r\n redirect = (\r\n \r\n );\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n (\r\n )} />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ()} />\r\n \r\n \r\n ()} />\r\n \r\n {this.props.roleSet && }\r\n \r\n {redirect}\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n autoLogout: state.auth.autoLogout,\r\n loginRedirectToLoginPath: state.auth.loginRedirectToLoginPath,\r\n roleSet: !utils.isNull(state.auth.userDetails) ? !utils.isNull(state.auth.userDetails.Token) ? true : false : false\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps, null)(App);","import React, {Fragment} from 'react';\r\n\r\n// Alert optional cofiguration\r\n\r\nexport const AlertStyle = {\r\n backgroundColor: '#dc3545',\r\n color: 'white',\r\n padding: '10px',\r\n textTransform: 'uppercase',\r\n borderRadius: '3px',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n boxShadow: 'rgba(0, 0, 0, 0.03) 0px 2px 2px 2px',\r\n fontFamily: 'Arial',\r\n width: 'auto',\r\n boxSizing: 'border-box',\r\n margin: '30px'\r\n};\r\n\r\nconst alertButtonStyle = {\r\n marginLeft: '20px',\r\n border: 'none',\r\n backgroundColor: 'transparent',\r\n cursor: 'pointer',\r\n color: 'rgb(255, 255, 255)'\r\n}\r\n\r\nexport const options = {\r\n position: 'top center',\r\n timeout: 0,\r\n offset: '30px',\r\n transition: 'scale',\r\n containerStyle: {\r\n marginTop: '260px'\r\n }\r\n}\r\nfunction NewlineText(msg) {\r\n const text = msg.text;\r\n console.log(text);\r\n return text.split('\\n').map(str => {str}
);\r\n }\r\n\r\nexport const AlertTemplate = ({ options, message, close }) => (\r\n \r\n
\r\n
\r\n\r\n {options.type === 'info' && ''}\r\n {options.type === 'success' && ''}\r\n {options.type === 'error' && ''}\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n {props.onDocumentLoadSuccess(1)}\r\n