\r\n {children}\r\n
\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nModal.propTypes = {\r\n className: PropTypes.string, //exclude from backend\r\n children: PropTypes.node, //exclude from backend\r\n isOpen: PropTypes.bool, //exclude from backend\r\n onClose: PropTypes.func, //exclude from backend\r\n onAfterOpen: PropTypes.func, //exclude from backend\r\n themes: arrayOfObjectValues(themes), //exclude from backend\r\n overlayThemes: arrayOfObjectValues(overlayThemes), //exclude from backend\r\n animation: arrayOfObjectValues(animationThemes), //exclude from backend\r\n isDisabled: PropTypes.bool, //exclude from backend,\r\n closeButtonLabel: PropTypes.string, //exclude from backend,\r\n ariaOptions: PropTypes.shape({\r\n //exclude from backend\r\n labelledby: PropTypes.string,\r\n describedby: PropTypes.string,\r\n modal: PropTypes.bool\r\n })\r\n};\r\n\r\nModal.defaultProps = {};\r\n\r\nModal.themes = themes;\r\nModal.overlayThemes = overlayThemes;\r\nModal.animationThemes = animationThemes;\r\n\r\nexport default Modal;\r\n","import { useMemo } from 'react';\r\n\r\nexport default function useLocaleDate(date) {\r\n return useMemo(() => {\r\n const d = new Date(date).toLocaleDateString('no-NO', {\r\n year: 'numeric',\r\n month: '2-digit',\r\n day: '2-digit'\r\n });\r\n const t = new Date(date).toLocaleTimeString('no-NO');\r\n return { formattedDate: d, formattedTime: t };\r\n }, [date]);\r\n}\r\n","export const hoverColorsLight = [\r\n '#96D8B6', // Lighter green (rgb(150, 216, 182))\r\n '#86A1B6', // Lighter slate (rgb(134, 161, 182))\r\n '#F6C3AE', // Lighter peach (rgb(246, 195, 174))\r\n '#B2B5D8', // Lighter azure (rgb(178, 181, 216))\r\n '#D8BFA0' // Lighter eggshell (rgb(216, 191, 160))\r\n];\r\n\r\nexport default {\r\n green: '#7DBF9D',\r\n slate: '#6D889D',\r\n peach: '#DDAA95',\r\n azure: '#999CBF',\r\n eggshell: '#BFA687'\r\n};\r\n","import React from 'react';\r\nimport cn from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Icon from '../icon';\r\nimport SlideInChildren from 'components/slide-in-children';\r\nimport useLocaleDate from '../../hooks/use-locale-date';\r\nimport colors from 'js/kartlegging-colors';\r\n\r\nconst HistoryEntry = ({ id, date, name, changeList, ferdighetsomradeList }) => {\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n const { formattedDate } = useLocaleDate(date);\r\n\r\n const elementId = `info-container-${id}`;\r\n\r\n return (\r\n \r\n setIsOpen(!isOpen)}\r\n >\r\n \r\n {formattedDate}\r\n {name}\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nHistoryEntry.propTypes = {\r\n id: PropTypes.string, //exclude from backend\r\n date: PropTypes.string.isRequired,\r\n name: PropTypes.string.isRequired,\r\n changeList: PropTypes.arrayOf(PropTypes.string),\r\n ferdighetsomradeList: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n name: PropTypes.string,\r\n color: PropTypes.oneOf(Object.keys(colors)),\r\n mestringsnivaList: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n name: PropTypes.string,\r\n utsagnList: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n id: PropTypes.string,\r\n changeInfo: PropTypes.string\r\n })\r\n )\r\n })\r\n )\r\n })\r\n )\r\n};\r\n\r\nHistoryEntry.defaultProps = {\r\n changeList: []\r\n};\r\n\r\nexport default HistoryEntry;\r\n","import React, { useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nconst LoadingSpinner = ({ className, large, shouldTakeOverScreen }) => {\r\n useEffect(() => {\r\n if (shouldTakeOverScreen) {\r\n document.body.style.overflow = 'hidden';\r\n }\r\n\r\n return () => {\r\n if (shouldTakeOverScreen) {\r\n document.body.style.overflow = '';\r\n }\r\n };\r\n }, []);\r\n\r\n return (\r\n \r\n {!!changeList?.length && (\r\n
\r\n - \r\n {changeList.map((change, index) => {\r\n return (\r\n
- \r\n {ferdighetsomradeList.map(\r\n ({ name, color, mestringsnivaList }) => (\r\n
- \r\n
- \r\n {mestringsnivaList?.map(({ name, utsagnList }) => (\r\n
- \r\n {name}\r\n
- \r\n {utsagnList?.map(({ id, changeInfo }) => (\r\n
\r\n ))}\r\n
\r\n ))}\r\n - \r\n {name}\r\n
\r\n {title && (\r\n \r\n {overallTabText && (\r\n setCurrentTab(tabs.overall)}\r\n tabIndex={currentTab === tabs.overall ? 0 : -1}\r\n >\r\n {overallTabText}\r\n \r\n )}\r\n {kartleggingTabText && (\r\n setCurrentTab(tabs.kartlegging)}\r\n tabIndex={currentTab === tabs.kartlegging ? 0 : -1}\r\n >\r\n {kartleggingTabText}\r\n \r\n )}\r\n
\r\n {currentTab === tabs.overall && (\r\n \r\n {title}\r\n
\r\n )}\r\n {htmlLead && (\r\n\r\n
\r\n );\r\n};\r\n\r\nCheckbox.propTypes = {\r\n id: PropTypes.string.isRequired,\r\n label: PropTypes.string.isRequired,\r\n value: PropTypes.bool.isRequired,\r\n checked: PropTypes.bool,\r\n isDisabled: PropTypes.bool,\r\n onChange: PropTypes.func,\r\n isUncontrolledInput: PropTypes.bool,\r\n required: PropTypes.bool // exclude from backend\r\n};\r\n\r\nCheckbox.defaultProps = {\r\n onChange: () => {},\r\n checked: false\r\n};\r\n\r\nexport default Checkbox;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Modal from '../modal';\r\nimport LoadingSpinner from '../../loading-spinner';\r\nimport Clicker from '../../clicker';\r\nimport Checkbox from '../../checkbox/checkbox';\r\n\r\nconst ConfirmationModal = ({\r\n isOpen,\r\n onClose,\r\n onConfirm,\r\n isDisabled,\r\n closeModalHiddenText,\r\n checkbox,\r\n confirmText,\r\n cancelText,\r\n isLoading,\r\n title,\r\n lead\r\n}) => {\r\n const [isChecked, setIsChecked] = useState(false);\r\n\r\n const handleCheckBoxChange = () => {\r\n setIsChecked(prev => !prev);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nConfirmationModal.propTypes = {\r\n isDisabled: PropTypes.bool, //exclude from backend\r\n onClose: PropTypes.func, //exclude from backend\r\n onConfirm: PropTypes.func, //exclude from backend\r\n isOpen: PropTypes.bool, //exclude from backend\r\n isLoading: PropTypes.bool, //exclude from backend\r\n closeModalHiddenText: PropTypes.string,\r\n title: PropTypes.string,\r\n lead: PropTypes.string,\r\n cancelText: PropTypes.string,\r\n confirmText: PropTypes.string,\r\n checkbox: PropTypes.exact(Checkbox.propTypes)\r\n};\r\n\r\nConfirmationModal.defaultProps = {\r\n onConfirm: () => {},\r\n onClose: () => {}\r\n};\r\n\r\nexport default ConfirmationModal;\r\n","let sanityClient = () => {};\r\nlet projectId = '';\r\nlet dataset = '';\r\nlet apiVersion = '2021-03-25';\r\nlet token = '';\r\n\r\nif (typeof window !== 'undefined') {\r\n sanityClient = require('@sanity/client');\r\n\r\n projectId =\r\n sessionStorage.getItem('projectId') ||\r\n process.env.SANITY_PROJECT_ID ||\r\n projectId;\r\n dataset =\r\n sessionStorage.getItem('dataset') || process.env.SANITY_DATASET || dataset;\r\n token = sessionStorage.getItem('token') || process.env.SANITY_TOKEN || token;\r\n apiVersion =\r\n sessionStorage.getItem('apiVersion') ||\r\n process.env.SANITY_API_VERSION ||\r\n apiVersion;\r\n}\r\n\r\nexport default sanityClient({\r\n projectId,\r\n dataset,\r\n token,\r\n apiVersion,\r\n useCdn: true\r\n});\r\n","import React from 'react';\r\nimport imageUrlBuilder from '@sanity/image-url';\r\nimport sanityClient from '../../../sanityClient';\r\n\r\nconst builder = imageUrlBuilder(sanityClient);\r\nexport function urlFor(source) {\r\n return builder.image(source);\r\n}\r\n\r\nexport const serializers = {\r\n types: {\r\n value: props => {\r\n const { style = 'normal' } = props.value;\r\n\r\n if (/^h\\d/.test(style)) {\r\n const level = style.replace(/[^\\d]/g, '');\r\n return React.createElement(\r\n style,\r\n { className: `heading-${level}` },\r\n props.children\r\n );\r\n }\r\n\r\n if (style === 'blockquote') {\r\n return \r\n {title &&
\r\n {title}
}\r\n {lead &&{lead}
}\r\n {checkbox && (\r\n\r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n {isLoading &&
\r\n {onClose && cancelText && (\r\n \r\n
\r\n )}\r\n {onConfirm && confirmText && (\r\n \r\n
\r\n )}\r\n - {props.children};\r\n }\r\n },\r\n imageObject: props => (\r\n
\r\n {props.value.code}\r\n \r\n )\r\n },\r\n\r\n list: props =>\r\n props.type === 'bullet' ? (\r\n - {props.children}
- {props.children}
{props.children},\r\n link: ({ value, children }) => {\r\n // Read https://css-tricks.com/use-target_blank/\r\n const { blank, href } = value;\r\n return blank ? (\r\n \r\n {children}\r\n \r\n ) : (\r\n {children}\r\n );\r\n },\r\n internalLink: ({ mark, children }) => {\r\n const { slug = {} } = mark;\r\n const href = `/${slug.current}`;\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n }\r\n }\r\n};\r\n","import React, { Fragment } from 'react';\r\nimport cn from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Icon from '../../../icon';\r\nimport SlideInChildren from 'components/slide-in-children';\r\nimport { PortableText } from '@portabletext/react';\r\nimport { serializers } from '../serializers';\r\n\r\nconst SanityModalEntry = ({ id, title, brodtekst, underChapters }) => {\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n const elementId = `info-container-${id}`;\r\n\r\n return (\r\n \r\n \r\n \r\n )\r\n )}\r\n
\r\n {ucTitle}
\r\n {ucBrodtekst && (\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nSanityContentModal.propTypes = {\r\n isDisabled: PropTypes.bool, //exclude from backend\r\n onClose: PropTypes.func, //exclude from backend\r\n isOpen: PropTypes.bool, //exclude from backend\r\n id: PropTypes.string, // Required if you want the toggleOnLoadEndpoint to work\r\n proceedText: PropTypes.string,\r\n closeModalHiddenText: PropTypes.string,\r\n sanityTags: PropTypes.exact({\r\n kategori: PropTypes.string,\r\n trinn: PropTypes.string.isRequired,\r\n tekstType: PropTypes.string.isRequired,\r\n sprak: PropTypes.string.isRequired\r\n })\r\n};\r\n\r\nSanityContentModal.defaultProps = {\r\n onConfirm: () => {},\r\n onClose: () => {},\r\n entries: []\r\n};\r\n\r\nexport default SanityContentModal;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Modal from '../modal';\r\nimport Clicker from '../../clicker';\r\n\r\nconst SimpleTextModal = ({\r\n isOpen,\r\n onClose,\r\n isDisabled,\r\n closeModalHiddenText,\r\n cancelButtonText,\r\n title,\r\n lead\r\n}) => {\r\n return (\r\n \r\n {saniyError &&
\r\n {saniyError}
}\r\n {sanityData?.map(({ general, chapters }, i) => {\r\n return (\r\n\r\n
\r\n );\r\n })}\r\n \r\n
\r\n \r\n {general?.title}
\r\n {general?.brodtekst && (\r\n\r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nSimpleTextModal.propTypes = {\r\n isDisabled: PropTypes.bool, //exclude from backend\r\n onClose: PropTypes.func, //exclude from backend\r\n isOpen: PropTypes.bool, //exclude from backend\r\n closeModalHiddenText: PropTypes.string,\r\n title: PropTypes.string,\r\n lead: PropTypes.string,\r\n cancelButtonText: PropTypes.string\r\n};\r\n\r\nSimpleTextModal.defaultProps = {\r\n onClose: () => {}\r\n};\r\n\r\nexport default SimpleTextModal;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport useClickOutside from '../../hooks/use-click-outside';\r\nimport cn from 'classnames';\r\n\r\nconst DropdownBubble = ({\r\n children,\r\n isOpen,\r\n className,\r\n shouldArrowHoverChange,\r\n shouldUseMobileModal,\r\n handleClose,\r\n rightMargin\r\n}) => {\r\n const dropdownBubbleRef = React.useRef();\r\n const mobileModalRef = React.useRef();\r\n useClickOutside(dropdownBubbleRef, handleClose, [mobileModalRef]);\r\n\r\n return (\r\n \r\n {title &&
\r\n {title}
}\r\n {lead && (\r\n\r\n
\r\n \r\n {onClose && cancelButtonText && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n {isControlledInput ? (\r\n
\r\n );\r\n};\r\n\r\nRadio.propTypes = {\r\n className: PropTypes.string,\r\n isInitiallySelected: PropTypes.bool,\r\n label: PropTypes.string.isRequired,\r\n name: PropTypes.string,\r\n onChange: PropTypes.func,\r\n disabled: PropTypes.bool,\r\n value: PropTypes.string.isRequired,\r\n themes: arrayOfObjectValues(themes),\r\n isControlledInput: PropTypes.bool\r\n};\r\n\r\nRadio.defaultProps = {\r\n themes: [],\r\n onChange: () => {}\r\n};\r\n\r\nRadio.propTypesMeta = {\r\n className: 'exclude',\r\n namePostfix: 'exclude',\r\n themes: 'exclude',\r\n disabled: 'exclude',\r\n isControlledInput: 'exclude'\r\n};\r\n\r\nRadio.getKey = props => props.value;\r\n\r\nRadio.themes = themes;\r\n\r\nexport default Radio;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Radio from 'components/radio/radio';\r\n\r\nimport cn from 'classnames';\r\nimport arrayOfObjectValues from 'js/array-of-object-values';\r\n\r\nconst themes = {};\r\n\r\nconst RadioGroup = ({\r\n className,\r\n title,\r\n items,\r\n name,\r\n selectedItem,\r\n onChange,\r\n themes,\r\n isControlledInput\r\n}) => {\r\n return (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nRadioGroup.propTypesMeta = {\r\n className: 'exclude',\r\n themes: 'exclude',\r\n isControlledInput: 'exclude',\r\n onChange: 'exclude'\r\n};\r\n\r\nRadioGroup.propTypes = {\r\n className: PropTypes.string,\r\n themes: arrayOfObjectValues(themes),\r\n isControlledInput: PropTypes.bool,\r\n onChange: PropTypes.func,\r\n title: PropTypes.string,\r\n name: PropTypes.string,\r\n selectedItem: PropTypes.string,\r\n items: PropTypes.arrayOf(PropTypes.exact(Radio.propTypes))\r\n};\r\n\r\nRadioGroup.themes = themes;\r\n\r\nexport default RadioGroup;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Clicker from '../clicker';\r\nimport Checkbox from 'components/checkbox/checkbox';\r\nimport RadioGroup from 'components/radio-group/radio-group';\r\nimport LoadingSpinner from 'components/loading-spinner';\r\n\r\nconst DownloadSamtale = ({\r\n endpoint,\r\n radioGroup,\r\n checkbox,\r\n buttonText,\r\n startDownload,\r\n errorMessage\r\n}) => {\r\n const [isConfirmed, setIsConfirmed] = useState(false);\r\n const [formIsInvalid, setFormIsInvalid] = useState(false);\r\n\r\n const handleOnCheck = isChecked => {\r\n setIsConfirmed(isChecked);\r\n setFormIsInvalid(false);\r\n };\r\n\r\n const handleSubmit = event => {\r\n event.preventDefault();\r\n if (!event.currentTarget.checkValidity()) {\r\n setFormIsInvalid(true);\r\n document.getElementById('download-samtale-report-checkbox').focus();\r\n return;\r\n }\r\n const formData = new FormData(event.currentTarget);\r\n\r\n startDownload(endpoint, {\r\n body: JSON.stringify({\r\n [radioGroup.name]: formData.get(radioGroup.name)\r\n })\r\n });\r\n };\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nDownloadSamtale.propTypes = {\r\n endpoint: PropTypes.string,\r\n radioGroup: PropTypes.exact(RadioGroup.propTypes),\r\n checkbox: PropTypes.exact(Checkbox.propTypes),\r\n buttonText: PropTypes.string,\r\n startDownload: PropTypes.func,\r\n errorMessage: PropTypes.string\r\n};\r\n\r\nexport default DownloadSamtale;\r\n","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Modal from '../modal';\r\nimport LoadingSpinner from '../../loading-spinner';\r\nimport Icon from '../../icon';\r\nimport DownloadPDFButton from 'components/action-bar/download-pdf-button';\r\n\r\nconst DownloadPDFModal = ({\r\n isOpen,\r\n onClose,\r\n topPosition,\r\n isLongDownload,\r\n lead,\r\n title,\r\n estimateText,\r\n longEstimateText,\r\n closeModalHiddenText,\r\n downloadStatus,\r\n successText,\r\n errorText\r\n}) => {\r\n const [hasOpened, setHasOpened] = useState(false);\r\n const [announceStatusMessage, setAnnounceStatusMessage] = useState(false);\r\n\r\n useEffect(() => {\r\n // Makes screen readers announce status message when modal opens\r\n setAnnounceStatusMessage(hasOpened);\r\n }, [hasOpened]);\r\n\r\n function handleAfterOpen() {\r\n setHasOpened(true);\r\n\r\n /* Positions modal in relation to main element */\r\n const modal = document.getElementsByClassName('download-pdf-modal')?.[0];\r\n let newTop = topPosition - window.scrollY;\r\n\r\n // Prevent it from going above the viewport\r\n if (newTop < 0) {\r\n newTop = 0;\r\n }\r\n\r\n if (modal) modal.style.top = `${newTop}px`;\r\n }\r\n\r\n function handleClose() {\r\n setHasOpened(false);\r\n onClose();\r\n }\r\n\r\n function getStatusText() {\r\n if (!announceStatusMessage) return;\r\n\r\n switch (downloadStatus) {\r\n case DownloadPDFButton.DownloadStatus.ERROR:\r\n return errorText;\r\n case DownloadPDFButton.DownloadStatus.SUCCESS:\r\n return successText;\r\n default:\r\n return isLongDownload ? longEstimateText : estimateText;\r\n }\r\n }\r\n\r\n return (\r\n \r\n {title && (\r\n \r\n {title}\r\n \r\n )}\r\n {lead && (\r\n
\r\n \r\n );\r\n};\r\nDownloadPDFModal.propTypes = {\r\n isOpen: PropTypes.bool, //exclude from backend\r\n topPosition: PropTypes.number, //exclude from backend\r\n onClose: PropTypes.func, //exclude from backend\r\n isLongDownload: PropTypes.bool, //exclude from backend\r\n downloadStatus: PropTypes.string, //exclude from backend\r\n lead: PropTypes.string,\r\n title: PropTypes.string,\r\n estimateText: PropTypes.string,\r\n longEstimateText: PropTypes.string,\r\n closeModalHiddenText: PropTypes.string,\r\n successText: PropTypes.string,\r\n errorText: PropTypes.string\r\n};\r\n\r\nDownloadPDFModal.defaultProps = {\r\n onClose: () => {},\r\n onCancel: () => {}\r\n};\r\n\r\nexport default DownloadPDFModal;\r\n","import cn from 'classnames';\r\nimport React, { useRef, useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Clicker from '../clicker';\r\nimport Icon from 'components/icon';\r\nimport DropdownBubble from 'components/dropdown-bubble/dropdown-bubble';\r\nimport useClickOutside from '../../hooks/use-click-outside';\r\nimport DownloadPDFModal from 'components/modal/download-pdf-modal';\r\nimport apiHelper from 'js/api-helper';\r\nimport useEvent from '../../hooks/use-event';\r\n\r\nconst MODAL_CLEAR_TIME = 3000; //ms\r\n\r\nconst DownloadStatus = {\r\n IDLE: 'idle',\r\n DOWNLOADING: 'downloading',\r\n SUCCESS: 'sucess',\r\n ERROR: 'error'\r\n};\r\n\r\nconst DownloadPDFButton = ({\r\n text,\r\n onClick,\r\n dropdownProps,\r\n DropdownComponent,\r\n downloadPDFModalProps,\r\n getDownloadSamtaleMenuEndpoint\r\n}) => {\r\n const [mainElementTopOffset, setMainElementTopOffset] = useState(0);\r\n const [isModalOpen, setIsModalOpen] = useState(false);\r\n const [isDropdownOpen, setIsDropdownOpen] = useState(false);\r\n const [isLongDownload, setIsLongDownload] = useState(false);\r\n const [downloadSamtaleMenuProps, setDownloadSamtaleMenuProps] = useState();\r\n\r\n const [downloadStatus, setDownloadStatus] = useState(DownloadStatus.IDLE);\r\n\r\n let downloadBubbleRef = useRef();\r\n let controllerRef = useRef();\r\n\r\n useEvent('resize', () => {\r\n const mainTop = document.getElementsByTagName('main')?.[0]?.offsetTop;\r\n if (mainTop) setMainElementTopOffset(mainTop);\r\n });\r\n\r\n useClickOutside(downloadBubbleRef, () => setIsDropdownOpen(false));\r\n\r\n function getDownloadSamtaleProps() {\r\n getDownloadSamtaleMenuEndpoint &&\r\n !isDropdownOpen &&\r\n apiHelper\r\n .get(getDownloadSamtaleMenuEndpoint)\r\n .then(downloadSamtaleMenu =>\r\n setDownloadSamtaleMenuProps(downloadSamtaleMenu)\r\n );\r\n }\r\n\r\n async function handleClick(e) {\r\n if (downloadStatus === DownloadStatus.DOWNLOADING) return;\r\n else if (DropdownComponent) {\r\n e.preventDefault();\r\n getDownloadSamtaleProps();\r\n setIsDropdownOpen(!isDropdownOpen);\r\n } else if (onClick) {\r\n onClick(e, startDownload);\r\n }\r\n }\r\n\r\n async function downloadPDF(blob, filename) {\r\n const url = window.URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = filename;\r\n document.body.appendChild(a);\r\n a.click();\r\n document.body.removeChild(a);\r\n window.URL.revokeObjectURL(url);\r\n }\r\n\r\n async function startDownload(endpoint, options, _isLongDownload = false) {\r\n if (downloadStatus === DownloadStatus.DOWNLOADING) return;\r\n setDownloadStatus(DownloadStatus.DOWNLOADING);\r\n setIsModalOpen(true);\r\n setIsDropdownOpen(false);\r\n setIsLongDownload(_isLongDownload);\r\n\r\n try {\r\n let filename = '';\r\n controllerRef.current = new AbortController();\r\n\r\n const response = await fetch(endpoint, {\r\n method: 'post',\r\n headers: {\r\n Accept: 'application/json',\r\n 'Content-Type': 'application/json'\r\n },\r\n credentials: 'include',\r\n signal: controllerRef.current?.signal,\r\n ...options\r\n });\r\n\r\n if (!response.ok) throw new Error(response.statusText);\r\n\r\n filename = response.headers\r\n .get('Content-Disposition')\r\n .split('filename=')[1]\r\n .split(';')[0];\r\n\r\n const blob = await response.blob();\r\n\r\n downloadPDF(blob, filename);\r\n setDownloadStatus(DownloadStatus.SUCCESS);\r\n setTimeout(() => {\r\n setDownloadStatus(DownloadStatus.IDLE);\r\n setIsModalOpen(false);\r\n }, MODAL_CLEAR_TIME);\r\n } catch (error) {\r\n // eslint-disable-next-line no-console\r\n console.log('Error:', error);\r\n setDownloadStatus(DownloadStatus.ERROR);\r\n }\r\n }\r\n\r\n function handleModalClose() {\r\n setDownloadStatus(DownloadStatus.IDLE);\r\n setIsModalOpen(false);\r\n controllerRef.current?.abort();\r\n }\r\n\r\n useEffect(() => {\r\n const mainTop = document.getElementsByTagName('main')?.[0]?.offsetTop;\r\n if (mainTop) setMainElementTopOffset(mainTop);\r\n }, []);\r\n\r\n return (\r\n \r\n {downloadStatus === DownloadPDFButton.DownloadStatus.ERROR && (\r\n
\r\n {estimateText && longEstimateText && (\r\n \r\n {getStatusText()}\r\n
\r\n )}\r\n\r\n
\r\n \r\n {guidanceText && (\r\n e.key === 'Escape' && setIsMoreOptionsOpen(false)}\r\n >\r\n setIsMoreOptionsOpen(!isMoreOptionsOpen)}\r\n iconIsBeforeText={true}\r\n iconName={Icon.names.more}\r\n iconSize={Clicker.iconSizes.medium}\r\n activeIconName={Icon.names.moreBlue}\r\n theme={Clicker.themes.hoverBlueNoUnderline}\r\n />\r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n {guidanceModal && (\r\n \r\n setIsGuidanceModalOpen(true)}\r\n iconIsBeforeText={true}\r\n iconName={Icon.names.infoCircle}\r\n iconSize={Clicker.iconSizes.medium}\r\n theme={Clicker.themes.hoverBlueNoUnderline}\r\n />\r\n
\r\n )}\r\n {infoText && (\r\n \r\n setIsInfoModalOpen(true)}\r\n iconIsBeforeText={true}\r\n iconName={Icon.names.infoCircle}\r\n iconSize={Clicker.iconSizes.medium}\r\n theme={Clicker.themes.hoverBlueNoUnderline}\r\n />\r\n
\r\n )}\r\n {simpleTextModalButtonText && (\r\n \r\n setIsSimpleTextModalOpen(true)}\r\n iconIsBeforeText={true}\r\n iconName={Icon.names.infoCircle}\r\n iconSize={Clicker.iconSizes.medium}\r\n theme={Clicker.themes.hoverBlueNoUnderline}\r\n />\r\n
\r\n )}\r\n {downloadKartleggingReportMenu && (\r\n \r\n window.print()}\r\n iconIsBeforeText={true}\r\n iconName={Icon.names.print}\r\n iconSize={Clicker.iconSizes.medium}\r\n theme={Clicker.themes.hoverBlueNoUnderline}\r\n />\r\n
\r\n )}\r\n {tableToggleButtonText && chartToggleButtonText && (\r\n \r\n \r\n toggleChartContext &&\r\n toggleChartContext.setFormatIsChart(prev => !prev)\r\n }\r\n iconIsBeforeText={true}\r\n iconName={\r\n toggleChartContext && toggleChartContext.formatIsChart\r\n ? Icon.names.table\r\n : Icon.names.diagram\r\n }\r\n iconSize={Clicker.iconSizes.medium}\r\n theme={Clicker.themes.hoverBlueNoUnderline}\r\n />\r\n
\r\n )}\r\n {moreOptionsText && (\r\n \r\n setIsMoreOptionsOpen(false)}\r\n className=\"action-bar__dropdown-close-button\"\r\n />\r\n {historyButtonText && (\r\n setIsHistoryOpen(true)}\r\n iconIsBeforeText={true}\r\n iconName={Icon.names.historyCircle}\r\n iconSize={Clicker.iconSizes.medium}\r\n />\r\n )}\r\n {archiveButtonText && (\r\n setIsConfirmationOpen(true)}\r\n text={archiveButtonText}\r\n iconIsBeforeText={true}\r\n iconName={Icon.names.sendToArchive}\r\n iconSize={Clicker.iconSizes.medium}\r\n />\r\n )}\r\n {archiveLink && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n {steps?.map((s, i) => {\r\n if (i === currentStep) {\r\n return (\r\n \r\n {s?.title && (\r\n \r\n {s.title}\r\n \r\n )}\r\n {s?.description && (\r\n \r\n {data?.title && (\r\n \r\n
\r\n )}\r\n {currentStep ===\r\n possibleSteps.Summary && (\r\n \r\n {data.title}\r\n
\r\n )}\r\n {data?.elevLists?.map(({ title, elevList }) => {\r\n let amount = 0;\r\n elevList.forEach(\r\n elevGroup => (amount += elevGroup.length)\r\n );\r\n return (\r\n - \r\n {elevList?.map((elevGroup, i) => {\r\n return (\r\n
\r\n \r\n {etternavn +\r\n ', ' +\r\n fornavn}\r\n \r\n |{idnummer}|\r\n {arstrinn}\r\n
\r\n \r\n \r\n {status}\r\n \r\n
\r\n \r\n \r\n {fornavn +\r\n ' ' +\r\n etternavn}\r\n \r\n
\r\n {elevinfo}\r\n \r\n {s?.buttons?.map(b => {\r\n return getButton(b.type, b.title);\r\n })}\r\n
\r\n \r\n );\r\n }\r\n })}\r\n \r\n );\r\n};\r\n\r\nexport default RenderStep;\r\n\r\nRenderStep.propTypes = {\r\n steps: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n title: PropTypes.string,\r\n description: PropTypes.string,\r\n errorDescription: PropTypes.string,\r\n buttons: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n title: PropTypes.string,\r\n type: PropTypes.string\r\n })\r\n )\r\n })\r\n ),\r\n currentStep: PropTypes.number,\r\n response: PropTypes.shape({\r\n fileError: PropTypes.string,\r\n importSessionId: PropTypes.string,\r\n success: PropTypes.object,\r\n error: PropTypes.object\r\n }),\r\n getButton: PropTypes.func\r\n};\r\n","import React, { useState, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\nimport Clicker from 'components/clicker/clicker';\r\nimport apiHelper from 'js/api-helper';\r\nimport LoadingSpinner from 'components/loading-spinner/loading-spinner';\r\nimport RenderStep from './render-step';\r\nimport Icon from 'components/icon/icon';\r\n\r\nexport const possibleSteps = {\r\n Example: 0,\r\n Upload: 1,\r\n AddStudents: 2,\r\n Summary: 3\r\n};\r\n\r\nconst AddStudentsFromFile = ({\r\n onClickGoBack,\r\n goBackText,\r\n title,\r\n fileuploadEndpoint,\r\n filedownloadEndpoint,\r\n exampleFiledownloadEndpoint,\r\n fileregisterEndpoint,\r\n steps\r\n}) => {\r\n const [currentStep, setCurrentStep] = useState(0);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [isDownloadLoading, setIsDownloadLoading] = useState(false);\r\n const [error, setError] = useState(false);\r\n const [response, setResponse] = useState(null);\r\n\r\n const fileInputRef = useRef(null);\r\n\r\n const handleOnImportButtonClick = () => {\r\n if (!fileInputRef.current) return;\r\n\r\n fileInputRef.current.click();\r\n };\r\n\r\n const handleOnImportClick = async e => {\r\n setIsLoading(true);\r\n setError(false);\r\n const addedFile = e.target.files[0];\r\n\r\n if (\r\n addedFile.type ===\r\n 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'\r\n ) {\r\n const formData = new FormData();\r\n formData.append('file', addedFile);\r\n\r\n try {\r\n const response = await apiHelper.executeWithCustomOptions(\r\n fileuploadEndpoint,\r\n formData,\r\n {\r\n headers: {\r\n Accept: 'application/json'\r\n },\r\n credentials: 'include'\r\n }\r\n );\r\n if (response?.fileError) {\r\n setError(response.fileError);\r\n } else {\r\n setError(null);\r\n setResponse(response);\r\n setCurrentStep(prev => prev + 1);\r\n }\r\n } catch (err) {\r\n setError('Noe gikk galt under importeringen');\r\n }\r\n } else {\r\n setError('Filen må være .xlsx');\r\n }\r\n setIsLoading(false);\r\n };\r\n\r\n const handleOnRegisterClick = async () => {\r\n setIsLoading(true);\r\n setError(false);\r\n try {\r\n const newResponse = await apiHelper.execute(fileregisterEndpoint, {\r\n importSessionId: response?.importSessionId\r\n });\r\n setResponse({\r\n ...newResponse,\r\n importSessionId: response?.importSessionId\r\n });\r\n setCurrentStep(prev => prev + 1);\r\n } catch (err) {\r\n setError('Noe gikk galt under registreringen av elever');\r\n }\r\n setIsLoading(false);\r\n };\r\n\r\n const handleOnAbortClick = () => {\r\n setCurrentStep(0);\r\n };\r\n\r\n const handleOnNextClick = () => {\r\n if (currentStep === possibleSteps.AddStudents) {\r\n handleOnRegisterClick();\r\n } else if (currentStep === steps.length - 1) {\r\n // Last step\r\n onClickGoBack();\r\n } else {\r\n setCurrentStep(prev => prev + 1);\r\n }\r\n };\r\n\r\n const handleOnPreviousClick = () => {\r\n if (currentStep !== 0) {\r\n setCurrentStep(prev => prev - 1);\r\n }\r\n };\r\n\r\n const handleOnDownloadClick = async () => {\r\n setIsDownloadLoading(true);\r\n try {\r\n const { text, filename } = await apiHelper.execute(filedownloadEndpoint, {\r\n importSessionId: response?.importSessionId\r\n });\r\n const downloadUrl =\r\n 'data:text/plain;charset=utf-8,' + encodeURIComponent(text);\r\n const downloadFilename = /.txt/.test(filename)\r\n ? filename\r\n : `${filename}.txt`;\r\n const anchor = document.createElement('a');\r\n anchor.href = downloadUrl;\r\n anchor.target = '_blank';\r\n anchor.download = downloadFilename;\r\n document.body.appendChild(anchor); // required for firefox\r\n anchor.click();\r\n anchor.remove();\r\n setError(false);\r\n } catch (err) {\r\n setError('Noe gikk galt under nedlastningen');\r\n }\r\n setIsDownloadLoading(false);\r\n };\r\n\r\n const handleOnExampleDownloadClick = async () => {\r\n setIsDownloadLoading(true);\r\n try {\r\n const res = await fetch(exampleFiledownloadEndpoint, {\r\n headers: {\r\n Accept:\r\n 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\r\n 'Content-Type':\r\n 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'\r\n },\r\n credentials: 'include',\r\n responseType: 'blob'\r\n });\r\n\r\n const blob = await res.blob();\r\n\r\n const url = window.URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n\r\n const contentDisposition = res.headers.get('Content-Disposition');\r\n const filename = contentDisposition\r\n ? contentDisposition.split('filename=')[1].split(';')[0].trim()\r\n : 'download.xlsx';\r\n\r\n a.download = filename;\r\n document.body.appendChild(a);\r\n a.click();\r\n window.URL.revokeObjectURL(url);\r\n } catch (err) {\r\n setError('Noe gikk galt under nedlastningen');\r\n } finally {\r\n setIsDownloadLoading(false);\r\n }\r\n };\r\n\r\n const getButton = (type, title) => {\r\n if (type === 'fileupload') {\r\n return (\r\n \r\n
\r\n ) : (\r\n \r\n
\r\n ) : (\r\n \r\n {currentStep !== possibleSteps.Summary ? (\r\n
\r\n {error && (\r\n {title}
}\r\n\r\n {steps?.map((s, i) => {\r\n return (\r\n i }\r\n )}\r\n key={s?.title}\r\n style={{ zIndex: steps.length - i }}\r\n aria-current={currentStep === i}\r\n >\r\n {s?.title}\r\n
\r\n );\r\n })}\r\n \r\n
\r\n )}\r\n {isLoading ? (\r\n \r\n \r\n \r\n {headerGroups.map((headerGroup, hgIdx) => (\r\n \r\n {headerGroup.headers.map((column, hIdx) => {\r\n return column.Header ? (\r\n \r\n {column.canSort ? (\r\n \r\n ) : (\r\n {column.render('Header')}\r\n )}\r\n \r\n ) : (\r\n \r\n );\r\n })}\r\n \r\n ))}\r\n \r\n \r\n {rows.map((row, rIdx) => {\r\n prepareRow(row);\r\n\r\n return (\r\n \r\n {row.cells.map((cell, cIdx) => {\r\n return (\r\n \r\n \r\n {cell.render('Cell')}\r\n \r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n {infoText && (\r\n \r\n {modalData?.row.original.roleId === 'SL' &&\r\n modalData?.row.original.requestDelete && (\r\n \r\n
\r\n );\r\n};\r\n\r\nResourceTable.propTypes = {\r\n resources: PropTypes.arrayOf(PropTypes.exact(Resource.propTypes)),\r\n headerColumns: PropTypes.arrayOf(PropTypes.string),\r\n headerColumnMobileIndex: PropTypes.number,\r\n infoText: PropTypes.string,\r\n showMenus: PropTypes.bool, //exclude from backend\r\n showLinks: PropTypes.bool, //exclude from backend\r\n showCheckboxes: PropTypes.bool //exclude from backend\r\n};\r\n\r\nResourceTable.defaultProps = {\r\n resources: [],\r\n headerColumns: [],\r\n showMenus: false,\r\n showLinks: false,\r\n showCheckboxes: false,\r\n headerColumnMobileIndex: 0\r\n};\r\n\r\nexport default ResourceTable;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport ConfirmationModal from 'components/modal/confirmation-modal';\r\nimport ResourceTable from 'components/resource-table';\r\nimport usePhrases from '../../../hooks/use-phrases';\r\n\r\nconst SchoolAdminTable = ({\r\n table,\r\n showMenus,\r\n confirmationModal,\r\n rejectUndoConfirmationModal,\r\n onToggleStatus,\r\n onConfirmModal,\r\n endpoints\r\n}) => {\r\n const {\r\n confirmDelete,\r\n activateMappingStatus,\r\n deactivateMappingStatus,\r\n requestDeleteText,\r\n rejectRemoveText,\r\n undoRemoveRequestText\r\n } = usePhrases();\r\n\r\n const [confirmationModalIsOpen, setConfirmationModalIsOpen] = useState(false);\r\n const [applicableModal, setApplicableModal] = useState({});\r\n\r\n const decorateWithMenu = resource => {\r\n let items = [];\r\n\r\n if (resource.requestDelete) {\r\n items.push({\r\n text:\r\n resource?.roleId === 'LA' ? undoRemoveRequestText : rejectRemoveText,\r\n onClick: () => {\r\n setApplicableModal({\r\n ...rejectUndoConfirmationModal,\r\n onConfirm: () => {\r\n setConfirmationModalIsOpen(false);\r\n onConfirmModal(\r\n resource,\r\n resource?.roleId === 'LA'\r\n ? endpoints?.undoRemoveRequestEndpoint\r\n : endpoints?.rejectRemoveEndpoint\r\n );\r\n }\r\n });\r\n setConfirmationModalIsOpen(true);\r\n }\r\n });\r\n if (resource?.roleId === 'SL') {\r\n items.push({\r\n text: confirmDelete,\r\n onClick: () => {\r\n setApplicableModal({\r\n ...confirmationModal,\r\n confirmText: confirmDelete,\r\n onConfirm: () => {\r\n setConfirmationModalIsOpen(false);\r\n onConfirmModal(resource, endpoints?.removeEndpoint);\r\n }\r\n });\r\n setConfirmationModalIsOpen(true);\r\n }\r\n });\r\n }\r\n } else {\r\n items.push({\r\n text: resource?.roleId === 'LA' ? requestDeleteText : confirmDelete,\r\n onClick: () => {\r\n setApplicableModal({\r\n ...confirmationModal,\r\n confirmText: confirmDelete,\r\n onConfirm: () => {\r\n setConfirmationModalIsOpen(false);\r\n onConfirmModal(\r\n resource,\r\n endpoints?.removeEndpoint,\r\n resource?.roleId === 'LA' ? { requestDelete: true } : {}\r\n );\r\n }\r\n });\r\n setConfirmationModalIsOpen(true);\r\n }\r\n });\r\n }\r\n\r\n items.push({\r\n text:\r\n resource?.status === 'green'\r\n ? deactivateMappingStatus\r\n : activateMappingStatus,\r\n onClick: () => onToggleStatus(resource)\r\n });\r\n\r\n return {\r\n ...resource,\r\n menuItems: items\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 {modalData?.columns.map(column => {\r\n const { Header, id } = column;\r\n const originalData = modalData?.row?.original;\r\n const columnById = originalData?.columns[id];\r\n if (columnById) {\r\n return (\r\n
- \r\n
\r\n {Header}\r\n
\r\n {columnById?.text}\r\n \r\n );\r\n }\r\n return null;\r\n })}\r\n
\r\n \r\n decorateWithMenu(resource)\r\n )}\r\n />\r\n
\r\n {confirmationModalIsOpen && applicableModal && (\r\n \r\n
\r\n );\r\n};\r\n\r\nTabs.propTypes = {\r\n tabs: PropTypes.arrayOf(PropTypes.exact(Tab.propTypes))\r\n};\r\n\r\nTabs.defaultProps = {\r\n tabs: []\r\n};\r\n\r\nexport default Tabs;\r\n","import React, { useState, useEffect, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport api from 'js/api-helper';\r\n\r\nimport ResourceTable from 'components/resource-table';\r\nimport ActionBar from 'components/action-bar';\r\nimport LoadingSpinner from 'components/loading-spinner';\r\nimport SchoolAdminTable from './school-admin-table';\r\nimport ConfirmationModal from 'components/modal/confirmation-modal';\r\nimport Clicker from 'components/clicker/clicker';\r\nimport HeaderContext from '../../../contexts/header-context';\r\nimport Tabs from 'components/tabs/tabs';\r\n\r\nconst SchoolAdmin = ({\r\n updateNestedValue,\r\n tabs,\r\n title,\r\n showMenus,\r\n addButtonText,\r\n table,\r\n actionBar,\r\n addEndpoint,\r\n removeEndpoint,\r\n rejectRemoveEndpoint,\r\n undoRemoveRequestEndpoint,\r\n confirmationModal,\r\n rejectUndoConfirmationModal,\r\n getUpdatedHeaderEndpoint,\r\n toggleStatusEndpoint\r\n}) => {\r\n const [state, setState] = useState({ table });\r\n const [isLoading, setIsLoading] = useState(false);\r\n const { setProfileHeaderData } = useContext(HeaderContext);\r\n const handleOnAdd = async () => {\r\n setIsLoading(true);\r\n\r\n await api.execute(addEndpoint, {});\r\n };\r\n\r\n const handleOnToggleStatus = async resource => {\r\n setIsLoading(true);\r\n\r\n const { id, status } = resource;\r\n\r\n try {\r\n const newResource = await api.execute(toggleStatusEndpoint, {\r\n id,\r\n isActive: status !== 'green'\r\n });\r\n\r\n const updatedTable = {\r\n ...state.table,\r\n resources: state.table.resources.map(oldResource => {\r\n if (newResource.id === oldResource.id) return newResource;\r\n\r\n return oldResource;\r\n })\r\n };\r\n updateNestedValue({ table: updatedTable });\r\n\r\n setState({\r\n ...state,\r\n table: updatedTable\r\n });\r\n if (status === 'green') {\r\n const newHeaderInfos = await api.get(\r\n getUpdatedHeaderEndpoint + '?id=' + id\r\n );\r\n setProfileHeaderData(_profileHeaderData => ({\r\n name: _profileHeaderData?.name,\r\n infos: Array.isArray(newHeaderInfos?.infos)\r\n ? newHeaderInfos?.infos\r\n : undefined,\r\n inputs: Array.isArray(newHeaderInfos?.inputs)\r\n ? newHeaderInfos?.inputs\r\n : undefined\r\n }));\r\n }\r\n } catch (e) {\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n\r\n setIsLoading(false);\r\n };\r\n\r\n const handleMapping = async (resource, endpoint, extras = {}) => {\r\n setIsLoading(true);\r\n const { id } = resource;\r\n try {\r\n const newResource = await api.execute(endpoint, {\r\n id,\r\n ...extras\r\n });\r\n\r\n if (newResource.id !== undefined) {\r\n const updatedTable = {\r\n ...state.table,\r\n resources: state.table.resources.map(oldResource => {\r\n if (newResource.id === oldResource.id) return newResource;\r\n\r\n return oldResource;\r\n })\r\n };\r\n updateNestedValue({ table: updatedTable });\r\n\r\n setState({\r\n ...state,\r\n table: updatedTable\r\n });\r\n } else {\r\n const updatedTable = {\r\n ...state.table,\r\n resources: state.table.resources.filter(\r\n resource => resource.id !== id\r\n )\r\n };\r\n updateNestedValue({ table: updatedTable });\r\n setState({\r\n ...state,\r\n table: updatedTable\r\n });\r\n }\r\n } catch (e) {\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n\r\n setIsLoading(false);\r\n // window.location.reload();\r\n };\r\n\r\n useEffect(() => {\r\n return () => {\r\n setIsLoading(false);\r\n };\r\n }, []);\r\n\r\n return (\r\n <>\r\n - \r\n {tabs.map((link, index) => (\r\n
- \r\n
\r\n \r\n ))}\r\n
\r\n
\r\n {isLoading && \r\n {tabs && (\r\n
\r\n \r\n
\r\n )}\r\n\r\n {title && {title}
}\r\n\r\n {addButtonText && addEndpoint && (\r\n
\r\n\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n decorateWithMenu(resource)\r\n )}\r\n />\r\n
\r\n {confirmationModalIsOpen && (\r\n \r\n onBlur(e.target.value, id)}\r\n onFocus={onFocus}\r\n onChange={handleChange}\r\n onKeyDown={handleEnterPress}\r\n type=\"text\"\r\n value={value}\r\n className={cn('text-input__input', {\r\n 'text-input__input--has-value': value?.length\r\n })}\r\n required={required}\r\n aria-describedby={errorId}\r\n />\r\n \r\n
\r\n \r\n );\r\n }\r\n);\r\n\r\nTextInput.propTypes = {\r\n theme: PropTypes.oneOf(Object.values(themes)), //exclude from backend\r\n onBlur: PropTypes.func, //exclude from backend\r\n onFocus: PropTypes.func, //exclude from backend\r\n onChange: PropTypes.func, //exclude from backend\r\n onEnter: PropTypes.func, //exclude from backend\r\n isDisabled: PropTypes.bool, //exclude from backend\r\n alphabeticOnly: PropTypes.bool, //exclude from backend\r\n alphanumericOnly: PropTypes.bool, //exclude from backend\r\n autoFocus: PropTypes.bool, //exclude from backend\r\n hasAutoComplete: PropTypes.bool, //exclude from backend\r\n required: PropTypes.bool, //exclude from backend\r\n id: PropTypes.string.isRequired,\r\n inputKey: PropTypes.string,\r\n maxLength: PropTypes.number, //exclude from backend\r\n label: PropTypes.string,\r\n placeholder: PropTypes.string,\r\n value: PropTypes.string,\r\n errorId: PropTypes.string // ignore backend\r\n};\r\n\r\nTextInput.displayName = 'TextInput';\r\n\r\nTextInput.defaultProps = {\r\n onBlur: () => {},\r\n onChange: () => {},\r\n theme: themes.default,\r\n hasAutoComplete: true,\r\n errors: []\r\n};\r\n\r\nTextInput.themes = themes;\r\n\r\nexport default TextInput;\r\n","import React from 'react';\r\nimport cn from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport usePhrases from '../../hooks/use-phrases';\r\n\r\nconst Person = ({ name, email, phoneNumber, onClick, isDisabled }) => {\r\n const { email: emailLabel, phoneNumber: phoneNumberLabel } = usePhrases();\r\n\r\n const Element = onClick ? 'button' : 'div';\r\n\r\n return (\r\n \r\n {name && {name}}\r\n {email && (\r\n \r\n {emailLabel}: {email}\r\n \r\n )}\r\n {phoneNumber && (\r\n \r\n {phoneNumberLabel}: {phoneNumber}\r\n \r\n )}\r\n
\r\n \r\n );\r\n};\r\n\r\nPerson.propTypes = {\r\n onClick: PropTypes.func, // ignore from backend\r\n isDisabled: PropTypes.bool, // ignore from backend\r\n name: PropTypes.string,\r\n email: PropTypes.string,\r\n phoneNumber: PropTypes.string\r\n};\r\n\r\nexport default Person;\r\n","import React from 'react';\r\nimport cn from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst QuickSearchSchool = ({\r\n name,\r\n address,\r\n orgNr,\r\n onClick,\r\n isDisabled,\r\n orgNrLabel\r\n}) => {\r\n const Element = onClick ? 'button' : 'div';\r\n\r\n return (\r\n \r\n {name && {name}}\r\n {address && address}\r\n {orgNr && (\r\n \r\n {orgNrLabel + ': ' + orgNr}\r\n \r\n )}\r\n
\r\n \r\n );\r\n};\r\n\r\nQuickSearchSchool.propTypes = {\r\n onClick: PropTypes.func, // ignore from backend\r\n isDisabled: PropTypes.bool, // ignore from backend\r\n name: PropTypes.string,\r\n orgNr: PropTypes.string,\r\n address: PropTypes.string,\r\n orgNrLabel: PropTypes.string\r\n};\r\n\r\nexport default QuickSearchSchool;\r\n","import { useState, useEffect } from 'react';\r\n\r\nconst useDebounce = (value, delay) => {\r\n const [debouncedValue, setDebouncedValue] = useState(value);\r\n\r\n useEffect(() => {\r\n const token = setTimeout(() => {\r\n setDebouncedValue(value);\r\n }, delay);\r\n\r\n return () => {\r\n clearTimeout(token);\r\n };\r\n }, [value]);\r\n\r\n return debouncedValue;\r\n};\r\n\r\nexport default useDebounce;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport api from '../../js/api-helper';\r\n\r\nimport TextInput from '../text-input';\r\nimport LoadingSpinner from '../loading-spinner';\r\n\r\nimport Person from '../person';\r\nimport QuickSearchSchool from '../person/quick-search-school';\r\nimport useDebounce from '../../hooks/use-debounce';\r\n\r\nconst MIN_CHARACTERS = 2;\r\nconst DEBOUNCE_TIME = 500;\r\n\r\nconst QuickSearch = ({\r\n textInput,\r\n isDisabled,\r\n endpoint,\r\n studentId,\r\n blacklistSearchResult,\r\n onItemClick,\r\n roleAssignmentCode,\r\n orgId\r\n}) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [items, setItems] = useState([]);\r\n const [message, setMessage] = useState('');\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [activeTextInput, setActiveTextInput] = useState({\r\n ...textInput,\r\n value: ''\r\n });\r\n\r\n const debouncedSearchText = useDebounce(activeTextInput.value, DEBOUNCE_TIME);\r\n\r\n const resetList = () => {\r\n setItems([]);\r\n setMessage('');\r\n setIsOpen(false);\r\n };\r\n\r\n const handleOnChange = value => {\r\n setActiveTextInput({ ...activeTextInput, value: value });\r\n };\r\n\r\n const executeSearch = async () => {\r\n setIsLoading(true);\r\n\r\n const data = studentId\r\n ? {\r\n studentId,\r\n value: activeTextInput.value\r\n }\r\n : {\r\n value: activeTextInput.value,\r\n orgId: orgId,\r\n roleAssignmentCode: roleAssignmentCode\r\n };\r\n try {\r\n const { items, message } = await api.execute(endpoint, data);\r\n\r\n if (items?.length) {\r\n const filteredItems = blacklistSearchResult\r\n ? items.filter(({ id }) => {\r\n return !blacklistSearchResult.some(bItem => bItem.id === id);\r\n })\r\n : items;\r\n\r\n if (filteredItems?.length > 0) setIsOpen(true);\r\n\r\n message ? setMessage(message) : setMessage('');\r\n\r\n setItems(filteredItems);\r\n } else {\r\n setItems([]);\r\n message ? setMessage(message) : setMessage('');\r\n }\r\n setIsLoading(false);\r\n } catch (err) {\r\n setItems([]);\r\n err.message ? setMessage(err.message) : setMessage('');\r\n setIsLoading(false);\r\n }\r\n };\r\n\r\n const handleOnResultClick = item => {\r\n resetList();\r\n\r\n onItemClick(item);\r\n\r\n setActiveTextInput({ ...activeTextInput, value: '' });\r\n };\r\n\r\n React.useEffect(() => {\r\n if (debouncedSearchText.length >= MIN_CHARACTERS) {\r\n executeSearch();\r\n }\r\n }, [debouncedSearchText]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nQuickSearch.propTypes = {\r\n isDisabled: PropTypes.bool, //exclude from backend\r\n onItemClick: PropTypes.func, //exclude from backend\r\n roleAssignmentCode: PropTypes.string, //exclude from backend\r\n orgId: PropTypes.string, //exclude from backend\r\n textInput: PropTypes.exact(TextInput.propTypes),\r\n endpoint: PropTypes.string.isRequired,\r\n studentId: PropTypes.string,\r\n blacklistSearchResult: PropTypes.array\r\n};\r\n\r\nexport default QuickSearch;\r\n","import React, { useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport api from '../../../js/api-helper';\r\n\r\nimport Modal from '../modal';\r\nimport Clicker from '../../clicker';\r\nimport LoadingSpinner from '../../loading-spinner';\r\nimport QuickSearch from '../../quick-search';\r\n\r\nconst AssignTeacherModal = ({\r\n studentId,\r\n isOpen,\r\n onClose,\r\n onConfirm,\r\n isDisabled,\r\n closeModalHiddenText,\r\n doneText,\r\n removeText,\r\n readOnlyLabel,\r\n title,\r\n lead,\r\n submitEndpoint,\r\n assignedTeachers,\r\n removeTeacherEndpoint,\r\n quickSearch\r\n}) => {\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n const [state, setState] = useState({\r\n isDisabled: false,\r\n assignedTeachers,\r\n message: ''\r\n });\r\n\r\n const handleOnSubmit = async () => {\r\n setIsLoading(true);\r\n\r\n try {\r\n const { resources } = await api.execute(submitEndpoint, {\r\n studentId,\r\n teachers: state.assignedTeachers\r\n });\r\n\r\n onConfirm(resources);\r\n setIsLoading(false);\r\n } catch (e) {\r\n setIsLoading(false);\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n };\r\n\r\n const handleOnRemove = async id => {\r\n setIsLoading(true);\r\n\r\n try {\r\n await api.execute(removeTeacherEndpoint, {\r\n studentId,\r\n id\r\n });\r\n } catch (e) {\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n\r\n setState({\r\n ...state,\r\n assignedTeachers: state.assignedTeachers.filter(\r\n teacher => teacher.id !== id\r\n )\r\n });\r\n\r\n setIsLoading(false);\r\n };\r\n\r\n const handleOnChecked = id => {\r\n setState({\r\n ...state,\r\n assignedTeachers: state.assignedTeachers.map(teacher => {\r\n if (id !== teacher.id) return teacher;\r\n\r\n return { ...teacher, hasReadOnly: !teacher.hasReadOnly };\r\n })\r\n });\r\n };\r\n\r\n const handleOnItemClick = resource => {\r\n const { name, id, hasReadOnly } = resource;\r\n\r\n setState({\r\n ...state,\r\n assignedTeachers: [\r\n ...state.assignedTeachers,\r\n {\r\n id,\r\n name,\r\n hasReadOnly\r\n }\r\n ]\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n return () => {\r\n setIsLoading(false);\r\n };\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n {isOpen && (\r\n
\r\n {message && \r\n
\r\n )}\r\n - \r\n {items?.map((item, index) => {\r\n if (item.orgNr) {\r\n return (\r\n
- \r\n
- \r\n
{message}
}\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nAssignTeacherModal.propTypes = {\r\n isDisabled: PropTypes.bool, //exclude from backend\r\n onClose: PropTypes.func, //exclude from backend\r\n onConfirm: PropTypes.func, //exclude from backend\r\n isOpen: PropTypes.bool, //exclude from backend\r\n studentId: PropTypes.string, //exclude from backend\r\n closeModalHiddenText: PropTypes.string,\r\n doneText: PropTypes.string,\r\n removeText: PropTypes.string,\r\n readOnlyLabel: PropTypes.string,\r\n title: PropTypes.string,\r\n removeTeacherEndpoint: PropTypes.string.isRequired,\r\n assignedTeachers: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n id: PropTypes.string.isRequired,\r\n name: PropTypes.string.isRequired,\r\n hasReadOnly: PropTypes.bool\r\n })\r\n ),\r\n lead: PropTypes.string,\r\n submitEndpoint: PropTypes.string.isRequired,\r\n quickSearch: PropTypes.exact(QuickSearch.propTypes).isRequired\r\n};\r\n\r\nAssignTeacherModal.defaultProps = {\r\n onConfirm: () => {},\r\n onClose: () => {},\r\n assignedTeachers: []\r\n};\r\n\r\nexport default AssignTeacherModal;\r\n","import React, { forwardRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport NumberFormat from 'react-number-format';\r\nimport cn from 'classnames';\r\nimport Clicker from 'components/clicker/clicker';\r\nimport Icon from 'components/icon';\r\n\r\nconst themes = {\r\n default: 'default',\r\n underlined: 'underlined',\r\n rowSmall: 'rowSmall'\r\n};\r\nconst NumberInput = forwardRef(\r\n (\r\n {\r\n maskWithAsterix,\r\n theme,\r\n label,\r\n value,\r\n id,\r\n onBlur,\r\n onChange,\r\n placeholder,\r\n isDisabled,\r\n error,\r\n thousandSeparator,\r\n prefix,\r\n suffix,\r\n editorMode,\r\n handleEditorModeLabelChange,\r\n errorId,\r\n ...rest\r\n },\r\n ref\r\n ) => {\r\n const handleBlur = e => {\r\n onBlur(e.target.value, id);\r\n };\r\n\r\n const removeContent = () => {\r\n if (maskWithAsterix) {\r\n onChange('', id);\r\n }\r\n };\r\n\r\n const props = {\r\n ...rest,\r\n isNumericString: true,\r\n type: 'text',\r\n prefix: prefix,\r\n suffix: suffix,\r\n thousandSeparator: thousandSeparator,\r\n format: maskWithAsterix ? value : rest?.format,\r\n value: value,\r\n id: id,\r\n ref: null,\r\n getInputRef: ref,\r\n placeholder: placeholder,\r\n disabled: isDisabled,\r\n onBlur: handleBlur,\r\n onChange: e => onChange(e.target.value, id),\r\n className: cn('number-input__input', {\r\n 'number-input__input--has-value': value?.length,\r\n 'number-input__input--disabled': isDisabled\r\n })\r\n };\r\n return (\r\n \r\n {title &&
\r\n {title}
}\r\n {lead &&{lead}
}\r\n\r\n
\r\n {state.message && (\r\n {state.message}
\r\n )}\r\n {state.assignedTeachers.length > 0 && (\r\n\r\n
\r\n )}\r\n - \r\n {state.assignedTeachers.map((teacher, index) => {\r\n const { id, name, hasReadOnly } = teacher;\r\n\r\n return (\r\n
- \r\n \r\n\r\n{`${name}`}\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n \r\n );\r\n })}\r\n
\r\n
\r\n \r\n
\r\n \r\n {isLoading &&
\r\n \r\n
\r\n )}\r\n \r\n \r\n {error}\r\n \r\n )}\r\n \r\n )}\r\n
\r\n \r\n );\r\n }\r\n);\r\n\r\nNumberInput.inputProps = {\r\n id: PropTypes.string.isRequired,\r\n label: PropTypes.string.isRequired,\r\n inputKey: PropTypes.string,\r\n value: PropTypes.string.isRequired\r\n};\r\n\r\nNumberInput.propTypes = {\r\n ...NumberInput.inputProps,\r\n placeholder: PropTypes.string,\r\n error: PropTypes.string, // ignore backend\r\n onBlur: PropTypes.func, // ignore backend\r\n onChange: PropTypes.func, // ignore backend\r\n min: PropTypes.number, // ignore backend\r\n max: PropTypes.number, // ignore backend\r\n maskWithAsterix: PropTypes.bool, // ignore backend\r\n isDisabled: PropTypes.bool, // ignore backend\r\n thousandSeparator: PropTypes.string, // ignore backend\r\n prefix: PropTypes.string, // ignore backend\r\n suffix: PropTypes.string, // ignore backend\r\n errorId: PropTypes.string // ignore backend\r\n};\r\n\r\nNumberInput.defaultProps = {\r\n theme: themes.default,\r\n thousandSeparator: '',\r\n allowLeadingZeros: true,\r\n prefix: '',\r\n suffix: '',\r\n onBlur: () => {},\r\n onChange: () => {}\r\n};\r\n\r\nNumberInput.themes = themes;\r\n\r\nexport default NumberInput;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\nimport Icon from 'components/icon/icon';\r\n\r\nconst InputErrorMessage = ({\r\n id,\r\n errors,\r\n consequenceMessage,\r\n isDirty,\r\n children\r\n}) => {\r\n return (\r\n \r\n \r\n handleEditorModeLabelChange(id, e.target.value, false)\r\n }\r\n />\r\n
\r\n ) : (\r\n <>\r\n \r\n {Boolean(error) && (\r\n \r\n {errors && !!errors.length && (\r\n
\r\n - \r\n {errors.map(errText => (\r\n
- \r\n {errText}\r\n \r\n ))}\r\n
\r\n {isDirty && consequenceMessage && (\r\n
\r\n \r\n );\r\n};\r\n\r\nInputErrorMessage.propTypes = {\r\n id: PropTypes.string,\r\n errors: PropTypes.arrayOf(PropTypes.string),\r\n consequenceMessage: PropTypes.string,\r\n isDirty: PropTypes.bool,\r\n children: PropTypes.element\r\n};\r\n\r\nInputErrorMessage.defaultProps = {\r\n errors: []\r\n};\r\n\r\nexport default InputErrorMessage;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport cn from 'classnames';\r\n/**\r\n * Controls text input by itself, with optional onChange. If you dont want callbacks, use refs to retrieve values.\r\n * @param {*} param0\r\n */\r\nexport default function TextArea({\r\n maxLength,\r\n value,\r\n isDisabled,\r\n onChange,\r\n id,\r\n inputKey,\r\n label,\r\n placeholder\r\n}) {\r\n const [warning, setWarning] = useState(false);\r\n const [currentInput, setCurrentInput] = useState(value);\r\n const setLimit = React.useMemo(() => typeof maxLength === 'number', [\r\n maxLength\r\n ]);\r\n const nearMaxLength = React.useMemo(\r\n () => maxLength && currentInput?.length > maxLength * 0.9,\r\n [maxLength, currentInput]\r\n );\r\n\r\n const handleChange = e => {\r\n if (isDisabled) return;\r\n const { value } = e.target;\r\n if (setLimit && e.target.value.length > maxLength) {\r\n setWarning(true);\r\n } else {\r\n setWarning(false);\r\n // Handle input here if necessary\r\n setCurrentInput(value);\r\n onChange(value, id);\r\n }\r\n };\r\n return (\r\n \r\n
\r\n )}\r\n \r\n {label && (\r\n \r\n )}\r\n \r\n {currentInput ? currentInput.length : 0}/{maxLength}\r\n \r\n )}\r\n
\r\n );\r\n}\r\n\r\nTextArea.propTypes = {\r\n id: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired,\r\n label: PropTypes.string,\r\n placeholder: PropTypes.string,\r\n inputKey: PropTypes.string,\r\n isDisabled: PropTypes.bool,\r\n maxLength: PropTypes.number,\r\n onChange: PropTypes.func // ignore backend\r\n};\r\n\r\nTextArea.defaultProps = {\r\n onChange: () => {},\r\n value: '',\r\n id: '',\r\n placeholder: 'Start å skrive'\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nconst CheckboxItem = ({\r\n id,\r\n onChange,\r\n onDisabledCallback,\r\n isDisabled,\r\n value,\r\n isPartiallyChecked,\r\n editorMode,\r\n handleEditorModeLabelChange,\r\n label\r\n}) => {\r\n const handleChange = e => {\r\n if (e.target.disabled) onDisabledCallback(e);\r\n else {\r\n onChange(e.target.checked, e.target.id);\r\n }\r\n };\r\n\r\n return (\r\n \r\n {currentInput}\r\n
\r\n {nearMaxLength && (\r\n \r\n
\r\n );\r\n};\r\n\r\nCheckboxItem.inputProps = {\r\n id: PropTypes.string.isRequired,\r\n inputKey: PropTypes.string,\r\n label: PropTypes.string.isRequired,\r\n value: PropTypes.bool.isRequired,\r\n isPartiallyChecked: PropTypes.bool\r\n};\r\n\r\nCheckboxItem.propTypes = {\r\n ...CheckboxItem.inputProps,\r\n isDisabled: PropTypes.bool, //ignore backend\r\n onChange: PropTypes.func, //ignore backend\r\n onDisabledCallback: PropTypes.func, //ignore backend\r\n editorMode: PropTypes.bool, //ignore backend\r\n handleEditorModeLabelChange: PropTypes.func //ignore backend\r\n};\r\n\r\nCheckboxItem.defaultProps = {\r\n onChange: () => {},\r\n onDisabledCallback: () => {},\r\n checked: false\r\n};\r\n\r\nexport default CheckboxItem;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport CheckboxInput from 'components/checkbox-input/checkbox-input';\r\nimport cn from 'classnames';\r\n\r\nconst CheckboxInputGroup = ({\r\n title,\r\n isDisabled,\r\n group,\r\n onChange,\r\n ...rest\r\n}) => {\r\n return group?.length > 0 ? (\r\n \r\n ) : null;\r\n};\r\n\r\nCheckboxInputGroup.propTypes = {\r\n title: PropTypes.string,\r\n isDisabled: PropTypes.bool,\r\n group: PropTypes.arrayOf(PropTypes.shape(CheckboxInput.inputProps))\r\n .isRequired,\r\n onChange: PropTypes.func // ignore backend\r\n};\r\n\r\nCheckboxInputGroup.defaultProps = {\r\n onChange: () => {}\r\n};\r\n\r\nexport default CheckboxInputGroup;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst RadioInput = ({\r\n groupId,\r\n id,\r\n onChange,\r\n isDisabled,\r\n label,\r\n value,\r\n editorMode,\r\n handleEditorModeLabelChange\r\n}) => {\r\n const handleChange = e => {\r\n onChange(e.target.checked, id, value);\r\n };\r\n return (\r\n \r\n \r\n handleEditorModeLabelChange(id, e.target.value, false)\r\n }\r\n />\r\n handleEditorModeLabelChange(id, undefined, true)}\r\n >\r\n Fjern\r\n \r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nRadioInput.inputProps = {\r\n id: PropTypes.string.isRequired,\r\n label: PropTypes.string.isRequired,\r\n value: PropTypes.bool,\r\n inputKey: PropTypes.string\r\n};\r\n\r\nRadioInput.propTypes = {\r\n groupId: PropTypes.string.isRequired, // ignore backend\r\n isDisabled: PropTypes.bool, // ignore backend\r\n onChange: PropTypes.func.isRequired, // ignore backend\r\n ...RadioInput.inputProps\r\n};\r\n\r\nRadioInput.defaultProps = {\r\n onChange: () => {}\r\n};\r\nexport default RadioInput;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport RadioInput from 'components/radio-button-input';\r\n\r\nconst RadioGroupInput = ({\r\n id,\r\n inputKey,\r\n isDisabled,\r\n group,\r\n label,\r\n onChange,\r\n ...rest\r\n}) => {\r\n return (\r\n \r\n
\r\n \r\n \r\n handleEditorModeLabelChange(id, e.target.value, false)\r\n }\r\n />\r\n handleEditorModeLabelChange(id, undefined, true)}\r\n >\r\n Fjern\r\n \r\n
\r\n ) : (\r\n \r\n )}\r\n\r\n \r\n - \r\n {list.map((listItem, index) => (\r\n
- \r\n {listOfText.map(item => (\r\n
- \r\n {item}\r\n \r\n {removeValueLabelPrefix && (\r\n\r\n \r\n ))}\r\n
- \r\n {suggestions\r\n .filter((l, i) => i < 5)\r\n .map(({ norwegianName, nativeName, iso6391Code }) => (\r\n
\r\n
\r\n );\r\n};\r\nLanguageSelect.propTypes = {\r\n id: PropTypes.string.isRequired,\r\n label: PropTypes.string,\r\n placeholder: PropTypes.string,\r\n valueArray: PropTypes.arrayOf(PropTypes.string),\r\n onBlur: PropTypes.func, //exclude from backend\r\n onChange: PropTypes.func, //exclude from backend\r\n isDisabled: PropTypes.bool, //exclude from backend,\r\n languageSearchEndpoint: PropTypes.string,\r\n addLanguageButtonText: PropTypes.string,\r\n removeValueLabelPrefix: PropTypes.string, //Format: \"{removeValueLabelPrefix} + \" \" + {value}\"\r\n addCurrentValuePretext: PropTypes.string, //Format: `{addCurrentValuePretext} \"{value}\"`\r\n noResultsText: PropTypes.string,\r\n removeSearchValueButtonLabel: PropTypes.string\r\n};\r\n\r\nLanguageSelect.defaultProps = {\r\n onBlur: () => {},\r\n onChange: () => {},\r\n input: {\r\n id: '',\r\n value: []\r\n }\r\n};\r\n\r\nexport default LanguageSelect;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport DatePicker from 'react-datepicker';\r\nimport cn from 'classnames';\r\nimport noNB from 'date-fns/locale/nb';\r\n\r\nimport Icon from 'components/icon';\r\n\r\nconst themes = {\r\n default: 'default',\r\n underlined: 'underlined',\r\n inspector: 'inspector'\r\n};\r\n\r\nconst DateInput = ({\r\n label,\r\n value,\r\n id,\r\n inputKey,\r\n onChange,\r\n isDisabled,\r\n theme\r\n}) => {\r\n const [startDate, setStartDate] = useState(value ? new Date(value) : null);\r\n\r\n const handleChangeDate = date => {\r\n if (!date) return;\r\n const currentMonth = date.getMonth() + 1;\r\n const currentYear = date.getFullYear();\r\n const currentDay = date.getDate();\r\n\r\n const parsedDate = new Date(currentYear, currentMonth - 1, currentDay);\r\n const parsedISOString = parsedDate.toISOString();\r\n\r\n setStartDate(parsedDate);\r\n onChange(parsedISOString, id);\r\n };\r\n\r\n return (\r\n \r\n {label && (\r\n \r\n )}\r\n
\r\n \r\n {!isDisabled && (\r\n <>\r\n \r\n = 2 || isLoading\r\n })}\r\n placeholder={placeholder}\r\n ref={inputRef}\r\n disabled={isDisabled}\r\n value={currentInput}\r\n onChange={handleChange}\r\n onBlur={handleBlur}\r\n />\r\n {currentInput && (\r\n <>\r\n {isLoading ? (\r\n
\r\n \r\n
\r\n ) : suggestions.length ? (\r\n \r\n {noResultsText}\r\n
\r\n ) : null}\r\n {currentInput !== '' && (\r\n\r\n handleAddByButton(e, currentInput)}\r\n text={`${addCurrentValuePretext} \"${currentInput}\"`}\r\n iconName={Clicker.iconNames.plusCircle}\r\n iconSize={Clicker.iconSizes.mediumPlus}\r\n iconIsBeforeText={true}\r\n />\r\n
\r\n )}\r\n \r\n )}\r\n \r\n\r\n {currentInput && (\r\n \r\n onChange(e.target.value, e.target.id)}\r\n onFocus={onFocus}\r\n >\r\n \r\n {theme === themes.underlined\r\n ? ''\r\n : defaultValueLabel || placeholder}\r\n \r\n {options?.map((option, index) => (\r\n \r\n ))}\r\n \r\n {label && (\r\n \r\n )}\r\n
\r\n \r\n );\r\n};\r\n\r\nSelectInput.propTypes = {\r\n theme: PropTypes.oneOf(Object.values(themes)), //exclude from backend\r\n onChange: PropTypes.func, //exclude from backend\r\n onFocus: PropTypes.func, //exclude from backend\r\n isDisabled: PropTypes.bool,\r\n inputKey: PropTypes.string,\r\n value: PropTypes.string,\r\n label: PropTypes.string,\r\n placeholder: PropTypes.string,\r\n defaultValueLabel: PropTypes.string,\r\n options: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n value: PropTypes.string,\r\n text: PropTypes.string\r\n })\r\n ),\r\n id: PropTypes.string.isRequired,\r\n ariaLabelledby: PropTypes.string //exclude from backend\r\n};\r\n\r\nSelectInput.defaultProps = {\r\n onBlur: () => {},\r\n theme: themes.default\r\n};\r\n\r\nSelectInput.themes = themes;\r\n\r\nexport default SelectInput;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport TextArea from 'components/text-area/text-area';\r\nimport CheckboxInputGroup from 'components/checkbox-input-group/checkbox-input-group';\r\nimport RadioGroupInput from 'components/radio-group-input/radio-group-input';\r\nimport TextInput from 'components/text-input';\r\nimport Tooltip from 'components/tooltip/tooltip';\r\nimport LanguageSelect from 'components/language-select';\r\nimport NumberInput from 'components/number-input';\r\nimport DateInput from 'components/date-input';\r\nimport NumberGroupInput from 'components/number-group-input';\r\nimport Clicker from 'components/clicker/clicker';\r\nimport InputErrorMessage from 'components/input-error-message';\r\nimport SelectInput from 'components/select-input/select-input';\r\n\r\nInputByType.types = {\r\n hidden: 'hidden',\r\n text: 'text',\r\n date: 'date',\r\n number: 'number',\r\n numberGroup: 'numberGroup',\r\n checkbox: 'checkbox',\r\n radio: 'radio',\r\n textarea: 'textarea',\r\n dropdown: 'dropdown',\r\n languageSelect: 'languageSelect'\r\n};\r\n\r\nexport default function InputByType({\r\n value,\r\n valueArray,\r\n id,\r\n inputKey,\r\n type,\r\n title,\r\n questionText,\r\n placeholder,\r\n tooltip,\r\n group,\r\n onBlur,\r\n errors,\r\n consequenceMessage,\r\n onChange,\r\n isDisabled,\r\n isReadOnly,\r\n maxLength,\r\n label,\r\n removeValueLabelPrefix,\r\n hrefLink,\r\n options,\r\n textInputTheme,\r\n isDirty,\r\n editorMode,\r\n handleEditorModeLabelChange,\r\n languageSearchEndpoint,\r\n addCurrentValuePretext,\r\n addLanguageButtonText,\r\n noResultsText,\r\n removeSearchValueButtonLabel\r\n}) {\r\n const renderInputByType = () => {\r\n const props = {\r\n options,\r\n maxLength,\r\n value,\r\n valueArray,\r\n id,\r\n label,\r\n title,\r\n addCurrentValuePretext,\r\n addLanguageButtonText,\r\n removeValueLabelPrefix,\r\n inputKey,\r\n type,\r\n questionText,\r\n placeholder,\r\n tooltip,\r\n group,\r\n onChange,\r\n onBlur,\r\n isDisabled: isDisabled || editorMode,\r\n editorMode,\r\n handleEditorModeLabelChange,\r\n languageSearchEndpoint,\r\n noResultsText,\r\n removeSearchValueButtonLabel\r\n };\r\n\r\n switch (type) {\r\n case InputByType.types.hidden:\r\n return null;\r\n case InputByType.types.dropdown: {\r\n return (\r\n \r\n
\r\n )}\r\n \r\n );\r\n }\r\n return \r\n {firstNameTextInput && (\r\n
\r\n \r\n {gradeInput && (\r\n \r\n \r\n
\r\n )}\r\n {lastNameTextInput && (\r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nconst textInputProps = {\r\n id: PropTypes.string.isRequired,\r\n placeholder: PropTypes.string.isRequired,\r\n label: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired,\r\n isDirty: PropTypes.bool\r\n};\r\n\r\nStudentCommonFields.propTypes = {\r\n id: PropTypes.string,\r\n className: PropTypes.string,\r\n onChange: PropTypes.func,\r\n lead: PropTypes.string,\r\n firstNameTextInput: PropTypes.exact(textInputProps),\r\n lastNameTextInput: PropTypes.exact(textInputProps),\r\n dufNumberTextInput: PropTypes.exact(textInputProps),\r\n dNumberTextInput: PropTypes.exact(textInputProps),\r\n birthNumberTextInput: PropTypes.exact(textInputProps),\r\n gradeInput: PropTypes.exact(InputByType.propTypes),\r\n chooseIdTypeRadioGroup: PropTypes.exact(RadioGroup.propTypes),\r\n changedIdTypeAriaLiveText: PropTypes.string,\r\n inputErrors: PropTypes.shape({\r\n firstName: PropTypes.arrayOf(PropTypes.string),\r\n lastName: PropTypes.arrayOf(PropTypes.string),\r\n birthNumber: PropTypes.arrayOf(PropTypes.string),\r\n dNumber: PropTypes.arrayOf(PropTypes.string),\r\n dufNumber: PropTypes.arrayOf(PropTypes.string),\r\n grade: PropTypes.arrayOf(PropTypes.string)\r\n }),\r\n heightChangeCallback: PropTypes.func,\r\n chosenIdType: PropTypes.string,\r\n setCurrentIdType: PropTypes.func\r\n};\r\n\r\nStudentCommonFields.defaultProps = {};\r\n\r\nStudentCommonFields.idTypes = ID_TYPES;\r\n\r\nexport default StudentCommonFields;\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport api from '../../../js/api-helper';\r\n\r\nimport Modal from '../modal';\r\nimport Clicker from '../../clicker';\r\nimport LoadingSpinner from '../../loading-spinner';\r\nimport Icon from 'components/icon';\r\nimport StudentCommonFields from '../student-common-fields/student-common-fields';\r\nimport RadioGroup from '../../radio-group';\r\nimport InputByType from 'components/input-by-type';\r\n\r\nconst AddStudentModal = ({\r\n isOpen,\r\n onClose,\r\n onConfirm,\r\n isDisabled,\r\n closeModalHiddenText,\r\n addStudentText,\r\n removeStudentText,\r\n saveStudentText,\r\n exitText,\r\n cancelButtonText,\r\n title,\r\n lead,\r\n requiredFieldDescription,\r\n addSubmitEndpoint,\r\n lookupEndpoint,\r\n requestMoveEndpoint,\r\n firstNameTextInput,\r\n lastNameTextInput,\r\n dNumberTextInput,\r\n dufNumberTextInput,\r\n birthNumberTextInput,\r\n gradeInput,\r\n requestMoveStudentButtonText,\r\n orgId,\r\n numberOfStudentsAddedText,\r\n chooseIdTypeRadioGroup,\r\n changedIdTypeAriaLiveText,\r\n errorMessages\r\n}) => {\r\n const [state, setState] = useState({\r\n isLoading: false,\r\n isDisabled: true,\r\n isDirty: false,\r\n pendingStudents: [],\r\n gradeInput,\r\n firstNameTextInput,\r\n lastNameTextInput,\r\n dNumberTextInput,\r\n dufNumberTextInput,\r\n birthNumberTextInput\r\n });\r\n const [currentIdType, setCurrentIdType] = useState(\r\n StudentCommonFields.idTypes.fnr\r\n );\r\n const [inputErrors, setInputErrors] = useState({});\r\n const [isSubmitingForm, setIsSubmitingForm] = useState(false);\r\n const [hasRequestMoveOption, setHasRequestMoveOption] = useState(false);\r\n const [confirmedMove, setConfirmedMove] = useState('');\r\n\r\n const studentListRef = useRef(null);\r\n\r\n const toggleLoading = isLoading => {\r\n setState(prevState => ({\r\n ...prevState,\r\n isLoading\r\n }));\r\n };\r\n\r\n const checkGeneralError = (value, key, stateKey) => {\r\n if (inputErrors[key]) setInputErrors({ ...inputErrors, [key]: [] });\r\n\r\n setHasRequestMoveOption(false);\r\n\r\n setState(prevState => ({\r\n ...prevState,\r\n isDirty: true,\r\n [stateKey]: {\r\n ...prevState[stateKey],\r\n value: value,\r\n isDirty: true\r\n }\r\n }));\r\n };\r\n\r\n const handleOnError = err => {\r\n setInputErrors(err);\r\n };\r\n\r\n const resetInputs = () => {\r\n setState(prevState => ({\r\n ...prevState,\r\n birthNumberTextInput: { ...prevState.birthNumberTextInput, value: '' },\r\n dufNumberTextInput: { ...prevState.dufNumberTextInput, value: '' },\r\n dNumberTextInput: { ...prevState.dNumberTextInput, value: '' },\r\n lastNameTextInput: { ...prevState.lastNameTextInput, value: '' },\r\n firstNameTextInput: { ...prevState.firstNameTextInput, value: '' },\r\n gradeInput: { ...prevState.gradeInput, value: '', isDirty: false }\r\n }));\r\n\r\n setInputErrors({});\r\n };\r\n\r\n function checkIdAlreadyAdded() {\r\n function findPending(pending, key, stateTextInputKey) {\r\n return (\r\n pending[key].length && pending[key] === state[stateTextInputKey].value\r\n );\r\n }\r\n\r\n if (\r\n state.pendingStudents.find(p =>\r\n findPending(p, 'birthNumber', 'birthNumberTextInput')\r\n )\r\n ) {\r\n setInputErrors({ birthNumber: ['Fødselsnummer er allerede lagt til'] });\r\n return true;\r\n } else if (\r\n state.pendingStudents.find(p =>\r\n findPending(p, 'dNumber', 'dNumberTextInput')\r\n )\r\n ) {\r\n setInputErrors({ dNumber: ['D-nummer er allerede lagt til'] });\r\n return true;\r\n } else if (\r\n state.pendingStudents.find(p =>\r\n findPending(p, 'dufNumber', 'dufNumberTextInput')\r\n )\r\n ) {\r\n setInputErrors({ dufNumber: ['DUF nummer er allerede lagt til'] });\r\n return true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n const handleOnAdd = () => {\r\n const numberInput = {\r\n id: '',\r\n birthNumber: '',\r\n dNumber: '',\r\n dufNumber: ''\r\n };\r\n if (state.birthNumberTextInput?.value?.length === 11) {\r\n numberInput.birthNumber = state.birthNumberTextInput?.value;\r\n numberInput.id = state.birthNumberTextInput?.value;\r\n } else if (state.dNumberTextInput?.value?.length === 11) {\r\n numberInput.dNumber = state.dNumberTextInput?.value;\r\n numberInput.id = state.dNumberTextInput?.value;\r\n } else if (state.dufNumberTextInput?.value?.length === 12) {\r\n numberInput.dufNumber = state.dufNumberTextInput?.value;\r\n numberInput.id = state.dufNumberTextInput?.value;\r\n }\r\n\r\n setState(prevState => ({\r\n ...prevState,\r\n pendingStudents: [\r\n ...prevState.pendingStudents,\r\n {\r\n ...numberInput,\r\n firstName: prevState.firstNameTextInput.value,\r\n lastName: prevState.lastNameTextInput.value,\r\n grade: prevState.gradeInput.value,\r\n orgId\r\n }\r\n ],\r\n birthNumberTextInput: { ...prevState.birthNumberTextInput, value: '' },\r\n dufNumberTextInput: { ...prevState.dufNumberTextInput, value: '' },\r\n dNumberTextInput: { ...prevState.dNumberTextInput, value: '' },\r\n lastNameTextInput: { ...prevState.lastNameTextInput, value: '' },\r\n firstNameTextInput: { ...prevState.firstNameTextInput, value: '' },\r\n gradeInput: { ...prevState.gradeInput, value: '', isDirty: false }\r\n }));\r\n };\r\n\r\n const handleOnRemove = id => {\r\n setState(prevState => ({\r\n ...prevState,\r\n pendingStudents: prevState.pendingStudents.filter(\r\n student => student.id !== id\r\n )\r\n }));\r\n };\r\n\r\n const checkIfFieldAreValid = () => {\r\n var errors = {};\r\n\r\n if (!state.gradeInput?.value?.length) errors.grade = [errorMessages.grade];\r\n if (!state.firstNameTextInput?.value?.length)\r\n errors.firstName = [errorMessages.firstName];\r\n if (!state.lastNameTextInput?.value?.length)\r\n errors.lastName = [errorMessages.lastName];\r\n if (\r\n currentIdType === 'fnr' &&\r\n state.birthNumberTextInput?.value?.length !== 11\r\n )\r\n errors.birthNumber = [errorMessages.birthNumber];\r\n if (currentIdType === 'dnr' && state.dNumberTextInput?.value?.length !== 11)\r\n errors.dNumber = [errorMessages.dNumber];\r\n if (\r\n currentIdType === 'dufnr' &&\r\n state.dufNumberTextInput?.value?.length !== 12\r\n )\r\n errors.dufNumber = [errorMessages.dufNumber];\r\n setInputErrors(errors);\r\n\r\n return !Object.keys(errors).length;\r\n };\r\n\r\n const handleOnLookup = async () => {\r\n setIsSubmitingForm(true);\r\n\r\n const fieldsValid = checkIfFieldAreValid();\r\n if (!fieldsValid) return;\r\n const alreadyAdded = checkIdAlreadyAdded();\r\n if (alreadyAdded) return;\r\n\r\n toggleLoading(true);\r\n\r\n try {\r\n const request = {\r\n firstName: state.firstNameTextInput.value,\r\n lastName: state.lastNameTextInput.value,\r\n grade: state.gradeInput.value,\r\n birthNumber: '',\r\n dNumber: '',\r\n dufNumber: ''\r\n };\r\n if (state.birthNumberTextInput?.value?.length === 11)\r\n request.birthNumber = state.birthNumberTextInput.value;\r\n else if (state.dNumberTextInput?.value?.length === 11)\r\n request.dNumber = state.dNumberTextInput.value;\r\n else if (state.dufNumberTextInput?.value?.length === 12)\r\n request.dufNumber = state.dufNumberTextInput.value;\r\n\r\n const res = await api.execute(lookupEndpoint, request);\r\n\r\n if (res.errors) {\r\n throw res;\r\n }\r\n\r\n handleOnAdd();\r\n } catch (err) {\r\n if (err.status === 400) {\r\n handleOnError(err.errors);\r\n\r\n if (err.isRegistreredInOtherSchool) setHasRequestMoveOption(true);\r\n }\r\n } finally {\r\n toggleLoading(false);\r\n }\r\n };\r\n\r\n const handleOnAddSubmit = async () => {\r\n toggleLoading(true);\r\n\r\n try {\r\n const res = await api.execute(addSubmitEndpoint, {\r\n students: state.pendingStudents.reduce((acc, student) => {\r\n // eslint-disable-next-line no-unused-vars\r\n const { id, ...rest } = student; // We omit the id in the post, since it's just an id we use locally, copied from birthNumber/dNumber\r\n\r\n return acc.concat(rest);\r\n }, [])\r\n });\r\n\r\n onConfirm(res);\r\n } catch (e) {\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n } finally {\r\n toggleLoading(false);\r\n }\r\n };\r\n\r\n const handleOnMoveRequest = async () => {\r\n toggleLoading(true);\r\n try {\r\n let { confirmText } = await api.execute(requestMoveEndpoint, {\r\n dNumber: state.dNumberTextInput.value,\r\n dufNumber: state.dufNumberTextInput.value,\r\n birthNumber: state.birthNumberTextInput.value\r\n });\r\n setConfirmedMove(confirmText);\r\n } catch (err) {\r\n // eslint-disable-next-line no-console\r\n console.log(err);\r\n } finally {\r\n toggleLoading(false);\r\n }\r\n };\r\n\r\n const handleOnConfirmationClose = () => {\r\n setConfirmedMove('');\r\n resetInputs();\r\n };\r\n\r\n const closeModal = () => {\r\n if (confirmedMove) handleOnConfirmationClose();\r\n else onClose();\r\n };\r\n\r\n const adjustColumnHeights = newHeight => {\r\n if (newHeight && studentListRef.current) {\r\n if (window.innerWidth > 768) {\r\n const newHeightString = `calc(${newHeight}px - (0.875rem + 6px))`;\r\n studentListRef.current.style.maxHeight = newHeightString;\r\n } else {\r\n studentListRef.current.style.maxHeight = 'none';\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n return () => {\r\n toggleLoading(false);\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (isSubmitingForm) {\r\n let firstIdWithError;\r\n\r\n if (inputErrors.firstName?.length)\r\n firstIdWithError = state?.firstNameTextInput.id;\r\n else if (inputErrors.lastName?.length)\r\n firstIdWithError = state?.lastNameTextInput.id;\r\n else if (inputErrors.birthNumber?.length)\r\n firstIdWithError = state?.birthNumberTextInput.id;\r\n else if (inputErrors.dNumber?.length)\r\n firstIdWithError = state?.dNumberTextInput.id;\r\n else if (inputErrors.dufNumber?.length)\r\n firstIdWithError = state?.dufNumberTextInput.id;\r\n else if (inputErrors.grade?.length)\r\n firstIdWithError = state?.gradeInput.id;\r\n\r\n if (firstIdWithError) {\r\n const elementToFocus = document.getElementById(firstIdWithError);\r\n if (elementToFocus) elementToFocus.focus();\r\n }\r\n\r\n setIsSubmitingForm(false);\r\n }\r\n }, [inputErrors]);\r\n\r\n return (\r\n \r\n {title &&
\r\n {title}
}\r\n {requiredFieldDescription && (\r\n\r\n {requiredFieldDescription}\r\n
\r\n )}\r\n \r\n {!confirmedMove && (\r\n <>\r\n \r\n \r\n {state.pendingStudents?.length > 0 &&\r\n state.pendingStudents.length +\r\n ' ' +\r\n numberOfStudentsAddedText}\r\n
\r\n \r\n
\r\n \r\n )}\r\n {confirmedMove && (\r\n <>\r\n \r\n {cancelButtonText && (\r\n
\r\n {hasRequestMoveOption && (\r\n \r\n
\r\n )}\r\n {addStudentText && (\r\n \r\n
\r\n )}\r\n \r\n {state.isLoading &&
\r\n \r\n
\r\n )}\r\n \r\n {confirmedMove}\r\n
\r\n\r\n\r\n
\r\n \r\n )}\r\n\r\n \r\n
\r\n \r\n
\r\n - \r\n {state.pendingStudents?.map((student, index) => {\r\n const selectedGrade = state.gradeInput.options.filter(\r\n option => option.value === student.grade\r\n )[0];\r\n\r\n return (\r\n
- \r\n \r\n\r\n{`${student.firstName} ${student.lastName}`}\r\n\r\n {selectedGrade?.text}\r\n\r\n\r\n\r\n \r\n );\r\n })}\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nconst textInputProps = {\r\n id: PropTypes.string.isRequired,\r\n placeholder: PropTypes.string.isRequired,\r\n label: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired,\r\n isDirty: PropTypes.bool\r\n};\r\n\r\nAddStudentModal.propTypes = {\r\n isDisabled: PropTypes.bool, //exclude from backend\r\n onClose: PropTypes.func, //exclude from backend\r\n onConfirm: PropTypes.func, //exclude from backend\r\n isOpen: PropTypes.bool, //exclude from backend\r\n orgId: PropTypes.string,\r\n closeModalHiddenText: PropTypes.string,\r\n addStudentText: PropTypes.string,\r\n removeStudentText: PropTypes.string,\r\n saveStudentText: PropTypes.string,\r\n exitText: PropTypes.string,\r\n cancelButtonText: PropTypes.string,\r\n title: PropTypes.string,\r\n requestMoveStudentButtonText: PropTypes.string,\r\n lead: PropTypes.string,\r\n requiredFieldDescription: PropTypes.string,\r\n lookupEndpoint: PropTypes.string,\r\n requestMoveEndpoint: PropTypes.string,\r\n addSubmitEndpoint: PropTypes.string,\r\n firstNameTextInput: PropTypes.exact(textInputProps),\r\n lastNameTextInput: PropTypes.exact(textInputProps),\r\n dufNumberTextInput: PropTypes.exact(textInputProps),\r\n dNumberTextInput: PropTypes.exact(textInputProps),\r\n birthNumberTextInput: PropTypes.exact(textInputProps),\r\n gradeInput: PropTypes.exact(InputByType.propTypes),\r\n numberOfStudentsAddedText: PropTypes.string,\r\n chooseIdTypeRadioGroup: PropTypes.exact(RadioGroup.propTypes),\r\n changedIdTypeAriaLiveText: PropTypes.string,\r\n errorMessages: PropTypes.exact({\r\n firstName: PropTypes.string,\r\n lastName: PropTypes.string,\r\n birthNumber: PropTypes.string,\r\n dNumber: PropTypes.string,\r\n dufNumber: PropTypes.string,\r\n grade: PropTypes.string\r\n })\r\n};\r\n\r\nAddStudentModal.defaultProps = {\r\n onConfirm: () => {},\r\n onClose: () => {},\r\n numberOfStudentsAddedText: ' elever lagt til'\r\n};\r\n\r\nexport default AddStudentModal;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport Icon from 'components/icon/icon';\r\n\r\nconst themes = ['grey', 'remove-selection'];\r\n\r\nconst School = ({\r\n name,\r\n address,\r\n orgNr,\r\n themes,\r\n onRemoveSelection,\r\n orgNrLabel\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\nSearchWithDropdown.propTypes = {\r\n onChange: PropTypes.func, // exclude from BE\r\n searchFieldLabel: PropTypes.string,\r\n searchEndpoint: PropTypes.string,\r\n resetSearchLabel: PropTypes.string,\r\n RenderedResultElement: PropTypes.node\r\n};\r\n\r\nSearchWithDropdown.themes = themes;\r\n\r\nexport default SearchWithDropdown;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport api from '../../../js/api-helper';\r\n\r\nimport Modal from '../modal';\r\nimport Clicker from '../../clicker';\r\nimport LoadingSpinner from '../../loading-spinner';\r\n\r\nimport School from 'components/school/school';\r\nimport CheckboxInput from 'components/checkbox-input/checkbox-input';\r\nimport SearchWithDropdown from 'components/search-with-dropdown/search-with-dropdown';\r\n\r\nconst MoveStudentModal = ({\r\n isOpen,\r\n onClose,\r\n onConfirm,\r\n isDisabled,\r\n search,\r\n closeModalHiddenText,\r\n title,\r\n lead,\r\n confirmButtonText,\r\n cancelButtonText,\r\n closeButtonText,\r\n studentName,\r\n studentInfoLabel,\r\n studentInfo,\r\n studentId,\r\n searchDescriptionText,\r\n selectedSchoolDescriptionText,\r\n acceptCheckboxText,\r\n moveStudentEndPoint\r\n}) => {\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [school, setSchool] = useState();\r\n\r\n const [confirmed, setConfirmed] = useState('');\r\n const [accepted, setAccepted] = useState(false);\r\n\r\n const handleOnConfirm = async () => {\r\n setIsLoading(true);\r\n try {\r\n let { confirmText } = await api.execute(moveStudentEndPoint, {\r\n studentId,\r\n newOrgId: school.orgNr\r\n });\r\n\r\n setConfirmed(confirmText);\r\n\r\n onConfirm(studentId);\r\n setIsLoading(false);\r\n } catch (e) {\r\n setIsLoading(false);\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n };\r\n\r\n const handleOnSchoolChoice = item => setSchool(item);\r\n\r\n return (\r\n \r\n {responseMessage && searchValue?.length > 1 && (\r\n
\r\n {!!searchResults?.length && searchValue?.length > 1 && (\r\n \r\n {responseMessage}\r\n
\r\n )}\r\n - \r\n {searchResults.map(result => (\r\n
\r\n
\r\n \r\n );\r\n};\r\n\r\nMoveStudentModal.propTypes = {\r\n isDisabled: PropTypes.bool, //exclude from backend\r\n onClose: PropTypes.func, //exclude from backend\r\n onConfirm: PropTypes.func, //exclude from backend\r\n isOpen: PropTypes.bool, //exclude from backend\r\n orgId: PropTypes.string, //exclude from backend\r\n\r\n closeModalHiddenText: PropTypes.string,\r\n title: PropTypes.string,\r\n lead: PropTypes.string,\r\n confirmButtonText: PropTypes.string,\r\n cancelButtonText: PropTypes.string,\r\n closeButtonText: PropTypes.string,\r\n acceptCheckboxText: PropTypes.string,\r\n search: PropTypes.exact(SearchWithDropdown.propTypes),\r\n searchDescriptionText: PropTypes.string,\r\n selectedSchoolDescriptionText: PropTypes.string,\r\n studentInfoLabel: PropTypes.string,\r\n studentName: PropTypes.string, //exclude from backend\r\n studentInfo: PropTypes.string, //exclude from backend\r\n studentId: PropTypes.string, //exclude from backend\r\n moveStudentEndPoint: PropTypes.string\r\n};\r\n\r\nMoveStudentModal.defaultProps = {\r\n onConfirm: () => {},\r\n onClose: () => {}\r\n};\r\n\r\nexport default MoveStudentModal;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport api from '../../../js/api-helper';\r\n\r\nimport Modal from '../modal';\r\nimport Clicker from '../../clicker';\r\nimport LoadingSpinner from '../../loading-spinner';\r\n\r\nimport CheckboxInput from 'components/checkbox-input/checkbox-input';\r\n\r\nconst RejectMoveStudentModal = ({\r\n isOpen,\r\n onClose,\r\n onConfirm,\r\n isDisabled,\r\n closeModalHiddenText,\r\n title,\r\n text,\r\n buttonText,\r\n payload,\r\n studentId,\r\n studentName,\r\n rejectMoveStudentEndpoint\r\n}) => {\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n const [state, setState] = useState({\r\n isDisabled: false,\r\n payload: payload || [],\r\n message: '',\r\n ids: []\r\n });\r\n\r\n const handleOnChecked = (checked, orgnr) => {\r\n if (checked) {\r\n setState({\r\n ...state,\r\n ids: [...state.ids, orgnr]\r\n });\r\n } else {\r\n setState({\r\n ...state,\r\n ids: state.ids.filter(item => item !== orgnr)\r\n });\r\n }\r\n };\r\n\r\n const handleOnConfirm = async () => {\r\n setIsLoading(true);\r\n var orgIds = state.ids;\r\n\r\n try {\r\n await api.execute(rejectMoveStudentEndpoint, { studentId, orgIds });\r\n\r\n onConfirm(studentId);\r\n setIsLoading(false);\r\n } catch (e) {\r\n setIsLoading(false);\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n };\r\n\r\n return (\r\n \r\n {title &&
\r\n {title}
}\r\n {confirmed ? (\r\n{confirmed}
\r\n ) : (\r\n lead &&{lead}
\r\n )}\r\n {!confirmed && (\r\n <>\r\n\r\n
\r\n \r\n
\r\n \r\n {studentName}\r\n
\r\n \r\n {studentInfoLabel + ' ' + (studentInfo || '')}\r\n
\r\n \r\n {searchDescriptionText}\r\n
\r\n\r\n {school && (\r\n <>\r\n \r\n
\r\n \r\n {selectedSchoolDescriptionText}\r\n
\r\n \r\n setAccepted(checked)}\r\n label={acceptCheckboxText}\r\n />\r\n
\r\n \r\n )}\r\n \r\n )}\r\n\r\n \r\n {confirmed ? (\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 && (\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nRejectMoveStudentModal.propTypes = {\r\n isDisabled: PropTypes.bool, //exclude from backend\r\n onClose: PropTypes.func, //exclude from backend\r\n onConfirm: PropTypes.func, //exclude from backend\r\n isOpen: PropTypes.bool, //exclude from backend\r\n closeModalHiddenText: PropTypes.string,\r\n title: PropTypes.string,\r\n text: PropTypes.string,\r\n buttonText: PropTypes.string,\r\n studentName: PropTypes.string, //exclude from backend\r\n studentId: PropTypes.string, //exclude from backend\r\n payload: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n onskesFlyttetTil: PropTypes.string,\r\n onskesFlyttetTilNavn: PropTypes.string\r\n })\r\n ),\r\n rejectMoveStudentEndpoint: PropTypes.string\r\n};\r\n\r\nRejectMoveStudentModal.defaultProps = {\r\n onConfirm: () => {},\r\n onClose: () => {}\r\n};\r\n\r\nexport default RejectMoveStudentModal;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport api from '../../../js/api-helper';\r\n\r\nimport Modal from '../modal';\r\nimport Clicker from '../../clicker';\r\nimport LoadingSpinner from '../../loading-spinner';\r\n\r\nimport QuickSearch from 'components/quick-search/quick-search';\r\nimport School from 'components/school/school';\r\nimport Accordion from 'components/accordion/accordion';\r\n\r\nconst MoveAllStudentsModal = ({\r\n isOpen,\r\n onClose,\r\n closeModalHiddenText,\r\n numberOfStudentsText,\r\n confirmButtonText,\r\n closeButtonText,\r\n lead,\r\n moveStudentsEndpoint,\r\n searchTitle,\r\n quickSearch,\r\n title,\r\n students\r\n}) => {\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [school, setSchool] = useState();\r\n const [confirmed, setConfirmed] = useState('');\r\n\r\n const handleOnConfirm = async () => {\r\n setIsLoading(true);\r\n try {\r\n let { confirmText } = await api.execute(moveStudentsEndpoint, {\r\n students,\r\n newOrgId: school?.orgNr\r\n });\r\n\r\n setConfirmed(confirmText);\r\n\r\n setIsLoading(false);\r\n } catch (e) {\r\n setIsLoading(false);\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n };\r\n\r\n const handleOnSchoolChoice = item => setSchool(item);\r\n\r\n return (\r\n \r\n {title && (\r\n
\r\n {title}
\r\n )}\r\n {text && (\r\n\r\n {text.replace('$elev', studentName)}\r\n
\r\n )}\r\n {state.payload.length > 0 && (\r\n\r\n
\r\n )}\r\n\r\n - \r\n {state.payload.map((flytting, index) => {\r\n const { onskesFlyttetTil, onskesFlyttetTilNavn } = flytting;\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 {isLoading &&
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nMoveAllStudentsModal.propTypes = {\r\n onClose: PropTypes.func, //exclude from backend\r\n isOpen: PropTypes.bool, //exclude from backend\r\n\r\n closeModalHiddenText: PropTypes.string,\r\n numberOfStudentsText: PropTypes.string,\r\n confirmButtonText: PropTypes.string,\r\n closeButtonText: PropTypes.string,\r\n lead: PropTypes.string,\r\n moveStudentsEndpoint: PropTypes.string,\r\n searchTitle: PropTypes.string,\r\n quickSearch: PropTypes.shape({\r\n endpoint: PropTypes.string,\r\n textInput: PropTypes.shape({\r\n defaultValue: PropTypes.any,\r\n id: PropTypes.string,\r\n inputKey: PropTypes.string,\r\n isDisabled: PropTypes.bool,\r\n label: PropTypes.string,\r\n placeholder: PropTypes.string,\r\n type: PropTypes.string,\r\n value: PropTypes.string\r\n })\r\n }),\r\n studentFodtLabel: PropTypes.string,\r\n title: PropTypes.string,\r\n students: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n id: PropTypes.string,\r\n orgId: PropTypes.string,\r\n displayName: PropTypes.string,\r\n birthDate: PropTypes.string\r\n })\r\n ) //exclude from backend\r\n};\r\n\r\nMoveAllStudentsModal.defaultProps = {\r\n onClose: () => {}\r\n};\r\n\r\nexport default MoveAllStudentsModal;\r\n","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport api from 'js/api-helper';\r\nimport filterArraysWithoutDuplicatesByKey from 'js/filter-arrays-without-duplicates-by-key';\r\n\r\nimport usePhrases from '../../../hooks/use-phrases';\r\n\r\nimport StudentAdminTable from './student-admin-table';\r\nimport LoadingSpinner from 'components/loading-spinner';\r\nimport ResourceTable from 'components/resource-table';\r\nimport AssignTeacherModal from 'components/modal/assign-teacher-modal/assign-teacher-modal';\r\nimport AddStudentModal from 'components/modal/add-student-modal/add-student-modal';\r\nimport MoveStudentModal from 'components/modal/move-student-modal/move-student-modal';\r\nimport RejectMoveStudentModal from 'components/modal/reject-move-student-modal/reject-move-student-modal';\r\nimport MoveAllStudentsModal from 'components/modal/move-all-students-modal/move-all-students-modal';\r\nimport Clicker from 'components/clicker';\r\nimport Tabs from 'components/tabs/tabs';\r\nimport AddStudentsFromFile from 'components/add-students-from-file/add-students-from-file';\r\nimport ConfirmationModal from 'components/modal/confirmation-modal';\r\n\r\nconst StudentAdmin = ({\r\n updateNestedValue,\r\n title,\r\n table,\r\n tabs,\r\n showMenus,\r\n removeEndpoint,\r\n confirmationModal,\r\n editEndpoint,\r\n assignTeacherEndpoint,\r\n addStudentsFromFile,\r\n addStudentModal,\r\n assignTeacherModal,\r\n moveStudentModal,\r\n rejectMoveStudentModal,\r\n getStudentEndpoint,\r\n getAllFlyttingerForElevEndpoint,\r\n moveAllStudentsButtonText,\r\n moveAllStudentsModal,\r\n handleRefreshData\r\n}) => {\r\n const { addStudent, addStudentFromFile, editStudent } = usePhrases();\r\n\r\n const [state, setState] = useState({ table });\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n const [addStudentsFromFileIsOpen, setAddStudentsFromFileIsOpen] = useState(\r\n false\r\n );\r\n const [addModalIsOpen, setAddModalIsOpen] = useState(false);\r\n const [editModalIsOpen, setEditModalIsOpen] = useState(false);\r\n const [assignTeacherModalIsOpen, setAssignTeacherModalIsOpen] = useState(\r\n false\r\n );\r\n const [moveStudenModalIsOpen, setMoveStudenModalIsOpen] = useState(false);\r\n const [\r\n rejectMoveStudenModalIsOpen,\r\n setRejectMoveStudenModalIsOpen\r\n ] = useState(false);\r\n const [editModal, setEditModal] = useState({\r\n ...addStudentModal,\r\n title: editStudent\r\n });\r\n const [teacherModal, setTeacherModal] = useState(assignTeacherModal);\r\n const [moveModal, setMoveModal] = useState(moveStudentModal);\r\n const [rejectMoveModal, setRejectMoveModal] = useState(\r\n rejectMoveStudentModal\r\n );\r\n const [moveAllStudentsModalIsOpen, setMoveAllStudentsModalIsOpen] = useState(\r\n false\r\n );\r\n\r\n const handleOnEditClick = async resources => {\r\n setIsLoading(true);\r\n\r\n const { id } = resources[0];\r\n\r\n const {\r\n firstName,\r\n lastName,\r\n birthNumber,\r\n dufNumber,\r\n dNumber,\r\n grade\r\n } = await api.execute(editEndpoint, { id });\r\n\r\n setIsLoading(false);\r\n\r\n setEditModal({\r\n ...editModal,\r\n id,\r\n isEditing: true,\r\n firstNameTextInput: {\r\n ...editModal?.firstNameTextInput,\r\n value: firstName\r\n },\r\n lastNameTextInput: {\r\n ...editModal?.lastNameTextInput,\r\n value: lastName\r\n },\r\n dNumberTextInput: {\r\n ...editModal?.dNumberTextInput,\r\n value: dNumber\r\n },\r\n birthNumberTextInput: {\r\n ...editModal?.birthNumberTextInput,\r\n value: birthNumber\r\n },\r\n dufNumberTextInput: {\r\n ...editModal?.dufNumberTextInput,\r\n value: dufNumber\r\n },\r\n gradeInput: {\r\n ...editModal?.gradeInput,\r\n value: grade\r\n }\r\n });\r\n\r\n setEditModalIsOpen(true);\r\n };\r\n\r\n const handleOnRemoveClick = async ids => {\r\n setIsLoading(true);\r\n\r\n try {\r\n await api.execute(removeEndpoint, { ids });\r\n\r\n const updatedTable = {\r\n ...state.table,\r\n resources: state.table.resources.filter(resource => {\r\n return ids.indexOf(resource.id) === -1;\r\n })\r\n };\r\n setState({\r\n ...state,\r\n table: updatedTable\r\n });\r\n updateNestedValue({ table: updatedTable });\r\n } catch (e) {\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n\r\n setIsLoading(false);\r\n };\r\n\r\n const handleOnAddConfirm = resources => {\r\n setState({\r\n ...state,\r\n table: {\r\n ...state.table,\r\n resources: filterArraysWithoutDuplicatesByKey(\r\n state.table.resources,\r\n resources,\r\n 'id'\r\n )\r\n }\r\n });\r\n\r\n setAddModalIsOpen(false);\r\n };\r\n\r\n const handleOnEditConfirm = resource => {\r\n const { id } = resource;\r\n\r\n const updatedTable = {\r\n ...state.table,\r\n resources: state.table.resources.map(oldResource => {\r\n if (oldResource.id === id) return resource;\r\n\r\n return oldResource;\r\n })\r\n };\r\n updateNestedValue({ table: updatedTable });\r\n setState({\r\n ...state,\r\n table: updatedTable\r\n });\r\n\r\n setEditModalIsOpen(false);\r\n };\r\n\r\n const handleOnAssignTeacherClick = async resources => {\r\n setIsLoading(true);\r\n\r\n const id = resources[0].id;\r\n\r\n try {\r\n const { assignedTeachers } = await api.execute(assignTeacherEndpoint, {\r\n id\r\n });\r\n\r\n setTeacherModal({\r\n ...assignTeacherModal,\r\n assignedTeachers,\r\n studentId: id\r\n });\r\n\r\n setAssignTeacherModalIsOpen(true);\r\n } catch (e) {\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n\r\n setIsLoading(false);\r\n };\r\n\r\n const handleOnMoveStudentClick = async resources => {\r\n setIsLoading(true);\r\n\r\n const id = resources[0].id;\r\n\r\n try {\r\n const payload = await api.execute(getStudentEndpoint, {\r\n id\r\n });\r\n\r\n setMoveModal({\r\n ...moveModal,\r\n ...payload,\r\n studentId: id\r\n });\r\n\r\n setMoveStudenModalIsOpen(true);\r\n } catch (e) {\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n\r\n setIsLoading(false);\r\n };\r\n\r\n const handleOnMoveStudentConfirm = id => {\r\n const updatedTable = {\r\n ...state.table,\r\n resources: state.table.resources.filter(\r\n oldResource => oldResource.id !== id\r\n )\r\n };\r\n updateNestedValue({ table: updatedTable });\r\n setState({\r\n ...state,\r\n table: updatedTable\r\n });\r\n };\r\n\r\n const handleOnAssignTeacherConfirm = resources => {\r\n const updatedTable = {\r\n ...state.table,\r\n resources: filterArraysWithoutDuplicatesByKey(\r\n state.table.resources,\r\n resources,\r\n 'id'\r\n )\r\n };\r\n updateNestedValue({ table: updatedTable });\r\n setState({\r\n ...state,\r\n table: updatedTable\r\n });\r\n\r\n setAssignTeacherModalIsOpen(false);\r\n };\r\n\r\n const handleOnRejectMoveStudentClick = async resources => {\r\n setIsLoading(true);\r\n\r\n const id = resources[0].id;\r\n const studentName = resources[0].displayName;\r\n\r\n try {\r\n const payload = await api.execute(getAllFlyttingerForElevEndpoint, {\r\n id\r\n });\r\n\r\n if (payload.length === 1) {\r\n const orgid = payload[0].onskesFlyttetTil;\r\n const orgidAsArray = [orgid];\r\n\r\n await api.execute(rejectMoveModal.rejectMoveStudentEndpoint, {\r\n studentId: id,\r\n orgIds: orgidAsArray\r\n });\r\n window.location.reload();\r\n } else {\r\n setRejectMoveModal({\r\n ...rejectMoveModal,\r\n payload,\r\n studentId: id,\r\n studentName: studentName\r\n });\r\n\r\n setRejectMoveStudenModalIsOpen(true);\r\n }\r\n } catch (e) {\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n\r\n setIsLoading(false);\r\n };\r\n\r\n const handleOnMoveStudentReject = async schoolNames => {\r\n const updatedTable = {\r\n ...state.table,\r\n resources: state.table.resources.map(resource => ({\r\n ...resource,\r\n requestMove: schoolNames !== null\r\n }))\r\n };\r\n setState({\r\n ...state,\r\n table: updatedTable\r\n });\r\n updateNestedValue({ table: updatedTable });\r\n setRejectMoveStudenModalIsOpen(false);\r\n window.location.reload();\r\n };\r\n\r\n useEffect(() => {\r\n setState({ table });\r\n }, [table]);\r\n\r\n return (\r\n <>\r\n \r\n {title &&
\r\n {title}
}\r\n\r\n {!confirmed ? lead : confirmed}\r\n
\r\n {!confirmed && (\r\n <>\r\n\r\n \r\n
\r\n {searchTitle && (\r\n - \r\n {students?.map(({ displayName, birthDate }, i) => (\r\n
\r\n {displayName && displayName}\r\n
\r\n {birthDate && (\r\n \r\n {`Født: ${birthDate}`}\r\n
\r\n )}\r\n \r\n ))}\r\n \r\n {searchTitle}\r\n
\r\n )}\r\n\r\n {!school ? (\r\n setSchool(null)}\r\n />\r\n )}\r\n
\r\n \r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n {isLoading &&
\r\n \r\n
\r\n {isLoading && \r\n {addStudentsFromFileIsOpen ? (\r\n {\r\n setAddStudentsFromFileIsOpen(false);\r\n handleRefreshData(true);\r\n }}\r\n />\r\n ) : (\r\n <>\r\n {tabs && (\r\n
\r\n \r\n
\r\n )}\r\n {title && {title}
}\r\n {(addStudentModal || moveAllStudentsModal) && (\r\n\r\n {addStudentModal && (\r\n
\r\n )}\r\n \r\n setAddModalIsOpen(true)}\r\n />\r\n
\r\n )}\r\n {moveAllStudentsModal && (\r\n \r\n setMoveAllStudentsModalIsOpen(true)}\r\n />\r\n
\r\n )}\r\n {addStudentsFromFile && (\r\n \r\n setAddStudentsFromFileIsOpen(true)}\r\n />\r\n
\r\n )}\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n decorateWithMenu(resource)\r\n )}\r\n />\r\n
\r\n {confirmationModalIsOpen && (\r\n \r\n {label &&
\r\n );\r\n};\r\n\r\nResults.propTypes = {\r\n label: PropTypes.string,\r\n items: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n name: PropTypes.string,\r\n email: PropTypes.string,\r\n phoneNumber: PropTypes.string\r\n })\r\n )\r\n};\r\n\r\nResults.defaultProps = {\r\n items: []\r\n};\r\n\r\nexport default Results;\r\n","import React, { useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport api from '../../../js/api-helper';\r\n\r\nimport Modal from '../modal';\r\nimport Clicker from '../../clicker';\r\nimport LoadingSpinner from '../../loading-spinner';\r\nimport QuickSearch from '../../quick-search';\r\nimport Results from '../../results';\r\nimport Person from '../../person';\r\nimport SelectInput from '../../select-input';\r\n\r\nimport InputErrorMessage from 'components/input-error-message';\r\n\r\n//This should be replaced by AddBrukerrolleModal in v2.1\r\nconst AddResourceModal = ({\r\n isOpen,\r\n orgId,\r\n onClose,\r\n onConfirm,\r\n isDisabled,\r\n errorMessage,\r\n quickSearch,\r\n closeModalHiddenText,\r\n addResourceText,\r\n title,\r\n lead,\r\n selectedResources,\r\n directConfirm,\r\n roleInput: propRoleInput,\r\n getUserRolesEndpoint,\r\n roleAssignmentCode\r\n}) => {\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [showRoleSelection, setShowRoleSelection] = useState(false);\r\n\r\n const [resources, setResources] = useState(selectedResources);\r\n const [roleInput, setRoleInput] = useState(propRoleInput);\r\n\r\n const handleOnRoleChange = value => {\r\n setRoleInput({\r\n ...roleInput,\r\n value\r\n });\r\n };\r\n\r\n const handleOnConfirm = async () => {\r\n const confirmResource =\r\n getUserRolesEndpoint && roleInput?.value\r\n ? [{ ...resources[0], role: roleInput.value }]\r\n : resources;\r\n\r\n onConfirm(confirmResource, roleInput?.value);\r\n };\r\n\r\n useEffect(() => {\r\n return () => {\r\n setIsLoading(false);\r\n };\r\n }, []);\r\n\r\n const handleOnNext = async () => {\r\n setIsLoading(true);\r\n\r\n try {\r\n const { options, value } = await api.execute(getUserRolesEndpoint, {\r\n text: orgId\r\n });\r\n\r\n setShowRoleSelection(true);\r\n setIsLoading(false);\r\n setRoleInput({\r\n ...roleInput,\r\n options,\r\n value\r\n });\r\n } catch (e) {\r\n setIsLoading(false);\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n };\r\n\r\n const handleOnItemClick = item => {\r\n if (directConfirm) {\r\n onConfirm([item]);\r\n } else {\r\n if (getUserRolesEndpoint) {\r\n handleOnNext();\r\n setResources([item]);\r\n } else setResources([item]);\r\n }\r\n };\r\n\r\n return (\r\n {label}
}\r\n - \r\n {items.map((item, index) => {\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\nAddResourceModal.propTypes = {\r\n directConfirm: PropTypes.bool, //exclude from backend\r\n isDisabled: PropTypes.bool, //exclude from backend\r\n onClose: PropTypes.func, //exclude from backend\r\n onConfirm: PropTypes.func, //exclude from backend\r\n isOpen: PropTypes.bool, //exclude from backend\r\n showTextInput: PropTypes.bool, //exclude from backend\r\n errorMessage: PropTypes.string, //exclude from backend\r\n orgId: PropTypes.string, //exclude from backend\r\n roleAssignmentCode: PropTypes.string, //exclude from backend\r\n\r\n closeModalHiddenText: PropTypes.string,\r\n addResourceText: PropTypes.string,\r\n title: PropTypes.string,\r\n lead: PropTypes.string,\r\n selectedResources: PropTypes.arrayOf(PropTypes.exact(Person.propTypes)),\r\n quickSearch: PropTypes.exact(QuickSearch.propTypes),\r\n getUserRolesEndpoint: PropTypes.string,\r\n roleInput: PropTypes.exact(SelectInput.propTypes)\r\n};\r\n\r\nAddResourceModal.defaultProps = {\r\n onConfirm: () => {},\r\n onClose: () => {},\r\n selectedResources: []\r\n};\r\n\r\nexport default AddResourceModal;\r\n","import React from 'react';\r\n\r\nconst UserContext = React.createContext();\r\n\r\nUserContext.propTypes = {};\r\n\r\nexport default UserContext;\r\n","import React, { useState, useContext, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport api from 'js/api-helper';\r\n\r\nimport OwnerAdminTable from './owner-admin-table';\r\nimport LoadingSpinner from 'components/loading-spinner';\r\nimport ResourceTable from 'components/resource-table';\r\nimport AddResourceModal from 'components/modal/add-resource-modal';\r\nimport ConfirmationModal from 'components/modal/confirmation-modal';\r\nimport Clicker from 'components/clicker';\r\nimport filterArraysWithoutDuplicatesByKey from 'js/filter-arrays-without-duplicates-by-key';\r\nimport sortKeyInObject from 'js/sortKeyInObject';\r\n\r\nimport UserContext from '../../../contexts/user-context';\r\nimport Tabs from 'components/tabs/tabs';\r\n\r\nconst OwnerAdmin = ({\r\n updateNestedValue,\r\n roleAssignmentCode,\r\n orgId,\r\n title,\r\n tabs,\r\n addButtonText,\r\n table,\r\n ownerAssignmentModal,\r\n confirmationModal,\r\n addOwnerModal,\r\n showAddAction,\r\n showAssignAction,\r\n removeRoleEndpoint,\r\n getRolesEndpoint,\r\n removeRoleAndRowEndpoint,\r\n addOwnerEndpoint,\r\n updateOwnerRoleEndpoint\r\n}) => {\r\n const [tableState, setTableState] = useState(table);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [errorMessage] = useState('');\r\n\r\n const [addOwnerModalIsOpen, setAddOwnerModalIsOpen] = useState(false);\r\n const [ownerAssignmentModalIsOpen, setOwnerAssignmentModalIsOpen] = useState(\r\n false\r\n );\r\n\r\n const { updateRoles } = useContext(UserContext);\r\n\r\n const handleOnRemoveClick = async resourceIds => {\r\n setIsLoading(true);\r\n\r\n try {\r\n await api.execute(removeRoleAndRowEndpoint, {\r\n ...resourceIds[0]\r\n });\r\n\r\n const { roles } = await api.execute(getRolesEndpoint, {});\r\n\r\n if (roles?.length > 0) updateRoles(roles);\r\n\r\n const updatedTable = {\r\n ...tableState,\r\n resources: tableState.resources.filter(resource => {\r\n return resourceIds[0].id.indexOf(resource.id) === -1;\r\n })\r\n };\r\n updateNestedValue({ table: updatedTable });\r\n setTableState(updatedTable);\r\n } catch (e) {\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n\r\n setIsLoading(false);\r\n };\r\n\r\n const handleOnRemoveRoleClick = async resource => {\r\n setIsLoading(true);\r\n\r\n const { id: idToReplace, orgId, roleId } = resource; // we select the id of the resource that we want to replace\r\n\r\n const multipleRows = tableState.resources.filter(\r\n resource => resource.orgId === orgId\r\n )[1];\r\n\r\n try {\r\n await api.execute(removeRoleEndpoint, { roleId });\r\n\r\n const { roles } = await api.execute(getRolesEndpoint, {});\r\n\r\n if (roles?.length > 0) updateRoles(roles);\r\n\r\n const { resources } = await api.execute(updateOwnerRoleEndpoint, {\r\n id: idToReplace,\r\n orgId // we expect the newly created resource to have this id\r\n });\r\n\r\n const updatedResources = multipleRows\r\n ? tableState.resources\r\n .filter(oldResource => oldResource.id !== idToReplace)\r\n .sort((a, b) => sortKeyInObject(a, b, 'displayName'))\r\n : tableState.resources.map(oldResource => {\r\n if (oldResource.id !== idToReplace) return oldResource;\r\n\r\n const newResource = resources.find(\r\n newResource => newResource.id === idToReplace\r\n );\r\n\r\n return newResource || oldResource;\r\n });\r\n const updatedTable = {\r\n ...tableState,\r\n resources: updatedResources\r\n };\r\n updateNestedValue({ table: updatedTable });\r\n\r\n setTableState({\r\n ...tableState,\r\n table: updatedTable\r\n });\r\n } catch (e) {\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n\r\n setIsLoading(false);\r\n };\r\n\r\n const handleOnAddOwnerConfirm = async (owners, selectedRole) => {\r\n setIsLoading(true);\r\n\r\n setAddOwnerModalIsOpen(false);\r\n\r\n try {\r\n const { resources } = await api.execute(addOwnerEndpoint, {\r\n roleAssignmentCode: selectedRole || roleAssignmentCode,\r\n orgId,\r\n ownerId: owners.map(owner => owner.id)[0]\r\n });\r\n\r\n const { roles } = await api.execute(getRolesEndpoint, {});\r\n\r\n if (roles?.length > 0) updateRoles(roles);\r\n\r\n const updatedTable = {\r\n ...tableState,\r\n resources: filterArraysWithoutDuplicatesByKey(\r\n tableState.resources,\r\n resources,\r\n 'id'\r\n )\r\n };\r\n updateNestedValue({ table: updatedTable });\r\n setTableState(updatedTable);\r\n } catch (e) {\r\n setIsLoading(false);\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n\r\n setIsLoading(false);\r\n };\r\n\r\n const handleOnOpenAssignmentModal = () => {\r\n setOwnerAssignmentModalIsOpen(true);\r\n };\r\n\r\n const showRemove = React.useMemo(() => {\r\n if (!removeRoleAndRowEndpoint && !removeRoleEndpoint) return 0;\r\n else if (removeRoleAndRowEndpoint) return 1;\r\n else if (removeRoleEndpoint) return 2;\r\n else return 0;\r\n }, [removeRoleAndRowEndpoint, removeRoleEndpoint]);\r\n\r\n useEffect(() => {\r\n setTableState(table);\r\n }, [table]);\r\n\r\n return (\r\n <>\r\n \r\n {title &&
\r\n \r\n {title}
}\r\n {lead &&{lead}
}\r\n\r\n
\r\n\r\n {resources?.length > 0 && (\r\n <>\r\n \r\n
\r\n\r\n \r\n {showRoleSelection && (\r\n
\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 &&
\r\n \r\n
\r\n {isLoading && \r\n {tabs && (\r\n
\r\n \r\n
\r\n )}\r\n {title && {title}
}\r\n {showAddAction && (\r\n\r\n
\r\n )}\r\n \r\n setAddOwnerModalIsOpen(true)}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {isOpen &&\r\n nodes?.map((_node, i) => {\r\n return (\r\n \r\n \r\n decorateWithButton(resource)\r\n )}\r\n headerColumnMobileIndex={table?.headerColumnMobileIndex}\r\n headerColumns={table?.headerColumns}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nSearchAdminTable.propTypes = {\r\n table: PropTypes.exact(ResourceTable.propTypes), // exclude from backend\r\n handleSearchItemClick: () => {}\r\n};\r\n\r\nexport default SearchAdminTable;\r\n","import React, { useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport ResourceTable from 'components/resource-table';\r\nimport LoadingSpinner from 'components/loading-spinner';\r\nimport SearchAdminTable from './search-admin-table';\r\nimport Tabs from 'components/tabs/tabs';\r\n\r\nconst SearchAdmin = ({ tabs, table, handleSearchItemClick }) => {\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n useEffect(() => {\r\n return () => {\r\n setIsLoading(false);\r\n };\r\n }, []);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n {isLoading && \r\n {tabs && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n ({\r\n text: tab.text,\r\n onClick: () => setCurrentTab(tab.text),\r\n isActive: currentTab === tab.text\r\n }))}\r\n />\r\n
\r\n );\r\n if (displayData?.tabList?.length > 1) return TabsElement;\r\n else if (\r\n displayData?.tabList?.length === 1 &&\r\n displayData.tabList[0].text?.length\r\n )\r\n return TabsElement;\r\n else return null;\r\n };\r\n\r\n return (\r\n \r\n
\r\n )}\r\n\r\n {renderTabs()}\r\n\r\n {displayData?.error && Error
}\r\n {displayData?.loading && (\r\n \r\n
\r\n )}\r\n {displayData?.data && (\r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nAdminDataDisplay.propTypes = {\r\n displayData: PropTypes.shape({\r\n id: PropTypes.string,\r\n breadcrumbText: PropTypes.string,\r\n endpointToggler: PropTypes.shape(Toggle.propTypes),\r\n data: PropTypes.oneOfType([\r\n PropTypes.shape(SchoolAdmin.propTypes),\r\n PropTypes.shape(StudentAdmin.propTypes),\r\n PropTypes.shape(OwnerAdmin.propTypes)\r\n ]),\r\n tabList: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n text: PropTypes.string,\r\n endpoint: PropTypes.string,\r\n isActive: PropTypes.bool\r\n })\r\n ),\r\n error: PropTypes.bool,\r\n loading: PropTypes.bool\r\n }),\r\n currentData: PropTypes.shape(AdminNode.RecursiveNodeProps),\r\n currentTab: PropTypes.string,\r\n setCurrentTab: PropTypes.func,\r\n updateNestedValue: PropTypes.func, // ignore backend\r\n handleSearchItemClick: PropTypes.func, // ignore backend\r\n handleRefreshData: PropTypes.func, // ignore backend\r\n regionAriaLabel: PropTypes.string // ignore backend\r\n};\r\nexport default AdminDataDisplay;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\nimport usePhrases from '../../hooks/use-phrases';\r\n\r\nconst SearchItem = ({\r\n name,\r\n description,\r\n orgnr,\r\n email,\r\n phoneNumber,\r\n onClick,\r\n isDisabled,\r\n ...rest\r\n}) => {\r\n const Element = onClick ? 'button' : 'div';\r\n const { orgNr: orgNrLabel } = usePhrases();\r\n\r\n return (\r\n \r\n {displayData?.breadcrumbText}\r\n
\r\n\r\n\r\n {displayData?.data && getAdminDataComponent(displayData.data)}\r\n
\r\n \r\n {name && {name}}\r\n {description && (\r\n {description}\r\n )}\r\n {orgnr && (\r\n \r\n {orgNrLabel} : {orgnr}\r\n \r\n )}\r\n {email && {email}}\r\n {phoneNumber && (\r\n {phoneNumber}\r\n )}\r\n
\r\n \r\n );\r\n};\r\n\r\nSearchItem.propTypes = {\r\n onClick: PropTypes.func, // ignore from backend\r\n isDisabled: PropTypes.bool,\r\n name: PropTypes.string,\r\n description: PropTypes.string,\r\n nodeId: PropTypes.string,\r\n orgnr: PropTypes.string,\r\n email: PropTypes.string,\r\n phoneNumber: PropTypes.string\r\n};\r\n\r\nexport default SearchItem;\r\n","import React, { useRef, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport api from '../../js/api-helper';\r\n\r\nimport TextInput from '../text-input';\r\nimport LoadingSpinner from '../loading-spinner';\r\n\r\nimport useDebounce from '../../hooks/use-debounce';\r\nimport useClickOutside from '../../hooks/use-click-outside';\r\nimport Clicker from 'components/clicker/clicker';\r\nimport SearchItem from 'components/search-item/search-item';\r\n\r\nconst MIN_CHARACTERS = 2;\r\nconst DEBOUNCE_TIME = 500;\r\nconst MAX_NUMBER_OF_RESULTS = 6;\r\n\r\nconst QuickSearchDropdown = ({\r\n textInput,\r\n searchButtonText,\r\n brukereLabel,\r\n skolerLabel,\r\n kommunerLabel,\r\n isDisabled,\r\n endpoint,\r\n onItemClick,\r\n onSearchClick\r\n}) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n const listRef = useRef();\r\n useClickOutside(listRef, () => setIsOpen(false));\r\n\r\n const [items, setItems] = useState([]);\r\n const [message, setMessage] = useState('');\r\n const [showAllText, setShowAllText] = useState('');\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [activeTextInput, setActiveTextInput] = useState({\r\n ...textInput,\r\n value: ''\r\n });\r\n const [activeFilters, setActiveFilters] = useState({\r\n users: false,\r\n schools: false,\r\n municipalities: false\r\n });\r\n\r\n const debouncedSearchText = useDebounce(activeTextInput.value, DEBOUNCE_TIME);\r\n\r\n const resetList = () => {\r\n setItems([]);\r\n setMessage('');\r\n setIsOpen(false);\r\n };\r\n\r\n const handleOnChange = value => {\r\n setActiveTextInput({ ...activeTextInput, value: value });\r\n if (value.length < 2) {\r\n setMessage('');\r\n setItems([]);\r\n setShowAllText('');\r\n setIsOpen(false);\r\n }\r\n };\r\n\r\n const executeSearch = async () => {\r\n setIsLoading(true);\r\n\r\n try {\r\n const { items, message, showAllText } = await api.execute(endpoint, {\r\n value: activeTextInput.value,\r\n includeBrukere: activeFilters.users,\r\n includeSkoler: activeFilters.schools,\r\n includeKommuner: activeFilters.municipalities,\r\n includeAll:\r\n Object.values(activeFilters).every(val => val) ||\r\n Object.values(activeFilters).every(val => !val)\r\n });\r\n\r\n if (items?.length > 0 || message) setIsOpen(true);\r\n\r\n if (message) setMessage(message);\r\n else setMessage('');\r\n\r\n if (items?.length) setItems(items);\r\n else setItems([]);\r\n\r\n if (showAllText) setShowAllText(showAllText);\r\n else setShowAllText('');\r\n\r\n setIsLoading(false);\r\n } catch (err) {\r\n setItems([]);\r\n err.message ? setMessage(err.message) : setMessage('');\r\n setIsLoading(false);\r\n }\r\n };\r\n\r\n const handleOnSearchClick = () => {\r\n if (activeTextInput.value.length >= 2) {\r\n onSearchClick(\r\n activeTextInput.value,\r\n activeFilters.users,\r\n activeFilters.schools,\r\n activeFilters.municipalities,\r\n Object.values(activeFilters).every(val => val) ||\r\n Object.values(activeFilters).every(val => !val)\r\n );\r\n setIsOpen(false);\r\n }\r\n };\r\n\r\n const handleOnResultClick = item => {\r\n resetList();\r\n\r\n onItemClick(item);\r\n\r\n setActiveTextInput({ ...activeTextInput, value: '' });\r\n };\r\n\r\n React.useEffect(() => {\r\n if (debouncedSearchText.length >= MIN_CHARACTERS) {\r\n executeSearch();\r\n }\r\n }, [debouncedSearchText]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nQuickSearchDropdown.propTypes = {\r\n isDisabled: PropTypes.bool, //exclude from backend\r\n onItemClick: PropTypes.func, //exclude from backend\r\n onSearchClick: PropTypes.func, //exclude from backend\r\n textInput: PropTypes.exact(TextInput.propTypes),\r\n searchButtonText: PropTypes.string,\r\n brukereLabel: PropTypes.string,\r\n skolerLabel: PropTypes.string,\r\n kommunerLabel: PropTypes.string,\r\n endpoint: PropTypes.string.isRequired //exclude from backend\r\n};\r\n\r\nexport default QuickSearchDropdown;\r\n","import api from 'js/api-helper';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useEffect, useState, useContext, useMemo, useRef } from 'react';\r\nimport AdminNode from './admin-node';\r\nimport cn from 'classnames';\r\nimport HeaderContext from '../../contexts/header-context';\r\nimport AdminDataDisplay from './admin-data-display';\r\nimport useClickOutside from '../../hooks/use-click-outside';\r\nimport QuickSearchDropdown from 'components/quick-search-dropdown/quick-search-dropdown';\r\n\r\nconst Admin = ({ title, showSearch, search, searchEndpoint, nodes }) => {\r\n const { setAdminHeaderData } = useContext(HeaderContext);\r\n const listRef = useRef();\r\n const clickedOutside = useClickOutside(listRef);\r\n const [currentTab, setCurrentTab] = useState(null);\r\n const [currentNodes, setCurrentNodes] = useState(nodes);\r\n const [currentData, setCurrentData] = useState(null);\r\n const [displayData, setDisplayData] = useState({\r\n loading: false,\r\n error: false,\r\n data: null\r\n });\r\n\r\n const newNodes = useMemo(() => {\r\n function isStatusOk(node) {\r\n const noChildNodes = !node?.nodes?.length;\r\n\r\n return noChildNodes\r\n ? node.statusOk\r\n : !node.statusOk\r\n ? node.statusOk\r\n : node.nodes.every(childNode => isStatusOk(childNode));\r\n }\r\n\r\n function searchTree(_nodes) {\r\n return _nodes?.map(node => {\r\n return {\r\n ...node,\r\n statusOk: node.isExcluded ? true : isStatusOk(node),\r\n nodes: node.nodes ? searchTree(node.nodes) : undefined\r\n };\r\n });\r\n }\r\n\r\n return searchTree(currentNodes);\r\n }, [currentNodes]);\r\n\r\n const updateNestedValue = ({\r\n nodeId,\r\n tabData,\r\n isExcluded,\r\n forceUpdateStatus = false\r\n }) => {\r\n function updateTree(_nodes) {\r\n return _nodes?.map(node => {\r\n if (nodeId === node.id) {\r\n if (typeof isExcluded === 'boolean') {\r\n return {\r\n ...node,\r\n isExcluded: isExcluded,\r\n startNode: false,\r\n endpointToggler: {\r\n ...node.endpointToggler,\r\n isLeft: !isExcluded\r\n }\r\n };\r\n }\r\n\r\n const statusOk = Boolean(\r\n tabData?.type === 'owner' && tabData?.table?.resources?.length\r\n );\r\n return {\r\n ...node,\r\n statusOk: forceUpdateStatus ? statusOk : node.statusOk,\r\n startNode: false\r\n };\r\n } else\r\n return {\r\n ...node,\r\n startNode: false,\r\n nodes: node.nodes ? updateTree(node.nodes) : undefined\r\n };\r\n });\r\n }\r\n\r\n if (\r\n typeof nodeId === 'string' &&\r\n (typeof tabData === 'object' || typeof isExcluded === 'boolean')\r\n ) {\r\n const result = updateTree(currentNodes);\r\n setCurrentNodes(result);\r\n }\r\n };\r\n\r\n const handleSearch = (\r\n searchQuery,\r\n includeBrukere,\r\n includeSkoler,\r\n includeKommuner,\r\n includeAll\r\n ) => {\r\n setDisplayData(_displayData => ({\r\n ..._displayData,\r\n loading: true,\r\n error: false\r\n }));\r\n api\r\n .execute(searchEndpoint, {\r\n value: searchQuery,\r\n includeBrukere,\r\n includeSkoler,\r\n includeKommuner,\r\n includeAll\r\n })\r\n .then(response => {\r\n setCurrentData(_currentData => ({\r\n ..._currentData,\r\n tabList: response.tabList,\r\n id: 'undefined',\r\n error: false,\r\n endpointToggler: undefined,\r\n breadcrumbText: undefined\r\n }));\r\n })\r\n .catch(() =>\r\n setDisplayData(_displayData => ({\r\n ..._displayData,\r\n loading: false,\r\n error: true\r\n }))\r\n );\r\n };\r\n\r\n const handleSearchItemClick = ({ nodeId }) => {\r\n window.history.replaceState(null, '', '?' + nodeId);\r\n let foundNode;\r\n const findNode = nodes => {\r\n nodes?.forEach(node => {\r\n if (nodeId === node.id) {\r\n foundNode = node;\r\n } else if (node.nodes) findNode(node.nodes);\r\n });\r\n };\r\n findNode(nodes);\r\n setCurrentData(foundNode);\r\n };\r\n\r\n useEffect(() => {\r\n if (currentData?.adminHeader) {\r\n setAdminHeaderData(currentData.adminHeader);\r\n } else {\r\n setAdminHeaderData({\r\n name: '',\r\n infos: null\r\n });\r\n }\r\n }, [currentData]);\r\n\r\n const getData = shouldForceUpdate => {\r\n let tabDataEndpoint = '',\r\n tabText = '',\r\n storedTabListData = null;\r\n const currentTabIndex = currentData?.tabList?.findIndex(\r\n tab => tab?.text === currentTab\r\n );\r\n if (currentData && typeof currentTabIndex === 'number') {\r\n if (currentTabIndex === -1) {\r\n tabText = currentData.tabList[0]?.text;\r\n tabDataEndpoint = currentData.tabList[0]?.endpoint;\r\n setCurrentTab(tabText);\r\n // const currentTabIndex = currentData?.tabList?.indexOf(currentTab);\r\n } else {\r\n if(currentData?.tabList[currentTabIndex]) {\r\n const { text = \"\", endpoint = \"\" } = currentData.tabList[currentTabIndex];\r\n tabText = text;\r\n tabDataEndpoint = endpoint;\r\n }\r\n }\r\n storedTabListData = currentData?.tabList[currentTabIndex]?.data;\r\n }\r\n\r\n // let timeout;\r\n const fetchAdminData = async endpoint => {\r\n setDisplayData(_displayData => ({\r\n ..._displayData,\r\n loading: true,\r\n error: false\r\n }));\r\n try {\r\n const data = await api.execute(endpoint);\r\n setDisplayData({\r\n data,\r\n loading: false,\r\n error: false,\r\n endpointToggler: currentData?.endpointToggler,\r\n id: currentData?.id,\r\n tabList: currentData?.tabList,\r\n breadcrumbText: currentData?.breadcrumbText\r\n });\r\n updateNestedValue({ nodeId: currentData.id, tabData: data });\r\n } catch (err) {\r\n setDisplayData(_displayData => ({\r\n data: null,\r\n loading: false,\r\n endpointToggler: null,\r\n breadcrumbText: '',\r\n id: '',\r\n error: true,\r\n tabList: null\r\n }));\r\n }\r\n };\r\n\r\n if ((shouldForceUpdate || !storedTabListData) && tabDataEndpoint) {\r\n fetchAdminData(tabDataEndpoint);\r\n } else if (storedTabListData) {\r\n setDisplayData({\r\n loading: false,\r\n error: false,\r\n data: storedTabListData,\r\n id: currentData?.id,\r\n breadcrumbText: currentData?.breadcrumbText,\r\n tabList: currentData?.tabList\r\n });\r\n } else {\r\n // There is no tabs or endpoints\r\n setDisplayData(_displayData => ({\r\n ..._displayData,\r\n data: null,\r\n tabList: null,\r\n endpointToggler: null,\r\n breadcrumbText: '',\r\n id: ''\r\n }));\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n getData(false);\r\n }, [currentData, currentTab]);\r\n\r\n return (\r\n <>\r\n \r\n setIsOpen(message || items.length > 0)}\r\n onEnter={handleOnSearchClick}\r\n isDisabled={isDisabled}\r\n hasAutoComplete={false}\r\n />\r\n\r\n {isLoading && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n {isOpen && (\r\n
\r\n \r\n \r\n {showAllText}\r\n \r\n )}\r\n {message && (\r\n
\r\n )}\r\n - \r\n {items?.slice(0, MAX_NUMBER_OF_RESULTS).map((item, index) => (\r\n
- \r\n
{message}
\r\n )}\r\n\r\n {brukereLabel && (\r\n <>\r\n \r\n setActiveFilters({\r\n ...activeFilters,\r\n users: !activeFilters.users\r\n })\r\n }\r\n value=\"users\"\r\n checked={activeFilters.users}\r\n />\r\n \r\n \r\n )}\r\n {skolerLabel && (\r\n <>\r\n \r\n setActiveFilters({\r\n ...activeFilters,\r\n schools: !activeFilters.schools\r\n })\r\n }\r\n value=\"schools\"\r\n checked={activeFilters.schools}\r\n />\r\n \r\n \r\n )}\r\n {kommunerLabel && (\r\n <>\r\n \r\n setActiveFilters({\r\n ...activeFilters,\r\n municipalities: !activeFilters.municipalities\r\n })\r\n }\r\n value=\"municipalities\"\r\n checked={activeFilters.municipalities}\r\n />\r\n \r\n {kommunerLabel}\r\n \r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {title &&
\r\n\r\n {title}
}\r\n\r\n {showSearch && (\r\n \r\n
\r\n )}\r\n \r\n {newNodes?.map((node, i) => {\r\n return (\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nEditAdminModal.propTypes = {\r\n isDisabled: PropTypes.bool, //exclude from backend\r\n onClose: PropTypes.func, //exclude from backend\r\n isOpen: PropTypes.bool, //exclude from backend\r\n closeModalHiddenText: PropTypes.string,\r\n title: PropTypes.string,\r\n lead: PropTypes.string,\r\n saveEndpoint: PropTypes.string,\r\n inputs: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n ...TextInput.propTypes,\r\n ...SelectInput.propTypes,\r\n type: PropTypes.string,\r\n value: PropTypes.string,\r\n valueArray: PropTypes.arrayOf(PropTypes.string)\r\n })\r\n ),\r\n buttonText: PropTypes.exact({\r\n global: PropTypes.exact({\r\n save: PropTypes.string,\r\n saveAndClose: PropTypes.string,\r\n closeWithoutSaving: PropTypes.string\r\n })\r\n })\r\n};\r\n\r\nEditAdminModal.defaultProps = {\r\n onConfirm: () => {},\r\n onClose: () => {},\r\n inputs: []\r\n};\r\n\r\nexport default EditAdminModal;\r\n\r\nEditAdminModal.defaultProps = {\r\n buttonText: {\r\n global: {\r\n save: 'Lagre',\r\n saveAndClose: 'Lagre og lukk',\r\n closeWithoutSaving: 'Lukk uten å lagre'\r\n }\r\n }\r\n};\r\n","import React, { useContext, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\nimport HeaderContext from '../../contexts/header-context';\r\nimport usePhrases from '../../hooks/use-phrases';\r\nimport InfoBubbleButton from 'components/info-bubble-button/info-bubble-button';\r\nimport Clicker from 'components/clicker/clicker';\r\nimport EditAdminModal from 'components/edit-admin-modal/edit-admin-modal';\r\n\r\nconst colors = {\r\n green: 'green',\r\n blue: 'blue',\r\n black: 'black'\r\n};\r\n\r\nconst AdminHeader = ({\r\n name,\r\n infos,\r\n color,\r\n submitEndpoint = '/api/on-edit-profile.json',\r\n editAdminModal,\r\n headingLevel\r\n}) => {\r\n const { adminHeaderData } = useContext(HeaderContext);\r\n const { edit } = usePhrases();\r\n\r\n const [isOpen, setIsOpen] = useState(false);\r\n\r\n const currentName = useMemo(() => {\r\n return adminHeaderData?.name || name;\r\n }, [adminHeaderData?.name, name]);\r\n const currentInfos = useMemo(() => {\r\n return adminHeaderData?.infos || infos;\r\n }, [adminHeaderData?.infos, infos]);\r\n const currentEditModal = useMemo(\r\n () => adminHeaderData?.editAdminModal || editAdminModal,\r\n [adminHeaderData?.editAdminModal, editAdminModal]\r\n );\r\n\r\n const HeadingElement = headingLevel ? 'h' + headingLevel : 'h2';\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n \r\n {currentName}\r\n \r\n {currentEditModal && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n {(adminHeaderData.submitEndpoint || submitEndpoint) && (\r\n setIsOpen(true)}\r\n />\r\n )}\r\n
\r\n \r\n {currentInfos && (\r\n
\r\n - \r\n {currentInfos.map(({ label, value, infoBubble }, index) => (\r\n
- \r\n {`${label}`}\r\n {`${value}`}\r\n \r\n {infoBubble &&
}\r\n \r\n \r\n ))}\r\n
{children}
\r\n \r\n \r\n setIsOpen(false)}\r\n className=\"language-picker__close-button\"\r\n />\r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nLanguagePicker.propTypes = {\r\n theme: PropTypes.string, //ignore backend\r\n languages: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n text: PropTypes.string,\r\n id: PropTypes.string,\r\n endpoint: PropTypes.string,\r\n isCurrent: PropTypes.bool\r\n })\r\n ),\r\n alignCenter: PropTypes.bool\r\n};\r\n\r\nLanguagePicker.defaultProps = {\r\n languages: [],\r\n theme: themes.default\r\n};\r\n\r\nLanguagePicker.themes = themes;\r\n\r\nexport default LanguagePicker;\r\n","import React, { useState, useRef, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport useClickOutside from '../../hooks/use-click-outside';\r\nimport Icon from '../icon';\r\n\r\nimport UserContext from '../../contexts/user-context';\r\n\r\nconst themes = { dark: 'dark', default: 'default' };\r\n\r\nconst UserSwitcher = ({\r\n name,\r\n role,\r\n logoutLink,\r\n links,\r\n theme,\r\n userSwitcherOpenUUText,\r\n userSwitcherCloseUUText\r\n}) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n\r\n //TO DO: Find better way to do this for pages that don't use context. If all pages should use context links should be initialised in the context nnot in UserSwitcher first.\r\n const { roles, updateRoles } = useContext(UserContext) || { roles: links };\r\n\r\n const componentRef = useRef();\r\n\r\n useClickOutside(componentRef, () => setIsOpen(false));\r\n\r\n React.useEffect(() => {\r\n updateRoles && updateRoles(links);\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nUserSwitcher.propTypes = {\r\n name: PropTypes.string.isRequired,\r\n theme: PropTypes.oneOf(Object.values(themes)), // ignore from backend\r\n role: PropTypes.string,\r\n links: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n text: PropTypes.string.isRequired,\r\n href: PropTypes.string.isRequired,\r\n description: PropTypes.string\r\n })\r\n ),\r\n logoutLink: PropTypes.shape({\r\n text: PropTypes.string.isRequired,\r\n href: PropTypes.string.isRequired\r\n }),\r\n userSwitcherOpenUUText: PropTypes.string,\r\n userSwitcherCloseUUText: PropTypes.string\r\n};\r\n\r\nUserSwitcher.defaultProps = {\r\n links: [],\r\n theme: themes.default\r\n};\r\n\r\nUserSwitcher.themes = themes;\r\n\r\nexport default UserSwitcher;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst Breadcrumbs = ({ label, links }) => {\r\n return (\r\n - \r\n {roles?.map((link, index) => {\r\n return (\r\n
- \r\n
\r\n
\r\n );\r\n};\r\n\r\nBreadcrumbs.propTypes = {\r\n label: PropTypes.string,\r\n links: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n text: PropTypes.string.isRequired,\r\n href: PropTypes.string.isRequired,\r\n isActive: PropTypes.bool\r\n })\r\n )\r\n};\r\n\r\nBreadcrumbs.defaultProps = {\r\n links: []\r\n};\r\n\r\nexport default Breadcrumbs;\r\n","import React from 'react';\r\n\r\nconst EleverContentContext = React.createContext();\r\n\r\nEleverContentContext.propTypes = {};\r\n\r\nexport default EleverContentContext;\r\n","import React, { useContext, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport apiHelper from 'js/api-helper';\r\n\r\nimport EleverContentContext from '../../contexts/elever-content-context';\r\n\r\nimport Clicker from 'components/clicker';\r\nimport LoadingSpinner from 'components/loading-spinner';\r\n\r\nconst LINK_TOKEN = '$link';\r\n\r\nconst Notification = ({\r\n id,\r\n timeSince,\r\n notificationText,\r\n notificationLinkText,\r\n notificationLinkUrl,\r\n updateNotifications,\r\n declineButtonText,\r\n declineEndpoint,\r\n acceptButtonText,\r\n acceptEndpoint\r\n}) => {\r\n const c = useContext(EleverContentContext);\r\n\r\n const [isDisabled, setIsDisabled] = useState(false);\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n const replaceTokens = (stringToParse, link) => {\r\n const split = stringToParse.split(LINK_TOKEN);\r\n\r\n if (split.length === 1 || !link) return stringToParse;\r\n\r\n split.splice(\r\n 1,\r\n 0,\r\n \r\n {label && {label}}\r\n {links && (\r\n
\r\n - \r\n {links.map((link, index) => {\r\n return (\r\n
- \r\n {!link.isActive ? (\r\n \r\n {link.text}\r\n \r\n ) : (\r\n {link.text}\r\n )}\r\n \r\n );\r\n })}\r\n
\r\n {timeSince &&
\r\n );\r\n};\r\n\r\nNotification.propTypes = {\r\n id: PropTypes.string,\r\n timeSince: PropTypes.string,\r\n notificationLinkUrl: PropTypes.string,\r\n notificationLinkText: PropTypes.string,\r\n notificationText: PropTypes.string,\r\n updateNotifications: PropTypes.func,\r\n declineButtonText: PropTypes.string,\r\n declineEndpoint: PropTypes.string,\r\n acceptButtonText: PropTypes.string,\r\n acceptEndpoint: PropTypes.string\r\n};\r\n\r\nNotification.propTypesMeta = {\r\n removed: 'exclude'\r\n};\r\n\r\nNotification.defaultProps = {\r\n notificationText: '',\r\n planLinks: [],\r\n showMoreText: 'Vis mer',\r\n showLessText: 'Vis mindre'\r\n};\r\n\r\nexport default Notification;\r\n","import React, { useState, useRef, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\nimport useClickOutside from '../../hooks/use-click-outside';\r\n\r\nimport Icon from 'components/icon';\r\nimport DropdownBubble from 'components/dropdown-bubble/dropdown-bubble';\r\nimport Clicker from 'components/clicker/clicker';\r\nimport Notification from 'components/notification/notification';\r\n\r\nconst NotificationsMenu = ({\r\n notificationsMenuLabel,\r\n notificationHeading,\r\n noNotificationsInfoText,\r\n notifications,\r\n isDisabled\r\n}) => {\r\n const [notificationsOpen, setNotificationsOpen] = useState(false);\r\n const [currentNotifications, setCurrentNotifications] = useState(\r\n notifications ?? []\r\n );\r\n\r\n const notificationRef = useRef();\r\n useClickOutside(notificationRef, () => setNotificationsOpen(false));\r\n\r\n const updateNotifications = id => {\r\n setCurrentNotifications(prevNotifcations =>\r\n prevNotifcations.filter(notifcation => notifcation.id !== id)\r\n );\r\n };\r\n\r\n useEffect(() => {\r\n setCurrentNotifications(notifications);\r\n }, [notifications]);\r\n\r\n return (\r\n {timeSince}
}\r\n\r\n {notificationText && (\r\n
\r\n \r\n {replaceTokens(notificationText, {\r\n text: notificationLinkText,\r\n href: notificationLinkUrl\r\n })}\r\n
\r\n )}\r\n {declineEndpoint && acceptEndpoint && (\r\n\r\n handleButtonClick(declineEndpoint)}\r\n isDisabled={isDisabled}\r\n theme={Clicker.themes.secondary}\r\n >\r\n {declineButtonText}\r\n \r\n handleButtonClick(acceptEndpoint)}\r\n isDisabled={isDisabled}\r\n theme={Clicker.themes.primary}\r\n >\r\n {acceptButtonText}\r\n \r\n {isLoading &&
\r\n )}\r\n \r\n setNotificationsOpen(!notificationsOpen)}\r\n iconName={\r\n notificationsOpen\r\n ? currentNotifications.length > 0\r\n ? Icon.names.bellNotificationActive\r\n : Icon.names.bellActive\r\n : currentNotifications.length > 0\r\n ? Icon.names.bellNotification\r\n : Icon.names.bell\r\n }\r\n iconSize={Clicker.iconSizes.largePlus}\r\n >\r\n {currentNotifications.length > 0 && (\r\n \r\n {currentNotifications.length > 99\r\n ? '99'\r\n : currentNotifications.length}\r\n \r\n )}\r\n \r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nNotificationsMenu.propTypes = {\r\n notificationsMenuLabel: PropTypes.string,\r\n notificationHeading: PropTypes.string,\r\n noNotificationsInfoText: PropTypes.string,\r\n isDisabled: PropTypes.bool,\r\n notifications: PropTypes.arrayOf(PropTypes.exact(Notification.propTypes))\r\n};\r\n\r\nNotificationsMenu.defaultProps = {\r\n notifications: []\r\n};\r\n\r\nNotificationsMenu.propTypesMeta = {\r\n isDisabled: 'exclude'\r\n};\r\n\r\nexport default NotificationsMenu;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Clicker from 'components/clicker';\r\n\r\nconst SkipLink = ({ linkText }) => (\r\n \r\n
\r\n {notificationHeading}
\r\n\r\n {currentNotifications && currentNotifications.length ? (\r\n currentNotifications.map(notification => (\r\n
\r\n \r\n \r\n {noNotificationsInfoText}\r\n
\r\n )}\r\n\r\n
\r\n );\r\n};\r\n\r\nSiteInfoBanner.propTypes = {\r\n infoTextAsHtml: PropTypes.string\r\n};\r\n\r\nexport default SiteInfoBanner;\r\n","import React from 'react';\r\n\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\nimport LanguagePicker from './language-picker';\r\nimport UserSwitcher from './user-switcher';\r\nimport Breadcrumbs from './breadcrumbs';\r\nimport NotificationsMenu from 'components/notifications-menu/notifications-menu';\r\nimport SkipLink from 'components/skip-link/skip-link';\r\nimport SiteInfoBanner from 'components/site-info-banner/site-info-banner';\r\nimport Toggle from 'components/toggle/toggle';\r\n\r\nconst themes = {\r\n default: 'default',\r\n dark: 'dark'\r\n};\r\nconst sessionStorageVar = 'prevStatisticsHref';\r\n\r\nconst Header = ({\r\n skipLink,\r\n title,\r\n theme,\r\n infoBanner,\r\n breadcrumbs,\r\n userSwitcher,\r\n notificationsMenu,\r\n languagePicker,\r\n showLanguagePicker,\r\n showBreadcrumbs,\r\n showUserSwitcher,\r\n hrefToggler\r\n}) => {\r\n const toStatisticsPageOrBack = () => {\r\n if (window?.location?.pathname.includes('statist')) {\r\n const prevUrl = sessionStorage.getItem(sessionStorageVar);\r\n if (prevUrl) {\r\n window.location = prevUrl;\r\n } else {\r\n window.history.back();\r\n }\r\n } else {\r\n sessionStorage.setItem(sessionStorageVar, window.location.pathname);\r\n window.location = hrefToggler.href;\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {infoBanner && \r\n {title &&
\r\n {title}
}\r\n \r\n {showLanguagePicker && languagePicker && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nHeader.defaultProps = {\r\n breadcrumbs: {}\r\n};\r\n\r\nHeader.propTypes = {\r\n skipLink: PropTypes.exact(SkipLink.propTypes),\r\n title: PropTypes.string.isRequired,\r\n infoBanner: PropTypes.exact(SiteInfoBanner.propTypes),\r\n showBreadcrumbs: PropTypes.bool,\r\n hrefToggler: PropTypes.shape(Toggle.propTypes),\r\n theme: PropTypes.oneOf(Object.values(themes)),\r\n showUserSwitcher: PropTypes.bool,\r\n userSwitcher: PropTypes.exact(UserSwitcher.propTypes),\r\n notificationsMenu: PropTypes.exact(NotificationsMenu.propTypes),\r\n showLanguagePicker: PropTypes.bool,\r\n languagePicker: PropTypes.exact(LanguagePicker.propTypes),\r\n breadcrumbs: PropTypes.exact(Breadcrumbs.propTypes)\r\n};\r\n\r\nHeader.themes = themes;\r\n\r\nHeader.defaultProps = {\r\n breadcrumbs: {},\r\n showBreadcrumbs: true,\r\n showUserSwitcher: true,\r\n showLanguagePicker: true,\r\n theme: themes.default\r\n};\r\n\r\nexport default Header;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Clicker from '../clicker';\r\nimport Icon from 'components/icon';\r\n\r\nconst Footer = ({\r\n disclaimer,\r\n feedback,\r\n feedbackEmail,\r\n siteLinks,\r\n externalLink,\r\n htmlAbout\r\n}) => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nFooter.propTypes = {\r\n disclaimer: PropTypes.string,\r\n feedback: PropTypes.string,\r\n feedbackEmail: PropTypes.string,\r\n htmlAbout: PropTypes.string,\r\n siteLinks: PropTypes.arrayOf(PropTypes.exact(Clicker.propTypes)),\r\n externalLink: PropTypes.exact(Clicker.propTypes)\r\n};\r\n\r\nFooter.defaultProps = {\r\n siteLinks: []\r\n};\r\n\r\nexport default Footer;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Modal from 'components/modal';\r\nimport LoadingSpinner from 'components/loading-spinner';\r\nimport Clicker from 'components/clicker';\r\nimport TextInput from 'components/text-input';\r\nimport InputByType from 'components/input-by-type';\r\nimport SelectInput from 'components/select-input/select-input';\r\nimport useQuestionnaireFormControl from '../../hooks/use-questionnaire-form-control';\r\n\r\nconst EditInfoModal = ({\r\n isOpen,\r\n onClose,\r\n onConfirm,\r\n isDisabled,\r\n closeModalHiddenText,\r\n title,\r\n lead,\r\n inputs,\r\n submitEndpoint,\r\n saveButtonText,\r\n cancelButtonText\r\n}) => {\r\n const {\r\n questions,\r\n isLoading,\r\n isDirty,\r\n setQuestions,\r\n resetSections,\r\n handleOnInputChange,\r\n handleOnSubmit\r\n } = useQuestionnaireFormControl(inputs, submitEndpoint);\r\n\r\n const disableSave = React.useMemo(() => {\r\n return !isDirty || isLoading;\r\n }, [isDirty, isLoading]);\r\n\r\n const handleConfirm = async () => {\r\n try {\r\n const res = await handleOnSubmit();\r\n if (res.errors) {\r\n throw res;\r\n }\r\n const { infoList, title } = res;\r\n onConfirm(infoList, title);\r\n } catch (err) {\r\n // eslint-disable-next-line no-console\r\n console.log(err);\r\n }\r\n };\r\n\r\n const handleClose = () => {\r\n resetSections();\r\n onClose();\r\n };\r\n\r\n const handleIfSprakInputChange = (value, id) => {\r\n // 15.09 - ASK: Matches on inputKey must correspond to value from BE\r\n const sprakQuestion = questions.find(\r\n q => q.id === id && q.inputKey === 'sprak'\r\n );\r\n if (sprakQuestion) {\r\n const newQuestions = questions.map(question => {\r\n if (question.inputKey === 'morsmal') {\r\n const newCheckBoxGroup = question.group.filter(groupItem =>\r\n value.includes(groupItem.label)\r\n );\r\n if (newCheckBoxGroup.length !== value.length) {\r\n const filledCheckBoxGroup = value.map(sprak => {\r\n const checkboxForSprak = newCheckBoxGroup.find(\r\n checkbox => checkbox.label === sprak\r\n );\r\n if (checkboxForSprak) {\r\n return checkboxForSprak;\r\n }\r\n\r\n return {\r\n id: `newCheckboxId-${sprak}`,\r\n label: sprak,\r\n name: sprak,\r\n value: false\r\n };\r\n });\r\n return {\r\n ...question,\r\n group: filledCheckBoxGroup\r\n };\r\n }\r\n return {\r\n ...question,\r\n group: newCheckBoxGroup\r\n };\r\n }\r\n return question;\r\n });\r\n setQuestions(newQuestions);\r\n }\r\n handleOnInputChange(value, id);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n {breadcrumbs && showBreadcrumbs && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n {hrefToggler?.show && (\r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nEditInfoModal.propTypes = {\r\n isDisabled: PropTypes.bool, //exclude from backend\r\n disableSave: PropTypes.bool, //exclude from backend\r\n isLoading: PropTypes.bool, //exclude from backend\r\n onClose: PropTypes.func, //exclude from backend\r\n onConfirm: PropTypes.func, //exclude from backend\r\n isOpen: PropTypes.bool, //exclude from backend\r\n onInputChange: PropTypes.func, //exclude from backend\r\n closeModalHiddenText: PropTypes.string,\r\n title: PropTypes.string,\r\n lead: PropTypes.string,\r\n inputs: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n ...TextInput.propTypes,\r\n ...SelectInput.propTypes,\r\n type: PropTypes.string,\r\n value: PropTypes.string,\r\n valueArray: PropTypes.arrayOf(PropTypes.string)\r\n })\r\n ),\r\n submitEndpoint: PropTypes.string,\r\n saveButtonText: PropTypes.string,\r\n cancelButtonText: PropTypes.string\r\n};\r\n\r\nEditInfoModal.defaultProps = {\r\n onConfirm: () => {},\r\n onClose: () => {},\r\n inputs: []\r\n};\r\n\r\nexport default EditInfoModal;\r\n","import cn from 'classnames';\r\nimport Clicker from 'components/clicker';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport HeaderContext from '../../contexts/header-context';\r\nimport usePhrases from '../../hooks/use-phrases';\r\nimport useQuestionnaireFormControl from '../../hooks/use-questionnaire-form-control';\r\nimport EditInfoModal from '../edit-info-modal/edit-info-modal';\r\n\r\nconst colors = {\r\n green: 'green',\r\n blue: 'blue',\r\n black: 'black',\r\n gray: 'gray'\r\n};\r\n\r\nconst ProfileHeader = ({\r\n name,\r\n infos,\r\n color,\r\n submitEndpoint,\r\n editProfileModal,\r\n showEditButton,\r\n headingLevel\r\n}) => {\r\n const { edit } = usePhrases();\r\n const [isOpen, setIsOpen] = useState(false);\r\n const { profileHeaderData, setProfileHeaderData } = useContext(HeaderContext);\r\n\r\n const [activeInputs, setActiveInputs] = useState(\r\n profileHeaderData?.inputs || editProfileModal.inputs\r\n );\r\n\r\n const [activeInfos, setActiveInfos] = useState(\r\n profileHeaderData?.infos || infos\r\n );\r\n const [activeName, setActiveName] = useState(profileHeaderData?.name || name);\r\n\r\n const { questions, isLoading, isDirty, handleOnInputChange, handleOnSubmit } =\r\n useQuestionnaireFormControl(activeInputs, submitEndpoint);\r\n\r\n useEffect(() => {\r\n if (typeof profileHeaderData?.name === 'string') {\r\n setActiveName(profileHeaderData?.name);\r\n }\r\n }, [profileHeaderData?.name]);\r\n useEffect(() => {\r\n if (Array.isArray(profileHeaderData?.infos)) {\r\n setActiveInfos(profileHeaderData?.infos);\r\n }\r\n }, [profileHeaderData?.infos]);\r\n useEffect(() => {\r\n if (Array.isArray(profileHeaderData?.inputs)) {\r\n setActiveInputs(profileHeaderData?.inputs);\r\n }\r\n }, [profileHeaderData?.inputs]);\r\n\r\n const disableSave = React.useMemo(() => {\r\n return !isDirty || isLoading;\r\n }, [isDirty, isLoading]);\r\n\r\n const handleOnConfirm = async () => {\r\n try {\r\n const res = await handleOnSubmit();\r\n if (res.errors) {\r\n throw res;\r\n }\r\n const { infos, name, inputs } = res;\r\n if (infos) setActiveInfos(infos);\r\n if (inputs) setActiveInputs(inputs);\r\n if (name) setActiveName(name);\r\n setProfileHeaderData(null);\r\n setIsOpen(false);\r\n } catch (err) {\r\n // eslint-disable-next-line no-console\r\n console.log(err);\r\n }\r\n };\r\n\r\n const HeadingElement = headingLevel ? 'h' + headingLevel : 'h2';\r\n\r\n return (\r\n <>\r\n \r\n {title &&
\r\n {title}
}\r\n {lead &&{lead}
}\r\n {questions && (\r\n\r\n {questions.map(input => {\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 {isLoading && (\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n {activeName}\r\n \r\n {showEditButton && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n {submitEndpoint && (\r\n setIsOpen(true)}\r\n />\r\n )}\r\n
\r\n \r\n {infos && (\r\n
\r\n - \r\n {activeInfos.map(({ label, value }, index) => (\r\n
- \r\n {`${label}`}\r\n {`${value}`}\r\n \r\n ))}\r\n
\r\n
\r\n {archiveConfirmationModal && (\r\n {replaceTokens(infoText, link)}
\r\n\r\n \r\n {children}\r\n \r\n
\r\n \r\n \r\n \r\n {renderIcon(trinn)}\r\n
\r\n \r\n );\r\n case types.letters:\r\n return (\r\n \r\n \r\n
\r\n \r\n );\r\n default:\r\n return null;\r\n }\r\n};\r\n\r\nGridCardIllustration.propTypes = {\r\n // FE\r\n isActive: PropTypes.bool,\r\n type: PropTypes.oneOf(Object.values(types)),\r\n\r\n // BE\r\n letters: PropTypes.string,\r\n numAnswered: PropTypes.number,\r\n totalQuestions: PropTypes.number,\r\n color: PropTypes.oneOf(Object.keys(colors)),\r\n trinn: PropTypes.oneOf(Object.values(trinnTypes))\r\n};\r\n\r\nGridCardIllustration.defaultProps = {};\r\n\r\nGridCardIllustration.types = types;\r\n\r\nexport default GridCardIllustration;\r\n","import PropTypes from 'prop-types';\r\n\r\nimport Clicker from 'components/clicker/clicker';\r\nimport GridCardIllustration from 'components/grid-card-illustration/grid-card-illustration';\r\nimport Tooltip from 'components/tooltip/tooltip';\r\n\r\nconst ElementPropShape = () => {};\r\n\r\nElementPropShape.propTypes = {\r\n id: PropTypes.string,\r\n columns: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n text: PropTypes.string,\r\n isList: PropTypes.bool,\r\n arstrinnSortOrder: PropTypes.string,\r\n smallCardHeader: PropTypes.string\r\n })\r\n ),\r\n link: PropTypes.exact(Clicker.propTypes),\r\n illustration: PropTypes.exact(GridCardIllustration.propTypes),\r\n closeDropdownText: PropTypes.string,\r\n\r\n studentBelongsToTeacher: PropTypes.bool,\r\n studentIsRequestedFromTeacher: PropTypes.bool,\r\n reviewed: PropTypes.bool,\r\n proposedDeleted: PropTypes.bool,\r\n requestedMoved: PropTypes.bool,\r\n\r\n infoTooltip: PropTypes.exact(Tooltip.propTypes),\r\n warningTooltip: PropTypes.exact(Tooltip.propTypes),\r\n isCurrentUser: PropTypes.bool,\r\n\r\n //FE\r\n menuItems: PropTypes.arrayOf(PropTypes.exact(Clicker.propTypes))\r\n};\r\n\r\nexport default ElementPropShape;\r\n","import React, { useRef, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport useClickOutside from '../../hooks/use-click-outside';\r\n\r\nimport Clicker from '../clicker';\r\nimport Icon from '../icon';\r\n\r\nconst TableMenuButton = ({\r\n items,\r\n isDisabled,\r\n menuButtonText,\r\n closeDropdownButtonLabel\r\n}) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n\r\n const menuRef = useRef();\r\n useClickOutside(menuRef, () => setIsOpen(false));\r\n\r\n return (\r\n \r\n {letters}\r\n
\r\n \r\n setIsOpen(isOpen => !isOpen)}\r\n >\r\n setIsOpen(false)}\r\n lead={dataString}\r\n closeButtonLabel={closeButtonLabel}\r\n />\r\n
\r\n );\r\n};\r\n\r\nDataOverflowHandler.propTypes = {\r\n dataString: PropTypes.string,\r\n closeButtonLabel: PropTypes.string\r\n};\r\n\r\nexport default DataOverflowHandler;\r\n","/* eslint-disable react/no-multi-comp */\r\n/* eslint-disable react/prop-types */\r\nimport React, { useMemo, forwardRef, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\nimport 'core-js/stable';\r\n\r\nimport { useTable, useRowSelect } from 'react-table';\r\nimport { useWindowSize } from '../../hooks/useWindowSize';\r\nimport useLocaleDate from '../../hooks/use-locale-date';\r\n\r\nimport ElementPropShape from 'components/grid-table-wrapper/element-prop-shape';\r\nimport Icon from '../icon';\r\nimport Clicker from '../clicker';\r\nimport TableMenuButton from './table-menu-button';\r\nimport Modal from 'components/modal/modal';\r\nimport InfoBubbleButton from 'components/info-bubble-button/info-bubble-button';\r\nimport Tooltip from 'components/tooltip/tooltip';\r\nimport DataOverflowHandler from 'components/data-overflow-handler/data-overflow-handler';\r\n\r\nconst columnName = index => {\r\n return `col${index}`;\r\n};\r\n\r\nconst TableCheckbox = forwardRef(({ indeterminate, ...rest }, ref) => {\r\n const defaultRef = React.useRef();\r\n const resolvedRef = ref || defaultRef;\r\n React.useEffect(() => {\r\n resolvedRef.current.indeterminate = indeterminate;\r\n }, [resolvedRef, indeterminate]);\r\n\r\n return ;\r\n});\r\n\r\nconst BaseTable = ({\r\n elements,\r\n headerColumnMobileIndex,\r\n specificHeaderColumnTabletIndex,\r\n columnHeaders,\r\n infoText,\r\n showMenus,\r\n showLinks,\r\n showCheckboxes,\r\n elementMenuDropdown,\r\n filteredListEmptyText\r\n}) => {\r\n const { width } = useWindowSize();\r\n const [modalData, setModalData] = useState(null);\r\n\r\n const isMobile = useMemo(() => width < 800, [width]);\r\n const isTablet = useMemo(() => width < 1100, [width]);\r\n const headerColumnTabletIndex = useMemo(\r\n () =>\r\n specificHeaderColumnTabletIndex\r\n ? specificHeaderColumnTabletIndex\r\n : Math.floor(columnHeaders.length / 2),\r\n [specificHeaderColumnTabletIndex]\r\n );\r\n const closeModal = () => setModalData(null);\r\n\r\n const data = useMemo(() => {\r\n return elements.map(resource => {\r\n return {\r\n ...resource,\r\n columns: resource.columns.reduce((acc, column, index) => {\r\n acc[columnName(index + 1)] = column;\r\n\r\n return acc;\r\n }, {})\r\n };\r\n }, []);\r\n }, [elements, isMobile, isTablet]);\r\n\r\n const { columns } = useMemo(() => {\r\n const columns = columnHeaders.reduce((acc, column, index) => {\r\n const accessor = columnName(index + 1);\r\n\r\n const col = acc.concat({\r\n Header: column.text,\r\n accessor,\r\n isVisible: isTablet\r\n ? accessor === columnName(headerColumnMobileIndex + 1)\r\n ? true\r\n : false\r\n : true\r\n });\r\n return col;\r\n }, []);\r\n return { columns };\r\n }, [elements, isMobile, isTablet]);\r\n\r\n const table = useTable(\r\n {\r\n columns,\r\n data,\r\n initialState: {}\r\n },\r\n useRowSelect,\r\n hooks => {\r\n return hooks.visibleColumns.push(columns => {\r\n const mobileColumns = isMobile\r\n ? [columns[headerColumnMobileIndex]]\r\n : isTablet\r\n ? columns.slice(0, headerColumnTabletIndex + 1)\r\n : columns;\r\n\r\n let conditionalColumns = [];\r\n\r\n if (showCheckboxes)\r\n conditionalColumns.push({\r\n id: 'selection',\r\n Header: ({ getToggleAllRowsSelectedProps }) => {\r\n return \r\n \r\n {dataString.split(',')[0]}\r\n \r\n \r\n {' +' + (dataString.split(',').length - 1)}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {headerGroups.map((headerGroup, hgIdx) => (\r\n \r\n {headerGroup.headers.map((column, hIdx) => {\r\n return column.Header ? (\r\n \r\n {column.render('Header')}\r\n \r\n ) : (\r\n \r\n );\r\n })}\r\n \r\n ))}\r\n \r\n \r\n {rows.map((row, rIdx) => {\r\n prepareRow(row);\r\n\r\n return (\r\n \r\n {row.cells.map((cell, cIdx) => {\r\n return (\r\n \r\n \r\n {cell.render('Cell')}\r\n {cIdx === 0 &&\r\n (cell.row.original.infoTooltip ? (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nBaseTable.propTypes = {\r\n elements: PropTypes.arrayOf(PropTypes.exact(ElementPropShape.propTypes)),\r\n columnHeaders: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n id: PropTypes.string,\r\n text: PropTypes.string\r\n })\r\n ),\r\n elementMenuDropdown: PropTypes.shape(TableMenuButton)\r\n};\r\n\r\nBaseTable.defaultProps = {\r\n showMenus: true,\r\n showLinks: true,\r\n headerColumnMobileIndex: 0\r\n};\r\n\r\nexport default BaseTable;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport useLocaleDate from '../../hooks/use-locale-date';\r\n\r\nimport DataOverflowHandler from 'components/data-overflow-handler/data-overflow-handler';\r\n\r\nconst GridCardColumn = ({\r\n isActive,\r\n index,\r\n columnHeaders,\r\n closeDropdownText,\r\n smallCardHeader,\r\n isList,\r\n text\r\n}) => {\r\n const checkForDate = text => {\r\n const isDate = !isNaN(Date.parse(text));\r\n let parsedPotentialDate = text;\r\n if (isDate) {\r\n const { formattedDate } = useLocaleDate(text);\r\n parsedPotentialDate = formattedDate;\r\n }\r\n return parsedPotentialDate;\r\n };\r\n\r\n return (\r\n \r\n
\r\n )}\r\n {elements && !elements.length && (\r\n \r\n
\r\n )}\r\n \r\n {filteredListEmptyText}\r\n
\r\n\r\n {modalData?.row.original.roleId === 'SL' &&\r\n modalData?.row.original.requestDelete && (\r\n
\r\n \r\n
\r\n )}\r\n - \r\n {modalData?.columns.map(column => {\r\n const { Header, id } = column;\r\n const originalData = modalData?.row?.original;\r\n const columnById = originalData?.columns[id];\r\n if (columnById) {\r\n return (\r\n
- \r\n
\r\n {Header}\r\n
\r\n {columnById?.text}\r\n \r\n );\r\n }\r\n return null;\r\n })}\r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n {checkedTitle}
\r\n {infoTooltip && (\r\n\r\n {columns && !!columns.length && (\r\n
\r\n - \r\n {columns.map((col, index) => {\r\n if (index === 0) return false;\r\n return (\r\n
\r\n
\r\n {isActive && showButtons && (\r\n \r\n {menuItems && menuItems.length > 1 && (\r\n
\r\n )}\r\n \r\n {menuItems.slice(1).map((button, index) => {\r\n return (\r\n {\r\n button.onClick(id);\r\n }}\r\n className=\"grid-card__action\"\r\n />\r\n );\r\n })}\r\n
\r\n )}\r\n \r\n {link && (\r\n {\r\n menuItems[0].onClick(id);\r\n }}\r\n className=\"grid-card__action\"\r\n />\r\n )}\r\n
\r\n \r\n {currentElements && !!currentElements.length ? (\r\n \r\n \r\n ) : (\r\n
\r\n );\r\n};\r\n\r\nBaseGrid.propTypes = {\r\n elements: PropTypes.arrayOf(PropTypes.exact(ElementPropShape.propTypes)),\r\n columnHeaders: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n id: PropTypes.string,\r\n text: PropTypes.string\r\n })\r\n ),\r\n showButtons: PropTypes.bool,\r\n filteredListEmptyText: PropTypes.string\r\n};\r\n\r\nBaseGrid.defaultProps = {};\r\n\r\nexport default BaseGrid;\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport useClickOutside from '../../hooks/use-click-outside';\r\n\r\nimport BaseTable from 'components/base-table/base-table';\r\nimport BaseGrid from 'components/base-grid/base-grid';\r\nimport Clicker from 'components/clicker/clicker';\r\nimport DropdownBubble from 'components/dropdown-bubble';\r\nimport Checkbox from 'components/checkbox/checkbox';\r\n\r\nconst formats = Object.freeze({\r\n grid: 'grid',\r\n table: 'table'\r\n});\r\n\r\nconst directions = Object.freeze({\r\n ascending: 'asc',\r\n descending: 'desc'\r\n});\r\n\r\nconst GridTableWrapper = ({\r\n addActions,\r\n filterAction,\r\n sortAction,\r\n columnHeaders,\r\n elements,\r\n showMenus,\r\n elementMenuDropdown,\r\n missingElementsHeader,\r\n missingElementsText,\r\n filteredListEmptyText\r\n}) => {\r\n const [currentFormat, setCurrentFormat] = useState(formats.grid);\r\n const [sorterMenuIsOpen, setSorterMenuIsOpen] = useState(false);\r\n const [filterMenuIsOpen, setFilterMenuIsOpen] = useState(false);\r\n\r\n const [currentElements, setCurrentElements] = useState(elements);\r\n const [originalElementsLength, setOriginalElementsLength] = useState(\r\n elements ? elements.length : 0\r\n );\r\n const [activeSortKey, setActiveSortKey] = useState({\r\n key: sortAction ? sortAction.sortAlternatives[0].sortKey : '',\r\n dir: directions.ascending\r\n });\r\n const [filterOptions, setFilterOptions] = useState(\r\n filterAction && filterAction.filterAlternatives\r\n );\r\n\r\n const filterBubbleRef = useRef(null);\r\n const sortBubbleRef = useRef(null);\r\n useClickOutside(filterBubbleRef, () => setFilterMenuIsOpen(false));\r\n useClickOutside(sortBubbleRef, () => setSorterMenuIsOpen(false));\r\n\r\n const filterAndSortList = () => {\r\n // Filter\r\n let filteredElements = elements;\r\n if (filterOptions) {\r\n filteredElements = filterOptions.reduce((accumulator, currentFilter) => {\r\n const isAnyFilterChosen = currentFilter.groupAlternatives.some(\r\n option => option.isChosen\r\n );\r\n\r\n if (!isAnyFilterChosen) return accumulator;\r\n\r\n const targetIndex = columnHeaders.findIndex(\r\n element => element.id === currentFilter.groupKey\r\n );\r\n\r\n if (targetIndex === -1) {\r\n return accumulator.filter(element => {\r\n const targetProp = currentFilter.groupKey;\r\n\r\n const filteredElements = currentFilter.groupAlternatives\r\n .filter(option => option.isChosen)\r\n .map(option => option.targetValue)\r\n .some(value => element[targetProp] === value);\r\n\r\n return filteredElements;\r\n });\r\n }\r\n\r\n return accumulator.filter(element => {\r\n return currentFilter.groupAlternatives\r\n .filter(option => option.isChosen)\r\n .map(option => option.text)\r\n .some(value => {\r\n const listFromCsv = element.columns[targetIndex].text.split(', ');\r\n return listFromCsv.includes(value);\r\n });\r\n });\r\n }, elements);\r\n }\r\n\r\n // Sort\r\n const targetIndex = columnHeaders.findIndex(\r\n element => element.id === activeSortKey.key\r\n );\r\n\r\n if (targetIndex < 0) {\r\n setCurrentElements(filteredElements);\r\n } else {\r\n const filteredAndSortedElements = [...filteredElements].sort((a, b) => {\r\n let valueA, valueB;\r\n\r\n if (\r\n a.columns[targetIndex].arstrinnSortOrder &&\r\n b.columns[targetIndex].arstrinnSortOrder\r\n ) {\r\n valueA = a.columns[targetIndex].arstrinnSortOrder;\r\n valueB = b.columns[targetIndex].arstrinnSortOrder;\r\n } else {\r\n valueA = a.columns[targetIndex].text\r\n ? a.columns[targetIndex].text\r\n : '';\r\n valueB = b.columns[targetIndex].text\r\n ? b.columns[targetIndex].text\r\n : '';\r\n }\r\n\r\n return activeSortKey.dir === directions.descending\r\n ? valueB.localeCompare(valueA, undefined, { sensitivity: 'base' })\r\n : valueA.localeCompare(valueB, undefined, { sensitivity: 'base' });\r\n });\r\n\r\n setCurrentElements(filteredAndSortedElements);\r\n }\r\n };\r\n\r\n const handleSortKeyChange = sortKey => {\r\n if (sortKey === activeSortKey.key) {\r\n setActiveSortKey(prev => ({\r\n ...prev,\r\n dir:\r\n activeSortKey.dir === directions.descending\r\n ? directions.ascending\r\n : directions.descending\r\n }));\r\n } else {\r\n setActiveSortKey({ key: sortKey, dir: directions.descending });\r\n }\r\n\r\n filterAndSortList();\r\n };\r\n\r\n const handleFilterCheckboxChange = id => {\r\n setFilterOptions(prevFilters =>\r\n [...prevFilters].map(group => ({\r\n ...group,\r\n groupAlternatives: group.groupAlternatives.map(alt =>\r\n alt.id === id ? { ...alt, isChosen: !alt.isChosen } : alt\r\n )\r\n }))\r\n );\r\n\r\n filterAndSortList();\r\n };\r\n\r\n const resetFilters = () => {\r\n if (filterOptions) {\r\n setFilterOptions(prevFilters =>\r\n prevFilters.map(group => ({\r\n ...group,\r\n groupAlternatives: group.groupAlternatives.map(alt => ({\r\n ...alt,\r\n isChosen: false\r\n }))\r\n }))\r\n );\r\n }\r\n };\r\n\r\n const getNumFiltersChosenText = () => {\r\n if (!filterOptions) return '';\r\n\r\n const numFiltersChosen = filterOptions.reduce((acc1, group) => {\r\n return acc1 + group.groupAlternatives.filter(alt => alt.isChosen).length;\r\n }, 0);\r\n\r\n if (numFiltersChosen) {\r\n return ` (${numFiltersChosen})`;\r\n }\r\n return '';\r\n };\r\n\r\n useEffect(() => {\r\n if (elements && !!elements.length) {\r\n setCurrentElements(elements);\r\n\r\n if (originalElementsLength !== elements.length) {\r\n resetFilters();\r\n } else {\r\n filterAndSortList();\r\n }\r\n\r\n setOriginalElementsLength(elements.length);\r\n }\r\n }, [elements]);\r\n\r\n useEffect(() => {\r\n filterAndSortList();\r\n }, [filterOptions, activeSortKey]);\r\n\r\n return (\r\n - \r\n {currentElements.map((gridCardData, index) => {\r\n return (\r\n
\r\n
\r\n )}\r\n \r\n {filteredListEmptyText}\r\n
\r\n\r\n \r\n {addActions && !!addActions.length && (\r\n
\r\n - \r\n {addActions.map(addAction => (\r\n
- \r\n
- \r\n {sortAction && (\r\n
- \r\n
\r\n setSorterMenuIsOpen(false)}\r\n className=\"grid-table-wrapper__dropdown-close-button\"\r\n />\r\n {sortAction.sortAlternatives &&\r\n !!sortAction.sortAlternatives.length && (\r\n
\r\n \r\n \r\n )}\r\n {filterAction && (\r\n - \r\n {sortAction.sortAlternatives.map(\r\n ({ sortKey, title }) => (\r\n
\r\n setFilterMenuIsOpen(false)}\r\n className=\"grid-table-wrapper__dropdown-close-button\"\r\n />\r\n {filterAction.resetButtonText && (\r\n resetFilters()}\r\n text={filterAction.resetButtonText}\r\n theme={Clicker.themes.underlinedThin}\r\n className=\"grid-table-wrapper__dropdown-reset-button\"\r\n />\r\n )}\r\n {filterOptions && !!filterOptions.length && (\r\n
\r\n \r\n \r\n )}\r\n - \r\n {filterOptions.map(\r\n ({ groupKey, groupTitle, groupAlternatives }) => (\r\n
\r\n {groupTitle}\r\n
\r\n {groupAlternatives && !!groupAlternatives.length && (\r\n- \r\n {groupAlternatives.map(\r\n ({ id, text, isChosen }, index) => (\r\n
\r\n {elements && elements.length ? (\r\n <>\r\n {currentFormat === formats.table && (\r\n
\r\n \r\n );\r\n};\r\n\r\nGridTableWrapper.propTypes = {\r\n addActions: PropTypes.arrayOf(PropTypes.exact(Clicker.propTypes)),\r\n sortAction: PropTypes.exact({\r\n buttonText: PropTypes.string,\r\n closeDropdownButtonLabel: PropTypes.string,\r\n sortAlternatives: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n sortKey: PropTypes.string,\r\n title: PropTypes.string\r\n })\r\n )\r\n }),\r\n filterAction: PropTypes.exact({\r\n buttonText: PropTypes.string,\r\n closeDropdownButtonLabel: PropTypes.string,\r\n resetButtonText: PropTypes.string,\r\n filterAlternatives: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n groupKey: PropTypes.string,\r\n groupTitle: PropTypes.string,\r\n groupAlternatives: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n id: PropTypes.string,\r\n targetValue: PropTypes.oneOfType([\r\n PropTypes.bool,\r\n PropTypes.string\r\n ]),\r\n isChosen: PropTypes.bool,\r\n text: PropTypes.string\r\n })\r\n )\r\n })\r\n )\r\n }),\r\n columnHeaders: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n id: PropTypes.string,\r\n text: PropTypes.string\r\n })\r\n ),\r\n elements: PropTypes.arrayOf(\r\n PropTypes.exact(GridTableWrapper.elementPropShape)\r\n ),\r\n showMenus: PropTypes.bool,\r\n elementMenuDropdown: PropTypes.shape(BaseTable.propTypes.elementMenuDropdown),\r\n missingElementsHeader: PropTypes.string,\r\n missingElementsText: PropTypes.string\r\n};\r\n\r\nGridTableWrapper.defaultProps = {\r\n showMenus: true\r\n};\r\n\r\nexport default GridTableWrapper;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport api from 'js/api-helper';\r\n\r\nimport GridTableWrapper from 'components/grid-table-wrapper/grid-table-wrapper';\r\nimport ConfirmationModal from 'components/modal/confirmation-modal';\r\nimport LoadingSpinner from 'components/loading-spinner';\r\n\r\nconst Arkiv = ({\r\n content,\r\n removeText,\r\n removeEndpoint,\r\n removeConfirmationModal,\r\n\r\n proposeDeleteText,\r\n proposeDeleteEndpoint,\r\n proposeDeleteConfirmationModal,\r\n\r\n regretDeleteText,\r\n regretDeleteEndpoint,\r\n\r\n rejectDeleteText,\r\n rejectDeleteEndpoint\r\n}) => {\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [currentElements, setCurrentElements] = useState(content?.elements);\r\n const [removeConfirmationModalIsOpen, setRemoveConfirmationModalIsOpen] =\r\n useState(false);\r\n const [removeConfirmAction, setRemoveConfirmAction] = useState(null);\r\n const [\r\n proposeDeleteConfirmationModalIsOpen,\r\n setProposeDeleteConfirmationModalIsOpen\r\n ] = useState(false);\r\n const [proposeDeleteConfirmAction, setProposeDeleteConfirmAction] =\r\n useState(null);\r\n\r\n const removeElement = async targetId => {\r\n setIsLoading(true);\r\n\r\n try {\r\n await api.execute(removeEndpoint, { id: targetId });\r\n setCurrentElements(elements =>\r\n elements.filter(element => element.id !== targetId)\r\n );\r\n } catch (e) {\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n\r\n setIsLoading(false);\r\n };\r\n\r\n const handleRemoveClick = id => {\r\n setRemoveConfirmAction(() => () => {\r\n removeElement(id);\r\n setRemoveConfirmationModalIsOpen(false);\r\n });\r\n setRemoveConfirmationModalIsOpen(true);\r\n };\r\n\r\n const proposeDelete = async targetId => {\r\n setIsLoading(true);\r\n\r\n try {\r\n const payload = await api.execute(proposeDeleteEndpoint, {\r\n id: targetId,\r\n requestDelete: true\r\n });\r\n setCurrentElements(elements =>\r\n elements?.map(element => {\r\n if (element.id === targetId) {\r\n return {\r\n ...element,\r\n proposedDeleted: payload.proposedDeleted,\r\n warningTooltip: payload.warningTooltip\r\n };\r\n }\r\n return element;\r\n })\r\n );\r\n } catch (e) {\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n } finally {\r\n setIsLoading(false);\r\n }\r\n };\r\n\r\n const handleProposeDeleteClick = async targetId => {\r\n setProposeDeleteConfirmAction(() => () => {\r\n proposeDelete(targetId);\r\n setProposeDeleteConfirmationModalIsOpen(false);\r\n });\r\n setProposeDeleteConfirmationModalIsOpen(true);\r\n };\r\n\r\n const handleRegretDeleteClick = async targetId => {\r\n setIsLoading(true);\r\n\r\n try {\r\n await api.execute(regretDeleteEndpoint, { id: targetId });\r\n setCurrentElements(elements =>\r\n elements.map(element => {\r\n if (element.id === targetId) {\r\n element.proposedDeleted = false;\r\n element.warningTooltip = null;\r\n }\r\n return element;\r\n })\r\n );\r\n } catch (e) {\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n\r\n setIsLoading(false);\r\n };\r\n\r\n const handleRejectDeleteClick = async targetId => {\r\n setIsLoading(true);\r\n\r\n try {\r\n await api.execute(rejectDeleteEndpoint, { id: targetId });\r\n setCurrentElements(elements =>\r\n elements.map(element => {\r\n if (element.id === targetId) {\r\n element.proposedDeleted = false;\r\n element.warningTooltip = null;\r\n }\r\n return element;\r\n })\r\n );\r\n } catch (e) {\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n\r\n setIsLoading(false);\r\n };\r\n\r\n const addMenuToElements = () => {\r\n if (!(content?.elements && !!content?.elements.length)) return [];\r\n\r\n return [...currentElements].map(element => {\r\n const menuItems = [];\r\n\r\n // LA\r\n proposeDeleteText &&\r\n !element.proposedDeleted &&\r\n menuItems.push({\r\n text: proposeDeleteText,\r\n onClick: handleProposeDeleteClick\r\n });\r\n\r\n regretDeleteText &&\r\n element.proposedDeleted &&\r\n menuItems.push({\r\n text: regretDeleteText,\r\n onClick: handleRegretDeleteClick\r\n });\r\n\r\n // SL\r\n removeText &&\r\n menuItems.push({\r\n text: removeText,\r\n onClick: handleRemoveClick\r\n });\r\n\r\n rejectDeleteText &&\r\n element.proposedDeleted &&\r\n menuItems.push({\r\n text: rejectDeleteText,\r\n onClick: handleRejectDeleteClick\r\n });\r\n return {\r\n ...element,\r\n menuItems: menuItems\r\n };\r\n });\r\n };\r\n\r\n return (\r\n \r\n {missingElementsHeader && (\r\n
\r\n )}\r\n \r\n {missingElementsHeader}\r\n
\r\n )}\r\n {missingElementsText && (\r\n\r\n {missingElementsText}\r\n
\r\n )}\r\n\r\n setRemoveConfirmationModalIsOpen(false)}\r\n />\r\n setProposeDeleteConfirmationModalIsOpen(false)}\r\n />\r\n
\r\n );\r\n};\r\n\r\nArkiv.propTypes = {\r\n content: PropTypes.exact(GridTableWrapper.propTypes),\r\n removeText: PropTypes.string,\r\n removeEndpoint: PropTypes.string,\r\n removeConfirmationModal: PropTypes.exact(ConfirmationModal.propTypes),\r\n\r\n proposeDeleteText: PropTypes.string,\r\n proposeDeleteEndpoint: PropTypes.string,\r\n proposeDeleteConfirmationModal: PropTypes.exact(ConfirmationModal.propTypes),\r\n\r\n regretDeleteText: PropTypes.string,\r\n regretDeleteEndpoint: PropTypes.string,\r\n\r\n rejectDeleteText: PropTypes.string,\r\n rejectDeleteEndpoint: PropTypes.string\r\n};\r\n\r\nArkiv.defaultProps = {};\r\n\r\nexport default Arkiv;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Clicker from 'components/clicker/clicker';\r\nimport cn from 'classnames';\r\nimport EditInfoModal from 'components/edit-info-modal/edit-info-modal';\r\nimport apiHelper from 'js/api-helper';\r\nimport Tooltip from 'components/tooltip/tooltip';\r\nimport Icon from 'components/icon/icon';\r\n\r\nconst InfoHeader = ({\r\n title,\r\n mainAlert,\r\n openHeaderText,\r\n closeHeaderText,\r\n openEditInfoModalText,\r\n editInfoModal,\r\n infoList,\r\n updateInfoListEndpoint\r\n}) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [editInfoModalIsOpen, setEditInfoModalIsOpen] = useState(false);\r\n const [titleState, setTitleState] = useState(title);\r\n const [infoState, setInfoState] = useState(infoList);\r\n\r\n const onEditModalConfirm = (infoList, title) => {\r\n if (infoList) setInfoState(infoList);\r\n if (title) setTitleState(title);\r\n setEditInfoModalIsOpen(false);\r\n };\r\n\r\n const handleOpenInfoModal = () => {\r\n setIsOpen(!isOpen);\r\n if (!isOpen && updateInfoListEndpoint)\r\n apiHelper\r\n .get(updateInfoListEndpoint)\r\n .then(response => setInfoState(response.infoList))\r\n .catch(_error =>\r\n // eslint-disable-next-line no-console\r\n console.log(_error)\r\n );\r\n };\r\n\r\n return (\r\n \r\n setEditInfoModalIsOpen(false)}\r\n onConfirm={onEditModalConfirm}\r\n >\r\n )}\r\n
\r\n );\r\n};\r\n\r\nInfoHeader.propTypes = {\r\n title: PropTypes.string,\r\n mainAlert: PropTypes.exact(Tooltip.propTypes),\r\n openHeaderText: PropTypes.string,\r\n closeHeaderText: PropTypes.string,\r\n openEditInfoModalText: PropTypes.string,\r\n editInfoModal: PropTypes.exact(EditInfoModal.propTypes),\r\n infoList: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n infoTitle: PropTypes.string,\r\n info: PropTypes.string,\r\n alert: PropTypes.exact(Tooltip.propTypes)\r\n })\r\n ),\r\n updateInfoListEndpoint: PropTypes.string\r\n};\r\n\r\nexport default InfoHeader;\r\n","import React, { useEffect, useState } from 'react';\r\nimport Icon from 'components/icon';\r\nimport cn from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst HighlightedAnchorLinkList = ({ list }) => {\r\n const [currentAnchorLink, setCurrentAnchorLink] = useState(list[0].href);\r\n\r\n const handleScroll = () => {\r\n list.forEach(link => {\r\n const anchorElement = document.querySelector(link.href);\r\n const top = anchorElement?.getBoundingClientRect().top;\r\n\r\n if (window.innerHeight / 3 > top) {\r\n setCurrentAnchorLink(link.href);\r\n }\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n document.addEventListener('scroll', handleScroll);\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n {titleState}
\r\n {mainAlert && (\r\n\r\n
\r\n \r\n {openEditInfoModalText && editInfoModal && (\r\n setEditInfoModalIsOpen(!editInfoModalIsOpen)}\r\n />\r\n )}\r\n
\r\n {editInfoModal && (\r\n - \r\n {infoState &&\r\n infoState.map(({ infoTitle, info, alert }, i) => (\r\n
- \r\n \r\n {infoTitle + ' '}\r\n \r\n {info}\r\n {alert && (\r\n
- \r\n {list.map(anchorLink => (\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nContentHeader.propTypes = {\r\n heading: PropTypes.string,\r\n subheading: PropTypes.string,\r\n actionBar: PropTypes.exact(ActionBar.propTypes)\r\n};\r\n\r\nexport default ContentHeader;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport InfoHeader from 'components/info-header/info-header';\r\nimport NavigationLinkList from 'components/navigation-link-list/navigation-link-list';\r\nimport ContentHeader from 'components/content-header/content-header';\r\nimport NoticeBar from 'components/notice-bar';\r\n\r\nimport Clicker from '../clicker';\r\nimport cn from 'classnames';\r\nimport Icon from '../icon';\r\n\r\nconst MainLayout = ({\r\n children,\r\n noticeBarList,\r\n infoHeader,\r\n backLink,\r\n navigationButtonText,\r\n navigationLinkList,\r\n contentHeader,\r\n thinLayout\r\n}) => {\r\n const [isNavigationOpen, setIsNavigationOpen] = useState(false);\r\n\r\n return (\r\n {heading}
\r\n{subheading}
\r\n \r\n {actionBar ? (\r\n\r\n \r\n setIsNavigationOpen(!isNavigationOpen)}\r\n aria-expanded={isNavigationOpen}\r\n aria-controls=\"navigation-list\"\r\n >\r\n {navigationButtonText}\r\n \r\n
\r\n \r\n \r\n {backLink && (\r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nStructuralLayout.propTypes = {\r\n children: PropTypes.node, //excluded from backend\r\n header: PropTypes.exact(Header.propTypes),\r\n footer: PropTypes.exact(Footer.propTypes)\r\n};\r\n\r\nexport default StructuralLayout;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport MainLayout from 'components/main-layout/main-layout';\r\nimport StructuralLayout from 'components/structural-layout/structural-layout';\r\nimport Arkiv from 'components/arkiv/arkiv';\r\n\r\nconst ArkivPage = ({ structuralLayout, mainLayout, arkivContent }) => {\r\n return (\r\n \r\n {name && {name}}\r\n {email && (\r\n \r\n {emailLabel}: {email}\r\n \r\n )}\r\n {phoneNumber && (\r\n \r\n {phoneNumberLabel}: {phoneNumber}\r\n \r\n )}\r\n {onRemoveSelection && (\r\n \r\n
\r\n );\r\n};\r\n\r\nBruker.propTypes = {\r\n className: PropTypes.string, //exclude\r\n name: PropTypes.string,\r\n email: PropTypes.string,\r\n phoneNumber: PropTypes.string,\r\n emailLabel: PropTypes.string,\r\n phoneNumberLabel: PropTypes.string,\r\n isDisabled: PropTypes.bool,\r\n onRemoveSelection: PropTypes.func\r\n};\r\n\r\nexport default Bruker;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\n/**\r\n * On the chopping block\r\n */\r\n\r\nconst ListOfParagraphs = ({ list, avsnitt }) => {\r\n return (\r\n \r\n {avsnitt &&
\r\n );\r\n};\r\n\r\nListOfParagraphs.propTypes = {\r\n avsnitt: PropTypes.string,\r\n list: PropTypes.arrayOf(PropTypes.string)\r\n};\r\n\r\nexport default ListOfParagraphs;\r\n","import React from 'react';\r\nimport cn from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Icon from '../icon';\r\nimport SlideInChildren from 'components/slide-in-children';\r\nimport ListOfParagraphs from 'components/list-of-paragraphs';\r\n\r\n/**\r\n * On the chopping block\r\n */\r\n\r\nconst CatalogueEntry = ({ id, title, body }) => {\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n const elementId = `info-container-${id}`;\r\n\r\n return (\r\n {avsnitt}
}\r\n {list && (\r\n- \r\n {list?.map((arrayItem, index) => {\r\n return (\r\n
- \r\n {arrayItem}\r\n \r\n );\r\n })}\r\n
\r\n setIsOpen(!isOpen)}\r\n >\r\n \r\n {title}\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nCatalogueEntry.propTypes = {\r\n id: PropTypes.string,\r\n title: PropTypes.string,\r\n body: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n id: PropTypes.string.isRequired,\r\n title: PropTypes.string,\r\n paragraphs: PropTypes.arrayOf(\r\n PropTypes.exact(ListOfParagraphs.propTypes)\r\n ),\r\n terminatingParagraphs: ListOfParagraphs.listProp\r\n })\r\n )\r\n};\r\n\r\nexport default CatalogueEntry;\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport isRunningOnClient from '@creuna/utils/is-running-on-client';\r\n\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { useSvgChartContext } from '../../../source/contexts/svg-chart-context';\r\n\r\nimport colors, { hoverColorsLight } from 'js/kartlegging-colors';\r\n\r\nlet Highcharts = undefined;\r\n\r\n//since highcharts doesn't play well with our server-side rendering, we conditionally import them after checking for the window object.\r\nif (isRunningOnClient) {\r\n Highcharts = require('highcharts');\r\n\r\n require('highcharts/highcharts-more')(Highcharts);\r\n require('highcharts/modules/exporting')(Highcharts);\r\n}\r\n\r\nconst WHITE_BASE_COLOR = '#FFFFFF';\r\nconst GREY_COLOR = '#DDDDDD';\r\n\r\nconst Chart = ({\r\n seriesData,\r\n yMax,\r\n yMin,\r\n mestringnivaLabel,\r\n mestringsgradLabel,\r\n kartleggingsgradLabel,\r\n labels\r\n}) => {\r\n const { setSVGFromChartWithCallback } = useSvgChartContext();\r\n\r\n const [chartOptions, setChartOptions] = useState({\r\n chart: {\r\n polar: true,\r\n type: 'column',\r\n borderColor: 'transparent',\r\n borderWidth: 0,\r\n height: '650px',\r\n marginRight: 40,\r\n marginLeft: 40,\r\n backgroundColor: '#f4f4f4',\r\n spacingTop: -20,\r\n animation: {\r\n duration: 100\r\n }\r\n },\r\n credits: false,\r\n legend: false,\r\n title: { text: '' },\r\n pane: { startAngle: 36, innerSize: '15%' },\r\n yAxis: {\r\n max: yMax + 0.001, // +0.001 is a workaround for https://github.com/highcharts/highcharts/issues/13771\r\n min: yMin,\r\n tickInterval: 1,\r\n gridLineWidth: 0,\r\n labels: { enabled: false },\r\n endOnTick: false\r\n },\r\n plotOptions: {\r\n column: {\r\n stacking: 'normal',\r\n borderWidth: 1,\r\n borderColor: GREY_COLOR,\r\n pointPadding: 0.05,\r\n groupPadding: 0,\r\n enableMouseTracking: true,\r\n pointPlacement: 'on'\r\n },\r\n series: {\r\n type: 'column',\r\n borderWidth: 1.0,\r\n borderColor: GREY_COLOR,\r\n animation: false,\r\n states: {\r\n hover: {\r\n enabled: false\r\n },\r\n inactive: {\r\n opacity: 1\r\n }\r\n }\r\n }\r\n },\r\n xAxis: {\r\n lineColor: '#red',\r\n lineWidth: 0,\r\n labels: {\r\n useHTML: true,\r\n style: {\r\n fontSize: '18px',\r\n fontWeight: 'normal',\r\n color: 'black'\r\n },\r\n distance: 40,\r\n formatter: xAxisLabelFormatter\r\n },\r\n gridLineWidth: 0\r\n },\r\n tooltip: {\r\n useHTML: true,\r\n hideDelay: 50,\r\n outside: true,\r\n formatter: tooltipFormatter\r\n },\r\n series: seriesData?.map(serie => {\r\n return {\r\n ...serie,\r\n data: serie.data?.map(data => {\r\n return {\r\n ...data,\r\n y: data.mestringsGrad,\r\n color:\r\n serie.color ??\r\n (colors[data.color] ||\r\n (data.color === 'white' && '#fff') ||\r\n 'magenta')\r\n }; // ugly fallback color if backend passes invalid color props\r\n })\r\n };\r\n }),\r\n responsive: {\r\n rules: [\r\n {\r\n condition: {\r\n maxWidth: 768 // scss $breakpoint--sm\r\n },\r\n chartOptions: {\r\n chart: {\r\n height: 650\r\n },\r\n xAxis: {\r\n labels: {\r\n align: 'center'\r\n }\r\n }\r\n }\r\n },\r\n {\r\n condition: {\r\n maxWidth: 650\r\n },\r\n chartOptions: {\r\n chart: {\r\n height: 550\r\n }\r\n }\r\n },\r\n {\r\n condition: {\r\n maxWidth: 500\r\n },\r\n chartOptions: {\r\n chart: {\r\n height: 550\r\n }\r\n }\r\n }\r\n ]\r\n },\r\n exporting: {\r\n enabled: false\r\n }\r\n });\r\n\r\n const chartRef = useRef();\r\n\r\n // TODO: Possible optimization here. This function is called A LOT.\r\n function xAxisLabelFormatter() {\r\n if (this.value < labels.length) {\r\n return `\r\n \r\n ${labels[this.value].title.split(' ')[0]}\r\n \r\n \r\n \r\n `;\r\n }\r\n return '';\r\n }\r\n\r\n function tooltipFormatter() {\r\n let buildTooltip = \"\r\n {body.map(bodyItem => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n {bodyItem.title}\r\n
\r\n {bodyItem?.paragraphs?.map(({ avsnitt, list }, index) => {\r\n return (\r\n\";\r\n\r\n buildTooltip += `
';\r\n\r\n return buildTooltip;\r\n }\r\n\r\n const getSVG = () => {\r\n let chart = chartRef?.current?.chart;\r\n return chart?.getSVG({ chart: { height: 600, width: 700 } });\r\n };\r\n\r\n const initChartHoverEffect = () => {\r\n setChartOptions(prev => ({\r\n ...prev,\r\n plotOptions: {\r\n ...prev.plotOptions,\r\n series: {\r\n ...prev.plotOptions.series,\r\n point: {\r\n events: {\r\n mouseOver: function () {\r\n let hoveredCategory = this.category;\r\n let hoveredLevel = this.level;\r\n\r\n this.series.chart.series.forEach(function (layer) {\r\n if (Math.floor(layer.index / 2) + 1 === 4 - hoveredLevel) {\r\n layer.data.forEach(function (slice) {\r\n if (slice.category === hoveredCategory) {\r\n if (layer.index % 2 === 0) {\r\n slice.update({ color: GREY_COLOR });\r\n } else {\r\n slice.update({\r\n color: hoverColorsLight[hoveredCategory]\r\n });\r\n }\r\n }\r\n });\r\n }\r\n });\r\n },\r\n mouseOut: function () {\r\n let hoveredCategory = this.category;\r\n let hoveredLevel = this.level;\r\n\r\n this.series.chart.series.forEach(function (layer) {\r\n if (Math.floor(layer.index / 2) + 1 === 4 - hoveredLevel) {\r\n layer.data.forEach(function (slice) {\r\n if (slice.category === hoveredCategory) {\r\n if (layer.index % 2 === 0) {\r\n slice.update({ color: WHITE_BASE_COLOR });\r\n } else {\r\n slice.update({\r\n color:\r\n colors[seriesData[1].data[hoveredCategory].color]\r\n });\r\n }\r\n }\r\n });\r\n }\r\n });\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }));\r\n };\r\n\r\n useEffect(() => {\r\n // 15.09 - ASK: Adding hovereffects after inital SVG is saved to state. Fix to wierd case where unlucky hover would cause SVG to save with hover colors\r\n setSVGFromChartWithCallback(getSVG, initChartHoverEffect);\r\n }, []);\r\n\r\n return (\r\n | ${\r\n labels[this.point.index].title\r\n } | |
|---|---|
| ${mestringnivaLabel}: | \r\n${this.point.level} | \r\n
| ${mestringsgradLabel}: | \r\n${\r\n targetSliceData.mestringsGrad + '%'\r\n } | \r\n
| ${kartleggingsgradLabel}: | \r\n${\r\n targetSliceData.kartleggingsGrad + '%'\r\n } | \r\n
\r\n
\r\n );\r\n};\r\n\r\nChart.propTypes = {\r\n // eslint-disable-next-line no-unused-vars\r\n seriesData: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n level: PropTypes.level,\r\n data: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n y: PropTypes.number,\r\n level: PropTypes.number,\r\n skillNum: PropTypes.number,\r\n kartleggingsGrad: PropTypes.number,\r\n color: PropTypes.string\r\n })\r\n )\r\n })\r\n ),\r\n yMax: PropTypes.number,\r\n yMin: PropTypes.number,\r\n\r\n mestringnivaLabel: PropTypes.string,\r\n mestringsgradLabel: PropTypes.string,\r\n kartleggingsgradLabel: PropTypes.string,\r\n labels: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n title: PropTypes.string,\r\n href: PropTypes.string,\r\n ariaLabel: PropTypes.string\r\n })\r\n )\r\n};\r\n\r\nChart.defaultProps = {\r\n labels: ['']\r\n};\r\n\r\nexport default Chart;\r\n","import React, { Fragment } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport colors from 'js/kartlegging-colors';\r\n\r\nconst themes = {\r\n tinyText: 'tiny-text'\r\n};\r\n\r\nconst ChartTable = ({\r\n parentId,\r\n header,\r\n mestringsgradHeadShort,\r\n kartleggingsgradHeadShort,\r\n mestringsgradHeadLong,\r\n kartleggingsgradHeadLong,\r\n rows,\r\n theme\r\n}) => {\r\n const isDoubleRow = mestringsgradHeadShort && kartleggingsgradHeadShort;\r\n\r\n return (\r\n <>\r\n | \r\n {header?.map(text => (\r\n | |
| \r\n \r\n {mestringsgradHeadShort}\r\n 1\r\n \r\n \r\n {mestringsgradHeadLong}\r\n \r\n | \r\n )}\r\n {kartleggingsgradHeadShort && (\r\n\r\n \r\n {kartleggingsgradHeadShort}\r\n {isDoubleRow ? 2 : 1}\r\n \r\n \r\n {kartleggingsgradHeadLong}\r\n \r\n | \r\n )}\r\n
|---|---|
| \r\n {data}\r\n | \r\n ))}\r\n
\r\n {mestringsgradHeadLong && (\r\n \r\n 1{') ' + mestringsgradHeadLong}\r\n \r\n )}\r\n {isDoubleRow ? ', ' : ''}\r\n {kartleggingsgradHeadLong && (\r\n \r\n {isDoubleRow ? 2 : 1}\r\n {') ' + kartleggingsgradHeadLong}\r\n \r\n )}\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nChartTable.propTypes = {\r\n parentId: PropTypes.string, // FE\r\n header: PropTypes.arrayOf(PropTypes.string),\r\n mestringsgradHeadShort: PropTypes.string,\r\n kartleggingsgradHeadShort: PropTypes.string,\r\n mestringsgradHeadLong: PropTypes.string,\r\n kartleggingsgradHeadLong: PropTypes.string,\r\n rows: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n name: PropTypes.string,\r\n color: PropTypes.oneOf(Object.keys(colors)),\r\n row: PropTypes.arrayOf(PropTypes.string)\r\n })\r\n ),\r\n theme: PropTypes.string // FE\r\n};\r\n\r\nChartTable.themes = themes;\r\n\r\nexport default ChartTable;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Clicker from 'components/clicker/clicker';\r\nimport cn from 'classnames';\r\n\r\n/**\r\n * On the chopping block\r\n */\r\n\r\nconst ClickerPrevNext = ({ linkPrev, linkNext }) => {\r\n return (\r\n\r\n \r\n {renderTextWithDefinition()}\r\n \r\n {children}\r\n {renderTooltip()}\r\n
\r\n );\r\n};\r\n\r\nDefinitionText.propTypes = {\r\n underlineColorValue: PropTypes.string, // ignore from backend\r\n children: PropTypes.oneOfType([\r\n PropTypes.arrayOf(PropTypes.node),\r\n PropTypes.node\r\n ]),\r\n text: PropTypes.string.isRequired,\r\n definitions: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n matchWord: PropTypes.string,\r\n ...ArrowTooltip.textProps\r\n })\r\n )\r\n};\r\n\r\nDefinitionText.defaultProps = {\r\n definitions: [],\r\n text: ''\r\n};\r\n\r\nexport default DefinitionText;\r\n","import React, { useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport api from '../../../js/api-helper';\r\n\r\nimport Modal from '../modal';\r\nimport Clicker from '../../clicker';\r\nimport LoadingSpinner from '../../loading-spinner';\r\nimport InputByType from 'components/input-by-type';\r\nimport RadioGroup from '../../radio-group';\r\nimport StudentCommonFields from '../student-common-fields/student-common-fields';\r\nimport SearchWithDropdown from 'components/search-with-dropdown';\r\nimport Bruker from 'components/bruker/bruker';\r\nimport InputErrorMessage from 'components/input-error-message';\r\n\r\nconst EditStudentModal = ({\r\n id,\r\n isOpen,\r\n onClose,\r\n onConfirm,\r\n isDisabled,\r\n closeModalHiddenText,\r\n saveStudentText,\r\n cancelButtonText,\r\n title,\r\n lead,\r\n requiredFieldDescription,\r\n editSubmitEndpoint,\r\n firstNameTextInput,\r\n lastNameTextInput,\r\n dNumberTextInput,\r\n dufNumberTextInput,\r\n birthNumberTextInput,\r\n gradeInput,\r\n assignTeacherInput,\r\n chooseIdTypeRadioGroup,\r\n changedIdTypeAriaLiveText,\r\n chosenIdType,\r\n errorMessages\r\n}) => {\r\n const [state, setState] = useState({\r\n isLoading: false,\r\n isDisabled: false,\r\n isDirty: false,\r\n gradeInput,\r\n firstNameTextInput,\r\n lastNameTextInput,\r\n dNumberTextInput,\r\n dufNumberTextInput,\r\n birthNumberTextInput,\r\n assignTeacherInput: {\r\n ...assignTeacherInput,\r\n value: assignTeacherInput?.value ?? []\r\n }\r\n });\r\n const [currentIdType, setCurrentIdType] = useState(\r\n chosenIdType || StudentCommonFields.idTypes.fnr\r\n );\r\n const [isSubmitingForm, setIsSubmitingForm] = useState(false);\r\n const [inputErrors, setInputErrors] = useState({});\r\n\r\n const toggleLoading = isLoading => {\r\n setState(prev => {\r\n return {\r\n ...prev,\r\n isLoading\r\n };\r\n });\r\n };\r\n\r\n const checkGeneralError = (value, key, stateKey) => {\r\n if (inputErrors[key]) setInputErrors({ ...inputErrors, [key]: [] });\r\n setState({\r\n ...state,\r\n isDirty: true,\r\n [stateKey]: {\r\n ...state[stateKey],\r\n value: value,\r\n isDirty: true\r\n }\r\n });\r\n };\r\n\r\n const checkIfFieldAreValid = () => {\r\n var errors = {};\r\n\r\n if (!state.gradeInput?.value?.length) errors.grade = [errorMessages.grade];\r\n if (!state.firstNameTextInput?.value?.length)\r\n errors.firstName = [errorMessages.firstName];\r\n if (!state.lastNameTextInput?.value?.length)\r\n errors.lastName = [errorMessages.lastName];\r\n if (\r\n currentIdType === 'fnr' &&\r\n state.birthNumberTextInput?.value?.length !== 11\r\n )\r\n errors.birthNumber = [errorMessages.birthNumber];\r\n if (currentIdType === 'dnr' && state.dNumberTextInput?.value?.length !== 11)\r\n errors.dNumber = [errorMessages.dNumber];\r\n if (\r\n currentIdType === 'dufnr' &&\r\n state.dufNumberTextInput?.value?.length !== 12\r\n )\r\n errors.dufNumber = [errorMessages.dufNumber];\r\n setInputErrors(errors);\r\n\r\n return !!Object.keys(errors).length;\r\n };\r\n\r\n const handleOnError = err => {\r\n setInputErrors(err);\r\n };\r\n\r\n const handleOnTeacherChoice = item => {\r\n checkGeneralError(\r\n [...state.assignTeacherInput.value, item],\r\n 'assignedTeachers',\r\n 'assignTeacherInput'\r\n );\r\n };\r\n\r\n const handleOnTeacherRemove = userId => {\r\n checkGeneralError(\r\n state.assignTeacherInput.value.filter(user => user.id !== userId),\r\n 'assignedTeachers',\r\n 'assignTeacherInput'\r\n );\r\n };\r\n\r\n const handleOnEditSubmit = async () => {\r\n setIsSubmitingForm(true);\r\n const fieldsValid = checkIfFieldAreValid();\r\n if (fieldsValid) return;\r\n toggleLoading(true);\r\n setInputErrors({});\r\n\r\n try {\r\n const resource = await api.execute(editSubmitEndpoint, {\r\n id,\r\n firstName: state.firstNameTextInput.value,\r\n lastName: state.lastNameTextInput.value,\r\n birthNumber:\r\n currentIdType === StudentCommonFields.idTypes.fnr\r\n ? state.birthNumberTextInput.value\r\n : '',\r\n dufNumber:\r\n currentIdType === StudentCommonFields.idTypes.dufnr\r\n ? state.dufNumberTextInput.value\r\n : '',\r\n dNumber:\r\n currentIdType === StudentCommonFields.idTypes.dnr\r\n ? state.dNumberTextInput.value\r\n : '',\r\n grade: state.gradeInput.value,\r\n assignedTeachers: state.assignTeacherInput.value?.map(\r\n teacher => teacher.id\r\n )\r\n });\r\n\r\n onConfirm(resource);\r\n } catch (e) {\r\n toggleLoading(false);\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n if (e.status === 400) {\r\n handleOnError(e.errors);\r\n }\r\n }\r\n };\r\n\r\n const closeModal = () => {\r\n onClose();\r\n };\r\n\r\n useEffect(() => {\r\n return () => {\r\n toggleLoading(false);\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (isSubmitingForm) {\r\n let firstIdWithError;\r\n\r\n if (inputErrors.firstName)\r\n firstIdWithError = state?.firstNameTextInput.id;\r\n else if (inputErrors.lastName)\r\n firstIdWithError = state?.lastNameTextInput.id;\r\n else if (inputErrors.birthNumber)\r\n firstIdWithError = state?.birthNumberTextInput.id;\r\n else if (inputErrors.dNumber)\r\n firstIdWithError = state?.dNumberTextInput.id;\r\n else if (inputErrors.dufNumber)\r\n firstIdWithError = state?.dufNumberTextInput.id;\r\n else if (inputErrors.gradeInput) firstIdWithError = state?.gradeInput.id;\r\n\r\n if (firstIdWithError) {\r\n const elementToFocus = document.getElementById(firstIdWithError);\r\n if (elementToFocus) elementToFocus.focus();\r\n }\r\n setIsSubmitingForm(false);\r\n }\r\n }, [inputErrors]);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nconst textInputProps = {\r\n id: PropTypes.string.isRequired,\r\n placeholder: PropTypes.string.isRequired,\r\n label: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired\r\n};\r\n\r\nEditStudentModal.propTypes = {\r\n isDisabled: PropTypes.bool, //exclude from backend\r\n onClose: PropTypes.func, //exclude from backend\r\n onConfirm: PropTypes.func, //exclude from backend\r\n isOpen: PropTypes.bool, //exclude from backend\r\n id: PropTypes.string, //exclude from backend\r\n closeModalHiddenText: PropTypes.string,\r\n saveStudentText: PropTypes.string,\r\n cancelButtonText: PropTypes.string,\r\n title: PropTypes.string,\r\n lead: PropTypes.string,\r\n requiredFieldDescription: PropTypes.string,\r\n editSubmitEndpoint: PropTypes.string,\r\n firstNameTextInput: PropTypes.exact(textInputProps),\r\n lastNameTextInput: PropTypes.exact(textInputProps),\r\n dufNumberTextInput: PropTypes.exact(textInputProps),\r\n dNumberTextInput: PropTypes.exact(textInputProps),\r\n birthNumberTextInput: PropTypes.exact(textInputProps),\r\n gradeInput: PropTypes.exact(InputByType.propTypes),\r\n assignTeacherInput: PropTypes.exact({\r\n search: PropTypes.exact(SearchWithDropdown.propTypes),\r\n nrOfSelectedBrukerePostfixText: PropTypes.string,\r\n value: PropTypes.arrayOf(PropTypes.exact(Bruker.propTypes))\r\n }),\r\n chooseIdTypeRadioGroup: PropTypes.exact(RadioGroup.propTypes),\r\n changedIdTypeAriaLiveText: PropTypes.string,\r\n chosenIdType: PropTypes.string,\r\n errorMessages: PropTypes.exact({\r\n firstName: PropTypes.string,\r\n lastName: PropTypes.string,\r\n birthNumber: PropTypes.string,\r\n dNumber: PropTypes.string,\r\n dufNumber: PropTypes.string,\r\n grade: PropTypes.string\r\n })\r\n};\r\n\r\nEditStudentModal.defaultProps = {\r\n onConfirm: () => {},\r\n onClose: () => {}\r\n};\r\n\r\nexport default EditStudentModal;\r\n","import React, { useEffect, useState, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport api from 'js/api-helper';\r\n\r\nimport EleverContentContext from '../../contexts/elever-content-context';\r\n\r\nimport GridTableWrapper from 'components/grid-table-wrapper/grid-table-wrapper';\r\nimport AddStudentsFromFile from 'components/add-students-from-file/add-students-from-file';\r\nimport LoadingSpinner from 'components/loading-spinner';\r\nimport AddStudentModal from 'components/modal/add-student-modal/add-student-modal';\r\nimport EditStudentModal from 'components/modal/edit-student-modal/edit-student-modal';\r\nimport MoveStudentModal from 'components/modal/move-student-modal/move-student-modal';\r\nimport RejectMoveStudentModal from 'components/modal/reject-move-student-modal/reject-move-student-modal';\r\nimport ConfirmationModal from 'components/modal/confirmation-modal';\r\n\r\nconst roles = Object.freeze({\r\n larer: 'larer',\r\n skoleleder: 'skoleleder'\r\n});\r\n\r\nconst Elever = ({\r\n content,\r\n role,\r\n addButtonText,\r\n addStudentsFromFileButtonText,\r\n\r\n deleteButtonText,\r\n deleteEndpoint,\r\n removeConfirmationModal,\r\n\r\n editButtonText,\r\n editStudentEndpoint,\r\n getStudentEndpoint,\r\n addStudentModal,\r\n editStudentModal,\r\n\r\n moveButtonText,\r\n moveStudentModal,\r\n\r\n rejectMoveButtonText,\r\n getAllFlyttingerForElevEndpoint,\r\n rejectMoveStudentModal,\r\n\r\n requestStudentButtonText,\r\n removeStudentButtonText,\r\n requestOrRemoveStudentEndpoint,\r\n requestStudentConfirmationModal,\r\n addStudentsFromFile\r\n}) => {\r\n const { elementToUpdate } = useContext(EleverContentContext);\r\n\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [currentStudents, setCurrentStudents] = useState(content.elements);\r\n const [addStudentsFromFileIsOpen, setAddStudentsFromFileIsOpen] = useState(\r\n false\r\n );\r\n\r\n const [addModalIsOpen, setAddModalIsOpen] = useState(false);\r\n const [editModalIsOpen, setEditModalIsOpen] = useState(false);\r\n const [\r\n removeConfirmationModalIsOpen,\r\n setRemoveConfirmationModalIsOpen\r\n ] = useState(false);\r\n\r\n const [moveStudenModalIsOpen, setMoveStudenModalIsOpen] = useState(false);\r\n const [\r\n rejectMoveStudenModalIsOpen,\r\n setRejectMoveStudenModalIsOpen\r\n ] = useState(false);\r\n\r\n const [editModal, setEditModal] = useState(editStudentModal);\r\n const [moveModal, setMoveModal] = useState(moveStudentModal);\r\n const [rejectMoveModal, setRejectMoveModal] = useState(\r\n rejectMoveStudentModal\r\n );\r\n const [\r\n requestStudentConfirmationModalIsOpen,\r\n setRequestStudentConfirmationModalIsOpen\r\n ] = useState(false);\r\n\r\n const [removeStudentMethod, setRemoveStudentMethod] = useState(() => {});\r\n const [requestStudentMethod, setRequestStudentMethod] = useState(() => {});\r\n\r\n const handleOnEditClick = async id => {\r\n setIsLoading(true);\r\n\r\n const {\r\n firstName,\r\n lastName,\r\n birthNumber,\r\n dufNumber,\r\n dNumber,\r\n grade,\r\n teachers,\r\n idType\r\n } = await api.execute(editStudentEndpoint, { id });\r\n\r\n setIsLoading(false);\r\n\r\n setEditModal({\r\n ...editModal,\r\n id,\r\n firstNameTextInput: {\r\n ...editModal?.firstNameTextInput,\r\n value: firstName\r\n },\r\n lastNameTextInput: {\r\n ...editModal?.lastNameTextInput,\r\n value: lastName\r\n },\r\n dNumberTextInput: {\r\n ...editModal?.dNumberTextInput,\r\n value: dNumber\r\n },\r\n birthNumberTextInput: {\r\n ...editModal?.birthNumberTextInput,\r\n value: birthNumber\r\n },\r\n dufNumberTextInput: {\r\n ...editModal?.dufNumberTextInput,\r\n value: dufNumber\r\n },\r\n gradeInput: {\r\n ...editModal?.gradeInput,\r\n value: grade\r\n },\r\n assignTeacherInput: {\r\n ...editModal?.assignTeacherInput,\r\n value: teachers\r\n },\r\n chosenIdType: idType\r\n });\r\n\r\n setEditModalIsOpen(true);\r\n };\r\n\r\n const handleOnAddConfirm = resources => {\r\n setCurrentStudents([...currentStudents, ...resources]);\r\n setAddModalIsOpen(false);\r\n };\r\n\r\n const handleOnEditConfirm = editedStudent => {\r\n setCurrentStudents(students =>\r\n students.map(student => {\r\n if (student.id === editedStudent.id) return editedStudent;\r\n\r\n return student;\r\n })\r\n );\r\n setEditModalIsOpen(false);\r\n };\r\n\r\n const handleOnRemoveConfirm = async id => {\r\n setIsLoading(true);\r\n\r\n try {\r\n await api.execute(deleteEndpoint, { ids: [id] });\r\n\r\n setCurrentStudents(students =>\r\n students.filter(resource => {\r\n return resource.id !== id;\r\n })\r\n );\r\n } catch (e) {\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n\r\n setIsLoading(false);\r\n setRemoveConfirmationModalIsOpen(false);\r\n };\r\n const handleOnRemoveClick = id => {\r\n setRemoveStudentMethod(() => () => handleOnRemoveConfirm(id));\r\n setRemoveConfirmationModalIsOpen(true);\r\n };\r\n\r\n const handleOnMoveStudentClick = async id => {\r\n setIsLoading(true);\r\n\r\n try {\r\n const payload = await api.execute(getStudentEndpoint, {\r\n id\r\n });\r\n\r\n setMoveModal({\r\n ...moveModal,\r\n ...payload,\r\n studentId: id\r\n });\r\n\r\n setMoveStudenModalIsOpen(true);\r\n } catch (e) {\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n\r\n setIsLoading(false);\r\n };\r\n const handleOnMoveStudentConfirm = id => {\r\n setCurrentStudents(students =>\r\n students.filter(oldResource => oldResource.id !== id)\r\n );\r\n };\r\n\r\n const handleOnRejectMoveStudentClick = async id => {\r\n setIsLoading(true);\r\n\r\n try {\r\n const payload = await api.execute(getAllFlyttingerForElevEndpoint, {\r\n id\r\n });\r\n\r\n if (payload.length === 1) {\r\n const orgid = payload[0].onskesFlyttetTil;\r\n const orgidAsArray = [orgid];\r\n\r\n await api.execute(rejectMoveModal.rejectMoveStudentEndpoint, {\r\n studentId: id,\r\n orgIds: orgidAsArray\r\n });\r\n window.location.reload();\r\n } else {\r\n setRejectMoveModal({\r\n ...rejectMoveModal,\r\n payload,\r\n studentId: id\r\n });\r\n\r\n setRejectMoveStudenModalIsOpen(true);\r\n }\r\n } catch (e) {\r\n // eslint-disable-next-line no-console\r\n console.log(e);\r\n }\r\n\r\n setIsLoading(false);\r\n };\r\n const handleOnMoveStudentReject = async schoolNames => {\r\n setCurrentStudents(students =>\r\n students.map(resource => ({\r\n ...resource,\r\n requestedMoved: schoolNames !== null\r\n }))\r\n );\r\n setRejectMoveStudenModalIsOpen(false);\r\n window.location.reload();\r\n };\r\n\r\n const handleRequestStudentConfirm = async studentId => {\r\n setIsLoading(true);\r\n\r\n try {\r\n const payload = await api.execute(requestOrRemoveStudentEndpoint, {\r\n id: studentId\r\n });\r\n setCurrentStudents(s =>\r\n s?.map(student => {\r\n if (student.id === studentId) {\r\n return {\r\n ...student,\r\n studentIsRequestedFromTeacher:\r\n payload.studentIsRequestedFromTeacher,\r\n infoTooltip: payload.infoTooltip\r\n };\r\n } else {\r\n return student;\r\n }\r\n })\r\n );\r\n } catch (_error) {\r\n // eslint-disable-next-line no-console\r\n console.log(_error);\r\n } finally {\r\n setIsLoading(false);\r\n }\r\n\r\n setRequestStudentConfirmationModalIsOpen(false);\r\n };\r\n const handleOnRequestStudentClick = id => {\r\n setRequestStudentMethod(() => () => handleRequestStudentConfirm(id));\r\n setRequestStudentConfirmationModalIsOpen(true);\r\n };\r\n\r\n const softRemoveStudentBelongsToTeacher = async studentId => {\r\n try {\r\n const payload = await api.execute(requestOrRemoveStudentEndpoint, {\r\n id: studentId\r\n });\r\n setCurrentStudents(s =>\r\n s?.map(student => {\r\n if (student.id === studentId) {\r\n return {\r\n ...student,\r\n studentBelongsToTeacher: payload.studentBelongsToTeacher,\r\n infoTooltip: payload.infoTooltip\r\n };\r\n } else {\r\n return student;\r\n }\r\n })\r\n );\r\n } catch (_error) {\r\n // eslint-disable-next-line no-console\r\n console.log(_error);\r\n }\r\n };\r\n\r\n const hardRemoveStudentBelongsToTeacher = async studentId => {\r\n try {\r\n await api.execute(requestOrRemoveStudentEndpoint, {\r\n id: studentId\r\n });\r\n setCurrentStudents(s => s.filter(student => student.id !== studentId));\r\n } catch (_error) {\r\n // eslint-disable-next-line no-console\r\n console.log(_error);\r\n }\r\n };\r\n\r\n const addElementMenuToStudents = () => {\r\n if (!(content.elements && !!content.elements.length)) return [];\r\n return [...currentStudents].map(student => {\r\n if (role === roles.larer) {\r\n let menuItems = [];\r\n if (requestOrRemoveStudentEndpoint) {\r\n if (requestStudentButtonText) {\r\n menuItems = [\r\n {\r\n text: student.studentBelongsToTeacher\r\n ? removeStudentButtonText\r\n : requestStudentButtonText,\r\n onClick: student.studentBelongsToTeacher\r\n ? softRemoveStudentBelongsToTeacher\r\n : handleOnRequestStudentClick\r\n }\r\n ];\r\n } else if (removeStudentButtonText) {\r\n menuItems = [\r\n {\r\n text: removeStudentButtonText,\r\n onClick: hardRemoveStudentBelongsToTeacher\r\n }\r\n ];\r\n }\r\n }\r\n return {\r\n ...student,\r\n link: student.studentBelongsToTeacher ? student.link : null,\r\n menuItems: menuItems\r\n };\r\n } else {\r\n const nonTeacherMenu = [];\r\n editButtonText &&\r\n !student.requestedMoved &&\r\n nonTeacherMenu.push({\r\n text: editButtonText,\r\n onClick: handleOnEditClick\r\n });\r\n\r\n moveButtonText &&\r\n nonTeacherMenu.push({\r\n text: moveButtonText,\r\n onClick: handleOnMoveStudentClick\r\n });\r\n\r\n deleteButtonText &&\r\n !student.requestedMoved &&\r\n nonTeacherMenu.push({\r\n text: deleteButtonText,\r\n onClick: handleOnRemoveClick\r\n });\r\n\r\n rejectMoveButtonText &&\r\n student.requestedMoved &&\r\n nonTeacherMenu.push({\r\n text: rejectMoveButtonText,\r\n onClick: handleOnRejectMoveStudentClick\r\n });\r\n\r\n return {\r\n ...student,\r\n menuItems: nonTeacherMenu\r\n };\r\n }\r\n });\r\n };\r\n\r\n const getAddActions = () => {\r\n const addActions = [];\r\n addButtonText &&\r\n addActions.push({\r\n text: addButtonText,\r\n onClick: () => setAddModalIsOpen(true)\r\n });\r\n addStudentsFromFileButtonText &&\r\n addActions.push({\r\n text: addStudentsFromFileButtonText,\r\n onClick: () => setAddStudentsFromFileIsOpen(true)\r\n });\r\n\r\n return addActions;\r\n };\r\n\r\n useEffect(() => {\r\n if (!elementToUpdate) return;\r\n\r\n setCurrentStudents(students =>\r\n students.map(student => {\r\n if (student.id === elementToUpdate.elevId) {\r\n return {\r\n ...student,\r\n studentBelongsToTeacher: elementToUpdate.studentBelongsToTeacher,\r\n infoTooltip: elementToUpdate.infoTooltip,\r\n warningTooltip: elementToUpdate.warningTooltip\r\n };\r\n }\r\n return student;\r\n })\r\n );\r\n }, [elementToUpdate]);\r\n\r\n return (\r\n \r\n
\r\n \r\n {title &&
\r\n )}\r\n {title}
}\r\n\r\n {requiredFieldDescription && (\r\n\r\n {requiredFieldDescription}\r\n
\r\n )}\r\n\r\n \r\n \r\n <>\r\n = 2\r\n })}\r\n >\r\n \r\n handleOnTeacherRemove(user.id)\r\n }\r\n />\r\n ))}\r\n
\r\n \r\n )}\r\n \r\n \r\n \r\n {state.assignTeacherInput.value.length +\r\n ' ' +\r\n assignTeacherInput.nrOfSelectedBrukerePostfixText}\r\n
\r\n {state.assignTeacherInput.value.map(user => (\r\n \r\n
\r\n \r\n {cancelButtonText && (\r\n
\r\n \r\n
\r\n )}\r\n {saveStudentText && (\r\n \r\n
\r\n )}\r\n \r\n {state.isLoading &&
\r\n \r\n {addStudentsFromFileIsOpen ? (\r\n {\r\n setAddStudentsFromFileIsOpen(false);\r\n window.location.reload();\r\n }}\r\n />\r\n ) : (\r\n setAddModalIsOpen(false)}\r\n />\r\n )}\r\n {editModalIsOpen && (\r\n setEditModalIsOpen(false)}\r\n />\r\n )}\r\n {moveStudenModalIsOpen && (\r\n setMoveStudenModalIsOpen(false)}\r\n />\r\n )}\r\n {rejectMoveStudenModalIsOpen && (\r\n setRejectMoveStudenModalIsOpen(false)}\r\n />\r\n )}\r\n {removeConfirmationModalIsOpen && (\r\n setRemoveConfirmationModalIsOpen(false)}\r\n />\r\n )}\r\n {requestStudentConfirmationModalIsOpen && (\r\n setRequestStudentConfirmationModalIsOpen(false)}\r\n />\r\n )}\r\n
\r\n );\r\n};\r\n\r\nElever.propTypes = {\r\n content: PropTypes.exact(GridTableWrapper.propTypes),\r\n role: PropTypes.oneOf(Object.values(roles)),\r\n addButtonText: PropTypes.string,\r\n\r\n deleteEndpoint: PropTypes.string,\r\n removeConfirmationModal: PropTypes.exact(ConfirmationModal.propTypes),\r\n\r\n editStudentEndpoint: PropTypes.string,\r\n getStudentEndpoint: PropTypes.string,\r\n addStudentModal: PropTypes.exact(AddStudentModal.propTypes),\r\n editStudentModal: PropTypes.exact(EditStudentModal.propTypes),\r\n\r\n moveStudentModal: PropTypes.exact(MoveStudentModal.propTypes),\r\n\r\n getAllFlyttingerForElevEndpoint: PropTypes.string,\r\n rejectMoveStudentModal: PropTypes.exact(RejectMoveStudentModal.propTypes),\r\n\r\n editButtonText: PropTypes.string,\r\n deleteButtonText: PropTypes.string,\r\n moveButtonText: PropTypes.string,\r\n rejectMoveButtonText: PropTypes.string,\r\n\r\n requestStudentButtonText: PropTypes.string,\r\n removeStudentButtonText: PropTypes.string,\r\n requestOrRemoveStudentEndpoint: PropTypes.string,\r\n requestStudentConfirmationModal: PropTypes.exact(ConfirmationModal.propTypes),\r\n\r\n addStudentsFromFileButtonText: PropTypes.string,\r\n addStudentsFromFile: PropTypes.exact(AddStudentsFromFile.propTypes)\r\n};\r\n\r\nElever.defaultProps = {\r\n role: roles.larer\r\n};\r\n\r\nexport default Elever;\r\n","/* eslint-disable react/no-multi-comp */\r\nimport React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport EleverContentContext from './elever-content-context';\r\n\r\nconst EleverContentContextProvider = ({ children }) => {\r\n const [elementToUpdate, setElementToUpdate] = useState({});\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n return Noe gikk galt:
\r\n\r\n {this.state.error && this.state.error.toString()}\r\n
\r\n {this.state.errorInfo.componentStack}\r\n
\r\n \r\n \r\n {this.state.errorInfo.componentStack}\r\n
{this.props.children}
;\r\n }\r\n}\r\nErrorBoundary.propTypes = {\r\n children: PropTypes.node\r\n};\r\n\r\nexport default ErrorBoundary;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport BaseLayout from './base-layout';\r\nimport Footer from '../footer';\r\nimport Header from '../header';\r\n\r\nconst themes = {\r\n document: 'document'\r\n};\r\n\r\nconst AnonymousLayout = ({ children, header, footer, theme, ...rest }) => {\r\n return (\r\n \r\n {title && \r\n \r\n ))}\r\n {htmlInfo && (\r\n
\r\n );\r\n};\r\n\r\nFrequentlyAskedQuestions.propTypes = {\r\n title: PropTypes.string.isRequired,\r\n lead: PropTypes.string.isRequired,\r\n questions: {\r\n title: PropTypes.string,\r\n htmlAnswer: PropTypes.string\r\n },\r\n htmlInfo: PropTypes.string\r\n};\r\n\r\nexport default FrequentlyAskedQuestions;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport AnonymousLayout from '../layouts/anonymous-layout';\r\nimport FrequentlyAskedQuestions from 'components/frequently-asked-questions/frequently-asked-questions';\r\n\r\nconst FaqPage = ({ layout, faq }) => {\r\n return (\r\n {title}
}\r\n {lead && }\r\n {questions &&\r\n questions.map(({ title, htmlAnswer }) => (\r\n\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nInspectorProgressionHeader.propTypes = {\r\n title: PropTypes.string,\r\n onInputChange: PropTypes.func, // FE\r\n color: PropTypes.oneOf(Object.values(colors)), // FE\r\n fromDateInput: PropTypes.shape(DateInput.propTypes),\r\n toDateInput: PropTypes.shape(DateInput.propTypes),\r\n arstrinnSelectInput: PropTypes.shape(SelectInput.propTypes)\r\n};\r\n\r\nInspectorProgressionHeader.colors = colors;\r\n\r\nInspectorProgressionHeader.defaultProps = {\r\n color: colors.green\r\n};\r\n\r\nexport default InspectorProgressionHeader;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst KartleggingPlaceholder = ({ title, text }) => {\r\n return (\r\n \r\n
\r\n {title}
\r\n\r\n {currentFromDateInput && (\r\n \r\n handleChangeFromDateInput(value)}\r\n value={currentFromDateInput?.value}\r\n theme={DateInput.themes.inspector}\r\n />\r\n \r\n )}\r\n {currentToDateInput && (\r\n \r\n handleChangeToDateInput(value)}\r\n value={currentToDateInput?.value}\r\n theme={DateInput.themes.inspector}\r\n />\r\n \r\n )}\r\n {currentArstrinnSelectInput && (\r\n \r\n handleChangeArstrinnSelectInput(value)}\r\n value={currentArstrinnSelectInput?.value}\r\n theme={SelectInput.themes.default}\r\n />\r\n \r\n )}\r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nKartleggingPlaceholder.propTypes = {\r\n title: PropTypes.string,\r\n text: PropTypes.string\r\n};\r\n\r\nexport default KartleggingPlaceholder;\r\n","import React, { useEffect, useState, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\nimport useClickOutside from '../../hooks/use-click-outside';\r\n\r\nimport Icon from 'components/icon/icon';\r\n\r\nconst SELECTOR_ITEM_ID = 'kartlegging-selector-item';\r\nconst SELECTOR_LABEL_ID = 'kartlegging-selector-label';\r\nconst SELECTOR_BUTTON_ID = 'kartlegging-selector-button';\r\n\r\nconst getScreenReaderName = name => {\r\n return name.replace(/\\u2013/g, ' til ');\r\n};\r\n\r\nconst KartleggingSelector = ({ label, optGroups, onChange }) => {\r\n const [currentOptGroups, setCurrentOptGroups] = useState(optGroups);\r\n const [selectIsOpen, setSelectIsOpen] = useState(false);\r\n const [selectOptionInFocus, setSelectOptionInFocus] = useState(0);\r\n\r\n const wrapperRef = useRef(null);\r\n\r\n let itemIndex = 0;\r\n\r\n const getNameCurrentSelected = () => {\r\n const selectedElement = currentOptGroups\r\n .flatMap(group => group.options)\r\n .find(option => option.selected);\r\n return selectedElement?.name ?? 'Kan ikke finne valgt element';\r\n };\r\n\r\n const handleChangeKartlegging = kartleggingId => {\r\n if (\r\n currentOptGroups\r\n .flatMap(group => group.options)\r\n .find(option => option.selected).kartleggingId === kartleggingId\r\n )\r\n return;\r\n\r\n let targetIndex = 0;\r\n setCurrentOptGroups(prevOptGroups =>\r\n prevOptGroups.map(group => ({\r\n ...group,\r\n options: group.options.map(option => {\r\n const isSelected = option.kartleggingId === kartleggingId;\r\n\r\n isSelected && setSelectOptionInFocus(targetIndex);\r\n targetIndex++;\r\n\r\n return {\r\n ...option,\r\n selected: isSelected\r\n };\r\n })\r\n }))\r\n );\r\n\r\n onChange && onChange(kartleggingId);\r\n };\r\n\r\n const handleParentClick = () => {\r\n setSelectIsOpen(prev => !prev);\r\n };\r\n\r\n const handleOnItemClick = kartleggingId => {\r\n handleChangeKartlegging(kartleggingId);\r\n setSelectIsOpen(false);\r\n };\r\n\r\n const handleOnParentKeyDown = e => {\r\n if (e.key !== 'Tab') {\r\n e.preventDefault();\r\n }\r\n\r\n switch (e.key) {\r\n case 'Enter':\r\n case ' ':\r\n case 'ArrowUp':\r\n case 'ArrowDown': {\r\n handleParentClick();\r\n break;\r\n }\r\n case 'Tab': {\r\n setSelectIsOpen(false);\r\n break;\r\n }\r\n default: {\r\n return;\r\n }\r\n }\r\n };\r\n\r\n const handleOnItemKeyDown = e => {\r\n if (e.key !== 'Tab') {\r\n e.preventDefault();\r\n }\r\n const totalLength = currentOptGroups.reduce(\r\n (acc, group) => (acc += group.options.length),\r\n 0\r\n );\r\n\r\n if (selectIsOpen) {\r\n switch (e.key) {\r\n case 'ArrowDown': {\r\n setSelectOptionInFocus(prev => {\r\n const indexToBeFocused =\r\n prev + 1 <= totalLength - 1 ? prev + 1 : totalLength - 1;\r\n const itemToBeFocused = document.querySelector(\r\n `#${SELECTOR_ITEM_ID}${indexToBeFocused}`\r\n );\r\n\r\n if (itemToBeFocused) {\r\n itemToBeFocused.focus();\r\n }\r\n return indexToBeFocused ?? 0;\r\n });\r\n break;\r\n }\r\n case 'ArrowUp': {\r\n setSelectOptionInFocus(prev => {\r\n const indexToBeFocused = prev - 1 >= 0 ? prev - 1 : 0;\r\n const itemToBeFocused = document.querySelector(\r\n `#${SELECTOR_ITEM_ID}${indexToBeFocused}`\r\n );\r\n\r\n if (itemToBeFocused) {\r\n itemToBeFocused.focus();\r\n }\r\n return indexToBeFocused ?? 0;\r\n });\r\n break;\r\n }\r\n case 'Tab': {\r\n const itemId = currentOptGroups.flatMap(group => group.options)[\r\n selectOptionInFocus\r\n ].kartleggingId;\r\n handleChangeKartlegging(itemId);\r\n setSelectIsOpen(prev => !prev);\r\n break;\r\n }\r\n case 'Enter':\r\n case ' ': {\r\n const itemId = currentOptGroups.flatMap(group => group.options)[\r\n selectOptionInFocus\r\n ].kartleggingId;\r\n handleChangeKartlegging(itemId);\r\n setSelectIsOpen(prev => !prev);\r\n const button = document.querySelector(`#${SELECTOR_BUTTON_ID}`);\r\n if (button) button.focus();\r\n break;\r\n }\r\n case 'Escape': {\r\n setSelectIsOpen(prev => !prev);\r\n const button = document.querySelector(`#${SELECTOR_BUTTON_ID}`);\r\n if (button) button.focus();\r\n break;\r\n }\r\n default: {\r\n return;\r\n }\r\n }\r\n }\r\n };\r\n\r\n useClickOutside(wrapperRef, () => {\r\n setSelectIsOpen(prev => {\r\n if (prev) {\r\n const itemId = currentOptGroups.flatMap(group => group.options)[\r\n selectOptionInFocus\r\n ].kartleggingId;\r\n\r\n handleChangeKartlegging(itemId);\r\n return !prev;\r\n }\r\n return prev;\r\n });\r\n });\r\n\r\n useEffect(() => {\r\n const itemToBeFocused = document.querySelector(\r\n `#${SELECTOR_ITEM_ID}${selectOptionInFocus}`\r\n );\r\n\r\n if (itemToBeFocused) {\r\n itemToBeFocused.focus();\r\n }\r\n }, [selectIsOpen]);\r\n\r\n return (\r\n \r\n {title &&
\r\n {title}
}\r\n {text && (\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nKartleggingSelector.propTypes = {\r\n label: PropTypes.string,\r\n optGroups: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n label: PropTypes.string,\r\n options: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n kartleggingId: PropTypes.string,\r\n name: PropTypes.string,\r\n selected: PropTypes.bool\r\n })\r\n )\r\n })\r\n ),\r\n onChange: PropTypes.func // FE\r\n};\r\n\r\nKartleggingSelector.defaultProps = {};\r\n\r\nexport default KartleggingSelector;\r\n","import PropTypes from 'prop-types';\r\n\r\nexport const quarterDataProps = {\r\n periodQuarterOfYear: PropTypes.exact({\r\n id: PropTypes.string,\r\n name: PropTypes.string,\r\n shortName: PropTypes.string\r\n }),\r\n kartleggingId: PropTypes.string,\r\n progresjonMestringsnivaList: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n id: PropTypes.string,\r\n navn: PropTypes.string,\r\n nummer: PropTypes.number,\r\n ferdighetsomradeProgresjonList: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n id: PropTypes.string,\r\n navn: PropTypes.string,\r\n nummer: PropTypes.number,\r\n color: PropTypes.string,\r\n mestringsgradPercent: PropTypes.number,\r\n kartleggingsgradPercent: PropTypes.number,\r\n title: PropTypes.string,\r\n nameValueList: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n name: PropTypes.string,\r\n value: PropTypes.string\r\n })\r\n )\r\n })\r\n )\r\n })\r\n )\r\n};\r\n","import React, { useEffect, useState, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport isRunningOnClient from '@creuna/utils/is-running-on-client';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { ferdighetsomraderKeys } from 'components/progresjonsvisning/progresjonsvisning';\r\nimport { useSvgChartContext } from '../../contexts/svg-chart-context';\r\nimport { quarterDataProps } from './quarterDataProps';\r\n\r\nlet Highcharts = undefined;\r\n\r\n//since highcharts doesn't play well with our server-side rendering, we conditionally import them after checking for the window object.\r\nif (isRunningOnClient) {\r\n Highcharts = require('highcharts');\r\n\r\n require('highcharts/highcharts-more')(Highcharts);\r\n require('highcharts/modules/exporting')(Highcharts);\r\n}\r\n\r\nconst SPACER_COLS = 2;\r\nconst NUM_FERDIGHETSOMRADER = 5;\r\nconst COLS_PER_QUARTER = NUM_FERDIGHETSOMRADER + SPACER_COLS;\r\n\r\nconst ProgresjonsvisningChart = ({\r\n data,\r\n filters,\r\n visibleQuarters,\r\n yAxisLabels\r\n}) => {\r\n const chartContext = useSvgChartContext();\r\n\r\n const formattedYAxisLabels = {\r\n 0: yAxisLabels.mestrerIkke || '0%',\r\n 25: '',\r\n 50: yAxisLabels.mestrerMedStotte || '50%',\r\n 75: '',\r\n 100: yAxisLabels.mestrerUtenStotte || '100%'\r\n };\r\n\r\n const [parsedChartData, setParsedChartData] = useState({\r\n chart: {\r\n type: 'column',\r\n backgroundColor: 'transparent',\r\n animation: false\r\n },\r\n title: {\r\n text: null\r\n },\r\n exporting: {\r\n enabled: false\r\n },\r\n credits: {\r\n enabled: false\r\n },\r\n xAxis: {\r\n categories: [],\r\n labels: {\r\n enabled: false\r\n },\r\n plotLines: [\r\n {\r\n color: '#dddddd',\r\n width: 1,\r\n value: COLS_PER_QUARTER + 0.5\r\n },\r\n {\r\n color: '#dddddd',\r\n width: 1,\r\n value: 2 * COLS_PER_QUARTER + 0.5\r\n },\r\n {\r\n color: '#dddddd',\r\n width: 1,\r\n value: 3 * COLS_PER_QUARTER + 0.5\r\n }\r\n ]\r\n },\r\n yAxis: {\r\n labels: {\r\n useHtml: true,\r\n style: {\r\n width: '60px',\r\n fontSize: '0.875rem',\r\n color: '#303030',\r\n whiteSpace: 'normal'\r\n },\r\n formatter: function () {\r\n return `\r\n {label}\r\n
\r\n \r\n \r\n {getNameCurrentSelected()}\r\n \r\n {getScreenReaderName(getNameCurrentSelected())}\r\n \r\n \r\n {currentOptGroups &&\r\n currentOptGroups.map(({ label, options, themeIsGreen }) => (\r\n \r\n \r\n {label}\r\n \r\n {options.map(({ kartleggingId, name, selected }) => {\r\n const item = (\r\n handleOnItemClick(kartleggingId)}\r\n onKeyDown={handleOnItemKeyDown}\r\n aria-label={getScreenReaderName(name)}\r\n >\r\n {selected && (\r\n
\r\n ${\r\n formattedYAxisLabels[this.value] !== undefined\r\n ? formattedYAxisLabels[this.value]\r\n : this.value\r\n }\r\n onChange(null, value)}\r\n value={value}\r\n checked={currentFilters.mestringsniva === value}\r\n />\r\n \r\n {label}\r\n \r\n \r\n ))}\r\n \r\n
\r\n );\r\n};\r\n\r\nProgresjonsvisningFilterButtons.propTypes = {\r\n ferdighetsomradeLegend: PropTypes.string,\r\n ferdighetsomradeRadios: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n id: PropTypes.string,\r\n label: PropTypes.string,\r\n name: PropTypes.string,\r\n value: PropTypes.string,\r\n checked: PropTypes.bool\r\n })\r\n ),\r\n mestringsnivaLegend: PropTypes.string,\r\n mestringsnivaRadios: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n id: PropTypes.string,\r\n label: PropTypes.string,\r\n name: PropTypes.string,\r\n value: PropTypes.string,\r\n checked: PropTypes.bool\r\n })\r\n ),\r\n currentFilters: PropTypes.exact({\r\n ferdighetsomrade: PropTypes.string,\r\n mestringsniva: PropTypes.string\r\n }),\r\n onChange: PropTypes.func // FE\r\n};\r\n\r\nProgresjonsvisningFilterButtons.defaultProps = {};\r\n\r\nexport default ProgresjonsvisningFilterButtons;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport Icon from 'components/icon/icon';\r\n\r\nconst ProgresjonsvisningTimeline = ({\r\n activeQuarters,\r\n onChangeQuarters,\r\n headers,\r\n maxEnd,\r\n prevButtonLabel,\r\n nextButtonLabel,\r\n visibleQuarters\r\n}) => {\r\n return (\r\n `;\r\n },\r\n x: 5\r\n },\r\n tickPositions: [0, 25, 50, 75, 100],\r\n min: 0,\r\n max: 100,\r\n opposite: true,\r\n title: null,\r\n plotLines: [\r\n {\r\n value: 100,\r\n width: 1,\r\n color: '#303030',\r\n zIndex: 5\r\n },\r\n {\r\n value: 50,\r\n width: 1,\r\n color: '#303030',\r\n zIndex: 2\r\n },\r\n {\r\n value: 0,\r\n width: 1,\r\n color: '#303030',\r\n zIndex: 3\r\n }\r\n ],\r\n tickColor: '#dddddd'\r\n },\r\n tooltip: {\r\n shared: true,\r\n hideDelay: 50,\r\n useHTML: true,\r\n style: {\r\n width: '50px',\r\n fontSize: '0.875rem',\r\n color: '#303030',\r\n whiteSpace: 'normal'\r\n }\r\n },\r\n plotOptions: {\r\n column: {\r\n stacking: 'normal',\r\n pointPadding: 0.1,\r\n groupPadding: 0\r\n },\r\n series: {\r\n stickyTracking: false,\r\n point: {\r\n events: {\r\n mouseOut: function () {\r\n this.series.chart.tooltip.hide();\r\n }\r\n }\r\n }\r\n }\r\n },\r\n series: [\r\n {\r\n name: 'Ikke kartlagt',\r\n stack: 'stack',\r\n animation: false,\r\n label: {\r\n enabled: false\r\n },\r\n showInLegend: false,\r\n borderWidth: 0,\r\n data: [],\r\n color: 'transparent',\r\n tooltip: {\r\n followPointer: true\r\n },\r\n zIndex: 1\r\n },\r\n {\r\n name: 'Kartleggingsgrad',\r\n stack: 'stack',\r\n animation: false,\r\n label: {\r\n enabled: false\r\n },\r\n showInLegend: false,\r\n borderWidth: 1,\r\n borderColor: '#8A8A8A',\r\n data: [],\r\n color: 'white',\r\n tooltip: {\r\n followPointer: true\r\n },\r\n zIndex: 5\r\n },\r\n {\r\n name: 'Mestringsgrad',\r\n stack: 'stack',\r\n animation: false,\r\n label: {\r\n enabled: false\r\n },\r\n showInLegend: false,\r\n borderWidth: 1,\r\n borderColor: '#303030',\r\n data: [],\r\n colorByPoint: true,\r\n colors: [],\r\n tooltip: {\r\n followPointer: true\r\n },\r\n zIndex: 5\r\n }\r\n ]\r\n });\r\n\r\n const chartRef = useRef();\r\n\r\n function formatTooltip() {\r\n if (!this || !this.points || this.points.length === 0) return '';\r\n\r\n let buildTooltip = `\r\n onChange(value, null)}\r\n value={value}\r\n checked={currentFilters.ferdighetsomrade === value}\r\n />\r\n \r\n {color ? (\r\n color === 'all' ? (\r\n \r\n ))}\r\n \r\n
\r\n {mestringsnivaRadios?.map(({ id, label, name, value }) => (\r\n `;\r\n\r\n const offset =\r\n data.length < visibleQuarters ? visibleQuarters - data.length : 0;\r\n\r\n const targetIndex =\r\n Math.floor((this.points[0].point.index - 1) / COLS_PER_QUARTER) - offset;\r\n const ferdighetsomradeIndex =\r\n ((this.points[0].point.index - 1) % COLS_PER_QUARTER) - 1;\r\n\r\n if (\r\n targetIndex < 0 ||\r\n targetIndex >= data.length ||\r\n ferdighetsomradeIndex < 0\r\n )\r\n return '';\r\n\r\n const ferdighetsomradeObject = data[\r\n targetIndex\r\n ].progresjonMestringsnivaList.find(\r\n progresjonMestringsniva =>\r\n progresjonMestringsniva.id === filters.mestringsniva\r\n ).ferdighetsomradeProgresjonList[ferdighetsomradeIndex];\r\n\r\n if (!ferdighetsomradeObject) return '';\r\n\r\n if (\r\n ferdighetsomradeObject.id !== filters.ferdighetsomrade &&\r\n ferdighetsomraderKeys.alle !== filters.ferdighetsomrade\r\n )\r\n return '';\r\n\r\n buildTooltip += `
`;\r\n\r\n buildTooltip += `
`;\r\n\r\n return buildTooltip;\r\n }\r\n\r\n const parseChartData = () => {\r\n const columnShadows = [];\r\n let columnShadowIndex = SPACER_COLS;\r\n\r\n const categorySnippet = Array.from(\r\n { length: SPACER_COLS },\r\n () => ''\r\n ).concat([\r\n 'Lesing',\r\n 'Skriving',\r\n 'Ordforråd',\r\n 'Muntlig kommunikasjon',\r\n 'Uttale'\r\n ]);\r\n\r\n const colorSnippet = Array.from({ length: SPACER_COLS }, () => null).concat(\r\n ['#7DBF9D', '#6D889D', '#DDAA95', '#999CBF', '#BFA687']\r\n );\r\n\r\n let newCategories = [];\r\n let newColors = [];\r\n\r\n for (let _ = 0; _ < visibleQuarters; _++) {\r\n newCategories = newCategories.concat(categorySnippet);\r\n newColors = newColors.concat(colorSnippet);\r\n }\r\n\r\n let dataForSerieIkkeKartlagt = Array.from(\r\n { length: SPACER_COLS },\r\n () => null\r\n );\r\n let dataForSerieKartlagt = Array.from({ length: SPACER_COLS }, () => null);\r\n let dataForSerieMestring = Array.from({ length: SPACER_COLS }, () => null);\r\n\r\n if (data.length < visibleQuarters) {\r\n const numDummyQuarters = visibleQuarters - data.length;\r\n\r\n for (let _ = 0; _ < numDummyQuarters; _++) {\r\n dataForSerieIkkeKartlagt = dataForSerieIkkeKartlagt.concat(\r\n Array.from({ length: COLS_PER_QUARTER }, () => null)\r\n );\r\n\r\n dataForSerieKartlagt = dataForSerieKartlagt.concat(\r\n Array.from({ length: COLS_PER_QUARTER }, () => null)\r\n );\r\n\r\n dataForSerieMestring = dataForSerieMestring.concat(\r\n Array.from({ length: COLS_PER_QUARTER }, () => null)\r\n );\r\n\r\n columnShadowIndex += COLS_PER_QUARTER;\r\n }\r\n }\r\n\r\n data.forEach(quarterlyData => {\r\n const dataSet = quarterlyData.progresjonMestringsnivaList.find(\r\n mestringsData => mestringsData.id === filters.mestringsniva\r\n );\r\n\r\n dataSet.ferdighetsomradeProgresjonList.forEach(ferdighetsomrade => {\r\n if (\r\n filters.ferdighetsomrade === ferdighetsomraderKeys.alle ||\r\n filters.ferdighetsomrade === ferdighetsomrade.id\r\n ) {\r\n columnShadows.push({\r\n color: 'white',\r\n from: columnShadowIndex - 0.45,\r\n to: columnShadowIndex + 0.45,\r\n zIndex: 0\r\n });\r\n }\r\n columnShadowIndex++;\r\n\r\n dataForSerieIkkeKartlagt.push(\r\n filters.ferdighetsomrade === ferdighetsomraderKeys.alle ||\r\n filters.ferdighetsomrade === ferdighetsomrade.id\r\n ? 100 - ferdighetsomrade.kartleggingsgradPercent\r\n : 0\r\n );\r\n\r\n dataForSerieKartlagt.push(\r\n filters.ferdighetsomrade === ferdighetsomraderKeys.alle ||\r\n filters.ferdighetsomrade === ferdighetsomrade.id\r\n ? Math.max(\r\n 0,\r\n ferdighetsomrade.kartleggingsgradPercent -\r\n ferdighetsomrade.mestringsgradPercent\r\n )\r\n : 0\r\n );\r\n\r\n dataForSerieMestring.push(\r\n filters.ferdighetsomrade === ferdighetsomraderKeys.alle ||\r\n filters.ferdighetsomrade === ferdighetsomrade.id\r\n ? ferdighetsomrade.mestringsgradPercent\r\n : 0\r\n );\r\n });\r\n\r\n columnShadowIndex += SPACER_COLS;\r\n\r\n dataForSerieIkkeKartlagt = dataForSerieIkkeKartlagt.concat(\r\n Array.from({ length: SPACER_COLS }, () => null)\r\n );\r\n dataForSerieKartlagt = dataForSerieKartlagt.concat(\r\n Array.from({ length: SPACER_COLS }, () => null)\r\n );\r\n dataForSerieMestring = dataForSerieMestring.concat(\r\n Array.from({ length: SPACER_COLS }, () => null)\r\n );\r\n });\r\n\r\n setParsedChartData(prevData => {\r\n const newSeries = prevData.series.map((serie, index) => {\r\n switch (index) {\r\n case 0:\r\n return {\r\n ...serie,\r\n data: dataForSerieIkkeKartlagt\r\n };\r\n case 1:\r\n return {\r\n ...serie,\r\n data: dataForSerieKartlagt\r\n };\r\n case 2:\r\n return {\r\n ...serie,\r\n data: dataForSerieMestring\r\n };\r\n default:\r\n return serie;\r\n }\r\n });\r\n\r\n const newData = {\r\n ...prevData,\r\n xAxis: {\r\n ...prevData.xAxis,\r\n categories: newCategories,\r\n plotBands: columnShadows\r\n },\r\n series: newSeries,\r\n tooltip: {\r\n ...prevData.tooltip,\r\n formatter: formatTooltip\r\n }\r\n };\r\n\r\n newData.series[2].colors = newColors;\r\n\r\n return newData;\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n parseChartData(data);\r\n }, [data, filters]);\r\n\r\n useEffect(() => {\r\n if (!chartContext) return;\r\n\r\n if (!chartRef.current) return;\r\n\r\n const chart = chartRef.current.chart;\r\n\r\n if (!chart) return;\r\n\r\n const chartSvg = chart.getSVG({\r\n chart: { height: 380, width: 750, spacingTop: 20 }\r\n });\r\n\r\n chartContext.setSVGFromChart(chartSvg);\r\n }, [parsedChartData]);\r\n\r\n return (\r\n | ${ferdighetsomradeObject.title} | |
|---|---|
| ${name} | \r\n${value} | \r\n
\r\n
\r\n );\r\n};\r\n\r\nProgresjonsvisningChart.propTypes = {\r\n data: PropTypes.arrayOf(PropTypes.exact(quarterDataProps)), // FE\r\n filters: PropTypes.exact({\r\n ferdighetsomrade: PropTypes.string,\r\n mestringsniva: PropTypes.string\r\n }), // FE\r\n visibleQuarters: PropTypes.number, // FE\r\n yAxisLabels: PropTypes.exact({\r\n mestrerIkke: PropTypes.string,\r\n mestrerUtenStotte: PropTypes.string,\r\n mestrerMedStotte: PropTypes.string\r\n }) // FE\r\n};\r\n\r\nProgresjonsvisningChart.defaultProps = {};\r\n\r\nexport default ProgresjonsvisningChart;\r\n","import React, { Fragment } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport Icon from 'components/icon';\r\n\r\nconst ProgresjonsvisningFilterButtons = ({\r\n ferdighetsomradeLegend,\r\n ferdighetsomradeRadios,\r\n mestringsnivaLegend,\r\n mestringsnivaRadios,\r\n currentFilters,\r\n onChange\r\n}) => {\r\n return (\r\n \r\n
\r\n {ferdighetsomradeRadios?.map(({ id, label, name, value, color }) => (\r\n \r\n onChangeQuarters(-1)}\r\n >\r\n \r\n {header}\r\n
\r\n ))}\r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nProgresjonsvisning.propTypes = {\r\n forceUpdate: PropTypes.bool, //FE\r\n progresjonsvisningEndpoint: PropTypes.string,\r\n actionBar: PropTypes.exact(ActionBar.propTypes),\r\n kartleggingSelector: PropTypes.exact(KartleggingSelector.propTypes),\r\n progresjonsvisningTimeline: PropTypes.exact(\r\n ProgresjonsvisningTimeline.propTypes\r\n ),\r\n filterButtons: PropTypes.exact(ProgresjonsvisningFilterButtons.propTypes),\r\n initialData: PropTypes.exact({\r\n kartleggingId: PropTypes.string,\r\n progresjonPeriodQuarterOfYearList: PropTypes.arrayOf(\r\n PropTypes.exact(quarterDataProps)\r\n )\r\n }),\r\n yAxisLabels: PropTypes.exact({\r\n mestrerIkke: PropTypes.string,\r\n mestrerUtenStotte: PropTypes.string,\r\n mestrerMedStotte: PropTypes.string\r\n }),\r\n pdfChartSvg: PropTypes.string,\r\n endQuarterIndex: PropTypes.number,\r\n initialVisibleQuarters: PropTypes.number,\r\n chartAlternativeText: PropTypes.string\r\n};\r\n\r\nProgresjonsvisning.defaultProps = {};\r\n\r\nexport default Progresjonsvisning;\r\n","import PropTypes from 'prop-types';\r\nimport React, { useEffect, useState } from 'react';\r\n\r\nimport api from 'js/api-helper';\r\n\r\nimport LoadingSpinner from 'components/loading-spinner/loading-spinner';\r\nimport InspectorProgressionHeader from 'components/inspector-progression-header/inspector-progression-header';\r\nimport KartleggingPlaceholder from 'components/kartlegging-placeholder/kartlegging-placeholder';\r\nimport Progresjonsvisning from 'components/progresjonsvisning/progresjonsvisning';\r\n\r\nconst InspectorProgression = ({\r\n filterEndpoint,\r\n inspectorHeader,\r\n progresjonsvisningContent,\r\n kartleggingPlaceholder\r\n}) => {\r\n const [isLoading, setIsLoading] = useState(true);\r\n const [\r\n currentProgresjonsvisningData,\r\n setCurrentProgresjosnvisningData\r\n ] = useState(progresjonsvisningContent);\r\n const [\r\n currentKartleggingPlaceholder,\r\n setCurrentKartleggingPlaceholder\r\n ] = useState(kartleggingPlaceholder);\r\n\r\n const refreshKartlegginger = async (fromValue, toValue, arstrinnValue) => {\r\n setIsLoading(true);\r\n try {\r\n const { kartleggingSelector, placeholder } = await api.execute(\r\n filterEndpoint,\r\n {\r\n fraDato: fromValue,\r\n tilDato: toValue,\r\n arstrinn: arstrinnValue\r\n }\r\n );\r\n setCurrentKartleggingPlaceholder(placeholder);\r\n setCurrentProgresjosnvisningData(prev => ({\r\n ...prev,\r\n kartleggingSelector: kartleggingSelector\r\n }));\r\n } catch (error) {\r\n console.log(error);\r\n } finally {\r\n setIsLoading(false);\r\n }\r\n };\r\n\r\n const handleChangeFilterInput = (fromInput, toInput, arstrinnInput) => {\r\n refreshKartlegginger(fromInput.value, toInput.value, arstrinnInput.value);\r\n };\r\n\r\n useEffect(() => {\r\n setIsLoading(false);\r\n }, []);\r\n\r\n return (\r\n \r\n {kartleggingSelector && (\r\n
\r\n {formatIsChart ? (\r\n \r\n '')\r\n : progresjosnvisningData\r\n ?.map(quarter => quarter.periodQuarterOfYear.shortName)\r\n .filter(\r\n (_, index) =>\r\n index >= activeQuarters.start &&\r\n index <= activeQuarters.end\r\n )\r\n }\r\n maxEnd={progresjosnvisningData?.length - 1}\r\n visibleQuarters={visibleQuarters}\r\n />\r\n
\r\n ) : isLoading ? (\r\n \r\n {pdfChartSvg && (\r\n
\r\n {filterButtons && (\r\n \r\n
\r\n ) : (\r\n \r\n
\r\n ) : (\r\n \r\n {progresjosnvisningData\r\n .slice()\r\n .reverse()\r\n .map(({ periodQuarterOfYear, tableData }) => (\r\n \r\n
\r\n ))}\r\n \r\n {periodQuarterOfYear.name}\r\n
\r\n\r\n
\r\n );\r\n};\r\n\r\nInspectorProgression.propTypes = {\r\n filterEndpoint: PropTypes.string,\r\n inspectorHeader: PropTypes.exact(InspectorProgressionHeader.propTypes),\r\n progresjonsvisningContent: PropTypes.exact(Progresjonsvisning.propTypes),\r\n kartleggingPlaceholder: PropTypes.exact(KartleggingPlaceholder.propTypes)\r\n};\r\n\r\nInspectorProgression.defaultProps = {};\r\n\r\nexport default InspectorProgression;\r\n","/* eslint-disable react/no-multi-comp */\r\nimport React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport ToggleChartContext from './toggle-chart-context';\r\n\r\nconst ToggleChartContextProvider = ({ children, formatIsTable }) => {\r\n const [formatIsChart, setFormatIsChart] = useState(\r\n formatIsTable ? false : true\r\n );\r\n\r\n return (\r\n \r\n
\r\n \r\n {isLoading ? (\r\n
\r\n \r\n
\r\n ) : currentKartleggingPlaceholder ? (\r\n \r\n onClick(index)}\r\n />\r\n \r\n
\r\n \r\n {label}\r\n \r\n \r\n );\r\n};\r\n\r\nAlternative.propTypes = {\r\n name: PropTypes.string, //excluded from backend\r\n onClick: PropTypes.func, //excluded from backend\r\n colorValue: PropTypes.string, //excluded from backend\r\n isDisabled: PropTypes.bool, //excluded from backend\r\n label: PropTypes.string, //excluded from backend\r\n labelledbyId: PropTypes.string, //excluded from backend\r\n questionLegendId: PropTypes.string, //excluded from backend\r\n index: PropTypes.number.isRequired, // exluded from backend\r\n isChecked: PropTypes.bool // exlcude from BE\r\n};\r\n\r\nAlternative.defaultProps = {\r\n isChecked: false\r\n};\r\n\r\nexport default Alternative;\r\n","import React, { useState, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport api from 'js/api-helper';\r\n\r\nimport Alternative from './alternative';\r\nimport Tooltip from '../tooltip';\r\nimport DefinitionText from 'components/definition-text/definition-text';\r\nimport Icon from '../icon';\r\n\r\nconst Question = ({\r\n id,\r\n questionIndex,\r\n questionText,\r\n indexSelected,\r\n hideAlternatives,\r\n tooltip,\r\n colorValue,\r\n isDisabled,\r\n baseData,\r\n saveEndpoint,\r\n radioHeaderLabels,\r\n radioHeaderIds,\r\n questionPreText\r\n}) => {\r\n const [currentSaved, setCurrentSaved] = useState(\r\n indexSelected !== undefined ? indexSelected : -1\r\n );\r\n\r\n const saveTimeoutId = useRef(null);\r\n\r\n const FIELDSET_ID = (id + questionIndex).replace(/\\s+/g, '');\r\n\r\n const save = target => {\r\n if (target === currentSaved) return;\r\n\r\n clearTimeout(saveTimeoutId.current);\r\n\r\n let prevSaved = currentSaved;\r\n setCurrentSaved(target);\r\n\r\n saveTimeoutId.current = setTimeout(async () => {\r\n const payload = {\r\n ...baseData,\r\n questionId: questionIndex,\r\n answerId: target\r\n };\r\n\r\n try {\r\n await api.execute(saveEndpoint, payload);\r\n } catch (error) {\r\n setCurrentSaved(prevSaved);\r\n }\r\n }, 200);\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nQuestion.propTypes = {\r\n onChange: PropTypes.func, //excluded from backend\r\n colorValue: PropTypes.string, //excluded from backend\r\n isDisabled: PropTypes.bool, //excluded from backend\r\n hideAlternatives: PropTypes.bool, //excluded from backend\r\n saveEndpoint: PropTypes.string, // exclude from BE\r\n baseData: PropTypes.exact({\r\n mestringsnivaid: PropTypes.string.isRequired,\r\n ferdighetsomradeid: PropTypes.string.isRequired,\r\n kartleggingid: PropTypes.string.isRequired\r\n }), // exclude from BE\r\n radioHeaderLabels: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n labelShort: PropTypes.string,\r\n labelLong: PropTypes.string\r\n })\r\n ),\r\n radioHeaderIds: PropTypes.arrayOf(PropTypes.string), //exclude from BE\r\n id: PropTypes.string.isRequired,\r\n questionIndex: PropTypes.string.isRequired,\r\n questionText: PropTypes.exact(DefinitionText.propTypes),\r\n questionPreText: PropTypes.string,\r\n tooltip: PropTypes.exact(Tooltip.propTypes),\r\n indexSelected: PropTypes.number\r\n};\r\n\r\nQuestion.defaultProps = {\r\n alternatives: []\r\n};\r\n\r\nexport default Question;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Question from './question';\r\nimport cn from 'classnames';\r\nimport colors from 'js/kartlegging-colors';\r\n\r\nconst Questionnaire = ({\r\n title,\r\n titleAnchor,\r\n headerText,\r\n questions,\r\n isReadOnly,\r\n saveEndpoint,\r\n submitData,\r\n color\r\n}) => {\r\n const getRadioHeaderIds = () => {\r\n return headerText?.labels.map(\r\n (_, index) => 'headerlabel' + index + submitData.mestringsnivaid\r\n );\r\n };\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nQuestionnaire.propTypes = {\r\n saveEndpoint: PropTypes.string.isRequired, // Exclude from BE\r\n title: PropTypes.string,\r\n titleAnchor: PropTypes.string,\r\n isReadOnly: PropTypes.bool,\r\n headerText: PropTypes.exact({\r\n title: PropTypes.string,\r\n labels: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n labelShort: PropTypes.string,\r\n labelLong: PropTypes.string\r\n })\r\n )\r\n }),\r\n color: PropTypes.oneOf(Object.keys(colors)),\r\n submitData: PropTypes.exact({\r\n mestringsnivaid: PropTypes.string.isRequired,\r\n ferdighetsomradeid: PropTypes.string.isRequired,\r\n kartleggingid: PropTypes.string.isRequired\r\n }).isRequired,\r\n questions: PropTypes.arrayOf(PropTypes.exact(Question.propTypes)).isRequired\r\n};\r\n\r\nQuestionnaire.defaultProps = {\r\n questions: []\r\n};\r\n\r\nexport default Questionnaire;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Questionnaire from '../questionnaire';\r\n\r\nconst Kartlegging = ({ questionnaires, saveEndpoint }) => {\r\n return (\r\n \r\n {title && (\r\n \r\n {title}\r\n \r\n )}\r\n {headerText?.labels && (\r\n
\r\n {questions && (\r\n \r\n
\r\n )}\r\n {headerText?.title}
\r\n \r\n {headerText?.labels.map(({ labelShort, labelLong }, index) => (\r\n
\r\n \r\n {labelShort}\r\n \r\n {labelLong}\r\n \r\n
\r\n ))}\r\n - \r\n {questions.map((question, index) => (\r\n
- \r\n
\r\n {questionnaires &&\r\n !!questionnaires.length &&\r\n questionnaires.map((questionnaire, index) => (\r\n
\r\n );\r\n};\r\n\r\nKartlegging.propTypes = {\r\n saveEndpoint: PropTypes.string,\r\n questionnaires: PropTypes.arrayOf(PropTypes.exact(Questionnaire.propTypes))\r\n .isRequired\r\n};\r\n\r\nexport default Kartlegging;\r\n","/* eslint-disable react/no-multi-comp */\r\nimport React, { useRef, useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport SvgChartContext from './svg-chart-context';\r\n\r\nconst ChartContextProvider = ({ children }) => {\r\n const [SVGFromChart, setSVGFromChart] = useState();\r\n\r\n // 15.09 - ASK: Callback version to fix edge case where hover effect could be added to SVG if triggered before set method had captured the svg\r\n const callbackRef = useRef(null);\r\n const setSVGFromChartWithCallback = (chart, fn) => {\r\n setSVGFromChart(chart);\r\n callbackRef.current = fn;\r\n };\r\n useEffect(() => {\r\n if (!callbackRef.current) return;\r\n\r\n callbackRef.current();\r\n callbackRef.current = null;\r\n }, [SVGFromChart]);\r\n\r\n return (\r\n \r\n
\r\n ))}\r\n \r\n \r\n {pdfChartSvg ? (\r\n <>\r\n \r\n {({ formatIsChart }) =>\r\n formatIsChart ? (\r\n \r\n )}\r\n {!overviewChart && kartleggingPlaceholder && (\r\n \r\n
\r\n ${\r\n this.value\r\n }%
\r\n );\r\n};\r\n\r\nKartleggingshistorikkDatoSelector.propTypes = {\r\n label: PropTypes.string,\r\n optGroups: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n label: PropTypes.string,\r\n options: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n id: PropTypes.string,\r\n name: PropTypes.string\r\n })\r\n )\r\n })\r\n ),\r\n onChange: PropTypes.func, // FE\r\n selectedDate: PropTypes.string // FE\r\n};\r\n\r\nKartleggingshistorikkDatoSelector.defaultProps = {};\r\n\r\nexport default KartleggingshistorikkDatoSelector;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Accordion from 'components/accordion/accordion';\r\nimport colors from 'js/kartlegging-colors';\r\nimport Icon from 'components/icon';\r\n\r\nconst KartleggingshistorikkEndringer = ({ statusList }) => {\r\n\r\n return (\r\n `;\r\n },\r\n x: 5\r\n }, \r\n tickPositions: [0, 25, 50, 75, 100],\r\n min: 0,\r\n max: 100,\r\n title: {\r\n text: 'Kartleggingsgrad',\r\n align: 'low',\r\n x: -162,\r\n offset: 8,\r\n style: {\r\n color: '#303030',\r\n fontSize: '0.875rem'\r\n }\r\n },\r\n plotLines: [\r\n {\r\n value: 100,\r\n width: 1,\r\n color: '#303030',\r\n zIndex: 4\r\n },\r\n {\r\n value: 50,\r\n width: 1,\r\n color: '#303030',\r\n zIndex: 2\r\n },\r\n {\r\n value: 0,\r\n width: 1,\r\n color: '#303030',\r\n zIndex: 3\r\n }\r\n ],\r\n tickColor: '#dddddd'\r\n },\r\n tooltip: {\r\n shared: true,\r\n hideDelay: 50,\r\n useHTML: true,\r\n style: {\r\n width: '50px',\r\n fontSize: '0.875rem',\r\n color: '#303030',\r\n whiteSpace: 'normal'\r\n }\r\n },\r\n plotOptions: {\r\n column: {\r\n stacking: 'normal',\r\n pointPadding: 0,\r\n groupPadding: 0\r\n },\r\n series: {\r\n stickyTracking: false,\r\n point: {\r\n events: {\r\n mouseOut: function () {\r\n this.series.chart.tooltip.hide();\r\n }\r\n }\r\n }\r\n }\r\n },\r\n series: []\r\n });\r\n const chartRef = useRef();\r\n\r\n function formatTooltip() {\r\n if (!this || !this.points || this.points.length === 0) return '';\r\n\r\n let buildTooltip = `
\r\n `;\r\n\r\n const ferdighetsomradeIndex =\r\n Math.floor((this.points[0].point.index - 2) / COLS_PER_FERDIGHETSOMRADE);\r\n const mestringsnivaIndex = (this.points[0].point.index - 2) % COLS_PER_FERDIGHETSOMRADE;\r\n \r\n const ferdighetsomradeObject = data.ferdighetsomradeStatusList[ferdighetsomradeIndex]\r\n const mestringsnivaObject = ferdighetsomradeObject.mestringsnivaStatusList[mestringsnivaIndex];\r\n\r\n if (!ferdighetsomradeObject || !mestringsnivaObject) return '';\r\n\r\n buildTooltip += `
`;\r\n\r\n buildTooltip += `
`;\r\n\r\n return buildTooltip;\r\n };\r\n\r\n const parseChartData = () => {\r\n \r\n const colors = { \r\n Green: ['#def2e7', '#b9e1cc', '#7DBF9D'],\r\n Slate: ['#d9e5f1', '#b7ccdc', '#6D889D'],\r\n Peach: ['#f8e7e0', '#eed0c3', '#DDAA95'],\r\n Azure: ['#e2e3f1', '#c7c9e3', '#999CBF'],\r\n Eggshell: ['#f2e8da', '#dbc7ac', '#BFA687']\r\n }\r\n\r\n let dataList = [{name: \"\"}, {name: \"\"}];\r\n let columnShadows = [];\r\n let columnShadowIndex = 2; \r\n\r\n data.ferdighetsomradeStatusList.forEach(({mestringsnivaStatusList}) => {\r\n mestringsnivaStatusList.forEach(({navn: mestringsnivaNavn, kartleggingsgradProsent, color}, index) => {\r\n dataList.push({\r\n y: kartleggingsgradProsent, \r\n color: colors[color.name][index],\r\n name: mestringsnivaNavn\r\n }); \r\n columnShadows.push({\r\n color: 'white',\r\n from: columnShadowIndex - 0.45,\r\n to: columnShadowIndex + 0.45,\r\n zIndex: 0\r\n });\r\n columnShadowIndex++;\r\n });\r\n dataList.push({name: \"\"});\r\n columnShadows.push({});\r\n columnShadowIndex++;\r\n });\r\n dataList.push({name: \"\"});\r\n\r\n let series = [\r\n {\r\n name: \"ikke kartlagt\",\r\n stack: 'stack',\r\n animation: false,\r\n showInLegend: false,\r\n borderWidth: 0,\r\n colorByPoint: true,\r\n tooltip: {\r\n followPointer: true\r\n },\r\n zIndex: 5,\r\n data: dataList.map(data => (data?.y >= 0 ? {...data, y: 100, color: 'transparent'} : data))\r\n },\r\n {\r\n name: \"Kartleggingsgrad\",\r\n stack: 'stack',\r\n animation: false,\r\n showInLegend: false,\r\n borderWidth: 1,\r\n borderColor: '#303030',\r\n colorByPoint: true,\r\n tooltip: {\r\n followPointer: true\r\n },\r\n zIndex: 5,\r\n data: dataList\r\n }\r\n ]; \r\n\r\n setParsedChartData({\r\n ...parsedChartData,\r\n series: series,\r\n xAxis: {\r\n ...parsedChartData.xAxis,\r\n plotBands: columnShadows\r\n },\r\n tooltip: {\r\n ...parsedChartData.tooltip,\r\n formatter: formatTooltip\r\n }\r\n })\r\n };\r\n\r\n useEffect(() => {\r\n parseChartData(data);\r\n }, [data]);\r\n\r\n useEffect(() => {\r\n if (!chartContext) return;\r\n\r\n if (!chartRef.current) return;\r\n\r\n const chart = chartRef.current.chart;\r\n\r\n if (!chart) return;\r\n\r\n \r\n const chartSvg = chart.getSVG({\r\n chart: { height: 450, width: 600, spacingTop: 10 }\r\n });\r\n\r\n chartContext.setSVGFromChart(chartSvg);\r\n }, [parsedChartData]);\r\n\r\n return (\r\n | ${ferdighetsomradeObject.navn} | |
|---|---|
| ${name} | \r\n${value} | \r\n
\r\n
\r\n );\r\n};\r\n\r\nKartleggingshistorikkChart.propTypes = {\r\n data: PropTypes.exact({\r\n kartleggingId: 'fa9cf43a-fa17-4236-994c-5c80e68bf380',\r\n historikkEndringerHeading: 'Endringer utført 20.10.2023',\r\n dato: '20.10.2023',\r\n ferdighetsomradeStatusList: PropTypes.arrayOf(PropTypes.exact({\r\n id: PropTypes.string,\r\n navn: PropTypes.string,\r\n nummer: PropTypes.number,\r\n mestringsnivaStatusList: PropTypes.arrayOf(PropTypes.exact({\r\n id: PropTypes.string,\r\n navn: PropTypes.string,\r\n nummer: PropTypes.number,\r\n color: PropTypes.exact({\r\n name: PropTypes.string,\r\n opacity: PropTypes.number\r\n }),\r\n kartleggingsgradProsent: PropTypes.number,\r\n nameValueList: PropTypes.arrayOf(PropTypes.exact({\r\n name: PropTypes.string,\r\n value: PropTypes.string\r\n })),\r\n }))\r\n }))\r\n })\r\n};\r\n\r\nKartleggingshistorikkChart.defaultProps = {};\r\n\r\nexport default KartleggingshistorikkChart;\r\n","import React, { useEffect, useState, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\nimport useClickOutside from '../../hooks/use-click-outside';\r\n\r\nimport Icon from 'components/icon/icon';\r\n\r\nconst SELECTOR_ITEM_ID = 'kartleggingshistorikk-dato-selector-item';\r\nconst SELECTOR_BUTTON_ID = 'kartleggingshistorikk-dato-selector-button';\r\nconst SELECTOR_ID = 'kartleggingshistorikk-dato-selector-label';\r\n\r\nconst KartleggingshistorikkDatoSelector = ({ label, optGroups, onChange, selectedDate }) => {\r\n const [selectIsOpen, setSelectIsOpen] = useState(false);\r\n const [selectOptionInFocus, setSelectOptionInFocus] = useState(0);\r\n\r\n const wrapperRef = useRef(null);\r\n\r\n let itemIndex = 0;\r\n\r\n const getNameCurrentSelected = () => {\r\n const selectedElement = optGroups\r\n .flatMap(group => group.options)\r\n .find(option => option.id === selectedDate);\r\n return selectedElement?.name ?? 'Kan ikke finne valgt element';\r\n };\r\n\r\n const handleChange = id => {\r\n onChange && onChange(id);\r\n };\r\n\r\n const handleParentClick = () => {\r\n setSelectIsOpen(prev => !prev);\r\n };\r\n\r\n const handleOnItemClick = id => {\r\n handleChange(id);\r\n setSelectIsOpen(false);\r\n };\r\n\r\n const handleOnParentKeyDown = e => {\r\n if (e.key !== 'Tab') {\r\n e.preventDefault();\r\n }\r\n\r\n switch (e.key) {\r\n case 'Enter':\r\n case ' ':\r\n case 'ArrowUp':\r\n case 'ArrowDown': {\r\n handleParentClick();\r\n break;\r\n }\r\n case 'Tab': {\r\n setSelectIsOpen(false);\r\n break;\r\n }\r\n default: {\r\n return;\r\n }\r\n }\r\n };\r\n\r\n const handleOnItemKeyDown = e => {\r\n if (e.key !== 'Tab') {\r\n e.preventDefault();\r\n }\r\n const totalLength = optGroups.reduce(\r\n (acc, group) => (acc += group.options.length),\r\n 0\r\n );\r\n\r\n if (selectIsOpen) {\r\n switch (e.key) {\r\n case 'ArrowDown': {\r\n setSelectOptionInFocus(prev => {\r\n const indexToBeFocused =\r\n prev + 1 <= totalLength - 1 ? prev + 1 : totalLength - 1;\r\n const itemToBeFocused = document.querySelector(\r\n `#${SELECTOR_ITEM_ID}${indexToBeFocused}`\r\n );\r\n\r\n if (itemToBeFocused) {\r\n itemToBeFocused.focus();\r\n }\r\n return indexToBeFocused ?? 0;\r\n });\r\n break;\r\n }\r\n case 'ArrowUp': {\r\n setSelectOptionInFocus(prev => {\r\n const indexToBeFocused = prev - 1 >= 0 ? prev - 1 : 0;\r\n const itemToBeFocused = document.querySelector(\r\n `#${SELECTOR_ITEM_ID}${indexToBeFocused}`\r\n );\r\n\r\n if (itemToBeFocused) {\r\n itemToBeFocused.focus();\r\n }\r\n return indexToBeFocused ?? 0;\r\n });\r\n break;\r\n }\r\n case 'Tab': {\r\n const itemId = optGroups.flatMap(group => group.options)[\r\n selectOptionInFocus\r\n ].id;\r\n handleChange(itemId);\r\n setSelectIsOpen(prev => !prev);\r\n break;\r\n }\r\n case 'Enter':\r\n case ' ': {\r\n const itemId = optGroups.flatMap(group => group.options)[\r\n selectOptionInFocus\r\n ].id;\r\n handleChange(itemId);\r\n setSelectIsOpen(prev => !prev);\r\n const button = document.querySelector(`#${SELECTOR_BUTTON_ID}`);\r\n if (button) button.focus();\r\n break;\r\n }\r\n case 'Escape': {\r\n setSelectIsOpen(prev => !prev);\r\n const button = document.querySelector(`#${SELECTOR_BUTTON_ID}`);\r\n if (button) button.focus();\r\n break;\r\n }\r\n default: {\r\n return;\r\n }\r\n }\r\n }\r\n };\r\n\r\n useClickOutside(wrapperRef, () => {\r\n setSelectIsOpen(prev => {\r\n if (prev) {\r\n const itemId = optGroups.flatMap(group => group.options)[\r\n selectOptionInFocus\r\n ].id;\r\n\r\n handleChange(itemId);\r\n return !prev;\r\n }\r\n return prev;\r\n });\r\n });\r\n\r\n useEffect(() => {\r\n const itemToBeFocused = document.querySelector(\r\n `#${SELECTOR_ITEM_ID}${selectOptionInFocus}`\r\n );\r\n\r\n if (itemToBeFocused) {\r\n itemToBeFocused.focus();\r\n }\r\n }, [selectIsOpen]);\r\n\r\n return (\r\n \r\n \r\n {label}\r\n
\r\n \r\n \r\n {getNameCurrentSelected()}\r\n \r\n {optGroups &&\r\n optGroups.map(({ label, options }, listIndex) => (\r\n \r\n \r\n {label}\r\n \r\n {options.map(({ id, name }) => {\r\n const item = (\r\n handleOnItemClick(id)}\r\n onKeyDown={handleOnItemKeyDown}\r\n >\r\n {id === selectedDate && (\r\n
\r\n \r\n {statusList.map(({\r\n utfortAvNavn,\r\n utfortAvInfo,\r\n ferdighetsomradeEndringStatusList\r\n }) => (\r\n \r\n \r\n ))}\r\n
\r\n );\r\n};\r\n\r\nKartleggingshistorikkEndringer.propTypes = {\r\n statusList: PropTypes.arrayOf(PropTypes.exact({\r\n utfortAvNavn: PropTypes.string,\r\n utfortAvInfo: PropTypes.string,\r\n ferdighetsomradeEndringStatusList: PropTypes.arrayOf(PropTypes.exact({\r\n id: PropTypes.string,\r\n navn: PropTypes.string,\r\n nummer: PropTypes.number,\r\n color: PropTypes.oneOf(Object.keys(colors)),\r\n mestringsnivaEndringStatusList: PropTypes.arrayOf(PropTypes.exact({\r\n id: PropTypes.string,\r\n navn: PropTypes.string,\r\n nummer: PropTypes.number,\r\n utsagnEndringStatusList: PropTypes.arrayOf(PropTypes.exact({\r\n id: PropTypes.string,\r\n nummer: PropTypes.number,\r\n tekst: PropTypes.string,\r\n endretFra: PropTypes.string,\r\n endretTil: PropTypes.string,\r\n endretTilgjengeligTekst: PropTypes.string\r\n }))\r\n }))\r\n }))\r\n }))\r\n};\r\n\r\nKartleggingshistorikkEndringer.defaultProps = {};\r\n\r\nexport default KartleggingshistorikkEndringer;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport api from 'js/api-helper';\r\n\r\nimport ActionBar from 'components/action-bar/action-bar';\r\nimport KartleggingSelector from 'components/kartlegging-selector/kartlegging-selector';\r\nimport LoadingSpinner from 'components/loading-spinner/loading-spinner';\r\nimport KartleggingshistorikkChart from 'components/kartleggingshistorikk-chart/kartleggingshistorikk-chart';\r\nimport KartleggingshistorikkDatoSelector from 'components/kartleggingshistorikk-dato-selector/kartleggingshistorikk-dato-selector';\r\nimport ChartTable from 'components/chart-table/chart-table';\r\nimport { useToggleChartContext } from '../../../source/contexts/toggle-chart-context';\r\nimport KartleggingshistorikkEndringer from 'components/kartleggingshistorikk-endringer/kartleggingshistorikk-endringer';\r\n\r\nconst Kartleggingshistorikk = ({\r\n kartleggingshistorikkEndpoint,\r\n kartleggingSelector,\r\n actionBar,\r\n initialData,\r\n ferdighetsomradeLabels,\r\n selectedDate,\r\n pdfChartSvg,\r\n chartAlternativeText\r\n}) => {\r\n const { formatIsChart } = useToggleChartContext();\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [kartleggingsHistorikkData, setKartleggingsHistorikkData] = useState(\r\n initialData\r\n );\r\n const [currentHistoryStatusIndex, setCurrentHistoryStatusIndex] = useState(\r\n selectedDate\r\n ? kartleggingsHistorikkData.historikkDatoStatusList.findIndex(\r\n ({ dato }) => dato === selectedDate\r\n )\r\n : 0\r\n );\r\n\r\n const getProgresjonData = async targetKartlegging => {\r\n setIsLoading(true);\r\n try {\r\n if (!kartleggingshistorikkEndpoint) return;\r\n const data = await api.execute(kartleggingshistorikkEndpoint, {\r\n kartleggingId: targetKartlegging\r\n });\r\n setKartleggingsHistorikkData(data);\r\n } catch (error) {\r\n console.log(error);\r\n } finally {\r\n setIsLoading(false);\r\n }\r\n };\r\n\r\n const handleOnChangeKartlegging = kartleggingId => {\r\n getProgresjonData(kartleggingId);\r\n setCurrentHistoryStatusIndex(0);\r\n };\r\n\r\n const handleOnChangeDato = date => {\r\n setCurrentHistoryStatusIndex(\r\n kartleggingsHistorikkData.historikkDatoStatusList.findIndex(\r\n ({ dato }) => dato === date\r\n )\r\n );\r\n };\r\n\r\n return (\r\n - \r\n {ferdighetsomradeEndringStatusList.map(({\r\n navn: ferdighetsomradeNavn,\r\n color, \r\n mestringsnivaEndringStatusList\r\n }) => mestringsnivaEndringStatusList.map(({\r\n id,\r\n navn,\r\n utsagnEndringStatusList\r\n }) => !!utsagnEndringStatusList?.length && (\r\n
- \r\n
\r\n \r\n {ferdighetsomradeNavn + ' '}\r\n \r\n {navn}\r\n
\r\n\r\n \r\n {utsagnEndringStatusList.map(({\r\n id,\r\n tekst,\r\n endretFra,\r\n endretTil,\r\n endretTilgjengeligTekst\r\n }) => (\r\n
\r\n\r\n \r\n ))}\r\n \r\n\r\n \r\n {id + ' '}\r\n \r\n {tekst}\r\n \r\n\r\n \r\n {endretFra}\r\n \r\n\r\n \r\n \r\n {' ' + endretTil}\r\n \r\n \r\n {endretTilgjengeligTekst}\r\n \r\n \r\n )))}\r\n
\r\n \r\n {formatIsChart ? (\r\n
\r\n ) : (\r\n \r\n {kartleggingSelector && (\r\n
\r\n \r\n
\r\n \r\n Kartleggingsgrad\r\n
\r\n\r\n {isLoading ? (\r\n \r\n
\r\n )}\r\n \r\n
\r\n ) : (\r\n - \r\n {ferdighetsomradeLabels.map(label => (\r\n
\r\n {\r\n kartleggingsHistorikkData.historikkDatoStatusList[\r\n currentHistoryStatusIndex\r\n ].historikkEndringerHeading\r\n }\r\n
\r\n\r\n \r\n {kartleggingshistorikkContent && !kartleggingPlaceholder && (\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nLogin.textWithLink = {\r\n text: PropTypes.string,\r\n link: PropTypes.exact({\r\n text: PropTypes.string.isRequired,\r\n href: PropTypes.string.isRequired\r\n }).isRequired\r\n};\r\n\r\nLogin.propTypes = {\r\n title: PropTypes.string.isRequired,\r\n leadBoxTitle: PropTypes.string,\r\n htmlLead: PropTypes.string,\r\n htmlLeadBoxFirst: PropTypes.string,\r\n htmlLeadBoxSecond: PropTypes.string,\r\n link: PropTypes.exact({\r\n text: PropTypes.string,\r\n href: PropTypes.string\r\n })\r\n};\r\n\r\nexport default Login;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Login from '../login';\r\nimport AnonymousLayout from '../layouts/anonymous-layout';\r\n\r\nconst LoginPage = ({ layout, login }) => {\r\n return (\r\n \r\n
\r\n {title}
\r\n\r\n {htmlLead && (\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n {leadBoxTitle && (\r\n
\r\n {leadBoxTitle}
\r\n )}\r\n\r\n {htmlLeadBoxFirst && (\r\n\r\n
\r\n \r\n
\r\n \r\n {title &&
\r\n \r\n );\r\n};\r\n\r\nMainHeading.propTypes = {\r\n title: PropTypes.string,\r\n indicatorText: PropTypes.string,\r\n actionBar: PropTypes.exact(ActionBar.propTypes)\r\n};\r\n\r\nexport default MainHeading;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst MissingProfile = ({ title, htmlLead }) => {\r\n return (\r\n {title}
}\r\n {indicatorText && (\r\n{indicatorText}
\r\n )}\r\n {actionBar && (\r\n\r\n
\r\n )}\r\n \r\n {title &&
\r\n );\r\n};\r\n\r\nMissingProfile.propTypes = {\r\n title: PropTypes.string,\r\n htmlLead: PropTypes.string\r\n};\r\n\r\nMissingProfile.defaultProps = {\r\n selections: []\r\n};\r\n\r\nexport default MissingProfile;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport BasicLayout from '../layouts/basic-layout';\r\nimport MissingProfile from '../missing-profile';\r\n\r\nconst MissingProfilePage = ({ layout, missingProfile }) => {\r\n return (\r\n {title}
}\r\n {htmlLead && (\r\n\r\n {title &&
\r\n );\r\n};\r\n\r\nMissingRole.propTypes = {\r\n title: PropTypes.string,\r\n htmlLead: PropTypes.string,\r\n leadBoxTitle: PropTypes.string,\r\n htmlLeadBox: PropTypes.string\r\n};\r\n\r\nMissingRole.defaultProps = {\r\n selections: []\r\n};\r\n\r\nexport default MissingRole;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport BasicLayout from '../layouts/basic-layout';\r\nimport MissingRole from '../missing-role';\r\n\r\nconst MissingRolePage = ({ layout, missingRole }) => {\r\n return (\r\n {title}
}\r\n {htmlLead && (\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {leadBoxTitle}
\r\n {htmlLeadBox && (\r\n\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nAddBrukerrolleModal.propTypes = {\r\n isDisabled: PropTypes.bool, //exclude from backend\r\n onClose: PropTypes.func, //exclude from backend\r\n onConfirm: PropTypes.func, //exclude from backend\r\n isOpen: PropTypes.bool, //exclude from backend\r\n showTextInput: PropTypes.bool, //exclude from backend\r\n errorMessage: PropTypes.string, //exclude from backend\r\n\r\n closeModalHiddenText: PropTypes.string,\r\n confirmButtonText: PropTypes.string,\r\n cancelButtonText: PropTypes.string,\r\n title: PropTypes.string,\r\n lead: PropTypes.string,\r\n nrOfSelectedBrukerePostfixText: PropTypes.string,\r\n search: PropTypes.exact(SearchWithDropdown.propTypes)\r\n};\r\n\r\nAddBrukerrolleModal.defaultProps = {\r\n onConfirm: () => {},\r\n onClose: () => {}\r\n};\r\n\r\nexport default AddBrukerrolleModal;\r\n","import Clicker from 'components/clicker/clicker';\r\nimport Modal from 'components/modal/modal';\r\nimport React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Accordion from 'components/accordion/accordion';\r\nimport CheckboxItem from 'components/checkbox-input/checkbox-input';\r\n\r\nconst GranulatedRequestModal = ({\r\n onClose,\r\n isOpen,\r\n closeModalHiddenText,\r\n title,\r\n subTitle,\r\n cancelButtonText,\r\n exportImportButtonText,\r\n handleProceed,\r\n blockItemList,\r\n exportImportEndpoint\r\n}) => {\r\n const [listOfSystemText, setListOfSystemText] = useState(blockItemList);\r\n\r\n const handleChange = (checked, id) => {\r\n let text = listOfSystemText;\r\n\r\n text.map(blockItem => {\r\n blockItem.textItemList.map(textItem => {\r\n if (textItem.textName === id) {\r\n textItem.isSelected = checked;\r\n }\r\n });\r\n });\r\n setListOfSystemText([...text]);\r\n };\r\n\r\n const handleBlockChange = (checked, id) => {\r\n let text = listOfSystemText;\r\n\r\n text.map(blockItem => {\r\n if (blockItem.blockName === id) {\r\n blockItem.textItemList.map(textItem => {\r\n textItem.isSelected = checked;\r\n });\r\n }\r\n });\r\n setListOfSystemText([...text]);\r\n };\r\n\r\n const handleChangeAll = checked => {\r\n let text = listOfSystemText;\r\n\r\n text.map(blockItem => {\r\n blockItem.textItemList.map(textItem => {\r\n textItem.isSelected = checked;\r\n });\r\n });\r\n\r\n setListOfSystemText([...text]);\r\n };\r\n\r\n const handleImportExport = () => {\r\n handleProceed(listOfSystemText, exportImportEndpoint);\r\n };\r\n\r\n const recursiveChecklistMaker = baseList => {\r\n let list = baseList;\r\n\r\n return list.map((blockItem, index) => {\r\n const isBlockSelected = blockItem.textItemList.every(\r\n item => item.isSelected\r\n );\r\n return (\r\n \r\n {title &&
\r\n {title}
}\r\n {lead &&{lead}
}\r\n\r\n = 2\r\n })}\r\n >\r\n handleOnPersonRemove(user.id)}\r\n />\r\n ))}\r\n
\r\n \r\n {users.length + ' ' + nrOfSelectedBrukerePostfixText}\r\n
\r\n {users.map(user => (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n - \r\n
- \r\n \r\n\r\n \r\n );\r\n }\r\n )}\r\n \r\n
{title}
\r\n{subTitle}
\r\n\r\n \r\n bI.textItemList?.every(tI => tI.isSelected)\r\n )}\r\n onChange={handleChangeAll}\r\n />\r\n
\r\n \r\n
\r\n\r\n - {recursiveChecklistMaker(listOfSystemText)}
\r\n \r\n bI.textItemList.every(tI => !tI.isSelected)\r\n )}\r\n onClick={handleImportExport}\r\n text={exportImportButtonText || 'Gå videre'}\r\n theme={Clicker.themes.primary}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nGranulatedRequestModal.propTypes = {\r\n closeModalHiddenText: PropTypes.string,\r\n title: PropTypes.string.isRequired, // not a model, returned from API request with proceedButton\r\n subTitle: PropTypes.string, // not a model, returned from API request with proceedButton\r\n cancelButtonText: PropTypes.string.isRequired, // not a model, returned from API request with proceedButton\r\n exportImportButtonText: PropTypes.string.isRequired, // not a model, returned from API request with proceedButton\r\n onClose: PropTypes.func.isRequired, // ignore backend\r\n isOpen: PropTypes.bool.isRequired, // ignore backend\r\n handleProceed: PropTypes.func.isRequired, // ignore backend,\r\n exportImportEndpoint: PropTypes.string,\r\n blockItemList: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n blockName: PropTypes.string,\r\n blockDisplayName: PropTypes.string,\r\n blockDescription: PropTypes.string,\r\n textItemList: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n isSelected: PropTypes.bool,\r\n textName: PropTypes.string,\r\n textDisplayName: PropTypes.string,\r\n textDescription: PropTypes.string,\r\n languageTextValueItemList: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n LanguageCode: PropTypes.string,\r\n textValue: PropTypes.string\r\n })\r\n )\r\n })\r\n )\r\n })\r\n )\r\n};\r\n\r\nexport default GranulatedRequestModal;\r\n","// kvm specific topic colors, matches vars.scss.\r\n\r\nexport default {\r\n black: '#303030', // $color--layout-black\r\n red: '#ddaa95', // $color--topic-red\r\n green: '#7dbf9d', // $color--topic-green\r\n blue: '#6d889d', // $color--topic-blue\r\n purple: '#999cbf', // $color--topic-purple\r\n brown: '#bfa687', // $color--topic-brown,\r\n gray: '#545353'\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport Icon from 'components/icon';\r\nimport topicColors from '../../js/topic-colors';\r\n\r\nconst colors = {\r\n ...topicColors,\r\n white: 'white', // in addition to the topic colors, we accept white and black as valid colors for some implementations of the menu\r\n black: 'black'\r\n};\r\n\r\nconst NavLink = ({ href, isActive, text, color, hasCheckmark }) => {\r\n const isSamtaleguide = React.useMemo(() => color === colors.white);\r\n const boxShadow = React.useMemo(() => {\r\n return isSamtaleguide\r\n ? hasCheckmark\r\n ? isActive\r\n ? `0 0 0 3px ${topicColors['green']}`\r\n : `0 0 0 1px ${topicColors['green']}`\r\n : isActive\r\n ? `0 0 0 2px black`\r\n : `0 0 0 1px black`\r\n : isActive && `0 0 0 3px ${topicColors[color]}`;\r\n }, [hasCheckmark, isActive, color]);\r\n return (\r\n \r\n setIsOpen(!isOpen)}\r\n className=\"nav-menu-mobile__toggle\"\r\n aria-controls={ariaId}\r\n aria-expanded={isOpen}\r\n >\r\n {activeLink?.text}\r\n \r\n
\r\n );\r\n};\r\n\r\nNavMenuMobile.propTypes = {\r\n links: PropTypes.arrayOf(PropTypes.exact(NavLink.propTypes))\r\n};\r\n\r\nNavMenuMobile.defaultProps = {\r\n links: []\r\n};\r\n\r\nexport default NavMenuMobile;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Clicker from '../clicker';\r\nimport NavMenuMobile from './nav-menu-mobile';\r\nimport NavLink from './nav-link';\r\n\r\nconst NavMenu = ({ backLink, navLinks }) => {\r\n return (\r\n <>\r\n \r\n \r\n );\r\n};\r\n\r\nNavMenu.propTypes = {\r\n navLinks: PropTypes.arrayOf(PropTypes.exact(NavLink.propTypes)),\r\n backLink: PropTypes.shape({\r\n text: PropTypes.string,\r\n href: PropTypes.string\r\n })\r\n};\r\n\r\nNavMenu.defaultProps = {\r\n navLinks: []\r\n};\r\n\r\nexport default NavMenu;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport AnonymousLayout from '../layouts/anonymous-layout';\r\n\r\nconst NedetidPage = ({ layout, title, htmlLead }) => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {title}
\r\n\r\n {htmlLead && (\r\n\r\n {heading}\r\n \r\n {subHeading}\r\n |\r\n \r\n {typeHeading}\r\n \r\n \r\n
\r\n )}\r\n {infoTitle &&{infoTitle}
}\r\n \r\n )}\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nPdfFrontPage.propTypes = {\r\n isFullPage: PropTypes.bool,\r\n heading: PropTypes.string,\r\n subHeading: PropTypes.string,\r\n typeHeading: PropTypes.string,\r\n infoTitle: PropTypes.string,\r\n infoList: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n infoTitle: PropTypes.string,\r\n info: PropTypes.string\r\n })\r\n ),\r\n subInfoList: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n infoTitle: PropTypes.string,\r\n info: PropTypes.string\r\n })\r\n ),\r\n color: PropTypes.oneOf(Object.keys(colors))\r\n};\r\n\r\nexport default PdfFrontPage;\r\n","\r\nimport React from 'react';\r\nimport cn from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport useLocaleDate from '../../hooks/use-locale-date';\r\nimport HistoryEntry from '../../components/history-entry';\r\n\r\nconst PdfKartleggingHistroyPage = ({ heading, subheading, kartleggingEntries }) => {\r\n return (\r\n - \r\n {infoList?.map(({ infoTitle, info }, i) => (\r\n
- {infoTitle + ' '} \r\n
- {info} \r\n
\r\n
\r\n ))}\r\n - \r\n {subInfoList?.map(({ infoTitle, info }, i) => (\r\n
- \r\n {infoTitle + ' '}\r\n \r\n
- {info} \r\n
\r\n
\r\n ))}\r\n \r\n \r\n {formattedDate}\r\n {name}\r\n \r\n );\r\n })}\r\n
\r\n );\r\n};\r\n\r\nPdfKartleggingHistroyPage.propTypes = {\r\n heading: PropTypes.string,\r\n subheading: PropTypes.string,\r\n kartleggingEntries: PropTypes.arrayOf(PropTypes.exact(HistoryEntry.propTypes))\r\n};\r\n\r\nexport default PdfKartleggingHistroyPage;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Clicker from 'components/clicker/clicker';\r\n\r\n/**\r\n * This page can work as a static text display page, if you remove formPostAction from backend.\r\n *\r\n * If that happens, the lead text and the submit button is hidden.\r\n * @param {} param0\r\n */\r\nconst Personvern = ({ title, lead, postAction, htmlBody, paragraphs }) => {\r\n return (\r\n \r\n \r\n
\r\n {kartleggingEntries?.map(({date, name, ferdighetsomradeList}, index) => {\r\n const { formattedDate } = useLocaleDate(date);\r\n return (\r\n {heading}
\r\n{subheading}
\r\n \r\n\r\n {!!ferdighetsomradeList?.length && (\r\n
\r\n - \r\n {ferdighetsomradeList.map(\r\n ({ name, color, mestringsnivaList }) => (\r\n
- \r\n
- \r\n {mestringsnivaList?.map(({ name, utsagnList }) => (\r\n
- \r\n {name}\r\n
- \r\n {utsagnList?.map(({ id, changeInfo }) => (\r\n
\r\n ))}\r\n
\r\n ))}\r\n - \r\n {name}\r\n
\r\n {title && \r\n
\r\n );\r\n};\r\n\r\nPersonvern.propTypes = {\r\n title: PropTypes.string.isRequired,\r\n lead: PropTypes.string.isRequired,\r\n postAction: PropTypes.exact({\r\n text: PropTypes.string.isRequired,\r\n href: PropTypes.string.isRequired\r\n }),\r\n paragraphs: PropTypes.arrayOf(PropTypes.string),\r\n htmlBody: PropTypes.string\r\n};\r\n\r\nexport default Personvern;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport AnonymousLayout from '../layouts/anonymous-layout';\r\nimport Personvern from 'components/personvern/personvern';\r\n\r\nconst PersonvernPage = ({ layout, personvern }) => {\r\n return (\r\n {title}
}\r\n {postAction && lead &&{lead}
}\r\n {htmlBody && (\r\n\r\n {p}\r\n
\r\n );\r\n })}\r\n {postAction && (\r\n\r\n \r\n {progresjonsvisningContent && !kartleggingPlaceholder && (\r\n \r\n
\r\n \r\n {tooltip &&
\r\n );\r\n}\r\n\r\nQuestionExplanationBox.propTypes = {\r\n title: PropTypes.string,\r\n lead: PropTypes.string,\r\n list: PropTypes.arrayOf(PropTypes.string),\r\n tooltip: PropTypes.exact({\r\n title: PropTypes.string.isRequired,\r\n lead: PropTypes.string.isRequired\r\n })\r\n};\r\n","import React, { useContext } from 'react';\r\n\r\nconst RedaktorGrensesnittContext = React.createContext();\r\nexport function useRedaktorGrensesnittContext() {\r\n return useContext(RedaktorGrensesnittContext);\r\n}\r\n\r\nRedaktorGrensesnittContext.propTypes = {};\r\n\r\nexport default RedaktorGrensesnittContext;\r\n","import Clicker from 'components/clicker/clicker';\r\nimport Modal from 'components/modal/modal';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst AlertModal = ({\r\n onClose,\r\n isOpen,\r\n title,\r\n lead,\r\n cancelText,\r\n okText,\r\n handleProceed\r\n}) => {\r\n return (\r\n {tooltip}
}\r\n{title}
\r\n{lead}
\r\n {list && (\r\n- \r\n {list.map(item => (\r\n
- \r\n {item}\r\n \r\n ))}\r\n
{title}
\r\n{lead}
\r\n\r\n
\r\n \r\n {alertModal && (\r\n \r\n checkModalOrProceed(deleteButton, 'delete', handleDelete)\r\n }\r\n theme={Clicker.themes.secondary}\r\n text={deleteButton.text}\r\n />\r\n )}\r\n {importButton?.show && (\r\n \r\n \r\n \r\n {importButton.text}\r\n \r\n \r\n
\r\n )}\r\n {exportButton?.show && (\r\n \r\n
\r\n );\r\n}\r\n\r\nGenerellDashboardDisplayData.propTypes = {\r\n type: PropTypes.string,\r\n redaktorActions: PropTypes.exact(RedaktorGrensesnittToolbar.propTypes),\r\n title: PropTypes.string,\r\n subtitle: PropTypes.string,\r\n infoBoxes: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n label: PropTypes.string,\r\n date: PropTypes.string\r\n })\r\n )\r\n};\r\n","import { PortableText } from '@portabletext/react';\r\nimport Clicker from 'components/clicker/clicker';\r\nimport NumberInput from 'components/number-input';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useEffect, useState } from 'react';\r\nimport usePhrases from '../../../hooks/use-phrases';\r\nimport sanityClient from '../../../sanityClient';\r\nimport Modal from '../modal';\r\nimport { serializers, urlFor } from './serializers';\r\nimport cn from 'classnames';\r\n\r\nconst SanityImagePickerModal = ({\r\n isOpen,\r\n onClose,\r\n isDisabled,\r\n title,\r\n selectImageCallback,\r\n groqQuery = `\r\n *[_type == \"informasjonstekst\" && general.title == \"Informasjon om lesing\"]\r\n `\r\n}) => {\r\n const { add, close } = usePhrases();\r\n const [sanityData, setSanityData] = useState(null);\r\n const [imageSize, setImageSize] = useState({ width: 320, height: 250 });\r\n const [currentImage, setCurrentImage] = useState('');\r\n\r\n useEffect(() => {\r\n sanityClient\r\n .fetch(groqQuery)\r\n .then(data => {\r\n setSanityData(data);\r\n })\r\n .catch(() => {\r\n setSanityData({ errorMessage: 'Noe gikk galt med Sanity fetch' });\r\n });\r\n }, []);\r\n\r\n const handleProceed = () => {\r\n selectImageCallback(\r\n urlFor(currentImage).width(imageSize.width).height(imageSize.height),\r\n imageSize,\r\n currentImage?.caption\r\n );\r\n onClose();\r\n };\r\n\r\n const renderImage = image => {\r\n return (\r\n \r\n {infoBoxes.map(({ label, date }) => (\r\n
\r\n \r\n
\r\n ))}\r\n {label}
\r\n {date}\r\n\r\n {image?.caption}\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\nSanityImagePickerModal.propTypes = {\r\n isDisabled: PropTypes.bool, //exclude from backend\r\n selectImageCallback: PropTypes.func, //exclude from backend\r\n onClose: PropTypes.func, //exclude from backend\r\n isOpen: PropTypes.bool, //exclude from backend\r\n title: PropTypes.string.isRequired,\r\n groqQuery: PropTypes.string\r\n};\r\n\r\nSanityImagePickerModal.defaultProps = {\r\n onConfirm: () => {},\r\n onClose: () => {},\r\n entries: []\r\n};\r\n\r\nexport default SanityImagePickerModal;\r\n","export default {\r\n // Generic\r\n 'generic.add': 'Legg til',\r\n 'generic.cancel': 'Avbryt',\r\n\r\n // BlockType\r\n 'components.controls.blocktype.h1': 'H1',\r\n 'components.controls.blocktype.h2': 'H2',\r\n 'components.controls.blocktype.h3': 'H3',\r\n 'components.controls.blocktype.h4': 'H4',\r\n 'components.controls.blocktype.h5': 'H5',\r\n 'components.controls.blocktype.h6': 'H6',\r\n 'components.controls.blocktype.blockquote': 'Sitat',\r\n 'components.controls.blocktype.code': 'Kode',\r\n 'components.controls.blocktype.blocktype': 'Blokktype',\r\n 'components.controls.blocktype.normal': 'Normal',\r\n\r\n // Color Picker\r\n 'components.controls.colorpicker.colorpicker': 'Fargevelger',\r\n 'components.controls.colorpicker.text': 'Tekst',\r\n 'components.controls.colorpicker.background': 'Uthev',\r\n\r\n // Embedded\r\n 'components.controls.embedded.embedded': 'Embedded',\r\n 'components.controls.embedded.embeddedlink': 'Embedded-link',\r\n 'components.controls.embedded.enterlink': 'Enter-link',\r\n\r\n // Emoji\r\n 'components.controls.emoji.emoji': 'Emoji',\r\n\r\n // FontFamily\r\n 'components.controls.fontfamily.fontfamily': 'Font',\r\n\r\n // FontSize\r\n 'components.controls.fontsize.fontsize': 'Skriftstørrelse',\r\n\r\n // History\r\n 'components.controls.history.history': 'History',\r\n 'components.controls.history.undo': 'Angre',\r\n 'components.controls.history.redo': 'Redo',\r\n\r\n // Image\r\n 'components.controls.image.image': 'Bilde',\r\n 'components.controls.image.fileUpload': 'Filopplastning',\r\n 'components.controls.image.byURL': 'URL',\r\n 'components.controls.image.dropFileText': 'Last opp',\r\n\r\n // Inline\r\n 'components.controls.inline.bold': 'Fet',\r\n 'components.controls.inline.italic': 'Kursiv',\r\n 'components.controls.inline.underline': 'Understrek',\r\n 'components.controls.inline.strikethrough': 'Strikethrough',\r\n 'components.controls.inline.monospace': 'Monospace',\r\n 'components.controls.inline.superscript': 'Superscript',\r\n 'components.controls.inline.subscript': 'Subscript',\r\n\r\n // Link\r\n 'components.controls.link.linkTitle': 'Tekst',\r\n 'components.controls.link.linkTarget': 'URL',\r\n 'components.controls.link.linkTargetOption': 'Åpne lenken i nytt vindu',\r\n 'components.controls.link.link': 'Lenke',\r\n 'components.controls.link.unlink': 'Fjern lenke',\r\n\r\n // List\r\n 'components.controls.list.list': 'Liste',\r\n 'components.controls.list.unordered': 'Uordnet',\r\n 'components.controls.list.ordered': 'Ordnet',\r\n 'components.controls.list.indent': 'Innrykk',\r\n 'components.controls.list.outdent': 'Utrykk',\r\n\r\n // Remove\r\n 'components.controls.remove.remove': 'Remove',\r\n\r\n // TextAlign\r\n 'components.controls.textalign.textalign': 'Tekstjustering',\r\n 'components.controls.textalign.left': 'Venstre',\r\n 'components.controls.textalign.center': 'Midtstilt',\r\n 'components.controls.textalign.right': 'Høyre',\r\n 'components.controls.textalign.justify': 'Justér'\r\n};\r\n","import React, { useMemo } from 'react';\r\nimport cn from 'classnames';\r\nimport { v4 as uuid } from 'uuid';\r\nimport noNb from './no-nb';\r\n\r\nconst ToolbarInline = ({ config, onChange, currentState }) => {\r\n const id = useMemo(() => uuid(), [config]);\r\n const availableStyles = config?.options;\r\n return (\r\n \r\n {title && (\r\n
\r\n {title}
\r\n )}\r\n {sanityData?.errorMessage &&{sanityData.errorMessage}
}\r\n {selectImageCallback && (\r\n\r\n {\r\n setImageSize(s => ({ ...s, width: value }));\r\n }}\r\n />\r\n setImageSize(s => ({ ...s, height: value }))}\r\n />\r\n
\r\n )}\r\n {currentImage && (\r\n \r\n {renderImage(currentImage)}\r\n
\r\n )}\r\n {!currentImage && (\r\n \r\n {sanityData?.map(({ image }, i) => {\r\n return
\r\n )}\r\n {renderImage(image)}
;\r\n })}\r\n \r\n {currentImage && (\r\n
\r\n \r\n setCurrentImage(null)}\r\n text={'Tilbake'}\r\n />\r\n
\r\n )}\r\n\r\n \r\n {availableStyles?.map((style, i) => (\r\n onChange(style, !currentState[style])}\r\n >\r\n 
\r\n \r\n ))}\r\n
\r\n );\r\n};\r\n\r\nexport default ToolbarInline;\r\n","import React, { useMemo } from 'react';\r\nimport cn from 'classnames';\r\nimport { v4 as uuid } from 'uuid';\r\nimport noNb from './no-nb';\r\n\r\nconst ToolbarList = ({ config, onChange, currentState }) => {\r\n const id = useMemo(() => uuid(), [config]);\r\n const availableStyles = config?.options;\r\n return (\r\n \r\n {availableStyles?.map((style, i) => (\r\n onChange(style)}\r\n >\r\n \r\n \r\n ))}\r\n
\r\n );\r\n};\r\n\r\nexport default ToolbarList;\r\n","import isRunningOnClient from '@creuna/utils/is-running-on-client';\r\nimport cn from 'classnames';\r\nimport SanityImagePickerModal from 'components/modal/sanity-content-modal/sanity-image-picker-modal';\r\nimport {\r\n AtomicBlockUtils,\r\n ContentState,\r\n convertToRaw,\r\n EditorState\r\n} from 'draft-js';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport PhrasesContext from '../../contexts/phrases-context';\r\nimport Clicker from '../clicker/clicker';\r\nimport './ie-polyfills';\r\nimport noNb from './no-nb';\r\nimport ToolbarInline from './ToolbarInline';\r\nimport ToolbarList from './ToolbarList';\r\n\r\nconst draftToHtml = isRunningOnClient ? require('draftjs-to-html') : undefined;\r\nconst htmlToDraft = isRunningOnClient\r\n ? require('html-to-draftjs').default\r\n : undefined;\r\n\r\nconst ReactEditor = isRunningOnClient\r\n ? require('react-draft-wysiwyg').Editor\r\n : undefined;\r\n\r\n/**\r\n * This function contains a lot of logic to handle the image upload from Sanity.\r\n * State localImageReplacementMap is used to keep track of all images with their Sanity URL, and their locally created url.\r\n * We create a local url while the user is editing the code so that it won't reload from the sanity server on every newline. This is a fault with draft-js.\r\n * When we invoke onChange, we retrieve a value from the current editorState and replace all local URLs with the Sanity url.\r\n * Because this is a costly operation, onChange is only invoked onBlur.\r\n *\r\n * There's also a useEffect which updates the editorState on value change. This is so that we can reset the text from a parent component.\r\n *\r\n * - Jørgen Lybeck Hansen (not proudly)\r\n */\r\nconst Editor = ({\r\n id,\r\n value,\r\n isDisabled,\r\n placeholder,\r\n hasCustomToolbar,\r\n hasActionButtons,\r\n readOnly,\r\n onChange,\r\n onSave,\r\n onCancel,\r\n isLarge,\r\n sanityImageQuery\r\n}) => {\r\n const { save, cancel } = useContext(PhrasesContext);\r\n\r\n const [localImageReplacementMap, setLocalImageReplacementMap] = useState([]);\r\n const [imageBankModal, setImageBankModal] = useState(false);\r\n const toggleImageBankModal = () => {\r\n setImageBankModal(!imageBankModal);\r\n };\r\n\r\n /**\r\n * Retrieves all \r\n {imageBankModal && (\r\n setImageBankModal(false)}\r\n />\r\n )}\r\n {isRunningOnClient && (\r\n e}\r\n wrapperId={id}\r\n readOnly={readOnly}\r\n placeholder={placeholder}\r\n editorClassName=\"editor__editor\"\r\n wrapperClassName=\"editor__wrapper\"\r\n stripPastedStyles={false}\r\n toolbarHidden={!hasCustomToolbar || readOnly}\r\n editorState={editorState}\r\n localization={{\r\n locale: 'en',\r\n translations: noNb\r\n }}\r\n onBlur={handleBlur}\r\n onEditorStateChange={setEditorState}\r\n toolbarClassName=\"editor__default-toolbar\"\r\n toolbar={{\r\n options: ['inline', 'list', 'link'],\r\n inline: {\r\n component: ToolbarInline,\r\n options: ['bold', 'italic', 'underline'],\r\n bold: {\r\n className: 'editor__action editor__action--bold',\r\n icon:\r\n 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDMwIDQwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzMwMzAzMDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmVkaXQtYm9sZDwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTkuODgsMjIuOEgxMi4zNXY2LjA5SDguNDlWMTFoMTN2My42NUgxMi4zNXY0LjQ3aDcuNTNaIi8+PC9zdmc+'\r\n },\r\n italic: {\r\n className: 'editor__action editor__action--italic',\r\n icon:\r\n 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDMwIDQwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzMwMzAzMDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmVkaXQtaXRhbGljPC90aXRsZT48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMi45MywyMC41OWwtMi42NiwyLjM1LTEsNS45NUg2Ljg3TDEwLDExaDIuMzVsLTEuNTUsOC43MUwyMC4xMSwxMWgzbC04LjQ2LDgsNS42Niw5Ljg4SDE3LjcyWiIvPjwvc3ZnPg=='\r\n },\r\n underline: {\r\n className: 'editor__action editor__action--underline',\r\n icon:\r\n 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDMwIDQwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzMwMzAzMDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmVkaXQtdW5kZXJzY29yZTwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSI4LjgyIiB5PSIyNi45NiIgd2lkdGg9IjEyLjM2IiBoZWlnaHQ9IjIiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yMS4xOCwxMXY4LjMxYTUuMjgsNS4yOCwwLDAsMS0xLjUyLDMuODgsNi4xOSw2LjE5LDAsMCwxLTQuMDksMS43bC0uNTksMGE2LjQ3LDYuNDcsMCwwLDEtNC40Ny0xLjQ5LDUuMjQsNS4yNCwwLDAsMS0xLjY5LTQuMDlWMTFoMi4yM3Y4LjI3YTMuNzgsMy43OCwwLDAsMCwxLDIuODIsMy45MywzLjkzLDAsMCwwLDIuOTEsMSw0LDQsMCwwLDAsMi45Mi0xLDMuNzgsMy43OCwwLDAsMCwxLTIuODJWMTFaIi8+PC9zdmc+'\r\n }\r\n },\r\n list: {\r\n component: ToolbarList,\r\n options: ['unordered', 'ordered'],\r\n unordered: {\r\n className: 'editor__action editor__action--unordered-list',\r\n icon:\r\n 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MiIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQyIDQwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzMwMzAzMDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmVkaXQtbGlzdDwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIxNC41IiB5PSIxMS4wNCIgd2lkdGg9IjE5IiBoZWlnaHQ9IjIiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHg9IjE0LjUiIHk9IjE5LjAxIiB3aWR0aD0iMTkiIGhlaWdodD0iMiIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMTQuNSIgeT0iMjYuOTgiIHdpZHRoPSIxOSIgaGVpZ2h0PSIyIi8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSI4LjUiIHk9IjExLjAyIiB3aWR0aD0iMyIgaGVpZ2h0PSIyIi8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSI4LjUiIHk9IjE5LjAxIiB3aWR0aD0iMyIgaGVpZ2h0PSIyIi8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSI4LjUiIHk9IjI2Ljk2IiB3aWR0aD0iMyIgaGVpZ2h0PSIyIi8+PC9zdmc+'\r\n },\r\n ordered: {\r\n className: 'editor__action editor__action--ordered-list',\r\n icon:\r\n 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MiIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQyIDQwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzMwMzAzMDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmVkaXQtbnVtYmVybGlzdDwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIxNC41IiB5PSIxMS4wNCIgd2lkdGg9IjE5IiBoZWlnaHQ9IjIiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHg9IjE0LjUiIHk9IjE5LjAxIiB3aWR0aD0iMTkiIGhlaWdodD0iMiIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMTQuNSIgeT0iMjYuOTgiIHdpZHRoPSIxOSIgaGVpZ2h0PSIyIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTEsMTQuMTZIMTBWMTFsLTEsLjI5di0uNzVsMS44Ny0uNjVIMTFaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTEuNTQsMjIuMTZoLTN2LS42NGwxLjM3LTEuNDRhMS42NCwxLjY0LDAsMCwwLC41MS0uOTIuNjYuNjYsMCwwLDAtLjEyLS40MkEuNDUuNDUsMCwwLDAsMTAsMTguNmEuNDQuNDQsMCwwLDAtLjM3LjE5LjgzLjgzLDAsMCwwLS4xNC40OGgtMWExLjQ2LDEuNDYsMCwwLDEsLjItLjczQTEuNDIsMS40MiwwLDAsMSw5LjIxLDE4YTEuNzIsMS43MiwwLDAsMSwuNzgtLjE4LDEuNTcsMS41NywwLDAsMSwxLjA3LjMyLDEuMTEsMS4xMSwwLDAsMSwuMzcuOTEsMS4zNywxLjM3LDAsMCwxLS4wOS40OSwyLjM4LDIuMzgsMCwwLDEtLjI5LjVjLS4xNC4xOC0uMzUuNDEtLjY0LjcxbC0uNTUuNjNoMS42OFoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik05LjQ4LDI3LjU3SDEwQS40OS40OSwwLDAsMCwxMC41LDI3YS40NS40NSwwLDAsMC0uMTMtLjM0LjQ5LjQ5LDAsMCwwLS4zNy0uMTMuNTIuNTIsMCwwLDAtLjM1LjExLjM3LjM3LDAsMCwwLS4xNC4yOGgtMWExLDEsMCwwLDEsLjE5LS42LDEuMjcsMS4yNywwLDAsMSwuNTItLjQxLDEuNzMsMS43MywwLDAsMSwuNzMtLjE1LDEuNzQsMS43NCwwLDAsMSwxLjEyLjMzLDEuMDgsMS4wOCwwLDAsMSwuNDEuODkuOS45LDAsMCwxLS4xNy41MiwxLjE2LDEuMTYsMCwwLDEtLjQ5LjQsMS4yMSwxLjIxLDAsMCwxLC41My4zNywxLDEsMCwwLDEsLjE5LjYyLDEuMSwxLjEsMCwwLDEtLjQ0LjkyLDEuNzksMS43OSwwLDAsMS0xLjE1LjM0QTEuODUsMS44NSwwLDAsMSw5LjE4LDMwYTEuMTYsMS4xNiwwLDAsMS0uNzMtMS4wOWgxYS40MS40MSwwLDAsMCwuMTYuMzQuNTMuNTMsMCwwLDAsLjM5LjE1LjU2LjU2LDAsMCwwLC40MS0uMTUuNDkuNDksMCwwLDAsLjE2LS4zNy41OC41OCwwLDAsMC0uMTYtLjQ1QS42OS42OSwwLDAsMCwxMCwyOC4zSDkuNDhaIi8+PC9zdmc+'\r\n }\r\n },\r\n link: {\r\n options: ['link', 'unlink'],\r\n showOpenOptionOnHover: false,\r\n link: {\r\n className: 'editor__action editor__action--link',\r\n icon:\r\n 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MiIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQyIDQwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzMwMzAzMDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmVkaXQtbGluazwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjUuMzksMTlhNC41Myw0LjUzLDAsMCwxLTQuMjYsM0gxMi4wNWE0LjUsNC41LDAsMSwxLDAtOWg5LjA4YTQuNTYsNC41NiwwLDAsMSwzLjc4LDJoMi4yOGE2LjU3LDYuNTcsMCwwLDAtNi4wNi00SDEyLjA1YTYuNSw2LjUsMCwxLDAsMCwxM2g5LjA4YTYuNTUsNi41NSwwLDAsMCw2LjM3LTVaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjkuOTQsMTZIMjAuODZhNi41NSw2LjU1LDAsMCwwLTYuMzYsNC45MmgyLjEyQTQuNTMsNC41MywwLDAsMSwyMC44NiwxOGg5LjA4YTQuNSw0LjUsMCwxLDEsMCw5SDIwLjg2QTQuNTUsNC41NSwwLDAsMSwxNywyNC45M0gxNC43N0E2LjU3LDYuNTcsMCwwLDAsMjAuODYsMjloOS4wOGE2LjUsNi41LDAsMSwwLDAtMTNaIi8+PC9zdmc+'\r\n },\r\n unlink: {\r\n className: 'editor__action editor__action--unlink',\r\n icon:\r\n 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MiIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQyIDQwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzMwMzAzMDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmVkaXQtbGluazwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjUuMzksMTlhNC41Myw0LjUzLDAsMCwxLTQuMjYsM0gxMi4wNWE0LjUsNC41LDAsMSwxLDAtOWg5LjA4YTQuNTYsNC41NiwwLDAsMSwzLjc4LDJoMi4yOGE2LjU3LDYuNTcsMCwwLDAtNi4wNi00SDEyLjA1YTYuNSw2LjUsMCwxLDAsMCwxM2g5LjA4YTYuNTUsNi41NSwwLDAsMCw2LjM3LTVaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjkuOTQsMTZIMjAuODZhNi41NSw2LjU1LDAsMCwwLTYuMzYsNC45MmgyLjEyQTQuNTMsNC41MywwLDAsMSwyMC44NiwxOGg5LjA4YTQuNSw0LjUsMCwxLDEsMCw5SDIwLjg2QTQuNTUsNC41NSwwLDAsMSwxNywyNC45M0gxNC43N0E2LjU3LDYuNTcsMCwwLDAsMjAuODYsMjloOS4wOGE2LjUsNi41LDAsMSwwLDAtMTNaIi8+PC9zdmc+'\r\n }\r\n }\r\n }}\r\n />\r\n )}\r\n {!readOnly && (\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nEditor.propTypesMeta = 'exclude';\r\n\r\nEditor.propTypes = {\r\n id: PropTypes.string,\r\n sanityImageQuery: PropTypes.string,\r\n value: PropTypes.string,\r\n isDisabled: PropTypes.bool,\r\n isLarge: PropTypes.bool,\r\n hasCustomToolbar: PropTypes.bool,\r\n hasActionButtons: PropTypes.bool,\r\n readOnly: PropTypes.bool,\r\n placeholder: PropTypes.string,\r\n onChange: PropTypes.func,\r\n onCancel: PropTypes.func,\r\n onSave: PropTypes.func\r\n};\r\n\r\nEditor.defaultProps = {\r\n value: '',\r\n placeholder: ''\r\n\r\n // imageGroqQuery:\r\n // '*[_type == \"informasjonstekst\" && general.title == \"Informasjon om lesing\"]'\r\n};\r\n\r\nexport default Editor;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Editor from './editor';\r\n\r\nconst RichTextEditor = ({\r\n id,\r\n value,\r\n placeholder,\r\n readOnly,\r\n onChange,\r\n onSave,\r\n onCancel,\r\n isDisabled,\r\n hasActionButtons,\r\n label,\r\n isLarge,\r\n hasCustomToolbar\r\n}) => {\r\n return (\r\n \r\n \r\n {hasActionButtons && (\r\n
\r\n - \r\n {sanityImageQuery && (\r\n
- \r\n
- \r\n
- \r\n
\r\n {label && }\r\n
\r\n );\r\n};\r\n\r\nRichTextEditor.propTypes = {\r\n id: PropTypes.string,\r\n value: PropTypes.string,\r\n label: PropTypes.string,\r\n isLarge: PropTypes.bool,\r\n placeholder: PropTypes.string,\r\n isDisabled: PropTypes.bool,\r\n onChange: PropTypes.func,\r\n onSave: PropTypes.func,\r\n onCancel: PropTypes.func,\r\n hasCustomToolbar: PropTypes.bool,\r\n hasActionButtons: PropTypes.bool,\r\n readOnly: PropTypes.bool\r\n};\r\n\r\nRichTextEditor.propTypesMeta = {\r\n shouldFocusOnMount: 'exclude',\r\n isDisabled: 'exclude',\r\n isLarge: 'exclude',\r\n hasActionButtons: 'exclude',\r\n hasCustomToolbar: 'exclude'\r\n};\r\n\r\nRichTextEditor.defaultProps = {\r\n hasCustomToolbar: true,\r\n hasActionButtons: true\r\n};\r\n\r\nexport default RichTextEditor;\r\n","import InputErrorMessage from 'components/input-error-message';\r\nimport UdirRichTextEditor from 'components/rich-text-editor/rich-text-editor';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useEffect, useRef, useMemo } from 'react';\r\nimport Clicker from 'components/clicker/clicker';\r\nimport TextInput from 'components/text-input';\r\n\r\nexport default function GenerellSystemtekstItem({\r\n handleChange,\r\n handleUndo,\r\n errorMessage,\r\n isRichText,\r\n systemtekstItem,\r\n maxLength,\r\n buttonText,\r\n sanityImageQuery\r\n}) {\r\n const requiredInputRef = useRef(null);\r\n\r\n const handleRichTextChange = (_id, _value) => {\r\n handleChange(_id, _value, systemtekstItem.label);\r\n };\r\n const initialSystemtekstValue = useRef(systemtekstItem?.value);\r\n\r\n const undoDisabled = useMemo(() => {\r\n return initialSystemtekstValue.current === systemtekstItem?.value;\r\n }, [initialSystemtekstValue, systemtekstItem?.value]);\r\n useEffect(() => {\r\n if (requiredInputRef?.current && errorMessage) {\r\n requiredInputRef.current.scrollIntoView({ behavior: 'smooth' });\r\n }\r\n }, [requiredInputRef, errorMessage]);\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nGenerellSystemtekstItem.objectProps = PropTypes.exact({\r\n label: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired,\r\n id: PropTypes.string.isRequired,\r\n sprakKode: PropTypes.string.isRequired\r\n});\r\n\r\nGenerellSystemtekstItem.propTypes = {\r\n buttonText: PropTypes.exact({\r\n cancel: PropTypes.string.isRequired\r\n }).isRequired,\r\n handleChange: PropTypes.func.isRequired, //Ignore backend\r\n handleUndo: PropTypes.func.isRequired, //Ignore backend\r\n errorMessage: PropTypes.string, // ignore backend\r\n isRichText: PropTypes.bool, // ignore backend\r\n maxLength: PropTypes.number, // ignore backend\r\n systemtekstItem: GenerellSystemtekstItem.objectProps,\r\n sanityImageQuery: PropTypes.string\r\n};\r\n","import InputErrorMessage from 'components/input-error-message';\r\nimport PropTypes from 'prop-types';\r\nimport Clicker from 'components/clicker/clicker';\r\nimport GenerellSystemtekstItem from './generell-systemtekst-item';\r\nimport React, { useContext, useEffect } from 'react';\r\nimport RedaktorGrensesnittContext from '../../../../contexts/redaktor-grensesnitt-context';\r\nimport Tooltip from '../../../tooltip';\r\nimport Icon from 'components/icon';\r\n\r\nexport default function GenerellSystemtekstDisplayData({\r\n systemtekster,\r\n isRichText,\r\n apiData,\r\n saveEndpoint,\r\n uniqueNodeId,\r\n type,\r\n textDisplayName,\r\n tooltip,\r\n maxLength,\r\n buttonText,\r\n infoBanner,\r\n sanityImageQuery\r\n}) {\r\n const {\r\n state: {\r\n currentDataType,\r\n apiErrMessage,\r\n redaktorDataList: systemteksterList,\r\n isLoading,\r\n isDirty\r\n },\r\n functions: {\r\n setCurrentData,\r\n saveSystemtekstChanges,\r\n handleSystemtekstChange,\r\n undoAll,\r\n handleSystemtekstUndo\r\n }\r\n } = useContext(RedaktorGrensesnittContext);\r\n useEffect(() => {\r\n setCurrentData({\r\n apiData: {\r\n blockName: apiData?.blockName,\r\n textName: apiData?.textName\r\n },\r\n saveEndpoint,\r\n initialDataList: systemtekster,\r\n type: type\r\n });\r\n return () => {\r\n setCurrentData({\r\n apiData: {},\r\n saveEndpoint: '',\r\n initialDataList: [],\r\n type: ''\r\n });\r\n };\r\n }, []);\r\n\r\n return (\r\n <>\r\n \r\n handleUndo(systemtekstItem.id)}\r\n text={buttonText.cancel}\r\n />\r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n {isLoading ? 'Lagrer ... ' : isDirty ? 'Ulagrede endringer' : ''}\r\n \r\n
\r\n \r\n\r\n {infoBanner && (\r\n \r\n
\r\n )}\r\n\r\n {apiErrMessage?.globalMessage && (\r\n \r\n
\r\n \r\n {textDisplayName}\r\n
\r\n- \r\n {currentDataType === type &&\r\n systemteksterList.map((systemtekstItem, index) => (\r\n
\r\n {label && (\r\n \r\n )}\r\n {listOfText?.map((value, index) => {\r\n return (\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nTextInputList.themes = themes;\r\nTextInputList.colors = colors;\r\n\r\nTextInputList.propTypes = {\r\n theme: PropTypes.oneOf(Object.values(TextInputList.themes)),\r\n color: PropTypes.oneOf(Object.values(TextInputList.colors)),\r\n id: PropTypes.string.isRequired,\r\n label: PropTypes.string,\r\n placeholder: PropTypes.string,\r\n valueArray: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n match: PropTypes.string,\r\n matchInfoHeader: PropTypes.string,\r\n matchInfoItemList: PropTypes.arrayOf(PropTypes.string),\r\n error: PropTypes.bool\r\n })\r\n ),\r\n onBlur: PropTypes.func, //exclude from backend\r\n onChange: PropTypes.func, //exclude from backend\r\n isDisabled: PropTypes.bool, //exclude from backend\r\n inEditMode: PropTypes.bool //exclude from backend\r\n};\r\n\r\nTextInputList.defaultProps = {\r\n onBlur: () => {},\r\n onChange: () => {},\r\n input: {\r\n id: '',\r\n value: []\r\n },\r\n theme: TextInputList.themes.default,\r\n color: TextInputList.colors.default\r\n};\r\n\r\nexport default TextInputList;\r\n","import InputErrorMessage from 'components/input-error-message';\r\nimport MenuButton from 'components/resource-table/menu-button';\r\nimport UdirRichTextEditor from 'components/rich-text-editor/rich-text-editor';\r\nimport TextInputList from 'components/text-input-list/text-input-list';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\r\n\r\nexport default function KartleggingExpressionItem({\r\n expression,\r\n onDeleteCallback,\r\n handleChange,\r\n handleExpressionUndo,\r\n errorMessage,\r\n readOnly,\r\n buttonText,\r\n labelText,\r\n recentlySaved,\r\n placeholderText\r\n}) {\r\n const requiredInputRef = useRef(null);\r\n\r\n const isNew = useMemo(() => {\r\n return (\r\n expression?.matchItemList?.length === 1 &&\r\n expression?.matchItemList[0]?.match === '' &&\r\n expression?.description === ''\r\n );\r\n }, [expression]);\r\n\r\n const [inEditMode, setInEditMode] = useState(isNew);\r\n\r\n useEffect(() => {\r\n if (recentlySaved) {\r\n setInEditMode(false);\r\n }\r\n });\r\n\r\n const initialMatchItemList = useRef(\r\n JSON.stringify(expression?.matchItemList)\r\n );\r\n const initialDescription = useRef(expression?.description);\r\n\r\n const undoDisabled = useMemo(() => {\r\n if (\r\n JSON.parse(initialMatchItemList?.current)?.length === 0 &&\r\n initialDescription === ''\r\n )\r\n return true;\r\n return (\r\n initialMatchItemList.current ===\r\n JSON.stringify(expression?.matchItemList) &&\r\n initialDescription.current === expression?.description\r\n );\r\n }, [\r\n initialMatchItemList,\r\n initialDescription,\r\n expression?.matchItemList,\r\n expression?.description\r\n ]);\r\n\r\n useEffect(() => {\r\n if (requiredInputRef?.current && errorMessage) {\r\n requiredInputRef.current.scrollIntoView({ behavior: 'smooth' });\r\n }\r\n }, [requiredInputRef, errorMessage]);\r\n\r\n const hideTools = !inEditMode || readOnly;\r\n\r\n return (\r\n \r\n handleChange(e, index)}\r\n onBlur={handleBlur}\r\n />\r\n {!inEditMode && (\r\n ${\r\n valueArray[index]?.matchInfoHeader ?? ''\r\n }\r\n ${\r\n valueArray[index]?.matchInfoItemList\r\n ?.map(item => ` removeVal(value)}\r\n >\r\n
\r\n );\r\n })}\r\n {!isDisabled && (\r\n ${item}
`)\r\n .join('') ?? ''\r\n }\r\n `}\r\n theme=\"info\"\r\n error={value.error}\r\n />\r\n )}\r\n {!isDisabled && (\r\n\r\n
\r\n \r\n )}\r\n \r\n {!readOnly && (\r\n handleChange(id, value, 'description')}\r\n hasActionButtons={true}\r\n id={expression.id}\r\n readOnly={hideTools}\r\n label={labelText.description}\r\n placeholder={placeholderText.description}\r\n value={expression?.description || ''}\r\n />\r\n
\r\n \r\n );\r\n}\r\n\r\nKartleggingExpressionItem.expressionObjectProps = PropTypes.shape({\r\n id: PropTypes.string,\r\n matchItemList: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n match: PropTypes.string,\r\n matchInfoHeader: PropTypes.string,\r\n matchInfoItemList: PropTypes.arrayOf(PropTypes.string),\r\n error: PropTypes.bool\r\n })\r\n ),\r\n description: PropTypes.string // html\r\n});\r\n\r\nKartleggingExpressionItem.propTypes = {\r\n buttonText: PropTypes.exact({\r\n edit: PropTypes.string.isRequired, // ignore backend\r\n cancelEdit: PropTypes.string.isRequired, // ignore backend\r\n cancel: PropTypes.string.isRequired, // ignore backend\r\n delete: PropTypes.string.isRequired // ignore backend\r\n }).isRequired, // ignore backend\r\n placeholderText: PropTypes.exact({\r\n expression: PropTypes.string, // ignore backend\r\n description: PropTypes.string // ignore backend\r\n }),\r\n labelText: PropTypes.exact({\r\n expression: PropTypes.string, // ignore backend\r\n description: PropTypes.string // ignore backend\r\n }),\r\n recentlySaved: PropTypes.bool, // ignore backend\r\n onDeleteCallback: PropTypes.func.isRequired, //Ignore backend\r\n handleChange: PropTypes.func.isRequired, //Ignore backend\r\n handleExpressionUndo: PropTypes.func.isRequired, //Ignore backend\r\n errorMessage: PropTypes.string, // ignore backend\r\n readOnly: PropTypes.bool, // ignore backend\r\n expression: KartleggingExpressionItem.expressionObjectProps\r\n};\r\n","import InputErrorMessage from 'components/input-error-message';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useContext, useEffect } from 'react';\r\nimport KartleggingExpressionItem from './kartlegging-expression-item';\r\nimport Clicker from 'components/clicker/clicker';\r\nimport RedaktorGrensesnittContext from '../../../../contexts/redaktor-grensesnitt-context';\r\n\r\nexport default function KartleggingExpressionDisplayData({\r\n expressions,\r\n saveEndpoint,\r\n apiData,\r\n fixedStructure,\r\n uniqueNodeId,\r\n type,\r\n buttonText,\r\n labelText,\r\n placeholderText,\r\n readOnly,\r\n title,\r\n subtitle\r\n}) {\r\n const {\r\n state: {\r\n currentDataType,\r\n apiErrMessage,\r\n isLoading,\r\n isDirty,\r\n recentlySaved,\r\n redaktorDataList: expressionList\r\n },\r\n functions: {\r\n setCurrentData,\r\n reorder,\r\n saveExpressionChanges,\r\n deleteItem,\r\n addExpressionItem,\r\n handleExpressionChange,\r\n undoAll,\r\n handleExpressionUndo\r\n }\r\n } = useContext(RedaktorGrensesnittContext);\r\n\r\n const sortAlphabetically = (a, b) => {\r\n if (a.toLowerCase() < b.toLowerCase()) {\r\n return -1;\r\n }\r\n if (a.toLowerCase() > b.toLowerCase()) {\r\n return 1;\r\n }\r\n return 0;\r\n };\r\n\r\n useEffect(() => {\r\n setCurrentData({\r\n apiData: {\r\n versionId: apiData?.versionId,\r\n sprakKode: apiData?.sprakKode,\r\n ferdighetsomradeId: apiData?.ferdighetsomradeId\r\n },\r\n saveEndpoint,\r\n initialDataList: expressions\r\n .map(expression => ({\r\n ...expression,\r\n matchItemList: expression.matchItemList.sort((a, b) =>\r\n sortAlphabetically(a?.match, b?.match)\r\n )\r\n }))\r\n .sort((a, b) =>\r\n sortAlphabetically(\r\n a?.matchItemList[0].match,\r\n b?.matchItemList[0].match\r\n )\r\n ),\r\n type: type\r\n });\r\n return () => {\r\n setCurrentData({\r\n apiData: {},\r\n saveEndpoint: '',\r\n initialDataList: [],\r\n type: ''\r\n });\r\n };\r\n }, []);\r\n\r\n return (\r\n <>\r\n {!readOnly && (\r\n \r\n setInEditMode(!inEditMode)\r\n },\r\n {\r\n text: buttonText.delete,\r\n onClick: () => onDeleteCallback(expression.id)\r\n },\r\n {\r\n isDisabled: undoDisabled,\r\n onClick: () => handleExpressionUndo(expression?.id),\r\n text: buttonText.cancel\r\n }\r\n ]}\r\n />\r\n
\r\n )}\r\n {errorMessage && (\r\n \r\n
\r\n )}\r\n \r\n handleChange(id, value, 'matchItemList')}\r\n valueArray={expression?.matchItemList || []}\r\n id={expression.id}\r\n inEditMode={inEditMode}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n {isLoading ? 'Lagrer ... ' : isDirty ? 'Ulagrede endringer' : ''}\r\n \r\n
\r\n \r\n )}\r\n\r\n {apiErrMessage?.globalMessage && (\r\n - \r\n {currentDataType === type &&\r\n expressionList.map((expression, index) => (\r\n
\r\n
\r\n ))}\r\n \r\n
\r\n );\r\n}\r\n\r\nKartleggingPreviewDisplayData.propTypes = {\r\n type: PropTypes.string,\r\n questions: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n id: PropTypes.string.isRequired,\r\n index: PropTypes.string.isRequired,\r\n questionText: PropTypes.exact({\r\n text: PropTypes.string.isRequired,\r\n definitions: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n matchWord: PropTypes.string,\r\n title: PropTypes.string,\r\n lead: PropTypes.string\r\n })\r\n )\r\n }),\r\n tooltip: PropTypes.shape(Tooltip.propTypes)\r\n })\r\n )\r\n};\r\n","import UdirRichTextEditor from 'components/rich-text-editor/rich-text-editor';\r\nimport TextInput from 'components/text-input';\r\nimport PropTypes from 'prop-types';\r\nimport React from 'react';\r\n\r\nexport default function KartleggingUtsagnLanguageItem({\r\n utsagnId,\r\n utsagnLanguageItem,\r\n uniqueNodeId,\r\n handleChange,\r\n placeholderText,\r\n labelText,\r\n sanityImageQuery,\r\n inEditMode,\r\n readOnly\r\n}) {\r\n const hideTools = !inEditMode || readOnly;\r\n\r\n return (\r\n <>\r\n - \r\n {questions?.map((question, index) => (\r\n
- \r\n
\r\n {utsagnLanguageItem.languageName}\r\n
\r\n\r\n \r\n handleChange(utsagnId, id, value, 'questionText')\r\n }\r\n />\r\n
\r\n \r\n handleChange(utsagnId, id, value, 'tooltip')}\r\n id={utsagnLanguageItem.id}\r\n hasActionButtons={true}\r\n value={utsagnLanguageItem?.tooltip?.text || ''}\r\n />\r\n
\r\n \r\n );\r\n}\r\n\r\nKartleggingUtsagnLanguageItem.utsagnProps = {\r\n id: PropTypes.string,\r\n languageCode: PropTypes.string,\r\n languageName: PropTypes.string,\r\n questionText: PropTypes.shape({\r\n text: PropTypes.string\r\n }),\r\n tooltip: PropTypes.shape({\r\n text: PropTypes.string // html\r\n })\r\n};\r\n\r\nKartleggingUtsagnLanguageItem.propTypes = {\r\n utsagnId: PropTypes.string,\r\n utsagnLanguageItem: PropTypes.shape(\r\n KartleggingUtsagnLanguageItem.utsagnProps\r\n ),\r\n placeholderText: PropTypes.exact({\r\n utsagnText: PropTypes.string, // ignore backend\r\n tooltipText: PropTypes.string // ignore backend\r\n }),\r\n labelText: PropTypes.exact({\r\n utsagnText: PropTypes.string, // ignore backend\r\n tooltipText: PropTypes.string // ignore backend\r\n }),\r\n handleChange: PropTypes.func.isRequired, //Ignore backend\r\n uniqueNodeId: PropTypes.string.isRequired, // ignore backend\r\n sanityImageQuery: PropTypes.string, // ignore backend\r\n inEditMode: PropTypes.bool, //ignore backend\r\n readOnly: PropTypes.bool //ignore backend\r\n};\r\n","import InputErrorMessage from 'components/input-error-message';\r\nimport KartleggingUtsagnLanguageItem from './kartlegging-utsagn-language-item';\r\nimport MenuButton from 'components/resource-table/menu-button';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\r\n\r\nconst getInitialUtsagnTexts = utsagn => {\r\n return utsagn?.languageItems?.flatMap(u => {\r\n return {\r\n questionText: u?.questionText?.text,\r\n tooltipText: u?.tooltip?.text\r\n };\r\n });\r\n};\r\n\r\nexport default function KartleggingUtsagnItem({\r\n utsagn,\r\n uniqueNodeId,\r\n listLength,\r\n onDeleteCallback,\r\n fixedStructure,\r\n reorder,\r\n index,\r\n mestringsnivaNumber,\r\n handleChange,\r\n handleUndo,\r\n errorMessage,\r\n placeholderText,\r\n recentlySaved,\r\n labelText,\r\n buttonText,\r\n sanityImageQuery,\r\n readOnly\r\n}) {\r\n const isNew = useMemo(() => {\r\n return utsagn?.languageItems?.every(\r\n item => item?.questionText?.text === '' && item?.tooltip?.text === ''\r\n );\r\n }, [utsagn]);\r\n\r\n const requiredInputRef = useRef(null);\r\n const [inEditMode, setInEditMode] = useState(isNew);\r\n const initialUtsagnTexts = useRef(getInitialUtsagnTexts(utsagn));\r\n\r\n useEffect(() => {\r\n if (recentlySaved) {\r\n setInEditMode(false);\r\n initialUtsagnTexts.current = getInitialUtsagnTexts(utsagn);\r\n }\r\n });\r\n\r\n const undoDisabled = useMemo(() => {\r\n if (\r\n initialUtsagnTexts?.current?.every(\r\n uT => uT?.questionText === '' && uT?.tooltipText === ''\r\n )\r\n )\r\n return true;\r\n else\r\n return initialUtsagnTexts?.current?.every(\r\n (uT, i) =>\r\n uT?.questionText === utsagn?.languageItems[i]?.questionText?.text &&\r\n uT?.tooltipText === utsagn?.languageItems[i]?.tooltip?.text\r\n );\r\n }, [\r\n inEditMode,\r\n initialUtsagnTexts,\r\n utsagn?.languageItems?.map(lI => [\r\n lI?.questionText?.text,\r\n lI?.tooltip?.text\r\n ])\r\n ]);\r\n\r\n useEffect(() => {\r\n if (requiredInputRef?.current && errorMessage) {\r\n requiredInputRef.current.scrollIntoView({\r\n behavior: 'smooth'\r\n });\r\n setInEditMode(true);\r\n } else if (requiredInputRef.current && isNew) {\r\n requiredInputRef.current.scrollIntoView({\r\n behavior: 'smooth'\r\n });\r\n }\r\n }, [requiredInputRef, errorMessage, isNew]);\r\n\r\n return (\r\n \r\n {`${mestringsnivaNumber}.${index + 1}`}\r\n
\r\n \r\n {errorMessage && (\r\n
\r\n \r\n );\r\n}\r\n\r\nKartleggingUtsagnItem.utsagnProps = {\r\n id: PropTypes.string,\r\n languageItems: PropTypes.arrayOf(\r\n KartleggingUtsagnLanguageItem.propTypes.utsagnLanguageItem\r\n )\r\n};\r\n\r\nKartleggingUtsagnItem.propTypes = {\r\n buttonText: PropTypes.exact({\r\n edit: PropTypes.string.isRequired, // ignore backend\r\n cancelEdit: PropTypes.string.isRequired, // ignore backend\r\n cancel: PropTypes.string.isRequired, // ignore backend\r\n moveDown: PropTypes.string.isRequired, // ignore backend\r\n moveUp: PropTypes.string.isRequired, // ignore backend\r\n delete: PropTypes.string.isRequired // ignore backend\r\n }).isRequired,\r\n placeholderText: PropTypes.exact({\r\n utsagnText: PropTypes.string, // ignore backend\r\n tooltipText: PropTypes.string // ignore backend\r\n }),\r\n labelText: PropTypes.exact({\r\n utsagnText: PropTypes.string, // ignore backend\r\n tooltipText: PropTypes.string // ignore backend\r\n }),\r\n recentlySaved: PropTypes.bool, // ignore backend\r\n readOnly: PropTypes.bool, // ignore backend\r\n fixedStructure: PropTypes.bool, // ignore backend\r\n listLength: PropTypes.number.isRequired, //Ignore backend\r\n handleChange: PropTypes.func.isRequired, //Ignore backend\r\n handleUndo: PropTypes.func.isRequired, //Ignore backend\r\n onDeleteCallback: PropTypes.func.isRequired, //Ignore backend\r\n reorder: PropTypes.func.isRequired, //Ignore backend\r\n mestringsnivaNumber: PropTypes.number.isRequired, //Ignore backend\r\n index: PropTypes.number.isRequired, //Ignore backend\r\n uniqueNodeId: PropTypes.string.isRequired, // ignore backend\r\n errorMessage: PropTypes.string, // ignore backend\r\n utsagn: PropTypes.shape(KartleggingUtsagnItem.utsagnProps),\r\n sanityImageQuery: PropTypes.string\r\n};\r\n","import InputErrorMessage from 'components/input-error-message';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useContext, useEffect } from 'react';\r\nimport KartleggingUtsagnItem from './kartlegging-utsagn-item';\r\nimport Clicker from 'components/clicker/clicker';\r\nimport RedaktorGrensesnittContext from '../../../../contexts/redaktor-grensesnitt-context';\r\nimport Icon from 'components/icon';\r\n\r\nexport default function KartleggingUtsagnDisplayData({\r\n title,\r\n subtitle,\r\n questions,\r\n uniqueNodeId,\r\n apiData,\r\n type,\r\n readOnly,\r\n mestringsnivaNumber,\r\n fixedStructure,\r\n saveEndpoint,\r\n buttonText,\r\n placeholderText,\r\n labelText,\r\n infoBanner\r\n}) {\r\n const {\r\n state: {\r\n currentDataType,\r\n isLoading,\r\n isDirty,\r\n apiErrMessage,\r\n recentlySaved,\r\n redaktorDataList: utsagnList\r\n },\r\n functions: {\r\n setCurrentData,\r\n reorder,\r\n saveUtsagnChanges,\r\n deleteItem,\r\n addUtsagnItem,\r\n handleUtsagnChange,\r\n undoAll,\r\n handleUtsagnUndo\r\n }\r\n } = useContext(RedaktorGrensesnittContext);\r\n useEffect(() => {\r\n setCurrentData({\r\n apiData: {\r\n versionId: apiData?.versionId,\r\n arstrinngruppeId: apiData?.arstrinngruppeId,\r\n ferdighetsomradeId: apiData?.ferdighetsomradeId,\r\n mestringsnivaId: apiData?.mestringsnivaId\r\n },\r\n saveEndpoint,\r\n initialDataList: questions,\r\n type: type\r\n });\r\n return () => {\r\n setCurrentData({\r\n apiData: {},\r\n saveEndpoint: '',\r\n initialDataList: [],\r\n type: ''\r\n });\r\n };\r\n }, []);\r\n\r\n return (\r\n <>\r\n {!readOnly && (\r\n \r\n
\r\n )}\r\n {!readOnly && (\r\n \r\n setInEditMode(!inEditMode)\r\n },\r\n {\r\n isDisabled: fixedStructure || index === 0,\r\n text: buttonText.moveUp,\r\n onClick: () => reorder(index, -1)\r\n },\r\n {\r\n isDisabled: fixedStructure || index === listLength - 1,\r\n onClick: () => reorder(index, 1),\r\n text: buttonText.moveDown\r\n },\r\n {\r\n isDisabled: fixedStructure,\r\n onClick: () => onDeleteCallback(utsagn.id),\r\n text: buttonText.delete\r\n },\r\n {\r\n isDisabled: undoDisabled,\r\n onClick: () => handleUndo(utsagn.id),\r\n text: buttonText.cancel\r\n }\r\n ]}\r\n />\r\n
\r\n )}\r\n\r\n {utsagn?.languageItems?.map((utsagnLanguageItem, i) => {\r\n return (\r\n \r\n
\r\n \r\n \r\n {isLoading ? 'Lagrer ... ' : isDirty ? 'Ulagrede endringer' : ''}\r\n \r\n
\r\n \r\n )}\r\n {infoBanner && (\r\n \r\n
\r\n )}\r\n {apiErrMessage?.globalMessage && (\r\n \r\n {`${index + 1}`}
\r\n \r\n \r\n {errorMessage && (\r\n handleChange(id, value, 'tooltip')}\r\n hasActionButtons={true}\r\n readOnly={hideTools}\r\n />\r\n
\r\n \r\n );\r\n}\r\n\r\nSamtaleEditItem.questionProps = {\r\n id: PropTypes.string,\r\n questionText: PropTypes.exact({\r\n text: PropTypes.string\r\n }),\r\n questionTypeText: PropTypes.string,\r\n type: PropTypes.string,\r\n value: PropTypes.string,\r\n maxLength: PropTypes.number,\r\n group: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n id: PropTypes.string.isRequired,\r\n label: PropTypes.string.isRequired,\r\n stringValue: PropTypes.string,\r\n boolValue: PropTypes.bool,\r\n placeholder: PropTypes.string\r\n })\r\n )\r\n};\r\n\r\nSamtaleEditItem.propTypes = {\r\n samtaleQuestion: PropTypes.shape(SamtaleEditItem.questionProps),\r\n buttonText: PropTypes.exact({\r\n edit: PropTypes.string.isRequired, // ignore backend\r\n cancelEdit: PropTypes.string.isRequired, // ignore backend\r\n cancel: PropTypes.string.isRequired, // ignore backend\r\n moveDown: PropTypes.string.isRequired, // ignore backend\r\n moveUp: PropTypes.string.isRequired, // ignore backend\r\n delete: PropTypes.string.isRequired // ignore backend\r\n }).isRequired,\r\n placeholderText: PropTypes.shape({\r\n lead: PropTypes.string, // ignore backend\r\n question: PropTypes.string, // ignore backend\r\n tooltipText: PropTypes.string // ignore backend\r\n }),\r\n labelText: PropTypes.exact({\r\n // ignore backend\r\n title: PropTypes.string, // ignore backend\r\n questionText: PropTypes.string, // ignore backend\r\n questionType: PropTypes.string, // ignore backend\r\n showChapterSeparator: PropTypes.string, // ignore backend\r\n lead: PropTypes.string, // ignore backend\r\n tooltipText: PropTypes.string // ignore backend\r\n }),\r\n newQuestionTypeText: PropTypes.string, // ignore BE\r\n recentlySaved: PropTypes.bool, // ignore backend\r\n readOnly: PropTypes.bool, // ignore backend\r\n fixedStructure: PropTypes.bool, // ignore backend\r\n listLength: PropTypes.number.isRequired, //Ignore backend\r\n handleChange: PropTypes.func.isRequired, //Ignore backend\r\n handleUndo: PropTypes.func.isRequired, //Ignore backend\r\n onDeleteCallback: PropTypes.func.isRequired, //Ignore backend\r\n reorder: PropTypes.func.isRequired, //Ignore backend\r\n index: PropTypes.number.isRequired, //Ignore backend\r\n uniqueNodeId: PropTypes.string.isRequired, // ignore backend\r\n errorMessage: PropTypes.string // ignore backend\r\n};\r\n","import React, { useContext, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport RedaktorGrensesnittContext from '../../../../contexts/redaktor-grensesnitt-context';\r\n\r\nimport CheckboxInput from 'components/checkbox-input/checkbox-input';\r\nimport Clicker from 'components/clicker/clicker';\r\nimport Icon from 'components/icon';\r\nimport InputErrorMessage from 'components/input-error-message';\r\nimport RichTextEditor from 'components/rich-text-editor/rich-text-editor';\r\nimport TextInput from 'components/text-input';\r\nimport SamtaleEditItem from './samtale-edit-item';\r\n\r\nexport default function SamtaleEditItemDisplayData({\r\n title,\r\n readOnlyTitle,\r\n lead,\r\n id,\r\n inputs,\r\n uniqueNodeId,\r\n infoBanner,\r\n apiData,\r\n showChapterSeparator,\r\n hideShowChapterSeparatorCheckbox,\r\n type,\r\n readOnly,\r\n fixedStructure,\r\n saveEndpoint,\r\n buttonText,\r\n placeholderText,\r\n labelText,\r\n newQuestionTypeText\r\n}) {\r\n const {\r\n state: {\r\n otherText,\r\n currentDataType,\r\n isLoading,\r\n isDirty,\r\n apiErrMessage,\r\n recentlySaved,\r\n redaktorDataList: samtaleguideList\r\n },\r\n functions: {\r\n setCurrentData,\r\n setOtherText,\r\n reorder,\r\n saveSamtaleChanges,\r\n deleteItem,\r\n addSamtaleItem,\r\n handleSamtaleChange,\r\n undoAll,\r\n handleSamtaleUndo\r\n }\r\n } = useContext(RedaktorGrensesnittContext);\r\n useEffect(() => {\r\n setCurrentData({\r\n apiData,\r\n saveEndpoint,\r\n initialDataList: inputs,\r\n type,\r\n title,\r\n lead,\r\n showChapterSeparator\r\n });\r\n setOtherText({\r\n title,\r\n lead,\r\n showChapterSeparator\r\n });\r\n return () => {\r\n setCurrentData({\r\n apiData: {},\r\n saveEndpoint: '',\r\n initialDataList: [],\r\n type: '',\r\n title: undefined,\r\n lead: undefined,\r\n showChapterSeparator: undefined\r\n });\r\n setOtherText({\r\n title: undefined,\r\n lead: undefined,\r\n showChapterSeparator: undefined\r\n });\r\n };\r\n }, []);\r\n const handleOtherTextChange = (key, value) => {\r\n setOtherText({\r\n ...otherText,\r\n [key]: value\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n {!readOnly && (\r\n \r\n
\r\n )}\r\n {!readOnly && (\r\n \r\n setInEditMode(!inEditMode)\r\n },\r\n {\r\n isDisabled: fixedStructure || index === 0,\r\n text: buttonText.moveUp,\r\n onClick: () => reorder(index, -1)\r\n },\r\n {\r\n isDisabled: fixedStructure || index === listLength - 1,\r\n onClick: () => reorder(index, 1),\r\n text: buttonText.moveDown\r\n },\r\n {\r\n isDisabled: fixedStructure,\r\n onClick: () => onDeleteCallback(samtaleQuestion.id),\r\n text: buttonText.delete\r\n },\r\n {\r\n isDisabled: undoDisabled,\r\n onClick: () => handleUndo(samtaleQuestion.id),\r\n text: buttonText.cancel\r\n }\r\n ]}\r\n />\r\n
\r\n )}\r\n {(samtaleQuestion.questionTypeText || newQuestionTypeText) && (\r\n \r\n {labelText.questionType +\r\n ': ' +\r\n (samtaleQuestion.questionTypeText || newQuestionTypeText)}\r\n
\r\n )}\r\n {typeSelected && (\r\n \r\n handleChange(id, value, 'questionText')}\r\n />\r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n {isLoading ? 'Lagrer ... ' : isDirty ? 'Ulagrede endringer' : ''}\r\n \r\n
\r\n \r\n )}\r\n {infoBanner && (\r\n \r\n
\r\n )}\r\n {apiErrMessage?.globalMessage && (\r\n \r\n {!hideShowChapterSeparatorCheckbox &&\r\n otherText.showChapterSeparator !== undefined && (\r\n handleOtherTextChange(id, value)}\r\n label={labelText.showChapterSeparator}\r\n value={\r\n otherText.showChapterSeparator !== undefined\r\n ? otherText.showChapterSeparator\r\n : showChapterSeparator\r\n }\r\n />\r\n )}\r\n {otherText.title !== undefined && (\r\n handleOtherTextChange('title', value)}\r\n />\r\n )}\r\n\r\n {otherText.lead !== undefined && (\r\n \r\n handleOtherTextChange('lead', htmlValue)\r\n }\r\n />\r\n )}\r\n
\r\n \r\n \r\n {currentSavedText}\r\n \r\n \r\n {currentSavedText}\r\n \r\n
\r\n );\r\n};\r\n\r\nSamtaleInputSimple.propTypes = {\r\n inputIsActive: PropTypes.bool, // exclude from BE\r\n onChange: PropTypes.func, // exclude from BE\r\n questionId: PropTypes.string, // exclude from BE\r\n savedText: PropTypes.string,\r\n placeholder: PropTypes.string,\r\n maxLength: PropTypes.number\r\n};\r\n\r\nexport default SamtaleInputSimple;\r\n","import React, { useContext, useEffect, useState, useLayoutEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport SamtaleContext from '../../contexts/samtale-context';\r\n\r\nconst fixHeight = id => {\r\n if (!id) return;\r\n\r\n const targetTextArea = document.getElementById(id);\r\n targetTextArea.style.height = 0;\r\n targetTextArea.style.height = targetTextArea.scrollHeight + 1 + 'px';\r\n};\r\n\r\nconst SamtaleInputMulti = ({\r\n inputIsActive,\r\n questionId,\r\n onChange,\r\n inputsMaxLength,\r\n noLanguagesText,\r\n alternatives,\r\n placeholderNewItem\r\n}) => {\r\n const [currentAlternatives, setCurrentAlternatives] = useState(alternatives);\r\n const [knownLanguagesIsMounted, setKnownLanguagesIsMounted] = useState(false);\r\n\r\n const { knownLanguages } = useContext(SamtaleContext);\r\n\r\n const handleOnChange = (e, id) => {\r\n fixHeight(questionId + id);\r\n\r\n const newValue = e.target.value;\r\n\r\n const newAlternatives = currentAlternatives.map(answer => {\r\n if (answer.id === id) {\r\n return { ...answer, savedText: newValue };\r\n }\r\n return answer;\r\n });\r\n\r\n setCurrentAlternatives(newAlternatives);\r\n\r\n const objectToSave = newAlternatives.find(\r\n alternative => alternative.id === id\r\n );\r\n const dataToSave = objectToSave\r\n ? [\r\n {\r\n answerId: objectToSave.id,\r\n answerValue: objectToSave.savedText\r\n }\r\n ]\r\n : [];\r\n\r\n onChange(dataToSave);\r\n };\r\n\r\n useEffect(() => {\r\n if (!knownLanguages.length && !knownLanguagesIsMounted) {\r\n setKnownLanguagesIsMounted(true);\r\n return;\r\n }\r\n\r\n if (!currentAlternatives) return;\r\n\r\n let newAlternatives = knownLanguages.map(language => {\r\n const existingAlternative = currentAlternatives.find(\r\n alternative => alternative.id === language\r\n );\r\n if (existingAlternative) {\r\n return existingAlternative;\r\n }\r\n return {\r\n id: language,\r\n savedText: '',\r\n label: language,\r\n placeholder: placeholderNewItem ? placeholderNewItem : ''\r\n };\r\n });\r\n\r\n setCurrentAlternatives(newAlternatives);\r\n }, [knownLanguages]);\r\n\r\n useLayoutEffect(() => {\r\n fixHeight();\r\n }, [inputIsActive]);\r\n\r\n return (\r\n \r\n \r\n {currentAlternatives &&\r\n (currentAlternatives.length > 0 ? (\r\n currentAlternatives\r\n .filter(alternative => knownLanguages.includes(alternative.id))\r\n .map(({ id, savedText, label, placeholder }, index) => (\r\n
\r\n \r\n \r\n {label}\r\n \r\n handleOnChange(e, id)}\r\n />\r\n \r\n {savedText}\r\n \r\n
\r\n ))\r\n ) : (\r\n \r\n
\r\n ))}\r\n {noLanguagesText}
\r\n\r\n
\r\n )\r\n );\r\n })}\r\n \r\n \r\n );\r\n};\r\n\r\nSamtaleInputMulti.propTypes = {\r\n inputIsActive: PropTypes.bool, // exclude from BE\r\n onChange: PropTypes.func, // exclude from BE\r\n questionId: PropTypes.string, // exclude from BE\r\n alternatives: PropTypes.arrayOf(\r\n PropTypes.exact({\r\n id: PropTypes.string,\r\n savedText: PropTypes.string,\r\n label: PropTypes.string,\r\n placeholder: PropTypes.string\r\n })\r\n ),\r\n inputsMaxLength: PropTypes.number,\r\n noLanguagesText: PropTypes.string,\r\n placeholderNewItem: PropTypes.string\r\n};\r\n\r\nexport default SamtaleInputMulti;\r\n","import React, { useContext, useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport SamtaleContext from '../../contexts/samtale-context';\r\n\r\nconst SamtaleInputCheckbox = ({\r\n inputIsActive,\r\n questionId,\r\n onChange,\r\n alternatives,\r\n noLanguagesText\r\n}) => {\r\n const [currentAlternatives, setCurrentAlternatives] = useState(alternatives);\r\n const [knownLanguagesIsMounted, setKnownLanguagesIsMounted] = useState(false);\r\n\r\n const { knownLanguages } = useContext(SamtaleContext);\r\n\r\n const handleOnChange = (e, id) => {\r\n let newValue = e.target.checked;\r\n\r\n let newAlternatives = currentAlternatives.map(alternative => {\r\n if (alternative.id === id) {\r\n return { ...alternative, isChecked: newValue };\r\n }\r\n return alternative;\r\n });\r\n\r\n setCurrentAlternatives(newAlternatives);\r\n\r\n const dataToSave = newAlternatives\r\n .filter(alternative => alternative.isChecked)\r\n .map(alternative => {\r\n return { answerId: alternative.id, answerValue: alternative.id };\r\n });\r\n\r\n onChange(dataToSave);\r\n };\r\n\r\n useEffect(() => {\r\n if (!knownLanguages.length && !knownLanguagesIsMounted) {\r\n setKnownLanguagesIsMounted(true);\r\n return;\r\n }\r\n\r\n if (!currentAlternatives) return;\r\n\r\n let newAlternatives = knownLanguages.map(language => {\r\n const existingAlternative = currentAlternatives.find(\r\n alternative => alternative.id === language\r\n );\r\n if (existingAlternative) {\r\n return existingAlternative;\r\n }\r\n return {\r\n id: language,\r\n label: language,\r\n isChecked: false\r\n };\r\n });\r\n\r\n setCurrentAlternatives(newAlternatives);\r\n }, [knownLanguages]);\r\n\r\n return (\r\n \r\n {label}\r\n
\r\n\r\n {savedText}\r\n
\r\n\r\n \r\n {currentAlternatives &&\r\n (currentAlternatives.length > 0 ? (\r\n currentAlternatives\r\n .filter(alternative => knownLanguages.includes(alternative.id))\r\n .map(({ id, label, isChecked }) => (\r\n
\r\n \r\n handleOnChange(e, id)}\r\n />\r\n \r\n {label}\r\n \r\n
\r\n ))\r\n ) : (\r\n {noLanguagesText}
\r\n ))}\r\n- \r\n {currentAlternatives\r\n .filter(alternative => knownLanguages.includes(alternative.id))\r\n .filter(alternative => alternative.isChecked === true)\r\n .map(alternative => (\r\n
\r\n \r\n {currentAddedItems && !!currentAddedItems.length && (\r\n
\r\n - \r\n {currentAddedItems.map(item => (\r\n
- \r\n \r\n {item}\r\n \r\n \r\n {checkLanguageIsLoadingController.isLoading &&\r\n checkLanguageIsLoadingController.target === item && (\r\n\r\n
\r\n )}\r\n {removeButtonPreFix && (\r\n \r\n ))}\r\n
\r\n \r\n \r\n = 2\r\n })}\r\n ref={searchFieldRef}\r\n onChange={e => handleInputChange(e)}\r\n aria-label={searchFieldLabel}\r\n aria-describedby={questionId}\r\n placeholder={placeholder}\r\n value={searchValue}\r\n onKeyDown={handleSearchFieldKeyDown}\r\n />\r\n {isLoading ? (\r\n
\r\n \r\n
\r\n ) : searchResults.length ? (\r\n - \r\n {searchResults\r\n .filter((l, i) => i < 5)\r\n .map(({ norwegianName, nativeName, iso6391Code }) => (\r\n
\r\n {noResultsText}\r\n
\r\n ) : null}\r\n {[...searchValue].length >= 2 && (\r\n\r\n
\r\n )}\r\n \r\n - \r\n {currentAddedItems.map(language => (\r\n
\r\n \r\n {questionText && (\r\n
\r\n {input && (\r\n \r\n {readOnly ? (\r\n <>\r\n
\r\n )}\r\n \r\n \r\n \r\n
\r\n \r\n ) : (\r\n \r\n \r\n {questionText}\r\n
\r\n {tooltip &&\r\n \r\n {!inputIsActive &&\r\n (activeBlock === blockId ? (\r\n {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n handleQuestionClick();\r\n }\r\n }}\r\n onClick={handleQuestionClick}\r\n >\r\n {questionText}\r\n \r\n \r\n {tooltip && \r\n
\r\n \r\n )}\r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nSamtaleQuestion.propTypes = {\r\n blockId: PropTypes.string, // exclude from BE\r\n localReadOnly: PropTypes.string, // exclude from BE\r\n\r\n questionId: PropTypes.string,\r\n questionText: PropTypes.string,\r\n preQuestionText: PropTypes.string,\r\n input: PropTypes.exact(SamtaleInput.propTypes),\r\n tooltip: PropTypes.exact(Tooltip.propTypes)\r\n};\r\n\r\nexport default SamtaleQuestion;\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\nimport SamtaleContext from '../../contexts/samtale-context';\r\nimport SamtaleQuestion from 'components/samtale-question/samtale-question';\r\nimport Clicker from 'components/clicker/clicker';\r\n\r\nconst SamtaleBlock = ({\r\n blockId,\r\n title,\r\n lead,\r\n questionGroups,\r\n closeButtonText\r\n}) => {\r\n const { activeBlock, updateActiveBlock } = useContext(SamtaleContext);\r\n\r\n return (\r\n \r\n {title}\r\n
\r\n )}\r\n {lead && (\r\n{groupTitle}
\r\n )}\r\n {groupLead && (\r\n\r\n
\r\n \r\n {lead && (\r\n
\r\n - \r\n {blocks.map((block, index) => (\r\n
- \r\n
\r\n \r\n ))}\r\n
Error
}\r\n {displayData?.loading && (\r\n \r\n
\r\n )}\r\n {displayData?.data && (\r\n \r\n {!hideTitleData && (\r\n <>\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nconst TypesProps = ['utsagn', 'preview', 'expression'];\r\n\r\nRedaktorDataDisplay.UtsagnProps = {\r\n questions: PropTypes.arrayOf({\r\n id: PropTypes.string,\r\n position: PropTypes.number,\r\n index: PropTypes.string,\r\n questionText: PropTypes.shape({\r\n text: PropTypes.string,\r\n definitions: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n matchWord: PropTypes.string,\r\n title: PropTypes.string,\r\n lead: PropTypes.string\r\n })\r\n )\r\n }),\r\n tooltip: PropTypes.shape(Tooltip.propTypes)\r\n }),\r\n type: PropTypes.oneOf(TypesProps)\r\n};\r\n\r\n/**\r\n * response data for utsagn og preview er Questions fordi vi trenger alle verdiene som også finnes i question.jsx\r\n * response data for expression er annerledes\r\n */\r\nconst ResponseDataProps = PropTypes.oneOfType([\r\n // Response data from endpoint. Should also include a type\r\n PropTypes.shape(KartleggingUtsagnDisplayData.propTypes),\r\n PropTypes.shape(KartleggingPreviewDisplayData.propTypes),\r\n PropTypes.shape(KartleggingExpressionDisplayData.propTypes),\r\n PropTypes.shape(GenerellSystemtekstDisplayData.propTypes),\r\n PropTypes.shape(GenerellDashboardDisplayData.propTypes)\r\n]);\r\n\r\nRedaktorDataDisplay.propTypes = {\r\n displayData: PropTypes.shape({\r\n data: ResponseDataProps,\r\n breadcrumbText: PropTypes.string,\r\n error: PropTypes.bool,\r\n loading: PropTypes.bool\r\n }),\r\n currentTab: PropTypes.string,\r\n setCurrentTab: PropTypes.func\r\n};\r\nexport default RedaktorDataDisplay;\r\n","import cn from 'classnames';\r\nimport Clicker from 'components/clicker/clicker';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useState } from 'react';\r\n\r\nconst RedaktorNode = ({\r\n singleTopNode,\r\n type,\r\n versionId,\r\n isFirstInList,\r\n startOpen,\r\n breadcrumbText,\r\n node,\r\n currentData,\r\n setApiErrMessage,\r\n isDirty,\r\n setCurrentData,\r\n setFoundStoredData,\r\n foundStoredData\r\n}) => {\r\n const { id, title, subtitle, nodes } = node;\r\n const [isOpen, setIsOpen] = useState(false);\r\n\r\n React.useEffect(() => {\r\n const urlHashLocation = sessionStorage.getItem('breadcrumb');\r\n if (urlHashLocation) {\r\n const storedBreadcrumbData = JSON.parse(urlHashLocation);\r\n const formattedTitle = title?.replace(/ /g, '');\r\n if (\r\n storedBreadcrumbData.type === type &&\r\n storedBreadcrumbData.versionId === versionId &&\r\n urlHashLocation?.includes(formattedTitle)\r\n ) {\r\n setIsOpen(true);\r\n\r\n if (storedBreadcrumbData.id === id) {\r\n setCurrentData({\r\n ...node,\r\n breadcrumbText\r\n });\r\n setFoundStoredData(true);\r\n return;\r\n }\r\n }\r\n }\r\n if (!foundStoredData && isFirstInList) {\r\n setCurrentData({\r\n ...node,\r\n breadcrumbText\r\n });\r\n }\r\n if (startOpen) {\r\n setIsOpen(true);\r\n }\r\n }, [isFirstInList, startOpen, title]);\r\n\r\n const handleClick = () => {\r\n if (isDirty) {\r\n setApiErrMessage({\r\n globalMessage: 'Lagre eller tilbakestill før du går videre'\r\n });\r\n return;\r\n }\r\n\r\n const persistBreadcrumb = JSON.stringify({\r\n id,\r\n type,\r\n versionId,\r\n breadcrumbText: breadcrumbText.replace(/ /g, '')\r\n });\r\n\r\n sessionStorage.setItem('breadcrumb', persistBreadcrumb);\r\n setCurrentData({\r\n ...node,\r\n breadcrumbText\r\n });\r\n if (!singleTopNode) {\r\n setIsOpen(!isOpen);\r\n }\r\n };\r\n return (\r\n \r\n \r\n {displayData?.data?.title}\r\n \r\n {displayData?.data?.infoText && (\r\n
\r\n \r\n
\r\n )}\r\n {displayData?.data?.subtitle}
\r\n\r\n {displayData?.breadcrumbText}\r\n
\r\n \r\n )}\r\n\r\n {getDataByType()}\r\n
\r\n - \r\n {nodes.map((_node, i) => (\r\n
\r\n {title && (\r\n \r\n {newNodes && !!newNodes.length && (\r\n \r\n {newNodes.map((node, i) => (\r\n
\r\n \r\n );\r\n};\r\n\r\nRedaktorGrensesnitt.propTypes = {\r\n type: PropTypes.string,\r\n versionId: PropTypes.string,\r\n title: PropTypes.string,\r\n topNodeStartOpen: PropTypes.bool,\r\n nodes: PropTypes.arrayOf(PropTypes.shape(RedaktorNode.propTypes)),\r\n hrefToggler: PropTypes.shape(Toggle.propTypes)\r\n};\r\n\r\nRedaktorGrensesnitt.defaultProps = {\r\n showRemoveAction: true\r\n};\r\n\r\nexport default RedaktorGrensesnitt;\r\n","import cn from 'classnames';\r\nimport Clicker from 'components/clicker/clicker';\r\nimport PropTypes from 'prop-types';\r\nimport React from 'react';\r\n\r\nconst colors = {\r\n green: 'green',\r\n blue: 'blue',\r\n black: 'black'\r\n};\r\n\r\nconst RedaktorLinkHeader = ({ links, color }) => {\r\n return (\r\n \r\n
\r\n )}\r\n\r\n {title}
\r\n\r\n {hrefToggler && hrefToggler?.show && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n {links && (\r\n
\r\n \r\n );\r\n};\r\n\r\nRedaktorLinkHeader.propTypes = {\r\n color: PropTypes.oneOf(Object.values(colors)), //exclude from backend\r\n links: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n href: PropTypes.string,\r\n text: PropTypes.string,\r\n isActive: PropTypes.bool\r\n })\r\n )\r\n};\r\n\r\nRedaktorLinkHeader.colors = colors;\r\n\r\nRedaktorLinkHeader.defaultProps = {\r\n infos: [],\r\n color: colors.blue\r\n};\r\n\r\nexport default RedaktorLinkHeader;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport BaseLayout from './base-layout';\r\nimport Header from '../header';\r\nimport Footer from '../footer';\r\nimport AdminHeader from '../admin-header';\r\nimport RedaktorLinkHeader from 'components/redaktor-link-header/redaktor-link-header';\r\n\r\nconst RedaktorLayout = ({\r\n children,\r\n header,\r\n footer,\r\n adminHeader,\r\n redaktorLinkHeader,\r\n ...rest\r\n}) => {\r\n return (\r\n - \r\n {links.map(({ text, href, isActive }, index) => (\r\n
\r\n \r\n {children}\r\n \r\n
\r\n \r\n \r\n \r\n {title}\r\n \r\n
\r\n {lead}
\r\n\r\n {showRadioButtons &&\r\n Boolean(radioButtons?.length) &&\r\n radioButtons.map(radio => {\r\n return (\r\n
\r\n
\r\n );\r\n })}\r\n {error && \r\n \r\n {radio.label}\r\n \r\n \r\n
\r\n \r\n {isLoading &&
\r\n \r\n \r\n
\r\n {title}
\r\n{lead}
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n {importData?.loading &&
\r\n\r\n {importData.message}
}\r\n\r\n
\r\n \r\n \r\n {title}\r\n \r\n
\r\n {lead}
\r\n\r\n {isLoading &&
\r\n \r\n \r\n {title &&
\r\n );\r\n};\r\n\r\nRedaktorIntro.propTypes = {\r\n title: PropTypes.string,\r\n readOnlyBox: PropTypes.exact(RedaktorIntroReadOnly.propTypes),\r\n editBox: PropTypes.exact(RedaktorIntroEdit.propTypes),\r\n importBox: PropTypes.exact(RedaktorIntroImport.propTypes)\r\n};\r\n\r\nexport default RedaktorIntro;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Layout from '../layouts/redaktor-layout';\r\nimport RedaktorIntro from '../redaktor-intro/redaktor-intro';\r\nimport RedaktorGrensesnittContextProvider from '../../contexts/redaktor-grensesnitt-context-provider';\r\n\r\nconst RedktorIntroPage = ({ layout, redaktorIntro }) => {\r\n return (\r\n {title}
}\r\n\r\n {readOnlyBox && (\r\n setIsOpen('readOnly')}\r\n {...readOnlyBox}\r\n />\r\n )}\r\n {editBox && (\r\n setIsOpen('edit')}\r\n {...editBox}\r\n />\r\n )}\r\n {importBox && (\r\n setIsOpen('import')}\r\n {...importBox}\r\n />\r\n )}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nRoleOption.propTypes = {\r\n name: PropTypes.string, // excluded from backend\r\n onChange: PropTypes.func, // excluded from backend\r\n value: PropTypes.string.isRequired, // excluded from backend\r\n text: PropTypes.string,\r\n href: PropTypes.string\r\n};\r\n\r\nRoleOption.defaultProps = {\r\n onChange: () => {}\r\n};\r\n\r\nexport default RoleOption;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Clicker from '../clicker';\r\nimport RoleOption from './role-option';\r\n\r\nimport usePhrases from '../../hooks/use-phrases';\r\n\r\nconst RoleSelection = ({ title, lead, label, selections }) => {\r\n const [selectedHref, setSelectedHref] = useState('');\r\n\r\n const { continueOn } = usePhrases();\r\n\r\n const handleOnChange = href => {\r\n setSelectedHref(href);\r\n };\r\n\r\n return (\r\n \r\n onChange(href)}\r\n />\r\n
\r\n \r\n {title &&
\r\n );\r\n};\r\n\r\nRoleSelection.propTypes = {\r\n title: PropTypes.string.isRequired,\r\n lead: PropTypes.string.isRequired,\r\n label: PropTypes.string.isRequired,\r\n selections: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n text: PropTypes.string.isRequired,\r\n href: PropTypes.string.isRequired\r\n })\r\n )\r\n};\r\n\r\nRoleSelection.defaultProps = {\r\n selections: []\r\n};\r\n\r\nexport default RoleSelection;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport BasicLayout from '../layouts/basic-layout';\r\nimport RoleSelection from '../role-selection';\r\n\r\nconst RoleSelectionPage = ({ layout, roleSelection }) => {\r\n return (\r\n {title}
}\r\n {lead &&{lead}
}\r\n\r\n {label &&
\r\n {label}
}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {lead && (\r\n
\r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nSamtaleQuestionItem.propTypes = {\r\n question: PropTypes.shape({\r\n valueArray: PropTypes.arrayOf(PropTypes.string),\r\n value: PropTypes.string,\r\n maxLength: PropTypes.number, // maxLength is currently only used with type: 'textarray'\r\n id: PropTypes.string,\r\n type: PropTypes.oneOf(\r\n Object.values('textArray', 'textarea', 'numberGroup', 'checkbox', 'radio')\r\n ),\r\n isReadOnly: PropTypes.bool,\r\n removeValueLabelPrefix: PropTypes.string,\r\n questionText: PropTypes.string,\r\n hrefLink: PropTypes.exact(Clicker.link), // Used with textArray if readOnly\r\n placeholder: PropTypes.string,\r\n group: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n id: PropTypes.string.isRequired,\r\n label: PropTypes.string.isRequired,\r\n stringValue: PropTypes.string,\r\n boolValue: PropTypes.bool,\r\n placeholder: PropTypes.string\r\n })\r\n ),\r\n error: PropTypes.string // exclude from backend\r\n }),\r\n onChange: PropTypes.func.isRequired, // ignore backend\r\n onBlur: PropTypes.func, // ignore backend\r\n isDisabled: PropTypes.bool, // ignore backend\r\n readOnly: PropTypes.bool // ignore backend\r\n};\r\nSamtaleQuestionItem.defaultProps = {\r\n onChange: () => {}\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Layout from '../layouts/admin-layout';\r\nimport SchoolAdmin from '../admin/school-admin';\r\n\r\nconst SchoolAdminPage = ({ layout, admin }) => {\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nSearchInput.propTypes = {\r\n onBlur: PropTypes.func, //exclude from backend\r\n onChange: PropTypes.func, //exclude from backend\r\n onClick: PropTypes.func, //exclude from backend\r\n isDisabled: PropTypes.bool, //exclude from backend\r\n isLoading: PropTypes.bool, //exclude from backend\r\n buttonText: PropTypes.string,\r\n textInput: PropTypes.exact(TextInput.propTypes)\r\n};\r\n\r\nSearchInput.defaultProps = {\r\n onBlur: () => {},\r\n onChange: () => {},\r\n onClick: () => {}\r\n};\r\n\r\nexport default SearchInput;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\nimport Clicker from 'components/clicker/clicker';\r\n\r\nconst StatistikkNode = ({\r\n id,\r\n title,\r\n subTitle,\r\n singleTopNode,\r\n isFirstInList,\r\n statusOk,\r\n data,\r\n nodes,\r\n breadcrumbText,\r\n currentData,\r\n setCurrentData,\r\n statusIndicator,\r\n isExcluded,\r\n indent\r\n}) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n React.useEffect(() => {\r\n if (isFirstInList) {\r\n setCurrentData({\r\n id: id,\r\n data: data,\r\n statusOk,\r\n title: title,\r\n subTitle: subTitle,\r\n breadcrumbText\r\n });\r\n setIsOpen(true);\r\n }\r\n }, [isFirstInList]);\r\n\r\n const handleClick = () => {\r\n setCurrentData({\r\n id: id,\r\n data: data,\r\n statusOk,\r\n title: title,\r\n subTitle: subTitle,\r\n breadcrumbText\r\n });\r\n if (!singleTopNode) {\r\n setIsOpen(!isOpen);\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 {statusIndicator && (\r\n
\r\n {isOpen &&\r\n nodes?.map((node, i) => {\r\n return (\r\n {label}
\r\n{text}
\r\n \r\n );\r\n};\r\n\r\nStatistikkDataDisplayItem.propTypes = {\r\n ...StatistikkNode.LabelTextProps, // ignore backend\r\n isSingleItem: PropTypes.bool // ignore backend\r\n};\r\nexport default StatistikkDataDisplayItem;\r\n","import PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport StatistikkDataDisplayItem from './statistikk-data-display-item';\r\n\r\nconst StatistikkDataDisplay = ({ dataList, parentIndex }) => {\r\n if (!Array.isArray(dataList)) return null;\r\n if (dataList.length === 1) {\r\n return\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nStatistikkAdmin.propTypes = {\r\n title: PropTypes.string,\r\n filter: PropTypes.exact({\r\n title: PropTypes.string,\r\n detailedFilterLabel: PropTypes.string\r\n }),\r\n statusIndicator: PropTypes.bool,\r\n filterTitle: PropTypes.string,\r\n tabs: PropTypes.exact(Tabs.propTypes),\r\n nodes: PropTypes.arrayOf(PropTypes.shape(StatistikkNode.propTypes))\r\n};\r\n\r\nStatistikkAdmin.defaultProps = {\r\n showRemoveAction: true\r\n};\r\n\r\nexport default StatistikkAdmin;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Layout from '../layouts/admin-layout';\r\nimport StatistikkAdmin from '../statistikk-admin';\r\n\r\nconst StatistikkAdminPage = ({ layout, statistikk }) => {\r\n return (\r\n \r\n {title &&
\r\n\r\n {filter && (\r\n \r\n )}\r\n {title}
}\r\n\r\n
\r\n \r\n \r\n {newNodes.map((node, i) => (\r\n
\r\n {currentData && (\r\n \r\n
\r\n )}\r\n \r\n {currentData?.title && (\r\n
\r\n \r\n {currentData?.title}\r\n
\r\n )}\r\n\r\n {currentData?.breadcrumbText}\r\n
\r\n {currentData?.subTitle && (\r\n{currentData?.subTitle}
\r\n )}\r\n\r\n {currentData?.data.map((dataItem, i) => {\r\n if (!Array.isArray(dataItem)) return null;\r\n const removeNullArray = dataItem.filter(\r\n d => d.text || d.label\r\n );\r\n if (\r\n Array.isArray(removeNullArray) &&\r\n removeNullArray.length\r\n ) {\r\n return (\r\n
\r\n \r\n
\r\n {state?.errors && (\r\n \r\n {\r\n setValue(value);\r\n\r\n onChange(state.isValid);\r\n }}\r\n onBlur={() => {\r\n onBlur(state.isValid);\r\n }}\r\n />\r\n {state.isLoading && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n {state.message}\r\n
\r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nTextInputWithValidation.propTypes = {\r\n isValid: PropTypes.bool, // exclude from backend\r\n onBlur: PropTypes.func, // exclude from backend\r\n onChange: PropTypes.func, // exclude from backend\r\n onValidated: PropTypes.func, // exclude from backend\r\n isDisabled: PropTypes.bool, // exclude from backend\r\n maxLength: PropTypes.number, // exclude from backend\r\n theme: PropTypes.number, // exclude from backend\r\n textInput: PropTypes.exact(TextInput.propTypes),\r\n endpoint: PropTypes.string.isRequired,\r\n message: PropTypes.string,\r\n debounceTimeInMs: PropTypes.number,\r\n minCharacters: PropTypes.number\r\n};\r\n\r\nTextInputWithValidation.defaultProps = {\r\n onBlur: () => {},\r\n theme: TextInput.themes.default,\r\n onChange: () => {},\r\n onValidated: () => {},\r\n debounceTimeInMs: 500,\r\n minCharacters: 2,\r\n message: ''\r\n};\r\n\r\nTextInputWithValidation.themes = TextInput.themes;\r\n\r\nexport default TextInputWithValidation;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport colors from '../../js/topic-colors';\r\nimport { useWindowSize } from '../../hooks/useWindowSize';\r\nimport Clicker from 'components/clicker/clicker';\r\n\r\nconst themes = {\r\n horizontal: 'horizontal',\r\n vertical: 'vertical'\r\n};\r\n\r\n/**\r\n * On the chopping block\r\n */\r\n\r\nconst Timeline = ({ links, title, theme, color }) => {\r\n const { width } = useWindowSize();\r\n const { isMobile, isTablet, isDesktop } = useMemo(() => {\r\n return {\r\n isMobile: width < 768,\r\n isTablet: width > 768 && width < 1024,\r\n isDesktop: width > 1024\r\n };\r\n }, [width]);\r\n\r\n const amountOfItems = useMemo(\r\n () => (isMobile || isTablet ? 3 : isDesktop ? 5 : 5),\r\n [isMobile, isTablet, isDesktop]\r\n );\r\n\r\n const currentIndex = useMemo(() => {\r\n return links?.findIndex(link => link.isActive);\r\n }, [links]);\r\n\r\n const [modifier, setModifier] = useState(0);\r\n // const dependencyArray = [amountOfItems, links, currentIndex, modifier];\r\n\r\n const { displayedLinks, additionalModifier } = useMemo(() => {\r\n // if there's no use for an arrow in the timeline, return as-is\r\n if (links.length < amountOfItems) {\r\n return {\r\n displayedLinks: links.map((link, i) => ({ ...link, index: i })),\r\n additionalModifier: 0\r\n };\r\n }\r\n // currentIndex is the bolded item, while modifier is however many times a user pressed the next/prev arrow\r\n let indexWithModifier = currentIndex + modifier;\r\n // For different screens, different amount of items should be shown.\r\n // This value tells us how many times we should go to the sides of the currentIndex\r\n let spreadNumber = amountOfItems === 3 ? 1 : amountOfItems === 5 ? 2 : 0;\r\n\r\n let additionalModifier = 0,\r\n displayedLinks = [],\r\n remainingLinks = [];\r\n\r\n links\r\n .map((link, i) => ({ ...link, index: i })) // add an index to every item\r\n .forEach(link => {\r\n // Find which items should be displayed and not\r\n const lower = indexWithModifier >= link.index - spreadNumber;\r\n const higher = indexWithModifier <= link.index + spreadNumber;\r\n\r\n if (lower && higher) {\r\n displayedLinks.push(link);\r\n } else remainingLinks.push(link);\r\n });\r\n\r\n // If there's not enough items displayed (because currentIndex was too far to either side)\r\n if (displayedLinks.length !== amountOfItems) {\r\n const linksMissingAmount = amountOfItems - displayedLinks.length;\r\n\r\n const displayedIndexSum = displayedLinks.reduce(\r\n (num, link) => num + link?.index,\r\n 0\r\n );\r\n const remainingIndexSum = remainingLinks.reduce(\r\n (num, link) => num + link?.index,\r\n 0\r\n );\r\n\r\n // reduce are used here to find out if there's missing items at the beginning or end\r\n const missingLinksAtEnd = remainingIndexSum > displayedIndexSum;\r\n\r\n // If missing at the end we add to the end of the displayLinks\r\n if (displayedLinks.length) {\r\n if (missingLinksAtEnd) {\r\n additionalModifier = linksMissingAmount;\r\n\r\n const higherLinkDisplayed = displayedLinks[displayedLinks.length - 1];\r\n const linksToEnd = remainingLinks.filter(link => {\r\n return higherLinkDisplayed.index + linksMissingAmount >= link.index;\r\n });\r\n displayedLinks = displayedLinks.concat(linksToEnd);\r\n } else {\r\n // else we add to the beginning\r\n additionalModifier = -linksMissingAmount;\r\n\r\n const lowerLinkDisplayed = displayedLinks[0];\r\n const linksToStart = remainingLinks.filter(link => {\r\n return link.index >= lowerLinkDisplayed.index - linksMissingAmount;\r\n });\r\n displayedLinks = linksToStart.concat(displayedLinks);\r\n }\r\n }\r\n }\r\n // Return all the displayedLinks together with an additionalModifier which is used in the effect under\r\n return { displayedLinks, additionalModifier };\r\n }, [modifier, currentIndex, amountOfItems, links]);\r\n\r\n // This effect fixes a problem when currentIndex doesn't start in the middle, and clicking the prev/next arrows requires additional indexation\r\n useEffect(() => {\r\n setModifier(_modifier => _modifier + additionalModifier);\r\n }, [additionalModifier]);\r\n\r\n if (!links?.length) return null;\r\n return (\r\n <>\r\n {title && - \r\n {state.errors.map(({ text }, index) => {\r\n return
- {text} ;\r\n })}\r\n
{title}
}\r\n\r\n setModifier(modifier - 1)}\r\n />\r\n
\r\n )}\r\n\r\n - \r\n {displayedLinks.map(link => {\r\n return (\r\n
- \r\n \r\n\r\n \r\n{link.text}\r\n{link.description}\r\n \r\n );\r\n })}\r\n
\r\n setModifier(modifier + 1)}\r\n />\r\n
\r\n )}\r\n \r\n \r\n );\r\n};\r\n\r\nTimeline.propTypes = {\r\n theme: PropTypes.oneOf(Object.values(themes)), // ignore backend\r\n color: PropTypes.oneOf(Object.keys(colors)),\r\n title: PropTypes.string,\r\n links: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n text: PropTypes.string.isRequired,\r\n href: PropTypes.string.isRequired,\r\n description: PropTypes.string,\r\n isActive: PropTypes.bool\r\n })\r\n )\r\n};\r\n\r\nTimeline.defaultProps = {\r\n links: [],\r\n theme: themes.horizontal\r\n};\r\n\r\nTimeline.themes = themes;\r\n\r\nTimeline.colors = colors;\r\n\r\nexport default Timeline;\r\n","import PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport cn from 'classnames';\r\n\r\nconst themes = {\r\n lightBackground: 'lightBackground',\r\n darkBackground: 'darkBackground'\r\n};\r\n\r\n/**\r\n * On the chopping block\r\n */\r\n\r\nconst Toggler = ({\r\n leftText,\r\n rightText,\r\n isLeft,\r\n onToggle,\r\n isLarge,\r\n theme,\r\n href,\r\n endpoint,\r\n show\r\n}) => {\r\n const [currentIsLeft, setCurrentIsLeft] = React.useState(isLeft);\r\n const handleSlide = () => {\r\n setCurrentIsLeft(!currentIsLeft);\r\n setTimeout(() => {\r\n if (onToggle) {\r\n onToggle(currentIsLeft);\r\n }\r\n }, 500);\r\n };\r\n\r\n if (!show) return null;\r\n return (\r\n \r\n setAddModalIsOpen(true)\r\n }\r\n : undefined\r\n ]}\r\n showMenus={showMenus}\r\n />\r\n {isLoading && setAddModalIsOpen(false)}\r\n />\r\n )}\r\n {confirmationModalIsOpen && (\r\n setConfirmationModalIsOpen(false)}\r\n />\r\n )}\r\n
\r\n );\r\n};\r\n\r\nUndervisningsPersonell.propTypes = {\r\n content: PropTypes.exact(GridTableWrapper.propTypes),\r\n showMenus: PropTypes.bool,\r\n\r\n addButtonText: PropTypes.string,\r\n removeButtonText: PropTypes.string,\r\n\r\n removeEndpoint: PropTypes.string,\r\n confirmationModal: PropTypes.exact(ConfirmationModal.propTypes),\r\n\r\n addPersonellEndpoint: PropTypes.string,\r\n addBrukerrolleModal: PropTypes.exact(AddBrukerrolleModal.propTypes),\r\n roleAssignmentCode: PropTypes.string.isRequired,\r\n orgId: PropTypes.string\r\n};\r\n\r\nUndervisningsPersonell.defaultProps = {};\r\n\r\nexport default UndervisningsPersonell;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport MainLayout from 'components/main-layout/main-layout';\r\nimport StructuralLayout from 'components/structural-layout/structural-layout';\r\nimport UndervisningsPersonell from 'components/undervisnings-pesonell/undervisnings-pesonell';\r\n\r\nconst UndervisningsPersonellPage = ({\r\n structuralLayout,\r\n mainLayout,\r\n undervisningsPersonellContent\r\n}) => {\r\n return (\r\n