Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CocCommand showWorkspace output
[Trace - 12:31:46] Sending request 'initialize - (0)'.
Params: {
"processId": 26375,
"rootPath": "/home/channi16/imec/innovatrix",
"rootUri": "file:///home/channi16/imec/innovatrix",
"capabilities": {
"workspace": {
"applyEdit": true,
"workspaceEdit": {
"documentChanges": true,
"resourceOperations": [
"create",
"rename",
"delete"
],
"failureHandling": "textOnlyTransactional"
},
"didChangeConfiguration": {
"dynamicRegistration": true
},
"didChangeWatchedFiles": {
"dynamicRegistration": true
},
"symbol": {
"dynamicRegistration": true,
"symbolKind": {
"valueSet": [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26
]
},
"tagSupport": {
"valueSet": [
1
]
}
},
"executeCommand": {
"dynamicRegistration": true
},
"configuration": true,
"workspaceFolders": true
},
"textDocument": {
"publishDiagnostics": {
"relatedInformation": true,
"versionSupport": false,
"tagSupport": {
"valueSet": [
1,
2
]
}
},
"synchronization": {
"dynamicRegistration": true,
"willSave": true,
"willSaveWaitUntil": true,
"didSave": true
},
"completion": {
"dynamicRegistration": true,
"contextSupport": true,
"completionItem": {
"snippetSupport": true,
"commitCharactersSupport": true,
"documentationFormat": [
"markdown",
"plaintext"
],
"deprecatedSupport": true,
"preselectSupport": true
},
"completionItemKind": {
"valueSet": [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25
]
}
},
"hover": {
"dynamicRegistration": true,
"contentFormat": [
"markdown",
"plaintext"
]
},
"signatureHelp": {
"dynamicRegistration": true,
"signatureInformation": {
"documentationFormat": [
"markdown",
"plaintext"
],
"parameterInformation": {
"labelOffsetSupport": true
}
}
},
"definition": {
"dynamicRegistration": true
},
"references": {
"dynamicRegistration": true
},
"documentHighlight": {
"dynamicRegistration": true
},
"documentSymbol": {
"dynamicRegistration": true,
"symbolKind": {
"valueSet": [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26
]
},
"hierarchicalDocumentSymbolSupport": true,
"tagSupport": {
"valueSet": [
1
]
}
},
"codeAction": {
"dynamicRegistration": true,
"isPreferredSupport": true,
"codeActionLiteralSupport": {
"codeActionKind": {
"valueSet": [
"",
"quickfix",
"refactor",
"refactor.extract",
"refactor.inline",
"refactor.rewrite",
"source",
"source.organizeImports"
]
}
}
},
"codeLens": {
"dynamicRegistration": true
},
"formatting": {
"dynamicRegistration": true
},
"rangeFormatting": {
"dynamicRegistration": true
},
"onTypeFormatting": {
"dynamicRegistration": true
},
"rename": {
"dynamicRegistration": true,
"prepareSupport": true
},
"documentLink": {
"dynamicRegistration": true,
"tooltipSupport": true
},
"typeDefinition": {
"dynamicRegistration": true
},
"implementation": {
"dynamicRegistration": true
},
"declaration": {
"dynamicRegistration": true
},
"colorProvider": {
"dynamicRegistration": true
},
"foldingRange": {
"dynamicRegistration": true,
"rangeLimit": 5000,
"lineFoldingOnly": true
},
"selectionRange": {
"dynamicRegistration": true
}
},
"window": {
"workDoneProgress": true
}
},
"trace": "verbose",
"workspaceFolders": [
{
"uri": "file:///home/channi16/imec/innovatrix",
"name": "innovatrix"
}
],
"clientInfo": {
"name": "coc.nvim",
"version": "0.0.79"
}
}
[Trace - 12:31:46] Received notification 'window/logMessage'.
Params: {
"type": 3,
"message": "ESLint server running in node v12.18.4"
}
[Info - 12:31:46] ESLint server running in node v12.18.4
[Trace - 12:31:46] Received response 'initialize - (0)' in 63ms.
Result: {
"capabilities": {
"textDocumentSync": {
"openClose": true,
"change": 1,
"willSaveWaitUntil": true,
"save": {
"includeText": false
}
},
"codeActionProvider": true,
"executeCommandProvider": {
"commands": [
"eslint.applySingleFix",
"eslint.applySameFixes",
"eslint.applyAllFixes",
"eslint.applyAutoFix",
"eslint.applyDisableLine",
"eslint.applyDisableFile",
"eslint.openRuleDoc"
]
}
}
}
[Trace - 12:31:46] Sending notification 'initialized'.
Params: {}
[Trace - 12:31:46] Sending notification 'workspace/didChangeConfiguration'.
Params: {
"settings": {
"eslint": {
"enable": true,
"quiet": false,
"trace": {
"server": "verbose"
},
"execArgv": [],
"filetypes": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"packageManager": "npm",
"run": "onType",
"autoFix": true,
"options": {},
"autoFixOnSave": false,
"autoFixSkipRules": [],
"codeAction": {
"disableRuleComment": {
"enable": true,
"location": "separateLine"
},
"showDocumentation": {
"enable": true
}
}
}
}
}
[Trace - 12:31:46] Sending notification 'textDocument/didOpen'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"languageId": "javascriptreact",
"version": 1,
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
}
[Trace - 12:31:46] Received request 'client/registerCapability - (0)'.
Params: {
"registrations": [
{
"id": "bae11222-b138-4014-980d-f201b30d703e",
"method": "workspace/didChangeConfiguration",
"registerOptions": {}
}
]
}
[Trace - 12:31:46] Sending response 'client/registerCapability - (0)'. Processing request took 0ms
No result returned.
[Trace - 12:31:46] Received request 'workspace/configuration - (1)'.
Params: {
"items": [
{
"scopeUri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"section": ""
}
]
}
[Trace - 12:31:46] Sending response 'workspace/configuration - (1)'. Processing request took 1ms
Result: [
{
"packageManager": "npm",
"quiet": false,
"validate": true,
"autoFix": true,
"autoFixOnSave": false,
"autoFixSkipRules": [],
"options": {},
"run": "onType",
"workspaceFolder": {
"uri": "file:///home/channi16/imec/innovatrix",
"name": "innovatrix"
},
"codeAction": {
"disableRuleComment": {
"enable": true,
"location": "separateLine"
},
"showDocumentation": {
"enable": true
}
}
}
]
[Trace - 12:31:47] 'npm config get prefix' value is: /usr
[Trace - 12:31:47] Received notification 'window/logMessage'.
Params: {
"type": 3,
"message": "ESLint library loaded from: /home/channi16/imec/innovatrix/images/front/node_modules/eslint/lib/api.js"
}
[Info - 12:31:47] ESLint library loaded from: /home/channi16/imec/innovatrix/images/front/node_modules/eslint/lib/api.js
[Trace - 12:31:48] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": []
}
[Trace - 12:37:29] Sending notification 'textDocument/didOpen'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/styles.js",
"languageId": "javascriptreact",
"version": 1,
"text": "import { css } from 'glamor';\n\nimport { DANGER, FOCUS, WHITE, PRIMARY, GREY_LIGHT_1, GREY_LIGHT_2 } from '../../../../../styles';\n\nexport const circleStyles = css({ fontSize: 8, height: 8, margin: 0, marginRight: 12, marginTop: 10 });\n\nexport const errorStyles = css({\n color: DANGER,\n fontSize: 12,\n fontStyle: 'italic',\n margin: 0,\n marginBottom: 12,\n});\n\nexport const crossStyles = css({\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n});\n\nexport const autoCompleteStyles = css({\n marginLeft: 30,\n height: 40,\n width: 'calc(100% - 40px)',\n '> div > input': {\n backgroundColor: WHITE,\n color: PRIMARY,\n height: 40,\n minWidth: 250,\n fontSize: 16,\n width: '100%',\n paddingLeft: 10,\n paddingBottom: 2,\n borderRadius: 3,\n border: `1px solid ${GREY_LIGHT_2}`,\n outline: 0,\n opacity: 1,\n overflow: 'hidden',\n '::placeholder': {\n color: PRIMARY,\n fontSize: 14,\n fontStyle: 'italic',\n opacity: 0.7,\n },\n ':hover': {\n backgroundColor: GREY_LIGHT_1,\n borderRadius: 2,\n transition: 'background-color 0.3s',\n },\n ':focus': {\n border: `1px solid ${FOCUS}`,\n backgroundColor: GREY_LIGHT_1,\n transition: 'background-color 0.3s',\n }\n },\n '.disabled > div > input': {\n //color: PRIMARY,\n //backgroundColor: WHITE,\n border: 0,\n cursor: 'default',\n ':hover': {\n backgroundColor: WHITE\n }\n }\n});\n"
}
}
[Trace - 12:37:29] Received request 'workspace/configuration - (2)'.
Params: {
"items": [
{
"scopeUri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/styles.js",
"section": ""
}
]
}
[Trace - 12:37:29] Sending response 'workspace/configuration - (2)'. Processing request took 0ms
Result: [
{
"packageManager": "npm",
"quiet": false,
"validate": true,
"autoFix": true,
"autoFixOnSave": false,
"autoFixSkipRules": [],
"options": {},
"run": "onType",
"workspaceFolder": {
"uri": "file:///home/channi16/imec/innovatrix",
"name": "innovatrix"
},
"codeAction": {
"disableRuleComment": {
"enable": true,
"location": "separateLine"
},
"showDocumentation": {
"enable": true
}
}
}
]
[Trace - 12:37:29] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/styles.js",
"diagnostics": []
}
[Trace - 12:41:55] Sending notification 'textDocument/didOpen'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/pages/modals/FormModal.jsx",
"languageId": "javascriptreact",
"version": 1,
"text": "import PropTypes from 'prop-types';\nimport React, { PureComponent, Fragment } from 'react';\nimport ReactModal from 'react-modal';\nimport MoreIcon from '@innovatrix/icons/MoreIcon';\nimport { Title, Paragraph } from '@innovatrix/common/text';\nimport Dropdown from '@innovatrix/common/dropdown';\nimport styled from '@emotion/styled';\nimport { GREY_LIGHT_3, WHITE } from '@innovatrix/styles';\n\nimport Cross from './Cross';\nimport './modalAnimation.scss';\nimport BreadCrumbs from './BreadCrumbs';\n\nconst stopPropagation = (e) => {\n e.stopPropagation();\n};\n\nconst Wrapper = styled.div`\n height: 100%;\n`;\n\nconst StyledDropdown = styled(Dropdown)`\n > div > button {\n padding: 10px 11px;\n }\n`;\n\nconst Header = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n padding: 24px 32px 12px;\n`;\n\nconst Heading = styled.div`\n align-items: center;\n display: flex;\n width: 90%;\n`;\n\nconst Subtitle = styled(Paragraph)`\n color: ${({ theme }) => theme.colors.grey2};\n margin-right: 8px;\n max-width: 160px;\n text-transform: uppercase;\n width: auto;\n`;\n\nconst ModalTitle = styled(Title)`\n margin-bottom: 0;\n`;\n\nconst CloseIcon = styled(Cross)`\n &:hover {\n cursor: pointer;\n > path {\n opacity: 0.6;\n transition: 0.3s;\n }\n }\n`;\n\nconst Body = styled.div`\n ${({ theme }) => theme.scrollbar.large};\n max-height: 60vh;\n overflow-y: auto;\n padding: 0 32px 24px;\n width: 100%;\n\n > .form-group {\n margin-bottom: 8px;\n }\n`;\n\nconst ErrorMessage = styled.div`\n align-items: center;\n background-color: ${({ theme }) => theme.colors.warning};\n border: 1px solid ${({ theme }) => theme.colors.warning};\n border-radius: 2px;\n color: ${({ theme }) => theme.colors.white};\n display: flex;\n height: 46px;\n justify-content: space-between;\n margin: 0 24px 18px 24px;\n padding: 6px 16px 6px 24px;\n`;\n\nconst modalStyles = (width) => ({\n overlay: {\n alignItems: 'center',\n backgroundColor: 'rgba(0, 0, 0, 0.65)',\n bottom: 0,\n display: 'flex',\n justifyContent: 'center',\n left: 0,\n position: 'fixed',\n right: 0,\n top: 0,\n zIndex: 100,\n },\n content: {\n backgroundColor: WHITE,\n border: `1px solid ${GREY_LIGHT_3}`,\n borderRadius: 3,\n bottom: 0,\n boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.5)',\n left: 0,\n maxHeight: '90vh',\n maxWidth: width,\n minWidth: 450,\n outline: 0,\n overflow: 'visible',\n padding: 0,\n position: 'relative',\n right: 0,\n top: 0,\n width: '100%',\n },\n});\n\nexport class FormModal extends PureComponent {\n\n static propTypes = {\n bodyStyles: PropTypes.any,\n breadCrumbs: PropTypes.arrayOf(PropTypes.string),\n // node for Body Content\n children: PropTypes.node,\n className: PropTypes.any,\n contentLabel: PropTypes.string,\n contentRef: PropTypes.func,\n // error\n error: PropTypes.string,\n // node for Footer Content\n footerContent: PropTypes.node,\n isOpen: PropTypes.bool,\n // Function for closing the modal\n moreDisabled: PropTypes.bool,\n moreOptions: PropTypes.array,\n onClose: PropTypes.func.isRequired,\n onSubmit: PropTypes.func,\n renderCustomHeader: PropTypes.func,\n styles: PropTypes.any,\n subTitle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),\n // Main title in Header\n title: PropTypes.string,\n //via \"width\" property we can change the width of the modal\n width: PropTypes.number,\n };\n\n static defaultProps = {\n children: null,\n footerContent: null,\n isOpen: true,\n contentLabel: '',\n subTitle: '',\n title: '',\n onSubmit: null,\n width: 700,\n };\n\n constructor(props) {\n super(props);\n this.onExplicitClose = this.onExplicitClose.bind(this);\n this.onImplicitClose = this.onImplicitClose.bind(this);\n this.toggleDropdownMenu = this.toggleDropdownMenu.bind(this);\n this.closeDropdownMenu = this.closeDropdownMenu.bind(this);\n }\n\n state = { isDropdownMenuOpen: false };\n\n componentDidMount() {\n this._isMounted = true;\n }\n\n componentWillUnmount() {\n this._isMounted = false;\n }\n\n closeDropdownMenu() {\n if (this._isMounted) {\n // The modal can be closed before the dropdown is closed, so watch out!\n // The component should still be mounted to close the dropdown.\n this.setState({ isDropdownMenuOpen: false });\n }\n }\n\n toggleDropdownMenu() {\n this.setState({ isDropdownMenuOpen: !this.state.isDropdownMenuOpen });\n }\n\n onExplicitClose() {\n this.props.onClose(true);\n }\n\n onImplicitClose(e) {\n // Pressing escape is an explicit close.\n // Clicking outside the modal is an implicit close.\n const isExplicitClose = e.type === 'keydown';\n this.props.onClose(isExplicitClose);\n }\n\n render() {\n const {\n breadCrumbs, contentRef, contentLabel,\n isOpen, subTitle, title, onSubmit, width, className, renderCustomHeader,\n error, moreOptions, moreDisabled,\n } = this.props;\n\n const style = modalStyles(width);\n\n return (\n <ReactModal\n contentRef={contentRef}\n ariaHideApp={false}\n closeTimeoutMS={500}\n contentLabel={contentLabel}\n isOpen={isOpen}\n onRequestClose={this.onImplicitClose}\n style={style}\n >\n <Wrapper\n className={className}\n onClick={stopPropagation}\n >\n <form onSubmit={onSubmit}>\n <Header>\n <Heading>\n {subTitle ?\n <Subtitle small>{subTitle}</Subtitle>\n : breadCrumbs && <BreadCrumbs breadCrumbs={breadCrumbs} />}\n <ModalTitle title={title}>{title}</ModalTitle>\n </Heading>\n <Fragment>\n {renderCustomHeader && renderCustomHeader()}\n {moreOptions &&\n <StyledDropdown\n left\n options={moreOptions}\n disabled={moreDisabled}\n icon={<MoreIcon />}\n caret={false}\n />}\n </Fragment>\n <CloseIcon onClick={this.onExplicitClose} />\n </Header>\n {error && (\n <ErrorMessage>{error}</ErrorMessage>\n )}\n <Body className=\"body\">\n {this.props.children}\n </Body>\n {this.props.footerContent}\n </form>\n </Wrapper>\n </ReactModal>\n );\n }\n\n}\n\nexport const PlainModal = ({\n children, className, contentLabel, contentRef,\n isOpen, onSubmit, width\n}) => {\n const style = React.useMemo(() => modalStyles(width), [width]);\n\n const onImplicitClose = React.useCallback(() => {\n // This is just a stub for the moment\n }, []);\n\n return (\n <ReactModal\n contentRef={contentRef}\n className={className}\n ariaHideApp={false}\n closeTimeoutMS={500}\n contentLabel={contentLabel}\n isOpen={isOpen}\n onRequestClose={onImplicitClose}\n style={style}\n >\n <Wrapper onClick={stopPropagation}>\n <form onSubmit={onSubmit}>\n <Body className=\"body\">\n {children ? children : null}\n </Body>\n </form>\n </Wrapper>\n </ReactModal>\n );\n};\n\nPlainModal.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n contentLabel: PropTypes.string,\n contentRef: PropTypes.func,\n isOpen: PropTypes.bool,\n onSubmit: PropTypes.func.isRequired,\n width: PropTypes.number,\n};\n\nPlainModal.defaultProps = {\n className: '',\n isOpen: false,\n width: 700,\n};\n"
}
}
[Trace - 12:41:55] Received request 'workspace/configuration - (3)'.
Params: {
"items": [
{
"scopeUri": "file:///home/channi16/imec/innovatrix/images/front/source/pages/modals/FormModal.jsx",
"section": ""
}
]
}
[Trace - 12:41:55] Sending response 'workspace/configuration - (3)'. Processing request took 0ms
Result: [
{
"packageManager": "npm",
"quiet": false,
"validate": true,
"autoFix": true,
"autoFixOnSave": false,
"autoFixSkipRules": [],
"options": {},
"run": "onType",
"workspaceFolder": {
"uri": "file:///home/channi16/imec/innovatrix",
"name": "innovatrix"
},
"codeAction": {
"disableRuleComment": {
"enable": true,
"location": "separateLine"
},
"showDocumentation": {
"enable": true
}
}
}
]
[Trace - 12:41:55] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/pages/modals/FormModal.jsx",
"diagnostics": []
}
[Trace - 12:42:03] Sending notification 'textDocument/didOpen'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/pages/modals/Cross.jsx",
"languageId": "javascriptreact",
"version": 1,
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Cross = ({ color = '#3c3c3b', onClick, className, styles = {} }) => (\n <svg className={className} onClick={onClick} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" {...styles}>\n <path fill={color} d=\"M24 2.4L14.4 12l9.6 9.6-2.4 2.4-9.6-9.6L2.4 24 0 21.6 9.6 12 0 2.4 2.4 0 12 9.6 21.6 0z\" opacity=\".495\" />\n </svg>\n);\n\nCross.propTypes = {\n className: PropTypes.string,\n color: PropTypes.string,\n onClick: PropTypes.func.isRequired,\n styles: PropTypes.object,\n};\n\nexport default Cross;\n"
}
}
[Trace - 12:42:03] Received request 'workspace/configuration - (4)'.
Params: {
"items": [
{
"scopeUri": "file:///home/channi16/imec/innovatrix/images/front/source/pages/modals/Cross.jsx",
"section": ""
}
]
}
[Trace - 12:42:03] Sending response 'workspace/configuration - (4)'. Processing request took 0ms
Result: [
{
"packageManager": "npm",
"quiet": false,
"validate": true,
"autoFix": true,
"autoFixOnSave": false,
"autoFixSkipRules": [],
"options": {},
"run": "onType",
"workspaceFolder": {
"uri": "file:///home/channi16/imec/innovatrix",
"name": "innovatrix"
},
"codeAction": {
"disableRuleComment": {
"enable": true,
"location": "separateLine"
},
"showDocumentation": {
"enable": true
}
}
}
]
[Trace - 12:42:03] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/pages/modals/Cross.jsx",
"diagnostics": []
}
[Trace - 12:42:28] Sending notification 'textDocument/didOpen'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/intakes/IntakeList.jsx",
"languageId": "javascriptreact",
"version": 1,
"text": "import React from 'react';\nimport styled from '@emotion/styled';\nimport PropTypes from 'prop-types';\nimport { Title, Paragraph } from '@innovatrix/common/text';\nimport LargeListItem from '@innovatrix/common/lists/LargeListItem';\nimport moment from 'moment';\nimport { Button } from '@innovatrix/common/buttons';\nimport ArrowIcon from '@innovatrix/icons/ArrowIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport { TURQUOISE, GREY_1 } from '@innovatrix/styles';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport { useHistory } from 'react-router';\nimport {\n DRAFT_INTAKE,\n OPEN_INTAKE,\n SUBMITTED_INTAKE\n} from '@innovatrix/common/intakes/_constants';\n\nimport {\n Questions,\n NavigationBar,\n} from './Common';\n\nconst DataBottom = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: initial;\n margin-top: 16px;\n width: auto;\n\n @media (max-width: 900px) {\n justify-content: center;\n width: 100%;\n }\n`;\n\nconst CallsContainer = styled.div`\n margin-left: 32px;\n margin-right: 64px;\n margin-top: 95px;\n\n @media (max-width: 900px) {\n margin-top: 16px;\n }\n`;\n\nconst SectionContainer = styled.div`\n > div {\n margin-bottom: 32px;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n`;\n\nconst NoCallsTitle = styled(Title)`\n font-style: italic;\n margin-left: 32px;\n margin-top: 95px;\n\n @media (max-width: 900px) {\n margin-top: 16px;\n }\n`;\n\nconst OlderCallsTitle = styled(Title)`\n margin-bottom: 16px;\n ${({ hasOpenCalls }) => (hasOpenCalls ? `\n margin-top: 32px;\n ` : '')}\n`;\n\nconst CallStatusContainer = styled.div`\n align-items: flex-end;\n display: flex;\n flex-direction: column;\n margin-right: 0;\n\n > * {\n margin-bottom: 8px;\n }\n`;\n\nconst Label = styled(Paragraph)`\n color: ${({ theme }) => theme.colors.grey2};\n`;\n\nconst ErrorLabel = styled(Paragraph)`\n color ${({ theme }) => theme.colors.warning};\n font-style: italic;\n`;\n\nconst IntakeList = ({ calls }) => {\n const now = moment().format('YYYY-MM-DD');\n const history = useHistory();\n\n const goToIntakeForm = (id) => {\n history.push(`/apply/${id}`);\n };\n\n const deadlineHasNotPassed = (call) => {\n return call.deadline && moment(call.deadline).isSameOrAfter(now);\n };\n\n return (\n <React.Fragment>\n <NavigationBar title=\"Select a call to apply\">\n <DataBottom>\n {/* Only show openCalls data when there effectively are open calls */}\n {calls.openCalls.length > 0 ? (\n <React.Fragment>\n {calls.openCalls.length === 1 ? (\n <React.Fragment>\n <Paragraph>{calls.openCalls[0].name} is now open.</Paragraph>\n <Paragraph>Subscribe before {moment(calls.openCalls[0].deadline).format('DD MMMM YYYY')}</Paragraph>\n </React.Fragment>\n ) : (\n <Paragraph>{calls.openCalls.map(c => c.name).join(', ')} are now open.</Paragraph>\n )}\n </React.Fragment>\n ) : null}\n </DataBottom>\n </NavigationBar>\n <Questions>\n <SectionContainer>\n {calls.openCalls.length === 0 ? (\n <NoCallsTitle size=\"h2\">No open calls for the moment</NoCallsTitle>\n ) : null}\n {calls.openCalls.length > 0 ? (\n <CallsContainer>\n {calls.openCalls.map(call => (\n <LargeListItem\n key={call.id}\n label={`Deadline ${moment(call.deadline).format('DD MMMM YYYY')}`}\n onClick={call.status === SUBMITTED_INTAKE ? () => goToIntakeForm(call.id) : null}\n readMode\n title={call.name}\n rightItemComponent={(\n <React.Fragment>\n {/* hide the button when the deadline has already passed */}\n {call.status === OPEN_INTAKE && deadlineHasNotPassed(call) ? (\n <Button\n flavor=\"primary\"\n icon={<ArrowIcon />}\n label=\"Apply\"\n onClick={() => goToIntakeForm(call.id)}\n />\n ) : null}\n {/* hide the button when the deadline has already passed */}\n {call.status === DRAFT_INTAKE && deadlineHasNotPassed(call) ? (\n <Button\n flavor=\"secondary\"\n icon={<ArrowIcon />}\n label=\"Continue\"\n onClick={() => goToIntakeForm(call.id)}\n />\n ) : null}\n {call.status === SUBMITTED_INTAKE ? (\n <CallStatusContainer>\n <CheckIcon color={TURQUOISE} height=\"32\" width=\"32\" />\n <Label>Applied {call.submittedOn ? moment(call.submittedOn).format('DD/MM/YYYY') : '-'}</Label>\n </CallStatusContainer>\n ) : null}\n </React.Fragment>\n )}\n />\n ))}\n {calls.closedCalls.length > 0 ? (\n <React.Fragment>\n <OlderCallsTitle size=\"h2\" hasOpenCalls={calls.openCalls.length > 0}>Older calls</OlderCallsTitle>\n {calls.closedCalls.map(call => (\n <LargeListItem\n key={call.id}\n label={`Deadline ${moment(call.deadline).format('DD MMMM YYYY')}`}\n readMode\n title={call.name}\n rightItemComponent={(\n <React.Fragment>\n {call.status === SUBMITTED_INTAKE ? (\n <CallStatusContainer>\n <CheckIcon color={TURQUOISE} height=\"32\" width=\"32\" />\n <Label>Applied {call.submittedOn ? moment(call.submittedOn).format('DD/MM/YYYY') : '-'}</Label>\n </CallStatusContainer>\n ) : null}\n {call.status === DRAFT_INTAKE ? (\n <CallStatusContainer>\n <CloseIcon color={GREY_1} height=\"24\" width=\"24\" />\n <ErrorLabel>Did not submit</ErrorLabel>\n </CallStatusContainer>\n ) : null}\n </React.Fragment>\n )}\n />\n ))}\n </React.Fragment>\n ) : null}\n </CallsContainer>\n ) : null}\n </SectionContainer>\n </Questions>\n </React.Fragment>\n );\n};\n\nIntakeList.propTypes = {\n calls: PropTypes.object.isRequired,\n};\n\nexport default IntakeList;\n"
}
}
[Trace - 12:42:28] Received request 'workspace/configuration - (5)'.
Params: {
"items": [
{
"scopeUri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/intakes/IntakeList.jsx",
"section": ""
}
]
}
[Trace - 12:42:28] Sending response 'workspace/configuration - (5)'. Processing request took 1ms
Result: [
{
"packageManager": "npm",
"quiet": false,
"validate": true,
"autoFix": true,
"autoFixOnSave": false,
"autoFixSkipRules": [],
"options": {},
"run": "onType",
"workspaceFolder": {
"uri": "file:///home/channi16/imec/innovatrix",
"name": "innovatrix"
},
"codeAction": {
"disableRuleComment": {
"enable": true,
"location": "separateLine"
},
"showDocumentation": {
"enable": true
}
}
}
]
[Trace - 12:42:28] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/intakes/IntakeList.jsx",
"diagnostics": []
}
[Trace - 12:43:27] Sending notification 'textDocument/didOpen'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/public/intakes/register.jsx",
"languageId": "javascriptreact",
"version": 1,
"text": "import React from 'react';\nimport styled from '@emotion/styled';\nimport { Title, Paragraph, Body } from '@innovatrix/common/text';\nimport { Button } from '@innovatrix/common/buttons';\nimport { Form, Formik } from 'formik';\nimport PropTypes from 'prop-types';\nimport { StringField, SelectField } from '@innovatrix/common/fields';\nimport AsteriskIcon from '@innovatrix/icons/AsterixIcon';\nimport { WARNING, GREY_2, TURQUOISE } from '@innovatrix/styles';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport { useHistory, Redirect } from 'react-router';\nimport * as yup from 'yup';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport graphql from '@innovatrix/common/graphql';\nimport { MessageBar } from '@innovatrix/components';\n\nimport innovatrixLogo from '../../../assets/innovatrix-logo2.png';\n\nimport { registerCampaignUser } from './_queries';\n\n// -- Registration form --------------- --- -- -\nconst FormWrapper = styled.div`\n background-color: ${({ theme }) => theme.colors.white};\n border-radius: 3px;\n border: 1px solid ${({ theme }) => theme.colors.greyLight3};\n width: 700px;\n`;\n\nconst Header = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n padding: 24px 32px 12px;\n`;\n\nconst Heading = styled.div`\n align-items: center;\n display: flex;\n width: 90%;\n`;\n\nconst ModalTitle = styled(Title)`\n margin-bottom: 0;\n`;\n\nconst SubTitle = styled(Paragraph)`\n color: ${({ theme }) => theme.colors.grey2};\n margin-right: 8px;\n max-width: 160px;\n text-transform: uppercase;\n width: auto;\n`;\n\nconst BodyContainer = styled.div`\n ${({ theme }) => theme.scrollbar.large};\n max-height: 500px;\n overflow-y: auto;\n padding: 0 32px 24px;\n width: 100%;\n\n > div {\n margin-bottom: 8px;\n }\n\n > div:last-of-type {\n margin-bottom: 0;\n }\n`;\n\nconst Footer = styled.div`\n border-top: 1px solid ${({ theme }) => theme.colors.greyLight3};\n display: flex;\n justify-content: space-between;\n padding: 16px 32px;\n width: 100%;\n`;\n\nconst InputWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n\n > div {\n flex-basis: 48%;\n }\n`;\n\nconst salutations = [{\n label: 'Mr',\n value: 'Mr',\n}, {\n label: 'Ms',\n value: 'Ms',\n}, {\n label: 'Mrs',\n value: 'Mrs'\n}];\n\nconst Label = styled(Paragraph)`\n color: ${({ theme, error }) => (error ? theme.colors.warning : theme.colors.grey2)};\n display: inline-block;\n font-size: 12px;\n position: relative;\n text-transform: uppercase;\n`;\n\nconst RequiredIcon = styled(AsteriskIcon)`\n position: absolute;\n right: -10px;\n top: 0;\n`;\n\nconst Cross = styled(CloseIcon)`\n &:hover {\n cursor: pointer;\n > path {\n opacity: 0.6;\n transition: 0.3s;\n }\n }\n`;\n\nconst InnovatrixLogo = styled.img`\n height: 50px;\n margin: 0 auto;\n position: absolute;\n top: 64px;\n`;\n\nconst RegisterForm = ({\n campaign, goToFirstStep, goToNextStep,\n registerError, registerUser,\n setRegisterError, step, validationSchema,\n}) => {\n const history = useHistory();\n\n const { name, id, callClosed } = campaign;\n\n // Call is closed, so let's redirect to the welcome screen instead of\n // showing the register form!\n if (callClosed) {\n return <Redirect to={`/public/apply/${name}`} />;\n }\n\n const goBack = () => {\n history.push(`/public/apply/${name}`);\n };\n\n const goToIntake = () => {\n history.push(`/apply/${id}`);\n };\n\n return (\n <React.Fragment>\n <InnovatrixLogo src={innovatrixLogo} alt=\"innovatrix logo\" />\n <Formik\n enableReinitialize\n onSubmit={(values, { resetForm, setTouched }) => {\n // This is the final interactive step of the register form\n // Here we will submit the data, and do some error handling\n if (step === 1) {\n // Create account\n registerUser({\n campaignId: id,\n user: {\n ...values,\n },\n callback: (err, data) => {\n if (err) {\n console.log(err);\n setRegisterError('UNKNOWN_ERROR');\n }\n else {\n if (data.id === 'USER_ALREADY_EXISTS') {\n // Show error, go to step 0\n setRegisterError(data.id);\n goToFirstStep();\n return;\n }\n if (data.id === 'UNKNOWN_ERROR') {\n // Only show the error\n setRegisterError(data.id);\n return;\n }\n\n // Everything checks out...\n // Clear any errors and\n // go to the final step (success view)\n resetForm();\n setRegisterError('');\n goToNextStep();\n }\n },\n });\n }\n // If we're on step 0, we just go to the next step\n else {\n setTouched({});\n goToNextStep();\n }\n }}\n initialValues={{\n confirmPassword: '',\n email: '',\n firstName: '',\n lastName: '',\n linkedIn: '',\n password: '',\n phone: '',\n role: '',\n salutation: '',\n }}\n validationSchema={validationSchema}\n >\n {({ handleSubmit, submitForm, errors }) => (\n <Form onSubmit={handleSubmit}>\n <FormWrapper>\n <Header>\n <Heading>\n <SubTitle>Sign up</SubTitle>\n <ModalTitle>Complete your profile</ModalTitle>\n </Heading>\n <Cross onClick={goBack} color={GREY_2} />\n </Header>\n <BodyContainer>\n <Body>\n Welcome to Innovatrix!<br />\n In order to sign up, we need some more information about you.\n </Body>\n {registerError === 'USER_ALREADY_EXISTS' ? (\n <MessageBar\n isOpen\n type=\"warning\"\n >\n This user already exists. Login instead or sign-up with another email.\n </MessageBar>\n ) : null}\n {registerError === 'UNKNOWN_ERROR' ? (\n <MessageBar\n isOpen\n type=\"warning\"\n >\n An error occurred while registering. Please refresh the page and try again.\n </MessageBar>\n ) : (\n <React.Fragment>\n {step === 0 ? (\n <React.Fragment>\n <StringField\n fieldId=\"email\"\n label=\"Email\"\n placeholder=\"Enter email\"\n type=\"email\"\n required\n />\n <StringField\n fieldId=\"password\"\n label=\"Password\"\n placeholder=\"Enter password\"\n type=\"password\"\n required\n />\n <StringField\n fieldId=\"confirmPassword\"\n label=\"Repeat password\"\n placeholder=\"Repeat password\"\n type=\"password\"\n required\n />\n </React.Fragment>\n ) : null}\n {step === 1 ? (\n <React.Fragment>\n <div>\n <Label error={errors.salutation}>\n Salutation\n <RequiredIcon color={WARNING} height=\"5\" width=\"5\" />\n </Label>\n <SelectField\n fieldId=\"salutation\"\n label=\"Salutation\"\n options={salutations}\n placeholder=\"Select\"\n required\n width=\"100px\"\n />\n </div>\n <InputWrapper>\n <StringField\n fieldId=\"firstName\"\n label=\"First Name\"\n placeholder=\"First Name\"\n required\n />\n <StringField\n fieldId=\"lastName\"\n label=\"Last Name\"\n placeholder=\"Last Name\"\n required\n />\n </InputWrapper>\n <StringField\n fieldId=\"phone\"\n label=\"Phone Nr\"\n placeholder=\"Phone Nr\"\n required\n />\n <StringField\n fieldId=\"role\"\n label=\"Role\"\n placeholder=\"Enter your role within the team\"\n />\n <StringField\n fieldId=\"linkedIn\"\n label=\"Link to LinkedIn Profile\"\n placeholder=\"https://www.linkedin.com/in/[linkedin username]\"\n />\n </React.Fragment>\n ) : null}\n </React.Fragment>\n )}\n </BodyContainer>\n {registerError === 'UNKNOWN_ERROR' ? null : (\n <Footer>\n <Button\n flavor=\"textButton\"\n label=\"Already have an account?\"\n onClick={goToIntake}\n />\n <Button\n flavor=\"primary\"\n label={step === 0 ? 'Next' : 'Submit'}\n onClick={submitForm}\n />\n </Footer>\n )}\n </FormWrapper>\n </Form>\n )}\n </Formik>\n </React.Fragment>\n );\n};\n\nRegisterForm.propTypes = {\n campaign: PropTypes.object.isRequired,\n goToFirstStep: PropTypes.func.isRequired,\n goToNextStep: PropTypes.func.isRequired,\n registerError: PropTypes.string.isRequired,\n registerUser: PropTypes.func.isRequired,\n setRegisterError: PropTypes.func.isRequired,\n step: PropTypes.number.isRequired,\n validationSchema: PropTypes.object.isRequired,\n};\n\n// ValidationSchemas for each step\nconst validationsSchemas = {\n 0: yup.object().shape({\n confirmPassword: yup.string().oneOf([yup.ref('password')], 'Passwords don\\'t match.').required('Password confirmation is required.'),\n email: yup.string().email().required('Please enter your email.'),\n password: yup.string().required('Password is required.').min(10, 'Password should at least be 10 characters long.'),\n }),\n 1: yup.object().shape({\n firstName: yup.string().required(),\n lastName: yup.string().required(),\n linkedIn: yup.string(),\n phone: yup.string().required(),\n role: yup.string(),\n salutation: yup.string().required(),\n })\n};\n\nconst SignUpSuccessWrapper = styled.div`\n background-color: ${({ theme }) => theme.colors.white};\n border-radius: 3px;\n padding: 32px 48px;\n position: relative;\n width: 500px;\n`;\n\nconst SignUpSuccessBody = styled(Body)`\n margin-bottom: 32px;\n`;\n\nconst SignUpSuccessTitle = styled(Title)`\n color: ${({ theme }) => theme.colors.primary};\n margin-bottom: 32px;\n padding-bottom: 8px;\n position: relative;\n\n &::after {\n background-color: ${({ theme }) => theme.colors.primary};\n bottom: 0;\n content: \"\";\n height: 3px;\n left: 0;\n position: absolute;\n width: 10%;\n }\n`;\n\nconst Check = styled(CheckIcon)`\n height: 150px;\n position: absolute;\n right: 0;\n top: -70px;\n width: 150px;\n`;\n\nconst SignUpSuccess = ({ campaign }) => {\n const history = useHistory();\n\n const goToIntake = () => {\n history.push(`/apply/${campaign.id}`);\n };\n\n return (\n <SignUpSuccessWrapper>\n <Check color={TURQUOISE} />\n <SignUpSuccessTitle size=\"h2\" weight=\"bold\">\n Welcome aboard!\n </SignUpSuccessTitle>\n <SignUpSuccessBody>\n Account successfully created.<br />\n Check your email and confirm your email address.\n </SignUpSuccessBody>\n <Button\n flavor=\"primary\"\n label=\"Login\"\n onClick={goToIntake}\n />\n </SignUpSuccessWrapper>\n );\n};\n\nSignUpSuccess.propTypes = {\n campaign: PropTypes.object.isRequired,\n};\n\nconst RegisterFormWrapper = ({ campaign, registerUser }) => {\n const [step, setStep] = React.useState(0);\n const [registerError, setRegisterError] = React.useState('');\n\n const goToNextStep = () => {\n setStep(s => s + 1);\n };\n\n const goToFirstStep = () => {\n setStep(0);\n };\n\n if (step === 2) {\n return <SignUpSuccess campaign={campaign} />;\n }\n\n return (\n <RegisterForm\n campaign={campaign}\n goToFirstStep={goToFirstStep}\n goToNextStep={goToNextStep}\n registerError={registerError}\n registerUser={registerUser}\n setRegisterError={setRegisterError}\n step={step}\n validationSchema={validationsSchemas[step]}\n />\n );\n};\n\nRegisterFormWrapper.propTypes = {\n campaign: PropTypes.object.isRequired,\n registerUser: PropTypes.func.isRequired,\n};\n\nexport default graphql({\n mutation: registerCampaignUser,\n name: 'registerUser',\n namespace: '_registerCampaignUser',\n type: 'Mutation',\n})(RegisterFormWrapper);\n"
}
}
[Trace - 12:43:27] Received request 'workspace/configuration - (6)'.
Params: {
"items": [
{
"scopeUri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/public/intakes/register.jsx",
"section": ""
}
]
}
[Trace - 12:43:27] Sending response 'workspace/configuration - (6)'. Processing request took 1ms
Result: [
{
"packageManager": "npm",
"quiet": false,
"validate": true,
"autoFix": true,
"autoFixOnSave": false,
"autoFixSkipRules": [],
"options": {},
"run": "onType",
"workspaceFolder": {
"uri": "file:///home/channi16/imec/innovatrix",
"name": "innovatrix"
},
"codeAction": {
"disableRuleComment": {
"enable": true,
"location": "separateLine"
},
"showDocumentation": {
"enable": true
}
}
}
]
[Trace - 12:43:27] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/public/intakes/register.jsx",
"diagnostics": []
}
[Trace - 12:45:02] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 2
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:03] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": []
}
[Trace - 12:45:03] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 3
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\n\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:03] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "More than 2 blank lines not allowed. (no-multiple-empty-lines)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 97,
"character": 0
},
"end": {
"line": 100,
"character": 0
}
},
"code": "no-multiple-empty-lines"
}
]
}
[Trace - 12:45:08] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 4
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nc\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:08] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Expected an assignment or function call and instead saw an expression. (no-unused-expressions)",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 0
},
"end": {
"line": 98,
"character": 1
}
},
"code": "no-unused-expressions"
},
{
"message": "'c' is not defined. (no-undef)",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 0
},
"end": {
"line": 98,
"character": 1
}
},
"code": "no-undef"
},
{
"message": "Missing semicolon. (semi)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 1
},
"end": {
"line": 98,
"character": 1
}
},
"code": "semi"
}
]
}
[Trace - 12:45:09] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 5
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst \n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:09] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Parsing error: Unexpected keyword 'const'\n\n 99 | const \n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 100,
"character": 0
},
"end": {
"line": 100,
"character": 0
}
},
"code": null
}
]
}
[Trace - 12:45:09] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 6
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst A\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:09] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Parsing error: Unexpected token\n\n 99 | const A\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 100,
"character": 0
},
"end": {
"line": 100,
"character": 0
}
},
"code": null
}
]
}
[Trace - 12:45:09] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 7
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst Ad\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:09] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Parsing error: Unexpected token\n\n 99 | const Ad\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 100,
"character": 0
},
"end": {
"line": 100,
"character": 0
}
},
"code": null
}
]
}
[Trace - 12:45:11] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 8
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst Advice\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:11] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Parsing error: Unexpected token\n\n 99 | const Advice\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 100,
"character": 0
},
"end": {
"line": 100,
"character": 0
}
},
"code": null
}
]
}
[Trace - 12:45:12] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 9
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceClo\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:12] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Parsing error: Unexpected token\n\n 99 | const AdviceClo\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 100,
"character": 0
},
"end": {
"line": 100,
"character": 0
}
},
"code": null
}
]
}
[Trace - 12:45:12] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 10
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceClos\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:12] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 11
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceClose\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:12] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Parsing error: Unexpected token\n\n 99 | const AdviceClos\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 100,
"character": 0
},
"end": {
"line": 100,
"character": 0
}
},
"code": null
}
]
}
[Trace - 12:45:12] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Parsing error: Unexpected token\n\n 99 | const AdviceClose\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 100,
"character": 0
},
"end": {
"line": 100,
"character": 0
}
},
"code": null
}
]
}
[Trace - 12:45:13] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 12
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseI\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:13] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Parsing error: Unexpected token\n\n 99 | const AdviceCloseI\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 100,
"character": 0
},
"end": {
"line": 100,
"character": 0
}
},
"code": null
}
]
}
[Trace - 12:45:13] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 13
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIc\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:13] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Parsing error: Unexpected token\n\n 99 | const AdviceCloseIc\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 100,
"character": 0
},
"end": {
"line": 100,
"character": 0
}
},
"code": null
}
]
}
[Trace - 12:45:14] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 14
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIco\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:14] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 15
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:14] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Parsing error: Unexpected token\n\n 99 | const AdviceCloseIco\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 100,
"character": 0
},
"end": {
"line": 100,
"character": 0
}
},
"code": null
}
]
}
[Trace - 12:45:14] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Parsing error: Unexpected token\n\n 99 | const AdviceCloseIcon\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 100,
"character": 0
},
"end": {
"line": 100,
"character": 0
}
},
"code": null
}
]
}
[Trace - 12:45:14] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 16
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon \n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:14] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Parsing error: Unexpected token\n\n 99 | const AdviceCloseIcon \n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 100,
"character": 0
},
"end": {
"line": 100,
"character": 0
}
},
"code": null
}
]
}
[Trace - 12:45:15] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 17
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = \n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:15] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Parsing error: Unexpected token\n\n 99 | const AdviceCloseIcon = \n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 100,
"character": 0
},
"end": {
"line": 100,
"character": 0
}
},
"code": null
}
]
}
[Trace - 12:45:15] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 18
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = s\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:15] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 6
},
"end": {
"line": 98,
"character": 21
}
},
"code": "no-unused-vars"
},
{
"message": "'s' is not defined. (no-undef)",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 24
},
"end": {
"line": 98,
"character": 25
}
},
"code": "no-undef"
},
{
"message": "Missing semicolon. (semi)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 25
},
"end": {
"line": 98,
"character": 25
}
},
"code": "semi"
}
]
}
[Trace - 12:45:15] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 19
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styles\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:16] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 6
},
"end": {
"line": 98,
"character": 21
}
},
"code": "no-unused-vars"
},
{
"message": "'styles' is not defined. (no-undef)",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 24
},
"end": {
"line": 98,
"character": 30
}
},
"code": "no-undef"
},
{
"message": "Missing semicolon. (semi)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 30
},
"end": {
"line": 98,
"character": 30
}
},
"code": "semi"
}
]
}
[Trace - 12:45:16] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 20
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:16] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 6
},
"end": {
"line": 98,
"character": 21
}
},
"code": "no-unused-vars"
},
{
"message": "Missing semicolon. (semi)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 30
},
"end": {
"line": 98,
"character": 30
}
},
"code": "semi"
}
]
}
[Trace - 12:45:18] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 21
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled()\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:19] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 6
},
"end": {
"line": 98,
"character": 21
}
},
"code": "no-unused-vars"
},
{
"message": "Missing semicolon. (semi)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 32
},
"end": {
"line": 98,
"character": 32
}
},
"code": "semi"
}
]
}
[Trace - 12:45:19] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 22
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(C)\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:19] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 6
},
"end": {
"line": 98,
"character": 21
}
},
"code": "no-unused-vars"
},
{
"message": "'C' is not defined. (no-undef)",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 31
},
"end": {
"line": 98,
"character": 32
}
},
"code": "no-undef"
},
{
"message": "Missing semicolon. (semi)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 33
},
"end": {
"line": 98,
"character": 33
}
},
"code": "semi"
}
]
}
[Trace - 12:45:20] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 23
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(Clo)\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:20] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 6
},
"end": {
"line": 98,
"character": 21
}
},
"code": "no-unused-vars"
},
{
"message": "'Clo' is not defined. (no-undef)",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 31
},
"end": {
"line": 98,
"character": 34
}
},
"code": "no-undef"
},
{
"message": "Missing semicolon. (semi)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 35
},
"end": {
"line": 98,
"character": 35
}
},
"code": "semi"
}
]
}
[Trace - 12:45:20] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 24
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:20] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 6
},
"end": {
"line": 98,
"character": 21
}
},
"code": "no-unused-vars"
},
{
"message": "Missing semicolon. (semi)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 41
},
"end": {
"line": 98,
"character": 41
}
},
"code": "semi"
}
]
}
[Trace - 12:45:23] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 25
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)``\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:23] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 6
},
"end": {
"line": 98,
"character": 21
}
},
"code": "no-unused-vars"
},
{
"message": "Missing semicolon. (semi)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 43
},
"end": {
"line": 98,
"character": 43
}
},
"code": "semi"
}
]
}
[Trace - 12:45:25] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 26
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n`\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:25] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 6
},
"end": {
"line": 98,
"character": 21
}
},
"code": "no-unused-vars"
},
{
"message": "Missing semicolon. (semi)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 99,
"character": 1
},
"end": {
"line": 99,
"character": 1
}
},
"code": "semi"
}
]
}
[Trace - 12:45:26] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 27
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:26] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 6
},
"end": {
"line": 98,
"character": 21
}
},
"code": "no-unused-vars"
}
]
}
[Trace - 12:45:32] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 28
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:32] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 6
},
"end": {
"line": 98,
"character": 21
}
},
"code": "no-unused-vars"
}
]
}
[Trace - 12:45:55] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 29
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 12:45:55] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 6
},
"end": {
"line": 98,
"character": 21
}
},
"code": "no-unused-vars"
}
]
}
[Trace - 13:46:58] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 30
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n \n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 13:46:58] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 6
},
"end": {
"line": 98,
"character": 21
}
},
"code": "no-unused-vars"
},
{
"message": "Trailing spaces not allowed. (no-trailing-spaces)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 184,
"character": 0
},
"end": {
"line": 184,
"character": 0
}
},
"code": "no-trailing-spaces"
}
]
}
[Trace - 13:47:02] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 31
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 13:47:02] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 98,
"character": 6
},
"end": {
"line": 98,
"character": 21
}
},
"code": "no-unused-vars"
}
]
}
[Trace - 13:47:02] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 32
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\nAdviceCloseIcon \n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 13:47:02] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Parsing error: Unexpected token, expected \",\"\n\n 185 | AdviceCloseIcon \n 186 | <CloseIcon\n> 187 | color={DANGER}\n | ^\n 188 | height={12}\n 189 | onClick={removeOption}\n 190 | styles={closeStyles}",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 186,
"character": 14
},
"end": {
"line": 186,
"character": 14
}
},
"code": null
}
]
}
[Trace - 13:47:03] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 33
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n AdviceCloseIcon \n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 13:47:03] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Parsing error: Unexpected token, expected \",\"\n\n 185 | AdviceCloseIcon \n 186 | <CloseIcon\n> 187 | color={DANGER}\n | ^\n 188 | height={12}\n 189 | onClick={removeOption}\n 190 | styles={closeStyles}",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 186,
"character": 14
},
"end": {
"line": 186,
"character": 14
}
},
"code": null
}
]
}
[Trace - 13:47:04] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 34
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n AdviceCloseIcon \n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 13:47:04] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Parsing error: Unexpected token, expected \",\"\n\n 185 | AdviceCloseIcon \n 186 | <CloseIcon\n> 187 | color={DANGER}\n | ^\n 188 | height={12}\n 189 | onClick={removeOption}\n 190 | styles={closeStyles}",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 186,
"character": 14
},
"end": {
"line": 186,
"character": 14
}
},
"code": null
}
]
}
[Trace - 13:47:04] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 35
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n AdviceCloseIcon \n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 13:47:04] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Parsing error: Unexpected token, expected \",\"\n\n 185 | AdviceCloseIcon \n 186 | <CloseIcon\n> 187 | color={DANGER}\n | ^\n 188 | height={12}\n 189 | onClick={removeOption}\n 190 | styles={closeStyles}",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 186,
"character": 14
},
"end": {
"line": 186,
"character": 14
}
},
"code": null
}
]
}
[Trace - 13:47:06] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 36
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <AdviceCloseIcon \n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 13:47:06] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Parsing error: Unexpected token\n\n 184 | {isEditable && (\n 185 | <AdviceCloseIcon \n> 186 | <CloseIcon\n | ^\n 187 | color={DANGER}\n 188 | height={12}\n 189 | onClick={removeOption}",
"severity": 1,
"source": "eslint",
"range": {
"start": {
"line": 185,
"character": 12
},
"end": {
"line": 185,
"character": 12
}
},
"code": null
}
]
}
[Trace - 13:47:10] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 37
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <AdviceCloseIcon \n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 13:47:10] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "Trailing spaces not allowed. (no-trailing-spaces)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 184,
"character": 28
},
"end": {
"line": 184,
"character": 28
}
},
"code": "no-trailing-spaces"
}
]
}
[Trace - 13:47:11] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 38
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <AdviceCloseIcon \n color={DANGER}\n height={12}\n onClick={removeOption}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 13:47:11] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "'closeStyles' is assigned a value but never used. (no-unused-vars)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 94,
"character": 6
},
"end": {
"line": 94,
"character": 17
}
},
"code": "no-unused-vars"
},
{
"message": "Trailing spaces not allowed. (no-trailing-spaces)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 184,
"character": 28
},
"end": {
"line": 184,
"character": 28
}
},
"code": "no-trailing-spaces"
}
]
}
[Trace - 13:47:16] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 39
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <AdviceCloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 13:47:16] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "'closeStyles' is assigned a value but never used. (no-unused-vars)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 94,
"character": 6
},
"end": {
"line": 94,
"character": 17
}
},
"code": "no-unused-vars"
}
]
}
[Trace - 13:47:24] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 40
},
"contentChanges": [
{
"text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\n// const closeStyles = css(crossStyles, {\n// marginTop: 0,\n// });\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <AdviceCloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n"
}
]
}
[Trace - 13:47:24] Received notification 'textDocument/publishDiagnostics'.
Params: {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"diagnostics": [
{
"message": "'css' is defined but never used. (no-unused-vars)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 3,
"character": 9
},
"end": {
"line": 3,
"character": 12
}
},
"code": "no-unused-vars"
},
{
"message": "'crossStyles' is defined but never used. (no-unused-vars)",
"severity": 2,
"source": "eslint",
"range": {
"start": {
"line": 19,
"character": 9
},
"end": {
"line": 19,
"character": 20
}
},
"code": "no-unused-vars"
}
]
}
[Trace - 13:47:37] Sending notification 'textDocument/didChange'.
Params: {
"textDocument": {
"uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx",
"version": 41