From ce5bd616fe6ce73f358dcb54df74acbb9cb00ed1 Mon Sep 17 00:00:00 2001 From: Kasim Helil Date: Mon, 12 Apr 2021 13:11:09 -0400 Subject: [PATCH 1/3] Added Rich text editor component --- package-lock.json | 71 ++++++++++++++++++- package.json | 1 + .../inputs/richTextEditor/RichTextEditor.js | 27 +++++++ 3 files changed, 96 insertions(+), 3 deletions(-) create mode 100644 src/components/inputs/richTextEditor/RichTextEditor.js diff --git a/package-lock.json b/package-lock.json index fd5fa7a1..0b4af3db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6923,6 +6923,14 @@ "warning": "^4.0.3" } }, + "cross-fetch": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.4.tgz", + "integrity": "sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==", + "requires": { + "node-fetch": "2.6.1" + } + }, "cross-spawn": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", @@ -8076,6 +8084,23 @@ "dotenv-defaults": "^1.0.2" } }, + "draft-js": { + "version": "0.11.7", + "resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz", + "integrity": "sha512-ne7yFfN4sEL82QPQEn80xnADR8/Q6ALVworbC5UOSzOvjffmYfFsr3xSZtxbIirti14R7Y33EZC5rivpLgIbsg==", + "requires": { + "fbjs": "^2.0.0", + "immutable": "~3.7.4", + "object-assign": "^4.1.1" + }, + "dependencies": { + "immutable": { + "version": "3.7.6", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz", + "integrity": "sha1-E7TTyxK++hVIKib+Gy665kAHHks=" + } + } + }, "duplexer": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", @@ -9413,6 +9438,36 @@ "bser": "2.1.1" } }, + "fbjs": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-2.0.0.tgz", + "integrity": "sha512-8XA8ny9ifxrAWlyhAbexXcs3rRMtxWcs3M0lctLfB49jRDHiaxj+Mo0XxbwE7nKZYzgCFoq64FS+WFd4IycPPQ==", + "requires": { + "core-js": "^3.6.4", + "cross-fetch": "^3.0.4", + "fbjs-css-vars": "^1.0.0", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + }, + "dependencies": { + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "~2.0.3" + } + } + } + }, + "fbjs-css-vars": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz", + "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==" + }, "figgy-pudding": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz", @@ -15002,6 +15057,11 @@ "minimatch": "^3.0.2" } }, + "node-fetch": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", + "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==" + }, "node-forge": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz", @@ -21404,6 +21464,11 @@ "is-typedarray": "^1.0.0" } }, + "ua-parser-js": { + "version": "0.7.27", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.27.tgz", + "integrity": "sha512-eXMaRYK2skomGocoX0x9sBXzx5A1ZVQgXfrW4mTc8dT0zS7olEcyfudAzRC5tIIRgLxQ69B6jut3DI+n5hslPA==" + }, "uncontrollable": { "version": "7.2.1", "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", @@ -22585,9 +22650,9 @@ "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==" }, "y18n": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz", - "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==" + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", + "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==" }, "yallist": { "version": "3.1.1", diff --git a/package.json b/package.json index 8b8c9ef9..3d50bdb1 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "bootstrap": "^4.4.1", "dexie": "^3.0.3", "dotenv-webpack": "^1.8.0", + "draft-js": "^0.11.7", "font-awesome": "^4.7.0", "i18next": "^19.7.0", "js-cookie": "^2.2.1", diff --git a/src/components/inputs/richTextEditor/RichTextEditor.js b/src/components/inputs/richTextEditor/RichTextEditor.js new file mode 100644 index 00000000..cf9af436 --- /dev/null +++ b/src/components/inputs/richTextEditor/RichTextEditor.js @@ -0,0 +1,27 @@ +import React, { useEffect, useRef, useState } from "react"; +import { Editor, EditorState } from "draft-js"; + +const RichTextEditor = props => { + const [editorState, setEditorState] = useState(EditorState.createEmpty()); + const editor = useRef(null); + + const focusEditor = () => { + editor.current.focus(); + }; + + const onChange = editorState => { + setEditorState(editorState); + }; + + useEffect(() => { + focusEditor(); + }, []); + + return ( +
+ +
+ ); +}; + +export default RichTextEditor; From d0462620459d54cfe59aa89d973fe5248eb01fb7 Mon Sep 17 00:00:00 2001 From: Kasim Helil Date: Wed, 7 Jul 2021 00:38:42 -0400 Subject: [PATCH 2/3] Added rich text editor --- .../eventNotesModal/EventNotesModal.js | 18 ++++++-- .../inputs/richTextEditor/RichTextEditor.js | 36 +++++++++------ .../inputs/richTextEditor/RichTextEditor.scss | 16 +++++++ .../inputs/richTextEditor/constants.js | 43 +++++++++++++++++ .../inputs/richTextEditor/toolbar/Toolbar.js | 46 +++++++++++++++++++ .../richTextEditor/toolbar/Toolbar.scss | 7 +++ .../toolbar/toolbarItem/ToolbarItem.js | 17 +++++++ .../toolbar/toolbarItem/ToolbarItem.scss | 29 ++++++++++++ src/components/labelledInput/LabelledInput.js | 28 +++++++++++ src/services/serviceWrapper.js | 2 +- 10 files changed, 222 insertions(+), 20 deletions(-) create mode 100644 src/components/inputs/richTextEditor/RichTextEditor.scss create mode 100644 src/components/inputs/richTextEditor/constants.js create mode 100644 src/components/inputs/richTextEditor/toolbar/Toolbar.js create mode 100644 src/components/inputs/richTextEditor/toolbar/Toolbar.scss create mode 100644 src/components/inputs/richTextEditor/toolbar/toolbarItem/ToolbarItem.js create mode 100644 src/components/inputs/richTextEditor/toolbar/toolbarItem/ToolbarItem.scss diff --git a/src/components/eventNotesModal/EventNotesModal.js b/src/components/eventNotesModal/EventNotesModal.js index 7e3384a6..d89c13ba 100644 --- a/src/components/eventNotesModal/EventNotesModal.js +++ b/src/components/eventNotesModal/EventNotesModal.js @@ -20,6 +20,14 @@ const EventNotesModal = props => { const [notTypes, setNoteTypes] = useState([]); const { getCachedCoreFields } = useContext(LookupContext); + const paramCallback = params => { + const parsedParams = params[1]; + const note = parsedParams["rtfNote"]; + + parsedParams["plainTextNote"] = note.plainText; + parsedParams["rtfNote"] = note.richTextFormat; + return [params[0], parsedParams]; + }; const handleClose = (status, res) => { setShow(false); if (hasData(props.callback)) props.callback(status, res); @@ -81,6 +89,7 @@ const EventNotesModal = props => { afterProcessed={handleClose} recordId={paxId} cancellable + paramCallback={paramCallback} > { options={notTypes} /> Notes} - name="plainTextNote" + inputtype="richText" + name="rtfNote" alt={Notes} - datafield="plainTextNote" + datafield="rtfNote" required="required" - inputval="" + placeholder="Add notes here..." /> diff --git a/src/components/inputs/richTextEditor/RichTextEditor.js b/src/components/inputs/richTextEditor/RichTextEditor.js index cf9af436..32c917fb 100644 --- a/src/components/inputs/richTextEditor/RichTextEditor.js +++ b/src/components/inputs/richTextEditor/RichTextEditor.js @@ -1,25 +1,33 @@ -import React, { useEffect, useRef, useState } from "react"; -import { Editor, EditorState } from "draft-js"; - +import React, { useState } from "react"; +import { Editor, EditorState, convertToRaw } from "draft-js"; +import "draft-js/dist/Draft.css"; +import "./RichTextEditor.scss"; +import Toolbar from "./toolbar/Toolbar"; +import { toolbarItems } from "./constants"; const RichTextEditor = props => { const [editorState, setEditorState] = useState(EditorState.createEmpty()); - const editor = useRef(null); - - const focusEditor = () => { - editor.current.focus(); - }; const onChange = editorState => { + const plainText = editorState.getCurrentContent().getPlainText(""); + const richTextFormat = convertToRaw(editorState.getCurrentContent()); setEditorState(editorState); + props.callback({ plainText: plainText, richTextFormat: richTextFormat }); }; - useEffect(() => { - focusEditor(); - }, []); - return ( -
- +
+ +
); }; diff --git a/src/components/inputs/richTextEditor/RichTextEditor.scss b/src/components/inputs/richTextEditor/RichTextEditor.scss new file mode 100644 index 00000000..2498f0fe --- /dev/null +++ b/src/components/inputs/richTextEditor/RichTextEditor.scss @@ -0,0 +1,16 @@ +.rte-container { + min-height: 200px; + box-sizing: border-box; + border: 1px solid #ddd; + cursor: text; + padding: 16px; + border-radius: 2px; + margin-bottom: 2em; + box-shadow: inset 0px 1px 8px -3px #ababab; + background: #fefefe; +} +.DraftEditor-editorContainer, +.DraftEditor-root, +.public-DraftEditor-content { + min-height: 150px; +} diff --git a/src/components/inputs/richTextEditor/constants.js b/src/components/inputs/richTextEditor/constants.js new file mode 100644 index 00000000..1a992359 --- /dev/null +++ b/src/components/inputs/richTextEditor/constants.js @@ -0,0 +1,43 @@ +import React from "react"; +export const styleType = { + INLINE: "inline", + BLOCK: "block" +}; +export const toolbarItems = [ + { + label: "bold", + style: "BOLD", + type: styleType.INLINE, + icon: + }, + { + label: "italic", + style: "ITALIC", + type: styleType.INLINE, + icon: + }, + { + label: "underline", + style: "UNDERLINE", + type: styleType.INLINE, + icon: + }, + { + label: "h", + style: "header-two", + type: styleType.BLOCK + // icon: + }, + { + label: "ul", + style: "unordered-list-item", + type: styleType.BLOCK, + icon: + }, + { + label: "ol", + style: "ordered-list-item", + type: styleType.BLOCK, + icon: + } +]; diff --git a/src/components/inputs/richTextEditor/toolbar/Toolbar.js b/src/components/inputs/richTextEditor/toolbar/Toolbar.js new file mode 100644 index 00000000..2cd5539c --- /dev/null +++ b/src/components/inputs/richTextEditor/toolbar/Toolbar.js @@ -0,0 +1,46 @@ +import React from "react"; +import { Row } from "react-bootstrap"; +import { asArray } from "../../../../utils/utils"; +import ToolbarItem from "./toolbarItem/ToolbarItem"; +import { RichUtils } from "draft-js"; +import "./Toolbar.scss"; +import { styleType } from "../constants"; + +const Toolbar = props => { + const editorState = props.editorState; + const onChange = props.onChange; + + const applyInlineStyle = style => { + onChange(RichUtils.toggleInlineStyle(editorState, style)); + }; + const applyBlockStyle = style => { + onChange(RichUtils.toggleBlockType(editorState, style)); + }; + + const isActive = style => { + const currentStyle = editorState.getCurrentInlineStyle(); + return currentStyle.has(style); + }; + + const onClick = (e, style, type) => { + e.preventDefault(); + + type === styleType.BLOCK ? applyBlockStyle(style) : applyInlineStyle(style); + }; + + return ( +
+ {asArray(props.toolbarItems).map((item, index) => ( + onClick(e, item.style, item.type)} + key={`${item.label}-${index}`} + > + {item.icon || item.label} + + ))} +
+ ); +}; + +export default Toolbar; diff --git a/src/components/inputs/richTextEditor/toolbar/Toolbar.scss b/src/components/inputs/richTextEditor/toolbar/Toolbar.scss new file mode 100644 index 00000000..b2c817f9 --- /dev/null +++ b/src/components/inputs/richTextEditor/toolbar/Toolbar.scss @@ -0,0 +1,7 @@ +.toolbar-row { + display: flex; + flex-wrap: nowrap; + align-content: center; + margin-bottom: 5px; + border-bottom: 1px solid #ddd; +} diff --git a/src/components/inputs/richTextEditor/toolbar/toolbarItem/ToolbarItem.js b/src/components/inputs/richTextEditor/toolbar/toolbarItem/ToolbarItem.js new file mode 100644 index 00000000..509c966f --- /dev/null +++ b/src/components/inputs/richTextEditor/toolbar/toolbarItem/ToolbarItem.js @@ -0,0 +1,17 @@ +import React from "react"; +import "./ToolbarItem.scss"; + +const ToolbarItem = props => { + return ( +
+ {props.children} +
+ ); +}; + +export default ToolbarItem; diff --git a/src/components/inputs/richTextEditor/toolbar/toolbarItem/ToolbarItem.scss b/src/components/inputs/richTextEditor/toolbar/toolbarItem/ToolbarItem.scss new file mode 100644 index 00000000..737ca0a7 --- /dev/null +++ b/src/components/inputs/richTextEditor/toolbar/toolbarItem/ToolbarItem.scss @@ -0,0 +1,29 @@ +.toolbar-item { + width: 20px; + height: 20px; + display: flex; + justify-content: center; + align-items: center; + margin-right: 3px; + box-shadow: 0px 1px 11px 1px rgba(15, 15, 15, 0.2); + background-color: #34495e; + color: #fff; + font-size: 13px; + transition: all 250ms ease-in-out; + cursor: pointer; +} +.active-toolbar-item { + transform: translateY(1px); + color: #34495e; + background-color: transparent; + box-shadow: none; + border: 1px solid #34495e; +} + +.toolbar-item:hover { + transform: translateY(1px); + color: #34495e; + background-color: transparent; + box-shadow: none; + border: 1px solid #34495e; +} diff --git a/src/components/labelledInput/LabelledInput.js b/src/components/labelledInput/LabelledInput.js index 1b603220..bb7357d1 100644 --- a/src/components/labelledInput/LabelledInput.js +++ b/src/components/labelledInput/LabelledInput.js @@ -15,6 +15,7 @@ import { hasData, alt } from "../../utils/utils"; import ReactDateTimePicker from "../inputs/dateTimePicker/DateTimePicker"; import { FormGroup } from "react-bootstrap"; import "./LabelledInput.css"; +import RichTextEditor from "../inputs/richTextEditor/RichTextEditor"; const textTypes = ["text", "number", "password", "email", "search", "tel"]; const boolTypes = ["radio", "checkbox", "toggle"]; @@ -24,6 +25,7 @@ const textareaType = "textarea"; const fileType = "file"; const REQUIRED = "required"; const dateTime = "dateTime"; +const richText = "richText"; // TODO - refac as a passthru hook!!! // Pass props through directly, remove all awareness of specific child types @@ -36,6 +38,7 @@ class LabelledInput extends Component { this.onChangeArray = this.onChangeArray.bind(this); this.onMultiSelectChange = this.onMultiSelectChange.bind(this); this.onChangeDatePicker = this.onChangeDatePicker.bind(this); + this.onRichTextEditorChange = this.onRichTextEditorChange.bind(this); this.state = { isValid: true, @@ -92,6 +95,14 @@ class LabelledInput extends Component { this.props.callback({ value: e, name: this.props.name }); } + onRichTextEditorChange(editorState) { + this.setState({ + inputval: editorState, + isValid: hasData(editorState) || this.props.required !== REQUIRED + }); + this.props.callback({ value: editorState, name: this.props.name }); + } + //APB - REFACTOR getInputByType() { const type = this.props.inputtype; @@ -234,6 +245,23 @@ class LabelledInput extends Component { ); } + if (type === richText) { + return ( + + ); + } + return null; } diff --git a/src/services/serviceWrapper.js b/src/services/serviceWrapper.js index e394e154..84c08031 100644 --- a/src/services/serviceWrapper.js +++ b/src/services/serviceWrapper.js @@ -181,7 +181,7 @@ export const paxEventNotesHistory = { const tempBody = { ...body, noteType: [body.noteType], - rtfNote: `
${body.plainTextNote}
`, //this should be fixed + rtfNote: stringify(body.rtfNote), passengerId: paxId }; return post(`${PAX}/note`, BASEHEADER, stringify(tempBody)); From debddd2fdf585f3da1ebf5636ef488eecc9c572a Mon Sep 17 00:00:00 2001 From: Kasim Helil Date: Thu, 8 Jul 2021 00:04:38 -0400 Subject: [PATCH 3/3] Display rich text value on summary page --- src/components/cardWithTable/CardWithTable.js | 8 ++++--- .../inputs/richTextEditor/RichTextEditor.js | 24 +++++++++++-------- .../inputs/richTextEditor/RichTextEditor.scss | 1 + .../toolbar/toolbarItem/ToolbarItem.scss | 16 ++++++------- src/pages/paxDetail/summary/Summary.js | 11 ++++++--- 5 files changed, 36 insertions(+), 24 deletions(-) diff --git a/src/components/cardWithTable/CardWithTable.js b/src/components/cardWithTable/CardWithTable.js index 55fc5baa..dcf85df9 100644 --- a/src/components/cardWithTable/CardWithTable.js +++ b/src/components/cardWithTable/CardWithTable.js @@ -47,7 +47,9 @@ const CardWithTable = props => { const tableData = Object.keys(headers).map((key, index) => { const td = row[key]; - const triggerOverlay = !isShortText(td, textDisplayLimit); + const getShortTextFrom = row.getShortTextFrom || key; + const shorText = row[getShortTextFrom]; + const triggerOverlay = !isShortText(shorText, textDisplayLimit); const triggerTooltip = needsTooltip(key); let safeVal = td?.props?.children || td; safeVal = toolTipLKMap[key] === LK.CARRIER && td.length === 6 ? td.slice(0, 2) : td; @@ -59,7 +61,7 @@ const CardWithTable = props => { )} - {getShortText(td, textDisplayLimit)} + {getShortText(shorText, textDisplayLimit)} @@ -69,7 +71,7 @@ const CardWithTable = props => { )} - {getShortText(td, textDisplayLimit)} + {getShortText(shorText, textDisplayLimit)} ) : ( diff --git a/src/components/inputs/richTextEditor/RichTextEditor.js b/src/components/inputs/richTextEditor/RichTextEditor.js index 32c917fb..aa276b2b 100644 --- a/src/components/inputs/richTextEditor/RichTextEditor.js +++ b/src/components/inputs/richTextEditor/RichTextEditor.js @@ -1,14 +1,17 @@ import React, { useState } from "react"; -import { Editor, EditorState, convertToRaw } from "draft-js"; +import { Editor, EditorState, convertToRaw, convertFromRaw } from "draft-js"; import "draft-js/dist/Draft.css"; import "./RichTextEditor.scss"; import Toolbar from "./toolbar/Toolbar"; import { toolbarItems } from "./constants"; +import { hasData } from "../../../utils/utils"; const RichTextEditor = props => { - const [editorState, setEditorState] = useState(EditorState.createEmpty()); - + const initState = hasData(props.content) + ? EditorState.createWithContent(convertFromRaw(props.content)) + : EditorState.createEmpty(); + const [editorState, setEditorState] = useState(initState); const onChange = editorState => { - const plainText = editorState.getCurrentContent().getPlainText(""); + const plainText = editorState.getCurrentContent().getPlainText(". "); const richTextFormat = convertToRaw(editorState.getCurrentContent()); setEditorState(editorState); props.callback({ plainText: plainText, richTextFormat: richTextFormat }); @@ -16,17 +19,18 @@ const RichTextEditor = props => { return (
- + {!props.readOnly && ( + + )}
); diff --git a/src/components/inputs/richTextEditor/RichTextEditor.scss b/src/components/inputs/richTextEditor/RichTextEditor.scss index 2498f0fe..bcdf3cd1 100644 --- a/src/components/inputs/richTextEditor/RichTextEditor.scss +++ b/src/components/inputs/richTextEditor/RichTextEditor.scss @@ -12,5 +12,6 @@ .DraftEditor-editorContainer, .DraftEditor-root, .public-DraftEditor-content { + color: black !important; min-height: 150px; } diff --git a/src/components/inputs/richTextEditor/toolbar/toolbarItem/ToolbarItem.scss b/src/components/inputs/richTextEditor/toolbar/toolbarItem/ToolbarItem.scss index 737ca0a7..d51426c9 100644 --- a/src/components/inputs/richTextEditor/toolbar/toolbarItem/ToolbarItem.scss +++ b/src/components/inputs/richTextEditor/toolbar/toolbarItem/ToolbarItem.scss @@ -6,24 +6,24 @@ align-items: center; margin-right: 3px; box-shadow: 0px 1px 11px 1px rgba(15, 15, 15, 0.2); - background-color: #34495e; - color: #fff; + background-color: #c3d1df; + color: #34495e; font-size: 13px; transition: all 250ms ease-in-out; cursor: pointer; } .active-toolbar-item { transform: translateY(1px); - color: #34495e; - background-color: transparent; + color: #fff; + background-color: #34495e; box-shadow: none; - border: 1px solid #34495e; + border: 1px solid #c3d1df; } .toolbar-item:hover { transform: translateY(1px); - color: #34495e; - background-color: transparent; + color: #c3d1df; + background-color: #34495e; box-shadow: none; - border: 1px solid #34495e; + border: 1px solid #c3d1df; } diff --git a/src/pages/paxDetail/summary/Summary.js b/src/pages/paxDetail/summary/Summary.js index 066babdd..3f83e25e 100644 --- a/src/pages/paxDetail/summary/Summary.js +++ b/src/pages/paxDetail/summary/Summary.js @@ -23,6 +23,7 @@ import { HIT_STATUS } from "../../../utils/constants"; import { Link } from "@reach/router"; import { CardColumns } from "react-bootstrap"; import "./Summary.scss"; +import RichTextEditor from "../../../components/inputs/richTextEditor/RichTextEditor"; const Summary = props => { const headers = { @@ -49,7 +50,7 @@ const Summary = props => { ruleConditions: Conditions }, eventNotes: { - plainTextNote: Note, + notes: Note, noteType: Note Type, createdBy: Created By, createdAt: Created At @@ -151,7 +152,9 @@ const Summary = props => { return { ...note, createdAt: localeDate(note.createdAt), - noteType: type.toString() + noteType: type.toString(), + getShortTextFrom: "plainTextNote", + notes: }; }); setEventNotes(notesData); @@ -166,7 +169,9 @@ const Summary = props => { return { ...note, createdAt: localeDate(note.createdAt), - noteType: type.toString() + noteType: type.toString(), + getShortTextFrom: "plainTextNote", + notes: }; }) .slice(0, 10);