{children}
;\r\n};\r\n\r\nexport default Settings;\r\n","import { connect } from 'react-redux';\r\nimport Settings from './Settings';\r\nimport { setSettings } from './Settings.action';\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n sidebarIsClosed: state.sidebar.sidebarIsClosed,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => ({\r\n setSettings: (settings) => dispatch(setSettings(settings)),\r\n});\r\n\r\nexport default connect(null, mapDispatchToProps)(Settings);\r\n","export const setSettings = (payload) => {\r\n return {\r\n type: 'SET_SETTINGS',\r\n payload,\r\n };\r\n};\r\n","export default __webpack_public_path__ + \"static/media/doctor.10d70f95.png\";","export default __webpack_public_path__ + \"static/media/doctorShrug.7a7e72cb.png\";","import React, { useEffect, useState } from 'react';\r\nimport styled from 'styled-components';\r\nimport doctor from '../assets/images/doctor.png';\r\nimport doctorShrug from '../assets/images/doctorShrug.png';\r\nimport { Link } from 'react-router-dom';\r\nimport { Col, Row, Container } from 'reactstrap';\r\n\r\nconst DoctorImage = styled.img`\r\n height: 50vh;\r\n width: auto;\r\n`;\r\n\r\nconst FourOhFour = ({ onClickLogin, isAuthenticated, myKey }) => {\r\n const [randomBool, setRandomBool] = useState(Math.random() >= 0.5);\r\n\r\n // useEffect(() => {\r\n // setRandomBool(Math.random() >= 0.5);\r\n // }, []);\r\n // var randomBool = Math.random() >= 0.5;\r\n document.body.style.backgroundColor = '#fff';\r\n\r\n // const processMessage = () => {\r\n // switch (myKey) {\r\n // case 'badUrl':\r\n\r\n // return;\r\n // }\r\n // };\r\n return (\r\n myKey: {myKey}
*/}\r\n */}\r\n
*/}\r\n \r\n Page not found
\r\n {/*\r\n Click{' '}\r\n \r\n here\r\n {' '}\r\n to go to the home page.\r\n
\r\n ) : (\r\n <>\r\n\r\n If you're a candidate, please check the link in your email.\r\n
\r\n Try copy and pasting if the button isn't working.\r\n
\r\n \r\n RezRATE Users can{' '}\r\n {\r\n e.preventDefault();\r\n if (onClickLogin) {\r\n return onClickLogin();\r\n }\r\n }}\r\n >\r\n log in here\r\n \r\n .\r\n
\r\n \r\n )}\r\n - \r\n
- Please check your email for invitations and interview day schedule links. \r\n
- These messages are unique to you. Do not share them with others. \r\n
- If you’re unable to locate your email, please contact the program you’ve applied to directly. \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n\r\n if (!isAuthenticated) {\r\n const id = params.id;\r\n const isNoAuthPath = noAuthPaths.find((path) => {\r\n return pathname.indexOf(path) >= 0;\r\n });\r\n\r\n // TODO: Add list of all URLs. if URL doesn't match any structure, show 404. Otherwise, try to fix routes in App.js\r\n if (isNoAuthPath) {\r\n } else {\r\n // Check if URL is valid. Of not, redirect.\r\n let matchPathValue = null;\r\n let index = 0;\r\n while (index < authPaths.length && !matchPathValue) {\r\n matchPathValue = matchPath(pathname, {\r\n path: authPaths[index].path,\r\n exact: authPaths[index].exact,\r\n strict: false,\r\n });\r\n // console.log(pathname, ' vs ', authPaths[index], ' matchPathValue: ', matchPathValue != null);\r\n index++;\r\n }\r\n\r\n if (!matchPathValue) {\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 setShowCandidateMessage(true);\r\n }}\r\n >\r\n {' '}\r\n Candidate\r\n \r\n
\r\n \r\n
\r\n {file.DocumentTypeName}
\r\n \r\n \r\n );\r\n })}\r\n \r\n );\r\n }\r\n\r\n return ;\r\n};\r\n\r\nexport default DocumentViewer;\r\n","// sets current logged in user so that any component can potentially access this data\r\nexport const setUser = (payload) => {\r\n return {\r\n type: 'SET_USER',\r\n payload,\r\n };\r\n};\r\n\r\nexport const setName = (payload) => ({\r\n type: 'SET_NAME',\r\n payload,\r\n});\r\n\r\nexport const isDemo = (payload) => ({\r\n type: 'SET_IS_DEMO',\r\n payload,\r\n});\r\n","export default __webpack_public_path__ + \"static/media/rezRate.61f41304.gif\";","import styled, { css } from 'styled-components';\r\nimport { Col } from 'reactstrap';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\n\r\nconst sizes = {\r\n phonePortrait: '300',\r\n phoneLandscape: '480',\r\n tabletPortrait: '768',\r\n tabletLandscape: '1024',\r\n};\r\n\r\n// creates media query format using sizes variable\r\nconst cssSizes = Object.keys(sizes).reduce((acc, label) => {\r\n acc[label] = (...args) => css`\r\n @media (max-width: ${sizes[label]}px) {\r\n ${css(...args)};\r\n }\r\n `;\r\n return acc;\r\n}, {});\r\n\r\nconst ColNoPadding = styled(Col)`\r\n padding: 0 !important;\r\n`;\r\n\r\nconst CustomFontAwesomeIcon = styled(FontAwesomeIcon)`\r\n color: ${(props) => props.color};\r\n`;\r\n\r\nconst DraggableItemWrapper = styled.div`\r\n position: absolute;\r\n background-color: #f0f0f0;\r\n width: 50vw;\r\n max-width: 400px;\r\n overflow: visible;\r\n cursor: pointer;\r\n pointer-events: auto;\r\n transform-origin: 50% 50% 0px;\r\n border-radius: 4px;\r\n color: rgb(153, 153, 153);\r\n height: 70px;\r\n // line-height: 70px;\r\n font-size: 24px;\r\n text-align: left;\r\n font-weight: 400;\r\n box-sizing: border-box;\r\n -webkit-box-sizing: border-box;\r\n white-space: nowrap;\r\n background-color: ${(props) => props.backgroundColor} !important;\r\n ${cssSizes.phoneLandscape` \r\n width: calc(100vw - 55px) !important;\r\n `}\r\n`;\r\n\r\nexport { DraggableItemWrapper, cssSizes, ColNoPadding, sizes, CustomFontAwesomeIcon };\r\n","import styled from 'styled-components';\r\nimport { cssSizes } from '../Body/Common.style';\r\n\r\nconst ImageWrapper = styled.div`\r\n height: 100px;\r\n width: auto;\r\n ${cssSizes.phoneLandscape` \r\n height: 50px;\r\n `}\r\n & > img {\r\n height: 100%;\r\n width: auto;\r\n }\r\n`;\r\n\r\nconst Wrapper = styled.div`\r\n display: grid;\r\n grid-template-columns: ${(props) => props.imgWidth}px auto;\r\n ${cssSizes.phoneLandscape` \r\n grid-template-columns: ${(props) => props.imgWidth}px auto;\r\n `}\r\n`;\r\n\r\nconst TextWrapper = styled.div`\r\n display: flex;\r\n justify-content: center;\r\n flex-direction: column;\r\n padding-left: 10px;\r\n height: 100%;\r\n h4 {\r\n ${cssSizes.phoneLandscape` \r\n font-size: 0.7rem;\r\n `}\r\n }\r\n h2 {\r\n ${cssSizes.phoneLandscape` \r\n font-size: 1.0rem;\r\n `}\r\n }\r\n`;\r\nexport { ImageWrapper, Wrapper, TextWrapper };\r\n","import React from 'react';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faBell, faExclamationCircle, faTimes } from '@fortawesome/free-solid-svg-icons';\r\nimport { Button } from 'reactstrap';\r\nimport { useAlert } from 'react-alert';\r\n\r\nconst NotifAlertTemplate = ({ style, options, message, close }) => {\r\n const { type } = options;\r\n\r\n return (\r\n\r\n {\r\n setShowMyAlert(!showMyAlert);\r\n }}\r\n >\r\n \r\n \r\n \r\n {\r\n setShowMyAlert(!showMyAlert);\r\n }}\r\n >\r\n Notification Status \r\n \r\n \r\n
\r\n\r\n \r\n System Notifications:
\r\n \r\n RezRate Sounds:
\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n System Notifications\r\n \r\n
\r\n RezRate Sounds\r\n \r\n {\r\n testAlert();\r\n }}\r\n >\r\n Test Notifications!\r\n \r\n
\r\n \r\n \r\n \r\n\r\n \r\n \r\n {/* switches out default logo with user's logo when it's done loading into the browser. Child key must be unique to either element */}\r\n \r\n \r\n {hasLogo && (\r\n getAndSetImgSize()}\r\n />\r\n )}\r\n {!hasLogo && 
}\r\n \r\n \r\n \r\n \r\n \r\n {name &&
\r\n \r\n \r\n \r\n\r\n \r\n {organization}\r\n {isDev() === 1 ? 'DEV' : ''}\r\n
\r\n{name}
}\r\n\r\n\r\n {user && user.DepartmentName && user.DepartmentWebsite && (\r\n {\r\n e.preventDefault();\r\n window.open(urlWithHttpProtocol(user.DepartmentWebsite));\r\n }}\r\n style={{ marginRight: '5px', whiteSpace: 'none' }}\r\n color=\"primary\"\r\n size=\"sm\"\r\n >\r\n Our Website\r\n \r\n )}\r\n {breakUrl && breakUrl.url && breakUrl.url !== '' && breakUrl.buttonText && (\r\n {\r\n e.preventDefault();\r\n window.open(breakUrl.url);\r\n }}\r\n style={{ marginRight: '5px', whiteSpace: 'none' }}\r\n color=\"warning\"\r\n size=\"sm\"\r\n >\r\n {breakUrl.buttonText}\r\n \r\n )}\r\n\r\n {showNotifTester ?
\r\n \r\n \r\n {name &&
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default Header;\r\n","import { connect } from 'react-redux';\r\nimport header from './header';\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n user: state.userInfo.user,\r\n breakUrl: state.adminUser.breakUrl,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(header);\r\n","// these types are used to determined what endpoints and value should be passed to the backend\r\n\r\nconst UserPhotoTypes = {\r\n AdminCandidate: 'AdminCandidate',\r\n AdminEvaluator: 'AdminEvaluator',\r\n Candidate: 'Candidate',\r\n DepartmentLogo: 'DepartmentLogo',\r\n OrganizationLogo: 'OrganizationLogo',\r\n Applicant: 'Applicant',\r\n};\r\n\r\nexport default UserPhotoTypes;\r\n","import { faCloudUploadAlt, faPortrait, faSpinner, faTrash, faTrashAlt } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport { useDropzone } from 'react-dropzone';\r\nimport Swal from 'sweetalert2';\r\nimport { useAuth0 } from '../../../auth0/reactAuth0Spa';\r\nimport { useKindeAuth } from '@kinde-oss/kinde-auth-react';\r\nimport { formatBearerToken, timer } from '../../../Common.functions';\r\nimport { DepartmentContext } from '../../../DepartmentWrapper';\r\nimport { postDataAgnostic } from '../../../Services/dataApi';\r\nimport UserPhotoTypes from './UserPhotoTypes';\r\n\r\nconst { AdminCandidate, Applicant, AdminEvaluator, Candidate, DepartmentLogo, OrganizationLogo } = UserPhotoTypes;\r\n\r\nconst endpointData = {};\r\nendpointData[AdminCandidate] = {\r\n url: 'files/admin/candidate/photo',\r\n};\r\nendpointData[AdminEvaluator] = {\r\n url: 'files/admin/user/photo',\r\n};\r\nendpointData[Candidate] = {\r\n url: 'files/candidate/photo',\r\n};\r\nendpointData[DepartmentLogo] = {\r\n url: 'department/season/department/logo',\r\n};\r\nendpointData[OrganizationLogo] = {\r\n url: 'organization/logo',\r\n};\r\nendpointData[Applicant] = {\r\n url: 'applicant/photo',\r\n};\r\n\r\nasync function checkImage(url, callback) {\r\n if (url) {\r\n callback(true);\r\n return true;\r\n }\r\n callback(false);\r\n return false;\r\n // Check the response status\r\n\r\n // var request = new XMLHttpRequest();\r\n // return new Promise((resolve, reject) => {\r\n // request.open('GET', url, true);\r\n // request.send();\r\n // request.onload = function() {\r\n // if (request.status == 200) {\r\n // //if(statusText == OK)\r\n // callback(true);\r\n // return true;\r\n // } else {\r\n // callback(false);\r\n\r\n // return false;\r\n // }\r\n // };\r\n // });\r\n}\r\n\r\n// when using this component use the type in the adjacent file UserPhotoTypes.js to pass in the type\r\nconst UserPhoto = ({\r\n isDisabled,\r\n id,\r\n photoUrl,\r\n placeholderImage,\r\n callback,\r\n type,\r\n imgStyle,\r\n setDeptConfig,\r\n externalAPI = false,\r\n pk_Organization,\r\n pk_Department,\r\n handleDelete,\r\n showDeleteButton = true,\r\n}) => {\r\n const [file, setFile] = useState([]);\r\n const [userPhotoUrl, setUserPhotoUrl] = useState(null);\r\n const [userId, setUserId] = useState(null);\r\n const [isUploading, setIsUploading] = useState(false);\r\n const [hasDroppedFile, setHasDroppedFile] = useState(false);\r\n\r\n const dContext = useContext(DepartmentContext);\r\n\r\n const { getToken } = useKindeAuth();\r\n const { getTokenSilently } = useAuth0();\r\n\r\n const needsAuth = type !== Candidate;\r\n\r\n // setting the variable locally becuase I don't want to have to reply on the callback updating the photoUrl variable.\r\n // this way we can set it locally when it's posted and make sure it's always changed to the current\r\n useEffect(() => {\r\n setUserPhotoUrl(photoUrl);\r\n }, [photoUrl]);\r\n\r\n useEffect(() => {\r\n if (id) {\r\n setUserId(id);\r\n }\r\n }, [id]);\r\n\r\n const formatAuth = (token) => {\r\n if (token) {\r\n return formatBearerToken(token);\r\n } else {\r\n return {};\r\n }\r\n };\r\n\r\n const handleUriPropagation = (uri) => {\r\n const photoIsReady = uri ? true : false;\r\n\r\n if (!photoIsReady) {\r\n return false;\r\n }\r\n\r\n if (setDeptConfig) {\r\n setDeptConfig((prevState) => {\r\n // eslint-disable-next-line\r\n let clone = structuredClone(prevState);\r\n clone.DepartmentLogo = uri;\r\n return clone;\r\n });\r\n }\r\n // setTimeout(() => {\r\n setUserPhotoUrl(uri);\r\n setIsUploading(false);\r\n\r\n // provide parent componets with id and photo url if they need it\r\n if (callback) {\r\n callback(id, uri);\r\n }\r\n return true;\r\n\r\n // await checkImage(uri, (photoIsReady) => {\r\n // console.log('checkImage photoIsReady:', photoIsReady);\r\n\r\n // if (!photoIsReady) {\r\n // return false;\r\n // }\r\n\r\n // if (setDeptConfig) {\r\n // setDeptConfig((prevState) => {\r\n // // eslint-disable-next-line\r\n // let clone = structuredClone(prevState);\r\n // clone.DepartmentLogo = uri;\r\n // return clone;\r\n // });\r\n // }\r\n // // setTimeout(() => {\r\n // setUserPhotoUrl(uri);\r\n // setIsUploading(false);\r\n\r\n // // provide parent componets with id and photo url if they need it\r\n // if (callback) {\r\n // callback(id, uri);\r\n // }\r\n // return true;\r\n // });\r\n };\r\n\r\n const postPhoto = async (fileData, mimeType) => {\r\n const url = endpointData[type] ? endpointData[type].url : null;\r\n if (!url) {\r\n Swal.fire({\r\n title: 'Error',\r\n text: `No URL provided for this photo type: ${type}`,\r\n icon: 'error',\r\n });\r\n return;\r\n }\r\n setIsUploading(true);\r\n let token = null;\r\n\r\n if (type === Applicant) {\r\n token = await getToken();\r\n } else if (needsAuth) {\r\n token = await getTokenSilently();\r\n } // Add Kinde here for Applicant\r\n\r\n let seasonPk = null;\r\n let departmentPk = null;\r\n\r\n if (dContext) {\r\n if (dContext.season && dContext.season.pk_Season) {\r\n seasonPk = dContext.season.pk_Season;\r\n }\r\n if (dContext.department && dContext.department.pk_Department) {\r\n departmentPk = dContext.department.pk_Department;\r\n }\r\n }\r\n\r\n if (pk_Department) {\r\n departmentPk = pk_Department;\r\n }\r\n\r\n postDataAgnostic(\r\n endpointData[type].url,\r\n { pk_Organization, pk_Department: departmentPk, pk_Season: seasonPk, userId: id, mimeType },\r\n fileData,\r\n {\r\n 'content-type': 'multipart/form-data',\r\n ...formatAuth(token),\r\n },\r\n )\r\n .then(async (result) => {\r\n const { uri } = result.data;\r\n let count = 0;\r\n let imageHasLoaded = false;\r\n\r\n while (count < 500 && (!imageHasLoaded || count > 10)) {\r\n try {\r\n imageHasLoaded = handleUriPropagation(uri);\r\n\r\n if (!imageHasLoaded) {\r\n await timer(200);\r\n count += 1;\r\n } else {\r\n return;\r\n }\r\n } catch (err) {\r\n console.log('imageHasLoaded err: ', err);\r\n }\r\n count += 1;\r\n }\r\n\r\n // only do this if !imageHasUploaded. Otherwise, handleUriPropagation will handle it\r\n if (!imageHasLoaded) {\r\n setIsUploading(false);\r\n\r\n // provide parent componets with id and photo url if they need it\r\n if (callback) {\r\n callback(id, uri);\r\n }\r\n }\r\n\r\n // NOTE ON THIS TIMEOUT: for some reason, when uploading fo azure blob storage and mounting the returned image url,\r\n // ocassionally it appears that the image is not ready to be mounted. As a quick-fix for this, we're implementing\r\n // a timeout to allow the image time to become an available resource. This is not ideal\r\n // setTimeout(() => {\r\n\r\n // }, 1000);\r\n\r\n // }, 2000);\r\n })\r\n .catch((err) => {\r\n console.log('err: ', err);\r\n if (callback) {\r\n callback(id, null);\r\n }\r\n setIsUploading(false);\r\n });\r\n };\r\n\r\n const singleCandidateObject = (files) => {\r\n const formData = new FormData();\r\n for (var i in files) {\r\n formData.append(`File`, files[i]);\r\n formData.append('w', 1);\r\n formData.append('h', 1);\r\n formData.append('x', 1);\r\n formData.append('y', 1);\r\n }\r\n return formData;\r\n };\r\n\r\n const initiateReplacement = (acceptedFiles) => {\r\n const incorrectLength = acceptedFiles.length !== 1;\r\n const incorrectBytes = acceptedFiles[0].size > 5000000;\r\n if (incorrectBytes) {\r\n Swal.fire('Oops...', `It looks like the file might be a little too big, make sure it's under 5mb`, 'error');\r\n return;\r\n }\r\n\r\n if (incorrectLength) {\r\n Swal.fire('Oops,', 'Please make sure you only upload a single image file', 'error');\r\n return;\r\n }\r\n\r\n const fileData = singleCandidateObject(acceptedFiles);\r\n const { type } = acceptedFiles[0];\r\n\r\n postPhoto(fileData, type);\r\n };\r\n\r\n const { getRootProps, getInputProps } = useDropzone({\r\n accept: ['image/png', 'image/jpg', 'image/jpeg'],\r\n onDrop: (acceptedFiles) => {\r\n setHasDroppedFile(true);\r\n if (!acceptedFiles || acceptedFiles.length <= 0) {\r\n Swal.fire({\r\n title: 'Invalid File Type',\r\n icon: 'error',\r\n type: 'error',\r\n text: 'Please Use PNG or JPG',\r\n });\r\n } else if (photoUrl) {\r\n Swal.fire({\r\n title: 'Warning: Uploading a new photo will replace the current one',\r\n showDenyButton: true,\r\n showCancelButton: true,\r\n confirmButtonText: `Replace`,\r\n denyButtonText: `Don't Replace`,\r\n }).then((result) => {\r\n /* Read more about isConfirmed, isDenied below */\r\n if (result.value) {\r\n initiateReplacement(acceptedFiles);\r\n }\r\n });\r\n } else {\r\n initiateReplacement(acceptedFiles);\r\n }\r\n },\r\n });\r\n\r\n const imageStyle = imgStyle ? imgStyle : { width: 100, height: 100, objectFit: 'contain' };\r\n\r\n if (isUploading) {\r\n return (\r\n {name}
}\r\n\r\n\r\n {user && user.DepartmentName && user.DepartmentWebsite && (\r\n {\r\n e.preventDefault();\r\n window.open(urlWithHttpProtocol(user.DepartmentWebsite));\r\n }}\r\n style={{ whiteSpace: 'none' }}\r\n color=\"primary\"\r\n >\r\n Our Website\r\n \r\n )}\r\n {breakUrl && breakUrl.url && breakUrl.url !== '' && breakUrl.buttonText && (\r\n {\r\n e.preventDefault();\r\n window.open(breakUrl.url);\r\n }}\r\n style={{ whiteSpace: 'none' }}\r\n color=\"warning\"\r\n >\r\n {breakUrl.buttonText}\r\n \r\n )}\r\n {showNotifTester ?
\r\n \r\n
\r\n )\r\n ) : null}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default UserPhoto;\r\n\r\nUserPhoto.propTypes = {\r\n id: PropTypes.number,\r\n photoUrl: PropTypes.string,\r\n};\r\n","import { faCloudUploadAlt, faSpinner } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport Axios from 'axios';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { useDropzone } from 'react-dropzone';\r\nimport { useAuth0 } from '../../auth0/reactAuth0Spa';\r\nimport { Col, Row } from 'reactstrap';\r\nimport { fetchDataAgnostic, constructUrl } from '../../Services/dataApi';\r\nimport Swal from 'sweetalert2';\r\nimport Error from '../../Body/Statuses/Error';\r\nimport Loading from '../../Body/Statuses/Loading';\r\nimport CandidateHeader from '../../Header/header.container';\r\nimport UserPhotoTypes from '../../Body/DragAndDropFiles/UserPhoto/UserPhotoTypes';\r\nimport UserPhoto from '../../Body/DragAndDropFiles/UserPhoto/UserPhoto';\r\nimport { useLocation } from 'react-router-dom';\r\n\r\nconst thumb = {};\r\n\r\nconst thumbInner = {};\r\n\r\nconst CandidatePhoto = ({ match, user, setUser }) => {\r\n const [hasPhoto, setHasPhoto] = useState(false);\r\n const [isUploading, setIsUploading] = useState(false);\r\n const [isLoading, setIsLoading] = useState(true);\r\n const [isDemo, setIsDemo] = useState(false);\r\n const [error, setError] = useState(false);\r\n const [noUser, setNoUser] = useState(false);\r\n const [isPosting, setIsPosting] = useState(false);\r\n const [currentProgress, setCurrentProgress] = useState(0);\r\n const [files, setFiles] = useState([]);\r\n\r\n const query = new URLSearchParams(useLocation().search);\r\n const isPreview = query.get('preview');\r\n const { PhotoUrl } = user || {};\r\n\r\n useEffect(() => {\r\n if (PhotoUrl != null && PhotoUrl.trim() !== '') {\r\n setHasPhoto(true);\r\n } else {\r\n setHasPhoto(false);\r\n }\r\n }, [PhotoUrl]);\r\n\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n\r\n const thumbs = () => {\r\n return files.map((file) => (\r\n Click or Drag
\r\n\r\n
\r\n ));\r\n };\r\n\r\n const singleCandidateObject = (files) => {\r\n const formData = new FormData();\r\n for (var i in files) {\r\n formData.append(`photo`, files[i]);\r\n formData.append('w', 1);\r\n formData.append('h', 1);\r\n formData.append('x', 1);\r\n formData.append('y', 1);\r\n }\r\n return formData;\r\n };\r\n\r\n const fileUpload = (formData) => {\r\n // return;\r\n // const url = 'https://devapi.rezrate.com/files';\r\n const isLocal = window.location.href.includes('localhost:3000/');\r\n const url = isLocal ? 'http://localhost:8080/files/candidate' : 'https://devapi.rezrate.com/files/candidate';\r\n setIsPosting(true);\r\n\r\n const config = {\r\n headers: {\r\n 'Content-Type': 'multipart/form-data',\r\n 'Access-Control-Allow-Origin': '*',\r\n },\r\n onUploadProgress: function(progressEvent) {\r\n var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);\r\n setCurrentProgress(percentCompleted);\r\n },\r\n };\r\n return Axios.post(url, formData, config)\r\n .then((res) => {\r\n postToFM(res.data.uri);\r\n })\r\n .catch((err) => {\r\n Swal.fire('Oops', 'Something went wrong. Please try again or contact support', 'error').then(() => {});\r\n return false;\r\n })\r\n .finally(() => {\r\n setIsPosting(false);\r\n });\r\n };\r\n\r\n const { getRootProps, getInputProps } = useDropzone({\r\n accept: {\r\n 'image/jpeg': [],\r\n 'image/png': [],\r\n },\r\n onDrop: (acceptedFiles) => {\r\n const incorrectLength = acceptedFiles.length !== 1;\r\n const incorrectBytes = acceptedFiles[0].size > 5000000;\r\n if (incorrectBytes) {\r\n Swal.fire('Oops...', `It looks like the file might be a little too big, make sure it's under 5mb`, 'error');\r\n return;\r\n }\r\n\r\n if (incorrectLength) {\r\n Swal.fire('Oops,', 'Please make sure you only upload a single image file', 'error');\r\n return;\r\n }\r\n setFiles(\r\n acceptedFiles.map((file) =>\r\n Object.assign(file, {\r\n preview: URL.createObjectURL(file),\r\n }),\r\n ),\r\n );\r\n\r\n // const fileData = singleCandidateObject(acceptedFiles);\r\n postToFM(acceptedFiles[0]);\r\n },\r\n });\r\n\r\n const succesMessage = () => {\r\n Swal.fire('Success!', 'Your new file has been uploaded', 'success');\r\n };\r\n\r\n const errorMessage = () => {\r\n Swal.fire('Oops,', 'Something went wrong, please try again later or contact support', 'error');\r\n };\r\n\r\n const postToFM = (fileData) => {\r\n try {\r\n const config = {\r\n headers: {\r\n 'Content-Type': 'multipart/form-data',\r\n 'Access-Control-Allow-Origin': '*',\r\n },\r\n onUploadProgress: function(progressEvent) {\r\n var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);\r\n setCurrentProgress(percentCompleted);\r\n },\r\n };\r\n\r\n const formData = new FormData();\r\n formData.append('File', fileData);\r\n setIsUploading(true);\r\n const { id } = match.params;\r\n const urlToSend = `${constructUrl('files/candidate')}?id=${id}`;\r\n\r\n Axios.post(urlToSend, formData, config)\r\n .then((result) => {\r\n setUser(result.data);\r\n })\r\n .catch((err) => {\r\n setError(true);\r\n })\r\n .finally(() => {\r\n setIsUploading(false);\r\n });\r\n } catch (err) {}\r\n };\r\n\r\n useEffect(() => {\r\n const { id = 'DEMO' } = match.params;\r\n if (id.toUpperCase() === 'DEMO') {\r\n setIsDemo(true);\r\n setUser({});\r\n setIsLoading(false);\r\n return;\r\n }\r\n\r\n fetchDataAgnostic('candidate/photo', { CandidateUUID: id })\r\n .then((result) => {\r\n setUser(result.data);\r\n setIsLoading(false);\r\n })\r\n .catch((err) => {\r\n setError(true);\r\n });\r\n }, []);\r\n\r\n if (isLoading) {\r\n return \r\n 
\r\n
\r\n \r\n
\r\n {isPreview && (\r\n \r\n
\r\n )}\r\n \r\n \r\n You are acting on behalf of {`${lastName}${firstName && lastName ? ', ' : ''}${firstName}`}.\r\n
\r\n\r\n
\r\n \r\n {!hasPhoto && (\r\n
\r\n \r\n {user.NameFirst || 'Welcome'}, here you can upload a photo of yourself\r\n that will be used within RezRATE. This photo will be seen by those you interview with, so make sure\r\n you look your best!\r\n
\r\n )}\r\n {hasPhoto && (\r\n\r\n {user.NameFirst || 'Welcome'}, it looks like we already have a photo\r\n for you. You can replace it if you have a better one.\r\n
\r\n )}\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default BulkUploadPreview;\r\n","import React, { Component } from 'react';\r\n\r\nclass EmbededPdf extends Component {\r\n shouldComponentUpdate(nextProps, nextState) {\r\n // Pdfs have weird behavior, need this to make sure it doesn't keep rerendering\r\n if (\r\n nextProps.thumbnail.size === this.props.thumbnail.size &&\r\n nextProps.thumbnail.name === this.props.thumbnail.name\r\n ) {\r\n return false;\r\n } else {\r\n return true;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n {files.length} files selected
\r\n\r\n {filesWithUser.length > 0 && (\r\n
\r\n \r\n \r\n \r\n
\r\n )}\r\n {filesWillOverwrite.length > 0 && (\r\n New Matches: {filesWithUser.length}
\r\n\r\n \r\n \r\n
\r\n
\r\n | \r\n | Include | \r\nFile Name | \r\nCandidate | \r\n
|---|
\r\n \r\n \r\n
\r\n )}\r\n {filesWithoutUser.length > 0 && (\r\n Updating: {filesWillOverwrite.length}
\r\n\r\n \r\n \r\n
\r\n
\r\n | \r\n | Include | \r\nFile Name | \r\nCandidate | \r\n
|---|
\r\n \r\n \r\n
\r\n )}\r\n Unable To Match: {filesWithoutUser.length}
\r\n\r\n \r\n \r\n
\r\n
\r\n | \r\n | \r\n Include | \r\nFile Name | \r\n
|---|
\r\n {\r\n e.preventDefault();\r\n cancelCurrentSet();\r\n setItemPreviewPopup(false);\r\n }}\r\n >\r\n Cancel\r\n \r\n {\r\n e.preventDefault();\r\n // uploadDocuments();\r\n const allFilesCopy = _.cloneDeep(allFiles);\r\n const last = allFilesCopy.length - 1;\r\n allFilesCopy[last] = [...filesWithUser, ...filesWillOverwrite];\r\n setFiles(allFilesCopy);\r\n uploadFiles(allFilesCopy);\r\n setItemPreviewPopup(false);\r\n }}\r\n >\r\n Continue\r\n \r\n
\r\n What do you want to do with ${item.DocumentTypeName}?
`,\r\n // confirmButtonText: 'View',\r\n // showCloseButton: true,\r\n // showDenyButton: true,\r\n // denyButtonText: `Replace`,\r\n // showCancelButton: true,\r\n // cancelButtonText: 'Cancel',\r\n // }).then((results) => {\r\n // if (results.isConfirmed) {\r\n // const { FullUrl } = file;\r\n // window.open(FullUrl, '_blank').focus();\r\n // } else if (results.isDenied) {\r\n // } else if (results.isDismissed) {\r\n // }\r\n // });\r\n // };\r\n\r\n const determineDragText = (hasFile) => {\r\n if (hasFile) return 'Replace Document';\r\n\r\n return 'Click or Drag';\r\n };\r\n\r\n const documentContent = () => {\r\n if (preventClick) {\r\n return (\r\n\r\n \r\n
\r\n \r\n );\r\n }\r\n\r\n if (chooseViewOrReplace) {\r\n return (\r\n \r\n
\r\n \r\n );\r\n }\r\n\r\n if (confirmDelete) {\r\n return (\r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n\r\n const hasFile = file && file.Name;\r\n\r\n return (\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n Delete?
\r\n\r\n
\r\n Are you sure you want to delete {file.DocumentTypeName}?
\r\n\r\n
\r\n \r\n {\r\n e.preventDefault();\r\n setPreventClick(true);\r\n deleteFile(file);\r\n setPreventClick(false);\r\n }}\r\n style={{ backgroundColor: '#d11a2a' }}\r\n >\r\n Yes\r\n \r\n
\r\n \r\n {\r\n e.preventDefault();\r\n setConfirmDelete(false);\r\n }}\r\n style={{ backgroundColor: '#32CD32' }}\r\n >\r\n No\r\n \r\n
\r\n \r\n {\r\n e.preventDefault();\r\n const { FullUrl, Name, pk_File, fk_DocumentType } = file;\r\n\r\n ///viewFile/:pk_File/:pk_DocumentType/:fileName\r\n // window.open(FullUrl, '_blank').focus();\r\n\r\n // history.push(`/viewFile/${pk_File}/${pk_DocumentType}/${Name}`);\r\n window\r\n .open(`/viewFile/${selectedCandidate.pk_Candidate}/${pk_File}/${pk_DocumentType}/${Name}`, '_blank')\r\n .focus();\r\n }}\r\n >\r\n View Document\r\n \r\n
\r\n )}\r\n \r\n {determineDragText(hasFile)}
\r\n {/* {file.Hide && (\r\n\r\n
\r\n )} */}\r\n \r\n \r\n \r\n \r\n );\r\n };\r\n\r\n const logoContent = () => {\r\n if (validDepartment === null) {\r\n return \r\n
\r\n Hidden
\r\nNo Valid Department
;\r\n }\r\n if (!validDepartment) {\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n }\r\n if (confirmReplace) {\r\n return (\r\n Invalid Department
\r\n{file.DocumentTypeName}
\r\n {/* {file.Hide && (\r\n\r\n
\r\n )} */}\r\n \r\n
\r\n Hidden
\r\n\r\n \r\n
\r\n \r\n );\r\n }\r\n if (currentLogo.deptLogoExists) {\r\n const fullLogoUrl = currentLogo.logoUrl;\r\n return (\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n Replace
\r\n\r\n
\r\n \r\n Are you sure you want to replace the current file ({file.DocumentTypeName})?\r\n
\r\n\r\n
\r\n \r\n {\r\n e.preventDefault();\r\n setPreventClick(true);\r\n const deleted = await deleteFile(file);\r\n const fileSent = await sendFile();\r\n Promise.all([deleted, fileSent]).then((values) => {\r\n setPreventClick(false);\r\n setConfirmReplace(false);\r\n });\r\n }}\r\n style={{ backgroundColor: '#d11a2a' }}\r\n >\r\n Yes\r\n \r\n
\r\n \r\n {\r\n e.preventDefault();\r\n setConfirmReplace(false);\r\n setPendingFile(null);\r\n }}\r\n style={{ backgroundColor: '#32CD32' }}\r\n >\r\n No\r\n \r\n
\r\n \r\n \r\n \r\n \r\n 
\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 \r\n \r\n );\r\n };\r\n\r\n const determineContent = () => {\r\n if (uploadLogo) {\r\n return logoContent();\r\n } else {\r\n return documentContent();\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (attachedDoc) {\r\n setFile(attachedDoc);\r\n }\r\n }, [attachedDoc]);\r\n const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });\r\n return (\r\n Click or Drag
\r\n{file.DocumentTypeName}
\r\n {/* {file.Hide && (\r\n\r\n
\r\n )} */}\r\n \r\n
\r\n Hidden
\r\n\r\n
\r\n );\r\n } else if (documentTypes && documentTypes.length > 0) {\r\n return (\r\n | Delete | \r\nType | \r\nFile | \r\nFilename | \r\nLast Updated | \r\n
|---|---|---|---|---|
| \r\n {attachedDoc && (\r\n | \r\n \r\n {item.DocumentTypeName}\r\n \r\n {Hide ? '(Hidden)' : ''}\r\n | \r\n \r\n | \r\n {Name && Name.split('-UUID-')[1]} | \r\n\r\n {attachedDoc\r\n ? moment.tz(updatedAt || createdAt, moment.tz.guess()).format('MMM DD, YYYY hh:mm A')\r\n : ' '}\r\n {/* {updatedAt\r\n ? moment.tz(updatedAt).format('MM/DD/yyyy hh:mm:ss A')\r\n : createdAt\r\n ? moment.tz(createdAt, null).format('MM/DD/yyyy hh:mm:ss A')\r\n : ' '} */}\r\n | \r\n
No Document Types
;\r\n }\r\n };\r\n return (\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SingleCandidateDragAndDrop;\r\n","import { faBullseye, faCheckSquare, faSpinner, faTimes, faUpload } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { post } from 'axios';\r\nimport _ from 'lodash';\r\nimport React, { useCallback, useEffect, useState, useContext } from 'react';\r\nimport Dropzone, { useDropzone } from 'react-dropzone';\r\nimport { formatBearerToken } from '../../Common.functions';\r\nimport Popup from 'reactjs-popup';\r\nimport { Col, Form, FormGroup, Input, Row, Table, Button } from 'reactstrap';\r\nimport styled from 'styled-components';\r\nimport { DepartmentContext } from '../../DepartmentWrapper';\r\nimport Swal from 'sweetalert2';\r\nimport { fetchDataAgnostic, constructUrl } from '../../Services/dataApi';\r\nimport BulkUploadPreview from './BulkUploadPreview';\r\nimport EmbededPdf from './Pdf/EmbededPdf/EmbededPdf';\r\nimport SingleCandidateDragAndDrop from './SingleCandidateDragAndDrop';\r\nimport { useAuth0 } from '../../auth0/reactAuth0Spa';\r\n\r\nconst orphanedMessage = 'No Associated Users Found';\r\n\r\nconst PopupWrapper = styled.div`\r\n // .popup-overlay {\r\n // .popup-content {\r\n // max-height: 100%;\r\n // overflow: scroll;\r\n // }\r\n // }\r\n`;\r\n\r\nconst thumbsContainer = {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n flexWrap: 'wrap',\r\n marginTop: 16,\r\n};\r\n\r\nconst thumb = {\r\n display: 'inline-flex',\r\n borderRadius: 2,\r\n border: '1px solid #eaeaea',\r\n marginBottom: 8,\r\n marginRight: 8,\r\n width: 150,\r\n height: 100,\r\n padding: 4,\r\n boxSizing: 'border-box',\r\n};\r\n\r\nconst thumbInner = {\r\n display: 'flex',\r\n minWidth: 0,\r\n overflow: 'hidden',\r\n};\r\n\r\nconst img = {\r\n display: 'block',\r\n width: 'auto',\r\n height: '100%',\r\n};\r\n\r\nconst getUrlParameter = (name) => {\r\n name = name.replace(/[\\[]/, '\\\\[').replace(/[\\]]/, '\\\\]');\r\n var regex = new RegExp('[\\\\?&]' + name + '=([^&#]*)');\r\n var results = regex.exec(window.location.search);\r\n return results === null ? '' : decodeURIComponent(results[1].replace(/\\+/g, ' '));\r\n};\r\n\r\nconst DragAndDropFiles = (props, { embedded }) => {\r\n const {\r\n uploadLogo,\r\n selectedCandidate,\r\n isSingleCandidate,\r\n activeDepartment,\r\n getCandidateDetails,\r\n documentTypes = [],\r\n setDocumentTypes,\r\n attachedDocuments,\r\n abortController,\r\n isLoading,\r\n } = props;\r\n const [files, setFiles] = useState([]);\r\n const [secret, setSecret] = useState(window.location.pathname.split('/')[2]);\r\n const [finished, setFinished] = useState(false);\r\n const [numOfErrors, setNumOfErrors] = useState(0);\r\n const [currentSet, setCurrentSet] = useState(0);\r\n const [percentageUploaded, setPercentageUploaded] = useState(0.05);\r\n const [isPosting, setIsPosting] = useState(false);\r\n const [fileType, setFileType] = useState();\r\n const [matchType, setMatchType] = useState(null);\r\n const [pk_UUID_FM, setPk_UUID_FM] = useState(null);\r\n // const [documentTypes, setDocumentTypes] = useState([]);\r\n const [error, setError] = useState(false);\r\n const [department, setDepartment] = useState(null);\r\n const [candidateFiles, setCandidateFiles] = useState([]);\r\n const [currentLogo, setCurrentlogo] = useState({});\r\n const [organization, setOrganization] = useState(null);\r\n const [filesInserted, setFilesInserted] = useState([]);\r\n const [filesWithoutAssociatedCandidates, setFilesWithoutAssociatedCandidates] = useState([]);\r\n const [displayResults, setDisplayResults] = useState(false);\r\n const [showFileList, setShowFileList] = useState(false);\r\n const [candidateInfo, setCandidateInfo] = useState(null);\r\n const [sessionID, setSessionID] = useState(null);\r\n const [selectedDocumentType, setSelectedDocumentType] = useState(null);\r\n const [isBulkUploader, setIsBulkUploader] = useState(false);\r\n const [currentProgress, setCurrentProgress] = useState(0);\r\n const [tempToken, setTempToken] = useState(null);\r\n // const [isSingleCandidate, setIsSingleCandidate] = useState(null);\r\n const [itemPreviewPopup, setItemPreviewPopup] = useState(false);\r\n const [isAuthenticated, setIsAuthenticated] = useState(true);\r\n\r\n const dContext = useContext(DepartmentContext);\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n\r\n useEffect(() => {\r\n if (documentTypes.length > 0) {\r\n const documentTypesCopy = JSON.parse(JSON.stringify(documentTypes[0]));\r\n setSelectedDocumentType(0);\r\n }\r\n }, [documentTypes]);\r\n\r\n // useEffect(() => {\r\n // if (selectedCandidate) {\r\n // }\r\n // }, [JSON.stringify(selectedCandidate)]);\r\n\r\n const getLogoInformation = async (paramDepartment) => {\r\n const chosenDepartment = paramDepartment || department;\r\n const logoObject = await getLogo(chosenDepartment);\r\n setCurrentlogo(logoObject);\r\n setCandidateFiles([logoObject]);\r\n setFiles([logoObject]);\r\n };\r\n\r\n const getCandidateInformation = () => {\r\n getCandidateDetails(selectedCandidate);\r\n };\r\n\r\n const getIDByCondition = (documentName) => {\r\n const nameSplit = documentName.split('_');\r\n for (let i = 0; i < nameSplit.length; i++) {\r\n const currentItem = nameSplit[i];\r\n const isNum = /^\\d+$/.test(currentItem);\r\n if (currentItem.length > 4 && currentItem.length < 10 && isNum) {\r\n return currentItem;\r\n }\r\n }\r\n return false;\r\n };\r\n\r\n const getIDFromFileName = (fileName) => {\r\n const pieces = fileName.split('_');\r\n\r\n const regex = /^[^0-9]{2}([0-9]+)/;\r\n let sf_match_id = false;\r\n pieces.forEach((piece) => {\r\n const isNum = /^\\d+$/.test(piece);\r\n if (!isNum && !sf_match_id) {\r\n const match = piece.match(regex);\r\n if (match && match[1] && !sf_match_id) {\r\n sf_match_id = match[1];\r\n }\r\n } else if (!sf_match_id) {\r\n sf_match_id = piece;\r\n }\r\n });\r\n return sf_match_id;\r\n };\r\n\r\n const getAAMCIDFromFileName = (fileName) => {\r\n const nameSplit = fileName.split('_');\r\n for (let i = 0; i < nameSplit.length; i++) {\r\n const currentItem = nameSplit[i];\r\n const isNum = /^\\d+$/.test(currentItem);\r\n if (currentItem.length > 4 && currentItem.length < 10 && isNum) {\r\n return currentItem;\r\n }\r\n }\r\n return false;\r\n };\r\n\r\n const getLogo = (department) => {\r\n return fetchDataAgnostic('files/logo', { departmentUUID: department }, null, { abortController: abortController })\r\n .then((res) => {\r\n return res.data;\r\n })\r\n .catch((err) => {});\r\n };\r\n\r\n const uploadFiles = (files) => {\r\n const formData = multiCandidateObject(files);\r\n fileUpload(formData);\r\n };\r\n\r\n const initiateFileUpload = (files, documentTypePk, isBulkUploader) => {\r\n if (files.length > 0 && isPosting === false) {\r\n if (uploadLogo) {\r\n const formData = logoObject(files, documentTypePk);\r\n return fileUpload(formData);\r\n } else if (isSingleCandidate) {\r\n const formData = singleCandidateObject(files, documentTypePk);\r\n\r\n return fileUpload(formData);\r\n } else {\r\n fileUploadBulk(files, isBulkUploader);\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (files[currentSet] !== undefined) {\r\n fileUpload();\r\n }\r\n }, [currentSet]);\r\n\r\n // NOT BEING USED. IS ONLY MENTIONED IN COMMENTED CODE\r\n const checkIfUserExistsSFMatch = (allFiles) => {\r\n const selectedFiles = allFiles[currentProgress];\r\n const deepCloneFile = _.cloneDeep(selectedFiles);\r\n const id_Array = [];\r\n deepCloneFile.forEach((file) => {\r\n const SFMatchID = getIDByCondition(file.name);\r\n id_Array.push(SFMatchID);\r\n });\r\n const { department, season } = dContext;\r\n const { pk_Department } = department;\r\n const { pk_Season } = season;\r\n fetchDataAgnostic('candidate/all/ ', {\r\n id_Array,\r\n selectedDocumentType,\r\n type: 'sfMatch',\r\n pk_Department,\r\n organization,\r\n })\r\n .then((results) => {\r\n deepCloneFile.forEach((file) => {\r\n let userAssociated = false;\r\n const SFMatchID = getIDByCondition(file.name);\r\n results.data.forEach((resultItem) => {\r\n if (resultItem.SFMatchID === SFMatchID) {\r\n file['userInfo'] = resultItem;\r\n userAssociated = true;\r\n if (resultItem.pk_File) {\r\n file['existingFile'] = true;\r\n }\r\n file['checked'] = true;\r\n }\r\n });\r\n file['userAssociated'] = userAssociated;\r\n });\r\n\r\n const deepCloneAllFiles = _.cloneDeep(files);\r\n deepCloneAllFiles[currentProgress] = deepCloneFile;\r\n setFiles(deepCloneAllFiles);\r\n setItemPreviewPopup(true);\r\n })\r\n .catch((err) => {});\r\n };\r\n\r\n const checkIfUserExistsAAMCID = (allFiles) => {\r\n const selectedFiles = allFiles[currentProgress];\r\n const deepCloneFile = _.cloneDeep(selectedFiles);\r\n const id_Array = deepCloneFile.map((file) => {\r\n const AAMCID = getIDByCondition(file.name);\r\n return AAMCID;\r\n });\r\n\r\n const { department, season } = dContext;\r\n const { pk_Department } = department;\r\n const { pk_Season } = season;\r\n fetchDataAgnostic('candidate/all/byExternalID', {\r\n id_Array,\r\n selectedDocumentType,\r\n type: 'AAMCID',\r\n department,\r\n organization,\r\n pk_Department,\r\n })\r\n .then((results) => {\r\n deepCloneFile.forEach((file) => {\r\n let userAssociated = false;\r\n const AAMCID = getIDByCondition(file.name);\r\n results.data.forEach((resultItem) => {\r\n if (resultItem.AAMCID === AAMCID) {\r\n file['userInfo'] = resultItem;\r\n userAssociated = true;\r\n if (resultItem.pk_File) {\r\n file['existingFile'] = true;\r\n }\r\n file['checked'] = true;\r\n }\r\n });\r\n file['userAssociated'] = userAssociated;\r\n });\r\n\r\n const deepCloneAllFiles = _.cloneDeep(files);\r\n deepCloneAllFiles[currentProgress] = deepCloneFile;\r\n setFiles(deepCloneAllFiles);\r\n setItemPreviewPopup(true);\r\n })\r\n .catch((err) => {});\r\n };\r\n\r\n const onDrop = useCallback(\r\n (acceptedFiles) => {\r\n setIsBulkUploader(true);\r\n const filesCopy = files.slice();\r\n filesCopy.push(acceptedFiles);\r\n setFiles(filesCopy);\r\n initiateFileUpload(filesCopy, null, true);\r\n },\r\n [selectedDocumentType],\r\n );\r\n // useEffect(() => {\r\n // const secretUUID = getUrlParameter('allow');\r\n // setSecret(secretUUID);\r\n // }, []);\r\n\r\n useEffect(\r\n () => () => {\r\n // Make sure to revoke the data uris to avoid memory leaks\r\n files.forEach((file) => URL.revokeObjectURL(file.preview));\r\n },\r\n [files],\r\n );\r\n\r\n const determineContainer = () => {\r\n if (uploadLogo) {\r\n return 'logos';\r\n }\r\n\r\n return 'newuploadtest';\r\n };\r\n\r\n const multiCandidateObject = (candidates, matchType) => {\r\n const last = candidates.length - 1;\r\n const candidate = candidates[last];\r\n const formData = new FormData();\r\n\r\n for (var i in candidate) {\r\n const currentFile = candidate[i];\r\n const { userInfo } = currentFile;\r\n\r\n if (dContext && dContext.department && dContext.department.ApplicationSystem === 'sf_match') {\r\n const name = getIDFromFileName(currentFile.name);\r\n if (name) {\r\n const SFMatchID = name;\r\n\r\n const payload = {\r\n name: currentFile.name,\r\n SFMatchID: SFMatchID,\r\n department: dContext.department.pk_Department,\r\n container: 'newuploadtest',\r\n checked: currentFile.checked,\r\n matchType: 'SFMatchID',\r\n fk_DocumentType: selectedDocumentType,\r\n };\r\n formData.append(`files`, currentFile, JSON.stringify(payload));\r\n } else {\r\n currentFile.error = true;\r\n setNumOfErrors((prevNumOfErrs) => prevNumOfErrs + 1);\r\n }\r\n } else {\r\n const name = getIDFromFileName(currentFile.name);\r\n const AAMCID = name;\r\n\r\n const payload = {\r\n name: currentFile.name,\r\n AAMCID: AAMCID,\r\n department: dContext.department.pk_Department,\r\n container: 'newuploadtest',\r\n checked: currentFile.checked,\r\n matchType: 'AAMCID',\r\n fk_DocumentType: selectedDocumentType,\r\n };\r\n if (name) {\r\n formData.append(`files`, currentFile, JSON.stringify(payload));\r\n } else {\r\n currentFile.error = true;\r\n setNumOfErrors((prevNumOfErrs) => prevNumOfErrs + 1);\r\n }\r\n }\r\n }\r\n return formData;\r\n };\r\n\r\n const singleCandidateObject = (files, pk_DocumentType) => {\r\n const file = files[0];\r\n const formData = new FormData();\r\n\r\n for (var i in file) {\r\n const fileJson = {\r\n name: file[i].name,\r\n pk_Department: activeDepartment.pk_Department,\r\n container: determineContainer,\r\n pk_Candidate: selectedCandidate.pk_Candidate,\r\n pk_DocumentType: pk_DocumentType,\r\n };\r\n const jsonToSend = JSON.stringify(fileJson);\r\n\r\n formData.append(`File`, file[i], jsonToSend);\r\n }\r\n return formData;\r\n };\r\n\r\n const logoObject = (files, documentTypePk) => {\r\n const file = files[0];\r\n const formData = new FormData();\r\n for (var i in file) {\r\n const jsonToSend = `{ \"name\":\"${\r\n file[i].name\r\n }\", \"checked\": \"true\", \"department\":\"${department}\", \"container\":\"${determineContainer()}\", \"logo\": \"true\"}`;\r\n formData.append(`File`, file[i], jsonToSend);\r\n }\r\n return formData;\r\n };\r\n\r\n const displayResultsTable = (candidates, color, message) => {\r\n const filesHaveAssociatedCandidate = message !== orphanedMessage;\r\n if (!candidates || candidates.length === 0) {\r\n return ;\r\n }\r\n return (\r\n {determineRender()}
\r\n \r\n
\r\n );\r\n };\r\n\r\n const handleSingleCandidateUpload = (data) => {\r\n const { filesInserted, filesWithoutAssociatedCandidates } = data;\r\n setFilesInserted(filesInserted);\r\n setDisplayResults(true);\r\n setCurrentProgress(0);\r\n if (uploadLogo) {\r\n getLogoInformation();\r\n } else {\r\n // if this a bulk uploader than there is no single candidate to fetch\r\n getCandidateInformation();\r\n }\r\n return true;\r\n };\r\n\r\n const handleMutipleCandidateUpload = (data) => {\r\n const { filesInserted, filesWithoutAssociatedCandidates } = data;\r\n setFilesInserted(filesInserted);\r\n setDisplayResults(true);\r\n setFilesWithoutAssociatedCandidates(filesWithoutAssociatedCandidates);\r\n };\r\n\r\n const clearQueue = () => {\r\n setFiles([]);\r\n setCurrentSet(0);\r\n setNumOfErrors(0);\r\n };\r\n\r\n const chunkUpload = async (formData, isBulkUploader, url) => {\r\n return getTokenSilently()\r\n .then((token) => {\r\n const config = {\r\n headers: {\r\n 'Content-Type': 'multipart/form-data',\r\n ...formatBearerToken(token),\r\n },\r\n };\r\n return post(url, formData, config)\r\n .then((res) => {\r\n return res.data;\r\n })\r\n .catch((err) => {\r\n return false;\r\n });\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const fileUploadBulk = async (files, isBulkUploader) => {\r\n let filesAsArray = files[0];\r\n const isLocal = process.env.NODE_ENV !== 'production';\r\n const url = isBulkUploader ? constructUrl('files') : constructUrl('files/candidate/document');\r\n let filesInserted = [];\r\n let filesWithoutAssociatedCandidates = [];\r\n const chunkSize = 5;\r\n const filesLength = filesAsArray.length;\r\n\r\n setIsPosting(true);\r\n\r\n for (let i = 0; i < filesAsArray.length; i += chunkSize) {\r\n const filesChunk = filesAsArray.slice(i, i + chunkSize);\r\n\r\n const filesTogether = [];\r\n filesTogether.push(filesChunk);\r\n const formData = multiCandidateObject(filesTogether, matchType);\r\n\r\n // const formData = multiCandidateObject(files, matchType);\r\n const chunkResult = await chunkUpload(formData, isBulkUploader, url);\r\n\r\n if (!chunkResult) {\r\n Swal.fire('Oops', 'Something went wrong uploading file. Please try again or contact support', 'error').then(\r\n () => {\r\n clearQueue();\r\n setSelectedDocumentType(0);\r\n setIsPosting(false);\r\n setFilesWithoutAssociatedCandidates([]);\r\n setFilesInserted([]);\r\n setDisplayResults(false);\r\n },\r\n );\r\n } else {\r\n filesInserted = [...filesInserted, ...chunkResult.filesInserted];\r\n filesWithoutAssociatedCandidates = [\r\n ...filesWithoutAssociatedCandidates,\r\n ...chunkResult.filesWithoutAssociatedCandidates,\r\n ];\r\n\r\n let decimal = (i + chunkSize) / filesLength;\r\n\r\n // seeing no progress is disconcerting, so make sure the progress is at least 5%\r\n if (decimal < 0.05) {\r\n decimal = 0.05;\r\n } else if (decimal > 1) {\r\n decimal = 1;\r\n }\r\n\r\n setPercentageUploaded(decimal);\r\n }\r\n\r\n // setTimeout(() => { console.log('Upload wait 500ms'); }, 500);\r\n }\r\n\r\n handleMutipleCandidateUpload({ filesInserted, filesWithoutAssociatedCandidates });\r\n\r\n setIsPosting(false);\r\n };\r\n\r\n const fileUpload = (formData, isBulkUploader) => {\r\n // return;\r\n const isLocal = process.env.NODE_ENV !== 'production';\r\n const url = isBulkUploader ? constructUrl('files') : constructUrl('files/candidate/document');\r\n setIsPosting(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n const config = {\r\n headers: {\r\n 'Content-Type': 'multipart/form-data',\r\n ...formatBearerToken(token),\r\n },\r\n onUploadProgress: function(progressEvent) {\r\n var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);\r\n setCurrentProgress(percentCompleted);\r\n },\r\n };\r\n return post(url, formData, config)\r\n .then((res) => {\r\n handleSingleCandidateUpload(res.data);\r\n })\r\n .catch((err) => {\r\n Swal.fire('Oops', 'Something went wrong uploading file. Please try again or contact support', 'error').then(\r\n () => {\r\n clearQueue();\r\n },\r\n );\r\n return false;\r\n })\r\n .finally(() => {\r\n setIsPosting(false);\r\n });\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const progressBar = (i, thumbnail) => {\r\n if (thumbnail && thumbnail.error) {\r\n return \r\n \r\n \r\n \r\n {candidates.map((item) => {\r\n const { FirstName, LastName, data } = item;\r\n const { name } = data;\r\n\r\n return (\r\n
\r\n
\r\n \r\n
\r\n \r\n {message} ({candidates.length})\r\n
\r\n| \r\n {LastName}, {FirstName}\r\n | \r\n )}\r\n{name} | \r\n
\r\n \r\n
\r\n );\r\n };\r\n\r\n const cancelCurrentSet = () => {\r\n // take the items off the array if they cancel the transaction\r\n const fileClone = [...files];\r\n fileClone.splice(currentProgress, 1);\r\n setFiles(fileClone);\r\n };\r\n\r\n const thumbs = () => {\r\n if (files.length === 0) {\r\n return;\r\n }\r\n let thumbnails = [];\r\n for (var i in files) {\r\n thumbnails[i] = files[i].map((file) => {\r\n return Object.assign(file, {\r\n preview: URL.createObjectURL(file),\r\n });\r\n });\r\n }\r\n\r\n const previewNodes = [];\r\n for (var i in thumbnails) {\r\n const nodes = thumbnails[i].map((thumbnail) => {\r\n if (thumbnail.type.includes('pdf')) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n if (thumbnail.type.includes('msword')) {\r\n return (\r\n \r\n
\r\n {thumbnail.name}
\r\n {!isBulkUploader && progressBar(i, thumbnail)}\r\n\r\n \r\n
\r\n );\r\n }\r\n return (\r\n \r\n
\r\n );\r\n });\r\n previewNodes.push(nodes);\r\n }\r\n return previewNodes;\r\n };\r\n\r\n // if (props.uploadLogo) {\r\n // return (\r\n // \r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n {thumbnail.name}
\r\n {progressBar(i, thumbnail)}\r\n\r\n {/*
\r\n \r\n Upload Files
*/}\r\n {!isPosting && !displayResults && (\r\n\r\n
\r\n )}\r\n {isPosting && (\r\n Document Type
\r\n \r\n\r\n \r\n Upload Queue {' '}\r\n
\r\n
\r\n )}\r\n \r\n Upload Queue {' '}\r\n
\r\n Do not close or refresh window
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n }}\r\n \r\n \r\n {selectedDocumentType !== 0 && (\r\n \r\n
\r\n )}\r\n\r\n {selectedDocumentType === 0 && (\r\n Drop the files here ...
\r\n ) : (\r\nClick to browse or drag and drop files here
\r\n )}\r\nPlease select a document type
\r\n )}\r\n\r\n {displayResultsTable(filesWithoutAssociatedCandidates, '#990000', orphanedMessage)}\r\n {displayResultsTable(filesInserted, '#00008B', 'Upload Successful')}\r\n
\r\n )}\r\n \r\n \r\n {\r\n e.preventDefault();\r\n setFilesWithoutAssociatedCandidates([]);\r\n setFilesInserted([]);\r\n clearQueue();\r\n setDisplayResults(false);\r\n setSelectedDocumentType(0);\r\n }}\r\n color=\"success\"\r\n >\r\n New Upload\r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default DragAndDropFiles;\r\n","const style = {\r\n scroll: {\r\n marginBottom: '10px',\r\n height: 'calc(100% - 150px)',\r\n },\r\n wrapper: {\r\n border: '1px solid rgb(51, 51, 51)',\r\n height: 'calc(100vh - 255px)',\r\n },\r\n wrapperHeight: {\r\n height: 'calc(100vh - 250px)',\r\n },\r\n departmentWrapperWidget: {\r\n border: '1px solid rgb(51, 51, 51)',\r\n padding: '15px',\r\n height: 'calc(100vh - 295px)',\r\n overflowY: 'auto',\r\n },\r\n headerWrapper: {\r\n backgroundColor: 'rgb(51, 51, 51)',\r\n color: 'white',\r\n padding: '10px',\r\n textAlign: 'center',\r\n },\r\n blueBackground: '#F1FFFF',\r\n whiteBackground: '#FFFFFF',\r\n};\r\n\r\nexport default style;\r\n","import React, { useState } from 'react';\r\nimport { FormGroup, Col, Input, Label, Form, Button } from 'reactstrap';\r\nimport { useAuth0 } from '../../../auth0/reactAuth0Spa';\r\nimport Swal from 'sweetalert2';\r\nimport UserPhotoTypes from '../../DragAndDropFiles/UserPhoto/UserPhotoTypes';\r\nimport UserPhoto from '../../DragAndDropFiles/UserPhoto/UserPhoto';\r\nimport { fetchDataAgnostic, putData } from '../../../Services/dataApi';\r\nimport { formatBearerToken, swalErrorMessage } from '../../../Common.functions';\r\n\r\nconst OrganizationCreationAndEditWidget = ({\r\n OrganizationLogo = '',\r\n OrganizationName = '',\r\n OrganizationWebsite = '',\r\n OrganizationShortName = '',\r\n pk_Organization = '',\r\n OrganizationAlias = '',\r\n setOrganizations,\r\n updateOrganizationArrayValues,\r\n}) => {\r\n const [organizationLogo, setOrganizationLogo] = useState(OrganizationLogo);\r\n const [organizationName, setOrganizationName] = useState(OrganizationName);\r\n const [organizationWebsite, setOrganizationWebsite] = useState(OrganizationWebsite);\r\n const [deptConfig, setDeptConfig] = useState({});\r\n const [organizationShortName, setOrganizationShortName] = useState(OrganizationShortName);\r\n const [pkOrganization, setPkOrganization] = useState(pk_Organization);\r\n\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n\r\n const handleSave = (e) => {\r\n e.preventDefault();\r\n e.preventDefault();\r\n getTokenSilently()\r\n .then((token) => {\r\n putData(\r\n 'organization',\r\n {\r\n pk_Organization: pkOrganization,\r\n },\r\n {\r\n OrganizationName: organizationName,\r\n OrganizationShortName: organizationShortName,\r\n OrganizationWebsite: organizationWebsite,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n if (res.status === 200) {\r\n updateOrganizationArrayValues(res.data);\r\n Swal.fire({\r\n title: 'Success!',\r\n text: 'Department settings have been updated!',\r\n icon: 'success',\r\n });\r\n } else {\r\n swalErrorMessage();\r\n }\r\n })\r\n .catch((err) => {\r\n swalErrorMessage();\r\n });\r\n })\r\n .catch((err) => {\r\n swalErrorMessage();\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default OrganizationCreationAndEditWidget;\r\n","import React, { useState, useEffect, Fragment } from 'react';\r\nimport { faBuilding, faPencilAlt } from '@fortawesome/free-solid-svg-icons';\r\nimport { Popover, PopoverBody, PopoverHeader, Button } from 'reactstrap';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport OrganizationCreationAndEditWidget from './OrganizationCreationAndEditWidget';\r\n\r\nconst OrganizationListItem = ({\r\n OrganizationLogo,\r\n OrganizationName,\r\n setOrganizations,\r\n UserCount,\r\n DepartmentCount,\r\n OrganizationShortName,\r\n OrganizationWebsite,\r\n pk_Organization,\r\n updateOrganizationArrayValues,\r\n setSelectedOrganization,\r\n selectedOrganization,\r\n orgPopoverOpen,\r\n setOrgPopoverOpen,\r\n}) => {\r\n const [isSelected, setIsSelected] = useState(false);\r\n\r\n useEffect(() => {\r\n setIsSelected(pk_Organization === selectedOrganization);\r\n }, [selectedOrganization, pk_Organization]);\r\n\r\n const renderImage = () => {\r\n if (OrganizationLogo) return \r\n {pk_Organization && (\r\n {\r\n // handleChange('UserPhotoUrl', photoURL);\r\n if (photoURL) {\r\n setOrganizationLogo(photoURL);\r\n }\r\n setOrganizations((prevState) => {\r\n // eslint-disable-next-line\r\n let clone = structuredClone(prevState);\r\n const index = clone.findIndex((x) => x.pk_Organization === pk_Organization);\r\n if (clone[index]) {\r\n clone[index].OrganizationLogo = photoURL;\r\n }\r\n return clone;\r\n });\r\n }}\r\n type={UserPhotoTypes.OrganizationLogo}\r\n />\r\n )}\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n };\r\n\r\n const handleOrganizationToggle = (e) => {\r\n setOrgPopoverOpen((prevState) => {\r\n // if it matches the current organization, close it\r\n if (prevState === pk_Organization) return false;\r\n\r\n // if it doesn't match, open it\r\n return pk_Organization;\r\n });\r\n };\r\n const editOrganization = () => {};\r\n return (\r\n */}\r\n
{renderImage()}
\r\n \r\n
\r\n {/* */}\r\n {OrganizationName}
\r\nDepartments: {DepartmentCount}
\r\nUsers: {UserCount}
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n clearTimeout(typingTimeout);\r\n const newValue = e.target.value;\r\n typingTimeout = setTimeout(() => {\r\n setFilterBy(newValue);\r\n }, 300);\r\n }}\r\n />\r\n \r\n {\r\n setFilterBy('');\r\n document.getElementById('searchOrganizations').value = '';\r\n }}\r\n >\r\n \r\n \r\n
\r\n Organizations
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n Add New Organization
\r\n \r\n \r\n \r\n {filteredOrganizations\r\n .sort((a, b) => {\r\n const stringA = a.OrganizationName ? a.OrganizationName.toLowerCase() : '';\r\n const stringB = b.OrganizationName ? b.OrganizationName.toLowerCase() : '';\r\n\r\n if (stringA < stringB) {\r\n return -1;\r\n }\r\n if (stringA > stringB) {\r\n return 1;\r\n }\r\n return 0;\r\n })\r\n .map((organization, i) => {\r\n return (\r\n
\r\n
\r\n \r\n {\r\n e.preventDefault();\r\n setNewOrgPopup(true);\r\n }}\r\n >\r\n Add New Organization\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default OrganizationList;\r\n","import React, { useState, useEffect, Fragment } from 'react';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faBuilding, faPencilAlt } from '@fortawesome/free-solid-svg-icons';\r\n\r\nconst DepartmentListItem = ({\r\n pk_Department,\r\n DepartmentName,\r\n DepartmentLogo,\r\n UserCount,\r\n setSelectedDepartment,\r\n selectedDepartment,\r\n backgroundColor,\r\n}) => {\r\n const [isSelected, setIsSelected] = useState(false);\r\n\r\n useEffect(() => {\r\n setIsSelected(pk_Department === selectedDepartment);\r\n }, [selectedDepartment, pk_Department]);\r\n\r\n const renderImage = () => {\r\n if (DepartmentLogo) return \r\n
\r\n );\r\n };\r\n return (\r\n {renderImage()}
\r\n \r\n
\r\n {DepartmentName}
\r\n{UserCount} Users
\r\n\r\n \r\n \r\n \r\n \r\n \r\n {\r\n clearTimeout(typingTimeout);\r\n const newValue = e.target.value;\r\n typingTimeout = setTimeout(() => {\r\n setFilterBy(newValue);\r\n }, 300);\r\n }}\r\n />\r\n \r\n {\r\n setFilterBy('');\r\n document.getElementById('searchDepartments').value = '';\r\n }}\r\n >\r\n \r\n \r\n
\r\n {!isLoading && (\r\n {renderDepartmentHeader()}
\r\n \r\n \r\n \r\n {filteredDepartments\r\n .sort((a, b) => {\r\n const stringA = a.DepartmentName ? a.DepartmentName.toLowerCase() : '';\r\n const stringB = b.DepartmentName ? b.DepartmentName.toLowerCase() : '';\r\n\r\n if (stringA < stringB) {\r\n return -1;\r\n }\r\n if (stringA > stringB) {\r\n return 1;\r\n }\r\n return 0;\r\n })\r\n .map((department, i) => {\r\n return (\r\n
\r\n
\r\n {SeasonName}
\r\n \r\n {\r\n handleSeasonToggle(e, pk_Season);\r\n }}\r\n >\r\n Season \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {' '}\r\n {\r\n saveSeasonName(e);\r\n }}\r\n >\r\n Save\r\n \r\n
\r\n \r\n {\r\n setNewSeasonPopup(false);\r\n setSeasonName('');\r\n }}\r\n centered\r\n style={{ maxWidth: '80vw' }}\r\n >\r\n {\r\n setNewSeasonPopup(false);\r\n setSeasonName('');\r\n }}\r\n >\r\n Add New Season\r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* {\r\n setNewSeasonPopup(false);\r\n setSeasonName('');\r\n setSeasonMode('');\r\n }}\r\n >\r\n
\r\n );\r\n};\r\n\r\nexport default SeasonList;\r\n","import React, { useEffect, useState, Fragment } from 'react';\r\nimport { fetchDataAgnostic } from '../../../../Services/dataApi';\r\nimport { Col, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';\r\nimport { formatBearerToken, swalErrorMessage } from '../../../../Common.functions';\r\nimport SeasonList from './Seasons/SeasonList';\r\nimport { putData, postDataAgnostic } from '../../../../Services/dataApi';\r\nimport UserPhotoTypes from '../../../DragAndDropFiles/UserPhoto/UserPhotoTypes';\r\nimport UserPhoto from '../../../DragAndDropFiles/UserPhoto/UserPhoto';\r\n\r\nimport momentTZ from 'moment-timezone';\r\nimport { NotificationManager } from 'react-notifications';\r\n\r\nimport Swal from 'sweetalert2';\r\nimport { programTypes, applicationSystems } from '../../../../enums';\r\nimport { useAuth0 } from '../../../../auth0/reactAuth0Spa';\r\nimport DepartmentListItem from './DepartmentListItem';\r\nimport Style from '../../EntityWrapper.style';\r\nimport { useAlert } from 'react-alert';\r\n\r\nconst DepartmentCreationAndEdit = ({\r\n departmentLogo,\r\n departmentName,\r\n departmentReplyToAddress,\r\n departmentReplyToName,\r\n departments,\r\n departmentShortName,\r\n departmentWebsite,\r\n getDepartments,\r\n selectedDepartment,\r\n selectedOrganization,\r\n setDepartmentLogo,\r\n setDepartmentName,\r\n setDepartmentReplyToAddress,\r\n setDepartmentReplyToName,\r\n setDepartments,\r\n setDepartmentShortName,\r\n setDepartmentWebsite,\r\n setSelectedDepartment,\r\n}) => {\r\n const [applicationSystem, setApplicationSystem] = useState(applicationSystems[0]);\r\n const [programType, setProgramType] = useState(programTypes[0]);\r\n const [seasons, setSeasons] = useState([]);\r\n const [timeZone, setTimeZone] = useState('');\r\n const [pk_Department, setpk_Department] = useState(null);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [deptConfig, setDeptConfig] = useState({});\r\n const [timeZones, setTimeZones] = useState([]);\r\n const [disableFields, setDisableFields] = useState(false);\r\n const [seasonPopoverOpen, setSeasonPopoverOpen] = useState(false);\r\n const [updatingActiveSeason, setUpdatingActiveSeason] = useState(false);\r\n\r\n const [isFetchingDepartment, setIsFetchingDepartment] = useState(false);\r\n\r\n const alert = useAlert();\r\n const applicationSystemDBValues = {\r\n sf_match: 'SF Match',\r\n eras: 'ERAS',\r\n oral_board: 'Oral Board',\r\n custom: 'Custom',\r\n };\r\n\r\n const handleSeasonToggle = (e, pk_Season) => {\r\n setSeasonPopoverOpen((prevState) => {\r\n // if it matches the current organization, close it\r\n if (prevState === pk_Season) return false;\r\n\r\n // if it doesn't match, open it\r\n return pk_Season;\r\n });\r\n };\r\n\r\n const updateSeasonArray = (season) => {\r\n // update values in the seasons array\r\n setSeasons((prevState) => {\r\n // eslint-disable-next-line\r\n let clone = structuredClone(prevState);\r\n\r\n clone.forEach((item) => {\r\n if (item.pk_Season === season.pk_Season) {\r\n item.SeasonName = season.SeasonName;\r\n }\r\n });\r\n return clone;\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n var timezones = momentTZ.tz.names();\r\n const qualifier = 'US';\r\n\r\n // need to move US to the beginning of the array for easy access (as most clients will be based in the US)\r\n const itemsToUnshift = [];\r\n timezones = timezones.filter((item) => {\r\n if (item.startsWith(qualifier)) {\r\n itemsToUnshift.unshift(item);\r\n return false;\r\n }\r\n return true;\r\n });\r\n\r\n itemsToUnshift.forEach((item) => {\r\n timezones.unshift(item);\r\n });\r\n setTimeZones(timezones);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (!pk_Department || !departments) return;\r\n\r\n //find out if value is in array\r\n const departmentIsInArray = departments.find((department) => department.pk_Department === pk_Department);\r\n\r\n // if the selected department is no longer in the array of possible departments, reset the state values\r\n if (!departmentIsInArray || departments.length === 0) {\r\n resetStateValues();\r\n setSelectedDepartment(false);\r\n }\r\n }, [pk_Department, departments]);\r\n\r\n const updateArrayValues = (department) => {\r\n setDepartments((prevState) => {\r\n // eslint-disable-next-line\r\n let clone = structuredClone(prevState);\r\n\r\n clone.forEach((item) => {\r\n if (item.pk_Department === Number(department.pk_Department)) {\r\n item.ApplicationSystem = department.ApplicationSystem;\r\n item.DepartmentName = department.DepartmentName;\r\n item.DepartmentShortName = department.DepartmentShortName;\r\n item.DepartmentEmail = department.DepartmentEmail;\r\n item.ReplyAddressDisplayName = department.ReplyAddressDisplayName;\r\n item.DepartmentWebsite = department.DepartmentWebsite;\r\n item.ProgramType = department.ProgramType;\r\n item.TimeZone = department.TimeZone;\r\n }\r\n });\r\n\r\n return clone;\r\n });\r\n };\r\n\r\n const createDepartment = () => {\r\n setDisableFields(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n postDataAgnostic(\r\n 'organization/department',\r\n { pk_Organization: selectedOrganization },\r\n {\r\n payload: {\r\n ApplicationSystem: applicationSystem,\r\n DepartmentName: departmentName,\r\n DepartmentAlias: departmentShortName,\r\n DepartmentWebsite: departmentWebsite,\r\n DepartmentEmail: departmentReplyToAddress,\r\n ReplyAddressDisplayName: departmentReplyToName,\r\n ProgramType: programType,\r\n TimeZone: timeZone,\r\n },\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((result) => {\r\n setDepartments((prevState) => {\r\n // eslint-disable-next-line\r\n let clone = structuredClone(prevState);\r\n clone.unshift(result.data);\r\n return clone;\r\n });\r\n setSelectedDepartment(result.data.pk_Department);\r\n NotificationManager.success('Success!', 'Department Created');\r\n if (getDepartments) {\r\n getDepartments();\r\n }\r\n })\r\n .catch((err) => {})\r\n .finally(() => {\r\n setDisableFields(false);\r\n });\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n })\r\n .finally(() => {\r\n setDisableFields(false);\r\n });\r\n };\r\n\r\n const saveSeason = (seasonToSave) => {\r\n setUpdatingActiveSeason(true);\r\n const pk_Season = seasonToSave.pk_Season;\r\n delete seasonToSave.pk_Season;\r\n getTokenSilently()\r\n .then((token) => {\r\n putData(\r\n 'department/season',\r\n { pk_Department: pk_Department, pk_Season: pk_Season },\r\n { seasonObject: seasonToSave },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n alert.success('Saved Season!');\r\n setUpdatingActiveSeason(false);\r\n if (fetchDepartment) {\r\n fetchDepartment();\r\n }\r\n })\r\n .catch((err) => {\r\n alert.error('Error saving Season!');\r\n\r\n setUpdatingActiveSeason(false);\r\n });\r\n })\r\n .catch((err) => {\r\n alert.error('Error saving Season!');\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const updateValues = () => {\r\n getTokenSilently()\r\n .then((token) => {\r\n putData(\r\n 'department/settings',\r\n {\r\n pk_Department: pk_Department,\r\n },\r\n {\r\n payload: {\r\n ApplicationSystem: applicationSystem,\r\n DepartmentName: departmentName,\r\n DepartmentShortName: departmentShortName,\r\n DepartmentWebsite: departmentWebsite,\r\n DepartmentEmail: departmentReplyToAddress,\r\n ReplyAddressDisplayName: departmentReplyToName,\r\n ProgramType: programType,\r\n TimeZone: timeZone,\r\n },\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n if (res.status === 200) {\r\n updateArrayValues(res.data);\r\n Swal.fire({\r\n title: 'Success!',\r\n text: 'Department settings have been updated!',\r\n icon: 'success',\r\n });\r\n } else {\r\n swalErrorMessage();\r\n }\r\n })\r\n .catch((err) => {\r\n swalErrorMessage();\r\n });\r\n })\r\n .catch((err) => {\r\n swalErrorMessage();\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const handleDepartmentClick = (e) => {\r\n e.preventDefault();\r\n if (selectedDepartment) {\r\n updateValues();\r\n } else {\r\n createDepartment();\r\n }\r\n };\r\n\r\n const resetStateValues = () => {\r\n setDepartmentLogo('');\r\n setDepartmentName('');\r\n setDepartmentShortName('');\r\n setDepartmentWebsite('');\r\n setDepartmentReplyToAddress('');\r\n setDepartmentReplyToName('');\r\n setSeasons([]);\r\n setpk_Department('');\r\n\r\n if (applicationSystems && applicationSystems[0]) {\r\n setApplicationSystem(applicationSystems[0]);\r\n }\r\n if (programTypes && programTypes[0]) {\r\n setProgramType(programTypes[0]);\r\n }\r\n if (timeZones && timeZones[0]) {\r\n setTimeZone(timeZones[0]);\r\n }\r\n };\r\n\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n\r\n useEffect(() => {\r\n if (!selectedDepartment) {\r\n resetStateValues();\r\n return;\r\n }\r\n\r\n if (!timeZones || timeZones.length === 0) return;\r\n\r\n resetStateValues();\r\n setIsLoading(true);\r\n\r\n fetchDepartment();\r\n }, [selectedDepartment, timeZones]);\r\n\r\n const fetchDepartment = () => {\r\n getTokenSilently()\r\n .then((token) => {\r\n fetchDataAgnostic('organization/department', { pk_Department: selectedDepartment }, formatBearerToken(token))\r\n .then((result) => {\r\n setIsLoading(false);\r\n const {\r\n ApplicationSystem,\r\n DepartmentLogo,\r\n DepartmentName,\r\n DepartmentShortName,\r\n DepartmentWebsite,\r\n ReplyAddressDisplayName,\r\n DepartmentEmail,\r\n ProgramType,\r\n Seasons,\r\n TimeZone,\r\n pk_Department,\r\n } = result.data;\r\n setApplicationSystem(ApplicationSystem);\r\n setDepartmentLogo(DepartmentLogo);\r\n setDepartmentName(DepartmentName);\r\n setDepartmentShortName(DepartmentShortName);\r\n setDepartmentWebsite(DepartmentWebsite);\r\n setDepartmentReplyToAddress(DepartmentEmail);\r\n setDepartmentReplyToName(ReplyAddressDisplayName);\r\n\r\n // if for whatever reason the program type comes back null, set it to the first position in the program enum\r\n if (!ProgramType) {\r\n setProgramType(programType[0]);\r\n } else {\r\n setProgramType(ProgramType);\r\n }\r\n\r\n // if no application system is present set it to the first position in the application system enum\r\n if (!ApplicationSystem) {\r\n setApplicationSystem(applicationSystems[0]);\r\n } else {\r\n setApplicationSystem(applicationSystemDBValues[ApplicationSystem]);\r\n }\r\n // if no timezone is present set it to the first position in the timezone enum\r\n if (!TimeZone) {\r\n setTimeZone(timeZones[0]);\r\n } else {\r\n setTimeZone(TimeZone);\r\n }\r\n\r\n setSeasons(Seasons);\r\n setTimeZone(TimeZone);\r\n setpk_Department(pk_Department);\r\n })\r\n .catch((err) => {});\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n if (isLoading) return ;\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 | Active | \r\nSeason Name | \r\nCandidates (Registered/Total) | \r\nInterview Sessions | \r\nMode | \r\nEdit | \r\n
|---|
\r\n {\r\n e.preventDefault();\r\n setNewSeasonPopup(true);\r\n }}\r\n >\r\n Add New Season\r\n \r\n
\r\n \r\n {pk_Department && (\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default DepartmentCreationAndEdit;\r\n","import React, { useState } from 'react';\r\nimport OrganizationList from './Organizations/OrganizationList';\r\nimport { Popover, PopoverBody, PopoverHeader, Button } from 'reactstrap';\r\nimport DepartmentList from './Organizations/Departments/DepartmentList';\r\nimport DepartmentCreationAndEdit from './Organizations/Departments/DepartmentCreationAndEdit';\r\nimport OrganizationCreationAndEditWidget from './Organizations/OrganizationCreationAndEditWidget';\r\nimport Style from './EntityWrapper.style';\r\n\r\nimport { Col, Row } from 'reactstrap';\r\n\r\nconst disableOverlay = {\r\n backgroundColor: 'rgba(0,0,0,0.2)',\r\n position: 'absolute',\r\n top: '0',\r\n left: '15px',\r\n width: 'calc(100% - 30px)',\r\n height: 'calc(100vh - 255px)',\r\n zIndex: '100',\r\n};\r\n\r\nconst EntityWrapper = (props) => {\r\n const { getDepartments } = props;\r\n const [selectedOrganization, setSelectedOrganization] = useState(null);\r\n const [departments, setDepartments] = useState([]);\r\n const [organizations, setOrganizations] = useState([]);\r\n const [departmentLogo, setDepartmentLogo] = useState('');\r\n const [departmentName, setDepartmentName] = useState('');\r\n const [departmentReplyToAddress, setDepartmentReplyToAddress] = useState('');\r\n const [departmentReplyToName, setDepartmentReplyToName] = useState('');\r\n const [departmentShortName, setDepartmentShortName] = useState('');\r\n const [departmentWebsite, setDepartmentWebsite] = useState('');\r\n const [selectedDepartment, setSelectedDepartment] = useState(null);\r\n const [orgPopoverOpen, setOrgPopoverOpen] = useState(false);\r\n\r\n const renderDepartmentName = () => {\r\n if (selectedDepartment) {\r\n if (departmentName && departmentName.trim().length > 0) {\r\n return departmentName;\r\n } else {\r\n return 'Loading...';\r\n }\r\n }\r\n\r\n return 'Create New Department';\r\n };\r\n\r\n const addNewOrganizationToList = (organization) => {\r\n setOrganizations((prevState) => {\r\n // eslint-disable-next-line\r\n let clone = structuredClone(prevState);\r\n clone.unshift(organization);\r\n return clone;\r\n });\r\n };\r\n\r\n const updateOrganizationArrayValues = (data) => {\r\n setOrganizations((prevState) => {\r\n // eslint-disable-next-line\r\n let clone = structuredClone(prevState);\r\n\r\n clone.forEach((item) => {\r\n if (item.pk_Organization === data.pk_Organization) {\r\n item.OrganizationName = data.OrganizationName;\r\n item.OrganizationShortName = data.OrganizationShortName;\r\n item.OrganizationWebsite = data.OrganizationWebsite;\r\n }\r\n });\r\n return clone;\r\n });\r\n };\r\n\r\n return (\r\n \r\n {\r\n // handleChange('UserPhotoUrl', photoURL);\r\n if (photoURL) {\r\n setDepartmentLogo(photoURL);\r\n }\r\n setDepartments((prevState) => {\r\n // eslint-disable-next-line\r\n let clone = structuredClone(prevState);\r\n const index = clone.findIndex((x) => x.pk_Department === pk_Department);\r\n\r\n if (clone[index]) {\r\n clone[index].DepartmentLogo = photoURL;\r\n }\r\n return clone;\r\n });\r\n }}\r\n type={UserPhotoTypes.DepartmentLogo}\r\n />\r\n
\r\n )}\r\n \r\n \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {renderDepartmentName()}
\r\n {!selectedDepartment && !selectedOrganization && }\r\n \r\n
\r\n \r\n \r\n
\r\n {`${\r\n info ? `${info.LastName || ''}, ${info.FirstName || ''}` : ''\r\n }`}
\r\n \r\n {selectedDocument ? selectedDocument.DocumentTypeName : 'None'}\r\n
\r\n \r\n
\r\n \r\n );\r\n };\r\n\r\n return (\r\n \r\n {\r\n document.getElementById(`fileDownload`).click();\r\n }}\r\n >\r\n Download\r\n \r\n\r\n \r\n Download\r\n \r\n
\r\n \r\n {renderTopBar()}\r\n
\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default FileViewer;\r\n","import moment from 'moment';\r\nimport React from 'react';\r\nimport styled from 'styled-components';\r\nconst Wrapper = styled.div``;\r\n\r\n//Wrapper keeps footer at bottom of page\r\nconst Footer = () => {\r\n const noHeader =\r\n window.location.pathname.startsWith('/files') ||\r\n window.location.pathname.startsWith('/viewFile') ||\r\n window.location.pathname.startsWith('/logo') ||\r\n window.location.pathname.startsWith('/coordinator/schedule') ||\r\n window.location.pathname.startsWith('/administrator/rank/chart_print_preview');\r\n\r\n if (noHeader) {\r\n document.body.style.backgroundColor = '#fff';\r\n return ;\r\n }\r\n\r\n return (\r\n \r\n {/* {correctViewer()} */}\r\n {/*
\r\n Documents
*/}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {d.DocumentTypeName || 'Unknown Document Type'}\r\n \r\n \r\n {d.DocumentTypeName || 'Unknown Document Type'}\r\n \r\n
\r\n );\r\n })\r\n : null}\r\n \r\n {documents && documents.length > 1\r\n ? documents.map((d, i) => {\r\n return (\r\n {\r\n setSelectedDocument(d);\r\n }}\r\n >\r\n \r\n
\r\n \r\n {selectedDocument ? (\r\n // selectedDocument.MimeType.indexOf('image') >= 0 ? (\r\n // \r\n {' '}\r\n {isLoading ?
\r\n )}\r\n \r\n ©2018-{moment().format('YYYY')} Druksys, LLC •{' '}\r\n RezRATE® •{' '}\r\n \r\n Status\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Footer;\r\n\r\n// 80\r\n","export const setDateList = (payload) => ({\r\n type: 'SET_DATE_LIST',\r\n payload,\r\n});\r\n\r\n// order is necessary as drag-and-drop uses numerical values for their data array (only use numbered arrays in this. i.e. [0, 1, 2, 3])\r\nexport const setOrder = (payload) => ({\r\n type: 'SET_ORDER',\r\n payload,\r\n});\r\n","import React from 'react';\r\nimport { faInfoCircle } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\n\r\n// Generic loading screen. Can either have variables passed in or will take the values of the header and subheader below\r\nconst Info = ({ header, subHeader }) => {\r\n const headerMessage = header ? header : '';\r\n const subHeaderMessage = subHeader ? subHeader : '';\r\n return (\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default Info;\r\n","import React from 'react';\r\nimport Moment from 'react-moment';\r\nimport { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';\r\nimport { ListGroupItem } from 'reactstrap';\r\nimport styled from 'styled-components';\r\nimport blueHamburger from './assets/images/icons/blueHamburger.png';\r\n\r\nconst ItemWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n`;\r\n\r\nconst DragableListGroupItem = styled(ListGroupItem)`\r\n display: flex;\r\n & * {\r\n white-space: nowrap;\r\n }\r\n`;\r\n\r\nconst DragableListGroupItemWithBackground = styled(ListGroupItem)`\r\n background-color: rgb(195, 80, 74) !important;\r\n color: white !important;\r\n & * {\r\n white-space: nowrap;\r\n }\r\n`;\r\n\r\nconst CustomUL = styled.ul`\r\n padding: 0;\r\n`;\r\n\r\nconst Hamburger = styled.img`\r\n cursor: move;\r\n`;\r\n\r\nconst DragHandle = SortableHandle(() => \r\n
\r\n \r\n
\r\n {headerMessage}
\r\n {subHeaderMessage}\r\n\r\n There's one more thing you need to do! Upload a photo of yourself by clicking{' '}\r\n \r\n \r\n here.\r\n \r\n \r\n
\r\n )}\r\n\r\n \r\n {dateOfInterview.DateOfInterview}\r\n \r\n
\r\n {dateOfInterview.Label && (\r\n \r\n \r\n {dateOfInterview.Label}\r\n \r\n )}\r\n
{item.Label || ''}
\r\n {/* {item.Label && (\r\n \r\n \r\n {item.Label}\r\n \r\n )} */}\r\n
\r\n {item.Label}\r\n \r\n )}\r\n
\r\n You selected only one date. Did you know you can select multiple options?\r\n
\r\n\r\n
\r\n \r\n Click{' '}\r\n changeStep(e, 1)}>\r\n modify\r\n {' '}\r\n to add more dates\r\n
\r\n\r\n {sortData(listArray).length === 1 &&\r\n !dateOfInterview &&\r\n !hasPreferenceOrderWithNoInterviewDate &&\r\n !singleDateChoice && (\r\n \r\n Modify\r\n \r\n )}\r\n
\r\n {!dateOfInterview && !hasMadeSelection && (\r\n \r\n 
\r\n
\r\n )}\r\n {/* {dateOfInterview && } */}\r\n {((interviewDate && !interviewDate.DateLocked) || !dateOfInterview) && (\r\n \r\n {sortData(listArray).length === 1 &&\r\n !dateOfInterview &&\r\n !hasPreferenceOrderWithNoInterviewDate &&\r\n !singleDateChoice && }\r\n {!demo && (\r\n {\r\n setIsSending(true);\r\n sendRequest();\r\n }}\r\n color=\"success\"\r\n >\r\n {!isSending ? 'Confirm' : \r\n Confirm\r\n \r\n )}\r\n
\r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default InterviewConfirmRouter;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { Button, Col, Form, FormGroup, Input } from 'reactstrap';\r\nimport Swal from 'sweetalert2';\r\nimport { postDataAgnostic } from '../../../Services/dataApi';\r\nimport { CustomButton, EvenRow } from './InterviewDateSelection.styles';\r\nimport { wrap } from 'lodash';\r\n\r\nconst InterviewDateDecline = ({ changeStep, clientID, location, demo }) => {\r\n const [comment, setComment] = useState('');\r\n const [isMobile, setIsMobile] = useState(window.innerWidth < window.innerHeight);\r\n\r\n useEffect(() => {\r\n setIsMobile(window.innerWidth < window.innerHeight);\r\n }, [window.innerWidth, window.innerHeight]);\r\n const simulateDecline = () => {\r\n Swal.fire(\r\n 'The invitaiton has been declined (not really)',\r\n 'If this were a real entry this would inform the corresponding department you did not want to interview.',\r\n );\r\n };\r\n\r\n const postDecline = (e) => {\r\n e.preventDefault();\r\n const AccessID = localStorage.getItem('AccessID');\r\n if (AccessID === null) {\r\n //do the thing\r\n }\r\n postDataAgnostic(\r\n 'candidate/decline',\r\n { clientID, AccessID },\r\n { DeclineComment: comment.length > 0 ? comment : null, isDeclining: true },\r\n )\r\n .then((results) => {\r\n window.location.reload();\r\n })\r\n .catch((err) => {\r\n Swal.fire('Error', 'Something went wrong, please try again or contact support', 'error');\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 {item.Label}
}\r\n \r\n
\r\n \r\n {moment.tz(item.DateOfInterview || item.InterviewDates4PortalDate, null).format('ddd, MMM DD, YYYY')}\r\n
\r\n \r\n
\r\n \r\n {moment.tz(item.DateOfInterview || item.InterviewDates4PortalDate, null).format('ddd, MMMM DD, YYYY')}\r\n
\r\n \r\n {' '}\r\n {!singleDateChoice && (\r\n (props.active ? 'grabbing' : 'grab')}`,\r\n cursor: `-moz-grab`,\r\n cursor: `-webkit-grab`,\r\n zIndex: 10,\r\n }}\r\n className=\"movable\"\r\n onMouseDown={(e) => handleMouseDown(data, y, e)}\r\n onTouchStart={(e) => handleTouchStart(data, y, e)}\r\n onTouchEnd={(e) => handleTouchEnd(e)}\r\n >\r\n 
\r\n {/*
\r\n )}\r\n \r\n \r\n\r\n {/* {!singleDateChoice && (\r\n \r\n \r\n \r\n {/* {itemsNumbered}: */}\r\n
\r\n \r\n \r\n {item.Label}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default Selection;\r\n","import styled from 'styled-components';\r\n\r\nconst Date = styled.p`\r\n color: black;\r\n padding-left: 20px;\r\n font-size: 0.7em;\r\n @media (max-width: 480px) {\r\n font-size: 0.65em;\r\n }\r\n`;\r\n\r\nexport { Date };\r\n","import React from 'react';\r\nimport Selected from './Selected';\r\nimport Selection from './Selection';\r\n\r\n// determines whether or not the item has been selected. This is necessary to abstract from ListAnimation so that list animation can still use non-toggleable lists\r\nconst SelectionFork = ({ ...props }) => {\r\n const { listArray, listKey, handleMouseDown, isOrdinal } = props;\r\n const item = listArray[listKey];\r\n if (item['selected']) {\r\n return \r\n
\r\n \r\n {moment.tz(item.DateOfInterview || item.InterviewDates4PortalDate, null).format('ddd, MMM DD, YYYY')}\r\n
\r\n \r\n
\r\n \r\n {moment.tz(item.DateOfInterview || item.InterviewDates4PortalDate, null).format('ddd, MMMM DD, YYYY')}\r\n
\r\n - \r\n {nodes.map(({ key, data, state, keyAccessor }, i) => {\r\n return (\r\n
\r\n {/* \r\n
\r\n \r\n );\r\n }\r\n\r\n // TODO: Vet these once final decision on UI is made\r\n const checkIfCurrentSlide = (num) => {\r\n if (currentSlide !== num) {\r\n setCurrentSlide(num);\r\n }\r\n };\r\n\r\n return (\r\n \r\n {' '}\r\n
\r\n Feel free to click around.');\r\n setUser(demoUserObject);\r\n setOrder(demoInterviewDates4Portal);\r\n setDateList(demoInterviewDates4Portal);\r\n setSelectedableDates(demoInterviewDates4Portal);\r\n setIsLoading(false);\r\n // setTitle({\r\n // pageTitle: 'Registration',\r\n // departmentName: data.Departments4PortalName,\r\n // organizationName: data.Departments4PortalOrganization,\r\n // });\r\n }\r\n }, [clientID, isLoading]);\r\n\r\n const getDepartmentInfo = () => {\r\n if (props && props.match && props.match.params && props.match.params.id) {\r\n fetchDataAgnostic('department/season/candidate/candidateId', { candidateUUID: props.match.params.id })\r\n .then((result) => {\r\n setAutomationIsEnabled(result.data.EnableAutoSlotState);\r\n setIsWaitlisted(result.data.IsWaitlisted);\r\n props.setUser(result.data);\r\n })\r\n .catch((err) => {});\r\n }\r\n };\r\n\r\n const checkForToken = () => {\r\n const AccessID = localStorage.getItem('AccessID');\r\n if (AccessID === null) {\r\n setNeedsAccessToken(true);\r\n fetchDataAgnostic('candidate/email', { clientID: clientID }, null)\r\n .then((result) => {\r\n setEmailsForToken(result.data);\r\n })\r\n .catch((err) => {})\r\n .finally(() => {\r\n setIsLoading(false);\r\n });\r\n }\r\n };\r\n\r\n const tokenCheck = () => {\r\n checkForToken();\r\n setHasPermission(false);\r\n };\r\n\r\n const getCandidate = (modifySelection) => {\r\n // NOTE: we're currently leaving this out of the MVP\r\n const AccessID = '123455';\r\n // const AccessID = localStorage.getItem('AccessID');\r\n\r\n // if (AccessID === null && modifySelection) {\r\n // // tokenCheck();\r\n // return;\r\n // }\r\n\r\n setSelectedableDates([]);\r\n\r\n fetchDataAgnostic('candidate/interviewDates', {\r\n CandidateUUID: clientID,\r\n AccessID,\r\n modifySelection,\r\n pk_Season: dContext.season.pk_Season,\r\n })\r\n .then((result) => {\r\n if (result.data)\r\n if (result.data && result.data.permission != null && result.data.permission === false) {\r\n // if permission is false then the AccessID is invalid\r\n localStorage.removeItem('AccessID');\r\n return;\r\n }\r\n\r\n const {\r\n hasInterviewDate,\r\n madeChoices,\r\n dates,\r\n interviewDate,\r\n permission,\r\n declined,\r\n candidateMessage,\r\n } = result.data;\r\n\r\n if (declined === true) {\r\n setCandidateHasDeclined(true);\r\n }\r\n // if (permission === false) {\r\n // tokenCheck();\r\n // return;\r\n // }\r\n if (dates && dates.length === 1 && !madeChoices) {\r\n setSingleDateChoice(true);\r\n dates[0].selected = true;\r\n setHeaderText('The following date is available for interview');\r\n }\r\n\r\n if (hasInterviewDate) {\r\n setHasInterviewDate(true);\r\n setInterviewDate(interviewDate);\r\n return;\r\n }\r\n dates.forEach((item, i) => {\r\n const { DateOfInterview } = item;\r\n dates[i].DateOfInterview = new Date(DateOfInterview);\r\n });\r\n\r\n if (dates.length === 0) {\r\n setHasNoChoicesToMake(true);\r\n }\r\n setCandidateMessage(candidateMessage);\r\n setHasMadeSelection(madeChoices);\r\n setOrder(dates);\r\n\r\n // if there are no dates we shouldn't ask them to pick one\r\n if (dates.length === 0) {\r\n setHeaderText('-');\r\n }\r\n setDateList(dates);\r\n setSelectedableDates(dates);\r\n })\r\n .catch((err) => {\r\n console.log('err', err.response);\r\n\r\n if (err && err.response && err.response.status === 404) {\r\n setValidCandidate(false);\r\n } else {\r\n setError(true);\r\n }\r\n })\r\n .finally(() => {\r\n setIsLoading(false);\r\n });\r\n };\r\n\r\n const sendEmail = (e) => {\r\n e.preventDefault();\r\n postDataAgnostic('candidate/sendToken', { clientID, emailType: emailToSendToken }, null)\r\n .then((result) => {})\r\n .catch((err) => {\r\n // Swal.fire('Error', 'Something went wrong, please try again later or contact support', 'error');\r\n // setHasPermission(true);\r\n });\r\n };\r\n\r\n const submitPin = (pin, callback) => {\r\n setIsInvalidPin(false);\r\n return putData(\r\n 'candidate/authenticate',\r\n {\r\n CandidateUUID: clientID,\r\n AccessPin: pin,\r\n // pk_Season: dContext.season.pk_Season,\r\n },\r\n null,\r\n )\r\n .then((result) => {\r\n if (result.data === 'Invalid pin') {\r\n localStorage.removeItem('AccessID');\r\n setDigits(['', '', '', '', '', '']);\r\n setIsInvalidPin(true);\r\n return 'invalid pin';\r\n }\r\n\r\n if (result.data === 'Expired pin') {\r\n localStorage.removeItem('AccessID');\r\n setDigits(['', '', '', '', '', '']);\r\n return 'expired pin';\r\n }\r\n\r\n if (result.data.AccessID) {\r\n try {\r\n localStorage.setItem('AccessID', result.data.AccessID);\r\n Swal.fire('Validated', '', 'success');\r\n setHasInterviewDate(false);\r\n setHasMadeSelection(false);\r\n setDateOfInterview(false);\r\n setOrder([]);\r\n setDateList([]);\r\n setSelectedableDates([]);\r\n setHasPermission(true);\r\n getCandidate(true);\r\n } catch (err) {}\r\n }\r\n })\r\n .catch((err) => {});\r\n };\r\n\r\n const checkForRemovalOfCurrentSelections = () => {\r\n // if isSelected is true and selected is false than it means they are removing this date from their previously selected dates\r\n return listArray.filter((item) => item.isSelected && !item.selected);\r\n };\r\n\r\n // Does not let the user move to the next screen until they've picked at least one date\r\n const validateDateSelection = (e, num) => {\r\n e.preventDefault();\r\n if (listArray.filter((item) => item.selected).length === 0) {\r\n Swal.fire('Oops...', 'Please select at least one interview date.', 'error');\r\n } else {\r\n const hasDeselected = checkForRemovalOfCurrentSelections();\r\n if (hasDeselected.length > 0) {\r\n const message = `Are you sure you want to remove yourself from ${hasDeselected.length} date${\r\n hasDeselected.length === 1 ? '' : 's'\r\n }?`;\r\n Swal.fire({\r\n title: 'Caution!!',\r\n text: message,\r\n type: 'warning',\r\n showCancelButton: true,\r\n confirmButtonColor: 'red',\r\n confirmButtonText: `Continue`,\r\n }).then((result) => {\r\n if (result.value) {\r\n changeStep(e, num);\r\n }\r\n });\r\n } else {\r\n changeStep(e, num);\r\n }\r\n }\r\n };\r\n\r\n // changes step. Currently this moves it back and forth based on the num that's passed in\r\n const changeStep = (e, num) => {\r\n // if (e) e.preventDefault();\r\n\r\n const { listArray } = props;\r\n\r\n setHeaderText(headers[step]);\r\n setCurrentSlide(num);\r\n setHeaderText(headers[num]);\r\n // this scrollTo helps with very long lists\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n };\r\n\r\n const handleValidationCancel = () => {\r\n setHasPermission(true);\r\n };\r\n\r\n const renderContent = () => {\r\n if (isLoading) {\r\n return
\r\n // {loadContent()} \r\n //
\r\n );\r\n };\r\n\r\n // toggles item selection if selected item is already clicked\r\n // otherwise, set selected item as item clicked\r\n const toggleOrSetSelectedItem = (id, index) => {\r\n if (id === selectedItem) {\r\n setSelectedItem(null);\r\n setSelectedItemIndex(null);\r\n } else {\r\n setSelectedItem(id);\r\n setSelectedItemIndex(index);\r\n }\r\n };\r\n\r\n // not needed as increment step handles both\r\n //TODO deprecate this and rename increment step\r\n const decrementStep = () => {\r\n setHeaderText(headers[step - 2]);\r\n setStep(step - 1);\r\n };\r\n\r\n // uses the index of selectableDates\r\n const addToSelectedDates = (index) => {\r\n const newItem = selectedableDates[index];\r\n newItem.selected = true;\r\n setSelectedDates([...selectedDates, newItem]);\r\n setSelectedableDates(selectedableDates.filter((date, i) => i !== index));\r\n };\r\n\r\n // TODO: Deprecate if browser uses drag and drop functionality\r\n const resetSelection = () => {\r\n setSelectedItem(null);\r\n setSelectedItemIndex(null);\r\n };\r\n\r\n // TODO: Deprecate if browser uses drag and drop functionality\r\n const moveSelectedItemUp = (buttonIsDisabled) => {\r\n if (!buttonIsDisabled) {\r\n const newArray = arrayMove(selectedDates, selectedItemIndex, selectedItemIndex - 1);\r\n setSelectedDates(newArray);\r\n setSelectedItemIndex(selectedItemIndex - 1);\r\n }\r\n };\r\n\r\n // TODO: Deprecate if browser uses drag and drop functionality\r\n const moveSelectedItemDown = (buttonIsDisabled) => {\r\n if (!buttonIsDisabled) {\r\n const newArray = arrayMove(selectedDates, selectedItemIndex, selectedItemIndex + 1);\r\n setSelectedDates(newArray);\r\n setSelectedItemIndex(selectedItemIndex + 1);\r\n }\r\n };\r\n\r\n // TODO: Deprecate if browser uses drag and drop functionality\r\n const retractFromSelectedDates = (buttonIsDisabled) => {\r\n if (!buttonIsDisabled) {\r\n setSelectedableDates(insertDate(selectedableDates, selectedDates[selectedItemIndex]));\r\n setSelectedDates(selectedDates.filter((date, i) => i !== selectedItemIndex));\r\n resetSelection();\r\n }\r\n };\r\n\r\n const ignoreDeclineFlag = (e) => {\r\n e.preventDefault();\r\n setCurrentSlide(1);\r\n setHasPreferenceOrderWithNoInterviewDate(false);\r\n setDateOfInterview(false);\r\n setIgnoreDecline(true);\r\n };\r\n\r\n const loadContent = () => {\r\n const { listArray = [], order, user } = props;\r\n const { FirstName = '', LastName = '' } = user || {};\r\n const firstName = FirstName;\r\n const lastName = LastName;\r\n\r\n if (!validCandidate) {\r\n return renderCandidateNotFound();\r\n }\r\n\r\n if (error) {\r\n const header = errorMessage.header ? errorMessage.header : 'service is temporarily unavailable';\r\n const subHeader = errorMessage.subHeader ? errorMessage.subHeader : 'please try again later';\r\n return \r\n
\r\n )}\r\n\r\n \r\n You are acting on behalf of {`${lastName}${firstName && lastName ? ', ' : ''}${firstName}`}.\r\n
\r\nYou have declined your invitation
\r\n \r\n \r\n{message}
\r\n {interviewDate.DateLocked && (\r\nYour interview date is locked in - if you need to modify it, please contact your coordinator
\r\n )}\r\n\r\n
\r\n )}\r\n \r\n You are acting on behalf of {`${lastName}${firstName && lastName ? ', ' : ''}${firstName}`}.\r\n
\r\nThank you for your submission.
\r\n{candidateMessage}
\r\n\r\n
\r\n )}\r\n \r\n You are acting on behalf of {`${lastName}${firstName && lastName ? ', ' : ''}${firstName}`}.\r\n
\r\n{headerText}
\r\n{headerText}
\r\n\r\n
\r\n )}\r\n {renderSwitch()}\r\n \r\n You are acting on behalf of {`${lastName}${firstName && lastName ? ', ' : ''}${firstName}`}.\r\n
\r\nThere's nothing here
\r\n };\r\n\r\n const renderSwitch = () => {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n {children}\r\n closeFunction(false)} style={{ padding: '5px 10px 5px 10px', cursor: 'pointer' }}>\r\n
\r\n \r\n {props.breakUrl.url ? (\r\n
\r\n
}\r\n \r\n );\r\n };\r\n\r\n const populateDates = () => {\r\n let dateformatTime;\r\n let difference;\r\n let color = null;\r\n let coverBorder = null;\r\n const items = scheduledTimes.map((item, i) => {\r\n const { isPassingPeriod } = item;\r\n let last = false;\r\n const stringDate = interviewDate + ' ' + item.Schedules4PortalTime;\r\n const numberDate = Date.parse(stringDate);\r\n dateformatTime = new Date(numberDate);\r\n\r\n difference = getPercentageTime(\r\n currentTimeAsMoment.valueOf(),\r\n tableRowOpacity,\r\n item.StartTimeAsMoment.valueOf(),\r\n item.EndTimeAsMoment.valueOf(),\r\n );\r\n\r\n const joinMeetingButtonVisisble = shouldJoinMeetingButtonBeVisisble(item, demo, currentTimeAsMoment);\r\n\r\n const isCurrentTimeSlot = difference.height !== 0 && difference.height !== '100%';\r\n const shouldBeVisible = demo ? isCurrentTimeSlot : joinMeetingButtonVisisble;\r\n\r\n const showHighlight = indexesWithDifferences.includes(i);\r\n const messageFlashRed = false;\r\n const message = item.message; // renderMessage(item, isPassingPeriod);\r\n\r\n return (\r\n
\r\n
\r\n {message}\r\n
\r\n {item.RoomLabel ?
{item.RoomLabel}
: null}\r\n\r\n {/* {item.TimeSlots4PortalAltRoom !== '' ? item.TimeSlots4PortalAltRoom : item.Schedules4PortalRoomNumber} */}\r\n\r\n {shouldBeVisible &&\r\n // interviewIsToday &&\r\n !isPassingPeriod &&\r\n showJoinMeetingButton(\r\n message.toUpperCase(),\r\n item.TimeSlots4PortalJoinManualURL,\r\n item.Schedules4PortalJoinManualURL,\r\n item.Schedules4Portal__pkUUID_Schedule,\r\n item,\r\n i,\r\n )}\r\n \r\n {renderCandidateNotFound()}
;\r\n }\r\n\r\n if (error) {\r\n return \r\n
\r\n \r\n );\r\n }\r\n\r\n if (noData) {\r\n return \r\n {noScheduleAssigned\r\n ? 'You are not currently scheduled for an interview.'\r\n : isMalformedSchedule\r\n ? 'Unable to retrieve valid schedule at this time'\r\n : 'Error loading schedule.'}\r\n
\r\n Please contact your coordinator for further assistance.
\r\n \r\n \r\n \r\n Your Schedule\r\n
{' '}\r\n {startMonth === endMonth\r\n ? `${moment(startMonth).format('dddd, MMMM DD, YYYY')}`\r\n : `${startMonth} - ${endMonth}`}\r\n
\r\n {demo && (\r\n \r\n {\r\n if (e.target.value === 'Current Time') {\r\n setDemoTimeDifference(null);\r\n } else {\r\n const rightNow = new Date(Date.now());\r\n const newTime = new Date(e.target.value);\r\n var difference = newTime.getTime() - rightNow.getTime(); // This will give difference in milliseconds\r\n var resultsInSeconds = Math.round(difference / 1000) + 2;\r\n setDemoTimeDifference(resultsInSeconds);\r\n\r\n tick();\r\n // setCurrentTime(e.target.value);\r\n }\r\n }}\r\n >\r\n \r\n {mockScheduledTimes.map((item) => {\r\n return ;\r\n })}\r\n \r\n
\r\n )}\r\n\r\n \r\n
Times are displayed in your device's local time zone.
\r\n \r\n
\r\n )}\r\n {displayJoinMeetingButtonInfo && virtualMeetingMode !== 'Disabled' && (\r\n \r\n You are acting on behalf of {`${lastName}${firstName && lastName ? ', ' : ''}${firstName}`}.\r\n
\r\n\r\n
\r\n )}\r\n {showTimeSyncWarningBanner && (\r\n \r\n You're early! Join meeting button will become active {firstBlockEarlyJoinInMinutes || 0} minute\r\n {firstBlockEarlyJoinInMinutes > 1 ? 's' : ''} before your first meeting.\r\n {/* Your early!. Join meeting buttons will not appear until {firstBlockEarlyJoinInMinutes || 0} minutes\r\n before your first meeting. */}\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n Are you sure you want to completely unsubscribe from RezRATE Notifications?\r\n
\r\n\r\n You will not just be unsubscribed from {programName}, but all programs that utilize RezRATE services.\r\n
\r\n\r\n
\r\n \r\n
\r\n Doing so will prevent you from receiving any of the following:
\r\n- \r\n
- Residency and Fellowship interview invitations \r\n
- Registration Confirmations \r\n
- Interview Day Schedules \r\n
- General communications from program coordinators about your interview with their programs. \r\n
\r\n \r\n
\r\n \r\n Note: RezRATE only sends these communications at the behest of verified\r\n Residency and Fellowship programs for the purposes of facilitating recruitment interviews. If you feel you\r\n have received communications from this system in error, please{' '}\r\n \r\n contact us.\r\n \r\n
\r\n \r\n \r\n\r\n
\r\n Your request has been received.\r\n
\r\n Please check your email for further instructions.\r\n
\r\n \r\n Your token is invalid or has expired.
\r\n \r\n \r\n )}\r\nForgot Password?
\r\nYou can reset your password here.
\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default RedirectLogin;\r\n","export const setActiveDepartment = (payload) => {\r\n return {\r\n type: 'SET_ACTIVE_DEPARTMENT',\r\n payload,\r\n };\r\n};\r\n\r\nexport const setActiveSeason = (payload) => {\r\n return {\r\n type: 'SET_ACTIVE_SEASON',\r\n payload,\r\n };\r\n};\r\n\r\nexport const setSeasonChoices = (payload) => {\r\n return {\r\n type: 'SET_SEASON_CHOICES',\r\n payload,\r\n };\r\n};\r\n","import { useState, useEffect } from 'react';\r\n\r\nconst useScrollToBottomDetection = (threshold = 10) => {\r\n const [isBottom, setIsBottom] = useState(false);\r\n const [scrollWrapper, setScrollWrapper] = useState(document.getElementById('scroll_wrapper'));\r\n\r\n useEffect(() => {}, []);\r\n\r\n const checkIfBottom = () => {\r\n const scrollHeight = scrollWrapper.scrollHeight;\r\n const clientHeight = scrollWrapper.clientHeight;\r\n const scrollTop = scrollWrapper.scrollTop;\r\n\r\n if (scrollTop + clientHeight >= scrollHeight - threshold) {\r\n setIsBottom(true);\r\n } else {\r\n setIsBottom(false);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n scrollWrapper.addEventListener('scroll', checkIfBottom);\r\n\r\n return () => {\r\n scrollWrapper.removeEventListener('scroll', checkIfBottom);\r\n };\r\n }, []);\r\n\r\n return isBottom;\r\n};\r\n\r\nexport default useScrollToBottomDetection;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { faM, faShieldHalved, faS } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { useAuth0 } from '../../auth0/reactAuth0Spa';\r\nimport { fetchDataAgnostic } from '../../Services/dataApi';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { Col, Row, Button, Input, Form, FormGroup, Label } from 'reactstrap';\r\nimport moment from 'moment';\r\nimport { DatePicker } from 'react-widgets/cjs';\r\nimport BootstrapTable from 'react-bootstrap-table-next';\r\nimport { formatBearerToken } from '../../Common.functions';\r\nimport useScrollToBottomDetection from '../../ScrolledToBottomDetection';\r\nimport { PopupWithCloseButton } from '../../Common.jsx';\r\n\r\nconst noneCandidate = {\r\n pk_Candidate: 0,\r\n FullName: 'None',\r\n};\r\n\r\nconst noneUser = {\r\n pk_User: 0,\r\n FullName: 'None',\r\n};\r\n\r\nconst divFAWrapper = {\r\n width: '20px',\r\n};\r\n\r\nconst eventRender = (value) => {\r\n const { MinorEvent, SecurityEvent, StandardEvent } = value;\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nconst columns = [\r\n {\r\n dataField: 'pk_ActivityLog',\r\n text: 'ID',\r\n sort: false,\r\n },\r\n {\r\n dataField: 'DepartmentName',\r\n text: 'Department Name',\r\n sort: false,\r\n },\r\n {\r\n dataField: 'Timestamp',\r\n text: 'Timestamp',\r\n sort: true,\r\n formatter: (cell) => {\r\n return \r\n {MinorEvent && (\r\n
\r\n \r\n {SecurityEvent && (\r\n
\r\n \r\n {StandardEvent && (\r\n
\r\n {cell.format('MMM DD, YYYY hh:mm:ss A')}
;\r\n },\r\n },\r\n {\r\n dataField: 'UserName',\r\n text: 'User',\r\n sort: false,\r\n },\r\n {\r\n dataField: 'CandidateName',\r\n text: 'Candidate Name',\r\n sort: false,\r\n },\r\n {\r\n dataField: 'Category',\r\n text: 'Category',\r\n sort: false,\r\n },\r\n {\r\n dataField: 'EventTypes',\r\n text: 'Event Types',\r\n sort: false,\r\n formatter: (cell) => {\r\n return eventRender(cell);\r\n },\r\n },\r\n {\r\n dataField: 'Details',\r\n text: 'Details',\r\n sort: false,\r\n },\r\n];\r\n\r\nconst sortAlphabetically = (arrayToSort) => {\r\n return arrayToSort.sort((a, b) => {\r\n if (a.FullName === 'None' || b.FullName === 'None') {\r\n return 0;\r\n }\r\n\r\n if (a.FullName.toUpperCase() < b.FullName.toUpperCase()) {\r\n return -1;\r\n }\r\n\r\n if (a.FullName.toUpperCase() > b.FullName.toUpperCase()) {\r\n return 1;\r\n }\r\n\r\n return 0;\r\n });\r\n};\r\n\r\nconst DepartmentHistory = ({ activeDepartment, activeSeason, adminPanel }) => {\r\n const [pagination, setPagination] = useState(0);\r\n const [history, setHistory] = useState([]);\r\n const [candidateData, setCandidateData] = useState([]);\r\n const [showAdditionalDetails, setShowAdditionalDetails] = useState(false);\r\n const [additionalDetails, setAdditionalDetails] = useState({ pk_ActivityLog: 0, AdditionalDetails: {} });\r\n const [selectedLog, setSelectedLog] = useState(null);\r\n const [startingDate, setStartingDate] = useState(new Date());\r\n const [selectedUser, setSelectedUser] = useState(noneUser);\r\n const [selectedCandidate, setSelectedCandidate] = useState(noneCandidate);\r\n const [userData, setUserData] = useState([]);\r\n const [endReached, setEndReached] = useState(false);\r\n const [showDatePicker, setShowDatePicker] = useState(false);\r\n const [error, setError] = useState(false);\r\n const [loading, setLoading] = useState(true);\r\n const { getTokenSilently } = useAuth0();\r\n\r\n const isBottom = useScrollToBottomDetection();\r\n const browserHistory = useHistory();\r\n\r\n useEffect(() => {\r\n const getFirstOrNext = isBottom || pagination === 0;\r\n const hasDepartmentInfoOrIsAdmin = (activeDepartment && activeSeason) || adminPanel;\r\n const hasAllParameters = hasDepartmentInfoOrIsAdmin && getTokenSilently;\r\n\r\n if (hasAllParameters && getFirstOrNext && !endReached) {\r\n getTokenSilently()\r\n .then((token) => {\r\n // admins won't search by candidates or users\r\n if (!adminPanel) {\r\n getCandidates(activeDepartment, activeSeason, token);\r\n getUsers(activeDepartment, token);\r\n }\r\n getLogs(activeDepartment, activeSeason, token);\r\n })\r\n .catch((err) => {});\r\n }\r\n }, [activeDepartment, activeSeason, getTokenSilently, isBottom]);\r\n\r\n useEffect(() => {\r\n columns.forEach((item) => {\r\n // need to add details after the componant has mounted since it uses state and I didn't\r\n // wnat to define the entire columns array inside the component\r\n if (item.dataField === 'Details') {\r\n item.formatter = (cell, row) => {\r\n return (\r\n handleDetailClick(e, row)}>\r\n {cell}\r\n
\r\n );\r\n };\r\n }\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (additionalDetails.pk_ActivityLog !== 0) {\r\n setShowAdditionalDetails(true);\r\n }\r\n }, [additionalDetails]);\r\n\r\n useEffect(() => {\r\n if (!selectedLog) return;\r\n\r\n getTokenSilently().then((token) => {\r\n fetchDataAgnostic(`department/history/log/${selectedLog}`, {}, formatBearerToken(token))\r\n .then((res) => {\r\n const { pk_ActivityLog, AdditionalDetails } = res.data;\r\n if (res.data.AdditionalDetails) {\r\n setAdditionalDetails({ pk_ActivityLog, AdditionalDetails: JSON.parse(AdditionalDetails) });\r\n }\r\n })\r\n .catch((err) => {});\r\n });\r\n }, [selectedLog]);\r\n\r\n const handleCandidateSelection = (e) => {\r\n const { value } = e.target;\r\n const element = candidateData.find((item) => {\r\n return item.FullName === value;\r\n });\r\n setSelectedCandidate(element);\r\n };\r\n\r\n const handleUserSelection = (e) => {\r\n const { value } = e.target;\r\n const element = userData.find((item) => {\r\n return item.FullName === value;\r\n });\r\n setSelectedUser(element);\r\n };\r\n\r\n const handleDetailClick = (e, row) => {\r\n setSelectedLog(row.pk_ActivityLog);\r\n };\r\n\r\n const handleSearchClick = (e) => {\r\n e.preventDefault();\r\n getTokenSilently().then((token) => {\r\n getLogs(activeDepartment, activeSeason, token, true);\r\n });\r\n };\r\n\r\n const getUsers = (activeDepartment, token) => {\r\n fetchDataAgnostic(\r\n 'department/users',\r\n {\r\n pk_Department: activeDepartment.pk_Department,\r\n IncludeEvaluators: 1,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n const payload = Object.keys(res.data).map((key, index) => {\r\n const { UserLast, UserFirst, pk_User } = res.data[key];\r\n return { pk_User, FullName: `${UserLast}, ${UserFirst}` };\r\n });\r\n\r\n const payloadSorted = sortAlphabetically(payload);\r\n\r\n payloadSorted.unshift(noneUser);\r\n\r\n setUserData(payloadSorted);\r\n })\r\n .catch((err) => {});\r\n };\r\n\r\n const getCandidates = (activeDepartment, activeSeason, token) => {\r\n fetchDataAgnostic(\r\n 'department/candidates',\r\n {\r\n pk_Department: activeDepartment.pk_Department,\r\n pk_Season: activeSeason.pk_Season,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n const payload = Object.keys(res.data).map((key, index) => {\r\n const { LastName, FirstName, pk_Candidate } = res.data[key];\r\n return { pk_Candidate, FullName: `${LastName}, ${FirstName}` };\r\n });\r\n\r\n const payloadSorted = sortAlphabetically(payload);\r\n\r\n payloadSorted.unshift(noneCandidate);\r\n setCandidateData(payloadSorted);\r\n })\r\n .catch((err) => {});\r\n };\r\n\r\n const getLogs = (activeDepartment, activeSeason, token, newSet = false) => {\r\n let endOfDayLocal = moment(startingDate);\r\n endOfDayLocal.set({ hour: 23, minute: 59, second: 59 });\r\n let endOfDayUTC = endOfDayLocal.utc();\r\n\r\n let payload = { startingDate: endOfDayUTC.toISOString() };\r\n\r\n // if this is being done from the admin pane we're not restricting\r\n if (!adminPanel) {\r\n payload.pk_Department = activeDepartment.pk_Department;\r\n payload.pk_Season = activeSeason.pk_Season;\r\n payload.pk_Candidate = selectedCandidate.pk_Candidate;\r\n payload.pk_User = selectedUser.pk_User;\r\n }\r\n\r\n let paginationToUse = pagination;\r\n\r\n // if it's a new search set pagination back to 0\r\n if (newSet) {\r\n paginationToUse = 0;\r\n setPagination(0);\r\n }\r\n\r\n fetchDataAgnostic(`department/history/${paginationToUse}`, payload, formatBearerToken(token))\r\n .then((res) => {\r\n const formatted = res.data.map((item) => {\r\n const { MinorEvent, SecurityEvent, StandardEvent } = item;\r\n return {\r\n ...item,\r\n EventTypes: {\r\n MinorEvent,\r\n SecurityEvent,\r\n StandardEvent,\r\n },\r\n Timestamp: moment(item.Timestamp),\r\n };\r\n });\r\n if (formatted.length === 0) {\r\n setEndReached(true);\r\n }\r\n setPagination((prevState) => prevState + 1);\r\n\r\n // if it's a new search don't concatinate\r\n if (newSet) {\r\n setHistory(formatted);\r\n } else {\r\n setHistory((prevState) => {\r\n return [...prevState, ...formatted];\r\n });\r\n }\r\n })\r\n .catch((err) => {\r\n if (err && err.response && err.response.status && err.response.status === 401) {\r\n browserHistory.push('/');\r\n }\r\n setError(true);\r\n })\r\n .finally(() => {\r\n setLoading(false);\r\n });\r\n };\r\n\r\n if (loading) {\r\n return ;\r\n }\r\n\r\n if (error) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n return (\r\n Something went wrong...
\r\n\r\n setShowAdditionalDetails(false)}\r\n >\r\n {\r\n return { padding: 0 };\r\n }}\r\n keyField=\"field_key\"\r\n noDataIndication={
\r\n );\r\n};\r\n\r\nexport default DepartmentHistory;\r\n","const style = {\r\n spacedBetweenRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n },\r\n label: {\r\n fontSize: 14,\r\n textAlign: 'center',\r\n width: '100%',\r\n },\r\n userList: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n maxHeight: 350,\r\n minWidth: '100%',\r\n overflowY: 'scroll',\r\n marginBottom: 20,\r\n },\r\n genButton: {\r\n alignItems: 'center',\r\n backgroundColor: '#0a91ff',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n fontWeight: 600,\r\n justifyContent: 'space-between',\r\n marginLeft: 10,\r\n marginRight: 10,\r\n paddignRight: 20,\r\n paddingBottom: 10,\r\n paddingLeft: 20,\r\n paddingTop: 10,\r\n width: '100%',\r\n },\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n marginBottom: 10,\r\n },\r\n userItem: {\r\n cursor: 'pointer',\r\n fontWeight: 600,\r\n paddingBottom: 5,\r\n paddingLeft: 5,\r\n paddingTop: 5,\r\n },\r\n};\r\n\r\nexport default style;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\n\r\nimport { Button } from 'reactstrap';\r\nimport { faSquare } from '@fortawesome/free-regular-svg-icons';\r\nimport { faCheckSquare } from '@fortawesome/free-solid-svg-icons';\r\nimport style from './style';\r\n\r\nconst AddColumnPopover = ({\r\n evaluators = [\r\n { pk_User: 1, UserFirst: 'Tuwad', UserLast: 'Tuwadero' },\r\n { pk_User: 2, UserFirst: 'Dodo', UserLast: 'Bernal' },\r\n { pk_User: 3, UserFirst: 'Raigor', UserLast: 'Stonehoof' },\r\n ],\r\n onAddColumn,\r\n isAddingColumn,\r\n onAddColumns,\r\n onAddFlexColumn,\r\n onRemoveFlexColumn,\r\n hasFlexColumn,\r\n headers,\r\n setShowAddColumnPopover,\r\n}) => {\r\n const [selectedEvaluators, setSelectedEvaluators] = useState([]);\r\n\r\n const availableEvaluators = { ...evaluators };\r\n let headerEvaluators = [];\r\n\r\n if (headers) {\r\n headers.forEach((header) => {\r\n if (header.Evaluators && header.Evaluators.Evaluators) {\r\n headerEvaluators = [...headerEvaluators, ...header.Evaluators.Evaluators];\r\n }\r\n });\r\n }\r\n\r\n headerEvaluators.forEach((e) => {\r\n delete availableEvaluators[e.pk_User];\r\n });\r\n\r\n const nonDeletedEvaluators = Object.values(availableEvaluators)\r\n .filter((e) => {\r\n if (e) {\r\n return !e.Deleted;\r\n } else {\r\n return false;\r\n }\r\n })\r\n .sort((a, b) => {\r\n if (a.UserLast > b.UserLast) {\r\n return 1;\r\n } else if (a.UserLast < b.UserLast) {\r\n return -1;\r\n } else {\r\n return 0;\r\n }\r\n });\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n {JSON.stringify(additionalDetails.AdditionalDetails, null, 2)}\r\n No Data
}\r\n />\r\n \r\n
\r\n\r\n {Object.keys(availableEvaluators).length <= 0 ? \r\n {Object.keys(availableEvaluators).length > 0 ? 'Add Evaluators to Column' : 'No Available Evaluators'}\r\n
\r\n \r\n {nonDeletedEvaluators.map((evaluator, index) => {\r\n if (evaluator.Deleted) {\r\n return;\r\n }\r\n let backgroundColor = index % 2 == 0 ? '#c7cbd1' : null;\r\n const isSelected = selectedEvaluators.indexOf(evaluator.pk_User) >= 0;\r\n if (isSelected) {\r\n backgroundColor = '#81cf7a';\r\n }\r\n return (\r\n {\r\n const newSelectedEvaluators = [...selectedEvaluators];\r\n if (isSelected) {\r\n const indexToDelete = selectedEvaluators.indexOf(evaluator.pk_User);\r\n\r\n newSelectedEvaluators.splice(indexToDelete, 1);\r\n } else {\r\n newSelectedEvaluators.push(evaluator.pk_User);\r\n }\r\n setSelectedEvaluators(newSelectedEvaluators);\r\n }}\r\n >\r\n
\r\n );\r\n })}\r\n \r\n {evaluator.UserLast ? `${evaluator.UserLast}, ` : ''}\r\n {evaluator.UserFirst || ''}\r\n
\r\n Add Evaluators Link here!
: null}\r\n \r\n\r\n {selectedEvaluators.length < 2 ? (\r\n
\r\n {\r\n if (onAddColumn) {\r\n onAddColumn({ evaluatorList: selectedEvaluators });\r\n }\r\n }}\r\n color={selectedEvaluators.length > 0 ? 'success' : null}\r\n style={{ ...style.genButton, width: '100%' }}\r\n >\r\n {\r\n if (onAddFlexColumn) {\r\n onAddFlexColumn();\r\n setShowAddColumnPopover(false);\r\n }\r\n }}\r\n style={{ ...style.genButton, width: '50%', backgroundColor: null }}\r\n >\r\n
\r\n ) : (\r\n <>\r\n Add Column
\r\n \r\n {/* {selectedEvaluators.length == 0 && !hasFlexColumn ? (\r\n Add Flex Column
\r\n \r\n ) : null} */}\r\n \r\n {\r\n if (onAddColumn) {\r\n onAddColumn({ evaluatorList: selectedEvaluators });\r\n }\r\n }}\r\n style={{ ...style.genButton, width: '50%' }}\r\n >\r\n {\r\n if (onAddColumns) {\r\n onAddColumns({ evaluatorList: selectedEvaluators });\r\n }\r\n }}\r\n style={{ ...style.genButton, width: '50%', backgroundColor: null }}\r\n >\r\n
\r\n \r\n )}\r\n\r\n Add Grouped
\r\n \r\n Add Separate
\r\n \r\n \r\n {\r\n if (setShowAddColumnPopover) {\r\n setShowAddColumnPopover(false);\r\n }\r\n }}\r\n style={{ ...style.genButton, backgroundColor: null }}\r\n >\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default AddColumnPopover;\r\n","const style = {\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n spacedBetweenRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n },\r\n disabledCheckbox: {\r\n cursor: 'not-allowed',\r\n fontSize: 25,\r\n marginRight: 10,\r\n color: 'darkgray',\r\n },\r\n enabledCheckbox: {\r\n fontSize: 25,\r\n marginRight: 10,\r\n cursor: 'pointer',\r\n },\r\n};\r\n\r\nexport default style;\r\n","import React from 'react';\r\nimport moment from 'moment-timezone';\r\n\r\nimport { Input, Label, Modal, ModalBody, ModalHeader, Button } from 'reactstrap';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faCheckSquare, faSquare } from '@fortawesome/free-regular-svg-icons';\r\n\r\nimport style from './CloneModal.style';\r\nimport Swal from 'sweetalert2';\r\n\r\nconst CloneModal = ({\r\n scheduleID,\r\n setWillEditThePast,\r\n resetCopyValues,\r\n showCloneModal,\r\n setShowCloneModal,\r\n setInterviewDateToClone,\r\n willCopyHeaders,\r\n setWillCopyHeaders,\r\n willCopyStartTime,\r\n setWillCopyStartTime,\r\n willCopyInterviewDuration,\r\n setWillCopyInterviewDuration,\r\n willCopyPassingDuration,\r\n setWillCopyPassingDuration,\r\n willCopyCandidateAssignments,\r\n setWillCopyCandidateAssignments,\r\n willCopyCustomEvents,\r\n setWillCopyCustomEvents,\r\n willCopyTimeSlots,\r\n setWillCopyTimeSlots,\r\n willCopyFlexEventEvaluators,\r\n setWillCopyFlexEventEvaluators,\r\n willCopyCustomDurations,\r\n setWillCopyCustomDurations,\r\n willCopyFocuses,\r\n setWillCopyFocuses,\r\n willCopyFlexEvents,\r\n setWillCopyFlexEvents,\r\n willCopyEvaluators,\r\n setWillCopyEvaluators,\r\n interviewDateToClone,\r\n cloneFromExistingSchedule,\r\n isCloning,\r\n isSubmitting,\r\n interviewDates,\r\n}) => {\r\n return (\r\n Cancel
\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n {\r\n setInterviewDateToClone(JSON.parse(e.target.value));\r\n }}\r\n >\r\n \r\n {interviewDates.map((interviewDate) => {\r\n if (interviewDate.pk_InterviewDate != scheduleID) {\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 setWillCopyStartTime(!willCopyStartTime);\r\n }}\r\n />\r\n
\r\n Start
\r\n \r\n {\r\n setWillCopyInterviewDuration(!willCopyInterviewDuration);\r\n }}\r\n />\r\n
\r\n Duration
\r\n \r\n {\r\n setWillCopyPassingDuration(!willCopyPassingDuration);\r\n }}\r\n />\r\n
\r\n Passing
\r\n \r\n
\r\n {\r\n setWillCopyFlexEventEvaluators(!willCopyFlexEventEvaluators);\r\n setWillCopyTimeSlots(!willCopyHeaders);\r\n setWillCopyHeaders(!willCopyHeaders);\r\n setWillCopyFocuses(!willCopyHeaders);\r\n }}\r\n style={style.enabledCheckbox}\r\n />\r\n
\r\n Headers/Evaluators
\r\n \r\n
\r\n \r\n {\r\n if (willCopyHeaders) {\r\n setWillCopyFocuses(!willCopyFocuses);\r\n }\r\n }}\r\n icon={willCopyFocuses ? faCheckSquare : faSquare}\r\n style={willCopyHeaders ? style.enabledCheckbox : style.disabledCheckbox}\r\n />\r\n
\r\n Focuses
\r\n \r\n {\r\n setWillCopyEvaluators(!willCopyFlexEvents);\r\n setWillCopyFlexEventEvaluators(!willCopyTimeSlots);\r\n setWillCopyTimeSlots(!willCopyTimeSlots);\r\n }}\r\n />\r\n
\r\n\r\n Time Slots
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n Custom Durations
\r\n \r\n
\r\n Custom Events
\r\n \r\n
\r\n \r\n {\r\n setWillCopyCandidateAssignments(!willCopyCandidateAssignments);\r\n }}\r\n />\r\n
\r\n\r\n Candidate Assignments
\r\n \r\n {\r\n setWillCopyEvaluators(!willCopyFlexEvents);\r\n setWillCopyFlexEvents(!willCopyFlexEvents);\r\n }}\r\n />\r\n
\r\n\r\n Flex Events
\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n if (willCopyFlexEvents) {\r\n setWillCopyEvaluators(!willCopyEvaluators);\r\n }\r\n }}\r\n />\r\n
\r\n Evaluators
\r\n \r\n {\r\n Swal.fire({\r\n title: 'Warning!',\r\n text: `Cloning will overwrite the current schedule's configuration and values (depending on the checked items). Are you sure you want to continue?`,\r\n type: 'warning',\r\n showCancelButton: true,\r\n confirmButtonColor: 'red',\r\n confirmButtonText: `Yes`,\r\n }).then((result) => {\r\n if (result.value) {\r\n cloneFromExistingSchedule();\r\n } else {\r\n setShowCloneModal(false);\r\n }\r\n });\r\n }}\r\n >\r\n Clone\r\n \r\n
\r\n \r\n {cancelText ? cancelText : 'Cancel'}\r\n
\r\n \r\n {acceptText ? acceptText : 'Yes'}
\r\n \r\n \r\n );\r\n };\r\n\r\n return (\r\n {title ? title : ''}
\r\n \r\n
\r\n {message ? message : 'Processing . . .'}
\r\n \r\n
\r\n \r\n {flexEventStart.format('hh:mm A')} - {flexEventEnd.format('hh:mm A')}\r\n
\r\n \r\n {`${flexEventEnd.diff(flexEventStart, 'minutes')} minutes`}\r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default FlexEventItem;\r\n","const style = {\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '100%',\r\n },\r\n spaceBetweenRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n },\r\n};\r\nexport default style;\r\n","const style = {\r\n buttonWrapper: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n },\r\n spacedBetweenRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'spaced-between',\r\n alignItems: 'center',\r\n },\r\n topButtonContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'spaced-between',\r\n margin: 5,\r\n marginTop: 0,\r\n marginBottom: 0,\r\n paddingTop: 5,\r\n paddingBottom: 5,\r\n },\r\n buttonLabel: {\r\n width: '100%',\r\n fontWeight: 'bold',\r\n fontSize: 'clamp(.1rem, .8vw, 1.5rem)',\r\n },\r\n clickable: {\r\n cursor: 'pointer',\r\n },\r\n manageFieldsContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '50%',\r\n padding: 10,\r\n height: 335,\r\n margin: 5,\r\n border: '1px solid black',\r\n overflowY: 'scroll',\r\n },\r\n manageFieldsContainerSubContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '100%',\r\n padding: 10,\r\n height: 290,\r\n margin: 5,\r\n overflowY: 'scroll',\r\n },\r\n manageFieldsRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'spaced-between',\r\n alignItems: 'center',\r\n borderBottom: '1px solid #b6b6b8',\r\n paddingBottom: 5,\r\n paddingTop: 5,\r\n },\r\n manageFieldsLabel: {\r\n alignItems: 'center',\r\n textAlign: 'center',\r\n width: '100%',\r\n },\r\n manageFieldsName: {\r\n alignItems: 'center',\r\n textAlign: 'center',\r\n width: '80%',\r\n marginRight: 5,\r\n marginLeft: 5,\r\n },\r\n manageFieldsNewName: {\r\n alignItems: 'center',\r\n textAlign: 'center',\r\n width: '90%',\r\n marginRight: 5,\r\n marginLeft: 5,\r\n },\r\n\r\n manageFieldsSortOrder: {\r\n alignItems: 'center',\r\n textAlign: 'center',\r\n width: '20%',\r\n },\r\n\r\n candidateDetailsContainer: {\r\n height: 450,\r\n overflowY: 'scroll',\r\n },\r\n manageFieldsEnabledItemsVisibilityLabels: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'flex-end',\r\n width: 'calc(100% - 27px)',\r\n },\r\n visibilityLabel: {\r\n alignSelf: 'flex-end',\r\n fontSize: 10,\r\n fontWeight: 'bold',\r\n marginLeft: 3,\r\n padding: 5,\r\n textAlign: 'center',\r\n verticalAlign: 'bottom',\r\n width: 45,\r\n },\r\n};\r\n\r\nexport default style;\r\n","import React, { useContext, useEffect, useRef, useState } from 'react';\r\n\r\nimport style from '../style';\r\nimport { fetchDataAgnostic } from 'Services/dataApi';\r\nimport { useAuth0 } from 'auth0/reactAuth0Spa';\r\nimport { DepartmentContext } from 'DepartmentWrapper';\r\nimport { formatBearerToken } from 'Common.functions';\r\nconst TagFilterPopover = ({ tagFilter, setTagFilter, setShowTagFilter }) => {\r\n const [tags, setTags] = useState([{ pk_Tag: null, Tag: 'All' }]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const dContext = useContext(DepartmentContext);\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n\r\n useEffect(() => {\r\n getTags();\r\n }, []);\r\n\r\n const getTags = () => {\r\n setIsLoading(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n fetchDataAgnostic(\r\n 'department/tags',\r\n { pk_Department: dContext.department.pk_Department },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n setTags([{ pk_Tag: null, Tag: 'All' }, ...res.data]);\r\n setIsLoading(false);\r\n })\r\n .catch((err) => {\r\n setIsLoading(false);\r\n });\r\n })\r\n .catch((err) => {\r\n setIsLoading(false);\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n return (\r\n \r\n {' '}\r\n {flexEvent.FlexEventName || flexEvent.EventName}{' '}\r\n {urlIssue ? (\r\n <>\r\n \r\n Warning: {isCustomAndNoLink ? `Custom Event URL is missing!` : `Main Room URL is missing!`}\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n \r\n {' '}\r\n Loading...\r\n
\r\n ) : (\r\n \r\n {tags && tags.length > 1 ? (\r\n tags\r\n .sort((a, b) => {\r\n return a.Tag > b.Tag ? 1 : a.Tag < b.Tag ? -1 : 0;\r\n })\r\n .map((tag, i) => {\r\n const backgroundColor = i % 2 == 0 ? 'white' : '#f2f2f2';\r\n\r\n return (\r\n {\r\n setTagFilter(tag);\r\n setShowTagFilter(false);\r\n }}\r\n >\r\n {tag.Tag}\r\n
\r\n );\r\n })\r\n ) : isLoading ? (\r\n \r\n //
\r\n // Tag Filter
\r\n // \r\n // {\r\n // setShowTagFilter(false);\r\n // }}\r\n // />\r\n //
\r\n // \r\n //
\r\n // \r\n // \r\n // {tags.map((tag, i) => {\r\n // const backgroundColor = i % 2 == 0 ? 'white' : '#f2f2f2';\r\n\r\n // return (\r\n // {\r\n // setTagFilter(tag);\r\n // setShowTagFilter(false);\r\n // }}\r\n // >\r\n // {tag.Tag}\r\n //
\r\n // );\r\n // })}\r\n // \r\n Must select at least 1 or more Evaluators or Candidates.\r\n
\r\n );\r\n }\r\n };\r\n\r\n const clearFields = () => {\r\n setEventName('');\r\n setStartDateTime();\r\n setEndDateTime();\r\n setDuration();\r\n setURLType('AllDay');\r\n setURL(mainRoomURL);\r\n setDetails(mainRoomURLDetails);\r\n setSelectedCandidates([]);\r\n setSelectedEvaluators([]);\r\n };\r\n\r\n const renderFilterByTagButton = () => {\r\n return (\r\n \r\n \r\n
\r\n \r\n {tagFilter.pk_Tag ? tagFilter.Tag : 'All'}\r\n
\r\n \r\n
\r\n \r\n {renderTagFilterPopover()}\r\n \r\n );\r\n };\r\n\r\n const renderTagFilterPopover = () => {\r\n return (\r\n \r\n
\r\n Tag Filter
\r\n \r\n {\r\n setShowTagFilterPopover(false);\r\n }}\r\n />\r\n
\r\n Assign Users {renderAssignError()}
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n Candidates ({selectedCandidates.length}/{filteredCandidates.length})\r\n
\r\n \r\n
\r\n \r\n {\r\n toggleSelectAll('candidates');\r\n }}\r\n />\r\n
\r\n All
\r\n \r\n
\r\n {renderFilterByTagButton()}
\r\n \r\n \r\n {tagString}\r\n \r\n ) : null} */}\r\n
\r\n );\r\n })}\r\n \r\n {filteredCandidates.map((c) => {\r\n const { pk_Candidate, PhotoUrl, Tags = [] } = c;\r\n const isBusy = candidatesInRow.includes(pk_Candidate);\r\n const isSelected = selectedCandidates.includes(pk_Candidate);\r\n const borderColor = isBusy ? '#f55c5c' : null;\r\n const backgroundColor = isSelected ? '#d9f5ff' : c.color;\r\n const id = `candidate_${pk_Candidate}`;\r\n const isTagMatch = Tags.find((tag) => {\r\n return tagFilter == null || tagFilter.pk_Tag == null || tag.pk_Tag === tagFilter.pk_Tag;\r\n });\r\n\r\n let tagString = 'Tags: ';\r\n\r\n Tags.forEach((tag, index) => {\r\n tagString += tag.Tag;\r\n if (index < Tags.length - 1) {\r\n tagString += ', ';\r\n }\r\n });\r\n\r\n if (!isTagMatch && tagFilter.pk_Tag != null) {\r\n return;\r\n }\r\n return (\r\n {\r\n const newSelectedCandidates = selectedCandidates.slice();\r\n if (isSelected) {\r\n newSelectedCandidates.splice(selectedCandidates.indexOf(pk_Candidate), 1);\r\n } else {\r\n newSelectedCandidates.push(pk_Candidate);\r\n }\r\n setSelectedCandidates(newSelectedCandidates);\r\n }}\r\n >\r\n
\r\n\r\n {isBusy ? (\r\n \r\n
\r\n \r\n
\r\n \r\n {PhotoUrl ? (\r\n
\r\n \r\n \r\n {tagString}\r\n
\r\n ) : null}\r\n \r\n 1 ? faTags : faTag}\r\n style={{ marginLeft: 5, marginTop: 5 }}\r\n />\r\n ) : null} */}\r\n
\r\n {Tags.length > 0 ? (\r\n {`${c.LastName}, ${c.FirstName}`}
\r\n {/* {Tags.length > 0 ? (\r\n \r\n \r\n Candidate is Scheduled for Interview sometime between the start and end time!\r\n \r\n
\r\n ) : null}\r\n\r\n {/* {Tags.length > 0 ? (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n Evaluators ({selectedEvaluators.length}/{evaluators.length})\r\n
\r\n \r\n
\r\n \r\n {\r\n toggleSelectAll('evaluators');\r\n }}\r\n />\r\n
\r\n All
\r\n \r\n
\r\n \r\n {evaluators.map((e) => {\r\n const { pk_User, UserPhotoUrl } = e;\r\n const { metaData = {} } = scheduleData;\r\n const { FlexEvents = [] } = metaData;\r\n const isSelected = selectedEvaluators.includes(pk_User);\r\n const flexEventsInInterval = e.FlexEvents\r\n ? getFlexEventsWithinTimeInterval(\r\n [...e.FlexEvents, ...FlexEvents],\r\n StartDateTime,\r\n momentStart,\r\n momentEnd,\r\n )\r\n : [];\r\n let isBusy = false;\r\n if (e.FlexEvents) {\r\n let index = 0;\r\n while (index < e.FlexEvents.length && !isBusy) {\r\n const flexEvent = e.FlexEvents[index];\r\n const exists = flexEventsInInterval.find((f) => {\r\n return f.pk_FlexEvent === flexEvent.pk_FlexEvent;\r\n });\r\n\r\n if (exists) {\r\n isBusy = true;\r\n }\r\n index++;\r\n }\r\n }\r\n\r\n if (!isBusy) {\r\n const evaluatorColumn = getEvaluatorColumn(scheduleData, e);\r\n if (evaluatorColumn) {\r\n if (\r\n candidatesInSlotsInInterval.find((c) => {\r\n return c.fk_ScheduleAssignment === evaluatorColumn.pk_ScheduleAssignment;\r\n })\r\n ) {\r\n isBusy = true;\r\n }\r\n }\r\n }\r\n\r\n return (\r\n {\r\n const newSelectedEvaluators = selectedEvaluators.slice();\r\n if (isSelected) {\r\n newSelectedEvaluators.splice(selectedEvaluators.indexOf(pk_User), 1);\r\n } else {\r\n newSelectedEvaluators.push(pk_User);\r\n }\r\n setSelectedEvaluators(newSelectedEvaluators);\r\n }}\r\n >\r\n
\r\n );\r\n })}\r\n \r\n
\r\n \r\n
\r\n \r\n {UserPhotoUrl ? (\r\n
\r\n {`${e.UserLast}, ${e.UserFirst}`}
\r\n {isBusy ? (\r\n \r\n \r\n Evaluator is Scheduled for a candidate Interview or an Event sometime between the start\r\n and end time!\r\n \r\n
\r\n ) : null}\r\n \r\n \r\n
\r\n \r\n );\r\n };\r\n\r\n const saveEvent = () => {\r\n if (!checkEventErrors()) {\r\n return;\r\n }\r\n\r\n const pathExploded = history.location.pathname.split('/');\r\n const scheduleID = pathExploded[pathExploded.length - 1];\r\n const monthDate = DateOfInterview\r\n ? moment.tz(DateOfInterview, null).format('MMM DD, YYYY')\r\n : moment.tz(null, null).format('MMM DD, YYYY');\r\n\r\n const event = {\r\n EventName,\r\n EnableForAllUsers: false,\r\n EnableAbsoluteTime: true,\r\n EnableForAllCandidates: false,\r\n CustomUrl: URL ? urlWithHttpProtocol(URL) : null,\r\n UrlType: URLType,\r\n CustomUrlDescription: Details,\r\n };\r\n\r\n const momentStart = moment.tz(`${monthDate} ${StartDateTime}`, null);\r\n const momentEnd = moment.tz(`${monthDate} ${EndDateTime}`, null);\r\n event.FlexTimeStart = momentStart.format('HH:mm:ss');\r\n event.FlexDateStart = momentStart.format('YYYY-MM-DD');\r\n\r\n event.FlexTimeEnd = momentEnd.format('HH:mm:ss');\r\n event.FlexDateEnd = momentEnd.format('YYYY-MM-DD');\r\n // EndDateTime\r\n event.StartDateTime = moment.tz(`${monthDate} ${StartDateTime}`, null).format();\r\n event.EndDateTime = moment.tz(`${monthDate} ${EndDateTime}`, null).format();\r\n\r\n getTokenSilently()\r\n .then((token) => {\r\n postDataAgnostic(\r\n 'department/season/schedule/flexEvent',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n pk_InterviewDate: pk_InterviewDate ? pk_InterviewDate : parseInt(scheduleID),\r\n },\r\n {\r\n payload: [{ event, evaluators: selectedEvaluators || [], candidates: selectedCandidates || [] }],\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n updateAllData();\r\n setShowAddFlexEventModal(false);\r\n setShowFlexEventDetailModal(false);\r\n setIsSubmitting(false);\r\n })\r\n .catch((err) => {\r\n setIsSubmitting(false);\r\n });\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const isValid = () => {\r\n return (\r\n EventName &&\r\n EventName.toLowerCase() !== 'unavailable' &&\r\n (selectedCandidates.length > 0 || selectedEvaluators.length > 0) &&\r\n StartDateTime &&\r\n EndDateTime &&\r\n checkFieldValidity('Time Start').isValid &&\r\n checkFieldValidity('Time End').isValid\r\n );\r\n };\r\n\r\n const toggleSelectAll = (type) => {\r\n if (type === 'candidates') {\r\n if (selectedCandidates.length != 0 && selectedCandidates.length === candidates.length) {\r\n setSelectAllCandidates(false);\r\n setSelectedCandidates([]);\r\n } else {\r\n const newSelectedCandidates = [];\r\n candidates.forEach((c) => {\r\n if (!newSelectedCandidates.includes(c.pk_Candidate)) {\r\n newSelectedCandidates.push(c.pk_Candidate);\r\n }\r\n });\r\n setSelectAllCandidates(true);\r\n setSelectedCandidates(newSelectedCandidates);\r\n }\r\n } else {\r\n if (selectedEvaluators.length != 0 && selectedEvaluators.length === evaluators.length) {\r\n setSelectAllEvaluators(false);\r\n setSelectedEvaluators([]);\r\n } else {\r\n const newSelectedEvaluators = [];\r\n evaluators.forEach((e) => {\r\n if (!newSelectedEvaluators.includes(e.pk_User)) {\r\n newSelectedEvaluators.push(e.pk_User);\r\n }\r\n });\r\n setSelectAllEvaluators(true);\r\n setSelectedEvaluators(newSelectedEvaluators);\r\n }\r\n }\r\n };\r\n\r\n // For lighting up invalid feedback text\r\n const checkFieldValidity = (field) => {\r\n let type = 'beyond_other';\r\n let isValid = true;\r\n const { metaData, body = [] } = scheduleData || {};\r\n\r\n const timeStart = moment.tz(`${body && body[0] ? body[0].slot : ''}`, null);\r\n const timeEnd = moment.tz(`${body && body[body.length - 1] ? body[body.length - 1].slotEnd : ''}`, null);\r\n\r\n // if (body && body[body.length - 1]) {\r\n // const lastTimeSlot = body[body.length - 1];\r\n // if (lastTimeSlot.CustomDurationInMinutes) {\r\n // timeEnd.add(lastTimeSlot.CustomDurationInMinutes, 'minutes');\r\n // } else {\r\n // timeEnd.add(metaData.StandardDurationInMinutes, 'minutes');\r\n // }\r\n\r\n // if (lastTimeSlot.CustomPassingDurationInMinutes) {\r\n // timeEnd.add(lastTimeSlot.CustomPassingDurationInMinutes, 'minutes');\r\n // } else {\r\n // timeEnd.add(metaData.StandardPassingDurationInMinutes, 'minutes');\r\n // }\r\n // }\r\n switch (field) {\r\n case 'Title':\r\n return EventName != null && EventName && EventName.toLowerCase() !== 'unavailable';\r\n case 'Time Start':\r\n isValid =\r\n StartDateTime != null &&\r\n moment\r\n .tz(`${monthDate} ${StartDateTime}`, null)\r\n .isSameOrBefore(moment.tz(`${monthDate} ${EndDateTime}`, null)) &&\r\n moment.tz(`${monthDate} ${StartDateTime}`, null).isSameOrAfter(timeStart);\r\n\r\n if (!moment.tz(`${monthDate} ${StartDateTime}`, null).isSameOrAfter(timeStart)) {\r\n type = 'out_of_bounds';\r\n }\r\n\r\n return { isValid, type };\r\n break;\r\n case 'Time End':\r\n isValid =\r\n EndDateTime != null &&\r\n moment.tz(`${monthDate} ${EndDateTime}`, null).isSameOrBefore(timeEnd) &&\r\n moment\r\n .tz(`${monthDate} ${EndDateTime}`, null)\r\n .isSameOrAfter(moment.tz(`${monthDate} ${StartDateTime}`, null));\r\n\r\n if (!moment.tz(`${monthDate} ${EndDateTime}`, null).isSameOrBefore(timeEnd)) {\r\n type = 'out_of_bounds';\r\n }\r\n return { isValid, type };\r\n break;\r\n }\r\n };\r\n\r\n // For popping erorr alerts.\r\n const checkEventErrors = () => {\r\n if (moment.tz(`${monthDate} ${StartDateTime}`, null).isAfter(moment.tz(`${monthDate} ${EndDateTime}`, null))) {\r\n Swal.fire('Invalid Time Values!', 'Time End is earlier than Time Start. Fix before Saving!', 'error');\r\n return false;\r\n }\r\n\r\n return true;\r\n };\r\n\r\n const timeStart = moment.tz(`${body && body[0] ? body[0].slot : ''}`, null);\r\n const timeEnd = moment.tz(`${body && body[body.length - 1] ? body[body.length - 1].slotEnd : ''}`, null);\r\n\r\n const useAllDayLink = URLType === 'AllDay';\r\n\r\n return (\r\n \r\n
\r\n \r\n Add Flex Event
\r\n \r\n \r\n {mainRoomURL ? (\r\n \r\n
\r\n )}\r\n \r\n\r\n \r\n {\r\n e.stopPropagation();\r\n\r\n setURLType('AllDay');\r\n setDetails(mainRoomURLDetails);\r\n }}\r\n >\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n {\r\n const newValue = e.target.value;\r\n if (timeOuts.title) {\r\n clearTimeout(timeOuts.title);\r\n }\r\n\r\n timeOuts.title = setTimeout(() => {\r\n setEventName(newValue);\r\n }, 300);\r\n }}\r\n />\r\n \r\n Invalid Event name! Cannot be empty or 'UNAVAILABLE'.\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n {\r\n const newStart = moment.tz(`${monthDate} ${e.target.value}`, null);\r\n const newMomentEnd = moment.tz(`${monthDate} ${e.target.value}`, null);\r\n newMomentEnd.add(Duration, 'minutes');\r\n\r\n setEndDateTime(newMomentEnd.format('hh:mm A'));\r\n setStartDateTime(e.target.value);\r\n setTimeslot('custom');\r\n }}\r\n />\r\n \r\n {checkFieldValidity('Time Start').type === 'beyond_other'\r\n ? `Start Time MUST be equal to or before ${moment\r\n .tz(`${monthDate} ${EndDateTime}`, null)\r\n .format('hh:mm A')}`\r\n : `Start Time MUST be equal to or after ${timeStart.format('hh:mm A')}`}\r\n \r\n
\r\n \r\n \r\n {\r\n const momentStart = moment.tz(`${monthDate} ${StartDateTime}`, null);\r\n const momentEnd = moment.tz(`${monthDate} ${e.target.value}`, null);\r\n let newDuration = momentEnd.diff(momentStart, 'minutes');\r\n if (newDuration < 0) {\r\n newDuration = 0;\r\n }\r\n setDuration(newDuration);\r\n setEndDateTime(e.target.value);\r\n setTimeslot('custom');\r\n }}\r\n />\r\n \r\n {checkFieldValidity('Time End').type === 'beyond_other'\r\n ? `End Time MUST be equal to or after ${moment\r\n .tz(`${monthDate} ${StartDateTime}`, null)\r\n .format('hh:mm A')}`\r\n : `End Time MUST be equal to or before ${timeEnd.format('HH:mm')}`}\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n {\r\n const newDuration = Math.abs(parseInt(e.target.value));\r\n const momentStart = moment.tz(`${monthDate} ${StartDateTime}`, null);\r\n momentStart.add(newDuration, 'minutes');\r\n setDuration(newDuration);\r\n setEndDateTime(momentStart.format('HH:mm'));\r\n setTimeslot('custom');\r\n }}\r\n />\r\n
\r\n \r\n
\r\n\r\n URL:
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n Use All Day Meeting Link\r\n \r\n {' '}\r\n Use the All Day Meeting link for this meeting.\r\n \r\n
\r\n Missing All Day Meeting Link!
\r\n \r\n \r\n {`The All Day Meeting Link can be configured by clicking the `}\r\n \r\n
\r\n \r\n {\r\n e.stopPropagation();\r\n setURL(customURL);\r\n setURLType('Custom');\r\n }}\r\n >\r\n
\r\n \r\n \r\n \r\n {/*
*/}\r\n\r\n \r\n {\r\n setURL(customURL);\r\n setURLType('Custom');\r\n }}\r\n >\r\n \r\n Custom\r\n
\r\n \r\n {\r\n const newURL = e.target.value;\r\n setURL(newURL);\r\n setCustomURL(newURL);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Use Custom Meeting Link\r\n \r\n {' '}\r\n Use a unique link for this meeting\r\n \r\n
\r\n \r\n {\r\n const newURL = e.target.value;\r\n setURL(newURL);\r\n setCustomURL(newURL);\r\n }}\r\n />\r\n
\r\n \r\n {\r\n setDetails(e.target.value);\r\n }}\r\n />\r\n
\r\n \r\n {renderTabContent()}
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {tagFilter.pk_Tag ? tagFilter.Tag : 'All'}\r\n
\r\n \r\n
\r\n \r\n {renderTagFilterPopover()}\r\n \r\n );\r\n };\r\n\r\n const renderTagFilterPopover = () => {\r\n return (\r\n \r\n
\r\n Tag Filter
\r\n \r\n {\r\n setShowTagFilterPopover(false);\r\n }}\r\n />\r\n
\r\n Assign Users {renderAssignError()}
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n Candidates ({selectedCandidates.length}/{filteredCandidates.length})\r\n
\r\n \r\n
\r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n toggleSelectAll('candidates');\r\n }}\r\n />\r\n
\r\n All
\r\n \r\n
\r\n {renderFilterByTagButton()}
\r\n \r\n {' '}\r\n \r\n {tagString}\r\n \r\n ) : null} */}\r\n
\r\n );\r\n })}\r\n \r\n {filteredCandidates.map((c) => {\r\n const { pk_Candidate, PhotoUrl, Tags = [] } = c;\r\n const isBusy = candidatesInRow.includes(pk_Candidate);\r\n const isSelected = selectedCandidates.includes(pk_Candidate);\r\n const borderColor = isBusy ? '#f55c5c' : null;\r\n const backgroundColor = isSelected ? '#d9f5ff' : c.color; //'white',\r\n const id = `candidate_${pk_Candidate}`;\r\n let tagString = 'Tags: ';\r\n Tags.forEach((tag, index) => {\r\n tagString += tag.Tag;\r\n if (index < Tags.length - 1) {\r\n tagString += ', ';\r\n }\r\n });\r\n\r\n return (\r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n const newSelectedCandidates = selectedCandidates.slice();\r\n if (isSelected) {\r\n newSelectedCandidates.splice(selectedCandidates.indexOf(pk_Candidate), 1);\r\n } else {\r\n newSelectedCandidates.push(pk_Candidate);\r\n }\r\n setSelectedCandidates(newSelectedCandidates);\r\n }}\r\n >\r\n
\r\n {isBusy ? (\r\n \r\n
\r\n \r\n
\r\n \r\n {PhotoUrl ? (\r\n
\r\n \r\n \r\n {tagString}\r\n
\r\n ) : null}\r\n \r\n 1 ? faTags : faTag}\r\n style={{ marginLeft: 5, marginTop: 5 }}\r\n />\r\n ) : null} */}\r\n
\r\n {Tags.length > 0 ? (\r\n {`${c.LastName}, ${c.FirstName}`}
\r\n {/* {Tags.length > 0 ? (\r\n \r\n \r\n Candidate is Scheduled for Interview sometime between the start and end time!\r\n \r\n
\r\n ) : null}\r\n {/* {Tags.length > 0 ? (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n Evaluators ({selectedEvaluators.length}/{evaluators.length})\r\n
\r\n \r\n
\r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n toggleSelectAll('evaluators');\r\n }}\r\n />\r\n
\r\n All
\r\n \r\n
\r\n \r\n {evaluators.map((e) => {\r\n const { pk_User, UserPhotoUrl } = e;\r\n const { metaData = {} } = scheduleData;\r\n const { FlexEvents = [] } = metaData;\r\n const isSelected = selectedEvaluators.includes(pk_User);\r\n const flexEventsInInterval = e.FlexEvents\r\n ? getFlexEventsWithinTimeInterval(\r\n [...e.FlexEvents, ...FlexEvents],\r\n StartDateTime,\r\n momentStart,\r\n momentEnd,\r\n )\r\n : [];\r\n let isBusy = false;\r\n if (e.FlexEvents) {\r\n let index = 0;\r\n while (index < e.FlexEvents.length && !isBusy) {\r\n const flexEvent = e.FlexEvents[index];\r\n const exists = flexEventsInInterval.find((f) => {\r\n return (\r\n f.pk_FlexEvent === flexEvent.pk_FlexEvent &&\r\n f.pk_FlexEvent != flexEventToEdit.pk_FlexEvent\r\n );\r\n });\r\n\r\n if (exists) {\r\n isBusy = true;\r\n }\r\n index++;\r\n }\r\n }\r\n\r\n if (!isBusy) {\r\n const evaluatorColumn = getEvaluatorColumn(scheduleData, e);\r\n if (evaluatorColumn) {\r\n if (\r\n candidatesInSlotsInInterval.find((c) => {\r\n return c.fk_ScheduleAssignment === evaluatorColumn.pk_ScheduleAssignment;\r\n })\r\n ) {\r\n isBusy = true;\r\n }\r\n }\r\n }\r\n\r\n return (\r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n const newSelectedEvaluators = selectedEvaluators.slice();\r\n if (isSelected) {\r\n newSelectedEvaluators.splice(selectedEvaluators.indexOf(pk_User), 1);\r\n } else {\r\n newSelectedEvaluators.push(pk_User);\r\n }\r\n setSelectedEvaluators(newSelectedEvaluators);\r\n }}\r\n >\r\n
\r\n );\r\n })}\r\n \r\n
\r\n \r\n
\r\n \r\n {UserPhotoUrl ? (\r\n
\r\n {`${e.UserLast}, ${e.UserFirst}`}
\r\n {isBusy ? (\r\n \r\n \r\n Evaluator is Scheduled for a candidate Interview or an Event sometime between the start\r\n and end time!\r\n \r\n
\r\n ) : null}\r\n \r\n \r\n
\r\n \r\n );\r\n };\r\n\r\n const saveEvent = async () => {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n\r\n if (!checkEventErrors()) {\r\n return;\r\n }\r\n const pathExploded = history.location.pathname.split('/');\r\n const scheduleID = pathExploded[pathExploded.length - 1];\r\n const monthDate = DateOfInterview\r\n ? moment.tz(DateOfInterview, null).format('MMM DD, YYYY')\r\n : moment.tz(null, null).format('MMM DD, YYYY');\r\n\r\n const event = {\r\n EventName,\r\n EnableForAllUsers: false,\r\n EnableAbsoluteTime: true,\r\n EnableForAllCandidates: false,\r\n CustomUrl: URL ? urlWithHttpProtocol(URL) : null,\r\n UrlType: URLType,\r\n CustomUrlDescription: Details,\r\n };\r\n\r\n const momentStart = moment.tz(`${monthDate} ${StartDateTime}`, null);\r\n const momentEnd = moment.tz(`${monthDate} ${EndDateTime}`, null);\r\n event.FlexTimeStart = momentStart.format('HH:mm:ss');\r\n event.FlexDateStart = momentStart.format('YYYY-MM-DD');\r\n\r\n event.FlexTimeEnd = momentEnd.format('HH:mm:ss');\r\n event.FlexDateEnd = momentEnd.format('YYYY-MM-DD');\r\n\r\n event.StartDateTime = moment.tz(`${monthDate} ${StartDateTime}`, null).format();\r\n event.EndDateTime = moment.tz(`${monthDate} ${EndDateTime}`, null).format();\r\n\r\n const writeEvaluatorPrimaryKeys = [];\r\n const deleteEvaluatorPrimaryKeys = [];\r\n const writeCandidatePrimaryKeys = [];\r\n const deleteCandidatePrimaryKeys = [];\r\n\r\n selectedEvaluators.forEach((pk_User) => {\r\n if (!oldEvaluators.includes(pk_User) && !writeEvaluatorPrimaryKeys.includes(pk_User)) {\r\n writeEvaluatorPrimaryKeys.push(pk_User);\r\n }\r\n });\r\n\r\n oldEvaluators.forEach((pk_User) => {\r\n if (!selectedEvaluators.includes(pk_User) && !deleteEvaluatorPrimaryKeys.includes(pk_User)) {\r\n deleteEvaluatorPrimaryKeys.push(pk_User);\r\n }\r\n });\r\n\r\n selectedCandidates.forEach((pk_Candidate) => {\r\n if (!oldCandidates.includes(pk_Candidate) && !writeCandidatePrimaryKeys.includes(pk_Candidate)) {\r\n writeCandidatePrimaryKeys.push(pk_Candidate);\r\n }\r\n });\r\n\r\n oldCandidates.forEach((pk_Candidate) => {\r\n if (!selectedCandidates.includes(pk_Candidate) && !deleteCandidatePrimaryKeys.includes(pk_Candidate)) {\r\n deleteCandidatePrimaryKeys.push(pk_Candidate);\r\n }\r\n });\r\n\r\n setIsSubmitting(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n putData(\r\n 'department/season/schedule/flexEvent',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n pk_FlexEvent: flexEventToEdit.pk_FlexEvent,\r\n },\r\n {\r\n event,\r\n writeEvaluatorPrimaryKeys,\r\n deleteEvaluatorPrimaryKeys,\r\n writeCandidatePrimaryKeys,\r\n deleteCandidatePrimaryKeys,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n updateAllData();\r\n setShowEditFlexEventModal(false);\r\n setShowFlexEventDetailModal(false);\r\n setIsSubmitting(false);\r\n })\r\n .catch((err) => {\r\n setIsSubmitting(false);\r\n });\r\n })\r\n .catch((err) => {\r\n setIsSubmitting(false);\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const deleteEvent = () => {\r\n setIsSubmitting(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n deleteData(\r\n 'department/season/schedule/flexEvent',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n },\r\n { pk_FlexEvents: [flexEventToEdit.pk_FlexEvent] },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n updateAllData();\r\n setShowEditFlexEventModal(false);\r\n setShowFlexEventDetailModal(false);\r\n setIsSubmitting(false);\r\n })\r\n .catch((err) => {});\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const isValid = () => {\r\n return (\r\n EventName &&\r\n EventName.toLowerCase() !== 'unavailable' &&\r\n (selectedCandidates.length > 0 || selectedEvaluators.length > 0) &&\r\n StartDateTime &&\r\n EndDateTime\r\n );\r\n };\r\n\r\n const toggleSelectAll = (type) => {\r\n if (type === 'candidates') {\r\n if (candidates && selectedCandidates.length != 0 && selectedCandidates.length === candidates.length) {\r\n setSelectAllCandidates(false);\r\n setSelectedCandidates([]);\r\n } else {\r\n const newSelectedCandidates = [];\r\n candidates.forEach((c) => {\r\n if (!newSelectedCandidates.includes(c.pk_Candidate)) {\r\n newSelectedCandidates.push(c.pk_Candidate);\r\n }\r\n });\r\n setSelectAllCandidates(true);\r\n setSelectedCandidates(newSelectedCandidates);\r\n }\r\n } else {\r\n if (selectedEvaluators.length != 0 && selectedEvaluators.length === evaluators.length) {\r\n setSelectAllEvaluators(false);\r\n setSelectedEvaluators([]);\r\n } else {\r\n const newSelectedEvaluators = [];\r\n evaluators.forEach((e) => {\r\n if (!newSelectedEvaluators.includes(e.pk_User)) {\r\n newSelectedEvaluators.push(e.pk_User);\r\n }\r\n });\r\n setSelectAllEvaluators(true);\r\n setSelectedEvaluators(newSelectedEvaluators);\r\n }\r\n }\r\n };\r\n\r\n // For lighting up invalid feedback text\r\n const checkFieldValidity = (field) => {\r\n let type = 'beyond_other';\r\n let isValid = true;\r\n const { metaData, body = [] } = scheduleData || {};\r\n\r\n const timeStart = moment.tz(`${body && body[0] ? body[0].slot : ''}`, null);\r\n const timeEnd = moment.tz(`${body && body[body.length - 1] ? body[body.length - 1].slotEnd : ''}`, null);\r\n\r\n // if (body && body[body.length - 1]) {\r\n // const lastTimeSlot = body[body.length - 1];\r\n // if (lastTimeSlot.CustomDurationInMinutes) {\r\n // timeEnd.add(lastTimeSlot.CustomDurationInMinutes, 'minutes');\r\n // } else {\r\n // timeEnd.add(metaData.StandardDurationInMinutes, 'minutes');\r\n // }\r\n\r\n // if (lastTimeSlot.CustomPassingDurationInMinutes) {\r\n // timeEnd.add(lastTimeSlot.CustomPassingDurationInMinutes, 'minutes');\r\n // } else {\r\n // timeEnd.add(metaData.StandardPassingDurationInMinutes, 'minutes');\r\n // }\r\n // }\r\n switch (field) {\r\n case 'Title':\r\n return EventName != null && EventName && EventName.toLowerCase() !== 'unavailable';\r\n case 'Time Start':\r\n isValid =\r\n StartDateTime != null &&\r\n moment\r\n .tz(`${monthDate} ${StartDateTime}`, null)\r\n .isSameOrBefore(moment.tz(`${monthDate} ${EndDateTime}`, null)) &&\r\n moment.tz(`${monthDate} ${StartDateTime}`, null).isSameOrAfter(timeStart);\r\n\r\n if (!moment.tz(`${monthDate} ${StartDateTime}`, null).isSameOrAfter(timeStart)) {\r\n type = 'out_of_bounds';\r\n }\r\n\r\n return { isValid, type };\r\n break;\r\n case 'Time End':\r\n isValid =\r\n EndDateTime != null &&\r\n moment.tz(`${monthDate} ${EndDateTime}`, null).isSameOrBefore(timeEnd) &&\r\n moment\r\n .tz(`${monthDate} ${EndDateTime}`, null)\r\n .isSameOrAfter(moment.tz(`${monthDate} ${StartDateTime}`, null));\r\n\r\n if (!moment.tz(`${monthDate} ${EndDateTime}`, null).isSameOrBefore(timeEnd)) {\r\n type = 'out_of_bounds';\r\n }\r\n return { isValid, type };\r\n break;\r\n }\r\n };\r\n\r\n // For popping erorr alerts.\r\n const checkEventErrors = () => {\r\n if (moment.tz(`${monthDate} ${StartDateTime}`, null).isAfter(moment.tz(`${monthDate} ${EndDateTime}`, null))) {\r\n Swal.fire('Invalid Time Values!', 'Time End is earlier than Time Start. Fix before Saving!', 'error');\r\n return false;\r\n }\r\n return true;\r\n };\r\n\r\n const renderAssignError = () => {\r\n if (selectedCandidates.length <= 0 && selectedEvaluators.length <= 0) {\r\n return (\r\n \r\n Must select at least 1 or more Evaluators or Candidates.\r\n
\r\n );\r\n }\r\n };\r\n\r\n const timeStart = moment.tz(`${body && body[0] ? body[0].slot : ''}`, null);\r\n const timeEnd = moment.tz(`${body && body[body.length - 1] ? body[body.length - 1].slotEnd : ''}`, null);\r\n const useAllDayLink = URLType === 'AllDay';\r\n\r\n return (\r\n \r\n
\r\n \r\n Edit Flex Event
\r\n \r\n {\r\n e.stopPropagation();\r\n\r\n setURLType('AllDay');\r\n setDetails(mainRoomURLDetails);\r\n }}\r\n >\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n {\r\n const newValue = e.target.value;\r\n if (timeOuts.title) {\r\n clearTimeout(timeOuts.title);\r\n }\r\n\r\n timeOuts.title = setTimeout(() => {\r\n setEventName(newValue);\r\n }, 300);\r\n }}\r\n />\r\n \r\n {`Invalid Event name! Cannot be empty or 'UNAVAILABLE'.`}\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n {\r\n const newStart = moment.tz(`${monthDate} ${e.target.value}`, null);\r\n const newMomentEnd = moment.tz(`${monthDate} ${e.target.value}`, null);\r\n newMomentEnd.add(Duration, 'minutes');\r\n const { body = [] } = scheduleData;\r\n\r\n const scheduleEnd = moment.tz(`${body[body.length - 1].slotEnd}`, null);\r\n const scheduleStart = moment.tz(`${body[0].slot}`, null);\r\n console.log(\"newMomentEnd.format('hh:mm A'): \", newMomentEnd.format('hh:mm A'));\r\n if (\r\n newStart.isSameOrAfter(moment.tz(DateOfInterview, null)) &&\r\n newMomentEnd.isSameOrBefore(scheduleEnd)\r\n ) {\r\n setEndDateTime(newMomentEnd.format('hh:mm A'));\r\n setStartDateTime(e.target.value);\r\n setTimeslot('custom');\r\n } else {\r\n Swal.fire(\r\n 'Oops...',\r\n `The value you selected is beyond the schedule. Please select a time value between ${scheduleStart.format(\r\n 'hh:mm A',\r\n )} and ${scheduleEnd.format('hh:mm A')}`,\r\n 'error',\r\n );\r\n }\r\n }}\r\n />\r\n \r\n {checkFieldValidity('Time Start').type === 'beyond_other'\r\n ? `Start Time MUST be equal to or before ${moment\r\n .tz(`${monthDate} ${EndDateTime}`, null)\r\n .format('hh:mm A')}`\r\n : `Start Time MUST be equal to or after ${timeStart.format('hh:mm A')}`}\r\n \r\n
\r\n \r\n \r\n {\r\n const momentStart = moment.tz(`${monthDate} ${StartDateTime}`, null);\r\n const momentEnd = moment.tz(`${monthDate} ${e.target.value}`, null);\r\n let newDuration = momentEnd.diff(momentStart, 'minutes');\r\n if (newDuration < 0) {\r\n newDuration = 0;\r\n }\r\n setDuration(newDuration);\r\n setEndDateTime(e.target.value);\r\n setTimeslot('custom');\r\n }}\r\n />\r\n \r\n {checkFieldValidity('Time End').type === 'beyond_other'\r\n ? `End Time MUST be equal to or after ${moment\r\n .tz(`${monthDate} ${StartDateTime}`, null)\r\n .format('hh:mm A')}`\r\n : `End Time MUST be equal to or before ${timeEnd.format('HH:mm')}`}\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n {\r\n const newDuration = Math.abs(parseInt(e.target.value));\r\n const momentStart = moment.tz(`${monthDate} ${StartDateTime}`, null);\r\n momentStart.add(newDuration, 'minutes');\r\n setDuration(newDuration);\r\n setEndDateTime(momentStart.format('HH:mm'));\r\n setTimeslot('custom');\r\n }}\r\n />\r\n
\r\n \r\n
\r\n\r\n URL:
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n Use All Day Meeting Link\r\n \r\n {' '}\r\n Use the All Day Meeting link for this meeting.\r\n \r\n
\r\n Missing All Day Meeting Link!
\r\n \r\n \r\n {`The All Day Meeting Link can be configured by clicking the `}\r\n \r\n
\r\n \r\n\r\n // Missing All Day Meeting Link!
\r\n // \r\n // {`The All Day Meeting Link can be configured by clicking the `}
{' '}\r\n // \r\n //
\r\n // \r\n //
\r\n // \r\n //
\r\n // {`button above schedule. . .`}
\r\n // \r\n // \r\n )}\r\n \r\n\r\n \r\n {\r\n e.stopPropagation();\r\n setURL(customURL);\r\n setURLType('Custom');\r\n }}\r\n >\r\n
\r\n \r\n \r\n \r\n {/*
*/}\r\n\r\n \r\n {\r\n setURL(customURL);\r\n setURLType('Custom');\r\n }}\r\n >\r\n \r\n Custom\r\n
\r\n \r\n {\r\n const newURL = e.target.value;\r\n setURL(newURL);\r\n setCustomURL(newURL);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Use Custom Meeting Link\r\n \r\n {' '}\r\n Use a unique link for this meeting\r\n \r\n
\r\n \r\n {\r\n const newURL = e.target.value;\r\n setURL(newURL);\r\n setCustomURL(newURL);\r\n }}\r\n />\r\n
\r\n \r\n {\r\n setDetails(e.target.value);\r\n }}\r\n />\r\n
\r\n \r\n {renderTabContent()}
\r\n \r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n Swal.fire({\r\n title: 'Delete Flex Event!',\r\n text: `Are you sure you want to delete ${flexEventToEdit.FlexEventName}?`,\r\n icon: 'warning',\r\n showCancelButton: true,\r\n cancelButtonColor: 'gray',\r\n confirmButtonText: 'Yes',\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n deleteEvent();\r\n } else {\r\n }\r\n });\r\n }}\r\n >\r\n Delete\r\n \r\n \r\n
\r\n \r\n
\r\n Flex Events
\r\n \r\n {\r\n if (e.target.value !== 'all') {\r\n const row = JSON.parse(e.target.value);\r\n setTimeSlot(row);\r\n setFlexEvents(row.FlexEvents || []);\r\n } else {\r\n extractAllFlexEvents();\r\n }\r\n\r\n setTimeSlot(e.target.value);\r\n }}\r\n >\r\n {scheduleData ? (\r\n <>\r\n \r\n \r\n {scheduleData.body.map((row) => {\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 if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n setShowAddFlexEventModal(true);\r\n }}\r\n >\r\n {\r\n setSelectedCell(null);\r\n setShowFlexEventDetailModal(false);\r\n }}\r\n />\r\n
\r\n \r\n {FlexEvents && FlexEvents.length > 0 ? (\r\n FlexEvents.map((FlexEvent, i) => {\r\n if (\r\n (FlexEvent.FlexEventName && FlexEvent.FlexEventName.toLowerCase() !== 'unavailable') ||\r\n (FlexEvent.EventName && FlexEvent.EventName.toLowerCase() !== 'unavailable')\r\n ) {\r\n return (\r\n {\r\n setFlexEventToEdit(newFlexEvent);\r\n setShowEditFlexEventModal(true);\r\n }}\r\n />\r\n );\r\n }\r\n })\r\n ) : (\r\n
\r\n No Flex Events
\r\n )}\r\n \r\n
\r\n \r\n {\r\n onSave({ ...focus, Name: e.target.value });\r\n }}\r\n />\r\n ) : (\r\n
\r\n {focus.Name}
\r\n )}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default FocusItem;\r\n","const style = {\r\n dropDownBody: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n maxHeight: 250,\r\n minWidth: '100%',\r\n overflowY: 'scroll',\r\n },\r\n selectAllRow: {\r\n alignItems: 'center',\r\n borderBottom: '1px solid #c8dae0',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'flex-start',\r\n padding: 5,\r\n fontSize: 16,\r\n fontWeight: 600,\r\n },\r\n clickable: {\r\n cursor: 'pointer',\r\n },\r\n};\r\n\r\nexport default style;\r\n","import { faCheckSquare, faSquare } from '@fortawesome/free-regular-svg-icons';\r\nimport { faPlusCircle, faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport { CustomInput, Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';\r\nimport { useAuth0 } from '../../../../../auth0/reactAuth0Spa';\r\nimport { formatBearerToken } from '../../../../../Common.functions';\r\nimport { DepartmentContext } from '../../../../../DepartmentWrapper';\r\nimport { fetchDataAgnostic } from '../../../../../Services/dataApi';\r\nimport FocusItem from './FocusItem';\r\nimport style from './FocusPalette.style.js';\r\n\r\nlet updateTimeout = null;\r\nconst FocusPalette = ({\r\n itemParentObject, // Parent of the reference.\r\n reference, // Used to identify \"current\" selected. Current selected have check but not highlighted.\r\n allowEdit = false,\r\n showIgnoreSwitch = true,\r\n updateSelectedFocuses, // Optional. Used to update focus list of parent.\r\n returnEntireFocusObject = false, // Used to indicate if updateSelectedFocuses returns entire focuses or just pk_Focuses.\r\n isUpdating,\r\n forcedDisable = false, // for readOnly mode\r\n hasDelay = true,\r\n ignoreEvaluatorFocuses,\r\n setIgnoreEvaluatorFocuses,\r\n}) => {\r\n const [focuses, setFocuses] = useState([]);\r\n\r\n const [selectedFocuses, setSelectedFocuses] = useState([]); // pk_Focus\r\n const [selectAll, setSelectAll] = useState();\r\n const [nameToSearch, setNameToSearch] = useState('');\r\n const [token, setToken] = useState();\r\n const [isFetching, setIsFetching] = useState();\r\n const [myIgnoreEvaluatorFocuses, setMyIgnoreEvaluatorFocuses] = useState(ignoreEvaluatorFocuses);\r\n\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n\r\n const dContext = useContext(DepartmentContext);\r\n\r\n useEffect(() => {\r\n if (ignoreEvaluatorFocuses) {\r\n setMyIgnoreEvaluatorFocuses(ignoreEvaluatorFocuses);\r\n }\r\n }, [ignoreEvaluatorFocuses]);\r\n\r\n useEffect(() => {\r\n getTokenSilently()\r\n .then((token) => {\r\n setToken(token);\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (token && dContext && dContext.department) {\r\n getFocuses();\r\n }\r\n }, [token, dContext]);\r\n\r\n useEffect(() => {\r\n if (reference && focuses && focuses.length > 0) {\r\n const newFocuses = [];\r\n\r\n reference.forEach((focus) => {\r\n newFocuses.push(focus.pk_Focus);\r\n });\r\n setSelectedFocuses(newFocuses);\r\n }\r\n }, [reference, focuses]);\r\n\r\n const getFocuses = () => {\r\n setIsFetching(true);\r\n fetchDataAgnostic(\r\n 'department/focuses',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n setIsFetching(false);\r\n setFocuses(res.data);\r\n })\r\n .catch((err) => {\r\n setIsFetching(false);\r\n });\r\n };\r\n\r\n // Updates focus list for parent component, if any\r\n const updateFocusForUser = (newFocuses) => {\r\n // setIsUpdating(true);\r\n if (updateSelectedFocuses) {\r\n if (hasDelay) {\r\n if (updateTimeout) {\r\n clearTimeout(updateTimeout);\r\n }\r\n updateTimeout = setTimeout(() => {\r\n if (returnEntireFocusObject) {\r\n const wholeFocuses = [];\r\n newFocuses.forEach((pk_Focus) => {\r\n const wholeFocus = focuses.find((f) => {\r\n return f.pk_Focus === pk_Focus;\r\n });\r\n if (wholeFocus) {\r\n wholeFocuses.push(wholeFocus);\r\n }\r\n });\r\n\r\n updateSelectedFocuses(wholeFocuses);\r\n } else {\r\n updateSelectedFocuses(newFocuses);\r\n }\r\n }, 900);\r\n } else {\r\n if (returnEntireFocusObject) {\r\n const wholeFocuses = [];\r\n newFocuses.forEach((pk_Focus) => {\r\n const wholeFocus = focuses.find((f) => {\r\n return f.pk_Focus === pk_Focus;\r\n });\r\n if (wholeFocus) {\r\n wholeFocuses.push(wholeFocus);\r\n }\r\n });\r\n\r\n updateSelectedFocuses(wholeFocuses);\r\n } else {\r\n updateSelectedFocuses(newFocuses);\r\n }\r\n }\r\n }\r\n };\r\n\r\n const filterFocuses = (focusesToFilter) => {\r\n const newFilters = [];\r\n focusesToFilter.forEach((focus, i) => {\r\n // const focus = focusesToFilter[key];\r\n const focusName = focus.Name || '';\r\n\r\n if (\r\n nameToSearch == '' ||\r\n nameToSearch == null ||\r\n focusName.toLowerCase().indexOf(nameToSearch.toLowerCase()) >= 0\r\n ) {\r\n newFilters.push(focus);\r\n }\r\n });\r\n return newFilters;\r\n };\r\n\r\n useEffect(() => {\r\n const newFocuses = JSON.parse(JSON.stringify(focuses));\r\n Object.keys(newFocuses).map((key) => {\r\n const focus = newFocuses[key];\r\n const name = focus.Name || '';\r\n if (name.toLowerCase().indexOf(nameToSearch.toLowerCase()) >= 0) {\r\n focus.isSelected = selectAll;\r\n }\r\n });\r\n if (selectAll) {\r\n updateFocusForUser(\r\n newFocuses.map((f) => {\r\n return f.pk_Focus;\r\n }),\r\n );\r\n setSelectedFocuses(\r\n newFocuses.map((f) => {\r\n return f.pk_Focus;\r\n }),\r\n );\r\n } else if (selectAll != null) {\r\n updateFocusForUser([]);\r\n setSelectedFocuses([]);\r\n }\r\n }, [selectAll]);\r\n\r\n const onToggleFocus = (id) => {\r\n const newFocuses = selectedFocuses.slice(); // JSON.parse(JSON.stringify(focuses));\r\n const index = newFocuses.indexOf(id);\r\n if (index >= 0) {\r\n newFocuses.splice(index, 1);\r\n } else {\r\n newFocuses.push(id);\r\n }\r\n\r\n setSelectedFocuses(newFocuses);\r\n updateFocusForUser(newFocuses);\r\n };\r\n\r\n const onDeleteFocus = (id) => {\r\n const newFocuses = JSON.parse(JSON.stringify(focuses));\r\n const index = newFocuses.indexOf(id);\r\n newFocuses.splice(index, 1);\r\n\r\n setSelectedFocuses(newFocuses);\r\n };\r\n\r\n // For both adding and updating\r\n const onSave = (focus) => {\r\n const newFocuses = JSON.parse(JSON.stringify(focuses));\r\n newFocuses[focus.id] = focus;\r\n setFocuses(newFocuses);\r\n };\r\n\r\n const filteredFocuses = filterFocuses(focuses);\r\n\r\n return (\r\n \r\n {/* {\r\n setEdit(!edit);\r\n }}\r\n />\r\n ) : null}\r\n {allowEdit ? (\r\n {\r\n onDeleteFocus(focus.id);\r\n }}\r\n />\r\n ) : null}\r\n\r\n {\r\n // \r\n // {focus.Description}\r\n // \r\n }\r\n
\r\n \r\n {showIgnoreSwitch ? (\r\n {\r\n if (setIgnoreEvaluatorFocuses) {\r\n setIgnoreEvaluatorFocuses(e.target.checked);\r\n } else {\r\n setMyIgnoreEvaluatorFocuses(e.target.checked);\r\n }\r\n }}\r\n />\r\n ) : null}\r\n\r\n \r\n \r\n \r\n {\r\n setNameToSearch('');\r\n }}\r\n />\r\n \r\n \r\n {\r\n setNameToSearch(e.target.value);\r\n }}\r\n />\r\n \r\n \r\n {Object.keys(filteredFocuses).length || !allowEdit ? (\r\n {\r\n onSave({\r\n id: nameToSearch.replaceAll(' ', '_'),\r\n Name: nameToSearch,\r\n Description: 'Description!',\r\n icon: null,\r\n isSelected: false,\r\n });\r\n setNameToSearch('');\r\n }}\r\n />\r\n )}\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default FocusPalette;\r\n","const style = {\r\n dropDownBody: {\r\n padding: 10,\r\n },\r\n userList: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n maxHeight: 150,\r\n minWidth: '100%',\r\n overflowY: 'scroll',\r\n marginBottom: 20,\r\n },\r\n userItem: {\r\n paddingTop: 5,\r\n paddingBottom: 5,\r\n paddingLeft: 5,\r\n fontWeight: 600,\r\n },\r\n spacedBetweenRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '100%',\r\n },\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n width: '100%',\r\n },\r\n genButton: {\r\n backgroundColor: '#0a91ff',\r\n marginTop: 5,\r\n // marginBottom: 5,\r\n },\r\n roomNumberButtons: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n marginTop: 20,\r\n },\r\n roomNumberButton: {\r\n width: '30%',\r\n },\r\n clickableIcon: {\r\n cursor: 'pointer',\r\n marginRight: 5,\r\n },\r\n buttonLabel: { width: '100%', textAlign: 'center', fontWeight: 600 },\r\n};\r\nexport default style;\r\n","const style = {\r\n mainBody: {\r\n padding: 10,\r\n },\r\n tableContainer: {\r\n // backgroundColor: '#d9f5ff',\r\n height: 430,\r\n marginBottom: 10,\r\n marginTop: 10,\r\n overflowY: 'scroll',\r\n },\r\n spaceBetweenRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n },\r\n centeredRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n textAlign: 'center',\r\n width: '100%',\r\n },\r\n rightedRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'right',\r\n alignItems: 'center',\r\n },\r\n flexEndRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'flex-end',\r\n alignItems: 'center',\r\n },\r\n clickableIcon: {\r\n cursor: 'pointer',\r\n marginLeft: 5,\r\n marginRight: 5,\r\n },\r\n userItem: {\r\n paddingTop: 5,\r\n paddingBottom: 5,\r\n paddingLeft: 5,\r\n fontWeight: 600,\r\n },\r\n confirmButtons: {\r\n width: 80,\r\n },\r\n};\r\nexport default style;\r\n","import { faCheckSquare, faSquare, faTimesCircle } from '@fortawesome/free-regular-svg-icons';\r\nimport { faBan, faCheck } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { clone } from 'lodash';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { Popover, PopoverBody, PopoverHeader, UncontrolledPopover } from 'reactstrap';\r\n\r\nimport style from './EvaluatorPicker.style';\r\n\r\nconst EvaluatorPicker = ({\r\n updateSlot,\r\n header,\r\n flexEvent = {},\r\n setShowUnavailabilityEvaluatorPicker,\r\n showUnavailabilityEvaluatorPicker,\r\n rowIndex,\r\n setSelectedRow,\r\n selectedRowRef,\r\n}) => {\r\n const [existingEvaluators, setExistingEvaluators] = useState([]);\r\n const [newEvaluators, setNewEvaluators] = useState([]);\r\n const [evaluatorsToAdd, setEvaluatorsToAdd] = useState([]);\r\n const [evaluatorsToDelete, setEvaluatorsToDelete] = useState([]);\r\n\r\n const { rawHeader } = header || {};\r\n const evaluators = rawHeader && rawHeader.Evaluators ? rawHeader.Evaluators.Evaluators : [];\r\n\r\n useEffect(() => {\r\n const newExistingEvaluators = [];\r\n if (flexEvent) {\r\n flexEvent.evaluators.forEach((e) => {\r\n newExistingEvaluators.push(e.pk_User);\r\n });\r\n }\r\n\r\n setExistingEvaluators(newExistingEvaluators);\r\n\r\n setNewEvaluators(newExistingEvaluators);\r\n }, []);\r\n\r\n const isSame = (a, b) => a.length === b.length && a.every((v, i) => b.indexOf(v) >= 0);\r\n\r\n const isChanged = !isSame(existingEvaluators, newEvaluators);\r\n const targetKey = `button_${\r\n flexEvent && flexEvent.pk_FlexEvent != null ? flexEvent.pk_FlexEvent : `temp_${rowIndex}`\r\n }_addEvaluator`;\r\n\r\n return (\r\n \r\n {\r\n if (!isUpdating && !forcedDisable) {\r\n setSelectAll(!selectAll);\r\n }\r\n }}\r\n />\r\n
\r\n Select All
\r\n \r\n {filteredFocuses && filteredFocuses.length > 0 ? (\r\n filteredFocuses.map((focus, i) => {\r\n return (\r\n
\r\n Fetching . . .
\r\n ) : (\r\n No Focuses
\r\n )}\r\n \r\n {\r\n e.stopPropagation();\r\n document.body.click();\r\n // setShowUnavailabilityEvaluatorPicker(false);\r\n }}\r\n >\r\n
\r\n \r\n \r\n \r\n \r\n {\r\n const newFlexEvent = clone(flexEvent);\r\n\r\n const newEvaluatorsActual = [];\r\n newEvaluators.forEach((pk_User) => {\r\n const newEvaluatorActual = evaluators.find((e) => {\r\n return e.pk_User === pk_User;\r\n });\r\n if (newEvaluatorActual) {\r\n newEvaluatorsActual.push(newEvaluatorActual);\r\n }\r\n });\r\n newFlexEvent.evaluators = newEvaluatorsActual;\r\n newFlexEvent.evaluatorsToDelete = evaluatorsToDelete;\r\n newFlexEvent.evaluatorsToAdd = evaluatorsToAdd;\r\n\r\n setSelectedRow(newFlexEvent);\r\n updateSlot(newFlexEvent, rowIndex, true);\r\n }}\r\n />\r\n ) : null}\r\n {isChanged ? (\r\n {\r\n e.stopPropagation();\r\n const newNewEvaluators = existingEvaluators.slice();\r\n setNewEvaluators(newNewEvaluators);\r\n }}\r\n >\r\n
\r\n ) : null}\r\n \r\n Evaluators\r\n
\r\n {isChanged ? (\r\n \r\n
\r\n \r\n \r\n {evaluators.map((evaluator) => {\r\n const isExisting = existingEvaluators && existingEvaluators.indexOf(evaluator.pk_User) >= 0;\r\n\r\n const isNewSelection = newEvaluators.indexOf(evaluator.pk_User) >= 0;\r\n\r\n let backgroundColor = null;\r\n\r\n if (isExisting && isNewSelection) {\r\n backgroundColor = '#c4d5ff';\r\n }\r\n\r\n if (isExisting && !isNewSelection) {\r\n backgroundColor = '#f77777';\r\n }\r\n\r\n if (!isExisting && isNewSelection) {\r\n backgroundColor = '#88ff82';\r\n }\r\n\r\n return (\r\n {\r\n e.stopPropagation();\r\n\r\n const newNewEvaluators = newEvaluators.slice();\r\n const newEvaluatorsToDelete = evaluatorsToDelete.slice();\r\n const newEvaluatorsToAdd = evaluatorsToAdd.slice();\r\n\r\n const itemIndex = newNewEvaluators.indexOf(evaluator.pk_User);\r\n if (itemIndex >= 0) {\r\n newNewEvaluators.splice(itemIndex, 1);\r\n if (newEvaluatorsToDelete.indexOf(evaluator.pk_User) < 0) {\r\n newEvaluatorsToDelete.push(evaluator.pk_User);\r\n }\r\n if (newEvaluatorsToAdd.indexOf(evaluator.pk_User) >= 0) {\r\n newEvaluatorsToAdd.splice(newEvaluatorsToAdd.indexOf(evaluator.pk_User), 1);\r\n }\r\n } else {\r\n newNewEvaluators.push(evaluator.pk_User);\r\n if (newEvaluatorsToDelete.indexOf(evaluator.pk_User) >= 0) {\r\n newEvaluatorsToDelete.splice(newEvaluatorsToAdd.indexOf(evaluator.pk_User), 1);\r\n }\r\n if (newEvaluatorsToAdd.indexOf(evaluator.pk_User) < 0) {\r\n newEvaluatorsToAdd.push(evaluator.pk_User);\r\n }\r\n }\r\n setNewEvaluators(newNewEvaluators);\r\n setEvaluatorsToAdd(newEvaluatorsToAdd);\r\n setEvaluatorsToDelete(newEvaluatorsToDelete);\r\n }}\r\n >\r\n
\r\n );\r\n })}\r\n \r\n {evaluator.UserLast}, {evaluator.UserFirst}\r\n
\r\n \r\n {\r\n if (isSaving) return;\r\n\r\n if (row.pk_FlexEvent != null) {\r\n setShowConfirmModal(true);\r\n // const newRow = clone(selectedRow);\r\n // newRow.isEdit = false;\r\n\r\n // updateSlot(newRow, rowIndex);\r\n\r\n // setSelectedRow(null);\r\n // selectedRowRef.current = null;\r\n } else {\r\n const newUnavailableSlots = clone(unavailableSlots);\r\n newUnavailableSlots.splice(rowIndex, 1);\r\n setUnavailableSlots(newUnavailableSlots);\r\n }\r\n }}\r\n />\r\n
\r\n );\r\n };\r\n\r\n return (\r\n \r\n {renderButtons()}\r\n {renderConfirmModal()}\r\n
\r\n );\r\n};\r\n\r\nexport default FlexEventAction;\r\n","import {\r\n faBan,\r\n faCheck,\r\n faCheckSquare,\r\n faPencilAlt,\r\n faPlusCircle,\r\n faSquare,\r\n faTimes,\r\n faTimesCircle,\r\n faTrash,\r\n faTrashRestore,\r\n} from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport moment from 'moment-timezone';\r\nimport React, { useContext, useEffect, useRef, useState } from 'react';\r\nimport BootstrapTable from 'react-bootstrap-table-next';\r\nimport { TimeInput } from 'react-widgets/cjs';\r\nimport DatePicker from 'react-widgets/DatePicker';\r\nimport 'react-widgets/styles.css';\r\nimport { Button, FormFeedback, Input, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';\r\nimport { clone } from '../../../../../Services/schedule';\r\nimport EvaluatorPicker from './EvaluatorPicker/EvaluatorPicker';\r\nimport style from './style';\r\nimport { deleteData, postDataAgnostic, putData } from 'Services/dataApi';\r\nimport { useAuth0 } from 'auth0/reactAuth0Spa';\r\nimport { DepartmentContext } from 'DepartmentWrapper';\r\nimport FlexEventAction from './FlexEventAction/FlexEventAction';\r\nimport { formatBearerToken } from 'Common.functions';\r\n\r\nconst HeaderUnavailablePanel = ({\r\n header,\r\n addUnavailableSlot,\r\n addUnavailableSlots,\r\n updateFlexEvent,\r\n deleteFlexEvent,\r\n scheduleData,\r\n isFetching,\r\n isSubmitting,\r\n showUnavailabilityEvaluatorPicker,\r\n setShowUnavailabilityEvaluatorPicker,\r\n selectedCell,\r\n scheduleID,\r\n updateFlexEvents,\r\n setUnavailabilityPanelHasChanges,\r\n setShowUnavailabilityModal,\r\n fireUnsavedChangesAlert,\r\n updateAllData,\r\n}) => {\r\n const [unavailableSlots, setUnavailableSlots] = useState([]);\r\n const [unavailableSlotsReference, setUnavailableSlotsReference] = useState([]);\r\n const [slotsToDelete, setSlotsToDelete] = useState([]);\r\n const [slotsToAdd, setSlotsToAdd] = useState([]);\r\n\r\n const [showEvaluatorPicker, setShowEvaluatorPicker] = useState({});\r\n const [saveHasResponded, setSaveHasResponded] = useState(true);\r\n const [selectedRow, setSelectedRow] = useState(null);\r\n const [showSaveModal, setShowSaveModal] = useState();\r\n const [toggleRefresh, setToggleRefresh] = useState(false);\r\n const [isSaving, setIsSaving] = useState();\r\n const [keysToDelete, setKeysToDelete] = useState([]);\r\n\r\n const dContext = useContext(DepartmentContext);\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n const selectedRowRef = useRef();\r\n const { metaData } = scheduleData || {};\r\n const { StartDateAndTime, DateOfInterview } = metaData || {};\r\n\r\n useEffect(() => {\r\n if (!saveHasResponded) {\r\n return;\r\n }\r\n let newUnavailableSlots = [];\r\n let newShowUnavailabilityEvaluatorPicker = {};\r\n const { rawHeader } = clone(header) || {};\r\n if (rawHeader) {\r\n newUnavailableSlots = rawHeader.flexEvents ? clone(rawHeader).flexEvents.slice() : [];\r\n }\r\n\r\n newUnavailableSlots.forEach((slot, i) => {\r\n slot.FlexStartTime = slot.FlexTimeStart;\r\n newShowUnavailabilityEvaluatorPicker[`picker_${i}`] = false;\r\n // slot.isEdit = true;\r\n });\r\n\r\n newUnavailableSlots.push({ id: 'addSlotBar' });\r\n setUnavailableSlots(newUnavailableSlots);\r\n setUnavailableSlotsReference(newUnavailableSlots);\r\n setShowUnavailabilityEvaluatorPicker(newShowUnavailabilityEvaluatorPicker);\r\n setSelectedRow(null);\r\n setKeysToDelete([]);\r\n selectedRowRef.current = null;\r\n }, [JSON.stringify(header), selectedCell]);\r\n\r\n useEffect(() => {\r\n if (!saveHasResponded) {\r\n return;\r\n }\r\n if (selectedRow) {\r\n selectedRowRef.current = selectedRow;\r\n }\r\n }, [JSON.stringify(selectedRow)]);\r\n\r\n useEffect(() => {\r\n if (slotsToDelete && unavailableSlots && unavailableSlots.length > 0) {\r\n updateUnavailableSlotActionStatus();\r\n }\r\n }, [slotsToDelete]);\r\n\r\n useEffect(() => {\r\n if (unavailableSlots && setUnavailabilityPanelHasChanges) {\r\n setUnavailabilityPanelHasChanges(hasChanges(unavailableSlots));\r\n }\r\n if (unavailableSlots) {\r\n const newSlotstoAdd = [];\r\n\r\n unavailableSlots.forEach((slot, i) => {\r\n const { pk_FlexEvent, id } = slot || {};\r\n if (pk_FlexEvent == null && id != 'addSlotBar') {\r\n newSlotstoAdd.push({ ...slot, rowIndex: i });\r\n }\r\n });\r\n\r\n setSlotsToAdd(newSlotstoAdd);\r\n }\r\n }, [unavailableSlots]);\r\n\r\n const updateUnavailableSlotActionStatus = () => {\r\n const newUnavailableSlots = unavailableSlots.slice();\r\n\r\n // Add flags to slots to update Bootstraptable, to refresh the table, and to update the slots' props. Otherwise, removing slot would only work once and never again, as slotsToDelete would be empty, forever.\r\n newUnavailableSlots.forEach((slot) => {\r\n // If new slot, add toAdd flag\r\n if (slot.pk_FlexEvent == null) {\r\n slot.toAdd = true;\r\n delete slot.toDelete;\r\n }\r\n\r\n // If existing slot and is newly added to slotsToDelete, add toDelete flag\r\n if (slotsToDelete.includes(slot.pk_FlexEvent)) {\r\n slot.toDelete = true;\r\n delete slot.toAdd;\r\n }\r\n\r\n // If existing slot, remove toDelete flag\r\n if (!slotsToDelete.includes(slot.pk_FlexEvent) && slot.toDelete) {\r\n delete slot.toDelete;\r\n }\r\n });\r\n\r\n setUnavailableSlots(newUnavailableSlots);\r\n };\r\n\r\n const reloadData = () => {\r\n let newUnavailableSlots = [];\r\n const newHeader = clone(header);\r\n const { rawHeader } = newHeader || {};\r\n if (rawHeader) {\r\n newUnavailableSlots = rawHeader.flexEvents ? rawHeader.flexEvents.slice() : [];\r\n }\r\n newUnavailableSlots.push({ id: 'addSlotBar' });\r\n setUnavailableSlots(newUnavailableSlots);\r\n setUnavailableSlotsReference(newUnavailableSlots);\r\n };\r\n\r\n // Shape for updating.\r\n const prepareFlexEvent = (newSlot) => {\r\n const { FlexStartTime, FlexTimeEnd, evaluatorsToAdd, evaluatorsToDelete, pk_FlexEvent, rowIndex } = newSlot;\r\n const fieldId = `input_${pk_FlexEvent != null ? pk_FlexEvent : `temp_${rowIndex}`}`;\r\n const startTimeValue = document.getElementById(`${fieldId}_startTime`).value;\r\n const endTimeValue = document.getElementById(`${fieldId}_endTime`).value;\r\n\r\n const newFlexEvent = {\r\n pk_FlexEvent,\r\n StartDateTime: moment.tz(`${DateOfInterview} ${startTimeValue}`, null).format(),\r\n EndDateTime: moment.tz(`${DateOfInterview} ${endTimeValue}`, null).format(),\r\n FlexTimeStart: startTimeValue,\r\n FlexTimeEnd: endTimeValue,\r\n EnableForAllUsers: false,\r\n EnableAbsoluteTime: true,\r\n EventName: 'UNAVAILABLE',\r\n evaluatorsToAdd,\r\n evaluatorsToDelete,\r\n };\r\n return newFlexEvent;\r\n };\r\n\r\n const prepareNewFlexEvent = (newSlot) => {\r\n const { FlexStartTime, FlexTimeEnd, rowIndex } = newSlot;\r\n const fieldId = `input_temp_${rowIndex}`;\r\n\r\n const startTimeValue = document.getElementById(`${fieldId}_startTime`).value;\r\n const endTimeValue = document.getElementById(`${fieldId}_endTime`).value;\r\n\r\n const newFlexEvent = {\r\n StartDateTime: moment.tz(`${DateOfInterview} ${startTimeValue}`, null).format(),\r\n EndDateTime: moment.tz(`${DateOfInterview} ${endTimeValue}`, null).format(),\r\n FlexTimeStart: startTimeValue,\r\n FlexTimeEnd: endTimeValue,\r\n EnableForAllUsers: false,\r\n EnableAbsoluteTime: true,\r\n EventName: 'UNAVAILABLE',\r\n newEvaluators: newSlot.evaluators\r\n ? newSlot.evaluators.map((e) => {\r\n return e.pk_User;\r\n })\r\n : [],\r\n };\r\n // Only ScheduleDetailModal > UnavailabilityPanel gives this selectedCell\r\n if (selectedCell) {\r\n newFlexEvent.hideScheduleDetailModal = false;\r\n }\r\n\r\n return newFlexEvent;\r\n // return {\r\n // event: newFlexEvent,\r\n // evaluators: newEvaluators\r\n // ? newEvaluators.map((e) => {\r\n // return e.pk_User;\r\n // })\r\n // : [],\r\n // candidates: candidates || [],\r\n // };\r\n };\r\n\r\n // Front end only\r\n const addNewUnavailability = () => {\r\n const { metaData } = scheduleData;\r\n const { StartTime, DateOfInterview } = metaData;\r\n\r\n const newUnavailableSlots = unavailableSlots.slice();\r\n const newSlotsToAdd = clone(slotsToAdd);\r\n\r\n let startTimeToUse = StartTime;\r\n let endTimeToUse = StartTime;\r\n\r\n if (selectedCell) {\r\n const { row } = selectedCell;\r\n const { slot, slotEnd } = row;\r\n\r\n startTimeToUse = moment.tz(slot, null).format('HH:mm');\r\n endTimeToUse = moment.tz(row.slotEnd, null).format('HH:mm');\r\n }\r\n\r\n const newSlot = {\r\n id: newUnavailableSlots.length + 1,\r\n FlexStartTime: startTimeToUse,\r\n FlexTimeEnd: endTimeToUse,\r\n evaluators: header.rawHeader.Evaluators.Evaluators,\r\n action: null,\r\n isEdit: true,\r\n rowIndex: unavailableSlots.length > 0 ? unavailableSlots.length - 1 : 0,\r\n };\r\n\r\n // newUnavailableSlots.push(newSlot);\r\n newUnavailableSlots.splice(newUnavailableSlots.length - 1, 0, newSlot);\r\n newSlotsToAdd.push(newSlot);\r\n setSelectedRow(newSlot);\r\n setUnavailableSlots(newUnavailableSlots);\r\n setSlotsToAdd(newSlotsToAdd);\r\n };\r\n\r\n const saveAll = () => {\r\n const eventsToUpdate = [];\r\n\r\n unavailableSlots.forEach((slot, i) => {\r\n // Only PUT if the slot has a pk_FlexEvent, meaning pre-existing ones.\r\n // We also ignore toDelete ones.\r\n if ((slot.pk_FlexEvent != null && slot.id) == null && slotsToDelete.includes(slot.pk_FlexEvent) === false) {\r\n eventsToUpdate.push(prepareFlexEvent({ ...slot, rowIndex: i }));\r\n }\r\n });\r\n const eventsToAdd = slotsToAdd.map((slot) => {\r\n return prepareNewFlexEvent(slot);\r\n });\r\n\r\n const eventsToDelete = slotsToDelete.map((pk_FlexEvent) => {\r\n return pk_FlexEvent;\r\n });\r\n\r\n // const deleteItems = new Promise((resolve, reject) => {\r\n // deleteUnavailabilities(eventsToDelete, resolve, reject);\r\n // });\r\n\r\n setIsSaving(true);\r\n\r\n const promises = [];\r\n\r\n if (eventsToAdd.length > 0) {\r\n promises.push(() => {\r\n return new Promise((resolve, reject) => {\r\n addUnavailableSlots(eventsToAdd, null, null, (err) => {\r\n setSaveHasResponded(true);\r\n if (err) {\r\n reject(err);\r\n } else {\r\n resolve();\r\n setSlotsToAdd([]);\r\n }\r\n\r\n // reloadData();\r\n });\r\n });\r\n });\r\n }\r\n\r\n if (eventsToUpdate.length > 0) {\r\n promises.push(() => {\r\n return new Promise((resolve, reject) => {\r\n updateFlexEvents(eventsToUpdate, (err) => {\r\n console.log('updateFlexEvents cb, err: ', err);\r\n if (err) {\r\n reject(err);\r\n } else {\r\n resolve();\r\n }\r\n });\r\n });\r\n });\r\n }\r\n\r\n promises\r\n .reduce((chain, promise) => {\r\n return chain.then(() => promise());\r\n }, Promise.resolve())\r\n .then((res) => {\r\n setIsSaving(false);\r\n updateAllData();\r\n })\r\n .catch((err) => {\r\n setIsSaving(false);\r\n updateAllData();\r\n console.log('saveAll err: ', err);\r\n });\r\n\r\n // Promise.all(\r\n // promises.map((p) => {\r\n // return p();\r\n // }),\r\n // )\r\n // .then((res) => {\r\n // setIsSaving(false);\r\n // console.log('RESOLVE!');\r\n // })\r\n // .catch((err) => {\r\n // setIsSaving(false);\r\n // console.log('saveAll err: ', err);\r\n // });\r\n };\r\n\r\n const hasChanges = (slots, showDebugger) => {\r\n const fieldsToChange = ['FlexStartTime', 'FlexTimeEnd'];\r\n const slotsToTest = slots || unavailableSlots;\r\n\r\n let hasChanges = false;\r\n\r\n if (!slots && slotsToAdd.length > 0) {\r\n return true;\r\n }\r\n\r\n slotsToTest.forEach((slot, i) => {\r\n const { evaluatorsToAdd, evaluatorsToDelete, AttendingUsers, pk_FlexEvent, rowIndex } = slot;\r\n if (pk_FlexEvent != null && slot.id == null) {\r\n const originalSlot = unavailableSlotsReference.find((s) => s.pk_FlexEvent === slot.pk_FlexEvent);\r\n if (originalSlot == null) {\r\n return true;\r\n }\r\n const originalSlotStartTime = moment\r\n .tz(`${DateOfInterview} ${originalSlot.FlexStartTime}`, null)\r\n .format('HH:mm');\r\n const originalSlotEndTime = moment.tz(`${DateOfInterview} ${originalSlot.FlexTimeEnd}`, null).format('HH:mm');\r\n // fieldsToChange.forEach((field) => {\r\n const fieldId = `input_${pk_FlexEvent != null ? pk_FlexEvent : `temp_${rowIndex != null ? rowIndex : i}`}`;\r\n const startTimeInputField = document.getElementById(`${fieldId}_startTime`);\r\n const endTimeInputField = document.getElementById(`${fieldId}_endTime`);\r\n const fieldFlexStartTime = startTimeInputField ? startTimeInputField.value : '';\r\n const fieldFlexEventEndTime = endTimeInputField ? endTimeInputField.value : '';\r\n\r\n // console.log('originalSlotStartTime: ', originalSlotStartTime);\r\n // console.log('originalSlotEndTime: ', originalSlotEndTime);\r\n // console.log('fieldFlexStartTime: ', fieldFlexStartTime);\r\n // console.log('fieldFlexEventEndTime: ', fieldFlexEventEndTime);\r\n\r\n if (originalSlotStartTime != fieldFlexStartTime || originalSlotEndTime != fieldFlexEventEndTime) {\r\n hasChanges = true;\r\n }\r\n // });\r\n\r\n if (!hasChanges) {\r\n if (evaluatorsToAdd != null && evaluatorsToAdd.length > 0) {\r\n evaluatorsToAdd.forEach((pk_User) => {\r\n if (AttendingUsers.find((u) => u.pk_User === pk_User) == null) {\r\n console.log('evaluatorsToAdd hasChanges');\r\n hasChanges = true;\r\n }\r\n });\r\n }\r\n\r\n if (evaluatorsToDelete != null && evaluatorsToDelete.length > 0) {\r\n evaluatorsToDelete.forEach((pk_User) => {\r\n if (AttendingUsers.find((u) => u.pk_User === pk_User) != null) {\r\n console.log('evaluatorsToDelete hasChanges');\r\n hasChanges = true;\r\n }\r\n });\r\n }\r\n }\r\n }\r\n });\r\n\r\n // if (showDebugger) {\r\n // console.log('slots: ', slots);\r\n // console.log('hasChanges: ', hasChanges);\r\n // }\r\n\r\n return hasChanges;\r\n };\r\n\r\n const updateSlot = (newSlot, rowIndex, updateData) => {\r\n const newUnavailableSlots = clone(unavailableSlots);\r\n newUnavailableSlots[rowIndex] = newSlot;\r\n setUnavailableSlots(newUnavailableSlots);\r\n const { metaData } = scheduleData;\r\n\r\n if (updateData) {\r\n if (newSlot.pk_FlexEvent != null) {\r\n updateFlexEvent(newSlot, () => {\r\n reloadData();\r\n });\r\n } else {\r\n const { FlexStartTime, FlexTimeEnd } = newSlot;\r\n const newFlexEvent = {\r\n StartDateTime: moment.tz(`${DateOfInterview} ${FlexStartTime}`, null).format(),\r\n EndDateTime: moment.tz(`${DateOfInterview} ${FlexTimeEnd}`, null).format(),\r\n FlexTimeStart: FlexStartTime,\r\n FlexTimeEnd,\r\n EnableForAllUsers: false,\r\n EnableAbsoluteTime: true,\r\n EventName: 'UNAVAILABLE',\r\n newEvaluators: newSlot.evaluators\r\n ? newSlot.evaluators.map((e) => {\r\n return e.pk_User;\r\n })\r\n : [],\r\n };\r\n // Only ScheduleDetailModal > UnavailabilityPanel gives this selectedCell\r\n if (selectedCell) {\r\n newFlexEvent.hideScheduleDetailModal = false;\r\n }\r\n\r\n setSaveHasResponded(false);\r\n addUnavailableSlot(newFlexEvent, null, null, () => {\r\n setSaveHasResponded(true);\r\n reloadData();\r\n });\r\n }\r\n }\r\n };\r\n\r\n const processInputValidity = (options) => {\r\n const { fieldId, updatingField } = options;\r\n\r\n const startTimeInputField = document.getElementById(`${fieldId}_startTime`);\r\n const endTimeInputField = document.getElementById(`${fieldId}_endTime`);\r\n const fieldFlexStartTime = startTimeInputField ? startTimeInputField.value : '';\r\n const fieldFlexEventEndTime = endTimeInputField ? endTimeInputField.value : '';\r\n const startTime = `${DateOfInterview} ${fieldFlexStartTime}`;\r\n const endTime = `${DateOfInterview} ${fieldFlexEventEndTime}`;\r\n const isInvalidTime = moment(startTime).isAfter(moment(endTime));\r\n if (updatingField === 'startTime') {\r\n return { isInvalidTime, capValue: moment(endTime).format('HH:mm') };\r\n } else {\r\n return { isInvalidTime, capValue: moment(startTime).format('HH:mm') };\r\n }\r\n };\r\n\r\n const renderStartTime = (cell, row, rowIndex, formatExtraData) => {\r\n const { id } = row;\r\n\r\n const { metaData } = scheduleData;\r\n const { StartTime, DateOfInterview } = metaData;\r\n\r\n if (id === 'addSlotBar') {\r\n return (\r\n \r\n {\r\n addNewUnavailability();\r\n }}\r\n color=\"success\"\r\n >\r\n Add Unavailability\r\n \r\n
\r\n );\r\n }\r\n if (true) {\r\n const defaultValue = `${DateOfInterview} ${row.FlexStartTime || row.FlexTimeStart}`;\r\n const fieldId = `input_${row.pk_FlexEvent != null ? row.pk_FlexEvent : `temp_${rowIndex}`}_startTime`;\r\n const { isInvalidTime, capValue } = processInputValidity({\r\n fieldId: `input_${row.pk_FlexEvent != null ? row.pk_FlexEvent : `temp_${rowIndex}`}_startTime`,\r\n updatingField: 'startTime',\r\n });\r\n\r\n return (\r\n \r\n
\r\n );\r\n } else {\r\n const refValue =\r\n selectedRowRef && selectedRowRef.current\r\n ? selectedRowRef.current.FlexStartTime\r\n : selectedRow\r\n ? selectedRow.FlexStartTime\r\n : row.pk_FlexEvent != null\r\n ? row.FlexTimeStart\r\n : StartTime;\r\n const newTime = moment().format('MMM DD, YYYY');\r\n\r\n const timeToDisplay = moment.tz(`${DateOfInterview} ${refValue}`, null).format('hh:mm A');\r\n\r\n return \r\n {\r\n const { isInvalidTime, capValue } = processInputValidity({\r\n fieldId: `input_${row.pk_FlexEvent != null ? row.pk_FlexEvent : `temp_${rowIndex}`}`,\r\n updatingField: 'startTime',\r\n });\r\n\r\n if (isInvalidTime) {\r\n const startTimeInputField = document.getElementById(`${fieldId}`);\r\n startTimeInputField.value = capValue;\r\n }\r\n setToggleRefresh(!toggleRefresh);\r\n }}\r\n />\r\n Invalid Start Time \r\n
\r\n {timeToDisplay ? timeToDisplay : '--:-- --'}
;\r\n }\r\n };\r\n\r\n const renderEndTime = (cell, row, rowIndex, formatExtraData) => {\r\n const { id } = row;\r\n const { metaData } = scheduleData;\r\n if (id === 'addSlotBar') {\r\n return;\r\n }\r\n if (true) {\r\n const defaultValue = `${DateOfInterview} ${row.FlexTimeEnd}`;\r\n const fieldId = `input_${row.pk_FlexEvent != null ? row.pk_FlexEvent : `temp_${rowIndex}`}_endTime`;\r\n const { isInvalidTime, capValue } = processInputValidity({\r\n fieldId: `input_${row.pk_FlexEvent != null ? row.pk_FlexEvent : `temp_${rowIndex}`}`,\r\n updatingField: 'endTime',\r\n });\r\n\r\n return (\r\n \r\n {\r\n const { isInvalidTime, capValue } = processInputValidity({\r\n fieldId: `input_${row.pk_FlexEvent != null ? row.pk_FlexEvent : `temp_${rowIndex}`}`,\r\n updatingField: 'endTime',\r\n });\r\n\r\n if (isInvalidTime) {\r\n const endTimeInputField = document.getElementById(`${fieldId}`);\r\n endTimeInputField.value = capValue;\r\n }\r\n setToggleRefresh(!toggleRefresh);\r\n }}\r\n />\r\n Invalid Start Time \r\n
\r\n );\r\n } else {\r\n const refValue =\r\n selectedRowRef && selectedRowRef.current\r\n ? selectedRowRef.current.FlexTimeEnd\r\n : selectedRow\r\n ? selectedRow.FlexTimeEnd\r\n : row.pk_FlexEvent != null && row.FlexTimeEnd\r\n ? row.FlexTimeEnd\r\n : StartDateAndTime;\r\n\r\n const timeToDisplay = moment.tz(`${DateOfInterview} ${refValue}`, null).format('HH:mm A');\r\n\r\n return {timeToDisplay ? timeToDisplay : '--:-- --'}
;\r\n }\r\n };\r\n\r\n const renderSaveConfirmModal = () => {\r\n return (\r\n \r\n
\r\n );\r\n };\r\n\r\n const renderAction = (cell, row, rowIndex, formatExtraData) => {\r\n const { id } = row;\r\n if (id === 'addSlotBar') {\r\n return;\r\n }\r\n return (\r\n {evaluatorList}
\r\n \r\n {\r\n e.stopPropagation();\r\n if (isSaving) {\r\n return;\r\n }\r\n if (row.pk_FlexEvent) {\r\n const newShowEvaluatorPicker = clone(showEvaluatorPicker);\r\n newShowEvaluatorPicker[row.pk_FlexEvent] = true;\r\n\r\n setShowEvaluatorPicker(newShowEvaluatorPicker);\r\n }\r\n }}\r\n />\r\n\r\n {\r\n const newUnavailables = clone(unavailableSlots);\r\n newUnavailables[index] = newSlot;\r\n setUnavailableSlots(newUnavailables);\r\n }}\r\n header={header}\r\n rowIndex={rowIndex}\r\n flexEvent={row}\r\n showUnavailabilityEvaluatorPicker={showUnavailabilityEvaluatorPicker}\r\n setShowUnavailabilityEvaluatorPicker={setShowUnavailabilityEvaluatorPicker}\r\n showEvaluatorPicker={showEvaluatorPicker}\r\n setShowEvaluatorPicker={setShowEvaluatorPicker}\r\n setSelectedRow={setSelectedRow}\r\n selectedRowRef={selectedRowRef}\r\n />\r\n
\r\n \r\n {' '}\r\n
\r\n {unavailableSlots ? renderEvaluatorPickers(unavailableSlots) : null}\r\n\r\n \r\n {\r\n if (slotsToDelete.length > 0) {\r\n setShowSaveModal(true);\r\n }\r\n\r\n saveAll();\r\n }}\r\n color=\"success\"\r\n >\r\n Save All Changes\r\n \r\n {\r\n if (hasChanges()) {\r\n fireUnsavedChangesAlert();\r\n return;\r\n }\r\n\r\n setShowUnavailabilityModal(false);\r\n }}\r\n >\r\n Cancel\r\n \r\n
\r\n {renderSaveConfirmModal()}\r\n \r\n );\r\n};\r\n\r\nexport default HeaderUnavailablePanel;\r\n","const style = {\r\n dropDownBody: {\r\n padding: 10,\r\n },\r\n userList: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n maxHeight: 150,\r\n minWidth: '100%',\r\n overflowY: 'scroll',\r\n marginBottom: 20,\r\n },\r\n userItem: {\r\n paddingTop: 5,\r\n paddingBottom: 5,\r\n paddingLeft: 5,\r\n fontWeight: 600,\r\n },\r\n spacedBetweenRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '100%',\r\n },\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n width: '100%',\r\n },\r\n genButton: {\r\n backgroundColor: '#0a91ff',\r\n marginTop: 5,\r\n // marginBottom: 5,\r\n },\r\n roomNumberButtons: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n marginTop: 20,\r\n },\r\n roomNumberButton: {\r\n width: '30%',\r\n },\r\n clickableIcon: {\r\n cursor: 'pointer',\r\n marginRight: 5,\r\n },\r\n buttonLabel: { width: '100%', textAlign: 'center', fontWeight: 600 },\r\n};\r\nexport default style;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { Button, Input, Label } from 'reactstrap';\r\nimport { formatBearerToken } from '../../../../../Common.functions';\r\nimport { putData } from '../../../../../Services/dataApi';\r\nimport FocusPalette from '../FocusPalette';\r\n\r\nimport style from './RoomPropertiesPopover.style';\r\n\r\nconst RoomPropertiesPopover = ({\r\n header,\r\n onUpdateEvaluators,\r\n setShowRoomPropertiesPopover,\r\n hasDelay,\r\n allowEdit,\r\n reference,\r\n returnEntireFocusObject,\r\n updateSelectedFocuses,\r\n fireConfirmationForEditingPastSchedule,\r\n dateIsInThePast,\r\n willEditThePast,\r\n}) => {\r\n const [VirtualRoomURL, setVirtualRoomURL] = useState();\r\n const [VirtualRoomDescription, setVirtualRoomDescription] = useState();\r\n const [roomLabel, setRoomLabel] = useState();\r\n const [ignoreEvaluatorFocuses, setIgnoreEvaluatorFocuses] = useState(false);\r\n const [isSubmitting, setIsSubmitting] = useState(false);\r\n\r\n useEffect(() => {\r\n if (header) {\r\n const { rawHeader = {} } = header;\r\n console.log('rawHeader: ', rawHeader);\r\n setVirtualRoomURL(rawHeader.VirtualRoomURL || '');\r\n setVirtualRoomDescription(rawHeader.VirtualRoomDescription || '');\r\n setRoomLabel(header.label);\r\n setIgnoreEvaluatorFocuses(rawHeader.EnableIgnoreEvaluatorFocus || false);\r\n }\r\n }, []);\r\n\r\n const onSave = () => {\r\n setIsSubmitting(true);\r\n onUpdateEvaluators(\r\n {\r\n ignoreEvaluatorFocuses,\r\n VirtualRoomURL,\r\n VirtualRoomDescription,\r\n RoomLabel: roomLabel,\r\n column: header,\r\n pk_ScheduleAssignment: header.dataField,\r\n RoomFocuses: reference,\r\n },\r\n () => {\r\n setShowRoomPropertiesPopover(false);\r\n setIsSubmitting(false);\r\n },\r\n );\r\n };\r\n\r\n const defaultTotalSplits =\r\n header && header.rawHeader && header.rawHeader.ColumnTotalNumberSplits != null\r\n ? header.rawHeader.ColumnTotalNumberSplits\r\n : 1;\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n\r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n }}\r\n >\r\n
\r\n \r\n \r\n {\r\n setVirtualRoomURL(e.target.value);\r\n }}\r\n />\r\n
\r\n \r\n \r\n {\r\n setVirtualRoomDescription(e.target.value);\r\n }}\r\n />\r\n
\r\n \r\n \r\n {\r\n setRoomLabel(e.target.value);\r\n }}\r\n />\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n {\r\n setShowRoomPropertiesPopover(false);\r\n }}\r\n >\r\n Cancel\r\n \r\n\r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n onSave();\r\n }}\r\n >\r\n Save\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default RoomPropertiesPopover;\r\n","import React, { useState, useEffect } from 'react';\r\nimport {\r\n faBan,\r\n faBars,\r\n faCheck,\r\n faCheckSquare,\r\n faCrosshairs,\r\n faDoorOpen,\r\n faEye,\r\n faEyeSlash,\r\n faInfoCircle,\r\n faLink,\r\n faMagic,\r\n faSquare,\r\n faTimesCircle,\r\n faTrashAlt,\r\n} from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\n\r\nimport ConfirmModal from '../ConfirmModal';\r\n\r\nimport FocusPalette from '../FocusPalette';\r\n\r\nimport { Input, Button, Popover, PopoverBody, PopoverHeader, Label } from 'reactstrap';\r\nimport style from './style';\r\nimport './HeaderDetailDropdown.style.css';\r\nimport HeaderUnavailablePanel from '../HeaderUnavailablePanel';\r\nimport {\r\n clone,\r\n countScheduledCandidates,\r\n getScheduleStartAndEndTime,\r\n isCandidateWillBeUnscheduled,\r\n} from '../../../../../Services/schedule';\r\nimport { useAlert } from 'react-alert';\r\nimport Swal from 'sweetalert2';\r\nimport moment from 'moment';\r\nimport VirtualRoomPopover from '../VirtualRoomPopover/VirtualRoomPopover';\r\nimport RoomPropertiesPopover from '../RoomPropertiesPopover/RoomPropertiesPopover';\r\nimport { faUser } from '@fortawesome/free-regular-svg-icons';\r\n\r\nlet nE = [];\r\n\r\nconst HeaderDropDown = ({\r\n addUnavailableSlot,\r\n columnTracker,\r\n dContext,\r\n deleteFlexEvent,\r\n evaluators,\r\n fetchSchedule,\r\n generateScheduleForColumn,\r\n headers,\r\n isSubmitting,\r\n onClearColumn,\r\n onDeleteColumn,\r\n onUpdateEvaluators,\r\n scheduleData,\r\n selectedHeader,\r\n setColumnSplit,\r\n setIsChanged,\r\n setSaveHook,\r\n setShowHeaderPopOver,\r\n setShowSplitCellConfirmModal,\r\n showHeaderPopOver,\r\n splitCountTracker,\r\n token,\r\n updateFlexEvent,\r\n fireConfirmationForEditingPastSchedule,\r\n dateIsInThePast,\r\n willEditThePast,\r\n scheduleID,\r\n addUnavailableSlots,\r\n updateFlexEvents,\r\n}) => {\r\n const [allowEditFocus, setAllowEditFocus] = useState(false);\r\n const [existingEvaluators, setExistingEvaluators] = useState([]);\r\n const [newEvaluators, setNewEvaluators] = useState([]);\r\n const [availableEvaluators, setAvailableEvaluators] = useState([]);\r\n const [showUnavailable, setShowUnavailable] = useState(false);\r\n const [showConfirmModal, setShowConfirmModal] = useState(false);\r\n const [roomLabel, setRoomLabel] = useState();\r\n const [showFocusPopover, setShowFocusPopover] = useState(false);\r\n const [showRoomNumberPopover, setShowRoomNumberPopover] = useState(false);\r\n const [showSplitPopover, setShowSplitPopover] = useState(false);\r\n const [showZoomURLPopover, setShowZoomURLPopover] = useState(false);\r\n const [unavailabilityPanelHasChanges, setUnavailabilityPanelHasChanges] = useState(false);\r\n // ==================== NEW ======================= //\r\n const [showEvaluatorsPopover, setShowEvaluatorsPopover] = useState(false);\r\n const [showRoomPropertiesPopover, setShowRoomPropertiesPopover] = useState(false);\r\n\r\n const [isUpdatingEvaluators, setIsUpdatingEvaluators] = useState(false);\r\n\r\n const popoverLevels = {\r\n showUnavailable: 2,\r\n };\r\n\r\n // ================================================ //\r\n\r\n const [showConfirmClearPopover, setShowConfirmClearPopover] = useState(false);\r\n const [showUnavailabilityEvaluatorPicker, setShowUnavailabilityEvaluatorPicker] = useState(false);\r\n\r\n const [focuses, setFocuses] = useState([]);\r\n\r\n const [splitCount, setSplitCount] = useState(0);\r\n const [maxSplitCount, setMaxSplitCount] = useState(1);\r\n\r\n const alert = useAlert();\r\n\r\n useEffect(() => {\r\n if (setSaveHook) {\r\n setSaveHook({ onSave, onClear }, selectedHeader.dataField);\r\n }\r\n\r\n if (selectedHeader) {\r\n const { rawHeader } = selectedHeader;\r\n if (rawHeader && rawHeader.Evaluators) {\r\n const newSplitCount =\r\n selectedHeader && selectedHeader.rawHeader && selectedHeader.rawHeader.ColumnTotalNumberSplits != null\r\n ? selectedHeader.rawHeader.ColumnTotalNumberSplits\r\n : 1;\r\n const newExistingEvaluators = [];\r\n rawHeader.Evaluators.Evaluators.forEach((e) => {\r\n newExistingEvaluators.push(e.pk_User);\r\n });\r\n\r\n setExistingEvaluators(newExistingEvaluators);\r\n setNewEvaluators(newExistingEvaluators);\r\n\r\n setSplitCount(newSplitCount);\r\n setRoomLabel(selectedHeader.label);\r\n if (selectedHeader.rawHeader.RoomFocuses) {\r\n setFocuses(selectedHeader.rawHeader.RoomFocuses);\r\n }\r\n }\r\n }\r\n }, [JSON.stringify(selectedHeader)]);\r\n\r\n useEffect(() => {\r\n if (scheduleData && selectedHeader) {\r\n const col = parseInt(selectedHeader.dataField);\r\n const { StandardDurationInMinutes, StandardPassingDurationInMinutes } = scheduleData.metaData;\r\n // const standardDuration = parseInt(StandardDurationInMinutes) + parseInt(StandardPassingDurationInMinutes);\r\n\r\n let lowestSplitCount = null;\r\n scheduleData.body.forEach((row) => {\r\n const { CustomDurationInMinutes = 0, CustomPassingDurationInMinutes = 0 } = row[col];\r\n // const customDuration = parseInt(CustomDurationInMinutes) + parseInt(CustomPassingDurationInMinutes);\r\n const duration = CustomDurationInMinutes\r\n ? parseInt(CustomDurationInMinutes)\r\n : parseInt(StandardDurationInMinutes);\r\n const passingDuration = CustomPassingDurationInMinutes\r\n ? parseInt(CustomPassingDurationInMinutes)\r\n : parseInt(StandardPassingDurationInMinutes);\r\n\r\n if (lowestSplitCount == null || duration + passingDuration < lowestSplitCount) {\r\n lowestSplitCount = duration + passingDuration;\r\n }\r\n });\r\n\r\n setMaxSplitCount(lowestSplitCount);\r\n }\r\n }, [scheduleData, selectedHeader]);\r\n\r\n useEffect(() => {\r\n if (newEvaluators) {\r\n nE = newEvaluators.slice();\r\n }\r\n }, [newEvaluators]);\r\n\r\n useEffect(() => {\r\n const newAvailableEvaluators = { ...evaluators };\r\n let headerEvaluators = [];\r\n\r\n if (headers) {\r\n headers.forEach((header) => {\r\n if (\r\n header.Evaluators &&\r\n header.Evaluators.Evaluators &&\r\n header.pk_ScheduleAssignment != selectedHeader.dataField\r\n ) {\r\n headerEvaluators = [...headerEvaluators, ...header.Evaluators.Evaluators];\r\n }\r\n });\r\n\r\n headerEvaluators.forEach((h) => {\r\n if (newAvailableEvaluators[h.pk_User]) {\r\n delete newAvailableEvaluators[h.pk_User];\r\n }\r\n });\r\n }\r\n\r\n setAvailableEvaluators(newAvailableEvaluators);\r\n }, [headers]);\r\n\r\n useEffect(() => {\r\n handleParentPopoverVisibilityTracker('showFocusPopover', showFocusPopover);\r\n }, [showFocusPopover]);\r\n\r\n useEffect(() => {\r\n handleParentPopoverVisibilityTracker('showUnavailable', showUnavailable);\r\n }, [showUnavailable]);\r\n\r\n useEffect(() => {\r\n handleParentPopoverVisibilityTracker('showRoomNumberPopover', showRoomNumberPopover);\r\n }, [showRoomNumberPopover]);\r\n\r\n useEffect(() => {\r\n handleParentPopoverVisibilityTracker('showSplitPopover', showSplitPopover);\r\n }, [showSplitPopover]);\r\n\r\n useEffect(() => {\r\n handleParentPopoverVisibilityTracker('showZoomURLPopover', showZoomURLPopover);\r\n }, [showZoomURLPopover]);\r\n\r\n useEffect(() => {\r\n handleParentPopoverVisibilityTracker('showEvaluatorsPopover', showEvaluatorsPopover);\r\n }, [showEvaluatorsPopover]);\r\n\r\n useEffect(() => {\r\n handleParentPopoverVisibilityTracker('showRoomPropertiesPopover', showRoomPropertiesPopover);\r\n }, [showRoomPropertiesPopover]);\r\n\r\n useEffect(() => {\r\n handleParentPopoverVisibilityTracker('showConfirmClearPopover', showConfirmClearPopover);\r\n }, [showConfirmClearPopover]);\r\n\r\n const meetingInProgress = () => {\r\n let isMeetingInProgress = false;\r\n if (scheduleData) {\r\n const { StartTime, EndTime } = getScheduleStartAndEndTime(scheduleData);\r\n const now = moment(); //.format('MMM DD, YYYY hh:mm A');\r\n isMeetingInProgress = now.isSameOrAfter(StartTime) && now.isSameOrBefore(EndTime); //isTimeRangeOverlap([StartTime, now], [now, EndTime]);\r\n }\r\n\r\n return isMeetingInProgress;\r\n };\r\n\r\n // To not close header when clicking child popover\r\n const handleParentPopoverVisibilityTracker = (key, value) => {\r\n const { dataField } = selectedHeader;\r\n const newShowHeaderPopOver = clone(showHeaderPopOver);\r\n const visibility = showHeaderPopOver[dataField];\r\n visibility[key] = value;\r\n newShowHeaderPopOver[dataField] = visibility;\r\n setShowHeaderPopOver(newShowHeaderPopOver);\r\n };\r\n\r\n const closeOtherPopovers = (popover) => {\r\n switch (popover) {\r\n case 'roomNumberPopover':\r\n setShowUnavailable(false);\r\n setShowFocusPopover(false);\r\n setShowSplitPopover(false);\r\n setShowZoomURLPopover(false);\r\n break;\r\n case 'focusPopover':\r\n setShowUnavailable(false);\r\n setShowRoomNumberPopover(false);\r\n setShowSplitPopover(false);\r\n setShowZoomURLPopover(false);\r\n break;\r\n case 'unavailable':\r\n setShowFocusPopover(false);\r\n setShowRoomNumberPopover(false);\r\n setShowSplitPopover(false);\r\n setShowZoomURLPopover(false);\r\n break;\r\n case 'splitColumnPopover':\r\n setShowFocusPopover(false);\r\n setShowRoomNumberPopover(false);\r\n setShowUnavailable(false);\r\n setShowZoomURLPopover(false);\r\n break;\r\n case 'editRoomURLPopover':\r\n setShowFocusPopover(false);\r\n setShowRoomNumberPopover(false);\r\n setShowUnavailable(false);\r\n setShowSplitPopover(false);\r\n break;\r\n }\r\n };\r\n\r\n const onSave = () => {\r\n const toAdd = [];\r\n const toDelete = [];\r\n\r\n if (selectedHeader) {\r\n setIsUpdatingEvaluators(true);\r\n const { rawHeader, column, dataField } = selectedHeader;\r\n\r\n if (rawHeader && rawHeader.Evaluators) {\r\n const newExistingEvaluators = []; // Current evaluators.\r\n rawHeader.Evaluators.Evaluators.forEach((e) => {\r\n newExistingEvaluators.push(e.pk_User);\r\n });\r\n\r\n // nE is checked evaluators. newEvaluators doesn't work, due to saveHook setup.\r\n nE.forEach((e) => {\r\n if (newExistingEvaluators.indexOf(e) < 0) {\r\n toAdd.push(e);\r\n }\r\n });\r\n // check if there are current evaljuators that are no longer checked,\r\n // meaning, to delete.\r\n newExistingEvaluators.forEach((e) => {\r\n if (nE.indexOf(e) < 0) {\r\n toDelete.push(e);\r\n }\r\n });\r\n } else {\r\n nE.forEach((evaluator) => {\r\n if (!toAdd.includes(evaluator)) {\r\n toAdd.push(evaluator);\r\n }\r\n });\r\n }\r\n\r\n onUpdateEvaluators(\r\n {\r\n evaluatorsToAdd: toAdd,\r\n evaluatorsToDelete: toDelete,\r\n column: selectedHeader,\r\n pk_ScheduleAssignment: selectedHeader.dataField,\r\n },\r\n () => {\r\n setIsUpdatingEvaluators(false);\r\n },\r\n );\r\n }\r\n };\r\n\r\n const onClear = () => {\r\n if (selectedHeader) {\r\n const { rawHeader } = selectedHeader;\r\n if (rawHeader && rawHeader.Evaluators) {\r\n const newExistingEvaluators = [];\r\n rawHeader.Evaluators.Evaluators.forEach((e) => {\r\n newExistingEvaluators.push(e.pk_User);\r\n });\r\n setExistingEvaluators(newExistingEvaluators);\r\n setNewEvaluators(newExistingEvaluators);\r\n }\r\n }\r\n // setNewEvaluators([...existingEvaluators]);\r\n };\r\n\r\n const isSame = (a, b) => a.length === b.length && a.every((v, i) => b.indexOf(v) >= 0);\r\n\r\n const renderUnavailablePopover = () => {\r\n const key = `button_${selectedHeader.dataField}_unavailabilityButton`;\r\n const targetExists = document.getElementById(key);\r\n if (targetExists) {\r\n return (\r\n \r\n Unavailability for {selectedHeader.text || ''}\r\n
\r\n \r\n
\r\n \r\n {\r\n setShowUnavailable(false);\r\n }}\r\n />\r\n
\r\n \r\n Split Column\r\n {\r\n setShowSplitPopover(false);\r\n }}\r\n />\r\n
\r\n \r\n {\r\n setShowSplitPopover(false);\r\n }}\r\n >\r\n Cancel\r\n \r\n {\r\n const { dataField } = selectedHeader;\r\n const { body } = scheduleData;\r\n const timeSlots = [];\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n const data = {\r\n pk_ScheduleAssignment: parseInt(selectedHeader.dataField),\r\n TotalNumberOfSplits: 1,\r\n column: selectedHeader,\r\n };\r\n\r\n body.forEach((timeSlot) => {\r\n timeSlots.push(timeSlot.pk_Timeslot);\r\n });\r\n\r\n const willCandidateBeUnscheduled = isCandidateWillBeUnscheduled(splitCountTracker, {\r\n timeSlots,\r\n headers: [parseInt(dataField)],\r\n splitValue: 1,\r\n });\r\n\r\n if (willCandidateBeUnscheduled) {\r\n setShowSplitCellConfirmModal(true);\r\n return;\r\n }\r\n setColumnSplit(data, (err) => {\r\n if (!err) {\r\n setShowSplitPopover(false);\r\n }\r\n });\r\n }}\r\n >\r\n Remove\r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n const { dataField } = selectedHeader;\r\n const { body } = scheduleData;\r\n const timeSlots = [];\r\n\r\n const data = {\r\n pk_ScheduleAssignment: parseInt(dataField),\r\n TotalNumberOfSplits: splitCount,\r\n column: selectedHeader,\r\n };\r\n\r\n body.forEach((timeSlot) => {\r\n timeSlots.push(timeSlot.pk_Timeslot);\r\n });\r\n\r\n const willCandidateBeUnscheduled = isCandidateWillBeUnscheduled(splitCountTracker, {\r\n timeSlots,\r\n headers: [parseInt(dataField)],\r\n splitValue: splitCount,\r\n });\r\n\r\n if (willCandidateBeUnscheduled) {\r\n setShowSplitCellConfirmModal(true);\r\n setSplitCount(defaultTotalSplits);\r\n return;\r\n }\r\n\r\n setColumnSplit(data, (err) => {\r\n if (!err) {\r\n setShowSplitPopover(false);\r\n }\r\n });\r\n }}\r\n >\r\n Set\r\n \r\n
\r\n \r\n Virtual Room\r\n {\r\n setShowZoomURLPopover(false);\r\n }}\r\n />\r\n
\r\n \r\n Evaluators for {selectedHeader.text || ''}\r\n {\r\n setShowEvaluatorsPopover(false);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n \r\n {Object.values(availableEvaluators)\r\n .sort((a, b) => {\r\n const aString = `${a.UserLast || ''}, ${a.UserFirst || ''}`.toLowerCase();\r\n const bString = `${b.UserLast || ''}, ${b.UserFirst || ''}`.toLowerCase();\r\n return aString > bString ? 1 : -1;\r\n })\r\n // .filter((u) => {\r\n // const { Delete, EnableEvaluator } = u;\r\n // return !Delete && EnableEvaluator;\r\n // })\r\n .map((evaluator, index) => {\r\n const { Deleted, EnableEvaluator } = evaluator;\r\n const isExisting = existingEvaluators && existingEvaluators.indexOf(evaluator.pk_User) >= 0;\r\n\r\n const isNewSelection = newEvaluators.indexOf(evaluator.pk_User) >= 0;\r\n\r\n let backgroundColor = null;\r\n\r\n if (isExisting && isNewSelection) {\r\n backgroundColor = '#c4d5ff';\r\n }\r\n\r\n if (isExisting && !isNewSelection) {\r\n backgroundColor = '#f77777';\r\n }\r\n\r\n if (!isExisting && isNewSelection) {\r\n backgroundColor = '#88ff82';\r\n }\r\n\r\n if (Deleted || !EnableEvaluator) {\r\n return;\r\n }\r\n\r\n return (\r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n\r\n const newNewEvaluators = [...newEvaluators];\r\n if (isNewSelection) {\r\n newNewEvaluators.splice(newEvaluators.indexOf(evaluator.pk_User), 1);\r\n } else {\r\n newNewEvaluators.push(evaluator.pk_User);\r\n }\r\n\r\n setNewEvaluators(newNewEvaluators);\r\n setIsChanged(!isSame(existingEvaluators, newNewEvaluators), selectedHeader.dataField);\r\n }}\r\n >\r\n \r\n {evaluator ? ` ${evaluator.UserLast || ''}, ${evaluator.UserFirst || ''}` : ''}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n\r\n {renderUnavailablePopover()}\r\n \r\n Room Properties\r\n {\r\n setShowRoomPropertiesPopover(false);\r\n }}\r\n />\r\n
\r\n \r\n {\r\n setFocuses(newFocuses);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n\r\n {renderShowConfirmClearModal()}\r\n {renderEvaluatorsPopover()}\r\n {renderRoomPropertiesPopover()}\r\n {renderSplitColumnPopover()}\r\n {/* {renderRoomNumberPopover()}\r\n {renderFocusPopover()}\r\n \r\n \r\n \r\n {renderEditRoomURLPopover()} */}\r\n \r\n
\r\n\r\n {\r\n // \r\n \r\n
\r\n \r\n
\r\n \r\n Evaluators
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n Room Properties
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n Swal.fire({\r\n title: 'Warning',\r\n text: `Are you sure you want to delete column?`,\r\n type: 'warning',\r\n showCancelButton: true,\r\n confirmButtonColor: 'red',\r\n confirmButtonText: `Delete`,\r\n }).then((result) => {\r\n if (result.value) {\r\n onDeleteColumn(selectedHeader);\r\n }\r\n });\r\n }}\r\n style={{ ...style.genButton, backgroundColor: null, width: '100%' }}\r\n >\r\n
\r\n\r\n \r\n
\r\n \r\n Delete Column
\r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n setShowConfirmClearPopover(true);\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n Clear Column
\r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n const candidates = columnTracker[parseInt(selectedHeader.dataField)];\r\n\r\n if (meetingInProgress() && candidates.length > 0) {\r\n Swal.fire({\r\n title: 'Meeting already in progress!',\r\n text: 'The day is in progress, you may be adding interviews that have already passed!',\r\n type: 'info',\r\n showCancelButton: true,\r\n confirmButtonText: `Fill`,\r\n confirmButtonColor: 'green',\r\n cancelButtonText: 'Cancel',\r\n cancelButtonColor: 'grey',\r\n }).then((result) => {\r\n /* Read more about isConfirmed, isDenied below */\r\n if (result.value) {\r\n generateScheduleForColumn([parseInt(selectedHeader.dataField)]);\r\n }\r\n });\r\n return;\r\n }\r\n\r\n if (columnTracker && candidates && candidates.length > 0) {\r\n setShowConfirmModal(true);\r\n } else {\r\n generateScheduleForColumn([parseInt(selectedHeader.dataField)]);\r\n // generateScheduleForColumn([1782, 1785, 1781]);\r\n }\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n Auto Fill Column
\r\n \r\n // {\r\n // const candidates = columnTracker[parseInt(selectedHeader.dataField)];\r\n // if (meetingInProgress() && candidates.length > 0) {\r\n // Swal.fire({\r\n // title: 'Meeting already in progress!',\r\n // text: 'The day is in progress, you may be adding interviews that have already passed!',\r\n // type: 'info',\r\n // showCancelButton: true,\r\n // confirmButtonText: `Fill`,\r\n // confirmButtonColor: 'green',\r\n // cancelButtonText: 'Cancel',\r\n // cancelButtonColor: 'grey',\r\n // }).then((result) => {\r\n // /* Read more about isConfirmed, isDenied below */\r\n // if (result.value) {\r\n // generateScheduleForColumn([parseInt(selectedHeader.dataField)]);\r\n // }\r\n // });\r\n // return;\r\n // }\r\n // if (columnTracker && candidates && candidates.length > 0) {\r\n // setShowConfirmModal(true);\r\n // } else {\r\n // generateScheduleForColumn([parseInt(selectedHeader.dataField)]);\r\n // // generateScheduleForColumn([1782, 1785, 1781]);\r\n // }\r\n // }}\r\n // >\r\n //
\r\n // \r\n // \r\n //
\r\n // \r\n // Auto Fill Column
\r\n // \r\n // \r\n //
\r\n // \r\n //
\r\n // \r\n // \r\n // {' '}\r\n // {selectedHeader && selectedHeader.label ? 'Modify' : 'Add'} Room Label\r\n //
\r\n // \r\n // \r\n //
\r\n // \r\n //
\r\n // \r\n // Virtual Room
\r\n // \r\n // \r\n //
\r\n }\r\n \r\n
\r\n \r\n {attendee.UserPhotoUrl || attendee.PhotoUrl ? (\r\n
\r\n \r\n {\r\n e.stopPropagation();\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n }}\r\n >\r\n \r\n {/* */}\r\n \r\n \r\n
\r\n {columnTitle}
\r\n\r\n \r\n {numbers.map((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\nexport default Attendee;\r\n","import { faBan, faBars, faCheck, faClock, faTimesCircle, faUserCircle } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport classnames from 'classnames';\r\nimport moment from 'moment';\r\nimport React, { useEffect, useState } from 'react';\r\nimport {\r\n Button,\r\n Input,\r\n InputGroup,\r\n InputGroupAddon,\r\n Modal,\r\n ModalBody,\r\n ModalHeader,\r\n Nav,\r\n NavItem,\r\n NavLink,\r\n TabContent,\r\n TabPane,\r\n} from 'reactstrap';\r\n\r\nimport CustomInput from 'reactstrap/lib/CustomInput';\r\nimport style from './style.js';\r\nimport Swal from 'sweetalert2';\r\nimport { faEnvelope } from '@fortawesome/free-regular-svg-icons';\r\nimport { clone, isTimeRangeOverlap } from '../../../../../Services/schedule.js';\r\nimport Attendee from './MeetingAttendance/Attendee.js';\r\nimport HeaderUnavailablePanel from '../HeaderUnavailablePanel/index.js';\r\nimport { useAuth0 } from 'auth0/reactAuth0Spa.js';\r\nimport { deleteData } from 'Services/dataApi.js';\r\nimport { formatBearerToken } from 'Common.functions.js';\r\nimport { useAlert } from 'react-alert';\r\n\r\nconst ScheduleDetailModal = ({\r\n addCandidateToSchedule,\r\n addUnavailableSlot,\r\n addUnavailableSlots,\r\n allowInterviewLimit,\r\n attendanceData,\r\n candidateLimit,\r\n candidates = {},\r\n clearScheduleBlock,\r\n columnTracker,\r\n dateIsInThePast,\r\n dContext,\r\n evaluators = {},\r\n fetchSchedule,\r\n fireConfirmationForEditingPastSchedule,\r\n indexedEvaluatorFlexEvents,\r\n isAddingCandidate,\r\n isFetching,\r\n isSubmitting,\r\n onToggle,\r\n pendingCandidates,\r\n rowTracker,\r\n scheduleData,\r\n scheduleID,\r\n selectedCell,\r\n selectedScheduleBlock,\r\n setShowSplitCellModal,\r\n setShowScheduleDetailModal,\r\n showScheduleDetailModal,\r\n splitBlockCandidateTracker,\r\n updateFlexEvent,\r\n updateFlexEvents,\r\n willEditThePast,\r\n updateAllData,\r\n}) => {\r\n const [activeScheduleDetailTab, setActiveScheduleDetailTab] = useState('1');\r\n const [myAttendanceData, setMyAttendanceData] = useState({}); // Update everytime attendanceData updates, to force a refresh.\r\n // const [ignoreInterviewLimit, setIgnoreInterviewLimit] = useState(false);\r\n const [fakeUrl, setFakeUrl] = useState('Fetching URL. . .');\r\n const [meetingURL, setMeetingURL] = useState(null);\r\n const [selectedCandidates, setSelectedCandidates] = useState([]);\r\n const [ignoreInterviewLimit, setIgnoreInterviewLimit] = useState(false);\r\n const [meetingPassword, setMeetingPassword] = useState('');\r\n const [dialInNumbers, setDialInNumbers] = useState([]);\r\n const [emailData, setEmailData] = useState({});\r\n const [candidateHoveredOn, setCandidateHoveredOn] = useState();\r\n const [showUnavailabilityModal, setShowUnavailabilityModal] = useState(false);\r\n const [unavailabilityPanelHasChanges, setUnavailabilityPanelHasChanges] = useState();\r\n const [showUnavailabilityEvaluatorPicker, setShowUnavailabilityEvaluatorPicker] = useState(false);\r\n const [candidatesInFlexEvent, setCandidatesInFlexEvent] = useState([]);\r\n const [isDeletingUnavailables, setIsDeletingUnavailables] = useState(false);\r\n\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n const alert = useAlert();\r\n useEffect(() => {\r\n setTimeout(() => {\r\n setFakeUrl('Meeting has not been generated yet.');\r\n }, 2000);\r\n }, []);\r\n\r\n useEffect(() => {\r\n setIgnoreInterviewLimit(!allowInterviewLimit);\r\n }, [allowInterviewLimit]);\r\n\r\n useEffect(() => {\r\n if (attendanceData) {\r\n setMyAttendanceData(clone(attendanceData));\r\n }\r\n if (\r\n attendanceData &&\r\n attendanceData.ScheduleBlocks &&\r\n selectedScheduleBlock &&\r\n selectedScheduleBlock.pk_ScheduleBlock\r\n ) {\r\n const block = attendanceData.ScheduleBlocks[selectedScheduleBlock.pk_ScheduleBlock];\r\n if (block) {\r\n setMeetingURL(block.MeetingUrl);\r\n if (block.DialInNumbers && block.DialInNumbers.length > 0) {\r\n setDialInNumbers(block.DialInNumbers);\r\n }\r\n if (block.Password) {\r\n setMeetingPassword(block.Password);\r\n }\r\n }\r\n }\r\n }, [attendanceData, selectedScheduleBlock]);\r\n\r\n useEffect(() => {\r\n if (selectedScheduleBlock && selectedCell && selectedScheduleBlock.column && selectedScheduleBlock.column) {\r\n getEmailData();\r\n processCandidates();\r\n }\r\n }, [JSON.stringify(selectedScheduleBlock), JSON.stringify(selectedCell)]);\r\n\r\n useEffect(() => {\r\n setCandidateHoveredOn(null);\r\n if (showScheduleDetailModal && selectedScheduleBlock.Candidates && selectedScheduleBlock.Candidates.length > 0) {\r\n setActiveScheduleDetailTab('3');\r\n }\r\n }, [showScheduleDetailModal]);\r\n\r\n const processCandidates = () => {\r\n const availableCandidates = JSON.parse(JSON.stringify(sortByLastName(Object.values(candidates))));\r\n const newCandidatesInFlexEvents = [];\r\n const dataField = selectedCell.column.dataField;\r\n const cellFlexEvents = selectedCell.row[dataField] ? selectedCell.row[dataField].FlexEvents || [] : [];\r\n availableCandidates.forEach((candidate) => {\r\n const candidateIsInFlexEventForThisCell = cellFlexEvents.find((f) => {\r\n let hasCandidate = false;\r\n f.AttendingCandidates.forEach((c) => {\r\n if (c.pk_Candidate == candidate.pk_Candidate) {\r\n hasCandidate = true;\r\n }\r\n });\r\n\r\n return hasCandidate;\r\n });\r\n\r\n if (candidateIsInFlexEventForThisCell && !newCandidatesInFlexEvents.includes(candidate.pk_Candidate)) {\r\n newCandidatesInFlexEvents.push(candidate.pk_Candidate);\r\n }\r\n });\r\n\r\n setCandidatesInFlexEvent(newCandidatesInFlexEvents);\r\n };\r\n const sortByLastName = (toBeSorted) => {\r\n return toBeSorted.sort((a, b) => {\r\n try {\r\n const textA = a.LastName.toUpperCase();\r\n const textB = b.LastName.toUpperCase();\r\n return textA < textB ? -1 : textA > textB ? 1 : 0;\r\n } catch (e) {\r\n return 0;\r\n }\r\n });\r\n };\r\n\r\n const getAvailableCandidates = ({ row, column = {} }) => {\r\n const availableCandidates = JSON.parse(JSON.stringify(sortByLastName(Object.values(candidates))));\r\n const invalidCandidates = [];\r\n const currentCandidates = [];\r\n const maxScheduleLimit = candidateLimit;\r\n\r\n let pendingItemKey = '';\r\n let isAPendingCandidateInRow = false; // is a pendign candidate within the row\r\n let isAPendingCandidateInColumn = false; // is a pending candidate within the column\r\n // Delete candidates already in block.\r\n const cellCandidates =\r\n selectedScheduleBlock && selectedScheduleBlock.Candidates ? selectedScheduleBlock.Candidates : [];\r\n\r\n cellCandidates.map((candidate) => {\r\n const availableCandidate =\r\n availableCandidates[\r\n availableCandidates.findIndex((c) => {\r\n return c.pk_Candidate === candidate.pk_Candidate;\r\n })\r\n ];\r\n\r\n if (!availableCandidate) {\r\n return;\r\n }\r\n const newCandidate = JSON.parse(JSON.stringify(availableCandidate));\r\n\r\n newCandidate.type = 'current';\r\n currentCandidates.push(newCandidate);\r\n const guiltyIndex = availableCandidates.findIndex((c) => {\r\n return c.pk_Candidate === newCandidate.pk_Candidate;\r\n });\r\n availableCandidates.splice(guiltyIndex, 1);\r\n });\r\n\r\n const cell = row[parseInt(column.dataField)];\r\n const blockStart = moment(selectedScheduleBlock ? selectedScheduleBlock.slot : row.slot);\r\n const blockEnd = moment(selectedScheduleBlock ? selectedScheduleBlock.slotEnd : row.slotEnd);\r\n // =================== calc row/column duplication. ============//\r\n let tempAvailableCandidates = availableCandidates.slice();\r\n tempAvailableCandidates.forEach((candidate) => {\r\n const { pk_Candidate } = candidate;\r\n const splitData = splitBlockCandidateTracker[pk_Candidate] || [];\r\n\r\n const candidateInstancesInRow = splitData.filter((d) => {\r\n const { pk_Timeslot } = d;\r\n return pk_Timeslot == row.pk_Timeslot;\r\n });\r\n\r\n let hasSplitConflict = false;\r\n candidateInstancesInRow.forEach((c) => {\r\n // console.log('c: ');\r\n const existingBlockStart = moment(c.slot);\r\n const existingBlockEnd = moment(c.slotEnd);\r\n\r\n const hasTimeRangeOverlap = isTimeRangeOverlap([blockStart, blockEnd], [existingBlockStart, existingBlockEnd]);\r\n\r\n if (hasTimeRangeOverlap) {\r\n // if (c.pk_Candidate == 19231) {\r\n // console.log('overlap with: ', c);\r\n // console.log('existingBlockStart: ', existingBlockStart.format('hh:mm A'));\r\n // console.log('existingBlockEnd: ', existingBlockEnd.format('hh:mm A'));\r\n // console.log('blockStart: ', blockStart.format('hh:mm A'));\r\n // console.log('blockEnd: ', blockEnd.format('hh:mm A'));\r\n // }\r\n\r\n hasSplitConflict = true;\r\n }\r\n });\r\n // TODO: Check instances if all are split cells, then check if in conflict with THIS schedule block.\r\n // Find Schedule block where candidate occupies entire timeslot for this row.\r\n const isInBlockForEntireTimeSlot = splitData.find((sd) => {\r\n const { ColumnTotalNumberOfSplits, ScheduleBlockTotalNumberOfSplits, pk_Timeslot } = sd;\r\n return !ColumnTotalNumberOfSplits && !ScheduleBlockTotalNumberOfSplits && pk_Timeslot == row.pk_Timeslot;\r\n });\r\n\r\n const isInRow = hasSplitConflict || isInBlockForEntireTimeSlot;\r\n\r\n const isInColumn =\r\n column.rawHeader &&\r\n columnTracker[column.rawHeader.pk_ScheduleAssignment] != null &&\r\n columnTracker[column.rawHeader.pk_ScheduleAssignment].includes(parseInt(pk_Candidate));\r\n\r\n candidate.isDuplicatePosition = isInRow || isInColumn;\r\n const candidateIsInFlexEvent = candidatesInFlexEvent.includes(pk_Candidate);\r\n if (isInRow) {\r\n candidate.rowOfDuplicate = row.pk_Timeslot;\r\n candidate.isInRow = isInRow;\r\n }\r\n\r\n if (isInColumn) {\r\n candidate.columnOfDuplicate = column.rawHeader.pk_ScheduleAssignment;\r\n candidate.isInColumn = isInColumn;\r\n }\r\n\r\n if (hasSplitConflict) {\r\n candidate.hasSplitConflict = true;\r\n }\r\n\r\n if (\r\n isInRow ||\r\n isInColumn ||\r\n hasSplitConflict ||\r\n (maxScheduleLimit <= candidate.CountOfScheduleInterviews && !ignoreInterviewLimit) ||\r\n candidateIsInFlexEvent\r\n ) {\r\n candidate.color = 'gray';\r\n candidate.type = 'invalid';\r\n\r\n invalidCandidates.push(candidate);\r\n const guiltyIndex = availableCandidates.findIndex((c) => {\r\n return c.pk_Candidate === candidate.pk_Candidate;\r\n });\r\n availableCandidates.splice(guiltyIndex, 1);\r\n }\r\n });\r\n // ===================================================================//\r\n\r\n // check if pending candidates exists in same row/column\r\n if (showScheduleDetailModal) {\r\n tempAvailableCandidates = availableCandidates.slice();\r\n\r\n // check row for pending candidates\r\n Object.keys(columnTracker).forEach((key) => {\r\n pendingItemKey = `${row.pk_Timeslot}_${key}`;\r\n const pendingKeysInThisCell =\r\n Object.keys(pendingCandidates).filter((key) => {\r\n return key.indexOf(`${pendingItemKey}_`) >= 0;\r\n }) || [];\r\n\r\n const pendingItemsInThisCell = pendingKeysInThisCell.map((key) => {\r\n return pendingCandidates[key];\r\n });\r\n\r\n pendingItemsInThisCell.forEach((candidatesActual) => {\r\n const candidateActual = candidatesActual[0];\r\n let guiltyIndex = availableCandidates.findIndex((item) => {\r\n return item.pk_Candidate == candidateActual.pk_Candidate;\r\n });\r\n\r\n if (guiltyIndex >= 0) {\r\n isAPendingCandidateInRow = true;\r\n availableCandidates.splice(guiltyIndex, 1);\r\n }\r\n\r\n guiltyIndex = invalidCandidates.findIndex((item) => {\r\n return item.pk_Candidate == candidateActual.pk_Candidate;\r\n });\r\n\r\n if (guiltyIndex < 0) {\r\n candidateActual.color = 'gray';\r\n candidateActual.type = 'invalid';\r\n invalidCandidates.push(candidateActual);\r\n }\r\n });\r\n });\r\n\r\n Object.keys(rowTracker).forEach((key) => {\r\n pendingItemKey = `${key}_${column.dataField}`;\r\n const pendingKeysInThisCell =\r\n Object.keys(pendingCandidates).filter((key) => {\r\n return key.indexOf(`${pendingItemKey}_`) >= 0;\r\n }) || [];\r\n\r\n const pendingItemsInThisCell = pendingKeysInThisCell.map((key) => {\r\n return pendingCandidates[key];\r\n });\r\n\r\n pendingItemsInThisCell.forEach((candidatesActual) => {\r\n const candidateActual = candidatesActual[0];\r\n let guiltyIndex = availableCandidates.findIndex((item) => {\r\n return item.pk_Candidate == candidateActual.pk_Candidate;\r\n });\r\n\r\n if (guiltyIndex >= 0) {\r\n isAPendingCandidateInColumn = true;\r\n availableCandidates.splice(guiltyIndex, 1);\r\n }\r\n\r\n guiltyIndex = invalidCandidates.findIndex((item) => {\r\n return item.pk_Candidate == candidateActual.pk_Candidate;\r\n });\r\n\r\n if (guiltyIndex < 0) {\r\n candidateActual.color = 'gray';\r\n candidateActual.type = 'invalid';\r\n invalidCandidates.push(candidateActual);\r\n }\r\n });\r\n });\r\n }\r\n\r\n return [\r\n ...sortByLastName(currentCandidates),\r\n ...sortByLastName(availableCandidates),\r\n ...sortByLastName(invalidCandidates),\r\n ];\r\n };\r\n\r\n const getEmailData = () => {\r\n const { column, row } = selectedCell || {};\r\n // fk_ScheduleAssignment\r\n const { rawHeader, dataField } = column || {};\r\n const currentCandidates = [];\r\n const availableEvaluators =\r\n dataField && row[parseInt(dataField)] && row[parseInt(dataField)].availableEvaluators\r\n ? row[parseInt(dataField)].availableEvaluators.slice()\r\n : [];\r\n const availableCandidates = clone(sortByLastName(Object.values(candidates)));\r\n const cellCandidates =\r\n selectedScheduleBlock && selectedScheduleBlock.Candidates ? selectedScheduleBlock.Candidates : [];\r\n\r\n cellCandidates.map((candidate) => {\r\n const availableCandidate =\r\n availableCandidates[\r\n availableCandidates.findIndex((c) => {\r\n return c.pk_Candidate === candidate.pk_Candidate;\r\n })\r\n ];\r\n\r\n if (!availableCandidate) {\r\n return;\r\n }\r\n const newCandidate = JSON.parse(JSON.stringify(availableCandidate));\r\n newCandidate.type = 'current';\r\n currentCandidates.push(newCandidate);\r\n const guiltyIndex = availableCandidates.findIndex((c) => {\r\n return c.pk_Candidate === newCandidate.pk_Candidate;\r\n });\r\n availableCandidates.splice(guiltyIndex, 1);\r\n });\r\n\r\n const attendeeList = [...availableEvaluators, ...currentCandidates];\r\n const { emailList, nameList } = processAtendeeListNameAndEmails(attendeeList);\r\n setEmailData({\r\n emailList,\r\n nameList,\r\n });\r\n return emailList;\r\n };\r\n\r\n const processAtendeeListNameAndEmails = (list) => {\r\n let emailList = null;\r\n let nameList = '';\r\n list.forEach((a) => {\r\n if (a.Email || a.Auth0Email) {\r\n if (emailList) {\r\n emailList += `,${a.Email || a.Auth0Email}`;\r\n } else {\r\n emailList = `${a.Email || a.Auth0Email}`;\r\n }\r\n }\r\n\r\n if (nameList) {\r\n if (a.pk_User) {\r\n nameList += `, ${a.UserFirst || ''} ${a.UserLast || ''}`;\r\n } else {\r\n nameList += `, ${a.FirstName || ''} ${a.LastName || ''}`;\r\n }\r\n } else {\r\n if (a.pk_User) {\r\n nameList = `${a.UserFirst || ''} ${a.UserLast || ''}`;\r\n } else {\r\n nameList = `${a.FirstName || ''} ${a.LastName || ''}`;\r\n }\r\n }\r\n });\r\n\r\n return { emailList, nameList };\r\n };\r\n\r\n const deleteFlexEvent = (pk_FlexEvents, resolve, reject, callBack) => {\r\n setIsDeletingUnavailables(true);\r\n\r\n getTokenSilently()\r\n .then((token) => {\r\n deleteData(\r\n 'department/season/schedule/flexEvent',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n },\r\n { pk_FlexEvents: pk_FlexEvents },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n alert.success('Deleted successfully!');\r\n setIsDeletingUnavailables(false);\r\n if (callBack) {\r\n callBack();\r\n } else {\r\n setShowScheduleDetailModal(false);\r\n }\r\n fetchSchedule();\r\n })\r\n .catch((err) => {\r\n setIsDeletingUnavailables(false);\r\n if (callBack) {\r\n callBack(true);\r\n }\r\n alert.error('Failed to delete!');\r\n });\r\n })\r\n .catch((err) => {\r\n alert.error('Failed to delete!');\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const checkIfScheduleBlockIsUnavailable = (flexEvents, scheduleBlock) => {\r\n let isUnavailable = false;\r\n const slot = moment(scheduleBlock.slot);\r\n const slotEnd = moment(scheduleBlock.slotEnd);\r\n\r\n flexEvents.forEach((flexEvent) => {\r\n const { FlexTimeStart, FlexTimeEnd, FlexDateStart, FlexDateEnd } = flexEvent;\r\n const FlexTimeStartActual = moment(`${FlexDateStart} ${FlexTimeStart}`);\r\n const FlexTimeEndActual = moment(`${FlexDateEnd} ${FlexTimeEnd}`);\r\n\r\n if (\r\n (FlexTimeStartActual.isSameOrAfter(slot) && FlexTimeStartActual.isBefore(slotEnd)) || // Event start is between rowstart and rowend\r\n (FlexTimeEndActual.isAfter(slot) && FlexTimeEndActual.isBefore(slotEnd)) || // event end is between rowstart and row end\r\n (FlexTimeStartActual.isSameOrBefore(slot) && FlexTimeEndActual.isSameOrAfter(slotEnd)) // rowstart and row end is within event start and end\r\n ) {\r\n isUnavailable = true;\r\n }\r\n });\r\n\r\n return isUnavailable;\r\n };\r\n\r\n const processSwap = (candidate) => {\r\n const { body = [], headers } = scheduleData || {};\r\n const { rowOfDuplicate, columnOfDuplicate, pk_Candidate } = candidate;\r\n const blocksToClear = [];\r\n if (rowOfDuplicate) {\r\n // Duplicate along row.\r\n const rowDuplicate = body.find((t) => {\r\n return t.pk_Timeslot == rowOfDuplicate;\r\n });\r\n\r\n const splitData = splitBlockCandidateTracker[pk_Candidate] || [];\r\n const blockStart = moment(selectedScheduleBlock ? selectedScheduleBlock.slot : rowDuplicate.slot);\r\n const blockEnd = moment(selectedScheduleBlock ? selectedScheduleBlock.slotEnd : rowDuplicate.slotEnd);\r\n\r\n const candidateInstancesInRow = splitData.filter((d) => {\r\n const { pk_Timeslot } = d;\r\n return pk_Timeslot == rowOfDuplicate;\r\n });\r\n\r\n candidateInstancesInRow.forEach((c) => {\r\n // console.log('c: ');\r\n const existingBlockStart = moment(c.slot);\r\n const existingBlockEnd = moment(c.slotEnd);\r\n\r\n const hasTimeRangeOverlap = isTimeRangeOverlap([blockStart, blockEnd], [existingBlockStart, existingBlockEnd]);\r\n\r\n if (hasTimeRangeOverlap) {\r\n blocksToClear.push(c.pk_ScheduleBlock);\r\n }\r\n });\r\n\r\n // let rowDuplicateScheduleBlock;\r\n // headers.forEach((h) => {\r\n // const blocks = rowDuplicate[h.pk_ScheduleAssignment].ScheduleBlockEntries || [];\r\n // console.log('checking blocks for duplicate: ', blocks);\r\n // blocks.forEach((b) => {\r\n // if (b.Candidates) {\r\n // const { Candidates } = b;\r\n // Candidates.forEach((c) => {\r\n // console.log('comparing ', candidate.pk_Candidate, ' vs ', c.pk_Candidate);\r\n // if (c.pk_Candidate == candidate.pk_Candidate) {\r\n // blocksToClear.push(b.pk_ScheduleBlock);\r\n // // rowDuplicateScheduleBlock = b.pk_ScheduleBlock;\r\n // }\r\n // });\r\n // }\r\n // });\r\n // });\r\n // blocksToClear.push(rowDuplicateScheduleBlock);\r\n }\r\n\r\n if (columnOfDuplicate) {\r\n // Duplicate along column\r\n const cellsInGuiltyColumn = body.map((t) => {\r\n return t[columnOfDuplicate];\r\n });\r\n let columnDuplicateScheduleBlock;\r\n\r\n cellsInGuiltyColumn.forEach((c) => {\r\n const blocks = c.ScheduleBlockEntries || [];\r\n blocks.forEach((b) => {\r\n if (b.Candidates) {\r\n const { Candidates } = b;\r\n Candidates.forEach((c) => {\r\n if (c.pk_Candidate == candidate.pk_Candidate) {\r\n columnDuplicateScheduleBlock = b.pk_ScheduleBlock;\r\n }\r\n });\r\n }\r\n });\r\n });\r\n blocksToClear.push(columnDuplicateScheduleBlock);\r\n }\r\n\r\n clearScheduleBlock(blocksToClear, () => {\r\n const { column, row } = selectedCell || {};\r\n const { rawHeader } = column || {};\r\n const data = {\r\n pk_ScheduleAssignment: rawHeader.pk_ScheduleAssignment,\r\n pk_Timeslot: row.pk_Timeslot,\r\n candidates: [candidate],\r\n selectedScheduleBlock,\r\n };\r\n\r\n addCandidateToSchedule(data);\r\n });\r\n };\r\n\r\n const fireCandidateInFlexEventAlert = (candidate, flexEvent, callback) => {\r\n const { CountOfScheduleInterviews, isDuplicatePosition } = candidate;\r\n Swal.fire({\r\n title: 'Candidate in a Flex Event!',\r\n text: `${candidate.FirstName || ''} ${candidate.LastName || ''} is assigned to a Flex Event ${\r\n flexEvent.FlexEventName ? `\"${flexEvent.FlexEventName}\"` : '(Unnamed Flex Event)'\r\n } that overlaps this cell! Remove ${candidate.FirstName || ''} from flex event first.`,\r\n icon: 'warning',\r\n showCancelButton: true,\r\n cancelButtonColor: 'grey',\r\n cancelButtonText: 'Okay',\r\n confirmButtonColor: 'red',\r\n confirmButtonText: 'Schedule Anyway',\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n if (\r\n allowInterviewLimit &&\r\n !ignoreInterviewLimit &&\r\n candidateLimit <= CountOfScheduleInterviews &&\r\n !isDuplicatePosition\r\n ) {\r\n fireOverLimitAlert(candidate);\r\n return;\r\n }\r\n\r\n if (callback) {\r\n callback();\r\n return;\r\n }\r\n const { column, row } = selectedCell;\r\n const { rawHeader } = column;\r\n\r\n // const { pk_ScheduleAssignment, pk_Timeslot, candidates } = data;\r\n const data = {\r\n pk_ScheduleAssignment: rawHeader.pk_ScheduleAssignment,\r\n pk_Timeslot: row.pk_Timeslot,\r\n candidates: [candidate],\r\n selectedScheduleBlock,\r\n };\r\n\r\n addCandidateToSchedule(data);\r\n }\r\n });\r\n };\r\n\r\n const fireEvaluatorInFlexEventAlert = (data) => {\r\n const { candidate, evaluators, flexEvents, callback } = data;\r\n const { CountOfScheduleInterviews, isDuplicatePosition } = candidate;\r\n const evaluatorNames = [];\r\n let names = '';\r\n evaluators.forEach((evaluator, i) => {\r\n evaluatorNames.push(`${evaluator.UserLast}, ${evaluator.UserFirst}`);\r\n });\r\n evaluatorNames.sort();\r\n evaluatorNames.forEach((evaluatorName, i) => {\r\n names += `${evaluators[i].UserFirst[0]}. ${evaluators[i].UserLast}${\r\n evaluatorNames.length > 1 && i < evaluatorNames.length - 1 ? ', ' : ' '\r\n }`;\r\n });\r\n\r\n let flexEventsWithColumnEvaluators = [];\r\n flexEvents.forEach((flexEvent) => {\r\n flexEvent.AttendingUsers.forEach((evaluator) => {\r\n const evaluatorIsInColumn = evaluators.find((e) => {\r\n return e.pk_User == evaluator.pk_User;\r\n });\r\n\r\n if (evaluatorIsInColumn) {\r\n const flexEventExists = flexEventsWithColumnEvaluators.find((fE) => {\r\n return flexEvent.pk_FlexEvent == fE.pk_FlexEvent;\r\n });\r\n\r\n if (!flexEventExists) {\r\n flexEventsWithColumnEvaluators.push(flexEventsWithColumnEvaluators);\r\n }\r\n }\r\n });\r\n });\r\n\r\n const multipleEvaluators = evaluators.length > 1;\r\n const multipleFlexEvents = flexEventsWithColumnEvaluators.length > 1;\r\n\r\n Swal.fire({\r\n title: `${multipleEvaluators ? 'Evaluators' : `Evaluator`} in ${\r\n multipleFlexEvents ? 'Flex Events' : 'a Flex Event'\r\n }!`,\r\n text: `${\r\n multipleEvaluators ? `Evaluators ${names}` : `Evaluator ${evaluators[0].UserFirst} ${evaluators[0].UserLast}`\r\n } ${multipleEvaluators ? 'are' : 'is'} assigned to ${\r\n multipleFlexEvents ? 'Flex Events.' : 'a Flex Event.'\r\n } Remove ${multipleFlexEvents ? 'Evaluators' : 'Evaluator'} from ${\r\n multipleFlexEvents ? 'Flex Events' : 'Flex Event'\r\n } first.`,\r\n icon: 'warning',\r\n showCancelButton: true,\r\n cancelButtonColor: 'grey',\r\n cancelButtonText: 'Okay',\r\n confirmButtonColor: 'red',\r\n confirmButtonText: 'Schedule Anyway',\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n if (\r\n allowInterviewLimit &&\r\n !ignoreInterviewLimit &&\r\n candidateLimit <= CountOfScheduleInterviews &&\r\n !isDuplicatePosition\r\n ) {\r\n fireOverLimitAlert(candidate);\r\n return;\r\n }\r\n\r\n if (callback) {\r\n callback();\r\n return;\r\n }\r\n const { column, row } = selectedCell;\r\n const { rawHeader } = column;\r\n\r\n // const { pk_ScheduleAssignment, pk_Timeslot, candidates } = data;\r\n const data = {\r\n pk_ScheduleAssignment: rawHeader.pk_ScheduleAssignment,\r\n pk_Timeslot: row.pk_Timeslot,\r\n candidates: [candidate],\r\n selectedScheduleBlock,\r\n };\r\n\r\n addCandidateToSchedule(data);\r\n }\r\n });\r\n };\r\n\r\n const fireSwapAlert = (candidate) => {\r\n Swal.fire({\r\n title: 'Do you want to move this candidate?',\r\n html: `${candidate.FirstName} ${candidate.LastName} is already scheduled in this ${\r\n candidate.isInRow && candidate.isInColumn\r\n ? 'row and column.'\r\n : candidate.isInRow\r\n ? 'row'\r\n : candidate.isInColumn\r\n ? 'column'\r\n : ''\r\n }\r\n\r\n \r\n {isAttending == null || (isAttending.fk_Candidate == null && isAttending.fk_User == null)\r\n ? 'Not yet joined'\r\n : (isAttending.fk_Candidate || isAttending.fk_User) && IsActive\r\n ? 'Attending'\r\n : (isAttending.fk_Candidate || isAttending.fk_User) && !IsActive\r\n ? 'Vacated'\r\n : 'Vacated'}\r\n
\r\n \r\n
\r\n Warning: This WILL remove candidates from already-existing and conflicting ${\r\n candidate.isInRow && candidate.isInColumn ? 'cells' : 'cell'\r\n }.`,\r\n icon: 'warning',\r\n showCancelButton: true,\r\n cancelButtonColor: 'gray',\r\n confirmButtonText: 'Yes',\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n processSwap(candidate);\r\n } else {\r\n }\r\n });\r\n };\r\n\r\n const fireOverLimitAlert = (candidate) => {\r\n const { CountOfScheduleInterviews } = candidate;\r\n Swal.fire({\r\n title: 'Over the Limit!',\r\n text: `${candidate.FirstName || ''} ${candidate.LastName ||\r\n ''} already has ${CountOfScheduleInterviews} interviews. The limit is ${candidateLimit} per candidate. Increase the candidate limit or toggle the \"Ignore Limits\" switch first.`,\r\n icon: 'warning',\r\n // showCancelButton: true,\r\n // cancelButtonColor: 'gray',\r\n // confirmButtonText: 'Yes',\r\n });\r\n };\r\n\r\n const fireUnavailableUnsavedChangesAlert = () => {\r\n Swal.fire({\r\n title: 'Unsaved Changes',\r\n text: 'You have unsaved changes. Are you sure you want to discard these? You cannot undo this.',\r\n type: 'warning',\r\n showCancelButton: true,\r\n confirmButtonColor: 'red',\r\n confirmButtonText: `Yes`,\r\n }).then((response) => {\r\n if (response.isConfirmed) {\r\n setShowUnavailabilityModal(false);\r\n }\r\n });\r\n };\r\n\r\n const renderAvailableCandidatesTab = () => {\r\n const availableCandidates = selectedCell ? getAvailableCandidates(selectedCell) : [];\r\n const { column, row } = selectedCell || {};\r\n const { rawHeader } = column || {};\r\n const evaluatorsToBeUnavailable = [];\r\n if (rawHeader && rawHeader.Evaluators && rawHeader.Evaluators.Evaluators) {\r\n rawHeader.Evaluators.Evaluators.forEach((evaluator) => {\r\n evaluatorsToBeUnavailable.push(evaluator.pk_User);\r\n });\r\n }\r\n const slot = row ? row.pk_Timeslot : null;\r\n const cellActual = column && row ? row[parseInt(column.dataField)] : null;\r\n const isCellUnavailable =\r\n cellActual &&\r\n cellActual.isUnavailable &&\r\n checkIfScheduleBlockIsUnavailable(cellActual.flexEvents, selectedScheduleBlock || {});\r\n\r\n return (\r\n
\r\n
\r\n \r\n
\r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n\r\n clearScheduleBlock();\r\n }}\r\n >\r\n
\r\n {/* \r\n
\r\n \r\n Clear Candidate
\r\n \r\n \r\n
*/}\r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n // setShowUnavailabilityModal(true);\r\n\r\n if (isCellUnavailable) {\r\n const pk_FlexEvents = [];\r\n let innerHTML = `
';\r\n Swal.fire({\r\n title: 'Remove Unavailability?',\r\n\r\n html: innerHTML,\r\n icon: 'warning',\r\n showCancelButton: true,\r\n showDenyButton: true,\r\n denyButtonColor: '#007bff',\r\n denyButtonText: 'Manage',\r\n cancelButtonColor: '#dc3545',\r\n cancelButtonText: 'Remove',\r\n confirmButtonText: 'Cancel',\r\n confirmButtonColor: 'gray',\r\n }).then((result) => {\r\n if (result.isDismissed) {\r\n deleteFlexEvent(pk_FlexEvents);\r\n } else if (result.isDenied) {\r\n setShowUnavailabilityModal(true);\r\n } else {\r\n }\r\n });\r\n } else {\r\n const data = {\r\n newEvaluators: evaluatorsToBeUnavailable,\r\n StartDateTime: moment.tz(selectedScheduleBlock.slot, null).format(),\r\n EndDateTime: moment.tz(selectedScheduleBlock.slotEnd, null).format(),\r\n eventName: 'UNAVAILABLE',\r\n FlexTimeStart: moment.tz(selectedScheduleBlock.slot, null).format('hh:mm A'),\r\n FlexTimeEnd: moment.tz(selectedScheduleBlock.slotEnd, null).format('hh:mm A'),\r\n };\r\n\r\n addUnavailableSlot(data);\r\n }\r\n }}\r\n >\r\n `;\r\n\r\n cellActual.flexEvents.forEach((flexEvent) => {\r\n const { FlexEventName = '', FlexTimeStart, FlexTimeEnd, FlexDateStart, FlexDateEnd } = flexEvent;\r\n\r\n const timeStartToDisplay = moment(`${FlexDateStart} ${FlexTimeStart}`).format('hh:mm A');\r\n const timeEndToDisplay = moment(`${FlexDateEnd} ${FlexTimeEnd}`).format('hh:mm A');\r\n if (flexEvent.FlexEventName === 'UNAVAILABLE') {\r\n pk_FlexEvents.push(flexEvent.pk_FlexEvent);\r\n innerHTML += `
';\r\n });\r\n innerHTML += '${flexEvent.FlexEventName} ${flexEvent.pk_FlexEvent} (${timeStartToDisplay} - ${timeEndToDisplay})\r\n
`;\r\n flexEvent.AttendingUsers.forEach((evaluator) => {\r\n innerHTML += `-${evaluator.UserLast ||\r\n ''}${evaluator.UserLast && evaluator.UserFirst ? ', ' : ''} ${evaluator.UserFirst ||\r\n ''}
`;\r\n });\r\n }\r\n // innerHTML += '\r\n
\r\n {renderUnavailabilityModal()}\r\n \r\n {isCellUnavailable ? 'Clear Unavailable' : 'Unavailable'}
\r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n setShowSplitCellModal(true);\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n Split Cell
\r\n \r\n {allowInterviewLimit ? (\r\n
\r\n )}\r\n\r\n {candidates && Object.keys(candidates).length > 0 ? (\r\n
\r\n ) : (\r\n \r\n {\r\n const checkValue = e.target.checked;\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n setIgnoreInterviewLimit(checkValue);\r\n }}\r\n />\r\n
\r\n ) : (\r\n \r\n )}\r\n\r\n {candidates && Object.keys(candidates).length > 0 ? (\r\n
\r\n {Object.keys(availableCandidates).map((key) => {\r\n const candidate = availableCandidates[key];\r\n const { CountOfScheduleInterviews } = candidate;\r\n\r\n let tagText = null;\r\n\r\n if (candidate.Tags) {\r\n candidate.Tags.forEach((tag) => {\r\n if (tag.Tag) {\r\n if (tagText == null) {\r\n tagText = `(${tag.Tag}`;\r\n } else {\r\n tagText += `, ${tag.Tag}`;\r\n }\r\n }\r\n });\r\n if (tagText != null) {\r\n tagText += ')';\r\n }\r\n } else {\r\n tagText = '(No Tags)';\r\n }\r\n\r\n return (\r\n {\r\n setCandidateHoveredOn(candidate);\r\n }}\r\n onMouseLeave={() => {\r\n setCandidateHoveredOn(null);\r\n }}\r\n onClick={async () => {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n const cellFlexEvents = selectedCell.row[selectedCell.column.dataField].FlexEvents || [];\r\n const candidateIsInFlexEventForThisCell = cellFlexEvents.find((f) => {\r\n let hasCandidate = false;\r\n f.AttendingCandidates.forEach((c) => {\r\n if (c.pk_Candidate == candidate.pk_Candidate) {\r\n hasCandidate = true;\r\n }\r\n });\r\n\r\n return hasCandidate;\r\n });\r\n\r\n let hasEvaluatorInFlexEvent = false;\r\n\r\n if (\r\n selectedScheduleBlock &&\r\n selectedScheduleBlock.flexEventEvaluators &&\r\n selectedScheduleBlock.flexEventEvaluators.length > 0\r\n ) {\r\n hasEvaluatorInFlexEvent = true;\r\n }\r\n\r\n const { column, row } = selectedCell;\r\n const { rawHeader } = column;\r\n\r\n // const { pk_ScheduleAssignment, pk_Timeslot, candidates } = data;\r\n const data = {\r\n pk_ScheduleAssignment: rawHeader.pk_ScheduleAssignment,\r\n pk_Timeslot: row.pk_Timeslot,\r\n candidates: [candidate],\r\n selectedScheduleBlock,\r\n };\r\n const canFireOverLimit =\r\n allowInterviewLimit && !ignoreInterviewLimit && candidateLimit <= CountOfScheduleInterviews;\r\n\r\n if (candidate.type === 'current') {\r\n Swal.fire({\r\n title: 'Delete?',\r\n text: `Are you sure you want to Unschedule ${candidate.FirstName ||\r\n ''} ${candidate.LastName || ''}?`,\r\n icon: 'warning',\r\n showCancelButton: true,\r\n cancelButtonColor: 'gray',\r\n confirmButtonText: 'Yes',\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n clearScheduleBlock();\r\n } else {\r\n }\r\n });\r\n } else if (candidate.type == null || candidate.type != 'current') {\r\n if (hasEvaluatorInFlexEvent) {\r\n fireEvaluatorInFlexEventAlert({\r\n candidate,\r\n evaluators: selectedScheduleBlock.flexEventEvaluators,\r\n flexEvents: selectedScheduleBlock.FlexEvents,\r\n callback: () => {\r\n if (candidateIsInFlexEventForThisCell) {\r\n fireCandidateInFlexEventAlert(candidate, candidateIsInFlexEventForThisCell, () => {\r\n if (candidate.isDuplicatePosition) {\r\n fireSwapAlert(candidate);\r\n } else {\r\n if (canFireOverLimit) {\r\n fireOverLimitAlert(candidate);\r\n return;\r\n }\r\n addCandidateToSchedule(data);\r\n }\r\n });\r\n } else if (candidate.isDuplicatePosition) {\r\n fireSwapAlert(candidate);\r\n } else {\r\n if (canFireOverLimit) {\r\n fireOverLimitAlert(candidate);\r\n return;\r\n }\r\n addCandidateToSchedule(data);\r\n }\r\n },\r\n });\r\n } else if (candidateIsInFlexEventForThisCell) {\r\n fireCandidateInFlexEventAlert(candidate, candidateIsInFlexEventForThisCell, () => {\r\n if (candidate.isDuplicatePosition) {\r\n fireSwapAlert(candidate);\r\n } else {\r\n if (canFireOverLimit) {\r\n fireOverLimitAlert(candidate);\r\n return;\r\n }\r\n addCandidateToSchedule(data);\r\n }\r\n });\r\n } else if (candidate.isDuplicatePosition) {\r\n fireSwapAlert(candidate);\r\n } else {\r\n if (canFireOverLimit) {\r\n fireOverLimitAlert(candidate);\r\n return;\r\n }\r\n addCandidateToSchedule(data);\r\n }\r\n }\r\n }}\r\n >\r\n
\r\n );\r\n })}\r\n \r\n {\r\n
\r\n \r\n {candidate.type === 'current' ?
\r\n }\r\n \r\n {candidate.LastName}\r\n {candidate.LastName ? ', ' : ''}\r\n {candidate.FirstName}\r\n {` (${CountOfScheduleInterviews != null ? CountOfScheduleInterviews : 0} interviews) `}{' '}\r\n {tagText}\r\n
\r\n No Available Candidates for block
\r\n )}\r\n \r\n \r\n );\r\n };\r\n\r\n const renderEvaluatorsTab = () => {\r\n const { column, row } = selectedCell || {};\r\n const { rawHeader, dataField } = column || {};\r\n const availableEvaluators =\r\n dataField && row[parseInt(dataField)] && row[parseInt(dataField)].availableEvaluators\r\n ? row[parseInt(dataField)].availableEvaluators.slice()\r\n : [];\r\n const unavailableEvaluators =\r\n dataField && row[parseInt(dataField)] && row[parseInt(dataField)].unavailableEvaluators\r\n ? row[parseInt(dataField)].unavailableEvaluators.slice()\r\n : [];\r\n\r\n let columnEvaluators = [...availableEvaluators, ...unavailableEvaluators];\r\n if (columnEvaluators.length <= 0) {\r\n if (rawHeader && rawHeader.Evaluators && rawHeader.Evaluators.Evaluators) {\r\n rawHeader.Evaluators.Evaluators.forEach((evaluator) => {\r\n columnEvaluators.push(evaluator.pk_User);\r\n });\r\n }\r\n }\r\n\r\n const slot = row ? row.pk_Timeslot : null;\r\n\r\n return (\r\n \r\n
\r\n \r\n );\r\n };\r\n\r\n const renderMeetingAttendanceTab = () => {\r\n if (!selectedCell) {\r\n return;\r\n }\r\n\r\n const cellCandidates = [];\r\n const cellEvaluators = [];\r\n let attendingCandidates = 0;\r\n let attendingEvaluators = 0;\r\n let attendanceObject = {};\r\n\r\n if (myAttendanceData) {\r\n const { ScheduleBlocks, TimeSlots } = myAttendanceData;\r\n if (ScheduleBlocks && selectedScheduleBlock && ScheduleBlocks[selectedScheduleBlock.pk_ScheduleBlock]) {\r\n attendanceObject = ScheduleBlocks[selectedScheduleBlock.pk_ScheduleBlock];\r\n } else if (TimeSlots && TimeSlots[selectedCell.row.pk_Timeslot]) {\r\n attendanceObject = TimeSlots[selectedCell.row.pk_Timeslot];\r\n }\r\n }\r\n\r\n if (selectedScheduleBlock) {\r\n const sb = selectedScheduleBlock;\r\n // selectedCell.row[selectedCell.column.dataField].ScheduleBlockEntries.forEach((sb) => {\r\n if (sb.Candidates) {\r\n sb.Candidates.forEach((sbc) => {\r\n const isAttending = attendanceObject.Candidates\r\n ? attendanceObject.Candidates.find((c) => {\r\n return c.fk_Candidate == sbc.pk_Candidate;\r\n })\r\n : null; // Math.random() * 11 > 5;\r\n if (isAttending) {\r\n attendingCandidates++;\r\n }\r\n cellCandidates.push({ ...clone(candidates[sbc.pk_Candidate]), isAttending });\r\n });\r\n }\r\n // });\r\n }\r\n\r\n if (selectedCell.column && selectedCell.column.rawHeader) {\r\n const rawHeader = selectedCell.column.rawHeader;\r\n if (rawHeader.Evaluators && rawHeader.Evaluators.Evaluators) {\r\n rawHeader.Evaluators.Evaluators.forEach((evaluator) => {\r\n const isAttending = attendanceObject.Evaluators\r\n ? attendanceObject.Evaluators.find((e) => {\r\n return e.fk_User == evaluator.pk_User;\r\n })\r\n : null; // Math.random() * 11 > 5;\r\n if (isAttending) {\r\n attendingEvaluators++;\r\n }\r\n cellEvaluators.push({ ...clone(evaluators[evaluator.pk_User]), isAttending });\r\n });\r\n }\r\n }\r\n\r\n const attendees = [\r\n { label: `Candidates (${attendingCandidates} / ${cellCandidates.length})` },\r\n ...cellCandidates,\r\n { label: `Evaluators (${attendingEvaluators} / ${cellEvaluators.length})` },\r\n ...cellEvaluators,\r\n ];\r\n\r\n if (attendees.length == 2) {\r\n attendees.splice(0, attendees.length);\r\n }\r\n\r\n const populateDialInNumbers = () => {\r\n let dialInNumbersAsString = '';\r\n\r\n dialInNumbers.forEach((item, i) => {\r\n const { country, number } = item;\r\n dialInNumbersAsString += `Country ${country} Number ${number}`;\r\n\r\n if (dialInNumbers.length !== i) {\r\n dialInNumbersAsString += '%0d%0a';\r\n }\r\n });\r\n return dialInNumbersAsString;\r\n };\r\n\r\n const timeStart = selectedCell ? moment(selectedCell.row.slot).format('hh:mm A') : '';\r\n const timeEnd = selectedCell ? moment(selectedCell.row.slotEnd).format('hh:mm A') : '';\r\n const timeZone = scheduleData ? moment.tz(scheduleData.metaData.TimeZone).zoneAbbr() : '';\r\n\r\n return (\r\n \r\n {columnEvaluators.map((evaluator, index) => {\r\n const { pk_User } = evaluator;\r\n let isUnavailable = false;\r\n let unavailableIndex = unavailableEvaluators.findIndex((item) => {\r\n return item.pk_User === pk_User;\r\n });\r\n if (unavailableIndex >= 0) {\r\n isUnavailable = true;\r\n }\r\n\r\n const backgroundColor = index % 2 == 0 ? '#d9f5ff' : null;\r\n return (\r\n
\r\n );\r\n })}\r\n \r\n \r\n {isUnavailable ? (\r\n {\r\n // if (dateIsInThePast && !willEditThePast) {\r\n // const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n // if (!continueProcess) {\r\n // return;\r\n // }\r\n // }\r\n // }}\r\n // >\r\n // {\r\n // if (dateIsInThePast && !willEditThePast) {\r\n // const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n // if (!continueProcess) {\r\n // return;\r\n // }\r\n // }\r\n // const data = {\r\n // newEvaluators: [pk_User],\r\n // fk_TimeslotStart: slot,\r\n // fk_TimeslotEnd: slot,\r\n // StartDateTime: moment(row.slot).format(),\r\n // EndDateTime: moment(row.slotEnd).format(),\r\n // FlexTimeStart: moment(row.slot).format('hh:mm A'),\r\n // FlexTimeEnd: moment(row.slotEnd).format('hh:mm A'),\r\n // eventName: 'UNAVAILABLE',\r\n // };\r\n\r\n // addUnavailableSlot(data);\r\n // }}\r\n // >\r\n //
\r\n \r\n {evaluator.UserPhotoUrl ? (\r\n 
\r\n ) : (\r\n
\r\n {`${evaluator.UserLast}, ${evaluator.UserFirst}`}
\r\n \r\n
\r\n ) : (\r\n \r\n
\r\n // Set Available
\r\n // \r\n // Set Unavailable
\r\n // \r\n )}\r\n \r\n
\r\n \r\n );\r\n };\r\n\r\n const renderUnavailabilityModal = () => {\r\n if (\r\n selectedCell === null ||\r\n selectedScheduleBlock == null ||\r\n selectedCell.column == null ||\r\n selectedScheduleBlock.column == null\r\n ) {\r\n return;\r\n }\r\n\r\n const { slot, slotEnd } = selectedScheduleBlock;\r\n const { row, column = {} } = selectedCell;\r\n const { rawHeader = {} } = column;\r\n const timeStart = moment.tz(slot, null).format('hh:mm A');\r\n const timeEnd = moment.tz(slotEnd, null).format('hh:mm A');\r\n const day = moment.tz(slot, null).format('MMM DD, YYYY');\r\n\r\n if (column.dataField === 'flexColumn') {\r\n return;\r\n }\r\n const columnFlexEvents = rawHeader && rawHeader.flexEvents ? rawHeader.flexEvents : [];\r\n const cellActual = row[column.dataField] || {};\r\n const cellFlexEventPks = cellActual.flexEvents\r\n ? cellActual.flexEvents.map((f) => {\r\n return f.pk_FlexEvent;\r\n })\r\n : [];\r\n const cellFlexEvents = columnFlexEvents\r\n .filter((f) => {\r\n return cellFlexEventPks.includes(f.pk_FlexEvent);\r\n })\r\n .sort((a, b) => {\r\n return moment(`${day} ${a.FlexTimeStart}`).isBefore(moment(`${day} ${b.FlexTimeStart}`));\r\n });\r\n\r\n const fakeHeader = clone(column);\r\n fakeHeader.rawHeader.flexEvents = clone(cellFlexEvents);\r\n\r\n const evaluatorNames = [];\r\n const evaluatorsArray =\r\n fakeHeader.rawHeader && fakeHeader.rawHeader.Evaluators ? fakeHeader.rawHeader.Evaluators.Evaluators : [];\r\n\r\n let names = '';\r\n evaluatorsArray.forEach((evaluator, i) => {\r\n evaluatorNames.push(`${evaluator.UserLast}, ${evaluator.UserFirst}`);\r\n });\r\n evaluatorNames.sort();\r\n evaluatorNames.forEach((evaluatorName, i) => {\r\n names += `${evaluatorsArray[i].UserFirst[0]}. ${evaluatorsArray[i].UserLast}${\r\n evaluatorNames.length > 1 && i < evaluatorNames.length - 1 ? ', ' : ' '\r\n }`;\r\n });\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {attendees.length > 0 ? (\r\n attendees.map((a, i) => {\r\n if (a.label) {\r\n return (\r\n \r\n {a.label}\r\n
\r\n );\r\n }\r\n return (\r\n No Attendees
\r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {\r\n setFakeUrl('Fetching URL. . .');\r\n setTimeout(() => {\r\n setFakeUrl('www.fakeURL.com/room/mblubaskug');\r\n }, 3000);\r\n }}\r\n >\r\n Get URL\r\n \r\n */}\r\n {meetingURL ? (\r\n \r\n {\r\n if (meetingURL) {\r\n window.open(`${meetingURL}`, '_blank');\r\n }\r\n }}\r\n >\r\n Join\r\n \r\n \r\n ) : null}\r\n {meetingURL ? (\r\n \r\n {\r\n const input = document.getElementById('meetingUrl');\r\n navigator.clipboard.writeText(meetingURL);\r\n Swal.fire({\r\n title: 'Meeting URL Copied!',\r\n html: '',\r\n timer: 2000,\r\n icon: 'info',\r\n showConfirmButton: false,\r\n timerProgressBar: true,\r\n });\r\n }}\r\n >\r\n Copy\r\n \r\n \r\n ) : null}\r\n {meetingURL ? (\r\n \r\n {\r\n document.getElementById('sendEmailProper').click();\r\n }}\r\n >\r\n Email\r\n \r\n \r\n ) : null}\r\n \r\n
\r\n\r\n This link is unique to this meeting.
\r\n \r\n
\r\n {headerTitle}
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default EvaluatorDropDownItem;\r\n","const style = {\r\n dropDownBody: {\r\n minWidth: '100%',\r\n maxHeight: 250,\r\n overflowY: 'scroll',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n};\r\n\r\nexport default style;\r\n","import React from 'react';\r\n\r\nimport { Row, Col, Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';\r\nimport { faSearch } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\n\r\nimport EvaluatorDropDownItem from '../EvaluatorDropDownItem';\r\n\r\nimport style from './style.js';\r\nimport { clone } from '../../../../../../Services/schedule';\r\n\r\nconst EvaluatorDropDown = ({ evaluators = [], scheduleData, columnTracker, candidates, ignoreValidity = false }) => {\r\n const { headers = [] } = scheduleData || {};\r\n const validEvaluators = [];\r\n const evaluatorHeaderTracker = {};\r\n const evaluatorsToDisplay = ignoreValidity ? Object.values(evaluators) : [];\r\n\r\n headers.forEach((h) => {\r\n if (h.Evaluators && h.Evaluators.Evaluators) {\r\n const evs = h.Evaluators.Evaluators || [];\r\n evs.forEach((ev) => {\r\n if (!validEvaluators.includes(ev.pk_User)) {\r\n validEvaluators.push(ev.pk_User);\r\n evaluatorHeaderTracker[ev.pk_User] = h.pk_ScheduleAssignment;\r\n }\r\n });\r\n }\r\n });\r\n\r\n Object.values(evaluators).map((evaluator, i) => {\r\n const { Delete, EnableEvaluator } = evaluator;\r\n if (Delete || !EnableEvaluator) {\r\n return;\r\n }\r\n\r\n if (validEvaluators.includes(evaluator.pk_User)) {\r\n evaluatorsToDisplay.push(evaluator);\r\n }\r\n return null;\r\n });\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n\r\n {ignoreValidity ? null : (\r\n \r\n
\r\n \r\n {UserPhotoUrl ? (\r\n 
\r\n ) : (\r\n
\r\n \r\n
\r\n \r\n {evaluator\r\n ? `${evaluator.UserLast ? `${evaluator.UserLast}, ` : ''}${evaluator.UserFirst || ''}`\r\n : ''}\r\n
\r\n {ignoreValidity ? null : (\r\n \r\n Candidates to interview: {candidateInteviewCount} / {Object.values(candidates).length}\r\n
\r\n )}\r\n \r\n {\r\n const pathExploded = history.location.pathname.split('/');\r\n const scheduleID = pathExploded[pathExploded.length - 1];\r\n\r\n //NEW ONE!\r\n window.open(\r\n `/administrator/evaluate?pk_InterviewDate=${scheduleID}&pk_User=${evaluator.pk_User}`,\r\n '_blank',\r\n );\r\n // OLD!\r\n // window.open(`/evaluate?pk_User=${evaluator.pk_User}`, '_blank');\r\n }}\r\n />\r\n
\r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default EvaluatorDropDown;\r\n","const style = {\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n spacedBetweenRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n },\r\n label: {\r\n fontSize: 14,\r\n textAlign: 'center',\r\n width: '100%',\r\n },\r\n largeBoldLabel: {\r\n fontSize: 16,\r\n textAlign: 'center',\r\n width: '100%',\r\n fontWeight: 'bold',\r\n },\r\n userItem: {\r\n cursor: 'pointer',\r\n fontWeight: 600,\r\n paddingBottom: 5,\r\n paddingLeft: 5,\r\n paddingTop: 5,\r\n },\r\n popOverHeader: {\r\n textAlign: 'center',\r\n fontWeight: 600,\r\n },\r\n};\r\n\r\nexport default style;\r\n","// (∩ ͡° ͜ʖ ͡°)⊃━☆ﾟ. *\r\nimport { faCheckSquare, faMinusCircle, faPlusCircle, faSearch, faSquare } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport moment from 'moment-timezone';\r\nimport React, { useContext, useEffect, useRef, useState } from 'react';\r\nimport { useAlert } from 'react-alert';\r\nimport { useHistory } from 'react-router-dom';\r\nimport {\r\n Button,\r\n FormGroup,\r\n Input,\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n Label,\r\n Modal,\r\n ModalBody,\r\n ModalFooter,\r\n ModalHeader,\r\n} from 'reactstrap';\r\nimport { useAuth0 } from '../../../../../auth0/reactAuth0Spa.js';\r\nimport { formatBearerToken } from '../../../../../Common.functions.js';\r\nimport { DepartmentContext } from '../../../../../DepartmentWrapper.js';\r\nimport { postDataAgnostic, putData } from '../../../../../Services/dataApi.js';\r\nimport EvaluatorDropDown from '../TopBar/EvaluatorDropDown/index.js';\r\n\r\nimport style from './ScheduleWizard.style.js';\r\n\r\nconst ScheduleWizard = ({\r\n isOpen,\r\n setShowScheduleWizard,\r\n scheduleData,\r\n evaluators,\r\n columnTracker,\r\n candidates,\r\n updateAllData,\r\n forcedContext,\r\n pk_InterviewDate,\r\n}) => {\r\n const [startTime, setStartTime] = useState();\r\n const [endTime, setEndTime] = useState(); // MOMENT!!\r\n\r\n const [standardDuration, setStandardDuration] = useState();\r\n const [standardPassingDuration, setStandardPassingDuration] = useState();\r\n const [selectedEvaluators, setSelectedEvaluators] = useState([]);\r\n const [timeSlotsToAdd, setTimeSlotsToAdd] = useState(1);\r\n const [evaluatorSearchString, setEvaluatorSearchString] = useState('');\r\n const [wizardIsWorking, setWizardIsWorking] = useState(false);\r\n\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n const deptContext = useContext(DepartmentContext);\r\n const dContext = forcedContext ? forcedContext : deptContext;\r\n const history = useHistory();\r\n\r\n const pathExploded = history.location.pathname.split('/');\r\n const scheduleID = pathExploded[pathExploded.length - 1];\r\n const alert = useAlert();\r\n useEffect(() => {\r\n if (scheduleData) {\r\n const { metaData = {} } = scheduleData;\r\n const { DateOfInterview, StartTime, StandardDurationInMinutes, StandardPassingDurationInMinutes } = metaData;\r\n const newStartTime = moment.tz(`${DateOfInterview} ${StartTime}`, null).format('HH:mm');\r\n const candidateCount = candidates ? candidates.length : 0;\r\n setStandardDuration(StandardDurationInMinutes);\r\n setStandardPassingDuration(StandardPassingDurationInMinutes);\r\n setStartTime(newStartTime);\r\n setTimeSlotsToAdd(candidateCount + 2);\r\n }\r\n }, [scheduleData]);\r\n\r\n useEffect(() => {\r\n const candidateCount = candidates ? Object.values(candidates).length : 0;\r\n if (selectedEvaluators && selectedEvaluators.length) {\r\n if (selectedEvaluators.length > candidateCount) {\r\n setTimeSlotsToAdd(selectedEvaluators.length + 2);\r\n } else if (candidateCount != timeSlotsToAdd) {\r\n setTimeSlotsToAdd(candidateCount + 2);\r\n }\r\n }\r\n }, [selectedEvaluators]);\r\n\r\n useEffect(() => {\r\n const candidateCount = Object.values(candidates).length;\r\n if (candidates && candidateCount) {\r\n if (candidateCount > selectedEvaluators.length) {\r\n setTimeSlotsToAdd(candidateCount + 2);\r\n } else if (selectedEvaluators.length != timeSlotsToAdd) {\r\n setTimeSlotsToAdd(selectedEvaluators.length + 2);\r\n }\r\n }\r\n }, [candidates]);\r\n\r\n const calculateEndTime = () => {\r\n const { metaData = {} } = scheduleData || {};\r\n const { DateOfInterview } = metaData;\r\n\r\n const newTimeToEnd = moment(`${DateOfInterview} ${startTime}`).add(\r\n timeSlotsToAdd * (standardDuration + standardPassingDuration),\r\n 'minutes',\r\n );\r\n\r\n return newTimeToEnd.format('hh:mm A');\r\n };\r\n\r\n const addStartTime = (data, resolve, reject) => {\r\n getTokenSilently()\r\n .then((token) => {\r\n putData(\r\n 'department/interviewDate/putEntry',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n pk_InterviewDate: pk_InterviewDate ? pk_InterviewDate : scheduleID,\r\n pk_Season: dContext.season.pk_Season,\r\n },\r\n {\r\n entry: {\r\n StartTime: startTime,\r\n StandardDurationInMinutes: standardDuration,\r\n StandardPassingDurationInMinutes: standardPassingDuration,\r\n },\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n if (resolve) {\r\n resolve(res.data);\r\n }\r\n })\r\n .catch((err) => {\r\n if (reject) {\r\n reject();\r\n }\r\n });\r\n })\r\n .catch((err) => {\r\n if (reject) {\r\n reject();\r\n }\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const addColumns = (data, resolve, reject) => {\r\n const { evaluatorList, TotalNumberOfSplits, pk_MeetingRoom } = data;\r\n\r\n const payload = {\r\n payload: selectedEvaluators.map((pk_Evaluator) => {\r\n return {\r\n evaluatorPrimaryKeys: [pk_Evaluator],\r\n };\r\n }),\r\n };\r\n\r\n getTokenSilently()\r\n .then((token) => {\r\n postDataAgnostic(\r\n 'department/season/schedule/column',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n pk_InterviewDate: pk_InterviewDate ? pk_InterviewDate : parseInt(scheduleID),\r\n },\r\n payload,\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n if (resolve) {\r\n resolve(res.data);\r\n }\r\n })\r\n .catch((err) => {\r\n if (reject) {\r\n reject();\r\n }\r\n });\r\n })\r\n .catch((err) => {\r\n if (reject) {\r\n reject();\r\n }\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const addTimeSlots = (data, resolve, reject) => {\r\n getTokenSilently()\r\n .then((token) => {\r\n const rowSortOrders = [];\r\n\r\n let toAdd = timeSlotsToAdd;\r\n let currentSlot = 0;\r\n\r\n while (toAdd > 0) {\r\n rowSortOrders.push(currentSlot);\r\n toAdd--;\r\n currentSlot++;\r\n }\r\n postDataAgnostic(\r\n 'department/season/schedule/row',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n pk_InterviewDate: pk_InterviewDate ? pk_InterviewDate : Number(scheduleID),\r\n },\r\n {\r\n rowSortOrders: rowSortOrders,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n if (resolve) {\r\n resolve(res.data);\r\n }\r\n })\r\n .catch((err) => {\r\n if (reject) {\r\n reject();\r\n }\r\n });\r\n })\r\n .catch((err) => {\r\n if (reject) {\r\n reject();\r\n }\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const save = () => {\r\n const section1 = new Promise((resolve, reject) => {\r\n addStartTime({}, resolve, reject);\r\n });\r\n\r\n const section2 = new Promise((resolve, reject) => {\r\n addColumns({}, resolve, reject);\r\n });\r\n\r\n const section3 = new Promise((resolve, reject) => {\r\n addTimeSlots({}, resolve, reject);\r\n });\r\n\r\n setWizardIsWorking(true);\r\n Promise.all([section1, section2, section3])\r\n .then((res) => {\r\n alert.success('Interview date initialized!');\r\n updateAllData();\r\n setWizardIsWorking(false);\r\n setShowScheduleWizard(false);\r\n })\r\n .catch((err) => {\r\n alert.error('Interview date failed to initialize!');\r\n setWizardIsWorking(false);\r\n });\r\n };\r\n\r\n const renderEvaluatorList = () => {\r\n return Object.values(evaluators)\r\n .filter((e) => {\r\n const eName = `${e.UserLast} ${e.UserFirst}`;\r\n return !e.Deleted && (!evaluatorSearchString || eName.toLowerCase().indexOf(evaluatorSearchString) >= 0);\r\n })\r\n .sort((a, b) => {\r\n const aString = `${a.UserLast}, ${a.UserFirst}`;\r\n const bString = `${b.UserLast}, ${b.UserFirst}`;\r\n\r\n if (aString < bString) {\r\n return -1;\r\n }\r\n if (aString > bString) {\r\n return 1;\r\n }\r\n return 0;\r\n })\r\n .map((evaluator, index) => {\r\n if (evaluator.Deleted) {\r\n return;\r\n }\r\n let backgroundColor = index % 2 == 0 ? '#c7cbd1' : null;\r\n const isSelected = selectedEvaluators.indexOf(evaluator.pk_User) >= 0;\r\n if (isSelected) {\r\n backgroundColor = '#81cf7a';\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 {evaluatorsToDisplay\r\n .sort((a, b) => {\r\n const aName = `${a.UserLast ? `${a.UserLast}, ` : ''}${a.UserFirst || ''}`;\r\n const bName = `${b.UserLast ? `${b.UserLast}, ` : ''}${b.UserFirst || ''}`;\r\n\r\n if (aName < bName) {\r\n return -1;\r\n }\r\n if (aName > bName) {\r\n return 1;\r\n }\r\n return 0;\r\n })\r\n .map((evaluator, i) => {\r\n return (\r\n
\r\n \r\n {evaluator.UserLast}, {evaluator.UserFirst}\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 \r\n {\r\n setStartTime(e.target.value);\r\n }}\r\n placeholder=\"Enter Time. . .\"\r\n />\r\n \r\n \r\n \r\n \r\n {\r\n const newValue = parseInt(e.target.value) >= 0 ? parseInt(e.target.value) : 0;\r\n setStandardDuration(newValue);\r\n }}\r\n />\r\n \r\n minutes \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n const newValue = parseInt(e.target.value) >= 0 ? parseInt(e.target.value) : 0;\r\n setStandardPassingDuration(newValue);\r\n }}\r\n />\r\n \r\n minutes \r\n \r\n \r\n \r\n
\r\n \r\n Block Duration: {`${standardDuration + standardPassingDuration} minutes`}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {\r\n setEvaluatorSearchString(e.target.value);\r\n }}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {renderEvaluatorList()}
\r\n \r\n {`${selectedEvaluators.length} Interview Rooms`}
\r\n and
\r\n {`${Object.values(candidates).length} Candidates`}
\r\n \r\n {' '}\r\n \r\n \r\n {\r\n const newCount = timeSlotsToAdd - 1 > 0 ? timeSlotsToAdd - 1 : 1;\r\n\r\n setTimeSlotsToAdd(newCount);\r\n setTimeSlotsToAdd(newCount);\r\n }}\r\n >\r\n \r\n \r\n \r\n {\r\n const newCount = timeSlotsToAdd + 1 > 0 ? timeSlotsToAdd + 1 : 1;\r\n\r\n setTimeSlotsToAdd(newCount);\r\n setTimeSlotsToAdd(newCount);\r\n }}\r\n >\r\n \r\n \r\n
\r\n End Time: {calculateEndTime()}
\r\n \r\n {\r\n save();\r\n }}\r\n >\r\n Save\r\n \r\n {\r\n setShowScheduleWizard(false);\r\n }}\r\n >\r\n Cancel\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AddTimeSlotPopover;\r\n","const style = {\r\n mainBody: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n textAlign: 'center',\r\n },\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n marginBottom: 10,\r\n },\r\n inputLabel: {\r\n fontWeight: 'bold',\r\n },\r\n closeButton: {\r\n alignSelf: 'flex-end',\r\n },\r\n inputFields: {\r\n textAlign: 'center',\r\n width: 60,\r\n },\r\n buttonIcon: {\r\n marginRight: 10,\r\n },\r\n spaceBetweenRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n },\r\n genButton: {\r\n alignItems: 'center',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n marginLeft: 10,\r\n marginRight: 10,\r\n paddignRight: 20,\r\n paddingBottom: 10,\r\n paddingLeft: 20,\r\n paddingTop: 10,\r\n width: '100%',\r\n },\r\n // buttonLabel: { textAlign: 'center', fontWeight: 600, fontSize: 13 },\r\n};\r\n\r\nexport default style;\r\n","import { faCheck, faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport moment from 'moment-timezone';\r\nimport React, { useEffect, useState, useContext } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { useAlert } from 'react-alert';\r\nimport {\r\n Button,\r\n FormGroup,\r\n Input,\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n Label,\r\n Popover,\r\n PopoverBody,\r\n PopoverHeader,\r\n UncontrolledPopover,\r\n} from 'reactstrap';\r\nimport Swal from 'sweetalert2';\r\nimport { useAuth0 } from '../../../../../auth0/reactAuth0Spa';\r\nimport { formatBearerToken } from '../../../../../Common.functions';\r\nimport { DepartmentContext } from '../../../../../DepartmentWrapper';\r\nimport { deleteData, postDataAgnostic, putData } from '../../../../../Services/dataApi';\r\nimport AddTimeSlotPopover from '../AddTimeSlotPopover';\r\nimport '../Schedule.style.css';\r\nimport style from './style.js';\r\nimport { clone } from '../../../../../Services/schedule';\r\n\r\nconst TimeSlotHeaderPopover = ({\r\n scheduleData,\r\n fetchSchedule,\r\n hideHeaderPopover,\r\n updateAllData,\r\n setShowHeaderPopOver,\r\n showHeaderPopOver,\r\n forcedContext,\r\n pk_InterviewDate,\r\n selectedHeader,\r\n dateIsInThePast,\r\n willEditThePast,\r\n fireConfirmationForEditingPastSchedule,\r\n}) => {\r\n const { metaData } = scheduleData;\r\n const [standardDuration, setStandardDuration] = useState(1);\r\n const [standardPassingDuration, setStandardPassingDuration] = useState(1);\r\n const [startDateAndTime, setStartDateAndTime] = useState();\r\n const [startTime, setStartTime] = useState();\r\n const [showAddTimeSlotPopover, setShowAddTimeSlotPopover] = useState(false);\r\n const [showConfirmModal, setShowConfirmModal] = useState();\r\n\r\n const alert = useAlert();\r\n const history = useHistory();\r\n const deptContext = useContext(DepartmentContext);\r\n const dContext = forcedContext ? forcedContext : deptContext;\r\n\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n\r\n useEffect(() => {\r\n const { StandardDurationInMinutes, StandardPassingDurationInMinutes, DateOfInterview, StartTime } = metaData || {};\r\n const timeZone = dContext.department.timeZone;\r\n setStandardDuration(StandardDurationInMinutes);\r\n setStandardPassingDuration(StandardPassingDurationInMinutes);\r\n setStartDateAndTime(`${DateOfInterview} ${StartTime}`);\r\n setStartTime(moment.tz(`${DateOfInterview} ${StartTime}`, null).format('HH:mm'));\r\n }, []);\r\n\r\n useEffect(() => {\r\n handleParentPopoverVisibilityTracker('showAddTimeSlotPopover', showAddTimeSlotPopover);\r\n }, [showAddTimeSlotPopover]);\r\n\r\n useEffect(() => {\r\n handleParentPopoverVisibilityTracker('showConfirmModal', showConfirmModal);\r\n }, [showConfirmModal]);\r\n\r\n const handleParentPopoverVisibilityTracker = (key, value) => {\r\n const newShowHeaderPopOver = clone(showHeaderPopOver);\r\n const visibility = showHeaderPopOver['timeSlotHeader'];\r\n visibility[key] = value;\r\n newShowHeaderPopOver.timeSlotHeader = visibility;\r\n setShowHeaderPopOver(newShowHeaderPopOver);\r\n };\r\n\r\n const renderAddTimeSlotPopOver = () => {\r\n return (\r\n \r\n {\r\n let newValue = Number(e.target.value);\r\n\r\n // should let the user put in a blank value so they can type in a new number\r\n if (e.target.value === '') {\r\n setSlotsToAdd(null);\r\n } else if (newValue < 1) {\r\n setSlotsToAdd(1);\r\n NotificationManager.error('Timeslot insert cannot be less than 1');\r\n } else if (newValue > 50) {\r\n setSlotsToAdd(50);\r\n NotificationManager.error('Timeslot insert cannot exceed 50');\r\n } else {\r\n setSlotsToAdd(newValue);\r\n }\r\n }}\r\n />\r\n
\r\n\r\n \r\n {\r\n setShowAddTimeSlotPopover(false);\r\n }}\r\n >\r\n Cancel\r\n \r\n {\r\n e.preventDefault();\r\n insertTimeslot('before');\r\n }}\r\n >\r\n {row ? 'Before' : 'Beginning'}\r\n \r\n {\r\n e.preventDefault();\r\n insertTimeslot('after');\r\n }}\r\n >\r\n {row ? 'After' : 'End'}\r\n \r\n
\r\n \r\n \r\n Add time slot/s to schedule
\r\n \r\n \r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n // e.preventDefault();\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n }}\r\n onChange={async (e) => {\r\n // deconstructing this value is a necessity, otherwise the event target might change while waiting for the async\r\n // function to resolve\r\n const { value } = e.target;\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n setStartTime(value);\r\n }}\r\n placeholder=\"Enter Time. . .\"\r\n />\r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n }}\r\n >\r\n \r\n \r\n {\r\n const newValue = parseInt(e.target.value) >= 0 ? parseInt(e.target.value) : 0;\r\n setStandardDuration(newValue);\r\n }}\r\n />\r\n \r\n minutes \r\n \r\n \r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n }}\r\n >\r\n \r\n \r\n {\r\n const newValue = parseInt(e.target.value) >= 0 ? parseInt(e.target.value) : 0;\r\n setStandardPassingDuration(newValue);\r\n }}\r\n />\r\n \r\n minutes \r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default TimeSlotHeaderPopover;\r\n","const style = {\r\n mainBody: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n padding: 10,\r\n },\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n marginBottom: 10,\r\n },\r\n spaceBetweenRow: {\r\n alignItems: 'center',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n marginBottom: 10,\r\n },\r\n titleField: {\r\n width: '100%',\r\n },\r\n roomNumberField: {\r\n width: '100%',\r\n },\r\n inputLabel: {\r\n fontWeight: 'bold',\r\n },\r\n checkIcon: {\r\n fontSize: 15,\r\n marginRight: 20,\r\n cursor: 'pointer',\r\n },\r\n genButton: {\r\n alignItems: 'center',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n marginLeft: 10,\r\n marginRight: 10,\r\n paddignRight: 20,\r\n paddingBottom: 10,\r\n paddingLeft: 20,\r\n paddingTop: 10,\r\n width: '95%',\r\n },\r\n buttonLabel: { width: 130, textAlign: 'center', fontWeight: 600, fontSize: 13 },\r\n};\r\n\r\nexport default style;\r\n","import { faSquare } from '@fortawesome/free-regular-svg-icons';\r\nimport {\r\n faCheck,\r\n faCheckSquare,\r\n faCircle,\r\n faCog,\r\n faDotCircle,\r\n faGear,\r\n faInfoCircle,\r\n faLink,\r\n faPrint,\r\n faTimes,\r\n faTrash,\r\n} from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { Button, Input, Label, UncontrolledTooltip } from 'reactstrap';\r\nimport Swal from 'sweetalert2';\r\nimport { clone } from '../../../../../Services/schedule';\r\nimport '../Schedule.style.css';\r\nimport style from './style';\r\nimport { urlWithHttpProtocol } from 'Common.functions';\r\n\r\nconst CustomEventPopover = ({\r\n setShowAddCustomPopover,\r\n row,\r\n addRowCustomEvent,\r\n hideHeaderPopover,\r\n scheduleData,\r\n fireConfirmationForEditingPastSchedule,\r\n dateIsInThePast,\r\n willEditThePast,\r\n}) => {\r\n const [useAllDayLink, setUseAllDayLink] = useState(true);\r\n const [event, setEvent] = useState({});\r\n\r\n const { metaData } = scheduleData || {};\r\n const { MainRoomURL, MainRoomURLDetails } = metaData || {};\r\n\r\n useEffect(() => {\r\n if (row) {\r\n const {\r\n CustomDurationInMinutes,\r\n CustomMeetingDetails,\r\n CustomMeetingTitle,\r\n CustomMeetingUrl,\r\n CustomPassingDurationInMinutes,\r\n VirtualRoomType,\r\n CustomRoomLabel,\r\n } = row;\r\n const { metaData = {} } = scheduleData || {};\r\n\r\n const duration = CustomDurationInMinutes != null ? CustomDurationInMinutes : metaData.StandardDurationInMinutes;\r\n const passingDuration =\r\n CustomPassingDurationInMinutes != null\r\n ? CustomPassingDurationInMinutes\r\n : metaData.StandardPassingDurationInMinutes;\r\n\r\n setEvent({\r\n CustomDurationInMinutes: duration,\r\n CustomMeetingDetails,\r\n CustomMeetingTitle,\r\n CustomMeetingUrl,\r\n CustomPassingDurationInMinutes: passingDuration,\r\n VirtualRoomType: VirtualRoomType || 'AllDay',\r\n CustomRoomLabel,\r\n });\r\n\r\n if (VirtualRoomType === 'Custom') {\r\n setUseAllDayLink(false);\r\n } else {\r\n setUseAllDayLink(true);\r\n }\r\n }\r\n }, [JSON.stringify(row)]);\r\n\r\n // useEffect(() => {\r\n // if (useAllDayLink) {\r\n // updateEvent('VirtualRoomType', 'AllDay');\r\n // } else {\r\n // updateEvent('VirtualRoomType', 'Custom');\r\n // }\r\n // }, [useAllDayLink]);\r\n\r\n const updateEvent = (key, value) => {\r\n const newEvent = clone(event);\r\n newEvent[key] = value;\r\n setEvent(newEvent);\r\n };\r\n\r\n const hasSplitsOrCandidates = () => {\r\n const { headers } = scheduleData;\r\n let valueToReturn = false;\r\n\r\n const headerIDs = headers.map((header) => {\r\n return header.pk_ScheduleAssignment;\r\n });\r\n\r\n headerIDs.forEach((pk_ScheduleAssignment) => {\r\n const { ScheduleBlockEntries } = row[pk_ScheduleAssignment];\r\n if (ScheduleBlockEntries && ScheduleBlockEntries.length > 0) {\r\n if (ScheduleBlockEntries.length > 1) {\r\n valueToReturn = true;\r\n }\r\n\r\n if (ScheduleBlockEntries[0].Candidates && ScheduleBlockEntries[0].Candidates.length > 0) {\r\n valueToReturn = true;\r\n }\r\n }\r\n });\r\n\r\n return valueToReturn;\r\n };\r\n\r\n const addCustomEvent = () => {\r\n const newEvent = clone(event);\r\n newEvent.pk_Timeslot = row.pk_Timeslot;\r\n newEvent.fk_MeetingRoom = newEvent.RoomNumber;\r\n newEvent.CustomMeetingUrl = urlWithHttpProtocol(newEvent.CustomMeetingUrl);\r\n delete newEvent.RoomNumber;\r\n\r\n // newEvent.CustomMeetingTitle =\r\n // newEvent.CustomMeetingTitle.toLowerCase() === 'break'\r\n // ? `${newEvent.CustomMeetingTitle} `\r\n // : newEvent.CustomMeetingTitle;\r\n\r\n addRowCustomEvent(newEvent);\r\n hideHeaderPopover();\r\n setShowAddCustomPopover(false);\r\n };\r\n\r\n return (\r\n Block Duration: {`${standardDuration + standardPassingDuration} minutes`}
\r\n \r\n
\r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n const data = {\r\n standardDuration,\r\n standardPassingDuration,\r\n startTime,\r\n };\r\n\r\n save(data);\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n Save
\r\n \r\n \r\n
\r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n setShowConfirmModal(true);\r\n Swal.fire({\r\n title: 'Are you sure you want to delete all time slots and evaluator rooms',\r\n text: \"You won't be able to revert this!\",\r\n icon: 'warning',\r\n showCancelButton: true,\r\n confirmButtonColor: '#d33',\r\n cancelButtonColor: 'gray',\r\n confirmButtonText: 'Delete Schedule',\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n clearSchedule();\r\n // DELETE API here\r\n } else {\r\n }\r\n\r\n setShowConfirmModal(false);\r\n });\r\n }}\r\n >\r\n
\r\n {renderAddTimeSlotPopOver()}\r\n \r\n
\r\n \r\n Delete Entire Schedule
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n {\r\n updateEvent('CustomMeetingTitle', e.target.value);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n {\r\n updateEvent('CustomRoomLabel', e.target.value);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {\r\n let newValue = e.target.value;\r\n\r\n if (newValue < 1) {\r\n newValue = 1;\r\n }\r\n\r\n updateEvent('CustomDurationInMinutes', newValue);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n {\r\n let newValue = e.target.value;\r\n\r\n if (newValue < 0) {\r\n newValue = 0;\r\n }\r\n\r\n updateEvent('CustomPassingDurationInMinutes', newValue);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n e.stopPropagation();\r\n setUseAllDayLink(true);\r\n updateEvent('VirtualRoomType', 'AllDay');\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Use All Day Meeting Link\r\n \r\n {' '}\r\n Use the All Day Meeting link for this meeting.\r\n \r\n
\r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n e.stopPropagation();\r\n setUseAllDayLink(false);\r\n updateEvent('VirtualRoomType', 'Custom');\r\n }}\r\n >\r\n
\r\n \r\n \r\n {/* \r\n
\r\n \r\n
\r\n \r\n Use Custom Meeting Link\r\n \r\n {' '}\r\n Use a unique link for this meeting\r\n \r\n
\r\n \r\n {\r\n updateEvent('CustomMeetingUrl', e.target.value);\r\n }}\r\n />\r\n
*/}\r\n\r\n \r\n {' '}\r\n \r\n {(useAllDayLink && MainRoomURL) || !useAllDayLink ? (\r\n {\r\n if (!useAllDayLink) {\r\n updateEvent('CustomMeetingUrl', e.target.value);\r\n }\r\n }}\r\n />\r\n ) : (\r\n \r\n
\r\n )}\r\n \r\n \r\n\r\n Missing All Day Meeting Link!
\r\n \r\n \r\n {`The All Day Meeting Link can be configured by clicking the `}\r\n \r\n
\r\n \r\n \r\n {\r\n if (!useAllDayLink) {\r\n updateEvent('CustomMeetingDetails', e.target.value);\r\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 CustomEventPopover;\r\n","const style = {\r\n mainBody: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n textAlign: 'center',\r\n },\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n marginBottom: 20,\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '100%',\r\n },\r\n spacedBetweenRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n width: '100%',\r\n marginBottom: 20,\r\n },\r\n inputFields: {\r\n textAlign: 'center',\r\n },\r\n inputLabel: {\r\n fontWeight: 'bold',\r\n },\r\n genButton: {\r\n alignItems: 'center',\r\n backgroundColor: '#0a91ff',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n marginLeft: 10,\r\n marginRight: 10,\r\n paddignRight: 20,\r\n paddingBottom: 10,\r\n paddingLeft: 20,\r\n paddingTop: 10,\r\n width: '100%',\r\n },\r\n buttonLabel: { width: 80, textAlign: 'center', fontWeight: 600, fontSize: 13 },\r\n};\r\n\r\nexport default style;\r\n","import React, { useState, useEffect } from 'react';\r\nimport { Input, Label, Button } from 'reactstrap';\r\nimport { clone } from '../../../../../Services/schedule';\r\n\r\nimport style from './style';\r\n\r\nconst CustomDurationPopover = ({\r\n row,\r\n scheduleData,\r\n addRowCustomEvent,\r\n hideHeaderPopover,\r\n setShowCustomDurationPopover,\r\n fireConfirmationForEditingPastSchedule,\r\n dateIsInThePast,\r\n willEditThePast,\r\n showPastScheduleWarning,\r\n}) => {\r\n const [event, setEvent] = useState({});\r\n const { metaData = {} } = scheduleData || {};\r\n\r\n useEffect(() => {\r\n reset(row);\r\n }, [JSON.stringify(row)]);\r\n\r\n const reset = (row) => {\r\n if (row) {\r\n const {\r\n CustomDurationInMinutes,\r\n CustomMeetingDescription,\r\n CustomMeetingTitle,\r\n CustomMeetingUrl,\r\n CustomPassingDurationInMinutes,\r\n VirtualRoomType,\r\n } = row;\r\n\r\n const duration = CustomDurationInMinutes != null ? CustomDurationInMinutes : metaData.StandardDurationInMinutes;\r\n const passingDuration =\r\n CustomPassingDurationInMinutes != null\r\n ? CustomPassingDurationInMinutes\r\n : metaData.StandardPassingDurationInMinutes;\r\n\r\n setEvent({\r\n CustomDurationInMinutes: duration,\r\n CustomMeetingDescription,\r\n CustomMeetingTitle,\r\n CustomMeetingUrl,\r\n CustomPassingDurationInMinutes: passingDuration,\r\n VirtualRoomType,\r\n fk_MeetingRoom: undefined,\r\n pk_Timeslot: row.pk_Timeslot,\r\n });\r\n }\r\n };\r\n\r\n return (\r\n \r\n {\r\n setShowAddCustomPopover(false);\r\n Swal.fire({\r\n title: 'Warning!',\r\n text: `Are you sure you want to delete this event? This cannot be undone.`,\r\n type: 'warning',\r\n showCancelButton: true,\r\n confirmButtonColor: 'red',\r\n confirmButtonText: `Delete`,\r\n }).then((result) => {\r\n if (result.value) {\r\n addRowCustomEvent({\r\n pk_Timeslot: row.pk_Timeslot,\r\n CustomDurationInMinutes: null,\r\n CustomMeetingDetails: null,\r\n CustomMeetingTitle: null,\r\n CustomMeetingUrl: null,\r\n CustomPassingDurationInMinutes: null,\r\n VirtualRoomType: null,\r\n });\r\n hideHeaderPopover();\r\n }\r\n });\r\n }}\r\n >\r\n
\r\n {/* \r\n
\r\n \r\n Delete
*/}\r\n \r\n {\r\n setShowAddCustomPopover(false);\r\n }}\r\n >\r\n
*/}\r\n \r\n
\r\n \r\n Cancel
\r\n \r\n {\r\n if (hasSplitsOrCandidates() && !row.CustomMeetingTitle) {\r\n Swal.fire({\r\n title: 'Splits and/or assigned Candidates detected!',\r\n text:\r\n 'Proceeding with creating this Custom Event would clear out any assigned candidates and split cells in this row. Do you want to proceed anyway?',\r\n icon: 'warning',\r\n showCancelButton: true,\r\n cancelButtonColor: 'gray',\r\n confirmButtonText: 'Create Custom Event',\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n addCustomEvent();\r\n } else {\r\n }\r\n });\r\n } else {\r\n addCustomEvent();\r\n }\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n OK
*/}\r\n Default duration is {metaData.StandardDurationInMinutes || 8} minutes.
\r\n \r\n
\r\n \r\n \r\n {\r\n const newEvent = clone(event);\r\n let newValue = e.target.value;\r\n\r\n if (newValue < 1) {\r\n newValue = 1;\r\n }\r\n\r\n newEvent.CustomDurationInMinutes = newValue;\r\n setEvent(newEvent);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n {\r\n const newEvent = clone(event);\r\n let newValue = e.target.value;\r\n\r\n if (newValue < 0) {\r\n newValue = 0;\r\n }\r\n\r\n newEvent.CustomPassingDurationInMinutes = newValue;\r\n setEvent(newEvent);\r\n }}\r\n />\r\n
\r\n \r\n {\r\n setShowCustomDurationPopover(false);\r\n }}\r\n >\r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n const newEvent = clone(event);\r\n // newEvent.CustomDurationInMinutes = metaData.StandardDurationInMinutes;\r\n // newEvent.CustomPassingDurationInMinutes = metaData.StandardPassingDurationInMinutes;\r\n\r\n newEvent.CustomDurationInMinutes = null;\r\n newEvent.CustomPassingDurationInMinutes = null;\r\n\r\n addRowCustomEvent(newEvent);\r\n setEvent(newEvent);\r\n }}\r\n >\r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n const newEvent = clone(event);\r\n if (newEvent.CustomDurationInMinutes == metaData.StandardDurationInMinutes) {\r\n newEvent.CustomDurationInMinutes = null;\r\n }\r\n\r\n if (newEvent.CustomPassingDurationInMinutes == metaData.StandardPassingDurationInMinutes) {\r\n newEvent.CustomPassingDurationInMinutes = null;\r\n }\r\n addRowCustomEvent(newEvent);\r\n hideHeaderPopover();\r\n }}\r\n >\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default CustomDurationPopover;\r\n","const style = {\r\n mainBody: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n textAlign: 'center',\r\n },\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n marginBottom: 10,\r\n },\r\n inputLabel: {\r\n fontWeight: 'bold',\r\n },\r\n closeButton: {\r\n alignSelf: 'flex-end',\r\n },\r\n inputFields: {\r\n textAlign: 'center',\r\n width: 60,\r\n },\r\n buttonIcon: {\r\n marginRight: 10,\r\n cursor: 'pointer',\r\n },\r\n spaceBetweenRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n },\r\n genButton: {\r\n // marginLeft: 10,\r\n // marginRight: 10,\r\n alignItems: 'center',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n paddignRight: 20,\r\n paddingBottom: 10,\r\n paddingLeft: 20,\r\n paddingTop: 10,\r\n width: '100%',\r\n },\r\n headerTitle: {\r\n fontWeight: 'bold',\r\n width: '100%',\r\n textAlign: 'center',\r\n },\r\n buttonLabel: { width: 200, textAlign: 'center', fontWeight: 600, fontSize: 13 },\r\n};\r\n\r\nexport default style;\r\n","import React, { useContext, useState, useEffect } from 'react';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport {\r\n faClock,\r\n faEdit,\r\n faPlus,\r\n faTrash,\r\n faTimes,\r\n faTimesCircle,\r\n faExclamationTriangle,\r\n} from '@fortawesome/free-solid-svg-icons';\r\nimport { Button, Popover, UncontrolledPopover, PopoverHeader, PopoverBody, UncontrolledTooltip } from 'reactstrap';\r\nimport AddTimeSlotPopover from '../AddTimeSlotPopover';\r\nimport CustomEventPopover from '../CustomEventPopover';\r\nimport CustomDurationPopover from '../CustomDurationPopover';\r\n\r\nimport style from './style';\r\nimport Swal from 'sweetalert2';\r\nimport { formatBearerToken } from '../../../../../Common.functions';\r\nimport { deleteData } from '../../../../../Services/dataApi';\r\nimport { DepartmentContext } from '../../../../../DepartmentWrapper';\r\nimport { useAuth0 } from '../../../../../auth0/reactAuth0Spa';\r\nimport { clone } from '../../../../../Services/schedule';\r\n\r\nconst TimeSlotPopover = ({\r\n forcedContext,\r\n row,\r\n addRowCustomEvent,\r\n hideHeaderPopover,\r\n scheduleData,\r\n fetchSchedule,\r\n pk_InterviewDate,\r\n setShowTimeSlotPopover,\r\n showTimeSlotPopover,\r\n fireConfirmationForEditingPastSchedule,\r\n dateIsInThePast,\r\n willEditThePast,\r\n showPastScheduleWarning,\r\n}) => {\r\n const [showAddTimeSlotPopover, setShowAddTimeSlotPopover] = useState(false);\r\n const [showAddCustomPopover, setShowAddCustomPopover] = useState(false);\r\n const [showCustomDurationPopover, setShowCustomDurationPopover] = useState(false);\r\n const deptContext = useContext(DepartmentContext);\r\n const dContext = forcedContext ? forcedContext : deptContext;\r\n\r\n const { department = {} } = dContext;\r\n const { VirtualMeetingMode } = department;\r\n\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n\r\n // return Cancel
\r\n \r\n Reset
\r\n \r\n Set
\r\n \r\n hello
;\r\n\r\n useEffect(() => {\r\n handleParentPopoverVisibilityTracker('showAddTimeSlotPopover', showAddTimeSlotPopover);\r\n }, [showAddTimeSlotPopover]);\r\n\r\n useEffect(() => {\r\n handleParentPopoverVisibilityTracker('showAddCustomPopover', showAddCustomPopover);\r\n }, [showAddCustomPopover]);\r\n\r\n useEffect(() => {\r\n handleParentPopoverVisibilityTracker('showCustomDurationPopover', showCustomDurationPopover);\r\n }, [showCustomDurationPopover]);\r\n\r\n const handleParentPopoverVisibilityTracker = (key, value) => {\r\n const { pk_Timeslot } = row;\r\n const newShowTimeSlotPopover = clone(showTimeSlotPopover);\r\n const visibility = newShowTimeSlotPopover[pk_Timeslot];\r\n visibility[key] = value;\r\n newShowTimeSlotPopover[pk_Timeslot] = visibility;\r\n setShowTimeSlotPopover(newShowTimeSlotPopover);\r\n };\r\n\r\n const deleteRow = () => {\r\n getTokenSilently()\r\n .then((token) => {\r\n deleteData(\r\n '/department/season/schedule/row',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n pk_Timeslot: row.pk_Timeslot,\r\n pk_InterviewDate: pk_InterviewDate,\r\n },\r\n null,\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n fetchSchedule(token);\r\n hideHeaderPopover();\r\n })\r\n .catch((err) => {\r\n hideHeaderPopover();\r\n });\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const renderAddTimeSlotPopOver = () => {\r\n return (\r\n Add time slot/s to schedule
\r\n \r\n {\r\n e.stopPropagation();\r\n setShowAddCustomPopover(false);\r\n }}\r\n />\r\n
\r\n Custom Event
\r\n \r\n {\r\n e.stopPropagation();\r\n setShowCustomDurationPopover(false);\r\n }}\r\n />\r\n
\r\n Custom Duration
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default TimeSlotPopover;\r\n","const style = {\r\n simpleRow: {\r\n flexDirection: 'row',\r\n display: 'flex',\r\n },\r\n testButton: {\r\n backgroundColor: '#0a91ff',\r\n fontWeight: 600,\r\n },\r\n bottomButton: {\r\n margin: 10,\r\n fontWeight: 600,\r\n // backgroundColor: '#0a91ff',\r\n },\r\n buttonIcon: {\r\n marginRight: 10,\r\n },\r\n btnContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n width: '100%',\r\n justifyContent: 'center',\r\n marginTop: 20,\r\n paddingTop: 5,\r\n paddingBottom: 0,\r\n borderTop: '1px solid #c8dae0',\r\n },\r\n spacedBetweenRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n },\r\n};\r\nexport default style;\r\n","import { faExternalLinkAlt, faEye, faEyeSlash, faLock, faUnlock } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport moment from 'moment';\r\nimport React, { useState, useEffect, useContext } from 'react';\r\nimport {\r\n Button,\r\n FormFeedback,\r\n FormGroup,\r\n Input,\r\n InputGroup,\r\n InputGroupAddon,\r\n Label,\r\n UncontrolledTooltip,\r\n} from 'reactstrap';\r\nimport { useAuth0 } from '../../../../../../auth0/reactAuth0Spa';\r\nimport {\r\n checkIfZoomURLAndIfHasPassword,\r\n formatBearerToken,\r\n isValidURL,\r\n swalErrorMessage,\r\n urlWithHttpProtocol,\r\n} from '../../../../../../Common.functions';\r\nimport { putData } from '../../../../../../Services/dataApi';\r\nimport { DepartmentContext } from '../../../../../../DepartmentWrapper';\r\nimport { useAlert } from 'react-alert';\r\nimport style from './style';\r\n\r\nconst SettingsDropDown = ({ dateData, onUpdate, setParentChanges }) => {\r\n const [isUpdating, setIsUpdating] = useState(false);\r\n const [MainRoomURL, setMainRoomURL] = useState('');\r\n const [MainRoomURLDetails, setMainRoomURLDetails] = useState('');\r\n const [hasChange, setHasChange] = useState(false);\r\n\r\n const alert = useAlert();\r\n\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n\r\n const dContext = useContext(DepartmentContext);\r\n\r\n const zoomDetails = checkIfZoomURLAndIfHasPassword(MainRoomURL);\r\n const { isZoomURL, hasPassword } = zoomDetails;\r\n\r\n useEffect(() => {\r\n if (dateData) {\r\n setMainRoomURL(dateData.MainRoomURL || '');\r\n setMainRoomURLDetails(dateData.MainRoomURLDetails || '');\r\n }\r\n }, [JSON.stringify(dateData)]);\r\n\r\n useEffect(() => {\r\n checkChanges();\r\n }, [MainRoomURL, MainRoomURLDetails]);\r\n\r\n useEffect(() => {\r\n setParentChanges(hasChange);\r\n }, [hasChange]);\r\n\r\n const updateEntry = (entry) => {\r\n setIsUpdating(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n putData(\r\n 'department/interviewDate/putEntry',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n pk_Season: dContext.season.pk_Season,\r\n pk_InterviewDate: dateData.pk_InterviewDate,\r\n },\r\n { entry },\r\n formatBearerToken(token),\r\n )\r\n .then((result) => {\r\n setIsUpdating(false);\r\n if (result.data.error) {\r\n swalErrorMessage();\r\n return;\r\n }\r\n alert.success('Link settings Saved!');\r\n if (onUpdate) {\r\n onUpdate();\r\n }\r\n })\r\n .catch((err) => {\r\n setIsUpdating(false);\r\n swalErrorMessage();\r\n });\r\n })\r\n .catch((err) => {\r\n swalErrorMessage();\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n return false;\r\n });\r\n };\r\n\r\n const checkChanges = () => {\r\n const oldURL = dateData.MainRoomURL || '';\r\n const oldDetails = dateData.MainRoomURLDetails || '';\r\n let newHasChange = false;\r\n\r\n if (MainRoomURL !== oldURL) {\r\n newHasChange = true;\r\n }\r\n\r\n if (MainRoomURLDetails !== oldDetails) {\r\n newHasChange = true;\r\n }\r\n\r\n setHasChange(newHasChange);\r\n };\r\n\r\n const saveFields = () => {\r\n let mainRoomUrl = '';\r\n let mainRoomUrlDetails = '';\r\n if (MainRoomURL.trim() !== '') {\r\n mainRoomUrl = urlWithHttpProtocol(MainRoomURL);\r\n }\r\n\r\n if (MainRoomURLDetails.trim() !== '') {\r\n mainRoomUrlDetails = MainRoomURLDetails;\r\n }\r\n const entry = {\r\n MainRoomURL: mainRoomUrl,\r\n MainRoomURLDetails: mainRoomUrlDetails,\r\n };\r\n setHasChange(false);\r\n updateEntry(entry);\r\n };\r\n\r\n return (\r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n e.stopPropagation();\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n Insert Time Slots (Rows)
\r\n \r\n {\r\n e.stopPropagation();\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n \r\n Custom Event{' '}\r\n {urlIssue ? (\r\n <>\r\n \r\n Warning: {isCustomAndNoLink ? `Custom Event URL is missing!` : `Main Room URL is missing!`}\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n {\r\n e.stopPropagation();\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n \r\n Custom Duration{' '}\r\n {row.StandardPassingDurationInMinutes == 0 || row.CustomPassingDurationInMinutes == 0 ? (\r\n <>\r\n \r\n Warning: No passing period - users will be unable to join meetings prior to the start time.\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n {\r\n e.stopPropagation();\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n Swal.fire({\r\n title: 'Are you sure?',\r\n text: \"You won't be able to revert this!\",\r\n icon: 'warning',\r\n showCancelButton: true,\r\n confirmButtonColor: '#3085d6',\r\n cancelButtonColor: '#d33',\r\n confirmButtonText: 'Yes, delete it!',\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n deleteRow();\r\n // delete row here\r\n } else {\r\n }\r\n });\r\n }}\r\n >\r\n
\r\n {renderAddTimeSlotPopOver()}\r\n {renderAddCustomEventPopOver()}\r\n {renderCustomDurationPopover()}\r\n \r\n
\r\n \r\n Delete Time Slot (Row)
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n {\r\n // setHasChange(true);\r\n setMainRoomURL(e.target.value);\r\n }}\r\n />\r\n \r\n {!isValidURL(MainRoomURL) ? 'Unusual URL found. Unusual URL detected. Please double check.' : ''}\r\n \r\n \r\n {isZoomURL && !hasPassword\r\n ? 'Zoom URL detected, but without a password. We recommend utilizing embedded passwords for Zoom meetings.'\r\n : ''}{' '}\r\n {isZoomURL && !hasPassword ? (\r\n \r\n {' '}\r\n Get Zoom Support\r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n \r\n \r\n {\r\n const urlToOpen = urlWithHttpProtocol(MainRoomURL);\r\n window.open(urlToOpen);\r\n }}\r\n >\r\n
\r\n \r\n \r\n \r\n {\r\n // setHasChange(true);\r\n setMainRoomURLDetails(e.target.value);\r\n }}\r\n />\r\n
\r\n\r\n \r\n {\r\n updateEntry({ EnableHiddenStatus: !EnableHiddenStatus }, pk_InterviewDate);\r\n }}\r\n >\r\n {\r\n updateEntry({ EnableLockedStatus: !EnableLockedStatus }, pk_InterviewDate);\r\n }}\r\n >\r\n
*/}\r\n \r\n );\r\n};\r\n\r\nexport default SettingsDropDown;\r\n","const style = {\r\n simpleRow: {\r\n alignItems: 'center',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n // margin: 10,\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n marginBottom: 10,\r\n },\r\n printButton: {\r\n backgroundColor: '#0a91ff',\r\n\r\n height: '100%',\r\n width: '100%',\r\n },\r\n};\r\n\r\nexport default style;\r\n","import { faCog, faLink } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport SettingsDropDown from 'Body/RezRATE/Coordinator/Schedule/TopBar/SettingsDropDown';\r\nimport { DepartmentContext } from 'DepartmentWrapper';\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport {\r\n Button,\r\n Modal,\r\n ModalBody,\r\n ModalHeader,\r\n Popover,\r\n PopoverBody,\r\n PopoverHeader,\r\n UncontrolledTooltip,\r\n} from 'reactstrap';\r\n\r\nimport style from './LinkSettingsButton.style';\r\nimport './LinkSettingsButton.style.css';\r\nimport { checkIfZoomURLAndIfHasPassword, isValidURL } from 'Common.functions';\r\nimport Swal from 'sweetalert2';\r\nconst LinkSettingsButton = ({\r\n id,\r\n disabled,\r\n btnSize, // sm or lg\r\n MainRoomURL,\r\n MainRoomURLDetails,\r\n scheduleDate,\r\n scheduleData,\r\n scheduleID,\r\n dContext,\r\n isInPreviewMode,\r\n setShowUnsavedChangeModal,\r\n onUpdate,\r\n btnWidth,\r\n marginRight,\r\n}) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [hasChanges, setHasChanges] = useState(false);\r\n\r\n const zoomDetails = checkIfZoomURLAndIfHasPassword(MainRoomURL);\r\n const { isZoomURL, hasPassword } = zoomDetails;\r\n\r\n const renderSettingsPopOver = () => {\r\n if (disabled) return null;\r\n return (\r\n \r\n
\r\n \r\n Date is {`${EnableHiddenStatus || isInPast ? 'Hidden' : 'Visible'}`}
\r\n \r\n
\r\n \r\n Date is {`${EnableLockedStatus || isInPast ? 'Locked' : 'Unlocked'} `}
\r\n \r\n {scheduleDate ? scheduleDate.format('MMM DD, YYYY') : 'No Date'}{' '}\r\n {scheduleData && scheduleData.Label\r\n ? `(${scheduleData.Label}) `\r\n : scheduleData && scheduleData.metaData && scheduleData.metaData.Label\r\n ? `(${scheduleData.metaData.Label}) `\r\n : ' '}\r\n - Interview Date Settings\r\n
\r\n \r\n \r\n
\r\n \r\n {!MainRoomURL && !disabled ? (\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n {PhotoUrl ? (\r\n 
\r\n ) : (\r\n
\r\n\r\n \r\n
\r\n {candidateName}
\r\n \r\n Inteviews: {candidate.CountOfScheduleInterviews || 0} /{' '}\r\n {allowInterviewLimit ? interviewLimit : headers.length}\r\n
\r\n \r\n {CandidateSubHeading ? CandidateSubHeading : '---'}\r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default CandidateDropDownItem;\r\n","const style = {\r\n dropDownBody: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n maxHeight: 250,\r\n minWidth: '100%',\r\n overflowY: 'scroll',\r\n },\r\n};\r\n\r\nexport default style;\r\n","import React from 'react';\r\nimport CandidateDropDownItem from './CandidateDropDownItem';\r\nimport style from './style.js';\r\n\r\nconst CandidateDropDown = ({\r\n candidates = [],\r\n onEditCandidate,\r\n onCalendarClick,\r\n interviewLimit,\r\n scheduleData,\r\n allowInterviewLimit,\r\n scheduleID,\r\n}) => {\r\n return (\r\n \r\n {\r\n window.open(`/administrator/candidates?pk_Candidate=${candidate.pk_Candidate}`, '_blank');\r\n // For Candidate AND Date. Doesn't work. Very sad. Could be date listener conflciting with candidate listener.\r\n // window.open(\r\n // `/administrator/candidates?pk_Candidate=${candidate.pk_Candidate}&pk_InterviewDate=${scheduleID}`,\r\n // '_blank',\r\n // );\r\n }}\r\n />\r\n
\r\n \r\n {\r\n if (candidate.ScheduleUUID != null) {\r\n // history.push(`/candidate/schedule/${candidate.ScheduleUUID}`);\r\n window.open(`/candidate/schedule/${candidate.ScheduleUUID}?preview=true`, '_blank');\r\n }\r\n }}\r\n />\r\n
\r\n \r\n \r\n {HasBeenSentSchedule ? 'Candidate has been sent schedule!' : 'Candidate has not been sent schedule!'}\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default CandidateDropDown;\r\n","const style = {\r\n genButton: {\r\n alignItems: 'center',\r\n backgroundColor: '#0a91ff',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n marginLeft: 10,\r\n marginRight: 10,\r\n paddignRight: 20,\r\n paddingBottom: 10,\r\n paddingLeft: 20,\r\n paddingTop: 10,\r\n },\r\n buttonIcon: {\r\n marginRight: 10,\r\n },\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n marginBottom: 10,\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n spacedBetweenRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n },\r\n buttonLabel: { width: '100%', textAlign: 'center', fontWeight: 600 },\r\n};\r\n\r\nexport default style;\r\n","import pdfMake from 'pdfmake/build/pdfmake';\r\nimport pdfFonts from 'pdfmake/build/vfs_fonts';\r\nimport htmlToPdfmake from 'html-to-pdfmake';\r\nimport imageToBase64 from 'image-to-base64';\r\n\r\nimport moment from 'moment-timezone';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';\r\nimport tinycolor from 'tinycolor2';\r\nimport { clone } from '../schedule';\r\npdfMake.vfs = pdfFonts.pdfMake.vfs;\r\n\r\nconst tableLayouts = {\r\n padlessTable: {\r\n hLineWidth: (i, node) => {\r\n if (i === 0 || i === node.table.body.length) {\r\n return 0;\r\n }\r\n return i === node.table.headerRows ? 1 : 1;\r\n },\r\n vLineWidth: (i) => {\r\n return 0;\r\n },\r\n hLineColor: (i) => {\r\n return i === 1 ? 'black' : '#aaa';\r\n },\r\n paddingLeft: (i) => {\r\n return 0;\r\n },\r\n paddingRight: (i, node) => {\r\n return 0;\r\n },\r\n paddingTop: (i, node) => {\r\n return 0;\r\n },\r\n paddingBottom: (i, node) => {\r\n return 0;\r\n },\r\n },\r\n};\r\n\r\nconst createPageHeader = (data) => {\r\n const { interviewDateRow, base64Img, department } = data;\r\n const { scheduleName, interviewDate } = interviewDateRow;\r\n const { OrganizationName, DepartmentName } = department;\r\n const columns = [\r\n [\r\n {\r\n text: `${OrganizationName}`,\r\n alignment: 'left',\r\n fontSize: 5,\r\n bold: true,\r\n margin: [5, 2, 10, 0],\r\n width: 'auto',\r\n maxHeight: 15,\r\n },\r\n {\r\n text: `${DepartmentName}`,\r\n alignment: 'left',\r\n fontSize: 5,\r\n bold: false,\r\n margin: [5, 0, 10, 0],\r\n width: 'auto',\r\n maxHeight: 15,\r\n },\r\n {\r\n text: `${interviewDate ? moment.tz(interviewDate, null).format('dddd, MMMM DD, YYYY') : 'No Date'} ${\r\n scheduleName ? `(${scheduleName})` : ''\r\n }`,\r\n alignment: 'left',\r\n fontSize: 4,\r\n bold: false,\r\n margin: [5, 0, 10, 0],\r\n width: 'auto',\r\n maxHeight: 15,\r\n },\r\n ],\r\n ];\r\n\r\n if (base64Img && (base64Img[0] === '/' || base64Img[0] === 'i')) {\r\n columns.splice(0, 0, {\r\n image: base64Img ? `data:image/png;base64,${base64Img}` : null,\r\n width: 20,\r\n height: 20,\r\n });\r\n } else {\r\n columns.splice(0, 0, {\r\n text: ' ',\r\n width: 30,\r\n });\r\n }\r\n\r\n return {\r\n columns,\r\n margin: [10, 10, 10, 0],\r\n };\r\n};\r\n\r\nconst createHeaders = (scheduleData, columnTracker, PDFFontSize) => {\r\n const { headers } = scheduleData;\r\n const tableHeaders = [];\r\n const rawTableHeadersWithRooms = [];\r\n const rawTableHeadersWithoutRooms = [];\r\n\r\n const headerOrder = [];\r\n headers.forEach((header) => {\r\n const { Evaluators = [], RoomLabel = '' } = header;\r\n let headerLabel = '';\r\n let headerNames = [];\r\n const key = header.pk_ScheduleAssignment.toString();\r\n const candidateCount = columnTracker[key] ? columnTracker[key].length : 0;\r\n if (header.Evaluators) {\r\n header.Evaluators.Evaluators.forEach((e, i) => {\r\n headerNames.push(`${e.UserFirst ? `${e.UserFirst[0]}.` : ''} ${e.UserLast}`);\r\n });\r\n }\r\n\r\n headerNames.sort();\r\n headerNames = headerNames.join(',');\r\n headerLabel += `${headerNames.replace(/,/g, ', ')}`;\r\n\r\n // headerOrder.push({\r\n // pk_ScheduleAssignment: header.pk_ScheduleAssignment,\r\n // Label: headerLabel,\r\n // RoomLabel: RoomLabel || '',\r\n // });\r\n\r\n if (RoomLabel) {\r\n rawTableHeadersWithRooms.push([\r\n {\r\n text: headerLabel,\r\n style: { fontSize: PDFFontSize, bold: true, alignment: 'center' },\r\n pk_ScheduleAssignment: header.pk_ScheduleAssignment,\r\n },\r\n { text: `${RoomLabel || ' '}`, style: { fontSize: PDFFontSize - 1, alignment: 'center' } },\r\n ]);\r\n } else {\r\n rawTableHeadersWithoutRooms.push([\r\n {\r\n text: headerLabel,\r\n style: { fontSize: PDFFontSize, bold: true, alignment: 'center' },\r\n pk_ScheduleAssignment: header.pk_ScheduleAssignment,\r\n },\r\n { text: `${RoomLabel || ' '}`, style: { fontSize: PDFFontSize - 1, alignment: 'center' } },\r\n ]);\r\n }\r\n\r\n // tableHeaders.push([\r\n // { text: headerLabel, style: { fontSize: PDFFontSize, bold: true, alignment: 'center' } },\r\n // { text: `${RoomLabel || ' '}`, style: { fontSize: PDFFontSize - 1, alignment: 'center' } },\r\n // ]);\r\n });\r\n\r\n rawTableHeadersWithRooms.sort((a, b) => {\r\n const textARoomLabel = a[1].text.toUpperCase();\r\n const textBRoomLabel = b[1].text.toUpperCase();\r\n\r\n return textARoomLabel < textBRoomLabel ? -1 : textARoomLabel > textBRoomLabel ? 1 : 0;\r\n });\r\n\r\n rawTableHeadersWithoutRooms.sort((a, b) => {\r\n const textA = a[0].text.toUpperCase();\r\n const textB = b[0].text.toUpperCase();\r\n\r\n return textA < textB ? -1 : textA > textB ? 1 : 0;\r\n });\r\n\r\n rawTableHeadersWithRooms.forEach((header) => {\r\n tableHeaders.push(header);\r\n });\r\n\r\n rawTableHeadersWithoutRooms.forEach((header) => {\r\n tableHeaders.push(header);\r\n });\r\n\r\n tableHeaders.forEach((h) => {\r\n const { pk_ScheduleAssignment } = h[0];\r\n\r\n headerOrder.push({\r\n pk_ScheduleAssignment: pk_ScheduleAssignment,\r\n Label: h[1].text || '',\r\n RoomLabel: h[0].text || '',\r\n });\r\n });\r\n // tableHeaders.sort((a, b) => {\r\n // const textA = a[0].text.toUpperCase();\r\n // const textB = b[0].text.toUpperCase();\r\n\r\n // const textARoomLabel = a[1].text.toUpperCase();\r\n // const textBRoomLabel = b[1].text.toUpperCase();\r\n\r\n // // Sort by room labels first\r\n // if (textARoomLabel && textBRoomLabel) {\r\n // return textARoomLabel < textBRoomLabel ? -1 : textARoomLabel > textBRoomLabel ? 1 : 0;\r\n // } else if (textARoomLabel && !textBRoomLabel) {\r\n // return -1;\r\n // } else if (!textARoomLabel && textBRoomLabel) {\r\n // return 1;\r\n // }\r\n\r\n // // Sort by text labels if both items don't have room labels\r\n // if (!textARoomLabel && !textBRoomLabel) {\r\n // if (textA && textB) {\r\n // return textA < textB ? -1 : textA > textB ? 1 : 0;\r\n // } else if (textA && !textB) {\r\n // return -1;\r\n // } else if (!textA && textB) {\r\n // return 1;\r\n // }\r\n // }\r\n\r\n // // // Sort by room labels first\r\n // // if (textARoomLabel && textBRoomLabel) {\r\n // // return textARoomLabel < textBRoomLabel ? -1 : textARoomLabel > textBRoomLabel ? 1 : 0;\r\n // // } else if (textARoomLabel && !textBRoomLabel) {\r\n // // return -1;\r\n // // } else if (!textARoomLabel && textBRoomLabel) {\r\n // // return 1;\r\n // // }\r\n\r\n // // // Sort by text labels if both items don't have room labels\r\n // // if (textA && textB) {\r\n // // return textA < textB ? -1 : textA > textB ? 1 : 0;\r\n // // } else if (textA && !textB) {\r\n // // return -1;\r\n // // } else if (!textA && textB) {\r\n // // return 1;\r\n // // }\r\n\r\n // // return 0;\r\n\r\n // // if (textBRoomLabel && !textARoomLabel) {\r\n // // return -1;\r\n // // }\r\n\r\n // // if (textARoomLabel && !textBRoomLabel) {\r\n // // return -1;\r\n // // }\r\n\r\n // // if (textARoomLabel < textBRoomLabel) {\r\n // // return -1;\r\n // // } else if (textARoomLabel > textBRoomLabel) {\r\n // // return 1;\r\n // // }\r\n\r\n // // if (textB && !textA) {\r\n // // return -1;\r\n // // }\r\n\r\n // // if (textA - !textB) {\r\n // // return 1;\r\n // // }\r\n\r\n // // return textA < textB ? -1 : textA > textB ? 1 : 0;\r\n // });\r\n\r\n // headerOrder.sort((a, b) => {\r\n // const textA = a.Label.toUpperCase();\r\n // const textB = b.Label.toUpperCase();\r\n\r\n // const textARoomLabel = a.RoomLabel.toUpperCase();\r\n // const textBRoomLabel = b.RoomLabel.toUpperCase();\r\n\r\n // if (textBRoomLabel && !textARoomLabel) {\r\n // return 1;\r\n // }\r\n\r\n // if (textARoomLabel && !textBRoomLabel) {\r\n // return -1;\r\n // }\r\n\r\n // if (textARoomLabel < textBRoomLabel) {\r\n // return -1;\r\n // } else if (textARoomLabel > textBRoomLabel) {\r\n // return 1;\r\n // }\r\n\r\n // if (textB && !textA) {\r\n // return -1;\r\n // }\r\n\r\n // if (textA - !textB) {\r\n // return 1;\r\n // }\r\n\r\n // return textA < textB ? -1 : textA > textB ? 1 : 0;\r\n // });\r\n\r\n tableHeaders.splice(0, 0, {\r\n text: 'Time',\r\n style: { fontWeight: 'bold', fontSize: PDFFontSize + 2, alignment: 'center' },\r\n });\r\n\r\n return { tableHeaders, headerOrder };\r\n};\r\n\r\nconst createRows = (scheduleData, columnTracker, candidates, PDFFontSize) => {\r\n const rows = [];\r\n const { tableHeaders, headerOrder } = createHeaders(scheduleData, columnTracker, PDFFontSize);\r\n\r\n rows.push(tableHeaders);\r\n\r\n const cellLayout = {\r\n paddingLeft: (i) => {\r\n return 0;\r\n },\r\n paddingRight: (i, node) => {\r\n return 0;\r\n },\r\n paddingTop: (i, node) => {\r\n return 0;\r\n },\r\n paddingBottom: (i, node) => {\r\n return 0;\r\n },\r\n };\r\n\r\n scheduleData.body.forEach((row, i) => {\r\n const timeCell = {\r\n text: `${moment.tz(row.slot, null).format('hh:mm A')}`,\r\n border: [false, false, false, false],\r\n style: { alignment: 'center' },\r\n };\r\n if (row.CustomMeetingTitle || row.CustomDurationInMinutes || row.CustomPassingDurationInMinutes) {\r\n timeCell.style.fillColor = '#ffec45';\r\n }\r\n const newRow = [\r\n {\r\n layout: cellLayout,\r\n table: {\r\n widths: ['*'],\r\n body: [\r\n [\r\n {\r\n layout: cellLayout,\r\n table: {\r\n widths: ['*'],\r\n body: [[timeCell]],\r\n margin: [0, 0, 0, 0],\r\n },\r\n border: [false, false, false, false],\r\n },\r\n ],\r\n ],\r\n margin: [0, 0, 0, 0],\r\n },\r\n },\r\n ];\r\n\r\n if (row.pk_Timeslot === 'END') {\r\n newRow.push({\r\n layout: cellLayout,\r\n table: {\r\n widths: ['*'],\r\n body: [\r\n [\r\n {\r\n layout: cellLayout,\r\n table: {\r\n widths: ['*'],\r\n body: [\r\n [\r\n {\r\n text: row.endTimesText,\r\n fillColor: '#d4d4d4',\r\n border: [false, false, false, false],\r\n margin: [0, 0, 0, 0],\r\n\r\n style: { alignment: 'center', bold: true },\r\n },\r\n ],\r\n ],\r\n },\r\n border: [false, false, false, false],\r\n margin: [0, 0, 0, 0],\r\n },\r\n ],\r\n ],\r\n margin: [0, 0, 0, 0],\r\n },\r\n colSpan: headerOrder.length,\r\n });\r\n } else {\r\n headerOrder.forEach((order) => {\r\n const newCell = {\r\n layout: cellLayout,\r\n table: {\r\n widths: ['*'],\r\n body: [],\r\n margin: [0, 0, 0, 0],\r\n },\r\n };\r\n row[order.pk_ScheduleAssignment].ScheduleBlockEntries.forEach((block) => {\r\n let newBlock = [];\r\n if (row[order.pk_ScheduleAssignment].cellState === 'Unavailable') {\r\n newBlock.push({\r\n text: `UNAVAILABLE`,\r\n fillColor: '#ff3d3d',\r\n color: '#ffffff',\r\n border: [false, false, false, false],\r\n margin: [0, 0, 0, 0],\r\n alignment: 'center',\r\n });\r\n newCell.table.body.push([\r\n {\r\n layout: cellLayout,\r\n table: {\r\n widths: ['*'],\r\n body: [newBlock],\r\n },\r\n border: [false, false, false, false],\r\n margin: [0, 0, 0, 0],\r\n },\r\n ]);\r\n } else if (block.Candidates && block.Candidates.length > 0) {\r\n block.Candidates.forEach((candidate) => {\r\n newBlock = [];\r\n let fillColor = candidates[candidate.pk_Candidate] ? candidates[candidate.pk_Candidate].color : '#ffffff';\r\n if (row[order.pk_ScheduleAssignment].cellState === 'Warning') {\r\n fillColor = '#ffc180';\r\n }\r\n newBlock.push({\r\n text: `${candidate.LastName}, ${candidate.FirstName} ${\r\n row[order.pk_ScheduleAssignment].cellState === 'Warning' ? '(!)' : ''\r\n }`,\r\n fillColor: fillColor,\r\n color: tinycolor(fillColor).isLight() ? '#000000' : '#ffffff',\r\n border: [false, false, false, false],\r\n margin: [0, 0, 0, 0],\r\n alignment: 'center',\r\n });\r\n\r\n newCell.table.body.push([\r\n {\r\n layout: cellLayout,\r\n table: {\r\n widths: ['*'],\r\n body: [newBlock],\r\n },\r\n border: [false, false, false, false],\r\n margin: [0, 0, 0, 0],\r\n },\r\n ]);\r\n });\r\n } else if (row.CustomMeetingTitle) {\r\n newBlock.push({\r\n text: row.CustomMeetingTitle,\r\n fillColor: '#d4d4d4',\r\n border: [false, false, false, false],\r\n margin: [0, 0, 0, 0],\r\n alignment: 'center',\r\n });\r\n newCell.table.body.push([\r\n {\r\n layout: cellLayout,\r\n table: {\r\n widths: ['*'],\r\n body: [newBlock],\r\n },\r\n border: [false, false, false, false],\r\n margin: [0, 0, 0, 0],\r\n },\r\n ]);\r\n } else {\r\n // EMPTY CELL\r\n newCell.table.body.push([\r\n {\r\n layout: cellLayout,\r\n table: {\r\n widths: ['*'],\r\n body: [\r\n [\r\n {\r\n text: ` xxx `,\r\n fillColor: '#d4d4d4',\r\n border: [false, false, false, false],\r\n margin: [0, 0, 0, 0],\r\n style: { color: '#d4d4d4' },\r\n },\r\n ],\r\n ],\r\n },\r\n border: [false, false, false, false],\r\n margin: [0, 0, 0, 0],\r\n },\r\n ]);\r\n }\r\n });\r\n\r\n newRow.push(newCell);\r\n });\r\n }\r\n\r\n rows.push(newRow);\r\n });\r\n return rows;\r\n};\r\n\r\nconst createPDFProper = (data) => {\r\n const {\r\n interviewDateRow,\r\n scheduleData,\r\n columnTracker,\r\n candidates,\r\n department,\r\n base64Img,\r\n PDFOrientation,\r\n PDFFontSize,\r\n willGetDataUrl,\r\n callback,\r\n } = data;\r\n\r\n const tableWidths = scheduleData.headers.map((h) => {\r\n return '*';\r\n });\r\n tableWidths.splice(0, 0, PDFFontSize * 6.25);\r\n\r\n let pdfObject = [\r\n {\r\n layout: 'padlessTable', //'lightHorizontalLines', // optional\r\n table: {\r\n headerRows: 1,\r\n widths: tableWidths,\r\n body: [...createRows(scheduleData, columnTracker, candidates, PDFFontSize)],\r\n },\r\n },\r\n ];\r\n\r\n const docDefinition = {\r\n header: createPageHeader({ interviewDateRow, base64Img, department }),\r\n pageSize: 'A5',\r\n pageOrientation: PDFOrientation,\r\n content: pdfObject,\r\n defaultStyle: {\r\n fontSize: PDFFontSize || 4,\r\n },\r\n pageMargins: [10, 35, 10, 5],\r\n };\r\n\r\n const pdfDocGenerator = pdfMake.createPdf(docDefinition, tableLayouts);\r\n\r\n if (willGetDataUrl) {\r\n pdfDocGenerator.getDataUrl((dataURL) => {\r\n if (callback) {\r\n callback(dataURL);\r\n }\r\n });\r\n } else {\r\n // Opera 8.0+\r\n const isOpera =\r\n (!!window.opr && !!window.opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;\r\n\r\n // Firefox 1.0+\r\n const isFirefox = typeof InstallTrigger !== 'undefined';\r\n\r\n // Safari 3.0+ \"[object HTMLElementConstructor]\"\r\n const isSafari =\r\n /constructor/i.test(window.HTMLElement) ||\r\n (function(p) {\r\n return p.toString() === '[object SafariRemoteNotification]';\r\n })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));\r\n\r\n // Internet Explorer 6-11\r\n const isIE = /*@cc_on!@*/ false || !!document.documentMode;\r\n\r\n // Edge 20+\r\n const isEdge = !isIE && !!window.StyleMedia;\r\n\r\n // Chrome 1 - 79\r\n const isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);\r\n\r\n // Edge (based on chromium) detection\r\n const isEdgeChromium = isChrome && navigator.userAgent.indexOf('Edg') != -1;\r\n\r\n // Blink engine detection\r\n const isBlink = (isChrome || isOpera) && !!window.CSS;\r\n\r\n const { scheduleName, interviewDate } = interviewDateRow;\r\n const downloadTitle = `${department.DepartmentName} - ${\r\n interviewDate ? moment.tz(interviewDate, null).format('MMM DD, YYYY') : 'No Date'\r\n } ${scheduleName ? `(${scheduleName})` : ''}`;\r\n pdfDocGenerator.download(downloadTitle);\r\n }\r\n};\r\n\r\nexport const createPDFForSchedule = ({\r\n interviewDateRow,\r\n scheduleData,\r\n columnTracker,\r\n candidates = [],\r\n department,\r\n PDFOrientation,\r\n PDFFontSize,\r\n willGetDataUrl,\r\n callback,\r\n}) => {\r\n if (department && department.DepartmentLogo) {\r\n imageToBase64(department.DepartmentLogo)\r\n .then((base64Img) => {\r\n createPDFProper({\r\n interviewDateRow,\r\n scheduleData,\r\n columnTracker,\r\n candidates,\r\n department,\r\n base64Img,\r\n PDFOrientation,\r\n PDFFontSize,\r\n willGetDataUrl,\r\n callback,\r\n });\r\n })\r\n .catch((err) => {\r\n createPDFProper({\r\n interviewDateRow,\r\n scheduleData,\r\n columnTracker,\r\n candidates,\r\n department,\r\n base64Img: null,\r\n PDFOrientation,\r\n PDFFontSize,\r\n willGetDataUrl,\r\n callback,\r\n });\r\n });\r\n } else {\r\n createPDFProper({ interviewDateRow, scheduleData, columnTracker, candidates, department });\r\n }\r\n};\r\n","export default __webpack_public_path__ + \"static/media/rezRateLogo.c12c566e.png\";","import pdfMake from 'pdfmake/build/pdfmake';\r\nimport pdfFonts from 'pdfmake/build/vfs_fonts';\r\nimport imageToBase64 from 'image-to-base64';\r\n\r\nimport tinycolor from 'tinycolor2';\r\nimport { clone } from '../../schedule';\r\nimport Swal from 'sweetalert2';\r\nimport { calculateFontSize, pdf_concatenate } from '../../candidates';\r\nimport rezRateLogo from '../rezRateLogo.png';\r\n\r\nimport bgGuide from './AVERY_5390.png';\r\n\r\npdfMake.vfs = pdfFonts.pdfMake.vfs;\r\nlet rezRateLogoBase64 = null;\r\n// 1 inch = 72 units.\r\n// LETTER size is 612x792\r\n\r\nconst tableLayouts = {\r\n customTable: {\r\n hLineWidth: (i, node) => {\r\n return 0;\r\n // if (i === 0 || i === node.table.body.length) {\r\n // return 0;\r\n // }\r\n // return i === node.table.headerRows ? 2 : 1;\r\n },\r\n vLineWidth: (i) => {\r\n return 0;\r\n },\r\n hLineColor: (i) => {\r\n return i === 1 ? 'black' : '#aaa';\r\n },\r\n paddingLeft: (i) => {\r\n return 0;\r\n },\r\n paddingRight: (i, node) => {\r\n return 0;\r\n },\r\n paddingTop: (i, node) => {\r\n return 0;\r\n },\r\n paddingBottom: (i, node) => {\r\n return 0;\r\n },\r\n },\r\n};\r\n\r\nconst truncate = (wordToTruncate, limit = 0, forcedCut) => {\r\n if (wordToTruncate == null) {\r\n return '';\r\n }\r\n if (limit == 0 || wordToTruncate.length < limit + 1) {\r\n return wordToTruncate;\r\n } else if (forcedCut) {\r\n return `${wordToTruncate.slice(0, limit)}`;\r\n } else if (wordToTruncate.length > limit + 1) {\r\n return `${wordToTruncate.slice(0, limit - 5)}. . .`;\r\n }\r\n};\r\n\r\nconst createPDFProper = (data) => {\r\n const { interviewDate, candidates = [], department, departmentLogo } = data;\r\n const { ProgramType } = department;\r\n\r\n const rows = [];\r\n let counter = 0;\r\n const renderCard = (candidate, counter) => {\r\n const cardRows = [];\r\n const subTextKey = 'CandidateSubHeading';\r\n const deptLogo = {\r\n width: 50,\r\n columns: [\r\n {\r\n image: `data:image/png;base64,${departmentLogo || rezRateLogoBase64}`,\r\n // width: 80,\r\n fit: [50, 40],\r\n },\r\n ],\r\n margin: [10, 0, 10, 0],\r\n };\r\n\r\n cardRows.push({\r\n columns: [\r\n deptLogo,\r\n {\r\n width: 190,\r\n // text: pdf_concatenate({ string: department.DepartmentName, maxLimit: 30 }),\r\n text: department.DepartmentName,\r\n style: {\r\n alignment: 'left',\r\n fontSize: calculateFontSize({\r\n text: department.DepartmentName,\r\n maxWidth: 450,\r\n maxHeight: 18,\r\n }),\r\n },\r\n fillColor: '#f5f5f5',\r\n margin: [10, 5, 0, 0],\r\n },\r\n ],\r\n margin: [0, 20, 0, 5],\r\n });\r\n\r\n cardRows.push({ canvas: [{ type: 'line', x1: 10, y1: 0, x2: 242, y2: 0, lineWidth: 1 }] });\r\n cardRows.push([\r\n {\r\n style: { alignment: 'center', bold: true },\r\n text: `${candidate.FirstName || ''} ${candidate.LastName || ''}`,\r\n fontSize: calculateFontSize({\r\n text: `${candidate.FirstName || ''} ${candidate.LastName || ''}`,\r\n maxWidth: 200,\r\n maxHeight: 20,\r\n startingFontSize: 20,\r\n }),\r\n width: 200,\r\n margin: [10, 15, 10, 0],\r\n },\r\n ]);\r\n\r\n cardRows.push([\r\n {\r\n style: { alignment: 'center' },\r\n text: `${candidate[subTextKey] ? `${candidate[subTextKey]}` : '---'}`,\r\n fontSize: calculateFontSize({\r\n text: candidate[subTextKey] ? `${candidate[subTextKey]}` : '---',\r\n maxWidth: 450,\r\n maxHeight: 18,\r\n }),\r\n width: 200,\r\n margin: [10, 10, 10, 10],\r\n },\r\n ]);\r\n\r\n return cardRows;\r\n };\r\n\r\n while (counter < candidates.length) {\r\n const columns = [];\r\n const tableRow = [];\r\n\r\n columns.push({ width: 3.95 * 72, columns: [renderCard(candidates[counter], counter)] });\r\n tableRow.push(renderCard(candidates[counter], counter));\r\n counter++;\r\n\r\n if (counter < candidates.length) {\r\n columns.push({ width: 3.95 * 72, columns: [renderCard(candidates[counter], counter)] });\r\n tableRow.push(renderCard(candidates[counter], counter));\r\n } else {\r\n tableRow.push({ text: '' });\r\n }\r\n\r\n rows.push(tableRow);\r\n counter++;\r\n }\r\n\r\n let pdfObject = [\r\n {\r\n table: { heights: 2.23 * 72, widths: [3.5 * 72, 3.5 * 72], body: rows, dontBreakRows: true },\r\n layout: 'customTable',\r\n },\r\n ];\r\n\r\n if (rows.length <= 0) {\r\n Swal.fire('Error', 'There are no Candidates for this Interview Date. There is nothing to print!', 'error');\r\n return;\r\n }\r\n // imageToBase64(bgGuide)\r\n // .then((bgBase64) => {\r\n // console.log('bgBase64: ', `data:image/png;base64,${bgBase64}`);\r\n const docDefinition = {\r\n // background: { image: `data:image/png;base64,${bgBase64}`, width: 612 },\r\n info: { title: 'Candidate Badges 5390' },\r\n pageSize: 'LETTER',\r\n pageOrientation: 'portrait',\r\n content: pdfObject,\r\n defaultStyle: {\r\n fontSize: 15,\r\n },\r\n pageMargins: [0.75 * 72, 72, 0.75 * 72, 72],\r\n };\r\n\r\n pdfMake.createPdf(docDefinition, tableLayouts).open({}, window.open('', '_blank'));\r\n // })\r\n // .catch((err) => {});\r\n};\r\n\r\nexport const createPDFForCandidateBadges = ({ interviewDate, department, candidates = [], callback }) => {\r\n const startProper = () => {\r\n const candidatesCopy = clone(candidates);\r\n if (department.DepartmentLogo) {\r\n imageToBase64(department.DepartmentLogo)\r\n .then((res) => {\r\n if (callback) {\r\n callback();\r\n }\r\n createPDFProper({ candidates: candidatesCopy, department, departmentLogo: res });\r\n })\r\n .catch((err) => {\r\n if (callback) {\r\n callback();\r\n }\r\n\r\n createPDFProper({ candidates: candidatesCopy, department });\r\n });\r\n } else {\r\n if (callback) {\r\n callback();\r\n }\r\n createPDFProper({ candidates: candidatesCopy, department });\r\n }\r\n };\r\n\r\n // if (department.DepartmentLogo) {\r\n // imageToBase64(department.DepartmentLogo)\r\n // .then((res) => {\r\n // if (callback) {\r\n // callback();\r\n // }\r\n // createPDFProper({ candidates: candidatesCopy, department, departmentLogo: res });\r\n // })\r\n // .catch((err) => {});\r\n // } else {\r\n // createPDFProper({ interviewDate, candidates: candidatesCopy, department });\r\n // }\r\n\r\n imageToBase64(rezRateLogo)\r\n .then((res) => {\r\n rezRateLogoBase64 = res;\r\n startProper();\r\n })\r\n .catch(() => {\r\n startProper();\r\n });\r\n};\r\n","import pdfMake from 'pdfmake/build/pdfmake';\r\nimport pdfFonts from 'pdfmake/build/vfs_fonts';\r\nimport imageToBase64 from 'image-to-base64';\r\n\r\nimport tinycolor from 'tinycolor2';\r\nimport { clone } from '../../schedule';\r\nimport Swal from 'sweetalert2';\r\nimport { calculateFontSize, pdf_concatenate } from '../../candidates';\r\nimport rezRateLogo from '../rezRateLogo.png';\r\nimport bgGuide from './AVERY_5384.png';\r\n\r\npdfMake.vfs = pdfFonts.pdfMake.vfs;\r\nlet rezRateLogoBase64 = null;\r\n// 1 inch = 72 units.\r\n// LETTER size is 612x792\r\n\r\nconst tableLayouts = {\r\n customTable: {\r\n hLineWidth: (i, node) => {\r\n return 0;\r\n // if (i === 0 || i === node.table.body.length) {\r\n // return 0;\r\n // }\r\n // return i === node.table.headerRows ? 2 : 1;\r\n },\r\n vLineWidth: (i) => {\r\n return 0;\r\n },\r\n hLineColor: (i) => {\r\n return i === 1 ? 'black' : '#aaa';\r\n },\r\n paddingLeft: (i) => {\r\n return 0;\r\n },\r\n paddingRight: (i, node) => {\r\n return 0;\r\n },\r\n paddingTop: (i, node) => {\r\n return 0;\r\n },\r\n paddingBottom: (i, node) => {\r\n return 0;\r\n },\r\n },\r\n};\r\n\r\nconst truncate = (wordToTruncate, limit = 0, forcedCut) => {\r\n if (wordToTruncate == null) {\r\n return '';\r\n }\r\n if (limit == 0 || wordToTruncate.length < limit + 1) {\r\n return wordToTruncate;\r\n } else if (forcedCut) {\r\n return `${wordToTruncate.slice(0, limit)}`;\r\n } else if (wordToTruncate.length > limit + 1) {\r\n return `${wordToTruncate.slice(0, limit - 5)}. . .`;\r\n }\r\n};\r\n\r\nconst createPDFProper = (data) => {\r\n const { interviewDate, candidates, department, departmentLogo } = data;\r\n const { ProgramType } = department;\r\n\r\n const rows = [];\r\n let counter = 0;\r\n const renderCard = (candidate, counter) => {\r\n const cardRows = [];\r\n\r\n const subTextKey = 'CandidateSubHeading';\r\n\r\n const deptLogo = {\r\n width: 55,\r\n columns: [\r\n {\r\n image: `data:image/png;base64,${departmentLogo || rezRateLogoBase64}`,\r\n // width: 90,\r\n fit: [55, 50],\r\n },\r\n ],\r\n margin: [10, 0, 10, 0],\r\n };\r\n\r\n cardRows.push({\r\n columns: [\r\n deptLogo,\r\n {\r\n width: 225,\r\n // text: pdf_concatenate({ string: department.DepartmentName, maxLimit: 30 }),\r\n text: department.DepartmentName,\r\n fontSize: calculateFontSize({\r\n text: department.DepartmentName,\r\n maxWidth: 650,\r\n maxHeight: 18,\r\n }),\r\n style: { alignment: 'left' },\r\n margin: [10, 5, 0, 0],\r\n },\r\n ],\r\n margin: [0, 20, 0, 5],\r\n });\r\n\r\n cardRows.push({ canvas: [{ type: 'line', x1: 20, y1: 0, x2: 260.2, y2: 0, lineWidth: 1 }] });\r\n cardRows.push([\r\n {\r\n style: { alignment: 'center', bold: true },\r\n // text: pdf_concatenate({\r\n // string: `${candidate.FirstName} ${candidate.LastName}`,\r\n // maxLimit: 22,\r\n // forcedCut: true,\r\n // }),\r\n text: `${candidate.FirstName} ${candidate.LastName}`,\r\n fontSize: calculateFontSize({\r\n text: `${candidate.FirstName} ${candidate.LastName}`,\r\n maxWidth: 450,\r\n maxHeight: 22,\r\n startingFontSize: 22,\r\n }),\r\n margin: [15, 20, 15, 0],\r\n },\r\n ]);\r\n\r\n cardRows.push([\r\n {\r\n style: { alignment: 'center' },\r\n text: `${candidate[subTextKey] ? `${candidate[subTextKey]}` : '---'}`,\r\n fontSize: calculateFontSize({\r\n text: `${candidate[subTextKey] ? `${candidate[subTextKey]}` : '---'}`,\r\n maxWidth: 490,\r\n maxHeight: 14,\r\n startingFontSize: 14,\r\n }),\r\n margin: [15, 10, 15, 10],\r\n },\r\n ]);\r\n\r\n return cardRows;\r\n };\r\n\r\n while (counter < candidates.length) {\r\n const columns = [];\r\n const tableRow = [];\r\n\r\n columns.push({ width: 3.95 * 72, columns: [renderCard(candidates[counter], counter)] });\r\n tableRow.push(renderCard(candidates[counter], counter));\r\n counter++;\r\n if (counter < candidates.length) {\r\n columns.push({ width: 3.95 * 72, columns: [renderCard(candidates[counter], counter)] });\r\n tableRow.push(renderCard(candidates[counter], counter));\r\n } else {\r\n tableRow.push({ text: '' });\r\n }\r\n\r\n rows.push(tableRow);\r\n counter++;\r\n }\r\n\r\n let pdfObject = [\r\n { table: { heights: 212, widths: [3.95 * 72, 3.95 * 72], body: rows, dontBreakRows: true }, layout: 'customTable' },\r\n ];\r\n\r\n if (rows.length <= 0) {\r\n Swal.fire('Error', 'There are no Candidates for this Interview Date. There is nothing to print!', 'error');\r\n return;\r\n }\r\n\r\n // imageToBase64(bgGuide)\r\n // .then((bgBase64) => {\r\n const docDefinition = {\r\n // background: { image: `data:image/png;base64,${bgBase64}`, width: 612 },\r\n info: { title: 'Candidate Badges 5384' },\r\n pageSize: 'LETTER',\r\n pageOrientation: 'portrait',\r\n content: pdfObject,\r\n defaultStyle: {\r\n fontSize: 15,\r\n },\r\n\r\n pageMargins: [0.25 * 72, 72, 0.25 * 72, 72],\r\n };\r\n\r\n pdfMake.createPdf(docDefinition, tableLayouts).open({}, window.open('', '_blank'));\r\n // })\r\n // .catch((err) => {});\r\n};\r\n\r\nexport const createPDFForCandidateBadges2 = ({ interviewDate, department, candidates = [], callback }) => {\r\n const startProper = () => {\r\n const candidatesCopy = clone(candidates);\r\n if (department.DepartmentLogo) {\r\n imageToBase64(department.DepartmentLogo)\r\n .then((res) => {\r\n if (callback) {\r\n callback();\r\n }\r\n createPDFProper({ candidates: candidatesCopy, department, departmentLogo: res });\r\n })\r\n .catch((err) => {\r\n if (callback) {\r\n callback();\r\n }\r\n\r\n createPDFProper({ candidates: candidatesCopy, department });\r\n });\r\n } else {\r\n if (callback) {\r\n callback();\r\n }\r\n createPDFProper({ candidates: candidatesCopy, department });\r\n }\r\n };\r\n\r\n imageToBase64(rezRateLogo)\r\n .then((res) => {\r\n rezRateLogoBase64 = res;\r\n startProper();\r\n })\r\n .catch(() => {\r\n startProper();\r\n });\r\n};\r\n","export default __webpack_public_path__ + \"static/media/Portrait_Placeholder.157f088b.png\";","import pdfMake from 'pdfmake/build/pdfmake';\r\nimport pdfFonts from 'pdfmake/build/vfs_fonts';\r\nimport imageToBase64 from 'image-to-base64';\r\n\r\nimport moment from 'moment';\r\nimport tinycolor from 'tinycolor2';\r\nimport { clone } from '../../schedule';\r\nimport Swal from 'sweetalert2';\r\nimport profilePlaceholder from './Portrait_Placeholder.png';\r\nimport { pdf_concatenate } from '../../candidates';\r\nconst bgGuide = require('./AVERY_5384.png');\r\nlet profilePlaceholderBase64 = null;\r\n\r\npdfMake.vfs = pdfFonts.pdfMake.vfs;\r\n\r\n// 1 inch = 72 units.\r\n// LETTER size is 612x792\r\n\r\nconst tableLayouts = {\r\n customTable: {\r\n hLineWidth: (i, node) => {\r\n return 0;\r\n // if (i === 0 || i === node.table.body.length) {\r\n // return 0;\r\n // }\r\n // return i === node.table.headerRows ? 2 : 1;\r\n },\r\n vLineWidth: (i) => {\r\n return 0;\r\n },\r\n hLineColor: (i) => {\r\n return i === 1 ? 'black' : '#aaa';\r\n },\r\n paddingLeft: (i) => {\r\n return 0;\r\n },\r\n paddingRight: (i, node) => {\r\n return 0;\r\n },\r\n paddingTop: (i, node) => {\r\n return 0;\r\n },\r\n paddingBottom: (i, node) => {\r\n return 0;\r\n },\r\n },\r\n};\r\n\r\nconst truncate = (wordToTruncate, limit = 0, forcedCut) => {\r\n if (wordToTruncate == null) {\r\n return '';\r\n }\r\n if (limit == 0 || wordToTruncate.length < limit + 1) {\r\n return wordToTruncate;\r\n } else if (forcedCut) {\r\n return `${wordToTruncate.slice(0, limit)}`;\r\n } else if (wordToTruncate.length > limit + 1) {\r\n return `${wordToTruncate.slice(0, limit - 5)}. . .`;\r\n }\r\n};\r\n\r\nconst createPDFProper = (data) => {\r\n const { interviewDate, candidates, department, callback } = data;\r\n\r\n const rows = [];\r\n let counter = 0;\r\n const renderCard = (candidate, counter) => {\r\n const { userPhotoBase64, error } = candidate;\r\n const cardRows = [];\r\n const userDetailRows = [];\r\n\r\n const userPhoto =\r\n userPhotoBase64 && !error\r\n ? {\r\n width: 100,\r\n columns: [\r\n {\r\n image: userPhotoBase64 ? `data:image/png;base64,${userPhotoBase64}` : null,\r\n width: 80,\r\n },\r\n ],\r\n margin: [10, 0, 10, 0],\r\n }\r\n : {\r\n width: 100,\r\n columns: [\r\n {\r\n image: profilePlaceholderBase64 ? `data:image/png;base64,${profilePlaceholderBase64}` : null,\r\n width: 80,\r\n },\r\n ],\r\n margin: [10, 0, 10, 0],\r\n };\r\n\r\n userDetailRows.push([\r\n {\r\n style: { alignment: 'left', bold: true },\r\n text: `${candidate.LastName}, ${candidate.FirstName}`,\r\n // fontSize: 12,\r\n margin: [15, 0, 0, 0],\r\n },\r\n ]);\r\n\r\n userDetailRows.push([\r\n {\r\n style: { alignment: 'left' },\r\n text: `${candidate.CandidateSubHeading ? candidate.CandidateSubHeading : ' '}`,\r\n // fontSize: 12,\r\n margin: [15, 0, 0, 0],\r\n },\r\n ]);\r\n\r\n userDetailRows.push([\r\n {\r\n style: { alignment: 'left' },\r\n text: candidate.Email ? candidate.Email.match(/.{1,30}/g).join(' ') : ' ',\r\n // fontSize: 12,\r\n margin: [15, 0, 0, 0],\r\n },\r\n ]);\r\n\r\n if (candidate.CellPhone) {\r\n userDetailRows.push([\r\n {\r\n style: { alignment: 'left' },\r\n text: [{ text: 'Cell Phone: ', bold: true }, { text: `${candidate.CellPhone ? candidate.CellPhone : ' '}` }],\r\n margin: [15, 0, 0, 0],\r\n },\r\n ]);\r\n }\r\n\r\n if (candidate.PhoneNumber) {\r\n userDetailRows.push([\r\n {\r\n style: { alignment: 'left' },\r\n text: [\r\n { text: 'Phone Number: ', bold: true },\r\n { text: `${candidate.PhoneNumber ? candidate.PhoneNumber : ' '}` },\r\n ],\r\n margin: [15, 0, 0, 0],\r\n },\r\n ]);\r\n }\r\n\r\n userDetailRows.push({\r\n width: 185,\r\n text: department.DepartmentName,\r\n // fontSize: 12,\r\n style: { alignment: 'left' },\r\n margin: [15, 0, 0, 0],\r\n });\r\n\r\n cardRows.push({\r\n columns: [userDetailRows, userPhoto],\r\n margin: [0, 20, 0, 0],\r\n });\r\n\r\n if (candidate.HobbiesAndInterests) {\r\n cardRows.push({\r\n width: 185,\r\n text: {\r\n text: [\r\n { text: 'Hobbies: ', style: { bold: true }, margin: [0, 0, 10, 0] },\r\n {\r\n text: pdf_concatenate({\r\n string: `${candidate.HobbiesAndInterests ? candidate.HobbiesAndInterests : ''}`,\r\n maxLimit: 350,\r\n }),\r\n },\r\n ],\r\n },\r\n // fontSize: 12,\r\n style: { alignment: 'left' },\r\n margin: [15, 10, 0, 0],\r\n });\r\n }\r\n\r\n // cardRows.push({ canvas: [{ type: 'line', x1: 20, y1: 0, x2: 260.2, y2: 0, lineWidth: 1 }] });\r\n\r\n return cardRows;\r\n };\r\n\r\n while (counter < candidates.length) {\r\n const columns = [];\r\n const tableRow = [];\r\n\r\n columns.push({ width: 3.95 * 72, columns: [renderCard(candidates[counter], counter)] });\r\n tableRow.push(renderCard(candidates[counter], counter));\r\n counter++;\r\n if (counter < candidates.length) {\r\n columns.push({ width: 3.95 * 72, columns: [renderCard(candidates[counter], counter)] });\r\n tableRow.push(renderCard(candidates[counter], counter));\r\n } else {\r\n tableRow.push({ text: '' });\r\n }\r\n\r\n rows.push(tableRow);\r\n counter++;\r\n }\r\n\r\n if (rows.length <= 0) {\r\n Swal.fire('Error', 'There are no Candidates for this Interview Date. There is nothing to print!', 'error');\r\n return;\r\n }\r\n\r\n let pdfObject = [\r\n { table: { heights: 212, widths: [3.95 * 72, 3.95 * 72], body: rows, dontBreakRows: true }, layout: 'customTable' },\r\n ];\r\n\r\n const docDefinition = {\r\n info: { title: 'Candidate Fact Cards' },\r\n pageSize: 'LETTER',\r\n pageOrientation: 'portrait',\r\n content: pdfObject,\r\n defaultStyle: {\r\n fontSize: 11,\r\n },\r\n\r\n pageMargins: [0.25 * 72, 72, 0.25 * 72, 72],\r\n };\r\n pdfMake.createPdf(docDefinition, tableLayouts).open({}, window.open('', '_blank'));\r\n};\r\n\r\nexport const createPDFForCandidateFactCards = ({ interviewDate, department, candidates = [], callback }) => {\r\n const candidatesCopy = clone(\r\n candidates.sort((a, b) => {\r\n const textA = `${a.LastName}, ${a.FirstName}`.toUpperCase();\r\n const textB = `${b.LastName}, ${b.FirstName}`.toUpperCase();\r\n\r\n return textA < textB ? -1 : textA > textB ? 1 : 0;\r\n }),\r\n );\r\n\r\n if (department.DepartmentLogo) {\r\n Promise.all([\r\n ...candidatesCopy.map((c) => {\r\n return new Promise((resolve, reject) => {\r\n if (c.PhotoUrl) {\r\n imageToBase64(c.PhotoUrl)\r\n .then((base64Img) => {\r\n c.userPhotoBase64 = base64Img;\r\n resolve(c);\r\n })\r\n .catch((err) => {\r\n resolve({ error: true, ...c });\r\n });\r\n } else {\r\n resolve(c);\r\n }\r\n });\r\n }),\r\n new Promise((resolve, reject) => {\r\n imageToBase64(profilePlaceholder)\r\n .then((base64) => {\r\n profilePlaceholderBase64 = base64;\r\n\r\n resolve(base64);\r\n })\r\n .catch((err) => {\r\n reject(err);\r\n });\r\n }),\r\n ])\r\n .then((res) => {\r\n createPDFProper({ candidates: candidatesCopy, department });\r\n if (callback) {\r\n callback();\r\n }\r\n })\r\n .catch((err) => {\r\n // ('createPDF err: ', err);\r\n });\r\n } else {\r\n createPDFProper({ interviewDate, candidates: candidatesCopy, department });\r\n }\r\n};\r\n","import pdfMake from 'pdfmake/build/pdfmake';\r\nimport pdfFonts from 'pdfmake/build/vfs_fonts';\r\nimport imageToBase64 from 'image-to-base64';\r\n\r\nimport moment from 'moment';\r\nimport tinycolor from 'tinycolor2';\r\nimport { clone } from '../../schedule';\r\nimport Swal from 'sweetalert2';\r\nimport profilePlaceholder from './Portrait_Placeholder.png';\r\n\r\nconst bgGuide = require('./AVERY_5390.png');\r\nlet profilePlaceholderBase64 = null;\r\n\r\npdfMake.vfs = pdfFonts.pdfMake.vfs;\r\n\r\n// 1 inch = 72 units.\r\n// LETTER size is 612x792\r\n\r\nconst tableLayouts = {\r\n customTable: {\r\n hLineWidth: (i, node) => {\r\n return 0;\r\n // if (i === 0 || i === node.table.body.length) {\r\n // return 0;\r\n // }\r\n // return i === node.table.headerRows ? 2 : 1;\r\n },\r\n vLineWidth: (i) => {\r\n return 0;\r\n },\r\n hLineColor: (i) => {\r\n return i === 1 ? 'black' : '#aaa';\r\n },\r\n paddingLeft: (i) => {\r\n return 0;\r\n },\r\n paddingRight: (i, node) => {\r\n return 0;\r\n },\r\n paddingTop: (i, node) => {\r\n return 0;\r\n },\r\n paddingBottom: (i, node) => {\r\n return 0;\r\n },\r\n },\r\n};\r\n\r\nconst truncate = (wordToTruncate, limit = 0, forcedCut) => {\r\n if (wordToTruncate == null) {\r\n return '';\r\n }\r\n if (limit == 0 || wordToTruncate.length < limit + 1) {\r\n return wordToTruncate;\r\n } else if (forcedCut) {\r\n return `${wordToTruncate.slice(0, limit)}`;\r\n } else if (wordToTruncate.length > limit + 1) {\r\n return `${wordToTruncate.slice(0, limit - 5)}. . .`;\r\n }\r\n};\r\n\r\nconst createPDFProper = (data) => {\r\n const { interviewDate, candidates, department, departmentLogo } = data;\r\n const { metaData, MomentDateOfInterview } = interviewDate;\r\n const { TimeZone } = department;\r\n\r\n let dateToDisplay = '';\r\n let labelToDisplay = '';\r\n\r\n if (metaData) {\r\n const { DateOfInterview, StartTime, Label } = metaData;\r\n dateToDisplay = moment(`${DateOfInterview} ${StartTime}`).format('MMM DD, YYYY');\r\n labelToDisplay = Label;\r\n } else if (MomentDateOfInterview) {\r\n labelToDisplay = 'Ayy yooo';\r\n dateToDisplay = MomentDateOfInterview.format('MMM DD, YYYY');\r\n }\r\n\r\n const rows = [];\r\n let counter = 0;\r\n\r\n const renderCard = (candidate, counter) => {\r\n const { userPhotoBase64 } = candidate;\r\n const cardRows = [];\r\n const userDetailRows = [];\r\n\r\n const userPhoto = userPhotoBase64\r\n ? {\r\n width: 100,\r\n columns: [\r\n {\r\n image: userPhotoBase64 ? `data:image/png;base64,${userPhotoBase64}` : null,\r\n width: 80,\r\n },\r\n ],\r\n margin: [10, 0, 10, 0],\r\n }\r\n : {\r\n width: 100,\r\n columns: [\r\n {\r\n image: profilePlaceholderBase64 ? `data:image/png;base64,${profilePlaceholderBase64}` : null,\r\n width: 80,\r\n },\r\n ],\r\n margin: [10, 0, 10, 0],\r\n };\r\n\r\n userDetailRows.push([\r\n {\r\n style: { alignment: 'left', bold: true },\r\n text: `${candidate.LastName}, ${candidate.FirstName} `,\r\n fontSize: 14,\r\n margin: [0, 0, 0, 10],\r\n },\r\n ]);\r\n\r\n userDetailRows.push([\r\n {\r\n style: { alignment: 'left' },\r\n text: `${candidate.CandidateSubHeading ? candidate.CandidateSubHeading : ' '}`,\r\n\r\n margin: [0, 0, 0, 0],\r\n },\r\n ]);\r\n\r\n userDetailRows.push([\r\n {\r\n style: { alignment: 'left' },\r\n text: `${candidate.Email ? candidate.Email : ' '}`,\r\n\r\n margin: [0, 0, 0, 0],\r\n },\r\n ]);\r\n\r\n userDetailRows.push([\r\n {\r\n style: { alignment: 'left' },\r\n text: `${candidate.PreferredPhone ? candidate.PreferredPhone : ''}${\r\n candidate.PreferredPhone && candidate.PhoneNumber ? ' | ' : ''\r\n } ${candidate.PhoneNumber ? candidate.PhoneNumber : ''}${\r\n candidate.PhoneNumber && candidate.CellPhone ? ' | ' : ''\r\n }${candidate.CellPhone ? candidate.CellPhone : ''}`,\r\n // fontSize: 12,\r\n margin: [0, 0, 0, 0],\r\n },\r\n ]);\r\n\r\n cardRows.push({\r\n columns: [userPhoto, userDetailRows],\r\n margin: [0, 20, 0, 5],\r\n });\r\n\r\n return cardRows;\r\n };\r\n\r\n while (counter < candidates.length) {\r\n const columns = [];\r\n const tableRow = [];\r\n\r\n columns.push({ width: 3.95 * 72, columns: [renderCard(candidates[counter], counter)] });\r\n tableRow.push(renderCard(candidates[counter], counter));\r\n counter++;\r\n if (counter < candidates.length) {\r\n columns.push({ width: 3.95 * 72, columns: [renderCard(candidates[counter], counter)] });\r\n tableRow.push(renderCard(candidates[counter], counter));\r\n } else {\r\n tableRow.push({ text: '' });\r\n }\r\n\r\n rows.push(tableRow);\r\n counter++;\r\n }\r\n if (rows.length <= 0) {\r\n Swal.fire('Error', 'There are no Candidates for this Interview Date. There is nothing to print!', 'error');\r\n return;\r\n }\r\n let pdfObject = [\r\n {\r\n table: { heights: 1.5 * 72, widths: [3.95 * 72, 3.95 * 72], body: rows, dontBreakRows: true },\r\n layout: 'customTable',\r\n },\r\n ];\r\n // imageToBase64(bgGuide)\r\n // .then((bgBase64) => {\r\n const docDefinition = {\r\n // background: { image: `data:image/png;base64,${bgBase64}`, width: 612 },\r\n info: { title: 'Candidate Face Sheet' },\r\n pageSize: 'LETTER',\r\n pageOrientation: 'portrait',\r\n content: pdfObject,\r\n defaultStyle: {\r\n fontSize: 10,\r\n },\r\n pageMargins: [0.25 * 72, 1.25 * 72, 0.25 * 72, 0.5 * 72],\r\n header: function(currentPage, pageCount, pageSize) {\r\n return [\r\n {\r\n text: `${dateToDisplay} ${labelToDisplay ? `(${labelToDisplay})` : ''}`,\r\n alignment: 'bottom',\r\n style: { bold: true },\r\n fontSize: 15,\r\n margin: [0.4 * 72, 50, 0, 0],\r\n },\r\n ];\r\n },\r\n };\r\n\r\n pdfMake.createPdf(docDefinition, tableLayouts).open({}, window.open('', '_blank'));\r\n // })\r\n // .catch((err) => {\r\n // });\r\n};\r\n\r\nexport const createPDFForCandidateFaces = ({ interviewDate, department, candidates = [], callback }) => {\r\n const candidatesCopy = clone(\r\n candidates.sort((a, b) => {\r\n const textA = `${a.LastName}, ${a.FirstName}`.toUpperCase();\r\n const textB = `${b.LastName}, ${b.FirstName}`.toUpperCase();\r\n\r\n return textA < textB ? -1 : textA > textB ? 1 : 0;\r\n }),\r\n );\r\n Promise.all([\r\n ...candidatesCopy.map((c) => {\r\n if (c.pk_Candidate == 6275) {\r\n console.log('c: ', c);\r\n }\r\n return new Promise((resolve, reject) => {\r\n if (c.PhotoUrl) {\r\n imageToBase64(c.PhotoUrl)\r\n .then((base64Img) => {\r\n if (c.pk_Candidate == 6275) {\r\n console.log('base64: ', base64Img);\r\n }\r\n c.userPhotoBase64 = base64Img;\r\n resolve(c);\r\n })\r\n .catch((err) => {\r\n console.log('err: ', err);\r\n resolve({ error: true, ...c });\r\n });\r\n } else {\r\n resolve(c);\r\n }\r\n });\r\n }),\r\n new Promise((resolve, reject) => {\r\n imageToBase64(profilePlaceholder)\r\n .then((base64) => {\r\n profilePlaceholderBase64 = base64;\r\n resolve(base64);\r\n })\r\n .catch((err) => {\r\n reject(err);\r\n });\r\n }),\r\n ])\r\n .then((res) => {\r\n createPDFProper({ candidates: candidatesCopy, department, interviewDate });\r\n if (callback) {\r\n callback();\r\n }\r\n })\r\n .catch((err) => {\r\n if (callback) {\r\n callback(err);\r\n }\r\n });\r\n};\r\n","import pdfMake from 'pdfmake/build/pdfmake';\r\nimport pdfFonts from 'pdfmake/build/vfs_fonts';\r\nimport imageToBase64 from 'image-to-base64';\r\n\r\nimport moment from 'moment-timezone';\r\nimport tinycolor from 'tinycolor2';\r\nimport { clone } from '../../schedule';\r\nimport Swal from 'sweetalert2';\r\nimport { determineEvent } from '../../../Common.functions';\r\nimport rezRateLogo from '../rezRateLogo.png';\r\n\r\nlet rezRateLogoBase64 = null;\r\npdfMake.vfs = pdfFonts.pdfMake.vfs;\r\n\r\n// 1 inch = 72 units.\r\n// LETTER size is 612x792\r\n\r\nconst tableLayouts = {\r\n customTable: {\r\n hLineWidth: (i, node) => {\r\n return 0;\r\n },\r\n vLineWidth: (i) => {\r\n return 0;\r\n },\r\n hLineColor: (i) => {\r\n return i === 1 ? 'black' : '#aaa';\r\n },\r\n paddingLeft: (i) => {\r\n return 0;\r\n },\r\n paddingRight: (i, node) => {\r\n return 0;\r\n },\r\n paddingTop: (i, node) => {\r\n return 0;\r\n },\r\n paddingBottom: (i, node) => {\r\n return 0;\r\n },\r\n fillColor: function(rowIndex, node, columnIndex) {\r\n return rowIndex % 2 === 0 ? '#CCCCCC' : 'white'; // Alternating row colors\r\n },\r\n },\r\n headerTable: {\r\n hLineWidth: (i, node) => {\r\n return 1;\r\n },\r\n vLineWidth: (i) => {\r\n return 0;\r\n },\r\n hLineColor: (i) => {\r\n return '#aaa';\r\n },\r\n paddingLeft: (i) => {\r\n return 10;\r\n },\r\n paddingRight: (i, node) => {\r\n return 10;\r\n },\r\n paddingTop: (i, node) => {\r\n return 10;\r\n },\r\n paddingBottom: (i, node) => {\r\n return 10;\r\n },\r\n },\r\n};\r\n\r\nconst createPDFProper = (data) => {\r\n const { interviewDate, department, departmentLogo, evaluators } = data;\r\n const { metaData, MomentDateOfInterview } = interviewDate;\r\n const { TimeZone } = department;\r\n const rows = [];\r\n let dateToDisplay = '';\r\n if (metaData) {\r\n const { DateOfInterview, StartTime } = metaData;\r\n dateToDisplay = moment.tz(`${DateOfInterview} ${StartTime}`, null).format('MMM DD, YYYY');\r\n } else if (MomentDateOfInterview) {\r\n dateToDisplay = MomentDateOfInterview.format('MMM DD, YYYY');\r\n }\r\n\r\n const renderCard = (evaluator, i) => {\r\n const cardRows = [];\r\n const timeSlotRows = [];\r\n evaluator.body.forEach((slot) => {\r\n if (slot.isPassingPeriod) {\r\n return;\r\n }\r\n\r\n timeSlotRows.push([\r\n {\r\n text: moment.tz(slot.StartTime, TimeZone).format('hh:mm A'),\r\n margin: [15, 2, 0, 2],\r\n style: { bold: true, alignment: 'right' },\r\n fontSize: 12,\r\n },\r\n\r\n {\r\n columns: [[determineEvent(slot)]],\r\n },\r\n ]);\r\n });\r\n\r\n cardRows.push({\r\n table: {\r\n widths: [45, '*', '*'],\r\n body: [\r\n [\r\n {\r\n image: departmentLogo\r\n ? `data:image/png;base64,${departmentLogo}`\r\n : `data:image/png;base64,${rezRateLogoBase64}`,\r\n fit: [40, 40],\r\n fillColor: '#E5E5E5',\r\n },\r\n {\r\n text: `${evaluator.metaData.UserFirst} ${evaluator.metaData.UserLast}`,\r\n style: { alignment: 'left', bold: true },\r\n margin: [0, 10, 0, 0],\r\n fillColor: '#E5E5E5',\r\n },\r\n {\r\n text: `${dateToDisplay}`,\r\n style: { alignment: 'right', bold: true },\r\n margin: [0, 10, 0, 0],\r\n fillColor: '#E5E5E5',\r\n },\r\n ],\r\n ],\r\n },\r\n layout: 'headerTable',\r\n pageBreak: i > 0 && timeSlotRows.length <= 0 ? 'before' : null,\r\n margin: [0, 0, 0, 20],\r\n });\r\n\r\n if (timeSlotRows.length > 0) {\r\n cardRows.push({\r\n table: {\r\n widths: [140, '*'],\r\n body: timeSlotRows,\r\n },\r\n pageBreak: i < evaluators.length - 1 ? 'after' : null,\r\n layout: 'customTable',\r\n });\r\n }\r\n\r\n return cardRows;\r\n };\r\n\r\n evaluators.forEach((c, i) => {\r\n rows.push(renderCard(c, i));\r\n });\r\n\r\n if (rows.length <= 0) {\r\n Swal.fire(\r\n 'Error',\r\n 'There are no Schedules for any Evaluator on this Interview Date. There is nothing to print!',\r\n 'error',\r\n );\r\n return;\r\n }\r\n let pdfObject = rows;\r\n\r\n // imageToBase64(bgGuide)\r\n // .then((bgBase64) => {\r\n const docDefinition = {\r\n // background: { image: `data:image/png;base64,${bgBase64}`, width: 612 },\r\n info: { title: `Evaluator Schedule ${dateToDisplay}` },\r\n pageSize: 'LETTER',\r\n pageOrientation: 'portrait',\r\n content: pdfObject,\r\n defaultStyle: {\r\n fontSize: 15,\r\n },\r\n pageMargins: [0.25 * 72, 0.5 * 72, 0.25 * 72, 72],\r\n };\r\n\r\n pdfMake.createPdf(docDefinition, tableLayouts).open({}, window.open('', '_blank'));\r\n // })\r\n // .catch((err) => {\r\n // });\r\n};\r\n\r\nexport const createPDFForEvaluatorSchedule = ({ interviewDate, department, evaluators = [], callback }) => {\r\n const startProper = () => {\r\n if (department.DepartmentLogo) {\r\n imageToBase64(department.DepartmentLogo)\r\n .then((res) => {\r\n if (callback) {\r\n callback();\r\n }\r\n createPDFProper({ evaluators, department, departmentLogo: res, interviewDate });\r\n })\r\n .catch((err) => {\r\n if (callback) {\r\n callback();\r\n }\r\n createPDFProper({ evaluators, department, interviewDate });\r\n });\r\n } else {\r\n if (callback) {\r\n callback();\r\n }\r\n createPDFProper({ interviewDate, departmentLogo: rezRateLogoBase64, evaluators, department });\r\n }\r\n };\r\n imageToBase64(rezRateLogo)\r\n .then((res) => {\r\n rezRateLogoBase64 = res;\r\n startProper();\r\n })\r\n .catch(() => {\r\n startProper();\r\n });\r\n};\r\n","import pdfMake from 'pdfmake/build/pdfmake';\r\nimport pdfFonts from 'pdfmake/build/vfs_fonts';\r\nimport imageToBase64 from 'image-to-base64';\r\n\r\nimport moment from 'moment-timezone';\r\nimport tinycolor from 'tinycolor2';\r\nimport { clone } from '../../schedule';\r\nimport { determineEvent } from '../../../Common.functions';\r\nimport rezRateLogo from '../rezRateLogo.png';\r\n\r\nlet rezRateLogoBase64 = null;\r\n\r\npdfMake.vfs = pdfFonts.pdfMake.vfs;\r\n\r\n// 1 inch = 72 units.\r\n// LETTER size is 612x792\r\n\r\nconst tableLayouts = {\r\n customTable: {\r\n hLineWidth: (i, node) => {\r\n return 0;\r\n },\r\n vLineWidth: (i) => {\r\n return 0;\r\n },\r\n hLineColor: (i) => {\r\n return i === 1 ? 'red' : '#aaa';\r\n },\r\n paddingLeft: (i) => {\r\n return 0;\r\n },\r\n paddingRight: (i, node) => {\r\n return 0;\r\n },\r\n paddingTop: (i, node) => {\r\n return 0;\r\n },\r\n paddingBottom: (i, node) => {\r\n return 0;\r\n },\r\n fillColor: function(rowIndex, node, columnIndex) {\r\n return rowIndex % 2 === 0 ? '#CCCCCC' : 'white'; // Alternating row colors\r\n },\r\n },\r\n headerTable: {\r\n hLineWidth: (i, node) => {\r\n return 1;\r\n },\r\n vLineWidth: (i) => {\r\n return 0;\r\n },\r\n hLineColor: (i) => {\r\n return '#aaa';\r\n },\r\n paddingLeft: (i) => {\r\n return 10;\r\n },\r\n paddingRight: (i, node) => {\r\n return 10;\r\n },\r\n paddingTop: (i, node) => {\r\n return 10;\r\n },\r\n paddingBottom: (i, node) => {\r\n return 10;\r\n },\r\n fillColor: function(rowIndex, node, columnIndex) {\r\n return '#CCCCCC';\r\n },\r\n },\r\n};\r\n\r\nconst truncate = (wordToTruncate, limit = 0, forcedCut) => {\r\n if (wordToTruncate == null) {\r\n return '';\r\n }\r\n if (limit == 0 || wordToTruncate.length < limit + 1) {\r\n return wordToTruncate;\r\n } else if (forcedCut) {\r\n return `${wordToTruncate.slice(0, limit)}`;\r\n } else if (wordToTruncate.length > limit + 1) {\r\n return `${wordToTruncate.slice(0, limit - 5)}. . .`;\r\n }\r\n};\r\n\r\nconst createPDFProper = (data) => {\r\n const { interviewDate, department, departmentLogo, candidates } = data;\r\n const { metaData, MomentDateOfInterview } = interviewDate;\r\n const { TimeZone, OrganizationName, DepartmentName } = department;\r\n\r\n const rows = [];\r\n let dateToDisplay = '';\r\n if (metaData) {\r\n const { DateOfInterview, StartTime } = metaData;\r\n dateToDisplay = moment.tz(`${DateOfInterview} ${StartTime}`, null).format('MMM DD, YYYY');\r\n } else if (MomentDateOfInterview) {\r\n dateToDisplay = MomentDateOfInterview.format('MMM DD, YYYY');\r\n }\r\n\r\n const renderCard = (candidate) => {\r\n const cardRows = [];\r\n const timeSlotRows = [];\r\n const { interviewDateMeta } = candidate;\r\n const { FirstName, LastName } = interviewDateMeta;\r\n candidate.schedule.forEach((slot) => {\r\n const { StartTime, EndTime, isPassingPeriod, Users = [] } = slot;\r\n let roomLabel = '';\r\n if (Users.length > 0) {\r\n roomLabel = Users[0].RoomLabel || '';\r\n } else {\r\n roomLabel = slot.RoomLabel || '';\r\n }\r\n if (isPassingPeriod) {\r\n return;\r\n }\r\n\r\n timeSlotRows.push([\r\n {\r\n text: StartTime ? moment.tz(StartTime, TimeZone).format('hh:mm A') : moment().format('hh:mm A'),\r\n margin: [15, 2, 0, 2],\r\n style: { bold: true, alignment: 'right' },\r\n fontSize: 12,\r\n },\r\n {\r\n columns: [[determineEvent(slot)]],\r\n },\r\n {\r\n columns: [\r\n [\r\n {\r\n text: roomLabel,\r\n style: { alignment: 'left' },\r\n margin: [15, 2, 0, 2],\r\n fontSize: 12,\r\n },\r\n ],\r\n ],\r\n },\r\n ]);\r\n });\r\n\r\n cardRows.push({\r\n table: {\r\n widths: [45, '*', '*'],\r\n body: [\r\n [\r\n [\r\n {\r\n image: departmentLogo\r\n ? `data:image/png;base64,${departmentLogo}`\r\n : `data:image/png;base64,${rezRateLogoBase64}`,\r\n fit: [50, 50],\r\n },\r\n ],\r\n [\r\n {\r\n text: `${FirstName} ${LastName}`,\r\n style: { alignment: 'left', bold: true },\r\n margin: [0, 2, 0, 0],\r\n fillColor: '#CCCCCC',\r\n },\r\n {\r\n text: `${OrganizationName || ''}`,\r\n style: { alignment: 'left', bold: false },\r\n fontSize: 10,\r\n margin: [0, 2, 0, 0],\r\n // fillColor: '#CCCCCC',\r\n },\r\n {\r\n text: `${DepartmentName || ''}`,\r\n style: { alignment: 'left', bold: false },\r\n fontSize: 10,\r\n margin: [0, 2, 0, 0],\r\n // fillColor: '#CCCCCC',\r\n },\r\n ],\r\n [\r\n {\r\n text: `${dateToDisplay}`,\r\n style: { alignment: 'right', bold: true },\r\n margin: [0, 10, 0, 0],\r\n fillColor: '#CCCCCC',\r\n },\r\n ],\r\n ],\r\n ],\r\n },\r\n layout: 'headerTable',\r\n margin: [0, 0, 0, 20],\r\n });\r\n\r\n cardRows.push({\r\n table: {\r\n widths: [140, 150, '*'],\r\n body: timeSlotRows,\r\n },\r\n\r\n pageBreak: 'after',\r\n layout: 'customTable',\r\n });\r\n\r\n return cardRows;\r\n };\r\n\r\n candidates.forEach((c) => {\r\n rows.push(renderCard(c));\r\n });\r\n\r\n let pdfObject = rows;\r\n\r\n // imageToBase64(bgGuide)\r\n // .then((bgBase64) => {\r\n const docDefinition = {\r\n // background: { image: `data:image/png;base64,${bgBase64}`, width: 612 },\r\n info: { title: `Candidate Schedule ${dateToDisplay}` },\r\n pageSize: 'LETTER',\r\n pageOrientation: 'portrait',\r\n content: pdfObject,\r\n defaultStyle: {\r\n fontSize: 15,\r\n },\r\n pageMargins: [0.25 * 72, 0.5 * 72, 0.25 * 72, 72],\r\n };\r\n\r\n pdfMake.createPdf(docDefinition, tableLayouts).open({}, window.open('', '_blank'));\r\n // })\r\n // .catch((err) => {\r\n\r\n // });\r\n};\r\n\r\nexport const createPDFForCandidateSchedule = ({ interviewDate, department, candidates = [], callback }) => {\r\n const startProper = () => {\r\n const candidatesCopy = clone(candidates);\r\n if (department.DepartmentLogo) {\r\n imageToBase64(department.DepartmentLogo)\r\n .then((res) => {\r\n if (callback) {\r\n callback();\r\n }\r\n createPDFProper({ candidates: candidatesCopy, department, departmentLogo: res, interviewDate });\r\n })\r\n .catch((err) => {\r\n if (callback) {\r\n callback();\r\n }\r\n createPDFProper({ candidates: candidatesCopy, department, interviewDate });\r\n });\r\n } else {\r\n if (callback) {\r\n callback();\r\n }\r\n createPDFProper({ interviewDate, candidates: candidatesCopy, department });\r\n }\r\n };\r\n\r\n imageToBase64(rezRateLogo)\r\n .then((res) => {\r\n rezRateLogoBase64 = res;\r\n startProper();\r\n })\r\n .catch(() => {\r\n startProper();\r\n });\r\n};\r\n","import pdfMake from 'pdfmake/build/pdfmake';\r\nimport pdfFonts from 'pdfmake/build/vfs_fonts';\r\nimport imageToBase64 from 'image-to-base64';\r\n\r\nimport moment from 'moment';\r\nimport tinycolor from 'tinycolor2';\r\nimport { clone } from '../../schedule';\r\nimport Swal from 'sweetalert2';\r\nimport profilePlaceholder from './Portrait_Placeholder.png';\r\n\r\nconst bgGuide = require('./AVERY_5390.png');\r\nlet profilePlaceholderBase64 = null;\r\n\r\npdfMake.vfs = pdfFonts.pdfMake.vfs;\r\n\r\n// 1 inch = 72 units.\r\n// LETTER size is 612x792\r\n\r\nconst tableLayouts = {\r\n customTable: {\r\n hLineWidth: (i, node) => {\r\n return 1;\r\n // return 0;\r\n // if (i === 0 || i === node.table.body.length) {\r\n // return 0;\r\n // }\r\n return i === node.table.headerRows ? 2 : 1;\r\n },\r\n vLineWidth: (i) => {\r\n return 0;\r\n },\r\n hLineColor: (i) => {\r\n return '#aaa';\r\n return i === 1 ? 'black' : '#aaa';\r\n },\r\n paddingLeft: (i) => {\r\n return 0;\r\n },\r\n paddingRight: (i, node) => {\r\n return 0;\r\n },\r\n paddingTop: (i, node) => {\r\n return 0;\r\n },\r\n paddingBottom: (i, node) => {\r\n return 0;\r\n },\r\n },\r\n linelessTable: {\r\n hLineWidth: (i, node) => {\r\n return 0;\r\n // if (i === 0 || i === node.table.body.length) {\r\n // return 0;\r\n // }\r\n return i === node.table.headerRows ? 2 : 1;\r\n },\r\n vLineWidth: (i) => {\r\n return 0;\r\n },\r\n hLineColor: (i) => {\r\n return '#aaa';\r\n return i === 1 ? 'black' : '#aaa';\r\n },\r\n paddingLeft: (i) => {\r\n return 0;\r\n },\r\n paddingRight: (i, node) => {\r\n return 0;\r\n },\r\n paddingTop: (i, node) => {\r\n return 0;\r\n },\r\n paddingBottom: (i, node) => {\r\n return 0;\r\n },\r\n },\r\n\r\n headerLineOnly: {\r\n hLineWidth: (i, node) => {\r\n if (i > 0) {\r\n return 0.2;\r\n } else {\r\n return 0;\r\n }\r\n\r\n // if (i > 0 && i < node.table.body.length) {\r\n // return 1;\r\n // } else {\r\n // return 0;\r\n // }\r\n // return i === node.table.headerRows ? 2 : 1;\r\n },\r\n vLineWidth: (i) => {\r\n return 0;\r\n },\r\n hLineColor: (i) => {\r\n return '#aaa';\r\n return i === 1 ? 'black' : '#aaa';\r\n },\r\n paddingLeft: (i) => {\r\n return 0;\r\n },\r\n paddingRight: (i, node) => {\r\n return 0;\r\n },\r\n paddingTop: (i, node) => {\r\n return 0;\r\n },\r\n paddingBottom: (i, node) => {\r\n return 0;\r\n },\r\n },\r\n};\r\n\r\nconst forbiddenFields = ['FirstName', 'LastName', 'Email', 'MiddleName'];\r\n\r\nconst truncate = (wordToTruncate, limit = 0, forcedCut) => {\r\n if (wordToTruncate == null) {\r\n return '';\r\n }\r\n if (limit == 0 || wordToTruncate.length < limit + 1) {\r\n return wordToTruncate;\r\n } else if (forcedCut) {\r\n return `${wordToTruncate.slice(0, limit)}`;\r\n } else if (wordToTruncate.length > limit + 1) {\r\n return `${wordToTruncate.slice(0, limit - 5)}. . .`;\r\n }\r\n};\r\n\r\nconst renderLines = (lineCount, minimumCount = 0) => {\r\n let counter = 0;\r\n const lines = [];\r\n const lineCountActual = lineCount < minimumCount ? minimumCount : lineCount;\r\n\r\n while (counter < lineCountActual) {\r\n // lines.push([\r\n // {\r\n // canvas: [{ type: 'line', x1: 0, y1: 0, x2: 540.2, y2: 0, lineWidth: 1, color: 'black' }],\r\n // margin: [10, 25, 0, 0],\r\n // pageBreak: counter >= lineCountActual - 1 ? 'after' : null,\r\n // },\r\n // ]);\r\n lines.push([\r\n {\r\n table: {\r\n headerRows: 0,\r\n widths: [560],\r\n heights: [25],\r\n body: [[{ text: '' }]],\r\n },\r\n pageBreak: counter >= lineCountActual - 1 ? 'after' : null,\r\n margin: [10, 0, 0, 0],\r\n layout: 'headerLineOnly',\r\n },\r\n ]);\r\n counter++;\r\n }\r\n\r\n return lines;\r\n // return [\r\n // {\r\n // table: {\r\n // headerRows: 0,\r\n // widths: ['100%'],\r\n // body: [['']],\r\n // },\r\n // layout: 'headerLineOnly',\r\n // },\r\n // ];\r\n};\r\nconst createPDFProper = (data) => {\r\n const { interviewDate, candidates, department, departmentLogo, activeFields } = data;\r\n const { metaData, MomentDateOfInterview } = interviewDate;\r\n const { TimeZone } = department;\r\n let dateToDisplay = '';\r\n let labelToDisplay = '';\r\n\r\n if (metaData) {\r\n const { DateOfInterview, StartTime, Label } = metaData;\r\n dateToDisplay = moment(`${DateOfInterview} ${StartTime}`).format('MMM DD, YYYY');\r\n labelToDisplay = Label;\r\n } else if (MomentDateOfInterview) {\r\n labelToDisplay = 'Ayy yooo';\r\n dateToDisplay = MomentDateOfInterview.format('MMM DD, YYYY');\r\n }\r\n\r\n const rows = [];\r\n\r\n let counter = 0;\r\n\r\n const renderCard = (candidate, counter) => {\r\n const { userPhotoBase64 } = candidate;\r\n const cardRows = [];\r\n const userDetailRows = [];\r\n const fieldRows = [];\r\n\r\n const userPhoto = userPhotoBase64\r\n ? {\r\n columns: [\r\n {\r\n image: userPhotoBase64 ? `data:image/png;base64,${userPhotoBase64}` : null,\r\n fit: [200, 200],\r\n },\r\n ],\r\n margin: [0, 0, 0, 10],\r\n }\r\n : {\r\n columns: [\r\n {\r\n image: profilePlaceholderBase64 ? `data:image/png;base64,${profilePlaceholderBase64}` : null,\r\n fit: [200, 200],\r\n },\r\n ],\r\n margin: [0, 0, 0, 10],\r\n };\r\n\r\n userDetailRows.push([userPhoto]);\r\n\r\n activeFields.forEach((df, i) => {\r\n if (\r\n !df.DisplayToEvaluator ||\r\n fieldRows.length >= 20 ||\r\n forbiddenFields.includes(df.Alias) ||\r\n forbiddenFields.includes(df.Name)\r\n ) {\r\n return;\r\n }\r\n fieldRows.push([\r\n {\r\n width: 360,\r\n columns: [\r\n {\r\n text: `${df.Alias || df.Name}`,\r\n fontSize: 10,\r\n style: { bold: true },\r\n width: 150,\r\n margin: [0, 0, 10, 0],\r\n },\r\n {\r\n text: `${candidate[df.Name] || '-'}`,\r\n fontSize: 10,\r\n width: 200,\r\n },\r\n ],\r\n fillColor: fieldRows.length % 2 == 0 ? '#e8e8e8' : null,\r\n },\r\n ]);\r\n });\r\n\r\n // if (fieldRows.length <= 0) {\r\n // fieldRows.push([\r\n // {\r\n // width: 360,\r\n // columns: [\r\n // {\r\n // text: `No Data`,\r\n // fontSize: 10,\r\n // style: { bold: true },\r\n // width: 350,\r\n // margin: [0, 0, 10, 0],\r\n // alignment: 'center',\r\n // },\r\n // ],\r\n // fillColor: fieldRows.length % 2 == 0 ? '#e8e8e8' : null,\r\n // },\r\n // ]);\r\n // }\r\n\r\n const fieldsTable = {\r\n table: { heights: 12, widths: [5.0 * 72], body: fieldRows, dontBreakRows: true },\r\n margin: [0, 5, 0, 0],\r\n layout: 'customTable',\r\n };\r\n\r\n cardRows.push([\r\n {\r\n columns: [\r\n { columns: [userDetailRows], width: 210, margin: [0, 0, 10, 0] },\r\n [\r\n [\r\n {\r\n style: { alignment: 'left', bold: true },\r\n text: `${candidate.LastName}, ${candidate.FirstName} ${\r\n candidate.MiddleName ? candidate.MiddleName : ''\r\n }`,\r\n fontSize: 14,\r\n margin: [0, 0, 0, 5],\r\n width: 5.0 * 72,\r\n },\r\n ],\r\n [\r\n {\r\n style: { alignment: 'left' },\r\n text: `${candidate.CandidateSubHeading ? candidate.CandidateSubHeading : ' '}`,\r\n width: 5.0 * 72,\r\n margin: [0, 0, 0, 0],\r\n },\r\n ],\r\n [\r\n {\r\n style: { alignment: 'left' },\r\n text: `${candidate.Email ? candidate.Email : ' '}`,\r\n width: 5.0 * 72,\r\n margin: [0, 0, 0, 0],\r\n },\r\n ],\r\n [\r\n {\r\n style: { alignment: 'left' },\r\n text: `${candidate.PhoneNumber ? candidate.PhoneNumber : ' '}`,\r\n // fontSize: 12,\r\n margin: [0, 0, 0, 0],\r\n width: 5.0 * 72,\r\n },\r\n ],\r\n [fieldRows.length > 0 ? fieldsTable : { text: '' }],\r\n ],\r\n ],\r\n margin: [10, 0, 0, 5],\r\n },\r\n ]);\r\n\r\n cardRows.push([\r\n [\r\n {\r\n style: { alignment: 'left', bold: true },\r\n text: `Notes ${fieldRows.length > 35 ? `(${candidate.LastName}, ${candidate.FirstName})` : ''}`,\r\n // fontSize: 12,\r\n margin: [10, 10, 0, 0],\r\n pageBreak: fieldRows.length > 35 ? 'before' : null,\r\n },\r\n ],\r\n ...renderLines(7 + (12 - fieldRows.length / 2), 4),\r\n // renderLines(8 + (12 - fieldRows.length / 2), 4),\r\n ]);\r\n\r\n // return cardRows;\r\n // return [cardRows];\r\n return [\r\n {\r\n table: { body: [[cardRows]], dontBreakRows: activeFields.length <= 35 },\r\n layout: 'linelessTable',\r\n },\r\n ];\r\n };\r\n\r\n while (counter < candidates.length) {\r\n const columns = [];\r\n const tableRow = [];\r\n rows.push(renderCard(candidates[counter], counter));\r\n\r\n counter++;\r\n }\r\n\r\n if (rows.length <= 0) {\r\n Swal.fire('Error', 'There are no Candidates for this Interview Date. There is nothing to print!', 'error');\r\n return;\r\n }\r\n\r\n // let pdfObject = [rows];\r\n let pdfObject = [\r\n {\r\n table: { body: rows, dontBreakRows: false },\r\n layout: 'linelessTable',\r\n },\r\n ];\r\n // imageToBase64(bgGuide)\r\n // .then((bgBase64) => {\r\n const docDefinition = {\r\n // background: { image: `data:image/png;base64,${bgBase64}`, width: 612 },\r\n info: { title: 'Candidate Face Sheet w/ Notes' },\r\n pageSize: 'LETTER',\r\n pageOrientation: 'portrait',\r\n content: pdfObject,\r\n defaultStyle: {\r\n fontSize: 10,\r\n },\r\n pageMargins: [0.25 * 72, 1 * 72, 0.25 * 72, 0.5 * 72],\r\n header: function(currentPage, pageCount, pageSize) {\r\n return [\r\n {\r\n text: `${dateToDisplay} ${labelToDisplay ? `(${labelToDisplay})` : ''}`,\r\n alignment: 'bottom',\r\n style: { bold: true },\r\n fontSize: 15,\r\n margin: [0.4 * 72, 30, 0, 0],\r\n },\r\n ];\r\n },\r\n };\r\n\r\n pdfMake.createPdf(docDefinition, tableLayouts).open({}, window.open('', '_blank'));\r\n // })\r\n // .catch((err) => {\r\n // });\r\n};\r\n\r\n// Alias: \"Alternate Phone\"\r\n// Enabled:\r\n// Name: \"AlternatePhone\"\r\n// Type: 2\r\n\r\n/**\r\n * 1 = String\r\n * 2 = Number\r\n * 3 = Bool, Yes or No\r\n * 4 = DateTime\r\n * 5 = Phone\r\n * 6 = Street Address\r\n */\r\nconst dummyFields = [];\r\n\r\nexport const createPDFForCandidateFacesWithNotes = ({\r\n interviewDate,\r\n department,\r\n candidates = [],\r\n activeFields = [],\r\n callback,\r\n}) => {\r\n const candidatesCopy = clone(\r\n candidates.sort((a, b) => {\r\n const textA = `${a.LastName}, ${a.FirstName}`.toUpperCase();\r\n const textB = `${b.LastName}, ${b.FirstName}`.toUpperCase();\r\n\r\n return textA < textB ? -1 : textA > textB ? 1 : 0;\r\n }),\r\n );\r\n Promise.all([\r\n ...candidatesCopy.map((c) => {\r\n return new Promise((resolve, reject) => {\r\n if (c.PhotoUrl) {\r\n imageToBase64(c.PhotoUrl)\r\n .then((base64Img) => {\r\n c.userPhotoBase64 = base64Img;\r\n resolve(c);\r\n })\r\n .catch((err) => {\r\n resolve({ error: true, ...c });\r\n });\r\n } else {\r\n resolve(c);\r\n }\r\n });\r\n }),\r\n new Promise((resolve, reject) => {\r\n imageToBase64(profilePlaceholder)\r\n .then((base64) => {\r\n profilePlaceholderBase64 = base64;\r\n resolve(base64);\r\n })\r\n .catch((err) => {\r\n reject(err);\r\n });\r\n }),\r\n ])\r\n .then((res) => {\r\n createPDFProper({ candidates: candidatesCopy, department, interviewDate, activeFields });\r\n if (callback) {\r\n callback();\r\n }\r\n })\r\n .catch((err) => {\r\n if (callback) {\r\n callback(err);\r\n }\r\n });\r\n};\r\n","import pdfMake from 'pdfmake/build/pdfmake';\r\nimport pdfFonts from 'pdfmake/build/vfs_fonts';\r\nimport imageToBase64 from 'image-to-base64';\r\n\r\nimport moment from 'moment-timezone';\r\nimport tinycolor from 'tinycolor2';\r\nimport { clone, getAvailableCandidatesForRow } from '../../schedule';\r\nimport Swal from 'sweetalert2';\r\nimport profilePlaceholder from '../CandidateBadges/Portrait_Placeholder.png';\r\nimport rezRateLogo from '../rezRateLogo.png';\r\n\r\nlet rezRateLogoBase64 = null;\r\n// const bgGuide = require('./AVERY_5390.png');\r\nlet profilePlaceholderBase64 = null;\r\n\r\npdfMake.vfs = pdfFonts.pdfMake.vfs;\r\n\r\n// 1 inch = 72 units.\r\n// LETTER size is 612x792\r\n\r\nconst tableLayouts = {\r\n customTable: {\r\n hLineWidth: (i, node) => {\r\n return 1;\r\n // if (i === 0 || i === node.table.body.length) {\r\n // return 0;\r\n // }\r\n // return i === node.table.headerRows ? 2 : 1;\r\n },\r\n vLineWidth: (i) => {\r\n return 1;\r\n },\r\n hLineColor: (i) => {\r\n return i === 1 ? 'black' : '#aaa';\r\n },\r\n paddingLeft: (i) => {\r\n return 0;\r\n },\r\n paddingRight: (i, node) => {\r\n return 0;\r\n },\r\n paddingTop: (i, node) => {\r\n return 0;\r\n },\r\n paddingBottom: (i, node) => {\r\n return 0;\r\n },\r\n },\r\n};\r\n\r\nconst createPDFProper2 = (data) => {\r\n const { interviewDate, candidates, department, departmentLogo, scheduleData, rowTracker, columnTracker } = data;\r\n const { body = [], headers = [], metaData = {} } = scheduleData;\r\n\r\n const candidateKeys = candidates.map((c) => {\r\n return c.pk_Candidate;\r\n });\r\n\r\n const columnsToFill = headers.map((h) => {\r\n return h.pk_ScheduleAssignment;\r\n });\r\n\r\n const interviewCountTracker = {};\r\n Object.keys(rowTracker).forEach((r) => {\r\n candidateKeys.forEach((c) => {\r\n if (rowTracker[r].includes(c)) {\r\n if (interviewCountTracker[c] != null) {\r\n interviewCountTracker[c] += 1;\r\n } else {\r\n interviewCountTracker[c] = 1;\r\n }\r\n }\r\n });\r\n });\r\n\r\n const tableRows = [];\r\n let rows = [\r\n [\r\n { text: 'Time Slot', style: { fontSize: 15, alignment: 'center', bold: true } },\r\n { text: 'Candidates on Break', fontSize: 15, alignment: 'center', bold: true },\r\n ],\r\n ];\r\n\r\n const renderCard = (candidates, timeSlotRow) => {\r\n const cardRows = [];\r\n const userDetailRows = [];\r\n const rowColumns = [];\r\n\r\n rowColumns.push({\r\n style: { alignment: 'center', bold: true },\r\n text: `${moment.tz(timeSlotRow.slot, 'MMM DD, YYYY hh:mm A', null).format('hh:mm A')} `,\r\n fontSize: 11,\r\n margin: [0, 0, 0, 2],\r\n });\r\n candidates.forEach((candidate) => {\r\n const { userPhotoBase64 } = candidate;\r\n const userPhoto = userPhotoBase64\r\n ? {\r\n width: 40,\r\n columns: [\r\n {\r\n image: userPhotoBase64 ? `data:image/png;base64,${userPhotoBase64}` : null,\r\n fit: [20, 20],\r\n },\r\n ],\r\n margin: [10, 0, 10, 0],\r\n }\r\n : {\r\n width: 40,\r\n columns: [\r\n {\r\n image: profilePlaceholderBase64 ? `data:image/png;base64,${profilePlaceholderBase64}` : null,\r\n fit: [20, 20],\r\n },\r\n ],\r\n margin: [10, 0, 10, 0],\r\n };\r\n\r\n userDetailRows.push({\r\n style: { alignment: 'left', paddingLeft: 50 },\r\n text: `${candidate.LastName}, ${candidate.FirstName} `,\r\n fontSize: 10,\r\n margin: [15, 0, 0, 0],\r\n });\r\n });\r\n\r\n if (candidates.length <= 0) {\r\n userDetailRows.push({\r\n style: { alignment: 'left', paddingLeft: 50 },\r\n text: `No Candidates on Break! `,\r\n fontSize: 10,\r\n margin: [15, 0, 0, 0],\r\n });\r\n }\r\n\r\n rowColumns.push({ columns: [userDetailRows], style: { paddingTop: 10, paddingBottom: 10 } });\r\n\r\n cardRows.push(rowColumns);\r\n\r\n return rowColumns;\r\n };\r\n\r\n body.forEach((timeSlotRow, i) => {\r\n if (timeSlotRow.pk_Timeslot === 'END') {\r\n return;\r\n }\r\n const currentRowToFill = rowTracker[timeSlotRow.pk_Timeslot];\r\n\r\n const validCandidatesActual = candidates.filter((c) => {\r\n return !currentRowToFill.includes(parseInt(c.pk_Candidate));\r\n });\r\n\r\n rows.push(renderCard(validCandidatesActual, timeSlotRow));\r\n });\r\n\r\n if (rows.length <= 0) {\r\n Swal.fire('Error', 'There are no Timeslots for this Interview Date. There is nothing to print!', 'error');\r\n return;\r\n }\r\n\r\n let pdfObject = [\r\n {\r\n table: { headerHeight: 50, widths: [1.95 * 72, 5.95 * 72], body: rows, dontBreakRows: true, headerRows: 1 },\r\n layout: 'customTable',\r\n margin: [10, 20, 0, 0],\r\n },\r\n ];\r\n\r\n // imageToBase64(bgGuide)\r\n // .then((bgBase64) => {\r\n const docDefinition = {\r\n // background: { image: `data:image/png;base64,${bgBase64}`, width: 612 },\r\n info: { title: 'Candidates Break Report' },\r\n pageSize: 'LETTER',\r\n pageOrientation: 'portrait',\r\n content: pdfObject,\r\n defaultStyle: {\r\n fontSize: 10,\r\n },\r\n pageMargins: [0.25 * 72, 1.5 * 72, 0.25 * 72, 0.5 * 72],\r\n header: function(currentPage, pageCount, pageSize) {\r\n const deptLogo = {\r\n width: 80,\r\n columns: [\r\n {\r\n image: `data:image/png;base64,${departmentLogo || rezRateLogoBase64}`,\r\n // width: 90,\r\n fit: [80, 80],\r\n },\r\n ],\r\n margin: [0, 0, 10, 0],\r\n };\r\n\r\n const { DateOfInterview, StartTime, Label } = metaData || {};\r\n const dateToDisplay = interviewDate.MomentDateOfInterview\r\n ? interviewDate.MomentDateOfInterview.format('dddd, MMMM DD, YYYY')\r\n : DateOfInterview\r\n ? moment.tz(`${DateOfInterview} ${StartTime}`, null).format('dddd, MMMM DD, YYYY')\r\n : '(No Date)';\r\n\r\n return [\r\n {\r\n columns: [\r\n deptLogo,\r\n [\r\n [\r\n {\r\n text: `Candidate Breaks Report - ${dateToDisplay}`,\r\n alignment: 'bottom',\r\n style: { bold: true },\r\n fontSize: 15,\r\n margin: [10, 0, 0, 0],\r\n },\r\n ],\r\n [\r\n {\r\n text: ` ${interviewDate.Label ? interviewDate.Label : Label ? Label : ''}`,\r\n alignment: 'bottom',\r\n style: { bold: true, color: '#9e9e9e' },\r\n fontSize: 12,\r\n margin: [10, 0, 0, 0],\r\n },\r\n ],\r\n [\r\n {\r\n text: `${department.DepartmentName}`,\r\n alignment: 'bottom',\r\n style: { bold: false },\r\n fontSize: 11,\r\n margin: [10, 0, 0, 0],\r\n },\r\n ],\r\n [\r\n {\r\n text: `${department.OrganizationName || department.OrganizationAlias || ''}`,\r\n alignment: 'bottom',\r\n style: { bold: false },\r\n fontSize: 11,\r\n margin: [10, 0, 0, 0],\r\n },\r\n ],\r\n ],\r\n ],\r\n margin: [0.4 * 72, 20, 0.4 * 72, 0],\r\n },\r\n ];\r\n },\r\n };\r\n\r\n pdfMake.createPdf(docDefinition, tableLayouts).open({}, window.open('', '_blank'));\r\n // })\r\n // .catch((err) => {\r\n // });\r\n};\r\n\r\nexport const createPDFForCandidatesBreakReport = ({\r\n interviewDate,\r\n department,\r\n candidates = [],\r\n rowTracker,\r\n columnTracker,\r\n callback,\r\n scheduleData,\r\n}) => {\r\n const candidatesCopy = clone(candidates);\r\n Promise.all([\r\n ...candidatesCopy.map((c) => {\r\n return new Promise((resolve, reject) => {\r\n if (c.PhotoUrl) {\r\n imageToBase64(c.PhotoUrl)\r\n .then((base64Img) => {\r\n c.userPhotoBase64 = base64Img;\r\n resolve(c);\r\n })\r\n .catch((err) => {\r\n resolve({ error: true, ...c });\r\n });\r\n } else {\r\n resolve(c);\r\n }\r\n });\r\n }),\r\n new Promise((resolve, reject) => {\r\n imageToBase64(profilePlaceholder)\r\n .then((base64) => {\r\n profilePlaceholderBase64 = base64;\r\n resolve(base64);\r\n })\r\n .catch((err) => {\r\n reject(err);\r\n });\r\n }),\r\n\r\n new Promise((resolve, reject) => {\r\n imageToBase64(rezRateLogo)\r\n .then((res) => {\r\n rezRateLogoBase64 = res;\r\n resolve(res);\r\n })\r\n .catch(() => {\r\n reject();\r\n });\r\n }),\r\n ])\r\n .then((res) => {\r\n if (department.DepartmentLogo) {\r\n imageToBase64(department.DepartmentLogo)\r\n .then((deptLogo) => {\r\n if (callback) {\r\n callback();\r\n }\r\n createPDFProper2({\r\n candidates: candidatesCopy,\r\n department,\r\n interviewDate,\r\n rowTracker,\r\n columnTracker,\r\n scheduleData,\r\n departmentLogo: deptLogo,\r\n });\r\n\r\n if (callback) {\r\n callback();\r\n }\r\n })\r\n .catch((err) => {\r\n createPDFProper2({\r\n candidates: candidatesCopy,\r\n department,\r\n interviewDate,\r\n rowTracker,\r\n columnTracker,\r\n scheduleData,\r\n });\r\n if (callback) {\r\n callback();\r\n }\r\n });\r\n } else {\r\n createPDFProper2({\r\n candidates: candidatesCopy,\r\n department,\r\n interviewDate,\r\n rowTracker,\r\n columnTracker,\r\n scheduleData,\r\n });\r\n\r\n if (callback) {\r\n callback();\r\n }\r\n }\r\n })\r\n .catch((err) => {\r\n console.log('err2: ', err);\r\n createPDFProper2({\r\n candidates: candidatesCopy,\r\n department,\r\n interviewDate,\r\n rowTracker,\r\n columnTracker,\r\n scheduleData,\r\n });\r\n if (callback) {\r\n callback(err);\r\n }\r\n });\r\n};\r\n","import pdfMake from 'pdfmake/build/pdfmake';\r\nimport pdfFonts from 'pdfmake/build/vfs_fonts';\r\nimport imageToBase64 from 'image-to-base64';\r\n\r\nimport moment from 'moment';\r\nimport tinycolor from 'tinycolor2';\r\nimport { clone } from '../../schedule';\r\nimport Swal from 'sweetalert2';\r\nimport profilePlaceholder from '../CandidateBadges/Portrait_Placeholder.png';\r\nimport rezRateLogo from '../rezRateLogo.png';\r\n\r\nlet rezRateLogoBase64 = null;\r\nlet profilePlaceholderBase64 = null;\r\npdfMake.vfs = pdfFonts.pdfMake.vfs;\r\n\r\n// Cheat Sheet\r\n// 1 inch = 72 units.\r\n// LETTER size is 612x792\r\n\r\nconst tableLayouts = {\r\n customTable: {\r\n hLineWidth: (i, node) => {\r\n return 0;\r\n // return 0;\r\n // if (i === 0 || i === node.table.body.length) {\r\n // return 0;\r\n // }\r\n return i === node.table.headerRows ? 2 : 1;\r\n },\r\n vLineWidth: (i) => {\r\n return 0;\r\n },\r\n hLineColor: (i) => {\r\n return '#aaa';\r\n return i === 1 ? 'black' : '#aaa';\r\n },\r\n paddingLeft: (i) => {\r\n return 0;\r\n },\r\n paddingRight: (i, node) => {\r\n return 0;\r\n },\r\n paddingTop: (i, node) => {\r\n return 0;\r\n },\r\n paddingBottom: (i, node) => {\r\n return 0;\r\n },\r\n },\r\n};\r\n\r\nconst truncate = (wordToTruncate, limit = 0, forcedCut) => {\r\n if (wordToTruncate == null) {\r\n return '';\r\n }\r\n if (limit == 0 || wordToTruncate.length < limit + 1) {\r\n return wordToTruncate;\r\n } else if (forcedCut) {\r\n return `${wordToTruncate.slice(0, limit)}`;\r\n } else if (wordToTruncate.length > limit + 1) {\r\n return `${wordToTruncate.slice(0, limit - 5)}. . .`;\r\n }\r\n};\r\n\r\nconst renderLines = (lineCount) => {\r\n let counter = 0;\r\n const lines = [];\r\n while (counter < lineCount) {\r\n lines.push([\r\n {\r\n canvas: [{ type: 'line', x1: 0, y1: 0, x2: 520, y2: 0, lineWidth: 1, color: '#3b3b3b' }],\r\n margin: [10, 25, 0, counter == lineCount - 1 ? 10 : 0],\r\n // pageBreak: counter == lineCount - 1 ? 'after' : null,\r\n },\r\n ]);\r\n\r\n counter++;\r\n }\r\n\r\n return lines;\r\n};\r\n\r\nconst createPDFProper = (data) => {\r\n const { interviewDate, candidates, department, departmentLogo, activeFields, questions } = data;\r\n const { metaData, MomentDateOfInterview } = interviewDate;\r\n const { TimeZone } = department;\r\n\r\n let dateToDisplay = '';\r\n let labelToDisplay = '';\r\n\r\n if (metaData) {\r\n const { DateOfInterview, StartTime, Label } = metaData;\r\n dateToDisplay = moment(`${DateOfInterview} ${StartTime}`).format('MMM DD, YYYY');\r\n labelToDisplay = Label || '';\r\n } else if (MomentDateOfInterview) {\r\n dateToDisplay = MomentDateOfInterview.format('MMM DD, YYYY');\r\n labelToDisplay = interviewDate.Label || '';\r\n }\r\n\r\n const rows = [];\r\n let counter = 0;\r\n\r\n // Renders each candidate section. Each Candidate is rendered a Card, each card containing the candidate header (photo, name, evaluator, etc), the canvas for the line divider, and the Table containing rows of questions. The table is set to NOT break rows, so an entire row consisting, question text, choices and all, get rendered together, always.\r\n const renderCard = (candidate, questionData, endOfTheLine) => {\r\n const { userPhotoBase64 } = candidate;\r\n const cardRows = [];\r\n const userDetailRows = [];\r\n const questionRows = [];\r\n const questionGroups = questionData.EvalQuestions;\r\n const { DefaultScale } = questionData;\r\n\r\n const userPhoto = userPhotoBase64\r\n ? {\r\n columns: [\r\n {\r\n image: userPhotoBase64 ? `data:image/png;base64,${userPhotoBase64}` : null,\r\n fit: [60, 60],\r\n },\r\n ],\r\n margin: [0, 0, 0, 10],\r\n }\r\n : {\r\n columns: [\r\n {\r\n image: profilePlaceholderBase64 ? `data:image/png;base64,${profilePlaceholderBase64}` : null,\r\n fit: [60, 60],\r\n },\r\n ],\r\n margin: [0, 0, 0, 10],\r\n };\r\n\r\n userDetailRows.push([userPhoto]);\r\n\r\n cardRows.push([\r\n {\r\n columns: [\r\n { columns: [userDetailRows], width: 210, margin: [0, 0, 10, 0], width: 70 },\r\n {\r\n columns: [\r\n [\r\n [\r\n {\r\n style: { alignment: 'left', bold: true },\r\n text: `${candidate.LastName}, ${candidate.FirstName} `,\r\n fontSize: 12,\r\n margin: [0, 0, 0, 2],\r\n width: 6.0 * 72,\r\n },\r\n ],\r\n [\r\n {\r\n style: { alignment: 'left' },\r\n text: `${candidate.CandidateSubHeading ? candidate.CandidateSubHeading : ' '}`,\r\n fontSize: 9,\r\n width: 6.0 * 72,\r\n margin: [0, 0, 0, 0],\r\n },\r\n ],\r\n [\r\n {\r\n style: { alignment: 'left' },\r\n text: `${candidate.Email ? candidate.Email : ' '}`,\r\n fontSize: 10,\r\n width: 6.0 * 72,\r\n margin: [0, 0, 0, 0],\r\n },\r\n ],\r\n [\r\n {\r\n style: { alignment: 'left' },\r\n text: `${candidate.PhoneNumber ? candidate.PhoneNumber : ' '}`,\r\n fontSize: 10,\r\n margin: [0, 0, 0, 0],\r\n width: 6.0 * 72,\r\n },\r\n ],\r\n ],\r\n ],\r\n width: 4.5 * 72,\r\n },\r\n {\r\n columns: [\r\n [\r\n [\r\n {\r\n style: { alignment: 'left', bold: true },\r\n text: dateToDisplay,\r\n fontSize: 8,\r\n margin: [0, 0, 0, 0],\r\n width: 1.0 * 72,\r\n },\r\n {\r\n style: { alignment: 'left', bold: true, color: '#999999' },\r\n text: labelToDisplay,\r\n fontSize: 8,\r\n margin: [0, 0, 0, 5],\r\n width: 1.0 * 72,\r\n },\r\n ],\r\n [\r\n {\r\n columns: [\r\n {\r\n style: { alignment: 'left', bold: true },\r\n text: `Evaluator: `,\r\n fontSize: 8,\r\n margin: [0, 0, 0, 5],\r\n width: 0.5 * 72,\r\n },\r\n {\r\n canvas: [{ type: 'line', x1: 0, y1: 0, x2: 120, y2: 0, lineWidth: 1, color: '#cccccc' }],\r\n margin: [0, 12, 0, 0],\r\n },\r\n ],\r\n width: 72,\r\n },\r\n ],\r\n ],\r\n ],\r\n width: 2.5 * 72,\r\n },\r\n ],\r\n margin: [10, 0, 0, 0],\r\n },\r\n ]);\r\n\r\n cardRows.push({\r\n canvas: [{ type: 'line', x1: 0, y1: 0, x2: 570, y2: 0, lineWidth: 2, color: 'black' }],\r\n margin: [0, 0, 20, 0],\r\n });\r\n\r\n questionGroups.forEach((qGroup) => {\r\n const { GroupName, questions = [] } = qGroup;\r\n\r\n questionRows.push([\r\n {\r\n style: { alignment: 'center', bold: true },\r\n text: `${GroupName} `,\r\n fontSize: 12,\r\n margin: [0, 10, 0, 20],\r\n width: '100%',\r\n },\r\n ]);\r\n\r\n questions\r\n .sort((a, b) => {\r\n return a.EvaluationQuestionSortOrder - b.EvaluationQuestionSortOrder;\r\n })\r\n .filter((q) => {\r\n return q.EnableEvaluationForm;\r\n })\r\n .forEach((q, i) => {\r\n const { WeightQuestionType, MaxAnswerValue, QuestionText } = q;\r\n\r\n const questionText = [\r\n {\r\n style: { alignment: 'left', bold: true },\r\n text: `${i + 1}. ${QuestionText} `,\r\n fontSize: 10,\r\n margin: [0, 10, 0, 2],\r\n width: '100%',\r\n pageHeaderData: JSON.stringify({ candidate }),\r\n },\r\n ];\r\n if (WeightQuestionType === 'scale') {\r\n let counter = 0;\r\n let choices = [];\r\n let defaultX = DefaultScale.length > 5 ? 24 : 50;\r\n\r\n DefaultScale.forEach((choice, i) => {\r\n const { DisplayValue, NumericValue, Label, Description } = choice;\r\n\r\n choices.push([\r\n [\r\n {\r\n text: `${DisplayValue || NumericValue}`,\r\n fontSize: 15, // 22 - 26\r\n relativePosition: { x: NumericValue > 9 ? defaultX : defaultX + 4, y: 22 },\r\n style: { color: 'black' },\r\n },\r\n {\r\n canvas: [\r\n {\r\n type: 'ellipse',\r\n x: 30,\r\n y: 30,\r\n lineColor: 'gray',\r\n fillOpacity: 1,\r\n r1: 20,\r\n r2: 20,\r\n },\r\n ],\r\n style: { alignment: 'center' },\r\n },\r\n {\r\n text: `${Label}`,\r\n fontSize: 8,\r\n bold: true,\r\n margin: [10, 10, 0, 0],\r\n // relativePosition: { x: 0, y: 0 },\r\n style: { color: 'black', alignment: 'center' },\r\n },\r\n {\r\n text: `${Description}`,\r\n fontSize: 6,\r\n margin: [10, 0, 0, 0],\r\n // relativePosition: { x: 0, y: 0 },\r\n style: { color: 'black', alignment: 'center', italics: true },\r\n },\r\n ],\r\n ]);\r\n });\r\n questionRows.push([[[questionText], { columns: choices, margin: [0, 0, 0, 10] }]]);\r\n } else if (WeightQuestionType === 'text') {\r\n questionRows.push([[[questionText], [...renderLines(3)]]]);\r\n }\r\n });\r\n });\r\n\r\n cardRows.push([\r\n {\r\n table: { heights: 'auto', widths: ['100%'], body: questionRows, dontBreakRows: true },\r\n headerRows: 1,\r\n margin: [20, 0, 20, 0],\r\n layout: 'customTable',\r\n pageBreak: endOfTheLine ? null : 'after',\r\n },\r\n ]);\r\n return cardRows;\r\n };\r\n\r\n while (counter < candidates.length) {\r\n const columns = [];\r\n const tableRow = [];\r\n rows.push(renderCard(candidates[counter], questions, counter == candidates.length - 1));\r\n\r\n counter++;\r\n }\r\n\r\n if (rows.length <= 0) {\r\n Swal.fire('Error', 'There are no Candidates for this Interview Date. There is nothing to print!', 'error');\r\n return;\r\n }\r\n\r\n let pdfObject = [rows];\r\n\r\n const docDefinition = {\r\n info: { title: 'Candidate Evaluations' },\r\n pageSize: 'LETTER',\r\n pageOrientation: 'portrait',\r\n content: pdfObject,\r\n defaultStyle: {\r\n fontSize: 10,\r\n },\r\n pageMargins: [0.25 * 72, 0.5 * 72, 0.25 * 72, 0.5 * 72],\r\n footer: (currentPage) => {\r\n const footerData = getDataForHeaderFooter(docDefinition, currentPage);\r\n\r\n const { candidatePages, candidateData } = footerData;\r\n if (candidateData) {\r\n const candidatePagesActual = candidatePages[candidateData.pk_Candidate];\r\n const candidatePagesCount = candidatePagesActual.length;\r\n const currentCandidatePage = candidatePagesActual.indexOf(currentPage) + 1;\r\n return [\r\n {\r\n text: `${candidateData.LastName}, ${candidateData.FirstName}`,\r\n alignment: 'center',\r\n width: '100%',\r\n fontSize: 8,\r\n },\r\n {\r\n text: `${currentCandidatePage} of ${candidatePagesCount}`,\r\n alignment: 'center',\r\n width: '100%',\r\n fontSize: 8,\r\n },\r\n ];\r\n }\r\n },\r\n };\r\n\r\n pdfMake.createPdf(docDefinition, tableLayouts).open({}, window.open('', '_blank'));\r\n};\r\n\r\n/**\r\n * We plant the header data we want on each element we add to the content array we put in the docDef.\r\n * Each element when processed, have a pageNumber value embedded deep in it. We use this function is used to get that\r\n * embedded header data, in this case, the candidate. The location of this data is retrieved based on the\r\n * @param {object} documentDefinition contains the elements to render.\r\n * @param {number} currentPage what page the header is being rendered on.\r\n * @returns {object} Returns hte header object with all the data for header/footer, in this case,\r\n */\r\nconst getDataForHeaderFooter = (documentDefinition, currentPage) => {\r\n let headerData = {};\r\n let candidatePages = {}; // arrays of page numbers involved with a candidate\r\n\r\n documentDefinition.content.forEach((questionGroup, questionGroupIndex) => {\r\n questionGroup.stack.forEach((candidateEvaluation) => {\r\n candidateEvaluation.stack[2].stack[0].table.body.forEach((tableRow, tableRowIndex) => {\r\n if (tableRowIndex > 0) {\r\n const pageNumber = tableRow[0].positions[0].pageNumber;\r\n const rawHeaderData = tableRow[0].stack[0].stack[0].stack[0].pageHeaderData\r\n ? JSON.parse(tableRow[0].stack[0].stack[0].stack[0].pageHeaderData).candidate\r\n : null;\r\n\r\n if (rawHeaderData) {\r\n const oldPages = candidatePages[rawHeaderData.pk_Candidate] || [];\r\n if (!oldPages.includes(pageNumber)) {\r\n oldPages.push(pageNumber);\r\n candidatePages[rawHeaderData.pk_Candidate] = oldPages;\r\n }\r\n }\r\n\r\n if (pageNumber == currentPage) {\r\n headerData.candidateData = rawHeaderData ? rawHeaderData : {};\r\n }\r\n }\r\n });\r\n });\r\n });\r\n\r\n headerData.candidatePages = candidatePages;\r\n return headerData;\r\n};\r\n\r\nexport const createPDFForCandidateEvaluations = ({\r\n interviewDate,\r\n department,\r\n candidates = [],\r\n questions = [], // Array of Question Groups, each with questions property\r\n callback,\r\n}) => {\r\n const candidatesCopy = clone(candidates);\r\n\r\n // Process each candidate's photo and convert to base64 before generating pdf proper.\r\n Promise.all([\r\n ...candidatesCopy.map((c) => {\r\n return new Promise((resolve, reject) => {\r\n if (c.PhotoUrl) {\r\n imageToBase64(c.PhotoUrl)\r\n .then((base64Img) => {\r\n c.userPhotoBase64 = base64Img;\r\n resolve(c);\r\n })\r\n .catch((err) => {\r\n resolve({ error: true, ...c });\r\n });\r\n } else {\r\n resolve(c);\r\n }\r\n });\r\n }),\r\n new Promise((resolve, reject) => {\r\n imageToBase64(profilePlaceholder)\r\n .then((base64) => {\r\n profilePlaceholderBase64 = base64;\r\n resolve(base64);\r\n })\r\n .catch((err) => {\r\n reject(err);\r\n });\r\n }),\r\n new Promise((resolve, reject) => {\r\n imageToBase64(rezRateLogo)\r\n .then((base64) => {\r\n rezRateLogoBase64 = base64;\r\n resolve(base64);\r\n })\r\n .catch((err) => {\r\n reject(err);\r\n });\r\n }),\r\n ])\r\n .then((res) => {\r\n createPDFProper({ candidates: candidatesCopy, department, interviewDate, questions });\r\n if (callback) {\r\n callback();\r\n }\r\n })\r\n .catch((err) => {\r\n createPDFProper({ candidates: candidatesCopy, department, interviewDate, questions });\r\n if (callback) {\r\n callback(err);\r\n }\r\n });\r\n};\r\n","import React, { useState, useRef, useEffect, useContext } from 'react';\r\nimport { Button, Input, Label, Modal, ModalBody, ModalHeader, Spinner } from 'reactstrap';\r\nimport {\r\n faAddressCard,\r\n faCalendarAlt,\r\n faIdCardAlt,\r\n faUserAlt,\r\n faUserEdit,\r\n faUsers,\r\n faCalendarDay,\r\n faUserCheck,\r\n faCoffee,\r\n faListUl,\r\n} from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\n\r\nimport style from './style';\r\nimport { fetchDataAgnostic } from '../../../../../../Services/dataApi';\r\nimport { CSVLink } from 'react-csv';\r\nimport { DepartmentContext } from '../../../../../../DepartmentWrapper';\r\nimport { formatBearerToken } from '../../../../../../Common.functions';\r\nimport { useAuth0 } from '../../../../../../auth0/reactAuth0Spa';\r\n\r\nimport { createPDFForSchedule } from '../../../../../../Services/PDFMakeTemplates/MasterSchedule';\r\n\r\nimport Swal from 'sweetalert2';\r\nimport Schedule from '../..';\r\nimport moment from 'moment-timezone';\r\nimport { createPDFForCandidateBadges } from '../../../../../../Services/PDFMakeTemplates/CandidateBadges/CandidateBadges';\r\nimport { createPDFForCandidateBadges2 } from '../../../../../../Services/PDFMakeTemplates/CandidateBadges/CandidateBadges_avery_5384';\r\nimport { createPDFForCandidateFactCards } from '../../../../../../Services/PDFMakeTemplates/CandidateBadges/CandidateFactCards';\r\nimport { createPDFForCandidateFaces } from '../../../../../../Services/PDFMakeTemplates/CandidateBadges/CandidateFaces';\r\nimport { createPDFForEvaluatorSchedule } from '../../../../../../Services/PDFMakeTemplates/EvaluatorSchedule/EvaluatorSchedule';\r\nimport { createPDFForCandidateSchedule } from '../../../../../../Services/PDFMakeTemplates/CandidateSchedule/CandidateSchedule';\r\nimport { createPDFForCandidateFacesWithNotes } from '../../../../../../Services/PDFMakeTemplates/CandidateBadges/CandidateFacesWithNotes';\r\nimport { separateDataTypesByAvailability } from '../../../../../../Services/candidates';\r\nimport { createPDFForCandidatesBreakReport } from '../../../../../../Services/PDFMakeTemplates/CandidateBreakReports/CandidateBreakReport';\r\nimport { createPDFForCandidateEvaluations } from '../../../../../../Services/PDFMakeTemplates/CandidateEvaluations/CandidateEvaluations';\r\nimport Loading from 'Body/Statuses/Loading';\r\nimport { clone } from 'lodash';\r\n\r\nconst PrintDropDown = ({\r\n scheduleID,\r\n row = {},\r\n setShowSettings,\r\n department,\r\n setIsShowingSchedulePreview,\r\n forcedScheduleData,\r\n}) => {\r\n const candidateCSVDownload = useRef();\r\n const scheduleRef = useRef();\r\n\r\n const [candidateCSVData, setCandidateCSVData] = useState([]);\r\n const [scheduleData, setScheduleData] = useState();\r\n const [columnTracker, setColumnTracker] = useState();\r\n const [rowTracker, setRowTracker] = useState();\r\n const [candidates, setCandidates] = useState();\r\n\r\n const [isDownloadingCandidates, setIsDownlaodingCandidates] = useState(false);\r\n const [isProcessingPDF, setIsProcessingPDF] = useState(false);\r\n\r\n const [showSchedulePreview, setShowSchedulePreview] = useState(false);\r\n const [schedulePreviewDataURL, setSchedulePreviewDataURL] = useState();\r\n\r\n const [PDFOrientation, setPDFOrientation] = useState('landscape');\r\n const [PDFFontSize, setPDFFontSize] = useState(4);\r\n const [dataTypes, setDataTypes] = useState([]);\r\n const [questionsData, setQuestionsData] = useState({});\r\n const [isPreparingScheduleData, setIsPreparingScheduleData] = useState(true);\r\n\r\n const dContext = useContext(DepartmentContext);\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n\r\n useEffect(() => {\r\n if (candidateCSVData && candidateCSVData.length > 0) {\r\n setTimeout(() => {\r\n candidateCSVDownload.current.link.click();\r\n }, 1000);\r\n\r\n setTimeout(() => {\r\n setCandidateCSVData([]);\r\n if (setShowSettings) {\r\n setShowSettings(false);\r\n }\r\n }, 2000);\r\n }\r\n }, [candidateCSVData]);\r\n\r\n useEffect(() => {\r\n getDepartmentDataTypes((newDataTypes) => {\r\n const separatedDataTypes = separateDataTypesByAvailability(newDataTypes);\r\n setDataTypes(separatedDataTypes.enabled);\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (forcedScheduleData) {\r\n // Breaks the system\r\n // setScheduleData(forcedScheduleData);\r\n }\r\n }, [forcedScheduleData]);\r\n\r\n useEffect(() => {\r\n if (scheduleData && showSchedulePreview) {\r\n let interviewDateRow = {};\r\n if (scheduleData) {\r\n const { metaData } = scheduleData;\r\n const { DateOfInterview, StartTime, TimeZone, Label } = metaData;\r\n interviewDateRow.scheduleName = metaData.Label;\r\n interviewDateRow.interviewDate = moment.tz(`${DateOfInterview || ''} ${StartTime}`, null);\r\n } else if (row) {\r\n interviewDateRow.scheduleName = row.Label;\r\n interviewDateRow.interviewDate = row.MomentDateOfInterview;\r\n }\r\n setIsProcessingPDF(true);\r\n createPDFForSchedule({\r\n interviewDateRow: interviewDateRow,\r\n scheduleData,\r\n columnTracker,\r\n candidates,\r\n department: dContext.department,\r\n PDFOrientation,\r\n PDFFontSize,\r\n willGetDataUrl: true,\r\n callback: (dataURL) => {\r\n if (dataURL) {\r\n setSchedulePreviewDataURL(dataURL);\r\n }\r\n setIsProcessingPDF(false);\r\n },\r\n });\r\n }\r\n }, [PDFOrientation, JSON.stringify(scheduleData || {}), PDFFontSize, showSchedulePreview]);\r\n\r\n useEffect(() => {\r\n if (setIsShowingSchedulePreview) {\r\n setIsShowingSchedulePreview(showSchedulePreview);\r\n if (showSchedulePreview) {\r\n setIsProcessingPDF(true);\r\n }\r\n }\r\n }, [showSchedulePreview]);\r\n\r\n useEffect(() => {\r\n if (row && row.pk_InterviewDate != null) {\r\n // getScheduleData();\r\n }\r\n }, [row]);\r\n\r\n useEffect(() => {\r\n if (scheduleData && scheduleData.body && scheduleData.body.length > 0) {\r\n if (isPreparingScheduleData) {\r\n setIsPreparingScheduleData(!scheduleData.body[0].slot);\r\n }\r\n }\r\n }, [scheduleData]);\r\n\r\n const getQuestions = (callback) => {\r\n getTokenSilently()\r\n .then((token) => {\r\n fetchDataAgnostic(\r\n 'department/questions',\r\n { pk_Department: dContext.department.pk_Department, pk_Season: dContext.season.pk_Season },\r\n formatBearerToken(token),\r\n )\r\n .then((result) => {\r\n if (result.data) {\r\n setQuestionsData(result.data);\r\n }\r\n if (result.data && result.data) {\r\n callback(result.data);\r\n } else {\r\n callback([]);\r\n }\r\n })\r\n .catch((err) => {\r\n callback([]);\r\n });\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const getCandidatesForDate = (pk_InterviewDate, callback) => {\r\n getTokenSilently().then((token) => {\r\n fetchDataAgnostic(\r\n 'department/season/user/scheduledate/candidates',\r\n {\r\n pk_Department: department ? department.pk_Department : dContext.department.pk_Department,\r\n pk_Season: dContext.season.pk_Season,\r\n pk_InterviewDate,\r\n allCandidatesForDate: 1,\r\n mode: 'Evaluation',\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n callback(Object.values(res.data));\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n });\r\n };\r\n\r\n const getScheduleData = (callback) => {\r\n setIsPreparingScheduleData(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n fetchDataAgnostic(\r\n 'department/season/interviewDate',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n pk_Season: dContext.season.pk_Season,\r\n pk_InterviewDate: scheduleID != null ? parseInt(scheduleID) : row.pk_InterviewDate,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n if (res.data.metaData == null || res.data.metaData.StartDateAndTime == null) {\r\n setSchedulePreviewDataURL(null);\r\n } else {\r\n setScheduleData(res.data);\r\n }\r\n\r\n if (callback) {\r\n callback(res.data);\r\n }\r\n })\r\n .catch((e) => {\r\n if (callback) {\r\n callback(null);\r\n }\r\n setSchedulePreviewDataURL(null);\r\n });\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const getCandidatesWithSchedules = (pk_InterviewDate, callback) => {\r\n getTokenSilently()\r\n .then((token) => {\r\n fetchDataAgnostic(\r\n 'schedule/season/interviewDate/candidates',\r\n {\r\n pk_Department: department ? department.pk_Department : dContext.department.pk_Department,\r\n pk_Season: dContext.season.pk_Season,\r\n pk_InterviewDate,\r\n // allCandidatesForDate: 1,\r\n // mode: dContext.season.EnablePrescreenMode ? 'Prescreen' : 'Evaluation',\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n callback(res.data);\r\n })\r\n .catch((err) => {});\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const getUsersWithSchedules = (pk_InterviewDate, callback) => {\r\n getTokenSilently()\r\n .then((token) => {\r\n fetchDataAgnostic(\r\n 'department/season/interviewDate/user/schedules',\r\n {\r\n pk_Department: department ? department.pk_Department : dContext.department.pk_Department,\r\n pk_InterviewDate,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n callback(res.data);\r\n })\r\n .catch((err) => {});\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const getDepartmentDataTypes = (callback) => {\r\n getTokenSilently()\r\n .then((token) => {\r\n fetchDataAgnostic(\r\n 'department/dataTypes',\r\n { pk_Department: dContext.department.pk_Department },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n callback(res.data);\r\n })\r\n .catch((err) => {});\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const downloadCandidatesCSV = () => {\r\n setIsDownlaodingCandidates(true);\r\n\r\n getCandidatesForDate(scheduleID ? scheduleID : row ? row.pk_InterviewDate : null, (validCandidates) => {\r\n setIsDownlaodingCandidates(false);\r\n const newCSVData = [\r\n [\r\n 'AAMC ID',\r\n 'SFMatch ID',\r\n 'NRMP ID',\r\n 'Last Name',\r\n 'Middle Name',\r\n 'First Name',\r\n 'Medical School of Graduation',\r\n 'Phone Number',\r\n 'Email Address',\r\n ],\r\n ];\r\n\r\n validCandidates.forEach((candidate) => {\r\n const {\r\n AAMCID,\r\n SFMatchID,\r\n NRMPID,\r\n pk_InterviewDate,\r\n LastName,\r\n MiddleName,\r\n FirstName,\r\n MedicalSchoolOfGraduation,\r\n Phone,\r\n Email,\r\n } = candidate;\r\n\r\n // if (scheduleID != pk_InterviewDate) {\r\n // return;\r\n // }\r\n const newRow = [\r\n AAMCID || '',\r\n SFMatchID || '',\r\n NRMPID || '',\r\n LastName || '',\r\n MiddleName || '',\r\n FirstName || '',\r\n MedicalSchoolOfGraduation || '',\r\n Phone || '',\r\n Email || '',\r\n ];\r\n\r\n newCSVData.push(newRow);\r\n });\r\n if (newCSVData.length <= 1) {\r\n Swal.fire('Error', 'There are no Candidates for this Interview Date. There is nothing to print!', 'error');\r\n return;\r\n }\r\n\r\n setCandidateCSVData(newCSVData);\r\n // setIsProcessingPDF(false);\r\n });\r\n };\r\n\r\n const downloadSchedulePDF = () => {\r\n const containerElement = document.getElementById('scheduleContainer');\r\n const html = containerElement ? containerElement.outerHTML : null;\r\n let dateToUse = moment();\r\n if (scheduleData) {\r\n const { metaData } = scheduleData;\r\n const { DateOfInterview, StartTime, TimeZone, Label } = metaData;\r\n dateToUse = moment.tz(`${DateOfInterview || ''} ${StartTime}`, null);\r\n } else if (row && row.MomentDateOfInterview) {\r\n dateToUse = row.MomentDateOfInterview;\r\n }\r\n\r\n if (html) {\r\n createPDFForSchedule({\r\n interviewDateRow: { scheduleName: row.Label, interviewDate: dateToUse },\r\n scheduleData,\r\n columnTracker,\r\n candidates,\r\n department: dContext.department,\r\n PDFOrientation,\r\n PDFFontSize,\r\n });\r\n }\r\n };\r\n\r\n const renderPreviewModal = () => {\r\n let dateLabel = '';\r\n if (scheduleData) {\r\n const { metaData } = scheduleData;\r\n const { DateOfInterview, StartTime, TimeZone, Label } = metaData;\r\n dateLabel = moment.tz(`${DateOfInterview || ''} ${StartTime}`, null).format('MMM DD, YYYY');\r\n } else if (row && row.MomentDateOfInterview) {\r\n dateLabel = row.MomentDateOfInterview.format('MMM DD, YYYY');\r\n }\r\n\r\n return (\r\n \r\n {Object.values(candidates)\r\n .sort((a, b) => {\r\n const aName = `${a.LastName ? `${a.LastName}, ` : ''}${a.FirstName || ''}`;\r\n const bName = `${b.LastName ? `${b.LastName}, ` : ''}${b.FirstName || ''}`;\r\n\r\n if (aName < bName) {\r\n return -1;\r\n }\r\n if (aName > bName) {\r\n return 1;\r\n }\r\n return 0;\r\n })\r\n .map((candidate) => {\r\n return (\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n Schedule - {row.Label} ({dateLabel})\r\n
\r\n \r\n \r\n {\r\n e.stopPropagation();\r\n }}\r\n onChange={(e) => {\r\n setPDFOrientation(e.target.value);\r\n }}\r\n >\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {\r\n const newValue = parseInt(e.target.value);\r\n if (newValue > 0) setPDFFontSize(newValue);\r\n }}\r\n />\r\n
\r\n \r\n {\r\n downloadSchedulePDF();\r\n }}\r\n >\r\n Download\r\n \r\n
\r\n \r\n {' '}\r\n
\r\n ) : schedulePreviewDataURL ? (\r\n \r\n ) : (\r\n \r\n {'No Schedule PDF Data'}\r\n
\r\n )}\r\n\r\n \r\n
\r\n \r\n \r\n \r\n Download\r\n \r\n
\r\n );\r\n } else {\r\n return null;\r\n }\r\n };\r\n\r\n const isDisabledButtons = isDownloadingCandidates || isProcessingPDF || isPreparingScheduleData; //|| row.CountOfCandidates <= 0 || row.CountOfCandidates == null;\r\n\r\n const { TimeZone } = dContext.department || {};\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default PrintDropDown;\r\n","const style = {\r\n topNavButton: {\r\n backgroundColor: '#0a91ff',\r\n marginRight: 10,\r\n marginLeft: 10,\r\n paddignRight: 20,\r\n paddingBottom: 10,\r\n paddingLeft: 20,\r\n paddingTop: 10,\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n flexDirection: 'row',\r\n },\r\n printButton: {\r\n backgroundColor: '#0a91ff',\r\n marginRight: 10,\r\n },\r\n buttonIcon: {\r\n marginRight: 10,\r\n },\r\n popOverHeader: {\r\n textAlign: 'center',\r\n fontWeight: 600,\r\n },\r\n flexStartRow: {\r\n alignItems: 'centers',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'flex-start',\r\n },\r\n flexEndRow: {\r\n alignItems: 'centers',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'flex-end',\r\n },\r\n spacedBetweenRow: {\r\n alignItems: 'center',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n },\r\n simpleRow: {\r\n alignItems: 'center',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n margin: 10,\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n marginBottom: 10,\r\n },\r\n scheduleTitleDate: {\r\n alignItems: 'center',\r\n fontSize: 24,\r\n fontWeight: 600,\r\n alignItems: 'flex-start',\r\n flexDirection: 'column',\r\n display: 'flex',\r\n },\r\n printButtonContainer: {\r\n alignItems: 'center',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n },\r\n savedIcon: {\r\n fontSize: 15,\r\n color: 'green',\r\n },\r\n loadingIcon: {\r\n fontSize: 15,\r\n color: 'blue',\r\n },\r\n buttonLabel: {\r\n width: '100%',\r\n textAlign: 'center',\r\n fontWeight: 600,\r\n // fontSize: '14px'\r\n },\r\n};\r\n\r\nexport default style;\r\n","import { faCheckCircle } from '@fortawesome/free-regular-svg-icons';\r\nimport {\r\n faCloudDownloadAlt,\r\n faCloudUploadAlt,\r\n faCog,\r\n faCopy,\r\n faEnvelope,\r\n faEnvelopeSquare,\r\n faExclamationCircle,\r\n faHatWizard,\r\n faLink,\r\n faMagic,\r\n faMinusCircle,\r\n faPlusCircle,\r\n faPrint,\r\n faRedo,\r\n faSyncAlt,\r\n faTrashAlt,\r\n faUser,\r\n faUsers,\r\n faVideo,\r\n} from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport LinkSettingsButton from 'Body/RezRATE/Common/LinkSettingsButton/LinkSettingsButton';\r\nimport { clone } from 'lodash';\r\nimport moment from 'moment-timezone';\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport {\r\n Button,\r\n CustomInput,\r\n Input,\r\n InputGroup,\r\n InputGroupAddon,\r\n Popover,\r\n PopoverBody,\r\n PopoverHeader,\r\n UncontrolledTooltip,\r\n} from 'reactstrap';\r\nimport Swal from 'sweetalert2';\r\nimport { useAuth0 } from '../../../../../auth0/reactAuth0Spa';\r\nimport { formatBearerToken } from '../../../../../Common.functions';\r\nimport { deleteData, fetchDataAgnostic, putData } from '../../../../../Services/dataApi';\r\nimport {\r\n clearTimeslots,\r\n countScheduledCandidates,\r\n generateSchedule,\r\n getScheduleStartAndEndTime,\r\n setupSplitCountTrackers,\r\n} from '../../../../../Services/schedule';\r\nimport ConfirmModal from '../ConfirmModal';\r\nimport CandidateDropDown from './CandidateDropDown';\r\nimport EvaluatorDropDown from './EvaluatorDropDown';\r\nimport PrintDropDown from './PrintDropDown';\r\nimport SettingsDropDown from './SettingsDropDown';\r\nimport style from './style.js';\r\nimport './TopBar.style.css';\r\nimport { useHistory } from 'react-router-dom/cjs/react-router-dom.min';\r\n\r\nlet candidateLimitTimeout = null;\r\nconst TopBar = ({\r\n addRowCustomEvent,\r\n allowInterviewLimit,\r\n candidates = {},\r\n columnTracker,\r\n dContext,\r\n evaluators = [],\r\n fetchSchedule,\r\n fireConfirmationForEditingPastSchedule,\r\n generatedScheduleData,\r\n generateMode,\r\n interviewLimit,\r\n isAddingCandidate,\r\n isCloning,\r\n isEmbedded,\r\n isFetching,\r\n isGeneratingSchedule,\r\n isInPreviewMode,\r\n isSubmitting,\r\n rowTracker,\r\n scheduleData,\r\n scheduleID,\r\n setAllowInterviewLimit,\r\n setCandidateLimit,\r\n setGeneratedScheduleData,\r\n setInterviewLimit,\r\n setPendingCandidates,\r\n setShowCloneModal,\r\n setShowGenerateDataPanel,\r\n setShowUnsavedChangeModal,\r\n setupTrackers,\r\n showCloneModal,\r\n submitGeneratedSchedule,\r\n toggleScheduleWizard,\r\n willEditThePast,\r\n}) => {\r\n const [isOpenEvaluators, setIsOpenEvaluators] = useState(false);\r\n const [isOpenCandidates, setIsOpenCandidates] = useState(false);\r\n const [isOpenInterviewLimit, setIsOpenInterviewLimit] = useState(false);\r\n const [isOpenPrint, setIsOpenPrint] = useState(false);\r\n const [isOpenSettings, setIsOpenSettings] = useState(false);\r\n const [isUpdatingCandidateLimit, setIsUpdatingCandidateLimit] = useState(false);\r\n const [isShowingSchedulePreview, setIsShowingSchedulePreview] = useState(false);\r\n\r\n const [candidatesWithNoScheduleSent, setCandidatesWithNoScheduleSent] = useState([]);\r\n\r\n const myScheduleData = useRef();\r\n\r\n const [showClearScheduleConfirmation, setShowClearScheduleConfirmation] = useState(false);\r\n\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n\r\n const history = useHistory();\r\n const scheduleDate =\r\n scheduleData && scheduleData.metaData && scheduleData.metaData.DateOfInterview\r\n ? moment(`${scheduleData.metaData.DateOfInterview || ''} ${scheduleData.metaData.StartTime}`)\r\n : null;\r\n\r\n const dateIsInThePast = scheduleDate ? scheduleDate.isBefore(moment.tz()) : false;\r\n\r\n const { metaData } = scheduleData || {};\r\n const { MainRoomURL, MainRoomURLDetails } = metaData || {};\r\n\r\n useEffect(() => {\r\n myScheduleData.current = clone(scheduleData);\r\n\r\n if (scheduleData && scheduleData.metaData) {\r\n const newLimit = scheduleData.metaData.CandidateLimit;\r\n\r\n setInterviewLimit(newLimit ? newLimit : null);\r\n\r\n if (newLimit == null) {\r\n setAllowInterviewLimit(false);\r\n }\r\n }\r\n }, [JSON.stringify(scheduleData)]);\r\n\r\n useEffect(() => {\r\n if (candidates) {\r\n processCandidates(candidates);\r\n }\r\n }, [candidates]);\r\n\r\n const updateCandidateLimit = (newCandidateLimit, callback) => {\r\n setIsUpdatingCandidateLimit(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n putData(\r\n 'department/interviewDate/putEntry',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n pk_InterviewDate: scheduleID,\r\n pk_Season: dContext.season.pk_Season,\r\n },\r\n {\r\n entry: {\r\n CandidateLimit: newCandidateLimit,\r\n },\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((result) => {\r\n setIsUpdatingCandidateLimit(false);\r\n if (result.data.error) {\r\n return;\r\n }\r\n\r\n fetchSchedule();\r\n\r\n // formatThenSetInterviewDates(result.data);\r\n })\r\n .catch((err) => {\r\n setIsUpdatingCandidateLimit(false);\r\n });\r\n })\r\n .catch((err) => {\r\n setIsUpdatingCandidateLimit(false);\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const clearSchedule = (clearCustomEventsToo) => {\r\n getTokenSilently()\r\n .then((token) => {\r\n deleteData(\r\n 'schedule/clear',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n pk_InterviewDate: scheduleID,\r\n pk_Season: dContext.season.pk_Season,\r\n includeCustomEvents: clearCustomEventsToo ? 1 : 0,\r\n },\r\n null,\r\n formatBearerToken(token),\r\n )\r\n .then((result) => {\r\n if (result.data.error) {\r\n return;\r\n }\r\n\r\n fetchSchedule();\r\n })\r\n .catch((err) => {});\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const processCandidates = () => {\r\n let candidatesNotSentSchedule = [];\r\n Object.keys(candidates).forEach((c) => {\r\n const candidate = candidates[c];\r\n if (!candidate.HasBeenSentSchedule) {\r\n candidatesNotSentSchedule.push(candidate);\r\n }\r\n });\r\n\r\n setCandidatesWithNoScheduleSent(candidatesNotSentSchedule);\r\n };\r\n\r\n const onEditCandidate = () => {};\r\n\r\n const onCalendarClick = () => {};\r\n\r\n const meetingInProgress = () => {\r\n let isMeetingInProgress = false;\r\n if (scheduleData) {\r\n const { StartTime, EndTime } = getScheduleStartAndEndTime(scheduleData);\r\n const now = moment(); //.format('MMM DD, YYYY hh:mm A');\r\n isMeetingInProgress = now.isSameOrAfter(StartTime) && now.isSameOrBefore(EndTime); //isTimeRangeOverlap([StartTime, now], [now, EndTime]);\r\n }\r\n\r\n return isMeetingInProgress;\r\n };\r\n\r\n const renderCandidatesPopOver = () => {\r\n return (\r\n \r\n
\r\n \r\n {\r\n setShowSchedulePreview(true);\r\n // downloadSchedulePDF();\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n Master Schedule
\r\n \r\n {\r\n setIsProcessingPDF(true);\r\n console.log('dContext: ', clone(dContext));\r\n getUsersWithSchedules(\r\n scheduleID ? scheduleID : row ? row.pk_InterviewDate : null,\r\n (usersWithSchedules) => {\r\n console.log('usersWithSchedules: ', usersWithSchedules);\r\n\r\n if (usersWithSchedules && usersWithSchedules.length > 0) {\r\n const user0 = usersWithSchedules[0];\r\n if (user0.body && user0.body[0]) {\r\n const StartTime = user0.body[0].StartTime;\r\n const startFormatted = moment.tz(StartTime, TimeZone).format('hh:mm A');\r\n console.log(\"user 0's first schedule slot's StartTime: \", StartTime);\r\n console.log(\r\n `user 0's first schedule slot's StartTime formatted in timezone=${TimeZone}: ${startFormatted}`,\r\n );\r\n }\r\n }\r\n createPDFForEvaluatorSchedule({\r\n department: dContext.department,\r\n evaluators: usersWithSchedules || [],\r\n interviewDate: scheduleData || row,\r\n callback: () => {\r\n setIsProcessingPDF(false);\r\n },\r\n });\r\n },\r\n );\r\n }}\r\n >\r\n
\r\n\r\n \r\n
\r\n \r\n Evaluator Schedules
\r\n \r\n {\r\n setIsProcessingPDF(true);\r\n getCandidatesForDate(scheduleID ? scheduleID : row ? row.pk_InterviewDate : null, (candidatesForDate) => {\r\n getQuestions((newQuestions) => {\r\n createPDFForCandidateEvaluations({\r\n department: dContext.department,\r\n candidates: candidatesForDate,\r\n questions: newQuestions,\r\n interviewDate: scheduleData || row,\r\n callback: (res) => {\r\n setIsProcessingPDF(false);\r\n },\r\n });\r\n });\r\n });\r\n }}\r\n >\r\n
\r\n\r\n \r\n
\r\n \r\n Candidate Evaluations
\r\n \r\n {\r\n if (scheduleData) {\r\n setIsProcessingPDF(true);\r\n getCandidatesForDate(\r\n scheduleID ? scheduleID : row ? row.pk_InterviewDate : null,\r\n (candidatesForDate) => {\r\n createPDFForCandidatesBreakReport({\r\n department: dContext.department,\r\n candidates: candidatesForDate,\r\n interviewDate: scheduleData || row,\r\n scheduleData,\r\n columnTracker,\r\n rowTracker,\r\n callback: (res) => {\r\n setIsProcessingPDF(false);\r\n },\r\n });\r\n },\r\n );\r\n } else {\r\n setIsProcessingPDF(true);\r\n getScheduleData((newScheduleData) => {\r\n if (newScheduleData) {\r\n getCandidatesForDate(\r\n scheduleID ? scheduleID : row ? row.pk_InterviewDate : null,\r\n (candidatesForDate) => {\r\n createPDFForCandidatesBreakReport({\r\n department: dContext.department,\r\n candidates: candidatesForDate,\r\n interviewDate: scheduleData || row,\r\n scheduleData: newScheduleData,\r\n columnTracker,\r\n rowTracker,\r\n callback: (res) => {\r\n setIsProcessingPDF(false);\r\n },\r\n });\r\n },\r\n );\r\n } else {\r\n setIsProcessingPDF(false);\r\n }\r\n });\r\n }\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n\r\n Candidates Break Report
\r\n \r\n {\r\n setScheduleData(newScheduleData);\r\n }}\r\n setParentColumnTracker={setColumnTracker}\r\n setParentRowTracker={setRowTracker}\r\n setParentCandidates={setCandidates}\r\n />\r\n
\r\n \r\n
\r\n\r\n \r\n {\r\n setIsProcessingPDF(true);\r\n console.log('dContext: ', clone(dContext));\r\n getCandidatesWithSchedules(\r\n scheduleID ? scheduleID : row ? row.pk_InterviewDate : null,\r\n (candidatesWithSchedules) => {\r\n console.log('candidatesWithSchedules: ', candidatesWithSchedules);\r\n\r\n if (candidatesWithSchedules && candidatesWithSchedules.length > 0) {\r\n const candidate0 = candidatesWithSchedules[0];\r\n if (candidate0.schedule && candidate0.schedule[0]) {\r\n const StartTime = candidate0.schedule[0].StartTime;\r\n const startFormatted = moment.tz(StartTime, TimeZone).format('hh:mm A');\r\n\r\n console.log(\"candidate 0's first schedule slot's StartTime: \", StartTime);\r\n console.log(\r\n `candidate 0's first schedule slot's StartTime formatted in timezone=${TimeZone}: ${startFormatted}`,\r\n );\r\n }\r\n }\r\n\r\n createPDFForCandidateSchedule({\r\n department: dContext.department,\r\n candidates: candidatesWithSchedules,\r\n interviewDate: scheduleData || row,\r\n callback: () => {\r\n setIsProcessingPDF(false);\r\n },\r\n });\r\n },\r\n );\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n Candidate Schedules
\r\n \r\n {\r\n setIsProcessingPDF(true);\r\n\r\n getCandidatesForDate(scheduleID ? scheduleID : row ? row.pk_InterviewDate : null, (candidates) => {\r\n createPDFForCandidateBadges({\r\n department: dContext.department,\r\n candidates,\r\n interviewDate: scheduleData || row,\r\n callback: () => {\r\n setIsProcessingPDF(false);\r\n },\r\n });\r\n });\r\n }}\r\n >\r\n
\r\n\r\n \r\n
\r\n \r\n Candidate Badges (5390)
\r\n \r\n {\r\n setIsProcessingPDF(true);\r\n getCandidatesForDate(scheduleID ? scheduleID : row ? row.pk_InterviewDate : null, (candidates) => {\r\n createPDFForCandidateBadges2({\r\n department: dContext.department,\r\n candidates,\r\n interviewDate: scheduleData || row,\r\n callback: () => {\r\n setIsProcessingPDF(false);\r\n },\r\n });\r\n });\r\n }}\r\n >\r\n
\r\n\r\n \r\n
\r\n \r\n Candidate Badges (5834)
\r\n When Printing Avery Templates, use \"Actual Size\" option.
\r\n \r\n
\r\n {renderCandidateCSVDownload()}\r\n {renderPreviewModal()}\r\n \r\n {\r\n setIsProcessingPDF(true);\r\n getCandidatesForDate(scheduleID ? scheduleID : row ? row.pk_InterviewDate : null, (candidates) => {\r\n createPDFForCandidateFaces({\r\n department: dContext.department,\r\n candidates,\r\n interviewDate: scheduleData || row,\r\n callback: () => {\r\n setIsProcessingPDF(false);\r\n },\r\n });\r\n });\r\n }}\r\n >\r\n
\r\n\r\n \r\n
\r\n \r\n Face Sheet Grid
\r\n \r\n {\r\n setIsProcessingPDF(true);\r\n\r\n getCandidatesForDate(scheduleID ? scheduleID : row ? row.pk_InterviewDate : null, (candidates) => {\r\n createPDFForCandidateFacesWithNotes({\r\n department: dContext.department,\r\n candidates,\r\n interviewDate: scheduleData || row,\r\n activeFields: dataTypes || [],\r\n callback: () => {\r\n setIsProcessingPDF(false);\r\n },\r\n });\r\n });\r\n }}\r\n >\r\n
\r\n\r\n \r\n
\r\n \r\n Face Sheet With Notes
\r\n \r\n {\r\n setIsProcessingPDF(true);\r\n getCandidatesForDate(scheduleID ? scheduleID : row ? row.pk_InterviewDate : null, (candidates) => {\r\n createPDFForCandidateFactCards({\r\n department: dContext.department,\r\n candidates,\r\n interviewDate: scheduleData || row,\r\n callback: () => {\r\n setIsProcessingPDF(false);\r\n },\r\n });\r\n });\r\n }}\r\n >\r\n
\r\n\r\n \r\n
\r\n \r\n Fact Sheet
\r\n \r\n {\r\n downloadCandidatesCSV();\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n Candidate List (Excel CSV)
\r\n Candidates
\r\n Scheduled Evaluators
\r\n Interview Limit
\r\n \r\n {\r\n setAllowInterviewLimit(e.target.checked);\r\n if (!e.target.checked) {\r\n updateCandidateLimit(null);\r\n } else {\r\n updateCandidateLimit(1);\r\n }\r\n }}\r\n />\r\n
\r\n \r\n \r\n \r\n {\r\n if (interviewLimit > 0) {\r\n const newCount = interviewLimit - 1 > 0 ? interviewLimit - 1 : 1;\r\n clearTimeout(candidateLimitTimeout);\r\n candidateLimitTimeout = setTimeout(() => {\r\n setIsUpdatingCandidateLimit(true);\r\n updateCandidateLimit(newCount);\r\n }, 1000);\r\n\r\n setInterviewLimit(newCount);\r\n setCandidateLimit(newCount);\r\n }\r\n }}\r\n >\r\n \r\n setInterviewLimit(e.target.value)}\r\n disabled\r\n />\r\n \r\n {\r\n const newCount = interviewLimit + 1 > 0 ? interviewLimit + 1 : 1;\r\n\r\n clearTimeout(candidateLimitTimeout);\r\n\r\n candidateLimitTimeout = setTimeout(() => {\r\n setIsUpdatingCandidateLimit(true);\r\n updateCandidateLimit(newCount);\r\n }, 1000);\r\n\r\n setInterviewLimit(newCount);\r\n setCandidateLimit(newCount);\r\n }}\r\n >\r\n \r\n \r\n
\r\n {scheduleDate ? scheduleDate.format('MMM DD, YYYY') : 'No Date'}
\r\n \r\n
\r\n Cancel
\r\n \r\n Clear Candidates
\r\n \r\n Clear All
\r\n \r\n \r\n }\r\n />\r\n \r\n );\r\n };\r\n\r\n const renderIndicator = () => {\r\n let indicatorMessage = 'Saved!';\r\n let icon = \r\n
\r\n );\r\n };\r\n\r\n const { headers = [], body = [] } = scheduleData || {};\r\n const validEvaluators = [];\r\n\r\n headers.forEach((h) => {\r\n const evs = (h.Evaluators && h.Evaluators.Evaluators) || [];\r\n evs.forEach((ev) => {\r\n if (!validEvaluators.includes(ev.pk_User)) {\r\n validEvaluators.push(ev.pk_User);\r\n }\r\n });\r\n });\r\n\r\n const candidatesAllGood = candidatesWithNoScheduleSent && candidatesWithNoScheduleSent.length <= 0;\r\n\r\n const status = candidatesAllGood\r\n ? 'All candidates have been sent their schedules!'\r\n : `${candidatesWithNoScheduleSent.length} ${\r\n candidatesWithNoScheduleSent.length > 1 ? 'candidates have' : 'candidate has'\r\n } not\r\n been sent their schedule yet!`;\r\n return (\r\n <>\r\n \r\n
\r\n \r\n {icon} {indicatorMessage}\r\n
\r\n \r\n {' '}\r\n \r\n {\r\n history.push('/administrator');\r\n }}\r\n >\r\n {' '}\r\n Sessions{' '}\r\n \r\n / \r\n Scheduler\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default TopBar;\r\n","import { faCheckSquare, faCircle, faSquare } from '@fortawesome/free-regular-svg-icons';\r\nimport {\r\n faCheck,\r\n faChevronLeft,\r\n faChevronRight,\r\n faDotCircle,\r\n faExclamationCircle,\r\n faMagic,\r\n faPlusSquare,\r\n faRedo,\r\n faTimes,\r\n faTimesCircle,\r\n faTrashAlt,\r\n faUserMd,\r\n faUserCircle,\r\n faInfo,\r\n faInfoCircle,\r\n faExclamationTriangle,\r\n faExclamation,\r\n} from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport Loading from 'Body/Statuses/Loading.js';\r\nimport { keys } from 'lodash';\r\nimport moment from 'moment-timezone';\r\nimport React, { useContext, useEffect, useRef, useState } from 'react';\r\nimport BootstrapTable from 'react-bootstrap-table-next'; // docs: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/about.html\r\nimport {\r\n Alert,\r\n Button,\r\n Input,\r\n Label,\r\n Modal,\r\n ModalBody,\r\n ModalHeader,\r\n Popover,\r\n PopoverBody,\r\n PopoverHeader,\r\n Spinner,\r\n UncontrolledTooltip,\r\n} from 'reactstrap';\r\nimport CustomInput from 'reactstrap/lib/CustomInput';\r\nimport Swal from 'sweetalert2';\r\nimport tinycolor from 'tinycolor2'; // docs: https://www.npmjs.com/package/tinycolor2\r\nimport { useAuth0 } from '../../../../auth0/reactAuth0Spa.js';\r\nimport { formatBearerToken, urlWithHttpProtocol } from '../../../../Common.functions';\r\nimport { DepartmentContext } from '../../../../DepartmentWrapper';\r\nimport { deleteData, fetchDataAgnostic, postDataAgnostic, putData } from '../../../../Services/dataApi';\r\nimport {\r\n addTimeToTimeSlots,\r\n clone,\r\n colors,\r\n generateSchedule,\r\n isCandidateWillBeUnscheduled,\r\n setupSplitCountTrackers,\r\n isTimeRangeOverlap,\r\n extractHeaderIds,\r\n getScheduleStartAndEndTime,\r\n generateScheduleColumn,\r\n clearTimeslots,\r\n clearColumns,\r\n setupSplitBlockCandidateTrackers,\r\n} from '../../../../Services/schedule';\r\nimport AddColumnPopover from './AddColumnPopover';\r\nimport CloneModal from './CloneModal/CloneModal.js';\r\nimport ConfirmModal from './ConfirmModal';\r\nimport FlexEventDetailModal from './FlexEventDetailModal/FlexEventDetailModal.js';\r\nimport HeaderDetailDropDown from './HeaderDetailDropdown';\r\nimport './Schedule.style.css';\r\nimport ScheduleDetailModal from './ScheduleDetailModal';\r\nimport ScheduleWizard from './ScheduleWizard/ScheduleWizard.js';\r\nimport style from './style.js';\r\nimport TimeSlotHeaderPopover from './TimeSlotHeaderPopover';\r\nimport TimeSlotPopover from './TimeSlotPopover';\r\nimport TopBar from './TopBar';\r\nimport { useAlert } from 'react-alert';\r\n\r\nlet attendanceChecker = null;\r\n\r\nlet fileInputs = document.getElementsByClassName('swal2-file');\r\n\r\nconst Schedule = ({\r\n history,\r\n showTopBar,\r\n isEmbedded,\r\n isSuperUserPanel,\r\n pk_InterviewDate,\r\n forcedContext,\r\n embeddedRef,\r\n setParentScheduleData,\r\n setParentColumnTracker,\r\n setParentRowTracker,\r\n setParentCandidates,\r\n allowScheduleInteraction = false,\r\n}) => {\r\n const [evaluators, setEvaluators] = useState({});\r\n const [candidates, setCandidates] = useState({}); // get from API, contains bgcolor\r\n const [candidatesArray, setCandidatesArray] = useState([]); // used for child components. turning object into array messes up useEffects in children watching that prop.\r\n const [scheduleData, setScheduleData] = useState(null);\r\n const scheduleLastUpdate = useRef();\r\n\r\n const [scheduleID, setScheduleID] = useState(null);\r\n\r\n const [generatedScheduleData, setGeneratedScheduleData] = useState(null);\r\n const [candidateLimit, setCandidateLimit] = useState(1);\r\n\r\n const [selectedCell, setSelectedCell] = useState(null);\r\n const [selectedScheduleBlock, setSelectedScheduleBlock] = useState(null); // Can't get it off of normal click events on table\r\n const [splitData, setSplitData] = useState(null); // data to be submitted before splitting. Used when Split confirm modal is triggered.\r\n\r\n const [showScheduleDetailModal, setShowScheduleDetailModal] = useState(false);\r\n const [showUnsavedChangeModal, setShowUnsavedChangeModal] = useState(false);\r\n const [showGenerateDataPanel, setShowGenerateDataPanel] = useState(false);\r\n const [showSplitCellModal, setShowSplitCellModal] = useState(false);\r\n const [showSplitCellConfirmModal, setShowSplitCellConfirmModal] = useState(false);\r\n const [showHeaderPopOver, setShowHeaderPopOver] = useState({});\r\n const [showTimeSlotPopover, setShowTimeSlotPopover] = useState({});\r\n const [showAddColumnPopover, setShowAddColumnPopover] = useState(false);\r\n const [showFlexEventDetailModal, setShowFlexEventDetailModal] = useState(false);\r\n const [showCloneModal, setShowCloneModal] = useState(false);\r\n\r\n // ====================Clone Schedule ========================//\r\n const [willCopyHeaders, setWillCopyHeaders] = useState(true);\r\n const [willCopyStartTime, setWillCopyStartTime] = useState(true);\r\n const [willCopyInterviewDuration, setWillCopyInterviewDuration] = useState(true);\r\n const [willCopyPassingDuration, setWillCopyPassingDuration] = useState(true);\r\n const [willCopyCandidateAssignments, setWillCopyCandidateAssignments] = useState(true);\r\n\r\n const [willCopyTimeSlots, setWillCopyTimeSlots] = useState(true);\r\n const [willCopyCustomEvents, setWillCopyCustomEvents] = useState(true);\r\n const [willCopyCustomDurations, setWillCopyCustomDurations] = useState(true);\r\n\r\n const [willCopyFlexEvents, setWillCopyFlexEvents] = useState(true);\r\n const [willCopyFlexEventEvaluators, setWillCopyFlexEventEvaluators] = useState(true);\r\n const [willCopyEvaluators, setWillCopyEvaluators] = useState(true);\r\n const [willCopyFocuses, setWillCopyFocuses] = useState(true);\r\n const [interviewDateToClone, setInterviewDateToClone] = useState();\r\n // ============================================================== //\r\n\r\n const [isAddingColumn, setIsAddingColumn] = useState(false);\r\n const [isGeneratingSchedule, setIsGeneratingSchedule] = useState(false);\r\n const [isAddingCandidate, setIsAddingCandidate] = useState(false);\r\n const [isTableLoaded, setIsTableLoaded] = useState(false);\r\n const [isScheduleDataError, setIsScheduleDataError] = useState(false);\r\n\r\n // ====== For Load indicators on topbar ============== //\r\n const [isSubmitting, setIsSubmitting] = useState(false);\r\n const [isFetching, setIsFetching] = useState(false);\r\n const [isCloning, setIsCloning] = useState(false);\r\n // ==================================================== //\r\n\r\n const [saveHooks, setSaveHooks] = useState({});\r\n\r\n // ==================== Trackers ==============================//\r\n const [rowTracker, setRowTracker] = useState({}); // pk_Timeslot keys with array of candidates in them.\r\n const [columnTracker, setColumnTracker] = useState({}); // pk_ScheduleAssignment keys with array of candidates in them\r\n const [indexedFlexEvents, setIndexedFlexEvents] = useState({}); // pk_FlexEvent keys with flex event value\r\n const [indexedFlexEventEvaluators, setIndexedFlexEventEvaluators] = useState({}); // pk_FlexEvent keys with array of pk_User\r\n const [indexedEvaluatorFlexEvents, setIndexedEvaluatorFlexEvents] = useState({}); // pk_User with array of pk_FlexEvent\r\n const [splitCountTracker, setSplitCountTracker] = useState({});\r\n const [splitBlockCandidateTracker, setSplitBlockCandidateTracker] = useState({}); // pk_Candidate keys and array of pk_ScheduleBlock, SortOrder\r\n // ============================================================ //\r\n\r\n const [interviewDates, setInterviewDates] = useState([]);\r\n const [pendingCandidates, setPendingCandidates] = useState({}); // keys are \"\r\n
\r\n \r\n
\r\n {renderIndicator()}\r\n \r\n
\r\n\r\n \r\n {scheduleDate ? scheduleDate.utcOffset(0, true).format('MMM DD, YYYY') : 'No Date'}\r\n
\r\n \r\n {scheduleData && scheduleData.metaData && scheduleData.metaData.Label\r\n ? scheduleData.metaData.Label\r\n : ''}\r\n
\r\n \r\n
\r\n \r\n \r\n Missing All Day URL! \r\n ) : null} */}\r\n\r\n {headers.length <= 0 && body.length <= 1 ? (\r\n {\r\n toggleScheduleWizard();\r\n }}\r\n >\r\n Summon Schedule Wizard! \r\n ) : null}\r\n
\r\n \r\n
\r\n \r\n ) : null}\r\n\r\n {headers.length <= 0 && body.length <= 1 ? (\r\n \r\n
\r\n {renderPopOvers()}\r\n {renderModals()}\r\n \r\n
\r\n \r\n {\r\n // if (dateIsInThePast && !willEditThePast) {\r\n // const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n // if (!continueProcess) {\r\n // return;\r\n // }\r\n // }\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n {validEvaluators.length} Evaluators
\r\n \r\n {\r\n // if (dateIsInThePast && !willEditThePast) {\r\n // const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n // if (!continueProcess) {\r\n // return;\r\n // }\r\n // }\r\n }}\r\n >\r\n
\r\n \r\n {status} \r\n
\r\n \r\n \r\n {Object.keys(candidates).length} Candidates\r\n
\r\n \r\n {}}\r\n // disabled={dateIsInThePast && !willEditThePast}\r\n >\r\n
\r\n \r\n {allowInterviewLimit\r\n ? `Limit Candidates to ${interviewLimit} ${interviewLimit > 1 ? 'Interviews' : 'Interview'}`\r\n : 'Candidate Limits disabled'}\r\n
\r\n \r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n\r\n const scheduledCandidates = countScheduledCandidates(Object.values(candidates));\r\n\r\n if (meetingInProgress() && scheduledCandidates > 0) {\r\n Swal.fire(\r\n 'Meeting already in progress!',\r\n 'Sorry, this schedule is currently in progress. You will need to manually make any necessary adjustments. Proceed with caution. Contact support if you need advice for best practices.',\r\n 'error',\r\n );\r\n return;\r\n }\r\n\r\n if (Object.keys(candidates).length <= 0) {\r\n Swal.fire('No Candidates!', 'There are no candidates to make a schedule with!', 'info');\r\n return;\r\n }\r\n\r\n const newScheduleBody = generateSchedule(clone(clone(myScheduleData.current)), candidates, {\r\n interviewLimit,\r\n mode: generateMode,\r\n allowInterviewLimit,\r\n clearTable: true,\r\n });\r\n\r\n const newScheduleData = JSON.parse(JSON.stringify(scheduleData));\r\n newScheduleData.body = newScheduleBody.newBody;\r\n newScheduleData.interviewCountTracker = newScheduleBody.interviewCountTracker;\r\n\r\n setGeneratedScheduleData(newScheduleData);\r\n setShowGenerateDataPanel(true);\r\n if (setPendingCandidates) {\r\n setPendingCandidates(newScheduleBody.pendingItems);\r\n }\r\n setupTrackers(newScheduleData);\r\n }}\r\n >\r\n
\r\n {/* \r\n
\r\n \r\n \r\n {generatedScheduleData ? 'Regenerate Schedule' : 'Generate Schedule'}\r\n
\r\n \r\n {\r\n setShowCloneModal(!showCloneModal);\r\n }}\r\n >\r\n
*/}\r\n \r\n
\r\n \r\n Clone Schedule
\r\n \r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n setShowClearScheduleConfirmation(true);\r\n // setGeneratedScheduleData(null);\r\n // submitGeneratedSchedule(clearTimeslots(JSON.parse(JSON.stringify(scheduleData.body))));\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n Clear Schedule
\r\n \r\n {column.text}{' '}\r\n {StandardPassingDurationInMinutes == 0 ? (\r\n <>\r\n \r\n Warning: No passing period - This may affect some of your notifications.\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n }\r\n\r\n if (column.text === 'Flex Events') {\r\n return (\r\n \r\n {\r\n if (generatedScheduleData) {\r\n e.stopPropagation();\r\n return;\r\n }\r\n e.stopPropagation();\r\n setShowFlexEventDetailModal(true);\r\n }}\r\n >\r\n {\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n e.stopPropagation();\r\n setHasFlexColumn(false);\r\n }}\r\n />\r\n ) : null}\r\n
\r\n \r\n );\r\n } else {\r\n const key = column.dataField.toString();\r\n const candidateCount = columnTracker[key] ? columnTracker[key].length : 0;\r\n\r\n return (\r\n {column.text || ''}
\r\n {countFlexEvents() <= 0 ? (\r\n \r\n {/* {column.dataField} */}\r\n \r\n \r\n
\r\n ) : null}\r\n \r\n\r\n {rawHeader && rawHeader.pk_ScheduleAssignment != null ? (\r\n \r\n {`${column.text} ${candidateCount > 0 ? `(${candidateCount})` : ''} `}\r\n
\r\n {VirtualMeetingMode === 'ExternalColumn' && !VirtualRoomURL ? (\r\n {column.label || ''}
\r\n {generatedScheduleData ? null : renderHeaderPopOver(column)}\r\n {f.Name}
;\r\n })\r\n : 'No Focuses'}\r\n \r\n {/* {row.pk_Timeslot} */}\r\n {moment.tz(row.slot, null).format('hh:mm A')}\r\n {generatedScheduleData || row.pk_Timeslot === 'END' ? null : renderTimeSlotPopover(row)}\r\n {(!StandardPassingDurationInMinutes && !CustomPassingDurationInMinutes) ||\r\n CustomPassingDurationInMinutes == 0 ? (\r\n <>\r\n \r\n Warning: No passing period - This may affect some of your notifications.\r\n \r\n \r\n ) : null}\r\n {urlIssue ? (\r\n <>\r\n \r\n Warning: {isCustomAndNoLink ? `Custom Event URL is missing!` : `Main Room URL is missing!`}\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n }\r\n\r\n if (row.pk_Timeslot === 'END') {\r\n return (\r\n \r\n {row.endTimesText}\r\n
\r\n );\r\n }\r\n\r\n const {\r\n ScheduleBlockEntries,\r\n isFlexEvent,\r\n isUnavailable,\r\n cellState,\r\n unavailableEvaluators,\r\n availableEvaluators,\r\n CustomMeetingTitle,\r\n flexEvents = [],\r\n pk_ScheduleAssignment,\r\n } = cell;\r\n\r\n const { metaData } = scheduleData;\r\n\r\n let cellHasCandidates = false;\r\n const momentStart = moment.tz(slot, null);\r\n const momentEnd = moment.tz(slotEnd, null);\r\n const now = moment(`${momentStart.format('MMM DD, YYYY')} ${moment().format('hh:mm A')}`);\r\n\r\n ScheduleBlockEntries.forEach((block) => {\r\n if (block.Candidates && block.Candidates.length > 0) {\r\n cellHasCandidates = true;\r\n }\r\n });\r\n\r\n let cellContent = '';\r\n const pendingKeysInThisCell =\r\n Object.keys(pendingCandidates).filter((key) => {\r\n return key.indexOf(`${row.pk_Timeslot}_${cell.pk_ScheduleAssignment}_`) >= 0;\r\n }) || [];\r\n\r\n const pendingItemsInThisCell = pendingKeysInThisCell.map((key) => {\r\n return pendingCandidates[key];\r\n });\r\n\r\n const renderContent = (candidateList = [], scheduleBlock) => {\r\n const candidatesToRender = [];\r\n const { flexEventEvaluators = [], FlexEvents = [] } = scheduleBlock;\r\n const candidatesInFlexEvent = [];\r\n\r\n let flexEventsForCell = 0;\r\n FlexEvents.forEach((flexEvent) => {\r\n const { AttendingUsers = [], AttendingCandidates = [] } = flexEvent;\r\n const flexEventHasEvaluatorForColumn = AttendingUsers.filter((u) => {\r\n return flexEventEvaluators.find((e) => {\r\n return e.pk_User == u.pk_User;\r\n });\r\n });\r\n\r\n if (flexEventHasEvaluatorForColumn.length > 0) {\r\n flexEventsForCell++;\r\n }\r\n\r\n AttendingCandidates.forEach((c) => {\r\n candidatesInFlexEvent.push(c.pk_Candidate);\r\n });\r\n });\r\n\r\n const pendingItemKey = `${pk_Timeslot}_${pk_ScheduleAssignment}${\r\n scheduleBlock ? `_${scheduleBlock.SortOrder}` : ''\r\n }`;\r\n\r\n const isPendingItem = pendingCandidates[pendingItemKey] != null; // TO DO: Move to per-scheduleBlock\r\n const candidateAttendanceObject = {};\r\n let attendanceObject = {};\r\n\r\n if (attendanceData) {\r\n if (attendanceData.ScheduleBlocks && attendanceData.ScheduleBlocks[scheduleBlock.pk_ScheduleBlock]) {\r\n attendanceObject = attendanceData.ScheduleBlocks[scheduleBlock.pk_ScheduleBlock];\r\n } else if (attendanceData.TimeSlots && attendanceData.TimeSlots[row.pk_Timeslot]) {\r\n attendanceObject = attendanceData.TimeSlots[row.pk_Timeslot];\r\n }\r\n }\r\n\r\n if (attendanceObject.Candidates) {\r\n attendanceObject.Candidates.forEach((c) => {\r\n candidateAttendanceObject[c.fk_Candidate] = c;\r\n });\r\n }\r\n\r\n let evaluatorsPresent = 0;\r\n\r\n if (attendanceObject.Evaluators) {\r\n const { availableEvaluators = [] } = cell;\r\n\r\n attendanceObject.Evaluators.forEach((e) => {\r\n // To fix Admin appearing in Cell\r\n const evaluatorIsInColumn = availableEvaluators.find((ae) => {\r\n return ae.pk_User == e.fk_User;\r\n });\r\n\r\n if (evaluatorIsInColumn) {\r\n if (e.EnableActivelyAttending) {\r\n evaluatorsPresent++;\r\n }\r\n }\r\n });\r\n }\r\n\r\n candidateList.forEach((candidate, i) => {\r\n if (candidate == null) {\r\n return;\r\n }\r\n\r\n const candidateIsInFlexEvent = candidatesInFlexEvent.indexOf(candidate.pk_Candidate) >= 0;\r\n const candidateIsPresent =\r\n attendanceObject.Candidates && attendanceObject.Candidates.length\r\n ? attendanceObject.Candidates[0].IsActive && attendanceObject.Candidates[0].EnableActivelyAttending\r\n : 0;\r\n\r\n const key = `${pk_Timeslot}_${pk_ScheduleAssignment}${scheduleBlock ? `_${scheduleBlock.SortOrder}` : ''}`;\r\n const backgroundColor =\r\n candidates && Object.keys(candidates).length > 0 && candidates[candidate.pk_Candidate]\r\n ? candidates[candidate.pk_Candidate].color\r\n : null;\r\n\r\n const color = backgroundColor ? (tinycolor(backgroundColor).isLight() ? 'black' : 'white') : 'black';\r\n const border =\r\n isPendingItem && candidate.pk_Candidate != null\r\n ? '5px solid #a1e3a5 '\r\n : `5px solid ${backgroundColor || '#d4d4d4'}`;\r\n const candidateInterviewCount =\r\n generatedScheduleData &&\r\n generatedScheduleData.interviewCountTracker &&\r\n generatedScheduleData.interviewCountTracker[candidate.pk_Candidate]\r\n ? generatedScheduleData.interviewCountTracker[candidate.pk_Candidate]\r\n : 0;\r\n\r\n const flexEventEvaluatorWarningID = `cell_flexEvent_warning_${row.pk_Timeslot}_${cell.pk_ScheduleAssignment}_${\r\n scheduleBlock ? `_${scheduleBlock.SortOrder}` : ''\r\n }`;\r\n const infoInterviewCountID = `info_${key}_interviewCounter`;\r\n const infoEvaluatorAttendanceID = `info_${key}_evaluatorAttendance`;\r\n const infoCandidateAttendanceID = `info_${key}_candidateAttendance`;\r\n const problematicCandidateID = `problematic_candidate_${pk_Timeslot}_${pk_ScheduleAssignment}_${candidate.pk_Candidate}`;\r\n const flexEventCandidateWarningID = `cell_flexEvent_candidate_warning_${row.pk_Timeslot}_${\r\n cell.pk_ScheduleAssignment\r\n }_${scheduleBlock ? `_${scheduleBlock.SortOrder}` : ''}`;\r\n\r\n const capsuleID = `capsule_${pk_ScheduleAssignment}_${pk_Timeslot}_${scheduleBlock.SortOrder}`;\r\n const capsuleLabelID = `capsule_${pk_ScheduleAssignment}_${pk_Timeslot}_${scheduleBlock.SortOrder}_label`;\r\n const capsuleLabelInnerID = `capsule_${pk_ScheduleAssignment}_${pk_Timeslot}_${scheduleBlock.SortOrder}_label_inner`;\r\n\r\n candidatesToRender.push(\r\n <>\r\n \r\n \r\n 0 ? '#298dff' : 'grey',\r\n fontWeight: 'bold',\r\n fontSize: 10,\r\n marginRight: 2,\r\n minWidth: 17,\r\n minHeight: 17,\r\n textAlign: 'center',\r\n }}\r\n >\r\n {evaluatorsPresent ? evaluatorsPresent : ''}\r\n
\r\n \r\n {attendanceObject.Evaluators\r\n ? attendanceObject.Evaluators.map((evaluator) => {\r\n const { EvaluatorFirstName, EvaluatorLastName, EnableActivelyAttending } = evaluator;\r\n\r\n const evaluatorIsInColumn = availableEvaluators.find((ae) => {\r\n return ae.pk_User == evaluator.fk_User;\r\n });\r\n\r\n if (evaluatorIsInColumn && EnableActivelyAttending) {\r\n return (\r\n <>\r\n {EvaluatorFirstName || ''} {EvaluatorLastName || ''}\r\n
\r\n \r\n );\r\n }\r\n })\r\n : ''}\r\n
\r\n \r\n Candidate is present!\r\n \r\n
\r\n ) : null}\r\n \r\n \r\n Candidate has no Data within the current Department! This may be because this candidate was\r\n scheduled and then deleted some time after, without unscheduling before.\r\n \r\n
\r\n )}\r\n\r\n {candidateIsInFlexEvent ? (\r\n \r\n \r\n Candidate is in a Flex Event at this time!\r\n \r\n
\r\n ) : null}\r\n\r\n {generatedScheduleData != null ? (\r\n \r\n
\r\n \r\n Some Evaluators might be in a Flex Event and be unavailable during this time. (\r\n {flexEventEvaluators.length} of {availableEvaluators.length + unavailableEvaluators.length}\r\n ).\r\n
\r\n \r\n
\r\n \r\n Unavailable ({flexEventsForCell > 1 ? 'Several' : FlexEvents[0].FlexEventName}):\r\n
\r\n \r\n {flexEventEvaluators.map((evaluator) => {\r\n if (evaluator == null) {\r\n }\r\n return
\r\n {`${evaluator ? evaluator.UserLast : 'Null Evaluator'}\\n`}
;\r\n })}\r\n \r\n
\r\n \r\n \r\n ) : null}\r\n \r\n ,\r\n );\r\n });\r\n } else {\r\n // EMPTY CELL!\r\n candidatesToRender.push(\r\n \r\n Some Evaluators might be in a Flex Event and be unavailable during this time. (\r\n {flexEventEvaluators.length} of {availableEvaluators.length + unavailableEvaluators.length}\r\n ).\r\n
\r\n \r\n
\r\n \r\n Unavailable ({flexEventsForCell > 1 ? 'Several' : FlexEvents[0].FlexEventName}):\r\n
\r\n \r\n {flexEventEvaluators.map((evaluator) => {\r\n if (evaluator == null) {\r\n }\r\n return
\r\n {`${evaluator ? evaluator.UserLast : 'Null Evaluator'}\\n`}
;\r\n })}\r\n |
\r\n ) : (\r\n `|`\r\n )}\r\n\r\n {cellState === 'Flex Event' && flexEventEvaluators && flexEventEvaluators.length > 0 ? (\r\n <>\r\n \r\n
\r\n \r\n \r\n ) : null}\r\n ,\r\n );\r\n }\r\n }\r\n return candidatesToRender;\r\n };\r\n\r\n if (isFlexEvent) {\r\n let backgroundColor = '#d4d4d4';\r\n if (cellState === 'Unavailable') {\r\n backgroundColor = '#ff3d3d';\r\n } else if (cellState === 'Warning') {\r\n backgroundColor = '#ffc180';\r\n }\r\n\r\n const color = backgroundColor ? (tinycolor(backgroundColor).isLight() ? 'black' : 'white') : 'black';\r\n const border = `5px solid ${backgroundColor}`;\r\n\r\n if (cellState === 'Warning' || (cellState === 'Unavailable' && cellHasCandidates)) {\r\n const renderContentForWarning = (candidateList = [], scheduleBlock) => {\r\n const { pk_Timeslot } = row;\r\n const { pk_ScheduleAssignment } = cell;\r\n\r\n const candidatesToRender = [];\r\n const pendingItemKey = `${pk_Timeslot}_${pk_ScheduleAssignment}${\r\n scheduleBlock ? `_${scheduleBlock.SortOrder}` : '_0'\r\n }`;\r\n const isPendingItem = pendingCandidates[pendingItemKey] != null; // TO DO: Move to per-scheduleBlock\r\n candidateList.forEach((candidate, i) => {\r\n if (candidates && Object.keys(candidates).length > 0 && candidates[candidate.pk_Candidate]) {\r\n backgroundColor = candidates[candidate.pk_Candidate].color;\r\n } else {\r\n backgroundColor = '#ffc180';\r\n }\r\n\r\n const color = backgroundColor ? (tinycolor(backgroundColor).isLight() ? 'black' : 'white') : 'black';\r\n const border = isPendingItem ? '5px solid #a1e3a5 ' : `5px solid ${backgroundColor || '#d4d4d4'}`;\r\n candidatesToRender.push(\r\n <>\r\n \r\n Some Evaluators might be in a Flex Event and be unavailable during this time. (\r\n {flexEventEvaluators.length} of {availableEvaluators.length + unavailableEvaluators.length}).\r\n
\r\n \r\n
\r\n \r\n Unavailable ({flexEventsForCell > 1 ? 'Several' : FlexEvents[0].FlexEventName}):\r\n
\r\n \r\n {flexEventEvaluators.map((evaluator) => {\r\n if (evaluator == null) {\r\n }\r\n return
\r\n {`${evaluator ? evaluator.UserLast : 'Null Evaluator'}\\n`}
;\r\n })}\r\n \r\n
\r\n \r\n Some Evaluators are Unavailable during this time ({unavailableEvaluators.length} of{' '}\r\n {availableEvaluators.length + unavailableEvaluators.length}).\r\n
\r\n \r\n
\r\n Unavailable:
\r\n \r\n {unavailableEvaluators.map((evaluator) => {\r\n if (evaluator == null) {\r\n }\r\n return
\r\n Available:\r\n {`${evaluator ? evaluator.UserLast : 'Null Evaluator'}\\n`}
;\r\n })}\r\n \r\n {availableEvaluators.map((evaluator) => {\r\n return
\r\n {`${evaluator.UserLast}\\n`}
;\r\n })}\r\n \r\n
\r\n \r\n Some Evaluators are Unavailable during this time ({unavailableEvaluators.length} of{' '}\r\n {availableEvaluators.length + unavailableEvaluators.length}).\r\n
\r\n \r\n
\r\n Unavailable:
\r\n \r\n {unavailableEvaluators.map((evaluator) => {\r\n if (evaluator == null) {\r\n }\r\n return
\r\n Available:\r\n {`${evaluator ? evaluator.UserLast : 'Null Evaluator'}\\n`}
;\r\n })}\r\n \r\n {availableEvaluators.map((evaluator) => {\r\n return
\r\n {`${evaluator.UserLast}\\n`}
;\r\n })}\r\n \r\n
\r\n \r\n Some Evaluators are Unavailable during this time ({unavailableEvaluators.length} of{' '}\r\n {availableEvaluators.length + unavailableEvaluators.length}).\r\n
\r\n \r\n
\r\n Unavailable:
\r\n \r\n {unavailableEvaluators.map((evaluator) => {\r\n if (evaluator == null) {\r\n }\r\n return
\r\n Available:\r\n {`${evaluator ? evaluator.UserLast : 'Null Evaluator'}\\n`}
;\r\n })}\r\n \r\n {availableEvaluators.map((evaluator) => {\r\n return
\r\n {`${evaluator.UserLast}\\n`}
;\r\n })}\r\n \r\n {isTableLoaded\r\n ? ScheduleBlockEntries.map((scheduleBlock, i) => {\r\n const { Candidates = [], slot, slotEnd } = scheduleBlock;\r\n // const rowStartTime = moment.tz(slot, null).format('MMM DD, YYYY hh:mm A');\r\n // const rowEndTime = moment\r\n // .tz(slotEnd, null)\r\n // .subtract(5, 'seconds')\r\n // .format('MMM DD, YYYY hh:mm A');\r\n const cTime = moment.tz(metaData.TimeZone).format('MMM DD, YYYY hh:mm A');\r\n\r\n const isCurrentTime = isTimeRangeOverlap([slot, slotEnd], [cTime, cTime]);\r\n cellContent = renderContentForWarning(Candidates, scheduleBlock);\r\n return (\r\n 0\r\n ? style.splitCell(isCurrentTime)\r\n : { border: isCurrentTime && i > 0 ? '3px solid green' : null }\r\n }\r\n >\r\n {cellContent}\r\n
\r\n );\r\n })\r\n : null}\r\n \r\n );\r\n } else {\r\n return (\r\n \r\n {isTableLoaded\r\n ? ScheduleBlockEntries.map((scheduleBlock, i) => {\r\n let blockIsUnavailable = false; // Checks for Overlap\r\n const { Candidates = [], slot, slotEnd } = scheduleBlock;\r\n const rowStartTime = moment.tz(slot, null).format('MMM DD, YYYY hh:mm A');\r\n const rowEndTime = moment\r\n .tz(slotEnd, null)\r\n .subtract(5, 'seconds')\r\n .format('MMM DD, YYYY hh:mm A');\r\n const cTime = moment.tz(metaData.TimeZone).format('MMM DD, YYYY hh:mm A');\r\n\r\n const isCurrentTime = isTimeRangeOverlap([slot, slotEnd], [cTime, cTime]);\r\n\r\n if (/*blockIsUnavailable && */ isUnavailable) {\r\n return (\r\n 0\r\n ? style.splitCell(isCurrentTime)\r\n : { border: isCurrentTime && i > 0 ? '3px solid green' : null }\r\n }\r\n onClick={(e) => {\r\n if (\r\n scheduleBlock &&\r\n /*backgroundColor &&*/ (!isEmbedded || allowScheduleInteraction) &&\r\n generatedScheduleData == null\r\n ) {\r\n setSelectedScheduleBlock(scheduleBlock);\r\n } else {\r\n e.stopPropagation();\r\n }\r\n }}\r\n >\r\n {\r\n if (generatedScheduleData) {\r\n e.stopPropagation();\r\n }\r\n }}\r\n >\r\n {isUnavailable\r\n ? `UNAVAILABLE`\r\n : cell.flexEventName\r\n ? cell.flexEventName\r\n : 'UNKNOWN FLEX EVENT'}\r\n
\r\n \r\n );\r\n } else {\r\n return (\r\n \r\n {isTableLoaded\r\n ? ScheduleBlockEntries.map((scheduleBlock, i) => {\r\n const pendingItemKey = `${pk_Timeslot}_${pk_ScheduleAssignment}${\r\n scheduleBlock ? `_${scheduleBlock.SortOrder}` : ''\r\n }`;\r\n\r\n const { Candidates = [], slot, slotEnd } = scheduleBlock;\r\n const rowStartTime = moment.tz(slot, null).format('MMM DD, YYYY hh:mm A');\r\n const rowEndTime = moment\r\n .tz(slotEnd, null)\r\n .subtract(5, 'seconds')\r\n .format('MMM DD, YYYY hh:mm A');\r\n const cTime = moment.tz(metaData.TimeZone).format('MMM DD, YYYY hh:mm A');\r\n\r\n const isCurrentTime = isTimeRangeOverlap([slot, slotEnd], [cTime, cTime]);\r\n\r\n const isPendingItem = pendingCandidates[pendingItemKey] != null; // TO DO: Move to per-scheduleBlock\r\n if (Candidates.length > 0) {\r\n cellContent = renderContent(Candidates, scheduleBlock);\r\n return (\r\n 0\r\n ? style.splitCell(isCurrentTime)\r\n : { border: isCurrentTime && i > 0 ? '3px solid green' : null }\r\n }\r\n >\r\n {cellContent}\r\n
\r\n );\r\n } else if (isPendingItem) {\r\n const cellPendingCandidates = pendingCandidates[pendingItemKey] || [];\r\n const candidate = cellPendingCandidates[0];\r\n const backgroundColor =\r\n candidates && Object.keys(candidates).length > 0 ? candidates[candidate.pk_Candidate].color : null;\r\n const color = backgroundColor ? (tinycolor(backgroundColor).isLight() ? 'black' : 'white') : 'black';\r\n const border = isPendingItem ? '5px solid #a1e3a5 ' : `5px solid ${backgroundColor}`;\r\n\r\n return (\r\n \r\n {isTableLoaded\r\n ? // ScheduleBlockEntries ? (\r\n ScheduleBlockEntries.map((scheduleBlock, i) => {\r\n const { Candidates = [], slot, slotEnd } = scheduleBlock;\r\n\r\n const cTime = moment.tz(metaData.TimeZone).format('MMM DD, YYYY hh:mm A');\r\n const isCurrentTime = isTimeRangeOverlap([slot, slotEnd], [cTime, cTime]);\r\n cellContent = renderContent(Candidates, scheduleBlock);\r\n\r\n return (\r\n 0\r\n ? style.splitCell(isCurrentTime)\r\n : { border: isCurrentTime && i > 0 ? '3px solid green' : null }\r\n }\r\n >\r\n {cellContent}\r\n
\r\n );\r\n })\r\n : null}\r\n \r\n );\r\n } else {\r\n return (\r\n \r\n {row.endTimesText}\r\n
\r\n );\r\n }\r\n\r\n const isOverlap = flexEvents && flexEvents.length > 1;\r\n\r\n return (\r\n {flexEvent.EventName}
;\r\n } else if (flexEvent.FlexEventName) {\r\n return {flexEvent.FlexEventName}
;\r\n }\r\n })}\r\n {flexEvent.EventName}
;\r\n } else if (flexEvent.FlexEventName) {\r\n return {flexEvent.FlexEventName}
;\r\n }\r\n })}\r\n {flexEvent.EventName}
;\r\n } else if (flexEvent.FlexEventName) {\r\n return {flexEvent.FlexEventName}
;\r\n }\r\n })}\r\n \r\n
\r\n \r\n {' '}\r\n
\r\n {header.text || ''}
\r\n \r\n
\r\n \r\n {/* {saveHooks[header.dataField] && saveHooks[header.dataField].isChanged ? (\r\n {\r\n // headerPopoverRefs[header.dataField].onSave();\r\n if (saveHooks[header.dataField]) {\r\n saveHooks[header.dataField].onSave();\r\n }\r\n }}\r\n />\r\n ) : null}\r\n {saveHooks[header.dataField] && saveHooks[header.dataField].isChanged ? (\r\n {\r\n if (saveHooks[header.dataField] && saveHooks[header.dataField].onClear) {\r\n saveHooks[header.dataField].onClear();\r\n }\r\n }}\r\n />\r\n ) : null} */}\r\n {\r\n e.stopPropagation();\r\n const newShowHeaderPopOver = { ...showHeaderPopOver };\r\n const visibility = newShowHeaderPopOver[header.dataField] || {};\r\n visibility.self = false;\r\n visibility.showRoomNumberPopover = false;\r\n Object.keys(visibility).forEach((key) => {\r\n visibility[key] = false;\r\n });\r\n newShowHeaderPopOver[header.dataField] = { ...visibility };\r\n setShowHeaderPopOver(newShowHeaderPopOver);\r\n }}\r\n />\r\n
\r\n \r\n {\r\n const newShowHeaderPopOver = { ...showHeaderPopOver };\r\n const visibility = newShowHeaderPopOver['timeSlotHeader'] || {};\r\n visibility.self = false;\r\n visibility.showRoomNumberPopover = false;\r\n newShowHeaderPopOver['timeSlotHeader'] = visibility;\r\n setShowHeaderPopOver(newShowHeaderPopOver);\r\n }}\r\n />\r\n
\r\n Manage Time
\r\n \r\n {\r\n e.stopPropagation();\r\n const newShowTimeSlotPopover = { ...showTimeSlotPopover };\r\n\r\n newShowTimeSlotPopover[pk_Timeslot] = { self: false };\r\n setShowTimeSlotPopover(newShowTimeSlotPopover);\r\n }}\r\n />\r\n
\r\n {`${moment.tz(slotTime, null).format('hh:mm A')} - ${moment\r\n .tz(slotEndTime, null)\r\n .format('hh:mm A')}`}
\r\n \r\n {\r\n setShowAddColumnPopover(false);\r\n }}\r\n />\r\n
\r\n Add Column
\r\n Cancel
\r\n \r\n Discard
\r\n \r\n Accept
\r\n \r\n \r\n }\r\n />\r\n );\r\n };\r\n\r\n const getMaxSplitCount = () => {\r\n if (selectedCell == null) {\r\n return 1;\r\n }\r\n const col = parseInt(selectedCell.column.dataField);\r\n const { StandardDurationInMinutes, StandardPassingDurationInMinutes } = scheduleData.metaData;\r\n let lowestSplitCount = null;\r\n scheduleData.body.forEach((row, i) => {\r\n if (i == scheduleData.body.length - 1) {\r\n return;\r\n }\r\n const { CustomDurationInMinutes = 0, CustomPassingDurationInMinutes = 0 } = row[col];\r\n const duration =\r\n CustomDurationInMinutes != null ? parseInt(CustomDurationInMinutes) : parseInt(StandardDurationInMinutes);\r\n const passingDuration = CustomPassingDurationInMinutes\r\n ? parseInt(CustomPassingDurationInMinutes)\r\n : parseInt(StandardPassingDurationInMinutes);\r\n\r\n if (lowestSplitCount == null || duration + passingDuration < lowestSplitCount) {\r\n lowestSplitCount = duration + passingDuration;\r\n }\r\n });\r\n return lowestSplitCount;\r\n };\r\n\r\n const renderSplitCellModal = () => {\r\n return (\r\n \r\n
\r\n \r\n {\r\n let newValue = parseInt(e.target.value);\r\n if (newValue < 1) {\r\n newValue = 1;\r\n }\r\n const maxSplitCount = getMaxSplitCount();\r\n\r\n if (newValue > maxSplitCount) {\r\n newValue = maxSplitCount;\r\n }\r\n\r\n setCellSplitCount(newValue);\r\n }}\r\n />\r\n
\r\n\r\n \r\n {\r\n setShowSplitCellModal(false);\r\n }}\r\n >\r\n Cancel\r\n \r\n {\r\n const { row, column } = selectedCell;\r\n const { dataField } = column;\r\n const { pk_Timeslot } = row;\r\n\r\n const data = {\r\n pk_ScheduleAssignment: parseInt(dataField),\r\n pk_Timeslot,\r\n };\r\n setSplitData(data);\r\n\r\n const willCandidateBeUnscheduled = isCandidateWillBeUnscheduled(splitCountTracker, {\r\n timeSlots: [pk_Timeslot],\r\n headers: [parseInt(dataField)],\r\n splitValue: 1,\r\n });\r\n\r\n if (willCandidateBeUnscheduled) {\r\n setShowSplitCellConfirmModal(true);\r\n return;\r\n }\r\n removeCellSplits(data, () => {\r\n setShowScheduleDetailModal(false);\r\n setShowSplitCellModal(false);\r\n });\r\n }}\r\n >\r\n Remove\r\n \r\n {\r\n const { row, column } = selectedCell;\r\n const { dataField } = column;\r\n const { pk_Timeslot } = row;\r\n\r\n const data = {\r\n pk_ScheduleAssignment: parseInt(dataField),\r\n TotalNumberOfSplits: cellSplitCount,\r\n pk_Timeslot,\r\n };\r\n\r\n setSplitData(data);\r\n\r\n const willCandidateBeUnscheduled = isCandidateWillBeUnscheduled(splitCountTracker, {\r\n timeSlots: [pk_Timeslot],\r\n headers: [parseInt(dataField)],\r\n splitValue: cellSplitCount,\r\n });\r\n\r\n if (willCandidateBeUnscheduled) {\r\n setShowSplitCellConfirmModal(true);\r\n return;\r\n }\r\n\r\n setCellSplit(data, (err) => {\r\n if (!err) {\r\n setShowScheduleDetailModal(false);\r\n setShowSplitCellModal(false);\r\n }\r\n });\r\n }}\r\n >\r\n Set\r\n \r\n
\r\n Okay
\r\n \r\n }\r\n />\r\n );\r\n };\r\n\r\n const renderFlexEventColumnDetailModal = () => {\r\n return (\r\n \r\n {isScheduleDataError ? (\r\n \r\n \r\n ) : !isEmbedded || allowScheduleInteraction || showTopBar ? (\r\n {\r\n setShowScheduleWizard(!showScheduleWizard);\r\n }}\r\n />\r\n ) : null}\r\n {(!isEmbedded || allowScheduleInteraction) && !generatedScheduleData ? (\r\n
\r\n \r\n ) : null}\r\n\r\n Error fetching Schedule Data
\r\n ) : (\r\n <>\r\n {showGenerateDataPanel ? (\r\n \r\n
\r\n \r\n {\r\n setGeneratedScheduleData(null);\r\n setShowGenerateDataPanel(false);\r\n setPendingCandidates({});\r\n setupTrackers(scheduleData);\r\n }}\r\n >\r\n {\r\n submitGeneratedSchedule(generatedScheduleData.body);\r\n setShowGenerateDataPanel(false);\r\n setGenerateMode('ordered');\r\n }}\r\n >\r\n {\r\n if (generatedScheduleData && generatedScheduleData.headersToFillUp) {\r\n generateScheduleForColumn(generatedScheduleData.headersToFillUp);\r\n } else {\r\n setGenerateMode('ordered');\r\n generateScheduleForEntireTable();\r\n }\r\n }}\r\n >\r\n
\r\n Discard New Schedule
\r\n \r\n Accept New Schedule
\r\n \r\n\r\n \r\n
\r\n \r\n Regenerate Schedule
\r\n \r\n Accepting the new schedule will overwrite the previous schedule!{' '}\r\n {allowInterviewLimit\r\n ? `(Candidate Interview Limit is set to ${interviewLimit})`\r\n : scheduleData && scheduleData.headers\r\n ? `(Maximum ${scheduleData.headers.length} candidate interviews)`\r\n : 1}{' '}\r\n
\r\n \r\n
\r\n \r\n {scheduleData ? (\r\n <>\r\n {' '}\r\n
\r\n\r\n \r\n
\r\n ) : null}\r\n\r\n {!hasFlexColumn && allowScheduleInteraction && !generatedScheduleData ? (\r\n \r\n {scheduleData ? (\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n 1\r\n
\r\n - Evaluators present
\r\n \r\n
\r\n - Candidate present
\r\n \r\n {\r\n addFlexColumn();\r\n setShowAddColumnPopover(false);\r\n }}\r\n style={{ marginRight: 10 }}\r\n >\r\n
\r\n ) : null}\r\n \r\n
\r\n \r\n \r\n
\r\n {Add Flex Column
}\r\n \r\n {\r\n if (generatedScheduleData) {\r\n return;\r\n }\r\n\r\n if (dateIsInThePast && !willEditThePast) {\r\n const continueProcess = await fireConfirmationForEditingPastSchedule();\r\n if (!continueProcess) {\r\n return;\r\n }\r\n }\r\n\r\n if (isInPreviewMode()) {\r\n setShowUnsavedChangeModal(!isSubmitting);\r\n return;\r\n }\r\n\r\n if (!showAddColumnPopover) {\r\n hideHeaderPopoversExcept();\r\n hideTimeSlotPopoversExcept();\r\n }\r\n setShowAddColumnPopover(!showAddColumnPopover);\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {Add Evaluators
}\r\n \r\n
\r\n\r\n {(!isEmbedded || allowScheduleInteraction) && !generatedScheduleData\r\n ? scheduleData //&& scheduleData.headers && scheduleData.headers.length > 0\r\n ? renderTimeSlotHeaderPopOver()\r\n : null\r\n : null}\r\n\r\n {!isEmbedded || allowScheduleInteraction ? renderAddColumnPopover() : null}\r\n\r\n {renderScheduleDetailModal()}\r\n {renderFlexEventColumnDetailModal()}\r\n {renderUnsavedChangesConfirmModal()}\r\n {renderSplitCellModal()}\r\n {renderSplitCellConfirmModal()}\r\n {renderCloneModal()}\r\n \r\n {scheduleData ? (\r\n {\r\n return
\r\n No TimeSlots
;\r\n }}\r\n />\r\n ) : (\r\n \r\n {/*
\r\n )}\r\n {/* \r\n
\r\n Footer of deathhh
*/}\r\n \r\n
\r\n );\r\n }\r\n })\r\n ) : (\r\n \r\n \r\n {\r\n if (onClick) {\r\n onClick(listItem);\r\n }\r\n }}\r\n >\r\n
\r\n ) : null}\r\n \r\n {renderSearchInput({\r\n onClear,\r\n onSearch,\r\n onScoreUpdate: listIsArray ? onScoreUpdate : null,\r\n enableUpdateButton: listIsArray && selectedValue.length > 0,\r\n })}\r\n
\r\n \r\n {isLoading ? (\r\n \r\n {loadingMessage}\r\n
\r\n ) : listToDisplay && listToDisplay.length > 0 ? (\r\n listToDisplay.map((listItem, i) => {\r\n const {\r\n TransitionedToStoredCalculations,\r\n pk_Season,\r\n EarliestStoredCalculationTimestamp,\r\n } = listItem;\r\n const label = listItem[labelKey] || '';\r\n const value = listItem[valueKey] || '';\r\n const isInSelectedList =\r\n selectedValue && isArray(selectedValue)\r\n ? selectedValue.find((s) => {\r\n return s[valueKey] == value;\r\n })\r\n : null;\r\n\r\n if (!searchString || (searchString && label.toLowerCase().includes(searchString.toLowerCase()))) {\r\n return (\r\n \r\n ({value}) {label}\r\n
\r\n {!listIsArray && onScoreUpdate ? (\r\n \r\n {\r\n e.stopPropagation();\r\n if (onScoreUpdate) {\r\n onScoreUpdate(value);\r\n }\r\n }}\r\n >\r\n
\r\n \r\n \r\n \r\n \r\n {EarliestStoredCalculationTimestamp\r\n ? `Last Updated: ${moment(EarliestStoredCalculationTimestamp).format(\r\n 'MMM DD, YYYY',\r\n )}`\r\n : 'No stored calculations'}\r\n \r\n
\r\n ) : null\r\n ) : null}\r\n Update
\r\n {TransitionedToStoredCalculations != undefined ? (\r\n TransitionedToStoredCalculations ? (\r\n \r\n \r\n Manage Scoring \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ManageScores;\r\n","export default {\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '100%',\r\n },\r\n};\r\n","import { DepartmentContext } from 'DepartmentWrapper';\r\nimport { useAuth0 } from 'auth0/reactAuth0Spa';\r\nimport React, { useState, useEffect, useContext, useRef } from 'react';\r\nimport { Button, Card, CardBody, CardHeader, Input, InputGroup, InputGroupAddon, Modal, ModalBody } from 'reactstrap';\r\nimport style from './UserSearch.style';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faCircle, faDotCircle, faSearch, faTimes, faUser } from '@fortawesome/free-solid-svg-icons';\r\nimport { fetchDataAgnostic } from 'Services/dataApi';\r\nimport { formatBearerToken } from 'Common.functions';\r\nimport Loading from 'Body/Statuses/Loading';\r\nimport Swal from 'sweetalert2';\r\nconst UserSearch = ({ onSearch, selectDepartment, setShowSuperUserPanel, selectRole }) => {\r\n const [searchString, setSearchString] = useState('');\r\n const [selectedOption, setSelectedOption] = useState('Name');\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [matchingCandidates, setMatchingCandidates] = useState([]);\r\n const [matchingUsers, setMatchingUsers] = useState([]);\r\n const [rawSearchResult, setRawSearchResult] = useState();\r\n\r\n const [currentPage, setCurrentPage] = useState(0);\r\n const [currentMaxPages, setCurrentMaxPages] = useState(0);\r\n const [currentCandidatesMaxCount, setCurrentCandidatesMaxCount] = useState(0);\r\n const [currentUsersMaxCount, setCurrentUsersMaxCount] = useState(0);\r\n\r\n const [isRedirecting, setIsRedirecting] = useState(false);\r\n\r\n const currentPageRef = useRef(0);\r\n const searchstringRef = useRef();\r\n const oldSearchStringRef = useRef();\r\n\r\n const selectedOptionRef = useRef();\r\n const oldSelectedOptionRef = useRef();\r\n\r\n const matchingCandidatesRef = useRef([]);\r\n const matchingUsersRef = useRef([]);\r\n const currentCandidatesMaxCountRef = useRef(0);\r\n const currentUsersMaxCountRef = useRef(0);\r\n\r\n const disableSearchRef = useRef();\r\n\r\n const options = ['Name', 'Email', 'Phone'];\r\n const itemLimitPerPage = 10;\r\n\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n const dContext = useContext(DepartmentContext);\r\n\r\n const matchingUsersCount = matchingUsers.filter((u) => {\r\n return !u.isDummy;\r\n }).length;\r\n\r\n const matchingCandidatesCount = matchingCandidates.filter((c) => {\r\n return !c.isDummy;\r\n }).length;\r\n\r\n const disableSearch =\r\n (matchingCandidatesCount >= currentCandidatesMaxCount &&\r\n matchingUsersCount >= currentUsersMaxCount &&\r\n oldSearchStringRef.current == searchstringRef.current &&\r\n oldSelectedOptionRef.current == selectedOptionRef.current) ||\r\n isLoading ||\r\n !searchString;\r\n\r\n useEffect(() => {\r\n window.addEventListener('keydown', (e) => {\r\n if (e.key === 'Enter') {\r\n getSearchData({ searchString: searchstringRef.current, selectedOption: selectedOptionRef.current });\r\n }\r\n });\r\n\r\n return () => {\r\n window.removeEventListener('keydown', (e) => {\r\n if (e.key === 'Enter') {\r\n getSearchData({ searchString: searchstringRef.current, selectedOption: selectedOptionRef.current });\r\n }\r\n });\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n searchstringRef.current = searchString;\r\n }, [searchString]);\r\n\r\n useEffect(() => {\r\n selectedOptionRef.current = selectedOption;\r\n }, [selectedOption]);\r\n\r\n useEffect(() => {\r\n const mostRecentDivider = document.getElementById('candidates_divider_' + currentPage);\r\n if (mostRecentDivider) {\r\n mostRecentDivider.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n }\r\n\r\n matchingCandidatesRef.current = matchingCandidates.slice();\r\n }, [matchingCandidates]);\r\n\r\n useEffect(() => {\r\n const mostRecentDivider = document.getElementById('users_divider_' + currentPage);\r\n if (mostRecentDivider) {\r\n setTimeout(() => {\r\n mostRecentDivider.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n }, 1000);\r\n }\r\n\r\n matchingUsersRef.current = matchingUsers.slice();\r\n }, [matchingUsers]);\r\n\r\n useEffect(() => {\r\n disableSearchRef.current = disableSearch;\r\n }, [disableSearch]);\r\n\r\n useEffect(() => {\r\n currentPageRef.current = currentPage;\r\n }, [currentPage]);\r\n\r\n useEffect(() => {\r\n currentCandidatesMaxCountRef.current = currentCandidatesMaxCount;\r\n }, [currentCandidatesMaxCount]);\r\n\r\n useEffect(() => {\r\n currentUsersMaxCountRef.current = currentUsersMaxCount;\r\n }, [currentUsersMaxCount]);\r\n\r\n const getSearchData = (options = {}) => {\r\n let pageToUse = currentPageRef.current + 1;\r\n let searchStringToUse = options.searchString || searchString;\r\n let selectedOptionToUse = options.selectedOption\r\n ? options.selectedOption.toLowerCase()\r\n : selectedOption.toLowerCase();\r\n\r\n if (disableSearchRef.current) {\r\n return;\r\n }\r\n\r\n if (\r\n oldSearchStringRef.current !== searchstringRef.current ||\r\n oldSelectedOptionRef.current !== selectedOptionRef.current\r\n ) {\r\n setCurrentPage(1);\r\n pageToUse = 1;\r\n setMatchingCandidates([]);\r\n setMatchingUsers([]);\r\n } else {\r\n setCurrentPage(pageToUse);\r\n }\r\n\r\n if (searchStringToUse && searchStringToUse.indexOf('@') > -1) {\r\n selectedOptionToUse = 'email';\r\n }\r\n\r\n if (selectedOptionToUse === 'Phone') {\r\n searchStringToUse = searchStringToUse.replace(/\\D/g, '');\r\n if (!searchStringToUse) {\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Invalid Phone Number',\r\n text: 'Please enter a valid phone number',\r\n });\r\n return;\r\n }\r\n }\r\n\r\n oldSearchStringRef.current = searchstringRef.current;\r\n oldSelectedOptionRef.current = selectedOptionRef.current;\r\n setIsLoading(true);\r\n\r\n getTokenSilently()\r\n .then((token) => {\r\n fetchDataAgnostic(\r\n 'organization/user/search',\r\n {\r\n searchText: searchStringToUse,\r\n limit: itemLimitPerPage,\r\n searchType: selectedOptionToUse,\r\n page: pageToUse,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n // let newMatchingCandidates = [];\r\n // let newMatchingUsers = [];\r\n let newMatchingCandidates = res.data.Candidates.results || [];\r\n let newMatchingUsers = res.data.Users.results || [];\r\n if (pageToUse > 1) {\r\n if (res.data.Users.results && res.data.Users.results.length > 0) {\r\n newMatchingUsers.splice(0, 0, { isDummy: true, page: pageToUse });\r\n }\r\n\r\n if (res.data.Candidates.results && res.data.Candidates.results.length > 0) {\r\n newMatchingCandidates.splice(0, 0, { isDummy: true, page: pageToUse });\r\n }\r\n }\r\n newMatchingCandidates = [...matchingCandidatesRef.current, ...newMatchingCandidates];\r\n newMatchingUsers = [...matchingUsersRef.current, ...newMatchingUsers];\r\n\r\n setIsLoading(false);\r\n setMatchingCandidates(newMatchingCandidates);\r\n setMatchingUsers(newMatchingUsers);\r\n setCurrentCandidatesMaxCount(res.data.Candidates.total);\r\n setCurrentUsersMaxCount(res.data.Users.total);\r\n setRawSearchResult(res.data);\r\n })\r\n .catch((err) => {\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Error',\r\n text: 'Error searching for users',\r\n });\r\n setIsLoading(false);\r\n });\r\n })\r\n .catch((err) => {\r\n Swal.fire({\r\n icon: 'error',\r\n title: 'Error',\r\n text: 'Error searching for users',\r\n });\r\n setIsLoading(false);\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const resetAll = () => {\r\n setSearchString('');\r\n setMatchingCandidates([]);\r\n setMatchingUsers([]);\r\n setCurrentCandidatesMaxCount(0);\r\n setCurrentUsersMaxCount(0);\r\n setCurrentPage(0);\r\n oldSearchStringRef.current = null;\r\n searchstringRef.current = null;\r\n oldSelectedOptionRef.current = null;\r\n selectedOptionRef.current = null;\r\n };\r\n\r\n const renderDividerLine = (page, id) => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n Organizations
\r\n {renderOrgList(400)}\r\n \r\n
\r\n Departments
\r\n {renderDepartmentList(500)}\r\n \r\n {' '}\r\n
\r\n {/* Seasons
\r\n {renderSeasonList(400)}\r\n {renderSessionList(400)}
*/}\r\n \r\n {' '}\r\n
\r\n Candidates
\r\n {renderCandidateList(500)}\r\n \r\n {page}\r\n
\r\n \r\n \r\n );\r\n };\r\n\r\n const renderCandidateItem = (candidate, index) => {\r\n const {\r\n isDummy,\r\n page,\r\n PhotoURL,\r\n FirstName = '',\r\n LastName = '',\r\n Email = '',\r\n PhoneNumber = '',\r\n SeasonName = 'No Season',\r\n OrganizationName = 'No Organization',\r\n DepartmentName = 'No Department',\r\n isRemoved,\r\n } = candidate;\r\n\r\n if (isDummy && currentPage > 1) {\r\n return renderDividerLine(page, `candidates_divider_${page}`);\r\n } else if (isDummy) {\r\n return;\r\n }\r\n\r\n return (\r\n \r\n {PhotoURL ? (\r\n 
\r\n ) : (\r\n
\r\n \r\n {' '}\r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n {' '}\r\n {LastName}\r\n {LastName && FirstName ? ', ' : ''}\r\n {FirstName}\r\n \r\n
\r\n \r\n \r\n Email:\r\n
\r\n {Email}
\r\n \r\n \r\n Phone:\r\n
\r\n {PhoneNumber}
\r\n \r\n \r\n \r\n Organization:\r\n
\r\n {OrganizationName}
\r\n \r\n \r\n \r\n Department:\r\n
\r\n {DepartmentName}
\r\n \r\n \r\n \r\n Season Name:\r\n
\r\n {SeasonName}
\r\n \r\n \r\n \r\n );\r\n };\r\n\r\n const renderUserItem = (user, index) => {\r\n const {\r\n isDummy,\r\n PhotoURL,\r\n page,\r\n FirstName = '',\r\n LastName = '',\r\n Email = '',\r\n PhoneNumber = '',\r\n Season = 'No Season',\r\n Organizations = [],\r\n Department = 'No Department',\r\n } = user;\r\n\r\n if (isDummy && currentPage > 1) {\r\n return renderDividerLine(page, `users_divider_${page}`);\r\n } else if (isDummy) {\r\n return;\r\n }\r\n\r\n return (\r\n \r\n {PhotoURL ? (\r\n \r\n ) : (\r\n
\r\n \r\n {' '}\r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n {' '}\r\n {LastName}\r\n {LastName && FirstName ? ', ' : ''}\r\n {FirstName}\r\n \r\n
\r\n \r\n \r\n Email:\r\n
\r\n {Email}
\r\n \r\n \r\n Phone:\r\n
\r\n {PhoneNumber}
\r\n \r\n Organizations:
\r\n - \r\n {Organizations && Organizations.length > 0 ? (\r\n Organizations.map((org, index) => {\r\n const { OrganizationName, Departments = [] } = org;\r\n return Departments.map((dept, index) => {\r\n const { DepartmentName, Roles = [] } = dept;\r\n const { EnableAdmin, EnableEvaluator } = Roles[0] || {};\r\n\r\n return (\r\n
- \r\n \r\n {OrganizationName}\r\n\r\n{DepartmentName}\r\n\r\n ({EnableAdmin ? 'Admin' : ''}\r\n {EnableAdmin && EnableEvaluator ? ', ' : ''}\r\n {EnableEvaluator ? 'Evaluator' : ''})\r\n\r\n \r\n \r\n );\r\n });\r\n })\r\n ) : (\r\n
No Organizations
\r\n )}\r\n \r\n
\r\n \r\n \r\n User Search \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {\r\n resetAll();\r\n }}\r\n >\r\n \r\n {\r\n setSearchString(e.target.value);\r\n }}\r\n />\r\n \r\n {\r\n getSearchData();\r\n }}\r\n >\r\n \r\n \r\n {\r\n getSearchData();\r\n }}\r\n disabled={\r\n (matchingCandidatesCount >= currentCandidatesMaxCount &&\r\n matchingUsersCount >= currentUsersMaxCount) ||\r\n isLoading\r\n }\r\n >\r\n Load More\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {options.map((option, index) => {\r\n return (\r\n {\r\n setSelectedOption(option);\r\n }}\r\n >\r\n
\r\n );\r\n })}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {isLoading ? 'Loading . . .' : ``}\r\n {/* */}\r\n
\r\n \r\n \r\n \r\n Candidates (\r\n {\r\n matchingCandidates.filter((c) => {\r\n return !c.isDummy;\r\n }).length\r\n }\r\n /{currentCandidatesMaxCount})\r\n
\r\n \r\n {isLoading && currentPage <= 0 ? (\r\n
\r\n \r\n NO ITEMS
\r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {isLoading ? 'Loading . . .' : ``}\r\n {/* */}\r\n
\r\n \r\n \r\n \r\n Users (\r\n {\r\n matchingUsers.filter((u) => {\r\n return !u.isDummy;\r\n }).length\r\n }\r\n /{currentUsersMaxCount})\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {renderRedirectionModal()}\r\n \r\n );\r\n};\r\n\r\nexport default UserSearch;\r\n","import {\r\n faAngleLeft,\r\n faAngleRight,\r\n faAngleDoubleLeft,\r\n faArrowCircleLeft,\r\n faLink,\r\n faClipboard,\r\n faUserSlash,\r\n faEnvelope,\r\n faClipboardList,\r\n} from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport DepartmentHistory from '../../../DepartmentHistory/DepartmentHistory';\r\nimport { clone } from 'lodash';\r\nimport moment from 'moment';\r\nimport React, { useState, useEffect, useContext } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { Button, ButtonGroup, Input, InputGroup, InputGroupAddon, Nav, NavItem, UncontrolledTooltip } from 'reactstrap';\r\nimport { useAuth0 } from '../../../../auth0/reactAuth0Spa';\r\nimport { formatBearerToken } from '../../../../Common.functions';\r\nimport { DepartmentContext } from '../../../../DepartmentWrapper';\r\nimport { fetchDataAgnostic } from '../../../../Services/dataApi';\r\n\r\nimport Schedule from '../../Coordinator/Schedule';\r\n\r\nimport style from './AdminSuperUserPanel.style';\r\nimport ManageScores from './ManageScores/ManageScores';\r\nimport UserSearch from './UserSearch/UserSearch';\r\nimport EntityWrapper from 'Body/CreateNewEntities/EntityWapper';\r\n\r\nconst AdminSuperUserPanel = ({ departments, setShowSuperUserPanel, selectDepartment, selectRole, getDepartments }) => {\r\n const [currentDate, setCurrentDate] = useState('');\r\n const [selectedSession, setSelectedSession] = useState();\r\n const [sessions, setSessions] = useState([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [selectedScheduleData, setSelectedScheduleData] = useState();\r\n const [myDepartments, setMyDepartments] = useState([]);\r\n const [forcedContext, setForcedContext] = useState({});\r\n const [timeNow, setTimeNow] = useState(moment());\r\n const [activeTab, setActiveTab] = useState(0);\r\n\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n const dContext = useContext(DepartmentContext);\r\n const history = useHistory();\r\n const tabs = [\r\n {\r\n label: 'Sessions',\r\n index: 0,\r\n },\r\n {\r\n label: 'Organizations',\r\n index: 1,\r\n },\r\n {\r\n label: 'Scores',\r\n index: 2,\r\n },\r\n {\r\n label: 'User Search',\r\n index: 3,\r\n },\r\n {\r\n label: 'Department History',\r\n index: 3,\r\n },\r\n ];\r\n\r\n useEffect(() => {\r\n setCurrentDate(moment().format('YYYY-MM-DD'));\r\n setInterval(() => {\r\n setTimeNow(moment.tz(moment.tz.guess()));\r\n }, 1000);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (departments) {\r\n setMyDepartments(clone(departments));\r\n }\r\n }, [departments]);\r\n\r\n useEffect(() => {\r\n if (currentDate) {\r\n getData(currentDate);\r\n setSelectedSession(null);\r\n }\r\n }, [currentDate]);\r\n\r\n const getData = (interviewDate) => {\r\n setIsLoading(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n fetchDataAgnostic('schedule/all/date', { interviewDate }, formatBearerToken(token))\r\n .then((res) => {\r\n setSessions(res.data);\r\n setIsLoading(false);\r\n })\r\n .catch((err) => {\r\n setIsLoading(false);\r\n });\r\n })\r\n .catch((err) => {\r\n setIsLoading(false);\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const renderContent = () => {\r\n switch (activeTab) {\r\n case 0:\r\n return renderSessionsOverview();\r\n case 1:\r\n return \r\n {isLoading && currentPage <= 0 ? (\r\n
\r\n NO ITEMS
\r\n )}\r\n \r\n \r\n
\r\n \r\n {`${sessions.length || 0} Session${sessions.length > 1 ? 's' : ''} found`}{' '}\r\n
\r\n \r\n \r\n \r\n {\r\n const newDate = moment(currentDate);\r\n newDate.subtract(1, 'days');\r\n setCurrentDate(newDate.format('YYYY-MM-DD'));\r\n }}\r\n >\r\n \r\n {\r\n setCurrentDate(e.target.value);\r\n }}\r\n />\r\n \r\n {\r\n const newDate = moment(currentDate);\r\n newDate.add(1, 'days');\r\n setCurrentDate(newDate.format('YYYY-MM-DD'));\r\n }}\r\n >\r\n \r\n \r\n
\r\n {renderSessionList()}
\r\n \r\n {selectedSession ? (\r\n \r\n No Session Selected\r\n
\r\n )}\r\n \r\n \r\n \r\n );\r\n };\r\n\r\n const renderFlagsForSession = (session) => {\r\n const {\r\n MainRoomURL,\r\n EnablePrescreenMode,\r\n pk_InterviewDate,\r\n pk_Department,\r\n CandidatesNotSentEmailCount,\r\n CandidatesWithoutAScheduleBlockCount,\r\n StartTime,\r\n } = session;\r\n const key = `${pk_InterviewDate}_${pk_Department}`;\r\n const flagsToRender = [];\r\n\r\n const momentStart = moment(StartTime);\r\n const dayDifference = momentStart.diff(moment(), 'days', true);\r\n\r\n if (!MainRoomURL) {\r\n flagsToRender.push(\r\n \r\n Missing All Day Link! \r\n
,\r\n );\r\n }\r\n\r\n if (EnablePrescreenMode) {\r\n flagsToRender.push(\r\n \r\n Not set to Evaluation Mode! \r\n
,\r\n );\r\n }\r\n\r\n if (CandidatesWithoutAScheduleBlockCount && CandidatesWithoutAScheduleBlockCount > 0) {\r\n flagsToRender.push(\r\n \r\n \r\n {CandidatesWithoutAScheduleBlockCount}{' '}\r\n {CandidatesWithoutAScheduleBlockCount > 1 ? 'candidates have' : 'candidate has'} not been assigned a\r\n schedule slot.\r\n \r\n
,\r\n );\r\n }\r\n\r\n if (\r\n // dayDifference <= 7 && dayDifference >= 0 &&\r\n CandidatesNotSentEmailCount &&\r\n CandidatesNotSentEmailCount > 0\r\n ) {\r\n flagsToRender.push(\r\n \r\n \r\n
\r\n\r\n {CandidatesNotSentEmailCount}
*/}\r\n {flagsToRender}
\r\n );\r\n };\r\n\r\n const renderSessionList = () => {\r\n return sessions && sessions.length > 0 ? (\r\n sessions.map((session, i) => {\r\n const {\r\n OrganizationName,\r\n DepartmentName,\r\n DepartmentLogo,\r\n StartTime,\r\n EndTime,\r\n TimeZone,\r\n Label,\r\n pk_Department,\r\n pk_InterviewDate,\r\n } = session;\r\n const key = `${pk_InterviewDate}_${pk_Department}`;\r\n const momentStartTime = moment(StartTime);\r\n const momentEndTime = moment(EndTime);\r\n\r\n let sessionStatus = 'Not happening today.';\r\n let sessionStatusColor = 'gray';\r\n\r\n if (timeNow.isSameOrAfter(momentStartTime) && timeNow.isSameOrBefore(momentEndTime)) {\r\n sessionStatusColor = '#35911f';\r\n sessionStatus = 'Happening Now!';\r\n } else if (\r\n timeNow.isBefore(momentStartTime) &&\r\n (timeNow.format('MMM DD, YYYY') === momentStartTime.format('MMM DD, YYYY') ||\r\n timeNow.format('MMM DD, YYYY') === momentEndTime.format('MMM DD, YYYY'))\r\n ) {\r\n let timeDifference = momentStartTime.diff(timeNow, 'hours');\r\n let timeUnit = 'hrs';\r\n\r\n if (timeDifference < 1) {\r\n timeDifference = momentStartTime.diff(timeNow, 'minutes');\r\n timeUnit = 'mins';\r\n }\r\n\r\n sessionStatusColor = '#ffc180';\r\n sessionStatus = `Happening later today. (in ${timeDifference}${timeUnit})`;\r\n }\r\n\r\n const rowStyle = {\r\n ...style.simpleRow,\r\n width: '100%',\r\n marginLeft: 10,\r\n marginRight: 10,\r\n paddingRight: 10,\r\n cursor: 'pointer',\r\n backgroundColor:\r\n selectedSession && selectedSession.pk_InterviewDate == session.pk_InterviewDate ? '#c1e1ec' : 'white',\r\n };\r\n\r\n if (i == 0) {\r\n rowStyle.borderTop = '1px solid gray';\r\n }\r\n rowStyle.borderBottom = '1px solid gray';\r\n\r\n return (\r\n \r\n {' '}\r\n
\r\n \r\n {moment.tz(StartTime, TimeZone).format('hh:mm A')} - {moment.tz(EndTime, TimeZone).format('hh:mm A')}\r\n
\r\n {Label ? Label :
}
\r\n }
{OrganizationName}
\r\n {DepartmentName}
\r\n\r\n {renderFlagsForSession(session)}\r\n \r\n No Sessions
\r\n );\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default AdminSuperUserPanel;\r\n","import {\r\n faEnvelope,\r\n faExclamationTriangle,\r\n faFilter,\r\n faInfoCircle,\r\n faLock,\r\n faSpinner,\r\n faTable,\r\n} from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { default as axios, default as Axios } from 'axios';\r\nimport React, { useContext, useEffect, useRef, useState } from 'react';\r\nimport { useAuth0 } from '../../auth0/reactAuth0Spa';\r\nimport { Link, useLocation } from 'react-router-dom';\r\nimport {\r\n Button,\r\n Card,\r\n CardBody,\r\n CardHeader,\r\n Col,\r\n Form,\r\n FormGroup,\r\n Input,\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n Label,\r\n PopoverBody,\r\n Row,\r\n Spinner,\r\n Popover,\r\n} from 'reactstrap';\r\nimport styled from 'styled-components';\r\nimport Swal from 'sweetalert2';\r\nimport EvaluatorRedirect from '../EvaluatorRedirect';\r\nimport logoPlaceHolder from '../../assets/images/header/rezRate.gif';\r\nimport { VelocityComponent } from 'velocity-react';\r\nimport { formatBearerToken, evaluatorTypeEnum } from '../../Common.functions';\r\nimport { DepartmentContext } from '../../DepartmentWrapper';\r\nimport { fetchDataAgnostic, fetchDataAuth0 } from '../../Services/dataApi';\r\nimport AdminSuperUserPanel from '../RezRATE/AdminLanding/AdminSuperUserPanel/AdminSuperUserPanel';\r\nimport Loading from 'Body/Statuses/Loading';\r\nimport { clone } from 'lodash';\r\nimport style from 'Body/CreateNewEntities/EntityWrapper.style';\r\n\r\n// Revoke:ACCESSTOKENID - revokes a specific access token.\r\n// RevokeAndForceNew - Revokes all access tokens and issues a new access token.\r\n// ForceNew - Grants a new access token leaving any existing tokens unmodified.\r\n// Refresh - Refreshes existing access token or issues a new one.\r\n\r\nconst overlayStyle = {\r\n position: 'absolute',\r\n width: '100%',\r\n height: '100%',\r\n backgroundColor: '#000',\r\n left: '0px',\r\n top: '0px',\r\n opacity: '.3',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n};\r\n\r\nconst filterOutDepartmentsWithoutPermissions = (data) => {\r\n return data.filter((item) => {\r\n if (!item.Permissions) return false;\r\n\r\n if (item.Permissions && item.Permissions.length === 0) return false;\r\n\r\n return true;\r\n });\r\n};\r\n\r\nconst filterOutDepartmentPermissionsDuplicates = (data) => {\r\n const newArray = [];\r\n data.forEach((item) => {\r\n const filtered = item.Permissions.filter((thing, index) => {\r\n if (thing.selectionAction === 0) {\r\n return false;\r\n }\r\n\r\n return (\r\n index ===\r\n item.Permissions.findIndex((obj) => {\r\n return obj.selectionDisplay === thing.selectionDisplay;\r\n })\r\n );\r\n });\r\n item.Permissions = filtered;\r\n });\r\n\r\n return data;\r\n};\r\n\r\nconst CancelToken = axios.CancelToken;\r\n\r\nlet cancel;\r\n\r\nconst isSpecificDate = (dateParameter, dateToCompare) => {\r\n const today = new Date(dateToCompare);\r\n return (\r\n dateParameter.getDate() === today.getDate() &&\r\n dateParameter.getMonth() === today.getMonth() &&\r\n dateParameter.getFullYear() === today.getFullYear()\r\n );\r\n};\r\n\r\nrequire('velocity-animate');\r\nrequire('velocity-animate/velocity.ui');\r\n\r\nconst ForgotPasswordWrapper = styled.div`\r\n width: 100%;\r\n display: flex;\r\n justify-content: center;\r\n`;\r\n\r\nconst Wrapper = styled.div`\r\n paddingtop: 10px;\r\n height: 100%;\r\n`;\r\n\r\nconst WhiteWrapper = styled.div`\r\n border-radius: 25px;\r\n`;\r\n\r\nconst Login = (props) => {\r\n const formData = useRef(null);\r\n const loginInput = useRef(null);\r\n const passwordInput = useRef(null);\r\n const incorrectPasswordDiv = useRef(null);\r\n const [userDetails, setUserDetails] = useState();\r\n const [showError, setShowError] = useState(false);\r\n const [departmentChosenPhase, setDepartmentChosenPhase] = useState(1);\r\n const [chosenDepartment, setChosenDepartment] = useState(null);\r\n const [error, setError] = useState(false);\r\n const [errorText, setErrorText] = useState('');\r\n const [loadingOverlay, setLoadingOverlay] = useState(false);\r\n const [allowCancelRequest, setAllowCancelRequest] = useState(true);\r\n const [isCandidate, setIsCandidate] = useState(null);\r\n const [departmentChoices, setDepartmentChoices] = useState([]);\r\n const [departmentChoicesToDisplay, setDepartmentChoicesToDisplay] = useState([]);\r\n const [organizations, setOrganizations] = useState([]);\r\n const [selectedOrganization, setSelectedOrganization] = useState();\r\n const [redirectToEvaluation, setRedirectToEvaluation] = useState(false);\r\n const [loginLevel, setLoginLevel] = useState(0);\r\n\r\n const [isLoading, setIsLoading] = useState(true);\r\n const [userForgotPassword, setUserForgetPassword] = useState(false);\r\n const [password, setPassword] = useState('');\r\n const [showSuperUserPanel, setShowSuperUserPanel] = useState(false);\r\n // const [axiosRequest, setAxiosRequest]\r\n const [username, setUsername] = useState('');\r\n const [disableButton, setDisableButton] = useState(false);\r\n const [searchString, setSearchString] = useState();\r\n const [showOrgFilter, setShowOrgFilter] = useState(false);\r\n const [isFetchingDetailedDepartment, setIsFetchingDetailedDepartment] = useState(false);\r\n\r\n const [filterPk, setFilterPk] = useState();\r\n const query = new URLSearchParams(useLocation().search);\r\n const dContext = useContext(DepartmentContext);\r\n\r\n // const { department, season, setDepartment } = dContext;\r\n\r\n const { loading, user, isAuthenticated, loginWithRedirect, getTokenSilently, logout } = useAuth0();\r\n\r\n const getErrorMessage = (passwordBlank, emailBLank, invalidEmail) => {\r\n if (error) {\r\n return 'Service temporarily unavailable';\r\n }\r\n if (passwordBlank && emailBLank) {\r\n return 'Fields must not be empty';\r\n }\r\n\r\n if (passwordBlank && invalidEmail) {\r\n return 'Must have valid email and password must not be empty';\r\n }\r\n\r\n if (invalidEmail) {\r\n return 'Must have valid email';\r\n }\r\n\r\n if (passwordBlank) {\r\n return 'Password must not be empty';\r\n }\r\n\r\n if (emailBLank) {\r\n return 'Email must not be empty';\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n // if the user changes the username or passowrd cancel the login request\r\n if (allowCancelRequest && cancel) {\r\n cancel();\r\n setAllowCancelRequest(false);\r\n setDisableButton(false);\r\n setShowError(false);\r\n }\r\n\r\n // clear show error if user starts entering new information\r\n if (showError === true) setShowError(false);\r\n }, [props.email, password]);\r\n\r\n const incorrectPasswordAnimation = () => {\r\n incorrectPasswordDiv.current.velocity('callout.shake');\r\n // Velocity(incorrectPasswordDiv.current, [{ left: '5px' }], 500).then((e) => {});\r\n };\r\n\r\n useEffect(() => {\r\n if (departmentChosenPhase == 1) {\r\n getUserDetails();\r\n }\r\n }, [departmentChosenPhase]);\r\n\r\n // if this page gets remounted clear the user so they don't end up showing the wrong place\r\n useEffect(() => {\r\n props.setUser(null);\r\n }, []);\r\n\r\n useEffect(() => {\r\n // only redirect if season and department are set\r\n // if (showSuperUserPanel) {\r\n // return;\r\n // }\r\n\r\n // TODO - Check why on switch, it redirects to role picker instead of dept picker.\r\n\r\n const { department, season } = dContext;\r\n\r\n if (department && season) {\r\n // setLoadingOverlay(true);\r\n const { EnableAdmin = false, EnableEvaluator = false, EnableSuperUser = false } = department;\r\n let isEvaluatePage = false;\r\n const roleChoice = sessionStorage.getItem('roleChoice');\r\n\r\n if (\r\n props &&\r\n props.location &&\r\n props.location.state &&\r\n props.location.state.path &&\r\n props.location.state.path.includes('/user/evaluate/')\r\n ) {\r\n isEvaluatePage = true;\r\n }\r\n if ((EnableSuperUser || EnableAdmin) && EnableEvaluator && roleChoice == null) {\r\n return setDepartmentChosenPhase(2);\r\n }\r\n\r\n if (EnableEvaluator && (roleChoice == null || roleChoice === 'null')) {\r\n // the evaluator page needs special attention so if it's any other page\r\n // just push them to the normal route\r\n if (!isEvaluatePage && props.location && props.location.state && props.location.state.path) {\r\n return props.history.push(props.location.state.path);\r\n }\r\n setRedirectToEvaluation(true);\r\n // getUserToken(chosenDepartment);\r\n setLoadingOverlay(false);\r\n return;\r\n // send them to new portal\r\n } else if (EnableAdmin || EnableSuperUser) {\r\n // if user was being redirected from another page direct them back to that page\r\n\r\n if (props.location.state && props.location.state.path) {\r\n props.history.push(props.location.state.path);\r\n } else {\r\n props.history.push(`/administrator`);\r\n }\r\n }\r\n }\r\n }, [JSON.stringify(dContext)]);\r\n\r\n useEffect(() => {\r\n getDepartments();\r\n const emailLogin = document.getElementById('emailLogin');\r\n if (emailLogin) {\r\n emailLogin.focus();\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n setSearchString('');\r\n filterBySearchString('');\r\n getOrganizationsFromDepartmentChoices(departmentChoices);\r\n }, [departmentChoices]);\r\n\r\n useEffect(() => {\r\n filterBySearchString(searchString);\r\n }, [searchString]);\r\n\r\n useEffect(() => {\r\n filterBySearchString(searchString);\r\n }, [selectedOrganization]);\r\n\r\n const selectRole = (type) => {\r\n const { setDepartment } = dContext;\r\n if (type === 'admin') {\r\n sessionStorage.setItem('roleChoice', 'admin');\r\n setDepartment((prevState) => {\r\n // eslint-disable-next-line\r\n let clone = structuredClone(prevState);\r\n clone.roleType = 'administrator';\r\n return clone;\r\n });\r\n // need to set this back in case they go back to the login page\r\n setDepartmentChosenPhase(1);\r\n props.history.push('/administrator');\r\n } else if (type === 'evaluator') {\r\n sessionStorage.setItem('roleChoice', 'evaluator');\r\n setDepartment((prevState) => {\r\n // eslint-disable-next-line\r\n let cloneDept = structuredClone(prevState);\r\n cloneDept.roleType = 'evaluator';\r\n return cloneDept;\r\n });\r\n\r\n // need to set this back in case they go back to the login page\r\n setDepartmentChosenPhase(1);\r\n\r\n setRedirectToEvaluation(true);\r\n }\r\n };\r\n\r\n const getDepartments = () => {\r\n getTokenSilently()\r\n .then((token) => {\r\n fetchDataAuth0('user/allDepartments', null, formatBearerToken(token))\r\n .then((result) => {\r\n if (result.data.length == 1) {\r\n selectDepartment(result.data[0]);\r\n return;\r\n }\r\n\r\n setDepartmentChoices(result.data);\r\n setIsLoading(false);\r\n const { history } = props;\r\n const { location } = history;\r\n const showSuperUserPanelFromURL = query.get('showSuperUserPanel');\r\n if (showSuperUserPanelFromURL === 'true') {\r\n setShowSuperUserPanel(true);\r\n history.push('/');\r\n }\r\n })\r\n .catch((err) => {\r\n setIsLoading(false);\r\n console.log('getDepartments err: ', err);\r\n })\r\n .catch((err) => {\r\n setIsLoading(false);\r\n console.log('getDepartments err: ', err);\r\n Swal.fire({\r\n title: 'Error!',\r\n text: 'Failed to retrieve departments',\r\n type: 'error',\r\n icon: 'error',\r\n });\r\n });\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const getOrganizationsFromDepartmentChoices = (choices) => {\r\n const newOrgs = [];\r\n choices.forEach((c) => {\r\n const existingOrg = newOrgs.find((o) => {\r\n return (c.pkUUID_Org != null && c.pkUUID_Org == o.pkUUID_Org) || c.OrganizationName === o.OrganizationName;\r\n });\r\n\r\n if (!existingOrg) {\r\n newOrgs.push({\r\n OrganizationName: c.OrganizationName,\r\n OrganizationLogo: c.OrganizationLogo || c.DepartmentLogo,\r\n pkUUID_Org: c.pkUUID_Org,\r\n });\r\n }\r\n });\r\n\r\n newOrgs.sort((a, b) => {\r\n const stringA = a.OrganizationName ? a.OrganizationName.toLowerCase() : '';\r\n const stringB = b.OrganizationName ? b.OrganizationName.toLowerCase() : '';\r\n if (stringA < stringB) {\r\n return -1;\r\n }\r\n if (stringA > stringB) {\r\n return 1;\r\n }\r\n return 0;\r\n });\r\n setOrganizations(newOrgs);\r\n };\r\n\r\n const getUserDetails = () => {\r\n getTokenSilently()\r\n .then((token) => {\r\n fetchDataAgnostic('department/user/permissions', null, formatBearerToken(token))\r\n .then((res) => {\r\n setUserDetails(res.data);\r\n })\r\n .catch((err) => {\r\n console.log('getUserDetails err: ', err);\r\n });\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const selectDepartment = (department, cb) => {\r\n const { pk_Department } = department;\r\n const { setReduxDate, setReduxDateArray } = props;\r\n setReduxDate({});\r\n // setReduxDateArray(null);\r\n setIsFetchingDetailedDepartment(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n fetchDataAgnostic('department', { pk_Department }, formatBearerToken(token))\r\n .then((result) => {\r\n const detailedDepartment = clone(result.data.department);\r\n sessionStorage.setItem('department', pk_Department);\r\n\r\n dContext.setDepartment(detailedDepartment);\r\n setIsFetchingDetailedDepartment(false);\r\n if (cb) {\r\n cb();\r\n }\r\n })\r\n .catch((err) => {\r\n if (cb) {\r\n cb(true);\r\n }\r\n Swal.fire({\r\n title: 'No Program Details!',\r\n text: 'Failed to retrieve Program details. Please contact RezRATE support.',\r\n type: 'error',\r\n icon: 'error',\r\n });\r\n console.log('err: ', err);\r\n Swal.fire({\r\n title: 'Error!',\r\n text: 'Unable to access department. Please try again later.',\r\n type: 'error',\r\n icon: 'error',\r\n });\r\n\r\n setIsFetchingDetailedDepartment(false);\r\n // sessionStorage.removeItem('department');\r\n });\r\n })\r\n .catch((err) => {\r\n if (cb) {\r\n cb(true);\r\n }\r\n console.log('err selectDepartment getTokenSilently: ', err);\r\n setIsFetchingDetailedDepartment(false);\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const filterBySearchString = (str, setState = true) => {\r\n const newDepartmentChoicesToDisplay = departmentChoices.filter((dc) => {\r\n // domain ( the portion of the institutional email that comes after @ sign. for schwirian@uthscsa.edu, it would be uthscsa.edu)\r\n // -POC Name (First, Last or Last First -- we need an array of POCs for each department to be made available)\r\n // -Department Name\r\n // -Organization Name\r\n // -Department Short Name\r\n // -Organization Short Name\r\n\r\n if (\r\n selectedOrganization &&\r\n !(\r\n (dc.pkUUID_Org != null && dc.pkUUID_Org == selectedOrganization.pkUUID_Org) ||\r\n (dc.pkUUID_Org == null && dc.OrganizationName === selectedOrganization.OrganizationName)\r\n )\r\n ) {\r\n return false;\r\n }\r\n if (!searchString) {\r\n return true;\r\n }\r\n\r\n if (dc.DepartmentName && dc.DepartmentName.toLowerCase().indexOf(str.toLowerCase()) >= 0) {\r\n return true;\r\n }\r\n\r\n if (dc.OrganizationName && dc.OrganizationName.toLowerCase().indexOf(str.toLowerCase()) >= 0) {\r\n return true;\r\n }\r\n\r\n // TODO: Organization and dept ShortName, POC array checking for names.\r\n });\r\n\r\n if (!setState) {\r\n return departmentChoices;\r\n }\r\n setDepartmentChoicesToDisplay(\r\n newDepartmentChoicesToDisplay.filter((item) => item.OrgEnableHidden === false && item.DeptEnableHidden === false),\r\n );\r\n };\r\n\r\n const renderOrgFilterPopover = () => {\r\n return (\r\n \r\n \r\n {tabs.map((tab, index) => {\r\n return (\r\n {\r\n setActiveTab(index);\r\n }}\r\n >\r\n {tab.label}\r\n \r\n );\r\n })}\r\n */}\r\n
\r\n\r\n {renderContent()}\r\n \r\n {\r\n if (setShowSuperUserPanel) {\r\n setShowSuperUserPanel(false);\r\n }\r\n }}\r\n >\r\n
\r\n \r\n );\r\n })}\r\n \r\n\r\n {/* \r\n
\r\n \r\n \r\n
\r\n );\r\n })}\r\n \r\n \r\n {organizations.map((o, i) => {\r\n let backgroundColor = i % 2 == 0 ? 'white' : '#e8e8e8';\r\n\r\n if (JSON.stringify(selectedOrganization) === JSON.stringify(o)) {\r\n backgroundColor = '#d9f5ff';\r\n }\r\n return (\r\n {\r\n // const { pkUUID_Org, OrganizationName } = o;\r\n // filterByOrganization(pkUUID_Org || OrganizationName);\r\n setSelectedOrganization(o);\r\n setShowOrgFilter(false);\r\n }}\r\n >\r\n \r\n 
\r\n
\r\n \r\n
\r\n {o.OrganizationName}
\r\n \r\n
\r\n\r\n {userDetails && userDetails.EnableSuperUser ? (\r\n Please select a program. . .
\r\n\r\n {\r\n setShowSuperUserPanel(true);\r\n }}\r\n >\r\n {' '}\r\n
\r\n ) : (\r\n ''\r\n )}\r\n\r\n \r\n \r\n {\r\n setSearchString(e.target.value);\r\n }}\r\n />\r\n
\r\n\r\n {userDetails && userDetails.EnableSuperUser ? (\r\n \r\n {\r\n setShowOrgFilter(!showOrgFilter);\r\n }}\r\n >\r\n
\r\n \r\n \r\n {renderOrgFilterPopover()}\r\n \r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n {renderDepartmentList()}\r\n \r\n );\r\n };\r\n\r\n const renderDepartmentList = () => {\r\n return (\r\n \r\n \r\n
\r\n \r\n {selectedOrganization ? (\r\n
\r\n ) : (\r\n 'Showing All Orgs'\r\n )}\r\n \r\n \r\n 
\r\n
\r\n\r\n \r\n {selectedOrganization ? selectedOrganization.OrganizationName : '(Unnamed Org)'}\r\n
\r\n \r\n \r\n {/* filter out all departments that are hidden either on the dept level or organization level */}\r\n {departmentChoicesToDisplay && departmentChoicesToDisplay.length > 0 ? (\r\n departmentChoicesToDisplay.map((department, i) => {\r\n const alternatingColor = i % 2 ? '#f2f2f2' : '#fff';\r\n const { DepartmentName, OrganizationName, DepartmentLogo, pk_Department } = department;\r\n return (\r\n {\r\n selectDepartment(department);\r\n\r\n // not currently using default departments\r\n // setAsUsersDefaultDepartment(department.pk_Department);\r\n // props.history.back();\r\n }}\r\n >\r\n \r\n {OrganizationName}\r\n
\r\n \r\n \r\n \r\n );\r\n })\r\n ) : (\r\n \r\n \r\n 
\r\n
\r\n \r\n \r\n {DepartmentName}\r\n
\r\n \r\n
\r\n );\r\n } else {\r\n return (\r\n \r\n {/*
\r\n \r\n {' '}\r\n Select if Candidate or Not my doods\r\n
*/}\r\n \r\n {\r\n setIsCandidate(true);\r\n }}\r\n >\r\n {' '}\r\n I am a Candidate\r\n \r\n
\r\n \r\n {\r\n setIsCandidate(false);\r\n setDepartmentChosenPhase(1);\r\n }}\r\n >\r\n I am an Evaluator or Administrator\r\n \r\n
\r\n \r\n {/* */}\r\n
\r\n\r\n - \r\n
- Please check your email for invitations and interview day schedule links. \r\n
- These messages are unique to you. Do not share them with others. \r\n
- If you’re unable to locate your email, please contact the program you’ve applied to directly. \r\n
\r\n
\r\n );\r\n } else if (showSuperUserPanel) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n );\r\n } else if (isAuthenticated && isLoading == false && departmentChoices.length === 0) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n );\r\n } else if (departmentChoices && departmentChoices.length > 0) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n\r\n {userDetails && userDetails.EnableSuperUser ? (\r\n Please select a program. . .
\r\n\r\n {\r\n setShowSuperUserPanel(true);\r\n }}\r\n >\r\n {' '}\r\n
\r\n ) : (\r\n ''\r\n )}\r\n\r\n \r\n \r\n {\r\n setSearchString(e.target.value);\r\n }}\r\n />\r\n
\r\n\r\n {userDetails && userDetails.EnableSuperUser ? (\r\n \r\n {\r\n setShowOrgFilter(!showOrgFilter);\r\n }}\r\n >\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {selectedOrganization ? (\r\n
\r\n ) : (\r\n 'Showing All Orgs'\r\n )}\r\n \r\n \r\n \r\n
\r\n\r\n \r\n {selectedOrganization ? selectedOrganization.OrganizationName : '(Unnamed Org)'}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n })}\r\n \r\n \r\n {organizations.map((o, i) => {\r\n let backgroundColor = i % 2 == 0 ? 'white' : '#e8e8e8';\r\n\r\n if (JSON.stringify(selectedOrganization) === JSON.stringify(o)) {\r\n backgroundColor = '#d9f5ff';\r\n }\r\n return (\r\n {\r\n // const { pkUUID_Org, OrganizationName } = o;\r\n // filterByOrganization(pkUUID_Org || OrganizationName);\r\n setSelectedOrganization(o);\r\n setShowOrgFilter(false);\r\n }}\r\n >\r\n \r\n \r\n
\r\n \r\n
\r\n {o.OrganizationName}
\r\n \r\n \r\n {/* filter out all departments that are hidden either on the dept level or organization level */}\r\n {departmentChoicesToDisplay && departmentChoicesToDisplay.length > 0 ? (\r\n departmentChoicesToDisplay.map((department, i) => {\r\n const alternatingColor = i % 2 ? '#f2f2f2' : '#fff';\r\n const { DepartmentName, OrganizationName, DepartmentLogo, pk_Department } = department;\r\n return (\r\n {\r\n selectDepartment(department);\r\n\r\n // not currently using default departments\r\n // setAsUsersDefaultDepartment(department.pk_Department);\r\n // props.history.back();\r\n }}\r\n >\r\n \r\n {OrganizationName}\r\n
\r\n \r\n \r\n \r\n );\r\n })\r\n ) : (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {DepartmentName}\r\n
\r\n \r\n {\r\n selectRole('admin');\r\n }}\r\n >\r\n Administrator\r\n
\r\n \r\n \r\n );\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n Which role would you like to perform under?
\r\n\r\n {\r\n selectRole('evaluator');\r\n }}\r\n >\r\n Evaluator\r\n
\r\n \r\n {' '}\r\n {user && (\r\n
\r\n \r\n Hello, {user.name}\r\n
\r\n )}\r\n {determineContents()}
\r\n {/* {loadContent()} */}\r\n ${item}
`;\r\n });\r\n Swal.fire('please correct errors', `${htmlMessage}
`, 'error');\r\n setPassword1Blurred(true);\r\n setPassword2Blurred(true);\r\n return;\r\n }\r\n\r\n if (password1 !== password2) {\r\n Swal.fire('please correct errors', 'passwords do not match', 'error');\r\n setPassword1Blurred(true);\r\n setPassword2Blurred(true);\r\n return;\r\n }\r\n postData();\r\n };\r\n\r\n useEffect(() => {\r\n const token = props.match.params.id;\r\n const bodyFormData = new FormData();\r\n bodyFormData.append('token', token);\r\n axios({\r\n method: 'post',\r\n url: 'https://tools.rezrate.com/rezrate/api/login/',\r\n data: bodyFormData,\r\n headers: {\r\n 'content-type': 'application/json',\r\n },\r\n })\r\n .then((res) => {\r\n if (res.data.result === '200') {\r\n setNameLocal(res.data.name);\r\n props.setName(res.data.name);\r\n props.setShowName(true);\r\n setLoading(false);\r\n } else {\r\n props.setExpiredToken(true);\r\n props.history.push('/reset');\r\n }\r\n })\r\n .catch((err) => {\r\n setError(true);\r\n });\r\n }, []);\r\n if (error) {\r\n return \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Reset;\r\n","import { connect } from 'react-redux';\r\nimport Reset from './Reset';\r\nimport { setName } from '../InterviewDates/InterviewDatesRouter.action';\r\nimport { setExpiredToken } from './Login.action';\r\nimport { setShowName } from '../RezRATE/Header/Header.action';\r\n\r\nconst mapDispatchToProps = (dispatch) => ({\r\n setName: (userObject) => dispatch(setName(userObject)),\r\n setExpiredToken: (tokenIsExpired) => dispatch(setExpiredToken(tokenIsExpired)),\r\n setShowName: (value) => dispatch(setShowName(value)),\r\n});\r\n\r\nexport default connect(\r\n null,\r\n mapDispatchToProps,\r\n)(Reset);\r\n","import React, { useEffect, useState } from 'react';\r\nimport { Button } from 'reactstrap';\r\nimport BellSound from '../../assets/sounds/shipbell.wav';\r\nimport { CustomCarousel } from '../InterviewDates/InterviewDatesWrapper.styles';\r\n\r\nconst notificationMessages = [\r\n 'Hello there!',\r\n 'Over here!',\r\n 'Greetings, from RezRate!',\r\n `Looks like they're working!`,\r\n `You're all set here!`,\r\n];\r\n\r\nconst title = 'Welcome to RezRATE!';\r\nconst message = `RezRATE can be used to give you notifications of different things such as when your interview meetings are starting and ending. On this page we'll test your browser to make sure you don't miss these.`;\r\nconst messageTwo = 'blorp';\r\nconst firstSlideMessage = `First, let's make sure you're allowing notifications from RezRATE (we promise we'll only use this to help you keep track of your schedule).`;\r\nconst secondSlideMessage = `Now, let's make sure you're getting visual notifications. Press the button below to send yourself a notification.`;\r\n\r\nconst notificationRequest = {\r\n Requesting: `We've sent you a request to send you notifications. This can appear at different places on your device but genually appears in the top left or right of the screen.`,\r\n Approved: `Great! Looks like your device is allowing us to send you notifications. On the next slide we'll test a few things to make sure you're properly getting them.`,\r\n Denied: `Uh oh, looks like your device has denied us access to notifications. Click ${htmlInfo} to get some troubleshooting help.`,\r\n};\r\n\r\nconst NotificationTroubleshootUrl = 'https://www.rezrate.com/support/getting-started/notifications/';\r\n\r\nconst htmlInfo = (\r\n \r\n here\r\n \r\n);\r\n\r\nconst titleStyle = {\r\n color: 'black', //'RGB(0, 89, 120)',\r\n};\r\n\r\nconst buttonWrapper = {\r\n display: 'flex',\r\n justifyContent: 'space-evenly',\r\n};\r\n\r\nconst wrapperStyle = {\r\n height: '100%',\r\n padding: '30px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'space-between',\r\n color: 'black',\r\n};\r\n\r\nconst NotificationTest = () => {\r\n const [canRecieveNotifications, setCanRecieveNotifications] = useState(true);\r\n const [isGranted, setIsGranted] = useState(false);\r\n const [isDenied, setIsDenied] = useState(false);\r\n const [isRequesting, setIsRequesting] = useState(false);\r\n const [currentVisualMessage, setCurrentVisualMessage] = useState(0);\r\n const [isLoading, setIsLoading] = useState(true);\r\n const [currentSlide, setCurrentSlide] = useState(0);\r\n\r\n const checkIfUserCanRecieveNotifications = () => {\r\n if (!('Notification' in window)) {\r\n setCanRecieveNotifications(false);\r\n } else if (Notification.permission === 'granted') {\r\n // If it's okay let's create a notification\r\n setIsGranted(true);\r\n } else if (Notification.permission !== 'denied') {\r\n setIsRequesting(true);\r\n Notification.requestPermission().then(function(permission) {\r\n // If the user accepts, let's create a notification\r\n setIsRequesting(false);\r\n if (permission === 'granted') {\r\n setIsGranted(true);\r\n } else if (permission === 'denied') {\r\n setIsDenied(true);\r\n }\r\n setIsRequesting(false);\r\n });\r\n } else if (Notification.permission === 'denied') {\r\n setIsDenied(true);\r\n }\r\n };\r\n\r\n const determineMessage = () => {\r\n const messageToSend = notificationMessages[currentVisualMessage];\r\n if (currentVisualMessage < notificationMessages.length - 1) {\r\n setCurrentVisualMessage((prevState) => {\r\n return prevState + 1;\r\n });\r\n }\r\n return messageToSend;\r\n };\r\n\r\n const visualTest = () => {\r\n new Notification(determineMessage());\r\n };\r\n\r\n const audioTest = () => {\r\n var audio = new Audio(BellSound);\r\n audio.volume = 0.9;\r\n audio.play();\r\n };\r\n\r\n useEffect(() => {\r\n checkIfUserCanRecieveNotifications();\r\n setIsLoading(false);\r\n }, []);\r\n\r\n if (isLoading) {\r\n return ;\r\n }\r\n\r\n const determineWidth = () => {\r\n if (currentSlide === 0 && !isGranted) {\r\n return 0;\r\n } else if (currentSlide === 0) {\r\n return '33.3%';\r\n } else if (currentSlide === 1) {\r\n return '66.6%';\r\n } else if (currentSlide === 2) {\r\n return '100%';\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 At least one uppercase character\r\n \r\n - \r\n
\r\n At least one lowercase character\r\n \r\n - \r\n
\r\n At least one number\r\n \r\n - \r\n
\r\n Minimum of 8 characters\r\n \r\n - \r\n
\r\n Does not include your name\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default NotificationTest;\r\n","import { formatBearerToken } from '../Common.functions';\r\nimport { assignColorToCandidates } from './candidates';\r\nimport { fetchDataAgnostic } from './dataApi';\r\n\r\nexport const fetchCandidates = (token, options = {}) => {\r\n const { resolve, reject, pk_Department, callback, pk_Season } = options;\r\n\r\n fetchDataAgnostic(\r\n 'department/candidates',\r\n {\r\n pk_Department,\r\n pk_Season,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n let newCandidates = { ...res.data };\r\n newCandidates = assignColorToCandidates(newCandidates);\r\n\r\n if (callback) {\r\n callback(newCandidates);\r\n }\r\n\r\n if (resolve) {\r\n resolve(newCandidates);\r\n return;\r\n }\r\n\r\n return newCandidates;\r\n })\r\n .catch((e) => {\r\n if (callback) {\r\n callback([]);\r\n }\r\n\r\n if (reject) {\r\n reject(e);\r\n return;\r\n }\r\n return e;\r\n });\r\n};\r\n","const style = {\r\n itemRow: {\r\n minHeight: 80,\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n padding: 15,\r\n cursor: 'pointer',\r\n },\r\n imgPlaceHolder: {\r\n fontSize: 50,\r\n // marginRight: 10,\r\n width: 80,\r\n height: 80,\r\n objectFit: 'contain',\r\n },\r\n candidateInfo: {\r\n textAlign: 'left',\r\n fontWeight: 600,\r\n // fontSize: 12,\r\n },\r\n buttonIcon: {\r\n cursor: 'pointer',\r\n margin: 5,\r\n },\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n verticalAlign: 'middle',\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n};\r\n\r\nexport default style;\r\n","import {\r\n faCheckSquare,\r\n faClipboardCheck,\r\n faClipboardList,\r\n faEnvelope,\r\n faPortrait,\r\n faSquare,\r\n faThumbsDown,\r\n faTimes,\r\n faUserCheck,\r\n faUserTimes,\r\n} from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { CandidateStatusIcons } from 'enums.js';\r\nimport moment from 'moment';\r\nimport React, { useContext } from 'react';\r\nimport { UncontrolledTooltip } from 'reactstrap';\r\nimport Swal from 'sweetalert2';\r\nimport style from './style.js';\r\nimport { clone } from 'lodash';\r\nimport { DepartmentContext } from 'DepartmentWrapper.js';\r\n\r\nconst CandidateListItem = ({\r\n candidate = {},\r\n discardChanges,\r\n filterBy,\r\n hasChanges,\r\n index,\r\n isGettingCandidateDetails,\r\n multiselect,\r\n selectedCandidate,\r\n selectedCandidateIds,\r\n setSelectedCandidate,\r\n toggleCandidateSelection,\r\n uniqueId,\r\n useUnsavedChangesAlert,\r\n}) => {\r\n const dContext = useContext(DepartmentContext);\r\n const {\r\n PhotoUrl,\r\n Email,\r\n DateOfInterview,\r\n pk_Candidate,\r\n DeclinedComments,\r\n EnableMarkedForInvitation,\r\n EnableMarkedForPrescreen,\r\n EnableRespondedToInvitation,\r\n HasBeenRejectedForInterview,\r\n HasBeenSentConfirmation,\r\n HasBeenSentInvitation,\r\n HasDeclinedInterview,\r\n IsScheduled,\r\n IsWaitlisted,\r\n WaitlistDates,\r\n } = candidate;\r\n\r\n let candidateName = `---`;\r\n if (candidate && candidate.LastName && candidate.FirstName) {\r\n candidateName = `${candidate.LastName}, ${candidate.FirstName}`;\r\n } else if (candidate && candidate.LastName) {\r\n candidateName = `${candidate.LastName}`;\r\n } else if (candidate && candidate.FirstName) {\r\n candidateName = ` ${candidate.FirstName}`;\r\n }\r\n\r\n const isSelected = multiselect && selectedCandidateIds[candidate.pk_Candidate];\r\n\r\n let backgroundColor = null;\r\n if ((!multiselect && selectedCandidate && selectedCandidate.pk_Candidate == candidate.pk_Candidate) || isSelected) {\r\n backgroundColor = '#d9f5ff'; //'#fffd7d';\r\n } else if (index % 2 == 0) {\r\n backgroundColor = '#c7cbd1';\r\n }\r\n\r\n let subText = '';\r\n if (filterBy == 'All by Import Date') {\r\n subText =\r\n candidate && candidate.createdAt //createdAt\r\n ? `Imported: ${moment(candidate.createdAt).format('dddd, MMM. DD, YYYY')}`\r\n : 'No Import Date';\r\n } else if (candidate && DateOfInterview) {\r\n subText = `${moment(DateOfInterview).format('dddd, MMM. DD, YYYY')} ${\r\n candidate.Label ? `(${candidate.Label})` : ''\r\n }`;\r\n } else if (candidate && WaitlistDates) {\r\n subText = 'Pref: ';\r\n WaitlistDates.sort((a, b) => {\r\n return a.PreferenceOrder - b.PreferenceOrder;\r\n }).forEach((date, i) => {\r\n if (date.PreferenceOrder != null && date.PreferenceOrder != undefined) {\r\n subText += `${subText !== 'Pref: ' ? ', ' : ''}${\r\n date.DateOfInterview ? moment(date.DateOfInterview).format('MM/DD') : 'N/A'\r\n }`;\r\n }\r\n });\r\n }\r\n\r\n const renderStatusBar = () => {\r\n const statuses = [];\r\n const statusStyle = { marginRight: 5, cursor: 'pointer' };\r\n const { season } = dContext || {};\r\n const { AllowPrescreen } = season || {};\r\n const {\r\n pendingInvite,\r\n invited,\r\n waitlisted,\r\n confirmed,\r\n unconfirmed,\r\n rejected,\r\n scheduled,\r\n markedForInvite,\r\n prescreen,\r\n } = CandidateStatusIcons;\r\n\r\n if (EnableMarkedForInvitation) {\r\n const uniqueID = `marked_for_invite_${pk_Candidate}`;\r\n statuses.push(\r\n \r\n
\r\n {title}
\r\n{message}
\r\n\r\n
\r\n {firstSlideMessage}
\r\n {!canRecieveNotifications && (\r\n\r\n
\r\n )}\r\n {isRequesting && (\r\n \r\n Status: Incompatible\r\n
\r\n\r\n Uh oh, looks like your device doesn't have the ability to recieve notifications. You can switch devices\r\n and try again or use RezRATE without notifications.\r\n
\r\n\r\n
\r\n )}\r\n {isGranted && (\r\n \r\n Status: Requesting\r\n
\r\n{notificationRequest.Requesting}
\r\n\r\n
\r\n )}\r\n {isDenied && (\r\n \r\n Status: Approved\r\n
\r\n{notificationRequest.Approved}
\r\n\r\n
\r\n )}\r\n \r\n Status: Denied\r\n
\r\n\r\n Uh oh, looks like your device has denied us access to notifications. Click {htmlInfo} to get some\r\n troubleshooting help.\r\n
\r\n\r\n {isGranted && (\r\n {\r\n e.preventDefault();\r\n setCurrentSlide(1);\r\n }}\r\n color=\"primary\"\r\n >\r\n Next\r\n \r\n )}\r\n
\r\n \r\n
\r\n {secondSlideMessage}
\r\n\r\n {\r\n e.preventDefault();\r\n visualTest();\r\n }}\r\n color=\"info\"\r\n >\r\n Send Notification!\r\n \r\n
\r\n \r\n if you're recieving notifications, great! We can move to the next step. If not, we can try to help you{' '}\r\n \r\n troubleshoot.\r\n \r\n
\r\n \r\n {\r\n e.preventDefault();\r\n setCurrentSlide(0);\r\n }}\r\n >\r\n Previous Step\r\n \r\n\r\n {\r\n e.preventDefault();\r\n setCurrentSlide(2);\r\n }}\r\n color=\"primary\"\r\n >\r\n Next\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Now, let's test your audio settings. RezRATE can you send you audio notifications when you're not looking\r\n directly at your browser.\r\n
\r\n\r\n click the button below to send yourself an audio notification (remember to have the volume turned up on your\r\n device).\r\n
\r\n\r\n {\r\n e.preventDefault();\r\n audioTest();\r\n }}\r\n color=\"info\"\r\n >\r\n Send Audio Notfication!\r\n \r\n
\r\n \r\n You should hear the sound of a ship bell. We'll use this sound along with visual notifications to help keep\r\n you informed.\r\n
\r\n\r\n If you heard the sound, congratulations! You're all finished. If not, we can help you troubleshoot this.\r\n
\r\n\r\n {\r\n e.preventDefault();\r\n setCurrentSlide(1);\r\n }}\r\n >\r\n Previous Step\r\n \r\n {\r\n e.preventDefault();\r\n window.open(NotificationTroubleshootUrl, '_blank');\r\n }}\r\n color=\"warning\"\r\n >\r\n Troubleshoot\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n Progress
\r\n\r\n \r\n Marked for Invite - This candidate was marked for Invitation.\r\n \r\n
,\r\n );\r\n }\r\n\r\n if (HasBeenSentInvitation) {\r\n const uniqueID = `invited_${pk_Candidate}`;\r\n statuses.push(\r\n \r\n \r\n Invited - This candidate has been sent an invitation.\r\n \r\n
,\r\n );\r\n }\r\n\r\n if (EnableMarkedForInvitation && !HasBeenSentInvitation && !IsWaitlisted && !IsScheduled) {\r\n const uniqueID = `pending_invite_${pk_Candidate}`;\r\n statuses.push(\r\n \r\n \r\n Pending Invite - This candidate was marked for Invitation but has not been sent an invite yet.\r\n \r\n
,\r\n );\r\n }\r\n\r\n if (IsWaitlisted) {\r\n const uniqueID = `waitlisted_${pk_Candidate}`;\r\n statuses.push(\r\n \r\n \r\n Waitlisted - This candidate is currently waitlisted.\r\n \r\n
,\r\n );\r\n }\r\n\r\n if (AllowPrescreen && EnableMarkedForPrescreen) {\r\n const uniqueID = `marked_for_prescreen_${pk_Candidate}`;\r\n statuses.push(\r\n \r\n \r\n Marked for Prescreen - This candidate is marked for Prescreen.\r\n \r\n
,\r\n );\r\n }\r\n\r\n if (IsScheduled) {\r\n const uniqueID = `confirmation_${pk_Candidate}`;\r\n statuses.push(\r\n \r\n \r\n {HasBeenSentConfirmation\r\n ? 'Confirmation Sent - Candidate has been sent a registration confirmation email.'\r\n : 'Unconfirmed - Candidate has not been sent a registration confirmation email.'}\r\n \r\n
,\r\n );\r\n\r\n const scheduledID = `scheduled_${pk_Candidate}`;\r\n statuses.push(\r\n \r\n \r\n Scheduled - This candidate is registered for an interview date! (\r\n {moment(DateOfInterview).format('dddd, MMM. DD, YYYY')})\r\n \r\n
,\r\n );\r\n }\r\n\r\n if (HasBeenRejectedForInterview) {\r\n const uniqueID = `rejected_${pk_Candidate}`;\r\n statuses.push(\r\n \r\n \r\n Rejected - This candidate was marked as Rejected by Program.\r\n \r\n
,\r\n );\r\n }\r\n\r\n return statuses;\r\n };\r\n\r\n const handleSelectCandidate = () => {\r\n if (!multiselect) {\r\n if (\r\n (setSelectedCandidate && selectedCandidate == null) ||\r\n (selectedCandidate && candidate.pk_Candidate != selectedCandidate.pk_Candidate)\r\n ) {\r\n setSelectedCandidate(candidate);\r\n }\r\n } else {\r\n toggleCandidateSelection(candidate.pk_Candidate);\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n\r\n \r\n {multiselect ? (\r\n
\r\n \r\n {PhotoUrl ? (\r\n \r\n \r\n
\r\n ) : (\r\n \r\n
\r\n \r\n \r\n \r\n {candidateName}\r\n
\r\n {Email}
\r\n {HasDeclinedInterview ? null : {subText}
}\r\n\r\n {renderStatusBar()}
\r\n\r\n {HasDeclinedInterview ? (\r\n <>\r\n \r\n CANDIDATE DECLINED\r\n
\r\n \r\n
\r\n\r\n {buttons.map((button, i) => {\r\n const { customStyle = {}, lineAfter } = button;\r\n return (\r\n \r\n {interviewDates && interviewDates.length > 0 ? (\r\n interviewDates.map((interviewDate, i) => {\r\n const dateToDisplay = moment(interviewDate.DateOfInterview).format('dddd, MMM. DD, YYYY');\r\n\r\n const backgroundColor =\r\n filterBy.pk_InterviewDate == interviewDate.pk_InterviewDate ? '#d9f5ff' : i % 2 == 0 ? null : '#c7cbd1';\r\n return (\r\n {\r\n setFilterBy(interviewDate);\r\n }}\r\n >\r\n {`${dateToDisplay} ${interviewDate.Label ? `(${interviewDate.Label})` : ''}`}\r\n
\r\n );\r\n })\r\n ) : (\r\n 'No Schedule Dates'
\r\n )}\r\n \r\n
\r\n \r\n );\r\n })}\r\n \r\n );\r\n};\r\n\r\nexport default FilterPopover;\r\n","const style = {\r\n spacedBetweenRow: {\r\n flexDirection: 'row',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n width: '100%',\r\n },\r\n simpleRow: {\r\n flexDirection: 'row',\r\n display: 'flex',\r\n marginBottom: 10,\r\n },\r\n simpleColumn: {\r\n flexDirection: 'column',\r\n display: 'flex',\r\n },\r\n filterButton: {\r\n width: '100%',\r\n },\r\n clickable: {\r\n cursor: 'pointer',\r\n },\r\n};\r\n\r\nexport default style;\r\n","import {\r\n faCheckSquare,\r\n faFilter,\r\n faSearch,\r\n faSquare,\r\n faTag,\r\n faTimes,\r\n faTimesCircle,\r\n} from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport moment from 'moment-timezone';\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { Button, Input, InputGroup, InputGroupAddon, Popover, PopoverBody, PopoverHeader } from 'reactstrap';\r\nimport { clone } from '../../../../Services/schedule';\r\n\r\nimport CandidateListItem from './CandidateListItem';\r\nimport FilterPopover from './FilterPopover';\r\nimport style from './style.js';\r\n\r\nimport './CandidateList.style.css';\r\nimport { CandidateStatusIcons } from 'enums';\r\nimport TagFilterPopover from '../AdminCandidates/TagFilterPopover/TagFilterPopover';\r\nimport { useHistory } from 'react-router-dom/cjs/react-router-dom.min';\r\n\r\nlet typeTimeout = null;\r\n\r\nconst CandidateList = ({\r\n candidates,\r\n dateFromURL,\r\n discardChanges,\r\n forcedSelectedCandidateId,\r\n hasChanges,\r\n height,\r\n interviewDates,\r\n isGettingCandidateDetails,\r\n multiselect,\r\n selectedCandidate,\r\n setForcedSelectedCandidateId,\r\n setParentFilteredCandidates,\r\n setSelectedCandidate,\r\n showTagFilter,\r\n uniqueId,\r\n updateParentValues,\r\n useUnsavedChangesAlert,\r\n setResetList,\r\n}) => {\r\n const [filterBy, setFilterBy] = useState('All by Interview Date');\r\n const [searchString, setSearchString] = useState('');\r\n const [showFilterPopover, setShowFilterPopover] = useState(false);\r\n const [filteredCandidates, setFilteredCandidates] = useState([]);\r\n const [tagFilter, setTagFilter] = useState({ Tag: 'All', pk_Tag: null });\r\n const [showTagFilterPopover, setShowTagFilterPopover] = useState(false);\r\n\r\n const [selectedCandidateIds, setSelectedCandidateIds] = useState({});\r\n const [selectAll, setSelectAll] = useState(false);\r\n const [urlInterviewDate, setUrlInterviewDate] = useState();\r\n\r\n const history = useHistory();\r\n const { pathname } = useLocation();\r\n const query = new URLSearchParams(useLocation().search);\r\n let searchBar = useRef();\r\n\r\n const {\r\n markedForInvite,\r\n pendingInvite,\r\n invited,\r\n waitlisted,\r\n confirmed,\r\n unconfirmed,\r\n rejected,\r\n declined,\r\n scheduled,\r\n unscheduled,\r\n unresponsive,\r\n notSentSchedule,\r\n } = CandidateStatusIcons;\r\n\r\n const toggleCandidateSelection = (pk_Candidate) => {\r\n const newSelectedCandidateIds = clone(selectedCandidateIds);\r\n if (newSelectedCandidateIds[pk_Candidate] == null) {\r\n newSelectedCandidateIds[pk_Candidate] = true;\r\n } else {\r\n newSelectedCandidateIds[pk_Candidate] = !newSelectedCandidateIds[pk_Candidate];\r\n }\r\n\r\n setSelectedCandidateIds(newSelectedCandidateIds);\r\n // setSelectedCandidateIds((prevState) => {\r\n // // make a copy to prevent state mutation\r\n // const copy = Object.assign({}, prevState);\r\n\r\n // // If the entry hasn't been added just add it\r\n // if (!copy[pk_Candidate]) {\r\n // copy[pk_Candidate] = true;\r\n // return copy;\r\n // }\r\n\r\n // // if it has been added, toggle it's boolean\r\n\r\n // copy[pk_Candidate] = !copy[pk_Candidate];\r\n // return copy;\r\n // });\r\n };\r\n\r\n useEffect(() => {\r\n searchBar.current = document.getElementById('candidateListSearchBar');\r\n if (setResetList) {\r\n setResetList(resetList);\r\n }\r\n\r\n const newFilterBy = query.get('filterBy');\r\n if (newFilterBy) {\r\n setFilterBy(newFilterBy ? newFilterBy : 'All by Interview Date');\r\n filterByButton('', newFilterBy ? newFilterBy : 'All by Interview Date');\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (dateFromURL) {\r\n // setFilterBy(dateFromURL);\r\n filterByButton('', dateFromURL);\r\n }\r\n }, [dateFromURL]);\r\n\r\n useEffect(() => {\r\n if (candidates) {\r\n filterByButton('', '', forcedSelectedCandidateId, {\r\n updateSelectedItem: forcedSelectedCandidateId || selectedCandidate == null,\r\n });\r\n }\r\n }, [forcedSelectedCandidateId]);\r\n\r\n useEffect(() => {\r\n if (candidates) {\r\n filterByButton('', '', forcedSelectedCandidateId, {\r\n updateSelectedItem: forcedSelectedCandidateId || selectedCandidate == null,\r\n });\r\n }\r\n // setShowFilterPopover(true);\r\n }, [tagFilter]);\r\n\r\n useEffect(() => {\r\n if (selectAll) {\r\n const newSelectedCandidateIDs = {};\r\n filteredCandidates.forEach((c) => {\r\n newSelectedCandidateIDs[c.pk_Candidate] = true;\r\n });\r\n setSelectedCandidateIds(newSelectedCandidateIDs);\r\n } else {\r\n setSelectedCandidateIds({});\r\n }\r\n }, [selectAll]);\r\n\r\n useEffect(() => {\r\n if (selectedCandidateIds && updateParentValues) {\r\n updateParentValues(clone(selectedCandidateIds));\r\n }\r\n }, [selectedCandidateIds]);\r\n\r\n const resetList = () => {\r\n const newFilterBy = query.get('filterBy');\r\n setSelectedCandidateIds({});\r\n setSelectedCandidate(null);\r\n\r\n setTagFilter({ Tag: 'All', pk_Tag: null });\r\n setFilterBy(newFilterBy ? newFilterBy : 'All by Interview Date');\r\n filterByButton('', newFilterBy ? newFilterBy : 'All by Interview Date');\r\n };\r\n\r\n const onFilterBy = (filterString) => {\r\n setSelectedCandidateIds({});\r\n setSelectedCandidate(null);\r\n setFilterBy(filterString);\r\n setShowFilterPopover(false);\r\n\r\n setSelectAll(false);\r\n filterByButton('', filterString);\r\n };\r\n\r\n const filterBySearch = (searchString = '', isInline) => {\r\n if (candidates == null) {\r\n if (isInline) {\r\n return [];\r\n } else {\r\n setFilteredCandidates([]);\r\n return;\r\n }\r\n }\r\n const newFilteredCandidates = Object.values(candidates).filter((c) => {\r\n if (c == null) {\r\n return;\r\n }\r\n\r\n let {\r\n NRMPID,\r\n AAMCID,\r\n SFMatchID,\r\n MedicalSchoolOfGraduation,\r\n PreferredName = '',\r\n FirstName = '',\r\n MiddleName = '',\r\n LastName = '',\r\n } = c;\r\n NRMPID = NRMPID || '';\r\n AAMCID = AAMCID || '';\r\n SFMatchID = SFMatchID || '';\r\n MedicalSchoolOfGraduation = MedicalSchoolOfGraduation || '';\r\n PreferredName = PreferredName || '';\r\n\r\n const name = `${FirstName} ${MiddleName} ${LastName}`;\r\n const formattedName = `${LastName || ''}, ${FirstName || ''}`;\r\n const email = c.Email || '';\r\n const lowerCaseSearchString = searchString.toLowerCase();\r\n const accentlessName = name\r\n .toLowerCase()\r\n .normalize('NFD')\r\n .replace(/\\p{Diacritic}/gu, '');\r\n\r\n const accentlessPreferredName = PreferredName.toLowerCase()\r\n .normalize('NFD')\r\n .replace(/\\p{Diacritic}/gu, '');\r\n\r\n let matchesTag = false;\r\n const { Tags = [] } = c || {};\r\n Tags.forEach((tag) => {\r\n if (tag.Tag && tag.Tag.toLowerCase().indexOf(lowerCaseSearchString) >= 0) {\r\n matchesTag = true;\r\n }\r\n });\r\n\r\n // Debugger. Don't delete\r\n // console.log(\r\n // 'name: ',\r\n // name,\r\n // '\\nemail: ',\r\n // email,\r\n // '\\nNRMPID: ',\r\n // NRMPID,\r\n // '\\nAAMCID: ',\r\n // AAMCID,\r\n // '\\nSFMatchID: ',\r\n // SFMatchID,\r\n // '\\nMedicalSchoolOfGraduation: ',\r\n // MedicalSchoolOfGraduation,\r\n // );\r\n\r\n return (\r\n name.toLowerCase().indexOf(lowerCaseSearchString) >= 0 ||\r\n PreferredName.toLowerCase().indexOf(lowerCaseSearchString) >= 0 ||\r\n formattedName.toLocaleLowerCase().indexOf(lowerCaseSearchString) >= 0 ||\r\n email.toLowerCase().indexOf(lowerCaseSearchString) >= 0 ||\r\n NRMPID.toLowerCase().indexOf(lowerCaseSearchString) >= 0 ||\r\n AAMCID.toLowerCase().indexOf(lowerCaseSearchString) >= 0 ||\r\n SFMatchID.toLowerCase().indexOf(lowerCaseSearchString) >= 0 ||\r\n accentlessName.indexOf(lowerCaseSearchString) >= 0 ||\r\n accentlessPreferredName.indexOf(lowerCaseSearchString) >= 0\r\n // || MedicalSchoolOfGraduation.toLowerCase().indexOf(searchString.toLowerCase()) >= 0\r\n // || matchesTag\r\n );\r\n });\r\n\r\n if (isInline) {\r\n return newFilteredCandidates;\r\n } else {\r\n setFilterBy('All by Name');\r\n setFilteredCandidates(newFilteredCandidates || []);\r\n setSelectedCandidate(newFilteredCandidates.length > 0 ? newFilteredCandidates[0] : null);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (selectedCandidate) {\r\n scrollToItem(`candidateList_${selectedCandidate.pk_Candidate}_${uniqueId || ''}`);\r\n }\r\n }, [JSON.stringify(filteredCandidates)]);\r\n\r\n useEffect(() => {\r\n if (candidates) {\r\n filterByButton('', '', forcedSelectedCandidateId, {\r\n updateSelectedItem:\r\n (forcedSelectedCandidateId && forcedSelectedCandidateId == selectedCandidate.pk_Candidate) ||\r\n selectedCandidate == null,\r\n });\r\n }\r\n }, [candidates]);\r\n\r\n useEffect(() => {\r\n const searchParams = new URLSearchParams(history.location.search);\r\n const pk_Candidate = searchParams.get('pk_Candidate');\r\n\r\n if (pk_Candidate && selectedCandidate) {\r\n const inputField = document.getElementById('candidateListSearchBar');\r\n const newSelectedCandidateIDs = {};\r\n newSelectedCandidateIDs[parseInt(pk_Candidate)] = true;\r\n history.push(pathname);\r\n const nameToSearch = `${selectedCandidate.LastName || ''}, ${selectedCandidate.FirstName || ''}`;\r\n setSelectedCandidateIds(newSelectedCandidateIDs);\r\n inputField.value = nameToSearch;\r\n\r\n setSearchString(nameToSearch);\r\n filterBySearch(nameToSearch);\r\n // setTimeout(() => {\r\n // console.log('scroll string: ', `candidateList_${pk_Candidate}_${uniqueId || ''}`);\r\n // scrollToItem(`candidateList_${pk_Candidate}_${uniqueId || ''}`);\r\n // }, 1000);\r\n }\r\n }, [pathname, selectedCandidate, candidates]);\r\n\r\n const processFilterButtonName = () => {\r\n switch (filterBy) {\r\n case 'All by Name':\r\n return `All (${filteredCandidates.length}) sorted by Name.`;\r\n\r\n case 'Unscheduled':\r\n return (\r\n \r\n {' '}\r\n {\r\n e.stopPropagation();\r\n setFilterBy(button.filterBy);\r\n setShowFilterPopover(false);\r\n }}\r\n >\r\n \r\n {button.tooltip}\r\n \r\n {lineAfter ? (\r\n \r\n {' '}\r\n
\r\n ) : null}\r\n \r\n
\r\n \r\n \r\n
\r\n {button.label}
\r\n \r\n {`${filteredCandidates.length} Unregistered`}
\r\n \r\n );\r\n case 'Scheduled':\r\n return (\r\n \r\n
\r\n \r\n {`${filteredCandidates.length} Scheduled`}
\r\n \r\n );\r\n case 'Waitlisted':\r\n return (\r\n \r\n
\r\n \r\n {`${filteredCandidates.length} Waitlisted`}
\r\n \r\n );\r\n case 'Unresponsive':\r\n return (\r\n \r\n
\r\n \r\n {`${filteredCandidates.length} Unresponsive`}
\r\n \r\n );\r\n case 'All by Import Date':\r\n return `All (${filteredCandidates.length}) sorted by Import Date`;\r\n case 'All by Interview Date':\r\n return `All (${filteredCandidates.length}) sorted by Interview Date`;\r\n case 'All Invited':\r\n return (\r\n \r\n
\r\n \r\n {`All (${filteredCandidates.length}) Invited`}
\r\n \r\n );\r\n case 'All Pending Invite':\r\n return (\r\n \r\n
\r\n \r\n {`All (${filteredCandidates.length}) Pending Invite`}
\r\n \r\n );\r\n case 'All Marked for Invite':\r\n return (\r\n \r\n
\r\n \r\n {`All (${filteredCandidates.length}) Marked for Invite`}
\r\n \r\n );\r\n case 'Declined':\r\n return (\r\n \r\n
\r\n \r\n {`${filteredCandidates.length} Declined`}
\r\n \r\n );\r\n return;\r\n case 'All Not Sent Schedule':\r\n return (\r\n \r\n
\r\n \r\n {`All (${filteredCandidates.length}) Not Sent Schedule`}
\r\n \r\n );\r\n\r\n default:\r\n return `${filteredCandidates.length} registered for ${moment\r\n .tz(filterBy.DateOfInterview, null)\r\n .format('MMM DD, YYYY')} ${filterBy.Label ? `(${filterBy.Label})` : ''} `;\r\n }\r\n };\r\n\r\n const scrollToItem = (id) => {\r\n if (multiselect) {\r\n return;\r\n }\r\n const element = document.getElementById(id);\r\n if (element) {\r\n element.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n }\r\n };\r\n\r\n const processButtonFilterValue = (valueToFilterBy, candidateToFilter) => {\r\n // we should return an object saying if it's a non-compliant candidate but is the currently selected candidate.\r\n };\r\n\r\n // TODO: Filter via explicit button press should default selectedCandidate to index 0.\r\n // TODO: Filter should respect forcedSelectedCandidate\r\n const filterByButton = (newSearchString, forcedFilter, forcedSelectedCandidate, options = {}) => {\r\n const { updateSelectedItem = true } = options;\r\n let newCandidates = filterBySearch(newSearchString, true).slice();\r\n let filterActual = forcedFilter || filterBy;\r\n\r\n let sortByalpha = true;\r\n\r\n let selectedCandidatePkCandidate = null;\r\n\r\n if (forcedSelectedCandidate) {\r\n selectedCandidatePkCandidate = forcedSelectedCandidate;\r\n }\r\n // else if (selectedCandidate) {\r\n // selectedCandidatePkCandidate = selectedCandidate.pk_Candidate;\r\n // }\r\n\r\n if (!newSearchString && searchBar) {\r\n searchBar.current.value = '';\r\n }\r\n\r\n if (forcedFilter) {\r\n setFilterBy(forcedFilter);\r\n }\r\n\r\n // TODO: Filter by Pending invite not matching Pending Invite filter in Candidates list\r\n switch (filterActual) {\r\n case 'Scheduled':\r\n newCandidates = newCandidates.filter((c) => {\r\n const { pk_Candidate, IsScheduled } = c;\r\n return IsScheduled || (pk_Candidate == selectedCandidatePkCandidate && !multiselect);\r\n });\r\n sortByalpha = false;\r\n break;\r\n case 'Unscheduled':\r\n newCandidates = newCandidates.filter((c) => {\r\n const { pk_Candidate, IsScheduled } = c;\r\n return !IsScheduled || (pk_Candidate == selectedCandidatePkCandidate && !multiselect);\r\n });\r\n break;\r\n case 'All Invited':\r\n newCandidates = newCandidates.filter((c) => {\r\n const { pk_Candidate, HasBeenSentInvitation } = c;\r\n return HasBeenSentInvitation || (pk_Candidate == selectedCandidatePkCandidate && !multiselect);\r\n });\r\n break;\r\n case 'All Pending Invite':\r\n newCandidates = newCandidates.filter((c) => {\r\n // return c.EnableMarkedForInvitation && !c.HasBeenSentInvitation;\r\n\r\n return !c.IsScheduled && !c.IsWaitlisted && !c.HasBeenSentInvitation && c.EnableMarkedForInvitation; // EnableMarkedForInvitation maybe.\r\n });\r\n break;\r\n\r\n case 'All Marked for Invite':\r\n newCandidates = newCandidates.filter((c) => {\r\n const { pk_Candidate, EnableMarkedForInvitation } = c;\r\n return EnableMarkedForInvitation || (pk_Candidate == selectedCandidatePkCandidate && !multiselect);\r\n });\r\n break;\r\n case 'Declined':\r\n newCandidates = newCandidates.filter((c) => {\r\n const { pk_Candidate, HasDeclinedInterview } = c;\r\n return HasDeclinedInterview || (pk_Candidate == selectedCandidatePkCandidate && !multiselect);\r\n });\r\n break;\r\n case 'Waitlisted':\r\n newCandidates = newCandidates.filter((c) => {\r\n const { pk_Candidate, IsWaitlisted } = c;\r\n return IsWaitlisted || (pk_Candidate == selectedCandidatePkCandidate && !multiselect);\r\n });\r\n\r\n break;\r\n case 'Unresponsive':\r\n newCandidates = newCandidates.filter((c) => {\r\n const { pk_Candidate, IsUnresponsive, HasBeenSentInvitation, WaitlistDates = [], DateOfInterview } = c;\r\n\r\n return (\r\n (HasBeenSentInvitation &&\r\n ((WaitlistDates && WaitlistDates.length == 0) || !WaitlistDates) &&\r\n !DateOfInterview) ||\r\n IsUnresponsive\r\n );\r\n return IsUnresponsive || (pk_Candidate == selectedCandidatePkCandidate && !multiselect);\r\n });\r\n break;\r\n case 'All by Name': {\r\n newCandidates.sort((a, b) => {\r\n const textA = `${a.LastName}, ${a.FirstName}`;\r\n const textB = `${b.LastName}, ${b.FirstName}`;\r\n return textA < textB ? -1 : textA > textB ? 1 : 0;\r\n });\r\n sortByalpha = false;\r\n break;\r\n }\r\n case 'All by Import Date':\r\n // Compare import dates. No import date in candidates yet.\r\n newCandidates.sort((a, b) => {\r\n const date1 = a.createdAt ? new Date(a.createdAt) : null;\r\n const date2 = b.createdAt ? new Date(b.createdAt) : null;\r\n\r\n let sortValue = 0;\r\n if (date1 == null && date2 != null) {\r\n sortValue = 1;\r\n } else if (date2 == null && date1 != null) {\r\n sortValue = -1;\r\n } else if (date1 != null && date2 != null && date1 < date2) {\r\n sortValue = -1;\r\n } else if ((date1 != null && date2 != null && date1 > date2) || (date1 != null && date2 == null)) {\r\n sortValue = 1;\r\n } else if (date1 == null) {\r\n } else {\r\n const textA = `${a.LastName}, ${a.FirstName}`;\r\n const textB = `${b.LastName}, ${b.FirstName}`;\r\n return textA < textB ? -1 : textA > textB ? 1 : 0;\r\n }\r\n sortByalpha = false;\r\n return sortValue;\r\n });\r\n break;\r\n case 'All by Interview Date':\r\n newCandidates\r\n .sort((a, b) => {\r\n const aString = `${a.LastName}, ${a.FirstName}`;\r\n const bString = `${b.LastName}, ${b.FirstName} `;\r\n\r\n if (aString.toLowerCase() < bString.toLowerCase()) {\r\n return -1;\r\n }\r\n if (aString.toLowerCase() > bString.toLowerCase()) {\r\n return 1;\r\n }\r\n return 0;\r\n })\r\n .sort((a, b) => {\r\n const isWaitlisted1 = a.IsWaitlisted;\r\n const isWaitlisted2 = b.IsWaitlisted;\r\n\r\n if (isWaitlisted1 && !isWaitlisted2) {\r\n return -1;\r\n } else if (!isWaitlisted1 && isWaitlisted2) {\r\n return 1;\r\n } else {\r\n return 0;\r\n }\r\n })\r\n .sort((a, b) => {\r\n const date1 = a.DateOfInterview ? new Date(a.DateOfInterview) : null;\r\n const date2 = b.DateOfInterview ? new Date(b.DateOfInterview) : null;\r\n\r\n let sortValue = 0;\r\n if (date1 == null && date2 != null) {\r\n sortValue = 1;\r\n } else if (date2 == null && date1 != null) {\r\n sortValue = -1;\r\n } else if (date1 != null && date2 != null && date1 < date2) {\r\n sortValue = -1;\r\n } else if ((date1 != null && date2 != null && date1 > date2) || (date1 != null && date2 == null)) {\r\n sortValue = 1;\r\n } else if (date1 == null) {\r\n }\r\n return sortValue;\r\n });\r\n sortByalpha = false;\r\n break;\r\n case 'All Not Sent Schedule':\r\n newCandidates = newCandidates\r\n .filter((c) => {\r\n const { pk_Candidate, HasBeenSentSchedule, IsScheduled } = c;\r\n return (\r\n (IsScheduled && !HasBeenSentSchedule) || (pk_Candidate == selectedCandidatePkCandidate && !multiselect)\r\n );\r\n })\r\n .sort((a, b) => {\r\n const textA = `${a.LastName}, ${a.FirstName}`;\r\n const textB = `${b.LastName}, ${b.FirstName}`;\r\n return textA < textB ? -1 : textA > textB ? 1 : 0;\r\n });\r\n sortByalpha = false;\r\n break;\r\n default:\r\n newCandidates = newCandidates\r\n .filter((c) => {\r\n return c.pk_InterviewDate == filterActual.pk_InterviewDate;\r\n // return c.DateOfInterview && moment(c.DateOfInterview).format() == moment(filterBy).format();\r\n })\r\n .sort((a, b) => {\r\n const aString = `${a.LastName} ${a.FirstName}`;\r\n const bString = `${b.LastName} ${b.FirstName} `;\r\n\r\n if (aString < bString) {\r\n return -1;\r\n }\r\n if (aString > bString) {\r\n return 1;\r\n }\r\n return 0;\r\n });\r\n sortByalpha = false;\r\n // setFilteredCandidates(newFilteredCandidates);\r\n // setSelectedCandidate(newFilteredCandidates.length >= 0 ? newFilteredCandidates[0] : null);\r\n // return;\r\n break;\r\n }\r\n\r\n // Remove isRemoved = true. Do not display.\r\n newCandidates = newCandidates.filter((c) => {\r\n return !c.isRemoved;\r\n });\r\n\r\n // Filter by tag\r\n newCandidates = newCandidates.filter((c) => {\r\n if (tagFilter.pk_Tag == null) {\r\n return true;\r\n }\r\n\r\n const { Tags = [], pk_Candidate } = c || {};\r\n\r\n if (pk_Candidate == selectedCandidatePkCandidate && !multiselect) {\r\n return true;\r\n }\r\n const existsIntags = Tags.find((tag) => {\r\n return tag.pk_Tag != null && tag.pk_Tag == tagFilter.pk_Tag;\r\n });\r\n\r\n return existsIntags != null;\r\n });\r\n\r\n const id = query.get('pk_Candidate');\r\n let indexToSelect = 0;\r\n\r\n if (selectedCandidatePkCandidate) {\r\n const selectedCandidateIndex = newCandidates.findIndex((item) => {\r\n return item.pk_Candidate == selectedCandidatePkCandidate;\r\n });\r\n if (selectedCandidateIndex > 0) {\r\n indexToSelect = selectedCandidateIndex;\r\n }\r\n } else if (id) {\r\n const selectedCandidateIndex = newCandidates.findIndex((item) => {\r\n return item.pk_Candidate == id;\r\n });\r\n if (selectedCandidateIndex > 0) {\r\n indexToSelect = selectedCandidateIndex;\r\n }\r\n }\r\n const valueToReturn = newCandidates.length >= 0 ? newCandidates[indexToSelect] : null;\r\n\r\n const selectedCandidateStillExists = newCandidates.find((c) => {\r\n return c.pk_Candidate == selectedCandidatePkCandidate;\r\n });\r\n\r\n if (\r\n updateSelectedItem &&\r\n ((!selectedCandidateStillExists && valueToReturn) || (selectedCandidate && !valueToReturn))\r\n ) {\r\n setSelectedCandidate(valueToReturn);\r\n }\r\n\r\n if (sortByalpha) {\r\n newCandidates.sort((a, b) => {\r\n const textA = `${a.LastName}, ${a.FirstName}`;\r\n const textB = `${b.LastName}, ${b.FirstName}`;\r\n return textA < textB ? -1 : textA > textB ? 1 : 0;\r\n });\r\n }\r\n\r\n setFilteredCandidates(newCandidates);\r\n };\r\n\r\n const renderSearchInput = () => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n Filter/Sort
\r\n \r\n {\r\n e.stopPropagation();\r\n setShowFilterPopover(false);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n Tag Filter
\r\n \r\n {\r\n setShowTagFilterPopover(false);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n {renderSearchInput()}
\r\n {renderFilterButton()}
\r\n {showTagFilter ? {renderFilterByTagButton()}
: null}\r\n {multiselect ? (\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n \r\n {\r\n setSelectAll(!selectAll);\r\n }}\r\n />\r\n
\r\n Select All
\r\n \r\n {selectedCandidatesCount || 0} / {filteredCandidates ? filteredCandidates.length : 0}\r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default CandidateList;\r\n","const style = {\r\n endAlignRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'flex-end',\r\n width: '100%',\r\n },\r\n centerAlignRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n width: '100%',\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n padding: 5,\r\n },\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n },\r\n footerContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n width: '100%',\r\n justifyContent: 'center',\r\n },\r\n saveButton: {\r\n width: 200,\r\n },\r\n};\r\nexport default style;\r\n","import React, { useContext, useState, useRef, useEffect } from 'react';\r\nimport { Button, FormFeedback, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';\r\nimport { useAuth0 } from '../../../../../auth0/reactAuth0Spa';\r\nimport { formatBearerToken, isInvalidEmail } from '../../../../../Common.functions';\r\nimport { DepartmentContext } from '../../../../../DepartmentWrapper';\r\nimport { postDataAgnostic } from '../../../../../Services/dataApi';\r\nimport { clone } from '../../../../../Services/schedule';\r\nimport './AddNewCandidateModal.style.css';\r\nimport style from './style';\r\nimport { NotificationManager } from 'react-notifications';\r\n\r\nconst AddNewCandidateModal = ({ showModal = false, setShowModal, token, getCandidates, ...props }) => {\r\n const [newCandidate, setNewCandidate] = useState({});\r\n const [triedToSubmit, setTriedToSubmit] = useState(false);\r\n const [isSubmitting, setIsSubmitting] = useState(false);\r\n\r\n const dContext = useContext(DepartmentContext);\r\n const firstNameRef = useRef();\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n\r\n const addCandidate = (candidate) => {\r\n const requiredFields = ['FirstName', 'LastName', 'Email'];\r\n let isValid = true;\r\n requiredFields.forEach((f) => {\r\n if (!candidate[f] || candidate[f] == null) {\r\n isValid = false;\r\n }\r\n });\r\n if (!isValid) {\r\n return;\r\n }\r\n\r\n setIsSubmitting(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n postDataAgnostic(\r\n 'department/season/candidate',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n pk_Season: dContext.season.pk_Season,\r\n },\r\n {\r\n candidateObject: candidate,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n setIsSubmitting(false);\r\n getCandidates();\r\n setShowModal(false);\r\n NotificationManager.success('Success!', 'Candidate Saved');\r\n })\r\n .catch((err) => {\r\n setIsSubmitting(false);\r\n NotificationManager.error('Error!', 'Candidate not saved');\r\n });\r\n })\r\n .catch((err) => {\r\n setIsSubmitting(false);\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n NotificationManager.error('Error!', 'Candidate not saved');\r\n });\r\n };\r\n\r\n const onChange = (key, value) => {\r\n const newNewCandidate = clone(newCandidate);\r\n newNewCandidate[key] = value;\r\n setNewCandidate(newNewCandidate);\r\n };\r\n\r\n useEffect(() => {\r\n if (showModal) {\r\n setTimeout(() => {\r\n firstNameRef.current.focus();\r\n }, 200);\r\n }\r\n }, [showModal, firstNameRef]);\r\n\r\n const { FirstName, MiddleName, LastName, Email } = newCandidate;\r\n return (\r\n \r\n {Object.values(filteredCandidates).map((candidate, i) => {\r\n const { pk_Candidate, PhotoUrl, LastName, FirstName, Email } = candidate;\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 onChange('FirstName', e.target.value);\r\n }}\r\n />\r\n First Name is required! \r\n \r\n
\r\n \r\n \r\n \r\n {\r\n onChange('MiddleName', e.target.value);\r\n }}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n {\r\n onChange('LastName', e.target.value);\r\n }}\r\n />\r\n Last Name is required! \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {\r\n onChange('Email', e.target.value);\r\n }}\r\n />\r\n {isInvalidEmail(Email) ? 'Invalid Email format!' : 'Email is Required!'} \r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n setTriedToSubmit(true);\r\n addCandidate(newCandidate);\r\n }}\r\n >\r\n Save\r\n \r\n
\r\n \r\n
\r\n {tag.Tag}
{' '}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default TagItem;\r\n","import { faPlus, faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport { Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';\r\nimport Swal from 'sweetalert2';\r\nimport { useAuth0 } from '../../../../../auth0/reactAuth0Spa';\r\nimport { formatBearerToken } from '../../../../../Common.functions';\r\nimport { DepartmentContext } from '../../../../../DepartmentWrapper';\r\nimport { deleteData, fetchDataAgnostic, postDataAgnostic } from '../../../../../Services/dataApi';\r\nimport { clone } from '../../../../../Services/schedule';\r\nimport ConfirmModal from '../../../Coordinator/Schedule/ConfirmModal';\r\nimport style from './style';\r\nimport TagItem from './TagItem';\r\nimport { useAlert } from 'react-alert';\r\n\r\nconst TagPopover = ({\r\n token,\r\n selectedCandidates = [],\r\n getCandidates,\r\n getAllCandidatesData,\r\n setShowPopover,\r\n setParentTags,\r\n}) => {\r\n const [searchString, setSearchString] = useState('');\r\n\r\n const [selectedTags, setSelectedTags] = useState([]);\r\n const [oldTags, setOldTags] = useState([]);\r\n\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [isAddingTab, setIsAddingTab] = useState(false);\r\n\r\n const [tagChoices, setTagChoices] = useState([]);\r\n const [showTagConfirmModal, setShowTagConfirmModal] = useState(false);\r\n const [tagAction, setTagAction] = useState();\r\n\r\n const alert = useAlert();\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n const dContext = useContext(DepartmentContext);\r\n\r\n useEffect(() => {\r\n initializeSelectedTags();\r\n }, [JSON.stringify(selectedCandidates), JSON.stringify(tagChoices)]);\r\n\r\n useEffect(() => {\r\n getTags();\r\n }, []);\r\n\r\n const initializeSelectedTags = () => {\r\n const allTags = {};\r\n const newSelectedTags = [];\r\n selectedCandidates.forEach((candidate) => {\r\n if (candidate && candidate.Tags) {\r\n candidate.Tags.forEach((tag) => {\r\n if (allTags[tag.Tag]) {\r\n allTags[tag.Tag] = { Tag: tag.Tag, count: allTags[tag.Tag].count + 1 };\r\n } else {\r\n allTags[tag.Tag] = { Tag: tag.Tag, count: 1 };\r\n }\r\n });\r\n }\r\n });\r\n\r\n if (selectedCandidates.length == 1) {\r\n if (Object.keys(allTags) == null || Object.keys(allTags).length <= 0) {\r\n setSelectedTags([]);\r\n } else {\r\n Object.values(allTags).forEach((tag, i) => {\r\n if (tag.count == selectedCandidates.length) {\r\n const tagActual = tagChoices.find((tagChoice) => {\r\n return tagChoice.Tag == tag.Tag;\r\n });\r\n if (tagActual) {\r\n newSelectedTags.push(tagActual);\r\n }\r\n }\r\n });\r\n }\r\n }\r\n setSelectedTags(newSelectedTags);\r\n setOldTags(newSelectedTags);\r\n };\r\n\r\n const getTags = () => {\r\n setIsLoading(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n fetchDataAgnostic(\r\n 'department/tags',\r\n { pk_Department: dContext.department.pk_Department },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n setTagChoices(res.data);\r\n setParentTags(res.data);\r\n setIsLoading(false);\r\n })\r\n .catch((err) => {});\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const onClickTag = (clickedTag, isInSelectedTags) => {\r\n const newSelectedTags = clone(selectedTags);\r\n\r\n if (isInSelectedTags) {\r\n newSelectedTags.splice(\r\n newSelectedTags.findIndex((tag) => {\r\n return tag.Tag === clickedTag.Tag;\r\n }),\r\n 1,\r\n );\r\n } else {\r\n newSelectedTags.push(clickedTag);\r\n }\r\n setSelectedTags(newSelectedTags);\r\n };\r\n\r\n const addNewTag = (newTag) => {\r\n setIsAddingTab(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n postDataAgnostic(\r\n 'department/tag',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n },\r\n {\r\n Tag: newTag,\r\n pk_TagType: 3,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n getTags();\r\n setIsAddingTab(false);\r\n return;\r\n })\r\n .catch((err) => {\r\n setIsAddingTab(false);\r\n return;\r\n });\r\n })\r\n .catch((err) => {\r\n setIsAddingTab(false);\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n return;\r\n });\r\n };\r\n\r\n const addTagsToCandidates = (tagList, candidateList, promiseDetails) => {\r\n getTokenSilently()\r\n .then((token) => {\r\n postDataAgnostic(\r\n 'department/candidate/tags',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n },\r\n {\r\n tagPks: tagList,\r\n candidatePks: candidateList,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n if (promiseDetails) {\r\n const { resolve } = promiseDetails;\r\n resolve('true');\r\n } else {\r\n getCandidates();\r\n if (getAllCandidatesData) {\r\n getAllCandidatesData();\r\n }\r\n }\r\n })\r\n .catch((err) => {\r\n if (promiseDetails) {\r\n const { reject } = promiseDetails;\r\n reject();\r\n }\r\n });\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const deleteTagsFromCandidates = (tagList, candidateList, promiseDetails) => {\r\n getTokenSilently()\r\n .then((token) => {\r\n deleteData(\r\n 'department/candidate/tags',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n },\r\n {\r\n tagPks: tagList,\r\n candidatePks: candidateList,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n if (promiseDetails) {\r\n const { resolve } = promiseDetails;\r\n resolve('true');\r\n } else {\r\n getCandidates();\r\n if (getAllCandidatesData) {\r\n getAllCandidatesData();\r\n }\r\n }\r\n })\r\n .catch((err) => {\r\n if (promiseDetails) {\r\n const { reject } = promiseDetails;\r\n reject();\r\n }\r\n });\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const assignTagToCandidates = () => {\r\n const tagsToDelete = [];\r\n const tagsToAdd = [];\r\n\r\n selectedTags.forEach((tag) => {\r\n const tagExists = oldTags.find((cTag) => {\r\n return cTag.Tag === tag.Tag;\r\n });\r\n\r\n if (!tagExists) {\r\n const tagActual = tagChoices.find((tagChoice) => {\r\n return tagChoice.Tag === tag.Tag;\r\n });\r\n if (tagActual) {\r\n tagsToAdd.push(tagActual.pk_Tag);\r\n }\r\n }\r\n });\r\n\r\n oldTags.forEach((tag) => {\r\n const tagExists = selectedTags.find((sTag) => {\r\n return sTag.Tag === tag.Tag;\r\n });\r\n if (!tagExists) {\r\n const tagActual = tagChoices.find((tagChoice) => {\r\n return tagChoice.Tag === tag.Tag;\r\n });\r\n if (tagActual) {\r\n tagsToDelete.push(tagActual.pk_Tag);\r\n }\r\n }\r\n });\r\n\r\n const candidateList = [];\r\n selectedCandidates.forEach((candidate) => {\r\n candidateList.push(candidate.pk_Candidate);\r\n });\r\n // assignTagToCandidates(tagsToAdd, tagsToDelete, candidatePKs);\r\n const addToCandidates = new Promise((resolve, reject) => {\r\n addTagsToCandidates(tagsToAdd, candidateList, { resolve, reject });\r\n });\r\n\r\n const deleteFromCandidates = new Promise((resolve, reject) => {\r\n deleteTagsFromCandidates(tagsToDelete, candidateList, { resolve, reject });\r\n });\r\n\r\n Promise.all([addToCandidates, deleteFromCandidates])\r\n .then((res) => {\r\n alert.success('Tags Updated!');\r\n if (selectedCandidates.length == 1) {\r\n getCandidates(null, { forcedSelectedCandidateId: selectedCandidates[0].pk_Candidate });\r\n } else {\r\n getCandidates();\r\n }\r\n if (getAllCandidatesData) {\r\n getAllCandidatesData();\r\n }\r\n\r\n if (setShowPopover) {\r\n setShowPopover();\r\n }\r\n })\r\n .catch((err) => {\r\n console.log('err: ', err);\r\n alert.error('Error Updating Tags!');\r\n });\r\n };\r\n\r\n const renderTagsConfirm = () => {\r\n return (\r\n \r\n {\r\n Swal.fire({\r\n title: 'Enter name of new tag!',\r\n input: 'text',\r\n inputAttributes: {\r\n autocapitalize: 'off',\r\n },\r\n showCancelButton: true,\r\n confirmButtonText: 'Add Tag',\r\n confirmButtonColor: 'green',\r\n showLoaderOnConfirm: true,\r\n preConfirm: (newTagName) => {\r\n return new Promise((resolve, reject) => {\r\n getTokenSilently()\r\n .then((token) => {\r\n postDataAgnostic(\r\n 'department/tag',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n },\r\n {\r\n Tag: newTagName,\r\n pk_TagType: 3,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n getTags();\r\n setIsAddingTab(false);\r\n resolve();\r\n })\r\n .catch((err) => {\r\n setIsAddingTab(false);\r\n reject();\r\n });\r\n })\r\n .catch((err) => {\r\n setIsAddingTab(false);\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n reject();\r\n });\r\n });\r\n },\r\n allowOutsideClick: () => !isAddingTab,\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n Swal.fire('Added Tag!', 'success');\r\n }\r\n });\r\n }}\r\n >\r\n New Tag\r\n \r\n {selectedCandidates && selectedCandidates.length == 1 ? (\r\n {\r\n if (selectedCandidates.length > 1) {\r\n setShowTagConfirmModal(true);\r\n return;\r\n }\r\n assignTagToCandidates();\r\n }}\r\n color=\"success\"\r\n >\r\n Save\r\n \r\n ) : null}\r\n {selectedCandidates && selectedCandidates.length > 1 ? (\r\n {\r\n if (selectedCandidates.length > 1) {\r\n setShowTagConfirmModal(true);\r\n return;\r\n }\r\n\r\n const tagList = [];\r\n const candidateList = [];\r\n\r\n selectedTags.forEach((tag) => {\r\n tagList.push(tag.pk_Tag);\r\n });\r\n selectedCandidates.forEach((c) => {\r\n candidateList.push(c.pk_Candidate);\r\n });\r\n\r\n addTagsToCandidates(tagList, candidateList);\r\n }}\r\n color=\"success\"\r\n >\r\n Add Tags\r\n \r\n ) : null}\r\n {selectedCandidates && selectedCandidates.length > 1 ? (\r\n {\r\n if (selectedCandidates.length > 1) {\r\n setTagAction('delete');\r\n setShowTagConfirmModal(true);\r\n return;\r\n }\r\n }}\r\n color=\"danger\"\r\n >\r\n Remove Tags\r\n \r\n ) : null}\r\n {\r\n setSelectedTags(clone(oldTags));\r\n }}\r\n >\r\n {selectedCandidates.length > 1 ? 'Clear Tag Selection' : 'Reset'}\r\n \r\n {renderTagsConfirm()}\r\n
\r\n );\r\n};\r\n\r\nexport default TagPopover;\r\n","const style = {\r\n markFilter: {\r\n width: 250,\r\n alignSelf: 'center',\r\n textAlign: 'center',\r\n },\r\n markFilterContainer: {\r\n display: 'flex',\r\n justifyContent: 'flex-start',\r\n marginBottom: 20,\r\n },\r\n tableHeaderCaret: { marginLeft: 10, cursor: 'pointer' },\r\n cellStyle: (row) => {\r\n const styleActual = { alignItems: 'center', justifyContent: 'center', verticalAlign: 'middle' };\r\n\r\n if (row.isSelected) {\r\n styleActual.backgroundColor = '#caecfa';\r\n }\r\n return styleActual;\r\n },\r\n clickable: {\r\n cursor: 'pointer',\r\n },\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n verticalAlign: 'middle',\r\n },\r\n spacedBetweenRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n verticalAlign: 'middle',\r\n },\r\n buttonLabel: {\r\n width: '100%',\r\n fontWeight: 'bold',\r\n fontSize: 13,\r\n marginLeft: 10,\r\n },\r\n actionButton: {\r\n marginLeft: 10,\r\n width: 200,\r\n },\r\n listItem: {\r\n alignItems: 'center',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n textAlign: 'center',\r\n justifyContent: 'space-between',\r\n padding: 5,\r\n cursor: 'pointer',\r\n },\r\n evaluatorList: {\r\n marginBottom: 10,\r\n marginTop: 10,\r\n maxHeight: 250,\r\n overflowY: 'scroll',\r\n },\r\n evaluatorListButton: {\r\n marginBottom: 5,\r\n width: '100%',\r\n },\r\n};\r\n\r\nexport default style;\r\n","import { faCheckSquare, faSearch, faSquare, faTimes } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport React, { useContext, useState, useEffect } from 'react';\r\nimport { Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';\r\nimport { useAuth0 } from '../../../../../../auth0/reactAuth0Spa';\r\nimport { formatBearerToken } from '../../../../../../Common.functions';\r\nimport { DepartmentContext } from '../../../../../../DepartmentWrapper';\r\nimport { deleteData, fetchDataAgnostic, postDataAgnostic } from '../../../../../../Services/dataApi';\r\nimport style from './style';\r\nimport { useAlert } from 'react-alert';\r\nimport { clone } from 'lodash';\r\n\r\nconst PreScreenPopover = ({\r\n // evaluators,\r\n token,\r\n selectedCandidates,\r\n setShowPreScreen,\r\n getEvaluators,\r\n getCandidates,\r\n getAllCandidatesData,\r\n setIsUpdating,\r\n}) => {\r\n const [evaluators, setEvaluators] = useState([]);\r\n const [evaluatorsWithNoCandidates, setEvaluatorsWithNoCandidates] = useState();\r\n const [evaluatorsWithCandidates, setEvaluatorCandidates] = useState();\r\n\r\n const [selectedEvaluators, setSelectedEvaluators] = useState([]);\r\n const [searchString, setSearchString] = useState('');\r\n const [isFetching, setIsFetching] = useState(false);\r\n\r\n const dContext = useContext(DepartmentContext);\r\n\r\n const alert = useAlert();\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n\r\n useEffect(() => {\r\n fetchEvaluators();\r\n getEvaluatorsWithCandidates();\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (evaluatorsWithNoCandidates && evaluatorsWithCandidates) {\r\n evaluatorsWithCandidates.forEach((evaluator) => {\r\n const counterpart = evaluatorsWithNoCandidates.findIndex((enc) => {\r\n return enc.pk_User === evaluator.pk_User;\r\n });\r\n if (counterpart >= 0) {\r\n // evaluatorsWithNoCandidates[counterpart] = evaluator;\r\n const oldEvaluator = evaluatorsWithNoCandidates[counterpart];\r\n const newEvaluator = { ...oldEvaluator, assignedCandidates: evaluator.assignedCandidates };\r\n evaluatorsWithNoCandidates[counterpart] = newEvaluator;\r\n }\r\n });\r\n\r\n setEvaluators(evaluatorsWithNoCandidates);\r\n }\r\n }, [evaluatorsWithNoCandidates, evaluatorsWithCandidates]);\r\n\r\n const getEvaluatorsWithCandidates = () => {\r\n getTokenSilently()\r\n .then((token) => {\r\n fetchDataAgnostic(\r\n 'department/season/users/prescreen/all',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n pk_Season: dContext.season.pk_Season,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n setEvaluatorCandidates(Object.values(res.data) || []);\r\n })\r\n .catch((err) => {});\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const fetchEvaluators = () => {\r\n setIsFetching(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n fetchDataAgnostic(\r\n 'department/users',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n IncludeEvaluators: 1,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n const newPrescreeners = Object.values(res.data).sort((a, b) => {\r\n const stringA = `${a.UserLast || ''}, ${a.UserFirst || ''}`.toLowerCase();\r\n const stringB = `${b.UserLast || ''}, ${b.UserFirst || ''}`.toLowerCase();\r\n\r\n if (stringA < stringB) {\r\n return -1;\r\n }\r\n if (stringA > stringB) {\r\n return 1;\r\n }\r\n return 0;\r\n });\r\n\r\n setEvaluatorsWithNoCandidates(newPrescreeners || []);\r\n setIsFetching(false);\r\n })\r\n .catch((e) => {\r\n setIsFetching(false);\r\n });\r\n })\r\n .catch((err) => {\r\n setIsFetching(false);\r\n });\r\n };\r\n\r\n const assignEvaluators = () => {\r\n const evaluator_pks = selectedEvaluators.map((item) => {\r\n return item.pk_User;\r\n });\r\n setIsUpdating(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n postDataAgnostic(\r\n 'department/season/users/prescreen',\r\n { pk_Department: dContext.department.pk_Department, pk_Season: dContext.season.pk_Season },\r\n { candidatePks: selectedCandidates, evaluatorPks: evaluator_pks || [] },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n fetchEvaluators();\r\n setShowPreScreen(false);\r\n getCandidates();\r\n getAllCandidatesData(() => {\r\n setIsUpdating(false);\r\n });\r\n alert.success('Added Screener successfully');\r\n })\r\n .catch((err) => {\r\n alert.error('Error adding Screener');\r\n });\r\n })\r\n .catch((err) => {\r\n alert.error('Error adding Screener');\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const removeAssignment = () => {\r\n const evaluator_pks = selectedEvaluators.map((item) => {\r\n return item.pk_User;\r\n });\r\n setIsUpdating(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n deleteData(\r\n 'department/season/users/prescreen',\r\n { pk_Department: dContext.department.pk_Department, pk_Season: dContext.season.pk_Season },\r\n { candidatePks: selectedCandidates, evaluatorPks: evaluator_pks || [] },\r\n\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n fetchEvaluators();\r\n setShowPreScreen(false);\r\n getCandidates();\r\n getAllCandidatesData(() => {\r\n setIsUpdating(false);\r\n });\r\n alert.success('Removed Screener successfully');\r\n })\r\n .catch((err) => {\r\n alert.error('Error removing screener');\r\n });\r\n })\r\n .catch((err) => {\r\n alert.error('Error removing screener');\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const filteredEvaluators = evaluators\r\n .filter((evaluator) => {\r\n const name = `${evaluator.UserLast}, ${evaluator.UserFirst}`;\r\n\r\n return name.toLowerCase().indexOf(searchString.toLowerCase()) >= 0;\r\n })\r\n .filter((u) => {\r\n const { Deleted, EnableEvaluator } = u;\r\n return !Deleted && EnableEvaluator;\r\n });\r\n\r\n return (\r\n \r\n \r\n \r\n {\r\n setSearchString('');\r\n }}\r\n >\r\n \r\n {\r\n setSearchString(e.target.value);\r\n }}\r\n />\r\n \r\n {\r\n if (!hasSearchValues) {\r\n addNewTag(searchString);\r\n }\r\n }}\r\n >\r\n \r\n \r\n
\r\n \r\n {filteredTagChoices && filteredTagChoices.length > 0 ? (\r\n filteredTagChoices.map((tag, i) => {\r\n return (\r\n
\r\n No Tags
\r\n ) : (\r\n Loading. . .
\r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n {\r\n setSearchString('');\r\n }}\r\n >\r\n \r\n {\r\n setSearchString(e.target.value);\r\n }}\r\n />\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {isFetching ? (\r\n {\r\n const newSelectedEvaluators = selectedEvaluators.slice();\r\n if (isSelected) {\r\n newSelectedEvaluators.splice(\r\n newSelectedEvaluators.findIndex((item) => {\r\n return item.pk_User == evaluator.pk_User;\r\n }),\r\n 1,\r\n );\r\n } else {\r\n newSelectedEvaluators.push(evaluator);\r\n }\r\n setSelectedEvaluators(newSelectedEvaluators);\r\n }}\r\n >\r\n
\r\n );\r\n })\r\n )}\r\n Loading . . .
\r\n ) : (\r\n filteredEvaluators.map((evaluator, i) => {\r\n const { Deleted, EnableEvaluator } = evaluator;\r\n const isSelected = selectedEvaluators.find((item) => {\r\n return item.pk_User == evaluator.pk_User;\r\n });\r\n const backgroundColor = isSelected ? '#caecfa' : i % 2 == 0 ? '#dee2e6' : null;\r\n return (\r\n \r\n
\r\n {`${evaluator.UserLast}, ${evaluator.UserFirst} (${\r\n evaluator.assignedCandidates ? evaluator.assignedCandidates.length : 0\r\n })`}
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default PreScreenPopover;\r\n","const style = {\r\n markFilter: {\r\n width: 120,\r\n alignSelf: 'center',\r\n textAlign: 'center',\r\n },\r\n dateListItem: { width: '100%', textAlign: 'center', cursor: 'pointer', padding: 10, height: 60 },\r\n tableHeaderCaret: { marginLeft: 10, cursor: 'pointer' },\r\n cellStyle: (row) => {\r\n const { rowIndex } = row;\r\n const styleActual = {\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n verticalAlign: 'middle',\r\n paddingTop: 2,\r\n paddingBottom: 2,\r\n height: 60,\r\n overflowY: 'auto',\r\n };\r\n\r\n if (row.isSelected) {\r\n styleActual.backgroundColor = '#caecfa';\r\n } else {\r\n styleActual.backgroundColor = rowIndex % 2 == 0 ? '#ffffff' : '#f2f2f2';\r\n }\r\n return styleActual;\r\n },\r\n clickable: {\r\n cursor: 'pointer',\r\n },\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n verticalAlign: 'middle',\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '100%',\r\n },\r\n spacedBetweenRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n verticalAlign: 'middle',\r\n },\r\n buttonLabel: {\r\n width: '100%',\r\n fontWeight: 'bold',\r\n fontSize: 13,\r\n marginLeft: 10,\r\n },\r\n actionButton: {\r\n marginLeft: 10,\r\n minWidth: 180,\r\n marginTop: 5,\r\n width: 250,\r\n },\r\n listItem: {\r\n alignItems: 'center',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n textAlign: 'center',\r\n justifyContent: 'space-between',\r\n padding: 5,\r\n cursor: 'pointer',\r\n },\r\n evaluatorList: {\r\n marginBottom: 10,\r\n marginTop: 10,\r\n maxHeight: 250,\r\n overflowY: 'scroll',\r\n },\r\n evaluatorListButton: {\r\n marginBottom: 5,\r\n width: '100%',\r\n },\r\n centeredText: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n textAlign: 'center',\r\n justifyContent: 'center',\r\n },\r\n genButton: {\r\n alignItems: 'center',\r\n backgroundColor: '#0a91ff',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n marginLeft: 10,\r\n marginRight: 10,\r\n paddignRight: 20,\r\n paddingBottom: 10,\r\n paddingTop: 10,\r\n minWidth: 100,\r\n },\r\n};\r\n\r\nexport default style;\r\n","import { DepartmentContext } from 'DepartmentWrapper';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport { Button, Input } from 'reactstrap';\r\n\r\nconst SelectByFieldPopover = (props) => {\r\n const { selectByStringProperty } = props;\r\n const [stringSelectProperty, setStringSelectProperty] = useState('AAMCID');\r\n const [selectByString, setSelectBystring] = useState('');\r\n\r\n const dContext = useContext(DepartmentContext);\r\n\r\n const fieldsToSelect = [\r\n {\r\n label: 'AAMC ID',\r\n value: 'AAMCID',\r\n },\r\n { label: 'SF Match ID', value: 'SFMatchID', deptSettingsKey: 'sf_match' },\r\n { label: 'NRMP ID', value: 'NRMPID' },\r\n { label: 'Medical School', value: 'MedicalSchoolOfGraduation' },\r\n { label: 'Email', value: 'Email' },\r\n ];\r\n\r\n useEffect(() => {\r\n if (dContext && dContext.department && dContext.department.ApplicationSystem === 'sf_match') {\r\n setStringSelectProperty('SFMatchID');\r\n }\r\n return () => {\r\n setStringSelectProperty('AAMCID');\r\n setSelectBystring('');\r\n };\r\n }, [dContext]);\r\n\r\n return (\r\n \r\n {\r\n assignEvaluators();\r\n setShowPreScreen(false);\r\n }}\r\n >\r\n Set Assignment\r\n \r\n
\r\n \r\n {\r\n removeAssignment();\r\n setShowPreScreen(false);\r\n }}\r\n >\r\n Remove Assignment\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SelectByFieldPopover;\r\n","import {\r\n faArrowDown19,\r\n faArrowDown91,\r\n faArrowDownAZ,\r\n faArrowDownZA,\r\n faArrowUp19,\r\n faArrowUp91,\r\n faArrowUpAZ,\r\n faArrowUpZA,\r\n faCalendarAlt,\r\n faCaretDown,\r\n faCaretUp,\r\n faCheck,\r\n faCheckSquare,\r\n faCircleCheck,\r\n faClipboard,\r\n faDownload,\r\n faExclamationTriangle,\r\n faEye,\r\n faFilter,\r\n faMarker,\r\n faMinus,\r\n faSpinner,\r\n faSquare,\r\n faTag,\r\n faTags,\r\n faThumbsUp,\r\n faThumbsDown,\r\n faTimes,\r\n faTimesCircle,\r\n faTrashAlt,\r\n faUsers,\r\n} from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { applyCSVProtection, formatBearerToken, processData } from '../../../../../Common.functions';\r\nimport { useAuth0 } from '../../../../../auth0/reactAuth0Spa';\r\nimport { fetchDataAgnostic, postDataAgnostic, putData } from '../../../../../Services/dataApi';\r\n\r\nimport moment from 'moment';\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport BootstrapTable from 'react-bootstrap-table-next';\r\nimport { CSVLink } from 'react-csv';\r\nimport {\r\n Badge,\r\n Button,\r\n Col,\r\n FormGroup,\r\n Input,\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n Label,\r\n Modal,\r\n Popover,\r\n PopoverBody,\r\n PopoverHeader,\r\n Row,\r\n UncontrolledPopover,\r\n UncontrolledTooltip,\r\n} from 'reactstrap';\r\nimport { clone } from '../../../../../Services/schedule';\r\nimport ConfirmModal from '../../../Coordinator/Schedule/ConfirmModal';\r\nimport TagPopover from '../TagPopover';\r\nimport PreScreenPopover from './PreScreenPopover';\r\nimport style from './style';\r\nimport './candidateListWithFilters.style.css';\r\nimport { useAlert } from 'react-alert';\r\nimport Swal from 'sweetalert2';\r\nimport Loading from 'Body/Statuses/Loading';\r\nimport { CandidateStatusIcons, popoverModifiers } from 'enums';\r\nimport SelectByFieldPopover from './SelectByFieldPopover/SelectByFieldPopover';\r\n\r\nlet typeTimeout = null;\r\n\r\nlet selectedIndexes = [];\r\nlet selectedCandidates = [];\r\nlet downloadSelectedOnly = false; // For CSV Exports.\r\n\r\nconst CandidateListWithFilters = ({\r\n dataTypes = [],\r\n candidates = {},\r\n getCandidates,\r\n getAllCandidatesData,\r\n saveResults,\r\n deleteCandidatesPermanently,\r\n evaluators = [],\r\n token,\r\n activeSeason,\r\n dContext,\r\n isInitializedCandidates,\r\n isGettingAllDetailedCandidates,\r\n allCandidatesDetails,\r\n interviewDates = [],\r\n allCandidatesDetailsError,\r\n}) => {\r\n const [toggleSwitch, setToggleSwitch] = useState(false);\r\n const [filteredCandidates, setFilteredCandidates] = useState([]);\r\n const [deletedCandidates, setDeletedCandidates] = useState([]);\r\n const [csvData, setCSVData] = useState([]);\r\n\r\n const [filter, setFilter] = useState(6);\r\n const [statusFilter, setStatusFilter] = useState({ label: 'All', value: 6 });\r\n const [tagFilter, setTagFilter] = useState();\r\n const [groupsFilter, setGroupsFilter] = useState();\r\n\r\n const [tagChoices, setTagChoices] = useState([]);\r\n const [groupChoices, setGroupChoices] = useState([]);\r\n\r\n const [userDetails, setUserDetails] = useState();\r\n\r\n const [lastSelectedIndex, setLastSelectedIndex] = useState();\r\n const [lastSortedField, setLastSortedField] = useState();\r\n const [lastSortedOrder, setLastSortedOrder] = useState();\r\n const [previousFilter, setPreviousFilter] = useState(null);\r\n\r\n const [selectAll, setSelectAll] = useState(false);\r\n\r\n const [shiftKeyDown, setShiftKeyDown] = useState(false);\r\n\r\n const [showMarkModal, setShowMarkModal] = useState(false);\r\n const [showMarkFilter, setShowMarkFilter] = useState(false);\r\n const [showConfirmDelete, setShowConfirmDelete] = useState(false);\r\n const [showScheduledNotif, setShowScheduledNotif] = useState(false);\r\n const [showPreScreen, setShowPreScreen] = useState(false);\r\n const [showTagsPopover, setShowTagsPopover] = useState(false);\r\n const [showSelectPopover, setShowSelectPopover] = useState(false);\r\n const [showConfirmRemove, setShowConfirmRemove] = useState(false);\r\n const [showTagFilter, setShowTagFilter] = useState(false);\r\n const [showGroupFilter, setShowGroupFilter] = useState(false);\r\n const [showDeletedOnly, setShowDeletedOnly] = useState(false);\r\n\r\n const [showInterviewDatePopover, setShowInterviewDatePopover] = useState();\r\n const [datesFromSelectedCandidates, setDatesFromselectedCandidates] = useState([]);\r\n\r\n const [stringSelectProperty, setStringSelectProperty] = useState('AAMCID');\r\n const [selectByString, setSelectBystring] = useState('');\r\n const [sortStatus, setSortStatus] = useState({ LastName: 'asc' }); // Object containing dataFields and if asc/desc\r\n const [sortBy, setSortBy] = useState('LastName');\r\n const [isTyping, setIsTyping] = useState();\r\n const [isUpdating, setIsUpdating] = useState(false);\r\n const [showCSVDownloadConfirmModal, setShowCSVDownloadConfirmModal] = useState(false);\r\n\r\n const [toggleRefresh, setToggleRefresh] = useState(false);\r\n\r\n const defaultSortDescending = ['PrescreenScoreAsDecimal', 'FinalScoreAsDecimal'];\r\n\r\n // Refs below are used because state values don't match up with real time keyboard presses.\r\n const shiftRef = useRef();\r\n const lastSelectedRef = useRef();\r\n const filteredCandidatesRef = useRef();\r\n const tableHeadersRef = useRef(); // used for downloading csv\r\n const isUpdatingRef = useRef();\r\n\r\n const oldSelectedCandidatesRef = useRef([]); // Selected candidates before holding shift. Store them here so we can revert back to them when clicking around holding shift.\r\n const shiftSelectCandidatesRef = useRef([]); // candidates selected while holding shift. Store them here while clicking around holding shift. Combine with oldSelectedCandidates after clicking checkbox with no shift.\r\n\r\n const alert = useAlert();\r\n const filterOptions = [\r\n 'Deleted',\r\n 'Deleted',\r\n 'Imported',\r\n 'Prescreen',\r\n 'Invite',\r\n 'Rejected (Do not recruit)',\r\n 'All',\r\n 'Registered',\r\n 'Candidate Declined',\r\n ];\r\n\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n\r\n const statusStyle = { marginRight: 5, cursor: 'pointer' };\r\n\r\n const {\r\n confirmed,\r\n invited,\r\n markedForInvite,\r\n pendingInvite,\r\n prescreen,\r\n rejected,\r\n scheduled,\r\n unconfirmed,\r\n waitlisted,\r\n deleted,\r\n declined,\r\n } = CandidateStatusIcons;\r\n\r\n const orderedFilterOptions = [\r\n { label: 'All', value: 6 },\r\n {\r\n label: 'Waitlisted',\r\n value: 11,\r\n icon: (\r\n \r\n {\r\n setStringSelectProperty(e.target.value);\r\n }}\r\n >\r\n {fieldsToSelect.map((o) => {\r\n return ;\r\n })}\r\n \r\n
\r\n\r\n \r\n {\r\n const newValue = e.target.value;\r\n setSelectBystring(newValue);\r\n }}\r\n />\r\n
\r\n\r\n \r\n {\r\n selectByStringProperty();\r\n }}\r\n >\r\n {' '}\r\n Select Items!\r\n \r\n
\r\n \r\n {Tags.map((tag) => {\r\n if (tag.pk_Tag != null) {\r\n return (\r\n
\r\n );\r\n };\r\n\r\n const renderStatusBar = (candidate) => {\r\n const statuses = [];\r\n const {\r\n pk_Candidate,\r\n EnableMarkedForInvitation,\r\n EnableMarkedForPrescreen,\r\n HasBeenSentInvitation,\r\n IsWaitlisted,\r\n IsScheduled,\r\n HasBeenSentConfirmation,\r\n HasBeenRejectedForInterview,\r\n DateOfInterview,\r\n } = candidate;\r\n\r\n if (EnableMarkedForInvitation) {\r\n statuses.push(\r\n <>\r\n \r\n
\r\n );\r\n } else {\r\n }\r\n })}\r\n \r\n
\r\n Tag Filter
\r\n \r\n {\r\n setShowTagFilter(false);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n {tags.map((tag, i) => {\r\n const backgroundColor = i % 2 == 0 ? 'white' : '#f2f2f2';\r\n\r\n return (\r\n {\r\n setTagFilter(tag);\r\n setShowTagFilter(false);\r\n }}\r\n >\r\n {tag.Tag}\r\n
\r\n );\r\n })}\r\n \r\n
\r\n Group Filter
\r\n \r\n {\r\n setShowGroupFilter(false);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n {groups.map((group, i) => {\r\n const backgroundColor = i % 2 == 0 ? 'white' : '#f2f2f2';\r\n\r\n return (\r\n {\r\n setGroupsFilter(group);\r\n setShowTagFilter(false);\r\n }}\r\n >\r\n {group.Name}\r\n
\r\n );\r\n })}\r\n \r\n {\r\n const isUpdatingActual = isUpdatingRef.current;\r\n // console.log('isUpdatingActual: ', isUpdatingActual);\r\n // console.log('isUpdating: ', isUpdating);\r\n if (isUpdatingActual) {\r\n return;\r\n }\r\n handleCheckBoxClick(row);\r\n }}\r\n />\r\n
\r\n );\r\n },\r\n },\r\n ];\r\n\r\n columns.push({\r\n dataField: 'LastName',\r\n headerStyle: {\r\n maxWidth: 200,\r\n minWidth: 200,\r\n position: 'sticky',\r\n left: 40,\r\n zIndex: 3,\r\n textAlign: 'center',\r\n cursor: 'pointer',\r\n position: 'sticky',\r\n verticalAlign: 'middle',\r\n fontStyle: 'bold',\r\n backgroundColor: 'white',\r\n },\r\n sort: true,\r\n sortOrder: sortStatus['LastName'],\r\n onSort: onTableSort,\r\n sortFunc: () => {\r\n return 0;\r\n },\r\n style: (cell, row, rowIndex) => {\r\n return {\r\n ...style.cellStyle({ ...row, rowIndex }),\r\n position: 'sticky',\r\n left: 40,\r\n maxWidth: 200,\r\n minWidth: 200,\r\n zIndex: 1,\r\n };\r\n },\r\n formatter: (cell, row, rowIndex, formatExtraData) => {\r\n return cell;\r\n },\r\n sortCaret: (order, column) => {\r\n const { dataField } = column;\r\n\r\n if (sortStatus[dataField] === 'desc') {\r\n return (\r\n <>\r\n \r\n
\r\n );\r\n },\r\n });\r\n }\r\n\r\n columns.push({\r\n dataField: 'xx',\r\n headerStyle: {\r\n minWidth: 200,\r\n textAlign: 'center',\r\n width: 'auto',\r\n cursor: 'pointer',\r\n position: 'sticky',\r\n verticalAlign: 'middle',\r\n },\r\n // sort: true,\r\n style: (cell, row, rowIndex) => {\r\n return style.cellStyle({ ...row, rowIndex });\r\n },\r\n headerFormatter: (column, colIndex) => {\r\n return (\r\n \r\n {renderTagFilter()}\r\n \r\n );\r\n },\r\n formatter: (cell, row, rowIndex, formatExtraData) => {\r\n return (\r\n \r\n
\r\n {renderGroupFilter()}\r\n Groups
\r\n \r\n
\r\n {groupsFilter ? groupsFilter.Name : 'All'}
\r\n {renderStatusBar(row)}
\r\n );\r\n },\r\n text: 'Status',\r\n });\r\n\r\n columns.push({\r\n dataField: 'createdAt',\r\n headerStyle: {\r\n minWidth: 200,\r\n textAlign: 'center',\r\n width: 'auto',\r\n cursor: 'pointer',\r\n position: 'sticky',\r\n verticalAlign: 'middle',\r\n },\r\n sort: true,\r\n sortFunc: () => {\r\n return 0;\r\n },\r\n onSort: onTableSort,\r\n style: (cell, row, rowIndex) => {\r\n return style.cellStyle({ ...row, rowIndex });\r\n },\r\n text: 'Created',\r\n formatter: (cell, row, rowIndex, formatExtraData) => {\r\n return (\r\n \r\n {row.createdAt ? moment(row.createdAt).format('MMM DD, YYYY hh:mm A') : ''}\r\n
\r\n );\r\n },\r\n sortCaret: (order, column) => {\r\n const { dataField } = column;\r\n\r\n if (sortStatus[dataField] === 'asc') {\r\n return (\r\n <>\r\n \r\n \r\n This field is a Custom Field!\r\n \r\n
\r\n ) : null}\r\n \r\n );\r\n } else if (sortStatus[dataField] === 'asc') {\r\n return (\r\n <>\r\n \r\n \r\n This field is a Custom Field!\r\n \r\n
\r\n ) : null}\r\n \r\n );\r\n } else {\r\n return (\r\n <>\r\n \r\n \r\n This field is a Custom Field!\r\n \r\n
\r\n ) : null}\r\n \r\n );\r\n }\r\n },\r\n rawHeader: dataType,\r\n text: dataType.Alias || dataType.Name,\r\n headerEvents: {\r\n onClick: (e, column, columnIndex, row, rowIndex) => {\r\n sortCSVData(column.dataField, columnIndex - 1);\r\n },\r\n },\r\n headerAttrs: { id: dataType.Name },\r\n });\r\n });\r\n\r\n // Sort Columns by SortOrder\r\n columns.sort((a, b) => {\r\n return a.SortOrder - b.SortOrder;\r\n });\r\n\r\n // if (filter == 3) {\r\n\r\n if (AllowPrescreen) {\r\n columns.splice(3, 0, {\r\n dataField: 'Pre-screener',\r\n headerStyle: {\r\n minWidth: 200,\r\n textAlign: 'center',\r\n width: 'auto',\r\n cursor: 'pointer',\r\n position: 'sticky',\r\n verticalAlign: 'middle',\r\n },\r\n sort: true,\r\n onSort: onTableSort,\r\n style: (cell, row, rowIndex) => {\r\n return style.cellStyle({ ...row, rowIndex });\r\n },\r\n text: 'Prescreen Evaluators',\r\n formatter: (cell, row, rowIndex, formatExtraData) => {\r\n const sortedEvaluators = row.PrescreenAssignedEvaluators.slice().sort((a, b) => {\r\n const textA = `${a.UserLast ? a.UserLast : ''}, ${a.UserFirst ? a.UserFirst : ''}`;\r\n const textB = `${b.UserLast ? b.UserLast : ''}, ${b.UserFirst ? b.UserFirst : ''}`;\r\n return textA < textB ? -1 : textA > textB ? 1 : 0;\r\n });\r\n return (\r\n \r\n {sortedEvaluators.map((evaluator) => {\r\n return
\r\n \r\n );\r\n },\r\n sortCaret: (order, column) => {\r\n const { dataField } = column;\r\n\r\n if (sortStatus[dataField] === 'asc') {\r\n return (\r\n <>\r\n {`${evaluator.UserLast}, ${evaluator.UserFirst}`}
;\r\n })}\r\n \r\n {row.PrescreenAssignedEvaluators != null ? row.PrescreenAssignedEvaluators.length : '-'}\r\n
\r\n );\r\n },\r\n sortCaret: (order, column) => {\r\n const { dataField } = column;\r\n\r\n if (sortStatus[dataField] === 'asc') {\r\n return (\r\n <>\r\n \r\n
\r\n );\r\n },\r\n sortCaret: (order, column) => {\r\n const { dataField } = column;\r\n\r\n if (sortStatus[dataField] === 'asc') {\r\n return (\r\n <>\r\n {cell ? moment(cell).format('MMMM DD, YYYY') : ''}
\r\n {row.Label ? `(${row.Label})` : ''}
\r\n {cell != null ? (parseFloat(cell) * 100).toFixed(2) : '-'}
;\r\n },\r\n sortCaret: (order, column) => {\r\n const { dataField } = column;\r\n\r\n if (sortStatus[dataField] === 'asc') {\r\n return (\r\n <>\r\n {cell != null ? (parseFloat(cell) * 100).toFixed(2) : '-'}
;\r\n },\r\n sortCaret: (order, column) => {\r\n const { dataField } = column;\r\n\r\n if (sortStatus[dataField] === 'asc') {\r\n return (\r\n <>\r\n \r\n
\r\n Mark Selected as:
\r\n \r\n {\r\n setShowMarkModal(false);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n Prescreen:
\r\n \r\n
\r\n \r\n \r\n Mark for Prescreen.\r\n {` `}\r\n {!AllowPrescreen ? 'Cannot modify - Prescreen with RezRATE is Disabled.' : ''}\r\n \r\n \r\n Unmark for Prescreen. {` `}\r\n {!AllowPrescreen ? 'Cannot modify - Prescreen with RezRATE is Disabled.' : ''}\r\n \r\n
\r\n \r\n {\r\n Swal.fire({\r\n title: 'Are you sure?',\r\n text: `You are about to Mark ${\r\n selectedCandidates.length > 1 ? selectedCandidates.length : ''\r\n } selected candidate${selectedCandidates.length > 1 ? 's' : ''} for Prescreen.`,\r\n icon: 'warning',\r\n showCancelButton: true,\r\n confirmButtonColor: '#3085d6',\r\n cancelButtonColor: '#d33',\r\n confirmButtonText: 'Yes',\r\n cancelButtonText: 'No',\r\n })\r\n .then((result) => {\r\n if (result.value) {\r\n markBoolean({ booleanString: 'EnableMarkedForPrescreen', value: true });\r\n }\r\n })\r\n .finally(() => {\r\n setShowMarkModal(false);\r\n });\r\n // markBoolean({ booleanString: 'EnableMarkedForPrescreen', value: true });\r\n // setShowMarkModal(false);\r\n }}\r\n >\r\n
\r\n\r\n \r\n {\r\n Swal.fire({\r\n title: 'Are you sure?',\r\n text: `You are about to Unmark ${\r\n selectedCandidates.length > 1 ? selectedCandidates.length : ''\r\n } selected candidate${selectedCandidates.length > 1 ? 's' : ''} for Prescreen.`,\r\n icon: 'warning',\r\n showCancelButton: true,\r\n confirmButtonColor: '#3085d6',\r\n cancelButtonColor: '#d33',\r\n confirmButtonText: 'Yes',\r\n cancelButtonText: 'No',\r\n })\r\n .then((result) => {\r\n if (result.value) {\r\n markBoolean({ booleanString: 'EnableMarkedForPrescreen', value: false });\r\n }\r\n })\r\n .finally(() => {\r\n setShowMarkModal(false);\r\n });\r\n // markBoolean({ booleanString: 'EnableMarkedForPrescreen', value: false });\r\n // setShowMarkModal(false);\r\n }}\r\n >\r\n
\r\n\r\n \r\n
\r\n Invitation:
\r\n \r\n
\r\n \r\n \r\n Mark for Invitation. {` `}\r\n {!AllowPrescreen ? 'Cannot modify - Prescreen with RezRATE is Disabled.' : ''}\r\n \r\n \r\n Unmark for Invitation. {` `}\r\n {!AllowPrescreen ? 'Cannot modify - Prescreen with RezRATE is Disabled.' : ''}\r\n \r\n
\r\n \r\n {\r\n Swal.fire({\r\n title: 'Are you sure?',\r\n text: `You are about to Mark ${\r\n selectedCandidates.length > 1 ? selectedCandidates.length : ''\r\n } selected candidate${selectedCandidates.length > 1 ? 's' : ''} for Invitation.`,\r\n icon: 'warning',\r\n showCancelButton: true,\r\n confirmButtonColor: '#3085d6',\r\n cancelButtonColor: '#d33',\r\n confirmButtonText: 'Yes',\r\n cancelButtonText: 'No',\r\n }).then((result) => {\r\n if (result.value) {\r\n markBoolean({ booleanString: 'EnableMarkedForInvitation', value: true });\r\n setShowMarkModal(false);\r\n }\r\n });\r\n }}\r\n >\r\n
\r\n \r\n {\r\n Swal.fire({\r\n title: 'Are you sure?',\r\n text: `You are about to Unmark ${\r\n selectedCandidates.length > 1 ? selectedCandidates.length : ''\r\n } selected candidate${selectedCandidates.length > 1 ? 's' : ''} for Invitation.`,\r\n icon: 'warning',\r\n showCancelButton: true,\r\n confirmButtonColor: '#3085d6',\r\n cancelButtonColor: '#d33',\r\n confirmButtonText: 'Yes',\r\n cancelButtonText: 'No',\r\n }).then((result) => {\r\n if (result.value) {\r\n markBoolean({ booleanString: 'EnableMarkedForInvitation', value: false });\r\n setShowMarkModal(false);\r\n }\r\n });\r\n\r\n // markBoolean({ booleanString: 'EnableMarkedForInvitation', value: false });\r\n // setShowMarkModal(false);\r\n }}\r\n >\r\n
\r\n\r\n \r\n
\r\n Rejected:
\r\n \r\n
\r\n \r\n {\r\n Swal.fire({\r\n title: 'Are you sure?',\r\n text: `You are about to Reject ${\r\n selectedCandidates.length > 1 ? selectedCandidates.length : ''\r\n } selected candidate${selectedCandidates.length > 1 ? 's' : ''}.`,\r\n icon: 'warning',\r\n showCancelButton: true,\r\n confirmButtonColor: '#3085d6',\r\n cancelButtonColor: '#d33',\r\n confirmButtonText: 'Yes',\r\n cancelButtonText: 'No',\r\n }).then((result) => {\r\n if (result.value) {\r\n markSelected('Rejected (Do not recruit)');\r\n setShowMarkModal(false);\r\n }\r\n });\r\n }}\r\n >\r\n \r\n Mark as Rejected\r\n \r\n {\r\n Swal.fire({\r\n title: 'Are you sure?',\r\n text: `You are about to Restore ${\r\n selectedCandidates.length > 1 ? selectedCandidates.length : ''\r\n } selected candidate${selectedCandidates.length > 1 ? 's' : ''}.`,\r\n\r\n icon: 'warning',\r\n showCancelButton: true,\r\n confirmButtonColor: '#3085d6',\r\n cancelButtonColor: '#d33',\r\n confirmButtonText: 'Yes',\r\n cancelButtonText: 'No',\r\n }).then((result) => {\r\n if (result.value) {\r\n markSelected('Restore');\r\n setShowMarkModal(false);\r\n }\r\n });\r\n }}\r\n >\r\n \r\n Restore\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n Yes
\r\n \r\n \r\n }\r\n />\r\n );\r\n };\r\n\r\n const renderRemoveConfirmation = () => {\r\n return (\r\n Yes
\r\n \r\n \r\n }\r\n />\r\n );\r\n };\r\n\r\n const renderScheduledNotif = () => {\r\n const scheduledCandidates = selectedCandidates.filter((candidate) => {\r\n return candidate.DateOfInterview != null;\r\n });\r\n let message =\r\n 'Some Candidates have scheduled Interview dates already! Unschedule them before editing their Status. Candidates with Interview Dates: \\n';\r\n scheduledCandidates.forEach((candidate, i) => {\r\n if (i > 0) {\r\n message += `, ${candidate.LastName}`;\r\n } else {\r\n message += candidate.LastName;\r\n }\r\n });\r\n return (\r\n \r\n
\r\n Assign Evaluators
\r\n \r\n {\r\n setShowPreScreen(false);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n Tags
\r\n \r\n {\r\n setShowTagsPopover(false);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n Select by Field
\r\n \r\n {\r\n setShowSelectPopover(false);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n Available Interview Sessions
\r\n \r\n {\r\n e.stopPropagation();\r\n setShowInterviewDatePopover(false);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n {interviewDates.map((interviewDate, i) => {\r\n const { CandidateRegistrationLimit = 0, CountOfCandidates = 0 } = interviewDate || {};\r\n const backgroundColor = i % 2 === 0 ? '#c7cbd1' : 'white';\r\n return (\r\n {\r\n // setShowInterviewDatePopover(false);\r\n\r\n Swal.fire({\r\n title: 'Alert!',\r\n text: `Bulk assigning candidates to a session ignores registration limits. Are you sure you want to proceed?`,\r\n icon: 'warning',\r\n showCancelButton: true,\r\n confirmButtonColor: '#3085d6',\r\n cancelButtonColor: '#d33',\r\n confirmButtonText: `Yes, I Agree`,\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n const datesThatAreNotThisDate = datesFromSelectedCandidates.filter(\r\n (d) => d != interviewDate.pk_InterviewDate,\r\n );\r\n\r\n if (datesThatAreNotThisDate.length > 0) {\r\n Swal.fire({\r\n title: 'Modify Registration?',\r\n text: `${datesThatAreNotThisDate.length} selected candidate${\r\n datesThatAreNotThisDate.length > 1 ? 's' : ''\r\n } are already registered for a different date.\r\n `,\r\n icon: 'warning',\r\n showCancelButton: true,\r\n cancelButtonColor: 'gray',\r\n confirmButtonColor: '#d33',\r\n confirmButtonText: `Yes, Modify`,\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n scheduleSelectedCandidates(interviewDate.pk_InterviewDate);\r\n // SCHEDULE!\r\n setShowInterviewDatePopover(false);\r\n } else {\r\n // CANCEL!\r\n setShowInterviewDatePopover(false);\r\n }\r\n });\r\n } else {\r\n scheduleSelectedCandidates(interviewDate.pk_InterviewDate);\r\n // SCHEDULE!\r\n setShowInterviewDatePopover(false);\r\n }\r\n // scheduleCandidatesForInterviewDate(interviewDate);\r\n }\r\n });\r\n }}\r\n >\r\n
\r\n );\r\n })}\r\n \r\n {`${moment\r\n .tz(interviewDate.DateOfInterview, null)\r\n .format('dddd, MMM. DD, YYYY')} (${CountOfCandidates || 0}/${CandidateRegistrationLimit || 0})`}\r\n
\r\n {interviewDate.Label}
\r\n \r\n {\r\n const isUpdatingActual = isUpdatingRef.current;\r\n if (isUpdatingActual) {\r\n return;\r\n }\r\n const newFilteredCandidates = clone(filteredCandidatesRef.current);\r\n const newSelectedIndexes = clone(selectedIndexes);\r\n const newSelectedCandidates = clone(selectedCandidates);\r\n\r\n newFilteredCandidates.forEach((c) => {\r\n c.isSelected = !selectAll;\r\n if (!selectAll && !newSelectedIndexes.includes(c.pk_Candidate)) {\r\n newSelectedIndexes.push(c.pk_Candidate);\r\n newSelectedCandidates.push(c);\r\n } else if (selectAll && newSelectedIndexes.includes(c.pk_Candidate)) {\r\n const guiltyIndex = newSelectedIndexes.indexOf(c.pk_Candidate);\r\n newSelectedIndexes.splice(guiltyIndex);\r\n newSelectedCandidates.splice(guiltyIndex);\r\n }\r\n });\r\n\r\n oldSelectedCandidatesRef.current = newSelectedCandidates;\r\n setSelectedIndexes(newSelectedIndexes);\r\n setSelectedCandidates(newSelectedCandidates);\r\n setSelectAll(!selectAll);\r\n setFilteredCandidates(newFilteredCandidates);\r\n }}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const renderIndicatorLabel = () => {\r\n let color = 'green';\r\n let icon = faCircleCheck;\r\n let message = 'Done.';\r\n\r\n if (isGettingAllDetailedCandidates) {\r\n if (Object.values(allCandidatesDetails).length > 0) {\r\n message = 'Updating candidate data. . .';\r\n icon = faSpinner;\r\n color = 'gray';\r\n } else {\r\n message = 'Loading candidate data. . .';\r\n icon = faSpinner;\r\n color = 'gray';\r\n }\r\n } else if (allCandidatesDetailsError) {\r\n message = 'Failed to load additional fields.';\r\n icon = faExclamationTriangle;\r\n color = 'red';\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n };\r\n\r\n const renderIsUpdatingModal = () => {\r\n return (\r\n Cancel
\r\n \r\n Selected ({selectedIndexes.length})
\r\n \r\n All ({filteredCandidates.length})
\r\n \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
\r\n \r\n \r\n \r\n \r\n \r\n {renderSelectPopover()}\r\n
\r\n \r\n \r\n\r\n {AllowPrescreen ? (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n\r\n {selectedIndexes.length == 0 ? (\r\n \r\n
\r\n Assign/Remove Screeners
\r\n \r\n
\r\n \r\n {renderMarkPopover()}\r\n \r\n ) : (\r\n \r\n
\r\n Mark Candidate{selectedIndexes.length > 1 ? 's' : null}
\r\n \r\n
\r\n \r\n )}\r\n\r\n \r\n
\r\n \r\n Restore Candidate{selectedIndexes.length > 1 ? 's' : null} from{' '}\r\n {showDeletedOnly ? 'Deactivated' : filterOptions[filter]}\r\n
\r\n \r\n
\r\n \r\n {renderTagsPopover()}\r\n \r\n
\r\n Tag Candidate{selectedIndexes.length > 1 ? 's' : null}
\r\n \r\n
\r\n \r\n {(showDeletedOnly && userDetails && userDetails.EnableSuperUser) || filter != 1 ? (\r\n \r\n
\r\n \r\n {showDeletedOnly\r\n ? 'View Active Candidates'\r\n : `View ${deletedCandidates.length} Deactivated Candidate${\r\n deletedCandidates.length > 1 ? 's' : ''\r\n }`}\r\n
\r\n \r\n
\r\n \r\n ) : null}\r\n\r\n \r\n
\r\n \r\n {showDeletedOnly\r\n ? `Permanently Delete ${selectedCandidates.length > 1 ? 'Candidates' : 'Candidate'}`\r\n : `Deactivate ${selectedCandidates.length > 1 ? 'Candidates' : 'Candidate'}`}\r\n
\r\n \r\n
\r\n \r\n\r\n \r\n
\r\n Download CSV
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {renderIndicatorLabel()}\r\n {isGettingAllDetailedCandidates && Object.values(allCandidatesDetails).length <= 0 ? (\r\n \r\n {' '}\r\n Register Candidate{selectedCandidates.length > 1 ? 's' : ''}\r\n {renderDatePickerPopover()}\r\n
\r\n \r\n No Data!
}\r\n headerWrapperClasses=\"candidateListTableHeader\"\r\n />\r\n \r\n )}\r\n {renderIsUpdatingModal()}\r\n {renderDeleteConfirmation()}\r\n {renderRemoveConfirmation()}\r\n {renderScheduledNotif()}\r\n {renderCSVDownloadConfirmModal()}\r\n {AllowPrescreen ? renderPreScreenList() : null}\r\n \r\n );\r\n};\r\n\r\nexport default CandidateListWithFilters;\r\n","import React from 'react';\r\nimport DragAndDropFiles from '../../../../../DragAndDropFiles/DragAndDropFiles';\r\nfunction AddDocuments({\r\n documentTypes,\r\n setDocumentTypes,\r\n activeDepartment,\r\n embedded,\r\n match,\r\n getCandidateDetails,\r\n selectedCandidate,\r\n isSingleCandidate,\r\n isLoading,\r\n}) {\r\n return (\r\n \r\n {/*
\r\n );\r\n};\r\n\r\nexport default AdditionalDetails;\r\n","const style = {\r\n spacedBetweenRow: {\r\n flexDirection: 'row',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n width: '100%',\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '100%',\r\n alignItems: 'center',\r\n },\r\n simpleRow: {\r\n flexDirection: 'row',\r\n display: 'flex',\r\n marginBottom: 10,\r\n },\r\n filterButton: {\r\n width: '100%',\r\n },\r\n clickable: {\r\n cursor: 'pointer',\r\n },\r\n};\r\n\r\nexport default style;\r\n","const style = {\r\n mainContainer: {\r\n cursor: 'pointer',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n padding: 5,\r\n paddingTop: 10,\r\n paddingBottom: 10,\r\n width: '100%',\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '100%',\r\n },\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n width: '100%',\r\n },\r\n dateLabel: {\r\n fontWeight: 'bold',\r\n fontSize: 15,\r\n },\r\n minorText: {\r\n fontSize: 12,\r\n whiteSpace: 'nowrap',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n paddingRight: 10,\r\n },\r\n};\r\n\r\nexport default style;\r\n","import { faEnvelope, faEnvelopeOpen } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport moment from 'moment';\r\nimport React from 'react';\r\n\r\nimport style from './SentItem.style';\r\n\r\nconst SentItem = ({ sentItem, selectedSentItem, setSelectedSentItem, onClick, columnSentItems }) => {\r\n const { isOpened, text, Subject, DateSent, FirstName, LastName, index } = sentItem;\r\n let backgroundColor = index % 2 == 0 ? '#c7cbd1' : null;\r\n if (selectedSentItem && selectedSentItem.pk_CommunicationHistory == sentItem.pk_CommunicationHistory) {\r\n backgroundColor = '#d9f5ff';\r\n }\r\n return (\r\n \r\n \r\n {markOptions.map((m) => {\r\n return ;\r\n })}\r\n \r\n
*/}\r\n \r\n {\r\n saveChanges();\r\n }}\r\n >\r\n Save\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {\r\n if (!isSaving && !isGettingCandidateDetails && !isUpdatingCandidateList) {\r\n setSchedulingNotes(e.target.value);\r\n // handleChange('SchedulingNotes', e.target.value);\r\n }\r\n }}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n {\r\n if (!isSaving && !isGettingCandidateDetails && !isUpdatingCandidateList) {\r\n setDiscussionNotes(e.target.value);\r\n // handleChange('DiscussionNotes', e.target.value);\r\n }\r\n }}\r\n />\r\n \r\n
\r\n \r\n
\r\n \r\n {columnSentItems ? (\r\n \r\n
\r\n \r\n \r\n
\r\n {moment(DateSent).format('MM/DD/YYYY hh:mm A')}
\r\n {Subject || '(No Subject)'}
\r\n {`${LastName}, ${FirstName}`}
\r\n \r\n \r\n ) : (\r\n <>\r\n {moment(DateSent).format('MM/DD/YYYY hh:mm A')}
\r\n {Subject || '(No Subject)'}
\r\n {`${LastName}, ${FirstName}`}
\r\n \r\n )}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default SentItem;\r\n","import { faEnvelopeOpen, faFilter, faSearch, faTimes, faTimesCircle } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport { Button, Input, InputGroup, InputGroupAddon, Popover, PopoverBody, PopoverHeader } from 'reactstrap';\r\nimport { useAuth0 } from '../../../../../../auth0/reactAuth0Spa';\r\nimport { formatBearerToken } from '../../../../../../Common.functions';\r\nimport { fetchDataAuth0 } from '../../../../../../Services/dataApi';\r\nimport { clone } from '../../../../../../Services/schedule';\r\nimport style from './AdminSentItems.style';\r\nimport SentItem from './SentItem/SentItem';\r\nimport { DepartmentContext } from '../../../../../../DepartmentWrapper';\r\n\r\nconst AdminSentItems = ({\r\n candidates = [],\r\n interviewDates,\r\n activeDepartment,\r\n selectedSentItem,\r\n setSelectedSentItem,\r\n sentMessages,\r\n isFetchingItems,\r\n forcedFilterCandidate,\r\n showFilter = true,\r\n columnSentItems,\r\n onClick,\r\n}) => {\r\n const [filterBy, setFilterBy] = useState();\r\n const [searchString, setSearchString] = useState('');\r\n const [filteredSentItems, setFilteredSentItems] = useState([]);\r\n const [availableTemplates, setAvailableTemplates] = useState([]);\r\n const [selectedTemplateId, setSelectedTemplateId] = useState();\r\n\r\n const [showFilterPopover, setShowFilterPopover] = useState(false);\r\n const [token, setToken] = useState();\r\n\r\n const dContext = useContext(DepartmentContext);\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n\r\n useEffect(() => {\r\n getTemplates();\r\n }, [activeDepartment]);\r\n\r\n useEffect(() => {\r\n if (sentMessages) {\r\n setFilteredSentItems(sentMessages);\r\n if (sentMessages.length > 0) {\r\n setSelectedSentItem(sentMessages[0]);\r\n }\r\n }\r\n }, [sentMessages]);\r\n\r\n useEffect(() => {\r\n if (forcedFilterCandidate) {\r\n filterByString();\r\n }\r\n }, [forcedFilterCandidate]);\r\n\r\n // useEffect(() => {\r\n // if (dContext && dContext.department) {\r\n // getTemplates();\r\n // }\r\n // }, [dContext]);\r\n\r\n useEffect(() => {\r\n filterByButton();\r\n }, [JSON.stringify(filterBy)]);\r\n\r\n useEffect(() => {\r\n filterByString();\r\n }, [searchString]);\r\n\r\n useEffect(() => {\r\n if (forcedFilterCandidate) {\r\n const newSentMessages = clone(sentMessages);\r\n const newFilteredSentMessages = [];\r\n const name = `${forcedFilterCandidate.FirstName || ''} ${forcedFilterCandidate.MiddleName || ''} ${\r\n forcedFilterCandidate.LastName\r\n }`;\r\n newSentMessages.forEach((sm) => {\r\n const { FirstName, MiddleName, LastName, EmailSentTo } = sm;\r\n const msgName = `${FirstName || ''} ${forcedFilterCandidate.MiddleName || ''} ${LastName || ''}`;\r\n if (name === msgName) {\r\n newFilteredSentMessages.push(sm);\r\n }\r\n });\r\n setFilteredSentItems(newFilteredSentMessages);\r\n }\r\n }, [forcedFilterCandidate]);\r\n\r\n const filterByString = () => {\r\n // Email,\r\n // Candidate Name,\r\n // Sent Date,\r\n // Template Name,\r\n // Email Body\r\n\r\n // NOTE: Currently missing Email Body, Mike says disregard Sent Date\r\n\r\n const newFilteredSentMessages = [];\r\n const name = `${(forcedFilterCandidate && forcedFilterCandidate.FirstName) || ''} ${(forcedFilterCandidate &&\r\n forcedFilterCandidate.MiddleName) ||\r\n ''} ${(forcedFilterCandidate && forcedFilterCandidate.LastName) || ''}`.toLowerCase();\r\n\r\n sentMessages.forEach((sm) => {\r\n const { FirstName = '', MiddleName = '', LastName = '', EmailSentTo = '', Subject = '' } = sm;\r\n const sentName = `${FirstName || ''} ${MiddleName || ''} ${LastName || ''}`.toLowerCase();\r\n const matchingTemplate = sm.fk_Template\r\n ? availableTemplates.find((t) => {\r\n return t.pk_CommunicationTemplate === sm.fk_Template;\r\n })\r\n : null;\r\n const matchingWithTemplate = matchingTemplate\r\n ? matchingTemplate.Title.toLowerCase().indexOf(searchString) >= 0\r\n : null;\r\n\r\n if (\r\n ((sentName && sentName.indexOf(searchString)) >= 0 ||\r\n (EmailSentTo && EmailSentTo.toLowerCase().indexOf(searchString) >= 0) ||\r\n (Subject && Subject.toLowerCase().indexOf(searchString) >= 0) ||\r\n matchingWithTemplate ||\r\n !searchString) &&\r\n ((forcedFilterCandidate && sentName && sentName.indexOf(name) >= 0) || !forcedFilterCandidate)\r\n ) {\r\n newFilteredSentMessages.push(sm);\r\n }\r\n });\r\n\r\n setFilteredSentItems(newFilteredSentMessages);\r\n setFilterBy(null);\r\n };\r\n\r\n const getTemplates = (id = null) => {\r\n if (!activeDepartment) {\r\n return;\r\n }\r\n getTokenSilently()\r\n .then((token) => {\r\n fetchDataAuth0(\r\n 'department/readCommunicationTemplates',\r\n { pk_Department: activeDepartment.pk_Department },\r\n formatBearerToken(token),\r\n )\r\n .then((result) => {\r\n setAvailableTemplates(result.data);\r\n if (id) {\r\n // if a template was just added select that template from the options\r\n setSelectedTemplateId(id);\r\n }\r\n })\r\n .catch((err) => {});\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const filterByButton = () => {\r\n const newSentItems = sentMessages.slice().filter((sentItem) => {\r\n return filterBy == null || (sentItem && filterBy && sentItem.fk_Template == filterBy.pk_CommunicationTemplate);\r\n });\r\n\r\n setFilteredSentItems(newSentItems);\r\n };\r\n\r\n const renderFilterButton = () => {\r\n return (\r\n <>\r\n \r\n \r\n
\r\n Templates
\r\n \r\n {\r\n e.stopPropagation();\r\n setShowFilterPopover(false);\r\n }}\r\n />\r\n
\r\n \r\n {availableTemplates ? (\r\n availableTemplates.map((template, i) => {\r\n let backgroundColor = i % 2 == 0 ? '#c7cbd1' : null;\r\n if (filterBy && template.pk_CommunicationTemplate === filterBy.pk_CommunicationTemplate) {\r\n backgroundColor = '#d9f5ff';\r\n }\r\n return (\r\n {\r\n setFilterBy(template);\r\n setShowFilterPopover(false);\r\n }}\r\n >\r\n {template.Title}\r\n
\r\n );\r\n })\r\n ) : (\r\n No Templates
\r\n )}\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default AdminSentItems;\r\n","const style = {\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '100%',\r\n },\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n },\r\n};\r\n\r\nexport default style;\r\n","import moment from 'moment';\r\nimport React, { Fragment } from 'react';\r\nimport parse from 'html-react-parser';\r\nimport sanitizeHtml from 'sanitize-html';\r\nimport { createActionButton, sanitizeWithOptions } from '../../../../../../Common.functions';\r\nimport style from './AdminEmailPreview.style';\r\nimport './AdminEmailPreview.style.css';\r\n\r\nconst AdminEmailPreview = ({ itemToPreview = {}, mode = 'sent' }) => {\r\n const { isOpened, Body, Subject, DateSent, FirstName, LastName, index, EmailSentTo } = itemToPreview || {};\r\n\r\n const uploadButton = createActionButton({ buttonText: 'Upload Photo' });\r\n const scheduleInterviewButton = createActionButton({ buttonText: 'Register for Interview' });\r\n const viewScheduleButton = createActionButton({ buttonText: 'View Schedule' });\r\n\r\n const createMarkUp = () => {\r\n return { __html: sanitizeWithOptions(Body) };\r\n };\r\n\r\n const renderSentTo = () => {\r\n if (!LastName && !FirstName && !EmailSentTo) {\r\n return '';\r\n }\r\n return `${LastName || ''} ${FirstName ? `, ${FirstName}` : ''} (${EmailSentTo || ''})`;\r\n };\r\n\r\n // used for updating button hrefs to have isPreview=true\r\n const processButtonsInBody = (bodyToUse) => {\r\n const doc = document.createElement('div');\r\n doc.innerHTML = bodyToUse || '';\r\n const buttonStrings = ['photo-upload', 'register-for-interview', 'view-schedule'];\r\n const buttons = [];\r\n buttonStrings.forEach((buttonString) => {\r\n const button = doc.getElementsByClassName(buttonString);\r\n if (button.length > 0) {\r\n buttons.push(button[0]);\r\n }\r\n });\r\n\r\n for (let i = 0; i < buttons.length; i++) {\r\n buttons[i].href = `${buttons[i].href}?preview=true`;\r\n }\r\n return doc.innerHTML;\r\n };\r\n\r\n return (\r\n \r\n {renderSearchInput()}\r\n
\r\n {showFilter ? renderFilterButton() : null}
\r\n \r\n
\r\n \r\n {isFetchingItems ? (\r\n \r\n Loading Messages. . .\r\n
\r\n ) : filteredSentItems && filteredSentItems.length > 0 ? (\r\n filteredSentItems.map((sentItem, i) => {\r\n return (\r\n No Messages
\r\n )}\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n \r\n Subject:\r\n
\r\n {Subject || ''}
\r\n \r\n
\r\n \r\n Date Sent:\r\n
\r\n \r\n {DateSent ? moment(DateSent).format('dddd, MMMM DD, YYYY hh:mm A') : ' '}\r\n
\r\n \r\n
\r\n \r\n Sent To:\r\n
\r\n {renderSentTo()}
\r\n \r\n
\r\n \r\n \r\n \r\n {mode === 'sent' || !Body ? (\r\n parse(processButtonsInBody(sanitizeWithOptions(Body || '')))\r\n ) : (\r\n \r\n )}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n if (dataType.ReadOnly || isSaving || isGettingCandidateDetails) return;\r\n\r\n updateCandidate(dataType.Name, 'Yes');\r\n }}\r\n />\r\n {\r\n if (dataType.ReadOnly || isSaving || isGettingCandidateDetails) return;\r\n updateCandidate(dataType.Name, 'Yes');\r\n }}\r\n >\r\n Yes\r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n case 4:\r\n return (\r\n \r\n {\r\n if (dataType.ReadOnly || isSaving || isGettingCandidateDetails) return;\r\n updateCandidate(dataType.Name, 'No');\r\n }}\r\n />\r\n {\r\n if (dataType.ReadOnly || isSaving || isGettingCandidateDetails) return;\r\n updateCandidate(dataType.Name, 'No');\r\n }}\r\n >\r\n No\r\n
\r\n Unknown UI Type: {typeToUse}
;\r\n break;\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n {\r\n saveCandidate();\r\n }}\r\n >\r\n Save\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default ScoresAndAwards;\r\n\r\n// tabs\r\n// scores and awards\r\n// additional details\r\n// waitlist\r\n// communication\r\n\r\n// down below candidate information\r\n\r\n// just checkboxes for custom fields\r\n\r\n// show custom ones\r\n","const style = {\r\n spacedBetweenRow: {\r\n flexDirection: 'row',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n width: '100%',\r\n alignItems: 'center',\r\n },\r\n simpleRow: {\r\n flexDirection: 'row',\r\n display: 'flex',\r\n marginBottom: 5,\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n spacedAroundRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-around',\r\n alignItems: 'center',\r\n },\r\n genButton: {\r\n width: '100%',\r\n },\r\n clickable: {\r\n cursor: 'pointer',\r\n },\r\n dateListItem: { width: '100%', textAlign: 'center', cursor: 'pointer', padding: 10, minHeight: 60 },\r\n buttonLabel: {\r\n width: '100%',\r\n textAlign: 'center',\r\n fontWeight: 600,\r\n fontSize: 13,\r\n verticalAlign: 'middle',\r\n },\r\n topSectionContainer: {\r\n marginBottom: 0,\r\n },\r\n selectedCandidateName: {\r\n fontSize: 30,\r\n fontWeight: 600,\r\n },\r\n stickyContainer: { position: 'relative', top: 0 },\r\n tabContainer: {\r\n height: 'calc(100% - 168px)',\r\n\r\n display: 'flex',\r\n flexDirection: 'row',\r\n overflowY: 'scroll',\r\n overflowX: 'hidden',\r\n marginTop: 5,\r\n },\r\n};\r\n\r\nexport default style;\r\n","const style = {\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n },\r\n spacedBetweenRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'spaced-between',\r\n alignItems: 'center',\r\n },\r\n interviewDateItem: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n borderBottom: 'solid 1px gray',\r\n padding: 10,\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n },\r\n};\r\nexport default style;\r\n","import React, { useCallback, useEffect, useState } from 'react';\r\nimport { useHistory } from 'react-router';\r\n\r\nimport { Button, Modal, ModalFooter, ModalBody, ModalHeader } from 'reactstrap';\r\nimport { clone } from '../../../../Services/schedule';\r\n\r\nexport function RouterPrompt(props) {\r\n const { hasChanges, onOk, onCancel, title, okLabel, cancelLabel, message } = props;\r\n\r\n const history = useHistory();\r\n\r\n const [showPrompt, setShowPrompt] = useState(false);\r\n const [currentPath, setCurrentPath] = useState('');\r\n\r\n useEffect(() => {\r\n if (hasChanges) {\r\n history.block((prompt) => {\r\n setCurrentPath(prompt.pathname);\r\n setShowPrompt(true);\r\n return 'true';\r\n });\r\n } else {\r\n history.block(() => {});\r\n }\r\n\r\n return () => {\r\n history.block(() => {});\r\n };\r\n }, [history, hasChanges]);\r\n\r\n window.onbeforeunload = function(e) {\r\n if (hasChanges) {\r\n return true;\r\n }\r\n };\r\n const handleOK = useCallback(async () => {\r\n if (onOk) {\r\n const canRoute = await Promise.resolve(onOk());\r\n if (canRoute) {\r\n history.block(() => {});\r\n history.push(currentPath);\r\n }\r\n }\r\n setShowPrompt(false);\r\n }, [currentPath, history, onOk]);\r\n\r\n const handleCancel = useCallback(async () => {\r\n if (onCancel) {\r\n const canRoute = await Promise.resolve(onCancel());\r\n if (canRoute) {\r\n history.block(() => {});\r\n history.push(currentPath);\r\n }\r\n }\r\n setShowPrompt(false);\r\n }, [currentPath, history, onCancel]);\r\n\r\n return (\r\n \r\n {dataTypes.map((dataType, i) => {\r\n if (selectedCandidate) {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n }\r\n })}\r\n \r\n {dataType.Alias}:\r\n
\r\n \r\n {renderInput(dataType, i)}\r\n {/* {\r\n updateCandidate(dataType.Name, e.target.value);\r\n }}\r\n /> */}\r\n
\r\n \r\n {moment(createdAt).format('MMM DD, YYYY hh:mm A')}
\r\n {deciferText(item)}\r\n
\r\n );\r\n });\r\n };\r\n\r\n const changeSortOrder = (value, id) => {\r\n let numberValue = Number(value) - 1;\r\n\r\n const newDates = clone(dates);\r\n const indexToUpdate = newDates.findIndex((d) => {\r\n return d.pk_InterviewDate == id;\r\n });\r\n const indexToMoveTo = numberValue;\r\n const item1 = newDates[indexToUpdate];\r\n const item2 = newDates[indexToMoveTo];\r\n item1.PreferenceOrder = indexToMoveTo;\r\n item2.PreferenceOrder = indexToUpdate;\r\n newDates[indexToMoveTo] = item1;\r\n newDates[indexToUpdate] = item2;\r\n setDates(clone(newDates));\r\n return;\r\n };\r\n\r\n const prepareDatesForDisplay = (rawDates) => {\r\n const waitListDates = rawDates.filter((d) => {\r\n return d.isWaitlistItem;\r\n });\r\n\r\n waitListDates\r\n .sort((a, b) => {\r\n return a.PreferenceOrder - b.PreferenceOrder;\r\n })\r\n .sort((a, b) => {\r\n const aMoment = moment(a.DateOfInterview);\r\n const bMoment = moment(b.DateOfInterview);\r\n\r\n if (aMoment.isBefore(bMoment)) {\r\n return 1;\r\n } else if (aMoment.isBefore(bMoment)) {\r\n return -1;\r\n } else {\r\n return 0;\r\n }\r\n });\r\n\r\n const nonWaitListDates = rawDates.filter((d) => {\r\n return !d.isWaitlistItem;\r\n });\r\n\r\n nonWaitListDates\r\n .sort((a, b) => {\r\n return a.PreferenceOrder - b.PreferenceOrder;\r\n })\r\n .sort((a, b) => {\r\n const aMoment = moment(a.DateOfInterview);\r\n const bMoment = moment(b.DateOfInterview);\r\n\r\n if (aMoment.isBefore(bMoment)) {\r\n return 1;\r\n } else if (aMoment.isBefore(bMoment)) {\r\n return -1;\r\n } else {\r\n return 0;\r\n }\r\n })\r\n .forEach((d) => {\r\n d.Removed = true;\r\n });\r\n\r\n const sortedDates = [...waitListDates, ...nonWaitListDates];\r\n const newWaitlistDataCopy = {};\r\n waitListDates.forEach((d) => {\r\n d.originalPreferenceOrder = d.PreferenceOrder;\r\n d.originalRemovedState = d.Removed;\r\n const key = d.pk_InterviewDate;\r\n newWaitlistDataCopy[key] = d;\r\n });\r\n\r\n const newChanges = clone(changes);\r\n newChanges.waitlist = false;\r\n setChanges(newChanges);\r\n setDates(sortedDates);\r\n datesReference.current = clone(sortedDates);\r\n // setWaitlistData(newWaitlistDataCopy);\r\n // setWaitlistDataCopy(newWaitlistDataCopy);\r\n };\r\n\r\n const handleSave = (e) => {\r\n console.log('handleSave firing ');\r\n e.preventDefault();\r\n const payload = {};\r\n dates.forEach((item) => {\r\n const {\r\n ChosenByCandidate,\r\n PreferenceOrder,\r\n entryState,\r\n Removed,\r\n OriginalRemoved,\r\n OriginalPreferenceOrder,\r\n isWaitlistItem,\r\n pk_Candidate,\r\n pk_InterviewDate,\r\n UUID,\r\n } = item;\r\n\r\n // if (!isWaitlistItem) {\r\n // return;\r\n // }\r\n payload[pk_InterviewDate] = {\r\n PreferenceOrder: PreferenceOrder != null ? PreferenceOrder : null,\r\n Removed: Removed ? Removed : false,\r\n fk_Candidate: selectedCandidate.pk_Candidate,\r\n fk_InterviewDate: pk_InterviewDate,\r\n };\r\n });\r\n\r\n // return;\r\n // setLoading(true);\r\n // TODO: Crash on save without edits might be because no manual assignmetn of PreferenceOrder.\r\n // Jeff said new endpoint would have those.\r\n getTokenSilently()\r\n .then((token) => {\r\n postDataAgnostic(\r\n 'department/season/candidate/waitlist',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n pk_Season: dContext.season.pk_Season,\r\n pk_Candidate: selectedCandidate.pk_Candidate,\r\n },\r\n { payload },\r\n formatBearerToken(token),\r\n )\r\n .then((result) => {\r\n setLoading(false);\r\n alert.success('Edits saved.');\r\n const newChanges = clone(changes);\r\n newChanges.waitlist = false;\r\n setChanges(newChanges);\r\n setIsWaitlisted(result.data ? result.data.isWaitlisted : false);\r\n getCandidateDetails(selectedCandidate);\r\n // saveResults({\r\n // candidatesToUpdate: [selectedCandidate.pk_Candidate],\r\n // fieldsToUpdate: {},\r\n // forcedSelectedCandidateId: selectedCandidate.pk_Candidate,\r\n // callback: (success) => {\r\n // if (success) {\r\n // }\r\n // },\r\n // });\r\n })\r\n .catch((err) => {\r\n setLoading(false);\r\n alert.error('Error when saving.');\r\n })\r\n .finally(() => {\r\n getInterviewDates(null, selectedCandidate);\r\n });\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const renderInterviewDates = () => {\r\n return (\r\n <>\r\n {dates.map((item, i) => {\r\n // const { pk_InterviewDate } = item;\r\n const isCandidateRegisteredDate =\r\n selectedCandidate && item.pk_InterviewDate == selectedCandidate.pk_InterviewDate;\r\n const { History, PreferenceOrder, Removed, pk_InterviewDate, UUID, isWaitlistItem } = item;\r\n\r\n const hasWaitlistData = isWaitlistItem && !Removed;\r\n\r\n const isRemovedItem = isWaitlistItem && Removed;\r\n\r\n let backgroundColor = i % 2 == 0 ? '#c7cbd1' : null;\r\n\r\n return (\r\n \r\n {deciferText(item)}\r\n
\r\n \r\n Was choice {PreferenceOrder + 1}, but some previously selected preferences are no longer available\r\n \r\n ) : null}\r\n\r\n
\r\n );\r\n })}\r\n \r\n );\r\n };\r\n\r\n if (!dates) {\r\n console.log('NO DATES ');\r\n }\r\n const hasWaitlistData = dates && dates.length > 0;\r\n const { CandidateResponseToInvitationTimestamp } = selectedCandidate;\r\n const timeToDisplay = CandidateResponseToInvitationTimestamp\r\n ? moment(CandidateResponseToInvitationTimestamp, moment.tz.guess()).format('MM/DD/YYYY')\r\n : null;\r\n\r\n return (\r\n \r\n {\r\n if (hasWaitlistData && !isRemovedItem) {\r\n removeDateFromWaitlist(pk_InterviewDate);\r\n } else {\r\n addDateToWaitlist(pk_InterviewDate || UUID);\r\n }\r\n }}\r\n >\r\n \r\n Candidate is registered for this session.\r\n \r\n ) : null}\r\n
\r\n {!hasWaitlistData ? (\r\n \r\n ) : (\r\n \r\n {\r\n changeSortOrder(e.target.value, pk_InterviewDate || UUID);\r\n }}\r\n >\r\n {dates\r\n .filter((item) => {\r\n return !item.Removed && item.isWaitlistItem;\r\n })\r\n .map((key, i) => {\r\n const item = datesReference[key];\r\n return (\r\n \r\n );\r\n })}\r\n \r\n
\r\n )}\r\n\r\n {hasWaitlistData && i != PreferenceOrder ? (\r\n \r\n
\r\n\r\n {moment(item.DateOfInterview).format('dddd, MMM. DD, YYYY')}
\r\n\r\n \r\n {item.Label || '(No Label)'}\r\n
\r\n \r\n \r\n \r\n Details \r\n \r\n \r\n \r\n \r\n
\r\n {renderHistory(History)}
\r\n \r\n {loading && (\r\n \r\n )}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Waitlist;\r\n","import { faCheckSquare, faSquare } from '@fortawesome/free-regular-svg-icons';\r\nimport {\r\n faCheck,\r\n faClipboardList,\r\n faEnvelope,\r\n faHandPaper,\r\n faThumbsDown,\r\n faTimes,\r\n faUserCheck,\r\n faUserTimes,\r\n} from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { DepartmentContext } from 'DepartmentWrapper';\r\nimport { getElementById } from 'domutils';\r\nimport { CandidateStatusIcons } from 'enums';\r\nimport { clone } from 'lodash';\r\nimport React, { useEffect, useRef, useState, useContext } from 'react';\r\nimport { Button, CustomInput, Popover, PopoverBody, PopoverHeader, UncontrolledTooltip } from 'reactstrap';\r\n\r\nconst MarkPopover = ({\r\n showStatusPopover,\r\n setShowStatusPopover,\r\n selectedCandidate,\r\n saveResults,\r\n isUpdatingStatus,\r\n setIsUpdatingStatus,\r\n}) => {\r\n const [fieldsToUpdate, setFieldsToUpdate] = useState({});\r\n\r\n const dContext = useContext(DepartmentContext);\r\n const { season } = dContext || {};\r\n const { AllowPrescreen } = season || {};\r\n\r\n const {\r\n pk_Candidate,\r\n EnableMarkedForInvitation,\r\n EnableMarkedForPrescreen,\r\n HasBeenSentInvitation,\r\n IsPreScreen,\r\n HasDeclinedInterview,\r\n EnableRespondedToInvitation,\r\n IsWaitlisted,\r\n IsScheduled,\r\n HasBeenSentConfirmation,\r\n HasBeenRejectedForInterview,\r\n WaitListConfirmationHasBeenSent,\r\n } = selectedCandidate;\r\n\r\n const {\r\n pendingInvite,\r\n invited,\r\n markedForInvite,\r\n waitlisted,\r\n confirmed,\r\n unconfirmed,\r\n waitlistConfirmation,\r\n waitlistConfirmationUnsent,\r\n rejected,\r\n scheduled,\r\n prescreen,\r\n declined,\r\n } = CandidateStatusIcons;\r\n\r\n const statusToSetup = [\r\n {\r\n booleanString: 'EnableMarkedForPrescreen',\r\n label: 'Mark as Prescreen',\r\n icon: prescreen.icon,\r\n editable: AllowPrescreen,\r\n switchIsVisible: true,\r\n color: prescreen.color,\r\n },\r\n {\r\n booleanString: 'EnableMarkedForInvitation',\r\n label: 'Mark for Invitation',\r\n icon: markedForInvite.icon,\r\n editable: AllowPrescreen,\r\n switchIsVisible: true,\r\n color: markedForInvite.color,\r\n },\r\n {\r\n booleanString: 'EnableMarkedForInvitation',\r\n label: 'Pending Invite',\r\n icon: pendingInvite.icon,\r\n editable: false,\r\n switchIsVisible: false,\r\n color: pendingInvite.color,\r\n },\r\n {\r\n booleanString: 'HasBeenSentInvitation',\r\n label: 'Invited',\r\n icon: invited.icon,\r\n editable: false,\r\n switchIsVisible: false,\r\n color: invited.color,\r\n },\r\n {\r\n booleanString: 'IsScheduled',\r\n label: 'Registered',\r\n icon: scheduled.icon,\r\n editable: false,\r\n switchIsVisible: false,\r\n color: scheduled.color,\r\n },\r\n\r\n {\r\n booleanString: 'HasBeenSentConfirmation',\r\n label: 'Registration Confirmation Sent',\r\n icon: HasBeenSentConfirmation ? confirmed.icon : unconfirmed.icon,\r\n editable: false,\r\n switchIsVisible: false,\r\n color: HasBeenSentConfirmation ? confirmed.color : unconfirmed.color,\r\n },\r\n {\r\n booleanString: 'WaitListConfirmationHasBeenSent',\r\n label: 'Waitlist Confirmation Sent',\r\n icon: WaitListConfirmationHasBeenSent ? waitlistConfirmation.icon : waitlistConfirmationUnsent.icon,\r\n editable: false,\r\n switchIsVisible: false,\r\n color: WaitListConfirmationHasBeenSent ? waitlistConfirmation.color : waitlistConfirmationUnsent.color,\r\n },\r\n {\r\n booleanString: 'IsWaitlisted',\r\n label: 'Waitlisted',\r\n icon: waitlisted.icon,\r\n editable: false,\r\n switchIsVisible: false,\r\n color: waitlisted.color,\r\n },\r\n {\r\n booleanString: 'HasBeenRejectedForInterview',\r\n label: 'Rejected',\r\n icon: rejected.icon,\r\n editable: true,\r\n switchIsVisible: true,\r\n color: rejected.color,\r\n },\r\n {\r\n booleanString: 'HasDeclinedInterview',\r\n label: 'Declined',\r\n icon: declined.icon,\r\n editable: false,\r\n switchIsVisible: false,\r\n color: declined.color,\r\n },\r\n ];\r\n\r\n useEffect(() => {\r\n if (selectedCandidate) {\r\n setFieldsToUpdate({});\r\n }\r\n }, [selectedCandidate]);\r\n\r\n if (document.getElementById(`edit_${pk_Candidate}`) == null) {\r\n return ;\r\n }\r\n\r\n let hasChange = false;\r\n Object.keys(fieldsToUpdate).forEach((key) => {\r\n if (fieldsToUpdate[key] != selectedCandidate[key]) {\r\n hasChange = true;\r\n }\r\n });\r\n\r\n return (\r\n \r\n \r\n
\r\n Manage Waitlist
\r\n {timeToDisplay ? `Initial Selection: ${timeToDisplay}` : 'No Selection Made'}
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n Preference Order\r\n
\r\n\r\n \r\n Interview Session\r\n
\r\n \r\n \r\n Save Changes\r\n \r\n
\r\n \r\n
\r\n \r\n {hasWaitlistData ? (\r\n renderInterviewDates()\r\n ) : (\r\n
\r\n \r\n There are no available interview sessions for this candidate.\r\n
\r\n )}\r\n \r\n \r\n
\r\n {status.label}
\r\n\r\n \r\n {status.editable || status.switchIsVisible ? (\r\n <>\r\n {\r\n e.stopPropagation();\r\n }}\r\n />\r\n \r\n ) : null}\r\n
\r\n \r\n \r\n {!status.editable && !status.switchIsVisible ? (\r\n \r\n {\r\n setIsUpdatingStatus(true);\r\n saveResults({\r\n candidatesToUpdate: [selectedCandidate.pk_Candidate],\r\n forcedSelectedCandidateId: selectedCandidate.pk_Candidate,\r\n fieldsToUpdate,\r\n callback: () => {\r\n setIsUpdatingStatus(false);\r\n setShowStatusPopover(false);\r\n },\r\n });\r\n }}\r\n >\r\n {' '}\r\n Save{' '}\r\n {' '}\r\n {\r\n setShowStatusPopover(false);\r\n }}\r\n color=\"secondary\"\r\n >\r\n {' '}\r\n Cancel{' '}\r\n \r\n
\r\n \r\n
\r\n {Group.Name}
{' '}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default GroupItem;\r\n","import { faPlus, faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport { Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';\r\nimport Swal from 'sweetalert2';\r\nimport { useAuth0 } from '../../../../../auth0/reactAuth0Spa';\r\nimport { formatBearerToken } from '../../../../../Common.functions';\r\nimport { DepartmentContext } from '../../../../../DepartmentWrapper';\r\nimport { deleteData, fetchDataAgnostic, postDataAgnostic } from '../../../../../Services/dataApi';\r\nimport { clone } from '../../../../../Services/schedule';\r\nimport ConfirmModal from '../../../Coordinator/Schedule/ConfirmModal';\r\nimport style from './style';\r\nimport { useAlert } from 'react-alert';\r\nimport GroupItem from './GroupItem/GroupItem';\r\n\r\nconst GroupsPopover = ({\r\n token,\r\n selectedCandidates = [],\r\n candidate,\r\n getCandidates,\r\n getAllCandidatesData,\r\n setShowPopover,\r\n setParentTags,\r\n}) => {\r\n const [searchString, setSearchString] = useState('');\r\n\r\n const [selectedGroup, setSelectedGroup] = useState({});\r\n\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [isAddingGroup, setIsAddingGroup] = useState(false);\r\n\r\n const [groupChoices, setGroupChoices] = useState([]);\r\n const [showTagConfirmModal, setShowTagConfirmModal] = useState(false);\r\n const [tagAction, setTagAction] = useState();\r\n\r\n const alert = useAlert();\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n const dContext = useContext(DepartmentContext);\r\n\r\n useEffect(() => {\r\n initializeSelectedGroups();\r\n }, [JSON.stringify(selectedCandidates), JSON.stringify(groupChoices)]);\r\n\r\n useEffect(() => {\r\n getGroups();\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (candidate) {\r\n setSelectedGroup(candidate.Group || {});\r\n }\r\n }, [candidate]);\r\n\r\n const initializeSelectedGroups = () => {\r\n // const allTags = {};\r\n // const newSelectedTags = [];\r\n // selectedCandidates.forEach((candidate) => {\r\n // if (candidate && candidate.Tags) {\r\n // candidate.Tags.forEach((tag) => {\r\n // if (allTags[tag.Tag]) {\r\n // allTags[tag.Tag] = { Tag: tag.Tag, count: allTags[tag.Tag].count + 1 };\r\n // } else {\r\n // allTags[tag.Tag] = { Tag: tag.Tag, count: 1 };\r\n // }\r\n // });\r\n // }\r\n // });\r\n // if (selectedCandidates.length == 1) {\r\n // if (Object.keys(allTags) == null || Object.keys(allTags).length <= 0) {\r\n // setSelectedTags([]);\r\n // } else {\r\n // Object.values(allTags).forEach((tag, i) => {\r\n // if (tag.count == selectedCandidates.length) {\r\n // const tagActual = groupChoices.find((tagChoice) => {\r\n // return tagChoice.Tag == tag.Tag;\r\n // });\r\n // if (tagActual) {\r\n // newSelectedTags.push(tagActual);\r\n // }\r\n // }\r\n // });\r\n // }\r\n // }\r\n // setSelectedTags(newSelectedTags);\r\n // setOldTags(newSelectedTags);\r\n };\r\n\r\n const getGroups = () => {\r\n setIsLoading(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n fetchDataAgnostic(\r\n 'candidate/groups',\r\n { pk_Department: dContext.department.pk_Department, pk_Season: dContext.season.pk_Season },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n setGroupChoices(res.data);\r\n setIsLoading(false);\r\n })\r\n .catch((err) => {});\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const onClickGroup = (clickedGroup, isInSelectedTags) => {\r\n if (selectedGroup.pk_Group === clickedGroup.pk_Group) {\r\n setSelectedGroup({});\r\n } else {\r\n setSelectedGroup(clickedGroup);\r\n }\r\n };\r\n\r\n const addNewGroup = (newGroup, promiseDetails) => {\r\n setIsLoading(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n postDataAgnostic(\r\n 'candidate/group',\r\n null,\r\n {\r\n Name: newGroup,\r\n Description: '',\r\n fk_Department: dContext.department.pk_Department,\r\n fk_Season: dContext.season.pk_Season,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n setIsLoading(false);\r\n if (promiseDetails) {\r\n const { resolve } = promiseDetails;\r\n resolve('true');\r\n } else {\r\n getCandidates();\r\n if (getAllCandidatesData) {\r\n getAllCandidatesData();\r\n }\r\n }\r\n })\r\n .catch((err) => {\r\n Swal.fire('Error', 'Error deleting group', 'error');\r\n setIsLoading(false);\r\n if (promiseDetails) {\r\n const { reject } = promiseDetails;\r\n reject();\r\n }\r\n })\r\n .finally(() => {\r\n getGroups();\r\n });\r\n })\r\n .catch((err) => {\r\n setIsLoading(false);\r\n Swal.fire('Error', 'Error deleting group', 'error');\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const addGroupToCandidates = (tagList, candidateList, promiseDetails) => {\r\n // console.log('addGroupToCandidates firing');\r\n };\r\n\r\n const deleteGroupFromCandidates = (groupToDelete, promiseDetails) => {\r\n // console.log('deleteGroupFromCandidates firing');\r\n setIsLoading(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n deleteData(\r\n 'candidate/group',\r\n null,\r\n // {\r\n // pk_Department: dContext.department.pk_Department,\r\n // },\r\n {\r\n fk_Department: dContext.department.pk_Department,\r\n fk_Season: dContext.season.pk_Season,\r\n pk_Group: groupToDelete.pk_Group,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n setIsLoading(false);\r\n if (promiseDetails) {\r\n const { resolve } = promiseDetails;\r\n resolve('true');\r\n } else {\r\n getCandidates();\r\n if (getAllCandidatesData) {\r\n getAllCandidatesData();\r\n }\r\n }\r\n })\r\n .catch((err) => {\r\n Swal.fire('Error', 'Error creating new group', 'error');\r\n setIsLoading(false);\r\n if (promiseDetails) {\r\n const { reject } = promiseDetails;\r\n reject();\r\n }\r\n });\r\n })\r\n .catch((err) => {\r\n Swal.fire('Error', 'Error creating new group', 'error');\r\n setIsLoading(false);\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const assignGroupToCandidates = (promiseDetails) => {\r\n setIsLoading(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n postDataAgnostic(\r\n 'candidate/group/assign',\r\n null,\r\n {\r\n pk_Candidate: candidate.pk_Candidate,\r\n pk_Group: selectedGroup && selectedGroup.pk_Group != null ? selectedGroup.pk_Group : null,\r\n pk_Department: dContext.department.pk_Department,\r\n pk_Season: dContext.season.pk_Season,\r\n },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n setIsLoading(false);\r\n if (promiseDetails) {\r\n const { resolve } = promiseDetails;\r\n resolve('true');\r\n } else {\r\n getCandidates();\r\n if (getAllCandidatesData) {\r\n getAllCandidatesData();\r\n }\r\n }\r\n })\r\n .catch((err) => {\r\n console.log('err: ', err);\r\n Swal.fire('Error', 'Error assigning group', 'error');\r\n setIsLoading(false);\r\n if (promiseDetails) {\r\n const { reject } = promiseDetails;\r\n reject();\r\n }\r\n })\r\n .finally(() => {\r\n getGroups();\r\n });\r\n })\r\n .catch((err) => {\r\n setIsLoading(false);\r\n Swal.fire('Error', 'Error assigning group', 'error');\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const filteredGroupChoices = groupChoices\r\n .sort((a, b) => {\r\n return a.Name > b.Name ? 1 : a.Name < b.Name ? -1 : 0;\r\n })\r\n .filter((Group) => {\r\n return Group.Name.toLowerCase().indexOf(searchString.toLowerCase()) >= 0;\r\n });\r\n\r\n const hasSearchValues = filteredGroupChoices.length > 0;\r\n\r\n return (\r\n \r\n {\r\n Swal.fire({\r\n title: 'Enter name of new Group!',\r\n input: 'text',\r\n inputAttributes: {\r\n autocapitalize: 'off',\r\n },\r\n showCancelButton: true,\r\n confirmButtonText: 'Add Group',\r\n confirmButtonColor: 'green',\r\n showLoaderOnConfirm: true,\r\n preConfirm: (newGroupName) => {\r\n return new Promise((resolve, reject) => {\r\n addNewGroup(newGroupName, { resolve, reject });\r\n });\r\n },\r\n allowOutsideClick: () => {\r\n return !isAddingGroup;\r\n },\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n Swal.fire('Added Tag!', 'success');\r\n }\r\n });\r\n }}\r\n >\r\n New Group\r\n \r\n\r\n {\r\n assignGroupToCandidates();\r\n }}\r\n color=\"success\"\r\n >\r\n Save\r\n \r\n\r\n {\r\n addGroupToCandidates(selectedGroup);\r\n }}\r\n color=\"success\"\r\n >\r\n Add Group\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default GroupsPopover;\r\n","const style = {\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n },\r\n spacedBetweenRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n width: '100%',\r\n },\r\n};\r\n\r\nexport default style;\r\n","import React, { useState, useEffect } from 'react';\r\nimport style from './RezRateTable.style';\r\nimport { set } from 'lodash';\r\n\r\nconst RezRateTable = (props) => {\r\n const {\r\n columns, // Array of objects with keys: dataKey, label, width, cellFormatter, headerFormatter\r\n data, // Array of objects\r\n noDataMessage, // what to display when no data\r\n onRowClick, // function to call when a row is clicked\r\n tableBodyHeight,\r\n rowStyle = () => ({}), // Style for each row in the table\r\n } = props;\r\n\r\n // State variables\r\n const [tableData, setTableData] = useState([]);\r\n const [tableColumns, setTableColumns] = useState([]);\r\n const [tableColumnsToDisplay, setTableColumnsToDisplay] = useState([]);\r\n const [tableDataToDisplay, setTableDataToDisplay] = useState([]); // filtered/sorted/processed version of tableData.\r\n\r\n // Effects\r\n useEffect(() => {\r\n // Fetch data or perform any side effects here\r\n }, []);\r\n\r\n useEffect(() => {\r\n setTableColumns(columns);\r\n setTableColumnsToDisplay(columns);\r\n }, [columns]);\r\n\r\n useEffect(() => {\r\n setTableData(data);\r\n setTableDataToDisplay(data);\r\n }, [data]);\r\n\r\n const processHeaderRow = (columnData) => {\r\n const headerColumns = [];\r\n\r\n columnData.forEach((header) => {\r\n const { dataKey, label, width, headerFormatter } = header;\r\n const headerId = `header-${dataKey}-${label}`;\r\n\r\n if (headerFormatter) {\r\n headerColumns.push(\r\n \r\n \r\n \r\n {\r\n setSearchString('');\r\n }}\r\n >\r\n \r\n {\r\n setSearchString(e.target.value);\r\n }}\r\n />\r\n \r\n {\r\n if (!hasSearchValues) {\r\n addNewGroup(searchString);\r\n }\r\n }}\r\n >\r\n \r\n \r\n
\r\n \r\n {filteredGroupChoices && filteredGroupChoices.length > 0 ? (\r\n filteredGroupChoices.map((Group, i) => {\r\n return (\r\n
\r\n No Groups
\r\n ) : (\r\n Loading. . .
\r\n )}\r\n \r\n
,\r\n );\r\n return;\r\n }\r\n headerColumns.push(\r\n {headerFormatter(header)}
\r\n \r\n
,\r\n );\r\n });\r\n\r\n return \r\n
\r\n {label}
\r\n {headerColumns}
;\r\n };\r\n\r\n const renderTable = () => {\r\n const rows = [];\r\n const headerRow = processHeaderRow(tableColumnsToDisplay);\r\n\r\n tableDataToDisplay.forEach((dataRow, i) => {\r\n const newRow = [];\r\n\r\n tableColumnsToDisplay.forEach((header) => {\r\n const { dataKey, width, cellFormatter } = header;\r\n\r\n if (cellFormatter) {\r\n newRow.push(\r\n \r\n {cellFormatter(dataRow[dataKey], dataRow)}\r\n
,\r\n );\r\n } else {\r\n newRow.push(\r\n \r\n {dataRow[dataKey] || ''}\r\n
\r\n ,\r\n );\r\n }\r\n });\r\n\r\n rows.push(\r\n \r\n {rows.map((row, i) => {\r\n return row;\r\n })}\r\n {!rows || rows.length <= 0 ? (\r\n \r\n {noDataMessage || 'No Data'}\r\n
\r\n ) : null}\r\n \r\n \r\n \r\n \r\n );\r\n };\r\n\r\n return renderTable();\r\n};\r\n\r\nexport default RezRateTable;\r\n","const style = {\r\n simpleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n },\r\n simpleColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n },\r\n};\r\n\r\nexport default style;\r\n","import {\r\n faMagnifyingGlass,\r\n faSquare,\r\n faSquareCheck,\r\n faTimes,\r\n faTrashAlt,\r\n faUserPlus,\r\n} from '@fortawesome/free-solid-svg-icons';\r\nimport RezRateTable from 'Body/RezRATE/Common/RezRateTable/RezRateTable';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\n\r\nimport { Button, Input, InputGroup, InputGroupAddon, Modal, ModalBody, ModalHeader } from 'reactstrap';\r\nimport style from './PrescreenAssignments.style';\r\nimport { deleteData, fetchDataAgnostic, postDataAgnostic } from 'Services/dataApi';\r\nimport { DepartmentContext } from 'DepartmentWrapper';\r\nimport { formatBearerToken } from 'Common.functions';\r\nimport { useAuth0 } from 'auth0/reactAuth0Spa';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\n\r\nimport { useAlert } from 'react-alert';\r\nimport Swal from 'sweetalert2';\r\n\r\nlet typingTimeout = null;\r\nconst PrescreenAssignments = (props) => {\r\n const {\r\n pk_User,\r\n pk_Candidate,\r\n candidates,\r\n selectedUser = {},\r\n users,\r\n selectedCandidate = {},\r\n tableHeight = `calc(100vh - 540px)`,\r\n } = props;\r\n\r\n const [isFetchingPrescreenData, setIsFetchingPrescreenData] = useState(false);\r\n const [prescreenData, setPrescreenData] = useState([]);\r\n\r\n const [candidatesToDisplay, setCandidatesToDisplay] = useState([]);\r\n const [usersToDisplay, setUsersToDisplay] = useState([]);\r\n\r\n const [selectAllCandidatesForAssignment, setSelectAllCandidatesForAssignment] = useState(false);\r\n const [selectAllUsersForAssignment, setSelectAllUsersForAssignment] = useState(false);\r\n\r\n const [isAssigningCandidates, setIsAssigningCandidates] = useState(false);\r\n const [isAssigningUsers, setIsAssigningUsers] = useState(false);\r\n\r\n const [candidateSearchString, setCandidateSearchString] = useState('');\r\n const [userSearchString, setUserSearchString] = useState('');\r\n\r\n const [showCandidatesForAssignment, setShowCandidatesForAssignment] = useState(false);\r\n const [showUsersForAssignment, setShowUsersForAssignment] = useState(false);\r\n\r\n const [candidatesBeingDeleted, setCandidatesBeingDeleted] = useState([]);\r\n const [usersBeingDeleted, setUsersBeingDeleted] = useState([]);\r\n\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n const dContext = useContext(DepartmentContext);\r\n const alert = useAlert();\r\n\r\n const columnData = [\r\n {\r\n label: 'Last Name',\r\n dataKey: 'LastName',\r\n width: 200,\r\n },\r\n {\r\n label: 'First Name',\r\n dataKey: 'FirstName',\r\n width: 200,\r\n },\r\n {\r\n label: 'Status',\r\n dataKey: 'Status',\r\n width: 200,\r\n },\r\n {\r\n label: 'Action',\r\n dataKey: 'Action',\r\n width: 200,\r\n cellFormatter: (cellData, rowData) => {\r\n const { Status, pk_Candidate } = rowData;\r\n return (\r\n \r\n {Status === 'Pending' ? (\r\n {\r\n Swal.fire({\r\n text: 'Are you sure you want to unassign this candidate?',\r\n icon: 'warning',\r\n showCancelButton: true,\r\n cancelButtonColor: 'gray',\r\n confirmButtonColor: 'red',\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n removeAssignment({ pk_Candidate: rowData.pk_Candidate, pk_User: pk_User, type: 'evaluator' });\r\n }\r\n });\r\n }}\r\n >\r\n Unassign\r\n \r\n ) : null}\r\n
\r\n );\r\n },\r\n },\r\n ];\r\n\r\n // for when pk_Candidate != null, meaning for candidates so we show table of evaluator assignments\r\n const evaluatorsColumnData = [\r\n {\r\n label: 'Last Name',\r\n dataKey: 'UserLast',\r\n width: 200,\r\n },\r\n {\r\n label: 'First Name',\r\n dataKey: 'UserFirst',\r\n width: 200,\r\n },\r\n {\r\n label: 'Email',\r\n dataKey: 'UserEmail',\r\n width: 200,\r\n },\r\n {\r\n label: 'Status',\r\n dataKey: 'Status',\r\n width: 150,\r\n cellFormatter: (cellData, rowData) => {\r\n return {cellData || '----'}
;\r\n },\r\n },\r\n {\r\n label: 'Action',\r\n dataKey: 'Status',\r\n width: 200,\r\n cellFormatter: (cellData, rowData) => {\r\n return (\r\n \r\n {\r\n Swal.fire({\r\n text: 'Are you sure you want to unassign this screener?',\r\n icon: 'warning',\r\n showCancelButton: true,\r\n cancelButtonColor: 'gray',\r\n confirmButtonColor: 'red',\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n removeAssignment({ pk_User: rowData.pk_User, pk_Candidate: pk_Candidate, type: 'candidate' });\r\n }\r\n });\r\n }}\r\n >\r\n Remove\r\n \r\n
\r\n );\r\n },\r\n },\r\n ];\r\n\r\n const userName = `${selectedUser.UserLast || ''}${selectedUser.UserFirst ? `, ${selectedUser.UserFirst}` : ''}`;\r\n\r\n const candidateName = `${selectedCandidate.LastName || ''}${\r\n selectedCandidate.FirstName ? `, ${selectedCandidate.FirstName}` : ''\r\n }`;\r\n\r\n const candidatesForAssignmentColumns = [\r\n {\r\n label: 'select',\r\n width: 120,\r\n headerFormatter: () => {\r\n return (\r\n \r\n
\r\n \r\n );\r\n },\r\n cellFormatter: (cellData, rowData) => {\r\n const { isSelected, pk_Candidate, isAssignedAlready } = rowData;\r\n\r\n return (\r\n \r\n
\r\n \r\n );\r\n },\r\n cellFormatter: (cellData, rowData) => {\r\n const { isSelected, pk_User, isAssignedAlready } = rowData;\r\n\r\n return (\r\n \r\n {\r\n const { isSelected, pk_Candidate, isAssignedAlready } = rowData;\r\n if (!isAssignedAlready) {\r\n toggleSelectCandidateForAssignment(pk_Candidate);\r\n }\r\n }}\r\n rowStyle={(rowData) => {\r\n if (rowData.isAssignedAlready) {\r\n return { backgroundColor: '#CEFFDA' };\r\n }\r\n }}\r\n />\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {\r\n setCandidateSearchString('');\r\n document.getElementById(`searchCandidatesForAssignment`).value = '';\r\n }}\r\n >\r\n \r\n {\r\n if (typingTimeout) {\r\n clearTimeout(typingTimeout);\r\n }\r\n const newValue = e.target.value;\r\n typingTimeout = setTimeout(() => {\r\n setCandidateSearchString(newValue);\r\n }, 500);\r\n }}\r\n />\r\n \r\n \r\n \r\n \r\n
\r\n \r\n c.isSelected).length <= 0}\r\n color=\"success\"\r\n onClick={() => {\r\n assignCandidatesToUsers();\r\n }}\r\n >\r\n Assign to {userName}{' '}\r\n \r\n
\r\n \r\n {\r\n const { isSelected, pk_User, isAssignedAlready } = rowData;\r\n if (!isAssignedAlready) {\r\n toggleSelectUserForAssignment(pk_User);\r\n }\r\n }}\r\n rowStyle={(rowData) => {\r\n if (rowData.isAssignedAlready) {\r\n return { backgroundColor: '#CEFFDA' };\r\n }\r\n }}\r\n />\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {\r\n setUserSearchString('');\r\n document.getElementById(`searchUsersForAssignment`).value = '';\r\n }}\r\n >\r\n \r\n {\r\n if (typingTimeout) {\r\n clearTimeout(typingTimeout);\r\n }\r\n const newValue = e.target.value;\r\n typingTimeout = setTimeout(() => {\r\n setUserSearchString(newValue);\r\n }, 500);\r\n }}\r\n />\r\n \r\n \r\n \r\n \r\n
\r\n \r\n c.isSelected).length <= 0}\r\n color=\"success\"\r\n onClick={() => {\r\n assignCandidatesToUsers();\r\n }}\r\n >\r\n Assign to {candidateName}{' '}\r\n \r\n
\r\n \r\n {\r\n // const { isSelected } = rowData;\r\n // if (isSelected) {\r\n // return {\r\n // backgroundColor: '#ADD8E6',\r\n // };\r\n // } else {\r\n // return {};\r\n // }\r\n // }}\r\n />\r\n
\r\n \r\n {/* \r\n {\r\n if (pk_User && !pk_Candidate) {\r\n setShowCandidatesForAssignment(!showCandidatesForAssignment);\r\n } else {\r\n setShowUsersForAssignment(!showUsersForAssignment);\r\n }\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n {' '}\r\n Total Assigned: {prescreenData.length}\r\n
\r\n \r\n {' '}\r\n \r\n {pk_User ? renderCandidatesForAssignment() : pk_Candidate ? renderUsersForAssignment() : null}\r\n
\r\n \r\n \r\n
\r\n */}\r\n \r\n );\r\n};\r\n\r\nexport default PrescreenAssignments;\r\n\r\n// // for Candidate page - array of candidates with their evaluators\r\n// [\r\n// {\r\n// pk_Candidate: 1,\r\n// FirstName: 'Trowa',\r\n// LastName: 'Barton',\r\n// email: 'x@xmail.com',\r\n// AAMCID: '123456',\r\n// SFMatchID: '123456',\r\n// assignments: [\r\n// {\r\n// pk_Evaluator: 1,\r\n// UserFirst: 'Heero',\r\n// UserLast: 'Yuy',\r\n// status: 'Pending',\r\n// },\r\n// ],\r\n// },\r\n// ];\r\n\r\n// // for Team page - array of users with their candidates\r\n// [\r\n// {\r\n// pk_User: 1,\r\n// UserFirst: 'Heero',\r\n// UserLast: 'Yuy',\r\n// email: '123456',\r\n// assignments: [\r\n// {\r\n// pk_Candidate: 1,\r\n// FirstName: 'Trowa',\r\n// LastName: 'Barton',\r\n// email: 'x@xmail.com',\r\n// AAMCID: '123456',\r\n// SFMatchID: '123456',\r\n// status: 'Pending',\r\n// },\r\n// ],\r\n// },\r\n// ];\r\n","import {\r\n faArrowRight,\r\n faCalendarAlt,\r\n faCalendarXmark,\r\n faClipboardList,\r\n faEnvelope,\r\n faHandPaper,\r\n faPencilAlt,\r\n faTag,\r\n faThumbsDown,\r\n faTimes,\r\n faTimesCircle,\r\n faTrash,\r\n faUserCheck,\r\n faUserTimes,\r\n faUsers,\r\n} from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport moment from 'moment-timezone';\r\nimport React, { useEffect, useRef, useState, useContext } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport {\r\n Button,\r\n ButtonGroup,\r\n Col,\r\n Form,\r\n FormGroup,\r\n Input,\r\n Label,\r\n Popover,\r\n PopoverBody,\r\n PopoverHeader,\r\n Row,\r\n UncontrolledPopover,\r\n UncontrolledTooltip,\r\n} from 'reactstrap';\r\nimport { deleteData, fetchDataAgnostic, postDataAgnostic, putData } from '../../../../../Services/dataApi';\r\nimport TabContent from 'reactstrap/lib/TabContent';\r\nimport TabPane from 'reactstrap/lib/TabPane';\r\nimport { formatBearerToken, swalErrorMessage } from '../../../../../Common.functions';\r\nimport Swal from 'sweetalert2';\r\nimport { clone } from '../../../../../Services/schedule';\r\nimport UserPhoto from '../../../../DragAndDropFiles/UserPhoto/UserPhoto';\r\nimport UserPhotoTypes from '../../../../DragAndDropFiles/UserPhoto/UserPhotoTypes';\r\nimport ConfirmModal from '../../../Coordinator/Schedule/ConfirmModal';\r\nimport { useAuth0 } from '../../../../../auth0/reactAuth0Spa.js';\r\nimport TagPopover from '../TagPopover';\r\nimport AddDocuments from './AddDocuments/AddDocuments';\r\nimport { DepartmentContext } from '../../../../../DepartmentWrapper';\r\nimport AdditionalDetails from './AdditionalDetails';\r\nimport Communication from './Communication';\r\nimport ScoresAndAwards from './ScoresAndAwards';\r\nimport style from './style.js';\r\nimport Waitlist from './Waitlist/Waitlist';\r\nimport MarkPopover from './MarkPopover/MarkPopover';\r\nimport { CandidateStatusIcons } from 'enums';\r\nimport Loading from 'Body/Statuses/Loading';\r\nimport { useAlert } from 'react-alert';\r\nimport GroupsPopover from '../GroupsPopover/GroupsPopover';\r\nimport PrescreenAssignments from '../../AdminTeam/UserDetails/PrescreenAssignments/PrescreenAssignments';\r\n\r\nconst CandidateWidget = ({\r\n abortController,\r\n activeDepartment,\r\n dataTypes = [],\r\n dateFromURL,\r\n documentTypes,\r\n embedded,\r\n getCandidates,\r\n interviewDates = [],\r\n isGettingCandidateDetails,\r\n isInitializedCandidates,\r\n isSaving,\r\n isSingleCandidate,\r\n isUpdatingCandidateList,\r\n mainChanges,\r\n match,\r\n replacePhotoinCandidatesArray,\r\n resetFunctions,\r\n saveResults,\r\n selectedCandidate,\r\n setDocumentTypes,\r\n setIsGettingCandidateDetails,\r\n setIsSaving,\r\n setMainChanges,\r\n setSelectedCandidate,\r\n token,\r\n users,\r\n}) => {\r\n const [data, setData] = useState();\r\n const [changes, setChanges] = useState({});\r\n const [tabToGo, setTabToGo] = useState(1);\r\n const dataRef = useRef();\r\n\r\n const [activeTab, setActiveTab] = useState('1');\r\n const [showInterviewDatePopover, setShowInterviewDatePopover] = useState(false);\r\n const [selectedInterviewDate, setSelectedInterviewDate] = useState(null);\r\n\r\n const [showOverBookedAlert, setShowOverBookedAlert] = useState();\r\n const [showAlreadyScheduledAlert, setShowAlreadyScheduledAlert] = useState();\r\n const [showTagsPopover, setShowTagsPopover] = useState();\r\n const [showGroupsPopover, setShowGroupsPopover] = useState();\r\n\r\n const [showTagLimitAlert, setShowTagLimitAlert] = useState(false);\r\n\r\n const [typingTimeout, setTypingTimeout] = useState(0);\r\n const [showStatusPopover, setShowStatusPopover] = useState(false);\r\n const [overbookCandidate, setOverbookCandidate] = useState(false);\r\n const [oldSelectedCandidate, setOldSelectedCandidate] = useState();\r\n const [detailedCandidate, setDetailedCandidate] = useState(selectedCandidate || {});\r\n\r\n const [isUpdatingStatus, setIsUpdatingStatus] = useState(false);\r\n\r\n const selectedCandidateRef = useRef();\r\n\r\n const alert = useAlert();\r\n const { getTokenSilently, loginWithRedirect } = useAuth0();\r\n const history = useHistory();\r\n const dContext = useContext(DepartmentContext);\r\n const statusOptions = { '-1': 'None', '3': 'Prescreen', '4': 'To Invite', '5': 'Rejected', '8': 'Declined' };\r\n const { location } = history;\r\n const { pathname } = location;\r\n\r\n const { PhotoUrl, FirstName, LastName, HasDeclinedInterview, pk_InterviewDate } = detailedCandidate || {};\r\n\r\n const { pk_Candidate, DateOfInterview } = selectedCandidate || {};\r\n\r\n const hasChanges = Object.values(changes).includes(true);\r\n const selectedDate = interviewDates.find((date) => {\r\n return date.pk_InterviewDate == pk_InterviewDate;\r\n });\r\n\r\n const { CannotBeUnlocked, StartTime, pk_Tag } = selectedDate || {};\r\n const selectedDateHasTag = pk_Tag;\r\n const dateInThisTimeZone = moment.tz(`${DateOfInterview} ${StartTime}`, moment.tz.guess());\r\n\r\n // const dateToCompare = moment.tz(`${dateInThisTimeZone.format('MMM DD, YYYY')} 23:59`, null);\r\n\r\n const isPastInterviewDate = !dateInThisTimeZone.isSameOrAfter(moment(), 'd');\r\n\r\n const dateIsLocked = isPastInterviewDate || CannotBeUnlocked;\r\n const { department } = dContext || {};\r\n const { EnableGroups } = department || {};\r\n\r\n // Import - 2\r\n // Prescreen - 3\r\n // Invite - 4\r\n // Reject - 5\r\n // Decline - 8\r\n\r\n useEffect(() => {\r\n if (data) {\r\n dataRef.current = data;\r\n }\r\n }, [data]);\r\n\r\n useEffect(() => {\r\n if (changes) {\r\n const newHasChange = Object.values(changes).includes(true);\r\n if (mainChanges.candidateDetails != newHasChange) {\r\n setMainChanges({ candidateDetails: newHasChange });\r\n }\r\n }\r\n }, [changes]);\r\n\r\n useEffect(() => {\r\n if (mainChanges && !mainChanges.candidateDetails) {\r\n setChanges({});\r\n }\r\n }, [mainChanges]);\r\n\r\n useEffect(() => {\r\n updateTabFromURL();\r\n }, [pathname]);\r\n\r\n useEffect(() => {\r\n setData(clone(selectedCandidate));\r\n setShowStatusPopover(false);\r\n\r\n if (\r\n selectedCandidate &&\r\n (!selectedCandidateRef.current || selectedCandidateRef.current.pk_Candidate != selectedCandidate.pk_Candidate)\r\n ) {\r\n selectedCandidateRef.current = selectedCandidate;\r\n\r\n setDetailedCandidate(selectedCandidate);\r\n getCandidateDetails(selectedCandidate);\r\n } else {\r\n }\r\n }, [selectedCandidate]);\r\n\r\n const getCandidateDetails = (candidate, options) => {\r\n const { callback } = options || {};\r\n\r\n if (candidate) {\r\n if (abortController && abortController.current) {\r\n abortController.current.abort();\r\n }\r\n\r\n abortController.current = new AbortController();\r\n\r\n setIsGettingCandidateDetails(true);\r\n const { pk_Candidate } = candidate;\r\n getTokenSilently()\r\n .then((token) => {\r\n fetchDataAgnostic(\r\n 'department/candidate',\r\n { pk_Candidate, pk_Department: dContext.department.pk_Department },\r\n formatBearerToken(token),\r\n {\r\n abortController: abortController.current,\r\n callback: (result) => {\r\n setIsGettingCandidateDetails(false);\r\n\r\n if (result.data && result.data.error) {\r\n swalErrorMessage();\r\n return;\r\n }\r\n if (dateFromURL.current != null) {\r\n dateFromURL.current = null;\r\n // Stops selecting candidate that is not the first in list filtered by date\r\n // setSelectedCandidate(null);\r\n return;\r\n }\r\n\r\n const newCandidateDetails = result.data;\r\n const newSelectedCandidate = { ...newCandidateDetails };\r\n newSelectedCandidate.DateOfInterview = candidate.DateOfInterview;\r\n\r\n if (\r\n selectedCandidateRef &&\r\n selectedCandidateRef.current.pk_Candidate == newSelectedCandidate.pk_Candidate\r\n ) {\r\n setOldSelectedCandidate(newSelectedCandidate);\r\n setDetailedCandidate(newSelectedCandidate);\r\n if (callback) {\r\n callback(newSelectedCandidate);\r\n }\r\n } else {\r\n // console.log(\r\n // `loading for ${newCandidateDetails.FirstName} ${newCandidateDetails.LastName} cancelled.`,\r\n // );\r\n }\r\n },\r\n },\r\n );\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n console.log('getCandidateDetails err: ', err);\r\n });\r\n } else {\r\n setIsGettingCandidateDetails(false);\r\n // setSelectedCandidate(null);\r\n }\r\n };\r\n\r\n const updateTabFromURL = () => {\r\n const tabURLs = {\r\n dataFields: 1,\r\n notes: 2,\r\n documents: 3,\r\n waitlist: 4,\r\n communication: 5,\r\n };\r\n Object.keys(tabURLs).forEach((key) => {\r\n if (pathname.indexOf(key) >= 0 && activeTab != tabURLs[key]) {\r\n setActiveTab(tabURLs[key].toString());\r\n }\r\n });\r\n };\r\n\r\n const unscheduleCandidate = (decline = false, callback) => {\r\n return getTokenSilently()\r\n .then((token) => {\r\n return postDataAgnostic(\r\n 'department/season/candidates/unschedule',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n pk_Season: dContext.season.pk_Season,\r\n decline,\r\n },\r\n { candidateIds: [selectedCandidate.pk_Candidate] },\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n getCandidates(null, { forcedSelectedCandidateId: selectedCandidate.pk_Candidate });\r\n getCandidateDetails(selectedCandidate);\r\n if (callback) {\r\n callback();\r\n }\r\n // need to set the candidate as unregistered\r\n // setSelectedCandidate((prevState) => {\r\n // // eslint-disable-next-line\r\n // let clone = structuredClone(prevState);\r\n // clone.DateOfInterview = null;\r\n // clone.Label = null;\r\n // return clone;\r\n // });\r\n })\r\n .catch((err) => {\r\n if (callback) {\r\n callback(err);\r\n }\r\n return Swal.fire('Something went wrong...', 'Please try again later or contact support', 'error');\r\n });\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n /**\r\n *\r\n * @param {string} key optional for only sendign a single field to update\r\n * @param {object} forcedData optional for forced updates. func will look to this object instead of the global one.\r\n */\r\n const saveChanges = (keyToSubmit, forcedData, overbook) => {\r\n const validFields = [\r\n 'DateOfInterview',\r\n 'FirstName',\r\n 'LastName',\r\n 'MiddleName',\r\n 'PreferredName',\r\n 'HigherEducationInstitution',\r\n 'HigherEducationMajor',\r\n 'Email',\r\n 'PreferredPhone',\r\n 'NRMPID',\r\n 'AAMCID',\r\n 'SFMatchID',\r\n 'pk_InterviewDate',\r\n ];\r\n\r\n const allowOverbook = overbook || overbookCandidate;\r\n const newData = forcedData ? forcedData : clone(dataRef.current);\r\n\r\n Object.keys(dataRef.current).forEach((key) => {\r\n if ((keyToSubmit == null && !validFields.includes(key)) || key != keyToSubmit) {\r\n delete newData[key];\r\n }\r\n });\r\n\r\n if (selectedCandidate && selectedCandidate.pk_Candidate) {\r\n saveResults({\r\n candidatesToUpdate: [data.pk_Candidate],\r\n fieldsToUpdate: newData,\r\n allowOverbook,\r\n forcedSelectedCandidateId: data.pk_Candidate,\r\n callback: () => {\r\n getCandidateDetails(selectedCandidate);\r\n },\r\n });\r\n } else {\r\n saveResults({\r\n candidatesToUpdate: [selectedCandidate.pk_Candidate],\r\n fieldsToUpdate: data,\r\n allowOverbook,\r\n callback: () => {\r\n getCandidateDetails(selectedCandidate);\r\n },\r\n });\r\n }\r\n };\r\n\r\n const lockInterviewDate = (pk_InterviewDate, callback) => {\r\n // Need to put Tag Filter here. If date has Tag Filter, Tag Filter should be passed ALWAYS, otherwise,\r\n // back end would strip it.\r\n setIsSaving(true);\r\n getTokenSilently()\r\n .then((token) => {\r\n putData(\r\n 'department/interviewDate/putEntry',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n pk_InterviewDate: pk_InterviewDate,\r\n pk_Season: dContext.season.pk_Season,\r\n },\r\n { entry: { EnableLockedStatus: true } },\r\n formatBearerToken(token),\r\n )\r\n .then((result) => {\r\n alert.success('Locked Date!');\r\n setIsSaving(false);\r\n callback();\r\n })\r\n .catch((err) => {\r\n alert.error('Failed to lock Date!');\r\n callback(true);\r\n setIsSaving(false);\r\n });\r\n })\r\n .catch((err) => {\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const handleChange = (key, value, overbook) => {\r\n const newData = clone(data);\r\n newData[key] = value;\r\n\r\n if (key === 'pk_InterviewDate') {\r\n saveChanges(key, clone(newData), overbook);\r\n // setData(newData);\r\n return;\r\n }\r\n if (typingTimeout) {\r\n clearTimeout(typingTimeout);\r\n }\r\n\r\n setData(newData);\r\n setTypingTimeout(\r\n setTimeout(() => {\r\n saveChanges(key, null, overbook);\r\n }, 1000),\r\n );\r\n };\r\n\r\n const deleteCandidatePhoto = () => {\r\n getTokenSilently()\r\n .then((token) => {\r\n deleteData(\r\n 'files/admin/candidate/photo',\r\n {\r\n pk_Department: dContext.department.pk_Department,\r\n pk_Season: dContext.season.pk_Season,\r\n pk_Candidate: selectedCandidate.pk_Candidate,\r\n },\r\n {},\r\n formatBearerToken(token),\r\n )\r\n .then((res) => {\r\n alert.success('Successfully deleted photo');\r\n\r\n getCandidateDetails(detailedCandidate, {\r\n callback: () => {\r\n replacePhotoinCandidatesArray(detailedCandidate.pk_Candidate, null);\r\n },\r\n });\r\n })\r\n .catch((err) => {\r\n alert.error('Failed to delete photo.');\r\n });\r\n })\r\n .catch((err) => {\r\n alert.error('Failed to delete photo');\r\n if (err.message === 'Login required') {\r\n loginWithRedirect();\r\n }\r\n });\r\n };\r\n\r\n const renderOverBookedAlert = () => {\r\n const { DateOfInterview, CandidateRegistrationLimit = 0, CountOfCandidates = 0, Label } =\r\n selectedInterviewDate || {};\r\n const message = `\"${moment.tz(DateOfInterview, null).format('dddd, MMM. DD, YYYY')}\" ${\r\n Label ? `(${Label})` : ''\r\n } is fully booked (${CountOfCandidates || 0} of ${CandidateRegistrationLimit || 0} spots filled). Proceed anyway?`;\r\n\r\n return (\r\n \r\n {`${moment.tz(selectedCandidate.DateOfInterview, null).format('MMM. DD, YYYY')} ${\r\n selectedCandidate.Label ? `(${selectedCandidate.Label})` : ''\r\n }`}\r\n {' '}\r\n
\r\n \r\n
\r\n {' '}\r\n {`${moment.tz(selectedCandidate.DateOfInterview, null).format('MMM. DD, YYYY')} ${\r\n selectedCandidate.Label ? `(${selectedCandidate.Label})` : ''\r\n }`}{' '}\r\n will be LOCKED to prevent automated slotting of additional candidates.\r\n
\r\n \r\n ) : (\r\n ''\r\n );\r\n // selectedCandidate\r\n // ? `${selectedCandidate.LastName} is already assigned to an interview date - ${moment\r\n // .tz(selectedCandidate.DateOfInterview, null)\r\n // .format('dddd, MMM. DD, YYYY')}. Schedule for ${selectedCandidate.CountOfScheduleInterviews || 0} interview${\r\n // selectedCandidate.CountOfScheduleInterviews > 1 ? `s` : ''\r\n // }. Do you want to reassign anyway?`\r\n // : '';\r\n return (\r\n Lock and Move
\r\n \r\n \r\n }\r\n />\r\n );\r\n };\r\n\r\n const renderDatePickerPopover = () => {\r\n return (\r\n \r\n
\r\n Available Interview Sessions
\r\n \r\n {\r\n e.stopPropagation();\r\n setShowInterviewDatePopover(false);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n {/* \r\n {interviewDates.map((interviewDate, i) => {\r\n const backgroundColor =\r\n selectedCandidate && interviewDate.pk_InterviewDate == selectedCandidate.pk_InterviewDate\r\n ? '#d9f5ff'\r\n : i % 2 == 0\r\n ? null\r\n : '#c7cbd1';\r\n const { CandidateRegistrationLimit = 0, CountOfCandidates = 0 } = interviewDate || {};\r\n const { DateOfInterview } = selectedCandidate || {};\r\n\r\n return (\r\n {\r\n const { department = {} } = dContext || {};\r\n const { EnableTagFiltering } = department;\r\n // if (!dateIsLocked && selectedDateHasTag && EnableTagFiltering) {\r\n // setShowTagLimitAlert(true);\r\n // return;\r\n // }\r\n\r\n if (interviewDate.pk_InterviewDate == selectedCandidate.pk_InterviewDate) {\r\n return;\r\n }\r\n setSelectedInterviewDate(interviewDate);\r\n if (CountOfCandidates >= CandidateRegistrationLimit) {\r\n setShowOverBookedAlert(true);\r\n } else if (DateOfInterview != null) {\r\n setShowAlreadyScheduledAlert(true);\r\n } else {\r\n handleChange('pk_InterviewDate', interviewDate.pk_InterviewDate);\r\n }\r\n\r\n setShowInterviewDatePopover(false);\r\n }}\r\n >\r\n
\r\n );\r\n })}\r\n \r\n {`${moment\r\n .tz(interviewDate.DateOfInterview, null)\r\n .format('dddd, MMM. DD, YYYY')} (${CountOfCandidates || 0}/${CandidateRegistrationLimit || 0})`}\r\n
\r\n {interviewDate.Label}
\r\n \r\n \r\n
*/}\r\n \r\n
\r\n \r\n \r\n {\r\n const { FirstName, LastName, MiddleName } = selectedCandidate || {};\r\n\r\n Swal.fire({\r\n title: `Unregister ${FirstName || ''} ${LastName || ''}?`,\r\n text: `This will UNREGISTER the candidate, but they could be registered for another session if automation is enabled.`,\r\n showCancelButton: true,\r\n cancelButtonColor: 'gray',\r\n showConfirmButton: true,\r\n confirmButtonColor: 'red',\r\n confirmButtonText: `Unregister`,\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n unscheduleCandidate();\r\n }\r\n });\r\n\r\n // Swal.fire({\r\n // title: `Unregister ${FirstName || ''} ${LastName || ''}?`,\r\n // text: `This will UNREGISTER the candidate, but they could be registered for another session if automation is enabled.`,\r\n // type: 'warning',\r\n // showCancelButton: true,\r\n // confirmButtonColor: 'red',\r\n // confirmButtonText: `Unregister`,\r\n // }).then((result) => {\r\n // if (result.value) {\r\n // unscheduleCandidate();\r\n // }\r\n // });\r\n }}\r\n color=\"danger\"\r\n style={{ ...style.genButton, marginTop: 5 }}\r\n disabled={\r\n selectedCandidate == null ||\r\n selectedCandidate.DateOfInterview == null ||\r\n isSaving ||\r\n isGettingCandidateDetails\r\n }\r\n >\r\n {\r\n const { FirstName, LastName } = selectedCandidate || {};\r\n Swal.fire({\r\n title: `${FirstName || ''} ${LastName || ''} has Declined?`,\r\n text: `This will prevent the candidate from slotting onto another session.`,\r\n showCancelButton: true,\r\n cancelButtonColor: 'gray',\r\n showConfirmButton: true,\r\n confirmButtonColor: 'red',\r\n confirmButtonText: `Decline`,\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n unscheduleCandidate(true);\r\n }\r\n });\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n Unregister
\r\n \r\n
\r\n \r\n \r\n
\r\n Declined All Interviews
\r\n \r\n
\r\n Tags
\r\n \r\n {\r\n setShowTagsPopover(false);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n Groups
\r\n \r\n {\r\n setShowGroupsPopover(false);\r\n }}\r\n />\r\n
\r\n